@font-face {
  font-family: "Brutal";
  src: url("/assets/Brutal Type W00 Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour
     Volt extracted from reference at full resolution.
     Muted is ink at 40% alpha — used only for placeholder text inside the email pill. */
  --color-volt: #CEFE02;
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-muted: rgba(0, 0, 0, 0.4);
  --color-warning: #FF0000;

  /* Type
     Neue Haas Grotesk throughout. Only four sizes — nav, tagline, body, and pill.
     Hand-tuned to the reference, not a modular scale. */
  --font-family: "neue-haas-grotesk-text", "neue-haas-grotesk-display", sans-serif;
  --font-family-display: "neue-haas-grotesk-display", "neue-haas-grotesk-text", sans-serif;
  --font-family-tagline: "Brutal", "neue-haas-grotesk-display", sans-serif;
  --font-size-nav: 1rem;        /* 16px — About / Close */
  --font-size-pill: 1rem;       /* 16px — pill input + Subscribe */
  --font-size-tagline: 1rem;    /* 16px — SETTLE FOR MORE. */
  --font-size-body: 1rem;       /* 16px — manifesto */

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-body: 1.55;

  --tracking-tagline: 0.06em;   /* bolded caps breathe at small size */
  --tracking-pill: 0.01em;

  /* Spacing
     Base unit 8px. Only five steps — the page is small; inventing more is dishonest. */
  --space-1: 0.5rem;    /* 8px  */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px — paragraph gap in manifesto */
  --space-4: 2rem;      /* 32px — viewport padding */
  --space-5: 3rem;      /* 48px — logo-to-tagline, tagline-to-pill rhythm */

  /* Radius */
  --radius-pill: 0;

  /* Motion
     One curve, one duration. The state change is decisive, not decorative. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-state: 220ms;
  --duration-slow: 520ms;
}