/* Blog and glossary. Uses only the shared design tokens (BUILD.md section 4), each with a fallback. */
.blog{max-width:72ch;margin:0 auto;padding:var(--space-4,1.5rem) var(--space-3,1rem) var(--space-6,3rem);color:var(--ink,#16202a);font-family:var(--font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-size:1.0625rem;line-height:1.7;overflow-wrap:anywhere}
.blog *{box-sizing:border-box}
.blog h1{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.2;margin:var(--space-2,.5rem) 0 var(--space-3,1rem);color:var(--ink,#16202a)}
.blog h2{font-size:clamp(1.3rem,3.5vw,1.6rem);line-height:1.3;margin:var(--space-5,2.25rem) 0 var(--space-2,.5rem);color:var(--ink,#16202a)}
.blog h3{font-size:1.15rem;line-height:1.35;margin:var(--space-4,1.5rem) 0 var(--space-1,.25rem);color:var(--ink,#16202a)}
.blog p,.blog ul,.blog ol,.blog pre,.blog blockquote{margin:0 0 var(--space-3,1rem)}
.blog ul,.blog ol{padding-left:1.4rem}
.blog li{margin-bottom:var(--space-1,.25rem)}
.blog a{color:var(--brand,#0b7a62);text-underline-offset:.15em}
.blog a:hover{color:var(--brand-ink,#075a48)}
.blog a:focus-visible,.blog summary:focus-visible{outline:3px solid var(--accent,#c2410c);outline-offset:2px;border-radius:2px}
.blog code{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:.92em;background:var(--surface-2,#eef2f1);padding:.1em .35em;border-radius:4px}
.blog pre{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:.9rem;line-height:1.55;background:var(--surface-2,#eef2f1);border:1px solid var(--line,#d5dcdb);border-radius:var(--radius,10px);padding:var(--space-3,1rem);overflow-x:auto;white-space:pre}
.blog pre code{background:none;padding:0;font-size:inherit}
.blog blockquote{border-left:4px solid var(--brand,#0b7a62);background:var(--surface,#fff);padding:var(--space-2,.5rem) var(--space-3,1rem);color:var(--ink-2,#33424d)}
.blog-head{margin-bottom:var(--space-3,1rem)}
.blog-eyebrow{margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--brand,#0b7a62)}
.blog-lead{font-size:1.2rem;color:var(--ink-2,#33424d)}
.blog-meta,.blog-card-meta,.blog-note{font-size:.9rem;color:var(--muted,#566570)}
.blog-meta a,.blog-card-meta a{color:inherit}
.blog-crumbs{font-size:.9rem;color:var(--muted,#566570);margin-bottom:var(--space-2,.5rem)}
.blog-quick,.blog-toc,.blog-cta,.blog-terms{border:1px solid var(--line,#d5dcdb);border-radius:var(--radius,10px);background:var(--surface,#fff);padding:var(--space-3,1rem) var(--space-4,1.5rem);margin:var(--space-4,1.5rem) 0}
.blog-quick{border-left:6px solid var(--brand,#0b7a62);background:var(--surface-2,#f1f6f4)}
.blog-quick h2,.blog-toc h2,.blog-cta h2,.blog-terms h2{margin-top:0;font-size:1.1rem}
.blog-quick p:last-child{margin-bottom:0}
.blog-toc ol{margin-bottom:0}
.blog-cta{background:var(--surface-2,#f1f6f4);border-color:var(--brand,#0b7a62)}
.blog-cta .button{display:inline-block;min-height:44px;padding:.65rem 1.1rem;border-radius:var(--radius,10px);background:var(--brand,#0b7a62);color:var(--brand-ink,#fff);font-weight:700;text-decoration:none}
.blog-cta .button:hover{background:var(--brand,#0b7a62);color:var(--brand-ink,#fff);filter:brightness(.92)}
.blog-cta p:last-child{margin-bottom:0}
.blog-section{scroll-margin-top:var(--space-5,2rem)}
.blog details{border:1px solid var(--line,#d5dcdb);border-radius:var(--radius,10px);background:var(--surface,#fff);margin-bottom:var(--space-2,.5rem)}
.blog summary{cursor:pointer;min-height:44px;padding:.65rem var(--space-3,1rem);font-weight:600;list-style-position:inside}
.blog details p{padding:0 var(--space-3,1rem);margin-bottom:var(--space-3,1rem)}
.blog table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 var(--space-3,1rem);display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.blog th,.blog td{border:1px solid var(--line,#d5dcdb);padding:.5rem .65rem;text-align:left;vertical-align:top;min-width:6rem}
.blog th{background:var(--surface-2,#eef2f1);font-weight:700}
.blog-cats ul,.blog-list,.gloss-related,.blog-terms ul{list-style:none;padding:0;margin:0}
.blog-cats ul{display:flex;flex-wrap:wrap;gap:var(--space-2,.5rem);margin:var(--space-3,1rem) 0}
.blog-cats a,.gloss-jump a,.gloss-related a,.blog-terms li a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:1px solid var(--line,#d5dcdb);border-radius:999px;background:var(--surface,#fff);text-decoration:none;font-size:.95rem}
.blog-cats a[aria-current=page]{background:var(--brand,#0b7a62);border-color:var(--brand,#0b7a62);color:var(--brand-ink,#fff)}
.blog-terms ul,.gloss-related{display:flex;flex-wrap:wrap;gap:var(--space-2,.5rem);margin-bottom:var(--space-3,1rem)}
.blog-list{display:grid;gap:var(--space-3,1rem)}
.blog-card{border:1px solid var(--line,#d5dcdb);border-radius:var(--radius,10px);background:var(--surface,#fff);padding:var(--space-3,1rem) var(--space-4,1.25rem);box-shadow:var(--shadow,none)}
.blog-card h3{margin:var(--space-1,.25rem) 0}
.blog-card h3 a{text-decoration:none}
.blog-card h3 a:hover{text-decoration:underline}
.blog-card p:last-child{margin-bottom:0}
.blog-intro p{color:var(--ink-2,#33424d)}
.gloss-jump{display:flex;flex-wrap:wrap;gap:var(--space-1,.25rem);margin:var(--space-3,1rem) 0;position:sticky;top:60px;z-index:2;background:var(--bg,#fff);padding:var(--space-1,.25rem) 0}
.gloss-jump a{padding:0;min-width:44px;justify-content:center;border-radius:var(--radius,10px);font-weight:700}
.gloss-group h2{border-bottom:2px solid var(--line,#d5dcdb);padding-bottom:var(--space-1,.25rem)}
.gloss-group dt{font-weight:700;margin-top:var(--space-3,1rem)}
.gloss-group dd{margin:0;color:var(--ink-2,#33424d)}
.gloss-term .blog-section h2{margin-top:var(--space-4,1.5rem)}
@media (min-width:720px){.blog{padding-left:var(--space-4,1.5rem);padding-right:var(--space-4,1.5rem)}.blog table{display:table}}
@media (prefers-reduced-motion:reduce){.blog *{scroll-behavior:auto!important;transition:none!important}}
@media print{.blog-cta,.blog-cats,.gloss-jump{display:none}.blog{max-width:none}}
.list-filter{display:grid;gap:.35rem;max-width:30rem;margin:var(--space-4,1.5rem) 0 var(--space-2,.5rem)}
.list-filter label{margin:0}
.list-filter input{min-height:48px;border-radius:14px}