/* ============================================================
   theaxes.fyi — "Graph Notebook" design system
   Light, readable teaching tool. One coherent system.
   Display: Space Grotesk · Reading: Source Serif 4 · Data: Space Mono
   Accent palette = the four quadrant hues (meaning-carrying only).
   Targets the existing class names so interactive markup stays intact.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* surface */
  --paper:#f1f2ee;        /* cool teaching-paper */
  --panel:#fbfbf8;        /* cards / panels lift slightly off paper */
  --panel-2:#ffffff;
  --rule:#d6d8d0;         /* hairlines */
  --rule-2:#e6e7e0;
  --grid:rgba(24,26,31,.055);  /* graph-paper lines */
  --grid-bold:rgba(24,26,31,.10);
  /* ink */
  --ink:#181a1f;          /* reading ink */
  --ink-2:#43474e;        /* secondary */
  --muted:#74787f;        /* labels / captions */
  --ink-inv:#f3f4f0;      /* text on ink */
  /* the four quadrants — the only accent colours, used only as meaning */
  --q-red:#bf392f;        /* authoritarian communism */
  --q-graphite:#3c4046;   /* authoritarian fascism   */
  --q-green:#3a8a4f;      /* libertarian socialism   */
  --q-blue:#2a6cb0;       /* libertarian capitalism  */
  /* live/now signal (narration + active marker) */
  --live:#cf3a26;
  /* legacy aliases some inline styles reference */
  --bg:var(--paper); --surface:var(--panel); --border:var(--rule);
  --text:var(--ink); --accent:var(--ink);

  --maxw:1080px;
  --read:720px;
  --bar-h:60px;
}

@media (prefers-color-scheme:dark){ :root{ color-scheme:light; } }

html{scroll-behavior:smooth;}
body{
  background-color:var(--paper);
  /* faint graph paper — quad-ruled */
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px;
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--bar-h);
}

::selection{background:#dfe2da;color:var(--ink);}

p{max-width:var(--read);}

/* shared utility voices ----------------------------------------- */
.mono{font-family:'Space Mono',ui-monospace,monospace;}
.disp{font-family:'Space Grotesk',system-ui,sans-serif;}

/* ===== NAV ===================================================== */
nav{
  position:sticky;top:0;z-index:90;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;
  padding:.7rem 1.5rem;
  background:rgba(241,242,238,.88);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.logo{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:.5ch;
}
.logo::before{
  content:"";width:14px;height:14px;border:1.5px solid var(--ink);
  position:relative;display:inline-block;
  background:
    linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat,
    linear-gradient(90deg,var(--ink),var(--ink)) center/100% 1.5px no-repeat;
  flex:0 0 auto;
}
.logo span{color:var(--muted);font-weight:500;}

/* lesson rail in the nav */
.nav-links{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.nav-links a{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  padding:.35rem .55rem;border-radius:4px;transition:background .15s,color .15s;
  white-space:nowrap;
}
.nav-links a:hover{background:#e4e6df;color:var(--ink);}
.nav-links a.active{color:var(--ink);background:#e0e3da;font-weight:700;}

/* language menu folded behind a single chip per lesson */
.lang{position:relative;display:inline-flex;}
.lang>summary{
  list-style:none;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);
  padding:.2rem .4rem;border:1px solid var(--rule);border-radius:4px;margin-left:-.2rem;
}
.lang>summary::-webkit-details-marker{display:none;}
.lang[open]>summary{background:var(--ink);color:var(--ink-inv);border-color:var(--ink);}
.lang-menu{
  position:absolute;top:120%;right:0;z-index:95;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:6px;
  padding:.35rem;min-width:130px;box-shadow:0 8px 24px rgba(24,26,31,.12);
  display:flex;flex-direction:column;gap:.1rem;
}
.lang-menu a{font-size:11px;text-transform:none;letter-spacing:0;color:var(--ink-2);padding:.3rem .5rem;}

/* ===== HERO =================================================== */
.hero{
  max-width:var(--maxw);margin:0 auto;
  padding:5.5rem 1.5rem 3.5rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}
.hero-eyebrow{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--live);margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.6rem;
}
.hero-eyebrow::before{content:"";width:26px;height:1px;background:var(--live);}
.hero-headline{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.025em;
  color:var(--ink);margin-bottom:1.4rem;
}
.hero-headline em{color:var(--muted);font-style:normal;}
.hero-headline u{text-decoration:none;border-bottom:4px solid var(--live);}
.hero-sub{
  font-size:clamp(18px,2vw,21px);color:var(--ink-2);font-weight:400;
  max-width:34ch;line-height:1.6;margin-bottom:2rem;
}
.hero-sub strong{color:var(--ink);font-weight:600;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
.hero-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;
  color:var(--ink-inv);background:var(--ink);
  padding:.8rem 1.4rem;border-radius:7px;text-decoration:none;
  border:1px solid var(--ink);transition:transform .12s,background .15s;
}
.hero-cta:hover{background:#000;transform:translateY(-1px);}
.hero-cta.ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.hero-cta.ghost:hover{background:#e7e9e2;}
.hero-cta .play{
  width:18px;height:18px;border-radius:50%;background:var(--live);
  display:inline-grid;place-items:center;flex:0 0 auto;
}
.hero-cta .play::after{content:"";border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:1px;}

/* hero signature: the line vs the grid mini-graphic */
.hero-graph{
  background:var(--panel-2);border:1px solid var(--rule);border-radius:12px;
  padding:1.25rem;box-shadow:0 1px 0 #fff inset,0 14px 40px -28px rgba(24,26,31,.5);
}
.hero-graph svg{display:block;width:100%;height:auto;}
.hero-graph figcaption{
  font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);
  margin-top:.8rem;letter-spacing:.02em;line-height:1.5;
}

/* ===== SECTIONS / LESSON SCAFFOLD ============================= */
.section,.cta-section,.quote-section,.related-section{
  max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.5rem;
}
.section + .section,.cta-section,.quote-section,.related-section{
  border-top:1px solid var(--rule);
}
.section-label,.cta-kicker{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:1.75rem;display:flex;align-items:center;gap:.75rem;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--rule);}
.cta-kicker{color:var(--live);}

/* lesson number chip (coordinate-styled) */
.lesson-no{
  font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);
  background:#e7e9e2;border:1px solid var(--rule);border-radius:5px;
  padding:.1rem .5rem;font-size:12px;letter-spacing:.02em;
}

/* ===== SYLLABUS (new lesson index) =========================== */
.syllabus{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 3.5rem;}
.syllabus h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,4vw,38px);
  letter-spacing:-.02em;margin-bottom:.4rem;
}
.syllabus .lede{color:var(--ink-2);max-width:60ch;margin-bottom:2rem;}
.lesson-list{display:flex;flex-direction:column;gap:.5rem;}
.lesson{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:1rem 1.2rem;text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .12s,background .15s;
}
.lesson:hover{border-color:var(--ink);transform:translateX(3px);background:var(--panel-2);}
.lesson .ix{
  font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:var(--muted);
  width:2.4ch;text-align:right;
}
.lesson .body h3{
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:18px;
  letter-spacing:-.01em;margin-bottom:.15rem;
}
.lesson .body p{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:62ch;}
.lesson .meta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
.tagline-audio{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--live);
  display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid color-mix(in srgb,var(--live) 35%,var(--rule));
  border-radius:999px;padding:.2rem .6rem;background:color-mix(in srgb,var(--live) 8%,var(--panel));
}
.tagline-audio::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);}
.tagline-int{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:999px;padding:.2rem .6rem;
}
.lesson .go{font-family:'Space Mono',monospace;color:var(--muted);font-size:16px;}
.lesson:hover .go{color:var(--ink);}
/* color-code the lesson stripe by quadrant family where it fits */
.lesson[data-q="red"]{border-left:3px solid var(--q-red);}
.lesson[data-q="blue"]{border-left:3px solid var(--q-blue);}
.lesson[data-q="green"]{border-left:3px solid var(--q-green);}
.lesson[data-q="graphite"]{border-left:3px solid var(--q-graphite);}

/* ===== THE 2×2 COMPASS ======================================= */
.region-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:1.5rem;}
.region-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.region-btn{
  font-family:'Space Mono',monospace;font-size:11.5px;padding:5px 12px;border-radius:6px;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink-2);cursor:pointer;
  transition:all .12s;
}
.region-btn:hover{border-color:var(--ink);color:var(--ink);}
.region-btn.active{background:var(--ink);color:var(--ink-inv);border-color:var(--ink);}

.compass-wrap{max-width:660px;}
.axis-top{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);padding:0 0 8px 40px;letter-spacing:.02em;}
.compass-row{display:flex;gap:8px;align-items:stretch;}
.axis-left{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:34px;padding:4px 0;}
.axis-left-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.axis-left span{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);}
.grid-and-overlay{flex:1;position:relative;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.q{padding:1.6rem 1.3rem;cursor:pointer;transition:filter .15s,transform .12s;border-radius:8px;min-height:120px;border:1px solid transparent;}
.q:hover{filter:none;transform:scale(1.012);border-color:currentColor;}
.q.active{outline:2px solid var(--ink);outline-offset:-2px;}
.q-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;margin:0 0 5px;line-height:1.25;letter-spacing:-.01em;}
.q-sub{font-family:'Space Mono',monospace;font-size:11px;margin:0;letter-spacing:.02em;}
.q-ac{background:#f6e6e3;}.q-ac .q-title{color:#a8322a;}.q-ac .q-sub{color:#bd6a62;}
.q-af{background:#e9eae7;}.q-af .q-title{color:#383b40;}.q-af .q-sub{color:#7e8186;}
.q-ls{background:#e4efe5;}.q-ls .q-title{color:#2c7541;}.q-ls .q-sub{color:#6ba078;}
.q-lc{background:#e1ecf7;}.q-lc .q-title{color:#235f9c;}.q-lc .q-sub{color:#6e98c4;}

#party-overlay{position:absolute;inset:0;pointer-events:none;z-index:10;}
.party-dot{position:absolute;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:auto;cursor:default;border:1.5px solid rgba(0,0,0,.18);transition:transform .15s;z-index:11;box-shadow:0 1px 3px rgba(24,26,31,.25);}
.party-dot:hover{transform:translate(-50%,-50%) scale(1.5);}
.party-dot.ruling{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);z-index:12;}
.ruling-badge{display:inline-block;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;color:var(--ink);background:#e7e9e2;padding:1px 5px;border-radius:3px;letter-spacing:.06em;margin-left:5px;text-transform:uppercase;}
.party-tooltip{display:none;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--rule);padding:8px 11px;border-radius:7px;z-index:20;pointer-events:none;width:200px;box-shadow:0 10px 30px -10px rgba(24,26,31,.35);}
.party-tooltip strong{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:3px;}
.party-tooltip p{font-size:12px;color:var(--ink-2);line-height:1.5;margin:0;}
.party-tooltip p b{font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);letter-spacing:.02em;}
.party-dot:hover .party-tooltip{display:block;}
.party-tooltip .tip-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.party-tooltip .tip-logo{width:22px;height:22px;flex-shrink:0;border-radius:3px;background:#fff;padding:2px;object-fit:contain;border:1px solid var(--rule-2);}
.party-tooltip .tip-ideo{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.party-tooltip .tip-ideo span{font-family:'Space Mono',monospace;font-size:9px;color:var(--ink-2);background:#eef0ea;padding:1px 5px;border-radius:3px;letter-spacing:.02em;}

.info-panel{display:none;margin-top:8px;background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:1.5rem;}
.info-panel.open{display:block;}
.panel-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;margin:0 0 10px;}
.panel-desc{font-size:15px;color:var(--ink-2);line-height:1.7;margin:0 0 1.25rem;max-width:none;}
.panel-ex-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.panel-ex{list-style:none;padding:0;margin:0 0 1.25rem;}
.panel-ex li{font-size:14px;color:var(--ink-2);padding:5px 0;border-bottom:1px solid var(--rule-2);max-width:none;}
.panel-ex li:last-child{border:none;}
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tag{font-family:'Space Mono',monospace;font-size:10px;padding:3px 10px;border-radius:4px;letter-spacing:.02em;}
.disclaimer{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:.75rem;letter-spacing:.02em;display:none;max-width:none;}

.ruling-bar{display:none;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink);margin:8px 0 .25rem;letter-spacing:.02em;padding:10px 14px;background:var(--panel);border:1px solid var(--rule);border-radius:8px;}
.ruling-bar.show{display:block;}
.ruling-bar .rb-label{color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-right:8px;}
.ruling-bar .rb-party{color:var(--ink);font-weight:700;}
.ruling-bar .rb-leader{color:var(--ink-2);margin-left:6px;}
.ruling-bar .rb-src{color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.ruling-bar .rb-src:hover{color:var(--ink);}
.ruling-bar .rb-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;}
.ruling-bar .rb-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;padding-top:8px;border-top:1px dotted var(--rule);}
.ruling-bar .rb-stat{display:inline-flex;align-items:baseline;gap:6px;color:var(--ink-2);font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.ruling-bar .rb-stat strong{color:var(--ink);font-weight:700;font-size:11px;}
.ruling-bar .rb-elec{color:var(--live);font-size:11px;margin-left:auto;}
.ruling-bar .rb-elec strong{color:var(--ink);}

/* ===== EXPLAINER (two axes) ================================== */
.explainer{padding-top:1rem;}
.explainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem;}
.axis-card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:1.6rem;}
.axis-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.015em;margin-bottom:.75rem;}
.axis-card p{font-size:15px;color:var(--ink-2);line-height:1.7;}
.axis-range{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-top:1.1rem;border-top:1px solid var(--rule-2);padding-top:.75rem;}

/* ===== HORSESHOE (light) ==================================== */
#horseshoe .hs-intro{max-width:720px;margin-bottom:2rem;}
.hs-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,4.5vw,42px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin-bottom:1rem;}
.hs-sub{font-size:16px;color:var(--ink-2);line-height:1.65;}
.hs-stage{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:2rem;}
.hs-meter{display:flex;justify-content:space-between;align-items:baseline;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem;}
.hs-meter .state-name{color:var(--ink);}
.hs-svg{display:block;width:100%;height:auto;max-width:620px;margin:0 auto 1.75rem;}
.hs-curve,.hs-line{stroke:#b9bcb4;stroke-width:2;fill:none;transition:opacity .5s ease;}
.hs-line{opacity:0;}
.hs-axes{opacity:0;transition:opacity .5s ease .15s;}
.hs-axes line{stroke:#c7c9c1;stroke-width:1;stroke-dasharray:3 4;}
.hs-axes text{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.1em;fill:var(--muted);text-transform:uppercase;}
.state-line .hs-curve{opacity:0;}
.state-line .hs-line{opacity:1;}
.state-grid .hs-curve,.state-grid .hs-line{opacity:0;}
.state-grid .hs-axes{opacity:1;}
.hs-dot{transition:transform .85s cubic-bezier(.6,.05,.4,1);}
.hs-dot circle{stroke:rgba(24,26,31,.18);stroke-width:1.5;}
.hs-dot text{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.04em;fill:var(--ink);transition:opacity .4s;}
.hs-stalin circle{fill:var(--q-red);}
.hs-socdem circle{fill:#e08a84;}
.hs-center circle{fill:#9a9ea3;}
.hs-conserv circle{fill:var(--q-blue);}
.hs-nazi circle{fill:#fff;stroke:var(--q-graphite);}
.state-horseshoe .hs-stalin{transform:translate(170px,50px);}
.state-horseshoe .hs-socdem{transform:translate(170px,150px);}
.state-horseshoe .hs-center{transform:translate(240px,235px);}
.state-horseshoe .hs-conserv{transform:translate(310px,150px);}
.state-horseshoe .hs-nazi{transform:translate(310px,50px);}
.state-horseshoe .hs-socdem text,.state-horseshoe .hs-center text,.state-horseshoe .hs-conserv text{opacity:0;}
.state-line .hs-stalin{transform:translate(60px,160px);}
.state-line .hs-socdem{transform:translate(150px,160px);}
.state-line .hs-center{transform:translate(240px,160px);}
.state-line .hs-conserv{transform:translate(330px,160px);}
.state-line .hs-nazi{transform:translate(420px,160px);}
.state-grid .hs-stalin{transform:translate(110px,78px);}
.state-grid .hs-socdem{transform:translate(175px,135px);}
.state-grid .hs-center{transform:translate(240px,175px);}
.state-grid .hs-conserv{transform:translate(305px,145px);}
.state-grid .hs-nazi{transform:translate(380px,78px);}
.hs-share-rule{opacity:0;transition:opacity .4s ease .6s;}
.state-grid .hs-share-rule{opacity:1;}
.hs-share-rule line{stroke:var(--live);stroke-width:1;stroke-dasharray:2 3;}
.hs-share-rule text{fill:var(--live);font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;}
.hs-caption{max-width:560px;margin:0 auto 1.75rem;text-align:center;}
.hs-caption-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(20px,3vw,26px);letter-spacing:-.01em;color:var(--ink);margin-bottom:.6rem;line-height:1.15;}
.hs-caption-body{font-size:15px;color:var(--ink-2);line-height:1.7;margin:0 auto;}
.hs-caption-body em{color:var(--ink);font-style:italic;}
.hs-btn{display:block;margin:0 auto;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;color:var(--ink-inv);background:var(--ink);border:none;padding:.8rem 1.6rem;border-radius:7px;cursor:pointer;transition:background .2s,transform .12s;}
.hs-btn:hover{background:#000;transform:translateY(-1px);}

/* ===== OVERTON LAUNCH / ACTION CARDS ======================== */
.cta-headline{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4.5vw,46px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin-bottom:1.1rem;max-width:18ch;}
.cta-desc{font-size:17px;color:var(--ink-2);line-height:1.7;max-width:62ch;margin-bottom:2.5rem;}
.cta-desc strong{color:var(--ink);font-weight:600;}

.overton-launch{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.1rem 1.4rem;border:1px solid var(--rule);border-left:3px solid var(--live);border-radius:9px;background:var(--panel);text-decoration:none;color:var(--ink);margin-bottom:2.5rem;transition:border-color .15s,transform .12s;}
.overton-launch:hover{border-color:var(--ink);transform:translateX(3px);}
.overton-launch .ol-label{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);flex:0 0 auto;}
.overton-launch .ol-url{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.02em;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:1px dotted var(--rule);border-right:1px dotted var(--rule);padding:0 1rem;}
.overton-launch .ol-url b{color:var(--live);font-weight:700;}
.overton-launch .ol-arrow{font-family:'Space Mono',monospace;font-size:16px;color:var(--live);flex:0 0 auto;}

.overton-mini{display:block;width:100%;max-width:520px;margin:0 0 2rem;border:1px solid var(--rule);border-radius:9px;background:var(--panel-2);padding:1rem;}
.overton-mini svg{display:block;width:100%;height:auto;}
.overton-mini-cap{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-top:.6rem;text-transform:uppercase;}

.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;}
.action-card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:1.5rem;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .12s;display:flex;flex-direction:column;gap:.4rem;}
.action-card:hover{border-color:var(--ink);transform:translateY(-2px);}
.action-card .a-label{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.action-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.015em;color:var(--ink);margin:2px 0 6px;}
.action-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-bottom:auto;max-width:none;}
.action-card .a-go{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:.04em;margin-top:.9rem;}
.action-card-btn{font:inherit;width:100%;text-align:left;cursor:pointer;}

/* ===== SHARE HOOKS ========================================== */
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.progress-all{color:var(--q-green);}
.progress-bar{height:3px;background:var(--rule);margin-bottom:2.5rem;overflow:hidden;border-radius:3px;}
.progress-fill{height:100%;background:var(--ink);transition:width .4s ease;}
.hook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:2rem;}
.hook-card{text-align:left;background:var(--panel);border:1px solid var(--rule);color:var(--ink);padding:14px;cursor:pointer;border-radius:8px;transition:all .15s;font-family:inherit;display:flex;flex-direction:column;gap:8px;min-height:96px;}
.hook-card:hover{border-color:var(--ink);}
.hook-card.active{border-color:var(--ink);background:var(--panel-2);box-shadow:0 0 0 1px var(--ink) inset;}
.hook-card.shared{opacity:.6;}
.hook-meta{display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.06em;}
.hook-meta .shared-tag{color:var(--q-green);text-transform:uppercase;}
.hook-preview{font-size:13.5px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:'Source Serif 4',serif;}
.active-hook{border:1px solid var(--ink);background:var(--panel-2);padding:1.75rem;border-radius:10px;}
.active-hook blockquote{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(20px,2.6vw,28px);line-height:1.22;letter-spacing:-.015em;color:var(--ink);border:none;padding:0;margin:0 0 1.25rem;max-width:none;}
.active-hook .link-note{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-bottom:1rem;}
.active-hook .link-note span{color:var(--ink);}
.share-btns{display:flex;flex-wrap:wrap;gap:6px;}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:11px;padding:8px 12px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:6px;text-decoration:none;letter-spacing:.04em;transition:all .15s;}
.share-btn:hover{background:var(--ink);color:var(--ink-inv);border-color:var(--ink);}
.share-btn svg{width:11px;height:11px;}

/* ===== QUOTE / RELATED / FOOTER ============================= */
blockquote{font-family:'Source Serif 4',serif;font-size:clamp(19px,2.4vw,26px);font-weight:400;font-style:italic;line-height:1.6;color:var(--ink-2);border-left:3px solid var(--live);padding-left:2rem;max-width:680px;}
blockquote cite{display:block;margin-top:1.25rem;font-size:12px;font-style:normal;font-family:'Space Mono',monospace;letter-spacing:.06em;color:var(--muted);}

.related-section h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;line-height:1.05;margin:0 0 .35rem;color:var(--ink);}
.related-section .sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 2rem;}
.related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;}
.related-card{display:flex;flex-direction:column;padding:1rem 1.1rem;background:var(--panel);border:1px solid var(--rule);border-radius:8px;text-decoration:none;color:var(--ink);transition:border-color 120ms,transform 120ms;}
.related-card:hover{border-color:var(--ink);transform:translateY(-2px);}
.related-card .domain{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;color:var(--live);letter-spacing:.06em;margin-bottom:.6rem;}
.related-card .r-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:.55rem;}
.related-card .r-hook{font-family:'Source Serif 4',serif;font-size:13.5px;font-weight:400;color:var(--ink-2);line-height:1.5;flex:1;margin-bottom:.75rem;}
.related-card .r-open{font-family:'Space Mono',monospace;font-size:10px;color:var(--live);letter-spacing:.06em;text-transform:uppercase;}

footer{border-top:1px solid var(--rule);padding:2.5rem 1.5rem;text-align:center;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em;}

/* ===== PERSISTENT AUDIO BAR (the unmissable narration) ====== */
.audiobar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;height:var(--bar-h);
  display:flex;align-items:center;gap:.9rem;padding:0 1rem;
  background:var(--ink);color:var(--ink-inv);
  border-top:1px solid #000;
}
.audiobar .ab-play{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--live);display:grid;place-items:center;transition:transform .12s;
}
.audiobar .ab-play:hover{transform:scale(1.06);}
.audiobar .ab-play::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:2px;}
.audiobar.playing .ab-play::after{content:"";border:none;width:10px;height:11px;margin:0;border-left:3px solid #fff;border-right:3px solid #fff;}
.audiobar .ab-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.audiobar .ab-kicker{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#b7c0a8;}
.audiobar .ab-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audiobar .ab-time{font-family:'Space Mono',monospace;font-size:11px;color:#a7abb1;flex:0 0 auto;}
.audiobar .ab-prog{flex:2;height:4px;background:#3a3d42;border-radius:3px;overflow:hidden;cursor:pointer;min-width:60px;}
.audiobar .ab-prog i{display:block;height:100%;width:0;background:var(--live);}
.audiobar .ab-sound{flex:0 0 auto;background:transparent;border:1px solid #3a3d42;color:#cfd2d6;border-radius:6px;cursor:pointer;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .55rem;}
.audiobar .ab-sound:hover{border-color:#6a6d72;color:#fff;}
.audiobar .ab-sound[aria-pressed="false"]{opacity:.55;}
@media(max-width:640px){
  .audiobar .ab-time{display:none;}
  .audiobar .ab-prog{flex:1;}
}

/* ===== RESPONSIVE =========================================== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:4.5rem;}
  .hero-graph{order:2;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  body{font-size:17px;background-size:22px 22px;}
  .explainer-grid{grid-template-columns:1fr;}
  .hero-headline{font-size:clamp(34px,11vw,52px);}
  nav{padding:.6rem .9rem;}
  .nav-links{gap:.05rem;}
  .nav-links a{font-size:10.5px;padding:.3rem .4rem;}
  .section,.cta-section,.quote-section,.related-section,.syllabus{padding:2.5rem 1.1rem;}
  .lesson{grid-template-columns:auto 1fr;}
  .lesson .meta{grid-column:2;justify-content:flex-start;margin-top:.3rem;}
}
@media (max-width:500px){.related-grid{grid-template-columns:1fr;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}