:root{--red:#C8102E;--choc:#2B1710;--gold:#E3A02B;--bg:#F4F0EE;--paper:#fff;--ink:#2B1710;--mute:#6B5A52;
--display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#1B0F0A;--paper:#2B1710;--ink:#F6EDE8;--mute:#C2AFA6}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
a{color:var(--red)}@media (prefers-color-scheme:dark){a{color:var(--gold)}}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.agebar{background:var(--choc);color:#F6EDE8;font-size:.875rem;text-align:center;padding:8px 16px}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{font:800 1.6rem var(--display);text-decoration:none;letter-spacing:-.02em;color:var(--ink)}
.logo span{color:var(--red)}
nav a{margin-left:22px;text-decoration:none;font-weight:600;color:var(--ink)}
nav a:hover{color:var(--red)}
.prose{max-width:760px;margin:0 auto;padding:40px 20px 72px}
h1{font:800 clamp(2.2rem,5vw,3.4rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 12px}
h2{font:800 1.5rem/1.2 var(--display);letter-spacing:-.01em;margin:40px 0 8px}
.meta{color:var(--mute);font-size:.9375rem;margin:0 0 28px}
.box{background:var(--paper);border-left:6px solid var(--gold);padding:16px 20px;border-radius:8px;margin:24px 0}
table{width:100%;border-collapse:collapse;background:var(--paper);margin:16px 0}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--bg)}
th{width:38%;color:var(--mute);font-weight:600}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc div{background:var(--paper);padding:16px 20px;border-radius:8px}
.pc h3{margin:0 0 8px;font:800 1.1rem var(--display)}
.todo{background:#FFF3C4;color:#2B1710;padding:2px 6px;border-radius:4px}
footer{background:var(--choc);color:#E9DDD6;padding:40px 0;font-size:.9375rem}
footer a{color:var(--gold)}footer p{max-width:60em}
footer nav a{margin:0 18px 0 0;color:var(--gold);font-weight:400}
@media (max-width:640px){.pc{grid-template-columns:1fr}nav a{margin-left:14px}}
.prose.wide{max-width:900px}
.lead{font-size:1.2rem;color:var(--mute)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:16px 0}
.card{background:var(--paper);border:2px dashed var(--mute);border-radius:12px;padding:20px}
.card h3{font:800 1.15rem var(--display);margin:0 0 6px}.card p{margin:0;color:var(--mute);font-size:.9375rem}
ol.steps{padding-left:1.2em}ol.steps li{margin:8px 0}
details{background:var(--paper);border-radius:8px;padding:12px 18px;margin:10px 0}
summary{font-weight:600;cursor:pointer}
.tbl th,.tbl td{width:auto}.tbl thead th{color:var(--ink);border-bottom:2px solid var(--gold)}
