/* ==========================================================================
   THE Z DECK — MAIN
   Composed exclusively from tokens.css. No raw pixel values live below.
   ========================================================================== */

/* ---------- FONTS (subset, self-hosted, two weights) ---------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- RESET -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-paper);
}

body {
  margin: 0;
  padding-bottom: var(--rail-h);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background:
    radial-gradient(120% 60% at 82% -10%, var(--c-paper-2) 0%, transparent 60%),
    var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-deep-ink); text-decoration-thickness: var(--hair); text-underline-offset: 0.22em; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--font-mono); font-size: 0.92em; }
:target { scroll-margin-top: calc(var(--header-h) + var(--s-6)); }

::selection { background: var(--c-deep); color: var(--c-paper); }

:focus-visible {
  outline: var(--hair-2) solid var(--c-focus);
  outline-offset: var(--s-2);
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- PRIMITIVES --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--container-wide); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-wide); }

.skip-link {
  position: fixed;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-2) var(--s-4);
  background: var(--c-deep);
  color: var(--c-paper);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- PROGRESS ----------------------------------------------------- */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--progress-h);
  z-index: var(--z-header);
  background: transparent;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-deep), var(--c-teal) 60%, var(--c-sand));
  transform-origin: left center;
  transition: width var(--dur-1) linear;
}

/* ---------- HEADER ------------------------------------------------------- */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  /* 96%, not 88%: over a --c-deep chapter an 88% wash composites to neutral
     grey (#dfe0e0), which reads as a rendering fault rather than warm paper. */
  background: color-mix(in srgb, var(--c-paper) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-2)) saturate(var(--saturate));
  border-block-end: var(--border-soft);
}
.site-head__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--s-2) var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
  min-height: var(--tap);
}
.brand__mark { width: var(--s-7); height: auto; flex: none; }
.brand__text { display: grid; line-height: var(--lh-snug); }
.brand__name {
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-snug);
}
.brand__sub {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.head-tools { display: flex; align-items: center; gap: var(--s-3); }
.head-meta {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.head-meta .dot { width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--c-teal); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink-2);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1);
}
.icon-btn:hover { background: var(--c-veil); color: var(--c-ink); }
.icon-btn:active { transform: scale(var(--press-scale)); }
.icon-btn .ico--moon { display: none; }
[data-theme="dark"] .icon-btn .ico--sun { display: none; }
[data-theme="dark"] .icon-btn .ico--moon { display: block; }

/* ---------- RAIL (bottom dots on mobile, right rail on desktop) ---------- */
.rail {
  position: fixed;
  z-index: var(--z-rail);
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  justify-content: center;
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, var(--inset-0)));
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-1));
  backdrop-filter: blur(var(--blur-1));
  border-block-start: var(--border-soft);
}
.rail__list { display: flex; align-items: center; gap: var(--s-1); }
.rail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.rail__dot {
  display: block;
  width: var(--rail-dot);
  height: var(--rail-dot);
  border-radius: 50%;
  background: var(--c-rail);
  transition: background var(--dur-2), transform var(--dur-2) var(--ease-expo), box-shadow var(--dur-2);
}
.rail__link:hover .rail__dot { background: var(--c-deep); transform: scale(1.25); }
.rail__link[aria-current="true"] .rail__dot {
  background: var(--c-deep);
  transform: scale(1.4);
  box-shadow: 0 0 0 var(--s-1) var(--c-focus-halo);
}
.rail__label {
  position: absolute;
  width: var(--hair); height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- EYEBROW / TYPE ---------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: var(--w-strong);
}
.eyebrow__rule { display: block; width: var(--s-8); height: var(--hair); background: var(--c-sand); }
.ch-num {
  font-variant-numeric: tabular-nums;
  color: var(--c-deep);
  letter-spacing: var(--tr-wide);
}
.ch-num::after {
  content: "";
  display: inline-block;
  width: var(--s-4);
  height: var(--hair);
  margin-inline-start: var(--s-2);
  background: var(--c-sand);
  vertical-align: middle;
}

.ch-title {
  margin-block-start: var(--s-4);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-strong);
  max-width: 22ch;
  text-wrap: balance;
}
.lede {
  margin-block-start: var(--s-5);
  max-width: var(--measure);
  font-size: var(--fs-h3);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}
.ch-note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
  font-weight: var(--w-strong);
}
.prose h4 { font-size: var(--fs-sm); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-ink-3); }
.prose p { color: var(--c-ink-2); }
.prose strong { color: var(--c-ink); font-weight: var(--w-strong); }
.fine { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--c-ink-3); }
.pull {
  border-inline-start: var(--hair-2) solid var(--c-teal);
  padding-inline-start: var(--s-4);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--c-ink) !important;
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-snug);
}

.hairline { display: block; }

/* ---------- BUTTONS ------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  border: var(--hair) solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--primary {
  background: var(--c-deep);
  color: var(--c-on-deep);
  box-shadow: var(--e-2);
}
.btn--primary:hover { background: var(--c-deep-press); transform: translateY(var(--lift)); }
.btn--quiet {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.btn--quiet:hover { background: var(--c-veil); border-color: var(--c-deep); }
.btn--ghost {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-ink-2);
}
.btn--ghost:hover { border-color: var(--c-deep); color: var(--c-ink); }
.btn--sm { min-height: var(--s-7); padding-inline: var(--s-4); font-size: var(--fs-xs); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  text-decoration: none;
  border-block-end: var(--hair) solid var(--c-line-strong);
  padding-block-end: var(--s-1);
}
.link-arrow:hover { border-color: var(--c-deep); }
.link-arrow .ico { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .ico { transform: translateX(var(--s-1)); }

/* ---------- CHAPTER SHELL ------------------------------------------------ */
.chapter {
  position: relative;
  padding-block: var(--section-pad);
  border-block-start: var(--border);
}
.chapter--tint { background: linear-gradient(180deg, var(--c-paper-2), var(--c-paper) 45%); }
.chapter--deep {
  background: var(--c-deep);
  color: var(--c-paper);
  border-block-start-color: transparent;
}
.chapter--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(75, 154, 128, 0.22), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(179, 138, 88, 0.16), transparent 60%);
  pointer-events: none;
}
.chapter--deep .wrap { position: relative; }
.chapter--deep .eyebrow,
.chapter--deep .ch-note { color: color-mix(in srgb, var(--c-paper) 62%, var(--c-deep)); }
.chapter--deep .ch-num { color: var(--c-paper); }
.chapter--deep .lede { color: color-mix(in srgb, var(--c-paper) 82%, var(--c-deep)); }
.chapter--deep .prose p,
.chapter--deep .prose h3 { color: var(--c-paper); }
.chapter--deep .btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: var(--c-paper); }
.chapter--deep .btn--ghost:hover { border-color: var(--c-paper); background: rgba(255, 255, 255, 0.08); }
.ch-head { max-width: 68ch; margin-block-end: var(--s-6); }
.ch-head--light .ch-title { color: var(--c-paper); }
.ch-head--light .ch-note { color: rgba(255, 255, 255, 0.6); }

.split {
  display: grid;
  gap: var(--stack-lg);
  margin-block-start: var(--s-7);
  align-items: start;
}
.split--even { grid-template-columns: 1fr; }
.split--rank,
.split--wide-visual,
.split--heatfoot,
.split--thirds { grid-template-columns: 1fr; }

/* ---------- FIGURES / CARDS ---------------------------------------------- */
.figure {
  position: relative;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-m);
  padding: var(--card-pad);
  box-shadow: var(--e-1), var(--e-inset);
  min-width: 0;
}
.figure--full { margin-block-start: var(--s-6); }
.figure--air { background: transparent; border: 0; box-shadow: none; padding: 0; }
.figure--table { padding: 0; overflow: hidden; }
.figure--wide { margin-block-start: var(--s-6); }
.figure--heat { padding: var(--s-3) var(--s-3) var(--s-4); overflow: hidden; }
.figure--chain { margin-block-start: var(--s-6); background: var(--c-paper-2); }

.fig-head { margin-block-end: var(--s-4); }
.fig-title { font-size: var(--fs-sm); font-weight: var(--w-strong); letter-spacing: var(--tr-snug); }
.fig-sub { margin-block-start: var(--s-1); font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- HERO --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  padding-block: var(--s-8) var(--s-9);
  /* clip, not hidden: the brand sweep is deliberately cropped here, and a
     clipped box is not a scroll container the user can get stranded in. */
  overflow: hidden;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--hair);
  background: var(--c-line);
}
.hero__art {
  position: absolute;
  inset-block-start: 42%;
  inset-inline-end: calc(var(--s-9) + var(--s-4));
  width: var(--hero-art);
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: none;
}
.hero__swoosh { width: 100%; height: auto; }
.swoosh {
  opacity: 0;
  transform: translate3d(var(--s-6), var(--s-4), 0);
  animation: swoosh-in var(--dur-5) var(--ease-expo) forwards;
}
.swoosh--sand { animation-delay: 120ms; fill: var(--c-sand); }
.swoosh--deep { animation-delay: 260ms; fill: var(--c-deep); }
.swoosh--teal { animation-delay: 400ms; fill: var(--c-teal); }
@keyframes swoosh-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero__inner { position: relative; min-width: 0; }
.hero__title {
  margin-block-start: var(--s-5);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  font-weight: var(--w-strong);
  max-width: 16ch;
}
.hero__title .hairline {
  opacity: 0;
  transform: translateY(0.5em);
  animation: line-in var(--dur-4) var(--ease-expo) forwards;
}
.hero__title .hairline:nth-child(2) { animation-delay: 110ms; }
.hero__title .hairline:nth-child(3) { animation-delay: 220ms; }
.hero__title .accent { color: var(--c-deep); }
.hero__title .accent::after {
  content: "";
  display: block;
  width: 38%;
  height: var(--hair-2);
  margin-block-start: var(--s-3);
  background: linear-gradient(90deg, var(--c-sand), var(--c-teal));
}
@keyframes line-in {
  to { opacity: 1; transform: translateY(0); }
}
.hero__lede {
  margin-block-start: var(--s-6);
  max-width: 52ch;
  font-size: var(--fs-h4);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}
.hero__stats {
  display: grid;
  gap: 0;
  margin-block-start: var(--s-7);
  border-block: var(--border);
  max-width: 40rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.hero__foot {
  margin-block-start: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-3);
}
.hero__foot .mono { color: var(--c-deep); text-transform: none; letter-spacing: var(--tr-snug); }
.hero__foot-hint { text-wrap: pretty; }

.hero-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-block: var(--s-3);
  border-block-start: var(--border-soft);
}
.hero-chip:first-child { border-block-start: 0; }
.hero-chip__num {
  font-size: var(--fs-num-sm);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-tight);
  color: var(--c-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-chip__num sup { font-size: 0.55em; letter-spacing: 0; margin-inline-start: 0.1em; }
.hero-chip__label { font-size: var(--fs-xs); color: var(--c-ink-2); line-height: var(--lh-snug); }

/* ---------- STATS -------------------------------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: 1fr;
}
.stat {
  padding: var(--s-4) 0;
  border-block-start: var(--border-soft);
  min-width: 0;
}
.stat:first-child { border-block-start: 0; padding-block-start: 0; }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  font-size: var(--fs-num);
  font-weight: var(--w-strong);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--c-deep);
  font-variant-numeric: tabular-nums;
}
.stat__num .u { font-size: 0.45em; letter-spacing: var(--tr-snug); color: var(--c-ink-2); }
.stat__label { margin-block-start: var(--s-2); font-size: var(--fs-sm); font-weight: var(--w-strong); }
.stat__sub { margin-block-start: var(--s-1); font-size: var(--fs-xs); color: var(--c-ink-3); line-height: var(--lh-body); }
.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  color: var(--c-ok);
  background: var(--c-ok-wash);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
  font-weight: var(--w-strong);
}
.stat__delta[data-dir="down"] { color: var(--c-err); background: var(--c-err-wash); }

/* ---------- VERTICAL BARS ------------------------------------------------ */
.bars { display: grid; gap: var(--s-3); }
.bars__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.bars__title { font-size: var(--fs-sm); font-weight: var(--w-strong); }
.bars__unit { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); color: var(--c-ink-3); text-transform: uppercase; }
.bars__plot {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: var(--chart-h);
  padding-block-start: var(--s-3);
  border-block-end: var(--border);
  position: relative;
}
.bars__grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to top, var(--c-line-soft) 0, var(--c-line-soft) var(--hair), transparent var(--hair), transparent 25%);
  pointer-events: none;
}
.bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-1);
  position: relative;
}
.bar__value {
  font-size: var(--fs-micro);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-snug);
  color: var(--c-ink-2);
  opacity: 0;
  transform: translateY(var(--s-1));
  animation: fade-up var(--dur-3) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger) + 320ms);
  white-space: nowrap;
}
.bar__fill {
  width: 100%;
  max-width: var(--s-7);
  height: var(--h, 10%);
  background: linear-gradient(180deg, var(--c-deep), color-mix(in srgb, var(--c-deep) 72%, var(--c-teal)));
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  transform-origin: bottom center;
  transform: scaleY(0);
  animation: bar-grow var(--dur-4) var(--ease-expo) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger) + 120ms);
  opacity: 0.95;
}
.bar--muted .bar__fill { background: linear-gradient(180deg, var(--c-sand), color-mix(in srgb, var(--c-sand) 70%, var(--c-paper))); }
.bar--ghost .bar__fill {
  background: repeating-linear-gradient(135deg, var(--c-line-strong) 0 var(--hair-2), transparent var(--hair-2) var(--s-2));
  border: var(--hair) dashed var(--c-line-strong);
}
@keyframes bar-grow { to { transform: scaleY(1); } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }
.bars__labels { display: flex; gap: var(--s-2); }
.bars__labels .bar { height: auto; }
.bar__label { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); color: var(--c-ink-3); text-transform: uppercase; text-align: center; }
.bar__delta { font-size: var(--fs-micro); color: var(--c-ok); font-variant-numeric: tabular-nums; }
.bar__delta[data-dir="down"] { color: var(--c-err); }
.bars__foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); color: var(--c-ink-3); }
.legend { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); color: var(--c-ink-3); text-transform: uppercase; }
.legend i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-xs); background: var(--c-deep); display: inline-block; }
.legend i.is-sand { background: var(--c-sand); }

/* ---------- GROUPED MONTH COLUMNS --------------------------------------- */
.mcols { display: grid; gap: var(--s-3); }
.mcols__plot { display: flex; align-items: flex-end; gap: var(--s-1); height: var(--chart-h); border-block-end: var(--border); padding-block-start: var(--s-4); }
.mcol { flex: 1; display: flex; align-items: flex-end; gap: var(--hair-2); height: 100%; min-width: 0; }
.mcol__bar { flex: 1; height: var(--h, 0%); border-radius: var(--r-xs) var(--r-xs) 0 0; transform-origin: bottom; transform: scaleY(0); animation: bar-grow var(--dur-4) var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * var(--stagger-fast) + 160ms); min-height: var(--hair); }
.mcol__bar--a { background: color-mix(in srgb, var(--c-deep) 26%, var(--c-paper)); }
.mcol__bar--b { background: var(--c-deep); }
.mcol__bar--c { background: var(--c-teal); }
.mcols__labels { display: flex; gap: var(--s-1); }
.mcols__labels span { flex: 1; text-align: center; font-size: var(--fs-micro); color: var(--c-ink-3); letter-spacing: var(--tr-wide); text-transform: uppercase; }

/* ---------- HORIZONTAL BARS --------------------------------------------- */
.hbars { display: grid; gap: var(--s-2); }
.hbar { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: var(--s-3); min-height: var(--s-6); }
.hbar__label { font-size: var(--fs-xs); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar__track { position: relative; height: var(--bar-h); background: var(--c-paper-3); border-radius: var(--r-pill); overflow: hidden; }
.hbar__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--c-deep), color-mix(in srgb, var(--c-deep) 60%, var(--c-teal)));
  border-radius: var(--r-pill);
  transform-origin: left;
  transform: scaleX(0);
  animation: hbar-grow var(--dur-4) var(--ease-expo) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger) + 140ms);
}
.hbar--peak .hbar__fill { background: linear-gradient(90deg, var(--c-teal), color-mix(in srgb, var(--c-teal) 60%, var(--c-deep))); }
.hbar--peak .hbar__label { color: var(--c-ink); font-weight: var(--w-strong); }
@keyframes hbar-grow { to { transform: scaleX(1); } }
.hbar__value { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--c-ink); font-weight: var(--w-strong); white-space: nowrap; }
.hbar__value small { display: block; font-size: var(--fs-micro); color: var(--c-ink-3); font-weight: var(--w-body); text-align: end; }
.hbar--ghost .hbar__track { background: repeating-linear-gradient(135deg, var(--c-line) 0 var(--hair-2), transparent var(--hair-2) var(--s-2)); }

/* ---------- DONUT -------------------------------------------------------- */
.donuts { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.donut { display: grid; gap: var(--s-3); justify-items: center; }
.donut__ring {
  width: var(--donut);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  -webkit-mask: radial-gradient(circle, transparent calc(var(--donut-hole) - 1%), transparent var(--donut-hole), #000 calc(var(--donut-hole) + 1%));
  mask: radial-gradient(circle, transparent calc(var(--donut-hole) - 1%), transparent var(--donut-hole), #000 calc(var(--donut-hole) + 1%));
  transform: rotate(-90deg);
  animation: donut-in var(--dur-4) var(--ease-expo) both;
}
@keyframes donut-in { from { opacity: 0; transform: rotate(-90deg) scale(0.92); } to { opacity: 1; transform: rotate(-90deg) scale(1); } }
.donut__center { position: relative; display: grid; place-items: center; margin-block-start: calc(var(--donut) * -0.5 - var(--s-4)); }
.donut__center strong { font-size: var(--fs-num-sm); letter-spacing: var(--tr-tight); color: var(--c-deep); }
.donut__center span { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); }
.donut__legend { display: grid; gap: var(--s-1); font-size: var(--fs-micro); color: var(--c-ink-2); }
.donut__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.donut__legend i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-xs); display: inline-block; }

/* ---------- HEATMAP ------------------------------------------------------ */
/* Start-aligned and full width: a centred table inside a wider card leaves the
   caption and legend hanging off its left edge, which reads as a broken grid. */
.heat { width: 100%; min-width: var(--heat-min); margin-inline: 0; table-layout: fixed; border-collapse: separate; border-spacing: var(--heat-gap); font-variant-numeric: tabular-nums; }
.heat thead th:first-child { width: var(--heat-rowhead); }
.heat-cap { margin: 0 0 var(--s-2); text-align: start; font-size: var(--fs-xs); color: var(--c-ink-3); text-wrap: pretty; }
.heat th { font-weight: var(--w-strong); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); text-align: start; padding: var(--s-1) 0; }
/* The month label keeps the same inset as the row labels beneath it, so
   "MONTH" and "JAN" share a left edge. */
.heat thead th:first-child { padding-inline: var(--s-2); }
/* No fixed header height: the row is already as tall as its tallest cell, and
   bottom alignment does the rest. Reserving extra height only opened a dead
   band between the caption and the region labels. */
.heat thead th { vertical-align: bottom; }
.heat thead th span { display: block; }
.heat thead th em { display: block; font-style: normal; font-weight: var(--w-body); text-transform: none; letter-spacing: 0; color: var(--c-ink-3); font-size: var(--fs-micro); }
.heat tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--c-paper);
  min-width: var(--s-8);
  padding-inline: var(--s-2);
}
/* The month header stays transparent like every other header cell; only the
   body's row labels form the opaque rail that sticky scrolling needs. */
.heat thead th:first-child { background: transparent; }
.heat tbody th b { display: block; font-size: var(--fs-xs); color: var(--c-ink); }
.heat tbody th i { font-style: normal; font-size: var(--fs-micro); color: var(--c-ink-3); }
.heat tbody tr[data-tier="peak"] th b { color: var(--c-deep); }
.heat tbody tr[data-tier="trough"] th b { color: var(--c-sand-ink); }
.heat td {
  height: var(--heat-cell);
  border-radius: var(--r-xs);
  padding: 0;
  position: relative;
  background: var(--c-paper-3);
  transform: scale(0.86);
  opacity: 0;
  animation: cell-in var(--dur-2) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-fast));
  cursor: default;
}
@keyframes cell-in { to { transform: scale(1); opacity: 1; } }
.heat td[data-lvl="0"] { background: repeating-linear-gradient(135deg, var(--c-paper-sunk) 0 var(--hair-2), transparent var(--hair-2) var(--s-2)); box-shadow: inset 0 0 0 var(--hair) var(--c-line); }
.heat td[data-lvl="1"] { background: var(--heat-l1); }
.heat td[data-lvl="2"] { background: var(--heat-l2); }
.heat td[data-lvl="3"] { background: var(--heat-l3); }
.heat td[data-lvl="4"] { background: var(--heat-l4); }
.heat td[data-lvl="3"]::after,
.heat td[data-lvl="4"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--hair) rgba(255, 255, 255, 0.18);
}
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); margin-block-start: var(--s-3); }
.heat-legend .swatches { display: inline-flex; gap: var(--s-1); }
.heat-legend .swatches i { width: var(--s-4); height: var(--s-4); border-radius: var(--r-xs); display: inline-block; }
.heat-legend .swatches i:nth-child(1) { background: repeating-linear-gradient(135deg, var(--c-paper-sunk) 0 var(--hair-2), transparent var(--hair-2) var(--s-2)); box-shadow: inset 0 0 0 var(--hair) var(--c-line); }
.heat-legend .swatches i:nth-child(2) { background: var(--heat-l1); }
.heat-legend .swatches i:nth-child(3) { background: var(--heat-l2); }
.heat-legend .swatches i:nth-child(4) { background: var(--heat-l3); }
.heat-legend .swatches i:nth-child(5) { background: var(--heat-l4); }
.heat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block-end: var(--s-2); }
.heat-tip {
  margin-block-start: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  min-height: 2.8em;
  border-inline-start: var(--hair-2) solid var(--c-sand);
  padding-inline-start: var(--s-3);
}
.heat-tip b { color: var(--c-ink); }

/* ---------- WATERFALL ---------------------------------------------------- */
.wf { display: grid; gap: var(--s-4); }
.wf__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.wf__plot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
  height: var(--chart-h);
  border-block-end: var(--border);
  position: relative;
  align-items: end;
}
.wf__col { position: relative; height: 100%; }
.wf__bar {
  position: absolute;
  inset-inline: 0;
  bottom: var(--b, 0%);
  height: var(--h, 0%);
  border-radius: var(--r-xs);
  background: var(--c-deep);
  transform-origin: bottom;
  transform: scaleY(0);
  animation: bar-grow var(--dur-4) var(--ease-expo) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 160ms);
}
.wf__bar--delta-down { background: repeating-linear-gradient(135deg, var(--c-err) 0 var(--hair-2), color-mix(in srgb, var(--c-err) 60%, var(--c-paper)) var(--hair-2) var(--s-3)); }
.wf__bar--delta-up { background: var(--c-teal); }
.wf__bar--total { background: var(--c-deep); }
.wf__bar--end { background: linear-gradient(180deg, var(--c-teal), var(--c-deep)); }
.wf__value { position: absolute; inset-inline: 0; bottom: calc(var(--b, 0%) + var(--h, 0%)); text-align: center; font-size: var(--fs-micro); font-weight: var(--w-strong); padding-block-end: var(--s-1); color: var(--c-ink); }
.wf__labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); }
.wf__labels span { font-size: var(--fs-micro); line-height: 1.3; color: var(--c-ink-3); text-align: center; }

/* ---------- LISTS / TABLES ---------------------------------------------- */
.tick-list { display: grid; gap: var(--s-3); }
.tick-list li { position: relative; padding-inline-start: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); }
.tick-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: var(--s-2);
  height: var(--s-2);
  border-radius: 50%;
  background: var(--c-teal);
}
.tick-list--tight { gap: var(--s-2); }
.tick-list strong { color: var(--c-ink); }

.mini-table { display: grid; gap: 0; border-block-start: var(--border); }
.mini-table__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-block-end: var(--border-soft);
  align-items: baseline;
}
.mini-table__row span:first-child { font-size: var(--fs-xs); color: var(--c-ink-2); }
.mini-table__row b { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table--wide .mini-table__row { grid-template-columns: 1.2fr 1fr auto; }
.mini-table--wide .mini-table__row span:nth-child(2) { font-size: var(--fs-micro); color: var(--c-ink-3); }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.data-table th { text-align: start; font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); font-weight: var(--w-strong); padding: var(--s-3) var(--s-4); border-block-end: var(--border); position: sticky; top: 0; background: var(--c-paper); }
.data-table td { padding: var(--s-3) var(--s-4); border-block-end: var(--border-soft); vertical-align: top; }
.data-table tr:last-child td { border-block-end: 0; }
.data-table td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .state { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: var(--w-strong);
  background: var(--c-ok-wash);
  color: var(--c-ok);
  white-space: nowrap;
}
.badge--verify { background: var(--c-warn-wash); color: var(--c-warn); }
.badge--mut { background: var(--c-veil); color: var(--c-ink-3); }
.badge--brand { background: color-mix(in srgb, var(--c-deep) 10%, transparent); color: var(--c-deep); }

.src-block { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: var(--border-soft); display: grid; gap: var(--s-1); }
.src-block a { font-size: var(--fs-micro); color: var(--c-ink-3); text-decoration: none; border-block-end: var(--hair) solid transparent; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.src-block a:hover { color: var(--c-deep); border-block-end-color: currentColor; }
.src-line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; font-size: var(--fs-micro); color: var(--c-ink-3); }
.src-line a { color: inherit; text-decoration: none; border-block-end: var(--hair) solid var(--c-line-strong); }
.src-line a:hover { color: var(--c-deep); }
.src-line .lbl { letter-spacing: var(--tr-wide); text-transform: uppercase; }

/* ---------- SIGNALS / CARDS --------------------------------------------- */
.signals { display: grid; gap: var(--s-4); }
.signal { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block: var(--s-4); border-block-start: var(--border-soft); }
.signal:first-child { border-block-start: 0; padding-block-start: 0; }
.signal__num { font-size: var(--fs-xs); letter-spacing: var(--tr-wide); color: var(--c-sand-ink); font-variant-numeric: tabular-nums; padding-block-start: 0.2em; }
.signal h4 { font-size: var(--fs-sm); text-transform: none; letter-spacing: var(--tr-snug); color: var(--c-ink); }
.signal p { margin-block-start: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.signals--light .signal { border-color: rgba(255, 255, 255, 0.18); }
.signals--light .signal h4 { color: var(--c-paper); }
.signals--light .signal p { color: rgba(255, 255, 255, 0.78); }
.signals--light .signal__num { color: var(--c-sand); }

.tailwind { display: grid; gap: var(--s-2); padding: var(--s-4); border: var(--border); border-radius: var(--r-s); background: var(--c-white); }
.tailwind:first-child { margin-block-start: 0; }
.tailwind__tag { font-size: var(--fs-micro); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-teal-ink); font-weight: var(--w-strong); }
.tailwind h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-snug); }
.tailwind p { font-size: var(--fs-xs); color: var(--c-ink-2); }
.stack > * + * { margin-block-start: var(--s-3); }
.stack--tight > * + * { margin-block-start: var(--s-4); }

/* ---------- DEEP DIVE --------------------------------------------------- */
.deep { margin-block-start: var(--s-8); border-block-start: var(--border-strong); }
.deep__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label icon" "meta icon";
  gap: var(--s-1) var(--s-4);
  align-items: center;
  text-align: start;
  background: transparent;
  border: 0;
  padding: var(--s-4) 0;
  min-height: var(--tap);
  color: var(--c-ink);
  transition: color var(--dur-2);
  border-radius: 0;
}
.deep__btn:hover .deep__label { color: var(--c-deep); }
.deep__label { grid-area: label; font-size: var(--fs-h4); font-weight: var(--w-strong); letter-spacing: var(--tr-snug); position: relative; width: fit-content; }
.deep__label::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -0.15em; height: var(--hair); background: var(--c-sand); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.deep__btn:hover .deep__label::after,
.deep__btn[aria-expanded="true"] .deep__label::after { transform: scaleX(1); }
.deep__meta { grid-area: meta; font-size: var(--fs-xs); color: var(--c-ink-3); }
.deep__icon { grid-area: icon; transition: transform var(--dur-3) var(--ease-expo); color: var(--c-ink-3); }
.deep__btn[aria-expanded="true"] .deep__icon { transform: rotate(45deg); color: var(--c-deep); }
.deep__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-4) var(--ease-expo); }
.deep__inner { padding-block: var(--s-2) var(--s-6); display: grid; gap: var(--s-6); }
.deep__inner h3 { font-size: var(--fs-sm); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-ink-3); font-weight: var(--w-strong); }
.deep__inner > h3 { margin-block-start: var(--s-2); }
.deep__inner p { max-width: var(--measure); color: var(--c-ink-2); font-size: var(--fs-sm); }
.deep--light { border-block-start-color: rgba(255, 255, 255, 0.28); }
.deep--light .deep__btn { color: var(--c-paper); }
.deep--light .deep__meta,
.deep--light .deep__icon { color: rgba(255, 255, 255, 0.6); }
.deep--light .deep__label:hover { color: var(--c-teal); }
.deep--light .deep__inner p { color: rgba(255, 255, 255, 0.82); }
.deep--light .deep__inner h3 { color: rgba(255, 255, 255, 0.6); }
.deep--light .src-block { border-color: rgba(255, 255, 255, 0.18); }
.deep--light .src-block a { color: rgba(255, 255, 255, 0.62); }
.deep--light .src-block a:hover { color: var(--c-paper); }
.deep--light .tick-list li { color: rgba(255, 255, 255, 0.82); }
.deep--light code { color: var(--c-paper); }

/* ---------- ROADMAP ----------------------------------------------------- */
.roadmap { margin-block-start: var(--s-7); }
.roadmap__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block-end: var(--s-4); border-block-end: var(--hair) solid rgba(255, 255, 255, 0.18); }
.roadmap__count { font-size: var(--fs-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
.roadmap__count span { color: var(--c-paper); font-weight: var(--w-strong); }
.roadmap__track { position: relative; }

.movement { position: relative; padding-block: var(--s-6) var(--s-4); border-block-end: var(--hair) solid rgba(255, 255, 255, 0.14); }
.movement:last-child { border-block-end: 0; }
.movement__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.movement__idx {
  display: inline-grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border: var(--hair) solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-size: var(--fs-xs);
  color: var(--c-paper);
  font-variant-numeric: tabular-nums;
}
.movement__label { font-size: var(--fs-micro); letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--c-sand); }
.movement__title { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); color: var(--c-paper); }
.movement__window { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-inline-start: auto; }
.movement__summary { margin-block-start: var(--s-2); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); max-width: var(--measure); }

.steps { margin-block-start: var(--s-4); display: grid; gap: var(--s-2); position: relative; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border: var(--hair) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, 0.03);
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-1);
}
.step:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); }
.step[data-state="active"] { border-color: var(--c-sand); background: rgba(179, 138, 88, 0.12); }
.step[data-state="done"] { border-color: rgba(75, 154, 128, 0.5); background: rgba(75, 154, 128, 0.1); }
.step__node {
  width: var(--s-4);
  height: var(--s-4);
  border-radius: 50%;
  border: var(--hair) solid rgba(255, 255, 255, 0.4);
  margin-block-start: 0.2em;
  display: grid;
  place-items: center;
  flex: none;
}
.step__node .ico { width: var(--s-3); height: var(--s-3); opacity: 0; stroke-width: 2.4; }
.step[data-state="done"] .step__node { background: var(--c-teal); border-color: var(--c-teal); }
.step[data-state="done"] .step__node .ico { opacity: 1; color: var(--c-deep); }
.step[data-state="active"] .step__node { border-color: var(--c-sand); box-shadow: 0 0 0 var(--s-1) rgba(179, 138, 88, 0.22); }
.step__body { min-width: 0; }
.step__title {
  font-size: var(--fs-sm);
  font-weight: var(--w-strong);
  color: var(--c-paper);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.step[data-state="done"] .step__title { color: rgba(255, 255, 255, 0.66); text-decoration: line-through; text-decoration-thickness: var(--hair); }
.step__meta { margin-block-start: var(--s-1); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.6); }
.step__meta b { color: var(--c-paper); font-weight: var(--w-strong); }
.step__toggle {
  background: transparent;
  border: 0;
  padding: var(--s-2);
  min-width: var(--tap);
  min-height: var(--tap);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--r-s);
}
.step__toggle:hover { color: var(--c-paper); background: rgba(255, 255, 255, 0.08); }
.step__toggle .ico { transition: transform var(--dur-2) var(--ease-out); }
.step__toggle[aria-expanded="true"] .ico { transform: rotate(45deg); }
.step__detail { grid-column: 1 / -1; display: grid; gap: var(--s-3); }
.step__detail[hidden] { display: none; }
.step__detail p { font-size: var(--fs-xs); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.78); max-width: var(--measure); }
.step__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.state-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--s-7);
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  border: var(--hair) solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--c-paper);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: var(--w-strong);
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-1);
}
.state-btn:hover { background: rgba(255, 255, 255, 0.1); }
.state-btn:active { transform: scale(var(--press-scale)); }
.step[data-state="done"] .state-btn { border-color: rgba(75, 154, 128, 0.6); color: var(--c-teal); }
.step[data-state="active"] .state-btn { border-color: var(--c-sand); color: var(--c-sand); }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--s-7);
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  border: var(--hair) dashed rgba(255, 255, 255, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  transition: border-color var(--dur-2), color var(--dur-2), background var(--dur-2);
}
.copy-btn:hover { border-color: var(--c-paper); color: var(--c-paper); }
.copy-btn.is-copied { border-style: solid; border-color: var(--c-teal); color: var(--c-teal); }
.copy-btn .ico { width: var(--s-3); height: var(--s-3); }

/* ---------- UNLOCK MAP -------------------------------------------------- */
.unlock { margin-block-start: var(--s-6); border-block-start: var(--border); }
.unlock__head { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-3); border-block-end: var(--border); font-size: var(--fs-micro); letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--c-ink-3); }
.unlock__row { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-4); border-block-end: var(--border-soft); }
.unlock__cell { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.unlock__cell p { font-size: var(--fs-xs); color: var(--c-ink-2); margin-block-start: var(--s-1); max-width: 44ch; }
.unlock__cell b { font-size: var(--fs-sm); color: var(--c-ink); letter-spacing: var(--tr-snug); }
.unlock__mark {
  width: var(--s-5);
  height: var(--s-5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-ok-wash);
  color: var(--c-ok);
  flex: none;
  margin-block-start: 0.1em;
}
.unlock__mark .ico { width: var(--s-3); height: var(--s-3); stroke-width: 2.4; }
.unlock__cell--closed { opacity: 0.72; }
.unlock__cell--closed .unlock__mark { background: transparent; border: var(--hair) dashed var(--c-line-strong); color: var(--c-ink-3); }
.unlock__cell--closed b { color: var(--c-ink-3); font-weight: var(--w-body); }
.unlock__cell--closed p { color: var(--c-ink-3); }

/* ---------- CHAIN ------------------------------------------------------- */
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); }
.chain__node {
  flex: 1 1 8rem;
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding: var(--s-3);
  border: var(--border);
  border-radius: var(--r-s);
  background: var(--c-white);
  position: relative;
}
.chain__node b { font-size: var(--fs-xs); letter-spacing: var(--tr-snug); }
.chain__node span { font-size: var(--fs-micro); color: var(--c-ink-3); line-height: 1.35; }
.chain__node em { font-style: normal; font-size: var(--fs-micro); color: var(--c-sand-ink); letter-spacing: var(--tr-wide); }
.chain__arrow { align-self: center; color: var(--c-line-strong); flex: none; }
.chain__arrow .ico { width: var(--s-4); height: var(--s-4); }

.proof-grid { display: grid; gap: var(--s-3); margin-block-start: var(--s-7); }
.proof {
  padding: var(--s-4);
  border: var(--border);
  border-radius: var(--r-s);
  background: var(--c-white);
}
.proof__num { font-size: var(--fs-num-sm); font-weight: var(--w-strong); letter-spacing: var(--tr-tight); color: var(--c-deep); line-height: 1; }
.proof p { margin-block-start: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-2); }
.proof a { display: inline-block; margin-block-start: var(--s-2); font-size: var(--fs-micro); color: var(--c-ink-3); }

/* ---------- PRESENCE ---------------------------------------------------- */
.layers { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.layer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--card-pad);
  border: var(--border);
  border-radius: var(--r-m);
  background: var(--c-white);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.layer:hover { transform: translateY(var(--lift)); box-shadow: var(--e-2); }
.layer::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: var(--hair-2); background: var(--c-line-strong); }
.layer[data-layer="dreams"]::before { background: var(--c-sand); }
.layer[data-layer="trust"]::before { background: var(--c-teal); }
.layer[data-layer="booking"]::before { background: var(--c-deep); }
.layer__idx { font-size: var(--fs-h2); line-height: 1; color: var(--c-paper-3); letter-spacing: var(--tr-tight); font-weight: var(--w-strong); }
.layer__name { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }
.layer__job { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); margin-block-start: var(--s-1); }
.layer__detail { margin-block-start: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: var(--measure); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-block-start: var(--s-3); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding-inline: var(--s-2);
  border: var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
  background: var(--c-paper);
  letter-spacing: var(--tr-snug);
}
.layer__metric { margin-block-start: var(--s-3); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); }

.callout {
  margin-block-start: var(--s-6);
  padding: var(--card-pad-lg);
  border-radius: var(--r-m);
  background: var(--c-deep);
  color: var(--c-paper);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
}
.callout__num { font-size: var(--fs-num); font-weight: var(--w-strong); letter-spacing: -0.04em; line-height: 1; color: var(--c-teal); }
.callout h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }
.callout p { margin-block-start: var(--s-2); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); max-width: var(--measure); }
.callout a { color: var(--c-sand); font-size: var(--fs-micro); display: inline-block; margin-block-start: var(--s-2); }

/* ---------- PRODUCT ----------------------------------------------------- */
.phases { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.phase { padding: var(--card-pad); border: var(--border); border-radius: var(--r-m); background: var(--c-white); display: grid; gap: var(--s-2); }
.phase__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.phase__when { font-size: var(--fs-micro); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-sand-ink); font-weight: var(--w-strong); }
.phase__name { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }
.phase p { font-size: var(--fs-sm); color: var(--c-ink-2); }
.phase[data-status="build now"] { border-color: var(--c-deep); box-shadow: var(--e-2); }

.feature-grid { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.feature {
  padding: var(--card-pad);
  border: var(--border);
  border-radius: var(--r-m);
  background: var(--c-surface);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
.feature:hover { transform: translateY(var(--lift)); border-color: var(--c-line-strong); box-shadow: var(--e-2); }
.feature__icon { width: var(--s-8); height: var(--s-8); border-radius: 50%; display: grid; place-items: center; background: var(--c-paper-2); color: var(--c-deep); }
.feature__icon .ico { width: var(--icon-lg); height: var(--icon-lg); }
.feature h4 { font-size: var(--fs-sm); letter-spacing: var(--tr-snug); text-transform: none; color: var(--c-ink); }
.feature p { font-size: var(--fs-xs); color: var(--c-ink-2); }
.feature__tag { font-size: var(--fs-micro); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-teal-ink); }

/* ---------- LEGAL ------------------------------------------------------- */
.money-band { display: grid; gap: 0; margin-block-start: var(--s-6); border-block: var(--border-strong); }
.money-item { padding: var(--s-4) 0; border-block-start: var(--border-soft); }
.money-item:first-child { border-block-start: 0; }
.money-item b { display: block; font-size: var(--fs-num-sm); letter-spacing: var(--tr-tight); color: var(--c-deep); font-variant-numeric: tabular-nums; line-height: 1.1; }
.money-item span { display: block; margin-block-start: var(--s-1); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); }
.money-item p { margin-block-start: var(--s-1); font-size: var(--fs-xs); color: var(--c-ink-2); }

.legal-grid { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.legal-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--card-pad);
  border: var(--border);
  border-radius: var(--r-s);
  background: var(--c-white);
  align-items: start;
}
.legal-step__n { font-size: var(--fs-xs); letter-spacing: var(--tr-wide); color: var(--c-sand-ink); font-variant-numeric: tabular-nums; padding-block-start: 0.15em; }
.legal-step h3 { font-size: var(--fs-h4); letter-spacing: var(--tr-snug); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.legal-step p { margin-block-start: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-2); }
.legal-step__foot { margin-block-start: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-micro); color: var(--c-ink-3); }
.legal-step__fee { font-size: var(--fs-xs); font-weight: var(--w-strong); color: var(--c-deep); font-variant-numeric: tabular-nums; background: var(--c-paper-2); border-radius: var(--r-pill); padding: var(--s-1) var(--s-2); }

.notice {
  padding: var(--s-4);
  border-inline-start: var(--hair-2) solid var(--c-warn);
  background: var(--c-warn-wash);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}
.notice--hard { margin-block: var(--s-6); border-inline-start-color: var(--c-err); background: var(--c-err-wash); }

.form-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-block-end: var(--border-soft);
  font-size: var(--fs-xs);
}
.form-chip:last-child { border-block-end: 0; }
.form-chip span { color: var(--c-ink-2); }
.form-chip code { font-size: var(--fs-micro); color: var(--c-ink-3); text-align: end; overflow-wrap: anywhere; }

/* ---------- APPENDIX ---------------------------------------------------- */
.appendix { background: var(--c-paper-2); }
.unverified-band {
  margin-block-start: var(--s-6);
  padding: var(--card-pad);
  border: var(--border);
  border-radius: var(--r-m);
  background: var(--c-white);
  display: grid;
  gap: var(--s-2);
}
.unverified-band__count { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.unverified-band__count b { font-size: var(--fs-num); letter-spacing: var(--tr-tight); color: var(--c-sand-ink); line-height: 1; }
.unverified-band__count span { font-size: var(--fs-sm); color: var(--c-ink-2); }
.unverified-list { display: grid; gap: var(--s-2); margin-block-start: var(--s-3); }
.unverified-list li { font-size: var(--fs-xs); color: var(--c-ink-2); padding-inline-start: var(--s-4); position: relative; }
.unverified-list li::before { content: "≈"; position: absolute; inset-inline-start: 0; color: var(--c-sand-ink); }
.unverified-list b { color: var(--c-ink); font-weight: var(--w-strong); }
.unverified-list em { font-style: normal; color: var(--c-ink-3); }

.sources { margin-block-start: var(--s-6); display: grid; gap: var(--s-3); }
.src-group { border: var(--border); border-radius: var(--r-s); background: var(--c-white); overflow: hidden; }
.src-group__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  min-height: var(--tap);
  background: transparent;
  border: 0;
  text-align: start;
}
.src-group__head h3 { font-size: var(--fs-sm); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.src-group__head .ico { transition: transform var(--dur-2); color: var(--c-ink-3); }
.src-group__head[aria-expanded="true"] .ico { transform: rotate(45deg); }
.src-group__body { max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease-expo); }
.src-group__list { display: grid; gap: 0; padding-inline: var(--s-4); padding-block-end: var(--s-3); }
.src-item { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-block-start: var(--border-soft); }
.src-item:first-child { border-block-start: 0; }
.src-item a { font-size: var(--fs-xs); text-decoration: none; color: var(--c-ink); }
.src-item a:hover { color: var(--c-deep); text-decoration: underline; }
.src-item span { font-size: var(--fs-micro); color: var(--c-ink-3); }
.src-item code { font-size: var(--fs-micro); color: var(--c-ink-3); overflow-wrap: anywhere; }

/* ---------- FOOTER ------------------------------------------------------ */
.site-foot { padding-block: var(--s-8) var(--s-6); border-block-start: var(--border); background: var(--c-paper); }
.site-foot__inner { display: grid; gap: var(--s-6); }
.site-foot img { width: 13rem; height: auto; opacity: 0.92; }
.site-foot__meta { display: grid; gap: var(--s-3); max-width: var(--measure); }
.site-foot .link-arrow { width: fit-content; }

/* ---------- SKELETONS / STATES ------------------------------------------ */
.skeleton {
  border-radius: var(--r-s);
  background: linear-gradient(100deg, var(--c-paper-3) 20%, var(--c-paper-2) 38%, var(--c-paper-3) 56%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton--chip { height: var(--s-7); margin-block: var(--s-2); }
.skeleton--stat { height: var(--s-10); }
.skeleton--chart { height: var(--chart-h); }
.skeleton--rows { height: var(--s-10); }
.skeleton--card { height: var(--s-10); }
.skeleton--donut { height: var(--donut); width: var(--donut); border-radius: 50%; }
.skeleton--heat { height: var(--s-10); }
.skeleton--chain { height: var(--s-8); }
.skeleton--hero { height: var(--s-10); }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.figure--error {
  border-color: var(--c-line-strong);
  background: var(--c-err-wash);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.figure--error h4 { font-size: var(--fs-sm); }
.figure--error p { font-size: var(--fs-xs); color: var(--c-ink-2); }

[hidden] { display: none !important; }

/* ---------- TOAST ------------------------------------------------------- */
.toast {
  position: fixed;
  inset-block-end: calc(var(--tap) + var(--s-6));
  inset-inline-start: 50%;
  transform: translate(-50%, var(--s-2));
  z-index: var(--z-toast);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  box-shadow: var(--e-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- REVEAL ------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(var(--s-3)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-expo); }
.js .reveal.is-in { opacity: 1; transform: translateY(0); }
.js .reveal[data-reveal="2"] { transition-delay: 70ms; }
.js .reveal[data-reveal="3"] { transition-delay: 140ms; }
.js .reveal[data-reveal="4"] { transition-delay: 210ms; }
.js .chapter .ch-title,
.js .chapter .lede,
.js .chapter .ch-head .eyebrow { opacity: 0; transform: translateY(var(--s-3)); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-expo); }
.js .chapter.is-in .ch-title,
.js .chapter.is-in .lede,
.js .chapter.is-in .ch-head .eyebrow { opacity: 1; transform: translateY(0); }
.js .chapter.is-in .lede { transition-delay: 80ms; }
.js .chapter.is-in .ch-head .eyebrow { transition-delay: 0ms; }

/* ---------- RESPONSIVE -------------------------------------------------- */
@media (min-width: 34em) {
  .hero__stats { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: var(--s-4); border-block-start: 0; border-inline-start: var(--border-soft); }
  .stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .stat:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .stat:nth-child(n + 3) { border-block-start: var(--border-soft); }
  .money-band { grid-template-columns: repeat(2, 1fr); }
  .money-item { padding: var(--s-4); border-block-start: 0; border-inline-start: var(--border-soft); }
  .money-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .money-item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .money-item:nth-child(n + 3) { border-block-start: var(--border-soft); }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .phases { grid-template-columns: repeat(3, 1fr); }
  .layer { grid-template-columns: auto 1fr; }
  .unverified-band { padding: var(--card-pad-lg); }
}

@media (min-width: 48em) {
  .head-meta { display: flex; }
  .hero { padding-block: var(--s-9); }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero-chip { grid-template-columns: 1fr; padding: var(--s-3) var(--s-3); border-block-start: 0; border-inline-start: var(--border-soft); }
  .hero-chip:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .stat-band { grid-template-columns: repeat(4, 1fr); }
  .stat { border-block-start: 0 !important; border-inline-start: var(--border-soft); padding: var(--s-4); }
  .stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .stat:nth-child(odd) { border-inline-start: var(--border-soft); padding-inline-start: var(--s-4); }
  .split { grid-template-columns: var(--col-visual) var(--col-copy); gap: var(--col-gap); margin-block-start: var(--s-8); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--thirds { grid-template-columns: repeat(3, 1fr); }
  .split--reverse > .figure { grid-column: 2; grid-row: 1; }
  .split--reverse > .prose { grid-column: 1; grid-row: 1; }
  .split--rank { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split--wide-visual { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .split--heatfoot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .legal-grid { grid-template-columns: repeat(3, 1fr); }
  .layers { grid-template-columns: repeat(3, 1fr); }
  .layer { grid-template-columns: 1fr; gap: var(--s-2); }
  .layer__idx { font-size: var(--fs-display); }
  .unlock__head,
  .unlock__row { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .unlock__head { padding-block: var(--s-2); }
  .money-band { grid-template-columns: repeat(4, 1fr); }
  .money-item:nth-child(odd) { border-inline-start: var(--border-soft); padding-inline-start: var(--s-4); }
  .money-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .site-foot__inner { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .ch-title { max-width: 24ch; }
  .hero__art {
    inset-block-start: 42%;
    inset-inline-end: calc(var(--s-9) + var(--s-4));
  }
}

@media (min-width: 64em) {
  .rail {
    inset-inline: auto;
    inset-block: 50% auto;
    inset-inline-end: var(--s-3);
    transform: translateY(-50%);
    flex-direction: column;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    padding: 0;
    width: auto;
  }
  .rail__list { flex-direction: column; gap: 0; }
  .rail__link { width: var(--tap); justify-items: end; position: relative; }
  .rail__label {
    position: absolute;
    inset-inline-end: calc(100% - var(--s-2));
    inset-block-start: 50%;
    transform: translateY(-50%) translateX(var(--s-2));
    width: auto; height: auto;
    clip-path: none;
    overflow: visible;
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-wide);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
    white-space: nowrap;
  }
  /* Only on hover/focus. The current chapter used to hold its label open
     permanently, which parked a wide chip over the right edge of the content
     column at mid-desktop viewports. The ringed current dot carries the
     "you are here" signal; the text stays in the DOM for assistive tech. */
  .rail__link:hover .rail__label,
  .rail__link:focus-visible .rail__label { opacity: 1; transform: translateY(-50%) translateX(0); }
  body { padding-bottom: 0; }
  .toast { inset-block-end: var(--s-6); }
  .hero__stats { max-width: 44rem; }
  .hero__inner { padding-inline-end: var(--s-8); }
  .chart-h-lg { --chart-h: 15rem; }
  .figure { padding: var(--card-pad-lg); }
  .figure--table { padding: 0; }
  .figure--heat { padding: var(--s-5) var(--s-5) var(--s-4); }
  .deep__btn { grid-template-columns: 1fr auto auto; grid-template-areas: "label meta icon"; }
  .deep__meta { text-align: end; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .callout { grid-template-columns: 10rem 1fr; padding: var(--s-7); }
  .steps { padding-inline-start: var(--s-6); border-inline-start: var(--hair) solid rgba(255, 255, 255, 0.16); }
  .step { border-start-start-radius: 0; }
}

@media (min-width: 80em) {
  .hero__title { max-width: 14ch; }
  .unlock__head,
  .unlock__row { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

/* Dark theme surface corrections */
[data-theme="dark"] .figure { background: var(--c-surface); }
[data-theme="dark"] .tailwind,
[data-theme="dark"] .layer,
[data-theme="dark"] .phase,
[data-theme="dark"] .legal-step,
[data-theme="dark"] .proof,
[data-theme="dark"] .src-group,
[data-theme="dark"] .unverified-band,
[data-theme="dark"] .chain__node { background: var(--c-white); }
[data-theme="dark"] .heat tbody th { background: var(--c-paper); }
[data-theme="dark"] .site-head { background: color-mix(in srgb, var(--c-paper) 86%, transparent); }
[data-theme="dark"] .rail { background: var(--c-paper); }
[data-theme="dark"] .hero__title .accent { color: var(--c-teal); }

/* ==========================================================================
   RENDER-SUPPORT COMPONENTS
   Styles for markup produced by js/charts.js and js/main.js. Composed from
   tokens only — no raw physical units.
   ========================================================================== */

/* Visually hidden, still read aloud. */
.vh {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Single-column stat band (used inside narrow split columns). */
.stat-band--solo { grid-template-columns: 1fr !important; }
.stat-band--solo .stat {
  border-block-start: var(--border-soft) !important;
  border-inline-start: 0 !important;
  padding: var(--s-4) 0 !important;
}
.stat-band--solo .stat:first-child { border-block-start: 0 !important; padding-block-start: 0 !important; }

.legend i.is-teal { background: var(--c-teal); }
.bar--peak .bar__fill { background: linear-gradient(180deg, var(--c-teal), var(--c-deep)); }

/* Full-bleed figures that need their own inner padding. */
.figure-pad { padding: var(--card-pad); }
@media (min-width: 64em) { .figure-pad { padding: var(--card-pad-lg); } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.donut__title {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-align: center;
}

/* ---------- REGION CARDS -------------------------------------------------- */
.region-grid { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }
.region {
  padding: var(--card-pad);
  border: var(--border);
  border-radius: var(--r-m);
  background: var(--c-white);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.region__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.region__name { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }
.region__season {
  margin-inline-start: auto;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-teal-ink);
  font-weight: var(--w-strong);
}
.region__meta { font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-sand-ink); }
.region__why { font-size: var(--fs-xs); color: var(--c-ink-2); }
.region__places { font-size: var(--fs-micro); color: var(--c-ink-3); letter-spacing: var(--tr-snug); }
.exp-list {
  display: grid;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: var(--border-soft);
}
.exp b { display: block; font-size: var(--fs-xs); color: var(--c-ink); }
.exp span { font-size: var(--fs-micro); color: var(--c-ink-3); line-height: 1.45; }

/* ---------- RANK LIST ----------------------------------------------------- */
.rank-list { display: grid; border-block-start: var(--border); }
.rank {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-3);
  align-items: start;
  padding-block: var(--s-2);
  border-block-end: var(--border-soft);
}
.rank__n { font-size: var(--fs-micro); color: var(--c-sand-ink); font-variant-numeric: tabular-nums; padding-block-start: 0.2em; }
.rank b { display: block; font-size: var(--fs-xs); color: var(--c-ink); letter-spacing: var(--tr-snug); }
.rank p { font-size: var(--fs-micro); color: var(--c-ink-3); line-height: 1.45; }
.rank .badge { align-self: start; }

/* ---------- TYPOLOGY / FESTIVALS / GAPS / ADJACENT ----------------------- */
.typology { display: grid; gap: var(--s-3); }
.typo {
  padding: var(--s-3) var(--s-4);
  border: var(--border);
  border-radius: var(--r-s);
  background: var(--c-white);
}
.typo b { font-size: var(--fs-xs); }
.typo span {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-teal-ink);
}
.typo p { margin-block-start: var(--s-2); font-size: var(--fs-micro); color: var(--c-ink-2); }
.typo em { font-style: normal; color: var(--c-ink); font-weight: var(--w-strong); }

.festivals { display: grid; border-block-start: var(--border); }
.festival {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  padding-block: var(--s-2);
  border-block-end: var(--border-soft);
}
.festival > span {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-sand-ink);
}
.festival b { display: block; font-size: var(--fs-xs); color: var(--c-ink); }
.festival div > span { font-size: var(--fs-micro); color: var(--c-ink-3); }

.gap-grid { display: grid; gap: var(--s-3); }
.gap-card {
  padding: var(--s-3) var(--s-4);
  border: var(--border);
  border-inline-start: var(--hair-2) solid var(--c-sand);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--c-white);
}
.gap-card b { font-size: var(--fs-sm); letter-spacing: var(--tr-snug); }
.gap-card__anchor {
  display: inline-block;
  margin-inline-start: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--c-deep);
  background: var(--c-paper-2);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
  font-variant-numeric: tabular-nums;
}
.gap-card p { margin-block-start: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-2); }

.adjacent { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.adjacent > span {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--border);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
}
.adjacent b { color: var(--c-deep); }

.rules { display: grid; gap: var(--s-2); counter-reset: rule; }
.rules li {
  counter-increment: rule;
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3em;
  font-size: var(--fs-micro);
  color: var(--c-sand-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- LEGAL PRIORITY LISTS ----------------------------------------- */
.priority { display: grid; gap: var(--s-5); padding: var(--card-pad); }
@media (min-width: 34em) { .priority { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (min-width: 48em) { .priority { grid-template-columns: 1fr; } }
@media (min-width: 64em) { .priority { grid-template-columns: 1fr 1fr; } }
.priority h4 {
  margin-block-end: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.priority__col:last-child h4 { color: var(--c-sand-ink); }

/* ---------- UNLOCK MARK DASH -------------------------------------------- */
.unlock__dash { font-size: var(--fs-xs); line-height: 1; }

/* ---------- RESPONSIVE SUPPORT ------------------------------------------ */
@media (min-width: 34em) {
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .gap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .region-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

/* ---------- SMALL-VIEWPORT CORRECTIONS ---------------------------------- */
/* Below 48em the headline owns the full column, so the brand sweep retreats
   into a watermark rather than competing with the type. The vertical rhythm
   also tightens deliberately: the cover has to finish above the fixed rail. */
@media (max-width: 47.9375em) {
  .hero {
    padding-block: var(--s-6) var(--s-7);
  }
  .hero__art {
    /* A watermark clipped on two edges reads as a stain, not a brand mark.
       At cover width the header already carries the logo, so the fragment
       is removed rather than shrunk. */
    display: none;
  }
  .hero__lede { margin-block-start: var(--s-5); }
  .hero__stats { margin-block-start: var(--s-6); }
  .hero__actions { margin-block-start: var(--s-5); }
  .hero__foot { margin-block-start: var(--s-5); }
  /* Wrapped onto its own line, a right-aligned cost window detaches from the
     movement it describes. Left-align it with the movement body instead. */
  .movement__window { margin-inline-start: 0; }
  .heat { min-width: var(--heat-min-sm); }
  .heat thead th:first-child { width: var(--heat-rowhead-sm); }
}
/* The dot column needs twelve tap-sized targets side by side; a narrow bar
   cannot hold them. Below 64em the rail becomes a swipeable scroller instead
   of silently losing the first and last chapters off its edges. */
@media (max-width: 63.9375em) {
  .rail__list {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    max-width: 100%;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list > li { scroll-snap-align: center; }
  .rail__list::before,
  .rail__list::after {
    content: "";
    flex: 0 0 var(--s-4);
  }
  .rail__list::after { order: 1; }
  /* The cover is a standalone screen; the rail arrives with the first chapter. */
  .rail {
    transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  body.is-cover .rail {
    opacity: 0;
    visibility: hidden;
  }
}
/* Print — the deck is readable on paper */
@media print {
  .site-head, .rail, .progress, .toast, .deep__btn, .hero__actions, .step__actions { display: none !important; }
  body { background: var(--c-paper); color: var(--c-ink); padding-bottom: 0; }
  .chapter { break-inside: avoid; page-break-inside: avoid; }
  .deep__panel { max-height: none !important; }
  .deep__panel[hidden] { display: block !important; }
}