@charset "utf-8";
/* rollovermachine.felineunion.org
 *
 * Mobile-first, and that is not a slogan here: every rule below the reset is
 * written for a 390px screen and the wider layouts are additive. Nothing is
 * carried by a hairline or a sub-11px label, because neither survives a phone.
 */

/* --------------------------------------------------------------- fonts -- */
@font-face{font-family:"Slab";src:url("/assets/fonts/lato-black.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  --ink:#071526;
  --ink-2:#12263f;
  --paper:#dceeff;
  --panel:#fffdf4;
  --red:#ff3038;
  --red-deep:#c5121a;
  --yellow:#ffe400;
  --blue:#004fff;
  --cyan:#00d9ff;
  --green:#0f8a54;
  --muted:#4a5a6d;
  --line:#071526;

  --bw:3px;                 /* the house border weight */
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --radius:0px;

  --wrap:100%;
  --pad:18px;
  --gap:16px;

  --f-display:"Slab","Arial Black",Arial,sans-serif;
  --f-body:"SSP",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh,58px) + 10px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.5;
  font-synthesis-weight:none;
  background-image:linear-gradient(rgba(0,79,255,.06) 1.5px,transparent 1.5px),
                   linear-gradient(90deg,rgba(0,79,255,.06) 1.5px,transparent 1.5px);
  background-size:26px 26px;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue);text-underline-offset:3px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:4px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.fine{font-size:.82rem;line-height:1.45;color:var(--muted);margin-top:14px}
.lead{font-size:1.14rem;font-weight:600}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;
  padding:12px 16px;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------- reveal --
   threshold-free: app.js sweeps rects directly. Elements taller than the
   viewport get .reveal--flat and fade instead of sliding, because animating
   a 10,000px transform is expensive for an effect nobody sees start. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal--flat{transform:none}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* --------------------------------------------------------------- shell -- */
.sheet{background:var(--panel);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);
  padding:20px 18px;margin-top:18px}
.sheet p + p{margin-top:12px}
.stamp{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,7vw,2.4rem);line-height:.98;letter-spacing:-.03em;
  color:var(--red);margin-top:20px;text-shadow:2px 2px 0 var(--panel)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:13px 18px;border:var(--bw) solid var(--ink);
  background:var(--panel);color:var(--ink);font-weight:700;text-decoration:none;
  text-align:center;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn--go{background:var(--red);color:#fff;text-transform:uppercase;letter-spacing:.02em}
.btn--stamp{background:var(--yellow)}
.btn--ghost{background:var(--panel)}
.btn[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn.is-done{background:var(--green);color:#fff}

.chip{min-height:44px;padding:9px 14px;border:var(--bw) solid var(--ink);
  background:var(--panel);font-weight:700;font-size:.9rem;white-space:nowrap}
.chip.is-on{background:var(--ink);color:var(--panel)}

/* ------------------------------------------------------------- masthead -- */
.mast{position:relative;background:var(--ink);color:var(--panel);overflow:hidden;
  padding:26px 0 30px;border-bottom:6px solid var(--ink)}
.mast__art{position:absolute;inset:auto 0 0 0;height:190px;opacity:1}
.mast__art .shopfront{width:100%;height:190px;
  --sf-wall:#0a1a2c;--sf-shop:#12263f;--sf-glow:#ffe400;--sf-door:#004fff;
  --sf-signbg:#ff3038;--sf-kerb:#02080f}
.mast .wrap{position:relative;z-index:2;padding-bottom:150px}
.kicker{font-family:var(--f-mono);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow)}
.mast__h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.7rem,15vw,4.2rem);line-height:.86;letter-spacing:-.045em;
  margin:10px 0 0;color:var(--panel)}
.mast__lede{margin-top:14px;font-size:1.12rem;font-weight:700;color:var(--yellow);
  max-width:22ch}
.mast__sub{margin-top:12px;font-size:1rem;color:#cfe0f2;max-width:40ch}
.mast__sub b{color:var(--panel)}
.mast__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ------------------------------------------------------------- chap nav -- */
.chapnav{position:sticky;top:0;z-index:40;background:var(--yellow);
  border-bottom:var(--bw) solid var(--ink);box-shadow:0 4px 0 rgba(7,21,38,.18)}
.chapnav__rail{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chapnav__rail::-webkit-scrollbar{display:none}
.chapnav__a{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;
  padding:13px 14px;text-decoration:none;color:var(--ink);font-weight:700;
  font-size:.86rem;white-space:nowrap;border-right:2px solid rgba(7,21,38,.22);
  scroll-snap-align:start;min-height:48px}
.chapnav__a b{font-family:var(--f-mono);font-size:.72rem;color:var(--red-deep)}
.chapnav__a--alt{background:rgba(7,21,38,.07)}
.chapnav__a.is-here{background:var(--ink);color:var(--yellow)}
.chapnav__a.is-here b{color:var(--yellow)}

/* ----------------------------------------------------------------- acts -- */
.act{padding:34px 0 40px;border-bottom:var(--bw) solid var(--ink)}
.act__no{font-family:var(--f-mono);font-weight:600;font-size:.76rem;letter-spacing:.2em;
  color:var(--red-deep)}
.act__h{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,9vw,2.6rem);line-height:.94;letter-spacing:-.035em;margin-top:6px}
.act__deck{margin-top:12px;font-size:1.06rem;font-weight:600;color:var(--ink-2);max-width:46ch}
.act--open{background:linear-gradient(180deg,rgba(0,79,255,.08),transparent 40%)}
.act--mill{background:var(--ink);color:var(--panel);border-color:#000}
.act--mill .act__deck{color:#c2d4e6}
.act--mill .act__no{color:var(--yellow)}
.act--works{background:var(--blue);color:var(--panel)}
.act--works .act__deck{color:#d6e4ff}
.act--works .act__no{color:var(--yellow)}
.act--works .sheet{color:var(--ink)}
.act--src{background:var(--ink);color:var(--panel);border:0}

/* ----------------------------------------------------------------- sign -- */
.sign{margin-top:18px;border:5px solid var(--ink);background:var(--yellow);
  box-shadow:var(--shadow);display:grid}
.sign strong{font-family:var(--f-display);font-size:clamp(2rem,11vw,3rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.04em;padding:16px 16px 14px}
.sign span{background:var(--red);color:#fff;padding:12px 16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;
  border-top:5px solid var(--ink)}

.lawcard{margin-top:18px;display:grid;gap:10px}
.lawcard li{background:var(--panel);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-sm);padding:14px 16px;display:grid;gap:4px}
.lawcard b{font-family:var(--f-display);font-size:1.7rem;line-height:1;color:var(--red-deep)}
.lawcard span{font-size:.92rem;color:var(--muted)}

/* ------------------------------------------------------------------ rig -- */
.rig{margin-top:20px;display:grid;gap:16px}

.rig__out{position:sticky;top:calc(var(--navh,58px));z-index:30;
  background:var(--ink);color:var(--panel);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow);padding:14px}
.verdict{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.verdict__dot{width:14px;height:14px;background:var(--green);
  box-shadow:0 0 0 3px rgba(15,138,84,.3)}
.verdict[data-state="over"] .verdict__dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,48,56,.3)}
.verdict[data-state="over"]{color:var(--red)}
.verdict[data-state="under"] .verdict__dot{background:var(--cyan);box-shadow:0 0 0 3px rgba(0,217,255,.3)}

.check{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,253,244,.22)}
.metric{background:var(--ink);padding:11px 10px;display:grid;gap:3px;min-width:0}
.metric span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:#9fb6cc}
.metric b{font-family:var(--f-display);font-size:clamp(1.3rem,7vw,1.9rem);line-height:1;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.metric--apr b{color:var(--yellow)}
.metric.is-bad b{color:var(--red)}
.rig__say{margin-top:11px;font-size:.93rem;font-weight:600;color:#cfe0f2;
  border-left:5px solid var(--yellow);padding-left:11px;min-height:2.6em}

.ratebar{position:relative;height:30px;margin-top:12px;background:#16283d;
  border:2px solid #2c4560}
.ratebar__fill{display:block;height:100%;width:0;
  background:repeating-linear-gradient(135deg,var(--red),var(--red) 9px,#ff676d 9px,#ff676d 18px);
  transition:width .35s cubic-bezier(.2,.7,.3,1)}
.ratebar__mark{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;background:var(--cyan);
  display:block}
.ratebar__mark b,.ratebar__mark small{position:absolute;left:6px;white-space:nowrap;
  font-size:.62rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em}
.ratebar__mark b{top:-1px}
.ratebar__mark small{bottom:-1px;opacity:.8}

.rig__in{border:var(--bw) solid var(--ink);background:var(--yellow);
  box-shadow:var(--shadow);padding:0 0 16px}
.presets{border:0;margin:0;padding:0}
.presets legend{float:left;width:100%;background:var(--blue);color:#fff;padding:10px 14px;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:var(--bw) solid var(--ink);margin-bottom:0}
.presets__row{clear:both;display:flex;gap:8px;overflow-x:auto;padding:14px;
  scrollbar-width:none}
.presets__row::-webkit-scrollbar{display:none}
.chip--preset{flex:0 0 auto}
.presets__note{padding:0 14px 4px;font-size:.86rem;font-weight:600;color:#3d3a00;min-height:2.6em}

.fld{padding:11px 14px 3px}
.fld__lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-weight:700;font-size:.92rem}
.fld__val{font-family:var(--f-mono);font-weight:700;font-size:.98rem;
  background:var(--ink);color:var(--yellow);padding:3px 8px}
.fld__hint{display:block;font-size:.78rem;color:#4a4300;margin-top:5px}
.fld__rng{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:2px 0 0;
  background:transparent}
.fld__rng::-webkit-slider-runnable-track{height:12px;background:var(--panel);
  border:2px solid var(--ink)}
.fld__rng::-moz-range-track{height:12px;background:var(--panel);border:2px solid var(--ink)}
.fld__rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;
  margin-top:-12px;background:var(--red);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.fld__rng::-moz-range-thumb{width:32px;height:32px;border-radius:0;background:var(--red);
  border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.fld.is-illegal .fld__val{background:var(--red);color:#fff}
.fld.is-pulsed{animation:pulse 1.1s ease 2}
@keyframes pulse{0%,100%{background:transparent}50%{background:rgba(255,48,56,.22)}}
@media (prefers-reduced-motion:reduce){.fld.is-pulsed{animation:none}}

.aha{margin-top:20px;background:var(--panel);border:var(--bw) solid var(--ink);
  border-left:10px solid var(--red);box-shadow:var(--shadow);padding:18px}
.aha h3{font-family:var(--f-display);text-transform:uppercase;font-size:1.3rem;
  letter-spacing:-.02em;line-height:1.02}
.aha p{margin-top:10px;font-size:.99rem}
.aha__kick{font-weight:700;color:var(--red-deep)}
.aha .btn{margin-top:14px}

/* ------------------------------------------------------------- collision -- */
.collide{margin-top:20px}
.collide__bar{display:flex;height:150px;border:var(--bw) solid var(--ink);
  background:#b9cddf;box-shadow:var(--shadow);overflow:hidden}
.seg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;
  transition:width .4s cubic-bezier(.2,.7,.3,1);border-right:2px solid rgba(7,21,38,.5)}
.seg:last-child{border-right:0}
.seg i{writing-mode:vertical-rl;font-style:normal;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);white-space:nowrap}
.seg--rent{background:#3153d6}.seg--food{background:#0f8a54}
.seg--transport{background:#7c4ca5}.seg--debt{background:var(--red)}
.seg.is-skipped{background:repeating-linear-gradient(45deg,#8fa3b5,#8fa3b5 8px,#a8bac9 8px,#a8bac9 16px)}
.seg.is-skipped i{color:var(--ink);text-shadow:none}

.collide__pay{display:flex;justify-content:space-between;align-items:center;
  border:var(--bw) solid var(--ink);border-top:0;background:var(--panel);
  padding:11px 14px;font-weight:700;box-shadow:var(--shadow)}
.collide__pay b{font-family:var(--f-display);font-size:1.3rem}
.collide__cap{margin-top:12px;font-size:.95rem;color:var(--ink-2)}

.gapbox{margin-top:14px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow);
  background:var(--red);color:#fff;padding:16px;text-align:center}
.gapbox[data-state="clear"]{background:var(--green)}
.gapbox__n{font-family:var(--f-display);font-size:clamp(2.4rem,16vw,3.6rem);line-height:.9;
  letter-spacing:-.04em}
.gapbox__l{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;
  margin-top:6px}

.displace{margin-top:14px;display:grid;gap:8px}
.displace li{border:var(--bw) solid var(--ink);background:var(--panel);
  padding:13px 15px;font-weight:700;cursor:pointer;min-height:50px;display:flex;
  align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-sm)}
.displace li::after{content:"Choose";font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.displace li.is-live{background:var(--yellow)}
.displace li.is-picked{background:var(--ink);color:var(--panel)}
.displace li.is-picked::after{content:"Picked";color:var(--yellow)}
.displace__say{margin-top:12px;font-size:.95rem;font-weight:600;color:var(--ink-2)}

/* ------------------------------------------------------------- treadmill -- */
.mill{margin-top:20px;position:relative}
.mill__head{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#2a3d52;
  border:var(--bw) solid var(--panel)}
.mill__head div{background:var(--ink-2);padding:12px 11px;display:grid;gap:3px}
.mill__head div:last-child{grid-column:1/-1}
.mill__head span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:#9fb6cc}
.mill__head b{font-family:var(--f-display);font-size:1.6rem;line-height:1}
.mill__head div:first-child b{color:var(--red)}
.mill__head div:nth-child(2) b{color:var(--yellow)}

.cycles{margin-top:14px;display:grid;gap:7px;max-height:340px;overflow-y:auto}
.cycles li{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center;
  border:2px dashed var(--panel);padding:9px 10px;font-family:var(--f-mono);font-size:.8rem}
.cycles li.is-new{animation:slidein .32s ease}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cycles li.is-new{animation:none}}
.cycles .cy-p{font-weight:700;color:var(--yellow);text-transform:uppercase;font-size:.72rem}
.cycles .cy-b{display:grid;gap:5px;min-width:0}
.cycles .cy-t{height:12px;background:#2a3d52;display:block}
.cycles .cy-t i{display:block;height:100%;
  background:repeating-linear-gradient(45deg,var(--red),var(--red) 7px,#ff676d 7px,#ff676d 14px);
  transition:width .35s}
.cycles .cy-x{font-size:.76rem;color:#c2d4e6}
.cycles li.is-clear .cy-p{color:var(--cyan)}

.mill__acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.mill__say{margin-top:14px;font-size:1.02rem;font-weight:700;
  border-left:6px solid var(--red);padding-left:13px}
.mill__strip{margin-top:20px;color:var(--panel);height:60px}
.mill__strip .strip{width:100%;height:60px}

.facts{margin-top:22px;display:grid;gap:2px;background:var(--panel)}
.fact{background:var(--ink-2);padding:18px 16px}
.fact b{display:block;font-family:var(--f-display);font-size:2.4rem;line-height:1;
  color:var(--yellow)}
.fact p{margin-top:8px;font-size:.98rem}
.fact small{display:block;margin-top:8px;font-size:.76rem;color:#9fb6cc}

/* ------------------------------------------------------------------ door -- */
.door{margin-top:18px;border:var(--bw) solid var(--ink);background:var(--panel);
  box-shadow:var(--shadow)}
.door__btn{all:unset;display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;box-sizing:border-box;padding:15px 16px;background:var(--yellow);
  border-bottom:var(--bw) solid var(--ink);cursor:pointer;min-height:56px}
.door__btn:focus-visible{outline:4px solid var(--red);outline-offset:-4px}
.door__k{font-family:var(--f-display);text-transform:uppercase;font-size:1.05rem}
.door__v{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:2px solid var(--ink);padding:6px 10px;background:var(--panel);white-space:nowrap}
.door__btn[aria-pressed="true"]{background:var(--red);color:#fff}
.door__btn[aria-pressed="true"] .door__v{background:var(--ink);color:var(--yellow);
  border-color:var(--ink)}
.door__btn[aria-pressed="true"] .door__v::after{content:" \00b7 on"}
.door__rows{padding:6px 0}
.door__rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;
  border-bottom:2px solid rgba(7,21,38,.1)}
.door__rows div:last-child{border-bottom:0}
.door__rows dt{font-weight:600;color:var(--muted)}
.door__rows dd{margin:0;font-family:var(--f-mono);font-weight:700}
.door__rows .hot dt{color:var(--ink);font-weight:700}
.door__rows .hot dd{color:var(--red-deep);font-size:1.08rem}
.door__fine{padding:0 16px 16px;font-size:.8rem;color:var(--muted)}

/* --------------------------------------------------------------- reasons -- */
.reasons{margin-top:20px;display:grid;gap:12px}
.reason{background:var(--panel);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);
  padding:18px 16px}
.reason__ico{display:block;width:44px;height:44px;color:var(--red)}
.reason__h{font-family:var(--f-display);text-transform:uppercase;font-size:1.22rem;
  letter-spacing:-.02em;margin-top:12px;line-height:1.02}
.reason__p{margin-top:8px;font-size:.99rem}

/* ---------------------------------------------------------------- policy -- */
.policy{margin-top:20px}
.policy__pick{display:grid;gap:9px}
.pol{all:unset;display:block;box-sizing:border-box;cursor:pointer;
  background:var(--panel);color:var(--ink);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-sm);padding:15px 16px;min-height:56px}
.pol:focus-visible{outline:4px solid var(--red);outline-offset:3px}
.pol__k{display:inline-block;font-family:var(--f-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--yellow);
  padding:4px 8px}
.pol__h{display:block;font-family:var(--f-display);text-transform:uppercase;font-size:1.2rem;
  margin-top:9px;line-height:1.02}
.pol__b{display:block;margin-top:7px;font-size:.92rem;color:var(--muted)}
.pol.is-on{background:var(--yellow)}
.pol.is-on .pol__b{color:#3d3a00}
.policy__out{margin-top:14px;background:var(--panel);color:var(--ink);
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow);padding:18px 16px}
.policy__verdict{display:inline-block;font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 10px}
.policy__result{margin-top:12px;font-size:1.08rem;font-weight:700}
.policy__result b{color:var(--red-deep)}
.policy__evidence{margin-top:10px;font-size:.95rem;color:var(--muted);
  border-left:5px solid var(--blue);padding-left:12px}

/* ---------------------------------------------------------------- player -- */
.act--listen{background:var(--ink);color:var(--panel);border-color:#000}
.act--listen .act__deck{color:#c2d4e6}
.act--listen .act__no{color:var(--yellow)}
.player{margin-top:20px;border:var(--bw) solid var(--panel);background:var(--ink-2)}
.player__top{display:flex;gap:12px;align-items:center;padding:14px;
  border-bottom:2px solid rgba(255,253,244,.3)}
.pp{all:unset;flex:0 0 auto;display:grid;place-items:center;width:60px;height:60px;
  box-sizing:border-box;background:var(--yellow);border:var(--bw) solid var(--ink);
  cursor:pointer;box-shadow:var(--shadow-sm)}
.pp:focus-visible{outline:4px solid var(--red);outline-offset:3px}
.pp svg{width:26px;height:26px;color:var(--ink)}
.pp .pp-pause{display:none}
.player[data-state="playing"] .pp .pp-play{display:none}
.player[data-state="playing"] .pp .pp-pause{display:block}
.player__meta{flex:1 1 auto;min-width:0}
.player__now{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.player__seekrow{display:flex;align-items:center;gap:9px;margin-top:7px}
.t{font-family:var(--f-mono);font-size:.74rem;color:#9fb6cc;flex:0 0 auto}
.seek{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:34px;
  background:transparent}
.seek::-webkit-slider-runnable-track{height:8px;background:#2a3d52}
.seek::-moz-range-track{height:8px;background:#2a3d52}
.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  margin-top:-8px;background:var(--red);border:2px solid var(--panel)}
.seek::-moz-range-thumb{width:24px;height:24px;border-radius:0;background:var(--red);
  border:2px solid var(--panel)}

.player__opts{display:flex;gap:8px;padding:12px 14px;overflow-x:auto;scrollbar-width:none;
  border-bottom:2px solid rgba(255,253,244,.3)}
.player__opts::-webkit-scrollbar{display:none}
.player__opts .chip{flex:0 0 auto;background:var(--ink-2);color:var(--panel);
  border-color:var(--panel)}
.player__opts .chip.is-on{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

.player__said{padding:16px 14px;min-height:118px;border-bottom:2px solid rgba(255,253,244,.3);
  background:#0d1d2f}
.said__who{font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);min-height:1em}
.said__txt{margin-top:8px;font-size:1.12rem;font-weight:600;line-height:1.4}

.chapters{display:grid}
.ch a{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;
  padding:14px;text-decoration:none;color:var(--panel);
  border-bottom:2px solid rgba(255,253,244,.18);min-height:54px}
.ch__n{font-family:var(--f-mono);font-size:.76rem;color:#9fb6cc}
.ch__t{font-weight:700;font-size:.97rem}
.ch__d{font-family:var(--f-mono);font-size:.78rem;color:#9fb6cc}
.ch.is-current a{background:var(--yellow);color:var(--ink)}
.ch.is-current .ch__n,.ch.is-current .ch__d{color:var(--ink)}
.ch.is-current .ch__t::after{content:" \25b6";font-size:.7em}
.ch.is-done .ch__n::after{content:" \2713";color:var(--green)}

.transcript{border-top:2px solid rgba(255,253,244,.3);background:#0d1d2f}
.transcript__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;position:sticky;top:0;background:#0d1d2f;z-index:2}
.transcript__hd h3{font-family:var(--f-display);text-transform:uppercase;font-size:1rem}
.transcript__lines{max-height:min(58vh,440px);overflow-y:auto;padding:0 14px 14px;
  scroll-behavior:smooth;overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){.transcript__lines{scroll-behavior:auto}}
.transcript__lines li{padding:10px 0 10px 13px;border-left:4px solid transparent;
  color:#9fb6cc;font-size:.97rem;cursor:pointer;transition:color .2s,border-color .2s}
.transcript__lines li b{display:block;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#7d95ad;margin-bottom:3px}
.transcript__lines li.is-now{color:var(--panel);border-left-color:var(--yellow);
  background:rgba(255,228,0,.08)}
.transcript__lines li.is-now b{color:var(--yellow)}
.transcript__lines li.is-past{color:#66809a}
.player__fine{padding:12px 14px;font-size:.8rem;color:#9fb6cc}

/* ----------------------------------------------------------------- tiles -- */
.tiles{margin-top:18px;display:grid;gap:9px}
.tile-pick{all:unset;display:grid;grid-template-columns:62px 1fr auto;gap:12px;
  align-items:center;box-sizing:border-box;cursor:pointer;background:var(--panel);
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);padding:10px;min-height:84px}
.tile-pick:focus-visible{outline:4px solid var(--red);outline-offset:3px}
.tile-pick img{width:62px;height:62px;border:2px solid var(--ink);object-fit:cover}
.tl-n{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.tl-t{display:block;font-weight:700;font-size:1rem;margin-top:3px;line-height:1.2}
.tl-go{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--yellow);border:2px solid var(--ink);padding:7px 10px}

/* ---------------------------------------------------------------- dialog --
   No position here. A modal <dialog> is placed by the UA in the top layer;
   overriding position drops the sheet into normal flow, below the fold and
   behind its own backdrop, while still reporting open === true. */
.sh-dialog{width:min(560px,94vw);max-height:90vh;padding:0;border:var(--bw) solid var(--ink);
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow);overflow:auto}
.sh-dialog::backdrop{background:rgba(7,21,38,.72)}
.sh-dialog__in{padding:0 0 18px}
.sh-dialog__hd{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;background:var(--ink);color:var(--panel);position:sticky;top:0;z-index:2}
.sh-dialog__hd h2{font-family:var(--f-display);text-transform:uppercase;font-size:1.1rem}
.sh-close{all:unset;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  background:var(--red);color:#fff;font-size:1.5rem;line-height:1;border:2px solid var(--panel)}
.sh-close:focus-visible{outline:4px solid var(--yellow);outline-offset:2px}
.sh-body{padding:16px}
.sh-img{width:100%;height:auto;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm)}
.sh-post{margin-top:14px;font-size:1.02rem;font-weight:600;background:#fff;
  border:2px solid var(--ink);padding:13px}
.sh-acts{display:grid;gap:9px;margin-top:14px}
.sh-fine{margin-top:12px;font-size:.82rem;color:var(--muted)}

/* ---------------------------------------------------------------- sources -- */
.srcs{margin-top:16px;display:grid;gap:10px}
.srcs li{border-left:5px solid var(--yellow);padding-left:13px}
.srcs a{color:var(--cyan);font-weight:600}
.act--src .fine{color:#9fb6cc}

.foot{background:var(--ink);color:var(--panel);padding:28px 0 40px;
  border-top:6px solid var(--yellow)}
.foot__tag{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.4rem,7vw,2rem);line-height:1;letter-spacing:-.03em;color:var(--yellow)}
.foot__meta{margin-top:16px;font-size:.9rem;color:#9fb6cc}
.foot__meta a{color:var(--panel)}

/* ============================================================ wider ===== */
@media (min-width:620px){
  :root{--pad:26px;--wrap:640px}
  .lawcard{grid-template-columns:1fr 1fr}
  .sign{grid-template-columns:1fr auto}
  .sign span{border-top:0;border-left:5px solid var(--ink);display:flex;align-items:center}
  .displace{grid-template-columns:1fr 1fr}
  .mill__head{grid-template-columns:1fr 1fr 1fr}
  .mill__head div:last-child{grid-column:auto}
  .reasons{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .sh-acts{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  :root{--wrap:1080px;--pad:32px}
  body{font-size:18px}
  .mast{padding:44px 0 0}
  .mast .wrap{padding-bottom:210px}
  .mast__art{height:260px}
  .mast__art .shopfront{height:260px}
  .mast__h1{font-size:5.4rem}
  .mast__lede{font-size:1.4rem;max-width:30ch}
  .act{padding:56px 0 64px}
  .act__h{font-size:3.1rem}
  .rig{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .rig__in{order:2;position:sticky;top:calc(var(--navh,58px) + 16px)}
  .rig__out{order:1;position:static}
  .check{grid-template-columns:repeat(4,1fr)}
  .metric b{font-size:1.8rem}
  .lawcard{grid-template-columns:repeat(4,1fr)}
  .reasons,.facts{grid-template-columns:repeat(3,1fr)}
  .reasons{grid-template-columns:repeat(2,1fr)}
  .policy__pick{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .collide__bar{height:190px}
  .seg i{writing-mode:horizontal-tb;font-size:.85rem}
  .displace{grid-template-columns:repeat(4,1fr)}
  .foot__tag{font-size:2.6rem}
}

@media (min-width:1180px){
  :root{--wrap:1200px}
  .reasons{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------------------- printing -- */
@media print{
  .chapnav,.player,.tiles,.mast__cta,.sh-dialog{display:none}
  body{background:#fff}
  .act{break-inside:avoid;border-bottom:1px solid #000}
}

/* ------------------------------------------------------------ card pages --
   share/NN.html reuses this stylesheet rather than shipping a second one. */
.mast--card{padding:26px 0 24px}
.mast--card .wrap{padding-bottom:0}
.mast__h1--card{font-size:clamp(1.9rem,9vw,3rem);line-height:.96;letter-spacing:-.035em;
  margin-top:10px}
.act--card{padding-top:26px}
.cardpage__img{width:100%;height:auto;border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow);background:var(--panel)}
.cardpage__btns{display:grid;gap:9px;margin-top:18px}
.cardpage__others{margin-top:10px;line-height:2}
.cardpage__others a{display:inline-block;margin-right:4px}
@media (min-width:620px){.cardpage__btns{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .act--card .wrap{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
    gap:28px;align-items:start}
  .cardpage__img{grid-row:1/4}
  .cardpage__btns{margin-top:0}
}