/* ==========================================================================
   typography.css — the type system.
   Fraunces carries every headline; Outfit carries reading text;
   DM Mono carries anything that behaves like data (labels, indices, tags).
   ========================================================================== */

.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: 'opsz' 120;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display--xl { font-size: var(--fs-4xl); }
.display--lg { font-size: var(--fs-3xl); }
.display--md { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
.display--sm { font-size: var(--fs-xl); letter-spacing: -0.01em; line-height: 1.14; }

/* Italic is reserved: it marks the verb the company is responsible for. */
.display em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.eyebrow--plain::before { display: none; }

.lede {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--fg-dim);
  max-width: 46ch;
}

.body { color: var(--fg-dim); max-width: var(--shell-text); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

/* A number that reads as an index, not as a decoration. */
.index {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 500;
}