/* House of Attar — design system and storefront styles.
 * Layers: reset → tokens → base → layout → components → pages → utilities.
 * Spec: reports/custom-theme-2026-10-14 (design-benchmark §3d, motion.md §4, booking digest §2). */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: "Lexend"; src: url(../fonts/lexend-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alike"; src: url(../fonts/alike-400-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks so the swap moves nothing (computed from the font files). */
@font-face { font-family: "Lexend Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 109.9%; ascent-override: 91%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: "Alike Fallback"; src: local("Times New Roman"), local("Times"); size-adjust: 111%; ascent-override: 88.6%; descent-override: 24.3%; line-gap-override: 0%; }


	*, *::before, *::after { box-sizing: border-box; }
	:where(*) { margin: 0; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
	:where(img, picture, video, svg) { display: block; max-width: 100%; height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
	:where(a) { color: inherit; }
	ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
	p, h1, h2, h3, h4, li, dd, dt { overflow-wrap: break-word; }
	table { border-collapse: collapse; }
	[hidden] { display: none !important; }



	:root {
		/* Materials palette (all text pairs WCAG-checked, design-benchmark §3d). */
		--paper: #F6F1E8; --limestone: #ECE4D6; --travertine: #D9CBB5; --sand: #C9B79C;
		--clay: #8C7862; --umber: #66503F; --oud: #2A1C14; --resin: #3B2A1F;
		--amber: #8A4E1C; --saffron: #D29A4E; --rose: #8B3632; --moss: #46553A;
		--ink: var(--oud); --ink-2: var(--umber); --line: var(--travertine); --line-strong: var(--clay);
		--canvas: var(--paper); --mat: var(--limestone);

		/* Type. */
		/* Lexend for headings and text; Alike (serif) for short accent lines: leads, card lines, quotes. Both free (SIL OFL). */
		--display: "Lexend", "Lexend Fallback", Arial, sans-serif;
		--sans: "Lexend", "Lexend Fallback", Arial, sans-serif;
		--accent: "Alike", "Alike Fallback", Georgia, "Times New Roman", serif;
		--mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
		--fs-display: clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem);
		--fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 4rem);
		--fs-h2: clamp(1.75rem, 1.35rem + 1.65vw, 2.75rem);
		--fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.875rem);
		--fs-lead: clamp(1.1875rem, 1.12rem + .3vw, 1.375rem);
		--fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);
		--fs-ui: .9375rem; --fs-small: .875rem; --fs-eyebrow: .75rem; --fs-data: .8125rem;

		/* Space (4-based) and layout. */
		--s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --s11: 10rem;
		--gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
		--gap: clamp(.75rem, .55rem + .8vw, 1.5rem);
		--section: clamp(4.5rem, 3rem + 6vw, 10rem);
		--max: 85rem; --read: 38rem; --form: 30rem;
		--radius: 2px; --radius-pill: 999px;
		--header-h: 4rem; --announce-h: 2rem;

		/* Motion (motion.md §4). */
		--motion: 1;
		--dur-tap: calc(120ms * var(--motion)); --dur-quick: calc(180ms * var(--motion)); --dur-base: calc(240ms * var(--motion));
		--dur-panel: calc(380ms * var(--motion)); --dur-panel-exit: calc(280ms * var(--motion)); --dur-image: calc(500ms * var(--motion));
		--dur-progress: calc(600ms * var(--motion)); --dur-reveal: calc(720ms * var(--motion));
		--ease-out: cubic-bezier(.23, 1, .32, 1); --ease-luxe: cubic-bezier(.16, 1, .3, 1);
		--ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease-exit: cubic-bezier(.3, 0, .8, .15); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
		--ease-settle: cubic-bezier(.22, 1, .36, 1);
		--move-nudge: 4px; --move-enter: 12px; --move-reveal: 16px;
		--backdrop: rgb(28 20 14 / .38);
		--shadow-float: 0 1px 2px rgb(42 28 20 / .06), 0 24px 48px -12px rgb(42 28 20 / .22);
	}
	@supports (transition-timing-function: linear(0, 1)) {
		:root { --ease-settle: linear(0, .041 5%, .136 10%, .254 15%, .377 20%, .494 25%, .598 30%, .687 35%, .761 40%, .821 45%, .868 50%, .905 55%, .933 60%, .954 65%, .969 70%, .98 75%, .988 80%, .993 85%, .997 90%, .999 95%, 1); }
	}
	@media (min-width: 64em) { :root { --header-h: 4.75rem; --move-reveal: 24px; } }
	@media (prefers-reduced-motion: reduce) { :root { --move-nudge: 0px; --move-enter: 0px; --move-reveal: 0px; } }
	@media (prefers-contrast: more) { :root { --line: var(--clay); --ink-2: var(--resin); } }
	html.no-motion { --motion: 0; }



	html { color-scheme: light; scroll-padding-top: calc(var(--header-h) + 1rem); scrollbar-gutter: stable; }
	body { background: var(--canvas); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--sans); font-feature-settings: "kern"; }
	h1, h2, h3, .serif { font-family: var(--display); font-weight: 500; font-optical-sizing: auto; letter-spacing: -.005em; text-wrap: balance; }
	h1 { font-size: var(--fs-h1); line-height: 1.05; }
	h2 { font-size: var(--fs-h2); line-height: 1.1; }
	h3 { font-size: var(--fs-h3); line-height: 1.2; }
	h4 { font: 500 var(--fs-ui)/1.4 var(--sans); }
	p { text-wrap: pretty; }
	a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
	a:hover { text-decoration-thickness: 2px; }
	strong, b { font-weight: 600; }
	small { font-size: var(--fs-small); }
	.money, data, .num { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
	::selection { background: var(--travertine); color: var(--oud); }
	:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
	:where(.on-dark) :focus-visible { outline-color: var(--saffron); }
	hr { border: 0; height: 1px; background: var(--line); }



	.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
	.wrap--read { width: min(100% - 2 * var(--gutter), var(--read)); margin-inline: auto; }
	.section { padding-block: var(--section); }
	.section--tight { padding-block: calc(var(--section) * .55); }
	.stack > * + * { margin-top: var(--stack, var(--s4)); }
	.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--s3)); align-items: center; }
	.on-dark { background: var(--oud); color: var(--paper); --ink: var(--paper); --ink-2: var(--travertine); --line: rgb(246 241 232 / .18); }
	.on-mat { background: var(--mat); }
	main { display: block; }


/* ======================================================== components */

	/* Eyebrow / label voice */
	.eyebrow { font: 500 var(--fs-eyebrow)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
	.data { font: 400 var(--fs-data)/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
	.lead { font: 400 calc(var(--fs-lead) * 1.06)/1.45 var(--accent); color: var(--ink); }
	.muted { color: var(--ink-2); }
	.small { font-size: var(--fs-small); }

	/* Buttons: words name the result; no faded disabled state. */
	.btn { --bg: transparent; --fg: var(--ink); --bd: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3rem; padding: .75rem 1.5rem; border: 1px solid var(--bd); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: 500 var(--fs-ui)/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-align: center; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), transform var(--dur-tap) var(--ease-out); -webkit-tap-highlight-color: transparent; }
	.btn:hover { text-decoration: none; }
	.btn:active { transform: scale(.98); }
	.btn--primary { --bg: var(--oud); --fg: var(--paper); --bd: var(--oud); }
	.btn--primary:hover { --bg: var(--resin); --bd: var(--resin); }
	.btn--light { --bg: var(--paper); --fg: var(--oud); --bd: var(--paper); }
	.btn--light:hover { --bg: var(--limestone); --bd: var(--limestone); }
	.btn--ghost:hover { --bg: var(--ink); --fg: var(--canvas); }
	.on-dark .btn--ghost { --fg: var(--paper); --bd: rgb(246 241 232 / .5); }
	.on-dark .btn--ghost:hover { --bg: var(--paper); --fg: var(--oud); --bd: var(--paper); }
	.btn--block { width: 100%; }
	.btn--lg { min-height: 3.25rem; font-size: 1rem; }
	.btn[aria-disabled="true"] { --bg: var(--limestone); --fg: var(--oud); --bd: var(--sand); cursor: not-allowed; }
	.btn .money { font-weight: 500; }
	@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; opacity: .85; } }

	.link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: .3em; transition: text-decoration-color var(--dur-quick) var(--ease-out); }
	.link:hover { text-decoration-color: currentColor; }
	.link--arrow { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 500; }
	.link--arrow .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-quick) var(--ease-out); }
	.link--arrow:hover .icon { transform: translateX(3px); }

	.icon { width: 1.5rem; height: 1.5rem; flex: none; }
	.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink); position: relative; transition: background-color var(--dur-quick) var(--ease-out); }
	.icon-btn:hover { background: rgb(42 28 20 / .06); }

	/* Chips (family pills) — swatch dot uses the family's oil colour. */
	.chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.25rem; padding: .35rem .95rem; border: 1px solid var(--sand); border-radius: var(--radius-pill); font: 400 var(--fs-small)/1.2 var(--sans); color: var(--ink); text-decoration: none; background: transparent; white-space: nowrap; transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
	.chip:hover { border-color: var(--ink); text-decoration: none; }
	.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on { background: var(--oud); border-color: var(--oud); color: var(--paper); }
	.chip .count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
	.chip[aria-current="page"] .count, .chip[aria-pressed="true"] .count { color: var(--travertine); }
	.dot { width: .625rem; height: .625rem; border-radius: 50%; flex: none; background: var(--fam, #8a4e1c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }

	/* Breadcrumb */
	.crumbs { padding-block: var(--s4) 0; }
	.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-2); }
	.crumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: var(--sand); }
	.crumbs a { color: var(--ink-2); text-decoration: none; }
	.crumbs a:hover { color: var(--ink); text-decoration: underline; }

	/* ---- Announcement + header ---- */
	.skip { position: absolute; left: var(--s4); top: -10rem; z-index: 100; padding: .75rem 1rem; background: var(--oud); color: var(--paper); }
	.skip:focus { top: var(--s2); }
	.announce { background: var(--oud); color: var(--travertine); font: 400 .8125rem/var(--announce-h) var(--sans); text-align: center; letter-spacing: .02em; min-height: var(--announce-h); padding-inline: var(--gutter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.announce strong { color: var(--paper); font-weight: 500; }
	.announce a { color: var(--paper); text-decoration: none; }

	.masthead { position: sticky; top: 0; z-index: 40; height: var(--header-h); transition: transform var(--dur-base) var(--ease-out); }
	.masthead::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(246 241 232 / .94); border-bottom: 1px solid var(--line); opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
	@supports (backdrop-filter: blur(12px)) { .masthead::before { background: rgb(246 241 232 / .82); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); } }
	/* Not positioned: the Shop panel inside the nav is placed against the whole header, and the
	   backdrop above (z-index -1 in the header's stacking context) still paints below the content. */
	.masthead__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); }
	.masthead__logo { display: block; justify-self: center; line-height: 0; }
	.masthead__logo img { width: clamp(7.25rem, 6rem + 3vw, 8.75rem); height: auto; aspect-ratio: 928 / 247; }
	.masthead__start, .masthead__end { display: flex; align-items: center; gap: .25rem; }
	.masthead__end { justify-content: flex-end; }
	.nav { display: none; }
	/* Top-level items only: the Shop panel inside the nav has its own styles. */
	.nav > ul { display: flex; gap: clamp(1rem, .2rem + 1.6vw, 2rem); list-style: none; padding: 0; }
	.nav > ul > li > :is(a, button) { display: inline-flex; align-items: center; gap: .3rem; height: var(--header-h); font: 400 var(--fs-ui)/1 var(--sans); color: var(--ink); text-decoration: none; position: relative; letter-spacing: .01em; }
	.nav > ul > li > :is(a, button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - .95rem); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-quick) var(--ease-out); }
	.nav > ul > li > :is(a, button):is(:hover, [aria-current="page"], [aria-expanded="true"])::after { transform: scaleX(1); }
	.nav > ul > li > button .icon { width: 1rem; height: 1rem; transition: transform var(--dur-quick) var(--ease-out); }
	.nav > ul > li > [aria-expanded="true"] .icon { transform: rotate(180deg); }
	.basket-btn .basket-count { position: absolute; top: .3rem; right: .2rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--amber); color: var(--paper); font: 500 .6875rem/1.15rem var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
	.basket-btn .basket-count:empty { display: none; }
	.basket-count.is-bump { animation: hoa-bump calc(420ms * var(--motion)) var(--ease-settle); }
	@keyframes hoa-bump { 40% { transform: scale(1.14); } }
	.menu-btn { margin-left: -.6rem; }
	@media (min-width: 64em) {
		.nav { display: block; }
		.menu-btn { display: none; }
		.masthead__start { gap: 0; }
	}
	@media (max-width: 63.99em) {
		.masthead.is-hidden { transform: translateY(-100%); }
		.hide-sm { display: none !important; }
	}

	/* Mega panel (Shop): families + set callout */
	.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgb(42 28 20 / .25); opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
	.mega.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
	/* Phones and tablets use the menu panel. Hidden panels still take part in layout, so the desktop
	   panel is taken out entirely there (its lazy card image is then never fetched either). */
	@media (max-width: 63.99em) { .mega { display: none; } }
	.mega__inner { display: grid; grid-template-columns: 1.1fr 2fr 1.2fr; gap: var(--s7); padding-block: var(--s7); }
	.mega h2 { font: 500 var(--fs-eyebrow)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s4); }
	.mega__list { list-style: none; padding: 0; display: grid; gap: .1rem; }
	.mega__list a { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; text-decoration: none; font-size: 1rem; }
	.mega__list a:hover { text-decoration: underline; }
	.mega__fams { columns: 2; column-gap: var(--s6); }
	.mega__fams li { break-inside: avoid; }
	.mega__card { display: grid; gap: var(--s3); text-decoration: none; }
	.mega__card .img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--mat); }
	.mega__card strong { font: 500 1.25rem/1.2 var(--display); }

	/* Dialog-based panels: mobile menu, basket drawer, search, lightbox. */
	dialog.panel { position: fixed; inset: 0 0 0 auto; width: min(100%, 28rem); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--canvas); color: var(--ink); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-float); }
	dialog.panel:not([open]) { display: none; }
	dialog.panel--left { inset: 0 auto 0 0; }
	dialog.panel::backdrop { background: var(--backdrop); }
	dialog.panel[open] { transform: none; transition: transform var(--dur-panel) var(--ease-drawer), display var(--dur-panel) allow-discrete, overlay var(--dur-panel) allow-discrete; }
	dialog.panel[open]::backdrop { opacity: 1; transition: opacity var(--dur-panel) var(--ease-out); }
	@starting-style { dialog.panel[open] { transform: translateX(100%); } dialog.panel--left[open] { transform: translateX(-100%); } dialog.panel[open]::backdrop { opacity: 0; } }
	dialog.panel[data-closing] { transform: translateX(100%); transition: transform var(--dur-panel-exit) var(--ease-exit); }
	dialog.panel--left[data-closing] { transform: translateX(-100%); }
	dialog.panel[data-closing]::backdrop { opacity: 0; transition: opacity var(--dur-panel-exit) var(--ease-exit); }
	@media (prefers-reduced-motion: reduce) {
		@starting-style { dialog.panel[open] { transform: none; opacity: 0; } dialog.panel--left[open] { transform: none; opacity: 0; } }
		dialog.panel[open] { transition: opacity var(--dur-base) var(--ease-out); }
		dialog.panel[data-closing], dialog.panel--left[data-closing] { transform: none; opacity: 0; }
	}
	html:has(dialog[open]) { overflow: hidden; }
	.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); min-height: var(--header-h); }
	.panel__title { font: 500 1.375rem/1.2 var(--display); outline: none; }
	.panel__title .num { font: 400 var(--fs-small) var(--sans); color: var(--ink-2); margin-left: .25rem; }
	.panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); }

	/* Mobile menu */
	.mnav { list-style: none; padding: 0; }
	.mnav > li { border-bottom: 1px solid var(--line); }
	.mnav a, .mnav summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; font: 500 1.375rem/1.2 var(--display); text-decoration: none; cursor: pointer; list-style: none; }
	.mnav summary::-webkit-details-marker { display: none; }
	.mnav details[open] summary .icon { transform: rotate(180deg); }
	.mnav summary .icon { transition: transform var(--dur-base) var(--ease-out); }
	.mnav ul { list-style: none; padding: 0 0 var(--s4); display: grid; gap: .1rem; }
	.mnav ul a { min-height: 2.75rem; font: 400 1rem/1.3 var(--sans); justify-content: flex-start; gap: .7rem; }
	.mnav-foot { margin-top: var(--s6); display: grid; gap: var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
	.mnav-foot a { color: var(--ink); }

	/* Search panel */
	.search-form { display: flex; gap: var(--s2); }
	.field, .search-form input[type="search"] { width: 100%; min-height: 3.25rem; padding: .75rem 1rem; border: 1px solid var(--clay); border-radius: var(--radius); background: var(--paper); font-size: 1rem; transition: border-color var(--dur-quick) var(--ease-out); }
	.field:focus, .search-form input[type="search"]:focus { border-color: var(--oud); outline: 2px solid var(--amber); outline-offset: 1px; }
	.search-suggest { margin-top: var(--s6); }
	.search-suggest h3 { margin-bottom: var(--s3); }

	/* ---- Basket drawer ---- */
	.drawer-body { display: flex; flex-direction: column; gap: var(--s5); }
	.freebar { display: grid; gap: .55rem; }
	.freebar__text { font-size: var(--fs-small); color: var(--ink); }
	.freebar__track { position: relative; display: block; height: 1px; background: var(--line); }
	.freebar__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-progress) var(--ease-luxe); }
	.freebar__track::after { content: ""; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--amber); transition: left var(--dur-progress) var(--ease-luxe); }
	.freebar.is-free .freebar__fill { background: var(--moss); }
	.freebar.is-free .freebar__track::after { background: var(--moss); }
	.lines { display: grid; gap: 0; }
	.line { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4); padding-block: var(--s4); border-top: 1px solid var(--line); transition: opacity var(--dur-quick) var(--ease-out); }
	.line:last-child { border-bottom: 1px solid var(--line); }
	.line.is-busy { opacity: .6; }
	.line.is-leaving { opacity: 0; }
	.line__media img { width: 4.5rem; height: 5.625rem; object-fit: cover; background: var(--mat); }
	.line__body { display: grid; gap: .15rem; min-width: 0; }
	.line__name { font: 500 1.125rem/1.25 var(--display); }
	.line__name a { text-decoration: none; }
	.line__detail, .line__comps { font-size: var(--fs-small); color: var(--ink-2); }
	.line__comps { line-height: 1.45; }
	.line__row { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
	.line__price { margin-left: auto; font-weight: 500; }
	.line__remove { font-size: var(--fs-small); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; min-height: 2.75rem; }
	.line__remove:hover { color: var(--ink); }
	.line__qty-static { font-size: var(--fs-small); color: var(--ink-2); }
	.line--undo { grid-template-columns: 1fr auto; align-items: center; font-size: var(--fs-small); color: var(--ink-2); }
	.line--undo button { font-weight: 500; color: var(--ink); text-decoration: underline; min-height: 2.75rem; }
	.stepper { display: inline-flex; align-items: center; border: 1px solid var(--sand); border-radius: var(--radius); }
	.stepper__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink); }
	.stepper__btn .icon { width: 1rem; height: 1rem; }
	.stepper__btn:disabled { color: var(--sand); cursor: not-allowed; }
	.stepper__val { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
	.totals { display: grid; gap: .4rem; font-size: var(--fs-small); }
	.totals > div { display: flex; justify-content: space-between; }
	.totals dd { font-variant-numeric: tabular-nums; }
	.totals__total { padding-top: .6rem; margin-top: .3rem; border-top: 1px solid var(--line); font-size: 1.0625rem; font-weight: 500; }
	.drawer-actions { display: grid; gap: var(--s3); justify-items: center; }
	.drawer-note { font-size: var(--fs-small); color: var(--ink-2); text-align: center; }
	.drawer-empty { display: grid; gap: var(--s4); justify-items: start; padding-block: var(--s6); }
	.drawer-empty__title { font: 500 1.5rem/1.2 var(--display); }

	/* Toast */
	.toasts { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--toast-offset, 0px) + env(safe-area-inset-bottom) + 1rem); transform: translateX(-50%); width: min(calc(100% - 2rem), 26rem); pointer-events: none; }
	.toast { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; padding: .85rem 1rem .85rem 1.15rem; background: var(--oud); color: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-float); font-size: var(--fs-small); pointer-events: auto; opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
	@starting-style { .toast { opacity: 0; transform: translateY(var(--move-enter)); } }
	.toast.is-leaving { opacity: 0; transition-duration: var(--dur-quick); transition-timing-function: var(--ease-exit); }
	.toast a, .toast button { color: var(--paper); font-weight: 500; text-decoration: underline; text-underline-offset: .25em; white-space: nowrap; }
	@media (min-width: 48em) { .toasts { left: auto; right: var(--gutter); transform: none; } }

	/* ---- Product card ---- */
	.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--gap); list-style: none; padding: 0; }
	@media (min-width: 48em) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	@media (min-width: 75em) { .pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
	.pcard { position: relative; display: flex; flex-direction: column; gap: var(--s3); height: 100%; }
	.pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--mat); overflow: hidden; }
	.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.pcard__media .img--alt { opacity: 0; transition: opacity var(--dur-image) var(--ease-out); }
	@media (hover: hover) and (pointer: fine) {
		.pcard:hover .img--alt.is-ready, .pcard:focus-within .img--alt.is-ready { opacity: 1; }
	}
	.pcard__fam { position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; background: rgb(246 241 232 / .9); border-radius: var(--radius-pill); font: 500 .6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--oud); }
	.pcard__fam .dot { width: .5rem; height: .5rem; }
	.pcard__fam { white-space: nowrap; max-width: calc(100% - 1.5rem); }
	@media (max-width: 29.99em) { .pcard__fam { left: .5rem; top: .5rem; letter-spacing: .05em; font-size: .625rem; padding: .3rem .5rem; gap: .35rem; } }
	.pcard__badge { position: absolute; right: .75rem; top: .75rem; padding: .3rem .6rem; background: var(--paper); border-radius: var(--radius-pill); font: 500 .6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
	.pcard__body { display: grid; gap: .3rem; }
	.pcard__name { font: 500 clamp(1.25rem, 1.12rem + .5vw, 1.5rem)/1.15 var(--display); }
	.pcard__name a { text-decoration: none; }
	.pcard__name a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
	.pcard__name a:focus-visible { outline: 0; }
	.pcard:has(.pcard__name a:focus-visible) { outline: 2px solid var(--amber); outline-offset: 4px; }
	.pcard__desc { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: auto; padding-top: var(--s2); }
	.pcard__price { font-weight: 500; font-size: var(--fs-ui); white-space: nowrap; }
	.pcard__price .from { font-weight: 400; color: var(--ink-2); margin-right: .2em; }
	.pcard__price .oos { font-weight: 400; color: var(--rose); }
	.pcard__add { position: relative; z-index: 2; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 .9rem; border: 1px solid var(--sand); border-radius: var(--radius-pill); font: 500 .8125rem/1 var(--sans); color: var(--ink); transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-tap) var(--ease-out); }
	.pcard__add:hover { background: var(--oud); border-color: var(--oud); color: var(--paper); }
	.pcard__add:active { transform: scale(.97); }
	.pcard__add .icon { width: 1rem; height: 1rem; }
	.pcard__add { flex: none; white-space: nowrap; }
	@media (max-width: 29.99em) { .pcard__add { padding: 0 .7rem; gap: .25rem; } }
	.pcard__add .lbl { display: inline-block; transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); }
	.pcard__add.is-busy .lbl { opacity: .6; }
	.pcard__add.is-done { background: var(--moss); border-color: var(--moss); color: var(--paper); }
	.qstep { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 2.75rem; border: 1px solid var(--oud); border-radius: var(--radius-pill); background: var(--oud); color: var(--paper); font: 500 .8125rem/1 var(--sans); animation: qstep-in var(--dur-base) var(--ease-out); }
	.qstep[hidden], .pcard__add[hidden] { display: none; }
	.qstep button { display: grid; place-items: center; width: 2.5rem; height: 2.625rem; border-radius: var(--radius-pill); color: inherit; }
	.qstep button:hover { background: rgb(255 255 255 / .12); }
	.qstep .icon { width: .95rem; height: .95rem; }
	.qstep__n { min-width: 4.25rem; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
	.qstep.is-busy { opacity: .7; pointer-events: none; }
	@keyframes qstep-in { from { opacity: 0; transform: scale(.96); } }
	.pcard--set .pcard__media { background: var(--oud); }
	.pcard__media--whole > .img--backdrop { z-index: 0; object-fit: cover; }
	.pcard__media--whole > img:first-child { z-index: 1; object-fit: contain; -webkit-mask-image: linear-gradient(transparent 10%, #000 21%, #000 79%, transparent 90%); mask-image: linear-gradient(transparent 10%, #000 21%, #000 79%, transparent 90%); }
	.pcard--promo { background: var(--oud); color: var(--paper); padding: var(--s5); justify-content: space-between; min-height: 100%; --ink: var(--paper); --ink-2: var(--travertine); }
	.pcard--promo .pcard__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

	/* Seven wells mini-graphic (promo) */
	.wells { display: flex; gap: .45rem; flex-wrap: wrap; }
	.wells span { width: var(--w, 1.25rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; opacity: .9; }
	.wells span.is-full { background: var(--fam, #8a4e1c); border-color: transparent; }

	/* Section heads */
	.shead { display: flex; align-items: end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s7); flex-wrap: wrap; }
	.shead__text { display: grid; gap: var(--s3); max-width: 40rem; }
	.shead p { color: var(--ink-2); }

	/* Accordions (native details) */
	.acc { border-top: 1px solid var(--line); }
	.acc > details { border-bottom: 1px solid var(--line); }
	.acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 3.5rem; padding-block: var(--s3); cursor: pointer; list-style: none; font: 500 1rem/1.35 var(--sans); }
	.acc summary::-webkit-details-marker { display: none; }
	.acc summary h3 { font: inherit; }
	.acc summary .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--dur-base) var(--ease-out); }
	.acc details[open] > summary .icon { transform: rotate(180deg); }
	.acc .acc__body { padding-bottom: var(--s5); color: var(--ink); }
	.acc .acc__body > * + * { margin-top: var(--s3); }
	@supports (interpolate-size: allow-keywords) {
		.acc { interpolate-size: allow-keywords; }
		.acc details::details-content { height: 0; overflow: clip; transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
		.acc details[open]::details-content { height: auto; }
		@media (prefers-reduced-motion: reduce) { .acc details::details-content { transition: none; } }
	}

	/* Reviews */
	.reviews { display: grid; gap: var(--s6); }
	.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
	.stars { position: relative; display: inline-flex; color: var(--amber); }
	.stars__row { display: inline-flex; gap: 2px; }
	.stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
	.stars .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
	.stars .stars__row:first-child .icon { fill: none; stroke: currentColor; stroke-width: 1.25; }
	.stars .icon { flex: none; }
	/* Google reviews: Google's own marks (G, yellow stars) so they read as real Google reviews. */
	.greviews { padding-block: var(--s8); display: grid; gap: var(--s6); overflow: hidden; }
	/* On the home page the next section shares the background: keep the space between them even. */
	.greviews--home { padding-block: 5rem; }
	.greviews--home + .section { padding-top: 5rem; }
	.greviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); }
	.greviews__title { display: grid; gap: var(--s3); }
	.greviews__title h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem); }
	.greviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
	.greviews__g { width: 1.375rem; height: 1.375rem; flex: none; }
	.greviews__num { font: 500 1.375rem/1 var(--sans); font-variant-numeric: tabular-nums; }
	.greviews__count { color: var(--ink-2); font-size: var(--fs-small); }
	.greviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
	.greviews__actions .link--arrow { white-space: nowrap; }
	@media (max-width: 47.99em) { .greviews__actions { width: 100%; justify-content: space-between; } }
	.stars--g { color: #FBBC04; }
	ul.gcards { --edge: max(var(--gutter), calc((100% - var(--max)) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 23rem); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; padding: 0 var(--edge) var(--s2); scroll-padding-inline: var(--edge); }
	.gcards::-webkit-scrollbar { display: none; }
	.gcard { scroll-snap-align: start; display: grid; align-content: start; gap: var(--s3); padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: 12px; font-family: var(--sans); }
	.gcard__who { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .75rem; align-items: center; }
	.gcard__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 1.05rem/1 var(--sans); }
	.gcard__meta { display: grid; gap: .1rem; min-width: 0; }
	.gcard__name { font-weight: 500; font-size: .9375rem; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.gcard time { font-size: .8125rem; color: #5f6368; }
	.gcard__g { width: 1.125rem; height: 1.125rem; }
	.gcard .stars .icon { width: 1.05rem; height: 1.05rem; }
	.gcard__text { font-size: .9375rem; line-height: 1.55; color: #3c4043; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
	.scroller-nav__play .i-play { display: none; }
	.scroller-nav__play.is-paused .i-play { display: block; }
	.scroller-nav__play.is-paused .i-pause { display: none; }
	.rcards { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--s3); scrollbar-width: thin; list-style: none; padding-left: 0; }
	.rcard { scroll-snap-align: start; display: grid; align-content: start; gap: var(--s3); padding: var(--s5); background: var(--mat); border-radius: var(--radius); }
	.on-dark .rcard { background: var(--resin); }
	.rcard blockquote { font: 400 1.1925rem/1.5 var(--accent); }
	.rcard figcaption { font-size: var(--fs-small); color: var(--ink-2); }
	.scroller-nav { display: flex; gap: var(--s2); }
	.scroller-nav button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--sand); border-radius: 50%; }
	.scroller-nav button:hover { border-color: var(--ink); }
	.scroller-nav .icon { width: 1.1rem; height: 1.1rem; }

	/* Service strip (promises) */
	/* Delivery panel: hairline-divided cells (the 1px grid gap shows the panel's line colour). Rows with
	   the label on the left in a narrow column; side by side once there is room for every cell. */
	.dfacts-box { container-type: inline-size; width: 100%; }
	.dfacts { display: grid; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
	.dfacts__item { display: grid; grid-template-columns: 9.5rem 1fr; gap: .15rem var(--s4); align-items: baseline; padding: var(--s4) var(--s5); background: var(--canvas); }
	.dfacts dt { grid-row: span 2; display: flex; align-items: center; gap: .55rem; font: 500 .6875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
	.dfacts dt .icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--amber); }
	.dfacts dd { margin: 0; }
	.dfacts__value { font: 500 1.0625rem/1.35 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
	.dfacts__note { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
	@container (max-width: 22rem) { .dfacts__item { grid-template-columns: 1fr; padding: var(--s4); } .dfacts dt { grid-row: auto; margin-bottom: .2rem; } }
	@container (min-width: 36rem) {
		.dfacts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.dfacts--2 .dfacts__item { grid-template-columns: 1fr; align-content: start; }
		.dfacts--2 dt { grid-row: auto; margin-bottom: .35rem; }
	}
	@container (min-width: 50rem) {
		.dfacts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.dfacts--3 .dfacts__item { grid-template-columns: 1fr; align-content: start; }
		.dfacts--3 dt { grid-row: auto; margin-bottom: .35rem; }
	}

	.promises { display: grid; gap: var(--s5); grid-template-columns: 1fr; list-style: none; padding: 0; }
	@media (min-width: 48em) { .promises { grid-template-columns: repeat(3, 1fr); } }
	.promises li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); align-items: start; }
	.promises .icon { width: 1.75rem; height: 1.75rem; color: var(--ink-2); }
	.promises strong { display: block; font-weight: 500; }
	.promises span { color: var(--ink-2); font-size: var(--fs-small); }

	/* Footer */
	.footer { background: var(--oud); color: var(--travertine); padding-block: var(--s9) var(--s6); font-size: var(--fs-small); --ink: var(--paper); --ink-2: var(--travertine); --line: rgb(246 241 232 / .16); }
	.footer a { color: var(--paper); text-decoration: none; }
	.footer a:hover { text-decoration: underline; }
	/* Newsletter band above the footer: shown only once Omnisend has filled its form in. */
	.newsband { padding-block: var(--s8); }
	.newsband:has(.newsband__form:empty) { display: none; }
	.newsband__inner { display: grid; gap: var(--s5); align-items: center; }
	@media (min-width: 48em) { .newsband__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }
	.newsband__text { display: grid; gap: var(--s3); }
	.newsband__text h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
	.newsband__form { min-width: 0; }
	.footer__top { display: grid; gap: var(--s7); grid-template-columns: 1fr; }
	@media (min-width: 48em) { .footer__top { grid-template-columns: 1.4fr repeat(4, 1fr); } }
	.footer__brand { display: grid; gap: var(--s4); align-content: start; max-width: 22rem; }
	.footer__brand img { width: 9rem; }
	.footer__brand p { line-height: 1.6; }
	.footer h2 { font: 500 var(--fs-eyebrow)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--travertine); margin-bottom: var(--s4); }
	.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
	.footer__social { display: flex; gap: var(--s2); }
	.footer__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(246 241 232 / .25); border-radius: 50%; }
	.footer__social a:hover { border-color: var(--paper); text-decoration: none; }
	.footer__social .icon { width: 1.15rem; height: 1.15rem; }
	.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--sand); font-size: .8125rem; }
	.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s4); }
	.footer__promise { font: 400 1.1262rem/1.5 var(--accent); color: var(--paper); }

	/* ---- Home ---- */
	/* Hero: text on the left, the photo filling the right half from the header to the bottom of the
	   first screen and out to the window edge. Phones: the photo edge to edge on top, text below. */
	.hero__grid { display: grid; align-items: center; }
	.hero__text { display: grid; gap: var(--s5); justify-items: start; }
	.hero__title { font-size: clamp(2.4rem, 1rem + 3.2vw, 4.5rem); line-height: 1.02; letter-spacing: -.015em; }
	.hero__lead { max-width: 30rem; }
	.hero__actions { --cluster: var(--s3); }
	.hero__media { position: relative; overflow: hidden; background: var(--mat); margin: 0; }
	.hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	/* Film: the first frame is the image; the video fades in over it once it is actually playing. */
	.hero__video { opacity: 0; transition: opacity .6s var(--ease-out); }
	.hero__media.is-playing .hero__video { opacity: 1; }
	.hero__pause { position: absolute; right: var(--s4); bottom: var(--s4); z-index: 2; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: rgb(246 241 232 / .85); color: var(--oud); }
	.hero__pause .icon { width: 1rem; height: 1rem; }
	.hero__pause .i-play, .hero__pause.is-paused .i-pause { display: none; }
	.hero__pause.is-paused .i-play { display: block; }
	/* A faint wordmark behind the text, so the cream half has some depth. */
	.hero__text { position: relative; overflow: hidden; }
	.hero__text > * { position: relative; z-index: 1; }
	.hero__text::before { content: ""; position: absolute; z-index: 0; right: -8%; bottom: -6%; width: 78%; aspect-ratio: 130 / 35; background: url(../img/logo.svg) no-repeat center / contain; opacity: .045; pointer-events: none; }
	/* Trust row: Google rating · starting price · free delivery. */
	ul.htrust { display: grid; grid-template-columns: repeat(3, auto); align-items: center; list-style: none; margin: var(--s5) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); width: fit-content; max-width: 100%; }
	.htrust li { padding: 0 var(--s5); border-left: 1px solid var(--line); }
	.htrust li:first-child { padding-left: 0; border-left: 0; }
	.htrust a, .htrust li { display: grid; gap: .2rem; align-content: start; text-decoration: none; color: inherit; }
	.htrust b { display: flex; align-items: center; gap: .35rem; font: 500 1.0625rem/1.2 var(--sans); white-space: nowrap; }
	.htrust b .stars { font-size: .8rem; }
	.htrust__g { width: 1rem; height: 1rem; flex: none; }
	.htrust__sub { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
	.htrust a:hover .htrust__sub { text-decoration: underline; text-underline-offset: .2em; }
	@media (max-width: 47.99em) {
		ul.htrust { grid-template-columns: repeat(3, auto); width: 100%; justify-content: space-between; }
		.htrust li { padding: 0 var(--s3); }
		.htrust li:last-child { padding-right: 0; }
		.htrust b { font-size: .875rem; }
		.htrust b .stars { display: none; }
		.htrust__sub { font-size: .6875rem; }
	}
	/* Staging-only hero preview switcher. */
	.hero-switch { position: fixed; left: 0; right: 0; bottom: var(--s4); margin-inline: auto; width: fit-content; z-index: 60; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; align-items: center; max-width: calc(100vw - 2rem); padding: .4rem; border-radius: 999px; background: rgb(42 28 20 / .92); color: var(--paper); font: 500 .75rem/1 var(--sans); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); }
	.hero-switch span { padding: 0 .5rem; color: var(--sand); }
	.hero-switch a { padding: .5rem .75rem; border-radius: 999px; color: var(--paper); text-decoration: none; white-space: nowrap; }
	.hero-switch a[aria-current] { background: var(--paper); color: var(--oud); }
	@media (max-width: 47.99em) { .hero-switch { border-radius: 14px; bottom: var(--s3); } .hero-switch span { width: 100%; text-align: center; padding: .25rem; } .hero-switch a { padding: .45rem .6rem; } }
	@media (max-width: 63.99em) {
		.hero__grid { grid-template-columns: 1fr; }
		.hero__media { order: -1; aspect-ratio: 1; }
		.hero__text { padding: var(--s6) var(--gutter) var(--s4); }
		.hero__actions .btn { flex: 1 1 100%; }
	}
	@media (min-width: 64em) {
		.hero__grid { width: 100%; grid-template-columns: 1fr 1fr; align-items: stretch; height: clamp(34rem, calc(100svh - var(--header-h) - var(--announce-h)), 56rem); }
		.hero__text { align-content: center; padding: var(--s8) var(--s9) var(--s8) max(var(--gutter), calc((100vw - var(--max)) / 2)); }
	}
	/* No hero photo or film set: the text alone, full width and only as tall as it needs. */
	.hero--text .hero__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
	.hero--text .hero__text { padding-block: var(--s9); }
	.hero--text .hero__text::before { width: min(78%, 34rem); }

	.seven { padding-block: var(--section); overflow: hidden; }
	.seven__grid { display: grid; gap: var(--s7); align-items: center; }
	@media (min-width: 64em) { .seven__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s9); } }
	.seven__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); line-height: 1.02; }
	.seven__media { margin: 0; aspect-ratio: 1; overflow: hidden; }
	.seven__media img { width: 100%; height: 100%; object-fit: cover; }
	.seven__wells { --w: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); gap: .7rem; }
	.seven__wells span { border-color: rgb(246 241 232 / .55); position: relative; overflow: hidden; }
	.seven__wells span::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fam); transform: scale(0); transition: transform calc(520ms * var(--motion)) var(--ease-settle); transition-delay: calc(var(--i) * 110ms * var(--motion)); }
	.seven.is-in .seven__wells span::after, html:not(.js) .seven__wells span::after { transform: scale(1); }
	@media (prefers-reduced-motion: reduce) { .seven__wells span::after { transform: scale(1); transition: none; } }

	.famgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; padding: 0; }
	@media (min-width: 48em) { .famgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	.famtile { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); height: 100%; padding: var(--s5); background: var(--canvas); text-decoration: none; transition: background-color var(--dur-quick) var(--ease-out); }
	.famtile:hover { background: var(--limestone); text-decoration: none; }
	.famtile__orb { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--fam), #fff 25%), color-mix(in oklab, var(--fam), #000 30%) 70%); transition: transform var(--dur-base) var(--ease-out); }
	.famtile:hover .famtile__orb { transform: scale(1.06); }
	.famtile__name { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.15 var(--display); }
	.famtile__desc { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
	.famtile__count { margin-top: var(--s2); }
	@media (max-width: 47.99em) { .famtile__desc { display: none; } .famtile { padding: var(--s4); } }

	.ritual__steps { display: grid; gap: var(--s7); list-style: none; padding: 0; }
	@media (min-width: 48em) { .ritual__steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
	.ritual__step { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line); }
	.ritual__step svg { color: var(--saffron); width: 3.5rem; height: 3.5rem; margin-bottom: var(--s3); }
	.ritual__step h3 { font-size: var(--fs-h3); }

	.postgrid { display: grid; gap: var(--s7) var(--gap); list-style: none; padding: 0; }
	@media (min-width: 48em) { .postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	.postgrid--index > li:first-child { grid-column: 1 / -1; }
	@media (min-width: 48em) { .postgrid--index > li:first-child .postcard { grid-template-columns: 1.3fr 1fr; align-items: center; column-gap: var(--s7); } .postgrid--index > li:first-child .postcard__media { grid-row: span 4; } .postgrid--index > li:first-child .postcard__title { font-size: var(--fs-h2); } }
	.postcard { display: grid; gap: var(--s3); align-content: start; }
	.postcard__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--limestone); }
	.postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(900ms * var(--motion)) var(--ease-luxe); }
	.postcard:hover .postcard__media img { transform: scale(1.025); }
	.postcard__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--limestone), var(--travertine)); }
	.postcard__title { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.2 var(--display); }
	.postcard__title a { text-decoration: none; }
	.postcard__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
	.postcard__dek { color: var(--ink-2); font-size: var(--fs-small); }

	/* Family pages: a coloured orb beside the title */
	.colhead--fam { position: relative; }
	.fam-orb { width: clamp(3rem, 2.4rem + 2vw, 4.5rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--fam), #fff 25%), color-mix(in oklab, var(--fam), #000 32%) 70%); }
	/* Family guide: generic copy on the left, the live "how to choose" list on the right */
	.famguide { display: grid; gap: var(--s8); border-top: 1px solid var(--line); }
	@media (min-width: 64em) { .famguide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; } .famguide__intro { position: sticky; top: calc(var(--header-h) + var(--s6)); } }
	.famguide__intro h2 { margin-top: 0; }
	.famguide__choose { display: grid; gap: var(--s6); }
	.famguide__choose > h2 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); }
	.famguide__group h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--s2); }
	.famguide__group ul { border-top: 1px solid var(--line); }
	.famguide__group li { display: grid; gap: .15rem; padding-block: var(--s3); border-bottom: 1px solid var(--line); }
	@media (min-width: 48em) { .famguide__group li { grid-template-columns: 11rem 1fr; gap: var(--s5); align-items: baseline; } }
	.famguide__group a { font: 500 1.1875rem/1.25 var(--display); text-decoration: none; }
	.famguide__group a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.famguide__group span { color: var(--ink-2); font-size: var(--fs-small); }
	.famothers { background: var(--limestone); padding-block: var(--s8); }
	.famothers__in { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
	.famothers .cluster { justify-content: center; }

	/* Articles */
	.article__head { padding-block: var(--s7) var(--s6); display: grid; gap: var(--s4); }
	.article__head h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }
	.article__hero { margin: 0 auto var(--s7); }
	.article__hero img { width: 100%; max-height: 70vh; object-fit: cover; }
	.article__body { padding-bottom: var(--section); }
	.notfound__bottle { margin-inline: auto; color: var(--clay); }
	.woo-page { padding-bottom: var(--s8); }


/* ======================================================== pages */

	/* Collection head */
	.colhead { padding-block: var(--s6) var(--s7); display: grid; gap: var(--s4); }
	.colhead h1 { max-width: 18ch; }
	.colhead__intro { max-width: 40rem; color: var(--ink-2); font-size: 1.0625rem; }
	.colhead__fams { display: flex; gap: var(--s2); overflow-x: auto; padding-block: var(--s2); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
	.colhead__fams::-webkit-scrollbar { display: none; }
	@media (min-width: 64em) { .colhead__fams { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
	.colbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s4); margin-bottom: var(--s6); border-block: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
	.colbar select { border: 0; background: transparent; font-size: var(--fs-small); color: var(--ink); padding-right: .25rem; min-height: 2.75rem; cursor: pointer; }

	/* Prose (pages, articles) */
	.prose { font-size: 1.0625rem; line-height: 1.7; }
	.prose > * + * { margin-top: 1.1em; }
	.prose h2 { margin-top: 2em; font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); }
	.prose h3 { margin-top: 1.6em; font-size: 1.375rem; }
	.prose h2 + *, .prose h3 + * { margin-top: .6em; }
	.prose a { color: var(--amber); }
	.prose ul, .prose ol { padding-left: 1.25em; }
	.prose li + li { margin-top: .4em; }
	.prose img, .prose figure { margin-block: 2em; }
	.prose figure img { width: 100%; }
	.prose figcaption { font-size: var(--fs-small); color: var(--ink-2); margin-top: .6em; }
	.prose blockquote { border-left: 1px solid var(--amber); padding-left: 1.25em; font: 400 1.325rem/1.5 var(--accent); }
	.prose table { width: 100%; font-size: var(--fs-small); }
	.prose th, .prose td { text-align: left; padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
	.prose th { font-weight: 500; }
	.prose hr { margin-block: 2.5em; }
	.page-head { padding-block: var(--s7) var(--s6); display: grid; gap: var(--s4); }
	.page-head .lead { max-width: 38rem; color: var(--ink-2); }


/* ======================================================== utilities */

	/* .screen-reader-text: WordPress and WooCommerce's own name for the same thing (pagination, form labels). */
	.vh, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
	.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }
	.nowrap { white-space: nowrap; }
	/* Text-and-photo layouts whose photo is missing on this site: the text takes the full width. */
	.grid-solo { grid-template-columns: minmax(0, 1fr) !important; }
	@media (max-width: 29.99em) { .hide-xs { display: none !important; } }
	.center { text-align: center; }
	/* Reveal: only applied by JS to elements confirmed below the fold (motion.md §5.5). */
	[data-reveal="pending"] { opacity: 0; transform: translateY(var(--move-reveal)); }
	[data-reveal="in"] { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-luxe), transform var(--dur-reveal) var(--ease-luxe); transition-delay: calc(var(--i, 0) * 70ms * var(--motion)); }
	@media (prefers-reduced-motion: reduce) { [data-reveal="pending"] { opacity: 1; transform: none; } }
	@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } .masthead, .announce, .footer, dialog { display: none !important; } }


/* Cross-document page transitions: a quiet crossfade, header held still (motion.md §5.15). */
@media (prefers-reduced-motion: no-preference) {
	.masthead { view-transition-name: masthead; }
	::view-transition-old(root) { animation: calc(160ms * var(--motion)) var(--ease-exit) both hoa-vt-out; }
	::view-transition-new(root) { animation: calc(300ms * var(--motion)) var(--ease-out) both hoa-vt-in; }
	::view-transition { pointer-events: none; }
}
@keyframes hoa-vt-out { to { opacity: 0; } }
@keyframes hoa-vt-in { from { opacity: 0; } }

/* Our story */

	.story__head { padding-block: var(--s7) var(--s8); display: grid; gap: var(--s5); }
	.story__head h1 { font-size: var(--fs-display); line-height: 1; max-width: 12ch; }
	.story__intro { max-width: 46rem; }
	.story__intro p { font: 400 clamp(1.3rem, 1.15rem + .8vw, 1.85rem)/1.5 var(--accent); }
	.story__intro p.lead { color: var(--ink-2); margin-bottom: .5em; }
	.story__intro p + p { margin-top: 1em; }
	.story__chapter { display: grid; gap: var(--s5) var(--s9); padding-block: var(--s8); border-top: 1px solid var(--line); }
	@media (min-width: 64em) {
		.story__chapter { grid-template-columns: 1fr 1.6fr; }
		.story__label { position: sticky; top: calc(var(--header-h) + var(--s6)); align-self: start; }
		.story__plate { grid-column: 2; }
	}
	.story__num { font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; color: var(--amber); margin-bottom: var(--s3); }
	.story__label h2 { font-size: var(--fs-h2); }
	.story__plate figure { margin: 0; }
	.story__plate img { width: 100%; max-height: 80vh; object-fit: cover; }
	.story__end h2 { font-size: var(--fs-h1); }
	.callout { padding: var(--s5); background: var(--limestone); border-left: 1px solid var(--amber); }
	.prose details { border-top: 1px solid var(--line); padding-block: var(--s3); }
	.prose details:last-of-type { border-bottom: 1px solid var(--line); }
	.prose summary { cursor: pointer; font-weight: 500; min-height: 2.75rem; display: flex; align-items: center; }
	.prose .lead { font: 400 calc(var(--fs-lead) * 1.06)/1.5 var(--accent); color: var(--ink-2); }
	.prose figure img { height: auto; }


/* Contact + forms */
.contact { display: grid; gap: var(--s8); padding-bottom: var(--s8); }
@media (min-width: 64em) { .contact { grid-template-columns: 1fr 1.1fr; gap: var(--s10); align-items: start; } }
.contact__list { display: grid; gap: var(--s5); list-style: none; padding: 0; margin-bottom: var(--s7); }
.contact__list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s4); align-items: start; }
.contact__list .icon { color: var(--ink-2); }
.contact__k { font-size: var(--fs-small); color: var(--ink-2); }
.contact__quick { display: grid; gap: var(--s3); }
.contact__form { display: grid; gap: var(--s4); padding: var(--s6); background: var(--limestone); }
.fieldset { display: grid; gap: .4rem; }
.fieldset label { font-weight: 500; font-size: var(--fs-small); }
textarea.field { min-height: 9rem; resize: vertical; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1C14' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; padding-right: 2.5rem; }
.notice { padding: var(--s4); font-size: var(--fs-small); border-left: 2px solid; }
.notice--ok { border-color: var(--moss); background: rgb(70 85 58 / .08); }
.notice--err { border-color: var(--rose); background: rgb(139 54 50 / .08); }

/* Third-party: keep the Complianz banner inside the viewport and in the house type. */
.cmplz-cookiebanner { max-width: calc(100vw - 1rem) !important; font-family: var(--sans) !important; }
.cmplz-cookiebanner .cmplz-divider { max-width: 100%; }

/* Scent finder */
.finder { padding-block: var(--s7) var(--section); display: grid; gap: var(--s6); }
.finder__head { display: grid; gap: var(--s4); max-width: 40rem; }
.finder__trail { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; min-height: 2.25rem; }
.finder__q { display: grid; gap: var(--s5); max-width: 52rem; }
.finder__q h2:focus { outline: none; }
.finder__opts { display: grid; gap: var(--s3); list-style: none; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 40em) { .finder__opts { grid-template-columns: repeat(2, 1fr); } }
.finder__opt { width: 100%; text-align: left; display: grid; gap: .25rem; padding: var(--s5); border: 1px solid var(--sand); border-radius: var(--radius); background: var(--paper); transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out), transform var(--dur-tap) var(--ease-out); }
.finder__opt:hover { border-color: var(--oud); background: var(--limestone); }
.finder__opt:active { transform: scale(.99); }
.finder__opt[data-pick] { position: relative; padding-right: calc(var(--s5) + 1.75rem); }
.finder__tick { position: absolute; top: var(--s5); right: var(--s5); width: 1.25rem; height: 1.25rem; border: 1px solid var(--sand); border-radius: 50%; transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.finder__opt[aria-pressed="true"] { border-color: var(--oud); background: var(--limestone); box-shadow: inset 0 0 0 1px var(--oud); }
.finder__opt[aria-pressed="true"] .finder__tick { background: var(--oud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E8' stroke-width='2.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; border-color: var(--oud); }
.finder__hint { margin-top: calc(-1 * var(--s3)); color: var(--ink-2); }
.finder__next { display: flex; align-items: center; gap: var(--s4); }
.finder__next .btn:disabled { opacity: .45; cursor: not-allowed; }
.finder__t { font: 500 1.375rem/1.2 var(--display); }
.finder__d { font-size: var(--fs-small); color: var(--ink-2); }
.finder__back { justify-self: start; }
.finder__res { display: grid; gap: var(--s6); }
.finder__why { color: var(--amber); }
.finder__cta { display: grid; gap: var(--s4); justify-items: start; padding: var(--s6); background: var(--limestone); }

/* Home: scent finder as a quiz card. The finder's first question is answerable here; the steps on
   the left say exactly what follows, so it can't be mistaken for the family grid below. */
.hquiz__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 64em) { .hquiz__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s9); } }
.hquiz__text { display: grid; gap: var(--s4); justify-items: start; }
.hquiz__text h2 { max-width: 17ch; }
@media (max-width: 47.99em) { ol.hquiz__steps { display: none; } }
ol.hquiz__steps { display: grid; gap: var(--s3); margin: var(--s2) 0; padding: 0; counter-reset: none; }
.hquiz__steps li { display: flex; align-items: center; gap: var(--s3); font: 500 1rem/1.3 var(--sans); }
.hquiz__steps .data { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--clay); border-radius: 50%; font-size: .75rem; color: var(--ink-2); }
.hquiz__card { display: grid; gap: var(--s5); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 40px 80px -40px rgb(42 28 20 / .35); }
.hquiz__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-size: .75rem; color: var(--ink-2); }
.hquiz__prog { display: grid; grid-template-columns: repeat(4, 2rem); gap: .3rem; }
.hquiz__prog i { height: 3px; border-radius: 2px; background: var(--line); }
.hquiz__prog i.is-on { background: var(--amber); }
.hquiz__q { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--display); }
ul.hquiz__opts { display: grid; gap: var(--s2); }
.hquiz__opts a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 3.25rem; padding: 0 var(--s5); border: 1px solid var(--sand); border-radius: 10px; font: 500 1rem/1.2 var(--sans); color: var(--ink); text-decoration: none; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.hquiz__opts a .icon { width: 1.1rem; height: 1.1rem; color: var(--ink-2); transition: transform var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.hquiz__opts a:hover { background: var(--oud); border-color: var(--oud); color: var(--paper); text-decoration: none; }
.hquiz__opts a:hover .icon { color: var(--paper); transform: translateX(3px); }
.hquiz__foot { text-align: center; }

@media (max-width: 47.99em) { .greviews .scroller-nav [data-dir] { display: none; } }

/* City delivery pages */
.city__grid { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s7); align-items: center; }
@media (min-width: 64em) { .city__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } }
.city__head { display: grid; gap: var(--s5); justify-items: start; }
.city__media { aspect-ratio: 1; overflow: hidden; background: var(--mat); }
.city__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 63.99em) { .city__media { order: -1; aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gutter)); } }
.city__head h1 { max-width: 16ch; }
.city__head .lead { max-width: 40rem; }
.city__head .dfacts-box { margin-top: var(--s3); }

/* About: at-a-glance facts (`.glance` in the page content) and the founder quote */
.glance { display: grid; margin-top: var(--s5); border-top: 1px solid var(--line); max-width: 36rem; }
.glance > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s4); padding-block: .6rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.glance dt { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: .15rem; }
.story blockquote { padding-left: var(--s5); border-left: 1px solid var(--amber); font: 400 1.325rem/1.45 var(--accent); }
.story blockquote .small { font: 400 var(--fs-small) var(--sans); color: var(--ink-2); margin-top: .5rem; }
.story h3 { font: 500 1.1875rem/1.3 var(--display); margin-top: 1.4em; }
.story__plate img { width: 100%; max-height: 26rem; object-fit: cover; }

/* About: closing Discovery Set band on the light stone, photo beside the copy (no dark band
   running straight into the dark footer). The footer also gets a hairline top edge. */
.story__end { background: var(--limestone); }
.story__end-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 64em) { .story__end-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s9); } }
.story__end-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mat); }
.story__end-media img { width: 100%; height: 100%; object-fit: cover; }
.footer { border-top: 1px solid rgb(246 241 232 / .08); }

/* Search landing pages: guide copy beside a family index */
.landing__guide { border-top: 1px solid var(--line); }
@media (min-width: 64em) { .landing__guide { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.landing__copy h2:first-child { margin-top: 0; }
.landing__fams ul { list-style: none; padding: 0; border-top: 1px solid var(--line); margin-top: var(--s3); }
.landing__fams li { display: grid; gap: .15rem; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.landing__fams a { display: inline-flex; align-items: center; gap: .5rem; font: 500 1.0625rem/1.3 var(--display); text-decoration: none; }
@media (min-width: 64em) { .landing__fams { position: sticky; top: calc(var(--header-h) + var(--s6)); } }

/* Journal pagination (the_posts_pagination): numbers as quiet squares, the current page filled, newer/older as
   outlined buttons with arrows. Also on category archives (same template). */
.pagination { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--radius); font: 500 var(--fs-ui)/1 var(--sans); color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.pagination a.page-numbers:hover { border-color: var(--sand); }
.pagination .page-numbers.current { background: var(--oud); border-color: var(--oud); color: var(--paper); }
.pagination .page-numbers.dots { min-width: 1.5rem; padding: 0; color: var(--ink-2); }
.pagination :is(.prev, .next).page-numbers { padding: 0 1.1rem; border-color: var(--sand); }
.pagination :is(.prev, .next).page-numbers:hover { border-color: var(--oud); background: var(--oud); color: var(--paper); }
.pagination .prev { margin-right: var(--s3); }
.pagination .next { margin-left: var(--s3); }
.pagination .icon { width: 1rem; height: 1rem; }
@media (max-width: 29.99em) { .pagination .prev { margin-right: 0; } .pagination .next { margin-left: 0; } }

/* Cookie policy: Complianz's consent list as a stone panel of hairline rows, ink text, the theme's tick boxes
   (accent colour) and a round chevron button. Complianz's selectors carry an id, so these do too. */
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories { margin-top: var(--s6); padding: .25rem 1.5rem; background: var(--limestone); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category { background: none; border-bottom: 1px solid var(--line); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:last-child { border-bottom: 0; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 0; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header { grid-template-columns: minmax(0, 1fr) auto 2.75rem; gap: .75rem; min-height: 3.75rem; padding: .5rem 0; background: none; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-category-title { font: 500 1rem/1.3 var(--sans); color: var(--ink); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { display: inline-flex; align-items: center; gap: .4rem; font: 400 .8125rem/1.2 var(--sans); color: var(--ink-2); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--moss); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--oud); cursor: pointer; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink); transition: background-color var(--dur-quick) var(--ease-out); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle:hover { background: rgb(42 28 20 / .06); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-out); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-icon svg { width: 1rem; height: 1rem; fill: currentColor; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description { padding: 0 0 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--ink-2); }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-description > span { display: block; }
/* Complianz prints two Statistics texts and hides the one that doesn't apply; statistics here need consent, so never the anonymous one. */
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-description > .cmplz-description-statistics-anonymous { display: none; }
.prose #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-description > span + span { margin-top: .5em; }