@font-face {
  font-family: 'Beausite Classic';
  src: url('../assets/fonts/BeausiteClassicWeb-Regular.woff2') format('woff2'),
       url('../assets/fonts/BeausiteClassicWeb-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Beausite Classic';
  src: url('../assets/fonts/BeausiteClassicWeb-Medium.woff2') format('woff2'),
       url('../assets/fonts/BeausiteClassicWeb-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-beausite);
  font-weight: 400;
}

/* Typography classes */

.heading-display {
  font-family: var(--font-beausite);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-box: trim-both cap alphabetic;
}

.heading-h2 {
  font-family: var(--font-beausite);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-box: trim-both cap alphabetic;
}

.heading-h3 {
  font-family: var(--font-beausite);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.body-text {
  font-family: var(--font-beausite);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.body-text-group {
  display: flex;
  flex-direction: column;
  gap: var(--para-gap);
}

/* ----------------------------------------------------------
   MOBILE (≤ 440px)
   ---------------------------------------------------------- */

@media (max-width: 440px) {
  .body-text-group {
    gap: 16px;
  }
}

/* ----------------------------------------------------------
   1920px — enlarged type scale
   ---------------------------------------------------------- */

@media (min-width: 1920px) {
  .heading-display {
    font-size: 140px;
    letter-spacing: -8.4px;
  }

  .heading-h2 {
    font-size: 105px;
    letter-spacing: -4.2px;
  }

  .heading-h3 {
    font-size: 70px;
    letter-spacing: -2.8px;
  }

  .body-text {
    font-size: 20px;
    letter-spacing: -0.6px;
  }
}