/* =========================================================
   DSN — DYNASTY SPORTS NETWORK
   Design tokens: The Shield / Executive Desk system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Bebas+Neue&family=Fjalla+One&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- color: high-contrast broadcast scale per DSN Style Guide ----
     Deep ink base makes red + silver punch; panels are lifted in clear
     steps so surfaces still read as distinct (not a flat gray wash). */
  --ink:        #0B0B0E;   /* true base — lets red/silver pop */
  --ink-2:      #111116;   /* alternating section band */
  --panel:      #1A1A21;   /* card surface — clearly above base */
  --panel-2:    #24242D;   /* elevated / hover */
  --line:       #33343E;   /* hairline borders — brighter, crisper */
  --line-soft:  #26262E;
  --steel:      #C0C0C2;   /* brand silver — exact board value */
  --steel-hi:   #FFFFFF;   /* peak highlight for stat numerals */
  --steel-dim:  #8A8A90;   /* legible secondary (board gray, lifted) */
  --red:        #E41E2B;   /* brand red — exact board value */
  --red-hi:     #FF2E3C;
  --red-dim:    #7A0F17;
  --red-glow:   rgba(228,30,43,.55);
  --white:      #FFFFFF;   /* exact board value */

  /* ---- type: exact families from DSN Style Guide brand board ---- */
  --f-display:   'League Gothic', 'Arial Narrow', sans-serif;   /* Headline / Display */
  --f-secondary: 'Fjalla One', 'Arial Narrow', sans-serif;      /* Secondary — DIN Condensed stand-in (not free) */
  --f-accent:    'Bebas Neue', 'Arial Narrow', sans-serif;      /* Accent */
  --f-body:      'Montserrat', system-ui, sans-serif;           /* Body copy */

  --radius: 2px;
  --radius-lg: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:1600px;
  margin:0 auto;
  padding:0 40px;
}

/* ---------------------------------------------------------
   Focus visibility
--------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* ---------------------------------------------------------
   Utility type classes
--------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-accent);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--red);
}
.eyebrow.steel{ color:var(--steel); }

.display{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
  color:var(--white);
}

.metal{
  background:linear-gradient(180deg,#fdfdfd 0%,#c7c8ca 42%,#8b8d91 55%,#f5f5f6 60%,#a9abad 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Apply the metallic chrome treatment to major broadcast-style headlines,
   matching the beveled silver lettering seen throughout the DSN graphics */
.hero h1,
.page-head h1,
.section-head h2,
.cta-band h2,
.champ-spotlight h2,
.episode-body h3{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#B9BCC4 51%,#FFFFFF 57%,#EDEEF0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1 .red,
.champ-spotlight h2 .red{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--red);
}

/* ---------------------------------------------------------
   Angular corner-cut framing — echoes the octagonal broadcast
   plate framing used in the League Office title card / matchup graphics
--------------------------------------------------------- */
.cut-corners{
  -webkit-clip-path:polygon(
    18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%,
    0 100%, 0 18px
  );
  clip-path:polygon(
    18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%,
    0 100%, 0 18px
  );
}
.corner-brackets{ position:relative; }
.corner-brackets::before,
.corner-brackets::after{
  content:'';
  position:absolute;
  width:22px; height:22px;
  pointer-events:none;
  z-index:2;
}
.corner-brackets::before{
  top:-1px; left:-1px;
  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}
.corner-brackets::after{
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--red);
  border-right:2px solid var(--red);
}

/* Diagonal accent stripes — the signature "////" mark from the title card */
.diag-stripes{
  display:inline-flex;
  gap:5px;
  align-items:flex-end;
  height:18px;
}
.diag-stripes span{
  display:block;
  width:4px;
  height:100%;
  background:var(--red);
  transform:skewX(-20deg);
}
.diag-stripes span:nth-child(2){ opacity:.75; }
.diag-stripes span:nth-child(3){ opacity:.5; }
.diag-stripes span:nth-child(4){ opacity:.3; }

/* ---------------------------------------------------------
   Ticker (signature element)
--------------------------------------------------------- */
.ticker{
  background:var(--red);
  border-bottom:1px solid var(--red-dim);
  overflow:hidden;
  position:relative;
  height:72px;
  display:flex;
  align-items:center;
}
.ticker::before{
  content:'LEAGUE WIRE';
  font-family:var(--f-accent);
  font-weight:700;
  font-size:22px;
  letter-spacing:.12em;
  background:var(--ink);
  color:var(--white);
  padding:12px 28px;
  height:100%;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  z-index:2;
  position:relative;
  border-right:1px solid var(--line);
}
.ticker-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation:ticker 42s linear infinite;
  padding-left:100%;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  font-family:var(--f-accent);
  font-weight:600;
  font-size:19px;
  letter-spacing:.03em;
  color:#1a0203;
  text-transform:uppercase;
  padding:0 56px;
  border-right:1px solid rgba(0,0,0,.25);
}
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; overflow-x:auto; padding-left:0; }
}

/* ---------------------------------------------------------
   Nav
--------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,14,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 40px;
  max-width:1600px;
  margin:0 auto;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.brand img{ height:56px; width:auto; }
.brand-word{
  font-family:var(--f-display); font-weight:800;
  font-size:30px;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  /* metallic finish to match the shield */
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 44%,#B9BCC4 52%,#FFFFFF 58%,#EDEEF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{
  font-family:var(--f-secondary);
  font-size:9.5px;
  letter-spacing:.22em;
  color:var(--steel-dim);
  margin-top:3px;
}

.nav-links{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  justify-content:space-evenly;
  gap:4px;
  margin:0 24px;
}
.nav-links a{
  font-family:var(--f-accent);
  font-weight:500;
  font-size:18px;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--steel);
  padding:12px 6px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a.active{ color:var(--white); border-bottom-color:var(--red); }

.nav-cta{
  font-family:var(--f-accent);
  font-weight:600;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--red);
  color:var(--white);
  padding:14px 24px;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
  border:1px solid var(--red-hi);
}
.nav-cta:hover{ background:var(--red-hi); transform:translateY(-1px); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 10px;
  color:var(--white);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-accent);
  font-weight:600;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:13px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .15s ease;
}
.btn-primary{
  background:var(--red);
  color:var(--white);
  border-color:var(--red-hi);
}
.btn-primary:hover{ background:var(--red-hi); transform:translateY(-1px); }
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--steel); background:var(--panel); }

/* ---------------------------------------------------------
   Section scaffolding
--------------------------------------------------------- */
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
}
.section-head h2{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  font-size:clamp(28px,3.4vw,42px);
  margin-top:6px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#B9BCC4 51%,#FFFFFF 57%,#EDEEF0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-head h2::after{
  content:'';
  display:inline-block;
  width:38px; height:13px;
  margin-left:14px;
  vertical-align:middle;
  background-image:
    linear-gradient(-20deg, var(--red) 45%, transparent 45%),
    linear-gradient(-20deg, var(--red) 45%, transparent 45%),
    linear-gradient(-20deg, var(--red) 45%, transparent 45%),
    linear-gradient(-20deg, var(--red) 45%, transparent 45%);
  background-size:8px 100%;
  background-position:0 0, 10px 0, 20px 0, 30px 0;
  background-repeat:no-repeat;
  opacity:.9;
}
.section-head .more{
  font-family:var(--f-accent);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  white-space:nowrap;
}
.section-head .more:hover{ color:var(--red); border-color:var(--red); }

.on-black{ background:var(--ink); }
.on-raised{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;
  padding:120px 0 110px;
  background:#050507;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
/* Studio set backdrop — rendered as a real <img> so it composites
   reliably; full strength, vignette applied only at the edges */
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 66%;
  display:block;
  /* Vivid studio set — kept bright and saturated so the room reads clearly.
     Legibility is handled by the directional scrim layer instead of dimming. */
  opacity:.95;
  filter:brightness(.92) contrast(1.06) saturate(1.12);
}
/* Hard scrim above the photo, below the content — guarantees legibility
   even where pseudo-element vignettes aren't supported. */
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,5,7,.95) 0%, rgba(5,5,7,.86) 30%, rgba(5,5,7,.38) 58%, rgba(5,5,7,.12) 78%, rgba(5,5,7,.35) 100%),
    linear-gradient(180deg, rgba(5,5,7,.62) 0%, rgba(5,5,7,.06) 26%, rgba(5,5,7,.30) 68%, var(--ink) 100%);
}
/* Edge vignette + floor fade: darkens the rim and the bottom seam,
   leaves the center of the set bright */
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 95% at 50% 42%, transparent 32%, rgba(5,5,7,.72) 78%, #050507 100%),
    linear-gradient(180deg, rgba(5,5,7,.55) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
  z-index:1;
  pointer-events:none;
}
/* Studio LED light strips running down both walls */
.hero-leds{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}
.hero-leds span{
  position:absolute; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, transparent 0%, var(--red) 18%, #FF5560 50%, var(--red) 82%, transparent 100%);
  box-shadow:0 0 24px 3px rgba(228,30,43,.75), 0 0 60px 10px rgba(228,30,43,.35);
  opacity:.9;
}
.hero-leds span:nth-child(1){ left:5%; }
.hero-leds span:nth-child(2){ left:9.5%; opacity:.45; width:2px; }
.hero-leds span:nth-child(3){ right:5%; }
.hero-leds span:nth-child(4){ right:9.5%; opacity:.45; width:2px; }

/* Glossy studio floor reflection along the bottom */
.hero-floor{
  position:absolute; left:0; right:0; bottom:0;
  height:150px;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent, rgba(228,30,43,.14) 55%, rgba(228,30,43,.05) 80%, transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,.05));
}
.hero-floor::after{
  content:'';
  position:absolute; left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(228,30,43,.85) 25%, rgba(255,255,255,.55) 50%, rgba(228,30,43,.85) 75%, transparent);
  box-shadow:0 0 22px rgba(228,30,43,.7);
}

.hero-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
/* Scrim behind copy so it stays legible over the set without dulling it */
.hero-copy{
  position:relative;
  padding:34px 38px 34px 0;
}
.hero-copy::before{
  content:'';
  position:absolute; inset:-20px -60px -20px -40px;
  background:radial-gradient(ellipse 85% 80% at 30% 50%, rgba(5,5,7,.88) 40%, transparent 78%);
  z-index:-1;
}
.hero-shield{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-shield img{
  width:100%;
  max-width:440px;
  height:auto;
  filter:
    drop-shadow(0 0 60px rgba(228,30,43,.55))
    drop-shadow(0 28px 60px rgba(0,0,0,.9));
}
.hero-inner{ position:relative; z-index:1; }
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-accent);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px solid var(--line);
  background:var(--panel);
  padding:8px 14px;
  border-radius:100px;
  margin-bottom:26px;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.hero h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(46px, 7vw, 96px);
  text-transform:uppercase;
  line-height:.94;
  max-width:920px;
}
.hero h1 .red{ color:var(--red); }
.hero p.lede{
  font-size:18px;
  color:var(--steel);
  max-width:560px;
  margin-top:26px;
}
.hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-top:64px;
}
.hero-stat{
  background:var(--panel);
  padding:22px 20px;
}
.hero-stat .num{
  font-family:var(--f-display); font-weight:800;
  font-size:34px;
  color:var(--steel-hi);
}
.hero-stat .lbl{
  font-family:var(--f-accent);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-dim);
  margin-top:4px;
}

/* ---------------------------------------------------------
   Plate / panel — broadcast lower-third styled card
--------------------------------------------------------- */
.plate{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:relative;
}
.plate-bar{
  height:3px;
  background:linear-gradient(90deg,var(--red),transparent 70%);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---------------------------------------------------------
   Power rankings strip
--------------------------------------------------------- */
.rankings{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.rank-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 16px;
  transition:border-color .15s ease, transform .15s ease;
}
.rank-card:hover{ border-color:var(--steel-dim); transform:translateY(-3px); }
.rank-card .rank-num{
  font-family:var(--f-display); font-weight:800;
  font-size:30px;
  color:var(--red);
  line-height:1;
}
.rank-card.rank-1 .rank-num{ color:#ffd24a; }
.rank-card .team-name{
  font-family:var(--f-accent);
  font-weight:600;
  font-size:15px;
  margin-top:10px;
  letter-spacing:.01em;
}
.rank-card .team-record{
  font-size:12.5px;
  color:var(--steel-dim);
  margin-top:4px;
}

/* ---------------------------------------------------------
   Episode / media card
--------------------------------------------------------- */
.episode-feature{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--panel);
}
.episode-media{
  position:relative;
  min-height:340px;
  background:
    radial-gradient(circle at 30% 20%, rgba(228,30,43,.25), transparent 55%),
    linear-gradient(160deg,#26262F,#0B0B0E 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
}
.play-btn{
  width:76px; height:76px;
  border-radius:50%;
  background:rgba(228,30,43,.15);
  border:1px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.play-btn:hover{ transform:scale(1.06); background:rgba(228,30,43,.28); }
.play-btn svg{ margin-left:4px; }
.episode-media .tag{
  position:absolute; top:16px; left:16px;
  font-family:var(--f-accent);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--red);
  padding:5px 10px;
  border-radius:2px;
}
.episode-body{ padding:34px; display:flex; flex-direction:column; justify-content:center; }
.episode-body .eyebrow{ margin-bottom:10px; }
.episode-body h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(24px,2.6vw,32px);
  text-transform:uppercase;
  line-height:1.05;
}
.episode-body p{ color:var(--steel); margin-top:14px; font-size:15px; }
.episode-meta{
  display:flex; gap:18px; margin-top:22px;
  font-family:var(--f-accent);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel-dim);
}

/* episode list rows (show page) */
.ep-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.ep-row{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:20px;
  align-items:center;
  background:var(--panel);
  padding:20px 22px;
  transition:background .15s ease;
}
.ep-row:hover{ background:var(--panel-2); }
.ep-row .ep-num{ font-family:var(--f-display); font-weight:800; font-size:24px; color:var(--steel-dim); }
.ep-row .ep-title{ font-family:var(--f-accent); font-weight:600; font-size:16px; }
.ep-row .ep-desc{ font-size:13.5px; color:var(--steel-dim); margin-top:4px; }
.ep-row .ep-date{ font-family:var(--f-accent); font-size:12px; color:var(--steel-dim); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }

/* ---------------------------------------------------------
   News cards
--------------------------------------------------------- */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.news-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.news-card:hover{ transform:translateY(-4px); border-color:var(--steel-dim); }
.news-thumb{
  height:150px;
  background:linear-gradient(150deg,#24242D,#0B0B0E);
  position:relative;
  border-bottom:1px solid var(--line);
}
.news-thumb::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(228,30,43,.16), transparent 60%);
}
.news-thumb .cat{
  position:absolute; bottom:12px; left:12px;
  font-family:var(--f-accent);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); border:1px solid var(--line);
  padding:5px 10px; border-radius:2px; color:var(--steel);
}
.news-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-body h3{ font-family:var(--f-accent); font-weight:600; font-size:16.5px; line-height:1.3; }
.news-body p{ font-size:13.5px; color:var(--steel-dim); flex:1; }
.news-foot{ display:flex; justify-content:space-between; font-family:var(--f-secondary); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--steel-dim); }

/* ---------------------------------------------------------
   Three-col "league pulse"
--------------------------------------------------------- */
.pulse-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pulse-card{ padding:26px; }
.pulse-card h3{
  font-family:var(--f-accent); font-weight:600; text-transform:uppercase;
  font-size:14px; letter-spacing:.06em; color:var(--white);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.pulse-card h3 svg{ color:var(--red); flex:0 0 auto; }
.checklist{ display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--steel); }
.checklist .box{ width:16px; height:16px; border:1px solid var(--steel-dim); border-radius:2px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.checklist .box.done{ background:var(--red); border-color:var(--red); }
.checklist .strike{ text-decoration:line-through; color:var(--steel-dim); }

.standing-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.standing-row:last-child{ border-bottom:none; }
.standing-row .pos{ color:var(--steel-dim); width:20px; display:inline-block; font-family:var(--f-accent); }
.standing-row .rec{ color:var(--steel-dim); font-family:var(--f-accent); font-size:12.5px; }

.memo-line{ font-size:13.5px; color:var(--steel); padding:8px 0; border-bottom:1px solid var(--line-soft); }
.memo-line:last-child{ border-bottom:none; }
.memo-line .stamp{ color:var(--red); font-family:var(--f-accent); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-right:8px; }

/* ---------------------------------------------------------
   Teams grid
--------------------------------------------------------- */
.teams-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.team-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  transition:transform .18s ease, border-color .18s ease;
}
.team-card:hover{ transform:translateY(-4px); border-color:var(--red); }
.team-crest{
  width:54px; height:54px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--panel-2),#0d0e10);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800;
  font-size:19px;
  color:var(--steel-hi);
  margin-bottom:16px;
}
.team-card h3{ font-family:var(--f-accent); font-weight:600; font-size:16.5px; }
.team-card .owner{ font-size:12.5px; color:var(--steel-dim); margin-top:3px; }
.team-meta{ display:flex; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.team-meta .m{ text-align:left; }
.team-meta .m .v{ font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--steel-hi); }
.team-meta .m .l{ font-family:var(--f-accent); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim); }

/* ---------------------------------------------------------
   Champions page
--------------------------------------------------------- */
.champ-spotlight{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:36px;
  align-items:center;
  padding:40px;
}
.champ-trophy{
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2E2F3A, #0B0B0E 70%);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex:0 0 auto;
}
.champ-trophy::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1px solid rgba(228,30,43,.4);
  box-shadow:0 0 40px rgba(228,30,43,.25);
}
.champ-trophy svg{ color:#ffd24a; }
.champ-spotlight .eyebrow{ margin-bottom:8px; }
.champ-spotlight h2{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  font-size:clamp(30px,4vw,48px);
  line-height:1;
}
.champ-spotlight .meta-line{
  font-family:var(--f-accent);
  color:var(--steel);
  font-size:14px;
  margin-top:14px;
  letter-spacing:.02em;
}
.champ-spotlight .meta-line b{ color:var(--white); }

.champ-timeline{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.champ-row{
  display:grid;
  grid-template-columns:110px 44px 1fr auto;
  gap:20px;
  align-items:center;
  background:var(--panel);
  padding:22px;
  transition:background .15s ease;
}
.champ-row:hover{ background:var(--panel-2); }
.champ-row .season{
  font-family:var(--f-display); font-weight:800;
  font-size:22px;
  color:var(--steel-hi);
}
.champ-row .season .yr{ display:block; font-family:var(--f-accent); font-size:10.5px; letter-spacing:.08em; color:var(--steel-dim); margin-top:2px; }
.champ-row .crown{ color:#ffd24a; flex:0 0 auto; }
.champ-row .champ-name{ font-family:var(--f-accent); font-weight:600; font-size:17px; }
.champ-row .champ-vs{ font-size:12.5px; color:var(--steel-dim); margin-top:4px; }
.champ-row .champ-score{ font-family:var(--f-accent); font-size:13px; color:var(--steel); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; text-align:right; }
.champ-row.in-progress{ opacity:.6; }
.champ-row.in-progress .champ-name{ color:var(--steel); }

.trophy-case{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.trophy-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 18px; text-align:center;
  transition:border-color .15s ease, transform .15s ease;
}
.trophy-card:hover{ border-color:#ffd24a; transform:translateY(-3px); }
.trophy-card .rings{ font-family:var(--f-display); font-weight:800; font-size:26px; color:#ffd24a; }
.trophy-card .rings .n{ font-size:15px; color:var(--steel-dim); font-family:var(--f-accent); }
.trophy-card .t-name{ font-family:var(--f-accent); font-weight:600; font-size:14px; margin-top:8px; }
.trophy-card .t-years{ font-size:11.5px; color:var(--steel-dim); margin-top:4px; }

@media (max-width: 980px){
  .champ-spotlight{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:32px 24px; }
  .champ-row{ grid-template-columns:70px 30px 1fr; }
  .champ-score{ grid-column:1 / -1; text-align:left !important; padding-top:6px; }
  .trophy-case{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .trophy-case{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Team spotlight cards (real graphic assets)
--------------------------------------------------------- */
.spotlight-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.spotlight-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  aspect-ratio:3/2;
}
.spotlight-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  display:block;
}
.spotlight-card:hover img{ transform:scale(1.035); }
.spotlight-rank{
  position:absolute; top:12px; left:12px;
  font-family:var(--f-display); font-weight:800;
  font-size:15px;
  background:var(--red);
  color:var(--white);
  padding:4px 10px;
  border-radius:2px;
  z-index:2;
  letter-spacing:.02em;
}
.spotlight-rank.gold{ background:#c9a227; }

/* team detail card (used on Teams page real-data grid) */
.team-card.has-art{ padding:0; overflow:hidden; }
.team-card.has-art .art{ aspect-ratio:3/2; overflow:hidden; }
.team-card.has-art .art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.team-card.has-art:hover .art img{ transform:scale(1.04); }
.team-card.has-art .body{ padding:20px; }
.team-card .rank-chip{
  display:inline-block;
  font-family:var(--f-accent); font-weight:600; font-size:11px; letter-spacing:.06em;
  color:var(--red); border:1px solid var(--red); border-radius:2px;
  padding:2px 8px; margin-bottom:10px; text-transform:uppercase;
}
.team-card .ring-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--f-accent); font-weight:600; font-size:11px; letter-spacing:.04em;
  color:#ffd24a; border:1px solid rgba(255,210,74,.5); border-radius:2px;
  padding:2px 8px; margin-bottom:10px; margin-left:6px; text-transform:uppercase;
}

/* episode media using real title card art */
.episode-media.has-image{ padding:0; }
.episode-media.has-image img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
}
.episode-media.has-image .play-btn{ position:relative; z-index:2; }
.episode-media.has-image::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,14,.05), rgba(11,11,14,.78));
  z-index:1;
}

/* news card with real image */
.news-thumb.has-image{ background:none; }
.news-thumb.has-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-thumb.has-image::after{ background:linear-gradient(180deg, rgba(11,11,14,0) 50%, rgba(11,11,14,.88)); }

/* league crest badge (NWA mark) pairing */
.league-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-accent); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel-dim);
}
.league-badge img{ height:20px; width:20px; object-fit:contain; opacity:.85; }

/* ---------------------------------------------------------
   YouTube click-to-load facade
--------------------------------------------------------- */
.yt-facade{ cursor:pointer; }
.yt-facade iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.yt-facade .play-btn{
  transition:transform .2s ease, background .2s ease;
}
.yt-facade:hover .play-btn{ transform:scale(1.08); }

/* ---------------------------------------------------------
   Rules tabs
--------------------------------------------------------- */
.rules-tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
  padding-bottom:0;
}
.rules-tab-btn{
  font-family:var(--f-accent);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--steel-dim);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:12px 14px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.rules-tab-btn:hover{ color:var(--steel-hi); }
.rules-tab-btn.active{ color:var(--white); border-bottom-color:var(--red); }

.rules-tab-panel{ display:none; }
.rules-tab-panel.active{ display:block; animation:rulesFadeIn .2s ease; }
@keyframes rulesFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }

.rules-tab-panel h3{
  font-family:var(--f-accent);
  font-weight:600;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.rules-tab-panel .sub{
  font-family:var(--f-secondary);
  font-weight:600;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--red);
  margin:26px 0 10px;
}
.rules-tab-panel .sub:first-of-type{ margin-top:20px; }
.rules-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:4px; }
.rules-list li{
  color:var(--steel);
  font-size:14px;
  line-height:1.55;
  padding-left:18px;
  position:relative;
}
.rules-list li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:6px; height:6px;
  background:var(--red);
  border-radius:1px;
}
.rules-note{
  color:var(--steel-dim);
  font-size:13px;
  font-style:italic;
  margin-top:12px;
}

@media (max-width: 980px){
  .rules-tab-nav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}

/* ---------------------------------------------------------
   About / rules page
--------------------------------------------------------- */
.rule-block{ border-bottom:1px solid var(--line); padding:30px 0; display:grid; grid-template-columns:220px 1fr; gap:32px; }
.rule-block:first-child{ padding-top:0; }
.rule-num{ font-family:var(--f-display); font-weight:800; font-size:40px; color:var(--line); }
.rule-block h3{ font-family:var(--f-accent); font-weight:600; font-size:18px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }
.rule-block p{ color:var(--steel); font-size:14.5px; }

.doc-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }
.doc-card .stamp-tag{
  display:inline-block;
  font-family:var(--f-accent); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--red); color:var(--red); padding:4px 9px; border-radius:2px; margin-bottom:14px;
}

/* ---------------------------------------------------------
   CTA band
--------------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg, rgba(228,30,43,.14), rgba(228,30,43,.02) 60%), var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:70px 0;
  text-align:center;
}
.cta-band h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,4vw,46px); }
.cta-band p{ color:var(--steel); max-width:520px; margin:16px auto 30px; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding:56px 0 28px; background:var(--ink); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:40px; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ color:var(--steel-dim); font-size:13.5px; max-width:280px; }
.footer-col h4{ font-family:var(--f-secondary); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color:var(--steel-dim); transition:color .15s ease; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--f-accent); font-size:11.5px; letter-spacing:.04em; color:var(--steel-dim); text-transform:uppercase;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom .tag{ color:var(--red); }

/* ---------------------------------------------------------
   Page header (interior pages)
--------------------------------------------------------- */
.page-head{
  padding:64px 0 48px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 700px 350px at 10% 0%, rgba(228,30,43,.13), transparent 60%), var(--ink);
  position:relative;
}
.page-head.has-bg{
  background:
    linear-gradient(180deg, rgba(11,11,14,.84), rgba(11,11,14,.95)),
    center/cover no-repeat var(--bg-img);
}
.page-head h1{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(38px,5.5vw,64px); }
.page-head p{ color:var(--steel); max-width:560px; margin-top:14px; font-size:16px; }
.crumb{ font-family:var(--f-secondary); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:18px; }
.crumb .red{ color:var(--red); }

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-shield{ order:-1; }
  .hero-shield img{ max-width:260px; }
  .hero-copy{ padding:0; }
  .hero-copy::before{ inset:-24px -24px; background:radial-gradient(ellipse 100% 90% at 50% 50%, rgba(5,5,7,.9) 45%, transparent 82%); }
  .hero-leds span:nth-child(2), .hero-leds span:nth-child(4){ display:none; }
  .hero-leds span:nth-child(1){ left:2%; }
  .hero-leds span:nth-child(3){ right:2%; }
  .rankings{ grid-template-columns:repeat(2,1fr); }
  .episode-feature{ grid-template-columns:1fr; }
  .episode-media{ min-height:220px; }
  .news-grid{ grid-template-columns:1fr 1fr; }
  .pulse-grid{ grid-template-columns:1fr; }
  .teams-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .rule-block{ grid-template-columns:1fr; gap:10px; }
}
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .ticker{ height:52px; }
  .ticker::before{ font-size:15px; padding:8px 14px; }
  .ticker-item{ font-size:13px; padding:0 30px; }
  .brand img{ height:42px; }
  .nav{ padding:16px 18px; }
  .rankings{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:1fr; }
  .teams-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .ep-row{ grid-template-columns:40px 1fr; }
  .ep-row .ep-date{ grid-column:2; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
}

/* Mobile nav panel */
.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  padding:10px 18px 20px;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  font-family:var(--f-accent); text-transform:uppercase; letter-spacing:.06em; font-size:18px;
  color:var(--steel); padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.mobile-nav a.active{ color:var(--red); }

/* =========================================================
   DSN ORIGINALS / SHOWS — streaming-service style tiles
   ========================================================= */
.originals-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.show-tile{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--panel);
  transition:transform .2s ease, border-color .2s ease;
  display:block;
}
.show-tile:hover{ transform:translateY(-4px); border-color:var(--red); }
.show-art{
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:linear-gradient(150deg,#24242D,#0B0B0E);
}
.show-art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.show-tile:hover .show-art img{ transform:scale(1.04); }
.show-body{ padding:20px; }
.show-body h3{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; font-size:24px; line-height:1;
}
.show-body .show-meta{
  font-family:var(--f-secondary);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); margin-top:8px;
}
.show-body p{ color:var(--steel-dim); font-size:13.5px; margin-top:10px; }
.show-tile.coming{ opacity:.55; }
.show-tile.coming:hover{ transform:none; border-color:var(--line); }

.micro-label{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--f-secondary);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--red); color:#fff;
  padding:5px 9px; border-radius:2px;
}
.micro-label.ghost{ background:rgba(35,35,38,.9); border:1px solid var(--line); color:var(--steel); }

/* =========================================================
   LEAGUE DESK — newsroom block
   ========================================================= */
.desk-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.desk-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--panel);
  padding:22px 18px;
  transition:border-color .18s ease, transform .18s ease;
  display:block;
}
.desk-card:hover{ border-color:var(--red); transform:translateY(-3px); }
.desk-card .icon{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--red); margin-bottom:14px;
}
.desk-card h4{
  font-family:var(--f-accent);
  font-size:16px; letter-spacing:.03em; text-transform:uppercase;
}
.desk-card p{ color:var(--steel-dim); font-size:12.5px; margin-top:6px; }

/* =========================================================
   QUICK HITS — vertical / shorts
   ========================================================= */
.shorts-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.short-card{
  position:relative;
  aspect-ratio:9/16;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(170deg,#24242D,#0B0B0E);
  display:flex; align-items:flex-end;
  transition:border-color .18s ease, transform .18s ease;
}
.short-card:hover{ border-color:var(--red); transform:translateY(-4px); }
.short-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.short-card .short-body{
  position:relative; z-index:2;
  padding:16px;
  width:100%;
  background:linear-gradient(180deg, transparent, rgba(8,8,10,.95));
}
.short-card .short-body h4{
  font-family:var(--f-accent); font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.15;
}
.short-card .short-body span{
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel-dim);
}
.short-card .short-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(228,30,43,.18); border:1px solid var(--red);
  display:flex; align-items:center; justify-content:center; z-index:2;
}

/* =========================================================
   OWNERS GALLERY — 12 Owner Focus cards
   ========================================================= */
.owners-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.owner-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--panel);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease;
}
.owner-card:hover{ transform:translateY(-4px); border-color:var(--red); }
.owner-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.owner-card .oc-body{ padding:14px 16px 16px; }
.owner-card .oc-team{ font-family:var(--f-accent); font-size:15px; letter-spacing:.02em; }
.owner-card .oc-owner{ font-size:12px; color:var(--steel-dim); margin-top:3px; }

/* Modal */
.owner-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,5,7,.94);
  display:none;
  align-items:center; justify-content:center;
  padding:28px;
}
.owner-modal.open{ display:flex; }
.owner-modal-inner{
  max-width:1100px; width:100%;
  position:relative;
}
.owner-modal-inner img{ width:100%; height:auto; border-radius:var(--radius-lg); border:1px solid var(--line); }
.owner-modal-close{
  position:absolute; top:-44px; right:0;
  background:none; border:1px solid var(--line);
  color:var(--white); border-radius:var(--radius);
  font-family:var(--f-secondary); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px;
}
.owner-modal-close:hover{ border-color:var(--red); color:var(--red); }

/* =========================================================
   VIDEO LIBRARY — filters + grid
   ========================================================= */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:6px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.filter-btn{
  font-family:var(--f-secondary);
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel-dim);
  background:none; border:none;
  border-bottom:2px solid transparent;
  padding:12px 16px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.filter-btn:hover{ color:var(--steel-hi); }
.filter-btn.active{ color:var(--white); border-bottom-color:var(--red); }

.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.video-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--panel);
  transition:transform .18s ease, border-color .18s ease;
}
.video-card:hover{ transform:translateY(-4px); border-color:var(--red); }
.video-card.hide{ display:none; }
.video-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(150deg,#24242D,#0B0B0E); }
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb .vp{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(228,30,43,.2); border:1px solid var(--red);
  display:flex; align-items:center; justify-content:center;
}
.video-body{ padding:18px; }
.video-body h4{ font-family:var(--f-accent); font-size:16.5px; letter-spacing:.02em; }
.video-body .vmeta{ font-family:var(--f-secondary); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-dim); margin-top:6px; }

/* =========================================================
   LEAGUE OFFICE — key art hero
   ========================================================= */
.show-hero{
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--ink);
  padding:0;
}
.show-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
}
.show-hero-art{
  position:relative;
  min-height:520px;
  overflow:hidden;
}
.show-hero-art img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.show-hero-art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,11,14,.10) 0%, rgba(11,11,14,.62) 68%, var(--ink) 100%);
}
.show-hero-copy{ padding:70px 56px 70px 0; position:relative; z-index:2; }
.show-hero-copy h1{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  font-size:clamp(42px,5.4vw,72px);
  line-height:.92;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#B9BCC4 51%,#FFFFFF 57%,#EDEEF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.show-hero-copy .prog-tag{
  font-family:var(--f-secondary);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.show-hero-copy p{ color:var(--steel); font-size:16px; margin-top:18px; max-width:460px; }
.show-hero-copy .hero-actions{ margin-top:32px; }

@media (max-width: 980px){
  .originals-row{ grid-template-columns:1fr; }
  .desk-grid{ grid-template-columns:repeat(2,1fr); }
  .shorts-row{ grid-template-columns:repeat(2,1fr); }
  .owners-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:1fr 1fr; }
  .show-hero-grid{ grid-template-columns:1fr; }
  .show-hero-art{ min-height:300px; }
  .show-hero-copy{ padding:40px 0 56px; }
  .filter-bar{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}
@media (max-width: 600px){
  .desk-grid{ grid-template-columns:1fr; }
  .shorts-row{ grid-template-columns:1fr 1fr; }
  .owners-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SHARPNESS PASS — high-contrast broadcast polish
   Per DSN Style Guide: metallic surfaces, controlled glow,
   beveled framing, high contrast. Crisp, not muddy.
   ========================================================= */

/* --- Crisper body text rendering --- */
body{ text-rendering:optimizeLegibility; }

/* --- Ticker: sharper, with a bright top edge --- */
.ticker{
  border-bottom:1px solid rgba(0,0,0,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 6px 24px rgba(228,30,43,.22);
}
.ticker-item{ color:#12060a; font-weight:600; }

/* --- Header: crisp separation from content --- */
.site-header{
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 34px rgba(0,0,0,.65);
}
.nav-links a{ transition:color .14s ease, border-color .14s ease; }
.nav-links a.active{
  text-shadow:0 0 18px rgba(228,30,43,.5);
}

/* --- CTA button: gloss red finish from the board --- */
.nav-cta, .btn-primary{
  background:linear-gradient(180deg, #F02734 0%, var(--red) 48%, #B8121E 100%);
  border:1px solid #FF4B56;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 0 0 1px rgba(0,0,0,.35),
    0 6px 20px rgba(228,30,43,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.nav-cta:hover, .btn-primary:hover{
  background:linear-gradient(180deg, #FF3E4A 0%, #EE2532 48%, #C4141F 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 0 0 1px rgba(0,0,0,.35),
    0 8px 30px rgba(228,30,43,.55);
}
.btn-ghost{
  border-color:#3E404B;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
.btn-ghost:hover{ border-color:var(--steel); background:rgba(255,255,255,.07); }

/* --- Panels/cards: beveled metallic framing + depth --- */
.plate,
.team-card,
.rank-card,
.news-card,
.hero-stats,
.show-tile,
.desk-card,
.owner-card,
.video-card,
.short-card,
.trophy-card,
.doc-card,
.episode-feature,
.ep-list,
.champ-timeline{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 10px 30px rgba(0,0,0,.55);
}

/* Red edge accent on key cards — broadcast lower-third cue */
.rank-card,
.desk-card,
.news-card,
.video-card,
.show-tile{
  position:relative;
  overflow:hidden;
}
.rank-card::before,
.desk-card::before,
.news-card::before,
.video-card::before,
.show-tile::before{
  content:'';
  position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:linear-gradient(180deg, var(--red), transparent 75%);
  opacity:0;
  transition:opacity .18s ease;
  z-index:3;
}
.rank-card:hover::before,
.desk-card:hover::before,
.news-card:hover::before,
.video-card:hover::before,
.show-tile:hover::before{ opacity:1; }

/* Top-3 rank cards keep a permanent accent */
.rank-card.rank-1::before{ opacity:1; background:linear-gradient(180deg,#FFD24A,transparent 75%); }

/* Sharper hover lift + red glow */
.team-card:hover,
.news-card:hover,
.show-tile:hover,
.owner-card:hover,
.video-card:hover,
.desk-card:hover,
.short-card:hover,
.trophy-card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(228,30,43,.35),
    0 16px 44px rgba(0,0,0,.65),
    0 0 34px rgba(228,30,43,.18);
}

/* --- Stat numerals: peak-white metallic, crisper --- */
.hero-stat .num,
.team-meta .m .v,
.trophy-card .rings{
  background:linear-gradient(180deg,#FFFFFF 0%,#E6E7E9 38%,#9C9EA4 52%,#FFFFFF 58%,#C8C9CC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.01em;
}
.trophy-card .rings{
  background:linear-gradient(180deg,#FFE9A8 0%,#FFD24A 45%,#B98A16 56%,#FFE07A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- Eyebrow labels: brighter, tighter, with glow --- */
.eyebrow{
  font-weight:700;
  letter-spacing:.18em;
  text-shadow:0 0 16px rgba(228,30,43,.45);
}

/* --- Section heads: brighter divider with red ramp --- */
.section-head{
  border-bottom:none;
  padding-bottom:18px;
  position:relative;
}
.section-head::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:linear-gradient(90deg, var(--red) 0, var(--red) 90px, var(--line) 90px, var(--line) 100%);
}

/* --- Section bands: hairline separation --- */
.on-raised{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}

/* --- Images: crisper edges against dark --- */
.team-card.has-art .art,
.owner-card img,
.video-thumb,
.show-art{
  box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;
}

/* --- Corner brackets brighter --- */
.corner-brackets::before,
.corner-brackets::after{
  filter:drop-shadow(0 0 6px rgba(228,30,43,.7));
}

/* --- Ticker/hero glow separation for the CTA band --- */
.cta-band{
  background:
    radial-gradient(ellipse 800px 300px at 50% 0%, rgba(228,30,43,.22), transparent 65%),
    var(--ink-2);
}

/* --- Footer: crisper top edge --- */
.site-footer{ box-shadow:0 1px 0 rgba(255,255,255,.05) inset; }
.footer-bottom .tag{ text-shadow:0 0 16px rgba(228,30,43,.45); }

/* --- Play buttons: brighter glow --- */
.play-btn, .video-thumb .vp, .short-play{
  background:rgba(228,30,43,.22);
  border:1px solid var(--red-hi);
  box-shadow:0 0 26px rgba(228,30,43,.5), 0 1px 0 rgba(255,255,255,.25) inset;
}
.play-btn:hover{ background:rgba(228,30,43,.4); box-shadow:0 0 40px rgba(228,30,43,.7); }

/* --- Tabs: crisper active state --- */
.rules-tab-btn.active, .filter-btn.active{
  text-shadow:0 0 18px rgba(228,30,43,.45);
}
.rules-tab-nav, .filter-bar{ border-bottom:1px solid var(--line); }

/* --- Hero shield: stronger glow --- */
.hero-shield img{
  filter:
    drop-shadow(0 28px 70px rgba(228,30,43,.45))
    drop-shadow(0 4px 18px rgba(0,0,0,.85));
}

/* =========================================================
   CONTENT HUB LAYOUT — dense, news-site information density
   (modeled on Fantasy Footballers / Fantasy Guru structure)
   ========================================================= */

/* Compact hero so content starts near the fold */
.hero.hero-compact{
  padding:64px 0 60px;
  min-height:0;
  display:block;
  background:
    radial-gradient(ellipse 820px 460px at 72% 50%, rgba(228,30,43,.20), transparent 64%),
    radial-gradient(ellipse 700px 420px at 6% 10%, rgba(228,30,43,.10), transparent 60%),
    var(--ink);
}
/* Contained split hero: brand stack on the left, set photo on the right */
.hero.hero-compact .hero-bg,
.hero.hero-compact .hero-scrim,
.hero.hero-compact .hero-leds,
.hero.hero-compact .hero-floor{ display:none; }
.hero.hero-compact .hero-inner{ width:100%; }
/* no full-bleed photo behind the copy now, so drop the legibility scrim */
.hero.hero-compact .hero-copy{
  padding:0; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
/* legacy backdrop overlays from the old full-bleed hero — they were dimming the copy */
.hero.hero-compact::after,
.hero.hero-compact::before{ display:none !important; content:none !important; }
.hero.hero-compact .hero-inner{ position:relative; z-index:5; }
.hero.hero-compact .hero-actions{ justify-content:center; }
.hero.hero-compact .hero-copy::before{ display:none; }
.hero.hero-compact .hero-grid{
  display:flex;
  gap:52px;
  align-items:center;
  padding:0;
}
.hero.hero-compact .hero-copy{
  flex:1 1 0;
  min-width:0;
}
.hero.hero-compact .hero-figure{
  flex:1 1 0;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  border:none;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  -webkit-clip-path:none;
  clip-path:none;
  margin-right:0;
}
.hero-logo{ margin-bottom:26px; text-align:center; }
.hero-logo img{
  width:100%;
  max-width:440px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 0 46px rgba(228,30,43,.42)) drop-shadow(0 14px 32px rgba(0,0,0,.85));
}
.hero.hero-compact h1{ font-size:clamp(34px,3.6vw,52px); }
.hero.hero-compact .lede{
  font-size:16px;
  margin-top:16px;
  color:var(--steel);
  opacity:1;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.hero.hero-compact .hero-actions .btn{ opacity:1; }
.hero.hero-compact .hero-actions{ margin-top:24px; }
.hero-figure img{
  position:static;
  width:100%;
  max-width:600px;
  max-height:520px;
  height:auto;
  object-fit:contain;
  margin:0 auto;
  display:block;
  /* soft feather so it blends into the page without a hard frame */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite:intersect;
}
@media (max-width: 900px){
  .hero.hero-compact .hero-grid{ flex-direction:column; align-items:stretch; gap:22px; }
  .hero-logo img{ max-width:280px; }
  .hero-figure img{ max-width:100%; }
}

/* Two-column main/sidebar shell */
.hub{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:56px;
  align-items:start;
}
.hub-side{ position:sticky; top:130px; }

/* Section header, compact variant */
.mod-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px; padding-bottom:12px;
  position:relative;
}
.mod-head::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg, var(--red) 0, var(--red) 64px, var(--line) 64px, var(--line) 100%);
}
.mod-head h2{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; font-size:clamp(22px,2.4vw,30px); line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#B9BCC4 51%,#FFFFFF 57%,#EDEEF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mod-head .more{
  font-family:var(--f-secondary); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel-dim); white-space:nowrap;
}
.mod-head .more:hover{ color:var(--red); }

/* --- NEWS FEED (sidebar) — compact rows w/ timestamps --- */
.feed{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--panel);
  overflow:hidden;
}
.feed-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
  transition:background .15s ease;
}
.feed-item:last-child{ border-bottom:none; }
.feed-item:hover{ background:var(--panel-2); }
.feed-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(160deg,#2E2F3A,#0B0B0E);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:15px;
  color:var(--steel); overflow:hidden; flex:0 0 auto;
}
.feed-avatar img{ width:100%; height:100%; object-fit:cover; }
.feed-meta{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--steel-dim); margin-bottom:3px;
}
.feed-meta .tag-pos{
  color:var(--red); border:1px solid rgba(228,30,43,.45);
  padding:1px 5px; border-radius:2px;
}
.feed-item h4{
  font-family:var(--f-accent); font-size:15px; letter-spacing:.02em;
  line-height:1.15; color:var(--white);
}
.feed-item p{ font-size:12.5px; color:var(--steel-dim); margin-top:4px; line-height:1.45; }
.feed-more{
  display:block; text-align:center;
  font-family:var(--f-secondary); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
  padding:13px; border-top:1px solid var(--line);
  background:var(--ink-2);
}
.feed-more:hover{ color:var(--red); }

/* --- EPISODE ROW — compact horizontal cards --- */
.ep-row-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ep-mini{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--panel);
  transition:transform .18s ease, border-color .18s ease;
}
.ep-mini:hover{ transform:translateY(-3px); border-color:var(--red); }
.ep-mini-art{ position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(150deg,#24242D,#0B0B0E); }
.ep-mini-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.ep-mini-art .epnum{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:var(--f-display); font-weight:800; font-size:13px;
  background:var(--red); color:#fff; padding:2px 7px; border-radius:2px;
}
.ep-mini-body{ padding:13px 14px 15px; }
.ep-mini-body h4{ font-family:var(--f-accent); font-size:14.5px; line-height:1.15; letter-spacing:.02em; }
.ep-mini-body .date{
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--steel-dim); margin-top:6px;
}

/* --- ARTICLE LIST — dense rows with thumb + category --- */
.art-list{ display:flex; flex-direction:column; gap:0; }
.art-row{
  display:grid; grid-template-columns:150px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
  transition:background .15s ease;
}
.art-row:first-child{ padding-top:0; }
.art-row:last-child{ border-bottom:none; }
.art-thumb{
  aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg,#24242D,#0B0B0E);
}
.art-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.art-row:hover .art-thumb img{ transform:scale(1.05); }
.art-cat{
  display:inline-block;
  font-family:var(--f-secondary); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red);
  border:1px solid rgba(228,30,43,.45); padding:2px 7px; border-radius:2px;
  margin-bottom:8px;
}
.art-row h3{ font-family:var(--f-accent); font-size:18px; letter-spacing:.01em; line-height:1.2; }
.art-row:hover h3{ color:var(--red-hi); }
.art-row p{ font-size:13px; color:var(--steel-dim); margin-top:6px; line-height:1.5; }
.art-date{
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--steel-dim); margin-top:8px;
}

/* --- STANDINGS TABLE (tabbed) --- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl thead th{
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-dim);
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.tbl thead th.num, .tbl tbody td.num{ text-align:right; }
.tbl tbody td{
  padding:11px 12px; border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--steel);
}
.tbl tbody tr:hover td{ background:var(--panel-2); }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl .pos-cell{
  font-family:var(--f-display); font-weight:800; font-size:17px;
  color:var(--red); width:38px;
}
.tbl tr.top-seed .pos-cell{ color:#FFD24A; }
.tbl .tname{ font-family:var(--f-accent); font-size:15px; color:var(--white); letter-spacing:.02em; }
.tbl .towner{ font-size:11.5px; color:var(--steel-dim); }
.tbl-wrap{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel); }

@media (max-width: 1080px){
  .hub{ grid-template-columns:1fr; gap:44px; }
  .hub-side{ position:static; }
  .ep-row-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px){
  .ep-row-grid{ grid-template-columns:1fr 1fr; }
  .art-row{ grid-template-columns:110px 1fr; gap:12px; }
  .art-row h3{ font-size:15.5px; }
  .art-row p{ display:none; }
  .hero.hero-compact .hero-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   HALL OF CHAMPIONS — enshrinement / hall-of-fame treatment
   Gold is reserved for championship prestige per style guide
   ========================================================= */
:root{
  --gold:       #D4A63C;
  --gold-hi:    #FFE9A8;
  --gold-deep:  #8A6414;
}

/* --- Hall hero: rafters with hanging banners --- */
.hall-hero{
  position:relative;
  padding:56px 0 0;
  background:
    radial-gradient(ellipse 900px 420px at 50% 0%, rgba(212,166,60,.16), transparent 62%),
    var(--ink);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hall-hero .wrap{ position:relative; z-index:2; }
.hall-title{
  text-align:center;
  padding-bottom:34px;
  position:relative;
}
/* Gold crest, centered above the hall wording */
.hall-crest{
  display:block;
  height:150px;
  width:auto;
  margin:0 auto 22px;
  filter:drop-shadow(0 0 40px rgba(212,166,60,.55)) drop-shadow(0 10px 26px rgba(0,0,0,.85));
}
@media (max-width: 860px){
  .hall-crest{ height:104px; margin-bottom:16px; }
}
.hall-title .kicker{
  font-family:var(--f-secondary);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 0 20px rgba(212,166,60,.5);
}
.hall-title h1{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  font-size:clamp(46px,7vw,96px);
  line-height:.9;
  margin-top:10px;
  background:linear-gradient(180deg,#FFF6DC 0%,#FFE9A8 34%,#C9992E 52%,#FFF3D0 60%,#E0BD5E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hall-title p{
  color:var(--steel);
  max-width:600px; margin:16px auto 0;
  font-size:15.5px;
}

/* Rafter rail + hanging banners */
.rafter{
  position:relative;
  border-top:2px solid var(--gold-deep);
  box-shadow:0 2px 22px rgba(212,166,60,.28);
  padding-top:0;
}
.banner-row{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  padding-bottom:52px;
}
.banner{
  width:132px;
  position:relative;
  padding-top:22px;
  text-decoration:none;
  transition:transform .22s ease;
}
.banner:hover{ transform:translateY(4px); }
/* hanging cord */
.banner::before{
  content:'';
  position:absolute; top:0; left:50%;
  width:2px; height:22px;
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  transform:translateX(-50%);
}
.banner-cloth{
  background:linear-gradient(180deg,#1B1B22 0%,#141419 62%,#0E0E12 100%);
  border:1px solid var(--gold-deep);
  border-top:3px solid var(--gold);
  padding:20px 12px 34px;
  text-align:center;
  position:relative;
  box-shadow:0 12px 34px rgba(0,0,0,.7), 0 0 26px rgba(212,166,60,.14) inset;
  /* pennant point at the bottom */
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  clip-path:polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.banner-year{
  font-family:var(--f-display); font-weight:800;
  font-size:30px; line-height:1;
  background:linear-gradient(180deg,#FFF6DC,#FFE9A8 40%,#C9992E 58%,#FFE07A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.banner-label{
  font-family:var(--f-secondary);
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-top:6px;
}
.banner-team{
  font-family:var(--f-accent);
  font-size:12.5px; line-height:1.15; letter-spacing:.02em;
  color:var(--white); margin-top:10px;
}
.banner-owner{
  font-size:10.5px; color:var(--steel-dim); margin-top:3px;
}

/* --- Enshrinement plaques --- */
.plaque{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:26px;
  align-items:center;
  background:linear-gradient(160deg,#1E1E26 0%,#15151A 60%,#101014 100%);
  border:1px solid var(--gold-deep);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  margin-bottom:18px;
  position:relative;
  box-shadow:0 14px 40px rgba(0,0,0,.65), 0 1px 0 rgba(255,233,168,.14) inset;
}
.plaque::after{
  content:'';
  position:absolute; inset:6px;
  border:1px solid rgba(212,166,60,.22);
  border-radius:2px;
  pointer-events:none;
}
.plaque-medal{
  width:150px; height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, #FFF3D0 0%, #E9C567 26%, #B98A16 58%, #6F4E0C 100%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  box-shadow:0 0 34px rgba(212,166,60,.45), 0 10px 26px rgba(0,0,0,.7);
  border:2px solid #FFE9A8;
  flex:0 0 auto;
}
.plaque-medal .yr{
  font-family:var(--f-display); font-weight:800;
  font-size:34px; color:#3A2705; line-height:1;
}
.plaque-medal .lbl{
  font-family:var(--f-secondary); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#5A3F08; margin-top:4px;
}
.plaque-body .p-kicker{
  font-family:var(--f-secondary); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.plaque-body h3{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; font-size:clamp(28px,3.4vw,40px); line-height:1;
  margin-top:8px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 44%,#B9BCC4 52%,#FFFFFF 58%,#EDEEF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plaque-body .p-owner{
  font-family:var(--f-accent); font-size:15px; color:var(--gold-hi); margin-top:6px; letter-spacing:.03em;
}
.plaque-body .p-line{ color:var(--steel); font-size:13.5px; margin-top:12px; }
.plaque-score{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:14px; padding:8px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(0,0,0,.35);
  font-family:var(--f-display); font-weight:800; font-size:20px;
  color:var(--white);
}
.plaque-score .vs{
  font-family:var(--f-secondary); font-size:10px; letter-spacing:.1em;
  color:var(--steel-dim); text-transform:uppercase;
}
.plaque-shot{ margin-top:18px; }
.plaque-shot img{
  width:100%; border-radius:var(--radius);
  border:1px solid var(--line);
  display:block;
}

/* --- Leaderboard --- */
.hall-board .pos-cell{ color:var(--gold); }
.ring-dots{ display:inline-flex; gap:4px; }
.ring-dots i{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFF3D0, #D4A63C 60%, #8A6414);
  box-shadow:0 0 10px rgba(212,166,60,.6);
  display:inline-block;
}
.ring-dots i.empty{
  background:none; border:1px solid var(--line); box-shadow:none;
}

@media (max-width: 860px){
  .plaque{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .plaque-medal{ width:112px; height:112px; }
  .plaque-medal .yr{ font-size:26px; }
  .banner{ width:108px; }
  .banner-year{ font-size:24px; }
}

/* =========================================================
   CHAMPIONSHIP RINGS — all-time ring count
   ========================================================= */
.rings-grid{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.rings-grid .ring-card{ flex:1 1 0; min-width:200px; }
.ring-card{
  text-align:center;
  padding:10px 6px 4px;
}
.ring-photo{
  position:relative;
  width:100%;
  margin:0 auto 14px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 18px 42px rgba(0,0,0,.7),
    0 0 34px rgba(212,166,60,.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ring-photo img{
  width:100%; height:auto; display:block;
}
.ring-card:hover .ring-photo{
  transform:translateY(-6px);
  border-color:rgba(212,166,60,.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 24px 54px rgba(0,0,0,.8),
    0 0 52px rgba(212,166,60,.34);
}
.ring-card .ring-owner{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase;
  font-size:24px; line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 44%,#B9BCC4 52%,#FFFFFF 58%,#EDEEF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ring-card .ring-team{
  font-size:12px; color:var(--steel-dim); margin-top:6px;
}
.rings-chasing{
  margin-top:30px; padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--steel-dim); font-size:13px;
}
.rings-chasing b{ color:var(--steel); font-weight:600; }

@media (max-width: 980px){ .rings-grid{ gap:22px; } .rings-grid .ring-card{ flex:1 1 40%; min-width:180px; } }
@media (max-width: 520px){ .rings-grid{ gap:14px; } .rings-grid .ring-card{ flex:1 1 42%; min-width:140px; } .ring-card .ring-owner{ font-size:19px; } }

/* =========================================================
   HERO CAROUSEL — rotating showcase of current content
   ========================================================= */
.hero-stage{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:540px;
}
.hero-slide{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .7s ease;
  text-decoration:none;
}
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  /* feather so each slide melts into the page rather than sitting in a box */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite:intersect;
}
.slide-tag{
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-secondary);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
  background:rgba(11,11,14,.86);
  border:1px solid var(--red);
  padding:7px 14px; border-radius:2px;
  box-shadow:0 0 20px rgba(228,30,43,.4);
  white-space:nowrap;
}
.slide-tag .live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 10px var(--red);
}

/* dots */
.hero-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.hero-dots button{
  width:34px; height:4px;
  border:none; border-radius:2px;
  background:var(--line);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}
.hero-dots button:hover{ background:var(--steel-dim); }
.hero-dots button.is-active{
  background:var(--red);
  box-shadow:0 0 12px rgba(228,30,43,.65);
}

@media (max-width: 900px){
  .hero-stage{ min-height:300px; }
  .slide-tag{ font-size:10px; padding:6px 11px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}