/* ==========================================================================
   typography.css
   Font loading, base text and heading styles. Values come from theme.css.

   "Neue Haas Grotesk Display" is a licensed font. Put the licensed .woff2
   files in assets/fonts/ using the names below. Until then the browser
   falls back to Helvetica Neue / Arial.
   ========================================================================== */

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: local("Neue Haas Grotesk Display Roman"),
       url("../fonts/NeueHaasGroteskDisplay-Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: local("Neue Haas Grotesk Display Medium"),
       url("../fonts/NeueHaasGroteskDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: local("Neue Haas Grotesk Display Bold"),
       url("../fonts/NeueHaasGroteskDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p {
  margin: var(--paragraph-margin);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  margin: var(--heading-margin);
  color: var(--color-black);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: var(--h4-size); letter-spacing: 0; line-height: 1.3; }

.lead {
  font-size: 1.15rem;
  line-height: 1.65;
  font-weight: 400;
  max-width: 62ch;
  color: var(--color-muted);
}

.fw-medium { font-weight: 500; }