/* ---------- Font Faces ---------- */

@font-face {
  font-family: "Avenir";
  src:
    url("../fonts/Avenir.woff2") format("woff2"),
    url("../fonts/Avenir.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src:
    url("../fonts/Avenir-Italic.woff2") format("woff2"),
    url("../fonts/Avenir-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Avenir";
  src:
    url("../fonts/Avenir-Bold.woff2") format("woff2"),
    url("../fonts/Avenir-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src:
    url("../fonts/Avenir-Italic-Bold.woff2") format("woff2"),
    url("../fonts/Avenir-Italic-Bold.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

/* ---------- Heading Reset ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

/* ---------- Typography Classes ---------- */

.page-title {
  margin: 0;
  font-size: clamp(48px, 10vw, 56px);
  letter-spacing: 0.3px;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: 0.5px;
}

.title-em {
  color: var(--accent-text);
  font-style: italic;
}