/*
 * Public site: the night from behind the decks, cut like a film. Photographs fill the frame, the
 * names sit on the frame's lower edge, and the page ground takes the light of the photograph in
 * view (site.js sets --live-ground, already clamped so the ink keeps its contrast).
 *
 * Design values (--accent, --accent-ink, --bg, --bg-solid, --font-heading, --font-body,
 * --heading-weight, --heading-transform, --heading-tracking, --hero-h, --hero-overlay) come from
 * the inline <style nonce> generated by App\Design\CssVariables. The accent marks the primary
 * action and the closing band, nothing else.
 */

/* ---------- Tokens ---------- */

:root,
[data-theme=dark] {
    color-scheme: dark;
    --ink: #edeef3;
    --muted: #9ba1b4;
    --line: rgb(237 238 243 / 0.14);
    --line-strong: rgb(237 238 243 / 0.32);
    --surface: color-mix(in srgb, var(--bg-solid) 88%, #ffffff);
}

[data-theme=light] {
    color-scheme: light;
    --ink: #0b0d14;
    --muted: #474c59;
    --line: rgb(11 13 20 / 0.14);
    --line-strong: rgb(11 13 20 / 0.34);
    --surface: color-mix(in srgb, var(--bg-solid) 93%, #000000);
}

:root {
    --on-photo: #ffffff;
    --on-photo-muted: rgb(255 255 255 / 0.78);
    --gutter: clamp(16px, 3.2vw, 48px);
    --header-h: 76px;
    --gap: clamp(88px, 11vw, 176px);
    --measure: 60ch;

    --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-lead: clamp(1.25rem, 1.08rem + 0.75vw, 1.75rem);
    --step-sub: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
    --step-head: clamp(2.75rem, 1.3rem + 5.6vw, 7rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

    /* One slide of the home slideshow; site.js advances when the step bar has filled. */
    --slide: 6500ms;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--bg-solid);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    background-color: var(--bg-solid);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

/* The stage light: the ground takes the tone of the photograph in view (site.js). */
html.has-live-ground body {
    background: var(--live-ground);
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
    letter-spacing: var(--heading-tracking, -0.02em);
    /* Tight tracking narrows the spaces too; give the word gap back. */
    word-spacing: 0.06em;
    /* Room for accents on capitals (Š, Č, Ž) when a heading wraps. */
    line-height: 1;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    text-underline-offset: 0.24em;
}

a:hover {
    text-decoration-color: currentColor;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.site-main {
    flex: 1 0 auto;
}

.site-main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -200px;
    z-index: 100;
    padding: 0.6em 1em;
    background: var(--ink);
    color: var(--bg-solid);
    text-decoration: none;
}

.skip-link:focus {
    top: 8px;
}

.section-title {
    font-size: var(--step-head);
}

.empty-note {
    max-width: var(--measure);
    padding: 0 var(--gutter);
    color: var(--muted);
    font-size: var(--step-lead);
    line-height: 1.4;
}

/* ---------- Button: a flat accent field; the ink wipes across on hover ---------- */

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 54px;
    padding: 0.75em 1.6em;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    isolation: isolate;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent-ink);
    transform: scaleX(0);
    transform-origin: right center;
}

.button:hover {
    color: var(--accent);
}

.button:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.button:active {
    transform: scale(0.97);
}

/* ---------- Header ---------- */

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 30;
    color: var(--ink);
    view-transition-name: site-header;
}

/* Over a photograph the header reads white until it gets its own ground. */
.site:has(.hero--photo) .site-header:not(.is-solid) {
    color: var(--on-photo);
}

.js .site-header {
    position: fixed;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-solid) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}

.site:has(.hero--photo) .site-header:not(.is-solid)::after {
    content: "";
    position: absolute;
    inset: 0 0 -40px;
    z-index: -2;
    background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
    pointer-events: none;
}

.site-header.is-solid::before {
    opacity: 1;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    min-height: var(--header-h);
    padding: 0 var(--gutter);
}

.wordmark {
    margin-right: auto;
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
    letter-spacing: var(--heading-tracking, -0.02em);
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(18px, 2.2vw, 36px);
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding: 10px 0;
    font-size: var(--step-small);
    font-weight: 700;
    text-decoration: none;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.site-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lang-switch,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--step-small);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* The toggle needs JavaScript; theme.js marks <html> with .js. */
.theme-toggle {
    display: none;
}

.js .theme-toggle {
    display: inline-flex;
}

[data-theme=light] .theme-toggle__icon {
    transform: rotate(180deg);
}

/* Mobile menu: checkbox pattern, works without JavaScript and from the keyboard. */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nav-toggle__label {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    font-size: var(--step-small);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.nav-toggle:focus-visible + .nav-toggle__label {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.nav-toggle__close {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --header-h: 62px;
    }

    .site-header__bar {
        flex-wrap: wrap;
        gap: 0 4px;
    }

    .nav-toggle__label {
        display: inline-flex;
        order: 2;
    }

    .site-tools {
        order: 3;
    }

    .site-nav {
        display: none;
        order: 4;
        flex-basis: 100%;
        padding: 6vh 0 40px;
    }

    .site-header:has(.nav-toggle:checked),
    .site:has(.hero--photo) .site-header:has(.nav-toggle:checked) {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        color: var(--ink);
        background: var(--bg-solid);
        transform: none;
    }

    .site-header:has(.nav-toggle:checked)::after,
    .site:has(.hero--photo) .site-header:has(.nav-toggle:checked)::after {
        display: none;
    }

    .nav-toggle:checked ~ .site-nav {
        display: block;
    }

    .nav-toggle:checked + .nav-toggle__label .nav-toggle__open {
        display: none;
    }

    .nav-toggle:checked + .nav-toggle__label .nav-toggle__close {
        display: inline;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list li {
        border-bottom: 1px solid var(--line);
    }

    .site-nav__link {
        display: block;
        padding: 14px 0 10px;
        font-family: var(--font-heading);
        font-weight: var(--heading-weight, 700);
        text-transform: var(--heading-transform, none);
        letter-spacing: var(--heading-tracking, -0.02em);
        font-size: clamp(2.5rem, 12vw, 4rem);
        line-height: 1;
    }

    .site-nav__link::after {
        display: none;
    }

    .site-nav__link[aria-current="page"] {
        color: var(--accent);
    }
}

/* ---------- Hero: the photograph as a film frame, the name on its lower edge ---------- */

.hero {
    --t: clamp(3.5rem, 12vw, 13rem);
    position: relative;
}

.hero--m {
    --t: clamp(2.75rem, 7.4vw, 8.5rem);
}

.hero--l {
    --t: clamp(2.25rem, 5vw, 5.75rem);
}

.hero__stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    min-height: var(--hero-h);
    padding: calc(var(--header-h) + 48px) var(--gutter) clamp(28px, 4vw, 56px);
    overflow: hidden;
}

.hero--photo .hero__stage {
    min-height: max(var(--hero-h), 440px);
    color: var(--on-photo);
    background: #000;
}

.hero--plain .hero__stage {
    min-height: auto;
    padding-top: calc(var(--header-h) + clamp(72px, 12vw, 180px));
    padding-bottom: clamp(40px, 6vw, 80px);
    border-bottom: 1px solid var(--line);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.hero__img.is-active {
    opacity: 1;
    view-transition-name: hero-photo;
}

.hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.35) 38%, rgb(0 0 0 / 0) 62%),
        rgb(0 0 0 / var(--hero-overlay, 0.3));
}

.hero__content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.hero__subtitle {
    max-width: 34ch;
    font-size: var(--step-small);
    font-weight: 700;
    line-height: 1.35;
}

.hero--photo .hero__subtitle {
    color: var(--on-photo-muted);
}

.hero--plain .hero__subtitle {
    color: var(--muted);
}

/* The mask lets the title rise from under a line; its padding keeps diacritics and descenders. */
.hero__mask {
    min-width: 0;
    /* The mask hides the title below its bottom edge while it rises in. Only the bottom and sides are clipped,
       so accents above capitals stay visible. */
    overflow-x: clip;
    clip-path: inset(-100vh 0 -0.08em 0);
    margin-bottom: -0.08em;
    padding-bottom: 0.08em;
}

.hero__title {
    font-size: var(--t);
    line-height: 0.98;
    overflow-wrap: break-word;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    font-size: var(--step-lead);
    line-height: 1.3;
}

.hero__meta li:not(:first-child) {
    position: relative;
}

.hero__meta li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: currentColor;
    transform: translateY(-50%);
}

/* Home: the lead and the night's steps above, the name filling the frame's bottom edge. */
.hero--home .hero__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "sub   side"
        "aside side"
        "title title";
    column-gap: clamp(24px, 4vw, 80px);
    row-gap: 0;
}

.hero--home .hero__content {
    display: contents;
}

.hero--home .hero__subtitle {
    grid-area: sub;
    margin-bottom: 14px;
}

.hero--home .hero__aside {
    grid-area: aside;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px 32px;
    margin-bottom: clamp(20px, 3vw, 40px);
}

.hero--home .hero__mask {
    grid-area: title;
}

.hero--home .hero__title {
    width: max-content;
    max-width: none;
    font-size: var(--fit, var(--t));
    white-space: nowrap;
    line-height: 0.86;
}

.hero--home .hero__side {
    grid-area: side;
    align-self: end;
    display: grid;
    justify-items: end;
    gap: 18px;
    margin-bottom: clamp(20px, 3vw, 40px);
}

.hero__lead {
    max-width: 38ch;
    font-size: var(--step-body);
    line-height: 1.5;
}

.hero--photo .hero__lead {
    color: var(--on-photo-muted);
}

.hero__caption {
    display: grid;
    justify-items: end;
    text-align: right;
    font-size: var(--step-small);
    line-height: 1.35;
}

.hero__caption-name {
    font-weight: 700;
}

.hero__caption-place {
    color: var(--on-photo-muted);
}

/* One bar per frame, named after its event, filling while the frame is on. Needs site.js. */
.hero__night {
    display: none;
    gap: 10px;
}

.js .hero__night {
    display: flex;
}

.hero__night-step {
    position: relative;
    display: block;
    width: clamp(84px, 9vw, 150px);
    padding: 14px 0 4px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-photo-muted);
    cursor: pointer;
}

.hero__night-label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.hero__night-step::before,
.hero__night-step::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgb(255 255 255 / 0.3);
}

.hero__night-step::after {
    background: var(--on-photo);
    transform: scaleX(0);
    transform-origin: left center;
}

.hero__night-step.is-active {
    color: var(--on-photo);
}

.hero__night-step.is-active::after,
.hero__night-step.is-done::after {
    transform: scaleX(1);
}

.hero__night-step:focus-visible {
    outline-offset: 6px;
}

/* Below the frame on category and event pages: the description beside the actions. */
.hero__intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px clamp(32px, 6vw, 120px);
    padding: clamp(48px, 7vw, 112px) var(--gutter) 0;
}

.hero__intro .hero__aside {
    max-width: var(--measure);
    font-size: var(--step-lead);
    line-height: 1.45;
}

.hero__intro .hero__side {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 32px;
}

.hero__text p + p {
    margin-top: 0.9em;
}

/* The nights of a category, listed beside its description. */
.hero__nights {
    width: 100%;
    border-top: 1px solid var(--line);
}

.hero__nights li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.hero__nights a {
    font-weight: 700;
}

.hero__nights time {
    color: var(--muted);
    font-size: var(--step-small);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .hero__intro {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .hero {
        --t: clamp(2.75rem, 15vw, 5rem);
    }

    .hero--m {
        --t: clamp(2.25rem, 11vw, 4rem);
    }

    .hero--l {
        --t: clamp(2rem, 8.5vw, 3rem);
    }

    .hero--home .hero__stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "sub"
            "title"
            "aside"
            "side";
    }

    .hero--home .hero__title {
        width: auto;
        font-size: clamp(3.25rem, 16.5vw, 7rem);
        overflow-wrap: normal;
        white-space: normal;
        line-height: 0.98;
    }

    .hero--home .hero__mask {
        margin-bottom: 20px;
    }

    .hero--home .hero__aside {
        margin-bottom: 28px;
    }

    .hero--home .hero__side {
        justify-items: start;
        width: 100%;
        margin-bottom: 0;
    }

    .hero__caption {
        justify-items: start;
        text-align: left;
    }

    .hero__night {
        width: 100%;
    }

    .hero__night li {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero__night-step {
        width: 100%;
        font-size: 0.6875rem;
    }

    .hero--home .hero__aside .button {
        width: 100%;
    }
}

/* ---------- Nights: wide film frames that open as they arrive ---------- */

.nights {
    padding-top: var(--gap);
}

.nights__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 24px clamp(32px, 6vw, 120px);
    padding: 0 var(--gutter);
    margin-bottom: clamp(40px, 5vw, 80px);
}

.nights__intro {
    max-width: 46ch;
    color: var(--muted);
    font-size: var(--step-lead);
    line-height: 1.45;
}

.nights__intro p + p {
    margin-top: 0.8em;
}

.nights__panels {
    display: grid;
    gap: clamp(16px, 2.4vw, 40px);
    padding: 0 var(--gutter);
}

.night {
    --p: 0.5;
    --open: 1;
}

.night__link {
    position: relative;
    display: block;
    color: var(--on-photo);
    text-decoration: none;
}

.night__media {
    position: relative;
    height: clamp(380px, 82svh, 920px);
    overflow: hidden;
    background: #000;
    clip-path: inset(calc((1 - var(--open)) * 9%) calc((1 - var(--open)) * 7%) round 2px);
}

.night__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.2) 34%, rgb(0 0 0 / 0) 55%);
}

.night__img {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    transform: translate3d(0, calc((var(--p) - 0.5) * -12%), 0);
}

.night__img--placeholder {
    object-fit: contain;
    padding: 12%;
    opacity: 0.35;
}

.night__row {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title arrow"
        "facts arrow";
    align-items: end;
    gap: 14px 32px;
    padding: clamp(20px, 3.4vw, 56px);
}

.night__title {
    grid-area: title;
    font-size: var(--step-head);
    line-height: 1;
}

.night__facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    color: var(--on-photo-muted);
    font-size: var(--step-body);
}

.night__date {
    font-variant-numeric: tabular-nums;
}

.night__place {
    position: relative;
}

.night__date + .night__place::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: currentColor;
    transform: translateY(-50%);
}

.night__arrow {
    grid-area: arrow;
    width: clamp(36px, 4vw, 56px);
    height: auto;
}

.night__link:focus-visible {
    outline: none;
}

.night__link:focus-visible .night__media {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
}

@media (max-width: 760px) {
    .nights__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .night__media {
        height: clamp(360px, 72svh, 640px);
    }

    .night__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .night__title {
        font-size: clamp(2.25rem, 11vw, 3.5rem);
    }

    .night__arrow {
        width: 32px;
    }

    .night__facts {
        flex-direction: column;
    }

    .night__date + .night__place::before {
        display: none;
    }
}

/* ---------- Line-up: every night as one row; the photo follows the pointer ---------- */

.lineup {
    padding: var(--gap) var(--gutter) 0;
}

.lineup__title {
    margin-bottom: clamp(40px, 5vw, 80px);
}

.lineup__part {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 16px clamp(24px, 4vw, 64px);
    padding: 28px 0 40px;
    border-top: 1px solid var(--line-strong);
}

.lineup__heading {
    font-family: var(--font-body);
    font-size: var(--step-small);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    padding-top: 8px;
}

.lineup__heading a {
    text-decoration: none;
}

.lineup__heading a:hover {
    text-decoration: underline;
}

.lineup__rows li + li {
    border-top: 1px solid var(--line);
}

.lineup__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) auto;
    align-items: baseline;
    gap: 6px 32px;
    padding: 16px 0 18px;
    text-decoration: none;
}

.lineup__name {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
    letter-spacing: var(--heading-tracking, -0.02em);
    font-size: var(--step-sub);
    line-height: 1;
}

.lineup__place,
.lineup__date {
    color: var(--muted);
    font-size: var(--step-small);
}

.lineup__date {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lineup__row:focus-visible {
    outline-offset: 2px;
}

.lineup__empty {
    padding-top: 8px;
    color: var(--muted);
}

/* The floating preview (site.js; fine pointers only). */
.lineup-preview {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    width: clamp(220px, 22vw, 360px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(40px, -50%) scale(0.85) rotate(var(--tilt, 0deg));
    border-radius: 2px;
}

.lineup-preview.is-on {
    opacity: 1;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(40px, -50%) scale(1) rotate(var(--tilt, 0deg));
}

.lineup-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 760px) {
    .lineup__part {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .lineup__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name name"
            "place date";
    }

    .lineup__name {
        grid-area: name;
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .lineup__place {
        grid-area: place;
    }

    .lineup__date {
        grid-area: date;
    }
}

/* ---------- Event page: share, gallery ---------- */

.share {
    display: grid;
    gap: 10px;
}

.share__label {
    color: var(--muted);
    font-size: var(--step-small);
}

.share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share__list li:has(> [hidden]) {
    display: none;
}

.share__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--step-small);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.share__link:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg-solid);
}

.share__status {
    min-height: 1.4em;
    color: var(--muted);
    font-size: var(--step-small);
}

.button--drive {
    min-width: min(100%, 280px);
}

.gallery-section {
    padding: var(--gap) var(--gutter) 0;
}

.gallery-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 32px;
    margin-bottom: clamp(32px, 4vw, 64px);
}

.gallery-section__head .section-title {
    margin-right: auto;
}

.gallery-section__count {
    color: var(--muted);
    font-size: var(--step-small);
    font-variant-numeric: tabular-nums;
}

.gallery-section__more {
    font-size: var(--step-small);
    font-weight: 700;
    text-decoration-color: currentColor;
}

.gallery-section .empty-note {
    padding: 0;
}

.gallery-wrap {
    width: 100%;
}

.gallery {
    --gal-gap: clamp(6px, 0.8vw, 12px);
    gap: var(--gal-gap);
}

.gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--surface);
    cursor: zoom-in;
}

.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0);
    pointer-events: none;
}

.gallery__item:hover::after {
    background: rgb(0 0 0 / 0.12);
}

.gallery__item:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.gallery__img {
    width: 100%;
}

.gallery--grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery--grid .gallery__item {
    aspect-ratio: 1;
}

.gallery--grid .gallery__img {
    height: 100%;
    object-fit: cover;
}

.gallery--masonry {
    columns: 3;
    column-gap: var(--gal-gap);
}

.gallery--masonry .gallery__item {
    margin-bottom: var(--gal-gap);
    break-inside: avoid;
}

.gallery--justified {
    display: flex;
    flex-wrap: wrap;
}

.gallery--justified .gallery__item {
    flex: 1 1 280px;
    height: 280px;
}

.gallery--justified .gallery__img {
    height: 100%;
    object-fit: cover;
}

.gallery--justified.is-justified .gallery__item {
    flex: none;
}

.gallery--stack {
    display: grid;
    gap: clamp(16px, 3vw, 48px);
    max-width: 1280px;
    margin: 0 auto;
}

.gallery--stack .gallery__img {
    width: 100%;
}

@media (max-width: 900px) {
    .gallery--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gallery--grid,
    .gallery--masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        columns: 2;
    }

    .gallery--justified .gallery__item {
        flex-basis: 180px;
        height: 180px;
    }
}

/* PhotoSwipe: quiet chrome over a black ground. */
.pswp {
    --pswp-bg: #000;
    --pswp-placeholder-bg: #111318;
    --pswp-icon-color: #ffffff;
    --pswp-icon-color-secondary: rgb(0 0 0 / 0.4);
}

.pswp__counter {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

/* ---------- Contact ---------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px) clamp(32px, 6vw, 120px);
    padding: calc(var(--header-h) + clamp(64px, 10vw, 160px)) var(--gutter) 0;
}

.contact__title {
    grid-column: 1 / -1;
    font-size: clamp(3.5rem, 13vw, 14rem);
    line-height: 0.96;
}

.contact__head {
    display: grid;
    align-content: start;
    gap: 28px;
}

.contact__lead {
    max-width: 30ch;
    font-size: var(--step-lead);
    line-height: 1.4;
}

.contact__facts-title {
    padding-top: 20px;
    border-top: 1px solid var(--line-strong);
    font-family: var(--font-body);
    font-size: var(--step-small);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}

.contact__facts {
    display: grid;
    gap: 0;
    margin-top: -14px;
}

.contact__facts li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.contact__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact__social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--step-small);
    font-weight: 700;
    text-decoration: none;
}

.contact__social a:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg-solid);
}

@media (max-width: 899px) {
    .contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

.form {
    display: grid;
    gap: 28px;
}

.form__row {
    display: grid;
    gap: 28px;
}

@media (min-width: 600px) {
    .form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form__field {
    display: grid;
    gap: 6px;
}

.form label {
    color: var(--muted);
    font-size: var(--step-small);
    font-weight: 700;
}

.form__optional {
    font-weight: 400;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    min-height: 52px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--step-lead);
    line-height: 1.3;
    box-shadow: inset 0 -2px 0 0 transparent;
}

.form select {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.form select option {
    background: var(--bg-solid);
    color: var(--ink);
}

.form textarea {
    min-height: 180px;
    resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
    outline: none;
}

.form [aria-invalid="true"] {
    border-bottom-color: #ff5a5f;
    box-shadow: inset 0 -2px 0 0 #ff5a5f;
}

[data-theme=light] .form [aria-invalid="true"] {
    border-bottom-color: #b3141b;
    box-shadow: inset 0 -2px 0 0 #b3141b;
}

.form-error {
    color: #ff8589;
    font-size: var(--step-small);
}

[data-theme=light] .form-error {
    color: #b3141b;
}

.form button.button {
    justify-self: start;
    margin-top: 8px;
}

.form-notice {
    margin-bottom: 28px;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
}

.form-notice--error {
    border-left-color: #ff5a5f;
}

.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Frames: a strip from behind the booth (category, contact, error pages) ---------- */

.frames {
    padding: var(--gap) var(--gutter) 0;
}

.frames__title {
    max-width: 14ch;
    margin-bottom: clamp(32px, 4vw, 64px);
}

.frames__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 16px);
    align-items: start;
}

.frames__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.frames__row > :nth-child(even) {
    margin-top: clamp(24px, 6vw, 96px);
}

@media (max-width: 760px) {
    .frames__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Error page ---------- */

.error-page {
    display: grid;
    gap: 32px;
    padding: calc(var(--header-h) + clamp(64px, 10vw, 140px)) var(--gutter) 0;
}

.error-page__code {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    letter-spacing: var(--heading-tracking, -0.02em);
    font-size: clamp(7rem, 30vw, 28rem);
    line-height: 0.78;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 2px var(--ink);
}

.error-page__text {
    display: grid;
    justify-items: start;
    gap: 20px;
    max-width: 36rem;
}

.error-page__title {
    font-size: var(--step-sub);
}

.error-page__lead {
    color: var(--muted);
    font-size: var(--step-lead);
    line-height: 1.4;
}

/* ---------- Close: one word is the button, then a quiet line ---------- */

.cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;
    margin-top: var(--gap);
    padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(20px, 2vw, 32px);
    overflow: hidden;
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
}

.cta:focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: -8px;
}

.cta__lead {
    max-width: 34ch;
    font-size: var(--step-lead);
    font-weight: 700;
    line-height: 1.3;
}

.cta__arrow {
    width: clamp(40px, 5vw, 80px);
    height: auto;
}

.cta__word {
    grid-column: 1 / -1;
    display: block;
    margin-top: clamp(24px, 6vw, 96px);
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
    letter-spacing: var(--heading-tracking, -0.02em);
    font-size: var(--fit, clamp(4rem, 22vw, 26rem));
    line-height: 0.78;
    white-space: nowrap;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    padding: 28px var(--gutter) 32px;
    color: var(--muted);
    font-size: var(--step-small);
}

.cta + .site-footer {
    border-top: 0;
}

.site-footer__what {
    margin-right: auto;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
}

body:not(:has(.cta)) .site-footer {
    margin-top: var(--gap);
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ---------- Legal (privacy policy) ---------- */

.legal {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px) clamp(32px, 6vw, 120px);
    padding: calc(var(--header-h) + clamp(64px, 10vw, 160px)) var(--gutter) clamp(64px, 8vw, 128px);
}

.legal__head {
    display: grid;
    align-content: start;
    gap: 28px;
}

.legal__title {
    font-size: clamp(2.75rem, 6.5vw, 6.5rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.legal__lead {
    max-width: 34ch;
    font-size: var(--step-lead);
    line-height: 1.4;
}

.legal__contact {
    padding-top: 20px;
    border-top: 1px solid var(--line-strong);
    font-weight: 700;
}

.legal__contact a {
    overflow-wrap: anywhere;
}

.legal__body {
    display: grid;
    gap: 0;
    max-width: 68ch;
}

.legal__section {
    display: grid;
    gap: 14px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}

.legal__section:first-child {
    padding-top: 0;
}

.legal__heading {
    font-family: var(--font-body);
    font-size: var(--step-lead);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.legal__num {
    display: inline-block;
    min-width: 2ch;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.legal__section p {
    line-height: 1.6;
}

.legal__updated {
    padding-top: 24px;
    color: var(--muted);
    font-size: var(--step-small);
}

@media (min-width: 900px) {
    .legal__head {
        position: sticky;
        top: calc(var(--header-h) + 32px);
        align-self: start;
    }
}

@media (max-width: 899px) {
    .legal {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Motion (only when the visitor allows it) ---------- */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 260ms var(--ease-out) both vt-out;
    }

    ::view-transition-new(root) {
        animation: 520ms var(--ease-out) 80ms both vt-in;
    }

    ::view-transition-group(hero-photo) {
        animation-duration: 760ms;
        animation-timing-function: var(--ease-in-out);
    }

    ::view-transition-old(hero-photo),
    ::view-transition-new(hero-photo) {
        height: 100%;
        object-fit: cover;
        overflow: clip;
    }

    html.has-live-ground body {
        transition: background-color 1200ms ease;
    }

    a,
    .share__link,
    .contact__social a {
        transition: text-decoration-color 200ms ease, color 200ms ease, background-color 200ms ease, border-color 200ms ease;
    }

    .button {
        transition: color 420ms var(--ease-out), transform 140ms var(--ease-out);
    }

    .button::before {
        transition: transform 520ms var(--ease-expo);
    }

    .site-nav__link::after {
        transition: transform 420ms var(--ease-expo);
    }

    .theme-toggle__icon {
        transition: transform 500ms var(--ease-out);
    }

    .js .site-header {
        transition: transform 520ms var(--ease-expo), color 300ms ease;
    }

    .site-header::before {
        transition: opacity 300ms ease;
    }

    /* Mobile menu: the links come in one after another. */
    .nav-toggle:checked ~ .site-nav .site-nav__list li {
        animation: rise 640ms var(--ease-expo) both;
    }

    .nav-toggle:checked ~ .site-nav .site-nav__list li:nth-child(2) { animation-delay: 50ms; }
    .nav-toggle:checked ~ .site-nav .site-nav__list li:nth-child(3) { animation-delay: 100ms; }
    .nav-toggle:checked ~ .site-nav .site-nav__list li:nth-child(4) { animation-delay: 150ms; }
    .nav-toggle:checked ~ .site-nav .site-nav__list li:nth-child(5) { animation-delay: 200ms; }
    .nav-toggle:checked ~ .site-nav .site-nav__list li:nth-child(n+6) { animation-delay: 250ms; }

    /* Hero load: the frame settles, the title rises from under its line, the notes follow. */
    .js .hero__img.is-active {
        animation: drift 9s var(--ease-soft) both;
    }

    .js .hero__title {
        animation: rise-mask 1100ms var(--ease-expo) 120ms both;
    }

    .js .hero__subtitle,
    .js .hero__meta,
    .js .hero__intro {
        animation: rise 800ms var(--ease-out) 380ms both;
    }

    .js .hero__aside,
    .js .hero__side {
        animation: rise 800ms var(--ease-out) 520ms both;
    }

    .js .hero__intro .hero__aside,
    .js .hero__intro .hero__side {
        animation: none;
    }

    /* Home, first visit of the session: the letterbox opens on the night, then the name rises. */
    .hero__bars {
        display: none;
    }

    .js:not(.intro-seen) .hero__bars {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        pointer-events: none;
    }

    .js:not(.intro-seen) .hero__bars::before,
    .js:not(.intro-seen) .hero__bars::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 50.5%;
        background: #000;
        animation: bar-open 1300ms var(--ease-in-out) 200ms both;
    }

    .js:not(.intro-seen) .hero__bars::before {
        top: 0;
        transform-origin: top center;
    }

    .js:not(.intro-seen) .hero__bars::after {
        bottom: 0;
        transform-origin: bottom center;
    }

    .js:not(.intro-seen) .hero--home .hero__img.is-active {
        animation: drift-in 2600ms var(--ease-expo) 200ms both;
    }

    .js:not(.intro-seen) .hero--home .hero__title {
        animation-delay: 1050ms;
        animation-duration: 1300ms;
    }

    .js:not(.intro-seen) .hero--home .hero__subtitle {
        animation-delay: 1300ms;
    }

    .js:not(.intro-seen) .hero--home .hero__aside,
    .js:not(.intro-seen) .hero--home .hero__side {
        animation-delay: 1450ms;
    }

    .js:not(.intro-seen) .site:has(.hero--home) .site-header__bar {
        animation: fade 900ms ease 1500ms both;
    }

    /* Slideshow: crossfade with a slow push; the step bar fills while the frame is on. */
    .hero--run .hero__img {
        transition: opacity 1600ms var(--ease-soft);
    }

    .js .hero--run.is-playing .hero__night-step.is-active::after {
        transform: scaleX(0);
        animation: fill var(--slide) linear both;
    }

    .js:not(.intro-seen) .hero--run.is-playing .hero__night-step.is-active[data-step="0"]::after {
        animation-delay: 1400ms;
    }

    .js .hero--run.is-paused .hero__night-step.is-active::after {
        animation-play-state: paused;
    }

    .hero__night-step::after {
        transition: transform 400ms var(--ease-out);
    }

    .hero__night-step {
        transition: color 300ms ease;
    }

    .hero__caption {
        transition: opacity 400ms ease;
    }

    .hero__caption.is-swapping {
        opacity: 0;
    }

    /* Nights: the photo grows on hover; its drift and aperture follow the scroll (site.js). */
    .night__img {
        transition: scale 1200ms var(--ease-expo);
    }

    .night__link:hover .night__img {
        scale: 1.04;
    }

    .night__arrow {
        transition: transform 600ms var(--ease-expo);
    }

    .night__link:hover .night__arrow {
        transform: translate(6px, -6px);
    }

    /* Line-up: the row under the pointer stays lit, the others step back. */
    .lineup__row {
        transition: opacity 400ms ease;
    }

    .lineup__name {
        display: inline-block;
        transition: transform 600ms var(--ease-expo);
    }

    @media (hover: hover) {
        .lineup__row:hover .lineup__name {
            transform: translateX(14px);
        }

        .lineup__rows:hover .lineup__row:not(:hover) {
            opacity: 0.38;
        }
    }

    .lineup-preview {
        transition: opacity 300ms ease, transform 500ms var(--ease-expo);
    }

    /* Gallery and frames. */
    .gallery__img {
        transition: transform 1100ms var(--ease-expo);
    }

    .gallery__item::after {
        transition: background-color 400ms ease;
    }

    .gallery__item:hover .gallery__img {
        transform: scale(1.035);
    }

    /* Entrances, once (site.js adds data-reveal, the stagger and then .is-in). */
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-expo);
        transition-delay: var(--delay, 0ms);
    }

    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }

    .js .gallery__item[data-reveal] {
        transform: translateY(40px) scale(0.98);
    }

    .js .gallery__item[data-reveal].is-in {
        transform: none;
    }

    .cta__arrow {
        transition: transform 700ms var(--ease-expo);
    }

    .cta:hover .cta__arrow {
        transform: translate(8px, -8px) rotate(45deg);
    }

    .cta__word {
        transition: transform 900ms var(--ease-expo);
    }

    .cta:hover .cta__word {
        transform: translateX(1.5%);
    }

    .js .error-page__code,
    .js .contact__title {
        animation: rise 1000ms var(--ease-expo) 80ms both;
    }

    @keyframes rise {
        from { opacity: 0; transform: translateY(28px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes rise-mask {
        from { transform: translateY(105%); }
        to { transform: none; }
    }

    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes drift {
        from { transform: scale(1.08); }
        to { transform: scale(1); }
    }

    @keyframes drift-in {
        from { transform: scale(1.22); }
        to { transform: scale(1.02); }
    }

    @keyframes bar-open {
        from { transform: scaleY(1); }
        to { transform: scaleY(0); }
    }

    @keyframes fill {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    @keyframes vt-out {
        to { opacity: 0; }
    }

    @keyframes vt-in {
        from { opacity: 0; transform: translateY(16px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__bars {
        display: none;
    }
}

/* --- agent 1 calendar import --- */
/* (add rules below; keep this marker) */

/* --- agent 2 planned events admin --- */
/* (add rules below; keep this marker) */

/* --- agent 3 cron and mail --- */
/* (add rules below; keep this marker) */

/* --- agent 4 remember me --- */
/* (add rules below; keep this marker) */

/* --- agent 5 drive matcher and public upcoming --- */
/* (add rules below; keep this marker) */

/* ---------- Upcoming: dates pinned like a tour poster (page + home block) ---------- */

.upcoming {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px) clamp(32px, 6vw, 120px);
    padding: calc(var(--header-h) + clamp(64px, 10vw, 160px)) var(--gutter) clamp(64px, 8vw, 128px);
}

.upcoming__head {
    display: grid;
    align-content: start;
    gap: 28px;
}

.upcoming__title {
    font-size: clamp(2.75rem, 6.5vw, 6.5rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.upcoming__lead {
    max-width: 34ch;
    padding-top: 20px;
    border-top: 1px solid var(--line-strong);
    font-size: var(--step-lead);
    line-height: 1.4;
}

.upcoming__empty {
    max-width: 40ch;
    color: var(--muted);
    font-size: var(--step-lead);
    line-height: 1.4;
}

.gigs {
    display: grid;
    border-top: 1px solid var(--line-strong);
}

.gig {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.32fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px clamp(20px, 3vw, 48px);
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--line);
}

.gig__date {
    display: grid;
    gap: 6px;
}

.gig__day {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
    letter-spacing: var(--heading-tracking, -0.02em);
    font-size: var(--step-sub);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gig__weekday {
    color: var(--muted);
    font-size: var(--step-small);
}

.gig__main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.gig__name {
    font-size: var(--step-sub);
    line-height: 1;
    overflow-wrap: anywhere;
}

.gig__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    color: var(--muted);
    font-size: var(--step-small);
}

.gig__facts > span {
    position: relative;
}

.gig__facts > span + span::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--accent);
    transform: translateY(-50%);
}

.gig__time {
    font-variant-numeric: tabular-nums;
}

/* Home block: the next three under a full-width title. */
.upnext {
    padding: var(--gap) var(--gutter) 0;
}

.upnext__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(40px, 5vw, 80px);
}

.upnext__all {
    font-size: var(--step-small);
    font-weight: 700;
}

@media (min-width: 900px) {
    .upcoming__head {
        position: sticky;
        top: calc(var(--header-h) + 32px);
        align-self: start;
    }
}

@media (max-width: 899px) {
    .upcoming {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .gig {
        grid-template-columns: minmax(0, 1fr);
    }

    .gig__date {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 14px;
    }

    .gig__day {
        font-size: var(--step-lead);
    }

    .gig__name {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
}