/* Design tokens. Source: DESIGN.md, plus the values the Claude Design export added. */
:root {
  /* Colour: DESIGN.md */
  --navy-900: #081E43;
  --navy-700: #12306E;
  --navy-600: #1B3F8F;
  --gold-500: #F2B233;
  --gold-400: #F7C65F;
  --gold-600: #D99A1E;
  --gold-100: #FDF3DC;
  --ink-900: #081E43;
  --ink-600: #53647B;
  --surface-light: #F4F6FA;
  --surface-white: #FFFFFF;
  --line-light: #DDE3EE;
  --line-dark: #2A4584;
  --focus-ring: #F2B233;

  /* Colour: from the export */
  --on-navy-body: #D5DDEA;
  --on-navy-muted: #AEBBD1;
  --node-ring: #8FA2C4;
  --placeholder-icon: #8693A6;

  /* Colour: translucent overlays */
  --grid-line-minor: rgba(255, 255, 255, .035);
  --grid-line-major: rgba(255, 255, 255, .07);
  --ring-line: rgba(255, 255, 255, .08);
  --ring-fill: rgba(255, 255, 255, .025);
  --track-line: rgba(255, 255, 255, .14);
  --white-a08: rgba(255, 255, 255, .08);
  --white-a10: rgba(255, 255, 255, .1);
  --white-a40: rgba(255, 255, 255, .4);
  --white-a80: rgba(255, 255, 255, .8);
  --navy-a04: rgba(8, 30, 67, .04);
  --navy-a07: rgba(8, 30, 67, .07);
  --navy-a10: rgba(8, 30, 67, .1);
  --navy-a40: rgba(8, 30, 67, .4);
  --gold-a20: rgba(242, 178, 51, .2);
  --gold-a45: rgba(242, 178, 51, .45);
  --glow: rgba(247, 198, 95, .22);
  --glow-photo: rgba(247, 198, 95, .3);
  --glow-none: rgba(247, 198, 95, 0);
  --spot-top: rgba(253, 243, 220, .22);
  --spot-mid: rgba(253, 243, 220, .06);
  --spot-end: rgba(253, 243, 220, 0);
  --stripe: rgba(255, 255, 255, .05);

  /* Typography */
  --font-display: 'Archivo', 'Arial Black', Impact, system-ui, sans-serif;
  --font-body: 'DM Sans', Calibri, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heading: 800;
  --fw-display: 900;

  --fs-display: clamp(3.5rem, 17.9vw, 8.75rem);
  --fs-h2: clamp(2.5rem, 2.11rem + 2.1vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.16rem + .38vw, 1.5rem);
  --fs-title: clamp(1.5rem, 1.36rem + .57vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, .97rem + .38vw, 1.3125rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-label: .8125rem;
  --fs-btn: 1.0625rem;
  --fs-stat: clamp(2.625rem, 1.65rem + 4vw, 5.25rem);
  --fs-date-numeral: clamp(4rem, 5.8vw, 5.25rem);
  --fs-date-range: clamp(3rem, 4.5vw, 4.125rem);
  --fs-pillar: clamp(2.75rem, 2.1rem + 2.67vw, 4.5rem);
  --fs-ticker: clamp(1.5rem, 1.17rem + 1.33vw, 2.375rem);
  --fs-countdown: clamp(3rem, 2.63rem + 1.52vw, 4rem);
  --fs-member: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-page-title: clamp(2.25rem, 10.6vw, 6rem);
  --fs-cta: clamp(3.125rem, 1.78rem + 5.52vw, 6.75rem);
  --fs-faq: clamp(6rem, 4.75rem + 5.14vw, 9.375rem);
  --fs-badge: clamp(1.875rem, 1.64rem + .95vw, 2.5rem);
  --fs-footer-tag: clamp(2.25rem, 2.06rem + .76vw, 2.75rem);
  --fs-menu: 2rem;

  --lh-display: .86;
  --lh-tight: .95;
  --lh-snug: 1.1;
  --lh-body: 1.6;
  --ls-display: -.035em;
  --ls-heading: -.025em;
  --ls-snug: -.01em;
  --ls-label: .06em;

  /* Radius */
  --r-sharp: 4px;
  --r-block: 8px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Spacing: 8px unit */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --gutter: 16px;
  --section-y: 72px;
  --max-width: 1280px;
  --nav-h: 64px;
  --tap: 44px;
  --ico: 48px;
  --notch: 13px;

  /* Elevation */
  --offset: 6px;
  --offset-sm: 4px;
  --offset-hover: 8px;
  --shadow-sticker: 3px 3px 0 var(--navy-900);
  --shadow-sticker-navy: 3px 3px 0 var(--navy-600);
  --shadow-nav: 0 10px 28px rgba(8, 30, 67, .4);
  --shadow-bar: 0 -10px 24px rgba(8, 30, 67, .3);

  /* Texture */
  --grid-minor: 24px;
  --grid-major: 120px;
  --grain-opacity: .07;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 400ms;
  --dur: 500ms;
  --dur-slow: 700ms;
  --stagger: 60ms;
  --rise: 16px;
  --ticker-dur: 30s;
  --flicker-dur: 1500ms;
  --flicker-delay: 300ms;
}

@media (min-width: 48em) {
  :root {
    --gutter: 40px;
    --section-y: 96px;
    --ico: 56px;
    --notch: 16px;
    --grid-minor: 32px;
    --grid-major: 160px;
    --ticker-dur: 48s;
  }
}

@media (min-width: 64em) {
  :root {
    --section-y: 120px;
    --nav-h: 72px;
    --fs-display: clamp(6rem, 11.4vw, 10.25rem);
  }
}