body {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga", "onum";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

p {
  max-width: 68ch;
  line-height: 1.6;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 500;
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--olive);
  font-weight: 600;
}

@media (max-width: 900px) {
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
}

@media (max-width: 600px) {
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
}