/* Typography system: display / body / mono */

.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-heading); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-heading); }

.display-xl em, .display-lg em, .display-md em {
  font-style: italic;
  font-weight: var(--weight-display-em);
}
.accent-word { color: var(--accent-strong); font-style: italic; }
.section--dark .accent-word, .footer .accent-word { color: var(--color-terracotta-soft); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--content-measure);
  text-wrap: pretty;
}
.body-sm { font-size: var(--fs-body-sm); line-height: 1.6; }
.caption { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.55; }

/* Mono: labels, metadata, annotations */
.mono { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.label::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
  flex: none;
}
.label--plain::before { display: none; }
.label--on-dark { color: var(--text-on-dark-faint); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-tight);
  color: var(--text-muted);
}
.meta--on-dark { color: var(--text-on-dark-faint); }

.spec-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-strong);
  letter-spacing: var(--ls-mono);
}
.section--dark .spec-num { color: var(--color-terracotta-soft); }

/* Prose defaults */
.prose p + p { margin-top: 1em; }
.prose p { color: var(--text-secondary); max-width: var(--content-measure); }
.prose strong { color: var(--text-primary); font-weight: var(--weight-body-semi); }