/* Blog index, post page and newsletter partial. Loaded only by the blog templates.
   Tokens and shared classes (.btn, .wrap, .sr-only) come from c-chrome.css and the legacy bundle.
   UI/UX round 2026-11-05: editorial index (featured + cover grid), reading-first post page. */

.bl-page{--bl-ease:cubic-bezier(.22,1,.36,1);padding-top:0;padding-bottom:var(--space-8)}
.bl-page h1,.bl-page h2,.bl-page h3{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;color:var(--fg);text-wrap:balance;overflow-wrap:break-word}
.bl-first,.bl-listing .bl-page{padding-bottom:0}
.bl-link{color:inherit;text-decoration:none}
.bl-link:hover{color:var(--acc)}
.bl-link:focus-visible{outline:0}
.bl-link::after{content:"";position:absolute;inset:0}
.bl-filter[hidden],.bl-featured[hidden],.bl-row[hidden],.bl-all[hidden]{display:none}

/* Shared meta line: category in the accent, the rest quiet */
.bl-meta{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:2px;margin:0;font-family:var(--sans);font-size:var(--text-sm);line-height:1.5;color:var(--fg3)}
.bl-cat{color:var(--acc);font-weight:500}
.bl-lede{margin:0;max-width:62ch;font-size:var(--text-lg);line-height:1.55;color:var(--fg2);text-wrap:pretty}
.bl-excerpt{margin:0;font-size:var(--text-lg);line-height:1.55;color:var(--fg2);text-wrap:pretty}
.bl-empty{padding:var(--space-8) 0;color:var(--fg2)}

/* ---------- Index: first screen = heading + latest article ---------- */
.bl-top{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-5) 0 var(--space-7)}
.bl-head{display:grid;gap:var(--space-4)}
.bl-head h1{margin:0;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.035em}

.bl-featured{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.bl-featured-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.bl-featured-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.bl-featured-body{display:flex;flex-direction:column;gap:var(--space-4)}
.bl-featured-text{display:grid;gap:var(--space-4)}
.bl-featured h2{margin:0;font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.03em}
.bl-featured.no-cover{max-width:68ch}

/* Index: list head with the category filter, then the grid */
.bl-listhead{display:flex;flex-direction:column;gap:var(--space-4);margin:0 0 var(--space-6)}
.bl-section-title{margin:0;font-size:var(--text-h2);line-height:1.1;letter-spacing:-.025em}
.bl-filter{display:flex;flex-wrap:wrap;gap:6px;margin:-3px;padding:3px}
.bl-chip{appearance:none;min-height:40px;padding:0 11px;border:1px solid var(--line3);border-radius:var(--r-pill);background:transparent;color:var(--fg2);font:500 13px/1 var(--sans);cursor:pointer;white-space:nowrap}
.bl-chip:hover{border-color:var(--acc);color:var(--fg)}
.bl-chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bl-chip[aria-pressed="true"]{background:var(--acc-fill);border-color:var(--acc-fill);color:var(--ink)}
.bl-count{font-variant-numeric:tabular-nums;opacity:.75;margin-left:2px}
@media (pointer:coarse){.bl-chip{min-height:44px}}

.bl-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5) var(--space-5)}
.bl-row{position:relative;display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.bl-row-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
.bl-row-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.bl-row-main{display:grid;gap:var(--space-2);align-content:start}
.bl-row h3{margin:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.bl-row:hover h3,.bl-featured:hover h2{color:var(--acc)}
.bl-row:has(.bl-link:focus-visible),.bl-featured:has(.bl-link:focus-visible){outline:2px solid var(--acc);outline-offset:6px;border-radius:var(--r-md)}
.bl-row .bl-meta{font-size:13px;column-gap:var(--space-3)}
.bl-row .bl-cat{flex:0 0 100%}

@media (prefers-reduced-motion:no-preference){
  .bl-row{transition:transform .25s var(--bl-ease)}
  .bl-row:hover{transform:translateY(-2px)}
  .bl-featured-media img,.bl-row-media img{transition:transform .6s var(--bl-ease)}
  .bl-featured:hover .bl-featured-media img,.bl-row:hover .bl-row-media img{transform:scale(1.03)}
}

@media (min-width:640px){
  .bl-top{min-height:calc(100svh - var(--hm-head,129px))}
  .bl-top:has(.bl-featured[hidden]){min-height:0}
  .bl-featured{flex:1 1 auto;grid-template-rows:minmax(0,1fr) auto}
  .bl-featured-media{aspect-ratio:auto;min-height:260px}
}
@media (min-width:1024px){
  .bl-top{min-height:calc(100svh - var(--hm-head,77px));gap:var(--space-7);padding-bottom:var(--space-7)}
  .bl-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--space-7);align-items:end}
  .bl-featured{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:minmax(0,1fr);column-gap:var(--space-7);align-items:stretch}
  .bl-featured-media{min-height:340px}
  .bl-featured.no-cover{max-width:none;grid-template-columns:minmax(0,5fr)}
  .bl-featured-body{justify-content:center;padding-block:var(--space-2)}
  .bl-featured .bl-meta{font-size:var(--text-base)}
}
@media (max-width:1100px){.bl-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.bl-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-5)}}
@media (max-width:640px){
  .bl-top{padding-top:var(--space-4)}
  .bl-lede,.bl-excerpt{font-size:var(--text-base)}
  .bl-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .bl-filter::-webkit-scrollbar{display:none}
  .bl-chip{flex:none}
  .bl-rows{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .bl-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-4);align-items:start}
  .bl-row.no-cover{grid-template-columns:minmax(0,1fr)}
  .bl-row-media{border-radius:var(--r-sm)}
  .bl-row h3{font-size:var(--text-base)}
}

/* ---------- Post: head ---------- */
.bl-post-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding:var(--space-3) 0 var(--space-7)}
.bl-post-title{display:flex;flex-direction:column;min-width:0}
.bl-back{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--fg3);text-decoration:none}
.bl-back:hover{color:var(--acc)}
.bl-post-title h1{margin:var(--space-3) 0 var(--space-4);max-width:24ch;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em}
.bl-post-title .bl-lede{font-size:19px;max-width:56ch}
.bl-post-head.no-cover .bl-post-title{max-width:820px}
.bl-cover{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.bl-cover img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  .bl-post-head:not(.no-cover){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-7);align-items:center;padding:var(--space-4) 0 var(--space-8)}
}

/* ---------- Post: reading column + contents ---------- */
.bl-post-grid{display:grid;grid-template-columns:minmax(0,65ch) minmax(0,240px);justify-content:space-between;column-gap:var(--space-7);font-size:18px}
.bl-post-main{min-width:0}

/* Table of contents, built by agicad.js into #article-toc */
.bl-aside{min-width:0}
.bl-aside .toc{position:sticky;top:96px;max-height:calc(100vh - 128px);overflow-y:auto;margin:0;padding:0 0 0 var(--space-4);background:none;border:0;border-left:1px solid var(--line);border-radius:0}
.bl-aside .toc-title{margin:0 0 var(--space-2);font:600 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--fg)}
.bl-aside .toc-title::before{content:none}
.bl-aside .toc ol{list-style:none;margin:0;padding:0;display:block}
.bl-aside .toc li{margin:0;padding:0;list-style:none}
.bl-aside .toc li::before,.bl-aside .toc li::marker,.bl-aside .toc a::before{content:none;display:none}
.bl-aside .toc a{display:block;padding:5px 0;font:400 14px/1.35 var(--sans);color:var(--fg3);text-decoration:none}
.bl-aside .toc a:hover{color:var(--acc)}
.bl-aside .toc-h3 a{padding-left:var(--space-3);font-size:13px}

/* Reading column. Post bodies are stored HTML with plain tags, some with old utility classes. */
.bl-prose.prose{max-width:65ch;margin:0;font-family:var(--sans);font-size:18px;line-height:1.72;color:var(--fg2);overflow-wrap:break-word}
.bl-prose.prose>*+*{margin-top:1.2em}
.bl-prose p,.bl-prose li,.bl-prose td{color:var(--fg2)}
.bl-prose strong,.bl-prose em,.bl-prose h4,.bl-prose .text-white{color:var(--fg)}
.bl-prose h2,.bl-prose h3,.bl-prose h4{font-family:var(--sans);color:var(--fg);line-height:1.2;text-wrap:balance;scroll-margin-top:96px}
.bl-prose h2{margin:2.6em 0 0;padding:0;border:0;font-size:28px;font-weight:600;letter-spacing:-.025em}
.bl-prose h3{margin:2em 0 0;font-size:21px;font-weight:600;letter-spacing:-.015em}
.bl-prose h4{margin:1.7em 0 0;font-size:18px;font-weight:600;letter-spacing:-.005em}
.bl-prose h2::before,.bl-prose h3::before{content:none}
.bl-prose h2+*,.bl-prose h3+*,.bl-prose h4+*{margin-top:.7em}
.bl-prose>h2:first-child{margin-top:0}
.bl-prose .lead{font-size:20px;line-height:1.6;color:var(--fg)}
.bl-prose a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bl-prose a:hover{text-decoration-thickness:2px}
.bl-prose a>i.ri-arrow-right-line{display:none}
.bl-prose ul,.bl-prose ol{padding-left:1.4em}
.bl-prose li+li{margin-top:.45em}
.bl-prose img{max-width:100%;height:auto}
.bl-prose figure{margin:2em 0}
.bl-prose hr{margin:2.5em 0;border:0;border-top:1px solid var(--line)}
.bl-prose blockquote,.bl-prose .callout,.bl-prose .notice{margin:1.6em 0;padding:var(--space-1) 0 var(--space-1) var(--space-5);background:none;border:0;border-left:2px solid var(--acc);border-radius:0;color:var(--fg2)}
.bl-prose blockquote p{color:var(--fg)}
.bl-prose .callout>:first-child,.bl-prose .notice>:first-child{margin-top:0}
.bl-prose .callout>:last-child,.bl-prose .notice>:last-child{margin-bottom:0}

/* Code: inline chip, blocks scroll inside themselves and never widen the page */
.bl-prose code{font-family:var(--mono);font-size:.86em;padding:.14em .4em;border-radius:6px;background:var(--card2);color:var(--fg);border:1px solid var(--line);overflow-wrap:anywhere}
.bl-prose pre,.bl-prose pre:has(>code),.bl-prose pre:not(:has(>code)){display:block;max-width:100%;margin:1.7em 0;padding:var(--space-4) var(--space-5);overflow:auto hidden;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-md);font-family:var(--mono);font-size:14px;line-height:1.65;color:var(--fg);white-space:pre;tab-size:4;box-shadow:none}
.bl-prose pre>code{display:block;width:max-content;min-width:100%;max-width:none;overflow:visible;padding:0;margin:0;background:none;border:0;border-radius:0;font-size:inherit;line-height:inherit;color:inherit;white-space:pre;overflow-wrap:normal}
.bl-prose pre[data-lang],.bl-prose pre[data-lang]:has(>code){padding-top:var(--space-3)}
.bl-prose pre[data-lang]::before{content:attr(data-lang);display:block;position:sticky;left:0;margin:0 0 var(--space-3);font:500 12px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--fg4);background:none;border:0;padding:0;width:auto;height:auto}
.bl-prose pre[data-lang]>code{padding-top:0}
.bl-prose pre:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Tables scroll inside themselves, the page never does */
.bl-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;margin:1.7em 0;border:1px solid var(--line2);border-radius:var(--r-md);border-collapse:collapse;font-size:15px;line-height:1.5}
.bl-prose.prose th,.bl-prose.prose td{min-width:110px;padding:var(--space-3) var(--space-4);border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;background:none}
.bl-prose.prose thead th{background:var(--card2);color:var(--fg);font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;border-bottom-color:var(--line3)}
.bl-prose.prose tbody tr:last-child td{border-bottom:0}
.bl-prose td code,.bl-prose th code{overflow-wrap:normal}

/* End of post: one quiet action, then more reading */
.bl-cta{max-width:65ch;margin:var(--space-8) 0 0;padding-top:var(--space-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.bl-cta p{margin:0;flex:1 1 280px;font-size:var(--text-xl);font-weight:600;line-height:1.3;color:var(--fg);text-wrap:balance}
.bl-cta .btn{flex:none}
.bl-related{margin-top:var(--space-9)}
.bl-related-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-5);margin-bottom:var(--space-6)}
.bl-related .bl-section-title{font-size:var(--text-h3)}
.bl-related .bl-rows{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-all-link{display:inline-flex;align-items:center;min-height:44px;color:var(--acc);font-size:var(--text-sm);text-decoration:none}
.bl-all-link:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .bl-post-grid{grid-template-columns:minmax(0,1fr)}
  .bl-post-main,.bl-prose.prose,.bl-cta{max-width:none}
  .bl-prose.prose,.bl-cta{max-width:72ch}
  .bl-aside{display:none}
}
@media (max-width:820px){.bl-related .bl-rows{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .bl-post-grid{font-size:17px}
  .bl-prose.prose{font-size:17px;line-height:1.7}
  .bl-prose h2{font-size:24px}
  .bl-prose h3{font-size:19px}
  .bl-prose pre,.bl-prose pre:has(>code),.bl-prose pre:not(:has(>code)){font-size:13px;padding:var(--space-3) var(--space-4)}
  .bl-post-title .bl-lede{font-size:var(--text-base)}
  .bl-cta .btn{width:100%}
  .bl-related{margin-top:var(--space-8)}
}

/* ---------- Newsletter partial: one quiet row ---------- */
.bl-nl{padding:var(--space-6) 0 var(--space-7)}
.bl-nl-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line)}
.bl-nl-copy{flex:1 1 320px}
.bl-nl h2{margin:0 0 var(--space-1);font:600 18px/1.3 var(--sans);letter-spacing:0;color:var(--fg)}
.bl-nl-copy p{margin:0;max-width:56ch;font-size:15px;line-height:1.5;color:var(--fg3)}
.bl-nl-action{flex:0 1 420px;min-width:0}
.bl-nl .nl-form{display:flex;gap:var(--space-2);margin:0;max-width:none}
.bl-nl .nl-email{flex:1 1 auto;min-width:0;width:auto;min-height:44px;padding:0 var(--space-4);background:transparent;border:1px solid var(--line3);border-radius:var(--r-pill);color:var(--fg);font:400 16px/1.2 var(--sans)}
.bl-nl .nl-email::placeholder{color:var(--fg4);opacity:1}
.bl-nl .nl-email:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.bl-nl .btn{flex:none;min-height:44px}
.bl-nl .nl-msg{margin:var(--space-2) 0 0;font-size:14px;color:var(--fg2)}
.bl-nl .nl-msg.bad{color:var(--danger)}
@media (max-width:640px){
  .bl-nl .nl-form{flex-wrap:wrap}
  .bl-nl .nl-email{flex-basis:100%}
  .bl-nl .btn{width:100%}
  .bl-nl-action{flex-basis:100%}
}

/* QA light 2026-11-05: light-scoped only, dark values untouched.
   Control borders used --line3 (#bdb49e, 1.86:1 on the cream page); controls need >=3:1 (WCAG 1.4.11). #8a826d = 3.45:1 on --bg. */
html[data-theme="light"] .bl-chip{border-color:#8a826d}
html[data-theme="light"] .bl-chip:hover{border-color:var(--acc)}
/* selected chip: amber fill is 1.81:1 on cream, so the selected state gets a dark-amber edge (5.5:1) */
html[data-theme="light"] .bl-chip[aria-pressed="true"]{border-color:var(--acc)}
html[data-theme="light"] .bl-nl .nl-email{border-color:#8a826d}
html[data-theme="light"] .bl-nl .nl-email:focus-visible{border-color:var(--acc)}
html[data-theme="light"] .bl-nl .btn-ghost,
html[data-theme="light"] .bl-cta .btn-ghost{border-color:#8a826d}
/* code blocks and tables: card (#fffdf7) on bg (#f7f3ea) with a --line2 edge is 1.36:1, so the block barely separates; use the --line3 edge */
html[data-theme="light"] .bl-prose pre,
html[data-theme="light"] .bl-prose pre:has(>code),
html[data-theme="light"] .bl-prose pre:not(:has(>code)),
html[data-theme="light"] .bl-prose table{border-color:var(--line3)}