/* LOVE THE RELEASE – Preset-based Release Layout */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Montserrat+Alternates:wght@600;700;800&family=Oswald:wght@500;600;700&family=Sora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Design system (canonical tokens) ── */

.release-page {
    /* Layout tokens (unchanged) */
    --section-spacing: 4rem;
    --content-width: 980px;
    --hero-title-max: 7rem;
    --hero-title-min: 3.75rem;
    --hero-title-weight-compact: 600;

    /* Canonical design roles – default = Frida */
    --page-bg: #F6F1E8;
    --hero-bg: linear-gradient(160deg, #FBF7F0 0%, #F6F1E8 48%, #EFE8DC 100%);
    --surface-bg: #FFFCF7;
    --text-main: #111111;
    --text-muted: #444444;
    --accent: #8A00FF;
    --accent-soft: #FF6A00;
    --border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --divider-color: var(--border);
    --hero-font: "Space Grotesk", "Inter", system-ui, sans-serif;
    --body-font: "Inter", system-ui, sans-serif;
    --hero-title-weight: 700;
    --hero-title-tracking: -0.04em;
    --hero-title-line-height: 0.96;
    --button-bg: #8A00FF;
    --button-text: #ffffff;
    --button-border: color-mix(in srgb, var(--accent) 70%, #000 30%);
    --button-radius: 2px;
    --button-shadow: none;
    --stream-button-bg: color-mix(in srgb, var(--text-main) 4%, transparent);
    --stream-button-border: color-mix(in srgb, var(--text-main) 16%, transparent);
    --stream-button-text: var(--text-main);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 22px;
    --stream-button-font-weight: 600;
    --section-kicker-color: #FF2E88;

    /* Role: meta badges */
    --meta-badge-bg: color-mix(in srgb, var(--text-main) 4%, transparent);
    --meta-badge-border: color-mix(in srgb, var(--text-main) 18%, transparent);
    --meta-badge-text: color-mix(in srgb, var(--text-main) 72%, var(--page-bg));
    --meta-badge-radius: 2px;

    /* Interaction (derived from roles) */
    --button-bg-hover: color-mix(in srgb, var(--accent) 86%, #fff 14%);
    --button-border-hover: var(--accent);
    --button-shadow-hover: 0 4px 16px color-mix(in srgb, var(--accent) 16%, transparent);
    --stream-button-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
    --stream-button-hover-border: color-mix(in srgb, var(--accent) 32%, var(--border));

    /* Derived tokens */
    --section-bg: var(--page-bg);
    --surface: var(--surface-bg);
    --text: var(--text-main);
    --muted: var(--text-muted);
    --line: var(--divider-color);
    --accent-2: var(--accent-soft);
    --accent-3: color-mix(in srgb, var(--accent) 65%, var(--page-bg));
    --surface-2: color-mix(in srgb, var(--surface-bg) 88%, var(--text-main) 12%);
    --section-divider: var(--divider-color);
    --hover-border: color-mix(in srgb, var(--accent) 28%, var(--border));
    --surface-subtle: color-mix(in srgb, var(--text-main) 5%, transparent);
    --surface-hover: color-mix(in srgb, var(--accent) 7%, transparent);
    --hero-glow: color-mix(in srgb, var(--accent) 14%, transparent);
    --hero-panel-bg: var(--hero-bg);
    --media-bg: var(--page-bg);
    --footer-bg: color-mix(in srgb, var(--page-bg) 90%, #000 10%);
    --kicker-color: var(--section-kicker-color);
    --label-color: var(--section-kicker-color);
    --text-soft: color-mix(in srgb, var(--text-main) 82%, var(--page-bg));
    --text-faint: color-mix(in srgb, var(--text-main) 55%, var(--page-bg));
    --cta-shadow: var(--button-shadow);
    --cta-shadow-hover: var(--button-shadow-hover);
    --stream-bg: var(--stream-button-bg);
    --stream-border: var(--stream-button-border);
    --stream-radius: var(--stream-button-radius);
    --stream-padding-x: var(--stream-button-padding-x);
    --stream-font-weight: var(--stream-button-font-weight);
    --stream-hover-bg: var(--stream-button-hover-bg);
    --stream-hover-border: var(--stream-button-hover-border);

    /* Legacy aliases */
    --bg: var(--page-bg);
    --max: var(--content-width);
    --panel: var(--surface-bg);
    --panel-2: var(--surface-2);
    --lilac: var(--section-kicker-color);
    --font-heading: var(--hero-font);
    --font-body: var(--body-font);
    --font-title: var(--hero-font);
    --font-ui: var(--body-font);
    --consent-bg: var(--hero-bg);

    --hero-fit: cover;
    --press-position: center top;

    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--body-font);
    background: var(--page-bg);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

/* ── Theme presets (Hommage-Keys) ── */

.release-page.theme-frida {
    --page-bg: #F6F1E8;
    --hero-bg: linear-gradient(160deg, #FBF7F0 0%, #F6F1E8 48%, #EFE8DC 100%);
    --surface-bg: #FFFCF7;
    --text-main: #111111;
    --text-muted: #444444;
    --accent: #8A00FF;
    --accent-soft: #FF6A00;
    --border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --hero-font: "Space Grotesk", "Inter", system-ui, sans-serif;
    --body-font: "Inter", system-ui, sans-serif;
    --hero-title-weight: 700;
    --hero-title-weight-compact: 600;
    --hero-title-tracking: -0.04em;
    --hero-title-line-height: 0.96;
    --hero-title-max: 7rem;
    --hero-title-min: 3.75rem;
    --button-bg: #8A00FF;
    --button-text: #ffffff;
    --button-border: color-mix(in srgb, var(--accent) 70%, #000 30%);
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: #9b1aff;
    --button-border-hover: var(--accent);
    --button-shadow-hover: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent);
    --stream-button-bg: color-mix(in srgb, var(--text-main) 4%, transparent);
    --stream-button-border: color-mix(in srgb, var(--text-main) 16%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 22px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
    --stream-button-hover-border: color-mix(in srgb, var(--accent) 32%, var(--border));
    --section-kicker-color: #FF2E88;
    --meta-badge-bg: color-mix(in srgb, var(--text-main) 4%, transparent);
    --meta-badge-border: color-mix(in srgb, #006B68 28%, var(--border));
    --meta-badge-text: color-mix(in srgb, var(--text-main) 74%, var(--page-bg));
    --meta-badge-radius: 2px;
    --footer-bg: #EFE8DC;
    --hero-glow: color-mix(in srgb, #8A00FF 16%, transparent);
}

.release-page.theme-donna {
    --page-bg: #FFFFFF;
    --hero-bg: linear-gradient(180deg, #FFFFFF 0%, #F7F4FF 100%);
    --surface-bg: #FFFFFF;
    --text-main: #0B0B0B;
    --text-muted: #4A4A4A;
    --accent: #FF2EC4;
    --accent-soft: #FF1F1F;
    --border: color-mix(in srgb, var(--text-main) 12%, transparent);
    --hero-font: "Archivo Black", "Impact", system-ui, sans-serif;
    --body-font: "Inter", system-ui, sans-serif;
    --hero-title-weight: 400;
    --hero-title-weight-compact: 400;
    --hero-title-tracking: -0.03em;
    --hero-title-line-height: 0.94;
    --hero-title-max: 6.75rem;
    --hero-title-min: 3.6rem;
    --button-bg: #FF2EC4;
    --button-text: #ffffff;
    --button-border: #000000;
    --button-radius: 0;
    --button-shadow: 4px 4px 0 #000000;
    --button-bg-hover: #FF1F1F;
    --button-border-hover: #000000;
    --button-shadow-hover: 5px 5px 0 #000000;
    --stream-button-bg: #FFFFFF;
    --stream-button-border: #000000;
    --stream-button-radius: 0;
    --stream-button-padding-x: 22px;
    --stream-button-font-weight: 700;
    --stream-button-hover-bg: color-mix(in srgb, #B7A4FF 18%, #fff);
    --stream-button-hover-border: #000000;
    --section-kicker-color: #FF1F1F;
    --meta-badge-bg: #FFFFFF;
    --meta-badge-border: #000000;
    --meta-badge-text: var(--text-main);
    --meta-badge-radius: 0;
    --media-bg: #F4F0FF;
    --footer-bg: #F4F0FF;
    --hero-glow: color-mix(in srgb, #FF2EC4 12%, transparent);
}

.release-page.theme-billie {
    --page-bg: #050505;
    --hero-bg: linear-gradient(180deg, #111111 0%, #050505 100%);
    --surface-bg: #111111;
    --text-main: #D8D8D2;
    --text-muted: #8F8F88;
    --accent: #B8FF00;
    --accent-soft: #4B6FFF;
    --border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --hero-font: "Space Grotesk", "Inter", system-ui, sans-serif;
    --body-font: "Inter", system-ui, sans-serif;
    --hero-title-weight: 600;
    --hero-title-weight-compact: 500;
    --hero-title-tracking: -0.035em;
    --hero-title-line-height: 0.94;
    --hero-title-max: 6.75rem;
    --hero-title-min: 3.6rem;
    --button-bg: #B8FF00;
    --button-text: #050505;
    --button-border: color-mix(in srgb, #B8FF00 70%, #0E3B3F 30%);
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: #c8ff33;
    --button-border-hover: var(--accent);
    --button-shadow-hover: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
    --stream-button-bg: color-mix(in srgb, var(--text-main) 5%, transparent);
    --stream-button-border: color-mix(in srgb, var(--text-main) 16%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 22px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --stream-button-hover-border: color-mix(in srgb, var(--accent) 40%, var(--border));
    --section-kicker-color: #4B6FFF;
    --meta-badge-bg: color-mix(in srgb, #0E3B3F 55%, transparent);
    --meta-badge-border: color-mix(in srgb, var(--accent) 22%, var(--border));
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 2px;
    --footer-bg: #050505;
    --hero-glow: color-mix(in srgb, #B8FF00 12%, transparent);
}

.release-page.theme-kurt {
    --page-bg: #E8E0D2;
    --hero-bg: linear-gradient(180deg, #F0E9DC 0%, #D9D0C0 100%);
    --surface-bg: #F2EBE0;
    --text-main: #171717;
    --text-muted: #4E4A45;
    --accent: #A83822;
    --accent-soft: #D0A11F;
    --border: color-mix(in srgb, var(--text-main) 16%, transparent);
    --hero-font: "Oswald", "Arial Narrow", sans-serif;
    --body-font: "JetBrains Mono", "Inter", system-ui, monospace;
    --hero-title-weight: 700;
    --hero-title-weight-compact: 600;
    --hero-title-tracking: 0.01em;
    --hero-title-line-height: 0.92;
    --hero-title-max: 6.5rem;
    --hero-title-min: 3.5rem;
    --section-spacing: 3.75rem;
    --button-bg: #A83822;
    --button-text: #ffffff;
    --button-border: #2B2B2B;
    --button-radius: 0;
    --button-shadow: none;
    --button-bg-hover: #bf4128;
    --button-border-hover: #171717;
    --button-shadow-hover: none;
    --stream-button-bg: transparent;
    --stream-button-border: color-mix(in srgb, var(--text-main) 22%, transparent);
    --stream-button-radius: 0;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 700;
    --stream-button-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --stream-button-hover-border: color-mix(in srgb, var(--accent) 42%, var(--border));
    --section-kicker-color: #77706A;
    --meta-badge-bg: transparent;
    --meta-badge-border: color-mix(in srgb, var(--text-main) 22%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 0;
    --footer-bg: #D9D0C0;
    --hero-glow: color-mix(in srgb, var(--accent) 14%, transparent);
}

.release-page.theme-noel {
    --page-bg: #F4E8D0;
    --hero-bg: linear-gradient(180deg, #FFF6E8 0%, #EAD9B8 100%);
    --surface-bg: #FFF8EC;
    --text-main: #18233A;
    --text-muted: #4D5A73;
    --accent: #78A9D6;
    --accent-soft: #D13B2F;
    --border: color-mix(in srgb, var(--text-main) 12%, transparent);
    --hero-font: "Montserrat Alternates", "Space Grotesk", sans-serif;
    --body-font: "Inter Tight", "Inter", system-ui, sans-serif;
    --hero-title-weight: 700;
    --hero-title-weight-compact: 600;
    --hero-title-tracking: -0.03em;
    --hero-title-line-height: 0.96;
    --hero-title-max: 6.5rem;
    --hero-title-min: 3.5rem;
    --button-bg: #78A9D6;
    --button-text: #FFFFFF;
    --button-border: color-mix(in srgb, #18233A 35%, #78A9D6 65%);
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: #D13B2F;
    --button-border-hover: #18233A;
    --button-shadow-hover: 0 3px 12px color-mix(in srgb, #D13B2F 18%, transparent);
    --stream-button-bg: #FFFFFF;
    --stream-button-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #C9A66B 14%, #fff);
    --stream-button-hover-border: color-mix(in srgb, var(--accent) 30%, var(--border));
    --section-kicker-color: #C9A66B;
    --meta-badge-bg: #FFFFFF;
    --meta-badge-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 2px;
    --media-bg: #EAD9B8;
    --footer-bg: #EAD9B8;
    --hero-glow: color-mix(in srgb, #78A9D6 12%, transparent);
}

.release-page.theme-dave {
    --page-bg: #030303;
    --hero-bg: linear-gradient(180deg, #111827 0%, #030303 100%);
    --surface-bg: #111827;
    --text-main: #F1F3F5;
    --text-muted: #9AA1AB;
    --accent: #B00020;
    --accent-soft: #2F6BFF;
    --border: color-mix(in srgb, #3A3D44 70%, transparent);
    --hero-font: "Sora", "Inter", system-ui, sans-serif;
    --body-font: "JetBrains Mono", "Inter", system-ui, monospace;
    --hero-title-weight: 700;
    --hero-title-weight-compact: 600;
    --hero-title-tracking: -0.03em;
    --hero-title-line-height: 0.94;
    --hero-title-max: 6.75rem;
    --hero-title-min: 3.6rem;
    --button-bg: #B00020;
    --button-text: #F1F3F5;
    --button-border: color-mix(in srgb, #B00020 70%, #fff 30%);
    --button-radius: 0;
    --button-shadow: none;
    --button-bg-hover: #2F6BFF;
    --button-border-hover: #F1F3F5;
    --button-shadow-hover: 0 0 16px color-mix(in srgb, #B00020 30%, transparent);
    --stream-button-bg: color-mix(in srgb, #3A3D44 40%, transparent);
    --stream-button-border: color-mix(in srgb, #3A3D44 80%, transparent);
    --stream-button-radius: 0;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #B00020 14%, transparent);
    --stream-button-hover-border: color-mix(in srgb, #B00020 48%, transparent);
    --section-kicker-color: #2F6BFF;
    --meta-badge-bg: color-mix(in srgb, #111827 80%, #000);
    --meta-badge-border: color-mix(in srgb, #3A3D44 80%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 0;
    --footer-bg: #030303;
    --hero-glow: color-mix(in srgb, #B00020 16%, transparent);
}

.release-page.theme-robyn {
    --page-bg: #070A18;
    --hero-bg: linear-gradient(180deg, #12162C 0%, #070A18 100%);
    --surface-bg: #12162C;
    --text-main: #D9D9E8;
    --text-muted: #9494B0;
    --accent: #FF2DAA;
    --accent-soft: #00D9FF;
    --border: color-mix(in srgb, #6B2CFF 22%, transparent);
    --hero-font: "Space Grotesk", "Sora", sans-serif;
    --body-font: "Inter", system-ui, sans-serif;
    --hero-title-weight: 700;
    --hero-title-weight-compact: 600;
    --hero-title-tracking: -0.035em;
    --hero-title-line-height: 0.94;
    --hero-title-max: 6.75rem;
    --hero-title-min: 3.6rem;
    --button-bg: linear-gradient(135deg, #FF2DAA 0%, #6B2CFF 100%);
    --button-text: #FFFFFF;
    --button-border: color-mix(in srgb, #FF2DAA 55%, transparent);
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: linear-gradient(135deg, #00D9FF 0%, #6B2CFF 100%);
    --button-border-hover: #00D9FF;
    --button-shadow-hover: 0 0 16px color-mix(in srgb, #FF2DAA 28%, transparent);
    --stream-button-bg: color-mix(in srgb, #FF2DAA 6%, transparent);
    --stream-button-border: color-mix(in srgb, #00D9FF 24%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #00D9FF 10%, transparent);
    --stream-button-hover-border: color-mix(in srgb, #FF2DAA 42%, transparent);
    --section-kicker-color: #00D9FF;
    --meta-badge-bg: color-mix(in srgb, #6B2CFF 12%, transparent);
    --meta-badge-border: color-mix(in srgb, #6B2CFF 28%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 2px;
    --footer-bg: #050712;
    --hero-glow: color-mix(in srgb, #FF2DAA 16%, transparent);
}

.release-page.theme-nina {
    --page-bg: #F7F0E4;
    --hero-bg: linear-gradient(180deg, #FFF8EE 0%, #EDE2D0 100%);
    --surface-bg: #FFF8EE;
    --text-main: #111111;
    --text-muted: #5A3326;
    --accent: #6D1E2E;
    --accent-soft: #B9833F;
    --border: color-mix(in srgb, var(--text-main) 12%, transparent);
    --hero-font: "DM Serif Display", Georgia, serif;
    --body-font: "Manrope", "Inter", system-ui, sans-serif;
    --hero-title-weight: 400;
    --hero-title-weight-compact: 400;
    --hero-title-tracking: -0.02em;
    --hero-title-line-height: 1;
    --hero-title-max: 6.5rem;
    --hero-title-min: 3.5rem;
    --button-bg: #6D1E2E;
    --button-text: #FFF8EE;
    --button-border: #241713;
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: #5A3326;
    --button-border-hover: #241713;
    --button-shadow-hover: 0 3px 12px color-mix(in srgb, #6D1E2E 16%, transparent);
    --stream-button-bg: color-mix(in srgb, #FFF8EE 90%, #111 10%);
    --stream-button-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #B9833F 12%, #FFF8EE);
    --stream-button-hover-border: color-mix(in srgb, #6D1E2E 28%, var(--border));
    --section-kicker-color: #B9833F;
    --meta-badge-bg: color-mix(in srgb, #FFF8EE 92%, #111 8%);
    --meta-badge-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 2px;
    --media-bg: #EDE2D0;
    --footer-bg: #EDE2D0;
    --hero-glow: color-mix(in srgb, #B9833F 12%, transparent);
}

.release-page.theme-carole {
    --page-bg: #F6EAD7;
    --hero-bg: linear-gradient(180deg, #FFF4E4 0%, #EAD9BE 100%);
    --surface-bg: #FFF6E8;
    --text-main: #4A3326;
    --text-muted: #6F5646;
    --accent: #D99A45;
    --accent-soft: #7E8F6A;
    --border: color-mix(in srgb, var(--text-main) 12%, transparent);
    --hero-font: "Fraunces", Georgia, serif;
    --body-font: "Source Sans 3", "Inter", system-ui, sans-serif;
    --hero-title-weight: 600;
    --hero-title-weight-compact: 500;
    --hero-title-tracking: -0.02em;
    --hero-title-line-height: 1;
    --hero-title-max: 6.25rem;
    --hero-title-min: 3.5rem;
    --section-spacing: 3.75rem;
    --button-bg: #D99A45;
    --button-text: #FFFFFF;
    --button-border: color-mix(in srgb, #4A3326 35%, #D99A45 65%);
    --button-radius: 4px;
    --button-shadow: none;
    --button-bg-hover: #7E8F6A;
    --button-border-hover: #4A3326;
    --button-shadow-hover: 0 3px 12px color-mix(in srgb, #D99A45 16%, transparent);
    --stream-button-bg: #FFFFFF;
    --stream-button-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --stream-button-radius: 4px;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #93B7C7 14%, #fff);
    --stream-button-hover-border: color-mix(in srgb, #D99A45 28%, var(--border));
    --section-kicker-color: #7E8F6A;
    --meta-badge-bg: #FFFFFF;
    --meta-badge-border: color-mix(in srgb, var(--text-main) 14%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 4px;
    --media-bg: #EAD9BE;
    --footer-bg: #EAD9BE;
    --hero-glow: color-mix(in srgb, #D99A45 12%, transparent);
}

.release-page.theme-bruno {
    --page-bg: #080808;
    --hero-bg: linear-gradient(180deg, #1A1210 0%, #080808 100%);
    --surface-bg: #14110F;
    --text-main: #FFF3D7;
    --text-muted: #C7B48E;
    --accent: #D6A23A;
    --accent-soft: #7A1E2C;
    --border: color-mix(in srgb, #FFF3D7 14%, transparent);
    --hero-font: "Archivo Black", "Impact", system-ui, sans-serif;
    --body-font: "Manrope", "Inter", system-ui, sans-serif;
    --hero-title-weight: 400;
    --hero-title-weight-compact: 400;
    --hero-title-tracking: -0.025em;
    --hero-title-line-height: 0.94;
    --hero-title-max: 6.75rem;
    --hero-title-min: 3.6rem;
    --button-bg: #D6A23A;
    --button-text: #080808;
    --button-border: color-mix(in srgb, #D6A23A 70%, #fff 30%);
    --button-radius: 2px;
    --button-shadow: none;
    --button-bg-hover: #7A1E2C;
    --button-border-hover: #FFF3D7;
    --button-shadow-hover: 0 0 16px color-mix(in srgb, #D6A23A 24%, transparent);
    --stream-button-bg: color-mix(in srgb, #FFF3D7 5%, transparent);
    --stream-button-border: color-mix(in srgb, #FFF3D7 18%, transparent);
    --stream-button-radius: 2px;
    --stream-button-padding-x: 20px;
    --stream-button-font-weight: 600;
    --stream-button-hover-bg: color-mix(in srgb, #006B6B 16%, transparent);
    --stream-button-hover-border: color-mix(in srgb, #D6A23A 36%, transparent);
    --section-kicker-color: #006B6B;
    --meta-badge-bg: color-mix(in srgb, #7A1E2C 22%, transparent);
    --meta-badge-border: color-mix(in srgb, #D6A23A 28%, transparent);
    --meta-badge-text: var(--text-muted);
    --meta-badge-radius: 2px;
    --footer-bg: #080808;
    --hero-glow: color-mix(in srgb, #D6A23A 14%, transparent);
}

/* Hero image (Admin: hero_image_mode; Cover-Modus nutzt serverseitig gecropptes Quadrat) */

.release-hero.hero-fit-cover {
    --hero-fit: cover;
}

.release-hero.hero-fit-contain {
    --hero-fit: contain;
}

.release-hero.hero-fit-contain .release-hero__media {
    background: var(--surface);
}

.release-page img {
    display: block;
    max-width: 100%;
}

.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: #f59e0b;
    color: #111111;
    border-bottom: 1px solid #111111;
}

.preview-banner__meta {
    margin-left: 12px;
    font-weight: 800;
    opacity: 0.95;
}

.release-page.is-preview {
    padding-top: 48px;
}

.section-label {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--section-kicker-color);
    opacity: 1;
}

/* ── 1. Release Hero ── */

.release-hero__artist {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.release-hero__title,
.release-title {
    margin: 0 0 24px;
    font-family: var(--hero-font);
    font-size: clamp(var(--hero-title-min), 7vw, var(--hero-title-max));
    font-weight: var(--hero-title-weight);
    line-height: var(--hero-title-line-height);
    letter-spacing: var(--hero-title-tracking);
    color: var(--text-main);
    max-width: 100%;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
}

.release-hero.title-long .release-title,
.release-hero.title-long .release-hero__title,
.title-long .release-title,
.title-long .release-hero__title {
    font-size: clamp(calc(var(--hero-title-min) * 0.88), 5.2vw, calc(var(--hero-title-max) * 0.88));
    font-weight: var(--hero-title-weight-compact);
    line-height: 1.02;
    letter-spacing: calc(var(--hero-title-tracking) + 0.01em);
    margin-bottom: 20px;
}

.release-hero.title-very-long .release-title,
.release-hero.title-very-long .release-hero__title,
.title-very-long .release-title,
.title-very-long .release-hero__title {
    font-size: clamp(calc(var(--hero-title-min) * 0.72), 4.2vw, calc(var(--hero-title-max) * 0.72));
    font-weight: var(--hero-title-weight-compact);
    line-height: 1.06;
    letter-spacing: calc(var(--hero-title-tracking) + 0.02em);
    margin-bottom: 18px;
}

.release-hero.title-extreme .release-title,
.release-hero.title-extreme .release-hero__title,
.title-extreme .release-title,
.title-extreme .release-hero__title {
    font-size: clamp(calc(var(--hero-title-min) * 0.58), 3.2vw, calc(var(--hero-title-max) * 0.58));
    font-weight: var(--hero-title-weight-compact);
    line-height: 1.1;
    letter-spacing: calc(var(--hero-title-tracking) + 0.03em);
    max-width: 100%;
    margin-bottom: 16px;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.release-page.theme-kurt .release-hero.title-long .release-title,
.release-page.theme-kurt .release-hero.title-long .release-hero__title,
.release-page.theme-kurt .release-hero.title-very-long .release-title,
.release-page.theme-kurt .release-hero.title-very-long .release-hero__title,
.release-page.theme-kurt .release-hero.title-extreme .release-title,
.release-page.theme-kurt .release-hero.title-extreme .release-hero__title {
    letter-spacing: 0.02em;
    max-width: 100%;
}

.title-extreme .release-meta,
.title-extreme .release-hero__meta {
    margin-top: 18px;
    margin-bottom: 22px;
}

.title-extreme .hero-cta,
.title-extreme .release-hero__cta {
    margin-top: 26px;
}

.full-title-note {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px clamp(48px, 6vw, 92px) 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.full-title-note span {
    display: block;
    color: var(--accent-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    margin-bottom: 6px;
}

.full-title-note strong {
    font-weight: 600;
    color: var(--text-soft);
}

.artist-long .hero-artist,
.artist-long .release-hero__artist {
    font-size: 13px;
    letter-spacing: 0.14em;
    line-height: 1.35;
    max-width: 100%;
}

.artist-very-long .hero-artist,
.artist-very-long .release-hero__artist {
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.35;
    max-width: 100%;
}

.release-hero__meta {
    margin: 0 0 20px;
    max-width: 100%;
}

.release-hero__date-block {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    max-width: 100%;
}

.release-hero__date-label {
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--meta-badge-text, var(--text-color));
    opacity: 0.72;
}

.release-hero__date {
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--body-font);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-color);
}

.release-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 420px;
    max-width: 100%;
    height: 62px;
    margin-top: 28px;
    margin-bottom: 0;
    border-radius: var(--button-radius);
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--button-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.release-hero__cta-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.release-hero__cta-icon svg {
    width: 100%;
    height: 100%;
}

.release-hero__cta:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-border-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}

@media (min-width: 960px) {
    .release-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        min-height: 720px;
        height: min(100vh, 820px);
        max-height: 820px;
        overflow: hidden;
        background: var(--page-bg);
    }

    .release-hero.hero-fit-contain {
        align-items: stretch;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .release-hero__media,
    .release-hero__panel {
        min-width: 0;
    }

    .release-hero.hero-fit-cover .release-hero__media,
    .release-hero.hero-fit-cover .release-hero__panel {
        height: 100%;
    }

    .release-hero.hero-fit-contain .release-hero__media,
    .release-hero.hero-fit-contain .release-hero__panel {
        align-self: stretch;
        height: auto;
        min-height: 100%;
    }

    .release-hero__media {
        overflow: hidden;
        background: var(--media-bg);
    }

    .release-hero.hero-fit-contain .release-hero__media {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface);
    }

    .release-hero.hero-fit-cover .release-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .release-hero.hero-fit-contain .release-hero__media img {
        width: 100%;
        height: auto;
        max-height: none;
        flex: 0 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
        display: block;
    }

    .release-hero.hero-fit-contain .release-hero__panel {
        display: flex;
        align-items: center;
    }

    .release-hero__panel {
        display: flex;
        align-items: center;
        background:
            radial-gradient(circle at 88% 8%, var(--hero-glow), transparent 36%),
            var(--hero-panel-bg);
        padding: clamp(48px, 6vh, 80px) clamp(48px, 6vw, 92px);
        box-sizing: border-box;
    }

    .release-hero__content {
        width: 100%;
        max-width: 560px;
    }

    .release-hero.title-extreme {
        min-height: 720px;
        height: min(100vh, 820px);
        max-height: 820px;
        overflow: hidden;
    }

    .release-hero.title-extreme.hero-fit-contain {
        align-items: stretch;
        height: min(100vh, 820px);
        max-height: 820px;
        overflow: hidden;
    }

    .release-hero.title-extreme .release-hero__media,
    .release-hero.title-extreme .release-hero__panel {
        min-height: 720px;
        height: 100%;
        align-self: stretch;
    }

    .release-hero.title-extreme.hero-fit-contain .release-hero__media {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow: hidden;
        background: var(--media-bg);
    }

    .release-hero.title-extreme.hero-fit-contain .release-hero__media img {
        width: 100%;
        height: auto;
        max-height: 100%;
        flex: 0 0 auto;
        object-fit: var(--hero-fit, contain);
        object-position: center center;
        transform: none;
    }

    .release-hero.title-extreme .release-hero__panel {
        align-items: stretch;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .release-hero.title-extreme .release-hero__content {
        display: flex;
        flex-direction: column;
        max-width: 620px;
        max-height: calc(100vh - 120px);
        min-height: 0;
        overflow: hidden;
    }

    .release-hero.title-extreme .release-hero__artist {
        flex-shrink: 0;
    }

    .release-hero.title-extreme .release-hero__title,
    .release-hero.title-extreme .release-title {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin-bottom: 0;
        padding-right: 8px;
    }

    .release-hero.title-extreme .release-meta,
    .release-hero.title-extreme .release-hero__meta {
        flex-shrink: 0;
    }

    .release-hero.title-extreme .hero-cta,
    .release-hero.title-extreme .release-hero__cta {
        flex-shrink: 0;
    }
}

@media (min-width: 761px) and (max-width: 959px) {
    .release-hero {
        display: grid;
        grid-template-columns: 46% 54%;
        align-items: start;
        min-height: 640px;
        height: min(100vh, 820px);
        max-height: 820px;
        overflow: hidden;
        background: var(--page-bg);
    }

    .release-hero.hero-fit-contain {
        align-items: stretch;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .release-hero.hero-fit-cover .release-hero__media,
    .release-hero.hero-fit-cover .release-hero__panel {
        height: 100%;
    }

    .release-hero.hero-fit-contain .release-hero__media,
    .release-hero.hero-fit-contain .release-hero__panel {
        align-self: stretch;
        height: auto;
        min-height: 100%;
    }

    .release-hero__media {
        overflow: hidden;
        background: var(--media-bg);
    }

    .release-hero.hero-fit-contain .release-hero__media {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface);
    }

    .release-hero.hero-fit-cover .release-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .release-hero.hero-fit-contain .release-hero__media img {
        width: 100%;
        height: auto;
        max-height: none;
        flex: 0 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
        display: block;
    }

    .release-hero.hero-fit-contain .release-hero__panel {
        display: flex;
        align-items: center;
    }

    .release-hero__panel {
        display: flex;
        align-items: center;
        background:
            radial-gradient(circle at 88% 8%, var(--hero-glow), transparent 36%),
            var(--hero-panel-bg);
        padding: 56px 48px;
        box-sizing: border-box;
    }

    .release-hero__content {
        width: 100%;
        max-width: 560px;
    }

    .release-hero.title-extreme {
        min-height: 640px;
        height: min(100vh, 820px);
        max-height: 820px;
        overflow: hidden;
    }

    .release-hero.title-extreme .release-hero__media,
    .release-hero.title-extreme .release-hero__panel {
        min-height: 640px;
        height: 100%;
    }

    .release-hero.title-extreme .release-hero__panel {
        align-items: stretch;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .release-hero.title-extreme .release-hero__content {
        display: flex;
        flex-direction: column;
        max-width: 620px;
        max-height: calc(100vh - 120px);
        min-height: 0;
        overflow: hidden;
    }

    .release-hero.title-extreme .release-hero__title,
    .release-hero.title-extreme .release-title {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin-bottom: 0;
        padding-right: 8px;
    }

    .release-hero.title-extreme .release-meta,
    .release-hero.title-extreme .release-hero__meta,
    .release-hero.title-extreme .hero-cta,
    .release-hero.title-extreme .release-hero__cta {
        flex-shrink: 0;
    }
}

/* ── Demo theme picker (Mara only) ── */

.demo-theme-picker {
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--divider-color);
    background: color-mix(in srgb, var(--section-bg) 88%, var(--text-color) 4%);
}

.demo-theme-picker__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.demo-theme-picker__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
    margin: 0 0 10px;
}

.demo-theme-picker__title {
    margin: 0;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--section-kicker-color, var(--text-color));
}

.demo-theme-picker__text {
    margin: 0;
    font-family: var(--body-font);
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-color);
    opacity: 0.68;
}

.demo-theme-picker__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.demo-theme-picker__track::-webkit-scrollbar {
    height: 4px;
}

.demo-theme-picker__track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-color) 28%, transparent);
}

.demo-theme-card {
    flex: 0 0 auto;
    width: 7.6rem;
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1.5px solid var(--divider-color);
    background: var(--section-bg);
    color: var(--text-color);
    text-decoration: none;
    scroll-snap-align: start;
}

.demo-theme-card__swatch {
    display: block;
    width: 100%;
    height: 18px;
    border: 1px solid color-mix(in srgb, var(--text-color) 18%, transparent);
}

.demo-theme-card__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--body-font);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text-color);
}

.demo-theme-card__active {
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.demo-theme-card__genre {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--body-font);
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--text-color);
    opacity: 0.58;
}

.demo-theme-card:hover,
.demo-theme-card:focus-visible {
    border-color: var(--text-color);
    outline: none;
}

.demo-theme-card.is-active {
    border-color: var(--text-color);
    border-width: 2px;
    padding: 6.5px;
    box-shadow: inset 3px 0 0 var(--text-color);
}

.demo-theme-card.is-active .demo-theme-card__name {
    font-weight: 800;
}

@media (min-width: 1180px) {
    .demo-theme-picker__track {
        overflow: visible;
        padding-bottom: 2px;
    }

    .demo-theme-card {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .demo-theme-picker {
        padding: 12px 12px 14px;
    }

    .demo-theme-picker__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-bottom: 8px;
    }

    .demo-theme-card {
        width: 7.1rem;
        min-height: 4.4rem;
    }

    .release-hero__date-block {
        gap: 0.5rem;
    }

    .release-hero__date {
        font-size: 1.2rem;
    }
}

/* ── 2. Streaming ── */

.stream-bar {
    padding: calc(var(--section-spacing) * 0.85) 20px calc(var(--section-spacing) * 1.1);
    border-bottom: 1px solid var(--divider-color);
    background: var(--section-bg);
}

.stream-bar__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.stream-bar__label {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--section-kicker-color);
    text-align: center;
}

.stream-bar__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.stream-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    height: 44px;
    padding: 0 var(--stream-button-padding-x);
    border-radius: var(--stream-button-radius);
    background: var(--stream-button-bg);
    border: 1px solid var(--stream-button-border);
    color: var(--stream-button-text);
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: var(--stream-button-font-weight);
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.stream-pill:hover {
    background: var(--stream-button-hover-bg);
    border-color: var(--stream-button-hover-border);
    color: var(--stream-button-text);
}

.stream-pill__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.stream-pill__icon svg {
    width: 100%;
    height: 100%;
}

.stream-pill__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Main ── */

.release-main {
    background: var(--page-bg);
    color: var(--text-main);
}

.release-section,
.release-about,
.release-video,
.release-press,
.release-contact {
    margin-top: 0;
}

/* ── 3. About ── */

.release-about {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--section-spacing) 20px calc(var(--section-spacing) * 0.875);
    display: grid;
    grid-template-columns: 28% 72%;
    gap: 48px;
    align-items: start;
    border-bottom: 1px solid var(--divider-color);
}

.release-about__text {
    margin: 0;
    font-family: var(--font-ui);
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.25;
    color: var(--text-soft);
    max-width: 720px;
}

.release-about__quote {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.release-about__quote p {
    margin: 0;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 26px;
    line-height: 1.3;
    color: var(--kicker-color);
}

.release-about__quote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-style: normal;
    color: var(--text-faint);
}

/* Video */

.release-video {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: calc(var(--section-spacing) * 0.875) 20px var(--section-spacing);
    border-top: 1px solid var(--divider-color);
}

.release-video__header {
    margin-bottom: 22px;
}

.release-video .section-label {
    color: var(--section-kicker-color);
}

.release-video__subline {
    margin: 8px 0 0;
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1.45;
}

.release-video__media {
    width: 100%;
    max-width: var(--content-width);
}

.video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: var(--button-radius);
}

.video-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.video-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--consent-bg);
    border: 1px solid var(--border);
}

.video-consent__inner {
    text-align: center;
    padding: 32px 24px;
    max-width: 420px;
}

.video-consent__title {
    margin: 0 0 12px;
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.video-consent__text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-faint);
}

.video-consent__load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border: 1px solid var(--button-border);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--button-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-consent__load:hover {
    transform: translateY(-1px);
    box-shadow: var(--button-shadow);
}

.video-consent__privacy {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
}

.video-consent__privacy:hover {
    color: var(--kicker-color);
}

.release-video__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 20px;
    border-radius: var(--button-radius);
    border: 1px solid var(--line);
    background: var(--surface-subtle);
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.release-video__link:hover {
    border-color: var(--hover-border);
    background: var(--surface-hover);
}

.release-video__link-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.release-video__link-icon svg {
    width: 100%;
    height: 100%;
}

/* ── 4. Press ── */

.release-press {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: calc(var(--section-spacing) * 0.75) 20px calc(var(--section-spacing) * 0.85);
    border-top: 1px solid var(--divider-color);
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 42px;
    align-items: center;
}

.release-press__photo,
.press-photo {
    margin: 0;
    overflow: hidden;
}

.release-press__photo img,
.press-photo img {
    width: 100%;
    max-height: 390px;
    object-fit: cover;
    object-position: var(--press-position, center top);
    border-radius: var(--button-radius);
}

.release-press__info,
.press-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 520px;
}

.release-press__info--solo {
    grid-column: 1 / -1;
}

.release-press__desc {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--muted);
}

.press-fold {
    display: flex;
    flex-direction: column;
    max-width: 420px;
}

.press-fold__summary {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none;
}

.press-fold__summary::-webkit-details-marker {
    display: none;
}

.press-fold__teaser {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-soft);
}

.press-fold[open] .press-fold__teaser {
    display: none;
}

.press-fold__label {
    display: block;
    margin-top: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
    transition: color 0.15s ease;
}

.press-fold__summary:hover .press-fold__label {
    color: var(--accent-2);
}

.press-fold[open] {
    display: flex;
    flex-direction: column;
}

.press-fold[open] .press-fold__summary {
    order: 2;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.press-fold[open] .press-fold__body {
    order: 1;
}

.press-fold__body {
    display: none;
    max-width: 420px;
    padding-top: 0;
}

.press-fold[open] .press-fold__body {
    display: block;
    padding-top: 10px;
}

.press-fold__body--static {
    display: block;
    padding-top: 10px;
}

.press-fold__body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-soft);
}

.press-fold__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.press-fold__link:hover {
    color: var(--accent-2);
}

/* ── 5. Contact ── */

.release-contact {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: calc(var(--section-spacing) * 0.72) 20px calc(var(--section-spacing) * 0.9);
    border-top: 1px solid var(--divider-color);
    display: grid;
    grid-template-columns: 28% 72%;
    gap: 44px;
    align-items: start;
}

.release-contact__list {
    display: flex;
    flex-direction: column;
}

.release-contact__row,
.contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    height: 42px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.release-contact__row:hover {
    color: var(--accent-2);
    border-bottom-color: var(--hover-border);
}

.release-contact__row-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
}

.release-contact__row-value {
    flex: 1;
    min-width: 0;
    max-width: 62%;
    text-align: right;
    word-break: break-word;
    font-weight: 500;
    font-size: 15px;
}

.release-contact__row-arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.4;
}

.release-contact__row-arrow svg {
    width: 100%;
    height: 100%;
}

.release-contact__row:hover .release-contact__row-arrow {
    opacity: 1;
    color: var(--accent-2);
}

/* ── Footer ── */

.release-footer {
    background: var(--footer-bg);
    padding: 22px 20px 26px;
    margin-top: auto;
}

.release-footer__inner {
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    justify-items: start;
    text-align: left;
}

.release-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.release-footer__legal a {
    color: var(--text-soft);
    text-decoration: none;
    padding: 4px 2px;
}

.release-footer__sep {
    display: inline-block;
    margin: 0 12px;
    color: var(--muted);
    font-weight: 400;
    user-select: none;
}

.release-footer__legal a:hover {
    color: var(--kicker-color);
    text-decoration: underline;
}

.release-footer__artist {
    margin: 0;
    padding-top: 2px;
    border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.release-footer__artist a {
    color: var(--muted);
    text-decoration: none;
}

.release-footer__artist a:hover {
    color: var(--kicker-color);
    text-decoration: underline;
}

.release-footer__credit {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-faint);
}

.release-footer__credit strong {
    color: var(--text-soft);
    font-weight: 700;
}

.release-footer__credit a {
    color: var(--accent-2);
    text-decoration: none;
}

.release-footer__credit a:hover {
    color: var(--kicker-color);
    text-decoration: underline;
}

@media (max-width: 760px) {
    .release-footer {
        padding: 20px 16px 24px;
    }

    .release-footer__legal {
        font-size: 14px;
        column-gap: 0;
        row-gap: 4px;
    }

    .release-footer__sep {
        margin: 0 10px;
    }

    .release-footer__credit {
        font-size: 11px;
    }
}

/* ── 6. Mobile Hero (unter 760px) ── */

@media (max-width: 760px) {
    .release-hero {
        display: block;
        height: auto;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .release-hero__media {
        height: auto;
        min-height: 0;
        max-height: none;
        background: var(--page-bg);
    }

    .release-hero__media img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: var(--hero-fit, contain);
        object-position: center center;
        transform: none;
        display: block;
    }

    .release-hero__panel {
        display: block;
        height: auto;
        min-height: auto;
        padding: 28px 22px calc(34px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
    }

    .release-hero__content {
        width: auto;
        max-width: none;
    }

    .release-hero__artist {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .artist-long .hero-artist,
    .artist-long .release-hero__artist,
    .artist-very-long .hero-artist,
    .artist-very-long .release-hero__artist {
        font-size: 12px;
        letter-spacing: 0.08em;
        line-height: 1.35;
    }

    .release-hero__title,
    .release-title {
        font-size: clamp(calc(var(--hero-title-min) * 0.92), 17vw, calc(var(--hero-title-max) * 0.92));
        line-height: var(--hero-title-line-height);
        letter-spacing: -0.03em;
        margin-bottom: 16px;
    }

    .release-hero.title-long .release-title,
    .release-hero.title-long .release-hero__title,
    .title-long .release-title,
    .title-long .release-hero__title {
        font-size: clamp(calc(var(--hero-title-min) * 0.78), 11vw, calc(var(--hero-title-max) * 0.78));
        line-height: 1.02;
    }

    .release-hero.title-very-long .release-title,
    .release-hero.title-very-long .release-hero__title,
    .title-very-long .release-title,
    .title-very-long .release-hero__title {
        font-size: clamp(calc(var(--hero-title-min) * 0.64), 8.8vw, calc(var(--hero-title-max) * 0.64));
        line-height: 1.06;
    }

    .release-hero.title-extreme .release-title,
    .release-hero.title-extreme .release-hero__title,
    .title-extreme .release-title,
    .title-extreme .release-hero__title {
        font-size: clamp(calc(var(--hero-title-min) * 0.52), 8vw, calc(var(--hero-title-max) * 0.52));
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    .release-hero.title-extreme .release-hero__panel,
    .title-extreme .release-hero__panel {
        padding-top: 30px;
        padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    }

    .release-hero.title-extreme .release-hero__content,
    .title-extreme .release-hero__content {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .release-hero__meta {
        margin-bottom: 14px;
    }

    .release-hero__cta {
        width: 100%;
        height: 56px;
        margin-top: 22px;
        margin-bottom: 18px;
        font-size: 16px;
    }

    .release-video {
        padding: 42px 22px 50px;
    }

    .release-video__media {
        max-width: none;
    }

    .video-embed {
        border-radius: var(--button-radius);
    }

    .full-title-note {
        padding: 18px 22px 0;
    }
}

/* ── 7. Mobile (unter 960px) ── */

@media (max-width: 959px) {
    .section-label {
        font-size: 15px;
        letter-spacing: 0.16em;
        line-height: 1.3;
        color: var(--section-kicker-color);
    }

    .stream-bar {
        padding: 28px 0 36px;
        overflow: hidden;
    }

    .stream-bar__inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        overflow: hidden;
    }

    .stream-bar__label {
        padding: 0;
        text-align: left;
        margin-bottom: 14px;
    }

    .stream-bar__track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .stream-bar__track > .stream-pill:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .stream-pill {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        height: 48px;
        padding: 0 max(12px, calc(var(--stream-padding-x) - 8px));
        font-size: 14px;
        justify-content: center;
        overflow: hidden;
    }

    .release-about {
        display: block;
        padding: 42px 22px;
    }

    .release-about__label-col {
        margin-bottom: 16px;
    }

    .release-about__text {
        font-size: 22px;
        line-height: 1.32;
        letter-spacing: normal;
    }

    .release-about__quote p {
        font-size: 23px;
    }

    .release-press {
        display: block;
        padding: 38px 22px 44px;
    }

    .release-press__photo,
    .press-photo {
        max-height: none;
        margin-bottom: 24px;
    }

    .release-press__photo img,
    .press-photo img {
        max-height: 360px;
        border-radius: 0;
    }

    .release-contact {
        display: block;
        padding: 36px 22px 44px;
    }

    .release-contact__label-col {
        margin-bottom: 12px;
    }

    .release-contact__row,
    .contact-row {
        min-height: 46px;
        height: 46px;
        font-size: 15px;
    }

    .release-contact__row-label {
        font-size: 12px;
    }

    .release-contact__row-value {
        font-size: 15px;
        max-width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}