* { box-sizing: border-box; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-body); line-height: var(--line-height-body); }
header, main, footer { width: min(100% - 2 * var(--space-5), 52rem); margin-inline: auto; }
header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
header p { margin: 0; font-weight: 700; }
header span, footer { color: var(--color-text-muted); }
main { padding-block: var(--space-7); overflow-wrap: anywhere; }
h1 { font-size: clamp(var(--font-size-heading), 4vw, 2rem); line-height: 1.4; }
h2 { font-size: var(--font-size-heading); }
section { margin-top: var(--space-7); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); }
footer { padding-block: var(--space-5); }
.skipLink { position: absolute; inset-inline-start: var(--space-5); top: var(--space-3); min-height: var(--touch-target); padding: var(--space-3); background: var(--color-surface); color: var(--color-primary); transform: translateY(-200%); }
.skipLink:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }