/* Blog listing and posts (tools/build_blog.py). Uses the tokens from style.css, so it follows day and night. */
.bp-post{max-width:780px;margin-inline:auto;padding-block:2.2rem 3rem}
.bp-post h1{line-height:1.15;margin:.4rem 0 .8rem;font-size:clamp(1.8rem,4.6vw,2.6rem)}
.bp-post h2{margin-top:2.2rem;font-size:clamp(1.2rem,3vw,1.5rem)}
.bp-post p,.bp-post li{line-height:1.75}
.bp-post li+li{margin-top:.35rem}
.bp-post .lead{color:var(--muted);font-size:1.12rem}
.bp-crumbs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.bp-crumbs a{color:var(--muted)}
.bp-crumbs a:hover{color:var(--text)}
.bp-cat{color:var(--green-2);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin:0}
.bp-byline{display:flex;gap:.75rem;align-items:center;margin:.6rem 0 .4rem}
.bp-byline img{border-radius:50%;flex:none;border:1px solid var(--glass-border)}
.bp-byline p{margin:0}
.bp-tags{margin:.4rem 0 0}
.bp-glass{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:1.1rem 1.3rem;margin:1.5rem 0;
  box-shadow:inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.bp-glass h2{margin:.1rem 0 .5rem;font-size:1.05rem}
.bp-glass ul,.bp-glass ol{margin:.3rem 0 0;padding-left:1.25rem}
.bp-quick{border-color:color-mix(in srgb,var(--green) 55%,transparent);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px color-mix(in srgb,var(--green) 18%,transparent),0 12px 40px -24px var(--glow-g)}
.bp-quick h2{color:var(--green-2)}
.bp-quick p{margin:0}
.bp-toc ol{columns:2;column-gap:2rem}
.bp-toc li{break-inside:avoid}
.bp-sources a{overflow-wrap:anywhere}
.bp-sec{scroll-margin-top:90px}
.bp-author{display:flex;gap:1rem;align-items:center}
.bp-author img{border-radius:50%;flex:none;width:96px;height:96px;object-fit:cover}
.bp-author p{margin:0}
.bp-related h2{margin-top:2.4rem}
.bp-hubs a{white-space:normal}
.bp-disclaimer{margin-top:2rem;border-top:1px solid var(--border);padding-top:1rem}
.bp-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.bp-card{position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.45rem;transition:border-color .2s,transform .2s var(--ease,ease)}
.bp-card:hover,.bp-card:focus-within{border-color:color-mix(in srgb,var(--green) 60%,transparent);transform:translateY(-2px)}
.bp-card-t{margin:0;font-size:1.1rem;line-height:1.3}
.bp-card-t a{color:var(--text);text-decoration:none}
.bp-card-t a::after{content:"";position:absolute;inset:0;border-radius:16px}
.bp-card-t a:focus-visible{outline:none}
.bp-card:focus-within{outline:2px solid var(--purple-2);outline-offset:2px}
.bp-card p{margin:0}
.bp-meta{margin-top:auto!important}
.bp-chips{margin-bottom:1.2rem}
.bp-hero{padding-bottom:.5rem}
.bp-list{padding-top:1rem}
.bp-rss{margin-top:1.5rem}
.bp-all{margin-top:1.2rem}
.bp-hub-list{padding-left:1.2rem}
.bp-hub-list li{margin:.3rem 0}
@media (max-width:640px){.bp-toc ol{columns:1}.bp-author{flex-direction:column;align-items:flex-start}.bp-post{padding-block:1.4rem 2.4rem}}
@media (prefers-reduced-motion:reduce){.bp-card{transition:none}.bp-card:hover{transform:none}}
@supports not (backdrop-filter:blur(1px)){.bp-glass{background:var(--glass-strong)}}
@media print{.bp-glass{backdrop-filter:none;background:none}.bp-related,.bp-chips{display:none}}