/* blog: same paper, inks and type as index.html, set for long reading */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#f4efe4;--card:#faf6ec;--cobalt:#24408f;--pink:#ff48b0;--yellow:#ffe800;
  --line:color-mix(in srgb,var(--cobalt) 22%,transparent);
  --serif:"Instrument Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;--gut:clamp(18px,4vw,56px)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--cobalt);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--cobalt) 9%,transparent) 1px,transparent 0);background-size:6px 6px}
a{color:inherit;text-underline-offset:3px}
a:hover{text-decoration-color:var(--pink)}
.wrap{max-width:880px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
header{border-bottom:1px solid var(--line)}
header .wrap{max-width:1240px;display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px}
.brand{font-weight:800;font-stretch:75%;font-size:24px;text-transform:uppercase;text-decoration:none;letter-spacing:-.02em;text-shadow:.04em .025em 0 var(--pink)}
header nav{display:flex;gap:22px}
header nav a{text-decoration:none}
h1,h2,h3{font-weight:750;font-stretch:75%;line-height:1;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(40px,6vw,72px);margin:56px 0 16px;text-shadow:.04em .025em 0 var(--pink)}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%}
h2{font-size:clamp(28px,3.4vw,38px);margin:48px 0 12px}
h3{font-size:24px;margin:32px 0 8px}
p,li{text-wrap:pretty}
.meta{margin-bottom:28px;opacity:.8}
.crumbs{margin:40px 0 0;opacity:.7}
.crumbs+h1{margin-top:14px}
.crumbs a{text-decoration:none}
.cover{margin:0 0 28px}
figure{margin:32px 0}
figure img{width:100%;height:auto;border:1.5px solid var(--cobalt)}
figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;margin-top:10px;opacity:.8}
.cover img{width:100%;height:auto;border:1.5px solid var(--cobalt);box-shadow:5px 5px 0 var(--pink)}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
table{border-collapse:collapse;width:100%}
/* the direct answer, for readers and for assistants that quote one paragraph */
.tldr{background:var(--card);border:1.5px solid var(--cobalt);border-radius:14px;padding:18px 22px;box-shadow:4px 4px 0 var(--yellow)}
.tldr p{margin:0}
code{font-family:var(--mono);font-size:.86em;background:color-mix(in srgb,var(--cobalt) 8%,transparent);padding:1px 5px;border-radius:4px}
pre{background:var(--cobalt);color:var(--paper);padding:18px 20px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.5}
pre code{background:none;padding:0;color:inherit}
img,video{max-width:100%;display:block;border-radius:10px}
dt{font-weight:700;margin-top:18px}
dd{margin:4px 0 0}
.posts{list-style:none;padding:0;margin:40px 0}
.posts li{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center}
@media (max-width:640px){.posts li{grid-template-columns:1fr;gap:14px}}
.posts img{width:100%;height:auto;border:1.5px solid var(--cobalt)}
.posts h2{margin:6px 0 8px;font-size:clamp(26px,3vw,34px)}
.posts h2 a{text-decoration:none}
.posts p{margin:0}
.cta{margin:56px 0;padding:22px;border-top:1.5px solid var(--cobalt);border-bottom:1.5px solid var(--cobalt)}
footer{padding:40px 0 60px;opacity:.8;font-size:14px}
.brand{white-space:nowrap}
/* phones: keep every link, set tighter (the brand drops to its own line on very narrow screens) */
@media (max-width:560px){header .wrap{flex-wrap:wrap;gap:8px 16px}header nav{gap:16px}}