html {
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
  background: var(--black);
}
body {
  min-width: 20rem;
  overflow-x: clip;
  background: var(--black);
}
::selection { color: var(--black); background: var(--silver); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: 1rem;
  transform: translateY(-200%);
  background: var(--white);
  color: var(--black);
  padding: 0.8rem 1rem;
}
.skip-link:focus { transform: translateY(0); }
.section-pad {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding: var(--section-space) var(--page-pad);
}
main > section[id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}