/* ═══════════════════════════════════════════════════
   TYPOGRAPHY — System & Utilities
   ═══════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  font-weight: 400;
}

/* ── Headings ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-kerning: normal;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); font-family: var(--font-heading); }
h2 { font-size: var(--fs-h2); font-family: var(--font-heading); }
h3 { font-size: var(--fs-h3); font-family: var(--font-heading); }
h4 { font-size: var(--fs-h4); font-family: var(--font-heading); }

/* ── Display (Editorial) ─────────────────────────── */
.display, .italic-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ── Mono Labels ─────────────────────────────────── */
.font-mono, .label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--fs-label);
}

/* ── Text colors ─────────────────────────────────── */
.text-muted   { color: var(--c-text-3); }
.text-accent  { color: var(--c-accent); }

/* ── Container ───────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ── Text split for animation ────────────────────── */
.text-split .word {
  display: inline-block;
  overflow: hidden;
}

.text-split .char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-out-expo);
}

.is-revealed .char {
  transform: translateY(0);
}

/* ── Special styles ──────────────────────────────── */
em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.section-header__title em {
  color: var(--c-accent);
}