/* Blog: index and posts. Builds on vertal-run.css. */
.blog-hero{position:relative;overflow:hidden;padding:88px 0 40px;text-align:center;isolation:isolate}
.blog-hero:before{content:"";position:absolute;inset:-40% -10% auto;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 35% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
             radial-gradient(35% 45% at 70% 30%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 70%)}
.blog-hero h1{font-size:clamp(36px,5vw,56px)}
.posts{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));padding-bottom:80px}
.post-card{display:flex;flex-direction:column;overflow:hidden;padding:0;color:var(--text);transition:transform .2s,border-color .2s}
.post-card:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.post-card .cover{aspect-ratio:16/8;background:#000 center/contain no-repeat;border-bottom:1px solid var(--line)}
.post-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h2{font-size:21px;line-height:1.3;margin:0;letter-spacing:-.015em}
.post-card p{margin:0;color:var(--muted);font-size:15px}
.post-card .more{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:600;font-size:14px}
.post-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.post-meta .tag{font-size:12px}
.post{max-width:740px;margin:0 auto;padding:56px 0 88px}
.post .back{font-size:14px;color:var(--muted)}
.post h1{font-size:clamp(32px,4.6vw,48px);text-align:left;margin:18px 0 14px;max-width:none}
.post .lead{text-align:left;margin:0 0 24px;max-width:none}
.post .cover{width:100%;height:auto;aspect-ratio:1264/843;border-radius:18px;background:#000;margin:8px 0 32px;border:1px solid var(--line)}
.post h2{font-size:26px;margin:44px 0 10px}
.post h3{font-size:19px;margin:28px 0 8px}
.post p,.post li{color:var(--muted);font-size:17px;line-height:1.75}
.post strong{color:var(--text)}
.post ul,.post ol{padding-left:22px}
.post pre{margin:16px 0}
.post :not(pre)>code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--text);font-size:.88em}
.post .callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:10px;padding:14px 18px;margin:20px 0;color:var(--muted)}
.post .cta{justify-content:flex-start;margin-top:36px}
@media (max-width:480px){.wrap{padding:0 16px}.posts{grid-template-columns:1fr}.post{padding-top:36px}}