@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/space-mono-latin-400.woff2') format('woff2'); }

* { box-sizing:border-box; }
html, body { margin:0; }

:root[data-theme=light] { --bg:#F2EFE7; --surface:#FFFFFF; --text:#1C1A14; --muted:#6A6557; --line:#E1DCD0; --accent:#566B47; }
:root[data-theme=dark]  { --bg:#131210; --surface:#1B1A16; --text:#E8E4DA; --muted:#928D80; --line:#29271F; --accent:#A0B58C; }

body { min-height:100vh; background:var(--bg); color:var(--text); font-family:'Space Grotesk',system-ui,sans-serif; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
::selection { background:var(--accent); color:var(--bg); }

.wrap { max-width:840px; margin:0 auto; padding:clamp(24px,5vw,52px) clamp(22px,5vw,56px) 72px; }

.masthead { display:flex; justify-content:space-between; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.wordmark { font:500 12px/1 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.wordmark:hover { color:var(--accent); }
.toggle { appearance:none; border:1px solid var(--line); background:transparent; color:var(--text); width:38px; height:38px; border-radius:8px; cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; transition:border-color .2s, color .2s; }
.toggle:hover { border-color:var(--accent); color:var(--accent); }

.blog-index-head { padding:clamp(30px,6vw,48px) 0 18px; border-bottom:1px solid var(--line); }
.blog-index-head h1 { font:600 clamp(34px,6vw,52px)/1 'Space Grotesk',sans-serif; letter-spacing:-.025em; margin:0 0 12px; }
.blog-index-head p { font:400 16px/1.5 'Space Grotesk',sans-serif; color:var(--muted); margin:0; max-width:54ch; }

.post-list { list-style:none; margin:0; padding:0; }
.post-list li { padding:26px 0; border-bottom:1px solid var(--line); }
.post-list time { font:500 12px/1 'Space Mono',monospace; letter-spacing:.06em; color:var(--accent); }
.post-list h2 { font:600 22px/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; margin:8px 0 6px; }
.post-list h2 a { color:var(--text); text-decoration:none; }
.post-list h2 a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.post-list p { font:400 15px/1.55 'Space Grotesk',sans-serif; color:var(--muted); margin:0; max-width:62ch; text-wrap:pretty; }
.post-list .post-link { display:inline-block; margin-top:12px; font:500 13px/1 'Space Mono',monospace; letter-spacing:.04em; color:var(--accent); text-decoration:none; }
.post-list .post-link:hover { text-decoration:underline; text-underline-offset:3px; }

.article { padding:clamp(30px,6vw,48px) 0 0; }
.article-meta { font:500 12px/1 'Space Mono',monospace; letter-spacing:.06em; color:var(--accent); }
.article h1 { font:600 clamp(32px,5.5vw,46px)/1.08 'Space Grotesk',sans-serif; letter-spacing:-.025em; margin:12px 0 18px; text-wrap:balance; }
.article-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 30px; }
.article-tags .tag { font:500 11px/1 'Space Mono',monospace; letter-spacing:.02em; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:5px 7px; }
.prose { font:400 clamp(16px,2.4vw,18px)/1.7 'Space Grotesk',sans-serif; max-width:68ch; }
.prose h2 { font:600 26px/1.3 'Space Grotesk',sans-serif; letter-spacing:-.01em; margin:38px 0 12px; }
.prose h3 { font:600 20px/1.3 'Space Grotesk',sans-serif; margin:30px 0 10px; }
.prose p { margin:0 0 18px; text-wrap:pretty; }
.prose a { color:var(--accent); }
.prose ul, .prose ol { margin:0 0 18px; padding-left:1.4em; }
.prose li { margin:0 0 6px; }
.prose blockquote { margin:0 0 18px; padding:2px 0 2px 18px; border-left:3px solid var(--line); color:var(--muted); }
.prose img { max-width:100%; height:auto; border-radius:5px; }
.prose code { font:400 .88em/1.5 'Space Mono',monospace; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.prose pre.highlight, .prose div.highlight { margin:0 0 22px; }
.prose .highlight pre, .prose pre.highlight { overflow-x:auto; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.prose .highlight code, .prose pre.highlight code { font:400 13.5px/1.6 'Space Mono',monospace; background:none; border:0; padding:0; }
.article-back { display:inline-block; margin:40px 0 0; font:500 13px/1 'Space Mono',monospace; letter-spacing:.04em; color:var(--muted); text-decoration:none; }
.article-back:hover { color:var(--accent); }

.colophon { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:56px; padding-top:22px; border-top:1px solid var(--line); font:500 11px/1.6 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.colophon a { color:inherit; text-decoration:none; }
.colophon a:hover { color:var(--accent); }

:root[data-theme=light] .highlight table td { padding: 5px; }
:root[data-theme=light] .highlight table pre { margin: 0; }
:root[data-theme=light] .highlight .cm {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .cp {
  color: #999999;
  font-weight: bold;
}
:root[data-theme=light] .highlight .c1 {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
:root[data-theme=light] .highlight .c, :root[data-theme=light] .highlight .ch, :root[data-theme=light] .highlight .cd, :root[data-theme=light] .highlight .cpf {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
:root[data-theme=light] .highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
:root[data-theme=light] .highlight .ge {
  color: #000000;
  font-style: italic;
}
:root[data-theme=light] .highlight .gr {
  color: #aa0000;
}
:root[data-theme=light] .highlight .gh {
  color: #999999;
}
:root[data-theme=light] .highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
:root[data-theme=light] .highlight .go {
  color: #888888;
}
:root[data-theme=light] .highlight .gp {
  color: #555555;
}
:root[data-theme=light] .highlight .gs {
  font-weight: bold;
}
:root[data-theme=light] .highlight .gu {
  color: #aaaaaa;
}
:root[data-theme=light] .highlight .gt {
  color: #aa0000;
}
:root[data-theme=light] .highlight .kc {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kd {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kn {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kp {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kr {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kt {
  color: #445588;
  font-weight: bold;
}
:root[data-theme=light] .highlight .k, :root[data-theme=light] .highlight .kv {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .mf {
  color: #009999;
}
:root[data-theme=light] .highlight .mh {
  color: #009999;
}
:root[data-theme=light] .highlight .il {
  color: #009999;
}
:root[data-theme=light] .highlight .mi {
  color: #009999;
}
:root[data-theme=light] .highlight .mo {
  color: #009999;
}
:root[data-theme=light] .highlight .m, :root[data-theme=light] .highlight .mb, :root[data-theme=light] .highlight .mx {
  color: #009999;
}
:root[data-theme=light] .highlight .sa {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .sb {
  color: #d14;
}
:root[data-theme=light] .highlight .sc {
  color: #d14;
}
:root[data-theme=light] .highlight .sd {
  color: #d14;
}
:root[data-theme=light] .highlight .s2 {
  color: #d14;
}
:root[data-theme=light] .highlight .se {
  color: #d14;
}
:root[data-theme=light] .highlight .sh {
  color: #d14;
}
:root[data-theme=light] .highlight .si {
  color: #d14;
}
:root[data-theme=light] .highlight .sx {
  color: #d14;
}
:root[data-theme=light] .highlight .sr {
  color: #009926;
}
:root[data-theme=light] .highlight .s1 {
  color: #d14;
}
:root[data-theme=light] .highlight .ss {
  color: #990073;
}
:root[data-theme=light] .highlight .s, :root[data-theme=light] .highlight .dl {
  color: #d14;
}
:root[data-theme=light] .highlight .na {
  color: #008080;
}
:root[data-theme=light] .highlight .bp {
  color: #999999;
}
:root[data-theme=light] .highlight .nb {
  color: #0086B3;
}
:root[data-theme=light] .highlight .nc {
  color: #445588;
  font-weight: bold;
}
:root[data-theme=light] .highlight .no {
  color: #008080;
}
:root[data-theme=light] .highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
:root[data-theme=light] .highlight .ni {
  color: #800080;
}
:root[data-theme=light] .highlight .ne {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nf, :root[data-theme=light] .highlight .fm {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nl {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nn {
  color: #555555;
}
:root[data-theme=light] .highlight .nt {
  color: #000080;
}
:root[data-theme=light] .highlight .vc {
  color: #008080;
}
:root[data-theme=light] .highlight .vg {
  color: #008080;
}
:root[data-theme=light] .highlight .vi {
  color: #008080;
}
:root[data-theme=light] .highlight .nv, :root[data-theme=light] .highlight .vm {
  color: #008080;
}
:root[data-theme=light] .highlight .ow {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .o {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .w {
  color: #bbbbbb;
}
:root[data-theme=light] .highlight {
  background-color: #f8f8f8;
}
:root[data-theme=dark] .highlight table td { padding: 5px; }
:root[data-theme=dark] .highlight table pre { margin: 0; }
:root[data-theme=dark] .highlight, :root[data-theme=dark] .highlight .w {
  color: #d0d0d0;
  background-color: #151515;
}
:root[data-theme=dark] .highlight .err {
  color: #151515;
  background-color: #ac4142;
}
:root[data-theme=dark] .highlight .c, :root[data-theme=dark] .highlight .ch, :root[data-theme=dark] .highlight .cd, :root[data-theme=dark] .highlight .cm, :root[data-theme=dark] .highlight .cpf, :root[data-theme=dark] .highlight .c1, :root[data-theme=dark] .highlight .cs {
  color: #505050;
}
:root[data-theme=dark] .highlight .cp {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .nt {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .o, :root[data-theme=dark] .highlight .ow {
  color: #d0d0d0;
}
:root[data-theme=dark] .highlight .p, :root[data-theme=dark] .highlight .pi {
  color: #d0d0d0;
}
:root[data-theme=dark] .highlight .gi {
  color: #90a959;
}
:root[data-theme=dark] .highlight .gd {
  color: #ac4142;
}
:root[data-theme=dark] .highlight .gh {
  color: #6a9fb5;
  background-color: #151515;
  font-weight: bold;
}
:root[data-theme=dark] .highlight .k, :root[data-theme=dark] .highlight .kn, :root[data-theme=dark] .highlight .kp, :root[data-theme=dark] .highlight .kr, :root[data-theme=dark] .highlight .kv {
  color: #aa759f;
}
:root[data-theme=dark] .highlight .kc {
  color: #d28445;
}
:root[data-theme=dark] .highlight .kt {
  color: #d28445;
}
:root[data-theme=dark] .highlight .kd {
  color: #d28445;
}
:root[data-theme=dark] .highlight .s, :root[data-theme=dark] .highlight .sb, :root[data-theme=dark] .highlight .sc, :root[data-theme=dark] .highlight .dl, :root[data-theme=dark] .highlight .sd, :root[data-theme=dark] .highlight .s2, :root[data-theme=dark] .highlight .sh, :root[data-theme=dark] .highlight .sx, :root[data-theme=dark] .highlight .s1 {
  color: #90a959;
}
:root[data-theme=dark] .highlight .sa {
  color: #aa759f;
}
:root[data-theme=dark] .highlight .sr {
  color: #75b5aa;
}
:root[data-theme=dark] .highlight .si {
  color: #8f5536;
}
:root[data-theme=dark] .highlight .se {
  color: #8f5536;
}
:root[data-theme=dark] .highlight .nn {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .nc {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .no {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .na {
  color: #6a9fb5;
}
:root[data-theme=dark] .highlight .m, :root[data-theme=dark] .highlight .mb, :root[data-theme=dark] .highlight .mf, :root[data-theme=dark] .highlight .mh, :root[data-theme=dark] .highlight .mi, :root[data-theme=dark] .highlight .il, :root[data-theme=dark] .highlight .mo, :root[data-theme=dark] .highlight .mx {
  color: #90a959;
}
:root[data-theme=dark] .highlight .ss {
  color: #90a959;
}