/* ==========================================================================
   The Lorenz Library

   A sheet of paper laid over a moving background. The Lorenz attractor
   fills the screen behind; the text sits on a sheet opaque enough that the
   background can never upstage it (Butterick), while its lobes open out
   either side. Body text was decided first: Newsreader at 20px, about 66
   characters to the line (Bringhurst's ideal), leading at 145%. The sheet's
   outer margin carries the sidenotes, as Tufte puts them.

   Two voices, never mixed: the serif is the text; the monospace is the
   apparatus — labels, numbers, navigation, captions' data.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-standard-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-standard-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The text block and its margin. */
  --measure: 35rem;            /* ≈ 66 characters of Newsreader at 20px */
  --note: 12rem;               /* the outer margin's note column */
  --gutter: 2.25rem;
  --block: calc(var(--measure) + var(--gutter) + var(--note));
  --sheet-pad: clamp(1.25rem, 4vw, 3.5rem);

  /* The background figure: vertical focus (fraction of the screen), and
     how much of the width and height it may take. */
  --bg-focus-y: 0.5;
  --bg-width: 0.98;
  --bg-height: 1.15;

  /* Paper and ink. */
  --paper: #f3f0e8;
  --paper-2: #e9e4d8;
  --ink: #1a1a1c;
  --ink-2: #4b4944;
  --ink-3: #85817a;
  --rule: #d3ccbe;
  --accent: #b3361b;             /* a librarian's stamp */

  /* Plate I: always dark, with its own light-coloured trajectories. */
  --plate: #0b0e13;
  --plate-ink: #ded7ca;
  --plate-dim: #7c838d;
  --plate-rule: #232933;
  --plate-traj-a: 244, 235, 216;
  --plate-traj-b: 255, 104, 58;
  --plate-traj-c: 58, 200, 186;

  /* The sheet, and the table it lies on. */
  --table: #e6e0d4;
  --sheet: rgba(245, 242, 235, 0.8);
  --sheet-edge: rgba(90, 75, 60, 0.14);
  --sheet-shadow: 0 30px 80px -40px rgba(60, 45, 30, 0.35);

  /* The background, in ink: three trajectories over a faint atlas. */
  --traj-a: 58, 50, 44;
  --traj-b: 179, 54, 27;
  --traj-c: 32, 122, 114;
  --atlas: 58, 50, 44;
  --atlas-alpha: 0.22;
  --trail-alpha: 0.95;
  --trail-blend: source-over;

  /* The catalogue card. */
  --card: #fbf9f3;
  --card-line: rgba(70, 110, 165, 0.16);
  --card-red: rgba(196, 58, 36, 0.5);
  --card-shadow: 0 1px 0 rgba(40, 30, 20, 0.05), 0 18px 30px -22px rgba(40, 30, 20, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111214;
    --paper-2: #1a1b1e;
    --ink: #e9e5dc;
    --ink-2: #b4afa5;
    --ink-3: #7d7a73;
    --rule: #2c2d31;
    --accent: #ff7b50;
    --table: #0a0c10;
    --sheet: rgba(18, 19, 22, 0.8);
    --sheet-edge: rgba(255, 255, 255, 0.07);
    --sheet-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
    --traj-a: 244, 235, 216;
    --traj-b: 255, 104, 58;
    --traj-c: 58, 200, 186;
    --atlas: 244, 235, 216;
    --atlas-alpha: 0.24;
    --trail-alpha: 1;
    --trail-blend: lighter;
    --card: #18191c;
    --card-line: rgba(130, 165, 215, 0.1);
    --card-red: rgba(255, 115, 80, 0.4);
    --card-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 30px -22px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111214;
  --paper-2: #1a1b1e;
  --ink: #e9e5dc;
  --ink-2: #b4afa5;
  --ink-3: #7d7a73;
  --rule: #2c2d31;
  --accent: #ff7b50;
  --table: #0a0c10;
  --sheet: rgba(18, 19, 22, 0.8);
  --sheet-edge: rgba(255, 255, 255, 0.07);
  --sheet-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  --traj-a: 244, 235, 216;
  --traj-b: 255, 104, 58;
  --traj-c: 58, 200, 186;
  --atlas: 244, 235, 216;
  --atlas-alpha: 0.24;
  --trail-alpha: 1;
  --trail-blend: lighter;
  --card: #18191c;
  --card-line: rgba(130, 165, 215, 0.1);
  --card-red: rgba(255, 115, 80, 0.4);
  --card-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 30px -22px rgba(0, 0, 0, 0.9);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;              /* 20px: Butterick's 15–25px band */
  line-height: 1.45;               /* 145%: the top of his 120–145% */
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg, canvas { max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 40;
  padding: 0.5rem 0.8rem;
  background: var(--paper);
  font: 0.8rem var(--mono);
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

kbd {
  font: 0.7em var(--mono);
  padding: 0.05em 0.35em;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* The apparatus voice. */
.kicker,
.running-head,
.entry__line,
.toc__no,
.toc__stage,
.section-head,
.fig-label,
.foot {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- the background, and the sheet laid over it ---------------------------- */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.folio {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) 1.25rem clamp(2rem, 8vh, 6rem);
  min-height: 100vh;
}

.page {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--block) + 2 * var(--sheet-pad)));
  padding: 0 var(--sheet-pad);
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: 2px;
  box-shadow: var(--sheet-shadow);
}

.text {
  container: text / inline-size;
  flex: 1;
  width: 100%;
  padding-bottom: 6rem;
}

/* --- running head ----------------------------------------------------------- */
.running-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 2.25rem 0 0;
  margin-bottom: clamp(3.5rem, 9vh, 6.5rem);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.running-head__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.35rem;
}
.running-head__nav a,
.running-head__button {
  color: var(--ink-3);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.running-head__nav a:hover,
.running-head__button:hover { color: var(--accent); }
.running-head__nav a[aria-current="page"] { color: var(--ink); }
.running-head__button kbd { font-size: 0.95em; margin-left: 0.2em; text-transform: none; }

/* --- Plate I: the attractor as an instrument, set in an entry --------------
   Dark in both themes, like a photographic plate bound into a book. It
   spans the whole text block, margin included. */
.prose > .plate,
.plate {
  position: relative;
  width: 100cqi;
  max-width: none;
  height: clamp(30rem, 82vh, 46rem);
  margin: 2.25rem 0;
  border: 1px solid var(--plate-rule);
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 42%, color-mix(in srgb, var(--plate) 88%, #1d2a3a) 0%, var(--plate) 70%);
  color: var(--plate-ink);
}
.plate canvas[data-plate-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.plate__bar {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.9rem 2rem 1rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plate-dim);
}
.plate__controls { display: flex; gap: 0.5rem; }
.plate__controls button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--plate-ink);
  background: transparent;
  border: 1px solid var(--plate-rule);
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.plate__controls button:hover { border-color: var(--plate-ink); }
.plate__controls button:focus-visible { outline-color: rgb(var(--plate-traj-b)); }

.plate__caption {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  padding: 1.25rem 2rem 1.9rem;
  background: linear-gradient(to top, var(--plate) 72%, transparent);
}
.plate__title {
  margin: 0 0 1rem;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--plate-ink);
}
.plate__title em { font-style: italic; }

.traj {
  display: inline-block;
  min-width: 1.2em;
  padding: 0 0.28em;
  border-radius: 2px;
  font: 500 0.78em/1.35 var(--mono);
  text-align: center;
  color: #0b0e13;
  font-style: normal;
}
.traj--a { background: rgb(var(--plate-traj-a)); }
.traj--b { background: rgb(var(--plate-traj-b)); }
.traj--c { background: rgb(var(--plate-traj-c)); }

.readout {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.28rem 1.1rem;
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--plate-rule);
  font: 0.74rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.readout div { display: contents; }
.readout dt { color: var(--plate-dim); }
.readout dd { margin: 0; color: var(--plate-ink); white-space: nowrap; display: flex; align-items: center; gap: 0.75rem; }
.spark { width: 8.5rem; height: 1.15rem; flex: none; }

/* --- entry heads ------------------------------------------------------------- */
.kicker {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker__call { color: var(--accent); }
.kicker__sep { margin: 0 0.6em; }

.entry__head { margin-bottom: 3rem; }
.entry__title {
  margin: 0;
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.9rem);
  font-weight: 420;
  line-height: 1.03;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 17em;
}
.entry__dek {
  margin: 1rem 0 0;
  max-width: var(--measure);
  font-size: 1.32rem;
  line-height: 1.38;
  font-style: italic;
  color: var(--ink-2);
  text-wrap: pretty;
}
.entry__dek a { text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.entry__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  margin: 1.6rem 0 0;
  padding-top: 0.8rem;
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry__line .stage { color: var(--ink); }

/* --- prose ------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose :where(p, ul, ol, pre, table, figure, blockquote, .footnotes) { margin: 0; }

/* Book paragraphs: indented, no space between (Bringhurst). The first after
   a heading or a break stays flush. */
.prose p { hyphens: auto; -webkit-hyphens: auto; hanging-punctuation: first last; }
.prose p + p { text-indent: 1.35em; }

.prose > :is(ul, ol, pre, table, blockquote, .inline-aside, .epigraph, hr, .footnotes) { margin-top: 1.35rem; margin-bottom: 1.35rem; }

.prose .heading-wrap { position: relative; margin-top: 2.6rem; margin-bottom: 0.55rem; }
.prose > .heading-wrap:first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { margin: 0; scroll-margin-top: 2rem; }
.prose h2 {
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.prose h3 { font-size: 1.3rem; font-weight: 400; font-style: italic; }
.prose h4 {
  font: 500 0.74rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.heading-wrap .header-anchor {
  position: absolute;
  top: 0.15em;
  right: 100%;
  padding-right: 0.5rem;
  font: 0.8rem var(--mono);
  color: var(--ink-3);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.heading-wrap:hover .header-anchor,
.heading-wrap .header-anchor:focus-visible { opacity: 1; }

/* Links: underlined in the stamp colour, which darkens on approach. */
.prose a,
.entry__dek a,
.toc__dek a,
.card a,
.neighbourhood a,
.map a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: color 0.12s, text-decoration-color 0.12s;
}
.prose a:hover,
.entry__dek a:hover,
.card a:hover,
.neighbourhood a:hover,
.map a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.prose a.wikilink { text-decoration-style: solid; }
.prose a.external::after {
  content: "°";
  color: var(--accent);
  margin-left: 0.05em;
}

.prose em { font-style: italic; }
.prose strong { font-weight: 620; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: 0.3rem; }
.prose li::marker { color: var(--ink-3); font-family: var(--mono); font-size: 0.8em; }

.prose blockquote {
  padding-left: 1.35em;
  color: var(--ink-2);
}
.prose blockquote p + p { text-indent: 1.35em; }

.epigraph { text-align: left; font-style: italic; padding-left: 0 !important; }
.epigraph cite {
  display: block;
  margin-top: 0.5rem;
  font: normal 0.72rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose hr { border: 0; margin: 2.4rem 0; text-align: left; }
.prose hr::before { content: "§"; color: var(--ink-3); }

code, pre, samp { font-family: var(--mono); font-size: 0.8em; font-variant-numeric: normal; }
.prose :not(pre) > code { padding: 0.05em 0.25em; background: var(--paper-2); border-radius: 2px; }
.prose pre {
  padding: 1rem 1.2rem;
  background: var(--paper-2);
  overflow-x: auto;
  line-height: 1.55;
  font-size: 0.8rem;
}
.prose pre code { font-size: inherit; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
  line-height: 1.35;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.8rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.prose th {
  font: 500 0.68rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--ink);
}
.prose td:first-child { font-style: italic; white-space: nowrap; }

.inline-aside {
  display: block;
  padding: 0.9rem 0 1rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.inline-aside p + p { text-indent: 1.35em; }
.aside-label {
  display: block;
  margin-bottom: 0.4rem;
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Displayed equations, in MathML: typeset by the browser, no library. */
.prose > .equations {
  margin: 1.6rem 0 1.8rem;
  padding: 1.1rem 0 0.9rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.equations math {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--ink);
}
/* Variables in the text face's own italic (mathvariant="normal" stops the
   browser substituting Unicode maths italics, which Newsreader lacks), and
   full-size display fractions rather than the compact in-table style. */
.equations mi { font-style: italic; }
.equations mtd { math-style: normal; padding: 0.4rem 0.2rem; }
.equations mo { padding: 0 0.12em; }
.equations mtd:first-child { text-align: right; }
.equations mtd:last-child { text-align: left; }
.equations figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font: 0.72rem var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* --- sidenotes: in the outer margin when the text column has room ---------- */
.sidenote-toggle { display: none; }
.sidenote-number {
  font: 500 0.62rem var(--mono);
  vertical-align: 0.6em;
  line-height: 0;
  color: var(--accent);
  cursor: pointer;
  padding: 0 0.1em 0 0.15em;
}
.sidenote {
  display: none;
  margin: 0.6rem 0 0.9rem;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 1px solid var(--accent);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-indent: 0;
}
.sidenote-toggle:checked + .sidenote { display: block; }
.sidenote-index {
  font: 500 0.62rem var(--mono);
  color: var(--accent);
  vertical-align: 0.4em;
  margin-right: 0.3em;
}
.sidenote p { display: inline; margin: 0; }
.sidenote p + p { display: block; text-indent: 0; margin-top: 0.4rem; }

@container text (min-width: 49rem) {
  .prose .sidenote {
    display: block;
    float: right;
    clear: right;
    width: var(--note);
    margin: 0.2rem calc(-1 * (var(--note) + var(--gutter))) 1rem 0;
    padding: 0;
    border: 0;
    font-size: 0.88rem;
    line-height: 1.38;
  }
  .prose > .heading-wrap { clear: right; }
}

.has-sidenotes .footnotes { display: none; }
.footnotes { border-top: 1px solid var(--rule); padding-top: 1rem; font-size: 1rem; color: var(--ink-2); }
.footnotes-title {
  font: 500 0.7rem var(--mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.6rem !important;
}

/* --- the apparatus: catalogue card and neighbourhood ----------------------- */
.apparatus {
  display: grid;
  gap: 2.5rem;
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink);
  max-width: calc(var(--measure) + var(--gutter) + var(--note));
}
@container text (min-width: 46rem) {
  .apparatus { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.card {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.5rem 3rem 5.25rem;
  min-height: 17rem;
  font: 0.78rem/1.5rem var(--mono);
  color: var(--ink-2);
  background:
    linear-gradient(to bottom, transparent 2.95rem, var(--card-red) 2.95rem, var(--card-red) calc(2.95rem + 1px), transparent calc(2.95rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.5rem - 1px), var(--card-line) calc(1.5rem - 1px), var(--card-line) 1.5rem),
    var(--card);
  background-position: 0 0, 0 1.5rem, 0 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
  transform: rotate(-0.4deg);
}
.card p { margin: 0; }
.card p + p { margin-top: 0; }
.card b { color: var(--ink); font-weight: 500; }
.card__head { color: var(--ink-3); text-align: right; letter-spacing: 0.04em; margin-bottom: 1.5rem !important; }
.card__call {
  position: absolute;
  left: 1.4rem;
  top: 4.5rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.card__tracings { margin-top: 1.5rem !important; }
.card__label { color: var(--ink-3); margin-right: 0.3em; }
.card__label::after { content: ":"; }
.card a { text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.card__hole {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.neighbourhood,
.map { margin: 0; }
.neighbourhood .graph-canvas {
  aspect-ratio: 4 / 3;
}
.map .graph-canvas {
  aspect-ratio: 4 / 3;
  max-height: 75vh;
}
.graph-canvas {
  display: block;
  width: 100%;
  background: var(--paper-2);
  border-top: 1px solid var(--ink);
  cursor: grab;
  touch-action: none;
}
.graph-canvas:active { cursor: grabbing; }
.neighbourhood figcaption,
.map figcaption {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.fig-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.4em;
}

/* --- title page and contents ------------------------------------------------ */
.title-page { margin-bottom: 3.5rem; }
.display {
  margin: 0;
  font-size: clamp(3.4rem, 1.4rem + 6.5vw, 7.2rem);
  font-weight: 360;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.display em { font-style: italic; font-weight: 300; }
.display-sub {
  margin: 1.2rem 0 0;
  font-size: 1.45rem;
  font-style: italic;
  color: var(--ink-2);
}
.foreword { margin-bottom: 4.5rem; }

.section-head {
  margin: 0 0 1.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.part {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 2.4rem 0 0.6rem;
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
}
.part:first-of-type { margin-top: 0; }
.part__num {
  min-width: 2.25rem;
  font: 500 0.72rem var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.toc { list-style: none; margin: 0; padding: 0; max-width: calc(var(--measure) + 6rem); }
.toc__item { padding: 0.55rem 0 0.7rem; border-bottom: 1px solid var(--rule); }
.toc__link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  color: var(--ink);
  text-decoration: none;
}
.toc__no { font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.04em; }
.toc__line { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.toc__title {
  font-size: 1.3rem;
  line-height: 1.25;
  transition: color 0.12s;
}
.toc__leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--ink-3);
  transform: translateY(-0.28em);
  opacity: 0.7;
}
.toc__stage {
  flex: none;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc__link:hover .toc__title { color: var(--accent); }
.toc__link:hover .toc__no { color: var(--accent); }
.toc__dek {
  margin: 0.15rem 0 0 3.25rem;
  max-width: var(--measure);
  font-size: 1.02rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-2);
}
.empty-note { font-style: italic; color: var(--ink-3); }

/* Subject index. */
.letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: -1rem 0 3rem;
  max-width: calc(var(--measure) + 6rem);
  font-size: 1.1rem;
  font-style: italic;
}
.letters a { color: var(--ink-2); text-decoration: none; }
.letters a:hover { color: var(--accent); }
.letters sup { font: normal 0.6rem var(--mono); color: var(--ink-3); margin-left: 0.15em; }

.subject-index {
  columns: 2 16rem;
  column-gap: var(--gutter);
  max-width: calc(var(--measure) + var(--gutter) + var(--note));
}
.subject { break-inside: avoid; margin-bottom: 2rem; scroll-margin-top: 2rem; }
.subject__head {
  margin: 0 0 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
}
.subject ul { list-style: none; margin: 0; padding: 0; }
.subject li { padding: 0.2rem 0; line-height: 1.3; }
.subject a { display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; color: var(--ink-2); text-decoration: none; }
.subject a:hover { color: var(--accent); }
.subject:target .subject__head { color: var(--accent); }

/* --- foot --------------------------------------------------------------------- */
.foot {
  padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot p { margin: 0; }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* --- search ------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 1rem 2rem;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.overlay[hidden] { display: none; }
.search__box {
  width: min(40rem, 100%);
  padding: 1.4rem 1.6rem 1rem;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  box-shadow: var(--card-shadow), 0 0 0 1px var(--rule);
}
.search__label {
  display: block;
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.search__input {
  width: 100%;
  margin: 0.4rem 0 0.2rem;
  padding: 0.4rem 0 0.6rem;
  font: italic 1.6rem var(--serif);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  outline: none;
}
.search__input::placeholder { color: var(--ink-3); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__results { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.search__results:empty { display: none; }
.search__result a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  padding: 0.8rem 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.search__result[aria-selected="true"] a { background: linear-gradient(to right, color-mix(in srgb, var(--accent) 9%, transparent), transparent 80%); }
.search__call { font: 0.7rem/2.2 var(--mono); color: var(--accent); padding-left: 0.4rem; }
.search__title { display: block; font-size: 1.2rem; line-height: 1.25; }
.search__where { display: block; margin-top: 0.15rem; font: 0.66rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.search__snippet { display: block; margin-top: 0.3rem; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.search__result mark { background: none; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.search__empty { margin: 1rem 0 0.5rem; font-style: italic; color: var(--ink-3); }
.search__hint { margin: 0.8rem 0 0; font: 0.64rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* --- narrow screens: the sheet fills the width; on the home page it sits
   lower, so the background opens the site like a cover. ---------------- */
@media (max-width: 48rem) {
  :root { --bg-focus-y: 0.2; --bg-width: 1.12; --bg-height: 0.4; }
  .folio { padding: 0.75rem 0.5rem 3rem; }
  .folio--home { padding-top: 40svh; }
  .running-head { padding-top: 1.4rem; margin-bottom: 3rem; }
  .text { padding-bottom: 4rem; }
}

@media (max-width: 34rem) {
  body { font-size: 1.1875rem; }
  .plate { height: clamp(30rem, 78svh, 38rem); }
  .plate__title { font-size: 0.9rem; }
  .plate__bar { padding: 1.1rem 1.1rem 0.8rem; }
  .plate__caption { padding: 1rem 1.1rem 1.2rem; }
  .running-head__nav { gap: 0.35rem 1rem; }
  .card { padding-left: 1.4rem; padding-top: 1.5rem; transform: none; }
  .card__call { position: static; margin-bottom: 0; }
  .card__call br { display: none; }
  .toc__stage { display: none; }
  .toc__dek { margin-left: 3.25rem; }
}

@media print {
  .background, .running-head__nav, .overlay, .skip-link { display: none !important; }
  .folio { display: block; padding: 0; }
  .page { border: 0; box-shadow: none; background: none; width: auto; }
  body { background: #fff; color: #000; }
}