/* The Intent Layer, editorial stylesheet
   Palette: white, ink blue, one teal accent; ember marks peripheral (non-brain) signals. */
:root {
  --paper: #f8f8f5;
  --paper-2: #f0f0ec;
  --card: #f8f8f5;
  --ink: #0b1524;
  --ink-2: #36435a;
  --muted: #647089;
  --line: #e2e5e9;
  --accent: #0a6e6a;
  --accent-soft: #e8f3f2;
  --peri: #b4502a;
  --peri-soft: #faeee8;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col: 720px;
  --wide: 1080px;
  --bar: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.1875rem/1.65 var(--body);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font: 500 0.8125rem/1 var(--display);
}
.brand { font-weight: 700; font-size: 0.9375rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.acts { display: flex; gap: 2px; margin-left: auto; }
.acts a, .src-link {
  color: var(--ink-2); text-decoration: none; padding: 8px 10px; border-radius: 6px; white-space: nowrap;
}
.acts a span { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); margin-right: 6px; }
.acts a:hover, .src-link:hover { background: var(--paper-2); }
.acts a[aria-current="true"] { color: var(--ink); background: var(--accent-soft); }
.acts a[aria-current="true"] span { color: var(--accent); }
.src-link { border-left: 1px solid var(--line); border-radius: 0; padding-left: 16px; margin-left: 6px; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.chapters { display: none; margin-left: auto; position: relative; }
.chapters summary {
  list-style: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; user-select: none;
}
.chapters summary::-webkit-details-marker { display: none; }
.chapters[open] summary { background: var(--paper-2); }
.chapters nav {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 40px));
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 32px rgb(15 26 42 / 0.16);
}
.chapters nav a { display: flex; gap: 12px; padding: 12px; color: var(--ink); text-decoration: none; border-radius: 6px; font-size: 0.9375rem; }
.chapters nav a span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); width: 1.6em; }
.chapters nav a[aria-current="true"] { background: var(--accent-soft); }
@media (max-width: 880px) {
  .acts, .src-link { display: none; }
  .chapters { display: block; }
}

/* ---------- Hero ---------- */
.hero { max-width: var(--wide); margin: 0 auto; padding: clamp(48px, 9vw, 112px) 20px 0; }
.kicker, .label {
  font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.hero h1 {
  font: 700 clamp(3.2rem, 11vw, 8rem)/0.92 var(--display);
  letter-spacing: -0.045em; margin: 18px 0 28px; max-width: 9ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.dek { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.4; max-width: 34em; color: var(--ink-2); margin: 0 0 28px; }
.meta { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; padding: 0; list-style: none; }
.key { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font: 400 0.875rem/1.4 var(--display); color: var(--ink-2); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.key b { font-weight: 600; }

.tag {
  display: inline-block; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 8px 4px; border-radius: 4px; vertical-align: 0.12em; white-space: nowrap;
}
.tag.d { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.tag.p { color: var(--accent); border: 1px solid var(--accent); }
.tag.s { color: var(--muted); border: 1px dashed var(--muted); }
.tag.peer { background: var(--accent-soft); color: var(--accent); }
.tag.pre { background: var(--peri-soft); color: var(--peri); }

/* ---------- Prose ---------- */
.prose { max-width: var(--col); margin: 0 auto; padding: 0 20px; }
.prose p { margin: 0 0 1.25em; }
.prose h3 { font: 700 1.625rem/1.2 var(--display); letter-spacing: -0.02em; margin: 2.4em 0 0.7em; }
.prose strong { font-weight: 600; }
.lede p:first-child::first-letter { font: 700 4.2em/0.8 var(--display); float: left; padding: 0.08em 0.1em 0 0; color: var(--accent); }
.pull { font: 600 clamp(1.375rem, 3vw, 1.75rem)/1.3 var(--display); letter-spacing: -0.02em; margin: 1.6em 0 !important; padding-left: 18px; border-left: 3px solid var(--accent); }
.prose ol.plain, .prose ul.plain { padding-left: 1.2em; margin: 0 0 1.25em; }
.prose ol.plain li, .prose ul.plain li { margin-bottom: 0.6em; }
sup.c { font: 500 0.6875rem/1 var(--mono); margin-left: 1px; }
sup.c a { text-decoration: none; padding: 2px 1px; }
sup.c a:hover { text-decoration: underline; }

.act { padding-top: clamp(64px, 10vw, 128px); }
.act-head { max-width: var(--wide); margin: 0 auto clamp(28px, 5vw, 56px); padding: 28px 20px 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: minmax(90px, 180px) 1fr; gap: 12px 32px; align-items: start; }
.act-no { font: 500 0.8125rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 10px; }
.act-head h2 { font: 700 clamp(2.25rem, 6vw, 4.25rem)/1 var(--display); letter-spacing: -0.035em; margin: 0; max-width: 14ch; }
.act-head h2 a { font-size: 0.4em; vertical-align: middle; text-decoration: none; color: var(--muted); margin-left: 8px; opacity: 0.55; }
.act-head h2 a:hover, .act-head h2 a:focus-visible { opacity: 1; color: var(--accent); }
.claim { grid-column: 2; font-size: 1.25rem; line-height: 1.45; color: var(--ink-2); max-width: 32em; margin: 0; }
@media (max-width: 640px) { .act-head { grid-template-columns: 1fr; } .claim { grid-column: 1; } .act-no { padding-top: 0; } }

.objection { margin: 2.2em 0; padding: 22px 24px; background: var(--paper-2); border-radius: 10px; font-size: 1.0625rem; line-height: 1.6; }
.objection .label { color: var(--peri); display: block; margin-bottom: 8px; }
.objection p { margin: 0 0 0.8em; }
.objection p:last-child { margin: 0; }
.objection q { font-weight: 600; quotes: "\201C" "\201D"; }

/* ---------- Figures ---------- */
.fig { max-width: var(--wide); margin: clamp(40px, 7vw, 80px) auto; padding: 0 20px; }
.fig-head { max-width: var(--col); margin-bottom: 22px; }
.fig-head h4 { font: 700 clamp(1.375rem, 3vw, 1.875rem)/1.15 var(--display); letter-spacing: -0.025em; margin: 8px 0 8px; }
.fig-head p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.fig-body { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 3vw, 32px); }
.fig figcaption { font: 400 0.8125rem/1.55 var(--display); color: var(--muted); margin-top: 12px; max-width: 62em; }
.fig figcaption b { font-weight: 600; color: var(--ink-2); }
.ui { font-family: var(--display); font-size: 0.9375rem; line-height: 1.45; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  font: 500 0.875rem/1.2 var(--display); padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2); min-height: 40px;
}
.btn:hover { border-color: var(--ink-2); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn i { font: 500 0.6875rem/1 var(--mono); font-style: normal; opacity: 0.7; margin-right: 6px; }
html:not(.js) .needs-js { display: none; }
.js .panel[hidden] { display: none; }
html:not(.js) .panel { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.c-neural { color: var(--accent); } .c-implant { color: var(--ink); } .c-peri { color: var(--peri); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 0; }
.dot.sq { border-radius: 2px; } .dot.dm { border-radius: 1px; transform: rotate(45deg) scale(0.85); } .dot.ho { background: transparent; border: 2px solid currentColor; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 0.8125rem/1.4 var(--display); color: var(--ink-2); margin: 0 0 16px; padding: 0; list-style: none; }

/* Fig 1, routes */
.routes { display: grid; gap: 14px; }
.route { display: grid; grid-template-columns: 190px 1fr 210px; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.route:first-of-type { border-top: 0; }
.route h5 { font: 700 1.0625rem/1.2 var(--display); margin: 0 0 4px; }
.route .sub { font-size: 0.8125rem; color: var(--muted); }
.route .note { font-size: 0.8125rem; color: var(--ink-2); }
.route .note .tag { margin-bottom: 6px; }
.track { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; gap: 8px; }
.track::before { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; border-top: 2px solid var(--ink); }
.dashed .track::before { border-top-style: dashed; border-color: var(--accent); }
.dotted .track::before { border-top-style: dotted; border-color: var(--muted); }
.track::after { content: ""; position: absolute; top: 1px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: travel 5s cubic-bezier(.45,0,.55,1) infinite; }
.route:nth-of-type(2) .track::after { animation-delay: .6s; } .route:nth-of-type(3) .track::after { animation-delay: 1.2s; } .route:nth-of-type(4) .track::after { animation-delay: 1.8s; }
.peri .track::after { background: var(--peri); }
@keyframes travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.track li { position: relative; padding-top: 22px; font-size: 0.8125rem; line-height: 1.3; flex: 1; max-width: 9.5em; color: var(--ink-2); }
.track li::before { content: ""; position: absolute; top: 2px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.track li:last-child { text-align: right; } .track li:last-child::before { left: auto; right: 0; background: var(--ink); }
.intent-line { display: flex; justify-content: space-between; gap: 12px; font: 500 0.75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.intent-line q { text-transform: none; letter-spacing: 0; font: 600 1rem/1.3 var(--display); color: var(--ink); quotes: "\201C" "\201D"; }
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; gap: 10px; }
  .track { flex-direction: column; gap: 10px; padding-left: 2px; }
  .track::before { left: 6px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 2px solid var(--ink); }
  .dashed .track::before { border-left-style: dashed; } .dotted .track::before { border-left-style: dotted; }
  .track::after { display: none; }
  .track li { padding: 0 0 0 26px; max-width: none; }
  .track li:last-child { text-align: left; } .track li:last-child::before { left: 0; right: auto; }
  .track li::before { top: 3px; left: 1px; }
}

/* Fig 2, timeline */
.eras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.eras li { padding: 0 14px 0 0; border-top: 2px solid var(--ink); position: relative; padding-top: 16px; }
.eras li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.eras li.future { border-top-style: dashed; border-color: var(--accent); }
.eras li.future::before { background: var(--card); border: 2px solid var(--accent); }
.eras time { font: 500 0.75rem/1 var(--mono); color: var(--muted); }
.eras h5 { font: 700 1rem/1.2 var(--display); margin: 6px 0 8px; }
.eras p { margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.eras .must { font-weight: 600; color: var(--ink); }
.chip { display: inline-block; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; background: var(--paper-2); color: var(--ink-2); }
.chip.a { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 960px) {
  .eras { grid-template-columns: 1fr; }
  .eras li { border-top: 0; border-left: 2px solid var(--ink); padding: 0 0 22px 22px; }
  .eras li.future { border-left-style: dashed; }
  .eras li::before { top: 0; left: -7px; }
}

/* Fig 3, sensing map */
.map { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .map { grid-template-columns: 1fr; } }
.map svg { width: 100%; height: auto; }
.head-skin { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 2; }
.head-skull { fill: none; stroke: var(--line); stroke-width: 11; stroke-linecap: round; }
.head-brain { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.5; }
.sulci { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.s-neural { stroke: var(--accent); fill: var(--accent); } .s-implant { stroke: var(--ink); fill: var(--ink); } .s-peri { stroke: var(--peri); fill: var(--peri); }
.nofill { fill: none !important; }
.mk { cursor: pointer; }
.mk circle { stroke-width: 2; stroke: var(--card); }
.mk text { font: 700 13px var(--display); fill: var(--paper); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mk.is-on circle { stroke: var(--ink); stroke-width: 3; }
.mk:focus-visible { outline: none; } .mk:focus-visible circle { stroke: var(--ink); stroke-width: 4; }
.panel h5 { font: 700 1.25rem/1.2 var(--display); margin: 10px 0 12px; }
.facts { margin: 0; display: grid; gap: 10px; }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.facts dt { font: 500 0.6875rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

/* Fig 4, evidence wall */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.study { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--paper); display: flex; flex-direction: column; }
.study[hidden] { display: none; }
.study header { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font: 500 0.75rem/1.3 var(--mono); color: var(--muted); }
.study h5 { font: 700 1.0625rem/1.25 var(--display); margin: 10px 0 4px; }
.study .verb { font-size: 0.875rem; color: var(--ink-2); margin: 0 0 12px; }
.study .verb b { color: var(--accent); font-weight: 600; }
.study.peri-card .verb b { color: var(--peri); }
.study .num { font: 700 1.5rem/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 4px; }
.study .num small { display: block; font: 400 0.8125rem/1.4 var(--display); letter-spacing: 0; color: var(--ink-2); margin-top: 4px; }
.study details { margin-top: auto; padding-top: 12px; font-size: 0.875rem; }
.study summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.study .facts { margin-top: 8px; gap: 8px; } .study .facts div { grid-template-columns: 1fr; gap: 0; }
.study .not { margin: 12px 0 0; padding: 10px 12px; background: var(--peri-soft); border-radius: 6px; font-size: 0.8125rem; line-height: 1.45; }
.study .not b { color: var(--peri); }

/* Fig 5, signal journey */
.journey { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr; } }
.trace { margin-bottom: 10px; }
.trace span { font: 500 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.trace svg { width: 100%; height: 64px; background: var(--paper); border-radius: 6px; margin-top: 4px; }
.trace path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trace.t1 path { stroke: var(--accent); stroke-width: 2; }
.ctrl { display: grid; gap: 14px; margin-top: 16px; }
.ctrl label { display: grid; gap: 6px; font-weight: 600; }
.ctrl input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.ctrl .ends { display: flex; justify-content: space-between; font-weight: 400; font-size: 0.75rem; color: var(--muted); }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 500 !important; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.out { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--paper); }
.out .said { font: 600 1.1875rem/1.35 var(--display); margin: 8px 0; }
.out .said mark { background: var(--peri-soft); color: var(--peri); padding: 0 3px; border-radius: 3px; }
.out[data-state="abstain"] .said { color: var(--muted); font-weight: 500; }
.stack { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; font-size: 0.8125rem; display: grid; gap: 4px; }
.stack li { counter-increment: s; display: flex; gap: 10px; color: var(--ink-2); }
.stack li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); color: var(--muted); font-size: 0.6875rem; padding-top: 2px; }

/* Fig 6, capability map */
.scatter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .scatter { grid-template-columns: 1fr; } }
.scatter svg { width: 100%; height: auto; overflow: visible; }
.ax { fill: none; stroke: var(--ink-2); stroke-width: 1.5; } .grid { fill: none; stroke: var(--line); stroke-dasharray: 3 5; }
.axl { font: 500 12px var(--display); fill: var(--ink-2); } .axt { font: 500 10.5px var(--mono); fill: var(--muted); letter-spacing: 0.04em; }
.open-corner { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 4 5; opacity: 0.85; }
.pt text { font: 700 12px var(--display); fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.pt.ho text { fill: var(--peri); }
.caveats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: c; }
.caveats li { counter-increment: c; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 0.875rem; line-height: 1.4; }
.caveats li::before { content: counter(c); width: 22px; height: 22px; border-radius: 50%; background: currentColor; display: grid; place-items: center; font: 700 0.75rem/1 var(--display); -webkit-text-fill-color: var(--paper); }
.caveats li.sq::before { border-radius: 3px; } .caveats li span { color: var(--ink-2); } .caveats li b { color: var(--ink); font-weight: 600; }

/* Fig 7, utility */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cases { grid-template-columns: 1fr; } }
.case { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--paper); }
.case h5 { font: 700 1rem/1.2 var(--display); margin: 0 0 4px; }
.case .who { font-size: 0.8125rem; color: var(--muted); margin: 0 0 12px; min-height: 2.6em; }
.verdict { font: 700 0.9375rem/1.2 var(--display); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.verdict::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.v-yes::before { background: var(--accent); } .v-mid::before { background: transparent; border: 3px solid var(--accent); } .v-no::before { background: transparent; border: 2px dashed var(--muted); }
.case p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.panel > .label { display: block; margin: 0 0 12px; color: var(--muted); }

/* Fig 8, two clocks */
.clock { display: grid; gap: 8px; --a: 1fr; --c: 2.4fr; --d: 3fr; --f: 2fr; --t: 3fr; --t2: 1.6fr; }
.clock.fast { --f: 1.5fr; --t: 0.5fr; --t2: 0.3fr; }
.lane { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.lane > b { font: 600 0.875rem/1.2 var(--display); }
.segs { display: grid; grid-template-columns: var(--a) var(--c) var(--d) var(--f) var(--t) var(--a) var(--c) var(--d) var(--t2) var(--a); gap: 3px; transition: grid-template-columns 0.7s ease; height: 46px; }
.seg { border-radius: 4px; min-width: 0; overflow: hidden; display: grid; place-items: center; font: 500 0.625rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.seg.work { background: var(--accent); color: var(--paper); }
.seg.idle { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); }
.seg.h1 { background: var(--ink); color: var(--paper); } .seg.h2 { background: var(--ink-2); color: var(--paper); } .seg.h3 { background: var(--muted); color: var(--paper); } .seg.h4 { background: var(--peri); color: var(--paper); }
.seg-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 16px 0; font-size: 0.8125rem; color: var(--ink-2); }
.seg-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 640px) { .seg { font-size: 0; } .lane { grid-template-columns: 56px 1fr; } }

/* Fig 9, generalization grid */
.gen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .gen { grid-template-columns: 1fr; } }
.gridwrap { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; font: 500 0.6875rem/1 var(--mono); color: var(--muted); }
.cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.cell { aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--line); background: var(--paper); padding: 0; min-width: 0; position: relative; }
.cell[data-l="1"] { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); }
.cell[data-l="2"] { background: color-mix(in srgb, var(--accent) 55%, var(--paper)); }
.cell[data-l="3"] { background: var(--accent); border-color: var(--accent); }
.cell[data-l="0"] { background: repeating-linear-gradient(135deg, var(--paper) 0 4px, var(--line) 4px 5px); }
.cell.src { outline: 3px solid var(--ink); outline-offset: 1px; }
.cell.src::after { content: "T"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.8125rem var(--display); color: var(--paper); }
.days { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; text-align: center; }
.lv { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 0.8125rem; }
.lv i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); margin-right: 8px; vertical-align: -3px; }

/* Fig 10, loop */
.loop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 860px) { .loop { grid-template-columns: 1fr; } }
.loop svg { width: 100%; height: auto; }
.gov { fill: none; stroke: var(--peri); stroke-width: 1.5; stroke-dasharray: 6 6; }
.trk { fill: none; stroke: var(--accent); stroke-width: 3; }
.govt { font: 500 11px var(--mono); fill: var(--peri); letter-spacing: 0.06em; text-anchor: middle; }
.st circle { fill: var(--ink); } .st text { font: 700 15px var(--display); fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 0.875rem; line-height: 1.45; }
.steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 0.8125rem/1 var(--display); }
.steps b { display: block; font-weight: 700; font-size: 0.9375rem; }
.steps em { font-style: normal; color: var(--peri); }

/* Fig 11, lanes */
.lanes { display: grid; gap: 0; }
.lanes .row { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 0 18px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.45; }
.lanes .row.hd { border-top: 0; padding: 0 0 10px; font: 500 0.6875rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.lanes h5 { font: 700 1rem/1.2 var(--display); margin: 0 0 4px; }
.lanes h5 i { font: 500 0.6875rem var(--mono); font-style: normal; color: var(--accent); margin-right: 6px; }
.lanes .row > div:first-child span { font-size: 0.75rem; color: var(--muted); }
.lanes .cell-p { border-left: 2px dashed var(--accent); padding-left: 12px; }
.lanes .cell-s { border-left: 2px dotted var(--muted); padding-left: 12px; color: var(--ink-2); }
.lanes .cell-d { border-left: 2px solid var(--ink); padding-left: 12px; }
.lanes .mob { display: none; }
.xfer { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--muted); border-radius: 8px; font-size: 0.875rem; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
@media (max-width: 860px) {
  .lanes .row { grid-template-columns: 1fr; gap: 10px; } .lanes .row.hd { display: none; }
  .lanes .mob { display: block; font: 500 0.625rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .xfer { grid-template-columns: 1fr; }
}

/* Fig 12, storyboard */
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: b; }
@media (max-width: 860px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .board { grid-template-columns: 1fr; } }
.board li { counter-increment: b; }
.screen { border: 1.5px solid var(--ink); border-radius: 14px; padding: 14px; background: var(--paper); min-height: 150px; display: flex; flex-direction: column; gap: 8px; font-size: 0.8125rem; }
.screen .bar { display: flex; justify-content: space-between; font: 500 0.625rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.screen .bar b { color: var(--accent); font-weight: 500; } .screen .bar b.off { color: var(--muted); }
.screen .txt { font: 600 1rem/1.3 var(--display); margin: auto 0; }
.screen .txt u { text-decoration: underline wavy var(--peri); text-underline-offset: 4px; }
.screen .row2 { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { border: 1px solid var(--ink); border-radius: 999px; padding: 5px 10px; font: 600 0.75rem/1 var(--display); }
.pill.on { background: var(--ink); color: var(--paper); }
.sw { width: 34px; height: 18px; border-radius: 9px; background: var(--accent); position: relative; display: inline-block; }
.sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); }
.board h5 { font: 700 0.9375rem/1.25 var(--display); margin: 12px 0 4px; }
.board h5::before { content: counter(b) ". "; color: var(--accent); }
.board p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }

/* Tables */
.tablewrap { overflow-x: auto; }
table.reg { border-collapse: collapse; width: 100%; font-size: 0.875rem; line-height: 1.45; }
.reg th { text-align: left; font: 500 0.6875rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 14px 10px 0; }
.reg td { vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); }
.reg td:first-child { font-weight: 700; width: 24%; }
@media (max-width: 640px) {
  .reg thead { display: none; } .reg tr { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
  .reg td { display: block; width: auto !important; border: 0; padding: 2px 0; }
  .reg td[data-h]::before { content: attr(data-h) ": "; font: 500 0.6875rem var(--mono); text-transform: uppercase; color: var(--muted); }
}

/* Sources & footer */
.sources { max-width: var(--wide); margin: clamp(72px, 10vw, 128px) auto 0; padding: 28px 20px 0; border-top: 2px solid var(--ink); }
.sources h2 { font: 700 2.25rem/1 var(--display); letter-spacing: -0.03em; margin: 0 0 12px; }
.sources > p { max-width: var(--col); font-size: 1rem; color: var(--ink-2); }
.sources ol { columns: 2 380px; column-gap: 40px; padding-left: 1.6em; font: 400 0.875rem/1.5 var(--display); color: var(--ink-2); }
.sources li { break-inside: avoid; margin-bottom: 12px; padding-left: 4px; }
.sources li:target { background: var(--accent-soft); outline: 6px solid var(--accent-soft); border-radius: 2px; }
.sources li a { word-break: break-word; }
footer { max-width: var(--wide); margin: 64px auto 0; padding: 28px 20px 72px; border-top: 1px solid var(--line); font: 400 0.875rem/1.6 var(--display); color: var(--muted); display: grid; gap: 14px; }
footer p { margin: 0; max-width: 62em; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); font: 500 0.875rem var(--display); padding: 10px 16px; border-radius: 8px; opacity: 0; transition: 0.25s; pointer-events: none; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track::after { animation: none; display: none; }
  .segs, .toast { transition: none; }
}
@media print {
  .topbar, .needs-js, .toast { display: none; }
  body { font-size: 11pt; background: #fff; }
  .fig-body { break-inside: avoid; }
}

/* ---------- White edition: hairline figures, no tinted cards ---------- */
.fig-body { background: var(--paper); border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; padding: clamp(20px, 3vw, 32px) 0; }
.fig-head .label { letter-spacing: 0.12em; }
.study, .case, .out { background: var(--paper); border-radius: 4px; }
.study .not { border-radius: 2px; }
.trace svg { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.screen { background: var(--paper); border-width: 1px; border-radius: 10px; }
.cell { background: var(--paper); border-radius: 2px; }
.xfer { border-radius: 2px; }
.objection { background: var(--paper); border-radius: 0; border-left: 2px solid var(--peri); padding: 4px 0 4px 24px; }
.btn { border-radius: 4px; }
.tag, .chip { border-radius: 2px; }
.topbar { background: rgb(248 248 245 / 0.94); }
.head-skin { fill: var(--paper-2); }
.hero h1 { font-weight: 600; }
.act-head { border-top-width: 1px; }
.sources { border-top-width: 1px; }

/* ---------- Contents rail (wide screens) ---------- */
.rail { display: none; }
@media (min-width: 1280px) {
  body { padding-left: 272px; }
  html { scroll-padding-top: 28px; }
  .rail {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 55;
    padding: 28px 22px 24px 28px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto;
    font: 400 0.8125rem/1.35 var(--display);
  }
  .rail-brand { font: 700 1rem/1 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; margin-bottom: 26px; }
  .rail-part { display: block; font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin: 18px 0 8px; }
  .rail-part:first-child { margin-top: 0; }
  .rail-part[aria-current="true"] { color: var(--accent); }
  .rail ol { list-style: none; margin: 0; padding: 0; }
  .rail ol a { display: grid; grid-template-columns: 26px 1fr; padding: 5px 0; color: var(--muted); text-decoration: none; }
  .rail ol a span { font: 400 0.6875rem/1.6 var(--mono); color: #a9b0bd; }
  .rail ol a:hover { color: var(--ink); }
  .rail ol a[aria-current="true"] { color: var(--ink); font-weight: 600; }
  .rail ol a[aria-current="true"] span { color: var(--accent); }
  .rail-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
  .rail-foot a { font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
  .rail-foot a:hover { color: var(--ink); }
  .rail nav { margin-bottom: 24px; }
  .topbar { height: 0; padding: 0; border: 0; }
  .topbar > :not(.progress) { display: none; }
  .progress { bottom: auto; top: 0; height: 3px; }
}
@media print { .rail { display: none; } body { padding-left: 0; } }

/* ---------- Bars (data gap, calibration clock) ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 6px 20px; align-items: center; }
.bars .what { font-size: 0.875rem; line-height: 1.35; } .bars .what b { display: block; font-weight: 600; } .bars .what span { color: var(--muted); font-size: 0.8125rem; }
.bars .rail-bar { position: relative; height: 26px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--ticks, 6) - 1px), var(--line) calc(100% / var(--ticks, 6) - 1px) calc(100% / var(--ticks, 6))); }
.bars .bar { position: absolute; inset: 5px auto 5px 0; width: var(--w); min-width: 3px; background: currentColor; }
.bars .val { position: absolute; left: calc(var(--w) + 8px); top: 50%; transform: translateY(-50%); font: 600 0.8125rem/1 var(--display); color: var(--ink); white-space: nowrap; }
.bars .flip .val { left: auto; right: calc(100% - var(--w) + 8px); color: var(--paper); }
.bars .c-ai { color: var(--ink-2); }
.bars-scale { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 20px; margin-top: 10px; font: 400 0.6875rem/1 var(--mono); color: var(--muted); }
.bars-scale div { display: flex; justify-content: space-between; }
@media (max-width: 700px) { .bars li, .bars-scale { grid-template-columns: 1fr; } .bars-scale span:first-child { display: none; } }

/* ---------- Stack of ceilings ---------- */
.stackfig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .stackfig { grid-template-columns: 1fr; } }
.layers { display: grid; gap: 6px; }
.layer-row { display: flex; gap: 6px; align-items: stretch; }
.layer { text-align: left; border: 1px solid var(--ink); background: transparent; padding: 14px 16px; min-height: 64px; display: grid; gap: 2px; align-content: center; }
.layer b { font: 700 1rem/1.2 var(--display); } .layer span { font-size: 0.8125rem; color: var(--muted); }
.layer[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .layer[aria-pressed="true"] span { color: var(--line); }
.layer.l1 { width: 100%; } .layer.l2 { width: 80%; } .layer.l3 { width: 60%; } .layer.l4 { width: 44%; }
.prior { flex: 1; display: grid; align-content: center; padding: 8px 12px; font-size: 0.75rem; line-height: 1.3; color: var(--peri); border: 1px dashed var(--peri); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--peri-soft) 6px 7px); }
.up { font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
html:not(.js) .layer { pointer-events: none; }

/* ---------- Playbook and inventory tables ---------- */
.reg.wide td:first-child { width: 19%; }
.reg .tag { margin: 0 4px 4px 0; }
.reg td small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }

/* ---------- Six shadows ---------- */
.shadows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
@media (max-width: 860px) { .shadows { grid-template-columns: 1fr; } }
.shadows svg { width: 100%; height: auto; max-width: 440px; margin: 0 auto; }
.ray { stroke: var(--line); stroke-width: 1.5; } .ray.n { stroke: var(--accent); stroke-dasharray: 5 5; }
.core { fill: var(--ink); } .core-t { font: 600 12px var(--display); fill: var(--paper); text-anchor: middle; }
.sh rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; } .sh text { font: 600 13px var(--display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sh { cursor: pointer; } .sh.is-on rect { fill: var(--ink); } .sh.is-on text { fill: var(--paper); }
.sh.n rect { stroke: var(--accent); } .sh.n text { fill: var(--accent); } .sh.n.is-on rect { fill: var(--accent); } .sh.n.is-on text { fill: var(--paper); }
.sh:focus-visible { outline: none; } .sh:focus-visible rect { stroke-width: 3; }

/* ---------- Application maturity ---------- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; gap: 28px; } }
.apps h5 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.apps .col-p h5 { border-bottom: 2px dashed var(--accent); } .apps .col-s h5 { border-bottom: 2px dotted var(--muted); }
.apps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.apps li { font-size: 0.875rem; line-height: 1.4; } .apps li b { display: block; font-weight: 600; } .apps li span { color: var(--ink-2); font-size: 0.8125rem; }
.apps li i { font: 500 0.625rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px; vertical-align: 1px; }

/* ---------- Convergence timeline ---------- */
.now svg { width: 100%; height: auto; }
.now .yr { font: 500 11px var(--mono); fill: var(--muted); text-anchor: middle; }
.now .ln { font: 600 12px var(--display); fill: var(--ink); }
.now .gl { stroke: var(--line); } .now .lane-l { stroke: var(--line); stroke-width: 1; }
.now-key { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; margin-top: 18px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.now-key b { display: block; font: 600 0.875rem/1.3 var(--display); color: var(--ink); margin-bottom: 4px; }
@media (max-width: 860px) { .now-key { grid-template-columns: 1fr 1fr; } .now .ln { display: none; } }
@media (max-width: 480px) { .now-key { grid-template-columns: 1fr; } }
.sketches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 1.6em 0; }
@media (max-width: 760px) { .sketches { grid-template-columns: 1fr; } }
.sketches div { border-top: 2px dotted var(--muted); padding-top: 14px; font-size: 1rem; line-height: 1.55; }
.sketches h4 { font: 700 1.0625rem/1.25 var(--display); margin: 0 0 8px; }
.sketches p { margin: 0 0 0.7em; } .sketches .need { font: 400 0.8125rem/1.45 var(--display); color: var(--muted); }

/* ---------- Photographic plates ---------- */
.plate { max-width: var(--wide); margin: clamp(36px, 6vw, 72px) auto; padding: 0 20px; }
.plate .frames { display: grid; gap: 10px; }
.plate.trio .frames { grid-template-columns: repeat(3, 1fr); }
.plate.six .frames { grid-template-columns: repeat(3, 1fr); }
.plate .frames > div { position: relative; overflow: hidden; background: #e9e9e4; aspect-ratio: 4 / 3; }
.plate .frames.one { display: block; background: #fff; border: 1px solid var(--line); padding: clamp(10px, 2vw, 24px); }
.plate .frames.one.dark { background: #0b1524; border-color: #0b1524; }
.plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.03); }
.plate .frames.one img { height: auto; object-fit: contain; filter: none; }
.plate .frames span { position: absolute; left: 0; bottom: 0; right: 0; padding: 22px 12px 9px; font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgb(11 21 36 / 0.78)); }
.plate figcaption { font: 400 0.8125rem/1.55 var(--display); color: var(--muted); margin-top: 12px; max-width: 62em; }
.plate figcaption a { color: inherit; }
.plate.strip { padding: 0; margin: 8px 0 28px; max-width: none; }
.plate.strip .frames.one { padding: 14px 18px; mix-blend-mode: multiply; }
@media (max-width: 700px) { .plate.trio .frames { grid-template-columns: 1fr; } .plate.six .frames { grid-template-columns: 1fr 1fr; } .plate.trio .frames > div { aspect-ratio: 16 / 9; } }

/* ---------- Figure frame and reveal ---------- */
.fig-body { background: #fcfcfa; border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: clamp(18px, 3vw, 36px); box-shadow: 0 1px 0 rgb(11 21 36 / 0.03), 0 18px 40px -28px rgb(11 21 36 / 0.25); }
.fig-head .label { display: flex; gap: 10px; align-items: center; }
.fig-head .label i { font-style: normal; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.study, .case, .out, .screen, .cell, .trace svg { background: #fff; }
.js .fig .fig-body { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.js .fig.in .fig-body { opacity: 1; transform: none; }
.js .fig .bar { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) 0.25s; }
.js .fig.in .bar { transform: none; }
.js .fig .val { opacity: 0; transition: opacity 0.4s ease 1.1s; } .js .fig.in .val { opacity: 1; }
.bars li:nth-child(2) .bar { transition-delay: 0.33s; } .bars li:nth-child(3) .bar { transition-delay: 0.41s; } .bars li:nth-child(4) .bar { transition-delay: 0.49s; } .bars li:nth-child(5) .bar { transition-delay: 0.57s; } .bars li:nth-child(6) .bar { transition-delay: 0.65s; }
.js .fig .pop { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,1.4,.4,1); transition-delay: calc(var(--i, 0) * 45ms + 0.3s); }
.js .fig.in .pop { opacity: 1; transform: none; }
.js .fig .layer { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s; }
.js .fig.in .layer { opacity: 1; transform: none; }
.layer-row:nth-child(4) .layer { transition-delay: 0.2s; } .layer-row:nth-child(3) .layer { transition-delay: 0.4s; } .layer-row:nth-child(2) .layer { transition-delay: 0.6s; } .layer-row:nth-child(1) .layer { transition-delay: 0.8s; }
.bars .bar { border-radius: 0 2px 2px 0; }
.bars .rail-bar { height: 22px; } .bars .bar { inset: 3px auto 3px 0; }
/* timeline window band, sun rays, loop rings */
.now .band { fill: var(--accent-soft); } .now .band-t { font: 500 10.5px var(--mono); fill: var(--accent); letter-spacing: 0.08em; }
.sun line { stroke: var(--accent); stroke-width: 1; opacity: 0.35; } .sun circle { fill: none; stroke: var(--accent); opacity: 0.25; }
.trk2 { fill: none; stroke: var(--peri); stroke-width: 3; }
.st.o circle { fill: var(--peri); }
.steps.two { grid-template-columns: 1fr 1fr; gap: 12px 28px; } @media (max-width: 560px) { .steps.two { grid-template-columns: 1fr; } }
.steps.alpha { counter-reset: st; } .steps.alpha li::before { content: counter(st, upper-alpha); background: var(--peri); }
.steps h6 { font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { .js .fig .fig-body, .js .fig .bar, .js .fig .val, .js .fig .pop, .js .fig .layer { opacity: 1; transform: none; transition: none; } }
@media print { .js .fig .fig-body, .js .fig .bar, .js .fig .val, .js .fig .pop, .js .fig .layer { opacity: 1 !important; transform: none !important; } }

/* ---------- Objection list ---------- */
.objlist { margin: 1.4em 0; display: grid; gap: 0; }
.objlist > div { padding: 18px 0; border-top: 1px solid var(--line); }
.objlist dt { font: 600 1.0625rem/1.4 var(--display); margin-bottom: 6px; }
.objlist dt::before { content: "Objection  "; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--peri); display: block; margin-bottom: 6px; }
.objlist dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.acts a { padding: 8px 7px; }

/* ================= Monochrome edition: white page, black text, same type as the home page ================= */
:root {
  --paper: #fff; --paper-2: #f3f3f3; --card: #fff;
  --ink: #000; --ink-2: #000; --muted: #555; --line: #dcdcdc;
  --accent: #000; --accent-soft: #ededed; --peri: #000; --peri-soft: #f1f1f1;
  --display: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}
body { font: 400 1.0625rem/1.7 var(--body); -webkit-font-smoothing: antialiased; }
a { color: #000; }
.topbar, .rail { background: #fff; }
.topbar { background: rgb(255 255 255 / 0.95); }
.fig-body, .plate .frames.one { background: #fff; }
.fig-body { box-shadow: none; border-top: 1px solid #000; }
/* type: thin sans, as on the home page */
.hero h1 { font-weight: 300; letter-spacing: -0.055em; } .hero h1 em { color: #000; }
.kicker, .label, .fig-head .label, .fig-head .label i { color: #000; }
.dek { font-weight: 300; }
.act-head h2 { font-weight: 200; letter-spacing: -0.045em; }
.claim { font-weight: 300; }
.prose h3 { font-weight: 500; letter-spacing: -0.025em; }
.fig-head h4 { font-weight: 500; }
.pull { font-weight: 400; letter-spacing: -0.02em; border-left-color: #000; }
.lede p:first-child::first-letter { color: #000; font-weight: 300; }
.sources h2 { font-weight: 200; } .brand, .rail-brand { font-weight: 500; }
.prose strong { font-weight: 600; }
/* everything that used colour for text is black */
.c-neural, .c-implant, .c-peri, .study .verb b, .study.peri-card .verb b, .study .not b, .objection .label, .objlist dt::before,
.steps em, .govt, .now .band-t, .sh.n text, .pt.ho text, .acts a[aria-current="true"] span, .rail-part[aria-current="true"],
.rail ol a[aria-current="true"] span, .eras li.future, .chip.a, .tag.p, .tag.s, .tag.peer, .tag.pre, .out .said mark, .prior { color: #000; fill: #000; }
.tag.s { border-color: #000; } .tag.peer, .tag.pre, .chip.a { background: #ededed; }
.sh.n.is-on text { fill: #fff; } .rail ol a span { color: #777; }
/* graphics: black = brain signal without surgery, grey = implanted, hollow = peripheral */
.s-implant { fill: #777; stroke: #777; }
.s-peri { fill: #fff; stroke: #000; } .mk.s-peri circle { stroke: #000; } .mk.s-peri text { fill: #000; }
.c-implant .dot { color: #777; } .c-peri .dot { background: transparent; border: 2px solid #000; }
.caveats li.c-implant::before { background: #777; }
.caveats li.c-peri::before { background: #fff; border: 2px solid #000; -webkit-text-fill-color: #000; }
.bars li { color: #000; } .bars .c-implant .bar { background: #777; } .bars .c-ai .bar { background: #b5b5b5; }
.bars .c-peri .bar { background: #fff; border: 2px solid #000; }
.bars .flip .val { color: #fff; } .bars .c-ai.flip .val, .bars .c-ai .flip .val { color: #000; }
.seg.work { background: #000; } .seg.h1 { background: #333; } .seg.h2 { background: #666; } .seg.h3 { background: #999; }
.seg.h4 { background: #fff; color: #000; border: 1px solid #000; }
.trk2 { stroke: #888; } .st.o circle { fill: #888; } .steps.alpha li::before { background: #888; }
.gov { stroke: #000; } .prior { border-color: #000; background: repeating-linear-gradient(135deg, transparent 0 6px, #e4e4e4 6px 7px); }
.peri .track::after { background: #000; }
.sun line, .sun circle { stroke: #000; }
.study .not { background: #f1f1f1; }

/* ---------- TL;DR, then the full manifesto ---------- */
.tldr { max-width: var(--wide); margin: clamp(56px, 9vw, 120px) auto 0; padding: 0 20px; }
.tldr-head { border-top: 1px solid #000; padding-top: 28px; display: grid; grid-template-columns: minmax(90px, 180px) 1fr; gap: 12px 32px; align-items: start; }
.tldr-head .label { padding-top: 10px; margin: 0; }
.tldr-head h2 { font: 200 clamp(2.25rem, 6vw, 4.25rem)/1 var(--display); letter-spacing: -0.045em; margin: 0; }
.tldr-list { list-style: none; margin: clamp(28px, 5vw, 56px) 0 0; padding: 0; }
.tldr-list li { display: grid; grid-template-columns: minmax(90px, 180px) 1fr auto; gap: 8px 32px; align-items: baseline; padding: clamp(20px, 3vw, 30px) 0; border-top: 1px solid var(--line); }
.tldr-list li:last-child { border-bottom: 1px solid var(--line); }
.tldr-list .no { font: 500 0.8125rem/1.3 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.tldr-list h3 { font: 500 1.0625rem/1.3 var(--display); letter-spacing: -0.01em; margin: 0 0 6px; }
.tldr-list p { font: 300 clamp(1.1875rem, 2.2vw, 1.5rem)/1.4 var(--display); letter-spacing: -0.015em; margin: 0; max-width: 30em; }
.tldr-list a { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 8px 0; border-bottom: 1px solid transparent; }
.tldr-list a:hover, .tldr-list a:focus-visible { border-bottom-color: #000; }
.full-intro { max-width: var(--wide); margin: clamp(72px, 12vw, 160px) auto 0; padding: 0 20px; text-align: center; }
.full-intro .label { margin: 0 0 14px; }
.full-intro h2 { font: 200 clamp(2.5rem, 8vw, 6rem)/1 var(--display); letter-spacing: -0.05em; margin: 0; }
.full-intro p { font: 300 1.1875rem/1.5 var(--display); max-width: 32em; margin: 20px auto 0; }
.full-intro .down { display: inline-block; margin-top: 26px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border: 1px solid #000; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.full-intro .down:hover, .full-intro .down:focus-visible { background: #000; color: #fff; }
@media (max-width: 640px) {
  .tldr-head, .tldr-list li { grid-template-columns: 1fr; }
  .tldr-head .label { padding-top: 0; }
  .tldr-list a { justify-self: start; }
}

/* ---------- Shared site chrome: identical to the other pages ---------- */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px clamp(20px, 5vw, 56px); }
.mark { font: 300 1.5rem/1 var(--display); letter-spacing: -0.02em; text-decoration: none; color: #000; }
.links { display: flex; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.links a { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #000; padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.links a:hover, .links a[aria-current="page"] { border-bottom-color: #000; }
.topbar { border-top: 1px solid var(--line); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 22px clamp(20px, 5vw, 56px); color: #666; border-top: 1px solid #e6e6e6; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
footer { padding-bottom: 40px; }
/* one type scale and one control style across the site */
.hero h1 { font-weight: 200; }
.hero { padding-top: clamp(32px, 6vw, 72px); }
.btn { border-radius: 999px; padding-left: 16px; padding-right: 16px; }
.act-head h2 a { display: none; }
@media (min-width: 1280px) { .top { padding-left: 40px; } }
@media print { .top, .foot { display: none; } }
.flinks { display: flex; gap: 18px; flex-wrap: wrap; }
.flinks a { color: #666; text-decoration: none; }
.flinks a:hover { color: #000; }

/* ---------- One page per part ---------- */
.acts a.here { color: var(--ink); background: var(--paper-2); }
.acts a.here span { color: var(--ink); }
.rail-part.here { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.chapters nav a.here { font-weight: 600; }
.partlist { list-style: none; padding: 0; margin: 34px auto 0; max-width: 640px; text-align: left; border-top: 1px solid #000; }
.partlist a { display: grid; grid-template-columns: 3rem 1fr auto; gap: 12px; align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: #000; transition: background 0.2s; }
.partlist a:hover, .partlist a:focus-visible { background: var(--paper-2); }
.partlist .no, .partlist .m { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.partlist .t { font: 300 1.1875rem/1.3 var(--display); letter-spacing: -0.01em; }
.pager { max-width: var(--wide); margin: clamp(56px, 9vw, 96px) auto 0; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { display: grid; gap: 10px; padding: 22px 24px; border: 1px solid #000; text-decoration: none; color: #000; font: 300 1.25rem/1.25 var(--display); letter-spacing: -0.015em; transition: background 0.2s, color 0.2s; }
.pager a span { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pager .next { text-align: right; }
.pager a:hover, .pager a:focus-visible { background: #000; color: #fff; }
.pager a:hover span, .pager a:focus-visible span { color: #bbb; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager .next { order: -1; } }

/* ---------- Waitlist ---------- */
.wl { max-width: var(--wide); margin: clamp(56px, 9vw, 110px) auto clamp(40px, 6vw, 72px); padding: clamp(36px, 6vw, 64px) 20px 0; border-top: 1px solid #000; text-align: center; }
.wl .label { margin: 0 0 14px; }
.wl h2 { font: 200 clamp(2rem, 5.5vw, 3.75rem)/1.04 var(--display); letter-spacing: -0.045em; margin: 0; }
.wl .reserve { max-width: 620px; margin: 30px auto 0; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: end; text-align: left; }
.wl label { display: grid; gap: 8px; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.wl input, .wl select { font: 400 1rem/1.2 var(--display); padding: 12px 14px; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; min-height: 48px; width: 100%; }
.wl .btn { min-height: 48px; background: #000; color: #fff; border-color: #000; }
.wl .msg { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; }
.wl .msg a { color: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) { .wl .reserve { grid-template-columns: 1fr; } }
.full-intro.begin { margin-top: clamp(40px, 6vw, 72px); }
/* plain status text where a claim tag used to be */
.stx { font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.links .talk { border: 1px solid #000; border-radius: 999px; padding: 8px 14px; margin: -1px 0; }
.links .talk:hover { background: #000; color: #fff; }
.mark { font: 400 clamp(1.75rem, 2.4vw, 2.125rem)/1 var(--display); letter-spacing: -0.04em; }
.top { align-items: center; }

/* header: logo left, menu centred, "Let's talk" right */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 24px; }
.top .mark { grid-column: 1; justify-self: start; }
.top .links { grid-column: 2; justify-content: center; }
.top > .talk { grid-column: 3; justify-self: end; font: 500 0.75rem/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #000; border: 1px solid #000; border-radius: 999px; padding: 10px 16px; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.top > .talk:hover, .top > .talk:focus-visible { background: #000; color: #fff; }
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; }
  .top .mark { grid-row: 1; } .top > .talk { grid-column: 2; grid-row: 1; }
  .top .links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 10px 20px; }
}

/* header always visible */
.top { position: sticky; top: 0; z-index: 60; background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
html.scrolled .top { border-bottom-color: #ececec; }
@media (max-width: 760px) { .top { padding-top: 14px; padding-bottom: 12px; gap: 12px 20px; } }
.topbar { top: var(--hdr, 0px); }
html { scroll-padding-top: calc(var(--hdr, 0px) + var(--bar) + 20px); }
@media (min-width: 1280px) { html { scroll-padding-top: calc(var(--hdr, 0px) + 28px); } }

/* ---------- Four ceilings, drawn as a true pyramid (one SVG) ---------- */
.stackfig .pyr { display: block; width: 100%; height: auto; overflow: visible; }
.stackfig .up { text-align: center; margin-bottom: 12px; }
.pyr .lyr { cursor: pointer; outline: none; }
.pyr .lyr polygon { transition: opacity 0.25s, filter 0.25s; }
.pyr .lyr text { text-anchor: middle; pointer-events: none; transition: opacity 0.25s; }
.pyr .nm { font: 600 17px var(--display); }
.pyr .sb { font: 400 12.5px var(--display); opacity: 0.75; }
.pyr .lyr polygon { stroke: #fff; stroke-width: 0; stroke-linejoin: round; }
.pyr .lyr:hover polygon { filter: brightness(0.93); }
.pyr .lyr.is-on polygon { stroke: #000; stroke-width: 2.5; paint-order: stroke; }
.pyr .lyr.is-on .nm { text-decoration: underline; text-underline-offset: 4px; }
.pyr .ptr { opacity: 0; transition: opacity 0.2s; } .pyr .lyr.is-on .ptr { opacity: 1; }
.pyr .ptr line { stroke: #000; stroke-width: 1.5; } .pyr .ptr circle { fill: #000; }
.pyr .lyr:focus-visible polygon { stroke: #000; stroke-width: 2; stroke-dasharray: 4 3; }
.pyr .callout line { stroke: #000; stroke-width: 1; stroke-dasharray: 3 3; }
.pyr .callout rect { fill: #fff; stroke: #000; stroke-dasharray: 3 3; }
.pyr .callout text { font: 400 13px var(--display); fill: #222; }
.stackfig .prior { display: none; }
.js .fig .pyr .lyr { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .fig.in .pyr .lyr { opacity: 1; transform: none; }
.js .fig .pyr .lyr:nth-child(4) { transition-delay: 0.1s; } .js .fig .pyr .lyr:nth-child(3) { transition-delay: 0.25s; }
.js .fig .pyr .lyr:nth-child(2) { transition-delay: 0.4s; } .js .fig .pyr .lyr:nth-child(1) { transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) { .js .fig .pyr .lyr { opacity: 1; transform: none; transition: none; } }
@media (max-width: 560px) {
  .pyr .sb, .pyr .callout { display: none; }
  .pyr .nm { font-size: 22px; }
  .stackfig .prior { display: block; position: static; width: auto; margin: 10px 0 0; }
}

/* ---------- TL;DR: small pyramid under Part IV ---------- */
.tl-pyr { display: block; width: 100%; max-width: 460px; height: auto; margin: 16px 0 4px; }
.tl-pyr text { font-family: var(--display); }
.tl-pyr .note { font: 500 10px var(--mono); letter-spacing: 0.06em; fill: #666; text-transform: uppercase; }
.tl-pyr .note.strong { fill: #000; }

/* keyboard focus is always visible */
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.btn:focus-visible, .pill:focus-visible, .top > .talk:focus-visible { outline-offset: 4px; }

/* ---------- PDF link and the print edition ---------- */
.pdf-link { max-width: var(--wide); margin: 18px auto 0; padding: 0 20px; text-align: center; }
.pdf-link a, .meta a { color: inherit; text-underline-offset: 3px; }
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  .top, .foot, .topbar, .rail, .skip, .wl, .pager, .pdf-link, .full-intro, .tldr-list li > a, .toast, .meta li:has(a[download]), .meta li:has(.askai) { display: none !important; }
  html, body { padding: 0 !important; }
  :root { --col: 100%; --wide: 100%; }
  body { font-size: 12pt; }
  .prose, .act-head, .hero, .tldr, .fig, .sources { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  section.act { break-before: page; }
  .tldr { break-before: page; }
  .sources { break-before: page; }
  h2, h3, h4 { break-after: avoid; }
  .plate, .fig-body img, .pyr, .tl-pyr { break-inside: avoid; }
  .fig-body { break-inside: auto !important; }
  .fig-head { break-after: avoid; break-inside: avoid; }
  .fig .study, .fig li, .fig tr, .layer-row, .panel { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .js .fig .pyr .lyr { opacity: 1 !important; transform: none !important; }
}
.meta .askai, .pdf-link .askai { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media print { .askai { display: none !important; } }

/* "Ask AI about this": a quiet chip at the top right of manifesto and research pages */
.askai.chip { border: 1px solid #d6d6d6 !important; border-radius: 999px !important; padding: 8px 13px !important; color: #555 !important; font: 500 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: 0.12em !important; text-transform: uppercase; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.askai.chip:hover, .askai.chip[aria-expanded="true"] { border-color: #000 !important; color: #000 !important; }
@media print { .pagetools, .askai.chip { display: none !important; } }
.pagetools { display: flex; justify-content: flex-end; max-width: var(--wide); margin: 0 auto; padding: 18px 20px 0; }
.hero .pagetools { padding: 0; margin: 0 0 6px; max-width: none; }
.sources .pagetools { padding: 0; margin: 0 0 8px; }
.pagetools { gap: 8px; flex-wrap: wrap; }
.chip.pdf { border: 1px solid #000; border-radius: 999px; padding: 8px 13px; color: #fff; background: #000; font: 500 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.chip.pdf:hover, .chip.pdf:focus-visible { background: #333; }
@media print { .chip.pdf { display: none !important; } }
.act-no .mins { display: block; margin-top: 6px; color: #8a8a8a; white-space: nowrap; }
@media (max-width: 640px) { .act-no .mins { display: inline; margin: 0 0 0 10px; } }
/* small figure tags: tighter tracking so they fit; if one must wrap, its lines stay readable */
.chip:not(.pdf):not(.askai) { line-height: 1.35; letter-spacing: 0.03em; max-width: 100%; }

/* one shape language: form fields are rounded like the buttons next to them */
.reserve input[type=email], .reserve select, .wl input[type=email], .wl select { border-radius: 999px !important; padding-left: 18px !important; padding-right: 18px !important; }
.reserve textarea { border-radius: 16px; padding: 14px 18px; }
.reserve select, .wl select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px !important; }

/* keep fields white when the browser autofills them */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset !important; -webkit-text-fill-color: #000 !important; caret-color: #000; transition: background-color 9999s ease-out 0s; }