/* Blog: /blog/ and /blog/<slug>/ (blog.py). Uses the site tokens from style.css, so light/dark follow the theme. */
.bl{padding:18px 0 28px}
.bl h1{font-size:2rem;letter-spacing:-.01em}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.bl-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:.86rem;cursor:pointer}
.bl-chip i{font-style:normal;color:var(--mute);margin-left:4px;font-size:.8rem}
.bl-chip:hover{border-color:var(--mute)}
.bl-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bl-chip.on i{color:#dcfce7}
.bl-cover{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b1220}
.bl-cover img,.bl-hero{display:block;width:100%;height:auto;aspect-ratio:1200/630}
.bl-cover:hover img{transform:scale(1.02)}
.bl-cover img{transition:transform .25s}
.bl-tags{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 6px;font-size:.78rem;font-weight:600}
.bl-tag{color:var(--brand);text-decoration:none}
a.bl-tag:hover{text-decoration:underline}
.bl-new{color:#fff;background:var(--brand);border-radius:6px;padding:1px 7px}
.bl-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;margin:0 0 34px}
.bl-feat h2{font-size:1.8rem;line-height:1.2;margin:4px 0 10px}
.bl-feat h2 a,.bl-card h3 a,.bl-more h3 a{text-decoration:none}
.bl-feat h2 a:hover,.bl-card h3 a:hover{color:var(--brand)}
.bl-ex{color:var(--mute);margin:0 0 12px}
.bl-feat .bl-ex{font-size:1.02rem}
.bl-read{display:inline-block;margin-top:14px;color:var(--brand);font-weight:700;text-decoration:none}
.bl-by{display:flex;align-items:center;gap:10px;font-size:.86rem}
.bl-by b{display:block}
.bl-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#16a34a,#0ea5e9);flex:none}
.bl-meta{color:var(--mute);font-size:.82rem;margin:0}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 22px}
.bl-card h3{font-size:1.08rem;line-height:1.3;margin:2px 0 8px}
.bl-card .bl-ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem}
.bl-none{color:var(--mute)}
.bl-feat[hidden],.bl-card[hidden],.bl-none[hidden]{display:none}
/* article */
.bl-post{max-width:760px;margin:0 auto}
.bl-back{color:var(--mute);text-decoration:none;font-size:.9rem}
.bl-back:hover{color:var(--ink)}
.bl-post h1{font-size:2.3rem;line-height:1.15;margin:6px 0 12px}
.bl-lede{font-size:1.1rem;color:var(--mute);margin:0 0 16px}
.bl-hero{border-radius:14px;border:1px solid var(--line);margin:22px 0 8px}
.bl-body{font-size:1.04rem;line-height:1.72}
.bl-body h2{font-size:1.45rem;margin:34px 0 10px;line-height:1.25}
.bl-body h3{font-size:1.15rem;margin:24px 0 8px}
.bl-body p{margin:0 0 14px}
.bl-body ul,.bl-body ol{padding-left:22px;margin:0 0 14px}
.bl-body li{margin:4px 0}
.bl-body a{color:var(--brand);text-decoration:none}
.bl-body a:hover{text-decoration:underline}
.bl-body blockquote{margin:18px 0;padding:12px 16px;border-left:4px solid var(--brand);background:var(--card);border-radius:0 10px 10px 0}
.bl-body blockquote p:last-child{margin:0}
.bl-body table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:.92rem;display:block;overflow-x:auto}
.bl-body th,.bl-body td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.bl-body th{color:var(--mute);font-weight:600}
.bl-body code{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.9em}
.bl-body figure{margin:22px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.bl-body figure svg{display:block;width:100%;height:auto}
.bl-body figcaption{color:var(--mute);font-size:.86rem;margin-top:8px}
.bl-body .tip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.bl-body .tip::before{content:"Tip";display:block;font-weight:700;color:var(--brand);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.bl-cta{margin:30px 0 16px;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(22,163,74,.14),rgba(14,165,233,.08)),var(--card)}
.bl-cta b{font-size:1.1rem}
.bl-cta p{margin:6px 0 10px;color:var(--mute)}
.bl-btn{display:inline-block;padding:9px 16px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;margin:4px 8px 0 0}
.bl-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.bl-note{color:var(--mute);font-size:.84rem;border-top:1px solid var(--line);padding-top:12px}
.bl-more{margin-top:40px}
.bl-more h2{font-size:1.4rem;margin:0 0 16px}
/* homepage (home.py): Live Flow hero, feature tiles, latest guides */
.hm-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center;margin:10px 0 30px}
.hm-hero h1{font-size:2.5rem;line-height:1.12;margin:0 0 14px;letter-spacing:-.015em}
.hm-hero .bl-lede{font-size:1.12rem}
.hm-hero .bl-meta{margin-top:12px}
.hm-shot{margin:0}
.hm-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#0b1220}
.hm-shot figcaption{color:var(--mute);font-size:.84rem;margin-top:8px}
.hm-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 10px}
.hm-feat{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none}
.hm-feat:hover{border-color:var(--brand)}
.hm-feat span{color:var(--mute);font-size:.9rem;flex:1}
.hm-feat i{font-style:normal;color:var(--brand);font-weight:600;font-size:.86rem}
@media (max-width:900px){.hm-hero{grid-template-columns:1fr}.hm-feats{grid-template-columns:repeat(2,1fr)}.hm-hero h1{font-size:2rem}}
@media (max-width:560px){.hm-feats{grid-template-columns:1fr}}
/* svg figure colours follow the theme */
.fig-ink{fill:var(--ink)}.fig-mute{fill:var(--mute)}.fig-up{fill:var(--up)}.fig-dn{fill:var(--dn)}.fig-neu{fill:var(--neu)}
.fig-line{stroke:var(--line)}.fig-sup{stroke:var(--up)}.fig-sdn{stroke:var(--dn)}.fig-smute{stroke:var(--mute)}
@media (max-width:900px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.bl-feat{grid-template-columns:1fr;gap:6px}.bl-feat h2{font-size:1.45rem}.bl h1{font-size:1.6rem}.bl-post h1{font-size:1.75rem}}
@media (max-width:560px){.bl-grid{grid-template-columns:1fr}.bl-body{font-size:1rem}}