:root{--bg:#fbfaf7;--fg:#1d1d1b;--muted:#6b6862;--accent:#9a3d1f;--rule:#e4e0d8}
@media (prefers-color-scheme:dark){:root{--bg:#141413;--fg:#ecebe6;--muted:#a19d95;--accent:#e8916f;--rule:#2c2b28}}
*{box-sizing:border-box}
html{font-size:112.5%}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font:1rem/1.65 Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;padding:3rem 1.5rem}
main{max-width:34rem;width:100%}
h1{font-size:2.6rem;line-height:1.1;margin:0 0 .4rem;letter-spacing:-.01em}
.tag{color:var(--muted);font-style:italic;margin:0 0 2rem}
p{margin:0 0 1.2rem}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
footer{margin-top:2.5rem;color:var(--muted);font-size:.85rem;font-family:system-ui,sans-serif}
h2.section{font-size:1rem;font-family:system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:2.6rem 0 0}
ul.writing{list-style:none;padding:0;margin:.8rem 0 0;border-top:1px solid var(--rule)}
ul.writing li{border-bottom:1px solid var(--rule)}
ul.writing a{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;text-decoration:none;color:var(--fg)}
ul.writing a:hover span,ul.writing a:focus-visible span{color:var(--accent);text-decoration:underline}
ul.writing time{flex:none;color:var(--muted);font-family:system-ui,sans-serif;font-size:.8rem;padding-top:.2rem}
/* post pages */
body.post{display:block}
body.post main{margin:0 auto}
.home{font-family:system-ui,sans-serif;font-size:.9rem;margin-bottom:2.5rem}
.home a{text-decoration:none}
article h1{font-size:2.1rem}
.date{color:var(--muted);font-family:system-ui,sans-serif;font-size:.85rem;margin-bottom:1.8rem}
.feature{margin:0 0 2rem}
img{max-width:100%;height:auto;display:block;border-radius:3px}
.content h2,.content h3,.content h4{line-height:1.25;margin:2rem 0 .8rem}
.content h2{font-size:1.4rem}.content h3{font-size:1.2rem}.content h4{font-size:1.05rem}
.content ul,.content ol{padding-left:1.4rem;margin:0 0 1.2rem}
.content li{margin-bottom:.4rem}
blockquote{margin:1.5rem 0;padding-left:1.1rem;border-left:3px solid var(--accent);font-style:italic;color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
body.post footer{border-top:1px solid var(--rule);padding-top:1.2rem}
