.page-head{padding:90px 0 24px}
.page-head a.back{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted)}
.page-head a.back:hover{color:var(--accent)}
.page-head h1{font-family:"Switzer",sans-serif;font-weight:800;font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:-0.03em;margin:20px 0 20px}
.page-head p{color:var(--ink-dim);max-width:64ch;font-size:clamp(16px,2vw,19px)}

/* ===== blog listing ===== */
.posts{padding:34px 0 90px}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;transition:border-color .18s,transform .18s}
.post-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 0 1px var(--accent-dim),0 14px 42px var(--glow)}
.post-meta{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.post-meta .cat{color:var(--accent)}
.post-card h2{font-family:"Switzer",sans-serif;font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-0.01em;margin:16px 0 10px}
.post-card p{color:var(--ink-dim);font-size:16px;margin-bottom:20px}
.post-card .go{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--accent);margin-top:auto}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open a{padding:13px 28px;width:100%}
  .nav-links.open .nav-cta{margin:8px 28px;text-align:center}
  .nav-toggle{display:inline-flex}
  .post-grid{grid-template-columns:1fr}
}
@media(max-width:560px){body{font-size:16px}.page-head{padding:64px 0 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.post-card:hover{transform:none}}

/* --- neon brand overrides --- */
.btn-primary{background:var(--primary);border:1px solid var(--primary);color:#F5F7FA;box-shadow:0 4px 22px var(--glow)}
.btn-primary:hover{box-shadow:0 8px 34px var(--glow)}

/* --- neon pass 2: ambient hero glow --- */
.page-head,.article-head,.review-head{background:radial-gradient(720px 380px at 12% -12%, rgba(31,208,163,0.07), transparent 60%)}

/* --- hero glow variety --- */
.page-head{background:radial-gradient(580px 360px at 22% -6%, rgba(31,208,163,0.12), transparent 56%)}