/* =====================================================================
   0. FONTS: Newsreader, self-hosted (SIL OFL 1.1, see fonts/OFL.txt).
      Latin-subset variable woff2 files as served by Google Fonts (v26):
      roman has wght and opsz axes, italic has opsz. The roman file is
      declared twice (400 and 600) and the italic once, as in Google's
      stylesheet, so weights render as before.
      font-display: block: with the preload (templates/base.html), text is
      drawn in Newsreader from the first frame instead of being drawn in
      the fallback and then swapped (a visible jump in the header). If the
      font is still missing after the block period (3 s recommended by
      CSS Fonts 4), the fallback below is shown.
      "Newsreader Fallback" is Georgia (regular, bold, italic) resized so
      that all text on the built pages, at its rendered sizes (1280 and
      390 px), has the same total width as in Newsreader, with
      Newsreader's ascent/descent (1470/530 of 2000 units), so text keeps
      its size and line breaks while the web font loads. It covers the
      same latin range, so other characters (e.g. Greek) use Georgia.
   ===================================================================== */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/newsreader-latin-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: block;
  src: url("fonts/newsreader-latin-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: block;
  src: url("fonts/newsreader-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader Fallback"; font-style: normal; font-weight: 400; src: local("Georgia");
  size-adjust: 93.88%; ascent-override: 78.29%; descent-override: 28.23%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader Fallback"; font-style: normal; font-weight: 600; src: local("Georgia Bold");
  size-adjust: 86.07%; ascent-override: 85.40%; descent-override: 30.79%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; font-weight: 400; src: local("Georgia Italic");
  size-adjust: 90.00%; ascent-override: 81.67%; descent-override: 29.44%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   1. PALETTE: raw colour values, one block per theme.
      --scale-1…5 and --ill-* are copied from illustration/palette.css
      (light in :root, dark in the two dark blocks). To update them,
      paste new values into all three blocks.
      Components never use these raw values directly; see section 2.
      Which theme applies:
        - script on: the head script sets data-theme (saved choice, else
          the system) and keeps it in sync with the header switch;
        - script off: no data-theme, so the header switch radios decide,
          and the system setting decides while neither is checked.
      --theme-is-dark (0 light, 1 dark) and --switch-* drive the header
      switch; --theme-is-dark also sets dark-only stroke widths.
   ===================================================================== */
:root {
  color-scheme: light;
  --bg: #FBFAF6; --surface: #FFFFFF; --text: #1C1B19; --muted: #58534B;
  --rule: #D9D4CA; --band: #F4F1E9;
  --accent: #1D4F5E;    /* ink teal: links, section headings, focus ring */
  --accent-2: #A3472A;  /* terracotta: eyebrow labels, heading rules, stat rule */
  --on-scale: #FFFFFF;  /* text on a filled scale colour (selected tab) */
  --theme-is-dark: 0; --switch-sun: var(--bg); --switch-moon: var(--muted);
  --scale-1: #5B4B94; --scale-2: #36588A; --scale-3: #21706A; --scale-4: #7E5C16; --scale-5: #A84A33;
  /* illustration tokens (illustration/palette.css) */
  --ill-teal-tint: #D6EAE6; --ill-teal-hl: #97CCC5; --ill-teal: #5FA8A1; --ill-teal-ink: #2E6D68;
  --ill-coral-tint: #F8DCD1; --ill-coral-hl: #F2AE98; --ill-coral: #E4866B; --ill-coral-ink: #A44E38;
  --ill-lavender-tint: #E6E1F3; --ill-lavender-hl: #C1B6E3; --ill-lavender: #9B8BC8; --ill-lavender-ink: #5B4E93;
  --ill-ochre-tint: #F5E6C6; --ill-ochre-hl: #EBCB8A; --ill-ochre: #D6A752; --ill-ochre-ink: #8E6A24;
  --ill-sage-tint: #E0EBD7; --ill-sage-hl: #B9D2AC; --ill-sage: #8FB27F; --ill-sage-ink: #55774A;
  --ill-slate-tint: #DAE2EF; --ill-slate-hl: #9EB3D4; --ill-slate: #6684B2; --ill-slate-ink: #3A5684;
  --ill-rose-tint: #F6DCE3; --ill-rose-hl: #EBAFBF; --ill-rose: #D27F96; --ill-rose-ink: #94475D;
  --ill-cream-tint: #FCF6EA; --ill-cream-hl: #FBF1DE; --ill-cream: #F2E2C4; --ill-cream-ink: #C2A577;
  --ill-neutral-tint: #EEEBE4; --ill-neutral-hl: #CFCAC0; --ill-neutral: #A39D91; --ill-neutral-ink: #5F5A51;
  --ill-paper: #FFFFFF; --ill-hi: #FFFFFF; --ill-shade: #3B3428;
  /* link chips (Checkpoint 3): teal-tinted fill + border so they read as buttons */
  --chip-bg: #E8EDEF; --chip-bg-hover: #D6DFE2; --chip-border: #74909A;
}
:root:is([data-theme="dark"], :not([data-theme]):has(#theme-dark:checked)) {
  color-scheme: dark;
  --theme-is-dark: 1; --switch-sun: var(--muted); --switch-moon: var(--bg);
  --bg: #151412; --surface: #1D1C19; --text: #EDE9E2; --muted: #B7B0A4;
  --rule: #4A4640; --band: #1A1916;  /* muted and rule lifted at Checkpoint 2 for dark readability (were #ADA699, #3A3732) */
  --accent: #8EC6D2; --accent-2: #E39C7C; --on-scale: #151412;
  --scale-1: #C4B8EE; --scale-2: #A6BEE6; --scale-3: #8ED2C8; --scale-4: #E3C27A; --scale-5: #F2A894;
  /* illustration tokens (illustration/palette.css) */
  --ill-teal-tint: #1F3533; --ill-teal-hl: #6FB0A9; --ill-teal: #4A8D87; --ill-teal-ink: #A3D8D1;
  --ill-coral-tint: #3D2721; --ill-coral-hl: #E0937D; --ill-coral: #C27059; --ill-coral-ink: #F4BBA8;
  --ill-lavender-tint: #2C2839; --ill-lavender-hl: #A496D0; --ill-lavender: #8172AE; --ill-lavender-ink: #CDC3EE;
  --ill-ochre-tint: #3A3020; --ill-ochre-hl: #D9B46A; --ill-ochre: #B89048; --ill-ochre-ink: #EBD08F;
  --ill-sage-tint: #263123; --ill-sage-hl: #9BBC8C; --ill-sage: #75966A; --ill-sage-ink: #BFDAB2;
  --ill-slate-tint: #212B3A; --ill-slate-hl: #87A0CB; --ill-slate: #5A76A3; --ill-slate-ink: #B0C4E6;
  --ill-rose-tint: #33252B; --ill-rose-hl: #D58FA3; --ill-rose: #B3687E; --ill-rose-ink: #EFB6C6;
  --ill-cream-tint: #2A2620; --ill-cream-hl: #5A5145; --ill-cream: #484136; --ill-cream-ink: #B09F82;
  --ill-neutral-tint: #262420; --ill-neutral-hl: #8E887E; --ill-neutral: #6E695F; --ill-neutral-ink: #BDB6AA;
  --ill-paper: #22201C; --ill-hi: #EDE6DC; --ill-shade: #000000;
  --chip-bg: #2D3433; --chip-bg-hover: #384545; --chip-border: #5F7C82;
}
/* Script off and neither switch radio checked: follow the system. Keep in sync with the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(:where(:has(#theme-light:checked))) {
    color-scheme: dark;
    --theme-is-dark: 1; --switch-sun: var(--muted); --switch-moon: var(--bg);
    --bg: #151412; --surface: #1D1C19; --text: #EDE9E2; --muted: #B7B0A4;
    --rule: #4A4640; --band: #1A1916;  /* muted and rule lifted at Checkpoint 2 for dark readability (were #ADA699, #3A3732) */
    --accent: #8EC6D2; --accent-2: #E39C7C; --on-scale: #151412;
    --scale-1: #C4B8EE; --scale-2: #A6BEE6; --scale-3: #8ED2C8; --scale-4: #E3C27A; --scale-5: #F2A894;
    /* illustration tokens (illustration/palette.css) */
    --ill-teal-tint: #1F3533; --ill-teal-hl: #6FB0A9; --ill-teal: #4A8D87; --ill-teal-ink: #A3D8D1;
    --ill-coral-tint: #3D2721; --ill-coral-hl: #E0937D; --ill-coral: #C27059; --ill-coral-ink: #F4BBA8;
    --ill-lavender-tint: #2C2839; --ill-lavender-hl: #A496D0; --ill-lavender: #8172AE; --ill-lavender-ink: #CDC3EE;
    --ill-ochre-tint: #3A3020; --ill-ochre-hl: #D9B46A; --ill-ochre: #B89048; --ill-ochre-ink: #EBD08F;
    --ill-sage-tint: #263123; --ill-sage-hl: #9BBC8C; --ill-sage: #75966A; --ill-sage-ink: #BFDAB2;
    --ill-slate-tint: #212B3A; --ill-slate-hl: #87A0CB; --ill-slate: #5A76A3; --ill-slate-ink: #B0C4E6;
    --ill-rose-tint: #33252B; --ill-rose-hl: #D58FA3; --ill-rose: #B3687E; --ill-rose-ink: #EFB6C6;
    --ill-cream-tint: #2A2620; --ill-cream-hl: #5A5145; --ill-cream: #484136; --ill-cream-ink: #B09F82;
    --ill-neutral-tint: #262420; --ill-neutral-hl: #8E887E; --ill-neutral: #6E695F; --ill-neutral-ink: #BDB6AA;
    --ill-paper: #22201C; --ill-hi: #EDE6DC; --ill-shade: #000000;
    --chip-bg: #2D3433; --chip-bg-hover: #384545; --chip-border: #5F7C82;
  }
}

/* =====================================================================
   2. ALIASES used by components (theme-independent).
      --s1…--s5 drive tabs, panels, rings and the lede words; each panel
      and tab sets --c to one of them.
   ===================================================================== */
:root {
  --s1: var(--scale-1); --s2: var(--scale-2); --s3: var(--scale-3); --s4: var(--scale-4); --s5: var(--scale-5);
  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3. Base (type values from concept-2-paper.html) */
* { box-sizing: border-box; }
/* --hdr-h: height of the sticky site header (section 4). Phone/tablet: the 64px name row + 1px rule.
   Desktop (>=1100px, set in section 4): plus the nav row (1px rule + 4px + 8px padding top and bottom
   + one .95rem line at 1.4). scroll-padding-top keeps anchor targets, scrollIntoView targets and
   keyboard focus clear of the header, with 8px to spare for the focus ring. */
:root { --hdr-h: 65px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 8px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.125rem/1.65 var(--serif); font-optical-sizing: auto; }
a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* visually hidden, still read by screen readers */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* 4. Header */
/* Phone/tablet (<1100px): name · Menu · theme on one row; the menu opens as a stacked list below.
   Desktop (>=1100px): two-row masthead, name + theme above, all nav items across one ruled row. */
/* Sticky (Checkpoint 7): stays at the top of the viewport while scrolling, same height throughout,
   on an opaque background so content passes cleanly underneath. */
header.top { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--rule); }
header.top .wrap { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "mark menu theme" "nav nav nav"; align-items: center; column-gap: 8px; }
.mark { grid-area: mark; justify-self: start; font: 600 1.0625rem/1 var(--serif); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 64px; }
nav.primary { grid-area: nav; }
nav.primary ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0 0 6px; }
nav.primary a { font: 400 .95rem/1.4 var(--serif); letter-spacing: normal; white-space: nowrap; color: var(--text); text-decoration: none; display: inline-block; padding: 8px 0; }
nav.primary a:hover { color: var(--accent); text-decoration: underline; }
nav.primary a[aria-current="page"] { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent-2); text-underline-offset: .4em; }
.hdr-btn { appearance: none; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text); font: 400 .95rem/1 var(--serif); letter-spacing: normal; }
.hdr-btn:hover { border-color: var(--accent); color: var(--accent); }
.hdr-btn svg { width: 20px; height: 20px; flex: none; }
.menu-toggle { grid-area: menu; display: none; padding: 0 14px 0 12px; }
.menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-menu { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
/* Theme switch: two labelled radios, sun = light, moon = dark. A filled thumb sits under the
   active theme's icon; its position and the icon colours come from the palette tokens, so the
   switch always shows the theme in effect, with or without the script. */
.theme-switch { grid-area: theme; position: relative; display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); }
.theme-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); transform: translateX(calc(var(--theme-is-dark) * 100%)); }
.theme-switch input { position: absolute; top: 3px; left: 3px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.theme-switch label { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.theme-switch label:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.theme-switch input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-switch svg { width: 20px; height: 20px; display: block; }
.theme-switch .sun { color: var(--switch-sun); }
.theme-switch .moon { color: var(--switch-moon); }
.theme-switch .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The thumb slides between sun and moon (Checkpoint 3). Its position comes from --theme-is-dark,
   so the slide runs whether the head script (data-theme) or the radios (:has) changed the theme.
   No slide on first paint: the theme is decided before the first frame, and a transition only
   runs when a computed value changes after that. .no-anim (site.js) suppresses it when a page
   restored from the back/forward cache is re-synced to a theme chosen on another page. */
@media (prefers-reduced-motion: no-preference) {
  .theme-switch::before { transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
  .theme-switch label { transition: color .24s cubic-bezier(.4, 0, .2, 1); }
  .no-anim .theme-switch::before, .no-anim .theme-switch label { transition: none; }
}
@media (max-width: 1099.98px) {
  .js .menu-toggle { display: inline-flex; }
  .js nav.primary:not(.open) { display: none; }
  .js nav.primary ul { display: block; padding: 0 0 8px; }
  .js nav.primary li + li { border-top: 1px solid var(--rule); }
  .js nav.primary a { display: block; padding: 14px 0; }
  /* The open menu drops down over the page below the header bar, so the page behind does not move;
     when it is taller than the space below the bar it scrolls within itself. */
  .js nav.primary.open { position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--rule); max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1099.98px) and (min-width: 720px) { .js nav.primary.open { padding: 0 32px; } }
/* Script off (<1100px): the nav shows as wrapped rows under the name row, so the header is taller:
   65px + 6px list padding + one 37.28px row (16px padding + .95rem line at 1.4) per row. Measured:
   3 rows below 440px, 2 rows from 440px, 1 row from 840px; each breakpoint below is set 20px wider
   so the padding errs on the large side if the rows wrap slightly later. */
@media (max-width: 1099.98px) { html:not(.js) { --hdr-h: calc(71px + 3 * (16px + 1.33rem)); } }
@media (min-width: 460px) and (max-width: 1099.98px) { html:not(.js) { --hdr-h: calc(71px + 2 * (16px + 1.33rem)); } }
@media (min-width: 860px) and (max-width: 1099.98px) { html:not(.js) { --hdr-h: calc(71px + 16px + 1.33rem); } }
@media (min-width: 1100px) {
  :root { --hdr-h: calc(90px + 1.33rem); }
  header.top .wrap { grid-template-columns: 1fr auto; grid-template-areas: "mark theme" "nav nav"; }
  nav.primary { border-top: 1px solid var(--rule); }
  nav.primary ul { flex-wrap: nowrap; justify-content: space-between; padding: 4px 0; }
}

/* 5. Hero */
/* The hero is the whole homepage: it fills the viewport below the sticky header and is centred
   vertically in it (when it is shorter), so the page does not end in a large empty band. */
.hero { padding: 56px 0 56px; display: flex; align-items: center; min-height: calc(100vh - var(--hdr-h)); min-height: calc(100svh - var(--hdr-h)); }
.hero .wrap { flex: 1; display: grid; gap: 40px; }
@media (min-width: 880px) { .hero .wrap { grid-template-columns: 1.5fr 1fr; align-items: center; } }
.eyebrow { font: 600 1rem/1.4 var(--serif); letter-spacing: .01em; color: var(--accent-2); margin: 0 0 16px; }
.eyebrow span { white-space: nowrap; } /* wrap only at the separators */
h1 { font-weight: 400; font-size: clamp(2rem, 5.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 14px; }
.role { margin: 0 0 24px; line-height: 1.5; }
.lede { font-size: 1.25rem; line-height: 1.55; max-width: 42ch; margin: 0 0 24px; }
.lede a { font-weight: 600; white-space: nowrap; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.lede a:hover { text-decoration-color: currentColor; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.links a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text); font: 400 .95rem/1.2 var(--serif); }
.links a:hover { border-color: var(--accent); color: var(--accent); }

.stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: fit-content; max-width: 100%; margin: 28px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--accent-2); font: 400 .92rem/1.5 var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.stat b { font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; color: var(--text); }
.stat .src { flex-basis: 100%; font-size: .85rem; }
.stat .sep-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* kept for screen readers; source sits on its own line */

.portrait { justify-self: center; position: relative; width: min(300px, 62vw); aspect-ratio: 1; }
.portrait svg { width: 100%; height: 100%; display: block; }
.portrait circle { stroke-width: calc(1.5px + .5px * var(--theme-is-dark)); } /* thin dotted rings break up on dark */
.portrait .headshot { position: absolute; inset: 10.667%; width: 78.667%; height: 78.667%; border-radius: 50%; object-fit: cover; background: var(--surface); } /* photo r=118 in the 300 viewBox; rings at r+g=132 and r+2g=146 (g=14) */

/* 6. Research across scales (research.html) */
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; color: var(--accent); margin: 0; }
h2::before { content: ""; display: block; width: 40px; height: 2px; background: var(--accent-2); margin-bottom: 14px; }

.ruler { position: relative; margin: 32px 0 0; scroll-margin-top: 16px; }
.ruler .axis { position: relative; height: 34px; }
.ruler .axis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.decades { position: relative; height: 18px; font: 400 .8rem/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--muted); }
.decades span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.decades span:first-child { transform: none; }
.decades span:last-child { transform: translateX(-100%); }
.leaders { display: block; width: 100%; height: 34px; }
.leaders line { stroke: var(--rule); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.leaders line.on { stroke: var(--current); stroke-width: 2.5; }

[role="tablist"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
[role="tab"] { appearance: none; font: inherit; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--rule); box-shadow: inset 0 3px 0 var(--c); border-radius: 10px; padding: 10px 6px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
[role="tab"] .n { font: 600 1rem/1.2 var(--serif); }
[role="tab"] .u { font: 400 .8rem/1.2 var(--serif); font-variant-numeric: tabular-nums; color: var(--muted); }
[role="tab"]:hover { border-color: var(--c); }
[role="tab"][aria-selected="true"] { background: var(--c); border-color: var(--c); box-shadow: none; color: var(--on-scale); }
[role="tab"][aria-selected="true"] .u { color: var(--on-scale); }
@media (max-width: 560px) {
  [role="tablist"] { gap: 4px; }
  [role="tab"] { padding: 8px 1px; border-radius: 8px; }
  [role="tab"] .n { font-size: clamp(.7rem, 3.2vw, .9rem); letter-spacing: -.005em; }
  [role="tab"] .u { font-size: .72rem; }
}

.panel { margin-top: 20px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--c); border-radius: 12px; padding: 20px; display: grid; gap: 24px; scroll-margin-top: 16px; }
@media (min-width: 900px) { .panel { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; padding: 32px; gap: 40px; } }
/* Illustration slot: a 4:3 box that fills its column (about 400 px wide at 1280 px; full width on phones).
   Each inlined 640×480 SVG fills it; the illustration's own soft wash defines the stage. */
.art { aspect-ratio: 4 / 3; width: 100%; }
.art > svg { display: block; width: 100%; height: 100%; }
.panel h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--c); margin: 0 0 6px; }
.panel .kicker { font: italic 400 .98rem/1.5 var(--serif); color: var(--muted); margin: 0 0 14px; }
.panel .desc { margin: 0 0 24px; }
.works { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.works li { padding-left: 16px; border-left: 2px solid var(--rule); line-height: 1.45; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.ven { font-size: 1rem; line-height: 1.4; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; overflow-wrap: anywhere; font: 400 .85rem/1.3 var(--serif); padding: 3px 10px; border: 1px solid var(--chip-border); border-radius: 8px; background: var(--chip-bg); color: var(--accent); text-decoration: none; cursor: pointer; }
.chip::after { content: ""; flex: none; width: .72em; height: .72em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; } /* small north-east arrow: an external link */
.chip:hover { background: var(--chip-bg-hover); border-color: var(--accent); text-decoration: none; }
.chip:focus-visible { background: var(--chip-bg-hover); border-color: var(--accent); outline-offset: 2px; border-radius: 8px; }
.chip:active { transform: translateY(1px); }
.chip .k, .resource .k { color: var(--muted); font-weight: 400; }
.chip .k { flex: none; white-space: nowrap; }
.resource { margin: 20px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); font: 400 .98rem/1.5 var(--serif); }

.panel[hidden] { display: none; }
/* No-JS: all panels visible, tabs hidden */
html:not(.js) [role="tablist"], html:not(.js) .leaders { display: none; }
html:not(.js) .panel[hidden] { display: grid; }

@media (prefers-reduced-motion: no-preference) {
  .panel .art > svg { transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s; }
  .panel.zooming .art > svg { transform: scale(.82); opacity: .2; }
}

/* =====================================================================
   7. SUBPAGES (Checkpoint 3). Same tokens and type as the homepage.
   ===================================================================== */
.page { padding: 40px 0 88px; }
@media (min-width: 720px) { .page { padding-top: 56px; } }
/* The page's h1 is visually hidden (.sr-only); the terracotta accent line sits above the intro. */
.page-head { margin: 0 0 40px; }
.page-head::before { content: ""; display: block; width: 40px; height: 2px; background: var(--accent-2); margin-bottom: 14px; }
/* Measure widths are in em, not ch, here and in .legend and .dated .desc2: ch follows the "0"
   of whichever font is drawing, so the Georgia fallback made these boxes ~5% wider until Newsreader
   arrived, re-wrapping text (layout shift). Each em value equals the old Nch width in Newsreader. */
.intro { margin: 0; max-width: 34.1em; color: var(--muted); } /* = 62ch */

/* Section headings inside a page (override the homepage h2) */
.group { margin: 0 0 56px; }
.group:last-child { margin-bottom: 0; }
.group-title { font: 400 1.5rem/1.25 var(--serif); letter-spacing: -.005em; color: var(--text); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.group-title::before { content: none; }
.sub-title { font: 600 1.05rem/1.4 var(--serif); letter-spacing: normal; color: var(--accent-2); margin: 28px 0 6px; }

/* Media: the story's descriptive role text (plain muted text, never a badge) */
.role-text { font-size: .95rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Dated rows: year or date in a left gutter on wide screens, above the entry on phones.
   Used for publication years, teaching and honors. */
.dated { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 32px; padding: 20px 0; border-top: 1px solid var(--rule); }
.group-title + .dated, .group-title + .dated-list > li:first-child { border-top: 0; }
.dated > .when { margin: 0; font: 600 .95rem/1.6 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--accent-2); }
@media (min-width: 760px) {
  .dated { grid-template-columns: 88px minmax(0, 1fr); }
  .dated > .when { position: sticky; top: calc(var(--hdr-h) + 16px); align-self: start; }
}
.dated-list { list-style: none; margin: 0; padding: 0; }

/* Publications */
.legend { margin: 0 0 44px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--band); font-size: .95rem; line-height: 1.55; color: var(--muted); max-width: 41.28em; } /* = 72ch */
.legend strong, .authors strong { color: var(--text); font-weight: 600; }
.pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pub { line-height: 1.45; }
.pub .title { font-size: 1.0625rem; }
.pub .title a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pub .title a:hover { text-decoration-color: currentColor; }
.pub .authors { margin: 4px 0 0; font-size: .95rem; color: var(--muted); }
.pub .venue { margin: 2px 0 0; font-size: .95rem; color: var(--muted); }
.pub .venue i { color: var(--text); }
.pub .chips { margin-top: 8px; }

/* Cards: Methods & Tools, Data Resources */
.cards { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.card h3 { font: 600 1.25rem/1.25 var(--serif); color: var(--accent); margin: 0; overflow-wrap: anywhere; }
.card p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.card .chips { margin-top: auto; padding-top: 6px; }

/* Mentorship & Teaching */
.people { list-style: none; margin: 0; padding: 0; }
.people > li { display: grid; gap: 2px 32px; padding: 14px 0; border-top: 1px solid var(--rule); }
.people > li:first-child { border-top: 0; }
@media (min-width: 760px) { .people > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.people .name { font-weight: 600; }
.people .prog, .people .note { color: var(--muted); font-size: .98rem; }
.people .who p, .people .what p { margin: 0; }
/* Co-author: label followed by one paper chip per co-authored paper */
.people .coauthor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0; }
.people .coauthor .k { color: var(--muted); font-size: .98rem; }
.dated .role { margin: 0; font-weight: 600; }
.dated .inst { margin: 0; color: var(--muted); }
.dated .desc2 { margin: 6px 0 0; max-width: 36.3em; } /* = 66ch */

/* Media */
.stories { list-style: none; margin: 0; padding: 0; }
.story { display: grid; gap: 12px 48px; padding: 26px 0; border-top: 1px solid var(--rule); }
.story:first-child { border-top: 0; padding-top: 8px; }
@media (min-width: 900px) { .story { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.story-title { font: 400 1.3rem/1.3 var(--serif); letter-spacing: -.005em; color: var(--text); margin: 0 0 8px; }
.story-title::before { content: none; }
.story .rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.story .outlets-h { margin: 0 0 8px; font: 400 .85rem/1.4 var(--serif); color: var(--muted); }

/* Honors & Service: two columns on desktop, stacked on phones */
.two-col { display: grid; gap: 56px; }
@media (min-width: 960px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.two-col .group { margin: 0; }
.honor .t { margin: 0; }
.honor .o { margin: 0; color: var(--muted); font-size: .98rem; }
/* One continuous rule per service sub-section: the border sits on the list, not on each item. */
.svc { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.svc li { padding: 4px 0 4px 14px; line-height: 1.45; }
.svc li:first-child { padding-top: 2px; }
.svc li:last-child { padding-bottom: 2px; }
.two-col .group-title + .sub-title { margin-top: 18px; }