/* typography.css — type stack + display classes */

body {
  font-family: var(--font-sans);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display-1, .display-2, .display-3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--ink);
}

.display-1 { font-size: var(--f-d1); }
.display-2 { font-size: var(--f-d2); }
.display-3 { font-size: var(--f-d3); }

.heading-1 { font-size: var(--f-h1); }
.heading-2 { font-size: var(--f-h2); }
.heading-3 { font-size: var(--f-h3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--f-tiny);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  font-weight: 500;
}

.lead {
  font-size: 1.18rem;
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  max-width: 60ch;
}

.meta {
  font-size: var(--f-small);
  color: var(--ink-mute);
  font-feature-settings: "tnum";
}

.prose p { color: var(--ink-soft); line-height: var(--lh-body); }
.prose p + p { margin-top: 1.1em; }

.serif em, .prose em {
  font-style: italic;
  color: var(--ink);
  font-feature-settings: "ss01";
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--f-mono);
  letter-spacing: 0.02em;
}

.text-soft  { color: var(--ink-soft); }
.text-mute  { color: var(--ink-mute); }
.text-gold  { color: var(--gold); }

a.link-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  padding-bottom: 1px;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
a.link-underline:hover { color: var(--gold); }