@import url('./components/footer.css');
    @import url('./components/poster.css');
    @import url('./components/second-menu.css');
    @import url('./components/breadcrumbs.css');
    @import url('./components/ticket-modal.css');

    @font-face {
        font-family: 'Roboto';
        src: url('/fonts/Roboto-Variable.ttf') format('truetype-variations'),
            url('/fonts/Roboto-Variable.ttf') format('truetype');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Reset-ish */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: var(--font-body);
        color: #000;
        background: #fff;
        line-height: 1.5;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }

    button {
        font: inherit;
    }

    h1,
    h2,
    h3,
    .poster-title,
    .perf-card-title,
    .card-carousel-title,
    .playbill-item-title,
    .day-playbill-date-num {
        font-family: var(--font-heading);
        font-weight: 700;
    }


    /* ─── Header ─────────────────────────────────────────────────────────── */

    .site-header {
        padding: 1.5rem 2rem;
        background: #fff;
    }


    .header-inner {
        display: flex;
        align-items: stretch;
        gap: 2rem;
    }

    .header-row-top {
        margin-bottom: 1.5rem;
    }


    .site-logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .site-logo-mark {
        width: 310px;
        height: auto;
        display: block;
    }

    .header-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        /* lets the flex children shrink properly */
    }


    /* Utility row (right side of top header) */
    .header-row-utility {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .header-utility-block {
        /* Each block sizes to its own content */
        display: flex;
        align-items: center;
    }

    .header-safetravels {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.7rem;
        line-height: 1.3;
        color: #333;
    }

    .header-safetravels-mark {
        display: inline-block;
        width: 36px;
        height: 36px;
        background: url(/images/wst.png) center / contain no-repeat;
        flex-shrink: 0;
    }

    .header-safetravels-text {
        max-width: 12em;
    }

    .header-row-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .header-row-nav .menu {
        flex: 1;
    }

    .header-search-btn {
        flex-shrink: 0;
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        color: #000;
        display: flex;
        align-items: center;
    }

    .header-search-btn:hover {
        color: #666;
    }

    /* Buttons */
    .btn {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.85rem 1.5rem;
        border: 1px solid transparent;
        cursor: pointer;
        background: transparent;
        color: inherit;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn-lang {
        background: #000;
        color: #fff;
        padding: 0.85rem 1.25rem;
    }

    .btn-lang:hover {
        background: #333;
    }

    .btn-outline {
        display: inline-block;
        padding: 0.7rem 1.5rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        border: 1px solid #000;
        color: #000;
        background: #fff;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        white-space: nowrap;
        font-family: inherit;
    }

    .btn-outline:hover {
        background: #000;
        color: #fff;
    }

    /* Nav row */
    .header-row-nav {
        border-top: 0;
        justify-content: end;
    }

    .menu {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 2.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .menu-item a {
        display: inline-block;
        padding: 1rem 0;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #000;
        border-bottom: 3px solid transparent;
        transition: border-color 0.15s;
    }

    .menu-item a:hover {
        color: #666;
    }

    .menu-item.is-active a {
        border-bottom-color: #000;
    }

    .header-search-btn {
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        color: #000;
    }

    .header-depcult {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        max-width: 18em;
        font-size: 0.75rem;
        line-height: 1.2;
        color: inherit;
        text-decoration: none;
    }

    .header-depcult::before {
        content: '';
        flex-shrink: 0;
        width: 34px;
        height: 40px;
        background: url(/images/gerb_moskvy.svg) center / contain no-repeat;
    }

    .header-depcult:hover {
        color: #555;
    }

    .top-banner {
        color: #fff;
        background-color: #000;
        text-align: center;
        padding: 1.5rem 0;
    }

    .top-banner-inner {
        display: inline-block;
        max-width: 50vw;
    }

    .top-banner-close {
        position: absolute;
        top: 2rem;
        right: 22vw;
        display: inline-flex;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s ease, transform 0.25s ease;
    }

    .top-banner-close:hover {
        opacity: 1;
        transform: scale(1.12) rotate(90deg);
    }

    .top-banner-close:active {
        transform: scale(0.95) rotate(90deg);
    }

    .top-banner-close svg {
        display: block;
    }

    .top-banner-text {
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .inlinePic .caption,
    .inlinePic img {
        width: 100%;
    }

    .inlinePic .caption {
        padding: 10px 0 10px;
        font-size: 13px;
    }

    /* Responsive: header collapses awkwardly at small sizes — minimal fix for now */
    @media (max-width: 1024px) {
        .header-safetravels-text {
            display: none;
        }

        .header-utility {
            gap: 1rem;
        }
    }

    @media (max-width: 768px) {
        .site-header {
            padding: 1rem;
        }

        .header-safetravels {
            display: none;
        }

        .menu {
            gap: 1.5rem;
            font-size: 0.75rem;
        }
    }
/* PhotoSwipe lightbox — visible caption from the image alt */
.pswp__custom-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}