/* Sound (owner note 49, overhead version, 2026-10-17): the record player seen from straight above on the listening
   counter, with eleven record sleeves lying on the counter, one per world. The counter is one Sorceress photograph; the
   deck, its shadow and its tonearm are Blender layers (tools/turntable2.py); the record is drawn live.
   sound.js fits the stage (cover on desktop, a crop around the deck on phones) and sets --sx --sy --sw --sh in px. */
:root { --ink: #F3E7D3; --dim: #D8C7AE; --gold: #FFC867; --amber: #FFB547; --pen: #2B2116; }
body.sound { margin: 0; color: var(--ink); background: #140D08; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bar { position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(18px, 3vw, 48px); }
.bar .wordmark { font-family: var(--pixel); font-size: 18px; letter-spacing: .08em; color: var(--ink); text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.bar-links { display: flex; align-items: center; gap: 22px; }
.bar .back { font-family: var(--tiny); font-size: 12px; letter-spacing: .06em; color: var(--ink); text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.bar .get, .cta { font-family: var(--tiny); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: #1F1915;
  background: var(--gold); padding: 9px 13px; border-radius: 8px; white-space: nowrap; border: 0; cursor: pointer; box-shadow: 0 2px 0 rgba(120, 80, 20, .35); }
.cta:disabled { opacity: .45; cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- the stage: the counter, the deck and the sleeves, all in one box so everything stays in register */
.shop { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.stage-wrap { position: absolute; inset: 0; overflow: hidden; }
.stage { position: absolute; left: var(--sx, 0px); top: var(--sy, 0px); width: var(--sw, 100vw); height: var(--sh, 56.25vw); container-type: size; }
/* the counter fades into the page at its top edge (seen when a squarer window leaves height to spare, review S5) */
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 7%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #140D08, rgba(20, 13, 8, 0)); }
.counter { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.steam { position: absolute; left: 82.4%; top: 31.5%; width: 9.6%; height: auto; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; opacity: .9; }

/* the deck: 0.66 x 0.47 m of counter (its plinth 0.56 x 0.37 m) */
.deck { position: absolute; left: 18.4%; top: .711%; width: 52.8%; height: 66.856%; container-type: size; }
.deck > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.deck .shadow { opacity: .6; }
.platter { position: absolute; left: 13.273%; top: 12.255%; width: 46.182%; aspect-ratio: 1; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: none; cursor: default; }
.platter:not(:disabled) { cursor: pointer; }
.record { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: 0; will-change: transform;
  filter: drop-shadow(-.35cqw .5cqw .45cqw rgba(0, 0, 0, .55)); }
.has-record .record { opacity: 1; }
.sheen { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 22deg, rgba(255, 226, 184, .30) 40deg, transparent 60deg 200deg,
    rgba(255, 226, 184, .16) 220deg, transparent 240deg);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35.5% 96.5%, transparent 98%);
  mask: radial-gradient(circle, transparent 0 34%, #000 35.5% 96.5%, transparent 98%); }
.has-record.settled .sheen { opacity: 1; }
.deck .arm { transform-origin: 68.939% 20.851%; transform: rotate(var(--arm, 0deg)); transition: transform 1.3s cubic-bezier(.45, .05, .25, 1), filter .5s ease;
  filter: drop-shadow(-.3cqw .45cqw .28cqw rgba(0, 0, 0, .5)); }
.deck .arm.lifted { filter: drop-shadow(-.7cqw 1cqw .6cqw rgba(0, 0, 0, .34)); }
.deck .arm.tracking { transition: transform .9s linear, filter .5s ease; }
/* the arm itself is a control too: its headshell, at rest */
.arm-hit { position: absolute; left: 65.5%; top: 55%; width: 7%; height: 17%; padding: 0; border: 0; background: none; border-radius: 6px; }
.arm-hit:not(:disabled) { cursor: pointer; }

/* the amber display in the control strip: what is playing, in the site's pixel letters */
.display { position: absolute; left: 79.3%; top: 11.4%; width: 12.6%; height: 15.2%; display: flex; flex-direction: column; justify-content: center;
  gap: .12em; overflow: hidden; font-family: var(--pixel); font-size: max(11px, 1.5cqw); line-height: 1.12; letter-spacing: .03em; text-transform: uppercase;
  color: var(--amber); text-shadow: 0 0 .5em rgba(255, 160, 50, .6); pointer-events: none; }
.display span { display: block; overflow-wrap: anywhere; }
.display .d2 { color: #FFD08A; }
.display .d3 { color: #C98A3E; font-size: .82em; }

/* printed on the deck in white, like the words on a real hi-fi */
.print { position: absolute; transform: translateX(-50%); font-family: var(--pixel); font-weight: 400; font-size: max(12px, 1.3cqw); letter-spacing: 0; text-transform: uppercase;
  color: #F6EEDF; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; pointer-events: none; }
.p-music { left: 82.1%; top: 64.6%; }
.p-amb { left: 89.4%; top: 64.6%; }
/* the faders: the slots and ticks are in the render; the caps are these thumbs */
.fader { position: absolute; top: 33.6%; height: 31.3%; width: 4.4%; margin-left: -2.2%; display: block; }
.f-music { left: 82.121%; } .f-amb { left: 90%; }
.fader input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: ns-resize;
  -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl; }
.fader input::-webkit-slider-runnable-track { background: transparent; border: 0; }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 3.4cqw; height: 1.55cqw; border-radius: .25cqw; border: 0;
  background: linear-gradient(to bottom, #F4F1EA 0%, #C9C4BA 46%, #3A3632 50%, #C9C4BA 54%, #E6E2DA 100%);
  box-shadow: -.25cqw .35cqw .3cqw rgba(0, 0, 0, .6); }
.fader input::-moz-range-thumb { width: 3.4cqw; height: 1.55cqw; border-radius: .25cqw; border: 0; background: #DAD5CC; }
.fader input::-moz-range-track { background: transparent; }
/* the START · STOP key (ivory, in the render); its words printed on it */
.key { position: absolute; left: 78.788%; top: 71.915%; width: 13.636%; height: 7.66%; padding: 0; border: 0; border-radius: .4cqw; background: none;
  font-family: var(--pixel); font-weight: 400; font-size: max(12px, 1.3cqw); letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; color: #140E08; }
.key:not(:disabled) { cursor: pointer; }
.key:active span { position: relative; top: 1px; }
.key:disabled { color: rgba(20, 14, 8, .62); }

/* ---- the sleeves: real 12-inch sleeves (0.305 m) lying on the counter in a neat overlapping spread */
.sleeves { position: absolute; inset: 0; pointer-events: none; }
.sl { position: absolute; width: 24.4%; aspect-ratio: 1; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)); transition: transform .35s cubic-bezier(.3, .7, .3, 1); }
.sl .vinyl { position: absolute; left: 9%; top: -2.6%; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #1a1a1c 0 20%, #2b2016 20% 34%, #101012 34.5% 60%, #18181a 60.5% 99%, #2a2a2e 99.5%);
  box-shadow: -.3cqw .4cqw .5cqw rgba(0, 0, 0, .5); transition: transform .35s ease, opacity .3s ease; }
.sl .cover { position: absolute; inset: 0; border-radius: .25cqw; background: #D8CBB2;
  box-shadow: -.55cqw .8cqw 1.1cqw rgba(0, 0, 0, .5), -.15cqw .2cqw .25cqw rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(80, 60, 40, .35); }
/* the cover art, printed full bleed inside a narrow cardboard border */
.sl .art { position: absolute; inset: 1.6%; background-repeat: no-repeat; background-size: auto 100%; image-rendering: pixelated; }
.sl.smooth .art { image-rendering: auto; }
/* wear: a little lift of light on the edges, softened corners, a faint ring where the record sits */
.sl .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(255, 245, 225, .07) 40% 41%, transparent 42%),
    linear-gradient(135deg, rgba(255, 245, 225, .14), transparent 12% 88%, rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 0 .18cqw rgba(255, 245, 225, .18); }
/* the title, printed on a cream band along the left edge, so it reads in the overlap */
.sl .name { position: absolute; left: 1.6%; top: 1.6%; width: 18%; padding: .32cqw .16cqw .32cqw .22cqw;   /* within the strip the next sleeve leaves (review S5) */
  box-sizing: border-box; background: rgba(244, 234, 214, .94);
  color: #2A1E12; font-family: var(--pixel); font-weight: 400; font-size: max(11px, .76cqw); line-height: 1.08; letter-spacing: 0; text-align: left; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.sl:hover, .sl:focus-visible { z-index: 40 !important; transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 1.6cqh)) rotate(0deg); }
.sl:hover .cover, .sl:focus-visible .cover { box-shadow: -1cqw 1.5cqw 2cqw rgba(0, 0, 0, .55), -.2cqw .3cqw .3cqw rgba(0, 0, 0, .35); }
.sl:focus-visible { outline: none; }
.sl:focus-visible .cover { outline: 2px solid var(--gold); outline-offset: 3px; }
.sl.out .vinyl { opacity: 0; }
.sl.out .cover::before { content: "On the deck"; position: absolute; right: 5%; bottom: 5%; z-index: 2; padding: .3cqw .5cqw; background: #2A1E12; color: var(--gold);
  font-family: var(--tiny); font-size: max(11px, .85cqw); letter-spacing: .06em; text-transform: uppercase; }

/* ---- words on the counter, left of the deck (sound.js places the box) */
.intro { position: absolute; z-index: 5; left: var(--ix, 18px); top: var(--iy, 120px); width: var(--iw, 260px); text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.kicker { margin: 0 0 6px; font-family: var(--tiny); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0 0 8px; font-family: var(--pixel); font-weight: 500; font-size: clamp(22px, 2.1vw, 36px); line-height: 1.08; color: var(--ink); }
.sub { margin: 0; font-size: 15px; line-height: 1.42; color: var(--dim); }
.fine { margin: 14px 0 0; font-size: 11px; color: rgba(243, 231, 211, .65); }
.draft { font-family: var(--tiny); font-size: 11px; letter-spacing: .06em; }

.strip { display: none; }

/* ---- phones and narrow windows: the deck cropped close, the words above, the records and controls below */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .shop { height: auto; min-height: 0; overflow: visible; padding-top: 70px; }
  .intro { position: static; width: auto; padding: 0 18px 14px; }
  .bar .back .lbl { display: none; } .bar .back { font-size: 15px; }
  .stage-wrap { position: relative; height: var(--wrap-h); }
  .sleeves, .print, .key, .fader, .display .d3 { display: none; }
  .strip { display: block; padding: 18px 18px 6px; }
  .s-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; scrollbar-width: none; }
  .s-row::-webkit-scrollbar { display: none; }
  .s-row .sl { position: relative; flex: 0 0 132px; width: 132px; scroll-snap-align: start; transform: none; --dx: 0; --dy: 0; }
  .s-row .sl .name { width: 62%; font-size: 12px; padding: 4px 5px; }
  .s-row .sl .vinyl { display: none; }
  .s-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
  .ghost { font-family: var(--tiny); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: transparent;
    border: 1.5px solid rgba(243, 231, 211, .5); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
  .ghost:disabled { opacity: .4; }
  .s-fader { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-family: var(--tiny); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .s-fader input { flex: 1; accent-color: var(--gold); }
  .display span { visibility: hidden; }
  .s-now { margin: 0 0 12px; font-family: var(--pixel); font-size: 17px; color: var(--amber); text-shadow: 0 0 .5em rgba(255, 160, 50, .4); }
  .fine { position: static; padding: 14px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck .arm, .sl, .sheen { transition-duration: .01s !important; }
}
/* the record travelling between its sleeve and the platter (drawn above the sleeves) */
.flying { position: fixed; left: 0; top: 0; z-index: 60; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(-4px 6px 6px rgba(0, 0, 0, .55)); }
.sl.giving { transform: translate(var(--dx, 0), calc(var(--dy, 0px) - .8cqh)) rotate(0deg); }