@media (max-width: 1100px) {
    .wrap {
        width: calc(100% - 48px);
    }

    .navigation {
        gap: 26px;
    }

    .header-note {
        display: none;
    }

    .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero-copy {
        width: 75%;
    }

    .hero {
        height: 500px;
    }

    .mobile-banner {
        flex-wrap: wrap;
    }

    .rank-panel {
        padding: 20px;
    }
}

@media (max-width: 700px) {
    .wrap {
        width: calc(100% - 32px);
    }

    .topbar {
        flex-wrap: wrap;
        padding: 18px 0 12px;
        gap: 16px;
    }

    .brand h1, .brand strong {
        font-size: 20px;
    }

    .search-form {
        width: 100%;
    }

    .navigation {
        gap: 24px;
    }

    .navigation a {
        padding: 13px 0;
        font-size: 14px;
    }

    .hero {
        height: 530px;
        margin-top: 18px;
        border-radius: 12px;
    }

    .hero-copy {
        width: 100%;
        padding: 170px 24px 65px;
    }

    .hero h2 {
        font-size: 36px;
        margin: 15px 0 10px;
    }

    .hero .tagline {
        font-size: 16px;
    }

    .hero-summary {
        display: none;
    }

    .slide::after {
        background: linear-gradient(0deg, #0e161dfc 5%, #0e161de8 40%, #0e161d08 100%);
    }

    .hero-controls {
        bottom: 17px;
        right: 24px;
    }

    .hero .actions {
        margin-top: 20px;
        gap: 10px;
    }

    .button {
        padding: 10px 16px;
        font-size: 14px;
    }

    .quick-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .quick-bar a:nth-child(2) {
        border: 0;
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    .section {
        margin: 34px 0;
    }

    .section-heading h2 {
        font-size: 21px;
    }

    .rank-grid, .updates, .feature, .about-strip, .footer-top, .detail-lead {
        grid-template-columns: 1fr;
    }

    .feature-copy {
        padding: 26px;
    }

    .about-strip {
        gap: 15px;
    }

    .mobile-banner {
        padding: 25px;
        gap: 20px;
    }

    .mobile-banner > img {
        display: none;
    }

    .mobile-banner h2 {
        font-size: 21px;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .footer-intro {
        grid-column: 1 / -1;
    }

    .detail-lead {
        padding: 24px;
        gap: 24px;
    }

    .detail-lead > img {
        width: 180px;
    }

    .detail-lead h1, .page-heading h1 {
        font-size: 30px;
    }

    .stills {
        grid-template-columns: 1fr;
    }

    .filterbar {
        padding: 14px;
    }

    .filterbar select {
        margin-left: 0;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}