.blog-hero {
  background: linear-gradient(135deg, #FDF0E8, #FEF6E4);
  border-bottom: 2px solid #EDE9DF;
  padding: 3rem 2rem 2.5rem;
  text-align: center;
}
.blog-hero-inner { max-width: 700px; margin: 0 auto; }
.blog-hero h1 { font-family: 'Boogaloo', cursive; font-size: clamp(2rem,5vw,3rem); color: var(--charcoal, #2C2C2A); margin-bottom: 0.5rem; }
.blog-hero p { font-size: 1rem; font-weight: 600; color: #666; }

.blog-main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 4rem; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.blog-card { background: white; border-radius: 20px; overflow: hidden; border: 1.5px solid #EDE9DF; transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.blog-card a { text-decoration: none; color: inherit; display: block; }

.blog-card-img { height: 160px; display: flex; align-items: center; justify-content: center; }

.blog-card-body { padding: 1.2rem; }
.blog-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: #FDF0E8; color: #E8652A; padding: 2px 8px; border-radius: 99px; margin-bottom: 0.6rem; }
.blog-card-body h2 { font-family: 'Boogaloo', cursive; font-size: 1.1rem; color: #2C2C2A; margin-bottom: 0.4rem; line-height: 1.25; }
.blog-card-body p { font-size: 0.82rem; color: #666; font-weight: 600; line-height: 1.5; margin-bottom: 0.8rem; }
.blog-read { font-size: 0.82rem; font-weight: 800; color: #E8652A; }

/* Article pages */
.article-hero { background: linear-gradient(135deg, #FDF0E8, #FEF6E4); padding: 3rem 2rem; text-align: center; border-bottom: 2px solid #EDE9DF; }
.article-hero .article-tag { display: inline-block; background: #E8652A; color: white; font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 99px; margin-bottom: 1rem; letter-spacing: 0.5px; text-transform: uppercase; }
.article-hero h1 { font-family: 'Boogaloo', cursive; font-size: clamp(1.8rem, 4vw, 2.8rem); color: #2C2C2A; max-width: 800px; margin: 0 auto 1rem; line-height: 1.15; }
.article-hero .article-meta { font-size: 0.82rem; color: #999; font-weight: 700; }

.article-body { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 4rem; }
.article-body h2 { font-family: 'Boogaloo', cursive; font-size: 1.6rem; color: #2C2C2A; margin: 2rem 0 0.75rem; }
.article-body h3 { font-family: 'Boogaloo', cursive; font-size: 1.2rem; color: #2C2C2A; margin: 1.5rem 0 0.5rem; }
.article-body p { font-size: 1rem; color: #444; font-weight: 600; line-height: 1.75; margin-bottom: 1.25rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.5rem; }
.article-body li { font-size: 1rem; color: #444; font-weight: 600; line-height: 1.7; margin-bottom: 0.4rem; }
.article-body strong { color: #2C2C2A; }

.article-cta { background: #FDF0E8; border-radius: 20px; padding: 2rem; text-align: center; margin: 2.5rem 0; border: 2px solid #F5D5C0; }
.article-cta h3 { font-family: 'Boogaloo', cursive; font-size: 1.4rem; color: #2C2C2A; margin-bottom: 0.5rem; }
.article-cta p { color: #666; font-size: 0.9rem; margin-bottom: 1.2rem; font-weight: 600; }
.article-cta a { display: inline-block; background: #E8652A; color: white; font-weight: 900; font-size: 1rem; padding: 0.8rem 2rem; border-radius: 99px; text-decoration: none; box-shadow: 0 4px 0 #b84218; }

.nav-active { color: #E8652A !important; font-weight: 900 !important; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }