/*
Theme Name: Scrapbook Binder
Theme URI: https://example.com/
Author: Shawn Bashaw
Description: Scrapbook / three-ring binder layout theme built for WPBakery Page Builder. Provides a binder frame, tabbed page navigation, torn-paper surfaces, washi tape, and a set of custom builder elements.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scrapbook-binder
Tags: custom-menu, featured-images, translation-ready, full-width-template
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Binder + paper */
	--cdr-binder:        #4a3a72;
	--cdr-binder-dark:   #382a58;
	--cdr-binder-light:  #6a57a0;
	--cdr-paper:         #fbf6e9;
	--cdr-paper-2:       #f4ecd8;
	--cdr-kraft:         #e6d9bd;
	--cdr-kraft-dark:    #cdbb96;
	--cdr-edge:          #d9cbae;
	/* Dashed frames and stitch lines. Deliberately darker than --cdr-kraft-dark,
	   which is a surface colour — a dash needs more contrast than a fill to
	   register at 2px. Change here and every dashed line on the page follows. */
	--cdr-dash:          #a3855c;

	/* Ink */
	--cdr-ink:           #4a3a72;
	--cdr-ink-soft:      #6b6076;
	--cdr-ink-muted:     #8d8496;

	/* Paper ruling */
	--cdr-rule:          rgba(120, 96, 58, .20);
	--cdr-rule-gap:      30px;

	/* Tab palette — cycled across the nav and reusable as accents */
	--cdr-c1: #e0596b; /* coral   */
	--cdr-c2: #e08a3c; /* orange  */
	--cdr-c3: #e5b83f; /* gold    */
	--cdr-c4: #a8b556; /* olive   */
	--cdr-c5: #4fa8a5; /* teal    */
	--cdr-c6: #9b8bc4; /* lavender*/
	--cdr-c7: #e79ab5; /* pink    */
	--cdr-c8: #6fb0c4; /* sky     */

	/* Type */
	--cdr-font-script: "Caveat", "Segoe Script", cursive;
	--cdr-font-hand:   "Kalam", "Comic Sans MS", cursive;
	--cdr-font-ui:     "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Metrics */
	--cdr-radius:      10px;
	--cdr-radius-lg:   16px;
	--cdr-gap:         20px;
	--cdr-spine:      132px;   /* binder spine width on desktop */
	--cdr-shadow:      0 2px 6px rgba(60, 45, 30, .14);
	--cdr-shadow-lift: 0 8px 20px rgba(60, 45, 30, .20);
	--cdr-max:         1640px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--cdr-font-ui);
	font-size: 17px;
	line-height: 1.55;
	color: var(--cdr-ink-soft);
	background: #171018;
	background-image:
		radial-gradient(circle at 20% 10%, rgba(255,255,255,.05), transparent 55%),
		linear-gradient(160deg, #241a2b 0%, #14101a 100%);
	min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cdr-binder); text-decoration: none; }
a:hover { color: var(--cdr-c1); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cdr-font-hand);
	color: var(--cdr-ink);
	margin: 0 0 .5em;
	line-height: 1.2;
	font-weight: 700;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.cdr-screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. BINDER FRAME
   ========================================================================== */

.cdr-stage {
	max-width: var(--cdr-max);
	margin: 0 auto;
	padding: 18px 16px 30px;
}

.cdr-binder {
	position: relative;
	display: grid;
	grid-template-columns: var(--cdr-spine) 1fr;
	background: var(--cdr-binder);
	border-radius: 6px 14px 14px 6px;
	box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
	overflow: hidden;
}

/* Stitched leather spine.
   The grain is four offset dot-fields tiled at prime-ish sizes so the
   pattern never visibly repeats, over two crease hatchings, over the
   sheen gradient that gives the cover its roll. */
.cdr-spine {
	position: relative;
	background-color: var(--cdr-binder);
	background-image:
		radial-gradient(circle at 32% 30%, rgba(255,255,255,.075) 0 1px, transparent 1.6px),
		radial-gradient(circle at 72% 62%, rgba(0,0,0,.20) 0 1.4px, transparent 2px),
		radial-gradient(circle at 18% 78%, rgba(0,0,0,.14) 0 1px, transparent 1.6px),
		radial-gradient(circle at 86% 16%, rgba(255,255,255,.05) 0 1px, transparent 1.5px),
		repeating-linear-gradient(112deg, rgba(0,0,0,.055) 0 2px, transparent 2px 9px),
		repeating-linear-gradient( 23deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
		linear-gradient(90deg, var(--cdr-binder-dark) 0%, var(--cdr-binder-light) 26%, var(--cdr-binder) 62%, var(--cdr-binder-dark) 100%);
	background-size: 13px 13px, 17px 17px, 11px 11px, 19px 19px, auto, auto, auto;
	box-shadow:
		inset -3px 0 6px rgba(0,0,0,.35),
		inset  3px 0 5px rgba(0,0,0,.30);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Hearts are separate flex items now, so this gap lands twice between any
	   two words. 16px keeps word-to-word close to where 24px had it before. */
	gap: 16px;
	padding: 46px 14px;
	color: rgba(255,255,255,.82);
	font-family: var(--cdr-font-hand);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .085em;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
}

/* Stitch lines running the length of the cover.
   Gradients rather than a dashed border: a 1px browser dash is too fine and
   too evenly broken to read as thread, and you can't control the stitch
   length. This gives 7px stitches with 6px gaps at 2px wide, in a dark grey
   that reads as thread pulled into the leather rather than a drawn line.
   Inset pulled in to 8px top and bottom so the run is nearly full height. */
.cdr-spine::before {
	content: "";
	position: absolute;
	inset: 10px 11px;
	background:
		/* Thread. Nearly black so it reads as a channel in the leather. */
		repeating-linear-gradient(180deg, rgba(16,12,24,.92) 0 7px, transparent 7px 13px) 0    0 / 2px 100% no-repeat,
		repeating-linear-gradient(180deg, rgba(16,12,24,.92) 0 7px, transparent 7px 13px) 100% 0 / 2px 100% no-repeat,
		/* Highlight, offset one pixel down and out — the lit edge of the dent
		   the stitch pulls into the surface. Without it the thread is just a
		   dark mark; with it the eye reads a groove. */
		repeating-linear-gradient(180deg, rgba(255,255,255,.20) 0 7px, transparent 7px 13px) -1px 1px / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, rgba(255,255,255,.20) 0 7px, transparent 7px 13px) calc(100% + 1px) 1px / 1px 100% no-repeat;
	/* Soft dark bloom under the whole run, so the stitch line sits in shadow
	   rather than floating on flat colour. */
	box-shadow:
		inset  3px 0 7px -3px rgba(0,0,0,.45),
		inset -3px 0 7px -3px rgba(0,0,0,.45);
	pointer-events: none;
}

.cdr-spine__mark { display: block; opacity: .9; }

/* Heart separator. A flex item in its own right, so the column gap sits
   evenly above and below it instead of bunching it under the word above. */
.cdr-spine__sep { display: block; line-height: 0; }

/* Any icon dropped into the spine must be pinned to a size, or the browser
   falls back to the SVG default (300x150) and stretches the whole binder. */
.cdr-spine svg {
	display: block;
	width: 19px;
	height: 19px;
	margin: 0 auto;
	fill: rgba(255,255,255,.5);
	/* Outlined icons (the heart) stroke with currentColor, so `color` is what
	   tints them — `fill` above only reaches the solid ones. */
	color: rgba(255,255,255,.62);
}

/* Silver eyelets set into the purple binding.
   These sit entirely ON the cover — they do not overlap the paper. */
.cdr-rings {
	position: absolute;
	left: 0;
	top: 0; bottom: 0;
	width: var(--cdr-spine);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 12% 0;
	pointer-events: none;
	z-index: 6;
}

.cdr-ring {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(from 215deg, #fdfdfe, #8b919c, #f4f6f9, #71777f, #e9ebef, #fdfdfe);
	box-shadow:
		0 2px 5px rgba(0,0,0,.5),
		inset 0 0 0 1px rgba(0,0,0,.22);
}

/* The punched hole through the middle of the eyelet.
   Dark, because you're looking THROUGH the cover rather than at paper behind
   it. Flat black reads as a sticker, so the fill is an off-centre radial that
   lifts slightly at the top, and the inner shadow does the rest. */
.cdr-ring::after {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 34%, #39343f 0%, #17141c 60%, #0a080e 100%);
	box-shadow:
		inset 0 2px 5px rgba(0,0,0,.9),
		0 1px 0 rgba(255,255,255,.14);
}

/* Backing page behind the visible sheet — ruled like notebook paper */
.cdr-pages {
	position: relative;
	padding: 12px 14px 0;
	background-color: var(--cdr-kraft);
	background-image:
		repeating-linear-gradient(
			180deg,
			transparent 0 calc(var(--cdr-rule-gap) - 1px),
			var(--cdr-rule) calc(var(--cdr-rule-gap) - 1px) var(--cdr-rule-gap)
		),
		radial-gradient(circle at 80% 0%, rgba(255,255,255,.45), transparent 60%);
	background-position: 0 12px, 0 0;
	overflow: hidden;
}

/* The active sheet.
   The layered under-sheets are drawn as offset shadows rather than
   positioned boxes, so they can never extend past the sheet's edge. */
.cdr-sheet {
	position: relative;
	z-index: 2;
	background: var(--cdr-paper);
	border-radius: var(--cdr-radius);
	/* Extra left padding keeps content clear of the punch-hole column.
	   The generous top value drops the content away from the tab row — the
	   tabs otherwise sit right on top of the first line of copy. */
	padding: 48px 26px 38px 36px;
	min-height: 50vh;
	box-shadow:
		6px 6px 0 -1px #f0e6cd,
		12px 12px 0 -2px var(--cdr-kraft-dark),
		0 10px 24px rgba(60, 45, 30, .22);
}

.cdr-sheet::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Mottling — the uneven stock you get in real cream paper.
	   A fourth technique on purpose: the spine and tabs use dot-fleck, the
	   kraft backer uses a woven crosshatch, and this uses soft blooms. Same
	   method at a different scale would read as one material tiled badly.
	   No background-size, so these size to the element and never repeat — a
	   tiled version of this shows an obvious grid on a sheet this large. */
	background-image:
		radial-gradient(ellipse 70% 50% at 12%  8%, rgba(214,198,164,.16), transparent 70%),
		radial-gradient(ellipse 60% 45% at 88% 32%, rgba(214,198,164,.13), transparent 70%),
		radial-gradient(ellipse 55% 40% at 30% 78%, rgba(255,255,255,.42), transparent 70%),
		radial-gradient(ellipse 65% 50% at 75% 95%, rgba(214,198,164,.12), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* An absolutely positioned pseudo-element paints above static content, so the
   mottle would tint the copy rather than sit under it. Lifting the column
   wrapper only — .cdr-punches is deliberately excluded, since forcing
   position:relative on it would break the punch-hole column. */
.cdr-sheet > .cdr-sheet__cols {
	position: relative;
	z-index: 1;
}

/* --- Main column + shared sidebar ---------------------------------------
   The sidebar is rendered by the theme from a single source page, so it is
   NOT part of any page's WPBakery content. Pages hold their main column only.
   ------------------------------------------------------------------------ */

.cdr-sheet__cols {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 28px;
	align-items: start;
}

/* No sidebar on this request — collapse to one column rather than leaving a
   third of the sheet empty. */
.cdr-sheet__cols--full { grid-template-columns: 1fr; }

.cdr-sheet__main { min-width: 0; }

/* Sticks while the main column scrolls past. Falls back harmlessly on
   browsers or contexts where sticky doesn't apply. */
.cdr-sheet__side {
	min-width: 0;
	position: sticky;
	top: 20px;
}

/* One row running the full width of the sheet, out under the sidebar.
   Needed because page content now lives inside the main column — a bottom
   strip would otherwise stop where the sidebar begins.

   The maths: the columns are 2fr and 1fr, so the sidebar is exactly half the
   main column's width. Extending right by the sidebar plus the gap is
   therefore -50% (percentages resolve against the main column) minus 28px.

   Only valid for rows that sit BELOW the sidebar. If the sidebar were ever
   taller than the content above this row, the two would overlap — which is
   why this is opt-in per row rather than applied to the last row
   automatically. */
.cdr-sheet__cols:not(.cdr-sheet__cols--full) .cdr-row-fullsheet {
	margin-right: calc(-50% - 28px);
}

@media (max-width: 900px) {
	.cdr-sheet__cols { grid-template-columns: 1fr; gap: 22px; }
	.cdr-sheet__side { position: static; }
	/* Single column below this width — nothing to bleed into. */
	.cdr-sheet__cols .cdr-row-fullsheet { margin-right: 0; }
}

/* Punch holes running down the left edge of the paper */
.cdr-punches {
	position: absolute;
	left: 9px; top: 0; bottom: 0;
	width: 11px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	padding: 22px 0;
	z-index: 3;
	pointer-events: none;
}
.cdr-punch {
	width: 9px;
	height: 15px;
	border-radius: 50%;
	background: var(--cdr-kraft);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}

/* Corner tag ("clipped card" at top right of the binder) */
.cdr-corner-tag {
	position: absolute;
	top: 10px; right: 26px;
	z-index: 8;
	background: var(--cdr-paper);
	border: 1px solid var(--cdr-edge);
	border-radius: 4px;
	padding: 14px 22px 12px;
	box-shadow: var(--cdr-shadow);
	transform: rotate(.6deg);
	font-family: var(--cdr-font-script);
	color: var(--cdr-ink);
	text-align: right;
	max-width: 260px;
}

/* Paper clip over the corner tag. Drawn, not an image: an open rounded
   rectangle with its bottom border removed reads as a clip at this size. */
/* (No clip on the corner tag — see the note by .cdr-clip.) */

/* Masthead: brand on its own line, tab row directly beneath it */
.cdr-masthead {
	position: relative;
	z-index: 5;
	padding: 4px 0 0 32px;
}
.cdr-brand { padding: 0 0 6px; }
.cdr-brand a { display: inline-block; }
.cdr-brand .cdr-script { font-size: 34px; font-weight: 700; line-height: 1; }
.cdr-brand img { max-height: 60px; width: auto; }

.cdr-corner-tag__title { font-family: var(--cdr-font-hand); font-size: 18px; color: var(--cdr-ink); }
.cdr-corner-tag__item + .cdr-corner-tag__item { margin-top: 8px; }

/* Entry defaults (posts, archives, search — pages use WPBakery instead) */
.cdr-entry__header { margin-bottom: 18px; }
.cdr-entry__title { font-size: 32px; }
.cdr-entry__content { position: relative; z-index: 2; }
.cdr-entry + .cdr-entry { margin-top: 34px; padding-top: 34px; border-top: 2px dashed var(--cdr-dash); }

.cdr-pagination, .cdr-page-links { margin-top: 28px; }
.cdr-pagination .page-numbers, .cdr-page-links a, .cdr-page-links > span {
	display: inline-block;
	min-width: 34px;
	padding: 6px 10px;
	margin: 0 3px;
	text-align: center;
	border-radius: 4px;
	background: var(--cdr-paper-2);
	color: var(--cdr-ink);
	font-weight: 700;
	font-size: 14px;
}
.cdr-pagination .page-numbers.current, .cdr-page-links > span { background: var(--cdr-binder); color: #fff; }

/* ==========================================================================
   4. TAB NAVIGATION
   ========================================================================== */

.cdr-tabs {
	position: relative;
	z-index: 4;
	margin: 0;
}

.cdr-tabs__toggle { display: none; }

.cdr-tabs ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0;
}

/* Tabs share out the full width of the row rather than sitting at a fixed
   size with dead space after the last one. They grow to fill and shrink
   before they wrap, so the row stays one line across binder widths. */
.cdr-tabs li { margin: 0; flex: 1 1 auto; }

.cdr-tabs a {
	--tab: var(--cdr-c1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	height: 100%;
	min-width: 92px;
	padding: 11px 14px 12px;
	border-radius: 10px 10px 0 0;
	/* Card-stock texture. Four layers, not the spine's seven — these are small
	   elements but there are twelve of them. The 7px and 11px tile sizes don't
	   divide into each other, so the fleck pattern never visibly repeats.
	   Colour is background-COLOR so the active tab can swap it and keep the
	   texture; a `background:` shorthand there would wipe these layers out. */
	background-color: var(--tab);
	background-image:
		radial-gradient(circle at 22% 34%, rgba(255,255,255,.13) 0 1px, transparent 1.5px),
		radial-gradient(circle at 68% 71%, rgba(0,0,0,.08) 0 1px, transparent 1.4px),
		repeating-linear-gradient(96deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
		linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.07) 100%);
	background-size: 7px 7px, 11px 11px, auto, auto;
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.1;
	text-align: center;
	box-shadow: inset 0 -14px 18px rgba(0,0,0,.06), 0 -2px 4px rgba(0,0,0,.12);
	transition: transform .16s ease, filter .16s ease;
}

.cdr-tabs a:hover { transform: translateY(-3px); filter: brightness(1.06); color: #fff; }

.cdr-tabs .cdr-tab__icon { width: 20px; height: 20px; fill: currentColor; }

/* Active tab reads as the front sheet */
.cdr-tabs .current-menu-item > a,
.cdr-tabs .current_page_item > a,
.cdr-tabs .current-menu-ancestor > a {
	/* background-COLOR only — keeps the paper texture from .cdr-tabs a. */
	background-color: var(--cdr-paper);
	color: var(--cdr-ink);
	padding-bottom: 16px;
	margin-bottom: -6px;
	box-shadow: 0 -3px 8px rgba(0,0,0,.14);
}

/* Palette cycling — the walker adds .cdr-tab-N */
.cdr-tabs .cdr-tab-1 > a { --tab: var(--cdr-c1); }
.cdr-tabs .cdr-tab-2 > a { --tab: var(--cdr-c2); }
.cdr-tabs .cdr-tab-3 > a { --tab: var(--cdr-c3); }
.cdr-tabs .cdr-tab-4 > a { --tab: var(--cdr-c4); }
.cdr-tabs .cdr-tab-5 > a { --tab: var(--cdr-c5); }
.cdr-tabs .cdr-tab-6 > a { --tab: var(--cdr-c6); }
.cdr-tabs .cdr-tab-7 > a { --tab: var(--cdr-c7); }
.cdr-tabs .cdr-tab-8 > a { --tab: var(--cdr-c8); }

/* The first tab is pinned rather than cycled.
   On its own page it renders cream, so its palette colour is invisible and
   the cycle happily hands it the same family as its neighbour — which only
   shows once you navigate away and it drops back to a coloured tab. Pinning
   it here is deterministic: it never collides with tab two, whatever the
   cycle does after a menu is reordered.
   Declared after the palette block so it wins on source order. */
.cdr-tabs > ul > li:first-child > a { --tab: var(--cdr-c8); }

/* Sub-menus drop below the tab */
.cdr-tabs li { position: relative; }
.cdr-tabs .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	display: block;
	min-width: 210px;
	flex-direction: column;
	gap: 0;
	background: var(--cdr-paper);
	border: 1px solid var(--cdr-edge);
	border-radius: 0 8px 8px 8px;
	box-shadow: var(--cdr-shadow-lift);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 30;
}
.cdr-tabs li:hover > .sub-menu,
.cdr-tabs li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.cdr-tabs .sub-menu a {
	min-width: 0;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--cdr-ink);
	border-radius: 6px;
	box-shadow: none;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	padding: 8px 10px;
}
.cdr-tabs .sub-menu a:hover { background: var(--cdr-paper-2); transform: none; }

/* ==========================================================================
   5. PAPER SURFACES + DECORATION (reusable "Extra Class Name" utilities)
   ========================================================================== */

.cdr-paper-card,
.cdr-note,
.cdr-notepad,
.cdr-photocard,
.cdr-iconstrip,
.cdr-quicklinks,
.cdr-countdown {
	position: relative;
	background: var(--cdr-paper);
	border-radius: var(--cdr-radius);
	box-shadow: var(--cdr-shadow);
}

/* Dashed frame, set IN from the edge rather than being the edge — same
   treatment as the info strip, so the two read as the same stationery.
   Drawn on a pseudo-element instead of as a border: a border sits exactly on
   the box edge and there's no way to inset it. */
.cdr-dashed {
	position: relative;
	border: 0;
	border-radius: var(--cdr-radius);
	padding: 22px;
}
.cdr-dashed::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed var(--cdr-dash);
	border-radius: calc(var(--cdr-radius) - 3px);
	/* drop-shadow follows the alpha of what's painted, so it shadows the
	   individual dashes rather than boxing the whole frame — which is what a
	   box-shadow would do here, since the element is empty. */
	filter: drop-shadow(0 1px 1px rgba(60,45,30,.35));
	pointer-events: none;
}

/* Torn / deckled bottom edge */

/* Shadow via filter, not box-shadow.
   A box-shadow is drawn from the element's border box, so on a torn card it
   traces a clean rectangle straight across the ragged edge — the one place
   the shadow most needs to follow the shape. drop-shadow works from the
   rendered alpha instead, so it picks up the masked ::after tail and the
   deckle casts properly.
   Two passes: a tight one for contact, a wide soft one for lift. The
   box-shadow inherited from the shared card block is cleared, or the
   rectangle would still be there underneath. */
.cdr-torn {
	position: relative;
	box-shadow: none;
	filter:
		drop-shadow(0 2px 2px rgba(60,45,30,.22))
		drop-shadow(0 10px 18px rgba(60,45,30,.30));
}
.cdr-torn::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -7px;
	height: 10px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M0 0h120v4c-8 3-14-2-22 1s-13 4-21 1-14-3-22 0-13 4-21 1S8 4 0 6z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M0 0h120v4c-8 3-14-2-22 1s-13 4-21 1-14-3-22 0-13 4-21 1S8 4 0 6z'/></svg>");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Washi tape strip */
.cdr-tape { position: relative; }
.cdr-tape::before {
	content: "";
	position: absolute;
	top: -12px; left: 50%;
	width: 88px; height: 26px;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--cdr-tape-color, var(--cdr-c7));
	opacity: .82;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, rgba(0,0,0,.55) 4px 5px);
	mask-image: repeating-linear-gradient(90deg, #000 0 4px, rgba(0,0,0,.55) 4px 5px);
	z-index: 4;
}
.cdr-tape--left::before  { left: 26px; transform: rotate(-6deg); }
.cdr-tape--right::before { left: auto; right: 26px; transform: rotate(5deg); }

.cdr-tape-c1 { --cdr-tape-color: var(--cdr-c1); }
.cdr-tape-c2 { --cdr-tape-color: var(--cdr-c2); }
.cdr-tape-c3 { --cdr-tape-color: var(--cdr-c3); }
.cdr-tape-c4 { --cdr-tape-color: var(--cdr-c4); }
.cdr-tape-c5 { --cdr-tape-color: var(--cdr-c5); }
.cdr-tape-c6 { --cdr-tape-color: var(--cdr-c6); }
.cdr-tape-c7 { --cdr-tape-color: var(--cdr-c7); }

/* Paper clips removed — a clip only reads as real when the paper appears to
   thread through it, and CSS can't put an element half in front of and half
   behind its own parent. Both the plain wire and a drawn metallic version
   ended up looking like a sticker hovering over the page.

   There is deliberately no .cdr-clip rule at all. An earlier version neutered
   it with `content: none`, but that rule sat after .cdr-dashed::before and
   would have wiped the dashed frame off anything carrying both classes.
   With no rule, .cdr-clip is inert on its own and harmless in combination. */

/* Slight tilts for a pinned-by-hand feel */
.cdr-tilt-l  { transform: rotate(-1.1deg); }
.cdr-tilt-r  { transform: rotate(1.1deg); }
.cdr-tilt-l2 { transform: rotate(-2.2deg); }
.cdr-tilt-r2 { transform: rotate(2.2deg); }

/* Handwriting helpers */
.cdr-script  { font-family: var(--cdr-font-script); font-size: 1.9em; line-height: 1.1; color: var(--cdr-ink); }
.cdr-hand    { font-family: var(--cdr-font-hand); }
.cdr-caps    { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.cdr-underline-swash { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--cdr-c7); border-radius: 40%; }

/* Ribbon banner behind a line of text */
.cdr-ribbon {
	display: inline-block;
	background: var(--cdr-c1);
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 14.5px;
	padding: 7px 26px;
	position: relative;
	box-shadow: var(--cdr-shadow);
}
.cdr-ribbon::before,
.cdr-ribbon::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 12px;
	background: inherit;
	filter: brightness(.85);
}
.cdr-ribbon::before { left: -11px;  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.cdr-ribbon::after  { right: -11px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }

/* Buttons */
.cdr-btn {
	display: inline-block;
	background: var(--cdr-binder);
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 11px 26px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: var(--cdr-shadow);
	transition: transform .15s ease, filter .15s ease;
}
.cdr-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.cdr-btn--sm { padding: 8px 18px; font-size: 12px; }
.cdr-btn--c1 { background: var(--cdr-c1); }
.cdr-btn--c2 { background: var(--cdr-c2); }
.cdr-btn--c3 { background: var(--cdr-c3); }
.cdr-btn--c4 { background: var(--cdr-c4); }
.cdr-btn--c5 { background: var(--cdr-c5); }
.cdr-btn--c6 { background: var(--cdr-c6); }
.cdr-btn--c7 { background: var(--cdr-c7); }

/* Pill badge */
.cdr-badge {
	display: inline-block;
	background: var(--cdr-c1);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 4px;
	vertical-align: middle;
}

/* ==========================================================================
   6. BUILDER ELEMENTS
   ========================================================================== */

/* --- 6a. Countdown ------------------------------------------------------ */

.cdr-countdown { padding: 20px 22px 24px; text-align: center; }
.cdr-countdown__eyebrow { font-family: var(--cdr-font-hand); font-size: 22px; color: var(--item, var(--cdr-c1)); margin-bottom: 14px; }
.cdr-countdown__grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.cdr-flip {
	position: relative;
	min-width: 74px;
	padding: 12px 6px 8px;
	border-radius: 8px;
	color: #fff;
	box-shadow: var(--cdr-shadow);
}
/* The flip-clock hinge line across each tile is removed — at this tile size it
   read as a stray mark rather than a fold. Left here as a comment so nobody
   re-adds it wondering why the tiles look plain. */
.cdr-flip:nth-child(1) { background: var(--cdr-binder); }
.cdr-flip:nth-child(2) { background: var(--cdr-c1); }
.cdr-flip:nth-child(3) { background: var(--cdr-c5); }
.cdr-flip:nth-child(4) { background: var(--cdr-c3); }
.cdr-flip:nth-child(5) { background: var(--cdr-c6); }

.cdr-flip__num {
	display: block;
	font-family: var(--cdr-font-ui);
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 3px rgba(0,0,0,.22);
}
.cdr-flip__label {
	display: block;
	margin-top: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .95;
}
.cdr-countdown__caption { font-family: var(--cdr-font-script); font-size: 24px; color: var(--cdr-ink); margin: 14px 0 12px; }

/* --- 6b. Spiral notepad ------------------------------------------------- */

/* Its own sheet of paper: rounder corners and a lifted shadow so it reads as
   a separate card sitting on the kraft panel rather than part of it, and a
   margin so the Quick Links panel below is clearly a second sheet.
   The spiral binding markup is gone — see cdr_sc_notepad() — so the left
   padding that used to clear it goes with it. */
.cdr-notepad {
	padding: 24px 22px 22px;
	border-radius: var(--cdr-radius-lg);
	box-shadow: 0 4px 14px rgba(60,45,30,.24);
	margin-bottom: 26px;
}
.cdr-notepad__inner { padding-left: 0; }
.cdr-notepad__title { font-family: var(--cdr-font-hand); font-size: 24px; margin-bottom: 12px; }

/* Centred variant. Only the ribbon and the button move — the title and the
   rows stay left, because centring a list of varying-length items makes it
   much harder to scan.
   The ribbon is inline-block by default, so text-align on the parent would
   also drag the rows around. Making it a block of its own width and letting
   auto margins do the work keeps the effect contained to the ribbon. */
.cdr-notepad--center .cdr-ribbon {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.cdr-notepad--center .cdr-notepad__inner > p { text-align: center; }

.cdr-notepad__list { list-style: none; margin: 0; padding: 0; }
.cdr-notepad__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	font-size: 15.5px;
	/* No row separator. Quick Links keeps its dividers — those rows are
	   navigation and benefit from being visually discrete. These are a list of
	   updates, which reads fine as a plain stack. */
}
.cdr-notepad__list svg { width: 17px; height: 17px; flex: 0 0 auto; fill: var(--cdr-binder); }
.cdr-notepad__list .cdr-badge { margin-left: auto; }
/* "New" flag in olive — the same --cdr-c4 the Contact tab lands on, since the
   palette cycles 1–8 then 1–4 across twelve tabs.
   Scoped to the notepad rather than changing .cdr-badge globally, so the class
   grid's "spots left" badges keep their own colour logic. */
.cdr-notepad .cdr-badge { background: var(--cdr-c4); }

.cdr-notepad__text { display: block; }
.cdr-notepad__date {
	display: block;
	font-size: 12px;
	color: var(--cdr-ink-muted);
	margin-top: 1px;
}
.cdr-notepad__empty {
	font-size: 14px;
	font-style: italic;
	color: var(--cdr-ink-muted);
	border: 2px dashed var(--cdr-dash);
	border-radius: 4px;
	padding: 10px 12px;
}

/* Notebook-ruled variant.
   The ruling is on the LIST, not the card, and the row height is locked to
   the rule pitch — so every row occupies exactly one line instead of drifting
   across them. That's the difference between this reading as paper and
   reading as noise behind text. Same reason the content sheet stays unruled. */
.cdr-notepad--ruled .cdr-notepad__list {
	--cdr-rule-gap: 38px;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 calc(var(--cdr-rule-gap) - 1px),
		var(--cdr-rule) calc(var(--cdr-rule-gap) - 1px) var(--cdr-rule-gap)
	);
}
.cdr-notepad--ruled .cdr-notepad__list li {
	min-height: var(--cdr-rule-gap);
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
/* Rows carrying a date need two lines, so they take two rules rather than
   squashing — keeps the text sitting on the ruling either way. */
.cdr-notepad--ruled .cdr-notepad__list li:has(.cdr-notepad__date) {
	min-height: calc(var(--cdr-rule-gap) * 2);
}

/* --- 6b2. Cart badge ----------------------------------------------------- */

/* Sits in the masthead opposite the brand. Deliberately absent on the front
   page — see cdr_show_cart() in functions.php. */
.cdr-cart {
	position: absolute;
	top: 6px; right: 26px;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--cdr-edge);
	border-radius: 999px;
	background: var(--cdr-paper);
	color: var(--cdr-ink);
	box-shadow: var(--cdr-shadow);
	font-family: var(--cdr-font-ui);
	font-size: 13px;
	font-weight: 800;
}
.cdr-cart:hover { color: var(--cdr-ink); border-color: var(--cdr-kraft-dark); }
.cdr-cart__icon svg { width: 18px; height: 18px; fill: var(--cdr-binder); display: block; }
.cdr-cart__count { min-width: 1em; text-align: center; }

/* --- 6b3. Class grid ----------------------------------------------------- */

.cdr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}
.cdr-filters__pill {
	appearance: none;
	cursor: pointer;
	padding: 8px 20px;
	border: 1px solid var(--cdr-kraft-dark);
	border-radius: 999px;
	background: var(--cdr-paper);
	color: var(--cdr-ink);
	font-family: var(--cdr-font-ui);
	font-size: 13px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cdr-filters__pill:hover { border-color: var(--cdr-binder-light); }
.cdr-filters__pill.is-active {
	background: var(--cdr-binder);
	border-color: var(--cdr-binder);
	color: #fff;
}

.cdr-classes__grid {
	display: grid;
	gap: var(--cdr-gap);
	grid-template-columns: repeat(var(--cdr-cols, 4), minmax(0, 1fr));
}
.cdr-classes--4col { --cdr-cols: 4; }
.cdr-classes--3col { --cdr-cols: 3; }
.cdr-classes--2col { --cdr-cols: 2; }

/* Filtering hides rather than removes, so the grid doesn't reflow from
   scratch and the cards keep their positions when a filter is cleared. */
.cdr-classcard.is-hidden { display: none; }

.cdr-classcard {
	display: flex;
	flex-direction: column;
	background: var(--cdr-paper);
	border-radius: var(--cdr-radius);
	box-shadow: var(--cdr-shadow);
	padding: 0 0 16px;
	overflow: hidden;
}
.cdr-classcard__media { background: var(--cdr-paper-2); aspect-ratio: 4 / 3; }
.cdr-classcard__media img { width: 100%; height: 100%; object-fit: cover; }
.cdr-classcard__title {
	font-family: var(--cdr-font-script);
	font-size: 27px;
	line-height: 1.1;
	color: var(--cdr-ink);
	margin: 14px 16px 6px;
}
.cdr-classcard__meta {
	margin: 0 16px 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cdr-c1);
}
.cdr-classcard__text {
	margin: 0 16px 14px;
	font-size: 14px;
	color: var(--cdr-ink-muted);
}

/* Price row pinned to the bottom so cards in a row line up regardless of how
   much description each one carries. */
.cdr-classcard__foot {
	margin: auto 16px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.cdr-classcard__price { font-size: 22px; font-weight: 800; color: var(--cdr-ink); }
.cdr-classcard__price del { opacity: .5; font-weight: 400; font-size: .7em; }
.cdr-classcard__btn { margin: 0 16px; text-align: center; }
.cdr-classcard__btn.is-disabled {
	background: var(--cdr-kraft);
	color: var(--cdr-ink-muted);
	cursor: not-allowed;
	box-shadow: none;
}
.cdr-classcard__btn.is-disabled:hover { transform: none; filter: none; color: var(--cdr-ink-muted); }

.cdr-badge--low { background: var(--cdr-c3); color: #4a3a72; }
.cdr-badge--out { background: var(--cdr-kraft-dark); color: #fff; }

@media (max-width: 1100px) { .cdr-classes__grid { --cdr-cols: 3; } }
@media (max-width: 860px)  { .cdr-classes__grid { --cdr-cols: 2; } }
@media (max-width: 560px)  { .cdr-classes__grid { --cdr-cols: 1; } }

/* --- 6b4. Day schedule --------------------------------------------------- */

.cdr-sched {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* time | rail | card. The rail column is where the dots and the line sit. */
	grid-template-columns: 92px 22px 1fr;
	row-gap: 10px;
	align-items: center;
}

.cdr-sched__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	position: relative;
}

/* Fallback for browsers without subgrid — the row becomes its own 3-column
   grid on the same track sizes, which lines up identically. */
@supports not (grid-template-columns: subgrid) {
	.cdr-sched__row { grid-template-columns: 92px 22px 1fr; }
}

.cdr-sched__time {
	font-family: var(--cdr-font-ui);
	font-size: 14px;
	font-weight: 800;
	color: var(--cdr-ink);
	text-align: right;
	padding-right: 10px;
	/* Wraps rather than running off the column. A time range like
	   "9:30 - 11:00 AM" cannot fit one line at this width, and nowrap made it
	   overflow the page instead of stacking. */
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* The rail. Drawn on the row rather than the list so it stops cleanly at the
   first and last entries instead of running past them. */
.cdr-sched__dot {
	position: relative;
	justify-self: center;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--item, var(--cdr-c6));
	box-shadow: 0 0 0 3px var(--cdr-paper);
}
.cdr-sched__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -50vh;
	bottom: -50vh;
	width: 2px;
	margin-left: -1px;
	background: var(--cdr-kraft-dark);
	z-index: -1;
}
.cdr-sched__row:first-child .cdr-sched__dot::before { top: 50%; }
.cdr-sched__row:last-child  .cdr-sched__dot::before { bottom: 50%; }

.cdr-sched__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 8px;
	/* colour-mix keeps one token driving both the dot and this tint. */
	background: color-mix(in srgb, var(--item, var(--cdr-c6)) 16%, var(--cdr-paper));
	color: var(--cdr-ink);
	text-decoration: none;
	/* A resting shadow so the rows sit ON the sheet rather than being tinted
	   patches of it — these are low-contrast fills on cream, which is exactly
	   the case where a flat card disappears. */
	box-shadow: 0 2px 5px rgba(60,45,30,.16);
	transition: transform .14s ease, box-shadow .14s ease;
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.cdr-sched__card { background: var(--cdr-paper-2); }
}

/* Only the linked ones lift, so a row that goes nowhere doesn't pretend to.
   The hover shadow has to clear the resting one now, or hovering would look
   like nothing happened. */
a.cdr-sched__card:hover {
	transform: translateX(3px);
	box-shadow: 0 5px 14px rgba(60,45,30,.26);
	color: var(--cdr-ink);
}

.cdr-sched__icon { width: 24px; height: 24px; flex: 0 0 auto; fill: var(--item, var(--cdr-c6)); color: var(--item, var(--cdr-c6)); }
.cdr-sched__text { display: block; flex: 1 1 auto; min-width: 0; }
.cdr-sched__title { display: block; font-family: var(--cdr-font-hand); font-size: 19px; line-height: 1.2; color: var(--cdr-ink); }
.cdr-sched__sub { display: block; font-size: 14px; color: var(--cdr-ink-muted); }

.cdr-sched__room {
	flex: 0 0 auto;
	align-self: center;
	background: var(--item, var(--cdr-c5));
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 5px;
}

@media (max-width: 700px) {
	.cdr-sched { grid-template-columns: 76px 18px 1fr; }
	@supports not (grid-template-columns: subgrid) {
		.cdr-sched__row { grid-template-columns: 76px 18px 1fr; }
	}
	.cdr-sched__time { font-size: 12px; }
	.cdr-sched__card { flex-wrap: wrap; }
	.cdr-sched__room { margin-left: 36px; }
}

/* --- 6b4b. Weekend grid --------------------------------------------------- */

.cdr-week {
	display: grid;
	/* time column, then one equal column per day */
	grid-template-columns: 96px repeat(var(--days, 4), minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
}

.cdr-week__corner { grid-row: 1; grid-column: 1; }

.cdr-week__day {
	grid-row: 1;
	display: block;
	text-align: center;
	padding: 12px 10px;
	border-radius: 10px 10px 0 0;
	background: var(--item, var(--cdr-c6));
	color: #fff;
	text-decoration: none;
	/* Headings sit above their column like tabs; without a shadow they merge
	   into the tiles beneath them. */
	box-shadow: 0 2px 6px rgba(60,45,30,.22);
	transition: filter .15s ease, transform .15s ease;
}
a.cdr-week__day:hover { color: #fff; filter: brightness(1.07); transform: translateY(-2px); }
.cdr-week__dayname {
	display: block;
	font-family: var(--cdr-font-ui);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cdr-week__daydate { display: block; font-family: var(--cdr-font-script); font-size: 17px; opacity: .95; }

.cdr-week__time {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	font-family: var(--cdr-font-ui);
	font-size: 13px;
	font-weight: 800;
	color: var(--cdr-ink);
	line-height: 1.25;
	overflow-wrap: break-word;
	/* Both are needed. justify-content puts the text BOX at the right edge;
	   text-align right-aligns the lines within that box. Without the second,
	   a wrapped time sits right but its lines are ragged on the left, so the
	   two rows of "9:30 - / 11:00 AM" don't line up. */
	text-align: right;
}

.cdr-week__cell {
	display: flex;
	/* Icon beside the title, not stacked above it. The column layout put the
	   icon on a line of its own, which wasted a row's height on every tile and
	   read as a separate element rather than part of the label. */
	flex-flow: row wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
	padding: 9px 11px;
	border-radius: 7px;
	background: color-mix(in srgb, var(--item, var(--cdr-c6)) 18%, var(--cdr-paper));
	border-left: 3px solid var(--item, var(--cdr-c6));
	color: var(--cdr-ink);
	text-decoration: none;
	box-shadow: 0 2px 5px rgba(60,45,30,.16);
	transition: transform .14s ease, box-shadow .14s ease;
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.cdr-week__cell { background: var(--cdr-paper-2); }
}
a.cdr-week__cell:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(60,45,30,.26); color: var(--cdr-ink); }

.cdr-week__cell svg { width: 18px; height: 18px; fill: var(--item, var(--cdr-c6)); color: var(--item, var(--cdr-c6)); }
/* Takes the rest of the row beside the icon, and wraps within itself rather
   than forcing the icon onto its own line. min-width:0 is what allows a flex
   item to shrink below its content width. */
.cdr-week__celltitle {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--cdr-font-hand);
	font-size: 15px;
	line-height: 1.2;
}

/* Room pill drops to its own line, indented to clear the icon so it reads as
   belonging to the title above it. */
.cdr-week__room { margin-left: 26px; }
.cdr-week__room {
	background: var(--item, var(--cdr-c5));
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
}

/* The per-cell time only earns its place once the row headers are gone. */
.cdr-week__celltime { display: none; }

/* Stacked. A four-column grid at phone width is unreadable, so it becomes a
   list per day: the day heading spans the full width and its cells follow.
   Explicit grid placement is dropped so the cells flow in source order —
   which is day 1's events, then day 2's, and so on. */
@media (max-width: 820px) {
	.cdr-week { display: block; }
	.cdr-week__corner,
	.cdr-week__time { display: none; }
	.cdr-week__day {
		border-radius: 10px;
		margin: 22px 0 10px;
	}
	/* Row layout is now the default, so this only adjusts spacing. */
	.cdr-week__cell {
		column-gap: 9px;
		margin-bottom: 7px;
	}
	.cdr-week__room { margin-left: 0; }
	.cdr-week__celltime {
		display: block;
		min-width: 62px;
		font-family: var(--cdr-font-ui);
		font-size: 12px;
		font-weight: 800;
	}
	.cdr-week__celltitle { flex: 1 1 auto; }
}

/* --- 6b5. Legend --------------------------------------------------------- */

.cdr-legend {
	background: var(--cdr-paper);
	border-radius: var(--cdr-radius-lg);
	box-shadow: 0 4px 14px rgba(60,45,30,.24);
	padding: 20px 22px;
}
.cdr-legend__title {
	font-family: var(--cdr-font-hand);
	font-size: 22px;
	margin-bottom: 6px;
	padding-bottom: 10px;
	border-bottom: 2px dashed var(--cdr-dash);
}
.cdr-legend ul { list-style: none; margin: 0; padding: 0; }
.cdr-legend li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-family: var(--cdr-font-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cdr-ink);
}
.cdr-legend li svg { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--item, var(--cdr-c6)); color: var(--item, var(--cdr-c6)); }

/* --- 6b6. Day navigation ------------------------------------------------- */

.cdr-daynav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
}
.cdr-daynav__side { min-width: 0; }
.cdr-daynav__side--end { text-align: right; }
.cdr-daynav__step {
	font-family: var(--cdr-font-ui);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cdr-ink);
}
.cdr-daynav__step:hover { color: var(--cdr-c1); }
.cdr-daynav .cdr-btn { display: inline-flex; align-items: center; gap: 9px; }
.cdr-daynav .cdr-btn svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 560px) {
	.cdr-daynav { grid-template-columns: 1fr; text-align: center; gap: 10px; }
	.cdr-daynav__side--end { text-align: center; }
}

/* --- 6b7. WooCommerce inside the sheet -----------------------------------
   Light-touch only. WooCommerce ships its own stylesheet and does most of the
   work; this just stops its buttons and headings looking like they belong to
   a different site. Anything heavier is better done per-element than by
   fighting the plugin's CSS.
   ------------------------------------------------------------------------ */

.cdr-sheet .woocommerce h1,
.cdr-sheet .woocommerce h2,
.cdr-sheet .product_title {
	font-family: var(--cdr-font-hand);
	color: var(--cdr-ink);
}

.cdr-sheet .woocommerce div.product .price,
.cdr-sheet .woocommerce ul.products li.product .price {
	color: var(--cdr-ink);
	font-weight: 800;
}

/* Match the theme's button rather than WooCommerce's rounded grey. */
.cdr-sheet .woocommerce a.button,
.cdr-sheet .woocommerce button.button,
.cdr-sheet .woocommerce input.button,
.cdr-sheet .woocommerce #respond input#submit,
.cdr-sheet .woocommerce a.button.alt,
.cdr-sheet .woocommerce button.button.alt {
	background: var(--cdr-binder);
	color: #fff;
	font-family: var(--cdr-font-ui);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 12px 26px;
	box-shadow: var(--cdr-shadow);
}
.cdr-sheet .woocommerce a.button:hover,
.cdr-sheet .woocommerce button.button:hover,
.cdr-sheet .woocommerce input.button:hover,
.cdr-sheet .woocommerce a.button.alt:hover,
.cdr-sheet .woocommerce button.button.alt:hover {
	background: var(--cdr-binder-light);
	color: #fff;
}

/* The cancellation-policy tickbox. Given a paper card and a dashed edge so it
   reads as something to stop and act on, rather than another line of the
   checkout form. */
.cdr-sheet .woocommerce .cdr-policy-agree {
	background: var(--cdr-paper-2);
	border: 2px dashed var(--cdr-dash);
	border-radius: var(--cdr-radius);
	padding: 16px 18px;
	margin: 18px 0;
}
.cdr-sheet .woocommerce .cdr-policy-agree label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cdr-ink);
	cursor: pointer;
}
/* Bigger than the browser default — this is the one control on the page that
   must not be missed or mis-tapped on a phone. */
.cdr-sheet .woocommerce .cdr-policy-agree input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	accent-color: var(--cdr-binder);
}
.cdr-sheet .woocommerce .cdr-policy-agree a { color: var(--cdr-binder); text-decoration: underline; }
.cdr-sheet .woocommerce .cdr-policy-agree .required { color: var(--cdr-c1); }

/* WooCommerce notices — cream paper rather than its default grey slab. */
.cdr-sheet .woocommerce-message,
.cdr-sheet .woocommerce-info,
.cdr-sheet .woocommerce-error {
	background: var(--cdr-paper-2);
	border-top-color: var(--cdr-c5);
	color: var(--cdr-ink);
	border-radius: 6px;
}

/* Its grids can overflow a narrow column otherwise. */
.cdr-sheet .woocommerce img { height: auto; }
.cdr-sheet .woocommerce ul.products { display: flex; flex-wrap: wrap; }

/* --- 6c. Icon strip ----------------------------------------------------- */

.cdr-iconstrip {
	display: grid;
	/* Wider minimum than before — the type in here is bigger now, and at
	   150px the four cells started wrapping their sub-text awkwardly. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0;
	padding: 20px 12px;
	/* Lifted a little further off the page than the shared card shadow, so the
	   strip reads as a separate slip of paper laid on the sheet. */
	box-shadow: 0 3px 10px rgba(60,45,30,.18);
}

/* Stitching, set IN from the edge rather than being the edge. A dashed border
   on the box itself reads as a cut line; inset it and it reads as thread. */
.cdr-iconstrip::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed var(--cdr-dash);
	border-radius: calc(var(--cdr-radius) - 3px);
	filter: drop-shadow(0 1px 1px rgba(60,45,30,.35));
	pointer-events: none;
}

.cdr-iconstrip__item {
	position: relative;
	display: flex;
	align-items: center;
	/* Centred in its own cell rather than packed against the divider, so each
	   sits in the middle of the space its dashes mark out. */
	justify-content: center;
	text-align: left;
	gap: 12px;
	padding: 8px 14px;
}

/* Divider between cells only — never trailing the last one. Inset top and
   bottom so it reads as a short stitch rather than a full-height rule. */
.cdr-iconstrip__item + .cdr-iconstrip__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14%;
	bottom: 14%;
	border-left: 2px dashed var(--cdr-dash);
	filter: drop-shadow(0 1px 1px rgba(60,45,30,.30));
}

.cdr-iconstrip__item svg {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	/* Both fill and colour: solid icons paint with fill, the outlined ones
	   stroke with currentColor. Setting both means either kind picks up the
	   item's accent. */
	fill: var(--item, var(--cdr-binder));
	color: var(--item, var(--cdr-binder));
}
/* Larger than the rest of the page's card type — this strip is a summary bar,
   so it carries a handful of words that should be readable at a glance. */
.cdr-iconstrip__title { font-family: var(--cdr-font-hand); font-size: 21px; color: var(--item, var(--cdr-c1)); line-height: 1.15; }
.cdr-iconstrip__sub   { font-size: 16px; color: var(--cdr-ink-muted); line-height: 1.3; }

/* --- 6d. Photo cards ---------------------------------------------------- */

/* A little more lift than the shared card shadow gives — these sit in a row
   on the same cream paper, and at --cdr-shadow they read as flat rectangles
   rather than separate cards. */
.cdr-photocard {
	padding: 14px 14px 20px;
	text-align: center;
	height: 100%;
	box-shadow: 0 3px 10px rgba(60,45,30,.20);
}
.cdr-photocard__media { border-radius: 4px; overflow: hidden; box-shadow: var(--cdr-shadow); }
.cdr-photocard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cdr-photocard__title { font-family: var(--cdr-font-hand); font-size: 21px; margin: 16px 0 8px; letter-spacing: .04em; text-transform: uppercase; }
.cdr-photocard__text  { font-size: 15px; color: var(--cdr-ink-muted); margin-bottom: 14px; }

.cdr-photocard--c1 .cdr-photocard__title { color: var(--cdr-c1); }
.cdr-photocard--c2 .cdr-photocard__title { color: var(--cdr-c2); }
.cdr-photocard--c3 .cdr-photocard__title { color: var(--cdr-c3); }
.cdr-photocard--c4 .cdr-photocard__title { color: var(--cdr-c4); }
.cdr-photocard--c5 .cdr-photocard__title { color: var(--cdr-c5); }
.cdr-photocard--c6 .cdr-photocard__title { color: var(--cdr-c6); }
.cdr-photocard--c7 .cdr-photocard__title { color: var(--cdr-c7); }

/* --- 6e. Quick links ---------------------------------------------------- */

/* Matched to the notepad above it, so the sidebar reads as two separate
   sheets rather than one panel with a line through it. */
.cdr-quicklinks {
	padding: 10px 8px 8px;
	border-radius: var(--cdr-radius-lg);
	box-shadow: 0 4px 14px rgba(60,45,30,.24);
}
.cdr-quicklinks__head {
	background: var(--cdr-c5);
	color: #fff;
	font-family: var(--cdr-font-hand);
	font-size: 20px;
	padding: 8px 22px;
	margin: -20px 0 10px -18px;
	position: relative;
	box-shadow: var(--cdr-shadow);
}
.cdr-quicklinks__head::after {
	content: "";
	position: absolute;
	right: -12px; top: 0; bottom: 0;
	width: 12px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}
.cdr-quicklinks ul { list-style: none; margin: 0; padding: 0; }
.cdr-quicklinks li { border-bottom: 1px solid rgba(160,140,110,.22); }
.cdr-quicklinks li:last-child { border-bottom: 0; }
.cdr-quicklinks a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px;
	color: var(--cdr-ink);
	font-size: 15.5px;
}
.cdr-quicklinks a:hover { background: var(--cdr-paper-2); }
.cdr-quicklinks a > svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--cdr-binder); }
.cdr-quicklinks__label { display: flex; flex-direction: column; }
.cdr-quicklinks__sub { font-size: 12.5px; color: var(--cdr-ink-muted); }
.cdr-quicklinks__chev { margin-left: auto; width: 14px; height: 14px; fill: var(--cdr-ink-muted); }

/* --- 6f. Polaroid ------------------------------------------------------- */

.cdr-polaroid {
	display: inline-block;
	background: #fff;
	padding: 9px 9px 34px;
	box-shadow: var(--cdr-shadow-lift);
	max-width: 100%;
}
.cdr-polaroid img { width: 100%; }

/* Linked polaroids only. The anchor is a block so the whole photo and its
   caption are one target, and the lift is on the figure rather than the
   anchor so the washi tape and tilt move with it. */
.cdr-polaroid a { display: block; color: inherit; text-decoration: none; }
.cdr-polaroid--link { transition: transform .16s ease, box-shadow .16s ease; }
.cdr-polaroid--link:hover {
	box-shadow: var(--cdr-shadow-lift);
	filter: brightness(1.02);
}
.cdr-polaroid--link:focus-within {
	outline: 3px solid var(--cdr-c5);
	outline-offset: 3px;
}
.cdr-polaroid figcaption {
	font-family: var(--cdr-font-script);
	font-size: 19px;
	color: var(--cdr-ink);
	text-align: center;
	margin-top: 10px;
}

/* --- 6g. Banner --------------------------------------------------------- */

.cdr-banner {
	position: relative;
	/* background-COLOR so the element's --item can override it. A shorthand
	   here would also need re-declaring on every coloured variant. */
	background-color: var(--item, var(--cdr-binder));
	color: #fff;
	padding: 20px 28px;
	border-radius: 4px;
	/* No shadow on this element at all — see .cdr-banner-wrap below.
	   clip-path is applied AFTER filter, so anything drawn outside the path
	   (a box-shadow, or a filter's drop-shadow) is clipped away. Both were
	   tried here and both were invisible for the same reason. */
	clip-path: polygon(0 4px, 3% 0, 97% 3px, 100% 0, 100% calc(100% - 4px), 96% 100%, 4% calc(100% - 3px), 0 100%);
}

/* The shadow lives on the wrapper. Its filter sees the already-clipped child,
   so the drop-shadow traces the ragged edge instead of being erased by it. */
.cdr-banner-wrap {
	filter:
		drop-shadow(0 2px 2px rgba(60,45,30,.22))
		drop-shadow(0 9px 16px rgba(60,45,30,.28));
}
/* Light paper stays cream whatever the colour is — on this variant the accent
   goes on the title and the icon disc instead. */
.cdr-banner--light { background-color: var(--cdr-paper); color: var(--cdr-ink); border: 1px solid var(--cdr-edge); }
.cdr-banner__title { font-family: var(--cdr-font-hand); font-size: 23px; color: inherit; margin-bottom: 4px; }
.cdr-banner--light .cdr-banner__title { color: var(--item, inherit); }
.cdr-banner__text  { font-size: 15.5px; opacity: .92; }
.cdr-banner > svg  { width: 26px; height: 26px; fill: currentColor; margin-bottom: 6px; }
.cdr-banner a      { color: inherit; }

/* On the light variant the glyph sits in a filled disc, which is what stops it
   disappearing into the cream paper. Sized in px so it matches the solid
   variant's glyph rather than scaling with the surrounding text. */
.cdr-banner--light > svg {
	box-sizing: content-box;
	padding: 9px;
	background: var(--item, var(--cdr-c5));
	border-radius: 50%;
	fill: #fff;
}

/* --- 6h. Torn note ------------------------------------------------------ */

.cdr-note { padding: 18px 22px; }
.cdr-note__title { font-family: var(--cdr-font-hand); font-size: 22px; color: var(--cdr-c6); margin-bottom: 6px; }
.cdr-note__text { font-size: 15.5px; }

/* ==========================================================================
   7. SITE FOOTER
   ========================================================================== */

.cdr-footer {
	position: relative;
	z-index: 7;
	/* Bleed out through .cdr-pages' padding so the bar runs edge to edge
	   and meets the purple spine cleanly, as in the reference. */
	margin: 26px -14px 0;
	background: var(--cdr-binder);
	color: rgba(255,255,255,.78);
	border-radius: 0;
	padding: 14px 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}
/* Weight stated explicitly. Caveat is a script face and its 500 reads as bold
   at this size on the dark bar; 400 is the one that stays legible. */
.cdr-footer__center {
	font-family: var(--cdr-font-script);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .01em;
	color: rgba(255,255,255,.95);
}

/* Heart after the strapline. The outlined heart strokes with currentColor, so
   it inherits the footer's white without needing its own colour. Sized in em
   so it tracks the strapline if that font-size ever changes. */
.cdr-footer__heart {
	width: .74em;
	height: .74em;
	margin-left: .3em;
	vertical-align: -.04em;
	display: inline-block;
}

/* Leading heart — mirror the spacing so the strapline sits centred between
   the pair rather than drifting left. */
.cdr-footer__heart--pre { margin-left: 0; margin-right: .3em; }
/* Normal weight and a bit more contrast — small pale text on the purple bar
   was the other half of the legibility problem. */
.cdr-footer a { color: rgba(255,255,255,.88); font-weight: 400; }
.cdr-footer a:hover { color: #fff; text-decoration: underline; }
.cdr-footer ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }

/* ==========================================================================
   8. WPBAKERY NORMALISATION
   ========================================================================== */

.cdr-sheet .vc_row { margin-left: 0; margin-right: 0; }
.cdr-sheet .vc_column_container > .vc_column-inner { padding-left: 10px; padding-right: 10px; }
.cdr-sheet .wpb_content_element,
.cdr-sheet .vc_row.vc_row-flex > .vc_column_container { margin-bottom: var(--cdr-gap); }
.cdr-sheet .wpb_text_column:last-child p:last-child { margin-bottom: 0; }
.cdr-sheet .wpb_single_image img { border-radius: 4px; }

/* Equal-height columns for card rows */
/* Equal-height cards.
   `height: 100%` on its own does nothing here: it only resolves if an ancestor
   has a definite height, and a stock inner row's columns size to their content.
   Making the row a flex container is what actually gives them a height to fill.
   That was the missing half — the height rules below were always present and
   always inert. */
.cdr-sheet .cdr-row-cards {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/* Every card row gets space beneath it, so stacking two or five of them
	   needs no per-row setting. Inner rows don't inherit WPBakery's element
	   margin — that only applies to .wpb_content_element. */
	margin-bottom: 32px;
}
/* The last card row in a column drops its bottom margin, so a page doesn't
   end on a dangling gap — unless it carries a cdr-mb utility, in which case
   that was an explicit request and wins. Same guard as the row-adjacency
   rule; without it this selector is more specific than the utility and
   silently overrides it. */
.cdr-sheet .cdr-row-cards:last-child:not([class*="cdr-mb"]) { margin-bottom: 0; }
.cdr-sheet .cdr-row-cards > .vc_column_container { display: flex; }
.cdr-sheet .cdr-row-cards > .vc_column_container > .vc_column-inner,
.cdr-sheet .cdr-row-cards > .vc_column_container > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.cdr-row-cards .vc_column-inner,
.cdr-row-cards .wpb_wrapper { height: 100%; }

/* Card contents stack, with the button pushed to the bottom — so the buttons
   line up across the row however much text each card carries. */
.cdr-row-cards .cdr-photocard {
	display: flex;
	flex-direction: column;
}
.cdr-row-cards .cdr-photocard .cdr-btn {
	margin-top: auto;
	align-self: center;
}

/* Let a row bleed to the sheet edge when needed */
.cdr-row-bleed { margin-left: -26px !important; margin-right: -26px !important; }

/* --- Equal-height rows --------------------------------------------------
   WPBakery columns stack their content from the top, so a short column beside
   a tall one leaves all its slack in one lump at the bottom. Making the row a
   flex container lets both columns share the full height; .cdr-col-center then
   spreads that column's blocks evenly through it.

   Scoped to the opt-in classes — applying it to every .vc_row would change
   the behaviour of rows that are fine as they are.
   ------------------------------------------------------------------------ */

.cdr-sheet .cdr-row-stretch {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.cdr-sheet .cdr-row-stretch > .vc_column_container { display: flex; }
.cdr-sheet .cdr-row-stretch > .vc_column_container > .vc_column-inner,
.cdr-sheet .cdr-row-stretch > .vc_column_container > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

/* Blocks spread through the column rather than centred as one lump: the
   headline sits at the top, the cards at the bottom, and the slack is split
   evenly into the gaps between them. `gap` is the floor for when the column
   isn't taller than its content — space-between alone would let the blocks
   touch in that case. */
.cdr-sheet .cdr-col-center > .vc_column-inner > .wpb_wrapper {
	justify-content: space-between;
	gap: 26px;
}

/* The per-block bottom margins would stack on top of the distributed space
   and make one gap visibly larger than the other. `gap` handles the minimum
   now, so they're zeroed inside this column only. */
.cdr-sheet .cdr-col-center > .vc_column-inner > .wpb_wrapper > * { margin-bottom: 0; }

/* --- Breathing room between the main stacked blocks ---------------------- */

/* Info strip → card row */
/* Space on BOTH sides. It only had margin-bottom, and the row above it is a
   vc_row_inner — which doesn't get WPBakery's standard element margin, since
   that applies to .wpb_content_element and an inner row isn't one. The strip
   therefore sat flush against whatever was above it. */
.cdr-sheet .cdr-iconstrip { margin-top: 32px; margin-bottom: 32px; }

/* --- Spacing utilities ---------------------------------------------------
   For the Extra class name field on any element or row. Scoped under
   .cdr-sheet so they outrank a bare WPBakery class without needing
   !important, which would make them impossible to override later.
   ------------------------------------------------------------------------ */

.cdr-sheet .cdr-mt-sm { margin-top: 16px; }
.cdr-sheet .cdr-mt    { margin-top: 32px; }
.cdr-sheet .cdr-mt-lg { margin-top: 56px; }
.cdr-sheet .cdr-mb-sm { margin-bottom: 16px; }
.cdr-sheet .cdr-mb    { margin-bottom: 32px; }
.cdr-sheet .cdr-mb-lg { margin-bottom: 56px; }
.cdr-sheet .cdr-mt-0  { margin-top: 0; }
.cdr-sheet .cdr-mb-0  { margin-bottom: 0; }

/* Card row → the footer strip below it. Applies between any two top-level
   rows, so adding a third section keeps the same rhythm. */
/* Default gap between two top-level rows — unless the row opts out by
   carrying a cdr-mt utility.
   Without the :not(), this selector is more specific than `.cdr-sheet
   .cdr-mt-lg` and silently wins, so adding a spacing class to a row appeared
   to do nothing at all. Excluding them here lets the utility take over
   cleanly, rather than escalating both sides into an !important war. */
.cdr-sheet .vc_row + .vc_row:not([class*="cdr-mt"]) { margin-top: 38px; }

/* --- Warm paper panel behind the side column ---------------------------- */

/* Kraft rather than cream, so the sidebar separates from the sheet it sits on.
   Texture is a WOVEN crosshatch — fine threads one way, slightly coarser the
   other — deliberately not the dot-fleck used on the tabs and the spine. Two
   surfaces built the same way at different scales read as one material that
   didn't tile properly; two different techniques read as two materials, which
   is the point of a backing sheet.
   Thread pitches of 5px and 6px don't share a factor below 30px, so the weave
   doesn't line up into visible bands. */
.cdr-side-panel {
	background-color: var(--cdr-kraft);
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,.17) 0 1px, transparent 1px 5px),
		repeating-linear-gradient( 0deg, rgba(120,96,58,.11) 0 1px, transparent 1px 6px),
		linear-gradient(150deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 45%, rgba(120,96,58,.11) 100%);
	border-radius: var(--cdr-radius);
	padding: 30px 20px;
	box-shadow:
		0 6px 18px rgba(60,45,30,.24),
		inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Same panel used as a full-width backer under a row of elements. The row's
   own columns keep their internal padding, so this only needs to clear them. */
.cdr-sheet .vc_row.cdr-side-panel { padding: 26px 12px; }

/* Frontend editor: keep the binder from clipping WPBakery controls */
body.vc_editor .cdr-binder,
body.vc_editor .cdr-pages { overflow: visible; }
body.vc_editor .cdr-rings,
body.vc_editor .cdr-punches { display: none; }

/* --- Decorative overlays -------------------------------------------------
   Butterflies, sprigs, doodled arrows: things that sit *over* the layout
   rather than in it. Put a Single Image element anywhere, give it
   .cdr-doodle plus a position modifier, and put .cdr-doodle-host on the
   column you want it anchored to.

   pointer-events:none matters — without it an absolutely positioned doodle
   silently eats clicks on whatever it overlaps.
   ------------------------------------------------------------------------ */

.cdr-doodle-host { position: relative; }

.cdr-doodle {
	position: absolute;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}
.cdr-doodle img { width: 100%; height: auto; border-radius: 0 !important; }
.cdr-doodle svg { width: 100%; height: 100%; display: block; }

/* Starting positions — tune against Preview, not the editor canvas. */
.cdr-doodle--tr { top: 10px;    right: -18px; }
.cdr-doodle--tl { top: 10px;    left:  -18px; }
.cdr-doodle--br { bottom: 10px; right: -18px; }
.cdr-doodle--bl { bottom: 10px; left:  -18px; }

/* Inline doodles stay in the flow — no host column required. */
.cdr-doodle--inline {
	position: static;
	display: inline-block;
	vertical-align: middle;
}

/* Decoration is the first thing to go when there's no room for it. */
@media (max-width: 900px) {
	.cdr-doodle { display: none; }
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Twelve tabs at a 92px floor need ~1150px of row before they wrap. Between
   the widest binder and the 1200px breakpoint there isn't always that much,
   so the floor comes down first — the labels keep their size. */
@media (max-width: 1500px) {
	.cdr-tabs a { min-width: 78px; padding: 10px 10px 11px; }
}

@media (max-width: 1200px) {
	:root { --cdr-spine: 104px; }
	.cdr-tabs a { min-width: 68px; font-size: 11px; padding: 9px 8px 10px; }
	.cdr-flip { min-width: 64px; }
	.cdr-flip__num { font-size: 34px; }
}

@media (max-width: 900px) {
	:root { --cdr-spine: 0px; --cdr-gap: 16px; }

	.cdr-stage { padding: 0; }

	.cdr-binder {
		grid-template-columns: 1fr;
		border-radius: 0;
		box-shadow: none;
	}

	/* Spine becomes a slim header bar — rotate the sheen to match */
	.cdr-spine {
		flex-direction: row;
		justify-content: center;
		gap: 18px;
		padding: 10px 14px;
		font-size: 10px;
		background-image:
			radial-gradient(circle at 32% 30%, rgba(255,255,255,.075) 0 1px, transparent 1.6px),
			radial-gradient(circle at 72% 62%, rgba(0,0,0,.20) 0 1.4px, transparent 2px),
			repeating-linear-gradient(112deg, rgba(0,0,0,.055) 0 2px, transparent 2px 9px),
			linear-gradient(180deg, var(--cdr-binder-light) 0%, var(--cdr-binder) 55%, var(--cdr-binder-dark) 100%);
		background-size: 13px 13px, 17px 17px, auto, auto;
		box-shadow: inset 0 -3px 6px rgba(0,0,0,.32);
	}
	.cdr-spine::before { inset: 5px 8px; }
	.cdr-spine__mark + .cdr-spine__mark { margin-top: 0; }

	.cdr-rings,
	.cdr-punches { display: none; }

	.cdr-pages { padding: 10px; }
	.cdr-sheet { padding: 18px 14px 26px; border-radius: 8px; }

	.cdr-corner-tag {
		position: static;
		max-width: none;
		margin: 0 0 12px;
		transform: none;
		text-align: center;
	}

	.cdr-masthead { padding: 10px 0 0; }
	.cdr-brand { text-align: center; padding-bottom: 8px; }
	.cdr-brand .cdr-script { font-size: 29px; }
	.cdr-entry__title { font-size: 26px; }
	.cdr-sheet { box-shadow: 0 4px 12px rgba(60,45,30,.18); }
	.cdr-footer { margin-left: -10px; margin-right: -10px; }

	/* Tabs collapse into a toggled stack */
	.cdr-tabs { margin: 0 0 10px; }
	.cdr-tabs__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		padding: 13px 16px;
		border: 0;
		border-radius: 8px;
		background: var(--cdr-binder);
		color: #fff;
		font-family: var(--cdr-font-ui);
		font-weight: 800;
		font-size: 12px;
		letter-spacing: .12em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.cdr-tabs__toggle svg { width: 20px; height: 20px; fill: currentColor; }

	.cdr-tabs ul {
		display: none;
		flex-direction: column;
		gap: 4px;
		margin-top: 6px;
	}
	.cdr-tabs.is-open > ul { display: flex; }

	.cdr-tabs > ul > li { width: 100%; }
	.cdr-tabs a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-width: 0;
		border-radius: 6px;
		padding: 12px 16px;
		font-size: 12px;
		box-shadow: none;
	}
	.cdr-tabs a:hover { transform: none; }
	.cdr-tabs .current-menu-item > a,
	.cdr-tabs .current_page_item > a {
		padding-bottom: 12px;
		margin-bottom: 0;
		background: var(--cdr-paper);
		box-shadow: inset 0 0 0 2px var(--cdr-binder);
	}

	.cdr-tabs .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 2px 0 2px 22px;
		background: transparent;
	}

	/* Components */
	/* Stacked: the divider has to run along the bottom, not the side. The
	   desktop divider is a ::before, so it gets switched off here rather than
	   just having its border zeroed — which is what the old rule assumed. */
	.cdr-iconstrip__item + .cdr-iconstrip__item::before { content: none; }
	.cdr-iconstrip__item { border-bottom: 2px dashed var(--cdr-dash); padding: 12px; }
	.cdr-iconstrip__item:last-child { border-bottom: 0; }
	.cdr-quicklinks__head { margin-left: -6px; }
	.cdr-tilt-l, .cdr-tilt-r, .cdr-tilt-l2, .cdr-tilt-r2 { transform: none; }
	.cdr-row-bleed { margin-left: -14px !important; margin-right: -14px !important; }

	.cdr-footer { flex-direction: column; text-align: center; border-radius: 0; }
	.cdr-footer ul { justify-content: center; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.cdr-countdown__grid { gap: 6px; }
	.cdr-flip { min-width: 0; flex: 1 1 18%; padding: 10px 2px 6px; }
	.cdr-flip__num { font-size: 26px; }
	.cdr-flip__label { font-size: 8px; letter-spacing: .06em; }
	.cdr-script { font-size: 1.55em; }
	.cdr-sheet .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
	.cdr-polaroid { display: block; }
}

/* ==========================================================================
   10. MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
	body { background: #fff; }
	.cdr-binder, .cdr-pages, .cdr-sheet { box-shadow: none; background: #fff; }
	.cdr-spine, .cdr-rings, .cdr-punches, .cdr-tabs, .cdr-footer { display: none; }
}