:root{
  --bg:#0b0b0c;
  --ink:#f4f3ee;
  --ink-2:#9a9a93;
  --ink-3:#5c5c55;
  --line:rgba(244,243,238,.08);
  --line-2:rgba(244,243,238,.16);
  --accent:#ef1111;
  --accent-soft:#ff3a3a;
  --accent-ink:#fff;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:500;letter-spacing:-.005em;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease}
.pill:active{transform:translateY(1px) scale(.985)}
.pill.primary{background:var(--accent);color:var(--accent-ink)}
.pill.primary:hover{background:var(--accent-soft)}
.pill.ghost{border:1px solid var(--line-2);color:var(--ink)}
.pill.ghost:hover{border-color:var(--ink);background:rgba(244,243,238,.04)}

.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);background:rgba(11,11,12,.72);border-bottom:1px solid var(--line)}
.nav-row{max-width:1100px;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 24px;margin:0 auto}
.brand{display:inline-flex;align-items:center;height:32px}
.brand img{height:32px;width:auto}
.nav-back{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.nav-back:hover{color:var(--ink)}

.blog-hero{padding:72px 0 40px;border-bottom:1px solid var(--line)}
.blog-hero .eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:18px}
.blog-hero h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em;line-height:1.08;font-weight:500;margin-bottom:16px}
.blog-hero .dek{color:var(--ink-2);font-size:17px;max-width:640px}
.post-meta{margin-top:24px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

article{padding:48px 0 80px}
article h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:500;margin:44px 0 16px}
article p{color:var(--ink-2);font-size:16.5px;margin-bottom:18px;max-width:680px}
article strong{color:var(--ink);font-weight:600}
article ul{margin:0 0 20px 0;padding-left:22px;color:var(--ink-2);max-width:680px}
article li{margin-bottom:10px;font-size:16px}
article figure{margin:36px 0}
article figure img{border:1px solid var(--line-2);border-radius:16px;max-width:340px}
article figcaption{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-top:12px}

.cta-box{margin:56px 0;padding:36px;border:1px solid var(--line-2);border-radius:16px;background:radial-gradient(60% 200% at 0% 0%,rgba(239,17,17,.1),transparent 70%)}
.cta-box h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.cta-box p{margin-bottom:20px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

.related{border-top:1px solid var(--line);padding:56px 0 80px}
.related h3{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.related-card{border:1px solid var(--line);border-radius:14px;padding:22px;transition:border-color .2s ease}
.related-card:hover{border-color:var(--line-2)}
.related-card span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.related-card h4{font-size:16px;letter-spacing:-.01em;font-weight:500;margin-top:8px}

.post-list{padding:16px 0 80px}
.post-card{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:32px 0;border-bottom:1px solid var(--line)}
.post-card img{width:120px;border-radius:12px;border:1px solid var(--line-2)}
.post-card .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.post-card h2{font-size:22px;letter-spacing:-.02em;font-weight:500;margin:8px 0}
.post-card p{color:var(--ink-2);font-size:15px}

footer{border-top:1px solid var(--line);padding:40px 0;text-align:center}
footer p{color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--ink)}

@media (max-width:640px){
  .post-card{grid-template-columns:1fr}
  .post-card img{width:100%;max-width:220px}
  .related-grid{grid-template-columns:1fr}
  article figure img{max-width:100%}
}