:root { --fg:#1a1a1a; --muted:#666; --accent:#0a58ca; --bg:#fff; --line:#e6e6e6; }
* { box-sizing: border-box; }
body { margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.5rem 1rem; max-width:820px; margin:0 auto; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.site-header .brand { font-weight:700; letter-spacing:.02em; color:var(--fg); }
.site-header nav a { margin-left:1rem; color:var(--muted); }
.site-header nav a:first-child { margin-left:0; }

.container { max-width:820px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
h1 { line-height:1.2; margin:.2em 0 .3em; }

.post-meta { color:var(--muted); font-size:.9rem; margin-bottom:1.5rem; }
.post-meta .cats { margin-left:.75rem; }
.post-body img { max-width:100%; height:auto; border-radius:6px; }
.post-body p { margin:1rem 0; }
.post-body h2, .post-body h3 { margin-top:1.8rem; }
.post-body ul, .post-body ol { padding-left:1.4rem; }
.tags { margin-top:2rem; color:var(--muted); font-size:.85rem; }
.tags span { margin-right:.4rem; }
.back { margin-top:2.5rem; }

.post-list { list-style:none; padding:0; }
.post-list li { display:flex; gap:1rem; align-items:baseline; padding:.6rem 0; border-bottom:1px solid var(--line); }
.post-list time { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; white-space:nowrap; }

.site-footer { max-width:820px; margin:0 auto; padding:1.5rem 1.25rem; color:var(--muted);
  font-size:.85rem; border-top:1px solid var(--line); }