:root { color-scheme: light; --ink: #20242a; --muted: #5c6570; --line: #d7dce1; --accent: #8d2f2f; --paper: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: #f2f1ee; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.65; }
.page { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
header, footer { padding: 1rem 0; }
h1, h2 { line-height: 1.15; }
h1 { margin: 1rem 0 .5rem; font-size: clamp(2.2rem, 7vw, 4.2rem); }
h2 { margin-top: 2.2rem; color: var(--accent); }
.intro { font-size: 1.2rem; max-width: 70ch; }
nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid #e4a72c; outline-offset: 4px; }
.paper { background: var(--paper); padding: 1.5rem; box-shadow: 0 8px 30px #20242a12; }
.role { border-top: 1px solid var(--line); padding: 1.25rem 0; }
.role h2 { margin: 0 0 .5rem; }
.role h3 { margin: 1rem 0 .25rem; font-size: 1rem; }
ul { padding-left: 1.25rem; }
.meta { color: var(--muted); }
footer { border-top: 1px solid var(--line); margin-top: 2rem; }
.visually-hidden-focusable { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden-focusable:focus-within { position: static; width: auto; height: auto; overflow: visible; display: flex; padding: .75rem; background: var(--paper); }
@media (max-width: 600px) { .page { padding: 1rem .75rem 2rem; } .paper { padding: 1rem; } }