* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--font-heading); text-wrap: balance; }
h2 {
  margin: 0 0 26px;
  font-size: clamp(30px, 3.65vw, 52px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -2px;
}
::selection { background: var(--accent); color: var(--ink); }
:where(a, button, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.wrap { width: min(var(--width), calc(100% - 96px)); margin-inline: auto; }
.accent-text { color: var(--accent); }
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 8px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }