/* ============================================================
   NXP FELLOWSHIP — design system
   Version C "Swiss": deep navy field, Swiss International
   Typographic Style. Fraunces serif display with orange italic
   accents, JetBrains Mono technical labels, hard edges, hairline
   grids, flat/print-like. Modeled on nxp-home-c.vercel.app.
   ============================================================ */

: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;

  /* Swiss = hard edges. All radii collapse to 0 (kept as tokens so
     component rules need no rewrite). --radius-full only for round dots. */
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0; --radius-full:9999px;
  --transition-interactive:300ms cubic-bezier(0.2,0.7,0.2,1);

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

  --font-display:'Fraunces','Source Serif 4',Georgia,serif;
  --font-serif:'Fraunces','Source Serif 4',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Track accents (shared across themes) — Swiss orange primary +
     supporting navy tints. Orange carries every accent moment. */
  --accent-spine:#e6813b;   /* burnt orange — family spine / primary */
  --accent-spine-soft:#f19a5c;
  --accent-pro:#4f98a3;     /* muted teal — fund / pro */
  --accent-pro-soft:#77b4bd;
  --accent-lp:#9aa9c6;      /* steel blue-grey — outer ring / LP */
  --accent-lp-soft:#b9c4da;
  --accent-innovation:#e6813b;   /* orange — innovation / catalyst */
  --accent-innovation-soft:#f19a5c;
}

/* DARK (default) — Swiss deep navy */
:root, [data-theme='dark']{
  --color-bg:#0a3065;
  --color-surface:#0e3a76;
  --color-surface-2:#0d356e;
  --color-surface-3:#124084;
  --color-border:rgba(144,167,199,.24);
  --color-divider:rgba(144,167,199,.18);
  --color-text:#ffffff;
  --color-text-muted:#aebdd6;
  --color-text-faint:#7f90ad;
  --color-text-inverse:#0a3065;
  --color-primary:#e6813b;
  --color-primary-hover:#f19a5c;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --hero-grid-line:rgba(144,167,199,.10);
}

[data-theme='light']{
  --color-bg:#f4f2ec;
  --color-surface:#ffffff;
  --color-surface-2:#efece3;
  --color-surface-3:#e7e3d8;
  --color-border:rgba(10,48,101,.16);
  --color-divider:rgba(10,48,101,.12);
  --color-text:#0a3065;
  --color-text-muted:#42527a;
  --color-text-faint:#7f90ad;
  --color-text-inverse:#ffffff;
  --color-primary:#c25e17;
  --color-primary-hover:#a54d0f;
  --accent-spine:#c25e17;
  --accent-spine-soft:#d67127;
  --accent-pro:#2f7a85;
  --accent-lp:#5d6c92;
  --accent-innovation:#c25e17;
  --accent-innovation-soft:#d67127;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --hero-grid-line:rgba(10,48,101,.08);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --color-bg:#f4f2ec;--color-surface:#ffffff;--color-surface-2:#efece3;--color-surface-3:#e7e3d8;
    --color-border:rgba(10,48,101,.16);--color-divider:rgba(10,48,101,.12);
    --color-text:#0a3065;--color-text-muted:#42527a;--color-text-faint:#7f90ad;
    --color-primary:#c25e17;--color-text-inverse:#ffffff;
    --accent-spine:#c25e17;--accent-spine-soft:#d67127;--accent-pro:#2f7a85;--accent-lp:#5d6c92;
    --accent-innovation:#c25e17;--accent-innovation-soft:#d67127;
  }
}

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

/* ---------- 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:26px; width:auto; display:block; }
[data-theme='dark'] .brand-mark-light{ display:none; }
[data-theme='light'] .brand-mark-dark{ display:none; }
:root:not([data-theme]) .brand-mark-light{ display:none; }
.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); } }

/* ---------- HISTORICAL CONTEXT / TRACK RECORD ---------- */
.track-record{ position:relative; }
.tr-group{ margin-top:var(--space-12); }
.tr-group:first-of-type{ margin-top:var(--space-4); }
.tr-group-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-3) var(--space-4);
  padding-bottom:var(--space-5); margin-bottom:var(--space-8);
  border-bottom:1px solid var(--color-border);
}
.tr-group-kicker{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-lg);
  color:var(--accent-spine); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:0.02em;
}
.tr-group-kicker-lp{ color:var(--accent-lp); }
.tr-group-title{
  font-family:var(--font-display); font-weight:500; font-size:var(--text-xl);
  letter-spacing:-0.02em; margin:0;
}
.tr-group-note{
  font-family:var(--font-serif); font-style:italic; color:var(--color-text-muted);
  font-size:var(--text-base); margin:0; flex:1 1 auto; min-width:14ch;
}
.tr-grid{
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.tr-stat{
  position:relative; padding:var(--space-6) var(--space-6) var(--space-6) var(--space-6);
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface);
  border-top:2px solid var(--accent-spine);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tr-stat-lp{ border-top-color:var(--accent-lp); }
.tr-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tr-num{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,1.6rem+2.4vw,3.4rem); line-height:0.95;
  letter-spacing:-0.03em; color:var(--color-text);
  font-variant-numeric:tabular-nums lining-nums;
}
.tr-plus{ font-size:0.42em; vertical-align:super; margin-left:0.06em; color:var(--accent-spine); font-weight:600; letter-spacing:0; }
.tr-stat-lp .tr-plus{ color:var(--accent-lp); }
.tr-unit{ font-size:0.34em; font-weight:600; letter-spacing:0.02em; color:var(--color-text-muted); margin-left:0.18em; vertical-align:baseline; }
.tr-label{
  display:block; margin-top:var(--space-3); font-weight:600;
  font-size:var(--text-base); color:var(--color-text); letter-spacing:-0.01em;
}
.tr-desc{
  display:block; margin-top:var(--space-2); font-size:var(--text-sm);
  color:var(--color-text-muted); line-height:1.45;
}
@media (max-width:560px){
  .tr-grid{ grid-template-columns:1fr 1fr; gap:var(--space-4); }
  .tr-stat{ padding:var(--space-5); }
}
@media (max-width:380px){ .tr-grid{ grid-template-columns:1fr; } }

/* ---- WHO IT'S FOR (progression) ---- */
.who-list{ list-style:none; margin:var(--space-8) 0 0; padding:0; border-top:1px solid var(--color-border); }
.who-item{
  display:grid; grid-template-columns:auto minmax(0,15rem) 1fr; align-items:baseline;
  gap:var(--space-5); padding:var(--space-5) 0;
  border-bottom:1px solid var(--color-border);
  transition:padding-left .3s cubic-bezier(0.2,0.7,0.2,1);
}
.who-item:hover{ padding-left:var(--space-3); }
.who-kicker{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.12em; color:var(--accent-spine);
  font-variant-numeric:tabular-nums lining-nums;
}
.who-role{
  font-family:var(--font-display); font-size:var(--text-xl); line-height:1.15;
  letter-spacing:-0.01em; color:var(--color-text);
}
.who-note{ font-size:var(--text-base); color:var(--color-text-muted); line-height:1.5; }
@media (max-width:640px){
  .who-item{ grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); }
  .who-note{ grid-column:2; }
}

/* ---------- 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; }

/* Fund map — concentric rings: LP outer, two pools mid, mission core */
.fund-map{
  margin:var(--space-10) auto var(--space-8); max-width:980px;
  display:grid; grid-template-columns:minmax(320px,440px) 1fr; align-items:center;
  gap:var(--space-12) var(--space-16); text-align:left;
}
.ring-diagram{ width:100%; }
.ring-diagram svg{ width:100%; height:auto; display:block; overflow:visible; }

/* Ring bands (filled discs, layered largest-first) */
.ring-band{ stroke:none; }
.ring-band-lp{ fill:color-mix(in oklab,var(--accent-lp) 14%, var(--color-surface)); }
.ring-band-mid{ fill:var(--color-surface); }

/* Ring outlines */
.ring-stroke{ fill:none; stroke:var(--color-border); stroke-width:1.5; }
.ring-stroke-lp{ stroke:color-mix(in oklab,var(--accent-lp) 70%,transparent); stroke-width:2; stroke-dasharray:5 6; }
.ring-divider{ stroke:var(--color-border); stroke-width:1.5; }

/* Middle-ring split arcs (the two pools) */
.pool-arc{ fill:none; stroke-width:7; stroke-linecap:round; }
.pool-arc-family{ stroke:var(--accent-spine); }
.pool-arc-corp{ stroke:var(--accent-pro); }

/* Core */
.ring-core-circle{ fill:url(#coreFill); stroke:color-mix(in oklab,#fff 22%,transparent); stroke-width:1; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.core-stop-a{ stop-color:var(--color-primary-hover); }
.core-stop-b{ stop-color:color-mix(in oklab,var(--color-primary) 72%, #000); }

/* Curved outer-ring label */
.ring-curve-label{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:2.4px; fill:var(--accent-lp); text-transform:uppercase; }

/* Pool labels */
.pool-label{ font-family:var(--font-display); font-size:16px; font-weight:600; }
.pool-sub{ font-family:var(--font-body); font-size:9px; font-weight:600; letter-spacing:1.4px; fill:var(--color-text-muted); }
.pool-label-family{ fill:var(--accent-spine); }
.pool-label-corp{ fill:var(--accent-pro); }

/* Core label */
.core-mark-svg{ font-family:var(--font-display); font-size:22px; font-weight:700; fill:var(--color-text-inverse); letter-spacing:-0.3px; }
.core-sub-svg{ font-family:var(--font-body); font-size:9px; font-weight:600; letter-spacing:2.2px; fill:color-mix(in oklab,var(--color-text-inverse) 80%,transparent); }

/* Legend */
.fund-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
.legend-item{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-base); color:var(--color-text-muted); line-height:1.5; }
.legend-item strong{ color:var(--color-text); font-weight:600; }
.legend-item .dot{ width:11px; height:11px; border-radius:var(--radius-full); flex:none; margin-top:.42em; }
.dot-lp{ background:var(--accent-lp); }
.dot-family{ background:linear-gradient(90deg,var(--accent-spine) 50%, var(--accent-pro) 50%); }
.dot-core{ background:var(--color-primary); }

@media (max-width:760px){
  .fund-map{ grid-template-columns:1fr; gap:var(--space-8); }
  .ring-diagram{ max-width:380px; margin:0 auto; }
  .fund-legend{ max-width:420px; margin:0 auto; }
}

.architecture-caption{ font-family:var(--font-serif); font-style:italic; color:var(--color-text-muted); max-width:50ch; margin:var(--space-8) auto 0; font-size:var(--text-base); text-align:center; }

/* ---------- 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; aspect-ratio:2200/1360; object-fit:contain; }
.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; }

/* ============================================================
   VERSION C "SWISS" OVERRIDES
   Layered on top of the base component rules above. Retunes
   micro-typography, buttons, and grid framing to the Swiss look.
   Radii/shadows already collapse to 0/none via the tokens.
   ============================================================ */

/* --- Mono technical micro-copy (eyebrows, labels, nav, tags) --- */
.eyebrow,
.section-eyebrow,
.header-nav a,
.stat-label,
.chapter-count,
.chapter-tag,
.tp-aud,
.tp-side h4,
.rd-track,
.rd-out-label,
.rd-ex-eyebrow,
.rd-nav-dir,
.rs-callout-label,
.rd-fig-num,
.rs-badge,
.footer-meta{
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-weight:500;
}
.eyebrow,.section-eyebrow{ letter-spacing:.18em; }
.header-nav a{ font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; }
.stat-label{ letter-spacing:.1em; font-size:var(--text-xs); }

/* Brand wordmark stays serif */
.brand-text{ font-family:var(--font-display); font-weight:500; }

/* --- Buttons: Swiss square, mono uppercase --- */
.btn{
  font-family:var(--font-mono); text-transform:uppercase;
  font-weight:500; letter-spacing:.08em; font-size:var(--text-sm);
  border-radius:0;
}
/* Primary = solid white fill, navy text (matches Version C CTA) */
.btn-primary{ background:var(--color-text); color:var(--color-bg); border-color:var(--color-text); }
.btn-primary:hover{ background:var(--color-text); color:var(--color-bg); transform:none; opacity:.88; }
[data-theme='light'] .btn-primary{ background:var(--color-text); color:#ffffff; }
/* Ghost = transparent + hairline border */
.btn-ghost{ border-color:var(--color-border); color:var(--color-text); }
.btn-ghost:hover{ border-color:var(--color-text); color:var(--color-text); background:transparent; }

/* --- Hairline instead of colored top-accent bars (Swiss = uniform hairlines) --- */
.tr-stat,.track-tab,.tp,.chapter-card{ border-top-width:1px; }
.tr-stat{ border-top-color:var(--color-border); }
.tr-stat-lp{ border-top-color:var(--color-border); }
.tp{ border-top-color:var(--color-border); }

/* Section eyebrows / stat labels use faint tone but orange for numbered tags */
.eyebrow{ color:var(--accent-spine); }

/* Italic serif accent words already orange via .hero-title em — reinforce sitewide */
.hero-title em,.section-title em,.rs-h em,.tp-title em,.closer-title em{
  font-style:italic; color:var(--accent-spine); font-weight:400;
}

/* --- Track record cards: flatten hover to a border shift (no lift/shadow) --- */
.tr-stat:hover,.chapter-card:hover,.track-tab:hover,.tp:hover,
.rd-nav-btn:hover,.rd-fig-link:hover{
  transform:none; box-shadow:none; border-color:var(--accent-spine);
}
.track-tab[aria-selected="true"]{ box-shadow:none; border-color:var(--accent-spine); }

/* Numbered kickers / chapter numbers already serif — ensure orange */
.tr-group-kicker,.chapter-num{ color:var(--accent-spine); }
.tr-group-kicker-lp{ color:var(--accent-lp); }

/* Tag chips: square, hairline orange outline (Version C status pill, flattened) */
.chapter-tag{
  background:transparent; border:1px solid var(--accent-spine);
  color:var(--accent-spine); border-radius:0; letter-spacing:.08em;
  font-size:var(--text-xs); padding:.28em .7em;
}

/* Track tab codename stays italic serif */
.track-tab .tab-code,.tp-codename{ font-family:var(--font-serif); font-style:italic; }

/* Reader: technical mono for eyebrow tokens; pull-quote stays serif */
.rd-tag,.rd-dur,.rd-read{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-xs); }
.rd-num,.rs-table-title{ font-family:var(--font-mono); }
.rs-table th{ font-family:var(--font-mono); }

/* Focus ring in orange to match */