@import url('./fonts/fonts.css');

/* Run of Show - light neo-brutalism with a sports broadcast edge.
   No frameworks, no build step, no network dependencies. */

:root{
  --paper:#FBF6E9;
  --sheet:#FFFDF7;
  --ink:#141210;
  --ink-2:#38332C;
  --ink-3:#6A6259;
  --rule:#141210;

  --orange:#FF5C2B;        /* fills, rules, large type */
  --orange-text:#C93C08;   /* the same accent at a weight that passes AA as small text
                              (#FF5C2B is 3.03:1 on the sheet - fine at 24px, not at 11px) */
  --yellow:#FFE94A;
  --cyan:#00D9C0;
  --pink:#FF2E63;
  --green:#2BC48A;
  --violet:#B47BFF;

  --display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --head:'Archivo Black','Helvetica Neue',Arial,sans-serif;
  --body:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type ramp. Was 18 distinct sizes accreted over the build; these are the
     eight that actually carry meaning. Near-duplicates (20/20.5, 14/14.5,
     9/9.5/10) were collapsed onto the nearest step. */
  --fs-lede:20px; --fs-body-lg:17.5px; --fs-body:16px; --fs-sm:15px;
  --fs-xs:14px; --fs-micro:12.5px; --fs-mono:11.5px; --fs-nano:9.5px;

  --bd:3px solid var(--ink);
  --bd-4:4px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-lg:9px 9px 0 var(--ink);

  /* Space between the sheet and the viewport edge. The sheet's drop shadow has
     to fit inside it, or the right-hand shadow is clipped on every width that
     is narrower than the sheet's max. Breakpoints below shrink it. */
  --gutter:24px;
}

/* Breakpoints, in one place so the queries below read as a system:
     phone    <= 520   one column, three-up tiles, stacked nav rows
     small    <= 700   tighter page padding
     tablet   <= 1023  the eight tabs become a 4x2 grid; tiles go three-up
     desktop  >= 1024  everything side by side; the article rail appears
     wide     >= 1180  the article rail gets its full gap
   Touch handling is by capability (pointer:coarse, hover:hover), not width. */

/* League palette - each league is visually distinct at a glance.
   The bare [data-lg] fallback MUST come first: it has the same specificity as
   the valued selectors below, so placing it last would override every one of
   them and render the whole palette grey. */
[data-lg]{--lg:#E8E2D4}
[data-lg="nba"]{--lg:#FF5C2B}      [data-lg="wnba"]{--lg:#FF7BD5}
[data-lg="nfl"]{--lg:#2BC48A}      [data-lg="soccer"]{--lg:#3D8BFF}
[data-lg="tennis"]{--lg:#C9F03C}   [data-lg="euroleague"]{--lg:#B47BFF}
[data-lg="nhl"]{--lg:#5BD6E8}      [data-lg="mlb"]{--lg:#FFB627}
[data-lg="ncaa"]{--lg:#FF9F6E}     [data-lg="f1"]{--lg:#FF3B3B}
[data-lg="ligue-1"]{--lg:#8ED9A0}  [data-lg="rugby"]{--lg:#D0C0FF}
[data-lg="premier-league"]{--lg:#7FB8FF} [data-lg="cross-sport"]{--lg:#E8E2D4}

*{box-sizing:border-box}
/* iOS inflates text when a phone turns sideways unless told not to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg{max-width:100%;height:auto}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;overflow-wrap:break-word;
  background-image:radial-gradient(var(--ink) 1px,transparent 1px);
  background-size:24px 24px;background-position:-12px -12px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------------- ticker ---------------- */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;white-space:nowrap;padding:8px 0;border-bottom:var(--bd-4)}
.ticker-track{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;animation:slide 150s linear infinite;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
.ticker b{color:var(--orange);font-weight:600}
.ticker .sep{opacity:.4;padding:0 14px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------------- sheet + masthead ---------------- */
.sheet{width:min(1320px,calc(100% - var(--gutter)*2));margin:var(--gutter) auto;background:var(--sheet);border:var(--bd-4);box-shadow:12px 12px 0 var(--ink)}
@media(max-width:900px){:root{--gutter:10px}.sheet{margin-top:14px;margin-bottom:14px;box-shadow:6px 6px 0 var(--ink)}}

.masthead{background:var(--yellow);border-bottom:var(--bd-4);padding:18px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:38px;line-height:.9;text-transform:uppercase;letter-spacing:.02em;text-decoration:none}
.logo span{background:var(--ink);color:var(--yellow);padding:1px 9px;margin:0 3px;display:inline-block}
.stamp{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:6px 12px;transform:rotate(-1.6deg)}

nav.tabs{display:flex;flex-wrap:wrap;border-bottom:var(--bd-4);background:var(--sheet)}
nav.tabs a{flex:1;min-width:118px;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--head);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:12px 8px;border-right:var(--bd);position:relative}
nav.tabs a:last-child{border-right:none}
/* Below 1024 the eight tabs no longer fit one row. Wrapping flex left a lone
   tab stretched across a second row with nothing separating the rows; a 4x2
   grid keeps every tab visible, equal, and ruled. */
@media (max-width:1023px){
  nav.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  nav.tabs a{min-width:0;padding:12px 6px}
  nav.tabs a:nth-child(4n){border-right:none}
  nav.tabs a:nth-child(-n+4){border-bottom:var(--bd)}
}
nav.tabs a:hover{background:var(--cyan)}
nav.tabs a[aria-current="page"]{background:var(--ink);color:var(--yellow)}
nav.tabs .count{font-family:var(--mono);font-size:var(--fs-nano);opacity:.65;margin-left:4px;vertical-align:super}

main{padding:30px 26px 70px}
@media(max-width:700px){main{padding:22px 16px 60px}}
@media(max-width:520px){main{padding:20px 14px 56px}}

/* ---------------- headings ---------------- */
.kicker{display:inline-block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--sheet);padding:4px 11px}
h1.page{font-family:var(--head);font-size:clamp(29px,4.1vw,48px);line-height:1.04;letter-spacing:-.025em;margin:16px 0 14px;max-width:23ch;text-wrap:balance}
h1.page mark{background:var(--orange);color:#fff;padding:0 7px}
.page-sub{font-size:var(--fs-body);color:var(--ink-2);max-width:70ch;margin:0 0 26px}

.lab{display:flex;align-items:center;gap:14px;margin:46px 0 20px;flex-wrap:wrap}
.lab h2{font-family:var(--head);font-size:15px;letter-spacing:.09em;text-transform:uppercase;background:var(--ink);color:var(--sheet);padding:6px 13px;margin:0;white-space:nowrap}
.lab .rule{flex:1;height:4px;background:var(--ink)}
.lab .c{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;border:var(--bd);padding:4px 10px;background:var(--yellow);white-space:nowrap}

/* ---------------- stat tiles ---------------- */
/* Issue hero. The headline carries the week; the lead story's image sits beside
   it so the top of the page is not a wall of type. Reuses .shot so the credit,
   "live source" and "title card" badges position themselves for free. */
.issue-head{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;margin-top:2px}
.issue-head-text{min-width:0}
.issue-head .kicker{margin-bottom:2px}
.issue-head h1.page{max-width:20ch;margin:14px 0 0}
.issue-hero{border:var(--bd-4);box-shadow:var(--sh);margin:0}
/* Image sizing is left to `.shot img` (16/9, cover). An override here would be
   dead anyway: this block precedes .shot in the file and the specificity ties. */
@media(max-width:900px){
  .issue-head{grid-template-columns:1fr;gap:20px}
  .issue-head h1.page{max-width:23ch}
}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:14px;margin:26px 0 8px}
/* auto-fit put five tiles on a tablet row and orphaned the sixth. Three-up
   gives two even rows there and on phones; two-up under 380px. */
@media (max-width:1023px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){
  .tiles{gap:10px;margin:22px 0 6px}
  .tile{padding:10px;box-shadow:4px 4px 0 var(--ink)}
  .tile .n{font-size:36px}
  /* "Milestones" and "Superseded" are ten mono characters; at .14em tracking
     they split mid-word in a three-up tile. Never break a label inside a word. */
  .tile .l{letter-spacing:.06em;overflow-wrap:normal}
}
@media (max-width:380px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{border:var(--bd-4);padding:14px 16px;background:var(--sheet);box-shadow:var(--sh)}
.tile .n{font-family:var(--display);font-size:46px;line-height:.9}
.tile .l{font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.tile.c1{background:var(--yellow)} .tile.c2{background:var(--cyan)}
/* Ink, never white, on saturated fills: white on orange is 3.08:1 and fails AA
   for the 10px labels. Ink is 6.07:1 and reads as harder-edged besides. */
.tile.c3{background:var(--orange)} .tile.c4{background:var(--pink)}
.tile.alert{background:var(--pink)}

/* ---------------- filters ---------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border:var(--bd);background:var(--paper);padding:12px 14px;margin-bottom:22px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:var(--bd);background:var(--sheet);color:var(--ink);padding:4px 9px;cursor:pointer;line-height:1.5}
.chip:hover{background:var(--cyan)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.chip[data-lg][aria-pressed="true"]{background:var(--lg);color:var(--ink)}
.spacer{flex:1;min-width:8px}
input[type="search"],select{font-family:var(--body);font-size:14px;padding:7px 11px;border:var(--bd);background:var(--sheet);color:var(--ink);min-width:200px;min-height:40px}
/* Under 640 the filter bar goes to full-width rows: chips, then selects (two
   share a row, one takes it), then search. The spacer has nothing to space. */
@media (max-width:640px){
  .filters{padding:10px 12px;gap:8px}
  .filters .spacer{display:none}
  .filters select{flex:1 1 40%;min-width:0}
  .filters input[type="search"]{flex:1 1 100%;min-width:0;width:100%}
  .filters .count{margin-left:auto}
  /* iOS zooms the page when a focused field is under 16px. */
  input[type="search"],select{font-size:16px}
}
input[type="search"]:focus,select:focus{outline:none;background:var(--yellow)}
.count{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ---------------- pills ---------------- */
.pill{display:inline-block;font-family:var(--mono);font-size:var(--fs-nano);font-weight:600;letter-spacing:.11em;text-transform:uppercase;border:2px solid var(--ink);padding:2px 7px;margin:0 5px 5px 0;background:var(--lg,#E8E2D4);line-height:1.6}
.pill.plain{background:var(--paper)}
.pill.ink{background:var(--ink);color:var(--yellow)}
.pill.warn{background:var(--pink);color:#fff}
.pill.ok{background:var(--green)}
.pill.hl{background:var(--yellow)}

/* ---------------- layout splits ---------------- */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:36px}
@media(max-width:1000px){
  .split{grid-template-columns:1fr;gap:26px}
  .split .read{max-width:72ch}   /* stacked, the column is the page: cap the measure */
}
@media(min-width:701px) and (max-width:1000px){
  .split>:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  .split .box{margin-bottom:0}
}
.read p{margin:0 0 15px;font-size:var(--fs-body)}
.read p:first-of-type{font-size:var(--fs-lede);line-height:1.42;font-weight:700;border-left:7px solid var(--orange);padding-left:17px}
.read.cols{columns:2;column-gap:40px}
.read.cols p{break-inside:avoid}
@media(max-width:820px){.read.cols{columns:1}}

.box{border:var(--bd);background:var(--sheet);box-shadow:5px 5px 0 var(--ink);padding:15px 17px;margin-bottom:18px}
.box.hl{background:var(--yellow)}
.box h4{font-family:var(--head);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;margin:0 0 11px}
.row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1.5px dotted var(--ink);font-size:14px}
.row:last-child{border-bottom:none}
.row b{font-family:var(--mono);font-weight:600;white-space:nowrap}

.callout{border:var(--bd);border-left:8px solid var(--orange);background:var(--paper);padding:13px 17px;font-size:var(--fs-xs);color:var(--ink-2);margin:20px 0}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px}
.card{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh-lg);display:flex;flex-direction:column;position:relative}
.card .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--ink);color:var(--yellow);padding:8px 14px;font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.13em;text-transform:uppercase}
.card .cap .no{font-family:var(--display);font-size:18px;color:#fff;line-height:1}
/* story imagery - every story carries at least one */
.shot{position:relative;border-bottom:var(--bd-4);background:var(--paper);overflow:hidden}
.shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.shot img[src$=".svg"]{object-fit:contain}
.shot .cred{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:3px 8px}
.shot .remote{position:absolute;right:0;bottom:0;font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink);padding:3px 8px}
.shot .made{position:absolute;right:0;top:0;font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;background:var(--violet);color:var(--ink);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:3px 8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:4px;padding:4px;background:var(--ink)}
.gallery a{display:block;border:2px solid var(--ink);overflow:hidden;background:var(--paper)}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .12s}
@media (hover:hover){.gallery a:hover img{transform:scale(1.07)}}

.card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--head);font-size:20px;line-height:1.14;letter-spacing:-.012em;margin:0 0 10px}
.card p{margin:0 0 13px;font-size:15px;color:var(--ink-2)}
.src{font-family:var(--mono);font-size:var(--fs-mono);border-top:2px solid var(--ink);padding-top:9px;margin-top:auto;color:var(--ink-3)}
.src a{color:var(--orange-text);font-weight:600;text-decoration:none}
.src a:hover{text-decoration:underline}

/* ---------------- timeline ---------------- */
.yr{font-family:var(--display);font-size:44px;line-height:1;text-transform:uppercase;border-bottom:var(--bd-4);margin:36px 0 0;padding-bottom:4px}
.tlx{display:grid;grid-template-columns:118px 1fr}
.tlx .d{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:16px 14px 16px 0;border-right:5px solid var(--ink);border-bottom:var(--bd);text-align:right;color:var(--ink-3)}
.tlx .v{padding:16px 0 16px 22px;border-bottom:var(--bd);position:relative}
.tlx .v:before{content:"";position:absolute;left:-9px;top:22px;width:13px;height:13px;border:3px solid var(--ink);background:var(--sheet)}
.tlx .v[data-sig="4"]:before{background:var(--orange)}
.tlx .v[data-sig="5"]:before{background:var(--pink);transform:rotate(45deg)}
/* One column on phones. The date moves above its entry and the 5px rail moves
   from the date column's right edge to the left edge of both cells, so the
   line and its markers survive the stack instead of floating in the gutter. */
@media(max-width:640px){
  .tlx{grid-template-columns:1fr}
  .tlx .d,.tlx .v{border-left:5px solid var(--ink)}
  .tlx .d{border-right:none;border-bottom:none;text-align:left;padding:14px 0 2px 22px}
  .tlx .v{padding-top:0}
  .tlx .v:before{top:4px}
  .yr{font-size:36px;margin-top:28px}
}
.tlx h4{font-family:var(--head);font-size:18.5px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.tlx p{margin:0 0 9px;font-size:var(--fs-xs);color:var(--ink-2)}
.sigbar{display:inline-flex;gap:2px;vertical-align:middle;margin-left:8px}
.sigbar i{width:6px;height:12px;background:var(--ink);display:block}
.sigbar i.off{background:transparent;border:1.5px solid var(--ink)}

/* ---------------- entities ---------------- */
.ecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:20px}
.ent{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh);display:flex;flex-direction:column}
.ent .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:13px 16px 0}
.ent h3{font-family:var(--head);font-size:19px;line-height:1.12;margin:0;letter-spacing:-.012em}
.ent .mn{font-family:var(--display);font-size:30px;line-height:.85;color:var(--orange)}
.ent .bd{padding:8px 16px 15px;flex:1;display:flex;flex-direction:column}
.ent .role{font-size:14px;color:var(--ink-2);margin:6px 0 11px}
.ent .meta{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--ink-3);border-top:2px dotted var(--ink);padding-top:9px;margin-top:auto}
.ent details{border-top:2px solid var(--ink);margin-top:11px}
.ent summary{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 0 0;cursor:pointer;list-style:none;color:var(--orange-text)}
.ent summary::-webkit-details-marker{display:none}
.ent summary:after{content:" ▸"}
.ent details[open] summary:after{content:" ▾"}
.ent .dossier{padding:10px 0 4px}
.ent .dossier h5{font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:11px 0 5px}
.ent .dossier ul{margin:0;padding-left:16px;font-size:13.5px;color:var(--ink-2)}
.ent .dossier li{margin-bottom:4px}

/* ---------------- claims ---------------- */
.claim{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh);padding:16px 18px;margin-bottom:16px;position:relative}
.claim.stale{border-left:9px solid var(--pink)}
.claim.superseded{opacity:.6}
.claim .val{font-family:var(--display);font-size:40px;line-height:.9;margin-bottom:4px}
.claim .txt{font-size:16px;margin:0 0 10px;max-width:80ch}
.claim .meta{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.05em;color:var(--ink-3);border-top:2px dotted var(--ink);padding-top:9px}
.claim .meta a{color:var(--orange-text);font-weight:600;text-decoration:none}
.revs{margin:11px 0 0;border:2px solid var(--ink);background:var(--paper)}
.revs .rv{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;padding:6px 11px;font-family:var(--mono);font-size:11.5px;border-bottom:1.5px dotted var(--ink)}
.revs .rv:last-child{border-bottom:none}
.revs .rv.cur{background:var(--yellow);font-weight:600}

/* ---------------- quiz ---------------- */
.quizwrap{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start}
@media(max-width:900px){.quizwrap{grid-template-columns:1fr}}
@media(min-width:701px) and (max-width:900px){
  .quizwrap>:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  .quizwrap .box{margin-bottom:0}
}
.qcard{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh-lg);padding:28px}
.qcard .qn{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.qcard .q{font-family:var(--head);font-size:25px;line-height:1.22;letter-spacing:-.015em;margin:0 0 20px}
.qcard .a{border:var(--bd);border-left:9px solid var(--green);background:var(--paper);padding:15px 17px;font-size:17px;margin-bottom:20px}
.btn{font-family:var(--head);font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;padding:11px 20px;border:var(--bd);background:var(--sheet);color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
@media (hover:hover){.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.go{background:var(--yellow)}
.btn.bad{background:var(--pink);color:#fff}
.btnrow{display:flex;gap:11px;flex-wrap:wrap}
.bar{height:22px;border:var(--bd);background:var(--paper);display:flex;overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%}
.bar i.r{background:var(--green)} .bar i.w{background:var(--pink)}

/* ---------------- archive ---------------- */
.iss{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh);margin-bottom:18px}
.iss summary{padding:16px 20px;cursor:pointer;list-style:none}
.iss summary::-webkit-details-marker{display:none}
.iss .hd{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.iss h3{font-family:var(--head);font-size:22px;line-height:1.14;margin:5px 0 8px;letter-spacing:-.015em}
.iss .body{padding:0 20px 22px;border-top:2px dotted var(--ink);margin-top:4px}

.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.sminicard{border:var(--bd);background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.sminicard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--bd)}
.sminicard .t{font-family:var(--head);font-size:var(--fs-micro);line-height:1.2;padding:9px 10px 6px}
.sminicard>div:last-child{padding:0 10px 8px}

.empty{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);border:2px dashed var(--ink);padding:26px;text-align:center}
.muted{color:var(--ink-3)}
kbd{font-family:var(--mono);font-size:var(--fs-mono);border:2px solid var(--ink);background:var(--paper);padding:1px 5px;box-shadow:2px 2px 0 var(--ink)}

/* ---------------- article reader ---------------- */
.card{text-decoration:none;color:inherit}
/* Transform-on-hover sticks after a tap on touch screens, so it is gated on a
   real hover. Colour hovers are harmless and stay ungated. */
@media (hover:hover){.card:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--ink)}}
.card{transition:transform .1s,box-shadow .1s}
.readmore{font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-text);border-top:2px solid var(--ink);padding-top:9px;margin-top:auto}

.backlink{display:inline-block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);padding:5px 11px;text-decoration:none;margin-bottom:22px}
.backlink:hover{background:var(--orange);color:#fff}

/* Measure. 74ch measured on the 16px root produced 78 characters per line of
   17.5px body copy - past the comfortable 60-75. 68ch lands at ~72. */
.story{max-width:68ch}
.story .headline{font-family:var(--head);font-size:clamp(30px,4.6vw,52px);line-height:1.02;
  letter-spacing:-.03em;margin:14px 0 16px}
.story .dek{font-family:var(--body);font-size:21px;line-height:1.5;color:var(--ink-2);
  border-left:7px solid var(--orange);padding-left:18px;margin:0 0 22px}
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:var(--bd);border-bottom:var(--bd);
  padding:11px 0;margin-bottom:26px}
.byline .byl{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:auto}

figure{margin:26px 0;border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh)}
figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--bd)}
figure img[src$=".svg"]{object-fit:contain}
figcaption{font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:9px 13px;color:var(--ink-2)}
figure.hero{margin:0 0 30px}

.body{max-width:none}
.body p{font-size:17.5px;line-height:1.68;margin:0 0 19px}
.body h2{font-family:var(--head);font-size:23px;letter-spacing:-.015em;line-height:1.15;
  margin:38px 0 14px;padding-bottom:7px;border-bottom:4px solid var(--ink)}
.body p:first-of-type{font-size:20px;line-height:1.55;font-weight:500;border:none;padding:0}

.sources{max-width:68ch;margin-top:48px}
.srclist{list-style:none;counter-reset:s;padding:0;margin:0}
.srclist li{counter-increment:s;border:var(--bd);background:var(--sheet);margin-bottom:9px;box-shadow:4px 4px 0 var(--ink)}
.srclist a{display:flex;gap:12px;align-items:baseline;padding:11px 14px;text-decoration:none}
.srclist a:before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:17px;color:var(--orange-text)}
.srclist .h{font-family:var(--head);font-size:13.5px}
.srclist .u{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srclist li:hover{background:var(--yellow)}

.checks{max-width:68ch;margin-top:48px}
.chk{border:var(--bd);background:var(--sheet);margin-bottom:9px}
.chk summary{padding:11px 14px;cursor:pointer;font-size:var(--fs-xs);list-style:none}
.chk summary::-webkit-details-marker{display:none}
.chk summary:before{content:"▸ ";color:var(--orange-text);font-weight:700}
.chk[open] summary:before{content:"▾ "}
.chk .k{font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);padding:2px 7px;margin-right:8px}
.chkbody{padding:4px 16px 16px;border-top:2px dotted var(--ink);background:var(--paper)}
.chkbody .a{font-size:15px;margin:12px 0}
.chkbody blockquote{margin:10px 0;border-left:5px solid var(--green);background:var(--sheet);padding:10px 14px}
.chkbody blockquote p{margin:0 0 5px;font-size:15px}
.chkbody cite{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-3);font-style:normal}

.prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:4px solid var(--ink)}
.prevnext a{font-family:var(--head);font-size:14px;text-decoration:none;max-width:44%;line-height:1.25}
.prevnext a:hover{color:var(--orange)}
.prevnext .next{text-align:right;margin-left:auto}


/* ---------------- accessibility ---------------- */

/* The browser default (auto 1px) all but vanishes against 3px black borders.
   :focus-visible so a mouse click never paints a ring, only keyboard travel. */
:focus-visible{outline:4px solid var(--orange);outline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:4px solid var(--orange);outline-offset:3px}
input:focus-visible,select:focus-visible{outline:4px solid var(--orange);outline-offset:2px;background:var(--yellow)}
nav.tabs a:focus-visible{outline-offset:-4px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;font-family:var(--head);font-size:var(--fs-xs);
  background:var(--ink);color:var(--yellow);padding:12px 18px;text-decoration:none;border:var(--bd-4)}
.skip:focus{left:8px;top:8px}

@media (prefers-reduced-motion:reduce){
  .card,.gallery img,.btn{transition:none!important}
  .card:hover{transform:none}
}

/* ---------------- print ---------------- */

/* ---------------- ticker links ---------------- */
/* Each headline is now an anchor to its article. Colour is inherited so the
   marquee looks unchanged until you hover; .ticker-track:hover already pauses
   the animation, which is what makes a moving target clickable. */
.ticker a{color:inherit;text-decoration:none}
.ticker a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ticker a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ---------------- page: issues ---------------- */
/* The light counterpart to Archive: pick an issue, then pick a story. */
.issblock{border:var(--bd-4);background:var(--sheet);box-shadow:var(--sh);padding:18px 20px;margin-bottom:18px}
.issmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}
.issid{background:var(--ink);color:var(--yellow);padding:3px 9px}
.isshead{font-family:var(--head);font-size:21px;line-height:1.18;margin:11px 0 12px;text-wrap:balance}
.isshead a{color:inherit;text-decoration:none;box-shadow:inset 0 -3px 0 var(--yellow)}
.isshead a:hover{background:var(--yellow)}
.isscounts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.isslist{list-style:none;margin:12px 0 0;padding:0;border-top:var(--bd)}
.isslist li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:10px 2px;border-bottom:var(--bd)}
.isslist a{font-family:var(--head);font-size:14.5px;text-decoration:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow)}
.isslist a:hover{background:var(--yellow)}
.isslist a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media print{
  .ticker,nav.tabs,.filters,.prevnext,.backlink,.skip{display:none}
  body{background:#fff}
  .sheet{border:none;box-shadow:none;margin:0;max-width:none}
  .card,.claim,.ent,figure,.issblock{box-shadow:none;break-inside:avoid}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:10px;word-break:break-all}
}


/* ---------------- phones (<= 520) ---------------- */
@media (max-width:520px){
  .masthead{padding:14px 16px;gap:10px}
  .logo{font-size:30px;padding:9px 0}          /* clears the 44px tap-target floor */
  .stamp{transform:none;font-size:var(--fs-nano);padding:5px 9px}
  nav.tabs a{font-size:11px;letter-spacing:.02em;padding:12px 4px}
  nav.tabs .count{display:none}               /* the label needs the width more */
  h1.page,.story .headline{hyphens:auto}
  .page-sub{margin-bottom:20px}
  .lab{margin:36px 0 16px;gap:10px}
  .lab h2{font-size:var(--fs-micro)}
  .callout{padding:12px 14px;border-left-width:6px}
  .box{padding:13px 14px}

  .cards{gap:18px}
  .card{box-shadow:var(--sh)}
  .card .bd{padding:14px 16px 16px}
  .card h3{font-size:19px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  .claim{padding:14px}
  .claim.stale{border-left-width:7px}
  .claim .val{font-size:34px}

  .qcard{padding:20px 18px}
  .qcard .q{font-size:21px}
  .btnrow .btn{flex:1 1 auto;text-align:center}

  .story .dek{font-size:18px;padding-left:14px;border-left-width:5px}
  .body p{font-size:16.5px}
  .body p:first-of-type{font-size:18px}
  figure{margin:20px 0}
  .prevnext{flex-direction:column;gap:12px}
  .prevnext a{max-width:none}
  .prevnext .next{margin-left:0}

  .iss summary{padding:14px 16px}
  .iss .body{padding:0 16px 18px}
  .issblock{padding:16px}
}
@media (max-width:400px){nav.tabs a{font-size:10px}}

/* ---------------- touch ---------------- */
/* Tap targets. Chips, segment buttons and the reset link are sized for a
   pointer; a finger needs ~44px. Width says nothing about input, so this keys
   on pointer:coarse and applies to a touch laptop as much as a phone. */
@media (pointer:coarse){
  .chip{padding:10px 12px}
  .seg button{padding:11px 14px}
  .btn{min-height:44px}
  .linkish{padding:10px 0}
  .ent summary{padding-top:11px;padding-bottom:4px}
  .chk summary,.iss summary{min-height:44px}
  .rows a{min-height:56px}
}


/* ---------------- article: reading column + sticky rail ----------------
   At 1420px the 68ch measure left ~700px of dead space to its right. The rail
   fills it with the things you actually reach for mid-read - the sources and
   how well-sourced the piece is - instead of decoration. Stacks below 1024;
   a landscape tablet has room for a narrower rail, 1180 and up gets the
   full gap. */
.readwrap{display:block}
.rail{display:none}

@media (min-width:1024px){
  .readwrap{display:grid;grid-template-columns:minmax(0,68ch) minmax(220px,300px);
    gap:36px;align-items:start}
  .story{max-width:none}
  .rail{display:block;position:sticky;top:24px}
}
@media (min-width:1180px){.readwrap{gap:48px}}

.railbox{border:var(--bd);background:var(--sheet);box-shadow:5px 5px 0 var(--ink);
  padding:14px 16px;margin-bottom:16px}
.railbox h4{font-family:var(--head);font-size:var(--fs-mono);letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 10px}
.railnum{font-family:var(--display);font-size:44px;line-height:.85;margin:0 0 12px}
.railsrc{list-style:none;margin:12px 0 0;padding:0}
.railsrc li{border-top:1.5px dotted var(--ink);padding:6px 0}
.railsrc a{font-family:var(--mono);font-size:var(--fs-mono);color:var(--orange-text);
  text-decoration:none;font-weight:600}
.railsrc a:hover{text-decoration:underline}

/* ---------------- All Of It ---------------- */
/* Only what the three views genuinely need. Cards, pills, chips and search inputs are
   inherited from the vocabulary above rather than restated. */

.controls{border:var(--bd);background:var(--paper);padding:12px 14px;margin-bottom:22px;display:flex;flex-direction:column;gap:10px}
.crow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crow label{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.crow.leagues{gap:7px}
.crow.summary{justify-content:space-between}
.crow input[type="search"]{flex:1;min-width:220px}
.linkish{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;background:none;border:none;color:var(--orange-text);cursor:pointer;padding:0;text-decoration:underline}
.linkish:hover{color:var(--ink)}

/* view switcher */
.seg{display:flex;border:var(--bd);background:var(--sheet)}
.seg button{font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:none;border:none;border-right:3px solid var(--ink);padding:7px 14px;cursor:pointer;color:var(--ink)}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--cyan)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}

/* card grid reuses .cards/.card; this is the eyebrow the other pages do not have */
.card .eyebrow{font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
a.card{text-decoration:none;color:inherit;transition:transform .1s,box-shadow .1s}
@media (hover:hover){a.card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg),4px 4px 0 var(--orange)}}

/* list view */
.rows{list-style:none;margin:0;padding:0;border:var(--bd);background:var(--sheet)}
.rows li{border-bottom:2px solid var(--ink)}
.rows li:last-child{border-bottom:none}
.rows a{display:flex;gap:14px;align-items:center;padding:10px 14px;text-decoration:none;color:inherit}
.rows a:hover{background:var(--yellow)}
.rows .thumb{width:88px;height:52px;object-fit:cover;border:2px solid var(--ink);flex:none;background:var(--paper)}
.rows .thumb.blank{display:block}
.rows .rtext{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.rows .rtitle{font-family:var(--head);font-size:16px;line-height:1.2}
.rows .rsub{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-3)}
.rows .rtags{flex:none;text-align:right;max-width:38%}

/* table view - wide content scrolls inside its own box, never the page */
.tblwrap{border:var(--bd);background:var(--sheet);overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;min-width:760px}
.tbl th{font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.11em;text-transform:uppercase;text-align:left;background:var(--ink);color:var(--yellow);padding:9px 12px;position:sticky;top:0}
.tbl td{padding:9px 12px;border-bottom:2px solid var(--ink);font-size:14px;vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--yellow)}
.tbl .num{text-align:right;font-family:var(--mono);font-size:var(--fs-mono)}
.tbl td a{color:var(--orange-text);font-weight:600;text-decoration:none}
.tbl td a:hover{text-decoration:underline}

@media (max-width:640px){
  .rows .rtags{display:none}
  .rows .rtitle{font-size:15px}
  .seg{flex:1 1 100%}
  .seg button{flex:1;text-align:center}
  .crow input[type="search"]{flex:1 1 100%;min-width:0}
  /* The five filter selects become a two-up grid of labelled fields. */
  .crow.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  .crow.fields label{flex-direction:column;align-items:stretch;gap:4px}
  .crow.fields select{min-width:0;width:100%}
}

/* ---------------- footer ---------------- */
.foot{border-top:var(--bd-4);padding:16px 26px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.04em;line-height:1.6;color:var(--ink-3)}
@media(max-width:700px){.foot{padding:14px 16px}}