/* ── Brand tokens (The Reckoning — Identity V1). Single dark world by design. ── */
:root{
  color-scheme: dark;
  --ash:#0E0D0C;      /* primary ground */
  --char:#1C1A17;     /* raised surfaces */
  --iron:#3A3631;     /* rules, frames */
  --smoke:#8C857A;    /* labels, captions */
  --bone:#EAE3D2;     /* type */
  --verdict:#C8372D;  /* the plumb line. graphics & large type only */
  --oxblood:#7A1B15;  /* deep accent ground */

  --display:"Bodoni Moda", "Bodoni 72", "Didot", "Bodoni MT", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --track:.18em;
  --rail-x:max(20px, calc((100vw - 1280px) / 2 + 28px));
  --gut-l:calc(var(--rail-x) + 44px);
  --gut-r:clamp(16px, 4vw, 56px);
  --header-h:64px;
}
@media (min-width:760px){ :root{ --rail-x:max(28px, calc((100vw - 1280px) / 2 + 36px)); --gut-l:calc(var(--rail-x) + 72px); } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--ash)}
body{
  margin:0;
  background:var(--ash); color:var(--bone);
  font:400 15px/1.7 var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
::selection{background:var(--bone); color:var(--ash)}
:focus-visible{outline:1px solid var(--bone); outline-offset:4px}

/* Film grain: the intercepted-transmission texture, kept faint */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap{max-width:1280px; margin-inline:auto; padding-inline:var(--gut-l) var(--gut-r)}

/* Type */
.label{font:500 12px/1.4 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke)}
.label--bone{color:var(--bone)}
.display{font-family:var(--display); font-weight:700; line-height:.98; letter-spacing:-.005em; text-wrap:balance; margin:0}
.h2{font-size:clamp(40px, 6.2vw, 84px)}
.h3{font-size:clamp(28px, 3.4vw, 44px); line-height:1.02}
.pull{font-family:var(--display); font-style:italic; font-weight:400; line-height:1.2; text-wrap:balance}
p{margin:0; max-width:62ch}
.muted{color:var(--smoke)}

/* ── The plumb line: the one red line on every view ── */
.rail{position:fixed; top:0; left:var(--rail-x); width:24px; height:100vh; z-index:70; pointer-events:none;
  --p:0; --drop:calc(38vh + var(--p) * 48vh);
  animation:plumb 1.3s cubic-bezier(.2,.8,.25,1) .15s both}
.rail-line{position:absolute; left:10.5px; top:0; width:3px; height:var(--drop); background:var(--verdict)}
.rail-bob{position:absolute; left:0; top:calc(var(--drop) - 2px); width:24px; height:34px; fill:var(--verdict)}
@keyframes plumb{from{transform:translateY(-70vh)} to{transform:none}}

/* ── Top bar: follow + subscribe ── */
.topbar{background:var(--oxblood)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding-block:7px}
.topbar .label{color:rgba(234,227,210,.8)}
.topbar-cta{display:flex; gap:8px; flex-wrap:wrap}
.topbar-link{display:inline-flex; align-items:center; gap:8px; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:9px 12px; border:1px solid rgba(234,227,210,.6); color:var(--bone); transition:background .2s, color .2s}
.topbar-link:hover{background:var(--bone); color:var(--oxblood)}
.topbar-link--solid{background:var(--bone); color:var(--oxblood); border-color:var(--bone)}
.topbar-link--solid:hover{background:transparent; color:var(--bone)}
@media (max-width:640px){
  .topbar .label{display:none}
  .topbar-link{font-size:10.5px; letter-spacing:.08em; padding:9px 10px}
}

/* ── Header ── */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; background:var(--ash); border-bottom:1px solid var(--iron)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--header-h)}
.lockup-h{display:flex; align-items:center; gap:12px; text-decoration:none}
.lockup-h svg{width:30px; height:34px; color:var(--bone)}
.lockup-h .the{display:block; font:500 8px/1 var(--mono); letter-spacing:.5em; color:var(--smoke); margin-bottom:3px}
.lockup-h .word{display:block; font:700 19px/1 var(--display); letter-spacing:.03em}
.nav{display:flex; align-items:center; gap:clamp(16px, 2.4vw, 32px)}
.nav a{font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke); text-decoration:none; padding-block:8px}
.nav a:hover{color:var(--bone)}
.nav .btn{color:var(--ash)}
@media (max-width:1060px){ .nav a:not(.btn){display:none} }
.nav a{white-space:nowrap}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase;
  text-decoration:none; padding:14px 18px; border:1px solid var(--bone); color:var(--bone); background:transparent; cursor:pointer; transition:background .2s, color .2s}
.btn:hover{background:var(--bone); color:var(--ash)}
.btn--solid{background:var(--bone); color:var(--ash)}
.btn--solid:hover{background:transparent; color:var(--bone)}
.nav .btn{padding:11px 14px}
.nav .btn--solid:hover{color:var(--bone)}
.btn .arr{font-size:14px; line-height:0}

/* Section scaffolding */
section{scroll-margin-top:calc(var(--header-h) + 8px)}
.sec{padding-block:clamp(72px, 10vw, 136px) 0}
.sec-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--iron); margin-bottom:clamp(32px, 5vw, 56px)}

/* ── Hero ── */
.hero{padding-block:clamp(28px, 5vw, 56px) 0; container-type:inline-size}
.hero-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.wordmark{margin-top:clamp(48px, 9vw, 120px)}
.wordmark .the{display:block; font:500 clamp(12px, 1.5cqi, 20px)/1 var(--mono); letter-spacing:.7em; color:var(--smoke); margin:0 0 .9em .15em}
.wordmark h1{margin:0; font:700 14.4cqi/.86 var(--display); letter-spacing:.012em; font-optical-sizing:auto; white-space:nowrap}
.credit{display:flex; align-items:center; gap:18px; margin-top:clamp(20px, 3vw, 32px)}
.credit::after{content:""; flex:1; height:1px; background:var(--iron)}

.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(32px, 6vw, 96px); margin-top:clamp(56px, 8vw, 104px); align-items:end}
.thesis .display{font-size:clamp(34px, 4.6vw, 62px)}
.thesis .pull{font-size:clamp(20px, 2vw, 26px); margin-top:22px; color:var(--bone)}
.thesis p.body{margin-top:22px; color:var(--smoke)}

.broadcast{border:1px solid var(--iron); background:var(--char); padding:clamp(20px, 2.6vw, 32px)}
.broadcast-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.status{display:inline-flex; align-items:center; gap:10px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--smoke)}
.is-live .dot{background:var(--bone); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.when{margin-top:18px; font:500 clamp(15px, 1.3vw, 17px)/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.clock{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:20px; padding-block:18px; border-block:1px solid var(--iron)}
.clock div{display:flex; flex-direction:column; gap:6px}
.clock b{font:500 clamp(30px, 3.4vw, 46px)/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.clock span{font:500 11px/1 var(--mono); letter-spacing:var(--track); color:var(--smoke)}
.onair-msg{margin-top:20px; padding-block:18px; border-block:1px solid var(--iron); font:700 clamp(30px, 3.4vw, 44px)/1 var(--display)}
.broadcast .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}

/* ── Latest episode ── */
.latest{position:relative; overflow:hidden; background:var(--char); border:1px solid var(--iron);
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px, 5vw, 72px); padding:clamp(24px, 4vw, 56px)}
.latest-ring{position:absolute; width:min(640px, 70%); aspect-ratio:1; right:-18%; top:-30%; border:5px solid var(--iron); border-radius:50%; pointer-events:none; opacity:.8}
.latest > *:not(.latest-ring){position:relative}
.ep-meta{display:flex; gap:18px; flex-wrap:wrap}
.latest h3{margin-top:26px; font-size:clamp(40px, 5.4vw, 76px)}
.latest .hosts{margin-top:20px}
.latest p.summary{margin-top:24px; color:var(--bone); opacity:.86}
.latest .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:32px}
.latest .feed-url{margin:12px 0 0; max-width:520px}
.chapters{align-self:end}
.chapters ol{list-style:none; margin:14px 0 0; padding:0}
.chapters li{display:grid; grid-template-columns:88px 1fr; gap:12px; padding-block:12px; border-top:1px solid var(--iron); font-size:14px; line-height:1.45}
.chapters li:last-child{border-bottom:1px solid var(--iron)}
.chapters time{color:var(--smoke); font-variant-numeric:tabular-nums}

/* ── Archive ── */
.archive-tools{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px}
.search{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--iron); min-width:min(100%, 340px); padding-block:6px}
.search:focus-within{border-color:var(--bone)}
.search input{flex:1; min-width:0; background:transparent; border:0; color:var(--bone); font:400 15px/1.6 var(--mono); padding:6px 0; outline:none}
.search input::placeholder{color:var(--smoke)}
.eps{list-style:none; margin:0; padding:0}
.ep{display:grid; grid-template-columns:96px 1fr 128px 96px 28px; gap:24px; align-items:baseline; padding-block:26px; border-bottom:1px solid var(--iron); text-decoration:none; color:inherit}
.eps li:first-child .ep{border-top:1px solid var(--iron)}
.ep .num{font:500 13px/1 var(--mono); letter-spacing:var(--track)}
.ep h4{margin:0; font:700 clamp(22px, 2.4vw, 32px)/1.08 var(--display); text-wrap:balance}
.ep p{margin-top:10px; font-size:14px; color:var(--smoke)}
.ep .date, .ep .run{font:500 12px/1 var(--mono); letter-spacing:.12em; color:var(--smoke); font-variant-numeric:tabular-nums}
.ep .go{font-size:18px; line-height:1; transition:transform .2s}
.ep:hover h4{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.ep:hover .go{transform:translateX(4px)}
.empty{padding-block:32px; color:var(--smoke)}
@media (max-width:760px){
  .ep{grid-template-columns:1fr auto; gap:10px 16px}
  .ep .num{grid-column:1; grid-row:1}
  .ep .body{grid-column:1 / -1; grid-row:2}
  .ep .date{grid-column:2; grid-row:1; justify-self:end}
  .ep .run, .ep .go{display:none}
}

/* ── The question ── */
.question-intro{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px, 6vw, 96px); align-items:end}
.question-intro .pull{font-size:clamp(20px, 2vw, 26px)}
.ledger{margin-top:clamp(40px, 6vw, 72px); border-top:1px solid var(--iron)}
.ledger-row{display:grid; grid-template-columns:1fr 1px 1fr; border-bottom:1px solid var(--iron)}
.ledger-row > div{padding:20px clamp(12px, 2vw, 28px) 20px 0; font:400 clamp(18px, 2.1vw, 28px)/1.2 var(--display)}
.ledger-row > div:last-child{padding-left:clamp(16px, 3vw, 40px)}
.ledger-row > i{background:var(--iron)}
.ledger-row.head > div{font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke); padding-block:18px}
.ledger-row .cold{color:var(--smoke)}
.escape{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-top:clamp(48px, 7vw, 88px)}
.escape .display{font-size:clamp(44px, 7vw, 104px)}

/* ── Principles ── */
.creed{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 96px); align-items:start}
.creed-lead{position:sticky; top:calc(var(--header-h) + 32px)}
.creed-lead .display{font-size:clamp(36px, 4.4vw, 62px)}
.creed-lead .pull{font-size:clamp(20px, 2vw, 26px); margin-top:26px}
.creed-lead p.body{margin-top:22px; color:var(--smoke)}
.principles{list-style:none; margin:0; padding:0; border-top:1px solid var(--iron)}
.principles li{padding-block:clamp(22px, 2.6vw, 32px); border-bottom:1px solid var(--iron)}
.principles h3{margin:0; font:700 clamp(24px, 2.6vw, 36px)/1.08 var(--display); text-wrap:balance}
.principles p{margin-top:10px; color:var(--smoke); font-size:14px; max-width:54ch}

/* ── Hosts ── */
.hosts-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 56px)}
.host figure{margin:0; position:relative; aspect-ratio:1; overflow:hidden; background:var(--ash); max-width:100%}
.host img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04)}
.host figure::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 55%, var(--ash) 98%)}
.host .name{margin-top:-1.1em; position:relative; font-size:clamp(46px, 6vw, 88px); line-height:.9}
.host .role{margin-top:18px}
.host p.bio{margin-top:18px; color:var(--bone); opacity:.86}
.host blockquote{margin:26px 0 0; padding-top:20px; border-top:1px solid var(--iron)}
.host blockquote p{font-size:clamp(20px, 1.9vw, 25px)}

/* ── Clips ── */
.clips{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(16px, 2vw, 24px)}
.clip{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  min-height:clamp(230px, 24vw, 320px); max-width:100%; padding:clamp(20px, 2.6vw, 36px); border:1px solid var(--iron); background:var(--ash); text-decoration:none; color:inherit; transition:border-color .2s}
.clip::before{content:""; position:absolute; width:62%; aspect-ratio:1; right:-22%; top:50%; transform:translateY(-50%); border:3px solid var(--iron); border-radius:50%; transition:border-color .25s}
.clip > *{position:relative}
.clip:hover{border-color:var(--bone)}
.clip:hover::before{border-color:#4a453e}
.clip .pull{font-size:clamp(22px, 2.5vw, 34px); max-width:22ch}
.clip-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ── Listen ── */
.listen{background:var(--oxblood); padding:clamp(28px, 5vw, 72px); display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px, 6vw, 96px)}
.listen .label{color:rgba(234,227,210,.72)}
.listen .display{font-size:clamp(48px, 7vw, 104px); margin-top:22px}
.listen p.body{margin-top:24px; opacity:.9}
.listen svg.mark{width:88px; height:98px; color:var(--bone); margin-top:40px}
.platforms{list-style:none; margin:0; padding:0; border-top:1px solid rgba(234,227,210,.3)}
.platforms li{border-bottom:1px solid rgba(234,227,210,.3)}
.platforms a, .platforms .row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; text-decoration:none}
.platforms .pname{font:700 clamp(22px, 2.4vw, 30px)/1.1 var(--display)}
.platforms .hint{font:500 11px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; opacity:.72}
.platforms a:hover .pname{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.copy{font:500 11px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--bone); background:transparent; border:1px solid rgba(234,227,210,.6); padding:10px 12px; cursor:pointer}
.copy:hover{background:var(--bone); color:var(--oxblood)}
.feed-url{width:100%; margin-top:-6px; margin-bottom:16px; background:rgba(14,13,12,.35); border:1px solid rgba(234,227,210,.3); color:var(--bone); font:400 13px/1 var(--mono); padding:10px 12px}

/* ── Footer ── */
.site-footer{margin-top:clamp(80px, 11vw, 144px); border-top:1px solid var(--iron); padding-block:clamp(48px, 7vw, 88px) clamp(32px, 4vw, 48px)}
.foot-top{display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap}
.lockup-stack{display:flex; flex-direction:column; align-items:flex-start}
.lockup-stack svg{width:64px; height:72px; color:var(--bone)}
.lockup-stack .the{font:500 11px/1 var(--mono); letter-spacing:.7em; color:var(--smoke); margin:24px 0 10px}
.lockup-stack .word{font:700 clamp(40px, 5vw, 64px)/.9 var(--display); letter-spacing:.02em}
.foot-top .pull{font-size:clamp(26px, 3vw, 40px)}
.foot-links{display:flex; gap:24px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--iron)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--bone)}
.foot-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px}

/* ── Responsive ── */
@media (max-width:960px){
  .hero-grid, .latest, .question-intro, .listen, .creed{grid-template-columns:1fr}
  .creed-lead{position:static}
  .latest-ring{width:90%; right:-45%; top:-20%}
}
@media (max-width:720px){
  .hosts-grid, .clips{grid-template-columns:1fr}
  .ledger-row > div{font-size:17px}
  .clock b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail{animation:none}
  .is-live .dot{animation:none}
  *{transition:none!important}
}

/* ════════════════════════════════════════════════════════════════
   Multi-page additions
   ════════════════════════════════════════════════════════════════ */

/* Shared chrome is injected by site.js; reserve its height so nothing jumps */
.chrome-top{min-height:113px}
.chrome-foot{min-height:320px}

/* Current page in the nav */
.nav a[aria-current="page"]:not(.btn){color:var(--bone); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px}

/* Phone menu */
.menu-btn{display:none; font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--bone);
  background:transparent; border:1px solid var(--iron); padding:11px 12px; cursor:pointer}
.mnav{display:none; border-top:1px solid var(--iron); background:var(--ash)}
.mnav a{display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--iron); text-decoration:none;
  font:700 26px/1.1 var(--display)}
.mnav a:last-child{border-bottom:0}
.mnav a[aria-current="page"]{color:var(--smoke)}
@media (max-width:1060px){
  .menu-btn{display:inline-flex}
  .site-header.is-open .mnav{display:block}
}

/* Link in a section head ("All episodes →") */
.more{text-decoration:none}
.more:hover{color:var(--bone)}

/* ── Subscribe band: the loudest thing on the page, on purpose ── */
.subband{background:var(--bone); color:var(--ash); padding:clamp(28px, 5vw, 64px);
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px, 5vw, 80px); align-items:center}
.subband .label{color:#5a544b}
.subband .display{font-size:clamp(44px, 6.4vw, 92px); margin-top:18px}
.subband p.body{margin-top:20px; color:#3a3631}
.subband-actions{display:flex; flex-direction:column; gap:12px}
.cta-pair{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.cta-pair .cta{padding-block:16px}
.cta-pair .cta[hidden]{display:none}
@media (max-width:560px){ .cta-pair{grid-template-columns:1fr} }
.cta{display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none;
  font:500 14px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:22px 24px; border:2px solid var(--ash); color:var(--ash); background:transparent; cursor:pointer; transition:background .2s, color .2s}
.cta:hover{background:var(--ash); color:var(--bone)}
.cta--primary{background:var(--verdict); border-color:var(--verdict); color:#fff; font-size:15px; padding-block:26px}
.cta--primary:hover{background:var(--oxblood); border-color:var(--oxblood); color:#fff}
.cta small{font:500 11px/1 var(--mono); letter-spacing:.12em; opacity:.75}
.cal-row{display:flex; gap:12px; flex-wrap:wrap}
.cal-row .cta{flex:1 1 200px; padding-block:16px; font-size:12px}
@media (max-width:960px){ .subband{grid-template-columns:1fr} }

/* ── Inner-page header ── */
.page-head{padding-block:clamp(40px, 7vw, 96px) 0}
.page-head h1{margin-top:22px; font-size:clamp(56px, 10vw, 148px); line-height:.9}
.page-head .pull{margin-top:24px; font-size:clamp(20px, 2.2vw, 30px); max-width:32ch}
.page-head .lede{margin-top:22px; color:var(--smoke)}

/* ── Long-form (The question) ── */
.prose{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px, 6vw, 96px)}
.prose .body p + p{margin-top:18px}
.prose .body p{color:var(--bone); opacity:.9}
.topics{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--iron)}
.topics div{padding:24px 20px 24px 0; border-bottom:1px solid var(--iron)}
.topics div + div{padding-left:20px; border-left:1px solid var(--iron)}
.topics b{display:block; font:700 clamp(24px, 2.6vw, 34px)/1 var(--display)}
.topics span{display:block; margin-top:10px; font-size:14px; color:var(--smoke)}
@media (max-width:860px){
  .prose{grid-template-columns:1fr}
  .topics{grid-template-columns:1fr 1fr}
  .topics div:nth-child(3){padding-left:0; border-left:0}
}

/* ── Host profiles ── */
.profile{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px, 5vw, 80px); align-items:end}
.profile + .profile{margin-top:clamp(64px, 9vw, 128px)}
.profile:nth-child(even) figure{order:2}
.profile figure{margin:0; position:relative; aspect-ratio:1; overflow:hidden; background:var(--ash)}
.profile img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04)}
.profile figure::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 60%, var(--ash) 99%)}
.profile .name{font-size:clamp(56px, 7.5vw, 112px); line-height:.88}
.profile .role{margin-top:20px}
.profile p.bio{margin-top:20px; color:var(--bone); opacity:.88}
.profile blockquote{margin:28px 0 0; padding-top:22px; border-top:1px solid var(--iron)}
.profile blockquote p{font-size:clamp(22px, 2.2vw, 30px)}
.facts{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--iron); margin:0}
.facts div{padding:24px 20px 24px 0; border-bottom:1px solid var(--iron)}
.facts div + div{padding-left:20px; border-left:1px solid var(--iron)}
.facts dt{font:500 12px/1.4 var(--mono); letter-spacing:var(--track); text-transform:uppercase; color:var(--smoke)}
.facts dd{margin:12px 0 0; font:700 clamp(22px, 2.2vw, 30px)/1.1 var(--display)}
@media (max-width:860px){
  .profile{grid-template-columns:1fr}
  .profile:nth-child(even) figure{order:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0; border-left:0}
}

/* ── Clip filters ── */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:clamp(24px, 3vw, 36px)}
.chip{font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--smoke); background:transparent;
  border:1px solid var(--iron); padding:11px 14px; cursor:pointer}
.chip:hover{color:var(--bone); border-color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--bone); color:var(--ash); border-color:var(--bone)}

/* ── 404 ── */
.lost{padding-block:clamp(64px, 12vw, 160px) 0}
.lost h1{font-size:clamp(64px, 14vw, 200px); line-height:.86}
.lost .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:32px}
.foot-links + .foot-links{margin-top:0; border-top:0; padding-top:12px}
/* Narrow phones: logo + Subscribe + Menu don't fit; the top bar and the menu carry Subscribe there */
@media (max-width:480px){ .nav .btn{display:none} }
.cta{flex-wrap:wrap}
@media (max-width:960px){ .subband{grid-template-columns:minmax(0, 1fr)} }
@media (max-width:480px){
  .subband{padding:24px 20px}
  .cta{padding:18px 16px; letter-spacing:.1em}
  .cta--primary{padding-block:22px}
}
.site-header .mnav .wrap{display:block; height:auto; padding-block:4px 12px}

/* ── The Reckoning Presents: the short-film series ──
   Home: one feature (latest released film) + a numbered strip of every film.
   /presents/: a screening room (player + notes) above the program, in series order.
   Films show a title card in the brand style until a still is supplied; nothing loads
   from YouTube until play. */
.face-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05)}
.face-card{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6em;
  background:radial-gradient(ellipse at center, #22201c, var(--ash) 75%); overflow:hidden; text-align:center; padding:8%; container-type:inline-size}
.face-ring{position:absolute; width:58cqi; aspect-ratio:1; border:max(2px, .9cqi) solid var(--iron); border-radius:50%; left:50%; top:50%; transform:translate(-50%, -50%)}
.face-pre{position:relative; font:500 max(7px, 2.6cqi)/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--smoke)}
.face-title{position:relative; font:700 max(13px, 8.4cqi)/.95 var(--display); text-transform:uppercase; letter-spacing:.01em; color:var(--bone); text-wrap:balance}

.screen{position:relative; width:100%; aspect-ratio:16/9; background:var(--ash); border:1px solid var(--iron); overflow:hidden}
.screen iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.screen-play{position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; color:var(--bone)}
.screen-play::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(14,13,12,.55))}
.play-cue{position:relative; display:inline-flex; align-items:center; gap:12px; margin-top:auto; margin-bottom:7%;
  font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase; padding:14px 18px; border:1px solid var(--bone); background:rgba(14,13,12,.6); transition:background .2s, color .2s}
.play-cue i{width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor}
.screen-play:hover .play-cue, .screen-play:focus-visible .play-cue{background:var(--bone); color:var(--ash)}
.screen-soon{position:absolute; left:50%; bottom:7%; transform:translateX(-50%); padding:10px 14px; border:1px dashed var(--smoke); background:rgba(14,13,12,.6); white-space:nowrap}

/* Home band */
.pb-feature{display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:center}
.pb-copy .display{margin-top:14px; font-size:clamp(36px, 4.6vw, 64px)}
.pb-copy .pull{margin-top:16px; font-size:clamp(19px, 1.8vw, 24px); max-width:34ch}
.pb-meta{margin-top:18px}
.pb-copy .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.pb-strip{list-style:none; margin:clamp(28px, 4vw, 44px) 0 0; padding:20px 0 0; border-top:1px solid var(--iron);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:clamp(14px, 2vw, 24px)}
.pb-item{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:baseline; text-decoration:none; color:inherit}
.pb-face{grid-column:1 / -1; position:relative; aspect-ratio:16/9; border:1px solid var(--iron); overflow:hidden; margin-bottom:6px; transition:border-color .2s}
.pb-title{font:700 17px/1.15 var(--display)}
.pb-item .label:last-child{grid-column:1 / -1}
.pb-item:hover .pb-face, .pb-item.is-lead .pb-face{border-color:var(--bone)}
.pb-item:hover .pb-title{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}

/* /presents/ */
.room{display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:start}
.room-notes .display{font-size:clamp(34px, 3.8vw, 56px)}
.room-notes .pull{margin-top:16px; font-size:clamp(19px, 1.7vw, 23px)}
.room-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px; padding-top:16px; border-top:1px solid var(--iron)}
.room-credit{margin-top:14px; font-size:13px; color:var(--smoke)}
.room-links{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px}
.room-links a{text-decoration:none} .room-links a:hover{color:var(--bone)}
.program{list-style:none; margin:0; padding:0}
.prog{display:grid; grid-template-columns:200px 110px minmax(0, 1fr) 120px; gap:clamp(14px, 2.4vw, 28px); align-items:center; width:100%;
  padding-block:20px; border:0; border-bottom:1px solid var(--iron); background:none; color:inherit; text-align:left; cursor:pointer; font:inherit}
.program li:first-child .prog{border-top:1px solid var(--iron)}
.prog-face{position:relative; aspect-ratio:16/9; border:1px solid var(--iron); overflow:hidden; transition:border-color .2s}
.prog-body{display:flex; flex-direction:column; gap:6px; min-width:0}
.prog-title{font:700 clamp(22px, 2.3vw, 30px)/1.08 var(--display)}
.prog-log{font-size:14px; color:var(--smoke); max-width:62ch}
.prog-len{text-align:right}
.prog:hover .prog-face, .prog[aria-current="true"] .prog-face{border-color:var(--bone)}
.prog:hover .prog-title{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px}

@media (max-width:900px){
  .pb-feature, .room{grid-template-columns:1fr}
  .prog{grid-template-columns:120px minmax(0, 1fr); gap:6px 16px}
  .prog-face{grid-row:1 / span 3}
  .prog-no, .prog-len{text-align:left}
}

/* Anything marked hidden stays hidden, even when a class sets display */
[hidden]{display:none!important}

/* ════════════════════════════════════════════════════════════════
   Episode pages (/episodes/<slug>/, built by tools/build-episodes.mjs)
   ════════════════════════════════════════════════════════════════ */
.ep-head .more{display:inline-block; margin-bottom:22px}
.ep-head h1{font-size:clamp(44px, 7vw, 104px); margin-top:14px}
.ep-head .ep-meta-line{margin:0}
.ep-head > .label:last-child{margin-top:20px; display:block}
.ep-main{display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:start; padding-top:clamp(32px, 5vw, 56px)}
.ep-player{position:relative; aspect-ratio:16 / 9; background:var(--char); border:1px solid var(--iron); overflow:hidden}
.ep-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ep-play{position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; color:var(--bone)}
.ep-play img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s}
.ep-play::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(14,13,12,.1), rgba(14,13,12,.55))}
.ep-play .play-cue{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); white-space:nowrap; z-index:1; display:inline-flex; align-items:center; gap:12px; font:500 12px/1 var(--mono); letter-spacing:var(--track); text-transform:uppercase;
  padding:16px 22px; border:1px solid var(--bone); background:rgba(14,13,12,.6); transition:background .2s, color .2s}
.ep-play .play-cue i{width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor}
.ep-play:hover .play-cue, .ep-play:focus-visible .play-cue{background:var(--bone); color:var(--ash)}
.ep-play:hover img{transform:scale(1.015)}
.ep-audio{width:100%}
.ep-side{display:flex; flex-direction:column; gap:14px}
.ep-where{list-style:none; margin:0; padding:0; border-top:1px solid var(--iron)}
.ep-where li{border-bottom:1px solid var(--iron)}
.ep-where a{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:16px; text-decoration:none}
.ep-where .pname{font:700 clamp(20px, 2vw, 26px)/1.1 var(--display)}
.ep-where .hint{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--smoke)}
.ep-where a:hover .pname{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.ep-where a:hover .hint{color:var(--bone)}
.ep-share{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.ep-share-row{display:flex; gap:8px; flex-wrap:wrap}
.ep-share-row .btn{padding:11px 14px}
.ep-share .feed-url{margin:0}
.ep-notes-body{max-width:68ch; color:var(--bone); opacity:.9; overflow-wrap:anywhere}
.ep-notes-body p, .ep-notes-body ul, .ep-notes-body ol, .ep-notes-body blockquote{margin:0 0 16px; max-width:none}
.ep-notes-body ul, .ep-notes-body ol{padding-left:20px}
.ep-notes-body a{text-underline-offset:3px}
.ep-notes-body h3, .ep-notes-body h4{font:700 22px/1.2 var(--display); margin:28px 0 12px}
.ep-chapters{list-style:none; margin:0; padding:0; border-top:1px solid var(--iron); max-width:760px}
.ep-chapters li{border-bottom:1px solid var(--iron)}
.ep-chapters a, .ep-chapters li > time{text-decoration:none}
.ep-chapters a, .ep-chapters li:not(:has(a)){display:grid; grid-template-columns:96px 1fr; gap:12px; padding-block:12px; font-size:14px}
.ep-chapters time{color:var(--smoke); font-variant-numeric:tabular-nums}
.ep-chapters a:hover span{text-decoration:underline; text-underline-offset:4px}
.ep-pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid var(--iron); padding-top:28px; margin-top:clamp(56px, 8vw, 96px)}
.ep-pager a{display:flex; flex-direction:column; gap:8px; text-decoration:none}
.ep-pager a.is-next{text-align:right; grid-column:2}
.ep-pager-title{font:700 clamp(18px, 1.8vw, 22px)/1.2 var(--display)}
.ep-pager a:hover .ep-pager-title{text-decoration:underline; text-underline-offset:5px}
@media (max-width:860px){
  .ep-main{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:560px){
  .ep-pager{grid-template-columns:1fr}
  .ep-pager a.is-next{grid-column:1; text-align:left}
}

/* ── Proof seal: shown on an episode page when the episode is in the Bitcoin-timestamped record (/proof/) ── */
.seal{margin:18px 0 0; font:400 12px/1.6 var(--mono); color:var(--smoke)}
.seal a{display:block; text-decoration:none; color:inherit}
.seal a:hover{color:var(--bone)}
.seal a:hover .seal-hash{text-decoration:underline; text-underline-offset:4px}
.seal-mark{display:inline-grid; place-items:center; width:1.6em; height:1.6em; margin-right:.6em; border:1px solid currentColor; border-radius:50%; font-size:.8em; color:var(--bone)}
.seal-hash{display:block; margin-top:2px; opacity:.8; overflow-wrap:anywhere}

/* ── Host follow links ── */
.follow-x{display:inline-block; margin-top:18px; color:var(--bone); text-decoration:none; border-bottom:1px solid var(--iron); padding-bottom:2px}
.follow-x:hover{border-color:var(--bone)}

/* ── The record pages: /ledger/ and /library/ (built by tools/build-records.py) ── */
.recs{list-style:none; margin:0; padding:0; border-top:1px solid var(--iron)}
.rec{display:grid; grid-template-columns:120px minmax(0, 1fr) 190px; gap:clamp(16px, 3vw, 40px); padding:clamp(22px, 3vw, 32px) 0; border-bottom:1px solid var(--iron); scroll-margin-top:calc(var(--header-h) + 24px)}
.rec--corr, .rec--changed, .rec--book{grid-template-columns:120px minmax(0, 1fr)}
.rec-id{padding-top:6px; font-variant-numeric:tabular-nums}
.rec-title{margin:0; font:700 clamp(21px, 2.1vw, 28px)/1.15 var(--display); text-wrap:balance}
.rec-quote{margin:12px 0 0; font:italic 400 clamp(17px, 1.6vw, 21px)/1.35 var(--display); color:var(--bone); opacity:.88}
.rec-meta{margin:14px 0 0}
.rec-meta a, .rec-note a, .rec-src a{color:var(--bone); text-decoration:none; border-bottom:1px solid var(--iron)}
.rec-meta a:hover, .rec-note a:hover, .rec-src a:hover{border-color:var(--bone)}
.rec-note, .rec-record, .rec-from, .rec-to{margin:12px 0 0; font-size:14px; color:var(--smoke)}
.rec-record, .rec-to{color:var(--bone); opacity:.9}
.rec-record .label, .rec-from .label, .rec-to .label{margin-right:10px}
.rec-from{margin-top:0}
.rec-sub{margin:10px 0 0}
.rec-side{display:flex; flex-direction:column; gap:10px; padding-top:6px; text-align:right}
.rec-status{color:var(--bone)}
.rec-status--missed, .rec-status--held{border:1px solid var(--iron); padding:4px 8px; align-self:flex-end}
.counter-notes{margin-top:clamp(28px, 4vw, 44px)}
.counter-notes .body p + p{margin-top:12px}
@media (max-width:760px){
  .rec, .rec--corr, .rec--changed, .rec--book{grid-template-columns:minmax(0, 1fr); gap:10px}
  .rec-side{flex-direction:row; flex-wrap:wrap; gap:16px; text-align:left; padding-top:4px}
  .rec-status--missed, .rec-status--held{align-self:auto}
}

/* ── Home: on the record ── */
.record-band{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 6vw, 96px); align-items:end}
.record-band .display{font-size:clamp(44px, 7vw, 104px)}
.record-band .pull{font-size:clamp(20px, 2.2vw, 30px); margin:0 0 18px}
@media (max-width:860px){ .record-band{grid-template-columns:minmax(0, 1fr)} }

/* Long one-word lines in page titles ("abundance?") must fit a 390px phone */
@media (max-width:420px){ .page-head h1{font-size:clamp(44px, 13vw, 56px)} }

/* ── Loading state: episode lists and the latest card while the episode list loads ── */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sk{display:block; background:var(--iron); opacity:.55; animation:sk-pulse 1.4s ease-in-out infinite}
@keyframes sk-pulse{50%{opacity:.25}}
.sk-wrap{display:grid; gap:18px}
.sk--meta{width:220px; max-width:60%; height:12px}
.sk--title{width:70%; height:clamp(40px, 5.4vw, 76px); margin-top:8px}
.sk--line{width:100%; max-width:560px; height:12px}
.sk--short{width:55%}
.sk--num{width:56px; height:13px}
.sk--h{width:70%; height:clamp(22px, 2.4vw, 32px)}
.ep--loading{border-bottom:1px solid var(--iron); align-items:start}
.eps li.ep--loading:first-child{border-top:1px solid var(--iron)}
.ep--loading .body{display:grid; gap:12px}
.ep--loading .sk--line{max-width:none; width:85%}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} }