.blog-grid { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
 display: block;
 padding: 32px;
 background: var(--color-cream-soft);
 border: 1px solid var(--color-line);
 border-radius: var(--radius-md);
 transition: all 0.3s var(--ease-out);
 text-decoration: none;
}
.blog-card:hover {
 border-color: var(--color-forest);
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}
.blog-card-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--color-muted);
 margin-bottom: 12px;
}
.blog-card-meta .cat { color: var(--color-amber); }
.blog-card h2 {
 font-family: var(--font-display);
 font-size: clamp(1.3rem, 2.5vw, 1.7rem);
 font-weight: 500;
 color: var(--color-ink);
 letter-spacing: -0.015em;
 line-height: 1.2;
 margin: 0 0 12px;
 border: none;
 padding: 0;
}
.blog-card p {
 font-size: 15px;
 line-height: 1.6;
 color: var(--color-ink-soft);
 margin: 0 0 16px;
 max-width: 65ch;
}
.blog-card .read-link {
 font-size: 13px;
 color: var(--color-forest);
 font-weight: 500;
 display: inline-flex;
 align-items: center;
 gap: 6px;
}