/* Blog styles. Loaded only on /blog/ pages so the main hashed stylesheet stays untouched. */
.post-list{list-style:none;padding:0;display:grid;gap:var(--sp-4)}
.post-list li{margin:0}
.post-card{display:block;position:relative;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.post-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--accent),var(--signal));transform:scaleX(.18);transform-origin:left;transition:transform var(--t-slow) var(--ease-out)}
.post-card:hover,.post-card:focus-visible{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--accent-up);color:inherit}
.post-card:hover::before,.post-card:focus-visible::before{transform:scaleX(1)}
.post-card h2{font-size:var(--step-3);max-width:28ch}
.post-card p{color:var(--muted);max-width:62ch;margin-top:var(--sp-3)}
.post-card .post-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--sp-4);font-weight:650;color:var(--accent-tx)}
.post-card .post-go svg{width:1.1em;height:1.1em}
.post-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center}
.post-meta .tag{color:var(--accent-tx);font-weight:650}
.post-head h1{max-width:22ch}
.post-head .post-meta{margin-top:var(--sp-4)}
.prose{font-size:var(--step-0);line-height:1.7;color:var(--ink)}
.prose>*+*{margin-top:var(--sp-3)}
.prose h2{font-size:var(--step-3);margin-top:var(--sp-6);scroll-margin-top:6rem}
.prose h3{font-size:var(--step-1);margin-top:var(--sp-5)}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.5rem}
.prose strong{font-weight:680}
.prose .callout{margin-top:var(--sp-5)}
.prose .callout p{max-width:none}
.tldr{border-left:4px solid var(--signal);background:var(--paper-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4)}
.tldr h2{font-size:var(--step-1);margin:0}
.tldr ul{margin-top:var(--sp-2)}
.toc{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);background:var(--surface)}
.toc h2{font-size:var(--step-0);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0}
.toc ol{margin-top:var(--sp-2)}
.sources{font-size:var(--step--1);color:var(--muted)}
.sources h2{font-size:var(--step-1);color:var(--ink)}
.byline{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.byline img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.byline p{margin:0;font-size:var(--step--1);color:var(--muted);max-width:60ch}
.byline strong{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.post-card,.post-card::before{transition:none}.post-card:hover{transform:none}}
.post-head h1{font-size:var(--step-4);max-width:24ch}
.post-hero{margin:0 0 var(--sp-5)}.post-hero img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-3)}.post-hero figcaption{margin-top:var(--sp-2);font-size:var(--step--1);color:var(--muted)}.post-thumb img{display:block;width:100%;height:auto;border-radius:var(--r-md);margin-bottom:var(--sp-4)}
.post-thumb{display:block}