/* ============================================================
   Typographic components
   Regular/medium weights only. Hierarchy comes from size and
   spacing contrast, never from indiscriminate bolding.
   ============================================================ */

.text-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* The one deliberately larger moment on the page: sized and weighted
   so the name reads with real presence, distinct from every other
   heading (which all share --fs-display / --fs-h1 / --fs-h2). */
.hero__name {
  font-size: var(--fs-hero-name);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
}

.text-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.text-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.text-body {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink);
  max-width: 38rem;
}

.text-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.text-meta--contrast { color: var(--color-contrast-secondary); }

/* Masked reveal primitive: wraps a line of text so JS can translate the
   inner span from below its own mask without ever hiding content when
   JS is unavailable (see components.css .no-js override). */
.mask-line {
  display: block;
  overflow: hidden;
}
.mask-line__inner {
  display: block;
  will-change: transform;
}