/* ---------- tokens ---------- */
/* Two grounds, alternating down the page: a near-black lab and a paper band
   for reading. One acid accent, used for the thing the reader should act on
   and for nothing else. Lexical and semantic keep their own hues because
   they label data throughout. */
:root {
  --ink-ground:   #0B0C0A;
  --ink-lift:     #131511;
  --ink-rule:     #23261F;
  --ink-text:     #E8EAE3;
  --ink-dim:      #8F958A;

  --paper:        #ECEEE8;
  --paper-lift:   #FFFFFF;
  --paper-rule:   #D2D6CC;
  --paper-text:   #14160F;
  --paper-dim:    #5A6053;

  --acid:         #C6F24E;
  --lexical:      #F0A202;
  --semantic:     #57A9C9;
  --flag:         #E2664B;

  /* Set per band. Every component reads these, never the palette above. */
  --ground:       var(--ink-ground);
  --ground-lift:  var(--ink-lift);
  --rule:         var(--ink-rule);
  --ink:          var(--ink-text);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --accent-face: "Instrument Serif", Georgia, serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 84px);
  /* The page column. It was pinned at 1180px, which left a dead band down both
     sides of a wide monitor. It now stretches to the gutters and only stops at
     1680, past which even a card grid starts to look stranded. Prose keeps its
     own 62ch measure inside this, so lines stay readable however wide it gets. */
  --page: min(1680px, 100%);
}

/* A paper band flips the four role tokens and nothing else. */
.band--paper {
  --ground:      var(--paper);
  --ground-lift: var(--paper-lift);
  --rule:        var(--paper-rule);
  --ink:         var(--paper-text);
  --ink-dim:     var(--paper-dim);
  background: var(--ground);
  color: var(--ink);
}

:root[data-theme="light"] {
  --ink-ground: #ECEEE8;
  --ink-lift:   #FFFFFF;
  --ink-rule:   #D2D6CC;
  --ink-text:   #14160F;
  --ink-dim:    #5A6053;
  --acid:       #6C9412;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- masthead ---------- */
.masthead {
  max-width: var(--page);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wordmark-dim { color: var(--ink-dim); }

.masthead-nav {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.masthead-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.masthead-nav a:hover,
.masthead-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--lexical); }

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(56px, 11vh, 112px) clamp(48px, 9vh, 88px);
  display: grid;
  gap: 28px;
  max-width: 1180px;
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lexical);
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 23ch;
}

.hero-title em {
  display: block;
  font-style: normal;
}

.hero-lede {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  color: var(--ink-dim);
}

/* ---------- readout ---------- */
.readout {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.readout-cell {
  background: var(--ground-lift);
  padding: 18px 20px 20px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.readout-cell dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.readout-cell dd { margin: 0; }

.figure {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--acid);
}

.readout-cell--flag .figure { color: var(--flag); }

.gloss {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* ---------- reveal ---------- */
/* Visible by default, and visible again the moment JS marks an element
   revealed. Motion strips its own inline styles when an animation finishes,
   so the end state cannot be left to the library - without .is-revealed here,
   scrolling away and back returns an element to opacity 0 and the section
   goes blank. */
[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(14px); }
}

/* ---------- bands ---------- */
/* No max-width here. A band paints a full-bleed background; the column inside
   it is what gets capped and centred. Capping the band instead left its inner
   track at 1036px and pinned every section to the left of a wide screen. */
.band {
  padding-block: clamp(52px, 9vh, 96px);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 26px;
}

.band-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 24ch;
}

.prose { margin: 0; max-width: var(--measure); color: var(--ink-dim); }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong, .failure strong { color: var(--ink); font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  padding: 1px 5px;
}

/* ---------- two notes ---------- */
.grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.note {
  padding: 20px 22px;
  background: var(--ground-lift);
  border-left: 2px solid var(--rule);
}

.note--lexical  { border-left-color: var(--lexical); }
.note--semantic { border-left-color: var(--semantic); }

.note h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.note p { margin: 0; color: var(--ink-dim); font-size: 0.97rem; }

/* ---------- chunking strategies ---------- */
.strategy {
  display: grid;
  gap: 14px;
  padding-block: 8px;
}

.strategy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.strategy-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.strategy-note {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-dim);
  font-size: 0.97rem;
}

.cutviz { width: 100%; height: auto; overflow: visible; }

.chunk { fill: var(--rule); }
.chunk--fixed     { fill: #2E3742; }
.chunk--recursive { fill: #34404C; }
.chunk--semantic  { fill: #3A4A58; }

.overlap { fill: var(--lexical); opacity: 0.32; }

.cut { stroke: var(--lexical); stroke-width: 2; }
.cut--semantic { stroke: var(--semantic); }

.simline { stroke: var(--semantic); stroke-width: 1.5; opacity: 0.85; }

.legend {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.swatch { width: 14px; height: 10px; display: inline-block; }
.swatch--overlap { background: var(--lexical); opacity: 0.32; }
.swatch--sim { background: var(--semantic); height: 2px; }

/* ---------- search modes ---------- */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.mode {
  background: var(--ground-lift);
  padding: 20px 22px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.mode h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
}

.mode--semantic h3 { color: var(--semantic); }
.mode--lexical  h3 { color: var(--lexical); }

.mode-input {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.mode p:last-child { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }

/* ---------- worked failure ---------- */
.failure {
  padding: 26px clamp(22px, 3vw, 34px) 30px;
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  display: grid;
  gap: 14px;
}

.failure h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.failure p { margin: 0; color: var(--ink-dim); }

.terms-wrap { overflow-x: auto; }

.terms {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.terms th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.terms td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.terms-row--wrong .tally { color: var(--lexical); font-weight: 600; }
.terms-row--right .tally { color: var(--ink-dim); }

.failure-punch {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--ink) !important;
}

.failure-punch--flag { color: var(--flag) !important; font-size: 0.99rem; }

/* ---------- measuring ---------- */
.eyebrow--flag { color: var(--flag); }

.refusals {
  padding: 26px clamp(22px, 3vw, 34px) 30px;
  background: var(--ground-lift);
  border: 1px solid var(--rule);
}

/* two columns once there is room: three short rules read as a set rather than
   as a list running down one side of an empty band. */
.refusals ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px 34px; }

.refusals h3 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.refusals ol {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 12px;
  color: var(--ink-dim);
}

.refusals li::marker { color: var(--lexical); font-family: var(--mono); font-size: 0.85em; }

/* ---------- slopegraph ---------- */
.slopefig { margin: 6px 0 0; display: grid; gap: 14px; }

.slopegraph { width: 100%; height: auto; overflow: visible; }

.saxis {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-dim);
}

.sarule { stroke: var(--rule); stroke-width: 1; }

.slope { stroke-width: 1.8; fill: none; opacity: 0.9; }
.slope--bm25   { stroke: var(--lexical); }
.slope--vector { stroke: var(--semantic); }
.slope--hybrid { stroke: var(--ink-dim); }

.dot--bm25   { fill: var(--lexical); }
.dot--vector { fill: var(--semantic); }
.dot--hybrid { fill: var(--ink-dim); }

.slabel {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-dim);
}

.slabel--bm25 { fill: var(--lexical); }
.snum { fill: var(--ink); font-variant-numeric: tabular-nums; }

.slopefig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.key { display: inline-flex; align-items: center; gap: 6px; }
.key::before { content: ""; width: 14px; height: 2px; background: currentColor; }
.key--lexical  { color: var(--lexical); }
.key--semantic { color: var(--semantic); }
.key--hybrid   { color: var(--ink-dim); }

/* ---------- verdict ---------- */
/* The verdict is the page's conclusion, so it is set as a spread rather than a
   narrow column: the statement and the quotation sit side by side. */
.verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 18px 40px;
  align-items: start;
  color: var(--ink-dim);
}

.verdict blockquote { align-self: center; }

.verdict p { margin: 0; }

.verdict-line {
  font-family: var(--display);
  font-size: 1.12rem;
  color: var(--flag);
}

.verdict-line--calm { color: var(--ink-dim); font-size: 0.97rem; font-family: var(--body); }

.verdict blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--semantic);
  color: var(--ink);
  font-size: 1.04rem;
}

.note--flag { border-left-color: var(--flag); }

/* ---------- roadmap ---------- */
/* Two columns, so ten cards fill five rows exactly. An auto-fit track sized
   for four columns left two dead cells at the end of the grid, which reads as
   an unfinished layout rather than a finished list. */
.roadmap {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.rm {
  position: relative;
  overflow: hidden;
  background: var(--ground-lift);
  padding: 24px 26px 26px;
  display: grid;
  gap: 11px;
  align-content: start;
}

.rm-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  justify-self: start;
}

/* The finished explainer reads as finished; everything queued reads as queued.
   Two states, two colours, and the numbering carries the order. */
.rm-status { color: var(--lexical); border-color: var(--lexical); }

.rm--live { background: color-mix(in srgb, var(--acid) 10%, var(--ground-lift)); }
.rm--live .rm-status { color: #10130B; background: var(--acid); border-color: var(--acid); }
.rm--live .rm-num { color: var(--acid); }
.rm--live::after { transform: scaleX(1); }

.rm--next { background: var(--ground-lift); }

/* The numeral is set as a ghost figure behind the name: it orders the list
   without competing with it for attention. */
.rm h3 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.rm-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.rm-name { flex: 1 1 auto; }

/* A hairline that fills on hover, so a card that is only a promise still
   answers the pointer. */
.rm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rm:hover::after { transform: scaleX(1); }

.rm p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }

.rm-why {
  font-family: var(--mono);
  font-size: 0.72rem !important;
  line-height: 1.5;
  color: var(--ink-dim);
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.prose--quiet { font-size: 0.93rem; }


/* ---------- accent face ---------- */
.serif {
  font-family: var(--accent-face);
  font-style: italic;
  font-weight: 400;
  color: var(--acid);
  letter-spacing: -0.005em;
}

/* ---------- full-bleed bands ---------- */
/* body carries the gutter, so a band that changes colour has to reach past it. */
.band {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--rule);
  /* One centred track, capped at the page column. An implicit auto track sizes
     to max-content - a nested auto-fit grid made it 1045px inside a 390px band -
     and capping each child instead overrode every measure in the stylesheet:
     prose set to 62ch was being rendered at 135 characters a line. The track
     carries the cap; the children keep their own widths. */
  grid-template-columns: var(--page);
  justify-content: center;
}

.band > * { min-width: 0; }

/* ---------- pipeline strip ---------- */
.pipeline {
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  margin-top: 8px;
}

.pipeline-head,
.pipeline-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pipeline-head { border-bottom: 1px solid var(--rule); }
.pipeline-foot { border-top: 1px solid var(--rule); }

.pipeline-ready { color: var(--acid); }

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 3vw, 30px);
  padding: 22px 16px;
  align-items: stretch;
}

.stage {
  border: 1px solid var(--rule);
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
  align-content: start;
  position: relative;
}

.stage--active { border-color: var(--acid); }

.stage-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.stage-body {
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}

.stage-note { font-family: var(--mono); font-size: 0.7rem; color: var(--acid); }

/* The dot sits on the right edge of each stage but the last, reading as the
   handoff to the next one. */
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .stage:not(:last-child)::after { display: none; }
}

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.button {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 12px 20px;
  border: 1px solid var(--acid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.button--solid { background: var(--acid); color: #10130B; }
.button--ghost { color: var(--ink); }
.button:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* ---------- hero, restyled ---------- */
.hero { max-width: var(--page); margin-inline: auto; width: 100%; }

.hero .eyebrow { display: flex; align-items: center; gap: 9px; color: var(--ink-dim); }

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  flex: none;
}

.hero-title {
  max-width: 17ch;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1.02;
}

.hero-title em.serif {
  display: block;
  font-size: 1.04em;
  line-height: 1.0;
}

.hero-lede { max-width: 58ch; }

.readout { margin-top: 16px; }

/* ---------- the lab ---------- */
.serif--dark { color: inherit; }
.band--paper .serif { color: #3E5A11; }

.lab {
  background: var(--ink-ground);
  color: var(--ink-text);
  --ink-dim: #8F958A;
  --rule: var(--ink-rule);
  border: 1px solid var(--ink-rule);
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.lab-query { padding: 18px clamp(16px, 2.4vw, 24px) 14px; display: grid; gap: 8px; }

.lab-label,
.lab-resultshead,
.lab-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.lab-select {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink-text);
  background: var(--ink-lift);
  border: 1px solid var(--ink-rule);
  padding: 12px 14px;
  appearance: none;
}

.lab-select:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.lab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  padding: 0 clamp(16px, 2.4vw, 24px) 18px;
}

.toggle { display: flex; border: 1px solid var(--ink-rule); }

.toggle-button {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink-rule);
  padding: 9px 14px;
  cursor: pointer;
}

.toggle-button:last-child { border-right: 0; }
.toggle-button:hover { color: var(--ink-text); }
.toggle-button.is-on { background: var(--acid); color: #10130B; }
.toggle-button:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }

.lab-meta { flex: 1 1 260px; text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }

.lab-resultshead {
  display: flex;
  justify-content: space-between;
  padding: 12px clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}

.evidence { list-style: none; margin: 0; padding: 0; }

.evidence-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 16px clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid var(--ink-rule);
}

.evidence-item:last-child { border-bottom: 0; }

.evidence-rank {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.evidence-item--correct .evidence-rank { color: var(--acid); }

.evidence-body { min-width: 0; display: grid; gap: 5px; }

.evidence-section {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-text);
}

.evidence-text {
  margin: 0;
  font-family: var(--body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
  /* Chunks run to 1000 characters. Four lines is enough to judge the hit. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evidence-mark {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
  text-align: right;
  white-space: nowrap;
}

.evidence-empty,
.lab-down {
  margin: 0;
  padding: 20px clamp(16px, 2.4vw, 24px);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--flag);
}

.lab-changed {
  margin: 0;
  padding: 14px clamp(16px, 2.4vw, 24px) 16px;
  border-top: 1px solid var(--acid);
  background: color-mix(in srgb, var(--acid) 8%, var(--ink-ground));
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-text);
}

.lab-changed strong { color: var(--acid); font-weight: 600; }

@media (max-width: 560px) {
  .evidence-item { grid-template-columns: auto 1fr; }
  .evidence-mark { grid-column: 2; text-align: left; }
}

/* ---------- reading progress ---------- */
/* motion.dev scroll() drives scaleX from 0 to 1 across the document. A
   transform, so it is composited rather than laid out on every frame. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: transparent;
  z-index: 50;
  pointer-events: none;
}

.progress-bar {
  height: 100%;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- band headings carry the accent face ---------- */
.band-title em.serif {
  display: block;
  font-style: italic;
}

.band--paper .note,
.band--paper .refusals,
.band--paper .failure,
.band--paper .modes,
.band--paper .roadmap { background: var(--ground-lift); }

.band--paper code {
  background: var(--paper);
  border-color: var(--paper-rule);
  color: var(--paper-text);
}

/* ---------- narrow screens ---------- */
/* An SVG with text in it must not scale below the point its labels stop being
   readable. The slopegraph carries 18 labels at 11 units; scaled to a 280px
   content box they render at about 4px. So it scrolls sideways in its own
   container instead of shrinking, which is the one exception the page allows
   to never scrolling horizontally. */
.slopescroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.slopescroll .slopegraph { min-width: 620px; }

.slopefig figcaption .scrollhint { display: none; }

@media (max-width: 680px) {
  .slopefig figcaption .scrollhint { display: inline; color: var(--acid); }
}

img, video, canvas { max-width: 100%; height: auto; }

.lab-full {
  margin: 0;
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-text);
}

/* ---------- brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--acid);
  color: var(--acid);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  flex: none;
}

.button--small {
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--ink);
}

.masthead { gap: 16px 24px; }
.masthead-nav { flex: 1 1 auto; }

/* ---------- glass box cards ---------- */
.glass {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 8px;
}

.glass-card {
  position: relative;
  background: var(--ground-lift);
  padding: 26px 26px 30px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 230px;
}

.glass-index {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-dim);
}

.glass-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--acid);
  stroke-width: 1.6;
  stroke-linecap: square;
  margin-bottom: 14px;
}

.glass-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
}

.glass-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- footer ---------- */
.footer {
  margin-inline: calc(var(--gutter) * -1);
  padding: 30px var(--gutter);
  border-top: 1px solid var(--ink-rule);
  background: var(--ink-ground);
  color: var(--ink-text);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}

/* one centred 1180 column, like every band above it */
.footer .brand { margin-left: max(0px, calc((100% - 1680px) / 2)); }
.footer-top { margin-right: max(0px, calc((100% - 1680px) / 2)); }

.footer-line {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.footer-top {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--acid);
  text-decoration: none;
}

.footer-top:hover { text-decoration: underline; }

/* ---------- the flow ---------- */
.flowfig { margin: 8px 0 0; display: grid; gap: 14px; }

.flowscroll { overflow-x: auto; overscroll-behavior-x: contain; }

.flow { width: 100%; height: auto; display: block; }

.fpath {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.fpath--trunk { stroke: color-mix(in srgb, var(--acid) 40%, var(--rule)); stroke-width: 1.4; }

.fn { fill: var(--ground-lift); stroke: var(--rule); stroke-width: 1; }
.fn--q { stroke: var(--acid); }
.fn--e { stroke: color-mix(in srgb, var(--acid) 55%, var(--rule)); }
.fn--vector { stroke: var(--semantic); }
.fn--bm25   { stroke: var(--lexical); }
.fn--hybrid { stroke: var(--ink-dim); }
.fn--r { stroke: var(--acid); }

.fl { font-family: var(--mono); fill: var(--ink); }
.fl--label { font-size: 9px; letter-spacing: 0.18em; fill: var(--ink-dim); }
.fl--q { font-size: 12px; }
.fl--n { font-size: 11px; fill: var(--acid); }
.fl--c { font-size: 13px; }
.fl--m { font-size: 10.5px; fill: var(--ink-dim); }
.fl--rank { font-size: 10px; fill: var(--ink-dim); }

.fbar { fill: color-mix(in srgb, var(--acid) 30%, transparent); }

/* the travelling token, positioned by anime along each path */
.ftoken { fill: var(--acid); }

.flowfig figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 70ch;
}

@media (max-width: 860px) {
  .flow { min-width: 780px; }
}

.flowfig figcaption .scrollhint { display: none; }

@media (max-width: 860px) {
  .flowfig figcaption .scrollhint { display: block; color: var(--acid); margin-top: 6px; }
}

/* ---------- pinned flow stage ---------- */
/* The section is given scroll length so the diagram can be held in place while
   the reader moves through it. The height is what buys the scrub distance. */
.flowstage { min-height: 260vh; position: relative; }

.flowsticky {
  position: sticky;
  top: 12vh;
  display: grid;
  gap: 22px;
}

.flowsteps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.fstep {
  background: var(--ground-lift);
  padding: 14px 16px 16px;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ink-dim);
  border-top: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.fstep span {
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}

.fstep.is-active {
  color: var(--ink);
  border-top-color: var(--acid);
  background: color-mix(in srgb, var(--acid) 7%, var(--ground-lift));
}

.fstep.is-active span { color: var(--acid); }

/* Unpin wherever pinning cannot work: too narrow, too short to hold the
   diagram, or motion is unwanted. A reduced-motion reader was still being given
   260vh of empty scroll for an animation they never saw. */
@media (max-width: 860px), (max-height: 699px), (prefers-reduced-motion: reduce) {
  .flowstage { min-height: 0; }
  .flowsticky { position: static; }
}

/* Lenis: the library needs these to own the scroll. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- hero grid and boot panel ---------- */
/* The hero copy stops at about 58ch, which left the right of a wide screen
   empty. The initialisation panel fills it and says what the system is,
   before a word of the argument has been read. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.hero-copy { display: grid; gap: 28px; align-content: start; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Hug the content. Stretching to the copy column left a dead panel bottom. */
.boot {
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  align-self: start;
}

.boot-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.boot-state { color: var(--acid); }

.boot-list { margin: 0; padding: 6px 0; list-style: none; }

.boot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 5px 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

.boot-n { color: var(--ink-dim); }
.boot-what { color: var(--ink); }
.boot-val { color: var(--ink-dim); text-align: right; white-space: nowrap; }

.boot-row--last .boot-what { color: var(--acid); letter-spacing: 0.1em; }
.boot-row--last { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 10px; }

@media (max-width: 420px) {
  .boot-row { grid-template-columns: auto 1fr; }
  .boot-val { grid-column: 2; text-align: left; }
}

/* ---------- inspectable evidence ---------- */
.evidence-detail summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--acid);
  padding-block: 6px;
  order: 2;
}

.evidence-detail summary::-webkit-details-marker { display: none; }
.evidence-detail summary::before { content: "+ "; }
.evidence-detail[open] summary::before { content: "\2212 "; }
.evidence-detail summary:focus-visible { outline: 1px solid var(--acid); outline-offset: 2px; }

/* closed: the clamped copy shows. open: the full text replaces it. */
.evidence-detail .evidence-text--full { display: none; }
.evidence-detail[open] .evidence-text--full {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  margin-top: 6px;
}
.evidence-body:has(.evidence-detail[open]) .evidence-text--clamped { display: none; }

.lab-changed { border-bottom: 1px solid var(--acid); border-top: 0; }

/* ---------- the sheet ---------- */
/* Heron reads as a drafting sheet rather than a page: hairlines divide the
   whole viewport, and small labels sit on the edges. Empty space then reads as
   paper instead of as a gap, which is what "filled" actually meant.
   Fixed, so the rules stay put while the content scrolls past them. */
.sheet {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.sheet-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  opacity: 0.55;
}

/* the page margins */
.sheet-rule--l { left: calc(var(--gutter) / 2); }
.sheet-rule--r { right: calc(var(--gutter) / 2); }

/* the edges of the 1180 column the content sits in */
.sheet-rule--cl { left: max(calc(var(--gutter) / 2 + 12px), calc(50% - 840px - 26px)); }
.sheet-rule--cr { right: max(calc(var(--gutter) / 2 + 12px), calc(50% - 840px - 26px)); }

/* corner ticks, the registration marks of a drawing */
.sheet-tick {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--acid);
  opacity: 0.7;
}

.sheet-tick--tl { top: calc(var(--gutter) / 2 - 4px); left: calc(var(--gutter) / 2 - 4px); border-right: 0; border-bottom: 0; }
.sheet-tick--tr { top: calc(var(--gutter) / 2 - 4px); right: calc(var(--gutter) / 2 - 4px); border-left: 0; border-bottom: 0; }
.sheet-tick--bl { bottom: calc(var(--gutter) / 2 - 4px); left: calc(var(--gutter) / 2 - 4px); border-right: 0; border-top: 0; }
.sheet-tick--br { bottom: calc(var(--gutter) / 2 - 4px); right: calc(var(--gutter) / 2 - 4px); border-left: 0; border-top: 0; }

/* edge labels, set sideways like a title block */
.sheet-mark {
  position: absolute;
  bottom: clamp(26px, 6vh, 64px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
  opacity: 0.6;
  white-space: nowrap;
}

.sheet-mark--left {
  left: calc(var(--gutter) / 2 - 5px);
  transform-origin: left bottom;
  transform: rotate(-90deg) translateX(0);
}

.sheet-mark--right {
  right: calc(var(--gutter) / 2 - 5px);
  transform-origin: right bottom;
  transform: rotate(90deg) translateX(0);
}

/* content sits above the sheet */
body > header, body > main, body > footer, .progress { position: relative; z-index: 2; }

@media (max-width: 860px) {
  .sheet-rule--cl, .sheet-rule--cr, .sheet-mark { display: none; }
}

/* ---------- two-column section headers ---------- */
/* The measure is 62ch, so a heading and its opening paragraph stacked in one
   column left the right half of every band empty. Setting them side by side
   uses the width the page actually has, and is how an editorial spread opens:
   statement on the left, elaboration on the right. */
/* The two columns are set to the same baseline rather than the same top, so a
   short heading beside a long paragraph does not leave a hole under it. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-bottom: 10px;
}

.band-head-left { display: grid; gap: 18px; align-content: start; }
.band-head-right { display: grid; gap: 14px; padding-top: 8px; }

/* the heading can run wider now that it no longer shares the column */
.band-head .band-title { max-width: 18ch; }
.band-head .prose { max-width: 58ch; }

@media (max-width: 900px) {
  .band-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .band-head .band-title { max-width: 24ch; }
}