/* ==========================================================================
   Before the First Word
   Off-white paper, teal and terracotta ink.

   Type     Newsreader (display, headings, asides) · Source Sans 3 (reading, interface)
            JetBrains Mono (labels, code, figure notes)
   Layout   one centred reading column; figures break out wider; a quiet
            index sits in the left margin on wide screens
   Themes   light tokens live here; theme-dark.css overrides them.
            Every colour on the page is a token, so a theme is one block.
   ========================================================================== */

/* ---------- Fonts (all SIL Open Font License, files in assets/fonts) ---------- */

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-greek-wght-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Urdu: a Naskh face, whose letters sit at the same height as Devanagari and
   Latin at the same size. Only Arabic-script characters use it. */
@font-face {
  font-family: "Naskh Urdu";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}

/* ---------- Tokens: light theme ---------- */

:root {
  /* follow the reader's system unless they pin a theme with the switch */
  color-scheme: light dark;

  /* paper */
  --paper: #f9f6ef;
  --paper-raised: #fffdf8;
  --paper-sunk: #f1ece2;
  --paper-veil: rgb(249 246 239 / 0.86);

  /* ink */
  --ink: #161513;
  --ink-soft: #3d3a35;
  --muted: #6d6860;
  --faint: #a19a8d;
  --on-accent: #ffffff;

  /* lines */
  --line: #e6e0d4;
  --line-strong: #d6cebf;

  /* teal: links, labels, the thing each figure is about */
  --accent: #176b64;
  --accent-ink: #174f4b;
  --accent-strong: #1b7f73;
  --accent-soft: #6aafa5;
  --accent-tint: #e3efed;
  --accent-wash: rgb(23 107 100 / 0.09);

  /* terracotta and orange: what goes wrong, and warmth */
  --warm: #a33e2d;
  --warm-strong: #cf5d3a;
  --warm-soft: #d9927f;
  --warm-tint: #f7e5df;

  /* ochre, blue, magenta, stone: supporting colours */
  --gold: #8a6d2f;
  --gold-strong: #b3833f;
  --gold-soft: #cdb176;
  --gold-tint: #f4ecda;
  --blue: #2b4cae;
  --blue-strong: #3a63c8;
  --blue-tint: #e3e9f8;
  --plum: #8e2f6d;
  --plum-strong: #b4428d;
  --plum-tint: #f5e3ee;
  --stone: #8f887b;
  --stone-soft: #bdb6a9;
  --stone-tint: #ede8df;

  /* language families: teal, orange, blue, magenta, stone.
     Checked for colour-blind separation between neighbouring families. */
  --fam-ia: #1b7f73;
  --fam-dr: #cf5d3a;
  --fam-tb: #3a63c8;
  --fam-aa: #b4428d;
  --fam-en: #8f887b;

  /* figures: the boxes of the drawing grammar in figures.css */
  --fig-node: #fffdf8;
  --fig-node-edge: #bfb7a8;
  --fig-input: #f5edda;
  --fig-input-edge: #c9a45c;
  --fig-focal: #e2f0ed;
  --fig-focal-edge: #2a7a70;
  --fig-fault: #f8e6e0;
  --fig-fault-edge: #c0594a;
  --fig-zone: #f2eee5;
  --fig-edge: #5d5850;
  --fig-land: #ebe5d8;
  --fig-read: #e5efeb;
  --fig-read-edge: #8fc2b9;
  --fig-read-ink: #174f4b;
  /* a transcript, word by word: invented, wrong, as spoken */
  --word-bad: #b3261e;
  --word-err: #b3650f;
  --word-fine: #176b64;

  /* 3D blocks: top, left and right faces, and the edge between them */
  --iso-teal-top: #5ec5b5;
  --iso-teal-left: #9ad8cd;
  --iso-teal-right: #78cbbe;
  --iso-teal-edge: #2a7a70;
  --iso-warm-top: #ecbcb1;
  --iso-warm-left: #dea396;
  --iso-warm-right: #cb8272;
  --iso-warm-edge: #a33e2d;
  --iso-gold-top: #eed9a6;
  --iso-gold-left: #d8b772;
  --iso-gold-right: #bf9a51;
  --iso-gold-edge: #8a6d2f;
  --iso-blue-top: #aec1f1;
  --iso-blue-left: #c8d5f6;
  --iso-blue-right: #91abeb;
  --iso-blue-edge: #2b4cae;
  /* the product's blue as a 3D block: the model itself in the release hero */
  --iso-ours-top: #5eb0ff;
  --iso-ours-left: #8ec7ff;
  --iso-ours-right: #2f8ded;
  --iso-ours-edge: #0a63c4;
  --iso-stone-top: #ebe6dd;
  --iso-stone-left: #ddd6ca;
  --iso-stone-right: #cdc5b7;
  --iso-stone-edge: #9c9486;
  --iso-ghost-top: #f7f3eb;
  --iso-ghost-left: #efe9df;
  --iso-ghost-right: #e7e0d4;
  --iso-ghost-edge: #cfc7b8;

  /* the release's charts: one blue marks Anuvani-LID and nothing else; every rival
     shares one neutral; only the ranked list grades its neutrals, from rank 2 to the last */
  --bench-ours: #1a88ff;
  --bench-ours-hover: #0f7bf0;
  --bench-ours-ink: #0a63c4;
  --bench-ours-wash: rgb(26 136 255 / 0.122);
  /* the rivals' greys, by day: the dark theme's greys carried to the light panel by
     tools/release/greys.mjs, which `npm run check` re-derives. Each stands as far from the
     panel as its dark counterpart stands from the tile (the same step in OKLab lightness)
     and carries the paper's own warmth (hue 85, chroma 0.010), so on this paper it reads as
     plain grey. Against the panel they are 2.69, 2.15 and 1.53 to 1: stronger than any
     hairline (1.29), quieter than the blue (3.44). The release site's light greys (#dbd3c4)
     were too faint here and the dark theme's hexes (#4d4d4d) too heavy; the author turned
     both down */
  --bench-rival: #b3afa9;
  --bench-rival-hover: #9f9c96;
  --bench-rank-1: #9f9c96;
  --bench-rank-8: #d2cfc8;
  /* the quietest ink that still reads as text: ranks, counts, axis ticks */
  --bench-quiet: #736e66;
  /* the card a bar shows; a row pointed at or pinned; the band under the table's means
     (by day the band is the panel's own colour, so it does not show) */
  --bench-raised: var(--paper-raised);
  --bench-hover: var(--paper-sunk);
  --bench-band: var(--paper-raised);
  /* the profile chart: one hue per system, in this fixed order. The order is what keeps
     neighbours apart for colour-blind readers; re-run the palette validator before changing it */
  --bench-series-1: #1a88ff;
  --bench-series-2: #eb6834;
  --bench-series-3: #1baf7a;
  --bench-series-4: #eda100;
  --bench-series-5: #e87ba4;
  --bench-series-6: #008300;
  --bench-series-7: #4a3aa7;
  --bench-series-8: #e34948;
  /* the plate under a brand mark, and the ink on it: the same in both themes */
  --bench-plate: #ffffff;
  --bench-plate-edge: rgb(0 0 0 / 0.09);
  --bench-plate-ink: #12161c;

  /* the client tier in the serving drawing and its steps: the page's teal tint, laid on the
     paper so it reads as teal, not as a grey-green */
  --client-wash: color-mix(in oklab, var(--accent-tint) 80%, var(--paper));

  /* code in the release's Hugging Face guide, coloured as an editor colours it: One Light's
     roles by day, each darkened until it stands at 4.5 to 1 or more on --paper-sunk */
  --code-keyword: #a626a4;
  --code-string: #367219;
  --code-number: #a84a08;
  --code-function: #2f5fd0;
  --code-type: #0b7079;
  --code-builtin: #8a5f00;
  --code-comment: #6b665c;
  --code-variable: #c0392b;
  --code-meta: #7349d1;

  /* the research track's charts: the series colours of the line charts in Jasper Lu's
     "Training Search Agents with GRPO" (jasperlu.com), value for value. The author asked
     for that post's exact colours. Lead is the run a chart is about; the three doses
     step through a swept setting; bad marks a run that failed; good one that was kept.
     The grid, the ticks and the surfaces are this page's own tokens */
  --plot-lead: oklch(0.3 0.06 250);
  --plot-dose1: oklch(0.74 0.11 80);
  --plot-dose2: oklch(0.6 0.1 210);
  --plot-dose3: oklch(0.44 0.11 300);
  --plot-bad: oklch(0.55 0.14 28);
  --plot-good: oklch(0.62 0.09 150);
  --plot-quiet: oklch(0.56 0.055 218);

  /* interaction */
  --focus: #cf5d3a;
  --select: #cde4de;
  --select-ink: #10302c;
  --target: rgb(23 107 100 / 0.12);
  --link-line: rgb(23 107 100 / 0.35);

  /* elevation */
  --shadow-card: 0 1px 0 rgb(32 28 20 / 0.04), 0 18px 40px -22px rgb(32 28 20 / 0.28);
  --backdrop: rgb(22 21 19 / 0.42);

  /* progress */
  --track: #e2dccf;

  /* which icon the theme switch shows */
  --icon-sun: none;
  --icon-moon: block;

  /* type */
  --display: Newsreader, "Naskh Urdu", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Naskh Urdu", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --indic: "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Naskh Urdu", var(--sans);
  /* speech in any script: Newsreader for Latin, the system's Devanagari and Urdu faces for the rest */
  --say: Newsreader, "Naskh Urdu", "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Geeza Pro", Georgia, serif;

  /* layout: the reading column, the figures, and the release's charts */
  --measure: 41rem;
  --wide: 58rem;
  --bench: 69.75rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --bar: 3.5rem;
  /* room for the side cord and its number, beside the page */
  --cord-room: 0px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

img,
svg {
  max-width: 100%;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.875rem var(--sans);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

html:not(.js) [data-needs-js] {
  display: none;
}

/* ---------- Controls ---------- */

/* a quiet text button: small capitals, like a running head */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.71875rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.btn:hover {
  color: var(--ink);
  background: var(--paper-sunk);
}

/* a framed button, for the one action a region is about */
.btn--frame {
  border-color: var(--line-strong);
  background: var(--paper-raised);
}

.btn--frame:hover {
  border-color: var(--accent-soft);
  background: var(--paper-raised);
}

.btn__icon {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the theme switch: a square button that shows where a press will take you */
.btn--icon {
  justify-content: center;
  width: 2.25rem;
  padding: 0;
  border-color: var(--line-strong);
  background: var(--paper-raised);
}

.btn--icon:hover {
  border-color: var(--accent-soft);
  background: var(--paper-raised);
}

.btn--icon .btn__icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.5;
}

.btn__icon--sun {
  display: var(--icon-sun);
}

.btn__icon--moon {
  display: var(--icon-moon);
}

/* a key, as printed in a manual */
.key {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3125rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 0.6875rem/1 var(--mono);
  transition: transform 0.1s ease-out;
}

button.key:hover {
  border-color: var(--accent-soft);
}

button.key:active,
.key.is-pressed {
  transform: translateY(1px);
}

/* ---------- Reading progress: two cords, a knot at every section ---------- */

.progress {
  --read: 0;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* across the top edge */
.progress__x {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--track);
}

/* down the right side; shown when there is room beside the page */
.progress__y {
  display: none;
  position: absolute;
  top: calc(var(--bar) + 3rem);
  bottom: 3rem;
  right: 1.375rem;
  width: 2px;
  background: var(--track);
}

.progress__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-strong);
  transform-origin: 0 0;
}

.progress__x > .progress__fill {
  transform: scaleX(var(--read));
}

.progress__y > .progress__fill {
  transform: scaleY(var(--read));
}

/* a knot sits where a section begins, so the spacing shows each section's length */
.progress__knot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--line-strong);
  box-shadow: 0 0 0 2px var(--paper);
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

.progress__x > .progress__knot {
  top: -2px;
  left: calc(var(--at) * 100%);
  margin-left: -3px;
}

.progress__y > .progress__knot {
  top: calc(var(--at) * 100%);
  left: 50%;
  margin: -3px 0 0 -3px;
}

.progress__knot.is-lit {
  background: var(--accent-strong);
}

/* you are here */
.progress__knot.is-current {
  background: var(--warm-strong);
  transform: scale(1.35);
}

/* the percentage rides beside the head of the cord */
.progress__value {
  position: absolute;
  color: var(--muted);
  font: 500 0.6875rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.progress__x > .progress__value {
  top: 0.4375rem;
  left: clamp(0.375rem, calc(var(--read) * 100% - 0.875rem), calc(100% - 2.25rem));
}

.progress__rider {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--read) * 100%));
}

.progress__rider > .progress__value {
  top: 0;
  right: 0.75rem;
  transform: translateY(-50%);
}

@media (min-width: 48rem) {
  :root {
    --cord-room: 3.5rem;
  }

  .progress__y {
    display: block;
  }

  .progress__x > .progress__value {
    display: none;
  }
}

/* on a phone the sections sit close together: the knots become slim ticks */
@media (max-width: 47.99rem) {
  .progress__x > .progress__knot {
    top: 0;
    width: 2px;
    height: 5px;
    margin-left: -1px;
    box-shadow: none;
  }

  .progress__x > .progress__knot.is-current {
    transform: scaleY(1.6);
  }
}

/* where the browser can tie an animation to scrolling, let it draw the cords itself */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes cord-x {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }

    @keyframes cord-y {
      from {
        transform: scaleY(0);
      }
      to {
        transform: scaleY(1);
      }
    }

    @keyframes ride-y {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(100%);
      }
    }

    .progress__x > .progress__fill {
      animation: cord-x auto linear;
      animation-timeline: scroll(root);
    }

    .progress__y > .progress__fill {
      animation: cord-y auto linear;
      animation-timeline: scroll(root);
    }

    .progress__rider {
      animation: ride-y auto linear;
      animation-timeline: scroll(root);
    }
  }
}

/* ---------- Masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--paper-veil);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--bar);
  padding: 0 var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  min-height: 2.75rem;
  color: var(--ink);
  font: 600 0.9375rem/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* five strokes of a code-mixed voice, one per language family */
.wordmark__mark {
  flex: none;
  width: 1.5rem;
  height: 1.125rem;
}

.wordmark__mark rect:nth-child(1) { fill: var(--fam-ia); }
.wordmark__mark rect:nth-child(2) { fill: var(--fam-dr); }
.wordmark__mark rect:nth-child(3) { fill: var(--fam-tb); }
.wordmark__mark rect:nth-child(4) { fill: var(--fam-aa); }
.wordmark__mark rect:nth-child(5) { fill: var(--fam-en); }

.wordmark__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wordmark:hover .wordmark__text {
  color: var(--accent);
}

.masthead__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}

.masthead__nav .btn--icon {
  margin-left: 0.5rem;
}

/* ---------- Page ---------- */

.essay {
  padding: 0 var(--gutter);
}

@media (min-width: 48rem) {
  .essay,
  .colophon {
    padding-right: calc(var(--gutter) + var(--cord-room));
    padding-left: calc(var(--gutter) + var(--cord-room));
  }
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
}

.hero__kicker {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  color: var(--accent);
  font: 600 0.71875rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

.hero__title-main {
  display: block;
  font: 400 clamp(3.1rem, 1.5rem + 6.8vw, 6.25rem)/0.98 var(--display);
  letter-spacing: -0.022em;
}

.hero__title-main em {
  color: var(--accent);
  font-style: normal;
}

.hero__title-sub {
  display: block;
  max-width: 24em;
  margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0;
  color: var(--ink-soft);
  font: 400 clamp(1.3rem, 1rem + 1.25vw, 1.9rem)/1.25 var(--display);
  letter-spacing: -0.005em;
}

.hero__byline {
  margin: clamp(1.5rem, 3vw, 2.125rem) 0 0;
  color: var(--ink-soft);
  font: 400 1.0625rem/1.5 var(--display);
}

/* two groups that never split: who, and when and how long */
.hero__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
}

.hero__byline > span {
  white-space: nowrap;
}

.hero__byline > span + span::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--faint);
}

@media (max-width: 30rem) {
  .hero__byline {
    flex-direction: column;
    align-items: center;
  }

  .hero__byline > span + span::before {
    content: none;
  }
}

.hero__rule {
  max-width: var(--wide);
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--line-strong);
}

/* ---------- Contents ---------- */

/* 1. the card under the opening figure, closed until asked */
.toc-card {
  max-width: var(--measure);
  margin: clamp(2.25rem, 5vw, 3.25rem) auto 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
}

.toc-card > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0 1.25rem;
  color: var(--ink-soft);
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  border-radius: 10px;
}

.toc-card > summary::-webkit-details-marker {
  display: none;
}

.toc-card > summary::before {
  content: "";
  width: 0;
  height: 0;
  border: 0.3125rem solid transparent;
  border-right: 0;
  border-left: 0.4375rem solid currentColor;
  transition: transform 0.18s ease-out;
}

.toc-card[open] > summary::before {
  transform: rotate(90deg);
}

.toc-card > summary:hover {
  color: var(--ink);
}

.toc-card__count {
  margin-left: auto;
  color: var(--muted);
  font: 500 0.6875rem var(--mono);
  letter-spacing: 0.04em;
  text-transform: none;
}

.toc-card__body {
  padding: 0.25rem 1.25rem 1.125rem;
  border-top: 1px solid var(--line);
}

.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc-card .toc-list {
  columns: 2 15rem;
  column-gap: 2rem;
  padding-top: 0.75rem;
}

.toc-list > li {
  counter-increment: toc;
  break-inside: avoid;
}

.toc-link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.4375rem 0.5rem 0.4375rem 0.375rem;
  border-radius: 6px;
  color: var(--ink-soft);
  font: 400 0.9375rem/1.35 var(--sans);
  text-decoration: none;
}

.toc-link::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--faint);
  font: 500 0.6875rem var(--mono);
}

.toc-link:hover {
  background: var(--paper-sunk);
  color: var(--ink);
}

.toc-link[aria-current="true"] {
  color: var(--ink);
}

.toc-link[aria-current="true"]::before {
  color: var(--warm-strong);
}

.toc-card__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  font: 0.8125rem/1.4 var(--sans);
}

.toc-card__keys > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.keys__toggle {
  margin-left: auto;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 0.8125rem var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}

.keys__toggle:hover {
  color: var(--ink);
}

[data-keys].is-off .key {
  opacity: 0.45;
}

/* 2. a quiet index in the left margin, for wide screens, once the essay begins */
.margin-toc {
  display: none;
}

@media (min-width: 90rem) {
  .margin-toc {
    display: block;
    position: fixed;
    top: calc(var(--bar) + 3rem);
    left: max(1.5rem, calc((100vw - var(--wide)) / 2 - 17rem));
    z-index: 5;
    width: 13rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
  }

  .margin-toc.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }
}

.margin-toc__title {
  margin: 0 0 0.75rem 0.375rem;
  color: var(--faint);
  font: 600 0.625rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.margin-toc .toc-link {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  padding: 0.3125rem 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.margin-toc .toc-link:hover {
  background: none;
  color: var(--ink);
}

.margin-toc .toc-link[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

/* 3. the sheet the Contents button opens */
.sheet {
  width: min(24rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  overscroll-behavior: contain;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
}

.sheet::backdrop {
  background: var(--backdrop);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.875rem 0.875rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.sheet__title {
  margin: 0;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sheet__status {
  margin: 0;
  color: var(--muted);
  font: 500 0.6875rem var(--mono);
}

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  overflow-y: auto;
}

.sheet .toc-link {
  min-height: 2.75rem;
  align-items: center;
}

/* rows that carry no number: the release's sections, and where the essay begins */
.toc-list--plain .toc-link::before {
  content: "";
}

.sheet__group {
  margin: 1rem 0 0.25rem 0.375rem;
  color: var(--muted);
  font: 600 0.625rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sheet__group:first-child {
  margin-top: 0.5rem;
}

.sheet .toc-link[aria-current="true"] {
  background: var(--paper-sunk);
  font-weight: 600;
}

/* ---------- Prose ---------- */

.prose {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.66;
  counter-reset: part;
}

/* text keeps to the measure; figures and tables use the full width */
.prose :where(p, ul, ol, blockquote, h2, h3, .equation, .token-strip, .refs__group) {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose :where(p) {
  margin-block: 0;
  text-wrap: pretty;
}

.prose :where(ul, ol) {
  margin-block: 0;
  padding: 0 0 0 1.5em;
  list-style: none;
}

.prose :where(p + p, ul + p, ol + p, .equation + p, .token-strip + p, .table-wrap + p, p + .table-wrap) {
  margin-top: 1.25em;
}

/* a list belongs to the sentence that introduces it */
.prose :where(p + ul, p + ol) {
  margin-top: 0.9em;
}

.prose :where(strong) {
  font-weight: 650;
  color: var(--ink);
}

.prose :where(em) {
  font-style: italic;
}

/* epigraph */
.epigraph {
  padding: 0;
  color: var(--muted);
  font: italic 400 clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem)/1.55 var(--display);
}

.prose .epigraph {
  margin: 0 auto;
}

.epigraph p + p {
  margin-top: 0.9em;
  color: var(--ink);
}

.prose .lede {
  margin-top: 2em;
  color: var(--ink);
  font: 400 clamp(1.25rem, 1.08rem + 0.6vw, 1.4375rem)/1.55 var(--display);
}

.prose .lede strong {
  font-weight: 600;
}

/* sections: a hairline, a number, a title */
.section {
  margin-top: clamp(4.5rem, 9vw, 7rem);
  counter-increment: part;
}

.section__title {
  margin-bottom: 1.1em;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-strong);
  font: 400 clamp(2rem, 1.45rem + 2.2vw, 3rem)/1.06 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section__title::before {
  content: counter(part, decimal-leading-zero);
  display: block;
  margin-bottom: 0.875rem;
  color: var(--warm-strong);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.prose h3 {
  margin-top: 2.3em;
  margin-bottom: 0.7em;
  font: 500 clamp(1.4rem, 1.2rem + 0.75vw, 1.75rem)/1.2 var(--display);
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.prose h3.is-numbered {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: first baseline;
}

.prose h3 .key {
  min-width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: 600 0.8125rem/1 var(--mono);
  transform: translateY(-0.18em);
}

/* links: teal, underlined; citations: teal, underlined only when asked */
.prose a:not(.toc-link) {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
  transition: background-color 0.15s ease-out, text-decoration-color 0.15s ease-out;
}

.prose a.cite {
  text-decoration-color: transparent;
}

.prose a:not(.toc-link):hover,
.prose a.is-open {
  background: var(--accent-wash);
  text-decoration-color: currentColor;
}

/* inline code */
.prose code {
  padding: 0.12em 0.36em;
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font: 450 0.84em var(--mono);
  white-space: nowrap;
}

/* inline maths set in the reading face */
.math {
  white-space: nowrap;
}

var {
  font-style: italic;
}

var.upright {
  font-style: normal;
}

.math sup,
.math sub {
  font-size: 0.72em;
  line-height: 0;
}

/* lists */
.prose li {
  position: relative;
  text-wrap: pretty;
}

.prose li + li {
  margin-top: 0.6em;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.25em;
  top: 0.68em;
  width: 0.36em;
  height: 0.36em;
  border-radius: 1px;
  background: var(--accent-strong);
}

.prose ol {
  padding-left: 2.5em;
  counter-reset: item;
}

.prose ol > li {
  counter-increment: item;
}

.prose ol > li::before {
  content: counter(item);
  position: absolute;
  left: -2.5em;
  top: 0.18em;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: 600 0.75rem/1 var(--mono);
}

/* pull quote: centred between two hairlines, with an orange knot tied into the top one,
   like the knots on the reading cord */
.pullquote {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.25rem) 0 clamp(1.5rem, 3.5vw, 2rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font: italic 400 clamp(1.45rem, 1.15rem + 1.1vw, 2rem)/1.36 var(--display);
  letter-spacing: -0.006em;
  text-align: center;
}

.pullquote::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 1.5px;
  background: var(--warm-strong);
  box-shadow: 0 0 0 5px var(--paper);
}

.prose .pullquote {
  max-width: 38rem;
  margin: clamp(3rem, 6vw, 4rem) auto;
}

/* balance gives up past six lines; pretty still keeps the last word company */
.pullquote p {
  max-width: none;
  text-wrap: pretty;
}

/* ---------- A decoder prompt, token by token ---------- */

.token-strip {
  margin: 1.75em auto;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-sunk);
}

.prose .token-strip {
  margin-block: 1.75em;
}

.token-strip pre {
  margin: 0;
  white-space: normal;
}

.token-strip code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem 0.375rem;
  padding: 0;
  background: none;
  color: var(--ink);
  font: 450 0.84rem/1.2 var(--mono);
  white-space: normal;
}

.token-strip .tok {
  padding: 0.25rem 0.4375rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* the first decision: the language token */
.token-strip .tok--lang {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.token-strip .say {
  padding: 0 0.25rem;
  font: 400 1.0625rem/1.3 var(--indic);
}

/* ---------- Equations ---------- */

.equation {
  margin-block: 1.6em;
  padding: 0.5em 0 0.5em 1.25em;
  border-left: 2px solid var(--accent-soft);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.prose .equation {
  margin-inline: auto;
}

.equation:focus-visible {
  outline-offset: 0;
}

.equation .katex-display {
  margin: 0;
  text-align: left;
}

.equation .katex-display > .katex {
  text-align: left;
}

.equation .katex {
  font-size: 1.1em;
  color: var(--ink);
}

/* ---------- Figures ---------- */

.figure {
  max-width: var(--measure);
  margin: clamp(2.75rem, 6vw, 4rem) auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
}

.figure--wide {
  max-width: var(--wide);
}

/* the opening image is a poster, not a numbered figure */
.figure--poster {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 0;
  border-top: 0;
}

.figure--poster .figure__head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.figure--poster .figure__text {
  margin-inline: auto;
  text-align: center;
}

.figure + .figure {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* the running head of a figure: FIG. n, its title, a line of notes */
.figure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

.figure__num {
  color: var(--accent);
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.figure__title {
  font: 400 1.375rem/1.2 var(--display);
  letter-spacing: -0.005em;
}

.figure__sub {
  flex: 0 0 100%;
  color: var(--muted);
  font: 400 0.75rem/1.5 var(--mono);
}

/* what the figure says, under it */
.figure__text {
  max-width: var(--measure);
  margin: 1.125rem 0 0;
  color: var(--muted);
  font: 0.875rem/1.6 var(--sans);
  text-wrap: pretty;
}

.figure--wide .figure__text {
  margin-inline: 0;
}

.figure__text strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Tables ---------- */

.table-wrap {
  max-width: var(--wide);
  margin: 2.25em auto;
  overflow-x: auto;
  container-type: inline-size;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font: 0.90625rem/1.5 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}

.table :is(th, td) {
  padding: 0.75rem 1.5rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table :is(th, td):last-child {
  padding-right: 0;
}

.table thead th {
  padding-top: 0;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font: 500 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.table tbody th {
  font-weight: 600;
}

.table tbody tr:last-child :is(th, td) {
  border-bottom-color: var(--line-strong);
}

.table code {
  font-size: 0.86em;
  white-space: nowrap;
}

/* the measurement table: right vs wrong */
.table--verdict :is(.is-right, .is-wrong) {
  font-weight: 600;
  white-space: nowrap;
}

.table--verdict .is-right {
  color: var(--accent);
}

.table--verdict .is-wrong {
  color: var(--warm);
}

.table--verdict .unit {
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}

.table--verdict thead .is-right::before,
.table--verdict thead .is-wrong::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4375rem;
  border-radius: 2px;
  background: currentColor;
}

@container (width < 36rem) {
  .table,
  .table :is(tbody, tr, th, td) {
    display: block;
  }

  .table thead {
    display: none;
  }

  .table tbody tr {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--line);
  }

  .table tbody tr:first-child {
    border-top: 1px solid var(--ink);
  }

  .table tbody :is(th, td) {
    padding: 0.1875rem 0;
    border: 0;
  }

  .table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.5rem;
    color: var(--muted);
    font: 500 0.625rem var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .table--verdict :is(.is-right, .is-wrong) {
    white-space: normal;
  }
}

/* ---------- References ---------- */

.prose .refs__group {
  margin-top: 2.5rem;
  margin-bottom: 1.125rem;
  color: var(--muted);
  font: 500 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prose .refs {
  max-width: var(--wide);
  padding: 0;
  columns: 2 22rem;
  column-gap: 3rem;
  font: 0.84375rem/1.55 var(--sans);
  color: var(--ink-soft);
}

.prose .refs > li {
  padding-left: 1.375rem;
  text-indent: -1.375rem;
  break-inside: avoid;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.prose .refs > li + li {
  margin-top: 0.6875em;
}

.prose .refs > li::before {
  content: none;
}

.prose .refs a {
  font-weight: 450;
}

.prose .refs > li:target {
  background: var(--target);
  box-shadow: 0 0 0 0.375rem var(--target);
}

/* ---------- Citation card ---------- */

.cite-card {
  position: fixed;
  inset: auto;
  z-index: 80;
  width: min(24rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 0.875rem/1.5 var(--sans);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.cite-card:not(:popover-open):not(.is-open) {
  display: none;
}

.cite-card__source {
  margin: 0 0 0.375rem;
  color: var(--accent);
  font: 500 0.6875rem var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cite-card__text {
  margin: 0;
  text-wrap: pretty;
}

.cite-card__text em {
  font-style: italic;
}

.cite-card__actions {
  display: flex;
  gap: 1rem;
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
}

.cite-card__actions a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

/* ---------- Colophon ---------- */

.colophon {
  margin: clamp(4.5rem, 9vw, 7rem) 0 0;
  padding: 0 var(--gutter);
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.5rem 0 2.75rem;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font: 0.8125rem/1.6 var(--sans);
}

.colophon p {
  margin: 0;
}

/* ---------- Switching theme: the new one opens from the switch ---------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 0;
}

::view-transition-new(root) {
  z-index: 1;
}

/* ---------- Narrow layouts ---------- */

@media (max-width: 47.99rem) {
  /* the top cord carries the number on a phone: leave a row free for it */
  .js .masthead__inner {
    padding-top: 0.75rem;
  }

  :root {
    --bar: 4.25rem;
  }

  .masthead__nav [data-copy-link],
  .masthead__nav .btn--references {
    display: none;
  }
}

@media (max-width: 30rem) {
  .wordmark {
    font-size: 0.875rem;
  }

  .masthead__nav .btn {
    padding-inline: 0.5rem;
  }

  .equation {
    padding-left: 0.875rem;
  }

  .equation .katex {
    font-size: 0.95em;
  }
}

/* ---------- Print ---------- */

@media print {
  .skip-link,
  .masthead,
  .progress,
  .margin-toc,
  .toc-card,
  .sheet,
  .cite-card,
  .colophon .btn {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .essay {
    padding: 0;
  }

  .prose a:not(.toc-link) {
    color: inherit;
    text-decoration: none;
  }

  .section,
  .figure,
  .table-wrap,
  .pullquote {
    break-inside: avoid-page;
  }

  .section {
    margin-top: 2.5rem;
  }
}

/* ---------- Mono text shows its characters ----------
   JetBrains Mono joins <| and |> into arrows, and every `font` shorthand above
   quietly turns those ligatures back on; this rule comes last to switch them off. */

html :is(code, pre, kbd, samp, .key, .figure__sub, .progress__value, .sheet__status,
  .toc-card__count, .table thead th, .refs__group,
  .cite-card__source, .token-strip, .token-strip *) {
  font-variant-ligatures: none;
}

html .toc-link::before,
html .section__title::before,
html .table tbody td::before {
  font-variant-ligatures: none;
}