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

    .main-nav {
        gap: 26px;
    }

    .hero {
        aspect-ratio: 2.1;
    }

    .hero-copy {
        padding: 30px;
        max-width: 540px;
    }

    .grid,
    .grid:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .quick-discover {
        gap: 10px;
        padding: 20px;
    }

    .quick-discover a {
        gap: 10px;
        padding-left: 14px;
    }

    .quick-discover small {
        display: none;
    }

    .ranking-section {
        grid-template-columns: 1fr 2fr;
        padding: 26px;
    }

    .rank-list {
        gap: 5px 20px;
    }

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

    .promo-actions {
        min-width: 0;
    }
}

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

    .header-top {
        gap: 15px;
        min-height: 76px;
        flex-wrap: wrap;
        padding: 16px 0;
    }

    .brand {
        font-size: 22px;
    }

    .brand img {
        width: 32px;
        height: 32px;
    }

    .history-link {
        margin-left: auto;
    }

    .search {
        order: 3;
        max-width: none;
        width: 100%;
    }

    .main-nav {
        gap: 22px;
    }

    .main-nav a {
        font-size: 14px;
        gap: 6px;
        padding-top: 6px;
        padding-bottom: 14px;
    }

    .main-nav .icon {
        width: 18px;
        height: 18px;
    }

    .hero {
        margin-top: 18px;
        aspect-ratio: auto;
        height: 465px;
    }

    .hero-image {
        height: 100%;
        object-position: 60% center;
    }

    .slide::after {
        background: linear-gradient(0deg, #08131b 0%, #08131bea 25%, #08131b30 85%);
    }

    .hero-copy {
        position: absolute;
        bottom: 67px;
        padding: 0 24px;
        max-width: 560px;
    }

    .hero h2 {
        font-size: 37px;
        letter-spacing: 2px;
    }

    .hero-summary {
        font-size: 14px;
    }

    .hero-meta {
        font-size: 13px;
    }

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

    .slider-controls {
        right: 18px;
        bottom: 16px;
        gap: 6px;
    }

    .hero-number {
        bottom: 23px;
        left: 24px;
    }

    .quick-discover {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 18px 10px;
    }

    .quick-discover > div {
        display: none;
    }

    .quick-discover a {
        justify-content: center;
        font-size: 14px;
        padding-left: 0;
        gap: 7px;
    }

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

    .quick-discover .icon {
        width: 20px;
        height: 20px;
    }

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

    .section-heading {
        align-items: start;
        gap: 10px;
    }

    .section-heading h2 {
        gap: 7px;
    }

    .more {
        font-size: 13px;
    }

    .grid,
    .grid:has(> :nth-child(4):last-child),
    .grid:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 14px;
    }

    .shelf {
        margin: 34px 0;
    }

    .feature-band {
        grid-template-columns: 1fr;
        gap: 0;
        margin: 35px 0;
    }

    .feature-band > div {
        padding: 26px;
    }

    .feature-band h2 {
        font-size: 26px;
    }

    .ranking-section {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 24px;
    }

    .ranking-section > div p {
        display: none;
    }

    .rank-list {
        gap: 8px 24px;
    }

    .rank-list small {
        display: none;
    }

    .rank-number {
        font-size: 22px;
    }

    .rank-list li {
        gap: 10px;
    }

    .mobile-promo {
        padding: 24px;
        gap: 20px;
    }

    .mobile-brand {
        display: none;
    }

    .promo-actions {
        margin: 0;
        justify-content: flex-start;
    }

    .promo-actions .subscription-status {
        text-align: left;
    }

    .detail-hero {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 24px;
    }

    .detail-copy h1 {
        font-size: 30px;
    }

    dl {
        grid-template-columns: 1fr;
    }

    .detail-copy .hero-actions .button {
        padding: 10px 16px;
    }

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

    .filter-bar label {
        margin-left: 0;
    }

    .page-intro h1,
    .document-page h1 {
        font-size: 30px;
    }

    .prev-next {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .grid,
    .grid:has(> :nth-child(4):last-child),
    .grid:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rank-list {
        grid-template-columns: 1fr;
    }

    .detail-hero {
        grid-template-columns: 1fr;
    }

    .detail-poster {
        max-width: 200px;
    }

    dl {
        grid-template-columns: 1fr 1fr;
    }

    dl > div {
        flex-wrap: wrap;
        gap: 3px 9px;
    }

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

    .hero-number {
        font-size: 12px;
    }

    .slider-controls > button {
        width: 32px;
        min-height: 34px;
    }

    .dot {
        width: 20px;
    }
}

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