@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bowlby+One+SC&family=IBM+Plex+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --red: #E30613;
  --red-deep: #9a0510;
  --black: #050505;
  --cream: #FFF2D6;
  --yellow: #FFD400;
  --paper: #F6E7C8;
  --ink: #1A1A1A;
  --blue: #2454FF;
  --font-display: 'Bowlby One SC', 'Archivo Black', Impact, sans-serif;
  --font-condensed: 'Archivo Black', Impact, sans-serif;
  --font-body: 'IBM Plex Serif', Georgia, serif;
  --font-mono: 'Space Mono', monospace;
  --shadow-poster: 8px 8px 0 var(--black);
  --shadow-poster-lg: 12px 12px 0 var(--black);
  --border-thick: 4px solid var(--black);
  --border-heavy: 6px solid var(--black);
  --content-max: 72rem;
  --content-wide: 80rem;
}

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

html { scroll-behavior: smooth; font-size: 18px; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

h1, h2, h3, h4 { margin: 0; font-weight: inherit; }

.giant-headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--cream);
  text-shadow: 0.05em 0.05em 0 var(--black);
  text-transform: uppercase;
}

.hero-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
  line-height: 0.88;
}

.hero-headline__line {
  display: block;
  font-size: clamp(2rem, 8vw, 5.5rem);
  letter-spacing: -0.03em;
  color: var(--cream);
  text-shadow: 0.04em 0.04em 0 var(--black);
}

.hero-headline__line--claire {
  font-size: clamp(2.75rem, 12vw, 7.5rem);
  line-height: 0.85;
  color: var(--cream);
  text-shadow: 0.05em 0.05em 0 var(--black);
}

.section-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.section-headline--compact {
  font-size: clamp(2rem, 6vw, 5rem);
}

.section-headline--on-dark {
  color: var(--cream);
  text-shadow: 0.04em 0.04em 0 var(--black);
}

.condensed-headline {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; }

.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;
}

.unverified {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink);
  opacity: 0.75;
}