/* PSYOP'ER — Dust and Sodium.
   The film's five values are the site's five values. This is deliberately not
   the house ivory/black/gold system: the palette is the reconstruction brief's,
   because the site and the cut have to read as one thing. */

:root{
  --night:#1A1712;
  --night-2:#221E18;
  --night-3:#2A251E;
  --rule:#3B342A;
  --rule-lit:#544A3B;
  --dust:#CFC5B1;
  --dust-dim:#B3AA97;      /* raised twice from the brief's #8E8676: the glyph-pixel gate measured
                              10.5px nav links at 4.2:1 on the darker value */
  --sodium:#E8A33D;
  --signal:#7FC4C0;        /* raised from #6BAFAB for the same reason */
  --wound:#C0453D;
  --paper:#F2ECE0;
  --measure:36rem;
  --gut:1.5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--night);color:var(--dust);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{font-family:"Saira Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1.05}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Courier New",monospace;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
a{color:var(--sodium);text-underline-offset:.22em}
a:hover{color:var(--paper)}
img,video{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}

/* two-tone focus ring: visible on both the night ground and the paper panels */
:focus-visible{outline:3px solid var(--sodium);outline-offset:2px;box-shadow:0 0 0 6px rgba(26,23,18,.9)}

.wrap{max-width:66rem;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:44rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--sodium);color:var(--night);padding:.75rem 1.25rem;z-index:100;font-family:"IBM Plex Mono",monospace}
.skip:focus{left:0}

/* ── masthead ─────────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule);background:var(--night);position:relative;z-index:20}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;padding-top:.9rem;padding-bottom:.9rem}
.brand{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.brand .wm{display:inline-block}
.brand .wm i{color:var(--sodium);font-style:normal;letter-spacing:0;margin:0 -.06em}
.brand .horn{width:22px;height:22px;flex:0 0 auto}
nav.main{display:flex;flex-wrap:wrap;gap:.15rem .35rem;margin-left:auto}
nav.main a{font-family:"IBM Plex Mono",monospace;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust-dim);text-decoration:none;padding:.45rem .55rem;border:1px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--paper);border-color:var(--rule)}
nav.main a[aria-current="page"]{color:var(--sodium);border-color:var(--rule-lit)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media video{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,23,18,.48),rgba(26,23,18,.72) 46%,rgba(26,23,18,.94) 88%,var(--night))}
.hero .wrap{position:relative;z-index:2;padding-top:5.5rem;padding-bottom:3.5rem}
.hero.tall .wrap{padding-top:8rem;padding-bottom:5rem}
.title{font-size:clamp(3.1rem,14vw,9.5rem);font-weight:800;line-height:.84;color:var(--paper)}
.title span{color:var(--sodium)}
.sub{max-width:32rem;margin-top:1.35rem;font-size:clamp(1.1rem,3.4vw,1.4rem);line-height:1.4;font-weight:300;color:var(--paper)}
.byline{margin-top:2.25rem;color:var(--dust-dim);border-top:1px solid var(--rule-lit);padding-top:.9rem;
  display:flex;flex-wrap:wrap;gap:.35rem 1.75rem}
.page-title{font-size:clamp(2.3rem,7.5vw,4.4rem);font-weight:800;color:var(--paper)}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding:4.5rem 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.eyebrow{color:var(--dust-dim);display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;margin-bottom:1.5rem}
.eyebrow b{color:var(--sodium);font-weight:500}
.lede{max-width:var(--measure);font-size:1.2rem;line-height:1.55;font-weight:300;color:var(--paper)}
.body{max-width:var(--measure)}
.body p{margin:0 0 1.1rem}
h2.sec{font-size:clamp(1.7rem,5vw,2.6rem);color:var(--paper);margin-bottom:1rem}
h3.sub{font-size:1.25rem;color:var(--paper);margin:2.25rem 0 .6rem}

/* ── grids and cards ──────────────────────────────────────────────────── */
/* Flex, not `grid-template-columns:repeat(auto-fit,minmax())`.
   auto-fit keeps every track the same width, so a set of four cards in a
   three-up row leaves the fourth alone beside a dead half-width box — which is
   what it did. With `flex:1 1 <basis>` the items on the last row grow to share
   whatever width is left, so a lone card spans the full row and the block is
   always a clean rectangle. `min-width:0` keeps a long unbroken word from
   forcing a cell wider than its share. */
.grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2rem}
.grid>*{flex:1 1 var(--basis,15rem);min-width:0}
.grid.two{--basis:17rem}
.grid.three{--basis:15rem}
.grid.four{--basis:12.5rem}
.cell{background:var(--night);padding:1.6rem 1.4rem}
.cell h3{font-size:1.2rem;color:var(--paper);margin-bottom:.5rem}
.cell p{margin:0 0 .75rem;font-size:.97rem}
.cell p:last-child{margin-bottom:0}
.cell .n{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-size:2.6rem;color:var(--sodium);line-height:1;opacity:.75}
.cell .from{color:var(--dust-dim);display:block;margin-top:.75rem}
.cell .yr{color:var(--sodium);margin:.3rem 0 .7rem}
.tick{width:2.5rem;height:2px;background:var(--sodium);margin:.75rem 0 .9rem}

/* ── tables ───────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:1.75rem;border:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sodium);background:var(--night-2);border-bottom:1px solid var(--rule-lit)}
tbody tr:last-child td{border-bottom:0}
td code,.code{font-family:"IBM Plex Mono",monospace;font-size:.82em;color:var(--signal);word-break:break-word}

/* ── notes, rules, callouts ───────────────────────────────────────────── */
.note{border-left:3px solid var(--sodium);background:var(--night-2);padding:1.25rem 1.4rem;margin:2rem 0;max-width:46rem}
.note b{color:var(--paper);display:block;margin-bottom:.4rem;font-family:"Saira Condensed","Arial Narrow",sans-serif;
  text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem}
.note.hard{border-left-color:var(--wound)}
.note.cool{border-left-color:var(--signal)}
.rules{counter-reset:r;list-style:none;padding:0;margin:2rem 0;max-width:46rem}
.rules li{counter-increment:r;position:relative;padding:1.1rem 0 1.1rem 3.25rem;border-top:1px solid var(--rule)}
.rules li::before{content:counter(r);position:absolute;left:0;top:.85rem;font-family:"Saira Condensed","Arial Narrow",sans-serif;
  font-size:1.6rem;color:var(--sodium)}
.checklist{list-style:none;padding:0;margin:1.25rem 0;max-width:46rem}
.checklist li{position:relative;padding:.7rem 0 .7rem 2.1rem;border-top:1px solid var(--rule);font-size:.98rem}
.checklist li::before{content:"";position:absolute;left:0;top:1.05rem;width:.85rem;height:.85rem;border:1px solid var(--sodium)}

/* ── register tags ────────────────────────────────────────────────────── */
.reg{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;padding:.2rem .45rem;
  border:1px solid currentColor;white-space:nowrap;text-transform:uppercase}
.reg-X{color:var(--sodium)}
.reg-R{color:var(--signal)}
.reg-T{color:var(--paper)}
.reg-C{color:var(--dust-dim)}

/* ── film ─────────────────────────────────────────────────────────────── */
.player{background:#000;border:1px solid var(--rule-lit);margin-top:1.75rem}
.player video{width:100%;height:auto;background:#000;display:block}
.filmmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;padding:.9rem 1.1rem;background:var(--night-2);
  border-top:1px solid var(--rule);color:var(--dust-dim)}
.transcript{margin-top:1.5rem;border:1px solid var(--rule)}
.transcript summary{padding:.95rem 1.1rem;cursor:pointer;background:var(--night-2);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.transcript summary:hover{color:var(--sodium)}
.tlist{max-height:32rem;overflow-y:auto;padding:.5rem 0}
.trow{display:grid;grid-template-columns:4.5rem 6.5rem 1fr;gap:1rem;padding:.6rem 1.1rem;border-top:1px solid var(--rule);font-size:.93rem}
.trow:first-child{border-top:0}
.trow .at{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--dust-dim);padding-top:.2rem}
.trow .who{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sodium);padding-top:.25rem}
.trow .said{color:var(--dust)}
.trow.slotrow .said{color:var(--signal)}

/* ── shot list ────────────────────────────────────────────────────────── */
/* flex for the same reason as .grid — `auto-fill` keeps the empty tracks, so the
   last card of a group sat alone with 688px of dead space beside it */
.shots{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}
.shots>*{flex:1 1 19rem;min-width:0}
.shot{border:1px solid var(--rule);background:var(--night-2)}
.shot img{width:100%;aspect-ratio:2.39/1;object-fit:cover;border-bottom:1px solid var(--rule)}
.shot .meta{padding:1rem 1.1rem}
.shot .id{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.6rem}
.shot .id b{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-size:1.35rem;color:var(--sodium);font-weight:700}
.shot p{margin:0;font-size:.9rem;color:var(--dust)}
.shot .n{margin-top:.7rem;font-size:.85rem;color:var(--dust-dim);font-style:italic}

/* ── palette ──────────────────────────────────────────────────────────── */
.swatches{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:2rem}
.swatches>*{flex:1 1 9rem;min-width:0}
.sw{background:var(--night);padding:0}
.sw .chip{height:5.5rem}
.sw .lab{padding:.85rem 1rem}
.sw .lab b{display:block;font-family:"Saira Condensed","Arial Narrow",sans-serif;text-transform:uppercase;
  color:var(--paper);font-size:1.05rem}
.chip-night{background:#1A1712;border-bottom:1px solid var(--rule)}
.chip-dust{background:#CFC5B1}
.chip-sodium{background:#E8A33D}
.chip-signal{background:#6BAFAB}
.chip-wound{background:#8C2B25}

/* ── the broadcast console ────────────────────────────────────────────── */
.console{margin-top:2.5rem;background:var(--night-2);border:1px solid var(--rule);border-top:3px solid var(--sodium)}
.console-head{padding:1.1rem 1.35rem;border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;
  gap:.6rem 1.25rem;justify-content:space-between;align-items:center;color:var(--dust-dim)}
.situation{padding:1.35rem;border-bottom:1px solid var(--rule)}
.situation p{margin:.4rem 0 0;max-width:var(--measure)}
.modes{display:flex;flex-wrap:wrap;gap:.55rem;padding:1.15rem 1.35rem 0}
.mode{flex:1 1 13rem;background:transparent;border:1px solid var(--rule);color:var(--dust-dim);
  padding:.8rem .95rem;text-align:left;cursor:pointer;font-family:"Saira Condensed","Arial Narrow",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem}
.mode small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.11em;
  margin-top:.3rem;text-transform:none;letter-spacing:.08em}
.mode:hover{color:var(--paper);border-color:var(--rule-lit)}
.mode[aria-pressed="true"]{color:var(--night);background:var(--sodium);border-color:var(--sodium)}
.mode.bad[aria-pressed="true"]{background:var(--wound);border-color:var(--wound);color:var(--paper)}
.sheet{margin:1.35rem;background:var(--night);border:1px solid var(--rule);padding:1.35rem}
.slug{color:var(--dust-dim);border-bottom:1px solid var(--rule);padding-bottom:.7rem;margin-bottom:1.1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase}
.line{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-size:clamp(1.15rem,3.6vw,1.6rem);
  color:var(--paper);text-transform:uppercase;letter-spacing:.01em;opacity:0;transform:translateY(.35rem);
  transition:opacity .34s ease,transform .34s ease;margin:.15rem 0}
.line.on{opacity:1;transform:none}
.verdict{margin:0 1.35rem;padding:1.15rem 1.25rem;border-left:3px solid var(--sodium);background:var(--night);
  min-height:1rem;font-size:.98rem}
.verdict.bad{border-left-color:var(--wound)}
.verdict:empty{padding:0;border-left-width:0}
.transmit{margin:1.35rem;padding:.85rem 1.6rem;background:transparent;border:1px solid var(--sodium);
  color:var(--sodium);font-family:"Saira Condensed","Arial Narrow",sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;cursor:pointer}
.transmit:hover{background:var(--sodium);color:var(--night)}

/* ── manuscript reader ────────────────────────────────────────────────── */
.reader{display:grid;grid-template-columns:17rem 1fr;gap:0;border-top:1px solid var(--rule);min-height:70vh}
.toc{border-right:1px solid var(--rule);background:var(--night-2);padding:1.25rem 0;position:sticky;top:0;
  align-self:start;max-height:100vh;overflow-y:auto}
.toc .part{padding:1.25rem 1.25rem .4rem;color:var(--sodium);font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.toc button{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  color:var(--dust);padding:.5rem 1.25rem;cursor:pointer;font-family:inherit;font-size:.95rem;line-height:1.3}
.toc button:hover{color:var(--paper);background:var(--night-3)}
.toc button[aria-current="true"]{color:var(--sodium);border-left-color:var(--sodium);background:var(--night-3)}
.toc button .w{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--dust-dim);letter-spacing:.08em}
.chapter{padding:2.5rem 2rem 5rem;max-width:46rem}
.chapter h2{font-size:clamp(1.8rem,5vw,2.8rem);color:var(--paper);margin-bottom:.4rem}
.chapter .chmeta{color:var(--dust-dim);margin-bottom:2rem;display:flex;gap:1.25rem;flex-wrap:wrap}
.chapter p{margin:0 0 1.25rem;font-size:1.06rem;line-height:1.75}
.chapter p.q{padding-left:1.5rem;border-left:2px solid var(--rule-lit);color:var(--dust-dim);font-style:italic}
.chapter p.mark{background:var(--night-3);box-shadow:0 0 0 .5rem var(--night-3);border-radius:2px}
.gl{border-bottom:1px dotted var(--sodium);color:inherit;cursor:help;text-decoration:none}
.readbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--rule);
  background:var(--night-2);position:sticky;top:0;z-index:10}
.readbar input[type=search]{flex:1 1 12rem;min-width:0;background:var(--night);border:1px solid var(--rule);
  color:var(--paper);padding:.55rem .75rem;font-family:inherit;font-size:.95rem}
.readbar button{background:transparent;border:1px solid var(--rule);color:var(--dust-dim);padding:.5rem .8rem;
  cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.readbar button:hover,.readbar button[aria-pressed=true]{color:var(--sodium);border-color:var(--sodium)}
.hits{border:1px solid var(--rule);margin:1.25rem 2rem;max-height:24rem;overflow-y:auto}
.hit{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);
  color:var(--dust);padding:.85rem 1.1rem;cursor:pointer;font-family:inherit;font-size:.92rem}
.hit:hover{background:var(--night-3);color:var(--paper)}
.hit b{color:var(--sodium);font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;display:block;margin-bottom:.25rem}
.hit mark{background:rgba(232,163,61,.28);color:var(--paper)}

/* ── glossary ─────────────────────────────────────────────────────────── */
.terms{columns:2 19rem;column-gap:2.5rem;margin-top:2rem}
.term{break-inside:avoid;margin-bottom:1.35rem}
.term b{display:block;font-family:"Saira Condensed","Arial Narrow",sans-serif;text-transform:uppercase;
  color:var(--sodium);font-size:1.1rem;letter-spacing:.02em}
.term span{font-size:.94rem}

/* ── form ─────────────────────────────────────────────────────────────── */
form.join{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;max-width:34rem}
form.join label{flex:1 0 100%;color:var(--dust-dim)}
form.join input{flex:1 1 14rem;min-width:0;background:var(--night-2);border:1px solid var(--rule);
  color:var(--paper);padding:.75rem .9rem;font-family:inherit;font-size:1rem}
form.join button{background:transparent;border:1px solid var(--sodium);color:var(--sodium);padding:.75rem 1.4rem;
  cursor:pointer;font-family:"Saira Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem}
form.join button:hover{background:var(--sodium);color:var(--night)}
.formnote{color:var(--dust-dim);margin-top:.75rem;font-size:.92rem}
.formnote.ok{color:var(--signal)}
.formnote.err{color:var(--wound)}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:3.5rem 0 4rem;margin-top:2rem;background:var(--night-2)}
.ded{max-width:40rem;font-size:1.08rem;line-height:1.6;color:var(--dust);margin:0 0 2rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-bottom:1.75rem}
.foot-nav a{font-family:"IBM Plex Mono",monospace;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust-dim);text-decoration:none}
.foot-nav a:hover{color:var(--sodium)}
.colophon{color:var(--dust-dim);line-height:1.9}

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .line{opacity:1;transform:none}
}

/* ── forced colours / high contrast ───────────────────────────────────── */
@media (forced-colors:active){
  .chip-night,.chip-dust,.chip-sodium,.chip-signal,.chip-wound{forced-color-adjust:none}
  .mode[aria-pressed="true"]{border:3px solid}
  .tick,.hero::after{display:none}
}

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .reader{grid-template-columns:1fr}
  .toc{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--rule)}
  .chapter{padding:2rem 1.25rem 4rem}
  .hits{margin:1.25rem}
}
@media (max-width:640px){
  :root{--gut:1.15rem}
  .site-head .wrap{padding-top:.7rem;padding-bottom:.7rem}
  nav.main{margin-left:0;flex:1 0 100%;gap:.1rem .2rem}
  nav.main a{padding:.4rem .4rem;font-size:.6rem}
  /* An eleventh section pushed this to three rows and a 161px header before the
     page had said anything. Tighter tracking and a smaller face put it back to two. */
  nav.main a{font-size:.55rem;letter-spacing:.06em;padding:.35rem .3rem}
  .hero .wrap{padding-top:3.5rem;padding-bottom:2.5rem}
  .hero.tall .wrap{padding-top:4.5rem;padding-bottom:3rem}
  section{padding:3.25rem 0}
  .trow{grid-template-columns:1fr;gap:.2rem}
  .terms{columns:1}
  .console-head,.situation,.modes,.sheet,.verdict,.transmit{margin-left:0;margin-right:0}
  .sheet,.verdict{margin:1rem}
  .transmit{margin:1rem;width:calc(100% - 2rem)}
}

/* ═══ READ ALOUD ══════════════════════════════════════════════════════════════
   Signal stays reserved for Mo's material and nothing else — the same rule the
   films run on, keyed off the speaking voice rather than off the register. */

.declare[hidden]{display:none}   /* ⚠ `hidden` is display:none at UA weight and loses
                                    to the display:flex below. Without this line the
                                    label is on screen before any audio has played,
                                    naming a voice that is not speaking. */
.declare{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.7rem;
  padding:.7rem var(--gut);background:var(--night-3);border-bottom:1px solid var(--rule-lit);
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.45;color:var(--dust)}
.declare b{color:var(--sodium);font-weight:500}
.declare[data-voice="MO"] b{color:var(--signal)}
.declare .dot{flex:0 0 auto;align-self:center;width:.55rem;height:.55rem;border-radius:50%;background:var(--wound);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.declare .dot{animation:none}}

.player{background:var(--night-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.5rem 0 1.7rem;position:sticky;bottom:0;z-index:25}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.p-head h2{font-size:clamp(1.3rem,4vw,1.9rem);color:var(--paper);margin:.15rem 0 .5rem}
.p-head .mono{color:var(--dust-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.p-time{color:var(--dust);font-size:.9rem;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.vchip{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.04em;
  border:1px solid var(--rule-lit);color:var(--dust-dim);padding:.18rem .45rem}
.vchip[data-v="MO"]{color:var(--signal);border-color:var(--signal)}
.vchip[data-v="BOONE"]{color:var(--sodium);border-color:var(--sodium)}

.p-bar{margin:1.1rem 0 .9rem;height:.65rem;background:var(--night-3);border:1px solid var(--rule);
  cursor:pointer;position:relative}
.p-bar:focus-visible{outline:3px solid var(--sodium);outline-offset:3px}
.p-bar span{display:block;height:100%;width:0;background:var(--sodium)}
.p-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.p-controls.second{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--rule)}
.p-controls button{font-family:"IBM Plex Mono",monospace;font-size:.82rem;background:var(--night-3);
  color:var(--dust);border:1px solid var(--rule-lit);padding:.5rem .8rem;cursor:pointer}
.p-controls button:hover{color:var(--paper);border-color:var(--sodium)}
.p-controls button.primary{background:var(--sodium);color:var(--night);border-color:var(--sodium);
  font-weight:500;min-width:5.5rem}
.p-controls button.primary:hover{background:var(--paper)}
.p-opt,.p-check{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--dust-dim);
  display:flex;align-items:center;gap:.4rem}
.p-opt select,.p-opt input[type=range]{background:var(--night-3);color:var(--dust);
  border:1px solid var(--rule-lit);padding:.3rem;font-family:inherit;font-size:.75rem}
.p-opt.wide input[type=range]{width:7rem;padding:0}
.p-check input{accent-color:var(--sodium);width:1rem;height:1rem}
/* The level slider shipped in the browser's default blue, which is the one
   colour this site does not own. */
.p-opt input[type=range]{accent-color:var(--sodium);height:1.1rem}
.p-controls .note{font-size:.68rem;color:var(--dust-dim)}

.cast{display:flex;flex-direction:column;gap:.1rem;margin-top:1.2rem}
.cast-row{display:grid;grid-template-columns:minmax(11rem,1fr) 9rem minmax(0,2fr);gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--rule);align-items:baseline}
.cast-row b{color:var(--paper);font-family:"Saira Condensed",sans-serif;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em}
.cast-row .mono{color:var(--dust-dim);font-size:.75rem}
.cast-row span:last-child{color:var(--dust);font-size:.92rem;font-weight:300}

.listen-grid{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:2rem;
  max-width:74rem;margin:2.5rem auto 3rem;padding:0 var(--gut);align-items:start}
.chaplist{position:sticky;top:3.5rem;max-height:calc(100vh - 5rem);overflow:auto}
.cpart{margin-bottom:1.4rem}
.cpart>.mono{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dust-dim);
  padding-bottom:.4rem;border-bottom:1px solid var(--rule);margin-bottom:.3rem}
.chap{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;width:100%;text-align:left;
  background:none;border:none;border-left:2px solid transparent;padding:.5rem .6rem;cursor:pointer;color:var(--dust)}
.chap:hover{background:var(--night-2);color:var(--paper)}
.chap[aria-current=true]{border-left-color:var(--sodium);background:var(--night-2);color:var(--paper)}
.chap .ct{font-size:.92rem;line-height:1.25}
.chap .cm{font-size:.72rem;color:var(--dust-dim);text-align:right}
.chap .cv{grid-column:1/-1;font-size:.66rem;color:var(--dust-dim)}

.ltext{max-width:var(--measure);font-size:1.12rem;line-height:1.7;font-weight:300;color:var(--dust)}
.ltext .lp{margin:0 0 1.15rem;padding:.3rem .7rem;border-left:2px solid transparent;transition:background .2s}
.ltext .lp[data-t]{cursor:pointer}
.ltext .lp[data-t]:hover{background:var(--night-2)}
.ltext .lp:focus-visible{outline:3px solid var(--sodium);outline-offset:2px}
.ltext .lp.q{border-left-color:var(--rule-lit);font-style:italic;color:var(--dust-dim)}
.ltext .lp.on{background:var(--night-2);color:var(--paper);border-left-color:var(--sodium)}
.ltext .lp.on[data-v="MO"]{border-left-color:var(--signal)}
.ltext .lp.unread{opacity:.5}
@media (prefers-reduced-motion:reduce){.ltext .lp{transition:none}}

@media (max-width:820px){
  .listen-grid{grid-template-columns:1fr;gap:1.2rem}
  .chaplist{position:static;max-height:22rem;border:1px solid var(--rule);padding:.8rem}
  .cast-row{grid-template-columns:1fr;gap:.15rem}
  .player{position:static}
  .p-controls{gap:.45rem}
  .p-controls button{padding:.55rem .7rem}
}

/* Each part of the book gets its own empty room, moving. The still carries it
   when the loop is refused — iOS low-power, reduced motion, a slow line. */
.cpart-band{position:relative;overflow:hidden;height:5.5rem;margin-bottom:.35rem;
  border:1px solid var(--rule);display:flex;align-items:flex-end}
.cpart-band img,.cpart-band video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.75) brightness(.62)}
.cpart-band video{opacity:0;transition:opacity .9s ease}
.cpart-band video.on{opacity:1}
.cpart-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,23,18,.15),rgba(26,23,18,.86))}
.cpart-band p{position:relative;z-index:2;margin:0;padding:.5rem .65rem;border:0;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--paper)}
.cpart>.cpart-band+.chap{margin-top:.2rem}
@media (prefers-reduced-motion:reduce){.cpart-band video{display:none}}