/* Layout concept: a mathematical manuscript (SGA-style exposés) charted like a sea —
   one reading column with marginalia on the right, a sticky table of exposés on the left,
   interactive figures breaking out across text + margin. */
:root {
  /* colour — light: cool chart paper, Prussian ink, tidal teal, ochre sounding marks */
  --paper: #f2f4f1;
  --paper-2: #e8ece7;
  --paper-3: #dde3dd;
  --ink: #13233a;
  --ink-2: #46566a;
  --ink-3: #5e6c7b;          /* 4.9:1 on paper, 4.5:1 on paper-2 (AA for the small mono labels) */
  --rule: #c7d0cc;
  --tide: #0e7385;
  --tide-soft: rgba(14, 115, 133, 0.12);
  --ochre: #a8720c;
  --ochre-soft: rgba(168, 114, 12, 0.14);
  --seal: #a3392b;          /* semantic: obstruction / not mergeable */
  --seal-soft: rgba(163, 57, 43, 0.12);
  --moss: #3c7a3a;          /* semantic: holds / mergeable */
  --moss-soft: rgba(60, 122, 58, 0.13);
  /* text-only variants of the semantic hues, AA on their own soft fills */
  --ochre-ink: #855806;
  --moss-ink: #356c33;
  --seal-ink: #a3392b;
  --shadow: 0 1px 2px rgba(19, 35, 58, 0.06), 0 8px 24px rgba(19, 35, 58, 0.07);

  /* categorical series — validated for both grounds (see dataviz notes in js/core.js) */
  --c-additive: #0e7385;
  --c-multiplicative: #5b4bb7;
  --c-architectural: #b0700f;
  --c-augmentation: #b8456b;
  --c-selective: #3c7a3a;
  --c-optimizer: #4f6d8f;
  --c-composition: #8a5a3c;
  --c-hybrid: #7a7f87;

  /* type */
  --f-display: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --f-body: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Charter", Georgia, serif;
  --f-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;   /* labels, controls, chips */
  --f-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1.0625rem;
  --fs-body: 1.125rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: clamp(2.1rem, 4.2vw, 3.1rem);
  --fs-hero: clamp(2.9rem, 8.2vw, 6.6rem);
  --lh-body: 1.6;
  --w-body: 400;
  --w-head: 600;

  /* layout */
  --text-w: 38.5rem;
  --margin-w: 15rem;
  --gap: 2.5rem;
  --toc-w: 14rem;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a121c;
    --paper-2: #101b28;
    --paper-3: #172435;
    --ink: #e3e9ee;
    --ink-2: #a3b0bd;
    --ink-3: #7d8b99;
    --w-body: 430;
    --rule: #24344a;
    --tide: #4cc3cf;
    --tide-soft: rgba(76, 195, 207, 0.13);
    --ochre: #e2b04c;
    --ochre-soft: rgba(226, 176, 76, 0.14);
    --seal: #ec7a66;
    --seal-soft: rgba(236, 122, 102, 0.14);
    --moss: #7cc276;
    --moss-soft: rgba(124, 194, 118, 0.14);
    --ochre-ink: #e2b04c;
    --moss-ink: #7cc276;
    --seal-ink: #ec7a66;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --c-additive: #4cc3cf;
    --c-multiplicative: #9d8cf0;
    --c-architectural: #e2a64a;
    --c-augmentation: #ec7fa3;
    --c-selective: #7cc276;
    --c-optimizer: #8fb0d6;
    --c-composition: #c99a74;
    --c-hybrid: #a7adb5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a121c;
  --paper-2: #101b28;
  --paper-3: #172435;
  --ink: #e3e9ee;
  --ink-2: #a3b0bd;
  --ink-3: #7d8b99;
  --w-body: 430;
  --rule: #24344a;
  --tide: #4cc3cf;
  --tide-soft: rgba(76, 195, 207, 0.13);
  --ochre: #e2b04c;
  --ochre-soft: rgba(226, 176, 76, 0.14);
  --seal: #ec7a66;
  --seal-soft: rgba(236, 122, 102, 0.14);
  --moss: #7cc276;
  --moss-soft: rgba(124, 194, 118, 0.14);
  --ochre-ink: #e2b04c;
  --moss-ink: #7cc276;
  --seal-ink: #ec7a66;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --c-additive: #4cc3cf;
  --c-multiplicative: #9d8cf0;
  --c-architectural: #e2a64a;
  --c-augmentation: #ec7fa3;
  --c-selective: #7cc276;
  --c-optimizer: #8fb0d6;
  --c-composition: #c99a74;
  --c-hybrid: #a7adb5;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--tide); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
/* glossary links: the first use of an unfamiliar term in an exposé points to its appendix entry */
a.gloss { color: inherit; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a.gloss:hover, a.gloss:focus-visible { color: var(--tide); text-decoration-color: var(--tide); }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--ochre-soft); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: var(--w-head); line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0 0 1.05em; }
em, i { font-style: italic; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }
code, kbd, samp, pre { font-family: var(--f-mono); font-size: 0.84em; }
code { background: var(--paper-2); padding: 0.08em 0.32em; border-radius: 3px; }
pre { background: var(--paper-2); padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; border: 1px solid var(--rule); }
pre code { background: none; padding: 0; }
.mono { font-family: var(--f-mono); }
.num { font-variant-numeric: tabular-nums; }
.label {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.muted { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding-block: 0.2em; max-width: 100%; }
mjx-container { color: inherit; }
/* MathJax's hidden MathML copy is absolutely positioned at its natural width; on a phone a long inline
   formula then widens the page (the 390px layout used to scroll to 493px). Clip it to its container. */
mjx-container { position: relative; }
body mjx-assistive-mml { max-width: 100% !important; }
/* Math keeps a readable size. The global svg max-width scales a formula wider than its box down to fit:
   fine for a slightly wide display on a desktop, but on a phone display math fell to 7px, and inline
   math in a table cell fell to half size at any width. Table cells now grow (the table scrolls, as the
   rank and atlas tables already did), and on a phone display math is set at 94% and scrolls sideways,
   with a soft edge on the side that has more. Figures and the atlas cards size their own formulas. */
:is(td, th) mjx-container:not([data-figure] *) > svg { max-width: none; }
mjx-container[display="true"]:not([data-figure] *, .method-card *) {
  --mj-bg: var(--paper);
  background:
    linear-gradient(90deg, var(--mj-bg) 30%, transparent) left / 1.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--mj-bg) 30%, transparent) right / 1.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) left / 0.6rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) right / 0.6rem 100% no-repeat scroll;
}
@media (max-width: 600px) {
  mjx-container[display="true"]:not([data-figure] *, .method-card *) { font-size: 94%; }
  mjx-container[display="true"]:not([data-figure] *, .method-card *) > svg { max-width: none; }
}
.env mjx-container[display="true"]:not([data-figure] *) { --mj-bg: var(--paper-2); }
.env:is(.analogy, .example) mjx-container[display="true"]:not([data-figure] *) { --mj-bg: var(--paper); }
.tldr mjx-container[display="true"] { --mj-bg: var(--tldr-bg); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 16px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar .brand { justify-self: start; font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.topbar .brand b { font-weight: 600; color: var(--tide); }
.topbar .brand .hy { font-family: var(--f-display); font-weight: 500; }
.topbar nav { display: flex; gap: 1.05rem; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  text-decoration: none; white-space: nowrap; padding: 0.3rem 0 0.2rem; border-bottom: 1px solid transparent;
}
.topbar nav a:hover { color: var(--tide); }
.topbar nav a.active { color: var(--tide); border-bottom-color: currentColor; }
/* narrower than the full row of exposés: brand and theme on one line, the exposés on a scrolling line below */
@media (max-width: 1239px) {
  html { scroll-padding-top: 5.6rem; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; padding-bottom: 0; }
  .topbar nav {
    grid-column: 1 / -1; grid-row: 2; gap: 1.1rem; margin-inline: -16px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .topbar nav a { padding: 0.35rem 0 0.4rem; }
  .topbar nav::after { content: ""; flex: none; width: 12px; }
}
.theme-toggle {
  flex: none; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2);
  font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border-radius: 999px; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

.skip-link {
  position: absolute; left: 16px; top: -3rem; z-index: 60; padding: 0.45rem 0.8rem; border-radius: 4px;
  background: var(--ink); color: var(--paper); font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- page grid ---------- */
.page { padding-inline: 16px; }
.atlas {
  max-width: calc(var(--text-w) + var(--gap) + var(--margin-w));
  margin-inline: auto;
}
.prose { max-width: var(--text-w); }
@media (min-width: 1100px) {
  .prose { position: relative; }
}
@media (min-width: 1360px) {
  .atlas { padding-left: calc(var(--toc-w) + var(--gap)); max-width: calc(var(--toc-w) + 2 * var(--gap) + var(--text-w) + var(--margin-w)); }
}

/* exposé table of contents (wide screens) */
.toc { display: none; }
@media (min-width: 1360px) {
  .toc {
    display: block; position: fixed; top: 5.2rem; width: var(--toc-w);
    opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
    left: max(16px, calc((100vw - (var(--toc-w) + 2 * var(--gap) + var(--text-w) + var(--margin-w))) / 2));
    font-family: var(--f-ui); font-size: var(--fs-xs); line-height: 1.5;
  }
  .toc.show { opacity: 1; visibility: visible; }
  .toc ol { list-style: none; margin: 0; padding: 0 0 0 0.9rem; display: grid; gap: 0.45rem; border-left: 1px solid var(--rule); }
  .toc a { position: relative; color: var(--ink-2); text-decoration: none; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.2rem; }
  .toc a .n { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .toc a:hover, .toc a.active { color: var(--ink); }
  .toc a.active .n { color: var(--tide); }
  .toc a.active::before { content: ""; position: absolute; left: calc(-0.9rem - 1px); top: 0.1em; bottom: 0.1em; width: 2px; background: var(--tide); }
}

/* sidenotes: Tufte-style floats into the right margin on wide screens */
.note {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--rule); padding: 0.1rem 0 0.1rem 0.8rem; margin: 0.4rem 0 1.2rem;
}
.note .label { display: block; margin-bottom: 0.15rem; }
@media (min-width: 1100px) {
  .note {
    float: right; clear: right; width: var(--margin-w);
    margin-right: calc(-1 * (var(--margin-w) + var(--gap)));
    margin-top: 0.3rem; margin-bottom: 1rem; border-left: 0; padding-left: 0;
  }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero canvas.sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .hero-inner {
  position: relative; z-index: 2; max-width: 74rem; margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7.5rem) 16px clamp(3rem, 7vw, 5.5rem);
  display: grid; gap: 1.6rem;
}
.hero .kicker { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); }
.hero h1 { font-size: var(--fs-hero); font-weight: 500; letter-spacing: -0.015em; line-height: 0.98; max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--tide); }
.hero .dek { font-size: clamp(1.15rem, 2vw, 1.45rem); max-width: 40rem; color: var(--ink-2); line-height: 1.5; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-family: var(--f-ui); font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ---------- exposé sections ---------- */
.expose { padding-block: clamp(3rem, 7vw, 5.5rem) 1rem; border-top: 1px solid var(--rule); }
.expose:first-of-type { border-top: 0; }
.expose-head { display: grid; gap: 0.7rem; margin-bottom: 1.9rem; max-width: var(--text-w); }
.expose-head .label { color: var(--tide); }
.expose-head h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.expose-head .summary { font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-2); font-style: italic; }
.prose h3 { font-size: var(--fs-xl); margin: 2.6rem 0 0.9rem; }
.prose h4 { font-family: var(--f-body); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.01em; margin: 1.8rem 0 0.5rem; }
.prose h4 .muted { font-weight: var(--w-body); font-style: italic; letter-spacing: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.35em; }
/* epigraph: set small and to the right of the column, as in a manuscript */
.epigraph {
  max-width: 27rem; margin: 0 0 2.1rem max(0px, min(var(--text-w) - 27rem, 100% - 27rem));
  padding: 0; font-size: var(--fs-md); line-height: 1.5; font-style: italic; color: var(--ink-2);
}
.epigraph p { margin: 0; }
.epigraph footer { font-style: normal; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.04em; margin-top: 0.45rem; color: var(--ink-2); }
.epigraph footer em { font-family: var(--f-body); font-size: 1.1em; letter-spacing: 0; }

/* ---------- theorem environments ---------- */
.env { margin: 1.6rem 0; padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); }
.env > .env-head { font-family: var(--f-body); font-variant: small-caps; letter-spacing: 0.05em; font-weight: 650; margin-right: 0.35em; }
.env > .env-head .env-name { font-variant: normal; font-weight: var(--w-body); font-style: normal; letter-spacing: 0; color: var(--ink-2); }
.env.theorem, .env.proposition, .env.corollary, .env.lemma, .env.observation { border-left: 3px solid var(--tide); }
.env.theorem .env-body, .env.proposition .env-body, .env.corollary .env-body, .env.lemma .env-body { font-style: italic; }
.env.observation { border-left-style: dotted; }
.env.definition { border-left: 3px solid var(--ochre); }
.env.analogy { border-left: 3px dashed var(--ink-3); background: transparent; }
.env.example { background: transparent; border-style: dashed; }
.env.remark { border-left: 3px solid var(--ink-3); }
.env p:last-child { margin-bottom: 0; }
/* a block continuation of the statement ("(b) …", "Two methods are …") starts a new paragraph */
.env > .env-body + div.env-body { margin-top: 1.05em; }
.env > .env-body:has(> mjx-container[display="true"]:last-child) + div.env-body { margin-top: 0; }
.env code { background: var(--paper); }
.env .table-wrap code { background: var(--paper-2); }
.ex-card code { background: var(--paper); }
.env .table-wrap, .env table { font-style: normal; }   /* tables stay upright inside italic statements */
.env .table-wrap { background-color: var(--paper); }
.proof { margin: -0.6rem 0 1.6rem; padding: 0.4rem 1.15rem 0; font-size: 0.97em; }
.proof > summary { cursor: pointer; font-style: italic; color: var(--ink-2); list-style: none; }
.proof > summary::-webkit-details-marker { display: none; }
.proof > summary::before { content: "Proof. "; font-style: italic; color: var(--ink); }
.proof[open] > summary { margin-bottom: 0.4rem; }
.proof .qed { display: block; text-align: right; color: var(--ink-3); }
.explains { margin: -0.4rem 0 1.8rem; padding-left: 1.15rem; color: var(--ink-2); }
.explains::before { content: "What this explains"; display: block; margin-bottom: 0.2rem; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); }

/* ---------- figures ---------- */
.figure { margin: 2.4rem 0 2.6rem; }
.figure.wide { width: 100%; }
@media (min-width: 1100px) {
  .figure.wide { width: calc(var(--text-w) + var(--gap) + var(--margin-w)); max-width: calc(100vw - 32px); }
}
.figure .stage {
  position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem; overflow: hidden;
}
.figure .stage.flush { padding: 0; }
.figure figcaption, .figure .caption { margin-top: 0.75rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); max-width: var(--text-w); }
.figure figcaption .fig-n, .figure .caption .fig-n { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); margin-right: 0.5em; }
.fig-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .fig-grid.two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.scroll-x { overflow-x: auto; }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; align-items: center; margin-bottom: 0.9rem; font-size: var(--fs-sm); }
.control { display: grid; gap: 0.2rem; min-width: 9rem; }
.control > label, .control > .label { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.control output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
input[type="range"] { accent-color: var(--tide); width: 100%; }
select, input[type="search"], input[type="text"], input[type="number"] {
  font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 0.35rem 0.5rem;
}
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg button {
  font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.04em; border: 0; background: transparent; color: var(--ink-2);
  padding: 0.38rem 0.75rem; cursor: pointer; border-right: 1px solid var(--rule);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--tide); color: var(--paper); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--tide-soft); color: var(--ink); }
.btn {
  font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--ink-3); background: transparent; color: var(--ink); padding: 0.42rem 0.8rem; border-radius: 4px; cursor: pointer;
}
.btn:hover { border-color: var(--tide); color: var(--tide); }
.btn.primary { background: var(--tide); border-color: var(--tide); color: var(--paper); }
.btn.primary:hover { filter: brightness(1.08); color: var(--paper); }

/* chips & badges */
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--f-ui); font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.35; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.chip.yes { color: var(--moss-ink); border-color: currentColor; background: var(--moss-soft); }
.chip.no { color: var(--seal-ink); border-color: currentColor; background: var(--seal-soft); }
.chip.cond { color: var(--ochre-ink); border-color: currentColor; background: var(--ochre-soft); }
.chip.hf { color: var(--ochre-ink); border-color: currentColor; }
.swatch { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 2px; vertical-align: baseline; }

/* tables */
.table-wrap {
  overflow-x: auto; margin: 1.6rem 0; border: 1px solid var(--rule); border-radius: var(--radius);
  /* scroll shadows: a soft edge appears on whichever side has more table to scroll to */
  background:
    linear-gradient(90deg, var(--paper) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left / 0.7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right / 0.7rem 100% no-repeat scroll;
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule); }
th { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; background: var(--paper-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* on a phone, wide tables keep readable columns and scroll sideways instead of stacking one word per line */
@media (max-width: 600px) {
  .table-wrap > table:not(.stack):has(tr > :nth-child(3)) { min-width: 30rem; }
  .table-wrap > table:not(.stack):has(tr > :nth-child(4)) { min-width: 38rem; }
  .table-wrap > table:not(.stack):has(tr > :nth-child(5)) { min-width: 44rem; }
  th, td { padding: 0.5rem 0.6rem; }
}

/* method card (shared by the atlas, the category graph, the periodic table) */
.method-card { display: grid; gap: 0.6rem; font-size: var(--fs-sm); line-height: 1.5; min-width: 0; }
.method-card h4 { font-family: var(--f-display); font-size: 1.5rem; font-weight: var(--w-head); margin: 0; }
.method-card .full { color: var(--ink-2); font-style: italic; }
.method-card .row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.method-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 0.9rem; margin: 0; }
.method-card dt { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.2em; }
.method-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.method-card .formula { overflow-x: auto; padding: 0.4rem 0; }

/* tooltip */
.atlas-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 22rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.55rem 0.7rem; font-size: var(--fs-sm); line-height: 1.45;
  opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
}
.atlas-tip.on { opacity: 1; transform: none; }
.atlas-tip .t { font-family: var(--f-display); font-size: 1.1rem; font-weight: var(--w-head); }

/* svg text defaults for figures */
.figure svg text { font-family: var(--f-ui); font-size: 12px; fill: var(--ink-2); }
.figure svg .num, .figure svg .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.figure svg .serif { font-family: var(--f-body); }
.figure svg .display { font-family: var(--f-display); }
/* appendix diagrams are drawn in currentColor, so they follow the ink in both themes */
#appendix .figure svg { color: var(--ink); }
#appendix .figure svg .d-obj { font-size: 17.5px; fill: currentColor; }
#appendix .figure svg .d-lbl { font-size: 15px; }
#appendix .figure svg .d-cut { font-family: var(--f-ui); font-weight: 500; font-size: 13px; fill: var(--seal-ink); }
/* the diagrams scale down with their viewBox on a phone (to about 0.7); enlarge the labels so they stay at 12px or more */
@media (max-width: 600px) {
  #appendix .figure svg .d-lbl { font-size: 16.5px; }
  #appendix .figure svg .d-cut { font-size: 17.5px; }
}
/* appendix index: entry numbers in mono, compact rows */
.app-index td:first-child { font-family: var(--f-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-index td { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.app-index-wrap { max-height: min(30rem, 70vh); overflow-y: auto; }
.app-index thead th { z-index: 1; box-shadow: 0 1px 0 var(--rule); }
/* on a phone the index drops its Area column and wraps instead of scrolling sideways */
@media (max-width: 600px) {
  #appendix .app-index-wrap > table.app-index { min-width: 0; }
  .app-index th:nth-child(3), .app-index td:nth-child(3) { display: none; }
}

/* bib / cite */
.cite-box { position: relative; }
.cite-box pre { font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cite-box .btn { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--paper); }
.refs { font-size: var(--fs-sm); line-height: 1.5; padding-left: 1.4rem; }
.refs li { margin-bottom: 0.5rem; }

/* footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 2.5rem 16px 3rem; color: var(--ink-2); font-size: var(--fs-sm); }
.site-foot .inner { max-width: 74rem; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }

/* hero actions */
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero .btn { text-decoration: none; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.hero .btn.primary { background: var(--tide); color: var(--paper); }

/* one-minute summary at the top of each exposé: a ruled cartouche, as on the title block of a chart */
.tldr {
  --tldr-bg: color-mix(in srgb, var(--tide) 5%, var(--paper));
  margin: 0 0 2.6rem; padding: 1.1rem 1.35rem 1.15rem; max-width: var(--text-w);
  font-size: var(--fs-md); line-height: 1.55;
  background: var(--tldr-bg); border: 1px solid color-mix(in srgb, var(--tide) 35%, var(--rule)); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px var(--tldr-bg), inset 0 0 0 4px color-mix(in srgb, var(--tide) 16%, var(--rule));
}
.tldr > .label { display: block; color: var(--tide); margin-bottom: 0.6rem; }
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.tldr li { position: relative; margin: 0; padding-left: 1.15rem; }
.tldr li::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 0.32rem; height: 0.32rem; background: var(--tide); transform: rotate(45deg); }
.tldr code { background: var(--paper); }

/* secondary remarks folded away */
details.aside { margin: 1.1rem 0 1.6rem; border-left: 1px solid var(--rule); padding: 0.15rem 0 0.15rem 1rem; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; }
details.aside > summary {
  cursor: pointer; list-style: none; width: fit-content; max-width: 100%;
  font-family: var(--f-body); font-style: italic; font-size: var(--fs-md); color: var(--ink-2);
}
details.aside > summary::-webkit-details-marker { display: none; }
details.aside > summary::before { content: "+"; display: inline-block; width: 1.1em; font-family: var(--f-mono); font-style: normal; color: var(--tide); }
details.aside[open] > summary::before { content: "\2212"; }
details.aside > summary:hover { color: var(--ink); }
details.aside[open] > summary { margin-bottom: 0.55rem; }
details.aside > :last-child { margin-bottom: 0.2rem; }

/* ---------- phone ---------- */
@media (max-width: 600px) {
  :root { --fs-body: 1.09rem; --fs-lg: 1.2rem; --fs-xl: 1.6rem; --lh-body: 1.6; }
  .expose { padding-top: 2.6rem; }
  .expose-head { gap: 0.55rem; margin-bottom: 1.5rem; }
  .epigraph { margin-bottom: 1.7rem; }
  .tldr { padding: 0.95rem 1rem 1rem; margin-bottom: 2.2rem; }
  .prose h3 { margin-top: 2.2rem; }
  .env { padding: 0.85rem 0.9rem; }
  .proof { padding-inline: 0.9rem; }
  .explains { padding-left: 0.9rem; }
  /* figures run to the screen edges so interactive panels get the full width */
  .figure > [data-figure] > .stage { margin-inline: -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .figure { margin: 2rem 0 2.2rem; }
}

/* appendix parts fold away; links into them open the right part */
details.app-part { border-top: 1px solid var(--rule); margin: 0; }
details.app-part:last-of-type { border-bottom: 1px solid var(--rule); }
details.app-part > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 1.1rem 0; }
details.app-part > summary::-webkit-details-marker { display: none; }
details.app-part > summary h3 { margin: 0; display: block; padding-left: 1.2em; text-indent: -1.2em; }
details.app-part > summary h3::before { content: "+"; display: inline-block; width: 1.2em; text-indent: 0; color: var(--tide); font-family: var(--f-mono); }
details.app-part[open] > summary h3::before { content: "\2212"; }
details.app-part > summary .app-count { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-left: calc(1.2 * var(--fs-xl)); }
details.app-part > summary:hover h3 { color: var(--tide); }
details.app-part[open] { padding-bottom: 1.5rem; }

/* Option 1 typography (2 Oct 2026): Source Serif 4 for text and headings, IBM Plex Sans for labels,
   IBM Plex Mono for numbers and code. */
.expose-head h2 { font-weight: var(--w-head); }
.expose-head .summary { font-weight: var(--w-body); }
.label, th, .chip, .seg button, .btn, .control > label, .control > .label, .fig-n, .theme-toggle { font-weight: 500; }

.mj-glue { white-space: nowrap; }
.prose li > .label a, .prose p > .label a { white-space: nowrap; }



/* title and subtitle (2026-10-03): Source Serif 4 semibold, as on the paper's title page; the method name
   is set upright in teal, the subtitle in italic */
.hero h1 { font-family: var(--f-display); font-weight: 600; font-variation-settings: "opsz" var(--hero-opsz, 32); letter-spacing: -0.012em;
  font-size: clamp(1.9rem, 4vw, 3.5rem); line-height: 1.06; max-width: none; }
.hero h1 em { display: block; font-style: normal; color: var(--tide); }
.hero h1 .nw { display: block; white-space: nowrap; }
.hero .subtitle { margin: -0.5rem 0 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" var(--hero-opsz, 32);
  font-size: clamp(1.4rem, 2.7vw, 2.1rem); line-height: 1.2; color: var(--tide); }

/* author byline: one author per line, then the corresponding address */
.hero .byline { display: grid; gap: 0.15rem; margin: 0; font-family: var(--f-body); font-size: var(--fs-md); color: var(--ink); line-height: 1.45; }
.hero .byline p { margin: 0; }
.hero .byline .af { font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-2); margin-left: 0.5em; }
.hero .byline .with { margin-top: 0.35rem; font-style: italic; font-size: var(--fs-sm); color: var(--ink-2); }
.hero .byline .with a { color: inherit; text-decoration: underline; text-decoration-color: var(--tide); text-underline-offset: 0.15em; }
.hero .byline .with a:hover { color: var(--tide); }
.hero .report-note { margin: 0; max-width: 40rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.hero .report-note .fn-mark { font-size: 0.85em; vertical-align: baseline; color: var(--ink-2); margin: 0 0.2em 0 0; }
.hero .kicker .fn-mark { font-size: 0.95em; letter-spacing: 0; }
.hero .report-note + .title-note { margin-top: -0.9rem; }
.hero .byline .corr { margin-top: 0.45rem; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--ink-2); }
.hero .byline .corr a { color: var(--tide); text-decoration: none; overflow-wrap: anywhere; }
.hero .byline .corr a:hover { text-decoration: underline; }

/* footnote on the title (homage to Geometric Deep Learning) */
.hero .fn-mark { font-family: var(--f-body); font-style: normal; font-size: 0.5em; vertical-align: super; line-height: 0; margin-left: 0.08em; }
.hero .fn-mark a { color: var(--ink-2); text-decoration: none; }
.hero .fn-mark a:hover { color: var(--tide); }
.hero .title-note { margin: 0; max-width: 40rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.hero .title-note .fn-mark { font-size: 0.85em; vertical-align: baseline; color: var(--ink-2); margin: 0 0.2em 0 0; }

/* hero, 2026-10-05: a shorter step from the dek to the byline */
.hero .dek { margin-bottom: 0; }
.hero .byline { margin-top: -0.35rem; }

/* wide tables, 2026-10-05: on screens with a margin column, a table wider than the text borrows the margin
   (core.js adds .wide only when the table then fits, and moves notes out of its way) */
@media (min-width: 1100px) {
  .table-wrap.wide { width: calc(100% + var(--margin-w) + var(--gap)); max-width: none; }
}

/* ---------- the film: the player keeps the film's own navy in both themes ---------- */
.film .stage { background: #0a121c; border-color: color-mix(in srgb, var(--rule) 60%, #0a121c); }
.film .yt { position: relative; aspect-ratio: 16 / 9; background: #0a121c; }
.film .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.film .yt-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.film .yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film .yt-play .play { position: absolute; left: 55%; top: 50%; width: clamp(3rem, 12%, 4.6rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: rgba(10, 18, 28, 0.72); border: 1.5px solid rgba(227, 233, 238, 0.85); transition: background 0.15s, transform 0.15s; }
.film .yt-play .play svg { width: 36%; height: 36%; margin-left: 8%; fill: #e3e9ee; }
.film .yt-play:hover .play, .film .yt-play:focus-visible .play { background: #0e7385; transform: translate(-50%, -50%) scale(1.06); }
.film .yt-play:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.film .yt-note { position: absolute; right: 0.8rem; bottom: 0.6rem; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.04em; color: rgba(227, 233, 238, 0.75); }
.film ol.film-chapters { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 0 1.6rem;
  font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.02em; line-height: 1.4; }
.film-chapters li { margin: 0; padding: 0; }
.film-chapters a { display: flex; gap: 0.75em; padding: 0.2rem 0; color: var(--ink-2); text-decoration: none; }
.film-chapters a:hover, .film-chapters a.on { color: var(--tide); }
.film-chapters .t { flex: none; min-width: 2.9em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.film-chapters a:hover .t, .film-chapters a.on .t { color: inherit; }
.btn .ico { width: 0.75em; height: 0.75em; margin-right: 0.5em; vertical-align: -0.04em; fill: currentColor; }