/* ============ FONTS ============ */
  /* Licensed Ducati display face. Falls back to Arial Black if the files are missing. */
  @font-face{
    font-family:"DucatiStyleExt";
    src:url("/assets/fonts/DucatiStyleExt-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap;
  }
  @font-face{
    font-family:"DucatiStyleExt";
    src:url("/assets/fonts/DucatiStyleExt-Bold.woff2") format("woff2");
    font-weight:700;
    font-display:swap;
  }
  /* Non-extended Ducati face, used for body / UI text. Falls back to Inter. */
  @font-face{
    font-family:"DucatiStyle";
    src:url("/assets/fonts/DucatiStyle-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap;
  }
  @font-face{
    font-family:"DucatiStyle";
    src:url("/assets/fonts/DucatiStyle-Bold.woff2") format("woff2");
    font-weight:700;
    font-display:swap;
  }

  /* ============ TOKENS ============ */
  :root{
    color-scheme:dark;
    --red-600:#CE2B37; --red-700:#A31F29; --red-text:#E8505C;
    --ink-900:#0A0A0B; --ink-800:#161618; --ink-700:#26262A;
    --paper-0:#FFFFFF; --paper-50:#F6F6F4; --paper-100:#ECECE8;
    --muted-500:#8A8A90;

    --bg:var(--ink-900); --bg-alt:var(--paper-50);
    --text:#F4F4F2; --text-invert:#161618;
    --accent:var(--red-600); --accent-press:var(--red-700);
    --line:rgba(244,244,242,.12);
    --line-dark:rgba(22,22,24,.14);

    --font-display:"DucatiStyleExt","Arial Black","Arial Narrow Bold",sans-serif;
    --font-body:"DucatiStyle",system-ui,sans-serif;

    --t-caption:12px; --t-sm:14px; --t-body:16px; --t-sub:20px;
    --t-h3:24px; --t-h2:32px; --t-h1:48px; --t-hero:clamp(40px,7vw,84px);

    /* Spacing scale, named px/4. --s-5 and --s-10 exist because the generated pages
       (/mediakit/, /cardo-ride/) reference them; a var() that resolves to nothing
       invalidates the whole declaration, which silently drops the rule. */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
    --s-10:40px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

    --r-sm:8px; --r-md:14px; --r-lg:22px;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 8px 24px rgba(0,0,0,.35);
    --container:1200px; --reading:68ch;
    --ease:cubic-bezier(.22,1,.36,1);
    --header-h:88px;
  }

  /* ============ BASE ============ */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
  body{
    background:var(--bg);color:var(--text);
    font-family:var(--font-body);font-size:var(--t-body);line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  ::selection{background:var(--accent);color:#fff}
  :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

  .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s-6)}
  .display{font-family:var(--font-display);text-transform:uppercase;line-height:.92;letter-spacing:.005em;font-weight:700}

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    font-family:var(--font-body);font-weight:700;font-size:var(--t-sm);
    letter-spacing:.04em;text-transform:uppercase;
    padding:var(--s-4) var(--s-6);border:1px solid transparent;border-radius:var(--r-sm);
    cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(0);transition-duration:.08s}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-1);position:relative;overflow:hidden}
  .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:36%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
    transform:skewX(-18deg);transition:left .5s var(--ease)}
  .btn-primary:hover::after{left:120%}
  .btn-primary:hover{background:var(--accent-press);transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--text);background:rgba(244,244,242,.06)}
  .on-light .btn-ghost,.btn-ghost.on-light{color:var(--text-invert);border-color:var(--line-dark)}
  .on-light .btn-ghost:hover{border-color:var(--text-invert);background:rgba(22,22,24,.05)}

  /* ============ HEADER ============ */
  header{
    position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);
    display:flex;align-items:center;
    transition:background .35s var(--ease),border-color .35s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{background:rgba(10,10,11,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .logo img{transition:height .3s var(--ease)}
  header.scrolled .logo img{height:46px}
  .hdr-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
  .logo{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);text-transform:uppercase;font-size:18px;letter-spacing:.02em}
  .logo img{height:60px;width:auto}
  .logo .lo-fallback{display:flex;align-items:baseline;gap:6px}
  .logo .lo-fallback b{color:var(--red-text)}
  nav.main{display:flex;align-items:center;gap:var(--s-8)}
  nav.main a{font-size:var(--t-sm);font-weight:600;letter-spacing:.04em;color:var(--muted-500);transition:color .2s;text-transform:uppercase}
  nav.main a:hover{color:var(--text)}
  nav.main a:not(.nav-recap){position:relative}
  nav.main a:not(.nav-recap)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--accent);transition:right .25s var(--ease)}
  nav.main a:not(.nav-recap):hover::after,nav.main a:not(.nav-recap):focus-visible::after{right:0}
  nav.main a.nav-recap{color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px var(--s-3)}
  nav.main a.nav-recap:hover{border-color:var(--red-600);color:var(--red-text)}
  .hdr-cta{display:flex;align-items:center;gap:var(--s-3)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
  .burger span{width:24px;height:2px;background:var(--text);transition:.3s var(--ease)}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ============ MOBILE MENU ============ */
  .mobile-menu{
    position:fixed;inset:var(--header-h) 0 0 0;z-index:999;background:var(--ink-900);
    display:flex;flex-direction:column;padding:var(--s-8) var(--s-6);gap:var(--s-2);
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--ease),visibility 0s .4s;
  }
  body.menu-open .mobile-menu{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
  .mobile-menu a{font-family:var(--font-display);text-transform:uppercase;font-size:30px;padding:var(--s-3) 0;border-bottom:1px solid var(--line);color:var(--text)}

  /* ============ EYEBROW + SECTION HEADS ============ */
  .eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red-text)}
  .eyebrow::before{content:"";width:28px;height:2px;background:var(--accent)}
  .on-light .eyebrow{color:var(--accent)}
  .sec{padding:var(--s-24) 0}
  .sec-head{max-width:var(--reading);margin-bottom:var(--s-12)}
  .sec-head h2{font-size:clamp(30px,5vw,var(--t-hero));margin-top:var(--s-4);text-wrap:balance}
  .sec-head .lede{margin-top:var(--s-4);color:var(--muted-500);font-size:var(--t-sub);max-width:60ch;text-wrap:pretty}
  .on-light .sec-head .lede{color:#5a5a60}

  /* ============ THE WEEK ============ */
  .week-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-16);align-items:center}
  .week-highlights{display:flex;flex-direction:column}
  .wh{display:flex;align-items:baseline;gap:var(--s-6);padding:var(--s-6) 0;border-top:1px solid var(--line)}
  .wh:last-child{border-bottom:1px solid var(--line)}
  .wh-k{font-size:clamp(30px,3.6vw,46px);color:var(--accent);line-height:1;flex:0 0 auto;min-width:4.5ch}
  .wh-v{color:var(--muted-500);font-size:var(--t-sm)}

  /* ============ CENTENARY ============ */
  .centenary{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,rgba(206,43,55,.16),transparent 55%),var(--ink-900)}
  .cent-inner{max-width:780px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
  .cent-logo{width:min(440px,82%);margin:0 auto var(--s-8)}
  .cent-logo svg{width:100%;height:auto;display:block;fill:#fff}
  .cent-h{font-size:clamp(30px,5vw,var(--t-hero));margin:var(--s-3) 0 var(--s-4);text-wrap:balance}
  .cent-lede{color:var(--muted-500);font-size:var(--t-sub);max-width:56ch;text-wrap:pretty}
  .cent-lede .accent{color:var(--paper-100)}

  /* ============ HERO ============ */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
  /* Keep the homepage's visual path conversion-first: the experience and practical
     details lead into registration, while galleries and partner directories close. */
  body[data-reg-open="true"] main{display:flex;flex-direction:column}
  body[data-reg-open="true"] main>#top{order:1}
  body[data-reg-open="true"] main>.facts{order:2}
  body[data-reg-open="true"] main>#the-week{order:3}
  body[data-reg-open="true"] main>#centenary{order:4}
  body[data-reg-open="true"] main>#host{order:5}
  body[data-reg-open="true"] main>#schedule{order:6}
  body[data-reg-open="true"] main>#rides{order:7}
  body[data-reg-open="true"] main>#saturday{order:8}
  body[data-reg-open="true"] main>#register{order:9}
  body[data-reg-open="true"] main>#faq{order:10}
  body[data-reg-open="true"] main>#gallery-selection{order:11}
  body[data-reg-open="true"] main>#gallery-rides{order:12}
  body[data-reg-open="true"] main>#gallery-tours{order:13}
  body[data-reg-open="true"] main>#clubs{order:14}
  body[data-reg-open="true"] main>#sponsors{order:15}
  .hero-media{position:absolute;inset:0;z-index:0;background:
    radial-gradient(120% 80% at 70% -10%,rgba(206,43,55,.30),transparent 55%),
    linear-gradient(180deg,#19191c,#0a0a0b 70%);}
  .hero-media img,.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
  .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,.15) 40%,rgba(10,10,11,.92) 100%)}
  .hero-inner{position:relative;z-index:2;width:100%;padding-top:calc(var(--header-h) + var(--s-16));padding-bottom:var(--s-16)}
  .hero-lockup{height:clamp(48px,8vw,92px);width:auto;margin-bottom:var(--s-6)}
  .hero h1{font-size:var(--t-hero);max-width:16ch;margin:var(--s-6) 0 var(--s-4)}
  .hero h1 .red{color:var(--accent)}
  .hero h1 .yr{color:transparent;-webkit-text-stroke:1.5px rgba(244,244,242,.85);text-stroke:1.5px rgba(244,244,242,.85);margin-left:.12em}
  .hero .when{font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.01em}
  .hero .when .sep{color:var(--accent);padding:0 6px}
  .hero .tagline{margin-top:var(--s-4);font-size:var(--t-sub);color:var(--paper-100);max-width:42ch}
  .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
  .reg-banner{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-6);
    font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;color:var(--paper-100);
    background:rgba(206,43,55,.14);border:1px solid rgba(206,43,55,.4);
    padding:var(--s-2) var(--s-4);border-radius:100px}
  .reg-banner .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(206,43,55,.6);animation:pulse 2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(206,43,55,0)}100%{box-shadow:0 0 0 0 rgba(206,43,55,0)}}

  /* ---- hero entrance choreography ----
     The h1 is the LCP candidate, so it animates transform only (never opacity:0). */
  @keyframes heroRise{from{transform:translateY(26px)}to{transform:none}}
  @keyframes heroFadeRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes heroSettle{from{transform:scale(1.06)}to{transform:none}}
  .hero-media .hero-vid{animation:heroSettle 1.6s var(--ease) both}
  .hero-inner>h1{animation:heroRise .9s var(--ease) both}
  .hero-inner>*:not(h1){animation:heroFadeRise .9s var(--ease) both}
  .hero-inner>*:nth-child(2){animation-delay:.08s}
  .hero-inner>*:nth-child(3){animation-delay:.16s}
  .hero-inner>*:nth-child(4){animation-delay:.24s}
  .hero-inner>*:nth-child(5){animation-delay:.32s}
  .hero-inner>*:nth-child(6){animation-delay:.40s}
  /* Same cascade, derived rather than hand-listed. Placed after the ladder so the ladder
     stays the fallback wherever sibling-index() is unsupported. */
  @supports (animation-delay: calc(sibling-index() * 1ms)){
    .hero-inner>*{animation-delay:calc((sibling-index() - 1) * .08s)}
  }
  .scroll-cue{position:absolute;left:50%;bottom:var(--s-6);z-index:2;transform:translateX(-50%);
    width:26px;height:42px;border:1.5px solid rgba(244,244,242,.45);border-radius:14px;
    animation:heroFadeRise .9s var(--ease) .7s both}
  .scroll-cue::before{content:"";position:absolute;left:50%;top:8px;width:3px;height:9px;
    margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:cueDrop 2.4s var(--ease) infinite}
  @keyframes cueDrop{0%{transform:translateY(0);opacity:1}60%{transform:translateY(14px);opacity:0}61%{transform:translateY(0);opacity:0}100%{opacity:1}}
  @media(max-width:760px){.scroll-cue{display:none}}

  /* ============ FACTS STRIP ============ */
  .facts{background:var(--ink-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .fact{padding:var(--s-8) var(--s-6);border-left:1px solid var(--line)}
  .fact:first-child{border-left:0}
  .fact .k{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-500)}
  .fact .v{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);margin-top:var(--s-2)}
  .fact .v .red{color:var(--red-text)}

  /* ============ HOST HUB ============ */
  .split{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s-16);align-items:center}
  .media-card{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:
    radial-gradient(120% 120% at 80% 0%,rgba(206,43,55,.20),transparent 60%),var(--ink-800);
    aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative}
  .media-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .media-card .ph{font-family:var(--font-display);text-transform:uppercase;color:var(--muted-500);font-size:var(--t-h3);text-align:center;padding:var(--s-6)}
  .host p{color:var(--muted-500);margin-top:var(--s-4);max-width:52ch}
  .host .note{margin-top:var(--s-6);font-size:var(--t-sm);color:var(--text);background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-4) var(--s-6)}

  /* ============ SCHEDULE ============ */
  .days{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .day{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6);position:relative;overflow:hidden;overflow:clip;transition:transform .35s var(--ease),border-color .35s}
  .day::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
  .day:hover{transform:translateY(-4px);border-color:rgba(244,244,242,.28)}
  .day:hover::before{transform:scaleX(1)}
  .day .dh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-4)}
  .day .dh .dow{font-family:var(--font-display);text-transform:uppercase;font-size:28px}
  .day .dh .dnum{font-size:var(--t-sm);color:var(--red-text);font-weight:700}
  .day .dl{font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-500);margin-bottom:var(--s-4)}
  .day ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
  .day li{font-size:var(--t-sm);padding-left:var(--s-4);position:relative;color:var(--paper-100)}
  .day li .self{color:var(--muted-500);font-style:italic;font-size:var(--t-caption)}
  .day li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

  /* ============ RIDES ============ */
  .rides{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
  .ride{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;overflow:clip;background:var(--ink-800);transition:transform .35s var(--ease),border-color .35s}
  .ride:hover{transform:translateY(-4px);border-color:rgba(244,244,242,.28)}
  .ride .img{aspect-ratio:16/10;position:relative;background:
    radial-gradient(120% 120% at 30% 0%,rgba(206,43,55,.22),transparent 60%),var(--ink-700);
    display:flex;align-items:flex-end}
  .ride .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ride .tag{position:relative;z-index:2;margin:var(--s-4);font-size:var(--t-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,10,11,.7);backdrop-filter:blur(4px);border:1px solid var(--line);padding:6px 12px;border-radius:100px}
  .ride .body{padding:var(--s-6)}
  .ride h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-h3)}
  .ride p{color:var(--muted-500);margin-top:var(--s-2);font-size:var(--t-sm)}
  .safety{margin-top:var(--s-8);text-align:center;color:var(--muted-500);font-size:var(--t-sm)}

  /* ============ SATURDAY CHOICE ============ */
  .choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:stretch}
  .choice .opt{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;overflow:clip;background:var(--ink-800);display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s}
  .choice .opt:hover{transform:translateY(-4px);border-color:var(--accent)}
  .choice .opt .img{aspect-ratio:16/9;position:relative;background:radial-gradient(120% 120% at 70% 0%,rgba(206,43,55,.2),transparent 60%),var(--ink-700)}
  .choice .opt .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .choice .opt .body{padding:var(--s-6);flex:1;display:flex;flex-direction:column}
  .choice .opt .or{font-family:var(--font-display);text-transform:uppercase;color:var(--red-text);font-size:var(--t-sm);letter-spacing:.1em}
  .choice .opt h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-h3);margin:var(--s-2) 0}
  .choice .opt p{color:var(--muted-500);font-size:var(--t-sm)}
  .choice .opt .incl{margin-top:auto;padding-top:var(--s-4);font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:600}

  /* ============ CLUBS ============ */
  .clubs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .club{position:relative;overflow:hidden;background:linear-gradient(180deg,#85858c,#727279);border:1px solid rgba(0,0,0,.28);border-radius:var(--r-md);aspect-ratio:1;padding:var(--s-2);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -12px 26px rgba(0,0,0,.30);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
  .club:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-2)}
  .club img{max-height:168px;width:auto;max-width:100%;object-fit:contain}
  .club.combo{background:none;border:0;box-shadow:none;padding:var(--s-2)}
  .club.combo svg{width:100%;height:auto;max-height:100%;display:block;fill:#fff}
  .club.combo:hover{transform:none;box-shadow:none}
  .club .club-text{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:var(--t-h2);letter-spacing:.04em}
  .club::after{content:attr(data-name);position:absolute;left:0;right:0;bottom:0;padding:20px 12px 12px;background:linear-gradient(to top,rgba(10,10,11,.95),rgba(10,10,11,.55) 60%,transparent);color:#fff;font-family:var(--font-body);font-size:var(--t-caption);font-weight:700;line-height:1.25;letter-spacing:.02em;text-transform:none;text-align:center;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .club:hover::after,.club:focus-visible::after{opacity:1;transform:translateY(0)}

  /* ============ CAROUSEL ============ */
  .carousel{position:relative}
  .carousel-track{display:flex;gap:var(--s-4);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--s-2);scrollbar-width:none}
  .carousel-track::-webkit-scrollbar{display:none}
  .carousel-slide{flex:0 0 auto;width:clamp(260px,72vw,400px);aspect-ratio:3/2;scroll-snap-align:center;border-radius:var(--r-md);overflow:hidden;overflow:clip;border:1px solid var(--line);background:var(--ink-700)}
  .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
  .carousel-slide:hover img{transform:scale(1.04)}
  .carousel-btn{position:absolute;top:50%;translate:0 -50%;z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(10,10,11,.72);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,scale .2s}
  .carousel-btn:hover{background:var(--accent);scale:1.06}
  .carousel-btn.prev{left:-8px}
  .carousel-btn.next{right:-8px}
  .carousel-btn svg{width:20px;height:20px}
  @media(max-width:760px){.carousel-btn{display:none}}
  .carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:var(--s-6);flex-wrap:wrap}
  .carousel-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(244,244,242,.22);cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
  .carousel-dots button:hover{background:rgba(244,244,242,.5)}
  .carousel-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.3)}

  /* ============ VIDEO GRIDS ============
     Click-to-play only: no autoplay, no loop, `preload="none"` so a page with many
     clips costs one poster image each. Two grids because the source clips are either 16:9
     or 9:16, and forcing one shape on both would crop the subject out of half of them.
     Shared with the CADW 2025 recap page, which copies this block. */
  .vids{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
  .vids.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .vids.tall{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  /* the homepage shows only three clips, so they get more width than a full wall would */
  .vids.trio{max-width:820px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .vids video{display:block;width:100%;height:auto;border-radius:var(--r-md);
              background:var(--ink-700);object-fit:cover}
  .vids.wide video{aspect-ratio:16/9}
  .vids.tall video{aspect-ratio:9/16}
  .vid-note{margin-top:var(--s-4);font-size:var(--t-caption);color:var(--muted-500)}
  .vh{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-sub);
      margin:var(--s-8) 0 0;color:var(--paper-100)}

  /* ============ SPONSORS ============
     Brand logos are mostly dark-on-transparent and would vanish on the dark band, so each
     sits on its own light tile. Shared with the CADW 2025 recap page, which copies this block. */
  .sponsors{list-style:none;margin-top:var(--s-8);display:grid;
            grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-4)}
  .sponsors li{display:flex}
  .sponsors li>*{display:flex;align-items:center;justify-content:center;width:100%;
                 min-height:104px;padding:var(--s-4) var(--s-6);background:var(--paper-0);
                 border-radius:var(--r-md);color:var(--ink-900);text-decoration:none;
                 transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .sponsors li>a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .sponsors img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain}
  .sp-cta{margin-top:var(--s-12);max-width:var(--reading)}
  .sp-cta h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-h3)}
  .sp-cta p{margin:var(--s-3) 0 var(--s-6);color:var(--paper-100)}

  /* ============ PRICING / REGISTER (light band) ============ */
  .register{background:var(--bg-alt);color:var(--text-invert)}
  .register .reg-card{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-16);align-items:start}
  .register h2{font-size:clamp(30px,5vw,var(--t-hero))}
  .register .incl{margin-top:var(--s-6);list-style:none;display:grid;gap:var(--s-3)}
  .register .incl li{display:flex;gap:var(--s-3);align-items:flex-start;color:#3a3a40;font-weight:500}
  .register .incl li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--accent);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat}
  .reg-box{background:var(--paper-0);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:var(--s-8);box-shadow:var(--shadow-2)}
  .reg-box .price{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(54px,8vw,76px);line-height:1;color:var(--text-invert)}
  .reg-box .price small{display:block;font-family:var(--font-body);font-size:var(--t-sm);color:#5a5a60;letter-spacing:.04em;font-weight:600;margin-top:var(--s-1)}
  .micro{margin-top:var(--s-4);font-size:var(--t-caption);line-height:1.6;color:#5a5a60}
  .reg-alt{margin-top:var(--s-4);font-size:var(--t-sm);color:#3a3a40}
  .reg-alt a{color:var(--accent-press);font-weight:700;border-bottom:1px solid rgba(163,31,41,.4)}

  /* ============ FAQ ============ */
  .faq{max-width:var(--reading);margin:0 auto}
  .acc{border-bottom:1px solid var(--line)}
  .acc:first-child{border-top:1px solid var(--line)}
  /* <summary>, not a button: the disclosure is native, so it is keyboard and AT operable
     with no script, and find-in-page expands a closed panel to reach the answer. */
  .acc-q{width:100%;background:none;border:0;cursor:pointer;color:var(--text);
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
    padding:var(--s-6) var(--s-1);text-align:left;font:inherit;font-weight:600;font-size:var(--t-sub);
    list-style:none}
  .acc-q::-webkit-details-marker{display:none}
  .acc-q .ic{flex:0 0 auto;width:24px;height:24px;position:relative;transition:transform .3s var(--ease)}
  .acc-q .ic::before,.acc-q .ic::after{content:"";position:absolute;inset:50% 0 auto 0;height:2px;background:var(--accent)}
  .acc-q .ic::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
  .acc[open] .acc-q .ic::after{transform:rotate(0)}
  .acc-a{overflow:hidden}
  /* Restores the open/close glide the max-height hack used to provide, where the platform
     can interpolate to an intrinsic size. Dropped wholesale elsewhere: the panel just snaps. */
  @supports (interpolate-size: allow-keywords){
    .acc-a{height:0;transition:height .4s var(--ease)}
    .acc[open] .acc-a{height:auto}
  }
  .acc-a .inner{padding:0 var(--s-1) var(--s-6);color:var(--muted-500)}
  .acc-a table{width:100%;border-collapse:collapse;margin-top:var(--s-3);font-size:var(--t-sm)}
  .acc-a th,.acc-a td{text-align:left;padding:var(--s-2) var(--s-3);border:1px solid var(--line)}
  .acc-a th{color:var(--text);font-weight:700}

  /* ============ FOOTER ============ */
  footer{background:var(--ink-900);border-top:1px solid var(--line);padding:var(--s-16) 0 var(--s-8)}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-12)}
  /* `footer`, not `.foot`: there is no .foot element, so this rule never matched and the
     motto silently fell back to body size. The generated pages already use this selector. */
  footer .motto{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-h3);margin-top:var(--s-4);max-width:14ch;text-wrap:balance}
  footer .fh{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-500);margin-bottom:var(--s-4)}
  .foot a{display:block;color:var(--paper-100);font-size:var(--t-sm);padding:var(--s-1) 0;transition:color .2s}
  .foot a:hover{color:var(--red-text)}
  .foot-bottom{display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--s-16);padding-top:var(--s-6);border-top:1px solid var(--line);font-size:var(--t-caption);color:var(--muted-500)}
  .foot-bottom .disc{max-width:62ch;text-wrap:pretty}

  /* ============ REVEAL ============ */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* ============ RESPONSIVE ============ */
  @media(max-width:1000px){
    nav.main{gap:var(--s-4)}
    .facts-grid{grid-template-columns:1fr 1fr}
    .fact:nth-child(3){border-left:0}
    .days{grid-template-columns:1fr 1fr}
    .rides{grid-template-columns:1fr}
    .clubs-grid{grid-template-columns:repeat(3,1fr)}
    .split,.register .reg-card,.week-grid{grid-template-columns:1fr;gap:var(--s-8)}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){
    nav.main,.hdr-cta .btn{display:none}
    .burger{display:flex}
    .choice{grid-template-columns:1fr}
    .clubs-grid{grid-template-columns:1fr 1fr}
    .sec{padding:var(--s-16) 0}
  }
  @media(max-width:480px){
    .facts-grid{grid-template-columns:1fr}
    .fact{border-left:0}
    .days{grid-template-columns:1fr}
    .foot-top{grid-template-columns:1fr}
  }

  /* Muted greys and hairline borders are the first thing to fail for anyone who has asked
     the OS for more contrast. Purely additive: ignored where the query is unsupported. */
  @media(prefers-contrast:more){
    :root{--muted-500:#C9C9CE;--line:rgba(244,244,242,.34);--line-dark:rgba(22,22,24,.42)}
    .on-light .sec-head .lede{color:#3a3a40}
  }

  /* Animated same-origin navigations between the pages that share this header and footer.
     Ignored wholesale where unsupported, so it costs nothing there. */
  @view-transition{navigation:auto}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    /* `*` does not reach the view-transition pseudos, so they need saying explicitly. */
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
    /* The auto-drift is off under reduced motion, so the track is a finite list here and
       snapping no longer fights the rAF loop. */
    .carousel-track{scroll-snap-type:x proximity}
  }