/* Archgen blog post pages. Same tokens, face and surfaces as index.html; only what a reading page needs. */
@font-face{font-family:'Cascadia Code';font-style:normal;font-weight:200 700;font-display:optional;src:url(../assets/fonts/cascadia-code-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cascadia Code';font-style:normal;font-weight:200 700;font-display:optional;src:url(../assets/fonts/cascadia-code-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cascadia Code';font-style:normal;font-weight:200 700;font-display:optional;src:url(../assets/fonts/cascadia-code-symbols2.woff2) format('woff2');unicode-range:U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F}

:root{
  color-scheme:light;
  --ink:#E8EDF1; --ink-2:#DDE5EA; --ink-3:#D2DCE2;
  --slate:#435565; --steel:#738A9A;
  --paper:#0E1317; --paper-2:rgba(14,19,23,.74); --paper-3:rgba(14,19,23,.64);
  --line:rgba(14,19,23,.12); --line-2:rgba(14,19,23,.24);
  --flare:#D65148; --signal:#A8392F;
  --surface:#F7FAFB; --surface-2:#EDF2F5; --on-slate:#EEF3F6;
  --ease:cubic-bezier(.2,.9,.3,1);
  --mono:"Cascadia Code",ui-monospace,Consolas,monospace;
  --wrap:1320px; --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);scrollbar-color:var(--steel) var(--ink-2);accent-color:var(--flare);caret-color:var(--flare);scroll-padding-top:88px}
/* no page-wide smooth scrolling: opening or reopening a post lands instantly; only clicks on the contents rail glide */
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"calt" 0,"liga" 0,"zero" 1;font-variant-numeric:tabular-nums slashed-zero}
a{color:inherit}
::selection{background:var(--flare);color:#0E1317}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.wrap{padding-inline:32px}}

/* ---------- top bar: the site's, with the two routes and the one action ---------- */
.bar{position:sticky;top:0;z-index:50;background:rgba(232,237,241,.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.bar-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand .lockup{height:28px;width:auto;color:var(--paper);transition:color .25s}
.brand:hover .lockup{color:var(--signal)}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{text-decoration:none;font-size:13px;padding:8px 12px;border-radius:999px;color:var(--paper-2);transition:color .2s,background .2s}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);background:rgba(14,19,23,.07)}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);text-decoration:none;font:600 13px/1 var(--mono);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,transform .35s var(--ease)}
.pill:hover{background:var(--flare);color:#0E1317}
.pill:active{transform:scale(.96);transition-duration:90ms}
@media (max-width:640px){.bar .pill{display:none}.nav{margin-left:auto}}
@media (prefers-reduced-transparency:reduce){.bar{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* reading progress: a red trace along the bar's lower edge */
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flare);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---------- post head: tag, title, then date · read time · authors (the original's order), set in the article's column ---------- */
.post-head{padding-block:clamp(20px,3.6vw,52px) 0;display:grid;gap:14px;min-width:0}
.back{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13px;color:var(--paper-2);text-decoration:none;padding:6px 0;transition:color .2s}
.back svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.back:hover{color:var(--signal)}.back:hover svg{transform:translateX(-3px)}
.tag{margin:0;font-size:13px;font-weight:600;color:var(--signal)}
.post-head h1{margin:0;font-size:clamp(30px,3.5vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
.meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px;color:var(--paper-2)}
.meta>*+*::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--steel);margin-right:16px;vertical-align:middle}
@media (max-width:640px){.meta>span:last-child{flex-basis:100%}.meta>span:last-child::before{display:none}}
.post-fig{margin-top:14px;min-width:0}
.prose .dek{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--paper);margin-bottom:1.6em;text-wrap:pretty}

/* ---------- body: contents rail beside the article ---------- */
.post{display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px;padding-bottom:clamp(72px,9vw,128px)}
.prose{margin-top:clamp(28px,3vw,40px)}
@media (min-width:1100px){.post{grid-template-columns:240px minmax(0,var(--measure));justify-content:space-between;column-gap:64px}}
@media (min-width:1280px){.post{grid-template-columns:260px minmax(0,var(--measure)) 120px}}
.toc{display:none}
@media (min-width:1100px){.post-head{grid-column:2;grid-row:1}.toc{display:block;grid-column:1;grid-row:2;position:sticky;top:96px;align-self:start;margin-top:clamp(28px,3vw,40px);max-height:calc(100svh - 120px);overflow:auto;scrollbar-width:thin}.prose{grid-column:2;grid-row:2}}
.toc h2{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--paper)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:13px;line-height:1.4}
.toc a{display:block;padding:7px 10px;border-radius:6px;text-decoration:none;color:var(--paper-2);transition:color .2s,background .2s}
.toc a:hover{color:var(--paper);background:rgba(14,19,23,.05)}
.toc a[aria-current="true"]{color:var(--paper);background:rgba(214,81,72,.12);box-shadow:inset 2px 0 0 var(--flare)}

/* the article: one measure, generous leading, the house red for links */
.prose{min-width:0;font-size:16.5px;line-height:1.75}
.prose>*{margin:0}
.prose>*+*{margin-top:1.15em}
.prose .v2{font-size:clamp(22px,2.1vw,28px);line-height:1.2;letter-spacing:-.015em;font-weight:600;margin-top:2.4em;text-wrap:balance}
.prose .v3{font-size:19px;line-height:1.3;font-weight:600;margin-top:2em;text-wrap:balance}
.prose .v4{font-size:16.5px;line-height:1.4;font-weight:600;margin-top:1.8em}
.prose :is(.v2,.v3,.v4)+*{margin-top:.7em}
.prose p,.prose li{text-wrap:pretty}
.prose a{overflow-wrap:anywhere;color:var(--paper);text-decoration:underline;text-decoration-color:rgba(168,57,47,.45);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.prose a:hover{color:var(--signal);text-decoration-color:var(--signal)}
.prose strong,.prose b{font-weight:600;color:var(--paper)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--signal)}
.prose hr{border:0;border-top:1px solid var(--line-2);margin-block:2.6em}
.prose code{font-size:.92em;background:var(--surface-2);padding:.12em .38em;border-radius:4px}
.prose pre{background:var(--paper);color:var(--on-slate);padding:18px 20px;border-radius:10px;overflow-x:auto;font-size:14px;line-height:1.7;scrollbar-color:var(--steel) transparent}
.prose pre code{background:none;padding:0;font-size:inherit;color:inherit}
/* figures: wide images fill the column; tall ones are capped to the screen and centred, the caption wraps to the image */
.prose figure{margin-block:2em;margin-inline:auto;width:fit-content;max-width:100%}
.prose figure img{display:block;width:auto;max-width:100%;max-height:min(78svh,760px);margin-inline:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line);cursor:zoom-in;transition:box-shadow .25s,transform .35s var(--ease)}
/* sized figures: the box is known before the file loads (width capped by the column, the natural width and the screen
   height), so a late image never pushes the text below it */
.prose figure.sz{width:min(100%, var(--iw), calc(min(78svh,760px) * var(--ar)))}
.prose figure.sz img{width:100%;height:auto;max-height:none;aspect-ratio:var(--ar)}
.prose figure picture{display:contents}
.prose figure img:hover{box-shadow:0 0 0 1px var(--line-2),0 18px 50px rgba(40,55,68,.14)}
.prose figure img:active{transform:scale(.99);transition-duration:90ms}
.prose figcaption{width:0;min-width:100%;margin-top:10px;font-size:13px;line-height:1.55;color:var(--paper-2)}
.fig-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fig-pair figure{margin:0}
@media (max-width:560px){.fig-pair{grid-template-columns:1fr}}
@media (min-width:1280px){.prose figure.wide{margin-inline:-6%}}

/* ---------- next / previous ---------- */
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:clamp(72px,9vw,128px)}
.more a:not(.pill){display:grid;gap:10px;align-content:start;padding:22px 24px 26px;border-radius:14px;background:var(--surface);text-decoration:none;min-height:150px;transition:background .25s,transform .35s var(--ease)}
.more a:not(.pill):hover{background:#fff}
.more a:not(.pill):active{transform:scale(.985);transition-duration:90ms}
.more a.next{text-align:right;justify-items:end}
.more .dir{font-size:13px;color:var(--paper-2)}
.more .t{font-size:clamp(17px,1.6vw,22px);line-height:1.25;font-weight:600;text-wrap:balance}
.more a:hover .t{color:var(--signal)}
.more .all{grid-column:1/-1;justify-self:center;margin-top:12px}
@media (max-width:640px){.more{grid-template-columns:1fr}.more a.next{text-align:left;justify-items:start}}

/* ---------- footer: the site's close ---------- */
footer{position:relative;border-top:1px solid var(--line);padding-top:clamp(48px,7vw,90px);background:var(--ink)}
.foot-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;padding-bottom:clamp(28px,4vw,44px);margin-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--line)}
.foot-cta h2{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.04;letter-spacing:-.02em;font-weight:600;max-width:18ch}
.foot-cta p{margin:10px 0 0;color:var(--paper-2);font-size:clamp(16px,1.25vw,18px)}
.foot-link{display:inline-flex;align-items:center;gap:12px;font-size:clamp(18px,1.8vw,24px);font-weight:600;text-decoration:none;padding-block:6px;transition:color .2s}
.foot-link b{font-weight:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-2);text-underline-offset:6px;transition:text-decoration-color .2s}
.foot-link:hover b{text-decoration-color:var(--signal)}
.foot-link span{display:inline-block;transition:transform .35s var(--ease)}
.foot-link:hover{color:var(--signal)}.foot-link:hover span{transform:translateX(4px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}
.foot-grid h2{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-3);font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.foot-grid a{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.foot-grid a:hover{color:var(--signal)}
.foot-grid .ico{width:14px;height:14px;color:var(--paper-3)}
.defn{display:grid;gap:10px;max-width:36ch}
.defn-word{margin:0;font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1}
.defn-word span{font-size:14px;font-weight:300;color:var(--paper-3)}
.defn-word i{font-size:14px;color:var(--signal);font-style:normal}
.defn ol{margin:0;padding-left:1.4em;display:grid;gap:4px;color:var(--paper-2);font-size:14px}
.defn li::marker{color:var(--signal)}
.wordmark{color:var(--paper);margin-top:clamp(56px,8vw,112px);margin-bottom:clamp(32px,4vw,56px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);user-select:none}
.wordmark svg{display:block;width:100%;height:auto}
.foot-base{border-top:1px solid var(--line);font-size:12px;color:var(--paper-3)}
.foot-base .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px))}
.foot-base a{text-decoration:none}.foot-base a:hover{color:var(--signal)}

/* ---------- figure viewer ---------- */
.lb{border:0;padding:0;margin:auto;max-width:min(1400px,96vw);max-height:92svh;background:transparent;overflow:visible}
.lb::backdrop{background:rgba(232,237,241,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb img{display:block;max-width:min(1400px,96vw);max-height:84svh;width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 30px 90px rgba(14,19,23,.25);cursor:zoom-out}
.lb p{margin:12px 0 0;font-size:13px;color:var(--paper-2);text-align:center;max-width:80ch;margin-inline:auto}
.lb[open]{animation:lbIn .38s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}}
.lb-x{position:fixed;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);font:600 18px/1 var(--mono);cursor:pointer}

/* ---------- entrance: one fade for the head, once ---------- */
@media (prefers-reduced-motion:no-preference){
  /* a fade only: nothing slides, so the page never appears to drop or jump as it opens */
  .post-head>*{animation:fadein .45s var(--ease) both}
  @keyframes fadein{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){.lb[open]{animation:none}.progress{display:none}}
@media (prefers-contrast:more){:root{--paper-2:rgba(14,19,23,.88);--paper-3:rgba(14,19,23,.72);--line:rgba(14,19,23,.4)}}
@media print{.bar,.toc,.more,footer{display:none}.post{display:block}}