/* Layout: a single narrow column on parchment-and-ink, hero road scene on top, cards below. */
:root{--bg:#f1e9d6;--paper:#f8f1df;--fg:#2a241b;--mut:#6c614f;--line:#cfc3a5;--acc:#8c5a12;--acc-fg:#fff8e6;--ink:#1d1a14;
--sky-top:#e9dfc4;--sky-low:#cdbf9b;--moon:#fff6dc;--hill-far:#9c8e6c;--hill-near:#6d6249;--road:#b8a782;--road-line:#8c7d5c;--tree:#4d4533;--fig:#1a160f;
--display:"IM Fell English","Iowan Old Style",Georgia,serif;--body:"Spectral",Georgia,serif;--ui:system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14110d;--paper:#1d1a14;--fg:#e8dcc0;--mut:#a09580;--line:#3a3328;--acc:#e0a43a;--acc-fg:#1d1a14;--ink:#0e0c09;
--sky-top:#1a1812;--sky-low:#3b3426;--moon:#d8ceb2;--hill-far:#2a261d;--hill-near:#1d1a14;--road:#4a4132;--road-line:#6b5f48;--tree:#14120d;--fig:#0e0c09;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#14110d;--paper:#1d1a14;--fg:#e8dcc0;--mut:#a09580;--line:#3a3328;--acc:#e0a43a;--acc-fg:#1d1a14;--ink:#0e0c09;
--sky-top:#1a1812;--sky-low:#3b3426;--moon:#d8ceb2;--hill-far:#2a261d;--hill-near:#1d1a14;--road:#4a4132;--road-line:#6b5f48;--tree:#14120d;--fig:#0e0c09;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--acc)} a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:32px;padding-block:20px 56px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;font:14px var(--ui)}
.bar nav{display:flex;gap:16px;flex-wrap:wrap} .bar a{text-decoration:none;color:var(--mut)} .bar a:hover,.bar a[aria-current]{color:var(--fg)}
.theme{font:13px var(--ui);background:none;color:var(--mut);border:1px solid var(--line);border-radius:3px;padding:4px 10px;cursor:pointer}
.hero{border:1px solid var(--line);overflow:hidden;background:var(--ink)} .hero svg,.hero img{display:block;width:100%;height:auto}
h1{font:400 clamp(38px,8vw,60px)/1.05 var(--display);margin:0;text-wrap:balance}
h2{font:400 28px/1.2 var(--display);margin:0 0 10px;color:var(--acc);text-wrap:balance}
h1 small{display:block;font:13px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
p{margin:0 0 1em} .intro p:last-child{margin:0} .intro{font-size:20px}
.sig{font-family:var(--display);font-style:italic;color:var(--mut)}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.btn{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--fg);min-width:0}
.btn:hover{border-color:var(--acc)} .btn b{font:400 22px var(--display);color:var(--acc)} .btn span{font:14px/1.4 var(--ui);color:var(--mut)}
.btn.primary{background:var(--acc);border-color:var(--acc)} .btn.primary b,.btn.primary span{color:var(--acc-fg)}
.card{background:var(--paper);border:1px solid var(--line);padding:20px 22px;position:relative}
.card::before{content:"";position:absolute;inset:5px;border:1px dashed var(--line);pointer-events:none}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0 0;font:15px/1.5 var(--ui)} .card dt{color:var(--mut)} .card dd{margin:0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mut);margin-right:6px}
.dot.on{background:#4fae62;box-shadow:0 0 6px #4fae62} .dot.off{background:#c0563a}
.mods{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mods a{display:block;padding:12px 16px;border-left:3px solid var(--acc);background:var(--paper);text-decoration:none;color:var(--fg)}
.mods b{font:400 20px var(--display);display:block;color:var(--acc)} .mods span{font:15px/1.4 var(--ui);color:var(--mut)}
.todo{font:14px var(--ui);color:var(--mut)}
footer{font:13px var(--ui);color:var(--mut);border-top:1px solid var(--line);padding-top:16px}
ul.plain{padding-left:1.1em} .ph{border:1px dashed var(--line);padding:14px 16px;margin:0 0 12px;background:var(--paper)}
.ph h3{font:400 20px var(--display);margin:0 0 4px} .ph p{margin:0;color:var(--mut);font-size:16px}
@media (prefers-reduced-motion:no-preference){.hero svg circle[fill="url(#glow)"]{animation:fl 3.6s ease-in-out infinite}@keyframes fl{50%{opacity:.7}}}