/**
 * Design tokens. The single source of truth for colour, easing, and duration.
 * Every value here is mirrored in CLAUDE.md — change both together or neither.
 */

:root {
  /* Near-black, never pure black: #000 kills the sense of a lit set. */
  --bg: #08080A;
  --fg: #F2EFE9;

  /* Max three uses on the entire page. Spend them deliberately. */
  --accent: #ff4a1c;

  --grey-1: #1a1a1e;
  --grey-2: #3a3a40;
  --grey-3: #6e6e76;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
  --dur: 700ms;
  --dur-slow: 1200ms;
}

/**
 * One family, self-hosted, two sizes. See CLAUDE.md — there is no third size,
 * and if text doesn't fit display or meta the layout is wrong.
 */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  /* Variable weight axis; only 300 (meta) and 500 (display) are used. */
  font-weight: 200 700;
  font-display: swap;
  src: url('../public/fonts/oswald-var.woff2') format('woff2-variations');
  /* Latin only. The extended, Cyrillic, and Vietnamese subsets triple the
     payload for glyphs this site will never render. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/**
 * Metric-matched fallback. Overrides are measured against the real Oswald so
 * the swap costs no layout shift — a display line at 11rem would otherwise
 * reflow by tens of pixels when the woff2 lands.
 */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Roboto Condensed'), local('Liberation Sans Narrow');
  /* Measured, not guessed: at 100px Oswald advances 767.5px across
     "HUMZA BIN YOUSAF" where Arial Narrow advances 810.89px. */
  size-adjust: 94.6%;
  /* Oswald's own ascent/descent are 119% and 29% of the em. These overrides
     resolve against the size-adjusted em, so both are divided by 0.946. */
  ascent-override: 125.8%;
  descent-override: 30.7%;
  line-gap-override: 0%;
}

:root {
  --font: 'Oswald', 'Oswald Fallback', ui-sans-serif, system-ui, sans-serif;
}

/**
 * Display. Uppercase, tight, and large enough that tracking has to come back
 * negative to stop the counters opening up.
 */
.display {
  font-family: var(--font);
  /**
   * Floor is 3.25rem, not 4rem. At 320px the 4rem floor rendered the longest
   * display word ("filmmakers") 301px wide inside a 256px column, so it was
   * clipped — the layout requirement is that 320px stays readable. 12vw takes
   * over above ~433px, so this only affects the smallest phones.
   */
  font-size: clamp(3.25rem, 12vw, 11rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/**
 * Credit. The one step between display and meta, and the only one there will
 * ever be.
 *
 * It exists because the client list is 24 proper nouns that have to be read,
 * not scanned — at meta size, uppercase and tracked out to +12%, "NORINCO
 * International" and "Wrestling Revolution Global" are a texture rather than a
 * name. Case is left as the source states it for the same reason.
 *
 * Not a body-copy size. If a third block of prose ever wants this, the layout
 * is wrong — see CLAUDE.md.
 */
.credit {
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/**
 * Meta. Every label, caption, timecode, and category on the site.
 */
.meta {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-3);
}

/**
 * Modern reset plus the page shell. Nothing here is decorative — anything
 * that could be called styling belongs in a component's CSS module.
 */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Lenis owns smoothing; native smooth scroll fights it. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);

  /* Stops the rubber-band overscroll from exposing white behind the page
     and from handing the scroll to the browser chrome mid-gesture. */
  overscroll-behavior: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-family: var(--font);
}

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

/* Lifts the content above the fixed ambient marks behind it. */
.page {
  position: relative;
  z-index: 1;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Set by <Cursor> only when it has decided to render, so a touch device or a
   reduced-motion visitor never loses the pointer they actually have. */
html[data-cursor='hidden'],
html[data-cursor='hidden'] * {
  cursor: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: individual components also branch on this, but any
     transition that slips through should collapse to something instant. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}