/* ── Web fonts (Atkinson Hyperlegible, self-hosted, SIL OFL 1.1) ──────
   Accessibility-first typeface from the Braille Institute, designed to
   maximise character distinction for low-vision readers. Two cuts (regular,
   bold) in roman and italic, mapped across the weight scale so 600-800 all
   render in the bold cut (the family ships only 400 and 700). Self-hosted to
   avoid any third-party request and to allow a 'self'-only font-src CSP.
   License: fonts/OFL.txt. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400 500; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 600 800; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-bolditalic.woff2') format('woff2');
}

/* ── Reset & tokens ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        #0b0f14;
  --surface:   #141a22;
  --surface2:  #1a2230;
  --border:    #262e3a;
  --border-hl: #3a4a5e;
  --accent:    #5eaaff;
  --accent2:   #4cc764;
  --accent3:   #e0a832;
  --accent4:   #f78166;
  --text:      #e8edf4;
  --text2:     #b8c4d0;
  --muted:     #8a95a5;
  --pill-bg:   #1c2a3c;
  /* Text color for content sitting ON an accent-filled control (primary/pressed
     buttons). Near-black on the dark theme's bright blue; white on the light
     theme's deeper blue — both clear WCAG 1.4.3 (4.5:1). */
  --on-accent: #08111e;
  /* Form-control border — distinct from --border so input/select boundaries
     clear WCAG 1.4.11 non-text contrast (>=3:1) against both the field fill and
     the page (the decorative --border is intentionally fainter). */
  --input-border: #647a93;
  --accent-hover: #8ac4ff;
  --accent-bright: #7ec0ff;
  /* Tag tint backgrounds */
  --tag-green-bg:  #0f2e1c;
  --tag-amber-bg:  #2a1f05;
  --tag-red-bg:    #2a1212;
  /* Flagship gradient */
  --flagship-grad-start: #1a3a6e;
  --flagship-grad-end:   #0d2a4e;
  /* Hero gradient */
  --hero-grad-end: #0f1a28;
  /* Print palette */
  --print-bg:      #fafafa;
  --print-text:    #1c1f24;
  --print-heading: #2a2e35;
  --print-border:  #c8cdd4;
  --print-muted:   #5a6270;
  --print-tag-bg:  #f0f2f4;
  --print-tag-border: #8e95a0;
  --print-tl-line: #c8cdd4;
  --print-tl-dot:  #5a6270;
  --print-tl-ring: #fafafa;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.25);
  /* Type scale — 10 steps */
  --fs-xs:     0.8125rem;
  --fs-sm:     0.9rem;
  /* Keep prose at the user-agent default size. The previous 0.9rem base made
     card and timeline copy roughly 14.4px on common displays, which was
     technically zoomable but unnecessarily difficult to scan. */
  --fs-base:   1rem;
  --fs-md:     1rem;
  --fs-lg:     1.05rem;
  --fs-xl:     1.2rem;
  --fs-2xl:    1.65rem;
  --fs-3xl:    clamp(1.8rem, 4vw, 2.2rem);
  --fs-hero:   clamp(2rem, 5vw, 3.2rem);
  /* Semantic typography schema (SSOT). Components consume these role tokens
     rather than inventing heading/body metrics. The --fs-* values above are
     the primitive scale; these aliases define how that scale is used. */
  --type-display-size: var(--fs-hero);
  --type-h1-size: var(--fs-3xl);
  --type-h2-size: var(--fs-2xl);
  --type-h3-size: var(--fs-lg);
  --type-body-size: var(--fs-base);
  --type-subtitle-size: var(--fs-md);
  --type-small-size: var(--fs-sm);
  --type-label-size: var(--fs-xs);
  --type-display-leading: 1.1;
  --type-heading-leading: 1.25;
  --type-body-leading: 1.65;
  --type-compact-leading: 1.5;
  --type-heading-tracking: -0.018em;
  --type-label-tracking: 0.045em;
  --type-heading-weight: 700;
  --type-body-weight: 400;
  --measure-prose: 64ch;
  --measure-lede: 72ch;
  /* Spacing scale — 8-point grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 56px;
  --sp-11: 80px;
  /* Fluid root size: ~16px on laptops, scaling up on 1080p/1440p/4K so the
     rem-based type scale isn't tiny on large displays. Stays 16px floor on
     mobile (px+vw only — rem would be self-referential on :root). */
  font-size: clamp(16px, 11px + 0.42vw, 22px);
}
/* ── Light theme ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f8f9fb;
  --surface:   #ffffff;
  --surface2:  #eef1f5;
  /* Card/section edges carry the depth in light mode (text contrast is fixed by the
     other tokens). Stronger than the prior near-invisible #d0d7de so cards, KPIs and
     the sticky-nav divider separate cleanly from the page. */
  --border:    #c3ccd7;
  --border-hl: #97a4b4;
  /* Accent/muted/amber darkened so small text clears WCAG 2.1 AA (4.5:1) on every
     light surface it lands on — including the tinted pill/tag/badge backgrounds
     (--pill-bg #e8eef4, --tag-amber-bg #fff8c5, rec-badge tints) where the prior
     values measured 4.1–4.4:1. */
  --accent:    #206abe;
  --accent2:   #197a35;
  --accent3:   #a85500;
  --accent4:   #cf222e;
  --text:      #1c1f24;
  --text2:     #57606a;
  /* #666e77 measured 4.42:1 on --pill-bg (badge counts, fs-xs) — just under the
     4.5:1 AA floor. #61696f clears 4.5:1 on every light surface it sits on
     (pill 4.78, surface2 4.93, bg 5.30, white 5.59, amber tag 5.18). */
  --muted:     #61696f;
  --pill-bg:   #e8eef4;
  --on-accent: #ffffff;
  --input-border: #767f8c;
  --accent-hover: #1a5ea8;
  --accent-bright: #1a5ea8;
  --tag-green-bg:  #dafbe1;
  --tag-amber-bg:  #fff8c5;
  --tag-red-bg:    #ffebe9;
  --flagship-grad-start: #dbe9f8;
  --flagship-grad-end:   #e8f0f8;
  --hero-grad-end: #eef2f7;
  --shadow-sm: 0 1px 3px rgba(20,28,40,.13), 0 1px 2px rgba(20,28,40,.08);
  --shadow-md: 0 4px 12px rgba(20,28,40,.15), 0 2px 4px rgba(20,28,40,.09);
  --shadow-lg: 0 8px 24px rgba(20,28,40,.17), 0 4px 8px rgba(20,28,40,.10);
}
[data-theme="light"] nav {
  background: rgba(248,249,251,.92);
}
/* Re-theme the primary CTA glow to the light-mode accent (the base rule's glow is
   the dark-mode bright blue, which looks detached on a light page). */
[data-theme="light"] .btn-primary { box-shadow: 0 2px 8px rgba(32,106,190,.22); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 18px rgba(32,106,190,.32); }
[data-theme="light"] .tag.red { border-color: rgba(207,34,46,.25); }
[data-theme="light"] .tag {
  border-color: rgba(34,114,204,.2);
}
[data-theme="light"] .tag.green { border-color: rgba(26,127,55,.25); }
[data-theme="light"] .tag.amber { border-color: rgba(179,91,0,.25); }
[data-theme="light"] .flagship-badge {
  border-color: rgba(34,114,204,.3);
}
[data-theme="light"] .rec-badge.supervisor { background: rgba(179,91,0,.08); border-color: rgba(179,91,0,.2); }
[data-theme="light"] .rec-badge.colleague  { background: rgba(26,127,55,.08); border-color: rgba(26,127,55,.2); }
[data-theme="light"] .rec-badge.personal   { background: rgba(34,114,204,.08); border-color: rgba(34,114,204,.2); }
[data-theme="light"] ::selection { background: rgba(34,114,204,.2); }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Headings render tighter than the 1.65 body leading so multi-line card titles
   and section headers stay compact and consistent across pages. Components that
   need a specific value (hero wordmark, timeline, media cards) still override. */
h1, h2, h3, h4, h5, h6 {
  color: var(--text); font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-leading); letter-spacing: var(--type-heading-tracking);
  text-wrap: balance;
}
h1 { font-size: var(--type-h1-size); }
h2 { font-size: var(--type-h2-size); }
h3 { font-size: var(--type-h3-size); }
p, li { text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); text-decoration: none; }
::selection { background: rgba(94,170,255,.25); }
/* Themed scrollbar — keeps the chrome cohesive with the active theme. */
html { scrollbar-color: var(--border-hl) transparent; scrollbar-width: thin; }

/* ── Unified focus-visible ─────────────────────────────────── */
/* Single rule for all interactive elements — eliminates 16 per-selector copies. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
/* Inline elements get rounded focus ring */
a:focus-visible,
.card-link:focus-visible,
.card-supplementary:focus-visible,
.tl-item .tl-toggle:focus-visible { border-radius: 3px; }

/* ── Card elevation tiers ──────────────────────────────────── */
/* Consistent hover behavior across all card-like components.
   Tier 1: subtle lift (KPIs, compact elements)
   Tier 2: standard lift (content cards, feature cards, rec/cert cards)
   Tier 3: prominent lift (flagship cards, hero-level elements) */
.lift-1 { transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.lift-1:hover, .lift-1:focus-visible { border-color: var(--border-hl); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lift-2 { transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.lift-2:hover, .lift-2:focus-visible { border-color: var(--border-hl); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lift-3 { transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow-sm); }
.lift-3:hover, .lift-3:focus-visible { border-color: var(--border-hl); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── Spacing & narrative-text utilities ─────────────────────────
   Top-margin steps on the 8-pt grid plus prose helpers. These replace one-off
   inline styles on the educator / sample-unit pages. De-emphasis is always by
   color token, never opacity — opacity composites over the page and dims inline
   links below the 4.5:1 contrast floor (WCAG 1.4.3). */
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }
.measure { max-width: var(--measure-prose); }
.p-sub   { color: var(--text2); font-size: var(--type-subtitle-size); }
.p-note  { color: var(--muted); font-size: var(--type-small-size); }

/* In-text links carry a visible underline so they are distinguished from the
   surrounding body text by more than colour alone (WCAG 1.4.1 Use of Color).
   Standalone UI links — nav, cards, buttons, badges, arrow CTAs — are excluded
   by design and remain underline-free. */
.breadcrumb a,
.p-sub a,
main p a:not(.btn):not(.card-link):not(.back-link),
main li a:not(.btn):not(.card-link),
main td a:not(.btn):not(.card-link),
footer p a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.breadcrumb a:hover,
.p-sub a:hover,
main p a:not(.btn):not(.card-link):not(.back-link):hover,
main li a:not(.btn):not(.card-link):hover,
main td a:not(.btn):not(.card-link):hover,
footer p a:hover { text-decoration: underline; }

/* ── Skip link (accessibility) ──────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4);
  background: var(--accent); color: var(--bg); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm);
  z-index: 200; transition: top .15s;
}
.skip-link:focus { top: var(--sp-2); outline: 2px solid var(--accent); outline-offset: 2px; }

/* Visually hidden but exposed to assistive tech — for status-message live
   regions (WCAG 4.1.3) and other screen-reader-only context. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-7); }
.section { padding: var(--sp-11) 0; }
.section + .section {
  border-top: 1px solid var(--border);
}
/* The first section sits directly under the 56px sticky nav; trim its top
   padding so detail/list pages open near the breadcrumb instead of behind
   ~108px of empty space. (Landing/404 use .hero, not .section, so are unaffected.) */
main > .section:first-child { padding-top: var(--sp-9); }
.section-title { margin-bottom: var(--sp-2); }
/* Short accent rule under section headings — echoes the hero wordmark's
   blue→green motif for quiet visual structure without shouting. */
.section-title::after {
  content: ''; display: block; width: 42px; height: 3px; border-radius: 2px;
  margin-top: var(--sp-3); background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.section-sub {
  color: var(--text2); margin-bottom: var(--sp-9);
  font-size: var(--type-subtitle-size); line-height: var(--type-body-leading);
  max-width: var(--measure-lede);
}
/* auto-fit (not auto-fill): when a row has fewer items than would fit, the items
   stretch to fill the width instead of leaving empty tracks — so wide/4K screens
   don't strand content in a left column. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
/* 3-up balanced grid — 6 cards land 3+3 instead of an orphaned 4+2 (used by the
   index Quick Links); collapses to 2-up then 1-up as width drops. */
.grid-3up { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }

/* ── Tags ───────────────────────────────────────────────────── */
.tag {
  display: inline-block; background: var(--pill-bg); color: var(--accent);
  font-size: var(--fs-xs); font-weight: 600; padding: 3px var(--sp-3); border-radius: 20px;
  border: 1px solid rgba(94,170,255,.2); white-space: nowrap;
}
.tag.green  { color: var(--accent2); background: var(--tag-green-bg); border-color: rgba(76,199,100,.25); }
.tag.amber  { color: var(--accent3); background: var(--tag-amber-bg); border-color: rgba(224,168,50,.25); }
.tag.red    { color: var(--accent4); background: var(--tag-red-bg); border-color: rgba(247,129,102,.25); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── Nav ────────────────────────────────────────────────────── */
/* The nav sits inside a <header> wrapper exactly its own height, so sticky on
   the nav itself has zero travel range — the wrapper must carry the sticky or
   the nav scrolls away (scroll-padding-top: 72px above assumes it sticks). */
body > header { position: sticky; top: 0; z-index: 100; }
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,15,20,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
nav .inner {
  display: flex; align-items: center; gap: 2px;
  max-width: 1120px; margin: 0 auto; padding: 0 28px; min-height: 56px;
}
nav .logo {
  font-weight: 700; color: var(--text); font-size: var(--fs-md);
  margin-right: var(--sp-4); letter-spacing: -0.3px;
}
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
nav a {
  color: var(--muted); font-size: var(--fs-sm); font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  transition: color .15s, background .15s;
}
nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
nav a.active { color: var(--text); background: var(--surface2); font-weight: 600; }
/* Bridge link to the other audience's microsite — set apart at the right edge. */
.nav-bridge { margin-left: auto; color: var(--accent); }
.nav-bridge:hover { color: var(--accent-hover); }
/* Hamburger — hidden on desktop; shown at the nav breakpoint below.
   44x44px minimum tap target (WCAG 2.5.5) — it is the primary mobile control. */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--text); font-size: 1.4rem; line-height: 1;
  padding: 8px 10px; border-radius: 8px;
  min-width: 44px; min-height: 44px; justify-content: center;
}
.nav-toggle:hover { background: var(--surface); }

/* Footer navigation — a compact site map (4 grouped columns) on every page:
   secondary wayfinding for deep pages and a full-index backstop on mobile. */
.footer-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5);
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
  /* <nav> landmark, not site chrome — undo the sticky-header treatment
     it would otherwise inherit from the base nav rule. */
  position: static; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.footer-h {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; margin: 0 0 2px;
}
.footer-nav a { color: var(--text2); font-size: var(--fs-sm); }
.footer-nav a:hover { color: var(--text); }

/* ── Card ───────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* Subtle accent-tinted border on hover — pairs with the .lift-* shadow/raise for
   a clearer (but restrained) affordance on interactive cards. */
.card:hover, .card:focus-visible { text-decoration: none; border-color: var(--border-hl); }
.card h2,
.card h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.card p { font-size: var(--fs-base); color: var(--text2); flex: 1; line-height: 1.55; }
.card-link {
  font-size: var(--fs-sm); color: var(--accent); margin-top: auto;
  font-weight: 500; transition: color .15s;
}
.card-link:hover { color: var(--accent-hover); }
.card-links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  margin-top: auto;
}
.card-links .card-link { margin-top: 0; }
.card-supplementary {
  font-size: var(--fs-sm); color: var(--muted); font-weight: 500;
  transition: color .15s;
}
.card-supplementary:hover { color: var(--accent); }

/* ── Flagship ───────────────────────────────────────────────── */
.flagship-badge {
  background: linear-gradient(135deg, var(--flagship-grad-start), var(--flagship-grad-end));
  border: 1px solid rgba(94,170,255,.35); border-radius: 8px;
  padding: var(--sp-1) 14px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 1.2px;
  white-space: nowrap;
}

/* ── Flow / pipeline diagram ─────────────────────────────────────
   Numbered stage cards joined by directional chevron connectors — a
   themeable, accessible replacement for the old text-arrow ASCII art.
   Each stage is real HTML text (screen-reader friendly); the parent
   carries role="img" + aria-label describing the whole flow. Horizontal
   on wide screens; stacks vertically (chevrons rotate to point down)
   below 1000px and in the always-vertical .flow-vertical variant. */
.flow { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: var(--sp-6) 0; }
.flow-stage {
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
/* Top accent rule — signals left-to-right flow and ties the stages together. */
.flow-stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover)); opacity: .75;
}
.flow-stage-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.flow-step {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px;
  color: var(--accent); background: var(--pill-bg);
  border-radius: 6px; padding: 2px 8px; line-height: 1.5;
}
.flow-icon { color: var(--accent); display: inline-flex; }
.flow-icon svg { width: 22px; height: 22px; display: block; }
.flow-stage .flow-h {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 700; margin: 0;
}
.flow-stage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.flow-stage li { font-size: var(--fs-sm); color: var(--text2); line-height: 1.4; }
.flow-stage li.lead { color: var(--text); font-weight: 600; }
.flow-stage li.lead:not(:first-of-type) { margin-top: 6px; }
.flow-arrow {
  flex: 0 0 auto; align-self: center; width: 38px; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.flow-arrow svg { width: 24px; height: 24px; display: block; }
.flow-vertical { flex-direction: column; align-items: stretch; max-width: 560px; }
/* In column mode flex-basis is the MAIN (height) axis — reset so each stage is
   content-height instead of stretched. */
.flow-vertical .flow-stage { flex: 0 0 auto; }
.flow-vertical .flow-arrow { transform: rotate(90deg); width: auto; height: 30px; }
.flow-sub { display: flex; align-items: center; gap: 6px; }
.flow-sub .flow-to { color: var(--accent); font-weight: 700; }
@media (max-width: 1000px) {
  .flow { flex-direction: column; align-items: stretch; }
  /* Column mode turns flex-basis into the height axis; without this reset the
     `flex: 1 1 0` stages collapse to ~0 height (overflow:hidden zeroes the
     automatic min-height) and only the step number + icon survive. */
  .flow .flow-stage { flex: 0 0 auto; }
  .flow .flow-arrow { transform: rotate(90deg); width: auto; height: 30px; }
}
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-7);
}
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  /* Column flex so the trailing tag row pins to the bottom edge (see .feature-card .tags). */
  display: flex; flex-direction: column;
}
.feature-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--sp-3);
  color: var(--accent); background: var(--pill-bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.feature-card .icon svg { width: 26px; height: 26px; display: block; }
.feature-card h2,
.feature-card h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 6px; }
.feature-card p  { font-size: var(--fs-sm); color: var(--text2); line-height: 1.5; }
/* margin-top:auto pins the tag row to the card bottom; padding-top keeps the
   minimum offset in the tallest card where the auto margin is 0. */
.feature-card .tags { margin-top: auto; padding-top: var(--sp-3); }
/* Divisor-friendly fixed column counts so a trailing KPI row never strands a
   lone tile (auto-fit gave 7 cols at laptop widths: 8 tiles -> 7+1). Counts
   divide every consumer (4/8/10 tiles); no-:has() browsers keep the safe 4-up. */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: var(--sp-6) 0; }
@media (min-width: 600px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 4 -> one row; 8 -> 4+4; 10 -> 4+4+2 */
}
@media (min-width: 861px) {
  .kpi-row:has(> .kpi:last-child:nth-child(10)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* 10 tiles -> 5+5 */
}
@media (min-width: 1700px) {
  .kpi-row:has(> .kpi:last-child:nth-child(8)) { grid-template-columns: repeat(8, minmax(0, 1fr)); } /* 8 tiles -> one row */
}
@media (min-width: 2300px) {
  .kpi-row:has(> .kpi:last-child:nth-child(10)) { grid-template-columns: repeat(10, minmax(0, 1fr)); } /* 10 tiles -> one row */
}
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); text-align: center;
}
.kpi .k { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 800; color: var(--accent2); line-height: 1; }
.kpi .v { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.tab-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text2);
  border-radius: 8px; padding: 9px 18px; font-size: var(--fs-base); font-weight: 500;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface2); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Timeline ───────────────────────────────────────────────── */
.timeline { position: relative; padding-left: var(--sp-8); }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--border) 100%);
}
.tl-item { position: relative; margin-bottom: var(--sp-9); }
.tl-item::before {
  content: ''; position: absolute; left: -28px; top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.tl-item .tl-meta { font-size: var(--fs-sm); color: var(--text2); margin-bottom: 3px; }
.tl-item h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; }
.tl-item .tl-sub { font-size: var(--fs-base); color: var(--accent); margin-bottom: var(--sp-2); font-weight: 500; }
.tl-item ul { padding-left: var(--sp-5); font-size: var(--fs-base); color: var(--text2); }
.tl-item ul li { margin-bottom: 6px; line-height: 1.5; }
.tl-item.collapsed ul { display: none; }
.tl-item .tl-toggle {
  font-size: var(--fs-sm); color: var(--accent); cursor: pointer;
  background: none; border: none; padding: var(--sp-1) 0; margin-top: 6px;
  font-weight: 500; font-family: inherit;
  transition: color .15s;
}
.tl-item .tl-toggle:hover { color: var(--accent-hover); }

/* ── Recommendations ────────────────────────────────────────── */
.rec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: 10px;
}
.rec-card .rec-name { font-weight: 600; font-size: var(--fs-md); }
.rec-card .rec-role { font-size: var(--fs-sm); color: var(--text2); }
.rec-card .rec-quote { font-size: var(--fs-sm); color: var(--text2); font-style: italic; line-height: 1.5; }
.rec-card .rec-link { font-size: var(--fs-sm); color: var(--accent); margin-top: auto; font-weight: 500; }
.rec-card .rec-badge {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 3px 10px; border-radius: 6px;
  display: inline-block; width: fit-content;
}
.rec-badge.supervisor { color: var(--accent3); background: rgba(224,168,50,.12); border: 1px solid rgba(224,168,50,.25); }
.rec-badge.colleague { color: var(--accent2); background: rgba(76,199,100,.1); border: 1px solid rgba(76,199,100,.2); }
.rec-badge.personal { color: var(--accent); background: rgba(94,170,255,.1); border: 1px solid rgba(94,170,255,.2); }

/* ── Filter buttons ─────────────────────────────────────────── */
.filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.filter-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text2);
  border-radius: 8px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s; font-family: inherit;
}
.filter-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface2); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }

/* ── Cert cards ─────────────────────────────────────────────── */
.cert-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: 10px;
}
.cert-card .cert-issuer { font-size: var(--fs-xs); color: var(--accent3); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.cert-card h3 { font-size: var(--fs-md); font-weight: 600; }
.cert-card a { font-size: var(--fs-sm); color: var(--accent); font-weight: 500; }
.cert-card .cert-detail { font-size: var(--fs-sm); color: var(--text2); }
/* Pin the trailing credential link / degree tag / tag row to the card bottom;
   cards ending in body text have neither and keep normal flow. */
.cert-card > a, .cert-card > .tag, .cert-card > .tags { margin-top: auto; }

/* ── Skills ─────────────────────────────────────────────────── */
.skill-group { margin-bottom: var(--sp-7); }
.skill-group h3 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: var(--sp-3); font-weight: 600;
}

/* ── Hero (landing) ─────────────────────────────────────────── */
.hero {
  padding: 100px 0 var(--sp-11);
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(94,170,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(76,199,100,.04) 0%, transparent 60%),
    linear-gradient(165deg, var(--bg) 40%, var(--hero-grad-end) 100%);
}
.hero h1 {
  font-size: var(--type-display-size); font-weight: 800;
  letter-spacing: var(--type-heading-tracking); line-height: var(--type-display-leading);
}
.hero h1 span { color: var(--accent); }

/* Landing hero — name/role hierarchy.
   The name is the dominant wordmark (gradient-clipped across the two brand
   accents); the role sits beneath as a clearly subordinate line. Replaces the
   inline "Name / Role / & Role" mash for a cleaner visual hierarchy. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text2); margin-bottom: var(--sp-4);
}
.hero-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent2); box-shadow: 0 0 0 3px rgba(76,199,100,.18);
}
.hero-name {
  font-size: clamp(2.5rem, 6.4vw, 3.9rem); font-weight: 800;
  letter-spacing: -1.4px; line-height: 1.04; width: fit-content; max-width: 100%;
  background: linear-gradient(112deg, var(--accent) 0%, var(--accent-hover) 42%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-role {
  font-size: clamp(1.2rem, 2.8vw, 1.7rem); font-weight: 600; color: var(--text);
  letter-spacing: -0.3px; line-height: 1.25; margin-top: var(--sp-3);
}
.hero-role span { color: var(--accent); font-weight: 700; }
.hero-subtitle {
  font-size: var(--fs-lg); color: var(--text2); margin: var(--sp-5) 0 var(--sp-7);
  max-width: 660px; line-height: 1.6;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center;
  font-size: var(--fs-base); color: var(--text2); margin-bottom: var(--sp-7);
}
.hero-meta a { color: var(--text2); }
.hero-meta a:hover { color: var(--accent); }
/* Hairline middot separators between contact items (decorative). */
.hero-meta > * + *::before {
  content: '·'; color: var(--border-hl); margin-right: var(--sp-4); font-weight: 700;
}
/* Dedicated CTA row — buttons get their own breathing room. */
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.hero-text-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 8px;
  color: var(--text2); font-size: var(--fs-base); font-weight: 600;
}
.hero-text-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-7) var(--sp-9); margin-top: var(--sp-9);
  padding-top: var(--sp-8); border-top: 1px solid var(--border);
}
.stat-kicker {
  flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.trust-strip { border-block: 1px solid var(--border); background: var(--surface); }
.trust-strip-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7);
  padding-top: var(--sp-5); padding-bottom: var(--sp-5);
}
.trust-strip p { color: var(--text2); font-size: var(--fs-sm); line-height: 1.45; }
.trust-strip strong { color: var(--text); }

/* ── Interactive impact lab ────────────────────────────────── */
.impact-lab { position: relative; overflow: hidden; }
.impact-lab::before {
  content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: 5%;
  border-radius: 50%; background: radial-gradient(circle, rgba(94,170,255,.1), transparent 68%);
  pointer-events: none;
}
.impact-lab-shell { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); gap: var(--sp-10); align-items: center; }
.impact-lab-copy h2 { font-size: var(--fs-3xl); line-height: 1.16; max-width: 18ch; }
.impact-lab-copy > p:not(.hero-eyebrow):not(.impact-nojs) { color: var(--text2); line-height: 1.65; margin-top: var(--sp-5); max-width: 52ch; }
/* Only expose the tab controls when their behavior is available. Without JS,
   the server-authored first layer and explanatory fallback remain readable. */
.impact-tabs { display: none; gap: var(--sp-2); margin-top: var(--sp-7); }
html.js .impact-tabs { display: grid; }
.impact-tab {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid transparent;
  border-radius: var(--radius); background: transparent; color: var(--text2);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.impact-tab:hover { color: var(--text); background: var(--surface); transform: translateX(3px); }
.impact-tab.active { color: var(--text); border-color: var(--border-hl); background: var(--surface); box-shadow: var(--shadow-sm); }
.impact-tab-index { color: var(--accent); font: 700 var(--fs-xs)/1 ui-monospace, monospace; letter-spacing: .5px; }
.impact-nojs { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-5); }
.impact-ready .impact-nojs { display: none; }
.impact-stage {
  position: relative; min-height: 560px; isolation: isolate; overflow: hidden;
  border: 1px solid var(--border-hl); border-radius: 24px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
  box-shadow: var(--shadow-lg);
}
.impact-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 38%, rgba(94,170,255,.13), transparent 32%);
}
.impact-stage[data-layer="curriculum"] { --impact-color: var(--accent2); }
.impact-stage[data-layer="intelligence"] { --impact-color: var(--accent3); }
.impact-stage[data-layer] .impact-core { color: var(--impact-color, var(--accent)); border-color: var(--impact-color, var(--accent)); }
.impact-stage[data-layer] .impact-core-pulse { border-color: var(--impact-color, var(--accent)); }
.impact-stage[data-layer] .impact-readout-kicker { color: var(--impact-color, var(--accent2)); }
.impact-stage-grid {
  position: absolute; inset: 0; z-index: -2; opacity: .28;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000 45%, transparent 85%);
}
.impact-flow-lines { position: absolute; inset: 20px 5% auto; width: 90%; height: 360px; overflow: visible; }
.impact-flow-lines path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 8 10; opacity: .35; animation: impact-dash 12s linear infinite; }
.impact-flow-lines path + path { stroke: var(--accent2); animation-direction: reverse; }
@keyframes impact-dash { to { stroke-dashoffset: -180; } }
.impact-orbit { position: absolute; left: 50%; top: 38%; border: 1px solid var(--border-hl); border-radius: 50%; transform: translate(-50%,-50%); opacity: .45; }
.orbit-one { width: 190px; height: 190px; }
.orbit-two { width: 310px; height: 310px; border-style: dashed; animation: impact-spin 28s linear infinite; }
@keyframes impact-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.impact-core {
  position: absolute; left: 50%; top: 38%; width: 108px; height: 108px; transform: translate(-50%,-50%);
  display: grid; place-items: center; border-radius: 50%; color: var(--accent);
  background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 0 42px rgba(94,170,255,.18);
}
.impact-core-icon { font-size: 2.2rem; line-height: 1; }
.impact-core-pulse { position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: inherit; animation: impact-pulse 2.8s ease-out infinite; }
@keyframes impact-pulse { 0% { transform: scale(.9); opacity: .6; } 75%,100% { transform: scale(1.45); opacity: 0; } }
.impact-node {
  position: absolute; width: 150px; padding: 10px 12px; background: rgba(20,26,34,.94);
  border: 1px solid var(--border-hl); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
[data-theme="light"] .impact-node { background: rgba(255,255,255,.95); }
.impact-node-a { left: 5%; top: 16%; }
.impact-node-b { right: 5%; top: 18%; }
.impact-node-c { right: 10%; top: 49%; }
.impact-node-label { display: block; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.impact-node strong { color: var(--text); font-size: var(--fs-sm); line-height: 1.25; }
.impact-readout {
  position: absolute; inset: auto var(--sp-6) var(--sp-6); display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--sp-4) var(--sp-7);
  padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.impact-readout-kicker { color: var(--accent2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.impact-readout h3 { font-size: var(--fs-lg); line-height: 1.3; margin-top: var(--sp-2); }
.impact-readout p { color: var(--text2); font-size: var(--fs-sm); line-height: 1.55; }
.impact-readout a { grid-column: 2; color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.impact-stage.is-changing .impact-core-icon, .impact-stage.is-changing .impact-readout { animation: impact-in .35s ease both; }
@keyframes impact-in { from { opacity: .25; transform: translateY(6px); } }
.stat { text-align: left; }
.stat .num {
  font-size: var(--fs-3xl); font-weight: 800; color: var(--accent);
  line-height: 1; letter-spacing: -0.5px;
}
.stat .lbl {
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
}
/* Wide-screen landing hero: two columns — text left, a subtle stat panel right —
   so the hero uses the horizontal space instead of stranding text on the left.
   Scoped with :has() to the landing hero only (404/other heroes keep one column). */
@media (min-width: 1100px) {
  .hero:has(.hero-stats) .container {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: var(--sp-11); align-items: center;
  }
  .hero:has(.hero-stats) .hero-stats {
    margin-top: 0; padding-top: 0; border-top: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-7);
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface2) 100%);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-9) var(--sp-8); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.18));
  }
  .hero:has(.hero-stats) .stat-kicker { grid-column: 1 / -1; }
}

/* ── CTA button ─────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 11px 26px; border-radius: 10px;
  font-size: var(--fs-base); font-weight: 600;
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
  text-decoration: none !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(94,170,255,.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-bright));
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(94,170,255,.4);
}
.btn-secondary {
  /* border-hl: the default border is nearly invisible on dark surfaces. */
  background: var(--surface); color: var(--text); border: 1px solid var(--border-hl);
}
.btn-secondary:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Collapsible pedagogical sections ──────────────────────── */
/* A collapsed disclosure section shouldn't reserve a full open section's worth of
   vertical padding (that left a large empty band under "Weekly Structure"); tighten
   it until the <details> is expanded, when the normal section rhythm returns. */
.section:has(> .container > .pedagogy-details:not([open])) { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
/* Flex keeps the ▾ indicator on the same line as the heading — the title's
   block ::after accent bar otherwise forces a line break under an inline h2. */
.pedagogy-details summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--sp-2); width: fit-content;
}
.pedagogy-details summary::-webkit-details-marker { display: none; }
.pedagogy-details summary .section-title { display: inline-block; margin-bottom: 0; }
.pedagogy-details summary:hover .section-title { color: var(--accent); }
.pedagogy-details summary + .section-sub { margin-top: var(--sp-3); }
.muted-toggle {
  color: var(--muted); font-size: var(--fs-md); line-height: 1;
  display: inline-block; transition: transform .2s;
}
.pedagogy-details[open] summary .muted-toggle { transform: rotate(180deg); }

/* ── Flagship summary card (landing) ────────────────────────── */
.flagship-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-8);
  position: relative;
  overflow: hidden;
  /* Column flex so the trailing "Learn More" link (.card-link / .card-links,
     margin-top: auto) pins to the bottom edge when grid rows equalize height. */
  display: flex; flex-direction: column;
}
.flagship-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.flagship-card h3 { font-size: var(--fs-xl); font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); }
.flagship-card p { font-size: var(--fs-base); color: var(--text2); margin-bottom: var(--sp-5); line-height: 1.55; }
.flagship-card .flagship-lede { color: var(--text); font-size: var(--fs-md); }
.proof-list {
  list-style: none; display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding: 0;
}
.proof-list li {
  position: relative; padding-left: var(--sp-5); color: var(--text2);
  font-size: var(--fs-sm); line-height: 1.5;
}
.proof-list li::before {
  content: ''; position: absolute; left: 0; top: .58em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 3px var(--tag-green-bg);
}
.proof-list strong { color: var(--text); }
/* Fixed 2x2 grid so both flagship cards present their four metrics identically;
   margin-top:auto pins stats+CTA to the card bottom so metric baselines align. */
.flagship-card .mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-6); margin-top: auto; margin-bottom: var(--sp-5); }
/* Zero the link cluster's inherited margin-top:auto so .mini-stats' auto
   margin is the ONLY slack absorber (two competing autos split the slack). */
.flagship-card .card-links { margin-top: 0; }
.flagship-card .mini-stat { text-align: left; }
.flagship-card .mini-stat .num { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 800; color: var(--accent2); line-height: 1; }
.flagship-card .mini-stat .lbl { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* Evidence closes the homepage with real inspection paths instead of another
   duplicate navigation grid. The first card is image-led to break the site's
   otherwise text-only card rhythm. */
.evidence-section { background: linear-gradient(180deg, transparent, var(--surface2)); }
.evidence-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4); }
.evidence-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6); color: var(--text);
  display: flex; flex-direction: column; gap: var(--sp-3); overflow: hidden;
}
.evidence-card:hover { text-decoration: none; border-color: var(--border-hl); }
.evidence-card img {
  width: calc(100% + (2 * var(--sp-6))); height: auto; aspect-ratio: 16 / 7;
  object-fit: cover; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.evidence-type {
  color: var(--accent); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
}
.evidence-card h3 { font-size: var(--fs-lg); }
.evidence-card p { color: var(--text2); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.evidence-number {
  color: var(--accent2); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800;
  line-height: 1; letter-spacing: -1px;
}
.closing-cta { border-top: 1px solid var(--border); }
.closing-cta-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-9);
  align-items: center; padding-top: var(--sp-8); padding-bottom: var(--sp-8);
}
.closing-cta .hero-eyebrow { margin-bottom: var(--sp-3); }
.closing-cta h2 { font-size: var(--fs-2xl); max-width: 26ch; line-height: 1.2; }
.closing-cta p:not(.hero-eyebrow) { color: var(--text2); max-width: 62ch; margin-top: var(--sp-3); }
.closing-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
/* A <nav> landmark, not site chrome — undo the sticky-header treatment it
   would otherwise inherit from the base nav rule (it must scroll with the
   content, not ride up and cover the site nav). */
.breadcrumb {
  font-size: var(--fs-sm); color: var(--text2); margin-bottom: var(--sp-7);
  position: static; background: none; border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ── Weekly structure component ─────────────────────────────── */
.weekly-structure {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.weekly-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.weekly-card {
  flex: 1; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5);
}
.weekly-card .pts { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 800; line-height: 1; }
.weekly-card .pts.c1 { color: var(--accent); }
.weekly-card .pts.c2 { color: var(--accent2); }
.weekly-card .pts.c3 { color: var(--accent3); }
.weekly-card .pts.c4 { color: var(--accent4); }
.weekly-card h3 { font-size: var(--fs-md); font-weight: 700; margin: var(--sp-2) 0 6px; }
.weekly-card p { font-size: var(--fs-sm); color: var(--text2); line-height: 1.45; }

/* ── Phenomena list ─────────────────────────────────────────── */
.phenomena-list {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.phenomena-item {
  display: flex; align-items: baseline; gap: 14px;
}
.phenomena-item span:last-child { font-size: var(--fs-md); color: var(--text); line-height: 1.45; }

/* ── Skills grid ────────────────────────────────────────────── */
.skills-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8);
}

/* ── Cert grid ──────────────────────────────────────────────── */
.cert-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4);
}

/* ── Contact section ────────────────────────────────────────── */
.contact-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-7); }
.contact-item {
  display: flex; align-items: center; gap: 14px; font-size: var(--fs-md);
}
.contact-icon { color: var(--accent); width: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.contact-icon svg { width: 18px; height: 18px; display: block; }
/* Give each contact link a >=24px tap target (WCAG 2.5.8 Target Size). The
   vertical padding enlarges the inline link's hit area without altering the
   visual rhythm of the stacked list. */
.contact-item a { display: inline-block; padding: var(--sp-1) 0; }

/* ── Page header (detail pages) ─────────────────────────────── */
.page-header { margin-top: 4px; }
.page-header h1 {
  font-size: var(--type-h1-size); margin: var(--sp-5) 0 14px;
}
.page-header .page-desc {
  font-size: var(--type-subtitle-size); color: var(--text2); max-width: var(--measure-lede);
  margin-bottom: var(--sp-8); line-height: var(--type-body-leading);
}

/* ── Theme toggle ──────────────────────────────────────────── */
.theme-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-lg); padding: 8px; min-width: 44px; min-height: 44px;
  border-radius: 6px; line-height: 1; flex-shrink: 0;
  margin-left: auto; transition: color .15s;
}
.theme-toggle:hover { color: var(--text); }

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); padding: var(--sp-9) 0;
  text-align: center; color: var(--text2); font-size: var(--fs-sm);
}
footer p + p { margin-top: 6px; font-size: var(--fs-xs); }

/* ── Responsive ─────────────────────────────────────────────── */
/* Nav collapses to a hamburger below 1000px (covers tablets + the tight zone
   where the full link row would overflow). nav-links becomes a dropdown panel.
   The collapse is gated on html.js (set by theme-init.js): without JavaScript
   the hamburger is dead, so no-JS visitors get the link list always expanded
   instead of an unopenable menu. */
@media (max-width: 1000px) {
  nav .inner { flex-wrap: wrap; min-height: 48px; padding: 6px var(--sp-4); }
  html.js .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; }
  .theme-toggle { margin-left: 0; }
  .nav-links {
    order: 3; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: 2px; padding: var(--sp-2) 0 var(--sp-3);
  }
  html.js .nav-links { display: none; }
  html.js .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 12px; }
  .nav-bridge { margin-left: 0; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-5); }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: var(--sp-10) 0; }
  .hero { padding: 72px 0 var(--sp-10); }
  .hero-stats { gap: var(--sp-6); }
  .trust-strip-inner { grid-template-columns: 1fr; gap: var(--sp-3); }
  .impact-lab-shell { grid-template-columns: 1fr; gap: var(--sp-7); }
  .impact-lab-copy h2 { max-width: 24ch; }
  .impact-tabs { grid-template-columns: repeat(3,1fr); }
  .impact-tab { grid-template-columns: 1fr; gap: 5px; text-align: center; padding: var(--sp-3) var(--sp-2); }
  .impact-tab:hover { transform: none; }
  .impact-stage { min-height: 600px; }
  .impact-node { width: 128px; }
  .impact-node-a { left: var(--sp-3); top: 12%; }
  .impact-node-b { right: var(--sp-3); top: 12%; }
  .impact-node-c { right: var(--sp-3); top: 42%; }
  .impact-readout { grid-template-columns: 1fr; inset: auto var(--sp-3) var(--sp-3); }
  .impact-readout a { grid-column: 1; }
  .flagship-card { padding: var(--sp-6); }
  .flagship-card .mini-stats { gap: 14px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .kpi-row { gap: 10px; }
  .kpi { min-width: 100px; padding: var(--sp-3) var(--sp-4); }
  .weekly-grid { flex-direction: column; }
  .skills-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .tab-bar { gap: 6px; }
  .tab-btn { padding: 8px 14px; font-size: var(--fs-sm); }
  .evidence-grid, .closing-cta-inner { grid-template-columns: 1fr; }
  .closing-actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Large displays (1080p / 1440p / 4K): widen the content column so the text
   column isn't a narrow strip stranded in whitespace. The fluid root font-size
   handles the type scale; this restores comfortable line lengths + density.
   The sticky nav tracks the same width so it stays aligned with the content. */
@media (min-width: 1700px) {
  .container, nav .inner { max-width: 1500px; }
}
@media (min-width: 2300px) {
  .container, nav .inner { max-width: 1840px; }
}
@media (min-width: 3000px) {
  .container, nav .inner { max-width: 2200px; }
}
/* As the container widens, cap running text to a comfortable measure so wide
   screens gain columns + balanced whitespace, not unreadably long lines.
   .grid-3up holds a balanced 3+3 (auto-fit would strand its 6 cards 4+2/5+1)
   until all 6 fit one row at 3000px+. */
@media (min-width: 1700px) {
  .section-sub, .hero-subtitle, .page-desc, .p-sub { max-width: 72ch; }
  .grid-3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 3000px) {
  .grid-3up { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Forced colors (Windows High Contrast) ─────────────────── */
/* Forced-colors mode strips background tints, which is all that visually marks
   several selected states. System color keywords are honored inside this block,
   so selection is re-marked with an explicit Highlight outline. */
@media (forced-colors: active) {
  .media-nav button[aria-current],
  .tab-btn[aria-selected="true"],
  .tab-btn[aria-pressed="true"],
  .filter-btn[aria-pressed="true"] {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  body { background: var(--print-bg); color: var(--print-text); font-size: 11pt; line-height: 1.4; }
  nav, footer, .btn, .filter-btn, .tab-btn, .tl-toggle, .theme-toggle, .hero-meta a[href^="tel"], .hero-meta a[href^="mailto"] { display: none; }
  a { color: var(--print-text); text-decoration: underline; }
  .hero { padding: 20px 0; background: none; }
  .hero h1 span { color: var(--print-heading); }
  .hero-name { -webkit-text-fill-color: var(--print-heading); color: var(--print-heading); background: none; }
  .hero-role span, .hero-eyebrow { color: var(--print-muted); }
  .section { padding: 16px 0; }
  .card, .flagship-card, .feature-card, .rec-card, .cert-card, .kpi, .weekly-card {
    box-shadow: none; border: 1px solid var(--print-border); break-inside: avoid;
  }
  .stat .num, .mini-stat .num, .kpi .k { color: var(--print-text); }
  .tag { border: 1px solid var(--print-tag-border); background: var(--print-tag-bg); color: var(--print-heading); }
  .flagship-card::before { display: none; }
  .timeline::before { background: var(--print-tl-line); }
  .tl-item::before { background: var(--print-tl-dot); border-color: var(--print-tl-ring); box-shadow: 0 0 0 1px var(--print-tl-dot); }
  .tl-item.collapsed ul { display: block; }
}

/* ── Credentials page overrides ───────────────────────────── */
.section-no-pad-bottom { padding-bottom: 0; }
.tags-tight { margin-top: 6px; }
.container-narrow { max-width: 640px; }
/* On the educator microsite the prose/contact blocks keep the standard container
   left edge (so their section headings line up with the full-width sections) while
   the reading line stays short — instead of centering the whole block and shifting
   each heading inward, which read as a left-edge zig-zag down the page. */
[data-nav-group="educator"] .container-narrow { max-width: 1120px; }
[data-nav-group="educator"] .container-narrow > * { max-width: 66ch; }
@media (min-width: 769px) {
  [data-nav-group="educator"] .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 404 page layout ─────────────────────────────────────── */
.hero-404 { text-align: center; min-height: 60vh; display: flex; align-items: center; }
.hero-404 .hero-subtitle { margin-left: auto; margin-right: auto; }
.hero-404 .hero-meta { justify-content: center; }
/* Fill the viewport between nav and footer so the 404 hero centers in the
   real empty space (no :has() support -> the 60vh min-height above applies). */
body:has(.hero-404) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.hero-404) main { flex: 1; display: flex; flex-direction: column; }
body:has(.hero-404) .hero-404 { flex: 1; min-height: 0; }

/* ── Work-sample prose (long-form artifact pages) ─────────── */
.prose { max-width: var(--measure-lede); color: var(--text2); font-size: var(--type-body-size); line-height: var(--type-body-leading); }
.prose h1 { font-size: var(--type-h1-size); margin-bottom: var(--sp-3); }
.prose h2 { font-size: var(--type-h2-size); color: var(--text); margin-top: var(--sp-9); margin-bottom: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--sp-7); }
.prose h3 { font-size: var(--type-h3-size); color: var(--text); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose li > ul, .prose li > ol { margin-top: var(--sp-2); margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--text); font-style: italic; }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent-hover); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-7) 0; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em; background: var(--pill-bg); color: var(--accent-hover);
  padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(94,170,255,.15);
}
.prose pre {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); margin-bottom: var(--sp-4); overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-sm);
  color: var(--text2); line-height: 1.5;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4) 0; color: var(--text2); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose-table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.prose th { background: var(--surface2); color: var(--text); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.3px; }
.prose tr:last-child td { border-bottom: none; }
.prose td code { white-space: nowrap; }
.prose .meta { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.prose .meta strong { color: var(--text2); }

/* Work-sample back link (discreet, non-nav) */
.back-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); font-size: var(--fs-sm); font-weight: 500;
  margin-bottom: var(--sp-5);
}
.back-link:hover { color: var(--accent); text-decoration: none; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ── High contrast (prefers-contrast: more) ────────────────── */
@media (prefers-contrast: more) {
  :root {
    --border: #5a6880;
    --border-hl: #8090a8;
    --muted: #9dafc4;
    --text2: #d0dae6;
    --pill-bg: #1a2d44;
  }
  [data-theme="light"] {
    --border: #6b7a8d;
    --border-hl: #3d4a5c;
    --muted: #3d4a5c;
    --text2: #1e2530;
    --pill-bg: #dde3ec;
    /* This block darkens --pill-bg, which lowers accent-text-on-pill contrast;
       darken --accent / --accent2 in lockstep so blue + green tags/links still
       clear 4.5:1 here (high-contrast mode must never be *less* accessible than
       the default). */
    --accent: #1e64b3;
    --accent2: #187332;
  }
  :focus-visible {
    outline-width: 3px !important;
    outline-offset: 3px !important;
  }
  .card, .feature-card, .cert-card, .rec-card, .kpi, .weekly-card { border-width: 2px; }
  .tag { border-width: 2px; }
  .skip-link:focus { outline: 3px solid var(--accent); outline-offset: 3px; }
}

/* ── Forced colors (Windows High Contrast Mode) ─────────────── */
@media (forced-colors: active) {
  /* The selected tab/filter state is carried by a custom background that
     forced-colors strips — mark it with a system-color outline (leaving the
     label on its readable default colors) so the active choice stays distinct. */
  .tab-btn.active, .filter-btn.active { outline: 2px solid Highlight; outline-offset: -2px; }
  /* The gradient primary button has no border; give it a real boundary so it
     reads as a control (links and bordered controls already survive). */
  .btn-primary { border: 1px solid ButtonText; }
}

/* ── Resume page (generated from resume.json) ──────────────── */
.resume-hero { padding: 88px 0 var(--sp-9); }
.resume-contact { margin-top: var(--sp-5); margin-bottom: var(--sp-6); }
.resume-actions { margin-bottom: 0; }
.resume-section { padding: var(--sp-9) 0; }
.resume-h {
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.2px;
  color: var(--text); margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--border);
  position: relative;
}
.resume-h::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 48px; height: 2px; background: var(--accent);
}
.resume-summary { font-size: var(--fs-md); color: var(--text2); max-width: 900px; line-height: 1.6; }
.resume-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-6);
}
.resume-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1);
}
.resume-kpi .rk-v { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent2); line-height: 1; letter-spacing: -0.5px; }
.resume-kpi .rk-l { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.resume-job { margin-bottom: var(--sp-6); }
.resume-job:last-child { margin-bottom: 0; }
.resume-job-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-2);
}
.resume-job-head h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.resume-job-head .rj-emp { color: var(--accent); font-weight: 600; }
.resume-job-meta { font-size: var(--fs-sm); color: var(--text2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.resume-job ul { padding-left: var(--sp-5); }
.resume-job ul li { font-size: var(--fs-base); color: var(--text2); line-height: 1.5; margin-bottom: var(--sp-2); }
.resume-skills { display: flex; flex-direction: column; gap: var(--sp-3); }
.resume-skill-row {
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: var(--sp-4);
  align-items: baseline; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
.resume-skill-row:last-child { border-bottom: none; padding-bottom: 0; }
.resume-skill-row .rs-cat { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.resume-skill-row .rs-list { font-size: var(--fs-sm); color: var(--text2); line-height: 1.55; }
.resume-two-col { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-9); }
.resume-edu { margin-bottom: var(--sp-4); font-size: var(--fs-base); color: var(--text); }
.resume-edu .re-meta { font-size: var(--fs-sm); color: var(--text2); }
.resume-certs { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.resume-certs li { font-size: var(--fs-base); color: var(--text); line-height: 1.45; }
.resume-certs .rc-iss { color: var(--text2); font-size: var(--fs-sm); }
.resume-certs .rc-meta { color: var(--text2); font-size: var(--fs-sm); }
.resume-refs { margin-top: var(--sp-7); font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
@media (max-width: 768px) {
  .resume-two-col { grid-template-columns: 1fr; gap: var(--sp-7); }
  .resume-skill-row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .resume-job-head .resume-job-meta { white-space: normal; }
}
/* Print: tight, single-column, ink-frugal resume document. */
@media print {
  .resume-hero { padding: 0 0 4px; }
  .resume-contact { margin: 3px 0 6px; }
  /* Re-show email/phone on the resume (the global hero-meta print rule hides them). */
  .resume-contact a[href^="tel"], .resume-contact a[href^="mailto"] { display: inline; }
  .resume-section { padding: 4px 0; border-top: none; }
  .resume-actions, .resume-hero .hero-eyebrow, .resume-highlights { display: none; }
  .resume-h { font-size: 12pt; border-bottom: 1.5px solid var(--print-border); margin-bottom: 4px; padding-bottom: 2px; }
  .resume-h::after { display: none; }
  .resume-summary, .resume-job ul li, .resume-skill-row .rs-list, .resume-certs li, .resume-edu { font-size: 9.5pt; color: var(--print-text); }
  .resume-summary { line-height: 1.4; margin-bottom: 0; }
  .resume-job { margin-bottom: 5px; break-inside: avoid; }
  .resume-job ul { padding-left: 15px; }
  .resume-job ul li { margin-bottom: 2px; line-height: 1.35; }
  .resume-job-head { margin-bottom: 1px; }
  .resume-job-head h3 { font-size: 11pt; }
  .resume-job-head .rj-emp, .resume-skill-row .rs-cat { color: var(--print-heading); }
  .resume-job-meta, .resume-edu .re-meta, .resume-certs .rc-iss { color: var(--print-muted); }
  .resume-skills { gap: 4px; }
  /* One consistent rule system: a full-width rule under each section header only,
     no inter-row table lines, no partial-width column rules. Skills stay two-column
     (aligned category | list) without row borders; Education/Certifications stack
     full-width so their header rules match every other section. */
  .resume-skill-row { grid-template-columns: minmax(135px, 170px) 1fr; gap: 14px; padding-bottom: 3px; align-items: baseline; border-bottom: none; }
  .resume-skill-row .rs-list { line-height: 1.35; }
  .resume-two-col { grid-template-columns: 1fr; gap: 8px; break-inside: avoid; }
  .resume-edu { margin-bottom: 5px; }
  .resume-certs { gap: 3px; }
  .resume-certs li { line-height: 1.3; }
  .resume-refs { margin-top: 6px; }
}

/* Science media gallery */
/* ===========================================================================
   Science Media gallery — organized by NGSS Performance Expectation.
   Strand accent: one CSS var (--strand) set per discipline, reused by dots,
   card borders, and standard pills so the four disciplines read consistently.
   =========================================================================== */
.strand-ps    { --strand: var(--accent); }
.strand-ls    { --strand: var(--accent2); }
.strand-ess   { --strand: var(--accent3); }
.strand-ets   { --strand: var(--accent4); }
.strand-other { --strand: var(--muted); }

.media-source-stamp {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}
.media-kpis { margin-top: var(--sp-7); }
.media-kpis.kpi-row { grid-template-columns: repeat(5, 1fr); }
.media-browser-section { padding-top: var(--sp-7); }

.media-toolbar {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) minmax(130px, 0.5fr) minmax(200px, 1fr);
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-6);
}
.media-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.media-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.media-field input,
.media-field select {
  width: 100%;
  min-height: 40px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  text-transform: none;
}
.media-field input:focus,
.media-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Placeholder color via token (opacity:1 for Firefox) so it clears 4.5:1 on the
   field fill in both themes — the UA-default grey fails on the dark surface. */
.media-field input::placeholder { color: var(--muted); opacity: 1; }

/* App layout: a sticky standards navigator at left, the stage (context banner +
   preview + results) at right. The rail keeps every standard one click away, so
   navigating never means scrolling the full asset list. */
.media-app {
  display: grid;
  grid-template-columns: minmax(230px, 280px) 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.media-nav-rail {
  position: sticky;
  top: calc(var(--nav-h, 60px) + var(--sp-3));
  max-height: calc(100vh - var(--nav-h, 60px) - var(--sp-5));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.media-nav-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.media-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.media-nav button {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text2);
  font: inherit;
  cursor: pointer;
  padding: 6px 8px;
}
.media-nav button:hover { background: var(--surface2); color: var(--text); }
.media-nav button.active {
  background: var(--surface2);
  border-color: var(--border-hl);
  color: var(--text);
}
.media-nav-all { font-weight: 700; margin-bottom: var(--sp-2); }
.media-nav-group { margin-top: var(--sp-2); }
.media-nav-strand { font-weight: 700; }
.media-nav-strand-name { flex: 1; }
.media-nav-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--strand, var(--muted));
  flex: 0 0 auto;
}
.media-nav-code { padding-left: var(--sp-5); font-size: var(--fs-sm); }
.media-nav-code-id {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.media-nav-code.active .media-nav-code-id { color: var(--accent-hover); }
.media-nav-count {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  background: var(--pill-bg);
  border-radius: 20px;
  padding: 1px 8px;
  min-width: 26px;
  text-align: center;
}

.media-stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

/* Standard context banner — the NGSS statement + three dimensions + MLS line. */
.std-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--strand, var(--accent));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.std-banner-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.std-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--text);
}
.std-count { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.std-statement {
  color: var(--text2);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.std-dims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.std-dim {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.std-dim-k {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.std-dim-v { font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.std-mls {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--tag-green-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.std-mls-badge {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  border-radius: 5px;
  padding: 2px 6px;
}
.std-mls-line { color: var(--text); font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.std-mls-note { color: var(--text2); font-size: var(--fs-xs); line-height: 1.45; margin: 2px 0 0; }

/* Standard / strand pills reuse the strand accent. */
.tag.strand-tag { color: var(--strand, var(--accent)); border-color: var(--strand, var(--border-hl)); }
.tag.code-tag { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.media-preview-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.media-preview-heading h2,
.media-results-head h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.media-preview-heading p {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
/* Preview frame. No fixed height on the embed: SVGs and videos are contained to
   fit, and simulation iframes are sized to their own content by JS (fitFrame),
   so no resource is ever truncated behind an inner scroll-bar. */
.media-preview-frame {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 340px;
  overflow: hidden;
}
.media-preview-frame.is-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: #fff;
}
.media-preview-frame.is-image img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}
.media-preview-frame.is-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.media-preview-frame.is-video video {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: #000;
}
.media-preview-frame.is-frame { background: #fff; }
.media-preview-frame.is-frame iframe {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 0;
  background: #fff;
}
/* Explicit focus ring for the embedded preview so the tab stop is visible
   without relying on the browser default (WCAG 2.4.7). */
.media-preview-frame img:focus-visible,
.media-preview-frame video:focus-visible,
.media-preview-frame iframe:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.media-preview-links,
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
}
.media-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.media-result-count {
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
}
/* Empty/error message — spans the full grid when shown there; also used inside
   the preview frame when an embed fails to load. */
.media-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-6);
  text-align: center;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.media-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--strand, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.media-card.is-selected {
  border-color: var(--border-hl);
  border-left-color: var(--strand, var(--accent));
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-md);
}
.media-card h3 {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.3;
  margin: var(--sp-1) 0 0;
}
.media-subtitle {
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.media-card-std {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: auto;
  padding-top: var(--sp-2);
}
.media-preview-btn {
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* Disciplines hub — the compact landing shown before any filter is applied. */
.media-grid.is-overview { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.strand-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--strand, var(--accent));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.strand-tile-head { display: flex; align-items: center; gap: var(--sp-2); }
.strand-tile-name { flex: 1; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.strand-tile-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.strand-tile-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.strand-chip {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
}
.strand-chip:hover { border-color: var(--strand, var(--border-hl)); color: var(--text); }
.strand-tile-btn { margin-top: auto; align-self: flex-start; font-size: var(--fs-sm); cursor: pointer; }

@media (max-width: 1024px) {
  .media-toolbar { grid-template-columns: 1fr 1fr; }
  .media-type-tabs { grid-column: 1 / -1; }
  /* Rail moves above the stage and stops being sticky so it never traps focus
     on narrow screens; it collapses to a horizontally readable index. */
  .media-app { grid-template-columns: 1fr; }
  .media-nav-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .media-nav { max-height: 260px; overflow: auto; }
}

@media (max-width: 640px) {
  .media-kpis.kpi-row { grid-template-columns: repeat(2, 1fr); }
  .media-toolbar { grid-template-columns: 1fr; }
  .media-results-head { align-items: flex-start; flex-direction: column; }
  .media-preview-frame.is-image img,
  .media-preview-frame.is-video video { max-height: 70vh; }
}