/* Hallmark · genre: editorial · macrostructure: Photographic
 * theme: custom (Ashley Marie brand — LOCKED by client, diversification suspended)
 * nav: N12 banner+retract (knobs: fill=tint+ink, dismiss=yes, bar=also-frosts)
 * footer: Ft7 newsletter-first (knobs: layout=split, submit=arrow-link, privacy=yes)
 * hero: home = plate composition on paper (H2 split diptych + H9 centrepiece);
 *        club + making keep H6 photographic fold. The homepage triptych was
 *        dropped: portrait flat-lays sliced into full-height columns showed a
 *        strip of each, and the plate under the headline had to be washed to
 *        near-black for legibility.
 * sections: S2 hanging + S5 bottom-anchored · features: F6 product grid (3/4, 4-up, View →)
 * CTA: C3 typographic link (knobs: underline=solid, hover=slide, arrow=→)
 * enrichment: none invented — real client photography + real hero film
 * motion: scroll-driven view() reveals · sticky photographic scenes · cross-doc View Transitions
 *   (deliberate deviation from motion.md's parallax ban — client asked for cinematic scroll;
 *    contained to ≤6% media drift, fully cut under prefers-reduced-motion)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

@import url("tokens.css");

/* ── fonts ─────────────────────────────────────────────────────────────── */
/* Cormorant Garamond — the single face named in the client's brand style guide,
   used for headings, subheadings, and body. Static instances from @fontsource
   (latin subset, ~93KB for four files); Cormorant Garamond has no variable
   release, so the previous optical-size / SOFT / WONK axis work does not carry
   over and has been removed rather than faked. The face is high-contrast and
   light by nature — it gets its display presence from scale and letterspacing,
   never from weight. 600 exists only for the rare emphasis run. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/CormorantGaramond-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/CormorantGaramond-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/CormorantGaramond-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/CormorantGaramond-400-italic.woff2") format("woff2"); }

/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h3, h4 { line-height: var(--leading-snug); }

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--color-blush); color: var(--color-ink); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { max-width: var(--wrap-text); }
.skip {
  position: absolute; left: var(--space-sm); top: -60px; z-index: var(--z-modal);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-xs) var(--space-sm); font-family: var(--font-label);
  font-size: var(--text-sm); transition: top var(--dur-short) var(--ease-out);
}
.skip:focus { top: var(--space-sm); }

.label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ── buttons & links ───────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn--fill { background: var(--color-ink); color: var(--color-paper); border-radius: 0; }
.btn--fill:hover { background: var(--color-accent); }
.btn--line { border-color: currentColor; color: var(--color-ink); background: transparent; }
.btn--line:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.btn--onfilm { border-color: var(--color-paper-soft); color: var(--color-paper); background: transparent; }
.btn--onfilm:hover { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* C3 · typographic link — solid underline, slide on hover, arrow */
.tlink {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  color: var(--color-accent);
  position: relative;
  white-space: nowrap;
}
.tlink { letter-spacing: 0.18em; font-size: 11px; }
.tlink::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 12px; height: var(--rule-hair);
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-short) var(--ease-out);
}
.tlink:hover::before, .tlink:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.tlink .arw { transition: transform var(--dur-short) var(--ease-out); }
.tlink:hover .arw { transform: translateX(6px); }
.tlink--inv { color: var(--color-paper); }

/* ── N12 · announcement banner + retracting nav ────────────────────────── */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); }

.banner {
  background: var(--color-paper);
  color: var(--color-ink-soft);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--space-sm);
  padding: 9px var(--gutter);
  transition: transform var(--dur-long) var(--ease-in-out);
}
.banner p {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  grid-column: 2;
  text-wrap: balance;
}
.banner__x {
  grid-column: 3;
  justify-self: end;
  background: none; border: 0; cursor: pointer;
  color: var(--color-ink-soft);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  transition: color var(--dur-micro) var(--ease-out);
}
.banner__x:hover { color: var(--color-ink); }
.chrome[data-banner="hidden"] .banner { transform: translateY(-100%); }
.chrome[data-banner="gone"] .banner { display: none; }

.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  color: var(--color-paper);
  transition: background-color var(--dur-long) var(--ease-out),
              color var(--dur-long) var(--ease-out),
              border-color var(--dur-long) var(--ease-out),
              backdrop-filter var(--dur-long) var(--ease-out);
  border-bottom: var(--rule-hair) solid transparent;
}
.chrome[data-frost="on"] .bar {
  background: var(--color-paper-strong);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--color-ink);
  border-bottom-color: var(--color-rule);
}
/* pages that do not open on a photographic fold start frosted */
.chrome[data-mode="solid"] .bar {
  background: var(--color-paper);
  color: var(--color-ink);
  border-bottom-color: var(--color-rule);
}
/* nav links: smaller, wider-tracked, lower contrast until hovered — the
   difference between a shop nav and a boutique nav is mostly restraint here */
.bar__nav a { font-size: 11px; letter-spacing: 0.2em; color: var(--color-ink-soft); }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { color: var(--color-ink); }
.wordmark b { font-weight: 400; letter-spacing: 0.01em; }
.wordmark span { letter-spacing: 0.34em; opacity: .55; }

/* The real circular mark from the style guide, paired with the typed name.
   The mark carries "ASHLEY MARIE" arced inside its wreath; at nav scale that
   reads as texture, not as duplicate text, which is how emblem-plus-wordmark
   lockups normally work. Source is a 598px transparent raster extracted from
   the style guide PDF — INTERIM. Swap for the vector when the client sends it.  */
.wordmark { display: inline-flex; align-items: center; gap: 0.6ch; font-family: var(--font-display); }
.wordmark__mark { width: 38px; height: auto; display: block; flex: none; }
.wordmark--foot { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.wordmark--foot .wordmark__mark { width: 104px; }
/* Set to match the style guide's sub mark: "ASHLEY MARIE", caps, wide-tracked
   Cormorant. Identity comes from the tracking, not from weight. */
.wordmark b { font-weight: 500; font-size: var(--text-xl);
  text-transform: uppercase; letter-spacing: var(--track-caps); }
.wordmark span {
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; opacity: .72;
}
.bar__nav { display: flex; gap: clamp(18px, 2.4vw, 34px); justify-self: center; }
.bar__nav a {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 44px; display: inline-flex; align-items: center;
  white-space: nowrap; position: relative;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 12px; height: var(--rule-hair);
  width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-short) var(--ease-out);
}
.bar__nav a:hover::after, .bar__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.bar__end { justify-self: end; display: flex; align-items: center; gap: var(--space-sm); }
.bar__end .btn { min-height: 40px; font-size: 11px; }
.icon-btn {
  background: none; border: 0; color: inherit; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
}
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.menu-btn { display: none; }

/* mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--color-paper);
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-md);
  transform: translateY(-100%);
  transition: transform var(--dur-long) var(--ease-in-out);
  overflow-y: auto;
}
.sheet[data-open="true"] { transform: none; }
.sheet a {
  font-family: var(--font-display); font-size: var(--text-3xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-sm);
}
.sheet__x { position: absolute; top: var(--space-md); right: var(--gutter); }
.sheet__brand { position: absolute; top: var(--space-lg); left: var(--gutter); border: 0; padding: 0; color: var(--color-ink); }
.sheet__foot {
  margin-top: auto; padding-top: var(--space-lg);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-soft);
}

/* ── section scaffolding ───────────────────────────────────────────────── */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl) var(--space-3xl); }
.section--paper2 { background: var(--color-paper-2); }
.section--ink { background: var(--color-ink); color: var(--color-paper); }
.section--forest { background: var(--color-forest-deep); color: var(--color-paper); }
/* Brand sage and sand as full-strength section grounds — the warm, botanical
   half of the palette, which the first build never used at all.
   Both are mid-tone, so the light-surface text tokens do not survive them:
   ink-soft (.72) measures 3.67 on sage and 4.04 on sand, and the mauve accent
   is 2.98 / 3.47. Rather than ban secondary text inside these bands, each band
   redefines the tokens for its own ground — measured, then set. The accent
   becomes ink: no mauve step clears AA on sage without going almost black, and
   a band already carries enough colour without one. */
.section--sage {
  background: var(--color-sage);
  --color-ink-soft: oklch(28.9% 0.014 145.2 / .82);   /* 4.6:1 on sage */
  --color-ink-meta: oklch(28.9% 0.014 145.2 / .82);
  --color-ink-strong: oklch(28.9% 0.014 145.2 / .92);
  --color-accent: oklch(28.9% 0.014 145.2);
  --color-rule: oklch(28.9% 0.014 145.2 / .22);
  --color-rule-strong: oklch(28.9% 0.014 145.2 / .34);
}
.section--sand {
  background: var(--color-sand);
  --color-ink-soft: oklch(28.9% 0.014 145.2 / .78);   /* 4.6:1 on sand */
  --color-ink-meta: oklch(28.9% 0.014 145.2 / .78);
  --color-ink-strong: oklch(28.9% 0.014 145.2 / .90);
  --color-accent: oklch(28.9% 0.014 145.2);
  --color-rule: oklch(28.9% 0.014 145.2 / .22);
  --color-rule-strong: oklch(28.9% 0.014 145.2 / .34);
}

/* S2 · hanging head — heading floats in negative space, no rule, no eyebrow */
.head { margin-bottom: clamp(48px, 6vw, 88px); display: grid; gap: var(--space-sm); }
.head__row > div { display: grid; gap: var(--space-sm); }
.head h2 { font-size: var(--text-4xl); max-width: 17ch; }
/* The style guide sets subheadings in Cormorant italic. Roman here read as a
   second body paragraph; italic gives the section opener its own voice. */
.head p { color: var(--color-ink-soft); max-width: 52ch; font-size: var(--text-lg);
  font-style: italic; }
.section--ink .head p, .section--forest .head p { color: var(--color-paper-soft); }
.head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }

/* S5 · bottom-anchored — the label sits under its content */
.head--under { margin: clamp(40px, 5vw, 64px) 0 0; justify-items: start; }

/* ── F6 · product card grid ────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(56px, 5vw, 88px) clamp(24px, 2.6vw, 44px);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: clip;
  background: var(--color-blush);
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-film) var(--ease-out);
}
.card__media img + img { opacity: 0; }
.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.045); }
.card:hover .card__media img + img,
.card:focus-within .card__media img + img { opacity: 1; }
/* the badge is a whisper, not a sticker: no fill, no box, just tracked caps
   against the photograph the way a gallery label sits beside a print */
.card__flag {
  position: absolute; top: 14px; left: 14px; z-index: var(--z-base);
  color: var(--color-paper);
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  /* A text-shadow is not a contrast guarantee: measured against the actual
     product photography this label ran as low as 3.4:1 on the pale bars. The
     scrim chip holds AA on any photo. */
  background: var(--color-scrim-hi);
  padding: 4px 8px;
}
.card__flag--out { color: var(--color-paper); opacity: .82; }
.card__body { padding-top: var(--space-md); display: grid; gap: 6px; }
.card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  color: var(--color-ink-soft); font-size: 1rem;
}
.card__price {
  font-family: var(--font-display); font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--color-ink);
}
.card__price s { color: var(--color-ink-meta); margin-right: 0.5ch; }
.card__go {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.card:hover .card__go, .card:focus-within .card__go { opacity: 1; transform: none; }
.card__link { position: absolute; inset: 0; z-index: var(--z-raised); }
.card__link:focus-visible { outline-offset: -3px; }

/* ── sticky photographic scene ─────────────────────────────────────────── */
.scene { position: relative; background: var(--color-ink); color: var(--color-paper); }
.scene__rail { display: grid; grid-template-columns: 1fr 1fr; }
.scene__sticky {
  position: sticky; top: 0; height: 100svh;
  overflow: clip;
}
.scene__sticky img, .scene__sticky video {
  width: 100%; height: 100%; object-fit: cover;
}
.scene__steps { display: grid; }
.scene__step {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-3xl) clamp(28px, 5vw, 88px);
  gap: var(--space-md);
  border-left: var(--rule-hair) solid var(--color-rule-inv);
}
.scene__step .n {
  font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--color-gold); font-variant-numeric: tabular-nums;
}
.scene__step h3 { font-size: var(--text-3xl); max-width: 14ch; }
.scene__step p { color: var(--color-paper-soft); max-width: 46ch; }

/* ── editorial split band ──────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.split--flip { grid-template-columns: 1fr 1.05fr; }
.split--flip .split__media { order: 2; }
.split__media { position: relative; min-height: 560px; overflow: clip; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__copy {
  padding: clamp(48px, 7vw, 112px) clamp(28px, 5vw, 88px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-md);
}
.split__copy h2 { font-size: var(--text-3xl); max-width: 15ch; }
.split__copy p { color: var(--color-ink-soft); max-width: 48ch; }
.section--ink .split__copy p { color: var(--color-paper-soft); }
.sig { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); }

/* ── figure strip ──────────────────────────────────────────────────────── */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.strip figure { margin: 0; position: relative; overflow: clip; aspect-ratio: 4 / 5; }
.strip figure > a { display: block; height: 100%; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-lg) var(--space-sm) var(--space-sm);
  background: linear-gradient(transparent, var(--color-scrim-hi));
  color: var(--color-paper);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── plan cards (club) ─────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.plan {
  border: var(--rule-hair) solid var(--color-rule-inv);
  padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: transparent;
}
.plan--feature { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.plan__tier { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-paper-soft); }
.plan--feature .plan__tier { color: var(--color-accent); }
.plan__price { font-family: var(--font-display); font-size: var(--text-4xl); font-variant-numeric: tabular-nums; line-height: 1; }
.plan__price small { font-family: var(--font-body); font-size: 1rem; opacity: .6; }
.plan ul { display: grid; gap: 10px; flex: 1; margin-block: var(--space-xs); }
.plan li { padding-left: 22px; position: relative; color: var(--color-paper-soft); font-size: 1.05rem; }
.plan--feature li { color: var(--color-ink-soft); }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border: var(--rule-hair) solid var(--color-blush); border-radius: 50%;
}
.plan--feature li::before { border-color: var(--color-mauve); }

/* ── spec table (F3-adjacent, PDP) ─────────────────────────────────────── */
.spec { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.spec th, .spec td { text-align: left; padding: 14px 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.spec th { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-soft); width: 12ch; }
.spec td { font-variant-numeric: tabular-nums; }

/* ── filters ───────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.chip {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 44px; padding: 0 var(--space-sm);
  display: inline-flex; align-items: center; white-space: nowrap;
  background: transparent; color: var(--color-ink-soft);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.chip:hover { color: var(--color-ink); border-color: var(--color-ink-meta); }
.chip[aria-current] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.count { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-ink-meta); font-variant-numeric: tabular-nums; }

/* ── gap block — honest placeholder, never an invented number ──────────── */
/* A note about something the client still owes us. Deliberately not styled as
   an error: on a walkthrough these are the useful part — they tell Ashley
   exactly what to send — and dashed warning tape made a finished page look
   half-built. */
.gap-note {
  border-left: var(--rule-bold) solid var(--color-blush);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  display: grid; gap: 6px;
  max-width: 62ch;
}
.gap-note b {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-soft);
}
.spec__todo { color: var(--color-ink-soft); font-style: italic; }
.gap-note p { color: var(--color-ink-soft); font-size: 1.05rem; }

/* ── Ft7 · newsletter-first footer ─────────────────────────────────────── */
.foot { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl) var(--space-lg); }
.foot__lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2xl); align-items: end; }
.foot__lead h2 { font-size: var(--text-3xl); max-width: 16ch; }
.foot form { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: stretch; }
.foot input {
  flex: 1 1 240px; min-width: 0;
  background: transparent; color: var(--color-paper);
  border: 0; border-bottom: var(--rule-hair) solid var(--color-rule-inv);
  padding: 12px 2px; font-family: var(--font-body); font-size: var(--text-lg);
  transition: border-color var(--dur-short) var(--ease-out);
}
.foot input::placeholder { color: var(--color-paper-soft); }
.foot input:hover { border-bottom-color: var(--color-paper-soft); }
.foot input:focus-visible { outline: 0; border-bottom-color: var(--color-mauve); box-shadow: 0 1px 0 0 var(--color-mauve); }
.foot .privacy { color: var(--color-paper-soft); font-size: 1rem; margin-top: var(--space-xs); }
.foot__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg);
  justify-content: space-between; align-items: center;
  margin-top: var(--space-3xl); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-inv);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-paper-soft);
}
.foot__meta nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__meta a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.foot__meta a:hover { color: var(--color-paper); }

/* ── scroll-driven reveals ─────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(22px); }
.rise.is-in { opacity: 1; transform: none;
  transition: opacity var(--dur-film) var(--ease-out), transform var(--dur-film) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(22px);
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 24%; }
    .rise.is-in { transition: none; }
    @keyframes rise-in { to { opacity: 1; transform: none; } }

    /* contained media drift — the cinematic ask, capped at 6% */
    .split__media img, .strip img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes drift {
      from { transform: translateY(-3%) scale(1.06); }
      to   { transform: translateY(3%)  scale(1.06); }
    }
  }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__nav { display: none; }
  .bar__end .btn--desk { display: none; }
  .menu-btn { display: grid; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media { min-height: 62svh; }
  .scene__rail { grid-template-columns: 1fr; }
  .scene__sticky { position: relative; height: 62svh; }
  .scene__step { min-height: 0; border-left: 0; padding-block: var(--space-xl); }
  .plans { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .foot__lead { grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
  .head__row { gap: var(--space-md); }
}

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .card__media { aspect-ratio: 4 / 5; }
  .foot input { flex-basis: 100%; }
  .foot .btn { width: 100%; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .rise { opacity: 1; transform: none; animation: none; }
  .card:hover .card__media img { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── cross-document view transitions ───────────────────────────────────── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out var(--dur-short) var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in var(--dur-long) var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: scale(0.995); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
  ::view-transition-old(hero-media), ::view-transition-new(hero-media) { animation-duration: var(--dur-film); }
}

/* ── SEO/GEO additions ─────────────────────────────────────────────────── */
/* visually hidden, still read by screen readers and crawlers */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* answer capsule — the self-contained passage an AI engine can lift whole */
.capsule {
  border-left: var(--rule-bold) solid var(--color-mauve);
  padding-left: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}
.capsule strong { color: var(--color-ink); font-weight: 600; }
.capsule--wide {
  border-left: 0; padding-left: 0;
  font-family: var(--font-display); font-size: var(--text-2xl);
  line-height: var(--leading-snug); letter-spacing: 0;
  color: var(--color-ink); max-width: 46ch;
}


/* per-product FAQ inside the buy panel */
.pdp__faq { display: grid; gap: var(--space-sm); }
.pdp__faq h2 { font-size: var(--text-xl); }
.pdp__faq .faq summary { font-size: var(--text-lg); }
.pdp__faq .faq p { font-size: 1.05rem; }

.shop-head .crumbs { margin-bottom: var(--space-sm); }
.shop-head .crumbs span:last-child { color: var(--color-ink-soft); }

/* ── product detail ────────────────────────────────────────────────────── */
.pdp { padding-top: calc(var(--chrome-h, 129px) + var(--space-sm)); }
.pdp__grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; }
.pdp__plates { display: grid; gap: var(--space-2xs); }
.pdp__plate { margin: 0; overflow: clip; background: var(--color-blush); aspect-ratio: 4 / 5; }
.pdp__plate img { width: 100%; height: 100%; object-fit: cover; }
.pdp__panel { padding: var(--space-lg) var(--gutter) var(--space-3xl); }
.pdp__stick { position: sticky; top: calc(var(--chrome-h, 129px) + var(--space-sm));
  display: grid; gap: var(--space-md); max-width: 52ch; }

.crumbs { display: flex; gap: var(--space-xs); align-items: center; font-family: var(--font-label);
  font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-meta); }
.crumbs a { white-space: nowrap; }
.crumbs a:hover { color: var(--color-ink); }

.pdp h1 { font-size: var(--text-4xl); max-width: 15ch; }
.pdp__price { font-family: var(--font-display); font-size: var(--text-2xl); }
.pdp__price s { color: var(--color-ink-meta); margin-right: .6ch; }
.pdp__price small { font-family: var(--font-body); font-size: 1rem; color: var(--color-ink-soft); }
.pdp__out { color: var(--color-accent); font-style: italic; }

.opts { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.opts legend { padding: 0; }
.opts__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.opt { position: relative; display: inline-flex; align-items: baseline; gap: .6ch;
  min-height: 44px; padding: 0 var(--space-sm); cursor: pointer;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink-soft); white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt b { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; }
.opt:hover { border-color: var(--color-ink-meta); color: var(--color-ink); }
.opt:has(input:checked) { border-color: var(--color-ink); color: var(--color-ink); }
.opt:has(input:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.pdp__buy { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.pdp__note:empty { display: none; }
.pdp__copy { display: grid; gap: var(--space-sm); color: var(--color-ink-soft); }
.pdp__copy p { max-width: var(--measure); }

@media (max-width: 60rem) {
  /* lead with one plate, then the buy panel, then the rest of the gallery —
     four stacked photos before a price is a bad phone order */
  .pdp__grid { grid-template-columns: minmax(0, 1fr); }
  .pdp__plates { display: contents; }
  .pdp__plate { order: 3; }
  .pdp__plate:first-child { order: 1; }
  .pdp__panel { order: 2; padding-top: var(--space-lg); }
  .pdp__stick { position: static; max-width: none; }
}
@media (max-width: 40rem) {
  .pdp { padding-top: calc(var(--chrome-h, 129px) + var(--space-xs)); }
  .pdp__buy .btn { width: 100%; }
}


/* ── lede band (home and soap-club) ─────────────────────────────────────── */

.lede-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2xl); align-items: start; }
.lede-band__big { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: 0; }
.lede-band__small { color: var(--color-ink-soft); max-width: 52ch; }

@media (max-width: 60rem) {
  .lede-band { grid-template-columns: 1fr; }
}

/* ── page: how-its-made ──────────────────────────────────────────────────── */
.prose { display: grid; gap: var(--space-md); }
.prose__lede { font-family: var(--font-display); font-size: var(--text-2xl);
  line-height: var(--leading-snug); letter-spacing: 0; }
.prose p { max-width: var(--measure); color: var(--color-ink-soft); }
.prose__lede { color: var(--color-ink); }
#scene-img { transition: opacity var(--dur-film) var(--ease-out); }

/* ── page: shop ──────────────────────────────────────────────────── */
.shop-head { padding: calc(var(--chrome-h, 129px) + var(--space-2xl)) 0 var(--space-lg); background: var(--color-paper-2); }
.shop-head h1 { font-size: var(--text-display-s); max-width: 14ch; }
.shop-head > .wrap > p { color: var(--color-ink-soft); font-size: var(--text-lg); max-width: 46ch; margin-top: var(--space-sm); }
.shop-head .filters { margin-top: var(--space-lg); }
.shop-tools {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; margin-top: var(--space-md);
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule);
}
.sortby { display: inline-flex; align-items: center; gap: var(--space-xs); }
.sortby select {
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--color-ink); border: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  min-height: 44px; padding: 0 var(--space-xs); cursor: pointer;
}
.sortby select:hover { border-bottom-color: var(--color-ink-meta); }
.empty { color: var(--color-ink-soft); padding-block: var(--space-2xl); text-align: center; }

@media (max-width: 40rem) {
  /* chips ride a single scrolling rail rather than stacking six rows deep,
     so products stay above the fold. The page itself never scrolls sideways. */
  .shop-head .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-xs);
  }
  .shop-head .filters::-webkit-scrollbar { display: none; }
  .shop-head .chip { scroll-snap-align: start; flex: none; }
  .shop-head h1 { font-size: var(--text-4xl); }
}

/* ── page: soap-club ──────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); counter-reset: none; }
.steps li { display: grid; gap: var(--space-xs); align-content: start;
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.steps .n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-soft); font-size: 1.05rem; }

.faq { display: grid; max-width: 78ch; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { font-family: var(--font-display); font-size: var(--text-xl); cursor: pointer;
  padding-block: var(--space-sm); min-height: 44px; display: flex; align-items: center;
  list-style: none; gap: var(--space-sm); justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); color: var(--color-accent); flex: none;
  transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--color-ink-soft); max-width: var(--measure); padding-bottom: var(--space-md); }

@media (max-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ── collection guide ──────────────────────────────────────────────────── */
.fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); }
.fam { display: grid; gap: var(--space-xs); align-content: start;
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.fam h3 { font-size: var(--text-xl); }
.fam p { color: var(--color-ink-soft); font-size: 1.05rem; max-width: 46ch; }
.fam__list { font-size: 1rem; }
.fam__list a { border-bottom: var(--rule-hair) solid var(--color-rule); }
.fam__list a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 60rem) { .fams { grid-template-columns: minmax(0, 1fr); } }

/* prose links carry a visible affordance — the FDA citation was invisible */
.faq p a, .privacy a, .pdp__copy a, .prose p a, .capsule a {
  color: var(--color-accent);
  border-bottom: var(--rule-hair) solid currentColor;
}
.faq p a:hover, .privacy a:hover, .pdp__copy a:hover, .prose p a:hover, .capsule a:hover {
  color: var(--color-ink);
}

/* ── attributed quote ──────────────────────────────────────────────────── */
.quote-block { margin: var(--space-lg) 0; max-width: 60ch; }
.quote-block blockquote {
  margin: 0; padding-left: var(--space-md);
  border-left: var(--rule-bold) solid var(--color-mauve);
  font-family: var(--font-display); font-size: var(--text-xl);
  line-height: var(--leading-snug); letter-spacing: 0;
}
.quote-block cite {
  display: block; margin-top: var(--space-sm); padding-left: var(--space-md);
  font-style: normal; font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-meta);
}
.quote-block cite a { color: var(--color-accent); border-bottom: var(--rule-hair) solid currentColor; }
.foot__meta nav + nav { gap: var(--space-md); }

/* ── comparison table ──────────────────────────────────────────────────── */
.compare { margin: var(--space-lg) 0; max-width: 68ch; }
.compare h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.compare .spec th[scope="col"] { color: var(--color-ink); width: auto; }
.compare .spec th[scope="row"] { width: 10ch; }
.compare .privacy { margin-top: var(--space-sm); color: var(--color-ink-soft); }

/* ═══ MOBILE ═══════════════════════════════════════════════════════════════
   Most orders come from phones, so the phone layout is the primary one, not a
   fallback. Everything below is about giving the product more of the screen
   and the chrome less of it. */

/* wide content scrolls inside its own box; the page never scrolls sideways */
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table { min-width: 34rem; }

@media (max-width: 60rem) {
  /* the announcement wraps to two or three lines on a phone and the bar sits
     under it — together that was 154px, 19% of a 375×812 screen, permanently */
  .banner { padding-block: 7px; }
  .banner p { font-size: 11px; letter-spacing: 0.1em; }
  .banner__x { width: 44px; height: 44px; }
  .bar { padding-block: 10px; }
  .wordmark { min-height: 44px; align-items: center; }
  .wordmark b { font-size: 1.15rem; }
}

@media (max-width: 40rem) {
  /* 2-up product grid. A single column meant eight bars filled four screens of
     scroll; two columns halves the distance to the thing people came to buy. */
  .grid, .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-xs);
  }
  .card__media { aspect-ratio: 3 / 4; }
  .card__title { font-size: 1.05rem; line-height: 1.2; }
  .card__meta { font-size: 0.94rem; }
  .card__go { display: none; }          /* hover affordance, meaningless on touch */
  .card__flag { font-size: 9px; padding: 4px 7px; top: 8px; left: 8px; }

  /* the strip and plan cards stay one-up — they are big decisions, not a scan */
  .strip { grid-template-columns: minmax(0, 1fr); }

  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl) var(--space-2xl); }
  .head { margin-bottom: var(--space-lg); }

  .capsule--wide { font-size: var(--text-xl); }
  .quote-block blockquote { font-size: var(--text-lg); padding-left: var(--space-sm); }
  .quote-block cite { padding-left: var(--space-sm); }
  .faq summary { font-size: var(--text-lg); }
  .spec th { width: 9ch; }

  /* footer: two link rows stack rather than fighting for one line */
  .foot__meta { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .foot__meta nav { gap: var(--space-sm) var(--space-md); }
}

@media (max-width: 40rem) {
  /* Get to the product faster. The shop head was eating a whole screen before
     the first card: big display h1, blurb, filter rail, sort row, then a
     paragraph of prose. The prose keeps its place in the DOM for crawlers and
     moves below the grid visually. */
  .shop-head { padding-top: calc(var(--chrome-h, 123px) + var(--space-lg)); padding-bottom: var(--space-md); }
  .shop-head h1 { font-size: var(--text-3xl); }
  .shop-head > .wrap > p { font-size: 1.05rem; margin-top: var(--space-xs); }
  .shop-head .filters { margin-top: var(--space-md); }
  .shop-tools { margin-top: var(--space-sm); }

  .shop-head + .section > .wrap { display: flex; flex-direction: column; }
  .shop-head + .section .capsule--wide { order: 2; margin-top: var(--space-xl); }
  .shop-head + .section #shop-grid { order: 1; }
  .shop-head + .section #shop-empty { order: 1; }

  /* the chip rail scrolls; say so with a fade rather than leaving a cut-off word */
  .shop-head .filters {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  /* collection pages have the same shape */
  .shop-head .crumbs { margin-bottom: var(--space-xs); }
}

@media (max-width: 40rem) {
  /* The lead photo was 469px tall at 375 wide, pushing the title to 683px and
     the buy button to 1028px — two full screens below the fold on a phone.
     Cap the plate so name and price land on the first screen. */
  .pdp__plate:first-child { aspect-ratio: auto; height: 46svh; }
  .pdp__plate:first-child img { height: 100%; object-position: center 45%; }
  .pdp__panel { padding-top: var(--space-md); padding-bottom: var(--space-2xl); }
  .pdp__stick { gap: var(--space-sm); }
  .pdp h1 { font-size: var(--text-3xl); }
  .pdp__plate:not(:first-child) { aspect-ratio: 1 / 1; }

  /* room for the sticky buy bar so it never covers the footer's last line */
  body:has(.pdp) { padding-bottom: 76px; }
}

/* ── sticky buy bar · mobile PDP ────────────────────────────────────────── */
/* Appears only once the real buy button has scrolled away, so there is always
   exactly one add-to-basket on screen and never two. */
.buybar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: none; align-items: center; gap: var(--space-sm);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--color-paper-strong);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(100%);
  transition: transform var(--dur-short) var(--ease-out);
}
.buybar.is-up { transform: none; }
.buybar__text { min-width: 0; display: grid; }
.buybar__name {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar__price { font-size: 0.94rem; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.buybar .btn { margin-left: auto; flex: none; }

@media (max-width: 40rem) { .buybar { display: flex; } }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }

@media (max-width: 40rem) {
  /* the intro prose moves below the grid, so the count line was left stranded
     in ~150px of section padding */
  .shop-head + .section { padding-top: var(--space-md); }
  .shop-head + .section .count { margin-block: 0 var(--space-md) !important; }
  .shop-head + .section .capsule--wide { margin-top: var(--space-2xl); }
}

/* ═══ HERO · plate composition ═════════════════════════════════════════════
   Replaces the full-bleed triptych. Every photograph in the archive is a
   portrait flat-lay; sliced into full-height columns they showed a strip of
   each composition, and the plate carrying the headline had to be washed to
   near-black to make type legible — so two thirds of the image was cropped
   away and the last third was buried. Here the plates stay whole, sit on
   paper, and the type never overlaps them. */
.hero {
  position: relative;
  background: var(--color-paper-2);
  padding: calc(var(--chrome-h, 129px) + var(--space-xl)) 0 var(--space-2xl);
  overflow: clip;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; z-index: 0;
  inset: 6% -14% 0 52%;
  background: radial-gradient(58% 58% at 52% 46%,
              color-mix(in oklab, var(--color-blush) 70%, transparent), transparent 70%);
}
.hero__in {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--space-xl); align-items: center;
}

.hero__copy { display: grid; justify-items: start; gap: var(--space-md); }
.hero__eyebrow {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-ink-soft); display: flex; align-items: center; gap: 16px;
}
.hero__eyebrow::before { content: ""; width: 44px; height: var(--rule-hair); background: var(--color-rule-strong); }

.hero h1 {
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-weight: 400; line-height: 0.99; letter-spacing: -0.008em; max-width: 12ch;
}
.hero h1 .mark { color: var(--color-accent); }
.hero__lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 38ch; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-2xs); }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin: var(--space-md) 0 0; padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule); width: 100%;
}
.hero__facts dt {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-meta); margin-bottom: 4px;
}
.hero__facts dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }

/* ── the plates · confined to their own column, never over the type ────── */
.hero__stage { position: relative; min-height: 66svh; }
.plate {
  position: absolute; margin: 0;
  border-radius: var(--radius-sm); overflow: clip;
  box-shadow: 0 22px 50px -20px oklch(28.9% 0.014 145.2 / .40),
              0 2px 6px -2px oklch(28.9% 0.014 145.2 / .16);
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* laid at slight angles, like prints on a bench — never more than 2.5° */
/* a triangle, not a diagonal: the big plate anchors top-left, the portrait
   overlaps its right edge, the square peeks from behind its bottom-left */
.plate--a { width: 64%; aspect-ratio: 4 / 5;  left: 5%;  top: 0;     rotate: -2.2deg; z-index: 2; }
.plate--b { width: 45%; aspect-ratio: 4 / 5;  right: 0;  top: 30%;   rotate: 1.9deg;  z-index: 3; }
.plate--c { width: 34%; aspect-ratio: 1 / 1;  left: 0;   bottom: 2%; rotate: -1.4deg; z-index: 1; }

.plate figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-lg) var(--space-sm) 10px;
  background: linear-gradient(transparent, var(--color-scrim-hi));
  color: var(--color-paper);
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: var(--space-md); z-index: 1;
  width: var(--rule-hair); height: 46px; background: var(--color-rule); overflow: hidden;
}
.hero__scroll::after {
  content: ""; position: absolute; inset: 0; background: var(--color-accent);
  animation: drip 2.6s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: no-preference) {
  .plate { animation: plate-in var(--dur-film) var(--ease-out) both; }
  .plate--a { animation-delay: 40ms; }
  .plate--b { animation-delay: 150ms; }
  .plate--c { animation-delay: 260ms; }
  @keyframes plate-in {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; }
  }
  @supports (animation-timeline: view()) {
    .plate--a, .plate--b, .plate--c {
      animation: plate-in var(--dur-film) var(--ease-out) both, plate-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover;
    }
    .plate--a { --drift: -4%; }
    .plate--b { --drift: -8%; }
    .plate--c { --drift: -2%; }
    @keyframes plate-drift { to { translate: 0 var(--drift); } }
  }
}

@media (max-width: 60rem) {
  .hero { padding-bottom: var(--space-xl); }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero__stage {
    position: static; min-height: 0;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xs);
  }
  .plate { position: static; rotate: none; width: auto; box-shadow: none; }
  .plate--a { aspect-ratio: 4 / 5; grid-row: span 2; }
  .plate--b { aspect-ratio: 1 / 1; }
  .plate--c { aspect-ratio: 4 / 5; }
  .hero__scroll { display: none; }
  .hero::before { inset: 45% -20% 0 25%; }
}

@media (max-width: 40rem) {
  .hero { padding-top: calc(var(--chrome-h, 123px) + var(--space-md)); }
  /* imagery before the spec row — this is a brand people buy with their eyes,
     and the facts read just as well underneath the plates */
  .hero__in { display: flex; flex-direction: column; gap: var(--space-md); }
  .hero__copy { display: contents; }
  .hero__eyebrow { order: 1; } .hero h1 { order: 2; }
  .hero__lede { order: 3; } .hero__cta { order: 4; }
  .hero__stage { order: 5; margin-top: var(--space-xs); }
  .hero__facts { order: 6; margin-top: var(--space-xs); }
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); max-width: 13ch; }
  .hero__lede { font-size: 1.0625rem; }
  .hero__facts { gap: var(--space-md); }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* club hero: the headline is 42 characters against the homepage's 34, so it
   needs a wider measure before it starts stacking into four short lines */
.hero--club h1 { max-width: 15ch; }
@media (max-width: 40rem) { .hero--club h1 { max-width: none; } }

/* the film plays as a plate rather than a full-bleed backdrop */
.plate--film video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-ink); }
.plate--film video::-webkit-media-controls-panel { background: transparent; }

/* the film plate's caption sits top-left: native controls occupy the bottom
   edge whenever autoplay is refused, and the two were overlapping */
.plate--film figcaption {
  top: 0; bottom: auto;
  padding: 10px var(--space-sm) var(--space-lg);
  background: linear-gradient(var(--color-scrim-hi), transparent);
}

/* per-unit price on a multi-pack option — the saving stated once, plainly,
   instead of a struck price and a percentage badge */
.opt { flex-wrap: wrap; padding-block: 8px; height: auto; min-height: 52px; }
.opt__unit {
  flex-basis: 100%; font-style: normal;
  font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0;
  text-transform: none; color: var(--color-ink-soft);
}
.opt:has(input:checked) .opt__unit { color: var(--color-ink); }

/* ── star ratings ──────────────────────────────────────────────────────── */
/* Drawn as CSS marks rather than an icon font or SVG sprite: five small shapes
   is not worth a request, and it keeps the star colour on the brand token. */
.stars { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.star {
  width: 11px; height: 11px; flex: none;
  background: var(--color-rule-strong);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star--on { background: var(--color-mauve-deep); }
.star--half { background: linear-gradient(90deg, var(--color-mauve-deep) 50%, var(--color-rule-strong) 50%); }
.stars__n {
  margin-left: 7px; font-family: var(--font-label); font-size: 11px;
  letter-spacing: .08em; color: var(--color-ink-soft); font-variant-numeric: tabular-nums;
}
.stars--lg .star { width: 14px; height: 14px; }
.stars--lg .stars__n { font-size: 12px; margin-left: 9px; }
.card .stars { margin-bottom: 2px; }

/* ── PDP reviews ───────────────────────────────────────────────────────── */
.pdp__revs { display: grid; gap: var(--space-md); }
.pdp__revs h2 { font-size: var(--text-xl); }
.revs { display: grid; gap: var(--space-md); }
.rev {
  display: grid; gap: 6px;
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.rev__title { font-family: var(--font-display); font-size: 1.1rem; }
.rev__body { color: var(--color-ink-soft); max-width: var(--measure); }
.rev__who {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-soft);
}

/* ── homepage quotes ───────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 56px); }
.quote { margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-display); font-size: var(--text-xl);
  line-height: var(--leading-snug); letter-spacing: 0;
}
.quote figcaption {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-soft);
}
.quote figcaption a { border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.quote figcaption a:hover { color: var(--color-accent); }
@media (max-width: 60rem) { .quotes { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* ── header gets out of the way ────────────────────────────────────────── */
/* Translated rather than unmounted so it can slide back on the way up, and so
   `--chrome-h` stays measurable for the pages that offset against it. */
.chrome {
  transition: transform var(--dur-long) var(--ease-in-out);
  will-change: transform;
}
/* Translated by the measured header height rather than -100%: the percentage
   resolves against this element's own box and was coming out as zero, leaving
   the header in place. --chrome-h is already measured by site.js for the page
   offsets, so reuse it. */
.chrome.is-away { transform: translateY(calc(var(--chrome-h, 128px) * -1)); }
@media (prefers-reduced-motion: reduce) { .chrome { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Ecosystem Index layer · added 2026-08-12
   Dr Squatch's merchandising architecture on Ashley's locked palette.
   Every colour and font below references a token by name — no inline values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── banner · rotating announcements ───────────────────────────────────── */
.banner { grid-template-columns: auto minmax(0, 1fr) auto 32px; }
.banner__track {
  grid-column: 2;
  position: relative;
  display: grid;
  min-height: 1.2em;
}
.banner__track p {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.banner__track p[data-on] { opacity: 1; transform: none; }
.banner__arrow {
  background: none; border: 0; cursor: pointer;
  color: var(--color-ink-meta);
  width: 28px; height: 28px; display: grid; place-items: center;
  transition: color var(--dur-micro) var(--ease-out);
}
.banner__arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.banner__arrow:hover { color: var(--color-ink); }
.banner__x { grid-column: 4; }

/* ── N11 · mega-menu ───────────────────────────────────────────────────── */
.mega-wrap { display: contents; }
.caret {
  width: 5px; height: 5px; margin-left: 0.5ch;
  border-right: var(--rule-hair) solid currentColor;
  border-bottom: var(--rule-hair) solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}
.bar__nav a[aria-expanded="true"] .caret { transform: translateY(1px) rotate(-135deg); }

.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 30px 60px -34px var(--color-scrim-lo);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.mega-panel[hidden] { display: none; }
.mega-panel.is-open { opacity: 1; transform: none; }
.mega-panel__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr);
  gap: var(--space-lg);
}
.mega-col__head {
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-ink-meta);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.mega-link {
  display: block; padding-block: 9px;
  /* staggered in with the panel — one orchestrated moment, not per-item hover */
  opacity: 0; transform: translateY(6px);
}
.mega-panel.is-open .mega-link,
.mega-panel.is-open .mega-feature {
  animation: mega-in var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--mi, 0) * 26ms);
}
@keyframes mega-in { to { opacity: 1; transform: none; } }
.mega-link b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-lg);
  transition: color var(--dur-micro) var(--ease-out);
}
.mega-link i {
  display: block; font-style: normal;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em;
  color: var(--color-ink-meta);
}
.mega-link:hover b { color: var(--color-accent); }

.mega-feature {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-sm); align-items: center;
  background: var(--color-paper-2);
  padding: var(--space-sm);
  opacity: 0; transform: translateY(6px);
}
.mega-feature__media { overflow: hidden; aspect-ratio: 4 / 5; display: block; }
.mega-feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-film) var(--ease-out);
}
.mega-feature:hover .mega-feature__media img { transform: scale(1.05); }
.mega-feature__body b {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg);
}
.mega-feature__body i {
  display: block; font-style: normal; font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--color-ink-soft); margin-block: 4px 8px;
}
.mega-feature__go {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent);
  white-space: nowrap;   /* gate 49 — a CTA must never wrap to two lines */
}

.nav-scrim {
  position: fixed; inset: 0; z-index: var(--z-sticky);
  background: var(--color-scrim-lo);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.nav-scrim[hidden] { display: none; }
.nav-scrim.is-on { opacity: 1; }

/* ── mobile sheet · accordion groups ───────────────────────────────────── */
.sheet__top { display: flex; align-items: center; justify-content: space-between; }
.sheet__brand { position: static; }
.sheet__x { position: static; }
.sheet__body { display: flex; flex-direction: column; }
.sheet__grp { border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet__grp summary {
  font-family: var(--font-display); font-size: var(--text-2xl);
  padding-block: var(--space-sm);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px;
}
.sheet__grp summary::-webkit-details-marker { display: none; }
.sheet__grp summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: var(--rule-hair) solid currentColor;
  border-bottom: var(--rule-hair) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}
.sheet__grp[open] summary::after { transform: rotate(-135deg); }
.sheet__grp a {
  font-family: var(--font-body); font-size: var(--text-base);
  border: 0; padding-block: 10px; color: var(--color-ink-soft);
  min-height: 44px; display: flex; align-items: center;
}
.sheet__cta { margin-top: var(--space-md); }

/* ── fold · the shop window ───────────────────────────────────────────────
   Cream ground, copy left, a pair of tilted plates right.

   This replaces the full-bleed cinematic film fold. Per the client's art
   direction (Aug 13 2026) the hero should read "a beautiful little soap shop",
   and a dark wash over a moving image was the most modern-feeling gesture on
   the site. The plate cluster is not invented for this — it already existed as
   the mobile fold, and is promoted to carry the hero at every width. The film
   element is gone entirely, which also drops a 3.2 MB request and lets the
   plate be the LCP element. */
.fold {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  background: var(--color-paper);
  color: var(--color-ink);
}
.fold__in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(var(--space-lg), 5vw, var(--space-xl));
  max-width: var(--wrap); width: 100%;
  margin-inline: auto;
  /* clears the fixed chrome, which site.js measures into --chrome-h */
  padding: calc(var(--chrome-h, 124px) + var(--space-lg)) var(--gutter) var(--space-lg);
}
/* The brand's own watercolour element, from the style guide. Native art is
   314px wide, so it is never displayed above 157px — no upscaling. */
.fold__sprig {
  width: clamp(112px, 11vw, 150px); height: auto;
  display: block; margin-bottom: var(--space-sm);
}
/* Matches .eyebrow — italic Cormorant, sentence case. Tracked micro-caps here
   were the first thing on the page and set a corporate tone before the
   headline had a chance to. */
.fold__eyebrow {
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400;
  font-style: italic; letter-spacing: 0.01em; text-transform: none;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
}
.fold__h {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 14ch;
}
/* line-by-line mask reveal — the one orchestrated entrance on the page */
.fold__h .ln { display: block; overflow: hidden; }
.fold__h .ln > span {
  display: block;
  transform: translateY(105%);
  animation: ln-up var(--dur-film) var(--ease-out) forwards;
}
.fold__h .ln:nth-child(1) > span { animation-delay: 90ms; }
.fold__h .ln:nth-child(2) > span { animation-delay: 190ms; }
.fold__h .ln:nth-child(3) > span { animation-delay: 290ms; }
@keyframes ln-up { to { transform: none; } }
/* On cream the brand mauve is 2.8:1 — short of AA-large even at display size.
   The deepened step carries it. */
.fold__h .mark { color: var(--color-mauve-deep); font-style: italic; }
.fold__lede {
  max-width: 42ch;
  margin-top: var(--space-md);
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  opacity: 0; animation: fade-up var(--dur-film) var(--ease-out) 420ms forwards;
}
.fold__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-lg);
  opacity: 0; animation: fade-up var(--dur-film) var(--ease-out) 540ms forwards;
}
@keyframes fade-up { from { transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fold__cta .btn--fill { background: var(--color-ink); color: var(--color-paper); }
.fold__cta .btn--fill:hover { background: var(--color-forest-deep); color: var(--color-paper); }
.btn--ghost {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* The plates carry the fold now. Tilt is small and unequal — a shop shelf, not
   a scrapbook. */
.fold__plates {
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 0;
}
.fold__plates .plate { width: clamp(132px, 22vw, 302px); position: relative; }
.fold__plates .plate img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
}
/* They overlap rather than sit apart — two prints propped against each other on
   a shelf. Side by side with a gap they read as a two-column image grid. */
.fold__plates .plate--a { transform: rotate(-2.5deg); z-index: var(--z-raised); }
.fold__plates .plate--b { transform: rotate(2deg) translateY(-44px); margin-left: -9%; }
.fold__plates figcaption {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-scrim-hi);
  padding: 4px 8px; border-radius: var(--radius-sm);
}

.fold__facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: var(--wrap); width: 100%; margin-inline: auto;
  padding: var(--space-md) var(--gutter) var(--space-xl);
  gap: var(--space-md);
}
.fold__facts dt {
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-ink-soft); margin-bottom: 6px;
}
.fold__facts dd { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }

/* ── rail · tabbed category carousel ───────────────────────────────────── */
.rail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.rail__tabs {
  position: relative;
  display: flex; gap: clamp(14px, 2vw, 30px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail__tabs::-webkit-scrollbar { display: none; }
.rail__tab {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-block: var(--space-xs);
  min-height: 44px; display: inline-flex; align-items: center;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.rail__tab:hover { color: var(--color-ink-soft); }
.rail__tab[aria-selected="true"] { color: var(--color-ink); }
/* one sliding indicator, driven by transform only */
.rail__ink {
  position: absolute; left: 0; bottom: 0; height: var(--rule-bold);
  width: 1px; background: var(--color-accent);
  transform: translateX(var(--ink-x, 0)) scaleX(var(--ink-w, 0));
  transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out);
}
.rail__arrows { display: flex; gap: 2px; flex-shrink: 0; }
.rail__arrow { color: var(--color-ink-soft); }
.rail__arrow:hover { color: var(--color-ink); }
.rail__arrow[disabled] { opacity: .25; cursor: default; }
.rail__note {
  font-size: var(--text-base); color: var(--color-ink-soft);
  max-width: var(--measure); margin-bottom: var(--space-md);
}
.rail__panel[hidden] { display: none; }
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 25%);
  gap: clamp(20px, 3vw, 44px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
  /* the fade is the affordance that says "there is more to the right" */
  mask-image: linear-gradient(to right, #000 0 92%, transparent 100%);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__all { margin-top: var(--space-md); }

/* ── scent-family explorer ─────────────────────────────────────────────── */
.fx__tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}
.fx__tab {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: var(--rule-hair) solid var(--color-rule-strong);
  padding: 0 var(--space-md);
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--color-ink-soft);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.fx__tab:hover { border-color: var(--color-ink); color: var(--color-ink); }
.fx__tab[aria-selected="true"] {
  background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink);
}
.fx__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.fx__panel[hidden] { display: none; }
.fx__panel:not([hidden]) { animation: fx-in var(--dur-long) var(--ease-out); }
@keyframes fx-in { from { opacity: 0; transform: translateY(10px); } }
.fx__media { overflow: hidden; }
.fx__media img { width: 100%; height: auto; display: block; }
.fx__copy h3 {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400;
  margin-bottom: var(--space-sm);
}
.fx__copy p { max-width: var(--measure); color: var(--color-ink-soft); }
.fx__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block: var(--space-md); }
.fx__chips--wide { margin-block: 0; }
.fx__chip {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em;
  border: var(--rule-hair) solid var(--color-rule-strong);
  padding: 0 var(--space-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--color-ink-soft);
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.fx__chip:hover { background: var(--color-ink); color: var(--color-paper); }

/* ── value props ───────────────────────────────────────────────────────── */
.vps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(32px, 4vw, 72px);
}
.vp { border-top: var(--rule-bold) solid var(--color-ink); padding-top: var(--space-md); }
.vp__n {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: var(--track-label); color: var(--color-ink-soft);
  display: block; margin-bottom: var(--space-sm);
}
.vp h3 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
  margin-bottom: var(--space-xs);
}
.vp p { color: var(--color-ink-soft); }

/* ── quiz band ─────────────────────────────────────────────────────────── */
.band { background: var(--color-blush); padding-block: var(--space-2xl); }
.band__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
}
.band__in h2 {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400;
  max-width: 20ch;
}
.band__in p { max-width: 52ch; color: var(--color-ink-soft); margin-top: var(--space-xs); }

/* ── subscribe band ────────────────────────────────────────────────────── */
.sb__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin-block: var(--space-xl);
}
.sb__item { border-top: var(--rule-hair) solid var(--color-rule-inv); padding-top: var(--space-sm); }
.sb__item h3 {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.sb__item p { color: var(--color-paper-soft); font-size: var(--text-base); }

/* ── card additions ────────────────────────────────────────────────────── */
.card__unit {
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.card__quick {
  position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.card:hover .card__quick,
.card:focus-within .card__quick { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { display: none; } }

/* ── Ft1 · mast-headed footer ──────────────────────────────────────────── */
.foot__signup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-lg);
  align-items: end;
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule-inv);
}
.foot__signup h2 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400;
  max-width: 22ch;
}
.foot__mast {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.wordmark--foot b { font-size: var(--text-2xl); }
.wordmark--foot { align-items: flex-start; }
.foot__tag { color: var(--color-paper-soft); margin-top: var(--space-sm); max-width: 40ch; }
.foot__navs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-md);
}
.foot__head {
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-paper-soft);
  margin-bottom: var(--space-xs);
}
.foot__navs nav { display: flex; flex-direction: column; }
.foot__navs a {
  min-height: 44px; display: flex; align-items: center;
  color: var(--color-paper-soft);
  transition: color var(--dur-micro) var(--ease-out);
}
.foot__navs a:hover { color: var(--color-paper); }
.foot__meta { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-inv); }

/* ── scent-family page hero ────────────────────────────────────────────── */
.fam-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  margin-top: var(--space-lg);
}
.fam-hero h1 {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere; min-width: 0;
}
.fam-hero .lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: var(--measure); margin-top: var(--space-sm); }
.fam-hero__media img { width: 100%; height: auto; display: block; }
.fam-hero .hero__facts { margin-top: var(--space-lg); }
.crumbs {
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ink-meta);
  display: flex; gap: 0.7ch; flex-wrap: wrap; align-items: center;
}
.crumbs a { min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--color-ink); }
/* Was 10px sans, uppercase, 0.24em tracked. That treatment is the most
   corporate-reading thing on a page, and at 10px it also failed AA. Cormorant
   italic at 15px sentence case is warmer, is what the guide specifies for
   subheadings, and is large enough to carry the serif. The tracked-sans
   micro-label survives where it is genuinely a UI label (nav, tabs, buttons,
   spec rows) — this is for editorial section openers only. */
.eyebrow {
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400;
  font-style: italic; letter-spacing: 0.01em; text-transform: none;
  color: var(--color-ink-soft); margin-bottom: var(--space-xs);
}

/* ── scent quiz ────────────────────────────────────────────────────────── */
.qz-head { max-width: 44ch; margin-block: var(--space-lg) var(--space-xl); }
.qz-head h1 {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 400;
  letter-spacing: 0; overflow-wrap: anywhere; min-width: 0;
}
.qz-head .lede { font-size: var(--text-lg); color: var(--color-ink-soft); margin-top: var(--space-sm); }
.qz { max-width: 640px; }
.qz__bar { height: var(--rule-bold); background: var(--color-rule); margin-bottom: var(--space-xl); }
.qz__fill {
  display: block; height: 100%; width: 100%; background: var(--color-accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out);
}
.qz__step { border: 0; padding: 0; margin: 0; }
.qz__step[hidden] { display: none; }
.qz__step:not([hidden]) { animation: fx-in var(--dur-long) var(--ease-out); }
.qz__step legend {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400;
  margin-bottom: var(--space-md);
}
.qz__n {
  display: block;
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-ink-meta); margin-bottom: var(--space-xs);
}
.qz__opts { display: flex; flex-direction: column; gap: var(--space-2xs); }
.qz__opt {
  display: flex; align-items: center; gap: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-strong);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.qz__opt:hover { border-color: var(--color-ink); }
.qz__opt input { accent-color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }
.qz__opt:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper-2); }
.qz__opt:has(input:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }
.qz__nav { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.qz__out[hidden] { display: none; }
.qz__out { margin-top: var(--space-lg); }
.qz__result[hidden] { display: none; }
.qz__result { animation: fx-in var(--dur-long) var(--ease-out); }
.qz__result h3 {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400;
  margin-bottom: var(--space-sm);
}
.qz__result p { max-width: var(--measure); color: var(--color-ink-soft); margin-bottom: var(--space-md); }
.qz__eyebrow {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-accent);
}
#qz-again { background: none; border: 0; cursor: pointer; margin-top: var(--space-md); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .mega-panel { display: none !important; }
  .fold__in { grid-template-columns: minmax(0, 1fr); }
  .fx__panel { grid-template-columns: minmax(0, 1fr); }
  .foot__mast { grid-template-columns: minmax(0, 1fr); }
  .fam-hero { grid-template-columns: minmax(0, 1fr); }
  .rail__track { grid-auto-columns: minmax(200px, 44%); }
}
@media (max-width: 40rem) {
  /* The fold is cream at every width now, so the colour reversions that used to
     live here are the default. Only the layout differs on a phone. */
  .fold__in {
    /* the chrome is fixed; without this the plate cluster slides under it */
    padding-top: calc(var(--chrome-h, 124px) + var(--space-md));
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .fold__cta { flex-direction: column; align-items: stretch; }
  .fold__h { max-width: none; }
  .fold__plates { order: -1; justify-content: flex-start; }
  .fold__plates .plate { width: 42vw; }
  .fold__sprig { width: 118px; }
  .fold__facts {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top-color: var(--color-rule);
    padding-bottom: var(--space-lg);
  }
  .fold__facts dt { color: var(--color-ink-soft); }
  .fold__facts dd { color: var(--color-ink); }
  .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); backdrop-filter: none; }
  .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }
  .rail__track { grid-auto-columns: minmax(0, 72%); mask-image: linear-gradient(to right, #000 0 88%, transparent 100%); }
  .rail__arrows { display: none; }
  .band__in { flex-direction: column; align-items: flex-start; }
  /* Back + Next side by side overflow a 320px screen once the label grows to
     "See my scent" — stack them and let each take the full width. */
  .qz__nav { flex-direction: column-reverse; }
  .qz__nav .btn { width: 100%; }
  .band .btn, .qz-head .btn { width: 100%; }
  .banner__arrow { display: none; }
  .banner { grid-template-columns: minmax(0, 1fr) 32px; }
  .banner__track { grid-column: 1; }
  .banner__x { grid-column: 2; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fold__h .ln > span,
  .fold__lede,
  .fold__cta,
  .mega-panel.is-open .mega-link,
  .mega-panel.is-open .mega-feature {
    animation: rm-in 150ms linear forwards;
  }
  @keyframes rm-in { to { opacity: 1; transform: none; } }
  .fx__panel:not([hidden]),
  .qz__step:not([hidden]),
  .qz__result { animation: rm-in 150ms linear forwards; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PDP pass · buy-mode toggle, bundle builder, inline review wall
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── buy-mode toggle ───────────────────────────────────────────────────── */
.buymode { margin-block: var(--space-md); }
.buymode__tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border: var(--rule-hair) solid var(--color-rule-strong);
  margin-bottom: var(--space-md);
}
.buymode__tab {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  min-height: 46px; color: var(--color-ink-soft);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.buymode__tab + .buymode__tab { border-left: var(--rule-hair) solid var(--color-rule-strong); }
.buymode__tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.buymode__panel[hidden] { display: none; }
.buymode__lede { color: var(--color-ink-soft); margin-bottom: var(--space-sm); }
.buymode__plans { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.buymode__plans li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6ch;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xs);
}
.buymode__plans b { font-family: var(--font-display); font-size: var(--text-lg); }
.buymode__plans a {
  margin-left: auto; color: var(--color-accent);
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* stars in the buy panel jump to the review wall */
.pdp__jump { display: inline-flex; }
.pdp__jump:hover .stars__n { color: var(--color-accent); }

/* ── bundle builder ────────────────────────────────────────────────────── */
.bb__sizes { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.bb__size {
  background: none; cursor: pointer;
  border: var(--rule-hair) solid var(--color-rule-strong);
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  min-height: 46px; padding: 0 var(--space-md);
  display: inline-flex; align-items: center; gap: 0.7ch;
  color: var(--color-ink-soft);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.bb__size i { font-style: normal; color: var(--color-accent); }
.bb__size:hover { border-color: var(--color-ink); color: var(--color-ink); }
.bb__size[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.bb__size[aria-pressed="true"] i { color: var(--color-blush); }

.bb__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.bb__chip {
  display: flex; align-items: center; gap: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  padding: var(--space-xs) var(--space-sm);
  min-height: 48px; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}
.bb__chip input { accent-color: var(--color-accent); width: 17px; height: 17px; flex-shrink: 0; }
.bb__chip span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bb__chip i { font-style: normal; color: var(--color-ink-meta); font-size: var(--text-sm); }
.bb__chip:hover { border-color: var(--color-ink); }
.bb__chip:has(input:checked) { border-color: var(--color-ink); background: var(--color-blush); }
.bb__chip:has(input:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }
/* once the pack is full the rest dim rather than vanish — the grid must not reflow */
.bb__chip.is-off { opacity: .38; }
.bb__chip.is-off input { cursor: not-allowed; }

.bb__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  border-top: var(--rule-bold) solid var(--color-ink);
  padding-top: var(--space-md);
}
.bb__count { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ink-soft); }
.bb__count b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.bb__total { margin-left: auto; display: flex; align-items: baseline; gap: 0.8ch; }
.bb__total b { font-family: var(--font-display); font-size: var(--text-2xl); }
.bb__unit { font-family: var(--font-label); font-size: 11px; color: var(--color-ink-soft); }

/* ── inline review wall ────────────────────────────────────────────────── */
.revwall {
  display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.revwall__sum { position: sticky; top: calc(var(--chrome-h, 124px) + var(--space-md)); }
.revwall__n {
  font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 400;
  line-height: 1; margin-bottom: var(--space-xs);
}
.revwall__count { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ink-soft); margin-block: var(--space-sm) var(--space-xs); }
.revwall__note { color: var(--color-ink-soft); max-width: 34ch; margin-bottom: var(--space-md); }
.revs--wall { display: grid; gap: var(--space-md); }
.revs--wall .rev {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-md);
}
.revs--wall .rev__title { font-family: var(--font-display); font-size: var(--text-lg); margin-block: var(--space-2xs); }
.revs--wall .rev__body { color: var(--color-ink-strong); }
.revs--wall .rev__who {
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ink-meta); margin-top: var(--space-xs);
  display: flex; gap: 0.8ch; align-items: center;
}
.revs--wall .rev__who span {
  border: var(--rule-hair) solid var(--color-rule-strong);
  padding: 2px 7px; font-size: 9px; color: var(--color-ink-soft);
}

@media (max-width: 60rem) {
  .revwall { grid-template-columns: minmax(0, 1fr); }
  .revwall__sum { position: static; }
}
@media (max-width: 40rem) {
  .bb__sizes { flex-direction: column; }
  .bb__size { width: 100%; justify-content: center; }
  .bb__bar { flex-direction: column; align-items: stretch; }
  .bb__total { margin-left: 0; }
  .bb__bar .btn { width: 100%; }
  .buymode__plans li { flex-direction: column; align-items: flex-start; gap: 0; }
  .buymode__plans a { margin-left: 0; }
}

/* ── product films · built from Ashley's own stills by design/video.py ───── */
.pdp__plate--film, .fam-hero__media--film { overflow: hidden; }
.pfilm {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--color-paper-2);
}