.blog-hero{padding-bottom:70px}
.blog-intro{max-width:760px}
.blog-intro h1{font-size:clamp(44px,6vw,78px);line-height:.98;margin:18px 0 24px;max-width:12ch}
.blog-intro .lead{font-size:1.05rem;line-height:1.8;color:#444;max-width:68ch}
.blog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.blog-card{background:#fff;padding:34px;min-height:340px;display:flex;flex-direction:column;position:relative}
.blog-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--red);transform:scaleX(.2);transform-origin:left;transition:transform .35s ease}
.blog-card:hover::before{transform:scaleX(1)}
.blog-meta{font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:28px}
.blog-card h2{font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.12;margin-bottom:18px}
.blog-card p{line-height:1.75;color:#444;flex:1}
.blog-card a{align-self:flex-start;margin-top:28px;border-bottom:1px solid var(--ink);padding-bottom:4px;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.blog-card a:hover,.blog-card a:focus-visible{color:var(--red);border-color:var(--red)}
.blog-note{margin-top:42px;padding:28px;border-left:4px solid var(--red);background:var(--panel);max-width:850px}
.blog-note p{line-height:1.75;color:#444}
@media(max-width:900px){.blog-list{grid-template-columns:1fr}.blog-card{min-height:0}.blog-hero{padding-bottom:45px}}