.blog-shell{min-height:calc(100vh - 100px)}
.blog-intro,.blog-list,.blog-article{width:min(760px,100% - 48px);margin:0 auto}
.blog-intro{padding:96px 0 48px;border-bottom:1px solid var(--line)}
.blog-intro h1,.blog-article h1,.blog-list>h1{font-size:clamp(36px,5vw,58px);line-height:1.2}
.blog-intro p{color:var(--text-dim);font-size:17px;margin:16px 0 0}
.blog-list{padding:42px 0 72px}
.blog-empty{max-width:30em;color:var(--text-dim);font-family:var(--serif);font-size:clamp(20px,2.5vw,28px);line-height:1.5}
.blog-card{display:block;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding:28px 4px}
.blog-card:first-of-type{border-top:1px solid var(--line)}
.blog-card span,.blog-meta{color:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.blog-card h2{font-size:clamp(23px,3vw,32px);margin:8px 0}.blog-card p{color:var(--text-dim);margin:0}
.blog-article{padding:72px 0;font-family:var(--serif);font-size:clamp(18px,2vw,21px);line-height:1.9}
.blog-article h1{margin:12px 0 38px}.blog-article h2{font-size:1.45em;margin:2em 0 .7em}.blog-article p{margin:0 0 1.25em}.blog-article img{margin:0 0 32px}
@media(max-width:600px){.blog-intro{padding:64px 0 32px}.blog-article{padding:48px 0}.blog-intro,.blog-list,.blog-article{width:min(100% - 32px,760px)}}