/* ── Fonts ──────────────────────────────────────────────────────────────
   Already vendored in static/fonts/ — self-hosted, no Google Fonts request. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/static/fonts/atkinson/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/static/fonts/atkinson/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/static/fonts/atkinson/Atkinson-Hyperlegible-Italic-102.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/static/fonts/atkinson/Atkinson-Hyperlegible-BoldItalic-102.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'ET Book';
  src: url('/static/fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff') format('woff'),
       url('/static/fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ET Book';
  src: url('/static/fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff') format('woff'),
       url('/static/fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ET Book';
  src: url('/static/fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff') format('woff'),
       url('/static/fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ET Book is scoped to long-form pages only (see .longform below), not
   applied sitewide to headings; those stay in Atkinson Hyperlegible via
   font-sans, matching the rest of the UI. */
.longform, .longform h1, .longform h2, .longform h3 {
  font-family: 'ET Book', Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
}
.longform { font-size: 1rem; }
.longform :is(p, li, td, th, small) { font-size: max(1em, 12px); }

/* ── Sidenotes (Tufte-style) ────────────────────────────────────────────
   A numbered inline marker plus a note positioned in the right margin on
   wide viewports, so citations/asides don't interrupt the reading line. On
   narrow viewports there's no margin to float into, so the note becomes an
   inline block right after its marker instead — no JS, no hover-to-reveal,
   always readable. */
.sidenote-number { font-size: 0.7em; vertical-align: super; }
.sidenote {
  float: right;
  clear: right;
  margin-right: -46%;
  width: 42%;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #6b7280;
  margin-top: 0.15rem;
}
@media (max-width: 1024px) {
  .sidenote {
    float: none;
    display: block;
    width: auto;
    margin: 0.5rem 0 1.25rem 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0.375rem 0.375rem 0;
  }
}
/* Dark-mode sidenote colors — the muted-text neutral (--color-dark-muted)
   computes to 11.98:1 against the card surface (--color-dark-card) and
   13.36:1 against the page background (--color-dark-bg), both comfortably
   above the 7:1 AAA target used throughout this palette. */
.dark .sidenote {
  color: var(--color-dark-muted);
  border-left-color: var(--color-dark-divider);
  background: var(--color-dark-card);
}

/* ── Dark-mode palette ──────────────────────────────────────────────────
   Single source of truth for every dark-mode color on the site. Change a
   value here and it propagates everywhere: templates/base.html's Tailwind
   config maps named color tokens (dark-bg, dark-card, ...) to these
   variables, so template classes read `dark:border-dark-border` etc.
   instead of a literal hex — no other file needs to change.

   True neutral throughout — no blue-tinted grays — since Tailwind's default
   `gray` scale reads as an odd hue in dark mode. Computed via the sRGB
   relative-luminance method, targeting 7:1 AAA (not just 4.5:1 AA) against
   the actual surface each color sits on:
     --color-dark-bg      #0a0a0a  page background (near-black, not pure
                           #000 so full-white text doesn't halate as hard
                           for users with astigmatism)
     --color-dark-card    #181818  card/surface background
     --color-dark-nested  #262626  nested surface: chart bar tracks,
                           icon-badge circles, badges sitting on a card
     --color-dark-text    #f5f5f5  primary text — 16.28:1 on card
     --color-dark-muted   #d4d4d4  secondary/muted text — 11.98:1 on card
     --color-dark-faint   #525252  decorative/low-emphasis icons only
                           (chevrons etc.) — not used for text needing a
                           contrast floor
     --color-dark-border  #737373  visible/interactive borders — 3.75:1
                           against card (clears the 3:1 non-text UI-
                           component-contrast guideline)
     --color-dark-divider #404040  decorative dividers only — no contrast
                           floor needed, never used as text or as an
                           interactive boundary

   Chart-specific (SVG `style=""` attributes can't use Tailwind `dark:`
   classes, so these need an explicit light+dark pair, unlike the tokens
   above which are only ever read through a `dark:`-gated class): */
:root {
  --color-dark-bg: #0a0a0a;
  --color-dark-card: #181818;
  --color-dark-nested: #262626;
  --color-dark-text: #f5f5f5;
  --color-dark-muted: #d4d4d4;
  --color-dark-faint: #525252;
  --color-dark-border: #737373;
  --color-dark-divider: #404040;

  --chart-track: #e5e7eb;
  --chart-grid: #f3f4f6;
  --chart-axis-text: #6b7280;
  --chart-tick: #9ca3af;
  --chart-dot-ring: #ffffff;
  --chart-ink: #111827;
  --chart-card: #ffffff;
}
.dark {
  --chart-track: #404040;
  --chart-grid: #262626;
  --chart-axis-text: #d4d4d4;
  --chart-tick: #a3a3a3;
  --chart-dot-ring: #181818;
  --chart-ink: #f5f5f5;
  --chart-card: #181818;
}

/* ── Print stylesheet ───────────────────────────────────────────────────
   For long-form pages meant to be handed to an ethics board or printed for
   a file — strip UI chrome, keep meaning independent of color, and expand
   link URLs since a printout has no clickable hrefs. */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .longform { font-size: 11pt; }
  .longform section, .longform > div > div { break-inside: avoid; }
  .longform a { color: #000 !important; text-decoration: underline; }
  .longform a[href^="http"]::after,
  .longform a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.75em; font-weight: normal; }
}