:root { --fg:#1a1a1a; --muted:#666; --bg:#fff; --line:#e5e5e5; --link:#1c5cab; --chip:#f2f2f2; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e8; --muted:#9a9a9a; --bg:#141414; --line:#2a2a2a; --link:#86b6ef; --chip:#222; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main, header.site, footer.site { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
header.site { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem;
  padding-top:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
header.site .name { font-weight:600; color:var(--fg); text-decoration:none; }
header.site nav a { margin-left:1rem; }
footer.site { border-top:1px solid var(--line); margin-top:3rem; padding-top:1rem; padding-bottom:2rem;
  color:var(--muted); font-size:.9rem; }
a { color:var(--link); }
h1 { font-size:1.8rem; line-height:1.25; margin:0 0 .5rem; }
h2 { font-size:1.15rem; margin-top:2.25rem; }
.muted, .meta, time { color:var(--muted); }
time { font-variant-numeric: tabular-nums; font-size:.9rem; margin-right:.4rem; }
.list { list-style:none; padding:0; }
.list li { padding:.5rem 0; border-bottom:1px solid var(--line); }
.status, .tag { font-size:.75rem; padding:.05rem .45rem; border-radius:4px; background:var(--chip);
  color:var(--muted); margin-left:.25rem; white-space:nowrap; }
.status-active { color:#1f7a3a; } .status-paused { color:#a15c00; }
@media (prefers-color-scheme: dark) { .status-active { color:#6fcf8a; } .status-paused { color:#e0a050; } }
img { max-width:100%; height:auto; border-radius:4px; }
pre { background:var(--chip); padding:.75rem 1rem; overflow-x:auto; border-radius:4px; font-size:.9rem; }
code { font-size:.9em; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:1rem; }
.grid figure { margin:0; } .grid img { aspect-ratio:3/4; object-fit:cover; width:100%; }
figcaption { font-size:.85rem; color:var(--muted); }
.intro img.portrait { width:7rem; height:7rem; object-fit:cover; border-radius:50%; float:right; margin:0 0 1rem 1rem; }
article img + em, article p > em:only-child { display:block; font-size:.85rem; color:var(--muted); margin-top:-.25rem; }
article p img { display:block; border:1px solid var(--line); }