/* Blog index + single post: page head, featured post, post grid, article body. */
.top .bar{padding:0 clamp(18px,5vw,72px)}
.blog-head{padding:clamp(130px,14vw,170px) clamp(18px,5vw,72px) clamp(32px,4vw,48px);display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--line);background:var(--hero-bg)}
.blog-head h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;max-width:20ch}
.blog-head > p{color:var(--soft);max-width:64ch}

/* placeholder cover art: gradient panel until real images exist */
.cover{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 20% 30%,rgba(255,200,112,.35),transparent 60%),radial-gradient(ellipse 60% 70% at 85% 80%,rgba(92,214,255,.3),transparent 60%),var(--panel-2);border:1px solid var(--line)}
.cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.6}
.cover.img::after{content:none}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover.c2{background:radial-gradient(ellipse 70% 80% at 80% 20%,rgba(255,159,110,.35),transparent 60%),radial-gradient(ellipse 60% 70% at 15% 85%,rgba(124,227,139,.25),transparent 60%),var(--panel-2)}
.cover.c3{background:radial-gradient(ellipse 70% 80% at 50% 30%,rgba(92,214,255,.35),transparent 60%),radial-gradient(ellipse 60% 70% at 10% 90%,rgba(255,200,112,.25),transparent 60%),var(--panel-2)}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meta .tag{color:var(--gold-ink)}

/* index */
.blog{padding:clamp(40px,5vw,64px) clamp(18px,5vw,72px) clamp(64px,8vw,104px);display:flex;flex-direction:column;gap:clamp(36px,5vw,56px)}
.blog .filters{margin:-8px 0 0}
.blog [hidden]{display:none}
.feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;text-decoration:none;padding:clamp(14px,2vw,20px);border-radius:20px;background:var(--panel);border:1px solid var(--line-2);transition:transform .25s,border-color .25s}
.feature:hover{transform:translateY(-3px);border-color:var(--gold-ink)}
.feature .body{display:flex;flex-direction:column;gap:14px;padding-right:clamp(0px,2vw,20px)}
.feature h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;line-height:1.12}
.feature p{color:var(--soft)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.post-card{display:flex;flex-direction:column;gap:14px;padding:14px 14px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--line-2);text-decoration:none;transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-3px);border-color:var(--gold-ink)}
.post-card .meta,.post-card h3,.post-card p{padding:0 6px}
.post-card h3{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.post-card p{color:var(--soft);font-size:15px;line-height:1.55}
.feature:focus-visible,.post-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pager{display:flex;justify-content:center;gap:8px}
.pager a,.pager span{min-width:40px;height:40px;padding:0 14px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line-2);background:var(--tint-2);color:var(--soft);text-decoration:none;font-size:14px;font-weight:600}
.pager a:hover{color:var(--strong);background:var(--tint-4)}
.pager [aria-current="page"]{background:var(--gold);border-color:var(--gold);color:#141006}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.feature{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.posts{grid-template-columns:minmax(0,1fr)}}

/* single post */
.post-head{padding:clamp(130px,14vw,170px) clamp(18px,5vw,72px) clamp(28px,3vw,40px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.post-head h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.035em;max-width:22ch}
.post-head .dek{color:var(--soft);font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:60ch}
.post-head .meta{justify-content:center}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--strong)}
.byline{display:flex;align-items:center;gap:12px;text-align:left}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--panel-2);border:1px solid var(--line-2)}
.byline b{display:block;font-size:15px}
.byline span{display:block;font-size:13px;color:var(--muted)}
.post-hero{max-width:1040px;margin:0 auto;padding:0 clamp(18px,5vw,72px)}
.post-hero .cover{border-radius:20px}
.article{max-width:calc(720px + 2*clamp(18px,5vw,72px));margin:0 auto;padding:clamp(36px,5vw,56px) clamp(18px,5vw,72px) clamp(56px,7vw,88px)}
.article p,.article li{color:var(--soft)}
.article > p + p{margin-top:16px}
.article h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:44px 0 14px;line-height:1.2}
.article h3{font-size:1.15rem;margin:28px 0 10px}
.article ul,.article ol{margin:14px 0;padding-left:1.3em;display:grid;gap:8px}
.article a{color:var(--cyan)}
.article blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--gold-ink);font-size:clamp(1.15rem,2vw,1.35rem);font-weight:600;line-height:1.45;color:var(--text)}
.article pre{margin:20px 0;padding:16px 18px;border-radius:12px;background:var(--panel);border:1px solid var(--line-2);font-family:var(--mono);font-size:13.5px;line-height:1.7;overflow-x:auto;color:var(--soft)}
.article code{font-family:var(--mono);font-size:.88em}
.article .callout{margin:28px 0;padding:18px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2)}
.article .callout b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.article .callout p{margin:0}
.post-foot{margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.post-foot .tag{padding:5px 12px;border-radius:999px;background:var(--tint-2);border:1px solid var(--line-2);font-size:13px;color:var(--soft);text-decoration:none}
.related{padding:clamp(48px,6vw,80px) clamp(18px,5vw,72px);border-top:1px solid var(--line);background:var(--bg-2)}
.related h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;margin-bottom:clamp(20px,3vw,32px)}
.article .fig{margin:24px 0}
.article .fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line-2)}
.article .fig figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:center}
.article .closer{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--text)}
.article .cta{margin-top:28px;padding:22px 22px 24px;border-radius:16px;background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.article .cta p{margin:0}
.article .cta p b{color:var(--text);font-size:1.08em}
.article .cta .btn{margin-top:10px;color:#141006;text-decoration:none}