* { box-sizing: border-box; }
html { scroll-behavior: smooth; color: var(--color-text); background: var(--color-page); font-family: var(--font-sans); font-size: var(--font-size-body); line-height: var(--line-height-body); }
body { margin: 0; min-width: 320px; }
a { color: var(--color-link); text-underline-offset: 3px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 34px; line-height: 1.3; letter-spacing: 0; }
h2 { font-size: clamp(21px, 3vw, 28px); line-height: 1.4; letter-spacing: 0; }
h3 { font-size: 18px; line-height: 1.5; }
.shell { width: min(calc(100% - 32px), var(--shell-max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; transform: translateY(-180%); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-text); color: #fff; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 480px) { .shell { width: min(calc(100% - 24px), var(--shell-max)); } }
@media (max-width: 700px) { h1 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }