.blog-container{max-width:720px;margin:0 auto;padding:32px 24px}.blog-header{margin-bottom:40px;padding:24px 24px 24px 20px;border-left:4px solid var(--color-interactive);background:var(--color-accent-indigo-50);border-radius:0 12px 12px 0}.blog-title{font-size:var(--text-3xl);margin-bottom:8px}.blog-description{font-size:var(--text-lg);color:var(--color-text-secondary)}.blog-list{display:flex;flex-direction:column;gap:24px}.blog-card{padding:24px;background:var(--color-bg-card);border:1px solid var(--color-border-subtle);border-left:3px solid var(--color-accent-indigo-500);border-radius:0 var(--radius-lg) var(--radius-lg) 0;transition:all var(--transition-normal)}.blog-card:hover{border-color:var(--color-border-default);box-shadow:var(--shadow-md);transform:translateY(-2px)}.blog-card-date{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:8px}.blog-card-title{font-size:var(--text-xl);margin-bottom:8px;color:var(--color-primary-900)}.blog-card-excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.blog-post-header{margin-bottom:32px;padding:24px 24px 24px 20px;border-left:4px solid var(--color-interactive);background:var(--color-accent-indigo-50);border-radius:0 12px 12px 0;border-bottom:1px solid var(--color-border-subtle)}.blog-post-meta{display:inline-block;font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-parchment-100);border:1px solid var(--color-border-subtle);border-radius:999px;padding:4px 12px;margin-bottom:12px}.blog-post-title{font-size:var(--text-3xl);margin-bottom:12px}.blog-post-description{font-size:var(--text-lg);color:var(--color-text-secondary);font-family:var(--font-serif)}.blog-body p{margin-bottom:1.25em}.blog-breadcrumb{background:var(--color-parchment-100);border:1px solid var(--color-border-subtle);border-radius:8px;padding:8px 14px;margin-bottom:20px;font-size:var(--text-sm)}.blog-back-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:24px;transition:color var(--transition-fast)}.blog-back-link:hover{color:var(--color-interactive)}@media (max-width:768px){.blog-container{padding:24px 16px}}