/* ============================================================
   NXP FELLOWSHIP — design system
   Concept: a fund-grade, editorial program rooted in food systems.
   Deep charcoal-green surfaces, warm cream type, three track accents.
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  --text-3xl: clamp(2.6rem, 1rem + 5vw, 5.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.875rem; --radius-xl:1.25rem; --radius-full:9999px;
  --transition-interactive:200ms cubic-bezier(0.16,1,0.3,1);

  --content-default:1080px;
  --content-wide:1240px;

  --font-display:'Zodiak','Source Serif 4',Georgia,serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-body:'General Sans','Inter',-apple-system,sans-serif;

  /* Brand accent (matches dev.nxp.vc) */
  --nxp-orange:#e6813b;
  --nxp-orange-soft:#f0a066;
  --nxp-navy:#0a3065;

  /* Track accents (shared across themes) — harmonized with NXP navy+orange brand */
  --accent-spine:#e6813b;   /* NXP orange — family spine / primary */
  --accent-spine-soft:#f0a066;
  --accent-pro:#4bb5a6;     /* aqua-teal — fund / pro */
  --accent-pro-soft:#79cabe;
  --accent-lp:#d97a4e;      /* warm clay (orange family) — outer ring */
  --accent-lp-soft:#e8a07d;
  --accent-innovation:#5b97f3;   /* sky blue — innovation / catalyst */
  --accent-innovation-soft:#8bb8f7;
}

/* DARK (default) — NXP deep navy (matches dev.nxp.vc) */
:root, [data-theme='dark']{
  --color-bg:#0a3065;
  --color-surface:#0d356e;
  --color-surface-2:#0e3a76;
  --color-surface-3:#134184;
  --color-border:rgba(144,167,199,.24);
  --color-divider:rgba(144,167,199,.14);
  --color-text:#ffffff;
  --color-text-muted:#aebdd6;
  --color-text-faint:#7f90ad;
  --color-text-inverse:#0a3065;
  --color-primary:#e6813b;
  --color-primary-hover:#f0a066;
  --shadow-sm:0 1px 2px rgba(5,22,48,.5);
  --shadow-md:0 8px 28px rgba(5,22,48,.5);
  --shadow-lg:0 24px 64px rgba(5,22,48,.6);
  --hero-grid-line:rgba(144,167,199,.10);
}

[data-theme='light']{
  --color-bg:#f6f4ec;
  --color-surface:#fffdf6;
  --color-surface-2:#f1eee2;
  --color-surface-3:#e9e5d6;
  --color-border:#ddd8c6;
  --color-divider:#e6e2d3;
  --color-text:#23271b;
  --color-text-muted:#5f6453;
  --color-text-faint:#9a9d8b;
  --color-text-inverse:#fffdf6;
  --color-primary:#c96a24;
  --color-primary-hover:#a9551a;
  --accent-spine:#c96a24;
  --accent-pro:#2f7a72;
  --accent-lp:#b85f33;
  --accent-innovation:#3a6fd0;
  --accent-innovation-soft:#6f9de8;
  --shadow-sm:0 1px 2px rgba(60,55,30,.07);
  --shadow-md:0 8px 28px rgba(60,55,30,.10);
  --shadow-lg:0 24px 64px rgba(60,55,30,.14);
  --hero-grid-line:rgba(120,95,30,.07);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --color-bg:#f6f4ec;--color-surface:#fffdf6;--color-surface-2:#f1eee2;--color-surface-3:#e9e5d6;
    --color-border:#ddd8c6;--color-text:#23271b;--color-text-muted:#5f6453;--color-text-faint:#9a9d8b;
    --color-primary:#8a6d1f;
  }
}

body{ -webkit-font-smoothing:antialiased; letter-spacing:-0.005em; }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background:color-mix(in oklab, var(--color-bg) 78%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-interactive), background var(--transition-interactive);
}
.site-header.scrolled{ border-bottom-color:var(--color-divider); }
.header-inner{
  max-width:var(--content-wide); margin:0 auto;
  padding:var(--space-4) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.brand{ display:flex; align-items:center; gap:var(--space-3); color:var(--color-text); text-decoration:none; }
.brand-mark{ flex:none; height:30px; width:auto; display:block; }
.brand-text{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.02em; }
.brand-thin{ color:var(--color-text-muted); font-weight:400; }
.header-nav{ display:flex; align-items:center; gap:var(--space-6); }
.header-nav a{ color:var(--color-text-muted); text-decoration:none; font-size:var(--text-sm); font-weight:500; }
.header-nav a:hover{ color:var(--color-text); }
.theme-toggle{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--color-border); border-radius:var(--radius-full); color:var(--color-text-muted);
}
.theme-toggle:hover{ color:var(--color-text); border-color:var(--color-text-faint); }
@media (max-width:680px){ .header-nav a:not(.theme-toggle){ display:none; } }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(var(--space-20),12vw,var(--space-32)) var(--space-6) clamp(var(--space-16),9vw,var(--space-24)); }
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%);
}
.hero-inner{ position:relative; z-index:1; max-width:var(--content-default); margin:0 auto; }
.eyebrow{
  font-size:var(--text-xs); letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent-spine); font-weight:600; margin-bottom:var(--space-5);
}
.hero-title{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-3xl); line-height:0.98; letter-spacing:-0.03em;
  margin-bottom:var(--space-6);
}
.hero-title em{ font-style:italic; color:var(--accent-spine); }
.hero-lede{ font-family:var(--font-serif); font-size:var(--text-lg); color:var(--color-text-muted); max-width:62ch; line-height:1.55; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-6); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:600; text-decoration:none; border:1px solid transparent;
}
.btn-primary{ background:var(--accent-spine); color:#1a1607; }
.btn-primary:hover{ background:var(--accent-spine-soft); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--color-border); color:var(--color-text); }
.btn-ghost:hover{ border-color:var(--accent-spine); color:var(--accent-spine); }
.hero-stats{
  margin-top:clamp(var(--space-10),7vw,var(--space-16));
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
  border-top:1px solid var(--color-divider); padding-top:var(--space-8);
}
.stat-num{ display:block; font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-text); }
.stat-label{ display:block; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); }
@media (max-width:640px){ .hero-stats{ grid-template-columns:1fr; gap:var(--space-4); } }

/* ---------- SECTIONS ---------- */
.section{ max-width:var(--content-wide); margin:0 auto; padding:clamp(var(--space-16),9vw,var(--space-24)) var(--space-6); }
.section-head{ max-width:var(--content-default); margin:0 auto var(--space-12); }
.section-eyebrow{ font-size:var(--text-xs); letter-spacing:0.2em; text-transform:uppercase; color:var(--color-text-faint); font-weight:600; margin-bottom:var(--space-3); }
.section-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-2xl); letter-spacing:-0.025em; margin-bottom:var(--space-4); }
.section-sub{ font-family:var(--font-serif); font-size:var(--text-lg); color:var(--color-text-muted); line-height:1.55; max-width:64ch; }

/* ---------- ARCHITECTURE RINGS ---------- */
.architecture{ text-align:center; }
.rings{ position:relative; width:min(520px,92vw); aspect-ratio:1; margin:var(--space-8) auto var(--space-10); display:grid; place-items:center; }
.ring{ position:absolute; border-radius:var(--radius-full); display:grid; place-items:center; }
.ring span{ position:absolute; top:var(--space-3); font-size:var(--text-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--color-text-faint); }
.ring-lp{ inset:0; border:1.5px dashed color-mix(in oklab,var(--accent-lp) 60%,transparent); }
.ring-lp span{ color:var(--accent-lp); }
.ring-mid{ inset:16%; border:1.5px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; padding:0 5%; }
.ring-pool{ width:38%; aspect-ratio:1; border-radius:var(--radius-full); display:grid; place-items:center; font-size:var(--text-sm); font-weight:600; border:1.5px solid; }
.pool-family{ border-color:var(--accent-spine); color:var(--accent-spine); background:color-mix(in oklab,var(--accent-spine) 10%,transparent); }
.pool-corp{ border-color:var(--accent-pro); color:var(--accent-pro); background:color-mix(in oklab,var(--accent-pro) 10%,transparent); }
.ring-core{ width:30%; aspect-ratio:1; border-radius:var(--radius-full); display:grid; place-items:center; text-align:center; background:var(--color-surface-2); border:1.5px solid var(--color-border); font-family:var(--font-display); font-size:var(--text-sm); font-weight:600; color:var(--color-text); line-height:1.2; box-shadow:var(--shadow-md); }
.architecture-caption{ font-family:var(--font-serif); font-style:italic; color:var(--color-text-muted); max-width:50ch; margin:0 auto; font-size:var(--text-base); }

/* ---------- TRACK SWITCH ---------- */
.track-switch{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-bottom:var(--space-10); }
.track-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:var(--space-4) var(--space-6); border-radius:var(--radius-lg);
  border:1px solid var(--color-border); background:var(--color-surface);
  text-align:left; min-width:200px; position:relative; overflow:hidden;
}
.track-tab::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tab-accent); opacity:.5; transition:opacity var(--transition-interactive); }
.track-tab:hover{ border-color:var(--tab-accent); transform:translateY(-2px); }
.track-tab[aria-selected="true"]{ background:var(--color-surface-2); border-color:var(--tab-accent); box-shadow:var(--shadow-md); }
.track-tab[aria-selected="true"]::before{ opacity:1; }
.track-tab .tab-label{ font-weight:600; font-size:var(--text-base); color:var(--color-text); }
.track-tab .tab-code{ font-family:var(--font-serif); font-style:italic; color:var(--tab-accent); font-size:var(--text-sm); }
.track-tab .tab-aud{ font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }

/* ---------- TRACK PANEL ---------- */
.track-panel{ outline:none; }
.tp{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-10); align-items:start;
  border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface);
  padding:clamp(var(--space-6),4vw,var(--space-12)); margin-bottom:var(--space-12);
  border-top:3px solid var(--tp-accent); }
.tp-codename{ font-family:var(--font-serif); font-style:italic; color:var(--tp-accent); font-size:var(--text-lg); margin-bottom:var(--space-2); }
.tp-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-xl); letter-spacing:-0.02em; margin-bottom:var(--space-2); }
.tp-aud{ font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-5); font-weight:500; }
.tp-summary{ font-family:var(--font-serif); font-size:var(--text-base); color:var(--color-text); line-height:1.6; margin-bottom:var(--space-6); }
.tp-design{ font-size:var(--text-sm); color:var(--color-text-muted); padding-left:var(--space-4); border-left:2px solid var(--tp-accent); }
.tp-design strong{ color:var(--color-text); font-weight:600; }
.tp-side h4{ font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-3); font-weight:600; }
.tp-list{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-8); }
.tp-list li{ font-size:var(--text-sm); color:var(--color-text-muted); padding-left:var(--space-4); position:relative; max-width:none; }
.tp-list li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--tp-accent); }
.tp-proof li::before{ border-radius:1px; }
@media (max-width:820px){ .tp{ grid-template-columns:1fr; gap:var(--space-8); } }

/* ---------- CHAPTER ZONE ---------- */
.chapter-zone-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); border-bottom:1px solid var(--color-divider); padding-bottom:var(--space-4); }
.chapter-zone-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); }
.chapter-count{ font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:0.12em; text-transform:uppercase; }
.chapter-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
@media (max-width:760px){ .chapter-list{ grid-template-columns:1fr; } }

.chapter-card{
  text-align:left; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
  position:relative; overflow:hidden;
}
.chapter-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow var(--transition-interactive); pointer-events:none; }
.chapter-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab,var(--cc-accent) 50%,var(--color-border)); }
.chapter-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.chapter-num{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--cc-accent); line-height:1; }
.chapter-tag{ font-size:var(--text-xs); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--cc-accent); background:color-mix(in oklab,var(--cc-accent) 14%,transparent); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); }
.chapter-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-0.015em; }
.chapter-hook{ font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.55; flex:1; }
.chapter-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--color-divider); }
.chapter-dur{ font-size:var(--text-xs); color:var(--color-text-faint); }
.chapter-open{ font-size:var(--text-sm); font-weight:600; color:var(--cc-accent); display:flex; align-items:center; gap:var(--space-1); }
.chapter-card:hover .chapter-open{ gap:var(--space-2); }

/* ---------- CLOSER ---------- */
.closer{ border-top:1px solid var(--color-divider); }
.closer-inner{ max-width:var(--content-default); margin:0 auto; text-align:center; }
.closer-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-xl); letter-spacing:-0.02em; margin:var(--space-3) auto var(--space-5); max-width:24ch; }
.closer-text{ font-family:var(--font-serif); font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; margin:0 auto; line-height:1.6; }
.closer-text a{ color:var(--accent-spine); text-decoration:underline; text-underline-offset:3px; }

/* ---------- FOOTER ---------- */
.site-footer{ border-top:1px solid var(--color-divider); }
.footer-inner{ max-width:var(--content-wide); margin:0 auto; padding:var(--space-8) var(--space-6); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.footer-brand{ font-family:var(--font-display); font-weight:600; }
.footer-meta{ font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:0.08em; }

/* ---------- READER (full-screen chapter view) ---------- */
.reader{ position:fixed; inset:0; z-index:200; background:var(--color-bg); animation:fade .25s ease; }
.reader[hidden]{ display:none; }
.reader-shell{ position:relative; height:100dvh; display:flex; flex-direction:column; }

.reader-progress-track{ position:absolute; top:0; left:0; right:0; height:3px; background:color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 14%,transparent); z-index:3; }
.reader-progress{ display:block; height:100%; width:0; background:var(--rd-accent,var(--accent-spine)); transition:width .1s linear; }

.reader-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) clamp(var(--space-4),4vw,var(--space-10)); border-bottom:1px solid var(--color-divider); background:color-mix(in oklab,var(--color-bg) 86%,transparent); backdrop-filter:blur(10px); }
.reader-back{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); }
.reader-back:hover{ color:var(--rd-accent,var(--accent-spine)); }
.reader-bar-brand{ font-family:var(--font-display); font-size:var(--text-sm); font-weight:600; color:var(--color-text-faint); letter-spacing:-0.01em; }
.reader-close{ width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-full); color:var(--color-text-muted); border:1px solid var(--color-border); }
.reader-close:hover{ color:var(--color-text); border-color:var(--color-text-faint); }

.reader-scroll{ flex:1; overflow-y:auto; scroll-behavior:smooth; }
.reader-body{ width:min(720px,100%); margin:0 auto; padding:clamp(var(--space-8),5vw,var(--space-16)) clamp(var(--space-5),4vw,var(--space-8)) var(--space-24); animation:rise .35s cubic-bezier(0.16,1,0.3,1); }

/* reader head */
.rd-head{ margin-bottom:var(--space-10); padding-bottom:var(--space-8); border-bottom:1px solid var(--color-divider); }
.rd-eyebrow{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-5); font-size:var(--text-xs); }
.rd-track{ letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--rd-accent,var(--accent-spine)); }
.rd-tag,.rd-dur,.rd-read{ color:var(--color-text-faint); }
.rd-dot{ color:var(--color-text-faint); opacity:.6; }
.rd-num{ font-family:var(--font-display); font-size:var(--text-sm); color:var(--color-text-faint); margin-bottom:var(--space-3); letter-spacing:0.02em; }
.rd-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-2xl); letter-spacing:-0.025em; line-height:1.08; margin-bottom:var(--space-4); }
.rd-sub{ font-family:var(--font-serif); font-style:italic; font-size:var(--text-lg); color:var(--color-text-muted); line-height:1.5; max-width:62ch; }

/* outcomes strip */
.rd-outcomes{ background:color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 7%,var(--color-surface)); border:1px solid color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 24%,var(--color-border)); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-6); margin-bottom:var(--space-12); }
.rd-out-label{ font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--rd-accent,var(--accent-spine)); font-weight:600; margin-bottom:var(--space-4); }
.rd-out-list{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.rd-out-list li{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-base); color:var(--color-text); max-width:none; }
.rd-out-list li svg{ flex:none; color:var(--rd-accent,var(--accent-spine)); margin-top:4px; }

/* body sections */
.rd-body .rs{ margin-bottom:var(--space-12); scroll-margin-top:80px; }
.rs-h{ font-family:var(--font-display); font-weight:500; font-size:var(--text-xl); letter-spacing:-0.02em; line-height:1.2; margin-bottom:var(--space-5); display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.rs-p{ font-family:var(--font-serif); font-size:var(--text-base); line-height:1.72; color:var(--color-text); margin-bottom:var(--space-5); max-width:68ch; }
.rs-p:last-child{ margin-bottom:0; }

.rs-badge{ font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-lp); background:color-mix(in oklab,var(--accent-lp) 16%,transparent); border:1px solid color-mix(in oklab,var(--accent-lp) 38%,transparent); padding:3px var(--space-2); border-radius:var(--radius-full); white-space:nowrap; align-self:center; }
.rs-flagged{ position:relative; padding-left:var(--space-5); border-left:2px solid color-mix(in oklab,var(--accent-lp) 45%,var(--color-border)); }

.rs-pull{ font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); line-height:1.35; color:var(--rd-accent,var(--accent-spine)); border-left:3px solid var(--rd-accent,var(--accent-spine)); padding:var(--space-2) 0 var(--space-2) var(--space-6); margin:var(--space-8) 0; letter-spacing:-0.01em; max-width:60ch; }

.rs-list-title{ font-weight:600; font-size:var(--text-base); color:var(--color-text); margin:var(--space-5) 0 var(--space-3); }
.rs-list{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0 var(--space-6); padding-left:var(--space-2); }
.rs-list li{ font-family:var(--font-serif); font-size:var(--text-base); line-height:1.6; color:var(--color-text); position:relative; padding-left:var(--space-6); max-width:66ch; }
.rs-list-bul li::before{ content:""; position:absolute; left:6px; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--rd-accent,var(--accent-spine)); }
.rs-list-num{ counter-reset:rsn; }
.rs-list-num li{ counter-increment:rsn; }
.rs-list-num li::before{ content:counter(rsn); position:absolute; left:0; top:0; font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); color:var(--rd-accent,var(--accent-spine)); }

/* tables */
.rs-table-title{ font-weight:600; font-size:var(--text-sm); color:var(--color-text-muted); margin:var(--space-6) 0 var(--space-3); letter-spacing:0.01em; }
.rs-table-wrap{ overflow-x:auto; margin:var(--space-4) 0 var(--space-8); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.rs-table{ width:100%; border-collapse:collapse; font-family:var(--font-body); }
.rs-table th{ text-align:left; font-size:var(--text-xs); letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--color-text-muted); background:color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 8%,var(--color-surface-2)); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.rs-table td{ font-size:var(--text-sm); line-height:1.5; color:var(--color-text); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-divider); vertical-align:top; }
.rs-table tbody tr:last-child td{ border-bottom:none; }
.rs-table tbody tr:nth-child(even) td{ background:color-mix(in oklab,var(--color-surface-2) 50%,transparent); }

/* callouts */
.rs-callout{ display:block; border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); margin:var(--space-6) 0 var(--space-8); border:1px solid var(--color-border); background:var(--color-surface); }
.rs-callout-label{ display:block; font-family:var(--font-body); font-size:var(--text-xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:var(--space-2); }
.rs-callout p{ font-family:var(--font-serif); font-size:var(--text-base); line-height:1.6; color:var(--color-text); margin:0; max-width:64ch; }
.rs-callout-note{ border-left:3px solid var(--accent-pro); background:color-mix(in oklab,var(--accent-pro) 8%,var(--color-surface)); }
.rs-callout-note .rs-callout-label{ color:var(--accent-pro); }
.rs-callout-field{ border-left:3px solid var(--accent-spine); background:color-mix(in oklab,var(--accent-spine) 9%,var(--color-surface)); }
.rs-callout-field .rs-callout-label{ color:var(--accent-spine); }
.rs-callout-warn{ border-left:3px solid var(--accent-lp); background:color-mix(in oklab,var(--accent-lp) 10%,var(--color-surface)); }
.rs-callout-warn .rs-callout-label{ color:var(--accent-lp); }

/* key terms */
.rd-terms{ border-top:1px solid var(--color-divider); padding-top:var(--space-10); }
.rd-term-list{ display:grid; grid-template-columns:1fr; gap:0; }
.rd-term-list dt{ font-family:var(--font-display); font-weight:600; font-size:var(--text-base); color:var(--rd-accent,var(--accent-spine)); margin-top:var(--space-5); }
.rd-term-list dt:first-child{ margin-top:0; }
.rd-term-list dd{ font-family:var(--font-serif); font-size:var(--text-base); line-height:1.6; color:var(--color-text); margin:var(--space-2) 0 0; max-width:66ch; }

/* exercise */
.rd-exercise{ background:color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 9%,var(--color-surface-2)); border:1px solid color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 30%,var(--color-border)); border-radius:var(--radius-xl); padding:clamp(var(--space-6),3vw,var(--space-8)); margin:var(--space-12) 0; }
.rd-ex-eyebrow{ font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--rd-accent,var(--accent-spine)); margin-bottom:var(--space-3); }
.rd-ex-title{ font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-0.01em; margin-bottom:var(--space-4); }
.rd-ex-prompt{ font-family:var(--font-serif); font-size:var(--text-base); line-height:1.65; color:var(--color-text); margin-bottom:var(--space-5); max-width:64ch; }
.rd-ex-steps{ list-style:none; counter-reset:exn; display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); }
.rd-ex-steps li{ counter-increment:exn; position:relative; padding-left:var(--space-8); font-family:var(--font-serif); font-size:var(--text-base); line-height:1.55; color:var(--color-text); max-width:64ch; }
.rd-ex-steps li::before{ content:counter(exn); position:absolute; left:0; top:0; width:24px; height:24px; display:grid; place-items:center; border-radius:var(--radius-full); background:var(--rd-accent,var(--accent-spine)); color:var(--color-text-inverse); font-family:var(--font-body); font-size:var(--text-xs); font-weight:700; }
.rd-ex-deliver{ font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-muted); padding-top:var(--space-4); border-top:1px solid color-mix(in oklab,var(--rd-accent,var(--accent-spine)) 22%,var(--color-divider)); }
.rd-ex-deliver span{ font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:var(--text-xs); color:var(--rd-accent,var(--accent-spine)); margin-right:var(--space-2); }

/* further reading */
.rd-figures{ border-top:1px solid var(--color-divider); padding-top:var(--space-8); margin-bottom:var(--space-10); }
.rd-fig-sub{ font-size:var(--text-sm); color:var(--color-text-muted); font-style:italic; margin:calc(var(--space-2)*-1) 0 var(--space-6); max-width:60ch; }
.rd-fig{ margin:0 0 var(--space-8); }
.rd-fig-cap{ font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-3); font-style:italic; }
.rd-fig-num{ font-family:var(--font-body); font-style:normal; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:var(--text-xs); color:var(--rd-accent,var(--accent-spine)); margin-right:var(--space-2); }
.rd-fig-link{ display:block; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; background:#ffffff; transition:border-color .2s ease, transform .2s ease; }
.rd-fig-link:hover{ border-color:var(--rd-accent,var(--accent-spine)); transform:translateY(-2px); }
.rd-fig-img{ display:block; width:100%; height:auto; }
.rd-further{ border-top:1px solid var(--color-divider); padding-top:var(--space-8); }
.rd-further-list{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.rd-further-list li{ font-size:var(--text-sm); color:var(--color-text-muted); padding-left:var(--space-5); position:relative; max-width:none; }
.rd-further-list li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--color-text-faint); }

/* footer nav */
.rd-nav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-12); padding-top:var(--space-8); border-top:1px solid var(--color-divider); }
.rd-nav-btn{ display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-5) var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); text-align:left; }
.rd-nav-btn:hover{ border-color:var(--rd-accent,var(--accent-spine)); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.rd-next{ text-align:right; align-items:flex-end; }
.rd-nav-dir{ font-size:var(--text-xs); letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--rd-accent,var(--accent-spine)); }
.rd-nav-ttl{ font-family:var(--font-display); font-weight:500; font-size:var(--text-base); color:var(--color-text); letter-spacing:-0.01em; }
.rd-nav-spacer{ display:block; }

@media (max-width:600px){
  .rd-nav{ grid-template-columns:1fr; }
  .rd-next{ text-align:left; align-items:flex-start; }
  .reader-bar-brand{ display:none; }
}

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1); }
.reveal.in{ opacity:1; transform:none; }