/* 4DK 2026–27 NBA SEASON PREVIEW */
:root{
  --p-black:#0b0c0f;
  --p-ink:#17181d;
  --p-paper:#f1ece3;
  --p-cream:#e6ded2;
  --p-red:#e8452e;
  --p-orange:#ef6b2e;
  --p-blue:#1672a6;
  --p-gold:#e1b34d;
}
*{box-sizing:border-box}
body.season-preview-page{background:var(--p-paper);color:#171717}
.preview-masthead{background:#f1ece3}

.preview-hero{
  position:relative;
  overflow:hidden;
  color:#f7f2ea;
  background:
    radial-gradient(circle at 83% 16%,rgba(232,69,46,.28),transparent 22rem),
    linear-gradient(135deg,#0a0b0e,#15161b 62%,#09090b);
}
.preview-hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.06) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.045) 55px 56px);
}
.court-geometry{
  position:absolute;
  inset:0;
  opacity:.11;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 125px,#fff 126px 127px,transparent 128px),
    linear-gradient(90deg,transparent 49.8%,#fff 49.9% 50.1%,transparent 50.2%);
}
.preview-hero-ghost{
  position:absolute;
  left:-24px;
  bottom:-30px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(180px,30vw,440px);
  line-height:.72;
  color:#fff;
  opacity:.025;
  pointer-events:none;
}
.preview-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:34px;
  align-items:center;
  min-height:700px;
  padding-top:54px;
  padding-bottom:54px;
}
.preview-kicker{
  display:block;
  color:#ff6849;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.preview-hero h1{
  margin:12px 0 20px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(80px,11vw,150px);
  line-height:.76;
  letter-spacing:-.025em;
}
.preview-deck{
  max-width:720px;
  margin:0;
  color:#cec8c1;
  font:20px/1.4 Georgia,'Times New Roman',serif;
}
.preview-byline{
  margin-top:24px;
  color:#9d9892;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.preview-byline a{color:#fff}

.preview-cover-board{
  position:relative;
  min-height:520px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 75% 25%,rgba(239,107,46,.32),transparent 10rem),
    linear-gradient(145deg,#15171d,#07080a 76%);
  box-shadow:0 28px 70px rgba(0,0,0,.35);
}
.cover-top,.cover-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px;
  border-color:rgba(255,255,255,.10);
  border-style:solid;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.cover-top{border-width:0 0 1px}
.cover-bottom{border-width:1px 0 0}
.cover-top span,.cover-bottom span{color:#ff6849}
.cover-top b,.cover-bottom b{color:#8f8b86}
.cover-center{
  position:relative;
  min-height:350px;
  display:flex;
  align-items:center;
  padding:24px;
}
.cover-question{
  position:relative;
  z-index:3;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:58px;
  line-height:.82;
}
.cover-ball{
  position:absolute;
  right:-40px;
  top:50%;
  width:240px;height:240px;
  margin-top:-120px;
  display:grid;place-items:center;
  border-radius:50%;
  transform:rotate(-11deg);
  background:
    linear-gradient(90deg,transparent 49%,#3d160d 49.5% 50.5%,transparent 51%),
    linear-gradient(0deg,transparent 49%,#3d160d 49.5% 50.5%,transparent 51%),
    radial-gradient(circle,#ca562c 0 68%,#a73c1d 69% 100%);
  border:5px solid #3d160d;
  opacity:.82;
}
.cover-ball:after{
  content:"";
  position:absolute;
  inset:26px -12px;
  border:4px solid #3d160d;
  border-radius:50%;
}
.cover-ball span{
  position:relative;
  z-index:2;
  color:#ffe7da;
  font:1000 18px/1 Arial,sans-serif;
  letter-spacing:.08em;
}
.cover-pick{
  position:absolute;
  right:16px;
  bottom:54px;
  z-index:4;
  width:210px;
  padding:14px;
  border-left:4px solid var(--p-red);
  background:rgba(0,0,0,.78);
}
.cover-pick small,.cover-pick strong,.cover-pick em{display:block}
.cover-pick small{color:#99938d;font-size:7px;font-weight:1000;letter-spacing:.12em}
.cover-pick strong{margin-top:5px;font-size:18px}
.cover-pick em{margin-top:4px;color:#ff6849;font:normal 1000 10px/1 Arial,sans-serif;letter-spacing:.11em}

.preview-jump{
  position:sticky;
  top:0;
  z-index:15;
  border-bottom:1px solid #292a2e;
  background:rgba(12,13,16,.96);
  backdrop-filter:blur(10px);
}
.preview-jump .shell{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-top:10px;
  padding-bottom:10px;
  white-space:nowrap;
}
.preview-jump a{
  padding:8px 11px;
  border:1px solid #35363b;
  border-radius:999px;
  color:#d3ccc4;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.preview-jump a:hover{border-color:var(--p-red);color:#fff}

.preview-intro,.preview-close{padding:64px 0;background:#f3eee6}
.article-layout{
  display:grid;
  grid-template-columns:220px minmax(0,760px);
  justify-content:center;
  gap:44px;
}
.preview-rail{
  align-self:start;
  position:sticky;
  top:74px;
  padding:18px 0;
  border-top:4px solid var(--p-red);
  border-bottom:1px solid #cfc6bb;
}
.preview-rail span{
  display:block;
  color:#7e776f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.preview-rail strong{
  display:block;
  margin:6px 0;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:42px;
  line-height:1;
}
.preview-rail p{margin:0;color:#7b756f;font-size:11px;line-height:1.45}
.preview-prose{font:18px/1.68 Georgia,'Times New Roman',serif}
.preview-prose p{margin:0 0 22px}
.preview-prose .drop:first-letter{
  float:left;
  padding:4px 8px 0 0;
  color:var(--p-red);
  font:76px/.72 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.pull-quote{
  margin:38px 0;
  padding:24px 0 22px;
  border-top:1px solid #c8beb1;
  border-bottom:1px solid #c8beb1;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:44px;
  line-height:.92;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.pull-quote.dark{border-color:#3a3b41;color:#fff}

.conference-section{padding:70px 0}
.east-section{
  background:
    radial-gradient(circle at 90% 8%,rgba(30,91,152,.08),transparent 24rem),
    #eae4da;
}
.west-section{
  color:#ece6df;
  background:
    radial-gradient(circle at 7% 10%,rgba(232,69,46,.15),transparent 22rem),
    #101115;
}
.conference-head{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:26px;
  align-items:end;
  margin-bottom:34px;
}
.conference-head.west{border-color:#2e3035}
.conference-code{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:86px;
  line-height:.8;
  color:#1c4f82;
}
.conference-head.west .conference-code{color:#e8452e}
.conference-head h2{
  margin:7px 0 0;
  font-size:48px;
  line-height:.9;
  letter-spacing:-.05em;
}
.conference-lead{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  max-width:980px;
  margin-bottom:34px;
  padding:26px;
  background:#f6f1e9;
  border:1px solid #d6cec3;
}
.conference-lead-number{
  color:#1c4f82;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:72px;
  line-height:.9;
}
.conference-lead h3{
  margin:0 0 10px;
  font:700 34px/1 Georgia,serif;
}
.conference-lead p{margin:0 0 10px;color:#5f5a55;font:15px/1.5 Georgia,serif}

.team-question-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.team-question{
  position:relative;
  overflow:hidden;
  min-height:300px;
  padding:22px;
  border:1px solid #d0c7bc;
  background:#f5f0e8;
}
.team-question:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:5px;
  background:#555;
}
.team-question.philly:before{background:#d51e2b}
.team-question.detroit:before{background:#1d428a}
.team-question.miami:before{background:#98002e}
.team-question.boston:before{background:#007a33}
.team-question.orlando:before{background:#0077c0}
.team-question.toronto:before{background:#ce1141}
.team-question.cleveland:before{background:#6f263d}
.team-question.indy:before{background:#002d62}
.team-question>span{
  color:#777169;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.team-question h3{
  margin:9px 0 11px;
  font:700 29px/1 Georgia,serif;
}
.team-question p{margin:0 0 13px;color:#625d57;font-size:12px;line-height:1.5}
.team-question strong{
  color:#111;
  font-size:8px;
  letter-spacing:.11em;
}

.conference-verdict{
  margin-top:28px;
  padding:22px;
  border-left:5px solid #1c4f82;
  background:#dcd4c8;
}
.conference-verdict span{
  display:block;
  margin-bottom:6px;
  color:#1c4f82;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.conference-verdict p{margin:0;font:18px/1.4 Georgia,serif}

.west-duel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:36px;
}
.duel-card{
  min-height:360px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #303137;
}
.duel-card.okc{
  background:
    radial-gradient(circle at 78% 18%,rgba(239,59,36,.35),transparent 9rem),
    linear-gradient(135deg,#0069a6,#101720 70%);
}
.duel-card.spurs{
  background:
    radial-gradient(circle at 76% 18%,rgba(196,206,211,.26),transparent 9rem),
    linear-gradient(135deg,#444a4f,#111216 68%);
}
.duel-card>span{
  color:#c6c0b8;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.duel-card h3{
  margin:8px 0 10px;
  color:#fff;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:46px;
  line-height:.88;
  text-transform:uppercase;
}
.duel-card p{margin:0;color:#d0cac4;font:14px/1.45 Georgia,serif}
.duel-callout{
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.wide-prose{max-width:820px;margin:0 auto 40px;color:#d9d2cb}
.wide-prose h3{
  color:#fff;
  font-size:34px;
  line-height:1;
}
.west-story-stack{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:#303137;
  border:1px solid #303137;
}
.west-story-stack article{
  min-height:260px;
  padding:20px;
  background:#15161a;
}
.west-story-stack span{
  color:#e8452e;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.west-story-stack h3{
  margin:8px 0 10px;
  color:#fff;
  font:700 27px/1 Georgia,serif;
}
.west-story-stack p{margin:0 0 11px;color:#aaa49d;font-size:11px;line-height:1.5}
.west-story-stack strong{color:#fff}
.west-verdict{
  border-left-color:#e8452e;
  background:#191a1f;
}
.west-verdict span{color:#ff6849}
.west-verdict p{color:#d8d1ca}

.mvp-section{
  position:relative;
  overflow:hidden;
  padding:70px 0;
  background:#efe9df;
}
.mvp-section:before{
  content:"MVP";
  position:absolute;
  right:-12px;
  top:-30px;
  color:#111;
  opacity:.03;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:280px;
  line-height:1;
}
.mvp-head{position:relative;z-index:2}
.mvp-head h2,.awards-head h2{
  margin:7px 0 5px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:72px;
  line-height:.85;
}
.mvp-head p{margin:0;color:#756e67}
.mvp-board{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:28px 0;
}
.mvp-board div{
  min-height:120px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border:1px solid #cfc6bb;
  background:#f8f3eb;
}
.mvp-board strong{font-size:16px}
.mvp-board span{
  color:#e8452e;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:42px;
}
.mvp-pick{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  padding:28px;
  color:#eee8e0;
  background:#111217;
}
.mvp-pick-number{
  color:#fdb927;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:120px;
  line-height:.8;
}
.mvp-pick span{color:#a29c95;font-size:8px;font-weight:1000;letter-spacing:.12em}
.mvp-pick h3{margin:5px 0 9px;font:700 42px/1 Georgia,serif}
.mvp-pick p{margin:0 0 10px;color:#bcb5ae;font:14px/1.5 Georgia,serif}
.mvp-line{
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid #34353a;
  color:#fff;
  font:700 22px/1.15 Georgia,serif;
}

.awards-section{padding:70px 0;background:#0d0e11;color:#eee8df}
.awards-head{margin-bottom:26px}
.awards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.award-card{
  min-height:210px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #313238;
  background:
    radial-gradient(circle at 85% 15%,rgba(232,69,46,.18),transparent 8rem),
    #16171b;
}
.award-card span{
  color:#ff6849;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.award-card strong{
  margin-top:10px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:35px;
  line-height:.88;
}
.award-card small{margin-top:8px;color:#8f8982;font-size:9px}
.award-card.dpoy{background:radial-gradient(circle at 82% 15%,rgba(190,200,205,.20),transparent 8rem),#16171b}
.award-card.roy{background:radial-gradient(circle at 82% 15%,rgba(0,71,171,.22),transparent 8rem),#16171b}
.award-card.mip{background:radial-gradient(circle at 82% 15%,rgba(120,190,32,.18),transparent 8rem),#16171b}
.award-card.coach{background:radial-gradient(circle at 82% 15%,rgba(35,97,146,.22),transparent 8rem),#16171b}
.awards-note{
  margin-top:18px;
  color:#8f8982;
  font-size:9px;
  line-height:1.7;
  letter-spacing:.04em;
}
.awards-note strong{color:#eee8df}

.finals-section{
  position:relative;
  overflow:hidden;
  padding:78px 0;
  background:
    radial-gradient(circle at 25% 20%,rgba(215,30,40,.14),transparent 22rem),
    radial-gradient(circle at 82% 70%,rgba(0,114,206,.18),transparent 24rem),
    #e8e1d7;
}
.finals-lines{
  position:absolute;
  inset:0;
  opacity:.09;
  background:
    linear-gradient(90deg,transparent 49.8%,#111 49.9% 50.1%,transparent 50.2%),
    radial-gradient(circle at 50% 50%,transparent 0 130px,#111 131px 132px,transparent 133px);
}
.finals-section .shell{position:relative;z-index:2}
.finals-label{
  display:inline-block;
  padding:7px 9px;
  color:#fff;
  background:#111;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}
.finals-matchup{
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  align-items:center;
  gap:18px;
  margin:24px 0;
}
.finals-team{
  min-height:260px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
}
.finals-team.east{background:linear-gradient(135deg,#c8102e,#0b2b58 70%)}
.finals-team.west{background:linear-gradient(135deg,#007ac1,#ef3b24 140%)}
.finals-team span{font-size:8px;font-weight:1000;letter-spacing:.13em;color:#ddd}
.finals-team strong{
  margin-top:8px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:52px;
  line-height:.86;
}
.finals-team small{margin-top:10px;color:#ddd;font-size:8px;font-weight:1000;letter-spacing:.10em}
.finals-vs{
  text-align:center;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:42px;
}
.finals-pick{
  max-width:860px;
  margin:30px auto 0;
  text-align:center;
}
.finals-pick span{
  display:block;
  color:#77716a;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}
.finals-pick strong{
  display:block;
  margin:8px 0 15px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:90px;
  line-height:.8;
}
.finals-pick p{margin:0 auto 12px;max-width:720px;color:#5f5a55;font:15px/1.5 Georgia,serif}
.tracker-box{
  max-width:700px;
  margin:34px auto 0;
  padding:20px;
  border-top:4px solid #e8452e;
  background:#d8d0c5;
  text-align:left;
}
.tracker-box span{color:#e8452e;font-size:8px;font-weight:1000;letter-spacing:.12em}
.tracker-box h3{margin:5px 0;font:700 28px/1 Georgia,serif}
.tracker-box p{margin:0;color:#625c56;font-size:11px;line-height:1.45}

.close-copy{max-width:820px;margin:0 auto}
.fact-note{
  margin-top:34px;
  padding:17px;
  border-left:4px solid #e8452e;
  background:#e4ddd2;
  color:#6e6862;
  font:11px/1.45 Arial,sans-serif;
}

@media(max-width:980px){
  .preview-hero-grid{grid-template-columns:1fr;min-height:auto}
  .preview-cover-board{min-height:480px}
  .article-layout{grid-template-columns:1fr;max-width:820px}
  .preview-rail{position:static;display:none}
  .conference-head{grid-template-columns:130px 1fr}
  .team-question-grid{grid-template-columns:1fr}
  .west-story-stack{grid-template-columns:repeat(2,1fr)}
  .awards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .preview-hero-grid{padding-top:36px;padding-bottom:36px}
  .preview-hero h1{font-size:72px}
  .preview-deck{font-size:16px}
  .preview-cover-board{min-height:390px}
  .cover-center{min-height:270px}
  .cover-question{font-size:43px}
  .cover-ball{width:180px;height:180px;margin-top:-90px}
  .cover-pick{width:170px;bottom:48px}
  .preview-intro,.preview-close,.conference-section,.mvp-section,.awards-section,.finals-section{padding:48px 0}
  .preview-prose{font-size:16px}
  .pull-quote{font-size:34px}
  .conference-head{grid-template-columns:1fr;gap:9px}
  .conference-code{font-size:64px}
  .conference-head h2{font-size:34px}
  .conference-lead{grid-template-columns:1fr;padding:20px}
  .conference-lead-number{font-size:50px}
  .conference-lead h3{font-size:28px}
  .west-duel{grid-template-columns:1fr}
  .duel-card{min-height:300px}
  .west-story-stack{grid-template-columns:1fr}
  .mvp-board{grid-template-columns:repeat(2,1fr)}
  .mvp-pick{grid-template-columns:1fr}
  .mvp-pick-number{font-size:80px}
  .awards-grid{grid-template-columns:1fr}
  .finals-matchup{grid-template-columns:1fr;gap:10px}
  .finals-vs{font-size:28px}
  .finals-team{min-height:210px}
  .finals-team strong{font-size:43px}
  .finals-pick strong{font-size:68px}
}


/* 4DK NBA PREVIEW — MOBILE WIDTH FIX */
@media(max-width:680px){
  html,
  body.season-preview-page{
    max-width:100%;
    overflow-x:hidden;
  }

  .preview-hero,
  .preview-hero .shell,
  .preview-hero-grid,
  .preview-hero-copy,
  .preview-cover-board{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .preview-hero-grid{
    display:block;
    padding-top:34px;
    padding-bottom:34px;
  }

  .preview-hero-copy{
    overflow:hidden;
  }

  .preview-hero h1{
    max-width:100%;
    margin-right:0;
    font-size:clamp(52px,16.2vw,64px);
    line-height:.80;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
  }

  .preview-deck{
    width:100%;
    max-width:100%;
    padding-right:0;
    font-size:15px;
    line-height:1.45;
    overflow-wrap:break-word;
  }

  .preview-byline{
    max-width:100%;
    line-height:1.45;
    white-space:normal;
  }

  .preview-cover-board{
    margin-top:30px;
    min-height:390px;
    overflow:hidden;
  }

  .cover-top,
  .cover-bottom{
    gap:8px;
    padding:14px;
    flex-wrap:wrap;
  }

  .cover-top b,
  .cover-bottom b{
    max-width:72%;
    text-align:right;
    line-height:1.35;
    white-space:normal;
  }

  .cover-center{
    min-height:260px;
    padding:18px;
    overflow:hidden;
  }

  .cover-question{
    max-width:68%;
    font-size:36px;
    line-height:.86;
  }

  .cover-ball{
    right:-54px;
    width:170px;
    height:170px;
    margin-top:-85px;
  }

  .cover-pick{
    right:12px;
    bottom:46px;
    width:160px;
    padding:11px;
  }

  .conference-head h2,
  .mvp-head h2,
  .awards-head h2,
  .finals-team strong,
  .finals-pick strong{
    overflow-wrap:anywhere;
  }
}


/* =========================================================
   4DK NBA SEASON PREVIEW — ANNUAL / MAGAZINE REVAMP V2
   Presentation-only refresh. Article copy remains intact.
   ========================================================= */

.preview-annual{
  position:relative;
  overflow:hidden;
  color:#f4efe7;
  background:
    radial-gradient(circle at 72% 18%,rgba(232,69,46,.28),transparent 21rem),
    radial-gradient(circle at 18% 74%,rgba(40,91,145,.18),transparent 24rem),
    #0a0b0e;
  border-bottom:1px solid #292a2f;
}
.annual-grid-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.25));
}
.annual-top-rule{
  position:relative;
  z-index:2;
  border-top:5px solid #e8452e;
  border-bottom:1px solid #303137;
  background:rgba(8,9,12,.88);
}
.annual-top-rule .shell{
  min-height:46px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
.annual-top-rule span,
.annual-top-rule b{
  font-size:8px;
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.annual-top-rule span{color:#8f8982}
.annual-top-rule b{color:#f2ece5}

.annual-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 320px;
  gap:28px;
  min-height:690px;
  padding-top:42px;
  padding-bottom:48px;
}
.annual-index{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  border-right:1px solid #303137;
  padding-right:14px;
}
.annual-index>span{
  margin-bottom:18px;
  color:#e8452e;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.annual-index div{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:5px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid #292a2f;
}
.annual-index b{
  color:#6d6862;
  font:1000 17px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.annual-index small{
  color:#aaa39c;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.11em;
}

.annual-cover{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.annual-kicker{
  color:#ff6849;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.17em;
}
.annual-year{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:7px 0 -4px;
  color:#f3ede5;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(126px,14vw,205px);
  line-height:.72;
  letter-spacing:-.05em;
}
.annual-year i{
  color:#e8452e;
  font-style:normal;
  font-size:.48em;
}
.preview-annual h1{
  max-width:800px;
  margin:22px 0 14px;
  color:#f4efe7;
  font:700 clamp(44px,5vw,72px)/.92 Georgia,'Times New Roman',serif;
  letter-spacing:-.05em;
  text-transform:none;
}
.annual-deck{
  max-width:720px;
  margin:0;
  color:#bbb4ad;
  font:17px/1.45 Georgia,'Times New Roman',serif;
}
.annual-byline{
  margin-top:23px;
  padding-top:16px;
  border-top:1px solid #303137;
  color:#77726c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}
.annual-byline a{color:#f1ebe4}

.annual-coverlines{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.coverline{
  position:relative;
  overflow:hidden;
  min-height:103px;
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #303137;
  background:#14151a;
}
.coverline:after{
  position:absolute;
  right:-7px;
  top:-16px;
  color:#fff;
  opacity:.035;
  font:1000 76px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.coverline.champs:after{content:"NYK"}
.coverline.future:after{content:"SAS"}
.coverline.lakers:after{content:"LAL"}
.coverline.philly:after{content:"PHI"}
.coverline.champs{border-left:4px solid #f58426}
.coverline.future{border-left:4px solid #c4ced4}
.coverline.lakers{border-left:4px solid #fdb927}
.coverline.philly{border-left:4px solid #ed174c}
.coverline span{
  position:relative;
  z-index:2;
  color:#8e8881;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.coverline strong{
  position:relative;
  z-index:2;
  margin-top:4px;
  color:#fff;
  font:1000 20px/.93 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.coverline small{
  position:relative;
  z-index:2;
  margin-top:6px;
  color:#77716b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
}
.annual-pick{
  margin-top:auto;
  padding:16px;
  border:1px solid #393a40;
  background:
    linear-gradient(90deg,rgba(205,31,65,.14),transparent 45%,rgba(0,114,206,.16)),
    #111217;
}
.annual-pick span,
.annual-pick strong,
.annual-pick b{display:block}
.annual-pick span{
  color:#89837d;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.annual-pick strong{
  margin-top:5px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:31px;
  line-height:.9;
}
.annual-pick b{
  margin-top:6px;
  color:#ff6849;
  font-size:10px;
  letter-spacing:.12em;
}

/* Conference issue labeling */
.conference-head{
  position:relative;
}
.conference-issue{
  position:absolute;
  left:0;
  bottom:-25px;
  color:#807971;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
}
.west-section .conference-issue{color:#6e6a65}

/* EAST — make every question feel like a mini-cover */
.team-question{
  min-height:330px;
  padding:24px 24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.88)),
    #f5f0e8;
}
.team-question:after{
  position:absolute;
  right:-10px;
  top:-16px;
  color:#111;
  opacity:.045;
  font:1000 118px/.9 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  pointer-events:none;
}
.team-question.philly:after{content:"PHI"}
.team-question.detroit:after{content:"DET"}
.team-question.miami:after{content:"MIA"}
.team-question.boston:after{content:"BOS"}
.team-question.orlando:after{content:"ORL"}
.team-question.toronto:after{content:"TOR"}
.team-question.cleveland:after{content:"CLE"}
.team-question.indy:after{content:"IND"}
.team-question>span,
.team-question h3,
.team-question p,
.team-question strong{
  position:relative;
  z-index:2;
}
.team-question h3{
  max-width:90%;
  font-size:31px;
}
.team-question>span{
  color:#e8452e;
}
.team-question strong{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid #d0c7bc;
}

/* West cards feel like game-program covers */
.duel-card{
  position:relative;
  overflow:hidden;
}
.duel-card:after{
  position:absolute;
  right:-14px;
  top:-26px;
  color:#fff;
  opacity:.055;
  font:1000 170px/.9 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.duel-card.okc:after{content:"OKC"}
.duel-card.spurs:after{content:"SAS"}
.duel-card>*{position:relative;z-index:2}

.west-story-stack{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  background:transparent;
  border:0;
}
.west-story-stack article{
  position:relative;
  overflow:hidden;
  min-height:285px;
  border:1px solid #303137;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent),
    #15161a;
}
.west-story-stack article:after{
  content:"4DK";
  position:absolute;
  right:-9px;
  top:-12px;
  color:#fff;
  opacity:.025;
  font:1000 88px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.west-story-stack article>*{position:relative;z-index:2}
.west-story-stack h3{
  margin-top:auto;
}

/* MVP — Luka vs Wemby becomes the visual headliner */
.mvp-board{
  grid-template-columns:repeat(6,1fr);
}
.mvp-board div{
  position:relative;
  overflow:hidden;
  min-height:118px;
}
.mvp-board div:nth-child(1),
.mvp-board div:nth-child(2){
  grid-column:span 3;
  min-height:250px;
  align-items:flex-end;
  color:#fff;
  border-color:#2e3035;
}
.mvp-board div:nth-child(1){
  background:
    radial-gradient(circle at 82% 22%,rgba(253,185,39,.34),transparent 10rem),
    linear-gradient(135deg,#552583,#17121f 72%);
}
.mvp-board div:nth-child(2){
  background:
    radial-gradient(circle at 80% 20%,rgba(196,206,212,.26),transparent 10rem),
    linear-gradient(135deg,#4d5358,#141518 72%);
}
.mvp-board div:nth-child(1):before,
.mvp-board div:nth-child(2):before{
  position:absolute;
  left:16px;
  top:15px;
  color:#aaa39b;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.mvp-board div:nth-child(1):before{content:"4DK MVP FAVORITE"}
.mvp-board div:nth-child(2):before{content:"BIGGEST THREAT"}
.mvp-board div:nth-child(1) strong,
.mvp-board div:nth-child(2) strong{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:54px;
  line-height:.84;
}
.mvp-board div:nth-child(1) span,
.mvp-board div:nth-child(2) span{
  font-size:92px;
  opacity:.30;
}
.mvp-board div:nth-child(n+3){
  grid-column:span 1;
}
.mvp-pick{
  border-top:5px solid #fdb927;
}

/* Awards — categories should not feel interchangeable */
.award-card{
  position:relative;
  overflow:hidden;
  min-height:230px;
}
.award-card:after{
  position:absolute;
  right:-5px;
  top:-14px;
  color:#fff;
  opacity:.035;
  font:1000 96px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.award-card.mvp:after{content:"MVP"}
.award-card.dpoy:after{content:"D"}
.award-card.roy:after{content:"ROY"}
.award-card.mip:after{content:"MIP"}
.award-card.sixth:after{content:"6"}
.award-card.coach:after{content:"COY"}
.award-card>*{position:relative;z-index:2}
.award-card.mvp{border-top:5px solid #fdb927}
.award-card.dpoy{border-top:5px solid #c4ced4}
.award-card.roy{border-top:5px solid #002b5c}
.award-card.mip{border-top:5px solid #78be20}
.award-card.sixth{border-top:5px solid #e8452e}
.award-card.coach{border-top:5px solid #236192}

/* Finals — poster treatment */
.finals-section{
  color:#f3eee6;
  background:
    linear-gradient(90deg,rgba(198,8,46,.19) 0 49.8%,rgba(0,122,193,.20) 50.2% 100%),
    #0c0d10;
}
.finals-lines{opacity:.065}
.finals-label{
  border:1px solid #3b3d42;
  background:#15161a;
}
.finals-matchup{
  position:relative;
  margin-top:36px;
}
.finals-team{
  min-height:330px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 45px rgba(0,0,0,.22);
}
.finals-team.east{
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.11),transparent 9rem),
    linear-gradient(145deg,#c8102e,#0d2f62);
}
.finals-team.west{
  background:
    radial-gradient(circle at 78% 18%,rgba(239,59,36,.25),transparent 9rem),
    linear-gradient(145deg,#007ac1,#0b283b);
}
.finals-team strong{
  font-size:64px;
}
.finals-vs{
  color:#ff6849;
  font-size:54px;
}
.finals-pick span{color:#8f8982}
.finals-pick strong{
  color:#fff;
  font-size:110px;
}
.finals-pick p{color:#b5aea7}
.tracker-box{
  color:#111;
  border-top-width:5px;
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}

/* Mobile annual cover: fit the screen while showing more information up front */
@media(max-width:980px){
  .annual-layout{
    grid-template-columns:66px minmax(0,1fr);
  }
  .annual-coverlines{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .annual-pick{margin-top:0}
}
@media(max-width:680px){
  .preview-annual{
    overflow:hidden;
  }
  .annual-top-rule .shell{
    min-height:40px;
  }
  .annual-top-rule span:last-child{display:none}
  .annual-layout{
    display:block;
    min-height:auto;
    padding-top:26px;
    padding-bottom:30px;
  }
  .annual-index{display:none}
  .annual-cover{
    width:100%;
    min-width:0;
  }
  .annual-kicker{font-size:8px}
  .annual-year{
    margin:9px 0 5px;
    font-size:34vw;
    max-font-size:140px;
    white-space:nowrap;
  }
  .preview-annual h1{
    width:100%;
    max-width:100%;
    margin:9px 0 11px;
    font-size:42px;
    line-height:.92;
    overflow-wrap:normal;
  }
  .annual-deck{
    width:100%;
    max-width:100%;
    font-size:14px;
  }
  .annual-byline{font-size:8px}
  .annual-coverlines{
    margin-top:28px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .coverline{
    min-height:115px;
    padding:12px;
  }
  .coverline strong{font-size:18px}
  .annual-pick{
    grid-column:1/-1;
  }

  .conference-issue{display:none}
  .team-question{min-height:300px}
  .team-question:after{font-size:92px}
  .team-question h3{font-size:27px}

  .west-story-stack{grid-template-columns:1fr}

  .mvp-board{
    grid-template-columns:1fr 1fr;
  }
  .mvp-board div:nth-child(1),
  .mvp-board div:nth-child(2){
    grid-column:1/-1;
    min-height:210px;
  }
  .mvp-board div:nth-child(n+3){
    grid-column:auto;
  }
  .mvp-board div:nth-child(1) strong,
  .mvp-board div:nth-child(2) strong{
    font-size:45px;
  }
  .mvp-board div:nth-child(1) span,
  .mvp-board div:nth-child(2) span{
    font-size:78px;
  }

  .finals-section{padding-top:54px;padding-bottom:54px}
  .finals-team{min-height:230px}
  .finals-team strong{font-size:46px}
  .finals-pick strong{font-size:72px}
}