/* Blog pages: reuse the site's tokens and buttons from styles.css */
body { background: #0a0a0a; color: #f5f5f2; }
.bnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); background: rgba(10,10,10,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.bnav__brand { display: flex; align-items: center; gap: 10px; font: 400 24px/1 var(--font-display); letter-spacing: .01em; color: #f5f5f2; text-decoration: none; }
.bnav__brand img { width: 30px; }
.bnav__links { display: flex; gap: 18px; }
.bnav__links a { color: #9a9a94; text-decoration: none; font: 500 14px/1 var(--font-sans); }
.bnav__links a:hover { color: #f5f5f2; }
@media (max-width: 640px) { .bnav__links { display: none; } .bnav .vp-btn { display: none; } }

.art { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--pad) 120px; }
.art--index { max-width: 1160px; }
.crumbs { display: flex; gap: 8px; margin-bottom: 22px; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9a94; }
.crumbs a { color: #9a9a94; text-decoration: none; } .crumbs a:hover { color: #f5f5f2; }
.art__head { display: grid; gap: 16px; margin-bottom: 40px; }
.art__tag { justify-self: start; padding: 5px 10px; border-radius: 99px; background: var(--blaze); color: var(--on-blaze); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.art h1 { margin: 0; font: 400 clamp(40px, 7vw, 76px)/.95 var(--font-display); text-transform: uppercase; }
.art__lead { margin: 0; font: 500 clamp(18px, 2vw, 22px)/1.45 var(--font-sans); color: #c9c9c3; }
.art__meta { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9a94; }
.art__body { font: 400 18px/1.75 var(--font-sans); color: #e6e6e1; }
.art__body h2 { margin: 44px 0 10px; font: 400 clamp(28px, 3.4vw, 38px)/1.05 var(--font-display); text-transform: uppercase; color: #f5f5f2; }
.art__body p { margin: 0 0 18px; }
.art__body ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.art__body li { position: relative; padding-left: 28px; }
.art__body li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--blaze); }
.art__faq summary { font-size: 18px; }
.art__faq { margin-top: 8px; }
.blog-posts .post h2 { margin: 0; font: 400 clamp(24px, 2.1vw, 32px)/1.02 var(--font-display); text-transform: uppercase; }
.bcta { display: grid; justify-items: start; gap: 14px; margin-top: 64px; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--blaze); color: var(--on-blaze); }
.bcta h2 { margin: 0; font: 400 clamp(32px, 4vw, 52px)/1 var(--font-display); text-transform: uppercase; }
.bcta p { margin: 0; max-width: 480px; }
.bcta .vp-btn--primary { background: #0a0a0a; color: #f5f5f2; }
.bcta .vp-btn__arrow { background: #f5f5f2; color: #0a0a0a; }
.bfoot { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 32px var(--pad) 110px; border-top: 1px solid var(--hairline); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9a94; }
.bfoot a { color: #9a9a94; text-decoration: none; }
.bfoot a[href^="mailto:"] { text-transform: none; }
.mbar { transform: none; }