/* ============================================================================
   PREVIOUSLY — HOMEPAGE V2 (Step 3 PREVIEW BUILD, 2026-10-13)
   Composition = the Step 2 mock James approved, re-expressed on the --hp-*
   token layer (step2/tokens.css). Loads AFTER production design-tokens.css,
   fonts.css and bible.css. Preview only: /preview/home-v2/.
   ========================================================================== */
:root{
  --hp-bg:var(--desert-bg); --hp-card:var(--desert-card); --hp-card-warm:var(--harm-card,#FFFDF8);
  --hp-pressed:var(--desert-pressed); --hp-glass:var(--desert-glass,rgba(250,246,238,.90));
  --hp-ink:var(--harm-ink,#211910); --hp-ink-body:var(--desert-ink,#2A1C11);
  --hp-ink-soft:var(--harm-ink-soft,#4A4036);
  --hp-ink-dim:rgba(42,28,17,.68); --hp-ink-faint:rgba(42,28,17,.52);
  --hp-rule:var(--harm-rule,#E7DCC4); --hp-rule-idle:rgba(42,28,17,.14);
  --hp-red:var(--harm-red,#A5ACAF); --hp-red-deep:var(--harm-red-deep,#9E2E15);
  --hp-accent:var(--desert-accent,#C2410C); --hp-accent-deep:var(--desert-accent-deep,#92400E);
  --hp-accent-soft:rgba(194,65,12,.12);
  --hp-wordmark-red:var(--brand-red,#EC4634); --hp-gold:#A67C00;
  --hp-win:#2E7D4F; --hp-warn:#8A5A12; --hp-loss:#A83A6E; --hp-info:#1D5FBF;
  --hp-well-bg:#0A0A0B; --hp-well-text:#F4EFE6; --hp-well-dim:rgba(244,239,230,.72);
  --hp-well-faint:rgba(244,239,230,.55); --hp-well-gold:#d8b25c;
  --hp-font-hero:'Fraunces',Georgia,serif; --hp-font-display:'Playfair Display',Georgia,serif;
  --hp-font-serif:'Fraunces',Georgia,serif; --hp-font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --hp-font-label:'Archivo','Inter',sans-serif; --hp-font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --hp-shadow-card:0 18px 44px rgba(120,84,40,.14);
  --hp-shadow-sm:0 1px 2px rgba(42,28,17,.07),0 6px 20px rgba(42,28,17,.09);
  --hp-wrap:1360px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--hp-bg);color:var(--hp-ink-body);font-family:var(--hp-font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.hp-wrap{max-width:var(--hp-wrap);margin:0 auto;padding:0 16px;border-top:14px solid var(--hp-red)}
img{display:block;object-fit:cover;max-width:100%}
h1,h2,h3{font-family:var(--hp-font-serif);color:var(--hp-ink);text-wrap:balance;font-weight:700}
a{color:var(--hp-accent);text-decoration:none;font-weight:700}
a:hover{color:var(--hp-accent-deep)}
.hp-label{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hp-meta{font-size:12.5px;color:var(--hp-ink-faint)}
.hp-btn{display:inline-block;background:var(--hp-accent);color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;padding:12px 28px;border-radius:4px;box-shadow:0 6px 18px rgba(194,65,12,.25);border:0;cursor:pointer;font-family:var(--hp-font-sans)}
.hp-btn:hover{background:var(--hp-accent-deep);color:#fff}
.hp-ghost{display:inline-block;border:1.5px solid var(--hp-rule-idle);color:var(--hp-ink);font-weight:700;font-size:14px;padding:10px 20px;border-radius:4px;background:transparent}
.hp-ghost:hover{color:var(--hp-ink);border-color:var(--hp-ink-dim)}
section.hp-mod{margin-top:34px}
.hp-shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap;row-gap:4px}
.hp-shead h2{font-size:30px;line-height:1.15}
.hp-shead .kick{color:var(--hp-red);margin-bottom:2px}
.hp-shead .more{font-size:13.5px;white-space:nowrap;min-width:0}
[hidden]{display:none !important}

/* ---------- WIRE ---------- */
.hp-wire{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--hp-rule);overflow:hidden}
.hp-wire-chip{background:var(--hp-red);color:#FFF8EC;font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.14em;padding:4px 10px;border-radius:4px;white-space:nowrap;flex:none}
.hp-wire-txt{font-size:13px;color:var(--hp-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hp-wire-txt a{color:var(--hp-ink-dim);font-weight:600}
.hp-wire-txt a:hover{color:var(--hp-ink)}
.hp-wire-txt .sep{color:var(--hp-ink-faint);font-weight:400}
/* Wire ticker motion (2026-10-14, James): the item set repeats inside an inner
   track and slides via transform only. The strip + track boxes keep their
   overflow:hidden clip and min-width:0 (ovf1 guard), so the animated track can
   never widen the page. Animation starts paused; home-v2.js measures the set,
   sets the duration for ~75px/s, and runs it. */
.hp-wire-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:hp-wire-slide 40s linear infinite;animation-play-state:paused}
.hp-wire-set{flex:none}
.hp-wire-track .sep{margin:0 .3em}
@keyframes hp-wire-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hp-wire-track{animation:none}}

/* ---------- HERO ZONE : LEAD + RIGHT NOW ---------- */
.hp-hero{display:grid;grid-template-columns:1fr 360px;gap:22px;margin-top:22px;align-items:stretch}
.hp-lead{background:var(--hp-card-warm);border-radius:20px;box-shadow:var(--hp-shadow-card);display:grid;grid-template-columns:1.02fr .98fr;overflow:hidden;min-height:430px}
.hp-lead-txt{padding:38px 34px;display:flex;flex-direction:column;min-width:0}
.hp-kicker{color:var(--hp-red);font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hp-kicker.is-breaking{background:#E10600;color:#FFFFFF;align-self:flex-start;padding:4px 10px;border-radius:4px}
.hp-lead h1{font-size:54px;line-height:1.08;margin:12px 0 14px}
.hp-lead h1 a{color:var(--hp-ink);font-weight:700}
.hp-lead h1 a:hover{color:var(--hp-ink)}
.hp-dek{font-size:17px;line-height:1.6;color:var(--hp-ink-body)}
.hp-byline{margin-top:16px;font-size:13px;color:var(--hp-ink-faint)}
.hp-byline strong{color:var(--hp-ink)}
.hp-lead-cta{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:18px}
.hp-lead .hp-lead-art{position:relative;min-height:100%}
.hp-lead figure.hp-lead-art{min-height:100%}
.hp-lead .hp-lead-art img{width:100%;height:100%;position:absolute;inset:0}
.hp-lead figure.hp-lead-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}
.b-scope section.hero.hp-lead figure.hp-lead-art img{width:100%;height:100%;max-height:none;position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;object-position:center}
.hp-lead .hp-lead-art figcaption{position:absolute;left:0;right:0;bottom:0;font-size:11px;color:var(--hp-well-text);background:linear-gradient(180deg,transparent,rgba(10,10,11,.72));padding:26px 14px 8px}
/* Right Now */
.hp-now{border:1px solid var(--hp-rule-idle);border-radius:20px;padding:22px;background:transparent;display:flex;flex-direction:column}
.hp-now-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hp-live-wrap{color:var(--hp-red)}
.hp-livedot{width:9px;height:9px;border-radius:50%;background:var(--hp-red);display:inline-block;margin-right:7px;animation:hp-pulse 1.6s ease-in-out infinite;vertical-align:1px}
@keyframes hp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.hp-livedot{animation:none}}
.hp-now-row{border-top:1px solid var(--hp-rule-idle);padding:11px 0}
.hp-now-row:first-child{border-top:none}
a.hp-now-row{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}
a.hp-now-row:active{background:var(--hp-pressed)}
a.hp-now-row:focus-visible{outline:2px solid var(--hp-red);outline-offset:-2px}
.hp-badge{display:inline-block;font-family:var(--hp-font-label);font-size:10px;font-weight:800;letter-spacing:.12em;padding:3px 8px;border-radius:4px;vertical-align:2px}
.hp-badge.live{background:var(--hp-red);color:#FFF8EC}
.hp-badge.time{background:var(--hp-pressed);color:var(--hp-accent-deep)}
.hp-badge.final{background:transparent;border:1px solid var(--hp-rule-idle);color:var(--hp-ink-faint)}
.hp-now-match{font-size:13.5px;font-weight:600;color:var(--hp-ink);margin-top:5px;line-height:1.4}
.hp-now-sub{font-family:var(--hp-font-mono);font-size:12px;color:var(--hp-ink-faint);margin-top:2px}
.hp-chip{display:inline-block;padding:0 5px;border-radius:4px;font-family:var(--hp-font-label);font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1.65;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.hp-chip.mut{filter:saturate(.35);opacity:.74}
.hp-chip.neu{background:var(--hp-pressed);color:var(--hp-ink-faint);box-shadow:none}
.hp-now-sub .hp-slead{font-weight:800;color:var(--hp-ink)}
.hp-now-sub .odds{color:var(--hp-accent-deep);font-weight:700}
.hp-now-foot{border-top:1px solid var(--hp-rule-idle);padding-top:12px;margin-top:auto;font-size:13px}

/* ===== Right Now thumbnails (2026-10-15, James): TV rows wear the
   show's own art; Coming Up rows wear the paired team logos. The media
   box is fixed-size, so a row never shifts while art loads; a row with
   no held art renders exactly as before (no box reserved). ===== */
.hp-now-row.has-media{display:flex;gap:11px;align-items:flex-start}
.hp-now-media{flex:0 0 auto;border-radius:7px;overflow:hidden}
.hp-now-media.tv{width:44px;height:62px;background:var(--hp-pressed)}
.hp-now-media.tv img{width:100%;height:100%;object-fit:cover;display:block}
.hp-now-media.logos{width:62px;height:48px;display:flex;align-items:center;justify-content:center;gap:5px}
.hp-now-media.logos img{width:27px;height:27px;object-fit:contain;display:block}
.hp-now-txt{flex:1 1 auto;min-width:0}
@media (max-width:700px){
  .hp-now-media.logos{width:58px;height:44px}
  .hp-now-media.logos img{width:25px;height:25px}
}


/* ---------- BREAKING BAND (fail-closed) ---------- */
.hp-breaking{margin-top:22px;background:var(--hp-red);border-radius:16px;color:#FFF8EC;padding:20px 24px;display:block}
.hp-breaking .bk{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,248,236,.18);border:1px solid rgba(255,248,236,.4);padding:4px 10px;border-radius:4px;display:inline-block}
.hp-breaking h2{color:#FFF8EC;font-size:clamp(21px,3vw,30px);line-height:1.2;margin-top:10px}
.hp-breaking h2 a{color:#FFF8EC;font-weight:700}
.hp-breaking p{font-size:14.5px;color:rgba(255,248,236,.88);margin-top:6px;max-width:820px}

/* ---------- HOUSE AD ---------- */
.hp-ad{max-width:970px;margin:26px auto 0;border:1px solid var(--hp-rule-idle);background:var(--hp-pressed);border-radius:12px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px;text-align:center}
.hp-ad .adlab{font-size:10px;letter-spacing:.18em;color:var(--hp-ink-faint);font-family:var(--hp-font-label);font-weight:800;text-transform:uppercase}
.hp-ad .adbrand{font-family:var(--hp-font-display);font-weight:900;font-size:24px;color:var(--hp-ink)}
.hp-ad .adbrand em{font-style:normal;color:var(--hp-wordmark-red)}
.hp-ad .adsub{font-size:13px;color:var(--hp-ink-dim)}

/* ---------- THE TICKET (FINAL LOCKED slip: V2 STAMPED + red edge stripe) ---------- */
.hp-ticket-zone{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.hp-slip-panel{background:#1B1916;border:2px solid #3E382E;border-radius:18px;padding:26px 22px;box-shadow:inset 0 0 0 1px rgba(246,240,224,.06)}
.hp-slip-cap{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.16em;color:#CBBFA3;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;gap:10px}
.hp-slip-cap .r{color:#8D8271;letter-spacing:.04em;text-transform:none;font-weight:600}
.hp-slip{position:relative;background:#F6F0E0;color:#211910;border-radius:3px;padding:22px 20px 18px 52px;font-family:var(--hp-font-mono);box-shadow:13px 19px 17px rgba(0,0,0,.55);overflow:hidden}
.hp-slip::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.hp-slip-stripe{position:absolute;left:0;top:0;bottom:0;width:30px;background:var(--hp-red);overflow:hidden}
.hp-slip-stripe::after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:2px;background:var(--hp-gold)}
.hp-slip-stripe .micro{position:absolute;left:50%;top:0;transform:rotate(180deg) translateX(50%);writing-mode:vertical-rl;font-family:var(--hp-font-mono);font-weight:700;font-size:11px;letter-spacing:.28em;color:#FAF4E2;white-space:nowrap;line-height:30px}
.hp-slip-word{font-family:var(--hp-font-serif);font-weight:900;letter-spacing:.22em;font-size:15px;text-align:center}
.hp-slip-title{font-family:var(--hp-font-mono);font-weight:700;letter-spacing:.3em;font-size:21px;text-align:center;color:var(--hp-red);margin-top:2px}
.hp-slip-sub{text-align:center;font-size:10.5px;letter-spacing:.14em;color:#5A5142;margin-top:3px}
.hp-slip-meta{text-align:center;font-size:11px;letter-spacing:.08em;margin-top:10px;color:#211910}
.hp-slip-meta .dim{color:#5A5142}
.hp-perf{border-top:2px dashed rgba(33,25,16,.4);margin:12px -6px}
.hp-leg{padding:2px 0}
.hp-leg .lm{font-size:10.5px;letter-spacing:.1em;color:#5A5142}
.hp-leg .lt{font-size:12.5px;font-weight:700;letter-spacing:.02em;margin-top:1px}
.hp-leg .lp{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-top:2px}
.hp-leg .lp .pick{font-weight:700}
.hp-leg .lp .line{font-weight:700;color:var(--hp-red)}
.hp-leg .res{font-size:11px;margin-top:2px;color:#5A5142}
.hp-leg .res b{color:#211910}
.hp-leg .recap{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:12.5px;line-height:1.5;color:#3E362A;margin-top:3px}
.hp-leg.is-lost .lp .pick,.hp-leg.is-lost .lt{opacity:.62}
.hp-totals{position:relative}
.hp-trow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:2px 0}
.hp-trow .tv{font-weight:700}
.hp-trow.grand .tv{color:var(--hp-red);font-size:15px}
.hp-trow .ex{font-size:9.5px;letter-spacing:.12em;border:1px solid rgba(33,25,16,.45);border-radius:3px;padding:1px 5px;color:#5A5142;font-weight:700}
/* example-stake adjuster (James, 2026-10-14) — open card's slip only */
.hp-stk{display:inline-flex;align-items:center;gap:5px}
.hp-stk-btn{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(33,25,16,.55);border-radius:3px;color:#211910;font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.hp-stk-btn:active{background:rgba(33,25,16,.08)}
.hp-stk-btn:focus-visible,.hp-stk-in:focus-visible{outline:2px solid var(--hp-red);outline-offset:1px}
.hp-stk-amt{display:inline-flex;align-items:center;font-weight:700}
.hp-stk-in{width:62px;border:none;background:transparent;font:inherit;color:inherit;text-align:right;padding:0;appearance:textfield;-moz-appearance:textfield}
.hp-slip-codes{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:6px}
.hp-barcode{height:38px;flex:1;max-width:210px;background:repeating-linear-gradient(90deg,#211910 0 2px,transparent 2px 5px,#211910 5px 6px,transparent 6px 10px,#211910 10px 13px,transparent 13px 15px,#211910 15px 16px,transparent 16px 21px)}
.hp-codes-meta{font-size:10px;color:#5A5142;text-align:right;line-height:1.7;letter-spacing:.06em}
.hp-slip-small{font-size:9.5px;line-height:1.65;color:#5A5142;letter-spacing:.04em;text-align:left}
.hp-stub{margin-top:4px}
.hp-stub .tear{text-align:center;font-size:9px;letter-spacing:.34em;color:#5A5142;margin-bottom:6px}
.hp-stub-row{display:flex;justify-content:space-between;gap:12px;font-size:11.5px}
.hp-stub-row .tv{font-weight:700;color:var(--hp-red)}
/* stamps */
.hp-stamp{position:absolute;width:33%;aspect-ratio:1;pointer-events:none;opacity:.88;transform:rotate(-8deg);z-index:3}
.hp-stamp.grade{left:30%;bottom:27%}
.hp-stamp.settled{left:50%;top:38%;transform:translateX(-50%) rotate(-8deg);width:36%}
.hp-stamp svg{width:100%;height:100%;display:block}
.hp-ticket-updating{background:var(--hp-card-warm);border:1px solid var(--hp-rule-idle);border-radius:14px;padding:22px;box-shadow:var(--hp-shadow-sm)}
.hp-ticket-updating h3{font-size:15px;font-weight:800;font-family:var(--hp-font-sans);color:var(--hp-ink)}
.hp-ticket-updating p{font-size:14px;color:var(--hp-ink-dim);margin-top:4px}
.hp-ticket-takes{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:14px;box-shadow:var(--hp-shadow-sm);padding:18px 22px;margin-top:18px}
.hp-ticket-zone>.hp-ticket-takes{grid-column:1/-1;grid-row:2;margin-top:0}
.hp-take{padding:9px 0;border-top:1px solid var(--hp-rule-idle);font-size:14px;line-height:1.55;color:var(--hp-ink-dim)}
.hp-take:first-of-type{border-top:none}
.hp-take b{color:var(--hp-ink)}
.hp-take .gr{font-family:var(--hp-font-label);font-size:10.5px;font-weight:800;letter-spacing:.08em;border:1px solid var(--hp-rule-idle);border-radius:4px;padding:2px 7px;color:var(--hp-ink-dim);margin-left:8px;white-space:nowrap}
.hp-take .guard{display:block;font-size:12.5px;color:var(--hp-ink-faint);margin-top:3px}

/* ---------- YOUR PREVIOUSLY ---------- */
.hp-yours{background:var(--hp-pressed);border-radius:16px;padding:26px}
.hp-yours-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:center}
.hp-yours h2{font-size:clamp(23px,6vw,30px);margin:6px 0 8px;line-height:1.15;overflow-wrap:anywhere}
.hp-yours p{font-size:15.5px;color:var(--hp-ink-dim)}
.hp-form{background:var(--hp-card);border-radius:12px;padding:18px;box-shadow:var(--hp-shadow-sm)}
.hp-form .flab{font-size:12.5px;font-weight:600;color:var(--hp-ink);margin-bottom:6px}
.hp-form input{width:100%;border:1px solid var(--hp-rule-idle);border-radius:4px;padding:11px 13px;font-size:14px;color:var(--hp-ink);margin-bottom:12px;background:#fff;font-family:var(--hp-font-sans)}
.hp-form .hp-btn{width:100%;text-align:center}
.hp-form .micro{font-size:12px;color:var(--hp-ink-faint);margin-top:10px;line-height:1.5}
.hp-form .err{font-size:13px;font-weight:600;color:var(--hp-red);margin-top:8px}
.hp-form .err:empty{display:none}
.hp-yours-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.hp-yours-col{min-width:0}.hp-yours-col .hp-label{color:var(--hp-red);margin-bottom:8px}
.hp-yrow{padding:9px 0;border-top:1px solid var(--hp-rule-idle);font-size:14px}
.hp-yrow:first-of-type{border-top:none}
.hp-yrow b{color:var(--hp-ink)}
.hp-yrow .sub{font-family:var(--hp-font-mono);font-size:12px;color:var(--hp-ink-faint)}
.hp-yrow .sub .odds{color:var(--hp-accent-deep);font-weight:700}

/* ---------- WATCH ---------- */
.hp-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-wcard{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;overflow:hidden;box-shadow:var(--hp-shadow-sm)}
.hp-wcard .media{position:relative;aspect-ratio:16/9;background:var(--hp-pressed)}
.hp-wcard .media img{width:100%;height:100%}
.hp-play{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--hp-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 8px 20px rgba(20,12,6,.35)}
.hp-wcard .hp-badge{position:absolute;top:12px;left:12px;z-index:2}
.hp-badge.soon{background:var(--hp-accent-soft);color:var(--hp-accent-deep)}
.hp-wcard .txt{padding:14px 16px 16px}
.hp-wcard h3{font-size:20px;line-height:1.25}
.hp-wcard h3 a{color:var(--hp-ink);font-weight:700}
.hp-wcard p{font-size:13.5px;color:var(--hp-ink-dim);margin-top:4px}
/* Watch — no decorative play buttons (2026-10-14): the Live TV card is
   one real link to /live/; trailer media + title are real buttons that
   play the trailer in MiniPopup. */
a.hp-wcard{display:block;color:inherit;text-decoration:none}
a.hp-wcard h3{color:var(--hp-ink)}
a.hp-wcard:hover h3{color:var(--hp-accent-deep)}
.hp-wmedia{display:block;width:100%;position:relative;aspect-ratio:16/9;background:var(--hp-pressed);border:0;padding:0;cursor:pointer;font:inherit;text-align:left}
.hp-wmedia img{width:100%;height:100%;object-fit:cover;display:block}
.hp-wmedia .hp-badge{position:absolute;top:12px;left:12px;z-index:2}
.hp-wmedia:focus-visible{outline:2px solid var(--hp-red);outline-offset:-2px}
.hp-wtitle{background:none;border:0;padding:0;font:inherit;color:var(--hp-ink);font-weight:700;cursor:pointer;text-align:left;line-height:inherit}
.hp-wtitle:hover{color:var(--hp-accent-deep)}
.hp-tframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.hp-tframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- LATEST + TRENDING ---------- */
.hp-desk{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.hp-lrow{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--hp-rule-idle)}
.hp-lrow:first-child{border-top:none;padding-top:2px}
.hp-lrow img{width:124px;height:88px;border-radius:12px;flex:none}
.hp-lrow h3{font-size:19px;line-height:1.28}
.hp-lrow h3 a{color:var(--hp-ink);font-weight:700}
.hp-lrow .hp-meta{margin-top:5px}
.hp-trend{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:16px;padding:18px;box-shadow:var(--hp-shadow-sm)}
.hp-trow{display:flex;gap:13px;padding:10px 0;border-top:1px solid var(--hp-rule-idle);align-items:baseline}
.hp-trow:first-of-type{border-top:none}
.hp-tnum{font-family:var(--hp-font-serif);font-weight:800;font-size:22px;color:var(--hp-red);line-height:1;flex:none}
.hp-trow h3{font-size:16.5px;line-height:1.32;font-weight:600}
.hp-trow h3 a{color:var(--hp-ink);font-weight:600}

/* ---------- TONIGHT IN SPORTS ---------- */
.hp-sports{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:14px;box-shadow:var(--hp-shadow-sm);padding:18px 22px}
.hp-sport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hp-sg .sgh{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--hp-ink-faint);margin-bottom:6px;text-transform:uppercase}
.hp-sg .sgh .live{color:var(--hp-red)}
.hp-srow{font-family:var(--hp-font-mono);font-size:13.5px;padding:7px 0;border-top:1px solid var(--hp-rule-idle);display:block}
.hp-srow:first-of-type{border-top:none}
a.hp-srow{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a.hp-srow:hover .tn{color:var(--hp-accent-deep)}
a.hp-srow:focus-visible{outline:2px solid var(--hp-red);outline-offset:-2px}
.hp-srow .tm{display:flex;align-items:center;gap:7px;padding:2px 0;min-width:0}
.hp-srow .tm .bar{width:3px;align-self:stretch;border-radius:2px;flex:none}
.hp-srow .tm img.tl{width:19px;height:19px;object-fit:contain;flex:none}
.hp-srow .tm .tn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hp-ink-dim)}
.hp-srow .tm.w .tn{color:var(--hp-ink);font-weight:700}
.hp-srow .tm .ts{font-weight:700;color:var(--hp-ink)}
.hp-srow .tm.l .ts{color:var(--hp-ink-dim);font-weight:400}
.hp-slive{display:flex;align-items:center;gap:2px;color:var(--hp-red);font-weight:700;font-size:11px;letter-spacing:.06em;margin-bottom:2px}
.hp-stime{display:block;text-align:right;font-size:10.5px;color:var(--hp-ink-faint);letter-spacing:.06em}

/* ---------- VEGAS DESK ---------- */
.hp-vegas{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.hp-feat img{width:100%;aspect-ratio:16/10;border-radius:12px}
.hp-feat h3{font-size:24px;line-height:1.25;margin-top:12px}
.hp-feat h3 a{color:var(--hp-ink);font-weight:700}
.hp-vrow{padding:11px 0;border-top:1px solid var(--hp-rule-idle)}
.hp-vrow:first-child{border-top:none;padding-top:2px}
.hp-vrow h3{font-size:18px;line-height:1.3}
.hp-vrow h3 a{color:var(--hp-ink);font-weight:700}
.hp-vrow .strip{display:flex;gap:12px;align-items:center}
.hp-vrow .strip img{width:96px;height:64px;border-radius:8px;flex:none;object-fit:cover}
.hp-vrow .hp-vtxt{flex:1;min-width:0}
.hp-credit{font-size:11px;color:var(--hp-ink-faint);margin-top:4px}

/* ---------- PODCASTS (visual-forward, 2026-10-14) ---------- */
.hp-pods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-pod{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;overflow:hidden;box-shadow:var(--hp-shadow-sm);display:flex;flex-direction:column}
.hp-pod-media{position:relative;aspect-ratio:1/1;background:var(--hp-pressed)}
.hp-pod-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-pod-media .hp-badge.new{position:absolute;top:10px;left:10px;z-index:2;background:var(--hp-red);color:#FFF8EC}
.hp-pod-txt{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;min-width:0}
.hp-pod h3{font-size:18px;margin:0 0 3px;line-height:1.28}
.hp-pod h3 a{color:var(--hp-ink);font-weight:700}
.hp-pod .ep{font-size:13.5px;color:var(--hp-ink-body);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-pod-meta{font-size:12px;color:var(--hp-ink-faint);margin-top:auto;padding-top:8px}
/* Podcast rail: the card itself is the link (James, 2026-10-14) - the
   same whole-card anchor treatment as a.hp-wcard / a.hp-srow. Scoped to
   link behavior only; card chrome and art are untouched. */
a.hp-pod{color:inherit;text-decoration:none;font-weight:400;-webkit-tap-highlight-color:transparent}
a.hp-pod h3{color:var(--hp-ink)}
a.hp-pod:hover h3{color:var(--hp-accent-deep)}
a.hp-pod:focus-visible{outline:2px solid var(--hp-red);outline-offset:-2px}

/* ---------- MUSIC ---------- */
.hp-music-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start}
.hp-mlead{display:flex;gap:16px;background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;padding:14px;box-shadow:var(--hp-shadow-sm)}
.hp-mlead img{width:132px;height:132px;border-radius:12px;flex:none}
.hp-mlead h3{font-size:21px;line-height:1.3}
.hp-mlead h3 a{color:var(--hp-ink);font-weight:700}
.hp-mrow{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--hp-rule-idle);font-size:15px}
.hp-mrow:first-child{border-top:none;padding-top:2px}
.hp-mrow img{width:44px;height:44px;border-radius:8px;flex:none}
.hp-mrow .rk{font-family:var(--hp-font-serif);font-weight:800;color:var(--hp-red);width:20px;flex:none}
.hp-mrow .tt{color:var(--hp-ink);font-weight:600}
.hp-mrow .ar{color:var(--hp-ink-dim);font-size:13.5px}
/* Music — chart rows are real buttons into the preview popup (2026-10-14) */
button.hp-mrow{width:100%;background:transparent;border:0;border-top:1px solid var(--hp-rule-idle);font:inherit;color:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
button.hp-mrow:first-child{border-top:none}
button.hp-mrow:hover{background:var(--hp-pressed)}
button.hp-mrow:focus-visible{outline:2px solid var(--hp-red);outline-offset:-2px}
.hp-mlead-btn{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.hp-mlead-btn>span{display:block;min-width:0}
.hp-mlead-btn h3{margin-top:2px}
.hp-mlead-btn .hp-meta{display:block;margin-top:2px}
.hp-songpop{text-align:left}
.hp-songart{width:100%;aspect-ratio:1/1;border-radius:12px;object-fit:cover}
.hp-songtt{font-family:var(--hp-font-serif);font-size:24px;font-weight:700;color:var(--hp-ink);margin-top:14px;line-height:1.2}
.hp-songar{font-size:14px;color:var(--hp-ink-dim);margin-top:3px}
.hp-songplay{display:flex;align-items:center;gap:12px;margin-top:16px}
.hp-songbtn{width:46px;height:46px;flex:none;border-radius:50%;background:var(--hp-red);color:#fff;border:0;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hp-songbtn:focus-visible{outline:2px solid var(--hp-red);outline-offset:2px}
.hp-songbar{flex:1;height:6px;border-radius:3px;background:var(--hp-rule);overflow:hidden}
.hp-songbar i{display:block;height:100%;width:0;background:var(--hp-red)}
.hp-songtime{font-family:var(--hp-font-mono);font-size:12px;color:var(--hp-ink-faint);min-width:34px}
.hp-songnoprev{font-size:13.5px;color:var(--hp-ink-dim);margin-top:14px;line-height:1.5}
.hp-songdoors{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hp-songdoors:empty{margin-top:0}
.hp-songdoor{border:1.5px solid var(--hp-rule-idle);border-radius:6px;padding:9px 14px;font-size:13.5px;color:var(--hp-ink);text-decoration:none;font-weight:700}
.hp-songdoor:hover{border-color:var(--hp-ink-dim);color:var(--hp-ink)}

/* ---------- COMING UP ---------- */
.hp-up-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-ucard{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;overflow:hidden;box-shadow:var(--hp-shadow-sm)}
.hp-ucard .media{position:relative;aspect-ratio:16/10;background:var(--hp-pressed)}
.hp-ucard .media img{width:100%;height:100%}
.hp-ucard .hp-badge{position:absolute;top:12px;left:12px;z-index:2}
.hp-ucard .txt{padding:13px 15px 15px}
.hp-ucard h3{font-size:19px;line-height:1.28}
.hp-ucard p{font-size:13px;color:var(--hp-ink-dim);margin-top:3px}
.hp-remind{color:var(--hp-accent);font-weight:700;font-size:13px;display:inline-block;margin-top:8px}
/* Coming Up card door (2026-10-14): the title link stretches over the
   whole card; Remind Me is a real toggle riding above the stretch. */
.hp-ucard{position:relative}
.hp-ucard h3 a.hp-utitle{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.hp-ucard h3 a.hp-utitle::after{content:"";position:absolute;inset:0;z-index:3}
.hp-ucard h3 a.hp-utitle:hover{color:var(--hp-accent-deep)}
.hp-ucard h3 a.hp-utitle:focus-visible{outline:2px solid var(--hp-red);outline-offset:2px}
button.hp-remind{background:transparent;border:0;padding:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;z-index:4}

/* ---------- GAMES (dense 4-up, 2026-10-14) ---------- */
.hp-gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-game-card{background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;overflow:hidden;box-shadow:var(--hp-shadow-sm);display:flex;flex-direction:column}
.hp-game-media{display:block;aspect-ratio:16/9;background:var(--hp-pressed)}
.hp-game-media img{width:100%;height:100%;object-fit:cover}
.hp-game-card .txt{padding:12px 14px 14px}
.hp-game-card h3{font-size:17.5px;line-height:1.3}
.hp-game-card h3 a{color:var(--hp-ink);font-weight:700}

/* ---------- CLOSING : REWIND + VERSE ---------- */
.hp-closing{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:stretch}
.hp-rew img{width:100%;aspect-ratio:16/9;border-radius:12px}
.hp-rew h3{font-size:23px;line-height:1.3;margin-top:12px}
.hp-rew h3 a{color:var(--hp-ink);font-weight:700}
.hp-glyph{color:var(--hp-wordmark-red);font-weight:900}
.hp-verse{background:var(--hp-well-bg);border-radius:16px;padding:26px;color:var(--hp-well-text);display:flex;flex-direction:column}
.hp-verse-img{width:calc(100% + 52px);max-width:none;margin:-26px -26px 18px;aspect-ratio:16/8;object-fit:cover;border-radius:16px 16px 0 0;display:block}
.hp-verse .hp-label{color:var(--hp-well-gold)}
.hp-verse h3{color:var(--hp-well-text);font-size:27px;line-height:1.3;margin:10px 0 8px}
.hp-verse h3 a{color:var(--hp-well-text);font-weight:700}
.hp-verse p{color:var(--hp-well-dim);font-size:15px}
.hp-verse .bars{font-family:var(--hp-font-serif);font-style:italic;font-size:16.5px;color:var(--hp-well-text);line-height:1.55;margin-top:6px}
.hp-verse a.more{color:var(--hp-well-gold);margin-top:auto;padding-top:14px}

/* ---------- PARTNER SPOTLIGHT ---------- */
.hp-partner{border:1px solid var(--hp-rule);border-radius:16px;background:var(--hp-card);padding:22px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center}
.hp-partner img{width:100%;border-radius:8px}
.hp-partner h3{font-size:24px;margin:4px 0 6px}
.hp-partner p{font-size:14.5px;color:var(--hp-ink-dim)}

/* ---------- FOOTER ---------- */
.hp-footer{margin-top:44px;border-top:1px solid var(--hp-rule);padding:30px 0 40px}
.hp-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}
.hp-foot-grid h4{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--hp-ink-faint);margin-bottom:10px;text-transform:uppercase}
.hp-foot-grid p{font-size:14px;color:var(--hp-ink-dim);line-height:1.9}
.hp-foot-grid a{color:var(--hp-ink-dim);font-weight:600}
.hp-wordmark{font-family:var(--hp-font-display);font-weight:900;font-size:24px;color:var(--hp-ink)}
.hp-wordmark em{font-style:normal;color:#E10600}
.hp-foot-base{margin-top:24px;border-top:1px solid var(--hp-rule);padding-top:14px;font-size:12.5px;color:var(--hp-ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- RESPONSIVE (production breakpoint set) ---------- */
@media (max-width:1023px){
  .hp-hero{grid-template-columns:1fr}
  .hp-sport-grid{grid-template-columns:1fr 1fr}
  .hp-gcards{grid-template-columns:1fr 1fr}
  .hp-pods{grid-template-columns:1fr 1fr}
  .hp-up-grid{grid-template-columns:1fr 1fr}
  .hp-partner{grid-template-columns:1fr}
  .hp-partner img{max-width:340px}
  .hp-ticket-zone{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hp-lead{grid-template-columns:1fr;min-height:0}
  .hp-lead .hp-lead-art{order:-1;min-height:290px}
  .hp-lead figure.hp-lead-art{order:-1;height:248px;min-height:248px}
  .b-scope section.hero.hp-lead figure.hp-lead-art{order:-1;height:248px;min-height:248px}
  .hp-lead h1{font-size:33px}
  .hp-lead-txt{padding:22px 18px 26px}
  .hp-yours-grid{grid-template-columns:1fr}
  .hp-yours{padding:20px}
  .hp-yours-cols{grid-template-columns:1fr}
  .hp-cards3{grid-template-columns:1fr}
  .hp-desk{grid-template-columns:1fr}
  .hp-sport-grid{grid-template-columns:1fr}
  .hp-vegas{grid-template-columns:1fr}
  .hp-music-grid{grid-template-columns:1fr}
  .hp-gcards{grid-template-columns:1fr}
  .hp-closing{grid-template-columns:1fr}
  .hp-foot-grid{grid-template-columns:1fr 1fr}
  .hp-shead h2{font-size:25px}
  .hp-lrow img{width:100px;height:74px}
  .hp-lrow h3{font-size:17px}
  .hp-slip{padding-left:46px}
  .hp-slip-panel{padding:18px 12px}
  section.hp-mod{margin-top:28px}
}

/* ---------- VEGAS GUIDES ROW (visual-forward, 2026-10-14) ---------- */
.hp-guides{grid-column:1/-1;border-top:1px solid var(--hp-rule-idle);padding-top:14px;margin-top:4px}
.hp-guides-head{font-family:var(--hp-font-label);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--hp-red);margin-bottom:10px}
.hp-guides-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hp-guides .hp-gcard{display:flex;flex-direction:column;background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:12px;overflow:hidden;box-shadow:var(--hp-shadow-sm);text-decoration:none;height:100%}
.hp-gmedia{position:relative;aspect-ratio:16/9;background:var(--hp-pressed);display:block;flex:none}
.hp-gmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-gk{position:absolute;left:8px;bottom:8px;background:rgba(24,15,8,.85);color:#FFF3E0;font-family:var(--hp-font-label);font-size:9.5px;font-weight:800;letter-spacing:.13em;padding:3px 8px;border-radius:4px}
/* HVF 2026-10-14: clamp lives on the inner span — as a flex item the clamp painted a sliced 4th line */
.hp-gt{display:block;flex:none;font-size:14.5px;line-height:1.32;font-weight:600;color:var(--hp-ink);padding:10px 12px 12px}
.hp-gt-in{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1023px){.hp-guides-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* Your Previously fallbacks: compact personal thumbs inside the module */
.hp-teamstrip{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.hp-teamchip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;width:72px;padding:8px 4px 6px;background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:10px;text-decoration:none;box-sizing:border-box;overflow:hidden}
.hp-teamchip img{width:34px;height:34px;object-fit:contain}
.hp-teamchip span{font-size:10.5px;line-height:1.15;text-align:center;color:var(--hp-ink-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;overflow-wrap:anywhere}
.hp-teamchip-more{justify-content:center;font-family:var(--hp-font-mono);font-size:11px;color:var(--hp-red);min-height:52px}
.hp-eprow{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hp-rule-idle);text-decoration:none;min-width:0}
.hp-eprow:first-of-type{border-top:none;padding-top:2px}
.hp-eprow img{width:64px;height:36px;object-fit:cover;border-radius:6px;flex:none;background:var(--hp-rule-idle)}
.hp-epmeta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hp-epmeta b{color:var(--hp-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-epmeta .sub{font-family:var(--hp-font-mono);font-size:11.5px;color:var(--hp-ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Your Previously — thumbnail-forward hybrid (2026-10-14): episode
   still cards + poster pick cards; team rows keep their data list
   form but carry both teams' logos. Third column at desktop only. */
@media (min-width:1024px){.hp-yours-cols.has3{grid-template-columns:1fr 1fr 1fr}}
.hp-epcard{display:flex;gap:10px;align-items:center;padding:8px;background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:10px;text-decoration:none;min-width:0;margin-top:8px}
.hp-yours-col .hp-epcard:first-of-type{margin-top:0}
.hp-epcard img{width:96px;height:54px;object-fit:cover;border-radius:6px;flex:none;background:var(--hp-rule-idle)}
.hp-pick{display:flex;gap:10px;align-items:center;padding:8px;background:var(--hp-card);border:1px solid var(--hp-rule-idle);border-radius:10px;text-decoration:none;min-width:0;margin-top:8px}
.hp-yours-col .hp-pick:first-of-type{margin-top:0}
.hp-pick img{width:46px;height:69px;object-fit:cover;border-radius:6px;flex:none;background:var(--hp-rule-idle)}
.hp-epmeta .why{font-size:12px;color:var(--hp-ink-dim);line-height:1.35;margin-top:1px}
.hp-tlogo{display:inline-block;width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:5px}
.hp-tlogo.r{margin:0 5px 0 9px}

/* ============ TODAY vs YESTERDAY FLAGS (James 2026-10-14): the slip cap
   becomes a real banner — big type on a full color band — so the two cards
   read instantly: red + LIVE for today's card, deep ink for yesterday's,
   whose state text tells the truth (still settling while legs are out). */
.hp-slip-cap{font-size:15px;letter-spacing:.1em;padding:11px 14px;margin:-6px -6px 16px;border-radius:10px;background:#33302A;color:#F6F0E0;align-items:center;flex-wrap:wrap}
.hp-slip-panel.hp-slip-open .hp-slip-cap{background:#A5ACAF;color:#FFF6E5}
.hp-slip-cap .r{color:inherit;opacity:.78;font-size:12.5px}

/* ===== TAKES — GRADE BADGE (James 2026-10-14: "make the grade stand out") =====
   The grade LEADS every take as a solid, color-banded chip: green A band,
   brick B band, muted C band — sized to read at arm's length on phone and
   laptop. The grade value is the brain's, unchanged; presentation only. */
.hp-take{display:flex;gap:13px;align-items:flex-start}
.hp-take-body{flex:1 1 auto;min-width:0}
.hp-take .grb{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;padding:7px 9px 8px;border-radius:8px;color:#FFF8F0;box-shadow:0 2px 8px rgba(42,28,17,.22);margin-top:1px}
.hp-take .grb-k{font-family:var(--hp-font-label);font-size:8.5px;font-weight:800;letter-spacing:.18em;color:rgba(255,248,240,.78);line-height:1}
.hp-take .grb-v{font-family:var(--hp-font-serif);font-size:22px;font-weight:700;line-height:1.12;color:#FFF8F0}
.hp-take .grb-a{background:var(--hp-win,#2E7D4F)}
.hp-take .grb-b{background:var(--hp-red,#A5ACAF)}
.hp-take .grb-c{background:#8A7F6D}
@media (max-width:480px){.hp-take{gap:11px}.hp-take .grb{min-width:50px;padding:6px 7px 7px}.hp-take .grb-v{font-size:20px}}

/* ==== LEAD SAFE STACK (2026-10-14, headline/photo overlap emergency) ====
   The homepage lead (section.hero) is a bible.css grid whose zones are
   disjoint by construction. This sheet's unscoped .hp-lead-art img rule took
   the lead photo out of flow (position:absolute); on narrow screens the
   figure collapsed to 0 height and the photo painted over the headline.
   These rules put the photo back IN FLOW inside the lead at winning
   specificity: photo first on narrow screens, headline in its own zone. */
.b-scope section.hero figure.hp-lead-art{position:relative}
.b-scope section.hero figure.hp-lead-art img{position:static;width:100%;height:100%;object-fit:cover}
/* Insurance (2026-10-14, hero readability): the .hp-lead-scoped absolute
   img rules earlier in this sheet (specificity 0,4,3) would outrank the
   safe stack if section.hero ever carried .hp-lead again. This twin ties
   that specificity and wins by order — the lead photo stays in flow in
   this component no matter which legacy class combination shows up. */
.b-scope section.hero.hp-lead figure.hp-lead-art img{position:static;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .b-scope section.hero figure.hp-lead-art{order:-1;min-height:0;height:auto}
  .b-scope section.hero figure.hp-lead-art img{height:auto;max-height:320px}
}

/* ==== LEAD EDITORIAL — DIRECTION A (James's pick, 2026-10-14) ====
   The lead's intended composition: photo clean in its own zone on top,
   then kicker / headline / dek / byline in the display serif and ink on
   the card's solid cream ground. Nothing renders over the photo, ever.
   (The old brick-gradient hero skin + an ink headline stamped over the
   photo was the pre-switch treatment; this block is the switch.) */
.b-scope section.hero{grid-template-columns:1fr;background:var(--hp-card-warm);color:var(--hp-ink);box-shadow:none}
.b-scope section.hero::after{display:none}
/* bible.css fallback veil (2026-10-14 hero readability) is for the
   no-this-sheet state only; Direction A paints on solid card ground. */
.b-scope section.hero::before{display:none}
.b-scope section.hero figure.hp-lead-art{grid-column:1;grid-row:auto;order:-1}
.b-scope section.hero .kicker{color:var(--hp-red)}
.b-scope section.hero h1{font-family:var(--hp-font-serif);color:var(--hp-ink);font-size:clamp(32px,4vw,54px);line-height:1.05}
.b-scope section.hero h1 a{color:var(--hp-ink)}
.b-scope section.hero .dek{color:var(--hp-ink-body);font-size:17px;line-height:1.6;max-width:62ch}
.b-scope section.hero .byline{color:var(--hp-ink-faint)}
.b-scope section.hero .byline strong{color:var(--hp-ink)}

/* Your Previously masthead (James 2026-10-14: bigger) + dated team rows */
.hp-yours-kicker{font-size:14.5px;letter-spacing:.2em}
.hp-yours h2.hp-yours-title{font-size:clamp(31px,7vw,42px);line-height:1.08;margin:8px 0 10px}

/* ==== CANVA WAVE 1 — DIRECTION A "THE EDITORIAL STANDARD" (2026-10-14) ====
   Homepage only (body.pv-home). Design/layout ONLY over the frozen module
   set: no markup, JS, data or copy changes. Tokens from the Direction A
   master (Canva DAHX_50VK-Q / pkgA-home): cream #FAF6EE, card #FFFDF8,
   ink #1B1712, brick #A5ACAF, press #9E2B12, sand #F2E9D7, hairline
   #D9D0BE, hairline-soft #E0D7C3, muted #8A7F6D, body-muted #6E6557,
   dotted #A99E8A. Appended last so it wins ties over bible.css and over
   the earlier lead blocks in this sheet. */
body.pv-home{--wa-cream:#FAF6EE;--wa-card:#FFFDF8;--wa-ink:#1B1712;--wa-brick:#A5ACAF;--wa-press:#9E2B12;--wa-sand:#F2E9D7;--wa-rule:#D9D0BE;--wa-rule-soft:#E0D7C3;--wa-muted:#8A7F6D;--wa-bmuted:#6E6557;--wa-dotted:#A99E8A;--wa-dek:#3A322A;background:var(--wa-cream)}
body.pv-home .hp-wrap{--hp-rule:var(--wa-rule);--hp-rule-idle:var(--wa-rule-soft)}

/* ---- Masthead / nav (A treatment, live furniture text kept) ---- */
@media (min-width:1024px){
  body.pv-home .b-topbar{background:var(--wa-cream);border-bottom:none}
  body.pv-home .b-topbar__in{max-width:1360px;height:auto;padding:18px 16px 0;flex-wrap:wrap;align-items:flex-end;column-gap:26px;row-gap:0}
  body.pv-home .b-wordmark{font-family:var(--hp-font-serif);font-size:46px;font-weight:700;letter-spacing:-.01em;color:#E10600;line-height:1}
  body.pv-home .b-wordmark em{color:#E10600}
  body.pv-home .b-dateline{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--wa-bmuted);padding-bottom:6px}
  body.pv-home .b-topnav{order:5;flex:1 1 100%;margin-left:0;margin-top:14px;padding:11px 0 10px;border-top:2px solid #FFFFFF;border-bottom:1px solid var(--wa-rule);gap:30px;align-items:center}
  body.pv-home .b-topnav a.b-nav-link{font-size:12.5px;font-weight:700;letter-spacing:.24em;color:var(--wa-ink);border-bottom:none;padding:2px 0}
  body.pv-home .b-topnav a.b-nav-link:hover{color:var(--wa-press)}
  body.pv-home .b-topnav a.b-active{color:var(--wa-brick);border-bottom:none}
}
@media (max-width:1023px){
  body.pv-home .b-m-head{border-bottom:2px solid #FFFFFF}
  body.pv-home .b-m-head .b-wordmark{font-family:var(--hp-font-serif);font-size:26px;font-weight:700;color:#E10600}
  body.pv-home .b-m-head .b-wordmark em{color:#E10600}
  body.pv-home .b-sec-strip{border-bottom:1px solid var(--wa-rule)}
  body.pv-home .b-sec-strip a.b-on{color:var(--wa-brick);border-bottom-color:var(--wa-brick)}
  body.pv-home .b-tab.b-active{color:var(--wa-brick)}
}

/* ---- Band headers (every module): serif 22/600, 3px ink top rule,
        right-side element as brick kicker ---- */
body.pv-home .hp-shead{border-top:3px solid var(--wa-ink);padding-top:12px;align-items:baseline}
body.pv-home .hp-shead h2{font-size:22px;font-weight:600;line-height:1.2;color:var(--wa-ink)}
body.pv-home .hp-shead .kick{color:var(--wa-brick);font-size:11px;letter-spacing:.2em}
body.pv-home .hp-shead .more{font-family:var(--hp-font-label);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wa-brick)}
body.pv-home .hp-shead .more a{color:var(--wa-brick);font-weight:700}
body.pv-home section.hp-mod{margin-top:40px}

/* ---- Flat editorial cards site-of-page wide ---- */
body.pv-home .hp-wcard,body.pv-home .hp-trend,body.pv-home .hp-pod,body.pv-home .hp-ucard,
body.pv-home .hp-game-card,body.pv-home .hp-mlead,body.pv-home .hp-partner,
body.pv-home .hp-ticket-takes,body.pv-home .hp-ticket-updating,body.pv-home .hp-form,
body.pv-home .hp-guides .hp-gcard,body.pv-home .hp-epcard,body.pv-home .hp-pick,
body.pv-home .hp-teamchip{border-radius:0;border-color:var(--wa-rule-soft);box-shadow:none;background:var(--wa-card)}
body.pv-home .hp-wcard .media img,body.pv-home .hp-ucard .media img,body.pv-home .hp-feat img,
body.pv-home .hp-rew img,body.pv-home .hp-lrow img,body.pv-home .hp-vrow .strip img,
body.pv-home .hp-gmedia img,body.pv-home .hp-mlead img,body.pv-home .hp-mrow img{border-radius:0}
body.pv-home .hp-breaking{border-radius:0;background:var(--wa-brick)}

/* ---- The Wire ticker (motion behavior untouched) ---- */
body.pv-home .hp-wire{border-bottom:1px solid var(--wa-rule)}
body.pv-home .hp-wire-chip{background:var(--wa-brick);border-radius:0}

/* ---- LEAD — Direction A stack (THE layout-safety guarantee) ----
   section.hero becomes a plain flex COLUMN in normal flow: figure
   (order 1) then the text block (order 2). No absolute positioning, no
   grid zones, no overlay — the copy physically cannot paint over the
   photo at any headline length or width, fresh or returning. The
   swapHero hooks (.kicker, h1 a, .dek, .byline, figure img,
   figcaption, #hpLeadCta) are untouched. */
body.pv-home.b-scope section.hero,body.pv-has-breaking.pv-home.b-scope section.hero{
  display:flex;flex-direction:column;gap:0;background:transparent;color:var(--wa-ink);
  border-radius:0;box-shadow:none;padding:0;overflow:visible}
body.pv-home.b-scope section.hero::after{display:none}
body.pv-home.b-scope section.hero figure.hp-lead-art{
  order:1;position:relative;grid-column:auto;grid-row:auto;width:100%;margin:0;min-height:0;align-self:auto}
body.pv-home.b-scope section.hero figure.hp-lead-art img{
  position:static;width:100%;height:auto;max-height:none;border-radius:0;display:block;object-fit:cover}
body.pv-home.b-scope section.hero figure.hp-lead-art figcaption{
  position:static;background:none;padding:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--wa-bmuted)}
body.pv-home.b-scope section.hero figure.hp-lead-art figcaption b,
body.pv-home.b-scope section.hero figure.hp-lead-art figcaption strong{color:var(--wa-ink)}
body.pv-home.b-scope section.hero .hp-lead-txt{order:2;padding:0;display:block;min-width:0;width:100%}
body.pv-home.b-scope section.hero .kicker{
  display:block;margin:18px 0 0;color:var(--wa-brick);background:none;padding:0;
  font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
body.pv-home.b-scope section.hero .kicker.is-breaking{background:#E10600;color:#FFFFFF;align-self:flex-start;display:inline-block;padding:4px 10px}
body.pv-home.b-scope section.hero h1,body.pv-has-breaking.pv-home.b-scope section.hero h1{
  font-family:var(--hp-font-serif);font-size:43px;font-weight:700;line-height:1.13;
  letter-spacing:-.01em;margin:16px 0 12px;color:var(--wa-ink);max-width:none}
body.pv-home.b-scope section.hero h1 a{color:var(--wa-ink)}
body.pv-home.b-scope section.hero .dek,body.pv-has-breaking.pv-home.b-scope section.hero .dek{
  font-family:var(--hp-font-serif);font-size:19px;line-height:1.5;color:var(--wa-dek);max-width:62ch;margin:0}
body.pv-home.b-scope section.hero .byline,body.pv-has-breaking.pv-home.b-scope section.hero .byline{
  display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wa-bmuted)}
body.pv-home.b-scope section.hero .byline::before{
  content:"";width:38px;height:38px;border-radius:50%;background:var(--wa-ink);flex:none}
body.pv-home.b-scope section.hero .byline strong{color:var(--wa-ink);font-size:14px;letter-spacing:0;text-transform:none}
body.pv-home.b-scope section.hero .hp-lead-cta{margin-top:20px;padding-top:0}
body.pv-home .hp-btn{background:var(--wa-brick);border-radius:0;box-shadow:none;letter-spacing:.08em}
body.pv-home .hp-btn:hover{background:var(--wa-press)}
body.pv-home .hp-hero{gap:40px;align-items:start;margin-top:26px}

/* ---- Right Now rail (= A Wire rail furniture) ---- */
body.pv-home .hp-now{border:none;border-left:1px solid var(--wa-rule);border-radius:0;background:transparent;padding:0 0 0 28px}
body.pv-home .hp-now-head{border-bottom:2px solid var(--wa-ink);padding-bottom:8px;margin-bottom:2px}
body.pv-home .hp-now-head .hp-label:first-child{font-family:var(--hp-font-serif);font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--wa-ink)}
body.pv-home .hp-now-row{border-top:1px solid var(--wa-rule-soft)}
body.pv-home .hp-now-match{font-family:var(--hp-font-serif);font-size:16px;font-weight:600;color:var(--wa-ink)}
body.pv-home .hp-now-foot{border-top:1px solid var(--wa-rule-soft)}

/* ---- Tonight in Sports (labels are data-driven; CSS only) ---- */
body.pv-home .hp-sports{background:transparent;border:none;border-radius:0;box-shadow:none;padding:0}
body.pv-home .hp-sg .sgh{color:var(--wa-muted)}
body.pv-home .hp-srow{border-top:1px solid var(--wa-rule-soft)}

/* ---- The Ticket: TOKENS ONLY (locked Canva slip untouched) ---- */
body.pv-home .hp-ticket-takes .gr{color:var(--wa-bmuted)}
/* (slip, legs, totals, stamps and grade badges keep their locked design) */

/* ---- Your Previously (furniture only) ---- */
body.pv-home .hp-yours{background:var(--wa-sand);border:1px solid var(--wa-rule);border-radius:0}
body.pv-home .hp-yrow{border-top:1px solid var(--wa-rule-soft)}

/* ---- Latest / Trending ---- */
body.pv-home .hp-tnum{font-size:19px;font-weight:700;color:var(--wa-brick)}
body.pv-home .hp-lrow{border-top:1px solid var(--wa-rule-soft)}
body.pv-home .hp-trow{border-top:1px solid var(--wa-rule-soft)}

/* ---- Vegas / Podcasts / Music / Coming / Games rows ---- */
body.pv-home .hp-vrow{border-top:1px solid var(--wa-rule-soft)}
body.pv-home .hp-pod-media .hp-badge.new{background:var(--wa-brick);border-radius:0}
body.pv-home .hp-mrow{border-top:1px solid var(--wa-rule-soft)}
body.pv-home .hp-mrow .rk{font-size:19px;font-weight:700;color:var(--wa-brick)}
body.pv-home button.hp-mrow{border-top:1px solid var(--wa-rule-soft)}
body.pv-home .hp-badge{border-radius:0}

/* ---- Closing: Rewind + Verse (A verse card: card bg, hairline, italic serif) ---- */
body.pv-home .hp-verse{background:var(--wa-card);border:1px solid var(--wa-rule-soft);border-radius:0;color:var(--wa-ink);padding:26px}
body.pv-home .hp-verse-img{border-radius:0}
body.pv-home .hp-verse .hp-label{color:var(--wa-brick)}
body.pv-home .hp-verse h3{color:var(--wa-ink)}
body.pv-home .hp-verse h3 a{color:var(--wa-ink)}
body.pv-home .hp-verse p{color:var(--wa-bmuted)}
body.pv-home .hp-verse .bars{color:var(--wa-ink);font-style:italic}
body.pv-home .hp-verse a.more{color:var(--wa-brick)}

/* ---- House ad + footer furniture ---- */
body.pv-home .hp-ad{border-radius:0;border-color:var(--wa-rule);background:var(--wa-sand)}
body.pv-home .hp-ad .adbrand{font-family:var(--hp-font-serif)}
body.pv-home .hp-ad .adbrand em{color:var(--wa-brick)}
body.pv-home .hp-footer{border-top:1px solid var(--wa-rule)}
body.pv-home .hp-wordmark{font-family:var(--hp-font-serif);font-weight:700;color:var(--wa-ink)}
body.pv-home .hp-wordmark em{color:#E10600}
body.pv-home .hp-foot-base{border-top:1px solid var(--wa-rule)}

/* ---- Lead at mobile: same stack, A scale for 390px ---- */
@media (max-width:700px){
  body.pv-home.b-scope section.hero h1{font-size:32px;line-height:1.15}
  body.pv-home.b-scope section.hero .dek{font-size:17.5px}
  body.pv-home .hp-now{border-left:none;padding-left:0}
  body.pv-home .hp-hero{gap:26px}
}

/* ===== Top 10 rails (restored 2026-10-14: TV, then Movies, then Watch/Live TV) ===== */
.hp-top10{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hp-t10card{flex:0 0 126px;scroll-snap-align:start;text-decoration:none;color:var(--hp-ink);display:block;position:relative}
.hp-t10rank{display:block;font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:800;line-height:1;color:var(--hp-red)}
.hp-t10poster{display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--hp-card);margin-top:6px}
.hp-t10poster img{width:100%;height:100%;object-fit:cover;display:block}
.hp-t10t{display:block;margin-top:8px;font-weight:700;font-size:14px;line-height:1.25}
.hp-t10m{display:block;margin-top:2px;font-size:12px;opacity:.65}
.hp-t10avail{opacity:.85}
/* Card actions on the poster rails: the heart + want stack ride over
   the poster (the rank numeral occupies the card's top band). */
.hp-t10card .pv-heart{top:46px}
.hp-t10card .pv-marks-stack{top:94px}

/* ===== Right Now groups (2026-10-14): "Coming up" + "On TV tonight" =====
   The live block's rows stay direct children of #hpNowRows; each
   labeled group carries its own top rule and header, and its first
   row drops the row rule so the group reads as one block. */
.hp-now-group{border-top:1px solid var(--hp-rule-idle);margin-top:6px;padding-top:10px}
.hp-now-ghead{font-family:var(--hp-font-label);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-ink-faint);padding-bottom:2px}
.hp-now-group .hp-now-row.lead{border-top:none;padding-top:7px}
body.pv-home .hp-now-group{border-top-color:var(--wa-rule-soft)}
body.pv-home .hp-now-ghead{color:var(--wa-muted)}

/* ==== THE VEGAS DESK SKYLINE BAND (2026-10-15) ====
   Homepage only (body.pv-home). The Vegas Desk section header becomes a
   dark duotone masthead band: the Las Vegas Strip skyline (photo:
   King of Hearts / Wikimedia Commons, CC BY-SA 4.0 — Feb 2023, shot
   from Resorts World: the Encore and Wynn towers fill the foreground;
   the same photo as the /vegas/ hero) warm-graded into the Package A
   palette, behind the
   kicker + title under an ink-brown scrim. All band colors are pinned
   hex so the band renders identically in light and dark OS schemes.
   PHOTO CREDIT, house treatment for masthead bands (2026-10-15): the
   license attribution renders QUIET via the --band-credit-size /
   --band-credit-ink tokens on the band — present and legible on
   inspection, never the loudest element in the corner. Any new band-
   pattern surface reuses these tokens (the /vegas/ hero credit follows
   the same spec values).
   LOOKS only: no markup, order or data changes. */
body.pv-home #hpVegas .hp-shead{
  --band-credit-size:8px;
  --band-credit-ink:rgba(250,246,238,.38);
  position:relative;
  border-top:3px solid var(--wa-brick);
  align-items:center;
  min-height:148px;
  padding:16px 18px 14px;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 24%),
    linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 30%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.90) 100%),
    url("/img/vegas/vegas-desk-band-wynn-1920.jpg") center 20%/cover no-repeat #181009;
}
body.pv-home #hpVegas .hp-shead h2{color:#FAF6EE;text-shadow:0 1px 12px rgba(10,6,2,.5)}
body.pv-home #hpVegas .hp-shead .kick{color:#D8B25C}
body.pv-home #hpVegas .hp-shead .more{color:#FAF6EE}
body.pv-home #hpVegas .hp-shead .more a{color:#FAF6EE}
body.pv-home #hpVegas .hp-shead::after{
  content:"Photo: King of Hearts / Wikimedia Commons \00B7 CC BY-SA 4.0";
  position:absolute;right:10px;bottom:6px;
  font-family:var(--hp-font-label);font-size:var(--band-credit-size);font-weight:500;letter-spacing:.06em;
  color:var(--band-credit-ink);pointer-events:none;
}
@media (max-width:760px){
  body.pv-home #hpVegas .hp-shead{
    min-height:124px;padding:14px 14px 20px;
    background:
      linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 24%),
      linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.84) 75%, rgba(0,0,0,.90) 100%),
      url("/img/vegas/vegas-desk-band-wynn-1000.jpg") 30% 24%/cover no-repeat #181009;
  }
}

/* ============ SOFT-EDGE HERO (2026-10-15) ============
   James: soften the lead picture's hard edges -- "like a fade out."
   A mask feather on the IMAGE layer only: the photo melts into
   whatever sits behind the hero (the page, in light or dark scheme
   alike) because the fade runs to transparent -- no re-encoding, no
   scheme-specific asset. Headline, dek, byline and captions are
   never masked. Shared treatment with article-editorial.css
   (.pv-softedge, token --hero-fade): ~24px feather on desktop,
   ~10px on phones, so the photo stays dominant and only the rim
   melts.    TUNED 2026-10-15 (James, live verdict): halved -- 24px desktop /
   10px phones (article bottom 10px). The photo stays solid longer
   and only the very rim melts; the hard edge stays gone.
*/
:root{--hero-fade:24px}
@media (max-width:680px){:root{--hero-fade:10px}}
.pv-softedge,
.b-scope section.hero figure.hp-lead-art>img,
.b-scope section.hero figure.hp-lead-art>picture{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--hero-fade),#000 calc(100% - var(--hero-fade)),transparent 100%),linear-gradient(90deg,transparent 0,#000 var(--hero-fade),#000 calc(100% - var(--hero-fade)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--hero-fade),#000 calc(100% - var(--hero-fade)),transparent 100%),linear-gradient(90deg,transparent 0,#000 var(--hero-fade),#000 calc(100% - var(--hero-fade)),transparent 100%);
  mask-composite:intersect;
}


/* ============================================================================
   D3 CINEMATIC HYBRID — HOMEPAGE CONVERSION (2026-10-15, Task C)
   ----------------------------------------------------------------------------
   Every rule below is scoped under html[data-theme="d3"]: this sheet only
   converts pages that opt in (homepage only at ship time). Unconverted
   pages never load this sheet's effect because they lack the attribute.
   Strategy: (1) remap the --hp-* / --wa-* / --bible-* / --desert-* vars the
   existing hp system already consumes — JS-rendered modules inherit the
   conversion with zero markup changes; (2) explicit D3 rules for the hero
   (full-bleed photo surface, scrim behind text only), the TONIGHT band,
   the dense magazine grid, chrome and footer. Drift red #EC4634 is killed
   in scope: --brand-red and --hp-wordmark-red are re-pointed to brick.
   Rollback: index.html.bak-d3home-20261015 + home-v2.css.bak-d3home-20261015.
   ========================================================================== */

/* ---- (1) Token remaps (scoped) ---- */
html[data-theme="d3"]{
  --hp-bg:var(--d3-ground); --hp-card:var(--d3-surface-1); --hp-card-warm:var(--d3-surface-1);
  --hp-pressed:var(--d3-surface-2); --hp-glass:rgba(0,0,0,.92);
  --hp-ink:var(--d3-text); --hp-ink-body:var(--d3-text); --hp-ink-soft:var(--d3-text-2);
  --hp-ink-dim:var(--d3-text-2); --hp-ink-faint:var(--d3-text-3);
  --hp-rule:var(--d3-line); --hp-rule-idle:var(--d3-line);
  --hp-red:var(--d3-accent); --hp-red-deep:var(--d3-accent-deep);
  --hp-accent:var(--d3-accent-text); --hp-accent-deep:var(--d3-accent-text);
  --hp-accent-soft:rgba(255,255,255,.16);
  --hp-wordmark-red:var(--d3-accent); --brand-red:var(--d3-accent); --brand-red-deep:var(--d3-accent-deep);
  --hp-gold:#D8B25C;
  --hp-shadow-card:none; --hp-shadow-sm:none;
  --hp-font-display:"Previously Display",Georgia,serif; --hp-font-serif:"Previously Display",Georgia,serif;
  --hp-font-label:"Inter",system-ui,sans-serif;
  --bible-bg:var(--d3-ground); --bible-card:var(--d3-surface-1);
  --bible-ink:var(--d3-text); --bible-ink-soft:var(--d3-text-2); --bible-ink-dim:var(--d3-text-3);
  --bible-red:var(--d3-accent); --bible-red-deep:var(--d3-accent-deep); --bible-rule:var(--d3-line);
  --bible-minibar:rgba(0,0,0,.97); --bible-indexbar:rgba(0,0,0,.96); --bible-tabbar:rgba(0,0,0,.97);
  --desert-bg:var(--d3-ground); --desert-card:var(--d3-surface-1); --desert-pressed:var(--d3-surface-2);
  --desert-ink:var(--d3-text); --desert-ink-dim:var(--d3-text-2); --desert-ink-faint:var(--d3-text-3);
  --desert-rule:var(--d3-line); --desert-accent:var(--d3-accent-text); --desert-accent-deep:var(--d3-accent-text);
  --desert-glass:rgba(0,0,0,.92); --desert-shadow:rgba(0,0,0,.45);
  --surface-cream:var(--d3-surface-1); --text-on-light-muted:var(--d3-text-3);
}
html[data-theme="d3"] body.pv-home{
  --wa-cream:var(--d3-ground); --wa-card:var(--d3-surface-1); --wa-ink:var(--d3-text);
  --wa-brick:var(--d3-accent); --wa-press:var(--d3-accent-text); --wa-sand:var(--d3-surface-2);
  --wa-rule:var(--d3-line); --wa-rule-soft:var(--d3-line);
  --wa-muted:var(--d3-text-3); --wa-bmuted:var(--d3-text-2); --wa-dotted:var(--d3-text-3); --wa-dek:var(--d3-text-2);
  background:var(--d3-ground); color:var(--d3-text);
}

/* ---- Base ---- */
html[data-theme="d3"] body.pv-home .hp-wrap{border-top:none}
html[data-theme="d3"] body.pv-home ::selection{background:var(--d3-accent);color:#000000}

/* ---- Shape law: 2px radii, no shadows, no pills (Ticket paper slip exempt:
   the locked Canva slip keeps its own 3px paper radius + shadow) ---- */
html[data-theme="d3"] body.pv-home .hp-btn,
html[data-theme="d3"] body.pv-home .hp-ghost,
html[data-theme="d3"] body.pv-home .hp-wire-chip,
html[data-theme="d3"] body.pv-home .hp-badge,
html[data-theme="d3"] body.pv-home .hp-chip,
html[data-theme="d3"] body.pv-home .hp-breaking,
html[data-theme="d3"] body.pv-home .hp-ad,
html[data-theme="d3"] body.pv-home .hp-slip-panel,
html[data-theme="d3"] body.pv-home .hp-ticket-takes,
html[data-theme="d3"] body.pv-home .hp-ticket-updating,
html[data-theme="d3"] body.pv-home .hp-form,
html[data-theme="d3"] body.pv-home .hp-yours,
html[data-theme="d3"] body.pv-home .hp-wcard,
html[data-theme="d3"] body.pv-home .hp-trend,
html[data-theme="d3"] body.pv-home .hp-sports,
html[data-theme="d3"] body.pv-home .hp-pod,
html[data-theme="d3"] body.pv-home .hp-mlead,
html[data-theme="d3"] body.pv-home .hp-ucard,
html[data-theme="d3"] body.pv-home .hp-game-card,
html[data-theme="d3"] body.pv-home .hp-partner,
html[data-theme="d3"] body.pv-home .hp-guides .hp-gcard,
html[data-theme="d3"] body.pv-home .hp-epcard,
html[data-theme="d3"] body.pv-home .hp-pick,
html[data-theme="d3"] body.pv-home .hp-teamchip,
html[data-theme="d3"] body.pv-home .hp-t10poster,
html[data-theme="d3"] body.pv-home .hp-tframe,
html[data-theme="d3"] body.pv-home .hp-verse,
html[data-theme="d3"] body.pv-home .hp-rew img,
html[data-theme="d3"] body.pv-home .hp-partner img,
html[data-theme="d3"] body.pv-home .hp-dm-thumb,
html[data-theme="d3"] body.pv-home .hp-now-media.tv,
html[data-theme="d3"] body.pv-home .hp-now-media.logos,
html[data-theme="d3"] body.pv-home .hp-epcard img,
html[data-theme="d3"] body.pv-home .hp-pick img,
html[data-theme="d3"] body.pv-home .hp-eprow img,
html[data-theme="d3"] body.pv-home .hp-take .grb,
html[data-theme="d3"] body.pv-home .hp-slip-cap,
html[data-theme="d3"] body.pv-home .hp-form input{border-radius:2px;box-shadow:none}
html[data-theme="d3"] body.pv-home .hp-verse-img{border-radius:2px 2px 0 0}
html[data-theme="d3"] body.pv-home .hp-btn{background:var(--d3-accent);color:#000000}
html[data-theme="d3"] body.pv-home .hp-btn:hover{background:var(--d3-accent-deep);color:#FFFFFF}
html[data-theme="d3"] body.pv-home .hp-ghost{border-color:var(--d3-line);color:var(--d3-text)}
html[data-theme="d3"] body.pv-home .hp-form input{background:var(--d3-inset);color:var(--d3-text);border-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-form input::placeholder{color:var(--d3-text-3)}

/* ---- Chrome: masthead / nav on ground, brick rule; mobile strip + bottom nav ---- */
@media (min-width:1024px){
  html[data-theme="d3"] body.pv-home .b-topbar{background:var(--d3-ground)}
  html[data-theme="d3"] body.pv-home .b-topnav{border-top:2px solid #FFFFFF;border-bottom:2px solid var(--d3-accent)}
  html[data-theme="d3"] body.pv-home .b-nav-dropmenu{background:var(--d3-surface-1);border-color:var(--d3-line);border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  html[data-theme="d3"] body.pv-home .b-nav-dropmenu .b-drop-sub{background:var(--d3-surface-1);border-color:var(--d3-line);border-radius:2px}
}
@media (max-width:1023px){
  html[data-theme="d3"] body.pv-home .b-m-head{background:var(--d3-ground);border-bottom:2px solid #FFFFFF}
  html[data-theme="d3"] body.pv-home .b-sec-strip{background:var(--d3-ground);border-bottom:2px solid var(--d3-accent)}
}
html[data-theme="d3"] .pv-bottom-nav{background:var(--d3-surface-1);border-top:1px solid var(--d3-line);box-shadow:0 -2px 12px rgba(0,0,0,.45)}
html[data-theme="d3"] .pv-bottom-nav a,html[data-theme="d3"] .pv-bottom-nav button{color:var(--d3-text-2)}
html[data-theme="d3"] .mpop-card{background:var(--d3-surface-1);color:var(--d3-text);border-color:var(--d3-line);border-radius:2px}

/* ---- The Wire ---- */
html[data-theme="d3"] body.pv-home .hp-wire{border-bottom:1px solid var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-wire-chip{background:#E10600;color:#FFFFFF}

/* ---- HERO: full-bleed cinematic photo surface ----
   section.hero becomes a flex column in normal flow over an absolutely
   positioned photo that covers the whole module. The text block sits at
   the bottom in its own zone; the scrim gradient exists ONLY behind that
   zone (transparent above it). The hero grows with its copy (min-height,
   never fixed), so headline/dek can never paint outside the photo, and
   the swapHero hooks (.kicker, h1 a, .dek, .byline, figure img,
   figcaption, #hpLeadCta) are structurally untouched. */
html[data-theme="d3"] body.pv-home .hp-hero{grid-template-columns:1fr 340px;gap:12px;margin-top:12px;align-items:stretch}
html[data-theme="d3"] body.pv-home.b-scope section.hero,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:600px;overflow:hidden;border-radius:2px;background:var(--d3-inset);
  color:var(--d3-text);box-shadow:none;padding:0}
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art{
  position:absolute;inset:0;order:0;width:100%;height:100%;margin:0;min-height:0}
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art img,
html[data-theme="d3"] body.pv-home.b-scope section.hero.hp-lead figure.hp-lead-art img{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;display:block}
html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-txt{
  order:2;position:relative;z-index:2;display:block;width:100%;min-width:0;
  padding:110px 30px 26px;
  background:linear-gradient(180deg,var(--d3-scrim-none) 0%,var(--d3-scrim-mid) 34%,var(--d3-scrim-strong) 72%)}
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art figcaption{
  position:absolute;top:10px;right:10px;left:auto;bottom:auto;z-index:3;max-width:70%;
  padding:4px 8px;font-size:11px;line-height:1.5;color:var(--d3-text-2);
  background:rgba(0,0,0,.72);border-radius:2px}
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art figcaption b,
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art figcaption strong{color:var(--d3-text)}
html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker{
  display:block;margin:0;color:var(--d3-accent-text);background:none;padding:0;
  font-family:var(--d3-font-ui);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker.is-breaking{
  background:#E10600;color:#FFFFFF;align-self:flex-start;display:inline-block;padding:4px 10px;border-radius:2px}
html[data-theme="d3"] body.pv-home.b-scope section.hero h1,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero h1{
  font-family:var(--d3-font-display);font-size:46px;font-weight:600;line-height:1.08;
  letter-spacing:-.015em;margin:14px 0 12px;color:var(--d3-text);max-width:20ch}
html[data-theme="d3"] body.pv-home.b-scope section.hero h1 a{color:var(--d3-text);font-weight:600}
html[data-theme="d3"] body.pv-home.b-scope section.hero h1 a:hover{color:var(--d3-text);text-decoration:none}
html[data-theme="d3"] body.pv-home.b-scope section.hero .dek,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero .dek{
  font-family:var(--d3-font-ui);font-size:17.5px;line-height:1.55;color:var(--d3-text-2);max-width:62ch;margin:0}
html[data-theme="d3"] body.pv-home.b-scope section.hero .byline,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero .byline{
  display:flex;align-items:center;gap:12px;margin:16px 0 0;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--d3-text-2)}
html[data-theme="d3"] body.pv-home.b-scope section.hero .byline::before{background:var(--d3-accent)}
html[data-theme="d3"] body.pv-home.b-scope section.hero .byline strong{color:var(--d3-text);font-size:14px;letter-spacing:0;text-transform:none}
html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-cta{margin-top:20px;padding-top:0}
html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-meta{color:var(--d3-text-2)}
@media (max-width:700px){
  html[data-theme="d3"] body.pv-home.b-scope section.hero,
  html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero{min-height:520px}
  html[data-theme="d3"] body.pv-home.b-scope section.hero h1{font-size:30px;line-height:1.12;max-width:none}
  html[data-theme="d3"] body.pv-home.b-scope section.hero .dek{font-size:16.5px}
  html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-txt{padding:90px 18px 20px}
  html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art img{max-height:none}
}

/* ---- Right Now rail -> dark TONIGHT rail panel ---- */
html[data-theme="d3"] body.pv-home .hp-now{
  border:1px solid var(--d3-line);border-top:2px solid var(--d3-accent);border-radius:2px;
  background:var(--d3-surface-1);padding:18px}
html[data-theme="d3"] body.pv-home .hp-now-head{border-bottom:1px solid var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-now-head .hp-label:first-child{color:var(--d3-text)}
html[data-theme="d3"] body.pv-home .hp-now-group{border-top-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-now-ghead{color:var(--d3-text-3)}
html[data-theme="d3"] body.pv-home .hp-badge.time{background:var(--d3-surface-2);color:var(--d3-accent-text)}
html[data-theme="d3"] body.pv-home .hp-badge.final{border-color:var(--d3-line);color:var(--d3-text-3)}
/* Badge contrast pin (2026-10-16, badge-contrast-fix): accent-fill badges carry
   pinned on-accent text, never the inherited cream — the D3 layer re-values
   --hp-red to the white accent, which washed .live/.new text to ~1.06:1 and the
   .hp-play glyph to 1:1. .soon goes solid surface-2 so photo backings can't wash it. */
html[data-theme="d3"] body.pv-home .hp-badge.live,
html[data-theme="d3"] body.pv-home .hp-badge.new{background:var(--d3-accent);color:var(--d3-on-accent)}
html[data-theme="d3"] body.pv-home .hp-badge.soon{background:var(--d3-surface-2);color:#FFFFFF}
html[data-theme="d3"] body.pv-home .hp-play{background:var(--d3-accent);color:var(--d3-on-accent)}
html[data-theme="d3"] body.pv-home .hp-chip.neu{background:var(--d3-surface-2);color:var(--d3-text-2)}

/* ---- Section heads: brick top rule, Fraunces, accent-text kickers ---- */
html[data-theme="d3"] body.pv-home .hp-shead{border-top:2px solid var(--d3-accent);padding-top:14px}
html[data-theme="d3"] body.pv-home .hp-shead h2{font-family:var(--d3-font-display);font-size:26px;font-weight:600;color:var(--d3-text)}
html[data-theme="d3"] body.pv-home .hp-shead .kick{color:var(--d3-accent-text);font-size:11px;letter-spacing:.2em}
html[data-theme="d3"] body.pv-home .hp-shead .more{color:var(--d3-accent-text)}
html[data-theme="d3"] body.pv-home .hp-shead .more a{color:var(--d3-accent-text)}
html[data-theme="d3"] body.pv-home section.hp-mod{margin-top:48px}

/* ---- Dense magazine grid below the fold: 12px gutters ---- */
html[data-theme="d3"] body.pv-home .hp-cards3,
html[data-theme="d3"] body.pv-home .hp-pods,
html[data-theme="d3"] body.pv-home .hp-up-grid,
html[data-theme="d3"] body.pv-home .hp-gcards,
html[data-theme="d3"] body.pv-home .hp-sport-grid,
html[data-theme="d3"] body.pv-home .hp-guides-grid{gap:12px}
html[data-theme="d3"] body.pv-home .hp-desk,
html[data-theme="d3"] body.pv-home .hp-vegas,
html[data-theme="d3"] body.pv-home .hp-closing,
html[data-theme="d3"] body.pv-home .hp-ticket-zone{gap:12px}
html[data-theme="d3"] body.pv-home .hp-top10{gap:12px}

/* ---- TONIGHT band (Tonight in Sports): inset well, brick rule, tabular data ---- */
html[data-theme="d3"] body.pv-home .hp-sports{
  background:var(--d3-inset);border:1px solid var(--d3-line);border-top:2px solid var(--d3-accent);
  border-radius:2px;padding:20px 22px;font-variant-numeric:tabular-nums}
html[data-theme="d3"] body.pv-home .hp-sg .sgh{color:var(--d3-text-3)}
html[data-theme="d3"] body.pv-home .hp-srow{border-top-color:var(--d3-line)}

/* ---- Cards / rows on surface-1 (var remap does the paint; these pin type) ---- */
html[data-theme="d3"] body.pv-home .hp-t10rank{color:var(--d3-accent);font-family:var(--d3-font-display)}
html[data-theme="d3"] body.pv-home .hp-t10card{color:var(--d3-text)}
html[data-theme="d3"] body.pv-home .hp-yours{background:var(--d3-surface-1);border:1px solid var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-ad{background:var(--d3-surface-2);border-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-ad .adbrand em{color:var(--d3-accent)}
html[data-theme="d3"] body.pv-home .hp-verse{background:var(--d3-inset);color:var(--d3-text)}
html[data-theme="d3"] body.pv-home .hp-breaking{background:var(--d3-accent);color:#000000}
html[data-theme="d3"] body.pv-home .hp-breaking h2,html[data-theme="d3"] body.pv-home .hp-breaking h2 a{color:#000000}

/* ---- Ticket: dark panel deepened to inset; the locked paper slip is untouched ---- */
html[data-theme="d3"] body.pv-home .hp-slip-panel{background:var(--d3-inset);border-color:var(--d3-line)}

/* ---- Footer ---- */
html[data-theme="d3"] body.pv-home .hp-footer{border-top:2px solid var(--d3-accent);background:var(--d3-ground)}
html[data-theme="d3"] body.pv-home .hp-wordmark em{color:#E10600}
html[data-theme="d3"] body.pv-home .hp-foot-base{border-top-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home .hp-foot-grid h4{color:#FFFFFF}
html[data-theme="d3"] body.pv-home .hp-foot-grid a{color:#A5ACAF}
html[data-theme="d3"] body.pv-home .hp-foot-grid a:hover{color:#FFFFFF}

/* D3 mobile fix (Task C, found in 390 proof): the scoped desktop hero grid
   above outranks the sheet's original <=1023px single-column collapse —
   restore it in scope so the hero stacks full-width on phones. */
@media (max-width:1023px){
  html[data-theme="d3"] body.pv-home .hp-hero{grid-template-columns:1fr}
}

/* ==== D3 HOMEPAGE REWORK 2026-10-15 — AURIX composition + anti-flat ====
   James's verdict on the first D3 homepage: "still really flat" — the old
   skeleton darkened. This block rebuilds the homepage's composition inside
   the same opt-in theme: the lead photo becomes the page surface
   (full-bleed, edge-to-edge), the headline sits ON the photo at magazine
   scale in heavy Fraunces with ONE italic serif accent line (the dek),
   a numbered image rail (01-04) rides the hero, Right Now becomes a
   layered board pulled up over the photo, the signup band becomes the
   ONE cream interruption, and below the fold the grids densify with a
   warm duotone grade on editorial photography (Loaded) while the
   TONIGHT band bleeds its brick rule across the whole viewport.
   Paint + one static rail only: every module, link and function from the
   before-inventory is untouched. Tokens unchanged. Rollback: restore
   home-v2.css.bak-d3rework-20261015 + index.html.bak-d3rework-20261015. */

/* 0. The 100vw breakouts below must never buy a horizontal scrollbar. */
html[data-theme="d3"] body.pv-home{overflow-x:clip}

/* 1. HERO — the photograph is the surface.
   The zone leaves the wrap and runs edge-to-edge; the hero takes a
   fixed cinematic height (it no longer stretches to the Right Now
   column's length — that stretch was the old hero's empty flatness). */
html[data-theme="d3"] body.pv-home.b-scope .hp-hero{
  display:block;position:relative;
  width:100vw;margin:10px 0 0 calc(50% - 50vw);padding:0}
html[data-theme="d3"] body.pv-home.b-scope section.hero,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero{
  min-height:clamp(600px,88vh,900px);border:0;border-radius:0;background:var(--d3-inset)}
/* Scrim, layer 1 (mood): a gradient across the WHOLE photo (the old D3
   painted a gradient only behind the text block, and the photo sat in a
   box). Deepens toward the type well; the top of the frame stays a
   photograph. */
html[data-theme="d3"] body.pv-home.b-scope section.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.14) 20%, rgba(0,0,0,.28) 38%,
    rgba(0,0,0,.52) 55%, rgba(0,0,0,.70) 72%,
    rgba(0,0,0,.80) 86%, rgba(0,0,0,.84) 100%)}
/* Scrim, layer 2 (the type well). PHONES (below 1024px): the well rides
   on .hp-lead-txt as the vertical gradient below -- the block spans the
   full hero width there, so it has no side edge to show. DESKTOP
   (1024px+): this block background is switched OFF in the min-width
   block beside the dek rules, and the well moves to section.hero::before
   as a full-surface gradient pool that fades in EVERY direction -- the
   block's straight right edge was the hard vertical line cutting the
   photo in James's 2026-10-15 23:01 laptop photo. The pool is sized for
   the worst pixel, not the average: combined with the mood layer it
   holds alpha >=.90 under the headline's first line and >=.99 under
   the dek/byline, and it is pure CSS on the hero template, so ANY lead
   photo the bake or the in-browser swap puts here inherits the blend.
   Hero/rail treatment record: ~/workspace/homepage-hero-rail-treatment-2026-10-15/. */
html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-txt{
  align-self:flex-start;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.40) 6%, rgba(0,0,0,.86) 14%,
    rgba(0,0,0,.925) 30%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.96) 100%);
  padding:84px clamp(20px,4vw,56px) 172px;max-width:1060px}
/* The kicker rides a solid plate (the breaking chip's sibling), so its
   small lifted-tint text never depends on the photo behind it:
   #E0684B on inset #0D0A07 = 5.9:1, photo-independent. */
html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker{
  display:inline-block;align-self:flex-start;background:var(--d3-inset);
  padding:6px 10px 5px;border-radius:2px;
  font-size:12.5px;letter-spacing:.34em}
html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker.is-breaking{
  padding:7px 12px 6px;font-size:13px;letter-spacing:.24em}
html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker.is-breaking::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#FFFFFF;margin-right:9px;vertical-align:1px;
  animation:hpD3Pulse 1.6s ease-in-out infinite}
@keyframes hpD3Pulse{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){
  html[data-theme="d3"] body.pv-home.b-scope section.hero .kicker.is-breaking::before{animation:none}}
/* Oversized mixed type: heavy Fraunces headline... */
html[data-theme="d3"] body.pv-home.b-scope section.hero h1,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero h1{
  font-size:clamp(3.1rem,4.9vw,4.75rem);font-weight:900;line-height:.99;
  letter-spacing:-.015em;max-width:1000px;margin:16px 0 0}
html[data-theme="d3"] body.pv-home.b-scope section.hero h1 a{font-weight:900}
/* ...and the dek as the ONE italic serif accent line (AURIX move).
   Clamped to two lines so the cover composition holds at any story
   length; the full dek text stays in the DOM and on the article page. */
html[data-theme="d3"] body.pv-home.b-scope section.hero .dek,
html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero .dek{
  font-family:var(--d3-font-display);font-style:italic;font-weight:560;
  font-size:clamp(1.08rem,1.55vw,1.42rem);line-height:1.32;
  max-width:56ch;margin-top:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1024px){
  html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-txt{
    max-width:min(1060px,calc(100vw - 380px));background:none}
  /* Desktop type well (see layer-2 note above; v3, field-corrected):
     the well's own vertical gradient -- the measured composite the
     approved composition was built on -- painted on the SECTION, with
     a horizontal mask melting its right side away between 60% and 97%
     of the frame. Every glyph keeps the old block well's backing
     (combined alpha >=.90 under the headline, >=.99 under dek/byline);
     the melt means the darkening can never end at a straight edge, on
     any photograph, from the bake or the in-browser swap alike. (The
     v2 radial pool under-delivered in the dek band over bright photos;
     the masked linear well does not depend on radial geometry.) */
  html[data-theme="d3"] body.pv-home.b-scope section.hero::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;display:block;
    /* z-index:2 is load-bearing: figure.hp-lead-art sits at z-index:1,
       so at z-index:1 this well lost the same-layer tree-order tie and
       the photo painted OVER it (the v2/v3 field failure). At 2 the
       well covers the photo; .hp-lead-txt is also z-index:2 but follows
       in tree order, so the glyphs stay on top of the well. */
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.40) 6%, rgba(0,0,0,.86) 14%,
      rgba(0,0,0,.925) 30%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.96) 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 97%);
    mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 97%)}
}
@media (max-width:1023px){
  html[data-theme="d3"] body.pv-home.b-scope section.hero,
  html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero{
    min-height:clamp(540px,86svh,780px)}
  html[data-theme="d3"] body.pv-home.b-scope section.hero .hp-lead-txt{
    padding:72px 20px 96px;max-width:none}
  html[data-theme="d3"] body.pv-home.b-scope section.hero h1,
  html[data-theme="d3"] body.pv-has-breaking.pv-home.b-scope section.hero h1{
    font-size:clamp(2.5rem,11vw,3.1rem);line-height:1.0;max-width:none}
}

/* 2. NUMBERED IMAGE RAIL (the AURIX right rail, phone-first).
   Static markup in index.html, real destinations only:
   01 Scores /sports/ · 02 Pound for Pound /sports/fight/boxing/pound-for-pound/
   03 The Ticket /sports/the-ticket/ · 04 Live TV /live/ · 05 News /news/.
   (Rail revision 2026-10-15, James: Ticket gets real artwork — Wynn
   sportsbook photo; "Tonight" relabeled Live TV, its true destination;
   News added as the fifth card. Brick field card retired.)
   Mobile: snap-scroll row pulled up over the hero's lower edge.
   Desktop: vertical rail riding the photo's right side. */
html[data-theme="d3"] body.pv-home.b-scope .hp-xrail{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:6px 16px 12px;margin:-58px 0 0;position:relative;z-index:6}
html[data-theme="d3"] body.pv-home.b-scope .hp-xrail::-webkit-scrollbar{display:none}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard{
  flex:0 0 218px;scroll-snap-align:start;position:relative;display:block;
  height:138px;overflow:hidden;border-radius:2px;text-decoration:none;
  background:var(--d3-surface-1);box-shadow:0 18px 38px rgba(0,0,0,.5)}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.06) brightness(.94)}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard--ticket img{object-position:center 26%}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.93) 100%)}
html[data-theme="d3"] body.pv-home.b-scope .hp-xnum{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--d3-font-display);font-weight:800;font-size:15px;line-height:1;
  color:var(--d3-text);background:rgba(0,0,0,.66);padding:4px 8px;border-radius:2px}
html[data-theme="d3"] body.pv-home.b-scope .hp-xlab{
  position:absolute;left:12px;bottom:11px;z-index:2;max-width:75%;
  font-family:var(--d3-font-ui);font-weight:800;font-size:13px;line-height:1.25;
  letter-spacing:.12em;text-transform:uppercase;color:var(--d3-text)}
html[data-theme="d3"] body.pv-home.b-scope .hp-xarr{
  position:absolute;right:12px;bottom:9px;z-index:2;
  font-size:16px;line-height:1;color:var(--d3-text)}
@media (min-width:1024px){
  html[data-theme="d3"] body.pv-home.b-scope .hp-xrail{
    position:absolute;top:clamp(96px,15vh,150px);
    right:max(24px,calc((100vw - 1328px)/2));
    width:288px;flex-direction:column;overflow:visible;gap:8px;
    margin:0;padding:0;scroll-snap-type:none}
  html[data-theme="d3"] body.pv-home.b-scope .hp-xcard{
    flex:0 0 auto;width:100%;height:92px}
  /* Rail glass (James, 2026-10-15 23:01 PT: the five options "get lost
     in that picture... a blur back there or something"): a frosted
     panel behind the card stack -- backdrop blur + warm tint, family
     of the Right Now board's glass -- with a radial mask melting its
     edges into the photo, so the rail reads as one deliberate unit
     over bright or dark photography alike. Cards keep their own
     scrims; labels/numbers stay photo-independent. */
  html[data-theme="d3"] body.pv-home.b-scope .hp-xrail::before{
    content:"";position:absolute;inset:-16px -14px;z-index:-1;border-radius:8px;
    background:rgba(0,0,0,.46);
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 24px 60px rgba(0,0,0,.42);
    -webkit-mask-image:radial-gradient(115% 112% at 50% 50%,#000 58%,transparent 98%);
    mask-image:radial-gradient(115% 112% at 50% 50%,#000 58%,transparent 98%)}
}

/* 3. RIGHT NOW — a layered board over the photo (ScorePulse depth),
   no longer a flat column stretching the hero. Groups become columns
   on wide screens; every row, link and state is the existing module's. */
html[data-theme="d3"] body.pv-home.b-scope #hpNow{
  background:rgba(16,16,16,.97);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid var(--d3-line);border-top:2px solid var(--d3-accent);border-radius:2px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.4);
  padding:22px 24px;margin-top:20px;position:relative;z-index:5}
@media (min-width:1024px){
  html[data-theme="d3"] body.pv-home.b-scope #hpNow{
    width:min(1180px,calc(100vw - 64px));margin:-120px auto 0}
  html[data-theme="d3"] body.pv-home.b-scope #hpNowRows{
    display:grid;grid-template-columns:repeat(3,1fr);gap:4px 30px;align-items:start}
}
@media (min-width:700px) and (max-width:1023px){
  html[data-theme="d3"] body.pv-home.b-scope #hpNowRows{
    display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;align-items:start}
}

/* 4. THE CREAM BAND — AURIX's light interruption, used once.
   The signup band (#hpYoursBand) leaves the wrap and cuts across the
   whole page in cream with dark ink. Form, states and function are the
   existing module's; this is paint only. Pairings on cream #F4EFE6:
   ink #000000 = 15.7:1 · brick #A5ACAF = 4.77:1 · deep brick #6E7478 =
   5.8:1 · ink at 82% = ~9.6:1 · ink at 66% = ~5.6:1. */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--d3-text);color:#000000;
  border:0;border-radius:0;box-shadow:none;
  padding:44px max(20px,calc((100vw - 1328px)/2 + 4px)) 48px}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand h2,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand h3,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand h4{color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand p{color:rgba(0,0,0,.82)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .micro,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .flab{color:rgba(0,0,0,.66)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand a:not(.hp-btn){color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .hp-ghost{
  color:#000000;border-color:rgba(0,0,0,.45)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .hp-form input{
  background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.45);color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .hp-form input::placeholder{
  color:rgba(0,0,0,.62)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .err{color:#000000}

/* 4b. CREAM BAND, SIGNED-IN STATE — legibility repair (2026-10-15).
   The cream paint in (4) was written for the signup state; the signed-in
   module (#hpYoursUser) renders into the same band with text colors from
   the d3 var remap (cream ink), which vanished on the cream ground and
   left the team rows unreadable. These rules give the signed-in rows the
   band's own documented ink pairings until the band's design pass lands. */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-yrow{border-top-color:rgba(0,0,0,.16)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-yrow b{color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-yrow .sub{color:rgba(0,0,0,.66)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-yrow .sub .odds{color:#000000}

/* 5. BELOW THE FOLD — Loaded density + grade.
   Gutters tighten 12px -> 8px; section heads get heavier; editorial
   card photography takes a warm duotone grade (filter + brick overlay
   tint). NEVER graded: team logos, the Ticket slip, partner art,
   thumbnails in Right Now, and the lead news photo itself. */
html[data-theme="d3"] body.pv-home .hp-cards3,
html[data-theme="d3"] body.pv-home .hp-pods,
html[data-theme="d3"] body.pv-home .hp-up-grid,
html[data-theme="d3"] body.pv-home .hp-gcards,
html[data-theme="d3"] body.pv-home .hp-sport-grid,
html[data-theme="d3"] body.pv-home .hp-guides-grid,
html[data-theme="d3"] body.pv-home .hp-desk,
html[data-theme="d3"] body.pv-home .hp-vegas,
html[data-theme="d3"] body.pv-home .hp-closing,
html[data-theme="d3"] body.pv-home .hp-ticket-zone{gap:8px}
html[data-theme="d3"] body.pv-home .hp-top10{gap:10px}
html[data-theme="d3"] body.pv-home .hp-shead h2{font-size:30px;font-weight:800;letter-spacing:-.01em}
html[data-theme="d3"] body.pv-home .hp-t10poster img,
html[data-theme="d3"] body.pv-home .hp-wcard .media img,
html[data-theme="d3"] body.pv-home .hp-wmedia img,
html[data-theme="d3"] body.pv-home .hp-pod-media img,
html[data-theme="d3"] body.pv-home .hp-ucard .media img,
html[data-theme="d3"] body.pv-home .hp-game-media img,
html[data-theme="d3"] body.pv-home .hp-feat img,
html[data-theme="d3"] body.pv-home .hp-vrow .strip img,
html[data-theme="d3"] body.pv-home .hp-gmedia img,
html[data-theme="d3"] body.pv-home .hp-rew img,
html[data-theme="d3"] body.pv-home .hp-verse-img{
  filter:saturate(.82) contrast(1.07) brightness(.96)}
html[data-theme="d3"] body.pv-home .hp-t10poster,
html[data-theme="d3"] body.pv-home .hp-game-media{position:relative}
html[data-theme="d3"] body.pv-home .hp-t10poster::after,
html[data-theme="d3"] body.pv-home .hp-wcard .media::after,
html[data-theme="d3"] body.pv-home .hp-pod-media::after,
html[data-theme="d3"] body.pv-home .hp-ucard .media::after,
html[data-theme="d3"] body.pv-home .hp-game-media::after,
html[data-theme="d3"] body.pv-home .hp-gmedia::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(0,0,0,.16),rgba(0,0,0,0) 46%,rgba(0,0,0,.20));
  mix-blend-mode:overlay}
html[data-theme="d3"] body.pv-home .hp-wcard h3,
html[data-theme="d3"] body.pv-home .hp-gcards h3,
html[data-theme="d3"] body.pv-home .hp-ucard h3,
html[data-theme="d3"] body.pv-home .hp-pod h3{font-weight:800;letter-spacing:-.01em}

/* 6. TONIGHT band — the accent field bleeds off the page edge.
   The sports band leaves the wrap: surface runs viewport-wide and the
   brick rule cuts across the entire screen (Loaded's bleed move).
   Content width inside still aligns to the wrap. */
html[data-theme="d3"] body.pv-home.b-scope #hpSports{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--d3-surface-1);
  border:0;border-top:3px solid var(--d3-accent);border-bottom:1px solid var(--d3-line);
  border-radius:0;box-shadow:0 24px 50px rgba(0,0,0,.35);
  padding:26px max(22px,calc((100vw - 1328px)/2 + 6px)) 30px}

/* ---- REWORK PASS 2 (James, 2026-10-15 18:33 PT — colors right,
   photo present) ----
   (a) The hero byline's ::before was a solid brick disc that read as a
   broken avatar. Gone. Founder-tip bylines carry the real portrait
   instead (homepage-lead.js adds img.hp-av for James Moore — the same
   Nipsey portrait the article pages use); desk bylines are clean text.
   (b) Right Now team chips arrived with inline official team colors
   (Dodgers blue #005a9c and friends) colliding with the palette —
   inside the D3 homepage they take palette surfaces; team identity
   stays in the matchup text beside them. (text-2 on surface-2 = 8.4:1;
   the trailing team's .mut chip in text-3 = 4.9:1.)
   (c) The cream band's signup form kept its dark panel — on cream the
   panel goes transparent so label, input and microcopy read ink-on-
   cream like the rest of the band.
   (d) The scrim above was lightened at the top of the frame so the
   lead photograph stays present under the type; re-measured against
   both real hero photos — worst case 6.1:1 (REPORT.md). */
html[data-theme="d3"] body.pv-home.b-scope section.hero .byline::before{display:none}
html[data-theme="d3"] body.pv-home .hp-av{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block}
html[data-theme="d3"] body.pv-home.b-scope #hpNow .hp-chip{
  background:var(--d3-surface-2) !important;color:var(--d3-text-2) !important;
  border:1px solid var(--d3-line);border-radius:2px}
html[data-theme="d3"] body.pv-home.b-scope #hpNow .hp-chip.mut{color:var(--d3-text-3) !important}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand .hp-form{
  background:transparent;border-color:rgba(0,0,0,.28);box-shadow:none}
/* ==== /D3 HOMEPAGE REWORK ==== */

/* ==== HERO PHOTO CREDIT — OFF THE PHOTO (James, 2026-10-15 22:13 PT) ====
   The lead photo's credit used to ride the image as a dark chip at the
   top-right of the hero ("it catches my eye before the picture does").
   It now renders as .hp-hero-credit: a fine-print line BELOW the hero
   zone, emitted by the bake (set-lead.py render_hero_block) right after
   the hero section and kept in sync by js/homepage-lead.js on swaps.
   The chip is display:none in this theme so no stale bake or other
   writer can put a credit back on the photo. The line is positioned at
   the foot of the hero zone (below the photo, the rail and the Right
   Now board — the overlaps own the hero's lower edge by design, so the
   credit lives past them) and the zone reserves its room via :has, so
   a lead without a credit leaves no gap. Color: --d3-text-3 on the
   page ground = 6.16:1 (design-tokens-d3.css), over the 4.5:1 floor. */
html[data-theme="d3"] body.pv-home.b-scope section.hero figure.hp-lead-art figcaption{display:none}
html[data-theme="d3"] body.pv-home.b-scope .hp-hero:has(> .hp-hero-credit){margin-bottom:36px}
html[data-theme="d3"] body.pv-home.b-scope .hp-hero-credit{
  position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:8;
  margin:0;padding:0 max(20px,calc((100vw - 1328px)/2 + 6px));
  font-family:var(--d3-font-ui);font-size:11.5px;line-height:1.5;
  letter-spacing:.02em;color:var(--d3-text-3);text-align:left}
/* ==== /HERO PHOTO CREDIT ==== */

/* RAIDERS ROLE SWAP (2026-10-16): the #hpYoursBand ground is now silver
   (background:var(--d3-text) follows the text token's new role); its soft
   ink step is re-paired for the silver ground (5.4:1). */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand{--hp-ink-soft:#33373B}
/* ==========================================================================
   MARATHON FONT — HOMEPAGE CONVERSION (2026-10-16, font Phase 1):
   'Previously Display' is Regular 400 ONLY. Everything the display tokens
   bring into the face gets weight 400 and upright style — no faux bold,
   no synthesized oblique, ever. Colors are NOT set here: the Raiders
   token mapping owns color (text silver via --d3-text, accents white).
   ========================================================================== */
html:root[data-theme="d3"]{--d3-font-display:"Previously Display",Georgia,"Times New Roman",serif}
html[data-theme="d3"] body.pv-home.b-scope section.hero h1,
html[data-theme="d3"] body.pv-home.b-scope section.hero h1 a{font-weight:400}
/* Hero dek: it was the one italic serif accent line (italic, weight 560).
   The face has no italic — the dek keeps its serif-accent role in the
   face's own regular: upright, 400. (Stated dek choice, font Phase 1.) */
html[data-theme="d3"] body.pv-home.b-scope section.hero .dek{font-style:normal;font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-shead h2{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-wcard .wc-title a,
html[data-theme="d3"] body.pv-home.b-scope .hp-lrow h3 a,
html[data-theme="d3"] body.pv-home.b-scope .hp-trow h3 a{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-trow .tn{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-pod h3{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-yours h2,
html[data-theme="d3"] body.pv-home.b-scope .hp-breaking h2{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-t10rank{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-tnum{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-mrow .rk{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-songtt{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-xnum{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-verse .bars{font-style:normal;font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-ad.adbrand{font-weight:400}
html[data-theme="d3"] body.pv-home.b-scope .hp-wordmark{font-family:'Previously Display',Georgia,serif;font-weight:400}
/* d3 component insurance (masthead/lead classes, if emitted on home):
   their italic accent em must never synthesize an oblique from this face. */
.d3-display em,.d3-page-title em,.d3-lead-headline em{font-style:normal;font-weight:400}
.d3-page-title,.d3-lead-headline{font-weight:400}
/* Ticket slip: NOT converted in this phase — the slip is a locked paper
   artifact and converts with the Ticket family phase. Pinned back to
   Fraunces so the token flip above cannot touch it. */
html[data-theme="d3"] body.pv-home.b-scope .hp-slip-word{font-family:'Fraunces',Georgia,serif}
/* MARATHON FONT — PHASE 1 FIX: homepage masthead wordmark (46px desktop
   bible wordmark) carries weight 700 from its legacy rule — the face is
   Regular 400 only. */
html[data-theme="d3"] body.pv-home.b-scope .b-wordmark{font-weight:400}

/* ---- YOUR NEXT THREE DAYS — rolling strip in the signed-in band
   (2026-10-16). Day groups stacked inside the episodes column; paint
   rides the band's own pairings: base theme via --hp vars, the d3
   silver band via black-ink overrides (the block 4b pattern). ---- */
.hp-strip-day{margin-top:14px}
.hp-strip-day:first-child{margin-top:2px}
.hp-strip-dhead{display:flex;align-items:baseline;gap:9px;margin:0 0 2px;padding-bottom:5px;border-bottom:1px solid var(--hp-rule-idle)}
.hp-strip-dname{font-family:var(--hp-font-label);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-ink)}
.hp-strip-ddate{font-family:var(--hp-font-mono);font-size:11.5px;color:var(--hp-ink-faint)}
.hp-strip-day.is-today .hp-strip-dhead{border-bottom:2px solid #E10600}
.hp-strip-ep{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--hp-rule-idle);text-decoration:none;min-width:0}
.hp-strip-ep img,.hp-strip-noimg{width:44px;height:66px;object-fit:cover;border-radius:2px;flex:none;background:var(--hp-rule-idle)}
.hp-strip-noimg{display:flex;align-items:center;justify-content:center;font-family:var(--hp-font-serif);font-weight:700;font-size:18px;color:var(--hp-ink-faint)}
.hp-strip-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hp-strip-main b{color:var(--hp-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-strip-main .sub{font-family:var(--hp-font-mono);font-size:11.5px;color:var(--hp-ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-strip-main .time{font-size:12px;font-weight:700;color:var(--hp-ink)}
.hp-strip-quiet{font-family:var(--hp-font-serif);font-style:italic;font-size:13.5px;color:var(--hp-ink-faint);margin:0;padding:8px 0 2px}
.hp-strip-note{font-size:13.5px;color:var(--hp-ink-faint);margin:6px 0 0}
.hp-strip-more{font-size:12px;color:var(--hp-ink-faint);margin:6px 0 0}
.hp-strip-foot{margin:12px 0 0;font-size:13px}
/* Your Previously — Today line (2026-10-16): rendered by home-v2.js
   only when the member has something today (episode / liked team's
   game / liked title releasing); one line under the marquee, taps
   through to /account/upnext/. Absent entirely otherwise. */
.hp-today{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:10px 2px 0;border-top:1px solid var(--hp-line,rgba(255,255,255,.14));text-decoration:none}
.hp-today-tag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E10600}
.hp-today-text{font-size:14.5px;font-weight:600;color:var(--hp-ink)}
.hp-today-tail{font-weight:400;color:var(--hp-ink-faint)}
.hp-today-more{font-size:12.5px;color:var(--hp-ink-faint)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-today{border-top-color:rgba(0,0,0,.30)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-today-text{color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-today-tail,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-today-more{color:rgba(0,0,0,.66)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-dhead{border-bottom-color:rgba(0,0,0,.30)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-day.is-today .hp-strip-dhead{border-bottom:2px solid #E10600}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-ep{border-bottom-color:rgba(0,0,0,.12)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-dname,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-main b,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-main .time{color:#000000}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-ddate,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-main .sub,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-quiet,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-note,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand #hpYoursUser .hp-strip-more{color:rgba(0,0,0,.66)}

/* ==========================================================================
   YOUR PREVIOUSLY — THE MARQUEE intro (2026-10-16, James's pick C).
   Replaces the band masthead: a cinematic strip of the member's #1
   thing (server art ladder in home-personal), gradient-only blend
   into black, wordmark top-left with the red period, eyebrow +
   greeting overlaid in silver, the member's name in white. Thin
   data -> .is-fallback: mock A's masthead treatment on black.
   The strip bleeds to the band's edges: under d3 the band
   (#hpYoursBand) pads 44px top / max(20px,(100vw-1328px)/2+4px)
   sides; negative margins cancel exactly that, and the text inset
   re-applies the same formula so type aligns with the columns.
   Colors are the locked Raiders roles; the face is 'Previously
   Display' (Marathon Long Run, Regular 400 ONLY — no faux bold).
   ========================================================================== */
.hp-marquee{position:relative;height:254px;overflow:hidden;background:#000;
  margin:-44px calc(-1 * max(20px, calc((100vw - 1328px)/2 + 4px))) 26px}
.hp-mq-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 60%;filter:brightness(.70) saturate(.92)}
.hp-marquee.is-cover .hp-mq-photo{object-position:center;transform:scale(1.7);
  filter:blur(22px) brightness(.50) saturate(.90)}
.hp-mq-scrim{position:absolute;inset:0;background:
  linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.74) 34%, rgba(0,0,0,0) 64%),
  linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.88) 80%, #000000 100%)}
.hp-mq-top{position:absolute;top:15px;left:20px;
  font-family:'Previously Display',Georgia,'Times New Roman',serif;font-weight:400;
  font-size:17px;color:#A5ACAF}
.hp-mq-dot{color:#E10600}
.hp-mq-text{position:absolute;left:20px;right:20px;bottom:15px}
.hp-mq-eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:#A5ACAF;margin-bottom:9px}
.hp-mq-greet{font-family:'Previously Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:22px;line-height:1.12;color:#A5ACAF}
.hp-mq-name{font-family:'Previously Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:38px;line-height:1.06;color:#FFFFFF}
@media (min-width:900px){
  .hp-marquee{height:432px}
  .hp-mq-top{top:24px;font-size:19px;left:max(20px, calc((100vw - 1328px)/2 + 4px))}
  .hp-mq-text{left:max(20px, calc((100vw - 1328px)/2 + 4px));right:auto;bottom:26px}
  .hp-mq-greet{font-size:27px}
  .hp-mq-name{font-size:52px}
}
/* fallback — mock A's masthead on black */
.hp-marquee.is-fallback{height:auto}
.hp-mq-a{padding:38px 20px 30px}
.hp-mq-word{font-family:'Previously Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:57px;line-height:1.01;letter-spacing:-.01em;color:#A5ACAF}
.hp-mq-rule{height:2px;background:#FFFFFF;margin:24px 0 17px}
.hp-mq-agreet{font-family:'Previously Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:21px;line-height:1.25;color:#959DA2}
.hp-mq-aname{color:#A5ACAF}
@media (min-width:900px){
  .hp-mq-a{padding:58px max(20px, calc((100vw - 1328px)/2 + 4px)) 40px}
  .hp-mq-word{font-size:98px}
  .hp-mq-rule{margin:32px 0 22px}
  .hp-mq-agreet{font-size:27px}
}

/* ---- Picked for you v2 (2026-10-16): dismiss x ---- */
.hp-pick-main{display:flex;gap:10px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit}
.hp-pick-x{flex:none;align-self:flex-start;width:32px;height:32px;margin:-3px -3px 0 2px;padding:0;border:0;border-radius:2px;background:transparent;color:#8C9399;font-size:17px;line-height:32px;text-align:center;cursor:pointer}
.hp-pick-x:hover{background:rgba(255,255,255,.10);color:#FFFFFF}
.hp-pick-x:focus-visible{outline:2px solid #FFFFFF;outline-offset:1px}
.hp-pick-x:disabled{opacity:.4;cursor:default}

/* ALL-RED WORDMARK (James, 2026-10-16 06:22 PT): homepage footer lockup
   and the house-ad brand lockup render entirely in signal red #E10600
   — letters and period. */
body.pv-home .hp-wordmark{color:#E10600}
body.pv-home .hp-wordmark em{color:#E10600}
.hp-ad .adbrand{color:#E10600}
.hp-ad .adbrand em{color:#E10600}

/* ---- Band slot: Stats Hub rotation (2026-10-16, per-member pref) ---- */
/* The hub rotator's own geometry, re-paired to the locked Raiders roles
   inside the band namespace: surface-1 panel, silver text, white accents. */
.hp-bs{background:#101010;border:1px solid #2C2C2C;border-radius:10px;padding:10px 12px 12px}
.hp-bs-tabs{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.hp-bs-tab{background:none;border:none;border-bottom:2px solid transparent;padding:4px 1px;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8C9399;cursor:pointer}
.hp-bs-tab.is-on{color:#FFFFFF;border-bottom-color:#FFFFFF}
.hp-bs-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8C9399;margin:4px 0 6px}
.hp-bs-row{display:flex;align-items:center;gap:9px;padding:7px 2px;border-top:1px solid #2C2C2C;text-decoration:none;color:#A5ACAF}
.hp-bs-cat + .hp-bs-row{border-top:none}
.hp-bs-rank{font-family:var(--d3-font-display,Georgia,serif);font-weight:800;font-size:14px;color:#FFFFFF;width:16px;text-align:right;flex:none}
.hp-bs-logo{width:22px;height:22px;object-fit:contain;flex:none}
.hp-bs-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#A5ACAF}
.hp-bs-name em{font-style:normal;font-weight:600;font-size:11px;color:#8C9399;margin-left:4px}
.hp-bs-val{margin-left:auto;font-size:12px;color:#8C9399;white-space:nowrap;flex:none}
.hp-bs-val b{font-size:14px;color:#FFFFFF}
.hp-bs-teams{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #2C2C2C}
.hp-bs-teams-k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8C9399}
.hp-bs-team{display:flex;align-items:center;gap:6px;text-decoration:none;color:#A5ACAF;font-size:12.5px;font-weight:600}
.hp-bs-team img{width:20px;height:20px;object-fit:contain}
.hp-bs-team b{font-family:var(--d3-font-display,Georgia,serif);color:#FFFFFF}
.hp-bs-updating{font-size:13px;color:#8C9399;padding:6px 0}
.hp-bs-updating a{color:#FFFFFF;font-weight:700}

/* ALL-RED WORDMARK STRAGGLER FIX (James, 2026-10-16 06:22 PT): the
   house-ad brand period at its winning specificity — the whole
   lockup is signal red #E10600. */
html[data-theme="d3"] body.pv-home .hp-ad .adbrand em{color:#E10600}
body.pv-home .hp-ad .adbrand em{color:#E10600}

/* ALL-RED WORDMARK STRAGGLER FIX 2 (James, 2026-10-16 06:22 PT): the
   Ticket slip's brand word renders in signal red #E10600. */
.hp-slip-word{color:#E10600}

/* ---- News for you: rotating story module in the band (2026-10-16) ---- */
/* A black inset strip in the marquee's blend language (no card border,
   no hard edges): the hero photo rides the left, melting into black
   through a gradient; the headline sits on black in the display face.
   Fixed stage height at every breakpoint — rotation never shifts the
   page. Layers crossfade; hidden layers are unfocusable + inert. */
.hp-newsrot-wrap{margin-top:20px}
.hp-newsrot-wrap .hp-label{margin-bottom:8px}
.hp-newsrot{position:relative;height:124px;background:#000;overflow:hidden}
.hp-nr-layer{position:absolute;inset:0;display:flex;align-items:stretch;text-decoration:none;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hp-nr-layer.is-on{opacity:1;pointer-events:auto}
.hp-nr-media{position:relative;flex:none;width:132px;overflow:hidden;background:#101010}
.hp-nr-media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92) saturate(.95)}
.hp-nr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0) 52%, #000 100%)}
.hp-nr-text{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:12px 16px 12px 14px;min-width:0}
.hp-nr-sec{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8C9399}
.hp-nr-head{font-family:'Previously Display',Georgia,'Times New Roman',serif;font-weight:400;font-size:19px;line-height:1.22;color:#FFFFFF;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:700px){
  .hp-newsrot{height:150px}
  .hp-nr-media{width:216px}
  .hp-nr-head{font-size:23px}
}
@media (min-width:1024px){
  .hp-newsrot{height:168px}
  .hp-nr-media{width:264px}
  .hp-nr-head{font-size:26px}
}
@media (prefers-reduced-motion: reduce){
  .hp-nr-layer{transition:none}
}

/* Coming Soon rail tile (2026-10-16): backdrop variant in a wide slot —
   focal bias toward upper-center so faces/titles survive the crop;
   typographic fail-closed state when no HD premiere art qualifies. */
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard--cs img{object-position:center 30%}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard--text{
  background:linear-gradient(160deg,#1b1b1b 0%,#000 70%)}
html[data-theme="d3"] body.pv-home.b-scope .hp-xcard--text .hp-xlab{
  font-family:var(--d3-font-display);font-size:19px;letter-spacing:.1em}

/* 4c. MEMBER BAND ON HOUSE BLACK (2026-10-16) —
   Blocks 4/4b paint #hpYoursBand background:var(--d3-text) as a light
   interruption; under the current tokens --d3-text is silver #A5ACAF,
   so the SIGNED-IN member area rendered as a silver slab with black
   ink forced onto it (and the white .hp-label spans vanished on the
   silver). For the signed-in state only — the band whose #hpYoursUser
   is shown — the band takes the house ground and the module's own
   dark-scheme ink vars, the same values its cards, rows and labels
   already carry everywhere else on this page. The signed-out signup
   band (blocks 4/4b) is untouched. */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])){
  background:var(--d3-ground);color:var(--d3-text)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) h2,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) h3,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) h4{color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) p{color:var(--hp-ink-dim)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) .micro,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) .flab{color:var(--hp-ink-faint)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) a:not(.hp-btn){color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) .hp-ghost{
  color:var(--d3-text);border-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-yrow{border-top-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-yrow b{color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-yrow .sub{color:var(--hp-ink-faint)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-yrow .sub .odds{color:var(--hp-accent-deep)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-today{border-top-color:var(--hp-line,rgba(255,255,255,.14))}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-today-text{color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-today-tail,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-today-more{color:var(--hp-ink-faint)}

/* ==== PV FLOAT (James, 2026-10-16 17:54 PT) — NO OUTLINES, FLOATING ====
   Fleet rule from James: module definition comes from gradient blend +
   soft shadow ONLY. No border or outline on any module — a rounded
   corner with a hard outline is still a hard edge. This block removes
   the tray paint (fill + border + hard shadow) from the homepage list /
   panel modules and the card family, and gives groupings a restrained
   STATIC float: soft gradient surfaces that melt into the page black,
   diffuse shadow, feathered halo. No motion is added anywhere.
   Also carries the BREAKING BAND defect fix: the band painted
   background:var(--d3-accent), which under the current tokens is
   #FFFFFF — a white box whose dek kept the cream ink of the old red
   ground (invisible) and which never carried the story's artwork.
   The band now floats on the page, art-led, all ink AA on black. */

/* -- section headers sit on the page: the hard top rule is gone -- */
html[data-theme="d3"] body.pv-home .hp-shead{border-top:0}

/* -- Right Now: tray dissolved into a feathered halo over the page.
      The surface rides a ::before whose mask melts its edges into the
      ground (the same blend language as the rail scrim above), so the
      board hovers with no outline at any width. -- */
html[data-theme="d3"] body.pv-home.b-scope #hpNow{
  background:transparent;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme="d3"] body.pv-home.b-scope #hpNow::before{
  content:"";position:absolute;inset:-4px -4px;z-index:-1;border-radius:3px;
  background:rgba(16,16,16,.94);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 4px 18px rgba(0,0,0,.35);
  -webkit-mask-image:radial-gradient(118% 114% at 50% 46%,#000 60%,transparent 98%);
  mask-image:radial-gradient(118% 114% at 50% 46%,#000 60%,transparent 98%)}

/* -- Tonight in Sports: the full-bleed band keeps its bleed but its
      hard white top rule is gone and the surface fades in/out of the
      page black; the inner scoreboard well loses its outline and
      floats on a diffuse shadow. -- */
html[data-theme="d3"] body.pv-home.b-scope #hpSports{
  border-top:0;border-bottom:0;box-shadow:none;
  background:linear-gradient(180deg,rgba(16,16,16,0) 0,#101010 46px,#101010 calc(100% - 46px),rgba(16,16,16,0) 100%)}
html[data-theme="d3"] body.pv-home .hp-sports{
  border:0;background:linear-gradient(180deg,#0a0a0a,#060606);
  box-shadow:0 22px 48px rgba(0,0,0,.42)}

/* -- Trending: panel outline gone; a faint gradient lift + shadow -- */
html[data-theme="d3"] body.pv-home .hp-trend{
  border:0;background:linear-gradient(180deg,rgba(27,27,27,.55),rgba(16,16,16,.32));
  box-shadow:0 22px 48px rgba(0,0,0,.4)}

/* -- Card family: outlines off, surfaces and art untouched, defined
      by a soft diffuse shadow alone -- */
html[data-theme="d3"] body.pv-home .hp-wcard,
html[data-theme="d3"] body.pv-home .hp-pod,
html[data-theme="d3"] body.pv-home .hp-ucard,
html[data-theme="d3"] body.pv-home .hp-game-card,
html[data-theme="d3"] body.pv-home .hp-mlead,
html[data-theme="d3"] body.pv-home .hp-guides .hp-gcard,
html[data-theme="d3"] body.pv-home .hp-epcard,
html[data-theme="d3"] body.pv-home .hp-pick{
  border:0;box-shadow:0 16px 38px rgba(0,0,0,.38)}

/* -- Sign-Off verse + Partner: outlines off, own grounds kept -- */
html[data-theme="d3"] body.pv-home .hp-verse{
  border:0;box-shadow:0 22px 48px rgba(0,0,0,.4)}
html[data-theme="d3"] body.pv-home .hp-partner{
  border:0;box-shadow:0 22px 48px rgba(0,0,0,.4)}

/* -- BREAKING BAND (defect fix): no white box, no outline. The story's
      artwork leads on the left and melts into the black through a
      gradient (the page's own newsrot blend); headline white, dek
      silver #A5ACAF (8.9:1 on black), BREAKING chip in signal red. -- */
body.pv-home .hp-breaking{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  color:#A5ACAF;padding:0;margin-top:26px;
  display:flex;gap:18px;align-items:stretch}
html[data-theme="d3"] body.pv-home .hp-breaking{background:transparent;color:#A5ACAF}
body.pv-home .hp-breaking .bk{
  background:#E10600;color:#FFFFFF;border:0;border-radius:2px}
html[data-theme="d3"] body.pv-home .hp-breaking .bk{background:#E10600;color:#FFFFFF;border:0}
body.pv-home .hp-breaking h2,
body.pv-home .hp-breaking h2 a{color:#FFFFFF}
html[data-theme="d3"] body.pv-home .hp-breaking h2,
html[data-theme="d3"] body.pv-home .hp-breaking h2 a{color:#FFFFFF}
body.pv-home .hp-breaking p{color:#A5ACAF}
.hp-breaking-art{position:relative;flex:0 0 34%;max-width:340px;min-height:150px;
  overflow:hidden;background:#101010;display:block}
.hp-breaking-art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.hp-breaking-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,0) 52%,rgba(0,0,0,.92) 100%),
             linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 46%)}
.hp-breaking-txt{min-width:0;padding:4px 0;align-self:center}
@media (max-width:699px){
  body.pv-home .hp-breaking{flex-direction:column;gap:12px}
  .hp-breaking-art{flex:none;max-width:none;width:100%;aspect-ratio:16/9;min-height:0}
  .hp-breaking-art::after{
    background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 42%)}
  .hp-breaking-txt{align-self:auto}
}

/* -- Stats Hub band card: outline gone; FOLDED BY DEFAULT (James,
      2026-10-16 17:56 PT — "my little stats" takes too much room
      sitting open). The header row is the toggle; the leaders fold
      away beneath it and open on tap/click with one short restrained
      transition. Rotation/rendering are untouched. -- */
.hp-bs{border:0;box-shadow:0 18px 40px rgba(0,0,0,.4);transition:padding .28s ease}
.hp-bs-col:not(.is-open) .hp-bs{padding-top:0;padding-bottom:0;box-shadow:none}
.hp-bs-toggle{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:2px 0 10px;margin:0;cursor:pointer;
  font:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.hp-bs-toggle .hp-label{margin:0}
.hp-bs-cur{margin-left:auto;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#8C9399;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-bs-chev{flex:none;width:9px;height:9px;margin-left:2px;
  border-right:2px solid #8C9399;border-bottom:2px solid #8C9399;
  transform:rotate(45deg);transition:transform .25s ease}
.hp-bs-col.is-open .hp-bs-chev{transform:rotate(225deg)}
.hp-bs-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.hp-bs-fold-in{overflow:hidden;min-height:0}
.hp-bs-col.is-open .hp-bs-fold{grid-template-rows:1fr}
@media (prefers-reduced-motion: reduce){
  .hp-bs-fold{transition:none}
  .hp-bs-chev{transition:none}
  .hp-bs{transition:none}
}
/* ==== /PV FLOAT ==== */

/* ==== PV FOLD REST (James, 2026-10-16 18:20 PT — "fold em") ====
   The five remaining space-hogs (Right Now, The Ticket, The Latest,
   The Vegas Desk, Games) fold by default — the identical interaction
   the Stats Hub band card got in PV FLOAT: the section's own header
   row is the toggle (label + current context + chevron), the body
   folds away beneath it on a grid-rows 0fr -> 1fr with one short
   restrained .28s transition (removed under prefers-reduced-motion),
   and the state does not persist — a fresh fold on every visit.
   Content, tabs, links and the Ticket's paper-slip internals are
   untouched; the slip keeps its paper look when open — the folded
   state is only this slim dark header row. */

/* -- the fold mechanism (mirrors .hp-bs-fold) -- */
.hp-fold{display:grid;grid-template-rows:0fr;min-height:0;
  transition:grid-template-rows .28s ease}
.hp-fold-in{overflow:hidden;min-height:0}
.hp-foldsec.is-open .hp-fold{grid-template-rows:1fr}

/* -- the header row is the toggle -- */
.hp-foldsec .hp-shead{cursor:pointer;transition:margin-bottom .28s ease}
.hp-foldsec:not(.is-open) .hp-shead{margin-bottom:0}
#hpNow .hp-now-head{cursor:pointer}
.hp-fold-btn{flex:none;background:none;border:0;margin:0;cursor:pointer;
  padding:8px 2px 8px 10px;-webkit-tap-highlight-color:transparent}
.hp-fold-chev{display:block;width:9px;height:9px;
  border-right:2px solid #8C9399;border-bottom:2px solid #8C9399;
  transform:rotate(45deg);transition:transform .25s ease}
.hp-foldsec.is-open .hp-fold-chev{transform:rotate(225deg)}

/* -- The Latest: the lead headline rides the folded row as its
      context line (mirrors .hp-bs-cur); it steps aside when open,
      where the lead row itself sits directly beneath. -- */
.hp-fold-cur{flex:1 1 220px;min-width:0;font-size:12.5px;font-weight:600;
  color:#A5ACAF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-foldsec.is-open .hp-fold-cur--head{display:none}

@media (prefers-reduced-motion: reduce){
  .hp-fold{transition:none}
  .hp-fold-chev{transition:none}
  .hp-foldsec .hp-shead{transition:none}
}
/* ==== /PV FOLD REST ==== */

/* ================= THE CHART — editorial chart system (2026-10-17 build) =================
   Replaces the .hp-top10 poster rail presentation. Marathon ('Previously
   Display') 400 only — no faux bold, no serif. Black/silver/white + signal
   red. Featured #1 is cinematic; ranks 2-10 are an editorial list. */
.cht-wrap{margin-top:8px}
.cht-ctx{color:#A5ACAF;font-size:11.5px;letter-spacing:1.8px;margin-top:4px;text-transform:uppercase}
.cht-feat{position:relative;border-radius:12px;overflow:hidden;background:#101010;min-height:308px;display:flex;align-items:flex-end}
.cht-feat-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cht-feat-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16) 34%,rgba(0,0,0,.9) 100%)}
.cht-feat-num{position:absolute;top:8px;left:18px;font-family:"Previously Display",serif;font-size:88px;line-height:1;color:rgba(255,255,255,.94);text-shadow:0 2px 26px rgba(0,0,0,.5)}
.cht-feat-cap{position:relative;padding:64px 56px 18px 20px;width:100%}
.cht-feat-t{font-family:"Previously Display",serif;font-weight:400;font-size:29px;line-height:1.08;letter-spacing:.4px}
.cht-feat-t a{color:#fff;text-decoration:none}
.cht-meta{color:#A5ACAF;font-size:12px;letter-spacing:1px;margin-top:6px;text-transform:uppercase}
.cht-meta .cht-dot{color:#5E646A}
.cht-feat-ov{color:#D7DADE;font-size:14px;line-height:1.5;margin-top:9px;max-width:600px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cht-feat-row{display:flex;gap:22px;align-items:center;margin-top:12px}
.cht-open{color:#E10600;font-size:12.5px;letter-spacing:1.8px;font-weight:700;text-decoration:none;text-transform:uppercase}
.cht-toggle{background:none;border:0;color:#E10600;font-size:12px;letter-spacing:1.6px;font-weight:700;padding:6px 0;cursor:pointer;text-transform:uppercase;font-family:inherit}
.cht-toggle:focus-visible,.cht-open:focus-visible,.cht-t a:focus-visible,.cht-feat-t a:focus-visible{outline:2px solid #E10600;outline-offset:2px}
.cht-feat .pv-heart{top:14px;right:14px}
.cht-feat .pv-marks-stack{top:58px;right:14px}
.cht-feat + .cht-exp{border-bottom:1px solid #2C2C2C}
.cht-rows{margin-top:6px}
.cht-row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid #2C2C2C;position:relative;align-items:flex-start}
.cht-rank{font-family:"Previously Display",serif;font-size:27px;line-height:1;color:#fff;width:58px;flex:none;padding-top:2px}
.cht-move{display:block;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:1px;margin-top:5px}
.cht-up{color:#2FBF71}.cht-down{color:#E10600}.cht-new{color:#E10600}
.cht-thumb{width:116px;flex:none;border-radius:6px;overflow:hidden;background:#1B1B1B;aspect-ratio:16/9;display:block}
.cht-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cht-info{flex:1;min-width:0;padding-right:40px}
.cht-t{font-family:"Previously Display",serif;font-weight:400;font-size:16.5px;letter-spacing:.4px;line-height:1.2}
.cht-t a{color:#fff;text-decoration:none}
.cht-row .pv-heart{top:12px;right:4px}
.cht-row .pv-marks-stack{top:54px;right:4px}
.cht-exp{padding:2px 0 16px}
.cht-exp[hidden]{display:none}
.cht-exp-ov{color:#D7DADE;font-size:14px;line-height:1.55;max-width:640px}
.cht-exp-g{color:#A5ACAF;font-size:11.5px;letter-spacing:1.6px;margin-top:9px}
.cht-exp-d{color:#C9CDD1;font-size:12.5px;margin-top:6px}
.cht-exp-link{color:#E10600;font-size:12.5px;letter-spacing:1.6px;font-weight:700;display:inline-block;margin-top:10px;text-decoration:none;text-transform:uppercase}
.cht-more{padding:17px 0 2px}
.cht-more a{color:#fff;font-size:13px;letter-spacing:2.2px;font-weight:700;text-decoration:none;text-transform:uppercase}
.cht-more a .arr{color:#E10600}
@media (hover:hover){.cht-thumb img{transition:transform .35s ease}.cht-row:hover .cht-thumb img{transform:scale(1.05)}.cht-feat-art{transition:transform .5s ease}.cht-feat:hover .cht-feat-art{transform:scale(1.02)}}
@media (min-width:1000px){
  .cht-feat{min-height:430px}
  .cht-feat-num{font-size:128px;left:26px}
  .cht-feat-cap{padding:80px 120px 26px 30px}
  .cht-feat-t{font-size:43px}
  .cht-feat-ov{font-size:15px}
  .cht-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:52px}
  .cht-thumb{width:148px}
  .cht-t{font-size:18px}
  .cht-rank{font-size:31px;width:66px}
}
@media (prefers-reduced-motion: reduce){.cht-thumb img,.cht-feat-art{transition:none}}
/* ---- THE CHART fold + day-over-day movement (2026-10-17, James #86) ----
   Ranks 6-10 sit in .cht-fold behind the View Full Chart drop-down;
   [hidden] must beat the laptop .cht-rows grid rule. The basis line names
   its comparison wherever arrows render. */
.cht-fold[hidden]{display:none}
.cht-basis{color:#A5ACAF;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;margin-top:12px}
.cht-feat .cht-move{display:inline-block;margin:0 0 0 2px}
.cht-more-btn{background:none;border:0;padding:0;color:#fff;font-size:13px;letter-spacing:2.2px;font-weight:700;text-transform:uppercase;cursor:pointer;font-family:inherit}
.cht-more-btn .arr{color:#E10600}
.cht-more-btn:focus-visible{outline:2px solid #E10600;outline-offset:2px}

/* ==== RIGHT NOW LIVE STATE (James, 2026-10-17) ====
   Signal red #E10600 carries the header LIVE state (label + dot), the
   dot gently pulsing at 1.6s; under reduced motion the dot is static.
   The badge only exists while a game is live — the renderer writes no
   badge at all when nothing is on. Marathon ('Previously Display') 400
   carries the module title and rows; no retired serif inside #hpNow.
   All rules scoped to this module only. */
#hpNow .hp-live-wrap:has(.hp-livedot){color:#E10600}
#hpNow .hp-livedot{background:#E10600;animation:hp-pulse 1.6s ease-in-out infinite}
#hpNowRows .hp-badge.live{background:#E10600;color:#FFFFFF}
#hpNow .hp-now-head .hp-label{font-family:"Previously Display",serif;font-weight:400}
#hpNow .hp-now-match{font-family:"Previously Display",serif;font-weight:400}
#hpNow .hp-now-ghead{font-family:"Previously Display",serif;font-weight:400}
@media (prefers-reduced-motion:reduce){#hpNow .hp-livedot{animation:none}}
/* ==== /RIGHT NOW LIVE STATE ==== */


/* ==========================================================================
   FINAL POLISH 2026-10-17 — Your Previously + Who's Live + Podcasts.
   Append-only: every rule below is new or wins by :has specificity over
   the legacy band blocks (4/4b painted this band for a light ground;
   4c moved the signed-in state to house black — these rules finish
   that move for the strip internals and the signed-out state).
   ========================================================================== */

/* ---- Module A: marquee supporting line + shortcuts ---- */
.hp-mq-sub{margin-top:11px;font-size:13.5px;letter-spacing:.05em;color:#A5ACAF}
.hp-mq-a .hp-mq-sub{color:#959DA2}
.hp-shortcuts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.hp-shortcut{display:inline-flex;align-items:center;padding:9px 14px;
  background:var(--d3-surface-2,#1B1B1B);border:1px solid var(--d3-line,#2C2C2C);
  border-radius:2px;color:var(--hp-ink);font-size:13.5px;font-weight:600;
  text-decoration:none}
.hp-shortcut:hover{background:#242424;color:#FFFFFF}
.hp-shortcut:focus-visible{outline:2px solid #E10600;outline-offset:2px}
@media (max-width:699px){.hp-shortcut{flex:1 1 42%;justify-content:center}}

/* ---- Module A: strip legibility on the dark band (finishes 4c) ---- */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-dname,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-main b,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-main .time{color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-ddate,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-main .sub,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-note,
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-more{color:var(--hp-ink-faint)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-quiet{
  color:var(--hp-ink-dim);font-family:inherit;font-style:normal}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-ep{border-bottom-color:var(--d3-line)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursUser:not([hidden])) #hpYoursUser .hp-strip-day:not(.is-today) .hp-strip-dhead{border-bottom-color:var(--d3-line)}
.hp-strip-logos{width:44px;flex:none;display:flex;align-items:center;justify-content:center;gap:3px}
.hp-strip-logos img{width:20px;height:20px;object-fit:contain}
.hp-strip-main .time.is-live{color:#E10600}
.hp-strip-noimg{background:var(--d3-surface-2,#1B1B1B)}

/* ---- Module A: signed-out band on house black (scheme conformance) ---- */
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursAnon:not([hidden])){
  background:var(--d3-ground);color:var(--d3-text)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursAnon:not([hidden])) h2{color:var(--hp-ink)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursAnon:not([hidden])) p{color:var(--hp-ink-dim)}
html[data-theme="d3"] body.pv-home.b-scope #hpYoursBand:has(> #hpYoursAnon:not([hidden])) .micro{color:var(--hp-ink-faint)}

/* ---- Module C: Podcasts — editorial identity ---- */
.hp-secsub{margin:7px 0 0;font-size:14px;color:var(--hp-ink-dim)}
#hpPodGrid{background:linear-gradient(180deg,rgba(27,27,27,.6),rgba(16,16,16,0) 150px);
  padding:16px 16px 6px}
.hp-pod-featured{display:grid;grid-template-columns:196px 1fr;margin-bottom:14px;
  background:var(--d3-surface-2,#1B1B1B)}
.hp-pod-featured .hp-pod-txt{justify-content:center;padding:18px 20px}
.hp-pod-featured .hp-label{color:#E10600;margin-bottom:7px}
.hp-pod-featured h3{font-size:23px}
.hp-pod-featured .ep{font-size:15.5px;-webkit-line-clamp:3}
.hp-pod-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#E10600}
a.hp-pod:hover .hp-pod-open{text-decoration:underline}
.hp-pod-media.is-fallback{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1B1B1B,#101010 75%)}
@media (max-width:699px){
  .hp-pod-featured{grid-template-columns:1fr}
  .hp-pod-featured .hp-pod-media{aspect-ratio:16/9}
  #hpPodGrid{padding:12px 10px 4px}
}

/* ---- Module B: Who's Live homepage mount ---- */
.hp-live-fresh{margin:2px 0 10px;font-size:12.5px;color:var(--hp-ink-faint)}
.hp-wl-tabs{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.hp-wl-tab{background:none;border:none;border-bottom:2px solid transparent;
  padding:4px 1px;font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#8C9399;cursor:pointer}
.hp-wl-tab.is-on{color:#FFFFFF;border-bottom-color:#FFFFFF}
.hp-wl-tab:focus-visible{outline:2px solid #E10600;outline-offset:2px}
.hp-wl-featured{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;
  align-items:center;text-decoration:none;color:inherit;margin-bottom:16px}
.hp-wl-fmedia{position:relative;display:block;aspect-ratio:16/9;border-radius:2px;
  overflow:hidden;background:#101010}
.hp-wl-fmedia img{width:100%;height:100%;object-fit:cover;display:block}
.hp-wl-live{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;
  align-items:center;gap:6px;background:#E10600;color:#FFFFFF;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px}
.hp-wl-dot{width:6px;height:6px;border-radius:50%;background:#FFFFFF;
  animation:hp-pulse 1.6s infinite}
.hp-wl-finfo{display:flex;flex-direction:column;gap:7px;min-width:0}
.hp-wl-fname{display:flex;align-items:center;gap:9px;
  font-family:'Previously Display',Georgia,serif;font-weight:400;
  font-size:25px;line-height:1.1;color:#FFFFFF}
.hp-wl-ava{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.hp-wl-ftitle{font-size:15.5px;line-height:1.4;color:var(--hp-ink-body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-wl-fmeta{font-size:12.5px;color:var(--hp-ink-faint)}
.hp-wl-watch{margin-top:4px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#E10600}
.hp-wl-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch}
.hp-wl-card{flex:0 0 248px;scroll-snap-align:start;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;gap:5px;min-width:0}
.hp-wl-media{position:relative;display:block;aspect-ratio:16/9;border-radius:2px;
  overflow:hidden;background:#101010}
.hp-wl-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion: no-preference){
  .hp-wl-media img{transition:transform .45s ease}
  .hp-wl-card:hover .hp-wl-media img{transform:scale(1.045)}
  .hp-wl-featured:hover .hp-wl-fmedia img{transform:scale(1.03)}
  .hp-wl-fmedia img{transition:transform .45s ease}
}
.hp-wl-media .hp-wl-live{top:8px;left:8px}
.hp-wl-fmedia.is-fallback,.hp-wl-media.is-fallback{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;
  background:linear-gradient(150deg,#1B1B1B,#101010 72%)}
.hp-wl-fb-name{font-family:'Previously Display',Georgia,serif;font-weight:400;
  color:#FFFFFF;font-size:19px;line-height:1.15;overflow-wrap:anywhere}
.hp-wl-fb-plat{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#A5ACAF}
.hp-wl-cname{display:flex;align-items:center;gap:7px;font-weight:700;
  font-size:14.5px;color:var(--hp-ink)}
.hp-wl-cname .hp-wl-ava{width:20px;height:20px}
.hp-wl-ctitle{font-size:13px;line-height:1.35;color:var(--hp-ink-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-wl-cmeta{font-size:11.5px;color:var(--hp-ink-faint)}
.hp-wl-empty{font-size:13.5px;color:var(--hp-ink-faint)}
a.hp-wl-featured:focus-visible,a.hp-wl-card:focus-visible{
  outline:2px solid #E10600;outline-offset:2px}
@media (max-width:760px){
  .hp-wl-featured{grid-template-columns:1fr;gap:10px}
  .hp-wl-card{flex-basis:216px}
}
@media (prefers-reduced-motion: reduce){.hp-wl-dot{animation:none}}

/* ---- Module B2: Who's Live play-here overlay (2026-10-17, #85) ----
   Scoped to the homepage module (#hpLive) + its player (.hp-wlp).
   Names pinned to the house display token (the hardcoded Georgia
   fallback stack is what rendered serif in James's screenshot);
   cards are no longer anchors, so titles lose the raw-link
   underline at the root. Overlay = floating module law: gradient
   blend + soft static shadow over a frosted backdrop. */
#hpLive .hp-wl-fname{font-family:var(--hp-font-display);font-weight:400;text-decoration:none}
#hpLive .hp-wl-fb-name{font-family:var(--hp-font-display);font-weight:400;text-decoration:none}
#hpLive .hp-wl-cname{font-family:var(--hp-font-sans);font-weight:700;text-decoration:none}
#hpLive .hp-wl-ftitle,#hpLive .hp-wl-ctitle,#hpLive .hp-wl-fmeta,#hpLive .hp-wl-cmeta{text-decoration:none}
#hpLive [data-wl-card]{cursor:pointer}
#hpLive .hp-wl-card:focus-visible,#hpLive .hp-wl-featured:focus-visible{outline:2px solid #E10600;outline-offset:2px}
.hp-wl-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.hp-wl-card .hp-wl-actions{margin-top:auto;padding-top:2px}
.hp-wl-play{display:inline-flex;align-items:center;gap:7px;background:#E10600;color:#FFFFFF;
  border:0;border-radius:2px;padding:8px 13px;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.hp-wl-play:hover{background:#B30500}
.hp-wl-play:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.hp-wl-open{font-size:12px;font-weight:600;color:#A5ACAF;text-decoration:none}
.hp-wl-open:hover{color:#FFFFFF;text-decoration:underline}
body.hp-wlp-lock{overflow:hidden}
.hp-wlp{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.hp-wlp[hidden]{display:none}
.hp-wlp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.hp-wlp-panel{position:relative;width:min(920px,94vw);max-height:92vh;overflow:auto;
  background:linear-gradient(160deg,#1B1B1B,#101010 78%);border:1px solid #2C2C2C;border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.65);padding:14px 16px 13px;color:#FFFFFF}
.hp-wlp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.hp-wlp-who{display:flex;align-items:center;gap:10px;min-width:0}
.hp-wlp-who .hp-wl-live{position:static}
.hp-wlp-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.hp-wlp-name{font-family:var(--hp-font-display);font-weight:400;font-size:22px;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-wlp-x{background:none;border:0;color:#A5ACAF;font-size:28px;line-height:1;padding:2px 6px;cursor:pointer;flex:none}
.hp-wlp-x:hover{color:#FFFFFF}
.hp-wlp-x:focus-visible{outline:2px solid #E10600;outline-offset:2px}
.hp-wlp-stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.hp-wlp-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hp-wlp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:11px}
.hp-wlp-status{font-size:12.5px;color:#A5ACAF;min-height:16px}
.hp-wlp-btns{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.hp-wlp-sound,.hp-wlp-close{background:#1B1B1B;color:#FFFFFF;border:1px solid #2C2C2C;border-radius:2px;
  padding:7px 12px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.hp-wlp-sound:hover,.hp-wlp-close:hover{border-color:#A5ACAF}
.hp-wlp-open{font-size:12.5px;font-weight:600;color:#A5ACAF;text-decoration:none}
.hp-wlp-open:hover{color:#FFFFFF;text-decoration:underline}
.hp-wlp-blocked{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:22px;background:linear-gradient(160deg,#1B1B1B,#101010 78%)}
.hp-wlp-bmsg{font-size:15px;line-height:1.5;color:#FFFFFF;max-width:520px;margin:0}
.hp-wlp-brow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hp-wlp-bopen{display:inline-flex;align-items:center;background:#E10600;color:#FFFFFF;text-decoration:none;
  border-radius:2px;padding:9px 14px;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.hp-wlp-bretry{background:#1B1B1B;color:#FFFFFF;border:1px solid #2C2C2C;border-radius:2px;
  padding:9px 14px;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
@media (max-width:760px){
  .hp-wlp{padding:10px}
  .hp-wlp-panel{width:96vw;padding:12px}
  .hp-wlp-name{font-size:19px}
}