/* =========================================================================
   BASE
   Modern reset, typographic defaults, accessibility primitives.
   Loaded after tokens.css, before everything else.
   ========================================================================= */

/* ---------- WEB FONTS · LOCAL ---------------------------------------- */
/* Big Shoulders Display (headings) + Inter (body). Self-hosted at
   /assets/fonts so there is zero third-party request for fonts — no
   googleapis preconnect, no gstatic font request, no Google referral on
   first paint. Privacy-preserving by construction and faster on the
   critical path (eliminates DNS + TLS to a foreign origin).

   `font-display: swap` matches prior behaviour: the browser paints
   text in the fallback stack immediately, then swaps to the web font
   when the .woff2 finishes loading. Avoids FOIT on slow connections.

   Every available weight is declared. Fetches are weight-lazy — the
   browser only downloads a weight when a rule actually applies it —
   so declaring unused weights costs nothing at runtime and makes
   future design tweaks free of font-pipeline churn. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/big-shoulders-v4-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/big-shoulders-v4-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/big-shoulders-v4-latin-800.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-v20-latin-800.woff2") format("woff2");
}

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

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

html {
  background-color: var(--surface-base);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-base);
  /* Subtle distant-stadium glow — adds depth without breaking the matte canvas */
  background-image:
    radial-gradient(
      ellipse 120% 60% at 50% -10%,
      rgba(57, 255, 20, 0.045),
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 40% at 50% 110%,
      rgba(197, 160, 89, 0.025),
      transparent 60%
    );
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* `manipulation` disables the browser's double-tap-to-zoom heuristic
     on this element and eliminates the ~300 ms click delay that ships
     with that heuristic. Rapid successive taps (e.g. stepping guest
     count from 2 → 8) now register as separate, instant clicks instead
     of triggering a viewport zoom. Page-level pinch-zoom remains
     intact, so accessibility/users-with-low-vision are not affected. */
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Stage-accordion summaries (fixtures.html `<details><summary>`) and any
   custom role="button" host elements get the same treatment so rapid
   open/close taps stay instant and never trigger viewport zoom. */
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* ---------- FILM GRAIN ATMOSPHERE ------------------------------------- */
/* Subtle noise overlay across the entire page — adds tactile depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Above content but below all UI layers (nav, sheets, modals). */
  z-index: var(--z-raised);
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- TYPOGRAPHY · HEADINGS ------------------------------------- */
/* Big Shoulders Display is condensed — smaller headings benefit from positive
   tracking, larger ones can hold tight or normal. Curve adjusts by size. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--text-primary);
}

h1 {
  font-size: var(--type-h1);
  letter-spacing: var(--tracking-normal);
}

h2 {
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-wide);
}

h3 {
  font-size: var(--type-h3);
  letter-spacing: var(--tracking-wide);
}

h4 {
  font-size: var(--type-body);
  letter-spacing: var(--tracking-wider);
}

/* ---------- TYPOGRAPHY · UTILITY CLASSES ------------------------------ */
.u-display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

.u-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: var(--weight-bold);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.u-caption {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.u-mono-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- ACCESSIBILITY · FOCUS ------------------------------------- */
:focus {
  outline: none;
}

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

/* ---------- ACCESSIBILITY · SCREEN READER ----------------------------- */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- SELECTION ------------------------------------------------- */
::selection {
  background-color: var(--accent-pitch);
  color: var(--text-on-accent);
}

/* ---------- SCROLLBAR (DESKTOP) --------------------------------------- */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--surface-base);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--surface-overlay);
    border-radius: var(--radius-full);
    border: 2px solid var(--surface-base);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
  }
}

/* ---------- TYPOGRAPHY · ADDITIONAL UTILITIES -------------------------- */
.u-accent {
  color: var(--accent-pitch);
}

.u-dim {
  color: var(--text-muted);
}

.u-text-secondary {
  color: var(--text-secondary);
}

.u-small {
  font-size: var(--type-small);
}

.u-tiny {
  font-size: var(--type-tiny);
}