/* =========================================================================
   Fud's North Alabama Catfish Trail — design tokens + components
   ========================================================================= */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Motion */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Widths */
  --content-narrow: 640px;
  --content-default: 1000px;
  --content-wide: 1240px;

  /* Fonts */
  --font-display: 'Clash Display', 'Trebuchet MS', sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', sans-serif;

  /* Constant carbon rail used for the sponsor banner + hero overlay.
     Matches the black hex-mesh field on the trailer wrap. */
  --rail-bg: #070707;
  --rail-text: #eef1f6;

  /* Height of the sponsor logos in the scrolling banner. Overridden at runtime
     from the "Sponsor logo size" setting in the admin panel. */
  --logo-h: clamp(64px, 7.6vw, 96px);

  /* Chrome — the brushed silver from the trailer's swoosh and lettering.
     Used as a gradient on display type and divider rules. */
  --chrome-grad: linear-gradient(160deg, #ffffff 0%, #cfd6de 26%, #8b929c 52%, #e8edf3 74%, #9aa1ab 100%);
  --chrome-rule: linear-gradient(90deg, transparent, #8b929c 18%, #ffffff 50%, #8b929c 82%, transparent);

  /* Electric blue swoosh gradient from the wrap */
  --blue-grad: linear-gradient(100deg, #021221 0%, #0b3f9e 38%, #1f6fe8 62%, #0a3d96 100%);
}

/* ---------- Dark / carbon (default — this is the trail's look) ---------- */
:root,
[data-theme='dark'] {
  --color-bg: #070707;
  --color-surface: #101114;
  --color-surface-2: #16181d;
  --color-surface-offset: #0c0d10;
  --color-surface-offset-2: #1b1e24;
  --color-surface-dynamic: #262a32;
  --color-divider: #1e2128;
  --color-border: #2b3039;

  --color-text: #eef1f6;
  --color-text-muted: #9aa3b2;
  --color-text-faint: #7d8695;
  --color-text-inverse: #06070a;

  /* Royal blue fill — carries white label text at AA */
  --color-primary: #1657d8;
  --color-primary-hover: #2a6dee;
  --color-primary-active: #4184ff;
  --color-primary-highlight: #0e1f42;
  /* Brighter blue for accent text and icons on carbon */
  --color-primary-ink: #5fa0ff;

  --color-chrome: #c9ced6;
  --color-chrome-hover: #e3e7ec;
  --color-chrome-soft: #1a1d22;

  --color-error: #f08a8a;
  --color-success: #7fc05f;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5);
  --shadow-md: 0 2px 6px oklch(0 0 0 / 0.55);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.7);
}

/* ---------- Light ---------- */
[data-theme='light'] {
  --color-bg: #eef0f4;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-surface-offset: #e3e6ec;
  --color-surface-offset-2: #d6dae2;
  --color-surface-dynamic: #c6ccd6;
  --color-divider: #dfe3e9;
  --color-border: #c3c9d3;

  --color-text: #0d1117;
  --color-text-muted: #515b69;
  --color-text-faint: #646d7b;
  --color-text-inverse: #ffffff;

  --color-primary: #1046b8;
  --color-primary-hover: #0c379a;
  --color-primary-active: #092a79;
  --color-primary-highlight: #d7e3fb;
  --color-primary-ink: #0f47bd;

  --color-chrome: #5b646f;
  --color-chrome-hover: #3f4650;
  --color-chrome-soft: #dfe3e9;

  --color-error: #a52626;
  --color-success: #2f6b1c;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 250 / 0.08);
  --shadow-md: 0 1px 2px oklch(0.2 0.02 250 / 0.07), 0 6px 18px oklch(0.2 0.02 250 / 0.09);
  --shadow-lg: 0 2px 4px oklch(0.2 0.02 250 / 0.1), 0 16px 40px oklch(0.2 0.02 250 / 0.14);
}

/* =========================================================================
   Carbon hex-mesh texture
   The trailer background is a black honeycomb mesh. Recreated here with two
   offset radial-gradient grids so there is no image to download.
   ========================================================================= */

.carbon,
.rail,
.site-footer {
  position: relative;
  background-color: var(--rail-bg);
}
.carbon::before,
.rail::before,
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.03) 0 1px, transparent 1.1px),
    radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.03) 0 1px, transparent 1.1px);
  background-size: 11px 19px, 11px 19px;
  background-position: 0 0, 5.5px 9.5px;
  /* Fade the weave out toward the middle so it reads as texture, not a grid */
  mask-image: linear-gradient(to bottom, #000 0%, oklch(0 0 0 / 0.25) 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, oklch(0 0 0 / 0.25) 65%, transparent 100%);
}

/* Chrome hairline capping the carbon sections */
.site-footer { border-top: 1px solid transparent; }
.site-footer::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--chrome-rule); opacity: 0.42; pointer-events: none;
}
/* Keep the mesh behind the footer's own content */
.site-footer > * { position: relative; z-index: 1; }
.rail > * { position: relative; z-index: 1; }

[data-theme='light'] .carbon::before,
[data-theme='light'] .rail::before,
[data-theme='light'] .site-footer::before {
  background-image:
    radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.05) 0 1px, transparent 1.1px),
    radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.05) 0 1px, transparent 1.1px);
}

/* Chrome hairline divider, used under section heads */
.chrome-rule {
  height: 1px; border: 0; margin: 0;
  background: var(--chrome-rule);
  opacity: 0.5;
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

.wrap { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-5); }
.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }

@media (min-width: 768px) {
  .wrap { padding-inline: var(--space-8); }
}

.section { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.section--tight { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); }
.section--alt { background: var(--color-surface); border-block: 1px solid oklch(from var(--color-text) l c h / 0.09); }

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2);
  transform: translateY(-200%);
  background: var(--color-primary); color: #fff;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; z-index: 200;
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================================
   Header + navigation
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: oklch(from var(--color-bg) l c h / 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.1);
}

.header-bar {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 68px;
}

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--color-text);
  margin-right: auto; padding-block: var(--space-2);
}
.brand svg { width: 38px; height: 38px; color: var(--color-primary-ink); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0.005em;
}
.brand-sub {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--color-text-muted); font-weight: 500; margin-top: 2px;
}
@media (min-width: 900px) {
  .brand-name { font-size: 1.25rem; }
}
@media (max-width: 460px) {
  .brand-sub { display: none; }
}

.nav-desktop { display: none; }
@media (min-width: 1000px) {
  .nav-desktop { display: block; }
}
.nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.nav-item { position: relative; }

.nav-link {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; color: var(--color-text-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav-link[aria-current='page'] { color: var(--color-text); }
.nav-link[aria-current='page']::after {
  content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px;
  height: 2px; background: var(--color-primary); border-radius: var(--radius-full);
}
.nav-link .chev { width: 12px; height: 12px; opacity: 0.6; transition: transform var(--transition-interactive); }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 190px;
  background: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a {
  display: block; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); text-decoration: none;
  color: var(--color-text-muted); border-radius: var(--radius-md);
}
.nav-sub a:hover { background: var(--color-surface-offset); color: var(--color-text); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.icon-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.icon-btn:active { transform: scale(0.95); }
.nav-toggle { display: grid; }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

/* Mobile navigation panel */
.nav-mobile {
  display: block;
  overflow: hidden;
  max-height: 0;
  border-top: 1px solid transparent;
  transition: max-height 320ms var(--ease-in-out), border-color 200ms linear;
}
.nav-mobile[data-open='true'] {
  max-height: 78vh;
  overflow-y: auto;
  border-top-color: oklch(from var(--color-text) l c h / 0.1);
}
@media (min-width: 1000px) { .nav-mobile { display: none; } }

.nav-mobile ul { list-style: none; }
.nav-mobile > ul { padding: var(--space-3) 0 var(--space-6); }
.m-row { display: flex; align-items: stretch; border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.07); }
.m-link {
  flex: 1; display: flex; align-items: center;
  min-height: 52px; padding: var(--space-2) var(--space-5);
  font-size: 1.0625rem; font-weight: 500; text-decoration: none; color: var(--color-text);
}
.m-link[aria-current='page'] { color: var(--color-primary-ink); }
.m-expand {
  width: 56px; display: grid; place-items: center; color: var(--color-text-muted);
  border-left: 1px solid oklch(from var(--color-text) l c h / 0.07);
}
.m-expand svg { transition: transform 200ms var(--ease-out); }
.m-expand[aria-expanded='true'] svg { transform: rotate(180deg); }
.m-sub { display: none; padding: var(--space-2) var(--space-5) var(--space-3) calc(var(--space-5) + var(--space-4)); }
.m-sub[data-open='true'] { display: block; }
.m-sub a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
}
.m-sub a:active { color: var(--color-primary-ink); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; border-radius: var(--radius-md);
  transition: background var(--transition-interactive), color var(--transition-interactive),
              box-shadow var(--transition-interactive), transform var(--transition-interactive),
              border-color var(--transition-interactive);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--ghost {
  border: 1px solid oklch(from var(--color-text) l c h / 0.2);
  color: var(--color-text);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary-ink); }
.btn--ghost:active { transform: translateY(1px); }

.btn--onrail {
  border: 1px solid oklch(from var(--rail-text) l c h / 0.34);
  color: var(--rail-text);
}
.btn--onrail:hover { background: oklch(from var(--rail-text) l c h / 0.12); }

.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); }

/* =========================================================================
   Hero
   ========================================================================= */

.hero { position: relative; background: var(--rail-bg); color: var(--rail-text); overflow: hidden; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  background: var(--rail-bg);
}
/* A background video fills the hero the same way the photo does. Centred
   rather than low-anchored, because the action in a clip is usually mid-frame,
   and pointer-events off so it can never swallow a click on the buttons. */
.hero-video {
  object-position: center center;
  pointer-events: none;
}

/* Desktop height is configurable. Contain preserves the full clip within
   the shorter area; phones retain a 16:9 video above the text. */
.hero--video {
  height: var(--hero-video-height, clamp(400px, 28.125vw, 560px));
  display: flex; align-items: center;
}
.hero--video .hero-video { object-fit: contain; background: #000; }
@media (min-width: 768px) {
  .hero--video.hero--fill-width .hero-video { object-fit: cover; }
}
.hero--video > .wrap { width: 100%; }
.hero--video .hero-inner { padding-block: var(--space-4); }
@media (min-width: 768px) {
  .hero--video h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: var(--space-3); }
  .hero--video p { margin-bottom: var(--space-4); }
}
.hero--video::after {
  background:
    linear-gradient(95deg, oklch(0.09 0 0 / 0.72) 0%, oklch(0.09 0 0 / 0.35) 34%, transparent 58%);
}

/* Phones: a 16:9 frame is only ~220px tall, too short to sit text on. Show
   the full video first, then the headline and buttons underneath it. */
@media (max-width: 767px) {
  .hero--video {
    height: auto; aspect-ratio: auto; display: block;
    padding-top: 56.25vw;
  }
  .hero--video .hero-video { inset: 0 0 auto 0; height: 56.25vw; }
  .hero--video::after {
    inset: 0 0 auto 0; height: 56.25vw;
    background: linear-gradient(to top, var(--rail-bg) 0%, transparent 22%);
  }
  .hero--video .hero-inner { padding-block: var(--space-8) var(--space-16); }
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* Cool blue wash from the trailer, kept light so the photo still reads */
    linear-gradient(105deg, oklch(0.4 0.15 262 / 0.3) 0%, transparent 58%),
    /* Carbon fade for text legibility, strongest on the left */
    linear-gradient(100deg, oklch(0.09 0 0 / 0.88) 0%, oklch(0.09 0 0 / 0.6) 42%, oklch(0.09 0 0 / 0.2) 75%),
    linear-gradient(to top, oklch(0.09 0 0 / 0.78) 0%, transparent 55%);
}

/* Blue-and-chrome swoosh across the bottom of the hero, drawn as an SVG so it
   keeps the sweeping S-curve from the trailer wrap at any width. */
.hero-swoosh {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px;
  height: clamp(46px, 6.5vw, 92px);
  pointer-events: none; line-height: 0;
}
.hero-swoosh svg { display: block; width: 100%; height: 100%; }
.hero-inner {
  position: relative; z-index: 1;
  padding-block: clamp(var(--space-16), 13vw, var(--space-32));
  max-width: 46rem;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.hero p {
  font-size: var(--text-base); color: oklch(from var(--rail-text) l c h / 0.84);
  max-width: 46ch; margin-bottom: var(--space-8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-primary-ink); margin-bottom: var(--space-4);
}
/* Brushed-chrome lettering, like the trailer's "TROPHY CATFISH" line.
   The gradient stays in the light half of the ramp so every letter is legible. */
.hero .eyebrow {
  background: linear-gradient(100deg, #ffffff 0%, #dfe5ec 30%, #b9c1cc 50%, #ffffff 72%, #d5dbe3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero .eyebrow { color: var(--color-chrome); -webkit-text-fill-color: currentColor; }
}

/* =========================================================================
   Sponsor rail (full-bleed marquee)
   ========================================================================= */

.rail {
  background: var(--rail-bg); color: var(--rail-text);
  padding-block: clamp(var(--space-5), calc(var(--logo-h) * 0.34), var(--space-8));
  border-block: 1px solid oklch(from var(--rail-text) l c h / 0.1);
  overflow: hidden;
}
.rail-label {
  display: block; text-align: center;
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: oklch(from var(--rail-text) l c h / 0.5);
  margin-bottom: var(--space-5);
}
.marquee {
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}
.marquee-group {
  display: flex; align-items: center; flex: none;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  padding-right: clamp(var(--space-8), 5vw, var(--space-16));
}
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
.marquee:has(:focus-visible) .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-group[aria-hidden="true"] { display: none; }
}
.marquee-item { flex: none; display: grid; place-items: center; }
.marquee-item img {
  /* max-width is tied to the height so a very wide logo is reined in without
     ever shrinking a normal wordmark below the chosen size. */
  height: var(--logo-h); width: auto; max-width: calc(var(--logo-h) * 4.4);
  object-fit: contain;
  background: none; opacity: 0.82;
  transition: opacity var(--transition-interactive), transform var(--transition-interactive);
}
a.marquee-item:hover img { opacity: 1; transform: scale(1.04); }
.marquee-item .fallback-name {
  font-family: var(--font-display); font-weight: 500;
  /* Sponsors with no logo yet show their name, sized to match the logos. */
  font-size: clamp(1rem, calc(var(--logo-h) * 0.235), 1.6rem);
  color: oklch(from var(--rail-text) l c h / 0.8); white-space: nowrap;
}

/* =========================================================================
   Section headers + prose
   ========================================================================= */

.section-head { margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); letter-spacing: -0.01em;
  max-width: 30ch;
}
.section-head p {
  margin-top: var(--space-4); color: var(--color-text-muted); max-width: 60ch;
}

.page-head { padding-block: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-8); }
.page-head h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); letter-spacing: -0.01em;
}
.page-head p { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 62ch; }

.prose > * + * { margin-top: var(--space-5); }
.prose p, .prose li { max-width: 68ch; color: var(--color-text-muted); }
.prose h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  color: var(--color-text); margin-top: var(--space-10);
}
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose a { color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Home — split intro
   ========================================================================= */

.split {
  display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--reverse > :first-child { order: 2; }
}
.split-figure { position: relative; }
.split-figure img {
  width: 100%; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) {
  .split-figure img { aspect-ratio: 3 / 4; }
}
.stat-chip {
  position: absolute; bottom: calc(-1 * var(--space-5)); left: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: calc(var(--radius-lg) - 2px);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5);
  max-width: 15rem;
}
.stat-chip strong {
  display: block; font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; color: var(--color-text);
}
.stat-chip span { font-size: var(--text-xs); color: var(--color-text-muted); }

.fact-list { list-style: none; margin-top: var(--space-8); }
.fact-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.1);
  max-width: none;
}
.fact-list li:last-child { border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.1); }
.fact-list dt, .fact-num {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-primary-ink); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.fact-list p { margin: 0; font-size: var(--text-sm); }
.fact-list b { display: block; color: var(--color-text); font-size: var(--text-base); font-weight: 600; margin-bottom: 2px; }

/* =========================================================================
   Event cards
   ========================================================================= */

.event-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.event-card {
  display: flex; flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}
.event-date {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600;
  color: var(--color-primary-ink); font-variant-numeric: tabular-nums;
}
.event-date .d-day { font-size: var(--text-lg); line-height: 1; }
.event-date .d-mon { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; }
.event-card h3 {
  margin-top: var(--space-3);
  font-size: var(--text-base); font-weight: 700; color: var(--color-text);
}
.event-meta { list-style: none; margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.event-meta li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted); max-width: none;
}
.event-meta span:first-child {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-faint); padding-top: 3px;
}
.event-note {
  margin-top: var(--space-4); font-size: var(--text-sm);
  color: var(--color-text-muted); border-left: 0;
  background: var(--color-surface-offset); padding: var(--space-3);
  border-radius: var(--radius-md);
}
.event-actions { margin-top: auto; padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset); color: var(--color-text-muted);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--live { background: var(--color-primary-highlight); color: var(--color-primary-ink); }
.badge--chrome { background: var(--color-chrome-soft); color: var(--color-chrome); }

/* =========================================================================
   Season switcher
   ========================================================================= */

.season-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.12);
  padding-bottom: var(--space-4);
}
.season-tab {
  min-height: 44px; padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid oklch(from var(--color-text) l c h / 0.14);
  display: inline-flex; align-items: center;
}
.season-tab:hover { color: var(--color-text); border-color: var(--color-primary); }
.season-tab[aria-current='true'] {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

.callout {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.11);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.callout h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  margin-bottom: var(--space-3);
}
.callout p { color: var(--color-text-muted); }
.callout .btn { margin-top: var(--space-6); }

/* =========================================================================
   Sponsors page
   ========================================================================= */

.tier-block + .tier-block { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.tier-head {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.tier-head h2 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
}
.tier-head .rule { flex: 1; height: 1px; background: oklch(from var(--color-text) l c h / 0.14); }

.sponsor-grid { display: grid; gap: var(--space-5); }
.sponsor-grid--title { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.sponsor-grid--event { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.sponsor-grid--support { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }

.sponsor-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
}
a.sponsor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
a.sponsor-card:active { transform: translateY(0); }
.sponsor-logo {
  display: grid; place-items: center;
  background: var(--rail-bg);
  border-radius: calc(var(--radius-lg) - var(--space-5) + 4px);
  padding: var(--space-5); min-height: 104px;
}
.sponsor-logo img { height: 48px; width: auto; max-width: 100%; object-fit: contain; background: none; }
.sponsor-logo .fallback-name {
  font-family: var(--font-display); font-size: var(--text-base);
  color: var(--rail-text); text-align: center;
}
.sponsor-card h3 { font-size: var(--text-base); font-weight: 700; }
.sponsor-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.sponsor-card .visit {
  margin-top: auto; font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary-ink);
}

/* =========================================================================
   Socials
   ========================================================================= */

.social-list { display: grid; gap: var(--space-4); list-style: none; }
@media (min-width: 760px) { .social-list { grid-template-columns: 1fr 1fr; } }
.social-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
}
.social-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-card:active { transform: translateY(0); }
.social-card svg { width: 26px; height: 26px; flex: none; color: var(--color-primary-ink); }
.social-card .s-text { display: grid; gap: 2px; min-width: 0; }
.social-card .s-handle { font-weight: 700; font-size: var(--text-base); }
.social-card .s-label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  background: var(--rail-bg); color: var(--rail-text);
  padding-block: clamp(var(--space-12), 6vw, var(--space-16)) var(--space-8);
  /* Page and footer are both carbon now, so a big margin just reads as a void */
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: oklch(from var(--rail-text) l c h / 0.5);
  margin-bottom: var(--space-4);
}
.site-footer p { color: oklch(from var(--rail-text) l c h / 0.76); font-size: var(--text-sm); }
.site-footer ul { list-style: none; display: grid; gap: var(--space-2); }
.site-footer a {
  color: oklch(from var(--rail-text) l c h / 0.82);
  text-decoration: none; font-size: var(--text-sm);
  display: inline-flex; min-height: 32px; align-items: center;
}
.site-footer a:hover { color: var(--rail-text); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand svg { width: 34px; height: 34px; color: oklch(from var(--rail-text) l c h / 0.9); }
.footer-brand strong { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.footer-base {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid oklch(from var(--rail-text) l c h / 0.14);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
}
.footer-base small { font-size: var(--text-xs); color: oklch(from var(--rail-text) l c h / 0.55); }

/* =========================================================================
   States: skeleton, empty, error
   ========================================================================= */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.sk-card {
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: grid; gap: var(--space-3);
}
.sk-line { height: 0.85em; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w80 { width: 80%; }
.sk-block { height: 96px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-text-muted);
}
.empty-state svg { width: 44px; height: 44px; margin-bottom: var(--space-4); color: var(--color-text-faint); }
.empty-state h3 { color: var(--color-text); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.empty-state p { max-width: 38ch; }
.empty-state .btn { margin-top: var(--space-6); }

.notice {
  border: 1px solid oklch(from var(--color-error) l c h / 0.4);
  background: oklch(from var(--color-error) l c h / 0.08);
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* Reveal on scroll — opacity only, no layout shift */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      animation: reveal-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

.img-fallback {
  display: grid; place-items: center;
  background: var(--color-surface-offset);
  color: var(--color-text-faint);
  font-size: var(--text-xs); text-align: center; padding: var(--space-4);
  border-radius: var(--radius-md);
}