.blog-hero{ padding:160px 0 70px; }
.blog-hero h1{ font-size:clamp(36px,5.6vw,72px); line-height:1.05; letter-spacing:-.025em; font-weight:600; max-width:820px; }
.blog-hero .sub{ margin-top:24px; font-size:19px; line-height:1.65; color:var(--text-muted); max-width:640px; }

.featured{ padding:0 0 70px; }
.featured-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-elev);
  display:grid; grid-template-columns:1fr 1.3fr; overflow:hidden; transition:border-color .3s ease, transform .3s ease;
}
.featured-card:hover{ border-color:color-mix(in srgb, var(--c) 45%, var(--border)); transform:translateY(-3px); }
.featured-thumb{
  background:color-mix(in srgb, var(--c) 12%, transparent); display:flex; align-items:center; justify-content:center;
  position:relative; min-height:280px; overflow:hidden;
}
.featured-thumb img{ width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.featured-thumb svg{ width:56px; height:56px; color:var(--c); z-index:1; }
.featured-body{ padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.featured-meta{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint); display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.featured-meta .cat{ color:var(--c); font-weight:600; }
.featured-body h2{ font-size:26px; font-weight:600; line-height:1.25; margin-bottom:14px; }
.featured-body p.desc{ font-size:15px; color:var(--text-muted); line-height:1.65; margin-bottom:24px; }
.featured-author{ display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:13.5px; color:var(--text-muted); }
.author-avatar{ width:32px; height:32px; border-radius:999px; background:var(--bg-elev-2); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--c); font-weight:600; }
@media (max-width:880px){ .featured-card{ grid-template-columns:1fr; } }

.articles{ padding:60px 0 110px; }
.articles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.article-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-elev);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease;
}
.article-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 45%, var(--border)); }
.article-thumb{ min-height:180px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-elev-2); }
/* Full card width, height follows the image, so nothing is cropped or letterboxed. */
.article-thumb img{ width:100%; height:auto; display:block; flex:0 0 auto; }
.article-thumb svg{ width:36px; height:36px; z-index:1; }
.article-body{ padding:26px; flex:1; display:flex; flex-direction:column; }
.article-cat{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--c); margin-bottom:10px; }
.article-body h3{ font-size:18px; font-weight:600; line-height:1.35; margin-bottom:10px; }
.article-body p.desc{ font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:20px; flex:1; }
.article-meta{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-faint); display:flex; justify-content:space-between; margin-bottom:16px; }
.article-read{ font-size:13.5px; font-weight:600; color:var(--c); }
@media (max-width:920px){ .articles-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .articles-grid{ grid-template-columns:1fr; } }