/* The Memory Engine, as a printed dossier.
   Third design. The first two were a dark instrument: correct for the live
   surface grammar, and wrong for the buyer, who reads a dark panelled surface
   as a developer tool however friendly the words on it are. This one is
   chaptered editorial on paper, which is also what the product actually
   produces: dated pages you own. */

:root {
  --sc-canvas:     #F4F1EA;
  --sc-surface:    #FBF9F4;
  --sc-ink:        #1A1714;
  --sc-ink-soft:   #5C564D;
  --sc-accent:     #20456B;
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --v-font-ar: system-ui, -apple-system, "SF Arabic", "Geeza Pro", sans-serif;

  /* the dark chapter, for the one moment the page holds its breath */
  --d-ground: #14191F;
  --d-hi:     #1A212A;
  --d-ink:    #EDE9E1;
  --d-soft:   #9AA3AD;
  --d-accent: #7FA8D4;

  --v-rule:   rgba(26, 23, 20, 0.15);
  --v-rule-2: rgba(26, 23, 20, 0.07);
  --v-folio: 176px;
  --v-r: 2px;
  --v-shadow:
    0 1px 2px rgba(26, 23, 20, 0.08),
    0 6px 12px -6px rgba(26, 23, 20, 0.14),
    0 26px 44px -22px rgba(26, 23, 20, 0.30);
}

body {
  background: linear-gradient(178deg, #F7F5EF 0%, #EFEBE2 78%) fixed;
  color: var(--sc-ink);
}
.sc-grain { opacity: 0.05; mix-blend-mode: multiply; }

/* ------------------------------------------------------------- folio --- */
/* No fixed bar. A folio in the margin carrying the chapter number and title,
   updating as chapters pass, the way a printed feature does. */

.folio {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 40;
  inline-size: var(--v-folio); block-size: 100svh;
  padding: clamp(18px, 3vh, 34px) 0 clamp(18px, 3vh, 34px) clamp(16px, 1.8vw, 28px);
  display: flex; flex-direction: column; gap: 14px;
  border-inline-end: 1px solid var(--v-rule);
  background: color-mix(in oklab, #F7F5EF 92%, transparent);
  backdrop-filter: blur(8px);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
[dir="rtl"] .folio { padding-inline: clamp(16px, 1.8vw, 28px) 0; }
.folio__mark { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1; }
[dir="rtl"] .folio__mark { font-family: var(--v-font-ar); }
.folio__sub { color: var(--sc-ink-soft); }
.folio__now { margin-block-start: auto; display: grid; gap: 5px; padding-inline-end: 14px; }
.folio__n { font-family: var(--sc-font-mono); font-size: 11px; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
[dir="rtl"] .folio__n { font-family: var(--v-font-ar); }
.folio__t { font-size: var(--sc-t-sm); line-height: 1.35; }
.folio__foot { display: grid; gap: 9px; padding-inline-end: 14px; }

html[data-chapter="dark"] .folio {
  background: color-mix(in oklab, var(--d-ground) 94%, transparent);
  border-inline-end-color: rgba(237, 233, 225, 0.16);
  color: var(--d-ink);
}
html[data-chapter="dark"] .folio__sub, html[data-chapter="dark"] .folio__t { color: var(--d-soft); }
html[data-chapter="dark"] .folio__n { color: var(--d-accent); }
html[data-chapter="dark"] .lang { color: var(--d-ink); border-color: rgba(237, 233, 225, 0.24); }
.folio__mark, .folio__n, .folio__t, .folio__sub { transition: color 0s; }

.lang {
  justify-self: start; padding: 5px 12px; border: 1px solid var(--v-rule);
  border-radius: var(--v-r); background: transparent; color: var(--sc-ink);
  cursor: pointer; font-size: var(--sc-t-sm); font-family: var(--v-font-ar);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
html[dir="rtl"] .lang { font-family: var(--sc-font-text); }
.lang:hover { background: var(--sc-surface); }
.lang:active { transform: translateY(1px); }
.lang:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

@media (max-width: 900px) {
  :root { --v-folio: 0px; }
  .folio {
    position: sticky; inline-size: auto; block-size: auto; inset-block-start: 0;
    flex-direction: row; align-items: baseline; gap: 10px; padding: 9px 14px;
    border-inline-end: 0; border-block-end: 1px solid var(--v-rule);
  }
  .folio__sub { display: none; }
  .folio__now { margin-block-start: 0; margin-inline-start: auto; padding: 0; grid-auto-flow: column; align-items: baseline; gap: 8px; }
  .folio__t { display: none; }
  .folio__foot { padding: 0; }
}

/* ------------------------------------------------------------ chapters -- */

.page { padding-inline-start: var(--v-folio); }
.ch { position: relative; padding-block: clamp(56px, 10vh, 132px); }
.ch--tight { padding-block-start: clamp(30px, 5vh, 66px); }
.wrap { width: min(100% - (var(--sc-gutter) * 2), 1140px); margin-inline: auto; }
.narrow { width: min(100% - (var(--sc-gutter) * 2), 720px); margin-inline: auto; }

/* Chapters land on their own ground and hold it. A cut, never an interpolation. */
.ch--paper { background: linear-gradient(178deg, #F7F5EF, #EFEBE2) fixed; }
.ch--dark {
  --sc-ink: var(--d-ink); --sc-ink-soft: var(--d-soft); --sc-accent: var(--d-accent);
  --sc-surface: #1E262F;
  --v-rule: rgba(237, 233, 225, 0.20); --v-rule-2: rgba(237, 233, 225, 0.10);
  --v-shadow: 0 2px 4px rgba(0,0,0,.4), 0 10px 20px -10px rgba(0,0,0,.6), 0 40px 64px -30px rgba(0,0,0,.9);
  /* colour inherits as a computed value, so restating the token is not enough */
  color: var(--sc-ink);
  background: linear-gradient(178deg, var(--d-hi), var(--d-ground)) fixed;
}
.ch--dark .p, .ch--dark .lede, .ch--dark dt { color: var(--sc-ink-soft); }
.ch--dark h2, .ch--dark h3, .ch--dark strong, .ch--dark b { color: var(--sc-ink); }

/* an intertitle: the full stop between chapters */
.intertitle { display: grid; gap: 12px; align-content: center; min-height: 34vh; }
.intertitle__n {
  font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
[dir="rtl"] .intertitle__n { font-family: var(--v-font-ar); letter-spacing: normal; text-transform: none; font-size: var(--sc-t-xs); }
.intertitle h2 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.08;
  letter-spacing: var(--sc-track-tight); text-wrap: balance; max-width: 20ch;
}
[dir="rtl"] .intertitle h2 { font-family: var(--v-font-ar); line-height: 1.4; letter-spacing: normal; max-width: 24ch; }

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

.title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem); line-height: 1.03;
  letter-spacing: -0.022em; text-wrap: balance;
}
[dir="rtl"] .title { font-family: var(--v-font-ar); line-height: 1.34; letter-spacing: normal; font-weight: 700; }
.lede {
  margin: 0; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.66;
  color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty;
}
[dir="rtl"] .lede { line-height: 1.95; }
.p { margin: 0; font-size: var(--sc-t-base); line-height: 1.72; color: var(--sc-ink-soft); max-width: 64ch; text-wrap: pretty; }
[dir="rtl"] .p { line-height: 1.95; }
.p strong, .lede strong { color: var(--sc-ink); font-weight: 560; }
.h3 { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
[dir="rtl"] .h3 { font-family: var(--v-font-ar); line-height: 1.5; letter-spacing: normal; }
.stack > * + * { margin-block-start: var(--sc-5); }
.lbl {
  font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--sc-ink-soft); unicode-bidi: plaintext;
}
[dir="rtl"] .lbl { font-family: var(--v-font-ar); letter-spacing: normal; text-transform: none; font-size: var(--sc-t-xs); }
.mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; font-size: var(--sc-t-xs); unicode-bidi: plaintext; }
[dir="rtl"] .mono { font-family: var(--v-font-ar); }
/* An element explicitly marked LTR inside an Arabic page holds a path or an
   identifier, never Arabic, so the monospace ban does not apply to it and the
   thing reads as the file name it is. */
[dir="rtl"] .mono[dir="ltr"] { font-family: var(--sc-font-mono); }
.dateline { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; color: var(--sc-ink-soft); }
.rule { block-size: 1px; background: var(--v-rule); border: 0; margin: 0; }

/* ------------------------------------------------ the slip (a vault page) */
/* Media sits in its own column with a caption. It never bleeds under type. */

.slip {
  background: var(--sc-surface); border: 1px solid var(--v-rule); border-radius: var(--v-r);
  box-shadow: var(--v-shadow); overflow: hidden; position: relative;
}
.slip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(26,23,20,.07);
}
.ch--dark .slip::after { box-shadow: inset 0 1px 0 rgba(237,233,225,.14), inset 0 -1px 0 rgba(0,0,0,.5); }
.slip__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 15px; border-block-end: 1px solid var(--v-rule-2);
  background: color-mix(in oklab, var(--sc-ink) 3%, transparent);
}
.slip__head > :first-child { font-weight: 560; font-size: var(--sc-t-xs); }
.slip__body { padding: clamp(14px, 2vw, 24px); }
.line { display: flex; gap: 13px; align-items: baseline; padding-block: 8px; border-block-end: 1px solid var(--v-rule-2); }
.line:last-child { border-block-end: 0; }
.line__d { flex-shrink: 0; color: var(--sc-accent); }
.line__t { font-size: var(--sc-t-sm); line-height: 1.6; }
.redact { display: inline-block; border-radius: 1px; vertical-align: -1px; background: var(--sc-ink); opacity: .8; }

.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(26px, 5vw, 76px); align-items: start; }
.spread--flip { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
@media (max-width: 900px) { .spread, .spread--flip { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
figure { margin: 0; }
figcaption { margin-block-start: 9px; font-size: var(--sc-t-xs); line-height: 1.6; color: var(--sc-ink-soft); }

/* --------------------------------------------------- the cost, ch 02 --- */
.calc { border: 1px solid var(--v-rule); border-radius: var(--v-r); padding: clamp(16px, 2.2vw, 26px); background: var(--sc-surface); box-shadow: var(--v-shadow); }
.calc__row { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; align-items: center; padding-block: 10px; }
.calc__row + .calc__row { border-block-start: 1px solid var(--v-rule-2); }
.calc__row label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.4; }
.calc__v { text-align: end; color: var(--sc-accent); font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
[dir="rtl"] .calc__v { font-family: var(--v-font-ar); }
.calc input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--sc-accent); height: 20px; }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.calc__out { margin-block-start: var(--sc-5); padding-block-start: var(--sc-5); border-block-start: 1px solid var(--v-rule); display: grid; gap: 11px; }
.calc__big { display: flex; gap: 11px; align-items: baseline; }
.calc__n { font-family: var(--sc-font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
[dir="rtl"] .calc__n { font-family: var(--v-font-ar); }
.calc__u { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.4; }

/* ------------------------------------ the exchange, ch 01 (interactive) -- */
/* A transcript, not a headline over a standfirst. The question carries the
   prompt affordances (a chevron, a caret) so it reads as typed; the answer
   carries an attribution, a measured time, and the files it came out of, so it
   reads as returned. */
.ask { display: grid; gap: 10px; }
.ask__q {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.85rem, 5.2vw, 4rem); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 20ch; text-wrap: balance;
}
[dir="rtl"] .ask__q { font-family: var(--v-font-ar); letter-spacing: normal; line-height: 1.35; max-width: 22ch; }
.ask__ch { color: var(--sc-accent); margin-inline-end: 0.24em; font-weight: 400; }
.ask__caret {
  display: inline-block; inline-size: 0.075em; block-size: 0.82em;
  background: var(--sc-accent); vertical-align: -0.06em; margin-inline-start: 0.1em;
  opacity: 0;
}
.ask__caret[data-on="1"] { opacity: 1; animation: askBlink 1.05s steps(1) infinite; }
@keyframes askBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ask__caret { animation: none; } }

.ans {
  border-inline-start: 2px solid var(--sc-accent);
  padding-inline-start: clamp(14px, 2vw, 24px);
  display: grid; gap: 11px; max-width: 68ch;
}
.ans__by { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.ans__who { color: var(--sc-ink); font-weight: 560; }
.ans__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--sc-ink-soft); }
.ans__st { color: var(--sc-accent); }
.ans__t { margin: 0; font-size: var(--sc-t-lg); line-height: 1.62; text-wrap: pretty; }
.ans__src { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.src__f {
  font-size: 10.5px; color: var(--sc-accent);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 32%, transparent);
  border-radius: 2px; padding: 3px 8px;
}
/* The lookup is in flight: the answer is still the last one, so it steps back
   rather than disappearing, which would collapse the page under the reader. */
.ans[data-busy="1"] .ans__t, .ans[data-busy="1"] .ans__src { opacity: 0.34; }
.ans .ans__t, .ans .ans__src { transition: opacity 200ms var(--sc-ease-out); }

.qmore { display: grid; gap: 9px; }
.qmore__row { display: flex; flex-wrap: wrap; gap: 7px; }

/* -------------------------------------- the bench, ch 03 (interactive) -- */
/* Nothing in chapter three moves on scroll. Two artifacts, both operated by
   the pointer: the worker, run by a button, and the redactor, run by whatever
   the reader types. */
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 48px); align-items: start; }
@media (max-width: 900px) { .bench { grid-template-columns: minmax(0, 1fr); } }
.bench__col { display: flex; flex-direction: column; gap: 13px; }

.stg { list-style: none; margin: 0; padding: 0; display: grid; }
.stg__r { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 11px; align-items: baseline; padding-block: 9px; border-block-end: 1px solid var(--v-rule-2); }
.stg__r:last-child { border-block-end: 0; }
.stg__i { font-size: 10.5px; color: color-mix(in oklab, var(--sc-ink-soft) 68%, transparent); transition: color 200ms var(--sc-ease-out); }
.stg__n { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); }
.stg__o { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: end; opacity: 0; transform: translateY(3px); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.stg__r[data-on="run"] .stg__i, .stg__r[data-on="1"] .stg__i { color: var(--sc-accent); }
.stg__r[data-on="run"] .stg__n, .stg__r[data-on="1"] .stg__n { color: var(--sc-ink); font-weight: 560; }
.stg__r[data-on="1"] .stg__o { opacity: 1; transform: none; }
.stg__st { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

.wrote { margin-block-start: 13px; padding-block-start: 12px; border-block-start: 1px dashed var(--v-rule); opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.wrote[data-on="1"] { opacity: 1; }
.wrote__f { display: block; font-size: 10.5px; color: var(--sc-accent); margin-block-end: 5px; }
.slip__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: clamp(11px, 1.5vw, 16px) clamp(14px, 2vw, 24px); border-block-start: 1px solid var(--v-rule-2); }
.slip__foot .btn { height: 38px; padding-inline: 18px; }

.red { border: 1px solid var(--v-rule); border-radius: var(--v-r); background: var(--sc-surface); box-shadow: var(--v-shadow); padding: clamp(14px, 1.8vw, 20px); display: grid; gap: 11px; }
.red__chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* NOT .chip: that class already exists further down as a 9.5px uppercase mono
   tag for search-result labels, and being later in the file it silently won
   every shared property. These are buttons carrying whole sentences, so they
   need their own name. */
.qbtn { border: 1px solid var(--v-rule); border-radius: 999px; background: transparent; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-xs); line-height: 1.45; text-align: start; padding: 6px 13px; cursor: pointer; transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.qbtn:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.qbtn.is-on { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.qbtn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.red__in { width: 100%; resize: vertical; min-height: 78px; background: color-mix(in oklab, var(--sc-ink) 3%, transparent); border: 1px solid var(--v-rule-2); border-radius: var(--v-r); padding: 10px 12px; color: var(--sc-ink); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.7; unicode-bidi: plaintext; }
.red__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.red__c { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.red__out { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.95; word-break: break-word; min-height: 4.2em; padding: 10px 12px; border: 1px dashed var(--v-rule); border-radius: var(--v-r); background: color-mix(in oklab, var(--sc-ink) 2%, transparent); unicode-bidi: plaintext; }
/* Arabic never renders in a monospace face on this site. When the sample is
   Arabic the box swaps to the text face for the whole run. */
.red__in.is-ar, .red__out.is-ar { font-family: var(--v-font-ar); font-size: var(--sc-t-sm); }
.red__bar { display: inline-block; vertical-align: -0.14em; block-size: 0.96em; border-radius: 1px; background: var(--sc-ink); opacity: .84; }
.red__hits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.red__hits li { font-family: var(--sc-font-mono); font-size: 10.5px; color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 38%, transparent); border-radius: 2px; padding: 3px 8px; }
.red__hits li[data-clean="1"] { color: var(--sc-ink-soft); border-color: var(--v-rule); }

/* ---------------------------------- the switchboard, ch 04 (interactive) -- */
.board { border: 1px solid var(--v-rule); border-radius: var(--v-r); background: var(--sc-surface); box-shadow: var(--v-shadow); padding: clamp(16px, 2.4vw, 30px); display: grid; gap: clamp(14px, 2vh, 22px); }
.board__mode { display: inline-flex; justify-self: start; gap: 3px; padding: 3px; border: 1px solid var(--v-rule); border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 3%, transparent); }
.mode { border: 0; background: transparent; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-xs); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out); }
.mode.is-on { background: var(--sc-accent); color: var(--sc-accent-ink); }
.mode:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.board__claim { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.02rem, 2vw, 1.44rem); line-height: 1.42; max-width: 48ch; text-wrap: pretty; }
[dir="rtl"] .board__claim { font-family: var(--v-font-ar); }
.board__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(46px, 8vw, 128px) minmax(0, 1fr); align-items: center; }
.wires { color: var(--sc-ink-soft); position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.srcs { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; z-index: 1; }
.node { inline-size: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: start; border: 1px solid var(--v-rule); border-radius: var(--v-r); background: var(--sc-canvas); color: var(--sc-ink); font: inherit; padding: 11px 13px; cursor: pointer; transition: border-color 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out); }
.node:hover { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.node.is-sel { border-color: var(--sc-accent); box-shadow: inset 0 0 0 1px var(--sc-accent); background: var(--sc-surface); }
.node:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.node__n { font-size: 10.5px; color: var(--sc-ink-soft); }
.node__t { font-size: var(--sc-t-sm); font-weight: 560; }
.node__c { font-size: var(--sc-t-xs); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.dest { grid-column: 3; display: grid; position: relative; z-index: 1; }
.silos, .vault { grid-area: 1 / 1; }
.silos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; transition: opacity 340ms var(--sc-ease-out); }
.silo { border: 1px dashed var(--v-rule); border-radius: var(--v-r); background: var(--sc-canvas); padding: 9px 12px; display: grid; gap: 2px; transition: border-color 200ms var(--sc-ease-out); }
.silo.is-sel { border-color: var(--sc-accent); border-style: solid; }
.silo__t { font-size: 10.5px; color: var(--sc-ink); }
.silo__s { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5; }
.vault { border: 1px solid var(--sc-accent); border-radius: var(--v-r); background: color-mix(in oklab, var(--sc-accent) 7%, var(--sc-surface)); padding: clamp(14px, 1.9vw, 22px); display: grid; gap: 5px; align-content: center; opacity: 0; pointer-events: none; transition: opacity 340ms var(--sc-ease-out); }
.vault__t { font-size: var(--sc-t-sm); color: var(--sc-accent); }
.vault__s { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.62; max-width: 42ch; }
.vault__n { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; color: var(--sc-ink); font-variant-numeric: tabular-nums; margin-block-start: 7px; }
.vault__l { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.board[data-mode="engine"] .vault { opacity: 1; pointer-events: auto; }
.board[data-mode="engine"] .silos { opacity: 0; pointer-events: none; }
.board__read { border-block-start: 1px solid var(--v-rule-2); padding-block-start: 14px; display: grid; gap: 6px; }
.board__rt { margin: 0; font-size: var(--sc-t-base); font-weight: 600; }
.board__who { margin: 0; font-family: var(--sc-font-mono); font-size: 10.5px; line-height: 1.95; color: var(--sc-ink-soft); }
.board__who s { text-decoration-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.board__who b { color: var(--sc-accent); font-weight: 600; }
[dir="rtl"] :is(.board__who, .node__n, .node__c, .silo__t, .vault__t, .vault__n, .stg__i, .stg__o, .stg__st, .red__c, .red__hits li, .wrote__f) { font-family: var(--v-font-ar); }
@media (max-width: 900px) {
  .board__grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .srcs, .dest { grid-column: 1; }
  .wires { display: none; }
  /* The silos and the vault only share a grid cell so the wires have two
     measurable endpoints at all times. With no wires here, sharing one cell
     just makes the vault as tall as the five boxes it replaced. */
  .silos, .vault { grid-area: auto; }
  .board[data-mode="engine"] .silos { display: none; }
  .board[data-mode="native"] .vault { display: none; }
}

/* -------------------------------------------------------- the rails ---- */
.rail { display: flex; gap: clamp(14px, 2vw, 26px); align-items: stretch; padding-inline: clamp(20px, 4vw, 70px); min-height: 100svh; }
.rail__lead { flex: 0 0 clamp(240px, 27vw, 340px); display: flex; flex-direction: column; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .rail .grave {
    --o: clamp(0, calc(var(--sc-p, 1) * 5 - var(--i, 0)), 1);
    opacity: calc(0.66 + 0.34 * var(--o));
    transform: translateY(calc((1 - var(--o)) * 13px));
  }
  /* Tuned against the measured entry times, not spaced evenly: a card lights
     just after it reaches the frame. The first three are already on screen at
     p=0, so they cannot be made to arrive. */
  .rail .grave:nth-of-type(1) { --i: 0; }
  .rail .grave:nth-of-type(2) { --i: 0.15; }
  .rail .grave:nth-of-type(3) { --i: 0.45; }
  .rail .grave:nth-of-type(4) { --i: 0.75; }
  .rail .grave:nth-of-type(5) { --i: 1.05; }
  .rail .grave:nth-of-type(6) { --i: 1.40; }
  .rail .grave:nth-of-type(7) { --i: 1.80; }
  .rail .grave:nth-of-type(8) { --i: 2.20; }
}

/* -------------------------------------------- the fold and the lookup -- */
.fold { display: grid; gap: 10px; justify-items: start; }
.fold__row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.fold__raw, .fold__norm { font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-family: var(--v-font-ar); line-height: 1.55; }
.fold__raw { color: var(--sc-ink-soft); }
.fold__norm { color: var(--sc-accent); }
.fold__arrow { color: var(--sc-ink-soft); }

/* the lookup plate: the signature move, housed as an artifact in the
   document rather than as the page's chrome */
.lookup { border: 1px solid var(--v-rule); border-radius: var(--v-r); background: var(--sc-surface); box-shadow: var(--v-shadow); overflow: hidden; }
.lookup__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-block-end: 1px solid var(--v-rule-2); }
.lookup__i {
  flex: 1 1 auto; min-width: 0; height: 34px; background: transparent; border: 0;
  color: var(--sc-ink); font: inherit; font-size: var(--sc-t-base);
}
.lookup__i::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 78%, transparent); }
.lookup__i:focus { outline: none; }
.lookup__bar:focus-within { box-shadow: inset 0 0 0 2px var(--sc-accent); }
.lookup__k { color: var(--sc-ink-soft); display: flex; }
.lookup__k svg { width: 15px; height: 15px; }
.res { max-height: 340px; overflow: auto; }
.res[hidden] { display: none; }
.res__meta { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: var(--sc-ink-soft); border-block-end: 1px solid var(--v-rule-2); }
.res__grp { padding: 9px 14px 2px; display: flex; align-items: center; gap: 8px; }
.res__hit { display: block; width: 100%; text-align: start; padding: 9px 14px; border: 0; background: transparent; cursor: pointer; color: var(--sc-ink); font: inherit; font-size: var(--sc-t-sm); border-block-start: 1px solid var(--v-rule-2); }
.res__hit:hover { background: color-mix(in oklab, var(--sc-ink) 4%, transparent); }
.res__hit:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.res__hit b { color: var(--sc-accent); font-weight: 620; }
.res__file { display: flex; gap: 8px; align-items: baseline; color: var(--sc-ink-soft); margin-block-end: 3px; }
.res__txt { line-height: 1.55; }
.res__none { padding: 15px 14px; color: var(--sc-ink-soft); }
.res__withheld { padding: 12px 14px; border-block-start: 1px solid var(--v-rule-2); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); display: flex; gap: 9px; align-items: flex-start; color: var(--sc-ink-soft); }
.res__withheld strong { color: var(--sc-ink); font-weight: 600; }
.chip { font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 5px; border-radius: 2px; border: 1px solid var(--v-rule); color: var(--sc-ink-soft); }
[dir="rtl"] .chip { font-family: var(--v-font-ar); letter-spacing: normal; text-transform: none; font-size: 10.5px; }

/* the isolation switch, wherever it appears */
.iso__btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 10px; background: transparent; border: 1px solid var(--v-rule); border-radius: var(--v-r); color: var(--sc-ink-soft); cursor: pointer; font: inherit; font-size: var(--sc-t-xs); }
.iso__btn:hover { color: var(--sc-ink); }
.iso__btn:active { transform: translateY(1px); }
.iso__btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.iso__track { width: 26px; height: 14px; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); position: relative; transition: background-color 180ms var(--sc-ease-out); }
.iso__track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-surface); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform 180ms var(--sc-ease-out); }
.iso__btn[aria-pressed="true"] { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.iso__btn[aria-pressed="true"] .iso__track { background: var(--sc-accent); }
.iso__btn[aria-pressed="true"] .iso__track::after { transform: translateX(12px); }
[dir="rtl"] .iso__btn[aria-pressed="true"] .iso__track::after { transform: translateX(-12px); }

/* ------------------------------------------------ the ledger, ch 06 ---- */
.peak { display: grid; gap: clamp(12px, 2vh, 22px); align-content: center; min-height: calc(100svh - 20px); width: min(100% - (var(--sc-gutter) * 2), 940px); margin-inline: auto; }
.ledger { border: 1px solid var(--v-rule); border-radius: var(--v-r); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); box-shadow: var(--v-shadow); overflow: hidden; }
.ledger__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 15px; border-block-end: 1px solid var(--v-rule-2); }
.ledger__bar > :first-child { font-weight: 560; font-size: var(--sc-t-xs); }
.ledger__c { display: block; width: 100%; height: clamp(88px, 19vh, 186px); }
.ledger__key { display: flex; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap; padding: 10px 15px; border-block-start: 1px solid var(--v-rule-2); color: var(--sc-ink-soft); }
.ledger__key > span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--sc-t-xs); }
.key { width: 9px; height: 9px; border-radius: 1px; display: inline-block; }
.key--lit { background: var(--sc-accent); }
.key--dim { background: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.key--demo { background: transparent; border: 1px solid color-mix(in oklab, var(--sc-ink) 50%, transparent); }
.ledger__n { color: var(--sc-accent); }

.q { display: flex; align-items: center; gap: 11px; background: color-mix(in oklab, var(--sc-surface) 60%, transparent); border: 1px solid var(--v-rule); border-radius: var(--v-r); padding: 10px 15px; }
.q__typed { font-family: var(--sc-font-mono); font-size: var(--sc-t-lg); }
[dir="rtl"] .q__typed { font-family: var(--v-font-ar); }
.q__caret { width: 1.5px; height: 1.05em; background: var(--sc-accent); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .q__caret { animation: none; } }

.hits { display: grid; gap: 1px; background: var(--v-rule-2); border: 1px solid var(--v-rule); border-radius: var(--v-r); overflow: hidden; }
.hit { background: color-mix(in oklab, var(--sc-surface) 55%, transparent); padding: 10px 15px; transition: opacity 260ms var(--sc-ease-out), filter 260ms var(--sc-ease-out); }
.hit[data-gone="1"] { filter: saturate(0); }
.hit[data-gone="1"] .res__txt { text-decoration: line-through; text-decoration-thickness: 1px; }
.hit .res__txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--sc-t-sm); }

.swap { position: relative; }
.swap > .hits { position: static; margin: 0; }
.swap > #ledgerCap { position: absolute; inset-block-start: 0; inset-inline: 0; margin: 0; }
.read { display: grid; }
.read div { display: flex; align-items: baseline; gap: 10px; padding-block: 6px; border-block-end: 1px solid var(--v-rule-2); font-size: var(--sc-t-sm); }
.read span { color: var(--sc-ink-soft); }
.read i { flex: 1 1 auto; border-block-end: 1px dotted var(--v-rule); transform: translateY(-3px); }
.read b { font-family: var(--sc-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
[dir="rtl"] .read b { font-family: var(--v-font-ar); }

/* A pinned chapter is exactly one viewport, and it has to hold a heading, the
   ledger, the query, three results and the refusal. Three tiers, each giving up
   the least load bearing thing left. */
@media (max-height: 930px), (max-width: 720px) {
  .ledger__c { height: clamp(74px, 14vh, 150px); }
  .peak { gap: clamp(9px, 1.5vh, 16px); }
  .hit { padding: 9px 13px; }
  .read div { padding-block: 5px; }
}
@media (max-height: 820px), (max-width: 500px) {
  .ledger__c { height: clamp(58px, 11vh, 104px); }
  .peak { gap: clamp(7px, 1.1vh, 12px); }
  .hit { padding: 7px 11px; }
  .hit .res__txt { -webkit-line-clamp: 1; font-size: var(--sc-t-xs); }
  .q { padding: 7px 12px; }
  .q__typed { font-size: var(--sc-t-base); }
  .read div { padding-block: 3px; font-size: var(--sc-t-xs); }
  .ledger__bar, .ledger__key { padding-block: 7px; }
  .swap--note .p { font-size: 11.5px; line-height: 1.5; }
  #peakTry { display: none; }
}
@media (max-height: 710px) {
  .ledger__c { height: clamp(42px, 8vh, 70px); }
  .swap--note [data-t="walls1"] { display: none; }
  .peak .title { font-size: 1.05rem; }
  .ledger__key { display: none; }
}

/* ------------------------------------------------- the record, ch 07 --- */
.rcpt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
@media (max-width: 860px) { .rcpt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rcpt { grid-template-columns: minmax(0, 1fr); } }
.rcpt__c { display: grid; gap: 7px; align-content: start; padding-block-start: 12px; border-block-start: 2px solid var(--sc-ink); }
.rcpt__c--soft { border-block-start-color: var(--v-rule); }
.rcpt__n { font-family: var(--sc-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
[dir="rtl"] .rcpt__n { font-family: var(--v-font-ar); }
.rcpt__l { font-size: var(--sc-t-sm); color: var(--sc-ink); font-weight: 560; }
.rcpt__s { font-size: var(--sc-t-xs); line-height: 1.6; color: var(--sc-ink-soft); }
.rcpt__c--soft .rcpt__n { color: var(--sc-ink-soft); }

.leaders { display: grid; }
.leaders div { display: flex; align-items: baseline; gap: 10px; padding-block: 9px; border-block-end: 1px solid var(--v-rule-2); font-size: var(--sc-t-sm); }
.leaders span:first-child { color: var(--sc-ink-soft); }
.leaders i { flex: 1 1 auto; border-block-end: 1px dotted var(--v-rule); transform: translateY(-3px); }
.leaders b { font-family: var(--sc-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
[dir="rtl"] .leaders b { font-family: var(--v-font-ar); }

.ladder { display: grid; gap: 2px; }
.ladder__r { display: grid; gap: 5px; padding-block: 12px; border-block-end: 1px solid var(--v-rule-2); }
.ladder__top { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.ladder__w { font-size: var(--sc-t-sm); color: var(--sc-ink); font-weight: 560; }
.ladder__p { color: var(--sc-ink-soft); }
.ladder__bar { height: 6px; border-radius: 1px; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.ladder__r[data-ours="1"] .ladder__bar { background: repeating-linear-gradient(90deg, var(--sc-accent) 0 7px, color-mix(in oklab, var(--sc-accent) 45%, transparent) 7px 10px); }
.ladder__b { font-size: var(--sc-t-xs); line-height: 1.6; color: var(--sc-ink-soft); max-width: 70ch; }

/* ---------------------------------------------- the graveyard, ch 08 --- */
/* The stage carries the rail and a band that does not move. The closing
   sentence used to ride the rail as a wide prose plate, so it was only ever
   whole on the act's last pixel and every screenshot caught it cut in half. */
.gstage { block-size: 100%; display: flex; flex-direction: column; }
/* The engine sizes a pan from `rail.scrollWidth - innerWidth`, so a rail that
   is narrower than the viewport under-travels by exactly the difference. This
   page insets every chapter by the folio, which left the rail 176px short and
   the closing card permanently off the right-hand edge no matter how the span
   was tuned. Pull the rail back over the folio and pad it forward again: the
   box is now viewport-wide, so the engine's arithmetic is true. */
.rail--grave {
  flex: 1 1 auto; min-height: 0; align-items: center;
  margin-inline-start: calc(var(--v-folio) * -1);
  padding-inline-start: calc(var(--v-folio) + clamp(20px, 4vw, 70px));
}
/* The pad is what buys the last card a hold: without it the rail's right edge
   only meets the frame's right edge on the act's final pixel, so the closing
   card is whole at one scroll position and cut at every other one. The 1px
   min-height is load-bearing, not a typo. A flex item with zero content AND
   zero height contributes nothing to the scrollable overflow region, so
   scrollWidth ignores it entirely and the engine, which sizes the travel from
   scrollWidth, adds no travel at all. Measured in Chrome: 2830px with the
   empty pad, 3456px the moment the pad has any height. */
.rail__pad { flex: 0 0 clamp(120px, 34vw, 520px); min-block-size: 1px; }
.gband { flex: 0 0 auto; border-block-start: 1px solid var(--v-rule); padding: clamp(11px, 1.9vh, 20px) clamp(20px, 4vw, 70px); background: color-mix(in oklab, #F7F5EF 90%, transparent); }
.gband .p { max-width: 96ch; font-size: var(--sc-t-sm); }
.grave { flex: 0 0 clamp(212px, 19vw, 256px); background: var(--sc-surface); border: 1px solid var(--v-rule); border-radius: var(--v-r); box-shadow: var(--v-shadow); padding: clamp(16px, 1.9vw, 22px); display: flex; flex-direction: column; gap: 9px; align-self: center; min-height: clamp(240px, 58vh, 470px); }
.grave--alive { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, var(--sc-surface)); }
.grave--alive .grave__n { text-decoration: none; }
.grave--alive .grave__d { color: var(--sc-ink-soft); }
.grave__d { color: var(--sc-accent); }
.grave__n { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; line-height: 1.25; text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); text-decoration-thickness: 1px; }
[dir="rtl"] .grave__n { font-family: var(--v-font-ar); }
/* The sentence sits on the card's floor rather than under the name. A card
   that is half its own height of blank paper reads as a layout that ran out,
   and every one of these is a headstone: date at the head, sentence at foot. */
.grave p { margin: 0; margin-block-start: auto; padding-block-start: 13px; border-block-start: 1px solid var(--v-rule-2); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }

/* ------------------------------------------------ do not buy, ch 09 ---- */
.notfor { list-style: none; margin: 0; padding: 0; counter-reset: nf; display: grid; }
.notfor li { counter-increment: nf; position: relative; padding: 14px 0 14px 36px; border-block-end: 1px solid var(--v-rule-2); font-size: var(--sc-t-sm); line-height: 1.68; color: var(--sc-ink-soft); max-width: 76ch; }
[dir="rtl"] .notfor li { padding: 14px 36px 14px 0; }
.notfor li::before { content: counter(nf, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 15px; font-family: var(--sc-font-mono); font-size: 11px; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
[dir="rtl"] .notfor li::before { font-family: var(--v-font-ar); }

/* ------------------------------------------------- the colophon, ch 10 - */
.colophon { border-block-start: 2px solid var(--sc-ink); padding-block-start: clamp(20px, 3vh, 34px); display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
@media (max-width: 860px) { .colophon { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.field input { width: 100%; height: 42px; background: var(--sc-surface); border: 1px solid var(--v-rule); border-radius: var(--v-r); color: var(--sc-ink); padding-inline: 12px; font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); }
.field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 72%, transparent); }
/* An INSET ring, not an outline. An outline sits outside the border box, so
   any ancestor that clips (body carries overflow-x: clip) can cut a side off,
   and the field then reads as a stroke with a piece missing. A ring drawn
   inside the element's own box cannot be clipped by anything. */
.field input:focus-visible,
.red__in:focus-visible {
  outline: none;
  border-color: var(--sc-accent);
  box-shadow: inset 0 0 0 2px var(--sc-accent);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding-inline: 24px; border: 0; border-radius: var(--v-r); background: var(--sc-accent); color: var(--sc-accent-ink); font: inherit; font-size: var(--sc-t-sm); font-weight: 620; cursor: pointer; text-decoration: none; transition: filter 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.seal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seal__bars { display: flex; gap: 5px; }
.seal__bars i { display: block; width: 32px; height: 23px; border-radius: 1px; background: var(--sc-ink); opacity: .85; }
.seal__stamp { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--v-rule); padding: 3px 7px; border-radius: 2px; }
[dir="rtl"] .seal__stamp { font-family: var(--v-font-ar); letter-spacing: normal; text-transform: none; font-size: var(--sc-t-xs); }
.foot { margin-block-start: var(--sc-9); padding-block-start: var(--sc-5); border-block-start: 1px solid var(--v-rule); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; inset-block-start: 6px; inset-inline-start: 6px; z-index: 60; padding: 9px 14px; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--v-r); transform: translateY(-180%); transition: transform 160ms var(--sc-ease-out); }
.skip:focus { transform: none; }

/* The rule is a chapter break, not an underline: it needs air on both sides
   or it reads as decoration attached to the paragraph above it. */
.rule { margin-block: var(--sc-9) var(--sc-5); }
.folio__mark { font-size: clamp(1rem, 1.15vw, 1.22rem); line-height: 1.15; letter-spacing: -0.012em; }
.intertitle { max-width: 26ch; }
[dir="rtl"] .intertitle { max-width: 28ch; }

/* Last few pixels on the two tightest phones still in circulation. */
@media (max-height: 820px), (max-width: 500px) {
  .peak { gap: clamp(6px, 0.9vh, 11px); }
  .hit { padding: 6px 11px; }
  .ledger__bar, .ledger__key { padding-block: 6px; }
}
@media (max-height: 600px) {
  .ledger__c { height: 38px; }
  .peak .title { font-size: 0.98rem; }
  .peak > div:first-child .intertitle__n { display: none; }
  .swap--note .p { font-size: 10.5px; }
  .read div { padding-block: 2px; }
}

/* ------------------------------------------- setup and the two options --- */
/* Five non-technical readers were never told this page needs a Mac, and none
   of the ten chapters said what installing it involves. One named that as the
   whole reason not to buy. Both answers live here, immediately before the
   choice, because the second option exists to remove exactly that fear. */
.setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 74ch; }
.setup li {
  padding: 14px 0; border-block-end: 1px solid var(--v-rule-2);
  font-size: var(--sc-t-sm); line-height: 1.68; color: var(--sc-ink-soft);
}
.setup li:last-child { border-block-end: 0; }
.setup li strong { color: var(--sc-ink); font-weight: 600; }

.tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(18px, 2.6vw, 34px); align-items: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier {
  border: 1px solid var(--v-rule); border-radius: var(--v-r); background: var(--sc-surface);
  box-shadow: var(--v-shadow); padding: clamp(18px, 2.4vw, 30px);
  display: grid; gap: 11px; align-content: start;
}
/* The second option is marked, not shouted: a rule down its inside edge and a
   warmer ground. Option one has to stay respectable, because most people will
   take it and none of them should feel second class for it. */
.tier--with { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 5%, var(--sc-surface)); }
.tier__k { color: var(--sc-ink-soft); }
.tier--with .tier__k { color: var(--sc-accent); }
.tier__n { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.1rem, 2.2vw, 1.55rem); font-weight: 500; line-height: 1.28; }
[dir="rtl"] .tier__n { font-family: var(--v-font-ar); }
.tier__in { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tier__in li {
  position: relative; padding: 10px 0 10px 22px;
  border-block-end: 1px solid color-mix(in oklab, var(--sc-ink) 7%, transparent);
  font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft);
}
[dir="rtl"] .tier__in li { padding: 10px 22px 10px 0; }
.tier__in li:last-child { border-block-end: 0; }
.tier__in li::before {
  content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: 18px;
  inline-size: 9px; block-size: 1px; background: var(--sc-accent);
}
.tier__cap {
  margin: 0; margin-block-start: 4px; padding-block-start: 13px;
  border-block-start: 1px solid var(--sc-accent);
  font-size: var(--sc-t-xs); line-height: 1.68; color: var(--sc-ink);
}

.pick { border: 0; margin: 0; padding: 0; display: grid; gap: 7px; }
.pick__o {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  border: 1px solid var(--v-rule); border-radius: var(--v-r); padding: 10px 12px;
  font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft);
  transition: border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.pick__o:hover { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); color: var(--sc-ink); }
.pick__o input { margin: 2px 0 0; accent-color: var(--sc-accent); flex: 0 0 auto; }
.pick__o:has(input:checked) { border-color: var(--sc-accent); color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-accent); }
.pick__o:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* The OS question is four one-word answers, so it lies down instead of costing
   four stacked rows in a form that already asks for three other things. Only
   the column track is overridden: `.pick` stays the grid it already was, which
   is the layout the legend is known to render correctly against. Two fixed
   columns rather than `auto-fit`: this form sits in a narrow right-hand column,
   not across the page, and auto-fit resolved to three there and left the fourth
   answer hanging alone on a second row. 2x2 is the same height and is the same
   shape at every width the form is ever drawn at, phone included. */
.pick--row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 3px; }
.pick--row .pick__o { align-items: center; }

/* ==========================================================================
   PHONE ONLY. Nothing below this line changes the desktop layout: the whole
   block is inside one narrow media query, and every rule in it overrides a
   base rule of the same specificity purely by sitting later in the file.

   The desktop page stays as it is on purpose. It is the reference, and the
   phone has different problems: a three column row that works at 1440px
   starves its middle column at 390px, and a 10.5px label that reads as a
   quiet micro-caption on a monitor is simply too small to read in the hand.
   ========================================================================== */
@media (max-width: 640px) {

  /* -- the worst one. `20px | 1fr | auto` gives the third column whatever it
        asks for, and its content is a whole sentence, so the middle column
        collapses and the stage names wrap one word per line. Two columns
        here, with the measurement on its own line underneath. -------------- */
  .stg__r {
    grid-template-columns: 20px minmax(0, 1fr);
    row-gap: 2px; padding-block: 11px;
  }
  .stg__o { grid-column: 2; text-align: start; }

  /* -- micro-labels. 10.5px is a caption on a monitor and unreadable in a
        hand. Everything that carries the page's small voice goes up. ------- */
  .lbl, .intertitle__n { font-size: 11.5px; letter-spacing: 0.11em; }
  [dir="rtl"] .lbl, [dir="rtl"] .intertitle__n { font-size: var(--sc-t-sm); letter-spacing: normal; }
  .node__n, .node__c, .silo__t, .src__f, .wrote__f, .red__hits li,
  .stg__i, .stg__o, .ans__by, .grave__d, .board__who, .vault__t {
    font-size: 11.5px;
  }
  .red__c, .seal__stamp { font-size: 11.5px; }

  /* -- label and figure stop sharing a line when there is no room for both -- */
  .ladder__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ladder__p { justify-self: start; }
  .calc__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }

  /* -- a primary action on a phone is full width. Anything else reads as a
        button someone forgot to finish. ---------------------------------- */
  .btn { inline-size: 100%; }
  .seal { gap: 9px; }

  /* -- the answer block loses its indent: at this width the rule down the
        side costs more reading room than it earns. ----------------------- */
  .ans { padding-inline-start: 13px; }
  .ask__q { max-width: none; }

  /* -- breathing room where two boxes sit on top of each other ------------ */
  .bench__col + .bench__col { margin-block-start: clamp(20px, 4vh, 34px); }
  .tier + .tier { margin-block-start: 4px; }
  .tier__in li { padding-block: 12px; }
  .setup li { padding-block: 15px; }

  /* -- the pasted samples are code and must not force the page sideways --- */
  .red__in, .red__out { font-size: 11.5px; line-height: 1.75; }
  .red__out { overflow-wrap: anywhere; }
}