/* ============================================================================================
   Reaper GP — landing page

   Hand-written, no framework, no build step. Everything is one file so there is exactly one
   place to change a colour. The palette below is lifted from the game's own UI so the site and
   the front end look like the same product.

   Layout is CSS grid with auto-fit, which means it reflows on any screen without a media query
   per breakpoint. There are only two media queries in the whole file, both near the bottom.
   ============================================================================================ */

:root {
  --ink:        #05080f;   /* page ground — the same near-black the game's menus sit on */
  --ink-2:      #080d18;   /* alternating section ground */
  --panel:      rgba(10, 18, 32, 0.72);
  --line:       rgba(120, 170, 220, 0.18);

  --text:       #dfe8f5;
  --text-dim:   rgba(198, 216, 238, 0.66);

  --cyan:       #5ac8ff;
  --cyan-hot:   #96e6ff;
  --magenta:    #ff3ba0;
  --red:        #ff5a58;
  --gold:       #ffd866;
  --green:      #78ffa0;
  --violet:     #b478ff;

  --shell:      1180px;
  --radius:     4px;

  --font-display: "Aldrich", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- reset ------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* NOT `overflow-x: hidden` ON BODY. It reads as a harmless guard against sideways scroll and is
   anything but: setting one overflow axis makes the other compute to `auto`, which turns <body>
   into a scroll container. IntersectionObserver then measures against a box that never moves, so
   every scroll-reveal stays invisible and every `loading="lazy"` image never fetches — measured,
   0 of 36 reveals and 15 images that never left the server. Clip the overflow where it is
   actually produced (see .hero) and leave the document scroller alone. */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-hot); }

h1, h2, h3, .kicker, .btn, .stat b, .nav__menu a {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
}

h2 {
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: #f2f7ff;
}

h3 { font-size: 20px; margin: 0 0 8px; color: #eaf3ff; }

p { margin: 0 0 16px; }

/* Screen-reader-only, and the skip link that appears on focus. Both are accessibility basics
   that also stop a crawler seeing a page whose first interactive element is a hamburger. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: var(--ink); padding: 10px 16px;
}
.skip:focus { left: 0; }

.wrap { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.wrap--narrow { width: min(760px, calc(100% - 48px)); }

.kicker {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}

.lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--text-dim); max-width: 62ch; }

/* ---- buttons ----------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: rgba(12, 22, 38, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 8px 30px rgba(90, 200, 255, 0.22);
}

.btn--primary {
  background: linear-gradient(100deg, var(--magenta), var(--red) 55%, var(--gold));
  border-color: transparent;
  color: #14060c;
  font-weight: 700;
}

.btn--primary:hover, .btn--primary:focus-visible {
  box-shadow: 0 10px 34px rgba(255, 59, 160, 0.4);
}

.btn--sm { padding: 9px 18px; font-size: 12px; }

/* ---- nav --------------------------------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px 0;
  transition: background .25s ease, backdrop-filter .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}

/* Added by main.js once the page has scrolled past the hero's first screen. Over the hero the bar
   is invisible so the art is uninterrupted; below it the bar has to be readable over anything. */
.nav.is-stuck {
  background: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  padding: 8px 0;
}

.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__logo { width: 148px; height: auto; }
.nav__brand { display: block; line-height: 0; }

.nav__menu { display: flex; align-items: center; gap: 26px; }

.nav__menu a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  transition: color .15s ease;
}
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--cyan-hot); }
.nav__menu .btn { color: var(--text); }

.nav__burger {
  display: none;
  width: 42px; height: 34px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  padding: 8px 9px;
}
.nav__burger span { display: block; height: 2px; background: var(--text); margin: 3px 0; }

/* ---- hero -------------------------------------------------------------------------------- */

/* THE TITLE SITS AT THE TOP, not the middle (the user, 2026-09-15): the middle of the background
   video is where the racing happens, so the logo, line and buttons hang just under the nav and stay
   compact — the logo scales with the screen's HEIGHT — leaving the centre of the frame clear. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: start;
  padding: clamp(104px, 12svh, 150px) 0 90px;   /* the nav is 88px */
  overflow: hidden;
}

.hero__art { position: absolute; inset: 0; z-index: 0; }

/* Slightly oversized so the parallax in main.js has somewhere to travel without exposing an edge. */
.hero__art img,
.hero__art video {
  display: block;
  width: 100%; height: 118%;
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
  pointer-events: none;            /* a background, not a player: no clicks, no context menu target */
}
/* No player chrome, ever — including the big play button iOS draws when autoplay is refused (the
   poster then simply stays, which is the intended fallback). */
.hero__art video::-webkit-media-controls,
.hero__art video::-webkit-media-controls-start-playback-button,
.hero__art video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* Two overlays, doing two different jobs. The scrim is a vertical ramp that guarantees the
   headline is legible whatever the art does; the glow is the colour wash that ties the photo to
   the palette. Together they are why the type never needs a box behind it. */
.hero__scrim {
  position: absolute; inset: 0;
  /* Dark behind the title at the top (it has to be read), nearly clear through the middle (the video
     has to be seen), and back to the page ground at the bottom. */
  background:
    linear-gradient(180deg, rgba(5,8,15,.86) 0%, rgba(5,8,15,.55) 30%, rgba(5,8,15,.12) 50%,
                            rgba(5,8,15,.16) 70%, rgba(5,8,15,.72) 88%, var(--ink) 100%);
}

.hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 18% 74%, rgba(255, 59, 160, .28), transparent 62%),
    radial-gradient(60% 50% at 86% 26%, rgba(90, 200, 255, .22), transparent 60%);
  mix-blend-mode: screen;
}

.hero__body { position: relative; z-index: 1; text-align: center; }

.hero__logo {
  width: min(560px, 88vw, 40svh);          /* 40svh wide = 16svh tall: shorter screens get a smaller logo */
  height: auto;
  margin: 0 auto 8px;
  filter: drop-shadow(0 10px 44px rgba(255, 59, 160, .35));
}

.hero__title { margin: 0; }

.hero__sub {
  font-size: clamp(16px, min(1.8vw, 2.3svh), 21px);
  max-width: 72ch;                          /* wider line = two lines, not three = a shorter block */
  margin: 4px auto 22px;
  color: #e7effb;
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero__note {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* The scroll cue. A bare animated line rather than a chevron glyph, so it needs no icon font. */
.hero__cue {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0; z-index: 1;
  width: 22px; height: 40px; border: 1px solid var(--line); border-radius: 12px;
}
.hero__cue span {
  position: absolute; left: 50%; top: 8px; translate: -50% 0;
  width: 3px; height: 8px; border-radius: 2px; background: var(--cyan);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(14px); opacity: .1; } }

/* ---- stat band --------------------------------------------------------------------------- */

.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(90,200,255,.05), transparent);
  padding: 30px 0;
}

.band__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  text-align: center;
}

.stat b {
  display: block;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  color: var(--cyan-hot);
}

.stat span {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- sections ---------------------------------------------------------------------------- */

.sec { padding: clamp(72px, 10vw, 130px) 0; }
.sec--alt { background: var(--ink-2); border-block: 1px solid var(--line); }

/* ---- generic card grid ------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(90, 200, 255, .5);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}
.card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.card h3, .card p { padding-inline: 22px; }
.card h3 { margin-top: 20px; }
.card p { color: var(--text-dim); padding-bottom: 22px; margin: 0; }

.card--flat { padding: 26px; }
.card--flat h3, .card--flat p { padding: 0; }

/* ---- frames ------------------------------------------------------------------------------ */

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

/* The accent is a custom property so each card sets ONE value and the glow, the rule and the
   hover border all follow. Four near-identical blocks with four hard-coded colours is how these
   drift apart. */
.frame {
  --accent: var(--cyan);
  position: relative;
  padding: 26px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.frame:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(0,0,0,.55); }

.frame img {
  width: 100%; max-width: 210px; margin: 0 auto 14px;
  filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--accent) 55%, transparent));
}

.frame h3 { text-align: center; }
.frame h3 em { display: block; font-style: normal; font-size: 12px; letter-spacing: .28em; color: var(--accent); }
.frame p { text-align: center; color: var(--text-dim); font-size: 15px; margin: 0; }

.frame--green  { --accent: var(--green); }
.frame--red    { --accent: var(--red); }
.frame--blue   { --accent: var(--cyan); }
.frame--violet { --accent: var(--violet); }

/* ---- split (text beside art) ------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 54px;
  align-items: center;
}

.split__art img { border-radius: var(--radius); border: 1px solid var(--line); }
.split__cap { margin-top: 12px; font-size: 13px; color: var(--text-dim); }

.list { list-style: none; padding: 0; margin: 26px 0; }
.list li {
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  position: relative;
}
.list li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 8px; height: 2px; background: var(--magenta);
}
.list b { color: var(--gold); font-family: var(--font-display); letter-spacing: .1em; }

/* ---- pilots: the game's pilot select screen -------------------------------------------------

   ONE ROW: the wall of busts takes the width it needs on the left, and the pilot under the cursor —
   figure on a plate, card beside it — takes the rest. Stacked (as the game draws it) the figure scrolled
   out of view every time you reached down for a bust.

   Everything is sized off --cell, so the wall is 6 x 8 and the plate is EXACTLY the wall's height: the
   figure and the busts start and end on the same lines. Tall rather than wide on purpose — 6 x 8 lets
   the figure stand ~600px; 8 x 6 would have cut it to ~400. */

.roster {
  --cell: 72px;
  --gap: 4px;
  --wall-h: calc(8 * var(--cell) + 7 * var(--gap));
  margin-top: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.roster__picker { width: calc(6 * var(--cell) + 5 * var(--gap)); }

.roster__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* --accent is set per pilot from main.js; the floor line and the streaks both follow it. */
.roster__plate {
  --accent: var(--cyan);
  position: relative;
  height: var(--wall-h);
  padding-inline: clamp(16px, 2.4vw, 36px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: rgba(6, 9, 14, 0.86);
  border: 1px solid var(--line);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  transition: border-color .2s ease;
}

/* The finale's greyscale streaks, white on black. SCREEN adds only the light, so the black drops out
   and what is left is a wash of the pilot's colour — the job the tint does in the game. */
.roster__streaks {
  position: absolute; inset: 0;
  background: url("../img/streaks.jpg") center / cover, var(--accent);
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  opacity: .24;
  transition: background-color .2s ease;
}

/* SIZED IN HEIGHT, WIDTH FOLLOWS: the art is 264x800 and a stretched person is the one distortion
   everybody notices. Overrides the global img rule, which sizes by width. */
.roster__figure {
  position: relative;
  height: 100%; width: auto; max-width: none;
  transform-origin: bottom;          /* the pivot is the feet, so a swell never lifts them off the floor */
  transition: opacity .16s ease, transform .16s ease;
}
.roster__figure.is-swapping { opacity: 0; transform: scale(.98); }

.roster__card {
  padding: 22px 26px;
  background: rgba(8, 12, 18, 0.72);
  border-left: 2px solid rgba(150, 200, 255, 0.45);
}

.roster__team {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(150, 200, 255, 0.85);
}
.roster__team img { width: 30px; height: 30px; }

.roster__name {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #f2f7ff;
}

.roster__bio { color: var(--text-dim); font-size: clamp(16px, 1.5vw, 19px); max-width: 46ch; }

.roster__status {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgb(255, 196, 84);
}
.roster__status--starter { color: var(--green); }

/* The wall: 6 across, 8 down, fixed cells so its width is known and the stage gets the rest. */
.roster__grid {
  display: grid;
  grid-template-columns: repeat(6, var(--cell));
  gap: var(--gap);
}

/* A notched frame, like the game's ChamferFrame: the button's own background IS the ring, and the
   bust inside is inset by its width and cut to the same octagon. */
.bust {
  --notch: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%);
  position: relative;
  aspect-ratio: 1;
  padding: 2px;
  border: 0;
  background: rgba(120, 150, 190, 0.25);
  clip-path: var(--notch);
  cursor: pointer;
  transition: background-color .12s ease, transform .12s ease;
}

/* One sheet for all 48 busts, 8 x 6 cells, positioned per button from main.js. */
.bust span {
  display: block; width: 100%; height: 100%;
  clip-path: var(--notch);
  background: #0a0e14 url("../img/pilots.jpg") 0 0 / 800% 600% no-repeat;
}

/* The starters carry a green tick along the foot — the game's "yours" colour. */
.bust--starter::after {
  content: ""; position: absolute; left: 34%; right: 34%; bottom: 3px; height: 3px;
  background: var(--green);
}

/* Focus at least as loud as hover, because a keyboard user has nothing else telling them where they
   are. The one on show is lit gold like the game's cursor; hover is a softer version of it. */
.bust:hover { background: rgba(255, 214, 92, 0.6); }
.bust.is-current, .bust:focus-visible { background: rgb(255, 214, 92); transform: scale(1.08); z-index: 1; }
.bust:focus-visible { outline: none; }

.roster__legend {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}
.roster__dot {
  display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle;
  background: var(--green);
}

/* ---- pilots mosaic (no-JS fallback) ---------------------------------------------------------- */

.mosaic { margin: 44px 0 0; }
.mosaic img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.mosaic figcaption { margin-top: 12px; font-size: 14px; color: var(--text-dim); text-align: center; }

/* ---- corporations & classes -------------------------------------------------------------- */

.corps, .classes, .tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 44px;
  text-align: center;
}

.corp, .cls, .track {
  padding: 30px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease;
}
.corp:hover, .cls:hover, .track:hover { transform: translateY(-4px); border-color: rgba(90,200,255,.45); }

.corp img { width: 128px; margin: 0 auto 16px; }
.cls img  { width: 108px; margin: 0 auto 16px; }
.track img { width: 150px; margin: 0 auto 16px; opacity: .92; }

.corp p, .cls p, .track p { color: var(--text-dim); font-size: 15px; margin: 0; }

.cls--null img   { filter: drop-shadow(0 0 22px rgba(90, 200, 255, .55)); }
.cls--ghost img  { filter: drop-shadow(0 0 22px rgba(180, 120, 255, .55)); }
.cls--reaper img { filter: drop-shadow(0 0 24px rgba(255, 90, 88, .6)); }

/* ---- FAQ ---------------------------------------------------------------------------------- */

/* Built on <details>, so it opens and closes with no JavaScript at all — which also means a
   crawler reads every answer whether or not it runs scripts. */
.faq { margin-top: 36px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 12px;
}

.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: #eaf3ff;
  list-style: none;
  position: relative;
  padding-right: 52px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  color: var(--cyan); font-size: 22px; line-height: 1;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2212"; }

.faq p { padding: 0 22px 20px; margin: 0; color: var(--text-dim); }

/* ---- call to action ----------------------------------------------------------------------- */

.cta {
  padding: clamp(72px, 10vw, 120px) 0;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 59, 160, .16), transparent 60%),
    var(--ink-2);
  border-top: 1px solid var(--line);
}

.cta p { color: var(--text-dim); }

.signup { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

.signup input {
  flex: 1 1 300px; max-width: 360px;
  padding: 14px 18px;
  background: rgba(4, 8, 16, .85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
}
.signup input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.signup__msg { min-height: 24px; margin-top: 14px; font-size: 14px; color: var(--gold); }

.cta__alt { margin-top: 26px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.cta__alt a { color: var(--text-dim); text-decoration: none; }
.cta__alt a:hover { color: var(--cyan-hot); }

/* ---- footer -------------------------------------------------------------------------------- */

.foot { padding: 40px 0; border-top: 1px solid var(--line); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot__logo { width: 120px; opacity: .7; }
.foot__legal { margin: 0; font-size: 12px; color: var(--text-dim); text-align: right; }

/* ---- scroll reveal -------------------------------------------------------------------------- */

/* The initial state is applied by main.js (the .js-reveal class on <html>) rather than here, so a
   visitor with JavaScript off sees the content rather than a page of invisible blocks. */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---- responsive ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }

  .nav__burger { display: block; }

  .nav__menu {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5, 8, 15, .98);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 22px;
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin-top: 14px; text-align: center; border-bottom: 1px solid var(--line); }

  .foot__row { justify-content: center; }
  .foot__legal { text-align: center; }

  /* Still one row, but the stage turns into a column — figure on top, card under it — because the
     column beside the wall is now too narrow for the two side by side. */
  .roster { --cell: 52px; gap: 20px; }
  .roster__stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .roster__plate { height: calc(var(--wall-h) * .66); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .roster { --cell: 60px; }
}

/* A phone has no room for a row: the pilot goes on top, the wall under it, full width. */
@media (max-width: 640px) {
  .roster { grid-template-columns: minmax(0, 1fr); }
  .roster__stage { order: -1; grid-template-columns: auto minmax(0, 1fr); }
  .roster__picker { width: auto; }
  .roster__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .roster__plate { height: 300px; padding-inline: 8px; }
  .roster__card { padding: 14px 14px; }
  .roster__team { letter-spacing: .16em; font-size: 12px; }
  .roster__bio { font-size: 15px; }
  .roster__legend { text-align: center; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap, .wrap--narrow { width: calc(100% - 32px); }
  .hero { padding-top: 116px; }
}

/* ---- reduced motion ------------------------------------------------------------------------- */

/* Everything decorative switches off together. The parallax is disabled in main.js by the same
   query, because a transform written from JS ignores a CSS rule. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ============================== SCREENSHOTS ==============================
   A plain grid of thumbnails in the content column — no scroller, nothing hidden off to the side. Four
   across on a wide screen, two on a tablet or phone; eight shots fill either evenly. Click one for the
   full-size viewer. */

.shots { margin-top: clamp(24px, 3.5vw, 40px); }

.shots__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 760px) {
  .shots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.shot {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .4s ease;
}
.shot:hover, .shot:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 12px 40px rgba(90, 200, 255, .18);
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); }

/* ---- the full-size viewer ---- */

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(3, 5, 10, .93); backdrop-filter: blur(4px); }
html:has(.lightbox[open]) { overflow: hidden; }            /* the page behind stays put */

.lightbox__frame { margin: 0; padding: 0 76px; text-align: center; }
.lightbox__frame img {
  display: block;
  max-width: calc(100vw - 152px);
  max-height: calc(100dvh - 110px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .65);
  transition: opacity .2s ease;
}
.lightbox__frame img.is-loading { opacity: .35; }
.lightbox__count {
  margin-top: 14px;
  color: var(--text-dim);
  font: 400 13px/1 var(--font-display);
  letter-spacing: .14em;
}

.lightbox__btn, .lightbox__close {
  position: fixed;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(5, 8, 15, .82);
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lightbox__btn { top: 50%; width: 56px; height: 56px; margin-top: -28px; padding-bottom: 4px; font-size: 34px; }
.lightbox__btn--prev { left: 12px; }
.lightbox__btn--next { right: 12px; }
.lightbox__close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 28px; }
.lightbox__btn:hover, .lightbox__btn:focus-visible,
.lightbox__close:hover, .lightbox__close:focus-visible { outline: none; border-color: var(--cyan); color: var(--cyan-hot); }

@media (max-width: 640px) {
  .lightbox__frame { padding: 0 8px; }
  .lightbox__frame img { max-width: calc(100vw - 16px); max-height: calc(100dvh - 150px); }
  .lightbox__btn { top: auto; bottom: 18px; margin-top: 0; }
  .lightbox__btn--prev { left: calc(50% - 70px); }
  .lightbox__btn--next { right: calc(50% - 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .shot, .shot img, .lightbox__frame img { transition: none; }
  .shot:hover img, .shot:focus-visible img { transform: none; }
}