/* =============================================================================
   Blue Ridge Battle — design system
   Author-built tokens: modular type scale, OKLCH tonal ramps, fluid spacing,
   one easing/motion family, nested radii, layered shadows. Components reference
   ONLY tokens. Brand hues (periwinkle / dusk / rust) preserved, systematised.
   ============================================================================= */

/* ===== Fonts (self-hosted) ===== */
/* Anton: single weight, the expressive DISPLAY register (hero, prize, section heads). */
@font-face { font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/1Ptgg87LROyAm3Kz-C8.woff2") format("woff2"); }
/* Work Sans: variable workhorse (wght 400–700), the TEXT register. */
@font-face { font-family:"Work Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/QGYsz_wNahGAdqQ43Rh_fKDp.woff2") format("woff2"); }

/* Metric-matched fallbacks so font swap does not reflow (CLS protection). */
@font-face { font-family:"Anton-fallback"; src:local("Impact"),local("Haettenschweiler"),local("Arial Narrow Bold");
  size-adjust:88%; ascent-override:96%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"WorkSans-fallback"; src:local("Arial"),local("Helvetica Neue"),local("system-ui");
  size-adjust:102%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }

/* ===== Tokens ===== */
:root{
  /* --- Type families --- */
  --font-display:"Anton","Anton-fallback",Impact,sans-serif;
  --font-body:"Work Sans","WorkSans-fallback",system-ui,sans-serif;

  /* --- Modular type scale (fluid; ~1.2 minor-third at mobile opening to
         ~1.333 perfect-fourth at desktop). step-0 is the body anchor. --- */
  --step--2:clamp(0.694rem, 0.668rem + 0.13vw, 0.79rem);
  --step--1:clamp(0.833rem, 0.789rem + 0.22vw, 0.985rem);
  --step-0: clamp(1rem,    0.93rem  + 0.35vw, 1.23rem);
  --step-1: clamp(1.2rem,  1.094rem + 0.53vw, 1.535rem);
  --step-2: clamp(1.44rem, 1.283rem + 0.79vw, 1.918rem);
  --step-3: clamp(1.728rem,1.5rem   + 1.14vw, 2.396rem);
  --step-4: clamp(2.074rem,1.747rem + 1.63vw, 2.993rem);
  --step-5: clamp(2.488rem,2.025rem + 2.32vw, 3.737rem);
  --step-6: clamp(2.986rem,2.33rem  + 3.28vw, 4.667rem);
  --step-7: clamp(3.583rem,2.65rem  + 4.66vw, 5.829rem);

  /* --- Spacing scale (4px base, non-linear ~1.5x growth, t-shirt named) --- */
  --space-3xs:0.25rem;  --space-2xs:0.5rem;   --space-xs:0.75rem;
  --space-s:1rem;       --space-m:1.5rem;     --space-l:2rem;
  --space-xl:3rem;      --space-2xl:4rem;     --space-3xl:6rem;  --space-4xl:8rem;
  /* fluid macro-rhythm */
  --space-section:clamp(2.75rem, 1.6rem + 5.5vw, 5.5rem);
  --space-card:clamp(1.4rem, 0.9rem + 2.4vw, 2.6rem);
  --gutter:clamp(1.25rem, 0.6rem + 3vw, 2.5rem);

  /* --- OKLCH neutral ramp: one purple-tinted hue (~288), chroma peaking
         mid-scale and tapering at both ends to stay in gamut. --- */
  --n-0:  oklch(0.992 0.003 288);
  --n-50: oklch(0.982 0.004 288);
  --n-100:oklch(0.958 0.006 288);
  --n-200:oklch(0.918 0.009 288);
  --n-300:oklch(0.862 0.012 288);
  --n-400:oklch(0.715 0.018 288);
  --n-500:oklch(0.565 0.022 288);
  --n-600:oklch(0.477 0.022 289);
  --n-700:oklch(0.38  0.020 289);
  --n-800:oklch(0.295 0.016 290);
  --n-900:oklch(0.226 0.014 292);
  --n-950:oklch(0.165 0.012 292);

  /* --- Dusk/periwinkle accent ramp (purple, hue ~283), peak chroma mid --- */
  --p-300:oklch(0.78 0.07  282);
  --p-400:oklch(0.685 0.09 282);   /* ~ periwinkle */
  --p-500:oklch(0.55 0.105 283);
  --p-600:oklch(0.44 0.10  284);
  --p-700:oklch(0.379 0.081 285);  /* ~ dusk */
  --p-800:oklch(0.31 0.075 285);

  /* --- Rust accent ramp (hue ~42) — the scarce high-signal hue --- */
  --r-400:oklch(0.64 0.155 46);
  --r-500:oklch(0.575 0.16 44);    /* ~ rust */
  --r-600:oklch(0.51 0.15  42);
  --r-700:oklch(0.45 0.135 41);    /* text-safe rust (>=4.5:1 on light tint) */

  /* --- Semantic tokens (mapped to ramp) --- */
  --surface:        var(--n-50);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --text:           var(--n-900);
  --text-secondary: var(--n-700);
  --text-muted:     var(--n-600);
  --border:         oklch(0.295 0.016 290 / 0.14);
  --border-strong:  oklch(0.295 0.016 290 / 0.22);
  --accent:         var(--p-700);   /* dusk — primary brand action */
  --accent-hover:   var(--p-600);
  --accent-soft:    var(--p-400);   /* periwinkle — links, soft marks */
  --spark:          var(--r-500);   /* rust — decorative marks (ticks, rules) */
  --spark-text:     var(--r-700);   /* rust as small text (AA-safe) */

  /* --- Radii: a deliberate 3-step family + pill --- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* --- Layered ambient shadows: one light direction, tinted to surface hue,
         blur grows faster than offset --- */
  --shadow-sm:
    0 1px 1px oklch(0.226 0.03 292 / 0.05),
    0 2px 4px oklch(0.226 0.03 292 / 0.05),
    0 4px 8px oklch(0.226 0.03 292 / 0.05);
  --shadow:
    0 1px 1px oklch(0.226 0.03 292 / 0.04),
    0 2px 4px oklch(0.226 0.03 292 / 0.05),
    0 6px 12px oklch(0.226 0.03 292 / 0.06),
    0 12px 24px oklch(0.226 0.03 292 / 0.07);
  --shadow-lg:
    0 2px 4px  oklch(0.226 0.03 292 / 0.05),
    0 8px 16px oklch(0.226 0.03 292 / 0.07),
    0 18px 36px oklch(0.226 0.03 292 / 0.09),
    0 32px 60px oklch(0.226 0.03 292 / 0.10);

  /* --- Motion: one easing family + duration tokens --- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:140ms; --dur-mid:260ms; --dur-slow:420ms;

  /* --- Layout --- */
  --maxw:1120px;
  --measure:66ch;            /* reading column */
  --measure-lede:48ch;       /* standfirst */
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-optical-sizing:auto;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-kerning:normal;
  color:var(--text);
  line-height:1.6;
  font-size:var(--step-0);
  background:var(--surface);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block;}

/* Body links carry a guaranteed, non-color underline affordance + animated draw. */
a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:0.16em;
  text-decoration-color:oklch(from var(--accent-soft) l c h / 0.55);
  transition:color var(--dur-fast) var(--ease-out),
             text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover{ color:var(--spark); text-decoration-color:currentColor; }

h1,h2,h3,h4{ margin:0 0 0.5em; line-height:1.12; text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

/* Reading measure — applied to prose contexts, never to UI labels. */
.guide-section p,
.guide-section ul,
.guide-section ol,
.placard > p,
.placard > ul,
.placard > ol{ max-inline-size:var(--measure); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); }

/* ----- Content / breakout / full-bleed grid -----
   Most content sits on a readable column; .full-bleed escapes edge-to-edge. */
.flow > * + *{ margin-block-start:var(--flow-space, 1em); }

/* Soft mountain photo background with a graded scrim for legibility. */
.bg{ position:fixed; inset:0; z-index:-2;
  background:url("../img/mountain-bg.jpg") center top/cover no-repeat; }
.bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      oklch(0.982 0.004 288 / 0.40),
      oklch(0.982 0.004 288 / 0.58) 55%,
      oklch(0.982 0.004 288 / 0.74)); }

/* ===== Accessibility helpers ===== */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--n-900); color:#fff;
  padding:var(--space-2xs) var(--space-s); z-index:100; border-radius:0 0 var(--r-sm) 0;
  text-decoration:none; font-weight:600; }
.skip-link:focus{ left:0; top:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
::selection{ background:oklch(from var(--accent-soft) l c h / 0.28); }

/* ===== Header / nav ===== */
.site-header{ position:sticky; top:0; z-index:50;
  background:oklch(0.982 0.004 288 / 0.82);
  backdrop-filter:saturate(1.15) blur(14px);
  -webkit-backdrop-filter:saturate(1.15) blur(14px);
  border-bottom:1px solid var(--border); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{ background:var(--surface-raised); }
}
.nav{ display:flex; align-items:center; gap:var(--space-s); min-height:68px; }
.nav__brand{ display:flex; align-items:center; gap:var(--space-2xs); text-decoration:none;
  color:var(--text); margin-right:auto; }
.nav__brand img{ width:38px; height:38px; }
.nav__brand span{ font-family:var(--font-body); font-weight:700; letter-spacing:0.1em;
  font-size:var(--step--1); text-transform:uppercase; }
.nav__links{ display:flex; align-items:center; gap:var(--space-3xs); list-style:none;
  margin:0; padding:0; }
.nav__link{ position:relative; display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; color:var(--text-muted); font-weight:600;
  padding-inline:var(--space-s); text-transform:uppercase; letter-spacing:0.12em;
  font-size:var(--step--2); border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease-out); }
.nav__link:hover{ color:var(--text); }
.nav__link[aria-current="page"]{ color:var(--accent); }
.nav__link[aria-current="page"]::after{ content:""; position:absolute;
  left:var(--space-s); right:var(--space-s); bottom:0.55rem; height:2px;
  background:var(--spark); border-radius:2px; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:11px; margin-right:-11px; }
.nav__toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--font-body); font-weight:600; text-transform:uppercase;
  letter-spacing:0.1em; font-size:var(--step--1); text-decoration:none;
  padding:0.7rem 1.5rem; border-radius:var(--r-pill);
  border:1px solid var(--border-strong);
  background:var(--surface-raised); color:var(--text); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--text);
  transition-duration:var(--dur-fast); }
.btn:active{ transform:translateY(0); transition-duration:80ms; }
.btn--register{ background:var(--accent); color:#fff; border-color:transparent; }
.btn--register:hover{ background:var(--accent-hover); color:#fff; }
.btn--lg{ font-size:var(--step-0); padding:0.9rem 1.9rem; }

/* ===== Section rhythm =====
   Generous macro-rhythm; consecutive sections share a single gap (no doubled
   air) so vertical cadence stays even rather than accumulating. */
.section{ padding-block:var(--space-section); }
.section + .section{ padding-block-start:0; }
/* The lead/intro section after the hero hugs the hero a little closer. */
.hero + .section{ padding-block-start:var(--space-l); }

/* ----- Placard: ONE separation cue strategy.
   Default placard = soft foliage tint + layered shadow (no hard border). ----- */
.placard{
  position:relative;
  background:
    linear-gradient(oklch(0.992 0.003 288 / 0.86), oklch(0.992 0.003 288 / 0.93)),
    url("../img/card-texture.jpg") center/cover no-repeat;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--space-card);
}
/* Lineup keeps plain cards so the artist logos pop. */
.lineup-page .placard{ background:var(--surface-raised); }
.placard + .placard{ margin-block-start:var(--gutter); }

/* ----- Section heading: Anton DISPLAY register + tracked eyebrow.
   Used as both h1 (subpages) and h2 (sections) site-wide. ----- */
.section-head{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:-0.01em; line-height:0.98;
  font-size:var(--step-4); color:var(--text);
  margin-block-end:var(--space-s);
}
/* Page-title h1 outranks section h2 (esp. the guide's h1 over its h2s). */
h1.section-head{ font-size:var(--step-5); }
.guide-section h2.section-head{ font-size:var(--step-3); }
.section-head__tag{ position:relative; display:block; font-family:var(--font-body);
  font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  font-size:var(--step--2); color:var(--spark-text); margin-block-end:var(--space-2xs);
  /* short rust tick leads the eyebrow — the recurring brand mark */
  padding-inline-start:1.6rem; }
.section-head__tag::before{ content:""; position:absolute; left:0; top:0.5em;
  width:1rem; height:2px; background:var(--spark); border-radius:2px; }

.lede{ font-size:var(--step-1); line-height:1.45; color:var(--text-secondary);
  max-inline-size:var(--measure-lede); font-weight:400;
  margin-block-end:var(--space-m); }

/* Subheads + lists inside a generic placard (e.g. Camping) follow the system. */
.placard > h3{ font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--accent); font-size:var(--step-0);
  margin-block-start:var(--space-l); margin-block-end:var(--space-2xs); }
.placard > ul{ padding-inline-start:1.15rem; }
.placard > ul li{ margin-block-end:var(--space-3xs); }

/* ----- Full-bleed foliage band: intentional rhythm punctuation, not filler. ----- */
.foliage-band{ height:clamp(120px,16vw,210px);
  background:url("../img/foliage-band.jpg") center/cover no-repeat;
  border-block:1px solid var(--border); }

/* ----- Stay-weird divider ----- */
.divider{ margin-block:var(--space-xl); text-align:center; }
.divider img{ width:min(320px,52%); margin-inline:auto; opacity:0.32;
  filter:saturate(0.85); }

/* ===== Hero (home) ===== */
.hero{ text-align:center; padding-block:clamp(2.5rem,8vw,5.5rem); position:relative; }
.hero__badge{ width:min(252px,58vw); margin-inline:auto;
  filter:drop-shadow(0 14px 32px oklch(0.226 0.03 292 / 0.28)); }
.hero__title{ font-family:var(--font-display); text-transform:uppercase; color:var(--text);
  font-size:var(--step-7); letter-spacing:-0.025em; line-height:0.9;
  margin:0.35em 0 0.4em; text-wrap:balance;
  text-shadow:0 1px 1px oklch(0.99 0 0 / 0.6), 0 2px 22px oklch(0.99 0 0 / 0.55); }
.hero__meta{ display:inline-block; font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em;
  font-size:clamp(0.74rem,2.2vw,0.95rem); color:var(--text);
  font-variant-numeric:tabular-nums;
  background:oklch(0.992 0.003 288 / 0.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:0.55rem 1.1rem; border-radius:var(--r-pill); border:1px solid var(--border); }
.hero__cta{ margin-block-start:var(--space-l); }

/* ===== Prize board ===== */
.placard--prize{ box-shadow:var(--shadow-lg); }   /* the single primary focal element */
.prize{ display:grid; gap:var(--gutter); grid-template-columns:1fr;
  margin-block-start:var(--space-l); }
.prize__total{ font-family:var(--font-display); color:var(--accent);
  font-size:var(--step-7); letter-spacing:-0.025em; text-align:center; line-height:0.92;
  font-variant-numeric:tabular-nums; margin:0; }
.prize__division{ border-radius:var(--r-md); background:oklch(0.992 0.003 288 / 0.7);
  box-shadow:var(--shadow-sm); padding:var(--space-m) var(--space-l); }
.prize__division h3{ font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:0; color:var(--text); font-size:var(--step-2); line-height:1; margin:0; }
.prize__places{ list-style:none; margin:var(--space-2xs) 0 0; padding:0; display:grid;
  gap:var(--space-3xs); color:var(--text-secondary); font-weight:600;
  font-variant-numeric:tabular-nums; }
@media(min-width:640px){
  .prize{ grid-template-columns:1fr 1fr; }
  .prize__total{ grid-column:1/-1; }
}

/* ===== Teasers ===== */
.teasers{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }
@media(min-width:720px){ .teasers{ grid-template-columns:1fr 1fr; } }
.teasers .placard{ display:flex; flex-direction:column; }
.teasers .placard p:first-of-type{ flex:1; }

/* ===== Lineup ===== */
.lineup-grid{ display:grid; gap:var(--gutter);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
.player-card{ position:relative; border-radius:var(--r-md);
  background:var(--surface-raised); padding:var(--space-l) var(--space-m);
  box-shadow:var(--shadow-sm); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-2xs);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out); }
.player-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow);
  transition-duration:var(--dur-fast); }
.player-logo{ display:block; width:100%; height:88px; object-fit:contain; }
.player-logo--lg{ height:112px; }
.player-card__name{ font-family:var(--font-body); font-weight:700; font-size:var(--step-1);
  letter-spacing:0; color:var(--text); word-break:break-word; }
.player-card--dj{ background:var(--surface-sunken); }
.player-card__role{ font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  font-size:var(--step--2); letter-spacing:0.16em; color:var(--spark-text); }

/* ===== Guide (TOC + sections) ===== */
.guide-layout{ display:grid; gap:var(--gutter); grid-template-columns:1fr; }
.guide-content{ min-width:0; }
.toc{ position:relative; min-width:0; }
.toc-select{ display:block; width:100%; max-width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-weight:600; font-size:var(--step--1); color:var(--text);
  background:var(--surface-raised); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  padding:0.7rem 2.2rem 0.7rem 0.9rem; min-height:44px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%233E3B6B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.95rem center; }
.toc ul{ list-style:none; margin:0; padding:0; display:none; }
.toc__link{ display:flex; align-items:center; min-height:40px; white-space:nowrap;
  text-decoration:none; color:var(--text-muted); font-weight:600;
  font-size:var(--step--1); padding:0 0.75rem; border-radius:var(--r-sm);
  border-left:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out); }
.toc__link:hover{ color:var(--text); background:oklch(0.295 0.016 290 / 0.05); }
.toc__link.is-active{ color:var(--accent); background:oklch(from var(--accent) l c h / 0.08);
  border-left-color:var(--spark); }
.guide-section{ scroll-margin-top:88px; overflow-wrap:break-word; }
.guide-section + .guide-section{ margin-block-start:var(--gutter); }
.guide-section h2{ margin-block-start:0; }
.guide-section h3{ font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--accent); font-size:var(--step-0);
  margin-block-start:var(--space-l); margin-block-end:var(--space-2xs); }
.guide-section ul{ padding-inline-start:1.15rem; }
.guide-section li{ margin-block-end:var(--space-3xs); max-inline-size:var(--measure); }
.lodging-card{ border-radius:var(--r-md); overflow:hidden; background:var(--surface-raised);
  margin-block:var(--space-m); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out); }
.lodging-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow);
  transition-duration:var(--dur-fast); }
.lodging-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.lodging-card__body{ padding:var(--space-s) var(--space-m) var(--space-m); }
.lodging-card__body h4{ margin:0 0 var(--space-3xs); font-size:var(--step-1);
  font-weight:700; letter-spacing:0; }
.lodging-card__body p{ color:var(--text-muted); margin:0; max-inline-size:var(--measure); }
@media(min-width:900px){
  .guide-layout{ grid-template-columns:212px minmax(0,1fr); align-items:start; }
  .toc{ position:sticky; top:88px; }
  .toc-select{ display:none; }
  .toc ul{ display:flex; flex-direction:column; gap:var(--space-3xs); }
}

/* ===== Instagram ===== */
.ig{ text-align:center; }
.ig .lede{ margin-inline:auto; max-inline-size:var(--measure-lede); }
.ig-embeds{ display:flex; flex-wrap:wrap; gap:var(--gutter); justify-content:center;
  align-items:flex-start; margin-block-start:var(--space-l); }
.ig-embeds .instagram-media{ margin:0 !important; min-width:300px; }
.ig-cta{ margin-block-start:var(--space-l); }

/* ===== Footer (full-bleed foliage band on top) ===== */
.footer{ background:var(--n-950); color:var(--n-200); margin-top:var(--space-2xl);
  padding:0 0 var(--space-l); }
.footer::before{ content:""; display:block; height:clamp(110px,15vw,190px);
  background:url("../img/foliage-band.jpg") center/cover no-repeat;
  margin-bottom:var(--space-l);
  -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent);
  mask-image:linear-gradient(180deg, #000 60%, transparent); }
.footer a{ color:var(--p-300); }
.footer a:hover{ color:#fff; }
.footer__inner{ display:grid; gap:var(--space-2xs); text-align:center; }
.footer__event{ font-weight:600; margin:0; font-variant-numeric:tabular-nums; }
.footer__links{ display:flex; gap:var(--space-l); justify-content:center; margin:0; }
.footer__links a{ min-height:44px; display:inline-flex; align-items:center; }
.footer__credit{ color:var(--n-400); font-size:var(--step--1); margin:0; }

/* ===== Mobile nav ===== */
@media(max-width:760px){
  .nav__toggle{ display:flex; }
  .nav__links{ position:absolute; top:68px; left:0; right:0; flex-direction:column;
    align-items:stretch;
    background:oklch(0.99 0.004 288 / 0.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:var(--space-2xs); gap:var(--space-3xs); display:none; }
  .nav__links.is-open{ display:flex; }
  .nav__link{ padding:0.7rem 0.9rem; }
  .nav__link[aria-current="page"]::after{ display:none; }
  .nav__link[aria-current="page"]{ background:oklch(from var(--accent) l c h / 0.09);
    border-radius:var(--r-sm); }
  .btn--register{ width:100%; text-align:center; margin-top:var(--space-3xs); }
}

/* ===== Trim leading on big display type where supported (precise rhythm) ===== */
@supports (text-box:trim-both cap alphabetic){
  .hero__title, .prize__total, .section-head, .prize__division h3{
    text-box:trim-both cap alphabetic;
  }
}

/* ===== Motion preferences ===== */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Higher-contrast preference ===== */
@media(prefers-contrast:more){
  :root{
    --text-muted:var(--n-700);
    --text-secondary:var(--n-800);
    --border:var(--border-strong);
  }
}

/* =============================================================================
   ADDITIONS — tickers, video splash, embedded video, countdown
   References existing tokens only. Reduced-motion is already handled globally
   by the universal rule in the prefers-reduced-motion block above.
   ============================================================================= */

/* ----- Shared ticker scroll keyframe (a duplicated track translated -50% = seamless) ----- */
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ----- Top ticker: full-bleed announcement bar above the sticky header ----- */
.ticker{ overflow:hidden; }
.ticker--top{ background:var(--accent); color:#fff; border-bottom:1px solid var(--border-strong); }
.ticker--top .ticker__track{
  display:flex; width:max-content; will-change:transform;
  animation:ticker-scroll 38s linear infinite;
}
.ticker--top .ticker__group{
  flex:none; white-space:nowrap; padding-block:0.5rem;
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:0.14em; font-size:var(--step--2);
}
.ticker--top:hover .ticker__track{ animation-play-state:paused; }

/* ----- Bottom ticker: scrolling mountain-range panorama just above the footer ----- */
.ticker--mtn{ height:clamp(90px,12vw,150px); background:var(--surface-raised); border-block:1px solid var(--border); }
.ticker--mtn .ticker__pan{
  display:flex; height:100%; width:max-content; will-change:transform;
  animation:ticker-scroll 60s linear infinite;
}
.ticker--mtn .ticker__pan img{ height:100%; width:auto; max-width:none; display:block; }
.ticker--mtn:hover .ticker__pan{ animation-play-state:paused; }

/* ----- Video splash (homepage modal) ----- */
.splash{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--gutter); }
.splash[hidden]{ display:none; }
.splash__backdrop{ position:absolute; inset:0; background:oklch(0.165 0.012 292 / 0.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.splash__dialog{ position:relative; z-index:1; width:min(880px,100%);
  background:var(--surface-raised); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:var(--space-m); animation:splash-in var(--dur-mid) var(--ease-out); }
@keyframes splash-in{ from{ opacity:0; transform:translateY(12px) scale(0.98); } to{ opacity:1; transform:none; } }
.splash__close{ position:absolute; top:-0.7rem; right:-0.7rem; width:2.4rem; height:2.4rem;
  display:grid; place-items:center; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--surface-raised); color:var(--text); box-shadow:var(--shadow); font-size:1.6rem; line-height:1; }
.splash__media{ position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:#000; }
.splash__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.splash__fallback{ margin:var(--space-2xs) 0 0; text-align:center; font-size:var(--step--1); }

/* ----- Embedded video (Watch page) ----- */
.video-embed{ position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:#000; box-shadow:var(--shadow); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-fallback{ margin-block-start:var(--space-s); }

/* ----- Countdown (homepage hero) ----- */
.countdown{ display:flex; justify-content:center; gap:var(--space-s); flex-wrap:wrap;
  margin-block-start:var(--space-m); }
.countdown__unit{ min-width:4.4rem; padding:var(--space-2xs) var(--space-xs);
  background:oklch(0.992 0.003 288 / 0.7); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); text-align:center; }
.countdown__num{ display:block; font-family:var(--font-display); font-weight:400;
  font-size:var(--step-4); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.countdown__label{ display:block; font-family:var(--font-body); font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em; font-size:var(--step--2);
  color:var(--text-muted); margin-block-start:0.25rem; }
.countdown__done{ font-family:var(--font-display); font-weight:400; font-size:var(--step-3);
  color:var(--accent); text-transform:uppercase; }
.countdown__fallback{ color:var(--text-secondary); }