/* Blog — reading-first layout. One small file, no framework, no JS. */
:root{
  --paper:#FBF9F4; --ink:#1B1830; --ink-2:#4A4663; --ink-3:#716D88;
  --rule:#E4DFD3; --brand:#5B21B6; --brand-dk:#4C1D95; --tint:#F2EEE3;
  --note:#2563EB; --tip:#047857; --warn:#B45309;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Syne","Figtree",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#14121F; --ink:#ECEAF6; --ink-2:#BDB9D3; --ink-3:#9A96B2; --rule:#2B2740; --brand:#B79CFF; --brand-dk:#D2C2FF; --tint:#1D1A2E;
        --note:#7DB1FF; --tip:#4FD1A5; --warn:#F2B25C}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.5 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:.18em}
a:hover{color:var(--brand-dk)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2rem,46rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}

/* header / footer */
.top{border-bottom:1px solid var(--rule)}
.top-in{width:min(100% - 2rem,64rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{font:700 1.15rem var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.top-nav{display:flex;align-items:center;gap:1.1rem;font-size:.95rem}
.top-nav a{color:var(--ink-2);text-decoration:none}
.top-nav a:hover{color:var(--ink);text-decoration:underline}
.top-nav .btn{background:var(--brand);color:#fff;padding:.45rem .9rem;border-radius:6px;font-weight:600}
.top-nav .btn:hover{background:var(--brand-dk);color:#fff;text-decoration:none}
@media (prefers-color-scheme:dark){.top-nav .btn{color:#14121F}.top-nav .btn:hover{color:#14121F}}
@media (max-width:560px){.top-nav a:nth-child(2),.top-nav a:nth-child(3){display:none}}
.foot{border-top:1px solid var(--rule);margin-top:4rem;padding:2rem 0 1.5rem;color:var(--ink-2);font-size:.95rem}
.foot-in{width:min(100% - 2rem,64rem);display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}
.foot-in p{margin:.4rem 0 0;max-width:32rem}
.foot-in nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:flex-start}
.foot-in nav a{color:var(--ink-2)}
.foot-copy{width:min(100% - 2rem,64rem);margin-top:1.5rem;font-size:.85rem;color:var(--ink-3)}

/* list pages */
.list-head{padding-top:3rem}
.list-head h1{font:700 clamp(1.9rem,5vw,2.7rem)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 .6rem}
.lede{font:400 1.15rem/1.6 var(--serif);color:var(--ink-2);margin:0 0 1.4rem;max-width:36rem}
.crumb{font-size:.9rem;color:var(--ink-3);margin:0 0 .8rem}
.crumb a{color:var(--ink-3)}
.topics{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.topics a{color:var(--ink-2);text-decoration:none;padding:.15rem 0;border-bottom:2px solid transparent}
.topics a:hover{color:var(--ink)}
.topics a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.entry{display:flex;gap:1.5rem;justify-content:space-between;padding:1.8rem 0;border-bottom:1px solid var(--rule)}
.entry-text{min-width:0}
.kicker{margin:0 0 .35rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.kicker a{color:var(--brand);text-decoration:none}
.entry h2{font:700 clamp(1.3rem,3.4vw,1.65rem)/1.2 var(--display);letter-spacing:-.01em;margin:0 0 .5rem}
.entry h2 a{color:var(--ink);text-decoration:none}
.entry h2 a:hover{color:var(--brand)}
.excerpt{font:400 1.05rem/1.6 var(--serif);color:var(--ink-2);margin:0 0 .6rem}
.meta,.byline{font-size:.88rem;color:var(--ink-3);margin:0}
.entry-img{flex:0 0 9.5rem;align-self:flex-start}
.entry-img img{width:9.5rem;height:6.6rem;object-fit:cover;border-radius:4px}
@media (max-width:560px){.entry{flex-direction:column-reverse;gap:.9rem}.entry-img,.entry-img img{width:100%;flex-basis:auto}.entry-img img{height:auto;aspect-ratio:16/9}}
.empty{padding:3rem 0;color:var(--ink-2);font-family:var(--serif)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:1.8rem 0 0;font-size:.95rem;color:var(--ink-3)}

/* article */
.article{padding-top:2.6rem}
.art-head h1{font:700 clamp(1.9rem,5.5vw,2.9rem)/1.12 var(--display);letter-spacing:-.02em;margin:0 0 .9rem;text-wrap:balance}
.standfirst{font:400 1.25rem/1.55 var(--serif);color:var(--ink-2);margin:0 0 1rem}
.byline{padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.byline .by{color:var(--ink);font-weight:600}
.cover{margin:1.6rem 0 0}
.cover img{width:100%;border-radius:4px}
.toc{margin:1.6rem 0 0;padding:1rem 1.2rem;background:var(--tint);border-radius:6px;font-size:.95rem}
.toc p{margin:0 0 .4rem;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:.25rem 0}
.toc li.l3{margin-left:1rem;list-style:circle}
.toc a{color:var(--ink-2)}

.prose{font:400 1.1875rem/1.78 var(--serif);margin-top:1.8rem;overflow-wrap:break-word}
.prose>*+*{margin-top:1.15em}
.prose h2{font:700 1.65rem/1.25 var(--display);letter-spacing:-.01em;margin-top:2.2em;scroll-margin-top:1rem}
.prose h3{font:600 1.3rem/1.3 var(--sans);margin-top:1.8em;scroll-margin-top:1rem}
.prose h4{font:600 1.1rem/1.3 var(--sans);margin-top:1.6em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose h2:hover::after,.prose h3:hover::after{content:" #";color:var(--ink-3);font-weight:400}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{margin-left:0;padding:.1em 0 .1em 1.2em;border-left:3px solid var(--brand);color:var(--ink-2);font-style:italic}
.prose blockquote p{margin:.5em 0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.prose code{font:500 .86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--tint);padding:.12em .35em;border-radius:3px;word-break:break-word}
.prose pre{background:var(--tint);padding:1rem 1.1rem;border-radius:6px;overflow-x:auto;line-height:1.55}
.prose pre code{background:none;padding:0;font-size:.88rem;word-break:normal}
.prose figure{margin-left:0;margin-right:0}
.prose figure img{border-radius:4px;border:1px solid var(--rule)}
.prose figcaption{font:400 .88rem/1.45 var(--sans);color:var(--ink-3);margin-top:.5rem}
.prose p>img{border-radius:4px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;font:400 .95rem/1.45 var(--sans);min-width:28rem}
.prose th,.prose td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:600;border-bottom:2px solid var(--ink-3);white-space:nowrap}
.prose tbody tr:nth-child(even){background:var(--tint)}
.callout{padding:.9rem 1.1rem;border-left:4px solid var(--note);background:var(--tint);border-radius:0 6px 6px 0;font:400 1.02rem/1.65 var(--sans)}
.callout p{margin:.4em 0}
.callout::before{display:block;font:600 .78rem var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.15rem;color:var(--note);content:"Note"}
.callout-tip{border-color:var(--tip)}.callout-tip::before{content:"Tip";color:var(--tip)}
.callout-warning{border-color:var(--warn)}.callout-warning::before{content:"Careful";color:var(--warn)}

.art-foot{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--rule);font-size:.98rem}
.share{margin:0 0 1.4rem}
.author{background:var(--tint);padding:1rem 1.2rem;border-radius:6px}
.author p{margin:0}.author p+p{margin-top:.4rem;color:var(--ink-2)}
.author-name{font-weight:600}
.more{margin-top:3rem}
.more h2{font:700 1.2rem var(--display);margin:0 0 .8rem}
.more ul{list-style:none;padding:0;margin:0}
.more li{padding:.7rem 0;border-top:1px solid var(--rule)}
.more li a{font:600 1.05rem var(--sans);text-decoration:none}
.more li span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.15rem}
.draft-bar{background:var(--warn);color:#fff;text-align:center;padding:.5rem 1rem;font-size:.9rem}
.wrap.prose{margin-top:3rem}
@media print{.top,.foot,.toc,.share,.more,.skip{display:none}body{background:#fff;color:#000}.prose{font-size:11pt}a{color:#000}}

.legal h1{font:700 clamp(1.8rem,5vw,2.4rem)/1.15 var(--display);letter-spacing:-.02em;margin:0}
.legal-date{font:400 .9rem var(--sans);color:var(--ink-3);margin-top:.5rem}
.legal{font-size:1.08rem}