@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/literata-latin-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/literata-latin-italic.woff2") format("woff2");
}

:root {
  --font-sans: "Source Sans 3", Arial, sans-serif;
  --font-grotesk: var(--font-sans);
  --font-serif: "Literata", Georgia, serif;
  --font-mono: var(--font-sans);

  --type-body-size: 17px;
  --type-body-leading: 1.55;
  --type-ui-size: 13px;
  --type-meta-size: 12px;
  --type-ui-tracking: 0.1em;
  --type-meta-tracking: 0.12em;
}

/*
  Typography roles
  - Literata: editorial display titles only
  - Source Sans 3: project titles, body copy, navigation, buttons and metadata
*/

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-leading);
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

.hero-title,
.about-hero-title,
.case-title,
h2.display,
.display,
.project-summary-heading {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.about-hero-title {
  font-size: clamp(40px, 5vw, 82px);
  line-height: 1;
  letter-spacing: 0;
}

.ff-centered-title,
.project-showcase-title,
.project-summary-title,
.feature-title,
.foundation-item h3,
.evidence-title,
.background-row h3,
.adv-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.meta.ff-positioning,
.meta.project-positioning {
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.15;
  letter-spacing: 0.045em;
}

.lead,
.p-summary,
.project-showcase-summary,
.project-summary-type,
.footer-note,
.section-intro,
.feature-desc,
.evidence-description,
.background-role,
.background-description {
  font-family: var(--font-sans);
}

.lead {
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.55;
}

.meta,
.eyebrow,
.pill {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--type-meta-tracking);
}

.nav-link,
.text-link {
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--type-ui-tracking);
}

.ndl-name,
.project-summary-type {
  font-family: var(--font-sans);
  font-weight: 600;
}

@media (max-width: 640px) {
  :root {
    --type-body-size: 16px;
    --type-ui-size: 12px;
    --type-meta-size: 11px;
  }

  .meta.ff-positioning,
  .meta.project-positioning {
    font-size: clamp(16px, 4.6vw, 18px);
  }
}

@media (min-width: 1025px) {
  .hero-description {
    letter-spacing: 0.01em;
    line-height: 1.32;
    text-wrap: balance;
  }

  .hero-description span {
    display: inline;
  }
}