/* Tokens: see BRAND.md */
:root {
  --paper: #F3F1EB;
  --paper-2: #EAE7DF;
  --ink: #1C2026;
  --ink-72: rgba(28, 32, 38, 0.72);
  --graphite: #6B6F76;
  --rule: #CFCAC0;
  --signal: #F2A20C;
  --signal-ink: #9A5F00;
  --night: #14171B;

  --inset: 8px;
  --nav-h: 56px;
  --pad: clamp(16px, 1.6vw, 28px);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* One curve for UI motion: hovers, rule draws and the page curtain (after heronaiapp.com) */
  --ease-ui: cubic-bezier(.625, .05, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
/* Paper grain: a static ink speckle tiled over everything, like drafting paper. One small SVG noise tile,
   drawn once by the browser; it never animates and never takes clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  opacity: var(--grain, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .125 0 0 0 0 .15 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@media print { body::after { display: none; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--ink); color: var(--paper); }

/* Type */
.mono {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}
.h1 {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 112.5%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(34px, 3.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.body {
  margin: 0;
  font-size: clamp(15px, 0.95vw, 17px);
  line-height: 1.45;
  color: var(--ink-72);
  max-width: 52ch;
}
.wordmark {
  font-stretch: 112.5%;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Viewport frame: a ruler where each tick is a minute */
.frame {
  position: fixed;
  inset: var(--inset);
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 60;
}
.frame__ticks {
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 8px);
}
.frame__ticks--l { left: 0; }
.frame__ticks--r { right: 0; }
.frame__cross {
  position: absolute;
  font: 300 14px/1 var(--f-mono);
  color: var(--ink);
}
.frame__cross--tl { top: calc(var(--nav-h) + 4px); left: 4px; }
.frame__cross--bl { bottom: 4px; left: 4px; }

/* Nav */
.nav {
  position: fixed;
  top: var(--inset); left: var(--inset); right: var(--inset);
  height: var(--nav-h);
  display: flex;
  justify-content: space-between;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  z-index: 50;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad);
}
.mark { width: 26px; height: 26px; color: var(--ink); flex: none; }
.nav__word { display: flex; flex-direction: column; gap: 3px; }
.nav__word .wordmark { font-size: 15px; line-height: 1; }
.nav__desc { font-size: 9.5px; color: var(--graphite); }
.nav__links { display: flex; }
.nav__links a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: clamp(110px, 9.5vw, 170px);
  padding: 12px 14px;
  border-left: 1px solid var(--rule);
  position: relative;
  transition: background-color .25s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  right: 6px; bottom: 6px;
  width: 4px; height: 4px;
  border-right: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
}
.nav__links a:hover { background: var(--paper-2); }
.nav__links .nav__cta { color: var(--signal-ink); }
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta > [aria-hidden="true"] { align-self: flex-end; font-size: 14px; }

main {
  padding: calc(var(--inset) + var(--nav-h)) var(--inset) var(--inset);
}

/* Cells */
.cell { position: relative; }
.cell__label {
  position: absolute;
  top: 14px; left: var(--pad);
  color: var(--graphite);
  z-index: 2;
}
.cell__label--r { left: auto; right: var(--pad); text-align: right; max-width: 34ch; }

/* 1. Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: 1fr auto;
  gap: 0 3vw;
  padding: calc(var(--inset) + 28px) calc(var(--inset) + 28px);
}
.loader__drawing {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
/* Size is set from main.js so the circle stays square in any cell shape */
.loader__portrait { --ring: 1; position: relative; flex: none; }
.loader__portrait::before {
  content: "";
  position: absolute;
  inset: -3%;
  border: 1px solid var(--rule);
  border-radius: 50%;
  opacity: var(--ring);
}
.loader__portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__pen {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(28, 32, 38, .12);
}
.loader__pct { position: absolute; top: 0; right: calc(100% + 28px); color: var(--ink); }
.loader__cap { position: absolute; bottom: 0; left: calc(100% + 28px); color: var(--graphite); white-space: nowrap; }
.loader__title {
  align-self: end;
  display: flex;
  flex-direction: column;
  font-stretch: 112.5%;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.loader__spec {
  align-self: end;
  margin: 0;
  display: grid;
  gap: 6px;
  max-width: 380px;
}
.loader__spec div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.loader__spec dt { color: var(--graphite); }
.loader__spec dt::after { content: " :"; }
.loader__spec dd { margin: 0; }
.loader__log {
  align-self: end;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 3px;
  color: var(--graphite);
}
.loader__log li { opacity: .25; transition: opacity .2s, color .2s; }
.loader__log li.is-on { opacity: 1; color: var(--ink); }
.loader__log li.is-on b { color: var(--ink); }
.loader__log b { font-weight: 500; margin-right: 8px; }

/* 2. Hero */
/* The hero gets its own stacking layer so the statement can slide over all of it, labels included */
.hero { z-index: 0; }
/* Shade that deepens as the statement covers the hero (main.js drives --shade) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: var(--shade, 0);
  pointer-events: none;
  z-index: 10;
}
.hero__figure {
  height: max(380px, calc(100svh - var(--nav-h) - var(--inset) * 2 - 25svh));
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  /* Faint 12-column guides, not full graph paper */
  background-image: linear-gradient(90deg, rgba(207, 202, 192, .45) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.hero-stage {
  position: absolute;
  inset: 34px 0 0;
}
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage__leaders path { fill: none; stroke: var(--graphite); stroke-width: .75; }
.stage__leaders circle { fill: var(--ink); }
.stage__labels { position: absolute; inset: 0; pointer-events: none; }
.stage__label { position: absolute; white-space: nowrap; color: var(--ink); background: var(--paper); padding: 1px 3px; }
.hero__row {
  display: grid;
  /* Split on the 12-column guides: 7 | 5 */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: 25svh;
}
.hero__title {
  padding: var(--pad);
  display: flex;
  align-items: flex-start;
  border-right: 1px solid var(--rule);
}
.hero__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Fill the wider 5/12 column; the global 52ch cap left a dead strip on the right */
.hero__aside .body { padding: var(--pad); max-width: 68ch; }
.ticker {
  border-top: 1px solid var(--rule);
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  position: relative;
}
/* Soft edges; overlays sit inside the border so the top rule stays solid */
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 7%;
  z-index: 1;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 75s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
/* Trailing padding equals the gap, so every group is the same width and the seam is invisible */
.ticker__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
}
/* Monotone line icons in Ink, per the brand. Fixed box so the groups measure the same before icons load. */
.ticker iconify-icon {
  font-size: 17px;
  width: 17px; height: 17px;
  color: var(--ink);
  flex: none;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* 5. Schematic */
.schematic { position: relative; }
/* Desktop with motion: the sheet sticks under the nav while the section scrolls 672% of the screen through
   it, like heronaiapp.com's plan section (main.js adds the class; phones and reduced motion keep normal flow) */
@media (min-width: 861px) {
  .schematic--sticky { height: calc(100svh - var(--nav-h) - var(--inset) * 2 + 672vh); }
  .schematic--sticky .schematic__pin { position: sticky; top: calc(var(--nav-h) + var(--inset)); }
  /* The caption is a note pinned at one of three fixed spots down the open side of the sheet: --at is 0, .5 or 1
     (top, middle, bottom) with a matching yPercent from main.js setIntro, which also owns its motion and opacity.
     The top spot sits 14px lower so the pin head clears the frame as much as the bottom note does. */
  .schematic--sticky .intro { top: calc(var(--pad) + 18px + var(--at, 0) * (100% - 2 * var(--pad) - 22px)); bottom: auto; transition: none; }
  .schematic--sticky .intro__p { transition: none; }
  .schematic--sticky .intro__pin { display: block; }
}
.schematic__pin {
  position: relative;
  height: calc(100svh - var(--nav-h) - var(--inset) * 2);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.schematic__kicker {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  font-size: clamp(30px, 3.6vw, 72px);
}
.kick { grid-area: 1 / 1; }
.h1 .ww, .ww { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.h1 .w, .ww > .w { display: inline-block; }
.kick .w { color: var(--rule); }
/* The sheet sits right of the intro panel so the two never overlap */
.plan {
  position: absolute;
  top: 50%;
  right: calc(var(--pad) + 4px);
  transform: translateY(-50%);
  width: min(calc(100% - 380px), calc((100svh - 130px) * 1200 / 760));
  height: auto;
  overflow: visible;
}

/* Schematic drawing styles */
.plan text, .switchboard text {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  fill: var(--ink);
}
.s-frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.s-grid line { stroke: var(--rule); stroke-width: .5; opacity: .6; }
.s-trunk { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; }
.s-branch { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: miter; }
.s-return { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 4; }
.s-node rect.box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.s-node rect.cap { fill: var(--ink); }
.s-node text.id { fill: var(--paper); font-size: 10px; font-weight: 500; }
.s-node text.name { font-size: 11px; }
.s-node text.tool { font-size: 8px; fill: var(--graphite); }
.s-source text { font-size: 11px; }
.s-source rect { fill: none; stroke: var(--ink); stroke-width: 1; }
.s-junction { fill: var(--ink); }
.s-dim line { stroke: var(--graphite); stroke-width: .75; }
.s-dim text { font-size: 10.5px; fill: var(--graphite); }
.s-label { font-size: 10.5px; fill: var(--graphite) !important; }
.l-frame .s-label { display: none; }
.s-trace { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: miter; }
.s-trace-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 1; }

.s-marker { cursor: pointer; }
.s-marker rect.hit { fill: transparent; }
.s-marker rect.sq { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .2s; }
.s-marker text { font-size: 10px; font-weight: 500; fill: var(--ink); pointer-events: none; }
.s-marker .halo { fill: none; stroke: var(--ink); stroke-width: 1; }
.s-marker:hover rect.sq, .s-marker.is-active rect.sq { fill: var(--ink); }
.s-marker:hover text, .s-marker.is-active text { fill: var(--paper); }
.s-marker:focus { outline: none; }
.s-marker:focus-visible rect.sq { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Intro panel */
.intro {
  position: absolute;
  left: calc(var(--pad) + 4px);
  bottom: calc(var(--pad) + 4px);
  width: min(320px, calc(100% - 2 * var(--pad)));
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 4;
  transition: opacity .4s ease;
}
/* The card waits until the drawing is complete (main.js, setIntro) */
.intro.is-waiting { opacity: 0; pointer-events: none; }
.intro__bar {
  background: var(--ink);
  color: var(--paper);
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
}
.intro__body { position: relative; padding: 12px 12px 4px; min-height: 104px; }
.intro__p { position: absolute; inset: 12px 12px auto; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; font-size: 14px; }
.intro__p.is-on { opacity: 1; transform: none; }
.intro__hint { padding: 0 12px 10px; color: var(--graphite); }
.intro__hint.is-cta { color: var(--ink); }
.intro.is-static .intro__p { position: static; opacity: 1; transform: none; margin-bottom: 8px; }
.intro.is-static .intro__body { min-height: 0; }
/* The pushpin that holds the note (desktop with motion only). Its drawing's origin is where the needle enters the
   bar, 9px down from the card's top edge; pen weights match the workbench's pinned notes. */
.intro__pin { display: none; position: absolute; left: calc(50% - 21px); top: -45px; width: 42px; height: 63px; overflow: visible; pointer-events: none; }
.intro__pin .tk { fill: var(--paper); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.intro__pin .tk-top { fill: var(--ink); stroke: var(--ink); stroke-width: .8; }
.intro__needle { stroke: var(--ink); stroke-width: .9; stroke-linecap: round; }
/* The ring snaps out across the bar when the pin goes in, so it is drawn in Paper */
.intro__ring { fill: none; stroke: var(--paper); stroke-width: .8; opacity: 0; }
.intro--ghost { pointer-events: none; z-index: 3; }

/* Marker note */
.note {
  position: absolute;
  width: 300px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 14px 14px;
  z-index: 6;
  box-shadow: 6px 6px 0 var(--paper-2);
}
.note[hidden] { display: none; }
.note__close { position: absolute; top: 6px; right: 10px; font-size: 16px; color: var(--graphite); }
.note__ref { color: var(--ink); margin-bottom: 6px; }
.note__title {
  font-stretch: 112.5%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 8px;
  padding-right: 18px;
}
.note__text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-72); }
.note__fix { border-top: 1px solid var(--rule); padding-top: 8px; }
.note__fix::before { content: "FIX  "; color: var(--ink); font-weight: 500; }

/* Checkpoint end */
.next { min-height: 40svh; display: grid; place-items: center; padding: var(--pad); }
.next__text { color: var(--graphite); text-align: center; max-width: 60ch; }

/* Switchboard drawing */
.sw-line { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.sw-thin { fill: none; stroke: var(--ink); stroke-width: .75; }
.sw-fill { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; }
.sw-dark { fill: var(--ink); }
.sw-cord { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.sw-live { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }
.sw-pulse { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 600; }
.sw-dim line { stroke: var(--graphite); stroke-width: .75; }
.sw-dim text { font-size: 10px; fill: var(--graphite); }
.sw-ground { stroke: var(--ink); stroke-width: 1; }

/* Mobile */
@media (max-width: 860px) {
  :root { --nav-h: 52px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links .nav__cta { width: auto; align-items: center; }
  .nav__desc { display: none; }
  .hero__figure { height: 52svh; }
  .cell__label--r { display: none; }
  .hero__row { grid-template-columns: minmax(0, 1fr); }
  .hero__title { border-right: 0; border-bottom: 1px solid var(--rule); padding: 20px var(--pad) 28px; }
  .h1 { font-size: clamp(30px, 8.4vw, 44px); }
  .loader { grid-template-columns: 1fr; gap: 18px; overflow: hidden; }
  .loader__log { display: none; }
  .loader__drawing { min-height: 34vh; }
  .loader__pct { right: auto; left: 0; }
  .loader__cap { display: none; }
  .plan { width: 96%; right: 2%; top: 40%; }
  .intro { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .intro__body { min-height: 84px; }
  .intro__p { font-size: 13px; }
  .note { left: 12px !important; right: 12px; width: auto; top: 12px !important; }
}

/* ?motion=1 adds .force-motion to <html> (main.js), which keeps motion on for testing */
@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) .ticker__track { animation: none; }
  :root:not(.force-motion) .intro__p { transition: none; }
}

/* ================= Checkpoint 2 ================= */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
section { position: relative; }
.h3 {
  margin: 0;
  font-stretch: 112.5%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.sec-head__label { display: block; color: var(--graphite); margin-bottom: 18px; }
.sec-head {
  padding: calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 1.6);
  border-bottom: 1px solid var(--rule);
}
.sec-head .h1 { margin-bottom: 18px; }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pad); align-items: end; }
.sec-head--split .h1 { margin-bottom: 0; }
.btn-line {
  display: inline-flex; align-items: center; gap: 26px;
  border: 1px solid var(--ink);
  padding: 11px 14px;
  transition: color .3s var(--ease-ui);
}
.btn-line:hover, .btn-line:focus-visible { color: var(--paper); }
.btn-signal {
  display: inline-flex; align-items: center; gap: 26px;
  background: var(--signal); color: var(--ink);
  padding: 13px 16px;
  font-weight: 500;
  transition: color .3s var(--ease-ui);
}
.btn-signal:hover, .btn-signal:focus-visible { color: var(--signal); }

/* Iso drawings (problems, audience) */
.iso-line { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.iso-thin { fill: none; stroke: var(--ink); stroke-width: .6; }
.iso-hidden { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 3 3; opacity: .6; }
.iso-hatch { opacity: 0; transition: opacity .35s; }
.iso-hatch.is-on { opacity: .8; }
.iso-signal { opacity: 0; transition: opacity .25s; }

/* 3. Statement */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* A sheet of paper: opaque, above the hero, slides up over it on scroll */
  background: var(--paper);
  z-index: 1;
}
/* The sheet's leading edge: the Rule border turns into a 1.5px Ink line as it rises.
   Depth from line weight, not shadow (brand.md). main.js drives --lift. */
.statement::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -1px;
  height: 1.5px;
  background: var(--ink);
  opacity: var(--lift, 0);
  pointer-events: none;
  z-index: 2;
}
.statement__figure { border-right: 1px solid var(--rule); min-height: 80svh; display: grid; place-items: center; padding: var(--pad); }
.statement { height: calc(100svh - var(--nav-h) - var(--inset) * 2); }
.statement__figure { min-height: 0 !important; height: 100%; padding: 44px var(--pad) 12px !important; }
.tower { width: 100%; height: 100%; display: block; overflow: visible; }
.tw-t { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; fill: var(--graphite); }
.tw-small { font-size: 10px; }
.tw-construction text { display: none; }
.tw-unit { fill: var(--ink); font-size: 11px; font-weight: 500; }
.tw-axis { stroke: var(--rule); stroke-width: .7; stroke-dasharray: 6 4; fill: none; }
.tw-bubble { fill: var(--paper); stroke: var(--graphite); stroke-width: .8; }
.tw-level { fill: none; stroke: var(--graphite); stroke-width: .8; }
.tw-ink { fill: none; stroke: var(--ink); stroke-width: 1; }
.tw-heavy { stroke-width: 1.6; }
.tw-fine { stroke-width: .6; }
.tw-hair { stroke-width: .4; opacity: .6; }
.tw-thin { fill: none; stroke: var(--ink); stroke-width: .5; opacity: .45; }
.tw-branch { fill: none; stroke: var(--ink); stroke-linecap: round; }
.tw-pin { fill: var(--ink); }
.tw-leader { fill: none; stroke: var(--graphite); stroke-width: .75; }
.tw-tagbg { fill: var(--paper); }
.h-dash { fill: none; stroke: var(--graphite); stroke-width: .9; stroke-dasharray: 5 4; }
.h-handle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.h-label { font-size: 10px; fill: var(--graphite); letter-spacing: .04em; }
.statement__body { display: grid; grid-template-rows: 1fr auto; }
.statement__text { padding: calc(var(--pad) * 2) var(--pad); display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.statement__big {
  margin: 0;
  font-stretch: 112.5%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(28px, 3.05vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.statement__big .w { color: var(--rule); }
/* Supporting line under the short headline: plain sentence case, full Ink for contrast */
.statement__sub {
  margin: -8px 0 0;
  font-size: clamp(17px, 1.3vw, 23px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 40ch;
}
.tools { border-top: 1px solid var(--rule); padding: 44px 0 0; }
.tools__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.tools__grid li { padding: 22px var(--pad); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: clamp(11px, .9vw, 14px); transition: background-color .25s; }
.tools__grid li:nth-child(4n) { border-right: 0; }
.tools__grid li:hover { background: var(--paper-2); }
.tools__cap { margin: 0; padding: 12px var(--pad); color: var(--graphite); }

/* 4. Problems */
.problems { border-bottom: 1px solid var(--rule); }
.problems .sec-head .body { margin-top: 4px; }
.problems__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto minmax(320px, 1fr) auto;
}
/* Subgrid: head, figure and text rows line up across all four cards */
.prob { border-right: 1px solid var(--rule); display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.prob:last-child { border-right: 0; }
.prob__head { display: flex; justify-content: space-between; padding: 12px var(--pad); border-bottom: 1px solid var(--rule); color: var(--graphite); }
.prob__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.prob__tag::before { content: ""; width: 7px; height: 7px; background: var(--ink); transform: scale(0); transition: transform .25s; }
.prob__fig { position: relative; display: grid; place-items: center; padding: 28px 0 36px; border-bottom: 1px solid var(--rule); }
.prob__fig svg { width: 92%; max-width: 320px; height: auto; overflow: visible; position: relative; }
.prob__fig::before {
  content: ""; position: absolute; inset: 14px;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0; transition: opacity .35s;
}
.prob__cap { position: absolute; left: var(--pad); bottom: 12px; color: var(--graphite); }
.prob__cross { position: absolute; font: 300 13px/1 var(--f-mono); color: var(--ink); opacity: 0; transition: opacity .3s; }
.prob__cross:nth-of-type(1) { top: 6px; left: 8px; } .prob__cross:nth-of-type(2) { top: 6px; right: 8px; }
.prob__cross:nth-of-type(3) { bottom: 6px; left: 8px; } .prob__cross:nth-of-type(4) { bottom: 6px; right: 8px; }
.prob__text { padding: var(--pad); display: grid; gap: 14px; align-content: start; }
.prob__text .body { font-size: 14px; }
.prob:hover .prob__fig::before { opacity: .45; }
.prob:hover .prob__cross { opacity: 1; }
.prob:hover .pd-signal { transform: scale(1); }
.prob:hover .prob__tag::before { transform: scale(1); }

/* Problem drawings: line weight carries depth (see drawings.js renderIso) */
.pd-l { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.pd-out { stroke-width: 1.5; }
.pd-in { stroke-width: 1; }
.pd-fine { stroke-width: .6; }
.pd-ghost { stroke-width: .9; stroke-dasharray: 3 2.6; }
.pd-lead { stroke: var(--graphite); stroke-width: .6; }
.pd-face { fill: var(--paper); }
.pd-dot { fill: var(--ink); }
.pd-label { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .06em; fill: var(--ink); }
.pd-signal { fill: var(--ink); transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }

/* 6. Experience */
.experience { border-bottom: 1px solid var(--rule); }
.exp-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--rule); }
.exp-top__figure { border-right: 1px solid var(--rule); min-height: 72svh; display: grid; place-items: center; padding: 48px var(--pad) var(--pad); overflow: hidden; }
.exp-top__figure { position: relative; }
.exp-stack { width: 100%; height: 100%; max-height: 74svh; overflow: visible; }
.exp-stack__hint { position: absolute; left: var(--pad); bottom: 14px; color: var(--graphite); }
/* Desktop with motion: the sheet sticks under the nav with the stack centred on the page, then the divider
   slides in from the right edge carrying the copy while the stack settles into its column (main.js adds the
   class; the divider moves from the figure's right border to the copy's left border so it can travel) */
@media (min-width: 861px) {
  .experience--sticky { height: calc(100svh - var(--nav-h) - var(--inset) * 2 + 160vh); }
  .experience--sticky .exp-top { position: sticky; top: calc(var(--nav-h) + var(--inset)); height: calc(100svh - var(--nav-h) - var(--inset) * 2); overflow: clip; }
  .experience--sticky .exp-top__figure { border-right: 0; min-height: 0; overflow: visible; }
  .experience--sticky .exp-stack { will-change: transform; } /* own layer: sliding it must not repaint 600 hatched shapes */
  .experience--sticky .exp-top__text { position: relative; z-index: 1; background: var(--paper); border-left: 1px solid var(--rule); will-change: transform; }
}
/* Exploded stack (drawings.js renderStack); shares the .pd-* pen weights with the problem drawings */
.xs-guide { fill: none; stroke: var(--graphite); stroke-width: .75; stroke-dasharray: 2 4; }
.xs-xray { stroke: var(--graphite); stroke-width: .6; stroke-dasharray: 2 2.4; }
.xs-dimt { font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em; fill: var(--graphite); }
.xs-axis { stroke-dasharray: 6 4; }
.xs-ink { fill: var(--ink); }
.xs-bore { opacity: .9; }
.xs-dl { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; }
.xs-dl--out { stroke-width: 1.25; }
.xs-dtone { opacity: .9; }
.xs-etch { font-family: var(--f-mono); letter-spacing: .08em; fill: var(--ink); opacity: .75; }
.xs-etch--tag { opacity: 1; font-weight: 500; }
.xs-lift { pointer-events: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.xs-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.xs-seam { stroke: var(--paper); stroke-width: .5; }
.xs-hl { opacity: 0; transition: opacity .3s; }
.xs-plate.is-active .xs-lift { transform: translateY(-12px); }
.xs-plate.is-active .xs-hl { opacity: .7; }
.xs-balloon { fill: var(--paper); stroke: var(--ink); stroke-width: 1; transition: fill .25s; }
.xs-bnum { font-family: var(--f-mono); font-size: 10px; fill: var(--ink); transition: fill .25s; }
.xs-plate.is-active .xs-balloon { fill: var(--ink); }
.xs-plate.is-active .xs-bnum { fill: var(--paper); }
.xs-name { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; fill: var(--ink); }
.xs-tools { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; fill: var(--graphite); transition: fill .3s; }
.xs-plate.is-active .xs-tools { fill: var(--ink); }
.xs-lv { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; fill: var(--graphite); }
.xs-tri { fill: none; stroke: var(--graphite); stroke-width: .75; }
.xs-ping { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0; }
.xs-pulse { fill: var(--ink); opacity: 0; }
.xs-lead { fill: var(--signal); }
.caps li { position: relative; transition: background-color .3s; cursor: pointer; }
.caps li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
.caps li.is-active { background: var(--paper-2); }
.caps li.is-active::before { transform: scaleY(1); }
.exp-top__text { padding: calc(var(--pad) * 2) 0 0; display: flex; flex-direction: column; }
.exp-top__text > .sec-head__label, .exp-top__text > .h1, .exp-top__text > .body { margin-left: var(--pad); margin-right: var(--pad); }
.exp-top__text .h1 { margin-bottom: 18px; }
.caps { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--rule); margin-top: 40px; }
.caps li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--pad); border-bottom: 1px solid var(--rule); font-size: 15px; }
.caps li:last-child { border-bottom: 0; }
.caps iconify-icon { font-size: 20px; color: var(--ink); flex: none; }
.ch text { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .03em; }
.ch-src { fill: none; stroke: var(--ink); stroke-width: 1; }
.ch-node .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ch-t { font-size: 8.5px; fill: var(--ink); }
.ch-i { font-size: 7px; fill: var(--graphite); }
.ch-end { fill: var(--signal); }

/* 7. Process */
.process { border-bottom: 1px solid var(--rule); }
.process__pin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); height: calc(100svh - var(--nav-h) - var(--inset) * 2); }
.process__figure { border-right: 1px solid var(--rule); display: grid; place-items: center; padding: 48px var(--pad) var(--pad); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.step { border-bottom: 1px solid var(--rule); padding: var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; }
.step:last-child { border-bottom: 0; }
.step__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--ink); transition: background-color .3s, color .3s; }
.step__k { font-stretch: 112.5%; font-weight: 600; font-size: clamp(18px, 1.4vw, 26px); letter-spacing: -.01em; }
.step .body { opacity: .35; transition: opacity .3s; font-size: 15px; }
.step.is-on .step__bar { background: var(--ink); color: var(--paper); }
.step.is-on .body { opacity: 1; }
/* Desktop with motion: one card travels down the four slots with the scroll, changing content at each (main.js slideCards) */
/* The four slots always fit inside the pinned frame (short screens tighten the card's vertical padding), so the
   middle column line, the card and the section's bottom rule end together. The card's own outline is a rule just
   outside its top and bottom edges, which lands on the line above or below instead of doubling it; the column
   edges are its sides. */
.process__pin:has(> .steps--slide) { grid-template-rows: minmax(0, 1fr); }
.steps--slide { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.steps--slide .step { border-bottom: 0; padding-block: clamp(8px, 2.2svh, var(--pad)); gap: clamp(6px, 1.3svh, 12px); box-shadow: 0 -1px 0 var(--rule), 0 1px 0 var(--rule); will-change: transform; }
.steps--slide .step .step__bar { background: var(--ink); color: var(--paper); transition: none; }
.steps--slide .step .body { opacity: 1; transition: none; }
/* Four ticks under the title bar fill with the pin, one per step; the title and number roll at each change
   (main.js rollCard). The roll clips top and bottom only, so a longer outgoing title is never cut at the side. */
.step__ticks { display: none; }
.steps--slide .step__ticks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: calc(-1 * clamp(2px, .6svh, 6px)); }
.step__ticks i { display: block; height: 2.5px; background: var(--rule); }
.step__ticks b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.odo { display: inline-block; position: relative; clip-path: inset(0 -100vw); }
.odo__in { display: inline-block; }
.odo__ghost { position: absolute; left: 0; top: 0; white-space: nowrap; }
/* Stage states on the shared schematic */
/* Process workbench (drawings.js renderBench); pen weights shared with the other iso drawings */
.process__bench { width: 100%; height: 100%; overflow: visible; }
.step { cursor: pointer; }
.wb-gl { stroke: var(--rule); stroke-width: .6; }
.wb-rule { opacity: .55; }
.wb-hand { opacity: .85; }
.wb-tag { opacity: .9; font-weight: 500; }
.wb-book { opacity: 1; font-weight: 600; }
.wb-panelt { opacity: .85; }
.wb-string { opacity: .55; }
.wb-ribbon { fill: var(--ink); }
.wb-needle { stroke-width: 1.4; }
.wb-light { fill: var(--paper); stroke: var(--ink); stroke-width: .6; }
.wb-led { fill: var(--ink); }
.wb-ncheck { stroke-width: 1.6; }
.wb-lens { fill: rgba(243, 241, 235, .35); stroke: var(--ink); stroke-width: 2; }
.wb-handle { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.wb-lead__top { fill: var(--signal); }
.wb-lead__side { fill: #C98608; }
.wb-lead.is-bad .wb-lead__top, .wb-lead.is-bad .wb-lead__side { fill: var(--paper); }
.wb-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.wb-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; fill: var(--ink); }
.wb-logt { fill: var(--graphite); }
.wb-ball { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.wb-ballt { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .02em; fill: var(--ink); }
.wb-node { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.wb-node.is-hover { transform: translateY(-7px); }
.wb-tip { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s; pointer-events: none; }
.wb-tip.is-on { opacity: 1; transform: none; }
.wb-tipbox { fill: var(--ink); }
.wb-tipk { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; fill: var(--paper); }
.wb-tipv { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .05em; fill: var(--rule); }
/* Idle loops: the marigold pen inks the plan (MAP) and lays the pipes (BUILD) */
.wb-pen { fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; opacity: 0; }
.wb-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0; }

/* 8. Portfolio */
.portfolio { border-bottom: 1px solid var(--rule); }
.pf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--rule); }
.pf__chest { border-right: 1px solid var(--rule); padding: 48px var(--pad) var(--pad); display: flex; flex-direction: column; gap: 18px; }
.chest { width: 100%; height: auto; max-height: 62svh; overflow: visible; }
.pf__index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pf__index li { border-bottom: 1px solid var(--rule); }
.pf__index button { width: 100%; text-align: left; display: flex; gap: 14px; padding: 10px 12px; position: relative; color: var(--graphite); transition: background-color .2s, color .2s; }
.pf__index button span { color: var(--graphite); min-width: 40px; }
.pf__index button:hover { background: var(--paper-2); color: var(--ink); }
.pf__index button.is-on { color: var(--ink); background: var(--paper-2); }
.pf__index button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.pf__index button.is-on::before { transform: scaleY(1); }
.pf__index button.is-on span { color: var(--ink); font-weight: 500; }
.pf__feature { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.feature { width: 100%; height: auto; display: block; overflow: visible; padding: 18px 14px 6px; background-image: radial-gradient(var(--rule) .8px, transparent .8px); background-size: 16px 16px; }
.pf__tb { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--ink); }
.pf__tb > * { padding: 12px var(--pad); margin: 0; }
.pf__title { font-stretch: 112.5%; font-weight: 600; text-transform: uppercase; font-size: clamp(20px, 1.7vw, 30px); letter-spacing: -.015em; line-height: 1; }
.pf__tool { border-left: 1px solid var(--rule); color: var(--graphite); display: flex; align-items: center; }
.pf__kind { grid-column: 1 / -1; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; color: var(--graphite); }
.pf__scope { grid-column: 1 / -1; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-72); line-height: 1.45; min-height: 3.2em; }
.pf__nav { grid-column: 1 / -1; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; padding: 0 !important; }
.pf__nav button { padding: 14px var(--pad); color: var(--ink); transition: background-color .2s; }
.pf__nav button:hover { background: var(--paper-2); }
.pf__nav span { color: var(--graphite); }
/* Plan chest (drawings.js renderChest) */
.ch-front { fill: var(--paper); transition: fill .2s; }
.ch-drawer { cursor: pointer; outline: none; }
.ch-closehit { outline: none; }
.ch-drawer:hover .ch-front, .ch-drawer:focus-visible .ch-front { fill: var(--paper-2); }
.ch-drawer:hover .ch-pull, .ch-drawer:focus-visible .ch-pull { stroke: var(--ink); stroke-width: 1.8; }
.ch-drawer.is-open .ch-pull { opacity: 0; }
.ch-slot { opacity: 0; pointer-events: none; }
.ch-slotbg { fill: var(--paper-2); }
.ch-lbl { opacity: 1; font-weight: 500; }
.ch-cnt { opacity: .7; }
.ch-plate { opacity: .6; }
.ch-fine { stroke-width: .6; }
.ch-sheet { cursor: pointer; outline: none; }
.ch-tab { fill: var(--paper-2); }
.ch-sheet.is-sel .ch-tab { fill: var(--ink); }
.ch-sheet:hover .ch-tab, .ch-sheet:focus-visible .ch-tab { fill: var(--rule); }
.ch-tabt { opacity: .9; }
.ch-corner { fill: var(--ink); }
.ch-ltitle { opacity: 1; font-weight: 500; }
.ch-lifted { pointer-events: none; }
/* Featured sheet (drawings.js renderFeature) */
.ft-border { fill: none; stroke: var(--ink); stroke-width: 1; }
.ft-border--in { stroke: var(--rule); }
.ft-tick { stroke: var(--rule); stroke-width: 1; }
.ft-zone, .ft-cap { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; fill: var(--graphite); }
.ft-cap { fill: var(--ink); font-size: 11px; }
.ft-cap--dim { fill: var(--graphite); font-size: 9.5px; }
.ft-step { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; fill: var(--ink); }
.ft-out { fill: var(--ink); }
.ft-ball { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.ft-ball--ink { fill: var(--ink); }
.ft-rod { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.ft-dimline { fill: none; stroke: var(--graphite); stroke-width: .8; }
.ft-dimtick { stroke: var(--ink); stroke-width: 1.2; }
.ft-dimt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; fill: var(--ink); }

/* 9. Audience */
.audience { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); border-bottom: 1px solid var(--rule); }
.audience__figure { border-right: 1px solid var(--rule); }
.audience__sticky { position: sticky; top: calc(var(--nav-h) + var(--inset)); height: calc(100svh - var(--nav-h) - var(--inset) * 2); display: grid; place-items: center; padding: 48px var(--pad) var(--pad); }
.diorama { width: 100%; height: 100%; overflow: hidden; }
.diorama text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink); letter-spacing: .04em; }
/* FIG. 06 town: strokes hold their weight while the scene zooms; routes scale theirs against the zoom */
.town :not(.tw-route) { vector-effect: non-scaling-stroke; }
.tw-grid path { stroke: var(--rule); stroke-width: .7; fill: none; }
.tw-route { fill: none; stroke: var(--ink); stroke-width: calc(1.6px / var(--zs, 1)); stroke-linejoin: round; }
.tw-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.tw-lead { fill: var(--signal); stroke: var(--ink); stroke-width: .8; opacity: 0; }
.tw-lab text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; fill: var(--graphite); transition: fill .25s; }
.tw-lab circle { fill: var(--ink); transition: fill .25s; }
.tw-leader { fill: none; stroke: var(--graphite); stroke-width: .8; }
.tw-lab.is-on text { fill: var(--ink); font-weight: 600; }
.tw-lab.is-on circle { fill: var(--ink); }
.audience__list { padding: calc(var(--pad) * 2) 0 calc(var(--pad) * 2); }
.audience__list > .sec-head__label, .audience__list > .h1 { margin-left: var(--pad); margin-right: var(--pad); }
.audience__list .h1 { margin-bottom: 40px; }
.acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.acc li { border-bottom: 1px solid var(--rule); }
.acc button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); text-align: left; }
.acc .acc__k { font-stretch: 112.5%; font-weight: 600; text-transform: uppercase; font-size: clamp(17px, 1.3vw, 24px); letter-spacing: -.01em; transition: transform .3s; }
.acc .acc__plus { font: 300 20px/1 var(--f-mono); color: var(--graphite); transition: transform .3s; }
.acc button:hover .acc__k { transform: translateX(6px); }
.acc__body { overflow: hidden; height: 0; }
.acc__body p { margin: 0; padding: 0 var(--pad) 18px; max-width: 52ch; }
.acc li.is-open .acc__plus { transform: rotate(45deg); color: var(--ink); }

/* 10. Contact */
.contact { border-bottom: 1px solid var(--rule); padding: 18vh var(--pad) 6vh; text-align: center; overflow: hidden; }
.contact__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; z-index: 2; }
.contact .body { margin: 0 auto; }
.coord { position: absolute; color: var(--graphite); }
.coord--tl { top: 14px; left: var(--pad); }
.coord--tr { top: 14px; right: var(--pad); }
.coord--bl { bottom: 14px; left: var(--pad); }
.contact::before, .contact::after { content: ""; position: absolute; background: var(--rule); }
.contact::before { left: 0; right: 0; top: 44px; height: 1px; }
.contact::after { top: 0; bottom: 0; left: calc(100% / 6); width: 1px; }
.jdraw { width: min(900px, 100%); height: auto; margin: 7vh auto 0; display: block; overflow: visible; }
.jdraw text { font-family: var(--f-mono); font-size: 11px; fill: var(--graphite); letter-spacing: .04em; }
.j-guides line { stroke: var(--rule); stroke-width: .6; }
.j-arc { fill: none; stroke: var(--rule); stroke-width: .8; stroke-dasharray: 4 4; }
.j-main { fill: none; stroke: var(--ink); stroke-width: 4; }
.j-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.j-end { fill: var(--signal); }

/* 11. Footer */
.footer { padding: 0 var(--inset) var(--inset); }
.footer__top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 2fr); border-bottom: 1px solid var(--rule); }
.footer__cell { padding: var(--pad); border-right: 1px solid var(--rule); min-height: 220px; }
.footer__cell:last-child { border-right: 0; }
.footer__line { margin: 0; font-stretch: 112.5%; font-weight: 600; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 34px); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__links--plain { color: var(--ink-72); }
.todo .mono { color: var(--signal-ink); }
.footer__mark { display: grid; place-items: center; }
.footer__mark svg { width: 64%; max-width: 140px; color: var(--ink); }
.footer__name { padding: 28px var(--pad); border-bottom: 1px solid var(--rule); }
.footer__name svg { width: 100%; height: auto; display: block; overflow: visible; }
.fn-guides line, .fn-guides circle { stroke: var(--rule); stroke-width: 1; fill: none; }
.fn-name { font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600; font-size: 238px; letter-spacing: -.02em; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1400; stroke-dashoffset: 0; }
.fn-ink, .fn-bleed { font-family: var(--f-display); font-stretch: 112.5%; font-weight: 600; font-size: 238px; letter-spacing: -.02em; pointer-events: none; }
.fn-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 1.4; }
.fn-bleed { fill: var(--graphite); opacity: .4; stroke: none; }
.footer__name svg { cursor: crosshair; }
.footer__bar { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; padding-left: var(--pad); }
.footer__copy { align-self: center; padding: 14px 0; color: var(--graphite); }
.footer__legal { display: flex; }
.footer__legal a { display: flex; align-items: center; padding: 16px var(--pad); border-left: 1px solid var(--rule); font-size: 15px; color: var(--ink); transition: color .2s, background-color .2s; }
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--ink); background: var(--paper-2); }
.footer__legal a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* Policy pages (privacy, terms, cookies): same frame, nav and footer bar as the main page */
.legal { padding: calc(var(--nav-h) + var(--inset)) var(--inset) 0; }
.legal__head { padding: 56px var(--pad) 40px; border-bottom: 1px solid var(--rule); }
.legal__head .h1 { margin: 14px 0 20px; }
.legal__lead { max-width: 60ch; margin: 0 0 18px; }
.legal__date { margin: 0; color: var(--graphite); }
.legal__body { max-width: 72ch; padding: 16px var(--pad) 88px; }
.legal__body h2 { font-stretch: 112.5%; font-weight: 600; text-transform: uppercase; font-size: clamp(17px, 1.3vw, 21px); letter-spacing: -.01em; margin: 40px 0 10px; }
.legal__body p { margin: 0 0 12px; color: var(--ink-72); }
.legal__body a, .legal__lead a { text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.legal__foot { border-top: 1px solid var(--rule); margin: 0 var(--inset); padding: 0; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .statement, .exp-top, .audience { grid-template-columns: minmax(0, 1fr); }
  .statement__figure, .exp-top__figure, .audience__figure, .process__figure { border-right: 0; border-bottom: 1px solid var(--rule); }
  .statement { height: auto; }
  .statement__figure { height: auto; padding: 40px 12px 12px !important; }
  .tower { height: auto; }
  .tools__grid { grid-template-columns: repeat(2, 1fr); }
  .tools__grid li:nth-child(2n) { border-right: 0; }
  .problems__grid { grid-template-columns: minmax(0, 1fr); }
  .problems__grid { grid-template-rows: none; }
  .prob { border-right: 0; border-bottom: 1px solid var(--rule); grid-row: auto; grid-template-rows: auto; }
  .prob .pd-signal, .prob .prob__tag::before { transform: scale(1); }
  .exp-top__figure { min-height: 0; padding: 44px 12px 12px; }
  .exp-stack { max-height: none; height: auto; }
  .xs-name { font-size: 22px; }
  .xs-tools, .xs-level { display: none; }
  .xs-balloon { stroke-width: 1.6; }
  .xs-bnum { font-size: 13px; }
  .process__pin { grid-template-columns: minmax(0, 1fr); height: auto; }
  /* Phones: the bench stays pinned above the steps while you read them */
  .process__figure { display: block; position: sticky; top: calc(var(--nav-h) + var(--inset)); z-index: 3; background: var(--paper); padding: 34px 8px 8px; }
  .process__bench { height: auto; }
  .wb-label, .wb-calls { display: none; }
  .steps { grid-template-rows: none; }
  .step .body { opacity: 1; }
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf__chest { border-right: 0; border-bottom: 1px solid var(--rule); padding: 40px 12px 12px; }
  .chest { max-height: 46vh; }
  .ft-step { font-size: 21px; }
  .ft-cap { font-size: 16px; }
  .ft-cap--dim, .ft-zone { display: none; }
  /* The index becomes a strip of chips so the sheet stays close to the chest */
  .pf__index { display: flex; overflow-x: auto; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .pf__index li { flex: none; border-bottom: 0; border-right: 1px solid var(--rule); }
  .pf__index button { white-space: nowrap; padding: 10px 14px; gap: 8px; }
  .pf__index button span { min-width: 0; }
  .pf__index button::before { top: auto; left: 0; right: 0; width: auto; height: 3px; transform: scaleX(0); }
  .pf__index button.is-on::before { transform: scaleX(1); }
  .audience__sticky { position: static; height: auto; padding: 40px 12px 12px; }
  .diorama { height: auto; }
  .contact { padding: 12vh 16px 4vh; }
  .contact::after { display: none; }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__tag { grid-column: 1 / -1; }
  .footer__cell { min-height: 0; border-bottom: 1px solid var(--rule); }
  .footer__cell:nth-child(2n+1):not(.footer__tag) { border-right: 0; }
  .footer__mark { display: none; }
  .footer__cell:nth-child(4) { grid-column: 1 / -1; border-right: 0; }
  .footer__bar { flex-direction: column; gap: 0; padding-left: 0; }
  .footer__copy { align-self: flex-start; padding: 14px var(--pad); }
  .footer__legal { flex-wrap: wrap; border-top: 1px solid var(--rule); }
  .footer__legal a { flex: 1 1 auto; justify-content: center; padding: 14px 12px; font-size: 14px; }
  .footer__legal a:first-child { border-left: 0; }

  /* Schematic: tall sheet, no pinning, scroll reveals it */
  .schematic__pin { height: auto; overflow: visible; padding: 32px 12px 24px; display: flex; flex-direction: column; }
  .schematic__kicker { order: 1; } .intro { order: 2; } .plan { order: 3; }
  .schematic__kicker { position: static; display: block; place-items: normal; justify-items: start; font-size: clamp(30px, 8.4vw, 44px); margin: 8px 4px 24px; }
  .schematic__kicker .kick { display: block; }
  .plan, .plan.plan--v { position: static; transform: none; width: 100%; height: auto; display: block; }
  .intro { position: static; width: auto; margin: 0 0 20px; }
  .note { position: fixed !important; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; z-index: 70; box-shadow: 0 -6px 0 var(--paper-2); }
}
.plan--v .s-node text.name { font-size: 12px; }
.plan--v .s-node text.id { font-size: 10px; }
.plan--v .s-source text { font-size: 11px; }
.plan--v .s-label { font-size: 10px; }
.plan--v .s-dim text { font-size: 10px; }

/* Keep a hyphenated word together in headings */
.nowrap { white-space: nowrap; }

/* Labels: anything a visitor should read renders at 9px or more on a 1440px screen. Engraved lettering,
   rulers, levels and sketch handwriting were too small to read and only added noise, so the line work
   carries those details instead. */
.xs-eng text, text.xs-etch--tag, text.xs-lv,
text.wb-rule, text.wb-hand, text.wb-panelt,
text.ch-plate, text.ch-cnt { display: none; }

/* ---------- Transitions ---------- */
/* Rule draw: a section rule draws in from the left once it scrolls into view (main.js adds the classes) */
.rule-draw { position: relative; border-bottom-color: transparent !important; }
.rule-draw::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rule); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-ui); pointer-events: none;
}
.rule-draw.is-drawn::after { transform: none; }

/* Label roll: on hover the label slides up and its copy rolls in from below (ui.js builds the spans) */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.roll > span { display: inline-block; transition: transform .48s var(--ease-ui); }
.roll > .roll__b { position: absolute; left: 0; top: 100%; white-space: nowrap; }
a:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-100%); }
.btn-line > [aria-hidden="true"], .btn-signal > [aria-hidden="true"], .nav__cta > [aria-hidden="true"] { display: inline-block; transition: transform .48s var(--ease-ui); }
.btn-line:hover > [aria-hidden="true"], .btn-signal:hover > [aria-hidden="true"], .nav__cta:hover > [aria-hidden="true"] { transform: translateX(4px); }

/* Fill wipe: buttons fill with ink from the bottom edge */
.btn-line, .btn-signal { position: relative; isolation: isolate; overflow: hidden; }
.btn-line::before, .btn-signal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .48s var(--ease-ui);
}
.btn-line:hover::before, .btn-line:focus-visible::before, .btn-signal:hover::before, .btn-signal:focus-visible::before { transform: scaleY(1); }

/* Page curtain: paper slides up over the page on the way out and lifts on the way in (ui.js) */
.curtain { position: fixed; inset: 0; z-index: 99; background: var(--paper); transform: translateY(100%); pointer-events: none; }
.curtain::before, .curtain::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); }
.curtain::before { top: 0; }
.curtain::after { bottom: 0; }
.is-arriving .curtain { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .roll > span,
  html:not(.force-motion) .btn-line::before, html:not(.force-motion) .btn-signal::before,
  html:not(.force-motion) .btn-line > [aria-hidden="true"], html:not(.force-motion) .btn-signal > [aria-hidden="true"],
  html:not(.force-motion) .rule-draw::after { transition: none; }
}