/* Blog-only styles. Loads after ../styles.css and reuses its variables. */
.blog-head{background:var(--ch);color:var(--cream);padding:40px 0;text-align:center}
.blog-head h1{font-family:Bungee,sans-serif;font-weight:400;font-size:2rem;line-height:1.1;margin:.2em 0}
.blog-head .kicker{color:var(--moss)}
.blog-head p{max-width:560px;margin:8px auto 0}
.post-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.post-card{background:#fff;border-radius:10px;padding:20px;border-top:4px solid var(--rust)}
.post-card h2{font-size:1.3rem;margin:.1em 0 .4em}
.post-card h2 a{color:var(--ch);text-decoration:none}
.post-card h2 a:hover{color:var(--rust)}
.post-card p{margin:0 0 12px}
.meta{font-size:.8rem;opacity:.7;margin:0 0 6px}
.read-more{color:var(--rust);font-weight:700;text-decoration:none}
.read-more:hover{text-decoration:underline}
.post{max-width:720px;margin:0 auto;padding:40px 20px 56px}
.post h1{font-family:Bungee,sans-serif;font-weight:400;font-size:1.8rem;line-height:1.15;margin:.2em 0 .3em}
.post h2{font-size:1.3rem;color:var(--rust);margin:1.6em 0 .4em}
.post p,.post li{font-size:1.05rem}
.post a{color:var(--rust)}
.post .btn{color:#fff}
.callout{background:#fff;border-left:5px solid var(--moss);padding:12px 16px;margin:24px 0;font-size:.95rem}
.guide-box{background:var(--ch);color:var(--cream);border-radius:14px;padding:22px;margin:32px 0;border-top:6px solid var(--moss)}
.guide-box h2{color:var(--cream);margin-top:0;font-size:1.2rem}
.back{display:inline-block;margin-bottom:12px;font-weight:600;text-decoration:none;color:var(--ch)}
.back:hover{color:var(--rust)}
.foot a{color:var(--cream)}
@media(min-width:760px){.blog-head h1{font-size:2.8rem}.post h1{font-size:2.4rem}.post h2{font-size:1.5rem}}

/* Responsive images and captions */
.post-figure{margin:28px 0}
.post-figure img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.post-figure figcaption{font-size:.85rem;color:var(--ch);opacity:.75;margin-top:8px;padding-left:10px;border-left:3px solid var(--moss)}
.post-figure.hero-img{margin:16px 0 28px}
.post-figure.portrait{max-width:420px;margin-left:auto;margin-right:auto}
.post-card.has-thumb{padding:0;overflow:hidden;display:grid}
.post-card .thumb{display:block}
.post-card .thumb img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.post-card .post-body{padding:20px}
@media(min-width:640px){
 .post-card.has-thumb{grid-template-columns:260px 1fr}
 .post-card .thumb img{height:100%;aspect-ratio:auto}
}