/* ==========================================================================
   FIDES IN REALITY — MUSIC
   Public music pages only.
   ========================================================================== */
.music-hero{
   min-height:20vh;
   display:grid;
   place-items:center;
   padding:5px 5px;
   background:radial-gradient(circle at 68% 22%,#213c4d 0,#071722 52%,#03090d 100%);
   color:#fff;
   text-align:center
}

.music-hero-inner{
   max-width:820px
}

.music-hero h1{
   margin:0 auto;
   font:clamp(22px,7vw,41px)/1 Georgia,serif
}

.music-hero p:not(.eyebrow){
   max-width:680px;
   margin:auto;
   color:#e8dfd1;
   font:clamp(18px,2vw,22px)/1.7 Georgia,serif
}

.music-page,.track-detail,.album-detail{
   width:min(1180px,calc(100% - 40px));
   margin:auto;
   padding:clamp(55px,8vw,100px) 0
}

.music-section-heading{
   text-align: center;
   margin:0 auto 26px
}

.music-section-heading h2,.music-reading h2{
   margin:4px auto;
   font:clamp(32px,4vw,48px)/1 Georgia,serif;
   color:var(--navy)
}

.music-overline{
   margin:0;
   color:#98701e;
   text-transform:uppercase;
   letter-spacing:.2em;
   font-size:11px
}

.album-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
   gap:26px;
   margin-bottom:70px
}

.album-card{
   color:inherit;
   text-decoration:none
}

.album-art,.track-cover,.detail-cover{
   
   place-items:center;
   overflow:hidden;
   background:linear-gradient(145deg,#0a1d29,#183346);
   color:var(--gold);
   box-shadow:0 18px 50px rgba(7,23,34,.14)
}

.album-art{
   aspect-ratio:1;
   border-radius:4px
}

.album-art img,.track-cover img,.detail-cover img{
   width:100%;
   height:400px;
   object-fit: contain;
}

.album-art span{font:38px Georgia,serif}.album-card small{display:block;margin-top:14px;color:#8b7755}

.album-card h3{margin:5px 0;font:24px Georgia,serif}

.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:28px}

.track-card{
   overflow:hidden;
   background:#fff;
   border:1px solid rgba(7,23,34,.08);
   box-shadow:0 16px 44px rgba(7,23,34,.07)
}

.track-cover{
   text-decoration:none
}

.track-cover span{
   font-size:36px
}

.track-card-body{
   padding:22px
}

.track-card h3{margin:4px 0;font:28px Georgia,serif}

.track-card h3 a{color:var(--navy);text-decoration:none}

.track-card p{color:#766e63}

.featured-label{color:#9b741f;text-transform:uppercase;letter-spacing:.14em}

.fir-audio{width:100%;margin-top:12px}

.track-links{display:flex;gap:20px;margin-top:18px}

.track-links a{color:#7e5e18;text-underline-offset:4px}

.music-public-empty{text-align:center;padding:70px 20px;background:#fff}

.music-public-empty span{font-size:46px;color:var(--gold)}

.music-public-empty h3{font:32px Georgia,serif}

.track-detail-grid,.album-detail-head{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:clamp(35px,7vw,90px);align-items:center}

.detail-cover{aspect-ratio:1}

.detail-cover span{font:70px Georgia,serif}

.track-detail h1,.album-detail h1{margin:10px 0;font:clamp(48px,7vw,86px)/.98 Georgia,serif;color:var(--navy)}

.track-subtitle{font:22px Georgia,serif;color:#6b6258}

.track-description{max-width:700px;color:#514c45;font:18px/1.75 Georgia,serif}

.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.music-button{padding:12px 20px;border:1px solid var(--gold);background:var(--navy);color:#fff;text-decoration:none;cursor:pointer}

.music-button.ghost{background:transparent;color:var(--navy)}

.music-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.music-tags span{padding:7px 10px;background:#eee8dc;color:#5c4c2e;font-size:12px}

.music-reading{max-width:820px;margin:80px auto 0;padding-top:45px;border-top:1px solid #ddd3c3}

.music-reading.compact{margin-top:45px}.lyrics,.credits{white-space:normal;color:#35322e;font:18px/1.95 Georgia,serif}

.music-copyright{text-align:center;margin:60px 0 0;color:#81796e;font-size:12px}

.album-tracklist{max-width:900px;margin:70px auto}

.album-tracklist article{display:grid;grid-template-columns:45px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #ddd3c3}

.album-tracklist h2{margin:0;font:24px Georgia,serif}.album-tracklist h2 a{color:var(--navy);text-decoration:none}

.track-number{color:#9b741f;font:20px Georgia,serif}

@media(max-width:720px){
   .track-detail-grid,.album-detail-head{grid-template-columns:1fr}
   .detail-cover{max-width:440px}
   .music-page,.track-detail,.album-detail{width:min(100% - 28px,1180px)}
}

/* Stage 4 media extension */
.music-video-wrap{margin-top:24px;overflow:hidden;background:#03090d;box-shadow:0 16px 45px rgba(7,23,34,.16)}

.music-video-wrap video{display:block;width:100%;max-height:72vh;background:#000}

.detail-actions .music-button.ghost{display:inline-flex;align-items:center;justify-content:center}

/* Stage 4 — audio/PDF download actions */
.track-links{flex-wrap:wrap;align-items:center}
.track-links a{white-space:nowrap}


/* ==========================================================================
   Stage 4 — balanced artwork + page navigation
   Artwork is never cropped. The frame supplies a calm, consistent canvas.
   ========================================================================== */
.album-art,
.track-cover,
.detail-cover{
    position:relative;
    display:grid;
    place-items:center;
    background:#f3efe7;
    border:1px solid rgba(7,23,34,.08);
}

.album-art,
.track-cover{
    aspect-ratio:1 / 1;
}

.track-cover{
    min-height:0;
}

.detail-cover{
    width:100%;
    aspect-ratio:1 / 1;
    max-height:560px;
}

.album-art img,
.track-cover img,
.detail-cover img{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
}

.track-card .track-cover{
    height:auto;
}

.music-page-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 16px;
    margin:0 0 32px;
    padding:0 0 18px;
    border-bottom:1px solid rgba(7,23,34,.12);
}

.music-page-nav a,
.music-back-button{
    appearance:none;
    border:0;
    background:transparent;
    padding:7px 0;
    color:#7e5e18;
    font:inherit;
    text-decoration:none;
    cursor:pointer;
    text-underline-offset:4px;
}

.music-page-nav a:hover,
.music-page-nav a:focus-visible,
.music-back-button:hover,
.music-back-button:focus-visible{
    text-decoration:underline;
}

.music-back-button{
    margin-left:auto;
}

@media(max-width:720px){
    .detail-cover{
        max-width:440px;
        margin-inline:auto;
    }
    .music-page-nav{
        margin-bottom:24px;
    }
    .music-back-button{
        margin-left:0;
    }
}


/* ==========================================================================
   Stage 4.1 — definitive artwork containment
   These final rules intentionally override all earlier music image sizing.
   ========================================================================== */
.album-art,
.track-cover,
.detail-cover{
    position:relative !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#f3efe7 !important;
}

.album-art img,
.track-cover img,
.detail-cover img{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
}

.detail-cover{
    max-width:560px !important;
    max-height:none !important;
}

@media(max-width:720px){
    .detail-cover{
        max-width:440px !important;
        margin-inline:auto !important;
    }
}


/* ==========================================================================
   Stage 4.2 — artwork stacking note
   No z-index is assigned to artwork containers or their images.
   ========================================================================== */