/* ==========================================================================
   Reputiva design tokens
   Source: the Reputiva US site and launch film. Black #0A0B0A, Bone #EDEEE8,
   Neon #B6FF39 (the pulse), Paper #F2F0E9 for light bands, Olive #3B5700 for
   accent text on paper. Display type: Instrument Serif (italic for the lit
   word). Body: the system sans.
   Rule: neon is never text on a light background. On paper, accents are olive.
   Contrast (WCAG 2.2, checked): bone on black 16.9:1 · muted on black 8.7:1, on
   black-3 7.7:1 · neon on black 16.3:1 · black on neon 16.3:1 · ink on paper
   16.4:1 · ink-muted on paper 6.9:1 · olive on paper 7.2:1 · muted-2 on black
   5.3:1 (placeholders only).
   ========================================================================== */
:root {
  /* colour */
  --black: #0a0b0a;        /* page */
  --black-2: #111311;      /* raised sections */
  --black-3: #181b18;      /* cards, media wells */
  --black-4: #212520;      /* inputs, hover */
  --bone: #edeee8;         /* text */
  --bone-soft: #d6d8d0;
  --muted: #a9aea2;        /* secondary text */
  --muted-2: #81877a;      /* placeholders on black only */
  --neon: #b6ff39;         /* the pulse: the one accent */
  --neon-hi: #c8ff6b;
  --on-neon: #0a0b0a;
  --neon-glow: rgba(182, 255, 57, 0.55);
  --paper: #f2f0e9;
  --paper-2: #e7e4da;
  --paper-card: #fbfaf6;
  --ink: #111311;
  --ink-muted: #4f534b;
  --olive: #3b5700;
  --line: rgba(237, 238, 232, 0.1);
  --line-2: rgba(237, 238, 232, 0.2);
  --glass: rgba(237, 238, 232, 0.05);
  --glass-2: rgba(237, 238, 232, 0.1);
  --hi: rgba(255, 255, 255, 0.06);
  --danger: #ff8f7a;

  /* semantic: bands override these */
  --bg: var(--black);
  --fg: var(--bone);
  --fg-muted: var(--muted);
  --accent: var(--neon);
  --card: var(--black-3);

  /* story */
  --story-plate: #0a0b0a;
  --story-line: #b6ff39;
  --story-length: 1000vh;

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.125rem, 1.35vw, 1.3125rem);
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2.375rem, 4.6vw, 4rem);
  --fs-display: clamp(3rem, 7vw, 6.25rem);
  --fs-hero: clamp(2.875rem, 6.4vw, 6rem);

  /* shape */
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* space */
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --space-section: clamp(88px, 11vw, 160px);
  --header-h: 72px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-reveal: 1s;
}

@media (max-width: 760px) {
  :root { --story-length: 900vh; --header-h: 64px; }
}

:root {
  /* the story's backdrop: faint signal lines from the launch film's art */
  --plate: image-set(url("../img/story/plate.avif") type("image/avif"), url("../img/story/plate.jpg") type("image/jpeg"));
}