/* sports.css — the Sports desk's width and chrome.
   Loaded by sports.html ONLY, after styles.css. Scoped under .sportwide (the
   shell class scripts/sections.py gives this page) so nothing here can reach
   another desk, the front page, or a story.

   WHY A PAGE STYLESHEET AND NOT styles.css: the shared sheet is the hottest
   file in the repo — parallel sessions collide in it, and a width change made
   there would move all eight desks plus every story page. The Entertainment
   sheet solved the same problem the same way (ent.css, 2026-08-13); this is
   that pattern, third use.

   OWNER'S CALL, 2026-08-14: "make the sports and food pages take up the whole
   width like the entertainment page does, and the sports masthead the same
   size as entertainment's." Both halves below, and nothing else. */

/* ---- full bleed, the entertainment sheet's terms ----
   The sheet's frame comes off so the desk owns the screen; the CONTENT column
   keeps a cap (1720px, the same number .entdesk .page-wrap uses) because a
   headline that runs the full width of a 27-inch monitor is unreadable. The
   ground bleeds; the text does not. The front page keeps its frame. */
.sportwide { max-width: none; border-radius: 0; box-shadow: none; }

/* The desk's own column only — NOT the shared `.wrap`, which the footer below
   also uses: widening that would stretch the site's footer on this page alone
   and nowhere else, which is drift wearing a feature's clothes. */
.sportwide .sectionpage { max-width: 1720px; }

/* ---- compact chrome, this page only ----
   The same four numbers ent.css and food.css carry, and the tests pin all
   three together: on a desk page the section owns the screen and the paper
   signs smaller. CSS only, on donor-identical markup, so the chrome sweep and
   its drift tests keep seeing the same bytes on every page. */
.sportwide .band.utility { height: 30px; }
.sportwide .brand-band.small { height: 58px; }
.sportwide .brand-band.small .wordmark { width: 290px; }
.sportwide nav.sections { height: 32px; }

/* ---- the full furnish: the mock's remaining rooms ----
   The second half of the Sports port. styles.css:2574-3019 carries the strip,
   the hero shells, the quad shells, the promos and the breakpoints; this block
   carries the furniture the mock puts INSIDE them — the leaders rail, the
   column card, the team tiles, the panel row anatomies, the Around grid and
   the two promo cards. Same conversion law as the first half: the mock was
   authored at a 1000px shell with half-scale type and a zoom hack; every
   number here is the mock's multiplied ~1.45x into a real value, with a 10px
   floor on type. The zoom never ships.

   Everything is scoped under .sportwide (the shell class sections.py gives
   this page) so none of it can reach another desk. Two collision notes:
   the mock's .latest-label is renamed .latest-tag here because styles.css
   owns .latest-label for the front-page latest bar; and the global .desk-pull
   dress (rule-top, 44px air) is explicitly taken OFF this page's .desk-pull,
   which wears the mock's light band instead. The section keeps the exact
   class `desk-pull` — the chip-law tests read that block shape by name. */

/* ---- 1. The hero becomes the mock's three rooms ----
   Lead ~580, leaders rail ~200, column card ~220 — 2.9 / 1 / 1.1. The base
   sheet's phead/pnote/plist areas belonged to the pull rail that used to sit
   where the column card now lives; the tiles leave the hero for their own
   band (.sp-tiles, next section), so the hero drops to one row and its
   bottom margin moves to the tiles so the two read as one dark slab. */
.sportwide .sp-hero {
  grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto;
  grid-template-areas: "lead side column";
  margin-bottom: 0;
}
/* If the leaders payload is dark the rail hides and the card widens in. */
.sportwide .sp-hero:not(:has(> .sp-side:not([hidden]))) {
  grid-template-columns: minmax(0, 2.9fr) minmax(0, 1.1fr);
  grid-template-areas: "lead column";
}
.sportwide .sp-hero .column-card { grid-area: column; }

/* ---- 2. Shared fittings ----
   The pieces several rooms borrow, defined once: the initials disc, the
   footer links, the desk chip, the tabs, the hairline. Inner data rows rule
   with #ececed — one step lighter than --rule, the mock's own two-tone, so
   five rows of scores read as a list and not as a grid. */

/* The disc: the mock's 22px headshots become a monogram circle — initials in
   the club's colours, background/colour arriving inline from the same baked,
   hex-revalidated palette the team marks use. Only the shape lives here. */
.sportwide .leader-disc,
.sportwide .small-team-logo,
.sportwide .latest-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  font-family: var(--ui); font-size: 11px; font-weight: 800;
  letter-spacing: .01em; line-height: 1;
  background: var(--night); color: #fff;
}
.sportwide .small-team-logo,
.sportwide .latest-logo { width: 26px; height: 26px; font-size: 10px; }
.sportwide .sp-hero .leader-disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* Footer links, light bands: one voice for every "View all →". */
.sportwide .standing-link,
.sportwide .analysis-link,
.sportwide .stream-more,
.sportwide .prep-link,
.sportwide .latest-more,
.sportwide .blue-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue);
  transition: color .16s ease;
}
.sportwide .standing-link:hover,
.sportwide .analysis-link:hover,
.sportwide .stream-more:hover,
.sportwide .prep-link:hover,
.sportwide .latest-more:hover,
.sportwide .blue-more:hover { color: var(--blue-deep); }
.sportwide .standing-link,
.sportwide .analysis-link,
.sportwide .stream-more,
.sportwide .latest-more { padding: 12px 0 2px; }

/* The desk chip in a meta line: night on white, sized to disappear until
   you look for it. Same 9.5px the house chips (.pull-shelf, .dm-flag) use. */
.sportwide .analysis-meta .pull-shelf,
.sportwide .news-meta .pull-shelf {
  display: inline-block; margin-right: 6px; padding: 1px 5px;
  border-radius: 1px; background: var(--night); color: #fff;
  font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
}

/* Tabs — cosmetic-active only for now; the wiring comes with a payload that
   can honour a second league, never before. Light-band colours here, the
   dark leaders variant beside its rail below. */
.sportwide .js-tab {
  appearance: none; border: 0; background: none; margin: 0; padding: 0 2px;
  cursor: default; position: relative;
  font-family: var(--ui); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  transition: color .15s ease;
}
.sportwide .js-tab:hover { color: var(--ink); }
.sportwide .js-tab.active { color: var(--blue); font-weight: 700; }
.sportwide .js-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--blue);
}

/* ---- 3. The leaders rail (hero, dark) ----
   The mock's .leaders anatomy inside the existing .sp-side shell. Rows are
   disc | category-over-name | club | value; hairlines at .14 white. Links on
   navy take #6ea8ff — the house --blue is built for paper and goes murky on
   the night ground. */
.sportwide .sp-hero .leaders { overflow: hidden; }
.sportwide .leaders-title {
  display: flex; align-items: center; min-height: 42px;
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.sportwide .leader-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); height: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}
.sportwide .leader-tabs .js-tab { text-align: center; color: rgba(255, 255, 255, .62); }
.sportwide .leader-tabs .js-tab:hover { color: rgba(255, 255, 255, .85); }
.sportwide .leader-tabs .js-tab.active { color: #fff; }
.sportwide .leader-tabs .js-tab.active::after { left: 12px; right: 12px; background: #fff; }
.sportwide .leader-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px 44px;
  align-items: center; column-gap: 6px; min-height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.sportwide .leader-cat {
  font-family: var(--ui); font-size: 10px; line-height: 1.2;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.sportwide .leader-name {
  font-family: var(--display); font-size: 12px; line-height: 1.25; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sportwide .leader-team {
  font-family: var(--ui); font-size: 10px; text-align: right;
  color: rgba(255, 255, 255, .6);
}
.sportwide .leader-val {
  font-family: var(--ui); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; color: #fff;
}
.sportwide .leaders-link {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 10px 0 0; font-family: var(--ui); font-size: 10px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6ea8ff; transition: color .16s ease;
}
.sportwide .leaders-link:hover { color: #9cc4ff; }

/* ---- 4. The column card (hero, right) ----
   Navy running to #0633a1 on the diagonal, the columnist's art bleeding in
   from the right under a left fade, the copy riding z3 above both. */
.sportwide .column-card {
  position: relative; overflow: hidden; padding: 0 17px 16px;
  background: linear-gradient(115deg, #081424 0%, #0a1830 59%, #0633a1 100%);
  color: #fff;
}
.sportwide .column-card .column-art {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 145px; height: 210px; object-fit: cover;
}
.sportwide .column-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(8, 20, 36, 1) 0%, rgba(8, 20, 36, .93) 54%, rgba(8, 20, 36, .08) 79%);
  pointer-events: none;
}
.sportwide .column-copy { position: relative; z-index: 3; width: 183px; max-width: 100%; }
.sportwide .dark-eyebrow {
  display: flex; align-items: center; min-height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.sportwide .column-title {
  margin: 12px 0 8px; font-family: var(--display); font-weight: 500;
  font-size: 19px; line-height: 1.16; color: #fff; letter-spacing: -.01em;
}
.sportwide .column-dek { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .84); }
.sportwide .column-by {
  margin: 44px 0 0; font-family: var(--ui); font-size: 10px; line-height: 1.4;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}

/* ---- 5. The team tiles ----
   The mock's hero-bottom as its own band, fused under the hero by the
   moved margin: five club rooms, the fifth (college) a step wider, each
   glowing in its club's family — base gradient plus a left wash over the
   art, both in the same hue so the type never sits on raw photograph. */
.sportwide .sp-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.04fr) minmax(0, 1.14fr);
  border-top: 1px solid rgba(255, 255, 255, .7);
  background: var(--night); margin: 0 0 14px;
}
.sportwide .mini-story {
  position: relative; overflow: hidden; min-height: 170px;
  padding: 14px 13px; color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .55);
  background: #091627;
}
.sportwide .mini-story:last-child { border-right: 0; }
.sportwide .mini-story .mini-art {
  position: absolute; right: 0; top: 0; z-index: 1;
  height: 100%; width: auto; object-fit: cover;
}
.sportwide .mini-story::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 18, 31, 1) 0%, rgba(6, 18, 31, .94) 43%, rgba(6, 18, 31, .15) 75%, rgba(6, 18, 31, 0) 100%);
}
.sportwide .mini-story.purple { background: linear-gradient(115deg, #1a1036 0%, #3a2270 100%); }
.sportwide .mini-story.purple::after {
  background: linear-gradient(90deg, rgba(37, 13, 56, 1), rgba(37, 13, 56, .86) 44%, rgba(37, 13, 56, 0) 92%);
}
.sportwide .mini-story.blue { background: linear-gradient(115deg, #04203f 0%, #0d3f7d 100%); }
.sportwide .mini-story.blue::after {
  background: linear-gradient(90deg, rgba(5, 35, 72, 1), rgba(5, 35, 72, .83) 46%, rgba(5, 35, 72, 0) 95%);
}
.sportwide .mini-story.red { background: linear-gradient(115deg, #14090c 0%, #3a1620 100%); }
.sportwide .mini-story.red::after {
  background: linear-gradient(90deg, rgba(20, 15, 25, 1), rgba(20, 15, 25, .9) 47%, rgba(20, 15, 25, 0) 94%);
}
.sportwide .mini-story.college { background: linear-gradient(115deg, #241b08 0%, #4d3b10 100%); }
.sportwide .mini-story.college::after {
  background: linear-gradient(90deg, rgba(36, 27, 8, 1), rgba(36, 27, 8, .88) 46%, rgba(36, 27, 8, 0) 94%);
}
.sportwide .mini-copy { position: relative; z-index: 3; width: 60%; }
.sportwide .mini-story.college .mini-copy { width: 66%; }
.sportwide .mini-brand {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #dfe8f6;
}
.sportwide .mini-logo {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  line-height: .9; color: #75a7ff;
}
.sportwide .mini-record {
  margin: 11px 0 7px; font-family: var(--ui); font-size: 10px;
  line-height: 1.4; letter-spacing: .03em; text-transform: uppercase;
  color: #c2cada;
}
.sportwide .mini-headline {
  font-family: var(--display); font-size: 12.5px; line-height: 1.3; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportwide .mini-link {
  position: absolute; left: 13px; bottom: 12px; z-index: 3;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #6ea8ff; transition: color .16s ease;
}
.sportwide .mini-link:hover { color: #9cc4ff; }

/* ---- 6. Quad band inner rows ----
   The shells (.sp-panel, .sp-panel-head, .sp-panel-body) stay as the first
   half built them; these are the row anatomies the renderer seats inside. */

/* Band ratios — the mock's column music: watch widest, then scoreboard,
   standings, analysis; the lower band nearly even, TV a shade wider. */
.sportwide .sp-quad {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr);
}
.sportwide .sp-lower {
  grid-template-columns: minmax(0, 1.27fr) minmax(0, 1.07fr) minmax(0, 1.03fr) minmax(0, 1fr);
}

/* 6a. Watch guide: disc | day-and-time | fixture-and-venue | channels. */
.sportwide .watch-row {
  display: grid; grid-template-columns: 34px 110px minmax(0, 1fr) 52px;
  align-items: center; column-gap: 4px; min-height: 62px;
  border-bottom: 1px solid #ececed;
}
.sportwide .watch-row:last-child { border-bottom: 0; }
.sportwide .watch-time {
  font-family: var(--ui); font-size: 10px; line-height: 1.4;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2);
}
.sportwide .watch-time strong { font-size: 10.5px; color: var(--ink); }
.sportwide .watch-match { font-family: var(--display); font-size: 11px; line-height: 1.35; color: var(--ink); }
.sportwide .watch-match span {
  display: block; font-family: var(--ui); font-size: 10px; color: var(--ink-3);
}
.sportwide .watch-tv {
  text-align: right; font-family: var(--ui); font-size: 10px;
  line-height: 1.55; color: var(--ink-2);
}

/* 6b. Scoreboard: league label, then the linescore table. */
.sportwide .league-label {
  display: flex; align-items: flex-end; min-height: 30px; padding-bottom: 4px;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sportwide .league-label span { margin-left: auto; font-weight: 600; }
.sportwide .score-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ui); font-size: 10px; font-variant-numeric: tabular-nums;
}
.sportwide .score-table th {
  height: 16px; font-size: 10px; font-weight: 500; text-align: right;
  color: var(--ink-3);
}
.sportwide .score-table th:nth-child(2) { text-align: left; }
.sportwide .score-table td {
  height: 30px; text-align: right; border-bottom: 1px solid #ececed;
}
.sportwide .score-table td:nth-child(2) {
  text-align: left; font-family: var(--display); font-size: 11px;
}
.sportwide .score-table .logo-cell {
  width: 34px; text-align: left; padding-right: 6px;
  font-family: var(--display); font-size: 19px; font-weight: 700;
  color: var(--blue-deep);
}
.sportwide .score-table strong { font-size: 13px; }
.sportwide .score-note {
  padding: 4px 0 0; font-family: var(--ui); font-size: 10px;
  line-height: 1.3; text-align: right; color: var(--ink-3);
}

/* 6c. Standings: rank | club | W | L | Pct | GB, numerics right. */
.sportwide .standing-head,
.sportwide .standing-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px 32px 45px 34px;
  align-items: center; text-align: right;
  font-family: var(--ui); font-variant-numeric: tabular-nums;
}
.sportwide .standing-head {
  min-height: 40px; border-bottom: 1px solid #ececed;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
.sportwide .standing-row { min-height: 38px; font-size: 10.5px; }
.sportwide .standing-rank { text-align: left; color: var(--ink-3); }
.sportwide .standing-team {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font-family: var(--display); font-size: 11px; min-width: 0;
}
.sportwide .standing-team b {
  font-family: var(--ui); font-size: 17px; font-weight: 700;
  color: var(--blue-deep);
}

/* 6d. More Analysis: thumb | title-over-meta, the quad's only art rows. */
.sportwide .analysis-row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr);
  gap: 11px; align-items: center; min-height: 76px;
  border-bottom: 1px solid #ececed;
}
.sportwide .analysis-row .analysis-art {
  width: 90px; height: 64px; object-fit: cover; border-radius: 2px;
  display: block; background: #d7d9dc;
}
.sportwide .analysis-title {
  font-family: var(--display); font-size: 12px; line-height: 1.3;
  color: var(--ink); transition: color .16s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportwide .analysis-row:hover .analysis-title { color: var(--blue); }
.sportwide .analysis-meta {
  margin-top: 4px; font-family: var(--ui); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 7. Around L.A. Sports ----
   The mock's eight-up news band, worn by the desk-pull section. The global
   .desk-pull dress comes off first: no rule-top, no 44px air — this band is
   a bordered light card like the panels beside it. */
.sportwide .desk-pull {
  margin: 0 0 14px; padding: 0;
  border: 1px solid #cdd0d2; border-radius: 0;
  background: rgba(255, 255, 255, .68); overflow: hidden;
}
.sportwide .desk-pull .desk-pull-note { margin: 8px 13px 0; }
.sportwide .around-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 13px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
.sportwide .around-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 7px; padding: 10px 13px 12px;
}
.sportwide .around-grid > li {
  min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  border: 0; padding: 0; white-space: normal;
}
.sportwide .around-grid .news-art {
  width: 100%; height: 160px; display: block; overflow: hidden;
  background: #d7d9dc;
}
.sportwide .around-grid .news-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
.sportwide .around-grid .news-title {
  margin-top: 7px; font-family: var(--display); font-size: 12px;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  transition: color .16s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportwide .around-grid .news-title:hover { color: var(--blue); }
.sportwide .around-grid .news-meta {
  margin-top: 4px; font-family: var(--ui); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
/* The credit stays one quiet line; a licence string never wrecks the card. */
.sportwide .around-grid .thumb-cr {
  margin-top: 3px; font-size: 10px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 8. Lower band inner rows ---- */

/* 8a. TV & Streaming: tab pair, then time | fixture | network. */
.sportwide .stream-tabs,
.sportwide .performer-tabs {
  display: flex; align-items: stretch; gap: 29px; min-height: 38px;
  border-bottom: 1px solid var(--rule);
}
.sportwide .performer-tabs { gap: 65px; }
.sportwide .stream-row {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) 74px;
  align-items: center; min-height: 38px; border-bottom: 1px solid #ececed;
}
.sportwide .stream-time { font-family: var(--ui); font-size: 10.5px; font-weight: 700; }
.sportwide .stream-match { font-family: var(--display); font-size: 11px; min-width: 0; }
.sportwide .stream-match em {
  font-family: var(--ui); font-size: 10px; font-style: italic;
  color: var(--ink-3);
}
.sportwide .stream-net {
  text-align: right; font-family: var(--ui); font-size: 10px;
  color: var(--ink-2);
}

/* 8b. Top Performers: rank | disc | name | club | stat. */
.sportwide .performer-row {
  display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) 38px 66px;
  align-items: center; min-height: 38px; border-bottom: 1px solid #ececed;
  font-family: var(--ui); font-size: 10.5px;
}
.sportwide .performer-rank { color: var(--ink-3); font-size: 10px; }
.sportwide .performer-name {
  font-family: var(--display); font-size: 11px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sportwide .performer-team { text-align: center; font-size: 10px; color: var(--ink-2); }
.sportwide .performer-stat {
  text-align: right; font-weight: 700; font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* 8c. Prep Spotlight: portrait | copy. The art comes two ways — a photo, or
   a team-colour panel carrying one big initial when no photo is licensed.
   The gradient is background-IMAGE so an inline background-color (the baked
   club palette) shows through it. */
.sportwide .prep-body {
  display: grid; grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px; padding-top: 12px;
}
.sportwide .prep-body img.prep-art {
  width: 136px; height: 217px; object-fit: cover; align-self: end;
  border-radius: 2px; display: block;
}
.sportwide .prep-body div.prep-art {
  width: 136px; height: 217px; align-self: end; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--night);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .28) 100%);
  font-family: var(--display); font-size: 64px; font-weight: 700;
  color: rgba(255, 255, 255, .85);
}
.sportwide .prep-copy { padding-top: 7px; min-width: 0; }
.sportwide .prep-title { font-family: var(--display); font-size: 15px; line-height: 1.35; }
.sportwide .prep-dek {
  margin-top: 19px; font-family: var(--serif); font-size: 11px;
  line-height: 1.5; color: var(--ink-2);
}
.sportwide .prep-meta {
  margin-top: 26px; font-family: var(--ui); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.sportwide .prep-link {
  margin-top: 12px; padding: 12px 0 2px; border-top: 1px solid #ececed;
  width: 100%;
}

/* 8d. Latest Scores. The mock calls this row .latest-label; that name is the
   front page's (styles.css:158,382), so here it is .latest-tag — same room,
   uncontested key. */
.sportwide .latest-tag {
  display: flex; align-items: flex-end; min-height: 34px; padding-bottom: 6px;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sportwide .latest-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 26px minmax(0, 1fr) 26px 44px;
  align-items: center; column-gap: 4px; min-height: 52px;
  border-bottom: 1px solid #ececed;
  font-family: var(--display); font-size: 11px; color: var(--ink);
}
.sportwide .latest-score {
  text-align: center; font-family: var(--ui); font-size: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.sportwide .latest-final {
  text-align: right; font-family: var(--ui); font-size: 10px;
  color: var(--ink-3);
}

/* 8e. History, full width and deliberately quiet — it holds real Retrosheet
   lines, and archive data reads best said plainly. The rows flow into as
   many 300px columns as the band affords. */
.sportwide .sp-history .sp-panel { grid-column: 1 / -1; }
.sportwide .sp-history .sp-panel-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 46px; align-items: start;
}
.sportwide .sp-history .sp-row { font-size: .88rem; color: var(--ink-2); }

/* ---- 9. The promos ----
   The .sp-foot grid (1fr / 1.34fr, stacking at 1040) already matches the
   mock's 420/562; only the two cards change clothes. */

/* 9a. The newsletter card. The box is the card; the orbit inside keeps its
   own classes and internals and only has its OLD card chrome taken off, so
   two borders never nest. The art sits under the copy's z-plane. */
.sportwide .newsletter-box {
  position: relative; overflow: hidden; min-height: 220px;
  padding: 23px 20px 18px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}
.sportwide .newsletter-box .orbit {
  position: relative; z-index: 2; max-width: 355px;
  margin: 0; padding: 0; height: auto;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.sportwide .newsletter-box .newsletter-art {
  position: absolute; right: 17px; bottom: 9px; z-index: 1;
  width: 226px; height: 213px; object-fit: contain;
}

/* 9b. The banner — the games promo in the mock's member-banner clothes:
   blue radial ground, art clipped in on a slant from the right, monogram
   square, white pill button that lifts on hover. */
.sportwide .sp-promo.promo-banner {
  display: block; position: relative; overflow: hidden;
  min-height: 220px; padding: 0; border-radius: 6px; color: #fff;
  background: radial-gradient(circle at 72% 42%, #1651a0 0, #0d3984 34%, #062867 70%, #05245d 100%);
}
.sportwide .sp-promo.promo-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(4, 35, 91, 1) 0%, rgba(4, 35, 91, .94) 46%, rgba(4, 35, 91, .22) 67%, rgba(4, 35, 91, 0) 80%);
}
.sportwide .promo-banner .promo-art {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: 423px; height: 247px; object-fit: cover;
  object-position: right bottom; clip-path: inset(0 0 0 17%);
}
.sportwide .promo-copy {
  position: relative; z-index: 2; padding: 30px 0 26px 29px;
  max-width: min(493px, 92%);
}
.sportwide .promo-brand { display: flex; align-items: center; gap: 14px; }
.sportwide .promo-monogram {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--night);
  font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1;
}
.sportwide .promo-title {
  font-family: var(--display); font-weight: 600; font-size: 29px;
  line-height: 1.2; letter-spacing: -.01em; color: #fff;
}
.sportwide .promo-dek {
  margin-top: 14px; max-width: 400px;
  font-family: var(--serif); font-size: 12.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}
.sportwide .promo-btn {
  margin-top: 13px; display: inline-flex; align-items: center;
  height: 35px; padding: 0 21px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .16s ease, box-shadow .16s ease;
}
.sportwide .sp-promo.promo-banner:hover .promo-btn {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* ---- 10. Narrow sheets ----
   Folded into the SAME two widths the first half uses (1040 / 700); the
   existing rules there still run — these add only the new rooms. */
@media (max-width: 1040px) {
  /* Hero: lead full width, rail and card share the second row. */
  .sportwide .sp-hero,
  .sportwide .sp-hero:not(:has(> .sp-side:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "lead lead"
      "side column";
  }
  /* Tiles pair up; college takes the full last row rather than dangling. */
  .sportwide .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sportwide .mini-story { border-bottom: 1px solid rgba(255, 255, 255, .3); }
  .sportwide .mini-story:nth-child(2n) { border-right: 0; }
  .sportwide .mini-story:last-child { grid-column: 1 / -1; border-bottom: 0; }
  /* The bands drop to the base sheet's two-up; the ratio overrides above
     must not outrank it. */
  .sportwide .sp-quad,
  .sportwide .sp-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Around: eight cards can no longer split the sheet honestly — they ride
     sideways at a fixed width instead, the mock's own phone move. */
  .sportwide .around-grid {
    grid-auto-columns: 200px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }
}
@media (max-width: 700px) {
  .sportwide .sp-quad,
  .sportwide .sp-lower { grid-template-columns: minmax(0, 1fr); }
  /* Hero: one column — lead, rail, card. The tiles keep the hero's full
     bleed so the dark slab stays one piece to the screen edge. */
  .sportwide .sp-hero,
  .sportwide .sp-hero:not(:has(> .sp-side:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "side" "column";
  }
  .sportwide .sp-tiles { margin-inline: -14px; grid-template-columns: minmax(0, 1fr); }
  .sportwide .mini-story,
  .sportwide .mini-story:nth-child(2n) {
    min-height: 150px; border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
  }
  .sportwide .mini-story:last-child { border-bottom: 0; }
  .sportwide .mini-copy,
  .sportwide .mini-story.college .mini-copy { width: 58%; }
  /* The card on a phone: the mock's own phone numbers, which are real px. */
  .sportwide .column-card { min-height: 210px; }
  .sportwide .column-card .column-art { width: 145px; height: auto; }
  .sportwide .column-title { font-size: 22px; }
  .sportwide .column-dek { font-size: 10.5px; line-height: 1.5; }
  .sportwide .column-by { margin-top: 28px; }
  /* Promos: art fades under the copy instead of fighting it for the width. */
  .sportwide .newsletter-box .newsletter-art { opacity: .45; }
  .sportwide .promo-banner .promo-art { opacity: .7; }
  .sportwide .promo-copy { padding: 22px 0 22px 20px; max-width: 88%; }
  .sportwide .promo-title { font-size: 24px; }
  .sportwide .promo-dek { max-width: 100%; }
}

/* ---- 11. Post-audit corrections (2026-08-14, adversarial pass) ----
   Everything below fixes a confirmed finding from the pre-PR review:
   stale base-sheet rules reaching the new bands, seats the port lacked,
   and inline-vs-sheet collisions. Each rule names its finding. */

/* The base sheet's old single-band rule gave the latest panel a two-column
   span; in the four-up lower band that wrapped it to its own row and left a
   hole. The lower band seats it back in its one mock column. */
.sportwide .sp-lower > .sp-panel[data-needs="latest"] { grid-column: auto; }

/* styles.css gives every .thumb-cr `grid-column: 1 / -1`, which shattered
   the analysis rows (credit on its own full-width row, copy in the 90px
   thumb column). Give the credit a definite seat under the copy. */
.sportwide .analysis-row .thumb-cr {
  grid-column: 2; grid-row: 2; margin-top: 0;
  font-size: 9.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sportwide .analysis-row { grid-template-rows: auto auto; }
.sportwide .analysis-row .analysis-art { grid-row: 1 / 3; }

/* The tile and column-card credits sat in normal flow under the art's
   colour wash — invisible ink on navy. Seat them where the retired
   pull-tiles seat sat, one layer above the parent's own ::after. */
.sportwide .mini-story .thumb-cr,
.sportwide .column-card .thumb-cr {
  position: absolute; right: 6px; bottom: 5px; z-index: 3; margin: 0;
  max-width: 60%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.sportwide .mini-story .thumb-cr .cr,
.sportwide .column-card .thumb-cr .cr {
  color: rgba(255, 255, 255, .5); font-size: 9px;
}

/* The banner's copy block is a <span>; without the old .sp-promo flex the
   spans fell back to inline and the padding died. Blockify the anatomy. */
.sportwide .promo-copy { display: block; }
.sportwide .promo-dek { display: block; }
.sportwide .promo-btn { margin-top: 13px; }

/* The brand marks: .team-mark's 15px lock met .mini-logo's 22px type and
   garbled. The tile brand wears a proper 30px disc; the scoreboard and
   standings marks step up from the strip's 15px to a legible 22px. */
.sportwide .mini-logo {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  font-family: var(--ui); font-size: 11px; font-weight: 800;
  letter-spacing: .01em; line-height: 1;
}
.sportwide .mini-logo.mini-logo-college {
  width: auto; flex-basis: auto; border-radius: 0; background: none;
  font-size: 11px; color: #f3c43e;
}
.sportwide .score-table .logo-cell .team-mark,
.sportwide .standing-team .team-mark {
  width: 22px; height: 22px; flex: 0 0 22px; font-size: 8px;
}

/* A club the palette cannot colour prints as plain type on the house
   night — never an empty disc. */
.sportwide .team-mark-plain { background: var(--night); color: #fff; }

/* Panels whose furniture legitimately lives outside .sp-panel-body
   (tabs and footer links the hydrator must not wipe; the editorial
   panels' whole anatomy) take the body's own 14px inset. */
.sportwide .sp-panel > .stream-tabs,
.sportwide .sp-panel > .stream-more,
.sportwide .sp-panel > .standing-link,
.sportwide .sp-panel > .latest-more,
.sportwide .sp-panel > .analysis-list,
.sportwide .sp-panel > .analysis-link,
.sportwide .sp-panel > .performer-tabs,
.sportwide .sp-panel > .performer-list,
.sportwide .sp-panel > .prep-body,
.sportwide .sp-panel > .prep-link {
  margin-left: 14px; margin-right: 14px;
}
.sportwide .sp-panel > .prep-link,
.sportwide .sp-panel > .stream-more,
.sportwide .sp-panel > .standing-link,
.sportwide .sp-panel > .latest-more,
.sportwide .sp-panel > .analysis-link { display: inline-flex; }

/* The leaders rail's rows were double-inset: the sp-side shell already
   pads, so the body inside it does not. */
.sportwide .sp-hero .leaders .sp-panel-body { padding: 0; }

/* Leaks from the global desk-pull dress into the grid rows. */
.sportwide .around-grid > li { gap: 0; }
.sportwide .analysis-meta .pull-shelf,
.sportwide .news-meta .pull-shelf { border: 0; }


/* =====================================================================
   THE SPORTS FIXES — full-site design review, 2026-08-16.
   Four defects, all visible without scrolling on a 1440 screen or a
   390 phone. Nothing here changes the format; it stops the format
   colliding with itself.
   ===================================================================== */

/* 1. THE ONLY HORIZONTAL PAGE SCROLL ON THE SITE. Measured at 390px:
   document.scrollWidth 403 in a 390 viewport, and the page rocked
   sideways. Source was one rule — `.prep-link { width: 100% }` inside a
   panel that also gives it `margin-left/right: 14px`, so the link
   measured 100% PLUS 28px and pushed its panel 28px past the grid
   column that held it. The margins are the panel's inset and they are
   correct; the width has to account for them. */
.sportwide .sp-panel > .prep-link { width: calc(100% - 28px); }

/* 2. THE PHOTO CREDIT PRINTED ON TOP OF THE CTA, on all five team
   tiles. Both were pinned to the bottom of the same card — the credit
   bottom-right at 60% max-width, the link bottom-left — so
   "(All-Pro Reels from District of Columbia…)" was drawn across
   "TEAM COVERAGE →" wherever the credit ran long. The credit moves to
   the top of the tile, which is over the photograph it describes and
   nowhere near the link. It also stops being cut mid-word: one line,
   ellipsis, and it lifts off the image with a soft scrim because at
   rgba(255,255,255,.5) over photography it was barely there. */
.sportwide .mini-story .thumb-cr,
.sportwide .column-card .thumb-cr {
  top: 6px; right: 6px; bottom: auto; left: auto;
  max-width: 68%; text-align: right;
}
.sportwide .mini-story .thumb-cr .cr,
.sportwide .column-card .thumb-cr .cr {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(8, 10, 14, .55);
  color: rgba(255, 255, 255, .82);
}

/* 3. TILE HEADLINES TRUNCATED TWO DIFFERENT WAYS in one row — some hard
   cut mid-word ("Lakers Sold for $12.5 Billi"), some with an ellipsis.
   The line-clamp is there; on a headline that is one long unbroken run
   the browser has nowhere to break, so it clips. Allowing the break
   gives every card the same ending. */
.sportwide .mini-headline { overflow-wrap: anywhere; }

/* 4. TYPE. The review's floor is 13px for anything a reader reads as a
   story headline; the tile headlines were 12.5px and the panel heads
   10.5px — the smallest headline type on the site. Labels and metadata
   keep the house's 10px; only the headlines move. */
.sportwide .mini-headline { font-size: 13.5px; }
.sportwide .sp-panel-head { font-size: 12.5px; }
.sportwide .news-title { font-size: 13.5px; line-height: 1.32; }
.sportwide .team-mark { font-size: 9px; }
/* The score table and standings scope theirs three deep, so the
   floor has to reach them at the same weight. */
.sportwide .score-table .logo-cell .team-mark,
.sportwide .standing-team .team-mark,
.sportwide .leader-row .team-mark,
.sportwide .mini-brand .team-mark { font-size: 9px; }