@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* =========================================================
   UCDEATH — GLOBAL STYLES
   ========================================================= */


/* ---------------------------------------------------------
   01. VARIABLES / RESET
   --------------------------------------------------------- */

:root {
    --bg: #070707;
    --text: #e9e6df;
    --muted: #817d76;
    --line: #252421;
    --red: #a6161c;
    --max: 1400px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.07em;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.w {
    width: min(calc(100% - 48px), var(--max));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   02. HEADER / NAVIGATION
   --------------------------------------------------------- */

header {
    height: 78px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    background: #070707ee;
    backdrop-filter: blur(10px);
    transition:
        height 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

header.scrolled {
    height: 64px;
    background: #070707f5;
    border-color: #302e2a;
}

nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ucd-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ucd-header-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.ucd-header-brand span {
    color: #eee;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.brand img {
    display: block;
    width: 145px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
}

header.scrolled .brand img {
    width: 128px;
    max-height: 54px;
}

.links {
    display: flex;
    gap: 28px;
    font-size: 9px;
    text-transform: uppercase;
    color: #aaa;
}

.links a:hover {
    color: #fff;
}

.shop {
    border: 1px solid #555;
    padding: 13px 16px;
    font-size: 9px;
    text-transform: uppercase;
}

header.scrolled .shop {
    padding: 10px 14px;
}

.hamb {
    display: none;
    background: none;
    border: 0;
    color: #eee;
    font-size: 25px;
    cursor: pointer;
}

.mobileMenu {
    display: none;
    position: fixed;
    inset: 78px 0 0;
    background: #070707;
    z-index: 19;
    padding: 35px 24px;
}

.mobileMenu.open {
    display: block;
}

.mobileMenu a {
    display: block;
    font-size: 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}


/* ---------------------------------------------------------
   03. VIDEO HERO / INTRO
   --------------------------------------------------------- */

.videoBanner {
    position: relative;
    width: 100%;
    height: min(72vh, 760px);
    min-height: 480px;
    overflow: hidden;
    background: #050505;
}

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

.videoBanner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.04) 42%,
            rgba(7, 7, 7, 0.92) 100%
        );
    pointer-events: none;
}

.videoBannerContent {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), var(--max));
    pointer-events: none;
}

.videoBannerLabel {
    font-size: 8px;
    color: #c9c5bd;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.videoBannerTitle {
    margin-top: 10px;
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.videoBannerHint {
    margin-top: 10px;
    font-size: 8px;
    color: #888;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   04. HERO / CURRENT RELEASE
   --------------------------------------------------------- */

.hero {
    padding: 38px 0 72px;
}

.heroGrid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 245px;
    gap: 20px;
    align-items: start;
}

.identity {
    border-right: 1px solid var(--line);
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
}

.logoImage {
    display: block;
    width: 190px;
    height: auto;
    max-width: 100%;
}

.red {
    height: 2px;
    background: var(--red);
    margin: 20px 0 14px;
}

.small {
    font-size: 10px;
    line-height: 1.9;
    color: #999;
    text-transform: uppercase;
}

.heroCover {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 540px;
    margin: 0 0 0 auto;
    overflow: hidden;
    border: 1px solid #292824;
    background: #111;
}

.heroCover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heroCover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #0008, transparent 45%),
        repeating-linear-gradient(
            100deg,
            transparent 0 15px,
            #fff00003 16px 17px
        );
    pointer-events: none;
}

.coverLabel {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    border: 1px solid #777;
    background: #000b;
    padding: 8px;
    font-size: 7px;
    text-transform: uppercase;
}

.heroInfo {
    padding: 4px 0;
}

.out,
.code,
.eyebrow {
    font-size: 8px;
    color: #a22c26;
    text-transform: uppercase;
    font-weight: bold;
}

.heroInfo h1 {
    font-size: 27px;
    line-height: 0.95;
    font-weight: 500;
    margin: 14px 0 9px;
    letter-spacing: 0.09em;
    max-width: 230px;
}

.heroInfo .artist {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #999;
    text-transform: uppercase;
}

.meta {
    font-size: 8px;
    color: #777;
    line-height: 1.9;
    margin: 20px 0;
}

.buttons {
    display: grid;
    gap: 9px;
}

.btn {
    border: 1px solid #555;
    padding: 14px 16px;
    font-size: 8px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

.primary {
    background: var(--red);
    border-color: var(--red);
}


/* ---------------------------------------------------------
   05. GENERAL SECTION HEADINGS
   --------------------------------------------------------- */

section {
    padding: 0 0 80px;
}

.head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.head h2 {
    font-size: 9px;
    font-weight: normal;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.head i {
    height: 1px;
    background: var(--line);
    flex: 1;
}

.head a {
    font-size: 8px;
    color: #85817a;
}


/* ---------------------------------------------------------
   06. RELEASE GRID
   --------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.art {
    display: block;
    aspect-ratio: 1;
    border: 1px solid #24231f;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 35%,
            #777 0 5%,
            transparent 18%
        ),
        linear-gradient(145deg, #292925, #070707);
}

.art.cover {
    object-fit: cover;
    width: 100%;
    height: auto;
    background: none;
}

.placeholder::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22%;
    width: 22%;
    height: 56%;
    transform: translateX(-50%);
    background: #050505;
    box-shadow: 0 0 55px 25px #0008;
}

.ci {
    padding: 11px 0;
}

.title {
    font-size: 13px;
    margin: 7px 0 4px;
    letter-spacing: 0.12em;
}

.by {
    font-size: 8px;
    color: #8b8780;
}

.price {
    font-size: 8px;
    color: #aaa;
    margin-top: 9px;
}


/* ---------------------------------------------------------
   07. RELEASES PAGE
   --------------------------------------------------------- */

.pageIntro {
    padding: 70px 0 45px;
}

.pageIntro .eyebrow {
    margin-bottom: 15px;
}

.pageIntro h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(34px, 6vw, 76px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pageIntro p {
    max-width: 620px;
    margin-top: 22px;
    color: #777;
    font-size: 9px;
    line-height: 2;
}

.releasePageGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
}

.releaseItem img,
.releaseItem .releasePlaceholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid #24231f;
}

.releasePlaceholder {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 40%,
            #666 0 4%,
            transparent 19%
        ),
        linear-gradient(145deg, #292925, #070707);
}

.releasePlaceholder::after {
    content: "";
    position: absolute;
    inset: 15%;
    border: 1px solid #444;
    transform: rotate(12deg);
}

.releaseInfo {
    padding-top: 12px;
}

.releaseInfo .code {
    margin-bottom: 6px;
}

.releaseInfo h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.releaseInfo p {
    margin: 6px 0 0;
    color: #777;
    font-size: 8px;
}

.releaseLinks {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

.releaseLinks a {
    font-size: 8px;
    color: #aaa;
    text-transform: uppercase;
}

.releaseLinks a:hover {
    color: #fff;
}


/* ---------------------------------------------------------
   08. ARTISTS / ROSTER
   --------------------------------------------------------- */

.artists {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.artistCard {
    border: 1px solid var(--line);
    background: #0b0b0b;
}

.artistVisual {
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #2b2b28, #070707);
}

.artistVisual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, #000b);
}

.initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 90px;
    font-weight: 900;
    color: #ffffff0a;
}

.artistText {
    padding: 18px;
}

.artistText h3 {
    font-size: 15px;
    margin: 0 0 8px;
    letter-spacing: 0.12em;
}

.artistText p {
    font-size: 8px;
    color: #777;
    line-height: 1.8;
    margin: 0 0 14px;
}

.arrow {
    font-size: 8px;
    color: #aaa;
}


/* ---------------------------------------------------------
   09. MEDIA
   --------------------------------------------------------- */

.mediaGrid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}

.mediaCard {
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    background: #0b0b0b;
}

.mediaVisual {
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(
            circle at 50% 45%,
            #444 0,
            #171715 23%,
            #050505 65%
        );
    position: relative;
}

.mediaVisual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 4px,
        #fff00005 5px 6px
    );
}

.mediaPlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.mediaPlay span {
    border: 1px solid #aaa;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0009;
}

.mediaText {
    padding: 14px;
}

.mediaText strong {
    font-size: 10px;
}

.mediaText small {
    display: block;
    color: #777;
    font-size: 8px;
    margin-top: 7px;
}

.mediaStack {
    display: grid;
    gap: 20px;
}

.mediaStack .mediaVisual {
    aspect-ratio: 16 / 8;
}


/* ---------------------------------------------------------
   10. ABOUT / LABEL MANIFEST
   --------------------------------------------------------- */

.manifest {
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    min-height: 340px;
}

.ml {
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #fff1, transparent 45%);
}

.symbol {
    width: 125px;
    height: 125px;
    border: 1px solid #555;
    transform: rotate(45deg);
    position: relative;
}

.symbol::before,
.symbol::after {
    content: "";
    position: absolute;
    background: #aaa;
}

.symbol::before {
    width: 1px;
    height: 100%;
    left: 50%;
}

.symbol::after {
    height: 1px;
    width: 100%;
    top: 50%;
}

.mr {
    padding: 50px;
}

.mr h2 {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.08;
}

.mr p {
    font-size: 9px;
    color: #85817a;
    line-height: 2;
}

.aboutPage {
    max-width: 900px;
}

.aboutPage h2 {
    font-size: clamp(28px, 5vw, 58px);
    line-height: 1;
    font-weight: 400;
    margin: 0 0 28px;
}

.aboutPage p {
    max-width: 760px;
    font-size: 10px;
    line-height: 2.1;
    color: #85817a;
}

.aboutFacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 45px;
}

.aboutFact {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.aboutFact strong {
    display: block;
    font-size: 10px;
    color: #ddd;
    margin-bottom: 8px;
}

.aboutFact span {
    font-size: 8px;
    color: #777;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   11. SHOP BANNER
   --------------------------------------------------------- */

.shopBanner {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shopBanner strong {
    font-size: 25px;
    font-weight: 400;
}

.shopBanner span {
    display: block;
    font-size: 8px;
    color: #85817a;
    margin-top: 8px;
}

.shopBtn {
    background: var(--red);
    padding: 17px 23px;
    font-size: 8px;
}


/* ---------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------- */

footer {
    padding: 50px 0 24px;
}

.foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.foot h3 {
    font-size: 14px;
    letter-spacing: 0.35em;
}

.foot p,
.foot a {
    font-size: 8px;
    color: #777;
    line-height: 2;
    text-transform: uppercase;
}

.bottom {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    color: #5f5c57;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   13. TABLET
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .heroGrid {
        grid-template-columns: 170px 1fr;
    }

    .heroInfo {
        grid-column: 2;
    }

    .grid,
    .releasePageGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .artists {
        grid-template-columns: 1fr 1fr;
    }

    .mediaGrid {
        grid-template-columns: 1fr;
    }

    .manifest {
        grid-template-columns: 1fr;
    }

    .ml {
        min-height: 240px;
    }

    .foot {
        grid-template-columns: 1fr 1fr;
    }

    .aboutFacts {
        grid-template-columns: 1fr 1fr;
    }
}


/* ---------------------------------------------------------
   14. MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .w {
        width: calc(100% - 30px);
    }

    header {
        height: 64px;
    }

    .links,
    .shop {
        display: none;
    }

    .hamb {
        display: block;
    }

    .mobileMenu {
        inset: 64px 0 0;
    }

    .videoBanner {
        min-height: 430px;
        height: 62vh;
    }

    .videoBannerContent {
        width: calc(100% - 30px);
        bottom: 28px;
    }

    .videoBannerTitle {
        font-size: 24px;
    }

    .hero {
        padding-top: 28px;
    }

    .heroGrid {
        display: block;
    }

    .identity {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 0;
        padding: 0 0 20px;
        margin-bottom: 20px;
    }

    .logoImage {
        width: 125px;
    }

    .heroCover {
        max-width: none;
    }

    .heroInfo {
        padding: 22px 0 0;
    }

    .heroInfo h1 {
        font-size: 24px;
        max-width: 100%;
        line-height: 1;
    }

    .grid,
    .releasePageGrid,
    .artists {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .pageIntro {
        padding-top: 45px;
    }

    .pageIntro h1 {
        font-size: 38px;
    }

    .aboutFacts {
        grid-template-columns: 1fr;
    }

    .manifest .mr {
        padding: 30px;
    }

    .mr h2 {
        font-size: 27px;
    }

    .shopBanner {
        display: block;
    }

    .shopBtn {
        display: inline-block;
        margin-top: 20px;
    }

    .foot {
        grid-template-columns: 1fr;
    }

    .bottom {
        display: grid;
        gap: 8px;
    }
}


/* =========================================================
   15. FULL-WIDTH VIDEO BANNER
   ========================================================= */

.videoBanner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    margin: 0;
    overflow: hidden;
    background: #050505;
}

.videoBanner video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videoBanner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.04) 45%,
            rgba(7, 7, 7, 0.92) 100%
        );
    pointer-events: none;
}

.videoBannerContent {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), var(--max));
    pointer-events: none;
}

.videoBannerLabel {
    font-size: 8px;
    color: #c9c5bd;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.videoBannerTitle {
    margin-top: 10px;
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.videoBannerHint {
    margin-top: 10px;
    font-size: 8px;
    color: #888;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HEADER — HIDDEN UNTIL SCROLL
   --------------------------------------------------------- */

header {
    transform: translateY(-110%);
    transition:
        transform 0.32s ease,
        height 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

header.visible {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   LEGAL PAGES
   --------------------------------------------------------- */

.legalPage {
    max-width: 900px;
}

.legalPage h1 {
    margin: 0 0 35px;
    font-size: clamp(36px, 6vw, 70px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legalPage h2 {
    margin: 42px 0 12px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legalPage p,
.legalPage address {
    max-width: 760px;
    margin: 0 0 18px;
    color: #85817a;
    font-size: 9px;
    line-height: 2;
    font-style: normal;
}

.legalPage a {
    color: #aaa;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legalPage a:hover {
    color: #fff;
}


/* ---------------------------------------------------------
   MOBILE — FULL-WIDTH VIDEO
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .videoBanner {
        width: 100%;
        height: 100svh;
        min-height: 500px;
    }

    .videoBannerContent {
        width: calc(100% - 30px);
        bottom: 30px;
    }

    .videoBannerTitle {
        font-size: 24px;
    }
}


/* =========================================================
   16. MOBILE POLISH — CENTERED LAYOUT
   ========================================================= */

@media (max-width: 650px) {

    /* Revealed header: move logo + hamburger slightly down */
    header.visible {
        height: 72px;
    }

    header.visible .w {
        height: 72px;
    }

    header.visible nav {
        padding-top: 6px;
    }

    header.visible .logo {
        font-size: 12px;
        letter-spacing: 0.34em;
    }

    header.visible .hamb {
        padding-top: 5px;
    }

    .mobileMenu {
        inset: 72px 0 0;
        text-align: center;
    }

    /* Video intro */
    .videoBannerContent {
        width: calc(100% - 36px);
        text-align: center;
    }

    .videoBannerLabel {
        font-size: 7px;
        letter-spacing: 0.20em;
    }

    .videoBannerTitle {
        font-size: 25px;
        line-height: 1.25;
        letter-spacing: 0.10em;
    }

    .videoBannerHint {
        font-size: 7px;
        letter-spacing: 0.20em;
    }

    /* Label block */
    .identity {
        align-items: center;
        text-align: center;
        padding-bottom: 25px;
    }

    .identity > div {
        width: 100%;
    }

    .identity .logoImage {
        width: 155px;
        margin: 0 auto;
    }

    .identity .red {
        width: 100%;
        margin: 22px auto 16px;
    }

    .identity .small {
        text-align: center;
        line-height: 1.85;
    }

    /* Current release */
    .heroCover {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .heroInfo {
        text-align: center;
        padding-top: 25px;
    }

    .heroInfo h1 {
        margin-left: auto;
        margin-right: auto;
    }

    .heroInfo .red {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .meta {
        text-align: center;
    }

    .buttons {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    /* Release / artist content */
    .ci,
    .releaseInfo,
    .artistText {
        text-align: center;
    }

    .releaseLinks {
        justify-content: center;
    }

    /* About / shop */
    .manifest,
    .mr,
    .shopBanner {
        text-align: center;
    }

    .mr .btn {
        max-width: 300px;
        margin: 18px auto 0;
    }

    /* Footer */
    .foot,
    .bottom {
        text-align: center;
    }
}


/* =========================================================
   17. VIDEO STARTS AT THE ABSOLUTE TOP
   ========================================================= */

/*
   The hidden header must not reserve any space in the document.
   `transform` alone only moves it visually; the old header height
   was still pushing the video downward. Fixed positioning removes
   that layout space completely.
*/
body {
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/*
   The fullscreen video is the first visual element and therefore
   starts directly at the viewport's top edge.
*/
.videoBanner {
    margin-top: 0;
    width: 100%;
    min-width: 100%;
    height: 100vh;
}

/* Mobile: account for the browser viewport, not the old header. */
@media (max-width: 650px) {

    .videoBanner {
        width: 100%;
        min-width: 100%;
        height: 100svh;
        min-height: 500px;
    }

    header {
        width: 100%;
    }

    header.visible {
        height: 72px;
    }
}


/* =========================================================
   18. VIDEO — ABSOLUTE TOP / NO INTRO OFFSET
   ========================================================= */

/*
   Header is taken completely out of document flow.
   The video is the first layout element and starts at y=0
   inside the browser viewport.
*/
html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: translateY(-110%) !important;
    z-index: 1000 !important;
}

header.visible {
    transform: translateY(0) !important;
}

.videoBanner {
    position: relative !important;
    display: block !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

.videoBanner video {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
}

.videoBannerContent {
    display: none !important;
}

@media (max-width: 650px) {

    .videoBanner {
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
    }

    .videoBanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    header.visible {
        height: 72px !important;
    }
}


/* =========================================================
   19. VIDEO SCROLL HINT
   ========================================================= */

.scrollHint {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    color: #aaa;
    font-size: 8px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    pointer-events: none;
}

.scrollHint.hidden {
    opacity: 0;
    transform: translate(-50%, 8px);
}


/* =========================================================
   20. FOOTER COPYRIGHT
   ========================================================= */

.copyright {
    display: block;
    width: 100%;
    text-align: center;
}

.bottom {
    align-items: center;
}

@media (max-width: 650px) {

    .scrollHint {
        bottom: 24px;
        font-size: 7px;
        letter-spacing: 0.22em;
    }

    .copyright {
        text-align: center;
    }
}


/* =========================================================
   21. VIDEO — LESS HEIGHT / NO CROPPING
   ========================================================= */

/*
   The video should not be aggressively cropped/zoomed.
   The banner is lower, while the video keeps its natural
   aspect ratio and is centered inside the banner.
*/
.videoBanner {
    height: 68vh !important;
    min-height: 0 !important;
    background: #050505;
}

.videoBanner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Subtle darkening only; no additional visual zoom. */
.videoBanner::after {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.02) 55%,
            rgba(7, 7, 7, 0.72) 100%
        ) !important;
}

.scrollHint {
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    left: 50% !important;
    bottom: 25px !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    color: #aaa !important;
    font-size: 8px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.scrollHint.hidden {
    opacity: 0 !important;
    transform: translate(-50%, 8px) !important;
}

@media (max-width: 650px) {

    .videoBanner {
        height: 58svh !important;
        min-height: 0 !important;
    }

    .videoBanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .scrollHint {
        bottom: 18px !important;
        font-size: 7px !important;
        letter-spacing: 0.20em !important;
    }
}


/* =========================================================
   22. FINAL INTRO — VIDEO ONLY
   ========================================================= */

/*
   FIRST SCREEN:
   Only the local MP4 is visible.
   No logo, label, navigation or overlay.
*/
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.videoBanner {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.videoBanner video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Absolutely no overlay on the first screen. */
.videoBanner::after {
    display: none !important;
}

.videoBannerContent,
.scrollHint {
    display: none !important;
}

/*
   Header is completely outside the first screen.
   It only enters after the visitor scrolls.
*/
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-110%) !important;
    z-index: 1000 !important;
}

header.visible {
    transform: translateY(0) !important;
}


/* ---------------------------------------------------------
   MOBILE — SAME FULLSCREEN INTRO
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .videoBanner {
        width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;
    }

    .videoBanner video {
        width: 100vw !important;
        height: 100svh !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
    }
}


/* =========================================================
   23. FULLSCREEN VIDEO — SCROLL TO ENTER
   ========================================================= */

.scrollHint {
    display: flex !important;
    position: absolute !important;
    z-index: 50 !important;
    left: 50% !important;
    bottom: 28px !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    text-align: center !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease !important;
}

.scrollHint span {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 8px #000 !important;
}

.scrollHint b {
    display: block !important;
    font-size: 22px !important;
    line-height: 0.8 !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 8px #000 !important;
    animation: scrollArrow 1.5s ease-in-out infinite !important;
}

.scrollHint.hidden {
    opacity: 0 !important;
    transform: translate(-50%, 12px) !important;
}

@keyframes scrollArrow {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

@media (max-width: 650px) {

    .scrollHint {
        bottom: 22px !important;
    }

    .scrollHint span {
        font-size: 7px !important;
        letter-spacing: 0.22em !important;
    }

    .scrollHint b {
        font-size: 20px !important;
    }
}

/* FINAL: fullscreen intro + scroll cue */
html,body{margin:0!important;padding:0!important;overflow-x:hidden!important}
header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;margin:0!important;transform:translateY(-110%)!important;z-index:1000!important}
header.visible{transform:translateY(0)!important}
.videoBanner{position:relative!important;width:100vw!important;height:100vh!important;min-height:100vh!important;margin:0!important;padding:0!important;overflow:hidden!important}
.videoBanner video{position:absolute!important;inset:0!important;width:100vw!important;height:100vh!important;display:block!important;object-fit:cover!important;object-position:center!important}
.videoBanner::after{display:none!important}.videoBannerContent{display:none!important}
.scrollHint{display:flex!important;position:absolute!important;z-index:50!important;left:50%!important;bottom:28px!important;transform:translateX(-50%)!important;flex-direction:column!important;align-items:center!important;gap:8px!important;width:max-content!important;color:#fff!important;text-align:center!important;opacity:1!important;pointer-events:none!important;transition:opacity .3s ease,transform .3s ease!important}
.scrollHint span{font-size:8px!important;line-height:1!important;letter-spacing:.28em!important;white-space:nowrap!important;text-shadow:0 1px 8px #000!important}.scrollHint b{font-size:23px!important;line-height:.75!important;font-weight:400!important;text-shadow:0 1px 8px #000!important;animation:ucScrollArrow 1.4s ease-in-out infinite!important}.scrollHint.hidden{opacity:0!important;transform:translate(-50%,12px)!important}@keyframes ucScrollArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-width:650px){.videoBanner{width:100vw!important;height:100svh!important;min-height:100svh!important}.videoBanner video{width:100vw!important;height:100svh!important;object-fit:cover!important}.scrollHint{bottom:20px!important}.scrollHint span{font-size:7px!important;letter-spacing:.22em!important}.scrollHint b{font-size:21px!important}}


/* ---------------------------------------------------------
   UCDEATH — requested refinements
   --------------------------------------------------------- */

.bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bottom span {
    text-align: center;
}

.bottom a {
    color: inherit;
}

.bottom a:hover {
    color: #fff;
}

@media (max-width: 900px) {
    .releasePageGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .releasePageGrid {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 78px;
    }

    .logo img {
        width: 78px;
        max-height: 32px;
    }
}

.pageIntro {
    padding: 120px 0 60px;
    text-align: center;
}

.pageIntro .eyebrow,
.pageIntro h1,
.pageIntro p {
    text-align: center;
}

.legalSection {
    padding: 30px 0 100px;
}

.legalContent {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.legalContent h2,
.legalContent h3,
.legalContent p {
    text-align: center;
}

.bandList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 40px;
}

.bandList a {
    padding: 32px 20px;
    border: 1px solid rgba(255,255,255,.15);
    text-decoration: none;
    color: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bandList a span {
    opacity: .65;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

@media (max-width: 800px) {
    .brand img { width: 96px; max-height: 44px; }
    .brand span { font-size: 11px; }
    .bandList { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
}

@media (max-width: 520px) {
    .brand img {
        width: 112px;
        max-height: 50px;
    }
}

/* Exact UCDEATH homepage additions */
.brandText{display:inline-block;color:inherit;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ucd-under-video{display:flex;justify-content:center;align-items:center;padding:26px 0 14px}
.ucd-under-video img{width:190px;max-width:45vw;height:auto;display:block}
.labelSection{padding:0 0 90px}
.labelShows{border-top:1px solid rgba(255,255,255,.14)}
.labelShow{display:grid;grid-template-columns:105px minmax(0,1fr) 35px;gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14);color:inherit;text-decoration:none}
.labelShow:hover{background:rgba(255,255,255,.035);padding-left:12px;padding-right:12px}
.labelShowDate{display:flex;align-items:baseline;gap:7px}.labelShowDate strong{font-size:46px;letter-spacing:-.06em}.labelShowDate span{font-size:9px;line-height:1.2;letter-spacing:.12em;opacity:.5}
.labelShowInfo small{display:block;color:#a62a2a;font-size:9px;letter-spacing:.16em;font-weight:800;margin-bottom:7px}
.labelShowInfo b{display:block;font-size:13px;letter-spacing:.08em}.labelShowInfo em{display:block;margin-top:7px;font-style:normal;font-size:9px;letter-spacing:.12em;opacity:.48}
.labelShowArrow{opacity:.5}
.studioLabelSection{padding:0 0 92px}
.studioLabelBlock{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.14);background:#070707}
.studioLabelIntro{padding:42px;border-right:1px solid rgba(255,255,255,.14);min-height:250px;display:flex;flex-direction:column;justify-content:center}
.studioLabelIntro h3{margin:12px 0 0;font-size:clamp(40px,5vw,68px);line-height:.88;letter-spacing:-.055em}
.studioLabelCopy{padding:42px;display:flex;flex-direction:column;justify-content:center}
.studioLabelCopy p{max-width:460px;margin:0 0 26px;font-size:14px;line-height:1.8;opacity:.58}.studioLabelCopy .btn{width:max-content}
@media(max-width:700px){.brandText{font-size:10px}.labelShow{grid-template-columns:75px minmax(0,1fr) 20px}.labelShowDate strong{font-size:36px}.labelShowInfo b{font-size:11px}.studioLabelBlock{grid-template-columns:1fr}.studioLabelIntro{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:30px 24px}.studioLabelCopy{padding:30px 24px}}

/* UCDEATHWORK STUDIOS PAGE */
.studioHeader{border-bottom:1px solid rgba(255,255,255,.14)}
.studioNav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.studioLogo img{width:120px;height:auto;display:block}
.studioNavLinks{display:flex;gap:26px}
.studioNavLinks a,.studioBack{font-size:9px;letter-spacing:.16em;font-weight:800;color:inherit;text-decoration:none}
.studioHeroNew{padding:55px 0 90px}
.studioHeroNewGrid{display:grid;grid-template-columns:1.15fr .85fr;min-height:520px;border:1px solid rgba(255,255,255,.14)}
.studioHeroNewGrid>div:first-child{padding:55px;display:flex;flex-direction:column;justify-content:center}
.studioHeroNew h1{font-size:clamp(60px,9vw,118px);line-height:.8;letter-spacing:-.065em;margin:16px 0 28px}
.studioHeroNew p{max-width:560px;font-size:15px;line-height:1.8;opacity:.6}
.studioCta{width:max-content;margin-top:24px;border:1px solid rgba(255,255,255,.25);padding:14px 17px;color:inherit;text-decoration:none;font-size:9px;letter-spacing:.15em;font-weight:800}
.studioHeroNewArt{border-left:1px solid rgba(255,255,255,.14);display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 48%);position:relative}
.studioHeroNewArt:before,.studioHeroNewArt:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}
.studioHeroNewArt:before{width:290px;height:290px}.studioHeroNewArt:after{width:165px;height:165px}
.studioHeroNewArt span{font-size:85px;font-weight:900;letter-spacing:-.1em;opacity:.18;z-index:1}.studioHeroNewArt small{position:absolute;z-index:2;margin-top:145px;font-size:10px;letter-spacing:.25em;opacity:.35}
.studioPageSection{padding:95px 0;border-top:1px solid rgba(255,255,255,.14)}
.studioPageHead{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:42px}
.studioPageHead span{font-size:9px;letter-spacing:.17em;color:#a62a2a;font-weight:800}
.studioPageHead h2{font-size:clamp(46px,6vw,82px);line-height:.86;letter-spacing:-.06em;margin:10px 0 0}
.studioPageHead>p{max-width:500px;font-size:14px;line-height:1.8;opacity:.55}
.studioServices{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}
.studioServices article{min-height:260px;padding:28px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.studioServices b{font-size:9px;color:#a62a2a;letter-spacing:.15em}.studioServices h3{margin:70px 0 14px;font-size:20px}.studioServices p{font-size:12px;line-height:1.7;opacity:.52}
.studioRefs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14)}
.studioRefs a{min-height:160px;padding:28px;background:#070707;color:inherit;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between}.studioRefs small{font-size:9px;letter-spacing:.15em;color:#a62a2a}.studioRefs strong{font-size:21px;letter-spacing:.04em}.studioRefs span{font-size:9px;letter-spacing:.14em;opacity:.5}
.studioGear{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.14)}.studioGear div{padding:27px;border-bottom:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14)}.studioGear small{color:#a62a2a;font-size:9px;letter-spacing:.16em}.studioGear strong{display:block;margin:10px 0;font-size:18px}.studioGear p{font-size:12px;opacity:.5}
.studioBookingForm{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}.studioBookingForm label{background:#070707;padding:24px;font-size:9px;letter-spacing:.15em;font-weight:800;opacity:.65}.studioBookingForm input,.studioBookingForm select,.studioBookingForm textarea{display:block;width:100%;box-sizing:border-box;margin-top:10px;background:#050505;border:1px solid rgba(255,255,255,.18);color:#fff;padding:14px;font:inherit;font-size:12px;opacity:1}.studioBookingForm textarea{resize:vertical}.studioBookingForm .wide{grid-column:1/-1}.studioSubmit{display:flex!important;justify-content:space-between;align-items:center;gap:20px}.studioSubmit button{background:#fff;color:#000;border:0;padding:15px 20px;font-size:9px;letter-spacing:.15em;font-weight:900}.studioSubmit span{font-size:9px;letter-spacing:.13em;opacity:.5}
@media(max-width:750px){.studioNavLinks{display:none}.studioHeroNewGrid{grid-template-columns:1fr}.studioHeroNewArt{min-height:280px;border-left:0;border-top:1px solid rgba(255,255,255,.14)}.studioPageHead{grid-template-columns:1fr;gap:30px}.studioServices,.studioRefs{grid-template-columns:1fr}.studioGear,.studioBookingForm{grid-template-columns:1fr}.studioBookingForm .wide{grid-column:auto}.studioSubmit{display:block!important}.studioSubmit span{display:block;margin-top:15px}}

/* =========================================================
   UCDEATH — shared internal-page header
   Large centered logo above, label bar below.
   ========================================================= */
.internalPage{margin:0}
.internalHeroLogo{
    min-height:220px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:45px 20px 35px;
    box-sizing:border-box;
}
.internalHeroLogo img{
    display:block;
    width:250px;
    max-width:58vw;
    height:auto;
}
.internalBar{
    position:sticky;
    top:0;
    z-index:100;
    background:#050505;
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
}
.internalBar .internalBarInner{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.internalBack{
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.14em;
    font-weight:800;
}
.internalBrand{
    color:inherit;
    text-decoration:none;
    font-size:11px;
    letter-spacing:.13em;
    font-weight:800;
    text-transform:uppercase;
    text-align:center;
}
.internalMenu{
    display:flex;
    align-items:center;
    gap:20px;
}
.internalMenu a{
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.13em;
    font-weight:800;
}
.internalMenu a:hover,.internalBack:hover{opacity:.6}
@media(max-width:700px){
    .internalHeroLogo{min-height:170px;padding:30px 15px 25px}
    .internalHeroLogo img{width:185px}
    .internalBar .internalBarInner{min-height:58px}
    .internalBrand{font-size:9px}
    .internalMenu a:not(:last-child){display:none}
}

/* FINAL SHARED HEADER */
.internalHeader{
    display:flex;
    flex-direction:column;
}
.internalBar{
    order:1;
    position:sticky;
    top:0;
    z-index:1000;
    background:#050505;
    border-bottom:1px solid rgba(255,255,255,.14);
}
.internalBar .internalBarInner{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:24px;
}
.internalBack{
    order:3;
    margin-left:auto;
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.14em;
    font-weight:800;
}
.internalBrand{
    order:1;
    margin-right:auto;
    color:inherit;
    text-decoration:none;
    font-size:11px;
    letter-spacing:.13em;
    font-weight:800;
    text-transform:uppercase;
    text-align:left;
}
.internalMenu{
    order:2;
    display:flex;
    align-items:center;
    gap:20px;
}
.internalMenu a{
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.13em;
    font-weight:800;
}
.internalHeroLogo{
    order:2;
    min-height:245px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:42px 20px 35px;
    box-sizing:border-box;
    border-bottom:1px solid rgba(255,255,255,.14);
}
.internalHeroLogo a{display:block}
.internalHeroLogo img{
    display:block;
    width:255px;
    max-width:62vw;
    height:auto;
}
@media(max-width:700px){
    .internalBar .internalBarInner{min-height:58px}
    .internalBrand{font-size:9px}
    .internalMenu a{font-size:8px}
    .internalMenu a:nth-child(n+2){display:none}
    .internalHeroLogo{min-height:205px;padding:34px 15px 28px}
    .internalHeroLogo img{width:205px}
    .internalBack{font-size:8px}
}

/* =========================================================
   FINAL HEADER CORRECTION
   ========================================================= */
.siteHeader{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:rgba(5,5,5,.94);
    border-bottom:1px solid rgba(255,255,255,.12);
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
}
.siteHeader.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.siteHeader nav{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.siteHeader .brandText{
    color:inherit;text-decoration:none;
    font-size:11px;letter-spacing:.13em;
    font-weight:800;text-transform:uppercase;
}
.siteHeader .hamb,.internalHamb{
    background:none;border:0;color:inherit;
    font-size:25px;line-height:1;
    cursor:pointer;padding:8px 0 8px 14px;
}
.internalHeader{display:block}
.internalBackRow{
    padding:18px 0 8px;
}
.internalBackRow .internalBack{
    color:inherit;text-decoration:none;
    font-size:9px;letter-spacing:.14em;font-weight:800;
}
.internalBar{
    position:relative !important;
    top:auto !important;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.14);
    background:#050505;
}
.internalBar .internalBarInner{
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.internalBrand{
    order:1 !important;
    margin:0 !important;
    text-align:left !important;
    font-size:11px;
    letter-spacing:.13em;
}
.internalHamb{
    order:2;
}
.internalMenu{display:none !important}
.internalHeroLogo{
    order:initial;
    position:relative;
    min-height:245px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:38px 20px 42px;
    border-bottom:0;
}
.internalHeroLogo img{
    width:255px;
    max-width:62vw;
}
@media(max-width:700px){
    .siteHeader nav{min-height:58px}
    .siteHeader .brandText{font-size:9px}
    .internalBackRow{padding:15px 0 6px}
    .internalBar .internalBarInner{min-height:56px}
    .internalBrand{font-size:9px}
    .internalHeroLogo{min-height:205px;padding:30px 15px 34px}
    .internalHeroLogo img{width:205px}
}

/* =========================================================
   FINAL INTERNAL HEADER — ONE BAR ONLY
   ========================================================= */
.internalHeader{
    display:flex!important;
    flex-direction:column!important;
}
.internalBackRow{
    display:none!important;
}
.internalBar{
    order:1!important;
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    border-top:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
    background:#050505!important;
}
.internalBar .internalBarInner{
    min-height:66px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
}
.internalBrand{
    display:block!important;
    margin:0!important;
    order:1!important;
    text-align:left!important;
    flex:0 0 auto!important;
}
.internalBack{
    display:block!important;
    order:1!important;
    margin:0!important;
}
.internalHamb{
    display:block!important;
    order:3!important;
    margin-left:auto!important;
    background:none!important;
    border:0!important;
    color:inherit!important;
    font-size:32px!important;
    line-height:1!important;
    padding:0!important;
}
.internalHeroLogo{
    order:2!important;
    min-height:245px!important;
    padding:38px 20px 34px!important;
    border-top:0!important;
    border-bottom:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}
.internalHeroLogo img{
    display:block!important;
    width:255px!important;
    max-width:62vw!important;
    height:auto!important;
}
/* Internal pages: requested bar = Back to UCDEATH.COM + hamburger only. */
.internalBrand{display:none!important}
/* Do not render the label/logo identity again inside artist heroes. */
.internalPage .identity .logoImage{
    display:none!important;
}
.internalPage .identity .red,
.internalPage .identity .small{
    display:none!important;
}
@media(max-width:700px){
    .internalBar .internalBarInner{min-height:58px!important}
    .internalBack{font-size:9px!important}
    .internalHamb{font-size:29px!important}
    .internalHeroLogo{min-height:205px!important;padding:30px 15px 25px!important}
    .internalHeroLogo img{width:205px!important}
}

/* =========================================================
   INTERNAL PAGES — IDENTICAL HEADER LANGUAGE TO HOMEPAGE
   Video area is replaced by the centered UCD logo.
   ========================================================= */
.internalSiteHeader{position:relative}
.internalLogoHero{
    position:relative;
    min-height:420px;
    border-bottom:1px solid rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#050505;
}
.internalLogoHero:before{
    content:"";
    position:absolute;
    width:360px;height:360px;
    border:1px solid rgba(255,255,255,.08);
    transform:rotate(45deg);
}
.internalLogoLink{position:relative;z-index:2;display:block}
.internalLogoLink img{
    display:block;
    width:260px;
    max-width:58vw;
    height:auto;
}
.internalBackHome{
    position:absolute;
    z-index:3;
    left:24px;
    bottom:22px;
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.14em;
    font-weight:800;
}
.internalBackHome:hover{opacity:.6}
@media(max-width:700px){
    .internalLogoHero{min-height:330px}
    .internalLogoHero:before{width:260px;height:260px}
    .internalLogoLink img{width:205px}
    .internalBackHome{left:25px;bottom:20px}
}

/* =========================================================
   INTERNAL PAGES — VIDEO-LIKE INTRO + SINGLE SCROLL BAR
   ========================================================= */
.internalSiteHeader{position:relative}
.internalSiteHeader .w{position:relative}
.internalLogoHero{
    position:relative;
    min-height:100vh;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#050505;
    border:0;
}
.internalLogoHero:before{
    content:"";
    position:absolute;
    width:min(62vw,520px);
    height:min(62vw,520px);
    border:1px solid rgba(255,255,255,.08);
    transform:rotate(45deg);
}
.internalLogoLink{
    position:relative;
    z-index:2;
    display:block;
}
.internalLogoLink img{
    display:block;
    width:280px;
    max-width:58vw;
    height:auto;
}
.internalBackHome{
    position:absolute;
    left:24px;
    bottom:28px;
    z-index:4;
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.14em;
    font-weight:800;
    opacity:0;
    transition:opacity .25s ease;
}
/* One bar only: back left, hamburger right. */
.internalBar{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1000;
    height:0;
    overflow:hidden;
    background:#050505;
    border-bottom:1px solid transparent;
    transition:height .22s ease,border-color .22s ease;
}
.internalBar .internalBarInner{
    height:64px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    box-sizing:border-box;
}
.internalBar .internalBack{
    color:inherit;
    text-decoration:none;
    font-size:9px;
    letter-spacing:.14em;
    font-weight:800;
    margin:0;
}
.internalBar .internalHamb{
    border:0;
    background:none;
    color:inherit;
    font-size:32px;
    line-height:1;
    padding:4px 0 4px 16px;
    cursor:pointer;
}
.internalHeader.scrolled .internalBar{
    height:64px;
    border-bottom-color:rgba(255,255,255,.14);
}
.internalHeader.scrolled .internalLogoHero{
    /* Logo intro is removed from normal view once the page has been entered. */
    min-height:0;
    height:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
}
.internalHeader.scrolled .internalBackHome{display:none}

/* Hide any old internal header-brand/nav styles from previous iterations. */
.internalHeader .internalBrand,
.internalHeader .internalMenu{display:none!important}

@media(max-width:700px){
    .internalLogoHero{min-height:100vh}
    .internalLogoLink img{width:220px}
    .internalBar .internalBarInner{height:58px;min-height:58px;padding:0 20px}
    .internalHeader.scrolled .internalBar{height:58px}
    .internalBar .internalHamb{font-size:29px}
}

/* FINAL INTERNAL INTRO: homepage header + logo instead of video */
.internalHeader{position:relative!important;display:block!important}
.internalHeader.siteHeader{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  height:64px!important;z-index:1000!important;background:#070707ee!important;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)!important;
  opacity:0!important;transform:translateY(-100%)!important;pointer-events:none!important;
  transition:opacity .25s ease,transform .25s ease!important;
}
.internalHeader.siteHeader.is-visible{opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important}
.internalHeader.siteHeader .w{height:100%!important}
.internalHeader.siteHeader nav{height:64px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.internalHeader .brandText{color:inherit!important;text-decoration:none!important;font-size:11px!important;letter-spacing:.13em!important;font-weight:800!important;text-transform:uppercase!important}
.internalHeader .hamb{display:block!important;background:none!important;border:0!important;color:#eee!important;font-size:25px!important;cursor:pointer!important;padding:8px 0 8px 14px!important}
.internalLogoHero{
  position:relative!important;width:100%!important;height:min(68vh,760px)!important;min-height:480px!important;
  overflow:hidden!important;background:#050505!important;
  background-image:var(--internal-bg,none)!important;background-size:cover!important;background-position:center!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.internalLogoHero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(5,5,5,.72));pointer-events:none}
.internalLogoLink{position:relative!important;z-index:2!important;display:block!important}
.internalLogoLink img{display:block!important;width:250px!important;max-width:55vw!important;height:auto!important}
.internalLogoHero:after{content:"SCROLL TO ENTER";position:absolute;z-index:5;left:50%;bottom:30px;transform:translateX(-50%);color:#aaa;font-size:8px;letter-spacing:.28em;white-space:nowrap}
.internalPage .mobileMenu{position:fixed;inset:64px 0 0;z-index:999}
@media(max-width:650px){.internalHeader.siteHeader,.internalHeader.siteHeader nav{height:64px!important}.internalLogoHero{height:68vh!important;min-height:480px!important}.internalLogoLink img{width:205px!important}}

/* Bandcamp embeds on artist pages */
.bandcampSection{padding:70px 0;border-top:1px solid rgba(255,255,255,.14)}
.bandcampGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bandcampCard{border:1px solid rgba(255,255,255,.14);background:#070707;padding:8px}
.bandcampCard iframe{display:block;width:100%;min-height:470px;border:0}
.bandcampIntro{max-width:680px;margin-bottom:28px}
.bandcampIntro h2{font-size:clamp(38px,5vw,64px);line-height:.9;letter-spacing:-.05em;margin:10px 0}
.bandcampIntro p{font-size:13px;line-height:1.7;opacity:.55}
@media(max-width:800px){.bandcampGrid{grid-template-columns:1fr}.bandcampCard iframe{min-height:420px}}

.bandcampCard{min-height:150px;color:inherit;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:28px;box-sizing:border-box}
.bandcampCard strong{font-size:22px;letter-spacing:.04em}.bandcampCard span{font-size:9px;letter-spacing:.15em;opacity:.5}
.bandcampCard:hover{background:rgba(255,255,255,.035)}

/* FINAL INTERNAL INTRO — homepage-like scroll-to-enter */
.internalLogoHero{
  height:100vh!important;
  min-height:0!important;
  width:100%!important;
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background-color:#050505!important;
  background-image:var(--internal-bg,none)!important;
  background-size:cover!important;
  background-position:center!important;
}
.internalLogoHero:after{
  content:"SCROLL TO ENTER"!important;
  position:absolute!important;
  left:50%!important;
  bottom:32px!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
  font-size:8px!important;
  letter-spacing:.28em!important;
  color:#aaa!important;
  pointer-events:none!important;
  transition:opacity .2s ease!important;
}
.internalHeader.is-visible + .internalLogoHero:after{opacity:0!important}
.internalLogoLink img{
  width:260px!important;
  max-width:58vw!important;
  height:auto!important;
}
.internalHeader.siteHeader{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1000!important;
  opacity:0!important;
  transform:translateY(-100%)!important;
  pointer-events:none!important;
  transition:opacity .25s ease,transform .25s ease!important;
}
.internalHeader.siteHeader.is-visible{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
/* No visible back-to-artist/extra intro text under the logo. */
.internalLogoHero + .mobileMenu + main{margin-top:0!important}
@media(max-width:650px){
  .internalLogoHero{height:100vh!important}
  .internalLogoLink img{width:215px!important}
}

/* =========================================================
   INTERNAL PAGES — SAME INTRO MECHANICS AS HOMEPAGE
   Full viewport logo intro, one scroll hint, header appears
   after scrolling and stays fixed. Background image ready.
   ========================================================= */
.internalPage .internalIntro{
    position:relative;
    width:100%;
    height:100svh;
    min-height:100vh;
    overflow:hidden;
    background:#050505;
    background-image:var(--internal-bg, none);
    background-size:cover;
    background-position:center;
}
.internalPage .internalIntro::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(7,7,7,.80));
    pointer-events:none;
}
.internalPage .internalIntro .internalLogoLink{
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:block;
}
.internalPage .internalIntro .internalLogoLink img{
    display:block;
    width:260px;
    max-width:58vw;
    height:auto;
}
.internalPage .internalIntro .scrollHint{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:30px;
    transform:translateX(-50%);
    display:block;
    margin:0;
    color:#aaa;
    font-size:8px;
    line-height:1;
    letter-spacing:.28em;
    text-transform:uppercase;
    white-space:nowrap;
    pointer-events:none;
    opacity:1;
    transition:opacity .25s ease,transform .25s ease;
}
.internalPage .internalIntro .scrollHint b{display:none}
.internalPage .internalIntro .scrollHint.hidden{
    opacity:0;
    transform:translate(-50%,8px);
}
@media(max-width:650px){
    .internalPage .internalIntro{
        height:100svh;
        min-height:100svh;
    }
    .internalPage .internalIntro .internalLogoLink img{width:210px}
    .internalPage .internalIntro .scrollHint{
        bottom:25px;
        font-size:7px;
        letter-spacing:.22em;
    }
}

.internalPage > .siteHeader{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:1000!important;
    opacity:0!important;
    transform:translateY(-100%)!important;
    pointer-events:none!important;
    transition:opacity .25s ease,transform .25s ease!important;
}
.internalPage > .siteHeader.visible{
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
}
.internalPage > .siteHeader .w,
.internalPage > .siteHeader nav{
    height:64px!important;
}
@media(max-width:650px){
    .internalPage > .siteHeader .w,
    .internalPage > .siteHeader nav{height:64px!important}
}

/* FINAL CLEANUP — centered logo + no duplicate artist back link */
.internalPage .internalIntro{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    display:block!important;
}
.internalPage .internalIntro .internalLogoLink{
    position:absolute!important;
    z-index:2!important;
    left:50%!important;
    top:50%!important;
    width:max-content!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    display:block!important;
}
.internalPage .internalIntro .internalLogoLink img{
    display:block!important;
    width:260px!important;
    max-width:58vw!important;
    height:auto!important;
    margin:0!important;
}
.internalPage .internalIntro .scrollHint{
    position:absolute!important;
    z-index:5!important;
    left:50%!important;
    bottom:30px!important;
    transform:translateX(-50%)!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
}
.internalPage .internalIntro .scrollHint.hidden{
    opacity:0!important;
    visibility:hidden!important;
    transform:translate(-50%,8px)!important;
}
.internalPage.artistPage .hero > .w > .head{
    display:none!important;
}
@media(max-width:650px){
    .internalPage .internalIntro{
        height:100svh!important;
        min-height:100svh!important;
    }
    .internalPage .internalIntro .internalLogoLink img{
        width:215px!important;
        max-width:62vw!important;
    }
    .internalPage .internalIntro .scrollHint{
        bottom:25px!important;
    }
}

/* FINAL MENU FIX — internal pages: hamburger + full menu on desktop and mobile */
.internalPage > .siteHeader .hamb{
    display:block!important;
    background:none!important;
    border:0!important;
    color:#eee!important;
    font-size:25px!important;
    line-height:1!important;
    cursor:pointer!important;
    padding:8px 0 8px 14px!important;
}
.internalPage > .mobileMenu{
    display:none!important;
    position:fixed!important;
    top:64px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:999!important;
    background:#070707!important;
    padding:35px 24px!important;
    overflow:auto!important;
}
.internalPage > .mobileMenu.open{
    display:block!important;
}
.internalPage > .mobileMenu a{
    display:block!important;
    color:inherit!important;
    text-decoration:none!important;
    font-size:20px!important;
    line-height:1.2!important;
    padding:17px 0!important;
    border-bottom:1px solid var(--line)!important;
}
@media(min-width:651px){
    .internalPage > .siteHeader .hamb{
        display:block!important;
    }
}

/* FINAL INTERNAL NAV — desktop + mobile */
body.internalPage > header.siteHeader .hamb{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  padding:8px!important;
  position:relative!important;
  z-index:1002!important;
  font-family:inherit!important;
  font-size:30px!important;
  line-height:1!important;
  color:#eee!important;
  background:transparent!important;
  border:0!important;
  cursor:pointer!important;
}
body.internalPage > .mobileMenu{
  display:none!important;
  position:fixed!important;
  top:64px!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:1001!important;
  overflow-y:auto!important;
  background:#070707!important;
  padding:30px 24px 50px!important;
}
body.internalPage > .mobileMenu.open{
  display:block!important;
}
body.internalPage > .mobileMenu a{
  display:block!important;
  color:#eee!important;
  text-decoration:none!important;
  padding:18px 0!important;
  border-bottom:1px solid var(--line)!important;
  font-size:18px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* DESKTOP NAV — show the full navigation in the fixed scroll header.
   Mobile keeps the hamburger. */
@media(min-width:900px){
  body.internalPage > header.siteHeader nav{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:28px!important;
  }
  body.internalPage > header.siteHeader .desktopNav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:24px!important;
    margin-left:auto!important;
  }
  body.internalPage > header.siteHeader .desktopNav a{
    display:inline-block!important;
    color:#eee!important;
    text-decoration:none!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    opacity:.72!important;
    transition:opacity .2s ease!important;
  }
  body.internalPage > header.siteHeader .desktopNav a:hover{
    opacity:1!important;
  }
  body.internalPage > header.siteHeader .hamb{
    display:none!important;
  }
}
@media(max-width:899px){
  body.internalPage > header.siteHeader .desktopNav{
    display:none!important;
  }
  body.internalPage > header.siteHeader .hamb{
    display:block!important;
  }
}

/* HOMEPAGE DESKTOP — logo above the red identity line */
.desktopIdentityLogo{
  display:block;
  margin:0 0 24px;
}
.desktopIdentityLogo img{
  display:block;
  width:318px;
  max-width:100%;
  height:auto;
}
.homepageDesktopNav{display:none}
@media(min-width:900px){
  .homepageDesktopNav{
    display:flex!important;
    align-items:center!important;
    gap:24px!important;
    margin-left:auto!important;
  }
  .homepageDesktopNav a{
    display:inline-block!important;
    color:inherit!important;
    text-decoration:none!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    opacity:.72!important;
  }
  .homepageDesktopNav a:hover{opacity:1!important}
  .siteHeader .hamb{display:none!important}
}
@media(max-width:899px){
  .desktopIdentityLogo{display:none!important}
  .homepageDesktopNav{display:none!important}
  .siteHeader .hamb{display:block!important}
}

/* =========================================================
   DESKTOP HEADER NAV — VISIBLE, HORIZONTAL, NO HAMBURGER
   ========================================================= */
@media (min-width: 900px){
  .siteHeader > .w > nav{
    width:100%!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:28px!important;
  }
  .siteHeader > .w > nav > .brandText{
    flex:0 0 auto!important;
    margin:0!important;
  }
  .siteHeader > .w > nav > .homepageDesktopNav{
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:22px!important;
    margin:0!important;
  }
  .siteHeader > .w > nav > .homepageDesktopNav a{
    display:block!important;
    visibility:visible!important;
    opacity:.78!important;
    color:#eee!important;
    text-decoration:none!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  .siteHeader > .w > nav > .homepageDesktopNav a:hover{
    opacity:1!important;
  }
  .siteHeader > .w > nav > .hamb{
    display:none!important;
  }
}
@media (max-width:899px){
  .siteHeader > .w > nav > .homepageDesktopNav{
    display:none!important;
  }
  .siteHeader > .w > nav > .hamb{
    display:block!important;
  }
}

@media (min-width:900px){
  header.siteHeader .homepageDesktopNav{display:flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(12px,1.7vw,26px)!important;margin-left:auto!important;visibility:visible!important}
  header.siteHeader .homepageDesktopNav a{display:inline-block!important;visibility:visible!important;color:#eee!important;text-decoration:none!important;font-size:9px!important;font-weight:800!important;letter-spacing:.10em!important;line-height:1!important;text-transform:uppercase!important;white-space:nowrap!important;opacity:.82!important}
  header.siteHeader .homepageDesktopNav a:hover{opacity:1!important}
  header.siteHeader .hamb{display:none!important}
}
@media (max-width:899px){
  header.siteHeader .homepageDesktopNav{display:none!important}
  header.siteHeader .hamb{display:block!important}
}

/* =========================================================
   LABEL-STYLE STUDIO + SHOP
   ========================================================= */
.labelStyleCard{
  border:1px solid rgba(255,255,255,.14);
  background:#070707;
  overflow:hidden;
}
.labelStyleVisual{
  min-height:330px;
  padding:48px 54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%),
    #070707;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.labelStyleVisual h3{
  margin:16px 0 0;
  font-size:clamp(42px,6vw,82px);
  line-height:.88;
  letter-spacing:-.055em;
}
.labelStyleBody{
  padding:48px 54px 54px;
}
.labelStyleBody p{
  max-width:760px;
  margin:0 0 32px;
  font-size:clamp(17px,2vw,24px);
  line-height:1.65;
  letter-spacing:.045em;
  opacity:.62;
}
.shopCard{
  display:grid;
  grid-template-columns:1.05fr .95fr;
}

.labelImage img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.shopImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shopImageSlot{
  min-height:420px;
  border-right:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 55%),
    #090909;
}
.shopImageSlot span{
  font-size:10px;
  letter-spacing:.2em;
  opacity:.3;
}
.shopBody{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.shopBody h3{
  font-size:clamp(36px,5vw,64px);
  line-height:.9;
  letter-spacing:-.05em;
  margin:14px 0 22px;
}
.mobileShopBtn{display:none}

@media(max-width:700px){
  .labelStyleVisual{
    min-height:260px;
    padding:34px 24px;
  }
  .labelStyleBody{padding:32px 24px 36px}
  .labelStyleBody p{font-size:16px;line-height:1.7}
  .shopCard{grid-template-columns:1fr}
  .shopImageSlot{
    min-height:270px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  /* Shop sits directly beside the hamburger, outside the menu. */
  .siteHeader nav{position:relative}
  .mobileShopBtn{
    display:block!important;
    margin-left:auto!important;
    margin-right:12px!important;
    padding:10px 12px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    color:#eee!important;
    text-decoration:none!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1!important;
  }
}
@media(min-width:701px){
  .mobileShopBtn{display:none!important}
}

/* SHOP BUTTON — every page, mobile, outside hamburger menu */
@media(max-width:899px){
  body.internalPage .siteHeader nav{
    display:flex!important;
    align-items:center!important;
  }
  body.internalPage .siteHeader .mobileShopBtn{
    display:block!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    margin-right:10px!important;
    padding:10px 12px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    color:#eee!important;
    text-decoration:none!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body.internalPage .siteHeader .hamb{
    flex:0 0 auto!important;
  }
}
@media(min-width:900px){
  body.internalPage .siteHeader .mobileShopBtn{display:none!important}
}

/* =========================================================
   FINAL SHOP NAV
   Mobile: compact rectangular SHOP beside hamburger on
   every page. Desktop: SHOP is the same rectangular CTA
   treatment instead of plain text.
   ========================================================= */
.mobileShopBtn{
  box-sizing:border-box!important;
  text-decoration:none!important;
}
@media(max-width:899px){
  body .siteHeader nav{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
  }
  body .siteHeader .brandText{
    min-width:0!important;
    max-width:calc(100% - 125px)!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  body .siteHeader .mobileShopBtn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:58px!important;
    height:34px!important;
    margin:0 8px 0 auto!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.38)!important;
    background:transparent!important;
    color:#eee!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1!important;
    visibility:visible!important;
    opacity:1!important;
  }
}
@media(min-width:900px){
  body .siteHeader .mobileShopBtn{display:none!important}
  body .siteHeader .homepageDesktopNav a:last-child{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:70px!important;
    height:32px!important;
    padding:0 13px!important;
    border:1px solid rgba(255,255,255,.32)!important;
    background:transparent!important;
    opacity:1!important;
  }
}

/* FINAL FOOTER ALIGNMENT — all four desktop columns start on exactly the same baseline */
.foot{
  align-items:start!important;
}
.foot > div{
  align-self:start!important;
  margin:0!important;
  padding:0!important;
}
.foot > div > p{
  margin:0!important;
  padding:0!important;
}
.foot > div:first-child h3{
  margin:0 0 14px!important;
}
@media(max-width:950px){
  .foot > div{margin:0!important;padding:0!important}
}

/* FOOTER — navigation columns align with the written-out label name */
.foot{
  align-items:start!important;
}
.foot > div{
  align-self:start!important;
}
.foot > div:first-child > p{
  margin-top:24px!important;
}
.foot > div:nth-child(2),
.foot > div:nth-child(3),
.foot > div:nth-child(4){
  padding-top:30px!important;
}
@media(max-width:950px){
  .foot > div:first-child > p{margin-top:14px!important}
  .foot > div:nth-child(2),
  .foot > div:nth-child(3),
  .foot > div:nth-child(4){padding-top:14px!important}
}

/* FOOTER BASELINE — exact top alignment with "UNHOLY CONSPIRACY DEATHWORK" */
@media(min-width:951px){
  .foot{
    align-items:start!important;
  }
  .foot > div:first-child > h3{
    margin:0 0 14px!important;
  }
  .foot > div:first-child > p{
    margin:24px 0 0!important;
    padding:0!important;
  }
  .foot > div:nth-child(2),
  .foot > div:nth-child(3),
  .foot > div:nth-child(4){
    padding-top:38px!important;
    margin:0!important;
  }
  .foot > div:nth-child(2) > p,
  .foot > div:nth-child(3) > p,
  .foot > div:nth-child(4) > p{
    margin:0!important;
    padding:0!important;
  }
}

/* =========================================================
   GLOBAL SITE BACKGROUND
   Replace images/background.webp with the final artwork.
   The background sits behind content; header, video and
   footer remain opaque and visually in the foreground.
   ========================================================= */
body{
    position:relative;
    background:#070707;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(7,7,7,.72),rgba(7,7,7,.72)),
        url("images/background.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
main,
footer{
    position:relative;
    z-index:1;
}
header{
    background:#070707!important;
}
header.scrolled{
    background:#070707!important;
}
footer{
    background:#070707!important;
}
.videoBanner{
    position:relative;
    z-index:1;
    background:#050505!important;
}
.videoBanner video{
    z-index:1;
}
.videoBanner::after{
    z-index:2;
}
.videoBannerContent{
    z-index:3;
}

/* The internal fullscreen intro remains above the global background. */
.internalIntro{
    position:relative;
    z-index:1;
}

/* =========================================================
   BACKGROUND LAYER FIX
   The artwork stays behind ALL page sections, while the
   actual section cards/content stay in the foreground.
   ========================================================= */
body::before{
    z-index:0!important;
}
body > main,
body > section,
body > footer{
    position:relative!important;
    z-index:1!important;
}
body > footer{
    background:#070707!important;
    z-index:2!important;
}

/* Studio + Shop were intentionally separate sections after
   the main content; keep both above the background artwork. */
.studioLabelSection,
body > #shop{
    position:relative!important;
    z-index:1!important;
}
.studioLabelBlock,
.shopCard,
.labelStyleCard{
    position:relative!important;
    z-index:2!important;
}

}

/* FINAL BACKGROUND FIX: never put the fixed header into document flow */
body > header.siteHeader{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:1000!important;
}
/* Hidden header must be fully transparent and non-interactive.
   Existing JS controls .is-visible (homepage) / .visible (internal pages). */
body > header.siteHeader:not(.is-visible):not(.visible){
    opacity:0!important;
    transform:translateY(-100%)!important;
    pointer-events:none!important;
    background:transparent!important;
    border-bottom:0!important;
}
/* Visible header is opaque and sits above the artwork. */
body > header.siteHeader.is-visible,
body > header.siteHeader.visible{
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
    background:#070707!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
}

/* STUDIO — section dividers stay within the content width,
   matching the visual language of THE LABEL. */
.studioPageSection{
  border-top:0!important;
  padding:95px 0!important;
}
.studioPageSection > .w{
  border-top:1px solid rgba(255,255,255,.14)!important;
  padding-top:95px!important;
}

/* Artist landing pages — standalone layout */
.artistStandalone{padding-bottom:100px}
.artistStandaloneHero{min-height:68vh;display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);background:#080808;overflow:hidden}
.artistStandaloneImage{min-height:600px;height:100%;background:#080808;overflow:hidden;position:relative;align-self:stretch}
.artistStandaloneImage img{width:100%;height:100%;min-height:600px;object-fit:cover;object-position:center;display:block;filter:brightness(.72) grayscale(100%)}
.artistStandaloneImage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.04) 35%,rgba(0,0,0,.38));pointer-events:none}
.artistStandaloneCopy{padding:58px;display:flex;flex-direction:column;justify-content:flex-end}
.artistStandaloneCopy .eyebrow{font-size:10px;letter-spacing:.2em;color:#a62a2a;font-weight:800}
.artistStandaloneCopy h1{font-size:clamp(48px,7vw,104px);line-height:.82;letter-spacing:-.065em;margin:14px 0}
.artistStandaloneCopy .artistGenre{font-size:10px;letter-spacing:.18em;opacity:.55}
.artistStandaloneCopy p{font-size:15px;line-height:1.85;opacity:.6;max-width:560px;margin:28px 0}
.artistStandaloneLinks{display:flex;gap:10px;flex-wrap:wrap}
.artistStandaloneLinks a{padding:14px 17px;border:1px solid rgba(255,255,255,.18);color:#eee;text-decoration:none;font-size:9px;letter-spacing:.16em;font-weight:800}
.artistStandaloneLinks a.primary{background:#a62a2a;border-color:#a62a2a}
.artistStandaloneSection{padding:90px 0;border-top:1px solid rgba(255,255,255,.12)}
.artistStandaloneHead{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:36px}
.artistStandaloneHead h2{font-size:clamp(44px,6vw,76px);line-height:.85;letter-spacing:-.06em;margin:10px 0}
.artistStandaloneHead p{max-width:540px;opacity:.56;line-height:1.8}
.artistStandaloneGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.artistStandaloneCard{border:1px solid var(--line);padding:24px;min-height:190px;background:#080808;color:#eee;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between}
.artistStandaloneCard .code{color:#a62a2a;font-size:9px;letter-spacing:.16em;font-weight:800}
.artistStandaloneCard strong{font-size:20px;line-height:1}
.artistStandaloneCard small{font-size:9px;letter-spacing:.14em;opacity:.48}
.artistStandaloneVideo{position:relative;min-height:360px;border:1px solid var(--line);overflow:hidden;background:#080808}
.artistStandaloneVideo .mediaVisual{height:100%;min-height:360px}
.artistStandaloneVideo .mediaVisual img{width:100%;height:100%;object-fit:cover}
.artistStandaloneVideo .mediaPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:70px;height:70px;display:grid;place-items:center;background:#a62a2a;color:#fff}
@media(max-width:800px){
 .artistStandaloneHero{grid-template-columns:1fr}
 .artistStandaloneImage{min-height:380px}
 .artistStandaloneCopy{padding:38px 26px}
 .artistStandaloneHead{grid-template-columns:1fr;gap:22px}
 .artistStandaloneGrid{grid-template-columns:1fr}
}

/* =========================================================
   GLOBAL HEADER — identical behavior on every page
   Hidden over the intro, fixed + visible after scrolling.
   ========================================================= */
.siteHeader{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:10000!important;
  transform:translateY(-110%)!important;
  transition:transform .35s ease, opacity .35s ease!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.siteHeader.visible{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* The homepage and every internal page use the same scroll trigger. */
body.scrolled .siteHeader{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Never reserve layout space for the fixed header. */
body > .siteHeader{
  margin:0!important;
}

/* Header surface stays solid once it appears. */
.siteHeader,
body.scrolled .siteHeader{
  background:#050505!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}

/* Keep the mobile hamburger/shop controls above the header surface. */
.siteHeader nav{
  position:relative!important;
  z-index:2!important;
}

/* MODERN MEDIA PLAYER — preserves the original 1 + 2 media layout */
.mediaGrid .mediaVisual{
    overflow:hidden;
}
.mediaGrid .mediaVisual .ucdYoutubePlayer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    cursor:pointer;
    background:#050505;
}
.ucdYoutubePlayer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease, filter .35s ease;
}
.ucdYoutubePlayer:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.48));
    pointer-events:none;
}
.ucdYoutubePlayer:hover img{
    transform:scale(1.035);
    filter:brightness(.72);
}
.ucdYoutubePlayer .modernPlay{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:72px;
    height:72px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#a62a2a;
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 10px 35px rgba(0,0,0,.45);
    transition:transform .25s ease, background .25s ease;
    pointer-events:none;
}
.ucdYoutubePlayer:hover .modernPlay{
    transform:translate(-50%,-50%) scale(1.08);
    background:#bd3030;
}
.ucdYoutubePlayer .modernPlay span{
    margin-left:3px;
    color:#fff;
    font-size:17px;
}
.ucdYoutubePlayer iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    z-index:5;
}

/* FINAL GLOBAL HEADER OVERRIDE */
.siteHeader{
  position:fixed!important;
  top:0!important; left:0!important; right:0!important;
  width:100%!important;
  z-index:10000!important;
  transform:translateY(-110%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .35s ease,opacity .35s ease,visibility .35s ease!important;
}
body.scrolled .siteHeader{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  background:#050505!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}

/* ===== DEFINITIVE GLOBAL HEADER ===== */
body > header.siteHeader{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  width:100%!important;
  z-index:99999!important;
  transform:translate3d(0,-110%,0)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
  border-bottom:0!important;
  transition:transform .32s ease,opacity .25s ease!important;
}
body > header.siteHeader.ucd-header-visible{
  transform:translate3d(0,0,0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  background:#070707!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}

/* ===== FINAL HEADER VISIBILITY / DESKTOP MENU ===== */
@media (min-width:801px){
  body > header.siteHeader.ucd-header-visible .desktopNav,
  body > header.siteHeader.ucd-header-visible .homepageDesktopNav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(14px,1.8vw,28px)!important;
    margin-left:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body > header.siteHeader.ucd-header-visible .desktopNav a,
  body > header.siteHeader.ucd-header-visible .homepageDesktopNav a{
    display:inline-block!important;
    visibility:visible!important;
    opacity:.82!important;
    color:#eee!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }
  body > header.siteHeader.ucd-header-visible .hamb,
  body > header.siteHeader.ucd-header-visible .mobileShopBtn{
    display:none!important;
  }
}
@media (max-width:800px){
  body > header.siteHeader.ucd-header-visible .desktopNav,
  body > header.siteHeader.ucd-header-visible .homepageDesktopNav{
    display:none!important;
  }
  body > header.siteHeader.ucd-header-visible .hamb{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body > header.siteHeader.ucd-header-visible .mobileShopBtn{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* ===== RESTORE ORIGINAL DESKTOP SHOP BUTTON ===== */
@media (min-width:801px){
  body > header.siteHeader .desktopNav a[href*="shop"],
  body > header.siteHeader .desktopNav a[href*="#shop"]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    min-width:70px!important;
    height:33px!important;
    padding:0 18px!important;
    margin-left:4px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    background:transparent!important;
    color:#eee!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1!important;
    text-decoration:none!important;
  }
  body > header.siteHeader .desktopNav a[href*="shop"]:hover,
  body > header.siteHeader .desktopNav a[href*="#shop"]:hover{
    background:#a62a2a!important;
    border-color:#a62a2a!important;
    color:#fff!important;
  }
}

/* ===== ABSOLUTE FINAL RULES FOR ARTIST STANDALONE HEADERS ===== */
@media (min-width:801px){
  body.artistStandalone > header.siteHeader.ucd-header-visible .desktopNav{
    display:flex!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:24px!important;
    margin:0 0 0 auto!important;
    width:auto!important;
    height:auto!important;
    visibility:visible!important;
  }
  body.artistStandalone > header.siteHeader.ucd-header-visible .desktopNav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:.82!important;
    color:#eee!important;
    background:transparent!important;
    border:0!important;
    height:auto!important;
    min-width:0!important;
    padding:0!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.13em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body.artistStandalone > header.siteHeader.ucd-header-visible .desktopNav a[href*="shop"]{
    min-width:70px!important;
    height:33px!important;
    padding:0 16px!important;
    border:1px solid rgba(255,255,255,.32)!important;
    background:transparent!important;
  }
  body.artistStandalone > header.siteHeader.ucd-header-visible .desktopNav a[href*="shop"]:hover{
    background:#a62a2a!important;
    border-color:#a62a2a!important;
  }
  body.artistStandalone > header.siteHeader.ucd-header-visible .mobileShopBtn,
  body.artistStandalone > header.siteHeader.ucd-header-visible .hamb{
    display:none!important;
  }
}
@media (max-width:800px){
  body.artistStandalone > header.siteHeader.ucd-header-visible .desktopNav{display:none!important}
  body.artistStandalone > header.siteHeader.ucd-header-visible .mobileShopBtn{
    display:flex!important;
    width:58px!important;height:34px!important;
    align-items:center!important;justify-content:center!important;
    margin:0 8px 0 auto!important;padding:0!important;
    border:1px solid rgba(255,255,255,.38)!important;
    background:transparent!important;color:#eee!important;
    font-size:8px!important;font-weight:800!important;letter-spacing:.14em!important;
  }
  body.artistStandalone > header.siteHeader.ucd-header-visible .hamb{
    display:block!important;
  }
}

/* =========================================================
   UCDEATH — GLOBAL HEADER FINAL OVERRIDE
   One header behavior for homepage + every internal page.
   ========================================================= */

body > header.siteHeader{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:auto!important;
  z-index:99999!important;
  margin:0!important;
  transform:translate3d(0,-110%,0)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:#050505!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  transition:transform .32s ease, opacity .25s ease, visibility .32s ease!important;
}

body > header.siteHeader.visible,
body > header.siteHeader.ucd-header-visible,
body.scrolled > header.siteHeader{
  transform:translate3d(0,0,0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  background:#050505!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}

body > header.siteHeader > .w{
  width:100%!important;
}

body > header.siteHeader > .w > nav{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:54px!important;
  position:relative!important;
  z-index:2!important;
}

/* Desktop: full navigation is ALWAYS the desktop navigation.
   This intentionally overrides all historical display:none rules. */
@media (min-width:801px){
  body > header.siteHeader .desktopNav,
  body > header.siteHeader .homepageDesktopNav{
    display:flex!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(18px,1.8vw,28px)!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body > header.siteHeader .desktopNav a,
  body > header.siteHeader .homepageDesktopNav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:.82!important;
    color:#eee!important;
    background:transparent!important;
    border:0!important;
    min-width:0!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.13em!important;
    line-height:1!important;
    text-transform:uppercase!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }

  /* SHOP = same rectangular CTA everywhere on desktop */
  body > header.siteHeader .desktopNav a[href*="shop"],
  body > header.siteHeader .homepageDesktopNav a[href*="shop"]{
    display:inline-flex!important;
    min-width:70px!important;
    width:70px!important;
    height:33px!important;
    padding:0 14px!important;
    margin:0 0 0 4px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(255,255,255,.32)!important;
    background:transparent!important;
    opacity:1!important;
  }

  body > header.siteHeader .desktopNav a[href*="shop"]:hover,
  body > header.siteHeader .homepageDesktopNav a[href*="shop"]:hover{
    background:#a62a2a!important;
    border-color:#a62a2a!important;
    color:#fff!important;
  }

  body > header.siteHeader .hamb,
  body > header.siteHeader .mobileShopBtn{
    display:none!important;
  }
}

/* Mobile: back-to link/name + SHOP + hamburger */
@media (max-width:800px){
  body > header.siteHeader .desktopNav,
  body > header.siteHeader .homepageDesktopNav{
    display:none!important;
  }

  body > header.siteHeader .mobileShopBtn{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:58px!important;
    height:34px!important;
    margin:0 8px 0 auto!important;
    padding:0!important;
    box-sizing:border-box!important;
    border:1px solid rgba(255,255,255,.38)!important;
    background:transparent!important;
    color:#eee!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1!important;
    text-decoration:none!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body > header.siteHeader .hamb{
    display:block!important;
    flex:0 0 auto!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    padding:8px!important;
    box-sizing:border-box!important;
    border:0!important;
    background:transparent!important;
    color:#eee!important;
    font-size:30px!important;
    line-height:1!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body > header.siteHeader .brandText{
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
}

/* ===== FINAL GEOMETRY + SHOP MATCH ===== */
body > header.siteHeader > .w{
  width:min(calc(100% - 48px), var(--max, 1600px))!important;
  max-width:1600px!important;
  height:64px!important;
  margin:0 auto!important;
  padding:0!important;
  box-sizing:border-box!important;
}
body > header.siteHeader > .w > nav{
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* The homepage and internal desktop nav use the same spacing. */
@media (min-width:801px){
  body > header.siteHeader .homepageDesktopNav,
  body > header.siteHeader .desktopNav{
    display:flex!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(18px,1.8vw,28px)!important;
    margin-left:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body > header.siteHeader .homepageDesktopNav a,
  body > header.siteHeader .desktopNav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#eee!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.13em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Homepage SHOP is the same rectangular CTA as internal pages. */
  body > header.siteHeader .homepageDesktopNav a:last-child,
  body > header.siteHeader .desktopNav a:last-child{
    display:inline-flex!important;
    width:76px!important;
    min-width:76px!important;
    height:34px!important;
    padding:0!important;
    margin:0 0 0 4px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(255,255,255,.32)!important;
    background:transparent!important;
    color:#eee!important;
  }
  body > header.siteHeader .homepageDesktopNav a:last-child:hover,
  body > header.siteHeader .desktopNav a:last-child:hover{
    background:#a62a2a!important;
    border-color:#a62a2a!important;
    color:#fff!important;
  }

  body > header.siteHeader .hamb,
  body > header.siteHeader .mobileShopBtn{
    display:none!important;
  }
}

@media (max-width:800px){
  body > header.siteHeader > .w{
    width:calc(100% - 30px)!important;
    max-width:none!important;
  }
  body > header.siteHeader .homepageDesktopNav,
  body > header.siteHeader .desktopNav{
    display:none!important;
  }
  body > header.siteHeader .mobileShopBtn{
    display:flex!important;
    width:58px!important;
    height:34px!important;
    margin:0 8px 0 auto!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.38)!important;
  }
  body > header.siteHeader .hamb{
    display:block!important;
  }
}

/* Artist image fallback — same geometry as the real artist image. */
.artistStandalonePlaceholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:100px;
  font-weight:900;
  color:#ffffff0b;
  background:rgba(255,255,255,.015);
}
.artistStandaloneVideo .mediaCard{
  display:block;
  width:100%;
  text-decoration:none;
}

/* =========================================================
   FOOTER GRID — right column locks to the right grid edge
   ========================================================= */
@media (min-width:951px){
  footer .w{
    width:min(calc(100% - 48px), var(--max, 1600px))!important;
    max-width:1600px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  footer .foot{
    width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:30px!important;
  }
  footer .foot > div:last-child{
    text-align:right!important;
    justify-self:stretch!important;
  }
  footer .foot > div:last-child p{
    text-align:right!important;
  }
}

/* =========================================================
   FINAL — LABEL / STUDIO / SHOP EQUAL HEIGHT
   ========================================================= */
@media (min-width:801px){
  /* The three large homepage cards share one exact height. */
  #about .shopCard,
  #studio .studioLabelBlock,
  #shop .shopCard{
    height:520px!important;
    min-height:520px!important;
    max-height:520px!important;
    box-sizing:border-box!important;
  }

  #about .shopCard,
  #shop .shopCard{
    grid-template-rows:1fr!important;
  }

  #about .shopCard .shopImageSlot,
  #shop .shopCard .shopImageSlot,
  #studio .studioLabelBlock .labelStyleVisual{
    min-height:0!important;
    height:auto!important;
  }

  #about .shopCard .shopBody,
  #shop .shopCard .shopBody,
  #studio .studioLabelBlock .labelStyleBody{
    min-height:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   FINAL — IDENTICAL SYMMETRIC FOOTER ON EVERY PAGE
   ========================================================= */
footer#siteFooter{
  width:100%!important;
  background:#070707!important;
  box-sizing:border-box!important;
}
footer#siteFooter > .w{
  width:min(calc(100% - 48px),1600px)!important;
  max-width:1600px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
footer#siteFooter .foot{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:0!important;
  row-gap:0!important;
  width:100%!important;
  align-items:start!important;
  text-align:left!important;
}
footer#siteFooter .foot > div{
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
footer#siteFooter .foot > div:first-child h3{
  margin:0 0 14px!important;
}
footer#siteFooter .foot > div > p{
  margin:0!important;
  padding:0!important;
}
footer#siteFooter .foot > div:last-child{
  text-align:right!important;
}
footer#siteFooter .foot > div:last-child p{
  text-align:right!important;
}
@media(max-width:800px){
  footer#siteFooter > .w{
    width:calc(100% - 30px)!important;
  }
  footer#siteFooter .foot{
    grid-template-columns:1fr 1fr!important;
    row-gap:28px!important;
  }
  footer#siteFooter .foot > div:last-child,
  footer#siteFooter .foot > div:last-child p{
    text-align:left!important;
  }
}

/* =========================================================
   FINAL CORRECTION — HOMEPAGE FEATURE CARDS
   Keep the existing LABEL + SHOP proportions and raise only
   the STUDIO card to the same visual height.
   ========================================================= */
@media (min-width:801px){
  #about .shopCard,
  #studios .studioLabelBlock,
  #shop .shopCard{
    height:520px!important;
    min-height:520px!important;
    max-height:520px!important;
    box-sizing:border-box!important;
  }

  #about .shopCard,
  #shop .shopCard{
    grid-template-columns:1.05fr .95fr!important;
  }

  #studios .studioLabelBlock{
    grid-template-columns:1fr 1fr!important;
  }

  #about .shopCard .shopImageSlot,
  #shop .shopCard .shopImageSlot,
  #studios .studioLabelBlock .labelStyleVisual{
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
  }

  #about .shopCard .shopBody,
  #shop .shopCard .shopBody,
  #studios .studioLabelBlock .labelStyleBody{
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   FINAL CORRECTION — FOOTER USES THE SAME BODY RASTER
   Four equal columns across the site's --max width.
   No special right alignment: all four columns share the
   same symmetric column rhythm.
   ========================================================= */
footer#siteFooter > .w{
  width:min(calc(100% - 48px),var(--max))!important;
  max-width:var(--max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0!important;
}

footer#siteFooter .foot{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  align-items:start!important;
  text-align:left!important;
}

footer#siteFooter .foot > div,
footer#siteFooter .foot > div:last-child,
footer#siteFooter .foot > div:last-child p{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  justify-self:stretch!important;
}

@media(max-width:800px){
  footer#siteFooter > .w{
    width:calc(100% - 30px)!important;
    max-width:none!important;
  }

  footer#siteFooter .foot{
    grid-template-columns:1fr 1fr!important;
    column-gap:30px!important;
    row-gap:28px!important;
  }
}

/* =========================================================
   FINAL TUNING — SHORTER HOME FEATURE CARDS
   Keep the established proportions; only reduce the total
   card height so the images do not dominate the page.
   ========================================================= */
@media (min-width:801px){
  #about .shopCard,
  #studios .studioLabelBlock,
  #shop .shopCard{
    height:440px!important;
    min-height:440px!important;
    max-height:440px!important;
  }

  #about .shopCard .shopImageSlot,
  #shop .shopCard .shopImageSlot,
  #studios .studioLabelBlock .labelStyleVisual{
    height:100%!important;
  }

  #about .shopCard .shopBody,
  #shop .shopCard .shopBody,
  #studios .studioLabelBlock .labelStyleBody{
    height:100%!important;
  }
}

/* =========================================================
   FINAL TUNING — INTERNAL PAGE DIVIDERS
   Horizontal rules belong to the site's content raster,
   not the full viewport width.
   ========================================================= */
.artistStandaloneSection{
  border-top:0!important;
}

.artistStandaloneSection > .w{
  border-top:1px solid rgba(255,255,255,.12)!important;
  padding-top:90px!important;
  box-sizing:border-box!important;
}

.artistStandaloneSection:first-child > .w{
  border-top:0!important;
  padding-top:0!important;
}

/* Keep the existing content width/raster on every internal page. */
@media (min-width:801px){
  .artistStandaloneSection > .w{
    width:min(calc(100% - 48px),var(--max))!important;
    max-width:var(--max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (max-width:800px){
  .artistStandaloneSection > .w{
    width:calc(100% - 30px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* =========================================================
   SHOP IMAGE — FILL THE ENTIRE IMAGE HALF
   The card height may be reduced, but the supplied shop image
   must still occupy the complete image column.
   ========================================================= */
@media (min-width:801px){
  #shop .shopCard .shopImageSlot{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    display:block!important;
    padding:0!important;
    border-right:1px solid rgba(255,255,255,.14)!important;
    border-bottom:0!important;
  }

  #shop .shopCard .shopImageSlot img,
  #shop .shopCard .shopImage{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
  }
}
@media (max-width:800px){
  #shop .shopCard .shopImageSlot{
    width:100%!important;
    overflow:hidden!important;
  }
  #shop .shopCard .shopImageSlot img,
  #shop .shopCard .shopImage{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
  }
}

/* =========================================================
   UCDEATH — SCROLL TO TOP
   Appears after the user has moved down the page.
   ========================================================= */
.scrollTop{
  position:fixed!important;
  right:28px!important;
  bottom:28px!important;
  z-index:9999!important;
  width:46px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:0!important;
  background:rgba(7,7,7,.88)!important;
  color:#eee!important;
  font-family:inherit!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(10px)!important;
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease, border-color .2s ease!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}

.scrollTop.is-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}

.scrollTop span{
  display:block!important;
  transform:translateY(-2px)!important;
}

.scrollTop:hover{
  background:#8f211d!important;
  border-color:#8f211d!important;
  color:#fff!important;
}

.scrollTop:focus-visible{
  outline:1px solid #eee!important;
  outline-offset:3px!important;
}

@media(max-width:800px){
  .scrollTop{
    right:18px!important;
    bottom:18px!important;
    width:42px!important;
    height:42px!important;
    font-size:20px!important;
  }
}

/* Artist catalogue placeholders + social links + video grid */
.artistStandaloneLinks .socialPlaceholder{opacity:.7}
.artistPlaceholder{border-style:dashed!important;opacity:.62}
.artistPlaceholderVideo{border:1px solid var(--line);background:#080808;min-height:300px;display:flex;flex-direction:column}
.artistVideoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.artistVideoCard{border:1px solid var(--line);background:#080808;overflow:hidden}
.artistVideoVisual{position:relative;aspect-ratio:16/9;background:#080808;overflow:hidden}
.artistVideoVisual .ucdYoutubePlayer{position:absolute;inset:0}
.artistVideoVisual img{width:100%;height:100%;object-fit:cover}
.artistVideoCard .mediaText{padding:18px 20px}
.artistVideoCard .mediaText strong{display:block;font-size:12px;letter-spacing:.05em}
.artistVideoCard .mediaText small{display:block;margin-top:7px;font-size:8px;letter-spacing:.14em;opacity:.48}
.artistVideoPlaceholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;letter-spacing:.15em;font-size:9px;opacity:.5}
.artistVideoPlaceholder b{font-size:11px;color:#a62a2a}
@media(max-width:800px){
 .artistVideoGrid{grid-template-columns:1fr}
}

.artistStandaloneLinks .socialPlaceholder{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:0 17px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#eee!important;
  text-decoration:none!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  font-weight:800!important;
  opacity:.82!important;
}
.artistStandaloneLinks .socialPlaceholder:hover{
  background:#a62a2a!important;
  border-color:#a62a2a!important;
  opacity:1!important;
}

/* Artist media cards stay inside the site raster. */
.artistVideoGrid{width:100%;min-width:0;box-sizing:border-box}
.artistVideoCard{min-width:0;box-sizing:border-box}
.artistVideoCard .mediaText{min-width:0;box-sizing:border-box;overflow:hidden}
.artistVideoCard .mediaText strong{overflow-wrap:anywhere}

/* FINAL ARTIST MEDIA GRID — never let the third card escape the raster */
.artistVideoGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  gap:16px!important;
}
.artistVideoCard{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.artistVideoCard .mediaText{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:800px){
  .artistVideoGrid{
    grid-template-columns:1fr!important;
  }
}

.artistVideoGrid > .artistVideoCard{grid-column:auto!important}

/* MOBILE: exactly one artist per column */
@media (max-width:800px){
  .bandList,
  .artistGrid,
  .artistsGrid,
  .artistCards,
  .artistStandaloneGrid{
    grid-template-columns:1fr!important;
  }
  .artistCard{
    width:100%!important;
    min-width:0!important;
  }
}

/* Local Milan MP4 player */
.ucdLocalVideoPlayer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  cursor:pointer;
  background:#050505;
}
.ucdLocalVideoPlayer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ucdLocalVideoPlayer .modernPlay{
  position:absolute;
  z-index:3;
}
.ucdLocalVideo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#050505;
}

/* =========================================================
   MOBILE ARTISTS — ONE CARD PER ROW
   ========================================================= */
@media (max-width:800px){
  .artistGrid,
  .artistsGrid,
  .artistCards,
  .bandList,
  .artistList,
  .artistStandaloneGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }

  .artistGrid > *,
  .artistsGrid > *,
  .artistCards > *,
  .bandList > *,
  .artistList > *,
  .artistStandaloneGrid > *{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
  }
}

/* =========================================================
   ARTIST OVERVIEW — MOBILE: ONE ARTIST PER ROW
   ========================================================= */
@media screen and (max-width: 800px){
  main .artistsGrid,
  main .artistGrid,
  main .artistCards,
  main .artistList,
  main .bandList{
    display:grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }

  main .artistsGrid > *,
  main .artistGrid > *,
  main .artistCards > *,
  main .artistList > *,
  main .bandList > *{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Actual homepage artist wrapper */
@media screen and (max-width: 800px){
  main .artists{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  main .artists > .artistCard{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
  }
}

/* =========================================================
   FINAL MOBILE ARTIST GRID OVERRIDE
   Homepage #artists must always be one card per row.
   This comes last intentionally to override the older
   1fr 1fr mobile rule.
   ========================================================= */
@media screen and (max-width:650px){
  #artists .artists{
    display:grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    gap:14px !important;
  }

  #artists .artists .artistCard{
    display:block !important;
    grid-column:1 / 2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
}

/* =========================================================
   MOBILE FOOTER — compact, balanced 2-column raster
   ========================================================= */
@media screen and (max-width:650px){
  footer#siteFooter{
    width:100%!important;
    box-sizing:border-box!important;
    padding:54px 0 22px!important;
  }

  footer#siteFooter > .w{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:0!important;
  }

  footer#siteFooter .foot{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:28px!important;
    row-gap:30px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  footer#siteFooter .foot > div{
    padding-top:0!important;
    margin:0!important;
    width:auto!important;
    min-width:0!important;
    align-self:start!important;
  }

  footer#siteFooter .foot > div:first-child > p{
    margin-top:14px!important;
  }

  footer#siteFooter .foot > div:nth-child(2),
  footer#siteFooter .foot > div:nth-child(3),
  footer#siteFooter .foot > div:nth-child(4){
    padding-top:0!important;
  }

  footer#siteFooter .foot > div > p{
    margin-bottom:0!important;
    line-height:1.8!important;
  }

  footer#siteFooter .bottom{
    margin-top:38px!important;
    padding-top:18px!important;
    width:100%!important;
    text-align:center!important;
    line-height:1.8!important;
  }

  footer#siteFooter .bottom span{
    display:block!important;
    white-space:normal!important;
  }
}

/* MOBILE FOOTER — show only the UCDEATH identity block */
@media screen and (max-width:650px){
  footer#siteFooter .foot > div:not(:first-child),
  footer#siteFooter .bottom{
    display:none!important;
  }

  footer#siteFooter .foot{
    display:block!important;
    width:100%!important;
  }

  footer#siteFooter .foot > div:first-child{
    display:block!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }

  footer#siteFooter .foot > div:first-child > p{
    margin-top:14px!important;
    line-height:1.8!important;
  }
}

/* =========================================================
   MOBILE FOOTER — centered UCDEATH block + copyright row
   Applies globally to every page using the shared footer.
   ========================================================= */
@media screen and (max-width:650px){
  footer#siteFooter .foot{
    display:block!important;
    width:100%!important;
    text-align:center!important;
  }

  footer#siteFooter .foot > div:first-child{
    display:block!important;
    width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    text-align:center!important;
  }

  footer#siteFooter .foot > div:first-child > p{
    margin:14px auto 0!important;
    line-height:1.8!important;
    text-align:center!important;
  }

  footer#siteFooter .foot > div:not(:first-child){
    display:none!important;
  }

  /* Keep the horizontal divider and copyright / privacy / imprint. */
  footer#siteFooter .bottom{
    display:block!important;
    width:100%!important;
    margin:38px auto 0!important;
    padding-top:18px!important;
    text-align:center!important;
    line-height:1.8!important;
  }

  footer#siteFooter .bottom span{
    display:inline!important;
    white-space:normal!important;
  }
}

/* =========================================================
   MEDIA RASTER — equal caption bars / featured card fills
   ========================================================= */
@media screen and (min-width:651px){
  .mediaGrid{
    align-items:stretch!important;
  }

  .mediaGrid > .mediaCard{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }

  .mediaGrid > .mediaCard > .mediaVisual{
    flex:1 1 auto!important;
    min-height:0!important;
  }

  .mediaGrid > .mediaCard > .mediaText,
  .mediaStack .mediaText{
    flex:0 0 72px!important;
    min-height:72px!important;
    height:72px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  .mediaStack{
    height:100%!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
  }

  .mediaStack .mediaCard{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }

  .mediaStack .mediaVisual{
    flex:1 1 auto!important;
    min-height:0!important;
  }
}

/* =========================================================
   STUDIO BOX — same two-part construction as LABEL / SHOP
   No image, but a clear vertical division.
   ========================================================= */
@media screen and (min-width:651px){
  #studios .studioLabelBlock,
  .studioLabelBlock{
    grid-template-columns:1fr 1fr!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  #studios .studioLabelBlock .labelStyleVisual,
  .studioLabelBlock .labelStyleVisual{
    border-right:1px solid rgba(255,255,255,.14)!important;
    border-bottom:0!important;
  }

  #studios .studioLabelBlock .labelStyleBody,
  .studioLabelBlock .labelStyleBody{
    border-left:0!important;
  }
}

@media screen and (max-width:650px){
  #studios .studioLabelBlock,
  .studioLabelBlock{
    grid-template-columns:1fr!important;
  }

  #studios .studioLabelBlock .labelStyleVisual,
  .studioLabelBlock .labelStyleVisual{
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
  }
}

/* =========================================================
   LABEL / STUDIO / SHOP — shared vertical split
   Keep the divider on the exact same raster line.
   ========================================================= */
@media screen and (min-width:651px){
  #about .labelStyleCard,
  #studios .studioLabelBlock,
  #shop .labelStyleCard{
    grid-template-columns:1.05fr .95fr!important;
  }

  #about .shopImageSlot,
  #shop .shopImageSlot,
  #studios .labelStyleVisual{
    border-right:1px solid rgba(255,255,255,.14)!important;
    border-left:0!important;
  }
}

/* =========================================================
   ARTIST PAGE EDIT MAP
   ---------------------------------------------------------
   Replace ONLY the image paths below.
   The rules are already assigned individually to each page.
   ========================================================= */

/* >>> DER ROTE MILAN — BACKGROUND IMAGE <<< */
.artistIntroMilan{
  /* background-image:url("images/BACKGROUND_MILAN.webp"); */
  background-size:cover;
  background-position:center;
}

/* >>> DER ROTE MILAN — BAND LOGO SIZE/POSITION <<< */
.artistBandLogoMilan img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> STELLAR MASTER ELITE — BACKGROUND IMAGE <<< */
.artistIntroSME{
  /* background-image:url("images/BACKGROUND_SME.webp"); */
  background-size:cover;
  background-position:center;
}
.artistBandLogoSME img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> OMNIKOLOSS — BACKGROUND IMAGE <<< */
.artistIntroOmnikoloss{
  /* background-image:url("images/BACKGROUND_OMNIKOLOSS.webp"); */
  background-size:cover;
  background-position:center;
}
.artistBandLogoOmnikoloss img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> THE CRYPT VAPOR — BACKGROUND IMAGE <<< */
.artistIntroCryptVapor{
  /* background-image:url("images/BACKGROUND_CRYPT_VAPOR.webp"); */
  background-size:cover;
  background-position:center;
}
.artistBandLogoCryptVapor img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> MASSACRE THE WASTELAND — BACKGROUND IMAGE <<< */
.artistIntroMassacre{
  /* background-image:url("images/BACKGROUND_MASSACRE.webp"); */
  background-size:cover;
  background-position:center;
}
.artistBandLogoMassacre img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> ICHOR — BACKGROUND IMAGE <<< */
.artistIntroIchor{
  /* background-image:url("images/BACKGROUND_ICHOR.webp"); */
  background-size:cover;
  background-position:center;
}
.artistBandLogoIchor img{
  /* width:220px; */
  /* height:auto; */
}

/* >>> OPTIONAL: dark overlay for each artist intro.
   Enable the pseudo-element only if the chosen background needs it. <<< */
.artistIntroMilan,
.artistIntroSME,
.artistIntroOmnikoloss,
.artistIntroCryptVapor,
.artistIntroMassacre,
.artistIntroIchor{
  position:relative;
  background-color:#050505;
}

/* =========================================================
   REBUILT ARTIST FULLSCREEN HERO
   The image itself is an absolute <img> using object-fit:cover.
   This guarantees ANY image fills the entire viewport.
   ========================================================= */

html, body {
  margin: 0;
}

.artistHeroIntro{
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  isolation: isolate !important;
  background: #050505 !important;
}

.artistHeroBackground{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.artistHeroOverlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.28) 55%,
      rgba(0,0,0,.62) 100%
    ) !important;
}

.artistHeroLogo{
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 70vw !important;
  text-decoration: none !important;
}

.artistHeroLogo img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 42vw !important;
  max-height: 34vh !important;
  object-fit: contain !important;
}

.artistHeroIntro .scrollHint{
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  bottom: 34px !important;
  transform: translateX(-50%) !important;
}

@media screen and (max-width:650px){
  .artistHeroIntro{
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .artistHeroBackground{
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .artistHeroLogo{
    max-width: 80vw !important;
  }

  .artistHeroLogo img{
    max-width: 65vw !important;
    max-height: 28vh !important;
  }

  .artistHeroIntro .scrollHint{
    bottom: 22px !important;
  }
}

/* Individual background hooks — each page is independent. */
.artistHeroMilan .artistHeroBackground{ /* EDIT src in HTML */ }
.artistHeroSME .artistHeroBackground{ /* EDIT src in HTML */ }
.artistHeroOmnikoloss .artistHeroBackground{ /* EDIT src in HTML */ }
.artistHeroCryptVapor .artistHeroBackground{ /* EDIT src in HTML */ }
.artistHeroMassacre .artistHeroBackground{ /* EDIT src in HTML */ }
.artistHeroIchor .artistHeroBackground{ /* EDIT src in HTML */ }

/* =========================================================
   ARTIST RELEASES — COVER + TITLE + BANDCAMP
   ========================================================= */

.artistReleaseGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.artistReleaseCard{
  display:flex;
  flex-direction:column;
  min-width:0;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.28);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}

.artistReleaseCard:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.025);
  transform:translateY(-2px);
}

.artistReleaseArtwork{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.07),transparent 42%),
    #090909;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.artistReleaseArtwork img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease, opacity .25s ease;
}

.artistReleaseCard:hover .artistReleaseArtwork img{
  transform:scale(1.035);
}

.coverFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  letter-spacing:.22em;
  color:#666;
}

.artistReleaseArtwork:not(.noCover) .coverFallback{
  display:none;
}

.releasePlay{
  position:absolute;
  right:12px;
  bottom:12px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.72);
  font-size:11px;
}

.artistReleaseInfo{
  padding:17px 17px 16px;
  min-height:112px;
  display:flex;
  flex-direction:column;
}

.releaseMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  font-size:8px;
  letter-spacing:.16em;
  color:#777;
}

.artistReleaseInfo h3{
  margin:0;
  font-size:17px;
  line-height:1.12;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.releaseAction{
  margin-top:auto;
  padding-top:18px;
  font-size:8px;
  letter-spacing:.16em;
  color:#b7b7b7;
  display:flex;
  justify-content:space-between;
}

/* =========================================================
   SELECTED TRACKS — BANDCAMP-STYLE LISTENING CARDS
   ========================================================= */

.bandcampTrackGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.bandcampTrackCard{
  display:block;
  padding:18px 18px 15px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.3);
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}

.bandcampTrackCard:hover{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.025);
}

.bandcampTrackTop{
  display:flex;
  align-items:center;
  gap:12px;
}

.trackPlay{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  color:#f2f0ea;
  font-size:10px;
}

.trackLabel{
  font-size:8px;
  letter-spacing:.18em;
  color:#777;
}

.trackArrow{
  margin-left:auto;
  font-size:12px;
  color:#aaa;
}

.trackTitle{
  margin-top:18px;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.trackBottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:19px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:8px;
  letter-spacing:.15em;
  color:#777;
}

/* Ready-made embed shell for Bandcamp's official iframe code. */
.bandcampEmbed{
  width:100%;
  height:120px;
  border:0;
  display:block;
  background:#111;
}

@media screen and (max-width:800px){
  .artistReleaseGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media screen and (max-width:650px){
  .artistReleaseGrid,
  .bandcampTrackGrid{
    grid-template-columns:1fr;
  }

  .artistReleaseInfo{
    min-height:100px;
  }

  .artistReleaseInfo h3,
  .trackTitle{
    font-size:16px;
  }
}

/* When an official Bandcamp embed is available, let it replace the fallback card. */
.bandcampTrackCard.isEmbedded{
  padding:0;
  border-color:rgba(255,255,255,.13);
}
.bandcampTrackCard.isEmbedded .bandcampEmbed{
  min-height:120px;
}

/* =========================================================
   BANDCAMP ON-PAGE PLAYER OVERLAY
   ========================================================= */
.bandcampTrackCard{appearance:none;-webkit-appearance:none;width:100%;font:inherit;text-align:left;cursor:pointer;color:inherit;}
.bcPlayerOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease;}
.bcPlayerOverlay.isOpen{opacity:1;visibility:visible;pointer-events:auto;}
.bcPlayerPanel{position:relative;width:min(760px,94vw);border:1px solid rgba(255,255,255,.16);background:#080808;box-shadow:0 24px 80px rgba(0,0,0,.6);padding:26px;}
.bcPlayerClose{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#ddd;font-size:26px;line-height:1;cursor:pointer;}
.bcPlayerEyebrow{font-size:8px;letter-spacing:.2em;color:#a52a25;margin-bottom:8px;}
.bcPlayerTitle{font-size:18px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;padding-right:35px;}
.bcPlayerFrame{min-height:120px;border:1px solid rgba(255,255,255,.1);background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bcOfficialIframe{display:block;width:100%;height:120px;border:0;}
.bcPlayerNotice{padding:30px;display:flex;flex-direction:column;gap:10px;text-align:center;font-size:9px;letter-spacing:.12em;color:#777;}
.bcPlayerNotice strong{color:#ddd;letter-spacing:.16em;}
.bcPlayerNotice code{display:block;margin-top:8px;color:#999;font-size:8px;letter-spacing:0;word-break:break-all;}
@media(max-width:650px){.bcPlayerPanel{padding:20px}.bcPlayerFrame{min-height:120px}.bcPlayerTitle{font-size:15px}}

/* =========================================================
   GLOBAL HEADER — remove unwanted outer frame
   Keep only the normal bottom separator.
   ========================================================= */
header,
.siteHeader,
.mainHeader,
.globalHeader,
.internalHeader,
nav{
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  outline:0!important;
  box-shadow:none!important;
}

header,
.siteHeader,
.mainHeader,
.globalHeader,
.internalHeader{
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}

/* The fullscreen artist hero itself has no frame. */
.artistHeroIntro,
.artistHeroIntro::before,
.artistHeroIntro::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* =========================================================
   ARTIST PAGE — use the same spacing rhythm as the homepage
   ========================================================= */
.artistStandalone .w{
  width:min(1400px,calc(100% - 116px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.artistStandaloneSection{
  padding-top:72px!important;
  padding-bottom:72px!important;
}

.artistStandaloneHead{
  margin-bottom:30px!important;
}

/* Milan specifically: 4 releases in one row on desktop. */
.artistReleaseGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px!important;
}

.artistStandaloneSection:first-of-type .artistReleaseGrid{
  gap:18px!important;
}

/* On Milan's page the release grid gets four columns. */
@media screen and (min-width:1001px){
  .artistHeroMilan ~ * .artistReleaseGrid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Robust page-specific selector in case the grid isn't a sibling of the hero. */
body:has(.artistHeroMilan) .artistReleaseGrid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}

/* Match homepage card spacing / widths at narrower desktop sizes. */
@media screen and (max-width:1000px){
  .artistStandalone .w{
    width:min(1400px,calc(100% - 64px))!important;
  }

  .artistReleaseGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }
}

@media screen and (max-width:650px){
  .artistStandalone .w{
    width:calc(100% - 32px)!important;
  }

  .artistStandaloneSection{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }

  .artistReleaseGrid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
}

@media screen and (min-width:1001px){
  body.artistPageMilan .artistReleaseGrid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* =========================================================
   RELEASE CARD — BUY BUTTON
   ========================================================= */
.releaseAction{
  align-items:center;
}

.releaseBuyBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  height:30px;
  padding:0 12px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.22);
  color:#eee;
  text-decoration:none;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.releaseBuyBtn:hover{
  background:#8f211e;
  border-color:#8f211e;
  color:#fff;
}

@media screen and (max-width:650px){
  .releaseBuyBtn{
    min-width:68px;
    height:29px;
  }
}

/* =========================================================
   ARTIST — BUY IN OUR SHOP
   Same 4-card rhythm as the homepage shop/release blocks.
   ========================================================= */
.artistShopSection .artistStandaloneHead{
  align-items:end;
}

.artistSectionMore{
  align-self:end;
  font-size:9px;
  letter-spacing:.16em;
  color:#aaa;
  text-decoration:none;
  white-space:nowrap;
}

.artistSectionMore:hover{
  color:#fff;
}

.artistShopGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.artistShopCard{
  min-width:0;
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.28);
  transition:border-color .2s ease,transform .2s ease;
}

.artistShopCard:hover{
  border-color:rgba(255,255,255,.34);
  transform:translateY(-2px);
}

.artistShopImage{
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#555;
  font-size:8px;
  letter-spacing:.2em;
}

.artistShopInfo{
  min-height:94px;
  padding:14px;
  display:flex;
  flex-direction:column;
}

.shopProductMeta{
  font-size:8px;
  letter-spacing:.15em;
  color:#777;
}

.artistShopInfo strong{
  margin-top:10px;
  font-size:14px;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.shopProductAction{
  margin-top:auto;
  padding-top:15px;
  align-self:flex-end;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

@media screen and (max-width:900px){
  .artistShopGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media screen and (max-width:650px){
  .artistShopGrid{
    grid-template-columns:1fr;
  }

  .artistSectionMore{
    font-size:8px;
  }
}

/* =========================================================
   RELEASE CARD REPAIR — no nested anchors
   ========================================================= */
.artistReleaseCard{
  position:relative;
  overflow:hidden;
  min-width:0;
}

.artistReleaseInfo{
  position:relative;
  z-index:2;
}

.releaseAction{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:auto!important;
}

.releaseViewBtn{
  color:#aaa;
  text-decoration:none;
  font-size:8px;
  letter-spacing:.16em;
}

.releaseViewBtn:hover{color:#fff;}

/* =========================================================
   SHOP SECTION HEADER — same line treatment as homepage
   ========================================================= */
.artistShopSection .artistShopHead{
  display:grid;
  grid-template-columns:auto minmax(40px,1fr) auto;
  align-items:center;
  column-gap:18px;
  margin-bottom:30px;
}

.artistShopSection .artistShopHead h2{
  margin:0!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

.artistShopSection .artistShopHead i{
  display:block;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.13);
}

.artistShopSection .artistSectionMore{
  justify-self:end;
  align-self:center;
  font-size:8px;
  letter-spacing:.16em;
  color:#888;
  text-decoration:none;
}

.artistShopSection .artistSectionMore:hover{color:#fff;}

@media screen and (max-width:650px){
  .artistShopSection .artistShopHead{
    column-gap:12px;
    margin-bottom:22px;
  }
  .artistShopSection .artistShopHead h2{
    font-size:9px!important;
  }
  .artistShopSection .artistSectionMore{
    font-size:7px;
  }
}

.artistReleaseGrid{
  width:100%;
  display:grid;
  align-items:stretch;
}

.artistReleaseArtwork{
  width:100%;
  aspect-ratio:1/1;
}

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

/* =========================================================
   ALL ARTIST PAGES — RELEASES: 4 COLUMNS
   Same album grid on every artist page.
   ========================================================= */
.artistReleaseGrid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
    width:100% !important;
    align-items:stretch !important;
}

@media screen and (max-width:1000px){
    .artistReleaseGrid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}

@media screen and (max-width:650px){
    .artistReleaseGrid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
}

/* =========================================================
   FINAL ARTIST HERO FIX
   ========================================================= */
body.artistStandalone{
  margin:0!important;
  padding:0!important;
}

.artistHeroIntro{
  position:relative!important;
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#050505!important;
  box-sizing:border-box!important;
}

.artistHeroBackground{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
}

.artistHeroOverlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.16) 0%,
    rgba(0,0,0,.22) 52%,
    rgba(0,0,0,.66) 100%
  )!important;
}

.artistHeroLogo{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}

.artistHeroLogo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:42vw!important;
  max-height:34vh!important;
  object-fit:contain!important;
}

.artistHeroIntro .scrollHint{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  bottom:34px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:max-content!important;
  margin:0!important;
  pointer-events:none!important;
}

/* Do not let the old scroll-hint styles move it into document flow. */
.artistHeroIntro + main{
  position:relative!important;
}

@media(max-width:650px){
  .artistHeroIntro{
    width:100vw!important;
    height:100svh!important;
    min-height:100svh!important;
  }

  .artistHeroBackground{
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
  }

  .artistHeroLogo img{
    max-width:65vw!important;
    max-height:28vh!important;
  }

  .artistHeroIntro .scrollHint{
    bottom:24px!important;
  }
}

/* =========================================================
   FINAL HERO / HEADER BEHAVIOUR
   ========================================================= */
body.artistStandalone > header.siteHeader{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1000!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(-100%)!important;
  pointer-events:none!important;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s!important;
}

body.artistStandalone > header.siteHeader.visible,
body.artistStandalone > header.siteHeader.ucd-header-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
  transition:opacity .25s ease,transform .25s ease,visibility 0s!important;
}

.artistHeroIntro{
  position:relative!important;
  z-index:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
}

.artistHeroIntro .scrollHint{
  position:absolute!important;
  left:50%!important;
  bottom:34px!important;
  z-index:5!important;
  transform:translateX(-50%)!important;
  white-space:nowrap!important;
}

@media(max-width:650px){
  .artistHeroIntro{
    height:100svh!important;
    min-height:100svh!important;
  }
  .artistHeroIntro .scrollHint{
    bottom:24px!important;
  }
}

/* =========================================================
   ARTIST YOUTUBE — 3 ACROSS
   ========================================================= */
.artistVideoGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
}

.artistVideoCard{
  min-width:0!important;
  overflow:hidden!important;
}

.artistVideoVisual{
  width:100%!important;
  aspect-ratio:16/9!important;
}

.artistVideoVisual .ucdYoutubePlayer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  cursor:pointer!important;
}

.artistVideoVisual .ucdYoutubePlayer img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

@media(max-width:900px){
  .artistVideoGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:650px){
  .artistVideoGrid{
    grid-template-columns:1fr!important;
  }
}

/* Inline YouTube iframe after clicking the red play button. */
.ucdYoutubePlayer .ucdYoutubeIframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* MOBILE: artist releases are always one card per row */
@media screen and (max-width:650px){
  .artistReleaseGrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .artistReleaseCard{
    width:100%!important;
  }
}

/* YOUTUBE: local poster first, YouTube thumbnail only as fallback */
.ucdYoutubePlayer{
  position:relative!important;
  overflow:hidden!important;
}
.ucdYoutubePlayer > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* =========================================================
   ARTIST RELEASES — MOBILE: ONE CARD PER ROW
   Strong final override so the desktop 4-column rule can
   never leak into the mobile layout.
   ========================================================= */
@media screen and (max-width: 767px){
  html body.artistStandalone .artistReleaseGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:none!important;
    width:100%!important;
    gap:16px!important;
  }

  html body.artistStandalone .artistReleaseGrid > .artistReleaseCard{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
  }
}

/* =========================================================
   ARTIST PAGES — COMMON HERO VIDEO
   Replace videos/artist-hero.webm + artist-hero.mp4 only.
   ========================================================= */
.artistHeroIntro .artistHeroBackground{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

.artistHeroIntro video.artistHeroBackground{
  background:#050505!important;
}

/* =========================================================
   ARTIST BODY IMAGE — one simple replaceable image per page
   ========================================================= */
.artistStandaloneImage > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

.artistStandaloneImage{
  overflow:hidden!important;
}

@media(max-width:650px){
  .artistHeroIntro .artistHeroBackground{
    object-fit:cover!important;
  }
}

/* =========================================================
   ARTIST BODY — DO NOT USE HOMEPAGE GLOBAL BACKGROUND
   The homepage uses body::before with images/background.webp.
   Artist pages have their own replaceable body image instead.
   ========================================================= */
body.artistStandalone::before{
  display:none!important;
  background-image:none!important;
  content:none!important;
}

body.artistStandalone{
  background:#070707!important;
}

body.artistStandalone 

body.artistStandalone .artistStandaloneImage{
  background:#050505!important;
  background-image:none!important;
}

body.artistStandalone .artistStandaloneImage > img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:brightness(.72);
}

/* =========================================================
   ARTIST BODY IMAGE SLOTS — ONE SYSTEM FOR ALL ARTISTS
   Replace only the image file in images/artist-body/.
   No homepage background is used here.
   ========================================================= */
body.artistStandalone .artistStandaloneImage[class*="artistBodyImage-"]{
  position:relative!important;
  overflow:hidden!important;
  background-color:#050505!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  background-image:var(--artist-body-image)!important;
}
body.artistStandalone .artistBodyImage-Milan{
  --artist-body-image:url("images/artist-body/milan-body.webp");
}
body.artistStandalone .artistBodyImage-SME{
  --artist-body-image:url("images/artist-body/sme-body.webp");
}
body.artistStandalone .artistBodyImage-Omnikoloss{
  --artist-body-image:url("images/artist-body/omnikoloss-body.webp");
}
body.artistStandalone .artistBodyImage-Crypt\ Vapor{
  --artist-body-image:url("images/artist-body/crypt-vapor-body.webp");
}
body.artistStandalone .artistBodyImage-Massacre\ The\ Wasteland{
  --artist-body-image:url("images/artist-body/massacre-body.webp");
}
body.artistStandalone .artistBodyImage-Ichor{
  --artist-body-image:url("images/artist-body/ichor-body.webp");
}

body.artistStandalone .artistBodyImage-CryptVapor{
  --artist-body-image:url("images/artist-body/crypt-vapor-body.webp");
}
body.artistStandalone .artistBodyImage-Massacre{
  --artist-body-image:url("images/artist-body/massacre-body.webp");
}

body.artistStandalone .artistStandaloneImage[class*="artistBodyImage-"] > img{
  display:none!important;
}
body.artistStandalone::before{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* =========================================================
   FINAL ARTIST BODY IMAGE
   Real IMG element, page-specific. Homepage background is
   completely unrelated to this area.
   ========================================================= */
body.artistStandalone::before{
  display:none!important;
}

body.artistStandalone .artistStandaloneImage.artistBodyImage{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:600px!important;
  overflow:hidden!important;
  background:#080808!important;
  background-image:none!important;
}

body.artistStandalone .artistStandaloneImage.artistBodyImage::before,
body.artistStandalone .artistStandaloneImage.artistBodyImage::after{
  display:none!important;
  content:none!important;
}

body.artistStandalone .artistStandaloneImage.artistBodyImage .artistBodyImageFile{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  filter:brightness(.72)!important;
}

@media(max-width:650px){
  body.artistStandalone .artistStandaloneImage.artistBodyImage{
    min-height:420px!important;
  }
}

/* =========================================================
   UCD ARTIST BODY IMAGE — ISOLATED COMPONENT
   Unique class names intentionally do not reuse any homepage
   or old artist image classes.
   ========================================================= */
.ucdArtistBodyImage{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:600px!important;
  overflow:hidden!important;
  background:#080808!important;
  background-image:none!important;
}
.ucdArtistBodyImage::before,
.ucdArtistBodyImage::after{
  display:none!important;
  content:none!important;
}
.ucdArtistBodyImage__img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  filter:brightness(.72)!important;
}
@media(max-width:650px){
  .ucdArtistBodyImage{
    min-height:420px!important;
  }
}

/* Artist pages never inherit the homepage fixed background layer. */
body.artistStandalone::before{
  display:none!important;
  content:none!important;
  background-image:none!important;
}

/* FINAL BODY IMAGE VISIBILITY FIX
   Use a normal-flow image so no inherited/absolute layout rule can hide it. */
body.artistStandalone .ucdArtistBodyImage{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:600px!important;
  height:600px!important;
  overflow:hidden!important;
  background:#080808!important;
  background-image:none!important;
  opacity:1!important;
  visibility:visible!important;
}
body.artistStandalone .ucdArtistBodyImage__img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:10!important;
  filter:none!important;
}
body.artistStandalone .ucdArtistBodyImage::before,
body.artistStandalone .ucdArtistBodyImage::after{
  display:none!important;
  content:none!important;
}
@media(max-width:650px){
  body.artistStandalone .ucdArtistBodyImage{
    height:420px!important;
    min-height:420px!important;
  }
}

/* =========================================================
   ARTIST BODY — FULL BACKGROUND LAYER
   Same principle as the homepage background:
   header + hero + footer stay outside; all artist content
   sits above one full body background image.
   ========================================================= */
body.artistStandalone::before{
  display:none!important;
  content:none!important;
}

body.artistStandalone{
  background:#070707!important;
}

body.artistStandalone main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}

body.artistStandalone .ucdArtistBodyBackground{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  background-image:var(--artist-body-bg)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}

/* Dark veil keeps the text/boxes readable while preserving the image. */
body.artistStandalone .ucdArtistBodyBackground::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:rgba(0,0,0,.30)!important;
  pointer-events:none!important;
}

body.artistStandalone .ucdArtistBodyBackground > *{
  position:relative!important;
  z-index:1!important;
}


/* =========================================================
   UCD — ARTIST PAGE BACKGROUND (CLEAN SYSTEM)
   ONE background image behind the complete artist content.
   Header / hero video / footer remain separate.
   ========================================================= */

html body.artistStandalone{
  position:relative;
  background:#070707;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

/* Artist-specific image */
html body.artistStandalone.artistMilan{
  background-image:url("images/artist-body/milan-body.webp");
}
html body.artistStandalone.artistSME{
  background-image:url("images/artist-body/sme-body.webp");
}
html body.artistStandalone.artistOmnikoloss{
  background-image:url("images/artist-body/omnikoloss-body.webp");
}
html body.artistStandalone.artistCryptVapor{
  background-image:url("images/artist-body/crypt-vapor-body.webp");
}
html body.artistStandalone.artistMassacre{
  background-image:url("images/artist-body/massacre-body.webp");
}
html body.artistStandalone.artistIchor{
  background-image:url("images/artist-body/ichor-body.webp");
}

/* Absolutely no second page-sized background layer. */
html body.artistStandalone::before,
html body.artistStandalone::after{
  content:none;
  display:none;
}

/* Existing artist content containers do NOT paint a page-sized background. */
html body.artistStandalone main,
html body.artistStandalone .ucdArtistBodyBackground{
  background:transparent !important;
  background-image:none !important;
}

/* Sections: transparent. */
html body.artistStandalone .artistStandaloneSection{
  background:transparent !important;
}

/* Intro panel: translucent, not opaque. */
html body.artistStandalone .artistStandaloneHero{
  background:rgba(8,8,8,.32) !important;
  background-image:none !important;
}

/* Individual cards: readable but background still visible. */
html body.artistStandalone .artistReleaseCard,
html body.artistStandalone .bandcampTrackCard,
html body.artistStandalone .artistVideoCard,
html body.artistStandalone .mediaCard,
html body.artistStandalone .artistStandaloneCard,
html body.artistStandalone .artistShopCard{
  background-color:rgba(8,8,8,.42) !important;
}

/* Keep the body background behind every section. */
html body.artistStandalone main,
html body.artistStandalone main > *,
html body.artistStandalone .artistStandaloneSection,
html body.artistStandalone .artistStandaloneSection > .w{
  position:relative;
  z-index:1;
}

/* Header and footer stay above it. */
html body.artistStandalone > header,
html body.artistStandalone > footer{
  position:relative;
  z-index:5;
}

/* No repeat / fixed background on desktop. */
@media(max-width:900px){
  html body.artistStandalone{
    background-attachment:scroll;
  }
}

/* =========================================================
   UCD ARTIST BACKGROUND — FINAL DEDICATED LAYER
   One fixed image behind EVERYTHING in the page body.
   ========================================================= */
html body.artistStandalone{
  position:relative!important;
  background:#070707!important;
  background-image:none!important;
}

/* Dedicated image layer */
html body.artistStandalone .ucdArtistPageBackground{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100vh!important;
  display:block!important;
  z-index:0!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
}

html body.artistStandalone .ucdArtistPageBackground--milan{
  background-image:url("./images/artist-body/milan-body.webp")!important;
}
html body.artistStandalone .ucdArtistPageBackground--sme{
  background-image:url("./images/artist-body/sme-body.webp")!important;
}
html body.artistStandalone .ucdArtistPageBackground--omnikoloss{
  background-image:url("./images/artist-body/omnikoloss-body-new.webp")!important;
}
html body.artistStandalone .ucdArtistPageBackground--crypt-vapor{
  background-image:url("./images/artist-body/crypt-vapor-body-new.webp")!important;
}
html body.artistStandalone .ucdArtistPageBackground--massacre{
  background-image:url("./images/artist-body/massacre-body.webp")!important;
}
html body.artistStandalone .ucdArtistPageBackground--ichor{
  background-image:url("./images/artist-body/ichor-body.webp")!important;
}

/* All page content is above the dedicated background. */
html body.artistStandalone > header,
html body.artistStandalone > main,
html body.artistStandalone > footer,
html body.artistStandalone .mobileMenu{
  position:relative!important;
  z-index:2!important;
}

/* Remove all old page-sized backgrounds from content wrappers. */
html body.artistStandalone main,
html body.artistStandalone main > *,
html body.artistStandalone .ucdArtistBodyBackground,
html body.artistStandalone .artistStandaloneSection{
  background-color:transparent!important;
  background-image:none!important;
}

/* The first intro panel must not hide the image. */
html body.artistStandalone .artistStandaloneHero{
  background:rgba(8,8,8,.30)!important;
}

/* Cards remain dark enough to read, but image is visible. */
html body.artistStandalone .artistReleaseCard,
html body.artistStandalone .bandcampTrackCard,
html body.artistStandalone .mediaCard,
html body.artistStandalone .artistVideoCard,
html body.artistStandalone .artistStandaloneCard,
html body.artistStandalone .artistShopCard{
  background-color:rgba(8,8,8,.40)!important;
}

/* Kill every old pseudo background layer. */
html body.artistStandalone::before,
html body.artistStandalone::after,
html body.artistStandalone .ucdArtistBodyBackground::before,
html body.artistStandalone .ucdArtistBodyBackground::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

@media(max-width:900px){
  html body.artistStandalone .ucdArtistPageBackground{
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
  }
}

/* =========================================================
   ARTIST CONTENT BOXES — HOMEPAGE GREY SURFACE
   Keep the artist background visible around the boxes.
   Text/content panels use the same neutral grey character.
   ========================================================= */

/* Main text/content panels */
html body.artistStandalone .artistStandaloneHero,
html body.artistStandalone .artistReleaseCard,
html body.artistStandalone .bandcampTrackCard,
html body.artistStandalone .artistVideoCard,
html body.artistStandalone .mediaCard,
html body.artistStandalone .artistStandaloneCard,
html body.artistStandalone .artistShopCard{
  background-color:rgba(128,128,128,.24)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.16)!important;
}

/* Slightly stronger grey where there is a lot of text */
html body.artistStandalone .artistStandaloneHero .artistStandaloneCopy,
html body.artistStandalone .artistReleaseCard .artistReleaseInfo,
html body.artistStandalone .bandcampTrackCard .trackBottom,
html body.artistStandalone .mediaText{
  background-color:rgba(128,128,128,.20)!important;
}

/* Album cover remains the image itself; only the title/info area is grey. */
html body.artistStandalone .artistReleaseArtwork{
  background-color:transparent!important;
}

/* Bandcamp player/text area */
html body.artistStandalone .bandcampTrackCard .bandcampTrackTop{
  background-color:rgba(128,128,128,.20)!important;
}

/* Headings / section wrapper stay transparent so the page image shows through. */
html body.artistStandalone .artistStandaloneSection,
html body.artistStandalone .artistStandaloneSection > .w,
html body.artistStandalone .artistStandaloneHead{
  background:transparent!important;
}

/* Keep buttons readable on the grey panels. */
html body.artistStandalone .artistStandaloneHero a,
html body.artistStandalone .artistReleaseCard a,
html body.artistStandalone .bandcampTrackCard a,
html body.artistStandalone .mediaCard a{
  position:relative;
  z-index:2;
}

/* Artist content boxes: black, 95% opaque */
html body.artistStandalone .artistStandaloneHero,
html body.artistStandalone .artistReleaseCard,
html body.artistStandalone .bandcampTrackCard,
html body.artistStandalone .artistVideoCard,
html body.artistStandalone .mediaCard,
html body.artistStandalone .artistStandaloneCard,
html body.artistStandalone .artistShopCard{
  background-color:rgba(0,0,0,.95)!important;
  background-image:none!important;
}

/* Text/info areas inside cards */
html body.artistStandalone .artistStandaloneHero .artistStandaloneCopy,
html body.artistStandalone .artistReleaseCard .artistReleaseInfo,
html body.artistStandalone .bandcampTrackCard .trackBottom,
html body.artistStandalone .bandcampTrackCard .bandcampTrackTop,
html body.artistStandalone .mediaText{
  background-color:rgba(0,0,0,.95)!important;
}

/* Keep section/background itself transparent */
html body.artistStandalone .artistStandaloneSection,
html body.artistStandalone .artistStandaloneSection > .w,
html body.artistStandalone .artistStandaloneHead{
  background:transparent!important;
}

/* =========================================================
   HOMEPAGE CONTENT BOXES — BLACK 95%
   Same box treatment as artist pages.
   ========================================================= */
html body:not(.artistStandalone) .mediaCard,
html body:not(.artistStandalone) .shopCard,
html body:not(.artistStandalone) .releaseCard,
html body:not(.artistStandalone) .homeCard,
html body:not(.artistStandalone) .studioCard,
html body:not(.artistStandalone) .labelCard,
html body:not(.artistStandalone) .contentCard{
  background-color:rgba(0,0,0,.95)!important;
}

/* Common homepage text/info areas */
html body:not(.artistStandalone) .mediaText,
html body:not(.artistStandalone) .shopText,
html body:not(.artistStandalone) .releaseInfo,
html body:not(.artistStandalone) .cardText,
html body:not(.artistStandalone) .studioText,
html body:not(.artistStandalone) .labelText{
  background-color:rgba(0,0,0,.95)!important;
}


/* =========================================================
   UCDEATH — BLACK METAL VISUAL PASS
   STYLE ONLY — CONTENT / HTML LEFT UNCHANGED
   ========================================================= */

:root{
    --bg:#030303;
    --text:#d9d5cc;
    --muted:#77736d;
    --line:#26231f;
    --red:#571311;
    --red-soft:#7b211b;
    --ash:#a6a097;
    --cold:#c9c3b9;
}

/* deeper page surface */
html, body{
    background:
        radial-gradient(ellipse at 50% -12%, rgba(75,18,15,.11), transparent 42%),
        linear-gradient(180deg,#020202 0%,#050505 45%,#020202 100%);
    color:var(--text);
}

body{
    letter-spacing:.055em;
}

/* quiet film/print texture — not a moving VHS effect */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.16;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 3px,
            rgba(255,255,255,.018) 4px
        ),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.028), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.018), transparent 30%);
    mix-blend-mode:screen;
}

body > *{
    position:relative;
    z-index:1;
}

/* ---------------------------------------------------------
   HEADER — severe / minimal
   --------------------------------------------------------- */
header{
    height:76px;
    background:rgba(2,2,2,.94);
    border-bottom:1px solid #211e1b;
    box-shadow:0 8px 30px rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
}

header.scrolled{
    height:62px;
    background:rgba(2,2,2,.97);
    border-color:#30231f;
}

.brand img{
    filter:contrast(1.08) brightness(.92);
}

.links{
    color:#77716b;
    letter-spacing:.18em;
}

.links a{
    position:relative;
}

.links a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:1px;
    background:#5a1613;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
}

.links a:hover{
    color:#ddd8cf;
}

.links a:hover::after{
    transform:scaleX(1);
}

.shop{
    border:1px solid #3a312c;
    background:#090807;
    color:#aaa39a;
}

.shop:hover{
    border-color:#68201b;
    color:#e0d9cf;
}

/* ---------------------------------------------------------
   TYPOGRAPHY — colder, heavier, more black-metal
   --------------------------------------------------------- */
h1,h2,h3,h4,
.pageIntro h1,
.heroInfo h1,
.videoBannerTitle,
.title{
    font-family:Georgia,"Times New Roman",serif;
    text-transform:uppercase;
    text-shadow:0 2px 14px rgba(0,0,0,.65);
}

.pageIntro h1{
    font-weight:400;
    letter-spacing:.035em;
}

.heroInfo h1{
    letter-spacing:.045em;
}

.head h2{
    color:#aaa39a;
    letter-spacing:.34em;
}

.head i{
    background:linear-gradient(90deg,#302b26,#161412);
}

.videoBannerLabel,
.eyebrow,
.out,
.code{
    color:#79211c;
    letter-spacing:.24em;
}

.by,
.meta,
.pageIntro p,
.releaseInfo p,
.artistText p{
    color:#706b65;
}

/* red is an accent, never a large UI color */
.red{
    height:1px;
    background:linear-gradient(90deg,#621914,transparent);
    margin:18px 0 14px;
}

/* ---------------------------------------------------------
   FRAMES — fewer, darker, slightly irregular
   --------------------------------------------------------- */
.heroCover,
.releaseItem img,
.releaseItem .releasePlaceholder,
.art,
.artistCard,
.mediaCard,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard{
    border:1px solid #292521;
    background-color:#070707;
}

/* subtle offset blood-red registration mark on frames */
.artistCard,
.mediaCard,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard{
    position:relative;
}

.artistCard::before,
.mediaCard::before,
.shopCard::before,
.releaseCard::before,
.homeCard::before,
.studioCard::before,
.labelCard::before,
.contentCard::before{
    content:"";
    position:absolute;
    top:-1px;
    left:13px;
    width:34px;
    height:1px;
    background:#681a16;
    z-index:3;
    pointer-events:none;
}

/* avoid double-box feeling around images */
.artistVisual,
.mediaVisual{
    border:0;
}

.artistText,
.mediaText,
.shopText,
.releaseInfo,
.cardText,
.studioText,
.labelText{
    border-top:1px solid #201d1a;
}

/* release art gets only one frame */
.releaseItem img,
.releaseItem .releasePlaceholder{
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------
   CONTENT SURFACES — near black, with subtle tonal breaks
   --------------------------------------------------------- */
.artistCard,
.mediaCard,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard{
    background:
        linear-gradient(135deg,rgba(255,255,255,.012),transparent 38%),
        #050505;
}

.artistText,
.mediaText,
.shopText,
.releaseInfo,
.cardText,
.studioText,
.labelText{
    background:
        linear-gradient(180deg,rgba(80,20,16,.035),transparent 65%),
        #060606;
}

/* ---------------------------------------------------------
   TEXT HIERARCHY
   --------------------------------------------------------- */
.title,
.releaseInfo h2,
.artistText h3{
    color:#d1cbc1;
}

.title:hover,
.releaseInfo h2:hover,
.artistText h3:hover{
    color:#e4ddd2;
}

.releaseLinks a,
.arrow{
    color:#8e877f;
}

.releaseLinks a:hover,
.arrow:hover{
    color:#b23a30;
}

.price{
    color:#8b857e;
}

/* small code / catalogue markers */
.out,
.code,
.eyebrow{
    font-weight:600;
}

/* ---------------------------------------------------------
   BUTTONS — no bright red blocks
   --------------------------------------------------------- */
.btn{
    border:1px solid #39312c;
    background:#080706;
    color:#b7b0a7;
    position:relative;
}

.btn::before{
    content:"";
    width:3px;
    height:100%;
    position:absolute;
    left:-1px;
    top:0;
    background:#571511;
    opacity:.8;
}

.btn:hover{
    border-color:#67201b;
    background:#0d0908;
    color:#e0d9cf;
}

.primary{
    background:#270a08;
    border-color:#571511;
    color:#d3cbc2;
}

.primary:hover{
    background:#350d0a;
}

/* ---------------------------------------------------------
   ARTIST / MEDIA IMAGE TREATMENT
   --------------------------------------------------------- */
.artistVisual::after{
    background:
        linear-gradient(180deg,transparent 48%,rgba(0,0,0,.88) 100%),
        linear-gradient(90deg,rgba(30,4,3,.12),transparent 50%,rgba(30,4,3,.10));
}

.mediaVisual::before{
    background:
        linear-gradient(90deg,rgba(72,13,10,.045),transparent 50%,rgba(72,13,10,.035)),
        repeating-linear-gradient(
            0deg,
            transparent 0 5px,
            rgba(255,255,255,.012) 6px
        );
}

/* ---------------------------------------------------------
   PAGE INTRO / LARGE TITLES
   --------------------------------------------------------- */
.pageIntro{
    position:relative;
}

.pageIntro::after{
    content:"";
    display:block;
    width:72px;
    height:1px;
    margin-top:28px;
    background:#651914;
}

.pageIntro p{
    color:#77716a;
}

/* ---------------------------------------------------------
   MOBILE — keep structure, only darken the presentation
   --------------------------------------------------------- */
@media(max-width:900px){
    header{
        height:66px;
    }

    header.scrolled{
        height:60px;
    }

    .mobileMenu{
        background:rgba(3,3,3,.985);
        border-top:1px solid #201d1a;
    }

    .mobileMenu a{
        border-bottom:1px solid #201d1a;
        color:#aaa39a;
    }

    .mobileMenu a:hover{
        color:#ddd6cc;
    }

    .hamb{
        color:#b7b0a7;
    }

    .shop{
        border-color:#3a302b;
    }

    .pageIntro h1{
        letter-spacing:.02em;
    }

    .artistCard::before,
    .mediaCard::before,
    .shopCard::before,
    .releaseCard::before,
    .homeCard::before,
    .studioCard::before,
    .labelCard::before,
    .contentCard::before{
        left:10px;
        width:26px;
    }
}

/* =========================================================
   END BLACK METAL VISUAL PASS
   ========================================================= */

/* =========================================================
   UCDEATH — DARKER BLACK METAL / ASH + OXIDE PASS
   STYLE ONLY — CONTENT / HTML UNCHANGED
   ========================================================= */

:root{
    --steel:#69716e;
    --steel-dim:#3e4543;
    --ash-dark:#181a19;
}

/* heavier printed grain — static, not VHS */
body::before{
    opacity:.26;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.055) 0 1px, transparent 1.5px),
        radial-gradient(circle at 73% 61%, rgba(255,255,255,.042) 0 1px, transparent 1.6px),
        radial-gradient(circle at 38% 84%, rgba(255,255,255,.035) 0 1px, transparent 1.4px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.009) 0 1px, transparent 1px 7px),
        radial-gradient(ellipse at 50% 35%, transparent 25%, rgba(0,0,0,.18) 100%);
    background-size:17px 17px,23px 23px,29px 29px,100% 4px,7px 100%,100% 100%;
    mix-blend-mode:screen;
}

/* colder secondary tone: steel / oxidized grey */
.by,
.meta,
.pageIntro p,
.releaseInfo p,
.artistText p{
    color:var(--steel);
}

.price,
.releaseLinks a,
.arrow,
.head a{
    color:#777e7b;
}

.price:hover,
.releaseLinks a:hover,
.arrow:hover,
.head a:hover{
    color:#a1aaa6;
}

/* red registration marks: flush to the left edge of every card */
.artistCard::before,
.mediaCard::before,
.shopCard::before,
.releaseCard::before,
.homeCard::before,
.studioCard::before,
.labelCard::before,
.contentCard::before,
.card::before{
    left:-1px;
    top:-1px;
    width:42px;
    height:1px;
    background:linear-gradient(90deg,#7a1d18 0 70%,transparent 100%);
    box-shadow:0 0 8px rgba(105,24,20,.16);
}

/* same left registration line for release/media/other framed blocks */
.releaseItem,
.mediaCard,
.artistCard,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard,
.card{
    position:relative;
}

/* section heads: restrained red mark starts exactly at the left */
.head{
    position:relative;
}

.head h2{
    color:#b1ada4;
    text-shadow:0 1px 10px rgba(0,0,0,.8);
}

.head i{
    background:linear-gradient(90deg,#302e2a,#171918);
}

/* darker, mineral-like surfaces */
.artistCard,
.mediaCard,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard,
.card{
    background:
        linear-gradient(135deg,rgba(105,113,110,.025),transparent 42%),
        #040505;
    border-color:#242725;
}

.artistText,
.mediaText,
.shopText,
.releaseInfo,
.cardText,
.studioText,
.labelText,
.ci{
    background:
        linear-gradient(180deg,rgba(88,18,15,.025),rgba(28,31,30,.018) 45%,transparent 100%),
        #050606;
}

/* slight cold edge instead of more red everywhere */
.artistCard:hover,
.mediaCard:hover,
.shopCard:hover,
.releaseCard:hover,
.homeCard:hover,
.studioCard:hover,
.labelCard:hover,
.contentCard:hover,
.card:hover{
    border-color:#343a38;
}

/* keep the red mark visible on hover */
.card:hover::before,
.artistCard:hover::before,
.mediaCard:hover::before,
.shopCard:hover::before,
.releaseCard:hover::before,
.homeCard:hover::before,
.studioCard:hover::before,
.labelCard:hover::before,
.contentCard:hover::before{
    background:linear-gradient(90deg,#8a211b 0 70%,transparent 100%);
}

/* no inset line directly under card copy — cleaner left edge */
.artistText,
.mediaText,
.shopText,
.releaseInfo,
.cardText,
.studioText,
.labelText,
.ci{
    border-top-color:#181b1a;
}

@media(max-width:900px){
    .artistCard::before,
    .mediaCard::before,
    .shopCard::before,
    .releaseCard::before,
    .homeCard::before,
    .studioCard::before,
    .labelCard::before,
    .contentCard::before,
    .card::before{
        left:-1px;
        width:32px;
    }
}

/* =========================================================
   END DARKER BLACK METAL / ASH + OXIDE PASS
   ========================================================= */

/* =========================================================
   FINAL DETAIL PASS — RED REGISTRATION MARKS + COLD ASH
   STYLE ONLY / CONTENT UNCHANGED
   ========================================================= */
:root{
    --cold-ash:#56616a;
    --cold-ash-dim:#30383e;
    --oxide:#751b17;
}

/* section headings: the same small blood-red mark, flush left */
.head{
    position:relative;
    gap:20px;
    padding-left:0;
}

.head::before{
    content:"";
    flex:0 0 34px;
    width:34px;
    height:1px;
    background:linear-gradient(90deg,var(--oxide),rgba(117,27,23,.25));
    box-shadow:0 0 7px rgba(117,27,23,.12);
}

/* keep the long rule visually continuous after the heading */
.head i{
    background:linear-gradient(90deg,#272522,#111312);
}

/* every homepage content frame gets the same flush-left blood mark */
.grid .card,
.artists .artistCard,
.mediaGrid .mediaCard,
.mediaStack .mediaCard,
#about .manifest,
#shop .shopBanner,
#studios .studioLabelBlock,
#shows .labelShow,
.shopCard,
.releaseCard,
.homeCard,
.studioCard,
.labelCard,
.contentCard{
    position:relative;
}

.grid .card::before,
.artists .artistCard::before,
.mediaGrid .mediaCard::before,
.mediaStack .mediaCard::before,
#about .manifest::before,
#shop .shopBanner::before,
#studios .studioLabelBlock::before,
#shows .labelShow::before,
.shopCard::before,
.releaseCard::before,
.homeCard::before,
.studioCard::before,
.labelCard::before,
.contentCard::before{
    content:"";
    position:absolute;
    left:-1px;
    top:-1px;
    width:42px;
    height:1px;
    background:linear-gradient(90deg,var(--oxide) 0 72%,transparent 100%);
    box-shadow:0 0 8px rgba(117,27,23,.14);
    z-index:10;
    pointer-events:none;
}

/* release-page cards too */
.releaseItem{
    position:relative;
}
.releaseItem::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:42px;
    height:1px;
    background:linear-gradient(90deg,var(--oxide) 0 72%,transparent 100%);
    z-index:4;
    pointer-events:none;
}

/* colder second ink — distinct from the existing red and bone tones */
.by,
.meta,
.pageIntro p,
.releaseInfo p,
.artistText p,
.mediaText small,
.shopProductMeta,
.trackLabel{
    color:var(--cold-ash);
}

.head a,
.price,
.releaseLinks a,
.arrow{
    color:#747f87;
}

/* stronger physical grain / paper dust, still static */
body::before{
    opacity:.34;
    background:
        radial-gradient(circle at 11% 17%,rgba(255,255,255,.070) 0 1px,transparent 1.5px),
        radial-gradient(circle at 73% 61%,rgba(255,255,255,.050) 0 1px,transparent 1.4px),
        radial-gradient(circle at 39% 83%,rgba(255,255,255,.045) 0 1px,transparent 1.5px),
        radial-gradient(circle at 87% 29%,rgba(86,97,106,.045) 0 1px,transparent 1.6px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.020) 0 1px,transparent 1px 4px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.007) 0 1px,transparent 1px 8px),
        radial-gradient(ellipse at 50% 35%,transparent 18%,rgba(0,0,0,.22) 100%);
    background-size:17px 17px,23px 23px,29px 29px,31px 31px,100% 4px,8px 100%,100% 100%;
    mix-blend-mode:screen;
}

/* a little more worn / mineral texture inside the frames */
.artistCard,
.mediaCard,
.grid .card,
#about .manifest,
#shop .shopBanner,
#studios .studioLabelBlock,
#shows .labelShow{
    background-image:
        radial-gradient(circle at 18% 28%,rgba(255,255,255,.018) 0 1px,transparent 1.4px),
        radial-gradient(circle at 81% 71%,rgba(86,97,106,.020) 0 1px,transparent 1.5px),
        linear-gradient(135deg,rgba(86,97,106,.018),transparent 48%);
    background-size:19px 19px,27px 27px,100% 100%;
}

@media(max-width:650px){
    .head{gap:13px;}
    .head::before{flex-basis:26px;width:26px;}
    .grid .card::before,
    .artists .artistCard::before,
    .mediaGrid .mediaCard::before,
    .mediaStack .mediaCard::before,
    #about .manifest::before,
    #shop .shopBanner::before,
    #studios .studioLabelBlock::before,
    #shows .labelShow::before,
    .releaseItem::before{
        width:30px;
    }
}

/* =========================================================
   END FINAL DETAIL PASS
   ========================================================= */

/* =========================================================
   UCDEATH — FINAL BLACK METAL DETAIL PASS
   STYLE ONLY — CONTENT UNCHANGED
   ========================================================= */

/* Section title bars: every section gets the same flush-left oxide mark,
   including SHOP / LABEL / STUDIO where the mark could disappear. */
.head{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
    margin-bottom:28px!important;
}
.head::before{
    content:""!important;
    display:block!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:1px!important;
    margin:0!important;
    background:linear-gradient(90deg,#8b211b 0 82%,rgba(139,33,27,0) 100%)!important;
    box-shadow:0 0 8px rgba(139,33,27,.12)!important;
}
.head h2{
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.28em!important;
    color:#d0ccc4!important;
    text-shadow:0 1px 0 #000!important;
}
.head i{
    height:1px!important;
    background:linear-gradient(90deg,#302e2a,#171918)!important;
}
.head a{
    font-size:9px!important;
    letter-spacing:.16em!important;
    color:#777d7d!important;
}

/* Same left registration mark on every actual content frame. */
.grid .card::before,
.artists .artistCard::before,
.mediaGrid .mediaCard::before,
.mediaStack .mediaCard::before,
#about .manifest::before,
#shop .shopBanner::before,
#studios .studioLabelBlock::before,
#shows .labelShow::before,
.shopCard::before,
.releaseCard::before,
.homeCard::before,
.studioCard::before,
.labelCard::before,
.contentCard::before,
.releaseItem::before{
    left:0!important;
    top:0!important;
    width:44px!important;
    height:1px!important;
    background:linear-gradient(90deg,#8b211b 0 78%,rgba(139,33,27,0) 100%)!important;
    box-shadow:0 0 8px rgba(139,33,27,.12)!important;
}

/* Black-metal video controls: angular, dark and restrained instead of the
   generic red circular YouTube button. */
.ucdYoutubePlayer .modernPlay{
    width:62px!important;
    height:48px!important;
    border-radius:0!important;
    background:rgba(5,6,6,.92)!important;
    border:1px solid #7d211c!important;
    border-left:3px solid #8b211b!important;
    box-shadow:0 8px 28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.035)!important;
    transform:translate(-50%,-50%)!important;
}
.ucdYoutubePlayer:hover .modernPlay{
    background:rgba(18,19,18,.96)!important;
    border-color:#a02a23!important;
    transform:translate(-50%,-50%)!important;
}
.ucdYoutubePlayer .modernPlay span{
    margin-left:3px!important;
    color:#ddd8d0!important;
    font-size:15px!important;
    line-height:1!important;
    text-shadow:0 1px 2px #000!important;
}

/* Stronger static grain / print dust. */
body::before{
    opacity:.48!important;
    background:
        radial-gradient(circle at 7% 13%,rgba(255,255,255,.085) 0 1px,transparent 1.35px),
        radial-gradient(circle at 22% 77%,rgba(255,255,255,.065) 0 1px,transparent 1.25px),
        radial-gradient(circle at 48% 31%,rgba(255,255,255,.055) 0 1px,transparent 1.3px),
        radial-gradient(circle at 71% 66%,rgba(255,255,255,.065) 0 1px,transparent 1.3px),
        radial-gradient(circle at 91% 22%,rgba(86,97,106,.07) 0 1px,transparent 1.5px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.009) 0 1px,transparent 1px 7px),
        radial-gradient(ellipse at 50% 40%,transparent 12%,rgba(0,0,0,.28) 100%)!important;
    background-size:13px 13px,19px 19px,23px 23px,29px 29px,31px 31px,100% 3px,7px 100%,100% 100%!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
}

/* Slightly larger, more readable card titles without changing content. */
.artistText h3,
.mediaText strong,
.releaseInfo h2,
.title,
.shopBanner strong{
    color:#d5d0c7!important;
}
.mediaText strong{font-size:11px!important;letter-spacing:.1em!important;}
.artistText h3{font-size:16px!important;}
.releaseInfo h2{font-size:15px!important;}

@media(max-width:650px){
    .head{gap:12px!important;}
    .head::before{flex-basis:28px!important;width:28px!important;}
    .head h2{font-size:10px!important;letter-spacing:.24em!important;}
    .head a{font-size:8px!important;}
    .grid .card::before,
    .artists .artistCard::before,
    .mediaGrid .mediaCard::before,
    .mediaStack .mediaCard::before,
    #about .manifest::before,
    #shop .shopBanner::before,
    #studios .studioLabelBlock::before,
    #shows .labelShow::before,
    .shopCard::before,
    .releaseCard::before,
    .homeCard::before,
    .studioCard::before,
    .labelCard::before,
    .contentCard::before,
    .releaseItem::before{width:32px!important;}
}

/* =========================================================
   END FINAL BLACK METAL DETAIL PASS
   ========================================================= */

/* =========================================================
   UCDEATH — RED MARKS ONLY ON SECTION TITLES
   ========================================================= */

/* Remove registration marks from every content/card frame. */
.grid .card::before,
.artists .artistCard::before,
.mediaGrid .mediaCard::before,
.mediaStack .mediaCard::before,
#about .manifest::before,
#shop .shopBanner::before,
#studios .studioLabelBlock::before,
#shows .labelShow::before,
.shopCard::before,
.releaseCard::before,
.homeCard::before,
.studioCard::before,
.labelCard::before,
.contentCard::before,
.releaseItem::before,
.card::before,
.artistCard::before,
.mediaCard::before{
    display:none!important;
    content:none!important;
}

/* Keep the small oxide/red line exclusively as part of section titles. */
.head::before{
    display:block!important;
    content:""!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:1px!important;
    margin:0!important;
    background:#8b211b!important;
    box-shadow:none!important;
}

@media(max-width:650px){
    .head::before{
        flex-basis:28px!important;
        width:28px!important;
    }
}

/* =========================================================
   END — TITLE MARKS ONLY
   ========================================================= */


/* =========================================================
   UCDEATH — OMNIKOLOSS-INSPIRED VISUAL SYSTEM
   Background, typography and restrained red editorial accents.
   ========================================================= */

:root{
  --bg:#050505;
  --text:#e8e3d9;
  --muted:#aaa49b;
  --line:#282521;
  --red:#861313;
  --red-soft:#a5161c;
  --max:1460px;
}
html{scroll-behavior:smooth;background:#030303}
body:not(.artistStandalone){
  background-color:#030303!important;
  background-image:linear-gradient(rgba(3,3,3,.70),rgba(3,3,3,.78)),url("images/background.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
  color:var(--text)!important;
  font-family:"Space Grotesk",Arial,Helvetica,sans-serif!important;
  letter-spacing:.035em!important;
}
body:not(.artistStandalone) .eyebrow,
body:not(.artistStandalone) .out,
body:not(.artistStandalone) .code,
body:not(.artistStandalone) .meta,
body:not(.artistStandalone) .small,
body:not(.artistStandalone) .head h2,
body:not(.artistStandalone) .price,
body:not(.artistStandalone) .by,
body:not(.artistStandalone) .coverLabel,
body:not(.artistStandalone) .shopBtn,
body:not(.artistStandalone) .btn{
  font-family:"IBM Plex Mono",monospace!important;
}
body:not(.artistStandalone) .head h2{
  font-size:10px!important;
  letter-spacing:.24em!important;
  color:#e8e3d9!important;
}
body:not(.artistStandalone) .head i{background:linear-gradient(90deg,#302e2a,#171717)!important}
body:not(.artistStandalone) .head::before{background:#861313!important;box-shadow:none!important}
body:not(.artistStandalone) .eyebrow,
body:not(.artistStandalone) .out,
body:not(.artistStandalone) .code{color:#a5161c!important}
body:not(.artistStandalone) .heroInfo h1,
body:not(.artistStandalone) .pageIntro h1,
body:not(.artistStandalone) .releaseInfo h2,
body:not(.artistStandalone) .title,
body:not(.artistStandalone) .artistText h3,
body:not(.artistStandalone) .mediaText strong,
body:not(.artistStandalone) .shopBody h3{
  font-family:"Space Grotesk",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
}
body:not(.artistStandalone) .heroInfo h1,
body:not(.artistStandalone) .releaseInfo h2,
body:not(.artistStandalone) .title{color:#e8e3d9!important}
body:not(.artistStandalone) .card,
body:not(.artistStandalone) .artistCard,
body:not(.artistStandalone) .mediaCard,
body:not(.artistStandalone) .labelStyleCard,
body:not(.artistStandalone) .studioLabelBlock,
body:not(.artistStandalone) .shopCard,
body:not(.artistStandalone) .labelShow,
body:not(.artistStandalone) .releaseItem{
  border-color:rgba(180,170,155,.20)!important;
}
body:not(.artistStandalone) .siteHeader,
body:not(.artistStandalone) header{
  background:rgba(3,3,3,.94)!important;
  border-bottom-color:rgba(180,170,155,.18)!important;
  backdrop-filter:blur(14px)!important;
}
body:not(.artistStandalone) footer{background:rgba(3,3,3,.96)!important}
body:not(.artistStandalone) .shopImageSlot{background:#111!important}
body:not(.artistStandalone) .shopImageSlot img{filter:brightness(1.16) contrast(1.04)!important}
body:not(.artistStandalone) .shopBody p,
body:not(.artistStandalone) .text,
body:not(.artistStandalone) .releaseInfo p,
body:not(.artistStandalone) .artistText p{color:#aaa49b!important}
@media(max-width:700px){
  body:not(.artistStandalone){background-attachment:scroll!important;background-position:center top!important}
}


/* New release: readable editorial panel over the dark city background */
body:not(.artistStandalone){
  background-image:linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.86)),url("images/background.webp")!important;
  background-size:cover!important;background-position:center center!important;
  background-repeat:no-repeat!important;background-attachment:fixed!important;
}
.heroGrid{
  grid-template-columns:minmax(280px,300px) minmax(280px,.9fr) minmax(360px,1.1fr)!important;
  gap:clamp(18px,2vw,30px)!important;align-items:center!important;
}
.heroInfo{
  min-width:0!important;padding:clamp(20px,2.2vw,32px)!important;
  background:rgba(0,0,0,.84)!important;border:1px solid rgba(232,227,217,.13)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.38)!important;backdrop-filter:blur(5px);
}
.heroInfo h1{
  max-width:none!important;font-size:clamp(27px,2.35vw,38px)!important;line-height:1.03!important;
  letter-spacing:.025em!important;color:#f1eee8!important;overflow-wrap:anywhere;
}
.heroInfo .out{color:#d06a61!important;font-size:10px!important;letter-spacing:.19em!important}
.heroInfo .artist{color:#d0c9bf!important;font-size:12px!important}
.heroInfo .meta{color:#c0b9af!important;font-size:10px!important;line-height:1.8!important}
.releaseDescription{
  color:#e0dbd2!important;font-size:13px!important;line-height:1.75!important;letter-spacing:.005em!important;
  margin:20px 0 24px!important;text-shadow:0 1px 8px rgba(0,0,0,.65);
}
.releaseDescription p{margin:0 0 13px!important;color:#d9d4cb!important}
.releaseDescription p:last-child{margin-bottom:0!important}
.releaseDescription strong{color:#fff!important;font-weight:700!important}
.heroInfo .buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.heroInfo .btn{align-items:center;gap:12px;min-width:0;font-size:9px!important;line-height:1.4!important}
.heroInfo .btn.primary{background:#571511!important;border-color:#7b211b!important}
#shop .shopImageSlot img{filter:brightness(1.28) contrast(1.06)!important}
#shop .shopImageSlot{background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 60%),#111!important}
@media(max-width:1100px){
  .heroGrid{grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important;align-items:start!important}
  .heroInfo{grid-column:2!important}.heroCover{grid-column:2!important}
}
@media(max-width:650px){
  .heroGrid{display:block!important}
  .heroInfo{margin-top:18px!important;padding:22px 18px!important;text-align:left!important}
  .heroInfo h1{font-size:clamp(25px,7vw,34px)!important}
  .releaseDescription{font-size:13px!important;line-height:1.72!important}
  .heroInfo .buttons{grid-template-columns:1fr!important}
  .heroInfo .red{width:100%!important}
}


/* Final homepage refinements: larger label mark, readable CTAs and release links. */
@media(min-width:1101px){
  .desktopIdentityLogo img{width:340px!important;max-width:100%!important}
  .identity{padding-right:18px!important}
}
.heroInfo .buttons{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.heroInfo .btn{padding:13px 10px!important;font-size:8px!important;letter-spacing:.06em!important}
.releaseArtistLink{color:#d0c9bf!important;text-decoration:underline;text-decoration-color:#861313;text-underline-offset:3px}
.releaseArtistLink:hover{color:#fff!important}
#releases .card .by{line-height:1.7!important}
@media(max-width:1100px){
  .heroGrid{grid-template-columns:minmax(180px,220px) minmax(0,1fr)!important}
  .heroInfo .buttons{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:650px){
  .heroInfo .buttons{grid-template-columns:1fr!important}
}


/* Global background dimmer: darken the body artwork itself, not the release banner. */
body:not(.artistStandalone){
  background-color:#030303!important;
  background-image:none!important;
  background-attachment:initial!important;
}
body::before{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.80)),url("images/background.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
body > main, body > section, body > footer{position:relative!important;z-index:1!important}
body > header{position:relative;z-index:10!important}
body > footer{z-index:2!important}
.labelShowFeature .showLinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.labelShowFeature .showLinks a{font-size:9px;letter-spacing:.08em;color:#c9c1b7;text-decoration:none;border-bottom:1px solid rgba(166,22,28,.75);padding-bottom:3px}
.labelShowFeature .showLinks a:hover{color:#fff;border-color:#d13a3a}
.labelShowFeature .labelShowInfo em{opacity:.78}
@media(max-width:700px){
  .labelShowFeature .showLinks{gap:10px 14px}
  .labelShowFeature .showLinks a{font-size:9px}
}


/* Footer identity mark: compact, balanced with the footer columns. */
footer#siteFooter .footer-ucd-logo{
  display:block!important;
  width:clamp(88px, 8vw, 118px)!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 0 14px!important;
}
@media(max-width:650px){
  footer#siteFooter .footer-ucd-logo{
    width:108px!important;
    margin:0 auto 14px!important;
  }
}

/* Quantum Fleshdrive: red editorial emphasis */
.heroInfo h1 .quantum-red{color:#d32b25!important;}
.releaseDescription .quantum-red-copy strong{color:#e3342c!important;}


/* Footer layout: bottom navigation aligned with Est. MMXI; social/news columns remain stacked. */
footer#siteFooter .foot{
  display:grid!important;
  grid-template-columns:minmax(190px,1.1fr) minmax(380px,2fr) minmax(130px,.8fr) minmax(140px,.8fr)!important;
  column-gap:clamp(18px,2.4vw,38px)!important;
  align-items:end!important;
}
footer#siteFooter .foot > div{min-width:0!important;align-self:end!important;}
footer#siteFooter .foot > div:first-child > p{margin:0!important;}
footer#siteFooter .foot > div:nth-child(2){align-self:end!important;}
footer#siteFooter .foot > div:nth-child(2) p{
  display:flex!important;flex-wrap:wrap!important;gap:8px clamp(12px,1.6vw,24px)!important;
  align-items:center!important;justify-content:flex-start!important;margin:0!important;padding:0!important;
}
footer#siteFooter .foot > div:nth-child(2) p a{white-space:nowrap!important;}
footer#siteFooter .foot > div:nth-child(3) p,
footer#siteFooter .foot > div:nth-child(4) p{line-height:1.9!important;margin:0!important;padding:0!important;}
footer#siteFooter .foot > div:nth-child(3) p{display:flex!important;flex-direction:column!important;}
footer#siteFooter .foot > div:nth-child(4) p{display:flex!important;flex-direction:column!important;}
@media(max-width:950px){
  footer#siteFooter .foot{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:26px!important;align-items:start!important;}
  footer#siteFooter .foot > div{align-self:start!important;}
  footer#siteFooter .foot > div:first-child > p{margin:0!important;}
  footer#siteFooter .foot > div:nth-child(2) p{gap:8px 14px!important;}
}
@media(max-width:560px){
  footer#siteFooter .foot{grid-template-columns:1fr!important;row-gap:22px!important;text-align:left!important;}
  footer#siteFooter .foot > div:nth-child(2) p{justify-content:flex-start!important;}
  footer#siteFooter .footer-ucd-logo{margin-left:0!important;}
}


/* FOOTER — centered identity only */
footer#siteFooter.footerIdentityOnly{
  width:100%!important; box-sizing:border-box!important;
  padding:42px 20px 38px!important; margin:0!important;
  background:rgba(3,3,3,.97)!important; border-top:1px solid rgba(170,25,30,.35)!important;
  text-align:center!important;
}
footer#siteFooter.footerIdentityOnly > .w{
  width:100%!important; max-width:1200px!important; margin:0 auto!important; padding:0!important;
}
footer#siteFooter.footerIdentityOnly .footerIdentity{
  display:flex!important; flex-direction:column!important; align-items:center!important;
  justify-content:center!important; text-align:center!important; gap:0!important; margin:0 auto!important;
}
footer#siteFooter.footerIdentityOnly .footer-ucd-logo{
  display:block!important; width:clamp(78px,7vw,100px)!important; height:auto!important;
  max-width:100%!important; object-fit:contain!important; margin:0 auto 16px!important;
}
footer#siteFooter.footerIdentityOnly .footerIdentity p{
  margin:0!important; padding:0!important; color:#d0cbc4!important;
  font-size:12px!important; line-height:1.9!important; letter-spacing:.09em!important;
}
footer#siteFooter.footerIdentityOnly .footerEst{color:#8d8780!important; font-size:10px!important; letter-spacing:.18em!important;}
footer#siteFooter.footerIdentityOnly .foot,
footer#siteFooter.footerIdentityOnly .bottom{display:none!important;}

/* Artist background dimming overlay: global veil with stronger darkness for Crypt Vapor. */
html body.artistStandalone .ucdArtistPageBackground::after{
  content:""!important; position:absolute!important; inset:0!important; display:block!important;
  background:rgba(0,0,0,.30)!important; pointer-events:none!important; z-index:1!important;
}
html body.artistStandalone .ucdArtistPageBackground--omnikoloss::after{
  background:rgba(0,0,0,.62)!important;
}
html body.artistStandalone .ucdArtistPageBackground--crypt-vapor::after{
  background:rgba(0,0,0,.76)!important;
}


/* Artist eyebrow: compact matching band photo to the right of the artist label. */
html body.artistStandalone .artistEyebrowRow{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:18px!important; width:100%!important; max-width:560px!important; margin:0 0 8px!important;
}
html body.artistStandalone .artistEyebrowRow .eyebrow{
  min-width:0!important; line-height:1.65!important; flex:1 1 auto!important;
}
html body.artistStandalone .artistBandThumb{
  display:block!important; width:clamp(88px,12vw,142px)!important; height:58px!important;
  flex:0 0 auto!important; object-fit:cover!important; object-position:center 38%!important;
  border:1px solid rgba(255,255,255,.22)!important; filter:grayscale(100%) contrast(1.08) brightness(.86)!important;
}
/* Footer legal strip: keep the fine divider above the copyright and legal links. */
footer#siteFooter.footerIdentityOnly .footerLegalLine{
  width:100%!important; max-width:1200px!important; box-sizing:border-box!important;
  margin:28px auto 0!important; padding:18px 12px 0!important;
  border-top:1px solid rgba(170,25,30,.35)!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  flex-wrap:wrap!important; gap:8px 14px!important;
  color:#8d8780!important; font-size:10px!important; line-height:1.8!important;
  letter-spacing:.07em!important; text-align:center!important;
}
footer#siteFooter.footerIdentityOnly .footerLegalLinks{display:inline-flex!important;align-items:center!important;gap:9px!important;}
footer#siteFooter.footerIdentityOnly .footerLegalLinks a{color:#aaa49b!important;text-decoration:none!important;}
footer#siteFooter.footerIdentityOnly .footerLegalLinks a:hover{color:#c21f26!important;}
@media(max-width:560px){
 html body.artistStandalone .artistEyebrowRow{gap:10px!important;align-items:flex-start!important;}
 html body.artistStandalone .artistBandThumb{width:82px!important;height:48px!important;}
 footer#siteFooter.footerIdentityOnly .footerLegalLine{margin-top:22px!important;padding-top:14px!important;}
}


/* Artist hero: full-size band image in the right-hand panel. */
html body.artistStandalone .artistStandaloneHero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;align-items:stretch!important;overflow:hidden!important;}
html body.artistStandalone .artistStandaloneHero .artistStandaloneImage{display:block!important;min-width:0!important;min-height:100%!important;height:auto!important;position:relative!important;overflow:hidden!important;border-left:1px solid rgba(255,255,255,.12)!important;}
html body.artistStandalone .artistStandaloneHero .artistStandaloneImage img{display:block!important;width:100%!important;height:100%!important;min-height:600px!important;object-fit:cover!important;object-position:center!important;filter:grayscale(100%) brightness(.72) contrast(1.06)!important;}
html body.artistStandalone .artistEyebrowRow{display:block!important;width:100%!important;max-width:none!important;margin:0 0 8px!important;}
html body.artistStandalone .artistEyebrowRow .eyebrow{max-width:100%!important;}
footer#siteFooter.footerIdentityOnly{border-top:1px solid rgba(255,255,255,.12)!important;}
footer#siteFooter.footerIdentityOnly .footerLegalLine{border-top:1px solid rgba(255,255,255,.12)!important;}
@media(max-width:800px){
 html body.artistStandalone .artistStandaloneHero{grid-template-columns:1fr!important;}
 html body.artistStandalone .artistStandaloneHero .artistStandaloneImage{min-height:320px!important;height:320px!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.12)!important;}
 html body.artistStandalone .artistStandaloneHero .artistStandaloneImage img{min-height:320px!important;height:320px!important;}
}


/* Accent links and key label words: use the same restrained red as the section rules. */
:root{--ucd-accent-red:#a6161c;}
.extreme-red,.ucdeath-red{color:var(--ucd-accent-red)!important;}
/* Keep editorial links visibly accented without turning body copy red. */
.labelStyleBody a, .labelStyleVisual a, .shopBody a, .shopBtn, .releaseViewBtn,
.artistStandaloneLinks a, .releaseLinks a, .labelShowFeature .showLinks a,
.labelShowInfo a, .footerLegalLinks a, .artistStandaloneSection a,
#shop .head>a, #studios .head>a, #about .head>a{color:var(--ucd-accent-red)!important;}
.labelStyleBody a:hover, .shopBtn:hover, .releaseViewBtn:hover,
.artistStandaloneLinks a:hover, .releaseLinks a:hover, .artistStandaloneSection a:hover,
#shop .head>a:hover, #studios .head>a:hover, #about .head>a:hover{color:#f05a5f!important;}
/* Highlight the day number in every show date. */
.labelShowDate strong{color:var(--ucd-accent-red)!important;}
/* Artist-page label eyebrow and primary external links use the same accent red. */
html body.artistStandalone .artistEyebrowRow .eyebrow{color:var(--ucd-accent-red)!important;}
html body.artistStandalone .artistStandaloneLinks a.primary{background:var(--ucd-accent-red)!important;border-color:var(--ucd-accent-red)!important;color:#fff!important;}


/* FINAL ACCENT PASS — restrained oxide red, matching the For Victory links. */
:root{--red:#a6161c!important;--ucd-accent-red:#a6161c!important;}
/* Release-card actions (Bandcamp / Shop) are red text, not red underlines alone. */
#releases .card .price,
.releasePageGrid .releaseItem .releaseViewBtn,
.releaseLinks a{color:#a6161c!important;text-decoration:none!important;border-bottom:0!important;}
#releases .card .price:hover,
.releasePageGrid .releaseItem .releaseViewBtn:hover,
.releaseLinks a:hover{color:#c13a3e!important;}
/* Artist cards: red ARTIST PAGE label, with no underline or decorative bottom rule. */
#artists .artistCard .arrow,
.artists .artistCard .arrow{color:#a6161c!important;text-decoration:none!important;border:0!important;border-bottom:0!important;box-shadow:none!important;}
#artists .artistCard,
.artists .artistCard{text-decoration:none!important;}
/* About / Shop calls to action: dark outlined buttons, never a solid red block. */
.shopBtn,
.labelStyleBody .shopBtn,
.shopBody .shopBtn,
#about .shopBtn,
#shop .shopBtn{display:inline-block!important;background:transparent!important;background-color:transparent!important;color:#a6161c!important;border:1px solid #252421!important;box-shadow:none!important;text-decoration:none!important;}
.shopBtn:hover,
.labelStyleBody .shopBtn:hover,
.shopBody .shopBtn:hover,
#about .shopBtn:hover,
#shop .shopBtn:hover{background:rgba(166,22,28,.10)!important;background-color:rgba(166,22,28,.10)!important;color:#c13a3e!important;border-color:#a6161c!important;}
/* Other key links use the same dark red without default underlines. */
.labelStyleBody a,
.labelStyleVisual a,
.shopBody a,
.artistStandaloneLinks a,
.releaseLinks a,
.labelShowFeature .showLinks a,
.labelShowInfo a,
.footerLegalLinks a,
.artistStandaloneSection a,
#shop .head>a,
#studios .head>a,
#about .head>a{color:#a6161c!important;text-decoration:none!important;}
.labelStyleBody a:hover,
.labelStyleVisual a:hover,
.shopBody a:hover,
.artistStandaloneLinks a:hover,
.releaseLinks a:hover,
.artistStandaloneSection a:hover,
#shop .head>a:hover,
#studios .head>a:hover,
#about .head>a:hover{color:#c13a3e!important;}


/* Performance and interaction refinements */
.labelShowFeature[data-ticket-url]{cursor:pointer;transition:background-color .2s ease, border-color .2s ease;}
.labelShowFeature[data-ticket-url]:hover{background-color:rgba(255,255,255,.025);}
.labelShowFeature[data-ticket-url]:focus-visible{outline:1px solid var(--ucd-accent-red,#a6161c);outline-offset:3px;}
.labelShowFeature .showLinks a{border-bottom:0!important;text-decoration:none!important;padding-bottom:0!important;}
.labelShowFeature .showLinks a:hover{border-bottom:0!important;text-decoration:none!important;color:#eee!important;}
.artistStandaloneCopy h1{font-size:clamp(38px,5.2vw,78px)!important;line-height:.9!important;letter-spacing:-.06em!important;overflow-wrap:anywhere;hyphens:auto;}
@media(max-width:700px){.artistStandaloneCopy h1{font-size:clamp(36px,9vw,60px)!important;}}
.studio-extreme-white{color:#e9e6df!important;}
.studioLabelVisual h3 .extreme-red,.studioHeroNew h1 .extreme-red{color:var(--ucd-accent-red,#a6161c)!important;}


/* Legal documents: centered, readable layout with subtle section dividers. */
html body.internalPage .legalPage.legalDocument{
  width:min(100%, 920px)!important; max-width:920px!important; margin:0 auto!important;
  text-align:center!important; padding:0 20px 70px!important; box-sizing:border-box!important;
}
html body.internalPage .legalPage.legalDocument h1{
  text-align:center!important; margin:0 auto 42px!important;
}
html body.internalPage .legalDocumentContent{width:100%!important; margin:0 auto!important; text-align:center!important;}
html body.internalPage .legalDocumentContent h2{
  margin:42px auto 18px!important; padding:0 0 16px!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  color:#eee8df!important; text-align:center!important; font-size:14px!important;
}
html body.internalPage .legalDocumentContent h3{
  margin:28px auto 12px!important; color:#c21f26!important; text-align:center!important;
  font-size:11px!important; font-weight:600!important; letter-spacing:.11em!important; text-transform:uppercase!important;
}
html body.internalPage .legalDocumentContent p{
  max-width:780px!important; margin:0 auto 20px!important; padding:0 0 18px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  color:#aaa49b!important; font-size:13px!important; line-height:1.9!important;
  text-align:center!important; overflow-wrap:anywhere!important;
}
html body.internalPage .legalDocumentContent ul{
  width:fit-content!important; max-width:100%!important; margin:0 auto 22px!important; padding:0 0 18px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important; color:#aaa49b!important; text-align:left!important;
}
html body.internalPage .legalDocumentContent li{padding:3px 0!important; font-size:13px!important; line-height:1.8!important;}
html body.internalPage .legalDocumentContent a{color:#a6161c!important; text-decoration:none!important; border-bottom:1px solid rgba(166,22,28,.45)!important;}
html body.internalPage .legalDocumentContent a:hover{color:#e2d8cf!important; border-bottom-color:#e2d8cf!important;}
@media(max-width:650px){
 html body.internalPage .legalPage.legalDocument{padding:0 8px 45px!important;}
 html body.internalPage .legalDocumentContent p{font-size:12px!important; line-height:1.8!important;}
}


/* Final spacing polish: release captions and show rows align comfortably inside their boxes. */
#releases .grid .card .ci{padding:12px 12px 13px!important;}
#shows .labelShow{padding-left:18px!important;padding-right:18px!important;}
#shows .labelShow:hover{padding-left:18px!important;padding-right:18px!important;}
@media(max-width:700px){
  #releases .grid .card .ci{padding:12px 11px 13px!important;}
  #shows .labelShow{padding-left:13px!important;padding-right:13px!important;}
  #shows .labelShow:hover{padding-left:13px!important;padding-right:13px!important;}
}