/* Long players: the archive groups as records in the crate, their sleeves, the skip controls and
   volume dial on the deck, and the back of the sleeve with the track list (js/program.js). The
   back cover takes the crate's place, so the whole music section stays on one screen. */

/* ---------- side column: the crate, or the back of the sleeve in its place ---------- */
.side { position: relative; min-width: 0; }
.crate { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 22px; transition: opacity .3s ease, visibility 0s linear 0s; }
.side.reading .crate { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.bin-label { margin: 0 48px 4px 0; padding-bottom: 7px; border-bottom: 1px solid var(--rule); font: 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* the archive as a numbered series, five across */
.bin-row.lps { grid-template-columns: repeat(5, 1fr); gap: 20px 22px; }
.bin-row.lps .peek { --peek: 11% !important; }
.bin-row.lps .sleeve:hover .peek, .bin-row.lps .sleeve:focus-visible .peek { transform: translateX(26%); }

/* ---------- transport ---------- */
.np-btn[hidden], .np-prog[hidden] { display: none; }
.np-skip { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 2px 0 var(--ink); }
.np-skip:active { transform: translateY(2px); box-shadow: none; }
.np-ctrl { gap: 10px; } .np-ctrl .np-bar { margin-left: 6px; }
.np-ticks b { position: absolute; top: -4px; width: 1px; height: 10px; background: var(--muted); opacity: .7; }
.np-prog { margin-left: 8px; padding: 6px 10px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-3); font: 11.5px var(--mono); cursor: pointer; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.np-prog:active { transform: translateY(2px); box-shadow: none; }

/* ---------- volume dial ---------- */
/* the dial sits left of the power rocker; the controls move a little right to make room for it */
.controls { right: 5.6%; }
.vol { position: relative; display: grid; justify-items: center; gap: .6cqi; margin-right: 1cqi; }
.knob { position: relative; display: block; width: 5.6cqi; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; outline: none;
  background: radial-gradient(circle at 50% 50%, transparent 56%, rgba(0,0,0,.3) 58%, transparent 61%),
    conic-gradient(from 20deg, #8d8b86, #f1efe9 12%, #9e9c96 25%, #dcdad4 38%, #7f7d78 52%, #e9e7e1 66%, #a3a19b 80%, #f3f1eb 92%, #8d8b86);
  box-shadow: 0 0 0 .32cqi #121110, 0 .5cqi .7cqi rgba(0,0,0,.7), inset 0 0 0 .2cqi rgba(255,255,255,.25); }
.knob::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }       /* a bigger target than it looks */
/* only the pointer turns: the light on the brushed cap stays where it is */
.knob i { position: absolute; inset: 0; transform: rotate(var(--a, 81deg)); }
.knob i::before { content: ""; position: absolute; left: 50%; top: 8%; width: .5cqi; height: 30%; margin-left: -.25cqi; border-radius: .3cqi; background: #7b2d3b; }
.knob.turning { cursor: grabbing; }
.knob:focus-visible { box-shadow: 0 0 0 .32cqi #121110, 0 0 0 .75cqi #d8bd7c, 0 .5cqi .7cqi rgba(0,0,0,.7); }
/* scale printed on the plate round the dial, 270° with the gap at the bottom */
.vol::before { content: ""; position: absolute; left: 50%; top: 2.8cqi; width: 8.4cqi; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -135.7deg, rgba(236,226,206,.55) 0 1.4deg, transparent 1.4deg 27deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 82% 97%, transparent 99%), conic-gradient(from -136deg, #000 0 273deg, transparent 0);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle closest-side, transparent 80%, #000 82% 97%, transparent 99%), conic-gradient(from -136deg, #000 0 273deg, transparent 0); mask-composite: intersect; }
.vol-l { font: 1.6cqi var(--mono); letter-spacing: .2em; color: rgba(236,226,206,.55); text-shadow: 0 -1px 0 rgba(0,0,0,.8); min-width: 4cqi; text-align: center; }

/* ---------- the back of the sleeve ---------- */
.program-slot { position: absolute; inset: 0; pointer-events: none; }
.program { --ring: 0 0 0 3px #f7f3ea, 0 0 0 6px #7b2d3b; position: absolute; inset: 0 12px 0 0; padding: 12px; border-radius: 2px; pointer-events: auto;
  background: var(--tex-paper) 0 0 / 240px, var(--pc); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.18), 0 22px 30px -20px rgba(40,25,10,.7);
  transform: translateX(24px) rotate(.6deg); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.22,.8,.24,1), opacity .3s ease, visibility 0s linear .45s; }
.program.in { transform: rotate(-.3deg); opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.22,.8,.24,1), opacity .3s ease; }
.prg-paper { height: 100%; display: flex; flex-direction: column; gap: 7px; padding: 14px 18px 10px; overflow: auto; background: var(--tex-paper) 40px 0 / 240px, #fbf8f1; color: #2a2622; container-type: inline-size; scrollbar-width: thin; }
.prg-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.prg-head { margin: 0 0 4px; font: 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6f6a62; }
.prg-title { margin: 0; font: 400 24px/1.05 var(--display); }
.prg-sub { margin: 3px 0 0; font-style: italic; color: #6f6a62; font-size: 15.5px; }
.prg-crate { flex: none; padding: 7px 11px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-3); font: 11.5px var(--mono); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.prg-crate:active { transform: translateY(2px); box-shadow: none; }
.prg-crate:focus-visible, .np-prog:focus-visible { outline: none; box-shadow: 0 2px 0 var(--ink), var(--ring); }
.prg-blurb { margin: 0; font-size: 14.5px; line-height: 1.35; color: #3a352f; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.prg-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; align-items: start; }
.prg-side h5 { margin: 0; padding: 6px 0 5px; border-bottom: 1px solid #cfc4ae; font: 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pk); filter: saturate(.8) brightness(.8); }
.prg-side ol { list-style: none; margin: 0; padding: 0; }
.prg-track { padding: 4px 0 5px; border-bottom: 1px solid #e6decd; }
.prg-line, .prg-line2 { display: flex; align-items: last baseline; gap: 7px; min-width: 0; }
.prg-line2 { align-items: center; margin-top: 1px; padding-left: 27px; }
.prg-n { flex: 0 0 20px; font: 10.5px var(--mono); color: #8a8378; }
.prg-play, .prg-name { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 16px/1.22 var(--serif); color: inherit; text-align: left; }
.prg-play { border: 0; padding: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
.prg-play:hover { color: var(--accent); text-decoration-color: currentColor; }
.prg-play:focus-visible { outline: 2px solid #7b2d3b; outline-offset: 2px; }
.prg-dots { flex: 1 1 8px; min-width: 8px; border-bottom: 1px dotted #b9ae98; transform: translateY(-3px); }
.prg-dur { font: 11px var(--mono); color: #6f6a62; white-space: nowrap; }
.prg-meta { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.25; font-style: italic; color: #6f6a62; }
.prg-dl { flex: none; display: flex; gap: 6px; }
.prg-none { font: 10.5px var(--mono); color: #8a8378; }
.hold.chip { min-width: 0; min-height: 24px; padding: 0 8px; border-radius: 6px; font-size: 10.5px; box-shadow: 0 2px 0 var(--ink); transform: translateY(-1px); white-space: nowrap; }
.hold.chip:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.hold.chip.holding { transform: translateY(1px); box-shadow: none; }
.hold.chip.done { box-shadow: 0 2px 0 #1f3328; }
.prg-track.now .prg-n, .prg-track.now .prg-play { color: var(--accent); }
.prg-track.now .prg-n::before { content: "▸"; margin-right: 2px; }
.prg-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 4px; font: 11.5px/1.5 var(--mono); color: #6f6a62; }
.prg-alt summary { cursor: pointer; color: #4f463a; }
.prg-alt summary:focus-visible { outline: 2px solid #7b2d3b; outline-offset: 2px; }
.prg-alt[open] { flex-basis: 100%; } .prg-alt p { margin: 6px 0 0; } .prg-alt a { color: #6e2232; display: inline-block; padding: 2px 0; }
.prg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* a narrow back cover lists one side under the other */
@container (max-width: 470px) { .prg-sides { grid-template-columns: minmax(0, 1fr); gap: 8px; } .prg-blurb { display: none; } }

@media (max-width: 860px) {
  .music-stage { grid-template-columns: minmax(0, 1fr); }
  .bin-label { margin-right: 0; }
  .bin-row.lps { display: flex; }
  .side.reading .crate { display: none; }
  .program-slot { position: static; }
  .program { position: relative; inset: auto; display: none; }
  .program.in { display: block; }
  .prg-paper { overflow: visible; padding: 16px 14px 10px; }
  .prg-top { flex-wrap: wrap; } .prg-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .program, .program.in, .crate { transition: none; } }

/* ---------- LP sleeves ---------- */
.sleeve.lp .jacket { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.18), 0 16px 24px -16px rgba(40,25,10,.7), 2px 2px 0 -1px rgba(0,0,0,.12); }

/* Jazz Sketches: flat colour blocks and huge lowercase type */
.art-reid .art { position: absolute; inset: 0; }
.art-reid .art i { position: absolute; display: block; }
.art-reid .b1 { left: 0; top: 0; width: 36%; height: 58%; background: #d9a441; }
.art-reid .b2 { left: 36%; top: 46%; width: 12%; height: 12%; background: #f1e7d0; }
.art-reid .b3 { right: 8%; top: 8%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #b8452f; }
.art-reid .t { position: absolute; z-index: 3; left: 7%; bottom: 15%; font: 400 15.5cqi/.84 var(--display); letter-spacing: -.03em; color: #f1e7d0; }
.art-reid .by { position: absolute; z-index: 3; left: 7.5%; bottom: 7%; font: 4.2cqi var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #d9a441; }
.art-reid .cat { top: 7%; right: auto; left: 7%; color: #1d3b52; opacity: .8; }

/* Composition Seminar: a printed cartouche on ochre board, assignment numbers below */
.art-cartouche .art { position: absolute; inset: 7%; display: grid; grid-template-rows: auto 1fr; }
.art-cartouche .ct { display: grid; gap: 1.8cqi; padding: 6cqi 5cqi 5.5cqi; text-align: center; background: #f6efdf; color: #2a211c; box-shadow: 0 0 0 .6cqi #f6efdf, 0 0 0 .9cqi #5e1f2b; margin: 1cqi; }
.art-cartouche .ct small { font: 4.1cqi var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #5e1f2b; }
.art-cartouche .ct b { font: 400 10cqi/1 var(--display); }
.art-cartouche .ct i { font: italic 5.6cqi var(--serif); color: #5c534a; }
.art-cartouche .nos { align-self: end; justify-self: center; margin-bottom: 7cqi; font: 5cqi var(--mono); letter-spacing: .2em; color: #3b2d18; opacity: .8; }
.art-cartouche .cat { top: auto; bottom: 3.5%; right: 50%; transform: translateX(50%); font-size: 3.6cqi; color: #3b2d18; opacity: .55; }

/* Personal Pieces: a two-colour print of a sun going down, its reflection in stripes */
.art-sun .art { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 64%, #c2553a 64%); }
.art-sun .art i { position: absolute; display: block; }
.art-sun .s1 { left: 27%; top: 37%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: #e7a23f; clip-path: inset(0 0 50% 0); }
.art-sun .s2 { left: 27%; top: 64%; width: 54%; height: 36%; background: repeating-linear-gradient(180deg, #e7a23f 0 1.6cqi, transparent 1.6cqi 4cqi);
  -webkit-mask: radial-gradient(ellipse 50% 85% at 50% 0, #000 98%, transparent 100%); mask: radial-gradient(ellipse 50% 85% at 50% 0, #000 98%, transparent 100%); }
.art-sun .s3 { left: 0; right: 0; top: 64%; height: .7cqi; background: #3b1e1a; opacity: .35; }
.art-sun .t { position: absolute; z-index: 3; left: 8%; top: 7%; font: 400 9.2cqi/1 var(--display); color: #3b1e1a; }
.art-sun .t small { display: block; margin-top: 1.8cqi; font: italic 6cqi var(--serif); opacity: .8; }
.art-sun .cat { top: auto; bottom: 6%; color: #f0e2cc; opacity: .7; }

/* Early Sketches: a notebook page with a typed masking-tape label */
.art-tape .art { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 15%, rgba(190,70,70,.45) 15% 15.5%, transparent 15.5%),
  repeating-linear-gradient(180deg, transparent 0 7.6cqi, rgba(60,100,160,.28) 7.6cqi 7.9cqi); background-position: 0 4cqi; }
.art-tape .tp { position: absolute; z-index: 3; left: 20%; top: 12%; padding: 2.4cqi 4.5cqi 2cqi; transform: rotate(-3deg);
  background: linear-gradient(90deg, rgba(0,0,0,.04), transparent 6% 94%, rgba(0,0,0,.05)), #e8d9a8; box-shadow: 0 .5cqi .8cqi rgba(0,0,0,.15);
  clip-path: polygon(1% 4%, 99% 0, 100% 92%, 97% 100%, 2% 96%, 0 50%); font: 4.6cqi/1.5 "Courier Prime", var(--mono); color: #2b2a28; }
.art-tape .tp b { display: block; font-size: 6.8cqi; font-weight: 700; }
.art-tape .scrawl { position: absolute; z-index: 3; left: 21%; top: 46%; font: italic 6.4cqi/1.2 var(--serif); color: #2b3f57; opacity: .85; transform: rotate(-1.5deg); }
.art-tape .cat { top: auto; bottom: 7%; color: #2b2a28; opacity: .55; }

/* Transit Editions: a route map with a line for each kind of journey */
.art-transit .art { position: absolute; inset: 0; }
.art-transit svg { position: absolute; left: 0; top: 30%; width: 100%; height: 64%; }
.art-transit svg path { fill: none; stroke-width: 3.6cqi; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-transit svg circle { fill: #ece6d8; stroke: #1e1b18; stroke-width: 1.1cqi; vector-effect: non-scaling-stroke; }
.art-transit .t { position: absolute; z-index: 3; left: 7%; top: 7%; font: 400 9cqi/1 var(--display); color: #1e1b18; }
.art-transit .t small { display: block; margin-top: 1.8cqi; font: italic 5.6cqi var(--serif); color: #5c564d; }
.art-transit .key { position: absolute; z-index: 3; left: 7%; bottom: 7%; display: flex; align-items: center; gap: 1.4cqi; font: 3.6cqi var(--mono); letter-spacing: .08em; color: #5c564d; text-transform: uppercase; }
.art-transit .key i { width: 5cqi; height: 1.6cqi; background: var(--c); margin-left: 1.6cqi; } .art-transit .key i:first-child { margin-left: 0; }
.art-transit .hype { top: auto; bottom: 17%; right: 7%; width: 26%; }
.art-transit .cat { top: auto; bottom: 7%; color: #1e1b18; opacity: .55; }