:root {
            --bg-deep: #0a0e14; /* Deep Glaucous-Black */
            --glaucous: #6082B6;
            --gold-light: #C5B358;
            --gold-dark: #9e8a3a;
            --off-white: #e0e0e0;
        }

        body, html {
            margin: 0;
            padding: 0;
            background-color: var(--bg-deep);
            color: var(--off-white);
            font-family: 'Inter', sans-serif;
            min-height: 100vh; /* Changed from fixed height */
            overflow-x: hidden;
            overflow-y: auto; /* Allow scrolling for content-heavy mobile views */
        }

        .main-wrapper {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        /* LEFT PANEL: Content */
        .left-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 8%;
            z-index: 10;
        }

        /* Gold Sparkle Animation for SHEBA */
        .album-title {
            font-size: clamp(3rem, 10vw, 6rem);
            font-weight: 800;
            margin: 0;
            text-transform: uppercase;
            position: relative;
            background: linear-gradient(to right, #fff 20%, var(--gold-light) 40%, var(--gold-dark) 60%, #fff 80%);
            background-size: 200% auto;
            color: #fff;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 4s linear infinite;
        }

        @keyframes shine {
            to { background-position: 200% center; }
        }

        .artist-link {
            text-decoration: none;
            color: var(--glaucous);
            letter-spacing: 0.5rem;
            font-size: 1.2rem;
            margin-top: 10px;
            display: inline-block;
            transition: 0.3s;
        }

        .artist-link:hover {
            color: var(--gold-light);
            letter-spacing: 0.6rem;
        }

        .links-stack {
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .platform-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--off-white);
            font-size: 0.9rem;
            letter-spacing: 0.2rem;
            transition: 0.3s;
        }

        .platform-link i {
            margin-right: 15px;
            width: 25px;
            color: var(--gold-light);
            font-size: 1.3rem;
        }

        .platform-link:hover {
            color: var(--glaucous);
            transform: translateX(5px);
        }

        /* RIGHT PANEL: 3D Spinning Art */
        .right-display {
            flex: 1.2;
            perspective: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at center, #1a232e 0%, #0a0e14 100%);
        }

        .card-container {
            width: 400px;
            height: 400px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }

        .card-container.is-flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            box-shadow: 0 50px 100px rgba(0,0,0,0.9);
            border: 1px solid rgba(255,255,255,0.05);
        }

        .card-face.back {
            transform: rotateY(180deg);
        }

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

        /* Hint Animation */
        .click-hint {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--gold-light);
            font-size: 0.7rem;
            letter-spacing: 0.3rem;
            text-transform: uppercase;
            opacity: 0.6;
            animation: pulseHint 2s infinite;
            pointer-events: none; /* User clicks through this to the card */
            white-space: nowrap;
        }

        @keyframes pulseHint {
            0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
            50% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
        }

        /* Hide hint when the card is flipped */
        .card-container.is-flipped + .click-hint {
            display: none;
        }

        @media (max-width: 1024px) {
    .main-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .left-content {
        flex: none;
        width: 100%;
        padding: 40px 0; /* Vertical breathing room */
        align-items: center;
        text-align: center;
        order: 2; /* Move text below the album art for better mobile flow */
    }

    .right-display {
        flex: none;
        width: 100%;
        min-height: 50vh; /* Ensure art takes up top half of screen */
        padding: 40px 0;
        order: 1; /* Art appears first on mobile */
    }

    .card-container {
        width: 75vw; /* Scale based on screen width */
        height: 75vw;
        max-width: 320px;
        max-height: 320px;
    }

    .album-title {
        font-size: 15vw; /* Larger, bolder impact on mobile */
        margin-bottom: 5px;
    }

    .links-stack {
        margin-top: 30px;
        width: 80%; /* Center the link block */
        align-items: center;
    }

    .platform-link {
        justify-content: center;
        width: 100%;
    }

    .click-hint {
        bottom: -30px; /* Adjust hint position for smaller scale */
    }
}

.artist-bio {
    margin-top: 40px;
    max-width: 450px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--glaucous);
    opacity: 0.8;
    border-top: 1px solid rgba(197, 179, 88, 0.2);
    padding-top: 20px;
}

.artist-bio strong {
    color: var(--gold-light);
}

@media (max-width: 1024px) {
    .artist-bio { margin: 40px auto 0; text-align: center; }
}