.blog-crumbs{font-size:.85rem;opacity:.75;margin:1rem 0}.blog-crumbs a{color:inherit}
.blog-hero h1{margin:.2rem 0 .4rem;font-size:clamp(1.6rem,4vw,2.4rem)}.blog-hero h1 small{font-size:.6em;opacity:.6}.blog-hero p{max-width:60ch;opacity:.85}
.blog-categories{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.blog-categories a{padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:inherit;text-decoration:none;font-size:.9rem;background:rgba(255,255,255,.04)}
.blog-categories a[aria-current]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}.blog-categories span{opacity:.6;font-size:.8em}
.blog-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.blog-card{display:flex;flex-direction:column;gap:.4rem;padding:1rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.blog-card h2{font-size:1.1rem;margin:0;line-height:1.35}.blog-card h2 a{color:inherit;text-decoration:none}.blog-card h2 a:hover{text-decoration:underline}
.blog-card p{margin:0;opacity:.8;font-size:.92rem;flex:1}.blog-card time{font-size:.8rem;opacity:.6}
.blog-card-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.blog-card-category{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;color:inherit;text-decoration:none}
.blog-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:2rem 0;font-size:.95rem}.blog-pagination a{color:inherit}
.blog-empty{padding:2rem 0;opacity:.8}
.blog-article{max-width:72ch;margin:0 auto;line-height:1.65}.blog-article h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.2;margin:.3rem 0}
.blog-meta{font-size:.85rem;opacity:.65}.blog-intro{font-size:1.1rem;opacity:.9}
.blog-hero-image{margin:1rem 0}.blog-hero-image img{width:100%;height:auto;border-radius:12px}
.blog-article section{margin:1.8rem 0}.blog-article h2{font-size:1.35rem;margin:0 0 .6rem}
.blog-related{max-width:72ch;margin:2rem auto;padding:1rem 1.2rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.blog-related h2{font-size:1.05rem;margin:0 0 .5rem}.blog-related ul{margin:0;padding-left:1.1rem}.blog-related a{color:inherit}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-pagination{flex-direction:column}}