/* CMF website-local Halo Reel coverflow + selected Music Player composition. */
.page-music .music-gallery{position:relative;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr);grid-template-rows:auto auto auto;column-gap:clamp(1.5rem,4vw,5rem);padding:clamp(2rem,4vw,4.5rem) var(--gutter) clamp(3rem,6vw,6rem);align-items:center}
.record-lead{grid-column:1;grid-row:1;align-self:end}
.music-gallery .eyebrow{font:600 .8rem/1.5 var(--sans);letter-spacing:.15em;color:var(--accent);margin:0 0 1.5rem}
.record-stage{grid-column:2;grid-row:1/4;min-width:0;position:relative}
.record-track{list-style:none;margin:0;padding:1.4rem 0;display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:12%;position:relative}
.record-track::-webkit-scrollbar{display:none}
.record-track li{flex:0 0 76%;min-width:0;scroll-snap-align:center}
.record-track a{display:block;position:relative;color:var(--text);text-decoration:none;cursor:pointer;touch-action:pan-y}
.record-track img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;border-radius:2px;box-shadow:0 18px 32px -22px #28272280}
.record-fallback{display:block;text-align:center;padding:.6rem}
.is-music-ready .record-fallback{display:none}
.record-details{grid-column:1;grid-row:2;min-width:0}
.music-gallery .record-details h2{font:700 clamp(3rem,6vw,6.6rem)/1.05 var(--display);letter-spacing:-.055em;margin:0}
.record-subtitle{font-size:clamp(1.15rem,1.7vw,1.6rem);color:var(--text);line-height:1.4;margin:1rem 0}
.record-note{font-size:1rem;line-height:1.65;color:var(--muted);max-width:34ch;margin:0 0 1.4rem}
.record-actions{display:flex;gap:.2rem 1.3rem;flex-wrap:wrap;margin-top:1rem}
.record-actions a,.record-play{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--text);font:600 .9rem/1.4 var(--sans);text-decoration:none;border:0;background:none;padding:.4rem 0;cursor:pointer}
.record-actions a:hover span,.record-play:hover span{text-decoration:underline;text-underline-offset:.3em}
.music-gallery svg{width:21px;height:21px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.record-hint{margin:1.4rem 0 0;text-align:center;font-size:.78rem;color:var(--muted)}
.record-player{margin-top:1.5rem;width:100%;max-width:700px;min-width:0}
.record-embed{display:block;width:100%;height:120px;border:0;background:transparent}
.record-noscript{font-size:.85rem;color:var(--muted)}
.record-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.music-gallery [hidden]{display:none!important}
.music-gallery :is(a,button,input):focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.record-track a[aria-current=true]::after{content:"";position:absolute;inset:auto 42% -12px;height:3px;background:var(--accent)}
.music-gallery[data-mode=coverflow] .record-track{height:clamp(360px,40vw,620px);overflow:hidden;display:block;perspective:1100px;touch-action:pan-y;padding:0}
.music-gallery[data-mode=coverflow] .record-track li{position:absolute;left:50%;top:50%;width:70%;max-width:540px;transform:translate(-50%,-50%) translateX(var(--record-x)) scale(var(--record-scale)) rotateY(var(--record-turn));z-index:var(--record-z);transform-origin:center;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s;filter:brightness(var(--record-light))}
.music-gallery[data-mode=coverflow] .record-track a{width:100%}
.music-gallery[data-mode=shelf] .record-track{padding-inline:12%;touch-action:pan-x pan-y}
@media(max-width:800px){
 .page-music .music-gallery{grid-template-columns:1fr;gap:0;padding-block:1.7rem 3rem}
 .record-lead{grid-column:1;grid-row:1;align-self:start}
 .music-gallery .eyebrow{margin-bottom:.4rem}
 .record-stage{grid-column:1;grid-row:2;margin-inline:calc(var(--gutter)*-1)}
 .record-details{grid-column:1;grid-row:3;margin-top:1.7rem}
 .music-gallery .record-details h2{font-size:clamp(2.7rem,10vw,4rem)}
 .record-player{width:100%;max-width:none}
 .record-note{max-width:45ch;font-size:.93rem;margin-bottom:.7rem}
 .record-subtitle{margin:.65rem 0;font-size:1.18rem}
 .record-hint{margin:.6rem 0 0;font-size:.75rem}
 .record-actions{gap:.2rem 1.2rem;margin-top:.8rem}
 .record-track li{flex-basis:78vw;max-width:520px}
}
@media(prefers-reduced-motion:reduce){.music-gallery *, .music-gallery *::before,.music-gallery *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Source-reviewed 21st.dev player presentation; Bandcamp owns actual playback for now. */
.record-deck{max-width:390px;margin:1.8rem auto 0;padding:0 1rem}
.record-identity{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:60px}
.record-identity>div{min-width:0}
.record-song{font:600 .95rem/1.5 var(--sans);margin:0;color:var(--text);text-wrap:balance}
.record-artist{font:.8rem/1.5 var(--sans);color:var(--muted);margin:.25rem 0 0}
.record-vinyl{position:relative;flex:0 0 56px;height:56px;border-radius:50%;background:repeating-radial-gradient(circle at center,#27251f 0 2px,#403b35 2px 3px);transform:rotate(-18deg)}
.record-vinyl::before{content:"";position:absolute;inset:17px;border:8px solid var(--accent);border-radius:50%;background:var(--paper,var(--bg,#f7f5ee))}
.record-transport{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:.65rem}
.record-transport button{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;padding:0;transition:transform .2s}
.record-transport button:hover{transform:scale(1.08)}
.record-transport .record-play{font-size:.85rem;white-space:nowrap}
.record-listening{scroll-margin-top:90px}
.record-listening[hidden]{display:none!important}
.record-listening h2:focus{outline:0}
.record-return{display:inline-flex;align-items:center;min-height:44px;margin-top:.5rem;color:var(--text);font:500 .85rem/1.5 var(--sans);text-underline-offset:.3em}
.record-listening :is(a,iframe):focus-visible{outline:3px solid var(--accent);outline-offset:5px}
@media(max-width:800px){.record-deck{margin-top:1.25rem;padding-inline:var(--gutter)}.record-transport{gap:1rem}.record-listening{scroll-margin-top:75px}}

/* Album changes keep the surrounding layout still; only the coverflow moves. */
.record-deck{width:100%;box-sizing:border-box}
.record-identity{display:grid;grid-template-columns:56px minmax(0,1fr);justify-content:normal}
.is-music-ready .record-details{display:grid}
.is-music-ready .record-details>[data-release-detail]{grid-area:1/1;align-self:start}
.music-gallery.is-music-ready .record-details>[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.music-gallery[data-mode=shelf] .record-track{overscroll-behavior-x:contain}
.music-gallery[data-mode=shelf] .record-track a{touch-action:pan-x pan-y}

/* Compact identity, with complete track credits on focus/hover and in the real player. */
.record-identity{min-height:56px}
.record-song{text-wrap:initial;line-height:1.35}
.record-artist{margin-top:.15rem;line-height:1.35}
.record-deck{margin-top:1rem}
.record-transport{margin-top:.35rem}
.page-music .music-gallery{padding-bottom:clamp(1.25rem,2.5vw,2.5rem)}
.page-music .music-crossover{padding-block:clamp(1.5rem,3vw,3rem)}
.page-music .record-details .record-subtitle{margin:.55rem 0}
.page-music .record-note{margin-bottom:.4rem}
.page-music .record-actions{margin-top:.5rem}

/* Authored artifact gallery: live footage on an open, staggered filmstrip. */
.page-music .performance-gallery{padding-block:clamp(2.25rem,4vw,4rem);background:var(--ink-2);overflow:hidden}
.performance-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:2rem;margin-bottom:1.4rem}
.page-music .performance-intro h2{font-size:clamp(3rem,6.5vw,7rem);letter-spacing:-.055em;word-spacing:.08em;line-height:.98;text-wrap:initial}
.performance-intro h2 span{color:var(--accent)}
.performance-intro .lede{margin:0 0 .4rem;line-height:1.4;font-size:clamp(1.1rem,1.8vw,1.5rem)}
.performance-intro .muted{margin:0;font-size:.85rem}
.performance-reel{position:relative;display:flex;align-items:start;gap:clamp(1.25rem,3vw,3rem);padding:1rem var(--gutter) .5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;touch-action:pan-x pan-y}
.performance-cut{flex:0 0 clamp(300px,57vw,780px);min-width:0;scroll-snap-align:start}
.performance-cut:nth-of-type(even){padding-top:2rem}
.performance-cut>a{display:block;text-decoration:none;color:var(--text)}
.performance-picture{display:block;position:relative;aspect-ratio:16/9;background:var(--text);overflow:hidden;border-radius:2px}
.performance-picture::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.68));pointer-events:none}
.performance-picture img{width:100%;height:100%;object-fit:cover}
.performance-watch{position:absolute;inset:auto auto 1rem 1.2rem;z-index:1;display:flex;align-items:center;gap:.5rem;color:#fff;font:600 .9rem/1.4 var(--sans);min-height:44px}
.performance-watch svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.performance-caption{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;margin-top:.9rem}
.performance-number{color:var(--accent);font-size:.8rem;line-height:1.7;font-variant-numeric:tabular-nums}
.performance-caption strong{display:block;font:700 clamp(1.1rem,2.3vw,2rem)/1.2 var(--display);letter-spacing:-.035em}
.performance-place{display:block;color:var(--muted);font-size:.8rem;margin-top:.4rem}
.performance-note{font-size:.8rem;color:var(--muted);margin:.1rem 0 1rem 2.6rem}
.performance-cut>a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.performance-cut>a:is(:hover,:focus-visible) strong{color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
 .performance-picture{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
 .performance-picture img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
 .performance-cut>a:focus-visible .performance-picture{transform:translateY(-5px) rotate(-.5deg)}
 .performance-cut>a:focus-visible img{transform:scale(1.035)}
 @media(hover:hover){.performance-cut>a:hover .performance-picture{transform:translateY(-5px) rotate(-.5deg)}.performance-cut>a:hover img{transform:scale(1.035)}}
}
@media(max-width:800px){
 .record-deck{margin-top:.85rem}
 .record-details{margin-top:1rem}
 .page-music .record-note{line-height:1.5}
 .page-music .record-subtitle{font-size:1.08rem}
 .page-music .music-crossover .split:has(>figure){gap:1.5rem}
 .performance-intro{grid-template-columns:1fr;gap:.8rem;margin-bottom:.8rem}
 .performance-intro .lede{font-size:1.05rem}
 .performance-intro .muted{font-size:.8rem}
 .performance-reel{gap:1rem;padding-top:.6rem}
 .performance-cut{flex-basis:82vw}
 .performance-cut:nth-of-type(even){padding-top:1rem}
 .performance-caption{margin-top:.7rem;grid-template-columns:1.5rem 1fr;gap:.4rem}
 .performance-note{margin-left:1.9rem}
 .performance-watch{inset:auto auto .5rem .7rem;font-size:.8rem}
}

.page-music #book{padding-block:clamp(2rem,4vw,4rem)}

/* Keep the catalogue calm around the artwork, with no decorative numbering. */
.page-music .record-hint{margin-top:.65rem}
.page-music .record-deck{margin-top:.75rem}
.page-music .performance-caption{display:block}
.page-music .performance-note{margin-left:0}
.page-music #book{padding-block:clamp(1.75rem,3vw,3rem) 1.25rem;scroll-margin-top:100px}
.page-music #book h2{font-size:clamp(1.8rem,3.2vw,3rem)}
.page-music #book .lede{margin-top:.75rem!important}
.page-music #book .icon-actions{margin-top:.75rem}
.page-music .record-listening{padding-block:1.25rem clamp(2rem,4vw,3rem);scroll-margin-top:100px}
.page-music .record-listening h2{font-size:clamp(1.6rem,2.6vw,2.5rem)}
.page-music .record-player{margin-top:1rem;max-width:700px}
