@font-face {font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-300.ttf') format('truetype');}
@font-face {font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.ttf') format('truetype');}
@font-face {font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.ttf') format('truetype');}
@font-face {font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.ttf') format('truetype');}
@font-face {font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.ttf') format('truetype');}
@font-face {font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.ttf') format('truetype');}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    isolation: isolate;
    background: #050505;
    color: #f5f5f5;
    font-family: 'Inter', Arial, sans-serif;
    overflow-x: hidden;
}


/* ------------------------------
   NOISE
------------------------------ */

/* One quiet, continuous star field behind all content below the hero. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(5, 5, 5, .22), rgba(5, 5, 5, .22)),
        url("../images/deep-space-v1.webp") center center / cover no-repeat;
}

main {
    background: linear-gradient(180deg, #050505 0, rgba(5, 5, 5, .65) 100px, transparent 320px);
}

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    z-index: 100;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ------------------------------
   HERO
------------------------------ */

.hero {
    isolation: isolate;
    background: #050505;
    height: 100vh;
    min-height: 700px;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: 0;
    pointer-events: none;
    filter: blur(2px);
    background:
        linear-gradient(180deg, rgba(5, 5, 5, .12) 0%, rgba(5, 5, 5, .10) 45%, rgba(5, 5, 5, .48) 100%),
        url("../images/space-background-v1.webp") center center / cover no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, #050505);
}

.hero-glow {
    position: absolute;
    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(255,255,255,0.04);

    filter: blur(100px);

    animation: glow 6s infinite alternate;
}

.hero-character {
    position: relative;
    z-index: 2;
    width: min(720px, 88vw);
    aspect-ratio: 1;
    animation: characterEnter 1.4s cubic-bezier(.16,1,.3,1) both,
        rocketBob 5.5s ease-in-out infinite;
    transform: translate3d(0, 0, 0);
    transition: transform .18s ease-out;
    will-change: transform;
}

.hero-character::before {
    content: "";
    position: absolute;
    left: 21%;
    top: 46%;
    width: 86%;
    height: 54%;
    border-radius: 50%;
    transform: rotate(35deg);
    background: radial-gradient(ellipse,
        rgba(255, 28, 12, .34) 0%,
        rgba(235, 12, 8, .24) 43%,
        rgba(205, 0, 8, .11) 65%,
        transparent 86%);
    filter: blur(22px);
    animation: rocketGlowPulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.cat-rocket {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 77, 0, .22)) drop-shadow(0 0 70px rgba(255, 60, 0, .10));
}

.character-animation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    /* Keep the live canvas free of per-frame blur passes. The static
       halo on .hero-character::before supplies the surrounding glow. */
    filter: none;
}

.hero-character.animation-ready .cat-rocket { visibility: hidden; }
.hero-character.animation-ready .character-animation { display: block; }

.logo-wrapper {
    position: relative;
    z-index: 2;

    width: min(420px, 65vw);

    animation: logoEnter 2s cubic-bezier(.16,1,.3,1);
}

.logo {
    width: 100%;
    display: block;

    filter:
        drop-shadow(0 0 15px rgba(255,255,255,.18))
        drop-shadow(0 0 60px rgba(255,255,255,.08));

    animation: logoFloat 7s infinite ease-in-out;
}

.brand {
    position: relative;
    z-index: 2;

    margin-top: 35px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}

.brand-name {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: 0.35em;
}

.brand-line {
    width: 60px;
    height: 1px;
    background: #fff;
    opacity: .6;
}

.brand-tagline {
    font-size: 10px;
    letter-spacing: .35em;
    opacity: .55;
}

.scroll-indicator {
    z-index: 2;
    position: absolute;
    bottom: 35px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    font-size: 9px;
    letter-spacing: .3em;

    opacity: .4;
}

.scroll-line {
    width: 1px;
    height: 45px;
    background: linear-gradient(
        to bottom,
        white,
        transparent
    );

    animation: scrollPulse 2s infinite;
}


/* ------------------------------
   SECTIONS
------------------------------ */

section {
    padding: 160px 8vw;
}

.section-label {
    font-size: 10px;
    letter-spacing: .35em;
    opacity: .4;
    margin-bottom: 60px;
}


/* ------------------------------
   INTRO
------------------------------ */

.intro {
    min-height: 90vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro h2 {
    font-size: clamp(55px, 9vw, 150px);
    line-height: .85;
    font-weight: 700;
    letter-spacing: -.06em;
}

.intro h2 span {
    opacity: .35;
}

.intro p {
    max-width: 550px;

    margin-top: 60px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255,255,255,.55);
}


/* ------------------------------
   RELEASE
------------------------------ */

.release-content {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(300px, 1fr);

    gap: 80px;

    align-items: center;
}

.release-placeholder {
    width: 80%;
    max-width: 400px;
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle at 40% 30%,
            rgba(255,255,255,.15),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #181818,
            #050505
        );

    border: 1px solid rgba(255,255,255,.1);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    letter-spacing: .3em;

    color: rgba(255,255,255,.4);
}

.release-type {
    font-size: 10px;
    letter-spacing: .3em;
    opacity: .4;
}

.release-info h2 {
    font-size: clamp(60px, 8vw, 130px);
    line-height: .8;

    margin: 25px 0 40px;

    letter-spacing: -.07em;
}

.release-info p {
    max-width: 450px;

    line-height: 1.7;

    color: rgba(255,255,255,.5);
}

.buttons {
    display: flex;
    gap: 15px;
    margin-top: 45px;
}

.button {
    padding: 15px 25px;

    border: 1px solid white;

    color: white;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: .2em;

    transition: .3s;
}

.button:hover {
    background: white;
    color: black;
}

.button-outline {
    border-color: rgba(255,255,255,.25);
    color: rgba(255,255,255,.6);
}


/* ------------------------------
   RELEASE GRID
------------------------------ */

.release-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}

.release-card {
    cursor: pointer;
}

.card-image {
    width: 80%;
    max-width: 300px;
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.15),
            transparent 40%
        ),
        #111;

    border: 1px solid rgba(255,255,255,.08);

    display: flex;
    align-items: flex-end;

    padding: 25px;

    transition: transform .5s ease;
}

.release-card:hover .card-image {
    transform: scale(.97);
}

.card-image span {
    font-size: 10px;
    letter-spacing: .2em;
    opacity: .4;
}

.release-card h3 {
    margin-top: 20px;

    font-size: 20px;
    letter-spacing: .05em;
}

.release-card p {
    margin-top: 7px;

    font-size: 9px;
    letter-spacing: .25em;

    opacity: .4;
}


/* ------------------------------
   ABOUT
------------------------------ */

.about {
    min-height: 0;
    height: auto;
}

.about-content {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 100px;
}

.about-title h2 {
    font-size: clamp(50px, 7vw, 110px);

    line-height: .85;

    letter-spacing: -.06em;
}

.about-text {
    max-width: 550px;

    font-size: 20px;
    line-height: 1.7;

    color: rgba(255,255,255,.55);
}

.about-portrait {
    width: 100%;
    max-width: 400px;
    margin-top: 32px;
}
.about-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
}
.about-portrait figcaption {
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: .12em;
    line-height: 1.7;
    color: #aeb4c0;
}
@media (max-width: 800px) {
    .about-portrait { max-width: 340px; margin-top: 24px; }
}
.about-text p + p {
    margin-top: 40px;
}


/* ------------------------------
   FOOTER
------------------------------ */

footer {
    padding: 100px 8vw 40px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.footer-logo {
    width: 64px;
}

.footer-logo img {
    width: 100%;
}

.footer-brand {
    margin-top: 30px;

    font-size: 12px;
    letter-spacing: .3em;
}

.footer-bottom {
    margin-top: 100px;

    display: flex;
    justify-content: space-between;

    font-size: 9px;
    letter-spacing: .2em;

    opacity: .3;
}


/* ------------------------------
   ANIMATIONS
------------------------------ */

@keyframes characterEnter {

    from {
        opacity: 0;
        transform: translateY(28px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes rocketBob {
    0%, 100% { translate: 0 -5px; }
    50% { translate: 0 5px; }
}

@keyframes rocketGlowPulse {
    0%, 100% { opacity: .82; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-character::before {
        animation: none;
        opacity: .9;
    }
    .hero-character {
        animation: none;
        translate: 0 0;
        transform: none;
    }
}

@keyframes logoEnter {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes logoFloat {

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

    50% {
        transform: translateY(-10px);
    }

}

@keyframes pulse {

    0%,100% {
        transform: scale(.9);
        opacity: .5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

}

@keyframes glow {

    from {
        transform: scale(.8);
        opacity: .3;
    }

    to {
        transform: scale(1.3);
        opacity: .7;
    }

}

@keyframes scrollPulse {

    0%,100% {
        opacity: .2;
        transform: scaleY(.7);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

}


/* ------------------------------
   MOBILE
------------------------------ */

@media (max-width: 800px) {
    .hero::before {
        background-position: center center, 62% center;
    }

    .hero {
        min-height: 620px;
    }

    .hero-character {
        width: min(620px, 108vw);
        margin-top: -15px;
    }

    section {
        padding: 110px 7vw;
    }

    .release-content,
    .about-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

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

    .intro h2 {
        font-size: 18vw;
    }

    .release-info h2 {
        font-size: 18vw;
    }

    .buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

}

/* Split hero: useful destinations flank the character without covering it. */
.hero { min-height: 800px; }
.hero-topbar {
    position: absolute; inset: 32px 5vw auto; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.site-brand { display: flex; align-items: center; gap: 22px; color: inherit; text-decoration: none; }
.site-brand img { width: 54px; height: 64px; object-fit: contain; }
.site-brand span { font-size: 12px; letter-spacing: .34em; }
.hero-nav { display: flex; gap: clamp(18px, 2.5vw, 42px); }
.hero-nav a, .hero-about-link { color: #e9e9e9; text-decoration: none; font-size: 10px; letter-spacing: .22em; }
.hero-nav a { padding: 14px 0; border-bottom: 1px solid transparent; }
.hero-nav a:hover { border-color: #f06a54; color: #fff; }
.hero .hero-character {
    position: absolute; width: min(760px, 56vw);
    left: 50%; top: 50%;
    margin-left: calc(-1 * min(380px, 28vw));
    margin-top: calc(-1 * min(380px, 28vw));
}
.hero-left { position: absolute; left: 5vw; top: 24%; width: 25vw; max-width: 370px; z-index: 3; }
.hero-eyebrow { font-size: 9px; letter-spacing: .28em; color: #ccc; line-height: 1.8; }
.hero-title { margin: 22px 0; font-size: clamp(32px, 3.6vw, 64px); font-weight: 300; line-height: 1.2; letter-spacing: .14em; }
.hero-title span { color: #aaa; }
.hero-description { font-size: 10px; letter-spacing: .17em; line-height: 2.2; color: #bbb; }
.hero-explore { display: inline-flex; align-items: center; gap: 14px; margin-top: 27px; padding: 6px 0; color: #eee; text-decoration: none; font-size: 9px; letter-spacing: .17em; }
.hero-explore > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff50; border-radius: 50%; font-size: 23px; }
.hero-release-card { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 15px; background: #06080cb8; border: 1px solid #ffffff26; color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.hero-release-card:hover { border-color: #ed6a5480; background: #1c1012dc; }
.hero-release-art { display: grid; place-items: center; flex: 0 0 62px; height: 72px; background: radial-gradient(ellipse at bottom, #91392a, #111923 65%); font-size: 18px; letter-spacing: -.08em; }
.hero-release-copy { display: flex; flex-direction: column; gap: 9px; }
.hero-release-copy small { font-size: 8px; letter-spacing: .17em; color: #b5b5b5; }
.hero-release-copy strong { font-size: 19px; font-weight: 400; letter-spacing: .2em; }
.hero-right { position: absolute; right: 5vw; bottom: 16%; width: 18vw; max-width: 260px; z-index: 3; }
.streaming-links { display: grid; margin-top: 18px; }
.streaming-links button, .streaming-links a { display: flex; align-items: center; gap: 15px; padding: 16px 0; border: 0; border-bottom: 1px solid #ffffff24; background: transparent; color: #c8c8c8; font: inherit; font-size: 9px; letter-spacing: .16em; text-align: left; text-decoration: none; }
.streaming-links button > span:first-child, .streaming-links a > span:first-child { color: #999; font-size: 8px; }
.streaming-links a:hover { color: #ff7965; }
.streaming-links a { transition: color .2s ease, text-shadow .2s ease; }
.streaming-links a[href*="open.spotify.com"] { --streaming-color: #1ed760; }
.streaming-links a[href*="music.apple.com"] { --streaming-color: #ff7184; }
.streaming-links a[href*="music.youtube.com"] { --streaming-color: #ff334f; }
.streaming-links a:hover, .streaming-links a:focus-visible {
    color: var(--streaming-color, #ff7965);
    text-shadow: 0 0 12px currentColor;
}
.streaming-links a:hover > span, .streaming-links a:focus-visible > span { color: inherit; }
.streaming-links button:disabled { cursor: default; opacity: .7; }
.streaming-note { margin-top: 12px; font-size: 7px; letter-spacing: .12em; color: #999; line-height: 1.8; }
.hero-about-link { display: flex; justify-content: space-between; padding: 22px 0; margin-top: 18px; }
.hero-about-link:hover, .hero-explore:hover { color: #ffa08c; }
.hero .scroll-indicator { bottom: 22px; }
.contact-note { margin-top: 22px; font-size: 10px; letter-spacing: .14em; color: #999; }
.release-coming-soon { opacity: .6; }
a:focus-visible, button:focus-visible { outline: 2px solid #ffa08c; outline-offset: 6px; }
section[id], footer[id] { scroll-margin-top: 28px; }

@media (max-width: 1000px) {
    .hero { height: auto; min-height: 100vh; display: flex; padding: 26px 7vw 80px; overflow: hidden; }
    .hero-topbar { position: relative; inset: auto; width: 100%; flex-wrap: wrap; gap: 18px; }
    .hero-nav { flex-wrap: wrap; gap: 22px; }
    .site-brand img { width: 40px; height: 48px; }
    .hero-left { position: relative; left: auto; top: auto; width: 100%; max-width: none; margin-top: 48px; }
    .hero-title { font-size: clamp(38px, 7vw, 66px); }
    .hero-description br { display: none; }
    .hero-description { max-width: 420px; }
    .hero-release-card { max-width: 370px; margin-top: 24px; }
    .hero .hero-character { position: relative; left: auto; top: auto; width: min(620px, 90vw); margin: 18px 0 0; flex-shrink: 0; }
    .hero-right { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; margin-top: 12px; }
    .streaming-links { grid-template-columns: 1fr 1fr; column-gap: 30px; }
    .hero-about-link { max-width: 370px; }
    .hero .scroll-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Readable typography while retaining the airy, letter-spaced layout. */
.site-brand span { font-size: 14px; }
.hero-nav a, .hero-about-link { font-size: 13px; letter-spacing: .18em; }
.hero-eyebrow { font-size: 12px; letter-spacing: .22em; }
.hero-title { font-size: clamp(36px, 4vw, 70px); letter-spacing: .12em; }
.hero-description { font-size: 13px; line-height: 1.9; letter-spacing: .12em; }
.hero-explore { font-size: 12px; letter-spacing: .12em; }
.hero-release-card { padding: 12px; gap: 12px; }
.hero-release-art { flex-basis: 52px; }
.hero-release-copy small { font-size: 10px; letter-spacing: .12em; }
.hero-release-copy strong { font-size: 22px; letter-spacing: .12em; }
.streaming-links button, .streaming-links a { font-size: 12px; letter-spacing: .12em; gap: 12px; }
.streaming-links button > span:first-child, .streaming-links a > span:first-child { font-size: 10px; }
.streaming-note { font-size: 10px; }
.contact-note, .section-label, .release-type, .release-placeholder,
.release-info .button, .release-card p, .footer-bottom { font-size: 12px; }
.scroll-indicator { font-size: 11px; }
.intro p { font-size: 20px; }
.release-info p { font-size: 20px; }
.about-text { font-size: 22px; }
.release-card h3 { font-size: 23px; }
.footer-brand { font-size: 14px; }

@media (max-width: 1000px) {
    .hero-title { font-size: clamp(42px, 8vw, 72px); }
}
@media (max-width: 480px) {
    .hero-nav { gap: 16px; }
    .hero-nav a { font-size: 12px; letter-spacing: .1em; }
    .hero-eyebrow { font-size: 11px; }
    .streaming-links { column-gap: 18px; }
    .streaming-links button, .streaming-links a { gap: 8px; font-size: 11px; }
}

/* Outside the hero so its clipping and stacking do not trap the fixed menu. */
.hero-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 110;
    width: 100%;
    padding: 18px 5vw;
    background: rgba(5, 8, 14, .55);
    border-bottom: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
section[id], footer[id] { scroll-margin-top: 125px; }
@media (max-width: 1000px) {
    .hero { padding-top: 150px; }
    .hero-topbar { padding: 14px 7vw; }
    .hero-left { margin-top: 28px; }
    section[id], footer[id] { scroll-margin-top: 155px; }
}

/* A consistent translucent content deck against the open star field. */
main { padding: 40px 0 64px; }
main > section {
    width: calc(100% - 10vw);
    max-width: 1240px;
    margin: 40px auto;
    padding: clamp(32px, 4vw, 64px);
    min-height: 0;
    border: 1px solid rgba(210,220,255,.15);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(22,29,44,.72), rgba(7,10,18,.64));
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
main .section-label {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 36px; opacity: .9; letter-spacing: .16em;
    font-size: 18px; font-weight: 500;
}
main .section-label::after { content: ""; height: 1px; flex: 1; background: rgba(210,220,255,.16); }
.intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 48px; align-items: center; }
.intro .section-label { grid-column: 1 / -1; }
.intro h2 { font-size: clamp(38px, 5.5vw, 78px); line-height: 1; }
.intro h2 span { opacity: .65; }
.intro p { margin-top: 0; color: #c0c4ce; font-size: 18px; }
.release-content { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 48px; }
.release-placeholder { width: 100%; max-width: 300px; border-radius: 10px; }
.release-info h2 { font-size: clamp(46px, 6vw, 84px); margin: 20px 0 28px; }
.release-info p { font-size: 18px; color: #c0c4ce; }
.release-type { opacity: .75; }
.buttons { margin-top: 28px; flex-wrap: wrap; }
.release-grid { gap: 24px; }
.release-card {
    padding: 22px; border: 1px solid rgba(210,220,255,.12);
    border-radius: 12px; background: rgba(9,14,24,.52); cursor: default;
}
.card-image { width: 100%; max-width: 260px; border-radius: 7px; padding: 18px; }
.release-card h3 { font-size: 20px; line-height: 1.3; margin-top: 22px; }
.release-card p { opacity: .7; }
.about-content { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.about-title h2 { font-size: clamp(42px, 5vw, 72px); line-height: 1; }
.about-text { font-size: 18px; color: #c0c4ce; }
.about-text p + p { margin-top: 24px; }
footer {
    max-width: 1240px; width: calc(100% - 10vw); margin: 0 auto 40px;
    padding: 40px clamp(32px, 4vw, 64px);
    background: rgba(7,10,18,.68); border: 1px solid rgba(210,220,255,.12); border-radius: 16px;
}
.footer-bottom { margin-top: 40px; opacity: .65; line-height: 1.8; }
@media (max-width: 800px) {
    main { padding: 16px 0 24px; }
    main > section, footer { width: calc(100% - 10vw); padding: 28px; margin-bottom: 24px; }
    main > section { margin-top: 24px; }
    main .section-label { margin-bottom: 28px; font-size: 16px; }
    .intro, .release-content, .about-content { grid-template-columns: 1fr; gap: 28px; }
    .intro .section-label { margin-bottom: 0; }
    .intro h2 { font-size: clamp(36px, 8vw, 62px); }
    .release-grid { grid-template-columns: 1fr; gap: 16px; }
    .release-card { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); gap: 8px 22px; align-items: center; padding: 18px; }
    .card-image { grid-row: 1 / 3; }
    .release-card h3 { margin: 0; align-self: end; font-size: 18px; }
    .release-card p { margin: 0; align-self: start; }
    .release-placeholder { max-width: 260px; }
}
@media (max-width: 420px) {
    main > section, footer { padding: 22px; }
    .release-card { grid-template-columns: 80px minmax(0,1fr); gap: 8px 14px; padding: 14px; }
    .release-card h3 { font-size: 16px; }
}

/* Cinematic Label — understated glass, editorial hierarchy, warm accents. */
:root { --label-accent: #f0442b; }
.release-cover { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid rgba(207,220,241,.2); border-radius: 8px; }
.hero-release-art.release-cover-thumb { width: 52px; height: 52px; object-fit: cover; background: none; }
.button-primary { color: #fff; background: #d43b27; border-color: #f05a43; }
.button-primary:hover { color: #fff; background: #ed4b34; }
.streaming-pending { font-family: inherit; font-size: 12px; background: transparent; opacity: .5; cursor: default; }
.streaming-pending:hover { color: rgba(255,255,255,.6); background: transparent; }
.sound-toggle {
    position: fixed; right: 24px; bottom: 24px; z-index: 120;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 18px; border: 1px solid rgba(255,255,255,.25);
    border-radius: 28px; background: rgba(6,10,17,.9); color: #eee;
    font: inherit; font-size: 11px; letter-spacing: .14em; cursor: pointer;
}
.sound-toggle:hover { border-color: #ff7965; }
.sound-toggle[aria-pressed="false"]:not(:disabled) {
    border-color: rgba(255,121,101,.55);
    box-shadow: 0 0 14px rgba(240,68,43,.2), inset 0 0 10px rgba(240,68,43,.06);
    animation: soundButtonPulse 2.8s ease-in-out infinite;
}
@keyframes soundButtonPulse {
    0%, 100% {
        border-color: rgba(255,121,101,.4);
        box-shadow: 0 0 8px rgba(240,68,43,.12), inset 0 0 6px rgba(240,68,43,.04);
    }
    50% {
        border-color: rgba(255,121,101,.95);
        box-shadow: 0 0 22px rgba(240,68,43,.4), inset 0 0 10px rgba(240,68,43,.09);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sound-toggle[aria-pressed="false"]:not(:disabled) { animation: none; }
}
.sound-toggle[aria-pressed="true"] .sound-indicator { color: #ff7965; }
.sound-indicator { font-size: 19px; line-height: 1; }
.sound-toggle:disabled { opacity: .5; cursor: default; }
.audio-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-title { font-weight: 800; letter-spacing: -.035em; line-height: .98; font-size: clamp(40px, 4.4vw, 78px); }
.hero-title span { color: var(--label-accent); }
.hero-description { margin-top: 24px; letter-spacing: .2em; line-height: 1.9; }
.site-brand span { font-weight: 700; font-size: 18px; letter-spacing: .14em; }
.hero-topbar { background: rgba(5,8,14,.48); }
.hero-nav a:hover { color: var(--label-accent); border-color: transparent; }
.hero-release-card { border-radius: 10px; background: rgba(6,10,17,.75); }
.hero-release-copy small:first-child { color: #ff7965; }
.hero-release-art { border-radius: 5px; background: linear-gradient(0deg,#080c1670,#080c1620),url('../images/space-background-v1.webp') 25% center / cover; }
.hero-release-arrow { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #f0442b90; border-radius: 50%; color: #ff7965; font-size: 18px; }
.hero-right {
    bottom: calc(20% + 226px);
    padding: 22px;
    background: rgba(6,10,18,.88);
    border: 1px solid rgba(207,220,241,.18);
    border-radius: 12px;
}
.streaming-links button, .streaming-links a { padding: 18px 0; border-bottom-color: rgba(255,255,255,.1); }
main > section { border-radius: 12px; background: linear-gradient(110deg,rgba(8,14,23,.86),rgba(8,14,23,.55)); border-color: rgba(207,220,241,.2); box-shadow: 0 12px 38px #00000020; }
main .section-label { font-weight: 700; letter-spacing: .08em; }
main .section-label::after { display: none; }
.release > .section-label { color: #ff725d; }
.intro { position: relative; grid-template-columns: 1.3fr 1fr; gap: 64px; overflow: hidden; background: linear-gradient(90deg,rgba(7,12,21,.96),rgba(7,12,21,.55)),url('../images/deep-space-v1.webp') center / cover; }
main > .intro {
    min-height: 0;
    height: auto;
}
.intro h2 { font-size: clamp(28px, 3vw, 46px); letter-spacing: -.035em; line-height: 1.2; white-space: nowrap; }
.intro .intro-kicker { margin-top: 16px; color: #f1f1f1; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .24em; }
.intro-story > p:last-child { margin-top: 22px; font-size: 17px; line-height: 1.8; max-width: 510px; }
.label-principles { display: grid; gap: 30px; }
.label-principle { display: flex; gap: 22px; align-items: center; }
.label-principle svg { width: 38px; height: 38px; flex: 0 0 38px; fill: none; stroke: #e8e9ed; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.label-principle h3 { font-size: 12px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; }
.label-principle p { font-size: 14px; color: #b9bfca; line-height: 1.6; margin-top: 3px; }
.release { background: linear-gradient(90deg,rgba(7,12,21,.98) 0%,rgba(7,12,21,.92) 55%,rgba(7,12,21,.6)),url('../images/space-background-v1.webp') right center / cover; }
.release-content { grid-template-columns: minmax(180px,.8fr) minmax(0,1.4fr); gap: 44px; }
.release-placeholder { max-width: 300px; background: linear-gradient(150deg,rgba(20,32,49,.88),rgba(3,6,12,.94)),url('../images/deep-space-v1.webp') center / cover; position: relative; }
.release-placeholder::before { content: 'SALVAGE'; position: absolute; top: 12%; font-size: 17px; letter-spacing: .32em; color: #e7e9ee; }
.release-placeholder > span { font-size: 10px; text-align: center; letter-spacing: .15em; }
.release-info h2 { font-size: clamp(46px,6vw,86px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.release-type { letter-spacing: .22em; }
.button { border-radius: 28px; padding: 15px 24px; }
.release-coming-soon { color: #fff; background: #ad3021; border-color: #da4833; opacity: 1; }
.release-coming-soon:hover { color: #fff; background: #ad3021; }
.release-grid { gap: 28px; }
.release-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.card-image { max-width: 260px; border-radius: 7px; background: linear-gradient(155deg,rgba(25,36,54,.9),rgba(5,9,17,.95)); align-items: center; justify-content: center; }
.card-image span { font-size: 10px; line-height: 1.6; letter-spacing: .12em; text-align: center; opacity: .7; }
.release-card h3 { font-size: 19px; letter-spacing: .09em; }
.release-card p { font-size: 11px; letter-spacing: .2em; }
.release-card-cover { display: block; padding: 0; height: auto; object-fit: contain; }
.release-card-links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
.release-card-links a { color: #ff7965; text-decoration: none; font-size: 10px; letter-spacing: .1em; line-height: 1.6; }
.release-card-links a:hover { color: #fff; }
.about-title h2 { letter-spacing: -.035em; }
@media (max-width: 1000px) {
    .hero-title { font-size: clamp(46px,8vw,76px); }
    .hero-right { bottom: auto; }
}
@media (max-width: 800px) {
    .intro, .release-content { grid-template-columns: 1fr; gap: 32px; }
    .intro h2 { font-size: clamp(26px,6vw,40px); }
    .label-principles { padding-top: 26px; border-top: 1px solid #ffffff20; gap: 24px; }
    .release-placeholder { max-width: 260px; }
    .release-card { grid-template-columns: minmax(90px,140px) minmax(0,1fr); padding: 0; }
    .release-card h3 { font-size: 18px; }
    .release-card-links { grid-column: 2; margin-top: 4px; }
}
@media (max-width: 420px) {
    .site-brand span { font-size: 15px; }
    .intro .intro-kicker { font-size: 12px; letter-spacing: .15em; }
    .label-principle { gap: 16px; }
    .label-principle h3 { font-size: 11px; }
    .release-card { grid-template-columns: 86px minmax(0,1fr); }
    .release-card h3 { font-size: 16px; }
    .card-image span { font-size: 8px; }
}

/* Streaming choices live on the cover only in the Releases section. */
.releases .release-cover-wrap { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: #080c13; }
.releases .release-cover-wrap .card-image { max-width: none; }
.releases .release-cover-wrap::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.releases .release-cover-wrap:hover .card-image,
.releases .release-cover-wrap:focus-within .card-image { opacity: 1; transform: none; }
.releases .release-cover-wrap:hover::after,
.releases .release-cover-wrap:focus-within::after { opacity: .65; }
.releases .release-cover-wrap .release-card-links {
    position: absolute; inset: 0; z-index: 2; margin: 0; padding: 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.releases .release-cover-wrap:hover .release-card-links,
.releases .release-cover-wrap:focus-within .release-card-links { opacity: 1; pointer-events: auto; }
.releases .release-card-links a, .releases .release-card-links button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 40px; padding: 10px 8px; border: 1px solid #ffffff60;
    border-radius: 22px; background: #080c13cc; color: #fff;
    font: inherit; font-size: 10px; letter-spacing: .1em; text-align: center; text-decoration: none;
}
.releases .release-card-links a:hover { border-color: #ff7965; background: #9e2c20e6; }
.button-spotify, .releases .release-card-links a.button-spotify {
    background: transparent; border-color: #1ed760; color: #1ed760; font-weight: 600;
}
.button-spotify:hover, .button-spotify:focus-visible,
.releases .release-card-links a.button-spotify:hover,
.releases .release-card-links a.button-spotify:focus-visible {
    background: #1ed760; border-color: #1ed760; color: #08120b;
}
.button-youtube, .releases .release-card-links a.button-youtube {
    background: transparent; border-color: #ff0033; color: #ff647f; font-weight: 600;
}
.button-youtube:hover, .button-youtube:focus-visible,
.releases .release-card-links a.button-youtube:hover,
.releases .release-card-links a.button-youtube:focus-visible {
    background: #ff0033; border-color: #ff0033; color: #130004;
}
.button-apple, .releases .release-card-links a.button-apple {
    background: transparent; border-color: #fa2d48; color: #ff7184; font-weight: 600;
}
.button-apple:hover, .button-apple:focus-visible,
.releases .release-card-links a.button-apple:hover,
.releases .release-card-links a.button-apple:focus-visible {
    background: #fa2d48; border-color: #fa2d48; color: #160006;
}
.button-spotify, .button-youtube, .button-apple,
.releases .release-card-links a {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.releases .release-card-links button:disabled { color: #b0b5be; border-color: #ffffff25; cursor: default; }
.releases .release-card-links small { margin-top: 3px; font-size: 7px; letter-spacing: .08em; }
@media (max-width: 800px) {
    .releases .release-card:has(.release-cover-wrap) { display: block; }
    .releases .release-card:has(.release-cover-wrap) h3 { margin-top: 20px; }
    .releases .release-card:has(.release-cover-wrap) p { margin-top: 7px; }
}
@media (hover: none) {
    .releases .release-cover-wrap .card-image { opacity: 1; }
    .releases .release-cover-wrap::after { opacity: .65; }
    .releases .release-cover-wrap .release-card-links { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .releases .release-cover-wrap::after, .releases .release-cover-wrap .release-card-links { transition: none; }
}

.releases .release-cover-teaser .card-image,
.releases .release-cover-teaser:hover .card-image,
.releases .release-cover-teaser:focus-within .card-image { opacity: .22; transform: none; }
.releases .release-cover-teaser::after,
.releases .release-cover-teaser:hover::after,
.releases .release-cover-teaser:focus-within::after { opacity: 0; }
.release-cover-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; color: #e3e7ed; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-align: center; text-shadow: 0 2px 10px #000; }

.cover-tilt {
    transform: perspective(700px) rotateX(var(--cover-rotate-x, 0deg)) rotateY(var(--cover-rotate-y, 0deg)) scale(var(--cover-scale, 1));
    transform-origin: center;
    transition: transform .35s ease, box-shadow .35s ease;
}
.cover-tilt.is-tilting { transition-duration: .09s, .25s; will-change: transform; box-shadow: 0 18px 32px #0008; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .cover-tilt, .cover-tilt.is-tilting { transform: none; transition: none; will-change: auto; box-shadow: none; }
}

.hero-left .hero-release-card { display: grid; grid-template-columns: clamp(80px, 8vw, 118px) minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.hero-release-card .hero-release-art.release-cover-thumb { display: block; width: 100%; height: 100%; min-height: 130px; object-fit: cover; border-radius: 0; }
.hero-release-card .hero-release-copy { justify-content: center; padding: 16px 14px; }
.hero-release-card .hero-release-copy strong { font-size: clamp(16px, 1.25vw, 22px); letter-spacing: .08em; }
.hero-release-copy { min-width: 0; }
.hero-release-copy .release-countdown { margin-top: 3px; justify-content: flex-start; font-size: clamp(18px, 1.3vw, 22px); font-weight: 600; }
.release-countdown { display: flex; justify-content: center; gap: 10px; font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.release-countdown .countdown-unit small { font-size: 8px; letter-spacing: .08em; color: #aeb7c5; }
.hero-release-copy .release-countdown .countdown-unit small { font-size: 9px; font-weight: 400; }
.release-cover-countdown { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.release-cover-countdown time { font-size: 10px; color: #bfc5cf; letter-spacing: .08em; }
.release-cover-countdown .release-countdown { font-size: 21px; gap: 12px; }
#if-i-could { scroll-margin-top: 125px; }
@media (max-width: 1000px) { #if-i-could { scroll-margin-top: 155px; } }

.release-category + .release-category { margin-top: 56px; padding-top: 40px; border-top: 1px solid #ffffff24; }
.release-category-heading { margin-bottom: 26px; }
.releases .release-category-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.release-category-heading p { margin: 10px 0 0; color: #aeb7c5; font-size: 11px; letter-spacing: .16em; line-height: 1.6; }
@media (max-width: 800px) {
    .release-category + .release-category { margin-top: 36px; padding-top: 28px; }
    .release-category-heading { margin-bottom: 20px; }
}

/* Centered insignia in the floating glass header. */
.hero-left .hero-release-card { margin-top: 0; margin-bottom: 74px; }
.hero-topbar {
    height: 82px; padding: 0 5vw; display: block;
    background: transparent; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    isolation: isolate;
}
.hero-topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(5,8,14,.78); border-bottom: 1px solid #ffffff24;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-topbar .site-brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 82px; height: 82px; padding: 10px; display: grid; place-items: center;
    border-radius: 50%; background: transparent; border: 0;
    box-shadow: none;
}
.hero-topbar::after {
    content: none;
}
.hero-topbar .site-brand img { width: 100%; height: 100%; object-fit: contain; transition: filter .25s ease; }
.hero-topbar .site-brand:hover img, .hero-topbar .site-brand:focus-visible img {
    filter: brightness(1.15) drop-shadow(0 0 6px #ffffffa0) drop-shadow(0 0 15px #ffffff60);
}
.hero-topbar .site-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-topbar .hero-nav {
    height: 100%; display: grid;
    grid-template-columns: 1fr 1fr 160px 1fr 1fr;
    align-items: center; gap: 20px;
    max-width: 980px; margin: 0 auto;
}
.hero-topbar .hero-nav a { text-align: center; font-size: 13px; letter-spacing: .18em; }
.hero-topbar .hero-nav a:nth-child(3) { grid-column: 4; }
@media (max-width: 600px) {
    .hero-topbar { height: 68px; padding: 0 4vw; }
    .hero-topbar .site-brand { width: 68px; height: 68px; padding: 10px; }
    .hero-topbar .hero-nav { grid-template-columns: 1fr 1fr 104px 1fr 1fr; gap: 6px; }
    .hero-topbar .hero-nav a { font-size: 10px; letter-spacing: .04em; }
}
@media (max-width: 360px) {
    .hero-topbar { padding: 0 2vw; }
    .hero-topbar .hero-nav { grid-template-columns: 1fr 1fr 100px 1fr 1fr; gap: 3px; }
    .hero-topbar .hero-nav a { font-size: 9px; }
}

/* Mobile layout stays last so desktop refinements cannot override it. */
@media (max-width: 1000px) {
    .hero { height: auto; min-height: 0; padding: 126px 5vw 36px; gap: 28px; }
    .hero-left { width: 100%; max-width: 620px; margin-top: 0; }
    .hero-left .hero-release-card { max-width: 420px; margin: 0 0 28px; }
    .hero .hero-character { width: min(520px, 92vw); margin: 0; }
    .hero-right { position: relative; inset: auto; width: 100%; max-width: 620px; margin: 0; }
    .hero-topbar .hero-nav { grid-template-columns: 1fr 1fr 100px 1fr 1fr; gap: 12px; }
    .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    main > section, footer { width: calc(100% - 32px); padding: 24px; }
    .intro, .release-content, .about-content { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .about { min-height: 0; }
    .intro-story, .release-info, .about-text, .release-card { min-width: 0; }
    .intro h2 { white-space: normal; overflow-wrap: anywhere; }
    .release-cover { margin-inline: auto; }
    .buttons { display: flex; flex-wrap: wrap; gap: 12px; }
    .buttons .button { min-height: 44px; text-align: center; }
    .releases .release-card { display: block; padding: 0; }
    .releases .release-card > .card-image, .releases .release-cover-wrap { max-width: none; width: 100%; }
    .releases .release-card h3 { margin: 18px 0 8px; line-height: 1.4; overflow-wrap: anywhere; }
    .releases .release-card p { margin: 0; line-height: 1.6; }
    .release-grid { gap: 32px 24px; }
    .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; line-height: 1.8; }
    section[id], footer[id], #if-i-could { scroll-margin-top: 125px; }
}
@media (max-width: 600px) {
    main > .intro { display: none; }
    .hero-topbar { height: 106px; padding: 0 16px; }
    .hero-topbar .site-brand { width: 58px; height: 58px; top: 4px; transform: translateX(-50%); padding: 7px; }
    .hero-topbar .hero-nav { position: absolute; left: 12px; right: 12px; bottom: 0; height: 44px; max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .hero-topbar .hero-nav a { display: grid; place-items: center; min-height: 44px; font-size: 11px; letter-spacing: .08em; }
    .hero-topbar .hero-nav a:nth-child(3) { grid-column: auto; }
    .hero { padding: 130px 20px 32px; gap: 24px; }
    .hero-title { font-size: clamp(48px, 13vw, 76px); }
    .hero-description { font-size: 12px; line-height: 1.8; }
    .hero-description br { display: initial; }
    .hero-explore, .hero-about-link { min-height: 44px; align-items: center; }
    .hero-right { padding: 20px; }
    .streaming-links { grid-template-columns: minmax(0, 1fr); }
    .streaming-links a, .streaming-links button { min-height: 48px; }
    .hero-release-card .hero-release-copy { padding: 14px 12px; }
    .hero-release-copy small:first-child { font-size: 9px; line-height: 1.6; }
    .release-grid { grid-template-columns: minmax(0, 1fr); }
    .releases .release-card { width: 100%; max-width: 360px; margin-inline: auto; }
    .buttons { flex-direction: column; }
    .buttons .button { width: 100%; }
    .release-cover-countdown .release-countdown { font-size: 20px; gap: 10px; }
    .sound-toggle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-height: 44px; padding: 12px 16px; }
    footer { padding-bottom: 78px; }
}
@media (max-width: 800px), (hover: none), (pointer: coarse) {
    .releases .release-cover-wrap:not(.release-cover-teaser) { aspect-ratio: auto; overflow: visible; background: transparent; }
    .releases .release-cover-wrap:not(.release-cover-teaser)::after { display: none; }
    .releases .release-cover-wrap:not(.release-cover-teaser) .card-image { aspect-ratio: 1; opacity: 1; }
    .releases .release-cover-wrap .release-card-links { position: relative; inset: auto; padding: 12px 0 0; opacity: 1; pointer-events: auto; }
    .releases .release-card-links a { min-height: 44px; font-size: 11px; }
}
.hero-preview-toggle { display: none; }
.release-preview-art { display: contents; }
@media (max-width: 800px), (hover: none), (pointer: coarse) {
    .hero-preview-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 24px; color: #fff; background: rgba(8,12,18,.85); backdrop-filter: blur(8px); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; cursor: pointer; box-shadow: 0 3px 16px #0005; }
    .hero-preview-toggle[aria-pressed="true"] { border-color: #e9513b; color: #ffad9e; background: rgba(80,20,15,.9); }
    .hero-preview-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .release-preview-art { display: block; position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
    .release-preview-art > .release-cover { margin: 0; }
    .release-cover-wrap > .hero-preview-toggle, .release-preview-art > .hero-preview-toggle { position: absolute; top: 12px; right: 12px; z-index: 5; }
    .hero-release-card > .hero-preview-toggle { grid-column: 1 / -1; width: 100%; border: 0; border-top: 1px solid #ffffff25; border-radius: 0; background: rgba(8,12,18,.5); box-shadow: none; }
}

/* Mobile interaction is tap-only; do not retain desktop hover effects after taps. */
@media (max-width: 800px), (hover: none), (pointer: coarse) {
    .cover-tilt, .cover-tilt.is-tilting { transform: none; box-shadow: none; will-change: auto; }
    .release-card:hover .card-image { transform: none; }
    .hero-release-card:hover { border-color: #ffffff26; background: rgba(6,10,17,.75); }
    .hero-nav a:hover:not(:focus-visible) { color: #e9e9e9; border-color: transparent; }
    .hero-topbar .site-brand:hover:not(:focus-visible) img { filter: none; }
    .streaming-links a:hover:not(:focus-visible) { color: #c8c8c8; text-shadow: none; }
    .streaming-links a:hover:not(:focus-visible) > span { color: #999; }
    .hero-about-link:hover:not(:focus-visible), .hero-explore:hover:not(:focus-visible) { color: #e9e9e9; }
    .releases .release-cover-wrap::after, .releases .release-cover-wrap:hover::after { opacity: 0; }
    .button:hover:not(:focus-visible) { background: transparent; color: #fff; }
    .button-primary:hover:not(:focus-visible) { background: #d43b27; color: #fff; }
    .button-spotify:hover:not(:focus-visible), .releases .release-card-links a.button-spotify:hover:not(:focus-visible) { background: transparent; border-color: #1ed760; color: #1ed760; }
    .button-youtube:hover:not(:focus-visible), .releases .release-card-links a.button-youtube:hover:not(:focus-visible) { background: transparent; border-color: #ff0033; color: #ff647f; }
    .button-apple:hover:not(:focus-visible), .releases .release-card-links a.button-apple:hover:not(:focus-visible) { background: transparent; border-color: #fa2d48; color: #ff7184; }
}
.cat-rocket, img, canvas { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.space-cursor { display: none; }
@media (min-width: 801px) and (hover: hover) and (pointer: fine) and (forced-colors: none) {
    html.space-cursor-on, html.space-cursor-on * { cursor: none !important; }
    .space-cursor { display: block; position: fixed; top: 0; left: 0; width: 28px; height: 28px; z-index: 2147483647; pointer-events: none; opacity: 0; will-change: transform; }
    .space-cursor.is-visible { opacity: 1; }
    .space-cursor::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(240,68,43,.75); border-radius: 50%; box-shadow: 0 0 5px #f0442b30; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
    .space-cursor-cross { position: absolute; inset: 0; filter: drop-shadow(0 1px 2px #000); }
    .space-cursor-cross::before, .space-cursor-cross::after { content: ''; position: absolute; background: #fff; border-radius: 1px; }
    .space-cursor-cross::before { width: 14px; height: 1px; left: 7px; top: 13.5px; }
    .space-cursor-cross::after { width: 1px; height: 14px; left: 13.5px; top: 7px; }
    .space-cursor.is-interactive::before { transform: scale(1.45); border-color: #ff6b51; box-shadow: 0 0 9px #f0442b70; }
    .space-cursor.is-pressed::before { transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
    .space-cursor::before { transition: none; }
}

.privacy-note { max-width:760px; margin:24px auto; padding:0 20px; text-align:left; color:#b9bec8; font-size:14px; line-height:1.7; }
.privacy-note summary { cursor:pointer; text-align:center; }
.privacy-note p { margin-top:16px; }
.privacy-note a,.contact-note a { color:inherit; }
.countdown-release-links { display:flex; flex-wrap:wrap; gap:8px; font-size:10px; margin-top:8px; }
.countdown-release-links a { color:inherit; padding:5px; border:1px solid currentColor; border-radius:4px; }

.stream-dropdown-toggle { display: none; }
@media (max-width: 600px) {
    .stream-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 300px; min-height: 46px; margin: 14px auto 0; padding: 12px 18px; border: 1px solid #ffffff40; border-radius: 24px; background: #080c16b3; color: #f5f5f5; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; cursor: pointer; }
    .stream-dropdown-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
    .stream-dropdown-toggle[aria-expanded="true"] { border-color: #f0442b; }
    .stream-dropdown-chevron { font-size: 20px; line-height: 1; }
    .stream-dropdown-toggle[aria-expanded="true"] .stream-dropdown-chevron { transform: rotate(180deg); }
    #latest-release .buttons.mobile-stream-links,
    .releases .release-cover-wrap .release-card-links.mobile-stream-links { display: none; }
    #latest-release .buttons.mobile-stream-links.stream-dropdown-open,
    .releases .release-cover-wrap .release-card-links.mobile-stream-links.stream-dropdown-open { display: flex; margin-top: 12px; }
    .releases .release-cover-wrap .release-card-links.mobile-stream-links.stream-dropdown-open { padding-top: 0; }
}

/* Listening controls never extend beyond their associated artwork. */
@media (min-width: 801px) {
    #latest-release .release-content { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
#latest-release .buttons { width: 100%; max-width: 300px; }
#latest-release .buttons .button { width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.releases .release-cover-wrap .release-card-links { max-width: 100%; min-width: 0; }
.releases .release-card-links a, .hero-preview-toggle { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) {
    #latest-release .buttons { margin-inline: auto; }
}

/* Keep the desktop-style tablet panel clear of the fixed header. */
@media (min-width: 1001px) and (max-width: 1180px) {
    .hero-right { top: clamp(112px, 16vh, 150px); bottom: auto; }
}

/* One consistent hover glow for every link; keep each link's own brand color. */
@media (hover: hover) and (pointer: fine) {
    a[href]:hover {
        /* Override component-specific shadows without overriding their colors. */
        text-shadow: 0 0 5px currentColor, 0 0 14px color-mix(in srgb, currentColor 90%, transparent), 0 0 30px color-mix(in srgb, currentColor 70%, transparent), 0 0 48px color-mix(in srgb, currentColor 40%, transparent) !important;
    }
}

/* Touch layouts keep artwork unobstructed, with all status and links below it. */
@media (max-width: 800px), (hover: none), (pointer: coarse) {
    #artists .release-cover-wrap { aspect-ratio: auto; overflow: visible; background: transparent; }
    #artists .release-cover-wrap::after { display: none; }
    #artists .release-cover-wrap img.release-card-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; opacity: 1; transform: none; border-radius: 7px; }
    #artists .release-cover-wrap .release-cover-status { position: relative; inset: auto; z-index: auto; width: 100%; margin-top: 12px; padding: 16px 12px; border: 1px solid #ffffff1f; border-radius: 7px; background: #080c1680; text-shadow: none; box-sizing: border-box; }
    #artists .release-cover-wrap .release-card-links { position: relative; inset: auto; width: 100%; padding: 12px 0 0; opacity: 1; pointer-events: auto; box-sizing: border-box; }
    #artists .release-cover-status .release-countdown[data-complete="true"] { flex-direction: column; align-items: stretch; font-size: 16px; gap: 12px; }
    #artists .countdown-release-links { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; margin-top: 0; }
    #artists .countdown-release-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: 8px 10px; box-sizing: border-box; text-decoration: none; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
}

/* Artist hubs: identity first, followed immediately by that artist's releases. */
.artists .artist-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.artists .artist-hub { width: 100%; min-width: 0; padding: clamp(20px, 3vw, 34px); }
.artist-hub .artist-profile { max-width: 760px; }
.artist-hub .artist-profile > p:not(.artist-role) { color: #c0c4ce; font-size: 16px; line-height: 1.7; }
.artist-hub .release-category { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ffffff24; }
.artist-hub .release-category-heading { margin-bottom: 22px; }
.artist-hub .release-category-heading h4 { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: .14em; font-weight: 600; color: #e3e7ed; }
.artists .artist-hub .release-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.artist-hub .release-card { min-width: 0; align-self: start; }
.artist-hub .release-card h3 { margin: 18px 0 8px; font-size: 18px; line-height: 1.4; letter-spacing: .05em; overflow-wrap: anywhere; }
.artist-hub .release-card > p { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: .1em; }
.artist-hub .release-cover-countdown { padding: 12px; gap: 12px; }
.artist-hub .release-cover-countdown .release-countdown { font-size: 18px; gap: 8px; }
.artist-releases-anchor { scroll-margin-top: 110px; }
@media (max-width: 1100px) {
    .artists .artist-hub .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .artists .artist-hub { padding: 18px; }
    .artists .artist-hub .release-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .artist-hub .artist-profile h3 { font-size: 28px; }
    .artist-hub .release-cover-countdown .release-countdown { font-size: 18px; gap: 7px; }
    .artist-releases-anchor { scroll-margin-top: 84px; }
}

/* Independent label and its artist identities. */
.hero-artist-links { display: flex; flex-direction: column; margin-top: 18px; }
.hero-artist-links a { display: flex; align-items: center; min-height: 56px; padding: 16px 0; border-bottom: 1px solid #ffffff24; color: #e9e9e9; font-size: 13px; letter-spacing: .1em; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.hero-artist-links a:hover, .hero-artist-links a:focus-visible { color: #ff7965; text-shadow: 0 0 12px #f0442b66; }
.hero-artist-links a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.hero-artist-links a[href="#artist-morphium"] { color: #e9e9e9; text-shadow: none; transition: color .2s ease, text-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
    .hero-artist-links a[href="#artist-morphium"]:hover { color: #ff25df; text-shadow: 0 0 5px #ff00e6, 0 0 14px #ff00d4e6, 0 0 30px #ff00d4b3, 0 0 48px #ff00d466; }
}
.artist-links-block { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff1f; }
.artist-links-caption { margin: 0 0 8px; color: #929cae; font-size: 10px; line-height: 1.5; letter-spacing: .14em; }
.artist-streaming-links { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; }
.artist-profile-link { --profile-color: #c0c4ce; display: inline-flex; gap: 7px; align-items: center; min-height: 44px; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: #c0c4ce; text-decoration: none; font-size: 12px; line-height: 1.5; transition: color .2s ease; }
.artist-profile-link svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--profile-color); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profile-spotify { --profile-color: #1ed760; }
.profile-apple { --profile-color: #fa2d48; }
.profile-youtube { --profile-color: #ff0033; }
.artist-profile-link:hover, .artist-profile-link:focus-visible { color: var(--profile-color); }
.artist-profile-link:focus-visible, .artist-release-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
.artist-profile-pending { margin: 0; padding: 12px 0; color: #929cae; font-size: 12px; line-height: 1.6; }
.artist-release-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; color: #d4dae4; font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-decoration: none; border-bottom: 1px solid #ffffff30; }
.artist-release-link:hover { color: #ff7965; border-color: currentColor; }
.artist-card > p.artist-profile-note { margin-top: 18px; font-size: 10px; letter-spacing: .1em; color: #9fa9b8; }
#artist-mimik, #artist-morphium { scroll-margin-top: 110px; }
@media (max-width: 600px) { #artist-mimik, #artist-morphium { scroll-margin-top: 84px; } }
.artists > h2 { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -.03em; }
.artists-intro { max-width: 680px; margin: 22px 0 30px; color: #c0c4ce; font-size: 18px; line-height: 1.7; }
.artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.artist-card { min-width: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid #ffffff24; border-radius: 10px; background: #080c1680; }
.artist-card .artist-role { margin: 0 0 20px; color: #ff7965; font-size: 11px; letter-spacing: .13em; line-height: 1.6; }
.artist-card h3 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.artist-genre-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.artist-genre-tags li { display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid #ff25df59; border-radius: 999px; background: #ff25df0a; color: #efc8e9; font-size: 11px; line-height: 1.4; letter-spacing: .04em; max-width: 100%; overflow-wrap: anywhere; }
#artist-mimik .artist-genre-tags li { border-color: #f0442b59; background: #f0442b0a; color: #edc6bf; }
.artist-card > p:not(.artist-role) { color: #c0c4ce; font-size: 16px; line-height: 1.7; }
.artist-card .button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; margin-top: 24px; text-align: center; white-space: normal; }
#mimik-releases, #morphium-releases { scroll-margin-top: 110px; }
@media (max-width: 600px) {
    .artist-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .artists-intro { font-size: 16px; }
    #mimik-releases, #morphium-releases { scroll-margin-top: 84px; }
    .hero-left > .hero-eyebrow { max-width: 32ch; line-height: 1.7; }
}

/* EP tracklist: readable, non-interactive and contained within the release card. */
.ep-tracklist { width: 100%; min-width: 0; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ffffff24; text-align: left; }
.ep-tracklist h4 { margin: 0 0 12px; color: #bfc5cf; font-size: 11px; letter-spacing: .12em; font-weight: 600; }
.ep-tracklist ol { margin: 0; padding: 0; list-style: none; counter-reset: ep-track; }
.ep-tracklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #ffffff12; color: #e3e7ed; font-size: 13px; line-height: 1.5; counter-increment: ep-track; }
.ep-tracklist li::before { content: counter(ep-track); color: #8993a3; font-variant-numeric: tabular-nums; }
.ep-tracklist li > span:first-of-type { overflow-wrap: anywhere; }
.ep-tracklist .track-duration { color: #aeb7c5; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.release-ep { align-self: start; }

/* Compact phone header; full navigation remains available without JavaScript. */
.mobile-menu-toggle { display: none; }
.back-to-top { position: fixed; z-index: 105; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid #ffffff45; border-radius: 24px; background: #080c16e8; color: #f5f5f5; font: inherit; font-size: 11px; letter-spacing: .12em; cursor: pointer; }
.back-to-top[hidden] { display: none; }
.back-to-top > span:first-child { font-size: 20px; }
.back-to-top:hover { border-color: #f0442b; }
.back-to-top:focus-visible, .mobile-menu-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (max-width: 600px) {
    .hero-topbar.mobile-menu-ready { height: 64px; }
    .hero-topbar.mobile-menu-ready .site-brand { top: 3px; }
    .mobile-menu-ready .mobile-menu-toggle { display: inline-flex; position: absolute; right: 16px; top: 10px; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff30; border-radius: 8px; background: #080c16a0; color: #f5f5f5; font: inherit; font-size: 10px; letter-spacing: .08em; }
    .mobile-menu-toggle > span:first-child { font-size: 20px; }
    .hero-topbar.mobile-menu-ready .hero-nav { display: none; position: absolute; top: 64px; bottom: auto; left: 0; right: 0; height: auto; padding: 8px 16px 16px; background: #080c16f5; border-bottom: 1px solid #ffffff30; }
    .hero-topbar.mobile-menu-ready.menu-open .hero-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .hero-topbar.mobile-menu-ready .hero-nav a { min-height: 48px; border: 1px solid #ffffff18; border-radius: 6px; }
    body:has(.mobile-menu-ready) .hero { padding-top: 88px; }
    body:has(.mobile-menu-ready) section[id], body:has(.mobile-menu-ready) footer[id], body:has(.mobile-menu-ready) #if-i-could { scroll-margin-top: 84px; }
}

/* Shared streaming-button treatment, including links created at countdown end. */
.button-spotify { --service-color: #1ed760; }
.button-apple { --service-color: #fa2d48; }
.button-youtube { --service-color: #ff0033; }
#artists :is(.release-card-links a, .countdown-release-links a, .artist-profile-link),
#latest-release .buttons .button {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    min-height: 44px; max-width: 100%; padding: 10px 16px; box-sizing: border-box;
    border: 1px solid var(--service-color, var(--profile-color, #ffffff60)); border-radius: 999px;
    background: transparent; color: var(--service-color, var(--profile-color, #e3e7ed));
    font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .08em;
    text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
#artists .artist-streaming-links { gap: 10px; }
#artists .release-card-links button:disabled {
    display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; max-width: 100%; padding: 10px 16px;
    box-sizing: border-box; border: 1px solid var(--service-color, #ffffff60); border-radius: 999px;
    background: transparent; color: var(--service-color, #e3e7ed); font-size: 11px; font-weight: 600;
    line-height: 1.5; letter-spacing: .08em; opacity: .65; cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
    #artists :is(.release-card-links a, .countdown-release-links a, .artist-profile-link):hover,
    #latest-release .buttons .button:hover {
        background: var(--service-color, var(--profile-color, #e3e7ed));
        border-color: var(--service-color, var(--profile-color, #e3e7ed)); color: #080c13;
    }
}

/* Upcoming releases keep their announcement on gently darkened artwork. */
#artists .release-cover-wrap:has(.release-countdown:not([data-complete="true"])) img.release-card-cover { opacity: .65; }
@media (max-width: 800px), (hover: none), (pointer: coarse) {
    #artists .release-cover-wrap:has(.release-countdown:not([data-complete="true"])) { position: relative; aspect-ratio: 1; overflow: hidden; background: #080c13; }
    #artists .release-cover-wrap:has(.release-countdown:not([data-complete="true"])) .release-cover-status {
        position: absolute; inset: 0; z-index: 2; width: 100%; margin: 0; padding: 16px 12px;
        border: 0; background: transparent; border-radius: 7px; text-shadow: 0 2px 10px #000;
    }
}