/* The Meridian — foreground copy layer.
   RESPONSIVE LAYOUT RESET (sketch/responsive-layout-reset-1).

   One layout system, four composition modes:

     wide     min-width 1180        — the ratified 1440×900 editorial intent
     compact  681–1179              — single governed column (landscape tablets,
                                      near-square windows: 1145×898 … 730×894)
     narrow   max-width 680         — the ratified 390×844 mobile grammar
     fallback data-copy-overflowing — the stage rig scrolls when content
                                      genuinely cannot fit (set by copy.js)

   Structure: every stop's article carries ONE .stage-rig — the stage shell.
   It reserves masthead clearance on top, navigation clearance on the bottom,
   and the shared horizontal gutter on both sides. All copy, panels, and
   evidence flow inside it (flex/grid), so foreground blocks share one parent
   geometry instead of independent viewport coordinates.

   Painted glass lives on REAL elements (.surface-veil, .claim-group,
   .caseback-water-table) that own their padding and content — never on
   pseudo-elements with independent insets. Rims are borders: the permanent
   no-drop-shadows rule bans box-shadow, text-shadow, and drop-shadow(). */

@font-face {
  font-family: "Archivo Local";
  src: url("assets/fonts/archivo-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Archivo Local";
  src: url("assets/fonts/archivo-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}

@font-face {
  font-family: "Archivo Local";
  src: url("assets/fonts/archivo-800-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: block;
}

@font-face {
  font-family: "Newsreader Local";
  src: url("assets/fonts/newsreader-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Newsreader Local";
  src: url("assets/fonts/newsreader-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Chivo Mono Local";
  src: url("assets/fonts/chivo-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "Chivo Mono Local";
  src: url("assets/fonts/chivo-mono-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

:root {
  --copy-display: "Archivo Local", Arial, sans-serif;
  --copy-body: "Newsreader Local", Georgia, serif;
  --copy-mono: "Chivo Mono Local", "Cascadia Mono", monospace;
  --copy-ink: #101c38;
  --copy-plum: #3c2f5c;
  --copy-paper: #f7f2e7;
  --copy-gold: #e3b64f;
  --copy-cyan: #9fe0e8;
  --copy-lilac: #b69de3;
  --copy-paper-muted: rgba(247, 242, 231, 0.58);

  /* ---- Stage geometry (the shared shell every stop lays out inside) ---- */
  --layout-mode: "wide";
  --stage-gutter: clamp(24px, 6.6vw, 96px);
  /* Boundary-continuous: 0 at 1180 (the compact entry) ramping to the
     ratified 73 at 1440, so crossing the mode line never jumps. */
  --hero-indent: clamp(0px, calc((100vw - 1180px) * 0.2808), 73px);
  --mast-top: clamp(20px, 3.7vw, 48px);
  --mast-clear: calc(var(--mast-top) + 58px);
  /* Ratified desktop safe line: y = 100% − 164px at the 1440 anchor. Below
     1440 the clearance ramps down to the compact value (120 at 1180) so
     bottom-anchored compositions glide through the mode boundary. */
  --nav-clear: clamp(120px, calc(120px + (100vw - 1180px) * 0.1693), 164px);
  --bar-bottom: clamp(14px, 2.6vw, 30px);
  /* One evidence line runs 03A → 07: every right-column instrument enters at
     region-top + this drop (y=216 at 1440×900). */
  --evidence-drop: 108px;

  /* Legacy alias — a few shared instruments still read it. */
  --copy-control-clear: var(--nav-clear);
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--copy-cyan);
  border-radius: 999px;
  background: var(--copy-ink);
  color: var(--copy-paper);
  font: 600 11px/1 var(--copy-mono);
  letter-spacing: 0.04em;
}

.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- stage -- */

.copy-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--copy-paper);
}

.copy-stage.is-off { display: none; }

.copy-atmosphere {
  position: absolute;
  inset: 0;
  opacity: var(--atmosphere-opacity, 0);
  background: var(--atmosphere, transparent);
  pointer-events: none;
}

.copy-state {
  position: absolute;
  inset: 0;
  opacity: var(--copy-opacity, 1);
  pointer-events: none;
}

.copy-state[hidden] { display: none !important; }

/* The stage shell: masthead clearance / flexible content / nav clearance.
   Every foreground block flows inside this box. */
.stage-rig {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--mast-clear) var(--stage-gutter) var(--nav-clear);
  min-height: 0;
}

/* Over-tall content must overflow honestly (so the scroll fallback and the
   diagnostics can see it), never flex-shrink into a squashed layout. */
.stage-rig > * { flex-shrink: 0; }

/* Fallback: copy.js flags the rig when its content genuinely cannot fit the
   region; only then does the foreground accept scroll (app.js routes wheel and
   swipe to the region instead of the journey while it overflows). */
.stage-rig[data-copy-overflowing="true"] {
  overflow-y: auto;
  pointer-events: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mobile-copy { display: none; }

.desktop-copy-block { display: block; }

.copy-state a,
.copy-state button {
  pointer-events: auto;
}

/* Zero-specificity reset: every layout margin in this file must be able to
   win against it with a bare class selector. */
:where(.copy-state) :where(p, h1, h2, h3, figure, blockquote, dl, dd, ol) {
  margin: 0;
}

.copy-state h1,
.copy-state h2,
.copy-state h3 {
  text-wrap: balance;
}

.copy-state h1,
.copy-state h2 {
  font-family: var(--copy-display);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.copy-state p,
.copy-state figcaption,
.copy-state dd,
.copy-state blockquote {
  font-family: var(--copy-body);
}

.eyebrow,
.provenance,
.instrument-rail,
.rail-label,
.instrument-label,
.landing-bearing,
.visitor-log,
.copyright,
.copy-state dt,
.copy-state h3,
.take-sight {
  font-family: var(--copy-mono) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.eyebrow {
  display: none !important;
}

mark {
  padding: 0;
  background: none;
  color: var(--copy-gold);
}

/* ------------------------------------------------------------- masthead -- */

.site-masthead {
  position: absolute;
  z-index: 2;
  isolation: isolate;
  top: var(--mast-top);
  left: var(--stage-gutter);
  right: var(--stage-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--mast-color, var(--copy-paper));
  font: 600 10px/1.2 var(--copy-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--copy-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.site-wordmark::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border: 1px solid var(--copy-gold);
}

.site-utility {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.site-utility a,
.site-utility button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(247, 242, 231, 0.42);
  border-radius: 999px;
  background: rgba(7, 10, 24, 0.64);
  backdrop-filter: blur(12px);
  color: var(--copy-paper);
  cursor: pointer;
  font: 600 12px/1 var(--copy-mono);
  letter-spacing: 0.055em;
  text-decoration: none;
  transition: border-color 140ms linear, background-color 140ms linear;
}

html[data-copy-id="01"] .site-utility button,
html[data-copy-id="02"] .site-utility button,
html[data-copy-id="03A"] .site-utility button,
html[data-copy-id="08"] .site-utility button,
html[data-copy-id="09A"] .site-utility button,
html[data-copy-id="09B"] .site-utility button,
html[data-copy-id="10"] .site-utility button {
  border-color: rgba(16, 28, 56, 0.32);
  background: rgba(247, 242, 231, 0.88);
  color: var(--copy-ink);
}

.site-utility .resume-link {
  border-color: rgba(227, 182, 79, 0.96);
  background: var(--copy-gold);
  color: var(--copy-ink);
}

.site-utility a:hover,
.site-utility button:hover {
  border-color: currentColor;
}

/* ---------------------------------------------------------------- glass -- */

.surface-state {
  --state-ink: var(--copy-plum);
  --state-accent: var(--copy-plum);
  color: var(--state-ink);
}

.predawn-state {
  --state-ink: var(--copy-plum);
  --state-accent: var(--copy-plum);
}

/* Frosted glass — Stacy's Figma GLASS dial as a REAL container: blur(13px),
   white 55%, radius 23, 1px border rim (never box-shadow: inset). The panel
   owns its padding, so its content cannot leave the painted surface. */
.surface-veil {
  position: relative;
  color: var(--state-ink);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(13px);
}

/* Full-stop grounds for the dark and sky states (atmosphere, not containers —
   these stay as state-level paint behind the rig). */
.dark-state::before,
.sky-state::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}

.dark-state::before { background: rgba(8, 17, 37, 0.91); }

.sky-state::before {
  background: linear-gradient(90deg, rgba(7, 12, 29, 0.84) 0%, rgba(7, 12, 29, 0.52) 42%, rgba(7, 12, 29, 0.06) 72%);
}

/* ------------------------------------------------------ stop 01 ARRIVAL -- */

.state-01 .stage-rig {
  padding-left: calc(var(--stage-gutter) + var(--hero-indent));
}

/* Arrival is ONE composition from 681 to 1440: a content-hugging card whose
   width, left reach, and padding all ramp linearly from the compact values
   (at 1180) to the ratified 1440 geometry — resizing across the mode line
   reads as a smooth shrink, not a snap. (The old region-filling panel also
   left a field of empty glass in tall windows; the hug retires it.) */
.state-01 .surface-veil {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The ramp tops out at the ratified 1440 panel width — wider windows get
     more sea, not more glass. */
  width: min(1002px, calc(760px + (100vw - 1180px) * 0.9308), calc(100% + 68px));
  margin-top: clamp(12px, calc(12px + (1440px - 100vw) * 0.0769), 32px);
  margin-left: clamp(-68px, calc((100vw - 1180px) * -0.2615), 0px);
  padding: clamp(24px, 3.4vh, 32px)
    clamp(34px, calc(44px - (100vw - 1180px) * 0.0385), 44px)
    clamp(24px, 3.4vh, 32px)
    clamp(44px, calc(44px + (100vw - 1180px) * 0.0923), 68px);
}

.claim-group {
  display: grid;
  gap: 18px;
  align-content: start;
}

.state-01 .identity {
  font-size: clamp(30px, min(3vw, 4.8vh), 43px);
  line-height: 1.05;
  color: var(--copy-plum);
}

.state-01 .role {
  margin-top: 18px;
  font: 400 18px/1.45 var(--copy-display);
}

.state-01 .role strong { font-weight: 600; }

.state-01 .claim {
  max-width: 900px;
  /* Cap = the exact ratified 1440x900 size. A rounder cap (66) let very wide
     windows pin the font a hair larger and flip the balanced wrap. */
  font: 400 clamp(40px, min(4.55vw, 7.28vh), 65.52px)/1.03 var(--copy-body);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.state-01 .claim-group { margin-top: clamp(34px, 6.2vh, 70px); }

.arrival-proof {
  display: grid;
  gap: 4px;
  max-width: 900px;
}

.arrival-proof p {
  color: var(--copy-ink);
  font: 400 17px/1.35 var(--copy-body);
}

.take-sight {
  margin-top: clamp(18px, 4vh, 44px);
  align-self: stretch;
  padding-top: 12px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ----------------------------------------------------- stop 02 MANIFEST -- */

.state-02 .stage-rig {
  padding-left: calc(var(--stage-gutter) + var(--hero-indent));
  padding-right: calc(var(--stage-gutter) + var(--hero-indent));
}

/* Like Arrival: one card from 681 to 1440 — width, reach, and padding ramp
   from the compact entry values at 1180 to the ratified 1440 geometry. */
.state-02 .manifest-copy {
  width: min(1002px, calc(760px + (100vw - 1180px) * 0.9308), calc(100% + 68px));
  margin-top: clamp(0px, calc((100vw - 1180px) * 0.0385), 10px);
  margin-left: clamp(-68px, calc((100vw - 1180px) * -0.2615), 0px);
  padding: clamp(32px, calc(32px + (100vw - 1180px) * 0.0654), 49px)
    clamp(34px, calc(44px - (100vw - 1180px) * 0.0385), 44px)
    clamp(28px, calc(28px + (100vw - 1180px) * 0.0423), 39px)
    clamp(44px, calc(44px + (100vw - 1180px) * 0.0923), 68px);
}

.manifest-lede {
  max-width: 900px;
  /* Cap = the exact ratified size, so the balanced two-line wrap holds at
     every width instead of flipping to three lines past ~1459. */
  font: 400 clamp(34px, min(3.7vw, 5.92vh), 53.28px)/1.08 var(--copy-body) !important;
  letter-spacing: -0.018em !important;
}

.manifest-copy > p:not(.eyebrow) {
  max-width: min(892px, calc(620px + (100vw - 1180px) * 1.0462));
  margin-top: 18px;
  color: var(--copy-ink);
  font-size: 18px;
  line-height: 1.4;
}

.manifest-copy .manifest-detail {
  max-width: min(892px, calc(620px + (100vw - 1180px) * 1.0462)) !important;
  margin-top: 14px !important;
}

.proof-rail {
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 20px;
  color: var(--copy-ink);
}

.proof-rail .rail-label {
  padding-bottom: 12px;
  border-bottom: 1px solid transparent;
  color: var(--copy-plum);
  font-size: 12px;
  letter-spacing: 0.09em;
}

.proof-rail dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, var(--copy-plum), rgba(60, 47, 92, 0.12)) 1;
}


.proof-rail dl > div { align-content: start; }

.proof-rail dl > div {
  display: block;
  min-width: 0;
  min-height: 130px;
  /* 30px of air between the hairline and the numerals — the ratified rail. */
  padding: 30px 20px 0;
  border-left: 1px solid rgba(60, 47, 92, 0.18);
}

.proof-rail dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.proof-rail dt {
  color: var(--copy-plum);
  font: 800 clamp(40px, min(4.45vw, 7.11vh), 64px)/0.9 var(--copy-display) !important;
  letter-spacing: -0.035em;
}

.proof-rail dd {
  margin-top: 12px !important;
  color: var(--copy-ink);
  font: 600 12px/1.45 var(--copy-mono);
  letter-spacing: 0.035em;
}

/* ----------------------------------------------------- stop 03A FLAGSHIP -- */

/* 03A and 03B share ONE evidence column: same grid, same drop, so riding
   03A → 03B only the picture changes. */
.state-03a .stage-rig {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 580px);
  grid-template-areas: "copy media";
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(40px, 5vw, 110px);
}

/* The flagship panel is a left-bleed glass band: its left edge runs off the
   viewport, its right edge hugs the copy. */
.state-03a .flagship-copy {
  grid-area: copy;
  width: calc(100% + 224px);
  margin-left: -174px;
  padding: 44px 50px 62px 174px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.state-03a .flagship-copy h2 {
  font-size: clamp(38px, min(4.45vw, 7.11vh), 64px);
  line-height: 0.98;
}

.state-03a .flagship-copy h2 mark {
  color: var(--copy-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--copy-gold);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.05em;
  text-decoration-skip-ink: none;
}

.flagship-scope {
  margin-top: 24px !important;
  color: var(--copy-ink);
  font: 400 18px/1.36 var(--copy-body);
}

/* One instrument rail states plainly what Compass is; facts appear once. */
.instrument-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 150px));
  margin-top: 36px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(60, 47, 92, 0.32);
  color: var(--copy-plum);
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.06em;
}

.standfirst {
  margin-top: 26px !important;
  font-size: 24px;
  font-style: italic;
  line-height: 1.34;
}

.evidence {
  grid-area: media;
  margin-top: var(--evidence-drop);
  width: 100%;
}

.media-frame {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(247, 242, 231, 0.72);
  background: var(--copy-ink);
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evidence-flagship .media-frame,
.evidence-route .media-frame { aspect-ratio: 580 / 326; }

.provenance {
  margin-top: 14px !important;
  color: var(--copy-plum);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.075em;
}

.state-03a .evidence-flagship .provenance { color: var(--copy-ink); }

.evidence figcaption {
  margin-top: 9px;
  color: var(--copy-ink);
  font-size: 18px;
  line-height: 1.45;
}

/* ----------------------------------------------------- stop 04 THE TURN -- */

.turn-copy {
  margin-top: clamp(100px, 28vh, 280px);
  width: min(900px, 100%);
}

/* The nowrap IS the design: floor 50 holds one line to 681 wide. */
.turn-copy h2 {
  width: max-content;
  max-width: 100%;
  font: 400 clamp(50px, min(6vw, 9.55vh), 86px)/1 var(--copy-body) !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap;
}

.turn-period {
  color: var(--copy-gold);
}

.turn-lines {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}

.turn-lines p {
  color: var(--copy-paper);
  font: 400 28px/1.357 var(--copy-body);
}

.scale-copy h2,
.lab-copy h2 {
  font-size: clamp(42px, min(5vw, 8vh), 72px);
  line-height: 0.98;
}

.instrument-label {
  color: var(--copy-cyan);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.055em;
}

/* ------------------------------------------------ stop 06 WORK AT SCALE -- */

/* 06 keeps two INDEPENDENT column rhythms (shared grid rows would couple
   them): real column wrappers in wide, dissolved to display:contents in
   compact/narrow so the interleaved argument order comes back. */
.state-06 .stage-rig {
  display: grid;
  grid-template-columns: minmax(0, 648px) minmax(0, 490px);
  grid-template-areas: "copy evidence";
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(40px, 5vw, 110px);
}

.state-06 .rig-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.state-06 .rig-col-copy { grid-area: copy; }

.state-06 .rig-col-evidence {
  grid-area: evidence;
  align-items: stretch;
  margin-top: var(--evidence-drop);
}

.scale-copy {
  margin-top: 24px;
  width: 100%;
}

.scale-copy .scale-lede {
  margin-top: 22px;
  color: var(--copy-paper);
  font: 400 clamp(19px, calc(19px + (100vw - 1180px) * 0.0115), 22px)/1.36 var(--copy-body);
}

.scale-copy .scale-lede + .scale-lede { margin-top: 12px; }

.scale-close {
  margin-top: 22px;
  width: 100%;
  color: var(--copy-lilac);
  font: 400 clamp(18px, calc(18px + (100vw - 1180px) * 0.0154), 22px)/1.36 var(--copy-body);
  font-style: italic;
}

.launch-log {
  width: 100%;
  padding: 17px 19px;
  border: 1px solid rgba(159, 224, 232, 0.52);
  border-radius: 2px;
  background: rgba(247, 242, 231, 0.055);
}

.launch-log dl {
  display: grid;
  gap: 8px;
  margin-top: 10px !important;
}

.launch-log dl > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  min-height: 24px;
}

.launch-log dt {
  color: var(--copy-cyan);
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.055em;
}

.launch-log dd {
  color: var(--copy-paper);
  font: 500 16px/24px var(--copy-display);
  text-transform: uppercase;
}

/* The instrument owns the numeral. */
.launch-log .launch-tally {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(247, 242, 231, 0.16);
  color: var(--copy-paper);
  font: 800 43px/46px var(--copy-display);
  letter-spacing: -0.035em;
}

.tool-list {
  display: grid;
  align-content: start;
  margin-top: 27px;
  width: 100%;
  border-bottom: 1px solid rgba(247, 242, 231, 0.16);
}

.tool-list > div {
  min-height: 88px;
  padding: 8px 0 9px;
  border-top: 1px solid rgba(247, 242, 231, 0.16);
}

.tool-list dt {
  color: var(--copy-cyan);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.055em;
}

.tool-list dd {
  margin-top: 7px !important;
  color: var(--copy-paper);
  font: 400 18px/1.42 var(--copy-body);
}

/* ------------------------------------------------------ stop 07 THE LAB -- */

.state-07 .stage-rig {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 490px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "copy cards"
    "close cards";
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(40px, 5vw, 110px);
}

.lab-copy {
  grid-area: copy;
  margin-top: 39px;
  width: 100%;
}

.lab-copy > p:not(.eyebrow) {
  margin-top: 22px;
  color: var(--copy-paper);
  font: 400 22px/1.364 var(--copy-body);
}

.lab-close {
  grid-area: close;
  margin-top: 13px;
  width: 100%;
  color: var(--copy-paper);
  font: 400 22px/1.364 var(--copy-body);
  font-style: italic;
}

.lab-registers {
  grid-area: cards;
  margin-top: var(--evidence-drop);
  display: grid;
  gap: 14px;
  width: 100%;
  align-content: start;
}

.lab-card {
  padding: 15px 17px;
  border: 1px solid rgba(159, 224, 232, 0.52);
  border-radius: 2px;
  background: rgba(247, 242, 231, 0.055);
}

.lab-card > p:not(.instrument-label) {
  margin-top: 7px !important;
  color: var(--copy-paper);
  font: 400 18px/1.42 var(--copy-body);
}

.lab-writing {
  border-color: rgba(227, 182, 79, 0.7);
}

.lab-writing .instrument-label { color: var(--copy-gold); }

.lab-writing > strong {
  display: block;
  margin-top: 7px;
  color: var(--copy-paper);
  font: 500 17px/1.36 var(--copy-display);
}

.lab-writing > p.lab-also {
  margin-top: 12px !important;
  color: var(--copy-paper);
  font: 400 16px/1.375 var(--copy-body);
  font-style: italic;
}

.lab-writing > p.lab-also a {
  color: var(--copy-gold);
  white-space: nowrap;
  font-style: normal;
  text-decoration: none;
}

.lab-writing > p.lab-also a:hover { text-decoration: underline; }

/* ------------------------------------------------ stop 08 THE NAVIGATOR -- */

.state-08 .stage-rig { justify-content: flex-end; }

/* The navigator panel is a left-bleed glass band anchored 18px above the
   safe line — an anchored composition, not a floating card. */
.navigator-copy {
  width: min(994px, calc(100% + 174px));
  margin-left: -174px;
  margin-bottom: 18px;
  padding: 80px 26px 98px 174px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.navigator-copy h2 {
  font-size: clamp(48px, min(6vw, 9.55vh), 86px);
  line-height: 0.98;
}

.navigator-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 18px;
  color: var(--copy-ink);
  font-size: 19px;
  line-height: 1.42;
}

.contact-lines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 24px;
}

.contact-lines a,
.email-cta {
  color: var(--copy-ink);
  font: 600 11px/1.3 var(--copy-mono);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.contact-lines button,
.contact-lines a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(16, 28, 56, 0.32);
  border-radius: 999px;
  background: rgba(247, 242, 231, 0.88);
  color: var(--copy-ink);
  cursor: pointer;
  font: 600 11px/1 var(--copy-mono);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.contact-lines button:hover,
.contact-lines a:hover { border-color: var(--copy-ink); }

.contact-lines a:first-child {
  border-color: var(--copy-gold);
  background: var(--copy-gold);
}

/* ------------------------------------------------------ caseback shared -- */

/* One continuous water-backed chart surface under stops 08 → 10. Both of its
   edges follow the active caseback's content (published by copy.js), with a
   masthead guard on top — the slab is a frame around the document, never a
   fixed sheet. */
:root {
  --caseback-inline: 3.9%;
}

.caseback-water-table { display: none; }

html[data-copy-id="08"] .caseback-water-table,
html[data-copy-id="09A"] .caseback-water-table,
html[data-copy-id="09B"] .caseback-water-table,
html[data-copy-id="10"] .caseback-water-table {
  display: block;
}

.caseback-water-table {
  position: absolute;
  z-index: 0;
  top: max(calc(var(--mast-top) + 52px), var(--caseback-slab-top, calc(var(--mast-clear) + 8px)));
  right: var(--caseback-inline);
  bottom: max(var(--nav-clear), var(--caseback-slab-bottom-offset, -9999px));
  left: var(--caseback-inline);
  opacity: var(--caseback-surface-opacity, 0);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(13px);
  pointer-events: none;
}

.caseback-state {
  --state-accent: var(--copy-plum);
  color: var(--copy-ink);
}

.chart-graticule { display: none; }

/* The caseback is ONE composition at every width: a chart header band across
   the slab (title | standfirst | instrument), documents full-width below.
   No dead column, no mode snap — wide and compact are the same layout. */
.state-09a .stage-rig {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-inline: calc(var(--caseback-inline) + clamp(28px, 3.5vw, 55px));
}

/* The header band shares the document grid: the title rides Exhibit A's
   axis, the instrument rides the docket's. */
.caseback-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(36px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(44px, 6vh, 64px);
}

.caseback-intro h2 {
  grid-column: 1;
  color: var(--copy-plum);
  font-size: clamp(38px, min(4.2vw, 6.7vh), 60px);
  line-height: 1.02;
}

.chart-table,
.credits {
  margin-top: clamp(34px, 5.5vh, 56px);
  min-height: 0;
}

.chart-table {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(36px, 4vw, 72px);
  align-content: start;
  align-items: start;
}

.chart-table h3,
.credits h3 {
  margin-bottom: 10px;
  color: var(--copy-plum);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.1em;
}

.chronology dl {
  border-top: 1px solid rgba(16, 28, 56, 0.28);
  border-bottom: 1px solid rgba(16, 28, 56, 0.28);
}

.credits dl > div {
  border-top: 1px solid rgba(16, 28, 56, 0.14);
  border-bottom: 0;
}

.credits dl > div:nth-child(-n + 2) { border-top-color: rgba(16, 28, 56, 0.28); }
.credits dl > div:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(16, 28, 56, 0.28); }

/* The credits run as a two-column ledger; rules stop at each column. */
.credits dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 72px);
}

.chronology dl > div + div {
  border-top: 1px solid rgba(16, 28, 56, 0.14);
}

/* Rows center their content vertically — a two-line entry gets equal air
   above and below, never a tail brushing the rule beneath it. */
.chronology dl > div,
.credits dl > div {
  display: grid;
  align-items: center;
  min-height: 52px;
  padding-block: 10px;
}

.chronology dl > div { grid-template-columns: clamp(76px, 7.2vw, 104px) minmax(0, 1fr); }
.credits dl > div { grid-template-columns: clamp(96px, 8.3vw, 120px) minmax(0, 1fr); }

.chronology dt,
.credits dt {
  color: var(--copy-plum);
  font-size: 10.5px;
  line-height: 20px;
  letter-spacing: 0.07em;
}

.chronology dd,
.credits dd {
  color: var(--copy-ink);
  font-size: 16px;
  line-height: 22px;
}

/* 09B promotes its best line into a closing statement — it follows the
   ledger directly, no rule of its own. */
.credits-closing {
  max-width: 740px;
  margin-top: clamp(28px, 4vh, 40px);
}

.closing-statement {
  color: var(--copy-plum);
  font: 400 clamp(24px, min(2.2vw, 3.55vh), 32px)/1.25 var(--copy-body);
  letter-spacing: -0.01em;
}


/* When the documents can no longer sit side by side, the docket sits out —
   the same "carries less copy" decision mobile already made. */
@media (min-width: 681px) and (max-width: 859px) {
  .chart-table {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 34px;
  }
  .credits dl {
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid rgba(16, 28, 56, 0.28);
    border-bottom: 1px solid rgba(16, 28, 56, 0.28);
  }
  .credits dl > div { border-top: 0; }
  .credits dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .credits dl > div + div { border-top: 1px solid rgba(16, 28, 56, 0.14); }
}

/* ----------------------------------------------------- stop 10 LANDFALL -- */

.state-10 .stage-rig {
  justify-content: flex-end;
  /* Landfall's glass hugs 34px deeper than the shared safe line. */
  padding-bottom: calc(var(--nav-clear) - 34px);
}

/* Left-bleed band. The right edge is lighthouse-safe: x=780 at 1440 — the
   glass must never erase the lighthouse-on-headland (starts x≈817). */
.landfall-copy {
  width: min(859px, calc(100% + 148px));
  margin-left: -174px;
  padding: 94px 26px 61px 174px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.landfall-copy h2 {
  font-size: clamp(52px, min(6.2vw, 9.78vh), 88px);
  line-height: 0.92;
}

.landfall-note {
  max-width: 660px;
  margin-top: 14px !important;
  color: var(--copy-ink);
  font: 400 18px/1.35 var(--copy-body);
}

.landing-bearing {
  margin-top: 12px !important;
  font-size: 11px;
  letter-spacing: 0.07em;
}

.email-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--copy-gold);
}

.visitor-log,
.copyright {
  margin-top: 12px !important;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.045em;
}

.copyright { margin-top: 8px !important; }

.diagnostic-head { opacity: 0; }

.diagnostic-head[hidden] { display: none; }

html[data-copy-visible="false"] .diagnostic-head { opacity: 1; }

/* ---------------------------------------------------------- journey bar -- */

/* 560×56 desktop / 362×56 mobile. Glass follows the water; gold appears
   exactly once, on the NEXT pill. 44px touch targets are Gate D-locked;
   56px is the honest bar floor. */
.controls.journey-bar {
  --bar-mark: var(--copy-paper);
  --bar-fill: rgba(247, 242, 231, 0.10);
  --bar-rim: rgba(247, 242, 231, 0.22);
  --bar-back-fill: rgba(247, 242, 231, 0.10);
  --bar-back-rim: rgba(247, 242, 231, 0.38);
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: var(--bar-bottom);
  width: min(560px, calc(100% - 36px));
  height: 56px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid var(--bar-rim);
  border-radius: 28px;
  background: var(--bar-fill);
  backdrop-filter: blur(13px);
  transition: opacity 180ms linear;
}

html[data-copy-id="01"] .journey-bar,
html[data-copy-id="02"] .journey-bar,
html[data-copy-id="03A"] .journey-bar,
html[data-copy-id="08"] .journey-bar,
html[data-copy-id="09A"] .journey-bar,
html[data-copy-id="09B"] .journey-bar,
html[data-copy-id="10"] .journey-bar {
  --bar-mark: var(--copy-ink);
  --bar-fill: rgba(255, 255, 255, 0.55);
  --bar-rim: rgba(255, 255, 255, 0.60);
  --bar-back-fill: rgba(247, 242, 231, 0.50);
  --bar-back-rim: rgba(16, 28, 56, 0.38);
}

/* Idle dim is opacity only — it never touches the navigation model. */
html[data-journey-idle="true"] .journey-bar { opacity: 0.45; }

.copy-state-nav {
  display: grid;
  grid-template-areas: "back position next";
  grid-template-columns: 44px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 14px;
  height: 100%;
}

/* Stop 01 has no Back: the column and its gap collapse. */
html[data-copy-id="01"] .copy-state-nav {
  grid-template-areas: "position next";
  grid-template-columns: minmax(0, 1fr) 92px;
}

.copy-state-nav button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--bar-back-rim);
  cursor: pointer;
  font-family: var(--copy-mono);
  font-weight: 600;
}

.copy-state-nav button[hidden] { display: none; }

.journey-back {
  grid-area: back;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bar-back-fill);
  color: var(--bar-mark);
  font-size: 15px;
  line-height: 18px;
}

.journey-position {
  grid-area: position;
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.journey-position strong {
  display: block;
  overflow: hidden;
  padding-top: 8px;
  color: var(--bar-mark);
  font: 600 12px/14px var(--copy-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-next {
  grid-area: next;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border-color: var(--copy-gold) !important;
  border-radius: 22px;
  background: var(--copy-gold);
  color: var(--copy-ink);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

html[data-copy-id="10"][data-journey-unlocked="true"] .copy-state-nav {
  grid-template-columns: 44px minmax(0, 1fr) 130px;
}

.copy-state-nav button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.42;
}

.copy-state-nav button:not([aria-disabled="true"]):hover {
  border-color: currentColor;
}

.journey-rail {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 10px;
  pointer-events: none;
}

.journey-rail::before {
  content: "";
  position: absolute;
  top: 4.5px;
  right: 0;
  left: 0;
  height: 1px;
  opacity: 0.22;
  background: var(--bar-mark);
}

.journey-edge {
  position: absolute;
  top: 4.5px;
  left: calc(2px + var(--edge-index) * (100% - 4px) / var(--span, 8));
  width: calc((100% - 4px) / var(--span, 8));
  height: 1px;
  background: transparent;
}

.journey-edge.is-sailed {
  opacity: 0.55;
  background: var(--bar-mark);
}

.journey-mark {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: calc(2px + var(--mark-index) * (100% - 4px) / var(--span, 8));
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: 0.4;
  background: var(--bar-mark);
}


.journey-mark.is-visited {
  top: 2.5px;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  opacity: 0.72;
}

.journey-mark[data-kind="breath"] {
  top: 1.5px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--bar-mark);
  border-radius: 50%;
  opacity: 0.5;
  background: none;
}

/* You-are-here keeps its diamond; gold belongs to the ask alone. */
.journey-mark.is-current {
  top: 0.5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border: 0;
  border-radius: 1px;
  opacity: 0.9;
  background: var(--bar-mark);
}


html[data-copy-visible="false"] .journey-bar { display: none; }

/* --------------------------------------------------- journey veil/chart -- */

.journey-veil {
  position: fixed;
  z-index: 30;
  inset: 0;
  opacity: 0;
  background: #070a18;
  pointer-events: none;
  transition: opacity 180ms linear;
}

.journey-veil.is-active {
  opacity: 1;
  pointer-events: auto;
}

.journey-veil.is-revealing { transition-duration: 340ms; }

.copy-stage.is-reduced-changing {
  animation: journey-copy-settle 120ms linear both;
}

@keyframes journey-copy-settle {
  0% { opacity: 0.76; }
  100% { opacity: 1; }
}

.journey-chart {
  width: min(700px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  margin: auto;
  padding: 22px 24px 24px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--copy-ink);
  backdrop-filter: blur(13px);
}

.journey-chart::backdrop {
  background: rgba(16, 28, 56, 0.30);
  backdrop-filter: blur(8px);
}

.journey-chart-handle { display: none; }

.journey-chart header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.journey-chart header p,
.journey-chart header h2 { margin: 0; }

.journey-chart header p {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 11px;
  background: var(--copy-gold);
  color: var(--copy-ink);
  font: 600 10px/1 var(--copy-mono);
  letter-spacing: 0.1em;
}

.journey-chart header h2 {
  color: var(--copy-ink);
  font: 500 30px/1 var(--copy-body);
  letter-spacing: -0.02em;
}

.journey-chart header button {
  min-width: 88px;
  min-height: 44px;
  border: 1px solid rgba(16, 28, 56, 0.38);
  border-radius: 999px;
  background: rgba(247, 242, 231, 0.50);
  color: var(--copy-ink);
  cursor: pointer;
  font: 600 11px/1 var(--copy-mono);
  letter-spacing: 0.08em;
}

.journey-chart ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-chart li { margin: 0; }

.journey-chart li button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
  border: 0;
  border-top: 1px solid rgba(16, 28, 56, 0.20);
  background: transparent;
  color: var(--copy-ink);
  cursor: pointer;
  text-align: left;
}

.journey-chart li button::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border: 1px solid rgba(16, 28, 56, 0.55);
}

.journey-chart li button span {
  flex: 1;
  font: 600 14px/1.2 var(--copy-display);
}

.journey-chart li button small {
  color: rgba(16, 28, 56, 0.55);
  font: 500 10px/1 var(--copy-mono);
  letter-spacing: 0.06em;
}

.journey-chart li button[aria-current="true"]::before {
  width: 9px;
  height: 9px;
  border: 0;
  background: rgba(16, 28, 56, 0.90);
}

.journey-chart li button:hover { background: rgba(16, 28, 56, 0.06); }

/* ============================================================ COMPACT ==== */
/* Landscape tablets and near-square windows — 1145×898, 1051×894, 974×893,
   937×894, 900×900, 851×894, 730×894 all land here. One governed column;
   the sea keeps the remaining width. No aspect-ratio cliffs. */

@media (min-width: 681px) and (max-width: 1179px) {
  :root {
    --layout-mode: "compact";
    /* Same formula as wide: the gutter (and the masthead riding it) glides
       through the 1180 boundary instead of stepping. */
    --stage-gutter: clamp(28px, 6.6vw, 96px);
    --hero-indent: 0px;
    --mast-clear: calc(var(--mast-top) + 58px);
    --nav-clear: calc(var(--bar-bottom) + 56px + 34px);
    --evidence-drop: 0px;
  }

  /* Every stop is a flex column in DOM/argument order unless re-authored.
     gap/justify reset — the wide grid's column-gap and space-between must
     not leak into the vertical stack. */
  .state-03a .stage-rig,
  .state-06 .stage-rig,
  .state-07 .stage-rig,
  .state-09a .stage-rig {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }

  /* -- type tier (authored, both axes; caps meet the wide values at the
        1180 boundary) -- */
  .state-01 .claim { font-size: clamp(36px, min(5.2vw, 6vh), 54px); }
  .state-01 .identity { font-size: clamp(27px, min(3.4vw, 3.9vh), 35px); }
  .manifest-lede { font-size: clamp(30px, min(3.7vw, 4.9vh), 44px) !important; }
  .proof-rail dt { font-size: clamp(30px, min(4.45vw, 5.9vh), 53px) !important; }
  .state-03a .flagship-copy h2 { font-size: clamp(34px, min(4.6vw, 5.2vh), 46px); }
  .turn-copy h2 { font-size: clamp(50px, min(6.6vw, 8vh), 72px) !important; }
  .scale-copy h2,
  .lab-copy h2 { font-size: clamp(40px, min(5vw, 6.5vh), 59px); }
  .navigator-copy h2 { font-size: clamp(42px, min(5.6vw, 6.4vh), 62px); }
  .landfall-copy h2 { font-size: clamp(46px, min(6vw, 7vh), 68px); }
  .caseback-intro h2 { font-size: clamp(30px, min(3.8vw, 4.4vh), 42px); }

  .scale-copy .scale-lede,
  .lab-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.36; }
  /* Reading measure: compact prose holds ~62ch even when its column is wider. */
  .scale-copy .scale-lede,
  .lab-copy > p:not(.eyebrow),
  .manifest-copy > p:not(.eyebrow),
  .scale-close,
  .lab-close,
  .navigator-copy > p:not(.eyebrow),
  .lab-card > p:not(.instrument-label),
  .tool-list dd { max-width: 620px; }
  .manifest-copy .manifest-detail { max-width: 620px !important; }
  .scale-close,
  .lab-close { font-size: 17px; line-height: 1.36; }
  .turn-lines p { font-size: 22px; line-height: 1.36; }
  .standfirst { font-size: 20px; }
  .manifest-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.36; }
  .tool-list dd,
  .lab-card > p:not(.instrument-label) { font-size: 16px; line-height: 1.36; }
  .evidence figcaption { font-size: 15px; line-height: 1.3; }

  /* -- 01 ARRIVAL: the same card as wide, at its 1180-entry values (the
        wide ramps land here, so the boundary crossing is seamless). -- */
  .state-01 .surface-veil {
    width: min(760px, 100%);
    margin-top: clamp(12px, 3.5vh, 32px);
    padding: clamp(24px, 3.4vh, 32px) clamp(30px, 3.75vw, 44px);
  }

  /* -- 02 MANIFEST: the same card as wide at its 1180-entry values; the
        proof rail keeps the anchored four-across grammar (it reflows to
        2×2 only below 1030, where four columns genuinely cannot hold
        08·2024). -- */
  .state-02 .manifest-copy {
    width: min(760px, 100%);
    margin-top: 0;
    padding: clamp(26px, 3.6vh, 32px) clamp(30px, 3.75vw, 44px) clamp(24px, 3.1vh, 28px);
  }
  .manifest-copy > p:not(.eyebrow) { font-size: clamp(16px, 1.525vw, 18px); line-height: 1.4; }

  /* -- 03A/03B: card (or essay) above, evidence below — the mobile grammar
        at canvas scale, not miniature desktop columns. -- */
  .state-03a .flagship-copy {
    width: min(720px, 100%);
    margin-left: 0;
    margin-top: 0;
    padding: clamp(24px, 3.4vh, 36px) clamp(28px, 4vw, 44px);
    border-radius: 23px;
  }
  /* Compact carries the essential register: the optional desktop-only lines
     (captions, echo ledes) sit out, exactly as they do on mobile. */
  .desktop-copy-block { display: none; }
  /* The capture matches the card above it — same width, same edges (kept
     identical on 03A and 03B: riding between them, only the picture
     changes). Height caps by viewport so the frame clears the bar; the
     capture cover-crops inside it. */
  .evidence {
    margin-top: clamp(18px, 3vh, 30px);
    width: min(720px, 100%);
  }
  .evidence-flagship .media-frame,
  .evidence-route .media-frame {
    aspect-ratio: 2 / 1;
    max-height: clamp(220px, 30vh, 340px);
  }
  .instrument-rail { margin-top: 24px !important; padding-top: 13px; font-size: 10px; }
  .state-03a .standfirst { margin-top: 18px !important; font-size: 18px; }
  .flagship-scope { margin-top: 14px !important; font-size: 16px; line-height: 1.32; }

  /* -- 04 THE TURN -- */
  .turn-copy { margin-top: clamp(90px, 24vh, 240px); }
  .turn-lines { margin-top: 30px; gap: 10px; }

  /* -- 06 WORK AT SCALE: same drop-and-spread as 05. Copy reclaims the
        full width; the launch log runs as a full-width instrument panel
        (rows left, the 32 DAYS numeral anchored right); the three built
        instruments read as a three-cell rail (see the 860+ block); the
        close line ends the stack. Argument order preserved. -- */
  .state-06 .rig-col { display: contents; }
  .scale-copy { order: 1; margin-top: 0; width: 100%; }
  .launch-log { order: 2; }
  .tool-list { order: 4; }
  .scale-close { order: 5; }
  .scale-copy .scale-lede {
    margin-top: 14px;
    font-size: clamp(17px, 1.61vw, 19px);
    max-width: 36.5em;
  }
  .launch-log {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(20px, 3.2vh, 30px);
    width: 100%;
    padding: 15px 18px;
  }
  .launch-log .instrument-label { grid-column: 1 / -1; }
  .launch-log dl > div { min-height: 24px; grid-template-columns: 74px minmax(0, 1fr); }
  .launch-log .launch-tally {
    margin: 0;
    padding: 0;
    border-top: 0;
    align-self: end;
    text-align: right;
    font-size: clamp(38px, 4.4vw, 52px);
    line-height: 0.95;
  }
  .tool-list { margin-top: clamp(18px, 2.8vh, 26px); width: 100%; }
  .tool-list > div { min-height: 0; padding: 8px 0 9px; }
  .scale-close { margin-top: clamp(16px, 2.6vh, 24px); font-size: 18px; max-width: 36.5em; }

  .lab-copy { margin-top: 0; width: min(680px, 100%); }
  .lab-registers { margin-top: clamp(18px, 3vh, 28px); width: min(680px, 100%); gap: 12px; }
  .lab-card { padding: 13px 15px; }
  .lab-writing > strong { font-size: 15px; }
  .lab-writing > p.lab-also { font-size: 14px; }
  .lab-close { margin-top: clamp(16px, 2.8vh, 26px); }

  /* -- 08/10: anchored cards above the bar. -- */
  .navigator-copy {
    width: min(720px, 100%);
    margin-left: 0;
    margin-bottom: 12px;
    padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 44px);
    border-radius: 23px;
  }
  .navigator-copy > p:not(.eyebrow) { font-size: 17px; }
  .state-10 .stage-rig { padding-bottom: var(--nav-clear); }
  .landfall-copy {
    width: min(680px, 100%);
    margin-left: 0;
    margin-bottom: 12px;
    padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 44px);
    border-radius: 23px;
  }

  /* -- casebacks: the shared band+document composition inherits from base;
        only the density tier changes here. -- */
  .caseback-intro h2 { font-size: clamp(32px, min(4.2vw, 5.6vh), 50px); }
  .chronology dl > div,
  .credits dl > div { min-height: 44px; padding-block: 8px; }
  .chronology dd,
  .credits dd { font-size: 15px; line-height: 20px; }
  .credits-closing { margin-top: 24px; }
}

/* The narrowest compact band reads the mobile register: full desktop copy
   plus a stacked column cannot fit an 844-high region at 681–759. */
@media (min-width: 681px) and (max-width: 759px) {
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
}

/* The compact loop reads as what it is — a five-step process on one rail.
   Below 860 the cells get too thin and it folds back to the row list. */
@media (min-width: 860px) and (max-width: 1179px) {

  /* 06's three built instruments share the same rail grammar. */
  .tool-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(247, 242, 231, 0.16);
  }
  .tool-list > div {
    min-height: 0;
    padding: 14px 0 12px;
    border-top: 0;
  }
  .tool-list > div + div {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid rgba(247, 242, 231, 0.16);
  }
  .tool-list dd { margin-top: 6px !important; font-size: 15px; line-height: 1.35; }
}

/* Below ~1030 the four-across proof rail can no longer hold its widest
   metric: authored reflow to 2×2. */
@media (min-width: 681px) and (max-width: 1029px) {
  .proof-rail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
  }
  .proof-rail dl > div {
    min-height: 0;
    padding: 22px 20px 0;
  }
  .proof-rail dl > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Compact evidence pairs up (2-col) so the tall stops keep everything above
   the bar. */
@media (min-width: 681px) and (max-width: 1179px) {
  .lab-registers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }
  .lab-writing { grid-column: 1 / -1; }

}

/* ======================================================== WIDE / SHORT ==== */
/* Wide-but-short windows (1280×720 …): the vh arms of every type clamp do
   most of the compression; this tier tightens the spacing rhythm. */

@media (min-width: 1180px) and (max-height: 840px) {
  :root {
    --layout-density: "short";
    --mast-clear: calc(var(--mast-top) + 52px);
    /* Short windows were always a compression tier: the 164px safe line is
       the ratified ≥841-height geometry; here clearance follows the bar. */
    --nav-clear: calc(var(--bar-bottom) + 56px + 34px);
    --evidence-drop: clamp(40px, 7vh, 108px);
  }
  .state-01 .surface-veil { margin-top: 0; padding-top: 26px; }
  .state-01 .claim-group { margin-top: clamp(22px, 4.2vh, 48px); }
  .state-02 .manifest-copy { margin-top: 0; padding-top: 32px; padding-bottom: 28px; }
  .proof-rail dl > div { min-height: 96px; }
  .lab-copy { margin-top: 8px; }
  .scale-copy { margin-top: 8px; }
  .scale-copy .scale-lede { font-size: 17px; line-height: 1.32; }
  .scale-copy .scale-lede { margin-top: 12px; }
  .scale-close { margin-top: 20px; font-size: 17px; }
  .lab-close { margin-top: 26px; font-size: 18px; }
  .tool-list { margin-top: 20px; }
  .tool-list > div { min-height: 0; padding: 6px 0 7px; }
  .tool-list dd { margin-top: 5px !important; font-size: 14px; line-height: 1.28; }
  .tool-list dt { font-size: 11px; line-height: 11px; }
  .launch-log { padding: 13px 15px; }
  .launch-log dl > div { min-height: 21px; grid-template-columns: 66px minmax(0, 1fr); }
  .launch-log dt { font-size: 11px; line-height: 21px; }
  .launch-log dd { font-size: 14px; line-height: 21px; }
  .launch-log .launch-tally { margin-top: 8px; padding-top: 9px; font-size: 28px; line-height: 30px; }
  .lab-card > p:not(.instrument-label) { font-size: 15px; line-height: 1.32; }
  .evidence figcaption { font-size: 15px; }
  .turn-copy { margin-top: clamp(80px, 22vh, 220px); }
  .navigator-copy { padding-top: 48px; padding-bottom: 56px; }
  /* The bar-derived short clearance leaves no room for the deep panel hugs. */
  .state-01 .stage-rig { padding-bottom: calc(var(--nav-clear) - 8px); }
  .state-10 .stage-rig { padding-bottom: calc(var(--nav-clear) - 6px); }
  .caseback-intro { margin-top: 40px; }
  .chart-table,
  .credits { margin-top: 22px; }
  .chronology dl > div,
  .credits dl > div { min-height: 44px; padding-top: 11px; }
  .credits-closing { margin-top: 24px; }
}

/* Compact + short: tighten the column rhythm before scroll has to exist. */
@media (min-width: 681px) and (max-width: 1179px) and (max-height: 780px) {
  :root {
    --layout-density: "short";
    --mast-clear: calc(var(--mast-top) + 48px);
    --nav-clear: calc(var(--bar-bottom) + 56px + 22px);
  }
  .state-01 .claim { font-size: clamp(32px, min(4.8vw, 5.2vh), 46px); }
  .state-01 .claim-group { margin-top: 20px; }
  .turn-copy { margin-top: clamp(60px, 18vh, 160px); }
  .tool-list > div { padding: 6px 0; }
  .tool-list dd { font-size: 15px; line-height: 1.3; }
  .launch-log .launch-tally { font-size: 28px; line-height: 30px; }
  .evidence { margin-top: 14px; width: min(720px, 100%); }
}

/* ============================================================= NARROW ==== */
/* The ratified 390×844 mobile grammar, rebuilt in flow. */

@media (max-width: 680px) {
  :root {
    --layout-mode: "narrow";
    /* Every token ramps between the ratified 390 value and the compact
       entry value at 680, so the mode crossing never steps. */
    --stage-gutter: clamp(21px, calc(21px + (100vw - 390px) * 0.0824), 45px);
    --hero-indent: 0px;
    --mast-top: clamp(18px, 3.7vw, 26px);
    --mast-clear: clamp(83px, calc(88px - (100vw - 390px) * 0.0166), 88px);
    --nav-clear: clamp(108px, calc(126px - (100vw - 390px) * 0.062), 126px);
    --bar-bottom: clamp(14px, 2.6vw, 18px);
    --evidence-drop: 0px;
  }

  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .desktop-copy-block { display: none; }

  .site-masthead { gap: 16px; font-size: 11px; }
  .site-wordmark { gap: 8px; font-size: 13px; }

  html[data-copy-id]:not([data-copy-id="01"]):not([data-copy-id="10"]) .site-wordmark {
    opacity: 0;
    visibility: hidden;
  }

  .site-utility { gap: 6px; }
  .site-utility a,
  .site-utility button {
    min-height: 44px;
    padding-inline: 11px;
    font-size: 11px;
    letter-spacing: 0.045em;
  }

  /* Two-column stops collapse to the argument column. */
  .state-03a .stage-rig,
  .state-06 .stage-rig,
  .state-07 .stage-rig,
  .state-09a .stage-rig {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }

  /* Mobile glass = full-bleed bands: real elements whose paint runs past the
     viewport edges while their content keeps the stage gutter. */
  .state-01 .stage-rig { padding-bottom: var(--nav-clear); }
  .state-01 .surface-veil {
    flex: 1 1 auto;
    align-self: stretch;
    width: auto;
    margin: 26px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
  }

  .claim-group {
    align-self: stretch;
    margin-inline: -61px -53px;
    padding: 26px 53px 20px 61px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(13px);
    gap: 12px;
  }

  .state-01 .claim-group { margin-top: 34px; }

  .state-01 .identity { font-size: 29px; }
  .state-01 .role { margin-top: 12px; font-size: 14px; line-height: 1.45; }
  .state-01 .role strong { display: block; }
  .state-01 .role span { display: none; }

  .state-01 .claim {
    font-size: clamp(32px, 9.6vw, 39px);
    line-height: 1.02;
  }

  .arrival-proof { gap: 2px; }

  .arrival-proof p {
    font-size: 15px;
    line-height: 1.25;
  }

  .take-sight {
    margin-top: auto;
    padding-top: 14px;
    font-size: 10px;
  }

  .state-02 .manifest-copy {
    align-self: stretch;
    width: auto;
    margin: -12px -53px 0 -61px;
    padding: 12px 53px 11px 61px;
  }

  .manifest-lede {
    font-size: 25px !important;
    line-height: 1.1 !important;
  }

  .manifest-copy > p:not(.eyebrow) {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.3;
  }

  .manifest-copy .manifest-detail {
    display: block;
    margin-top: 8px !important;
    font-size: 14px;
    line-height: 1.28;
  }

  .proof-rail {
    align-self: stretch;
    width: auto;
    margin-top: 116px;
    margin-bottom: 0;
    padding-inline: 0;
  }

  .proof-rail dl {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 22px;
    padding-top: 25px;
  }
  .proof-rail dl > div { padding-top: 0; }
  .proof-rail dl > div {
    display: block;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: none;
  }
  .proof-rail .rail-label { font-size: 11px; }
  .proof-rail dt { font-size: 30px !important; }
  .proof-rail dd { margin-top: 7px !important; font-size: 10.5px; line-height: 1.25; }

  .state-03a .flagship-copy {
    align-self: stretch;
    width: auto;
    margin: -12px -53px 0 -61px;
    padding: 32px 53px 20px 61px;
    border-radius: 23px;
  }
  .state-03a .flagship-copy h2 { font-size: 40px; line-height: 0.95; }
  .instrument-rail {
    display: block;
    margin-top: 26px !important;
    padding-top: 13px;
    font-size: 10px;
    line-height: 14px;
  }
  .instrument-rail span + span::before { content: " · "; }
  .state-03a .standfirst { margin-top: 22px !important; font-size: 18px; line-height: 1.36; }
  .flagship-scope { margin-top: 16px !important; font-size: 14px; line-height: 1.25; }

  .evidence {
    align-self: stretch;
    margin-top: 44px;
    width: 100%;
  }
  .evidence-flagship .media-frame,
  .evidence-route .media-frame { aspect-ratio: 2 / 1; }
  .provenance { margin-top: 12px !important; font-size: 10px; line-height: 14px; }

  .state-04 .stage-rig { padding-inline: 16px; }
  .state-04.sky-state::before {
    background: linear-gradient(90deg, rgba(7, 12, 29, 0.92) 0%, rgba(7, 12, 29, 0.68) 58%, rgba(7, 12, 29, 0.52) 100%);
  }
  .turn-copy {
    margin-top: clamp(120px, 30vh, 280px);
    width: 100%;
  }
  .turn-copy h2 {
    width: auto;
    font-size: 48px !important;
    line-height: 0.98 !important;
    white-space: normal;
  }
  .turn-lines { gap: 10px; margin-top: 30px; }
  .turn-lines p { font-size: 18px; line-height: 1.39; }

  .scale-copy,
  .lab-copy {
    margin-top: 0;
    width: 100%;
  }
  .scale-copy h2,
  .lab-copy h2 {
    font-size: clamp(40px, calc(43px - (100vw - 390px) * 0.0103), 43px);
    line-height: 0.95;
  }
  /* Between 390 and 680 the mobile register stretches: hold body prose to a
     readable measure (no-op at the ratified 390). */
  .scale-copy .scale-lede,
  .lab-copy > p:not(.eyebrow),
  .manifest-copy > p:not(.eyebrow),
  .scale-close,
  .lab-close,
  .lab-card > p:not(.instrument-label),
  .tool-list dd { max-width: 560px; }
  .manifest-copy .manifest-detail { max-width: 560px !important; }
  .arrival-proof p { max-width: 560px; }

  .state-06 .rig-col { display: contents; }
  .scale-copy { order: 1; margin-top: clamp(0px, calc(22px - (100vw - 390px) * 0.0759), 22px); }
  .launch-log { order: 2; }
  .tool-list { order: 4; }
  .scale-close { order: 5; }
  .scale-copy .scale-lede {
    margin-top: 10px;
    font-size: clamp(17px, calc(18px - (100vw - 390px) * 0.00345), 18px);
    line-height: 1.35;
    max-width: 36.5em;
  }
  .launch-log {
    width: 100%;
    margin-top: clamp(20px, calc(20px + (100vw - 390px) * 0.031), 29px);
    padding: 12px 14px;
  }
  .instrument-label { font-size: 11px; line-height: 11px; }
  .launch-log dl { gap: 7px; margin-top: 9px !important; }
  .launch-log dl > div { grid-template-columns: 62px minmax(0, 1fr); min-height: 21px; }
  .launch-log dt { font-size: 11px; line-height: 21px; }
  .launch-log dd { font-size: 15px; line-height: 21px; }
  .launch-log .launch-tally {
    margin-top: 9px;
    padding-top: 10px;
    font-size: 30px;
    line-height: 27px;
  }
  .tool-list {
    width: 100%;
    margin-top: clamp(10px, calc(10px + (100vw - 390px) * 0.041), 22px);
  }
  .tool-list > div { min-height: 50px; padding: 6px 0 7px; }
  .tool-list dt { font-size: 11px; line-height: 11px; }
  .tool-list dd { margin-top: 5px !important; font-size: 15px; line-height: 1.33; }
  .scale-close {
    width: 100%;
    margin-top: clamp(10px, calc(10px + (100vw - 390px) * 0.0345), 20px);
    font-size: 18px;
    line-height: 1.35;
    max-width: 36.5em;
  }

  .lab-copy { margin-top: 22px; }
  .lab-copy > p:not(.eyebrow) { margin-top: 12px; font-size: 18px; line-height: 1.35; }
  .lab-registers {
    width: 100%;
    margin-top: 22px;
    gap: 12px;
  }
  .lab-card { padding: 12px 13px; }
  .lab-card > p:not(.instrument-label) { margin-top: 6px !important; font-size: 15px; line-height: 1.31; }
  .lab-writing > strong { margin-top: 6px; font-size: 15px; line-height: 1.33; }
  .lab-writing > p.lab-also { margin-top: 11px !important; font-size: 15px; line-height: 1.3; }
  .lab-close {
    width: 100%;
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.35;
  }

  .state-08 .stage-rig { justify-content: flex-start; }
  .navigator-copy {
    align-self: stretch;
    width: auto;
    margin: 47px -53px 0 -61px;
    padding: 41px 53px 45px 61px;
    border-radius: 23px;
  }
  .navigator-copy h2 { font-size: 52px; }
  .navigator-copy > p:not(.eyebrow) { margin-top: 13px; font-size: 17px; line-height: 1.38; }
  .contact-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin-top: 18px;
  }
  .contact-lines a,
  .contact-lines button {
    width: 100%;
    min-height: 44px;
    padding-inline: 9px;
    font-size: 10.5px;
    text-align: center;
  }
  .contact-lines a:first-child,
  .contact-lines button { grid-column: 1 / -1; }

  .caseback-water-table {
    right: -24px;
    left: -24px;
  }

  /* Mobile: the slab is a centered panel around the document, not a
     full-page sheet. */
  .state-09a .stage-rig {
    padding-inline: var(--stage-gutter);
    /* `center` overflows BOTH padding edges once the caseback is taller than
       its rig, which rode the heading up under the utility pills at 360x640.
       `safe` degrades to flex-start in exactly that case and changes nothing
       when the content fits. The plain value stays first as the fallback for
       engines that do not parse the keyword. */
    justify-content: center;
    justify-content: safe center;
  }
  .caseback-intro {
    display: block;
    align-self: stretch;
    margin-top: 0;
  }
  .caseback-intro h2 { max-width: none; font-size: 36px; line-height: 1.06; }
  .chart-table,
  .credits {
    align-self: stretch;
    margin-top: 8px;
  }
  .chart-table { grid-template-columns: minmax(0, 1fr); }
  .chart-table h3, .credits h3 { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.08em; }
  .chronology dl > div { grid-template-columns: 76px minmax(0, 1fr); min-height: 40px; padding-block: 8px; }
  .chronology dt { font-size: 10px; line-height: 16px; letter-spacing: 0.06em; }
  .chronology dd { font-size: 14px; line-height: 19px; }
  .credits dl {
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid rgba(16, 28, 56, 0.28);
    border-bottom: 1px solid rgba(16, 28, 56, 0.28);
  }
  .credits dl > div { display: block; min-height: 48px; padding-block: 9px; border-top: 0; border-bottom: 0; }
  .credits dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .credits dl > div + div { border-top: 1px solid rgba(16, 28, 56, 0.14); }
  .credits dt { font-size: 10px; line-height: 13px; letter-spacing: 0.08em; }
  .credits dd { margin-top: 2px !important; font-size: 14px; line-height: 19px; }
  .credits-closing { max-width: none; margin-top: 24px; }
  .closing-statement { font-size: 22px; line-height: 1.28; }

  .state-10 .stage-rig {
    justify-content: flex-end;
    padding-bottom: calc(var(--nav-clear) - 8px);
  }
  .landfall-copy {
    align-self: stretch;
    width: auto;
    margin: 0 -53px 0 -61px;
    padding: 41px 53px 44px 61px;
    border-radius: 23px;
  }
  .landfall-copy h2 { font-size: 58px; line-height: 0.9; }
  .landfall-note { margin-top: 10px !important; font-size: 16px; line-height: 1.25; }
  .landing-bearing { margin-top: 10px !important; font-size: 10px; }
  .email-cta { margin-top: 12px; font-size: 10.5px; }
  .visitor-log { margin-top: 9px !important; font-size: 10px; }
  .copyright { display: block; margin-top: 6px !important; font-size: 10px; line-height: 13px; }

  .controls.journey-bar {
    width: calc(100% - 28px);
    height: 56px;
    padding: 5px 7px;
  }
  .copy-state-nav {
    grid-template-columns: 44px minmax(0, 1fr) 84px;
    gap: 10px;
  }
  html[data-copy-id="01"] .copy-state-nav {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  html[data-copy-id="10"][data-journey-unlocked="true"] .copy-state-nav {
    grid-template-columns: 44px minmax(0, 1fr) 110px;
  }
  .journey-position strong { padding-top: 9px; font-size: 11px; line-height: 13px; }
  .journey-next { padding-inline: 8px; gap: 6px; font-size: 10.5px; }
  .journey-next span { white-space: nowrap; }
  .journey-mark[data-kind="breath"] { top: 2px; width: 6px; height: 6px; }
  .journey-mark.is-current { top: 1.5px; width: 7px; height: 7px; }

  .journey-chart {
    width: 100%;
    max-width: none;
    max-height: min(640px, 78vh);
    margin: auto 0 0;
    padding: 18px 18px 22px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 23px 23px 0 0;
  }
  .journey-chart-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: 2px;
    background: rgba(16, 28, 56, 0.35);
  }
  .journey-chart ol { grid-template-columns: 1fr; }
  .journey-chart li button { min-height: 52px; }
}

/* Narrow + short (360×640 …): the ratified compressions. */
@media (max-width: 680px) and (max-height: 720px) {
  :root {
    --layout-density: "short";
    --mast-top: 12px;
    --mast-clear: 68px;
    --nav-clear: 114px;
  }
  .state-01 .surface-veil { margin-top: 10px; }
  .state-01 .claim-group { margin-top: 24px; padding-top: 20px; }
  .state-01 .claim { font-size: 32px; }
  .arrival-proof p { font-size: 13.5px; line-height: 1.12; }
  .manifest-lede { font-size: 24px !important; line-height: 1.08 !important; }
  .manifest-copy > p:not(.eyebrow) { margin-top: 8px; font-size: 14px; line-height: 1.22; }
  .manifest-copy .manifest-detail { margin-top: 6px !important; font-size: 13px; line-height: 1.2; }
  .proof-rail { margin-top: 26px; }
  .proof-rail dl { gap: 6px; }
  .proof-rail dl > div { min-height: 60px; }
  .proof-rail dt { font-size: 26px !important; }
  .proof-rail dd { margin-top: 4px !important; font-size: 10px; line-height: 1.15; }
  .state-03a .flagship-copy { margin-top: 0; padding-top: 22px; padding-bottom: 20px; }
  .state-03a .flagship-copy h2 { font-size: 33px; }
  .instrument-rail { margin-top: 18px !important; padding-top: 10px; font-size: 9.5px; }
  .state-03a .standfirst { margin-top: 16px !important; font-size: 15px; }
  .flagship-scope { margin-top: 12px !important; font-size: 13px; }
  .evidence { margin-top: 16px; }
  .provenance { margin-top: 9px !important; font-size: 10px; line-height: 13px; }
  .turn-copy { margin-top: clamp(90px, 26vh, 220px); }
  .scale-copy h2,
  .lab-copy h2 { font-size: 34px; }
  .scale-copy { margin-top: 0; }
  .scale-copy h2 { font-size: 35px; }
  .scale-copy .scale-lede { margin-top: 10px; font-size: 13px; line-height: 1.22; }
  .launch-log { margin-top: 16px; padding: 10px 12px; }
  .launch-log dl { gap: 5px; margin-top: 8px !important; }
  .launch-log dl > div { grid-template-columns: 56px minmax(0, 1fr); min-height: 18px; }
  .launch-log dt { font-size: 10px; line-height: 18px; }
  .launch-log dd { font-size: 13px; line-height: 18px; }
  .launch-log .launch-tally {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 24px;
    line-height: 26px;
  }
  .tool-list { margin-top: 12px; }
  .tool-list > div { min-height: 0; padding: 5px 0; }
  .tool-list dt { font-size: 10px; line-height: 10px; }
  .tool-list dd { margin-top: 4px !important; font-size: 13px; line-height: 1.25; }
  .scale-close { margin-top: 14px; font-size: 14px; line-height: 1.3; }
  .lab-copy { margin-top: 0; }
  .lab-copy > p:not(.eyebrow) { margin-top: 10px; font-size: 13px; line-height: 1.22; }
  .lab-registers { margin-top: 16px; gap: 8px; }
  .lab-card { padding: 8px 10px; }
  .lab-card > p:not(.instrument-label) { margin-top: 5px !important; font-size: 13px; line-height: 1.25; }
  .lab-writing > strong { margin-top: 5px; font-size: 13px; line-height: 1.28; }
  .lab-writing > p.lab-also { margin-top: 8px !important; font-size: 13px; line-height: 1.25; }
  .lab-close { margin-top: 14px; font-size: 14px; line-height: 1.3; }
  .navigator-copy { margin-top: 10px; padding-top: 30px; padding-bottom: 32px; }
  .navigator-copy > p:not(.eyebrow) { font-size: 15px; }
  .caseback-intro { margin-top: 0; }
  .caseback-intro h2 { font-size: 28px; }
  .chart-table, .credits { margin-top: 18px; }
  .chart-table h3, .credits h3 { margin-bottom: 6px; }
  .chronology dl > div { min-height: 32px; padding-block: 6px; }
  .chronology dd { font-size: 12.5px; line-height: 16px; }
  .credits dl > div { min-height: 38px; padding-block: 6px; }
  .credits dd { font-size: 12.5px; line-height: 16px; }
  .credits-closing { margin-top: 16px; }
  .closing-statement { font-size: 18px; }
  .landfall-copy { padding-top: 30px; }
  .landfall-copy h2 { font-size: 47px; }
  .landfall-note { margin-top: 7px !important; font-size: 14px; line-height: 1.18; }
  .email-cta { margin-top: 9px; }
  .landing-bearing { margin-top: 7px !important; }
  .visitor-log { margin-top: 7px !important; }
  .copyright { margin-top: 4px !important; }
}

@media (max-width: 380px) and (max-height: 720px) {
  .chronology dl > div { min-height: 28px; padding-top: 6px; }
  .chronology dd { font-size: 11.5px; line-height: 15px; }
  .credits dl > div { min-height: 34px; padding-top: 6px; }
  .credits dd { font-size: 11.5px; line-height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .copy-state,
  .copy-atmosphere,
  .site-masthead { transform: none !important; transition: none !important; }
}

.clean-capture .copy-state-nav { display: none !important; }

@media print {
  .copy-state:not(.is-active),
  .site-masthead,
  .copy-state-nav { display: none !important; }
}


/* ======================================================================
   Scroll-driven traverse and the Aug 20 language pass.
   Promoted from the sketch layer at LOCK: the deploy boundary allows
   exactly five runtime files, so these rules live here rather than in
   their own stylesheet.
   ====================================================================== */
/* SKETCH — site language pass (Aug 20). Throwaway layer.
   Delete this file + sketch-language-pass.js + their two <link>/<script>
   lines in index.html and the sketch is gone.

   Everything here reuses the shipped grammar rather than inventing:
   gold border = evidence that takes you somewhere (.lab-writing precedent).
   No drop shadows anywhere (permanent rule, Aug 16). */

/* ---- stop 06: the launch log becomes an evidence link ------------------ */
/* :has() so the gold only exists while the link does — flip #gold=off and the
   instrument returns to its shipped cyan with no other change. */

.launch-log:has(.launch-source) {
  border-color: rgba(227, 182, 79, 0.7);
}

.launch-log:has(.launch-source) .instrument-label {
  color: var(--copy-gold);
}

.launch-source {
  margin-top: 11px !important;
  padding-top: 11px;
  border-top: 1px solid rgba(227, 182, 79, 0.28);
}

.launch-source a {
  color: var(--copy-gold);
  font: 500 14px/1.36 var(--copy-mono);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.launch-source a:hover { text-decoration: underline; }

.launch-source a:focus-visible {
  outline: 2px solid var(--copy-gold);
  outline-offset: 3px;
}

/* ---- stop 07: the Darkroom Buddy artifact card ------------------------- */
/* Mirrors .lab-writing exactly so the two link-out cards read as one pair. */

.lab-artifact {
  border-color: rgba(227, 182, 79, 0.7);
}

.lab-artifact .instrument-label { color: var(--copy-gold); }

.lab-artifact > strong {
  display: block;
  margin-top: 7px;
  color: var(--copy-paper);
  font: 500 17px/1.36 var(--copy-display);
}

.lab-artifact > p.lab-artifact-body {
  margin-top: 7px !important;
  color: var(--copy-paper);
  font: 400 18px/1.42 var(--copy-body);
}

.lab-artifact > p.lab-also {
  margin-top: 10px !important;
  color: var(--copy-gold);
  font: 400 16px/1.375 var(--copy-body);
}

.lab-artifact > p.lab-also a {
  color: var(--copy-gold);
  white-space: nowrap;
  text-decoration: none;
}

.lab-artifact > p.lab-also a:hover { text-decoration: underline; }

.lab-artifact > p.lab-also a:focus-visible {
  outline: 2px solid var(--copy-gold);
  outline-offset: 3px;
}

/* Four cards where the ratified stack held three. The wide tier needs the
   same treatment: at 1440x900 the untightened stack clipped the writing card
   by 117px. Measured, not guessed. */
.lab-registers { gap: 10px; }
.lab-card { padding: 12px 17px; }
.lab-artifact > p.lab-artifact-body { font-size: 17px; line-height: 1.38; }
.lab-artifact > p.lab-also { margin-top: 8px !important; }
.lab-writing > p.lab-also { margin-top: 9px !important; }

@media (max-width: 1179px) {
  .lab-registers { gap: 11px; }
  .lab-card { padding: 12px 15px; }
  .lab-artifact > p.lab-artifact-body { font-size: 16px; line-height: 1.36; }
}
/* SKETCH — scroll-driven traverse (Aug 20). Throwaway layer.
   Delete with sketch-scroll.js and its two tags in index.html. */

/* The visual layer is already position:fixed, so it stays pinned while the
   document scrolls behind it. All this does is let the document scroll. */
html[data-scroll="on"],
html[data-scroll="on"] body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100%;
  /* `overscroll-behavior-y: none` here — and `overscroll-behavior: none` on body
     in styles.css — is the documented way to suppress Android pull-to-refresh.
     That was right when the page did not scroll: overscroll made a fixed canvas
     feel like a document. Under the traverse the page IS a document, and a pull
     at the top should refresh the way it does everywhere else on the phone.
     Refreshing is cheap now — the scroll layer restores the visitor's stop.

     Declared on both html and body because only the root propagates to the
     viewport, and body carries its own `none` from styles.css; setting both
     removes the ambiguity rather than relying on propagation order.

     The x axis is pinned to `none` — tighter than the `auto` html computed
     before — so a sideways overscroll cannot trigger browser back/forward. */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

/* Letting the document scroll is not enough on a touch device: the browser also
   has to be willing to turn a thumb drag into a scroll, and two rules written
   for the ride model say it must not.

   1. styles.css gives canvas#scene `touch-action: none`, correct when app.js
      consumed swipes to advance a stop. The canvas is inset:0 inside a fixed
      .study and the copy layer above it is pointer-events:none, so EVERY point
      on screen hit-tests to it — measured 5/5 probe points on a 412x915 Pixel
      viewport. Chromium will not begin a pan from a touch-action:none element
      whatever the listeners do, so a thumb swipe moved the page 0px while a
      mouse wheel, which never consults touch-action, worked fine.

   2. An overflowing rig takes `overscroll-behavior: contain` (line ~185) so a
      swipe stayed in the region instead of driving the journey. Under scroll
      that dead-ends stop 07: the rig absorbs the swipe, exhausts its own 69px,
      and refuses to chain the remainder to the document.

   Both are scoped to [data-scroll="on"], which only the scroll layer sets, so
   the retained #scroll=off ride model keeps the original behaviour untouched.
   pan-y, not auto: vertical panning is all the traverse needs, and taps still
   reach the water for ripples because touch-action governs pans, not clicks. */
html[data-scroll="on"] canvas#scene {
  touch-action: pan-y;
}

html[data-scroll="on"] .stage-rig[data-copy-overflowing="true"] {
  overscroll-behavior: auto;
}

/* A real scrollbar is the point — it is the affordance that says "this is
   yours to pace". Styled so it reads as an instrument, not chrome. */
html[data-scroll="on"] { scrollbar-width: thin; scrollbar-color: rgba(227,182,79,.5) transparent; }
html[data-scroll="on"] ::-webkit-scrollbar { width: 11px; }
html[data-scroll="on"] ::-webkit-scrollbar-track { background: rgba(7,10,24,.4); }
html[data-scroll="on"] ::-webkit-scrollbar-thumb {
  background: rgba(227,182,79,.5);
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: content-box;
}
html[data-scroll="on"] ::-webkit-scrollbar-thumb:hover { background: rgba(227,182,79,.8); background-clip: content-box; }

#journeyScrollSpacer { pointer-events: none; width: 1px; }


/* ---- the journey bar tracks scroll ------------------------------------- */
/* Same geometry copy.js uses for the dots — left: index * 100% / span — but
   with a fractional index, so the diamond slides instead of snapping. The
   ends are inset by half a diamond so no per-end transform special-casing
   is needed (copy.js does that discretely for index 0 and the last mark). */

html[data-journey-live="on"] .journey-progress {
  position: absolute;
  top: 4.5px;
  left: 0;
  height: 1px;
  width: calc(var(--pos, 0) * 100% / var(--span, 11));
  opacity: .55;
  background: var(--bar-mark);
}

html[data-journey-live="on"] .journey-here {
  position: absolute;
  z-index: 2;
  top: 0.5px;
  /* copy.js's end dots are transform:none / translateX(-100%), so the dot
     CENTRES run 2px .. (100% - 2px), not 0 .. 100%. Match that or the
     diamond sits off the first and last dot. */
  left: calc(2px + var(--pos, 0) * (100% - 4px) / var(--span, 11));
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
  opacity: .9;
  background: var(--bar-mark);
}

/* one you-are-here marker, not two: copy.js's discrete diamond stands down */
html[data-journey-live="on"] .journey-mark.is-current,
html[data-journey-live="on"] .journey-mark.is-current[data-index="0"] {
  top: 3px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: .4;
}
html[data-journey-live="on"] .journey-mark[data-index="0"] { transform: none; }
html[data-journey-live="on"] .journey-mark.is-visited { opacity: .75; }

@media (max-width: 680px) {
  html[data-journey-live="on"] .journey-here { top: 1.5px; width: 7px; height: 7px; }
}

/* .journey-mark.is-current[data-index="0"] outranks the plain index-0 rule
   above, so dot 0 kept translateX(-50%) and sat 2px left of the diamond. */
html[data-journey-live="on"] .journey-mark.is-current[data-index="0"] { transform: none; }

/* Compass moved from a bright dusk-water stop to a dark pre-dawn one, and
   .state-03a hard-codes --copy-ink / --copy-plum throughout: written for a
   surface stop, invisible on dark-state's rgba(8,17,37,.91) ground. Flip the
   inks to paper, matching what .state-03b already did as the dark twin.
   (This is the baton's colour trap wearing a different hat.) */
.dark-state .flagship-scope,
.dark-state .flagship-copy h2 mark,
.dark-state .evidence figcaption { color: var(--copy-paper); }

.dark-state .instrument-rail {
  color: var(--copy-cyan);
  border-top-color: rgba(247, 242, 231, 0.18);
}

.dark-state .evidence-flagship .provenance { color: rgba(247, 242, 231, 0.34); }

/* copy.css hardcodes the rail divisor at 11 (twelve stops). With nine, the
   dots spanned 8/11 of the rail and bunched left while the diamond spanned
   all of it. Re-derive every mark and edge from the real count. */
html[data-journey-live="on"] .journey-edge {
  left: calc(2px + var(--edge-index) * (100% - 4px) / var(--span, 8));
  width: calc((100% - 4px) / var(--span, 8));
}
html[data-journey-live="on"] .journey-mark,
html[data-journey-live="on"] .journey-mark[data-index="0"],
html[data-journey-live="on"] .journey-mark.is-current,
html[data-journey-live="on"] .journey-mark.is-current[data-index="0"] {
  left: calc(2px + var(--mark-index) * (100% - 4px) / var(--span, 8));
  transform: translateX(-50%);
}

/* [4] .credits carried its own margin-top from when it was its own stop.
   Nested inside .chart-table it double-applied, dropping it 49.5px below the
   chronology. And its two-column ledger is far too cramped at half width now
   that it shares a row — one column reads as a clean label/value list. */
.chart-table > .credits { margin-top: 0; }
.chart-table .credits dl { grid-template-columns: minmax(0, 1fr); }
.chart-table .credits dl > div { border-top: 1px solid rgba(16, 28, 56, 0.14); border-bottom: 0; }
.chart-table .credits dl > div:first-child { border-top-color: rgba(16, 28, 56, 0.28); }
.chart-table .credits dl > div:last-child { border-bottom: 1px solid rgba(16, 28, 56, 0.28); }

/* [3] .lab-writing spanned both columns — right when the stack held three
   cards, wrong now there are four. Dropping the span gives a clean 2x2, and
   the rows land on a real distinction: internal proof on top, public
   artefacts with links underneath. */
.lab-registers .lab-writing { grid-column: auto; }

@media (min-width: 681px) and (max-width: 1179px) {
  /* [2] The tool list still had three tracks from when there were three
     tools; with two, one track sat empty and the divider missed the middle.
     Two even columns, edges flush with the launch log above, one hairline
     down the centre — log and tools read as one instrument panel. */
  .tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    border-top: 1px solid rgba(247, 242, 231, 0.16);
  }
  .tool-list > div { padding: 12px 26px; border-top: 0; }
  .tool-list > div:first-child { padding-left: 0; }
  .tool-list > div + div { border-left: 1px solid rgba(247, 242, 231, 0.16); }
  .tool-list { order: 5; }
  .scale-close { order: 6; }
}

/* Narrow keeps everything in one column — the 2x2 register grid and the
   split tool list are both compact-tier decisions. */
@media (max-width: 680px) {
  .lab-registers { grid-template-columns: minmax(0, 1fr); }
  .lab-registers .lab-writing { grid-column: auto; }
}

/* ---- ride notes, round 3 ----------------------------------------------- */

/* [2] The closing line spans the table now instead of sitting in the credits
   column, so it reads left-aligned under the chronology. */
.chart-table > .credits-closing {
  grid-column: 1 / -1;
  margin-top: clamp(20px, 3vh, 34px);
  text-align: left;
}

/* [3] At compact the flagship frame carries aspect-ratio: 2/1 AND
   max-height: clamp(220px, 30vh, 340px). Capping the height caps the width
   through the ratio — at 1100x900 that is 30vh = 270px tall, so 540px wide
   inside a 720px column. Let it fill the column; the ratio sets the height. */
@media (min-width: 681px) and (max-width: 1179px) {
  /* Full column width is the ask, but aspect-ratio would then dictate the
     height and stop 03A overflowed by 81px. Drop the ratio, set the height
     directly, and let the img cover — the capture is a wide sea with the
     boat centred, so it crops from the top and bottom without losing it. */
  .evidence-flagship .media-frame,
  .evidence-route .media-frame {
    width: 100%;
    aspect-ratio: auto;
    max-height: none;
    height: clamp(190px, 25vh, 290px);
  }
}

/* [1] The two caseback columns are separate <dl> grids, so each sized its own
   rows and any wrap in one column pushed every row below it out of step with
   the other. Trimming copy to fit only holds until the next edit or the next
   width — lock the rhythm instead. Both columns share one row height, so the
   rules line up whatever the text does. */
.chart-table { --caseback-row: 52px; }
.chart-table .chronology dl > div,
.chart-table .credits dl > div { min-height: var(--caseback-row); }

/* Only lock the rhythm while the table IS two columns — measured: it stacks
   between 850 and 860px, and below that a forced row height is dead space. */
@media (max-width: 1179px) { .chart-table { --caseback-row: 58px; } }
@media (max-width: 855px)  { .chart-table { --caseback-row: 0px; } }

/* ---- ride notes, round 4 ----------------------------------------------- */

/* .flagship-copy is one of the left-bleed glass bands, so its BOX is much
   wider than its TEXT. Matching the frame to the box made it overhang the
   copy on both sides. The figure just needs the copy's own inline padding,
   so both share one text edge — no measuring, same value. */
@media (min-width: 681px) and (max-width: 1179px) {
  .state-03a .evidence { padding-inline: clamp(28px, 4vw, 44px); }
}

/* Stacked, the section gap was the table's row-gap (34px) while the gap above
   EXHIBIT A is the table's own margin-top. Make the row gap that same token
   and the two reads match by construction, not by a tuned number. */
@media (max-width: 855px) {
  .chart-table { row-gap: clamp(34px, 5.5vh, 56px); }
  .chart-table > .credits { margin-top: 0; }
}
/* The narrow tier runs a much tighter vertical rhythm — the gap above
   EXHIBIT A is ~15px there, so 49.5 between sections read as a hole. */
@media (max-width: 680px) { .chart-table { row-gap: 16px; } }