/* ==========================================================================
   Previously — Matchup Hero (PRODUCTION build, 2026-10-23)
   Canon: dark d3 ground #0C121B · gold #F2BC68 signature · LIVE coral #F46B62
   ONLY as the functional live indicator · Anton display · Inter support ·
   SQUARED corners everywhere (no pills) · team colors arrive from the
   Gamecast snapshot (CSS vars --mh-away / --mh-home set by mh-hero.js).
   ========================================================================== */
.mh-hero{
  --mh-gold:#F2BC68; --mh-coral:#F46B62; --mh-ink:#0C121B;
  --mh-cream:#F2EEE3; --mh-text:#C7D0DA; --mh-dim:#8FA3B5;
  --mh-away:#266092; --mh-home:#0150b5;
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(100deg, rgba(38,96,146,.34) 0%, rgba(12,18,27,0) 46%),
    linear-gradient(260deg, rgba(1,80,181,.34) 0%, rgba(12,18,27,0) 46%),
    radial-gradient(120% 90% at 50% 0%, #16283D 0%, var(--mh-ink) 62%);
  background-color:var(--mh-ink);
  border:1px solid #22374E; border-bottom:0;
  color:var(--mh-text);
  font-family:Inter,system-ui,sans-serif;
  min-height:600px;
  cursor:pointer;
  /* touch: vertical pans scroll the page; horizontal pans belong
     to the swipe handler in mh-hero.js. With the default (auto) the
     browser claims the gesture for scrolling and the hero only ever
     receives touchcancel — the swipe is dead on a real phone
     (owner defect 2026-10-26). pan-y is the fix. */
  touch-action:pan-y;
}
.mh-hero a{cursor:pointer}

/* ---- backdrop: giant abbr letters + team tints ---- */
.mh-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.mh-giant{
  position:absolute; top:26px; font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:252px; line-height:.8; letter-spacing:.01em;
  color:rgba(199,208,218,.07); -webkit-text-stroke:2px rgba(199,208,218,.16);
  user-select:none;
}
.mh-giant--away{left:-14px}
.mh-giant--home{right:-14px}
.mh-tint{position:absolute; top:0; bottom:0; width:44%}
.mh-tint--away{left:0; background:linear-gradient(90deg, var(--mh-away), transparent); opacity:.22}
.mh-tint--home{right:0; background:linear-gradient(270deg, var(--mh-home), transparent); opacity:.22}

/* ---- player art (real cutouts/headshots only) ---- */
.mh-player{
  position:absolute; bottom:0; z-index:1; width:400px; height:600px;
  object-fit:cover; object-position:top center;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55));
  pointer-events:none; user-select:none;
  /* EDGE MELT (owner, 2026-10-26 — the cutout rectangle fix): the
     library headshots are landscape frames whose subject is sliced
     by the frame's own edges; cover-cropping into the hero's tall
     slot drew those slices as hard straight lines — a visible
     rectangle around the player. The mask melts the slot's bottom
     and side edges into the ground so the cutout sits IN the slide,
     never on it as a pasted photo. Solid through the face and
     shoulders' core; fades only the outer rim. */
  -webkit-mask-image:linear-gradient(180deg, #000 84%, transparent 99%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, #000 84%, transparent 99%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect;
}
.mh-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 88%);
  pointer-events:none;
}
.mh-player--away{left:1.5%}
.mh-player--home{right:1.5%}

/* ---- kicker row: kicker left, state/time chip right (owner
   reference layout, 2026-10-24 — the chip carries the tip time, so
   nothing jams against the kicker at any width) ---- */
.mh-kickrow{
  position:absolute; top:40px; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  column-gap:16px; padding:0 28px;
  pointer-events:none;
}
.mh-kicker{
  display:flex; justify-content:flex-start; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.34em; color:var(--mh-gold);
  text-transform:uppercase; min-width:0;
}
.mh-kicker .mh-sep{color:var(--mh-dim); letter-spacing:0}
.mh-statechip{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--mh-cream);
  text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mh-statechip.is-live{color:var(--mh-coral)}
.mh-statechip i{width:8px; height:8px; background:var(--mh-coral); display:none}
.mh-statechip.is-live i{display:inline-block; animation:mh-pulse 1.6s ease-in-out infinite}

/* ---- center core ---- */
.mh-core{
  position:relative; z-index:3; text-align:center;
  max-width:600px; margin:0 auto; padding:96px 16px 190px;
}
.mh-title{
  font-family:'Previously Headline',Anton,Impact,sans-serif; font-weight:400;
  font-size:64px; line-height:1.02; color:var(--mh-cream);
  margin:16px 0 0; text-transform:none; letter-spacing:.005em; text-shadow:0 2px 26px rgba(0,0,0,.45);
}
.mh-title em{font-style:italic; color:var(--mh-gold)}
.mh-scoreline{margin-top:22px; min-height:96px; text-shadow:0 2px 22px rgba(0,0,0,.5)}
.mh-tip{font-family:'Previously Headline',Anton,Impact,sans-serif; font-size:34px; color:var(--mh-cream); letter-spacing:.06em}
.mh-count{
  margin-top:8px; font-size:15px; font-weight:700; letter-spacing:.28em; color:var(--mh-text);
  font-variant-numeric:tabular-nums; text-transform:uppercase;
}
.mh-count b{color:var(--mh-gold); font-weight:800}
.mh-live{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:800; letter-spacing:.3em; color:var(--mh-coral);
  text-transform:uppercase;
}
.mh-live i{
  width:9px; height:9px; background:var(--mh-coral); display:inline-block;
  animation:mh-pulse 1.6s ease-in-out infinite;
}
@keyframes mh-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.mh-clock{
  margin-left:2px; color:var(--mh-cream); letter-spacing:.14em; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.mh-score{
  font-family:'Previously Headline',Anton,Impact,sans-serif; font-size:76px; line-height:1;
  color:var(--mh-cream); margin-top:10px; font-variant-numeric:tabular-nums;
  display:flex; justify-content:center; align-items:baseline; gap:18px;
}
.mh-score .mh-s-abbr{font-size:26px; color:var(--mh-dim); letter-spacing:.12em}
.mh-score .mh-s-dash{color:var(--mh-gold); font-size:44px}
.mh-final{
  font-family:'Previously Headline',Anton,Impact,sans-serif; font-size:22px; letter-spacing:.34em; color:var(--mh-cream);
}
.mh-stale-note{font-size:14px; letter-spacing:.18em; color:var(--mh-dim); text-transform:uppercase; font-weight:700}
.mh-cta{
  display:inline-block; margin-top:24px; padding:15px 42px;
  background:var(--mh-gold); color:#14100A; border:0; border-radius:0;
  font-family:Inter,system-ui,sans-serif; font-size:16px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.mh-hero a.mh-cta{color:#14100A;-webkit-text-fill-color:#14100A}
.mh-hero a.mh-cta:hover{background:#FFD08A;color:#14100A;-webkit-text-fill-color:#14100A}
.mh-hero a.mh-team{color:var(--mh-text)}
.mh-cta:focus-visible{outline:3px solid var(--mh-cream); outline-offset:3px}
.mh-meta{margin-top:16px; font-size:13.5px; letter-spacing:.08em; color:var(--mh-dim)}

/* ---- team identity blocks ---- */
.mh-team{
  /* width tracks the player photo above (inset 1.5% + 400px wide, anchored
     34px out): block center == photo center at any hero width, so the
     centered logo sits centered under the picture (polish 2) */
  position:absolute; bottom:26px; z-index:3; width:calc(332px + 3%);
  text-decoration:none; color:var(--mh-text);
}
.mh-team--away{left:34px; text-align:left}
.mh-team--home{right:34px; text-align:right}
.mh-team img{width:104px; height:104px; object-fit:contain; display:block;
  margin-left:auto; margin-right:auto;
  transform:scale(var(--mh-lgs,1)); transform-origin:center center}
.mh-city{
  display:block; margin-top:10px; font-size:13px; font-weight:700;
  letter-spacing:.3em; color:var(--mh-text); text-transform:uppercase;
}
.mh-name{
  display:block; font-family:'Previously Headline',Anton,Impact,sans-serif; font-size:41px; line-height:1.04;
  color:var(--mh-cream); text-transform:uppercase; margin-top:2px;
}
.mh-bar{display:block; width:52px; height:4px; margin-top:9px; background:var(--mh-away)}
.mh-team--home .mh-bar{background:var(--mh-home); margin-left:auto}
.mh-rec{display:block; margin-top:7px; font-size:16px; font-weight:700; color:var(--mh-text); font-variant-numeric:tabular-nums}
.mh-team:hover .mh-name{color:#fff}
.mh-team:focus-visible{outline:3px solid var(--mh-gold); outline-offset:4px}
/* ---- CREST BESIDE THE NAME (owner, 2026-10-24): "on laptop we have
   the logo in front of the players faces - hide it or put it
   somewhere... put it next to their team name." In PHOTO mode the
   crest leaves the player's body axis: it moves into the team
   block's outer padding, beside the city/name/bar/record cluster,
   vertically centered on the cluster. The text column keeps its
   full width (the crest rides the padding, content-box), so names
   stay one line, and the crest sits in the bottom band at the
   hero's outer corners - it can never reach the face/neck. Keyed
   per side off the player img's [hidden] flag, so logos mode (and
   the >=1366 player-scale crest) is untouched. ---- */
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away{padding-left:74px}
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home{padding-right:74px}
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away img,
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home img{
  position:absolute; top:calc(50% - 32px);
  width:64px; height:64px; margin:0;
}
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away img{
  left:0; transform:scale(var(--mh-lgs,1)); transform-origin:100% 50%;
}
.mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home img{
  right:0; transform:scale(var(--mh-lgs,1)); transform-origin:0% 50%;
}


/* ================= LAPTOP / SMALL DESKTOP ================= */
@media (max-width:1100px){
  .mh-giant{font-size:200px}
  .mh-title{font-size:52px}
  .mh-player{width:320px; height:520px}
  .mh-team{width:calc(252px + 3%)}
  .mh-name{font-size:34px}
  .mh-team img{width:84px; height:84px}
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away{padding-left:66px}
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home{padding-right:66px}
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away img,
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home img{
    width:56px; height:56px; top:calc(50% - 28px);
  }

}

/* ================= MOBILE (<=720px): separate deliberate composition === */
@media (max-width:720px){
  .mh-hero{
    min-height:0; display:grid; cursor:pointer;
    grid-template-columns:1fr 1fr; column-gap:10px;
    grid-template-areas:"kick kick" "pa ph" "core core";
    padding:12px 14px 12px;
  }
  /* full-bleed band (owner polish pass, 2026-10-23): at phone widths the
     hero runs edge-to-edge — the 30px-a-side page gutter #hpHeroZone
     sits in is cancelled with the 100vw technique, the side border seam
     drops, corners stay square. Desktop framing untouched (<=720 only). */
  .mh-hero{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    border-left:0; border-right:0; border-radius:0;
  }
  .mh-bg{display:none}
  .mh-kickrow{
    grid-area:kick; position:relative; top:auto; left:auto; right:auto;
    justify-content:space-between; pointer-events:auto;
    column-gap:12px; padding:0;
  }
  .mh-kicker{justify-content:flex-start; font-size:11.5px; letter-spacing:.26em}
  .mh-k-season{display:none}
  .mh-statechip{font-size:11.5px; letter-spacing:.13em}
  /* compacted 2026-10-23 (photo fix): the live frame measured 735px
     tall at 412 wide — the gold CTA landed under the fixed 65px bottom
     tabbar on phone viewports under ~820px. This block trims ~105px
     (player art, type, margins) so the full CTA + meta sit above the
     tabbar without scrolling.
     RE-COMPACTED 2026-10-23 (instant-hero pass, owner screenshot
     18:14 PT): still clipped on the owner's Galaxy — his first screen
     is header + Wire + hero, and the fixed tabbar (~65px + safe area)
     eats the rest; a fixed pixel budget that fit the lab viewport
     (~705px+) does not fit his. The big vertical contributors (player
     art, title, score) are now svh-clamped so the composition scales
     itself to the screen it is actually on, and the kicker is kept to
     one line. QA proves the full FOLLOW LIVE row above the tabbar at
     412x740 / 412x844 / 412x915, tabbar in frame. */
  .mh-kicker{letter-spacing:.17em; font-size:11px; flex-wrap:nowrap; min-width:0}
  .mh-kicker>span{white-space:nowrap}
  /* HERO COLLEGE FIX 2026-11-02 (owner screenshot 2026-11-01 22:30 PT):
     at phone width the kicker trio -- league label + FEATURED MATCHUP +
     the LIVE state chip -- cannot share one row: the nowrap kicker spans
     overflowed straight under the chip and the two texts printed on top
     of each other. On narrow widths the generic middle tag drops out;
     the league label and the LIVE + clock chip stay fully legible.
     Desktop composition untouched. */
  .mh-kickrow .mh-kicker .mh-sep,
  .mh-kickrow .mh-kicker>span:last-of-type{display:none}
  .mh-kickrow .mh-kicker{letter-spacing:.14em}
  /* POLISH 3 (owner, 2026-10-23 19:34 PT — the original treatment):
     the pictures go WAY bigger on mobile and carry the hero; the name
     stack row is deleted, which is what funds the height — the duo row
     grows ~2.4x while the stack it replaces (~105px) leaves the budget,
     so the CTA keeps its tab-bar clearance (QA re-measures all three
     phone heights). */
  .mh-player{position:relative; height:clamp(200px,36svh,320px); width:100%; object-fit:cover; object-position:top center; z-index:1}
  .mh-player--away{grid-area:pa; left:0}
  .mh-player--home{grid-area:ph; right:0}
  .mh-core{grid-area:core; max-width:none; padding:2px 0 0; margin:0}
  .mh-title{font-size:clamp(26px,4.1svh,33px); margin-top:6px}
  .mh-scoreline{margin-top:7px; min-height:0}
  .mh-tip{font-size:22px}
  .mh-count{font-size:12.5px; letter-spacing:.22em}
  .mh-score{font-size:clamp(38px,5.4svh,46px); gap:12px}
  .mh-score .mh-s-abbr{font-size:19px}
  .mh-score .mh-s-dash{font-size:27px}
  .mh-cta{display:block; margin-top:10px; padding:11px 10px; text-align:center}
  .mh-meta{margin-top:7px; font-size:12.5px}
  /* POLISH 3: the team block moves INTO its player's cell. The stacked
     text name (city / name / bar) leaves the mobile composition — the
     DOM keeps the elements for desktop, which still renders them.
     The logo becomes a large transparent watermark centered BEHIND the
     player picture (the photo img paints above it, z-index 1), and the
     record rides small at the cell's outer top corner, clear of the
     cutout. The anchor goes pointer-events:none so a tap anywhere on
     the mobile hero still presses through to the Game Center, exactly
     as before; team links live on desktop and in the Game Center. */
  /* z-index:0 is load-bearing: the base .mh-team rule carries z-index:3
     (on desktop the block sits in its own band, above the art). In the
     mobile cell the anchor must paint BELOW the player img (z-index:1)
     or the watermark lands on the player's face — the first polish-3
     QA proof caught exactly that. */
  .mh-team{position:relative; bottom:auto; width:auto; padding:0; pointer-events:none; z-index:0}
  .mh-team--away{grid-area:pa; left:0}
  .mh-team--home{grid-area:ph; right:0}
  .mh-team img{
    position:absolute; left:50%; top:50%;
    width:min(168px,88%); aspect-ratio:1; height:auto;
    object-fit:contain; opacity:.34;
    transform:translate(-50%,-52%) scale(var(--mh-lgs,1));
  }
  .mh-city,.mh-name,.mh-bar{display:none}
  .mh-rec{position:absolute; top:2px; margin:0; font-size:12px; letter-spacing:.08em}
  .mh-team--away .mh-rec{left:2px}
  .mh-team--home .mh-rec{right:2px}
  /* CREST ON PHONE (owner law, 2026-10-24): the mobile composition
     carries no name cluster in the player cell for a crest to sit
     beside, and the centered watermark's box crosses the face/neck
     zone (measured ~9,600px2 overlap on the owner's WNBA frame,
     worse at the 1.35 equalization cap). So in photo mode the
     phone crest hides outright - the records ride the cell's top
     corners and the players carry the frame. Logos-mode cells
     below are untouched: there the crest IS the visual. */
  .mh-hero:has(> .mh-stage > #mhImgAway:not([hidden])) .mh-team--away img,
  .mh-hero:has(> .mh-stage > #mhImgHome:not([hidden])) .mh-team--home img{display:none}

  /* a side with no verified photo: its crest IS the visual —
     big and near-solid, symmetric by construction, never a blank.
     LOGO FIT (owner fix, 2026-10-24): the photo-less side's cell now
     carries the same height the player photo would, so the art row
     is a real zone instead of a line the crest overflowed both ways
     (striking the kicker above and the headline below, records
     riding on the crest art). The crest is height-capped inside its
     cell and nudged below the record's strip: no crest pixel can
     reach the kicker, the record, or the headline at any phone
     height. Photo mode is untouched (rules key off [hidden]). */
  .mh-hero:has(> .mh-stage > #mhImgAway[hidden]) .mh-team--away,
  .mh-hero:has(> .mh-stage > #mhImgHome[hidden]) .mh-team--home{
    height:clamp(200px,36svh,320px);
  }
  .mh-hero:has(> .mh-stage > #mhImgAway[hidden]) .mh-team--away img,
  .mh-hero:has(> .mh-stage > #mhImgHome[hidden]) .mh-team--home img{
    opacity:.92; width:min(184px,92%);
    max-height:calc(100% - 42px); top:calc(50% + 9px);
    /* the glyph-equalization scale is clamped in this treatment so
       even a cap-scale (1.35x) crest stays inside its half of the
       phone — no viewport bleed, no meeting in the middle */
    transform:translate(-50%,-52%) scale(min(var(--mh-lgs,1),1.08));
  }
}

/* ---- no-art fallback composition (no verified player art for the fixture):
        the matchup carries on logos/type alone — never a guessed face ---- */
.mh-hero.mh-noart{min-height:520px}
.mh-hero.mh-noart .mh-core{padding-bottom:150px}
.mh-hero.mh-noart .mh-giant{font-size:380px; opacity:.9}
@media (max-width:720px){
  .mh-hero.mh-noart .mh-core{padding-bottom:0}
}

/* ---- LOGOS-ONLY DESKTOP (owner, 2026-10-24): "the team logos are
   super small — they should be as big as the player pictures." At
   laptop widths a side with no verified photo gets its crest as the
   side's hero art — player-picture scale, standing in the side zone
   above the bottom-corner name stack — instead of the 104px chip.
   The crest is anchored to the stack's OUTER corner and its
   glyph-equalization scale grows from that same corner, so no crest
   pixel can reach the center core (kicker, headline, score stack,
   CTA, venue line) or the name/record stack beneath it at any
   scale. Photo mode untouched: a side WITH a photo keeps the small
   chip on its player, exactly as before. Below this breakpoint the
   side zones are too narrow for player-scale art next to the 600px
   core, so the corner-chip composition stands there. ---- */
@media (min-width:1366px){
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway[hidden]) .mh-team--away img,
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome[hidden]) .mh-team--home img{
    position:absolute; bottom:calc(100% + 12px);
    width:min(300px,82%); height:auto; max-height:380px;
    object-fit:contain; opacity:1;
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
  }
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgAway[hidden]) .mh-team--away img{
    left:0; margin:0;
    transform:scale(var(--mh-lgs,1)); transform-origin:100% 100%;
  }
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot):has(> .mh-stage > #mhImgHome[hidden]) .mh-team--home img{
    right:0; margin:0;
    transform:scale(var(--mh-lgs,1)); transform-origin:0% 100%;
  }
}

/* ================= PRODUCTION ADDITIONS (2026-10-23) =================
   Rotation controls, vibe tags, player-frame stat line, idle state,
   and the story-lead band that now lives below the hero zone.        */

/* idle until the first verified frame renders — never a fake matchup */
.mh-hero.mh-idle{display:none}

/* ---- vibe tags: squared chips, gold family only (coral stays LIVE) -- */
.mh-tags{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
  margin-top:16px;
}
.mh-tags[hidden]{display:none}
.mh-tag{
  font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mh-gold); border:1px solid var(--mh-gold);
  background:rgba(12,18,27,.55); padding:5px 10px 4px; border-radius:0;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---- BIG NIGHT / overnight stat line ---- */
.mh-statline{
  margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:5px;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.mh-statline[hidden]{display:none}
.mh-stat-name{
  font-size:13px; font-weight:800; letter-spacing:.3em; color:var(--mh-gold);
  text-transform:uppercase;
}
.mh-stat-line{
  font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:30px; line-height:1.05; color:var(--mh-cream); letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* ---- rotation controls: bare-glyph arrows + squared ticks
   (no pills, no boxes — seamless pass 2026-10-24) ---- */
.mh-nav{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:26px; z-index:4; display:flex; align-items:center; gap:14px;
}
.mh-nav[hidden]{display:none}
/* SEAMLESS CONTROLS (owner, 2026-10-24): "I don't like the box
   look — I want something more seamless." The share control is a
   bare glyph floating on the hero ground: no border, no box
   background, a generous 44px tap target (an invisible hit area,
   not a visible box), and a soft shadow keeps the glyph legible
   over team art.
   ARROWS RETIRED (owner, 2026-10-26): the ‹ › buttons are gone —
   navigation is swipe, edge zones and the dashes below (see the
   edge-zone block at the end of this file). The dashes were bare
   and stay bare; their hit area is now a real 28px-tall target
   (the visible dash is unchanged — it rides a ::after). */
.mh-dots{display:none; flex-wrap:wrap; justify-content:center; max-width:340px; align-items:center; gap:3px}
.mh-dot{
  width:12px; height:22px; padding:0; cursor:pointer; border:0; border-radius:0;
  background:transparent; position:relative;
}
.mh-dot::after{
  content:""; position:absolute; left:50%; right:auto; top:50%; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%); background:#33506E;
}
.mh-dot.is-on::after{background:var(--mh-gold)}
.mh-dot:focus-visible{outline:none}
.mh-dot:focus-visible::after{outline:2px solid var(--mh-cream); outline-offset:2px}

/* ---- share control (2026-10-24): joins the nav row — the same
   seamless bare-glyph treatment as the arrows (2026-10-24 controls
   pass), a 44px touch target, gold on hover. The fallback menu
   anchors to the nav row and overlays; it never moves the module's
   geometry. ---- */
.mh-sharebtn{
  width:44px; height:44px; flex:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--mh-cream);
  border:0; border-radius:0;
}
.mh-sharebtn svg{filter:drop-shadow(0 1px 6px rgba(0,0,0,.65))}
.mh-sharebtn:hover{color:var(--mh-gold)}
.mh-sharebtn:focus-visible{outline:3px solid var(--mh-gold); outline-offset:2px}
.mh-sharemenu{
  position:absolute; right:0; bottom:calc(100% + 10px); z-index:6;
  min-width:188px; padding:6px;
  background:#0E1723; border:1px solid #33506E; border-radius:0;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.mh-sharemenu[hidden]{display:none}
.mh-sharemenu button{
  display:block; width:100%; text-align:left; padding:11px 12px;
  background:none; border:0; border-radius:0; cursor:pointer;
  font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mh-cream);
}
.mh-sharemenu button:hover{color:var(--mh-gold)}
.mh-sharemenu button:focus-visible{outline:2px solid var(--mh-gold); outline-offset:-2px}

/* ---- night frames (2026-10-23): recap board + leaderboard rows ----
   Content rendering inside the module's established geometry only —
   the stage, compositions and text zones above do not move. Self
   frames ride the no-art composition; their rows live in the
   scoreline zone as seamless hairline rows (never boxed, never
   pills), each row a real link to its Game Center. */
.mh-cta[hidden],.mh-team[hidden]{display:none!important}
.mh-self .mh-giant{display:none}
.mh-rows{display:flex; flex-direction:column; width:100%}
.mh-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:5px 14px; padding:11px 2px; text-decoration:none; color:var(--mh-text);
  border-top:1px solid rgba(199,208,218,.14);
}
.mh-rows .mh-row:first-child{border-top:0}
.mh-row:hover .mh-row-abbr,.mh-row:hover .mh-lname{color:var(--mh-gold)}
/* Finals board v2 — matched to the owner's reference board
   (2026-10-26): one deep-navy card per game; the BIG logo with the
   initials beside it and the record under the initials; FINAL set
   under the score; a chevron at the right edge (the whole card taps
   through to the game); the league selector rides the header chip
   slot. Scoped off .mh-lrow — the leaderboard keeps its grammar. */
.mh-row-side{display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; grid-area:away}
.mh-row-r{justify-content:flex-end; text-align:left; grid-area:home}
.mh-row-id{display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.15; white-space:nowrap}
.mh-row-mid{display:flex; flex-direction:column; align-items:center; gap:3px; grid-area:mid}
.mh-row-final{font-size:10px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--mh-dim); padding-left:.34em}
.mh-row-line{grid-area:line}
.mh-row:not(.mh-lrow){
  border-top:0; padding:14px 16px;
  background:linear-gradient(180deg, rgba(22,40,64,.88), rgba(12,22,38,.88));
  border:1px solid rgba(159,184,210,.15); border-radius:14px;
  grid-template-columns:1fr auto 1fr auto;
  grid-template-areas:"away mid home chev" "line line line line";
}
.mh-row:not(.mh-lrow)::after{
  content:"›"; grid-area:chev; align-self:center;
  font-size:24px; font-weight:300; line-height:1; color:var(--mh-dim);
}
.mh-row-abbr{font-size:21px}
.mh-row-score{font-size:30px}
.mh-row-side .mh-row-logo{width:60px; height:60px}
.mh-rows-board{display:flex; flex-direction:column; gap:10px}
.mh-board-sub{
  text-align:center; font-size:12px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--mh-dim); margin:0 0 14px; padding-left:.34em;
}
.mh-board-all{
  display:block; text-align:center; margin:14px 0 2px;
  padding:12px 0 2px; border-top:1px solid rgba(199,208,218,.14);
  font-size:12px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--mh-gold); text-decoration:none;
}
.mh-board-sel{
  appearance:none; -webkit-appearance:none; background-color:transparent;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23C7D3DF" stroke-width="1.6"/></svg>');
  background-repeat:no-repeat; background-position:right center;
  border:0; font:inherit; color:var(--mh-cream); text-transform:uppercase;
  cursor:pointer; padding:2px 18px 2px 2px; max-width:100%;
}
.mh-hero.mh-self .mh-kicker > span:last-child{color:#B9C8D6}
.mh-row-logo{width:30px; height:30px; object-fit:contain; flex:none}
.mh-row-abbr{
  font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:17px; letter-spacing:.08em; color:var(--mh-cream);
}
.mh-row-rec{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--mh-dim)}
.mh-row-score{
  font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:27px; color:var(--mh-cream); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mh-row-line{
  grid-column:1 / -1; text-align:center; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mh-dim);
}
/* the performer's stat is the eye-catch of the line: house gold, extra bold */
.mh-row-pts{color:var(--mh-gold); font-weight:800}
.mh-lrow{grid-template-columns:auto auto 1fr auto auto; gap:12px}
.mh-lrank{
  font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:20px; color:var(--mh-gold); min-width:22px; text-align:center;
}
.mh-lface{width:40px; height:40px; object-fit:cover; background:#16283D; flex:none}
.mh-lmain{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left}
.mh-lname{font-size:15px; font-weight:800; color:var(--mh-cream); letter-spacing:.02em}
.mh-lline{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--mh-dim); font-variant-numeric:tabular-nums}
.mh-lbig{
  font-family:'Previously Headline',Anton,Impact,sans-serif;
  font-size:30px; color:var(--mh-cream); font-variant-numeric:tabular-nums;
}
@media (max-width:720px){
  .mh-row{gap:4px 8px; padding:9px 0}
  .mh-row-logo{width:24px; height:24px}
  .mh-row-side{gap:8px}
  .mh-row-side .mh-row-logo{width:54px; height:54px}
  .mh-row:not(.mh-lrow){padding:12px}
  .mh-rows-board .mh-row-score{font-size:24px}
  .mh-rows-board .mh-row-abbr{font-size:19px}
  .mh-board-sub{font-size:10.5px; margin-bottom:12px}
  .mh-row-abbr{font-size:14px}
  .mh-row-rec{font-size:10px}
  .mh-row-score{font-size:19px}
  .mh-row-line{font-size:11px}
  .mh-lrow{gap:9px}
  .mh-lrank{font-size:17px; min-width:18px}
  .mh-lface{width:34px; height:34px}
  .mh-lname{font-size:13.5px}
  .mh-lline{font-size:11px}
  .mh-lbig{font-size:24px}
}

@media (max-width:720px){
  .mh-nav{
    position:relative; left:auto; transform:none; bottom:auto;
    grid-area:nav; justify-content:center; margin-top:8px;
  }
  .mh-hero{
    grid-template-areas:"kick kick" "pa ph" "core core" "nav nav";
  }
  .mh-stat-line{font-size:24px}
  .mh-tags{margin-top:10px}
  .mh-tag{font-size:10px; letter-spacing:.18em}
}

/* ================= THE LEAD, BELOW THE HERO =================
   set-lead.py keeps stamping its block (unchanged producer, unchanged
   markup contract) — it now sits in #hpLeadSlot under the matchup hero,
   presented as a wide band: text left, photo right, in flow.          */
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot{
  box-sizing:border-box; width:min(1440px,calc(100% - 48px));
  margin:clamp(20px,2.5vw,34px) auto 0; min-width:0;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero{
  display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch;
  min-height:0; height:auto; margin:0; position:relative; overflow:hidden;
  background:#101927; border:1px solid #263A4C; border-radius:3px;
  box-shadow:none; color:#F4F6FB;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero::before,
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero::after{display:none}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .hp-lead-txt{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left; padding:clamp(22px,3vw,40px); margin:0; max-width:none; width:auto;
  background:none; box-sizing:border-box; min-width:0;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .kicker{
  align-self:flex-start; margin:0; text-align:left;
  background:#F2BC68; color:#0C121B;
  font:800 11px/1.3 Inter,Arial,sans-serif; letter-spacing:.18em;
  padding:3px 8px; text-transform:uppercase;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero h1{
  font-family:Anton,Inter,Arial,sans-serif; font-weight:850;
  font-size:clamp(25px,2.7vw,38px); line-height:1.06; letter-spacing:-.01em;
  color:#F4F6FB; margin:15px 0 10px; text-align:left; max-width:26ch; text-wrap:balance;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero h1 a{
  color:inherit; text-decoration:none;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .dek{
  font-family:Inter,Arial,sans-serif; font-style:normal; font-weight:500;
  font-size:15px; line-height:1.55; color:#C7D0DA; text-align:left; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .byline{
  color:#8FA3B5; font-size:12.5px; margin-top:12px; text-align:left; align-self:flex-start;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .hp-lead-cta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
  align-self:flex-start; justify-content:flex-start; text-align:left;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero figure.hp-lead-art{
  position:relative; min-height:280px; margin:0; grid-column:auto; grid-row:auto; order:0;
}
/* LEAD SAFE STACK (standing rule): the lead photo stays IN FLOW —
   position:static, sized by its figure's box, never absolute. */
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero figure.hp-lead-art img{
  position:static; display:block;
  width:100%; height:100%; max-height:none; object-fit:cover; object-position:center;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot .hp-hero-credit{
  position:static; margin-top:8px; padding:0; text-align:left;
  font-size:11px; color:#8FA3B5;
}
@media (max-width:720px){
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot{
    width:calc(100% - 32px);
  }
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero{
    grid-template-columns:1fr;
  }
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero figure.hp-lead-art{
    order:-1; min-height:190px; height:190px;
  }
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero .hp-lead-txt{
    padding:20px;
  }
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpLeadSlot section.hero h1{
    font-size:24px;
  }
}

/* ================= BEST OF PREVIOUSLY (homepage slot 4, 2026-10-23) ====
   Owner's stack: matchup hero → Explore Previously → the lead story →
   Best of Previously. Fed by js/best-of.js from boards the site already
   computes (the sections producer's lead story per lane + the Top 10
   charts' No. 1 TV show and movie). Fail closed: the section carries
   `hidden` in the served HTML and only unhides when >= 3 proven items
   render. Squared corners, d3 ground, gold kickers — house canon.     */
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpBestOf{
  box-sizing:border-box; width:min(1440px,calc(100% - 48px));
  margin:clamp(26px,3vw,44px) auto 0; min-width:0;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpBestOf[hidden]{
  display:none;
}
html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpBestOf .hp-shead h2{
  font-family:Anton,Inter,Arial,sans-serif; font-weight:850;
  letter-spacing:.01em;
}
.hp-bestof-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px; margin-top:16px;
}
.hp-bestof-card{
  display:block; min-width:0; overflow:hidden;
  background:#101927; border:1px solid #263A4C; border-radius:3px;
  text-decoration:none; color:#F4F6FB;
  transition:border-color .15s ease;
}
.hp-bestof-card:hover{border-color:#F2BC68}
.hp-bestof-card:focus-visible{outline:2px solid #F2BC68; outline-offset:3px}
.hp-bestof-card .art{
  display:block; aspect-ratio:16/9; overflow:hidden; background:#0E1723;
}
.hp-bestof-card .art img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hp-bestof-card .bd{display:block; padding:13px 15px 15px}
.hp-bestof-card .kick{
  display:block; font:800 10.5px/1.3 Inter,Arial,sans-serif;
  letter-spacing:.18em; text-transform:uppercase; color:#F2BC68;
}
.hp-bestof-card h3{
  font-family:Anton,Inter,Arial,sans-serif; font-weight:400;
  font-size:19px; line-height:1.18; letter-spacing:.005em;
  color:#F4F6FB; margin:7px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.hp-bestof-card .meta{
  display:block; margin-top:8px; font-size:12px; color:#8FA3B5;
}
@media (max-width:1000px){
  .hp-bestof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  html[data-theme="d3"] body.pv-home.b-scope.pv3-home-v5 #hpBestOf{
    width:calc(100% - 32px);
  }
  .hp-bestof-grid{grid-template-columns:minmax(0,1fr)}
}

/* ===== DAYTIME MIX story slides (2026-10-26) =========================
   Same hero, new slide type: a story slide (premiere / conversation /
   live podcast / music / top player / rewind) swaps the matchup
   furniture for one verified piece of art inside the SAME frame. The
   kickers, Anton title, CTA, meta and nav are the hero's own; nothing
   about the outer shape or size changes for any slide. */
.mh-hero.mh-story .mh-giant,
.mh-hero.mh-story .mh-tint{display:none}
.mh-hero.mh-story .mh-team{display:none}
.mh-art{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0}
.mh-artshade{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,18,27,.68) 0%,
  rgba(12,18,27,.22) 30%, rgba(12,18,27,.08) 46%, rgba(12,18,27,.55) 100%)}
/* story art can be bright (a podcast key-art sky, a stage backdrop)
   where the matchup ground is ink — the kickers and chip carry the
   same glyph shadow the retired arrows used, so they hold over any
   verified art */
.mh-story .mh-kicker,
.mh-story .mh-statechip{
  text-shadow:0 1px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6)}
.mh-story .mh-core{padding-top:128px}
.mh-story .mh-title{font-size:54px}
.mh-storyline{font-size:21px; line-height:1.38; font-weight:600;
  color:var(--mh-cream); text-shadow:0 2px 14px rgba(0,0,0,.85);
  max-width:660px; margin:0 auto}
@media (max-width:1100px){
  .mh-story .mh-title{font-size:46px}
}
@media (max-width:720px){
  .mh-hero.mh-story{grid-template-areas:"kick kick" "art art" "core core" "nav nav"}
  .mh-hero.mh-story .mh-bg{display:block; position:relative;
    grid-area:art; height:clamp(190px, 32svh, 300px); margin-top:2px;
    border-top:1px solid #22374E; border-bottom:1px solid #22374E}
  .mh-hero.mh-story .mh-core{padding:14px 6px 4px}
  .mh-hero.mh-story .mh-title{font-size:clamp(26px, 4.1svh, 33px)}
  .mh-storyline{font-size:17px}
}

/* ===== ARROW-FREE NAVIGATION (owner order 2026-10-26) ================
   The ‹ › arrow buttons are retired. In their place: invisible edge
   zones on the slide's left/right (created by mh-hero.js) — a faint
   chevron appears only while the zone is hovered or keyboard-focused,
   nothing shows at rest. The band clears the kicker row above and the
   team blocks + nav row below; the center of the slide keeps its job
   (body click and the CTA go to the slide's destination). Touch
   devices also get swipe (mh-hero.js); the dashes jump (above). */
.mh-edge{
  position:absolute; top:15%; bottom:24%; width:88px; z-index:3;
  padding:0; border:0; background:transparent; cursor:pointer;
}
.mh-edge--prev{left:0}
.mh-edge--next{right:0}
.mh-edge[hidden]{display:none}
.mh-edge::after{
  content:"‹"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); font-size:52px; line-height:1;
  font-family:Inter,system-ui,sans-serif; color:var(--mh-cream);
  opacity:0; transition:opacity .18s ease;
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.55);
}
.mh-edge--next::after{content:"›"}
.mh-edge:hover::after,
.mh-edge:focus-visible::after{opacity:.9; color:var(--mh-gold)}
.mh-edge:focus-visible{outline:none}
@media (max-width:720px){
  .mh-edge{top:12%; bottom:auto; height:46%; width:64px}
}

/* ===== TEXT BAND (owner order 2026-10-27 08:33 PT + SOLIDITY LAW
   09:09 PT) =========================================================
   James, on the live-podcast slide: the show title / episode title /
   viewer count sat directly over the video thumbnail and clashed
   with the art's own baked-in text — "move the text down and maybe
   into a dark box like how we're trying to do our new graphic."
   The hero frame's shape and size are UNCHANGED; inside it, the art
   now lives in .mh-stage (top) and ALL text lives in .mh-band
   (bottom): DEEP SOLID BLACK #000, fully opaque, no scrim, no art
   bleed-through at any state; every band text element SOLID WHITE
   #FFF (no cream, no gray tint, no reduced alpha). The only color
   exceptions are functional/brand furniture, never band text: the
   LIVE indicator stays coral, the CTA keeps its gold fill, the
   active dash keeps its gold glyph, team bars keep team colors.
   Band modes: story/premiere/music/Conversation/Rewind-Verse
   slides (.mh-story), self frames — finals board + leaderboard
   (.mh-self), and player-spotlight frames (.mh-spot: player /
   overnight / performer / spotlight / recap frame types).
   PLAIN GAME FRAMES keep the legacy composition untouched (the
   wrappers dissolve via display:contents) — the featured-matchup
   slide's composition is pending the owner's verdict on the new
   mock-up (2026-10-27 09:02 PT) and is intentionally NOT finalized
   here. EVERY composition rule below is scoped to the band modes
   via :is(.mh-story,.mh-self,.mh-spot): the wrappers exist in the
   DOM for every slide, so an unscoped .mh-band rule would leak
   into the legacy composition (caught in the hb1 proof sweep —
   team blocks displaced, countdown whitened — and fixed here).
   Phone (<=720px) already composes text in-flow below the art, so
   the wrappers dissolve there too and the phone grid is exactly
   the composition it was. ========================================= */
@media (min-width:721px){
  .mh-stage{position:absolute; inset:0}
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot) .mh-band,
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot) .mh-bandmain{
    display:contents;
  }
}
@media (min-width:721px){
  .mh-hero.mh-story,.mh-hero.mh-self,.mh-hero.mh-spot{
    display:flex; flex-direction:column;
  }
  .mh-hero.mh-story,.mh-hero.mh-spot{min-height:640px}
  .mh-hero.mh-self{min-height:480px}
  .mh-hero.mh-story::after,.mh-hero.mh-self::after,.mh-hero.mh-spot::after{
    display:none;
  }
  .mh-story .mh-stage,.mh-spot .mh-stage{
    position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  }
  .mh-self .mh-stage{display:none}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band{
    position:relative; z-index:3; flex:none;
    background:#000; color:#FFF;
    border-top:1px solid #22374E; padding:16px 28px 18px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-kickrow{
    position:static; padding:0; pointer-events:auto;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-bandmain{
    display:flex; align-items:center; gap:24px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-team{
    position:static; width:196px; flex:none;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-core{
    position:static; flex:1 1 auto; min-width:0; max-width:none;
    margin:0; padding:0;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-nav{
    position:relative; left:auto; transform:none;
    margin-top:14px; justify-content:center;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title{
    font-size:44px; margin-top:10px;
  }
  .mh-hero.mh-story .mh-band .mh-title{font-size:42px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-scoreline{
    margin-top:12px; min-height:0;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tip{font-size:27px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score{
    font-size:56px; margin-top:6px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score .mh-s-abbr{
    font-size:21px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score .mh-s-dash{
    font-size:34px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-statline{
    margin-top:12px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-stat-line{
    font-size:25px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-storyline{
    font-size:19px; margin-top:10px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tags{margin-top:12px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-cta{margin-top:16px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-meta{margin-top:10px}
  /* art inside the stage: podcast/premiere thumbnails bias up so a
     baked-in lower-third falls below the stage crop, not into the
     band; player cutouts fill the stage's height */
  .mh-story .mh-art{object-position:center 22%}
  .mh-story .mh-artshade{
    background:linear-gradient(180deg, rgba(12,18,27,.30) 0%,
    rgba(12,18,27,0) 26%, rgba(12,18,27,0) 62%, rgba(12,18,27,.42) 100%);
  }
  .mh-spot .mh-player{height:100%}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-stage .mh-edge{
    top:6%; bottom:6%;
  }
  /* ---- SOLIDITY: every band text element solid white ---- */
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-kicker,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-kicker > span,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-kicker .mh-sep,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-statechip,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-board-sel,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tip,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-count,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-count b,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-clock,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score .mh-s-abbr,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score .mh-s-dash,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-final,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-stale-note,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-stat-name,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-stat-line,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-storyline,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-meta,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-city,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-name,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-rec,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-board-sub,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-board-all,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-abbr,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-score,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-rec,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-line,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-pts,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row-final,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-lrank,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-lname,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-lline,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-lbig,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-sharebtn{color:#FFF}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title em{color:#FFF}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tag{
    color:#FFF; border-color:rgba(255,255,255,.45); background:transparent;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-scoreline,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-statline,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-storyline{
    text-shadow:none;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row:hover .mh-row-abbr,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-row:hover .mh-lname{
    color:#FFF; text-decoration:underline;
  }
  /* functional exception, by law: LIVE stays coral */
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-live,
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-statechip.is-live{
    color:var(--mh-coral);
  }
}
@media (min-width:721px) and (max-width:1100px){
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band{
    padding:14px 20px 16px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title{
    font-size:36px;
  }
  .mh-hero.mh-story .mh-band .mh-title{font-size:35px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-team{width:158px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-team img{
    width:76px; height:76px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-name{font-size:28px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-score{font-size:46px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tip{font-size:23px}
}
@media (max-width:720px){
  .mh-stage,.mh-band,.mh-bandmain{display:contents}
}

/* ===== TEXT BAND FADE (owner order 2026-10-27 13:48 PT) ==============
   James, on the live Gil's Arena slide: the hero read as two hard
   halves — art on top, a solid black block under it with a hard
   horizontal edge between them. "Make that black half smaller and
   have it fade into the rest of it." Two moves, producer-level:
   (1) the solid band is COMPRESSED (tighter padding/margins — same
   content, same order, same behavior) so the fully-solid black is
   markedly less of the slide than the ~half it was; (2) the band's
   top edge is now a MELT: a gradient strip rides above the band
   over the art's bottom edge, transparent at the top and deepening
   to the band's own solid #000 exactly where it meets the band —
   no hard line anywhere. Every text element still sits on the
   SOLID part of the band: the melt strip carries no text and
   swallows no clicks (pointer-events:none), and the solidity law
   is untouched — band ground #000, band text #FFF, proven by
   sampled pixels. The melt rides the art-carrying band modes
   (.mh-story, .mh-spot); .mh-self frames carry no art (their stage
   is hidden — the board IS the slide), so there is nothing above
   them to melt into and they keep the plain solid composition.
   The featured-matchup slide is untouched, as before. ============ */
@media (min-width:721px){
  .mh-hero:is(.mh-story,.mh-spot) .mh-band{border-top:0}
  .mh-hero:is(.mh-story,.mh-spot) .mh-band::before{
    content:""; position:absolute; left:0; right:0; top:-88px; height:88px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 42%,
      rgba(0,0,0,.78) 74%, #000 100%);
    pointer-events:none;
  }
  /* compression: the same stack, tighter air */
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band{padding:10px 28px 12px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-title{margin-top:4px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-scoreline{margin-top:6px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-statline{margin-top:6px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-storyline{margin-top:6px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-tags{margin-top:8px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-cta{
    margin-top:10px; padding:11px 38px;
  }
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-meta{margin-top:6px}
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band .mh-nav{margin-top:8px}
}
@media (min-width:721px) and (max-width:1100px){
  .mh-hero:is(.mh-story,.mh-self,.mh-spot) .mh-band{padding:10px 20px 12px}
}
@media (max-width:720px){
  /* phone story slides: the art's own shade now melts its bottom
     edge all the way to the band's #000 and the hard border line
     under the art is gone; the text stack below breathes tighter.
     Same content, same order. */
  .mh-hero.mh-story .mh-bg{border-bottom:0}
  .mh-hero.mh-story .mh-artshade{
    background:linear-gradient(180deg, rgba(12,18,27,.68) 0%,
    rgba(12,18,27,.22) 30%, rgba(12,18,27,.10) 52%, rgba(0,0,0,.66) 80%,
    #000 100%);
  }
  .mh-hero.mh-story .mh-core{padding:10px 6px 2px}
  /* the phone story slide's text zone is the band's ground too:
     pure #000, so the art melts into the exact black the text
     sits on — no navy step at the seam */
  .mh-hero.mh-story{background:#000}
  .mh-hero:is(.mh-story,.mh-spot) .mh-core .mh-cta{margin-top:8px}
  .mh-hero:is(.mh-story,.mh-spot) .mh-core .mh-meta{margin-top:5px}
}

/* ================================================================
   LANDING FIT (owner defect, James, 2026-11-01 07:29 PT): on laptop
   the featured-matchup hero ran 779px tall under 177px of page
   chrome (masthead + nav + THE WIRE) — a 956px stack — so the
   frame's bottom (team chips, nav row, fade) fell below the fold
   at 1440x900 and far below it at 1366x768. Desktop sizing never
   referenced the viewport; the <=720px phone composition already
   budgets in svh — this gives the desktop matchup frame the same
   discipline. The hero now takes exactly the viewport space the
   chrome leaves (100svh - 179px: 177px measured chrome + the
   hero's 1px top border + 1px rounding slack), floored at 540px;
   the core stack — previously held up by 96/190px of fixed
   padding — becomes a vertically centred column inside that box
   at its original 600px measure, and player art caps at the box
   height so a short window can never crop a head at the top.
   Scoped to plain matchup frames: story/self/spot band frames
   keep their own sizing (the band correction owns those), and
   phone (<=720px) is untouched. */
@media (min-width:721px){
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot){
    height:calc(100vh - 179px);
    height:calc(100svh - 179px);
    min-height:540px;
  }
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot) .mh-core{
    position:absolute; top:0; bottom:0; left:50%;
    transform:translateX(-50%);
    box-sizing:border-box; width:min(600px, 100%); max-width:600px;
    margin:0; padding:12px 16px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .mh-hero:not(.mh-story):not(.mh-self):not(.mh-spot) .mh-player{
    height:min(600px, 100%);
  }
}

/* ================================================================
   BIG STORY BAND CORRECTION (owner order, James, 2026-11-01 07:09 PT;
   proportions refined 07:10 PT). James, on the BIG STORY proofs:
   "Can we make sure that we don't cover their faces? Like that black
   bar at the bottom can be a lot smaller… I don't want it to be half
   black bar, half picture" — and, per form factor: "on laptop the
   black space is dominating too much. We need to bring it down" but
   mobile "looks really good… maybe bring it down a little bit."
   Every rule below is scoped to .mh-story: matchup frames (legacy
   composition), .mh-self and .mh-spot frames keep the shared band
   values untouched. Desktop: the band stack compresses (the tease
   gets a wider measure so it wraps to two lines instead of three,
   tighter margins and padding, a slightly shorter CTA) and the melt
   strip above the band shrinks 88px -> 40px, so the picture takes
   the space back and the dark zone stops halfway up the art. Faces
   that sit low in their art ride above the melt via per-frame focal
   points (frame artPos -> renderStory object-position; emitter
   passes the curation list's art_pos through). Phone: a slight trim
   only — a touch more picture height, a few px out of the text
   stack — the approved mobile composition does not change shape.
   The band ground stays deep solid #000 to the very edge. */
@media (min-width:721px){
  .mh-hero.mh-story .mh-band{padding:8px 28px 10px}
  .mh-hero.mh-story .mh-band::before{
    top:-40px; height:40px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 42%,
      rgba(0,0,0,.78) 74%, #000 100%);
  }
  .mh-hero.mh-story .mh-band .mh-title{margin-top:2px}
  .mh-hero.mh-story .mh-band .mh-storyline{
    max-width:940px; font-size:18px; line-height:1.34; margin-top:5px;
  }
  .mh-hero.mh-story .mh-band .mh-cta{margin-top:8px; padding:9px 38px}
  .mh-hero.mh-story .mh-band .mh-meta{margin-top:4px}
  .mh-hero.mh-story .mh-band [data-pv-stamp]{margin-top:2px !important}
}
@media (min-width:721px) and (max-width:1100px){
  .mh-hero.mh-story .mh-band{padding:8px 20px 10px}
}
@media (max-width:720px){
  .mh-hero.mh-story .mh-bg{height:clamp(190px, 33svh, 304px)}
  .mh-hero.mh-story .mh-core{padding:7px 6px 2px}
  .mh-hero.mh-story .mh-core .mh-cta{margin-top:6px}
  .mh-hero.mh-story .mh-core .mh-meta{margin-top:4px}
}

/* ================================================================
   BIG STORY DESKTOP REWORK — 75/25 (owner order, James, 2026-11-01
   07:45 PT). James, on the corrected proofs: "too much unused
   space at the bottom, we need to bring it all down, it should be
   75%/25% picture — it looks like it's 55/45 right now, black bar
   needs to be smaller" — and on the share control: "Share button
   looks forced, it's not balanced right" (the glyph floated alone
   in its own nav row beneath the meta line). Mobile: "looks fine"
   — the phone composition is APPROVED AS-IS, so every rule below
   is desktop-only (min-width:721px) and .mh-story-scoped, appended
   after the CORRECTION block so it wins on equal specificity; no
   phone rule above this comment is touched, added or re-valued.
   The moves, all inside the desktop story band:
   - the melt strip shrinks again, 40px -> 24px;
   - the tease takes the band's full measure at 17px — one line at
     desktop width — instead of two lines inside a 940px measure;
   - the core becomes a wrapping flex row: headline and tease span
     the full width, then the gold CTA and the meta line share ONE
     row side by side, centered — the separate meta row is gone;
   - the nav row leaves the flow entirely: the share control sits
     at the right end of the CTA/meta row, centered on that row —
     composed with it, not floating under it — and the freshness
     stamp leaves the flow for the band's bottom-left corner, the
     spot it already reads from, so neither leaves dead space;
   - the remaining margins and padding compress a few px each.
   Matchup frames, .mh-self and .mh-spot frames keep every value
   they had; the band ground stays deep solid #000 to the edge. */
@media (min-width:721px){
  .mh-hero.mh-story .mh-band{padding:6px 28px 8px}
  .mh-hero.mh-story .mh-band::before{
    top:-24px; height:24px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 42%,
      rgba(0,0,0,.78) 74%, #000 100%);
  }
  .mh-hero.mh-story .mh-band .mh-core{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:center; column-gap:20px;
  }
  .mh-hero.mh-story .mh-band .mh-title{
    flex:0 0 100%; font-size:40px; margin-top:0;
  }
  .mh-hero.mh-story .mh-band .mh-scoreline{flex:0 0 100%; margin-top:2px}
  .mh-hero.mh-story .mh-band .mh-storyline{
    max-width:none; font-size:17px; line-height:1.3; margin-top:0;
  }
  .mh-hero.mh-story .mh-band .mh-cta{
    flex:none; margin-top:6px; padding:7px 36px;
  }
  .mh-hero.mh-story .mh-band .mh-meta{flex:none; margin-top:6px}
  .mh-hero.mh-story .mh-band .mh-nav{
    position:absolute; left:auto; right:28px; bottom:6px;
    transform:none; margin:0; justify-content:flex-end;
  }
  .mh-hero.mh-story .mh-band [data-pv-stamp]{
    position:absolute !important; left:28px; bottom:8px;
    margin:0 !important;
  }
}
@media (min-width:721px) and (max-width:1100px){
  .mh-hero.mh-story .mh-band{padding:6px 20px 8px}
  .mh-hero.mh-story .mh-band .mh-nav{right:20px}
  .mh-hero.mh-story .mh-band [data-pv-stamp]{left:20px}
}

/* ================================================================
   BIG STORY LANDING FIT (enable pass, 2026-11-01): story frames
   carry min-height:640px in the base, which overflows the fitted
   landing at 1366x768 (the chrome leaves 589px there). Desktop
   story frames take the same budget law as the matchup fit above
   (100svh - 179px) but never grow past the approved rework
   composition's 640px: at 1440x900 the frame measures exactly the
   approved 640px (band 147px, dark 26.7%, picture 77.0%); at
   1366x768 the whole frame fits the one screen the chrome leaves.
   Desktop-only and .mh-story-scoped; the phone composition is
   untouched. */
@media (min-width:721px){
  .mh-hero.mh-story{
    height:min(640px, calc(100vh - 179px));
    height:min(640px, calc(100svh - 179px));
    min-height:480px;
  }
}