/* One video at a time, held in a transparent jewel case. */
#exhibition.mainline > #music-album { padding:34px 0 38px; }
#exhibition.mainline #music-album > h2 { margin-bottom:0; }
.music-album { --page-width:424px; --page-height:380px; --album-transport-height:44px; }
.album-layout { display:grid; gap:12px; }
.album-stage { position:relative; min-width:0; touch-action:pan-y; perspective:1500px; isolation:isolate; }
.album-stack { position:relative; height:calc(var(--page-height) + 40px); perspective:1500px; perspective-origin:50% 45%; }
.album-stack::after { content:''; position:absolute; left:25%; right:25%; bottom:5px; height:24px; border-radius:50%; background:#0008; filter:blur(15px); z-index:-1; pointer-events:none; }
.album-page-shell { position:absolute; left:50%; top:16px; width:var(--page-width); height:var(--page-height); box-sizing:border-box; transform-style:flat; perspective:1600px; transform:translateX(-50%) translateX(calc(var(--case-spread,0) * var(--page-width) * var(--case-drift,.3) * .65)); transition:transform var(--case-settle,280ms) cubic-bezier(.24,.68,.22,1); border:2px solid #bdc6cb75; border-radius:6px; background:linear-gradient(125deg,#8b989e 0%,#2b333a 6%,#171d22 50%,#657078 100%); box-shadow:0 32px 38px -12px #000c,0 14px 18px -5px #000b,1px 1px 0 #d9e5eb90,2px 2px 0 #313b43,3px 3px 0 #7f8c9585,4px 4px 0 #252d33,5px 5px 0 #48545e,6px 6px 0 #182127,7px 7px 0 #85929c65,8px 8px 0 #172027,9px 9px 0 #5a68716b,10px 10px 0 #0b1115; cursor:grab; user-select:none; -webkit-user-select:none; }
.album-page-shell::before { content:""; position:absolute; inset:1px; border:1px solid #edf5fa50; border-radius:3px; background:linear-gradient(115deg,#f7fbff10,transparent 13%,#ffffff0c 13.1%,transparent 28%,transparent 79%,#f3f8fc12 79.2%,transparent 86%); box-shadow:0 2px 0 #f7faff2b inset,0 -3px 0 #0009 inset,3px 0 0 #ffffff08 inset; pointer-events:none; z-index:3; }
.album-page-shell::after { content:''; position:absolute; left:3px; top:7px; bottom:7px; width:12px; border-right:1px solid #d6dce338; background:repeating-linear-gradient(90deg,#dbe4ea1a 0 1px,#181b1e 1px 4px); box-shadow:1px 0 #edf0f219; pointer-events:none; z-index:3; }
.album-page-spine { position:absolute; top:8px; bottom:8px; left:-5px; width:7px; border:1px solid #b9c7d080; border-radius:2px; background:linear-gradient(90deg,#12181c,#71818d 32%,#26323d 50%,#8e9ca8 74%,#202a32); box-shadow:2px 1px 3px #0009,0 2px 0 #fff3 inset; pointer-events:none; }
.album-video { position:absolute; inset:6px 6px 6px 20px; overflow:hidden; background:#08090a; border:1px solid #e5eced1c; border-radius:2px; box-sizing:border-box; cursor:pointer; }
#exhibition.mainline .album-video video,.album-video-poster { position:absolute; inset:0 0 var(--album-transport-height); display:block; width:100%; height:calc(100% - var(--album-transport-height)); min-width:0; min-height:0; object-fit:contain; background:#080a09; }
.album-video-poster { pointer-events:none; }
.album-video audio { display:none; }
.album-video-poster[hidden],.album-page-play[hidden],.album-message[hidden],.album-media-controls [hidden] { display:none; }
.album-page-play { position:absolute; left:50%; top:calc(50% - var(--album-transport-height) / 2); transform:translate(-50%,-50%); z-index:5; width:60px; height:60px; padding:0; display:grid; place-items:center; border:1px solid #f3f4f14d; border-radius:50%; color:#fff; background:#14171b85; backdrop-filter:blur(12px); cursor:pointer; box-shadow:0 4px 24px #0004,0 1px 0 #ffffff19 inset; }
.album-page-play svg { width:25px; height:25px; }
.album-page-play:hover { background:#242d24d9; border-color:#fff; }
.album-media-controls { position:absolute; z-index:6; bottom:0; left:0; right:0; height:var(--album-transport-height); box-sizing:border-box; display:flex; align-items:center; gap:8px; padding:0 8px; background:linear-gradient(#111316,#0c0e10); border-top:1px solid #ffffff08; color:#eee; cursor:default; }
.album-seek { flex:1; min-width:24px; height:44px; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; background:transparent; }
.album-seek::-webkit-slider-runnable-track { height:2px; border-radius:2px; background:#cdd7d546; }
.album-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:8px; width:8px; border-radius:50%; background:#d4dcd9; margin-top:-3px; box-shadow:0 0 0 4px #ffffff05; transition:box-shadow .2s; }
.album-seek:hover::-webkit-slider-thumb,.album-seek:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 5px #ffffff14; }
.album-seek::-moz-range-track { height:2px; border-radius:2px; background:#cdd7d546; }
.album-seek::-moz-range-thumb { height:8px; width:8px; border:0; border-radius:50%; background:#d4dcd9; }
.album-time { font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; color:#a3acae; }
.album-fullscreen,.album-video-mute,.album-mute,.album-video-previous,.album-video-play,.album-video-next { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; border:0; padding:0; border-radius:50%; color:#edf0e7; background:transparent; cursor:pointer; }
.album-fullscreen svg,.album-video-mute svg,.album-mute svg,.album-video-previous svg,.album-video-play svg,.album-video-next svg { width:19px; height:19px; }
.album-fullscreen:hover,.album-video-mute:hover,.album-mute:hover,.album-video-previous:hover,.album-video-play:hover,.album-video-next:hover { background:#ffffff12; }
.album-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 18px; align-items:center; width:var(--page-width); max-width:100%; margin:0 auto; padding:0 2px; box-sizing:border-box; }
#exhibition.mainline .album-copy > h3 { grid-row:1; grid-column:1; font-size:24px; font-weight:400; line-height:1.2; letter-spacing:-.025em; margin:0; overflow-wrap:anywhere; }
.album-position { grid-row:2; grid-column:1; color:#8f998b; font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; margin:0; }
.album-controls { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:2px; }
.album-control { flex-shrink:0; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; color:var(--ink,#ecebe3); background:transparent; cursor:pointer; }
.album-control svg { display:block; width:22px; height:22px; }
.album-control[data-album-play] { width:48px; height:48px; margin:0 3px; background:#e3e6da; color:#172016; }
.album-control:hover { background:#ffffff12; }
.album-control[data-album-play]:hover { background:#fff; }
.album-control:disabled,.album-video-previous:disabled,.album-video-next:disabled { opacity:.22; cursor:default; }
.album-control:focus-visible,.album-page-play:focus-visible,.album-fullscreen:focus-visible,.album-video-mute:focus-visible,.album-mute:focus-visible,.album-seek:focus-visible { outline:2px solid #e3e8db; outline-offset:3px; }
#exhibition.mainline .album-message { grid-column:1 / -1; margin:8px 0 0; color:var(--quiet,#acada3); font-size:13px; line-height:1.4; }
.album-page-preview { position:absolute; inset:7px 7px 51px 21px; width:calc(100% - 28px); height:calc(100% - 58px); object-fit:contain; background:#08090a; pointer-events:none; z-index:7; }
.album-turn-sheet { --turn-progress:0; --turn-duration:650ms; position:absolute; inset:-1px; z-index:8; transform-origin:0 50%; transform-style:preserve-3d; transform:rotateY(calc(var(--turn-progress) * -162deg)); transition:transform var(--turn-duration) cubic-bezier(.24,.68,.22,1); pointer-events:none; border-radius:5px; }
.album-turn-art { position:absolute; inset:7px 7px 50px 20px; width:calc(100% - 27px); height:calc(100% - 57px); object-fit:contain; background:#08090a; transform:translateZ(7.1px); backface-visibility:hidden; }
.album-turn-sheet::before { content:""; position:absolute; inset:0; transform:translateZ(7px); backface-visibility:hidden; border:2px solid #cad7dfa3; border-radius:5px; box-sizing:border-box; background:linear-gradient(90deg,#8b9ba775 0,#202a34 8px,#70818f66 15px,#161e26 20px); box-shadow:0 1px 0 #fff7 inset,0 -2px 0 #020405 inset,0 8px 14px #0005; }
.album-turn-sheet::after { content:""; position:absolute; top:0; bottom:0; left:0; width:14px; transform-origin:0 50%; transform:translateZ(7px) rotateY(90deg); border:1px solid #dce9f266; background:repeating-linear-gradient(0deg,#17232f 0 2px,#5d6c7a 2px 3px,#283440 3px 5px); }
.album-turn-light { position:absolute; inset:0; pointer-events:none; transform:translateZ(7.5px); backface-visibility:hidden; background:linear-gradient(112deg,transparent 24%,#eff8ff29 42%,#ffffff06 51%,transparent 65%); background-size:220% 100%; background-position:calc(var(--turn-progress) * 100%) 0; border:1px solid #ffffff47; border-radius:5px; }
.music-album[data-page-turn=previous] .album-turn-sheet { transform-origin:100% 50%; transform:rotateY(calc(var(--turn-progress) * 162deg)); }

.album-turn-back { position:absolute; inset:0; padding:7px 20px 50px 7px; box-sizing:border-box; transform:rotateY(180deg) translateZ(7px); backface-visibility:hidden; border:2px solid #b5c6d391; border-radius:5px; background:linear-gradient(110deg,#607180,#1b2630 9%,#0e171e 65%,#455764); box-shadow:0 2px 0 #fff3 inset,0 -2px 0 #000a inset,0 8px 20px #0005; }
.album-turn-back img { display:block; width:100%; height:100%; object-fit:contain; opacity:.82; }
.album-turn-back::after { content:""; position:absolute; inset:3px; border:1px solid #d5e7f12e; background:linear-gradient(125deg,transparent 15%,#ffffff0e 42%,transparent 55%); box-shadow:0 0 0 3px #02070c3b inset; pointer-events:none; }
.album-turn-edge { position:absolute; display:block; background:linear-gradient(90deg,#d6e6f09e,#3a4b58 18%,#7c919f 45%,#263846 70%,#b2cbdc9c); border:1px solid #c8dbe570; box-sizing:border-box; }
.album-turn-edge-right { top:0; bottom:0; left:100%; width:14px; transform-origin:0 50%; transform:translateZ(7px) rotateY(90deg); }
.album-turn-edge-top { top:0; left:0; right:0; height:14px; transform-origin:50% 0; transform:translateZ(-7px) rotateX(90deg); }
.album-turn-edge-bottom { top:100%; left:0; right:0; height:14px; transform-origin:50% 0; transform:translateZ(7px) rotateX(-90deg); }
.album-turn-sheet > .album-page-spine { transform:translateZ(7px); }
.music-album[data-page-motion=dragging] .album-page-shell { transition:none; }

/* Fade the faces, not the 3D parent, so the open case keeps its thickness. */
.album-turn-art,.album-turn-back,.album-turn-edge,.album-turn-light,
.album-turn-sheet > .album-page-spine,.album-turn-sheet::before,.album-turn-sheet::after,
.album-page-preview { opacity:1; transition:opacity 560ms cubic-bezier(.4,0,.2,1); }
.music-album[data-page-motion=dissolving] .album-turn-art,
.music-album[data-page-motion=dissolving] .album-turn-back,
.music-album[data-page-motion=dissolving] .album-turn-edge,
.music-album[data-page-motion=dissolving] .album-turn-light,
.music-album[data-page-motion=dissolving] .album-turn-sheet > .album-page-spine,
.music-album[data-page-motion=dissolving] .album-turn-sheet::before,
.music-album[data-page-motion=dissolving] .album-turn-sheet::after,
.music-album[data-page-motion=dissolving] .album-page-preview { opacity:0; }


.music-album[data-page-motion=dragging] .album-turn-sheet { transition:none; }
.music-album[data-page-motion=returning] .album-turn-sheet { transition-timing-function:cubic-bezier(.22,1,.36,1); }
.music-album[data-dragging=true] .album-page-shell { cursor:grabbing; }
.album-mist { position:absolute; z-index:4; left:calc(20% + var(--mist-index) * 12%); top:60%; width:36%; height:24%; border-radius:50%; opacity:0; pointer-events:none; background:radial-gradient(ellipse,#b8c0ba2e,transparent 69%); filter:blur(16px); }
.music-album[data-reveal=enter]:not([data-reduced=true]) .album-stack { animation:album-case-emerge 1.05s cubic-bezier(.2,.65,.2,1) both; }
.music-album[data-reveal=enter]:not([data-reduced=true]) .album-mist { animation:album-case-mist 1.05s ease-out both; }
@keyframes album-case-emerge { from { opacity:.15; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes album-case-mist { 0% { opacity:0; transform:translateY(18px); } 28% { opacity:.65; } 100% { opacity:0; transform:translateY(-30px) scale(1.4); } }
.album-video:fullscreen { inset:0; width:100%; height:100%; max-width:none; max-height:none; border:0; border-radius:0; background:#000; cursor:default; }
.album-video:fullscreen .album-media-controls { flex-wrap:wrap; }
.music-album[data-reduced=true] .album-page-shell,.music-album[data-reduced=true] .album-stack,.music-album[data-reduced=true] .album-mist,.music-album[data-reduced=true] .album-video,.music-album[data-reduced=true] .album-turn-sheet { transition:none; animation:none; }
@media(max-width:700px) {
  html[data-album-visible=true] #hud-controls,html[data-album-visible=true] #site-header.chapters-open ~ #hud-controls { top:auto; bottom:max(8px,env(safe-area-inset-bottom,0px)); right:max(12px,env(safe-area-inset-right,0px)); left:auto; }
  #exhibition.mainline > #music-album { padding:26px 0 30px; }
  .music-album { --page-width:min(380px,calc(100vw - 48px)); --page-height:calc(min(380px,100vw - 48px) * .94); }
  .album-layout { gap:8px; }
  .album-stage { margin:0; }
  .album-stack { height:calc(var(--page-height) + 30px); }
  .album-page-shell { top:10px; transform:translateX(-50%) translateX(calc(var(--case-spread,0) * var(--page-width) * var(--case-drift,.3))) scale(calc(1 - var(--case-spread,0) * .52)); transition:transform var(--case-settle,280ms) cubic-bezier(.24,.68,.22,1); }
  #exhibition.mainline .album-copy > h3 { font-size:20px; }
  .album-copy { grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; }
  .album-controls { gap:0; }
  .album-control[data-album-play] { width:44px; height:44px; margin:0; }
  .album-page-play { width:54px; height:54px; }
  .album-media-controls { gap:4px; padding:0 3px; }
  .album-time { font-size:10px; }
}
@media(max-width:380px) {
  .album-copy { grid-template-columns:1fr; }
  #exhibition.mainline .album-copy > h3 { font-size:18px; text-align:center; grid-column:1; grid-row:1; }
  .album-position { grid-column:1; grid-row:2; text-align:center; }
  .album-controls { grid-column:1; grid-row:3; justify-content:center; margin-top:4px; }
}
@media(max-width:500px) {
  .album-video:fullscreen { --album-transport-height:88px; }
  .album-video:fullscreen .album-seek { order:6; flex-basis:calc(100% - 100px); }
  .album-video:fullscreen .album-time { order:7; }
}
@media(max-height:500px) and (orientation:landscape) {
  .music-album { --page-width:306px; --page-height:250px; }
  #exhibition.mainline > #music-album { padding:22px 0; }
  .album-stack { height:274px; }
  #exhibition.mainline .album-copy > h3 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .music-album:not([data-reduced=false]) .album-page-shell,.music-album:not([data-reduced=false]) .album-stack,.music-album:not([data-reduced=false]) .album-mist,.music-album:not([data-reduced=false]) .album-video,.music-album:not([data-reduced=false]) .album-turn-sheet { transition:none !important; animation:none !important; }
}