.blog-shell { display: grid; gap: 28px; }
.blog-index-hero { margin-bottom: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card, .blog-article { overflow: hidden; border: 1px solid rgba(176, 117, 13, 0.2); border-radius: 28px; background: rgba(255, 253, 246, 0.94); box-shadow: 0 18px 45px rgba(25, 68, 54, 0.08); }
.blog-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f5efdf; }
.blog-card-image img, .blog-featured-image img, .blog-article-content img { display: block; width: 100%; height: auto; }
.blog-card-image img { height: 100%; object-fit: cover; }
.blog-card-body { display: grid; gap: 14px; padding: 24px; }
.blog-card h2, .blog-article h1, .blog-article-content h2, .blog-article-content h3, .blog-shop-cta h2 { margin: 0; color: #123f32; font-family: "Source Serif 4", Georgia, serif; }
.blog-card h2 { font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; }
.blog-card h2 a, .blog-read-link, .blog-back-link { color: inherit; }
.blog-card p, .blog-shop-cta p { margin: 0; color: #53645b; line-height: 1.65; }
.blog-meta, .blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #69776f; font-size: 0.88rem; }
.blog-tags span { padding: 6px 10px; border: 1px solid rgba(176, 117, 13, 0.24); border-radius: 999px; background: #fff8e7; color: #714d0a; font-weight: 700; }
.blog-read-link, .blog-back-link { width: fit-content; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog-article { max-width: 980px; margin-inline: auto; }
.blog-article-header { display: grid; gap: 16px; padding: clamp(28px, 6vw, 64px); }
.blog-article h1 { max-width: 16ch; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.96; letter-spacing: -0.045em; }
.blog-featured-image { margin: 0; max-height: 560px; overflow: hidden; background: #f5efdf; }
.blog-featured-image img { max-height: 560px; object-fit: cover; }
.blog-article-content { padding: clamp(28px, 6vw, 64px); color: #263e35; font-size: clamp(1.04rem, 1.5vw, 1.18rem); line-height: 1.78; }
.blog-article-content > :first-child { margin-top: 0; }
.blog-article-content > :last-child { margin-bottom: 0; }
.blog-article-content h2, .blog-article-content h3 { margin-top: 1.8em; line-height: 1.12; }
.blog-article-content a { color: #9a6400; font-weight: 700; }
.blog-article-content img { margin-block: 26px; border-radius: 20px; }
.blog-article-content blockquote { margin: 28px 0; padding: 18px 24px; border-left: 4px solid #e0a50d; border-radius: 0 18px 18px 0; background: #fff8e7; }
.blog-article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-article-content th, .blog-article-content td { padding: 10px 12px; border: 1px solid #d8dfda; text-align: left; }
.blog-shop-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 clamp(20px, 5vw, 54px) clamp(20px, 5vw, 54px); padding: 26px; border-radius: 22px; background: #143f33; color: #fff; }
.blog-shop-cta h2, .blog-shop-cta p { color: #fff; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .blog-card, .blog-article { border-radius: 22px; } .blog-shop-cta { align-items: stretch; flex-direction: column; } }