/* The Music page: a record store. His words on the sign, a turntable beside them, and his records standing in milk
   crates along the bottom, one colour per crate, to flick through. A record pulled from a crate goes on the platter;
   the playlist (the album's own player) takes the sign's place and the record's details print under the deck. The
   platter turns and the arm comes over only while something really plays. The parts are rendered bitmaps from the
   rack's set, sized from --u as on the rack; the page takes a wash of the record's own colours while it is on. */

.pg {
  --u: calc(min(100cqw, 1400px) * 1.75 / 19);
  --fs-body: clamp(13px, calc(var(--u) * 0.118), 16px); --fs-label: clamp(7.5px, calc(var(--u) * 0.068), 9.5px); --fs-name: clamp(8.5px, calc(var(--u) * 0.08), 11px);
  --cap-w: max(64px, calc(var(--u) * 0.5)); --cap-h: calc(var(--cap-w) * 0.6); --fs-cap: max(8.5px, calc(var(--cap-w) * 0.14));
  --ink: #e4e0d7; --ink-dim: #9a9da5; --ink-line: rgba(228, 224, 215, 0.2); --engrave: 0 1px 0 rgba(0, 0, 0, 0.8); --silk: var(--stamp-font); --punch: var(--punch-font); --plate-solid: #0e0f12;
  --accent: var(--amber); --led-on: url(../assets/img/parts/led-amber-on.png); --led-off: url(../assets/img/parts/led-amber-off.png);
  --btn-wide: url(../assets/img/parts/btn-wide-dark.png); --btn-ink: #e3dfd6; --link: var(--amber);
  --T: clamp(280px, calc(var(--u) * 3.1), 470px); /* the deck's depth; its width is 1.12 of it */
  --s: clamp(124px, calc(var(--u) * 1.3), 184px); /* a sleeve's side */
  --wall: calc(var(--s) * 0.56); /* a crate wall's height: the records stand out above it */
  position: relative; max-width: 1400px; margin: 0 auto; padding: 0 0 40px; color: var(--ink);
}
@media (max-width: 999px) { .pg { --u: clamp(84px, 10.5cqw, 100px); --fs-label: 9px; } }

/* the wash: two of the record's own colours, soft, behind the whole page while a record is on. It is painted in the
   page's own background (a layer under the content is hidden by the body's background in WebKit), fixed to the
   window, and the colours are registered so they fade in and out */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #d08a40; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #4e6fb5; }
/* at rest the page stands in front of a wall of every record's colours: fields of colour, one per hue, drifting
   slowly on their own paths, stretching and shrinking, brightening where they meet and parting again, like the wax
   in a lamp. The script builds the fields from the records' colours; they move on the compositor; a record on brings
   its own two colours forward and the wall steps back; anyone who asks for less motion gets them still */
body { --c1: #d08a40; --c2: #4e6fb5; transition: --c1 0.8s, --c2 0.8s; background: #000; } /* black for now; a two-colour wash as on the Audiobooks page is wanted here, done so it shows */
.pg { z-index: 1; }
.lava { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 0.8s; } /* the drifting colour fields are off for now: a black page until the two-colour wash is done properly */
body.tinted .lava { opacity: 0.3; }
.lava i { position: absolute; left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--h) / 2); width: var(--w); height: var(--h); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 32%, transparent), transparent); will-change: transform; animation: var(--path) var(--dur) ease-in-out var(--lag) infinite alternate; }
@keyframes lava-a { 0% { transform: translate3d(0, 0, 0) scale(1, 1); } 30% { transform: translate3d(16vmax, -9vmax, 0) scale(1.2, 0.85); } 60% { transform: translate3d(-6vmax, 14vmax, 0) scale(0.85, 1.25); } 100% { transform: translate3d(-18vmax, -4vmax, 0) scale(1.1, 1); } }
@keyframes lava-b { 0% { transform: translate3d(0, 0, 0) scale(1, 1); } 35% { transform: translate3d(-14vmax, 12vmax, 0) scale(0.9, 1.3); } 65% { transform: translate3d(10vmax, 16vmax, 0) scale(1.25, 0.9); } 100% { transform: translate3d(20vmax, -10vmax, 0) scale(1, 1.1); } }
@keyframes lava-c { 0% { transform: translate3d(0, 0, 0) scale(1, 1); } 40% { transform: translate3d(12vmax, 18vmax, 0) scale(1.3, 1); } 70% { transform: translate3d(-16vmax, 6vmax, 0) scale(0.8, 0.9); } 100% { transform: translate3d(4vmax, -16vmax, 0) scale(1.15, 1.2); } }
@keyframes lava-d { 0% { transform: translate3d(0, 0, 0) scale(1, 1); } 30% { transform: translate3d(-10vmax, -14vmax, 0) scale(1.1, 1.2); } 55% { transform: translate3d(18vmax, 2vmax, 0) scale(0.9, 0.8); } 100% { transform: translate3d(-4vmax, 18vmax, 0) scale(1.2, 1); } }
@media (prefers-reduced-motion: reduce) { .lava i { animation: none; } }

/* ---------- the shop: the sign and the deck; with a record on, the playlist left, the deck and its details right ---------- */
.shop { scroll-margin-top: calc(var(--bar-h, 64px) + 12px); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--T) * 1.12); grid-template-areas: "words side"; align-items: start; gap: 18px calc(var(--u) * 0.45); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.2); }
body.on .shop { grid-template-areas: "list side"; }
/* the deck and, with a record on, its details under it, in a column of their own: nothing spans the grid's rows, which
   WebKit would otherwise size to the playlist and leave a hole under the deck */
.deckcol { grid-area: side; display: grid; gap: 18px; justify-items: end; align-content: start; min-width: 0; }
.words { grid-area: words; min-width: 0; }
body.on .words { display: none; }
.title { margin: 0; font-family: var(--punch); font-weight: 800; font-size: clamp(56px, min(calc(var(--u) * 1.05), 11vw), 136px); line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; text-box: trim-start cap alphabetic; }
.silkline { margin: 16px 0 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; color: var(--ink-dim); text-shadow: var(--engrave); }
.lede { max-width: 58ch; margin: 18px 0 0; font-size: clamp(15px, calc(var(--u) * 0.135), 18px); line-height: 1.55; color: #c9ccd2; }
/* the bar is glass here: no plate, no edge, so the wash runs under the mark and the menu; once the page has
   scrolled under it, a blur keeps the mark and the caps clear of the words beneath */
.sitebar { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color 0.3s; }
body.scrolled .sitebar { background: rgba(10, 11, 13, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* the transport: on the bar while a record is on, centred in it on one line with the mark at every size (on a phone
   the line's centre is the room right of the mark): wind back, the record before, play, the record after, wind on,
   and Put back, a word cap where there is room and an eject glyph on a phone. It is placed, not flowed, and carries
   no key-group class, so the bar's own rules for its flowed groups never reach it; it steps aside for the open menu */
.sitebar .putback { display: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; flex-wrap: nowrap; align-items: center; margin: 0; gap: 6px; z-index: 4; }
body.on .sitebar .putback { display: flex; }
.sitebar .putback .tbtn { flex: none; width: var(--cap-w); height: var(--cap-h); aspect-ratio: auto; padding: 0; max-width: none; display: inline-grid; place-items: center; }
.sitebar .putback .tbtn .ico { width: max(9px, calc(var(--cap-w) * 0.2)); height: max(9px, calc(var(--cap-w) * 0.2)); }
.sitebar .putback .tbtn.wide { width: auto; min-width: var(--cap-w); padding: 0 1em; margin-left: 6px; }
.sitebar .putback .tbtn.wide .ico { display: none; }
.sitebar .putback .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
.sitebar .putback .i-pause, .sitebar .putback .i-stop { display: none; }
.sitebar .putback .pause .i-play { display: none; }
.sitebar .putback .pause .i-pause { display: block; }
/* a record whose player cannot be wound from here (Bandcamp's) leaves the wind caps dark */
body.noseek .sitebar .putback .seek { opacity: 0.4; pointer-events: none; }
body:has(#menu:checked) .sitebar .putback { visibility: hidden; }
/* a phone: six fingertip caps (40 by 24) on the mark's line, the words of Put back giving way to the eject glyph;
   under 360 there is no line for six beside the mark, so the group takes the line under it, centred */
@media (max-width: 699px) {
  .sitebar .putback { --cap-w: 40px; --cap-h: 24px; left: calc(50% + var(--mark-w, 70px) / 2); gap: 5px; }
  .sitebar .putback .tbtn.wide { width: var(--cap-w); min-width: 0; padding: 0; margin-left: 0; }
  .sitebar .putback .tbtn.wide .word { display: none; }
  .sitebar .putback .tbtn.wide .ico { display: block; }
}
@media (max-width: 389px) { .sitebar .putback { gap: 3px; } }
@media (max-width: 359px) { .sitebar .putback { position: static; translate: none; order: 2; flex: 1 1 100%; width: auto; justify-content: center; margin: 8px 0 0; gap: 4px; } }
}
/* the playlist: the album's own player with its tracklist, or the video, with the record's name and year right under it */
.list { grid-area: list; display: none; width: 100%; max-width: 640px; min-width: 0; align-self: start; }
body.on .list { display: grid; gap: 12px; }
.player iframe { display: block; width: 100%; max-width: 700px; height: clamp(320px, calc(var(--T) * 1.5), 640px); border: 0; border-radius: 6px; background: transparent; } /* Bandcamp's player stops at 700px and its frame is see-through past that: the page shows there, never a box of the record's colour */
.player.video iframe { height: auto; aspect-ratio: 16 / 9; background: #000; }
/* the deck's own player: a readout of the track, its place and its length, and the tracks on a plate, the one playing
   lit; a record whose files are here plays from this, and the deck follows it for real */
.player.deck { justify-self: stretch; width: 100%; }
.deckplay { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.deckplay .trackline { margin: 0; }
.deckplay .readout { height: var(--cap-h); }
.deckplay .tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.deckplay .trk { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; margin: 0; padding: 9px 12px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); color: var(--ink); font: 500 clamp(14px, calc(var(--u) * 0.125), 16px)/1.3 var(--jost); text-align: left; cursor: pointer; transition: background 0.2s; }
.deckplay .trk:hover, .deckplay .trk:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.deckplay .trk:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.deckplay .trk .no, .deckplay .trk .len { font-family: var(--lcd-font); font-size: clamp(16px, calc(var(--u) * 0.15), 19px); line-height: 1; color: var(--ink-dim); }
.deckplay .trk .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckplay .trk.on { background: rgba(255, 176, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.4); }
.deckplay .trk.on .no { color: var(--amber); text-shadow: var(--scr-glow); }
.deckplay .trk.on .ttl { color: #fff; }
/* the nudge: the bar's play cap, pressed for a Bandcamp record, points at the player, whose own buttons do the playing */
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30%, 70% { box-shadow: 0 0 0 3px var(--accent), 0 0 28px 4px rgba(255, 176, 0, 0.5); } }
.player.nudge iframe { animation: nudge 1.3s ease-in-out; }
.nowline { margin: 0; display: grid; gap: 2px; }
.nowline b { font: 600 15px/1.2 "Barlow", Arial, sans-serif; color: var(--ink); }
.nowline span { font-family: var(--silk); font-size: max(8px, calc(var(--fs-label) * 0.92)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
/* the details, under the deck, as wide as it */
.info { display: none; gap: 10px; align-content: start; justify-items: start; justify-self: stretch; min-width: 0; }
body.on .info { display: grid; }
.info .cover { display: none; } /* the deck shows the artwork; a phone, with no deck, shows the cover here */
.rtitle { margin: 0; font-family: var(--punch); font-weight: 800; font-size: clamp(26px, calc(var(--T) * 0.085), 40px); line-height: 0.95; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; }
.kicker { margin: 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; color: var(--ink-dim); text-shadow: var(--engrave); }
.credit { margin: 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.8; color: var(--ink); text-shadow: var(--engrave); }
.blurb { margin: 0; font-size: clamp(14px, calc(var(--u) * 0.12), 16px); line-height: 1.5; color: #c9ccd2; }
.blurb:empty, .credit:empty, .zone:has(> :empty) { display: none; }
.info .zone .tkeys { flex-wrap: wrap; }
.info .zone .tkeys .tbtn { text-decoration: none; }

/* the deck: a steel plinth 1.12T by T, the platter at the left, the arm pivoted at the top right, clear of the
   platter. Every position is a share of --T from the platter's centre at (0.46, 0.5): the record's radius is 0.395,
   the pivot sits 0.46 right and 0.30 up (0.549 out, past the platter's 0.43 and its own base), the stylus 0.58 from
   the pivot, so the arm sweeps from 17 degrees at the lead-in to 40 at the last groove */
.table { position: relative; width: calc(var(--T) * 1.12); height: var(--T); }
.plinth { position: absolute; inset: 0; border-radius: calc(var(--T) * 0.035); background: url(../assets/img/tex/steel.webp) 0 0 / 256px 256px repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.8), 0 12px 24px rgba(0, 0, 0, 0.55), 0 36px 70px rgba(0, 0, 0, 0.6); }
.platter { position: absolute; left: calc(var(--T) * 0.03); top: calc(var(--T) * 0.07); width: calc(var(--T) * 0.86); height: auto; }
/* the record: a whole-pixel disc centred on the platter, so it turns true; its shadow stays on the still ring
   under it, never on the turning disc (a shadow that turned with it read as a wobble) */
.disc { --R: round(down, calc(var(--T) * 0.79), 2px); position: absolute; left: calc(var(--T) * 0.46 - var(--R) / 2); top: calc(var(--T) * 0.5 - var(--R) / 2); width: var(--R); height: var(--R); opacity: 0; transition: opacity 0.45s; }
.disc::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; box-shadow: 0 4px 9px rgba(0, 0, 0, 0.62); }
body.on .disc { opacity: 1; }
.record { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; rotate: 0deg; }
.record .vinyl { position: absolute; inset: 0; width: 100%; height: 100%; }
.record .label { position: absolute; inset: 30.6%; border-radius: 50%; background: #2a2a2e center / cover no-repeat; }
.record .label.bars { background-size: auto 134%; } /* a video's 4:3 picture, its bars outside the label */
.record .label::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(0, 0, 0, 0.35); }
@keyframes spin { to { rotate: 360deg; } }
body.playing .record { animation: spin 1.8s linear infinite; }
.spindle { position: absolute; left: calc(var(--T) * 0.46 - var(--T) * 0.01); top: calc(var(--T) * 0.5 - var(--T) * 0.01); width: calc(var(--T) * 0.02); height: auto; }
.arm { position: absolute; left: calc(var(--T) * 0.7916); top: calc(var(--T) * 0.1037); width: calc(var(--T) * 0.2568); height: auto; transform-origin: 50% 13.64%; rotate: 0deg; transition: rotate 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
body.playing .arm { rotate: 17deg; animation: creep 1500s linear 0.9s forwards; }
@keyframes creep { from { rotate: 17deg; } to { rotate: 40deg; } }
@media (prefers-reduced-motion: reduce) { body.playing .record, body.playing .arm { animation: none; } }
.pilot { position: absolute; left: calc(var(--T) * 0.05); bottom: calc(var(--T) * 0.045); display: grid; place-items: center; } /* the pilot light, lit while a record is on */
.print { position: absolute; right: calc(var(--T) * 0.06); bottom: calc(var(--T) * 0.045); font-family: var(--silk); font-size: max(8px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }

/* ---------- the crates ---------- */
/* five milk crates on the floor, one colour per section, the front record showing above the wall; they roll by
   along the floor and under a finger, a trackpad or a mouse (the row is doubled for a seamless loop). A crate opened
   fans its records out above it round a pivot at its floor, like a stack on a desktop: the one in hand upright at
   the top, the others turned away to either side, nearer ones over farther ones; flipping through turns the fan.
   The fan lives on a layer over the floor, since a rolling strip would crop anything rising out of it */
.store { position: relative; margin-top: calc(var(--u) * 0.2); padding: 0 0 46px; }
.shelf { overflow-x: auto; overflow-y: hidden; padding: 16px 0 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.shelf.drag { cursor: grabbing; }
.shelf::-webkit-scrollbar { display: none; }
.floor { display: flex; align-items: flex-end; gap: calc(var(--s) * 0.3); width: max-content; padding: 0 calc(var(--s) * 0.15) 46px; }
.floor .again { display: contents; }
.crate { --C: calc(var(--s) * 1.1); --R: calc(var(--s) * 1.2); --step: 13deg; --fx: 0px; position: relative; flex: none; width: var(--C); height: calc(var(--C) * 0.92); margin: 0 calc(var(--s) * 0.15); margin-bottom: 62px; cursor: pointer; outline: none; touch-action: manipulation; transition: filter 0.3s; }
.crate:focus-visible .wall.front { filter: drop-shadow(0 0 0 2px var(--accent)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
/* the walls: the rendered lattice between a rim and a solid band, a post at each end; the back one behind the
   records, the front one over their feet */
.crate .wall { position: absolute; left: 0; right: 0; bottom: 0; height: var(--wall); padding: 0 calc(var(--wall) * 0.3); box-sizing: border-box; background: var(--wall-img) left top / auto 100% round; background-origin: content-box; background-clip: content-box; pointer-events: none; }
.crate .wall::before, .crate .wall::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--wall) * 0.3); background: var(--post-img) center / auto 100% no-repeat; }
.crate .wall::before { left: 0; }
.crate .wall::after { right: 0; }
.crate .wall.back { z-index: 0; filter: brightness(0.45); }
.crate .wall.front { z-index: 4; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); transition: filter 0.3s; }
.c-red { --wall-img: url(../assets/img/parts/crate-wall-red.png); --post-img: url(../assets/img/parts/crate-post-red.png); }
.c-blue { --wall-img: url(../assets/img/parts/crate-wall-blue.png); --post-img: url(../assets/img/parts/crate-post-blue.png); }
.c-yellow { --wall-img: url(../assets/img/parts/crate-wall-yellow.png); --post-img: url(../assets/img/parts/crate-post-yellow.png); }
.c-orange { --wall-img: url(../assets/img/parts/crate-wall-orange.png); --post-img: url(../assets/img/parts/crate-post-orange.png); }
.c-green { --wall-img: url(../assets/img/parts/crate-wall-green.png); --post-img: url(../assets/img/parts/crate-post-green.png); }
/* the crate's name, printed under it */
.tag { position: absolute; left: 50%; top: calc(100% + 10px); width: calc(var(--C) + var(--s) * 0.25); margin: 0; translate: -50% 0; display: grid; justify-items: center; gap: 4px; text-align: center; font-family: var(--punch); font-weight: 800; font-size: clamp(13px, calc(var(--C) * 0.09), 18px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); pointer-events: none; }
.tag small { font-family: var(--silk); font-weight: 400; font-size: max(8px, calc(var(--fs-label) * 0.92)); line-height: 1.35; letter-spacing: 0.12em; text-indent: 0.12em; color: var(--ink-dim); text-wrap: balance; }
/* the stack in a crate: every record hangs from a pivot on the crate's floor, bottom centre on it; they stand
   together, the one in hand in front, the others peeping over it by a few pixels each */
.fan { position: absolute; left: 50%; bottom: calc(var(--wall) * 0.12); width: 0; height: 0; z-index: 1; }
.sleeve { position: absolute; left: calc(var(--s) / -2); bottom: 0; width: var(--s); aspect-ratio: 1; transform-origin: 50% 100%; transform: translate(0, calc(var(--ad, 0) * -4px)); z-index: calc(30 - var(--ad, 0)); background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 -4px 10px rgba(0, 0, 0, 0.55); filter: brightness(calc(1 - var(--ad, 0) * 0.12)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* a hand over a closed crate: the records behind the front one peep up, each a little more than the one before */
.crate:not(.open):hover .sleeve, .crate:not(.open):focus-visible .sleeve { transform: translate(0, calc(var(--ad, 0) * -11px - 3px)); }
.sleeve { overflow: hidden; }
.sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.sleeve img.bars { transform: scale(1.334); } /* a video's 4:3 picture carries black bars above and below its 16:9 frame: shown past them */
.sleeve img.here { opacity: 1; }
.sleeve::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); pointer-events: none; }
.sleeve.cur { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(255, 176, 0, 0.5), 0 14px 28px rgba(0, 0, 0, 0.6); }
.sleeve:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.crate.open { filter: brightness(0.7); }
.store.open .crate:not(.open) { filter: brightness(0.5); }
/* the fan layer: over the floor, its pivot set on the open crate's floor by the script; each card has a seat in
   one arc round the pivot, the one in hand standing forward of the rest; the pad behind catches the wheel and a finger */
.fanlayer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; }
.fanlayer[hidden] { display: none; }
.fanlayer .pad { position: fixed; left: 0; right: 0; touch-action: pan-y; cursor: default; } /* across the window: the fan's reach, set by the script, never widens the page */
.fanlayer .sleeve { transform: translate(var(--fx), 0) rotate(calc(var(--p, 0) * var(--step))) translateY(calc(var(--R) * -1)) scale(calc(1 - var(--ad, 0) * 0.03)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.6); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s; cursor: pointer; }
.fanlayer .sleeve.front { filter: brightness(1); transform: translate(var(--fx), 0) rotate(calc(var(--p, 0) * var(--step))) translateY(calc(var(--R) * -1 - 10px)) scale(1.08); } /* the one in hand: forward and a little out */
.fanlayer.in .sleeve { transform: translate(var(--fx), 0) translateY(calc(var(--R) * -0.1)) scale(0.6); opacity: 0; transition: none; } /* the start of the opening: the cards rise out of the crate */
@media (prefers-reduced-motion: reduce) { .fanlayer .sleeve { transition: none; } }
/* the record in hand while browsing a fan: its name and year, printed under the crates; the line keeps its height so nothing jumps */
.inhand { margin: 0; height: 32px; display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; }
.inhand b { font: 600 14px/1.2 "Barlow", Arial, sans-serif; color: var(--ink); }
.inhand span { font-family: var(--silk); font-size: max(8px, calc(var(--fs-label) * 0.92)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }

@media (max-width: 1199px) {
  .player iframe { height: clamp(300px, 50vh, 480px); }
}
@media (max-width: 760px) {
  /* a phone has no deck: the sign, then, with a record on, the record's cover and details, the playlist; the crates
     edge to edge under it all */
  .shop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words"; gap: 20px; padding-top: 24px; }
  body.on .shop { grid-template-areas: "side" "list"; }
  body:not(.on) .deckcol { display: none; } /* no deck here, and nothing on it yet */
  .deckcol { justify-items: stretch; }
  .pg { --s: 128px; }
  .table { display: none; }
  .info .cover { display: block; width: 100%; justify-self: stretch; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.55); } /* the whole column, inside the shop's own padding */
  .info .cover.wide { aspect-ratio: 16 / 9; } /* a video's picture is a frame of the video; a 4:3 one loses exactly its bars to the crop */
  .title { font-size: clamp(48px, 15vw, 72px); }
  .crate { --step: 10deg; --R: calc(var(--s) * 1.05); margin: 0 10px 76px; }
  .floor { gap: 14px; }
}
@media (max-width: 479px) {
  .pg { --s: 112px; }
}