/* Tokens. Reuse these; don't add one-off values. */
:root {
  --color-ink: #111111;
  --color-muted: #5c5c5c;
  --color-rule: #d4d4d4;
  --color-paper: #f7f7f5;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(2.5rem, 6vw, 4.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 8rem;

  --measure: 38rem;
  --page: 72rem;
}

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

html { background: var(--color-paper); color: var(--color-ink); }

body {
  margin: 0 auto;
  max-width: var(--page);
  padding: 0 var(--space-3);
  font: var(--text-base) / 1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 0.2em; }

.site-header {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-ink);
}

.wordmark {
  font: 600 var(--text-sm) / 1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

main { padding: var(--space-5) 0 var(--space-4); }

h1 {
  max-width: 16ch;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
  font: 600 var(--text-sm) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p { max-width: var(--measure); margin: 0 0 var(--space-2); }

h1 + p { font-size: var(--text-lg); line-height: 1.4; color: var(--color-muted); }

.site-footer {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.site-footer p { margin: 0; }

@media (max-width: 40rem) {
  body { padding: 0 var(--space-2); }
  main { padding-top: var(--space-4); }
}