/* ============================================================
   Gen ex Gen — Typography Scale (Apple-inspired hierarchy)
   ============================================================ */

/* ── Hero ──────────────────────────────── */
.hero-title {
  font-family: var(--font-cn);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.hero-subtitle {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.hero-tagline {
  font-family: var(--font-cn);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
}

/* ── Section Headings ──────────────────── */
.section-label {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-family: var(--font-cn);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.section-subtitle {
  font-family: var(--font-cn);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 480px;
}

/* ── Cards ─────────────────────────────── */
.card-title {
  font-family: var(--font-cn);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.card-desc {
  font-family: var(--font-cn);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.card-meta {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Body ──────────────────────────────── */
.body-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* ── Nav ───────────────────────────────── */
.nav-link {
  font-family: var(--font-cn);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}