/* Hoops on Gray — v2 "TV listings" look. Flat team colour, condensed broadcast type, square edges, tables instead of cards.
   Deliberately NOT here: gradients, glass, soft shadows, big radii, pill tags, numbered-circle feature cards, stat counters. */
/* the fonts are OUR copies on Bunny (bin/sport_hoops_assets_to_bunny.php) — this site loads nothing from a third party */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("https://graymedia.b-cdn.net/Sales%20Cloud/grayplaybook.com/Sport%20Studio/_hoops/fonts/barlow-condensed-800.woff2") format("woff2"); }
:root { --ink:#111418; --paper:#f3f1ec; --white:#fff; --rule:#d5d1c7; --rule2:#111418; --mute:#5f6063; --team:#111418; --team2:#c8102e; --team-ink:#fff; --wrap:1120px;
  --brand:#f26b21;   /* the site's own accent (index.php's default $accent) — fixed, unlike --team which becomes the team colour */
  --disp:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --text:"Barlow","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 17px/1.5 var(--text); color:var(--ink); background:var(--paper); }
img { max-width:100%; display:block; }
a { color:inherit; text-underline-offset:3px; }
[hidden] { display:none !important; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:0; background:#fff; padding:8px 12px; z-index:50; } .skip:focus { left:8px; top:8px; }
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }   /* label for a screen reader only */
:focus-visible { outline:3px solid #ffb400; outline-offset:2px; }
h1, h2, h3, .disp { font-family:var(--disp); text-transform:uppercase; letter-spacing:.01em; line-height:.98; margin:0; }

/* top bar: black, one rule, no blur */
.top { background:var(--ink); color:#fff; border-bottom:4px solid var(--team); position:relative; z-index:40; }
.top__in { display:flex; align-items:stretch; gap:24px; min-height:56px; }
.brand { flex:none; display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:600 24px/1 var(--disp); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.brand__logo { display:block; height:28px; width:auto; }   /* the official white lockup, 720x104 on Bunny (_hoops/brand/) */
.teamsnav { margin-left:auto; display:flex; }

/* "Find Your Team" — one panel in the bar, the team panels in a 3-up grid below it. Square, hairline, no shadow/blur. */
/* ONE column width drives everything: the button is exactly one grid column wide and sits over the THIRD (last) column,
   so the button's two hairlines and that column's two hairlines are the same pair of vertical lines, and both stay flush
   with the right edge of the bar. Geometry (box-sizing:border-box): panel = 3C + 2 gaps + 2 borders, and `right:-1px`
   puts the panel's right BORDER outside the button's right hairline — that is what makes column 3 land exactly on it. */
.tdrop { position:relative; display:flex; --tdc:190px; }
.tdrop__b { width:var(--tdc); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; margin:0; background:none; border:0; border-left:1px solid #2b2f35; border-right:1px solid #2b2f35; color:#c9cacc; font:700 17px/1 var(--disp); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; cursor:pointer; }
.tdrop__c { width:10px; height:6px; fill:currentColor; flex:none; }
.tdrop__b:hover, .tdrop.is-open .tdrop__b, .tdrop__b[aria-expanded="true"] { color:#fff; background:#1d2126; }
/* The panel carries its OWN 4px divider instead of leaving a gap over the header's rule: that rule is var(--team), which is the
   accent on the home page but the TEAM colour on a team page, where it disappeared into the hero and read as blank space.
   4px top border + no margin = the panel sits exactly on the header rule, so the home page looks unchanged and every team page
   gets the same divider. It also closes the hover gap the pointer used to cross on its way down to the panel. */
/* ⚠ the right and bottom edges are TRANSPARENT, not absent: the box keeps its exact size, but the visible outline is
   painted by the CELLS below, so it stops where they do.
   ⚠ the width is `--tdc * 3 + 2px` = three columns + the panel's own two 1px borders. It was `+ 4px` while the grid
   used `gap:1px` (two gaps); the gaps are cell borders now, so the extra 2px left the grid 2px short of the panel's
   right edge and the button no longer lined up with the third column. Change one, change the other. */
.tdrop__p { display:none; position:absolute; top:100%; right:-1px; margin-top:0; width:calc(var(--tdc) * 3 + 2px); background:var(--ink); border:1px solid #2b2f35; border-right-color:transparent; border-bottom-color:transparent; border-top:4px solid var(--brand); z-index:45; }
@media (hover:hover) and (pointer:fine) { .tdrop:hover .tdrop__p { display:block; } }
.tdrop.is-open .tdrop__p { display:block; }   /* NOT :focus-within — Escape returns focus to the button, which would re-open it */
/* EVERY rule here belongs to a CELL — no gap over a coloured grid, no outline on the panel. That is what makes a team
   count which does not fill the last row (7 = 3+3+1) look right: the empty part of that row has no cell, so it gets no
   background of its own (the panel's ink shows) AND no right or bottom rule. The outline closes itself when an 8th and
   9th team arrive, with no CSS change. `margin-bottom:-1px` puts the last row's rule exactly on the panel's edge.
   (operator, 2026-09-23) */
.tdrop__g { display:grid; grid-template-columns:repeat(3,var(--tdc)); background:var(--ink); margin-bottom:-1px; }
.tdrop__g a { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--ink); color:#c9cacc; text-decoration:none; font:700 19px/1 var(--disp); text-transform:uppercase; letter-spacing:.04em; border-right:1px solid #2b2f35; border-bottom:1px solid #2b2f35; }
.tdrop__g a b { font-weight:inherit; }
.tdrop__g a small { display:block; font:600 12px/1.3 var(--disp); letter-spacing:.14em; opacity:.75; }
.tdrop__g img { width:34px; height:34px; object-fit:contain; flex:none; }
.tdrop__g a:hover, .tdrop__g a:focus-visible { background:var(--c); color:var(--ci); }
.tdrop__g a:hover small, .tdrop__g a:focus-visible small { opacity:.9; }
.tdrop__g a[aria-current] { background:var(--c); color:var(--ci); }

/* home masthead */
.mast { background:var(--ink); color:#fff; }
.mast__in { padding:56px 24px 44px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:end; }
.onair { background:var(--white); color:var(--ink); border-top:8px solid var(--team); padding:18px 20px 16px; }
.onair__k { margin:0 0 8px; font:700 14px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.onair__vs { margin:0; font:800 30px/1 var(--disp); text-transform:uppercase; } .onair__when { margin:6px 0 12px; font-size:15px; color:var(--mute); }
.onair__t { width:100%; border-collapse:collapse; font-size:15px; } .onair__t th, .onair__t td { padding:7px 0; border-top:1px solid var(--rule); text-align:left; font-weight:400; }
.onair__t td { text-align:right; font:700 17px/1.2 var(--disp); text-transform:uppercase; white-space:nowrap; } .onair__t a { text-decoration:none; } .onair__t a:hover { text-decoration:underline; }
.onair__all { display:inline-block; margin-top:12px; font-weight:600; font-size:15px; }
.onair__more { display:block; width:100%; padding:9px 0 7px; border:0; border-top:1px solid var(--rule); background:none; color:var(--ink); text-align:left; font:700 15px/1.2 var(--disp); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.onair__more:hover, .onair__more:focus-visible { color:var(--brand); outline:none; } .onair__more[hidden] { display:none !important; }
.onair__dlg { width:min(520px, calc(100vw - 32px)); max-height:min(80vh, 760px); padding:0; border:0; border-top:8px solid var(--team); background:var(--white); color:var(--ink); }
.onair__dlg[open] { display:flex; flex-direction:column; } .onair__dlg::backdrop { background:rgba(17,20,24,.72); }
.onair__dlghead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px 0; }
.onair__dlgbody { overflow-y:auto; padding:0 20px 16px; }
.onair__x { flex:none; padding:8px 12px; border:1px solid var(--ink); background:none; color:var(--ink); font:700 14px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.onair__x:hover, .onair__x:focus-visible { background:var(--ink); color:#fff; outline:none; }
@media (max-width:980px) { .mast__in { grid-template-columns:1fr; gap:28px; } }
.kicker { margin:0 0 14px; font:600 15px/1.2 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:#b9bbbf; }
h1 { font-size:clamp(44px,7.4vw,96px); font-weight:800; max-width:14ch; }
.lead { margin:20px 0 0; max-width:60ch; font-size:18px; color:#d7d8da; }
/* the team band — an endless left-running ticker. hoops.js clones .teamstrip__g until the track covers the viewport
   twice and sets --ts-shift (ONE group's exact measured width) + --ts-dur, so the loop cuts on an identical frame at
   any width and any number of teams. No JS = a plain scrollable row (no .is-marquee → no animation, overflow-x:auto). */
.teamstrip { --ts-tile:300px; overflow-x:auto; scrollbar-width:none; border-top:1px solid #2b2f35; }
.teamstrip::-webkit-scrollbar { display:none; }
.teamstrip.is-marquee { overflow:hidden; }
.teamstrip__t { display:flex; }
.teamstrip__g { display:flex; flex:none; }
.teamstrip.is-marquee .teamstrip__t { width:max-content; animation:ts-run var(--ts-dur,40s) linear infinite; will-change:transform; }
.teamstrip.is-marquee:hover .teamstrip__t, .teamstrip.is-marquee:focus-within .teamstrip__t { animation-play-state:paused; }
@keyframes ts-run { from { transform:translate3d(0,0,0); } to { transform:translate3d(calc(-1 * var(--ts-shift,0px)),0,0); } }
@media (prefers-reduced-motion:reduce) { .teamstrip.is-marquee { overflow-x:auto; } .teamstrip.is-marquee .teamstrip__t { animation:none; } }
.teamstrip a { flex:0 0 auto; min-width:var(--ts-tile); display:flex; align-items:center; gap:16px; padding:22px 24px; background:var(--team); color:var(--team-ink); text-decoration:none; border-right:1px solid rgba(0,0,0,.35); font:800 38px/.95 var(--disp); text-transform:uppercase; white-space:nowrap; }
.teamstrip a small { display:block; font:600 14px/1.3 var(--disp); letter-spacing:.14em; opacity:.85; }
.teamstrip a:hover { filter:brightness(1.12); } .teamstrip img { width:72px; height:72px; object-fit:contain; }

/* bands + listings tables */
.band { padding:48px 0; } .band--alt { background:var(--white); border-block:1px solid var(--rule); }
.h2 { font-size:clamp(28px,3.2vw,40px); font-weight:800; padding-bottom:10px; margin-bottom:0; border-bottom:3px solid var(--rule2); }
.listing { width:100%; border-collapse:collapse; font-size:16px; }
.listing th { text-align:left; padding:10px 12px 8px 0; font:600 13px/1.2 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); border-bottom:1px solid var(--rule); }
.listing td { padding:13px 12px 13px 0; border-bottom:1px solid var(--rule); vertical-align:baseline; }
.listing a { text-decoration:none; } .listing a:hover { text-decoration:underline; }
.listing__d { font:700 18px/1.2 var(--disp); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; width:1%; padding-right:28px !important; }
.listing__r { text-align:right !important; padding-right:0 !important; white-space:nowrap; } .listing__cd { color:var(--mute); font-size:14px; margin-left:6px; }
.listing--cities .listing__first td { border-top:2px solid var(--rule2); } .listing--cities tbody tr:first-child td { border-top:0; }
.dot { display:inline-block; width:10px; height:10px; margin-right:8px; vertical-align:1px; }
.tag { font:600 12px/1 var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-left:8px; white-space:nowrap; }
.tag--note { color:#9a4a00; } .tag--warn { color:#a31919; }
.prose__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 40px; margin-top:22px; }
.prose h3 { font-size:22px; font-weight:700; margin-bottom:6px; } .prose p { margin:0 0 22px; color:#33363a; }

/* team page */
.hero { color:var(--team-ink); background:var(--team); }
.hero--plain { background:var(--ink); color:#fff; padding:64px 0; }
.hero__in--team { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:32px; padding:44px 24px 36px; }
.hero .kicker { color:inherit; opacity:.8; }
.is-team h1 { font-size:clamp(46px,7vw,92px); max-width:none; }
h1 small { display:block; margin-top:8px; font-size:.36em; font-weight:700; letter-spacing:.06em; opacity:.9; }
.hero .lead { color:inherit; opacity:.92; max-width:64ch; font-size:17px; }
.record { margin:14px 0 0; font:700 18px/1 var(--disp); text-transform:uppercase; letter-spacing:.06em; }
.hero__logo { width:clamp(110px,15vw,190px); height:auto; }
.btn { display:inline-block; padding:12px 18px; background:#fff; color:var(--ink); font:700 18px/1 var(--disp); text-transform:uppercase; letter-spacing:.06em; text-decoration:none; margin:0 6px 6px 0; }
.btn:hover { background:#ffb400; } .btn--ghost { background:none; color:#fff; border:2px solid #fff; }

.picker { margin:30px 0 22px; }
.picker__head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:10px; }
.picker__h { font:700 15px/1 var(--disp); letter-spacing:.14em; color:var(--mute); }
/* the city filter sits on the heading's line, its right edge on the container's right edge (= the chips box's) */
.picker__find { margin-left:auto; }
.picker__findi { width:260px; max-width:100%; padding:7px 11px; border:2px solid var(--rule2); background:var(--white); color:var(--ink); font:500 16px/1.2 var(--text); -webkit-appearance:none; appearance:none; border-radius:0; }
.picker__findi::placeholder { color:var(--mute); }
.picker__none { margin:12px 0 0; font:600 16px/1.3 var(--text); color:var(--mute); }
.chips { display:flex; flex-wrap:wrap; border:2px solid var(--rule2); background:var(--white); width:fit-content; max-width:100%; }
.chip { padding:9px 16px 8px; text-decoration:none; font:700 19px/1.05 var(--disp); text-transform:uppercase; letter-spacing:.03em; border-right:1px solid var(--rule); cursor:pointer; flex:1 1 auto; }
.chip small { display:block; font:600 12px/1.4 var(--disp); letter-spacing:.14em; color:var(--mute); }
.chip:hover { background:var(--paper); }
.chip[aria-current] { background:var(--rule2); color:#fff; } .chip[aria-current] small { color:#c9cacc; }

.next { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:stretch; margin:0 0 40px; background:var(--white); border:2px solid var(--rule2); }
.next__date { display:grid; align-content:center; justify-items:center; min-width:96px; padding:12px; background:var(--team); color:var(--team-ink); font:700 15px/1.1 var(--disp); text-transform:uppercase; letter-spacing:.12em; }
.next__date b { font-size:52px; line-height:.95; letter-spacing:0; }
.next__body { padding:16px 22px; align-self:center; }
.next__k { font:700 14px/1 var(--disp); letter-spacing:.14em; color:var(--mute); margin-bottom:6px; }
.next__vs { margin:0; font:800 clamp(26px,3.4vw,40px)/1 var(--disp); text-transform:uppercase; } .next__when { margin:6px 0 0; color:var(--mute); }
.next__ch { display:grid; align-content:center; min-width:220px; padding:14px 22px; border-left:2px solid var(--rule2); background:#ffe9a8; }
.next__chk, .g__chk { display:block; font:600 12px/1.2 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.next__chv { font:800 30px/1.05 var(--disp); text-transform:uppercase; } .next__opp { display:none; }

.sched__head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 18px; border-bottom:3px solid var(--rule2); }
.sched__head .h2 { border:0; margin-right:auto; }
.seg { display:inline-flex; margin-bottom:-3px; }
.seg__b { padding:10px 14px 9px; border:0; border-bottom:3px solid transparent; background:none; font:700 17px/1 var(--disp); text-transform:uppercase; letter-spacing:.05em; color:var(--mute); cursor:pointer; }
.seg__b span { font-weight:600; opacity:.75; } .seg__b:hover { color:var(--ink); } .seg__b.is-on { color:var(--ink); border-bottom-color:var(--team2); }
.glist__m { margin:0; padding:22px 0 8px; font:700 15px/1 var(--disp); letter-spacing:.14em; color:var(--mute); border-bottom:1px solid var(--rule2); }
.g { display:grid; grid-template-columns:74px 34px minmax(0,1fr) minmax(150px,auto); align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); }
.g__date { font:600 14px/1 var(--disp); text-transform:uppercase; letter-spacing:.1em; color:var(--mute); display:flex; align-items:baseline; gap:8px; } .g__date b { font-size:28px; font-weight:700; color:var(--ink); letter-spacing:0; order:-1; min-width:30px; }
.g__logo { width:34px; height:34px; object-fit:contain; }
.g__vs { margin:0; font-weight:600; font-size:18px; line-height:1.25; } .g__ha { display:inline-block; min-width:1.6em; font-weight:400; color:var(--mute); }
.g[data-venue="away"] .g__vs { font-weight:500; }
.g__when { margin:1px 0 0; color:var(--mute); font-size:15px; }
.g__ch { text-align:right; } .g__chv { font:700 20px/1.1 var(--disp); text-transform:uppercase; letter-spacing:.02em; } .g--off .g__chv { color:var(--mute); font-weight:600; } .g--off { opacity:.55; }
.res { display:inline-block; min-width:1.2em; font:800 17px/1 var(--disp); } .res--W { color:#14713a; } .res--L { color:#a31919; }
.empty { padding:28px 0; color:var(--mute); border-bottom:1px solid var(--rule); margin:0; }
.fine { font-size:14px; color:var(--mute); }
.where { margin:52px 0 64px; }
.stations { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); border-left:1px solid var(--rule); }
.station { display:grid; gap:2px; padding:18px 18px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--white); text-decoration:none; }
.station:hover { background:#fbfaf6; } .station.is-on { box-shadow:inset 0 5px 0 var(--team); }
.station__call { font:800 40px/.95 var(--disp); letter-spacing:.02em; } .station__city { font-weight:600; } .station__n { font-size:15px; color:var(--mute); }
.station__chs { margin-top:8px; font:600 15px/1.4 var(--disp); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); } .station__chs i { font-style:normal; } .station__chs i + i::before { content:" · "; }
.follow { margin:22px 0 0; display:flex; flex-wrap:wrap; gap:4px 18px; color:var(--mute); } .follow a { color:var(--ink); font-weight:600; }
.video { margin:0 0 40px; background:#000; aspect-ratio:16/9; } .video video { width:100%; height:100%; display:block; }

.foot { background:var(--ink); color:#b9bbbf; padding:32px 0 40px; font-size:15px; } .foot p { margin:0 0 8px; } .foot b { color:#fff; } .foot .fine { color:#84878c; }
.foot__teams { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:14px !important; } .foot__teams a { color:#fff; }

@media (max-width:760px) {
  body { font-size:16px; } .brand__logo { height:22px; } .tdrop__b { padding:0 12px; font-size:16px; }
  .tdrop { position:static; }                                        /* the panel spans the whole bar instead of hanging off it */
  .tdrop__b { width:auto; }                                          /* no column to align to down here */
  .tdrop__p { left:0; right:0; width:auto; border-left:0; border-right:0; }   /* the 4px --brand top rule stays: same divider, full width */
  .tdrop__g { grid-template-columns:repeat(3,minmax(0,1fr)); }       /* ⚠ fixed columns would overflow the viewport */
  .tdrop__g a:nth-child(3n) { border-right:0; }                      /* the panel runs edge to edge here: no rule against the screen */
  .tdrop__g a { padding:12px 10px; gap:8px; font-size:17px; flex-direction:column; align-items:flex-start; }
  .tdrop__g img { width:28px; height:28px; }
  .mast__in { padding:40px 24px 30px; gap:24px; } .teamstrip { --ts-tile:230px; } .teamstrip a { font-size:30px; padding:16px 24px; } .teamstrip img { width:52px; height:52px; }
  .hero__in--team { grid-template-columns:1fr; } .hero__logo { order:-1; width:96px; }
  .listing thead { display:none; } .listing tr { display:grid; grid-template-columns:1fr auto; padding:10px 0; border-bottom:1px solid var(--rule); } .listing td { border:0; padding:2px 0; }
  .listing:not(.listing--cities) td:nth-child(2) { grid-column:1 / -1; grid-row:2; font-size:17px; } .listing:not(.listing--cities) td:nth-child(3) { text-align:right; color:var(--mute); }
  .listing:not(.listing--cities) td:nth-child(4), .listing__cd { display:none; }
  .listing--cities .listing__first td { border:0; } .listing--cities tr.listing__first { border-top:2px solid var(--rule2); } .listing td:empty { display:none; }
  /* "Stations by city" on a phone. The shared rule above flowed the four cells into a 2-col grid in source order, so the team
     name sat beside a city and the channel landed under the WRONG column. Here every cell gets an explicit grid area:
     row 1 = the team (its own full-width heading, hidden by td:empty on the team's other rows), then the CITY with its station
     under it on the left, and the channel — the thing a reader is actually after — on the right, labelled because the <thead>
     that would have explained it is display:none down here. */
  .listing--cities tr { grid-template-columns:minmax(0,1fr) auto; column-gap:18px; padding:12px 0; }
  .listing--cities td:nth-child(1) { grid-area:1 / 1 / 2 / -1; padding-bottom:8px; }
  .listing--cities td:nth-child(2) { grid-area:2 / 1 / 3 / 2; font:600 17px/1.25 var(--text); }
  .listing--cities td:nth-child(3) { grid-area:3 / 1 / 4 / 2; font:600 13px/1.4 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
  .listing--cities td:nth-child(4) { grid-area:2 / 2 / 4 / 3; align-self:center; font:700 17px/1.25 var(--text); }
  .listing--cities td:nth-child(4)::before { content:"Usual channel"; display:block; font:600 11px/1.5 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
  .chips { width:100%; } .chip { flex:1 1 45%; border-bottom:1px solid var(--rule); }
  .picker__find, .picker__findi { width:100%; }                      /* stacked under the heading, full width — never a stranded 260px box */
  .next { grid-template-columns:auto minmax(0,1fr); } .next__ch { grid-column:1 / -1; border-left:0; border-top:2px solid var(--rule2); }
  .g { grid-template-columns:58px 28px minmax(0,1fr); gap:10px; } .g__logo { width:28px; height:28px; } .g__date { flex-direction:column; gap:2px; } .g__date b { font-size:24px; }
  .g__ch { grid-column:3; text-align:left; display:flex; gap:8px; align-items:baseline; } .g__chv { font-size:18px; }
  .sched__head .h2 { flex-basis:100%; }
}

/* ⚠ the smallest phones (320px): brand + "Find Your Team" once needed 332px of a 272px bar, which pushed the whole DOCUMENT to
   356px wide. Nothing above 340px is touched — 360 and 390 already fit exactly. */
@media (max-width:340px) {
  .wrap { padding:0 16px; }
  .top__in { gap:12px; }
  .brand__logo { height:17px; }      /* 118px wide: brand + "Find Your Team" still fit the 288px bar */
}

/* the plain-text answer on a city page (what channel · next game) */
.answer { margin: 12px 0 14px; padding: 12px 14px; border-left: 4px solid var(--team2); background: rgba(255,255,255,.1); font-size: 18px; line-height: 1.45; font-weight: 500; }

/* live scores (2026-09-22): a game on air */
.g--live { background:#fff7f7; box-shadow: inset 4px 0 0 #a31919; }
.live { display:inline-flex; align-items:center; gap:6px; color:#a31919; font:800 13px/1 var(--disp); letter-spacing:.08em; }
.live i { width:8px; height:8px; border-radius:50%; background:#a31919; animation:livepulse 1.2s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .live i { animation:none; } }
.g__score, .next__when--live .g__score { font:800 17px/1 var(--disp); color:var(--ink, #0d1321); font-variant-numeric:tabular-nums; }
.next__when--live { color:inherit; }
/* Footer legal buttons — Gray Media privacy policy + terms of use (2026-10-08). Square, hairline, flat (the hub's design rule) */
.foot__legal { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.foot__legal a { display:inline-block; padding:8px 16px; border:1px solid #84878c; color:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.foot__legal a:hover, .foot__legal a:focus-visible { background:var(--brand); border-color:var(--brand); color:#fff; outline:none; }