/* Blog components use the homepage's bold, playful palette while keeping long-form copy easy to read. */
.blog-hero { background: var(--yellow); border-bottom: 5px solid var(--ink); }
.blog-hero::before { background-image: url("/assets/images/heading-splatter-burst.png"); opacity: .22; }
.blog-hero h1 { max-width: 900px; }
.blog-list { display: grid; gap: 28px; }
.blog-card { padding: clamp(24px, 5vw, 48px); background: var(--paper); border: 4px solid var(--ink); border-radius: 22px 30px 20px 28px; box-shadow: 8px 9px 0 var(--ink); rotate: -.4deg; }
.blog-card .eyebrow, .blog-article .eyebrow { color: #00677a; font-size: .9rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.blog-card h2 { margin: 12px 0; font-family: "Bangers", Impact, sans-serif; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 400; line-height: .95; text-transform: uppercase; }
.blog-card h2 a { color: var(--ink); text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.blog-card p { max-width: 760px; }
.blog-article { background: var(--cream); }
.blog-article .content-stack { max-width: 790px; gap: 20px; }
.blog-article p, .blog-article li { font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.8; }
.blog-article h2 { margin: 26px 0 0; font-family: "Bangers", Impact, sans-serif; font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.blog-article .byline { font-size: .95rem; font-weight: 800; }
.blog-cta { margin-top: 28px; padding: clamp(24px, 5vw, 42px); color: var(--ink); background: var(--cyan); border: 4px solid var(--ink); border-radius: 24px; box-shadow: 7px 8px 0 var(--ink); }
.blog-cta h2 { margin-top: 0; }
@media (max-width: 650px) { .blog-card { rotate: 0deg; } .blog-article .content-stack { gap: 14px; } }