/* =============================================================================
   Dr. Damon Tojjar reputation fleet - shared design system (Wave 4)
   One identity, many properties. Mobile-first, responsive, accessible.
   Each site overrides the --accent* and --hero* tokens via :root in its own
   <style> block or by editing the token row below before deploy.
   No em dashes anywhere. All motion gated behind prefers-reduced-motion.
   ============================================================================= */

/* Self-hosted variable fonts (served from the same origin so the CSP font-src is 'self' and no visitor IP is
   sent to a third-party font CDN, per the GDPR self-hosting guidance). Both are SIL Open Font License:
   Fraunces (variable, opsz + weight) and Inter (variable weight). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-var.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); }

:root {
  /* Brand ink + surfaces (light theme defaults) */
  --ink: #0b1f3a;
  --ink-2: #13294b;
  --bg: #ffffff;
  --surface: #f6f8fb;
  --surface-2: #eef2f8;
  --card: #ffffff;
  --text: #0b1f3a;
  --muted: #54627a;
  --line: #dde4ee;

  /* Accent (per-site overridable). Default = teal. */
  --accent: #0f9e8f;
  --accent-strong: #0b7d72;
  --accent-soft: rgba(15, 158, 143, 0.12);
  --gold: #c79a3a;
  --error: #c5453b;

  /* Bands (dark sections) */
  --band-bg: #0b1f3a;
  --band-text: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.72);
  --band-line: rgba(255, 255, 255, 0.14);

  --header-bg: rgba(255, 255, 255, 0.82);
  --btn-solid-bg: #0b1f3a;
  --btn-solid-text: #ffffff;

  /* Hero gradient (per-site overridable) */
  --hero-bg: radial-gradient(1200px 520px at 78% -8%, var(--accent-soft), transparent 60%),
             linear-gradient(180deg, #fbfdff, #f1f5fb);

  --shadow: 0 18px 50px -28px rgba(11, 31, 58, 0.45);
  --shadow-sm: 0 8px 24px -16px rgba(11, 31, 58, 0.4);
  --maxw: 1140px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 600ms;

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* System dark preference (when no explicit data-theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8edf5; --ink-2: #cdd8e8;
    --bg: #070f1c; --surface: #0b1727; --surface-2: #122339; --card: #0f2034;
    --text: #e8edf5; --muted: #9fb0c5; --line: rgba(255, 255, 255, 0.12);
    --accent-strong: var(--accent-strong-dark, #6fd9cc); --accent-soft: rgba(27, 182, 164, 0.18);
    --error: #f2938b;
    --band-bg: #0c1a2c; --band-text: #eef3fb; --band-muted: rgba(255, 255, 255, 0.70);
    --band-line: rgba(255, 255, 255, 0.12);
    --header-bg: rgba(8, 16, 28, 0.82);
    --btn-solid-bg: var(--accent); --btn-solid-text: var(--on-accent, #04231f);
    --hero-bg: radial-gradient(1200px 520px at 78% -8%, var(--accent-soft), transparent 60%),
               linear-gradient(180deg, #0a1424, #070f1c);
    --shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark theme (toggle) */
html[data-theme="dark"] {
  --ink: #e8edf5; --ink-2: #cdd8e8;
  --bg: #070f1c; --surface: #0b1727; --surface-2: #122339; --card: #0f2034;
  --text: #e8edf5; --muted: #9fb0c5; --line: rgba(255, 255, 255, 0.12);
  --accent-strong: var(--accent-strong-dark, #6fd9cc); --accent-soft: rgba(27, 182, 164, 0.18);
  --error: #f2938b;
  --band-bg: #0c1a2c; --band-text: #eef3fb; --band-muted: rgba(255, 255, 255, 0.70);
  --band-line: rgba(255, 255, 255, 0.12);
  --header-bg: rgba(8, 16, 28, 0.82);
  --btn-solid-bg: var(--accent); --btn-solid-text: var(--on-accent, #04231f);
  --hero-bg: radial-gradient(1200px 520px at 78% -8%, var(--accent-soft), transparent 60%),
             linear-gradient(180deg, #0a1424, #070f1c);
  --shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
em { font-style: italic; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; scroll-margin-top: 84px; }
.surface { background: var(--surface); }
.band { background: var(--band-bg); color: var(--band-text); }
.band h2, .band h3, .band .section-eyebrow { color: var(--band-text); }

.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--card); color: var(--text); padding: 10px 16px;
  border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.skip-link:focus { left: 16px; top: 12px; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent); border-radius: 6px; }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 0.85rem 1.5rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.95rem; border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--btn-solid-bg); color: var(--btn-solid-text); }
.btn-primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }

/* ---- Scroll progress + back to top ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent);
  z-index: 200; transition: width 0.08s linear;
}
.to-top {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); z-index: 120; box-shadow: var(--shadow);
  transition: all var(--dur-2) var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px);
  background: var(--header-bg); border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(11, 31, 58, 0.5); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; color: var(--text); }
.wordmark:hover { text-decoration: none; }
.wordmark-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
}
.wordmark-text { font-size: 1.06rem; }
.wordmark-text .accent { color: var(--accent-strong); }
.site-nav { display: flex; align-items: center; gap: 10px; }
.nav-menu { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--text); font-size: 0.93rem; font-weight: 500; position: relative; padding: 4px 0; }
.nav-menu a:hover { text-decoration: none; color: var(--accent-strong); }
.nav-menu a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--accent); transition: right var(--dur-2) var(--ease);
}
.nav-menu a.active:not(.nav-cta)::after { right: 0; }
.nav-cta { padding: 0.5rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); }
.nav-cta:hover { border-color: var(--accent); }
.nav-toggle, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1.5px solid var(--line); background: transparent; color: var(--text); border-radius: var(--r-pill);
  cursor: pointer; transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.nav-toggle { display: none; }
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -6px; } .nav-toggle-bar::after { top: 6px; }
.icon-sun { display: none; }
html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); padding: 0; }
.hero-blob {
  position: absolute; top: -120px; right: -80px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 62%);
  filter: blur(8px); pointer-events: none; will-change: transform; transition: transform 0.4s var(--ease);
}
.hero-inner { padding: 92px 0 80px; position: relative; z-index: 1; max-width: 56ch; }
.eyebrow, .section-eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-strong); margin: 0 0 0.8rem;
}
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); margin: 0.2rem 0 1.1rem; }
.hero-lede { font-size: 1.2rem; color: var(--muted); }
.hero-actions { display: flex; gap: 14px; margin-top: 1.9rem; flex-wrap: wrap; }
.hero-facts {
  display: grid; grid-template-columns: repeat(4, auto); gap: 26px; list-style: none;
  margin: 2.4rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line);
}
.hero-facts li { display: flex; flex-direction: column; }
.fact-num { font-family: var(--font-head); font-size: 1.5rem; color: var(--text); }
.fact-label { font-size: 0.82rem; color: var(--muted); }

/* ---- Section headings ---- */
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 0.8rem; max-width: 22ch; }
.section > .container > p, .about-copy p, .research-grid p { max-width: 64ch; }
.lead { font-size: 1.14rem; color: var(--muted); }

/* ---- Grids ---- */
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: start; }
.cards-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
/* Denser index grid for the full article library: 2 columns, 3 on wide screens, 1 on narrow. */
.card-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
@media (min-width: 1000px) { .card-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .card-index-grid { grid-template-columns: 1fr; } }
/* Enriched topic-hub article list (title + reading time + excerpt) and two-tier /topics/ directory. */
.hub-list { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 18px; }
.hub-item { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hub-item:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-title { font-weight: 600; font-size: var(--step-0); }
.hub-meta { color: var(--muted); font-size: var(--step--1); margin-left: 0.6rem; }
.hub-excerpt { color: var(--muted); font-size: var(--step--1); margin: 0.35em 0 0; }
.topic-group { margin-top: var(--space-lg); }
.topic-group > h2 { font-size: var(--step-1); margin: 0 0 0.5em; }
.topic-group-list { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.topic-group-list .hub-item { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 640px) { .topic-group-list { grid-template-columns: 1fr; } }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; background: var(--card);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card-num { font-family: var(--font-head); font-size: 0.9rem; color: var(--accent-strong); font-weight: 600; }
.card h3 { font-size: 1.2rem; margin: 8px 0 10px; }
.card p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.card-soft { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: var(--surface); }
.card-soft h3 { font-size: 1.1rem; margin: 0 0 12px; }
.card-soft ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.94rem; }
.card-soft li { margin: 6px 0; }
.band .card-soft { background: rgba(255, 255, 255, 0.04); border-color: var(--band-line); }
.band .card-soft ul { color: var(--band-muted); }

/* ---- About ---- */
.about-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
}
.portrait-frame {
  aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--ink), var(--ink-2) 55%, var(--accent));
  display: flex; align-items: center; justify-content: center;
}
.portrait-initials { color: rgba(255, 255, 255, 0.7); font-family: var(--font-head); font-size: 2.4rem; }
.about-meta { margin: 0; }
.about-meta > div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.about-meta > div:last-child { border-bottom: 0; }
.about-meta dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.about-meta dd { margin: 2px 0 0; font-size: 0.95rem; }

/* ---- Work list ---- */
.work-list { list-style: none; margin: 36px 0 0; padding: 0; }
.work-item { padding: 28px 0; border-top: 1px solid var(--line); }
.work-item:first-child { border-top: 0; }
.work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.work-head h3 { font-size: 1.4rem; margin: 0; }
.work-role { font-size: 0.82rem; color: var(--accent-strong); font-weight: 600; white-space: nowrap; }
.work-item p { color: var(--muted); margin: 10px 0 0; }
.work-aside { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

/* ---- Publications ---- */
.research-grid { align-items: start; }
.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pub-list li {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; background: var(--card);
  display: grid; gap: 4px; transition: border-color var(--dur-2) var(--ease);
}
.pub-list li:hover { border-color: var(--accent); }
.pub-venue { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); font-weight: 600; }
.pub-title { font-weight: 600; font-size: 0.99rem; line-height: 1.35; }
.pub-note { font-size: 0.86rem; color: var(--muted); }
.pub-doi { font-size: 0.82rem; }

/* ---- Filter chips ---- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.chip-btn {
  font-size: 0.85rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.chip-btn:hover { border-color: var(--accent); color: var(--text); }
.chip-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #04231f); }
.is-hidden { display: none !important; }

/* ---- Stats band ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 46px 0; }
.stat .stat-num { font-family: var(--font-head); font-size: 2.1rem; color: var(--band-text); }
.stat .stat-num em { font-style: normal; color: var(--accent); }
.stat .stat-label { font-size: 0.86rem; color: var(--band-muted); margin-top: 0.2rem; }

/* ---- Testimonial ---- */
.testimonial { max-width: 80ch; margin: 48px auto 0; text-align: center; }
.testimonial blockquote { font-family: var(--font-head); font-size: 1.4rem; line-height: 1.45; margin: 0 0 14px; }
.testimonial figcaption { color: var(--muted); font-size: 0.9rem; }
.band .testimonial blockquote { color: var(--band-text); }
.band .testimonial figcaption { color: var(--band-muted); }

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 36px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 26px 34px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
}
.timeline .t-role { font-weight: 600; }
.timeline .t-org { color: var(--muted); font-size: 0.92rem; }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: 12px; margin-top: 28px; }
.faq-list details {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 20px; background: var(--card);
}
.faq-list summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; color: var(--accent-strong); font-size: 1.3rem; }
.faq-list details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-list details p { color: var(--muted); margin: 0 0 14px; }

/* ---- Contact ---- */
.contact-inner { max-width: 60ch; }
.contact-actions { margin-top: 1.4rem; }
.contact-note { font-size: 0.9rem; color: var(--muted); margin-top: 1rem; }

/* ---- Footer ---- */
.site-footer { background: var(--band-bg); color: var(--band-text); padding: 54px 0 30px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--band-line); padding-bottom: 28px; }
.footer-brand { max-width: 340px; }
.footer-brand .wordmark-text { color: var(--band-text); display: block; margin-bottom: 10px; font-family: var(--font-head); font-size: 1.1rem; }
.footer-brand p { font-size: 0.9rem; color: var(--band-muted); margin: 0; }
.footer-heading { color: var(--band-text); font-weight: 600; margin: 0 0 12px; font-size: 0.95rem; font-family: var(--font-body); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 6px 0; }
.footer-col a { color: var(--band-muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--band-text); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: 0.84rem; color: var(--band-muted); }
.footer-bottom a { color: var(--band-muted); }

/* ---- Motion ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }
.reveal:nth-child(4) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-blob { display: none; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid-2, .research-grid { grid-template-columns: 1fr; gap: 36px; }
  .cards-4, .cards-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .hero-facts { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .nav-menu {
    display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; background: var(--card); padding: 18px 24px; gap: 16px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav-menu.open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .section { padding: 64px 0; }
  .work-head { flex-direction: column; gap: 4px; }
  .work-role { white-space: normal; }
}
@media (max-width: 480px) {
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .container { padding: 0 18px; }
}

/* ---- Print (used by cv site) ---- */
@media print {
  .site-header, .to-top, .scroll-progress, .site-footer .footer-col, .hero-actions, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 16px 0; }
  a { color: #000; text-decoration: underline; }
}

/* ---- Polish + perf (additive, conflict-free with the JS) ---- */
.stat-num { font-variant-numeric: tabular-nums; }              /* no layout shift while counting up (CLS) */
.pub-doi { word-break: break-all; }                            /* long DOIs never overflow on mobile */
.wordmark-mark { transition: transform var(--dur-1) var(--ease); }
.wordmark:hover .wordmark-mark { transform: rotate(-6deg) scale(1.06); }
.btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)); }
.card svg, .hero svg, .btn svg { will-change: auto; }
img { content-visibility: auto; }                              /* defer offscreen image decode */
@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .wordmark-mark { transform: none; }
}

/* =============================================================================
   Wave 4.1 enhancement layer - richer motion, depth, and polish (additive).
   Uses existing tokens only, no dependencies, all motion gated behind
   prefers-reduced-motion. No em dashes or en dashes anywhere.
   ============================================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Accent selection and a slim themed scrollbar */
::selection { background: var(--accent); color: var(--on-accent, #ffffff); }
html { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* Eyebrow accent tick */
.section-eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; }
.section-eyebrow::before, .eyebrow::before {
  content: ""; width: 1.7rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); display: inline-block;
}

/* Hero: layered aurora glow behind the content */
.hero { isolation: isolate; }
.hero-inner { z-index: 2; }
.hero-blob { z-index: 0; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero::before {
  background: radial-gradient(45% 55% at 14% 8%, var(--accent-soft), transparent 66%),
             radial-gradient(40% 50% at 94% 0%, rgba(199, 154, 58, 0.10), transparent 66%);
  animation: auroraDrift 22s var(--ease) infinite alternate;
}
.hero::after {
  background: radial-gradient(52% 60% at 80% 112%, var(--accent-soft), transparent 70%);
  opacity: 0.65; animation: auroraDrift2 27s var(--ease) infinite alternate;
}

/* Hero intro: gentle staggered entrance on load (independent of scroll) */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero .section-eyebrow, .hero-lede, .hero-actions {
    opacity: 0; animation: heroIn 0.9s var(--ease-out) forwards;
  }
  /* The hero h1 is the LCP element: keep it opacity 1 and animate transform only, so it paints immediately. */
  .hero h1 { animation: heroRise 0.9s var(--ease-out) both; animation-delay: 0.06s; }
  .hero-lede { animation-delay: 0.18s; }
  .hero-actions { animation-delay: 0.28s; }
}

/* Smoother, slightly richer reveal with extended stagger */
.reveal { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(5) { transition-delay: 240ms; }
.reveal:nth-child(6) { transition-delay: 300ms; }
.reveal:nth-child(7) { transition-delay: 360ms; }
.reveal:nth-child(8) { transition-delay: 420ms; }

/* Cards: top accent bar, cursor spotlight, deeper lift */
.card { position: relative; overflow: hidden; --mx: 50%; --my: 50%; }
.card > * { position: relative; z-index: 1; }
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-soft), transparent 60%);
  transition: opacity var(--dur-2) var(--ease);
}
.card:hover::after { opacity: 1; }
.card:hover { box-shadow: 0 28px 64px -32px rgba(11, 31, 58, 0.55); }

/* Buttons: animated sheen sweep, glow, click ripple */
.btn { position: relative; overflow: hidden; }
.btn-primary {
  box-shadow: 0 12px 30px -16px var(--accent);
  background-image: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.22) 46%, transparent 60%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-size: 250% 100%, auto; background-position: 130% 0, 0 0;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              background-position 0.7s var(--ease-out);
}
.btn-primary:hover { background-position: -50% 0, 0 0; box-shadow: 0 18px 40px -18px var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.nav-cta:hover { background: var(--accent-soft); }
.ripple {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%) scale(0); pointer-events: none; animation: ripple 0.6s var(--ease-out);
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Content links: animated underline grow */
.section a:not(.btn):not(.nav-cta):not(.wordmark) {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-2) var(--ease-out);
}
.section a:not(.btn):not(.nav-cta):not(.wordmark):hover { background-size: 100% 1.5px; text-decoration: none; }
/* Inline text links (paragraphs and lists) get a persistent underline for color-independent
   affordance; card-title and nav links keep the clean hover-only sweep above. */
.section p a:not(.btn), .section li a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.section p a:not(.btn):hover, .section li a:not(.btn):hover, .section p a:not(.btn):focus-visible, .section li a:not(.btn):focus-visible { text-decoration: none; }

/* Scroll progress: gradient with glow. Back to top: accent fill. */
.scroll-progress { height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); box-shadow: 0 0 12px var(--accent); }
.to-top:hover { background: var(--accent); color: var(--on-accent, #ffffff); border-color: var(--accent); transform: translateY(-3px); }

/* Wordmark mark: gradient and soft glow */
.wordmark-mark { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 6px 18px -8px var(--accent); }

/* FAQ: animated marker, open highlight, content fade */
.faq-list summary::after { transition: transform var(--dur-2) var(--ease-spring); }
.faq-list details { transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.faq-list details[open] { border-color: var(--accent); background: var(--accent-soft); }
.faq-list details[open] p { animation: fadeInUp 0.4s var(--ease-out); }

/* Timeline: gradient spine, dot pulse on hover */
.timeline::before { background: linear-gradient(var(--accent), var(--line)); }
.timeline li::before { transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease); }
.timeline li:hover::before { transform: scale(1.25); box-shadow: 0 0 0 6px var(--accent-soft); }

/* Stats glow, publication lift, portrait zoom */
.stat .stat-num { text-shadow: 0 0 30px var(--accent-soft); }
.pub-list li { position: relative; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease); }
.pub-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.portrait-frame { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease); }
.about-card:hover .portrait-frame { transform: scale(1.02); box-shadow: var(--shadow); }

/* Mobile menu entrance */
.nav-menu.open { animation: fadeInUp 0.25s var(--ease-out); }

@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroRise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes auroraDrift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }
@keyframes auroraDrift2 { from { transform: translate(2%, 0) scale(1.05); } to { transform: translate(-3%, -2%) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
  .hero .eyebrow, .hero .section-eyebrow, .hero h1, .hero-lede, .hero-actions { opacity: 1; animation: none; }
  .card:hover { transform: none; }
}

/* =============================================================================
   Wave 4.2 design layer - editorial typography, long-form prose, two-tone accent,
   depth, performance, and accessibility. Derived from the five-lens design panel
   (see DESIGN_SPEC.md). Tokens and shared classes only; propagates fleet-wide.
   CSP-safe, reduced-motion-gated, no em dashes or en dashes anywhere.
   ============================================================================= */

/* Fluid modular type scale and spacing scale (one source for every size) */
:root {
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.06rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.25rem + 0.70vw, 1.70rem);
  --step-3:  clamp(1.70rem, 1.40rem + 1.40vw, 2.40rem);
  --step-4:  clamp(2.10rem, 1.60rem + 2.40vw, 3.00rem);
  --step-5:  clamp(2.50rem, 1.80rem + 3.60vw, 4.00rem);
  --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2.25rem; --space-xl: 3.25rem; --space-2xl: 4rem; --space-3xl: 5.5rem;
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --card-edge: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"], :root:not([data-theme="light"]) { --card-edge: rgba(255, 255, 255, 0.05); }

body { font-size: var(--step-0); }
.hero h1 { font-size: var(--step-5); }
.section h2 { font-size: var(--step-3); }
.hero-lede { font-size: var(--step-1); }

/* Variable optical sizing: display heads get the high-contrast cut, small heads stay sturdy */
h1, h2, h3, h4 { font-optical-sizing: auto; text-wrap: balance; }
.hero h1 { font-variation-settings: "opsz" 120; letter-spacing: -0.02em; }
.section h2 { font-variation-settings: "opsz" 60; letter-spacing: -0.015em; }
h3, .card h3 { font-variation-settings: "opsz" 30; letter-spacing: -0.005em; }

/* Metrics-matched serif fallback to cut heading FOUT and CLS (CSP-safe, local only) */
@font-face { font-family: "Fraunces-fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
:root { --font-head: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif; }

/* Two-tone accent: gold reserved for honors and emphasis */
.stat .stat-num em { color: var(--gold); }
.section-divider { height: 1px; background: var(--accent-line); border: 0; margin: var(--space-lg) 0; }

/* Data UI: tabular figures and true small caps */
.fact-num, .card-num, .pub-venue, .stat .stat-num, .t-org { font-variant-numeric: tabular-nums; }
.pub-venue, .about-meta dt { font-variant: small-caps; text-transform: none; letter-spacing: 0.04em; }

/* Cards read as distinct planes (faint top edge), keeping the hover lift */
.card { box-shadow: inset 0 1px 0 var(--card-edge); }
.card:hover { box-shadow: inset 0 1px 0 var(--card-edge), 0 28px 64px -32px rgba(11, 31, 58, 0.55); }

/* No-JS and capability safety: hide reveal targets only when JS is present */
.reveal:not(.in) { opacity: 1; transform: none; }
html.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }

/* Focus twins: keyboard users get the same feedback as hover */
.card:focus-within { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--card-edge), 0 28px 64px -32px rgba(11, 31, 58, 0.55); }
.card:focus-within::before { transform: scaleX(1); }
.pub-list li:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.section a:not(.btn):not(.nav-cta):not(.wordmark):focus-visible { background-size: 100% 1.5px; }

/* Stronger, surface-independent focus ring + forced-colors fallback */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 6px; }
@media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } }

/* Anchored deep links, and keyboard Tab focus, clear the sticky header (WCAG 2.2 AA 2.4.11 Focus Not Obscured) */
:target, [id] { scroll-margin-top: 92px; }
html { scroll-padding-top: 92px; }

/* Active nav: a non-color cue in addition to the underline */
.nav-menu a.active:not(.nav-cta) { font-weight: 600; }

/* Scope will-change so buttons do not hold layers permanently */
.btn { will-change: auto; }
.btn:hover, .btn:focus-visible { will-change: transform; }

/* Save-data and reduced-data: pause perpetual GPU work */
@media (prefers-reduced-data: reduce) {
  .hero::before, .hero::after { animation: none; }
  .site-header { backdrop-filter: none; }
}

/* ---- Long-form article reading experience (.prose / .article) ---- */
.article { padding-top: var(--space-md); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 1.9em; padding-top: 0.2em; position: relative; }
.prose h2::before { content: ""; display: block; width: 2rem; height: 3px; border-radius: 2px; margin-bottom: 0.5rem; background: linear-gradient(90deg, var(--accent), transparent); }
.prose h3 { font-size: var(--step-1); margin-top: 1.5em; }
.prose p, .prose li { font-size: var(--step-0); line-height: 1.75; color: var(--text); text-wrap: pretty; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-top: 0.4em; }
.prose blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.1rem; border-left: 3px solid var(--accent); font-family: var(--font-head); font-style: italic; font-size: var(--step-1); color: var(--ink-2); }
/* Inline body/citation links carry a persistent underline so they are distinguishable
   without relying on color alone (WCAG 1.4.1); the branded gradient sweep swaps in on hover. */
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-2) var(--ease-out); }
.prose a:hover, .prose a:focus-visible { background-size: 100% 1.5px; text-decoration: none; }

/* Article masthead: eyebrow + h1 + meta row */
.article-head { max-width: 68ch; margin-bottom: var(--space-md); }
.article-head h1 { font-size: var(--step-4); margin: 0.3rem 0 0.6rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; margin: 0; }
.article-meta [data-reading-time] { min-width: 6ch; display: inline-block; }
.article-meta .reviewed { color: var(--muted); }
.article-meta .byline { font-weight: 600; color: var(--text); }
.article-meta .byline a { color: inherit; }

/* Author trust unit */
.author-card { margin-top: var(--space-xl); padding: var(--space-md); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); max-width: 68ch; }
.author-card h2 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.author-card p { color: var(--muted); font-size: var(--step-0); margin: 0; }

/* In-article table of contents (JS-built into [data-toc]); sticky on wide viewports */
.article-toc { margin: var(--space-md) 0; font-size: var(--step--1); }
.article-toc h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.5rem; }
.article-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.article-toc a { color: var(--muted); }
.article-toc a.active { color: var(--accent-strong); font-weight: 600; }
@media (min-width: 1040px) {
  .article-wrap { display: grid; grid-template-columns: 1fr 15rem; gap: var(--space-xl); align-items: start; }
  .article-toc { position: sticky; top: 96px; grid-column: 2; order: 2; }
  .article-wrap .prose, .article-wrap .article-head { grid-column: 1; }
}

@media (max-width: 900px) { .section { padding: var(--space-2xl) 0; } }

/* Scroll progress driven by transform (compositor-only), not width */
.scroll-progress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.08s linear; will-change: transform; }
.article-toc:empty { display: none; }

/* Blog index card meta */
.post-meta { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; margin: 0 0 0.4rem; }

/* Article related reading + previous/next */
.related { max-width: 68ch; margin-top: var(--space-xl); border-top: 1px solid var(--line); padding-top: var(--space-md); }
.related h2 { font-size: var(--step-1); margin: 0 0 0.6rem; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.related-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.related-list a { font-weight: 600; }
.related-cat { font-size: var(--step--1); color: var(--accent-strong); font-variant: small-caps; letter-spacing: 0.04em; }
.prevnext { max-width: 68ch; margin-top: var(--space-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.pn { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease); }
.pn:hover, .pn:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.pn-dir { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pn-title { font-weight: 600; color: var(--text); }
.pn-next { text-align: right; }
@media (max-width: 600px) { .prevnext { grid-template-columns: 1fr; } .pn-next { text-align: left; } }

/* =============================================================================
   Wave 4.3 design layer - signature and findability. Per-site hero line motif,
   crafted SVG monogram portrait, blog index search, scroll-timeline progress,
   and same-origin view transitions. Derived from DESIGN_SPEC.md sections 3, 4, 6.
   CSP-safe, reduced-motion-gated, no em dashes or en dashes anywhere.
   ============================================================================= */

/* Per-site hero line motif: one shared SVG, per-site transform from the --m-* vars
   (set by motif_css in the generator). Themed by the accent, faded away from the text. */
.hero-motif {
  position: absolute; inset: -12% -6%; width: 112%; height: 124%; z-index: 0; pointer-events: none;
  opacity: var(--m-op, 0.5);
  transform: translate(var(--m-x, 0), var(--m-y, 0)) rotate(var(--m-rot, 0deg)) scale(var(--m-scale, 1));
  transform-origin: 62% 50%;
  mask-image: linear-gradient(90deg, transparent, #000 46%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%, #000);
}
.hero-motif path { vector-effect: non-scaling-stroke; }
.hero-motif .hero-motif-dots { opacity: 0.7; }
html[dir="rtl"] .hero-motif { transform-origin: 38% 50%; mask-image: linear-gradient(270deg, transparent, #000 46%, #000); -webkit-mask-image: linear-gradient(270deg, transparent, #000 46%, #000); }
@media (max-width: 700px) { .hero-motif { opacity: calc(var(--m-op, 0.5) * 0.7); } }

/* Crafted SVG monogram portrait (replaces the initials placeholder in the hub about-card) */
.portrait-monogram { width: 80%; height: auto; display: block; }
.portrait-initials { color: rgba(255, 255, 255, 0.7); font-family: var(--font-head); font-size: 2.4rem; }

/* Blog index client-side search */
.article-search { max-width: 440px; margin: 4px 0 6px; }
.article-search input[type="search"] {
  width: 100%; padding: 0.72rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--step-0);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.article-search input[type="search"]::placeholder { color: var(--muted); }
.article-search input[type="search"]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
.search-status { min-height: 1.2em; margin: 0.45rem 0 0; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.no-results { color: var(--muted); margin: 1rem 0 0; }

/* Scroll-driven progress bar when the browser supports scroll timelines (JS is the fallback). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress { animation: progressGrow linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Same-origin cross-document view transitions (blog index to article, hub section to hub). Progressive:
   unsupported browsers ignore the at-rule; reduced-motion users get no cross-fade. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =============================================================================
   Wave 4.4 compliance layer - from the 7-lens standards audit (COMPLIANCE_AND_STANDARDS_AUDIT.md).
   Template-owned educational disclaimer and the footer privacy link. No em dashes.
   ============================================================================= */
.method-note {
  max-width: 68ch; margin-top: var(--space-md); padding: 0.9rem 1.1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface);
  color: var(--muted); font-size: var(--step--1);
}
.method-note strong { color: var(--text); }
.article-note {
  max-width: 68ch; margin-top: var(--space-md); padding: 0.9rem 1.1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line); border-radius: var(--r-md); background: var(--surface);
  color: var(--muted); font-size: var(--step--1);
}
.footer-bottom .footer-legal a { margin-left: 0; }

/* Topic hubs: crawlable topical-authority pages (SEO/AEO/KOL). Pill cloud on the index, columned list on hubs. */
.topic-cloud { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.topic-cloud a { display: inline-block; padding: 0.5rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-size: 0.9rem; color: var(--text); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.topic-cloud a:hover, .topic-cloud a:focus-visible { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.topic-list { list-style: none; margin: 1em 0 0; padding: 0; columns: 2; column-gap: var(--space-xl); }
.topic-list li { margin: 0 0 0.55em; break-inside: avoid; }
@media (max-width: 640px) { .topic-list { columns: 1; } }

/* Article AEO: breadcrumb trail, answer-first capsule, and the contextual spoke-to-pillar link. */
.crumbs { font-size: var(--step--1); color: var(--muted); margin: 0 0 var(--space-sm); max-width: 68ch; }
.crumbs a { color: var(--muted); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent-strong); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--text); }
.answer-capsule { max-width: 68ch; margin: 0 0 var(--space-md); padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r-md); }
.answer-capsule p { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--ink); }
.topic-link { max-width: 68ch; margin-top: var(--space-md); color: var(--muted); font-size: var(--step--1); }
@media (min-width: 1040px) { .article-wrap .answer-capsule { grid-column: 1; } }
.references { max-width: 68ch; margin-top: var(--space-xl); border-top: 1px solid var(--line); padding-top: var(--space-md); }
.references h2 { font-size: var(--step-1); margin: 0 0 0.6rem; }
.ref-list { margin: 0; padding-left: 1.3rem; color: var(--muted); font-size: var(--step--1); }
.ref-list li { margin: 0.4em 0; }
.ref-list a { word-break: break-word; }

/* =============================================================================
   Wave 5.0 editorial block components - callouts, data tables, pull-quotes,
   captioned figures, and a section-break ornament. Emitted by the markdown
   renderer's new block vocabulary (build_tojjar_fleet.py: _md_to_html and the
   fence helpers). Token-driven and theme-aware; meaning carried by label + icon
   (never color alone, WCAG 1.4.1); forced-colors mapped so nothing vanishes in
   Windows High Contrast. CSP-safe (static HTML/CSS only). No em/en dashes.
   ============================================================================= */

/* Callouts: note / key / takeaways / caution / aside / context. The accent left
   rule and the label carry the identity; the body holds ordinary rendered prose. */
.prose .callout {
  --co: var(--accent); --co-strong: var(--accent-strong);
  max-width: 68ch; margin: 1.5em 0; padding: 0.95rem 1.15rem;
  border: 1px solid var(--line); border-left: 3px solid var(--co);
  border-radius: var(--r-md); background: var(--surface);
}
.prose .callout-label {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--co-strong); font-variant: small-caps;
}
.prose .callout-ico { flex: none; color: var(--co); }
.prose .callout-body > * { margin-top: 0.6em; }
.prose .callout-body > *:first-child { margin-top: 0; }
.prose .callout-body p, .prose .callout-body li { font-size: var(--step-0); }
.prose .callout-takeaways { background: var(--accent-soft); }
.prose .callout-caution { --co: var(--gold); }
.prose .callout-aside, .prose .callout-context {
  --co: var(--line); --co-strong: var(--muted); background: var(--card);
}
@media (forced-colors: active) {
  .prose .callout { border: 1px solid CanvasText; border-left: 3px solid Highlight; }
  .prose .callout-ico { color: CanvasText; }
}

/* Data tables: captioned, scoped headers, tabular figures, horizontal scroll on
   overflow so a wide table never breaks the page (CLS-safe). */
.prose .table-wrap { max-width: 68ch; margin: 1.6em 0; overflow-x: auto; }
.prose table {
  border-collapse: collapse; width: 100%; font-size: var(--step--1);
  font-variant-numeric: tabular-nums; text-align: left;
}
.prose caption {
  caption-side: top; text-align: left; font-family: var(--font-head);
  font-size: var(--step--1); color: var(--muted); margin-bottom: 0.5rem; text-wrap: pretty;
}
.prose th, .prose td { padding: 0.5rem 0.72rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--accent); color: var(--ink); white-space: nowrap; }
.prose tbody th[scope="row"] { font-weight: 600; color: var(--ink); }
.prose tbody tr:last-child td, .prose tbody tr:last-child th { border-bottom: 0; }
.prose .ta-r { text-align: right; }
.prose .ta-c { text-align: center; }
@media (forced-colors: active) {
  .prose thead th { border-bottom: 2px solid CanvasText; }
  .prose th, .prose td { border-bottom: 1px solid CanvasText; }
}

/* Pull-quote: a large Fraunces re-set of a line from the body, visually distinct
   from the citation blockquote (which keeps its left accent rule). */
.prose .pullquote { max-width: 68ch; margin: 1.9em 0; padding: 0; border: 0; }
.prose .pullquote blockquote {
  margin: 0; padding: 0; border: 0; font-family: var(--font-head); font-style: normal;
  font-size: var(--step-2); line-height: 1.28; color: var(--ink); text-wrap: pretty;
  font-variation-settings: "opsz" 60; letter-spacing: -0.01em;
}
.prose .pullquote blockquote::before {
  content: ""; display: block; width: 2.4rem; height: 3px; border-radius: 2px;
  margin-bottom: 0.7rem; background: linear-gradient(90deg, var(--accent), transparent);
}
.prose .pullquote figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted); }
.prose .pullquote figcaption::before { content: ""; }

/* Captioned figure wrapper (holds author-embedded inline SVG or a rendered table). */
.prose .figure { max-width: 68ch; margin: 1.8em 0; }
.prose .figure svg { max-width: 100%; height: auto; display: block; }
.prose .figure figcaption { margin-top: 0.6rem; font-size: var(--step--1); color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.prose .figure-credit { display: block; margin-top: 0.2rem; color: var(--muted); font-variant: small-caps; letter-spacing: 0.03em; }

/* Section-break ornament: three quiet marks in the display face, not a plain rule. */
.prose hr.rule-ornament {
  border: 0; height: auto; margin: var(--space-lg) 0; text-align: center; overflow: visible;
}
.prose hr.rule-ornament::before {
  content: "\2022\2002\2022\2002\2022"; color: var(--accent);
  font-family: var(--font-head); font-size: 0.9rem; letter-spacing: 0.1em;
}

/* =============================================================================
   Wave 5.1 data-visualization engine - inline SVG charts built ONLY from the
   article's own cited numbers (build_tojjar_fleet.py: the _viz_* builders).
   Fills are CSS classes (theme-aware; forced-colors mapped so nothing vanishes);
   a "Show the numbers" table and the SVG title/desc are the accessible fallback.
   All motion gated behind prefers-reduced-motion AND html.js so the chart is
   fully visible with JS off. CSP-safe (no external assets). No em/en dashes.
   ============================================================================= */
.prose .viz {
  max-width: 68ch; margin: 1.6em 0; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); background: var(--surface);
}
.prose .viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.prose .viz figcaption { margin-top: 0.6rem; font-size: var(--step--1); color: var(--muted); text-wrap: pretty; }
.prose .viz-scope { margin: 0 0 0.6rem; font-size: var(--step--1); color: var(--muted); font-style: italic; }
.prose .viz-data { margin-top: 0.5rem; font-size: var(--step--1); }
.prose .viz-data summary { cursor: pointer; color: var(--accent-strong); font-weight: 600; }
.prose .viz-data[open] summary { margin-bottom: 0.4rem; }
.prose .viz-data .table-wrap { margin: 0.4em 0 0; }
/* SVG text: body font, tabular figures, theme ink */
.viz text { fill: var(--text); font-family: var(--font-body); font-size: 15px; font-variant-numeric: tabular-nums; }
.viz .viz-lab { fill: var(--muted); font-size: 14px; }
.viz .viz-cell-n { font-family: var(--font-head); font-size: 17px; }
/* bar-compare */
.viz-track { fill: var(--accent-soft); }
.viz-bar { fill: var(--accent); }
/* icon-array */
.viz-cell--off { fill: var(--accent-soft); }
.viz-cell--on { fill: var(--accent); }
.viz-cell--on2 { fill: var(--gold); }
/* forest */
.viz-null { stroke: var(--muted); stroke-dasharray: 3 3; }
.viz-point { fill: var(--accent-strong); }
.viz-whisker { stroke: var(--accent-strong); stroke-width: 2; }
/* 2x2 matrix: tint by class, never hue alone; a hairline box keeps cells legible */
.viz-cell-box { stroke: var(--line); }
.viz-tp, .viz-fp { fill: var(--accent-soft); }
.viz-tn, .viz-fn { fill: var(--surface-2); }
@media (forced-colors: active) {
  .viz-bar, .viz-cell--on, .viz-cell--on2, .viz-point { fill: Highlight; }
  .viz-track, .viz-cell--off { fill: Canvas; stroke: CanvasText; stroke-width: 1; }
  .viz-whisker { stroke: CanvasText; } .viz-null { stroke: GrayText; }
  .viz-cell-box { stroke: CanvasText; } .viz text { fill: CanvasText; }
}
/* Bars grow in on reveal; only when JS is present (so no-JS renders full bars) and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  html.js .viz-bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 0.8s var(--ease-out); }
  html.js .viz.in .viz-bar { transform: scaleX(1); }
}

/* =============================================================================
   Wave 5.2 deep IA surfaces - the /glossary/ (DefinedTermSet) and /start/ reading
   paths. Reuses .prose / .hub-list / .topic-cloud / .work-list; a few additions
   for the numbered path steps, the A-Z jump bar, and the start-hub cards.
   Theme-aware, CSP-safe, no em/en dashes.
   ============================================================================= */
/* Numbered reading-path steps (built on the existing .work-list) */
.path-list .work-item { padding: 22px 0; }
.path-step {
  display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em;
  margin-right: 0.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-body); font-size: 0.85em; font-weight: 700; font-variant-numeric: tabular-nums;
  vertical-align: 0.06em;
}
.path-list .work-head h3 a { color: var(--text); }
@media (forced-colors: active) { .path-step { border: 1px solid CanvasText; } }

/* Start-here hub: cards link straight to each path (reuses .card + .cards-3) */
.start-grid .card { display: block; }
.start-grid .card h3 { margin-top: 6px; }
/* Section heading above the path list / card grid (keeps the h1 -> h2 -> h3 outline correct) */
.article h2.path-heading { max-width: 68ch; margin: 0 0 var(--space-sm); font-size: var(--step-2); font-variation-settings: "opsz" 60; }

/* Glossary index A-Z jump bar (sticky, small, same-page anchors) */
.alpha-bar { position: sticky; top: 76px; z-index: 5; padding: 0.4rem 0; margin: 0 0 0.4rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); }
.alpha-bar a { min-width: 2em; text-align: center; font-variant: small-caps; letter-spacing: 0.02em; }
@media (prefers-reduced-data: reduce) { .alpha-bar { backdrop-filter: none; } }

/* Glossary term page: aliases line under the definition capsule */
.glossary-aliases { max-width: 68ch; margin: 0 0 var(--space-sm); color: var(--muted); font-size: var(--step--1); }
.glossary-aliases::before { content: ""; }

/* =============================================================================
   Wave 5.3 article interaction layer - heading permalinks, cite-this-article
   with copy controls, and the table-of-contents reading-progress spine. All
   progressive (readable + linkable with JS off), reduced-motion and forced-colors
   safe, CSP-safe. No em/en dashes.
   ============================================================================= */
/* Self-linking heading permalink: the visible "#" is a ::after so the anchor
   text stays empty (TOC + FAQ harvest are unaffected). Revealed on hover/focus. */
.prose h2 { position: relative; }
.prose .heading-anchor {
  margin-left: 0.4rem; color: var(--muted); text-decoration: none; background: none;
  font-weight: 400; opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.prose .heading-anchor::after { content: "#"; }
.prose h2:hover .heading-anchor, .prose .heading-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .prose .heading-anchor { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .prose .heading-anchor { transition: none; } }

/* Cite this article */
.cite-box { max-width: 68ch; margin-top: var(--space-md); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 0.2rem 1rem; }
.cite-box summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0; font-size: var(--step-0); }
.cite-box[open] summary { margin-bottom: 0.3rem; }
.cite-text { font-size: var(--step--1); color: var(--text); overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; margin: 0 0 0.6rem; font-variant-numeric: tabular-nums; }
.cite-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.7rem; }
.copy-btn { font: inherit; font-size: var(--step--1); font-weight: 600; padding: 0.4rem 0.9rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.copy-btn:hover, .copy-btn:focus-visible { border-color: var(--accent); }
.copy-btn.is-copied { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.copy-btn.is-copied::after { content: " \2713"; }
@media (forced-colors: active) { .copy-btn.is-copied { border: 2px solid Highlight; } }

/* TOC reading-progress spine (wide viewports, where the TOC is a sticky rail) */
.article-toc a.seen { color: var(--text); }
@media (min-width: 1040px) {
  .article-toc ol { position: relative; padding-left: 0.9rem; }
  .article-toc ol::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 2px; background: var(--line); border-radius: 2px; }
  .article-toc ol::after {
    content: ""; position: absolute; left: 0; top: 0.2em; width: 2px; border-radius: 2px; background: var(--accent);
    height: calc((100% - 0.4em) * var(--toc-progress, 0)); transition: height var(--dur-2) var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) { .article-toc ol::after { transition: none; } }

/* =============================================================================
   Wave 5.4 typography and identity - a labeled answer capsule, scientific
   sup/sub, quiet meta dividers, an optional cornerstone lead paragraph, and
   prose rhythm polish. Token-driven, theme-aware, progressive. No em dashes.
   ============================================================================= */
/* Answer capsule: a small "In short" eyebrow over the definition/answer body. Scoped under .answer-capsule
   so it out-specifies the existing ".answer-capsule p" rule. */
.answer-capsule .answer-capsule-label { margin: 0 0 0.3rem; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; font-variant: small-caps; text-transform: none; color: var(--accent-strong); }
.answer-capsule .answer-capsule-body { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--ink); }

/* Scientific super/subscript that does not disturb the line box */
.prose sup, .prose sub { font-size: 0.72em; line-height: 0; }
.prose sup { vertical-align: 0.5em; }
.prose sub { vertical-align: -0.25em; }

/* Article meta: a quiet middot between date, reading time, and reviewed date */
.article-meta > *:not(:first-child)::before { content: "\00B7"; margin-right: 0.7rem; color: var(--muted); }

/* Optional cornerstone lead paragraph (front matter lead: true) */
.prose p.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.prose p.lead + p { margin-top: 1.1em; }

/* Prose rhythm: hanging punctuation, gentle hyphenation, no orphans/widows (all progressive) */
.prose { hanging-punctuation: first last; }
.prose p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 3; orphans: 2; widows: 2; }

/* =============================================================================
   Wave 5.5 blog findability - the search input and the sort select share one row;
   the status message wraps to its own line. Deep-linkable ?q= and "/" to focus
   are handled in main.js. No em dashes.
   ============================================================================= */
.article-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 640px; }
.article-search input[type="search"] { flex: 1 1 240px; width: auto; }
.article-sort {
  flex: 0 0 auto; padding: 0.72rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--step-0); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.article-sort:hover { border-color: var(--accent); }
.article-sort:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
.article-search .search-status { flex: 1 0 100%; }

/* =============================================================================
   Wave 5.6 print - the CV and the evidence explainers are what people actually
   print or save as PDF. The base print block above was written for the CV only
   and leaves articles carrying the sticky TOC, related reading, and (critically)
   JS-gated .reveal blocks that would print blank under html.js. This makes each a
   clean, source-visible handout. No em dashes.
   ============================================================================= */
@media print {
  /* MANDATORY: unhide every JS-gated reveal block, or the references, the
     education-not-advice disclaimer, and the author card print blank under html.js. */
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Hide interactive and navigational chrome that has no meaning on paper. */
  .article-toc, .related, .prevnext, .crumbs, .cite-box, .copy-btn, .heading-anchor,
  .topic-link, .filters, .article-search, .to-top, .scroll-progress, .nav-toggle,
  .alpha-bar, .viz-data { display: none !important; }
  /* Full measure so nothing is clipped to the 68ch screen column. */
  .prose, .article-head, .answer-capsule, .references, .method-note, .article-note,
  .author-card, .article-wrap { max-width: none !important; }
  .article-wrap { display: block !important; }
  /* Show where external links point (the site's whole value is its sources). */
  .prose a[href^="http"]::after, .references a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; color: #000; word-break: break-all;
  }
  /* Keep atomic blocks together and headings with their text. */
  .prose h2, .prose h3 { break-after: avoid; }
  .references, .method-note, .answer-capsule, .callout, .viz, .figure, .pullquote,
  .table-wrap, .author-card { break-inside: avoid; }
  .answer-capsule, .references, .callout, .prose th, .prose td { border-color: #000 !important; }
  /* CV: a tighter, single-page-friendly document. */
  @page { margin: 18mm 16mm; }
  .cv-doc { max-width: 100% !important; }
  .cv-doc section { break-inside: avoid; }
  #printBtn { display: none !important; }
}

/* =============================================================================
   Wave 6.0 - richer animated backgrounds and motion. Everything is compositor
   only (transform / opacity), theme-aware via the accent tokens, CSP-safe (pure
   CSS, no scripts), and fully gated behind prefers-reduced-motion. No em/en dashes.
   ============================================================================= */

/* Hero: a slowly rotating conic aurora (scaled past the box so rotation never
   shows a corner) layered behind the drifting radial pools. Overrides the Wave 4
   hero pseudos. */
.hero::before {
  inset: -55%; opacity: 0.7;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, var(--accent-soft) 42deg, transparent 108deg,
    rgba(199, 154, 58, 0.10) 172deg, transparent 250deg,
    var(--accent-soft) 312deg, transparent 360deg);
}
.hero::after {
  inset: 0; opacity: 0.9;
  background: radial-gradient(45% 55% at 14% 8%, var(--accent-soft), transparent 66%),
             radial-gradient(40% 50% at 94% 0%, rgba(199, 154, 58, 0.10), transparent 66%),
             radial-gradient(52% 60% at 80% 112%, var(--accent-soft), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroConic 64s linear infinite; will-change: transform; }
  .hero::after { animation: auroraDrift 24s var(--ease) infinite alternate; }
}
@keyframes heroConic { to { transform: rotate(1turn); } }

/* Dark bands and the footer: a slow aurora sheen that breathes behind the content. */
.band, .site-footer { position: relative; overflow: hidden; isolation: isolate; }
.band > *, .site-footer > * { position: relative; z-index: 1; }
.band::before, .site-footer::before {
  content: ""; position: absolute; inset: -4px; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 120% at 10% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
             radial-gradient(46% 130% at 90% 100%, var(--accent-soft), transparent 62%),
             radial-gradient(38% 90% at 55% 30%, rgba(199, 154, 58, 0.06), transparent 66%);
}
@media (prefers-reduced-motion: no-preference) {
  .band::before, .site-footer::before { animation: bandSheen 28s var(--ease) infinite alternate; }
}
@keyframes bandSheen {
  from { transform: translate3d(-3%, 0, 0) scale(1.02); opacity: 0.7; }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}

/* Scroll reveals get a soft blur that clears as they settle (a calmer, premium entrance). */
.reveal { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out),
          filter var(--dur-3) var(--ease-out); filter: blur(0); }
html.js .reveal:not(.in) { filter: blur(7px); }

/* Cards: the accent top-bar gains a soft animated glow while hovered/focused. */
@media (prefers-reduced-motion: no-preference) {
  .card:hover::before, .card:focus-within::before { animation: cardBar 2.4s var(--ease) infinite alternate; }
}
@keyframes cardBar { from { box-shadow: 0 0 10px -2px var(--accent); } to { box-shadow: 0 0 18px 0 var(--accent); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .band::before, .site-footer::before { animation: none; }
  html.js .reveal:not(.in) { filter: none; }
}

/* =============================================================================
   Wave 7 - refinement layer. Premium micro-details on top of Waves 4-6:
   accent selection, sharper keyboard focus, scroll-depth hero, richer card and
   prose-link states, a reading-progress ring on the back-to-top control, a
   figure lightbox, and animated meters. All CSP-safe, reduced-motion aware,
   progressive (JS enhances existing DOM). No em dashes anywhere.
   ============================================================================= */

::selection { background: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] ::selection { color: var(--band-text); }

/* On-brand keyboard focus ring (accessibility + polish). */
:where(a, button, [tabindex], input, select, textarea, summary, .chip-btn):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 5px;
}

/* Anchor targets clear the sticky header when jumped to from the TOC. */
:where(h2, h3)[id] { scroll-margin-top: 84px; }

/* Cards in a grid scale-in a touch as they reveal, for a softer cascade. */
.cards-4 .reveal:not(.in), .cards-3 .reveal:not(.in), .card-index-grid .reveal:not(.in) {
  transform: translateY(18px) scale(.985);
}
/* Accent-tinted lift shadow on card hover (complements the existing glow bar). */
.card { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.card:hover, .card:focus-within {
  box-shadow: var(--shadow), 0 10px 34px -18px var(--accent);
}

/* Prose + reference links grow an accent underline on hover (evidence blog is link-dense). */
.prose a:not(.btn), .references a, .ref-list a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 1.05em;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease);
  padding-bottom: 1px;
}
.prose a:not(.btn):hover, .references a:hover, .ref-list a:hover { background-size: 100% 1.5px; color: var(--accent-strong); }

/* Scroll-depth: the hero aurora drifts slightly with the page for parallax depth. */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { transform: translate3d(0, calc(var(--sy, 0) * 0.05px), 0); }
  .hero::after  { transform: translate3d(0, calc(var(--sy, 0) * 0.09px), 0); }
}

/* Reading-progress ring wrapped around the back-to-top control. */
.to-top { position: relative; }
.to-top .ring { position: absolute; inset: -5px; pointer-events: none; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 2.5; }
.to-top .ring .trk { stroke: var(--accent-soft); }
.to-top .ring .bar { stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: var(--circ, 132); stroke-dashoffset: var(--circ, 132);
  transition: stroke-dashoffset .12s linear; }

/* Animated meter: a labelled bar that fills to data-value% when revealed. */
.meter { display: grid; gap: 6px; }
.meter .meter-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter .meter-fill { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 1.1s var(--ease-out); }
.meter.in .meter-fill { width: var(--val, 0%); }
@media (prefers-reduced-motion: reduce) { .meter .meter-fill { transition: none; } }

/* Figure lightbox: click a zoomable figure to view it enlarged. */
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(11, 31, 58, .74); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease); }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox > * { max-width: min(94vw, 1000px); max-height: 90vh; border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow); transform: scale(.96); transition: transform var(--dur-2) var(--ease-spring); }
.lightbox.open > * { transform: scale(1); }
.lightbox .lb-close { position: fixed; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--band-line); background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer;
  transform: none; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox > * { transition: none; } }

/* Recommendation-letter quotes on the record / clinical pages. */
.rec-quote { margin: 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.rec-quote blockquote { margin: 0 0 8px; font-family: var(--serif, Georgia, serif); font-size: 1.02rem;
  line-height: 1.55; color: var(--ink); font-style: italic; }
.rec-quote figcaption { color: var(--muted); font-size: .86rem; font-weight: 600; }