html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #c5d0ff; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 10px 16px; background: #fff; color: var(--color-text-dark);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}