/* ── Resorcery landing prototype ─────────────────────────────── */

:root {
  --paper: #FAFAF8;
  --paper-2: #F3F2EC;
  --ink: #211F1C;
  --ink-70: rgba(33, 31, 28, 0.70);
  --ink-55: rgba(33, 31, 28, 0.55);
  --ink-35: rgba(33, 31, 28, 0.35);
  --ink-18: rgba(33, 31, 28, 0.18);
  --forest: #2D5A3D;
  --forest-tint: rgba(45, 90, 61, 0.055);
  --ochre: #A87B2D;
  --rust: #A4432D;
  --line: #DBD9D0;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Lenis drives wheel scrolling on fine-pointer devices; native smooth
   scrolling must yield to it or the two fight over every frame. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 380;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }

/* ── Nav ── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 40px;
  mix-blend-mode: multiply;
}
.nav__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 36px); align-items: baseline; }
.nav__links a {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-decoration: none;
  transition: color 0.25s;
}
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-18);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.nav__cta:hover { color: var(--forest); border-color: var(--forest); }

/* ── Pinned chapters ── */
.pin { position: relative; }
.pin .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin .stage svg {
  width: min(96vw, 150vh);
  height: 100%;
  display: block;
}

/* pin lengths (JS reads data-len, CSS sets height) */
#ch0 { height: 190vh; }
#ch1 { height: 340vh; }
#ch2 { height: 280vh; }
#chD { height: 440vh; }
#chR { height: 400vh; }
#ch3 { height: 420vh; }
#ch4 { height: 300vh; }
#ch5 { height: 540vh; }
#chI { height: 300vh; }
#chV { height: 360vh; }
#ch6 { height: 260vh; }

/* ── Hero ── */
.hero {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  top: 11vh;
  z-index: 5;
  width: min(640px, 54vw);
}
.hero__eyebrow {
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 22px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6.8vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: 22px;
  max-width: 520px; /* stays left of the plot drawing */
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 380;
  color: var(--ink-55);
  line-height: 1.55;
}
@media (max-width: 1160px) {
  .hero__sub { max-width: 440px; }
}

/* ── The compile card: the reader's plot, answered ── */
.card {
  margin-top: 26px;
  width: min(560px, 100%);
  border: 1px solid var(--ink);
  background: rgba(250, 250, 248, 0.94);
  font-family: var(--font-mono);
}
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.card__stamp { color: var(--forest); font-weight: 600; }
.card__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 9px;
  border-right: 1px solid var(--line);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.card__field:last-child { border-right: none; }
.card__in { display: flex; align-items: baseline; gap: 6px; }
.card__in input {
  width: 100%;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--ink-35);
  background: transparent;
  font: 500 20px/1.2 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 2px 0;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.card__in input::-webkit-outer-spin-button,
.card__in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card__in input:focus { border-bottom-color: var(--forest); }
.card__in em { font-style: normal; font-size: 10px; color: var(--ink-35); letter-spacing: 0.08em; }
.card__presets {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.card__preset {
  font: 450 9px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 9px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.card__preset:hover, .card__preset:focus-visible { color: var(--forest); border-color: var(--forest); outline: none; }
.card__out {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transition: opacity 0.3s;
}
.card__out[data-state="off"] { opacity: 0.45; }
.card__out > div {
  padding: 10px 14px 9px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.card__out > div:last-child { border-right: none; }
.card__out dt {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.card__out dd { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.card__out b {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__out b.is-ochre { color: var(--ochre); }
.card__out span { font-size: 8.5px; line-height: 1.35; color: var(--ink-55); letter-spacing: 0.02em; }
.card__cite {
  padding: 8px 14px 0;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--ink-55);
}
.card__basis {
  padding: 3px 14px 9px;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--ink-35);
}
.card__basis #ro-ms { color: var(--forest); }

/* ── The boot log: what the compiler did, typed ── */
.boot {
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  bottom: 150px;
  z-index: 5;
  list-style: none;
  width: min(460px, 46vw);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  line-height: 1.9;
}
.boot li { display: flex; gap: 14px; white-space: nowrap; overflow: hidden; }
.boot__n { color: var(--ink-35); }
.boot__t::after { content: ""; }

/* ── The title block, bottom-right, as on a sheet ── */
.tblock {
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  bottom: 64px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, auto);
  border: 1px solid var(--ink);
  background: rgba(250, 250, 248, 0.94);
  opacity: 0;
}
.tblock > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 14px 6px;
  border-right: 1px solid var(--line);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tblock > div:last-child { border-right: none; }
.tblock span { color: var(--ink-35); font-size: 7.5px; }
.tblock b { font-weight: 600; color: var(--ink); }
.scrollcue {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: 72px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-35);
}

/* ── Captions inside stages ── */
.cap {
  position: absolute;
  z-index: 5;
  opacity: 0;
  max-width: 460px;
}
#cap-options, #cap-in { max-width: 620px; }
#cap-draft2 { max-width: 640px; }
#cap-docs, #cap-redraw, #cap-design { max-width: 460px; }
#cap-report, #cap-link { max-width: 760px; }
.cap--bl { left: clamp(24px, 6vw, 96px); bottom: 96px; }
.cap--tl { left: clamp(24px, 6vw, 96px); top: 14vh; }
.cap--tr { right: clamp(24px, 6vw, 96px); top: 14vh; text-align: right; max-width: 420px; }
.cap--tr .cap__sub { margin-left: auto; }
.cap--hint { top: calc(14vh + 96px); }
.cap--br { right: clamp(24px, 6vw, 96px); bottom: 110px; text-align: right; }
#ch6 .cap--br { right: clamp(24px, 6vw, 96px); bottom: auto; top: 20vh; }
.cap--bc { left: 50%; transform: translateX(-50%); bottom: 88px; text-align: center; }
.cap--words { max-width: 520px; }
.cap__kicker {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: 12px;
}
.cap__words {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.55vw, 1.42rem);
  line-height: 1.4;
  color: var(--ink);
  min-height: 3.2em;
}
.cap__words::after { content: "▍"; color: var(--forest); opacity: 0.7; }
.cap__line {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.25;
}
.cap__line--em { color: var(--forest); }
.cap__line.mono-cap {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 450;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cap__sub {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--ink-55);
  max-width: 400px;
}

.ticker {
  position: absolute;
  top: 15vh;
  right: clamp(24px, 6vw, 96px);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-35);
  opacity: 0;
}

/* ── Breathers ── */
.breather {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 12vh clamp(24px, 8vw, 128px);
}
.breather__inner { max-width: 860px; }
.breather h2 {
  font-family: var(--font-display);
  font-weight: 390;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.breather p {
  margin-top: 26px;
  max-width: 560px;
  font-size: 1.05rem;
  color: var(--ink-70);
}

.eyebrow {
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: 22px;
}
.breather--act {
  min-height: 92vh;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.breather--act h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02; }
.breather--act p { max-width: 640px; font-size: 1.15rem; }
.scrub { text-wrap: pretty; }
.scrub .word { display: inline-block; }

/* ── Close ── */
.close {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh 24px 16vh;
}
.close__inner { max-width: 720px; }
.close h2 {
  font-family: var(--font-display);
  font-weight: 390;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.12;
}
.close p {
  margin: 30px auto 0;
  max-width: 520px;
  font-size: 1.05rem;
  color: var(--ink-70);
}
.button {
  display: inline-block;
  margin-top: 44px;
  padding: 16px 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  border: 1px solid var(--forest);
  transition: background 0.3s, color 0.3s;
}
.button:hover { background: var(--forest); color: var(--paper); }
.close__note {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.form {
  margin: 44px auto 0;
  max-width: 560px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field > span {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.form__field input, .form__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ink-35);
  background: transparent;
  font: 400 1rem/1.5 var(--font-body);
  color: var(--ink);
  padding: 6px 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
}
.form__field textarea { resize: vertical; min-height: 70px; }
.form__field input:focus, .form__field textarea:focus { border-bottom-color: var(--forest); }
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--ink-35); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.form .button { margin-top: 0; cursor: pointer; background: transparent; }
.form .button:disabled { opacity: 0.5; cursor: wait; }
.form__status { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-55); min-height: 1.4em; }
.form__status[data-kind="ok"] { color: var(--forest); }
.form__status[data-kind="err"] { color: var(--rust); }
.form__status[data-kind="warn"] { color: var(--ochre); }
.form.is-sent .form__row, .form.is-sent .form__field, .form.is-sent .form__foot { display: none; }
.form.is-sent .form__status { font-family: var(--font-display); font-size: 1.3rem; text-align: center; color: var(--forest); letter-spacing: 0; }

/* ── Registers: the record, the index, the practice ── */
.register {
  border-top: 1px solid var(--line);
  padding: 96px clamp(24px, 8vw, 128px) 96px;
}
.register__inner { max-width: 1080px; }
.register h2 {
  font-family: var(--font-display);
  font-weight: 390;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.register__sub {
  margin: 48px 0 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.register__foot {
  margin-top: 22px;
  max-width: 820px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-55);
}
.prov {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.prov--measured { color: var(--forest); border-color: rgba(45, 90, 61, 0.35); }
.prov--declared { color: var(--ink-70); }
.prov--assumed { color: var(--ochre); border-color: rgba(168, 123, 45, 0.4); }
.prov--drafted { color: var(--ink-70); border-style: dashed; }
.prov--researched { color: var(--ink-70); }

/* the facts strip */
.rec { margin-top: 40px; border-top: 1px solid var(--ink); }
.rec__row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.rec__k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.rec__v { font-size: 0.95rem; color: var(--ink); line-height: 1.5; }

/* the working */
.scrollx { overflow-x: auto; border-top: 1px solid var(--ink); }
.reg { width: 100%; min-width: 860px; border-collapse: collapse; font-family: var(--font-mono); }
.reg th {
  text-align: left;
  font-weight: 450;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-35);
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
}
.reg td {
  vertical-align: top;
  font-size: 10.5px;
  line-height: 1.5;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}
.reg td:first-child { color: var(--ink-35); width: 36px; }
.reg .reg__v { color: var(--ink); font-weight: 500; white-space: nowrap; }
.reg .reg__c { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-55); }

/* the index — built · next */
.built { margin-top: 32px; border-top: 1px solid var(--ink); }
.built__head, .built__row {
  display: grid;
  grid-template-columns: 40px 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}
.built__head {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-35);
}
.built__row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.built__row > span { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-35); padding-top: 3px; }
.built__row p { font-size: 0.97rem; line-height: 1.55; color: var(--ink-55); }
.built__row p:last-child { color: var(--ink-35); }
.built__row strong { font-weight: 500; color: var(--ink); }

/* the practice */
.people__list { margin-top: 36px; border-top: 1px solid var(--ink); }
.people__list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.people__list dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); padding-top: 3px; }
.people__list dd { font-size: 1rem; color: var(--ink-70); max-width: 620px; }
.people__list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-35); }
.people__list a:hover { color: var(--forest); border-color: var(--forest); }

/* ── Footer ── */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding: 40px clamp(24px, 6vw, 96px) 100px;
  border-top: 1px solid var(--line);
}
.footer__mark { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.footer__line { font-size: 0.95rem; color: var(--ink-55); }
.footer__meta { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-35); }

/* ── The rail ── */
.rail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.rail__progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 1.5px;
  width: 0;
  background: var(--forest);
}
.rail__stages {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 56px);
  list-style: none;
  padding: 13px 16px;
}
.rail__stages li {
  font-size: 9.5px;
  font-weight: 450;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-35);
  transition: color 0.4s;
}
.rail__stages li.active { color: var(--ink); }
.rail--pulse .rail__stages li { color: var(--forest); }

/* ── SVG shared classes ── */
.s-ink { stroke: var(--ink); fill: none; }
.s-ghost { stroke: var(--ink-35); fill: none; }
.s-forest { stroke: var(--forest); fill: none; }
.s-ochre { stroke: var(--ochre); fill: none; }
.t-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 450;
  fill: var(--ink-70);
  letter-spacing: 0.06em;
}
.t-mono--dim { fill: var(--ink-55); font-size: 10.5px; }
.t-mono--callout { fill: var(--ink); font-size: 11.5px; letter-spacing: 0.1em; }
.t-mono--ochre { fill: var(--ochre); }
.t-mono--forest { fill: var(--forest); }
.t-mono--ledger { font-size: 12px; letter-spacing: 0.12em; fill: var(--ink); }
.s-rust { stroke: var(--rust); fill: none; }
.t-mono--rust { fill: var(--rust); }
.is-rust-stroke { stroke: var(--rust); }
svg.is-dragging, svg.is-dragging * { cursor: ns-resize !important; }

/* ── Headline lines (ink-in targets; JS hides them, so no-JS stays visible) ── */
.hl { display: inline-block; }

/* ── Margin notes: § annotations in the breathers ── */
.breather p { position: relative; }
.note {
  position: relative;
  border-bottom: 1px dashed rgba(168, 123, 45, 0.45);
  cursor: help;
}
.note::after {
  content: "§";
  font-family: var(--font-mono);
  font-size: 0.62em;
  color: var(--ochre);
  vertical-align: super;
  margin-left: 3px;
}
.note__aside {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -7px;
  z-index: 2;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: 0.08em;
  color: var(--ochre);
  background: rgba(250, 250, 248, 0.96);
  border: 1px solid rgba(168, 123, 45, 0.25);
  padding: 3px 8px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.note__aside::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 100%;
  width: 1px;
  height: 8px;
  background: rgba(168, 123, 45, 0.5);
}
.note:hover .note__aside,
.note:focus-visible .note__aside,
.note.open .note__aside {
  opacity: 1;
  transform: translateY(0);
}
/* wide screens: a true margin note — beside the paragraph, on the phrase's
   own line, covering nothing (the chip-above style remains for mobile) */
@media (min-width: 721px) {
  .note { position: static; } /* the paragraph becomes the anchor */
  .note__aside {
    bottom: auto;
    left: calc(100% + 28px);
    width: 230px;
    white-space: normal;
    line-height: 1.5;
    background: none;
    border: none;
    padding: 0;
  }
  .note__aside::after { display: none; }
}
.note:focus-visible { outline: none; }

/* ── The CAD crosshair ── */
.pin .stage { cursor: none; }
@media (pointer: coarse) { .pin .stage { cursor: auto; } }
.xhair {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.xhair.on { opacity: 1; }
.xhair__v {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(33, 31, 28, 0.15);
}
.xhair__h {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(33, 31, 28, 0.15);
}
.xhair__read {
  position: absolute;
  top: 0; left: 0;
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.1em;
  color: var(--ink-55);
  background: rgba(250, 250, 248, 0.88);
  border: 1px solid var(--line);
  padding: 3px 8px;
}

/* ── Operable rail ── */
.rail__stages li {
  position: relative;
  cursor: pointer;
  outline: none;
}
.rail__stages li::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 1px;
  height: 0;
  background: var(--forest);
  transition: height 0.22s;
}
.rail__stages li:hover,
.rail__stages li:focus-visible { color: var(--ink); }
.rail__stages li:hover::before,
.rail__stages li:focus-visible::before { height: 10px; }

/* ── Paper grain ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
}

/* dev ?og=1 — the hero alone, for the share image */
.ogmode .card, .ogmode .boot, .ogmode .tblock, .ogmode .scrollcue, .ogmode .nav__links, .ogmode .rail, .ogmode .xhair { display: none !important; }
.ogmode .hero { top: 15vh; width: min(640px, 56vw); }
.ogmode .hero__title { font-size: 6.8vw; }
.ogmode .hero__sub { max-width: 430px; }

/* dev ?only=copy — stack the words tight */
.copymode .breather { min-height: 0; padding: 60px clamp(24px, 8vw, 128px); }
.copymode .close { min-height: 0; padding: 60px 24px; }
.copymode .register { padding: 48px clamp(24px, 8vw, 128px); }

/* ── Reduced motion: unpin, show final states ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin { height: auto !important; }
  .pin .stage { position: static; height: auto; min-height: 88vh; }
  .cap, .ticker, .tblock { opacity: 1 !important; }
  .cap__words::after { content: none; }
}

/* ── Small screens: film simplifies ── */
@media (max-width: 720px) {
  .nav { padding: 16px 20px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .cap--bl, .cap--tl { left: 20px; right: 20px; max-width: none; }
  .cap--tr { right: 20px; left: 20px; max-width: none; text-align: left; }
  .cap--tr .cap__sub { margin-left: 0; }
  .cap--br { right: 20px; }
  .cap--tl, .cap--tr { top: 10vh; }
  .cap--hint { top: calc(10vh + 84px); }
  .cap--bl { bottom: 72px; }
  .cap__line { font-size: 1.15rem; }
  .cap__sub { font-size: 0.85rem; margin-top: 8px; }
  .cap__words { font-size: 1rem; }
  .pin .stage { align-items: flex-start; }
  /* phones see the middle 2/3 of each drawing, larger; ch5 keeps its plan (left) */
  .pin .stage svg { width: 150vw; max-width: none; margin: 22vh 0 0 -25vw; height: auto; }
  #ch5 .stage svg, #chD .stage svg { margin-left: -6vw; }
  #chV .stage svg { margin-left: -12vw; }
  #ch0 .stage { align-items: flex-start; }
  #ch0 { height: auto; min-height: 100vh; }
  #ch0 .stage { position: relative; height: auto; min-height: 100vh; padding: 88px 20px 120px; display: block; }
  #svg0 { position: absolute; right: -30vw; top: 8vh; width: 120vw; opacity: 0.35; z-index: 0; margin: 0; }
  .hero { position: relative; left: 0; top: 0; width: 100%; }
  .hero__title { font-size: 2.8rem; }
  .hero__sub { font-size: 0.98rem; }
  .card { width: 100%; }
  .card__fields { grid-template-columns: repeat(3, 1fr); }
  .card__in input { font-size: 17px; }
  .card__out { grid-template-columns: repeat(2, 1fr); }
  .card__out > div:nth-child(2) { border-right: none; }
  .card__out > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .card__presets { flex-wrap: wrap; }
  .boot { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 18px; }
  .tblock { display: none; }
  .scrollcue { position: relative; left: 0; bottom: auto; margin-top: 26px; }
  .breather { min-height: 0; padding: 14vh 20px; }
  .breather--act p { font-size: 1rem; }
  .close { padding: 10vh 20px 12vh; }
  .form__row { grid-template-columns: 1fr; }
  .register { padding: 64px 20px; }
  .rec__row { grid-template-columns: 1fr; gap: 6px; }
  .built__head { display: none; }
  .built__row { grid-template-columns: 28px 1fr; gap: 10px 14px; }
  .built__row p:last-child { grid-column: 2; }
  .built__row p:last-child::before { content: "next · "; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
  .people__list > div { grid-template-columns: 1fr; gap: 6px; }
  .rail__stages { gap: 10px; }
  .rail__stages li { font-size: 8px; letter-spacing: 0.12em; }
  .note__aside { white-space: normal; max-width: 240px; }
  .xhair { display: none; }
}