:root{
  --bg:#eeece3;
  --surface:#ffffff;
  --surface-2:#f5f2e9;
  --line:#d9d4c5;
  --text:#1c2024;
  --text-muted:#5c6670;
  --accent:#b8780c;
  --accent-strong:#935e08;
  --accent2:#1c7a72;
  --accent2-strong:#145a54;
  --hazard-a:#e8a93c;
  --hazard-b:#1c2024;
  --shadow: 0 1px 2px rgba(20,24,28,.06), 0 8px 24px rgba(20,24,28,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12161a;
    --surface:#1a2027;
    --surface-2:#212930;
    --line:#2b333b;
    --text:#e9edf0;
    --text-muted:#8d99a3;
    --accent:#e8a93c;
    --accent-strong:#f4c463;
    --accent2:#4fc0b6;
    --accent2-strong:#6fd6cc;
    --hazard-a:#e8a93c;
    --hazard-b:#12161a;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#12161a;
  --surface:#1a2027;
  --surface-2:#212930;
  --line:#2b333b;
  --text:#e9edf0;
  --text-muted:#8d99a3;
  --accent:#e8a93c;
  --accent-strong:#f4c463;
  --accent2:#4fc0b6;
  --accent2-strong:#6fd6cc;
  --hazard-a:#e8a93c;
  --hazard-b:#12161a;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Heebo','Segoe UI',Arial,sans-serif;
  line-height:1.7;
}
h1,h2,h3{ text-wrap:balance; margin:0; }
h1,h2{ font-family:'Suez One','Frank Ruhl Libre',serif; font-weight:400; }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',Consolas,monospace; letter-spacing:.04em; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem 1.5rem;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Suez One',serif; font-size:1.15rem;
  white-space:nowrap; text-decoration:none;
}
.brand svg{ flex:none; }
.brand-sub{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  color:var(--text-muted); letter-spacing:.1em;
  display:block; margin-top:.1rem;
}
.nav{
  display:flex; gap:.25rem; overflow-x:auto;
  scrollbar-width:none; flex:1;
}
.nav::-webkit-scrollbar{ display:none; }
.nav-link{
  white-space:nowrap; text-decoration:none;
  font-size:.88rem; color:var(--text-muted);
  padding:.5rem .7rem; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-link:hover{ color:var(--text); }
.nav-link.is-active{ color:var(--text); border-color:var(--accent); }

main{ max-width:1040px; margin:0 auto; padding:0 1.5rem 5rem; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  margin:1.5rem 0 3rem;
  border:1px solid var(--line);
  background:var(--hazard-b);
  color:#eef1f3;
}
.hero-stripe{
  height:18px;
  background:repeating-linear-gradient(45deg, var(--hazard-a) 0 14px, var(--hazard-b) 14px 28px);
}
.hero-body{ position:relative; padding:3.2rem 2rem 0; min-height:340px; }
.hero-art{ position:absolute; inset:0; z-index:0; opacity:.9; }
.hero-art svg{ position:absolute; bottom:0; right:0; width:100%; height:62%; }
.hero-scan{
  position:absolute; right:0; left:0; height:3px; top:0;
  background:linear-gradient(90deg, transparent 4%, var(--hazard-a) 50%, transparent 96%);
  box-shadow:0 0 16px 3px rgba(232,169,60,.65);
  opacity:.9;
  animation:scan 6s ease-in-out infinite;
}
@keyframes scan{ 0%{ top:8%; opacity:.2; } 12%{ opacity:1; } 50%{ top:56%; opacity:.7; } 88%{ opacity:1; } 100%{ top:8%; opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .hero-scan{ animation:none; opacity:.7; top:30%; } }
.hero-fade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,22,26,.55) 0%, rgba(18,22,26,.86) 72%, rgba(18,22,26,.96) 100%);
}
.hero-content{ position:relative; z-index:2; padding-bottom:2.4rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  color:var(--hazard-a); letter-spacing:.12em;
  border:1px solid rgba(232,169,60,.4); padding:.35rem .7rem;
  background:rgba(232,169,60,.08);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--hazard-a); }
.hero h1{ font-size:clamp(2.3rem, 4.2vw + 1rem, 4rem); margin:1rem 0 .9rem; color:#f5f2e9; }
.hero p.lead{ max-width:44ch; color:#c9d1d6; font-size:1.05rem; margin:0 0 1.6rem; }
.hero-meta{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.meta-chip{
  border:1px solid rgba(255,255,255,.16); padding:.6rem .9rem;
  min-width:110px; background:rgba(255,255,255,.04);
}
.meta-chip .k{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:#9aa6ad; letter-spacing:.08em; display:block; }
.meta-chip .v{ font-size:1rem; margin-top:.2rem; color:#f0ece0; }

/* ---------- sections ---------- */
.section-head{ margin:0 0 1.4rem; }
.section-head .tag{ color:var(--accent2); font-size:.72rem; }
.section-head h2{ font-size:var(--fs-h2, clamp(1.5rem,2vw + 1rem,2.1rem)); margin-top:.4rem; }
.section-head p{ color:var(--text-muted); max-width:60ch; margin:.6rem 0 0; }

footer{
  border-top:1px solid var(--line); margin-top:2rem; padding:2rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  color:var(--text-muted); font-size:.85rem;
}
footer .fbrand{ font-family:'Suez One',serif; color:var(--text); font-size:1rem; }
footer .fmono{ font-family:'IBM Plex Mono',monospace; font-size:.75rem; }

/* ---------- secondary pages ---------- */
.crumb{
  display:inline-block; margin:1.6rem 0 1rem; font-size:.9rem;
  color:var(--text-muted); text-decoration:none;
}
.crumb:hover{ color:var(--accent2); }
.p-header{
  border-top:3px solid var(--accent); background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:1.8rem 1.6rem;
}
.p-header .row1{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.p-header .idx{ font-family:'IBM Plex Mono',monospace; color:var(--accent2); font-size:.85rem; }
.p-header .type{ font-family:'IBM Plex Mono',monospace; color:var(--text-muted); font-size:.7rem; letter-spacing:.1em; border:1px solid var(--line); padding:.2rem .5rem; }
.p-header h2{ font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem); margin:.7rem 0 .8rem; }
.p-header .icon{ color:var(--accent2); }
.p-header p.lead{ color:var(--text-muted); max-width:62ch; margin:0; font-size:1.04rem; }

.topics{
  margin:2rem 0; padding:0; list-style:none;
  display:grid; gap:.6rem;
}
.topics li{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  padding:.9rem 1rem;
}
.topics li .n{ font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:.8rem; flex:none; padding-top:.1rem; }

.context-panel{
  border:1px solid var(--line); background:var(--surface-2);
  padding:1.4rem 1.5rem; margin-bottom:2.4rem;
  display:flex; flex-direction:column; gap:1.2rem;
}
.context-panel .k{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--text-muted); letter-spacing:.08em; }
.context-panel .why p{ margin:.5rem 0 0; color:var(--text); max-width:66ch; }
.context-row{ display:flex; gap:2rem; flex-wrap:wrap; }
.context-row > div{ flex:1; min-width:220px; }
.term-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.term{
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--accent2);
  border:1px solid var(--line); background:var(--surface); padding:.3rem .6rem;
}
.context-row .audience p{ margin:.5rem 0 0; color:var(--text); }

.ep-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(108px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-bottom:3rem;
}
.ep-tag{
  background:var(--surface); padding:.85rem .8rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.ep-tag .ep-num{ color:var(--text-muted); font-size:.72rem; }
.ep-tag .ep-date{ color:var(--text); font-size:.88rem; font-variant-numeric:tabular-nums; }

.guest-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin:2rem 0;
}
.guest-card{
  background:var(--surface); padding:1.3rem 1.3rem 1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.guest-card h3{ font-size:1.05rem; margin:0; }
.guest-card .factory{ color:var(--text-muted); font-size:.78rem; }
.guest-card p{ color:var(--text); font-size:.92rem; margin:.3rem 0 0; }
.guest-footer{
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
}
.guest-footer .episode{ color:var(--accent); font-size:.78rem; }
.guest-links{ display:flex; gap:.5rem; }
.guest-link{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  border:1px solid var(--line); padding:.35rem .6rem;
  color:var(--accent2); text-decoration:none;
}
.guest-link:hover{ border-color:var(--accent2); }
.guest-link[aria-disabled="true"]{ color:var(--text-muted); }

.empty-state{
  grid-column:1 / -1;
  border:1px dashed var(--line); background:var(--surface-2);
  padding:2rem 1.5rem; text-align:center; color:var(--text-muted);
}

.flip-letter{
  display:inline-grid;
  justify-items:center;
  vertical-align:baseline;
}
.flip-letter .flip{
  grid-area:1/1; opacity:0;
  text-align:center;
  transition:opacity .9s ease;
}
.flip-letter .flip-a{ opacity:1; }
.flip-letter.swap .flip-a{ opacity:0; }
.flip-letter.swap .flip-b{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .flip-letter .flip{ transition:none; }
  .flip-letter .flip-a{ opacity:0; }
  .flip-letter .flip-b{ opacity:1; }
}

@media (max-width:560px){
  .topbar{ padding:.8rem 1rem; }
  main{ padding:0 1rem 4rem; }
  .hero-body{ padding:2.2rem 1.2rem 0; }
}

/* ---------- accessibility widget ---------- */
.a11y-widget{ position:fixed; z-index:60; left:1rem; bottom:1rem; }
.a11y-toggle{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--accent2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
}
.a11y-toggle:hover{ border-color:var(--accent2); }
.a11y-panel{
  position:absolute; bottom:56px; left:0;
  width:230px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); padding:1rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.a11y-panel[hidden]{ display:none; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.a11y-label{ font-size:.85rem; color:var(--text); }
.a11y-btns{ display:flex; gap:.3rem; }
.a11y-btns button, .a11y-switch{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  padding:.3rem .55rem; cursor:pointer;
}
.a11y-btns button:hover, .a11y-switch:hover{ border-color:var(--accent2); }
.a11y-switch[aria-pressed="true"]{ background:var(--accent2); color:#fff; border-color:var(--accent2); }
.a11y-reset{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  color:var(--text-muted); background:none; border:1px solid var(--line);
  padding:.4rem; cursor:pointer; width:100%;
}
.a11y-reset:hover{ color:var(--text); border-color:var(--accent2); }

html.a11y-contrast{
  --bg:#000000; --surface:#000000; --surface-2:#111111; --line:#ffffff;
  --text:#ffffff; --text-muted:#f2f2f2; --accent:#ffdd00; --accent-strong:#ffe94d;
  --accent2:#ffdd00; --accent2-strong:#ffe94d; --hazard-a:#ffdd00; --hazard-b:#000000;
}
html.a11y-readable-font h1, html.a11y-readable-font h2,
html.a11y-readable-font .brand, html.a11y-readable-font footer .fbrand{
  font-family:'Heebo','Segoe UI',Arial,sans-serif !important;
}

.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a{ color:var(--text-muted); text-decoration:none; font-size:.85rem; }
.footer-links a:hover{ color:var(--accent2); text-decoration:underline; }