/* Standalone stylesheet for the statically generated /blog surface. Kept
   separate from the React app's hashed CSS so blog pages are fully decoupled
   and robust (no build-hash coupling). Mirrors the brand tokens in
   src/styles/tokens.css so the blog looks like Lumindis. */
:root{
  --bg:#05060a; --bg-2:#0a0c14; --ink:#e8ecf5; --ink-soft:#c3cbdb;
  --ink-dim:#8b93a7; --ink-mute:#7c8699; --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14); --blue:#3B82F6; --blue-2:#60a5fa;
  --glass-bg:rgba(14,18,30,.55); --glass-border:rgba(255,255,255,.10);
  --radius-md:12px; --radius-lg:20px; --radius-pill:100px;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.65; letter-spacing:-.005em;
  font-feature-settings:'ss01';
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-2); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* Layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.site-header{border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(5,6,10,.72); backdrop-filter:blur(14px); z-index:10}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:980px}
.brand{font-weight:600; letter-spacing:-.02em; color:var(--ink); font-size:18px}
.brand:hover{text-decoration:none}
.nav-links a{color:var(--ink-dim); margin-left:22px; font-size:14px}
.nav-links a:hover{color:var(--ink)}

main{padding:56px 0 96px}
.eyebrow{color:var(--ink-mute); text-transform:uppercase; letter-spacing:.25em;
  font-size:12px; margin:0 0 18px}

/* Index */
.post-list{list-style:none; padding:0; margin:40px 0 0; display:grid; gap:18px; max-width:820px}
.post-card{display:block; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 28px; background:var(--glass-bg); transition:border-color .2s, transform .2s}
.post-card:hover{border-color:var(--line-2); transform:translateY(-2px); text-decoration:none}
.post-card h2{margin:0 0 8px; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
.post-card p{margin:0 0 14px; color:var(--ink-dim); font-size:15px}
.post-meta{color:var(--ink-mute); font-size:12.5px}
.tag{display:inline-block; border:1px solid var(--line-2); color:var(--ink-dim);
  border-radius:var(--radius-pill); padding:2px 10px; font-size:11.5px; margin-right:6px}

/* Article */
article header h1{font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-.03em; margin:14px 0 16px}
.article-meta{color:var(--ink-mute); font-size:13px; margin-bottom:28px}
.article-meta .tag{margin-top:4px}
.tldr{border:1px solid var(--line-2); border-left:3px solid var(--blue);
  background:var(--glass-bg); border-radius:var(--radius-md); padding:18px 22px; margin:28px 0}
.tldr strong{display:block; text-transform:uppercase; letter-spacing:.2em;
  font-size:11.5px; color:var(--blue-2); margin-bottom:8px; font-family:'JetBrains Mono',monospace}
.tldr p{margin:0; color:var(--ink-soft)}

.prose{font-size:17px; color:var(--ink-soft)}
.prose h2{font-size:27px; letter-spacing:-.02em; margin:44px 0 14px; color:var(--ink)}
.prose h3{font-size:20px; letter-spacing:-.01em; margin:30px 0 10px; color:var(--ink)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{padding-left:22px; margin:0 0 18px}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:3px solid var(--line-2); margin:0 0 18px; padding:2px 0 2px 18px; color:var(--ink-dim)}
.prose code{font-family:'JetBrains Mono',monospace; font-size:.86em;
  background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
.prose pre{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; overflow:auto; margin:0 0 18px}
.prose pre code{background:none; border:0; padding:0; font-size:13.5px; color:var(--ink-soft)}
.prose table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px}
.prose th,.prose td{border:1px solid var(--line-2); padding:10px 14px; text-align:left}
.prose th{background:var(--bg-2); color:var(--ink); font-weight:600}
.prose td{color:var(--ink-dim)}
.prose a{text-decoration:underline; text-underline-offset:2px}

.faq{margin:48px 0 0; border-top:1px solid var(--line); padding-top:8px}
.faq h2{font-size:24px; margin:24px 0 8px; color:var(--ink)}
.faq details{border-bottom:1px solid var(--line); padding:14px 0}
.faq summary{cursor:pointer; font-weight:500; color:var(--ink); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+'; color:var(--blue-2); margin-right:10px; font-family:'JetBrains Mono',monospace}
.faq details[open] summary::before{content:'–'}
.faq details p{margin:10px 0 2px; color:var(--ink-dim)}

.cta{margin:52px 0 0; border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:30px 32px; background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,0))}
.cta h2{margin:0 0 10px; font-size:22px; color:var(--ink)}
.cta p{margin:0 0 18px; color:var(--ink-dim)}
.btn{display:inline-block; background:var(--blue); color:#fff; font-weight:500;
  border-radius:var(--radius-pill); padding:11px 22px; font-size:15px}
.btn:hover{text-decoration:none; background:var(--blue-2)}
.btn-ghost{display:inline-block; border:1px solid var(--line-2); color:var(--ink);
  border-radius:var(--radius-pill); padding:11px 22px; font-size:15px; margin-left:10px}
.btn-ghost:hover{text-decoration:none; border-color:var(--ink-dim)}

.site-footer{border-top:1px solid var(--line); padding:32px 0; color:var(--ink-mute); font-size:13px}
.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:980px}
.site-footer a{color:var(--ink-dim)}

@media(max-width:600px){
  main{padding:36px 0 64px}
  .prose{font-size:16px}
  .nav-links a{margin-left:14px}
}