/* Blog pages, built on the design-system tokens in bodaswift-bridgetree.css. */
.post-hero { padding-block:var(--sp-10) var(--sp-8); border-bottom:1px solid var(--border); }
.post-hero h1 { font-size:clamp(2rem, 5vw, var(--text-5xl)); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:var(--sp-3) 0 var(--sp-4); max-width:22ch; }
.post-hero .lead { max-width:62ch; }
.crumbs { font-size:var(--text-sm); color:var(--fg-subtle); }
.crumbs a { color:inherit; }
.byline { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-6); font-size:var(--text-sm); color:var(--fg-muted); }
.byline img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.byline strong { color:var(--fg); }
.prose { max-width:70ch; margin-inline:auto; padding-block:var(--sp-9); font-size:1.075rem; line-height:var(--leading-body); }
.prose h2 { font-size:var(--text-2xl); margin:var(--sp-10) 0 var(--sp-4); scroll-margin-top:96px; }
.prose h3 { font-size:var(--text-xl); margin:var(--sp-8) 0 var(--sp-3); }
.prose p, .prose ul, .prose ol { margin:0 0 var(--sp-5); }
.prose ul, .prose ol { padding-left:1.3em; display:grid; gap:var(--sp-2); }
.prose a { color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; }
.prose code { font-family:var(--font-mono); font-size:.9em; background:var(--bg-sunken); padding:.1em .35em; border-radius:var(--r-sm); }
.prose pre { background:var(--bg-inverse); color:var(--fg-on-dark); padding:var(--sp-5); border-radius:var(--r-md); overflow-x:auto; font-size:.9rem; line-height:1.55; margin:0 0 var(--sp-6); }
.prose pre code { background:none; padding:0; color:inherit; }
.prose blockquote { margin:0 0 var(--sp-6); padding:var(--sp-2) var(--sp-5); border-left:4px solid var(--brand); color:var(--fg-muted); }
.prose .table-wrap { overflow-x:auto; margin:0 0 var(--sp-6); }
.prose table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.prose th, .prose td { text-align:left; padding:var(--sp-3); border-bottom:1px solid var(--border); vertical-align:top; }
.prose th { font-weight:800; background:var(--bg-sunken); }
.takeaways { background:var(--brand-soft); border:1.5px solid var(--brand); border-radius:var(--r-lg); padding:var(--sp-6); margin:0 0 var(--sp-8); }
.takeaways h2 { margin:0 0 var(--sp-3); font-size:var(--text-lg); }
.takeaways ul { margin:0; }
.toc { border:1.5px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6); margin:0 0 var(--sp-8); }
.toc summary { font-weight:800; cursor:pointer; }
.toc ol { margin:var(--sp-3) 0 0; }
.post-cta { margin:var(--sp-10) 0 var(--sp-6); }
.post-cta h2 { margin-top:0; }
.author-box { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); align-items:start; border-top:1px solid var(--border); padding-top:var(--sp-7); margin-top:var(--sp-9); }
.author-box img { width:72px; height:72px; border-radius:50%; object-fit:cover; }
.author-box p { margin:var(--sp-2) 0 0; font-size:var(--text-sm); color:var(--fg-muted); }
.prose .accordion { margin-bottom:var(--sp-6); }
.related { padding-block:var(--sp-9); border-top:1px solid var(--border); }
.post-list { display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.post-card { display:flex; flex-direction:column; gap:var(--sp-3); text-decoration:none; color:inherit; }
.post-card h2, .post-card h3 { margin:0; font-size:var(--text-xl); line-height:var(--leading-snug); }
.post-card p { margin:0; color:var(--fg-muted); }
.post-card .row__meta { margin-top:auto; }
.blog-hero { padding-block:var(--sp-10) var(--sp-8); }
.blog-hero h1 { font-size:clamp(2.2rem, 6vw, var(--text-5xl)); margin:var(--sp-3) 0 var(--sp-4); }
@media (max-width:619px){ .container { padding-inline:16px; } .prose { padding-block:var(--sp-7); } }
.post-photo { margin:var(--sp-8) auto 0; max-width:1100px; }
.post-photo img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); background:var(--bg-sunken); }
.post-photo figcaption { margin-top:var(--sp-2); font-size:var(--text-xs); color:var(--fg-subtle); text-align:right; }
.post-photo figcaption a { color:inherit; }
.post-card__img { display:block; width:calc(100% + 2 * var(--sp-7)); max-width:none; height:auto; aspect-ratio:16/9; object-fit:cover; margin:calc(-1 * var(--sp-7)) calc(-1 * var(--sp-7)) var(--sp-2); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--bg-sunken); }