/* assets/site.css — GENERATED by work/site_theme.py. Do not edit by hand:
   edit the tokens in work/site_theme.py and re-run  python work/site_theme.py  */

/* ---- faces: Literata variable (SIL OFL; see fonts/LICENSE-Literata-OFL.txt) ---- */
@font-face {
  font-family: 'Literata';
  src: url('fonts/literata-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('fonts/literata-italic-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---- design tokens ---- */
:root {
  /* semantic palette (light) */
  --paper: #ffffff; --ink: #191919; --muted: #5c5c5c; --rule: #d9d9d9;
  --faint: #f5f5f5; --em: #383838; --strong: #000000; --quote-ink: #333333;
  --subtle: #4f4f4f; --margin-ink: #555555; --bracket: #8a8a8a;
  --mark: rgba(0,0,0,.09); --sel: rgba(0,0,0,.12); --red: #a33b22; --teal: #0b6b76;
  --accent: var(--ink);
  /* raw palette, both modes, for pages that mix modes (v1 sheets, talk) */
  --l-paper: #ffffff; --l-ink: #191919; --l-muted: #5c5c5c; --l-rule: #d9d9d9;
  --l-faint: #f5f5f5; --l-em: #383838; --l-strong: #000000; --l-red: #a33b22;
  --l-teal: #0b6b76; --l-quote-ink: #333333; --l-subtle: #4f4f4f;
  --l-margin-ink: #555555; --l-bracket: #8a8a8a; --l-mark: rgba(0,0,0,.09); --l-sel: rgba(0,0,0,.12);
  --d-paper: #131313; --d-ink: #e9e9e9; --d-muted: #a0a0a0; --d-rule: #3a3a3a;
  --d-faint: #1d1d1d; --d-em: #d2d2d2; --d-strong: #ffffff; --d-red: #e78d70;
  --d-teal: #64bfca; --d-quote-ink: #cfcfcf; --d-subtle: #b5b5b5;
  --d-margin-ink: #9a9a9a; --d-bracket: #6f6f6f; --d-mark: rgba(255,255,255,.15); --d-sel: rgba(255,255,255,.18);
  /* faces */
  --font-text: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-ui: var(--font-text);
  --font-mono: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  /* type scale + leading */
  --fs-body: 1.0625rem; --fs-h3: 1.275rem; --fs-h2: 1.4rem; --fs-h1: 1.84rem;
  --fs-sm: .92rem; --fs-xs: .8rem; --fs-label: .72rem;
  --lh-body: 1.62; --lh-sm: 1.5; --lh-heading: 1.25;
  --lh-transcript: 1.85;
  /* measure + rhythm */
  --measure: 38rem; --measure-wide: 46rem;
  --flow: 1.25rem; --flow-block: 1.8rem; --flow-section: 3rem;
  /* shape + rules */
  --r-sm: 3px; --r-md: 5px; --r-lg: 6px;
  --hairline: 1px solid var(--rule);
  --double-rule: 3px double var(--rule);
  /* weight (variable axis; dark mode lightens body text) */
  --wght-body: 400;
}
body.dark, html[data-theme="dark"] body, body.theme-dark:not(.light) {
  --paper: var(--d-paper); --ink: var(--d-ink); --muted: var(--d-muted);
  --rule: var(--d-rule); --faint: var(--d-faint); --em: var(--d-em);
  --strong: var(--d-strong); --quote-ink: var(--d-quote-ink);
  --subtle: var(--d-subtle); --margin-ink: var(--d-margin-ink);
  --bracket: var(--d-bracket); --mark: var(--d-mark); --sel: var(--d-sel);
  --red: var(--d-red); --teal: var(--d-teal);
  --accent: var(--ink);
  /* re-declared here so their var(--rule) resolves against the dark value
     (custom-property references resolve on the DEFINING element) */
  --hairline: 1px solid var(--rule);
  --double-rule: 3px double var(--rule);
  --wght-body: 375;
}

/* ---- base typography ---- */
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--wght-body);
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: 600; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--rule); text-underline-offset: 3px;
    text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--muted); }
::selection { background: var(--sel); }
em { color: var(--em); }
strong { color: var(--strong); font-weight: 700; }
mark { background: var(--mark); color: inherit; padding: 0 .12em;
       border-radius: 2px; }
code { font-family: var(--font-mono); font-size: .86em;
       font-variant-numeric: lining-nums tabular-nums; }

/* true small caps (Literata carries smcp/c2sc; never synthesize) */
.smallcaps, .sc {
  font-variant-caps: small-caps; font-synthesis: none; letter-spacing: .05em;
}
/* letterspaced label/kicker style — the UI companion voice */
.label-caps {
  font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: .28em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

/* long-form prose helpers: quiet rag + hyphenation, tuned rhythm */
.prose-hyphens { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, h4, nav, button, summary { hyphens: none; -webkit-hyphens: none; }

blockquote {
  margin: var(--flow-block) 0; padding: 1.3rem 1.7rem;
  background: var(--faint); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); font-style: italic; color: var(--quote-ink);
}

/* :target whispers: hairline + faint wash, no shouting */
:target { scroll-margin-top: 4rem; }

/* ---- shared components ---- */

/* theme toggle: one visual everywhere. Default placement is fixed at the
   top right, above the fold on every page; .in-bar sits it inside a nav bar. */
.theme-toggle {
  position: fixed; top: .85rem; right: .85rem; z-index: 90;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--muted);
  box-shadow: 0 1px 4px var(--sel);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-toggle.in-bar { position: static; box-shadow: none; background: transparent;
  border-color: var(--rule); width: 2.1rem; height: 2.1rem; }
.theme-toggle.in-bar:hover { border-color: var(--ink); }
/* icon logic: show the mode you would switch TO, across all three conventions */
body:not(.dark):not(.theme-dark) .theme-toggle .icon-light { display: none; }
body.dark .theme-toggle .icon-dark { display: none; }
body.theme-dark:not(.light) .theme-toggle .icon-dark { display: none; }
body.theme-dark.light .theme-toggle .icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] body:not(.dark) .theme-toggle .icon-light { display: revert; }

/* details/summary collapsible blocks (analysis embeds, citations) */
details.collapse {
  margin: 1.2rem 0 var(--flow-block); border: var(--hairline);
  border-radius: var(--r-md); background: var(--faint);
}
details.collapse > summary {
  cursor: pointer; padding: .75rem 1.1rem; font-size: var(--fs-sm);
  line-height: var(--lh-sm); color: var(--muted); font-style: italic;
  list-style-position: inside;
}
details.collapse > summary:hover { color: var(--ink); }

/* scrollbars: thin and monochrome */
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }