/* Base: site fonts, design tokens, document defaults, utilities.
   Link order in index.html: katex.css, base.css, layout.css, components.css.
   Media queries stay with their selectors (no separate responsive.css).
   Font URLs are root-relative (/fonts/...). */
@font-face{font-family:'Gentium Book Plus';font-weight:400;font-style:normal;font-display:block;src:url(/fonts/gentium-400.woff2) format('woff2')}
@font-face{font-family:'Gentium Book Plus';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/gentium-400i.woff2) format('woff2')}
@font-face{font-family:'Gentium Book Plus';font-weight:700;font-style:normal;font-display:block;src:url(/fonts/gentium-700.woff2) format('woff2')}
@font-face{font-family:'Gentium Book Plus';font-weight:700;font-style:italic;font-display:swap;src:url(/fonts/gentium-700i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:normal;font-display:block;src:url(/fonts/cormorant-600.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:italic;font-display:block;src:url(/fonts/cormorant-500i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:italic;font-display:block;src:url(/fonts/cormorant-600i.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/inter-400i.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter-600.woff2) format('woff2')}
/* Layout: a slim bar across the top on every screen (the name, search, the menu), a night-sky opener (the cover's
   emblem), then one reading column lit by gold markers, with a sticky contents rail on wide screens. The menu opens
   over the page in the cover's night: a search that answers questions, the reading level and the contents. */
:root {
  /* dark-first: the page lives in the cover's night */
  color-scheme: dark;
  --bar: 52px;
  --night: #05070E; --night-2: #111830; --hero-fg: #FFFBF2; --hero-fg-2: #E9E1CF; --hero-gold: #F5C451;
  /* the night's own quieter tones, for the menu, which is always night */
  --night-fg-2: #B9B1A1; --night-rule: #252C3F; --night-rule-2: #39415A; --night-gold-2: #C99A2E;
  --night-surface: rgba(255, 251, 242, 0.05); --night-glow: rgba(245, 196, 81, 0.38);
  --bar-bg: rgba(8, 11, 20, 0.97); --bar-line: #252C3F;
  --bg: #080B14; --surface: #0E1322; --surface-2: #151C30;
  --fg: #ECE6D8; --fg-2: #B9B1A1; --rule: #252C3F; --rule-2: #39415A;
  --gold: #F1C35A; --gold-2: #C99A2E; --gold-ink: #1A1305; --glow: rgba(241, 195, 90, 0.38); --glow-soft: rgba(241, 195, 90, 0.12);
  --stated: #93BBFF; --measured: #5FD3C7; --inference: #F2AD4E;
  --verdict-bg: #16130B; --verdict-line: #6E5622;
  --dia-ink: #ECE6D8; --dia-ink-2: #B9B1A1; --dia-line: #8D8778; --dia-sep: #343B50; --dia-panel: #151B2C; --dia-blue: #79A8FF;
  --shadow: rgba(0, 0, 0, 0.45);
  --hl-bg: rgba(241, 195, 90, 0.17); --hl-fg: #FFE7AE; --hl-edge: rgba(241, 195, 90, 0.55);
  --font-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --font-body: 'Gentium Book Plus', 'Gentium Plus', Georgia, 'Times New Roman', serif;
  --font-dia: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #FBFAF7; --surface: #F3F2EE; --surface-2: #FFFFFF;
    --fg: #171B25; --fg-2: #515867; --rule: #DDD9CF; --rule-2: #C9C3B5;
    --gold: #8A5D08; --gold-2: #B8913A; --gold-ink: #FFFFFF; --glow: rgba(184, 145, 58, 0.28); --glow-soft: rgba(184, 145, 58, 0.10);
    --stated: #1F4FA8; --measured: #0B6A64; --inference: #8C5100;
    --verdict-bg: #FBF2DC; --verdict-line: #E3C780;
    --dia-ink: #1f1e1d; --dia-ink-2: #5f5e5a; --dia-line: #8a8986; --dia-sep: #d9d7d2; --dia-panel: #f3f2ee; --dia-blue: #2f6fdf;
    --shadow: rgba(23, 27, 37, 0.16);
    --hl-bg: #F9DD8A; --hl-fg: #1A1505; --hl-edge: rgba(176, 128, 26, 0.55);
    --bar-bg: rgba(251, 250, 247, 0.97); --bar-line: #DDD9CF;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FBFAF7; --surface: #F3F2EE; --surface-2: #FFFFFF;
  --fg: #171B25; --fg-2: #515867; --rule: #DDD9CF; --rule-2: #C9C3B5;
  --gold: #8A5D08; --gold-2: #B8913A; --gold-ink: #FFFFFF; --glow: rgba(184, 145, 58, 0.28); --glow-soft: rgba(184, 145, 58, 0.10);
  --stated: #1F4FA8; --measured: #0B6A64; --inference: #8C5100;
  --verdict-bg: #FBF2DC; --verdict-line: #E3C780;
  --dia-ink: #1f1e1d; --dia-ink-2: #5f5e5a; --dia-line: #8a8986; --dia-sep: #d9d7d2; --dia-panel: #f3f2ee; --dia-blue: #2f6fdf;
  --shadow: rgba(23, 27, 37, 0.16);
  --hl-bg: #F9DD8A; --hl-fg: #1A1505; --hl-edge: rgba(176, 128, 26, 0.55);
  --bar-bg: rgba(251, 250, 247, 0.97); --bar-line: #DDD9CF;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (min-width: 1024px) { :root { --bar: 60px; } }
@media (orientation: landscape) and (max-height: 600px) and (max-width: 999.98px) { :root { --bar: 46px; } }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--bar) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 18px; line-height: 1.62;
       font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; }
@media (min-width: 900px) { body { font-size: 19px; } }

.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* a tap answers in its own frame: no grey box over what was tapped, and no wait to see whether a second tap follows */
a, button, summary, label, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--hero-gold); color: #1A1305; padding: 10px 14px;
        border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }