.blog-hero { background: var(--ink); color: white; text-align: center; padding: 68px 0 72px; }
.blog-hero .eyebrow { color: #c8dfbd; margin-bottom: 16px; }
.blog-hero h1 { margin-bottom: 12px; }
.blog-hero p:last-child { max-width: 610px; margin: auto; color: #e1ebe0; }
.blog-list { padding-top: 36px; padding-bottom: 64px; }
.blog-controls { max-width: 640px; margin: auto; text-align: center; }
.blog-controls label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.blog-controls input { width: min(100%, 460px); font: inherit; padding: 11px 15px; border: 1px solid #a2b2a5; border-radius: 7px; background: white; color: var(--ink); }
.blog-controls input:focus-visible { outline: 3px solid #94b673; outline-offset: 3px; }
.blog-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.blog-filters button { font-size: 13px; border: 1px solid #bac8b8; border-radius: 30px; background: transparent; color: var(--ink); padding: 5px 14px; }
.blog-filters button[aria-pressed="true"] { background: var(--ink); color: white; }
.blog-count, .blog-empty { text-align: center; color: var(--muted); }
.blog-count { font-size: 13px; margin: 12px 0 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.blog-card { background: white; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 10px 30px #2036290a; display: flex; flex-direction: column; }
.blog-card[hidden] { display: none; }
.blog-visual { position: relative; overflow: hidden; aspect-ratio: 1.95; background: #223b35; color: #a6c99e; }
.visual-1 { background: #dce9d7; color: #386c56; }
.visual-2 { background: #345747; color: #c2ddb2; }
.blog-visual svg { position: absolute; width: 100%; height: 100%; inset: 0; }
.blog-pill { position: absolute; z-index: 1; top: 15px; left: 15px; background: var(--paper); color: var(--ink); padding: 3px 11px; border-radius: 30px; font-size: 11px; font-weight: 600; }
.blog-card-copy { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-copy .eyebrow { margin-bottom: 8px; color: var(--muted); }
.blog-card h2 { font-size: 23px; letter-spacing: -.55px; line-height: 1.25; margin-bottom: 12px; }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; }
.blog-card-copy > p:not(.eyebrow) { color: var(--muted); font-size: 15px; }
.blog-read { margin-top: auto; color: var(--green); font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.blog-article { max-width: 780px; padding-top: 48px; padding-bottom: 48px; }
.blog-back { display: inline-block; margin-bottom: 25px; text-underline-offset: 4px; color: var(--green); }
.blog-article .eyebrow { margin-bottom: 13px; }
.blog-article h1 { font-size: clamp(35px,5vw,59px); }
.blog-article .intro { max-width: 690px; }
.blog-article .blog-visual { border-radius: 13px; max-height: 280px; margin: 25px 0 35px; }
.blog-prose { max-width: 690px; }
.blog-prose h2 { font-size: 25px; margin: 27px 0 8px; line-height: 1.35; }
.blog-source { color: var(--muted); font-size: 14px; margin-top: 32px; }
nav [aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
@media(max-width: 850px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 700px) { .blog-main { padding-top: 44px; } .blog-hero { padding: 40px 0 44px; } }
@media(max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .blog-card-copy { padding: 19px; } }