/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-mono {
  font-family: var(--font-mono);
}

/* ----- HEADINGS ----- */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

h1, .h1 {
  font-size: var(--fs-hero);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

h2, .h2 {
  font-size: var(--fs-section);
  letter-spacing: -0.03em;
}

h3, .h3 {
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.022em;
}

h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ----- BODY TYPE ----- */

p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-platinum);
  max-width: 64ch;
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--color-white);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 60ch;
}

/* ----- UTILITY TYPE CLASSES ----- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-cyan);
  opacity: 0.6;
}

.eyebrow-muted {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cyan);
  opacity: 0.85;
}

.text-muted {
  color: var(--color-muted);
}

.text-platinum {
  color: var(--color-platinum);
}

.text-cyan {
  color: var(--color-cyan);
}

.text-teal {
  color: var(--color-teal);
}

.text-white {
  color: var(--color-white);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ----- DISPLAY UTILITIES ----- */

.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.headline-gradient {
  background: linear-gradient(180deg, var(--color-white) 0%, rgba(184, 194, 204, 0.62) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- CINEMATIC SPLIT REVEAL HELPERS ----- */

.split-line {
  display: block;
  overflow: hidden;
}

.split-line-inner {
  display: block;
  transform: translateY(110%);
}