:root { --ink:#202421; --muted:#626864; --green:#178447; --green-dark:#0e6434; --green-soft:#e6f2eb; --gray-soft:#f2f4f3; --line:#cbd2ce; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:Archivo,system-ui,sans-serif; }
a { color:inherit; }
[hidden] { display:none!important; }
.blog-header { grid-template-columns:auto minmax(0,1fr); max-width:1080px; }
.blog-header nav { justify-self:end; }
.blog-main, .post-main { width:min(calc(100% - 32px),1080px); margin:0 auto; padding:42px 0 72px; }
.blog-hero { max-width:850px; padding:8px 0 52px; }
.blog-hero h1 { max-width:13ch; margin:12px 0 18px; font-size:66px; line-height:.94; }
.blog-hero > p:last-child { max-width:720px; margin:0; color:var(--muted); font-size:19px; font-weight:700; line-height:1.5; }
.featured-post { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); gap:30px; align-items:center; border-top:4px solid var(--green); border-bottom:2px solid var(--ink); padding:28px 0; }
.featured-post:not(.has-image) { grid-template-columns:1fr; }
.featured-copy { min-width:0; }
.featured-media { display:block; aspect-ratio:16/9; overflow:hidden; border:2px solid var(--ink); border-radius:7px; background:var(--gray-soft); }
.featured-media img,.blog-card-media img,.post-figure img { display:block; width:100%; height:100%; object-fit:cover; }
.featured-post span, .blog-card > span { color:var(--green-dark); font:700 10px/1.3 "Space Mono",monospace; text-transform:uppercase; }
.featured-post h2 { max-width:18ch; margin:9px 0 12px; font-size:44px; line-height:1; }
.featured-post h2 a, .blog-card h3 a { text-decoration:none; }
.featured-post p, .blog-card p { margin:0; color:var(--muted); font-weight:650; line-height:1.5; }
.blog-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:15px; color:var(--muted); font-size:11px; font-weight:800; }
.read-link { display:inline-flex; min-height:44px; align-items:center; margin-top:18px; border-bottom:2px solid var(--green); text-decoration:none; font-size:12px; font-weight:900; }
.blog-stream { padding-top:48px; }
.blog-stream-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.blog-stream-heading h2 { margin:7px 0 0; font-size:42px; }
.blog-stream-heading > span { color:var(--muted); font:700 10px/1.3 "Space Mono",monospace; text-transform:uppercase; }
.blog-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,280px) auto; gap:10px; margin-bottom:18px; }
.blog-tools label { display:grid; min-width:0; gap:5px; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.blog-tools input,.blog-tools select,.blog-tools button { width:100%; min-width:0; min-height:50px; border:2px solid var(--ink); border-radius:7px; padding:0 13px; color:var(--ink); background:#fff; font-family:inherit; font-size:15px; font-weight:800; }
.blog-tools input:focus,.blog-tools select:focus { outline:3px solid var(--green-soft); outline-offset:1px; }
.blog-tools button { align-self:end; width:auto; color:#fff; background:var(--ink); cursor:pointer; font-size:11px; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
.blog-card { display:flex; min-width:0; min-height:285px; flex-direction:column; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:22px; }
.blog-card-media { display:block; aspect-ratio:16/9; overflow:hidden; margin:-22px -22px 20px; border-bottom:2px solid var(--ink); background:var(--gray-soft); }
.blog-card h3 { margin:10px 0; font-size:27px; line-height:1.05; overflow-wrap:anywhere; }
.blog-card .blog-meta { margin-top:auto; padding-top:20px; }
.blog-card .read-link { width:max-content; }
.blog-loading, .blog-empty { grid-column:1/-1; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:36px 20px; color:var(--muted); text-align:center; font-weight:800; }
.blog-empty strong,.blog-empty span { display:block; }.blog-empty strong { color:var(--ink); font-size:18px; }.blog-empty span { margin-top:6px; font-size:12px; }
.back-link { display:inline-flex; min-height:44px; align-items:center; border-bottom:2px solid var(--ink); text-decoration:none; font-size:12px; font-weight:900; }
.post-breadcrumbs { display:flex; min-height:44px; flex-wrap:wrap; align-items:center; gap:7px; color:var(--muted); font:700 10px/1.4 "Space Mono",monospace; text-transform:uppercase; }
.post-breadcrumbs a { color:var(--ink); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.post-article { max-width:850px; margin:30px auto 0; }
.post-hero { border-top:4px solid var(--green); border-bottom:2px solid var(--ink); padding:28px 0 30px; }
.post-hero h1 { max-width:16ch; margin:12px 0 16px; font-size:62px; line-height:.96; }
.post-deck { max-width:720px; margin:0; color:var(--muted); font-size:20px; font-weight:700; line-height:1.5; }
.post-meta { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:18px; color:var(--muted); font:700 10px/1.4 "Space Mono",monospace; text-transform:uppercase; }
.post-meta > * { display:inline-flex; align-items:center; }
.post-plain-language { max-width:720px; margin:28px auto 0; border:2px solid var(--ink); border-left:8px solid var(--green); border-radius:7px; padding:22px 24px 24px; background:#f4f7f5; box-shadow:4px 4px 0 #d9dfdb; }
.post-plain-language .eyebrow { margin:0 0 8px; }
.post-plain-language h2 { margin:0 0 10px; color:var(--ink); font-size:29px; line-height:1.08; }
.post-plain-language > p:last-child { margin:0; color:#343a36; font-size:18px; font-weight:650; line-height:1.55; }
.post-figure { margin:28px 0 0; }
.post-figure > img { aspect-ratio:16/9; border:2px solid var(--ink); border-radius:7px; background:var(--gray-soft); }
.post-figure figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 18px; padding:9px 2px 0; color:var(--muted); font:700 9px/1.45 "Space Mono",monospace; }
.post-content { max-width:720px; margin:0 auto; padding:42px 0; color:#343a36; font-size:18px; font-weight:500; line-height:1.75; }
.post-content h2 { margin:46px 0 14px; color:var(--ink); font-size:34px; line-height:1.08; }
.post-content h3 { margin:34px 0 12px; color:var(--ink); font-size:25px; }
.post-content p { margin:0 0 22px; }
.post-content ul, .post-content ol { margin:0 0 24px; padding-left:24px; }
.post-content li { margin-bottom:9px; }
.post-content blockquote { margin:30px 0; border-left:5px solid var(--green); padding:12px 0 12px 20px; color:var(--ink); font-size:22px; font-weight:800; line-height:1.4; }
.post-content a { color:var(--green-dark); font-weight:750; }
.post-content pre { overflow:auto; border:2px solid var(--ink); border-radius:7px; padding:14px; background:var(--gray-soft); font-size:14px; }
.post-question-cluster { max-width:720px; margin:0 auto 34px; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:24px 0; }
.post-question-cluster h2 { margin:8px 0 17px; font-size:31px; line-height:1.08; }
.post-question-cluster ul { display:grid; margin:0; padding:0; list-style:none; }
.post-question-cluster li { display:grid; gap:4px; border-top:1px solid var(--line); padding:13px 0; }
.post-question-cluster li:first-child { border-top:0; }
.post-question-cluster span { color:var(--green-dark); font:700 9px/1.4 "Space Mono",monospace; text-transform:uppercase; }
.post-question-cluster a { color:var(--ink); font-size:17px; font-weight:850; line-height:1.3; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.post-tags { display:flex; flex-wrap:wrap; gap:7px; border-top:1px solid var(--line); padding-top:18px; }
.post-tags span { border:1.5px solid var(--ink); border-radius:999px; padding:7px 10px; font-size:10px; font-weight:900; }
.post-discovery { display:grid; max-width:850px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; margin:52px auto 0; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:30px 0; }
.post-discovery h2 { margin:8px 0 14px; font-size:32px; line-height:1.05; }
.post-discovery-start > p:not(.eyebrow) { max-width:48ch; margin:0; color:var(--muted); font-size:14px; font-weight:650; line-height:1.55; }
.post-discovery-start > div { display:flex; flex-wrap:wrap; gap:8px 15px; align-items:center; margin-top:20px; }
.post-discovery-start a { color:var(--green-dark); font-size:12px; font-weight:900; text-underline-offset:4px; }
.post-discovery-start .post-primary-link { display:inline-flex; min-height:46px; align-items:center; border:2px solid var(--ink); border-radius:7px; padding:0 14px; color:#fff; background:var(--green); box-shadow:3px 3px 0 var(--ink); text-decoration:none; }
.post-related { min-width:0; border-left:2px solid var(--ink); padding-left:28px; }
.post-related ul { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.post-related li { display:grid; gap:4px; border-top:1px solid var(--line); padding:12px 0; }
.post-related li:first-child { border-top:0; }
.post-related a { overflow-wrap:anywhere; color:var(--ink); font-size:14px; font-weight:850; line-height:1.3; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.post-related span { color:var(--green-dark); font:700 9px/1.4 "Space Mono",monospace; text-transform:uppercase; }
.blog-footer { display:flex; width:min(calc(100% - 32px),1080px); justify-content:space-between; gap:16px; margin:0 auto 28px; border-top:2px solid var(--ink); padding-top:16px; font-size:12px; font-weight:900; text-transform:uppercase; }
@media(min-width:920px){ .blog-header { grid-template-columns:auto minmax(0,1fr); } .blog-header nav { grid-column:auto; } }
@media(max-width:700px){ .blog-hero h1 { font-size:48px; } .featured-post { grid-template-columns:1fr; gap:20px; } .featured-media { grid-row:1; } .blog-grid { grid-template-columns:1fr; } .blog-stream-heading { align-items:stretch; flex-direction:column; gap:8px; } .blog-tools { grid-template-columns:1fr; } .blog-tools button { width:100%; } .featured-post h2 { font-size:36px; } .post-hero h1 { font-size:46px; } .post-discovery { grid-template-columns:1fr; gap:28px; } .post-related { border-top:2px solid var(--ink); border-left:0; padding-top:24px; padding-left:0; } }
@media(max-width:560px){ .blog-main,.post-main { width:calc(100% - 24px); padding:28px 0 58px; } .blog-hero { padding-bottom:36px; } .blog-hero h1 { font-size:39px; } .blog-hero > p:last-child { font-size:16px; } .featured-post h2 { font-size:31px; } .blog-stream { padding-top:36px; } .blog-stream-heading h2 { font-size:33px; } .blog-tools { grid-template-columns:1fr; } .blog-tools button { width:100%; } .blog-card { min-height:250px; padding:18px; } .blog-card-media { margin:-18px -18px 17px; } .blog-card h3 { font-size:24px; } .post-article { margin-top:22px; } .post-hero { padding-top:22px; } .post-hero h1 { font-size:38px; } .post-deck { font-size:17px; } .post-plain-language { margin-top:20px; padding:18px 17px 19px; border-left-width:6px; box-shadow:3px 3px 0 #d9dfdb; } .post-plain-language h2 { font-size:24px; } .post-plain-language > p:last-child { font-size:16px; line-height:1.55; } .post-figure { margin-top:20px; } .post-figure figcaption { display:grid; } .post-content { padding:32px 0; font-size:17px; line-height:1.65; } .post-content h2 { margin-top:38px; font-size:29px; } .post-content blockquote { font-size:19px; } .post-question-cluster { margin-bottom:28px; padding:20px 0; } .post-question-cluster h2 { font-size:27px; } .post-question-cluster a { font-size:16px; } .post-discovery h2 { font-size:29px; } .post-discovery-start > div { align-items:stretch; flex-direction:column; } .post-discovery-start .post-primary-link { justify-content:center; text-align:center; } .blog-footer { width:calc(100% - 24px); font-size:10px; } }
.blog-state-nav{display:flex;gap:8px;overflow-x:auto;padding:8px 0 18px;scrollbar-width:none}.blog-state-nav::-webkit-scrollbar{display:none}.blog-state-nav a{flex:0 0 auto;border:2px solid #171a17;padding:9px 14px;color:#171a17;text-decoration:none;font-weight:800;background:#fff}.blog-state-nav a:hover,.blog-state-nav a[aria-current="page"]{color:#fff;background:#178447;border-color:#178447}