html { scroll-padding-top: 96px; }
body { font-family: var(--font-body); color: var(--color-text-body); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text-heading); }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; }
a { color: var(--color-primary-dark); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 8px 14px; border-radius: 8px; background: var(--color-secondary); color: var(--color-text-on-dark); }
.skip-link:focus { left: 12px; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.band-navy a:focus-visible, .band-blue a:focus-visible, .jsa-footer a:focus-visible, .topbar a:focus-visible { outline-color: var(--color-tertiary); }

.jsa-ico { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jsa-mark { display: block; aspect-ratio: 568/510; color: var(--color-primary); }
.jsa-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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