/* ============================================================================
   02-BASE.CSS — Reset, document defaults, base typography
   Depends on: 01-tokens.css
   ========================================================================== */

/* ---- Minimal modern reset --------------------------------------------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { overscroll-behavior: none; }

body {
  background: var(--c-navy-black);
  color: var(--c-paper);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;          /* tame horizontal track overflow on desktop */
}

img {
  max-width: 100%;
  display: block;
}

a { color: inherit; }

::selection {
  background: var(--c-gold);
  color: var(--c-navy);
}

/* ---- Accessibility: visible keyboard focus (was missing in original) --- */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Skip link for keyboard / screen-reader users --------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-gold);
  color: var(--c-navy);
  padding: 0.75rem 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-meta);
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Shared type primitives ------------------------------------------- */
.kicker {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-cinematic);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* Big serif display type — used by hero, prologue, finale, acts */
.giant {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-giant);
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  color: var(--c-paper);
}
.giant em { font-style: italic; color: var(--c-gold); }

/* Size modifiers (replace the original inline `style="font-size:..."`) */
.giant--display-lg { font-size: var(--fs-display-lg); }   /* prologue */
.giant--display-xl { font-size: var(--fs-display-xl); }   /* finale   */