/* Blog v2 (preview): image cards, featured post, big post hero. Layered on wolf.css + blog.css. */
.b2{background:#161a21}
.b2 main{max-width:72rem}
.b2-top{padding-top:32px;padding-bottom:20px}
.b2-top h1{font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 12px;color:#e6e8ec;font-weight:800}
.b2-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a97e8}
.b2-grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.b2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2 columns keep a small post count balanced; switch to 3 once there are more posts. */
.b2-card{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#20242d;border:1px solid rgba(230,232,236,0.2);transition:transform .25s,border-color .25s,box-shadow .25s}
.b2-card:hover,.b2-card:focus-within{transform:translateY(-4px);border-color:rgba(79,70,229,0.6);box-shadow: 0 18px 40px rgba(0,0,0,0.4)}
.b2-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#161a21}
.b2-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.b2-card:hover .b2-img img{transform:scale(1.04)}
.b2-txt{padding:20px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.b2-card h2{margin:0;font-size:20px;line-height:1.3;font-weight:750}.b2-card h2 a{color:#e6e8ec;text-decoration:none}
.b2-card h2 a::after{content:"";position:absolute;inset:0}
.b2-ex{margin:0;color:#e6e8ec;line-height:1.55;font-size:15.5px}
.b2-meta{margin:auto 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:13px;color:#a8acb5}
.b2-meta span{white-space:nowrap}
@media(min-width:1040px){
  .b2-feat{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr}
  .b2-feat .b2-img{aspect-ratio:auto;height:100%}
  .b2-feat .b2-txt{padding:40px 40px;justify-content:center}
  .b2-feat h2{font-size:32px;letter-spacing:-.02em;line-height:1.15}
  .b2-feat .b2-ex{font-size:17px}
}
.b2-post{max-width:46rem;margin:0 auto}
.b2-head h1{font-size:clamp(32px,5.4vw,52px);line-height:1.08;letter-spacing:-.03em;color:#e6e8ec;font-weight:800;margin:4px 0 16px}
.b2-head .b2-meta{margin:0 0 24px;font-size:14px;color:#a8acb5}
.b2-by{display:inline-flex;align-items:center;gap:8px;color:#e6e8ec;font-weight:650}.b2-by img{border-radius:8px}
.b2-hero{margin:0 calc(50% - min(50vw, 36rem)) 32px;border-radius:24px;overflow:hidden;border:1px solid rgba(230,232,236,0.2);box-shadow: 0 30px 80px rgba(0,0,0,0.45)}
@media(max-width:760px){.b2-hero{margin:0 -4px 24px;border-radius:16px}}
.b2-hero img{display:block;width:100%;height:auto}
.b2-body p,.b2-body li{color:#e6e8ec;font-size:17px;line-height:1.75}
.b2-body h2{color:#e6e8ec;font-size:24px;margin:40px 0 12px;letter-spacing:-.01em}
.b2 .crumbs{max-width:46rem;margin:12px auto}
.b2-cta{max-width:46rem;margin:48px auto 0;padding:24px;border-radius:20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:transparent;border:1px solid rgba(230,232,236,0.24)}
.b2-cta h2{margin:0 0 4px;color:#e6e8ec;font-size:22px}.b2-cta p{margin:0;color:#e6e8ec;max-width:30rem}
.b2-cta .pill{min-height:48px}
.b2-related{max-width:72rem;margin:48px auto 0}.b2-related>h2{color:#e6e8ec;font-size:22px;margin:0 0 16px}
.b2-sm h2{font-size:18px}
@media(prefers-reduced-motion:reduce){.b2-card,.b2-img img{transition:none}.b2-card:hover{transform:none}.b2-card:hover .b2-img img{transform:none}}