/* Zoe's approved brand-sheet typography system. */

@font-face {
  font-family: "Milk and Clay";
  src: url("MILK AND CLAY.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Milk and Clay";
  src: url("MILK AND CLAY-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --logo-font: "Milk and Clay", "Trebuchet MS", sans-serif;
}

.brand,
.footer-brand,
.error-brand {
  text-decoration: none;
}

body {
  font-weight: 300;
  line-height: 1.62;
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1;
}

.brand-wordmark,
.footer-brand-wordmark {
  display: block;
  color: currentColor;
  font-family: var(--logo-font);
  font-size: clamp(1.25rem, 4.2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 0.9;
  text-transform: uppercase;
}

.footer-brand-wordmark {
  max-width: 12rem;
  color: var(--cream);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
}

.eyebrow,
.poster-topline,
.poster-note,
.state-kicker {
  font-weight: 500;
  letter-spacing: 0.13em;
}

.button,
.text-link,
.desktop-nav a:not(.button),
.mobile-nav a,
.footer-nav a,
.game-card-link {
  font-weight: 500;
  letter-spacing: 0.1em;
}

.hero-intro,
.about-copy,
.game-content > p:last-of-type,
.mailing-copy > p:last-child,
.mailing-state > span:last-of-type,
.journal-post p {
  font-weight: 300;
}

.hero h1,
.section-heading h2,
.about-heading h2,
.mailing-copy h2,
.journal-heading h2 {
  letter-spacing: 0.015em;
}

.game-poster h3 {
  letter-spacing: 0.012em;
}

@media (min-width: 44rem) {
  .brand-wordmark {
    max-width: 15rem;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }
}