.page-home {
    overflow-x: clip;
}

.page-home .page-content {
    position: relative;
    overflow: visible;
    padding-top: 28px;
}

.page-home .city-poster {
    position: relative;
    min-height: 0;
    display: block;
    overflow: visible;
    color: #fff;
    background: var(--night);
    border: 2px solid var(--night);
    border-radius: 4px;
    box-shadow: 9px 10px 0 #c9bba8;
    isolation: isolate;
}

.page-home .hero-content {
    position: relative;
    z-index: 3;
    padding: 20px 38px 18px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 32px 32px;
}

.page-home .hero-content::after {
    position: absolute;
    z-index: 4;
    inset: 0 auto 0 -5px;
    width: 10px;
    content: "";
    background: repeating-linear-gradient(180deg, var(--accent) 0 16px, transparent 16px 25px);
    opacity: .9;
    pointer-events: none;
}

.page-home .hero-content h1 {
    max-width: none;
    margin: 9px 0 6px;
    color: #fff;
    font-size: clamp(2.05rem, 3.25vw, 2.8rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: .98;
}

.page-home .hero-content h1 em {
    position: relative;
    color: var(--accent);
    font-family: var(--display);
    font-style: italic;
    font-weight: 520;
}

.page-home .hero-content h1 em::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 3px;
    content: "";
    background: var(--brand);
    transform: rotate(-1deg);
}

.page-home .hero-lead {
    max-width: 920px;
    margin-bottom: 12px;
    color: #d9cedd;
    font-size: .8rem;
    line-height: 1.42;
}

.page-home .hero-search {
    width: 100%;
    min-height: 48px;
    padding: 4px 4px 4px 13px;
    background: #fffdf8;
    border: 2px solid var(--night);
    border-radius: 3px;
    box-shadow: 5px 5px 0 var(--brand);
}

.page-home .hero-search:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.page-home .hero-search input:focus { outline: 0 !important; }

.page-home .hero-search button {
    align-self: stretch;
    min-height: 38px;
    padding-inline: 18px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 2px;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.page-home .hero-search button:hover { background: var(--brand-dark); }

.page-home .hero-actions {
    margin-top: 9px;
    color: #b8aabd;
    font-size: .64rem;
}

.page-home .hero-actions a {
    padding-bottom: 2px;
    color: #fff;
    border-bottom: 1px solid var(--accent);
}

.page-home .home-city-backdrop {
    position: absolute;
    z-index: -1;
    top: 8px;
    right: calc((100vw - 100%) / -2 + 8px);
    width: clamp(310px, 36vw, 560px);
    height: 520px;
    overflow: hidden;
    opacity: .32;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 20%, var(--sun) 0 44px, transparent 45px),
        linear-gradient(145deg, #28636c, #3d8790 55%, #98d9d9);
    border-left: 2px solid rgba(36, 23, 43, .42);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .62) 18%, #000 48%, #000 100%);
}

.page-home .home-city-backdrop::before {
    position: absolute;
    inset: 0;
    content: "";
    z-index: 0;
    opacity: .2;
    background:
        radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 13px 13px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.page-home .home-city-backdrop::after { display: none; }

.page-home .hero-cityscape {
    left: -8%;
    width: 118%;
    height: 100%;
}

.page-home .hero-city-buildings { stroke-width: 3.2; }

.page-home .hero-city-stamp {
    top: 20px;
    right: 20px;
    padding: 10px 12px 8px;
    background: var(--accent);
    border-width: 2px;
    box-shadow: 5px 5px 0 rgba(36, 23, 43, .72);
    transform: rotate(2deg);
}

.page-home .hero-art-note {
    position: absolute;
    z-index: 5;
    right: 17px;
    bottom: 13px;
    padding: 3px 6px;
    color: #fff;
    background: var(--night);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.page-home .category-programme {
    position: relative;
    z-index: 6;
    margin: 31px 6px 0;
    background: var(--paper);
    border: 2px solid var(--night);
    border-radius: 3px;
    box-shadow: 6px 6px 0 rgba(36, 23, 43, .14);
    transform: rotate(-.25deg);
}

.page-home .category-programme a {
    position: relative;
    min-height: 53px;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 12px;
    border-right: 1.5px solid var(--night);
    border-radius: 0;
    transition: color .15s ease, background .15s ease;
}

.page-home .category-programme a:first-child,
.page-home .category-programme a:last-child { border-radius: 0; }

.page-home .category-programme a:hover {
    color: var(--night);
    background: var(--warning-bg);
}

.page-home .category-programme a small {
    align-self: flex-start;
    color: var(--muted);
    font-size: .48rem;
    font-weight: 800;
}

.page-home .category-programme a > span {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--night);
    background: var(--sun);
    border: 1.5px solid var(--night);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--night);
    font-size: .77rem;
}

.page-home .category-programme a strong {
    color: var(--ink);
    font-size: .7rem;
    line-height: 1.2;
}

.page-home .category-programme a:nth-child(2) > span { background: var(--peach); }
.page-home .category-programme a:nth-child(3) > span { background: var(--accent); }
.page-home .category-programme a:nth-child(4) > span { background: var(--sky); }
.page-home .category-programme a:nth-child(5) > span { color: #fff; background: var(--violet); }

.page-home .poster-section {
    position: relative;
    padding-top: 44px;
}

.page-home .poster-section + .poster-section { padding-top: 58px; }

.page-home .section-head-editorial {
    position: relative;
    align-items: center;
    margin: 0 0 22px;
    padding-bottom: 13px;
    border-bottom: 2px solid var(--night);
}

.page-home .section-head-editorial::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 120px;
    height: 8px;
    content: "";
    background: var(--brand);
    transform: rotate(-1deg);
}

.page-home .section-heading-copy {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-home .section-number {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    color: var(--night);
    background: var(--accent);
    border: 2px solid var(--night);
    box-shadow: 3px 3px 0 var(--night);
    font-size: .72rem;
    font-weight: 850;
    transform: rotate(-3deg);
}

.page-home .section-kicker {
    margin: 0 0 1px;
    color: var(--brand-dark);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-home .section-head-editorial h2 {
    font-size: clamp(1.75rem, 3vw, 2.65rem);
    line-height: 1;
}

.page-home .event-grid-week {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.page-home .event-grid-week > .event-card { grid-column: span 4; }
.page-home .event-grid-week > .event-card:first-child { grid-column: span 6; }
.page-home .event-grid-week > .event-card:nth-child(2) { grid-column: span 6; }

.page-home .event-grid-upcoming {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 20px;
}

.page-home .event-grid-archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.page-home .event-grid-archive .event-card {
    filter: saturate(.68);
}

.page-home .event-grid-archive .event-card:hover { filter: none; }

.page-home .poster-empty {
    border: 2px dashed var(--night);
    border-radius: 3px;
    box-shadow: none;
}

.page-home .subscription-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1.25fr) minmax(320px, .9fr);
    align-items: center;
    gap: 28px;
    overflow: hidden;
    margin-top: 72px;
    padding: 30px 35px 30px 0;
    color: #fff;
    background: var(--lagoon-dark);
    border: 2px solid var(--night);
    border-radius: 3px;
    box-shadow: 8px 8px 0 rgba(36, 23, 43, .17);
}

.page-home .subscription-ticket::before,
.page-home .subscription-ticket::after {
    position: absolute;
    left: 97px;
    width: 24px;
    height: 24px;
    content: "";
    background: var(--canvas);
    border: 2px solid var(--night);
    border-radius: 50%;
}

.page-home .subscription-ticket::before { top: -14px; }
.page-home .subscription-ticket::after { bottom: -14px; }

.page-home .ticket-stub {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 14px;
    color: var(--night);
    background: var(--sun);
    border-right: 2px dashed var(--night);
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 780;
    letter-spacing: .04em;
    line-height: .95;
    text-align: center;
    transform: rotate(-2deg) scale(1.06);
}

.page-home .subscription-copy h2 {
    margin: 11px 0 5px;
    color: #fff;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
}

.page-home .subscription-copy p:last-child {
    color: #c7dfe1;
    font-size: .8rem;
}

.page-home .subscription-form {
    grid-template-columns: 1fr auto;
    padding: 5px;
    background: #fffdf8;
    border: 2px solid var(--night);
    border-radius: 3px;
}

.page-home .subscription-form:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.page-home .subscription-form input {
    border: 0;
    outline: 0 !important;
}

.page-home .publisher-poster {
    position: relative;
    margin-top: 34px;
    color: #fff;
    background:
        linear-gradient(135deg, transparent 0 75%, rgba(255,255,255,.06) 75%),
        var(--brand-dark);
    border: 2px solid var(--night);
    border-radius: 3px;
    box-shadow: 8px 8px 0 rgba(36, 23, 43, .17);
}

.page-home .publisher-poster .publisher-icon {
    color: var(--night);
    background: var(--accent);
    border: 2px solid var(--night);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--night);
    transform: rotate(-4deg);
}

.page-home .publisher-poster h2 { color: #fff; }
.page-home .publisher-poster p { color: #f2d8d4; }
.page-home .publisher-poster .overline {
    color: var(--night);
    background: var(--accent);
    border-color: var(--night);
}

@media (max-width: 1020px) {
    .page-home .hero-content { padding-inline: 30px; }
    .page-home .hero-content h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
    .page-home .category-programme a { padding-inline: 8px; }
    .page-home .category-programme a small { display: none; }
    .page-home .subscription-ticket { grid-template-columns: 90px 1fr; }
    .page-home .subscription-ticket .subscription-form { grid-column: 2; }
    .page-home .subscription-ticket::before,
    .page-home .subscription-ticket::after { left: 77px; }
}

@media (max-width: 820px) {
    .page-home .city-poster {
        min-height: 0;
        display: block;
    }

    .page-home .hero-content::after { display: none; }

    .page-home .hero-content {
        grid-column: 1;
        grid-row: 1;
        padding: 34px 28px 30px;
    }

    .page-home .home-city-backdrop {
        right: -12px;
        width: min(430px, 72vw);
        height: 430px;
        opacity: .2;
    }

    .page-home .category-programme {
        grid-template-columns: repeat(5, minmax(130px, 1fr));
        overflow-x: auto;
        margin-inline: 0;
        transform: none;
        scrollbar-width: thin;
    }

    .page-home .event-grid-week > .event-card,
    .page-home .event-grid-week > .event-card:first-child,
    .page-home .event-grid-week > .event-card:nth-child(2) { grid-column: span 6; }

    .page-home .event-grid-upcoming { grid-template-columns: 1fr; }
    .page-home .publisher-poster { grid-template-columns: auto 1fr; }
    .page-home .publisher-poster > .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 560px) {
    .page-home .page-content { padding-top: 18px; }
    .page-home .city-poster { box-shadow: 5px 6px 0 #c9bba8; }
    .page-home .hero-content { padding: 25px 20px 21px; }
    .page-home .hero-content h1 { max-width: 330px; font-size: 1.9rem; }
    .page-home .hero-lead { font-size: .8rem; }
    .page-home .hero-search { grid-template-columns: 18px minmax(0, 1fr) auto; }
    .page-home .hero-search button { grid-column: auto; width: auto; min-height: 38px; padding-inline: 12px; }
    .page-home .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
    .page-home .home-city-backdrop { width: 290px; height: 360px; opacity: .16; }
    .page-home .category-programme { margin-top: 22px; }
    .page-home .poster-section,
    .page-home .poster-section + .poster-section { padding-top: 44px; }
    .page-home .section-head-editorial { align-items: flex-start; flex-direction: column; gap: 13px; }
    .page-home .section-number { width: 40px; height: 40px; }
    .page-home .section-head-editorial h2 { font-size: 1.72rem; }
    .page-home .event-grid-week { display: grid; grid-template-columns: 1fr; }
    .page-home .event-grid-week > .event-card,
    .page-home .event-grid-week > .event-card:first-child,
    .page-home .event-grid-week > .event-card:nth-child(2) { grid-column: 1; }
    .page-home .event-grid-archive { grid-template-columns: 1fr; }
    .page-home .subscription-ticket {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
    }
    .page-home .ticket-stub { display: none; }
    .page-home .subscription-ticket::before,
    .page-home .subscription-ticket::after { display: none; }
    .page-home .subscription-ticket .subscription-form { grid-column: 1; grid-template-columns: 1fr; }
    .page-home .subscription-form .button { width: 100%; }
    .page-home .publisher-poster { grid-template-columns: 1fr; padding: 24px 20px; }
    .page-home .publisher-poster .publisher-icon { width: 43px; height: 43px; }
    .page-home .publisher-poster > .button { grid-column: 1; }
}