/*
 * base.css — fonts, design tokens, reset, element defaults.
 * Loaded first on every page. Everything else assumes these tokens exist.
 * Token reference and rationale: docs/DESIGN.md
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../fonts/AlteHaasGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Colour. The site is two colours; anything else is a bug. */
  --ink: #000;
  --paper: #fff;
  --ink-faint: #888;

  /* The 1px hairline that draws every grid division on the site. */
  --rule-width: 1px;
  --rule: var(--rule-width) solid var(--ink);

  /* Type. Display is bold-only by design; body carries every weight. */
  --font-display: 'Alte Haas Grotesk', Arial, sans-serif;
  --font-body: 'Neue Montreal', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid sizes. Each is min / preferred / max — see docs/DESIGN.md. */
  --size-body: clamp(0.8125rem, 1.05vw, 0.875rem);
  --size-label: clamp(0.8125rem, 1.2vw, 0.875rem);
  --size-nav: clamp(0.8125rem, 0.95vw, 0.875rem);
  --size-footer: clamp(0.7rem, 1vw, 0.75rem);
  --size-section-label: clamp(0.85rem, 1.6vw, 1.05rem);
  --size-work-title: 2rem;
  --size-hero-title: clamp(2.25rem, 8vw, 4.5rem);
  --size-lede: clamp(0.95rem, 1.35vw, 1.15rem);
  --size-manifesto-lead: clamp(1.45rem, 6.5vw, 3.6rem);
  --size-manifesto: clamp(1.05rem, 2.6vw, 2.25rem);

  /* The sticky nav's track height. Pages subtract it from their first screen. */
  --nav-h: 4.75rem;

  /* The eye in the nav island. In rem so it rides the root font size — browser
     zoom, OS display scaling, and a user's default text size all move it with
     the links rather than leaving it stranded at a fixed pixel width. */
  --nav-eye: 2.4rem;

  /* Space. Panel padding is fluid; the rest is a plain rem scale. */
  --pad-panel: clamp(1rem, 2.5vw, 2rem);
  --pad-panel-lg: clamp(1.25rem, 3vw, 2.25rem);
  --pad-hero: clamp(1.25rem, 3vw, 2.75rem);
  --pad-row: 1rem;

  /* Motion. Reveal is the accordion; the rest are hover-scale niceties. */
  --ease-out-quint: cubic-bezier(0.33, 1, 0.68, 1);
  /* Overshoots slightly past 1 — the mark pops rather than merely appears. */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-reveal: 0.42s;
  --dur-tint: 0.35s;

  /* The single breakpoint. Below it, every two-column grid stacks. */
  --bp-stack: 768px;
}

/* ---------------------------------------------------------------- reset */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

/* Rubber-band overscroll would pull the page and flash the fixed hero. */
html,
body {
  overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin: 0;
}

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

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* `font: inherit` above hands inputs the body's 1.5 line-height, which makes
   them ~3px taller than their intrinsic box. Inputs want the UA default. */
input {
  line-height: normal;
}

button,
[type='button'],
[type='submit'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}

em {
  font-style: italic;
}

/* ------------------------------------------------------------- utilities */

/* Visually hidden, still read aloud. Used for headline text that a Lottie
   glyph replaces (see .hero-title__sr in hero-title.css). */
.u-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;
}