/* ==========================================================================
   AIWave — site system v7
   Direction: "Routing instrument." A technical manual printed on paper, with
   the machine itself shown as ink plates. Editorial grid, hairline rules,
   one signature colour used as a marker (never as a glow).

   LOGO LOCK: the wordmark path, its stroke, and its type stack are frozen
   tokens at the bottom of this file. Nothing else in the system may touch
   them. The mark only ever sits on ink, because acid on paper is unreadable.

   Rules held throughout:
   - No border-radius, no box-shadow, no gradient, no blur, no glass.
   - Motion is transform + opacity only, gated on html.js, killed by
     prefers-reduced-motion, and pausable from the header.
   - Content is visible without JavaScript. Nothing is JS-injected.
   ========================================================================== */

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; }

/* ---------- tokens ---------- */

:root {
  --ink: #0b0e0b;
  --ink-2: #161c15;
  --ink-3: #3b3d3a;

  --paper: #f1f1ee;
  --paper-2: #e6e6e1;
  --paper-3: #dadad4;

  --acid: #c8ff46;
  --on-void: #f0f0ec;
  --ember: #e8501f;

  /* numerals are the instrument's readout: acid on ink, ink on paper.
     A darkened acid is olive, and olive on a light ground is what read as 土. */
  --num: var(--ink-3);

  --dim: #9b9e98;
  --dim-2: #727570;

  --rule: rgba(11, 14, 11, 0.24);
  --rule-soft: rgba(11, 14, 11, 0.12);
  --rule-ink: rgba(240, 240, 236, 0.18);
  --rule-ink-soft: rgba(240, 240, 236, 0.09);

  --display: Bahnschrift, "Segoe UI", system-ui, -apple-system, sans-serif;
  --text: Bahnschrift, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui: Bahnschrift, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: min(1340px, 100% - clamp(36px, 6.5vw, 112px));
  --half-gutter: clamp(18px, 3.25vw, 56px);
  --measure: 64ch;

  --hdr: 66px;
  --pad-y: clamp(52px, 7vw, 104px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base type ---------- */

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 180ms var(--ease), color 180ms var(--ease);
}
a:hover { text-decoration-color: currentColor; }

code, kbd, samp { font-family: var(--mono); font-size: 0.86em; }

strong, b { font-weight: 600; }

/* emphasis is a weight and a tone, never a synthetic oblique */
em { font-style: normal; }
p em, li em, dd em, blockquote em { color: var(--ink); font-weight: 400; }
.band--ink p em, .band--ink li em, .band--ink dd em { color: var(--on-void); }

::selection { background: var(--acid); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.band--ink :focus-visible,
.masthead :focus-visible { outline-color: var(--acid); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 10px 16px; background: var(--acid); color: var(--ink);
  font-family: var(--ui); font-size: 0.8125rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

.wrap { width: var(--wrap); margin-inline: auto; }

.band { position: relative; }
.band--paper { background: var(--paper); }
.band--paper2 { background: var(--paper-2); border-top: 1px solid var(--rule); }
.band--ink { background: var(--ink); color: var(--on-void); --num: var(--acid); }
/* a second ink tone, so two adjacent dark panels stay legible as two panels */
.band--ink2 { background: var(--ink-2); border-top: 1px solid var(--rule-ink-soft); }

.band--ink p { color: var(--dim); }
.band--ink strong { color: var(--on-void); }

.pad { padding-block: var(--pad-y); }
.pad-lg { padding-block: clamp(76px, 9vw, 148px); }
.pad-sm { padding-block: clamp(38px, 4.6vw, 68px); }
.pad-tight { padding-block: clamp(34px, 4.4vw, 62px); }
.mt-0 { margin-top: 0; }

.rule-top { border-top: 3px solid var(--ink); }
.band--ink .rule-top,
.band--ink.rule-top { border-top-color: var(--on-void); }

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

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-ink-soft);
}
.masthead-inner {
  width: var(--wrap); margin-inline: auto;
  height: var(--hdr);
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px);
}

/* LOGO — frozen. See the lock block at the end of this file. */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  width: fit-content; flex: none;
  font: 700 20px/1 var(--logo-font);
  letter-spacing: -0.075em;
  color: var(--on-void);
  text-decoration: none;
  opacity: 0;
  transition: opacity 420ms var(--ease) 60ms;
}
html.js .wordmark { opacity: 0; }
html.js.ready .wordmark { opacity: 1; }
html:not(.js) .wordmark { opacity: 1; }
.wordmark svg { width: 31px; height: 27px; flex: none; overflow: visible; }
.wordmark span { display: block; padding-top: 1px; }

.nav {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px);
  margin-left: auto;
}
.nav-link {
  position: relative;
  font-family: var(--ui); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 9px 0;
  white-space: nowrap;
  transition: color 180ms var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--acid);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.nav-link:hover { color: var(--on-void); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--on-void); }

.masthead-tools { display: flex; align-items: center; gap: 14px; flex: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--ui); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.055em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transition: color 200ms var(--ease);
}
.btn > * { position: relative; z-index: 1; }

.btn--acid { background: var(--acid); color: var(--ink); }
.btn--acid::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--on-void);
  transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.btn--acid:hover::after { transform: scaleX(1); transform-origin: left; }

.btn--line {
  color: var(--on-void);
  border: 1px solid var(--rule-ink);
}
.btn--line::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--paper);
  transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.btn--line:hover { color: var(--ink); border-color: var(--on-void); }
.btn--line:hover::after { transform: scaleX(1); transform-origin: left; }

.btn--ink { background: var(--ink); color: var(--on-void); }
.btn--ink::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--acid);
  transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.btn--ink:hover { color: var(--ink); }
.btn--ink:hover::after { transform: scaleX(1); transform-origin: left; }

/* motion pause — a real control, not decoration */
.pause {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px;
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
  transition: color 180ms var(--ease);
}
.pause:hover { color: var(--on-void); }
.pause i {
  display: block; width: 9px; height: 10px; flex: none;
  background:
    linear-gradient(var(--acid), var(--acid)) left center / 3px 100% no-repeat,
    linear-gradient(var(--acid), var(--acid)) right center / 3px 100% no-repeat;
  transition: opacity 180ms var(--ease);
}
.pause[aria-pressed="true"] i { opacity: 0.4; }
.pause-txt { display: inline; }

.nav-toggle {
  display: none;
  align-items: center; gap: 9px;
  min-height: 44px;
  font-family: var(--ui); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-void);
}
.nav-toggle i {
  display: block; width: 18px; height: 1px; background: currentColor;
  position: relative;
}
.nav-toggle i::before,
.nav-toggle i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px;
  background: currentColor;
  transition: transform 240ms var(--ease-out), opacity 180ms var(--ease);
}
.nav-toggle i::before { top: -6px; }
.nav-toggle i::after { top: 6px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- cover / poster ---------- */

/* A flat ink field. No texture, no glow, no grid overlay: the composition
   carries the page, and a printed surface does not glow. */
.cover {
  position: relative;
  background: var(--ink);
  --num: var(--acid);
  color: var(--on-void);
  overflow: hidden;
}
.cover > * { position: relative; z-index: 1; }
.cover > .field { position: absolute; inset: 0; z-index: 0; }
.field canvas { display: block; width: 100%; height: 100%; }

.cover-inner { padding-block: clamp(40px, 5.6vw, 82px) 0; }

.cover-aside {
  align-self: end;
  display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px);
  padding-bottom: 6px;
}

/* the cover is the one place acid is allowed to draw a line, not a field */
.cover .kicker::before { background: var(--acid); }
.cover .track-head { background: var(--acid); }
.cover .stations li:nth-child(2)::before { background: var(--acid); }
.cover .poster em { color: var(--acid); }
.cover .cover-foot span:first-child { color: var(--acid); }

.kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: none;
  font-family: var(--ui); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim);
}
.kicker::before {
  content: ""; display: block; width: 22px; height: 1px;
  background: var(--acid); flex: none;
}
.band--paper .kicker,
.band--paper2 .kicker { color: var(--ink-3); }
.band--paper .kicker::before,
.band--paper2 .kicker::before { background: var(--ink); }

.poster {
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.034em;
  color: var(--on-void);
}
.poster em {
  display: inline-block;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.038em;
}

.lede {
  margin-top: clamp(22px, 2.4vw, 30px);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--dim);
}

.cover-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 14px;
  margin-top: clamp(26px, 3vw, 36px);
}

/* the track: three stations on one hairline */
.track {
  position: relative;
  margin-top: clamp(44px, 5.5vw, 78px);
  padding-top: 0;
}
.track-line {
  position: relative;
  height: 1px;
  background: var(--rule-ink);
  overflow: visible;
}
.track-head {
  position: absolute; top: -3px; left: 0;
  width: 7px; height: 7px;
  background: var(--acid);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: translateX(0);
}
html.js.ready .track-head { animation: sweep 9s linear infinite; }
@keyframes sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sweep, 100%)); }
}

.stations {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(16px, 3vw, 48px);
  padding-top: 22px;
}
.stations li { position: relative; min-width: 0; }
.stations li::before {
  content: ""; position: absolute; left: 0; top: -22px;
  width: 1px; height: 9px; background: var(--rule-ink);
}
.stations li:nth-child(2)::before { width: 3px; background: var(--acid); height: 12px; }
.st-num {
  display: block;
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--num); letter-spacing: 0.08em;
}
.st-name {
  display: block; margin-top: 5px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--on-void);
}
.st-note {
  display: block; margin-top: 3px;
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dim-2);
}

.cover-foot {
  display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap;
  max-width: none;
  margin-top: clamp(34px, 4vw, 52px);
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule-ink-soft);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim-2);
}
.cover-foot span { color: var(--dim); }
.cover-foot i { font-style: normal; color: var(--rule-ink); }

/* ---------- vendor band: a fixed label and a moving channel strip ---------- */

.vendor-band {
  display: flex; align-items: stretch;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.vendor-cap {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 40px);
  border-right: 1px solid var(--rule);
  font-family: var(--ui); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  max-width: none;
  white-space: nowrap;
}
.vendor-cap .num { color: var(--num); font-size: 0.75rem; letter-spacing: 0.06em; }

.marquee {
  flex: 1; min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-run 28s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* two identical halves, each carrying its own trailing gap, so -50% lands
   exactly on the seam and the loop has no stutter */
.marquee-half {
  display: flex; align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  padding-right: clamp(18px, 2.6vw, 40px);
  padding-block: clamp(14px, 1.6vw, 19px);
}
.v-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  letter-spacing: -0.012em; line-height: 1;
  color: var(--ink); white-space: nowrap;
}
.v-sep {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1;
  color: var(--num);
}

/* ---------- page head (interior pages) ---------- */

.page-head {
  padding-block: clamp(40px, 5.2vw, 74px) clamp(30px, 3.6vw, 48px);
  overflow: hidden;
}
.page-head > .field { position: absolute; inset: 0; z-index: 0; }
.page-head > .wrap { position: relative; z-index: 1; }
.page-head .kicker { margin-bottom: clamp(18px, 2.2vw, 26px); }
.page-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.35rem, 5.7vw, 4.55rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 18ch;
}
.page-title em { font-style: normal; font-weight: 300; }
.band--ink .page-title { color: var(--on-void); }

.page-head .lede { color: var(--ink-3); max-width: 52ch; }
.band--ink .page-head .lede { color: var(--dim); }

.head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: end;
}
.head-note {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 34ch;
}
.band--ink .head-note { border-top-color: var(--rule-ink); }
.head-note .cap { margin-bottom: 6px; }
.head-note p {
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--ink-3);
}
.band--ink .head-note p { color: var(--dim); }

/* ---------- micro type ---------- */

.cap {
  max-width: none;
  font-family: var(--ui); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim-2);
}
.cap a { display: inline-flex; align-items: center; min-height: 26px; }
.band--paper .cap,
.band--paper2 .cap { color: var(--ink-3); }
.band--ink .cap { color: var(--dim); }
.band--ink .tick-rule { border-top-color: var(--rule-ink); }

.num {
  font-family: var(--mono);
  font-variant-numeric: lining-nums tabular-nums;
}

.folio {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

/* ---------- the stage: twelve columns, composed section by section ----------
   No cards, no "header + uniform grid" stacks. Sections enter at different
   columns, rules begin and end where the composition wants them to, and one
   element per screen is allowed to break the measure. */

.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.3vw, 22px);
  row-gap: clamp(18px, 2.2vw, 32px);
  align-items: start;
}
.stage > * { min-width: 0; }

.span-1 { grid-column-end: span 1; }
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; }
.span-10 { grid-column-end: span 10; }
.span-12 { grid-column-end: span 12; }

.from-2 { grid-column-start: 2; }
.from-3 { grid-column-start: 3; }
.from-4 { grid-column-start: 4; }
.from-5 { grid-column-start: 5; }
.from-6 { grid-column-start: 6; }
.from-7 { grid-column-start: 7; }
.from-8 { grid-column-start: 8; }
.from-9 { grid-column-start: 9; }
.from-10 { grid-column-start: 10; }

.bleed-r { margin-right: calc(-1 * var(--half-gutter)); }
.bleed-l { margin-left: calc(-1 * var(--half-gutter)); }

.vlabel {
  writing-mode: vertical-rl;
  align-self: stretch;
  padding-top: 3px;
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
}
.band--ink .vlabel { color: var(--acid); opacity: 0.72; }

.tick-rule { border-top: 1px solid var(--ink); }
.tick-rule--soft { border-top: 1px solid var(--rule); }

.hang .cap { margin-bottom: 8px; }

.h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 19ch;
}
.band--ink .h2 { color: var(--on-void); }
.h2 em, .h3 em { font-style: normal; font-weight: 300; }

.h2--xl {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 0.97;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

/* the technical voice: DIN, uppercase, tight. Mixed against the serif on
   purpose — one family for the argument, another for the machine. */
.din {
  font-family: var(--ui); font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
}

.h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.1875rem; line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* ---------- index row: a printed index, not a card grid ---------- */

[hidden] { display: none !important; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  min-height: 34px; padding: 0 12px;
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
/* the one place green is allowed to fill a shape on a light ground:/n   a solid block reads as a signal, a darkened glyph reads as olive */
.filter[aria-pressed="true"] { background: var(--acid); color: var(--ink); border-color: var(--acid); }

.spec { border-top: 1px solid var(--ink); }
.spec > div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.spec > div:last-child { border-bottom: 1px solid var(--ink); }
.spec dt {
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.spec dd { margin: 0; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); overflow-wrap: anywhere; }

/* notes that sit under a section argument, in the same column */
.shape-notes {
  margin-top: clamp(26px, 3.4vw, 44px);
  display: grid; gap: 18px;
}
.shape-notes .tick-rule { padding-top: 14px; }
.shape-notes p { font-size: 0.9375rem; line-height: 1.55; }

/* ---------- index rows ---------- */

.atlas-tools {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: flex-end; align-items: flex-start;
  padding-bottom: 10px;
}

.index-rows { border-top: 1px solid var(--ink); }
.index-row {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: padding-left 260ms var(--ease-out), background-color 220ms var(--ease);
}
.index-row:hover { background: var(--paper-2); padding-left: 8px; }
.index-row:last-child { border-bottom: 1px solid var(--ink); }
.ix-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.018em; line-height: 1;
  color: var(--ink);
}
.ix-lead {
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
  transition: border-color 200ms var(--ease);
}
.index-row:hover .ix-lead { border-bottom-color: var(--ink); }
.ix-meta {
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); text-align: right;
  white-space: nowrap;
}

/* ---------- ink plate: the machine's screen ---------- */

.plate {
  background: var(--ink);
  color: var(--on-void);
  padding: clamp(20px, 2.6vw, 34px);
  position: relative;
  overflow: hidden;
}
.plate--paper { background: var(--paper-2); color: var(--ink); }
.plate-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--rule-ink);
}
.plate--paper .plate-head { border-bottom-color: var(--rule); }
.plate-head .cap { color: var(--dim-2); }
.plate--paper .plate-head .cap { color: var(--ink-3); }

/* ---------- code ---------- */

.code { position: relative; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-ink);
}
.plate--paper .code-head { border-bottom-color: var(--rule); }
.code-head .cap { color: var(--dim-2); }
.plate--paper .code-head .cap { color: var(--ink-3); }

.copy {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 10px;
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--rule-ink);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.copy:hover { color: var(--on-void); border-color: var(--on-void); }
.copy[data-copied="true"] { color: var(--acid); border-color: var(--acid); }
.plate--paper .copy { color: var(--ink-3); border-color: var(--rule); }
.plate--paper .copy:hover { color: var(--ink); border-color: var(--ink); }

pre.code-block {
  margin: 0; padding: 16px 0 0;
  overflow-x: auto;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.78;
  color: var(--on-void);
  scrollbar-width: thin;
  tab-size: 2;
}
.plate--paper pre.code-block { color: var(--ink); }
pre.code-block code { font-size: inherit; }
pre.code-block .c { color: var(--dim-2); }

/* ---------- table ---------- */

.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.manifest { width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.manifest thead th {
  text-align: left; vertical-align: bottom;
  padding: 0 18px 10px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--ui); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3);
}
.manifest tbody th,
.manifest td {
  text-align: left; vertical-align: baseline;
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-weight: 400;
}
.manifest tbody th {
  font-family: var(--display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -0.006em;
  color: var(--ink);
  white-space: nowrap;
}
.manifest td { font-size: 0.9375rem; color: var(--ink-3); }
.manifest td code { font-size: 0.75rem; color: var(--ink-3); }
.manifest tbody tr { transition: background-color 200ms var(--ease); }
.manifest tbody tr:hover { background: var(--paper-2); }
.manifest tbody tr:last-child th,
.manifest tbody tr:last-child td { border-bottom: 1px solid var(--ink); }

/* ---------- tabs ---------- */

.tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.band--ink .tabs { border-bottom-color: var(--rule-ink); }

.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px;
  font-family: var(--ui); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color 180ms var(--ease);
}
.tab:first-child { padding-left: 0; }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab:hover { color: var(--ink); }
.tab .t-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--num); }

.band--ink .tab { color: var(--dim); }
.band--ink .tab[aria-selected="true"] { color: var(--on-void); }
.band--ink .tab::after { background: var(--acid); }
.band--ink .tab:hover { color: var(--on-void); }

.panel { padding-top: clamp(22px, 2.6vw, 32px); }
.panel[hidden] { display: none; }

/* ---------- entries: the editorial list ---------- */

.entries { border-top: 1px solid var(--rule); }
.entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 0.95fr) minmax(0, 1fr) 22px;
  gap: clamp(14px, 2.4vw, 34px);
  align-items: baseline;
  padding: clamp(16px, 1.9vw, 22px) 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: background-color 220ms var(--ease), padding-left 260ms var(--ease-out);
}
.entry:hover { background: var(--paper-2); padding-left: 10px; }
.entry .e-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--num); }
.entry .e-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink);
}
.entry .e-note { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.entry .e-go {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
  justify-self: end;
  transition: transform 240ms var(--ease-out), color 180ms var(--ease);
}
.entry:hover .e-go { transform: translateX(4px); color: var(--ink); }

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.step {
  background: var(--paper);
  padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.8vw, 20px);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  transition: background-color 220ms var(--ease);
}
.step:hover { background: var(--paper-2); }
.step .s-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--num); }
.step .s-title {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.008em; color: var(--ink);
}
.step .s-note { font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }

/* ---------- claims (numbered statements on ink) ---------- */

.claims { border-top: 1px solid var(--rule-ink); }
.claims li {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 32px);
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--rule-ink-soft);
}
.claims .c-num {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--num); padding-top: 0.4em; letter-spacing: 0.06em;
}
.claims p { max-width: 74ch; color: var(--dim); }
.claims strong { color: var(--on-void); font-weight: 600; }

/* ==========================================================================
   THE BENCH — four plates and the line that makes them
   --------------------------------------------------------------------------
   A plate is an object, not a card. Each one is composed differently: type
   pinned to the bottom edge, a graphic that runs to all four edges, a strip
   centred on its own height, a field of rules sunk to the floor. The captions
   sit underneath, like a printed specimen sheet, so no plate is a
   "heading + paragraph + list" block.

   Colour rule on this band: the paper plates are drawn in ink only. Acid on a
   pale ground is a 1:1 contrast, so green stays on the ink plates and on the
   console. The machine is green; the paper is not.
   ========================================================================== */

.wall-note {
  padding-top: 13px;
  border-top: 1px solid var(--ink);
  max-width: 42ch;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--ink-3);
}

.tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: var(--tile-h, 340px);
  margin-top: calc(26px + var(--drop, 0px));
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.tile--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-void);
  --num: var(--acid);
}
.tile--plate { background: var(--paper); }
.tile--plate2 { background: var(--paper-2); }

.tile-obj {
  position: relative;
  /* basis 0, not auto: the plate height is the one thing that decides,
     and a tall specimen (the depth column) must be cropped by it rather
     than stretch the plate */
  flex: 1 1 0; min-height: 0; overflow: hidden;
  padding: clamp(18px, 2.2vw, 30px);
}

/* ---------- captions: number, name, route, one line of prose ---------- */

.tile-cap,
.console-cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 12px;
  padding: 12px clamp(16px, 2vw, 26px) 14px;
  max-width: none;
  font-family: var(--ui); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3);
}
.tile-cap { flex: none; border-top: 1px solid var(--rule); }
.tile--ink .tile-cap { border-top-color: var(--rule-ink); }

.tc-n {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  color: var(--num);
}
.tc-name { color: var(--ink); }
.tc-route {
  font-family: var(--mono); letter-spacing: 0.02em;
  text-transform: none; text-align: right;
  color: var(--ink-3);
}
.tc-note {
  grid-column: 1 / -1;
  font-family: var(--text); font-size: 0.8125rem;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.tile--ink .tc-name { color: var(--on-void); }
.tile--ink .tc-route,
.tile--ink .tc-note { color: var(--dim); }

/* ---------- 01 text: type pinned to the floor, caret still blinking ---- */

.obj-type { display: flex; flex-direction: column; justify-content: flex-end; }

.obj-caret {
  position: absolute; left: clamp(18px, 2.2vw, 30px); top: clamp(18px, 2.2vw, 30px);
  width: 2px; height: 1.15em;
  background: var(--acid);
  animation: caret-blink 1.15s steps(1) infinite;
}
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.obj-type-a,
.obj-type-b {
  max-width: none;
  font-family: var(--display);
  font-size: clamp(1.42rem, 2.75vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--on-void);
}
.obj-type-a {
  width: fit-content;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--acid);
  font-weight: 600; line-height: 1;
}
.obj-type-b {
  margin-top: 16px;
  margin-left: clamp(0px, 7%, 86px);
  font-weight: 300;
}

/* ---------- 02 still: two families of circles, edge to edge ----------- */

.obj-still { padding: 0; }
.obj-still svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.still-a circle { fill: none; stroke: var(--ink); stroke-width: 0.7; opacity: 0.34; }
.still-b circle { fill: none; stroke: var(--ink); stroke-width: 0.7; opacity: 0.17; }
.still-b { transform-box: view-box; transform-origin: 148px 200px; }
html.js.ready .still-b { animation: still-breathe 16s ease-in-out infinite; }
@keyframes still-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ---------- 03 motion: six frames of one wave, and a head that plays ---- */

.obj-motion { display: flex; align-items: center; }

.strip {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.frame {
  display: block; position: relative;
  aspect-ratio: 40 / 78;
  border: 1px solid var(--rule-ink-soft);
  overflow: hidden;
}
.frame svg { display: block; width: 100%; height: 100%; }
.frame path {
  fill: none; stroke: var(--acid); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.26;
}
html.js.ready .frame path {
  animation: frame-play 4.6s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.16s);
}
@keyframes frame-play {
  0%, 68%, 100% { opacity: 0.26; }
  8%            { opacity: 1; }
}

/* the head is a full-width box whose right edge is the line, so it travels
   by transform alone and lands exactly on both ends of the strip */
.playhead {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  pointer-events: none;
}
.playhead::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  width: 1px; background: var(--acid); opacity: 0.5;
}
html.js.ready .playhead { animation: playhead-run 4.6s linear infinite; }
@keyframes playhead-run {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ---------- 04 depth: a thread, cropped by the window -----------------
   The column is taller than the plate on purpose. Centring it in an
   overflow-hidden box crops it at both ends: you are looking through a
   window at a document that continues in both directions. */

.obj-depth { display: flex; align-items: center; overflow: hidden; }
.depth-col {
  flex: none;
  width: min(460px, 76%);
  padding-right: 18px;
  border-right: 1px solid var(--rule);
  max-width: none;
  font-size: 0.5625rem; line-height: 1.78;
  text-align: justify; hyphens: auto;
  color: rgba(11, 14, 11, 0.34);
}
.depth-col .is-needle {
  display: block; margin: 9px 0; text-align: left;
  font-size: 0.875rem; font-weight: 600;
  line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- 05 the console: request beside response ------------------- */

.console {
  background: var(--ink);
  color: var(--on-void);
  --num: var(--acid);
}
.console .tabs {
  padding-inline: clamp(18px, 2.4vw, 34px);
  border-bottom-color: var(--rule-ink);
}
.console .tab { min-height: 54px; }
/* the console sits on paper, so the ink-band tab rules do not reach it */
.console .tab { color: var(--dim); }
.console .tab:hover { color: var(--on-void); }
.console .tab[aria-selected="true"] { color: var(--on-void); }
.console .tab::after { background: var(--acid); }
.console .cap { color: var(--dim); }
.console .code-head .cap { color: var(--dim-2); }

/* A route is case-sensitive. Set it in the mono voice, never uppercased. */
.cap--route {
  font-family: var(--mono);
  text-transform: none; letter-spacing: 0.02em;
}
.cap--route .m-method { color: var(--acid); }
.cap--route .m-note {
  margin-left: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim-2);
}
.cap--note {
  font-size: 0.75rem; letter-spacing: 0.02em;
  text-transform: none;
}
.console .panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  padding: clamp(20px, 2.6vw, 32px) clamp(18px, 2.4vw, 34px) clamp(22px, 2.8vw, 34px);
}
.console-cap {
  margin: 0;
  border-top: 1px solid var(--rule-ink);
  color: var(--dim);
}
.console-cap .tc-name { color: var(--on-void); }
.console-cap .tc-route,
.console-cap .tc-note { color: var(--dim); }

/* ---------- the standing rule: four sentences, not four sections ------ */

.standing { border-top: 1px solid var(--rule-ink); }
.standing-title { font-size: clamp(1.3rem, 2.1vw, 1.85rem); max-width: 15ch; }
.standing-note {
  margin-top: 14px; max-width: 32ch;
  font-size: 0.875rem; line-height: 1.5;
  color: var(--dim);
}
.standing-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(20px, 3vw, 44px);
}
.standing-list li {
  max-width: none;
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--dim);
}
.standing-list strong {
  display: block; margin-bottom: 3px;
  font-weight: 600; color: var(--on-void);
}

/* ---------- the hero prompt line: the one line, made literal ---------- */

.prompt {
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink-soft);
  padding: 12px 0 13px;
}
.prompt-cap {
  max-width: none;
  margin-bottom: 7px;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--dim-2);
}
.p-m { color: var(--acid); }
.prompt-body {
  display: flex; align-items: baseline; gap: 9px;
  max-width: none;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4;
  color: var(--on-void);
}
.p-caret { flex: none; color: var(--acid); }
.p-text::after {
  content: ""; display: inline-block;
  width: 1px; height: 0.95em; margin-left: 3px;
  vertical-align: -0.1em;
  background: var(--acid);
  animation: caret-blink 1.15s steps(1) infinite;
}

/* ---------- utilities ---------- */

/* The wave rule: the mark's own curve, stretched across the page and drawn
   on entry. It is the one device that repeats on every page. */
.wave-rule {
  display: block;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: 58px;
  margin-top: clamp(30px, 4vw, 56px);
  margin-bottom: 0;
  overflow: visible;
}
.wave-rule path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.band--ink .wave-rule path,
.cover .wave-rule path { stroke: var(--rule-ink); }

/* band headline, large */
.h2--xl { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.02; }

/* notes under a wide figure */
.notes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(22px, 3.4vw, 52px);
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.notes p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); max-width: 46ch; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.stack > * + * { margin-top: clamp(16px, 1.9vw, 26px); }
.stack-tight > * + * { margin-top: 12px; }

.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1020px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stage > * { grid-column: 1 / -1 !important; }
  .vlabel { display: none; }
  .bleed-r, .bleed-l { margin-left: 0; margin-right: 0; }
}
@media (max-width: 900px) {
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .steps--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- clauses: numbered statements on paper ---------- */

.clauses { border-top: 1px solid var(--ink); }
.clauses > div {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 32px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.clauses > div:last-child { border-bottom: 1px solid var(--ink); }
.clauses .c-num {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--num); padding-top: 0.5em; letter-spacing: 0.06em;
}
.clauses .c-body { max-width: 60ch; }
.clauses .c-body p { color: var(--ink-3); }
.clauses h3 { margin-bottom: 8px; }

/* ---------- depth: layered bars, heaviest at the top ---------- */

.depth { border-top: 1px solid var(--ink); }
.depth > div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 190px;
  gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
.depth > div:last-child { border-bottom: 1px solid var(--ink); }
.depth .d-name {
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.depth .d-bar { height: 9px; background: var(--ink); }
.depth > div:nth-child(2) .d-bar { opacity: 0.76; }
.depth > div:nth-child(3) .d-bar { opacity: 0.52; }
.depth > div:nth-child(4) .d-bar { opacity: 0.30; }
.depth .d-note { font-size: 0.875rem; color: var(--ink-3); line-height: 1.45; }
.w-100 { width: 100%; } .w-78 { width: 78%; } .w-56 { width: 56%; } .w-34 { width: 34%; }

.stations--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* staggered columns: the top edge is not a straight line */
.stagger-2 { margin-top: clamp(18px, 3vw, 46px); }
.stagger-3 { margin-top: clamp(36px, 6vw, 92px); }

/* ---------- ledger: a checklist with a status column ---------- */

.ledger { border-top: 1px solid var(--ink); }
.ledger > li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 148px;
  gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.ledger > li:last-child { border-bottom: 1px solid var(--ink); }
.ledger .l-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--num); }
.ledger .l-title {
  font-family: var(--display); font-weight: 600; font-size: 1.125rem;
  letter-spacing: -0.01em; color: var(--ink);
}
.ledger .l-note { display: block; margin-top: 3px; font-size: 0.9375rem; color: var(--ink-3); }
.ledger .l-status {
  font-family: var(--ui); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-align: right;
}

/* ---------- prev / next ---------- */
.pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.pager a {
  display: flex; flex-direction: column; gap: 5px;
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 26px);
  text-decoration: none;
  min-height: 88px;
  transition: background-color 220ms var(--ease);
}
.pager a:hover { background: var(--paper-2); }
.pager a + a { border-left: 1px solid var(--rule); text-align: right; align-items: flex-end; }
.pager .p-cap { font-family: var(--ui); font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.pager .p-name { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--dim);
  padding-block: clamp(34px, 4vw, 52px) clamp(28px, 3vw, 40px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.footer-note { margin-top: 14px; font-size: 0.8125rem; color: var(--dim-2); max-width: 34ch; }
.footer-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px clamp(14px, 2vw, 28px);
}
.footer-links a {
  font-family: var(--ui); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding: 6px 0;
  transition: color 180ms var(--ease);
}
.footer-links a:hover { color: var(--on-void); }
.footer-base {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: 16px;
  border-top: 1px solid var(--rule-ink-soft);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim-2);
}

/* ---------- motion: gated on html.js ---------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}
html.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition:
    opacity 560ms var(--ease) calc(var(--d, 0ms)),
    transform 820ms var(--ease-out) calc(var(--d, 0ms));
}

html.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
}
html.js [data-reveal-group].in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms var(--ease) calc(var(--i, 0) * 62ms + var(--d, 0ms)),
    transform 780ms var(--ease-out) calc(var(--i, 0) * 62ms + var(--d, 0ms));
}

/* line drawing */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .draw { stroke-dashoffset: 0; }
html.js .draw.in { animation: draw-line 1500ms var(--ease-out) forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* hero type, set line by line */
html.js .poster-line { display: block; overflow: hidden; }
html.js .poster-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--ease-out);
}
html.js.ready .poster-line > span { transform: translateY(0); }
html.js.ready .poster-line:nth-child(1) > span { transition-delay: 80ms; }
html.js.ready .poster-line:nth-child(2) > span { transition-delay: 200ms; }

/* ---------- instrument motion: things that answer, not things that decorate ---------- */

/* reading rail: one acid hairline that fills as the page is read */
.rail {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; pointer-events: none; overflow: hidden;
}
.rail i {
  display: block; height: 100%; width: 100%;
  background: var(--acid);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  will-change: transform;
}

/* the packet: the track fills behind the travelling head */
.track-line { position: relative; }
.track-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--acid); opacity: 0.5;
  transform: scaleX(0); transform-origin: left;
}
html.js.ready .track-line::after { animation: track-fill 9s linear infinite; }
@keyframes track-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* depth bars grow from the left edge when their figure is revealed */
.d-bar {
  transform-origin: left center;
  transition: transform 900ms var(--ease-out) 140ms;
}
html.js [data-reveal]:not(.in) .d-bar { transform: scaleX(0); }

/* spec rows and ledger rows arrive one after another, not as a block */
html.js [data-reveal]:not(.in) .spec > div,
html.js [data-reveal]:not(.in) .ledger li {
  opacity: 0; transform: translateY(10px);
}
.spec > div, .ledger li {
  transition: opacity 480ms var(--ease), transform 620ms var(--ease-out);
}
.spec > div:nth-child(2), .ledger li:nth-child(2) { transition-delay: 60ms; }
.spec > div:nth-child(3), .ledger li:nth-child(3) { transition-delay: 120ms; }
.spec > div:nth-child(4), .ledger li:nth-child(4) { transition-delay: 180ms; }
.spec > div:nth-child(5), .ledger li:nth-child(5) { transition-delay: 240ms; }
.spec > div:nth-child(6), .ledger li:nth-child(6) { transition-delay: 300ms; }

/* the ink plate wipes in from the leading edge */
html.js [data-reveal]:not(.in) .plate { clip-path: inset(0 100% 0 0); }
.plate { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out) 120ms; }

/* ---------- headlines wipe up out of their own baseline ---------- */

html.js .page-title,
html.js .h2 {
  clip-path: inset(-0.32em 0 -0.32em 0);
  transition:
    clip-path 860ms var(--ease-out) calc(var(--d, 0ms) + 40ms),
    opacity 420ms var(--ease) var(--d, 0ms);
}
html.js .page-title:not(.in),
html.js .h2:not(.in) {
  clip-path: inset(-0.32em 0 103% 0);
}

/* ---------- the cover moves at four different rates ---------- */

.cover { --py: 0px; }
.cover .poster { transform: translate3d(0, calc(var(--py) * 0.16), 0); }
.cover-aside { transform: translate3d(0, calc(var(--py) * 0.07), 0); }
.cover .track { transform: translate3d(0, calc(var(--py) * 0.03), 0); }
.cover-foot { transform: translate3d(0, calc(var(--py) * -0.05), 0); }
.cover > .field { transform: translate3d(0, calc(var(--py) * -0.09), 0); }

/* ---------- the plate prints itself ---------- */

html.js .tw { opacity: 0; }
html.js .typed .tw {
  animation: type-in 1ms linear forwards;
  animation-delay: calc(var(--i, 0) * 5ms);
}
@keyframes type-in { to { opacity: 1; } }

/* paused state: everything stops, nothing disappears */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation-play-state: paused !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
}
html.motion-paused [data-reveal],
html.motion-paused [data-reveal-group] > * { opacity: 1; transform: none; }
html.motion-paused .tw { opacity: 1; animation: none !important; }
html.motion-paused .page-title,
html.motion-paused .h2 { opacity: 1; clip-path: none; }
html.motion-paused .cover .poster,
html.motion-paused .cover-aside,
html.motion-paused .cover .track,
html.motion-paused .cover-foot,
html.motion-paused .cover > .field { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal],
  html.js [data-reveal-group] > * { opacity: 1; transform: none; }
  html.js .tw { opacity: 1; animation: none; }
  html.js .page-title, html.js .h2 { clip-path: none; }
  .cover .poster, .cover-aside, .cover .track, .cover-foot,
  .cover > .field { transform: none; }
  html.js .poster-line > span { transform: none; }
  html.js .draw { stroke-dashoffset: 0; }
  .track-head, .playhead { display: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .nav { gap: 14px; }
  .nav-link { font-size: 0.6875rem; letter-spacing: 0.04em; }
}

@media (max-width: 1020px) {
  .head-row { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .head-note { max-width: 46ch; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* one column: the stagger and the per-plate heights stop meaning anything */
  .tile { margin-top: 0 !important; min-height: 300px !important; }
  .obj-type-b { margin-left: 0; }

  /* two plates side by side: a wall of stretched letterboxes is not a wall */
  .tile { grid-column-start: auto !important; grid-column-end: span 6 !important; }
}

@media (max-width: 700px) {
  .tile { grid-column-start: auto !important; grid-column-end: span 12 !important; }
}

@media (max-width: 1150px) {
  :root { --hdr: 60px; }

  .nav-toggle { display: inline-flex; }
  .masthead-tools { margin-left: auto; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-ink);
    max-height: calc(100svh - var(--hdr));
    overflow-y: auto;
    padding: 8px 0 18px;
    box-shadow: none;
  }
  .nav.is-open { display: flex; }
  .nav-link {
    font-size: 0.8125rem; letter-spacing: 0.06em;
    padding: 14px clamp(18px, 6.5vw, 56px);
    border-bottom: 1px solid var(--rule-ink-soft);
  }
  .nav-link::after { display: none; }
  .nav-link[aria-current="page"] { color: var(--acid); }
  .pause-txt { display: none; }
  .pause { padding: 0 8px; }
  .btn--nav { display: none; }

  /* parallax is a desktop depth cue; on a stacked phone layout it just collides */
  .cover .poster, .cover-aside, .cover .track, .cover-foot,
  .cover > .field { transform: none; }

  .track-line { display: none; }
  .stations { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .stations li { padding: 14px 0; border-bottom: 1px solid var(--rule-ink-soft); }
  .stations li::before { display: none; }
  .stations li:last-child { border-bottom: 0; }
  .st-name { margin-top: 2px; }

  .entry { grid-template-columns: 40px minmax(0, 1fr); }
  .entry .e-note { grid-column: 2; }
  .entry .e-go { display: none; }

  /* request over response: two code columns will not fit */
  .console .panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a + a { border-left: 0; border-top: 1px solid var(--rule); text-align: left; align-items: flex-start; }

  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body { font-size: 1.0313rem; }
  .poster { letter-spacing: -0.026em; }
  .cover-inner { padding-top: 34px; }
  /* a code block that hides half a line is a bug, not a feature */
  pre.code-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.6875rem;
  }
  .tab { padding: 0 12px; font-size: 0.6875rem; }
  .tab .t-num { display: none; }
  .manifest { min-width: 520px; }
  .plate { padding: 18px 16px; }
  .footer-links { grid-template-columns: minmax(0, 1fr); }

  .tile { min-height: 250px !important; }
  .strip { gap: 4px; }
  .tile-cap, .console-cap { gap: 3px 8px; padding-inline: 14px; }
  .standing-list { grid-template-columns: minmax(0, 1fr); }

  .index-row { grid-template-columns: auto minmax(16px, 1fr); row-gap: 5px; padding: 11px 0; }
  .ix-meta {
    grid-column: 1 / -1; text-align: left; white-space: normal;
    font-size: 0.625rem; letter-spacing: 0.08em;
  }
  .index-row:hover { padding-left: 4px; }

  .ledger > li { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; }
  .ledger .l-status { grid-column: 2; text-align: left; }

  .depth > div { grid-template-columns: 84px minmax(0, 1fr); row-gap: 8px; }
  .depth .d-note { grid-column: 2; }

  .clauses > div { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .spec > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 400px) {
  :root { --wrap: min(1340px, 100% - 32px); }
  .cover-actions .btn { width: 100%; }
  .poster { font-size: clamp(2.5rem, 12vw, 3.2rem); }
}

/* ---------- print ---------- */

@media print {
  .masthead, .skip-link, .pause, .nav-toggle, .pager, .cover-actions, .copy { display: none !important; }
  .band--ink, .cover, .site-footer, .plate { background: #fff !important; color: #000 !important; }
  .band--ink p, .st-note, .cap { color: #333 !important; }
  a { text-decoration: none; }
}

/* ==========================================================================
   LOGO LOCK — do not edit. These three declarations are the approved mark.
   Font stack, size, tracking, path geometry, stroke and colour are frozen;
   the mark is only ever placed on ink because acid on paper is unreadable.
   ========================================================================== */

:root {
  --logo-font: Satoshi, "Helvetica Neue", Arial, sans-serif;
  --logo-stroke: #c8ff46;
}

.wave-line-path {
  fill: none;
  stroke: var(--logo-stroke);
  stroke-width: 3.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   v8 — the studio. Paper ground; the machine draws on it.
   Acid stays a mark: chips, ticks, panes, playheads. Never a field.
   ============================================================ */

/* ---------- 01 · hero: statement + the living studio ---------- */

.studio-hero { padding-block: clamp(56px, 7vw, 108px) clamp(48px, 6vw, 88px); overflow: hidden; }

.hero-title { margin: 0; }
.ht-line { display: block; }
.ht-a {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  line-height: 0.99; letter-spacing: -0.028em; color: var(--ink);
}
.ht-b {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  line-height: 1.06; letter-spacing: -0.018em; color: var(--ink-3);
}
html.js .ht-line {
  clip-path: inset(-0.32em 0 -0.32em 0);
  transition: clip-path 880ms var(--ease-out) calc(var(--d, 0ms) + 60ms),
              opacity 420ms var(--ease) var(--d, 0ms);
}
html.js .hero-copy:not(.in) .ht-line { clip-path: inset(-0.32em 0 103% 0); opacity: 0; }

.hero-lede { margin: 26px 0 0; max-width: 42ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-3); }
.hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.studio { min-width: 0; }
.studio-prompt { margin: 0; display: block; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.sp-route {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--dim-2);
}
.sp-line { font-family: var(--mono); font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.sp-caret { color: var(--num); font-weight: 700; }
html.js .sp-caret.live { animation: sp-blink 900ms steps(2, start) infinite; }
@keyframes sp-blink { to { visibility: hidden; } }

.studio-frame { margin-top: 14px; border: 1px solid var(--ink); background: var(--paper); }
#studio-canvas { display: block; width: 100%; }
.studio-state {
  margin: 10px 0 0; min-height: 1.2em;
  font-family: var(--mono); font-size: 0.72rem; color: var(--dim-2);
}

/* ---------- 02 · the wall: five pieces hung like an exhibition ---------- */

.wall { padding-block: clamp(64px, 8vw, 124px); overflow: hidden; }
.wall-head { margin-bottom: clamp(34px, 4.5vw, 60px); }
.wall-intro { color: var(--ink-3); align-self: end; }

.hang {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: clamp(44px, 5.5vw, 80px);
  align-items: start;
}
.piece { margin: 0; min-width: 0; }
.piece--a { grid-column-end: span 5; }
.piece--b { grid-column-end: span 4; margin-top: clamp(40px, 6vw, 92px); }
.piece--c { grid-column-end: span 3; margin-top: clamp(70px, 10vw, 150px); }
.piece--d { grid-column-end: span 6; }
.piece--e { grid-column-start: 8; grid-column-end: span 5; margin-top: clamp(40px, 6vw, 90px); }

.pc-art {
  border: 1px solid var(--rule);
  background: var(--paper);
  line-height: 0;
}
.pc-art svg { display: block; width: 100%; height: auto; }
.pc-art--ink { border-color: var(--ink); }
html.js .piece .pc-art {
  clip-path: inset(0 0 0 0);
  transition: clip-path 920ms var(--ease-out) calc(var(--d, 0ms) + 80ms);
}
html.js .piece:not(.in) .pc-art { clip-path: inset(0 100% 0 0); }

.piece figcaption {
  margin-top: 13px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px; align-items: baseline;
}
.pc-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.pc-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--dim-2); text-align: right; }
.pc-note { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); max-width: 42ch; }

/* ---------- 03 · the desk ---------- */

.desk { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--rule); }
.desk-head { margin-bottom: clamp(30px, 4vw, 52px); }
.desk-intro { color: var(--ink-3); align-self: end; }

/* ---------- 04 · outro ---------- */

.outro-title { max-width: 14ch; }
.outro-note { margin-top: 20px; max-width: 52ch; color: var(--dim); }
.outro-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- releases: pause and reduced motion ---------- */

html.motion-paused .ht-line, html.motion-paused .piece .pc-art { opacity: 1 !important; clip-path: none !important; }
html.motion-paused .sp-caret.live { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .ht-line, .piece .pc-art { opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .sp-caret.live { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .piece--a, .piece--b, .piece--c, .piece--d, .piece--e {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
  .hang { row-gap: 48px; }
  .piece .pc-note { max-width: 56ch; }
}

@media (max-width: 700px) {
  .piece figcaption { grid-template-columns: minmax(0, 1fr); }
  .pc-meta { text-align: left; }
  .studio-prompt { padding-bottom: 10px; }
  .sp-line { font-size: 0.9375rem; }
}

@media (max-width: 400px) {
  .ht-a, .ht-b { font-size: 2.1rem; }
  .hero-actions .btn, .outro-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   v9 — the gallery. A dark room, real work on the walls.
   The images carry the colour; the chrome stays ink and one green.
   ============================================================ */

/* the whole home page lives on ink now */
body[data-page="home"] { background: var(--ink); }

body[data-page="home"] .vendor-band {
  background: var(--ink);
  border-top-color: var(--rule-ink);
  border-bottom-color: var(--rule-ink);
}
body[data-page="home"] .vendor-cap { color: var(--dim); border-right-color: var(--rule-ink); }
body[data-page="home"] .v-name { color: var(--on-void); }
body[data-page="home"] .v-sep { color: var(--dim-2); }

/* ---------- hero ---------- */

.gh-hero { padding-block: clamp(56px, 7vw, 110px) clamp(46px, 6vw, 84px); }

.gh-title { margin: 0; }
body[data-page="home"] .ht-a {
  color: var(--on-void);
  font-size: clamp(2.7rem, 5.9vw, 5.3rem);
}
body[data-page="home"] .ht-b {
  color: var(--dim);
  font-size: clamp(2.7rem, 5.9vw, 5.3rem);
}

.gh-prompt {
  margin: 30px 0 0;
  border-top: 1px solid var(--rule-ink);
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.gh-route {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--dim-2);
}
.gh-type {
  font-family: var(--mono); font-size: 1.05rem; color: var(--on-void);
  min-height: 1.5em; overflow-wrap: anywhere;
}
.gh-caret { color: var(--num); font-weight: 700; }
html.js .gh-caret.live { animation: sp-blink 900ms steps(2, start) infinite; }

.gh-lede { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--dim); }
.gh-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* feature image */
.gh-feature { margin: clamp(38px, 4.5vw, 64px) 0 0; min-width: 0; }
.gh-frame {
  overflow: hidden;
  border: 1px solid var(--rule-ink);
  line-height: 0;
}
.gh-frame img, .g-frame img {
  display: block; width: 100%; height: auto;
}
.gh-frame img { aspect-ratio: 21 / 9; object-fit: cover; }

@keyframes kb-run {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); }
}
.kb img { animation: kb-run 28s var(--ease) infinite alternate; will-change: transform; }

.g-drift { will-change: transform; }

/* museum label, shared by feature and wall */
.g-cap {
  margin-top: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 18px; align-items: baseline;
}
.g-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--on-void); }
.g-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--dim-2); text-align: right; }
.g-note { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.5; color: var(--dim); max-width: 46ch; }

/* frame reveals */
html.js .gh-frame, html.js .g-frame {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1050ms var(--ease-out) calc(var(--d, 0ms) + 60ms);
}
html.js .gh-feature:not(.in) .gh-frame,
html.js .g-piece:not(.in) .g-frame { clip-path: inset(0 100% 0 0); }

/* ---------- the wall ---------- */

.gh-wall { padding-block: clamp(60px, 7.5vw, 116px) clamp(64px, 8vw, 124px); }
.gh-head { margin-bottom: clamp(34px, 4.5vw, 60px); }
.gh-intro { color: var(--dim); align-self: end; }

.g-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: clamp(48px, 6vw, 88px);
  align-items: start;
}
.g-piece { margin: 0; min-width: 0; }
.g-1 { grid-column-end: span 5; }
.g-2 { grid-column-start: 7; grid-column-end: span 6; margin-top: clamp(60px, 9vw, 140px); }
.g-3 { grid-column-start: 2; grid-column-end: span 4; }
.g-4 { grid-column-start: 8; grid-column-end: span 5; margin-top: clamp(48px, 7vw, 110px); }

.g-frame { overflow: hidden; border: 1px solid var(--rule-ink); line-height: 0; }
.g-frame img { transition: transform 1100ms var(--ease-out); }
.g-piece:hover .g-frame img { transform: scale(1.045); }
.g-piece:hover .g-name { color: var(--acid); }

/* ---------- statement ---------- */

.gh-statement {
  padding-block: clamp(70px, 9vw, 140px);
  border-top: 1px solid var(--rule-ink);
}
.st-title {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.9rem);
  line-height: 1.02; letter-spacing: -0.026em;
  color: var(--on-void); max-width: 16ch;
}
.st-title em { font-style: normal; color: var(--dim); font-weight: 300; }
.st-note { margin: 26px 0 0; color: var(--dim); max-width: 50ch; }
.st-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- releases ---------- */

html.motion-paused .kb img { animation: none !important; }
html.motion-paused .g-drift { transform: none !important; }
html.motion-paused .gh-frame, html.motion-paused .g-frame { clip-path: none !important; opacity: 1 !important; }
html.motion-paused .gh-caret.live { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .kb img { animation: none !important; }
  .g-drift { transform: none !important; }
  .gh-frame, .g-frame { clip-path: none !important; transition: none !important; }
  .gh-caret.live { animation: none; }
  .g-frame img { transition: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .g-1, .g-2, .g-3, .g-4 { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .g-grid { row-gap: 52px; }
  .g-note, .gh-lede, .st-note { max-width: 56ch; }
  .gh-frame img { aspect-ratio: 16 / 9; }
}

@media (max-width: 700px) {
  .g-cap { grid-template-columns: minmax(0, 1fr); }
  .g-meta { text-align: left; }
  .gh-frame img { aspect-ratio: 3 / 2; }
  .gh-type { font-size: 0.9375rem; }
}

@media (max-width: 400px) {
  .gh-actions .btn, .st-actions .btn { width: 100%; justify-content: center; }
  body[data-page="home"] .ht-a, body[data-page="home"] .ht-b { font-size: 2.15rem; }
}

/* ============================================================
   v10 — the switchboard. The aggregation IS the hero object:
   requests in on the left, AIWave in the middle, eight families
   out on the right, pulses travelling the lines. No artwork.
   ============================================================ */

.board-fig { margin: clamp(40px, 5vw, 70px) 0 0; }
.board {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-ink);
  background: rgba(240, 240, 236, 0.015);
}
.b-side {
  font-family: var(--ui); font-size: 20px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  fill: var(--dim);
}
.b-sub { font-family: var(--mono); font-size: 15px; fill: var(--dim-2); }
.b-name {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; fill: var(--on-void);
}
.b-nodes circle { fill: var(--dim); }
.b-fam circle { fill: var(--acid); }
.b-line { fill: none; stroke-width: 1; }
.b-in  { stroke: rgba(240, 240, 236, 0.30); }
.b-out { stroke: rgba(240, 240, 236, 0.16); }
.b-hub { fill: none; stroke: var(--acid); stroke-width: 1.5; }
.b-hub-dot { fill: var(--acid); }
.b-hub-name {
  font-family: var(--display); font-size: 24px; font-weight: 600;
  letter-spacing: 0.02em; text-anchor: middle; fill: var(--on-void);
}
.b-pulse { fill: var(--acid); }

/* the hub breathes; the whole board can be stopped */
@keyframes hub-breathe {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.45; }
}
.b-hub { animation: hub-breathe 3.2s var(--ease) infinite; }

.board-cap {
  margin-top: 12px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--dim-2);
}

/* ---------- the roster ---------- */

.gh-roster { padding-block: clamp(60px, 7.5vw, 116px); }
.gh-head { margin-bottom: clamp(30px, 4vw, 52px); }
.gh-intro { color: var(--dim); align-self: end; }

.fam-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: clamp(28px, 3.4vw, 44px);
}
.fam {
  border-top: 1px solid var(--rule-ink);
  padding-top: 14px;
  transition: border-color 260ms var(--ease);
}
.fam:hover { border-top-color: var(--acid); }
.f-name {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  letter-spacing: -0.015em; color: var(--on-void);
  transition: color 260ms var(--ease);
}
.fam:hover .f-name { color: var(--acid); }
.f-meta {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.5;
  color: var(--dim-2);
}

.roster-link-row { margin: clamp(30px, 4vw, 48px) 0 0; }
.cap-link {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--dim); text-decoration: none;
  border-bottom: 1px solid var(--rule-ink);
  padding-bottom: 3px;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
.cap-link:hover { color: var(--acid); border-bottom-color: var(--acid); }

/* ---------- contracts ---------- */

.gh-contracts {
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--rule-ink);
}
.gh-contracts .gh-lede { max-width: 44ch; }

/* ---------- releases ---------- */

html.motion-paused .board { --board-paused: 1; }
html.motion-paused .b-hub { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .b-hub { animation: none !important; }
}

@media (max-width: 1020px) {
  .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* the diagram needs width; on a phone the roster carries the same truth */
  .board-fig { display: none; }
  .fam-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .fam { padding-top: 11px; }
  .f-name { font-size: 1.15rem; }
}

/* ============================================================
   v10.1 — the blog. Articles wear the system; the index is a
   filing cabinet: five drawers, each opens to its own shelf.
   ============================================================ */

/* ---------- article shell ---------- */

.ba-head { padding-block: clamp(46px, 6vw, 84px) clamp(34px, 4.5vw, 60px); }
.ba-crumb {
  margin: 0 0 22px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--dim-2);
}
.ba-crumb a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--rule-ink); }
.ba-crumb a:hover { color: var(--acid); border-bottom-color: var(--acid); }
.ba-crumb span[aria-hidden] { margin: 0 8px; color: var(--dim-2); }

.ba-title {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.024em;
  color: var(--on-void); max-width: 22ch;
  text-wrap: balance;
}
.ba-lede { margin: 18px 0 0; max-width: 58ch; color: var(--dim); font-size: 1.0625rem; line-height: 1.6; }

.ba-meta-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ba-date, .ba-read {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--dim-2);
}
.ba-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ba-tags span {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em;
  color: var(--dim); border: 1px solid var(--rule-ink);
  padding: 3px 9px;
}

/* ---------- article body: the system's typographic voice ---------- */

.ba-body-band { padding-block: clamp(44px, 5.5vw, 80px) clamp(60px, 7vw, 110px); }
.ba-body { max-width: 72ch; margin: 0 auto; }
.ba-body p { margin: 14px 0; line-height: 1.75; color: var(--ink-3); font-size: 1.0325rem; }
.ba-body strong { color: var(--ink); font-weight: 600; }
.ba-body h2 {
  margin: clamp(30px, 4vw, 44px) 0 12px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.018em;
  line-height: 1.15; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.ba-body h3 {
  margin: 26px 0 8px;
  font-family: var(--display); font-weight: 600;
  font-size: 1.18rem; letter-spacing: -0.012em; color: var(--ink);
}
.ba-body ul, .ba-body ol { margin: 14px 0 14px 4px; padding: 0; list-style: none; }
.ba-body li {
  margin: 8px 0; padding-left: 22px; position: relative;
  line-height: 1.7; color: var(--ink-3);
}
.ba-body li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 2px; background: var(--num);
}
.ba-body ol { counter-reset: ba-li; }
.ba-body ol li::before {
  counter-increment: ba-li; content: counter(ba-li, decimal-leading-zero);
  width: auto; height: auto; top: 0.18em; background: none;
  font-family: var(--mono); font-size: 0.75rem; color: var(--num);
}
.ba-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--num); text-underline-offset: 3px; }
.ba-body a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.ba-body code {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  padding: 1px 6px;
}
.ba-body pre {
  background: var(--ink); color: var(--on-void);
  padding: clamp(16px, 2.4vw, 26px);
  margin: 20px 0; overflow-x: auto;
  font-size: 0.875rem; line-height: 1.65;
}
.ba-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.ba-body blockquote {
  margin: 22px 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--num);
  color: var(--ink-3); font-size: 1.0625rem; line-height: 1.7;
}
.ba-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9375rem; }
.ba-body th {
  text-align: left; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--ink); padding: 8px 12px 8px 0;
}
.ba-body td { border-bottom: 1px solid var(--rule-soft); padding: 10px 12px 10px 0; color: var(--ink-3); }
.ba-body img { max-width: 100%; height: auto; }
.ba-body hr { border: 0; border-top: 1px solid var(--rule); margin: 34px 0; }

/* the legacy CTA box, re-skinned */
.ba-body .cta-box {
  margin: 34px 0 10px; padding: clamp(22px, 3vw, 34px);
  background: var(--ink); color: var(--dim);
  border: 1px solid var(--ink);
}
.ba-body .cta-box h3 { margin: 0 0 10px; color: var(--on-void); font-size: 1.3rem; }
.ba-body .cta-box p { color: var(--dim); margin: 0 0 16px; }
.ba-body .cta-box a {
  display: inline-block; background: var(--acid); color: var(--ink);
  font-family: var(--ui); font-weight: 600; font-size: 0.9375rem;
  padding: 12px 22px; text-decoration: none;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.ba-body .cta-box a:hover { transform: translate3d(2px, -2px, 0); box-shadow: -2px 2px 0 var(--acid); }

.ba-body .model-resource-links {
  margin: 26px 0 0; font-family: var(--mono); font-size: 0.78rem;
  color: var(--dim-2); line-height: 1.9;
}
.ba-body .model-resource-links a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ba-body .model-resource-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.ba-related { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--ink); }
.ba-related h3 { margin: 0 0 12px; font-family: var(--ui); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ba-related ul { list-style: none; margin: 0; padding: 0; }
.ba-related li { margin: 0; padding: 0 0 0 0; }
.ba-related a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem;
  transition: padding-left 220ms var(--ease-out), color 220ms var(--ease-out);
}
.ba-related a:hover { padding-left: 10px; color: var(--ink); }
.ba-related a::before { content: "\2192\00a0\00a0"; color: var(--num); font-family: var(--mono); }

/* ---------- the drawer index ---------- */

.bi-hero { padding-block: clamp(50px, 6.5vw, 96px) clamp(30px, 4vw, 48px); }
.bi-title {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.026em; color: var(--on-void);
}
.bi-title em { font-style: normal; font-weight: 300; color: var(--dim); }
.bi-sub { margin: 16px 0 0; color: var(--dim); max-width: 52ch; }
.bi-tools { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.bi-search {
  flex: 1 1 320px; max-width: 460px; min-width: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-ink);
  color: var(--on-void); font-family: var(--mono); font-size: 0.9375rem;
  padding: 10px 2px; outline: none;
  transition: border-color 240ms var(--ease);
}
.bi-search::placeholder { color: var(--dim-2); }
.bi-search:focus { border-bottom-color: var(--acid); }
.bi-count { font-family: var(--mono); font-size: 0.75rem; color: var(--dim-2); letter-spacing: 0.05em; }

.bi-drawers { padding-bottom: clamp(60px, 8vw, 120px); }
details.drawer { border-top: 1px solid var(--rule-ink); }
details.drawer:last-of-type { border-bottom: 1px solid var(--rule-ink); }

.drawer-head {
  display: grid;
  grid-template-columns: clamp(44px, 6vw, 84px) minmax(0, 1fr) auto auto;
  gap: 18px; align-items: baseline;
  padding: clamp(18px, 2.6vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.drawer-head::-webkit-details-marker { display: none; }
.d-idx { font-family: var(--mono); font-size: 0.8125rem; color: var(--num); }
.d-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -0.016em;
  color: var(--on-void);
  transition: color 200ms var(--ease);
}
details.drawer:hover .d-name, details.drawer[open] .d-name { color: var(--acid); }
.d-count { font-family: var(--mono); font-size: 0.75rem; color: var(--dim-2); letter-spacing: 0.06em; }
.d-arrow {
  font-family: var(--mono); font-size: 1.05rem; color: var(--dim);
  transition: transform 380ms var(--ease-out);
  justify-self: end;
}
details.drawer[open] .d-arrow { transform: rotate(90deg); color: var(--acid); }

.drawer-body {
  overflow: hidden;
  animation: drawer-open 480ms var(--ease-out);
}
@keyframes drawer-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.motion-paused .drawer-body, .drawer-body.no-motion { animation: none; }
@media (prefers-reduced-motion: reduce) { .drawer-body { animation: none; } }

.shelf { list-style: none; margin: 0 0 clamp(26px, 3.5vw, 44px) 0; padding: 0; }
.shelf li {
  border-bottom: 1px solid var(--rule-ink-soft);
  animation: row-in 460ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes row-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
html.motion-paused .shelf li { animation: none; }
@media (prefers-reduced-motion: reduce) { .shelf li { animation: none; } }

.shelf a {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr);
  gap: 6px 22px;
  padding: 15px 0 15px 2px;
  text-decoration: none;
  transition: padding-left 220ms var(--ease-out), background 220ms var(--ease);
}
.shelf a:hover, .shelf a:focus-visible { padding-left: 14px; }
.s-date { font-family: var(--mono); font-size: 0.72rem; color: var(--dim-2); letter-spacing: 0.04em; align-self: baseline; padding-top: 4px; }
.s-title {
  font-family: var(--display); font-weight: 500; font-size: 1.0625rem;
  letter-spacing: -0.008em; color: var(--on-void); line-height: 1.35;
}
.shelf a:hover .s-title { color: var(--acid); }
.s-desc {
  grid-column: 2; font-size: 0.875rem; line-height: 1.55;
  color: var(--dim); max-width: 68ch;
}
.s-hit { background: var(--acid); color: var(--ink); }

/* drawer body height animation via grid trick is avoided: details content
   animates on open (translate+fade); closing snaps — acceptable, and the
   open animation is the one people actually see. */

@media (max-width: 700px) {
  .drawer-head { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .d-count { display: none; }
  .shelf a { grid-template-columns: minmax(0, 1fr); }
  .s-date { order: 2; padding-top: 0; }
  .s-desc { grid-column: 1; }
  .ba-body-band { padding-inline: 0; }
  .ba-meta-col { flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center; }
}