/* Big Boog: a sports section, not a SaaS landing page. */
:root{
  --paper:#f3eee4; --paper-2:#ebe4d6; --ink:#16130f; --ink-2:#3a342c; --muted:#6f675b; --rule:#16130f; --hair:#cfc6b6;
  --navy:#0c2340; --orange:#e87722; --orange-ink:#b5480a;
  --win:#1c6b3a; --loss:#a3201a; --flat:#6f675b;
  --link:#0c2340; --s-a:#2a5db0; --s-o:#c8601a; --grid:#ddd5c5;
  --hed:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15130f; --paper-2:#1f1c17; --ink:#efe8db; --ink-2:#d6cebf; --muted:#a39a8a; --rule:#efe8db; --hair:#3a352d;
    --orange-ink:#f39a4f; --win:#5cc98a; --loss:#ff8a7a; --flat:#a39a8a; --link:#ffb27a;
    --s-a:#5b8fe0; --s-o:#d7702a; --grid:#2c2822;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--orange-ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 14px}body{font-size:16px}}

/* ---------- masthead ---------- */
.mast{border-bottom:3px double var(--rule);background:var(--paper)}
.strip{background:var(--ink);color:var(--paper);font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.strip .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px}
.mastrow{display:flex;align-items:center;justify-content:center;position:relative;padding-top:14px;padding-bottom:6px}
.logo{font:900 clamp(56px,11vw,124px)/.82 var(--hed);letter-spacing:-.01em;color:var(--ink);text-decoration:none;text-transform:uppercase}
.logo:hover{color:var(--ink)}
.logo::after{content:"";display:block;height:8px;background:var(--orange);margin-top:6px}
.logo.sm{font-size:42px}
.logo.sm::after{height:4px}
.sections{border-top:1px solid var(--rule)}
.sections .wrap{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.sections a{font:600 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);text-decoration:none;padding:8px 12px}
.sections a.on{background:var(--ink);color:var(--paper)}
.sections a:hover{color:var(--orange-ink)} .sections a.on:hover{color:var(--paper)}
.sections a i{font-style:normal;font-size:10px;color:var(--orange-ink);margin-left:4px}
.menu{display:none;position:absolute;right:0;top:22px;background:none;border:1px solid var(--rule);color:var(--ink);font:600 12px var(--mono);text-transform:uppercase;padding:6px 10px;cursor:pointer}
@media (max-width:640px){
  .hide-sm{display:none}
  .menu{display:block}
  .mastrow{justify-content:flex-start}
  .sections{display:none}
  .sections.open{display:block}
  .sections .wrap{flex-direction:column;align-items:stretch}
}

/* ---------- type ---------- */
.dateline{font:600 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--orange-ink);margin:0 0 10px}
.dateline a{color:inherit}
.hed{font:800 clamp(30px,4.4vw,52px)/1.02 var(--hed);letter-spacing:-.005em;margin:0 0 16px}
.hed.big{font-size:clamp(46px,8vw,104px);font-weight:900;line-height:.9;text-transform:uppercase}
.hed a{color:inherit;text-decoration:none} .hed a:hover{color:var(--orange-ink)}
.subhed{font:700 clamp(19px,2.2vw,25px)/1.3 var(--serif);max-width:820px;margin:-4px 0 20px;color:var(--ink)}
.dek{font:400 20px/1.45 var(--serif);color:var(--ink-2);max-width:760px;margin:0 0 18px}
.dek.sm{font-size:17px}
.kicker{font:800 26px/1 var(--hed);text-transform:uppercase;letter-spacing:.02em;border-top:6px solid var(--ink);padding-top:10px;margin:0 0 16px}
.small{font-size:14px;color:var(--muted)}
.more{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
code{font:13px var(--mono);background:var(--paper-2);padding:1px 4px}

main{padding:28px 0 40px}
.sec{margin-top:44px}
.sec > p{max-width:760px}
.pagehead{padding:10px 0 4px}
.splash{display:inline-block;background:var(--orange);color:#16130f;font:700 18px/1.35 var(--serif);padding:10px 14px;margin:0 0 18px;max-width:820px;transform:rotate(-.6deg)}

/* ---------- front page grid ---------- */
.fp{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.leadstory{padding:0 28px 26px 0;border-right:1px solid var(--rule)}
.rail{padding:0 0 26px 28px}
@media (max-width:900px){.fp{grid-template-columns:1fr}.leadstory{padding-right:0;border-right:0;border-bottom:1px solid var(--rule)}.rail{padding:20px 0}}
.lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start;margin:4px 0 8px}
@media (max-width:760px){.lead{grid-template-columns:1fr}}
.leadnote{font-size:15px;color:var(--ink-2)}
.railbox{margin-bottom:26px}
.railbox .kicker{font-size:22px;border-top-width:4px}
.railhead{font:700 18px/1.35 var(--serif);margin:0 0 10px}
.takes{list-style:none;margin:0 0 12px;padding:0}
.takes li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.takes li b{display:block;font:800 17px/1.1 var(--hed);text-transform:uppercase;letter-spacing:.02em}
.railbox.next p{margin:0;font-size:16px}
.nextup{margin-top:22px;border:1px solid var(--rule);border-left:8px solid var(--orange);padding:12px 16px;font-size:16px}
.nextup b{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-right:8px;color:var(--orange-ink)}

/* ---------- box score ---------- */
.bx{border:2px solid var(--rule);background:var(--paper)}
.boxhead{display:flex;gap:10px;flex-wrap:wrap;background:var(--ink);color:var(--paper);font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:7px 10px}
.boxhead span:first-child{color:var(--orange);font-weight:600}
.bx table{width:100%;border-collapse:collapse;font:500 15px var(--mono)}
.bx th,.bx td{padding:8px 10px;text-align:center;border-top:1px solid var(--hair)}
.bx thead th{font-size:11px;color:var(--muted);border-top:0;padding-bottom:4px}
.bx tbody th{text-align:left;font:800 24px/1 var(--hed);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.bx tbody th small{font:400 12px var(--mono);color:var(--muted);margin-left:6px;letter-spacing:0}
.bx td.t{font:900 34px/1 var(--hed);border-left:2px solid var(--rule)}
.bx tr:not(.win) th,.bx tr:not(.win) td.t{color:var(--muted)}
.bx tr.win td.t{background:var(--orange);color:#16130f}
.bx.bye p{padding:12px;margin:0;font-size:15px}
@media (max-width:480px){.bx tbody th{font-size:19px}.bx td.t{font-size:26px}.bx th,.bx td{padding:7px 5px}.bx tbody th small{display:block;margin:2px 0 0}}

/* ---------- stat line ---------- */
.statline{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));margin:18px 0 6px;border-top:2px solid var(--rule);border-bottom:1px solid var(--rule)}
.statline div{padding:10px 12px 10px 0;border-right:1px solid var(--hair)}
.statline div + div{padding-left:12px}
.statline div:last-child{border-right:0}
.statline dt{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.statline dd{margin:2px 0 0;font:900 34px/1 var(--hed);font-variant-numeric:tabular-nums}
.statline span{font:400 12px var(--mono);color:var(--muted)}
@media (max-width:520px){.statline{grid-template-columns:1fr 1fr}.statline div{border-bottom:1px solid var(--hair)}}

/* ---------- W/L & verdict marks ---------- */
.wl{display:inline-block;font:600 12px/1 var(--mono);padding:4px 6px;border:1.5px solid currentColor;white-space:nowrap;letter-spacing:.02em}
.wl.w{color:var(--win)} .wl.l{color:var(--loss)} .wl.b{color:var(--flat)}
.mark{display:inline-block;font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 6px;white-space:nowrap}
.mark.up{background:var(--win);color:#fff} .mark.down{background:var(--loss);color:#fff} .mark.flat{background:var(--paper-2);color:var(--ink-2)}

/* ---------- tables (box-score style) ---------- */
.tbl{overflow-x:auto;margin:14px 0;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.tbl.narrow{max-width:760px}
.tbl table{width:100%;border-collapse:collapse;font:400 14px/1.45 var(--serif)}
.tbl th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.tbl .r{text-align:right}
.tbl .num,.tbl td.r{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--paper-2)}
.tbl.wide table{font-size:13.5px}
.tbl.wide td{min-width:150px}
table.results td{white-space:nowrap}

/* ---------- jump nav ---------- */
.jump{display:flex;gap:2px;flex-wrap:wrap;margin:22px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:6px 0;position:sticky;top:0;background:var(--paper);z-index:5}
.jump a{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--ink);padding:6px 10px}
.jump a:hover{background:var(--ink);color:var(--paper)}
.sec{scroll-margin-top:60px}
.story .sec p{max-width:780px}
.sec.analysis p{font-size:18px}
.sec.analysis p > strong:first-child{font-family:var(--hed);font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;display:block;line-height:1.1;margin-bottom:4px}
.sec.fine{font-size:14px;color:var(--ink-2)}
.sec.next p{font-size:18px;border-left:8px solid var(--orange);padding-left:14px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:12px;border-top:6px solid var(--ink)}
.pager a{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* ---------- archive ---------- */
.archive{list-style:none;padding:0;margin:0}
.archive li{border-bottom:1px solid var(--hair)}
.archive a{display:grid;grid-template-columns:70px 92px 1fr;gap:4px 14px;align-items:baseline;padding:12px 0;text-decoration:none;color:var(--ink)}
.archive a:hover b{color:var(--orange-ink)}
.archive .when{font:500 12px var(--mono);color:var(--muted);text-transform:uppercase}
.archive b{font:800 22px/1.1 var(--hed);text-transform:uppercase}
.archive em{grid-column:3;font-style:normal;color:var(--ink-2);font-size:15px}
@media (max-width:560px){.archive a{grid-template-columns:1fr auto}.archive em,.archive b{grid-column:1 / -1}}
.pastweeks{display:flex;flex-wrap:wrap;gap:6px}
.pastweeks a{font:600 12px var(--mono);text-transform:uppercase;border:1px solid var(--rule);padding:6px 10px;text-decoration:none;color:var(--ink)}
.pastweeks a.on{background:var(--ink);color:var(--paper)}

/* ---------- the ones who left: ledgers ---------- */
.ledger{border-top:3px solid var(--rule);border-bottom:3px solid var(--rule);margin:14px 0}
.ledger table{width:100%;border-collapse:collapse}
.ledger thead th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.ledger thead th.c{text-align:center}
.ledger tbody tr{border-bottom:1px solid var(--hair)}
.ledger tbody tr:last-child{border-bottom:0}
.ledger tbody th,.ledger td{padding:14px 12px;vertical-align:top;text-align:left;font-weight:400}
.ledger tbody th{width:20%}
.ledger tbody th b{display:block;font:800 22px/1.05 var(--hed);text-transform:uppercase;letter-spacing:.01em}
.ledger tbody th span{display:block;font:500 12px var(--mono);color:var(--orange-ink);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.ledger tbody th em{display:block;font:400 13px/1.4 var(--mono);color:var(--ink-2);font-style:normal;margin-top:6px}
.ledger td.res{width:16%}
.ledger td.res span:not(.wl){display:block;font:400 13px var(--mono);color:var(--muted);margin-top:6px}
.ledger td.line{width:28%;font-size:15px}
.ledger .snaps{display:block;font:400 12px var(--mono);color:var(--muted);margin-top:6px}
.ledger td.take{font:italic 400 16px/1.45 var(--serif);color:var(--ink)}
.ledger.slim tbody th{width:24%} .ledger.slim td.res{width:12%}
.ledger tbody tr:hover{background:var(--paper-2)}
a.ref{font:600 10px var(--mono);border:1px solid var(--hair);padding:0 4px;margin-left:2px;vertical-align:1px;text-decoration:none;color:var(--muted)}
.refkey{display:inline-block;min-width:22px;font:600 13px var(--mono);color:var(--orange-ink)}

/* head to head */
.versus tbody th{width:32%}
.versus td.mid{width:30%;text-align:center}
.versus td.aubside{width:38%}
.versus td.aubside b{display:block;font:800 22px/1.05 var(--hed);text-transform:uppercase}
.versus td.aubside span{display:block;font:500 12px var(--mono);color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
@media (prefers-color-scheme: dark){.versus td.aubside span{color:var(--s-a)}}
.versus td.aubside em{display:block;font:400 13px/1.4 var(--mono);font-style:normal;color:var(--ink-2);margin-top:6px}
.nums{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.nums b{font:900 32px/1 var(--hed);font-variant-numeric:tabular-nums}
.nums small{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tug{display:flex;height:8px;margin:8px 0 10px;background:var(--paper-2);gap:2px}
.tug .him{background:var(--muted)} .tug .aub{background:var(--orange)}

@media (max-width:820px){
  .ledger thead{display:none}
  .ledger table,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block;width:auto!important}
  .ledger tbody tr{padding:12px 0}
  .ledger tbody th,.ledger td{padding:4px 0}
  .ledger td.res{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .ledger td.res span:not(.wl){margin:0}
  .versus td.mid{max-width:340px}
}

/* ---------- charts ---------- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px}
@media (max-width:400px){.charts{grid-template-columns:1fr}}
.chartbox{border-top:2px solid var(--rule);padding-top:8px}
.chartbox h3{font:800 20px var(--hed);text-transform:uppercase;margin:0 0 4px}
.chart{width:100%;height:auto;display:block;margin-top:6px}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .base{stroke:var(--ink);stroke-width:1.5}
.chart .axis{fill:var(--muted);font:12px var(--mono)}
.chart .val{fill:var(--ink);font:600 12px var(--mono)}
.chart .sa{fill:var(--s-a)} .chart .so{fill:var(--s-o)}
.chart .hit{fill:transparent}
.legend{display:flex;gap:16px;font:12px var(--mono);color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px}
.sw.sa{background:var(--s-a)} .sw.so{background:var(--s-o)}
#tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--paper);font:600 12px var(--mono);padding:5px 8px;opacity:0;transition:opacity .1s;z-index:50}

/* ---------- footer ---------- */
.foot{border-top:3px double var(--rule);margin-top:40px;padding:26px 0 40px}
.foot p{max-width:640px;font-size:14px;color:var(--ink-2)}
.foot .meta{font:12px var(--mono);color:var(--muted)}

@media print{.strip,.sections,.jump,.menu,.pager{display:none}}