/* ==========================================================================
   Typography — Heading scale
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 58px;
  line-height: .96;
  letter-spacing: -2.8px;
  margin: 18px 0 16px;
  color: #2b251f;
}

h2 {
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -1.7px;
  color: var(--brown);
}

h3 {
  font-size: 20px;
  line-height: 1.3;
  color: var(--brown);
}

h4 {
  font-size: 16px;
  line-height: 1.4;
  color: var(--brown);
}

p {
  line-height: 1.7;
  color: var(--muted);
}

strong,
b {
  font-weight: 900;
}

small {
  font-size: 12px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

@media (max-width: 980px) {
  h1 {
    font-size: 42px;
    letter-spacing: -2px;
  }

  h2 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: 34px;
    letter-spacing: -1.5px;
  }

  h2 {
    font-size: 26px;
    letter-spacing: -1px;
  }
}