/* The blog: a grid of cards, and a post with its promotion beside and inside. */
.blog-wrap{max-width:1180px}
.blog-wrap h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;margin:0 0 12px}
.blog-lead{max-width:44em;margin-bottom:22px}

.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.blog-cats a{padding:8px 14px;border-radius:999px;border:1px solid var(--hair-2);color:var(--txt-2);font-size:13.5px;font-weight:600;text-decoration:none}
.blog-cats a:hover{color:var(--txt);border-color:var(--hi-line)}
.blog-cats a.on{color:var(--prime-txt);background:var(--prime-bg);border-color:var(--prime-bg)}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blog-card{
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--tile);border:1px solid var(--hair);box-shadow:0 1px 0 var(--tile-hi) inset;transition:border-color .15s,transform .15s;
}
.blog-card:hover{border-color:var(--hi-line);transform:translateY(-2px);text-decoration:none}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--tile-2)}
.blog-card-in{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.blog-card h2{font-size:17px;line-height:1.35;margin:0;color:var(--txt);letter-spacing:-.01em}
.blog-card p{margin:0;font-size:14px;line-height:1.55;color:var(--txt-2);flex:1}
.blog-more{font-size:13.5px;font-weight:600;color:var(--up)}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--txt-3)}
.blog-cat{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--up);text-decoration:none}
.blog-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.blog-pager a{min-width:38px;padding:9px 12px;text-align:center;border-radius:10px;border:1px solid var(--hair-2);color:var(--txt-2);text-decoration:none}
.blog-pager a.on{background:var(--prime-bg);color:var(--prime-txt);border-color:var(--prime-bg)}

/* ------------------------------------------------------------------ post */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.post-head h1{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:14px 0 12px;letter-spacing:-.03em}
.post-lead{font-size:17px;line-height:1.65;color:var(--txt-2);margin:0 0 22px}
.post-cover{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--hair)}

.post-banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0;padding:20px 22px;border-radius:16px;
  border:1px solid var(--hi-line);background:var(--hi-glow),var(--tile-2);
}
.post-banner b{display:block;font-size:17px;color:var(--txt);margin-bottom:4px}
.post-banner p{margin:0;font-size:14px;line-height:1.55;color:var(--txt-2)}
.post-banner .btn{flex:0 0 auto}

.post-toc{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;padding:18px 20px;border-radius:14px;background:var(--tile);border:1px solid var(--hair)}
.post-toc b{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.post-toc a{color:var(--txt-2);font-size:14.5px}

.post-text{font-size:17px;line-height:1.8;color:var(--txt-2)}
.post-text h2{font-size:clamp(22px,2.6vw,28px);line-height:1.25;color:var(--txt);margin:38px 0 12px;letter-spacing:-.02em;scroll-margin-top:90px}
.post-text h3{font-size:19px;color:var(--txt);margin:28px 0 10px}
.post-text p{margin:0 0 16px}
.post-text ul,.post-text ol{margin:0 0 16px;padding-left:22px}
.post-text li{margin-bottom:6px}
.post-text b{color:var(--txt)}
.post-text a{color:var(--up)}
.post-text blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--up);background:var(--tile);border-radius:0 12px 12px 0;color:var(--txt)}

.post-cta{
  display:flex;flex-direction:column;gap:8px;margin:28px 0;padding:22px;border-radius:16px;
  border:1px solid var(--hi-line);background:var(--hi-glow),var(--tile-2);
}
.post-cta-k{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--up)}
.post-cta b{font-size:19px;color:var(--txt)}
.post-cta p{margin:0;font-size:15px;line-height:1.6}
.post-cta .row,.post-end .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.post .faq{display:grid;gap:10px;margin-bottom:20px}
.post .faq details{border:1px solid var(--hair);border-radius:14px;background:var(--tile)}
.post .faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;color:var(--txt);display:flex;gap:12px}
.post .faq summary::-webkit-details-marker{display:none}
.post .faq summary::after{content:"+";margin-left:auto;color:var(--up);font-size:19px;line-height:1}
.post .faq details[open]{border-color:var(--hi-line)}
.post .faq details[open] summary::after{content:"−"}
.post .faq .a{padding:0 18px 16px;font-size:15px;line-height:1.65;color:var(--txt-2)}
.post > h2{font-size:24px;margin:34px 0 14px;color:var(--txt)}
.post-source{font-size:13px;color:var(--txt-3)}
.post-source a{color:var(--txt-2)}
.post-end{margin:30px 0 0;padding:28px;border-radius:18px;border:1px solid var(--hi-line);background:var(--hi-glow),var(--tile-2)}
.post-end h2{margin:0 0 8px;font-size:24px;color:var(--txt)}
.post-end p{margin:0 0 12px;color:var(--txt-2)}

.post-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.side-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;border:1px solid var(--hi-line);background:var(--hi-glow),var(--tile-2)}
.side-card b{font-size:18px;line-height:1.3;color:var(--txt)}
.side-card p{margin:0;font-size:14px;line-height:1.55;color:var(--txt-2)}
.side-card .btn{justify-content:center;text-align:center}
.side-links{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:16px;background:var(--tile);border:1px solid var(--hair)}
.side-links b{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:8px}
.side-links a{padding:6px 0;color:var(--txt-2);font-size:14px;text-decoration:none}
.side-links a:hover{color:var(--up)}
.post-related{margin-top:46px}
.post-related h2{font-size:24px;margin:0 0 16px}

@media (max-width:1000px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .post-banner{flex-direction:column;align-items:flex-start}
  .post-text{font-size:16px}
}

/* Buttons inside the text keep their own colours, not the green of a text link. */
.post-text a.btn{color:var(--prime-txt);text-decoration:none}
.post-text a.btn.ghost{color:var(--txt)}
.post-text a.btn:hover{color:var(--prime-txt)}
.post-text a.btn.ghost:hover{color:var(--txt)}