/* Shared stylesheet for /blog/* — reuses the same design tokens as landing.html
   so blog posts feel like part of the product, not a bolted-on content mill. */
:root{
  --canvas:#0F1319; --surface:#151A22; --surface2:#1A202A;
  --ink:#E8ECF2; --muted:#8A93A6; --line:rgba(255,255,255,0.08); --line-bright:rgba(255,255,255,0.18);
  --accent:#3B82F6; --accent2:#2563EB; --verify:#10B981; --miss:#EF4444; --mark:#3B82F6;
  --ease:cubic-bezier(.16,1,.3,1);
  --s-2:clamp(.74rem, .72rem + .1vw, .8rem); --s-1:clamp(.9rem, .87rem + .14vw, .98rem);
  --s0:clamp(1.02rem, .96rem + .28vw, 1.18rem); --s1:clamp(1.2rem, 1.08rem + .58vw, 1.56rem);
  --s2:clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--s0);line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
.w{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}

h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.note{font-family:"Space Mono",monospace;font-size:var(--s-2);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.mono{font-family:"Space Mono",monospace}

nav{position:sticky;top:0;z-index:90;background:rgba(15,19,25,.7);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
nav .w{display:flex;align-items:center;justify-content:space-between;height:58px;max-width:1240px}
.mark-word{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:var(--s-1);letter-spacing:-.02em}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:16px}
@media(max-width:760px){.nav-right .note,.nav-links{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);
  font-family:"Space Mono",monospace;font-size:var(--s-2);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;padding:13px 24px;border-radius:2px;text-decoration:none;border:1px solid var(--accent);
  position:relative;isolation:isolate;overflow:hidden;transition:color .25s var(--ease),box-shadow .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .3s var(--ease)}
.btn:hover{color:#FFFFFF;box-shadow:0 0 24px rgba(59,130,246,.3)}
.btn:hover::before{transform:translateY(0)}

/* ── blog index ── */
.blog-hero{padding:clamp(48px,7vw,80px) 0 clamp(28px,4vw,40px);text-align:center}
.blog-hero h1{font-size:var(--s2)}
.blog-hero p{color:var(--muted);font-size:var(--s1);max-width:56ch;margin:16px auto 0}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 80px}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}}
.post-card{background:var(--surface2);padding:28px 26px;text-decoration:none;color:var(--ink);display:block;transition:background .2s}
.post-card:hover{background:var(--surface)}
.post-card .cat{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block}
.post-card h2{font-size:1.28rem;margin-bottom:10px}
.post-card p{color:var(--muted);font-size:.9rem;line-height:1.55}
.post-card .meta{margin-top:16px;font-family:"Space Mono",monospace;font-size:.7rem;color:var(--muted);letter-spacing:.04em}

/* ── article ── */
.post{padding:clamp(48px,7vw,72px) 0 clamp(60px,8vw,100px)}
.post .kicker{color:var(--accent);margin-bottom:16px}
.post h1{font-size:var(--s2);margin-bottom:18px}
.post .dek{color:var(--muted);font-size:var(--s1);line-height:1.5;margin-bottom:14px}
.post .byline{font-family:"Space Mono",monospace;font-size:.74rem;color:var(--muted);
  padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.post article{font-size:1.05rem;line-height:1.75;color:#D6DCE6}
.post article > p{margin-bottom:22px}
.post article h2{font-size:1.5rem;margin:44px 0 16px}
.post article h3{font-size:1.18rem;margin:32px 0 12px}
.post article ul,.post article ol{margin:0 0 22px 22px}
.post article li{margin-bottom:8px}
.post article strong{color:var(--ink)}
.post article code{font-family:"Space Mono",monospace;font-size:.88em;background:var(--surface2);
  padding:2px 6px;border-radius:2px;border:1px solid var(--line)}
.callout{background:var(--surface2);border:1px solid var(--line-bright);border-left:3px solid var(--accent);
  padding:18px 22px;margin:28px 0;font-size:.94rem;color:var(--muted);line-height:1.6}
.callout strong{color:var(--ink)}
.post-cta{margin-top:52px;padding:32px;background:var(--surface2);border:1px solid var(--line-bright);text-align:center}
.post-cta h3{margin-bottom:10px}
.post-cta p{color:var(--muted);font-size:.94rem;margin-bottom:20px}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:.78rem}
.post-nav a{color:var(--muted);text-decoration:none}
.post-nav a:hover{color:var(--accent)}

footer{border-top:1px solid var(--line)}
footer .w{display:flex;justify-content:space-between;align-items:center;padding:40px 24px;
  font-size:var(--s-2);color:var(--muted);font-family:"Space Mono",monospace;flex-wrap:wrap;gap:12px}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--accent)}