/* Blog (growth WP3) — loaded on /blog pages only, after site.css, with ?v=filemtime.
   Direction B: the tokens, hairlines, radius 0 and the one signal colour come
   from site.css; this file only lays out the blog's own blocks. */

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

/* Paginator::html() */
.pager{margin-top:var(--s8);border-top:1px solid var(--rule);padding-top:var(--s5)}
.pager ul{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--s3);border:1px solid var(--rule);font-family:var(--font-mono);font-size:var(--fs-xs)}
.pager a:hover{border-color:var(--ink)}
.pager span[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .gap{padding:0 var(--s2);color:var(--ink-2)}

/* ---------- a post ---------- */
.preview-banner{background:var(--signal-text);color:#FFFFFF;padding:var(--s3) 0;font-size:var(--fs-sm)}
.preview-banner .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.preview-banner .link{color:#FFFFFF;border-color:#FFFFFF}
.post-head .cap{display:block;margin-bottom:var(--s4)}
.post-head h1{max-width:22em}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink-2)}
.post-meta .link{color:var(--ink)}
.post-cover{margin-top:var(--s7)}
.post-cover img{width:100%;height:auto;background:var(--paper-2)}
.post-layout{padding:var(--s7) 0 var(--s6)}
.post-body{font-size:var(--fs-md);line-height:1.6;overflow-wrap:break-word}
.post-body h4{font-size:var(--fs-base);font-weight:600;margin-top:var(--s5);color:var(--ink-2)}
.post-body h2,.post-body h3,.post-body h4{scroll-margin-top:var(--s7)}
.article .post-body ol{color:var(--ink-2);max-width:66ch;list-style:decimal;padding-left:var(--s5)}
.article .post-body ol li{padding:6px 0 6px var(--s2);border-bottom:1px solid var(--rule)}
.article .post-body li ul,.article .post-body li ol{margin-top:6px}
.article .post-body li li:last-child{border-bottom:0}
.article .post-body li ul li::before{background:transparent;border:1px solid var(--ink)}
.post-body blockquote{border-left:3px solid var(--signal);padding:var(--s2) 0 var(--s2) var(--s5);max-width:66ch}
.post-body blockquote p{color:var(--ink)}
.post-body blockquote p+p{margin-top:var(--s3)}
.post-body code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:1px 4px;overflow-wrap:anywhere}
.post-body pre{background:var(--paper-2);border:1px solid var(--rule);padding:var(--s4);overflow-x:auto;max-width:100%}
.post-body pre code{background:transparent;padding:0;font-size:var(--fs-sm);line-height:1.55;white-space:pre;overflow-wrap:normal}
.post-body hr{border:0;border-top:1px solid var(--rule);margin:var(--s7) 0}
.post-body .post-fig{margin:var(--s6) 0}
.post-body .post-fig img{width:100%;height:auto;background:var(--paper-2)}
.post-body .toc{border:1px solid var(--ink);padding:var(--s4) var(--s5);max-width:66ch}
.post-body .toc .cap{margin-bottom:var(--s3)}
.post-body .toc ol{list-style:decimal;padding-left:var(--s5);color:var(--ink-2)}
.post-body .toc li{padding:2px 0;border:0}
.post-body .toc a{border:0}
.post-body .toc a:hover{color:var(--signal-text)}
.post-aside .cap.block+p{margin-bottom:var(--s6)}
.post-tags{font-size:var(--fs-sm)}
.post-note{font-size:var(--fs-sm)}
.post-cta{padding-bottom:var(--s8)}
.post-cta .note{margin-top:0}
.post-cta-links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.blog-related .h2{margin-bottom:var(--s6)}

@media (max-width:1024px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  .post-body{font-size:var(--fs-base)}
  .post-cta-links .btn{width:100%}
}