/* Watch: the home page. Same world as the rest of the site (site.css tokens). */
.w-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:10px}
.w-head h1{font:900 clamp(56px,9vw,120px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.w-kicker{display:flex;align-items:center;gap:8px;font:700 13px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px}
.w-dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(226,50,43,.6);animation:w-pulse 1.6s infinite}
@keyframes w-pulse{70%{box-shadow:0 0 0 9px rgba(226,50,43,0)}100%{box-shadow:0 0 0 0 rgba(226,50,43,0)}}
.w-lede{color:var(--bone-dim);max-width:60ch;margin-top:12px}

.w-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:2px;text-decoration:none;overflow:hidden;transition:border-color .2s,transform .25s var(--ease)}
.w-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.w-card.is-live{border-color:#5a1d1a;box-shadow:inset 0 3px 0 var(--red)}
.w-card-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 0}
.w-ch{font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.w-live{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;background:var(--red);color:#fff;font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;border-radius:2px}
.w-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:w-blink 1s steps(2) infinite}
@keyframes w-blink{50%{opacity:0}}
.w-soon{font:700 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
.w-soon b{color:var(--gold);font-variant-numeric:tabular-nums}
.w-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:4px;padding:8px 8px 0}
.w-vs figure{margin:0;text-align:center}
.w-vs img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.w-vs figcaption{font:800 18px/1 var(--display);text-transform:uppercase;padding:6px 0 2px}
.w-vs .red figcaption{color:var(--red-text)}.w-vs .blue figcaption{color:var(--blue-text)}
.w-x{font:900 22px/1 var(--display);color:var(--mute);padding-bottom:38px;text-transform:uppercase}
.w-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 14px;color:var(--mute);font-size:13px}

.w-soon-league{padding:16px 18px;background:var(--ink-2);border:1px solid var(--ink-3);border-left:3px solid var(--gold);color:var(--bone-dim);margin:18px 0 6px}
.w-soon-league b{color:var(--bone)}

.w-next{display:grid;gap:6px}
.w-row{display:grid;grid-template-columns:120px 1fr 160px 80px;align-items:center;gap:12px;padding:12px 14px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:2px;text-decoration:none}
a.w-row:hover{border-color:var(--line-2)}
.w-when{font:800 18px/1 var(--display);color:var(--gold);text-transform:uppercase}
.w-mu b{font:800 18px/1 var(--display);text-transform:uppercase}
.w-where{color:var(--mute);font-size:14px}
.w-in,.w-go{text-align:right;font-variant-numeric:tabular-nums;color:var(--bone-dim);font-weight:700}
.w-go{color:var(--gold)}

.w-replays{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.w-rep{display:grid;grid-template-columns:1fr 1fr;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:2px;text-decoration:none;overflow:hidden;transition:border-color .2s}
.w-rep:hover{border-color:var(--line-2)}
.w-rep img{width:100%;aspect-ratio:20/13;object-fit:cover;display:block}
.w-rep-t{grid-column:1/-1;font:800 17px/1.1 var(--display);text-transform:uppercase;padding:10px 12px 2px}
.w-rep-m{grid-column:1/-1;color:var(--mute);font-size:13px;padding:0 12px 12px}

@media (max-width:980px){.w-channels{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .w-channels{grid-template-columns:1fr}
  .w-row{grid-template-columns:78px 1fr 58px;row-gap:4px}.w-where{grid-column:2;grid-row:2;font-size:13px}.w-in,.w-go{grid-row:1/3;grid-column:3}
  .w-when{font-size:16px}.w-mu b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.w-dot,.w-live::before{animation:none}}