.blog-preview-banner { padding: .75rem max(1.25rem, calc((100vw - var(--content)) / 2 + 1.25rem)); border-bottom: 1px solid #d2a637; background: var(--yellow-tint); }
.blog-page { max-width: var(--content); min-height: 70vh; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 1.25rem 5rem; }
.blog-article { max-width: 52rem; margin: 0 auto; }
.blog-hero { padding: 2rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.blog-hero h1, .blog-page > h1 { max-width: 15ch; margin: 0; font-size: clamp(2.7rem, 7vw, 5rem); font-weight: 760; letter-spacing: -.055em; line-height: 1; }
.blog-standfirst { max-width: 48rem; margin: 1.25rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.blog-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; margin: 1.5rem 0 0; }
.blog-meta dt { color: var(--muted); font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.blog-meta dd { margin: .15rem 0 0; }
.blog-hero-image { margin: 2rem 0 0; }
.blog-hero-image img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: cover; border-radius: var(--radius-md); }
.blog-hero-image figcaption { margin-top: .65rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.blog-toc { margin: 2rem 0; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--green-tint); }
.blog-toc h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.blog-toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.4rem; }
.blog-toc li { break-inside: avoid; margin: .3rem 0; }
.blog-body h2, .blog-publication-notes h2 { margin-top: 3rem; font-size: clamp(1.7rem, 4vw, 2.45rem); letter-spacing: -.035em; line-height: 1.1; scroll-margin-top: 1rem; }
.blog-body h3 { margin-top: 2rem; font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.18; scroll-margin-top: 1rem; }
.blog-body p, .blog-body li { font-size: 1.04rem; }
.blog-body ul, .blog-body ol { padding-left: 1.4rem; }
.blog-body blockquote { margin: 1.5rem 0; padding: .25rem 1rem; border-left: .3rem solid var(--green); background: var(--green-tint); }
.blog-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.blog-body th, .blog-body td { padding: .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-body th { background: var(--green-tint); }
.blog-next-step, .blog-publication-notes, .blog-card { margin-top: 3rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.blog-card { max-width: 48rem; }
.blog-card h2 { margin: .25rem 0 .5rem; font-size: 1.7rem; line-height: 1.15; }
.blog-source-note { color: var(--muted); }
@media (max-width: 800px) { .blog-meta { grid-template-columns: 1fr; } .blog-toc ol { columns: 1; } .blog-body table { display: block; overflow-x: auto; } }
@media (max-width: 520px) { .blog-page { padding-inline: 1rem; } .blog-hero h1, .blog-page > h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); } .blog-body p, .blog-body li { font-size: 1rem; } }