.mobile-search-link {
    display: none;
}

.search-page-form {
    display: none;
}

.mobile-language-menu {
    display: none;
}

@media (max-width: 700px) {
    .site-header__inner,
    body:has(.drama-detail-page) .site-header__inner {
        position: relative;
        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
        grid-template-rows: 4rem auto;
        min-height: 6.75rem;
        gap: 0 .5rem;
    }

    .site-brand,
    body:has(.drama-detail-page) .site-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: auto;
        overflow: visible;
    }

    .site-brand__wordmark,
    body:has(.drama-detail-page) .site-brand__wordmark {
        width: 10rem;
        max-width: 100%;
    }

    .header-search,
    body:has(.drama-detail-page) .header-search {
        display: none;
    }

    .mobile-search-link,
    body:has(.drama-detail-page) .mobile-search-link {
        display: grid;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 999px;
        color: #fff;
        text-decoration: none;
    }

    .mobile-search-link:hover,
    .mobile-search-link:focus-visible {
        background: rgba(255, 255, 255, .1);
    }

    .mobile-search-link svg {
        width: 1.55rem;
        height: 1.55rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

    .mobile-menu-toggle,
    body:has(.drama-detail-page) .mobile-menu-toggle {
        display: grid;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 2.75rem;
        height: 2.75rem;
        place-content: center;
        padding: 0;
        border-radius: 999px;
        cursor: pointer;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible {
        background: rgba(255, 255, 255, .1);
    }

    .mobile-menu-toggle span:not(.core-screen-reader-only) {
        width: 1.55rem;
    }

    .mobile-language-menu {
        position: absolute;
        top: calc(100% + .35rem);
        left: 0;
        z-index: 3;
        min-width: 9rem;
        padding: .85rem 1rem;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: .75rem;
        background: rgba(12, 11, 15, .98);
        box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .32);
        color: #fff;
        font-size: .9rem;
    }

    .mobile-menu-toggle[aria-expanded="true"] + .mobile-language-menu {
        display: flex;
    }

    .site-nav,
    .site-nav.is-open,
    body:has(.drama-detail-page) .site-nav,
    body:has(.drama-detail-page) .site-nav.is-open {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column: 1 / -1;
        grid-row: 2;
        order: 0;
        width: min(100%, 22rem);
        max-height: none;
        justify-self: center;
        gap: 0;
        overflow: visible;
        padding: .15rem 0 .8rem;
        opacity: 1;
    }

    .site-nav a {
        padding: .55rem .35rem;
        text-align: center;
    }

    .page-home .hero-theatre {
        min-height: calc(31.5rem + 7rem);
        padding-top: 7rem;
    }

    .page-home .hero-arrow {
        top: 20.75rem;
    }

    .search-page-form {
        display: flex;
        width: 100%;
        align-items: center;
        gap: .45rem;
        margin: 0 0 1.5rem;
        padding: .45rem .5rem .45rem 1rem;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
    }

    .search-page-form:focus-within {
        border-color: rgba(255, 255, 255, .4);
        background: rgba(255, 255, 255, .11);
    }

    .search-page-form input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
        font: inherit;
    }

    .search-page-form input::placeholder {
        color: #aaa6b0;
    }

    .search-page-form button {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    .search-page-form button:hover,
    .search-page-form button:focus-visible {
        background: rgba(255, 255, 255, .1);
    }

    .search-page-form button svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }
}