/* ==========================================================================
   Ultramarine Black — tokens, fonts and reset
   Values come from handoff/build-spec.md §1–§2. Do not re-pick by eye.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo Narrow';
  src: url('../fonts/archivo-narrow-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-variable.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: block; /* the eye grid must not reflow mid-animation */
}

:root {
  /* Palette */
  --onyx: #0C0E10;
  --ultramarine: #0B1FD6;
  --crowdflower: #264EF8;
  --signal: #6E8CFF;
  --haze: #C3D0FF;
  --paper: #FFFFFF;
  --slate: #5E666E;
  --hairline: #E6E8EA;
  --void: #07080B;

  /* Secondary greys lifted from the boards */
  --ink-soft: #3C434A;
  --rule-faint: #F1F2F4;
  --grey-mid: #8A9199;
  --grey-dark: #9AA1A8;
  --band: #F2F4F9;
  --field: #EEF1F8;
  --tag-bg: #DEE5FF;
  --dot-off: #D2D6DA;
  --rule-dark: #262B30;

  /* Type */
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --narrow: 'Archivo Narrow', 'Geist', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;

  /* Gutters — 28px in the hero, 56px in the inner sections (§2), at the
     board's 1440. Above that they grow with the window so the composition
     keeps the board's proportions instead of freezing at 1440 and leaving
     the right-hand side empty. Every size below is the same percentage of
     the viewport the board uses at 1440, with a single shared ceiling so
     they all stop together — caps that bit at different widths pulled the
     composition apart. Past the cap the page gains side space instead. */
  /* Past the cap the gutters absorb the extra width, so the content stays
     --page-cap wide and centred. Without this the type freezes at the cap
     while the column keeps growing, and the headline rewraps. */
  --gutter-hero: max(clamp(20px, 1.944vw, 43px), (100vw - 2200px) / 2);
  --gutter: max(clamp(24px, 3.889vw, 86px), (100vw - 2200px) / 2);
  --gutter-right: max(clamp(18px, 1.25vw, 28px), (100vw - 2200px) / 2);

  /* Shared ceiling: 2200px. Every clamp() ceiling in the stylesheets is
     that percentage of 2200, so raising the cap means rescaling them all
     together. */
  --page-cap: 2200px;

  /* Motion */
  --ease-zoom: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--onyx);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: `hidden` makes body a scroll container and
     position: sticky stops working inside it */
  overflow-x: clip;
}

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

img { max-width: 100%; }

button { font: inherit; color: inherit; }

h1, h2, h3, p { margin: 0; }

/* Tabular figures on every clock, counter and percentage (§2) */
.tnum { font-variant-numeric: tabular-nums; }

/* Small tracked label, Archivo Narrow. The trailing letter-space means a
   right-aligned one lands 1px short of the edge — hence .label--right. */
.label {
  font-family: var(--narrow);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}

.label--right { margin-right: -1px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus: Crowdflower on white, Signal on dark grounds (§11) */
:focus-visible {
  outline: 2px solid var(--crowdflower);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.section--dark :focus-visible {
  outline-color: var(--signal);
}