/* ---------------------------------------------------------------------------
 * Birth Blooms — site styles. Built on tokens.css; every value comes from the
 * scale (P-19). Structure first, surface second (P-07).
 *
 * The voice is a museum herbarium: cotton-rag paper, mounted specimens, accession
 * marks, gold rules, and deep ink-green bands. The page is allowed to be romantic
 * about what it is instead of apologising for what it isn't.
 * ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.021em;
  font-variation-settings: "opsz" 110, "SOFT" 28, "WONK" 1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); letter-spacing: -0.012em; font-variation-settings: "opsz" 40, "SOFT" 22, "WONK" 0; }
/* The italic is the romance. It is a real optical italic, not a slant. */
em, .say em, h1 em, h2 em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1; }
p  { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Accession marks: the letterspaced caps that carry the archive voice. Used for
   eyebrows, plate numbers, cabinet headers and the utility bar. */
.accession {
  font-size: var(--t--2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t--2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--gold);
  margin: 0 0 var(--s-5);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .7;
}

.lede { font-size: var(--t-1); line-height: 1.5; color: var(--ink-soft); }
.fine { font-size: var(--t--1); color: var(--ink-faint); line-height: 1.5; }

/* ------------------------------------------------------------ action pyramid */
/* One primary, solid, in the oxblood. The accent appears nowhere else (P-38, P-20). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-3) var(--s-6);
  font-family: var(--body); font-size: var(--t--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--lift-1); }
.btn--primary:hover { background: var(--accent-deep); box-shadow: var(--lift-2); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-firm); }
.btn--secondary:hover { border-color: var(--ink); background: color-mix(in srgb, var(--paper-deep) 70%, transparent); }
.btn--ghost { background: transparent; color: var(--on-forest); border-color: color-mix(in srgb, var(--on-forest) 34%, transparent); }
.btn--ghost:hover { border-color: var(--on-forest); background: color-mix(in srgb, var(--on-forest) 10%, transparent); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn--wide { width: 100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }
.btn__icon { display: inline-flex; width: 14px; height: 14px; flex: none; overflow: hidden; }
.btn__icon svg { width: 100%; height: 100%; transition: transform .4s var(--ease-out); }
.btn:hover .btn__icon svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn__icon svg { transition: none; } }

/* -------------------------------------------------------------- utility bar */
.utility {
  background: var(--forest-deep); color: var(--on-forest);
  font-size: var(--t--2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}
.utility .wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5);
  min-height: 34px; flex-wrap: wrap; text-align: center;
}
.utility span { display: inline-flex; align-items: center; gap: var(--s-3); opacity: .82; }
.utility span + span::before { content: "·"; opacity: .5; }
/* One claim on small screens. Two wrapped onto a second line and orphaned the
   separator dot at the start of it. */
@media (max-width: 700px) { .utility span:nth-child(n+2) { display: none; } }

/* ------------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-head[data-scrolled] { border-bottom-color: var(--border); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 74px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; min-height: 44px; }
.wordmark svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.wordmark b {
  display: block;
  font-family: var(--display); font-weight: 400; font-size: var(--t-1);
  letter-spacing: -0.004em; font-variation-settings: "opsz" 34, "SOFT" 30, "WONK" 1; line-height: 1.05;
}
.wordmark small {
  display: block; font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-top: 3px;
}
.site-nav { display: none; gap: var(--s-5); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
@media (min-width: 1000px) { .site-nav { display: flex; } }
.site-head .btn { min-height: 44px; padding-inline: var(--s-5); white-space: nowrap; }
@media (max-width: 560px) {
  .site-head .wrap { min-height: 64px; gap: var(--s-3); }
  .site-head .btn { padding-inline: var(--s-3); font-size: 0.6875rem; letter-spacing: 0.06em; }
  .site-head .btn .btn__icon { display: none; }
  .cta-price { display: none; }
  .wordmark b { font-size: var(--t-0); }
  .wordmark small { display: none; }
}

/* --------------------------------------------------------------------- hero */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero__grid { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s-9); align-items: center; }
}
/* Below the two-column breakpoint the grid stacks, and the copy column is tall
   enough (headline + second headline + lede + two buttons + note) that the
   mounted specimen landed a whole screen below the fold: measured 449px past it
   on a 375x667 phone, 220px on a 390x844, and half-cut on iPad portrait. The
   product was invisible on the first screen of every phone. `display: contents`
   dissolves the copy wrapper on narrow viewports only, so the headline and the
   specimen become siblings in the same grid and the print sits directly under
   the headline where it is the first thing seen. Desktop is untouched: the
   wrapper is a normal grid item again at 940px, so the two-column hero is
   exactly as it was. Row gap goes to zero here because each block already
   carries its own margin-top; without that they would be double-spaced. */
@media (max-width: 939px) {
  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero__grid { row-gap: 0; }
  .hero__text { display: contents; }
  .hero #hero-headline { order: 1; }
  .hero .specimen { order: 2; margin-top: var(--s-7); }
  .hero .lede { order: 3; }
  .hero__actions { order: 4; }
  .hero__note { order: 5; }
}
.hero h1 { max-width: 12ch; }
.hero h1 .say { display: block; }
/* Sized independently of the h1: as `em` it tracked the clamped display size and
   fell BELOW the lede beneath it on mobile, inverting the hierarchy. */
.hero h1 .say--2 {
  font-size: clamp(1.3125rem, 3.4vw, 1.75rem); color: var(--ink-soft);
  margin-top: .7em; letter-spacing: -0.004em; max-width: 30ch; line-height: 1.35;
  font-variation-settings: "opsz" 40, "SOFT" 22, "WONK" 0;
}
.hero .lede { margin-top: var(--s-6); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero__note { margin-top: var(--s-5); display: flex; align-items: flex-start; gap: var(--s-3); }
.hero__note svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--gold); }

/* ------------------------------------------------------- the specimen mount */
/* A print is not a JPEG on a page. It is a sheet, mounted, catalogued, and lit
   from above. The mount is what makes the file feel like an object (P-13). */
.specimen {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border-firm);
  box-shadow: var(--lift-3);
  padding: var(--s-5);
}
.specimen::after {
  /* the gold hairline inside the mount — an archival frame line */
  content: ""; position: absolute; inset: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  pointer-events: none;
}
.specimen__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-3); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.specimen__well {
  background: var(--paper-sink);
  padding: var(--s-6) var(--s-5);
  display: flex; align-items: center; justify-content: center;
}
.specimen__well img { width: 100%; max-width: 300px; }
.specimen__plate {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.specimen__plate h3 { font-size: var(--t-2); margin: 0; }
.specimen__plate p { margin: 4px 0 0; font-size: var(--t--1); color: var(--ink-faint); font-style: italic; }
.seal {
  position: absolute; right: calc(var(--s-5) * -1); bottom: var(--s-7);
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.35; box-shadow: var(--lift-2);
}
@media (max-width: 560px) {
  .specimen { padding: var(--s-4); }
  .seal {
    width: 58px; height: 58px; font-size: 0.4375rem;
    right: -14px; bottom: -18px;
  }
}

/* ---------------------------------------------------------------- wall label */
/* One line stating what the object is, the way a museum label does. Replaces a
   four-card grid with decorative 01–04 numbering: four parallel facts are not a
   sequence, and cards were the lazy container for them. */
.wall-label { border-block: 1px solid var(--border); background: var(--paper-deep); }
.wall-label p {
  margin: 0; max-width: none; text-align: center;
  padding-block: var(--s-5);
  font-size: var(--t--1); color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.wall-label b {
  font-family: var(--display); font-weight: 400; font-size: var(--t-1);
  color: var(--ink); font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 30, "WONK" 1;
}
.wall-label span { color: var(--gold); padding-inline: var(--s-2); }
@media (max-width: 700px) { .wall-label p { line-height: 2; padding-inline: var(--s-2); } }

/* ------------------------------------------------------------ the marquee */
.marquee { overflow: hidden; padding-block: var(--s-8); background: var(--paper-deep); border-block: 1px solid var(--border); }
.marquee__mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: bb-marquee var(--marquee-duration) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; gap: var(--s-6); flex: none; padding-right: var(--s-6); }
.marquee__set img {
  width: 244px; height: auto; flex: none;
  background: var(--paper); padding: var(--s-3);
  border: 1px solid var(--border-firm); box-shadow: var(--lift-1);
}
@media (max-width: 700px) { .marquee__set img { width: 172px; } }
@keyframes bb-marquee { to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__mask { -webkit-mask-image: none; mask-image: none; }
  .marquee { overflow-x: auto; }
}

/* --------------------------------------------------------- the cabinet grid */
/* #twelve-list is filled by quiz.js with .bloom-row items. It is styled here as
   a specimen cabinet: twelve drawers, each with its mark, month and meaning. */
.cabinet { border: 1px solid var(--border-firm); background: var(--paper); box-shadow: var(--lift-2); }
.cabinet__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--forest); color: var(--on-forest);
}
.cabinet__head .accession { color: var(--on-forest-faint); }
.bloom-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .bloom-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .bloom-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.bloom-row {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-3);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.bloom-row:hover { background: var(--paper-deep); }
.bloom-mark {
  width: 52px; height: 52px; background-color: var(--ink-faint);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .8; transition: opacity .3s var(--ease), transform .45s var(--ease-out), background-color .3s var(--ease);
}
.bloom-row:hover .bloom-mark { opacity: 1; background-color: var(--accent); transform: scale(1.09) translateY(-2px); }
.bloom-month {
  font-family: var(--display); font-weight: 400; font-size: var(--t-1);
  font-variation-settings: "opsz" 30, "SOFT" 24, "WONK" 1;
}
.bloom-what { font-size: var(--t--2); color: var(--ink-faint); line-height: 1.45; }
.bloom-what strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--t--1); letter-spacing: 0.02em; }
.bloom-what em { display: block; font-style: italic; opacity: .8; margin-top: 2px; }

/* ------------------------------------------------------- the specimen panel */
/* Houses the quiz. Left: the catalogue copy. Right: the picker and the form. */
.panel { border: 1px solid var(--border-firm); background: var(--paper); box-shadow: var(--lift-2); overflow: hidden; }
.panel__grid { display: grid; }
@media (min-width: 900px) { .panel__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.panel__aside {
  padding: var(--s-8) var(--s-6);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .panel__aside { border-bottom: 0; border-right: 1px solid var(--border); } }
.panel__aside h2 { font-size: var(--t-3); margin-bottom: var(--s-4); }
.panel__body { padding: var(--s-8) var(--s-6); }
@media (max-width: 560px) { .panel__aside, .panel__body { padding: var(--s-6) var(--s-5); } }
.panel__art { margin-top: var(--s-6); background: var(--paper-sink); padding: var(--s-5); }
.panel__art img { width: 100%; max-width: 220px; margin-inline: auto; }

/* --------------------------------------------------------------------- quiz */
.quiz { margin: 0; }
.quiz h2 { font-size: var(--t-2); margin-bottom: var(--s-2); }
.quiz__sub { margin-top: 0; color: var(--ink-faint); font-size: var(--t--1); }
.months {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  margin-top: var(--s-5); list-style: none; padding: 0;
}
@media (min-width: 560px) { .months { grid-template-columns: repeat(6, 1fr); } }
.month-btn {
  width: 100%; min-height: 52px; padding: var(--s-2) var(--s-1);
  font-family: var(--body); font-size: var(--t--2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--border-firm); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease),
                               color .18s var(--ease), transform .18s var(--ease);
}
.month-btn:hover { border-color: var(--ink-faint); color: var(--ink); transform: translateY(-1px); }
.month-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--lift-1); transform: none;
}
@media (prefers-reduced-motion: reduce) { .month-btn { transition: none; } .month-btn:hover { transform: none; } }

.quiz__step2[hidden], .quiz__done[hidden] { display: none; }
.quiz__step2 { margin-top: var(--s-6); border-top: 1px solid var(--border); padding-top: var(--s-6); }
#reveal {
  font-family: var(--display); font-size: var(--t-1); color: var(--ink);
  font-variation-settings: "opsz" 34, "SOFT" 24, "WONK" 1;
  padding-top: var(--s-4); border-top: 1px solid var(--gold);
}
.field { margin-bottom: var(--s-4); }
.field label {
  display: block; font-size: var(--t--2); font-weight: 700; margin-bottom: var(--s-2);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft);
}
.field .hint { font-weight: 500; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: none; }
.field input {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  font-family: var(--body); font-size: var(--t-0); color: var(--ink);
  background: var(--paper-deep); border: 1px solid var(--border-firm); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field input:focus { background: var(--paper); border-color: var(--ink-faint); }
.field input::placeholder { color: var(--ink-faint); }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.risk { margin-top: var(--s-4); font-size: var(--t--1); color: var(--ink-faint); }
/* The launch-price note. Deliberately quiet: the deadline is real and the server
   enforces it, so it does not need to shout. Shouting is what fake urgency looks like. */
.launch { margin-top: var(--s-3); font-size: var(--t--1); color: var(--ink-soft); font-weight: 600; }
.quiz__done h3 { margin-bottom: var(--s-3); }
.quiz__done ul { margin: var(--s-5) 0 0; padding-left: 1.1em; color: var(--ink-soft); font-size: var(--t--1); }
.quiz__done li { margin-bottom: var(--s-2); }
.err { color: var(--accent); font-size: var(--t--1); margin-top: var(--s-3); font-weight: 600; }

/* ----------------------------------------------------------------- features */
.feature { display: grid; gap: var(--s-7); align-items: center; padding-block: var(--s-9); }
.feature + .feature { border-top: 1px solid var(--border); }
@media (min-width: 880px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); }
  .feature--flip .feature__media { order: -1; }
}
.feature h3 { margin-bottom: var(--s-5); }
.feature__media { background: var(--paper-deep); padding: var(--s-7); border: 1px solid var(--border); }
.feature__media img { box-shadow: var(--lift-2); margin-inline: auto; }
.feature__media--plain { background: transparent; border: 0; padding: 0; }
.feature__media--plain img { box-shadow: none; }

/* --------------------------------------------------------------- deep bands */
/* The two near-neutral deep grounds. They read as ink-green only because of the
   cream around them, which is why they stay under the audit's chroma threshold. */
.band { background: var(--forest); color: var(--on-forest); padding-block: var(--s-10); }
.band h2, .band h3 { color: var(--on-forest); }
.band .eyebrow { color: var(--gold-soft); }
.band .lede, .band p { color: var(--on-forest-soft); }
.band .accession { color: var(--on-forest-faint); }
.band .rule { background: #3A3E3B; }
.band em { color: var(--gold-soft); }

/* The showcase: the drawing at full scale, on the deep ground it was made for. */
.showcase { background: var(--forest); color: var(--on-forest); padding-block: var(--s-10); }
.showcase__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.showcase__art { width: min(560px, 78vw); height: auto; }
.showcase__frame {
  padding: var(--s-6);
  border: 1px solid color-mix(in srgb, var(--gold-soft) 42%, transparent);
  background: color-mix(in srgb, #000 16%, transparent);
}
.showcase__copy { max-width: 56ch; margin-top: var(--s-7); }
.showcase__copy h3 { margin-bottom: var(--s-4); color: var(--on-forest); }
.showcase__copy p { margin-inline: auto; color: var(--on-forest-soft); }
.showcase .eyebrow { color: var(--gold-soft); }

/* -------------------------------------------------------- scroll-open frame */
/* The mount opens from 64% to full width as it enters view. The wrapper carries
   the FINAL aspect ratio so the mount's height never changes while the width
   animates: without it the image height tracks the width, and every frame of the
   animation reflows the whole page below. Width is still a layout property, but
   it is now contained to one fixed-size box rather than the document. */
.expand {
  display: flex; justify-content: center;
  aspect-ratio: 1600 / 1220;
  contain: layout;
}
.expand__frame {
  position: relative; width: 64%; height: 100%; overflow: hidden;
  background: var(--paper); padding: var(--s-5);
  border: 1px solid var(--border-firm); box-shadow: var(--lift-3);
  transition: width .95s var(--ease-out);
}
.expand__frame[data-expanded] { width: 100%; }
/* Cover, so the plate fills the fixed-height mount and crops at the sides while
   it opens. At the end state the box and the plate share an aspect ratio, so
   nothing is cropped once it has settled. */
.expand__frame img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; left: var(--s-7); bottom: var(--s-7);
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--r-sm);
  background: var(--forest); color: var(--on-forest);
  font-size: var(--t--2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.expand__frame[data-expanded] .tag { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .expand__frame { width: 100%; transition: none; }
  .tag { opacity: 1; transform: none; transition: none; }
}
.tag--static { opacity: 1; transform: none; }
.shot { position: relative; margin: 0; }
.shot .tag--static { position: absolute; left: var(--s-4); bottom: var(--s-4); }

/* ------------------------------------------------------------------ the buy */
.buy { background: var(--paper-deep); border-block: 1px solid var(--border); }
.buy__card {
  background: var(--paper); border: 1px solid var(--border-firm);
  padding: var(--s-9) var(--s-8); box-shadow: var(--lift-3);
  position: relative;
}
.buy__card::after {
  content: ""; position: absolute; inset: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); pointer-events: none;
}
@media (max-width: 700px) { .buy__card { padding: var(--s-7) var(--s-5); } }
.buy__grid { display: grid; gap: var(--s-8); position: relative; z-index: 1; }
@media (min-width: 880px) { .buy__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; } }
.price {
  display: inline-block; font-family: var(--display); font-weight: 300;
  font-size: var(--t-5); line-height: .92; margin-top: var(--s-3);
  font-variation-settings: "opsz" 140, "SOFT" 30, "WONK" 1;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.manifest { list-style: none; margin: 0; padding: 0; }
.manifest li {
  display: grid; grid-template-columns: 2.6em 1fr; gap: var(--s-4);
  padding-block: var(--s-4); border-top: 1px solid var(--border); font-size: var(--t--1);
}
.manifest li:first-child { border-top: 0; }
.manifest li b {
  font-family: var(--display); font-weight: 400; font-size: var(--t-1);
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.manifest li span { color: var(--ink-soft); }

/* -------------------------------------------------------------- paper chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: var(--s-3) var(--s-5); min-width: 96px;
  border: 1px solid var(--border-firm); background: var(--paper);
  font-size: var(--t--2); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.chip b {
  font-family: var(--display); font-size: var(--t-1); color: var(--ink);
  letter-spacing: 0; text-transform: none; font-weight: 400; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the note card */
.card-note {
  background: var(--paper-deep); border: 1px solid var(--border-firm);
  padding: var(--s-6); box-shadow: var(--lift-1);
}
.card-note h3 { font-size: var(--t-1); margin-bottom: var(--s-4); }
.card-note dl { margin: 0; display: grid; gap: var(--s-3); }
.card-note dt {
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.card-note dd { margin: 2px 0 0; font-size: var(--t--1); color: var(--ink-soft); }
.card-note dd + dt { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------------- faq */
.faq__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: var(--s-10); } }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.faq details {
  border-bottom: 1px solid var(--border);
  background: transparent; padding: 0;
  transition: border-color .3s var(--ease);
}
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; min-height: 44px;
  font-weight: 600; font-size: var(--t-0); cursor: pointer; list-style: none;
  transition: color .2s var(--ease);
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker, .faq summary::marker { display: none; content: ""; }
.faq summary::after { content: none; }
.faq .plus { position: relative; width: 14px; height: 14px; flex: none; color: var(--gold); }
.faq .plus::before, .faq .plus::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .38s var(--ease-out), opacity .38s var(--ease-out);
}
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); opacity: 0; }
.faq details p { margin: 0; padding: 0 var(--s-8) var(--s-5) 0; color: var(--ink-soft); }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
  .faq .plus::before, .faq .plus::after { transition: none; }
}

/* ------------------------------------------------------------- closing band */
/* Fixed values, not the accent token. In dark mode the accent inverts to a light
   rose so buttons stay legible — correct for a 52px pill, wrong for a full-bleed
   band, which then reads as a different brand. The band stays oxblood in both. */
.closer { background: #762E3C; color: #FBF8F3; padding-block: var(--s-10); text-align: center; }
.closer h2 { color: #FBF8F3; max-width: 18ch; margin-inline: auto; }
.closer p { color: #E3D4D2; margin-inline: auto; margin-top: var(--s-5); max-width: 48ch; }
.closer .eyebrow { color: #E3D4D2; }
.closer .btn { margin-top: var(--s-7); }
.closer .btn--light { background: #FBF8F3; color: #762E3C; }
.closer .btn--light:hover { background: #FFFFFF; }

/* ------------------------------------------------------------------- footer */
.site-foot { background: var(--forest-deep); color: var(--on-forest); padding-block: var(--s-9) var(--s-7); }
.site-foot .wordmark svg { color: var(--gold-soft); }
.site-foot .wordmark b { color: var(--on-forest); }
.site-foot .wordmark small { color: var(--on-forest-faint); }
.foot-grid { display: grid; gap: var(--s-7); }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); } }
.foot-col h3 {
  font-family: var(--body); font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-forest-faint); margin-bottom: var(--s-4);
}
.foot-col nav { display: flex; flex-direction: column; }
.site-foot a {
  color: var(--on-forest-soft);
  text-decoration: none; font-size: var(--t--1);
}
.site-foot a:hover { color: var(--on-forest); text-decoration: underline; }
/* The legacy sub-page footers use `.site-foot nav a`; both must clear the floor. */
.foot-col nav a,
.site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-foot .fine { color: var(--on-forest-faint); }
.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid #333734;
}

/* --------------------------------------------------------------- sticky CTA */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border-top: 1px solid var(--border-firm); backdrop-filter: blur(10px);
  display: none;
}
.sticky-cta[data-show] { display: block; }
@media (min-width: 880px) { .sticky-cta { display: none !important; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- the grain */
/* Felt, not seen. Cotton rag is not a flat rectangle (P-25 ext). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::before { opacity: .06; } }
body > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- the motion */
/* Scoped to .js — set by an inline script in <head>. Without JS the content is
   simply visible, rather than hidden forever by a transition that never runs. */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.section-head { max-width: 64ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }