/* Typography: the heart of the design. Generous, readable, restrained. */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  font-feature-settings: "kern", "liga", "calt";
  transition: background-color 160ms ease, color 160ms ease;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }

p, li { text-wrap: pretty; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-strong); }

strong, b { font-weight: var(--weight-semibold); }

small { font-size: var(--text-sm); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:not(pre) > code {
  background: var(--color-bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.86em;
}

blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-sm);
  color: var(--color-ink-soft);
  font-style: italic;
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

hr {
  border: none;
  border-top: var(--border-hairline);
  margin-block: var(--space-lg);
}

.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  line-height: var(--leading-snug);
}