* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
    font-family: var(--font-main);
    font-weight: 400;
    font-synthesis: none;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; width: 100%; }
main { min-height: 60vh; }
::selection { background: var(--accent); color: var(--ink); }
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  background: var(--accent);
  padding: 12px 16px;
}
.skip-link:focus { top: 12px; }
.kicker, .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.muted { color: var(--muted); }
.section { padding: 120px var(--gutter); }
.section--dark { background: var(--dark); color: var(--light); }
.section--accent { background: var(--accent); color: var(--ink); }
.section-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 30px;
  margin-bottom: 75px;
  align-items: end;
}
.section-head h2 {
  font-size: clamp(54px, 7.4vw, 124px);
  line-height: .82;
  letter-spacing: -.07em;
  font-weight: 500;
}
.section-head p {
  max-width: 460px;
  justify-self: end;
  font-size: 15px;
  line-height: 1.55;
}
.display {
  font-size: clamp(64px, 10vw, 170px);
  line-height: .78;
  letter-spacing: -.075em;
  font-weight: 500;
}
.display-small {
  font-size: clamp(48px, 7vw, 108px);
  line-height: .86;
  letter-spacing: -.065em;
  font-weight: 500;
}
@media (max-width: 800px) {
  .section { padding: 80px var(--gutter); }
  .section-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 50px; }
  .section-head p { justify-self: start; }
}