/* ---------- 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:40px 0;}

  /* Diamond-bullet eyebrows restored to match the rest of the site's label treatment. */

  /* ====================================================================
     1. HERO — same eyebrow/title scale as the Team/Events/Partnerships
     heroes, sized up slightly here so the headline carries more weight
     against the photo. Tight gap into the subtext. No CTA in the hero —
     the page's actions live with the players below.
     ==================================================================== */
  .derby-hero{position:relative; overflow:hidden; min-height:420px; 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% 42%; display:block;
    filter:contrast(1.18) saturate(0.9) brightness(0.82);
  }
  .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(6,5,5,0.88) 0%, rgba(6,5,5,0.32) 58%, rgba(6,5,5,0.48) 100%),
      linear-gradient(to right, rgba(6,5,5,0.68) 0%, rgba(6,5,5,0.22) 46%, rgba(6,5,5,0) 72%);
  }
  .derby-hero-text{
    position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 32px;
    min-height:420px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  }
  .derby-hero-text .label{color:var(--gold); margin-bottom:12px;}
  .derby-hero-text .label .diamond{background:var(--gold);}
  .derby-hero-text h1{color:var(--white); font-size:clamp(40px,6vw,62px); max-width:560px; line-height:1.03;}
  .derby-hero-sub{font-size:16px; color:rgba(255,255,255,0.78); max-width:460px; margin-top:8px; line-height:1.5;}

  /* ====================================================================
     LOADING STATE — editorial, not technical. Plain white, no card, no
     rounded box, generous vertical whitespace. Fades out (not a hard cut)
     once derby-leaderboard.js reveals the real content below it.
     ==================================================================== */
  .derby-loading{background:var(--white); padding:86px 0 78px; text-align:center; transition:opacity .4s ease;}
  .derby-loading.is-hidden{opacity:0; pointer-events:none;}
  .derby-loading-inner{max-width:420px; margin:0 auto;}
  .derby-loading-ball{animation:derby-ball-spin 3.4s linear infinite;}
  @keyframes derby-ball-spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){
    .derby-loading-ball{animation:none;}
  }
  .derby-loading h2{
    margin-top:24px; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700;
    letter-spacing:0.02em; font-size:clamp(22px,2.8vw,28px); color:var(--ink);
  }
  .derby-loading p{
    margin-top:10px; font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; color:var(--grey-text);
  }

  /* The three live sections below all start [hidden] in the markup (no empty-header/
     empty-bar flash) and fade in together once JS un-hides them and adds .is-visible on
     the next frame — a deliberate reveal, not an instant pop. */
  #derby-progress, #derby-top3, #derby-team{opacity:0; transition:opacity .5s ease;}
  #derby-progress.is-visible, #derby-top3.is-visible, #derby-team.is-visible{opacity:1;}

  /* ====================================================================
     2. TEAM PROGRESS — three clear stat blocks (current balls, the fixed
     team goal, and dollars raised) so the goal reads as its own labeled
     number rather than an unexplained "/ 1,200" denominator. One thick
     bold track beneath, no explanatory copy under the stats.
     ==================================================================== */
  .derby-progress{background:var(--paper); padding:32px 0;}
  .derby-progress-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .derby-progress-head .label{color:var(--maroon); margin-bottom:0;}
  .derby-status{
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--grey-text);
  }
  .derby-status .dot{color:var(--gold); margin:0 2px;}

  .derby-progress-note{
    margin-top:14px; padding:10px 14px; border-left:3px solid var(--maroon);
    font-size:13.5px; color:#4a4741; background:rgba(134,38,51,0.05); line-height:1.5;
  }

  .derby-progress-stats{margin-top:26px; display:flex; align-items:flex-start; gap:32px; flex-wrap:wrap;}
  .derby-progress-metric{display:flex; flex-direction:column;}
  .derby-progress-num{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(38px,5.4vw,60px); line-height:0.9;
    color:var(--maroon); letter-spacing:-0.01em;
  }
  /* Team Goal is de-emphasized by scaling the glyph itself down from its bottom-left corner —
     not by giving it a smaller font-size. A smaller font-size would shrink this number's own
     line box, which would then throw off the label beneath it (it would land at a different
     height than the other two labels) even though the three columns sit in the same row.
     Scaling preserves the full-size line box for layout purposes, so the baseline and the
     label position stay identical across all three stats; only the painted glyph is smaller. */
  .derby-progress-metric.is-goal .derby-progress-num{
    color:var(--grey-text); font-weight:600;
    display:inline-block; transform:scale(0.72); transform-origin:left bottom;
  }
  .derby-progress-metric.is-goal .derby-progress-label{color:var(--grey-text);}
  .derby-progress-metric:last-child .derby-progress-num{color:var(--ink);}
  .derby-progress-label{
    margin-top:6px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--ink);
  }
  .derby-progress-div{width:1px; height:44px; margin-top:6px; background:var(--line);}

  .derby-progress-track-row{margin-top:22px; display:flex; align-items:center; gap:14px;}
  .derby-progress-track{flex:1; height:9px; background:var(--white); border:1px solid var(--line); border-radius:5px; overflow:hidden;}
  .derby-progress-fill{height:100%; background:var(--maroon); border-radius:4px; transition:width .8s ease;}
  .derby-progress-pct{
    font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; color:var(--grey-text);
    white-space:nowrap;
  }

  /* ====================================================================
     3. THE LEADERBOARD — header + a short underline sized to the heading
     text, then the top three as tight editorial panels. Rank is overlaid
     directly on the photo (gold/grey/bronze corner badge) — integrated
     into the image, not a separate label above it. No card box, no
     shadow. Sponsor actions are editorial text links, not buttons.
     ==================================================================== */
  .derby-top3{background:var(--white); padding-top:36px; padding-bottom:40px;}
  .derby-leaderboard-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .derby-top3 h2{font-size:clamp(26px,3.2vw,36px); margin:0;}
  .derby-leaderboard-rule{width:64px; height:2px; background:var(--ink); margin-top:10px;}
  .derby-leaderboard-meta{
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--grey-text);
  }

  /* All three cards are the same size — rank 1 is distinguished only by the gold rank badge
     and gold progress fill, not by a larger block. Desktop: image on top, compact info block
     beneath (column). Mobile switches to a horizontal feature-card layout — see below. */
  .derby-top3-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:start; margin-top:20px;}
  .derby-top3-card{display:flex; flex-direction:column;}

  /* Aspect ratio 9/5 — much shallower than a typical 3/4 or even 5/4 portrait box — is what
     actually produces a true "featured athlete" chest-up crop via object-fit:cover from these
     full-body source photos. Identical for all three cards; only each player's crop point
     differs, via roster-data.js's topPhotoPosition. */
  .derby-top3-photo{position:relative; aspect-ratio:9/5; overflow:hidden; background:var(--paper); flex-shrink:0;}
  .derby-top3-img{width:100%; height:100%; object-fit:cover; display:block;}

  /* Rank integrated into the photo itself — sized and inset so it reads as a placed, intentional
     mark rather than a label tucked into the corner. Solid flat color per rank (no gradient,
     shadow, or blur) — white text throughout, so color alone carries the 1/2/3 hierarchy. */
  .derby-top3-rank{
    position:absolute; left:14px; bottom:14px; z-index:2;
    display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 8px;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; color:var(--white);
    background:var(--maroon); border-radius:5px;
  }
  .derby-top3-card.is-rank-1 .derby-top3-rank{background:var(--gold); color:var(--white);}
  .derby-top3-card:nth-child(3) .derby-top3-rank{background:#3A3836; color:var(--white);}

  .derby-top3-body{padding-top:9px; display:flex; flex-direction:column;}

  .derby-top3-name{
    display:block; font-family:'Oswald',sans-serif; font-weight:700; font-size:15.5px; letter-spacing:0.02em;
    text-transform:uppercase; color:var(--ink);
  }

  /* Stats are exactly two lines: the ball count fused with its label, then the dollar amount
     and goal percentage sharing one line — never four separate rows. */
  .derby-top3-balls{margin-top:3px; font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(24px,2.9vw,30px); color:var(--maroon); line-height:1;}
  .derby-top3-balls .unit{font-size:11.5px; font-weight:600; letter-spacing:0.05em; color:var(--grey-text); text-transform:uppercase; margin-left:5px;}
  .derby-top3-meta{margin-top:3px; font-size:12.5px; color:var(--grey-text); font-weight:500;}
  .derby-top3-meta .sep{color:var(--grey-text); margin:0 2px;}
  .derby-top3-meta .of-goal{color:var(--grey-text); font-weight:500; text-transform:uppercase; font-size:11px;}

  .derby-top3-track{margin-top:6px; height:5px; background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden;}
  .derby-top3-fill{height:100%; background:var(--maroon); border-radius:2px; transition:width .7s ease;}
  .derby-top3-card.is-rank-1 .derby-top3-fill{background:var(--gold);}

  .derby-top3-cta{
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--maroon); border-bottom:2px solid var(--maroon); padding-bottom:2px; width:fit-content;
    transition:color .15s ease, border-color .15s ease;
  }
  .derby-top3-cta .arrow{transition:transform .15s ease;}
  .derby-top3-cta:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}
  .derby-top3-cta:hover .arrow{transform:translateX(3px);}

  /* ====================================================================
     4. THE STANDINGS — a standings sheet: 2 columns, 5 players per column
     (grid-auto-flow:column fills top-to-bottom within each column before
     moving to the next, rather than interleaving by row). Desktop rows
     are one compact horizontal line; mobile tiles stack their own
     contents instead of trying to keep the desktop row shape.
     ==================================================================== */
  .derby-team{background:var(--paper); padding-top:36px; padding-bottom:64px;}
  .derby-team h2{font-size:clamp(22px,2.8vw,30px); margin-bottom:16px;}

  .derby-team-list{
    list-style:none; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(5,auto);
    grid-auto-flow:column; column-gap:28px;
    border-top:1px solid var(--line);
  }
  .derby-team-tile{padding:12px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px;}

  .derby-team-tile-top{display:flex; align-items:center; gap:11px; flex:1; min-width:0;}

  /* Larger thumbnail, cropped tighter (face/head/shoulders) than the old near-full-body
     scale, and the rank overlays its corner directly — the thumbnail carries both pieces of
     identity instead of a separate number beside it. */
  .derby-team-thumb{position:relative; display:inline-block; width:54px; height:54px; border-radius:6px; overflow:hidden; background:var(--white); flex-shrink:0;}
  .derby-team-img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.9);}
  .derby-team-rank{
    position:absolute; left:3px; bottom:3px; z-index:2;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:10.5px; color:var(--white); line-height:1;
    background:rgba(13,12,11,0.6); border-radius:3px; padding:2px 4px;
  }

  .derby-team-id{display:flex; flex-direction:column; min-width:0;}
  .derby-team-name{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:0.02em;
    text-transform:uppercase; color:var(--ink); overflow-wrap:break-word;
  }
  .derby-team-stats-line{margin-top:1px; font-size:11.5px; white-space:nowrap;}
  .derby-team-balls{color:var(--maroon); font-weight:700;}
  .derby-team-amount{color:var(--grey-text); font-weight:500;}
  .derby-team-stats-line .sep{color:var(--grey-text); margin:0 3px;}

  /* Progress bar + percentage + Sponsor CTA grouped as one compact action unit, with a much
     tighter internal gap than the gap separating it from the identity block — so each row
     reads as [thumbnail+name] ......... [bar  pct  Sponsor→], not three evenly spaced parts. */
  .derby-team-action{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .derby-team-progress{display:flex; align-items:center; gap:8px; width:148px; flex-shrink:0;}
  .derby-team-track{flex:1; height:5px; background:var(--white); border:1px solid var(--line); border-radius:3px; overflow:hidden;}
  .derby-team-fill{height:100%; background:var(--maroon); border-radius:2px; transition:width .7s ease;}
  .derby-team-pct{font-size:10.5px; color:var(--grey-text); white-space:nowrap;}

  .derby-team-cta{
    display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--maroon); border-bottom:2px solid var(--maroon); padding-bottom:1px; white-space:nowrap;
    transition:color .15s ease, border-color .15s ease;
  }
  .derby-team-cta .arrow{transition:transform .15s ease;}
  .derby-team-cta:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}
  .derby-team-cta:hover .arrow{transform:translateX(3px);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .nav-links{display:none;}
    .derby-hero{min-height:380px;}
    .derby-hero-text{min-height:380px;}
  }
  @media (max-width: 640px){
    .wrap{padding:0 20px;}
    section{padding:32px 0;}
    .derby-hero{min-height:320px;}
    .derby-hero-text{min-height:320px; padding:0 20px;}

    .derby-progress{padding:28px 0;}
    .derby-progress-stats{flex-direction:column; gap:16px;}
    .derby-progress-div{display:none;}
    .derby-progress-num{font-size:clamp(32px,10.5vw,44px);}

    .derby-top3{padding-top:32px; padding-bottom:32px;}
    .derby-leaderboard-head{flex-direction:column; align-items:flex-start; gap:4px;}

    /* The three leaders go from stacked vertical cards to compact horizontal feature cards:
       photo ~40% width on the left, content on the right — never a full-width portrait image
       followed by a long text block. */
    .derby-top3-grid{grid-template-columns:1fr; gap:14px; margin-top:20px;}
    .derby-top3-card{flex-direction:row; gap:12px;}
    .derby-top3-photo{aspect-ratio:4/5; flex:0 0 38%; width:38%;}
    .derby-top3-body{padding-top:0; flex:1; justify-content:center;}
    .derby-top3-rank{left:8px; bottom:8px; min-width:30px; height:30px; font-size:14px;}
    .derby-top3-balls{font-size:24px;}
    .derby-top3-cta{margin-top:8px;}
    /* Drop "of Goal" and the CTA's first name on mobile — shorter lines, same information. */
    .derby-top3-meta .of-goal{display:none;}
    .derby-top3-cta .cta-name{display:none;}

    /* One column on mobile — each row gets the full card width instead of half, so there's
       room to keep the same compact horizontal row shape as desktop (thumbnail+name+stats,
       bar+percentage, Sponsor link) rather than stacking each tile's contents vertically. */
    .derby-team{padding-top:28px; padding-bottom:52px;}
    .derby-team-list{
      grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; column-gap:0;
    }
    .derby-team-tile{flex-direction:row; align-items:center; gap:10px;}
    .derby-team-thumb{width:50px; height:50px;}
    .derby-team-name{font-size:13px;}
    .derby-team-amount{font-size:11px;}
    .derby-team-pct{font-size:10px;}
    .derby-team-cta{font-size:10.5px;}
    .derby-team-action{gap:8px;}
    .derby-team-progress{width:100px;}
  }

  @media (prefers-reduced-motion: reduce){
    .derby-progress-fill, .derby-top3-fill, .derby-team-fill{transition-duration:0.01ms !important;}
  }