/* Man City's 115 Charges — one white column hung on a hairline time spine.
   Colour has three jobs only:
     sky    = money the sponsors really paid
     orange = ADUG money booked as something else
     green  = what was just added to the running total
   Black bars are redactions. */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/big-shoulders-display-var.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/schibsted-grotesk-var.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-italic-var.woff2) format("woff2")}

[hidden]{display:none!important}
:root{
  --paper:#FFFFFF;
  --ink:#0F1115;
  --ink-2:#454B55;
  --ink-3:#6A707A;
  --rule:#E5E7EB;
  --wash:#F4F6F8;
  --sky:#4A9BD9;
  --sky-soft:#D6E9F7;
  --tag:#F0571F;
  --tag-soft:#FFD8C9;
  --add:#0A7A43;
  --add-hi:#14A35B;
  --add-soft:#DDF4E7;
  --f-num:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --f-text:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-doc:"Newsreader",Georgia,"Times New Roman",serif;
  --measure:38rem;
  --wide:62rem;
  --bar-h:52px;
  --tick-h:100px;
  --date-col:10.5rem;
  --gut:max(16px,4vw);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.62 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
@media (max-width:560px){body{font-size:1rem}}
/* big screens: scale the whole rem-based layout up rather than leave a narrow column */
@media (min-width:1800px){html{font-size:112.5%}}
@media (min-width:2300px){html{font-size:125%}}
@media (min-width:3000px){html{font-size:150%}}
img{max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:650}
p{margin:0}
ol,ul{margin:0;padding:0}
figure{margin:0}
.num{font-family:var(--f-num);font-weight:800;line-height:.92;letter-spacing:.004em}
.eyebrow{font-size:.75rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:2px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}

/* redaction bars: the decision's own black boxes */
.rx{display:inline-block;width:var(--w,5ch);max-width:100%;height:.92em;background:var(--ink);vertical-align:-.12em;border-radius:1px;margin-inline:.08em}
/* highlighter swipe behind ADUG money */
.hl{background:linear-gradient(transparent 58%,var(--tag-soft) 58%);padding-inline:.06em}
/* green: amounts added to the running total */
.addnum{color:var(--add);font-weight:700;background:linear-gradient(transparent 62%,var(--add-soft) 62%);padding-inline:.06em;white-space:nowrap}
.delta{display:inline-flex;align-items:center;gap:3px;font:800 1.125rem/1 var(--f-num);letter-spacing:.01em;color:var(--add);background:var(--add-soft);padding:5px 8px 4px;border-radius:2px;white-space:nowrap}
.delta svg{width:10px;height:10px;flex:none}
.delta.pop{animation:dpop 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes dpop{0%{transform:translateY(8px) scale(.85);opacity:0}25%{transform:translateY(-3px) scale(1.06);opacity:1}45%{transform:none}100%{transform:none}}

/* ---------- the timeline's header (the slides view has no header) ---------- */
.bar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule);padding-inline:var(--gut);padding-top:env(safe-area-inset-top,0px)}
.bar-in{max-width:var(--wide);margin-inline:auto;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-2);text-decoration:none}
.bar-name:hover{color:var(--ink)}
.btn-watch{flex:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;cursor:pointer;font-weight:600;font-size:.875rem;text-decoration:none}
.btn-watch svg{width:12px;height:12px}
.btn-watch:hover{background:#2A2E36}

/* ---------- page frame ---------- */
.wrap{padding-inline:var(--gut);padding-block:0 calc(var(--tick-h) + 72px + env(safe-area-inset-bottom,0px))}
.col{max-width:var(--measure);margin-inline:auto}
.colw{max-width:var(--wide);margin-inline:auto}
.nojs{max-width:var(--wide);margin:0 auto;padding-block:clamp(40px,8vw,80px) 0;display:grid;gap:12px}
.nojs-h{font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.01em}
.nojs p{color:var(--ink-2);max-width:var(--measure)}

/* ---------- big headline (404 page) and buttons ---------- */
.hero{max-width:var(--wide);margin-inline:auto;padding-block:clamp(40px,8vw,96px) 40px;display:grid;gap:28px}
.hero-h{display:grid;gap:14px;font-weight:600}
.hero-num{font-size:clamp(4.25rem,21vw,13.5rem);font-weight:850;letter-spacing:-.005em;overflow-wrap:anywhere}
.hero-num .hl{background:linear-gradient(transparent 75%,var(--tag) 75%,var(--tag) 86%,transparent 86%)}
.hero-line{font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.15;max-width:22ch;letter-spacing:-.01em}
.hero-sub{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--ink-2);max-width:var(--measure)}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none;align-self:center}
.sw-sky{background:var(--sky)}.sw-tag{background:var(--tag)}.sw-add{background:var(--add-hi)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--wash)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#2A2E36}
.btn svg{width:14px;height:14px;flex:none}
@media (max-width:480px){.hero-cta .btn{flex:1 1 100%;justify-content:center}}

/* ---------- the story, as slides: the whole screen, one slide at a time, nothing scrolls ---------- */
html.view-slides,.view-slides body{height:100%;overflow:hidden;overscroll-behavior:none}
.view-slides #timeline,.view-slides .bar,.view-slides .ticker,.view-slides .sheet,.view-slides .tip{display:none!important}
.view-timeline .story{display:none}
.story{height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}
.st{position:relative;width:100%;max-width:80rem;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:var(--paper);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.st:focus{outline:none}
.st:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.st-share,.st-dig,.st-pop{-webkit-tap-highlight-color:transparent}
.st-top{display:grid;gap:10px;padding:14px 16px 0}
.st-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.st-name{min-width:0;font-size:.6875rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.st-prog{display:flex;gap:2px;min-width:0}
.st-prog span{flex:1;height:4px;background:var(--rule);border-radius:2px;overflow:hidden;min-width:0}
.st-prog span.done{background:var(--ink)}
.st-prog i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.st-count{flex:none;font:700 .9375rem/1 var(--f-num);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* phones and tablets: the drawing and the words as one block, centred above the controls.
   The drawing gets its full size when there is room and gives up height when the words need it. */
.st-stage{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,max-content) max-content minmax(0,1fr) max-content;grid-template-areas:"." "vis" "txt" "." "bar";touch-action:pan-y}
.st-vis{grid-area:vis;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:12px 16px 0}
/* the drawing is never cropped or stretched: it scales to fit its box */
.st-v{grid-area:1/1;position:relative;width:100%;max-height:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--wash);border-radius:2px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.st-v.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.st-v > svg.art{width:100%;height:100%}
.st-v .sv,.st-v .hv{flex:none}
.st-v .sv-badges button.sv-rule{appearance:none;min-height:24px;padding:2px 7px;border:1px solid var(--ink-3);border-radius:2px;background:var(--paper);color:var(--ink-2);font:700 .625rem/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.st-v .sv-badges button.sv-rule:hover,.st-v .sv-badges button.sv-rule[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* the smallest screens, longest slides: the drawing steps aside and the words get the room */
.novis .st-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) max-content;grid-template-areas:"txt" "bar"}
.novis .st-vis{display:none}
.st-bar{grid-area:bar;display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--ink)}
.st-money{display:grid;gap:2px;min-width:0;flex:1}
.st-lab{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}
.st-lab .lg{display:none}
.st-eq{display:grid;gap:2px;min-width:0}
/* "£31.37m + £28.50m =" above the total: before, plus what was just added (green), equals now */
.st-sum{font:700 1rem/1.1 var(--f-num);letter-spacing:.01em;color:var(--ink-2);white-space:nowrap}
.st-sum.note{font:400 .75rem/1.35 var(--f-text);letter-spacing:0;color:var(--ink-3)}
.st-valrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:0}
.st-val{font-size:1.75rem;min-width:0;font-variant-numeric:tabular-nums}
.st-val.up{color:var(--add)}
.st-cols{display:none;align-items:flex-end;gap:3px;height:26px}
.st-cols span{width:12px;background:var(--rule);border-radius:2px 2px 0 0;transition:background-color .4s ease}
.st-cols span.on{background:var(--tag)}
.st-cols span.new{background:var(--add-hi)}
.st-ctrl{display:flex;align-items:center;gap:6px;flex:none}
.ctl{appearance:none;border:1px solid var(--ink);background:var(--paper);color:var(--ink);height:44px;min-width:44px;padding:0 14px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:600;font-size:.875rem;line-height:1;touch-action:manipulation}
.ctl:hover{background:var(--wash)}
.ctl:disabled{opacity:.3;cursor:default;background:var(--paper)}
.ctl svg{width:14px;height:14px;flex:none}
.ctl:not(.ctl-play){padding:0;width:44px}
.ctl:not(.ctl-play) .ctl-l{display:none}
.ctl-play{background:var(--ink);color:var(--paper);min-width:84px}
.ctl-play:hover{background:#2A2E36}
@media (max-width:370px){.ctl-play .ctl-l{display:none}.ctl-play{min-width:0;width:48px;padding:0}.st-sum{font-size:.875rem}}
@media (max-width:340px){.st-v .sv-badges,.st-v .sv-axis{display:none}}
.st-txt{grid-area:txt;min-width:0;min-height:0;overflow:hidden;display:grid;align-content:start;padding:12px 16px}
.tight .st-txt{overflow-y:auto;overscroll-behavior:contain}
/* --k (set by the script, 0.8 to 1) shrinks the words a little when a slide would not otherwise fit */
.st-s{display:none;gap:calc(10px * var(--k,1));align-content:start;min-width:0}
.st-s.on{display:grid;animation:rise .3s ease}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
.st-date{font-size:calc(clamp(2.125rem,min(9vw,6.5vh),3.75rem) * var(--k,1))}
.st-date.ctx{color:var(--ink-2)}
.st-kind{display:inline-flex;align-items:center;gap:6px;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.st-kind i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.st-kind i.ctx{background:transparent;border:2px solid var(--ink-3)}
.st-kind i.money{background:var(--tag)}
.st-title{font-size:calc(clamp(1.25rem,min(5vw,3.4vh),1.75rem) * var(--k,1));line-height:1.15;letter-spacing:-.01em}
.st-text{color:var(--ink-2);font-size:calc(clamp(1rem,min(4.2vw,2.4vh),1.125rem) * var(--k,1));line-height:1.5}
.st-share{appearance:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:600 .8125rem/1 var(--f-text);cursor:pointer;touch-action:manipulation}
.st-share:hover,.st-share[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.st-share svg{width:13px;height:13px;flex:none}
/* Dig deeper (the source, further reading and photo credits) and Share */
.st-foot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0}
.st-acts{display:flex;gap:8px}
.st-dec + .st-acts{margin-left:auto}
/* the decision reference: each paragraph opens the PDF at its page in a new tab */
.st-dec{font-size:.75rem;color:var(--ink-3);letter-spacing:.02em;min-width:0}
.st-dec a{display:inline-block;padding:7px 0;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.st-dec a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.st-dig{appearance:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);font:600 .8125rem/1 var(--f-text);cursor:pointer;touch-action:manipulation;white-space:nowrap}
.st-dig:hover,.st-dig[aria-expanded="true"]{border-color:var(--ink);background:var(--wash)}
.st-dig svg{width:10px;height:10px;flex:none;color:var(--ink-3)}
.st-end{display:flex;flex-wrap:wrap;gap:8px}
.st-end .btn{min-height:42px;padding:0 14px;font-size:.875rem}
/* the two small panels: Share and Dig deeper */
.st-pop{position:absolute;z-index:20;width:min(20rem,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--ink);border-radius:2px;box-shadow:0 12px 32px rgba(15,17,21,.18);padding:14px;display:grid;gap:10px}
.st-pop:focus{outline:none}
.pop-body{display:grid;gap:14px}
.pop-sec{display:grid;gap:6px}
.pop-h{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pop-src{font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.pop-sec small{font-size:.75rem;line-height:1.4;color:var(--ink-3)}
.pop-sec small a{color:var(--ink-3)}
.st-pop .who-card{max-width:none;padding:8px 10px 8px 8px}
.st-pop .who-ph{width:48px;height:48px}
.rule-pop{width:min(24rem,calc(100% - 16px))}
.rule-t{font-weight:650;font-size:1rem;line-height:1.25}
.rule-n{font:800 1rem/1.2 var(--f-num);letter-spacing:.01em}
.rule-q{margin:0;font-family:var(--f-doc);font-style:italic;font-size:.9375rem;line-height:1.4;color:var(--ink)}
.rule-src{font-size:.6875rem;line-height:1.35;color:var(--ink-3);margin-top:-4px}
.rule-plain{font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.share-h{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.share-url{font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere;line-height:1.35}
.share-copy{appearance:none;height:42px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;font:600 .875rem/1 var(--f-text);cursor:pointer}
.share-copy:hover{background:#2A2E36}
.share-nets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.share-nets a{display:flex;align-items:center;justify-content:center;height:38px;border:1px solid var(--rule);border-radius:2px;text-decoration:none;font-size:.8125rem;font-weight:600;color:var(--ink)}
.share-nets a:hover{border-color:var(--ink);background:var(--wash)}
.dig-list{list-style:none;display:grid;gap:6px}
.dig-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-decoration:none;padding:8px 10px;border:1px solid var(--rule);border-radius:2px;font-size:.875rem;line-height:1.35;color:var(--ink)}
.dig-list a:hover{border-color:var(--ink);background:var(--wash)}
.dig-list .pub{grid-column:1;font-weight:700;font-size:.75rem;letter-spacing:.04em}
.dig-list .hd{grid-column:1;color:var(--ink-2)}
.dig-list svg{grid-column:2;grid-row:1 / span 2;width:10px;height:10px;color:var(--ink-3)}
/* short phones: a slimmer top line and control bar */
@media (max-height:700px){
  .st-top{padding-top:10px;gap:8px}
  .st-vis{padding-top:8px}
  .st-txt{padding-block:10px}
  .st-val{font-size:1.5rem}
  .st-sum{font-size:.875rem}
  .ctl{height:40px;min-width:40px}
  .ctl:not(.ctl-play){width:40px}
  .st-bar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}
/* computers: the drawing and the words side by side, the total and the controls along the bottom */
@media (min-width:900px) and (min-height:501px){
  .story{padding:clamp(12px,3vh,40px) clamp(16px,3vw,48px)}
  .st{max-height:46rem}
  .st-top{padding:4px 0 0}
  .st-stage{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"vis txt" "bar bar";column-gap:clamp(24px,3.5vw,56px)}
  .st-vis{padding:20px 0;container-type:size}
  .st-v{width:min(100cqw,145.45cqh);max-height:none;aspect-ratio:16/11}
  .st-txt{align-content:center;padding:20px 0}
  .st-bar{padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));gap:16px 24px}
  .st-money{grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:start;column-gap:22px;row-gap:4px;align-items:end;flex:1}
  .st-lab{font-size:.6875rem;grid-column:1}
  .st-lab .lg{display:inline}.st-lab .sm{display:none}
  .st-eq{grid-column:1;display:flex;align-items:baseline;gap:12px}
  .st-sum{font-size:1.375rem}
  .st-sum.note{order:2;font-size:.75rem}
  .st-sum.blank{display:none}
  .st-valrow{min-height:2.5rem;gap:10px}
  .st-cols{display:flex;grid-column:2;grid-row:1 / span 2;align-self:end}
  .st-val{font-size:2.75rem;min-width:6.4ch}
  .st-ctrl{gap:8px}
  .ctl:not(.ctl-play){padding:0 14px;width:auto}
  .ctl:not(.ctl-play) .ctl-l{display:inline}
  .ctl-play{min-width:96px}
}
/* phones held sideways: the drawing with the total and controls under it on the left, the words on the right */
@media (max-height:500px) and (orientation:landscape){
  .st-top{padding:8px 16px 0;gap:6px}
  .st-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"vis txt" "bar txt";column-gap:16px}
  .st-vis{padding:8px 0 0 16px;container-type:size}
  .st-v{width:min(100cqw,160cqh);max-height:none}
  .st-v .sv-axis,.st-v .sv-badges{display:none}
  .st-txt{padding:8px 16px 8px 0}
  .st-bar{border-top:0;padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px)) 16px;flex-wrap:wrap;gap:6px 12px}
  .st-money{flex:none}
  .st-cols{display:none}
  .st-val{font-size:1.5rem}
  .ctl{height:38px;min-width:38px}
  .ctl:not(.ctl-play){width:38px}
  .st-date{font-size:calc(2rem * var(--k,1))}
  .st-title{font-size:calc(1.1875rem * var(--k,1))}
  .st-text{font-size:calc(.9375rem * var(--k,1))}
  .novis .st-txt{padding-left:16px}
  .novis .st-bar{border-top:1px solid var(--ink);padding-right:12px;flex-wrap:nowrap}
}

/* season visual inside the slides */
.sv{width:100%;height:auto;min-height:100%;padding:clamp(12px,4.5%,30px);display:grid;align-content:center;gap:clamp(6px,1.6vw,12px)}
.sv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sv-k{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.sv-top .champ{background:var(--paper);padding:3px 7px;font-size:.6875rem}
.sv-big{font-size:clamp(2rem,7vw,3.5rem)}
.sv-track{position:relative;height:clamp(24px,4.4vw,36px);background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));background-size:1px 100%;background-repeat:no-repeat;background-position:0 0,33.333% 0,66.667% 0,100% 0}
.sv-bar{position:absolute;left:0;top:0;bottom:0;display:flex;gap:2px;transform-origin:0 50%}
.sv-bar span{display:block;height:100%}
.sv-bar .b{background:var(--sky)}
.sv-bar .t{background:var(--tag);border-radius:0 4px 4px 0}
.play .sv-bar{animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sv-axis{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sv-figs{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.875rem;color:var(--ink-2)}
.sv-figs span{display:inline-flex;align-items:center;gap:6px}
.sv-figs b{color:var(--ink);font-weight:650}
.sv-badges{display:flex;flex-wrap:wrap;gap:6px}
.sv-badges{align-items:center}
.sv-badges span{font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink-3);color:var(--ink-2);padding:2px 5px;border-radius:2px;background:var(--paper)}
.sv-badges .sv-bl{border:0;background:none;padding:0;color:var(--ink-3)}
@media (max-width:480px){.sv{padding:12px 14px;gap:6px}.sv-big{font-size:1.875rem}.sv-figs{font-size:.75rem;gap:2px 12px}.sv-badges{gap:4px}.sv-badges span{font-size:.5625rem;padding:1px 4px}.sv-k{font-size:.625rem}}

/* data visual: hearing calendar dots */
.hv{width:100%;height:auto;min-height:100%;padding:clamp(12px,4%,26px);display:grid;align-content:center;gap:10px}
.hv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2.5%,18px)}
.hv-m b{display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.hv-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.hv-d i{aspect-ratio:1;border-radius:1px;background:var(--paper)}
.hv-d i.e{background:transparent}
.hv-d i.s{background:var(--ink)}
.play .hv-d i.s{animation:sitin .35s ease both;animation-delay:calc(var(--k) * 45ms)}
@keyframes sitin{from{background:var(--paper);transform:scale(.4)}to{background:var(--ink);transform:none}}
.hv-n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hv-n .num{font-size:clamp(2rem,7vw,3.25rem)}
.hv-n span{font-size:.875rem;color:var(--ink-2)}

/* how-to-read key */
.key{max-width:var(--wide);margin:clamp(48px,7vw,80px) auto 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.8125rem;color:var(--ink-2)}
.key span{display:inline-flex;align-items:center;gap:8px}
.key .addnum{font-family:var(--f-num);font-size:1rem}
.kdot{width:11px;height:11px;border-radius:50%;background:var(--ink);flex:none}
.kdot.ctx{background:var(--paper);border:2px solid var(--ink-3)}
.kdot.money{background:var(--tag)}

/* ---------- chapters & spine ---------- */
.chapter{padding-top:clamp(72px,11vw,128px)}
.ch-head{max-width:var(--wide);margin:0 auto 40px;display:grid;gap:10px;scroll-margin-top:calc(var(--bar-h) + 16px)}
.ch-years{font-size:clamp(2.75rem,9vw,5rem);color:var(--ink)}
.ch-title{font-size:clamp(1.625rem,3.4vw,2.125rem);line-height:1.15;letter-spacing:-.01em}
.ch-lede{font-size:1.1875rem;color:var(--ink-2);max-width:var(--measure)}
.spine{list-style:none;max-width:var(--wide);margin:0 auto;position:relative;display:grid;gap:44px}
.spine::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--rule)}
.ev{position:relative;padding-left:34px;scroll-margin-top:calc(var(--bar-h) + 24px);min-width:0}
.ev::before{content:"";position:absolute;left:0;top:.42rem;width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.ev.ctx::before{background:var(--paper);border:2px solid var(--ink-3)}
.ev.money::before{background:var(--tag)}
.ev-date{font-size:1.375rem;margin-bottom:8px;color:var(--ink)}
.ev-date small{display:block;font-family:var(--f-text);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;line-height:1.3}
.ev-body{min-width:0;display:grid;gap:12px}
.ev-title{font-size:1.25rem;line-height:1.3}
.ev-body > p{max-width:var(--measure)}
.ev-art{display:none}
.src{font-size:.75rem;line-height:1.5;color:var(--ink-3);letter-spacing:.02em}
.src b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.src a{color:var(--ink-2)}
.add{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.875rem;color:var(--ink-2);max-width:var(--measure);padding:8px 10px;border-left:3px solid var(--add-hi);background:linear-gradient(90deg,var(--add-soft),rgba(221,244,231,0) 85%);border-radius:0 2px 2px 0}
.add .delta{font-size:1.5rem;padding:4px 8px 3px}
.add.lit{animation:lit 1.6s ease}
@keyframes lit{0%{box-shadow:0 0 0 0 rgba(20,163,91,.0)}20%{box-shadow:0 0 0 6px rgba(20,163,91,.22)}100%{box-shadow:0 0 0 0 rgba(20,163,91,0)}}
@media (min-width:900px){
  .ch-head{grid-template-columns:var(--date-col) 1fr;column-gap:56px;align-items:end}
  .ch-head > *{grid-column:2}
  .ch-head .ch-years{grid-column:1;grid-row:1 / span 3;text-align:right;align-self:start;font-size:clamp(2.5rem,4.6vw,4rem)}
  .spine::before{left:calc(var(--date-col) + 28px)}
  .ev{display:grid;grid-template-columns:var(--date-col) minmax(0,1fr);grid-template-rows:min-content 1fr;column-gap:56px;padding-left:0}
  .ev::before{left:calc(var(--date-col) + 28px - 5px)}
  .ev-date{text-align:right;margin:0;padding-top:.08rem;grid-column:1;grid-row:1}
  .ev-body{grid-column:2;grid-row:1 / span 2}
  .ev-art{display:block;grid-column:1;grid-row:2;align-self:start;margin-top:14px}
  .ev-art svg{width:100%;height:auto;display:block}
}

/* people */
.who:empty{display:none}
.who-card{display:flex;align-items:center;gap:14px;max-width:var(--measure);padding:10px 12px 10px 10px;border:1px solid var(--rule);border-radius:2px;background:var(--paper)}
.who-ph{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--wash);position:relative}
.who-ph img,.who-ph svg{width:100%;height:100%;object-fit:cover;display:block}
.who-card figcaption{display:grid;gap:2px;min-width:0;font-size:.875rem;line-height:1.35}
.who-card figcaption b{font-weight:650}
.who-card figcaption span{color:var(--ink-2)}
.who-card figcaption small{font-size:.6875rem;color:var(--ink-3);line-height:1.4}
.who-card figcaption small a{color:var(--ink-3)}
@media (min-width:640px){.who-ph{width:80px;height:80px}}

.who-card .who-quote{font-family:var(--f-doc);font-style:italic;font-size:1rem;line-height:1.4;color:var(--ink);margin-top:4px}

/* where "115" comes from */
.tally{max-width:var(--wide);margin:0 auto 48px;display:grid;gap:12px}
.tally-bar{display:flex;gap:2px;height:22px}
.tally-bar span,.tally-key i{display:block;border-radius:1px}
.t1{background:var(--ink)}.t2{background:#454B55}.t3{background:#7A808A}.t4{background:#A3A8B0}.t5{background:#CDD1D6}
.tally-key{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:8px 18px}
.tally-key li{display:grid;grid-template-columns:12px auto minmax(0,1fr);gap:8px;align-items:baseline;font-size:.8125rem;color:var(--ink-2);line-height:1.35}
.tally-key i{width:12px;height:12px;align-self:center}
.tally-key .num{font-size:1.5rem;color:var(--ink)}
.tally .src,.tally .dig{max-width:var(--measure)}

/* dig deeper links */
.dig{max-width:var(--measure);display:grid;gap:6px}
.dig:empty{display:none}
.dig-l{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.dig ul{list-style:none;display:grid;gap:6px}
.dig a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:4px 8px;text-decoration:none;font-size:.875rem;line-height:1.35;padding:7px 10px;border:1px solid var(--rule);border-radius:2px;background:var(--paper)}
.dig a:hover{border-color:var(--ink)}
.dig a:hover .hd{text-decoration:underline;text-underline-offset:3px}
.dig .pub{font-weight:700;font-size:.75rem;letter-spacing:.04em;white-space:nowrap}
.dig .hd{color:var(--ink-2);min-width:0}
.dig svg{width:10px;height:10px;color:var(--ink-3);align-self:center}
@media (max-width:420px){.dig a{grid-template-columns:minmax(0,1fr) auto}.dig .pub{grid-column:1}.dig .hd{grid-column:1;grid-row:2}.dig svg{grid-row:1 / span 2;grid-column:2}}

/* quotes from the decision */
.q{margin:0;max-width:var(--measure);display:grid;gap:8px}
.q blockquote{margin:0;font-family:var(--f-doc);font-style:italic;font-size:1.3125rem;line-height:1.45;color:var(--ink);text-wrap:pretty}
.q blockquote::before{content:"\201C";margin-left:-.42em;color:var(--ink-3)}
.q blockquote::after{content:"\201D";color:var(--ink-3)}
.q figcaption{font-size:.75rem;color:var(--ink-3);letter-spacing:.02em}
.q.big blockquote{font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.3}
@media (max-width:420px){.q blockquote::before{margin-left:0}}

/* panels used for explainers */
.panel{border:1px solid var(--rule);border-radius:2px;padding:20px;display:grid;gap:14px;max-width:var(--measure)}
.panel h4{font-size:1rem}

/* FFP explainer */
.ffp{display:grid;gap:12px}
.ffp-row{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:center;font-size:.875rem}
.ffp-bar{height:16px;border-radius:0 4px 4px 0;position:relative}
.ffp-bar.owner{background:repeating-linear-gradient(135deg,var(--rule) 0 6px,var(--paper) 6px 9px);outline:1px solid var(--rule)}
.ffp-bar.sponsor{background:var(--sky)}
.ffp-out{font-size:.8125rem;color:var(--ink-2);grid-column:2}
.ffp-out b{font-family:var(--f-num);font-size:1.25rem;color:var(--ink)}
@media (max-width:420px){.ffp-row{grid-template-columns:1fr}.ffp-out{grid-column:1}}

/* scheme diagram */
.scheme{max-width:var(--measure);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;font-size:.875rem}
.node{border:1px solid var(--ink);border-radius:2px;padding:12px;background:var(--paper);display:grid;gap:2px;text-align:center;position:relative;z-index:1}
.node b{font-size:1rem}
.node small{font-size:.75rem;color:var(--ink-3);line-height:1.35}
.stream{height:86px;position:relative}
.stream .pipe{position:absolute;top:0;bottom:0;border-radius:2px;overflow:hidden}
.stream.base .pipe{width:4px;right:25%;background:var(--sky)}
.stream.tag .pipe{width:28px;left:25%;background:var(--tag)}
.stream .lab{position:absolute;top:50%;transform:translateY(-50%);line-height:1.25;font-size:.75rem;color:var(--ink-2)}
.stream.base .lab{right:calc(25% + 14px);text-align:right}
.stream.tag .lab{left:calc(25% + 42px)}
.stream .lab b{display:block;font-family:var(--f-num);font-size:1.25rem;color:var(--ink)}
.drop{position:absolute;left:50%;top:-8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--paper);opacity:.85;animation:drip 2.2s linear infinite}
.stream.base .drop{width:2px;height:2px;margin-left:-1px}
.drop + .drop{animation-delay:-1.1s}
@keyframes drip{from{transform:translateY(0)}to{transform:translateY(96px)}}
.city{grid-column:1 / -1}
.down{grid-column:1 / -1;height:56px;display:flex;justify-content:center;gap:2px}
.down span{height:100%;border-radius:2px}
.books{grid-column:1 / -1;text-align:left;border-style:solid;padding:14px 16px;gap:8px}
.books .line{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:8px}
.books .line b{font-family:var(--f-num);font-size:1.5rem}
.books .stamp{font-size:.75rem;color:var(--ink-2)}
@media (max-width:380px){.stream .lab{font-size:.6875rem}.stream .lab b{font-size:1.0625rem}.stream.base .lab{right:calc(25% + 10px)}.stream.tag .lab{left:calc(25% + 34px)}}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;max-width:var(--measure)}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:10px}
.steps li::before{content:counter(s);font-family:var(--f-num);font-weight:800;font-size:1.5rem;line-height:1.1}
.gloss{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.875rem;max-width:var(--measure)}
.gloss dt{font-weight:650}
.gloss dd{margin:0;color:var(--ink-2)}
@media (max-width:420px){.gloss{grid-template-columns:1fr;gap:2px}.gloss dd{margin-bottom:8px}}

/* ---------- seasons ---------- */
.season{max-width:var(--wide);margin:0 auto;padding-top:64px;scroll-margin-top:calc(var(--bar-h) + 8px)}
.season + .season{border-top:1px solid var(--rule);margin-top:64px}
.ss-head{display:grid;gap:12px;margin-bottom:36px}
.ss-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.ss-label{font-size:clamp(3rem,10vw,5.25rem)}
.champ{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:4px 8px;border-radius:2px}
.champ svg{width:13px;height:13px}
.ss-track{position:relative;height:22px;background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));background-size:1px 100%;background-repeat:no-repeat;background-position:0 0,33.333% 0,66.667% 0,100% 0}
.ss-bar{position:absolute;left:0;top:3px;height:16px;display:flex;gap:2px}
.ss-bar span{display:block;height:100%}
.ss-bar .b{background:var(--sky)}
.ss-bar .t{background:var(--tag);border-radius:0 4px 4px 0}
.ss-axis{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ss-figs{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.9375rem;color:var(--ink-2)}
.ss-figs span{display:inline-flex;align-items:center;gap:8px}
.ss-figs b{color:var(--ink);font-weight:650}
.rules{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rules .eyebrow{margin-right:4px}
.chip{appearance:none;border:1px solid var(--rule);background:var(--paper);border-radius:2px;padding:7px 10px;font-size:.75rem;line-height:1.3;cursor:pointer;color:var(--ink-2);text-align:left;min-height:34px}
.chip b{color:var(--ink);font-weight:650;margin-right:4px}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* May 2013 strip */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;max-width:var(--measure)}
.strip > div{background:var(--wash);padding:14px;display:grid;gap:6px;align-content:start}
.strip .num{font-size:1.75rem}
.strip p{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.strip > div:last-child{background:var(--tag-soft)}
@media (max-width:560px){.strip{grid-template-columns:1fr}}

/* recap chart */
.chart{max-width:var(--wide);margin:72px auto 0;display:grid;gap:18px}
.chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px}
.chart-head h3{font-size:1.5rem}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden;max-width:100%}
.seg button{appearance:none;border:0;background:var(--paper);padding:10px 14px;font-size:.8125rem;font-weight:600;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.8125rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.rows{display:grid;gap:2px}
.row{display:grid;grid-template-columns:4.75rem minmax(0,1fr) 4.75rem;gap:10px;align-items:center;min-height:42px;padding:0 4px;border-radius:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.row:hover,.row:focus-visible,.row.sel{background:var(--wash)}
.row-l{font:800 1.125rem/1 var(--f-num);display:flex;align-items:center;gap:5px}
.row-l svg{width:12px;height:12px}
.row-t{position:relative;height:28px;background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));background-size:1px 100%;background-repeat:no-repeat;background-position:0 0,33.333% 0,66.667% 0,100% 0}
.row-b{position:absolute;left:0;top:5px;height:18px;display:flex;gap:2px;transition:gap .35s ease}
.row-b span{display:block;height:100%;transition:background-color .6s ease}
.row-b .b{background:var(--sky)}
.row-b .t{background:var(--tag);border-radius:0 4px 4px 0}
.chart.reported .row-b{gap:0}
.chart.reported .row-b .t{background:var(--sky)}
.row-v{text-align:right;font-size:.875rem;font-variant-numeric:tabular-nums;line-height:1.2}
.row-v small{display:block;color:var(--ink-3);font-size:.75rem}
.chart.reported .row-v small{visibility:hidden}
.axis{display:grid;grid-template-columns:4.75rem minmax(0,1fr) 4.75rem;gap:10px;padding:0 4px;font-size:.6875rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.axis div{display:flex;justify-content:space-between}
@media (max-width:420px){.row,.axis{grid-template-columns:3.6rem minmax(0,1fr) 4.2rem;gap:6px}.row-l{font-size:1rem}}
.chart-total{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.875rem;color:var(--ink-2);border-top:1px solid var(--ink);padding-top:12px}
.chart-total b{color:var(--ink)}
details.tbl summary{cursor:pointer;font-size:.875rem;font-weight:600;width:max-content;max-width:100%;padding:6px 0}
.tblwrap{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums;width:100%}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:.75rem;color:var(--ink-3);font-weight:600}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--paper);border:1px solid var(--ink);border-radius:2px;padding:10px 12px;font-size:.8125rem;min-width:13rem;max-width:calc(100vw - 24px);box-shadow:0 6px 24px rgba(15,17,21,.12)}
.tip h5{margin:0 0 6px;font:800 1.125rem/1 var(--f-num)}
.tip .tr{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.tip .tr b{font-weight:650}
.tip .ln{width:14px;height:3px;border-radius:2px}

/* ledger */
.ledger{max-width:var(--wide);margin:56px auto 0;display:grid;gap:12px}
.ledger > *{max-width:var(--measure)}
.ledger h3{font-size:1.5rem}
.ldg td{white-space:normal}
.ldg td.amt{white-space:nowrap;width:7rem}
.ldg tr.grp th{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding-top:16px}
.ldg tfoot td{font-weight:700;border-bottom:3px double var(--ink);border-top:1px solid var(--ink)}
.ledger figcaption{font-size:.8125rem;color:var(--ink-3)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:var(--measure)}
@media (max-width:640px){.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.month h5{margin:0 0 6px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;font-size:.6875rem;font-variant-numeric:tabular-nums}
.days span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:1px;color:var(--ink-3);max-width:100%}
.days .wk{color:var(--ink-3);font-weight:600;aspect-ratio:auto;padding-bottom:2px}
.days .sit{background:var(--ink);color:var(--paper);font-weight:600}
.days .we{color:#B4B8BF}

/* duration bars */
.dur{display:grid;gap:12px;max-width:var(--measure)}
.dur-row{display:grid;gap:6px}
.dur-row .lbl{display:flex;justify-content:space-between;gap:12px;font-size:.875rem}
.dur-row .lbl span:last-child{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.dur-row .trk{height:10px;background:var(--wash);border-radius:0 3px 3px 0}
.dur-row .fill{height:100%;background:var(--ink-3);border-radius:0 3px 3px 0}
.dur-row.hot .fill{background:var(--ink)}

/* charge sheet */
.matrix{max-width:var(--wide);margin:0 auto;display:grid;gap:2px}
.mx-row{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 6.75rem;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.mx-head{border-bottom:1px solid var(--ink);padding-top:0}
.mx-code{font:800 1.25rem/1 var(--f-num)}
.mx-name{display:grid;gap:4px;min-width:0}
.mx-name b{font-weight:600;font-size:.9375rem;line-height:1.35}
.mx-name small{font-size:.75rem;color:var(--ink-3)}
.mx-cells{display:none}
.mx-status{font-size:.8125rem;font-weight:650;display:flex;align-items:center;gap:8px}
.mx-status i{width:10px;height:10px;border-radius:1px;background:var(--ink);flex:none}
.mx-status.no i{background:transparent;border:1.5px solid var(--ink)}
.mx-status.part i{background:linear-gradient(135deg,var(--ink) 50%,var(--paper) 50%);outline:1.5px solid var(--ink);outline-offset:-1.5px}
@media (max-width:380px){.mx-row{grid-template-columns:2.4rem minmax(0,1fr) 5.6rem;gap:8px}.mx-status{font-size:.75rem}}
@media (min-width:860px){
  .mx-row{grid-template-columns:3.25rem minmax(0,1fr) 22rem 8.5rem}
  .mx-cells{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) 3.2rem;gap:3px;align-items:center;position:relative}
  .mx-name small{display:none}
  .mx-cells i{height:18px;border-radius:1px;background:var(--wash)}
  .mx-cells i.on{background:var(--ink)}
  .mx-cells .redbar{position:absolute;left:0;right:calc(3.2rem + 3px);top:0;bottom:0;background:var(--ink);color:var(--paper);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;border-radius:1px}
  .mx-head .mx-cells span{font:700 .8125rem/1 var(--f-num);color:var(--ink-3);text-align:center}
}
.mx-head .mx-name b,.mx-head .mx-status{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* rulebook */
.rulebook{max-width:var(--wide);margin:56px auto 0;display:grid;gap:0}
.rb{display:grid;gap:10px;padding:22px 0;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--bar-h) + 16px)}
@media (min-width:900px){.rb{grid-template-columns:var(--date-col) 1fr;column-gap:56px}.rb > *{grid-column:2}.rb .rb-n{grid-column:1;grid-row:1 / span 4;text-align:right}}
.rb-n{font:800 1.5rem/1.1 var(--f-num)}
.rb h4{font-size:1.125rem}
.rb .q blockquote{font-size:1.125rem}
.rb-nums{font-size:.8125rem;color:var(--ink-2);max-width:var(--measure)}
.rb-intro{font-size:1rem}

/* not found list */
.nf-wrap{margin-top:56px;display:grid;gap:18px}
.nf-h{font-size:1.5rem}
.nf{list-style:none;display:grid;gap:14px;max-width:var(--measure)}
.nf li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.nf li::before{content:"";width:11px;height:11px;border-radius:50%;border:2px solid var(--ink-3);margin-top:.4rem}
.nf li span.r{display:block;font-size:.75rem;color:var(--ink-3);margin-top:2px}

/* next steps */
.next{max-width:var(--wide);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.next > div{background:var(--wash);padding:20px;display:grid;gap:8px;align-content:start}
.next .num{font-size:2rem}
.next p{font-size:.9375rem;color:var(--ink-2)}
.next p.num{color:var(--ink)}
@media (max-width:760px){.next{grid-template-columns:1fr}}
.next-src{margin-top:14px}
#ch10 .dig{margin-top:18px}
@media (min-width:1px){#ch10 .dig.colw{max-width:var(--wide)}}

/* sources */
.sources{max-width:var(--wide);margin:clamp(72px,11vw,128px) auto 0;border-top:1px solid var(--ink);padding-top:28px;display:grid;gap:18px;font-size:.875rem;color:var(--ink-2)}
.sources h2{font-size:1.25rem;color:var(--ink)}
.sources h3{font-size:1rem;color:var(--ink);margin-top:10px}
.sources ul{display:grid;gap:8px;padding-left:18px}
.sources p{max-width:var(--measure)}
.sources .docs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sources .docs a{display:inline-block;padding:10px 12px;border:1px solid var(--ink);border-radius:2px;text-decoration:none;color:var(--ink)}
.sources .docs a:hover{background:var(--wash)}
.reading li{overflow-wrap:anywhere}
.reading .pub{font-weight:700;color:var(--ink)}
.reading .dt{color:var(--ink-3);white-space:nowrap}
.credits{font-size:.8125rem}
.src-note{font-size:.8125rem;color:var(--ink-3)}
.noscript{max-width:var(--wide);margin:20px auto;padding:14px var(--gut);border:1px solid var(--rule)}

/* ---------- running-total ticker ---------- */
.ticker{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--ink);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));transition:transform .35s ease;box-shadow:0 -6px 24px rgba(15,17,21,.06)}
.ticker.off{transform:translateY(110%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
.tk-in{max-width:var(--wide);margin-inline:auto;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,18rem);gap:6px 24px;align-items:center}
.tk-a{display:grid;gap:5px}
.tk-lab{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tk-lab .sm{display:none}
.tk-valrow{display:flex;align-items:center;gap:8px}
.tk-val{font:850 2.125rem/1 var(--f-num);min-width:6.6ch;font-variant-numeric:tabular-nums;transition:color .5s ease}
.tk-val.up{color:var(--add)}
.tk-sum{font:700 .9375rem/1.1 var(--f-num);letter-spacing:.01em;color:var(--ink-2);white-space:nowrap}
.tk-last{font-size:.75rem;color:var(--ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk-trk{display:grid;gap:4px;min-width:0}
.tk-track{height:8px;background:var(--wash);border-radius:0 3px 3px 0;overflow:hidden;position:relative}
.tk-fill,.tk-new{position:absolute;top:0;bottom:0;left:0;width:0;transition:width .65s cubic-bezier(.2,.8,.2,1),left .65s cubic-bezier(.2,.8,.2,1)}
.tk-fill{background:var(--tag)}
.tk-new{background:var(--add-hi);border-radius:0 3px 3px 0}
.tk-of{font-size:.6875rem;color:var(--ink-3);text-align:right}
@media (max-width:640px){
  .tk-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"a trk" "last last";gap:4px 14px}
  .tk-a{grid-area:a}.tk-trk{grid-area:trk}.tk-last{grid-area:last;text-align:left}
  .tk-lab .lg{display:none}.tk-lab .sm{display:inline}
  .tk-val{font-size:1.75rem}
}


/* ---------- rule sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:0 var(--gut) env(safe-area-inset-bottom,0px);pointer-events:none}
.sh-in{pointer-events:auto;max-width:36rem;margin:0 auto;background:var(--paper);border:1px solid var(--ink);border-bottom:0;border-radius:2px 2px 0 0;padding:16px 20px 22px;display:grid;gap:10px;box-shadow:0 -10px 40px rgba(15,17,21,.16);max-height:72vh;overflow:auto;overscroll-behavior:contain}
.sh-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sh-in h3{font-size:1.25rem}
.sh-nums{font-size:.8125rem;color:var(--ink-2)}
.sh-nums b{color:var(--ink)}
.sh-close{appearance:none;border:1px solid var(--ink);background:var(--paper);height:40px;padding:0 12px;border-radius:2px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:.8125rem;flex:none}
.sh-close:hover{background:var(--wash)}
.sh-close svg{width:12px;height:12px}

/* ---------- illustrations ---------- */
.art{display:block}
.art text{font-family:var(--f-text);fill:var(--ink)}
.art .t-num{font-family:var(--f-num);font-weight:800}
.art .t-cap{font-weight:700;letter-spacing:.1em}
.art .t-mut{fill:var(--ink-3)}
.art .t-inv{fill:var(--paper)}
.art .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .ln2{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art .lnm{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art .dash{stroke-dasharray:5 5}
.art .ink{fill:var(--ink)}
.art .pap{fill:var(--paper)}
.art .wsh{fill:var(--wash)}
.art .rul{fill:var(--rule)}
.art .sky{fill:var(--sky)}
.art .skys{fill:var(--sky-soft)}
.art .tag{fill:var(--tag)}
.art .tags{fill:var(--tag-soft)}
.art .grn{fill:var(--add-hi)}
.art .grs{fill:var(--add-soft)}
.art .mut{fill:var(--ink-3)}
.art .no{fill:none}
.art .o{transform-box:fill-box;transform-origin:center}
.art .ob{transform-box:fill-box;transform-origin:50% 100%}
.art .ot{transform-box:fill-box;transform-origin:50% 0}
.art .ol{transform-box:fill-box;transform-origin:0 50%}

/* animations only run on the active slide (.play) or an on-screen timeline spot (.play) */
.play .a-draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:draw 1.6s ease forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.play .a-stamp{animation:stamp .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d,0s)}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(var(--r,0deg))}100%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
.play .a-drop{animation:dropin .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0s)}
@keyframes dropin{0%{opacity:0;transform:translateY(-26px)}100%{opacity:1;transform:none}}
.play .a-pop{animation:popin .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0s)}
@keyframes popin{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
.play .a-fade{animation:fadein .6s ease both;animation-delay:var(--d,0s)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.play .a-grow{animation:growy .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes growy{from{transform:scaleY(0)}to{transform:none}}
.play .a-growx{animation:grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.play .a-bob{animation:bob 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.play .a-sway{animation:sway 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.play .a-wobble{animation:wobble 3.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg)}40%{transform:rotate(1.5deg)}60%{transform:rotate(-1deg)}80%{transform:rotate(.5deg)}}
.play .a-flow{animation:flow 1.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes flow{from{transform:translateY(-14px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(64px);opacity:0}}
.play .a-tilt{animation:tilt 1.4s cubic-bezier(.3,1.4,.5,1) both .3s}
@keyframes tilt{from{transform:rotate(0)}to{transform:rotate(var(--r,10deg))}}
.play .a-needle{animation:needle 3.2s cubic-bezier(.3,1.2,.4,1) both}
@keyframes needle{0%{transform:rotate(-88deg)}55%{transform:rotate(var(--r,40deg))}62%{transform:rotate(calc(var(--r,40deg) - 4deg))}70%{transform:rotate(calc(var(--r,40deg) + 3deg))}100%{transform:rotate(var(--r,40deg))}}
.play .a-slide{animation:slideout 1.2s cubic-bezier(.3,1.2,.5,1) both;animation-delay:var(--d,.4s)}
@keyframes slideout{from{transform:translate(var(--fx,-40px),var(--fy,0))}to{transform:none}}
.play .a-strike{animation:strike 1.1s ease-in-out both;animation-delay:var(--d,.2s)}
@keyframes strike{0%{transform:rotate(30deg)}35%{transform:rotate(36deg)}55%{transform:rotate(-3deg)}65%{transform:rotate(0)}100%{transform:rotate(0)}}
.play .a-flash{animation:flash 1.1s ease both;animation-delay:var(--d,.2s)}
@keyframes flash{0%,50%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:none}}
.play .a-fly{animation:fly 2.6s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:var(--d,0s)}
@keyframes fly{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}50%{transform:translate(calc(var(--fx,120px) * .5),-46px) rotate(-14deg)}90%{opacity:1}100%{opacity:0;transform:translate(var(--fx,120px),0) rotate(-28deg)}}
.play .a-leak{animation:leak 1s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes leak{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(16px,46px)}}
.play .a-leakstop{animation:leakstop 4.2s linear forwards}
@keyframes leakstop{0%,72%{opacity:1}78%,100%{opacity:0}}
.play .a-cork{animation:cork 4.2s cubic-bezier(.3,1.2,.5,1) both}
@keyframes cork{0%,55%{transform:translate(70px,-70px) rotate(-60deg);opacity:0}60%{opacity:1}78%{transform:none}100%{transform:none}}
.play .a-sand-top{animation:sandtop 6s linear infinite}
@keyframes sandtop{from{transform:scaleY(1)}to{transform:scaleY(.08)}}
.play .a-sand-bot{animation:sandbot 6s linear infinite}
@keyframes sandbot{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
.play .a-stream{animation:streamy .5s linear infinite}
@keyframes streamy{from{stroke-dashoffset:0}to{stroke-dashoffset:-12}}
.play .a-bounce{animation:bump 2.6s ease-in-out infinite}
@keyframes bump{0%,100%{transform:translateX(-26px)}42%{transform:translateX(0)}48%{transform:translateX(-9px)}54%{transform:translateX(0)}60%{transform:translateX(-4px)}66%{transform:translateX(-26px)}}
.play .a-notif{animation:notif .7s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--d,.5s)}
@keyframes notif{from{transform:translateY(-36px);opacity:0}to{transform:none;opacity:1}}
.play .a-rock{animation:rock 3.6s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.play .a-rockinv{animation:rockinv 3.6s ease-in-out infinite}
@keyframes rockinv{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
.play .a-shift{animation:shift 2.4s ease-in-out infinite}
@keyframes shift{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.play .a-shout{animation:shout 1.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes shout{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.play .a-blink{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  html,body{height:auto!important;overflow:visible!important}
  .view-slides #timeline{display:block!important}
  .bar,.ticker,.sheet,.tip,.story,.st-pop,.hero-cta{display:none!important}
  .wrap{padding-bottom:0}
}
