/* manji.ai/blog (OPERATIONS-197, GUIDE-132): on top of /amiaos/amia.css, using its variables. */
.blog{max-width:820px;margin:0 auto;padding:clamp(40px,8vw,96px) 0}
.blog-kicker{font-family:var(--font-display);letter-spacing:.26em;text-transform:uppercase;font-size:.78rem;color:var(--green);margin:0}
.blog-title{font-family:var(--font-display);font-weight:400;line-height:1.02;font-size:clamp(2.2rem,5vw,3.6rem);margin:.3em 0 .6em;color:var(--ink)}
.blog-card{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.blog-card:not(:has(.blog-card__img)){grid-template-columns:1fr}
.blog-card__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.blog-card h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.1;margin:.2em 0 .3em}
.blog-card h2 a{color:var(--ink);text-decoration:none}
.blog-card h2 a:hover{color:var(--green)}
.blog-card p{margin:0;color:var(--ink-muted);font-family:var(--font-body);font-size:1.15rem}
.blog-meta{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--ink-subtle);margin:0}
.blog-meta a{color:var(--green);text-decoration:none}
.blog-empty,.blog-feed,.blog-from{font-family:var(--font-body);color:var(--ink-muted);font-size:1.15rem}
.blog-feed a,.blog-from a,.blog-empty a{color:var(--indigo-lift)}
.blog-back{display:inline-block;margin-bottom:24px;font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--ink-muted);text-decoration:none}
.blog-post .prose{max-width:none;font-family:var(--font-body);font-size:1.3rem;line-height:1.6;color:var(--ink)}
.blog-post .prose h2,.blog-post .prose h3,.blog-post .prose h4{font-family:var(--font-display);font-weight:400;line-height:1.1;margin:1.6em 0 .4em}
.blog-post .prose a{color:var(--indigo-lift)}
.blog-post .prose img,.blog-hero{display:block;max-width:100%;height:auto;margin:20px 0}
.blog-post .prose blockquote{margin:1em 0;padding-left:18px;border-left:3px solid var(--green);color:var(--ink-muted)}
.yt{position:relative;aspect-ratio:16/9;margin:20px 0}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blog-from{font-style:italic}
@media (max-width:640px){.blog-card{grid-template-columns:1fr}}
.blog-card .blog-meta{font-family:var(--font-display);font-size:.72rem;color:var(--ink-subtle)}
