/*
 * assets/styles/app.css
 * The site's one stylesheet: design tokens, then base styles, then components.
 *
 * Phone first. The home page is a stack of full-screen screens, one swipe
 * each; its motion plays on load, when a screen arrives (.in, added by
 * assets/js/reveal.js) or on a tap, never with the scroll position. Hidden
 * starting states only apply under .motion, which the script sets, so a page
 * without JavaScript is complete. Under prefers-reduced-motion, movement
 * gives way to plain fades and nothing loops.
 */

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

@font-face {
    font-family: "Red Hat Display";
    src: url("../fonts/red-hat-display-latin-HVerp0d.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Text";
    src: url("../fonts/red-hat-text-latin-YSl9iUw.woff2") format("woff2");
    font-weight: 400 500;
    font-display: swap;
}

/* Handwriting, for the contact page's postcard; only that page downloads it. */
@font-face {
    font-family: "Caveat";
    src: url("../fonts/caveat-latin-jM9h_2u.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
}

:root {
    /* The lake at different hours: each home screen is a shade deeper. */
    --mist: #EEF2F3;
    --sky: #D8E3E9;
    --sky-2: #CAD9E1;
    --sky-3: #B8CBD6;
    --mountain-far: #AFC1CC;
    --mountain-mid: #8FA7B7;
    --mountain-near: #728FA2;
    --lake: #7FA2B7;
    --lake-light: #AFC7D5;
    /* The evening: the sunset sky, the mountains against it, the lake at dusk. */
    --dusk-rose: #D8B7A8;
    --dusk-peach: #E8A882;
    --dusk-ember: #D69A84;
    --dusk-mountain-far: #8C7F8C;
    --dusk-mountain-near: #6D6776;
    --lake-deep: #52788F;
    --lake-dusk: #3B5C72;
    --night: #24394A;
    /* The setting sun, from gold to the logo's red, in step with its descent. */
    --sun-gold: #F7D9A0;
    --sun-amber: #F5C77F;
    --sun-orange: #F0A060;
    --sun-ember: #E4643F;
    --ink: #39322D;
    --muted: #6F6861;
    /* The red of the band's logo (assets/logo/shameless-logo.svg). */
    --red: #DC273A;
    --sun: 243 204 153;
    --card: #FFFFFF;

    --font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    --font-text: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    --gutter: 20px;
    --column: 30rem;
    --radius-card: 12px;
    --radius-photo: 10px;
    --shadow-soft: 0 14px 30px rgb(57 50 45 / 0.18);
    --nav-clearance: calc(96px + env(safe-area-inset-bottom, 0px));

    --ease-bounce: cubic-bezier(0.25, 1.5, 0.4, 1);
    --ease-settle: cubic-bezier(0.2, 1.25, 0.35, 1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

html {
    -webkit-text-size-adjust: 100%;
}

/* A component's display (the menu's flex) must not bring back what hidden hides. */
[hidden] {
    display: none !important;
}

html.snap {
    scroll-snap-type: y mandatory;
}

/* Links within a page (the menu, back to the top) glide instead of jumping. */
html {
    scroll-behavior: smooth;
}

/* A page that comes back at a part of itself (the contact page's card) lands there at once. */
html.jump {
    scroll-behavior: auto;
}

body {
    margin: 0;
    background: var(--mist);
    color: var(--ink);
    font: 400 1rem/1.5 var(--font-text);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

/* Stagger index for the children of a list that enters one item after another. */
.stagger > :nth-child(1) { --n: 0; }
.stagger > :nth-child(2) { --n: 1; }
.stagger > :nth-child(3) { --n: 2; }
.stagger > :nth-child(4) { --n: 3; }
.stagger > :nth-child(5) { --n: 4; }
.stagger > :nth-child(6) { --n: 5; }
.stagger > :nth-child(7) { --n: 6; }
.stagger > :nth-child(8) { --n: 7; }
.stagger > :nth-child(9) { --n: 8; }

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

/* Read by assistive technology, not shown: a name for something only drawn. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * An icon (Lucide's, through ux_icon; config/packages/ux_icons.yaml): a line
 * drawing in the text's colour, a little larger than the text, never squeezed
 * in a row. --icon-line sets its lines' width; .icon--solid fills its shape.
 */
.icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
}

.icon * {
    stroke-width: var(--icon-line, 2);
}

.icon--solid * {
    fill: currentColor;
}

/* ---------- Screen ---------- */

.screen {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding-block: 56px var(--nav-clearance);
    padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2));
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.screen--dawn { background: linear-gradient(180deg, var(--mist), var(--sky) 80%); }
.screen--morning { background: linear-gradient(180deg, var(--sky), var(--sky-2)); }
.screen--noon { background: linear-gradient(180deg, var(--sky-2), var(--sky-3)); }
.screen--lake { background: linear-gradient(180deg, var(--lake), var(--lake-deep)); color: var(--card); }

.screen-title {
    margin: 0;
    font: 900 clamp(36px, 11.5vw, 56px)/0.95 var(--font-display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.empty,
.hint {
    margin: 0;
    color: var(--muted);
}

.hint {
    text-align: center;
    font-size: 0.8125rem;
}

/*
 * On wide screens the content column widens and the titles grow with the
 * screen; each component below scales its own content, fitted to the screen's
 * height since every screen is one screen tall.
 */
@media (min-width: 900px) {
    :root {
        --column: 80rem;
    }

    .screen-title {
        font-size: clamp(56px, 3.6vw + 2svh, 104px);
    }

    .empty,
    .hint {
        font-size: clamp(0.875rem, 0.4vw + 0.5svh, 1.125rem);
    }
}

/* ---------- Hero ---------- */

.hero {
    justify-content: space-between;
    padding-top: 64px;
}

.beam {
    position: absolute;
    top: -6%;
    width: 72%;
    height: 80%;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--sun) / 0.6), rgb(var(--sun) / 0) 80%);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    filter: blur(10px);
    transform-origin: 50% 0;
}

.beam--left {
    left: -24%;
    transform: rotate(-24deg);
    animation: beam-in-left 1.5s var(--ease-out) both, sway-left 7s 1.7s ease-in-out infinite alternate;
}

.beam--right {
    right: -24%;
    transform: rotate(24deg);
    animation: beam-in-right 1.5s var(--ease-out) both, sway-right 8s 1.7s ease-in-out infinite alternate;
}

@keyframes beam-in-left { from { transform: rotate(-72deg); opacity: 0; } }
@keyframes beam-in-right { from { transform: rotate(72deg); opacity: 0; } }
@keyframes sway-left { from { transform: rotate(-24deg); } to { transform: rotate(-13deg); } }
@keyframes sway-right { from { transform: rotate(24deg); } to { transform: rotate(14deg); } }

.hero-title {
    position: relative;
}

/* The band's logo (templates/_logo.svg.twig): its letters drop in, then the icon spins into place. */
.logo {
    width: min(100%, 34rem);
    margin: 0;
    color: var(--ink);
}

.logo-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.logo-icon {
    fill: var(--red);
}

.logo-letters {
    fill: currentColor;
}

.logo .logo-letters path {
    transform-box: fill-box;
    animation: drop 0.8s var(--ease-bounce) both;
    animation-delay: calc(0.45s + var(--n) * 0.06s);
}

.logo .logo-icon path {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin-in 1.1s var(--ease-bounce) 1.05s both;
}

@keyframes drop { from { transform: translateY(-130%); opacity: 0; } }
@keyframes spin-in { from { transform: rotate(-200deg) scale(0.3); opacity: 0; } }

.tagline {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: fade 0.8s 1.2s both;
}

.view {
    position: relative;
    display: flex;
    flex-direction: column;
}

.scene {
    position: relative;
    height: 120px;
    margin-inline: calc(-1 * max(var(--gutter), (100vw - var(--column)) / 2));
}

.mountains {
    position: absolute;
    inset: auto 0 44px;
    width: 100%;
    height: 92px;
    overflow: visible;
}

.mountain {
    animation: rise 1.4s var(--ease-out) both;
}

.mountain--far { fill: var(--mountain-far); animation-delay: 0.2s; }
.mountain--mid { fill: var(--mountain-mid); animation-delay: 0.35s; }
.mountain--near { fill: var(--mountain-near); animation-delay: 0.5s; }

@keyframes rise { from { transform: translateY(42px); opacity: 0; } }

.lake {
    position: absolute;
    inset: auto 0 0;
    height: 46px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--lake), var(--lake-light));
}

.lake i {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.6);
    animation: shimmer 5s ease-in-out infinite;
}

.lake i:nth-child(1) { top: 10px; left: 8%; width: 16%; animation-delay: -1s; }
.lake i:nth-child(2) { top: 20px; left: 40%; width: 22%; animation-delay: -2.5s; }
.lake i:nth-child(3) { top: 30px; left: 70%; width: 14%; animation-delay: -0.5s; }
.lake i:nth-child(4) { top: 16px; left: 84%; width: 10%; animation-delay: -4s; }

@keyframes shimmer {
    0%, 100% { transform: translateX(-14px); opacity: 0.25; }
    50% { transform: translateX(14px); opacity: 0.85; }
}

.photo {
    position: relative;
    margin-top: -30px;
    border-radius: var(--radius-photo);
    overflow: hidden;
    box-shadow: 0 18px 40px rgb(57 50 45 / 0.22);
    clip-path: inset(0 0 0 0 round var(--radius-photo));
    animation: emerge 1.2s 1s var(--ease-out) both;
}

.photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* A glint of light crossing the photo once it is out of the lake. */
.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.75) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: glint 1.3s 2.2s ease-in-out both;
    pointer-events: none;
}

@keyframes emerge {
    from {
        clip-path: inset(100% 0 0 0 round var(--radius-photo));
        transform: translateY(24px);
    }
}

@keyframes glint { to { transform: translateX(120%); } }

.swipe-hint {
    position: absolute;
    inset: auto 0 calc(74px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/*
 * On wide screens the band's photo fills the first screen: its own lake,
 * mountains and castle stand in for the drawn ones, and the logo sits in its
 * sky, over a light veil. The spotlights, the drawn scene and the swipe hint
 * are left out, and so is the glint, which would sweep the whole screen.
 */
@media (min-width: 900px) {
    .hero {
        --radius-photo: 0px;
        --column: 84rem;
        justify-content: flex-start;
        padding-top: 7svh;
    }

    .hero .beam,
    .hero .scene,
    .hero .swipe-hint,
    .hero .photo::after {
        display: none;
    }

    .hero .view {
        position: absolute;
        inset: 0;
    }

    .hero .view::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(238 242 243 / 0.7), rgb(238 242 243 / 0) 35%);
        pointer-events: none;
    }

    .hero .photo {
        position: absolute;
        inset: 0;
        margin: 0;
        box-shadow: none;
    }

    /* Cropped to keep the faces, which stand a little above the middle of the group photo. */
    .hero .photo img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: 50% 38%;
    }

    .hero-title {
        z-index: 2;
    }

    .hero .logo {
        width: min(40vw, 40rem);
    }

    /* A light pill keeps the tagline readable over the photo's mountains. */
    .hero .tagline {
        display: inline-block;
        padding: 0.5em 1em;
        font-size: clamp(0.8125rem, 0.4vw + 0.4svh, 1.125rem);
        border-radius: 999px;
        background: rgb(238 242 243 / 0.82);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: var(--ink);
    }
}

/* ---------- Tickets ---------- */

/* Sized in em, so the whole ticket, notches included, scales with the list's font size. */
.tickets {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin: 0;
    padding: 0;
    list-style: none;
    filter: drop-shadow(0 8px 18px rgb(57 50 45 / 0.12));
}

/* The notches sit on the dashed line: 1em padding + 4.25em date + 1em. */
.ticket {
    --notch-x: 6.25em;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1em;
    padding: 0.875em 1em;
    border-radius: 0.5em;
    background: var(--card);
    -webkit-mask:
        radial-gradient(circle 0.5625em at var(--notch-x) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 0.5625em at var(--notch-x) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 0.5625em at var(--notch-x) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 0.5625em at var(--notch-x) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

.ticket-date {
    width: 5.25em;
    margin: 0;
    padding-right: 1em;
    border-right: 2px dashed rgb(57 50 45 / 0.2);
    font-variant-numeric: tabular-nums;
}

.ticket-date time {
    display: flex;
    flex-direction: column;
}

.ticket-date b {
    font: 900 1.75em/1 var(--font-display);
}

.ticket-date span {
    color: var(--muted);
    font-size: 0.8125em;
}

.ticket:first-child .ticket-date b {
    color: var(--red);
}

.ticket-where {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ticket-where strong {
    font-size: 1.0625em;
    font-weight: 500;
}

.ticket-where span {
    color: var(--muted);
    font-size: 0.875em;
    font-variant-numeric: tabular-nums;
}

.ticket-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.2857em;
    font-size: 0.875em;
    font-weight: 500;
    text-decoration-color: var(--red);
    text-underline-offset: 3px;
}

/* On the concerts page, the description written in the admin area, with its line breaks. */
.ticket-description {
    margin: 0.4em 0 0;
    font-size: 0.9375em;
    line-height: 1.45;
    white-space: pre-line;
}

/* The home screen's way to every concert. */
.concerts-more {
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--red);
    font-weight: 500;
    text-decoration: none;
}

/* On wide screens the concerts screen sets the title beside the tickets, which grow with the screen. */
@media (min-width: 900px) {
    .concerts {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        align-content: center;
        align-items: center;
        column-gap: 56px;
    }

    .concerts .tickets,
    .concerts .empty,
    .concerts .concerts-more {
        grid-column: 2;
    }

    .concerts .concerts-more {
        justify-self: start;
    }

    .tickets {
        font-size: clamp(17px, 0.7vw + 0.8svh, 24px);
    }
}

/* ---------- Playing a song ---------- */

/*
 * A song's play button shows play, which turns into pause while the song
 * plays (.is-playing, set by assets/js/player.js on the [data-track]); the
 * equaliser's bars move only while it plays.
 */
.play-icon {
    display: grid;
}

.play-icon .icon {
    grid-area: 1 / 1;
    width: 16px;
    height: 16px;
    transition: opacity 0.2s, transform 0.3s var(--ease-out);
}

.play-icon-pause,
.is-playing .play-icon-play {
    opacity: 0;
    transform: scale(0.5);
}

.is-playing .play-icon-pause {
    opacity: 1;
    transform: none;
}

.eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.eq i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    transform: scaleY(0.35);
    transform-origin: bottom;
}

.is-playing .eq i {
    animation: eq 0.9s ease-in-out infinite alternate;
}

.eq i:nth-child(2) { animation-delay: -0.45s; }
.eq i:nth-child(3) { animation-delay: -0.2s; }
.eq i:nth-child(4) { animation-delay: -0.7s; }
.eq i:nth-child(5) { animation-delay: -0.3s; }

@keyframes eq {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}

/* ---------- Listening screen: a record on the lake ---------- */

/*
 * The featured song on a record (--deck wide): a dark vinyl with the logo's
 * icon on its label, a light that stays put while the grooves turn, and a
 * tonearm. Playing, the arm swings onto the record and creeps inward with
 * the song (--progress, from assets/js/player.js), a ring around the record
 * fills, and assets/js/turntable.js spins the disc and sends rings across
 * the lake. The pill is the button; clicking the record does the same.
 * Without the script, the browser's own controls stand under the record.
 */
.listen {
    --deck: min(68vw, 40svh, 22rem);
}

.listen-song {
    margin: 0;
}

.listen-song b {
    display: block;
    font: 900 1.5rem/1.15 var(--font-display);
}

.listen-song span {
    color: rgb(255 255 255 / 0.8);
}

.turntable {
    position: relative;
    align-self: center;
    width: var(--deck);
    aspect-ratio: 1;
    /* Room for the progress ring, 7% outside the record. */
    margin-block: calc(var(--deck) * 0.07 + 4px) calc(var(--deck) * 0.07);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ripples,
.ripples i,
.record,
.record-disc,
.record-sheen,
.record-progress {
    position: absolute;
    border-radius: 50%;
}

.ripples {
    inset: 0;
    pointer-events: none;
}

.ripples i {
    inset: 0;
    border: 2px solid rgb(255 255 255 / 0.6);
    opacity: var(--strength, 0.7);
    animation: ripple 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes ripple {
    to { transform: scale(2.6); opacity: 0; }
}

/* The ring fills clockwise from the top: its circles measure 1 (pathLength). */
.record-progress {
    inset: -7%;
    width: 114%;
    height: 114%;
    overflow: visible;
    transform: rotate(-90deg);
}

.record-progress circle {
    fill: none;
    stroke-width: 1.2;
}

.record-progress-track {
    stroke: rgb(255 255 255 / 0.2);
}

.record-progress-done {
    stroke: var(--sun-gold);
    stroke-width: 1.8;
    stroke-dasharray: 1px 1px;
    /* In px, which pathLength scales too: Firefox rejects a bare number from calc() here. */
    stroke-dashoffset: calc((1 - var(--progress, 0)) * 1px);
}

.record {
    inset: 0;
    background: #171412;
    box-shadow: 0 22px 44px rgb(20 30 40 / 0.45), inset 0 0 0 2px rgb(255 255 255 / 0.06);
}

.record-disc {
    inset: 0;
    background:
        radial-gradient(circle, transparent 31%, rgb(0 0 0 / 0.35) 32%, transparent 34%),
        repeating-radial-gradient(circle, #1d1916 0 1.5px, #262119 1.5px 3px);
}

/* The label: the logo's icon on the paper, around the spindle. */
.record-label {
    position: absolute;
    inset: 32%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mist);
}

.record-label .logo-svg {
    width: 74%;
    height: auto;
}

.record-label::after {
    content: "";
    position: absolute;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #171412;
}

/* The light on the vinyl does not turn with it. */
.record-sheen {
    inset: 0;
    background: conic-gradient(from 20deg, transparent 0 6%, rgb(255 255 255 / 0.16) 11%, transparent 17% 50%, rgb(255 255 255 / 0.11) 60%, transparent 67%);
    -webkit-mask: radial-gradient(circle, transparent 33%, #000 34%);
    mask: radial-gradient(circle, transparent 33%, #000 34%);
    pointer-events: none;
}

/*
 * The arm turns around its base (70% 10% of its drawing). At rest it stands
 * off the record; playing, its stylus lands on the outer grooves (6deg) and
 * moves inward with the song.
 */
.tonearm {
    position: absolute;
    top: -6%;
    right: -16%;
    height: 70%;
    overflow: visible;
    transform: rotate(-14deg);
    transform-origin: 70% 10%;
    transition: transform 0.9s var(--ease-settle);
    filter: drop-shadow(0 6px 8px rgb(20 30 40 / 0.35));
}

.is-playing .tonearm {
    transform: rotate(calc(6deg + var(--progress, 0) * 14deg));
}

.tonearm-arm {
    fill: none;
    stroke: #D9DEE1;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tonearm-head {
    fill: #D9DEE1;
}

.tonearm-base {
    fill: #9AA6AE;
    stroke: #D9DEE1;
    stroke-width: 3;
}

.listen-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.listen-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--card);
    font-size: 1.0625rem;
    font-weight: 500;
}

/* Playing, the pill's triangle gives way to the equaliser. */
.listen-play .eq,
.is-playing .listen-play .play-icon {
    display: none;
}

.is-playing .listen-play .eq {
    display: inline-flex;
    color: var(--sun-gold);
}

.listen-time {
    color: rgb(255 255 255 / 0.8);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.listen audio {
    width: 100%;
}

.listen-more {
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--sun-gold);
    color: var(--card);
    font-weight: 500;
    text-decoration: none;
}

/* The record rises out of the lake, turning, and the arm swings in after it. */
.motion .listen .turntable {
    opacity: 0;
    transform: translateY(36px) scale(0.92);
}

.motion .listen .record {
    transform: rotate(-140deg);
}

.motion .listen:not(.in) .tonearm {
    opacity: 0;
    transform: rotate(-50deg);
}

.motion .listen.in .turntable {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s 0.1s, transform 1.1s var(--ease-settle) 0.1s;
}

.motion .listen.in .record {
    transform: none;
    transition: transform 1.6s var(--ease-out) 0.1s;
}

.motion .listen.in .tonearm {
    transition: transform 0.9s var(--ease-settle) 0.8s, opacity 0.4s 0.8s;
}

.motion .listen.in.is-playing .tonearm {
    transition: transform 0.9s var(--ease-settle);
}

/*
 * On wide screens the record stands beside the title, the song and its
 * controls, which are centred against it: the empty first and last rows
 * share what the record is taller.
 */
@media (min-width: 900px) {
    .listen {
        --deck: min(54svh, 32rem, 34vw);
        display: grid;
        grid-template-columns: fit-content(32rem) calc(var(--deck) * 1.25);
        grid-template-rows: 1fr repeat(4, auto) 1fr;
        justify-content: center;
        align-content: center;
        column-gap: clamp(56px, 6vw, 120px);
        row-gap: 22px;
    }

    .listen > * {
        grid-column: 1;
        justify-self: start;
    }

    .listen .screen-title { grid-row: 2; }
    .listen-song { grid-row: 3; }
    /* The browser's controls, only shown without the script, share the row of the script's own. */
    .listen-controls,
    .listen audio { grid-row: 4; }
    .listen-more { grid-row: 5; }

    .listen .turntable {
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .listen-song b {
        font-size: clamp(1.5rem, 1.1vw + 1svh, 2.5rem);
    }

    .listen-song span {
        font-size: clamp(1rem, 0.4vw + 0.6svh, 1.25rem);
    }

    .listen-play {
        min-height: 58px;
        padding: 0 28px;
        font-size: 1.1875rem;
    }

    .listen-time,
    .listen-more {
        font-size: 1.0625rem;
    }
}

/* ---------- Band cards ---------- */

/*
 * Each member is a card: a white frame, the photo and a caption, with the
 * logo on its back. assets/js/band.js deals them as a pile on touch screens
 * (.is-deck) and lays them in a binder page where there is a mouse
 * (.is-binder), moving each .card-body on springs. Without it, the cards sit
 * in the binder page, three and two.
 */
.band-play {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.band-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.band-cards > li {
    grid-column: span 2;
}

/* A last row of two or one card is centred under the rows of three. */
.band-cards > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.band-cards > li:nth-last-child(2):nth-child(3n + 1) + li { grid-column: 4 / span 2; }
.band-cards > li:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }

.band-cards.is-binder {
    padding: 18px;
    border-radius: 18px;
    background: rgb(255 255 255 / 0.32);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6);
}

.band-cards.is-deck {
    display: block;
    position: relative;
    width: 62%;
    margin: 8px auto 0;
}

/* The pile's cards take every direction of a drag; the page scrolls from around them. */
.band-cards.is-deck > li {
    position: absolute;
    inset: 0 0 auto;
    touch-action: none;
}

.band-cards.is-deck > li:first-child {
    position: relative;
}

.band-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.band-bar button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgb(57 50 45 / 0.1);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 500;
}

.card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.card.is-away {
    visibility: hidden;
}

.card-body {
    position: relative;
    display: block;
    transform-style: preserve-3d;
}

.card-face {
    display: block;
    padding: 6px;
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.card-front {
    position: relative;
}

/*
 * Only the face toward the screen is drawn (.is-turned, set by
 * assets/js/card.js, which also holds the card's perspective); face up
 * without the script.
 */
.card-body.is-turned .card-front,
.card-body:not(.is-turned) .card-back {
    visibility: hidden;
}

.card-photo {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.card-photo img {
    width: 100%;
    aspect-ratio: 18 / 25;
    object-fit: cover;
}

/* Glare and a light foil, placed and lit by the pointer (--gx, --gy, --go). */
.card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.7), transparent 50%),
        linear-gradient(115deg, transparent 25%, rgb(255 140 170 / 0.5) 40%, rgb(140 220 255 / 0.5) 50%, rgb(255 230 140 / 0.5) 60%, transparent 75%) var(--gx, 50%) var(--gy, 50%) / 260% 260%;
    mix-blend-mode: soft-light;
    opacity: var(--go, 0);
    pointer-events: none;
}

.card-back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: rotateY(180deg);
}

.card-back::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 8px;
    background: repeating-linear-gradient(45deg, #403833 0 10px, var(--ink) 10px 20px);
}

.card-back-logo {
    position: relative;
    width: 64%;
}

/* The glow a card gathers before it is revealed. */
.card-aura {
    position: absolute;
    inset: -12%;
    border-radius: 30px;
    background: radial-gradient(closest-side, rgb(var(--sun) / 0.95), rgb(var(--sun) / 0));
    filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.card.is-charging .card-aura {
    animation: charge 0.75s ease-in forwards;
}

@keyframes charge {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1.08); }
}

.spark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    pointer-events: none;
}

.spark--star {
    border-radius: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* An opened card, above the dimmed screen; only the dimming fades. */
.pop-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.pop-layer.open {
    pointer-events: auto;
}

.pop-backdrop,
.pop-hint {
    opacity: 0;
    transition: opacity 0.35s;
}

.pop-layer.open .pop-backdrop,
.pop-layer.open .pop-hint {
    opacity: 1;
}

.pop-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(57 50 45 / 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.pop-layer .card {
    position: absolute;
    z-index: 1;
}

/* Above the bottom navigation, which the dimming covers. */
.pop-hint {
    position: absolute;
    inset: auto 0 var(--nav-clearance);
    margin: 0;
    color: var(--card);
    font-size: 0.8125rem;
    text-align: center;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}

.card-caption {
    position: absolute;
    inset: auto 12px 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgb(255 255 255 / 0.92);
    color: var(--muted);
    font-size: 0.75rem;
}

.card-caption b {
    display: block;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 500;
}

/*
 * On wide screens the band screen sets the title beside the cards, and the
 * cards grow as big as two rows fit in the screen's height, as long as the
 * title keeps 26rem beside them (--card-w). The binder page is as wide as
 * three cards with its gaps and padding, which scale with them (3.34 cards);
 * the captions scale with their card (cqi). Title and cards are centred
 * together in the column.
 */
@media (min-width: 900px) {
    .band {
        --column: 110rem;
        --card-w: clamp(150px, min(calc((100svh - 56px - var(--nav-clearance)) * 0.29), calc((min(100vw - 2 * var(--gutter), var(--column)) - 56px - 26rem) / 3.34)), 340px);
        --card-gap: calc(var(--card-w) * 0.08);
        --binder-pad: calc(var(--card-w) * 0.09);
        display: grid;
        grid-template-columns: fit-content(36rem) calc(3 * var(--card-w) + 2 * var(--card-gap) + 2 * var(--binder-pad));
        justify-content: center;
        align-content: center;
        column-gap: 56px;
        row-gap: 20px;
    }

    .band .band-cards {
        gap: var(--card-gap);
    }

    .band .band-cards.is-binder {
        padding: var(--binder-pad);
        border-radius: calc(var(--binder-pad) + 8px);
    }

    /* A wide touch screen gets the pile, one card and a half wide. */
    .band .band-cards.is-deck {
        width: calc(var(--card-w) * 1.5);
    }

    .card-face {
        padding: max(6px, 2.4cqi);
        border-radius: max(var(--radius-card), 4.4cqi);
    }

    .card-back::before {
        inset: max(6px, 2.4cqi);
    }

    .card-photo,
    .card-back::before {
        border-radius: max(8px, 3cqi);
    }

    .card-caption {
        inset: auto max(12px, 4.4cqi) max(12px, 4.4cqi);
        padding: max(8px, 2.8cqi) max(10px, 3.6cqi);
        border-radius: max(8px, 3cqi);
        font-size: max(0.75rem, 4.6cqi);
    }

    .card-caption b {
        font-size: max(0.9375rem, 6.2cqi);
    }

    .pop-hint {
        font-size: clamp(0.875rem, 0.4vw + 0.5svh, 1.125rem);
    }

    .band .screen-title {
        grid-area: 1 / 1;
        align-self: end;
    }

    .band .hint {
        grid-area: 2 / 1;
        align-self: start;
        text-align: left;
    }

    .band-play {
        grid-area: 1 / 2 / span 2;
    }
}

/* ---------- Footer: sunset over the lake ---------- */

/*
 * The last screen: the evening at the lake. The sky and the lake are painted
 * separately, so the horizon is always where the mountains stand, and the
 * footer is exactly one screen tall: the lake takes what is left, and the sky
 * gives way on short screens. Once the footer is fully on screen
 * ([data-reveal="full"]), the sun comes down, reddening as it sinks, and
 * hollows into a ring behind the E of SHAME, its lower edge behind the
 * mountains, and hands over to the logo's icon; then the letters drop in
 * around it. Only real properties are animated (colours, the size of the
 * hole's mask): Firefox steps a registered custom property from keyframe to
 * keyframe instead of blending it.
 */

.dusk {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--night);
    color: var(--card);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* The sky stacks its own layers: the sun and its glow, the mountains, then the letters. */
.dusk-sky {
    position: relative;
    isolation: isolate;
    flex: 0 1 45svh;
    min-height: 34svh;
    background: linear-gradient(180deg, var(--sky-3) 0%, var(--dusk-rose) 45%, var(--dusk-peach) 80%, var(--dusk-ember) 100%);
}

.dusk-mountains {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    width: 100%;
    height: 36%;
}

.dusk-mountain--far { fill: var(--dusk-mountain-far); }
.dusk-mountain--near { fill: var(--dusk-mountain-near); }

/*
 * The logo keeps its own proportions (903 by 288). Its icon is centred and as
 * tall as the logo, and its lower edge sits 15% up the sky, just under the
 * ridge (18% under the icon). The sun, drawn by CSS, is sized and placed to
 * land exactly on the icon, which then takes over from it.
 */
.dusk-logo {
    position: absolute;
    inset: auto 0 15%;
    width: min(86vw, 34rem);
    margin-inline: auto;
    aspect-ratio: 903 / 288;
}

.dusk-logo .logo-svg,
.dusk-sun,
.dusk-glow {
    position: absolute;
    pointer-events: none;
}

.dusk-logo .logo-svg {
    inset: 0;
    height: 100%;
}

.dusk-icon {
    z-index: 0;
}

.dusk-letters {
    z-index: 2;
    color: var(--card);
    filter: drop-shadow(0 2px 12px rgb(90 40 30 / 0.35));
}

.dusk-sun,
.dusk-glow {
    z-index: 0;
    border-radius: 50%;
}

/*
 * As wide as the logo is tall (288 / 903 = 31.9%), centred. The icon's hole is
 * 71.5% of its radius: a second mask layer, 73% of the sun wide and solid to
 * 71.5 / 73 of its radius, is cut out of the disc; it hollows the sun as it
 * grows from nothing.
 */
.dusk-sun {
    top: 0;
    left: 34.05%;
    width: 31.9%;
    aspect-ratio: 1;
    background-color: var(--red);
    -webkit-mask: linear-gradient(#000 0 0), radial-gradient(circle closest-side, #000 97.95%, transparent) center / 73% 73% no-repeat;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0), radial-gradient(circle closest-side, #000 97.95%, transparent) center / 73% 73% no-repeat;
    mask-composite: exclude;
    opacity: 0;
}

.dusk-glow {
    top: -50%;
    left: 18.1%;
    width: 63.8%;
    aspect-ratio: 1;
    background: radial-gradient(circle closest-side, rgb(255 214 150 / 0.9), rgb(255 170 110 / 0.35) 45%, transparent 70%);
    opacity: 0;
}

.dusk-water {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--lake-deep), var(--lake-dusk) 45%, var(--night));
}

.dusk-mirror {
    position: relative;
    flex: 1 1 0;
    min-height: 56px;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 20%, transparent 95%);
    mask: linear-gradient(#000 20%, transparent 95%);
}

/* The mountains upside down in the water, as tall as the real ones (36% of the 45svh sky). */
.dusk-reflection {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 16.2svh;
    transform: scaleY(-1);
    opacity: 0.3;
}

/* The sun on the water: a soft glow and a column of glints under it, taking the sun's colour (color). */
.dusk-glitter {
    position: absolute;
    color: var(--red);
    top: 6px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(34vw, 180px);
    margin-left: calc(-1 * min(17vw, 90px));
}

.dusk-glitter::before {
    content: "";
    position: absolute;
    inset: -10px -20% auto;
    height: 90px;
    border-radius: 50%;
    background: currentColor;
    -webkit-mask: radial-gradient(closest-side, #000, transparent);
    mask: radial-gradient(closest-side, #000, transparent);
    filter: blur(8px);
    opacity: 0.35;
}

.dusk-glitter b {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
    animation: glitter 1.6s ease-in-out infinite alternate;
}

.dusk-glitter b:nth-child(1) { width: 92%; }
.dusk-glitter b:nth-child(2) { width: 70%; animation-delay: -0.4s; }
.dusk-glitter b:nth-child(3) { width: 78%; animation-delay: -0.9s; }
.dusk-glitter b:nth-child(4) { width: 48%; animation-delay: -0.2s; }
.dusk-glitter b:nth-child(5) { width: 56%; animation-delay: -1.1s; }
.dusk-glitter b:nth-child(6) { width: 30%; animation-delay: -0.7s; }
.dusk-glitter b:nth-child(7) { width: 20%; animation-delay: -1.4s; }

@keyframes glitter {
    from { opacity: 0.95; transform: translateX(-4px) scaleX(0.9); }
    to { opacity: 0.35; transform: translateX(5px) scaleX(1.08); }
}

.dusk-mirror > i {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: rgb(255 220 180 / 0.45);
    animation: shimmer 5s ease-in-out infinite;
}

.dusk-mirror > i:nth-of-type(1) { top: 22%; left: 8%; width: 22%; animation-delay: -1s; }
.dusk-mirror > i:nth-of-type(2) { top: 48%; left: 68%; width: 24%; animation-delay: -2.3s; }
.dusk-mirror > i:nth-of-type(3) { top: 70%; left: 14%; width: 18%; animation-delay: -3.6s; }

.dusk-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-block: 0 var(--nav-clearance);
    padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2));
}

.dusk-content p {
    margin: 0;
}

.dusk-bye {
    font: 500 1.25rem/1.3 var(--font-display);
    text-align: center;
    text-wrap: balance;
}

.dusk-next {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    color: rgb(255 255 255 / 0.85);
    font-variant-numeric: tabular-nums;
}

.dusk-next b {
    color: var(--card);
    font: 900 1.375rem/1 var(--font-display);
}

/* The way to write to the band on the left, back to the top on the right. */
.dusk-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.dusk-contact,
.dusk-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.16);
    text-decoration: none;
    font-weight: 500;
}

.dusk-contact {
    background: var(--card);
    color: var(--ink);
}

.dusk-copyright {
    color: rgb(255 255 255 / 0.6);
    font-size: 0.8125rem;
}

.dusk-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: -8px;
    font-size: 0.8125rem;
}

.dusk-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgb(255 255 255 / 0.75);
    text-underline-offset: 3px;
}

/*
 * On wide screens the logo grows as far as the sky leaves the sun room to
 * come down (--dusk-logo), the glints on the water keep to its width, and the
 * words grow with the screen.
 */
@media (min-width: 900px) {
    .dusk {
        --column: max(52rem, 50vw);
        --dusk-logo: min(60vw, 64rem, 70svh);
    }

    .dusk-logo {
        width: var(--dusk-logo);
    }

    .dusk-glitter {
        gap: 9px;
        width: calc(var(--dusk-logo) * 0.4);
        margin-left: calc(var(--dusk-logo) * -0.2);
    }

    .dusk-glitter::before {
        height: calc(var(--dusk-logo) * 0.2);
    }

    .dusk-glitter b {
        height: 4px;
    }

    .dusk-content {
        gap: 18px;
    }

    .dusk-bye {
        font-size: clamp(1.5rem, 1vw + 1svh, 2.5rem);
    }

    .dusk-next {
        font-size: clamp(1rem, 0.5vw + 0.5svh, 1.375rem);
    }

    .dusk-next b {
        font-size: 1.375em;
    }

    .dusk-contact,
    .dusk-top {
        min-height: 52px;
        padding: 0 24px;
        font-size: 1.0625rem;
    }

    .dusk-copyright {
        font-size: 0.9375rem;
    }
}

/* The sunset: position and colour share their waypoints and a steady pace, so the sun reddens as it sinks;
   once set into a ring, it hands over to the logo's own icon. */
.motion .dusk .dusk-sun {
    -webkit-mask-size: 100% 100%, 0% 0%;
    mask-size: 100% 100%, 0% 0%;
    opacity: 0;
    background-color: var(--sun-gold);
    transform: translateY(-60%) scale(1.1);
}

.motion .dusk .dusk-glow {
    opacity: 0;
    transform: translateY(-30%);
}

.motion .dusk .dusk-icon {
    opacity: 0;
}

.motion .dusk .dusk-glitter {
    color: var(--sun-gold);
    opacity: 0;
}

.motion .dusk.in .dusk-sun { animation: sun-set 3.6s linear 0.15s forwards, hand-over 0.5s ease-in-out 3.75s forwards; }
.motion .dusk.in .dusk-glow { animation: glow-set 3.6s linear 0.15s forwards; }
.motion .dusk.in .dusk-glitter { animation: glint-set 3.6s linear 0.15s forwards; }

.motion .dusk.in .dusk-icon {
    opacity: 1;
    transition: opacity 0.5s ease-in-out 3.75s;
}

@keyframes sun-set {
    0% { -webkit-mask-size: 100% 100%, 0% 0%; mask-size: 100% 100%, 0% 0%; opacity: 0; background-color: var(--sun-gold); transform: translateY(-60%) scale(1.1); }
    12% { opacity: 1; background-color: var(--sun-amber); transform: translateY(-52%) scale(1.09); }
    30% { background-color: var(--sun-orange); transform: translateY(-37%) scale(1.06); }
    50% { background-color: var(--sun-ember); transform: translateY(-22%) scale(1.035); }
    72% { -webkit-mask-size: 100% 100%, 0% 0%; mask-size: 100% 100%, 0% 0%; opacity: 1; background-color: var(--red); transform: none; animation-timing-function: ease-out; }
    100% { -webkit-mask-size: 100% 100%, 73% 73%; mask-size: 100% 100%, 73% 73%; opacity: 1; background-color: var(--red); transform: none; }
}

@keyframes hand-over { to { opacity: 0; } }

@keyframes glow-set {
    0% { opacity: 0; transform: translateY(-30%); }
    12% { opacity: 1; transform: translateY(-26%); }
    30% { opacity: 0.9; transform: translateY(-18.5%); }
    50% { opacity: 0.7; transform: translateY(-11%); }
    72% { opacity: 0.4; transform: none; animation-timing-function: ease-out; }
    100% { opacity: 0; transform: none; }
}

@keyframes glint-set {
    0% { color: var(--sun-gold); opacity: 0; }
    12% { color: var(--sun-amber); opacity: 1; }
    30% { color: var(--sun-orange); }
    50% { color: var(--sun-ember); }
    72% { color: var(--red); }
    100% { color: var(--red); opacity: 1; }
}

/* Then the letters drop in around the ring, and the goodbye follows. */
.motion .dusk .dusk-letters path {
    opacity: 0;
    transform: translateY(-45%);
    transform-box: fill-box;
}

.motion .dusk.in .dusk-letters path {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.35s calc(3.1s + var(--n) * 0.07s),
        transform 0.8s var(--ease-bounce) calc(3.1s + var(--n) * 0.07s);
}

.motion .dusk .dusk-bye,
.motion .dusk .dusk-next {
    opacity: 0;
    transform: translateY(14px);
}

.motion .dusk.in .dusk-bye,
.motion .dusk.in .dusk-next {
    opacity: 1;
    transform: none;
    transition: opacity 1s, transform 1.2s var(--ease-out);
}

.motion .dusk.in .dusk-bye { transition-delay: 3.9s; }
.motion .dusk.in .dusk-next { transition-delay: 4.2s; }

/* ---------- Pages ---------- */

/*
 * The site's other pages scroll normally: the logo back home, the title, a
 * lead, then their sections. Each page takes an hour of the day at the lake:
 * the concerts the morning sky, the music the lake itself. The logo and the
 * lead take the page's text colour.
 */
.page {
    --column: 46rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100svh;
    padding-block: calc(28px + env(safe-area-inset-top, 0px)) var(--nav-clearance);
    padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2));
    /* Tickets wait beside the screen before sliding in; a phone would widen its layout to show them. */
    overflow-x: clip;
}

.page--concerts {
    background: linear-gradient(180deg, var(--mist), var(--sky) 45%, var(--sky-2));
}

.page--music {
    background: linear-gradient(180deg, var(--lake), var(--lake-deep) 55%, var(--lake-dusk));
    color: var(--card);
}

.page-logo {
    display: block;
    width: min(56vw, 15rem);
    color: inherit;
}

.page-logo .logo-svg {
    display: block;
    width: 100%;
    height: auto;
}

.page-title {
    margin: 28px 0 0;
    font: 900 clamp(44px, 13vw, 72px)/0.95 var(--font-display);
    letter-spacing: -0.01em;
}

.page-lead {
    max-width: 40ch;
    margin: 0;
    opacity: 0.85;
}

.page-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.page-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* ---------- Concerts page ---------- */

/* The concerts already played: a quiet list under the tickets, date first. */
.past-concerts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.past-concert {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(57 50 45 / 0.12);
}

.past-concert time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.past-concert > span {
    color: var(--muted);
}

.past-concert strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
}

/* A played concert's photos and videos: one row of tiles, and the way to all of them. */
.past-concert-media {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A page's way back to its whole list, or on to more of it. */
.page-back {
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--red);
    font-weight: 500;
    text-decoration: none;
}

/* ---------- Legal pages ---------- */

/* The legal notice and the privacy page: the morning's light, a column made for reading. */
.page--legal {
    background: linear-gradient(180deg, var(--mist), var(--sky) 60%, var(--sky-2));
}

.legal {
    max-width: 40rem;
    margin-top: 12px;
    line-height: 1.6;
}

.legal h2 {
    margin: 32px 0 6px;
    font: 700 1.1875rem/1.25 var(--font-display);
}

.legal h2:first-child {
    margin-top: 0;
}

.legal p {
    margin: 0 0 10px;
}

.legal a {
    text-underline-offset: 3px;
}

.legal-address {
    margin: 4px 0 10px;
    padding: 14px 18px;
    border-radius: var(--radius-card);
    background: rgb(255 255 255 / 0.65);
    font-style: normal;
}

.legal .legal-date {
    margin-top: 28px;
    color: var(--muted);
    font-size: 0.875rem;
}

.page--legal .page-back {
    margin-top: 20px;
}

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

/*
 * After the concert, at night: the status in large figures, its zeros
 * records turning on the deck, then what happened and where to go.
 */
.page--error {
    background: linear-gradient(180deg, var(--night), #1A2A37 60%, #141F29);
    color: var(--card);
}

.error-code {
    margin: 36px 0 -8px;
    font: 900 clamp(96px, 30vw, 184px)/1 var(--font-display);
    letter-spacing: -0.02em;
}

.error-digits {
    display: flex;
    align-items: center;
    gap: 0.04em;
}

.error-disc {
    position: relative;
    display: grid;
    place-items: center;
    width: 0.74em;
    aspect-ratio: 1;
    margin-inline: 0.03em;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 31%, rgb(0 0 0 / 0.35) 32%, transparent 34%),
        repeating-radial-gradient(circle, #1d1916 0 1.5px, #262119 1.5px 3px);
    box-shadow: 0 16px 34px rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(255 255 255 / 0.08);
}

/* The light on the vinyl does not turn with it. */
.error-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent 0 6%, rgb(255 255 255 / 0.16) 11%, transparent 17% 50%, rgb(255 255 255 / 0.11) 60%, transparent 67%);
    -webkit-mask: radial-gradient(circle, transparent 33%, #000 34%);
    mask: radial-gradient(circle, transparent 33%, #000 34%);
}

.error-disc-label {
    display: grid;
    place-items: center;
    width: 36%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--mist);
}

.error-disc-label .logo-svg {
    width: 74%;
    height: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .error-disc-label {
        animation: error-spin 1.8s linear infinite;
    }
}

@keyframes error-spin {
    to { transform: rotate(360deg); }
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 16px 0 0;
}

.error-button,
.error-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    font-weight: 500;
    text-decoration: none;
}

/* Hovering never moves a button: it only lightens. */
.error-button {
    padding: 0 22px 0 18px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    transition: background-color 0.2s;
}

.error-button:hover {
    background: var(--sky);
}

.error-link {
    color: var(--card);
    text-decoration: underline;
    text-decoration-color: var(--sun-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ---------- Gallery ---------- */

/*
 * The photos and videos page in the evening's colours, the photos' best
 * backdrop. Tiles are square, cut from the picture's middle; a video shows a
 * round play mark. A group's tiles fade in one after another when it arrives.
 */
.page--gallery {
    --column: 64rem;
    background: linear-gradient(180deg, var(--lake-dusk), var(--night) 40%);
    color: var(--card);
}

.page--gallery .page-back {
    border-color: var(--sun-gold);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.gallery-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgb(36 57 74 / 0.5);
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
    .gallery-tile:hover img {
        transform: scale(1.05);
    }
}

.gallery-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.45);
    color: var(--card);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* The triangle sits a little right of the middle, where it looks centred. */
.gallery-play .icon {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

.motion .page--gallery .gallery-grid > li {
    opacity: 0;
    transform: scale(0.94);
}

.motion .page--gallery .in .gallery-grid > li {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s calc(var(--n, 8) * 0.05s), transform 0.6s var(--ease-settle) calc(var(--n, 8) * 0.05s);
}

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

@media (min-width: 900px) {
    .page--gallery .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
}

/*
 * The viewer (assets/js/gallery.js): a full-screen dialog on a dark veil,
 * the picture or video as large as fits above the caption, the buttons in
 * the corners and at the sides.
 */
.viewer-open {
    overflow: hidden;
}

.viewer {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(10 16 22 / 0);
    color: var(--card);
    transition: background-color 0.35s;
}

.viewer.is-open {
    background: rgb(10 16 22 / 0.94);
}

.viewer::backdrop {
    background: transparent;
}

/* A flex box, not a grid: a grid's row would grow to the picture, and its max-height would then mean nothing. */
.viewer-stage {
    position: absolute;
    inset: calc(56px + env(safe-area-inset-top, 0px)) 8px calc(72px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: size;
    touch-action: pan-y;
}

.viewer-media {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    object-fit: contain;
}

/*
 * An item whose shape is known (--ratio, --width, from assets/js/gallery.js)
 * takes its size before it loads, the stage's largest fit, never past its
 * own width: the opening move needs to know where it ends.
 */
.viewer-media[style*="--ratio"] {
    width: min(100cqw, 100cqh * var(--ratio), var(--width));
    aspect-ratio: var(--ratio);
    max-height: none;
}

.viewer-caption {
    position: absolute;
    inset: auto 16px calc(20px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
}

.viewer-count {
    margin-left: 8px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.viewer-button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    color: var(--card);
}

.viewer-button .icon {
    width: 24px;
    height: 24px;
}

.viewer-close {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 8px;
}

.viewer-previous,
.viewer-next {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.viewer-previous {
    left: 8px;
}

.viewer-next {
    right: 8px;
}

@media (min-width: 900px) {
    .viewer-stage {
        inset-inline: 72px;
    }

    .viewer-previous,
    .viewer-next {
        top: 50%;
        bottom: auto;
        margin-top: -22px;
    }

    .viewer-previous {
        left: 16px;
    }

    .viewer-next {
        right: 16px;
    }
}

/* ---------- Music page ---------- */

/* The songs one under the other, each a row with its round play button, sliding in one after another. */

.tracks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.track {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.1);
    transition: background-color 0.3s;
}

.track.is-playing {
    background: rgb(255 255 255 / 0.2);
}

.track-play {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0 0 0 2px;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease-bounce);
}

.track.is-playing .track-play {
    padding: 0;
    background: var(--red);
    color: var(--card);
    transform: scale(1.06);
}

.track-name b {
    display: block;
    font-weight: 500;
    font-size: 1.0625rem;
}

.track-name span,
.track-time {
    color: rgb(255 255 255 / 0.75);
    font-size: 0.875rem;
}

.track-time {
    font-variant-numeric: tabular-nums;
}

.track audio {
    grid-column: 1 / -1;
    width: 100%;
}

.motion .tracks > li {
    opacity: 0;
    transform: translateY(18px);
}

.motion .tracks.in > li {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s calc(var(--n) * 0.08s), transform 0.7s var(--ease-settle) calc(var(--n) * 0.08s);
}

@media (min-width: 900px) {
    .page-title {
        font-size: clamp(56px, 3.6vw + 2svh, 104px);
    }

    .page-lead {
        font-size: 1.125rem;
    }

    .track {
        padding: 14px 24px 14px 14px;
        gap: 20px;
    }

    .track-play {
        width: 56px;
        height: 56px;
    }

    .track-name b {
        font-size: 1.25rem;
    }

    .track-name span,
    .track-time {
        font-size: 1rem;
    }
}

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

/*
 * The contact page at nightfall on the lake, after the home page's sunset.
 * Writing directly comes first and stands out: the address as a large red
 * button, the band's pages beside it in white. Then the postcard, cream
 * paper tilted on the dark water (--tilt): a stamp of the sunset, blue-ink
 * handwriting on ruled lines. On a phone its parts stack; on wide screens it
 * is a postcard's back, the message left of the dashed line, the stamp, the
 * addressee and the sender right of it. Posted (assets/js/postcard.js), the
 * postmark thumps onto the stamp and the card flies off.
 */
.page--contact {
    background: linear-gradient(180deg, var(--lake-dusk), var(--night) 55%, #1A2A37);
    color: var(--card);
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 44px;
    margin-top: 14px;
}

.contact-direct,
.contact-postcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/*
 * The address and its copying are one red pill, as wide as the column on a
 * phone: the address opens the mail program, the end copies it, and a bubble
 * above says it is copied. Without a way to copy, the address fills the pill.
 */
.contact-email-row {
    position: relative;
    display: flex;
    min-height: 64px;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 14px 30px rgb(220 39 58 / 0.35);
    transition: box-shadow 0.25s;
}

/* Hovering never moves a button: the pill only glows more. */
.contact-email-row:hover {
    box-shadow: 0 14px 36px rgb(220 39 58 / 0.55);
}

.contact-email {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 0 12px 0 16px;
    border-radius: inherit;
    color: var(--card);
    font: 500 clamp(0.9375rem, 4.2vw, 1.375rem)/1.2 var(--font-display);
    text-decoration: none;
}

.contact-email span {
    overflow-wrap: anywhere;
}

.contact-email .icon,
.contact-copy .icon {
    width: 24px;
    height: 24px;
    --icon-line: 1.8;
}

.contact-email:active,
.contact-copy:active {
    background: rgb(0 0 0 / 0.14);
}

.contact-copy {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    padding: 0 4px 0 0;
    border: 0;
    border-left: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 0 999px 999px 0;
    background: none;
    color: var(--card);
}

.contact-copy:hover {
    background: rgb(0 0 0 / 0.1);
}

.contact-copy .icon {
    grid-area: 1 / 1;
    transition: opacity 0.2s, transform 0.35s var(--ease-bounce);
}

.contact-copy .contact-copy-done {
    --icon-line: 2.4;
    opacity: 0;
    transform: scale(0.4);
}

.contact-copy.is-done .contact-copy-icon {
    opacity: 0;
    transform: scale(0.4);
}

.contact-copy.is-done .contact-copy-done {
    opacity: 1;
    transform: none;
}

.contact-copy::after {
    content: attr(data-copied);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.3s var(--ease-out);
    pointer-events: none;
}

.contact-copy.is-done::after {
    opacity: 1;
    transform: none;
}

.contact-social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: 500 1.0625rem/1 var(--font-display);
    text-decoration: none;
    transition: background-color 0.2s;
}

.contact-social a:hover {
    background: var(--sky);
}

.contact-social .icon {
    width: 22px;
    height: 22px;
    --icon-line: 1.8;
}

/* The postcard: on a phone the kind and addressee beside the stamp, then the message, then the sender. */
/*
 * Its lines stay smooth although the card is tilted: Chromium rotates the card
 * as one picture (will-change), and Firefox needs every line soft-edged, so
 * none is a border; each is a gradient fading in and out across its width.
 */
.postcard {
    --tilt: -1.2deg;
    --ink-blue: #24479A;
    --rule: 2.25rem;
    --rule-line: rgb(57 50 45 / 0.22);
    --divider: rgb(57 50 45 / 0.3);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "kind stamp"
        "to stamp"
        "message message"
        "address address"
        "actions actions";
    gap: 12px 16px;
    padding: 20px 18px 22px;
    border-radius: 6px;
    background: #FBF6EC;
    box-shadow: 0 24px 44px rgb(0 0 0 / 0.4);
    color: var(--ink);
    transform: rotate(var(--tilt));
    will-change: transform;
}

.postcard-kind {
    grid-area: kind;
    margin: 0;
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.postcard-to {
    grid-area: to;
    align-self: end;
    margin: 0;
    color: var(--red);
    font: 700 1.75rem/1.1 var(--font-hand);
}

/* The stamp: the sunset over the lake, its edge perforated. */
.postcard-stamp {
    grid-area: stamp;
    position: relative;
    width: 78px;
    height: 96px;
    padding: 5px;
    outline: 5px dotted #FBF6EC;
    outline-offset: -3px;
    background: var(--card);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    transform: rotate(3deg);
}

.postcard-stamp-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.postcard-postmark {
    position: absolute;
    top: 14px;
    left: -48px;
    width: 120px;
    height: 80px;
    fill: none;
    stroke: #1F2F6B;
    stroke-width: 2.5;
    opacity: 0;
    transform: scale(1.8) rotate(-18deg);
}

.postcard-postmark text {
    fill: #1F2F6B;
    stroke: none;
    font-family: var(--font-display);
}

.postcard-message {
    grid-area: message;
}

.postcard-address {
    grid-area: address;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
}

/* The dashed line between the message and the sender, soft-edged across. */
.postcard-address::before,
.postcard-message::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--divider) 0 6px, transparent 6px 11px);
    -webkit-mask: linear-gradient(transparent, #000 0.5px, #000 1.5px, transparent);
    mask: linear-gradient(transparent, #000 0.5px, #000 1.5px, transparent);
}

.postcard-message::after {
    content: none;
}

/* The sender's lines: the label on the left, the handwriting on the line. */
.postcard-address .field {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: end;
    column-gap: 8px;
}

.postcard-address .field-message {
    grid-column: 2;
}

.postcard .field {
    gap: 2px;
}

.postcard .field label {
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* A line to write on: its underline (--line, --line-width) soft-edged above and below. */
.postcard .field input:not([type="checkbox"]),
.postcard .field textarea {
    --line: rgb(57 50 45 / 0.28);
    --line-width: 1.5px;
    min-height: 0;
    padding: 2px 2px 3px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(transparent calc(100% - var(--line-width) - 1px), var(--line) calc(100% - var(--line-width) - 0.5px), var(--line) calc(100% - 0.5px), transparent);
    color: var(--ink-blue);
    font: 700 1.625rem/1.2 var(--font-hand);
}

.postcard .field input:not([type="checkbox"]):focus {
    --line: var(--red);
    --line-width: 2.5px;
    outline: none;
}

/* The message is written on the card's ruled lines, which scroll with it. */
.postcard .field textarea {
    min-height: calc(6 * var(--rule));
    padding: 0 2px;
    background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 2px), var(--rule-line) calc(var(--rule) - 1.5px), var(--rule-line) calc(var(--rule) - 0.5px), transparent var(--rule));
    background-attachment: local;
    line-height: var(--rule);
}

.postcard .field input::placeholder,
.postcard .field textarea::placeholder {
    color: rgb(36 71 154 / 0.35);
}

.postcard .field-message {
    color: var(--muted);
    font-size: 0.75rem;
}

.postcard .field.has-error input {
    --line: var(--red);
}

.postcard .field.has-error textarea {
    --rule-line: rgb(220 39 58 / 0.4);
}

.postcard-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 0;
}

/* Posting the card: a rubber stamp in the logo's red. */
.postcard-post {
    min-height: 52px;
    padding: 0 22px;
    border: 3px double var(--red);
    border-radius: 6px;
    background: none;
    color: var(--red);
    font: 900 0.9375rem/1 var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    transition: transform 0.15s, background-color 0.2s, color 0.2s;
}

.postcard-post:hover {
    background-color: var(--red);
    color: var(--card);
}

.postcard-post:active {
    transform: rotate(-3deg) scale(0.95);
}

.postcard.is-flying {
    animation: fly-off 0.8s cubic-bezier(0.5, -0.25, 0.75, 0.4) 0.45s forwards;
}

.postcard.is-flying .postcard-postmark {
    animation: postmark 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}

@keyframes postmark {
    to { opacity: 0.88; transform: scale(1) rotate(-18deg); }
}

@keyframes fly-off {
    to { opacity: 0; transform: translate(30%, -120%) rotate(-16deg); }
}

/* The confirmation, swapped in where the posted card was, drops onto the water as the card first did. */
.postcard.is-arriving {
    animation: card-drop 1s var(--ease-bounce) both;
}

@keyframes card-drop {
    from { opacity: 0; transform: translateY(40px) rotate(6deg); }
}

/* Once posted, a card saying so takes the form's place. */
.postcard--sent {
    --tilt: 1.6deg;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.postcard-sent-title {
    margin: 0;
    color: var(--ink-blue);
    font: 700 2.5rem/1 var(--font-hand);
}

.postcard-sent-text {
    max-width: 36ch;
    margin: 0;
}

.postcard-again {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--card);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

/* Under the card: what becomes of it, and the way to the privacy page. */
.contact-privacy {
    max-width: 44ch;
    margin: 18px 0 0;
    color: rgb(255 255 255 / 0.75);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.contact-privacy a {
    color: var(--card);
    text-underline-offset: 3px;
}

/* The two ways arrive one after the other; the card drops onto the water with a little spin. */
.motion .contact > * {
    opacity: 0;
    transform: translateY(24px);
}

.motion .contact.in > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s calc(var(--n) * 0.18s), transform 0.9s var(--ease-settle) calc(var(--n) * 0.18s);
}

.motion .contact .postcard {
    opacity: 0;
    transform: translateY(40px) rotate(6deg);
}

.motion .contact.in .postcard {
    opacity: 1;
    transform: rotate(var(--tilt));
    transition: opacity 0.5s 0.35s, transform 1s var(--ease-bounce) 0.35s;
}

/* On wide screens the address and the pages share a row, and the card is a postcard's back. */
@media (min-width: 900px) {
    .page--contact {
        --column: 60rem;
    }

    .contact {
        gap: 64px;
    }

    .contact-direct {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 16px 20px;
    }

    .contact-direct .page-subtitle {
        grid-column: 1 / -1;
    }

    .contact-email-row {
        min-height: 72px;
    }

    .contact-email {
        padding: 0 26px 0 28px;
        font-size: 1.5rem;
    }

    .contact-copy {
        width: 68px;
    }

    .contact-social a {
        min-height: 72px;
    }

    .postcard {
        --tilt: -0.8deg;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "kind kind stamp"
            "message to stamp"
            "message address address"
            "message actions actions";
        gap: 14px 28px;
        padding: 28px 30px 30px;
    }

    .postcard-message {
        position: relative;
        padding-right: 28px;
    }

    .postcard-message::after {
        content: "";
        left: auto;
        bottom: 0;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(var(--divider) 0 6px, transparent 6px 11px);
        -webkit-mask: linear-gradient(90deg, transparent, #000 0.5px, #000 1.5px, transparent);
        mask: linear-gradient(90deg, transparent, #000 0.5px, #000 1.5px, transparent);
    }

    .postcard-address {
        padding-top: 0;
    }

    .postcard-address::before {
        content: none;
    }

    .postcard-address .field {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
}

/* ---------- Bottom navigation ---------- */

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    display: flex;
    gap: 4px;
    width: min(calc(100% - 24px), var(--column));
    padding: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgb(57 50 45 / 0.14);
    transform: translateX(-50%);
}

.bottom-nav > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: none;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
}

.bottom-nav button {
    background: rgb(57 50 45 / 0.08);
}

/* While the home page's song plays, its link shows the equaliser, wherever the visitor is on the page. */
.bottom-nav .eq {
    display: none;
    margin-right: 6px;
    color: var(--red);
}

body:has(.listen.is-playing) .bottom-nav .eq {
    display: inline-flex;
}

body:has(.listen.is-playing) .bottom-nav .eq i {
    animation: eq 0.9s ease-in-out infinite alternate;
}

/* On wide screens the bar keeps its own width, a little larger, whatever the column. */
@media (min-width: 900px) {
    .bottom-nav {
        width: 36rem;
    }

    .bottom-nav > * {
        min-height: 46px;
        font-size: 0.9375rem;
    }
}

/* ---------- Menu ---------- */

.menu {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: calc(24px + env(safe-area-inset-top, 0px)) max(24px, calc((100% - var(--column)) / 2)) calc(32px + env(safe-area-inset-bottom, 0px));
    background: rgb(238 242 243 / 0.97);
    opacity: 0;
    transition: opacity 0.3s;
}

.menu.open {
    opacity: 1;
}

.menu-close {
    align-self: flex-end;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    font-size: 0.8125rem;
    font-weight: 500;
}

.menu-pages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-pages a {
    font: 300 clamp(32px, 10.5vw, 48px)/1.12 var(--font-display);
    text-decoration: none;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.4s calc(0.08s + var(--n) * 0.045s), transform 0.55s var(--ease-out) calc(0.08s + var(--n) * 0.045s);
}

.menu.open .menu-pages a {
    opacity: 1;
    transform: none;
}

.menu-pages a[aria-current="page"] {
    font-weight: 500;
}

/* At the menu's foot: the languages, and the legal pages on the right. */
.menu-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: auto;
}

.languages {
    display: flex;
    gap: 8px;
    margin: 0;
}

.menu-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-left: auto;
    font-size: 0.8125rem;
}

.menu-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--muted);
    text-underline-offset: 3px;
}

.menu-legal a[aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
}

.languages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.languages a[aria-current="true"] {
    background: var(--ink);
    color: var(--card);
}

@media (min-width: 900px) {
    .menu-pages a {
        font-size: clamp(56px, 3.6vw + 2svh, 104px);
    }

    .menu-close,
    .languages a {
        min-height: 46px;
        font-size: 0.9375rem;
    }

    .menu-close {
        padding: 0 20px;
    }

    .languages a {
        min-width: 52px;
    }
}

/* ---------- Form fields ---------- */

/*
 * A field: its label above, then the input, then one line kept for its help
 * or its error, so an error never shifts the layout
 * (templates/admin/form_theme.html.twig). A checkbox stands before its label.
 */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 0.9375rem;
    font-weight: 500;
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgb(57 50 45 / 0.25);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--red);
}

.field-message {
    min-height: 1.4em;
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

.field.has-error .field-message {
    color: var(--red);
}

.field--check {
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 12px;
}

.field--check input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--red);
}

.field--check label {
    flex: 1;
}

.field--check .field-message {
    flex-basis: 100%;
    padding-left: 34px;
}

/* What a form says as a whole: done (a confirmation), or what kept it from going through. */
.form-notice,
.form-alert,
.admin-flash,
.admin-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
}

.form-notice,
.admin-flash {
    background: #E1EFE5;
    color: #1E4D2E;
}

.form-alert,
.admin-error {
    background: #FBE3E5;
    color: #8A1623;
}

.form-alert p,
.admin-error p {
    margin: 0;
}

/* ---------- Admin area ---------- */

/*
 * The band's own pages for managing the site (templates/admin/): a dark bar
 * with the sections, then a single column of lists and forms. On a phone the
 * sections scroll sideways under the bar's first line; every entry of a list
 * is a card, the whole card leading to its form.
 */
.admin {
    background: var(--mist);
}

.admin-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
    background: var(--ink);
    color: var(--card);
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: var(--card);
    font: 500 1rem var(--font-display);
    text-decoration: none;
}

.admin-brand .logo-svg {
    width: 28px;
    height: 28px;
}

.admin-nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: rgb(255 255 255 / 0.8);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.admin-nav a[aria-current="page"] {
    background: rgb(255 255 255 / 0.16);
    color: var(--card);
}

.admin-account {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 0.875rem;
}

/* On a phone the bar's three links need the room: the logo stands without its word. */
.admin-brand span {
    display: none;
}

.admin-account a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgb(255 255 255 / 0.85);
    white-space: nowrap;
}

.admin-account a[aria-current="page"] {
    color: var(--card);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.admin-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 48rem;
    margin: 0 auto;
    padding: 24px var(--gutter) 64px;
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.admin-title {
    margin: 0;
    font: 900 clamp(28px, 7vw, 40px)/1.05 var(--font-display);
    text-wrap: balance;
}

.admin-subtitle {
    margin: 12px 0 0;
    color: var(--muted);
    font: 700 0.8125rem var(--font-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Every button and action link starts with its icon. */
.admin-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--card);
    font-weight: 500;
    text-decoration: none;
}

.admin-button--danger {
    background: var(--red);
}

.admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--ink);
    text-underline-offset: 3px;
}

.admin-link--danger {
    margin-left: auto;
    color: var(--red);
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 8px 0 0;
}

.admin-empty {
    margin: 0;
    color: var(--muted);
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-item {
    display: flex;
    align-items: center;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 4px 14px rgb(57 50 45 / 0.08);
}

.admin-item-link {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    min-height: 64px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.admin-list--past .admin-item {
    opacity: 0.7;
}

.admin-date {
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.admin-date b {
    display: block;
    color: var(--ink);
    font: 900 1.125rem/1.1 var(--font-display);
}

.admin-item-text strong {
    display: block;
    font-weight: 500;
}

.admin-item-text > span {
    color: var(--muted);
    font-size: 0.875rem;
}

.admin-stamp {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.75rem;
}

.admin-thumb {
    width: 48px;
    height: 67px;
    border-radius: 8px;
    object-fit: cover;
}

.admin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.admin-badge {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgb(57 50 45 / 0.08);
    color: var(--ink);
    font-size: 0.75rem;
}

.admin-badge--featured {
    background: var(--red);
    color: var(--card);
}

.admin-move {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 10px;
}

.admin-move form {
    display: contents;
}

.admin-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgb(57 50 45 / 0.08);
    color: var(--ink);
    font-size: 1rem;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.875rem;
}

.admin-current-photo {
    width: 96px;
    height: auto;
    border-radius: 10px;
}

/* A signature is shown on white, as on the contract. */
.admin-current-signature {
    width: min(100%, 280px);
    height: auto;
    padding: 8px;
    border: 1px solid rgb(57 50 45 / 0.15);
    border-radius: 10px;
    background: var(--card);
}

.admin-intro {
    margin: 0;
    color: var(--muted);
}

.admin-intro b {
    color: var(--ink);
}

.admin-notice {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FFF3D6;
    color: #6B4A00;
}

/* A long form in parts: each part a card with its title. */
.admin-fieldset {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0 0 12px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: var(--card);
}

.admin-fieldset legend {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    color: var(--muted);
    font: 700 0.8125rem var(--font-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Choices offered as radio buttons, one under the other, each before its label. */
.admin-fieldset .field > div:has(> input[type="radio"]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 4px 0;
}

.admin-fieldset input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--red);
}

.admin-fieldset .field > div:has(> input[type="radio"]) label {
    font-weight: 400;
}

.admin-button--quiet {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    color: var(--ink);
}

.admin-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #E1EFE5;
    color: #1E4D2E;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-current audio {
    width: 100%;
}

.admin-login {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 24rem;
    margin: 8svh auto 0;
}

.admin-login-logo {
    display: block;
    width: 12rem;
    color: var(--ink);
}

.admin-login-logo .logo-svg {
    width: 100%;
    height: auto;
}

.admin-confirm p {
    margin: 0;
}

/* The gallery's thumbnails, three to a row on a phone; a video is marked, a title written under. */
.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ink);
    color: var(--card);
    text-decoration: none;
}

.admin-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-tile-badge,
.admin-tile-title {
    position: absolute;
    font-size: 0.75rem;
}

.admin-tile-badge {
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red);
}

.admin-tile-title {
    inset: auto 0 0;
    padding: 14px 8px 6px;
    background: linear-gradient(transparent, rgb(0 0 0 / 0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A batch of photos going up: one line each, done or refused. */
.upload-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--card);
    list-style: none;
    font-size: 0.875rem;
}

.upload-progress .is-done {
    color: #1E4D2E;
}

.upload-progress .is-failed {
    color: var(--red);
}

/* The photo or video an item form edits. */
.admin-media {
    margin: 0;
}

.admin-media img,
.admin-media video {
    width: 100%;
    height: auto;
    max-height: 60svh;
    border-radius: 12px;
    background: var(--ink);
    object-fit: contain;
}

@media (min-width: 900px) {
    .admin-bar {
        grid-template-columns: auto 1fr auto;
        padding-inline: 32px;
    }

    .admin-nav {
        grid-column: 2;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    .admin-account {
        grid-column: 3;
    }

    .admin-brand span {
        display: inline;
    }

    .admin-main {
        padding-top: 40px;
    }
}

/* ---------- Arrivals: hidden until their screen is on screen ---------- */

.motion .ticket {
    opacity: 0;
    transform: translateX(115%) rotate(7deg);
}

.motion .ticket:nth-child(even) {
    transform: translateX(-115%) rotate(-7deg);
}

.motion .in .ticket {
    opacity: 1;
    transform: none;
    transition:
        transform 0.9s var(--ease-settle) calc(0.15s + var(--n) * 0.14s),
        opacity 0.3s calc(0.15s + var(--n) * 0.14s);
}

/* ---------- Reduced motion: fades only, no loops ---------- */

@media (prefers-reduced-motion: reduce) {
    .beam,
    .logo .logo-letters path,
    .logo .logo-icon path,
    .mountain,
    .photo {
        animation-name: fade;
    }

    .lake i,
    .photo::after {
        animation: none;
    }

    .motion .ticket,
    .motion .ticket:nth-child(even) {
        transform: none;
    }

    .motion .in .ticket {
        transition-property: opacity;
    }

    .card.is-charging .card-aura {
        animation-name: fade;
    }

    /* The record and its arm appear in place; the arm is set down without swinging; the equalisers stand still. */
    .motion .listen .turntable,
    .motion .listen .record,
    .motion .tracks > li,
    .motion .contact > * {
        transform: none;
    }

    /* The postcard keeps its tilt and arrives in place; posted, it is postmarked without a thump and stays. */
    .motion .contact .postcard,
    .motion .contact.in .postcard {
        transform: rotate(var(--tilt));
    }

    .postcard-postmark {
        transform: rotate(-18deg);
    }

    .postcard.is-flying {
        animation: none;
    }

    .postcard.is-arriving {
        animation-name: fade;
    }

    .motion .listen:not(.in) .tonearm {
        transform: rotate(-14deg);
    }

    .tonearm,
    .motion .listen.in .tonearm,
    .motion .listen.in.is-playing .tonearm {
        transition: opacity 0.4s;
    }

    .is-playing .eq i,
    body:has(.listen.is-playing) .bottom-nav .eq i {
        animation: none;
        transform: scaleY(0.7);
    }

    html {
        scroll-behavior: auto;
    }

    /* The sunset is shown already set, as the logo's icon; the words fade in without moving, and the water stops glittering. */
    .motion .dusk .dusk-sun,
    .motion .dusk.in .dusk-sun,
    .motion .dusk .dusk-glow,
    .motion .dusk.in .dusk-glow {
        opacity: 0;
        animation: none;
    }

    .motion .dusk .dusk-icon {
        opacity: 1;
    }

    .motion .dusk .dusk-glitter,
    .motion .dusk.in .dusk-glitter {
        color: var(--red);
        opacity: 1;
        animation: none;
    }

    .motion .dusk.in .dusk-glow,
    .dusk-glitter b,
    .dusk-mirror > i {
        animation: none;
    }

    .motion .dusk .dusk-letters path,
    .motion .dusk .dusk-bye,
    .motion .dusk .dusk-next {
        transform: none;
    }
}