/* Blog (DECISIONS #17, ported from purchasebarcode's WP3) — loaded on /blog pages only,
   after site.css, with ?v=filemtime. The tokens (--s-N spacing, --t-N type, --line, --mute,
   --panel, --signal) and the page chrome (.wrap, .page-head, .eyebrow, .lede, .prose, .crumbs,
   .btn, .note) are site.css's — Redesign A — and this file only lays out the blog's own blocks.
   Re-tokenised from the sibling's sheet, whose variables (--s4, --rule, --ink-2, --fs-xs …) do
   not exist here; measured before the port, every one of them read as 0 in this site's css. */

/* ---------- index and category ---------- */
.blog-head .crumbs,.post-head .crumbs{margin-bottom:var(--s-4)}
.blog-list{padding:0 var(--s-6) var(--s-8)}
.blog-cats{margin-bottom:var(--s-6);border-bottom:1px solid var(--line)}
.blog-cats ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.blog-cats a{display:inline-block;padding:var(--s-3) 0;font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid transparent}
.blog-cats a:hover{color:var(--signal);text-decoration:none}
.blog-cats a[aria-current="page"]{color:var(--ink);border-color:var(--signal)}
.blog-empty{padding:var(--s-6) 0}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-6);row-gap:var(--s-7)}
.post-card{display:grid;grid-template-rows:auto 1fr;gap:var(--s-4);min-width:0;border-top:1px solid var(--ink);padding-top:var(--s-4)}
.post-card .thumb{display:block;background:var(--panel);aspect-ratio:16/9;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .t{display:grid;gap:var(--s-2);align-content:start;min-width:0}
.post-card .cap{font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.post-card-title{font-size:var(--t-md);font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.post-card-title a:hover{color:var(--signal)}
.post-card p{font-size:var(--t-sm);line-height:1.5}

/* Paginator::html() */
.pager{margin-top:var(--s-8);border-top:1px solid var(--line);padding-top:var(--s-5)}
.pager ul{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--s-3);border:1px solid var(--line);font-family:var(--font-mono);font-size:var(--t-xs)}
.pager a:hover{border-color:var(--ink);text-decoration:none}
.pager span[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .gap{padding:0 var(--s-2);color:var(--mute)}

/* ---------- a post ---------- */
.preview-banner{background:var(--signal);color:var(--white);padding:var(--s-3) 0;font-size:var(--t-sm)}
.preview-banner .wrap{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center}
.preview-banner .link{color:var(--white);border-color:var(--white)}
.post-head h1{max-width:22em}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.04em;color:var(--mute)}
.post-meta .link{color:var(--ink)}
.post-cover img{width:100%;height:auto;background:var(--panel)}
.post-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:var(--s-8);padding:var(--s-7) 0 var(--s-6);align-items:start}
.post-layout>*{min-width:0}
.post-body{font-size:var(--t-md);line-height:1.6;overflow-wrap:break-word}
.post-body h4{font-size:var(--t-base);font-weight:600;margin-top:var(--s-5);color:var(--mute)}
.post-body h2,.post-body h3,.post-body h4{scroll-margin-top:calc(var(--head) + 24px)}
.post-body blockquote{border-left:3px solid var(--signal);padding:var(--s-2) 0 var(--s-2) var(--s-5);margin:0 0 var(--s-4);max-width:66ch}
.post-body blockquote p+p{margin-top:var(--s-3)}
.post-body code{font-family:var(--font-mono);font-size:.9em;background:var(--panel);padding:1px 4px;overflow-wrap:anywhere}
.post-body pre{background:var(--panel);border:1px solid var(--line);padding:var(--s-4);margin:0 0 var(--s-4);overflow-x:auto;max-width:100%}
.post-body pre code{background:transparent;padding:0;font-size:var(--t-sm);line-height:1.55;white-space:pre;overflow-wrap:normal}
.post-body hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}
.post-body .post-fig{margin:var(--s-6) 0}
.post-body .post-fig img{width:100%;height:auto;background:var(--panel)}
.post-body .toc{border:1px solid var(--ink);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-6);max-width:66ch}
.post-body .toc .cap{font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--s-3)}
.post-body .toc ol{list-style:decimal;padding-left:var(--s-5);margin:0;color:var(--mute)}
.post-body .toc li{padding:2px 0;margin:0}
.post-body .toc a{border:0}
.post-body .toc a:hover{color:var(--signal)}
.post-aside .eyebrow{margin-top:var(--s-5)}
.post-aside .eyebrow:first-child{margin-top:0}
.post-tags,.post-note{font-size:var(--t-sm);margin-top:var(--s-2)}
.post-cta{padding-bottom:var(--s-8)}
.post-cta .note{margin-top:0}
.post-cta-links{margin-top:var(--s-5)}
.blog-related{padding:var(--s-7) 0 var(--s-8);border-top:1px solid var(--line)}
.blog-related h2{font-size:var(--t-xl);margin-bottom:var(--s-6)}

@media (max-width:1080px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-layout{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
}
@media (max-width:600px){
  .blog-list{padding:0 var(--s-4) var(--s-7)}
  .post-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
  .post-body{font-size:var(--t-base)}
  .post-cta-links .btn{width:100%}
}