.blog-shell{min-height:100vh;display:flex;flex-direction:column}
.blog-main{flex:1;max-width:760px;margin:0 auto;padding:40px 20px 80px;width:100%}
.blog-main--wide{max-width:1100px}
.blog-hero{margin-bottom:40px}
.blog-hero h1{font-size:clamp(28px,5vw,42px);font-weight:900;letter-spacing:-.6px;margin-bottom:10px}
.blog-hero p{color:var(--text-2);font-size:16px;line-height:1.6}
.blog-list{display:grid;gap:20px}
.blog-card{
  display:block;padding:24px;border-radius:16px;text-decoration:none;color:inherit;
  background:var(--glass-2);border:1px solid var(--border-2);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.blog-card:hover{border-color:var(--green-line);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.blog-card h2{font-size:20px;font-weight:800;margin-bottom:8px;color:var(--text)}
.blog-card p{color:var(--text-2);font-size:14px;line-height:1.55;margin-bottom:12px}
.blog-meta{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.blog-article{color:var(--text-2);font-size:16px;line-height:1.75}
.blog-article h2{font-size:22px;font-weight:800;color:var(--text);margin:32px 0 12px;letter-spacing:-.3px}
.blog-article h3{font-size:17px;font-weight:700;color:var(--text);margin:24px 0 10px}
.blog-article p{margin-bottom:16px}
.blog-article ul,.blog-article ol{margin:0 0 16px 20px}
.blog-article li{margin-bottom:8px}
.blog-article a{color:var(--green);font-weight:600}
.blog-article pre{
  background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:10px;
  padding:14px;overflow-x:auto;font-size:13px;margin:16px 0;
}
.blog-article code{font-family:ui-monospace,monospace;font-size:.9em}
.blog-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:14px;margin-bottom:24px;text-decoration:none}
.blog-back:hover{color:var(--green)}
.blog-cta{margin-top:40px;padding:28px;border-radius:16px;text-align:center;border:1px solid var(--green-line);background:var(--green-dim)}