/* CS2list.net blog style: readable editorial column, terminal labels, and the single #00E5A0 accent. */
.blog-page { max-width:1180px; margin:0 auto; padding:7rem 2rem 8rem; }
.blog-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:4rem; align-items:end; padding:3rem 0 4rem; border-bottom:1px solid var(--line); }
.blog-hero h1 { max-width:780px; margin:.8rem 0 1.2rem; color:var(--text); font:700 clamp(3rem,7vw,7rem)/.86 var(--mono); letter-spacing:-.095em; }
.blog-hero h1 em { color:var(--lime); font-style:normal; }
.blog-hero p { max-width:620px; margin:0; color:var(--muted); font:16px/1.65 var(--mono); }
.blog-stat { display:flex; flex-direction:column; gap:.45rem; padding:1.2rem; border:1px solid rgba(0,229,160,.2); background:rgba(0,229,160,.035); }
.blog-stat strong { color:var(--lime); font:700 38px/1 var(--mono); }
.blog-stat span { color:var(--muted); font:12px/1.5 var(--mono); }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:3rem; border:1px solid var(--line); background:var(--line); }
.blog-card { display:flex; min-height:285px; flex-direction:column; justify-content:space-between; gap:1.4rem; padding:1.6rem; background:var(--bg); transition:background 180ms ease, transform 180ms ease; }
.blog-card:hover { background:rgba(0,229,160,.045); transform:translateY(-2px); }
.blog-card-top { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font:11px var(--mono); }
.blog-card h2 { margin:.9rem 0 .7rem; color:var(--text); font:700 clamp(1.35rem,2.2vw,2rem)/1.05 var(--mono); letter-spacing:-.06em; }
.blog-card p { margin:0; color:var(--muted); font:14px/1.65 var(--mono); }
.blog-card-link { display:inline-flex; align-items:center; gap:.6rem; color:var(--lime); font:700 13px var(--mono); text-decoration:none; }
.article-page { max-width:900px; margin:0 auto; padding:7rem 2rem 8rem; }
.article-kicker { display:flex; flex-wrap:wrap; gap:.7rem; color:var(--lime); font:12px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.article-page h1 { max-width:900px; margin:1.2rem 0 1.4rem; color:var(--text); font:700 clamp(3rem,7vw,6.5rem)/.88 var(--mono); letter-spacing:-.095em; }
.article-dek { max-width:760px; margin:0 0 2.4rem; color:var(--muted); font:18px/1.65 var(--mono); }
.article-meta { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#789589; font:12px var(--mono); }
.article-body { max-width:760px; padding-top:2.8rem; }
.article-body h2 { margin:2.8rem 0 1rem; color:var(--text); font:700 clamp(1.55rem,3vw,2.25rem)/1.05 var(--mono); letter-spacing:-.06em; }
.article-body h3 { margin:2rem 0 .8rem; color:var(--lime); font:700 1.25rem/1.2 var(--mono); }
.article-body p { margin:0 0 1.25rem; color:#a1b0a6; font:17px/1.85 var(--mono); }
.article-body ul, .article-body ol { margin:0 0 1.5rem; padding-left:1.5rem; color:#a1b0a6; font:16px/1.8 var(--mono); }
.article-body li { margin:.4rem 0; }
.article-body blockquote { margin:2rem 0; padding:1rem 1.2rem; border-left:3px solid var(--lime); background:rgba(0,229,160,.045); color:#c7d5cc; font:italic 16px/1.7 var(--mono); }
.article-body a { color:var(--lime); }
.article-sources { margin-top:3rem; padding:1.4rem; border:1px solid rgba(0,229,160,.18); background:rgba(0,229,160,.035); }
.article-sources h2 { margin-top:0; }
.article-sources p, .article-sources li { font-size:13px; line-height:1.65; }
.article-footer-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }
html[data-theme="light"] .blog-card { background:var(--bg); }
html[data-theme="light"] .article-body p, html[data-theme="light"] .article-body li { color:#405148; }
@media (max-width:760px) {
  .blog-page, .article-page { padding:5rem 1rem 6rem; }
  .blog-hero { display:flex; flex-direction:column; gap:2rem; padding-top:2rem; }
  .blog-grid { grid-template-columns:1fr; }
  .article-page h1 { font-size:clamp(2.7rem,12vw,4.5rem); }
  .article-dek { font-size:16px; }
  .article-body p { font-size:15px; line-height:1.75; }
  .article-footer-nav { flex-direction:column; }
}