:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(94.5% 0.010 76); --color-paper-2: oklch(91.8% 0.013 74); --color-paper-3: oklch(88% 0.015 72);
  --color-ink: oklch(19% 0.024 52); --color-ink-2: oklch(31% 0.018 54); --color-muted: oklch(47% 0.014 60);
  --color-rule: oklch(81% 0.011 70);
  --color-accent: oklch(41% 0.075 248); --color-accent-ink: oklch(96% 0.008 76); --color-focus: oklch(50% 0.095 248);
  --color-card: oklch(97.6% 0.007 82); --color-card-edge: oklch(86% 0.012 72); --color-pencil: oklch(52% 0.010 62);
  --card-lit: oklch(98.4% 0.006 84); --card-shade: oklch(96.4% 0.008 78); --lit: oklch(99.6% 0.004 85 / 0.9);
  --stain-1: oklch(70% 0.075 14); --stain-2: oklch(66% 0.055 132); --stain-3: oklch(60% 0.080 58); --stain-4: oklch(68% 0.045 206);
  --font-display: "Sentient", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-outlier: var(--font-body);
  --radius-card: 0; --radius-pill: 3px; --rule-hair: 1px; --rule-head: 1px;
  --shadow-card: 0 0 0 1px oklch(30% 0.03 55 / 0.05), 0.5px 1px 1px oklch(30% 0.03 55 / 0.08), 3px 8px 14px -6px oklch(30% 0.03 55 / 0.14), 14px 36px 64px -28px oklch(30% 0.03 55 / 0.3);
  --tracking-display: -0.018em; --tracking-statement: -0.022em; --display-weight: 300; --statement-weight: 300; --serif-small: 400;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: warm con=-6 vib=-10 */
[data-slot] > img { filter: sepia(0.28) saturate(0.89) contrast(0.94); }

/* Hallmark · shape: Catalogue · genre: editorial · theme: Atelier (by request) · job: subscribe · draw: 3caffd
 * hero: Ledge · nav: floating pill · footer: index columns · imagery: photographs · signature: twelve sample strips, one for each night from 13 to 24 December
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R2 V2 · weakest: R, no real photographs of our own bottles yet; one library still life in a matted print, a slot for ours */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.18'/%3E%3C/svg%3E");
  --air-1: oklch(93% 0.028 70 / 0.55);
  --air-2: oklch(95% 0.022 40 / 0.5);
}

body { color: var(--color-ink-2); line-height: 1.6; }
h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); letter-spacing: var(--tracking-display); }
h3 { font-weight: var(--serif-small); color: var(--color-ink); }

/* the air: a still frame of the haze behind the hero, paper sections cover it */
.air { position: relative; isolation: isolate; }
.air::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 50% at 18% 30%, var(--air-1), transparent 70%), radial-gradient(50% 60% at 82% 70%, var(--air-2), transparent 70%), var(--color-paper); }
.air::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 180px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }

/* nav: a floating pill */
.nav { position: sticky; top: var(--space-sm); z-index: var(--z-sticky-nav); display: flex; justify-content: center; padding-inline: var(--gutter); }
.nav-pill { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background: var(--color-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
.wordmark { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; }
.nav-pill nav { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.nav-pill nav a { color: var(--color-ink-2); text-decoration: none; }
.nav-pill nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* controls: hairline in ink, hover fills ink */
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); background: transparent; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.nav-pill .btn { min-height: 40px; font-size: var(--text-sm); }

/* hero: the ledge — head and form on the left, the print standing on its ledge at right */
.hero { padding-block: var(--space-3xl) var(--section-gap); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gap-columns); align-items: end; }
.hero h1 { font-size: var(--text-display); line-height: 1.04; max-width: 11ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.signup { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); max-width: 30rem; }
.signup label { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.signup input { min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-card); color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out); }
.signup input:hover { border-color: var(--color-muted); }
.signup input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.signup input:invalid:not(:placeholder-shown) { border-color: var(--color-error); }
.signup-note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.signup-note[data-state="done"] { color: var(--color-ink); }

.print { position: relative; padding: var(--space-md) var(--space-md) var(--space-sm); }
.print, .stock { border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade));
  box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); text-shadow: 0 1px 0 var(--lit); }
.print .frame { aspect-ratio: 4 / 5; }
.print .frame > img { object-position: 45% 55%; }
.print figcaption { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-pencil); }
.print figcaption .ed { font-variant-numeric: tabular-nums; }

section { padding-block: var(--section-gap-s); }
section + section { padding-top: 0; }
.paper { background: var(--color-paper); position: relative; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: var(--text-section); line-height: 1.08; }
.section-head p { color: var(--color-ink-2); max-width: 40ch; }

/* signature: the twelve strips on a rail, one for each night */
.rail { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink-2); }
.strip { position: relative; height: 15rem; border-radius: 2px 2px 0 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  background: var(--fibre) 0 0 / 220px, linear-gradient(180deg, var(--card-lit), var(--color-card) 60%, var(--stain) 100%);
  box-shadow: inset 1px 1px 0 var(--lit); display: flex; justify-content: center; padding-top: var(--space-sm); }
.strip:nth-child(4n+1) { --stain: color-mix(in oklab, var(--stain-1) 55%, var(--color-card)); }
.strip:nth-child(4n+2) { --stain: color-mix(in oklab, var(--stain-2) 55%, var(--color-card)); }
.strip:nth-child(4n+3) { --stain: color-mix(in oklab, var(--stain-3) 55%, var(--color-card)); }
.strip:nth-child(4n+4) { --stain: color-mix(in oklab, var(--stain-4) 55%, var(--color-card)); }
.strip span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.strip:nth-child(even) { transform: translateY(var(--space-md)); }
.box-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); margin-top: var(--space-2xl); align-items: start; }
.box-note .figure { font-family: var(--font-display); font-weight: var(--statement-weight); font-size: var(--text-display-s); color: var(--color-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.box-note p { max-width: 42ch; }

/* the offer as ruled rows */
.rows { border-top: var(--rule-head) solid var(--color-ink); }
.row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.row h3 { font-size: var(--text-xl); }
.row p { color: var(--color-ink-2); }
.row .price { text-align: right; font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-xl); color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* how it is poured: a statement with a slate drop cap */
.statement p { font-family: var(--font-body); font-size: var(--text-lead); line-height: 1.5; max-width: 46ch; color: var(--color-ink-2); }
.dropcap::first-letter { float: left; font: var(--serif-small) 3.3em/0.8 var(--font-display); padding: 0.1em 0.1em 0 0; color: var(--color-accent); }
.statement h2 { font-size: var(--text-section); margin-bottom: var(--space-xl); max-width: 18ch; }

/* close: the card to sign up on */
.close .stock { position: relative; padding: var(--space-2xl); max-width: 40rem; }
.close .stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }
.close h2 { font-size: var(--text-section); }
.close .signup { margin-top: var(--space-lg); }

/* footer: index columns */
.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.foot h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); margin-bottom: var(--space-xs); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.foot .credit { margin-top: var(--space-xl); }

@media (max-width: 60rem) {
  .hero-grid, .section-head, .box-note, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .print { max-width: 26rem; }
  .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .strip { height: 11rem; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row p { grid-column: 1 / -1; grid-row: 2; }
  .nav-pill nav { display: none; }
}
@media (max-width: 40rem) {
  .signup { grid-template-columns: minmax(0, 1fr); }
  .close .stock { padding: var(--space-xl) var(--space-lg); }
}

/* SILLAGE store: shop components on top of the Atelier page system (tokens, base, page) */

a.btn { text-decoration: none; }

/* announcement bar */
.notice { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); letter-spacing: 0.04em; text-align: center; padding: var(--space-xs) var(--gutter); }
.notice a { color: inherit; }

/* nav: the floating pill grows a cart button */
.nav-pill { gap: var(--space-md); }
.wordmark { letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--text-md); }
.wordmark small { display: block; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.32em; color: var(--color-muted); margin-top: 1px; }
.cart-btn { position: relative; min-height: 40px; min-width: 40px; padding: 0 var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); cursor: pointer; font-size: var(--text-sm); }
.cart-btn:hover { background: var(--color-ink-2); }
.cart-count { font-variant-numeric: tabular-nums; }
.menu-btn { display: none; min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; font-size: var(--text-sm); }
.mobile-nav { display: none; }
.mobile-nav[data-open] { display: grid; position: fixed; inset: var(--space-3xl) var(--gutter) auto; z-index: var(--z-modal); gap: var(--space-xs); padding: var(--space-lg);
  background: var(--color-card); box-shadow: var(--shadow-card); border-radius: 2px; }
.mobile-nav a { padding: var(--space-xs) 0; color: var(--color-ink); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }

/* the vial: our own drawing of a decant, tinted per scent, until real photographs exist */
.vial { --tint: oklch(80% 0.05 70); position: relative; width: 34%; max-width: 7rem; aspect-ratio: 1 / 3.1; margin-inline: auto; filter: drop-shadow(6px 14px 14px oklch(30% 0.03 55 / 0.18)); }
.vial .cap { position: absolute; left: 22%; right: 22%; top: 0; height: 16%; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, oklch(28% 0.01 60), oklch(48% 0.01 60) 45%, oklch(24% 0.01 60)); }
.vial .collar { position: absolute; left: 18%; right: 18%; top: 16%; height: 5%; background: linear-gradient(90deg, oklch(62% 0.06 80), oklch(84% 0.06 85) 45%, oklch(58% 0.06 80)); }
.vial .glass { position: absolute; left: 0; right: 0; top: 21%; bottom: 0; border-radius: 10px 10px 8px 8px; overflow: hidden;
  background: linear-gradient(90deg, oklch(97% 0.005 80 / 0.55), oklch(99% 0.003 80 / 0.25) 40%, oklch(92% 0.006 80 / 0.5));
  box-shadow: inset 0 0 0 1px oklch(60% 0.01 70 / 0.35), inset 6px 0 8px -4px oklch(100% 0 0 / 0.8); }
.vial .juice { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 82%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--tint) 80%, black 6%), var(--tint) 45%, color-mix(in oklab, var(--tint) 85%, black 10%)); opacity: 0.85; }
.vial .label { position: absolute; left: 12%; right: 12%; top: 38%; padding: 10% 4%; text-align: center; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-card-edge);
  font-family: var(--font-display); color: var(--color-ink); line-height: 1.1; }
.vial .label b { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.42rem; letter-spacing: 0.3em; color: var(--color-muted); margin-bottom: 4px; }
.vial .label span { display: block; font-size: 0.62rem; }
.vial .label i { display: block; font-style: normal; font-family: var(--font-body); font-size: 0.42rem; color: var(--color-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.card { display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: inherit; min-width: 0; }
.card .plate { aspect-ratio: 4 / 5; display: grid; place-items: center; padding-block: var(--space-lg); border-radius: 2px;
  background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit);
  transition: transform var(--dur-short) var(--ease-out); }
.card:hover .plate { transform: translateY(-3px); }
.card .house { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.card h3 { font-size: var(--text-lg); }
.card .from { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.card .tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.tag { font-size: var(--text-xs); padding: 2px var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); align-items: center; }
.filters .lbl { font-size: var(--text-sm); color: var(--color-muted); margin-right: var(--space-xs); }
.chip { min-height: 36px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; font-size: var(--text-sm); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.empty { padding: var(--space-2xl) 0; color: var(--color-muted); }

/* page header for inner pages */
.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.page-head h1 { font-size: var(--text-display-s); max-width: 18ch; }
.page-head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-lg); }
.crumbs a { color: inherit; }

/* product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-2xl) var(--section-gap-s); align-items: start; }
.pdp .plate { position: sticky; top: var(--space-3xl); aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 2px;
  background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); }
.pdp .plate .vial { width: 22%; }
.pdp .plate small { position: absolute; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); font-size: var(--text-xs); color: var(--color-pencil); }
.pdp .house { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.pdp h1 { font-size: var(--text-display-s); margin-top: var(--space-xs); }
.pdp .type { color: var(--color-muted); margin-top: var(--space-xs); }
.pdp .line { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.sizes { margin-top: var(--space-xl); border: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.sizes legend { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size label { display: grid; gap: 2px; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); text-align: center; cursor: pointer; background: var(--color-card); }
.size label b { font-weight: 400; color: var(--color-ink); }
.size label span { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.size label small { font-size: var(--text-xs); color: var(--color-muted); }
.size input:checked + label { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.size input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.buy { margin-top: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.buy .btn { background: var(--color-ink); color: var(--color-paper); width: 100%; }
.buy .btn:hover { background: var(--color-ink-2); }
.addon { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-2); }
.addon input { margin-top: 3px; accent-color: var(--color-ink); }
.assure { margin-top: var(--space-lg); display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.notes { margin-top: var(--space-2xl); border-top: var(--rule-head) solid var(--color-ink); }
.notes .row { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); padding-block: var(--space-md); }
.notes .row h3 { font-size: var(--text-md); font-family: var(--font-body); color: var(--color-muted); }
.notes .row p { color: var(--color-ink); }
.origin { margin-top: var(--space-2xl); position: relative; padding: var(--space-lg); border-radius: 2px;
  background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card); }
.origin h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.origin dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); margin: 0; font-size: var(--text-sm); }
.origin dt { color: var(--color-muted); }
.origin dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.origin p { font-size: var(--text-sm); color: var(--color-ink-2); }
.disclaimer { margin-top: var(--space-xl); font-size: var(--text-xs); color: var(--color-muted); max-width: 60ch; }

/* families on the home page */
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.family { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink-2); text-decoration: none; color: inherit; }
.family h3 { font-size: var(--text-xl); }
.family p { font-size: var(--text-sm); color: var(--color-ink-2); }
.family:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* three promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.promise h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.promise p { color: var(--color-ink-2); font-size: var(--text-md); }

/* sets */
.sets { display: grid; gap: 0; border-top: var(--rule-head) solid var(--color-ink); }
.set { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); align-items: start; }
.set h3 { font-size: var(--text-xl); }
.set .lim { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-accent); }
.set p { color: var(--color-ink-2); }
.set p + p { margin-top: var(--space-sm); }
.set .act { display: grid; gap: var(--space-sm); justify-items: end; }
.set .price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.giftcards { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }

/* prose for policy pages */
.prose { max-width: 68ch; padding-bottom: var(--section-gap-s); }
.prose h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-sm); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--space-2xs); margin: var(--space-sm) 0; }
.prose .updated { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xl); }
.prose .todo { background: color-mix(in oklab, var(--color-error) 14%, var(--color-card)); color: var(--color-ink); padding: 0 4px; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--color-muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 62ch; }

/* cart drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.drawer[data-open] { display: block; }
.drawer .scrim { position: absolute; inset: 0; background: oklch(20% 0.02 55 / 0.35); }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(28rem, 100%); display: flex; flex-direction: column; background: var(--color-paper);
  box-shadow: var(--shadow-card); padding: calc(var(--space-lg) + env(safe-area-inset-top, 0px)) max(var(--space-lg), env(safe-area-inset-right, 0px)) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)) var(--space-lg); }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-ink); }
.drawer header h2 { font-size: var(--text-xl); }
.x { min-height: 40px; min-width: 40px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; cursor: pointer; color: var(--color-ink); }
.lines { flex: 1; overflow-y: auto; display: grid; align-content: start; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.line b { font-weight: 400; color: var(--color-ink); }
.line small { color: var(--color-muted); font-size: var(--text-sm); }
.line .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.qty { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.qty button { min-width: 28px; min-height: 28px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; cursor: pointer; color: var(--color-ink); }
.rm { background: none; border: 0; color: var(--color-muted); text-decoration: underline; cursor: pointer; font-size: var(--text-sm); justify-self: end; }
.sum { display: grid; gap: var(--space-xs); padding-top: var(--space-md); font-size: var(--text-sm); }
.sum div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.sum .total { font-size: var(--text-lg); color: var(--color-ink); }
.sum .hint { color: var(--color-accent); }
.sum .btn { margin-top: var(--space-sm); background: var(--color-ink); color: var(--color-paper); width: 100%; }
.sum .err { color: var(--color-error); }
.toast { position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .pdp .plate { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .pdp .plate .vial { width: 16%; }
  .families, .promises { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .set { grid-template-columns: minmax(0, 1fr); }
  .set .act { justify-items: start; }
  .giftcards { justify-content: flex-start; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 40rem) {
  .families, .promises { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--space-lg) var(--space-md); }
  .card h3 { font-size: var(--text-md); }
  .notes .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .nav-pill { gap: var(--space-xs); padding-left: var(--space-md); }
}

/* the stage: 3D vial over a soft pool of the scent's colour */
.stage { --stage-tint: oklch(80% 0.06 70); position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; cursor: grab; touch-action: pan-y;
  background: radial-gradient(55% 45% at 50% 62%, color-mix(in oklab, var(--stage-tint) 38%, transparent), transparent 70%),
    var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade));
  box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); transition: background var(--dur-long) var(--ease-out); }
.stage:active { cursor: grabbing; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .stage-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.stage.is-3d .stage-fallback { display: none; }
.stage .stage-note { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: flex; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-xs); color: var(--color-pencil); pointer-events: none; }
.pdp .stage { position: sticky; top: var(--space-3xl); aspect-ratio: 1 / 1; }
.sillage-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: var(--z-raised); mix-blend-mode: multiply; }

/* hero shop: pick a scent, pick a size, add — all above the fold */
.hero-shop .hero-grid { align-items: start; }
.hero-shop .stage { margin-top: var(--space-md); }
.hero-shop h1 { font-size: var(--text-display-s); max-width: 13ch; }
.picker { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pick { min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink-2); cursor: pointer; font-size: var(--text-sm);
  display: inline-flex; align-items: center; gap: var(--space-xs); }
.pick::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 1px oklch(30% 0.02 60 / 0.25); }
.pick[aria-pressed="true"] { border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.hero-card { margin-top: var(--space-lg); padding: var(--space-lg); border-top: var(--rule-head) solid var(--color-ink); display: grid; gap: var(--space-sm); max-width: 32rem; }
.hero-card .who { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.hero-card .who b { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-xl); color: var(--color-ink); }
.hero-card .who span { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.hero-card .say { color: var(--color-ink-2); }
.hero-card .sizes { margin-top: var(--space-2xs); }
.hero-card .more { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .hero-shop .stage { order: -1; max-width: 26rem; width: 100%; margin-inline: auto; aspect-ratio: 1 / 1; }
  .pdp .stage { position: relative; top: 0; aspect-ratio: 1 / 1; max-width: 30rem; width: 100%; margin-inline: auto; }
}

/* the chosen mark: logo A (Didone), outlined vector */
.wordmark { display: inline-flex; color: var(--color-ink); line-height: 0; }
.wordmark .logo { height: 34px; width: auto; display: block; }
.foot .logo { height: 40px; width: auto; color: var(--color-ink); margin-bottom: var(--space-sm); }
@media (max-width: 40rem) { .wordmark .logo { height: 28px; } }

/* SILLAGE direction: dark luxury. Espresso and smoke grounds, cream ink, brass accent. Loaded last, so it re-tints every token. */
:root {
  color-scheme: dark;
  --color-paper: oklch(17% 0.012 55); --color-paper-2: oklch(20% 0.013 55); --color-paper-3: oklch(24% 0.014 55);
  --color-ink: oklch(93% 0.018 80); --color-ink-2: oklch(82% 0.016 78); --color-muted: oklch(66% 0.016 72);
  --color-rule: oklch(34% 0.014 60);
  --color-accent: oklch(74% 0.085 82); --color-accent-ink: oklch(17% 0.012 55); --color-focus: oklch(78% 0.09 82);
  --color-card: oklch(21% 0.013 55); --color-card-edge: oklch(33% 0.02 70); --color-pencil: oklch(62% 0.02 75);
  --card-lit: oklch(24% 0.014 58); --card-shade: oklch(18.5% 0.012 52); --lit: oklch(100% 0 0 / 0.04);
  --shadow-card: 0 0 0 1px oklch(100% 0 0 / 0.05), 0 18px 48px -24px oklch(0% 0 0 / 0.7);
  --air-1: oklch(40% 0.05 70 / 0.35); --air-2: oklch(34% 0.04 30 / 0.3);
  --brass: oklch(74% 0.085 82);
}
body { color: var(--color-ink-2); }
::selection { background: color-mix(in oklab, var(--brass) 35%, transparent); color: var(--color-ink); }
.air::after { mix-blend-mode: screen; opacity: 0.06; }
.notice { background: oklch(13% 0.01 55); color: var(--color-ink-2); border-bottom: 1px solid var(--color-rule); }
.nav-pill { background: oklch(19% 0.012 55 / 0.92); backdrop-filter: blur(8px); }
.cart-btn { background: var(--brass); color: oklch(15% 0.01 55); border-color: var(--brass); }
.cart-btn:hover { background: oklch(80% 0.085 82); }
.btn { border-color: var(--color-ink-2); color: var(--color-ink); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.buy .btn, .sum .btn, .hero-card .btn[data-add] { background: var(--brass) !important; color: oklch(15% 0.01 55) !important; border-color: var(--brass) !important; }
.buy .btn:hover, .sum .btn:hover, .hero-card .btn[data-add]:hover { background: oklch(80% 0.085 82) !important; }
.chip[aria-pressed="true"], .pick[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.pick, .size label, .signup input { background: var(--color-card); }
.size input:checked + label { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.dropcap::first-letter, .set .lim, .sum .hint { color: var(--brass); }
.rows, .sets, .notes, .hero-card { border-top-color: var(--color-rule); }
.vial .label { background: oklch(94% 0.015 80); color: oklch(18% 0.02 55); }
.vial .label b, .vial .label i { color: oklch(48% 0.02 60); }
.sillage-trail { mix-blend-mode: screen; }
.drawer .scrim { background: oklch(0% 0 0 / 0.55); }
.toast { background: var(--brass); color: oklch(15% 0.01 55); }
.prose .todo { background: oklch(40% 0.12 27); color: white; }
/* paper fibre reads as static on dark grounds: drop it on the plates */
.stage { background: radial-gradient(55% 45% at 50% 62%, color-mix(in oklab, var(--stage-tint) 22%, transparent), transparent 70%), linear-gradient(160deg, var(--card-lit), var(--card-shade)); }
.card .plate, .origin, .print, .stock, .strip { background-image: linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); }

/* cinematic band: a real clip, full bleed, words over the dark side of the frame */
.film { position: relative; min-height: min(78vh, 46rem); display: grid; align-items: end; overflow: hidden; padding: 0; background: oklch(10% 0.01 55); }
.film-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0.9; }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(10% 0.01 55 / 0.85) 0%, oklch(10% 0.01 55 / 0.35) 55%, transparent 80%), linear-gradient(0deg, oklch(10% 0.01 55 / 0.7), transparent 40%); }
.film-x { position: relative; z-index: 1; padding-block: var(--section-gap-s); }
.film-eyebrow { font-size: var(--text-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--space-md); }
.film h2 { font-size: var(--text-section); max-width: 16ch; color: oklch(95% 0.015 80); }
.film-credit { position: absolute; right: 0; bottom: var(--space-sm); z-index: 1; text-align: right; font-size: var(--text-xs); color: oklch(70% 0.01 70); }
@media (prefers-reduced-motion: reduce) { .film-v { display: none; } }
@media (max-width: 40rem) { .film { min-height: 30rem; } .film-v { object-position: 75% 50%; } }