/* Keep the reference's reading order without fixed-width mobile overflow. */
@media (max-width: 760px) {
    .main-nav { margin-left: 18px; }
    .main-nav > a, .nav-group > summary { padding-inline: 8px; }
    .image-pair { gap: 26px; }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; gap: 24px; }
    .story-card { min-height: 490px; }
    .footer-grid { gap: 40px; }
}
@media (max-width: 600px) {
    .header-inner { flex-wrap: wrap; justify-content: center; padding-top: 12px; padding-bottom: 7px; }
    .header-inner .brand { justify-content: center; min-height: 36px; }
    .main-nav { flex-basis: 100%; margin-left: 0; margin-top: 6px; font-size: 12px; }
    .main-nav > a, .nav-group > summary { padding: 7px 4px; }
    .nav-group > summary::after { margin-left: 4px; }
    .nav-submenu { min-width: 124px; }
    .hero { padding: 39px 0 26px; }
    .hero h1 { margin-bottom: 22px; }
    .hero .button { min-height: 42px; }
    .article-section { padding: 42px 0 44px; }
    .article-section h2 { margin-bottom: 42px; }
    .article-section .article-block { margin-bottom: 38px; }
    .article-section .article-block h3 { margin-bottom: 24px; }
    .image-pair { grid-template-columns: minmax(0, 409px); justify-content: center; gap: 24px; }
    .image-single > figure { grid-column: 1; }
    .stories-section { padding: 44px 0; }
    .stories-section h2 { margin-bottom: 36px; }
    .story-grid { grid-template-columns: minmax(0, 409px); justify-content: center; }
    .story-card { min-height: 0; }
    .story-copy { padding: 24px; }
    .story-more { margin-top: 20px; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .site-footer { padding-top: 42px; }
    .copyright { margin-top: 36px; text-align: center; font-size: 12px; }
}