@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo.e3a28eade2.woff2) format('woff2')}

:root{
  --ground:#141619;
  --raise:#1b1e22;
  --rule:#2a2f35;
  --rule-strong:#454c55;
  --text:#ecebe4;
  --muted:#a4a79f;
  --yellow:#ffcc1a;
  --ink:#121212;
  --ink-soft:#3a3000;
  --cond:62%;
  --gap:44px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scrollbar-color:var(--rule-strong) var(--ground)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--text);font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--yellow);color:var(--ink)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.cond{font-stretch:var(--cond)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* page frame: yellow spine + graphite board */
.page{display:grid;grid-template-columns:clamp(340px,30vw,450px) minmax(0,1fr);min-height:100vh}

/* the spine */
.spine{position:sticky;top:0;height:100vh;overflow:auto;background:var(--yellow);color:var(--ink);padding:28px clamp(24px,2.6vw,40px) 26px;display:flex;flex-direction:column;scrollbar-width:none}
.spine :focus-visible{outline-color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-stretch:75%;font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;align-self:flex-start}
.brand svg{width:30px;height:30px;flex:none}
.spine h1{margin:auto 0 0;padding-top:28px;font-stretch:var(--cond);font-weight:850;font-size:clamp(2.6rem,2.6vw + 1.1rem,4.2rem);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.lede{margin:18px 0 0;max-width:34ch;font-size:16.5px;line-height:1.45;color:var(--ink-soft)}
.open{margin-top:26px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;background:var(--ink);color:var(--text);text-decoration:none;padding:0 18px 16px 16px;transition:background .25s cubic-bezier(.16,1,.3,1)}
.open .tag{border-color:var(--yellow);color:var(--yellow)}
.open-art{grid-column:1/4;margin:0 -18px 10px -16px;aspect-ratio:616/260;overflow:hidden;background:#000}
.open-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.open:hover .open-art img{transform:scale(1.035)}
.open-name{font-stretch:var(--cond);font-weight:800;font-size:2rem;line-height:1;text-transform:uppercase}
.open-go{grid-column:2/4;display:flex;justify-content:space-between;align-items:center;color:var(--yellow);font-weight:600;font-size:15px}
.open-go svg{width:18px;height:18px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.open:hover{background:#000}
.open:hover .open-go svg{transform:translateX(5px)}
.open{position:relative}
.open .live{position:absolute;top:10px;right:10px;z-index:1;font-stretch:75%;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--yellow);padding:3px 7px 2px}
.open-note{margin:10px 0 0;font-size:14px;color:var(--ink-soft)}
.index{margin-top:34px;border-top:2px solid var(--ink)}
.index a{display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(18,18,18,.28);text-decoration:none}
.index b{font-stretch:75%;font-weight:800;font-size:18px;text-transform:uppercase}
.index span{font-size:14px;color:var(--ink-soft)}
.index a:hover b{text-decoration:underline;text-decoration-thickness:2px}
.tally{margin:16px 0 0;font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tally b{color:var(--ink);font-weight:700}

/* the board */
.board{padding:0 clamp(24px,4vw,64px);min-width:0}
.sec{padding:56px 0 72px;border-bottom:1px solid var(--rule)}
.sec:first-child{padding-top:40px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:end;margin-bottom:28px}
.sec-head h2{margin:0;font-stretch:var(--cond);font-weight:850;font-size:clamp(2.25rem,3vw,3.25rem);line-height:.95;text-transform:uppercase;letter-spacing:-.005em}
.sec-head p{grid-column:1;margin:0;max-width:62ch;color:var(--muted)}
.sec-head p b{color:var(--text);font-weight:600}

/* platform filter */
.filter{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-self:end}
.filter button{font:inherit;font-stretch:75%;font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--rule-strong);padding:7px 12px 6px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.filter button:hover{color:var(--text);border-color:var(--muted)}
.filter button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--ink)}
.count{grid-column:1/3;margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:21px}

/* group tables */
.group{margin-top:34px}
.group:first-child{margin-top:0}
.ghead{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:2px solid var(--text)}
.gl{display:grid;place-items:center;width:34px;height:34px;background:var(--text);color:var(--ink);font-stretch:var(--cond);font-weight:900;font-size:24px;line-height:1}
.ghead h3{margin:0;line-height:1;font-stretch:70%;font-weight:800;font-size:1.45rem;text-transform:uppercase;letter-spacing:.01em}
.gcount{margin-left:auto;white-space:nowrap;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.standings{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.standings th{text-align:left;font-stretch:75%;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 12px 8px 0;border-bottom:1px solid var(--rule)}
.standings td{padding:12px 14px 12px 0;vertical-align:middle;border-bottom:1px solid var(--rule);font-size:15px}
.standings small{display:block;font-size:13.5px;color:var(--muted);margin-top:1px}
.standings .c-game{width:45%}
.standings .c-roster{width:12%}
.standings .c-now{width:16%}
.standings .c-next{width:18%}
.standings .c-st{width:9%;text-align:right;padding-right:0}
.g{display:flex;gap:16px;align-items:center}
.art{position:relative;flex:none;width:clamp(150px,17vw,260px);aspect-ratio:460/215;background:var(--raise);overflow:hidden}
.art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.art .tag{position:absolute;left:0;bottom:0;height:20px;min-width:0;padding:1px 5px 0;font-size:11px;background:var(--ground);border:0;color:var(--text)}
.row:hover .art img{transform:scale(1.04)}
.tag{flex:none;display:inline-grid;place-items:center;min-width:46px;height:26px;padding:1px 6px 0;border:1px solid var(--rule-strong);font-stretch:75%;font-weight:800;font-size:13px;letter-spacing:.05em;line-height:1}
.nm{font-weight:600;font-size:17px;line-height:1.25}
.nm a{text-decoration:none}
.st{font-stretch:75%;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.st.planned{color:var(--muted);font-weight:700}
.st.next::before{content:"";display:inline-block;width:8px;height:8px;background:var(--yellow);margin-right:7px;vertical-align:1px}

.flag{display:inline-block;margin-top:5px;font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);border:1px solid var(--rule-strong);padding:2px 6px 1px}

/* the live row */
.row.live{background:var(--yellow);color:var(--ink);position:relative}
.row.live td{border-bottom-color:var(--yellow);font-weight:500}
.row.live td:first-child{padding-left:10px}
.row.live td:last-child{padding-right:12px}
.row.live small{color:var(--ink-soft)}
.row.live .art .tag{background:var(--ink);color:var(--yellow)}
.row.live .nm a::after{content:"";position:absolute;inset:0}
.row.live .nm a:focus-visible{outline:none}
.row.live:has(a:focus-visible){outline:2px solid var(--text);outline-offset:2px}
.row.live .st svg{width:15px;height:15px;vertical-align:-2px;margin-left:5px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.row.live:hover{background:#ffd640}
.row.live:hover .st svg{transform:translateX(4px)}
.empty td{color:var(--muted);font-style:italic;padding-left:0}

/* bracket */
.br{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.6fr);grid-auto-rows:minmax(84px,auto);column-gap:var(--gap);margin-top:8px}
.cell{position:relative;display:flex;align-items:center;min-width:0}
.cell>div{width:100%}
.seed{padding:5px 0}
.seed>div{border:1px solid var(--rule-strong);padding:9px 12px 10px;background:var(--raise);min-height:72px}
.seed b,.res b{display:block;font-stretch:72%;font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;letter-spacing:.01em}
.seed span{display:block;margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.res>div{border:1px solid var(--text);padding:10px 12px}
.res b{font-size:19px}
.r3>div{background:var(--text);color:var(--ink)}
.r1:nth-of-type(1){grid-row:1}.r1:nth-of-type(2){grid-row:2}.r1:nth-of-type(3){grid-row:3}.r1:nth-of-type(4){grid-row:4}
.r1:nth-of-type(5){grid-row:5}.r1:nth-of-type(6){grid-row:6}.r1:nth-of-type(7){grid-row:7}.r1:nth-of-type(8){grid-row:8}
.r1{grid-column:1}
.r2{grid-column:2}.r2.a{grid-row:1/3}.r2.b{grid-row:3/5}.r2.c{grid-row:5/7}.r2.d{grid-row:7/9}
.r3{grid-column:3}.r3.a{grid-row:1/5}.r3.b{grid-row:5/9}
.fin{grid-column:4;grid-row:1/9}
.r2::before,.r3::before,.fin::before{content:"";position:absolute;left:calc(var(--gap) * -1);width:calc(var(--gap) / 2);top:25%;bottom:25%;border:1.5px solid var(--rule-strong);border-left:0}
.r2::after,.r3::after,.fin::after{content:"";position:absolute;left:calc(var(--gap) / -2);width:calc(var(--gap) / 2);top:50%;border-top:1.5px solid var(--rule-strong)}
.fin>div{background:var(--yellow);color:var(--ink);padding:16px 16px 14px}
.fin h3{margin:0;font-stretch:var(--cond);font-weight:900;font-size:2.4rem;line-height:.92;text-transform:uppercase}
.fin p{margin:6px 0 12px;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.fin img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:top;border:1px solid var(--ink)}
.fin figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink-soft)}
/* bracket draw-on: visible by default, armed only by script */
.br.armed :is(.r2,.r3,.fin)::before,.br.armed :is(.r2,.r3,.fin)::after{clip-path:inset(0 100% 0 0)}
.br.armed :is(.r2,.r3,.fin)>div{opacity:.25;transform:translateX(-8px)}
.br :is(.r2,.r3,.fin)::before,.br :is(.r2,.r3,.fin)::after{transition:clip-path .45s cubic-bezier(.16,1,.3,1)}
.br :is(.r2,.r3,.fin)>div{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.br .r2::after,.br .r2>div{transition-delay:.18s}
.br .r3::before{transition-delay:.42s}.br .r3::after,.br .r3>div{transition-delay:.6s}
.br .fin::before{transition-delay:.84s}.br .fin::after,.br .fin>div{transition-delay:1.02s}
.bans{margin:36px 0 0;max-width:70ch;color:var(--muted);font-size:15px}
.bans b{color:var(--text);font-weight:600}

/* proof table */
.proof{margin-top:40px;display:grid;grid-template-columns:350px minmax(0,1fr);gap:28px 48px;align-items:start}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule-strong)}
.shot figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.proof-text .maps{margin-top:24px}
.fin .fin-eg{margin:0 0 10px;padding-top:10px;border-top:1px solid rgba(18,18,18,.3);font-size:14.5px;color:var(--ink)}
.fin-eg b{font-stretch:72%;font-weight:850;font-size:18px;text-transform:uppercase}
.fin-link{display:inline-block;font-weight:600;font-size:14px;color:var(--ink)}
.proof h3{margin:0;font-stretch:var(--cond);font-weight:850;font-size:2rem;line-height:.95;text-transform:uppercase}
.proof p{margin:12px 0 0;color:var(--muted);max-width:44ch}
.proof p b{color:var(--text);font-weight:600}
.maps{width:100%;border-collapse:collapse}
.maps th{text-align:left;font-stretch:75%;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--rule)}
.maps td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.maps td:first-child{font-stretch:75%;font-weight:800;font-size:17px;text-transform:uppercase;white-space:nowrap}
.maps ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;counter-reset:p}
.maps li{counter-increment:p}
.maps li::before{content:counter(p);display:inline-block;width:1.3em;color:var(--yellow);font-stretch:75%;font-weight:800}
.src{margin-top:10px;font-size:13px;color:var(--muted)}

/* fixtures */
.fixtures{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.fx{display:grid;grid-template-columns:76px 86px minmax(0,1fr) auto;gap:4px 18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.fx time{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-stretch:var(--cond);font-variant-numeric:tabular-nums}
.fx time b{text-transform:uppercase;font-weight:850;font-size:2.1rem;line-height:1}
.fx time span{font-weight:700;font-size:15px;text-transform:uppercase;color:var(--muted)}
.fx .what{font-size:15.5px}
.fx .mini{display:block;width:86px;aspect-ratio:460/215;overflow:hidden;background:var(--raise)}
.fx .mini img{display:block;width:100%;height:100%;object-fit:cover}
.none{color:var(--muted)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row.enter{animation:rowIn .38s cubic-bezier(.16,1,.3,1) both}
.fx .what b{font-weight:600}
.fx .what small{display:block;font-size:13.5px;color:var(--muted)}
.fx .due{font-stretch:75%;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx .due.soon{color:var(--yellow)}
.fx .due.est,.fx .due.out{color:var(--muted)}
.fx.ours{background:var(--raise)}
.fx.ours time{padding-left:10px}
.fx.ours .due{padding-right:12px}

/* footer */
.foot{padding:40px 0 56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 28px;align-items:start;color:var(--muted);font-size:14px}
.foot svg{width:34px;height:34px;color:var(--text)}
.foot p{margin:0 0 8px;max-width:78ch}
.foot b{color:var(--text);font-weight:600}

/* short laptop screens: keep the whole spine in view */
@media (min-width:1100px) and (max-height:820px){
  .spine{padding-top:22px;padding-bottom:18px}
  .spine h1{padding-top:18px;font-size:clamp(2.3rem,2.2vw + 1rem,3.4rem)}
  .lede{margin-top:12px;font-size:15px}
  .open{margin-top:16px}
  .open-art{aspect-ratio:616/200}
  .index{margin-top:18px}
  .index a{padding:7px 0}
  .index span{display:none}
  .tally{margin-top:10px}
}
@media (min-width:1100px) and (max-height:680px){
  .open-art{display:none}
  .open{padding-top:14px}
}

/* mid widths: spine becomes the top band */
@media (max-width:1099px){
  .page{grid-template-columns:1fr}
  .spine{position:static;height:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:40px;align-items:end;padding:24px clamp(24px,4vw,64px) 32px}
  .brand{grid-column:1/3}
  .spine h1{grid-column:1;padding-top:36px}
  .lede{grid-column:1}
  .open,.open-note,.index,.tally{grid-column:2}
  .open{grid-row:2}
  .open-note{grid-row:3;align-self:start}
  .index{grid-row:4;margin-top:20px}
  .tally{grid-column:1;grid-row:4;align-self:end}
}
@media (max-width:900px){
  .br{--gap:28px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .fin{grid-column:1/4;grid-row:9;margin-top:24px}
  .fin::before,.fin::after{display:none}
  .proof{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
}
@media (max-width:760px){
  .spine{display:flex;align-items:stretch;padding:20px 16px 26px}
  .brand{align-self:flex-start}
  .spine h1{padding-top:28px;font-size:clamp(2.6rem,11vw,3.4rem)}
  .open-art{aspect-ratio:616/240}
  .index{margin-top:26px}
  .board{padding:0 16px}
  .sec{padding:40px 0 52px}
  .sec:first-child{padding-top:32px}
  .sec-head{grid-template-columns:1fr}
  .filter{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:10px}
  .count{grid-column:1}
  .standings thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .standings tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .standings td{display:block;border:0;padding:0;width:auto!important}
  .standings .c-game{grid-column:1;grid-row:1}
  .standings .c-st{grid-column:2;grid-row:1;text-align:right}
  .standings .c-roster{display:none}
  .standings .c-now,.standings .c-next{grid-column:1/3;padding-left:0;font-size:14px}
  .art{width:46%}
  .g{gap:12px}
  .nm{font-size:16px}
  .row.live .g,.row.next .g{flex-direction:column;align-items:stretch;gap:10px}
  .row.live .art,.row.next .art{width:100%}
  .standings .c-st{align-self:start}
  .row.live .c-game,.row.next .c-game{grid-column:1/3;grid-row:1}
  .row.live .c-st,.row.next .c-st{grid-row:1;grid-column:2;align-self:end;padding-bottom:2px}
  .row.live .nm,.row.next .nm{padding-right:96px}
  .proof{grid-template-columns:1fr}
  .fx{grid-template-columns:64px 64px minmax(0,1fr) auto}
  .fx .mini{width:64px}
  .standings .c-now small,.standings .c-next small{display:inline;margin-left:6px}
  .standings .c-next:empty{display:none}
  .row.live{padding:12px!important}
  .row.live td{padding-left:0!important;padding-right:0!important}
  .br{display:flex;flex-direction:column}
  .r1:nth-of-type(1){order:1}.r1:nth-of-type(2){order:2}.r2.a{order:3}
  .r1:nth-of-type(3){order:4}.r1:nth-of-type(4){order:5}.r2.b{order:6}.r3.a{order:7}
  .r1:nth-of-type(5){order:8}.r1:nth-of-type(6){order:9}.r2.c{order:10}
  .r1:nth-of-type(7){order:11}.r1:nth-of-type(8){order:12}.r2.d{order:13}.r3.b{order:14}.fin{order:15}
  .r3{margin-bottom:30px}
  .cell{display:block}
  .cell::before,.cell::after{display:none}
  .r1{padding:0 0 6px}
  .seed>div{min-height:0}
  .r2,.r3{margin:4px 0 18px;padding-left:18px;border-left:2px solid var(--rule-strong)}
  .r2 b::before,.r3 b::before{content:"";display:inline-block;width:10px;height:2px;background:currentColor;vertical-align:5px;margin-right:8px}
  .fin{margin-top:22px}
  .fin>div{display:block}
  .fin img{max-height:380px}
  .fx{padding:12px 0}
  .fx time b{font-size:1.8rem}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .br.armed :is(.r2,.r3,.fin)::before,.br.armed :is(.r2,.r3,.fin)::after{clip-path:none}
  .br.armed :is(.r2,.r3,.fin)>div{opacity:1;transform:none}
}