:root{
  --bg:#f7f6f3; --fg:#1d1d1f; --muted:#6b6b70; --line:#dedbd4; --accent:#3b5d50;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#16171a; --fg:#e8e6e1; --muted:#9a9a9f; --line:#2c2e33; --accent:#8fb3a3; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.65 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--accent)}
.site-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  max-width:44rem; margin:0 auto; padding:28px 20px 18px;
  border-bottom:1px solid var(--line);
}
.brand{font-weight:600; letter-spacing:.02em; color:var(--fg); font-size:1.05rem}
.rune{color:var(--accent); margin-right:.25rem}
.site-head nav a{color:var(--muted); margin-left:18px; font-size:.92rem}
.site-head nav a:hover{color:var(--fg)}
main{max-width:44rem; margin:0 auto; padding:36px 20px 64px}
.hero h1{font-size:1.9rem; line-height:1.25; margin:0 0 .6rem; letter-spacing:-.01em}
.hero p{color:var(--muted); margin:0 0 2.6rem}
.posts h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin:0 0 1.2rem}
article{padding:0 0 1.6rem; margin:0 0 1.6rem; border-bottom:1px solid var(--line)}
article:last-of-type{border-bottom:none}
article h3{margin:0 0 .3rem; font-size:1.15rem; font-weight:600; line-height:1.35}
article h3 a{color:var(--fg)}
article h3 a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.meta{color:var(--muted); font-size:.83rem; margin:.2rem 0 .55rem; letter-spacing:.01em}
article p{margin:0; color:var(--fg)}
.post{padding-top:8px}
.post h1{font-size:1.6rem; line-height:1.3; margin:0 0 .3rem}
.post p{color:var(--fg)}
.post blockquote{margin:1.4rem 0; padding:.2rem 0 .2rem 1rem; border-left:2px solid var(--line); color:var(--muted)}
code{font:.9em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(127,127,127,.12); padding:.1em .35em; border-radius:3px}
pre{background:rgba(127,127,127,.1); padding:14px 16px; border-radius:6px; overflow:auto}
pre code{background:none; padding:0}
.site-foot{max-width:44rem; margin:0 auto; padding:24px 20px 48px; border-top:1px solid var(--line)}
.site-foot p{color:var(--muted); font-size:.85rem; margin:0}
.back{margin-top:2.4rem; font-size:.9rem}