/* Rafino typography. Local variable fonts provide the exact requested weights. */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --font: "Manrope", Arial, sans-serif;
  --font-heading: "Satoshi", Arial, sans-serif;
}

body {
  font-family: var(--font);
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
}

.hero h1 {
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(38px, 12vw, 66px);
  }
}

/* Navigation and interactive labels, including mobile navigation and dialogs. */
button,
.button,
.button-dark,
.text-link,
.main-nav > a,
.menu-button,
.journey-tabs button,
.store-button small,
.store-button strong,
.faq-list summary,
.back-top,
.footer-bottom nav a,
.footer-bottom nav button {
  font-family: var(--font);
  font-weight: 500;
}

/* Small uppercase labels retain their existing size, spacing and color. */
.eyebrow,
.strip-caption,
.network-note,
.map-label span,
.map-meta,
.photo-label,
.orb-caption,
.launch-side-note {
  font-family: var(--font);
  font-weight: 600;
}