/* ==========================================================================
   TrackSide TV — lmutracksidetv.com
   Core stylesheet. Black & white brand system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Dark is the default brand surface */
  --bg: #060606;
  --bg-elev: #0b0b0b;
  --surface: #101010;
  --surface-2: #171717;
  --fg: #ffffff;
  --fg-70: rgba(255, 255, 255, 0.72);
  --fg-50: rgba(255, 255, 255, 0.52);
  --fg-30: rgba(255, 255, 255, 0.30);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --inv-bg: #ffffff;
  --inv-fg: #0a0a0a;
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  --shadow-sm: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --grain: 0.035;

  /* The one non-mono colour: the live/on-air indicator */
  --live: #ff2b2b;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Labels, buttons and micro-copy used to be JetBrains Mono. The user asked for the
     site font everywhere, so this token now points at Archivo. */
  --font-mono: var(--font-display);

  /* Space & shape */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1280px;
  --radius: 4px;
  --radius-lg: 10px;
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.22s;
  --dur: 0.4s;
  --dur-slow: 0.8s;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Film-grain overlay — keeps the flat black from banding */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, -3%); }
  80% { transform: translate(4%, 2%); }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  /* the tight tracking eats the word space — put some back */
  word-spacing: 0.08em;
  text-transform: uppercase;
}

h1, .h1 { font-size: clamp(2.75rem, 8.5vw, 6.5rem); font-weight: 900; }
h2, .h2 { font-size: clamp(2rem, 5.2vw, 4rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
h4, .h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -0.015em; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--fg-70);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-dim { color: var(--fg-50); }
.text-center { text-align: center; }

/* Outlined headline word. Note: the stroke colour must NOT be currentColor —
   `color: transparent` would make currentColor transparent too. */
.outline {
  font-style: normal;
  -webkit-text-stroke: 1.5px var(--fg);
  color: transparent;
}

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

.container--narrow { max-width: 880px; }

.section { padding-block: clamp(4.5rem, 11vh, 9rem); position: relative; }

.section--alt { background: var(--bg-elev); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head--center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.section__head--center .lead { margin-inline: auto; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --------------------------------------------------------------------------
   5. Logo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg);
}

.logo__mark {
  width: 38px;
  height: 38px;
  flex: none;
  overflow: visible;
}

/* The mark: an outlined play triangle. Two copies of the same path sit on top
   of each other. .mark__play is the outline you always see; .mark__chase is a
   short lit segment that runs the perimeter, hidden until it is asked for. */
.logo__mark .mark__play,
.logo__mark .mark__chase {
  fill: none;
  stroke: currentColor;
  stroke-width: 13;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}

/* Draws itself once on load. The base rule is the finished state, so if the
   animation never runs the mark is still there. */
.logo__mark .mark__play {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 1;
  animation: mark-draw 0.95s var(--ease-in-out) 0.2s backwards;
}

.logo__mark .mark__chase {
  stroke-linecap: round;
  stroke-dasharray: 28 72;
  stroke-dashoffset: 100;
  opacity: 0;
}

/* Hover: the outline drops back and the lit segment laps it once. */
.logo:hover .logo__mark .mark__play { animation: mark-recede 1.05s var(--ease-in-out); }
.logo:hover .logo__mark .mark__chase { animation: mark-chase 1.05s var(--ease-in-out); }

@keyframes mark-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes mark-recede {
  0%, 100% { opacity: 1; }
  22%, 78% { opacity: 0.25; }
}

@keyframes mark-chase {
  0% { stroke-dashoffset: 100; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.logo__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.logo__word small {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--fg-50);
  transform: translateY(-1px);
}

.logo--lg .logo__mark { width: 64px; height: 64px; }
.logo--lg .logo__word { font-size: 1.7rem; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--line-2);
  --btn-hover-bg: var(--fg);
  --btn-hover-fg: var(--bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform 0.3s var(--ease-out);
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-in-out);
}

.btn:hover,
.btn:focus-visible {
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-bg);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(0.97); }

.btn__label { position: relative; z-index: 1; display: inline-block; }

.btn__icon {
  position: relative;
  z-index: 1;
  width: 1em;
  height: 1em;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(4px); }

.btn--primary {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-border: var(--fg);
  --btn-hover-bg: transparent;
  --btn-hover-fg: var(--fg);
}
.btn--primary::before { background: var(--bg); }
.btn--primary:hover { border-color: var(--fg); }

.btn--lg { padding: 1.15rem 2.1rem; font-size: 0.76rem; }
.btn--sm { padding: 0.65rem 1.1rem; font-size: 0.65rem; }
.btn--block { display: flex; width: 100%; }

/* Click ripple (injected by JS) */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: ripple 0.65s var(--ease-out) forwards;
  z-index: 0;
}

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Text link with underline wipe */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-in-out);
}

.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link svg { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease-out); }
.link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. Header / navigation
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 900;
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out);
}

.header.is-stuck {
  height: 64px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav { display: flex; align-items: center; gap: 0.25rem; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.95rem;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-70);
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link.is-active { color: var(--fg); }

.nav__link.is-active { background: color-mix(in srgb, var(--fg) 8%, transparent); }

.header__actions { display: flex; align-items: center; gap: 0.6rem; }

/* Burger */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.4s var(--ease-in-out), opacity 0.2s ease;
}

.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--bg);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  clip-path: circle(0% at calc(100% - 44px) 38px);
  transition: clip-path 0.7s var(--ease-in-out);
  overflow-y: auto;
  visibility: hidden;
}

.drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; }

.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  padding-block: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 150ms);
}

.drawer.is-open .drawer__link { opacity: 1; transform: translateY(0); }
.drawer__link span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-30); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* moving perspective grid */
.hero__grid {
  position: absolute;
  inset: -20% -10% -10%;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 78%);
  animation: grid-drift 26s linear infinite;
  opacity: 0.7;
}

@keyframes grid-drift {
  to { background-position: 76px 76px; }
}

/* light streaks — headlights down the straight */
.streak {
  position: absolute;
  height: 1px;
  width: 42%;
  top: var(--top, 30%);
  left: -45%;
  background: linear-gradient(90deg, transparent, var(--fg), transparent);
  opacity: 0;
  filter: blur(0.4px);
  animation: streak var(--speed, 5.5s) var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}

.streak::after {
  content: "";
  position: absolute;
  inset: -14px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 12%, transparent), transparent);
  filter: blur(10px);
}

@keyframes streak {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.75; }
  60% { opacity: 0.5; }
  100% { transform: translateX(340%); opacity: 0; }
}

.hero__glow {
  position: absolute;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--fg) 9%, transparent) 0%, transparent 62%);
  animation: breathe 9s var(--ease-in-out) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { margin-block: 1.25rem 1.75rem; }

/* line-by-line mask reveal */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.08em; }

.reveal-line > span {
  display: block;
  transform: translateY(105%);
  animation: line-up 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.11s + 0.15s);
}

@keyframes line-up {
  to { transform: translateY(0); }
}

/* Permanently outlined — the user wants this word hollow at all times,
   so do not add a hover or scroll state that fills it. */
.hero__title em {
  font-style: normal;
  -webkit-text-stroke: 1.5px var(--fg);
  color: transparent;
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              transform 0.5s var(--ease-out),
              background-color var(--dur) var(--ease-out);
  transform-style: preserve-3d;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--fg) 8%, transparent), transparent 60%);
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.card h3, .card h4 { margin-bottom: 0.7rem; }
.card p { color: var(--fg-50); font-size: 0.92rem; }

.card__list {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--fg-70);
}

/* Marker is absolute so the text stays a single inline flow — otherwise a
   leading <strong> becomes its own flex item and wraps on its own line. */
.card__list li {
  position: relative;
  padding-left: 1.15rem;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--fg-30);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   11. Split / media rows
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* --------------------------------------------------------------------------
   12b. Photo backgrounds
   A track photograph sits behind a section in full colour (the photos are the
   one place colour is allowed; the UI stays black and white), under a scrim
   that keeps type readable. Set the image
   per section with the --photo custom property:

       <section class="section section--photo" style="--photo:url('/assets/img/tracks/spa.jpg')">

   Tune the darkness with --scrim (default 0.62) if a lighter photo needs more.
   -------------------------------------------------------------------------- */
.section--photo {
  --scrim: 0.62;
}

.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
}

.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) calc(var(--scrim) * 100%), transparent),
      color-mix(in srgb, var(--bg) calc(var(--scrim) * 92%), transparent));
}

/* The hero is a slideshow of track photographs, crossfading under the grid
   and streaks. Each slide fades in over the one before (.is-prev stays opaque
   underneath until it is covered), and the scrim sits once on the stack
   rather than on every slide, so a crossfade never dips in brightness.
   main.js (initSlideshow) loads each photo just before it is shown. */
.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center 45%;
  opacity: 0;
  transition: opacity 1.8s var(--ease-in-out);
}

.hero__photo.is-prev { z-index: 1; opacity: 1; }

.hero__photo.is-active {
  z-index: 2;
  opacity: 1;
  animation: hero-zoom 11s linear forwards;
}

/* same name on .is-prev, so the zoom carries on while the next slide fades in */
.hero__photo.is-prev { animation: hero-zoom 11s linear forwards; }

@keyframes hero-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.1); }
}

.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 42%, transparent) 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 55%,
      var(--bg) 100%);
}

.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.footer__bottom a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   12c. Screenshot galleries (control)
   One stage per application with a thumbnail strip under it. The frame
   leans back in 3D at rest, then straightens and follows the pointer, so the
   dense timing screens are readable the moment you look at them. Touch
   screens and reduced motion get the flat frame (see the media queries).
   The frame stays dark in both themes: these are pictures of a dark app.
   -------------------------------------------------------------------------- */
.app-tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.gallery { margin-top: clamp(1.5rem, 4vw, 3rem); }
.gallery__heading { margin-top: clamp(3rem, 7vw, 5rem); font-size: clamp(1.1rem, 2vw, 1.4rem); }

.gallery__stage {
  --rx: 11deg;
  --ry: -7deg;
  --gx: 30%;
  --gy: 0%;
  position: relative;
  perspective: 1800px;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(0rem, 4vw, 4rem) clamp(2rem, 5vw, 4rem);
}

/* the floor shadow the frame stands on */
.gallery__stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0.5rem;
  height: 3rem;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.gallery__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.75),
    0 18px 30px -18px rgba(0, 0, 0, 0.5);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 60%;
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}

.gallery__stage.is-live .gallery__frame { transition-duration: 0.18s; }

/* a soft glare that moves with the pointer */
.gallery__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at var(--gx) var(--gy), rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.gallery__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.3s var(--ease-out);
}

.gallery__frame img.is-swapping { opacity: 0; }

.gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  color: var(--fg);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.gallery__nav svg { width: 1.1rem; height: 1.1rem; }
.gallery__nav:hover { background: var(--surface-2); border-color: var(--fg-30); }
.gallery__nav--prev { left: 0; }
.gallery__nav--next { right: 0; }

.gallery__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0 auto 1.5rem;
  max-width: 60ch;
  text-align: center;
  color: var(--fg-70);
}

.gallery__cap strong { color: var(--fg); }

.gallery__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--fg-50);
}

.gallery__strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.gallery__thumb {
  flex: 0 0 auto;
  width: clamp(110px, 14vw, 160px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  scroll-snap-align: start;
  transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery__thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.gallery__thumb.is-on { opacity: 1; border-color: var(--fg); }
.gallery__thumb:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* No hover to straighten it again, so never lean it in the first place. */
@media (hover: none) {
  .gallery__stage { --rx: 0deg; --ry: 0deg; padding-left: 0; padding-right: 0; }
  .gallery__nav { top: auto; bottom: -0.25rem; margin-top: 0; }
  .gallery__nav--prev { left: calc(50% - 3.25rem); }
  .gallery__nav--next { right: calc(50% - 3.25rem); }
}

/* --------------------------------------------------------------------------
   12d. Upcoming events (homepage)
   Special events we commentate, not league rounds. One row each: name, day. initSchedule() adds .is-past to races
   that are over and .is-next (with the "Next" tag) to the first one to come.
   -------------------------------------------------------------------------- */
.races { margin: 0; padding: 0; list-style: none; }

.race {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur) var(--ease-out);
}

.race:first-child { border-top: 1px solid var(--line); }

.race__name {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.race__name small {
  margin-left: 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-50);
}

.race__date { font-weight: 600; color: var(--fg-70); white-space: nowrap; }

/* the 24 Hours stands out, as it does in the user's sheet */
.race--major .race__name { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 900; }

.race.is-past { opacity: 0.35; }

.race.is-next .race__date::before {
  content: "Next";
  margin-right: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .race { grid-template-columns: 1fr; row-gap: 0.35rem; }
  .race__name small { display: block; margin: 0.25rem 0 0; }
}

/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */
.person {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.45s var(--ease-out), background 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.person::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}

.person:hover {
  border-color: var(--fg-30);
  background: var(--surface-2);
  transform: translateY(-3px);
}

.person:hover::before { transform: scaleY(1); }

/* Square photo on top of each card. Underneath it sits a neutral portrait
   silhouette, which is what shows until the member's photo exists:
   initTeamPhotos() removes an image that fails to load. */
.person__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1c1e22 url("/assets/img/team/placeholder.svg") center / cover no-repeat;
}

.person__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.person:hover .person__photo img { transform: scale(1.04); }

.person__body { padding: 1.5rem 1.4rem; }
.person__body h4 { margin-bottom: 0.4rem; }
.person__role {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-50);
}

/* --------------------------------------------------------------------------
   14. Pricing / shop
   -------------------------------------------------------------------------- */
.billing {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.billing__opt {
  padding: 0.62rem clamp(0.75rem, 3vw, 1.15rem);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur) var(--ease-out);
}

.billing__opt:hover { color: var(--fg); }

.billing__opt.is-on {
  background: var(--fg);
  color: var(--bg);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch; /* equal height so both CTAs sit on the same line */
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.plan:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }

.plan--featured {
  background: var(--inv-bg);
  color: var(--inv-fg);
  border-color: var(--inv-bg);
}

.plan--featured .plan__desc,
.plan--featured .plan__period,
.plan--featured .plan__feat li { color: color-mix(in srgb, var(--inv-fg) 65%, transparent); }
.plan--featured .plan__feat li strong { color: var(--inv-fg); }
.plan--featured .btn {
  --btn-bg: var(--inv-fg);
  --btn-fg: var(--inv-bg);
  --btn-border: var(--inv-fg);
  --btn-hover-bg: transparent;
  --btn-hover-fg: var(--inv-fg);
}
.plan--featured .btn::before { background: var(--inv-bg); }
.plan--featured .plan__divider { background: color-mix(in srgb, var(--inv-fg) 15%, transparent); }

.plan__flag {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--inv-fg) 10%, transparent);
}

.plan__name { font-size: 1.35rem; margin-bottom: 0.5rem; }
.plan__desc { font-size: 0.9rem; color: var(--fg-50); min-height: 3.2em; }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-block: 1.5rem 0.35rem;
}

.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.plan__amount.is-swapping { animation: price-swap 0.42s var(--ease-out); }

@keyframes price-swap {
  0% { opacity: 1; transform: translateY(0); }
  45% { opacity: 0; transform: translateY(-40%); filter: blur(3px); }
  55% { opacity: 0; transform: translateY(40%); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.plan__period { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-50); }
.plan__vat { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--fg-30); text-transform: uppercase; }
.plan__divider { height: 1px; background: var(--line); margin-block: 1.6rem; }

.plan__feat { display: grid; gap: 0.75rem; font-size: 0.88rem; color: var(--fg-70); }
.plan__feat li { display: flex; gap: 0.7rem; align-items: flex-start; }
.plan__feat li svg { width: 15px; height: 15px; flex: none; margin-top: 0.28em; }
.plan__feat li.is-off { color: var(--fg-30); }
.plan__feat li.is-off svg { opacity: 0.45; }

/* The featured card is white, and .plan__vat is a 30% white by default, so the
   "no VAT charged (§ 19 UStG)" line was invisible on it. That line is not
   decorative: under § 19 UStG it is what tells the buyer no VAT is charged. */
.plan--featured .plan__vat { color: color-mix(in srgb, var(--inv-fg) 55%, transparent); }

.plan__cta { margin-top: auto; padding-top: 2rem; }

.tick { width: 16px; height: 16px; display: inline-block; vertical-align: middle; color: var(--fg); }

/* --------------------------------------------------------------------------
   15. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }

.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--fg-70);
  transition: color var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}

.acc__trigger:hover { color: var(--fg); padding-inline: 0.75rem 0.25rem; }
.acc__trigger[aria-expanded="true"] { color: var(--fg); }

.acc__sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease-spring);
}

.acc__sign::after { transform: rotate(90deg); }
.acc__trigger[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }
.acc__trigger[aria-expanded="true"] .acc__sign::before { transform: rotate(180deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-in-out);
}

.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 3rem 1.6rem 0.25rem; color: var(--fg-50); max-width: 70ch; }

/* --------------------------------------------------------------------------
   16. Forms & modal
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.45rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 0.92rem;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
  appearance: none;
}

.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--line-2); background: var(--surface-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-30); }

.select-wrap { position: relative; }
.select-wrap svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  color: var(--fg-50);
  pointer-events: none;
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-50);
  cursor: pointer;
}

.consent input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.15em;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.consent input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.25s var(--ease-spring);
}

.consent input:checked { background: var(--fg); border-color: var(--fg); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent a { color: var(--fg-70); }

.form-note { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--fg-30); text-transform: uppercase; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}

.modal.is-open { visibility: visible; opacity: 1; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 72%, transparent);
  backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.5s var(--ease-spring), opacity 0.35s var(--ease-out);
}

.modal.is-open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-50);
  transition: color var(--dur-fast) ease, transform 0.4s var(--ease-spring), border-color var(--dur-fast) ease;
}

.modal__close:hover { color: var(--fg); border-color: var(--line-2); transform: rotate(90deg); }
.modal__close svg { width: 14px; height: 14px; }

.order-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-block: 1.25rem;
}

.order-summary strong { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }

/* Order form extras -------------------------------------------------------- */
.field__hint {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--fg-30);
}

/* File input: the native button is unstyleable across browsers, so only the
   ::file-selector-button is dressed up and the rest is left alone. */
.field input[type="file"] {
  padding: 0.6rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-50);
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.field input[type="file"]::file-selector-button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Status line under the send button. No colour: red is the on-air dot and
   nothing else on this site, so an error just comes up to full strength. */
.form-note.is-error { color: var(--fg); }
.form-note.is-ok { color: var(--fg-70); }

/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.order-done h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
}

.order-done p { margin-top: 0.9rem; color: var(--fg-50); font-size: 0.92rem; line-height: 1.6; }
.order-done .form-note b { color: var(--fg-70); }
.order-done .btn { margin-top: 1.5rem; }

/* Views and conditional fields are toggled with the hidden attribute, so it
   has to beat the display rules the components set. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   16b. Date picker, season rounds, booking estimate
   -------------------------------------------------------------------------- */

/* A month grid rather than <input type="date">: the native control looks
   different in every browser and cannot sit inside a round that is added and
   removed at runtime. Built in main.js so a new round can have one. */
.datepick { position: relative; }

.datepick__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.datepick__button:hover { border-color: var(--line-2); }
.datepick__button svg { width: 15px; height: 15px; color: var(--fg-50); flex: none; }
.datepick__value { color: var(--fg-30); }
.datepick.is-set .datepick__value { color: var(--fg); }

.datepick__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(320px, 100%);
  padding: 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.datepick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.datepick__month {
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
}

.datepick__nav {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--fg-50);
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.datepick__nav:hover { color: var(--fg); border-color: var(--line-2); }
.datepick__nav svg { width: 12px; height: 12px; }

.datepick__week,
.datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.datepick__week span {
  padding-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-30);
  text-align: center;
}

.datepick__day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--fg-70);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.datepick__day:hover { background: var(--surface-2); color: var(--fg); }
.datepick__day.is-today { border-color: var(--line-2); }
.datepick__day.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* One round of a season booking. */
.rounds { display: grid; gap: 0.9rem; }

.round {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.round__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.round__no {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.round__remove {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--fg-30);
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.round__remove:hover { color: var(--fg); border-color: var(--line-2); }
.round__remove svg { width: 10px; height: 10px; }

.round__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.round__date { grid-column: 1 / -1; }

@media (max-width: 480px) {
  .round__grid { grid-template-columns: 1fr; }
}

/* What the booking adds up to. Dashed, because it is an estimate. */
.estimate {
  padding: 1rem;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: var(--surface);
}

.estimate__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--fg-50);
}

.estimate__row b { color: var(--fg-70); }

.estimate__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.estimate__total span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.estimate__total b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.03em; }

.estimate .form-note {
  margin-top: 0.7rem;
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: none;
}

.order-summary span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-50); }
.order-summary b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; white-space: nowrap; }

/* The custom-design fee, shown under the licence row only when it is chosen.
   Quieter than the licence row so the two do not read as equals. */
.order-summary--add {
  margin-top: -0.6rem;
  background: none;
  border-style: dashed;
}
.order-summary--add strong { font-size: 0.95rem; }
.order-summary--add b { font-size: 1.15rem; color: var(--fg-70); }

/* --------------------------------------------------------------------------
   16c. Booking wizard (book.html)
   Five steps, one visible at a time, with big choice cards instead of
   dropdowns and a sticky summary that prices the booking as it is built.
   initChoices() and initWizard() drive it; the hidden selects underneath
   are what is priced and submitted.
   -------------------------------------------------------------------------- */
.booker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.booker__main { min-width: 0; }

.steps {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}

.steps li { flex: 1; min-width: 0; }

.steps__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  padding-top: 0.9rem;
  border-top: 2px solid var(--line);
  color: var(--fg-30);
  text-align: left;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.steps__item.is-done { border-color: var(--fg-50); color: var(--fg-70); }
.steps__item.is-current { border-color: var(--fg); color: var(--fg); }
.steps__item:disabled { cursor: default; }
.steps__item:not(:disabled):hover { color: var(--fg); }
.steps__no { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; }
.steps__label { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

.step { display: none; }
.step.is-current { display: block; animation: step-in 0.45s var(--ease-out); }

@keyframes step-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.step__title { font-size: clamp(2rem, 4.5vw, 3.25rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.step__sub { font-size: 1.05rem; margin: 2.5rem 0 1rem; }

.step__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

/* the league name gets the full row on step one */
.step__grid > .field:first-child:nth-last-child(3) { grid-column: 1 / -1; }

.step .choices + .step__grid,
.step [data-scope="Whole season"],
.step [data-overlay-extra] { margin-top: 1.5rem; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  transition:
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.choice:hover { border-color: var(--fg-30); transform: translateY(-2px); }
.choice:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.choice.is-on {
  border-color: var(--fg);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--fg);
}

/* the tick in the corner */
.choice::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.choice.is-on::after {
  border-color: var(--fg);
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060606' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 68% no-repeat;
}

.choice__icon { width: 2rem; height: 2rem; margin-bottom: 0.4rem; color: var(--fg-70); }
.choice.is-on .choice__icon { color: var(--fg); }
.choice__title { padding-right: 1.75rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.choice__text { color: var(--fg-50); font-size: 0.92rem; line-height: 1.45; }
.choice__price { margin-top: auto; padding-top: 0.75rem; font-size: 1.35rem; font-weight: 800; }
.choice__price small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); }
.choice--compact { padding: 1.15rem 1.25rem; }

/* The real select under the cards: submitted and priced, never seen. */
.choices__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.step-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.step-nav [data-step-next],
.step-nav [data-step-submit] { margin-left: auto; }

.booker [data-form-status] { margin-top: 1rem; }

.booker__side {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.summary {
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.summary__eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-50); }

.summary__league {
  display: block;
  margin: 0.4rem 0 1.25rem;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.summary__list { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.summary__list div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.summary__list dt { color: var(--fg-50); }
.summary__list dd { margin: 0; text-align: right; font-weight: 600; }
.summary .estimate { margin-bottom: 1rem; }

@media (max-width: 960px) {
  .booker { grid-template-columns: 1fr; }
  .booker__side { position: static; }
  .choices--3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .choices, .step__grid { grid-template-columns: 1fr; }
  .steps__label { display: none; }
}

/* --------------------------------------------------------------------------
   17. CTA & footer
   -------------------------------------------------------------------------- */

.footer {
  padding-top: clamp(3rem, 6vw, 5rem);
  background: var(--bg-elev);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 0.8fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 3rem;
}

.footer h5 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-30);
  margin-bottom: 1.1rem;
  font-weight: 500;
}

.footer__links { display: grid; gap: 0.6rem; }

.footer__links a {
  font-size: 0.88rem;
  color: var(--fg-50);
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}

.footer__links a:hover { color: var(--fg); transform: translateX(4px); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-30);
}

/* Giant footer wordmark. SVG rather than text so it scales to the container
   and is never clipped at any viewport — textLength guarantees the fit. */
.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  user-select: none;
}

.footer__wordmark text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 210px;
  letter-spacing: -0.04em;
  fill: transparent;
  stroke: var(--line-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.6s ease, stroke 0.6s ease;
}

.footer__wordmark:hover text { fill: var(--surface-2); }

.socials { display: flex; gap: 0.5rem; }

.social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-50);
  transition: all 0.35s var(--ease-out);
}

.social:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); transform: translateY(-3px); }
.social svg { width: 16px; height: 16px; }

/* Back to top */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  color: var(--fg);
  z-index: 800;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: all 0.45s var(--ease-spring);
}

.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--fg); color: var(--bg); }
.to-top svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   18. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  opacity: 0.6;
  animation: grid-drift 30s linear infinite;
}

.page-hero__inner { position: relative; z-index: 1; }

/* The top of Book us, Shop and Team: a track photograph in full colour
   under a scrim, like the homepage hero. Set it with --photo (root-absolute,
   see the url() gotcha in CLAUDE.md). */
.page-hero--photo {
  isolation: isolate;
  min-height: min(68vh, 640px);
  display: flex;
  align-items: flex-end;
}

.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--photo) center 45% / cover no-repeat;
  transform: scale(1.03);
}

.page-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 50%,
    var(--bg) 100%);
}

.page-hero--photo .page-hero__inner { width: 100%; }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.reveal-scale.is-in { opacity: 1; transform: none; }

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--bg);
  display: grid;
  place-items: center;
  gap: 1.5rem;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__inner { display: grid; justify-items: center; gap: 1.25rem; }

.preloader__mark { width: 84px; height: 84px; color: var(--fg); overflow: visible; }

.preloader__mark .mark__play,
.preloader__mark .mark__chase {
  fill: none;
  stroke: currentColor;
  stroke-width: 13;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}

/* The outline draws in once (0.9s) and settles dim. From then on a lit
   segment laps it at constant speed. The dash pattern (28 + 72) is exactly
   one path length, and the timing is linear, so the end of one lap is the
   start of the next: no fade, no reset. initPreloader() waits for the page
   to load and leaves at the end of a lap (DRAW and LAP there match this). */
.preloader__mark .mark__play {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    mark-draw 0.9s var(--ease-in-out) forwards,
    mark-settle 0.5s var(--ease-out) 0.9s forwards;
}

.preloader__mark .mark__chase {
  stroke-linecap: round;
  stroke-dasharray: 28 72;
  stroke-dashoffset: 100;
  opacity: 0;
  animation:
    mark-show 0.4s var(--ease-out) 0.9s forwards,
    mark-loop 1.4s linear 0.9s infinite;
}

@keyframes mark-settle { to { opacity: 0.25; } }
@keyframes mark-show { to { opacity: 1; } }
@keyframes mark-loop {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: grid; }
  
  
  .section__head { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
   .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  
  
}

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

  .reveal, .reveal-scale { opacity: 1; transform: none; }
  
  .reveal-line > span { transform: none; }
  .hero__photo { animation: none; transform: none; }
  .gallery__stage { --rx: 0deg; --ry: 0deg; }
  
  .drawer__link { opacity: 1; transform: none; }

  /* The mark's base state is the finished outline, but the load animation
     carries a delay the rule above does not reset. Cancel it outright so the
     logo is simply drawn. */
  .logo__mark .mark__play,
  .preloader__mark .mark__play {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .logo__mark .mark__chase,
  .preloader__mark .mark__chase { animation: none; opacity: 0; }
  body::after { display: none; }
}

@media print {
  .header, .preloader, .to-top { display: none; }
  body { background: #fff; color: #000; }
}