.blog-header { max-width:1024px; margin:0 auto; padding:40px 24px 16px; }
.blog-header h1 { font-size:clamp(24px,4vw,36px); font-weight:700; background:linear-gradient(135deg,#e9e9f5,#a09fb1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
.blog-sub { color:var(--noir-text-tertiary); font-size:13px; }
.blog-bar { max-width:1024px; margin:0 auto 12px; padding:0 24px; display:flex; gap:10px; align-items:center; }
.blog-grid { max-width:1024px; margin:0 auto; padding:0 24px 48px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.blog-card { position:relative; border-radius:12px; overflow:hidden; background:var(--noir-bg-elevated); border:1px solid var(--noir-border-light); transition:all .25s; display:flex; flex-direction:column; cursor:pointer; }
.blog-card:hover { border-color:var(--noir-border-medium); box-shadow:var(--noir-shadow-md); transform:translateY(-2px); }
.blog-card .cover { width:100%; height:180px; object-fit:cover; display:block; background:var(--noir-bg-tertiary); }
.blog-card .no-cover { width:100%; height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(91,135,49,0.2),rgba(124,175,78,0.1)); color:var(--noir-text-tertiary); font-size:32px; }
.blog-card .body { padding:16px; flex:1; display:flex; flex-direction:column; }
.blog-card .body h3 { font-size:16px; font-weight:600; margin:0 0 6px; color:var(--noir-text-primary); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card .body .meta { font-size:11px; color:var(--noir-text-tertiary); margin-bottom:8px; }
.blog-card .body .excerpt { font-size:13px; color:var(--noir-text-secondary); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card .body .read-more { margin-top:auto; padding-top:10px; font-size:12px; color:var(--noir-accent); font-weight:500; }
.blog-empty { grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--noir-text-tertiary); }
.blog-loading { grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--noir-text-tertiary); }
.home-btn { position:fixed; top:16px; left:16px; z-index:100; width:36px; height:36px; border-radius:50%; background:var(--noir-bg-elevated); backdrop-filter:blur(20px); border:1px solid var(--noir-border-light); display:flex; align-items:center; justify-content:center; color:var(--noir-text-primary); text-decoration:none; transition:all .2s; box-shadow:var(--noir-shadow-xs); }
.home-btn:hover { box-shadow:var(--noir-shadow-md); transform:scale(1.08); }
@media(max-width:640px){ .blog-grid { grid-template-columns:1fr; gap:12px; padding:0 12px 32px; } }