:root{
  --ink:#f5f6fa;
  --ink-2:#eceef6;
  --surface:#ffffff;
  --surface-hover:#f3f1ff;
  --border:rgba(17,17,38,0.09);
  --border-strong:rgba(17,17,38,0.16);
  --text:#13141c;
  --text-muted:#5b5f72;
  --text-faint:#9296a6;
  --accent:#4b3fe4;
  --accent-dim:#362bb8;
  --accent-wash:rgba(75,63,228,0.08);
  --signal:#d9531f;
  --signal-wash:rgba(217,83,31,0.10);
  --on-accent:#ffffff;
  --radius:14px;
  --container:1180px;
  --font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--ink);}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,canvas{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,p{margin:0;}
button{font:inherit;}

::selection{background:var(--accent);color:var(--on-accent);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:clamp(20px,4vw,40px);
}

h1{font-size:clamp(38px,5.4vw,66px);font-weight:700;letter-spacing:-0.03em;line-height:1.04;text-wrap:balance;}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-0.025em;line-height:1.1;text-wrap:balance;}
h3{font-size:19px;font-weight:600;letter-spacing:-0.01em;}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--text-muted);max-width:52ch;line-height:1.6;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:14.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:#6257ea;}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
#nav.scrolled{
  background:rgba(245,246,250,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding-block:16px;}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-0.01em;text-decoration:none;color:var(--text);}
.logo-mark{width:26px;height:26px;object-fit:contain;flex-shrink:0;display:block;}
.footer-brand .logo-mark{width:30px;height:30px;}
.nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:14px;color:var(--text-muted);text-decoration:none;transition:color .15s ease;}
.nav-links a:hover{color:var(--text);}
.nav-cta{display:flex;align-items:center;gap:18px;}

@media (max-width:860px){.nav-links{display:none;}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border);padding-block:56px;}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.footer-brand p{color:var(--text-muted);font-size:13.5px;margin-top:10px;max-width:28ch;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:500;
  margin-bottom:14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--text-muted);text-decoration:none;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--border);
  font-size:12.5px;
  color:var(--text-faint);
}

main{padding-top:130px;}

/* ---------- Section shell ---------- */
.blog-page{padding-block:56px 100px;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{margin-top:14px;}
.section-head .lede{margin-top:14px;}

/* ---------- Blog cards (matches homepage teaser exactly) ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.blog-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;color:inherit;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(23,23,60,0.25);}
.blog-thumb{
  height:140px;border-radius:10px;
  background:linear-gradient(135deg, var(--accent-wash), transparent);
  border:1px solid var(--border);margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.blog-thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-fallback-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.thumb-fallback-icon svg{width:40px;height:40px;}
.blog-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px;}
.blog-card h3{font-size:17px;line-height:1.35;margin-bottom:8px;}
.blog-card p{color:var(--text-muted);font-size:14px;line-height:1.6;flex:1;}
.blog-meta{display:flex;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faint);}

@media (max-width:860px){.blog-grid{grid-template-columns:1fr;}}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:48px;flex-wrap:wrap;}
.pagination a, .pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding-inline:10px;
  border-radius:999px;font-size:14px;font-weight:600;
  text-decoration:none;color:var(--text-muted);border:1px solid var(--border-strong);
}
.pagination a:hover{border-color:var(--accent);color:var(--accent);}
.pagination .current{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.pagination .disabled{opacity:0.4;pointer-events:none;}

/* ---------- Article detail ---------- */
.article-header{padding-block:56px 32px;}
.article-byline{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:14px;color:var(--text-muted);flex-wrap:wrap;}
.article-byline span{display:flex;align-items:center;gap:10px;}
.article-featured{margin-block:8px 0;}
.article-featured img{width:100%;border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border);}
.article-featured-fallback{
  width:100%;aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--border);
  background:linear-gradient(135deg, var(--accent-wash), transparent);
  display:flex;align-items:center;justify-content:center;margin-block:8px 0;
}
.article-featured-fallback svg{width:88px;height:88px;}
.article-body{max-width:740px;margin:0 auto;padding-block:40px;}
.article-body h2{font-size:28px;margin-top:44px;margin-bottom:16px;}
.article-body h3{font-size:20px;margin-top:32px;margin-bottom:12px;}
.article-body p{font-size:16.5px;line-height:1.75;color:var(--text);margin-bottom:20px;}
.article-body ul,.article-body ol{font-size:16.5px;line-height:1.75;color:var(--text);margin-bottom:20px;padding-left:1.4em;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{
  border-left:3px solid var(--accent);margin:28px 0;padding:4px 0 4px 20px;
  color:var(--text-muted);font-size:18px;line-height:1.6;font-style:italic;
}
.article-body img{width:100%;border-radius:var(--radius);margin-block:24px;}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.article-body a:hover{color:var(--accent-dim);}
.article-body figure{margin:24px 0;}
.article-body figcaption{font-size:13px;color:var(--text-faint);margin-top:8px;text-align:center;}

.article-cta{
  max-width:740px;margin:0 auto 60px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:44px 32px;
}
.article-cta h2{margin-bottom:12px;}
.article-cta p{color:var(--text-muted);margin-bottom:22px;}

.related-posts{margin-block:60px;}
.related-posts .section-head{margin-bottom:28px;}

@media (max-width:900px){
  main{padding-top:100px;}
  .article-body{padding-block:24px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}