/* =========================================================
   HBS FANS · Home depth upgrade 5.10.37
   Purpose: improve data fidelity, mobile stability and speed
   without redesigning the approved homepage language.
   ========================================================= */

/* Keep the approved hero, only make the live match card more informative. */
.home-score-team{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:right!important;min-width:0}
.home-score-team:last-child{text-align:left!important;grid-template-columns:1fr 42px}.home-score-team:last-child .home-score-crest{grid-column:2;grid-row:1/3}.home-score-team:last-child small,.home-score-team:last-child b{grid-column:1}
.home-score-crest{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);overflow:hidden;flex:0 0 auto}
.home-score-crest img{width:34px;height:34px;object-fit:contain;display:block}.home-score-crest.is-missing:before{content:"HBS";font:900 8px var(--display);letter-spacing:.08em;color:rgba(255,255,255,.45)}
.home-score-team small{margin:0!important}.home-score-team b{min-width:0;overflow-wrap:anywhere}
.score-opponents>strong{min-width:38px;text-align:center}.cinematic-score.is-live{border-top-color:#ff304b}.cinematic-score.is-live .score-opponents>strong{color:#fff;background:var(--red);padding:5px 7px;letter-spacing:.05em}
.score-countdown.is-live{color:#fff}.score-countdown.is-finished{color:rgba(255,255,255,.65)}

/* Personal progress stays inside the existing bottom rail instead of creating a new dashboard. */
.home-xp-pulse i{height:2px;background:rgba(255,255,255,.17);margin-top:7px;overflow:hidden}.home-xp-pulse i u{display:block;height:100%;background:#fff;transition:width .32s ease}

/* Small factual context below the existing schedule and stats blocks. */
.home-last-result{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;border-bottom:1px solid var(--ink);padding:15px 0;margin-top:5px}.home-last-result>span{font:800 9px var(--display);letter-spacing:.12em;color:var(--red)}.home-last-result>b{font:800 15px var(--display)}.home-last-result>small{font-size:9px;color:var(--muted)}
.home-data-freshness{display:block;color:var(--muted);font-size:9px;margin:0 0 17px}.home-inline-empty{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.home-inline-empty b{font-size:15px}.home-inline-empty a{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800}.home-inline-empty .icon{width:13px}

/* Below-the-fold work is skipped until it is near the viewport. No visual redesign. */
@supports (content-visibility:auto){
  .home-defer-section{content-visibility:auto;contain-intrinsic-size:1px 760px}
  .photo-dossier.home-defer-section{contain-intrinsic-size:1px 700px}
  .community-v5.home-defer-section{contain-intrinsic-size:1px 620px}
}

/* Prevent layout shift from editorial photography. */
.photo-dossier img{aspect-ratio:var(--home-photo-ratio,auto)}
.photo-dossier-main img{--home-photo-ratio:1280/853}.photo-dossier-side img{--home-photo-ratio:1200/799}.photo-dossier-strip img{--home-photo-ratio:900/675}

/* Mobile: same design and hierarchy, with less GPU work and safer sizing. */
@media(max-width:800px){
  .cinematic-media img{transform:none!important;will-change:auto!important}
  .cinematic-scan{display:none}
  .home-score-team{grid-template-columns:34px 1fr;column-gap:7px}.home-score-team:last-child{grid-template-columns:1fr 34px}.home-score-crest{width:34px;height:34px}.home-score-crest img{width:28px;height:28px}.home-score-team b{font-size:14px!important}
  .home-last-result{grid-template-columns:1fr;gap:3px;padding:13px 0}.home-last-result>small{margin-top:2px}
  .home-inline-empty{align-items:flex-start;flex-direction:column;gap:9px}
  .team-pulse-copy .home-data-freshness{margin-top:-5px}
  .journey-track-v5{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}.journey-track-v5::-webkit-scrollbar{display:none}
  .red-book-links{scrollbar-width:none}.red-book-links::-webkit-scrollbar{display:none}
}

@media(max-width:430px){
  .score-opponents{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:7px}.home-score-team{grid-template-columns:28px 1fr}.home-score-team:last-child{grid-template-columns:1fr 28px}.home-score-crest{width:28px;height:28px}.home-score-crest img{width:23px;height:23px}.home-score-team b{font-size:12px!important}.score-opponents>strong{min-width:30px;font-size:10px}
  .cinematic-copy p{max-width:100%}
  .command-side a{grid-template-columns:28px minmax(0,1fr) auto;gap:10px}.command-side strong{font-size:14px}
}

/* Touch devices should not pay for desktop hover motion. */
@media(hover:none),(pointer:coarse){
  .fan-constellation>a:hover,.photo-dossier figure:hover img,.fixture-ledger-v5>a:hover,.update-tape>a:hover{transform:none}
  .photo-dossier figure:hover img{filter:none}
}

@media(prefers-reduced-motion:reduce){
  .home-xp-pulse i u{transition:none}
}


/* 5.10.37 — restore the approved primary action panel.
   A late app.css override changed only the background to white while the
   component still inherited white/pale typography, making the real quiz
   content look empty. Keep this explicit on the home stylesheet as a
   regression guard. */
.command-deck .command-main{background:var(--red);color:#fff}
.command-deck .command-main .command-copy small{color:rgba(255,255,255,.82)}
.command-deck .command-main .command-copy h3{color:#fff}
.command-deck .command-main .command-copy p{color:#ffdce0}
.command-deck .command-main .command-copy>span{color:#fff;border-color:rgba(255,255,255,.9)}
.command-deck .command-main .command-art b{color:#a80619}
.command-deck .command-main:after{color:rgba(255,255,255,.075)}

/* Homepage supporters leaderboard — restored 2026-10-12 */
.home-leaderboard{padding-top:90px;padding-bottom:92px}.home-leaderboard-head{align-items:end}.home-leaderboard-intro{max-width:440px}.home-leaderboard-intro p{margin:0 0 16px;color:#6f6a6d;line-height:1.75}.home-leaderboard-shell{display:grid;grid-template-columns:250px minmax(0,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:#fff}.home-leaderboard-meta{border-left:1px solid var(--ink);display:grid;grid-template-rows:repeat(3,1fr)}.home-leaderboard-meta>span,.home-leaderboard-meta>a{min-height:112px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}.home-leaderboard-meta>*:last-child{border-bottom:0}.home-leaderboard-meta b{font:900 34px/1 var(--display);letter-spacing:-.04em}.home-leaderboard-meta small{font-size:10px;font-weight:800;color:#817b7f;margin-top:7px}.home-leaderboard-meta>a b{color:var(--red)}.home-leaderboard-list{min-width:0}.home-leader-row{min-height:67px;display:grid;grid-template-columns:64px minmax(190px,1.5fr) minmax(120px,.8fr) 100px 94px 20px;align-items:center;border-bottom:1px solid var(--line);transition:background .18s ease,color .18s ease}.home-leader-row:last-child{border-bottom:0}.home-leader-row:hover{background:#f7f3ef}.home-leader-row.is-first{background:var(--ink);color:#fff}.home-leader-row.is-first:hover{background:#19191d}.home-leader-row>span,.home-leader-row>strong{padding:12px 14px}.home-leader-place{font:900 21px/1 var(--display);text-align:center}.home-leader-person{display:flex;align-items:center;gap:10px;min-width:0}.home-leader-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#eee8e3;border:1px solid #cfc8c2;flex:0 0 auto}.home-leader-avatar img{width:100%;height:100%;object-fit:cover}.home-leader-person>span{min-width:0}.home-leader-person b{display:block;font:900 13px/1.15 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-leader-person small,.home-leader-rank small,.home-leader-streak small,.home-leader-xp small{display:block;font-size:8px;color:#918a8e;margin-top:4px}.home-leader-row.is-first small{color:#aaa6aa}.home-leader-rank b,.home-leader-streak b{font:850 10px/1.2 var(--display)}.home-leader-xp{text-align:left}.home-leader-xp b{display:block;font:950 20px/1 var(--display);color:var(--red)}.home-leader-row.is-first .home-leader-xp b{color:#fff}.home-leader-row>.icon{width:14px;height:14px;margin-left:14px}.home-leaderboard-mobile-cta{display:none}
@media(max-width:900px){.home-leaderboard{padding-top:64px;padding-bottom:68px}.home-leaderboard-shell{grid-template-columns:1fr}.home-leaderboard-meta{border-left:0;border-bottom:1px solid var(--ink);grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.home-leaderboard-meta>span,.home-leaderboard-meta>a{min-height:92px;border-bottom:0;border-left:1px solid var(--line);padding:16px}.home-leaderboard-meta>*:last-child{border-left:0}.home-leaderboard-meta b{font-size:28px}.home-leader-row{grid-template-columns:52px minmax(0,1fr) 82px 18px}.home-leader-rank,.home-leader-streak{display:none}.home-leader-person{padding-inline:8px!important}.home-leader-xp{padding-inline:7px!important}.home-leader-row>.icon{margin-left:6px}.home-leaderboard-mobile-cta{min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--ink);font-weight:900}.home-leaderboard-mobile-cta .icon{width:14px;height:14px}}
@media(max-width:520px){.home-leaderboard-head{display:block}.home-leaderboard-intro{margin-top:16px}.home-leaderboard-intro .v5-text-link{display:none}.home-leaderboard-meta>span,.home-leaderboard-meta>a{min-height:80px;padding:12px}.home-leaderboard-meta b{font-size:24px}.home-leaderboard-meta small{font-size:8px}.home-leader-row{min-height:62px;grid-template-columns:43px minmax(0,1fr) 74px 16px}.home-leader-place{font-size:18px;padding-inline:6px!important}.home-leader-avatar{width:36px;height:36px}.home-leader-person b{font-size:11px}.home-leader-person small{font-size:7px}.home-leader-xp b{font-size:16px}.home-leader-xp small{font-size:7px}}

/* =========================================================
   HBS FANS · Homepage polish 5.10.38 · 2026-10-14
   A restrained visual lift: stronger editorial hierarchy,
   sharper supporter identity and cleaner mobile rhythm.
   Homepage only — no shared component files are changed.
   ========================================================= */

/* Editorial rhythm — keep the straight, printed language of the site. */
.cinematic-home + .motion-marquee{border-top:1px solid #09090b}
.home-daily,.home-leaderboard,.journey-v5,.red-book-home,.fixture-ribbon,.team-pulse,.updates-v5{position:relative}
.home-daily:before,.home-leaderboard:before,.journey-v5:before,.red-book-home:before,.fixture-ribbon:before,.team-pulse:before,.updates-v5:before{
  content:"";position:absolute;top:0;right:24px;width:54px;height:4px;background:var(--red);pointer-events:none
}
.editorial-head{position:relative}
.editorial-head:after{content:"";position:absolute;top:-1px;right:0;width:82px;height:2px;background:var(--red);pointer-events:none}
.editorial-head.inverse:after{background:#ff4057}

/* Hero — same composition, more deliberate framing and contrast. */
.cinematic-home{background:#08080a}
.cinematic-home .cinematic-media img{filter:saturate(.98) contrast(1.055)}
.cinematic-entry-signature{padding-inline-start:2px}
.stage-eyebrow{font-weight:850}
.cinematic-copy h1{max-width:900px}
.cinematic-copy .v5-primary{border:1px solid var(--red);box-shadow:none;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.cinematic-copy .v5-primary:hover{border-color:#fff}
.cinematic-score{position:relative;backdrop-filter:blur(3px);box-shadow:0 26px 68px rgba(0,0,0,.28)}
.cinematic-score:before{content:"";position:absolute;top:9px;left:9px;width:22px;height:22px;border-top:1px solid rgba(255,255,255,.48);border-left:1px solid rgba(255,255,255,.48);pointer-events:none}
.cinematic-score:after{content:"";position:absolute;right:-1px;bottom:-1px;width:34px;height:4px;background:var(--red);pointer-events:none}
.score-opponents{position:relative}
.score-opponents:after{content:"";position:absolute;right:50%;bottom:-1px;width:34px;height:1px;transform:translateX(50%);background:var(--red)}
.cinematic-bottom>*{position:relative}
.cinematic-bottom>a:after{content:"";position:absolute;right:0;bottom:-1px;width:0;height:2px;background:var(--red);transition:width .22s ease}
.cinematic-bottom>a:hover:after{width:100%}
.motion-marquee{height:44px;border-bottom:4px solid #111114}
.motion-marquee>div{font-size:13px;letter-spacing:.19em}

/* Daily — less like a card, more like a supporters' printed bulletin. */
.home-daily{border-top:0;background:#f5f1ea}
.home-daily__head{position:relative;padding-top:9px}
.home-daily__head:after{content:"DAILY";position:absolute;left:0;top:-3px;font:950 54px/.8 var(--display);letter-spacing:-.07em;color:rgba(17,17,20,.035);direction:ltr;pointer-events:none}
.home-daily__meter{height:5px;background:#d4cdc3}
.home-daily__tasks{border-top-color:#bdb5aa}
.home-daily__task{position:relative;transition:background .18s ease,padding .18s ease}
.home-daily__task:before{content:"";position:absolute;right:0;top:0;bottom:0;width:0;background:var(--red);transition:width .18s ease}
.home-daily__task:hover{background:#fff;padding-inline:12px}
.home-daily__task:hover:before{width:3px}
.home-daily__side{border-top:5px solid var(--red);position:relative;overflow:hidden}
.home-daily__side:after{content:"03";position:absolute;left:-10px;bottom:-27px;font:950 112px/.8 var(--display);color:#18181c;letter-spacing:-.07em;pointer-events:none}
.home-daily__side>*{position:relative;z-index:1}

/* Supporter ecosystem — harder edges, visible hierarchy, no generic cards. */
.black-field{border-top:7px solid var(--red);border-bottom:1px solid #242429}
.black-field .editorial-head{padding-top:24px}
.fan-constellation>a{isolation:isolate}
.fan-constellation>a:not(.constellation-main):after{position:absolute;left:12px;bottom:-19px;font:950 86px/.8 var(--display);color:rgba(255,255,255,.035);pointer-events:none;z-index:-1}
.fan-constellation>a:nth-child(2):after{content:"02"}.fan-constellation>a:nth-child(3):after{content:"03"}.fan-constellation>a:nth-child(4):after{content:"04"}.fan-constellation>a:nth-child(5):after{content:"05"}.fan-constellation>a:nth-child(6):after{content:"06"}
.fan-constellation>a:not(.constellation-main):hover:after{color:rgba(17,17,20,.045)}
.fan-constellation .constellation-main{border-right:5px solid #ff4259}

/* Leaderboard — stronger table feel and a cleaner first-place strip. */
.home-leaderboard-shell{box-shadow:0 20px 56px rgba(32,20,15,.055)}
.home-leaderboard-meta{background:#f1ece5}
.home-leaderboard-meta>a{background:#fff}
.home-leader-row{position:relative}
.home-leader-row.is-first:before{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--red)}
.home-leader-row:not(.is-first):hover{box-shadow:inset -4px 0 0 var(--red)}
.home-leader-place{letter-spacing:-.05em}

/* Photography — make each image feel like an editorial spread, not a tile. */
.photo-dossier{position:relative;padding-top:16px}
.photo-dossier:before{content:"ARCHIVE / HBS FANS";position:absolute;top:-10px;right:24px;font:850 9px/1 var(--display);letter-spacing:.18em;color:#8d8580;direction:ltr}
.photo-dossier figure{box-shadow:0 18px 44px rgba(0,0,0,.085)}
.photo-dossier figure:before{content:"";position:absolute;z-index:3;top:14px;left:14px;width:28px;height:28px;border-top:1px solid rgba(255,255,255,.58);border-left:1px solid rgba(255,255,255,.58);pointer-events:none}
.photo-dossier figcaption{border-right:3px solid var(--red);padding-right:13px}

/* Match-day journey — a more obvious route with compact wayfinding. */
.journey-track-v5{border-top-width:2px;background:#fff}
.journey-stop{transition:background .18s ease,color .18s ease}
.journey-stop:not(.current):hover{background:#f1ece5}
.journey-stop:before{width:11px;height:11px;top:-6px}
.journey-stop.reached:after{content:"";position:absolute;right:29px;left:-1px;top:-2px;height:3px;background:var(--ink)}
.journey-stop.current:after{content:"";position:absolute;right:0;left:0;top:-2px;height:3px;background:#fff}

/* Turner — turn the stadium block into a bold typographic poster. */
.turner-feature{box-shadow:0 24px 70px rgba(34,19,14,.09);border-top:1px solid var(--ink)}
.turner-visual{min-height:540px}
.turner-visual:after{inset:18px;border-color:rgba(255,255,255,.34)}
.turner-visual strong{font-size:clamp(72px,7.4vw,114px);line-height:.76;letter-spacing:-.075em;direction:ltr;text-align:left;align-self:flex-start;text-transform:uppercase}
.turner-visual>span{background:#fff;color:#111!important;padding:8px 10px;align-self:flex-start;letter-spacing:.18em}
.turner-copy{position:relative;border-bottom:5px solid var(--red)}
.turner-copy:after{content:"BS";position:absolute;left:20px;top:12px;font:950 92px/.8 var(--display);color:rgba(17,17,20,.035);letter-spacing:-.08em;pointer-events:none;direction:ltr}
.turner-copy>*{position:relative;z-index:1}
.turner-facts b{letter-spacing:-.035em}

/* Red Book — give the honours block a subtle physical-book cue. */
.red-book-home{padding-bottom:118px}
.honours-stage{box-shadow:0 24px 64px rgba(34,19,14,.055);position:relative}
.honours-stage:before{content:"";position:absolute;z-index:3;top:0;right:0;bottom:0;width:5px;background:var(--red);pointer-events:none}
.honours-stage>div{background:#fbf9f5}
.honours-stage .honour-major{background:var(--ink)}
.red-book-links a{transition:color .18s ease,border-color .18s ease}
.red-book-links a:hover{color:var(--red);border-color:var(--red)}

/* Lower homepage — consistent editorial rails, without changing content. */
.fixture-ledger-v5>a,.update-tape>a{position:relative}
.fixture-ledger-v5>a:before,.update-tape>a:before{content:"";position:absolute;right:0;top:0;bottom:0;width:0;background:var(--red);transition:width .18s ease}
.fixture-ledger-v5>a:hover:before,.update-tape>a:hover:before{width:3px}
.team-pulse{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}

@media(max-width:900px){
  .home-daily:before,.home-leaderboard:before,.journey-v5:before,.red-book-home:before,.fixture-ribbon:before,.team-pulse:before,.updates-v5:before{right:20px;width:42px;height:3px}
  .editorial-head:after{width:56px}
  .home-daily__head:after{font-size:42px}
  .home-daily__task:hover{padding-inline:8px}
  .turner-visual strong{font-size:clamp(64px,11vw,92px)}
}

@media(max-width:800px){
  .cinematic-home{min-height:740px}
  .cinematic-content{min-height:740px}
  .cinematic-score:before{width:17px;height:17px}
  .motion-marquee{height:38px}
  .motion-marquee>div{font-size:10px;letter-spacing:.15em}
  .home-daily{padding-top:58px}
  .home-daily__head:after{display:none}
  .black-field{border-top-width:5px}
  .photo-dossier{padding-top:13px}
  .photo-dossier:before{right:17px;top:-8px;font-size:7px}
  .journey-track-v5{background:transparent}
  .journey-stop.reached:after{right:24px}
  .turner-feature{border-top:0;box-shadow:none}
  .turner-visual{min-height:410px}
  .turner-visual:after{inset:12px}
  .turner-visual strong{font-size:clamp(58px,17vw,82px);padding-top:5px}
  .turner-visual>span{font-size:9px;padding:7px 8px}
  .turner-copy:after{font-size:66px;left:13px}
  .red-book-home{padding-bottom:78px}
}

@media(max-width:520px){
  .home-daily:before,.home-leaderboard:before,.journey-v5:before,.red-book-home:before,.fixture-ribbon:before,.team-pulse:before,.updates-v5:before{right:17px;width:36px}
  .editorial-head:after{width:42px}
  .cinematic-home,.cinematic-content{min-height:700px}
  .cinematic-copy h1{font-size:clamp(58px,17vw,78px)}
  .cinematic-copy p{font-size:14px;line-height:1.58}
  .cinematic-score{border-right:0}
  .home-daily__side:after{font-size:90px}
  .home-leaderboard-shell{box-shadow:none}
  .photo-dossier figcaption{border-right-width:2px;padding-right:10px}
  .journey-stop:not(.current):hover{background:transparent}
  .turner-visual{min-height:360px;padding:28px 24px}
  .turner-visual strong{font-size:clamp(53px,16.5vw,73px)}
  .turner-copy{padding:44px 24px}
  .turner-copy h2{font-size:48px}
  .honours-stage{box-shadow:none}
}

@media(hover:none),(pointer:coarse){
  .home-daily__task:hover{padding-inline:0;background:transparent}
  .home-daily__task:hover:before,.cinematic-bottom>a:hover:after,.fixture-ledger-v5>a:hover:before,.update-tape>a:hover:before{width:0}
  .home-leader-row:not(.is-first):hover{box-shadow:none}
}