/* Blog components reuse the site's guide layout and brand palette. */
.blog-page .guide-hero, .blog-page .guide-layout { max-width:1000px; }
.blog-page .guide-hero > .guide-image { max-width:850px; margin-inline:auto; }
.blog-page .guide-section .guide-image { max-width:850px; margin-inline:auto; }
.blog-page .guide-image img { aspect-ratio:850/450; object-fit:contain; }
.blog-lead { max-width:780px; margin-top:20px; line-height:1.8; color:var(--muted); }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:30px; max-width:820px; }
.blog-card { overflow:hidden; border:1px solid #d7e1ed; border-radius:12px; background:#fff; }
.blog-card .guide-image { margin:0; }
.blog-card .guide-image img { border-radius:0; }
.blog-card-copy { padding:22px; }
.blog-category { margin-bottom:12px; color:var(--accent); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.blog-card h2 { margin-bottom:12px; color:var(--brand); font-size:21px; line-height:1.3; }
.blog-card-copy > p:not(.blog-category) { color:var(--muted); font-size:15px; line-height:1.65; }
.blog-read { display:inline-flex; gap:10px; margin-top:16px; color:var(--accent); font-weight:800; }
.blog-card a:hover { text-decoration:underline; text-underline-offset:4px; }
.blog-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px) { .blog-grid { grid-template-columns:minmax(0,400px); gap:24px; } .blog-card-copy { padding:20px; } .blog-card h2 { font-size:21px; } }