*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
}
button {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

main,
.bar,
footer {
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
main {
  display: grid;
  gap: clamp(88px, 12vw, 160px);
  padding-block: clamp(48px, 8vw, 104px) clamp(88px, 12vw, 160px);
}

h1,
h2,
h3 {
  font-family: var(--display);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 700;
}
.display {
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.title {
  font-size: clamp(2rem, 5vw, 3.6rem);
}
.lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  max-width: 52ch;
}
.muted {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 600px) {
  main {
    gap: 64px;
    padding-block: 40px 72px;
  }
}