html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--collar-h) + 1rem);
}
body {
  position: relative;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  padding-top: var(--collar-h);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  color: inherit;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.236rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.618rem); }
h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.618rem); }
h4 { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
p { font-size: 1rem; }
a {
  color: var(--accent-strong);
  text-underline-offset: 0.18em;
  transition: color var(--speed);
}
a:hover { color: var(--accent); }
ul, ol { padding-left: 1.2em; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
}