/* music.angela-mahr.de — Nachtblau & Gold */

:root {
    --navy:       #16193c;
    --navy-deep:  #0f1330;
    --navy-card:  #1a1e48;
    --line:       #2a2e5c;
    --gold:       #d4ae4c;
    --gold-light: #e8c975;
    --gold-dark:  #b8932f;
    --cream:      #f1e8d6;
    --muted:      #9194b8;
    --dim:        #6c6f96;

    --f-display: 'Playfair Display', Georgia, serif;
    --f-caps:    'Oswald', 'Arial Narrow', sans-serif;
    --f-body:    'Montserrat', system-ui, sans-serif;

    --wrap: 1120px;
    --gutter: 24px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    background: var(--navy);
    color: var(--cream);
    font: 300 16px/1.7 var(--f-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { --wrap: 860px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 30px;
    font: 500 17px/1.1 var(--f-caps);
    letter-spacing: .06em; text-transform: uppercase;
    border: 2px solid transparent; border-radius: 3px;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn small {
    font: 600 10px/1.3 var(--f-body);
    letter-spacing: .02em; text-transform: none; margin-top: 3px;
}
.btn-gold {
    background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    color: #1b1a2e;
    box-shadow: 0 6px 22px rgba(212, 174, 76, .25);
}
.btn-gold:hover { color: #1b1a2e; transform: translateY(-1px); filter: brightness(1.06); }
.btn-outline { border-color: rgba(241, 232, 214, .7); color: var(--cream); background: rgba(15, 19, 48, .25); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-small { padding: 8px 16px; font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; border-width: 1px; }
.btn-block { width: 100%; }

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

.site-header {
    position: absolute; inset: 0 0 auto; z-index: 20;
    padding-top: 18px;
}
.header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 28px;
}
.main-nav { display: flex; gap: 0; align-items: center; padding-top: 22px; }
.main-nav--left { justify-content: flex-end; }
.main-nav a {
    font: 500 18px/1 var(--f-caps); letter-spacing: .04em; text-transform: uppercase;
    color: var(--gold-light); padding: 4px 0;
}
.main-nav a:hover { color: #fff; }
.main-nav a + a::before {
    content: "•"; color: var(--gold); margin: 0 14px; display: inline-block;
}
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo img { width: 84px; height: auto; filter: drop-shadow(0 0 10px rgba(212, 174, 76, .35)); }
.logo span {
    font: 500 21px/1 var(--f-caps); letter-spacing: .05em; text-transform: uppercase;
    color: var(--gold-light);
}

.nav-toggle, .nav-burger { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
    position: relative; overflow: hidden;
    min-height: 860px;
    padding: 190px 0 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(ellipse 60% 45% at 85% 88%, rgba(240, 160, 110, .55), transparent 70%),
        radial-gradient(ellipse 55% 50% at 70% 100%, rgba(210, 120, 140, .45), transparent 70%),
        linear-gradient(180deg, #1c1f55 0%, #2a2c6e 45%, #5b4a86 75%, #8e6a8e 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo {
    position: absolute; left: 0; top: 0; height: 100%; width: 58%;
    object-fit: cover; object-position: 35% 30%;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
            mask-composite: intersect;
    opacity: .95;
}
.hero::after { /* sanfte Abdunklung für Lesbarkeit unten */
    content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: 0;
    background: linear-gradient(180deg, transparent, rgba(22, 25, 60, .75));
}

/* Tapete (nur breite Bildschirme, s. unten) */
.wall { display: none; }
.page { position: relative; }

.hero-inner { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.hero-copy { width: min(560px, 100%); text-align: center; }
.hero-claim {
    margin: 0 0 6px;
    font: 500 clamp(18px, 2.2vw, 26px)/1.2 var(--f-caps); letter-spacing: .02em; text-transform: uppercase;
    color: var(--gold-light);
}
/* TEST: Rage Italic (Monotype, lizenzpflichtig) — nur aus der lokalen Installation des
   Besuchers (z. B. MS Office), sonst Playfair Display. Zurück: .hero h1 wieder auf
   font: 700 … var(--f-display) setzen und die @font-face-Regel entfernen. */
@font-face {
    font-family: 'Rage Local';
    src: local('Rage Italic'), local('RageItalic'), local('Rage');
    size-adjust: 120%; /* Rage läuft kleiner als Playfair */
}
.hero h1 {
    margin: 0;
    font: 700 clamp(52px, 7.4vw, 92px)/1.02 'Rage Local', var(--f-display);
    font-synthesis: none; /* Rage nicht künstlich fetten, Playfair-Ersatz bleibt 700 */
    color: #fbf3e2;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.hero-sub {
    margin: 12px 0 28px;
    font: 400 clamp(16px, 1.8vw, 21px)/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase;
    color: var(--cream);
}
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero-peace {
    position: absolute; left: 50%; bottom: -84px; transform: translateX(-50%);
    width: 54px; opacity: .9;
}

.hero-cards {
    position: relative; z-index: 2; margin-top: 120px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.hero-card h2 {
    margin: 0 0 12px;
    font: 500 26px/1 var(--f-caps); letter-spacing: .01em; text-transform: uppercase;
    color: var(--gold-light);
}
.hero-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; font-weight: 400; }
.release { display: flex; gap: 16px; margin-bottom: 16px; }
.release img {
    width: 100px; height: 100px; object-fit: cover; flex: none;
    box-shadow: 0 0 0 1px rgba(212, 174, 76, .5), 0 8px 24px rgba(0, 0, 0, .4);
}
.release-tracks, .mini-dates { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; font-size: 13px; font-weight: 400; }
.release-tracks { counter-reset: t; margin: 0; }
.release-tracks li, .mini-dates li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid rgba(241, 232, 214, .14);
}
.release-tracks li { counter-increment: t; }
.release-tracks li span:first-child::before { content: counter(t) ". "; }
.release-tracks li span:last-child, .mini-dates li span:first-child { color: var(--muted); }
.mini-dates li { justify-content: flex-start; }
.mini-dates li span:first-child { width: 58px; flex: none; }

/* Goldene Ornamente */
.orn { position: absolute; z-index: 1; pointer-events: none; opacity: .9; }
.orn-dove { filter: drop-shadow(0 0 6px rgba(212, 174, 76, .4)); }
.orn-dove--a { width: 150px; right: 3%; top: 470px; transform: scaleX(-1) rotate(-8deg); }
.orn-dove--b { width: 70px; right: 22%; top: 520px; transform: scaleX(-1); opacity: .75; }
.orn-dove--c { width: 64px; left: 44%; top: 210px; opacity: .6; }
.orn-branch--a { width: 60px; left: 3%; top: 240px; transform: rotate(-35deg); opacity: .7; }
.orn-branch--b { display: none; }
.orn-leaf { width: 46px; left: 2%; top: 70px; opacity: .15; }
.orn-dove--booking { width: 80px; right: 6%; top: 90px; opacity: .15; }

/* ── Sektionen ───────────────────────────────────────────────────────── */

.section { position: relative; padding: 110px 0; }
.section-alt { background: var(--navy-deep); }
.section-head { margin-bottom: 56px; max-width: 640px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font: 600 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold); }
.section-head h2 {
    margin: 18px 0 0;
    font: 700 clamp(36px, 4.6vw, 54px)/1.1 var(--f-display);
    color: var(--cream);
}
.section-head h2 em, .accent { font-style: italic; color: var(--gold); }
.lede { margin: 22px 0 0; color: var(--muted); font-size: 15px; }

/* Goldene Eck-Winkel wie in der Vorlage */
.corner-tl, .corner-tr, .corner-frame { position: relative; }
.corner-tl::before, .corner-tr::before, .corner-frame::before, .corner-frame::after {
    content: ""; position: absolute; width: 32px; height: 32px; z-index: 2; pointer-events: none;
}
.corner-tl::before { left: 0; top: 0; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-tr::before { right: 0; top: 0; border-right: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-frame::before { left: -8px; top: -8px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-frame::after { right: -8px; bottom: -8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }

/* ── Videos ──────────────────────────────────────────────────────────── */

.video-grid { display: grid; gap: 16px; }
.video-grid--2 { grid-template-columns: repeat(2, 1fr); }
.video-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }

.video-card {
    display: block; aspect-ratio: 16 / 9; overflow: hidden; color: var(--cream);
    background: var(--navy-deep);
}
.video-card img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.85) brightness(.7); transition: transform .5s, filter .3s;
}
.video-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22, 25, 60, .15) 30%, rgba(22, 25, 60, .9));
}
.video-card:hover img { transform: scale(1.04); filter: saturate(1) brightness(.85); }
.video-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.video-caption strong { display: block; font-weight: 600; font-size: 15px; color: #fff; }
.video-caption small { display: block; color: var(--dim); font-size: 12px; letter-spacing: .04em; }

.play {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
    border: 2px solid var(--gold); background: rgba(15, 19, 48, .35);
    transition: transform .2s, background .2s;
}
.play::after {
    content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px;
    border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--gold);
}
a:hover .play { transform: scale(1.08); background: rgba(212, 174, 76, .2); }
.play--small { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.play--small::after { border-width: 7px 0 7px 12px; margin: -7px 0 0 -4px; }

.mv-card { display: block; background: var(--navy-card); color: var(--cream); }
.mv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: transform .5s; }
.mv-card:hover .mv-thumb img { transform: scale(1.04); }
.mv-meta { display: block; padding: 18px 20px 22px; }
.mv-meta small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.mv-meta strong { display: block; margin-top: 6px; font-weight: 600; font-size: 16px; color: #fff; }

.video-modal {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    background: rgba(8, 10, 28, .88); padding: var(--gutter);
}
.video-modal[hidden] { display: none; }
.video-modal-inner { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; }
.video-frame, .video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal-close {
    position: absolute; right: 0; top: -46px;
    background: none; border: 0; color: var(--cream); font-size: 36px; line-height: 1; cursor: pointer;
}

/* ── Songtexte ───────────────────────────────────────────────────────── */

.lyrics { display: grid; gap: 6px; }
.lyric { border: 1px solid var(--line); background: var(--navy-deep); }
.lyric summary {
    display: flex; align-items: center; gap: 24px;
    padding: 22px 24px; cursor: pointer; list-style: none;
}
.lyric summary::-webkit-details-marker { display: none; }
.lyric-no { font: 400 11px/1 ui-monospace, monospace; color: var(--dim); }
.lyric-title { flex: 1; }
.lyric-title strong { display: block; font-weight: 600; font-size: 16px; color: #fff; }
.lyric-title small { color: var(--dim); font-size: 11px; letter-spacing: .08em; }
.lyric-icon::before { content: "+"; color: var(--gold); font-size: 18px; }
.lyric[open] .lyric-icon::before { content: "×"; }
.lyric[open] summary { border-bottom: 1px solid var(--line); }
.lyric-body { padding: 22px 24px 28px; color: var(--muted); font-size: 14px; line-height: 1.95; }
.lyric-body p { margin: 0 0 20px; }
.lyric-body p:last-child { margin: 0; }

/* ── Tour ────────────────────────────────────────────────────────────── */

.tour-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tour-row {
    display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 16px;
    padding: 22px 0; border-bottom: 1px solid var(--line);
}
.tour-date strong { display: block; color: var(--gold); font-weight: 600; font-size: 15px; }
.tour-date small, .tour-place small { display: block; color: var(--dim); font-size: 12px; }
.tour-place strong { display: block; font-weight: 500; font-size: 16px; color: #fff; }
.btn-ticket {
    padding: 8px 20px; border: 1px solid rgba(241, 232, 214, .45); border-radius: 0;
    font: 500 10px/1.2 var(--f-body); letter-spacing: .22em; color: var(--muted);
}
.btn-ticket:hover { border-color: var(--gold); color: var(--gold); }
.btn-ticket.is-soldout { opacity: .4; cursor: default; }

/* ── Alben ───────────────────────────────────────────────────────────── */

.album-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 56px; }
.album-tab {
    padding: 12px 24px; border: 0; cursor: pointer;
    background: var(--navy-card); color: var(--dim);
    font: 600 11px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
}
.album-tab span { opacity: .7; }
.album-tab.is-active { background: var(--gold); color: #1b1a2e; }
.album-tab:not(.is-active):hover { color: var(--cream); }

.album-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: center; }
.album-panel[hidden] { display: none; }
.album-cover { max-width: 460px; }
.album-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.album-meta { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.album-info h3 { margin: 8px 0 16px; font: 700 34px/1.1 var(--f-display); color: var(--cream); }
.album-info > p { color: var(--muted); margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tracklist { list-style: none; counter-reset: tr; margin: 0 0 28px; padding: 0; }
.tracklist li {
    counter-increment: tr; display: flex; align-items: center; gap: 22px;
    padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 400; font-size: 15px;
}
.tracklist li::before { content: counter(tr); color: var(--dim); font-size: 11px; width: 10px; }
.tracklist li span { flex: 1; }
.tracklist li::after {
    content: ""; border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--gold); opacity: .8;
}
.album-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Booking ─────────────────────────────────────────────────────────── */

.booking-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; }
.booking-form { display: grid; gap: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.field input, .field textarea {
    width: 100%; padding: 15px 16px;
    background: var(--navy); color: var(--cream);
    border: 1px solid var(--line); border-radius: 0;
    font: 400 14px/1.4 var(--f-body);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.booking-form .btn { margin-top: 4px; font: 600 12px/1 var(--f-body); letter-spacing: .3em; padding: 18px; border-radius: 0; }
.form-note { margin: 12px 0 0; font-size: 14px; color: var(--gold-light); }
.form-note--error { color: #f0a0a0; }

.booking-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.booking-contact li { border-left: 1px solid var(--line); padding-left: 20px; font-size: 14px; }
.booking-contact small {
    display: block; margin: 6px 0 2px;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.bc-icon { color: var(--gold); font-size: 16px; }
.booking-contact a, .booking-contact span:last-child { color: var(--cream); }

/* ── Textseiten (Impressum, Datenschutz) ─────────────────────────────── */

.prose { max-width: 780px; padding-top: 170px; }
.prose h2 { font: 700 42px/1.15 var(--f-display); margin: 0 0 28px; }
.prose h3 { font: 600 20px/1.3 var(--f-body); color: var(--gold); margin: 36px 0 10px; }
.prose p, .prose li { color: #cfc8ba; font-weight: 400; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--navy); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo img { width: 34px; opacity: .8; }
.footer-logo strong { font: 700 17px/1 var(--f-display); color: var(--gold); }
.footer-social, .footer-links { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-social a, .footer-links a {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.footer-social a:hover, .footer-links a:hover { color: var(--gold); }
.footer-meta { text-align: right; }
.footer-meta p { margin: 0; font: 400 11px/1.8 ui-monospace, monospace; color: var(--dim); }
.footer-links { justify-content: flex-end; gap: 16px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Ab 1280 px: Seitenpanels der Startseiten-Vorlage (design/Startseite-Design-music.png)
   stehen als feste Tapete links und rechts, der Seiteninhalt läuft als Spalte davor.
   Die Spalte hat die Breite des Mittelteils der Vorlage (984 von 1378 px). Der Hero ist
   genau dieses Mittelteil, unverzerrt; die echten Texte liegen an denselben Stellen wie
   in der Vorlage und skalieren mit (1cqw = 9.84 px Vorlage). */
@media (min-width: 1280px) {
    :root { --col: 71.4vw; --side: calc((100vw - var(--col)) / 2); }

    .wall {
        display: block; position: fixed; top: 0; bottom: 0; width: calc(var(--side) + 40px); z-index: 0;
        background: #2b2a5a center / cover no-repeat;
    }
    .wall--left { left: 0; background-image: url(/static/img/wall-left.jpg); background-position: right center; }
    .wall--right { right: 0; background-image: url(/static/img/wall-right.jpg); background-position: left center; }
    .wall-social {
        position: absolute; left: 40px; right: 0; bottom: 36px;
        display: flex; justify-content: center; gap: 18px;
    }
    .wall-social a { color: #7a5a1c; display: block; width: 28px; height: 28px; }
    .wall-social a:hover { color: var(--navy); }
    .wall-social svg { width: 100%; height: 100%; }

    .page {
        z-index: 1; width: var(--col); margin-inline: auto; background: var(--navy);
        box-shadow: 0 0 36px 6px rgba(6, 8, 26, .6);
    }
    .page .wrap:not(.hero-inner):not(.hero-cards) { width: min(var(--wrap), 100% - 2 * 56px); }

    .hero {
        container-type: inline-size;
        min-height: 0; padding: 0;
        aspect-ratio: 984 / 760;
        background: #16193c url(/static/img/hero-center.jpg) center / 100% 100% no-repeat;
    }
    .hero::after, .hero-bg, .hero .orn, .hero-peace { display: none; }

    .hero-inner {
        position: absolute; left: 53cqw; top: 19.4cqw; width: 46.7cqw; margin: 0;
        display: block;
    }
    .hero-copy { width: 100%; }
    .hero-claim { font-size: 2.72cqw; margin-bottom: .7cqw; }
    .hero h1 { font-size: 7.4cqw; }
    .hero-sub { font-size: 2.1cqw; margin: 1.1cqw 0 3.1cqw; }
    .hero-actions { gap: 2.2cqw; }
    .hero-actions .btn { font-size: 1.9cqw; padding: 1.25cqw 2.8cqw; min-width: 14.5cqw; min-height: 5.2cqw; }
    .hero-actions .btn small { font-size: .98cqw; }

    .hero-cards {
        position: absolute; left: 7.3cqw; top: 58.1cqw; width: 86cqw; margin: 0;
        grid-template-columns: 1.1fr 1fr 1fr; gap: 3.35cqw;
    }
    .hero-card h2 { font-size: 2.72cqw; margin-bottom: 1.26cqw; }
    .hero-card p {
        font-size: 1.29cqw; line-height: 1.5; margin-bottom: 1.4cqw;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
    }
    .release { gap: 1.54cqw; margin-bottom: 1.54cqw; }
    .release img { width: 10cqw; height: 10cqw; }
    .release-tracks, .mini-dates { font-size: 1.23cqw; margin-bottom: 1.54cqw; }
    .release-tracks { margin: 0; }
    .release-tracks li, .mini-dates li { padding: .49cqw 0; }
    .release-tracks li span:first-child, .mini-dates li span:last-child {
        min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mini-dates li span:first-child { width: 6.15cqw; }
    .hero-card .btn-small { font-size: 1.05cqw; padding: .77cqw 1.54cqw; }
}

@media (max-width: 960px) {
    .header-inner { grid-template-columns: 1fr auto; }
    .logo { flex-direction: row; gap: 12px; grid-column: 1; grid-row: 1; justify-self: start; }
    .logo img { width: 54px; }
    .nav-burger {
        display: flex; flex-direction: column; gap: 6px; justify-content: center;
        grid-column: 2; grid-row: 1; width: 44px; height: 44px; cursor: pointer; z-index: 30;
    }
    .nav-burger span { display: block; height: 2px; background: var(--gold-light); transition: transform .2s, opacity .2s; }
    .main-nav { display: none; }
    .nav-toggle:checked ~ .main-nav {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        grid-column: 1 / -1; padding-top: 0;
    }
    .nav-toggle:checked ~ .main-nav--left { padding-top: 16px; }
    .main-nav a + a::before { display: none; }
    .main-nav a { font-size: 22px; padding: 6px 0; }
    .site-header:has(.nav-toggle:checked) { background: rgba(15, 19, 48, .96); padding-bottom: 24px; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero { padding-top: 130px; min-height: 0; }
    .hero-photo { width: 100%; opacity: .55; object-position: 45% 0; }
    .orn-branch { display: none; }
    .hero-inner { justify-content: center; }
    .hero-cards { grid-template-columns: 1fr; margin-top: 110px; gap: 40px; max-width: 520px; }
    .orn-dove--a { width: 100px; top: 360px; }
    .orn-dove--b, .orn-dove--c { display: none; }

    .video-grid--3 { grid-template-columns: 1fr 1fr; }
    .album-panel, .booking-grid { grid-template-columns: 1fr; }
    .album-cover { margin: 8px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-meta { text-align: center; }
    .footer-links { justify-content: center; }
}

@media (max-width: 640px) {
    :root { --gutter: 16px; }
    .section { padding: 80px 0; }
    .section-head { margin-bottom: 40px; }
    .video-grid--2, .video-grid--3, .form-row { grid-template-columns: 1fr; }
    .tour-row { grid-template-columns: 76px 1fr; }
    .tour-row .btn-ticket { grid-column: 2; justify-self: start; }
    .lyric summary { gap: 14px; padding: 18px 16px; }
    .lyric-body { padding: 18px 16px 22px; }
    .album-tab { flex: 1 1 100%; text-align: left; }
    .prose { padding-top: 130px; }
    .prose h2 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}