/* ============================================================
   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); }

/* ---------- 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) {
  .stones-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); align-items: start; }
}
/* 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);
}
.coda__petal { width: 15px; height: 15px; fill: var(--c-gold); flex: none; }
@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; text-underline-offset: 3px;
}
.colophon__set {
  font-style: italic; font-size: var(--fs-caption);
  color: var(--c-blush); opacity: .8; max-width: 32rem;
}