:root { --fg:#1d1d1f; --muted:#6b6b70; --bg:#fdfdfc; --link:#1a5fb4; --rule:#e4e4e2; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e6; --muted:#9a9a9f; --bg:#16161a; --link:#78aeed; --rule:#2c2c31; }
}
* { box-sizing: border-box; }
body { margin:0 auto; max-width:42rem; padding:1.5rem 1rem 3rem; background:var(--bg); color:var(--fg);
  font:1.125rem/1.65 Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; }
a { color:var(--link); }
header.site { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--rule); padding-bottom:.75rem; margin-bottom:2rem;
  font-family:system-ui, sans-serif; font-size:1rem; }
header.site .brand { font-weight:700; color:var(--fg); text-decoration:none; font-size:1.15rem; }
header.site .brand .avatar { width:40px; height:40px; border-radius:50%; vertical-align:middle; margin-right:.6rem; }
footer.site { border-top:1px solid var(--rule); margin-top:3rem; padding-top:1rem; color:var(--muted); font:.875rem system-ui, sans-serif; }
h1, h2, h3 { line-height:1.25; font-family:system-ui, sans-serif; }
h1 { font-size:2rem; margin:0 0 .25rem; }
.meta, .tagline, time { color:var(--muted); font-family:system-ui, sans-serif; font-size:.9rem; }
.posts { list-style:none; padding:0; }
.posts li { margin:0 0 1.5rem; }
.posts li > a { font:600 1.2rem system-ui, sans-serif; display:block; }
.posts p { margin:.25rem 0 0; }
blockquote { margin:1.5rem 0; padding-left:1rem; border-left:3px solid var(--rule); color:var(--muted); }
pre { overflow-x:auto; padding:1rem; background:var(--rule); border-radius:4px; font-size:.9rem; }
code { font-size:.9em; }
img { max-width:100%; height:auto; }

/* Post page: left-hand list of all posts */
body.post { max-width:66rem; }
.post-layout { display:grid; grid-template-columns:15rem minmax(0, 42rem); gap:3rem; justify-content:center; }
.post-nav { font-family:system-ui, sans-serif; font-size:.9rem; position:sticky; top:1.5rem; align-self:start; }
.post-nav h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 .75rem; }
.post-nav ol { list-style:none; margin:0; padding:0; }
.post-nav li { margin:0 0 .85rem; padding-left:.75rem; border-left:2px solid transparent; }
.post-nav li.current { border-left-color:var(--link); }
.post-nav li a { display:block; line-height:1.3; }
.post-nav li.current a { color:var(--fg); font-weight:600; text-decoration:none; }
.post-nav time { display:block; font-size:.8rem; margin-top:.15rem; }
@media (max-width: 56rem) {
  body.post { max-width:42rem; }
  .post-nav { position:static; border-top:1px solid var(--rule); margin-top:2.5rem; padding-top:1rem; }
  .post-layout article { order:-1; }
  .post-layout { display:flex; flex-direction:column; }
}