*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cpe-paper); color: var(--cpe-ink); font-family: Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--cpe-green-700); }
a:hover { color: var(--cpe-green-900); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { color: var(--cpe-green-900); line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 4rem); max-width: 18ch; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; transform: translateY(-200%); padding: .6rem .9rem; border-radius: .4rem; background: var(--cpe-green-900); color: #fff; font-weight: 700; }
.skip-link:focus { transform: translateY(0); color: #fff; }
:focus-visible { outline: 3px solid var(--cpe-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }