/* amiaos.com/blog (GUIDE-132): only the blog pages load this; it uses site-v31.css's own variables. */
.blog{max-width:860px;margin:0 auto}
.blog-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--din);text-transform:uppercase;letter-spacing:.12em;font-size:17px;color:var(--red)}
.blog-kicker::before{content:"★";color:var(--gold);font-size:20px}
.blog-title{font-family:var(--din);text-transform:uppercase;line-height:.95;color:var(--navy);font-size:clamp(36px,5vw,64px);margin:10px 0 14px}
.blog-card{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin:22px 0}
.blog-card__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--r) - 8px)}
.blog-card h2{font-family:var(--din);text-transform:uppercase;font-size:28px;line-height:1.05;margin:4px 0 8px}
.blog-card h2 a{color:var(--navy);text-decoration:none}
.blog-card h2 a:hover{color:var(--red)}
.blog-card p{margin:0;color:var(--ink-70)}
.blog-card:not(:has(.blog-card__img)){grid-template-columns:1fr}
.blog-meta{font-family:var(--din);text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--ink-50);margin:0}
.blog-meta a{color:var(--red);text-decoration:none}
.blog-empty,.blog-feed{color:var(--ink-70)}
.blog-feed a,.blog-from a,.blog-back{color:var(--navy)}
.blog-back{display:inline-block;margin-bottom:18px;font-family:var(--din);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.blog-post .prose{font-size:19px;line-height:1.65;color:var(--ink)}
.blog-post .prose h2,.blog-post .prose h3,.blog-post .prose h4{font-family:var(--din);text-transform:uppercase;color:var(--navy);line-height:1.05;margin:1.6em 0 .4em}
.blog-post .prose img,.blog-hero{display:block;max-width:100%;height:auto;border-radius:var(--r);margin:18px 0}
.blog-post .prose blockquote{margin:1em 0;padding:4px 0 4px 18px;border-left:4px solid var(--red);color:var(--ink-70)}
.blog-post .prose a{color:var(--navy)}
.blog-post .prose pre{overflow:auto;background:#fff;padding:14px;border-radius:12px}
.yt{position:relative;aspect-ratio:16/9;margin:18px 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blog-from{color:var(--ink-50);font-style:italic}
.blog-cta{margin:40px 0 0;padding:26px;border-radius:var(--r);background:var(--navy);color:#fff;text-align:center}
.blog-cta p{margin:0 0 14px;font-size:20px}
@media (max-width:640px){.blog-card{grid-template-columns:1fr}}
.blog-card .blog-meta{color:var(--ink-50)}