/* ==========================================================================
   blog.css — huginai.com/blog: the write-ups index and the long-read post.
   Sits on /assets/munin.css (NIGHT QUARRY v2). Tokens only, radius 0, no shadow.
   The header plates are drawn by /assets/blog.js from each post's topic.
   ========================================================================== */

/* ---------- shared ---------- */
.bx-topic{font-family:var(--mono);font-size:var(--fs-plate);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.bx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;font-family:var(--mono);font-size:var(--fs-data);
  color:var(--text-3);font-variant-numeric:tabular-nums slashed-zero}
.bx-meta .dot{width:3px;height:3px;background:var(--face-lit);display:inline-block}

/* the generated header plate (blog.js fills [data-plate]) */
.plate-art{position:relative;margin:0;background:var(--incise);border:1px solid var(--seam);border-top-color:var(--face);overflow:hidden;
  aspect-ratio:10/3}
.plate-art::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 80% at var(--gx,70%) 50%,var(--lit-edge),transparent 70%)}
.plate-art.measured::before{background:radial-gradient(ellipse 55% 80% at var(--gx,70%) 50%,var(--slate-glow),transparent 70%)}
.plate-art svg{position:absolute;inset:0;width:100%;height:100%}
.plate-art .st{fill:none;stroke:var(--text-4);stroke-width:1;vector-effect:non-scaling-stroke}
.plate-art .st.f{stroke:var(--face-lit)}
.plate-art .st.l{stroke:var(--chalk)}
.plate-art .seal{fill:var(--incise);stroke:var(--face-lit);stroke-width:1;vector-effect:non-scaling-stroke}
.plate-art .gl{fill:none;stroke:var(--birch);stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.plate-art .gl-f{fill:var(--birch);stroke:none}
.plate-art.measured .gl{stroke:var(--slate-lit)}
.plate-art.measured .gl-f{fill:var(--slate-lit)}
.plate-art .tick{stroke:var(--face-lit);stroke-width:1;vector-effect:non-scaling-stroke}
/* stylus: strata drawn once left→right at pen speed; the seal is cut in after */
html.bx-anim .plate-art .strata{clip-path:inset(0 100% 0 0)}
html.bx-anim .plate-art.in .strata{clip-path:inset(0 0 0 0);transition:clip-path var(--t-stylus) linear}
html.bx-anim .plate-art .mark{opacity:0;transform:scale(.97);transform-box:fill-box;transform-origin:center}
html.bx-anim .plate-art.in .mark{opacity:1;transform:none;transition:opacity var(--t-cut) var(--ease-chisel) 700ms,transform var(--t-cut) var(--ease-chisel) 700ms}

/* ==========================================================================
   POST
   ========================================================================== */
.post{padding:clamp(2rem,1rem + 3vw,4.5rem) 0 0}
.post-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s3) clamp(24px,4vw,72px);align-items:end}
.post-head{grid-column:2;grid-row:1}
.post-card{grid-column:1;grid-row:1;align-self:start;margin-top:calc(var(--fs-data) * 1.6 + var(--s3) + .6rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--mono);font-size:var(--fs-data);letter-spacing:.04em;color:var(--text-4);margin-bottom:var(--s3)}
.crumbs a{color:var(--chalk);border-bottom:1px solid var(--face-lit);transition:border-color var(--t-micro) var(--ease-band),color var(--t-micro) var(--ease-band)}
.crumbs a:hover{color:var(--birch);border-bottom-color:var(--slate-lit)}
.crumbs span[aria-hidden]{color:var(--text-4)}

/* left: the meta block, read like a catalogue card */
.post-card{border-top:1px solid var(--face);font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);
  font-variant-numeric:tabular-nums slashed-zero}
.post-card .kv{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--seam);align-items:baseline}
.post-card .k{font-size:var(--fs-plate);letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.post-card .v{color:var(--birch)}
.post-card .article-tag{color:var(--birch);letter-spacing:.08em;text-transform:uppercase}
.post-card .share{color:var(--chalk);border-bottom:1px solid var(--face-lit);transition:border-color var(--t-micro) var(--ease-band),color var(--t-micro) var(--ease-band)}
.post-card .share:hover{color:var(--birch);border-bottom-color:var(--slate-lit)}

/* right: title and intro */
.post-head h1{font-weight:300;font-size:clamp(2.1rem,1.3rem + 2.6vw,4rem);line-height:1.06;letter-spacing:0;
  font-variation-settings:'opsz' 72;text-wrap:balance;max-width:24ch}
.post-head .article-intro{margin-top:var(--s4);font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.6;color:var(--chalk);
  max-width:62ch;text-wrap:pretty;font-variation-settings:'opsz' 24}
.post-head .article-intro strong{color:var(--birch);font-weight:500}

.post .plate-art{margin-top:clamp(2rem,1rem + 3vw,4rem)}

/* body grid: contents rail 4 / article 8 */
.post-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4) clamp(24px,4vw,72px);
  padding-top:clamp(2.5rem,1.5rem + 3vw,5rem)}
.post-rail{position:relative}
.post-rail .toc{position:sticky;top:88px}
.toc{border-top:1px solid var(--face)}
.toc summary{list-style:none;cursor:default;font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;font-weight:500;
  font-size:.9375rem;letter-spacing:.06em;color:var(--text-3);padding:.7rem 0;display:flex;align-items:center;gap:.75rem}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;border-top:1px solid var(--seam)}
.toc a{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.25rem;padding:.55rem 0;font-size:var(--fs-small);line-height:1.4;color:var(--text-3);
  transition:color var(--t-micro) var(--ease-band)}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-plate);color:var(--text-4);padding-top:.2rem}
.toc a:hover{color:var(--birch)}
.toc a[aria-current="true"]{color:var(--birch)}
.toc a[aria-current="true"]::before{color:var(--slate-lit)}

.rail-live{margin-bottom:var(--s4);padding:var(--s3);overflow:hidden}
.rail-live .fig-k{margin-bottom:.2rem}
.rail-live .fig-v{font-size:var(--fs-figure-s)}
.rail-live .prov{margin-top:var(--s2);font-size:.75rem}
.rail-live .off{display:none}
.rail-live[data-live-state="offline"] .on{display:none}
.rail-live[data-live-state="offline"] .off{display:block}

/* ---------- the long read ---------- */
.post-body{font-size:1.125rem;line-height:1.72;color:var(--chalk);font-variation-settings:'opsz' 18;min-width:0}
.post-body>*{max-width:68ch}
.post-body>*+*{margin-top:1.15em}
.post-body p{text-wrap:pretty;hanging-punctuation:first}
.post-body strong{color:var(--birch);font-weight:600}
.post-body em{font-style:italic}
.post-body a,.post-body .ext{color:var(--birch);border-bottom:1px solid var(--face-lit);transition:border-color var(--t-micro) var(--ease-band)}
.post-body a:hover,.post-body .ext:hover,.post-body .ext:focus-visible{border-bottom-color:var(--slate-lit)}
.post-body .ext{cursor:pointer}
.post-body code{font-family:var(--mono);font-size:.82em;color:var(--birch);background:var(--incise);border:1px solid var(--seam);padding:.05em .35em}
.post-body{counter-reset:sec}
.post-body h2{margin-top:2.6em;padding-top:1.1em;border-top:1px solid var(--face);font-weight:400;font-size:clamp(1.5rem,1.2rem + .9vw,2rem);line-height:1.2;
  color:var(--birch);font-variation-settings:'opsz' 48;text-wrap:balance;scroll-margin-top:84px}
.post-body>h2{counter-increment:sec}
.post-body>h2::before{content:counter(sec,decimal-leading-zero);display:block;font-family:var(--mono);font-size:var(--fs-plate);letter-spacing:.1em;
  color:var(--text-4);margin-bottom:.6rem;font-weight:400}
.post-body>:first-child{margin-top:0}
.post-body>h2:first-child{margin-top:0}
.post-body h3{margin-top:2em;font-weight:500;font-size:1.1875rem;line-height:1.35;color:var(--birch);font-variation-settings:'opsz' 22}
.post-body h3+p{margin-top:.5em}
.post-body ul,.post-body ol{padding-left:0;list-style:none}
.post-body li{position:relative;padding-left:1.9rem}
.post-body li+li{margin-top:.55em}
.post-body ul>li::before{content:'';position:absolute;left:.25rem;top:.78em;width:.6rem;height:1px;background:var(--text-4)}
.post-body ol{counter-reset:li}
.post-body ol>li{counter-increment:li}
.post-body ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.3em;font-family:var(--mono);font-size:.75rem;color:var(--text-4);letter-spacing:.04em}

/* callout = pull quote: a lit rule, the serif gets bigger, the frame goes away */
.post-body .callout{margin:2.2em 0;padding:.2em 0 .2em clamp(1.1rem,2vw,1.75rem);border-left:2px solid var(--face-lit)}
.post-body .callout p{font-size:clamp(1.1875rem,1.05rem + .45vw,1.4375rem);line-height:1.5;color:var(--birch);font-weight:300;font-variation-settings:'opsz' 36;margin:0}
.post-body .callout p strong{font-weight:500}
.post-body .callout a{border-bottom-color:var(--text-4)}
.post-body>.callout:first-child{margin-top:0}

/* breakouts: tables, figures and plates use the full column */
.post-body>.ledger-wrap,.post-body>.carry-fig,.post-body>.tool-card,.post-body>.verdict-box,.post-body>.data-box,.post-body>.faq,.post-body>.article-cta{max-width:none}

/* tables */
.ledger-wrap{margin:2em 0;overflow-x:auto;border-top:1px solid var(--face);-webkit-overflow-scrolling:touch;scrollbar-color:var(--face-lit) transparent;scrollbar-width:thin}
.ledger{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:540px;font-variant-numeric:tabular-nums slashed-zero}
.ledger caption{caption-side:bottom;text-align:left;font-family:var(--mono);font-size:var(--fs-data);line-height:1.75;color:var(--text-3);padding-top:.9rem;max-width:90ch}
.ledger caption code{font-size:.95em}
.ledger th{font-family:var(--mono);font-size:var(--fs-plate);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  text-align:left;padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--face);vertical-align:bottom}
.ledger td{padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--seam);vertical-align:top;color:var(--chalk);line-height:1.5;
  transition:background var(--t-micro) var(--ease-band)}
.ledger td.num{font-family:var(--mono);font-size:.9rem;color:var(--birch);white-space:nowrap}
.ledger tbody tr:hover td{background:var(--lit-edge)}

/* the carry diagram — its own svg keeps its markup; inks remapped to tokens here */
.carry-fig{margin:2.2em 0;background:var(--incise);border:1px solid var(--seam);border-top-color:var(--face);padding:clamp(1rem,2vw,1.75rem)}
.carry-fig svg{width:100%;height:auto;display:block}
.carry-fig svg text{font-family:var(--serif)}
.carry-fig svg [fill="#e8e8e8"]{fill:var(--birch)}
.carry-fig svg [fill="#8888a0"]{fill:var(--text-3)}
.carry-fig svg [fill="#00ff88"]{fill:var(--slate-lit)}
.carry-fig svg [fill="#f5a623"]{fill:var(--chalk)}
.carry-fig svg rect[fill="#1a1a1d"]{fill:var(--granite)}
.carry-fig svg rect[fill="#141416"]{fill:var(--basalt)}
.carry-fig svg rect{rx:0;ry:0}
.carry-fig svg [stroke="#232328"]{stroke:var(--face)}
.carry-fig svg [stroke="#00ff88"]{stroke:var(--slate-lit)}
.carry-fig svg [stroke="#8888a0"]{stroke:var(--text-4)}
.carry-fig svg [stroke="#f5a623"]{stroke:var(--face-lit);stroke-opacity:1}
.carry-fig svg marker path[fill="#00ff88"]{fill:var(--slate-lit)}
.carry-fig figcaption{margin-top:1rem;font-family:var(--mono);font-size:var(--fs-data);line-height:1.75;color:var(--text-3);max-width:90ch}
@media (max-width:640px){ .carry-fig{overflow-x:auto} .carry-fig svg{width:620px;max-width:none} }

/* FAQ — ruled rows, a cut mark that turns */
.faq{margin-top:3.2em;border-top:1px solid var(--face);padding-top:.4em}
.faq h2{margin-top:0;padding-top:.4em;border-top:0}
.faq details{border-bottom:1px solid var(--seam);transition:background var(--t-micro) var(--ease-band)}
.faq details:hover{background:var(--lit-edge)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;gap:1rem;align-items:baseline;
  padding:1rem 0;font-weight:500;color:var(--birch);font-size:1.0625rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-weight:300;font-size:1.25rem;color:var(--text-3);text-align:right;
  transition:transform var(--t-micro) var(--ease-band)}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0 2.5rem 1.2rem 0;color:var(--chalk);max-width:68ch}

/* data-box (an illustration of a format) — an incised well, mono rows */
.data-box{margin:2em 0;background:var(--incise);border:1px solid var(--seam);padding:.4rem 1.1rem;font-family:var(--mono);font-size:var(--fs-data);
  line-height:1.6;font-variant-numeric:tabular-nums slashed-zero}
.data-box .row{display:grid;grid-template-columns:minmax(8rem,auto) minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--seam)}
.data-box .row:last-child{border-bottom:0}
.data-box .row:first-child .data-key{color:var(--birch);border:1px solid var(--face-lit);padding:.05rem .45rem;justify-self:start;letter-spacing:.1em}
.data-box .row:first-child .data-val{color:var(--chalk);font-style:italic}
.data-key{color:var(--text-3);white-space:pre}
.data-val{color:var(--birch)}
.data-val.green,.data-val.amber{color:var(--birch)}
.post-body .data-box+p{font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);line-height:1.75}

/* tool review plates */
.tool-card{margin:2.2em 0;padding:clamp(1.1rem,2vw,1.75rem);background:var(--granite);border:1px solid var(--face);border-top-color:var(--face-lit)}
.tool-card.winner{border-left:2px solid var(--chalk)}
.tool-header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--seam)}
.tool-name{font-size:1.375rem;font-weight:400;color:var(--birch);font-variation-settings:'opsz' 36}
.tool-badge{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .5rem;
  border:1px solid var(--face-lit);color:var(--chalk);white-space:nowrap}
.tool-desc{color:var(--chalk)}
.tool-desc+.tool-desc{margin-top:.8em}
.tool-card>p:not(.tool-desc){font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--seam)}
.tool-card>p:not(.tool-desc) strong{color:var(--chalk);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-plate)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:1.2rem;border-top:1px solid var(--face)}
.pros,.cons{padding:1rem 1rem 0 0}
.cons{padding-left:1rem;border-left:1px solid var(--seam)}
.pros-label,.cons-label{font-family:var(--mono);font-size:var(--fs-plate);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--text-3);margin-bottom:.6rem}
.pros-label::before{content:'+ ';color:var(--chalk)}
.cons-label::before{content:'− ';color:var(--chalk)}
.pros ul,.cons ul{margin:0}
.pros li,.cons li{font-size:.9375rem;line-height:1.5;color:var(--chalk);padding-left:1.1rem}
.pros li+li,.cons li+li{margin-top:.35em}
.pros ul>li::before,.cons ul>li::before{left:0;width:.45rem}
@media (max-width:560px){ .pros-cons{grid-template-columns:1fr} .cons{padding-left:0;border-left:0;border-top:1px solid var(--seam);margin-top:1rem} }

.verdict-box{margin:2.6em 0;padding:clamp(1.25rem,2.4vw,2rem);background:var(--granite);border:1px solid var(--face);border-top-color:var(--face-lit)}
.verdict-box h2{margin-top:0;padding-top:0;border-top:0}
.verdict-box p{margin-top:.8em;color:var(--chalk)}

/* end plate (was a gradient CTA box) */
.article-cta{margin:3.4em 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:end;
  padding:clamp(1.25rem,2.4vw,2rem);background:var(--granite);border:1px solid var(--face);border-top-color:var(--face-lit)}
.post-body>.article-cta.mid{margin:2.4em 0}
.article-cta h3{margin:0;font-size:1.375rem;font-weight:400;color:var(--birch);font-variation-settings:'opsz' 36;grid-column:1}
.article-cta p{grid-column:1;margin:0;color:var(--chalk);font-size:1rem;line-height:1.6;max-width:62ch}
.article-cta p code{font-size:.85em}
.article-cta-btns{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.post-body a.btn{color:var(--birch);border:1px solid var(--face-lit)}
.post-body a.btn:hover{border-color:var(--birch)}
.post-body a.btn-solid{color:var(--incise);background:var(--birch);border-color:var(--birch)}
.post-body a.btn-solid:hover{background:var(--chalk);border-color:var(--chalk)}
@media (max-width:760px){
  .article-cta{grid-template-columns:1fr}
  .article-cta-btns{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}
}

/* tail of the article: a closing cut and the not-advice line */
.post-end{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--seam);font-family:var(--mono);font-size:var(--fs-data);color:var(--text-4);max-width:68ch}

/* related */
.related{margin-top:clamp(4rem,3rem + 4vw,8rem);border-top:1px solid var(--face);padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) 0 clamp(3rem,2rem + 3vw,6rem)}
.related-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s3) clamp(24px,4vw,72px)}
.related .title{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}

/* ==========================================================================
   rows (related + the index archive share them)
   ========================================================================== */
.bx-rows{list-style:none;border-top:1px solid var(--face)}
.bx-row{position:relative;border-bottom:1px solid var(--seam);transition:background var(--t-micro) var(--ease-band)}
.bx-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--face-lit);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-micro) var(--ease-band)}
.bx-row:hover,.bx-row:focus-within{background:var(--lit-edge)}
.bx-row:hover::after,.bx-row:focus-within::after{transform:scaleX(1)}
.bx-row>a{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 3.5rem;grid-template-areas:"d hx m" "t hx m";grid-template-rows:auto 1fr;gap:.3rem clamp(14px,2vw,32px);align-items:baseline;
  padding:1.15rem .25rem 1.15rem 0}
.bx-row a:focus-visible{outline-offset:-2px}
.bx-row .d,.bx-row .t,.bx-row .m{font-family:var(--mono);font-size:var(--fs-data);color:var(--text-3);font-variant-numeric:tabular-nums slashed-zero}
.bx-row .d{grid-area:d}.bx-row .hx{grid-area:hx}.bx-row .m{grid-area:m}
.bx-row .t{grid-area:t;align-self:start;letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-plate)}
.bx-row .m{text-align:right;white-space:nowrap}
.bx-row h3,.bx-row .h{font-weight:400;font-size:1.1875rem;line-height:1.32;color:var(--birch);font-variation-settings:'opsz' 24;text-wrap:balance;max-width:52ch}
.bx-row p{margin-top:.4rem;font-size:var(--fs-small);line-height:1.55;color:var(--text-3);max-width:72ch;text-wrap:pretty}
.bx-row .arr{display:inline-block;color:var(--text-4);margin-left:.35rem;transition:transform var(--t-micro) var(--ease-band),color var(--t-micro) var(--ease-band)}
.bx-row:hover .arr{transform:translateX(3px);color:var(--birch)}
.bx-row.is-measured .t{color:var(--slate-lit)}

/* ==========================================================================
   INDEX
   ========================================================================== */
.bx-hero .plate-label,.bx-lead>.wrap>.plate-label{flex-wrap:wrap;row-gap:.2rem}
.bx-hero{padding:clamp(2.5rem,1rem + 4vw,5.5rem) 0 clamp(2rem,1rem + 3vw,4rem)}
.bx-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(24px,4vw,80px);align-items:end}
.bx-hero h1{font-weight:300;font-size:var(--fs-display);line-height:1.02;font-variation-settings:'opsz' 72;max-width:14ch;text-wrap:balance}
.bx-hero .lede{margin-top:var(--s3);max-width:46ch}
.bx-hero .figs{grid-template-columns:1fr 1fr}
.bx-hero .figs>.fig:nth-child(3){grid-column:1/-1;padding-left:0;border-left:0}
.bx-hero .figs .fig-v{font-size:var(--fs-figure-s)}
.bx-hero .figs .fig-v.date{font-size:clamp(1.35rem,1.1rem + .9vw,2rem);letter-spacing:-.02em}
.bx-hero .prov{margin-top:var(--s2)}

/* lead story */
.bx-lead{padding-bottom:clamp(3rem,2rem + 3vw,6rem)}
.lead-plate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--granite);border:1px solid var(--face);border-top-color:var(--face-lit)}
.lead-plate .plate-art{aspect-ratio:auto;min-height:100%;border:0;border-right:1px solid var(--face)}
.lead-body{padding:clamp(1.25rem,1rem + 2vw,3rem)}
.lead-body .bx-meta{margin-bottom:var(--s3)}
.lead-body h2{font-weight:300;font-size:clamp(1.75rem,1.2rem + 1.8vw,3rem);line-height:1.1;font-variation-settings:'opsz' 60;text-wrap:balance;max-width:24ch}
.lead-body h2 a{transition:color var(--t-micro) var(--ease-band)}
.lead-body h2 a:hover{color:var(--chalk)}
.lead-body>p.body{margin-top:var(--s3);font-size:var(--fs-small)}
.lead-body .figs-k{margin-top:var(--s4);margin-bottom:var(--s1)}
.lead-body .figs{margin-top:0}
.lead-body .figs .fig{padding-top:var(--s2);padding-bottom:var(--s2)}
.lead-body .prov{margin-top:var(--s2)}
.lead-live{margin-top:var(--s4);padding:var(--s2) var(--s3);display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:baseline;
  font-family:var(--mono);font-size:var(--fs-data);color:var(--chalk);font-variant-numeric:tabular-nums slashed-zero}
.lead-live b{font-weight:500;color:var(--slate-lit)}
.lead-live .off{display:none}
.lead-live[data-live-state="offline"] .on{display:none}
.lead-live[data-live-state="offline"] .off{display:inline}
.lead-live.weathered b,.lead-live.worn b{color:var(--chalk)}
.lead-cta{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.6rem}

/* archive: topic register 4 / rows 8 */
.bx-archive{padding:clamp(3rem,2rem + 3vw,6rem) 0 clamp(4rem,3rem + 4vw,8rem);border-top:1px solid var(--seam)}
.archive-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4) clamp(24px,4vw,80px)}
.register{align-self:start}
@media (min-height:1100px) and (min-width:1101px){ .register{position:sticky;top:88px} }
.register .title{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
.register .body{margin-top:var(--s2);font-size:var(--fs-small)}
.reg-list{list-style:none;margin-top:var(--s4)}
.reg-list li{border:0}
.reg-btn{display:grid;grid-template-columns:minmax(0,1fr) 2rem;grid-template-rows:auto 3px;gap:.35rem .75rem;width:100%;min-height:44px;padding:.6rem 0 .65rem;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--chalk);font-family:var(--mono);font-size:var(--fs-data);letter-spacing:.06em;text-transform:uppercase;
  transition:color var(--t-micro) var(--ease-band),background var(--t-micro) var(--ease-band)}
.reg-btn .c{text-align:right;color:var(--text-3);font-variant-numeric:tabular-nums slashed-zero}
.reg-btn .bar{grid-column:1/-1;height:3px;background:var(--seam);position:relative}
.reg-btn .bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--face-lit);transition:background var(--t-micro) var(--ease-band)}
.reg-btn:hover{color:var(--birch)}
.reg-btn:hover .bar i{background:var(--chalk)}
.reg-btn[aria-pressed="true"]{color:var(--birch)}
.reg-btn[aria-pressed="true"] .bar i{background:var(--birch)}
.reg-btn[aria-pressed="true"] .c{color:var(--birch)}
.reg-btn.is-all{font-weight:500}
.reg-state{margin-top:var(--s2)}

.month{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:var(--s4) 0 var(--s1)}
.month:first-child{padding-top:0}
.month h2{font-weight:400;font-size:1.25rem;font-variation-settings:'opsz' 30;color:var(--birch)}
.month .n{font-family:var(--mono);font-size:var(--fs-data);color:var(--text-4)}
.month[hidden],.bx-row[hidden]{display:none}
.archive-empty{padding:var(--s5) 0;font-family:var(--mono);font-size:var(--fs-data);color:var(--chalk);border-top:1px solid var(--face)}
.archive-empty button{background:none;border:0;border-bottom:1px solid var(--face-lit);color:var(--birch);font:inherit;cursor:pointer;margin-left:.4rem}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (min-width:2000px){
  .post-body{font-size:1.1875rem}
  .bx-row h3,.bx-row .h{font-size:1.3125rem}
}
@media (max-width:1100px){
  .post-top,.post-grid,.related-grid,.archive-grid{grid-template-columns:minmax(0,1fr)}
  .post-top{align-items:start}
  .post-head,.post-card{grid-column:1;grid-row:auto}
  .post-card{margin-top:0}
  .post-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}
  .post-card .kv{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
  .post-rail .toc,.register{position:static}
  .toc summary{cursor:pointer}
  .toc summary::after{content:'+';margin-left:auto;font-family:var(--mono);font-variant:normal;color:var(--text-3)}
  .toc[open] summary::after{content:'−'}
  .post-grid{padding-top:var(--s4)}
  .reg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));column-gap:var(--s3)}
}
@media (max-width:960px){
  .bx-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lead-plate{grid-template-columns:minmax(0,1fr)}
  .lead-plate .plate-art{aspect-ratio:16/7;min-height:0;border-right:0;border-bottom:1px solid var(--face)}
}
@media (max-width:720px){
  .bx-row>a{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"d t m" "hx hx hx";grid-template-rows:auto auto;column-gap:.9rem;row-gap:.45rem;padding:1rem 0}
  .bx-row .t{align-self:baseline}
  .reg-list{grid-template-columns:1fr 1fr;column-gap:var(--s3)}
  .reg-btn{font-size:.72rem;letter-spacing:.04em}
  .bx-row p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .post .plate-art{aspect-ratio:2/1}
  .post-body{font-size:1.0625rem;line-height:1.7}
  .post-body li{padding-left:1.5rem}
}
@media (max-width:560px){
  .lead-body .figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lead-body .figs>.fig{padding-right:.5rem}
  .lead-body .figs>.fig+.fig{padding-left:.6rem}
  .lead-body .figs .fig-v{font-size:1.65rem}
  .post-card{grid-template-columns:minmax(0,1fr)}
  .post-card .kv{grid-template-columns:6rem minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html.bx-anim .plate-art .strata{clip-path:none}
  html.bx-anim .plate-art .mark{opacity:1;transform:none}
}
