/* ============================================================
   House of Maya — "The Telling"
   All values via tokens.css custom properties (no raw literals).
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

body {
  background: var(--c-cream);
  color: var(--c-red);
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shared layout ---------- */
.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.measure { max-width: var(--measure); margin-inline: auto; }

.band {
  position: relative;
  padding-block: var(--band-pad);
}
/* clip only where a decorative layer must be masked (watermark numeral) */
.clip { overflow: hidden; }
.band > .wrap { position: relative; z-index: 1; }

.band--cream { background: var(--c-cream); color: var(--c-red); }
.band--blush { background: var(--c-blush); color: var(--c-red); }
.band--red   { background: var(--c-red);   color: var(--c-cream); }

/* red-band treatment: radial vignette + grain (OLED banding mitigation) */
.band--red {
  background-image: radial-gradient(120% 90% at 50% 40%,
    var(--c-red-lift) 0%, var(--c-red) 68%, var(--c-red-deep) 100%);
}
.band--red::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- ember atmosphere (hero + closing band only) ---------- */
.embers::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 80%, var(--c-gold) 40%, transparent 42%),
    radial-gradient(2px 2px at 65% 90%, var(--c-gold) 40%, transparent 42%),
    radial-gradient(3px 3px at 82% 70%, var(--c-gold) 40%, transparent 42%),
    radial-gradient(2px 2px at 40% 95%, var(--c-gold) 40%, transparent 42%),
    radial-gradient(2px 2px at 92% 85%, var(--c-gold) 40%, transparent 42%);
  background-repeat: no-repeat;
  opacity: .18;
  animation: ember-drift 46s linear infinite;
}
@keyframes ember-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -900px, 0 -1400px, 0 -1100px, 0 -1700px, 0 -1250px; }
}
.has-video::before { display: none; }

/* ---------- typography helpers ---------- */
.kicker {
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-ink);
}
.band--red .kicker { color: var(--c-gold-lift); }

.serif-italic { font-style: italic; }

h1, h2, h3 { font-weight: 400; text-wrap: balance; line-height: var(--lh-tight); }
p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

/* ---------- CTA pill ---------- */
.pill {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  text-decoration: none;
  padding: .9em 2em;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.pill:hover { background: currentColor; }
.band--red .pill:hover  { color: var(--c-red); }
.band--cream .pill:hover,
.band--blush .pill:hover { color: var(--c-cream); }
/* the page's ONE filled button (closing band) */
.pill--solid {
  background: var(--c-gold);
  color: var(--c-red);
  border-color: var(--c-gold);
}
.pill--solid:hover { background: transparent; color: var(--c-gold-lift); }

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: var(--sp-3); top: var(--sp-3);
  transform: translateY(-200%);
  background: var(--c-cream); color: var(--c-red);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-card);
  font-family: var(--f-sans); font-size: var(--fs-label); z-index: 100;
}
.skip:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--c-gold-ink); outline-offset: 3px; }
.band--red :focus-visible { outline-color: var(--c-gold-lift); }

/* ---------- sticky top bar ---------- */
/* z-index sits under .skip (100) so the skip link still wins focus. */
:root { --topbar-h: 3.5rem; }
/* keep in-page anchors (#village, #ring-1..10) clear of the fixed bar */
html { scroll-padding-top: calc(var(--topbar-h) + var(--sp-3)); }

.topbar {
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 90;
  background: var(--c-red);                 /* JS-off: always solid, always legible */
  border-block-end: 1px solid rgba(199, 154, 91, .28);
}
.topbar__inner {
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-inline: clamp(1.25rem, 5vw, 3rem);   /* matches .wrap */
}
.topbar__mark {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 1rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-cream); text-decoration: none; white-space: nowrap;
}
.topbar__links {
  display: flex; align-items: center; gap: clamp(var(--sp-3), 4vw, var(--sp-5));
  list-style: none; margin: 0; padding: 0;
}
.topbar__links a {
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-lift);                 /* >=6:1 on red */
  text-decoration: none; white-space: nowrap;
}
.topbar__links a:hover { color: var(--c-cream); }
.topbar :focus-visible { outline-color: var(--c-gold-lift); }

/* JS on: ride transparent over the hero, go solid once it is behind us */
html.js .topbar { background: transparent; border-block-end-color: transparent; }
html.js .topbar.is-solid {
  background: var(--c-red);
  border-block-end-color: rgba(199, 154, 91, .28);
}
/* the wordmark waits until then, so it never competes with the hero lockup */
html.js .topbar__mark { opacity: 0; visibility: hidden; }
html.js .topbar.is-solid .topbar__mark { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  html.js .topbar {
    transition: background .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  html.js .topbar__mark {
    transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
  }
  html.js .topbar.is-solid .topbar__mark {
    transition: opacity .35s var(--ease-out), visibility 0s linear 0s;
  }
}

/* Four links plus the wordmark overflow 375px at full size, so tighten.
   Measured: this brings a 387px bar back inside a 375px viewport. */
@media (max-width: 30rem) {
  .topbar__inner { padding-inline: .875rem; gap: var(--sp-2); }
  .topbar__mark  { font-size: .8125rem; letter-spacing: .1em; }
  .topbar__links { gap: var(--sp-2); }
  .topbar__links a { font-size: .625rem; letter-spacing: .07em; }
}

/* ---------- reveal system ---------- */
/* only hide when JS is on AND motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(12px); }
  html.js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
}

/* =====================================================================
   HERO
   ===================================================================== */
#hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: var(--band-pad);
}
#hero .wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-6);
}
.hero__logo { width: clamp(110px, 12vw, 140px); height: auto; color: var(--c-gold); }

.hero__thesis {
  font-size: var(--fs-hero);
  font-style: italic;
  color: var(--c-cream);
  max-width: 18ch;
  line-height: var(--lh-tight);
}
/* drawn gold underline under "making" */
.u-underline { position: relative; font-style: italic; white-space: nowrap; }
.u-underline svg {
  position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .3em;
  overflow: visible;
}
.u-underline path {
  fill: none; stroke: var(--c-gold); stroke-width: 5; stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .u-underline path {
    stroke-dasharray: 460; stroke-dashoffset: 460;
    animation: draw-underline .9s var(--ease-out) .35s forwards;
  }
}
@keyframes draw-underline { to { stroke-dashoffset: 0; } }

.hero__edition {
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-lift);
  max-width: 34ch;
  line-height: 1.9;
}

.hero__cue {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  z-index: 1;
}
.hero__cue-rule { width: 1px; height: 48px; background: var(--c-gold); }
.hero__cue-label {
  font-family: var(--f-sans); font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper); text-transform: uppercase; color: var(--c-gold-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue-label { animation: breathe 4s ease-in-out infinite; }
}
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* hero video (dormant until a file exists) */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: var(--c-red); opacity: .7; mix-blend-mode: multiply;
}

/* =====================================================================
   SHARED: chapter typography, plates, screen-reader util
   ===================================================================== */
.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;
}
.kicker { display: block; margin-bottom: var(--sp-5); }
.chapter-head {
  font-size: var(--fs-display); font-style: italic;
  margin-bottom: var(--sp-5); max-width: 20ch;
}
.lede { font-size: 1.15rem; }
.pullquote {
  font-size: var(--fs-display); font-style: italic; line-height: var(--lh-tight);
  margin-block: var(--sp-7); text-wrap: balance;
}
.closing-line {
  font-size: var(--fs-title); font-style: italic;
  margin-top: var(--sp-6); text-align: center;
}
.afterword { margin-top: var(--sp-6); color: var(--c-red); opacity: .82; }

/* ---- plate (photo socket) ---- */
.plate { margin: 0; }
.plate__art {
  position: relative; width: 100%; border: var(--hairline);
  border-radius: var(--radius-card); overflow: hidden;
}
.plate--portrait .plate__art { aspect-ratio: 4 / 5; }
.plate--square .plate__art { aspect-ratio: 1 / 1; }
.plate--wide .plate__art { aspect-ratio: 3 / 2; }
.plate__art svg { width: 100%; height: 100%; }
.plate__cap {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.plate__caption-real { font-style: italic; font-size: var(--fs-caption); }
.plate__caption-credit {
  font-family: var(--f-sans); font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper); text-transform: uppercase;
}
.band--red .plate__caption-credit { color: var(--c-gold-lift); }
.band--cream .plate__caption-credit,
.band--blush .plate__caption-credit { color: var(--c-gold-ink); }

/* =====================================================================
   I · THE NAME
   ===================================================================== */
.chapter-quiet { padding-block: var(--band-pad-quiet); overflow: hidden; }
.watermark {
  position: absolute; top: 3rem; left: 50%; transform: translateX(-50%);
  font-family: var(--f-serif); font-weight: 600; line-height: 1;
  font-size: clamp(12rem, 30vw, 26rem);
  color: var(--c-blush); opacity: .55; z-index: 0; user-select: none;
}
.diptych { display: grid; gap: var(--sp-4); margin-block: var(--sp-6); }
.diptych__panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); border-radius: var(--radius-card);
  text-align: center;
}
.diptych__panel--seen { background: var(--c-cream); border: var(--hairline); color: var(--c-red); }
.diptych__panel--unseen { background: var(--c-red); color: var(--c-cream); }
.diptych__word { font-style: italic; font-size: var(--fs-title); }
.diptych__gloss {
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.diptych__panel--seen .diptych__gloss { color: var(--c-gold-ink); }
.diptych__panel--unseen .diptych__gloss { color: var(--c-gold-lift); }
@media (min-width: 640px) {
  .diptych { grid-template-columns: 1fr 1fr; gap: 0; }
  .diptych__panel { aspect-ratio: 4 / 3; }
  .diptych__panel--seen { border-right: none; }
}

/* =====================================================================
   II · THE VILLAGE
   ===================================================================== */
.village__grid { display: grid; gap: var(--sp-7); }
.village__text { max-width: var(--measure); }
.village__text em { font-style: italic; }
.village__plate { align-self: start; }
@media (min-width: 900px) {
  .village__grid {
    grid-template-columns: 40% 1fr; gap: 5%; align-items: start;
  }
  .village__plate { margin-top: var(--overlap); } /* bleed up into Ch I */
}

/* =====================================================================
   III · THE FLOWER
   ===================================================================== */
.chapter-flower { text-align: center; }
.chapter-flower .kicker,
.chapter-flower p { text-align: center; }
.flower__bloom {
  width: clamp(160px, 20vw, 220px); margin: 0 auto var(--sp-6);
}
.flower__bloom svg { width: 100%; height: auto; }
.petal { stroke-dasharray: 100; stroke-dashoffset: 0; }
.petal-vein { stroke-dasharray: 100; stroke-dashoffset: 0; stroke-width: 1.1; opacity: .75; }
.petal-wash { opacity: .07; } /* faint gold body on each petal; overlaps deepen naturally */
@media (prefers-reduced-motion: no-preference) {
  /* per-petal stagger, shared by outline, vein, and wash */
  .flower__petals .petal-g:nth-child(2) { --pd: .12s; }
  .flower__petals .petal-g:nth-child(3) { --pd: .24s; }
  .flower__petals .petal-g:nth-child(4) { --pd: .36s; }
  .flower__petals .petal-g:nth-child(5) { --pd: .48s; }

  html.js .flower__bloom .petal,
  html.js .flower__bloom .petal-vein { stroke-dashoffset: 100; }
  html.js .flower__bloom .petal-wash { opacity: 0; }

  /* looping trace: draw in → hold the full bloom → ink travels onward
     and out → brief rest → draw again. The vein follows its petal's
     outline by .45s; the wash breathes in during the hold. */
  html.js .flower__bloom.is-in .petal {
    animation: trace-petal 7s var(--ease-out) infinite;
    animation-delay: var(--pd, 0s);
  }
  html.js .flower__bloom.is-in .petal-vein {
    animation: trace-petal 7s var(--ease-out) infinite;
    animation-delay: calc(var(--pd, 0s) + .45s);
  }
  html.js .flower__bloom.is-in .petal-wash {
    animation: wash-petal 7s var(--ease-out) infinite;
    animation-delay: var(--pd, 0s);
  }
}
@keyframes trace-petal {
  0%   { stroke-dashoffset: 100; }   /* empty */
  18%  { stroke-dashoffset: 0; }     /* drawn (~1.26s, same feel as before) */
  55%  { stroke-dashoffset: 0; }     /* hold the full bloom */
  73%  { stroke-dashoffset: -100; }  /* ink continues around and exits */
  100% { stroke-dashoffset: -100; }  /* rest, then loop */
}
@keyframes wash-petal {
  0%, 20%   { opacity: 0; }    /* wait for the outline */
  38%, 58%  { opacity: .07; }  /* breathe in during the hold */
  75%, 100% { opacity: 0; }    /* out with the erase */
}

/* =====================================================================
   INTERLUDE
   ===================================================================== */
.interlude { padding-block: var(--band-pad-thin); text-align: center; }
.interlude .wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.interlude__line { font-size: var(--fs-title); font-style: italic; }
.interlude__sub { color: var(--c-red); opacity: .8; }

/* =====================================================================
   IV · THE STONES
   ===================================================================== */
.stones__lead {
  font-size: 1.15rem; max-width: var(--measure-wide);
  margin: 0 auto var(--sp-8); text-align: center; color: var(--c-cream);
}
.stones-grid { display: grid; gap: var(--sp-7); max-width: var(--measure-grid); margin-inline: auto; }
.stone { display: flex; flex-direction: column; }
.stone .plate { margin-bottom: var(--sp-4); }
.stone__place {
  font-family: var(--f-sans); font-size: 1rem;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-lift);
}
.stone__rule {
  width: 2.5rem; height: 0; border: none; border-top: var(--hairline);
  margin: var(--sp-3) 0 var(--sp-4);
}
.stone p { color: var(--c-cream); }
.stone__whisper {
  font-family: var(--f-sans); font-size: var(--fs-caption);
  letter-spacing: var(--ls-whisper); text-transform: lowercase;
  color: var(--c-gold-lift); margin-top: var(--sp-4);
}
.stones__close {
  font-size: var(--fs-title); font-style: italic; text-align: center;
  color: var(--c-cream); margin-top: var(--sp-8);
}
@media (min-width: 900px) {
  /* columns stretch to equal height so the trust whispers share one baseline,
     regardless of how long each module's body copy runs */
  .stones-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); align-items: stretch; }
  .stone__whisper { margin-top: auto; padding-top: var(--sp-4); }
}
/* the page's only staggered reveal */
@media (prefers-reduced-motion: no-preference) {
  html.js .stones-grid .stone:nth-child(2).is-in { transition-delay: .08s; }
  html.js .stones-grid .stone:nth-child(3).is-in { transition-delay: .16s; }
}

/* =====================================================================
   V · THE TEN
   ===================================================================== */
.ten__head {
  font-size: var(--fs-display); font-style: italic; text-align: center;
  max-width: var(--measure-wide); margin: 0 auto var(--sp-5);
}
.ten__intro {
  max-width: 46rem; margin: 0 auto; text-align: center; color: var(--c-red);
}
.ten__intro em { font-style: italic; }

.edition { margin-block: var(--sp-8); }
.edition-track {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: var(--sp-2);
}
.edition-track::-webkit-scrollbar { display: none; }

.ring-card {
  flex: 0 0 72vw; scroll-snap-align: center;
  border: var(--hairline); border-radius: var(--radius-card);
  padding: var(--sp-6) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center; aspect-ratio: 4 / 3; justify-content: center;
}
.ring-card--garnet { background: var(--c-blush); }
.ring-card--sapphire { background: var(--c-cream); }
.ring-card__glyph { width: 22px; height: 22px; fill: var(--c-gold); margin-bottom: var(--sp-2); }
.ring-card__no {
  font-family: var(--f-serif); font-size: var(--fs-edition);
  line-height: 1; color: var(--c-red);
}
.ring-card__of { font-size: .45em; color: var(--c-gold-ink); font-style: italic; }
.ring-card__stone {
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-ink); margin-top: var(--sp-2);
}

.edition-progress {
  height: 1px; margin-top: var(--sp-3);
  background: color-mix(in srgb, var(--c-gold) 30%, transparent);
}
.edition-progress__bar {
  display: block; height: 100%; background: var(--c-gold);
  transform-origin: left center; transform: scaleX(.04);
}

@media (min-width: 760px) {
  .edition-track {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4);
    overflow: visible; scroll-snap-type: none; padding-bottom: 0;
  }
  .ring-card { flex: none; aspect-ratio: 3 / 4; }
  .edition-progress { display: none; }
}

.ten__written {
  text-align: center; font-style: italic; color: var(--c-red);
  margin-top: var(--sp-6);
}
.ten__final {
  text-align: center; font-size: var(--fs-title); font-style: italic;
  margin-top: var(--sp-4); text-wrap: balance;
}

/* =====================================================================
   CODA · TRI HITA KARANA
   ===================================================================== */
.coda { text-align: center; }
.coda__lead {
  font-size: var(--fs-title); font-style: italic;
  margin: 0 auto var(--sp-7); max-width: 40rem;
}
.coda__harmonies {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  max-width: var(--measure-wide); margin-inline: auto;
}
.harmony { display: flex; flex-direction: column; gap: var(--sp-1); }
.harmony__title { font-style: italic; font-size: 1.3rem; color: var(--c-red); }
.harmony__gloss {
  font-family: var(--f-sans); font-size: var(--fs-caption);
  letter-spacing: .04em; color: var(--c-gold-ink);
}
/* V2 divider — split rule with a granule at the centre (workshop, not temple).
   Two contexts only: Chapter V (once) and the coda separators. Never a rhythm device. */
.divider {
  border: 0;
  width: var(--divider-w);
  height: var(--divider-h);
  margin: var(--sp-6) auto;
  background:
    linear-gradient(var(--c-gold), var(--c-gold)) left  center / calc(50% - var(--divider-gap)) var(--divider-rule) no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) right center / calc(50% - var(--divider-gap)) var(--divider-rule) no-repeat,
    radial-gradient(circle, var(--c-gold) 0 var(--divider-dot), transparent calc(var(--divider-dot) + 0.5px)) center / var(--divider-h) var(--divider-h) no-repeat;
}
/* the granule alone, inline — the flanking harmonies provide the split */
.divider--dot {
  display: inline-block; flex: none;
  width: var(--divider-h); height: var(--divider-h); margin: 0; border: 0;
  background: radial-gradient(circle, var(--c-gold) 0 var(--divider-dot), transparent calc(var(--divider-dot) + 0.5px)) center / var(--divider-h) var(--divider-h) no-repeat;
}
.coda__recurrence {
  margin-top: var(--sp-7);
  font-style: italic;
  font-size: var(--fs-title);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .coda__harmonies { flex-direction: row; justify-content: center; align-items: center; }
}

/* =====================================================================
   CLOSING BAND · THE HANGTAG
   ===================================================================== */
.closing { min-height: 100svh; display: flex; align-items: center; padding-block: var(--sp-7); }
.closing .wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  text-align: center;
}
.hangtag {
  position: relative; width: min(310px, 74vw); aspect-ratio: 3 / 5;
  border: var(--hairline); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  box-shadow: 0 24px 60px rgb(0 0 0 / .25);
}
.hangtag__hole {
  position: absolute; top: var(--sp-4); left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border: 2px solid var(--c-gold); border-radius: 50%;
}
.hangtag__text {
  font-style: italic; font-size: var(--fs-title); color: var(--c-cream);
  line-height: 1.35;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hangtag.reveal { opacity: 0; transform: translateY(16px) rotate(6deg); }
  html.js .hangtag.reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  }
}
.closing__cta { margin-top: var(--sp-2); }
.colophon {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.colophon__mark { width: 28px; height: 28px; color: var(--c-gold); margin-bottom: var(--sp-2); }
.colophon__line {
  font-family: var(--f-sans); font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper); text-transform: uppercase; color: var(--c-blush);
}
.colophon__handle a {
  font-family: var(--f-sans); font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper); text-transform: uppercase;
  color: var(--c-gold-lift); text-decoration: underline;
  /* handle contains underscores — drop the rule clear of them so they stay legible */
  text-underline-offset: .55em; text-decoration-thickness: 1px;
}
.colophon__set {
  font-style: italic; font-size: var(--fs-caption);
  color: var(--c-blush); opacity: .8; max-width: 32rem;
}

/* live plate photos (replace .plate__art when a slot lights up) */
.plate > img {
  width: 100%; height: auto; display: block; object-fit: cover;
  border: var(--hairline); border-radius: var(--radius-card);
}
.plate--square > img { aspect-ratio: 1 / 1; }
.plate--portrait > img { aspect-ratio: 4 / 5; }
.plate--wide > img { aspect-ratio: 3 / 2; }

/* =====================================================================
   V2 — Chapter V: anchors, provenance lines, claimed state
   ===================================================================== */
.ring-card {
  scroll-margin-block: clamp(4rem, 12vh, 7rem);
  scroll-margin-inline: var(--sp-4);
}
/* deep-link emphasis: a second hairline inside the card's own border.
   No keyframe — identical with motion allowed or reduced, nothing to gate. */
.ring-card:target { box-shadow: 0 0 0 1px var(--c-gold-ink); }

.ring-card__design {              /* GATED: renders only once designs are confirmed */
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin-top: var(--sp-1);
}
.ring-card__prov {                /* unlabelled provenance lines — no dt/dd grammar */
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.ring-card__prov p + p { margin-top: var(--sp-2); }
.ring-card__status {              /* GATED: first cleared payment. Never pre-marked. */
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--f-serif);
  font-size: var(--fs-caption);
  font-style: italic;
  text-transform: lowercase;
  color: var(--c-red);
}

/* =====================================================================
   V2 — the list (email capture at the interlude)
   ===================================================================== */
.notify__lead { margin-top: var(--sp-2); }
.notify {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
}
.notify__label {
  font-family: var(--f-sans);
  font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper);
  text-transform: uppercase;
  color: var(--c-gold-ink);
}
.notify__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3); width: 100%;
}
/* the class's display would otherwise beat the UA's [hidden] rule */
.notify__row[hidden] { display: none; }
.notify__field {
  flex: 1 1 16rem;
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  color: var(--c-red);
  background: var(--c-cream);
  border: 1px solid var(--c-red);
  border-radius: var(--radius-card);
  padding: .8em 1em;
  min-height: 44px;
}
/* rectangular by design — the page keeps "one ask, three pills" and this is not a fourth */
.notify__submit {
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--c-red);
  background: transparent;
  border: 1px solid var(--c-red);
  border-radius: var(--radius-card);
  padding: .9em 1.8em;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.notify__submit:hover { background: var(--c-red); color: var(--c-cream); }
.notify__submit[disabled] { opacity: .55; cursor: default; }
.notify__status {
  min-height: 1.65em;               /* reserved, so the swap causes zero layout shift */
  font-style: italic;
  color: var(--c-red);
}
.notify__consent {
  font-size: var(--fs-caption);
  color: var(--c-red);
  max-width: 46ch;
}
/* honeypot: clipped, never display:none (bots skip display:none fields) */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =====================================================================
   V2 — leaf pages (thanks, privacy): one quiet cream band
   ===================================================================== */
.leaf { min-height: 100svh; display: flex; align-items: center; }
.leaf .wrap {
  max-width: var(--measure);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); text-align: center;
}
.leaf__line { font-size: var(--fs-display); font-style: italic; }
.leaf__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.leaf__body p { text-align: left; }
.leaf__aside { font-size: var(--fs-caption); font-style: italic; }
.leaf .pill { margin-top: var(--sp-3); }
/* the endpoint sends JS-off failures to /thanks.html?state=retry#retry */
.thanks__retry { display: none; }
.thanks__retry:target { display: block; }
.thanks:has(.thanks__retry:target) .thanks__line,
.thanks:has(.thanks__retry:target) .thanks__body { display: none; }

/* V2 — Chapter IV: the eye (house practice; the signed byline stays gated) */
.stones__eye {
  max-width: var(--measure);
  margin: var(--sp-8) auto 0;
  text-align: center;
  color: var(--c-cream);
  font-style: italic;
}

/* =====================================================================
   V2 — the journey (Chapter IV close) and the ownership proposition
   ===================================================================== */
.journey {
  list-style: none; padding: 0;
  margin: var(--sp-8) auto 0;
  max-width: var(--measure-grid);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  font-family: var(--f-sans);
  font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper);
  text-transform: uppercase;
  color: var(--c-gold-lift);
  text-align: center;
}
.journey li {
  position: relative;
  padding-top: var(--sp-5);
}
/* one hairline per item: from this dot to the next, spanning the grid gap */
.journey li::after {
  content: ""; position: absolute; top: 6px; height: 1px;
  background: var(--c-gold); opacity: .5;
  left: 50%; width: calc(100% + var(--sp-2));
}
.journey li:last-child::after { display: none; }
.journey__dot {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-gold); z-index: 1;
}
@media (max-width: 639px) {
  /* 96px above the closing line and 96px again below it left two dead fields
     on a phone; halve both so the block reads as one unit. */
  .stones__close { margin-top: var(--sp-6); }
  /* Stacked, it should still read as one path: keep the hairline but run it
     vertically from each dot to the next, and centre the group as a block
     rather than letting five short labels hug the left edge. */
  .journey {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: left;
    margin-top: var(--sp-6);          /* was sp-8 — that left a dead field above */
    width: max-content;
    max-width: 100%;
  }
  .journey li { padding: 0 0 0 var(--sp-5); }
  .journey li::before { display: none; }
  .journey__dot { top: .35em; left: 0; transform: none; }
  .journey li::after {
    /* from just under this dot, across the gap, to the next one */
    top: calc(.35em + 9px);
    left: 4px;
    width: 1px;
    height: calc(100% - 9px + var(--sp-4));
    opacity: .45;
  }
}

.owning {
  max-width: var(--measure); margin: var(--sp-8) auto 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); text-align: center;
}
.owning__logo { width: clamp(100px, 10vw, 120px); height: auto; color: var(--c-gold); }
/* homepage pointer to owning.html, standing where the block used to be */
.owning__link {
  margin-top: var(--sp-8); text-align: center;
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.owning__link a { color: var(--c-gold-ink); }   /* >=4.5:1 on cream */
.owning__head {
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-ink); font-weight: 400;
}
.owning__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  text-align: left;
}
.owning__list li { padding-left: var(--sp-5); position: relative; }
.owning__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--c-gold);
}

/* =====================================================================
   V2 — standards page
   ===================================================================== */
.std-head { min-height: auto; padding-block: var(--band-pad-quiet); }
/* a header carrying only its label — keep the band slim so it reads as
   deliberate rather than as an empty one. The fixed bar overlays the top of
   the band, so add its height back or the label sits right under it. */
.std-head--label { padding-block: calc(var(--sp-7) + var(--topbar-h)) var(--sp-7); }
.std-head .wrap {
  max-width: var(--measure-wide); display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-4); text-align: center;
}
.std-head__line { font-size: var(--fs-display); font-style: italic; color: var(--c-cream); }
.std-head__lede { max-width: 52ch; color: var(--c-cream); }
.std-intro {
  max-width: var(--measure); margin: 0 auto var(--sp-8);
  text-align: center; font-style: italic;
}
.pillars {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: var(--measure-grid);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.pillars li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  align-items: baseline;
  padding-top: var(--sp-5); border-top: var(--hairline);
}
.pillars__no {
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-title); color: var(--c-gold-ink);
}
.pillars__name {
  font-family: var(--f-sans); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-red); font-weight: 400; margin-bottom: var(--sp-2);
}
.pillars li p { grid-column: 2; max-width: 62ch; }   /* keep prose under its name, not under the numeral */
#pillars > .wrap > .kicker { text-align: center; }
.refuse { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.refuse li { padding-left: var(--sp-5); position: relative; }
.refuse li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--c-gold);
}
.refuse__close { margin-top: var(--sp-6); font-style: italic; }
.closing-thin { padding-block: var(--sp-8); text-align: center; }

/* Blush grounds need a deeper ink: --c-gold-ink is only 3.7:1 on blush.
   Applies wherever small gold text sits on blush (bands and garnet cards). */
.band--blush .kicker,
.band--blush .harmony__gloss,
.band--blush .notify__label,
.band--blush .plate__caption-credit,
.ring-card--garnet .ring-card__stone,
.ring-card--garnet .ring-card__of {
  color: var(--c-gold-ink-deep);
}
.colophon__standards a {
  font-family: var(--f-sans); font-size: var(--fs-whisper);
  letter-spacing: var(--ls-whisper); text-transform: uppercase;
  color: var(--c-blush); text-decoration: underline; text-underline-offset: 3px;
}