/* =========================================================
   OLD DUDES D&D - TAVERN JUKEBOX
   ========================================================= */

.music-page{
    background:
        radial-gradient(circle at 85% 10%,rgba(169,67,34,.16),transparent 32%),
        #100b08;
    min-height:100vh;
}

.music-page .site-header{
    position:absolute;
}

.music-hero{
    position:relative;
    min-height:590px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:150px clamp(24px,7vw,110px) 90px;

    background:
        radial-gradient(circle at 75% 40%,rgba(217,155,57,.19),transparent 25%),
        radial-gradient(circle at 75% 42%,rgba(118,42,20,.26),transparent 44%),
        linear-gradient(135deg,#100b08 0%,#201008 52%,#100b08 100%);

    border-bottom:1px solid rgba(217,155,57,.25);
}

.music-hero::after{
    content:"♪";
    position:absolute;
    right:clamp(25px,10vw,150px);
    top:50%;
    transform:translateY(-50%) rotate(-8deg);
    color:rgba(217,155,57,.10);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(14rem,28vw,28rem);
    line-height:1;
    pointer-events:none;
}

.music-hero-inner{
    position:relative;
    z-index:2;
    max-width:760px;
}

.music-title{
    margin:18px 0 24px;
    font-size:clamp(4rem,9vw,8rem);
    line-height:.82;
    letter-spacing:-.055em;
}

.music-title span{
    color:var(--gold);
    font-size:.70em;
    letter-spacing:.01em;
}

.music-intro{
    max-width:680px;
    margin:0 0 30px;
    color:var(--paper);
    font-size:1.18rem;
    line-height:1.75;
}

.music-count{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 15px;
    border:1px solid rgba(217,155,57,.38);
    background:rgba(10,6,4,.45);
    color:var(--gold);
    font-family:Arial,sans-serif;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.music-library{
    padding:90px clamp(24px,7vw,110px) 110px;
}

.music-library-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:42px;
}

.music-library-heading p:last-child{
    max-width:460px;
    margin:0;
    color:var(--paper);
    line-height:1.65;
}

.track-list{
    max-width:1100px;
    margin:0 auto;
    border-top:1px solid rgba(217,155,57,.30);
}

.track-card{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:25px;
    align-items:center;
    padding:25px 10px;
    border-bottom:1px solid rgba(217,155,57,.22);
    transition:background .2s ease,padding .2s ease;
}

.track-card:hover{
    padding-left:18px;
    padding-right:18px;
    background:rgba(217,155,57,.055);
}

.track-play{
    width:72px;
    height:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid var(--gold);
    background:transparent;
    color:var(--gold);
    cursor:pointer;
    font-family:Arial,sans-serif;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}

.track-play:hover,
.track-card.playing .track-play{
    background:var(--gold);
    color:var(--ink);
    transform:translateY(-2px);
}

.play-icon{
    font-size:1.15rem;
    line-height:1;
}

.play-text{
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.track-number{
    margin:0 0 5px;
    color:#8f8069;
    font-family:Arial,sans-serif;
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.track-title{
    margin:0 0 13px;
    color:var(--cream);
    font-size:clamp(1.25rem,2.2vw,1.75rem);
    line-height:1.2;
}

.track-controls{
    display:grid;
    grid-template-columns:minmax(120px,1fr) auto;
    align-items:center;
    gap:18px;
}

.track-seek{
    width:100%;
    height:4px;
    appearance:none;
    -webkit-appearance:none;
    background:rgba(243,227,198,.18);
    border-radius:0;
    outline:none;
    cursor:pointer;
}

.track-seek::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border:0;
    border-radius:50%;
    background:var(--gold);
}

.track-seek::-moz-range-thumb{
    width:14px;
    height:14px;
    border:0;
    border-radius:50%;
    background:var(--gold);
}

.track-time{
    min-width:94px;
    color:#aa9476;
    font-family:Arial,sans-serif;
    font-size:.61rem;
    font-weight:700;
    letter-spacing:.06em;
    text-align:right;
}

.music-note{
    max-width:850px;
    margin:55px auto 0;
    padding:30px;
    border:1px solid rgba(217,155,57,.24);
    background:#160d08;
    color:var(--paper);
    text-align:center;
    line-height:1.7;
}

.music-note strong{
    color:var(--gold);
}

.music-back{
    text-align:center;
    padding:0 24px 90px;
}

@media(max-width:820px){

    .music-hero{
        min-height:520px;
        padding:125px 24px 70px;
    }

    .music-hero::after{
        right:-40px;
        opacity:.55;
    }

    .music-library{
        padding:70px 20px 80px;
    }

    .music-library-heading{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .track-card{
        grid-template-columns:62px minmax(0,1fr);
        gap:15px;
        padding:20px 0;
    }

    .track-card:hover{
        padding-left:0;
        padding-right:0;
    }

    .track-play{
        width:58px;
        height:58px;
    }

    .track-controls{
        grid-template-columns:1fr;
        gap:8px;
    }

    .track-time{
        text-align:left;
    }

    .music-title{
        font-size:clamp(3.7rem,17vw,6rem);
    }
}


/* =========================================================
   OLD DUDES BAND - FULL ART BANNER
   Entire image remains visible. Nothing overlays the artwork.
   ========================================================= */

.music-page .site-header{
    position:relative;
    top:auto;
    left:auto;
    background:
        linear-gradient(
            180deg,
            #160d08,
            #100b08
        );
    border-bottom:1px solid rgba(217,155,57,.25);
}

.music-band-banner{
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#080503;
    border-bottom:1px solid rgba(217,155,57,.28);
}

.music-band-banner img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    margin:0 auto;
}

/*
   Text now lives in its own section BELOW the artwork.
*/
.music-hero{
    min-height:0;
    padding-top:75px;
    padding-bottom:75px;
}

@media(max-width:820px){

    .music-band-banner img{
        width:100%;
        height:auto;
    }

    .music-hero{
        min-height:0;
        padding-top:55px;
        padding-bottom:55px;
    }
}