:root{--canvas:#E4E2DC;--panel:#EEECE7;--accent:#1D3C9E;--text-primary:#151B24;--text-secondary:#4D5660;--line:rgba(21,27,36,.14);--display:"Bricolage Grotesque",Georgia,serif;--body:"Instrument Sans",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--body)}
a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;z-index:9}.skip:focus{left:8px}
header,main,footer{width:min(760px,calc(100vw - 32px));margin:0 auto}
header{padding:28px 0}.wm{font:700 22px var(--display);text-decoration:none;color:var(--text-primary);display:inline-block;padding:8px 0}
main{padding:24px 0 80px}
h1{font:700 clamp(34px,6vw,52px)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 24px}
h2{font:700 22px/1.2 var(--display);margin:36px 0 8px}
.todo{background:var(--panel);border-left:4px solid var(--accent);padding:14px 18px;border-radius:6px;font-size:15px}
footer{padding:32px 0 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--text-secondary)}
footer nav{display:flex;gap:6px}footer a{padding:10px 8px;min-height:44px;display:inline-flex;align-items:center;color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:24px}.btn{display:inline-block;background:var(--accent);color:#fff;padding:14px 26px;border-radius:999px;text-decoration:none;margin-top:12px}
