/* ============================================================
   THE ILLUMINATED ARCHIVE — tokens
   Two inks and one metal, on paper. Nothing else, ever.
   ============================================================ */

:root {
  color-scheme: light;

  /* Reading Room (light) — crisp white ground, deep-navy ink. A royal academy:
     white paper, ocean-blue accent, gold as the shining metal. */
  --paper: #FFFFFF;      /* pure white ground */
  --paper-hi: #FFFFFF;   /* lifted surface */
  --stock: #EEF3FB;      /* ledger stock — palest blue */
  --well: #E2EBF8;       /* recessed wells */
  --ink: #0E1B33;        /* text — deep royal navy, high contrast on white */
  --ink-soft: #33425C;
  --muted: #5B6B86;
  --hairline: #CDD9EC;   /* crisp cool hairline */

  /* THE accent — interactive states, links, focus, progress, grading marks.
     A brilliant, electric ocean/royal blue. Never decoration, never a gradient. */
  --rubric: #1170FF;
  --rubric-deep: #0A54DC;

  /* Gold is the metal — royal, brilliant, and animated (see .gilt sheen + pulse). */
  --gold: #D2A522;
  --gold-bright: #FFEA95;

  /* Faculty inks — jewel tones for per-school wayfinding (covers, spines, plates). */
  --ink-foundations: #B07E14;   /* gold-ochre */
  --ink-sciences: #10529E;      /* royal blue */
  --ink-minds: #8C2A31;         /* crimson */
  --ink-making: #12736A;        /* deep teal */
  --ink-worklife: #7A5A22;      /* bronze-umber */

  /* Faculty tint for hover washes. */
  --faculty-wash: color-mix(in srgb, var(--faculty, var(--rubric)) 9%, var(--paper));

  /* Assessment verdicts (exempt from one-accent rule; shape+word always). */
  --verdict-yes: #12736A;   /* teal tick + "Correct" */
  --verdict-not: #8C2A31;   /* crimson cross + "Not yet" */

  /* Reading Lamp stepped opacity tokens (After Hours only). */
  --lamp-step-1: 0.72;
  --lamp-step-2: 0.48;

  /* Type — Cinzel carries the display voice: Trajan-style Roman inscriptional
     capitals, monumental and academic. */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-display-black: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'Geist Mono', 'Consolas', monospace;
  --font-ui: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-kid: 'Lexend', 'Segoe UI', system-ui, sans-serif;

  /* Rhythm — 8px baseline */
  --u: 8px;
  --u2: 16px; --u3: 24px; --u4: 32px; --u6: 48px; --u8: 64px; --u12: 96px;

  /* Measure */
  --measure: 68ch;
  --margin-col: 300px;

  --body-size: clamp(17px, 1.05rem + 0.15vw, 19px);
  --radius: 2px;          /* the University is nearly square-cornered */
  --focus-ring: 2px solid var(--rubric);

  /* Academic monogram — a tiled watermark of knowledge icons (book, dividers,
     star, quill, scroll) in gold line-work. Applied faintly site-wide, and
     stronger on the dark slabs. */
  /* A fine engraved lattice — overlapping rosettes with a small fleuron at each
     node. Guilloche-adjacent, illuminated, not clip-art. */
  --monogram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg transform='translate(22 22) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -13 Q-9 -16 -17 -13 L-17 12 Q-9 9 0 12 Q9 9 17 12 L17 -13 Q9 -16 0 -13 Z'/%3E%3Cpath d='M0 -13 L0 12'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66 22) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='0' cy='-15' r='2.4'/%3E%3Cpath d='M0 -13 L-9 15 M0 -13 L9 15 M-4.5 1 L4.5 1'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(110 22) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='0' cy='0' r='2.6'/%3E%3Cellipse cx='0' cy='0' rx='17' ry='7'/%3E%3Cellipse cx='0' cy='0' rx='17' ry='7' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='0' rx='17' ry='7' transform='rotate(120)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(22 66) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 -14 L-6 -3 L-14 12 Q-15 15 -11 15 L11 15 Q15 15 14 12 L6 -3 L6 -14'/%3E%3Cpath d='M-9 -14 L9 -14 M-9 6 L9 6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66 66) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-13 -13 L13 -13 M-10 -13 L-10 11 M-3.5 -13 L-3.5 11 M3.5 -13 L3.5 11 M10 -13 L10 11 M-14 14 L14 14'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(110 66) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-15 -9 Q-15 -13 -11 -13 L15 -13 Q11 -13 11 -9 L11 9 Q11 13 15 13 L-9 13 Q-13 13 -13 9 L-13 -7 Q-13 -9 -15 -9 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(22 110) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='-8' r='4.5'/%3E%3Cpath d='M4 -4 L-15 15 M8 0 L-9 15 M12 -3 L0 15'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66 110) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-13 14 Q2 6 12 -14 Q0 -6 -6 6 Z'/%3E%3Cpath d='M-13 14 L-4 5'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(110 110) scale(0.5)'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Cpath d='M0 -15 L0 15 M-15 0 L15 0 M-10.6 -10.6 L10.6 10.6 M-10.6 10.6 L10.6 -10.6'/%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* After Hours (dark) — auto via system… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0A1730;      /* deep royal navy — never #000 */
    --paper-hi: #10213F;   /* lifted vitrine surface */
    --stock: #0E1E3C;
    --well: #061024;
    --ink: #EAF1FF;        /* crisp cool white text */
    --ink-soft: #C2D0E8;
    --muted: #93A6C6;
    --hairline: #24365C;
    --rubric: #5AA6FF;     /* brilliant sky-blue accent on navy */
    --rubric-deep: #2E7BE0;
    --gold: #F0D275;
    --gold-bright: #FFF0AE;
    --ink-foundations: #E0B24E;
    --ink-sciences: #5A9AE6;
    --ink-minds: #E07A76;
    --ink-making: #4FC0AE;
    --ink-worklife: #C9A567;
    --verdict-yes: #4FC0AE;
    --verdict-not: #E07A76;
    --faculty-wash: color-mix(in srgb, var(--faculty, var(--rubric)) 20%, var(--paper));
  }
}

/* …or explicit choice (persisted to localStorage, stamped on <html>). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A1730;
  --paper-hi: #10213F;
  --stock: #0E1E3C;
  --well: #061024;
  --ink: #EAF1FF;
  --ink-soft: #C2D0E8;
  --muted: #93A6C6;
  --hairline: #24365C;
  --rubric: #5AA6FF;
  --rubric-deep: #2E7BE0;
  --gold: #F0D275;
  --gold-bright: #FFF0AE;
  --ink-foundations: #E0B24E;
  --ink-sciences: #5A9AE6;
  --ink-minds: #E07A76;
  --ink-making: #4FC0AE;
  --ink-worklife: #C9A567;
  --verdict-yes: #4FC0AE;
  --verdict-not: #E07A76;
  --faculty-wash: color-mix(in srgb, var(--faculty, var(--rubric)) 20%, var(--paper));
}

/* One faculty ink per page. */
[data-ink="foundations"] { --faculty: var(--ink-foundations); }
[data-ink="sciences"]    { --faculty: var(--ink-sciences); }
[data-ink="minds"]       { --faculty: var(--ink-minds); }
[data-ink="making"]      { --faculty: var(--ink-making); }
[data-ink="work-life"]   { --faculty: var(--ink-worklife); }
:root { --faculty: var(--gold); }   /* faculty-less pages fall back to the metal */

/* ============ base ============ */
* { box-sizing: border-box; }

/* HARD horizontal-scroll lock — nothing may push the page wider than the
   viewport, and there is no sideways scroll to reach. Wide content (plates,
   tables, code) scrolls inside its OWN overflow-x container, never the body. */
html {
  background: var(--paper);
  overflow-x: clip;
  max-width: 100%;
}
body {
  margin: 0;
  background: transparent;   /* html carries the paper; ::before carries the monogram */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.62;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}
/* Custom scrollbar — slim, on-brand (blue thumb on the paper), not the default. */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--rubric) 60%, var(--hairline)) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--rubric) 50%, var(--hairline));
  border-radius: 999px;
  border: 3px solid var(--paper);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rubric); }

/* The monogram watermark was retired from content — it muddied the reading
 * ground. The engraved rosette now lives only in the Hall intro. */
table, .lining { font-variant-numeric: lining-nums tabular-nums; }

a { color: var(--rubric); text-decoration-color: color-mix(in srgb, var(--rubric) 45%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--rubric); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 1px; }
::selection { background: color-mix(in srgb, var(--rubric) 22%, transparent); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--u4) 0; }

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

/* Sprout / Explorer / Scholar / Deep-Dive shells */
:root[data-band="sprout"] body,
:root[data-band="explorer"] body {
  font-family: var(--font-kid);
  font-size: max(1.375rem, var(--body-size));
  line-height: 1.65;
  font-variant-numeric: normal;
}
:root[data-band="sprout"] button,
:root[data-band="sprout"] .btn,
:root[data-band="sprout"] input,
:root[data-band="sprout"] [role="radio"] { min-height: 76px; min-width: 76px; }

/* Reading comfort slider wires here (all ages, every lesson). */
:root { --comfort-wght: 400; --comfort-space: 0em; }
.lesson-body { word-spacing: var(--comfort-space); }
:root[data-band="sprout"] .lesson-body,
:root[data-band="explorer"] .lesson-body {
  font-variation-settings: 'wght' var(--comfort-wght);
  letter-spacing: calc(var(--comfort-space) / 2);
}