:root{
  --bg:#F6F5F0; --ink:#1B2026; --muted:#5F6B72; --rule:#D9DBD3; --accent:#1B6F8C; --accent2:#B8860B; --code:#ECEBE4; --draft:#FFF2C2;
  --measure:42rem; --wide:56rem; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121619; --ink:#E6E9E4; --muted:#9AA5AB; --rule:#2A353C; --accent:#5CB9D6; --accent2:#E0B23C; --code:#1C2429; --draft:#4A3F12; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121619; --ink:#E6E9E4; --muted:#9AA5AB; --rule:#2A353C; --accent:#5CB9D6; --accent2:#E0B23C; --code:#1C2429; --draft:#4A3F12; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:19px/1.6 "Newsreader",Georgia,"Times New Roman",serif;font-optical-sizing:auto}
@media (max-width:600px){body{font-size:17.5px}}
.mono{font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:.78em;letter-spacing:.01em}
a{color:var(--accent);overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--wide);margin:0 auto;padding:22px 16px 10px}
.brand{min-width:0;flex:0 1 auto}
.brand img{display:block;height:auto;max-height:20px;width:auto;max-width:100%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:invert(1)}}
:root[data-theme="dark"] .brand img{filter:invert(1)}
.top nav{white-space:nowrap;flex:none;display:flex;align-items:center;gap:18px;font-family:"Roboto Mono",monospace;font-size:14px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}
.theme{background:none;border:1px solid var(--rule);color:var(--muted);border-radius:50%;width:28px;height:28px;font-size:15px;line-height:1;cursor:pointer;padding:0}
.theme:hover{color:var(--ink)}

/* index */
main{max-width:var(--measure);margin:0 auto;padding:24px 16px 64px}
.hero{margin:40px 0 44px}
.hero h1{font:500 2.4rem/1.1 "Newsreader",serif;letter-spacing:-.01em;margin:0 0 14px}
.hero h1 .mono{font-size:.55em;color:var(--muted);vertical-align:.2em;margin-left:.2em}
.lede{font-size:1.15rem;color:var(--muted);margin:0;max-width:34rem}
.year{font-size:15px;color:var(--muted);margin:40px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.year .muted{font-size:12px}
.posts{list-style:none;margin:0;padding:0}
main.index{max-width:var(--wide)}
.posts li{margin:0;padding:24px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:28px;align-items:start}
.posts .th{display:block;width:300px;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--code);margin-top:4px}
.posts .th img{display:block;width:100%;height:100%;object-fit:cover}
.posts .th.blank{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font:italic 400 4.5rem/1 "Newsreader",serif}
.posts li:hover .th img{opacity:.92}
.posts .tx a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-decoration:none;color:var(--ink)}
.posts .t{font:500 1.5rem/1.25 "Newsreader",serif;text-wrap:balance}
.posts .tx a:hover .t,.posts li:has(.th:hover) .t{color:var(--accent)}
.posts .d{color:var(--muted);white-space:nowrap;font-size:13px}
.posts .s{margin:8px 0 0;color:var(--ink);opacity:.82;font-size:1.02rem;line-height:1.55;text-wrap:pretty}
@media (max-width:760px){.posts li{grid-template-columns:minmax(0,1fr);row-gap:12px}.posts .th{width:100%;margin-top:0}.posts .t{font-size:1.35rem}}

/* article */
.head{margin:28px 0 36px}
.head h1{font:500 clamp(1.9rem,4.5vw,2.7rem)/1.12 "Newsreader",serif;letter-spacing:-.012em;margin:0 0 12px;text-wrap:balance}
.meta{color:var(--muted);margin:0;font-size:14px}
.meta a{color:var(--muted)}
.body>p,.body>ul,.body>ol,.body>blockquote,.body>h2,.body>h3,.body>h4,.body>table,.body>pre,.body>hr{margin:0 0 1.25em}
.body h2,.body h3,.body h4{font-family:"Archivo",system-ui,sans-serif;font-weight:600;line-height:1.25;margin-top:2em;letter-spacing:-.005em;text-wrap:balance}
.body h2{font-size:1.5rem}.body h3{font-size:1.2rem}.body h4{font-size:1.05rem;color:var(--muted)}
.body h1{font:600 1.5rem/1.25 "Archivo",system-ui,sans-serif;margin:2em 0 1em}
.body strong{font-weight:600}
.body sub,.body sup{font-size:.72em;line-height:0}
.body blockquote{margin-left:0;padding:.1em 0 .1em 1.1em;border-left:3px solid var(--rule);color:var(--muted);font-style:italic}
.body hr{border:0;border-top:1px solid var(--rule);margin:2.5em auto;width:40%}
.body ul,.body ol{padding-left:1.4em}
.body li{margin:.3em 0}
.body li>p{margin:0 0 .5em}
.body code{font-family:"Roboto Mono",ui-monospace,monospace;font-size:.82em;background:var(--code);padding:.1em .35em;border-radius:3px}
.body pre{background:var(--code);padding:14px 16px;border-radius:4px;overflow:auto;font-size:.82em;line-height:1.5}
.body pre code{background:none;padding:0;font-size:1em}
.body table{border-collapse:collapse;font-family:"Archivo",system-ui,sans-serif;font-size:.9rem;width:100%}
.body th,.body td{border-bottom:1px solid var(--rule);padding:6px 8px;text-align:left;vertical-align:top}
.body th{font-weight:600}
.body figure{margin:2em 0}
.body img{max-width:100%;height:auto}
.body figure img,.body p>img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:3px}
.body figcaption{font-family:"Archivo",system-ui,sans-serif;font-size:.86rem;color:var(--muted);text-align:center;margin:10px auto 0;max-width:36rem;line-height:1.45;text-wrap:pretty}
/* wide images bleed past the text column on large screens */
@media (min-width:1000px){.body figure{width:var(--wide);margin-left:calc((var(--measure) - var(--wide))/2)}}
.body p>img{margin:1.5em auto}
.embed{margin:2em 0}
.embed.video{position:relative;aspect-ratio:16/9}
.embed.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:3px}
.embed iframe{max-width:100%;border:0}
.embed.video.portrait{aspect-ratio:9/16;max-width:340px;margin-left:auto;margin-right:auto}
.embed.dw iframe{display:block;width:100%;min-width:100%}
/* interactive prototypes (posts/<post>/embed/*.html, static/ix/): column-width by default (the generic figure bleed applies),
   .wide breaks out further for chart-heavy ones */
.body figure.embed.ix iframe{display:block;width:100%;border:0;background:transparent}
.body figure.embed.ix.wide{--fw:min(1180px,calc(100vw - 48px));width:var(--fw);margin-left:calc(50% - var(--fw)/2);margin-right:0}
@media (max-width:600px){.body figure.embed.ix.wide{--fw:calc(100vw - 32px)}}
/* full-bleed interactive figure: as wide as the window allows (up to 1600px), centred on the text column */
.body figure.embed.full{--fw:min(1600px,calc(100vw - 48px));width:var(--fw);margin-left:calc(50% - var(--fw)/2);margin-right:0}
.body figure.embed.full iframe{display:block;width:100%;background:transparent}
@media (max-width:600px){.body figure.embed.full{--fw:calc(100vw - 32px)}}
.missing{display:block;padding:12px;border:1px dashed var(--rule);color:var(--muted);font-family:"Roboto Mono",monospace;font-size:13px;margin:1.5em 0}
.prevnext{display:flex;justify-content:space-between;gap:16px;margin:56px 0 0;padding-top:20px;border-top:1px solid var(--rule);font-family:"Archivo",system-ui,sans-serif;font-size:.95rem}
.prevnext a{text-decoration:none;color:var(--ink);max-width:48%;display:flex;flex-direction:column;gap:2px}
.prevnext a small{color:var(--muted);font-family:"Roboto Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.prevnext a:hover{color:var(--accent)}
.prevnext .newer{text-align:right;margin-left:auto}
.draftbar{background:var(--draft);font-family:"Roboto Mono",monospace;font-size:13px;display:flex;gap:18px;justify-content:center;padding:8px 16px}
.draftbar a{color:inherit}

/* footer */
.foot{max-width:var(--measure);margin:0 auto;padding:28px 16px 48px;border-top:1px solid var(--rule);color:var(--muted);font-size:.9rem}
.foot p{margin:4px 0}
.foot a{color:var(--muted)}