/* Exact Classie website header, ported for the blog posts.
   Rules copied from site/site.css (nav + buttons + official lockup), with font
   vars resolved to literals and .site-nav set static (it sits on the blog's dark
   frame above the cream sheet). The nav element carries .classie-dark so all
   --fg-* / --border-* tokens resolve to their dark values regardless of the
   article being in light (cream) mode. */

/* buttons */
.site-nav .btn{font-family:"Satoshi",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:15.5px;border:none;border-radius:9px;
  padding:14px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:all .18s var(--ease-out);white-space:nowrap;text-decoration:none;}
.site-nav .btn-sm{padding:10px 18px;font-size:14.5px;border-radius:8px;}
.site-nav .btn-primary{background:var(--brand-primary);color:#041420;
  box-shadow:0 0 0 1px rgba(0,173,255,.45),0 14px 36px -10px rgba(0,173,255,.6);}
.site-nav .btn-primary:hover{background:var(--brand-primary-hover);transform:translateY(-1px);}
.site-nav .btn-ghost{background:transparent;color:var(--fg-secondary);border:1px solid var(--border-strong);}
.site-nav .btn-ghost:hover{border-color:var(--brand-primary);color:var(--fg-primary);background:var(--brand-primary-10);}
.site-nav .arr-l{transition:transform .18s var(--ease-out);display:inline-block;}
.site-nav .btn-ghost:hover .arr-l{transform:translateX(-3px);}

/* nav shell — static on the dark frame (no fixed/scroll change) */
.site-nav{position:static;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px clamp(20px,4vw,48px);border-bottom:1px solid transparent;}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.cl-lockup{display:inline-flex;align-items:center;line-height:0;}
.cl-lockup img{width:auto;display:block;}
.cl-lockup img.cl-mono-light{display:none;}
.nav-word{font-family:"Geist",ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:22px;color:var(--fg-primary);letter-spacing:-.02em;}
.nav-links{display:flex;gap:32px;}
.nav-links a{font-family:"Satoshi",ui-sans-serif,system-ui,sans-serif;font-size:14.5px;color:var(--fg-tertiary);cursor:pointer;
  text-decoration:none;transition:color .15s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.on{color:var(--fg-primary);}
@media(max-width:860px){.nav-links{display:none;}}
@media(max-width:520px){.site-nav .btn-ghost{display:none;}}