.blog-shell { max-width: 1040px; padding-bottom: 4rem; }
.blog-index-hero { padding: clamp(3rem, 8vw, 6rem) 0 2.5rem; }
.blog-index-hero h1, .blog-article-header h1 { max-width: 18ch; margin: .5rem 0 1rem; font: 500 clamp(2.7rem, 6vw, 4.8rem)/1.06 var(--serif); letter-spacing: -.04em; }
.blog-index-hero > p:last-child { max-width: 58ch; color: var(--muted); font-size: 1.1rem; }
.blog-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; }
.blog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.blog-card a { display: block; height: 100%; }
.blog-card a:hover h2, .blog-card a:focus-visible h2 { color: var(--iris); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 640 / 427; object-fit: cover; }
.blog-card div { padding: 1.25rem 1.4rem 1.5rem; }
.blog-card h2 { margin: .5rem 0 .8rem; font: 500 1.8rem/1.18 var(--serif); transition: color .18s; }
.blog-card div > p:not(.eyebrow) { color: var(--muted); }
.blog-card span { color: var(--iris); font-weight: 600; }
.blog-article { max-width: 820px; margin: auto; }
.blog-article-header { padding: clamp(2.5rem, 7vw, 5rem) 0 1.7rem; }
.blog-article-header .lede { max-width: 65ch; color: var(--muted); }
.blog-article-header time { color: var(--muted); font-size: .85rem; }
.blog-body { color: var(--muted); font-size: 1.04rem; line-height: 1.85; }
.blog-body > p, .blog-body > ol, .blog-body > ul, .blog-body > blockquote, .blog-body > pre { max-width: 72ch; }
.blog-body h2 { margin: 3rem 0 .9rem; color: var(--ink); font: 500 clamp(1.7rem, 3.5vw, 2.3rem)/1.2 var(--serif); }
.blog-body h3 { margin: 2rem 0 .5rem; color: var(--ink); font: 500 1.4rem/1.25 var(--serif); }
.blog-body a { color: var(--iris); text-decoration: underline; text-underline-offset: .2em; }
.blog-body strong { color: var(--ink); }
.blog-body ol, .blog-body ul { padding-left: 1.5rem; }
.blog-body li { padding-left: .3rem; margin: .6rem 0; }
.blog-body img { width: auto; max-width: 100%; height: auto; margin: 1.5rem auto .4rem; border-radius: 12px; }
.blog-body .blog-cover { display: block; width: 100%; }
.blog-body .blog-diagram { display: block; width: 100%; background: #f5f0e7; }
.blog-body figure { max-width: 480px; margin: 2rem 0; }
.blog-body figcaption, .blog-body > p > em { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.blog-body figure img { margin: 0 auto .75rem; }
.blog-body blockquote { margin: 1.5rem 0; padding: .4rem 0 .4rem 1.35rem; border-left: 2px solid var(--gold); color: var(--ink); }
.blog-body blockquote p { margin: .6rem 0; }
.blog-body pre { overflow-x: auto; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); color: var(--ink); font: .9rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.blog-body :not(pre) > code { padding: .1em .25em; border-radius: 4px; background: var(--surface-solid); }
.blog-back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--iris); }
@media (max-width: 640px) { .blog-body { font-size: 1rem; } .blog-index-hero { padding-top: 2.5rem; } }