/* music.css 1.1.1 – music page */

/* "show music" on the main page (unchanged look, moved here from style.css) */
#button-toggle_music {
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    opacity: .8;
    padding: 8px 12px 4px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}

/* ---------- overlay ---------- */
#container-music {
    --m-ink: #12050b;
    --m-gold: #d9b46c;
    --m-cream: #f4ebdd;
    --m-dim: #f4ebdd9e;
    --m-line: #d9b46c2e;
    --m-card: #ffffff08;
    --m-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --m-dur: 1.2s;

    position: fixed; inset: 0; z-index: 111111;
    box-sizing: border-box; width: 100%; height: 100%;
    padding: 0 0 clamp(48px, 12vh, 120px);
    overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;

    font: 400 clamp(15px, 1.2vmin + 11px, 19px)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: .015em; text-align: left; color: var(--m-cream);
    background:
        radial-gradient(120% 70% at 15% -10%, #6a1838 0%, #6a183800 60%),
        radial-gradient(90% 60% at 110% 105%, #5a3a12 0%, #5a3a1200 55%),
        linear-gradient(#1f0812, var(--m-ink) 70%);

    opacity: 0; visibility: hidden; transform: translateX(100vw);
    transition: transform var(--m-dur) ease, opacity var(--m-dur) ease, visibility 0s var(--m-dur);
}
#container-music.open {
    opacity: 1; visibility: visible; transform: none;
    transition: transform var(--m-dur) ease, opacity var(--m-dur) ease, visibility 0s;
}
#container-music :focus-visible { outline: 2px solid var(--m-gold); outline-offset: 2px; }

/* "hide music" */
#button-close_music {
    position: fixed; top: 12px; right: 12px; z-index: 2;
    font: 600 .75em/1 system-ui, -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: var(--m-gold); background: #12050bcc; border: 1px solid var(--m-line); border-radius: 2em;
    padding: .8em 1.2em; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .3s, color .3s, border-color .3s;
}
@media (hover: hover) {      /* only with a mouse – on touch screens hover colours would stick after a tap */
    #button-close_music:hover { background: var(--m-gold); color: var(--m-ink); border-color: var(--m-gold); }
    .m-track:hover  { background: #ffffff06; }
    .m-track:hover .m-play { background: var(--m-gold); border-color: var(--m-gold); color: var(--m-ink); }
    .m-video:hover { border-color: #d9b46c80; }
    .m-video:hover .m-vplay { background: var(--m-gold); color: var(--m-ink); transform: scale(1.06); }
}

/* one centered column, 16px gutter on phones */
#container-music .m-head, #audios, #videos { width: min(100% - 32px, 60rem); margin-inline: auto; }

/* ---------- header ---------- */
#container-music .m-head {
    padding: clamp(80px, 14vh, 150px) 0 clamp(24px, 5vh, 48px);
    margin-bottom: clamp(28px, 6vh, 56px);
    border-bottom: 1px solid var(--m-line);
}
#container-music .m-kicker {
    margin: 0; color: var(--m-gold);
    font-size: .72em; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
}
#container-music h1 {
    margin: .12em 0 .15em;
    font: 400 clamp(2.8rem, 10vw, 5.6rem)/1 var(--m-serif); letter-spacing: -.01em;
}
#container-music .m-sub { margin: 0; color: var(--m-dim); }

#container-music h2 {
    display: flex; align-items: baseline; gap: .5em; margin: 0 0 .7em;
    font: 400 clamp(1.5rem, 4.5vw, 2.1rem)/1.1 var(--m-serif);
}
#container-music h2 small {
    font: 600 .42em/1 system-ui, -apple-system, sans-serif; letter-spacing: .2em; color: var(--m-gold);
}
#audios { margin-bottom: clamp(48px, 9vh, 96px); }

/* ---------- tracklist ---------- */
.m-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--m-line); }
.m-track {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center; column-gap: clamp(10px, 2vw, 18px);
    padding: .85em .5em; border-bottom: 1px solid var(--m-line);
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background .4s;
}
.m-track.playing { background: linear-gradient(90deg, #d9b46c17, #d9b46c00 80%); }

.m-no {
    min-width: 1.5em; color: var(--m-gold); opacity: .7;
    font: 400 .95em/1 var(--m-serif); font-variant-numeric: tabular-nums;
}
.m-play {
    display: grid; place-items: center; width: 2.6em; height: 2.6em; padding: 0;
    border-radius: 50%; border: 1px solid var(--m-line); background: transparent; color: var(--m-gold);
    cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.m-play svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.m-track.playing .m-play { background: var(--m-gold); border-color: var(--m-gold); color: var(--m-ink); }

.m-meta  { display: flex; flex-direction: column; min-width: 0; }
.m-title { font: 400 1.15em/1.25 var(--m-serif); overflow-wrap: anywhere; }
.m-comp  { color: var(--m-dim); font-size: .74em; letter-spacing: .14em; text-transform: uppercase; }
.m-time  { color: var(--m-dim); font-size: .82em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* progress line: always there, tap or drag to jump; gold + knob on the current track */
.m-bar {
    --p: 0;
    grid-column: 2 / -1; position: relative; display: block;
    height: 24px; margin: .2em 0 -.55em; cursor: pointer; touch-action: none;
}
.m-bar::before, .m-fill {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
}
.m-bar::before { background: var(--m-line); }
.m-fill { background: var(--m-gold); transform: scaleX(var(--p)); transform-origin: left; opacity: .5; }
.m-knob {
    position: absolute; top: 50%; left: calc(var(--p) * 100%);
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--m-gold); box-shadow: 0 0 0 4px #d9b46c33;
    opacity: 0; transition: opacity .3s;
}
.m-track.active .m-fill { opacity: 1; }
.m-track.active .m-knob { opacity: 1; }
.m-track audio { display: none; }
.m-track.broken { cursor: default; opacity: .45; }
.m-track.broken .m-bar { visibility: hidden; }

/* ---------- video cards ---------- */
.m-videos {
    display: grid; gap: clamp(16px, 3vw, 28px);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.m-video {
    margin: 0; overflow: hidden;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 10px;
    transition: border-color .4s;
}
.m-video.playing { border-color: #d9b46c80; }

/* fixed 16:9 frame – the video sits inside, whatever its own proportions are */
.m-frame { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 45%, #2a0e18, #000 75%); }
.m-frame video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    max-width: none; margin: 0; border: 0; object-fit: contain; background: transparent;
}
.m-vplay {
    position: absolute; inset: 0; margin: auto; z-index: 1;
    display: grid; place-items: center; width: 3.6em; height: 3.6em; padding: 0;
    border-radius: 50%; border: 1px solid #d9b46c80; background: #12050bb3; color: var(--m-gold);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    cursor: pointer; transition: background .3s, color .3s, transform .3s;
}
.m-vplay svg { width: 1.4em; height: 1.4em; fill: currentColor; margin-left: .15em; }
.m-video.started .m-vplay { display: none; }
.m-broken {
    position: absolute; inset: 0; display: none; place-items: center; padding: 1em;
    background: #12050be6; color: var(--m-dim); font-size: .85em; text-align: center;
}
.m-video.broken .m-broken { display: grid; z-index: 2; }

.m-video figcaption { display: flex; flex-direction: column; gap: .15em; padding: .8em 1em 1em; }