/* ============================================================
   THE ARCTIC TRIPLE — site.css
   Palette: bg #3c3c3b · magenta #ff00db · teal #17b6c6 / #258692
   ============================================================ */

:root{
  --bg:#3c3c3b;
  --bg-panel:#333332;
  --bg-deep:#2b2b2a;
  --bg-deepest:#232322;
  --magenta:#ff00db;
  --magenta-soft:rgba(255,0,219,.14);
  --teal:#17b6c6;
  --teal-deep:#258692;
  --teal-soft:rgba(23,182,198,.13);
  --ink:#f3f3f0;
  --dim:#aaaaa5;
  --line:rgba(255,255,255,.1);
  --font-display:"Barlow Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;
  --font-body:"Inter","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius:18px;
  --max:1180px;
  --shadow-glow:0 0 28px rgba(255,0,219,.35);
  --header-h:78px;
  --strip-h:44px;
  --chrome-h:calc(var(--header-h) + var(--strip-h));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--chrome-h) + 18px)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
::selection{background:var(--magenta);color:#fff}

h1,h2:not(.h5):not(.h4),h3:not(.h4),.display{font-family:var(--font-display);text-transform:uppercase;line-height:1;letter-spacing:.01em;font-weight:700}
h1{font-size:clamp(46px,7vw,96px)}
h2{font-size:clamp(32px,4.4vw,56px)}
h3{font-size:clamp(22px,2.6vw,30px)}
.accent{color:var(--magenta)}
.accent-teal{color:var(--teal)}
.kicker{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--teal)}
.lead{color:var(--dim);font-size:17px;max-width:600px}
.section{padding:104px 24px}
.wrap{max-width:var(--max);margin:0 auto}
.section-head{margin-bottom:48px}
.section-head .kicker{display:block;margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 32px;border-radius:999px;
     font-weight:700;font-size:14px;letter-spacing:.06em;border:0;cursor:pointer;
     transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.btn-magenta{background:var(--magenta);color:#fff;box-shadow:0 0 22px rgba(255,0,219,.3)}
.btn-magenta:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.btn-ghost{border:1.5px solid var(--teal);color:var(--teal);background:transparent}
.btn-ghost:hover{background:var(--teal-soft);transform:translateY(-2px)}
.btn-dark{background:var(--bg-deepest);color:var(--ink);border:1px solid var(--line)}
.btn-dark:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{padding:10px 20px;font-size:13px}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .35s ease,box-shadow .35s ease}
/* NOTE: no backdrop-filter here — it would become the containing block for the
   fixed-position mobile menu and clip it to the header's height. */
.site-header.scrolled{background:rgba(35,35,34,.97);box-shadow:0 6px 30px rgba(0,0,0,.35)}
body.nav-open .site-header{background:transparent;box-shadow:none}
.nav-bar{position:relative;z-index:3;max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:30px;padding:14px 28px}
.nav-logo svg{height:50px;transition:transform .3s}
.nav-logo:hover svg{transform:scale(1.04)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;list-style:none}
.nav-links>li{position:relative}
.nav-links a{font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--ink);padding:8px 2px;position:relative;white-space:nowrap}
.nav-links>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--magenta);transition:right .28s ease}
.nav-links>li>a:hover::after,.nav-links>li>a[aria-current="page"]::after{right:0}
.nav-cta{background:var(--magenta);color:#fff!important;padding:11px 24px!important;border-radius:999px;box-shadow:0 0 18px rgba(255,0,219,.28)}
.nav-cta::after{display:none}
.nav-cta:hover{box-shadow:var(--shadow-glow)}
.nav-live{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--teal);border-radius:999px;padding:9px 20px!important;color:var(--teal)!important}
.nav-live::after{display:none}
.nav-live .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
/* live pulse = scaled ring pseudo (transform+opacity only → composited, no repaint jank) */
.nav-live{position:relative}
.nav-live.is-live{border-color:var(--magenta);color:#fff!important;background:var(--magenta-soft)}
.nav-live.is-live .dot{background:var(--magenta);animation:pulse-dot 1.3s infinite}
.nav-live.is-live::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;border:1.5px solid var(--magenta);
  animation:live-ring 1.8s ease-out infinite;pointer-events:none}
@keyframes pulse-dot{50%{opacity:.25}}
/* dropdown */
.has-drop .drop{position:absolute;z-index:4;top:calc(100% + 12px);left:-16px;min-width:250px;background:var(--bg-deepest);
  border:1px solid var(--line);border-radius:16px;padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-radius:10px;font-size:14px}
.drop a:hover{background:var(--teal-soft);color:var(--teal)}
.drop a small{margin-left:auto;font-size:11px;color:var(--dim);letter-spacing:.08em}
.drop .drop-sep{height:1px;background:var(--line);margin:8px 6px}
.drop a.drop-sub{padding-left:30px;font-size:13px;color:var(--dim);position:relative}
.drop a.drop-sub::before{content:"↳";position:absolute;left:13px;color:var(--teal-deep)}
/* burger */
.nav-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;z-index:100}
.nav-burger span{display:block;width:26px;height:2.5px;background:var(--ink);margin:6px 0;border-radius:2px;transition:.3s}
.nav-open .nav-burger span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

@media(max-width:1020px){
  body.nav-open{overflow:hidden}
  .nav-links{position:fixed;inset:0;margin:0;padding:104px 26px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    background:
      radial-gradient(95% 42% at 88% -4%, rgba(23,182,198,.2), transparent 62%),
      radial-gradient(80% 38% at 6% 104%, rgba(255,0,219,.16), transparent 62%),
      #232322;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s}
  .nav-open .nav-links{opacity:1;visibility:visible;pointer-events:auto}
  /* staggered entrance */
  .nav-links>li{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s ease}
  .nav-open .nav-links>li{opacity:1;transform:none}
  .nav-open .nav-links>li:nth-child(1){transition-delay:.06s}
  .nav-open .nav-links>li:nth-child(2){transition-delay:.11s}
  .nav-open .nav-links>li:nth-child(3){transition-delay:.16s}
  .nav-open .nav-links>li:nth-child(4){transition-delay:.21s}
  .nav-open .nav-links>li:nth-child(5){transition-delay:.26s}
  .nav-open .nav-links>li:nth-child(6){transition-delay:.31s}
  .nav-open .nav-links>li:nth-child(7){transition-delay:.36s}
  .nav-open .nav-links>li:nth-child(8){transition-delay:.41s}

  /* "Races" becomes a small section label */
  .nav-links .has-drop>a{font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.34em;
    text-transform:uppercase;color:var(--teal);padding:2px 4px 12px;display:block}
  .nav-links .has-drop>a::after{display:none}

  /* race list: big rows with week chips */
  /* inherit, not visible: a visible child would stay clickable inside the hidden menu */
  .has-drop .drop{position:static;opacity:1;visibility:inherit;transform:none;background:none;border:0;box-shadow:none;
    display:block;padding:0;min-width:0;margin-bottom:26px}
  .drop a{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:0;
    font-family:var(--font-display);font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.09);color:var(--ink)}
  .drop a:hover,.drop a:active{background:none;color:var(--teal)}
  .drop a small{display:inline-block;margin:0;flex:none;font-family:var(--font-body);font-size:10px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);
    padding:6px 13px;border-radius:999px}
  .drop .drop-sep{display:none}
  /* Relay + Stage Run as sub-items of Ultra-Trail */
  .drop a.drop-sub{font-family:var(--font-body);font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;
    color:var(--dim);padding:11px 4px 11px 30px;border-bottom:1px solid rgba(255,255,255,.05)}
  .drop a.drop-sub::before{content:"↳";position:absolute;left:8px;color:var(--teal-deep);font-size:15px}
  .drop a.drop-sub{position:relative}
  .drop a.drop-sub small{background:none;color:var(--dim);padding:0;font-weight:600;letter-spacing:.08em}

  /* main rows */
  .nav-links>li>a{display:flex;align-items:center;justify-content:space-between;gap:14px;
    font-family:var(--font-display);font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.09)}
  .nav-links>li>a::after{content:"→";position:static;height:auto;width:auto;background:none;right:auto;
    color:var(--magenta);font-size:19px;transition:transform .25s}
  .nav-links>li>a:active::after,.nav-links>li>a:hover::after{transform:translateX(5px)}

  /* Register + Live: full-width action buttons FIRST — always visible without scrolling */
  .nav-links li:has(.nav-cta){order:-2;border:0}
  .nav-links li:has(.nav-live){order:-1;border:0}
  .nav-links a.nav-cta{margin:0 0 12px;border-bottom:0;justify-content:center;border-radius:999px;
    padding:17px!important;font-size:15px;font-family:var(--font-body);font-weight:800;letter-spacing:.08em;
    box-shadow:0 0 28px rgba(255,0,219,.35)}
  .nav-links a.nav-cta::after{display:none}
  .nav-links a.nav-live{margin:0 0 30px;border-bottom:0;justify-content:center;gap:10px;border:1.5px solid var(--teal);
    border-radius:999px;padding:15px!important;font-size:15px;font-family:var(--font-body);font-weight:800;letter-spacing:.08em}
  .nav-links a.nav-live::after{display:none}

  .nav-burger{display:block}
}


/* ---------- Triple badges + archive strip ---------- */
.triple-badge{width:92px;height:92px;margin:0 auto 16px;display:block}
.arc-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;border-radius:var(--radius);overflow:hidden}
.arc-strip img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;
  opacity:.9;transition:opacity .3s,transform .4s}
.arc-strip:hover img{opacity:1}
.arc-strip img:hover{transform:scale(1.03)}
.arc-more{display:grid;place-content:center;text-align:center;border-radius:12px;background:var(--bg-panel);
  border:1px solid var(--line);font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.1;
  text-transform:uppercase;color:var(--ink);transition:border-color .3s,color .3s}
.arc-more small{display:block;font-family:var(--font-body);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:none;color:var(--dim);margin-top:5px}
.arc-strip:hover .arc-more{border-color:var(--teal);color:var(--teal)}
@media(max-width:860px){
  .arc-strip{grid-template-columns:repeat(3,1fr)}
  .arc-strip img:nth-child(n+5){display:none}
  .arc-more{font-size:16px}
}

/* ---------- Photo archive ---------- */
.gal-year-group{margin-bottom:48px}
.gal-year-group[hidden]{display:none}
.gal-head{display:flex;align-items:center;gap:18px;margin-bottom:20px;font-size:clamp(26px,3vw,38px)}
.gal-head span{flex:none;color:var(--magenta)}
.gal-head::after{content:"";flex:1;height:1px;background:var(--line)}
.gal-empty{padding:40px 0 10px;font-size:15px}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:920px){.gal-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
.gal-card[hidden]{display:none}   /* an explicit display beats the UA [hidden] rule */
.gal-card{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg-panel);cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ink);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.gal-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 16px 38px rgba(0,0,0,.38)}
.gal-shot{position:relative;display:block;overflow:hidden}
.gal-shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.gal-card:hover .gal-shot img{transform:scale(1.05)}
.gal-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(35,35,34,.8))}
.gal-year{position:absolute;left:16px;bottom:10px;z-index:2;font-family:var(--font-display);font-size:30px;
  font-weight:800;line-height:1;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gal-meta{display:block;padding:14px 18px 16px}
.gal-meta b{display:block;font-size:15.5px;font-weight:700}
.gal-meta small{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}

/* viewer */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,14,13,.97);display:flex;flex-direction:column}
.lb[hidden]{display:none}
.lb-stage{flex:1;margin:0;display:grid;place-items:center;padding:60px 70px 10px;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;top:14px;right:18px;z-index:3;background:none;border:0;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;padding:6px 10px}
.lb-close:hover{color:var(--magenta)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;
  background:rgba(35,35,34,.75);border:1px solid var(--line);color:#fff;font-size:30px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.2s}
.lb-nav:hover{background:var(--magenta);border-color:var(--magenta)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;color:var(--dim);font-size:13px}
.lb-bar .lb-title{font-weight:700;color:var(--ink)}
.lb-strip{display:flex;gap:8px;padding:0 18px 16px;overflow-x:auto;scrollbar-width:none}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip button{flex:none;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;
  background:none;opacity:.45;transition:.2s}
.lb-strip button.on{border-color:var(--magenta);opacity:1}
.lb-strip button:hover{opacity:1}
.lb-strip img{display:block;height:54px;width:80px;object-fit:cover}
@media(max-width:700px){
  .lb-stage{padding:52px 10px 6px}
  .lb-nav{width:42px;height:42px;font-size:24px}
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb-strip img{height:42px;width:62px}
}

/* ---------- Partner strip (inside the fixed header) ---------- */
/* the strip follows the header: see-through at the top of the page, solid once scrolled */
.partner-strip{position:relative;z-index:1;height:var(--strip-h);background:rgba(68,68,66,.28);
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .35s ease,border-color .35s ease}
.site-header.scrolled .partner-strip{background:#444442;border-top-color:rgba(255,255,255,.08);
  border-bottom-color:rgba(0,0,0,.35)}
.partner-strip .in{max-width:1280px;margin:0 auto;height:100%;padding:0 28px;display:flex;align-items:center;
  justify-content:center;gap:34px;overflow-x:auto;scrollbar-width:none}
.partner-strip .in::-webkit-scrollbar{display:none}
.partner-strip .ps-label{position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:2;
  font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:#c9c9c4;white-space:nowrap;transition:color .2s}
.partner-strip .ps-label:hover{color:var(--teal)}
.partner-strip .in a img{height:20px;width:auto;display:block;opacity:.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));transition:opacity .25s,transform .25s}
/* square mark reads smaller than the wordmarks at the same height */
.partner-strip .in a[aria-label="Thon Hotels"] img{height:27px}
.partner-strip .in a:hover img{opacity:1;transform:scale(1.06)}
body.nav-open .partner-strip{display:none}
@media(max-width:760px){
  .partner-strip .in{padding:0 14px;gap:24px;justify-content:center}
  .partner-strip .ps-label{display:none}
  .partner-strip .in a img{height:17px}
  .partner-strip .in a[aria-label="Thon Hotels"] img{height:23px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
      background:radial-gradient(130% 100% at 50% 115%, #1d444c 0%, var(--bg-deep) 48%, var(--bg) 100%)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video,.hero-media iframe{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;
  transform:translate(-50%,-50%);object-fit:cover;pointer-events:none}
.hero-media iframe{width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(35,35,34,.42) 0%,rgba(35,35,34,.25) 45%,rgba(43,43,42,.94) 100%)}
.hero-inner{position:relative;z-index:3;max-width:var(--max);margin:0 auto;padding:calc(var(--chrome-h) + 46px) 24px 90px;width:100%}
.hero .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:24px}
.hero .kicker::before{content:"";width:44px;height:2px;background:var(--magenta)}
@media(max-width:560px){
  .hero .kicker{white-space:nowrap;font-size:11px;letter-spacing:.2em;gap:10px}
  .hero .kicker::before{width:26px;flex:none}
}
@media(max-width:360px){.hero .kicker{font-size:10px;letter-spacing:.14em}}
.hero h1{max-width:900px}
.hero h1 .thin{font-weight:400;display:block;font-size:.5em;letter-spacing:.06em;color:var(--dim);margin-bottom:10px}
.hero p.lead{margin:26px 0 0;font-size:18px;max-width:560px}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:var(--dim);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll::after{content:"";width:1.5px;height:36px;background:linear-gradient(var(--teal),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* aurora sweep */
.aurora{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55;contain:strict}
.aurora span{position:absolute;filter:blur(70px);border-radius:50%;will-change:transform}
@media(max-width:760px){.aurora{opacity:.4}.aurora span{filter:blur(44px)}}
.aurora .a1{width:55vw;height:34vh;left:-8vw;top:4vh;background:linear-gradient(100deg,var(--teal),transparent 70%);animation:drift 12s ease-in-out infinite alternate}
.aurora .a2{width:46vw;height:26vh;right:-4vw;top:12vh;background:linear-gradient(260deg,var(--teal-deep),transparent 70%);animation:drift 15s ease-in-out infinite alternate-reverse}
.aurora .a3{width:30vw;height:20vh;left:36vw;top:0;background:linear-gradient(90deg,var(--magenta),transparent 75%);opacity:.4;animation:drift 10s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-3vw) skewX(-5deg)}to{transform:translateX(3vw) skewX(5deg)}}

/* countdown */
.countdown-block{margin-top:56px}
.countdown{display:inline-flex;border:1px solid rgba(23,182,198,.35);border-radius:16px;overflow:hidden;backdrop-filter:blur(6px);background:rgba(35,35,34,.35)}
.countdown div{padding:16px 26px;text-align:center;border-right:1px solid rgba(23,182,198,.22)}
.countdown div:last-child{border-right:0}
.countdown b{display:block;font-family:var(--font-display);font-size:34px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.countdown small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.countdown-label{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.countdown-label b{color:var(--magenta);font-weight:700}
/* subtle-but-visible live banner (hero) — glass panel, pulsing ring on a pseudo
   element (transform+opacity only → composited, no paint storms) */
.live-banner{display:none;position:relative;align-items:center;gap:13px;border-radius:16px;padding:15px 22px;
  font-weight:600;font-size:15px;background:rgba(35,35,34,.55);border:1.5px solid rgba(255,0,219,.65);color:var(--ink);
  max-width:600px;transition:background .25s,transform .25s}
.live-banner::after{content:"";position:absolute;inset:-1.5px;border-radius:16px;border:1.5px solid var(--magenta);
  animation:live-ring 2s ease-out infinite;pointer-events:none}
@keyframes live-ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.04);opacity:0}100%{opacity:0}}
.live-banner:hover{background:rgba(255,0,219,.13);transform:translateY(-2px)}
.live-banner .dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--magenta);animation:pulse-dot 1.2s infinite}
.live-banner .lb-tag{flex:none;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);
  animation:text-pulse 1.4s ease-in-out infinite}
@keyframes text-pulse{50%{opacity:.45}}

/* race week: the hero warms up in pink until the start gun */
.is-race-week .hero{background:radial-gradient(130% 100% at 50% 115%, #3a1d3c 0%, var(--bg-deep) 50%, var(--bg) 100%)}
.is-race-week .aurora .a3{opacity:.75}
.is-race-week .countdown{border-color:rgba(255,0,219,.5);background:rgba(255,0,219,.06)}
.is-race-week .countdown small{color:var(--magenta)}
.is-race-week .countdown-label [data-cd-prefix]{color:var(--magenta);font-weight:800}
.is-race-live .hero{background:radial-gradient(130% 100% at 50% 115%, #47204a 0%, #322030 50%, var(--bg) 100%)}
.is-race-live .aurora .a3{opacity:.85}
.live-banner b{color:#fff;font-weight:700}
.live-banner small{color:var(--dim);font-size:13px}
.live-banner .lb-go{margin-left:auto;flex:none;color:var(--magenta);font-weight:800;white-space:nowrap}
.is-race-live .live-banner{display:inline-flex}
.is-race-live .countdown-label{display:none}
@media(max-width:640px){.live-banner{display:none;flex-wrap:wrap;gap:10px}.is-race-live .live-banner{display:flex}.live-banner .lb-go{margin-left:0;flex-basis:100%}}
.is-race-live .countdown{display:none}

/* ---------- Cards & tiles ---------- */
.card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
      transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.card.hot:hover{border-color:var(--magenta)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;margin-bottom:18px;background:var(--teal-soft);color:var(--teal)}
.card.hot .ic{background:var(--magenta-soft);color:var(--magenta)}
.card h4,.card .h4{font-size:17px;font-weight:700;margin-bottom:8px;font-family:var(--font-body)}
.card p{font-size:14px;color:var(--dim)}
.card .card-go{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.card .card-go::after{content:"→";margin-left:8px;display:inline-block;transition:transform .25s}
.card:hover .card-go::after{transform:translateX(6px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.stat b{display:block;font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.05}
.stat b i{font-style:normal;color:var(--teal);font-size:16px}
.stat small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stat.hot{border-color:rgba(255,0,219,.45)}
.stat.hot b{color:var(--magenta)}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* pills */
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;white-space:nowrap}
.pill-teal{background:var(--teal-soft);color:var(--teal)}
.pill-magenta{background:var(--magenta-soft);color:var(--magenta)}
.pill-line{border:1.5px solid var(--line);color:var(--dim)}

/* ---------- Race selector legs (journey) ---------- */
.legs{display:flex;gap:14px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:13px;background:var(--bg-panel);border:1.5px solid var(--line);border-radius:999px;
     padding:10px 24px 10px 12px;cursor:pointer;transition:.28s;font-size:15px;font-weight:600;color:var(--ink)}
.leg .wk{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
         font-size:17px;background:var(--teal-soft);color:var(--teal);transition:.28s}
.leg small{display:block;font-weight:500;color:var(--dim);font-size:12px;line-height:1.3}
.leg:hover{border-color:var(--teal);transform:translateY(-2px)}
.leg.active{border-color:var(--magenta);box-shadow:0 0 24px rgba(255,0,219,.22)}
.leg.active .wk{background:var(--magenta);color:#fff}

/* ---------- Journey map ---------- */
.map-frame{background:linear-gradient(180deg,var(--bg-deepest),#28322f);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.route-line{stroke-dasharray:12 13;animation:routeflow 1.5s linear infinite}
@keyframes routeflow{to{stroke-dashoffset:-25}}
.cp-pulse{animation:cp-pulse 2.2s ease-out infinite;transform-origin:center}
@keyframes cp-pulse{0%{opacity:.8;r:8}70%{opacity:0;r:24}100%{opacity:0;r:24}}

/* ---------- Timeline (program) ---------- */
.day-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.day-tab{padding:12px 22px;border-radius:999px;border:1.5px solid var(--line);background:none;color:var(--dim);cursor:pointer;
  font-family:var(--font-display);font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:.25s}
.day-tab:hover{border-color:var(--teal);color:var(--teal)}
.day-tab.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.timeline{position:relative;padding-left:34px;max-width:760px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--teal),var(--teal-deep))}
.tl-item{position:relative;padding:0 0 30px 22px}
.tl-item::before{content:"";position:absolute;left:-31px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:3px solid var(--teal);transition:.25s}
.tl-item.hot::before{border-color:var(--magenta);box-shadow:0 0 14px rgba(255,0,219,.5)}
.tl-item time{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--teal);letter-spacing:.03em}
.tl-item.hot time{color:var(--magenta)}
.tl-item h4,.tl-item .h4{font-size:16px;font-weight:700;margin:2px 0 4px}
.tl-item p{font-size:14px;color:var(--dim);max-width:520px}
.tl-item .pill{margin-left:10px;vertical-align:2px}

/* ---------- Distance table rows ---------- */
.dist-list{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dist-row{display:grid;grid-template-columns:130px 1fr auto auto;gap:18px;align-items:center;padding:20px 26px;
  border-bottom:1px solid var(--line);transition:background .25s}
.dist-row:last-child{border-bottom:0}
.dist-row:hover{background:rgba(23,182,198,.06)}
.dist-row .d{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1}
.dist-row .d small{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:.16em;color:var(--dim);font-weight:600;margin-top:3px}
.dist-row .info{font-size:14px;color:var(--dim)}
.dist-row .info b{color:var(--ink);font-weight:600}
.dist-row .links{display:flex;gap:14px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dist-row .links a{color:var(--teal)}
.dist-row .links a:hover{color:var(--magenta)}
@media(max-width:760px){
  .dist-row{grid-template-columns:1fr auto;row-gap:10px;align-items:start;padding:18px 20px}
  .dist-row .d{grid-column:1;grid-row:1}
  .dist-row .pill{grid-column:2;grid-row:1;justify-self:end;align-self:center}
  .dist-row .info{grid-column:1/-1;grid-row:2}
  .dist-row .links{grid-column:1/-1;grid-row:3;display:flex;gap:20px}
}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}
.reveal-right.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s ease,transform .7s ease}
.reveal-scale.in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:.09s}
[data-stagger].in>*:nth-child(3){transition-delay:.18s}
[data-stagger].in>*:nth-child(4){transition-delay:.27s}
[data-stagger].in>*:nth-child(5){transition-delay:.36s}
[data-stagger].in>*:nth-child(6){transition-delay:.45s}
[data-stagger].in>*:nth-child(7){transition-delay:.54s}
[data-stagger].in>*:nth-child(8){transition-delay:.63s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale,[data-stagger]>*{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Film modal ---------- */
.film-modal{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.92);display:none;align-items:center;justify-content:center;padding:5vw}
.film-modal.open{display:flex}
.film-modal .frame{width:min(1100px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);position:relative}
.film-modal iframe{width:100%;height:100%;border:0}
.film-close{position:absolute;top:26px;right:30px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1;z-index:2}
.film-close:hover{color:var(--magenta)}
.btn-play{display:inline-flex;align-items:center;gap:12px}
.btn-play .tri{width:38px;height:38px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:13px;padding-left:3px;transition:.25s}
.btn-play:hover .tri{background:var(--magenta);color:#fff;transform:scale(1.12)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:var(--bg-deep)}
.marquee-track{display:inline-block;animation:marquee 30s linear infinite;font-family:var(--font-display);font-size:20px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);will-change:transform}
.marquee-track i{font-style:normal;color:var(--magenta);margin:0 22px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-deepest);border-top:1px solid var(--line);margin-top:40px}
.footer-grid{max-width:var(--max);margin:0 auto;padding:70px 24px 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.footer-grid h5,.footer-grid h2.h5{font-family:var(--font-body);font-weight:700;line-height:inherit;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:11px}
.footer-grid a{font-size:14px;color:var(--ink);opacity:.85;transition:.2s}
.footer-grid a:hover{color:var(--teal);opacity:1}
/* direct child only: the social icons are svgs inside .footer-brand too, and
   picked up this margin, which pushed every icon 9px above centre */
.footer-brand > svg{height:56px;margin-bottom:18px}
.footer-brand p{font-size:13.5px;color:var(--dim);max-width:280px}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .in{max-width:var(--max);margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.social{display:flex;gap:12px;margin-top:22px}
.social a{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.24);border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--ink);opacity:1;
  transition:border-color .25s,color .25s,background .25s,box-shadow .25s,transform .25s}
.social a:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(255,0,219,.08);
  box-shadow:0 0 18px rgba(255,0,219,.25);transform:translateY(-3px)}
.social a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- Page hero (sub pages) ---------- */
.page-hero{position:relative;padding:calc(var(--chrome-h) + 66px) 24px 90px;overflow:hidden;
  background:radial-gradient(120% 110% at 50% 120%,#1d444c 0%,var(--bg-deep) 52%,var(--bg) 100%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumbs{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.page-hero .crumbs a:hover{color:var(--teal)}
.page-hero .crumbs i{font-style:normal;color:var(--magenta);margin:0 8px}
.page-hero h1{max-width:900px}
.page-hero .lead{margin-top:20px}
.page-hero .hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Quick chips (manual quick actions) ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink);transition:.22s;cursor:pointer;background:var(--bg-panel);
  white-space:nowrap;flex:none}
.chip b{color:var(--teal);font-weight:800}
.chip:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.chip.hot{border-color:var(--magenta);color:#fff;background:var(--magenta-soft)}
.chip.hot:hover{background:var(--magenta);border-color:var(--magenta)}

/* ---------- Search ---------- */
.search-box{position:relative;max-width:560px}
.search-box input{width:100%;padding:16px 22px 16px 52px;border-radius:999px;background:var(--bg-deepest);
  border:1.5px solid var(--line);color:var(--ink);font-size:15px;font-family:var(--font-body);outline:none;transition:.25s}
.search-box input::placeholder{color:var(--dim)}
.search-box input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(23,182,198,.14)}
.search-box .mag{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--bg-deepest);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);display:none;max-height:420px;overflow-y:auto;z-index:60}
.search-results.open{display:block}
.search-results a{display:block;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;transition:background .15s}
.search-results a:last-child{border-bottom:0}
.search-results a:hover,.search-results a.sel{background:var(--teal-soft)}
.search-results .sr-t{font-weight:700;display:flex;align-items:center;gap:8px}
.search-results .sr-t .pill{font-size:9.5px;padding:3px 9px}
.search-results .sr-s{color:var(--dim);font-size:12.5px;margin-top:3px;line-height:1.45;display:block}
.search-results mark{background:none;color:var(--magenta);font-weight:700}
.search-results .sr-empty{padding:18px 20px;color:var(--dim);font-size:14px}

/* ---------- Manual layout ---------- */
.manual-bar{position:sticky;top:var(--chrome-h);z-index:80;background:rgba(35,35,34,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:14px 24px}
.manual-bar .in{max-width:var(--max);margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.manual-bar .search-box{flex:1;min-width:230px;max-width:420px}
.manual-bar .search-box input{padding:12px 18px 12px 46px;font-size:14px}
.manual-bar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.manual-bar .chips::-webkit-scrollbar{display:none}
.manual-bar .chip{white-space:nowrap;padding:9px 16px;font-size:12.5px}
.manual-section{max-width:860px;margin:0 auto;padding:26px 24px;scroll-margin-top:calc(var(--chrome-h) + 76px)}
.manual-section + .manual-section{border-top:1px solid var(--line)}
.manual-section h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px;display:flex;align-items:baseline;gap:14px}
.manual-section h2::before{content:attr(data-no);font-size:15px;color:var(--magenta);font-family:var(--font-body);font-weight:800;letter-spacing:.06em}
.manual-section h3{font-size:19px;margin:26px 0 10px;color:var(--teal);font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:0}
.manual-section p{margin-bottom:14px;color:#d8d7d2;font-size:15.5px}
.manual-section p a,.manual-section li a{color:var(--teal);font-weight:600;border-bottom:1.5px solid rgba(23,182,198,.45);transition:.2s}
.manual-section p a:hover,.manual-section li a:hover{color:var(--magenta);border-color:var(--magenta)}
.manual-section .btn{border-bottom:1.5px solid var(--teal)}
.manual-section ul,.manual-section ol{margin:0 0 16px 22px;color:#d8d7d2;font-size:15.5px}
.manual-section li{margin-bottom:8px}
.manual-section .note{background:var(--magenta-soft);border-left:3px solid var(--magenta);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:18px 0;font-size:14.5px}
.manual-section .note b{color:var(--magenta)}
.manual-section table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px}
.manual-section th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px 14px;border-bottom:2px solid var(--teal-deep)}
.manual-section td{padding:11px 14px;border-bottom:1px solid var(--line)}
.manual-section tr:hover td{background:rgba(23,182,198,.05)}
.manual-section td:first-child{font-weight:700;white-space:nowrap}
.table-scroll{overflow-x:auto}
.manual-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.manual-facts .stat{min-width:150px;flex:1}
mark.hl{background:rgba(255,0,219,.3);color:#fff;border-radius:3px;padding:0 2px}

/* photo card figure (race cards) */
.race-figure{position:relative;overflow:hidden}
/* height:auto is required, otherwise the img height attribute wins and aspect-ratio is ignored */
.race-figure img{display:block;width:100%;height:auto;aspect-ratio:400/180;object-fit:cover;transition:transform .55s ease}
@media(max-width:860px){.race-figure img{aspect-ratio:16/9}}
.race-card:hover .race-figure img{transform:scale(1.05)}
.race-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(35,35,34,.75))}
.race-week{position:absolute;left:18px;top:12px;z-index:2;font-family:var(--font-display);font-size:26px;font-weight:800;
  line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);
  max-width:calc(100% - 36px)}
@media(max-width:560px){.race-week{font-size:23px}}

/* ---------- Full-bleed film band ---------- */
.film-band{position:relative;background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* stage keeps 16:9 but never eats more than 78% of the screen height;
   the player is sized 16:9 to the full width and cropped by the stage */
.film-stage{position:relative;width:100%;height:min(56.25vw,78vh);overflow:hidden;background:#000 center/cover no-repeat}
.film-stage iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:56.25vw;min-height:100%;border:0;display:block}
.film-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.film-band.is-ready .film-stage{background-image:none}

.film-bar{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.film-bar .film-title{font-family:var(--font-display);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.film-bar .film-title small{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--dim);margin-top:2px}
.film-bar .spacer{margin-left:auto}
.film-band .chip{background:rgba(35,35,34,.85)}
@media(max-width:620px){
  .film-bar{padding:14px 20px;gap:10px}
  .film-bar .spacer{margin-left:0;flex-basis:100%;height:0}
}
@media(prefers-reduced-motion:reduce){.film-stage{height:min(56.25vw,70vh)}}

/* ---------- Venue map ---------- */
.venue{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
.venue-map{height:520px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#e9e5dc;position:relative;z-index:1}
.venue-map.is-dark{background:#1c2a30}
/* attribution/scale readable on the light basemap */
.venue-map .leaflet-control-attribution{background:rgba(255,255,255,.82)!important;color:#444!important}
.venue-map .leaflet-control-attribution a{color:#0f8b98!important}
.venue-map.is-dark .leaflet-control-attribution{background:rgba(35,35,34,.8)!important;color:#8f8f8a!important}
.venue-map .leaflet-control-scale-line{background:rgba(255,255,255,.75);color:#333;border-color:#666}
.venue-map.is-dark .leaflet-control-scale-line{background:rgba(35,35,34,.7);color:#eee;border-color:#888}
@media(max-width:900px){.venue-map{height:380px}}
/* numbered pins */
.venue-pin span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:var(--font-display);
  font-size:18px;font-weight:800;line-height:1;border:2.5px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.6);
  transition:transform .2s}
.venue-pin:hover span{transform:scale(1.15)}
/* leaflet.css is injected at runtime (after site.css), so these need !important */
.leaflet-popup-content-wrapper{background:var(--bg-deepest)!important;color:var(--ink)!important;
  border:1px solid var(--line);border-radius:14px!important;box-shadow:0 8px 28px rgba(0,0,0,.45)!important}
.leaflet-popup-content{font-family:var(--font-body);font-size:13.5px;line-height:1.5;margin:12px 14px!important;color:var(--ink)}
.leaflet-popup-content b{color:var(--magenta)}
.leaflet-popup-tip{background:var(--bg-deepest)!important}
.leaflet-container a.leaflet-popup-close-button{color:var(--dim)!important}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--magenta)!important}
.leaflet-tooltip{background:var(--bg-deepest)!important;border:1px solid var(--line)!important;color:var(--ink)!important;
  font-family:var(--font-body);font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.4)!important}
.leaflet-tooltip-top:before{border-top-color:var(--bg-deepest)!important}
.leaflet-tooltip-left:before{border-left-color:var(--bg-deepest)!important}
.leaflet-tooltip-right:before{border-right-color:var(--bg-deepest)!important}
.leaflet-tooltip-bottom:before{border-bottom-color:var(--bg-deepest)!important}
.leaflet-bar a{background:var(--bg-deepest);color:var(--ink);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--bg-panel);color:var(--teal)}
.venue-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.venue-legend .vl{display:flex;align-items:flex-start;gap:14px;background:var(--bg-panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;transition:border-color .22s,transform .22s;cursor:pointer}
.venue-legend .vl:hover{border-color:var(--teal);transform:translateX(3px)}
.vl-no{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1}
.vl-txt{flex:1;min-width:0}
.vl-txt b{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px}
.vl-txt small{display:block;font-size:12.5px;color:var(--dim);line-height:1.45}
.vl-go{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  color:var(--teal);font-size:15px;text-decoration:none;transition:.2s}
.vl-go:hover{border-color:var(--magenta);color:var(--magenta);background:var(--magenta-soft)}
@media(max-width:900px){.venue{grid-template-columns:1fr;gap:16px}}

/* ---------- Course map (manuals) ---------- */
.course-map .cm-map{height:430px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#1c2a30;z-index:1;position:relative}
.course-map .cm-profile{position:relative;background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;margin-top:14px;padding:12px 10px 6px}
.course-map .cm-profile svg{cursor:crosshair}
.cm-tip{position:absolute;top:10px;background:#000;color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;pointer-events:none;white-space:nowrap;border:1px solid var(--magenta)}
.cm-tracks{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.leaflet-container{font-family:var(--font-body)}
.leaflet-control-attribution{background:rgba(35,35,34,.8)!important;color:#8f8f8a!important;font-size:9.5px!important}
.leaflet-control-attribution a{color:#17b6c6!important}
@media(max-width:700px){.course-map .cm-map{height:320px}}

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--magenta);color:#fff;font-weight:700;padding:12px 22px;border-radius:999px;transition:top .2s}
.skip-link:focus{top:14px}

/* back to top */
.to-top{position:fixed;right:20px;bottom:20px;z-index:70;width:52px;height:52px;border-radius:50%;background:var(--magenta);
  border:0;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;
  transition:.3s;font-size:20px;font-weight:700;box-shadow:0 6px 24px rgba(255,0,219,.45)}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(255,0,219,.6)}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:32px}}
.figure{border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.figure svg{display:block;width:100%}

/* button rows */
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
@media(max-width:560px){
  .btn-row,.hero-actions,.hero-cta{flex-direction:column;align-items:stretch}
  .btn-row .btn,.hero-actions .btn,.hero-cta .btn{width:100%;justify-content:center}
}

/* ---------- Mobile tightening ---------- */
@media(max-width:760px){
  :root{--header-h:66px;--strip-h:36px}
  .nav-bar{padding:12px 18px}
  .nav-logo svg{height:40px}
  .hero-inner{padding-top:calc(var(--chrome-h) + 34px);padding-bottom:70px}
  .page-hero{padding-top:calc(var(--chrome-h) + 44px);padding-bottom:56px}
  .section{padding:72px 20px}
  .countdown div{padding:12px 13px}
  .countdown b{font-size:24px}
  .hero-cta .btn{padding:14px 24px;font-size:13px}
  .stats{gap:12px}
  .stat b{font-size:24px}
  .footer-grid{grid-template-columns:1fr;gap:30px;padding-top:52px}
  .split{gap:24px}
  .manual-facts .stat{min-width:120px}
  h2{letter-spacing:.02em}
}

/* utility */
.tc{text-align:center}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}
.dim{color:var(--dim)}
.rule{width:64px;height:4px;background:var(--magenta);border-radius:2px;margin-bottom:20px}
.rule-c{margin-left:auto;margin-right:auto}

/* ============================================================
   HERO ORB — race photos cross-fading in a circle
   The pool and the order come from hero-orb in site.js, which
   alternates between the three races so two shots of the same
   race never follow each other.
   ============================================================ */
.hero-orb{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:2;
  width:clamp(300px,31vw,430px);aspect-ratio:1;pointer-events:none}
.orb-frame{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
.orb-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .85s ease}
.orb-slide.on{opacity:1}
/* 2px ring with a slowly turning magenta/teal gradient */
.orb-ring{position:absolute;inset:-13px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--magenta),var(--teal) 30%,transparent 55%,transparent 72%,var(--magenta));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:orbSpin 22s linear infinite}
.orb-halo{position:absolute;inset:-34px;border-radius:50%;border:1px dashed rgba(255,255,255,.14);
  animation:orbSpin 70s linear infinite reverse}
.orb-halo::after{content:"";position:absolute;inset:-26px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,0,219,.16),transparent 68%);filter:blur(16px)}
@keyframes orbSpin{to{transform:rotate(360deg)}}
/* keep the headline clear of the orb */
@media(min-width:1024px){
  .hero.has-orb .hero-inner>:not(.hero-orb){max-width:min(610px,56%)}
}
@media(max-width:1023px){.hero-orb{display:none}}
@media(prefers-reduced-motion:reduce){
  .orb-ring,.orb-halo{animation:none}
  .orb-slide{transition:none}
}

/* ---------- photo credits ---------- */
.gal-credit{display:block;margin-top:6px;font-style:normal;font-size:11px;letter-spacing:.06em;
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-credit{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:6px 12px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;color:var(--ink);
  font-family:var(--font-body);font-size:12px;letter-spacing:.04em;transition:.2s}
.lb-credit:hover{border-color:var(--teal);color:#fff}
.lb-credit b{font-size:13px;color:var(--teal)}
.lb-credit.copied{border-color:var(--magenta);color:#fff}
.lb-credit.copied b{color:var(--magenta)}
.lb-credit.copied::after{content:"copied";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.credit-note{max-width:620px;margin-inline:auto;text-align:center;padding:18px 22px;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:16px}
.credit-note b{font-family:var(--font-display);font-size:16px;letter-spacing:.02em}
.credit-note p{margin-top:6px;font-size:13px;color:var(--dim);line-height:1.6}
.credit-note em{font-style:normal;color:var(--teal);white-space:nowrap}
@media(max-width:620px){.lb-credit{margin-left:0;order:3;width:100%;justify-content:center}}

/* the terrain/satellite switch floats on the map, clear of Leaflet's zoom buttons */
.cm-map .cm-base{position:absolute;top:12px;right:12px;z-index:500;
  background:rgba(26,26,25,.82);border-color:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.cm-map .cm-base:hover{border-color:var(--teal)}
.cm-map .cm-base.hot{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* ---------- course flythrough ---------- */
.fly{position:fixed;inset:0;z-index:300;background:#0d1416;display:flex}
/* two classes on purpose: MapLibre puts .maplibregl-map{position:relative}
   on this same element, and its stylesheet loads after ours. With equal
   specificity it won, the container collapsed to zero width, and the map
   was clipped out of sight while the flight ran on behind it. */
.fly .fly-canvas{position:absolute;inset:0;width:100%;height:100%}
.fly-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--dim);font-size:14px;letter-spacing:.06em;z-index:2}
.fly-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--magenta);
  border-radius:50%;animation:flyspin .8s linear infinite}
@keyframes flyspin{to{transform:rotate(360deg)}}
.fly-close{position:absolute;top:16px;right:16px;z-index:4;width:44px;height:44px;border-radius:50%;
  background:rgba(13,20,22,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:24px;
  line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.fly-close:hover{border-color:var(--magenta)}
.fly-hud{position:absolute;left:16px;right:74px;top:16px;z-index:3;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:12px 16px;border-radius:16px;background:rgba(13,20,22,.72);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.fly-title{font-family:var(--font-display);font-size:18px;letter-spacing:.02em;color:#fff;margin-right:auto}
.fly-read{display:flex;align-items:baseline;gap:4px}
.fly-read b{font-family:var(--font-display);font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.fly-read small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.fly-play{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--magenta);border:0;color:#fff;font-family:var(--font-body);font-size:12.5px;font-weight:700;
  letter-spacing:.06em}
.fly-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.14);z-index:3}
.fly-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--magenta))}
/* phones: one slim row beside the close button, play as an icon */
@media(max-width:620px){
  .fly-close{top:calc(10px + env(safe-area-inset-top));right:10px;width:40px;height:40px;font-size:22px}
  .fly-hud{left:10px;right:58px;top:calc(10px + env(safe-area-inset-top));height:40px;padding:0 4px 0 14px;
    flex-wrap:nowrap;gap:12px;border-radius:999px}
  .fly-title{font-size:14px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .fly-read{flex:none;gap:3px}
  .fly-read b{font-size:17px}
  .fly-read small{font-size:9.5px;letter-spacing:.1em}
  .fly-play{flex:none;width:32px;height:32px;padding:0;justify-content:center;font-size:11px}
  .fly-play .lbl{display:none}
  .fly .maplibregl-ctrl-attrib{font-size:10px}
}

/* ---------- About & sustainability ---------- */
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-panel)}
.shot img{display:block;width:100%;height:auto}
.gal-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-strip figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.gal-strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.gal-strip figure:hover img{transform:scale(1.04)}
@media(max-width:760px){.gal-strip{grid-template-columns:1fr 1fr;gap:12px}}

.people{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.people{grid-template-columns:1fr}}
.person{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column}
/* the portrait breaks out of the card padding and sits flush at the top */
.person>img{display:block;width:calc(100% + 48px);max-width:none;margin:-26px -24px 18px;height:auto;
  aspect-ratio:1;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0}
.person header{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.person h3{font-family:var(--font-display);font-size:25px;letter-spacing:.02em;line-height:1.1}
.role{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal)}
.person p{font-size:14px;color:var(--dim);line-height:1.65}
.person blockquote{margin-top:14px;padding-left:14px;border-left:2px solid var(--magenta);
  font-size:13.5px;line-height:1.6;color:var(--ink);font-style:italic}

.shot.wide{max-width:620px;margin-inline:auto}
.shot figcaption{padding:12px 16px;font-size:12.5px;color:var(--dim);letter-spacing:.04em;text-align:center}

.tick{list-style:none}
.tick li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15px}
.tick li::before{content:"▲";position:absolute;left:0;top:1px;font-size:11px;color:var(--teal)}

/* the relay course map replaces the old stage diagram */
#relay-map{height:430px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#dfe6e2;position:relative;z-index:1}
@media(max-width:860px){#relay-map{height:340px}}
.map-note{margin-top:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* the note about international arrivals sits with the route cards */
.route-note{background:var(--bg-panel);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:14px;padding:16px 18px}
.route-note b{font-family:var(--font-display);font-size:16px;letter-spacing:.02em}
.route-note p{margin-top:6px;font-size:13px;color:var(--dim);line-height:1.6}
.fly-note{position:absolute;left:16px;bottom:16px;z-index:5;max-width:70%;padding:8px 12px;border-radius:10px;
  background:rgba(13,20,22,.85);border:1px solid rgba(255,255,255,.18);color:#ffb3f1;font-size:12px;line-height:1.5}
.fly-load small{display:block;margin-top:8px;color:#8f8f8a;font-size:12px}

/* Nothing may make the page wider than the screen. On iOS an overflowing
   page widens the layout viewport, and the fixed header and partner strip
   widen with it, which pushed the last partner logo off screen. The
   reveal-left/right start offsets were enough to trigger it on most pages.
   clip, not hidden, so no scroll container is created. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* long labels in a heading pill wrap instead of pushing the row wider */
h4 .pill,.h4 .pill{white-space:normal}

/* ---------- Next edition (race page hero) ---------- */
.next-ed{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:26px 0 4px;padding:18px 22px;
  max-width:760px;background:rgba(26,26,25,.55);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--magenta);
  border-radius:16px}
.ne-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ne-label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.ne-date{font-family:var(--font-display);font-size:30px;line-height:1.05;letter-spacing:.01em}
.ne-meta{font-size:13px;color:var(--dim)}
.ne-count{display:flex;gap:8px;margin-left:auto}
.ne-count div{min-width:58px;text-align:center;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.ne-count b{display:block;font-family:var(--font-display);font-size:24px;font-variant-numeric:tabular-nums}
.ne-count small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ne-after{flex-basis:100%;font-size:13.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.ne-after b{color:var(--ink)}
.next-ed.is-live{border-left-color:var(--teal)}
.next-ed.is-live .ne-label{color:var(--magenta)}
@media(max-width:620px){.ne-count{margin-left:0}.ne-date{font-size:26px}}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.news-card{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .25s,transform .25s}
.news-card:hover{border-color:var(--teal);transform:translateY(-3px)}
.news-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-deep)}
.news-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-card:hover .news-card-img img{transform:scale(1.04)}
.news-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
.news-card-body b{font-family:var(--font-display);font-size:24px;line-height:1.1;letter-spacing:.01em}
.news-excerpt{font-size:14px;color:var(--dim);line-height:1.55}
.news-lang{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(23,182,198,.4);border-radius:999px;padding:3px 9px}
.news-hero{background-size:cover;background-position:center;min-height:52vh;display:flex;align-items:flex-end}
.news-article{max-width:720px;margin:0 auto;padding:0 22px;font-size:17px;line-height:1.75;color:#dcdcd6}
.news-article p{margin:0 0 1.15em}
.news-article h2,.news-article h3{font-family:var(--font-display);color:var(--ink);letter-spacing:.01em;line-height:1.15;margin:1.6em 0 .5em}
.news-article h2{font-size:30px}.news-article h3{font-size:23px}
.news-article a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.news-article ul{margin:0 0 1.15em 1.2em}
.news-article blockquote{border-left:3px solid var(--magenta);padding-left:16px;font-style:italic;color:var(--ink)}
.news-figure{margin:28px -22px}
.news-figure img{display:block;width:100%;height:auto;border-radius:12px}
.news-figure figcaption,.news-caption{font-size:13px;color:var(--dim);margin-top:8px;padding:0 22px;font-style:normal}
.news-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:24px 0}
@media(min-width:760px){.news-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
.news-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.news-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
@media(min-width:760px){.news-figure{margin:32px -60px}.news-figure figcaption{padding:0 60px}}
.kids-note{font-size:14px;color:var(--dim)}
.kids-note a{color:var(--teal);font-weight:700}

/* ---------- Kids & gift cards ---------- */
.kids-race h3{font-family:var(--font-display);font-size:30px;margin:6px 0 4px}
.kids-race .kids-when{color:var(--ink);margin-bottom:10px}
.kids-race p{font-size:14.5px;color:var(--dim);line-height:1.6;margin-bottom:10px}
.kids-race .kids-prize{color:var(--teal);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.step>b{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--magenta);color:#fff;font-family:var(--font-display);font-size:20px}
.step p{font-size:14.5px;color:var(--dim);line-height:1.5}
.step p b{color:var(--ink)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.gift-group+.gift-group{margin-top:42px}
.gift-head{font-family:var(--font-display);font-size:28px;margin-bottom:16px}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gift{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .25s,transform .25s}
.gift:hover{border-color:var(--magenta);transform:translateY(-3px)}
.gift img{display:block;width:100%;height:auto;aspect-ratio:640/452}
.gift span{display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.gift b{font-size:15px}
.gift small{font-size:12px;color:var(--dim)}

.link-teal{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* h4 promoted to h3 for the outline keeps the h4 look */
.h4{font-family:var(--font-body);text-transform:none;line-height:inherit;letter-spacing:normal;font-size:17px;font-weight:700}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.news-lead{font-size:19px;line-height:1.6;color:var(--ink);font-weight:500}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--magenta);font-size:26px;font-weight:400;transition:transform .2s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--teal,#17b6c6);outline-offset:4px}
.faq-a{padding:0 0 20px;color:var(--dim);font-size:16px;line-height:1.65;max-width:720px}
.faq-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dist-row.honour{grid-template-columns:150px 1fr}
@media(max-width:640px){.dist-row.honour{grid-template-columns:1fr}}

/* ---------- gallery pages ---------- */
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.gp-grid a{display:block;border-radius:8px;overflow:hidden;background:var(--bg-panel);aspect-ratio:3/2}
.gp-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.gp-grid a:hover img{transform:scale(1.04)}
@media(max-width:560px){.gp-grid{grid-template-columns:repeat(2,1fr);gap:6px}}
.gp-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.quote{max-width:820px;margin-left:auto;margin-right:auto;border-left:3px solid var(--magenta);padding:6px 0 6px 22px}
.quote p{font-family:var(--font-display);font-size:clamp(21px,2.4vw,28px);line-height:1.3;color:var(--ink)}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--dim)}
.quote cite a{text-decoration:underline}

/* ============================================================
   HERO PHOTOS: one per race, cross-fading.
   Desktop: the photo starts a little in from the left, so the
   athlete always stands clear of the headline. Phones: the photo is
   a band at the top with the athlete in view, and the text starts
   where it fades into the dark.
   ============================================================ */
.hero.has-slides{background:#1a1a19}
.hero.has-slides .aurora{display:none}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.hero-slide.on{opacity:1}
.hero-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos)}
.hero-slides::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(26,26,25,1) 0%,rgba(26,26,25,.72) 26%,rgba(26,26,25,.15) 58%,rgba(26,26,25,0) 100%),
  linear-gradient(0deg,rgba(43,43,42,1) 0%,rgba(43,43,42,0) 20%),
  linear-gradient(180deg,rgba(26,26,25,.6) 0%,rgba(26,26,25,0) 24%)}
.hero.has-slides .hero-inner{z-index:3}
.hero.has-slides h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
@media(min-width:1024px){
  .hero-slides{left:14%}
  .hero-slide{transform:translateX(var(--shift,0))}
  .hero-slide img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
  .hero.has-slides .hero-inner>*{max-width:min(640px,58%)}
  .hero.has-slides p.lead{max-width:500px}
}
.hero-credit{position:absolute;right:20px;bottom:18px;z-index:3;margin:0;font-size:11px;letter-spacing:.06em;
  color:rgba(255,255,255,.55);pointer-events:none}
@media(max-width:760px){
  .hero-slides{bottom:auto;height:calc(var(--chrome-h) + 300px)}
  .hero-slide img{object-position:var(--mpos)}
  .hero-slides::after{background:linear-gradient(180deg,rgba(26,26,25,.55) 0%,rgba(26,26,25,.1) 30%,rgba(26,26,25,0) 55%,rgba(26,26,25,.85) 85%,rgba(26,26,25,1) 100%)}
  .hero.has-slides .hero-inner{padding-top:calc(var(--chrome-h) + 230px)}
  .hero-credit{bottom:auto;top:calc(var(--chrome-h) + 8px);right:14px;font-size:10px;color:rgba(255,255,255,.7)}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* ============================================================
   SCROLL MOTION: short, one-time, transform/opacity only.
   Everything here is skipped with prefers-reduced-motion.
   ============================================================ */
/* 2 · counting numbers keep their width */
.stat b{font-variant-numeric:tabular-nums}
/* 3 · section kickers get the magenta line and glide in softly with the
   heading. Only transform and opacity move, so nothing re-flows. */
.section-head .kicker::before{content:"";display:inline-block;vertical-align:middle;height:2px;width:26px;
  margin-right:12px;background:var(--magenta)}
.section-head.reveal .kicker{opacity:0;transform:translateX(-22px);
  transition:opacity .8s ease .12s,transform .9s cubic-bezier(.22,.7,.25,1) .12s}
.section-head.reveal.in .kicker{opacity:1;transform:none}
.hero .kicker::before{animation:kickerDraw .9s .2s cubic-bezier(.22,.7,.25,1) both;transform-origin:left}
@keyframes kickerDraw{from{transform:scaleX(0)}}
/* 4 · rows in lists and FAQs come in one after the other */
.dist-list.reveal .dist-row,.faq.reveal .faq-item{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.25,1)}
.dist-list.reveal.in .dist-row,.faq.reveal.in .faq-item{opacity:1;transform:none}
.dist-list.reveal.in .dist-row:nth-child(2),.faq.reveal.in .faq-item:nth-child(2){transition-delay:.06s}
.dist-list.reveal.in .dist-row:nth-child(3),.faq.reveal.in .faq-item:nth-child(3){transition-delay:.12s}
.dist-list.reveal.in .dist-row:nth-child(4),.faq.reveal.in .faq-item:nth-child(4){transition-delay:.18s}
.dist-list.reveal.in .dist-row:nth-child(5),.faq.reveal.in .faq-item:nth-child(5){transition-delay:.24s}
.dist-list.reveal.in .dist-row:nth-child(6),.faq.reveal.in .faq-item:nth-child(6){transition-delay:.3s}
.dist-list.reveal.in .dist-row:nth-child(n+7),.faq.reveal.in .faq-item:nth-child(n+7){transition-delay:.36s}
/* 6 · reading progress on manuals and articles */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--magenta),var(--teal));transform-origin:0 50%;transform:scaleX(0)}
/* 5 · a soft cross-fade between pages, header and partner strip stay put */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
}
@media(prefers-reduced-motion:reduce){
  .section-head.reveal .kicker{opacity:1;transform:none;transition:none}
  .hero .kicker::before{animation:none}
  .dist-list.reveal .dist-row,.faq.reveal .faq-item{opacity:1;transform:none;transition:none}
}