/* The looks' fonts (codex.css, cosmos.css, studio.css) and the reading page's (--reading, --math):
   the app's own files (public/fonts, under the SIL Open Font License 1.1, each with its licence),
   since the page's security policy allows no font host and the app works offline. A browser
   downloads a face only when a page uses it. Bricolage Grotesque is app.css's. */
@font-face {
  font-family: 'STIX Two Text';
  src: url('/fonts/stix-two-text-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'STIX Two Text';
  src: url('/fonts/stix-two-text-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'STIX Two Text';
  src: url('/fonts/stix-two-text-600.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif';
  src: url('/fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif';
  src: url('/fonts/source-serif-4-600.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-700.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
/* Mathematics (MathML): STIX Two Math, with the table that stretches brackets, roots and integrals,
   so a formula reads the same on every device, whatever fonts it has. */
@font-face {
  font-family: 'STIX Two Math';
  src: url('/fonts/stix-two-math-400.woff2') format('woff2');
  font-display: swap;
}
/* A signature set in a hand (the certificate's, when the school has no image of the real one). */
@font-face {
  font-family: 'Mrs Saint Delafield';
  src: url('/fonts/mrs-saint-delafield-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* What every look (codex.css, cosmos.css, studio.css) derives from its own tokens: the shell's
   other colours (the menu, the rail, the avatar, the soft fills), so a look file holds only its
   own choices. Loaded after app.css (lib/look.ts): with the same weight as app.css's dark blocks,
   the later wins, and a look's colours replace the base's in light and dark alike. */
/* A look reads at the browser's own size (16px unless the reader chose larger), as the school's mock
   did; the base's 15px stays the farm's. */
:root[data-look],
:root[data-look] body {
  font-size: 100%;
}
:root[data-look] {
  --surface: var(--card);
  --sunken: var(--surface-2);
  --muted: var(--ink-2);
  --faint: color-mix(in srgb, var(--ink-2) 88%, var(--bg));
  --line-2: color-mix(in srgb, var(--line) 78%, var(--ink));
  --brand-text: var(--brand);
  --focus: var(--brand);
  /* The active menu entry (the farm's lime): the look's soft accent, in its ink. */
  --lime: var(--brand-soft);
  --lime-ink: var(--ink);
  /* The avatar and the strong panels (the farm's forest): the look's accent. */
  --forest: var(--brand);
  --forest-2: color-mix(in srgb, var(--brand) 82%, var(--ink));
  --forest-ink: var(--brand-ink);
  --forest-muted: color-mix(in srgb, var(--brand-ink) 72%, var(--brand));
  --rail-bg: var(--card);
  --rail-ink: var(--ink-2);
  --rail-muted: var(--ink-2);
  --rail-strong: var(--ink);
  --rail-hover: var(--surface-2);
  --rail-line: var(--line);
  --rail-pin: var(--brand);
  --rail-edge: inset -1px 0 0 var(--line);
  --ok-text: var(--ok);
  --bad-text: var(--bad);
  --bad-soft: color-mix(in srgb, var(--bad) 12%, var(--card));
  --shadow-pop: 0 0 0 1px var(--line), var(--shadow);
  --map-bg: var(--surface-2);
}
/* The school's mock, in every look: the avatar in the look's highlight (Codex's gold) with a dark
   ink that reads on each; the top bar's entries as round pills, the phone's current tab in the
   accent alone, the bar's round buttons; cards with their line; a looser line and lighter buttons.
   The base's own (a farm's) keep theirs: each is read with its fallback where it is used. */
/* The page's margins as the mock's: it starts lower (1.5rem) and keeps wider sides, 1rem on a phone
   up to 2.5rem on a computer (App.svelte, main). A pack's column keeps its width inside them. */
:root[data-look] {
  --main-top: 1.5rem;
  --main-x: clamp(1rem, 3vw, 2.5rem);
}
:root[data-look] {
  --avatar-bg: var(--hi);
  --avatar-ink: #1a1408;
  --menu-radius: var(--pill, 999px);
  --menu-pad-x: 0.9rem;
  --menu-h: 2.65rem;
  --menu-gap: 0.3rem;
  --menu-on-weight: 600;
  --tab-on-bg: transparent;
  --tab-on-ink: var(--brand-text);
  --tab-on-label: var(--brand-text);
  --icon-radius: 50%;
}
:where(:root[data-look]) .card {
  border-color: var(--line);
}
:where(:root[data-look]) body {
  line-height: 1.55;
}
:where(:root[data-look]) :is(button, .ui-go) {
  font-weight: 600;
}

/* The look's scales: every screen's corners and text sizes are named steps of these, never fixed
   values (scripts/check-look.mjs keeps it so). A look file may set any step its own way; a screen
   without a look (a farm's) keeps each value it had, written as the step's fallback where used. */
:root[data-look] {
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: var(--radius);
  --r-lg: var(--radius-lg);
  --r-xl: calc(var(--radius-lg) + 4px);
  /* Text sizes, smallest to largest: every size on the school's screens is one of these steps. */
  --fs-1: 0.625rem; /* 10px */
  --fs-2: 0.6875rem; /* 11px */
  --fs-3: 0.75rem; /* 12px */
  --fs-4: 0.8125rem; /* 13px */
  --fs-5: 0.875rem; /* 14px */
  --fs-6: 0.9375rem; /* 15px */
  --fs-7: 1rem; /* 16px */
  --fs-8: 1.0625rem; /* 17px */
  --fs-9: 1.15rem; /* 18.4px: the book's reading text */
  --fs-10: 1.25rem; /* 20px */
  --fs-11: 1.4rem; /* 22.4px */
  --fs-12: 1.5rem; /* 24px */
  --fs-13: 1.7rem; /* 27.2px */
  --fs-14: 2rem; /* 32px */
  --fs-15: 2.4rem; /* 38.4px */
  --fs-16: 2.75rem; /* 44px */
  /* A certificate's title, as large as its page allows. */
  --cert-title: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  /* A signer's name set in a hand on their line, until the school has their signature's image. */
  --cert-hand: 'Mrs Saint Delafield', cursive;
}


/* Codex, the school's look (mock of 2026-10-12, for Michael's choice): white paper, near-black ink
   and one deep ink-blue, the book's maths face (STIX Two) for titles and text, the device's own
   sans for buttons and menus, near-square corners, no capitals or pills, solid bars.
   One file of tokens (lib/look.ts): its type and shapes, its light colours, its dark colours (the
   same in both dark blocks: when the device is dark and the person has not chosen light, or when
   they chose dark). shared.css derives the shell's other colours from these; looks.test.ts checks
   each pair a person reads. --bar is the browser's bar, --plate the paper under a figure.
   A .look-sample (a look to choose, in the school's Settings) wears the same tokens, in light or
   dark as it says. */
.look-sample[data-sample='codex'],
:root[data-look='codex'] {
  --display: 'STIX Two Text', Georgia, serif;
  --display-weight: 600;
  --display-track: 0em;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, sans-serif;
  --reading: 'STIX Two Text', Georgia, serif;
  --math: 'STIX Two Math', math;
  --radius: 6px;
  --radius-lg: 8px;
  /* A certificate (Certificate.svelte, and in small on Progress): paper in every mode and when
     printed, so the look's light colours, and its titles' face. */
  --cert-paper: #ffffff;
  --cert-ink: #15181d;
  --cert-ink-2: #4a515c;
  --cert-frame: #1f3a6b;
  --cert-accent: #1f3a6b;
  --cert-face: var(--display);
  /* Shapes and labels: near-square corners everywhere, no pill; labels in their own case. */
  --pill: 6px;
  /* The shared kit's corners (cards, notices, tiles, switches): the same near-square. */
  --kit-radius: 8px;
  /* An icon alone, never in a tinted circle. */
  --icon-chip: none;
  --label-case: none;
  --label-track: 0;
  --label-size: 0.92rem;
  /* A screen's title alone: the menu already says where one is. */
  --page-kicker: none;
  /* The account's letter in the owl's colours: gold on its navy. */
  --avatar-bg: #1a1f3c;
  --avatar-ink: #e0bd62;
  /* The bars solid: no frosted glass. */
  --bar-blur: none;
  --bar-opacity: 100%;
  /* A screen's title (packs/school/PageHead.svelte). */
  --h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  --bg: #fbfbfa;
  --card: #ffffff;
  --surface-2: #f0f1f3;
  --ink: #15181d;
  --ink-2: #4a515c;
  --line: #dcdfe4;
  --brand: #1f3a6b;
  --brand-ink: #ffffff;
  --brand-soft: #e6ecf6;
  --hi: #a5812c;
  --ok: #2f6b3a;
  --bad: #a3271f;
  --plate: #ffffff;
  --shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 8px 24px -16px rgba(20, 24, 30, 0.18);
  --shadow-card: none;
  --bar: #fbfbfa;
}
@media (prefers-color-scheme: dark) {
  :root[data-look='codex']:not([data-theme='light']) {
    --bg: #121417;
    --card: #181b1f;
    --surface-2: #22262c;
    --ink: #e9ebee;
    --ink-2: #a9b0ba;
    --line: #30353d;
    --brand: #9fb7e3;
    --brand-ink: #0f1420;
    --brand-soft: #24314a;
    --hi: #d4b25e;
    --ok: #8fcf9a;
    --bad: #f09a8f;
    --plate: #f4f4f2;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-card: none;
    --bar: #121417;
  }
}
.look-sample[data-sample='codex'][data-sample-mode='dark'],
:root[data-look='codex'][data-theme='dark'] {
  --bg: #121417;
  --card: #181b1f;
  --surface-2: #22262c;
  --ink: #e9ebee;
  --ink-2: #a9b0ba;
  --line: #30353d;
  --brand: #9fb7e3;
  --brand-ink: #0f1420;
  --brand-soft: #24314a;
  --hi: #d4b25e;
  --ok: #8fcf9a;
  --bad: #f09a8f;
  --plate: #f4f4f2;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-card: none;
  --bar: #121417;
}
/* Numbers read as numbers (never an old-style 1 that reads as I). */
:root[data-look='codex'] body {
  font-variant-numeric: lining-nums;
}

/* Cosmos, a look a learner may choose: the night sky, blue and yellow, a geometric sans.
   One file of tokens (lib/look.ts): its type and shapes, its light colours, its dark colours (the
   same in both dark blocks: when the device is dark and the person has not chosen light, or when
   they chose dark). shared.css derives the shell's other colours from these; looks.test.ts checks
   each pair a person reads. --bar is the browser's bar, --plate the paper under a figure.
   A .look-sample (a look to choose, in the school's Settings) wears the same tokens, in light or
   dark as it says. */
.look-sample[data-sample='cosmos'],
:root[data-look='cosmos'] {
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --display-weight: 700;
  --display-track: -0.02em;
  --sans: 'Inter', system-ui, sans-serif;
  --reading: 'Inter', system-ui, sans-serif;
  --math: 'STIX Two Math', math;
  --radius: 12px;
  --radius-lg: 18px;
  /* A certificate (Certificate.svelte, and in small on Progress): paper in every mode and when
     printed, so the look's light colours, and its titles' face. */
  --cert-paper: #ffffff;
  --cert-ink: #0d1530;
  --cert-ink-2: #4a5675;
  --cert-frame: #0f6e8c;
  --cert-accent: #0f6e8c;
  --cert-face: var(--display);
  /* Shapes and labels as the school's screens drew them before the looks named them (codex.css
     sets its own): round pills, spaced capitals over a title, a frosted top bar. */
  --pill: 999px;
  --kit-radius: var(--radius);
  --icon-chip: var(--brand-soft);
  --label-case: uppercase;
  --label-track: 0.14em;
  --label-size: 0.78rem;
  --page-kicker: block;
  --avatar-bg: var(--forest);
  --avatar-ink: var(--lime);
  --bar-blur: blur(14px);
  --bar-opacity: 90%;
  /* A screen's title (packs/school/PageHead.svelte). */
  --h1: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --bg: #f3f6fb;
  --card: #ffffff;
  --surface-2: #e8eef8;
  --ink: #0d1530;
  --ink-2: #4a5675;
  --line: #d5ddeb;
  --brand: #0f6e8c;
  --brand-ink: #ffffff;
  --brand-soft: #dcf0f7;
  --hi: #b7791f;
  --ok: #1d7a47;
  --bad: #b42d2d;
  --plate: #ffffff;
  --shadow:
    0 1px 2px rgba(13, 21, 48, 0.06), 0 16px 36px -22px rgba(13, 21, 48, 0.35);
  --shadow-card:
    0 1px 2px rgba(13, 21, 48, 0.06), 0 4px 12px -8px rgba(13, 21, 48, 0.2);
  --bar: #f3f6fb;
}
@media (prefers-color-scheme: dark) {
  :root[data-look='cosmos']:not([data-theme='light']) {
    --bg: #0a0e1a;
    --card: #111729;
    --surface-2: #19213a;
    --ink: #e8ecf6;
    --ink-2: #a3adc6;
    --line: #26304d;
    --brand: #58c4dd;
    --brand-ink: #04121a;
    --brand-soft: #12324a;
    --hi: #ffd166;
    --ok: #7ee0a6;
    --bad: #ff8f8f;
    --plate: #f4f6fb;
    --shadow:
      0 0 0 1px rgba(88, 196, 221, 0.08), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    --shadow-card:
      0 0 0 1px rgba(88, 196, 221, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.7);
    --bar: #0a0e1a;
  }
}
.look-sample[data-sample='cosmos'][data-sample-mode='dark'],
:root[data-look='cosmos'][data-theme='dark'] {
  --bg: #0a0e1a;
  --card: #111729;
  --surface-2: #19213a;
  --ink: #e8ecf6;
  --ink-2: #a3adc6;
  --line: #26304d;
  --brand: #58c4dd;
  --brand-ink: #04121a;
  --brand-soft: #12324a;
  --hi: #ffd166;
  --ok: #7ee0a6;
  --bad: #ff8f8f;
  --plate: #f4f6fb;
  --shadow:
    0 0 0 1px rgba(88, 196, 221, 0.08), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --shadow-card:
    0 0 0 1px rgba(88, 196, 221, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.7);
  --bar: #0a0e1a;
}

/* Studio, a look a learner may choose: bright, indigo and coral, a lively grotesque.
   One file of tokens (lib/look.ts): its type and shapes, its light colours, its dark colours (the
   same in both dark blocks: when the device is dark and the person has not chosen light, or when
   they chose dark). shared.css derives the shell's other colours from these; looks.test.ts checks
   each pair a person reads. --bar is the browser's bar, --plate the paper under a figure.
   A .look-sample (a look to choose, in the school's Settings) wears the same tokens, in light or
   dark as it says. */
.look-sample[data-sample='studio'],
:root[data-look='studio'] {
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -0.03em;
  --sans: 'Figtree', system-ui, sans-serif;
  --reading: 'Figtree', system-ui, sans-serif;
  --math: 'STIX Two Math', math;
  --radius: 14px;
  --radius-lg: 22px;
  /* A certificate (Certificate.svelte, and in small on Progress): paper in every mode and when
     printed, so the look's light colours, and its titles' face. */
  --cert-paper: #ffffff;
  --cert-ink: #14141a;
  --cert-ink-2: #55555f;
  --cert-frame: #4338ca;
  --cert-accent: #4338ca;
  --cert-face: var(--display);
  /* Shapes and labels as the school's screens drew them before the looks named them (codex.css
     sets its own): round pills, spaced capitals over a title, a frosted top bar. */
  --pill: 999px;
  --kit-radius: var(--radius);
  --icon-chip: var(--brand-soft);
  --label-case: uppercase;
  --label-track: 0.14em;
  --label-size: 0.78rem;
  --page-kicker: block;
  --avatar-bg: var(--forest);
  --avatar-ink: var(--lime);
  --bar-blur: blur(14px);
  --bar-opacity: 90%;
  /* A screen's title (packs/school/PageHead.svelte). */
  --h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --bg: #fbfaf7;
  --card: #ffffff;
  --surface-2: #f2f0ea;
  --ink: #14141a;
  --ink-2: #55555f;
  --line: #e6e3dc;
  --brand: #4338ca;
  --brand-ink: #ffffff;
  --brand-soft: #ebe9ff;
  --hi: #ff6b4a;
  --ok: #0f7a55;
  --bad: #c0362c;
  --plate: #ffffff;
  --shadow:
    0 1px 2px rgba(20, 20, 26, 0.05), 0 18px 40px -24px rgba(67, 56, 202, 0.35);
  --shadow-card:
    0 1px 2px rgba(20, 20, 26, 0.05), 0 4px 12px -8px rgba(67, 56, 202, 0.2);
  --bar: #fbfaf7;
}
@media (prefers-color-scheme: dark) {
  :root[data-look='studio']:not([data-theme='light']) {
    --bg: #101014;
    --card: #18181f;
    --surface-2: #22222b;
    --ink: #f2f1ee;
    --ink-2: #a9a8b3;
    --line: #2e2e39;
    --brand: #a5b4fc;
    --brand-ink: #14143a;
    --brand-soft: #26264a;
    --hi: #ff8a6e;
    --ok: #6fdcb0;
    --bad: #ff9a8e;
    --plate: #f6f5f1;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
    --shadow-card:
      0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.7);
    --bar: #101014;
  }
}
.look-sample[data-sample='studio'][data-sample-mode='dark'],
:root[data-look='studio'][data-theme='dark'] {
  --bg: #101014;
  --card: #18181f;
  --surface-2: #22222b;
  --ink: #f2f1ee;
  --ink-2: #a9a8b3;
  --line: #2e2e39;
  --brand: #a5b4fc;
  --brand-ink: #14143a;
  --brand-soft: #26264a;
  --hi: #ff8a6e;
  --ok: #6fdcb0;
  --bad: #ff9a8e;
  --plate: #f6f5f1;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.7);
  --bar: #101014;
}

/* The reading of a book's part, in one place: its paragraphs, its maths (MathML), its figures,
   tables, footnotes and epigraph. Used by the school's part (packs/school/Part.svelte) and by every
   page the library publishes, so a book reads the same wherever it is read. Sizes and colours are
   the look's (looks/*.css; scripts/check-look.mjs keeps it so). */

/* Justified, as the book's PDF is: the words carry where they may break (the import's soft
   hyphens, else the browser's own hyphenation in the book's language) and each paragraph's last
   lines are weighed together (text-wrap: pretty), so the spaces stay even as a book's do. On a
   phone the line is too short to justify without gaps, so it stays ragged there. Captions, the
   epigraph's author and a table's cells keep their own alignment. */
.prose {
  font: 400 var(--fs-9, 1.14rem)/1.72 var(--reading);
  overflow-wrap: break-word;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  text-wrap: pretty;
}
.prose td,
.prose th {
  text-align: left;
  hyphens: manual;
}
.prose p {
  margin: 0 0 1.15em;
}
.prose em strong,
.prose strong em {
  color: var(--brand-text, var(--brand));
}
/* An epigraph (packs/school/import/book.mjs): the quotation set apart, its author under it on the
   right, in small capitals; the emphasis Word left on a dash or a quotation mark stays plain. */
.prose .epigraph {
  margin: 0.4rem 0 2.2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--line);
}
.prose .epigraph blockquote {
  margin: 0;
  font-style: italic;
  color: var(--ink-2);
}
.prose .epigraph strong {
  font-weight: inherit;
  color: inherit;
}
.prose .epigraph figcaption {
  margin-top: 0.7rem;
  text-align: right;
  color: var(--ink-2);
}
.prose .epigraph .who {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
.prose math {
  font-family: var(--math);
  font-size: 1.06em;
}
/* A formula and the punctuation it touches stay on one line (packs/school/import/book.mjs). */
.prose .m-p {
  white-space: nowrap;
}
/* A formula in a sentence scrolls sideways only when it is wider than the column (on a phone); its
   box has room above and below for the tallest symbols (ℝ, ℂ, a fraction), so it never scrolls up
   and down nor cuts one, and the line keeps its height. */
.prose math:not([display='block']) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.3em;
  margin-block: -0.3em;
  vertical-align: middle;
}
.prose .eq {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.3em 0;
}
/* Only what still scrolls: it starts at its beginning (never cut on the left), with a shadow on
   the side where more is hidden, gone at its end. */
.prose .eq-math.scrolls {
  text-align: left;
}
.prose .eq-math.scrolls,
.prose .tbl-box.scrolls {
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 30%, transparent), transparent) left / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 30%, transparent), transparent) right / 1rem 100% no-repeat scroll,
    var(--bg);
}

.prose .eq-math {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.6em 0.2em;
  border-radius: var(--radius);
}
.prose .eq-math:focus-visible {
  background: var(--surface-2);
}
.prose .eq-no {
  flex: none;
  font: var(--fs-7, 1rem)/1 var(--math);
  color: var(--ink-2);
}
/* Figures on their plate: the paper they were drawn on, a pair side by side (stacked on a phone). */
.prose figure {
  margin: 2rem 0;
}
.prose figure .imgs {
  /* mode: fixed — the paper the figures were drawn on (a look's --plate) */
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  padding: 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--plate, var(--card));
  border: 1px solid var(--line);
}
.prose figure.pair .imgs img {
  width: calc(50% - 0.4rem);
}
.prose figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* A figure the import left bare (no plate around it) gets one of its own. */
.prose figure > img {
  /* mode: fixed — the paper the figure was drawn on (a look's --plate) */
  margin: 0 auto;
  padding: 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--plate, var(--card));
  border: 1px solid var(--line);
}
.prose figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-6, 0.95rem);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}
/* A table in a box of its own that scrolls sideways, never the page (packs/school/import/book.mjs). */
.prose .tbl-box {
  margin: 1.6rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.prose .tbl-fig .tbl-box {
  margin: 0;
}
.prose .tbl-box:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.prose .tbl {
  margin: 0 auto;
  border-collapse: collapse;
  font: 400 var(--fs-7, 1rem)/1.4 var(--reading);
}
.prose .tbl th,
.prose .tbl td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
.prose .tbl th {
  background: var(--surface-2);
  font-weight: 700;
}
.prose .tbl tbody tr:last-child td {
  border-bottom: 0;
}
.prose .fn a {
  padding: 0 0.15em;
  font-size: 0.75em;
  font-weight: 700;
  text-decoration: none;
}
.prose .footnotes {
  margin: 2.5rem 0 0;
  padding: 1rem 0 0 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-5, 0.9rem);
  color: var(--ink-2);
}
@media (max-width: 759px) {
  .prose {
    font-size: var(--fs-8, 1.06rem);
    text-align: start;
  }
  .prose figure.pair .imgs {
    flex-direction: column;
    align-items: center;
  }
  .prose figure.pair .imgs img {
    width: 100%;
  }
}

/* The library's pages (packs/library/import, docs/library.md): what is the library's own. Before it
   in the published stylesheet come the base's fonts and looks (web/src/looks: shared, codex, cosmos,
   studio, each light and dark, and the device's choice unless the reader made one: data-theme) and
   the reading of a part (looks/prose.css), so a library reads as the school does. */

/* ---- Its own tokens: the shelves, and the covers' inks: a collection's by its place in library.toml
   (--cv-1 the first), unless library.toml gives it its own colour (then on the cover itself). The
   drawing in pale ink, gold for the one point or line each is about, the title in the cover's ink. ---- */
:root[data-look] {
  --shelf: var(--surface-2);
}
:root[data-look='codex'] {
  --cv-1: #2b4a42; --cv-2: #3b4859; --cv-3: #1f3a6b; --cv-4: #1a1f3c;
  --cv-ink: #f6f7f9; --cv-label: #c9d3e3; --cv-line: #e3e8f0; --cv-line-2: rgba(227, 232, 240, .42); --cv-gold: #d9b866;
  --cv-frame: 1px solid rgba(227, 232, 240, .2);
}
:root[data-look='cosmos'] {
  --cv-1: #0f2b3d; --cv-2: #1a1c4d; --cv-3: #2d1543; --cv-4: #0b1026;
  --cv-ink: #eef2fb; --cv-label: #b9c6e0; --cv-line: #58c4dd; --cv-line-2: rgba(88, 196, 221, .45); --cv-gold: #ffd166;
  --cv-frame: 1px solid rgba(88, 196, 221, .22);
}
:root[data-look='studio'] {
  --cv-1: #0f6e4d; --cv-2: #4338ca; --cv-3: #1f5f99; --cv-4: #14141a;
  --cv-ink: #ffffff; --cv-label: rgba(255, 255, 255, .88); --cv-line: rgba(255, 255, 255, .95); --cv-line-2: rgba(255, 255, 255, .5); --cv-gold: #ffc98f;
  --cv-frame: 0 solid transparent;
}
@media (prefers-color-scheme: dark) {
  :root[data-look='studio']:not([data-theme='light']) { --cv-4: #2a2a36; }
}
:root[data-look='studio'][data-theme='dark'] { --cv-4: #2a2a36; }
/* Each collection's class (cv-<id>) is written after this file, at publish time, from library.toml. */

/* The reader's text sizes, as Display offers them. */
.seg .size-smaller { font-size: var(--fs-6); }
.seg .size-medium { font-size: var(--fs-8); }
.seg .size-larger { font-size: var(--fs-11); }

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 var(--fs-7)/1.55 var(--sans); }
[data-look="codex"] body { font-variant-numeric: lining-nums; }
a { color: var(--brand); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: var(--h1); line-height: 1.12; letter-spacing: calc(var(--display-track) * 2); }
h2 { font-size: var(--fs-12); }
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
b, strong { font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-5); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The school's kicker: a short label in the accent, in its own case in Codex. */
.kicker { font: 600 var(--label-size)/1.2 var(--sans); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--brand); margin: 0 0 .7rem; }
.kicker a { color: inherit; text-decoration: none; }
.lede { font-size: var(--fs-9); color: var(--ink-2); max-width: 46rem; }
.tagline { font-family: var(--reading); font-style: italic; color: var(--ink-2); margin: 0; }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 1rem; height: 1rem; vertical-align: -.15em; }
main { max-width: 1240px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 4rem; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 60; padding: .6rem 1rem; background: var(--card); color: var(--ink); border-radius: var(--radius); }
.skip:focus { left: .5rem; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Buttons as the school's links drawn as buttons (ui-go): `primary` for the one next step. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 600 var(--fs-7)/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s, filter .15s; }
.btn:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line-2)); box-shadow: var(--shadow-card); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.1); }
/* A quiet action beside the others (ui-ghost). */
.btn.quiet { min-height: 40px; padding: 0 12px; border-color: transparent; background: none; color: var(--ink-2); font-size: var(--fs-6); }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.row-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.iconbtn { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; text-decoration: none; }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn.sm { width: 2.2rem; height: 2.2rem; }
/* Light, dark or the device's own, as the app's menu (ThemeMenu.svelte): the button shows the one
   that is on, and opens the three. */
.theme .th { display: none; }
:root[data-pref="light"] .theme .th-light, :root[data-pref="dark"] .theme .th-dark, :root[data-pref="device"] .theme .th-device, :root:not([data-pref]) .theme .th-device { display: block; }
.theme-menu { position: relative; flex: none; }
.theme-pop { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 30; display: grid; gap: .15rem; min-width: 11.5rem; padding: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop), 0 18px 40px -20px rgba(20, 24, 30, .3); }
.theme-pop[hidden] { display: none; }
.theme-pop button { display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; padding: 0 .8rem; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: 600 var(--fs-6)/1 var(--sans); text-align: left; cursor: pointer; }
.theme-pop button:hover, .theme-pop button:focus-visible { background: var(--surface-2); }
.theme-pop button[aria-checked="true"] { color: var(--brand); }
.theme-pop .tick { margin-left: auto; visibility: hidden; }
.theme-pop button[aria-checked="true"] .tick { visibility: visible; }
/* A tile, as the school's: its line, its corners, its light shadow. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow); color: var(--ink); }
a.card { text-decoration: none; display: block; transition: border-color .15s; }
a.card:hover { border-color: var(--brand); }
/* How much is done, as a thin bar (ui-meter). */
.bar { display: block; height: .5rem; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); }
/* A chip to choose, a filter that turns on and off (ui-pick). */
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 600 var(--fs-5)/1 var(--sans); text-decoration: none; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.chip:hover { border-color: var(--line-2); }
.chip .n { font-weight: 500; color: var(--ink-2); }
.chip[aria-pressed="true"] .n { color: inherit; }

/* ---- Header and navigation: a solid bar in Codex, the menu's entries with the look's corners ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.2rem; padding: .65rem clamp(1rem, 3vw, 2.5rem); background: color-mix(in srgb, var(--bg) var(--bar-opacity), transparent); -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; min-height: 2.6rem; flex: none; }
.mark { display: block; width: 2.5rem; height: 2.5rem; border-radius: 22%; flex: none; }
.word { font: var(--display-weight) var(--fs-10)/1 var(--display); letter-spacing: var(--display-track); }
.word b { font-weight: inherit; }
.tabs { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.tabs > a, .menu > summary { display: flex; align-items: center; gap: .35rem; min-height: 2.65rem; padding: .5rem .9rem; border-radius: var(--pill); color: var(--ink-2); text-decoration: none; font-weight: 600; cursor: pointer; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.tabs > a.on, .menu > summary.on { background: var(--brand-soft); color: var(--ink); }
.tabs > a:hover, .menu > summary:hover { color: var(--ink); background: var(--surface-2); }
.tabs > a.on:hover, .menu > summary.on:hover { background: var(--brand-soft); }
.menu { position: relative; }
.menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.menu[open] > summary .ic { transform: rotate(180deg); }
.menu-pop { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 30; display: grid; gap: .15rem; min-width: 19rem; padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop), 0 18px 40px -20px rgba(20, 24, 30, .3); }
.menu-pop a { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.menu-pop a:hover { background: var(--surface-2); }
.menu-pop b { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.dot { width: .7rem; height: .7rem; border-radius: var(--r-xs); flex: none; background: var(--cv); }
.menu-pop small { padding-left: 1.25rem; color: var(--ink-2); font-family: var(--reading); font-style: italic; font-size: var(--fs-6); }
.menu-pop .all { display: flex; align-items: center; gap: .4rem; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); margin-top: .2rem; font-weight: 600; color: var(--brand); }
.find { display: flex; align-items: center; margin-left: .4rem; }
/* The bar's search is a magnifier until it is used: a click opens the field in its place (library.js),
   an empty field closes again. */
.find:not(.open) label { display: none; }
.find.open .find-open { display: none; }
/* While searching on a bar of middle width, the links show only their icons, to give the field room. */
@media (max-width: 1300px) { .top:has(.find.open) .tabs .lbl { display: none; } }
/* The search field: the school's field, its corners and its focus ring. */
.find label, .bigfind label { display: flex; align-items: center; gap: .5rem; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--kit-radius); background: var(--card); color: var(--ink-2); transition: border-color .15s, box-shadow .15s; }
.find label:focus-within, .bigfind label:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.find input, .bigfind input { flex: 1; min-width: 0; min-height: 2.6rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 500; }
.find input::placeholder, .bigfind input::placeholder { color: var(--faint); }
.find input { width: 14rem; }
@media (prefers-reduced-motion: no-preference) { .find.open label { animation: find-open .18s ease-out; } }
@keyframes find-open { from { opacity: 0; transform: scaleX(.6); transform-origin: right; } }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }
.bottom { display: none; }

/* ---- Covers: a book's face, its collection's ink, its subject drawn ---- */
.cover { container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.414; overflow: hidden; border-radius: var(--r-xs); background-color: var(--cv); color: var(--cv-ink); text-align: left; box-shadow: var(--shadow); }
.cover-in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 10cqi 9cqi 9cqi; }
/* A work's own cover (a published book's): the picture fills it, its words are the picture's. */
.cover-picture .cover-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover::before { content: ''; position: absolute; z-index: 2; inset: 2.9% 4.1%; border: var(--cv-frame); border-radius: var(--r-xs); pointer-events: none; }
.cover-picture::before { content: none; }
.cover-coll { position: relative; font: 600 6.2cqi/1.1 var(--sans); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--cv-label); }
.cover .motif { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; margin: 4cqi 0; }
.cover-title { position: relative; font: var(--display-weight) 10.5cqi/1.1 var(--display); letter-spacing: var(--display-track); color: var(--cv-ink); overflow-wrap: break-word; hyphens: auto; }
.cover-sub { position: relative; margin-top: 2cqi; font: italic 400 5.6cqi/1.25 var(--reading); color: var(--cv-ink); opacity: .9; }
.cover-by { position: relative; margin-top: 3.5cqi; font: 600 5.8cqi/1.2 var(--sans); color: var(--cv-label); }
/* The drawing: `a` the main line, `b` the second, `d` its points, `g` the one thing it is about, in gold. */
.motif .a, .motif .b, .motif .g { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.motif .a { stroke: var(--cv-line); stroke-width: 1.6; }
.motif .a.thin { stroke-width: .7; }
.motif .b { stroke: var(--cv-line-2); stroke-width: 1; }
.motif .g { stroke: var(--cv-gold); stroke-width: 1.6; }
.motif .dash { stroke-dasharray: 3 4; }
.motif .fill { fill: color-mix(in srgb, var(--cv-line) 14%, transparent); }
.motif .d { fill: var(--cv-line); }
.motif .d.g { fill: var(--cv-gold); stroke: none; }
.cover.mini .cover-in { padding: 8cqi 7cqi; }
.cover.mini { width: 3.4rem; }
.cover.mini .cover-title, .cover.mini .cover-coll, .cover.mini .cover-by, .cover.mini .cover-sub { display: none; }
.cover.mini .motif { margin: 0; }

.book { display: block; width: 100%; color: inherit; text-decoration: none; border-radius: var(--r-xs); transition: transform .2s ease; }
.book:hover { transform: translateY(-4px); }
.book:hover .cover { box-shadow: var(--shadow), 0 14px 24px -14px rgba(20, 24, 30, .45); }

/* A shelf: a row of covers in the look's grey panel, scrolling sideways within itself, never up and
   down: room above for a cover lifted under the pointer, below for its shadow and the scrollbar. */
.shelf-wrap { position: relative; }
.shelf { display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 1.2rem; padding: 1.4rem 1.2rem 1.6rem; border-radius: var(--radius-lg); background: var(--shelf); scrollbar-width: thin; }
.shelf::after { content: ''; flex: 0 0 .2rem; }
.shelf > div { flex: 0 0 clamp(7.6rem, 6rem + 4vw, 10rem); scroll-snap-align: start; }
.shelf-wrap.short { width: max-content; max-width: 100%; min-width: min(100%, 22rem); }
.shelf-note { flex: 1 1 22rem; align-self: center; max-width: 34rem; padding: 0 0 0 1rem; scroll-snap-align: none; }
.shelf-note p { font: italic 400 var(--fs-9)/1.6 var(--reading); color: var(--ink-2); }

/* ---- Home ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin: 1.2rem 0 2.5rem; }
.hero h1 { margin-bottom: .6rem; }
.bigfind { display: flex; gap: .6rem; margin: 1.6rem 0 1rem; max-width: 36rem; }
.bigfind label { flex: 1; padding: 0 14px; }
.bigfind input { min-height: 3rem; font-size: var(--fs-8); }
/* Its facts, as the school's grey chips. */
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.facts span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--kit-radius); background: var(--surface-2); font: 600 var(--fs-4)/1 var(--sans); color: var(--ink-2); }
/* The figure in its frame, on its paper, as the school's figures are. */
.hero-art { order: -1; margin: 0; padding: .9rem; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--line); }
.art { display: block; width: 100%; height: auto; }
.hero-art .art { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.art .grid line { stroke: var(--line); stroke-width: 1; }
/* Drawn in the look's ink blue; gold for the one thing it is about, its two fixed points. */
.art .orbit { fill: none; stroke: var(--brand); stroke-width: .8; stroke-linejoin: round; opacity: .9; }
.art .fixed { fill: var(--hi); }
.art .label { fill: var(--ink-2); font: italic 600 15px var(--reading); }
@media (prefers-reduced-motion: no-preference) {
  .art .orbit { stroke-dasharray: 1 1; animation: draw 14s ease-in-out infinite; }
}
@keyframes draw { 0% { stroke-dashoffset: 1; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.hero-art figcaption { margin-top: .6rem; font-size: var(--fs-6); line-height: 1.5; color: var(--ink-2); }
/* The library's drawing beside its name: the covers' lines, in the look's ink, gold in its highlight. */
.hero-art .motif { --cv-line: var(--brand); --cv-line-2: color-mix(in srgb, var(--brand) 40%, transparent); --cv-gold: var(--hi); padding: 1.5rem; }
.hero-art figcaption math { font-family: var(--math); }

.place { margin: .4rem 0 1.4rem; }
.place[hidden] { display: none; }
.place-card { display: flex !important; align-items: center; gap: 1.1rem; max-width: 40rem; padding: .9rem 1.2rem; }
.place-text { display: grid; gap: .15rem; flex: 1; }
.place-text .kicker { margin: 0; }
.place-text b { font: var(--display-weight) var(--fs-10)/1.25 var(--display); }
.place-text .bar { margin-top: .35rem; }
.place-card > .ic { color: var(--brand); }

.featured { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
/* One featured work: its cover beside its words, the whole width. */
.featured:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.feature:has(.feature-fig .cover) { grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); }
.feature-fig:has(.cover) { display: grid; place-items: center; padding: 1.4rem; background: var(--surface-2); }
.feature-fig .cover { width: 100%; max-width: 14rem; }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
.feature-fig { display: block; background: #000; }
.feature-fig img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 16rem; }
.feature-body { padding: 1.6rem; display: flex; flex-direction: column; }
.feature-body h2 { font-size: var(--fs-13); }
.feature-body > p:not(.kicker):not(.byline) { font-family: var(--reading); font-size: var(--fs-8); }
.feature-body .row-btns { margin-top: auto; }
.byline { color: var(--ink-2); font-size: var(--fs-6); }
.byline a { color: inherit; }
.book-feature { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.bf-cover { display: block; text-decoration: none; }
.bf-body h2 { font-size: var(--fs-12); }
.bf-body .row-btns { flex-direction: column; align-items: stretch; }

.shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; margin-bottom: 3rem; }
.coll-head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .9rem; }
.coll-head > div:first-child { flex: 1; min-width: 0; }
.coll-head h2 { margin: 0 0 .2rem; font-size: var(--fs-13); display: flex; align-items: baseline; gap: .6rem; }
/* A count beside a title (the school's card header count). */
.count { display: inline-block; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--kit-radius); background: var(--surface-2); font: 700 var(--fs-3)/22px var(--sans); color: var(--ink-2); text-align: center; letter-spacing: 0; }
.see { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; padding: .4rem 0; white-space: nowrap; }
.shelf-nav { display: flex; gap: .2rem; }
.shelf-nav .iconbtn { border: 1px solid var(--line); background: var(--card); }

.by-author h2 { font-size: var(--fs-13); }
.authors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.author { display: flex !important; align-items: center; gap: 1rem; }
.avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font: var(--display-weight) var(--fs-10)/1 var(--display); flex: none; object-fit: cover; }
.author-text { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.author-text b { font: var(--display-weight) var(--fs-10)/1.25 var(--display); }
.stack { display: flex; flex: none; }
.stack .cover.mini { width: 2.6rem; }
.stack .cover.mini + .cover.mini { margin-left: -.9rem; }

/* ---- The footer: the organisation's tree (the app's TreeFooter.svelte), its own links, its line ---- */
.foot { border-top: 1px solid var(--line); background: var(--surface-2); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 2.4rem clamp(1rem, 3vw, 2.5rem) 2rem; }
.tree-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.tree-head .mark { width: 2.75rem; height: 2.75rem; }
.tree-head .kicker { margin: 0 0 .15rem; }
.tree-head .muted { margin: 0; font-family: var(--reading); font-style: italic; }
/* The cards in a row (as many as it has, four at most: data-n), hung from one line like a family tree. */
.tree[data-n="2"] { --n: 2; }
.tree[data-n="3"] { --n: 3; }
.tree { --n: 4; --gap: 1rem; position: relative; list-style: none; margin: 0 0 1.6rem; padding: 1.1rem 0 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.tree::before { content: ''; position: absolute; top: 0; left: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n))); right: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n))); border-top: 1px solid var(--line-2); }
.tree li { position: relative; }
.tree li::before { content: ''; position: absolute; top: -1.1rem; left: 50%; height: 1.1rem; border-left: 1px solid var(--line-2); }
.tree a, .tree .tree-card { display: grid; align-content: start; gap: .15rem; height: 100%; padding: .9rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.tree a:hover { border-color: var(--brand); }
.tree b { font: var(--display-weight) var(--fs-9)/1.25 var(--display); }
.tree .host { color: var(--brand); font-weight: 600; font-size: var(--fs-5); overflow-wrap: anywhere; }
.tree small { color: var(--ink-2); font-size: var(--fs-5); }
.tree .here a { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
/* One still to come: shown, not linked, its frame dashed and a « Coming » tag. */
.tree .coming .tree-card { border-style: dashed; border-color: var(--line-2); background: none; }
.tree .soon { justify-self: start; margin-top: .35rem; padding: .1rem .6rem; border-radius: var(--pill); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-3); font-weight: 600; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.foot-links a { display: inline-block; min-width: 1.6rem; text-align: center; padding: .35rem 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--brand); text-decoration: underline; }
.legal { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-5); text-align: center; }

/* ---- Browse ---- */
.page-head { margin: 1rem 0 1.4rem; max-width: 52rem; }
.page-head .tagline { font-size: var(--fs-9); margin-bottom: .6rem; }
.page-head .lede { font-size: var(--fs-8); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem; margin-bottom: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* One choice of a few, all in view (ui-seg). */
.view-pick { display: flex; gap: 2px; margin-left: auto; padding: 4px; border-radius: var(--kit-radius); background: var(--surface-2); }
.view-pick button { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--kit-radius); background: transparent; color: var(--ink-2); font: 600 var(--fs-5)/1 var(--sans); cursor: pointer; }
.view-pick button:hover { color: var(--ink); }
.view-pick button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 2.2rem 1.6rem; }
.entry[hidden] { display: none; }
.entry-cover { display: block; margin-bottom: .9rem; text-decoration: none; }
.entry-body .kicker { display: none; }
.entry-body h2 { font-size: var(--fs-9); line-height: 1.25; margin-bottom: .25rem; }
.entry-body .muted { font-size: var(--fs-5); margin-bottom: .4rem; }
.entry-sum { font-family: var(--reading); font-size: var(--fs-6); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
[data-view="list"] .entries { grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-view="list"] .entry { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
[data-view="list"] .entry-cover { margin: 0; }
[data-view="list"] .entry-cover .cover-in { padding: 8cqi 7cqi; }
[data-view="list"] .entry-cover .cover-title, [data-view="list"] .entry-cover .cover-coll, [data-view="list"] .entry-cover .cover-by, [data-view="list"] .entry-cover .cover-sub { display: none; }
[data-view="list"] .entry-cover .motif { margin: 0; }
[data-view="list"] .entry-body .kicker { display: block; margin-bottom: .3rem; }
[data-view="list"] .entry-body h2 { font-size: var(--fs-10); }
[data-view="list"] .entry-sum { -webkit-line-clamp: 2; }
.empty { color: var(--ink-2); }

/* ---- A work ---- */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--fs-5); color: var(--ink-2); margin: .3rem 0 1.4rem; }
.crumbs a { color: var(--ink-2); padding: .25rem 0; }
.work { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-bottom: 3rem; }
.work-art { position: sticky; top: 5.5rem; }
.cover.big { box-shadow: var(--shadow), 0 18px 36px -24px rgba(20, 24, 30, .45); }
.inside { margin-top: 1.4rem; }
.inside .kicker { margin-bottom: .5rem; }
.inside-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.inside-pages > span { display: block; border-radius: var(--r-xs); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.inside-pages img { display: block; width: 100%; height: auto; }
.work-main { max-width: 46rem; }
.work-main h1 { margin-bottom: .35rem; }
.subtitle { font: italic 400 var(--fs-10)/1.4 var(--reading); color: var(--ink-2); margin-bottom: .7rem; }
.desc { font: 400 var(--fs-9)/1.7 var(--reading); margin: 1.2rem 0 1.6rem; }
.desc math { font-family: var(--math); }
.more-text summary { display: inline-flex; align-items: center; min-height: 2.4rem; color: var(--brand); font: 600 var(--fs-7)/1 var(--sans); cursor: pointer; }
/* A sentence in its place (ui-notice). */
.support { padding: 10px 14px; border-radius: var(--kit-radius); background: var(--brand-soft); color: var(--ink); font-size: var(--fs-7); }
.sub-h { font-size: var(--fs-12); margin: 1.6rem 0 .8rem; }
.formats { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fmt { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.fmt-ic { width: 1.6rem; height: 1.6rem; color: var(--brand); }
.fmt-text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.fmt-text b { font: var(--display-weight) var(--fs-9)/1.3 var(--display); }
.fmt-text small { color: var(--ink-2); font-size: var(--fs-5); }
.fmt.later .fmt-ic { color: var(--ink-2); }
/* « Coming »: the school's grey chip. */
.soon { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--kit-radius); background: var(--surface-2); color: var(--ink-2); font: 700 var(--fs-4)/1 var(--sans); }
.work-actions { display: flex; gap: .5rem; margin: 1rem 0 0; }
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: c; }
.contents a { display: flex; gap: 1rem; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--reading); }
.contents a:hover span:first-child { color: var(--brand); text-decoration: underline; }
.contents .sub a { padding-left: 1.4rem; color: var(--ink-2); }
/* A book's chapter in its contents: its name over its parts. */
.contents .chapter .kicker { margin: 1.1rem 0 .2rem; }
.toc .chapter .kicker { margin: .9rem 0 .1rem 1rem; }
/* A printed book's own pages (title page, dedication, copyright), small and centred, side by side. */
.edition { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.ed-page { padding: 1.4rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface, transparent); font: 400 var(--fs-5)/1.45 var(--reading); color: var(--ink-2); text-align: center; }
.ed-page p { margin: 0 0 .15rem; }
.ed-page figure { margin: .8rem auto; }
.ed-page { hyphens: none; }
.ed-page .fig, .ed-page .fig .imgs { margin: .8rem auto; padding: 0; border: 0; background: none; box-shadow: none; }
.ed-page img { width: 3.2rem; height: auto; }
.ed-title p:first-child { font-size: var(--fs-9); color: var(--ink); }
.ed-dedication { display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.contents .pg { color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.more { margin-bottom: 2.6rem; }

/* ---- The reader ---- */
body.reading main { max-width: 1320px; padding-top: 1rem; }
.reader-top { gap: .7rem; }
/* Without a mark, its home icon still a target a finger finds (24 px at least). */
.brand.mini { min-height: 2.1rem; min-width: 2.1rem; justify-content: center; }
.brand.mini .mark { width: 2.1rem; height: 2.1rem; }
.rt-title { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.rt-title span { font-size: var(--fs-4); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-title b { font: var(--display-weight) var(--fs-8)/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-tools { display: flex; gap: .4rem; flex: none; }
/* The reader's tools, as the school's lesson tools (Listen, PDF, Notes). */
.tool { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 600 var(--fs-6)/1 var(--sans); text-decoration: none; cursor: pointer; }
.tool:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line-2)); }
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); }
.aa { font: 700 var(--fs-7)/1 var(--display); }
.toc-btn { display: none; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.progress i { display: block; width: 0; height: 100%; background: var(--brand); transition: width .1s linear; }

.reader { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
/* A work read on one page (a short one, or a PDF's pages): the paper alone, in the middle. */
.reader:not(:has(> .toc)) { grid-template-columns: minmax(0, 1fr); }
.reader:not(:has(> .toc)) .paper { width: 100%; max-width: 48rem; margin: 0 auto; }
/* The part being read, in its contents. */
.toc li.on > a { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
/* A PDF work's pages: each a sheet, its number under it. */
.pdf-page { margin: 0 0 1.6rem; }
.pdf-page img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xs); box-shadow: var(--shadow); }
.pdf-page figcaption { margin-top: .5rem; text-align: center; font-size: var(--fs-5); color: var(--ink-2); }
.toc { position: sticky; top: 5.2rem; max-height: calc(100vh - 6.5rem); overflow: auto; padding: .4rem .2rem 1rem 0; }
.toc .sheet-head .kicker { margin: 0; }
.toc ol { list-style: none; margin: .6rem 0 1.2rem; padding: 0; border-left: 2px solid var(--line); }
.toc li a { display: flex; flex-direction: column; gap: .1rem; margin-left: -2px; padding: .5rem .2rem .5rem 1rem; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: var(--fs-6); line-height: 1.3; }
.toc li a:hover { color: var(--brand); }
.toc li.sub a { padding-left: 1.8rem; font-size: var(--fs-5); }
.toc li.later a { color: var(--ink-2); }
.toc .pg { font-size: var(--fs-4); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.toc a.on { border-left-color: var(--brand); color: var(--brand); font-weight: 700; }
.toc-progress { padding: .9rem 1rem; border-radius: var(--radius-lg); background: var(--surface-2); }
.toc-progress p { margin: .55rem 0 0; font-size: var(--fs-5); }
.sheet-close { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.paper { max-width: 44rem; width: 100%; }
.paper-head { margin: .6rem 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.paper-head h1 { margin-bottom: .6rem; }
/* The text in the book's face, at the school's reading size. */
.prose { --size: var(--fs-9); font: 400 var(--size)/1.72 var(--reading); }
[data-size="s"] .prose { --size: 1.02rem; }
[data-size="l"] .prose { --size: 1.32rem; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: 1.6em; margin: 2.2em 0 .7em; }
.prose section:first-child h2 { margin-top: 0; }
.prose math { font-family: var(--math); font-size: 1.06em; }
.prose strong { font-weight: 600; }
/* Book 1's definitions (the school's import): in the accent, as the school sets them; a formula and
   the punctuation it touches stay on one line. */
.prose em strong, .prose strong em { color: var(--brand); }
.prose .m-p { white-space: nowrap; }
.prose math.wide { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
.abstract { margin: 0 0 2rem; padding: 1.4rem 1.6rem .6rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
/* « Abstract » and « Definition »: the school's plain kicker. */
.abstract h2 { font: 600 var(--label-size)/1.2 var(--sans) !important; margin: 0 0 .7rem !important; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--brand); }
.abstract p { font-size: .97em; }
.eq { display: flex; align-items: center; gap: 1rem; margin: 1.3em 0; }
.eq-math { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: .6em .2em; border-radius: var(--radius); }
.eq-math:focus-visible { background: var(--surface-2); }
.eq-no { flex: none; font: var(--fs-7)/1 var(--math); color: var(--ink-2); }
.eq math[display="block"] { margin: 0; }
.definition { margin: 1.6em 0; padding: 1.1em 1.4em .4em; border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); font-style: italic; }
.definition .def-k { margin: 0 0 .5em; font: 600 var(--label-size)/1.2 var(--sans); font-style: normal; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--brand); }
.definition ol { margin: 0 0 1em; padding-left: 1.4em; }
.definition li { margin-bottom: .4em; }
.definition li::marker { color: var(--brand); font-style: normal; }
/* Figures on their plate, the paper they were drawn on. */
.fig { margin: 2rem 0; }
.fig .imgs { padding: .9rem; border-radius: var(--radius-lg); background: var(--plate); border: 1px solid var(--line); }
.fig .imgs.dark { padding: 0; overflow: hidden; background: #000; }
.fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.fig > figcaption { margin-top: .6rem; font: var(--fs-6)/1.5 var(--sans); color: var(--ink-2); text-align: center; }
.fig.quad .imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.fig.quad figure { margin: 0; }
.fig.quad figure figcaption { margin-top: .2rem; text-align: center; font: var(--fs-5)/1.3 var(--sans); color: #444; }
.cut { margin: 2em 0; padding: 1rem 1.2rem; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); font: var(--fs-6)/1.5 var(--sans); color: var(--ink-2); text-align: center; }
.cut::before { content: '⋯'; display: block; font-size: var(--fs-11); line-height: 1; color: var(--brand); margin-bottom: .3rem; }
.excerpt-end { margin: 3rem 0 1rem; }
.excerpt-end p { font-family: var(--reading); font-size: var(--fs-8); }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem 0 0; }
.pager a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; padding: .4rem 0; }

/* Sheets: Display (a panel at the top right; a sheet from the bottom on a phone) and, on a phone, Contents. */
.sheet.settings { position: fixed; top: 4.6rem; right: clamp(1rem, 3vw, 2.5rem); z-index: 35; width: 23rem; max-height: calc(100vh - 6rem); overflow: auto; padding: 1rem 1.2rem 1.2rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop), 0 18px 40px -20px rgba(20, 24, 30, .35); }
.sheet.settings[hidden] { display: none; }
.settings h3 { margin: 1rem 0 .55rem; font-size: var(--fs-8); }
.settings .sheet-head .kicker { margin: 0; }
/* A choice of a few (ui-pick, as radios). */
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 600 var(--fs-5)/1 var(--sans); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.look-pick { display: grid; gap: .5rem; }
.look-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; text-align: left; padding: .5rem .7rem .5rem .5rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.look-card[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.look-sample { grid-row: span 2; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.look-sample b { font: var(--display-weight) var(--fs-12)/1 var(--display); letter-spacing: var(--display-track); }
.look-sample .m math { font-family: var(--math); font-size: .95rem; color: var(--brand); }
.look-name { font-weight: 700; }
.look-name em { margin-left: .3rem; font-style: normal; font-weight: 600; font-size: var(--fs-4); color: var(--ink-2); }
.look-line { color: var(--ink-2); font-size: var(--fs-5); }
.settings > .muted { margin: 1rem 0 0; }

.player { position: fixed; left: 50%; bottom: 1.2rem; z-index: 36; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; width: min(30rem, calc(100vw - 2rem)); padding: .45rem .6rem; border-radius: var(--kit-radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop), 0 18px 40px -20px rgba(20, 24, 30, .4); }
.player[hidden] { display: none; }
.player .iconbtn { color: var(--ink); }
.player [data-play] { background: var(--brand); color: var(--brand-ink); }
.player-mid { flex: 1; display: grid; gap: .3rem; min-width: 0; }
.player-mid b { font-size: var(--fs-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .bar i { transition: width .4s linear; }
.speed { min-width: 2.75rem; min-height: 2.5rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); color: var(--ink); font: 700 var(--fs-5)/1 var(--sans); cursor: pointer; }

/* ---- Search ---- */
.search-page .page-head .bigfind { max-width: 44rem; margin: 1rem 0 .6rem; }
.summary-line { color: var(--ink-2); margin: 0 0 1rem; }
.summary-line b { color: var(--ink); }
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 60rem; }
.hit { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: 1.2rem 1.3rem; }
.hit:not(:has(> .hit-cover)) { grid-template-columns: minmax(0, 1fr); }
.hit-cover { display: block; text-decoration: none; }
.hit-cover .cover.mini { width: 100%; }
.hit .kicker { margin-bottom: .35rem; }
.hit h2 { font-size: var(--fs-10); margin-bottom: .2rem; }
.hit .muted { font-size: var(--fs-5); margin-bottom: .5rem; }
.hit p.sum { font-family: var(--reading); margin: 0 0 .6rem; }
.hit-in { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.hit-in a { display: flex; gap: .7rem; align-items: baseline; padding: .55rem .75rem; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); text-decoration: none; font: var(--fs-6)/1.5 var(--reading); }
.hit-in a:hover { outline: 1px solid var(--brand); }
.hit-in a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.hit h2, .hit p { overflow-wrap: anywhere; }
.hit-in .pg { flex: none; font: 600 var(--fs-4)/1.6 var(--sans); color: var(--brand); letter-spacing: var(--label-track); text-transform: var(--label-case); font-variant-numeric: lining-nums; }
mark { background: color-mix(in srgb, var(--hi) 30%, transparent); color: inherit; padding: 0 .1em; border-radius: var(--r-xs); }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.try[hidden] { display: none; }
.try p { margin: 0 .3rem 0 0; }

/* ---- About ---- */
.about-hero { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin: 1rem 0 2.4rem; }
.about-hero .seal { width: 100%; height: auto; border-radius: 50%; box-shadow: var(--shadow); }
.about-hero h1 { margin-bottom: .8rem; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 3rem; }
.about-grid .span2 { grid-column: span 2; }
.about-grid .span3 { grid-column: span 3; }
.about-grid h2 { font-size: var(--fs-11); }
.about-grid p { font-family: var(--reading); font-size: var(--fs-8); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .6rem; align-items: baseline; }
.ticks .ic { color: var(--ok); }
.coll-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.coll-list a { display: grid; gap: .3rem; align-content: start; height: 100%; padding: 1rem; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.coll-list a:hover { outline: 1px solid var(--brand); }
.coll-list b { font: var(--display-weight) var(--fs-10)/1.25 var(--display); }
.coll-list i { font-family: var(--reading); color: var(--brand); }
.coll-list .muted { font-size: var(--fs-5); }
.swatch { display: block; width: 2.2rem; height: .5rem; border-radius: var(--r-xs); background: var(--cv); margin-bottom: .3rem; }
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.channels a { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.channels a:hover { color: var(--brand); }

/* ---- Toast (the school's ui-toast) ---- */
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; max-width: min(92vw, 32rem); padding: 12px 16px; border-radius: var(--kit-radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop), 0 12px 30px -16px rgba(20, 24, 30, .35); font-weight: 600; transition: .25s; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
body.reading .toast { bottom: 5.5rem; }

/* ---- Narrower screens ---- */
@media (max-width: 1180px) {
  .find input { width: 10rem; }
  /* As the school's bar: the links keep their icons and let their words go (each keeps its name for
     a screen reader) before anything else gives way. */
  .tabs .lbl { display: none; }
  .featured { grid-template-columns: minmax(0, 1fr); }
  .book-feature { grid-template-columns: 7rem minmax(0, 1fr); }
  .bf-body .row-btns { flex-direction: row; }
}
/* Just above a phone's width: the title one step smaller, so the links still fit beside it. */
@media (min-width: 761px) and (max-width: 800px) {
  .word { font-size: var(--fs-8); }
}
@media (max-width: 1020px) {
  /* Too narrow for the links and the open field side by side: while searching, the field takes the
     links' place. */
  .top:has(.find.open) .tabs { display: none; }
  .find.open { margin-left: auto; }
  .tool span:not(.aa) { display: none; }
  .tool { padding: 0 .7rem; min-width: 2.6rem; justify-content: center; }
  .reader { grid-template-columns: minmax(0, 1fr); }
  .paper { margin: 0 auto; }
  .toc-btn { display: inline-flex; }
  .toc.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 35; max-height: 78vh; padding: 1rem 1.2rem 1.4rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--card); border: 1px solid var(--line); box-shadow: 0 -1px 0 var(--line), 0 -18px 40px -20px rgba(20, 24, 30, .4); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .toc.sheet.open { transform: none; visibility: visible; }
  .sheet-close { display: inline-grid; }
  .tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree::before, .tree li::before { display: none; }
  .tree { padding-top: 0; }
  .coll-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .tabs > a, .menu > summary { padding: .5rem .45rem; }
  .find input { width: 14rem; }
  .tabs { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .work { grid-template-columns: minmax(0, 1fr); }
  .work-art { position: static; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.2rem; align-items: end; }
  .inside { margin: 0; }
  .about-hero { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .btn { min-height: 48px; }
  .btn.quiet { min-height: 44px; }
  .card { padding: 16px; }
}
@media (max-width: 760px) {
  .tabs { display: none; }
  .find { display: none; }
  .top { justify-content: space-between; }
  .top:not(.reader-top)::after { content: ''; width: 0; }
  .bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; justify-content: space-around; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) var(--bar-opacity), transparent); -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur); border-top: 1px solid var(--line); }
  .bottom a { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 4rem; padding: .35rem .6rem; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: var(--fs-3); font-weight: 600; }
  .bottom a.on { color: var(--brand); }
  body:not(.reading) .foot { padding-bottom: 4.5rem; }
  .toast { bottom: 5.5rem; }
  body.reading .toast { bottom: 9rem; }
  h2 { font-size: var(--fs-11); }
  .coll-head h2, .by-author h2 { font-size: var(--fs-12); }
  .bigfind { flex-direction: column; }
  .bigfind .btn { align-self: flex-start; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature:has(.feature-fig .cover) { grid-template-columns: minmax(0, 1fr); }
  .feature-fig .cover { max-width: 10rem; }
  .feature-fig img { min-height: 0; aspect-ratio: 1.93; }
  .feature-body { padding: 1.2rem; }
  .feature-body h2 { font-size: var(--fs-12); }
  .book-feature { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
  .bf-body .row-btns { flex-direction: column; align-items: flex-start; }
  .coll-head { flex-wrap: wrap; }
  .shelf-nav { display: none; }
  .shelf-note { flex-basis: 13rem; padding-left: 0; }
  .shelf-note p { font-size: var(--fs-7); }
  .shelf { padding: 1.1rem .9rem 1.4rem; scroll-padding: 0 .9rem; }
  .authors { grid-template-columns: minmax(0, 1fr); }
  .author .stack { display: none; }
  .view-pick { margin-left: 0; }
  .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .entry-sum { -webkit-line-clamp: 2; font-size: var(--fs-5); }
  .work-art { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .work-art .cover.big { width: min(15rem, 70vw); }
  .inside { width: 100%; }
  .fmt { flex-wrap: wrap; }
  .fmt .btn, .fmt .soon { margin-left: 2.6rem; }
  .rt-title span { display: none; }
  .rt-title b { font-size: var(--fs-7); }
  .brand.mini { display: none; }
  .rt-tools { gap: .3rem; }
  .tool { min-height: 2.6rem; padding: 0 .6rem; }
  .sheet.settings { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .prose { --size: 1.06rem; }
  [data-size="s"] .prose { --size: .96rem; }
  [data-size="l"] .prose { --size: 1.2rem; }
  .abstract { padding: 1.1rem 1.1rem .4rem; }
  .definition { padding: 1em 1em .3em; }
  .fig.quad .imgs { grid-template-columns: minmax(0, 1fr); }
  .player { bottom: 4.6rem; }
  .hit { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .9rem; padding: 1rem; }
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .about-hero .seal { width: 9rem; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-grid .span2, .about-grid .span3 { grid-column: auto; }
  .coll-list { grid-template-columns: minmax(0, 1fr); }
  .tree { grid-template-columns: minmax(0, 1fr); }
}

.cv-insights { --cv: var(--cv-1); }
.cv-foundations { --cv: var(--cv-2); }
.cv-explorations { --cv: var(--cv-3); }
.cv-masteries { --cv: var(--cv-4); }