.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.blog-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface,#fff)}
.blog-card-cover{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover}
.blog-card-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:28px;overflow-wrap:anywhere}
.blog-card :is(h2,h3){font-size:1.4rem;line-height:1.3;margin-block:10px 16px}
.blog-card :is(h2,h3) a:hover{color:var(--orange-dark)}
.home-blog{background:var(--soft,#f3f5ef)}
.home-blog .blog-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.blog-card-body>p:not(.blog-meta){color:var(--muted);font-size:.95rem}
.blog-card .text-link{margin-top:auto}
.blog-meta{color:var(--muted);font-size:.85rem;margin-bottom:12px}
.blog-article{max-width:860px;overflow-wrap:anywhere}
.blog-article h1{font-size:clamp(2rem,5vw,3.2rem)}
.blog-article>.notice{margin-block:0 32px}
.blog-intro{font-size:1.2rem;line-height:1.7;color:var(--muted);margin-block:24px 32px}
.blog-cover{margin:32px 0}
.blog-cover img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.blog-prose h2,.blog-prose h3{margin-top:36px}
.blog-prose a{color:var(--orange-dark);text-decoration:underline}
.blog-prose blockquote{border-left:3px solid var(--orange);margin-inline:0;padding-left:24px;color:var(--muted)}
.blog-prose pre{overflow:auto;background:var(--soft,#f3f5ef);padding:18px;border-radius:8px;white-space:pre}
.blog-prose code{font-size:.9em}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-card-body{padding:24px}}