/* ============================================
   MVR Studios — Typography
   ============================================ */

/* Google Fonts — Bebas Neue (display) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&display=swap');

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

/* Display headings — Bebas Neue */
.text-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Tab labels */
.nav-tabs [role="tab"] {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Faction headers */
.faction__header {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

/* Character / Place names — large, bold, impactful */
.character-item,
.place-item {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

/* Trailer titles */
.trailer-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Close button */
.nav-close {
  font-family: var(--font-body);
  font-weight: 300;
}