body {
        display: grid;
        grid-template-columns: 2fr 5fr;
        grid-template-areas: "sidebar main";
        align-items: stretch;
        padding: 0;

        position: relative;
}

.sidebar {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        background-color: var(--accent);
        padding: 2.5rem 2rem;
        text-align: center;
        position: relative;
        z-index: 2;
}

.sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("/images/revue.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 1;
        mix-blend-mode: overlay;
        z-index: -1;
}

.usu {
        display: block;
        margin: auto auto 0 auto;
        width: 50%;
        aspect-ratio: 199.45 / 29.79;
        background-color: currentColor;
        -webkit-mask: url("/usu.svg") center / contain no-repeat;
        mask: url("/usu.svg") center / contain no-repeat;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
}

.sidebar h1 {
        margin-top: auto;
}

/* Logo glyph right before the "E", a touch smaller than the text height.
   Masked so it inherits the heading's colour instead of the baked-in fill. */
.sidebar h1::before {
        content: "";
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        margin-right: 0.2em;
        vertical-align: -0.05em;
        background-color: currentColor;
        -webkit-mask: var(--logo) center / contain no-repeat;
        mask: var(--logo) center / contain no-repeat;
}

.sidebar p {
        margin: 0;
}

.buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
}

.button {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 0.5ch;
        padding: 0.5rem 1rem;
        background: #000;
        color: #fff;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 500;
}

.button::before {
        content: "";
        width: 1.2em;
        height: 1.2em;
        background-color: var(--accent);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

.button--instagram {
        --icon: url("/instagram.svg");
}

.button--tickets {
        --icon: url("/ticket.svg");
}

.button:hover {
        background: #333;
}

.photo-grid {
        grid-area: main;
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        background-color: black;
        gap: 0.5rem;
        --br: 3rem;
}

.photo-grid picture {
        position: relative;
        display: block;
        overflow: hidden;
}

.photo-grid img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        border: 0;
        background: black;
        color: transparent;
}

.photo-grid picture:nth-child(1) {
        border-radius: 0 0 var(--br) 0;
}
.photo-grid picture:nth-child(2) {
        border-radius: 0 0 var(--br) var(--br);
}
.photo-grid picture:nth-child(3) {
        border-radius: 0 0 0 var(--br);
}
.photo-grid picture:nth-child(4) {
        border-radius: 0 var(--br) 0 0;
}
.photo-grid picture:nth-child(5) {
        border-radius: var(--br) var(--br) 0 0;
}
.photo-grid picture:nth-child(6) {
        border-radius: var(--br) 0 0 0;
}

.content {
        grid-area: main;
        display: flex;
        padding: 1rem;
        gap: 1rem;
        color: white;

        position: relative;
        z-index: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}

.quotes {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1rem;
        width: fit-content;
        max-width: min(100%, 40rem);
}

blockquote {
        font-size: clamp(1rem, 2.6vmin, 1.5rem);
        position: relative;
        padding: 4.5rem;
        isolation: isolate;
}

blockquote::before {
        content: "";
        position: absolute;
        inset: 1rem;
        z-index: -1;
        background: rgb(20 20 0 / 0.65);
        border-radius: 3rem;
        filter: blur(2rem);
}

cite {
        display: block;
        margin-top: 0.5rem;
        font-style: italic;
}

@media (max-width: 55rem) {
        body {
                grid-template-columns: 1fr;
                grid-template-areas:
                        "sidebar"
                        "main";
                height: auto;
                min-height: 100%;
        }

        h1 {
                font-size: clamp(2.25rem, 11vw, 3.75rem);
        }

        .sidebar p {
                font-size: clamp(1.15rem, 4.5vw, 1.5rem);
        }

        .button {
                font-size: clamp(1.15rem, 4.5vw, 1.5rem);
        }

        blockquote {
                font-size: clamp(1.15rem, 4vw, 1.5rem);
        }

        .photo-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: repeat(3, minmax(0, 1fr));
                --br: 1rem;
        }

        .photo-grid picture:nth-child(1) {
                border-radius: 0 0 var(--br) 0;
        }
        .photo-grid picture:nth-child(2) {
                border-radius: 0 0 0 var(--br);
        }
        .photo-grid picture:nth-child(3) {
                border-radius: 0 var(--br) var(--br) 0;
        }
        .photo-grid picture:nth-child(4) {
                border-radius: var(--br) 0 0 var(--br);
        }
        .photo-grid picture:nth-child(5) {
                border-radius: 0 var(--br) 0 0;
        }
        .photo-grid picture:nth-child(6) {
                border-radius: var(--br) 0 0 0;
        }
}