#music-study {
  --paper-color:#d9d1c1;
  background:var(--paper-color);
}
#music-study .paper-inner { padding-bottom:clamp(88px,8vw,144px); }
#music-study .interlude-heading { margin-bottom:clamp(42px,4vw,68px); }
.record-wall-grid { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 30px; list-style:none; padding:0; margin:0; overflow-anchor:none; }
.record-wall { --wall-yaw:25deg; --wall-pitch:8deg; --wall-roll:3deg; position:relative; isolation:isolate; overflow-anchor:none; }
.record-wall[data-wall-state="opening"] > .record-wall-grid,
.record-wall[data-wall-state="open"] > .record-wall-grid,
.record-wall[data-wall-state="closing"] > .record-wall-grid { position:absolute; top:0; left:0; width:100%; }
.record-wall[data-wall-state="open"] > .record-wall-grid { visibility:hidden; }
.record-wall[data-wall-state="opening"] > .wall-record-details,
.record-wall[data-wall-state="closing"] > .wall-record-details { position:absolute; left:0; width:100%; }
.wall-record.is-record-flying { will-change:transform,opacity; }
.record-wall[data-wall-state="opening"] .acrylic-mount,
.record-wall[data-wall-state="closing"] .acrylic-mount { transition:none; }
.wall-record { min-width:0; position:relative; }
.wall-record-button { display:block; width:100%; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.acrylic-mount {
  position:relative;
  display:block;
  padding:clamp(17px,1.7vw,25px);
  aspect-ratio:1;
  border:1px solid #fff9e9a3;
  border-right:3px solid #f8f4e3b3;
  border-bottom:3px solid #fff9e9b8;
  background:linear-gradient(120deg,#fffdf327,#fffaf705 40%,#fffdf329);
  box-shadow:3px 4px 1px #8c877b66,var(--wall-shadow-x,13px) var(--wall-shadow-y,24px) 19px #39372f42,inset 1px 1px 0 #ffffffad;
  transform:perspective(1100px) rotateX(var(--wall-pitch)) rotateY(var(--wall-yaw)) rotateZ(var(--wall-roll)) translateZ(var(--wall-raise,0px));
  transform-style:preserve-3d;
  transition:transform 420ms cubic-bezier(.22,.7,.25,1);
}
.acrylic-mount::before { content:''; position:absolute; inset:0; border:1px solid #eae5ce99; box-shadow:3px 4px 0 #b9b4a475; transform:translateZ(-4px); pointer-events:none; }
.acrylic-mount::after { content:''; position:absolute; inset:0; pointer-events:none; transform:translateZ(14px); background:radial-gradient(ellipse at var(--wall-light-x,42%) var(--wall-light-y,30%),#fffef51c,transparent 63%),linear-gradient(228deg,transparent 39%,#fffdf215 39.3%,transparent 40.5%,transparent 67%,#fffdf20a 67.3%,transparent 69%); }
.wall-cover { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:contain; background:#c3baaa; box-shadow:3px 6px 8px #25241d55; transform:translateZ(6px); }
.mount-standoff { position:absolute; z-index:2; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 64% 30%,#f1e8b0 0%,#c8b56b 24%,#918246 50%,#47452a 68%,#c5b97b 77%,#ddd19c 85%,#7d764a 100%); box-shadow:-1px 1px 0 #544c29,9px 15px 5px #302b2455; transform:translateZ(18px); }
.mount-standoff::before { content:''; position:absolute; z-index:-1; top:3px; left:5px; width:16px; height:8px; background:linear-gradient(#e8dda0,#b1a064 40%,#776835 80%,#cfbf7a); transform:rotate(30deg); transform-origin:left center; box-shadow:9px 16px 7px #3b342f40; }
.standoff-tl { left:6px; top:6px; }
.standoff-tr { right:6px; top:6px; }
.standoff-bl { left:6px; bottom:6px; }
.standoff-br { right:6px; bottom:6px; }
.wall-record-caption { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:23px 4px 0; }
.wall-record-year { font-family:var(--serif); font-size:26px; font-style:italic; line-height:1; }
.wall-record-caption-copy { display:grid; gap:5px; }
.wall-record-caption-copy strong { font-size:12px; line-height:1.35; font-weight:600; }
.wall-record-caption-copy > span { font-size:10px; line-height:1.5; opacity:.68; }
.wall-record-button:focus-visible { outline:0; }
.wall-record-button:focus-visible .acrylic-mount { outline:2px solid var(--ink); outline-offset:6px; }
.wall-record.is-selected .acrylic-mount { --wall-raise:8px; }
.wall-record.is-selected .wall-record-caption-copy strong { color:#934b35; }
.wall-record-details { min-width:0; position:relative; z-index:4; overflow-anchor:none; }
.wall-record-details[hidden] { display:none; }
.wall-record-sheet {
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:42px;
  padding:42px 38px;
  color:#eee8d6;
  background:linear-gradient(#14241df2,#14241df2),url('assets/detail-paper.webp') center / cover;
  box-shadow:0 14px 32px #28312630;
  min-height:min(700px,calc(100svh - 64px));
}
.wall-close-track { position:absolute; inset:10px 10px 10px auto; width:44px; z-index:3; pointer-events:none; }
.wall-detail-close { position:sticky; top:16px; display:grid; place-items:center; width:44px; height:44px; border:0; background:none; color:inherit; font-size:27px; cursor:pointer; opacity:.75; pointer-events:auto; }
.wall-detail-close:hover { opacity:1; }
.wall-detail-close:focus-visible { outline:2px solid currentColor; }
.wall-record-art { position:relative; min-width:0; aspect-ratio:1.12; }
.wall-record-sleeve { position:absolute; z-index:2; left:0; top:9%; display:block; width:70%; height:auto; aspect-ratio:1; object-fit:contain; box-shadow:8px 12px 20px #0007,0 0 0 1px #ffffff12; transform-origin:0 0; }
.wall-vinyl-slot { position:absolute; top:9%; left:30%; width:70%; aspect-ratio:1; pointer-events:none; }
.wall-detail-copy { min-width:0; }
.wall-detail-edition { font-size:9px; line-height:1.7; color:#c9bf9b; margin-bottom:13px; max-width:42ch; }
.wall-detail-copy h4 { font-family:var(--serif); font-size:clamp(31px,3.4vw,47px); font-weight:400; line-height:1; letter-spacing:-.025em; margin-bottom:12px; text-wrap:balance; }
.wall-detail-artist { font-size:11px; line-height:1.6; opacity:.7; }
.wall-detail-note { font-family:var(--serif); font-size:16px; font-style:italic; margin-top:10px; opacity:.75; }
.wall-detail-story { font-family:var(--serif); font-size:clamp(20px,1.7vw,25px); line-height:1.3; margin-top:24px; max-width:43ch; color:#eee8d6; text-wrap:pretty; }
.wall-detail-sources { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; }
.wall-detail-sources > a { margin-top:0; font-size:8px; line-height:1.5; color:inherit; opacity:.55; }
.wall-detail-sources > a:hover { opacity:1; }
.wall-player { margin-top:25px; padding:16px 16px 12px; border:1px solid #ede6cc29; background:#f2eccf06; }
.wall-player-now { display:flex; align-items:center; gap:12px; }
.wall-play-toggle { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:#e9dfbd; color:#17271e; cursor:pointer; transition:scale 160ms,background-color 160ms; }
.wall-play-toggle:hover { background:#fff2c9; scale:1.04; }
.wall-play-toggle:active { scale:.95; }
.wall-play-toggle:focus-visible,.wall-track:focus-visible { outline:2px solid #d4bd7c; outline-offset:3px; }
.wall-play-glyph { display:block; width:0; height:0; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.wall-play-toggle[data-playing="true"] .wall-play-glyph { width:10px; height:12px; margin-left:0; border:0; border-left:3px solid; border-right:3px solid; }
.wall-player-copy { min-width:0; }
.wall-playing-title { font-size:11px; font-weight:600; line-height:1.4; }
.wall-playback-message { font-size:8px; line-height:1.5; opacity:.6; margin-top:4px; }
.wall-player-timeline { display:grid; grid-template-columns:26px 1fr 26px; align-items:center; gap:8px; font-size:8px; font-variant-numeric:tabular-nums; margin-top:6px; }
.wall-player-timeline > span:last-child { text-align:right; }
.wall-player-seek { width:100%; min-width:0; height:28px; padding:0; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; accent-color:#dfc997; }
.wall-player-seek::-webkit-slider-runnable-track { height:2px; background:#e5dcc052; }
.wall-player-seek::-moz-range-track { height:2px; background:#e5dcc052; }
.wall-player-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:9px; height:9px; border-radius:50%; background:#e9dcad; margin-top:-3.5px; }
.wall-player-seek::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#e9dcad; }
.wall-player-seek:focus-visible { outline:1px solid #dfc997; outline-offset:2px; }
.wall-track-list { list-style:none; padding:0; margin:9px 0 0; max-height:156px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d6c99b55 transparent; }
.wall-track { display:grid; grid-template-columns:19px 1fr 30px; gap:8px; align-items:center; width:100%; min-height:36px; padding:8px 3px; border:0; border-top:1px solid #e9e1c511; text-align:left; background:none; color:inherit; cursor:pointer; transition:background-color 160ms,color 160ms; }
.wall-track:hover { background:#e9e1c50a; }
.wall-track-number { font-size:8px; opacity:.45; font-variant-numeric:tabular-nums; }
.wall-track-title { font-size:10px; line-height:1.4; }
.wall-track-duration { font-size:8px; opacity:.45; text-align:right; font-variant-numeric:tabular-nums; }
.wall-track.is-current { color:#e8c77f; }
.wall-track[data-playing="true"] .wall-track-number { font-size:0; opacity:1; height:11px; width:11px; background:linear-gradient(currentColor,currentColor) left bottom / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) center bottom / 2px 11px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 2px 5px no-repeat; }
.wall-audio-source { display:inline-block; margin-top:14px; font-size:9px; color:#ded3ad; text-decoration:none; }
.wall-audio-source:hover { text-decoration:underline; text-underline-offset:3px; }
.wall-audio-note { font-size:8px; line-height:1.6; opacity:.5; margin-top:7px; }
.wall-cover-source { display:inline-block; margin-top:15px; font-size:8px; line-height:1.5; color:inherit; opacity:.45; text-decoration:none; }
.wall-cover-source:hover { opacity:.8; }
.record-wall-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.record-wall-fallback { font-family:var(--serif); font-size:22px; line-height:1.4; }
@media (hover:hover) and (pointer:fine) {
  .wall-record-button:hover .acrylic-mount { --wall-raise:12px; }
}
@media (max-width:1100px) { .record-wall-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 24px; } }
@media (max-width:760px) {
  /* The collections bar covers the top 57px on phones. Keep the sticky close
     control just below it so the album details remain dismissible. */
  .wall-detail-close { top:calc(57px + env(safe-area-inset-top,0px) + 12px); }
  .record-wall { --wall-yaw:17deg; --wall-pitch:6deg; --wall-roll:2deg; }
  .record-wall-grid { gap:32px 19px; }
  .acrylic-mount { padding:14px; border-right-width:2px; border-bottom-width:2px; }
  .mount-standoff { width:8px; height:8px; }
  .mount-standoff::before { width:10px; height:5px; top:2px; left:4px; }
  .standoff-tl,.standoff-bl { left:4px; }
  .standoff-tr,.standoff-br { right:4px; }
  .standoff-tl,.standoff-tr { top:4px; }
  .standoff-bl,.standoff-br { bottom:4px; }
  .wall-record-caption { display:block; padding-top:14px; }
  .wall-record-year { display:block; font-size:23px; margin-bottom:7px; }
  .wall-record-caption-copy { gap:4px; }
  .wall-record-caption-copy strong { font-size:11px; }
  .wall-record-caption-copy > span { font-size:9px; }
  .wall-record-sheet { grid-template-columns:1fr; gap:20px; padding:32px 24px 27px; }
  .wall-record-art { aspect-ratio:1.2; margin:0 8px 0 0; }
  .wall-record-sleeve,.wall-vinyl-slot { top:4%; }
  .wall-player { margin-top:20px; padding:15px 13px 12px; }
  .wall-track { min-height:44px; }
  .wall-track-list { max-height:168px; }
  .wall-detail-copy { padding-right:12px; }
  .wall-detail-copy h4 { font-size:34px; }
  .wall-detail-artist { font-size:11px; }
  .wall-detail-story { font-size:21px; margin-top:21px; line-height:1.32; }
}
@media (max-width:350px) { .record-wall-grid { gap:28px 14px; } .acrylic-mount { padding:11px; } }
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  /* Keep each mounted record on one composited plane. Independent 3D layers
     for its cover, glass and four screws can lose their tiles during a swipe. */
  .acrylic-mount { transform-style:flat; }
  .acrylic-mount::before, .acrylic-mount::after,
  .wall-cover, .mount-standoff { transform:none; }
}
body.no-motion .record-wall .acrylic-mount { --wall-raise:0px; transition:none; }
@media (prefers-reduced-motion:reduce) { .record-wall .acrylic-mount { --wall-raise:0px; transition:none; } }
body.no-motion :is(.wall-play-toggle,.wall-track) { transition:none; scale:1; }
@media (prefers-reduced-motion:reduce) { .wall-play-toggle,.wall-track { transition:none; scale:1; } }