/* Primary CTAs on this page use the site-wide .btn component from base.css */

  /* ---------- NAV (identical to other interior pages) ---------- */
  header.site-nav{background:var(--ink); position:relative; z-index:60;}
  .nav-inner{max-width:var(--max); margin:0 auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between;}

  section{padding:100px 0;}

  /* ---------- HERO — full-bleed cinematic photo hero, closer to the Events/Team page treatment
     than a brochure cover. Dark gradient scrim for text legibility. The CTA is a compact,
     inline-sized button — align-self overrides the flex-column's default stretch, which is what
     causes a "full-width bar" bug if omitted. ---------- */
  .derby-hero{position:relative; overflow:hidden; min-height:600px; padding:0; background:#0f0e0c;}
  .derby-hero-ph{position:absolute; inset:0;}
  .derby-hero-ph img{
    width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;
    filter:contrast(1.12) saturate(0.92) brightness(0.92);
  }
  .derby-hero-ph::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='dhn'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23dhn)'/></svg>");
  }
  .derby-hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(to top, rgba(8,7,6,0.74) 0%, rgba(8,7,6,0.2) 48%, rgba(8,7,6,0.32) 100%),
      linear-gradient(to right, rgba(8,7,6,0.55) 0%, rgba(8,7,6,0.15) 44%, rgba(8,7,6,0) 72%);
  }
  .derby-hero-text{
    position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 32px;
    min-height:600px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  }
  .derby-hero-text .label{color:var(--gold); margin-bottom:18px;}
  .derby-hero-text .label .diamond{background:var(--gold);}
  .derby-hero-text h1{color:var(--white); font-size:clamp(36px,5.4vw,58px); max-width:560px; line-height:1.05;}
  .derby-hero-text .rule-sm{width:48px; height:2px; background:var(--gold); margin:20px 0 0;}
  .derby-hero-dek{font-size:16px; color:rgba(255,255,255,0.78); max-width:480px; margin-top:16px; line-height:1.6;}

  /* ---------- EVENT DETAILS — centered: eyebrow, headline, a gold date/time/location/cost line,
     one strong descriptive paragraph, then a true primary-button CTA. ---------- */
  .event-details{background:var(--white); padding-top:88px; padding-bottom:88px; text-align:center;}
  .event-details .sec-head{max-width:640px; margin:0 auto;}
  .event-details .sec-head .label{color:var(--maroon); justify-content:center; margin-bottom:12px;}
  .event-details .sec-head h2{font-size:clamp(26px,3.4vw,36px);}
  .event-meta{
    font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--gold); margin-top:16px;
  }
  .event-details .sec-head p{font-size:16.5px; color:var(--ink); opacity:0.82; line-height:1.6; margin-top:20px;}
  .address-line{
    margin-top:12px; font-size:13.5px; color:var(--grey-text);
  }
  .event-details .btn{margin-top:32px;}

  /* ---------- HOW IT WORKS — numbers act as the primary visual marker; steps read as a
     sequence, not four equal brochure columns. ---------- */
  .how-it-works{background:var(--paper); padding-top:96px; padding-bottom:96px;}
  .how-it-works .sec-head{text-align:center; max-width:720px; margin:0 auto 52px;}
  .how-it-works .sec-head .label{color:var(--maroon); justify-content:center; margin-bottom:14px;}
  .how-it-works .sec-head h2{font-size:clamp(26px,3.2vw,38px); line-height:1.2;}

  .prize-note{
    text-align:center; max-width:500px; margin:40px auto 0;
    font-size:14px; font-weight:500; color:#4a4741; line-height:1.5;
  }

  .steps-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:1000px; margin:0 auto; align-items:start;}
  .steps-4 .step{padding-left:26px; border-left:1px solid var(--line); padding-top:2px;}
  .steps-4 .step:first-child{padding-left:0; border-left:none;}
  .steps-4 .step .s-num{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:46px; line-height:1; color:var(--gold);
    margin-bottom:12px;
  }
  .steps-4 .step h3{font-size:14.5px; letter-spacing:0.01em; margin-bottom:8px;}
  .steps-4 .step p{font-size:13px; color:var(--grey-text); line-height:1.5;}
  .steps-4 .step p.tbd{font-style:italic;}

  /* ---------- PLAYER HEALTH (disabled) — mirrors Custom Partnerships' premium, restrained
     sponsor-feature rhythm, not an ad unit. ---------- */
  .player-health{background:var(--white); text-align:center;}
  .player-health .inner{max-width:600px; margin:0 auto;}
  .player-health .label{justify-content:center; margin-bottom:14px; color:var(--maroon);}
  .player-health p{font-size:15.5px; color:var(--grey-text); margin-top:14px; line-height:1.65;}
  .player-health .sponsor-logo-slot{margin-top:28px; font-size:12.5px; color:var(--grey-text); font-style:italic;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .nav-links{display:none;}
    .derby-hero{min-height:520px;}
    .derby-hero-text{min-height:520px;}
    .how-it-works .sec-head h2{max-width:480px; margin:0 auto;}
  }
  /* Tablet-only 2x2 step grid. Bounded with a min-width so these :nth-child overrides (which
     carry more specificity than the plain .step rule in the mobile block below) can never leak
     into the mobile breakpoint and misalign Step 2 — that mismatch was the cause of the stray
     left border/divider and horizontal shift on mobile. */
  @media (max-width: 980px) and (min-width: 641px){
    .steps-4{grid-template-columns:repeat(2,1fr); gap:32px 28px;}
    .steps-4 .step:nth-child(3){padding-left:0; border-left:none; padding-top:28px; border-top:1px solid var(--line);}
    .steps-4 .step:nth-child(2){padding-left:26px; border-left:1px solid var(--line);}
    .steps-4 .step:nth-child(4){padding-top:28px; border-top:1px solid var(--line);}
  }
  @media (max-width: 640px){
    .wrap{padding:0 20px;}
    section{padding:76px 0;}
    .derby-hero{min-height:560px;}
    .derby-hero-text{min-height:560px; padding:0 20px;}
    .derby-hero-meta{font-size:12.5px; line-height:1.9;}
    .steps-4{grid-template-columns:1fr; gap:0; max-width:340px;}
    .steps-4 .step{padding-left:0; border-left:none; padding-top:26px; padding-bottom:26px; border-top:1px solid var(--line);}
    .steps-4 .step:first-child{padding-top:0; border-top:none;}
    .steps-4 .step .s-num{font-size:40px;}
  }