/* ============================================================
   Clean Mind — "The Lab Report"
   Paper, ink, hairlines, one mint accent. Zero radii, zero
   shadows, zero gradients. Type does the work.
   ============================================================ */

/* ---------------- Fonts (self-hosted) ---------------- */
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ---------------- Tokens ---------------- */
:root {
  --paper: #fafaf7;
  --paper-deep: #f1f0ea;
  --white: #ffffff;
  --ink: #141715;
  --ink-70: rgba(20, 23, 21, 0.72);
  --ink-55: rgba(20, 23, 21, 0.55);
  --ink-38: rgba(20, 23, 21, 0.38);
  --hair: rgba(20, 23, 21, 0.16);
  --hair-soft: rgba(20, 23, 21, 0.09);

  --mint-ink: #0a7f5f;          /* mint for text & rules on paper   */
  --mint-t: #8feacb;            /* block faces: top                 */
  --mint-e: #63d5ad;            /*              east                */
  --mint-s: #52c79f;            /*              south               */
  --amber-ink: #96660f;
  --amber-t: #f3dda9;
  --amber-e: #e3c78c;
  --amber-s: #d5b97c;
  --plain-t: #ffffff;
  --plain-e: #eceae2;
  --plain-s: #e1dfd5;

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pagew: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--mint-ink); color: var(--paper); }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.92em; }
img, svg { max-width: 100%; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }

.page { max-width: var(--pagew); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; top: -60px; left: var(--gutter); z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-size: 0.75rem; text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 0; }

/* micro label — the document's smallest voice */
.micro, .fig-id, .sec-title, .dl-rec, .stat-cap, .ledger-head {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.mint { color: var(--mint-ink); }

/* ---------------- Running head ---------------- */
.running-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.rh-inner {
  max-width: var(--pagew); margin-inline: auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px; height: 52px;
}
.rh-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em; font-size: 1.02rem;
  text-decoration: none;
}
.rh-brand img { width: 24px; height: 24px; display: block; }
.rh-nav { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.rh-nav::-webkit-scrollbar { display: none; }
.rh-nav a {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-55); white-space: nowrap;
  padding: 4px 0;
}
.rh-nav a:hover { color: var(--ink); }
.rh-ver { font-size: 0.72rem; color: var(--mint-ink); letter-spacing: 0.08em; }

/* ---------------- Masthead ---------------- */
.masthead { border-bottom: 1px solid var(--hair); }
.meta-row {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-55);
}
.meta-row span:first-child { color: var(--ink); font-weight: 600; }
.meta-row span:not(:last-child)::after { content: " ·"; color: var(--ink-38); font-weight: 400; }

.mast-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 84px); align-items: center;
  padding-block: clamp(44px, 7vh, 92px) clamp(40px, 6vh, 76px);
}
.poster {
  font-size: clamp(3.1rem, 7.6vw, 6.1rem);
  line-height: 0.97; letter-spacing: -0.035em; font-weight: 700;
  text-wrap: balance;
}
.poster em, .poster-2 em { font-style: normal; color: var(--mint-ink); }

.abstract {
  margin-top: clamp(22px, 3vh, 36px);
  font-size: clamp(1.02rem, 1.35vw, 1.08rem); line-height: 1.55;
  color: var(--ink-70); max-width: 33em;
}
.abstract-tag { color: var(--ink-38); font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; }
.abstract code { color: var(--ink); }

.cta-strip {
  margin-top: clamp(26px, 4vh, 44px);
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
}
.cta-strip .cmd-alt { margin-top: 0; }
.btn-dl {
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 15px 28px;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn-dl:hover { background: var(--mint-ink); border-color: var(--mint-ink); }

.cmd {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--ink);
  padding: 13px 15px;
  font-size: 0.88rem;
  background: var(--white);
  overflow-x: auto;
}
.cmd-prompt { color: var(--mint-ink); font-weight: 700; flex: none; }
.cmd code { white-space: nowrap; font-size: inherit; }
.cmd code.two-line { white-space: pre; line-height: 1.75; }
.copy {
  margin-left: auto; flex: none;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  padding: 5px 11px; cursor: pointer;
  font-family: var(--mono);
  transition: background 0.15s, color 0.15s;
}
.copy:hover { background: var(--ink); color: var(--paper); }
.copy.copied { background: var(--mint-ink); border-color: var(--mint-ink); color: var(--paper); }
.cmd-alt {
  display: inline-block; margin-top: 12px;
  font-size: 0.78rem; color: var(--ink-55);
  text-decoration: underline; text-underline-offset: 3px;
}
.cmd-alt:hover { color: var(--ink); }

/* ---------------- The axonometric figure (SVG) ---------------- */
.axo { display: block; width: 100%; height: auto; }
.axo .ground { fill: var(--paper-deep); stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axo .blk polygon { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.axo .t-plain .f-t { fill: var(--plain-t); }  .axo .t-plain .f-e { fill: var(--plain-e); }  .axo .t-plain .f-s { fill: var(--plain-s); }
.axo .t-safe  .f-t { fill: var(--mint-t); }   .axo .t-safe  .f-e { fill: var(--mint-e); }   .axo .t-safe  .f-s { fill: var(--mint-s); }
.axo .t-review .f-t { fill: var(--amber-t); } .axo .t-review .f-e { fill: var(--amber-e); } .axo .t-review .f-s { fill: var(--amber-s); }
.axo .t-protected .f-t { fill: var(--plain-t); } .axo .t-protected .f-e { fill: var(--plain-e); } .axo .t-protected .f-s { fill: var(--plain-s); }
.axo .f-hatch { fill: url(#hatch); stroke: none; }
.hatch-line { stroke: var(--ink); stroke-width: 1; opacity: 0.42; }
.axo .lbl     { font: 600 13px var(--mono); fill: var(--ink); text-anchor: middle; }
.axo .lbl-mb  { font: 400 11px var(--mono); fill: var(--ink-70); text-anchor: middle; }
.axo .lbl-cmd { font: 400 11px var(--mono); fill: var(--mint-ink); text-anchor: middle; }

/* masthead intro: blocks rise off the page grid */
html.js .mast-fig .blk { opacity: 0; transform: translateY(26px); animation: blk-rise 0.8s var(--ease) forwards; }
html.js .mast-fig .blk:nth-child(3)  { animation-delay: 0.05s; }
html.js .mast-fig .blk:nth-child(4)  { animation-delay: 0.13s; }
html.js .mast-fig .blk:nth-child(5)  { animation-delay: 0.21s; }
html.js .mast-fig .blk:nth-child(6)  { animation-delay: 0.28s; }
html.js .mast-fig .blk:nth-child(7)  { animation-delay: 0.34s; }
html.js .mast-fig .blk:nth-child(8)  { animation-delay: 0.40s; }
html.js .mast-fig .blk:nth-child(9)  { animation-delay: 0.45s; }
html.js .mast-fig .blk:nth-child(10) { animation-delay: 0.50s; }
html.js .mast-fig .blk:nth-child(11) { animation-delay: 0.54s; }
html.js .mast-fig .blk:nth-child(12) { animation-delay: 0.58s; }
html.js .mast-fig .axo-labels { opacity: 0; animation: lbl-in 0.6s ease 0.9s forwards; }
@keyframes blk-rise { to { opacity: 1; transform: none; } }
@keyframes lbl-in { to { opacity: 1; } }

.mast-fig figcaption {
  margin-top: 16px; padding-top: 11px;
  border-top: 1px solid var(--hair);
  font-size: 0.75rem; line-height: 1.8; color: var(--ink-55);
}
.fig-id { color: var(--ink); font-weight: 600; }
.mast-fig .path, #file-counter { color: var(--ink); }
.key-safe { color: var(--mint-ink); }
.key-prot { color: var(--ink-38); }

/* ---------------- Section scaffolding ---------------- */
.sec { margin-top: clamp(84px, 13vh, 150px); }
.sec-head {
  display: flex; align-items: baseline; gap: 22px;
  border-top: 2px solid var(--ink);
  padding-top: 14px; padding-bottom: 10px;
}
.sec-no { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600; }
.sec-title { font-weight: 500; color: var(--ink-70); }
.sec-side { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-38); }
.sec-lede {
  margin-top: clamp(28px, 4vh, 44px);
  font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.5;
  color: var(--ink-70); max-width: 38em;
}
.sec-lede + .tier-table, .sec-lede + .dl-table { margin-top: clamp(28px, 4vh, 48px); }

/* poster-scale statements inside sections */
.poster-2 {
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 700;
  text-wrap: balance;
}
#privacy .poster-2 { margin-top: clamp(30px, 5vh, 56px); }

/* ---------------- §01 problem ---------------- */
.prose-grid {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(36px, 5vw, 84px);
  padding-block: clamp(32px, 5vh, 60px) 0;
}
.editorial {
  font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.32;
  letter-spacing: -0.012em; font-weight: 500; max-width: 25em;
}
.editorial em { font-style: normal; color: var(--mint-ink); }
.editorial i { font-style: normal; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 5px; }
.margin-note { border-left: 1px solid var(--hair); padding-left: clamp(20px, 2.5vw, 36px); align-self: start; }
.stat-big {
  display: block; font-size: clamp(2.9rem, 4.6vw, 3.7rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--mint-ink);
}
.stat-big small { font-size: 0.42em; font-weight: 500; color: var(--ink-55); letter-spacing: 0; }
.stat-cap { display: block; margin-top: 14px; color: var(--ink-55); line-height: 1.7; }

/* ---------------- §02 the method (pinned figure) ---------------- */
.runway { height: 430vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.stage-grid {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 72px); align-items: center;
}
.steps { position: relative; min-height: 330px; }
.step {
  position: absolute; inset: 0 0 64px 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step h3 {
  margin-top: 14px;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.04;
  letter-spacing: -0.02em; font-weight: 700;
}
.step p:last-child { margin-top: 14px; font-size: 1.02rem; line-height: 1.6; color: var(--ink-70); max-width: 26em; }
.step-rail {
  position: absolute; left: 0; bottom: 0;
  display: flex; gap: 20px; list-style: none;
  border-top: 1px solid var(--hair); padding-top: 12px; width: 100%;
}
.step-rail li { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-38); transition: color 0.3s; }
.step-rail li.is-active { color: var(--ink); font-weight: 600; box-shadow: 0 -13px 0 0 var(--ink); }

.fig3d {
  position: relative;
  height: min(74vh, 660px);
  border: 1px solid var(--hair);
  background: var(--white);
  overflow: hidden;
}
#figure { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig-labels { position: absolute; inset: 0; pointer-events: none; }
.fig-lbl {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
  text-align: center; white-space: nowrap;
  padding-bottom: 16px; opacity: 0; transition: opacity 0.4s;
}
.fig-lbl::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 13px; background: var(--ink-55);
}
.fig-lbl b { font-weight: 600; display: block; }
.fig-lbl .mb { color: var(--ink-55); }
.fig-lbl .regen { color: var(--mint-ink); display: block; }
.fig-lbl.on { opacity: 1; }
.fig-counter {
  position: absolute; top: 13px; right: 15px;
  font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--mint-ink); font-weight: 600;
  border: 1px solid var(--mint-ink);
  padding: 6px 11px; background: var(--paper);
}
.fig-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vh, 44px); }
.fig-fallback .axo { max-height: 100%; }
/* fallback states: before CLASSIFY, tiers render plain; after CLEAN, safe blocks fade */
.fig-fallback.st-0 .t-safe .f-t, .fig-fallback.st-1 .t-safe .f-t,
.fig-fallback.st-0 .t-review .f-t, .fig-fallback.st-1 .t-review .f-t { fill: var(--plain-t); }
.fig-fallback.st-0 .t-safe .f-e, .fig-fallback.st-1 .t-safe .f-e,
.fig-fallback.st-0 .t-review .f-e, .fig-fallback.st-1 .t-review .f-e { fill: var(--plain-e); }
.fig-fallback.st-0 .t-safe .f-s, .fig-fallback.st-1 .t-safe .f-s,
.fig-fallback.st-0 .t-review .f-s, .fig-fallback.st-1 .t-review .f-s { fill: var(--plain-s); }
.fig-fallback.st-0 .axo-labels { opacity: 0; }
.fig-fallback.st-3 .t-safe { opacity: 0.13; }

/* ---------------- §03 trust table ---------------- */
.tier-table { border-top: 1px solid var(--hair); }
.tier-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 250px;
  gap: clamp(20px, 3vw, 44px); align-items: start;
  padding: clamp(26px, 4vh, 40px) 0 clamp(26px, 4vh, 40px) 29px;
  border-bottom: 1px solid var(--hair);
}
.tier-row.t1 { border-left: 3px solid var(--mint-ink); padding-left: 26px; }
.tier-row.t3 { background: repeating-linear-gradient(45deg, transparent 0 7px, var(--hair-soft) 7px 8px); }
.tier-no { font-size: 1.5rem; font-weight: 600; color: var(--ink-38); }
.t1 .tier-no { color: var(--mint-ink); }
.t2 .tier-no { color: var(--amber-ink); }
.tier-def h3 { font-size: clamp(1.2rem, 1.8vw, 1.44rem); letter-spacing: -0.015em; }
.tier-def p { margin-top: 8px; color: var(--ink-70); max-width: 44em; font-size: 0.98rem; }
.tier-act { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-55); padding-top: 8px; }
.t1 .tier-act { color: var(--mint-ink); }

/* ---------------- §04 privacy ---------------- */
.ledger { border: 1px solid var(--hair); margin-top: clamp(32px, 5vh, 52px); background: var(--white); }
.ledger-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 11px 20px; border-bottom: 1px solid var(--hair);
  color: var(--ink-38); font-weight: 500;
}
.ledger-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 13px 20px; border-bottom: 1px solid var(--hair-soft);
  font-size: 0.9rem;
}
.ledger-row .real { color: var(--ink-70); overflow-wrap: anywhere; }
.ledger-row .pseudo { color: var(--mint-ink); font-weight: 500; overflow-wrap: anywhere; }
.ledger-note { padding: 12px 20px; font-size: 0.78rem; color: var(--ink-55); background: var(--paper-deep); }
.ledger-note code { font-size: 1em; color: var(--ink); }

.privacy-rows {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 88px);
}
.p-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 0;
  padding: 26px 0; border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.p-no { font-size: 0.8rem; color: var(--mint-ink); font-weight: 600; }
.p-row h4 { font-size: 1.12rem; letter-spacing: -0.01em; }
.p-row p { grid-column: 2; color: var(--ink-70); font-size: 0.95rem; margin-top: 4px; }

/* ---------------- §05 plates ---------------- */
.plate { margin-top: clamp(36px, 5vh, 56px); }
.plate-wide { max-width: 820px; margin-inline: auto; }
.plate-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.plate-grid .plate { min-width: 0; }
.plate img, .plate video { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.plate figcaption {
  margin-top: 12px; font-size: 0.75rem; letter-spacing: 0.03em;
  color: var(--ink-55); line-height: 1.7;
}

/* ---------------- §06 positioning + ticker ---------------- */
.wedge { margin-top: clamp(32px, 6vh, 64px); max-width: 15em; }
.ticker {
  margin-top: clamp(44px, 7vh, 80px);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.ticker-track {
  display: flex; width: max-content;
  padding: 15px 0; white-space: nowrap;
  animation: tick 36s linear infinite;
}
.ticker-track span { font-size: 0.88rem; color: var(--ink-55); }
.ticker-track span::after { content: "·"; margin-inline: 26px; color: var(--ink-38); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------------- §07 downloads ---------------- */
.dl-table { border-top: 1px solid var(--hair); }
.dl-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 5vh, 48px) 0;
  border-bottom: 1px solid var(--hair);
}
.dl-os h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; }
.dl-os p { margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-38); line-height: 1.9; }
.dl-rec { color: var(--mint-ink); font-weight: 600; margin-bottom: 12px; }
.dl-main .cmd { max-width: 760px; }
.dl-alt { margin-top: 13px; font-size: 0.8rem; color: var(--ink-55); line-height: 2; }
.dl-note-line {
  margin-top: 6px; max-width: 58em;
  font-size: 0.85rem; line-height: 1.6; color: var(--ink-55);
}
.dl-note-line code { color: var(--ink); }
.dl-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.dl-alt a:hover { text-decoration-color: var(--mint-ink); color: var(--mint-ink); }
.dl-size { color: var(--ink-38); }
.dl-size:not(:empty)::before { content: "("; } .dl-size:not(:empty)::after { content: ")"; }
.dl-note { color: var(--ink-38); }
.dl-note code { font-size: 1em; }
.dl-foot { margin-top: 26px; font-size: 0.78rem; color: var(--ink-55); }
.dl-foot a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------- Colophon ---------------- */
.colophon { margin-top: clamp(90px, 14vh, 170px); border-top: 2px solid var(--ink); }
.closing {
  padding: clamp(28px, 7vh, 84px) 0 clamp(16px, 4vh, 48px);
  font-size: clamp(5rem, 17vw, 13.6rem);
}
.colo-grid {
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--hair);
  padding: 20px 0 34px;
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-55);
}
.colo-grid nav { display: flex; gap: 22px; }
.colo-grid a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--hair); }
.colo-grid a:hover { text-decoration-color: var(--mint-ink); }

/* ---------------- Reveals ---------------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .sec { margin-top: clamp(56px, 8vh, 96px); }
  .mast-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: clamp(32px, 5vh, 56px) clamp(28px, 4vh, 44px); }
  .mast-copy, .mast-fig, .dl-main, .dl-os, .steps, .fig3d { min-width: 0; }
  .mast-fig { max-width: 560px; margin-inline: auto; }
  .prose-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: clamp(24px, 4vh, 40px) 0; }
  .runway { height: 380vh; }
  .margin-note { border-left: 0; border-top: 1px solid var(--hair); padding: 22px 0 0; }
  /* Anchor the pinned §02 scene to its "§02 THE METHOD" heading: the heading
     sticks just under the running head, and the stage pins directly below it
     so the figure/steps scroll beneath the heading instead of the heading
     scrolling away and leaving the figure as the top of the scene. */
  #method .sec-head {
    position: sticky; top: 52px; z-index: 40;
    background: var(--paper);
  }
  .stage {
    top: 102px;
    height: calc(100vh - 102px);
  }
  /* Top-align the figure + copy + rail block just under the anchored heading:
     a small gap above the figure, more air between the figure and the copy. */
  .stage { align-items: start; }
  .stage-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 40px 24px;
  }
  .fig3d { order: -1; height: min(44vh, 420px); }
  /* Only the active step sits in normal flow, so the steps box hugs whichever
     step is showing and the 02a–02d rail tucks directly beneath its copy. The
     inactive steps overlay it (top-aligned, opacity cross-fade) without adding
     height. Self-sizing means no fixed height to clip on narrow phones. */
  .steps { display: block; position: relative; min-height: 0; }
  .step { position: absolute; inset: 0 0 auto 0; }
  .step.is-active { position: relative; inset: auto; }
  .step-rail { position: static; width: 100%; margin-top: 22px; }
  .step p:last-child { max-width: none; }
  .tier-row { grid-template-columns: 52px minmax(0, 1fr); }
  .tier-act { grid-column: 2; padding-top: 2px; }
  .privacy-rows { grid-template-columns: minmax(0, 1fr); }
  .dl-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rh-nav { gap: 16px; }
}
@media (max-width: 640px) {
  .rh-inner { gap: 16px; height: 50px; }
  .rh-nav { gap: 14px; }
  /* keep only Download + GitHub in the running head on phones */
  .rh-nav a:nth-child(1), .rh-nav a:nth-child(2), .rh-nav a:nth-child(3) { display: none; }
  .rh-ver { display: none; }
  .plate-grid { grid-template-columns: minmax(0, 1fr); }

  /* fig. 01 caption: two clean lines instead of a ragged run-on */
  .mast-fig .cap-a, .mast-fig .cap-b { display: block; }
  .mast-fig .cap-sep { display: none; }

  /* terminal commands wrap instead of clipping */
  .cmd code, .cmd code.two-line { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* masthead: tighter, edge-to-edge CTA, smaller figure */
  .poster { font-size: clamp(2.7rem, 12.5vw, 3.4rem); }
  .abstract { font-size: 1rem; margin-top: 18px; }
  .cta-strip { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 26px; }
  .btn-dl { justify-content: center; padding: 16px 24px; }
  .cta-strip .cmd-alt { text-align: center; }
  .mast-grid { gap: 30px; }
  .mast-fig { max-width: 440px; }
  .mast-fig figcaption { font-size: 0.7rem; }
  .meta-row { font-size: 0.64rem; gap: 8px 10px; padding: 12px 0; }

  /* sections: smaller headers, less indentation */
  .sec-head { gap: 14px; }
  .sec-side { display: none; }
  .sec-lede { margin-top: 22px; }

  /* §01: body-scale editorial + one compact stat row instead of the caps block */
  .editorial { font-size: 1.15rem; line-height: 1.55; }
  .margin-note { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; }
  .stat-big { font-size: 2rem; flex: none; }
  .stat-cap { margin-top: 0; text-transform: none; letter-spacing: 0.02em; font-size: 0.78rem; line-height: 1.55; }

  /* §02: figure a touch smaller on phones (steps box self-sizes above;
     the stage-grid gap is set in the max-width:980px block) */
  .fig3d { height: min(40vh, 420px); }

  /* §03: T-number shares the line with the tier name; no deep indent */
  .tier-row { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; padding: 22px 0 22px 12px; }
  .tier-row.t1 { padding-left: 9px; }
  .tier-no { font-size: 1rem; padding-top: 4px; }
  .tier-def h3 { font-size: 1.15rem; }
  .tier-act { grid-column: 2; padding-top: 4px; }

  /* §04: number + heading on one line, body text full-width */
  .p-row { grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; padding: 18px 0; }
  .p-row p { grid-column: 1 / -1; margin-top: 6px; }
  .poster-2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  #privacy .poster-2 { margin-top: 26px; }
  .privacy-rows { margin-top: 30px; }
  .ledger { margin-top: 26px; }
  .wedge { margin-top: 28px; }
  .ticker { margin-top: 36px; }
  .ticker-track { padding: 12px 0; }
  .dl-row { padding: 28px 0; }
  .dl-foot { margin-top: 20px; }
  .colophon { margin-top: 72px; }
  .closing { padding: 32px 0 20px; }
  .colo-grid { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0 26px; }
}
@media (max-width: 560px) {
  .cmd { font-size: 0.76rem; }
  .fig-lbl { font-size: 10px; }
  .ledger-head, .ledger-row { grid-template-columns: 1fr; gap: 4px; }
  .ledger-head span:last-child { display: none; }
  .ledger-row .pseudo::before { content: "→ "; color: var(--ink-38); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .mast-fig .blk { opacity: 1; transform: none; animation: none; }
  html.js .mast-fig .axo-labels { opacity: 1; animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .step { transition: none; }
  .ticker-track { animation: none; }
  .fig-lbl { transition: none; }
}