/* ============================================================
   FOLLOW THE MONEY — Canada's Missing Accountability Machine
   Design system: ATN broadcast package (Succession).
   Hard red, network navy, gold hairline. No rounded corners.
   Contrast comes from lit surfaces and full-screen graphic
   cards, never from the dark alone.
   ============================================================ */

:root{
  /* studio */
  --navy-900:#050c16;
  --navy-800:#0d1b2e;
  --navy-700:#152740;
  --navy-600:#1d3251;
  --line:#2b4463;
  --line-soft:#1c3049;
  /* brand */
  --red:#c8102e;
  --red-lit:#e6273f;
  --red-wash:#2a0c14;
  --gold:#c9a227;
  --gold-lit:#e8c556;
  /* graphic card */
  --white:#f2f2f0;
  --card:#ffffff;
  --card-2:#e8e8e4;
  --ink:#0d1b2e;
  --ink-2:#3b4c62;
  --ink-3:#6d7d92;
  --rule:#cfd3d8;

  --chyron:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:36rem;
  --wide:min(76rem,100% - 2.25rem);
  --mid:min(58rem,100% - 2.25rem);
  --narrow:min(42rem,100% - 2.25rem);
  --bar:52px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}}

body{
  margin:0;background:var(--navy-900);color:var(--white);
  font-family:var(--serif);font-size:clamp(1.02rem,.97rem + .32vw,1.14rem);line-height:1.62;
  font-optical-sizing:auto;overflow-x:hidden}

h1,h2,h3,h4{margin:0;font-family:var(--chyron);font-weight:700;line-height:.95;
  letter-spacing:.005em;text-transform:uppercase}
p{margin:0 0 1.05em}
a{color:var(--gold-lit);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold-lit);outline-offset:2px}
::selection{background:var(--red);color:#fff}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:.7rem 1rem;
  font-family:var(--mono);font-size:.78rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* ============================================================
   BROADCAST CHROME — breaking bar, ticker, chapter rundown
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--bar);display:flex;align-items:stretch;
  background:var(--navy-800);border-bottom:2px solid var(--gold);
  box-shadow:0 10px 30px -18px #000}
.topbar .netid{
  display:flex;align-items:center;gap:.55rem;background:var(--red);color:#fff;
  padding:0 .85rem;text-decoration:none;font-family:var(--chyron);font-weight:700;
  font-size:1.35rem;letter-spacing:.06em;line-height:1}
.topbar .netid small{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;line-height:1.15;
  opacity:.85;font-weight:400;text-align:left}
.topbar .live{display:flex;align-items:center;gap:.45rem;padding:0 .8rem;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.2em;color:#fff;border-right:1px solid var(--line)}
.topbar .live i{width:.5rem;height:.5rem;background:var(--red-lit);display:block;
  animation:tally 1.8s ease-in-out infinite;box-shadow:0 0 10px var(--red-lit)}
@keyframes tally{0%,100%{opacity:1}50%{opacity:.25}}
.topbar .slug{flex:1;display:flex;align-items:center;overflow:hidden;padding:0 .85rem;
  font-family:var(--chyron);font-weight:600;font-size:clamp(.85rem,.7rem + .6vw,1.15rem);
  letter-spacing:.04em;color:var(--white);white-space:nowrap;text-overflow:ellipsis}
.topbar .rundown-btn{
  background:var(--navy-700);color:#fff;border:0;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;padding:0 .9rem;cursor:pointer;
  display:flex;align-items:center;gap:.5rem}
.topbar .rundown-btn:hover{background:var(--red)}
.progress{position:absolute;left:0;bottom:-2px;height:2px;background:var(--red-lit);width:0;z-index:2}

/* ticker crawl */
.crawl{position:relative;overflow:hidden;background:var(--navy-800);border-block:1px solid var(--line);
  height:2.15rem;display:flex;align-items:center}
.crawl .label{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;background:var(--red);
  color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;padding:0 .7rem;z-index:2}
.crawl .track{display:flex;padding-left:1.15rem;white-space:nowrap;animation:crawl 46s linear infinite;will-change:transform}
.crawl:hover .track{animation-play-state:paused}
.crawl .track span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#b9c6d6;
  padding:0 1.15rem}
.crawl .track span::after{content:"◆";color:var(--gold);padding-left:1.15rem;font-size:.55rem;
  vertical-align:.15em}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* rundown drawer */
.rundown{position:fixed;inset:0 0 0 auto;width:min(23rem,90vw);z-index:80;background:var(--navy-800);
  border-left:2px solid var(--gold);padding:1.1rem 1.1rem 2rem;overflow:auto;
  box-shadow:-30px 0 70px -30px #000}
.rundown[hidden]{display:none}
.rundown h2{font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;color:var(--gold);
  font-weight:400;margin-bottom:.9rem;text-transform:uppercase}
.rundown ol{list-style:none;margin:0;padding:0}
.rundown li{border-top:1px solid var(--line-soft)}
.rundown a{display:grid;grid-template-columns:2.3rem 1fr;gap:.6rem;padding:.55rem .2rem;
  text-decoration:none;color:var(--white);font-family:var(--chyron);font-weight:500;
  font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
.rundown a:hover{background:var(--red);color:#fff}
.rundown a b{font-family:var(--mono);font-weight:400;font-size:.62rem;color:var(--gold);
  letter-spacing:.06em;padding-top:.2rem}
.rundown-close{position:absolute;top:.7rem;right:.85rem;background:none;border:0;color:#8fa2b8;
  font-size:1.6rem;line-height:1;cursor:pointer}
.scrim{position:fixed;inset:0;background:rgba(5,12,22,.72);z-index:70}
.scrim[hidden]{display:none}

/* ============================================================
   BANDS + LAYOUT
   ============================================================ */
main{display:block}
section{padding-block:clamp(2.5rem,5.5vw,5rem);position:relative}
.wrap{width:var(--wide);margin-inline:auto}
.wrap-mid{width:var(--mid);margin-inline:auto}
.wrap-narrow{width:var(--narrow);margin-inline:auto}
.prose{max-width:var(--measure)}
.prose.center{margin-inline:auto}

/* dark studio band (default) */
.band-studio{background:
  radial-gradient(120% 90% at 12% 0%,rgba(29,50,81,.85),transparent 62%),
  var(--navy-900);
  border-top:1px solid var(--line-soft)}
/* raised studio band */
.band-desk{background:var(--navy-800);border-block:1px solid var(--line)}
/* red alert band */
.band-alert{background:linear-gradient(180deg,var(--red-wash),var(--navy-900));
  border-top:3px solid var(--red)}
/* FULL-SCREEN GRAPHIC: light card band — the on-air fullscreen */
.band-fs{background:var(--white);color:var(--ink);border-block:3px solid var(--gold)}
.band-fs h1,.band-fs h2,.band-fs h3,.band-fs h4{color:var(--ink)}
.band-fs a{color:#8f0b21}
.band-fs .kicker{color:var(--ink-3)}
.band-fs .panel{background:var(--card);border-color:var(--rule);color:var(--ink)}
.band-fs .panel::before{background:linear-gradient(90deg,transparent,rgba(13,27,46,.16) 15%,rgba(13,27,46,.16) 85%,transparent)}

/* ============================================================
   CHYRON — the lower third that heads every section
   ============================================================ */
.chyron{margin-bottom:clamp(1.4rem,3vw,2.25rem);max-width:60rem}
.chyron .strap{display:flex;flex-wrap:wrap;align-items:stretch;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.chyron .strap b{background:var(--red);color:#fff;padding:.4rem .7rem;font-weight:600}
.chyron .strap span{background:var(--navy-700);color:#c3d0e0;padding:.4rem .8rem;
  border-left:1px solid var(--navy-900)}
.band-fs .chyron .strap span{background:var(--ink);color:#d7dee8}
.chyron h2{font-size:clamp(2.05rem,1.15rem + 4.2vw,4.4rem);letter-spacing:-.005em;line-height:.92;
  padding:.55rem 0 .5rem;text-wrap:balance}
.chyron h2 em{font-style:normal;color:var(--red-lit)}
.band-fs .chyron h2 em{color:var(--red)}
.chyron .under{border-top:3px solid var(--gold);padding-top:.55rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#a9b8c9}
.band-fs .chyron .under{color:var(--ink-3)}

.kicker{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#93a5b9;margin:0 0 .85rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";flex:0 0 1.5rem;height:3px;background:var(--gold)}
.lede{font-size:clamp(1.18rem,1.02rem + .72vw,1.5rem);line-height:1.42;color:#d3dce6}
.band-fs .lede{color:var(--ink-2)}
.mono{font-family:var(--mono)}
.tiny{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8ea0b5}
.band-fs .tiny{color:var(--ink-3)}

/* ============================================================
   PANEL — a lit broadcast surface
   ============================================================ */
.panel{position:relative;background:var(--navy-800);border:1px solid var(--line);
  padding:clamp(1.05rem,2.6vw,1.9rem);box-shadow:0 18px 40px -30px #000}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,240,250,.5) 15%,rgba(233,240,250,.5) 85%,transparent)}
.panel.red{border-left:4px solid var(--red)}
.panel.gold{border-left:4px solid var(--gold)}
.panel h3{font-size:clamp(1.15rem,1rem + .9vw,1.6rem);margin-bottom:.55rem;letter-spacing:.02em}
.panel-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem;display:block}

.cols-2{display:grid;gap:clamp(.9rem,2.2vw,1.6rem);grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.cols-3{display:grid;gap:clamp(.9rem,2.2vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ============================================================
   COLD OPEN / MASTHEAD
   ============================================================ */
.coldopen{padding-block:clamp(2.25rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem);
  background:
    radial-gradient(90% 70% at 78% 8%,rgba(200,16,46,.24),transparent 62%),
    radial-gradient(70% 60% at 8% 92%,rgba(201,162,39,.14),transparent 60%),
    linear-gradient(180deg,var(--navy-800),var(--navy-900));
  border-bottom:3px solid var(--red);overflow:hidden;position:relative}
.coldopen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.13) 3px 4px);opacity:.5}
.coldopen>*{position:relative;z-index:1}
.breaking{display:inline-flex;align-items:stretch;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:1.15rem}
.breaking b{background:var(--red);color:#fff;padding:.45rem .8rem;font-weight:600;
  animation:pulse 2.4s ease-in-out infinite}
.breaking span{background:var(--navy-700);color:#cdd9e6;padding:.45rem .8rem;border:1px solid var(--line);
  border-left:0}
@keyframes pulse{0%,100%{background:var(--red)}50%{background:var(--red-lit)}}
.coldopen h1{font-size:clamp(3.1rem,1rem + 12.5vw,9rem);line-height:.84;letter-spacing:-.012em;
  text-wrap:balance}
.coldopen h1 .money{color:var(--red-lit);display:block}
.coldopen h1 .rule{display:block;height:5px;background:var(--gold);width:min(100%,22rem);margin:.6rem 0}
.coldopen .subhead{font-family:var(--chyron);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.05rem,.85rem + 1.5vw,2rem);letter-spacing:.05em;color:#cfdae7;line-height:1.1;
  max-width:34rem}
.coldopen .deck{margin-top:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr))}
.coldopen .deck p:last-child{margin-bottom:0}
.thesis{font-family:var(--chyron);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.3rem,1rem + 1.6vw,2.15rem);line-height:1.06;color:var(--gold-lit)}

/* ============================================================
   FRAGMENT GRID — "each fragment is public, none of them join"
   ============================================================ */
.fragments{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));
  margin-top:1.6rem;padding:0;list-style:none}
.fragments li{background:var(--navy-800);border:1px solid var(--line);border-top:3px solid var(--line);
  padding:.75rem .7rem 1.5rem;position:relative;min-height:6rem;display:flex;flex-direction:column;gap:.3rem}
.band-fs .fragments li{background:var(--card);border-color:var(--rule);border-top-color:var(--rule)}
.fragments li b{font-family:var(--chyron);font-weight:600;font-size:1.02rem;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.05}
.fragments li i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  color:var(--ink-3);line-height:1.35}
.band-studio .fragments li i,.band-desk .fragments li i{color:#8497ad}
.fragments li::after{content:"NOT JOINED";position:absolute;left:.7rem;bottom:.55rem;
  font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;color:var(--red-lit)}
.band-fs .fragments li::after{color:var(--red)}
.fragments li:hover{border-top-color:var(--red)}

/* ============================================================
   OVER-THE-SHOULDER BOX + TREE
   ============================================================ */
.ots{border:1px solid var(--line);background:var(--navy-800);box-shadow:0 22px 50px -32px #000;
  position:relative}
.band-fs .ots{background:var(--card);border-color:var(--rule)}
.ots-head{background:var(--red);color:#fff;font-family:var(--chyron);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;padding:.4rem .8rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ots-head small{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;font-weight:400;opacity:.9}
.ots-body{padding:clamp(.85rem,2.2vw,1.4rem);overflow-x:auto}

.tree{font-family:var(--mono);font-size:.78rem;line-height:1.5;margin:0;padding:0;list-style:none;
  min-width:16rem}
.tree ul{list-style:none;margin:.3rem 0;padding-left:1.05rem;border-left:1px solid var(--line)}
.band-fs .tree ul{border-left-color:var(--rule)}
.tree li{position:relative;padding:.14rem 0 .14rem .85rem}
.tree ul>li::before{content:"";position:absolute;left:0;top:1.02em;width:.72rem;height:1px;
  background:var(--line)}
.band-fs .tree ul>li::before{background:var(--rule)}
.tree>li{padding-left:0}
.tree .node{display:inline-block;padding:.14rem .45rem;letter-spacing:.05em;border:1px solid var(--line);
  background:var(--navy-700)}
.band-fs .tree .node{background:var(--card-2);border-color:var(--rule)}
.tree .root>.node{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.tree .l1>.node{border-color:var(--gold);color:var(--gold-lit)}
.band-fs .tree .l1>.node{color:#7d6414;border-color:var(--gold)}
.tree .money>.node{border-color:var(--red-lit);color:var(--red-lit)}
.band-fs .tree .money>.node{color:var(--red);border-color:var(--red)}

/* ============================================================
   PHASES — before / during / after
   ============================================================ */
.phases{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.6rem}
.phase-head{font-family:var(--chyron);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:1.3rem;padding:.35rem .7rem;color:#fff;margin-bottom:.85rem}
.phase-b .phase-head{background:var(--navy-600)}
.phase-d .phase-head{background:var(--gold);color:var(--navy-900)}
.phase-a .phase-head{background:var(--red)}
.phases ul{list-style:none;margin:0;padding:0}
.phases li{padding:.42rem 0 .42rem 1.2rem;border-top:1px solid var(--line-soft);position:relative;
  font-size:.95rem;line-height:1.4}
.band-fs .phases li{border-top-color:var(--rule)}
.phases li::before{content:"?";position:absolute;left:0;top:.42rem;font-family:var(--mono);
  font-size:.82rem;color:var(--gold)}

/* ============================================================
   THE WALK — interactive spine
   ============================================================ */
.walk{display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
  align-items:start;margin-top:1.6rem}
@media (max-width:50rem){.walk{grid-template-columns:1fr}}
.walk-rail{list-style:none;margin:0;padding:0;position:relative;
  max-height:none}
@media (max-width:50rem){
  .walk-rail{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.6rem;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .walk-rail::before{display:none}
  .walk-rail li{flex:0 0 auto}
  .walk-rail button{white-space:nowrap;border:1px solid var(--line);padding:.4rem .65rem}
  .walk-rail button i{display:none}
}
.walk-rail::before{content:"";position:absolute;left:.62rem;top:1.1rem;bottom:1.1rem;width:3px;
  background:linear-gradient(180deg,var(--navy-600),var(--gold) 48%,var(--red))}
.walk-rail button{width:100%;display:flex;align-items:center;gap:.6rem;background:none;border:0;
  padding:.28rem .3rem;cursor:pointer;text-align:left;font-family:var(--chyron);font-weight:500;
  font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;color:#9db0c6}
.walk-rail button:hover{color:#fff;background:var(--navy-700)}
.walk-rail button i{flex:0 0 auto;width:.78rem;height:.78rem;background:var(--navy-900);
  border:2px solid #64798f;position:relative;z-index:1}
.walk-rail button[aria-selected="true"]{color:#fff;font-weight:700}
.walk-rail button[aria-selected="true"] i{background:var(--red);border-color:var(--red-lit);
  box-shadow:0 0 0 4px rgba(200,16,46,.28)}
.walk-detail{min-height:22rem}
.walk-detail .stagerow{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
.walk-detail .stagerow b{background:var(--red);color:#fff;padding:.25rem .55rem;font-weight:600}
.walk-detail .stagerow span{background:var(--navy-700);color:#c3d0e0;padding:.25rem .55rem;
  border:1px solid var(--line)}
.walk-detail h3{font-size:clamp(1.7rem,1.25rem + 2.2vw,2.8rem);letter-spacing:.005em;margin-bottom:.5rem}
.walk-detail .what{color:#c9d5e2;margin-bottom:1.15rem;max-width:38rem}
.kv{display:grid;gap:.65rem;margin:0}
.kv>div{border-top:1px solid var(--line);padding-top:.5rem}
.kv dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.2rem}
.kv dd{margin:0;font-size:.97rem;line-height:1.48;color:#dbe3ec}
.kv dd.break{color:#ff8b95}
.kv dd.break::before{content:"▲ ";font-size:.78em;color:var(--red-lit)}

/* ============================================================
   VERSUS — system network vs story list
   ============================================================ */
.netgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2.6rem;position:relative;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  margin-top:.5rem}
.netgrid span{background:var(--navy-700);border:1px solid var(--gold);color:var(--gold-lit);
  padding:.45rem .3rem;text-align:center;position:relative;z-index:1}
.netgrid svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.storylist{list-style:none;margin:.5rem 0 0;padding:0;counter-reset:s}
.storylist li{counter-increment:s;border-top:1px solid var(--line);padding:.55rem 0 .55rem 3.4rem;
  position:relative;font-size:.95rem}
.storylist li::before{content:"PKG " counter(s,decimal-leading-zero);position:absolute;left:0;top:.72rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--red-lit)}

/* ============================================================
   CHAIN OF INSTRUCTIONS
   ============================================================ */
.chain{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:ch}
.chain li{counter-increment:ch;display:grid;grid-template-columns:3rem 1fr;gap:.85rem;
  align-items:baseline;padding:.62rem 0;border-top:1px solid var(--line)}
.band-fs .chain li{border-top-color:var(--rule)}
.chain li::before{content:counter(ch,decimal-leading-zero);font-family:var(--mono);font-size:.68rem;
  color:var(--red-lit);letter-spacing:.06em}
.band-fs .chain li::before{color:var(--red)}
.chain q{font-family:var(--chyron);font-weight:600;text-transform:uppercase;letter-spacing:.035em;
  font-size:clamp(1.1rem,.95rem + .9vw,1.6rem);quotes:"«" "»";line-height:1.08;display:inline-block}
.chain li.last q{color:var(--gold-lit)}
.band-fs .chain li.last q{color:#8a6c0e}

/* ============================================================
   EXPLODE — headline into questions
   ============================================================ */
.explode-head{background:var(--navy-800);border:1px solid var(--line);border-left:5px solid var(--red);
  padding:.95rem 1.1rem;box-shadow:0 20px 44px -32px #000}
.band-fs .explode-head{background:var(--card);border-color:var(--rule);border-left-color:var(--red)}
.explode-head small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-lit);margin-bottom:.4rem}
.band-fs .explode-head small{color:var(--red)}
.explode-head strong{font-family:var(--chyron);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,1.05rem + 1.6vw,2.2rem);letter-spacing:.03em;line-height:1.02;display:block}
.explode-btn{margin:1.15rem 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;background:var(--red);color:#fff;border:0;padding:.7rem 1.1rem;cursor:pointer}
.explode-btn:hover{background:var(--red-lit)}
.explode-btn[aria-expanded="true"]{background:var(--navy-700);border:1px solid var(--line)}
.qgrid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));margin:0;
  padding:0;list-style:none}
.qgrid[hidden]{display:none}
.qgrid li{background:var(--navy-800);border:1px solid var(--line);border-top:2px solid var(--gold);
  padding:.62rem .75rem;font-size:.9rem;line-height:1.36;display:flex;gap:.55rem;opacity:0;
  transform:translateY(8px);animation:pop .4s ease forwards}
.band-fs .qgrid li{background:var(--card);border-color:var(--rule);border-top-color:var(--gold)}
.qgrid li b{font-family:var(--mono);font-size:.56rem;color:var(--red-lit);letter-spacing:.1em;padding-top:.3rem}
.band-fs .qgrid li b{color:var(--red)}
@keyframes pop{to{opacity:1;transform:none}}

/* ============================================================
   FLOW — defence bank
   ============================================================ */
.flow{display:grid;gap:.4rem;justify-items:center;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-top:1.5rem}
.flow .box{background:var(--navy-700);border:1px solid var(--line);padding:.5rem .85rem;
  min-width:min(100%,16rem)}
.band-fs .flow .box{background:var(--card);border-color:var(--rule)}
.flow .box.key{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.flow .box.gold{border-color:var(--gold);color:var(--gold-lit)}
.band-fs .flow .box.gold{color:#7d6414}
.flow .arrow{color:var(--red-lit);font-size:1.05rem;line-height:1}
.flow .fan{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.2rem,1fr));gap:.35rem;width:100%}
.flow .fan span{background:var(--navy-800);border:1px dashed var(--line);padding:.42rem .35rem}
.band-fs .flow .fan span{background:var(--card-2);border-color:var(--rule)}
.disciplines{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.2rem;padding:0;list-style:none}
.disciplines li{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold-lit);padding:.3rem .6rem}
.band-fs .disciplines li{color:#7d6414}

/* ============================================================
   BIG BOARD — the ledger table
   ============================================================ */
.bigboard{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:1.5rem}
.bigboard caption{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);padding-bottom:.65rem}
.bigboard th,.bigboard td{text-align:left;padding:.58rem .7rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.band-fs .bigboard th,.band-fs .bigboard td{border-bottom-color:var(--rule)}
.bigboard thead th{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--red);border-bottom:0}
.bigboard tbody th{font-family:var(--chyron);font-weight:600;font-size:1.05rem;letter-spacing:.05em;
  text-transform:uppercase;width:40%}
.bigboard tbody tr:nth-child(odd){background:rgba(255,255,255,.035)}
.band-fs .bigboard tbody tr:nth-child(odd){background:rgba(13,27,46,.04)}
@media (max-width:42rem){
  .bigboard,.bigboard tbody,.bigboard tr,.bigboard td,.bigboard th{display:block;width:auto}
  .bigboard thead{display:none}
  .bigboard tr{border:1px solid var(--line);border-left:3px solid var(--red);margin-bottom:.5rem;
    padding:.45rem .6rem}
  .band-fs .bigboard tr{border-color:var(--rule);border-left-color:var(--red)}
  .bigboard tbody th{width:auto;border:0;padding:0 0 .15rem}
  .bigboard td{border:0;padding:0 0 .1rem}
}

/* ============================================================
   COST LADDER + SCALE BARS
   ============================================================ */
.ladder{list-style:none;margin:1.4rem 0 0;padding:0;counter-reset:l}
.ladder li{counter-increment:l;position:relative;padding:.45rem 0 .45rem 2.9rem;
  border-top:1px solid var(--line);font-size:.96rem}
.band-fs .ladder li{border-top-color:var(--rule)}
.ladder li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:.5rem;
  font-family:var(--mono);font-size:.66rem;color:var(--gold);width:2rem;text-align:right}
.scale{display:grid;gap:.85rem;margin-top:1.4rem}
.scale .row small{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#93a5b9;display:block;margin-bottom:.28rem}
.band-fs .scale .row small{color:var(--ink-3)}
.scale .bar{height:1.7rem;display:flex;align-items:center;padding:0 .6rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.12em;color:#fff;white-space:nowrap}
.scale .bar.small{width:7%;min-width:7.5rem;background:var(--navy-600);border:1px solid var(--line)}
.scale .bar.big{width:100%;background:linear-gradient(90deg,var(--red),var(--red-lit))}

/* ============================================================
   SOURCE FEED
   ============================================================ */
.sources{display:grid;gap:.35rem;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));
  list-style:none;margin:1.4rem 0 0;padding:0}
.sources li{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;padding:.4rem .55rem;
  background:var(--navy-800);border-left:3px solid var(--gold);color:#bccadb}
.band-fs .sources li{background:var(--card);border-left-color:var(--gold);color:var(--ink-2)}

/* ============================================================
   VOCABULARY
   ============================================================ */
.vocab{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin-top:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:.85rem 0 0;list-style:none}
.chips li{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;padding:.28rem .55rem;
  border:1px solid var(--line);background:var(--navy-800)}
.band-fs .chips li{background:var(--card);border-color:var(--rule)}
.chips.nodes li{border-color:var(--gold);color:var(--gold-lit)}
.band-fs .chips.nodes li{color:#7d6414}
.chips.edges li{border-color:var(--red);color:var(--red-lit);font-style:italic}
.band-fs .chips.edges li{color:var(--red)}

/* ============================================================
   DECISION DESK — the query console
   ============================================================ */
.desk{border:1px solid var(--line);background:var(--navy-900);box-shadow:0 26px 60px -34px #000}
.desk-bar{display:flex;align-items:center;gap:.55rem;padding:.45rem .75rem;background:var(--red);
  color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.desk-bar i{width:.5rem;height:.5rem;background:#fff;display:inline-block;
  animation:tally 1.8s ease-in-out infinite}
.desk-bar .clock{margin-left:auto;opacity:.85}
.desk-body{padding:1rem;font-family:var(--mono);font-size:.82rem;line-height:1.6;min-height:15rem;
  color:#dbe3ec}
.desk-body .q{color:var(--gold-lit)}
.desk-body .q::before{content:"QUERY ▸ ";color:var(--red-lit)}
.desk-body .a{color:#a9bccd;margin:.55rem 0 1.1rem;padding-left:1rem;border-left:2px solid var(--line)}
.desk-body .a b{color:#fff;font-weight:600}
.desk-body .verdict{display:inline-block;background:var(--red);color:#fff;padding:.18rem .5rem;
  font-size:.62rem;letter-spacing:.16em;margin-top:.35rem}
.cursor{display:inline-block;width:.55em;height:1.05em;background:var(--gold-lit);vertical-align:-.18em;
  animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.qpicks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem;padding:0;list-style:none}
.qpicks button{font-family:var(--mono);font-size:.68rem;text-align:left;background:var(--navy-800);
  border:1px solid var(--line);padding:.42rem .6rem;cursor:pointer;color:#bccadb;max-width:100%}
.band-fs .qpicks button{background:var(--card);border-color:var(--rule);color:var(--ink-2)}
.qpicks button:hover{border-color:var(--red);color:#fff}
.band-fs .qpicks button:hover{color:var(--ink);border-color:var(--red)}
.qpicks button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ============================================================
   MODELS — old vs accountability
   ============================================================ */
.models{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.steps{list-style:none;margin:.9rem 0 0;padding:0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase}
.steps li{padding:.42rem .6rem;background:var(--navy-700);border:1px solid var(--line);
  margin-bottom:1.3rem;position:relative;text-align:center}
.band-fs .steps li{background:var(--card-2);border-color:var(--rule)}
.steps li:not(:last-child)::after{content:"▼";position:absolute;left:50%;bottom:-1.15rem;
  transform:translateX(-50%);color:var(--gold);font-size:.62rem}
.steps.dead li:last-child{background:var(--red);border-color:var(--red);color:#fff}
.steps.loop li:last-child{background:var(--gold);border-color:var(--gold);color:var(--navy-900);
  font-weight:600}
.steps.loop li:last-child::after{content:"⟲";position:absolute;left:50%;bottom:-1.3rem;
  transform:translateX(-50%);color:var(--gold);font-size:1rem}

/* ============================================================
   STANDARDS + ASYMMETRY + INTERFACE
   ============================================================ */
.standards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:1.6rem}
.standards blockquote{margin:0;font-family:var(--chyron);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.25rem,1.05rem + 1.2vw,1.85rem);line-height:1.05;letter-spacing:.03em}
.standards .verdict{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  margin-top:.9rem;padding-top:.65rem;border-top:2px solid var(--gold);color:#9db0c6}
.band-fs .standards .verdict{color:var(--ink-3)}

.asym{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.6rem}
.asym ul{list-style:none;margin:.8rem 0 0;padding:0}
.asym li{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:.32rem 0;
  border-bottom:1px dotted var(--line);text-transform:uppercase}
.band-fs .asym li{border-bottom-color:var(--rule)}
.asym .verdict{font-family:var(--chyron);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.4rem);letter-spacing:.03em;margin-top:1rem;line-height:1}

.iface{display:grid;gap:.32rem;margin-top:1.6rem}
.iface div{background:var(--navy-800);border:1px solid var(--line);border-left:5px solid var(--red);
  padding:.62rem .85rem;font-family:var(--chyron);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .7vw,1.35rem);letter-spacing:.05em;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
.band-fs .iface div{background:var(--card);border-color:var(--rule);border-left-color:var(--red)}
.iface div span{font-family:var(--mono);font-weight:400;font-size:.58rem;color:var(--gold);
  letter-spacing:.14em;white-space:nowrap;text-transform:uppercase}

/* ============================================================
   SIGN-OFF
   ============================================================ */
.finale p{font-family:var(--chyron);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.35rem,1.1rem + 1.7vw,2.4rem);line-height:1.04;margin-bottom:.6rem}
.finale p.plain{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(1.1rem,1rem + .6vw,1.35rem);line-height:1.5;color:#cad5e1}
.finale .imperative{color:var(--red-lit)}
.pathline{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .15rem}
.pathline b{background:var(--navy-800);border:1px solid var(--gold);color:var(--gold-lit);
  padding:.24rem .45rem;white-space:nowrap;font-weight:400}
.band-fs .pathline b{background:var(--card);color:#7d6414}
.pathline i{color:var(--red-lit);font-style:normal;padding:0 .2rem}

.note{border:1px solid var(--line);border-left:5px solid var(--gold);background:var(--navy-800);
  padding:.95rem 1.1rem;font-size:.94rem}
.band-fs .note{background:var(--card);border-color:var(--rule);border-left-color:var(--gold)}
.note b{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  display:block;margin-bottom:.35rem;color:var(--gold)}
.band-fs .note b{color:#7d6414}

footer{background:var(--navy-800);border-top:3px solid var(--gold);padding-block:2rem 2.75rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:#8ea0b5}
footer .foot-grid{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
footer a{color:#bccadb}
footer .netid-foot{font-family:var(--chyron);font-weight:700;font-size:1.5rem;color:#fff;
  letter-spacing:.06em;background:var(--red);padding:.1rem .5rem}

/* ---------- narrow-screen broadcast chrome ---------- */
@media (max-width:46rem){
  .topbar .slug{display:none}
  .topbar .live{border-right:0}
  .topbar .netid{font-size:1.2rem}
  .topbar .rundown-btn{margin-left:auto}
}
@media (max-width:30rem){
  .topbar .netid small{display:none}
}

/* selected stage must read as selected on the mobile scroll strip */
@media (max-width:50rem){
  .walk-rail button[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
  .walk-rail{scroll-snap-type:x proximity}
  .walk-rail li{scroll-snap-align:start}
}

/* ============================================================
   SHARE — ten platform tiles + ten downloadable cards
   ============================================================ */
.share-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  margin-top:1.5rem}
.share-grid a,.share-grid button{
  display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--rule);
  border-left:4px solid var(--red);padding:.75rem .85rem;text-decoration:none;color:var(--ink);
  font-family:var(--chyron);font-weight:600;font-size:1.08rem;letter-spacing:.045em;
  text-transform:uppercase;cursor:pointer;text-align:left;line-height:1.05}
.band-studio .share-grid a,.band-studio .share-grid button,
.band-desk .share-grid a,.band-desk .share-grid button{background:var(--navy-800);border-color:var(--line);color:#fff}
.share-grid a:hover,.share-grid button:hover{background:var(--red);border-color:var(--red);color:#fff}
.share-grid b{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--red);
  width:1.5rem;text-align:center;flex:0 0 auto}
.share-grid a:hover b,.share-grid button:hover b{color:#fff}

.tile-strip{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));
  list-style:none;margin:.75rem 0 0;padding:0}
.tile-strip a{display:block;border:1px solid var(--rule);background:var(--card);line-height:0;
  position:relative}
.tile-strip a:hover{border-color:var(--red)}
.tile-strip img{width:100%;height:auto;display:block}
.tile-strip a::after{content:attr(data-n);position:absolute;left:0;bottom:0;background:var(--red);
  color:#fff;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;padding:.16rem .35rem;
  line-height:1.3}

.hero-listen{margin-top:1.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;background:var(--gold);color:var(--navy-900);border:0;
  padding:.72rem 1.1rem;cursor:pointer;font-weight:600}
.hero-listen:hover{background:var(--gold-lit)}

/* ============================================================
   NARRATION PLAYER — the studio control strip
   ============================================================ */
.narrator{position:fixed;left:0;right:0;bottom:0;z-index:65;pointer-events:none}
.narrator>*{pointer-events:auto}
.listen{position:absolute;right:.9rem;bottom:.9rem;display:flex;align-items:center;gap:.5rem;
  background:var(--red);color:#fff;border:0;padding:.7rem 1rem;cursor:pointer;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.2em;box-shadow:0 16px 34px -18px #000}
.listen:hover{background:var(--red-lit)}
.listen i{width:.55rem;height:.55rem;background:#fff;display:block;border-radius:50%;
  animation:tally 1.8s ease-in-out infinite}
.listen[hidden]{display:none}

.nplayer{background:var(--navy-800);border-top:3px solid var(--gold);
  box-shadow:0 -22px 50px -30px #000;padding:.55rem max(.9rem,calc((100% - 76rem)/2)) .7rem}
.nplayer[hidden]{display:none}
.nbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.onair{display:flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;padding:.3rem .55rem}
.onair i{width:.42rem;height:.42rem;background:#fff;display:block;animation:tally 1.8s ease-in-out infinite}
.nbar .now{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:1}
.nbar .now small{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;color:var(--gold)}
.nbar .now b{font-family:var(--chyron);font-weight:600;font-size:1.1rem;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nbar button{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;background:var(--navy-700);
  color:#cbd7e5;border:1px solid var(--line);padding:.36rem .6rem;cursor:pointer;white-space:nowrap}
.nbar button:hover{background:var(--red);border-color:var(--red);color:#fff}
.nbar button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.nbar #closeBtn{font-size:1rem;line-height:1;padding:.2rem .48rem;letter-spacing:0}

.ncaption{margin:.5rem 0 .45rem;font-size:.95rem;line-height:1.4;color:#dbe3ec;min-height:2.7em;
  border-left:3px solid var(--red);padding-left:.7rem}
.ncaption b{display:inline-block;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
  background:var(--red);color:#fff;padding:.12rem .4rem;margin-right:.5rem;vertical-align:.16em}
.ncap-hint{color:#7f92a8;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}

.ncontrols{display:flex;align-items:center;gap:.5rem}
.ncontrols button{font-family:var(--mono);font-size:.72rem;background:var(--navy-700);color:#fff;
  border:1px solid var(--line);padding:.34rem .6rem;cursor:pointer;line-height:1}
.ncontrols button:hover{background:var(--red);border-color:var(--red)}
.ncontrols .play{background:var(--red);border-color:var(--red);font-size:.9rem;padding:.34rem .8rem}
.ncontrols time{font-family:var(--mono);font-size:.62rem;color:#9db0c6;white-space:nowrap}
.ncontrols input[type=range]{flex:1;min-width:4rem;accent-color:var(--red);height:1.1rem}

.nchapters{list-style:none;margin:.6rem 0 0;padding:.6rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.3rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  max-height:12rem;overflow:auto}
.nchapters[hidden]{display:none}
.nchapters button{width:100%;text-align:left;font-family:var(--chyron);font-weight:500;
  font-size:1rem;letter-spacing:.04em;text-transform:uppercase;background:var(--navy-700);
  color:#cbd7e5;border:1px solid var(--line);padding:.36rem .55rem;cursor:pointer;
  display:flex;gap:.5rem;align-items:baseline}
.nchapters button b{font-family:var(--mono);font-weight:400;font-size:.58rem;color:var(--gold)}
.nchapters button:hover{background:var(--navy-600);color:#fff}
.nchapters button.active{background:var(--red);border-color:var(--red);color:#fff}
.nchapters button.active b{color:#fff}

/* the section currently being narrated */
[data-chapter].narrating{position:relative}
[data-chapter].narrating::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red);box-shadow:0 0 22px rgba(200,16,46,.6)}

body.player-open{padding-bottom:11rem}
@media (max-width:46rem){
  .nbar .now small{display:none}
  .nchapters{max-height:9rem}
  body.player-open{padding-bottom:14rem}
}
