/*
 * Every value here comes from the design guide §8 via spec §6.
 * Changing a value here changes the whole site. That is the intent.
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colour. Measured ratios are recorded in spec §6.1. */
  --ground: #E8E9E4;
  --surface: #F6F5F0;
  --ink: #202522;
  --ink-secondary: #48504B;
  --green: #395348;
  --rule: #C9CDC7;
  --umber: #4A3328;

  /* Families. Inter carries the explanation, Cormorant the pulled voice. */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-voice: 'Cormorant', Georgia, serif;

  /* Scale */
  --step-meta: 0.9375rem;
  --step-body: 1.1875rem;
  --step-lead: 1.375rem;
  --step-h3: 1.75rem;
  --step-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --step-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);

  --leading-body: 1.7;
  --leading-tight: 1.2;

  /*
   * Measure and frame.
   *
   * 58ch, not the 68ch of spec §6.2. `ch` is the advance width of "0", which in
   * Inter is 11.89px at 19px — far wider than an average lowercase letter. 68ch
   * therefore renders as ~83 characters and an 809px column, overshooting guide
   * §8's own 680-740px band. 58ch measures ~690px and ~71 characters, inside
   * both. The cap only binds above ~850px viewport; mobile is unaffected.
   */
  --measure-read: 58ch;
  --frame: 1160px;
  --gutter: 1.5rem;

  /* Rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
}

/*
 * Breakpoints are 48rem and 68rem, written as literals in every media query.
 * They cannot be custom properties: var() is invalid in a media query prelude
 * and fails silently. See spec §7.1.
 */