
/* ==========================================================
   4DK HOMEPAGE REVAMP V2
   Additive layout layer: nothing on the existing homepage is removed.
   ========================================================== */

body.home-page{
  --v2-ink:#0a0a0b;
  --v2-paper:#f3efe6;
  --v2-cream:#fffaf0;
  --v2-red:#e8452e;
  --v2-gold:#d7ad55;
  --v2-line:#d8d0c2;
  --v2-muted:#70695f;
  background:#f3efe6;
}

/* Make the masthead feel like a publication masthead, not a generic site header. */
body.home-page .masthead{
  box-shadow:0 6px 28px rgba(0,0,0,.07);
  border-bottom:1px solid rgba(17,17,17,.13);
}
body.home-page .brand{
  letter-spacing:-.045em;
}

/* ------------------ NEW TOP EDITORIAL LEAD ------------------ */
body.home-page .home-v2-lead{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%,rgba(216,173,85,.16),transparent 19rem),
    radial-gradient(circle at 12% 65%,rgba(232,69,46,.16),transparent 23rem),
    linear-gradient(145deg,#10110f 0%,#070807 72%);
  border-bottom:1px solid #242724;
}
body.home-page .home-v2-lead:before{
  content:"WEEK 1";
  position:absolute;
  right:-18px;
  bottom:-34px;
  font:1000 clamp(90px,18vw,235px)/.8 Arial Black,Impact,sans-serif;
  letter-spacing:-.08em;
  color:#fff;
  opacity:.025;
  pointer-events:none;
}
body.home-page .home-v2-lead-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);
  gap:26px;
  padding:38px 0 34px;
}
body.home-page .home-v2-primary{
  min-height:410px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  padding:32px;
  border:1px solid #303530;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.82)),
    radial-gradient(circle at 82% 20%,rgba(227,24,55,.46),transparent 13rem),
    linear-gradient(135deg,#1c211b,#0a0d0b 68%);
  box-shadow:0 28px 60px rgba(0,0,0,.28);
}
body.home-page .home-v2-primary:before{
  content:"31–10";
  position:absolute;
  right:-8px;
  top:22px;
  font:1000 clamp(74px,10vw,135px)/.8 Arial Black,Impact,sans-serif;
  letter-spacing:-.08em;
  color:#fff;
  opacity:.075;
}
body.home-page .home-v2-lead-kicker,
body.home-page .home-v2-side small,
body.home-page .home-v2-desk-kicker,
body.home-page .home-v2-studio small{
  display:block;
  color:#ff6c50;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.15em;
  text-transform:uppercase;
}
body.home-page .home-v2-primary h1{
  max-width:820px;
  margin:9px 0 12px;
  font:1000 clamp(48px,8vw,96px)/.83 Arial Black,Impact,sans-serif;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
body.home-page .home-v2-primary h1 em{
  font-style:normal;
  color:#ffd268;
}
body.home-page .home-v2-primary p{
  max-width:760px;
  margin:0;
  color:#c5c8c3;
  font:16px/1.5 Georgia,'Times New Roman',serif;
}
body.home-page .home-v2-primary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:18px;
  color:#929a94;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body.home-page .home-v2-primary-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:22px;
}
body.home-page .home-v2-button{
  display:inline-flex;
  min-height:43px;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  background:#e8452e;
  color:#fff!important;
  text-decoration:none;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.home-page .home-v2-button.alt{
  background:transparent;
  border:1px solid #4a514b;
}
body.home-page .home-v2-side{
  display:grid;
  gap:10px;
}
body.home-page .home-v2-side-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:126px;
  padding:17px;
  border:1px solid #2e332f;
  background:linear-gradient(145deg,#151915,#0c0f0d);
  color:#fff;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease;
}
body.home-page .home-v2-side-card:hover{
  transform:translateY(-2px);
  border-color:#e8452e;
}
body.home-page .home-v2-side-card b{
  display:block;
  margin:8px 0 10px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.06;
}
body.home-page .home-v2-side-card span{
  color:#a7aaa5;
  font-size:10px;
  line-height:1.35;
}
body.home-page .home-v2-side-card strong{
  margin-top:13px;
  color:#f5f1e9;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Jump bar */
body.home-page .home-v2-jump{
  position:sticky;
  top:0;
  z-index:35;
  background:#0c0d0c;
  border-bottom:1px solid #2b2d2b;
  border-top:1px solid #2b2d2b;
}
body.home-page .home-v2-jump .shell{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
body.home-page .home-v2-jump .shell::-webkit-scrollbar{display:none}
body.home-page .home-v2-jump a{
  flex:0 0 auto;
  padding:13px 15px;
  color:#c8c5bd;
  text-decoration:none;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.11em;
  text-transform:uppercase;
  border-right:1px solid #282a28;
}
body.home-page .home-v2-jump a:first-child{color:#ff6b4d}
body.home-page .home-v2-jump a:hover{background:#191b19;color:#fff}

/* Existing old injected front cover becomes a secondary "feature cover" instead of competing with the new top lead. */
body.home-page .front-cover-feature{
  border-top:0;
  background:#17130f!important;
}
body.home-page .front-cover-inner{
  padding-top:34px!important;
  padding-bottom:34px!important;
}
body.home-page .front-cover-feature h2{
  font-size:clamp(38px,6vw,72px)!important;
}

/* Existing static hero now reads like the NBA / NFL / Music front desk. */
body.home-page .hero{
  padding-top:36px!important;
  padding-bottom:36px!important;
  background:#ece6da!important;
}
body.home-page .hero-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr)!important;
  align-items:stretch!important;
}
body.home-page .hero-art{
  min-height:520px!important;
  border-radius:0!important;
}
body.home-page .home-story-stack{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
body.home-page .home-feature{
  border-radius:0!important;
}

/* ------------------ SPORTS DESK ------------------ */
body.home-page .home-v2-sports{
  background:#f6f1e7;
  border-top:1px solid #d6cfc2;
  border-bottom:1px solid #d6cfc2;
  padding:42px 0;
}
body.home-page .home-v2-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
body.home-page .home-v2-section-head h2{
  margin:5px 0 0;
  font:1000 clamp(34px,5.8vw,58px)/.9 Arial Black,Impact,sans-serif;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
body.home-page .home-v2-section-head p{
  max-width:580px;
  margin:0;
  color:#716b62;
  font-size:12px;
  line-height:1.45;
}
body.home-page .home-v2-sports-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
body.home-page .home-v2-desk{
  position:relative;
  overflow:hidden;
  min-height:390px;
  padding:24px;
  border:1px solid #d7cfc0;
  background:#fffaf1;
}
body.home-page .home-v2-desk.nfl{
  background:linear-gradient(145deg,#0e1510,#080b09);
  border-color:#283029;
  color:#fff;
}
body.home-page .home-v2-desk.nba{
  background:
    radial-gradient(circle at 84% 14%,rgba(147,29,35,.14),transparent 12rem),
    #fffaf1;
}
body.home-page .home-v2-desk h3{
  margin:8px 0 8px;
  font:1000 clamp(36px,5vw,58px)/.88 Arial Black,Impact,sans-serif;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
body.home-page .home-v2-desk>p{
  max-width:610px;
  margin:0 0 18px;
  color:#706a61;
  font:14px/1.5 Georgia,serif;
}
body.home-page .home-v2-desk.nfl>p{color:#aeb4af}
body.home-page .home-v2-desk-list{
  display:grid;
  gap:1px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(0,0,0,.1);
}
body.home-page .home-v2-desk.nfl .home-v2-desk-list{
  border-color:#29302a;
  background:#29302a;
}
body.home-page .home-v2-desk-list a{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px 14px;
  background:#fbf7ef;
  color:#111;
  text-decoration:none;
}
body.home-page .home-v2-desk.nfl .home-v2-desk-list a{
  background:#101410;
  color:#fff;
}
body.home-page .home-v2-desk-list small{
  color:#e8452e;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.1em;
  text-transform:uppercase;
}
body.home-page .home-v2-desk-list b{
  font-family:Georgia,serif;
  font-size:14px;
  line-height:1.1;
}
body.home-page .home-v2-desk-list span{
  font-size:15px;
  font-weight:1000;
}

/* ------------------ INTERACTIVE DUO ------------------ */
body.home-page .home-v2-interactive{
  position:relative;
  overflow:hidden;
  background:#0d0d0f;
  color:#fff;
  padding:44px 0 50px;
  border-bottom:1px solid #2c2c31;
}
body.home-page .home-v2-interactive:after{
  content:"PLAY";
  position:absolute;
  right:-20px;
  bottom:-44px;
  font:1000 190px/.8 Arial Black,Impact,sans-serif;
  opacity:.028;
}
body.home-page .home-v2-interactive-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
body.home-page .home-v2-game{
  position:relative;
  overflow:hidden;
  min-height:310px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #33343a;
  color:#fff;
  text-decoration:none;
}
body.home-page .home-v2-game.basketball{
  background:
    radial-gradient(circle at 80% 18%,rgba(224,88,41,.52),transparent 10rem),
    linear-gradient(135deg,#29150e,#0c0c0d 72%);
}
body.home-page .home-v2-game.football{
  background:
    repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,255,255,.04) 65px 66px),
    radial-gradient(circle at 75% 20%,rgba(73,144,89,.37),transparent 12rem),
    linear-gradient(135deg,#102417,#080c09 72%);
}
body.home-page .home-v2-game .big{
  position:absolute;
  right:13px;
  top:10px;
  font:1000 clamp(74px,10vw,125px)/1 Arial Black,Impact,sans-serif;
  letter-spacing:-.07em;
  color:#fff;
  opacity:.1;
}
body.home-page .home-v2-game small{
  color:#ff6a4a;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.home-page .home-v2-game h3{
  margin:9px 0 9px;
  font:1000 clamp(35px,5vw,57px)/.88 Arial Black,Impact,sans-serif;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
body.home-page .home-v2-game p{
  max-width:530px;
  margin:0 0 18px;
  color:#b9bab6;
  font-size:13px;
  line-height:1.45;
}
body.home-page .home-v2-game b{
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ------------------ EXISTING CONTENT: stronger hierarchy ------------------ */
body.home-page .home-fresh{
  background:#f2ecdf;
}
body.home-page .home-fresh-grid{
  grid-template-columns:1.45fr repeat(2,1fr)!important;
  grid-auto-rows:auto;
}
body.home-page .home-fresh-card:first-child{
  grid-row:span 2;
}
body.home-page .home-fresh-card:first-child img{
  aspect-ratio:4/3;
  min-height:260px;
}
body.home-page .home-fresh-card:nth-child(4){
  grid-column:2/4;
  display:grid;
  grid-template-columns:minmax(220px,.75fr) 1fr;
}
body.home-page .home-fresh-card:nth-child(4) img{
  height:100%;
  aspect-ratio:auto;
}
body.home-page [aria-label="Classic Albums Revisited"]{
  position:relative;
  overflow:hidden;
}
body.home-page [aria-label="Classic Albums Revisited"]:after{
  content:"CLASSICS";
  position:absolute;
  right:-18px;
  bottom:-26px;
  font:1000 130px/.8 Arial Black,Impact,sans-serif;
  color:#fff;
  opacity:.025;
  pointer-events:none;
}
body.home-page .home-featured-stories{
  background:#faf6ed;
}
body.home-page .home-featured-stories .home-story-card{
  border-top-width:5px;
  box-shadow:0 17px 38px rgba(17,17,17,.08);
}
body.home-page .home-vault-section{
  background:#0e0f0e!important;
}
body.home-page .home-vault-grid{
  grid-template-columns:1.3fr 1fr 1fr 1fr!important;
}
body.home-page .home-vault-card:first-child{
  background:
    radial-gradient(circle at 80% 20%,rgba(232,69,46,.17),transparent 12rem),
    #161715;
}
body.home-page .home-franchise-grid{
  grid-template-columns:repeat(6,1fr)!important;
}
body.home-page .home-franchise:nth-child(4),
body.home-page .home-franchise:nth-child(5){
  background:#111!important;
  color:#fff!important;
  border-top-color:#e8452e!important;
}
body.home-page .home-franchise:nth-child(4) span,
body.home-page .home-franchise:nth-child(5) span{color:#aaa!important}

/* Existing injected latest rail becomes cleaner and swipeable */
body.home-page .latest-4dk{
  border-bottom:1px solid #d7cfc1!important;
}
body.home-page .latest-4dk-grid{
  gap:1px!important;
  background:#d6cfc2;
  border:1px solid #d6cfc2;
}
body.home-page .latest-4dk-card{
  min-height:165px!important;
  border:0!important;
  border-radius:0!important;
}

/* ------------------ MAGAZINE + PODCAST ------------------ */
body.home-page .home-v2-studio{
  padding:44px 0;
  background:#ece5d8;
  border-bottom:1px solid #d3cab9;
}
body.home-page .home-v2-studio-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
}
body.home-page .home-v2-studio-card{
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  border:1px solid #cfc5b4;
  text-decoration:none;
}
body.home-page .home-v2-studio-card.mag{
  color:#fff;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.72)),
    radial-gradient(circle at 80% 18%,rgba(232,69,46,.3),transparent 12rem),
    #181818;
}
body.home-page .home-v2-studio-card.pod{
  color:#111;
  background:
    repeating-radial-gradient(circle at 82% 25%,transparent 0 14px,rgba(17,17,17,.035) 15px 16px,transparent 17px 29px),
    #f8f3e9;
}
body.home-page .home-v2-studio-card h3{
  margin:8px 0 8px;
  font:1000 clamp(34px,5vw,58px)/.9 Arial Black,Impact,sans-serif;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
body.home-page .home-v2-studio-card p{
  margin:0 0 18px;
  max-width:610px;
  font-size:13px;
  line-height:1.45;
}
body.home-page .home-v2-studio-card.mag p{color:#c5c5c5}
body.home-page .home-v2-studio-card b{
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Across 4DK: less list-like, more directory-like */
body.home-page main#main > .section:last-child{
  background:#f8f3e9;
}
body.home-page main#main > .section:last-child .latest-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:#d8d0c4;
  border:1px solid #d8d0c4;
}
body.home-page main#main > .section:last-child .latest-row{
  background:#fffaf1;
  margin:0;
  border:0;
  padding:16px;
}

/* ------------------ MOBILE ------------------ */
@media(max-width:900px){
  body.home-page .home-v2-lead-inner,
  body.home-page .hero-grid,
  body.home-page .home-v2-sports-grid,
  body.home-page .home-v2-studio-grid{
    grid-template-columns:1fr!important;
  }
  body.home-page .home-v2-primary{min-height:360px}
  body.home-page .home-v2-side{grid-template-columns:1fr 1fr}
  body.home-page .home-fresh-grid{
    grid-template-columns:1fr 1fr!important;
  }
  body.home-page .home-fresh-card:first-child{grid-column:1/-1;grid-row:auto}
  body.home-page .home-fresh-card:nth-child(4){grid-column:1/-1}
  body.home-page .home-vault-grid{grid-template-columns:1fr 1fr!important}
  body.home-page .home-franchise-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:620px){
  body.home-page .home-v2-lead-inner{padding:20px 0 22px}
  body.home-page .home-v2-primary{
    min-height:360px;
    padding:22px;
  }
  body.home-page .home-v2-primary h1{font-size:clamp(45px,15vw,66px)}
  body.home-page .home-v2-side{
    grid-template-columns:1fr;
    gap:8px;
  }
  body.home-page .home-v2-side-card{min-height:112px}
  body.home-page .home-v2-jump{top:0}
  body.home-page .home-v2-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }
  body.home-page .home-v2-sports{padding:32px 0}
  body.home-page .home-v2-desk{padding:18px;min-height:auto}
  body.home-page .home-v2-desk-list a{
    grid-template-columns:66px 1fr auto;
    padding:12px 10px;
  }
  body.home-page .home-v2-interactive{padding:34px 0}
  body.home-page .home-v2-interactive-grid{grid-template-columns:1fr}
  body.home-page .home-v2-game{min-height:260px;padding:20px}
  body.home-page .home-fresh-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.home-page .home-fresh-card:first-child,
  body.home-page .home-fresh-card:nth-child(4){
    grid-column:auto;
    display:flex;
  }
  body.home-page .home-fresh-card:nth-child(4) img{
    height:auto;
    aspect-ratio:16/10;
  }
  body.home-page .home-vault-grid{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:9px!important;
    background:transparent!important;
    border:0!important;
    padding-bottom:5px;
  }
  body.home-page .home-vault-card{
    flex:0 0 84%;
    scroll-snap-align:start;
    border:1px solid #333;
  }
  body.home-page .home-franchise-grid{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:9px!important;
  }
  body.home-page .home-franchise{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  body.home-page .latest-4dk-grid{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:8px!important;
    background:transparent;
    border:0;
  }
  body.home-page .latest-4dk-card{
    flex:0 0 82%;
    scroll-snap-align:start;
    border:1px solid #d6cfc2!important;
  }
  body.home-page main#main > .section:last-child .latest-list{
    grid-template-columns:1fr;
  }
}
