.blog-hero{position:relative;background:var(--color-sage);color:var(--color-cream);padding:var(--space-20) 0 var(--space-16);text-align:center;overflow:hidden}.blog-hero__bg{position:absolute;inset:0;z-index:0}.blog-hero__gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0,rgba(255,255,255,.08) 0,transparent 50%),radial-gradient(ellipse 60% 40% at 20% 100%,rgba(0,0,0,.15) 0,transparent 50%),linear-gradient(180deg,transparent,rgba(0,0,0,.1))}.blog-hero .container{position:relative;z-index:2}.blog-hero__content{max-width:700px;margin:0 auto;animation:fadeInUp .8s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.blog-hero h1{font-family:var(--font-headline);font-size:clamp(var(--text-5xl),8vw,var(--text-7xl));color:var(--color-cream);margin:0;letter-spacing:-.02em;line-height:1.1}.blog-hero__divider{width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--color-tan),transparent);margin:var(--space-6) auto var(--space-8)}.blog-hero .lead{font-family:var(--font-accent);font-size:var(--text-xl);font-style:italic;color:rgba(245,241,232,.9);max-width:550px;margin:0 auto;line-height:1.7}.blog-content{position:relative;padding:var(--space-16) 0 var(--space-20);background-color:var(--color-cream)}.blog-content .container{position:relative;z-index:2;max-width:1000px}.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8)}.blog-filter{font-family:var(--font-body);font-size:var(--text-sm);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-light);border-radius:var(--radius-full);background:white;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.blog-filter:hover{border-color:var(--color-tan);color:var(--color-sage)}.blog-filter--active{background:var(--color-sage);color:var(--color-cream);border-color:var(--color-sage)}.blog-grid__item{position:relative}.blog-grid__item[data-hidden=true]{display:none}.blog-grid__category-tag{position:absolute;top:var(--space-3);right:var(--space-3);font-family:var(--font-body);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);background:var(--color-sage);color:var(--color-cream);border-radius:var(--radius-full);z-index:2;pointer-events:none}.blog-grid{display:grid;grid-gap:var(--space-8);gap:var(--space-8)}@media (min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}.blog-grid .blog-card{transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);overflow:hidden;animation:fadeInUp .6s ease-out both}.blog-grid .blog-card:first-child{animation-delay:.1s}.blog-grid .blog-card:nth-child(2){animation-delay:.2s}.blog-grid .blog-card:nth-child(3){animation-delay:.3s}.blog-grid .blog-card:nth-child(4){animation-delay:.4s}.blog-grid .blog-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(26,26,26,.12);border-color:var(--color-tan)}.blog-grid .blog-card img{transition:transform .6s cubic-bezier(.4,0,.2,1)}.blog-grid .blog-card:hover img{transform:scale(1.05)}.blog-empty{text-align:center;padding:var(--space-20) var(--space-6);background:linear-gradient(135deg,var(--color-cream-dark) 0,var(--color-cream) 100%);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);animation:fadeInUp .6s ease-out}.blog-empty h2{font-family:var(--font-headline);font-size:var(--text-3xl);color:var(--color-sage);margin-bottom:var(--space-4)}.blog-empty p{font-family:var(--font-body);color:var(--color-text-secondary);max-width:500px;margin:0 auto var(--space-8);line-height:1.7}@media (max-width:768px){.blog-hero{padding:var(--space-16) 0 var(--space-12)}.blog-hero h1{font-size:var(--text-4xl)}.blog-hero .lead{font-size:var(--text-lg)}.blog-hero__divider{width:60px;margin:var(--space-4) auto var(--space-6)}}@media (prefers-reduced-motion:reduce){.blog-empty,.blog-grid .blog-card,.blog-hero__content{animation:none}.blog-grid .blog-card,.blog-grid .blog-card img{transition:none}.blog-grid .blog-card:hover,.blog-grid .blog-card:hover img{transform:none}}