/* Blog articles and the blog index (generated by scripts/build-blog.mjs). Plain CSS, no Tailwind. */
:root{ --b-primary:#5B45D6; --b-primary-dark:#4B3BC4; --b-ink:#17142A; --b-muted:#5b5b66; --b-border:#e6e6ec; --b-ice:#F4F7FA; }
@font-face{ font-family:'Clear Sans'; src:url('/fonts/ClearSans-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Clear Sans'; src:url('/fonts/ClearSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Clear Sans'; src:url('/fonts/ClearSans-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
html{ font-family:'Clear Sans', Inter, system-ui, sans-serif; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--b-ice); color:var(--b-ink); }
.b-wrap{ max-width:44rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.b-crumbs{ font-size:.85rem; color:var(--b-muted); margin-bottom:1.5rem; }
.b-crumbs a{ color:var(--b-muted); text-decoration:none; }
.b-crumbs a:hover{ color:var(--b-primary); }
.b-title{ font-size:2.1rem; line-height:1.18; font-weight:700; letter-spacing:-.01em; margin:0 0 1rem; }
.b-lead{ font-size:1.15rem; line-height:1.6; color:var(--b-muted); margin:0 0 1.25rem; }
.b-meta{ display:flex; align-items:center; gap:.75rem; font-size:.9rem; color:var(--b-muted); margin-bottom:2rem; }
.b-meta img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.b-meta strong{ color:var(--b-ink); font-weight:700; }
.b-body{ font-size:1.075rem; line-height:1.75; }
.b-body h2{ font-size:1.45rem; line-height:1.3; margin:2.4rem 0 .75rem; }
.b-body h3{ font-size:1.15rem; line-height:1.35; margin:1.8rem 0 .5rem; }
.b-body p{ margin:0 0 1.15rem; }
.b-body ul, .b-body ol{ margin:0 0 1.15rem; padding-left:1.35rem; }
.b-body li{ margin:.35rem 0; }
.b-body a{ color:var(--b-primary-dark); text-underline-offset:2px; }
.b-body blockquote{ margin:1.5rem 0; padding:.25rem 0 .25rem 1.1rem; border-left:3px solid var(--b-primary); color:var(--b-muted); }
.b-body code{ background:#fff; border:1px solid var(--b-border); border-radius:4px; padding:.05rem .3rem; font-size:.92em; }
.b-body hr{ border:0; border-top:1px solid var(--b-border); margin:2rem 0; }
.b-faq{ margin-top:2.5rem; }
.b-faq h2{ font-size:1.45rem; margin:0 0 1rem; }
.b-faq details{ background:#fff; border:1px solid var(--b-border); border-radius:12px; padding:.9rem 1.1rem; margin-bottom:.6rem; }
.b-faq summary{ cursor:pointer; font-weight:700; line-height:1.4; }
.b-faq details[open] summary{ margin-bottom:.5rem; }
.b-faq details p{ margin:.5rem 0 0; line-height:1.65; }
.b-cta{ margin:3rem 0 2rem; background:#fff; border:1px solid var(--b-border); border-radius:16px; padding:1.5rem; box-shadow:0 1px 2px rgba(16,16,40,.04), 0 8px 24px rgba(16,16,40,.05); }
.b-cta h2{ font-size:1.25rem; margin:0 0 .5rem; }
.b-cta p{ margin:0 0 1rem; color:var(--b-muted); line-height:1.6; }
.b-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.4rem; border-radius:8px; font-weight:700; background:var(--b-primary); color:#fff; text-decoration:none; }
.b-btn:hover{ background:var(--b-primary-dark); }
.b-author{ display:flex; gap:1rem; align-items:flex-start; border-top:1px solid var(--b-border); padding-top:1.75rem; margin-top:1rem; }
.b-author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.b-author p{ margin:.25rem 0 0; color:var(--b-muted); line-height:1.6; font-size:.95rem; }
.b-author a{ color:var(--b-primary-dark); }
.b-list{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.b-card{ display:block; background:#fff; border:1px solid var(--b-border); border-radius:14px; padding:1.25rem 1.35rem; text-decoration:none; color:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
.b-card:hover{ border-color:#d7d7e8; box-shadow:0 4px 14px rgba(16,16,40,.06); }
.b-card h2{ font-size:1.2rem; line-height:1.35; margin:0 0 .4rem; }
.b-card p{ margin:0; color:var(--b-muted); line-height:1.55; }
.b-card time{ display:block; font-size:.82rem; color:var(--b-muted); margin-top:.6rem; }
.b-empty{ color:var(--b-muted); }
@media (max-width:640px){ .b-title{ font-size:1.7rem; } .b-wrap{ padding-top:1.75rem; } }