/* Premier article : le reset du pan. */
.blog-page { padding: 70px 8vw 90px; background: var(--paper); color: var(--ink); }
.blog-page article { max-width: 1250px; margin: 0 auto; }
.blog-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(35px, 5vw, 75px); }
.blog-copy { min-width: 0; }
.blog-copy time { display: block; font-size: 16px; margin-top: 12px; }
.blog-page h1 { font: clamp(38px, 4.7vw, 70px)/1.14 "Anton", Impact, sans-serif; letter-spacing: -.015em; margin: 28px 0; }
.blog-page h1 span { background: var(--yellow); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.blog-copy p:not(.eyebrow) { font-size: 21px; line-height: 1.5; margin-top: 20px; }
.blog-copy .blog-lead { font-weight: 800; }
.blog-photo { margin: 0; }
.blog-photo img { width: 100%; height: auto; border: 3px solid var(--ink); }
.blog-intro .blog-photo img { box-shadow: 8px 8px 0 var(--yellow); }
.blog-photo figcaption { font-size: 16px; font-weight: 600; margin-top: 14px; }
.blog-gallery-section { margin-top: 75px; padding-top: 35px; border-top: 2px solid var(--ink); }
.blog-page h2 { font: clamp(26px, 3vw, 42px)/1.2 "Anton", Impact, sans-serif; margin-top: 12px; }
.blog-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; margin-top: 35px; align-items: start; }
@media (max-width: 900px) { .blog-intro { grid-template-columns: 1fr; gap: 35px; } .blog-intro .blog-photo { max-width: 550px; } .blog-page { padding: 55px 6vw 75px; } }
@media (max-width: 560px) { .blog-page { padding: 45px 24px 65px; } .blog-page h1 { font-size: 9.2vw; } .blog-copy p:not(.eyebrow) { font-size: 20px; } .blog-gallery { grid-template-columns: 1fr; gap: 30px; } .blog-gallery-section { margin-top: 50px; } }