/* assets/css/typography.css
 * All text styles. Display fonts on Fraunces with custom variable
 * axis settings, body on Newsreader, UI on JetBrains Mono.
 */

body {
  font-family: var(--font_body);
  font-size: var(--size_base);
  line-height: 1.5;
  font-weight: 300;
}

.display {
  font-family: var(--font_display);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -0.025em;
  line-height: 0.96;
}
.display em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.h_hero {
  font-family: var(--font_display);
  font-size: var(--size_hero);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.h_hero em {
  font-style: italic;
  color: var(--gold);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.h_section {
  font-family: var(--font_display);
  font-size: var(--size_3xl);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 60, 'SOFT' 50;
}

.h_card {
  font-family: var(--font_display);
  font-size: var(--size_lg);
  font-weight: 400;
  line-height: 1.2;
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
}

.eyebrow {
  font-family: var(--font_mono);
  font-size: var(--size_xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space_4);
}
.eyebrow.muted { color: var(--bone_faint); }

.eyebrow_rule::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
}

.label_mono {
  font-family: var(--font_mono);
  font-size: var(--size_xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone_faint);
}

.lede {
  font-family: var(--font_body);
  font-size: var(--size_lg);
  line-height: 1.5;
  color: var(--bone_dim);
  font-weight: 300;
  max-width: 720px;
}
.lede strong { color: var(--bone); font-weight: 500; }

.mono {
  font-family: var(--font_mono);
  font-feature-settings: 'tnum' 1, 'cv02' 1;
}

.italic_serif {
  font-family: var(--font_display);
  font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 80;
  color: var(--gold);
}