/* VHS REWIND v2 — ART: the boxes, the tapes, the shelves.
   Owns .collection* .shelf* .spine* .case* .box3d* .tape* .reel* .slot-tape-face* and the
   sticker / wear / Post-it classes. Never styles ids or VISUAL's classes.
   Reads VISUAL's tokens (with fallbacks): --tree-light --lamp-light --fire-light
   --wood-1 --wood-2 --wood-3 --wood-dark --bulb-red/green/blue/amber/orange. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo+Narrow:wght@500;700&family=Oswald:wght@500;700&family=Permanent+Marker&family=Reenie+Beanie&display=swap');

/* ============================================================ the box (picked case, full 3D) */
.case.box3d {
  --cH: var(--ch, 240px);
  --cw: calc(var(--cH) * 4.1 / 7.4);
  --cd: calc(var(--cH) * 1.05 / 7.4 * var(--thick, 1));
  --tw: calc(var(--cH) * .935);
  --tl: var(--tree-light, #ffb46a);
  --ll: var(--lamp-light, #ffcf8f);
  --rest-y: 13deg;
  position: relative; flex: none; width: var(--cw); height: var(--cH); margin: 0 auto;
  perspective: calc(var(--cH) * 6); perspective-origin: 50% 40%;
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab;
  transform-style: flat;
}
.case.box3d.slip { --rest-y: -14deg; }
.case.box3d.turning { cursor: grabbing; }
.case.box3d * { box-sizing: border-box; }
.case.box3d .stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.2,.5,1); }
.case.box3d.clam.open .stage { transform: translateX(calc(var(--cw) * .5)); }
/* an upright slipcover sits left of centre so the tape has room to come out of the open (right) edge */
.case.box3d.slip .stage { transform: translateX(calc(var(--cw) * -.46)); }
.case.box3d .turn {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--turn-x, 0deg) + 3deg)) rotateY(calc(var(--turn-y, 0deg) + var(--rest-y)));
}
.case.box3d.clam.open .turn { transform: rotateX(4deg) rotateY(-4deg); transition: transform .4s ease; }
.case.box3d .box { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--cH); transform-style: preserve-3d; }
.case.box3d .lay { position: absolute; inset: 0; transform-style: preserve-3d; }
.case.box3d.slip .lay .box { left: 0; top: 0; }

/* six faces from one --cH */
.box3d .face, .pull-ghost .face { position: absolute; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: size; }
.box3d .f-front, .box3d .f-back, .box3d .lid-front, .box3d .lid-in,
.pull-ghost .f-front, .pull-ghost .f-back { left: 0; top: 0; width: var(--cw); height: var(--cH); }
.box3d .f-front, .pull-ghost .f-front { transform: translateZ(calc(var(--cd) / 2)); }
.box3d .f-back, .pull-ghost .f-back { transform: rotateY(180deg) translateZ(calc(var(--cd) / 2)); }
.box3d .f-spine, .box3d .f-edge, .pull-ghost .f-spine, .pull-ghost .f-edge { top: 0; height: var(--cH); width: var(--cd); left: calc((var(--cw) - var(--cd)) / 2); }
.box3d .f-spine, .pull-ghost .f-spine { transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2)); }
.box3d .f-edge, .pull-ghost .f-edge { transform: rotateY(90deg) translateZ(calc(var(--cw) / 2)); }
.box3d .f-top, .box3d .f-bottom, .pull-ghost .f-top, .pull-ghost .f-bottom { left: 0; width: var(--cw); height: var(--cd); top: calc((var(--cH) - var(--cd)) / 2); }
.box3d .f-top, .pull-ghost .f-top { transform: rotateX(90deg) translateZ(calc(var(--cH) / 2)); }
.box3d .f-bottom, .pull-ghost .f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cH) / 2)); }
.box3d .face > img.face-img, .pull-ghost .face img.face-img, .box3d .insert > img.face-img, .pull-ghost .insert > img.face-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; -webkit-user-drag: none; }

/* contact shadow on the table */
.case.box3d .case-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -5%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.28) 55%, transparent);
  transform: translateZ(calc(var(--cd) * -1)) scaleX(calc(.35 + var(--facing, 1) * .65));
  transition: opacity .3s; pointer-events: none;
}
.case.box3d .case-shadow::after { content: ''; position: absolute; inset: -120% -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); }
.case.box3d.turning .case-shadow { opacity: .75; }

/* ---------- light: warm room tint + a sheen that slides as the box turns */
.box3d .light-tint, .pull-ghost .light-tint {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background:
    radial-gradient(120% 70% at 0% 15%, color-mix(in srgb, var(--tl) 70%, transparent), transparent 70%),
    linear-gradient(200deg, color-mix(in srgb, var(--ll) 45%, transparent), transparent 55%),
    linear-gradient(0deg, rgba(10,4,2,.45), transparent 45%);
  opacity: .8;
}
.box3d .sheen, .pull-ghost .sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 0 34%, color-mix(in srgb, var(--tl) 35%, #fff) 44%, rgba(255,255,255,.95) 47%, color-mix(in srgb, var(--ll) 40%, #fff) 50%, transparent 60% 100%);
  background-size: 320% 100%; background-position: calc(var(--spec, .5) * 100%) 0;
}
.box3d .sheen.gloss { opacity: .34; }
.box3d .sheen.matte { opacity: .08; }
.box3d .f-back .sheen { background-position: calc((1 - var(--spec, .5)) * 100%) 0; }

/* ---------- SLIPCOVER (cardboard) */
.box3d.slip .f-front, .box3d.slip .f-back, .pull-ghost .slip .f-front { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.box3d.slip .face { background-color: var(--sp, #222); }
.box3d.slip .f-front::after, .box3d.slip .f-back::after, .box3d.slip .f-spine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(../assets/art/card-grain.png) 0 0 / 180px 180px; opacity: .22; mix-blend-mode: overlay;
}
.box3d.slip .f-top, .box3d.slip .f-edge { background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%, transparent 70%, rgba(0,0,0,.3)), var(--sp, #222); }
.box3d .fold { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1.5px calc(100% - 1.5px), rgba(255,255,255,.3) calc(100% - 1px)); opacity: .55; }
.box3d.slip .f-top .fold { background: linear-gradient(180deg, rgba(255,255,255,.35) 0 1px, transparent 1.5px calc(100% - 1.5px), rgba(255,255,255,.3) calc(100% - 1px)); }
/* the open end: cardboard rim, a dark mouth, the black end of the cassette inside */
.box3d .f-open { background: var(--sp, #222); }
.box3d.slip .f-edge.f-open { background: var(--sp, #222); }
.box3d .f-open .mouth { position: absolute; inset: 2.5% 9%; border-radius: 1px; background: linear-gradient(180deg, #000, #0a0807 60%, #15110e); box-shadow: inset 0 2px 4px #000; }
.box3d .f-open .cass-end { position: absolute; inset: 5% 20%; border-radius: 2px; background: linear-gradient(180deg, #232326, #0d0d0f); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.box3d .f-open .cass-end::after { content: ''; position: absolute; top: 30%; bottom: 30%; left: 38%; width: 24%; background: rgba(255,255,255,.06); border-radius: 1px; }
.case.box3d:has(.tape-v.hidden) .f-open .cass-end { display: none; }
/* card wear: crushed corners, edge whitening, fold cracks */
.card-wear { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(255,250,240,calc(.55 * var(--corner, .5))) 0 2.5%, transparent 4.5%),
    radial-gradient(circle at 100% 0, rgba(255,250,240,calc(.35 * var(--corner, .5))) 0 2%, transparent 4%),
    radial-gradient(circle at 0 100%, rgba(255,250,240,calc(.45 * var(--corner, .5))) 0 2.2%, transparent 4.2%),
    radial-gradient(circle at 100% 100%, rgba(255,250,240,calc(.6 * var(--corner, .5))) 0 2.8%, transparent 5%);
  box-shadow: inset 0 0 0 1px rgba(255,248,235,.22), inset 1.5px 0 0 rgba(255,248,235,.18);
}
.wear .scuff { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,250,240,.95), rgba(255,250,240,0)); transform: rotate(var(--rot, 0deg)); }
.wear .crease { position: absolute; height: 2px; transform-origin: 0 50%; transform: rotate(var(--rot, 0deg));
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(0,0,0,.45)); }

/* ---------- CLAMSHELL (molded plastic, art under a clear vinyl sleeve) */
.box3d.clam, .pull-ghost .clam { --shell: #121214; --shell-hi: #2c2c31; --shell-lo: #050506; }
.box3d.clam.shell-white, .pull-ghost .clam.shell-white { --shell: #f1efe9; --shell-hi: #ffffff; --shell-lo: #c9c5bb; }
.box3d.clam.shell-clear, .pull-ghost .clam.shell-clear { --shell: rgba(205,212,220,.55); --shell-hi: rgba(255,255,255,.85); --shell-lo: rgba(90,96,104,.6); }
.box3d.clam .face, .pull-ghost .clam .face { background: var(--shell); }
.box3d.clam .lid-front, .box3d.clam .f-back, .pull-ghost .clam .f-front { border-radius: calc(var(--cw) * .035);
  box-shadow: inset 0 0 0 1px var(--shell-lo), inset 0 0 0 2.5px var(--shell-hi), inset 0 0 calc(var(--cw) * .03) rgba(0,0,0,.25); }
.box3d .insert, .pull-ghost .insert { position: absolute; inset: 2.6% 3.4%; overflow: hidden; border-radius: 1.5px; background: #111;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.box3d.clam .f-spine .insert, .pull-ghost .clam .f-spine .insert { inset: 1.6% 11%; }
/* the vinyl: a crisp edge line where the clear sleeve is welded, and plastic scratches */
.box3d.clam .lid-front::before, .box3d.clam .f-back::before, .box3d.clam .f-spine::before {
  content: ''; position: absolute; inset: 1.6% 2.2%; border-radius: 2px; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.box3d.clam .f-spine::before { inset: 1% 6%; }
.plastic-wear { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: url(../assets/art/plastic-scratch.png) 0 0 / 260px 260px; opacity: .55; mix-blend-mode: screen; }
.plastic-wear .scratch { position: absolute; width: 46%; height: 1px; transform-origin: 0 50%; transform: rotate(var(--rot, 20deg));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 20%, rgba(255,255,255,.3) 70%, transparent); }
.plastic-wear .scuff { opacity: .12 !important; }
/* the spine: the rounded molded hinge */
.box3d .hinge, .pull-ghost .hinge { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.22) 14%, rgba(255,255,255,.06) 26%, transparent 45%, transparent 80%, rgba(0,0,0,.4)); }
/* the open edge: two finger notches and the snap tab */
.box3d.clam .f-edge { background: linear-gradient(90deg, var(--shell-lo), var(--shell) 30%, var(--shell-hi) 55%, var(--shell) 80%, var(--shell-lo)); }
.box3d.clam .f-edge .notch { position: absolute; left: 12%; right: 12%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.2) 70%, transparent); }
.box3d.clam .f-edge .notch.a { top: 22%; } .box3d.clam .f-edge .notch.b { bottom: 22%; }
.box3d.clam .f-edge .snap { position: absolute; left: 24%; right: 24%; top: 46%; height: 8%; border-radius: 2px; background: linear-gradient(90deg, var(--shell-lo), var(--shell-hi)); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.box3d.clam .f-top, .box3d.clam .f-bottom { background: linear-gradient(180deg, var(--shell-lo), var(--shell) 25%, var(--shell-hi) 50%, var(--shell) 75%, var(--shell-lo)); border-radius: 3px; }
.box3d.clam .lid-notch { position: absolute; right: 0; width: 3.2%; height: 9%; border-radius: 40% 0 0 40%; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15)); z-index: 4; }
.box3d.clam .lid-notch.a { top: 21%; } .box3d.clam .lid-notch.b { bottom: 21%; }
/* the lid swings open around the hinge */
.box3d.clam .lid { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--cH); transform-style: preserve-3d;
  transform-origin: 0 50%; transform: translateZ(calc(var(--cd) / 2)); transition: transform .48s cubic-bezier(.3,1.25,.55,1); }
.box3d.clam.open .lid { transform: translateZ(calc(var(--cd) / 2)) rotateY(-171deg); }
.box3d.clam .lid-front { transform: none; }
.box3d.clam .lid-in { transform: rotateY(180deg); background: linear-gradient(160deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo)); border-radius: calc(var(--cw) * .035);
  box-shadow: inset 0 0 0 3px var(--shell-lo); display: flex; align-items: flex-end; justify-content: center; }
.box3d.clam .lid-in .lid-rib { position: absolute; inset: 9% 12%; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--shell-lo), 0 0 0 1px var(--shell-hi); opacity: .55; }
.box3d .emb { font: 700 calc(var(--cw) * .045) 'Archivo Narrow', Archivo, sans-serif; letter-spacing: .2em; color: var(--shell-lo); margin-bottom: 6%;
  text-shadow: 0 1px 0 var(--shell-hi); opacity: .8; }
.box3d.clam .lid-grab { position: absolute; top: 0; bottom: 0; right: 0; width: 30%; transform: translateZ(1px); cursor: pointer; z-index: 5; }
.box3d.clam .lid-grab i { position: absolute; right: 4%; top: 50%; width: 10%; height: 14%; margin-top: -7%; border-radius: 99px; opacity: 0;
  background: color-mix(in srgb, var(--tl) 55%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--tl) 70%, transparent); transition: opacity .2s; }
.box3d.clam .lid-grab:hover i { opacity: .55; }
.box3d.clam.open .lid-grab { width: 100%; }
.box3d.clam.open .lid-grab i { display: none; }
/* the tray: the base's floor with hub posts and a rib; the tape lies in it */
.box3d.clam .tray { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--cH); transform: translateZ(calc(var(--cd) / -2 + 1px)); transform-style: preserve-3d;
  border-radius: calc(var(--cw) * .035); background: linear-gradient(170deg, var(--shell-hi), var(--shell) 30%, var(--shell-lo)); }
.box3d.clam .tray-well { position: absolute; inset: 3% 4%; border-radius: 4px; transform-style: preserve-3d;
  background: linear-gradient(180deg, color-mix(in srgb, var(--shell) 85%, #000), var(--shell));
  box-shadow: inset 0 0 0 2px var(--shell-lo), inset 0 6px 14px rgba(0,0,0,.55), inset 0 -2px 6px rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; }
.box3d.clam .tray-well .hub { position: absolute; left: 50%; width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); margin-left: calc(var(--cw) * -.085); border-radius: 50%;
  background: radial-gradient(circle, var(--shell-hi) 0 22%, var(--shell-lo) 26% 40%, var(--shell) 44% 62%, transparent 66%); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.box3d.clam .tray-well .hub.a { top: 27%; } .box3d.clam .tray-well .hub.b { top: 57%; }
.box3d.clam .tray-well .rib { position: absolute; left: 22%; right: 22%; top: 49%; height: 2%; border-radius: 2px; background: var(--shell-lo); opacity: .6; }
.box3d.clam .tray-well .tape-v { transform: translateZ(2px); cursor: grab; }

/* the tape in a slipcover: lies inside, its leading end at the open mouth (app sets translateX) */
.box3d.slip .sleeve-tape { position: absolute; z-index: 0; top: calc((var(--cH) - var(--tw)) / 2); left: calc(var(--cw) - var(--tw) * 4.1 / 7.4 - 2px); touch-action: none; cursor: grab;
  transform-style: preserve-3d; will-change: transform; }
.box3d.slip .sleeve-tape.spring { transition: transform .32s cubic-bezier(.3,1.4,.5,1); }
.box3d.slip .sleeve-box { cursor: grab; }

/* ---------- tape wrapper (in the case) */
.tape-v { --th: calc(var(--tw) * 4.1 / 7.4); position: relative; touch-action: none; }
.tape-v[data-rot="90"] { width: var(--th); height: var(--tw); }
.tape-v[data-rot="90"] .tape { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.tape-v[data-rot="0"] { width: var(--tw); height: var(--th); }
.tape-v.hidden { visibility: hidden; }

/* ---------- Post-it from Mom */
.postit { display: none; position: absolute; z-index: 6; width: 34%; aspect-ratio: 1; right: 7%; top: 9%; padding: 7% 5% 0;
  background: linear-gradient(180deg, #fff59a, #fbe96a 70%, #f2da4f); color: #1f2a6b; transform: rotate(5deg);
  font-family: 'Reenie Beanie', 'Permanent Marker', cursive; text-align: center; line-height: .9;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 -8px 10px -6px rgba(140,110,0,.35); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%); }
.postit span { display: block; font-size: calc(var(--cw) * .1); font-weight: 700; letter-spacing: .02em; }
.postit em { display: block; font-style: normal; font-size: calc(var(--cw) * .085); margin-top: 6%; text-align: right; padding-right: 8%; }
.postit::after { content: ''; position: absolute; right: 0; bottom: 0; width: 12%; height: 14%; background: linear-gradient(135deg, #e7cf45 50%, rgba(0,0,0,.18) 50%); }
.case.note .postit { display: block; }
.box3d.slip > .stage > .turn > .postit { right: auto; left: 46%; top: 6%; width: 44%; transform: translateZ(calc(var(--cd) / 2 + 2px)) rotate(-4deg); backface-visibility: hidden; }

/* ---------- retail price sticker (bought, never rented) */
.price-stk { position: absolute; z-index: 4; transform: rotate(var(--rot, 0deg)); pointer-events: none;
  font: 700 calc(var(--cw) * .052) 'Archivo Narrow', Archivo, sans-serif; line-height: 1; text-align: center; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
.price-stk.gun { background: #ff8a24; color: #2a1404; padding: .45em .55em .35em; border-radius: 1px;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.18) 6px 7px); }
.price-stk.shop { background: #fff; color: #1a1a1a; padding: .35em .5em; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
.price-stk.shop em { display: block; font-style: normal; font-size: .62em; letter-spacing: .1em; color: #c4161c; text-transform: uppercase; margin-bottom: .15em; }
.price-stk.peeled { clip-path: polygon(0 0, 100% 0, 100% 62%, 78% 100%, 0 100%); opacity: .85; }
.price-stk.peeled::after { content: ''; position: absolute; right: 0; bottom: 0; width: 22%; height: 38%; background: linear-gradient(135deg, transparent 48%, rgba(255,255,255,.75) 50%); }

/* ---------- family marks: masking tape with our name, a sun-faded spine */
.daws-tape { position: absolute; z-index: 4; left: 8%; right: 8%; bottom: 10%; padding: 6% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(236,220,178,.95), rgba(222,203,156,.95)); color: #1d1d3a;
  font: 400 calc(var(--cw, 30px) * .06) 'Permanent Marker', cursive; writing-mode: vertical-rl; text-align: center; letter-spacing: .08em;
  box-shadow: 0 1px 1px rgba(0,0,0,.25); clip-path: polygon(0 2%, 100% 0, 98% 98%, 3% 100%); }
.sunfade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(232,226,205,.42), rgba(214,220,226,.34) 60%, rgba(240,232,214,.22)); mix-blend-mode: screen; }

/* ---------- fallback faces (composed from TMDB when no real scan exists) */
.fb { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; font-family: Archivo, system-ui, sans-serif; }
.fb img { -webkit-user-drag: none; pointer-events: none; }
/* front */
.fb-front { background: var(--band, #111); }
.fb-front .fbf-head { flex: 0 0 8.5cqh; display: flex; align-items: center; justify-content: center; gap: 4cqw; color: #fff; }
.fb-front .fbf-mark { font: 700 6.4cqw/1 Oswald, 'Archivo Narrow', sans-serif; letter-spacing: .14em; }
.fb-front .fbf-art { position: relative; flex: 1; overflow: hidden; background: #000; }
.fb-front .fbf-art .fb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-front .fbf-gloss { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 75%, rgba(0,0,0,.35)); }
.fb-front .fbf-foot { flex: 0 0 6.5cqh; display: flex; align-items: center; gap: 3cqw; padding: 0 4cqw; color: #fff; font: 700 4cqw/1 'Archivo Narrow', sans-serif; letter-spacing: .08em; }
.fb-front .fbf-rate { border: 1px solid currentColor; padding: .15em .35em; }
.fb-front .fbf-vhs { font: 900 4.6cqw/1 'Archivo Black', sans-serif; font-style: italic; border: 1.5px solid currentColor; padding: .05em .3em; border-radius: 2px; }
.fb-front .fbf-hv { margin-left: auto; font-size: 3.2cqw; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-front.fb-white { background: #f4f2ec; }
.fb-front.fb-white .fbf-head, .fb-front.fb-white .fbf-foot { color: var(--band, #1b4fa0); }
.fb-front.fb-white .fbf-art { margin: 0 4.5cqw; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.fb-front.fb-white .fbf-head { flex-basis: 11cqh; flex-direction: column; gap: 0; }
.fb-front .fbf-script { font: italic 700 11cqw/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.fb-front .fbf-sub { font: 700 3.4cqw/1 'Archivo Narrow', sans-serif; letter-spacing: .5em; margin-top: 1cqh; }
.fb-front.fb-black { background: #0d0d0e; }
.fb-front.fb-black .fbf-art { margin: 0 3cqw; }
.fb-front.fb-black .fbf-head { color: #e9e4d8; }
.fb-front.fb-clear .fbf-art { margin: 0 3cqw; }
.fb-front .fb-noart, .fb-back .fbb-still.none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10%;
  background: var(--sp, #222); color: var(--st, #fff); font: 900 12cqw/1 'Archivo Black', sans-serif; }
/* spine */
.fb-spine { background: var(--sp, #222); color: var(--st, #fff); align-items: center; padding: 3cqh 0 2.5cqh; gap: 2cqh; container-type: size; }
.fb-spine .fbs-top { flex: none; max-width: 100%; overflow: hidden; font: 700 21cqw/1.02 Oswald, 'Archivo Narrow', sans-serif; letter-spacing: 0; text-align: center; opacity: .9; }
.fb-spine .fbs-top.mark { font: 900 30cqw/1 'Archivo Black', sans-serif; }
.fb-spine .fbs-title { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fb-spine .fbs-title b { writing-mode: vertical-rl; font: 400 52cqw/1 'Archivo Black', Impact, sans-serif; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; max-height: 100%; overflow: hidden; text-overflow: ellipsis; }
.fb-spine .fbs-logo { width: 72cqh; max-width: none; max-height: 78cqw; object-fit: contain; transform: rotate(90deg); }
.fb-spine .fbs-rate { flex: none; font: 700 22cqw/1 'Archivo Narrow', sans-serif; border: 1px solid currentColor; padding: .15em .1em; min-width: 62cqw; text-align: center; }
/* back */
.fb-back { background: #0e0d0c; color: #ece6d8; padding: 4cqw 4.5cqw 3cqw; gap: 1.6cqh; }
.fb-back .fbb-head { flex: none; font: 700 6.4cqw/1.08 Oswald, 'Archivo Narrow', sans-serif; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: .02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fb-back .fbb-stills { flex: 1 1 22cqh; min-height: 16cqh; max-height: 40cqh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 2.4cqw; }
.fb-back .fbb-still:first-child { grid-column: span 2; }
.fb-back .fbb-still { position: relative; display: block; background-repeat: no-repeat; border: 1.5px solid #f4efe2; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.fb-back .fbb-still:nth-child(2) { transform: rotate(-1.2deg); }
.fb-back .fbb-copy { flex: 0 1 auto; min-height: 0; margin: 0; font: 500 4.1cqw/1.32 'Archivo Narrow', Archivo, sans-serif; overflow: hidden; text-align: justify; color: #ddd6c6; }
.fb-back .fbb-credits { flex: none; font: 500 2.55cqw/1.25 'Archivo Narrow', sans-serif; letter-spacing: .02em; color: #b6ae9d; text-align: center; transform: scaleY(1.15); }
.fb-back .fbb-credits b { color: #fff; }
.fb-back .fbb-foot { flex: none; display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: 2.4cqw; align-items: end; }
.fb-back .fbb-rating { border: 1.5px solid #ece6d8; padding: 1.4cqw; display: grid; grid-template-columns: auto 1fr; column-gap: 1.6cqw; align-items: center; }
.fb-back .fbb-rating b { grid-row: span 2; font: 900 7.5cqw/1 'Archivo Black', sans-serif; }
.fb-back .fbb-rating span { font: 700 2.5cqw/1.05 'Archivo Narrow', sans-serif; }
.fb-back .fbb-rating small { font: 500 2cqw/1.05 'Archivo Narrow', sans-serif; opacity: .8; }
.fb-back .fbb-meta { display: flex; flex-wrap: wrap; gap: .8cqw 1.6cqw; font: 700 2.7cqw/1 'Archivo Narrow', sans-serif; justify-content: center; }
.fb-back .fbb-meta .vhs { font: 900 3.6cqw/1 'Archivo Black', sans-serif; font-style: italic; border: 1px solid currentColor; padding: .1em .3em; border-radius: 2px; }
.fb-back .fbb-bar { background: #fff; padding: 1.4cqw 1.6cqw 1cqw; text-align: center; }
.fb-back .fbb-bar i { display: block; height: 7cqh; }
.fb-back .fbb-bar small { display: block; font: 500 2.2cqw/1 'Archivo Narrow', monospace; color: #111; margin-top: .6cqw; letter-spacing: .12em; }
.fb-back .fbb-legal { flex: none; font: 500 1.9cqw/1.2 'Archivo Narrow', sans-serif; color: #8d8577; text-align: center; }
.fb-back.st-disney { background: #f6f4ee; color: #26324f; }
.fb-back.st-disney .fbb-head { color: var(--band); font-family: Georgia, serif; font-style: italic; text-transform: none; font-size: 6.8cqw; }
.fb-back.st-disney .fbb-copy { color: #2e3550; }
.fb-back.st-disney .fbb-credits, .fb-back.st-disney .fbb-legal { color: #6a6f80; }
.fb-back.st-disney .fbb-credits b { color: var(--band); }
.fb-back.st-disney .fbb-rating, .fb-back.st-disney .fbb-still { border-color: #26324f; }
.fb-back.st-disney .fbb-bar { box-shadow: 0 0 0 1px #ccc; }
.lowres { display: none; }

/* ============================================================ the cassette */
.tape { --th: calc(var(--tw) * 4.1 / 7.4); width: var(--tw); height: var(--th); position: relative; container-type: inline-size; border-radius: 1.4cqw;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 9%),
    repeating-linear-gradient(90deg, transparent 0 .9cqw, rgba(255,255,255,.012) .9cqw 1.1cqw),
    linear-gradient(180deg, #29292c, #151517 32%, #0f0f11);
  box-shadow: inset 0 0 0 1px #3a3a3e, inset 0 -.8cqw 0 rgba(0,0,0,.55), inset 0 .5cqw 0 rgba(255,255,255,.06); }
.tape .t-grip { position: absolute; left: 1.4%; right: 1.4%; top: 2.4%; height: 5%; border-radius: .6cqw;
  background: repeating-linear-gradient(90deg, #0b0b0c 0 .5cqw, #232326 .5cqw 1.1cqw); opacity: .8; }
.tape .t-label { position: absolute; left: 7%; right: 7%; top: 9%; height: 41%; border-radius: .5cqw; overflow: hidden;
  background: var(--labbg, #f4f1e8); color: var(--ink, #111); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 .2cqw .3cqw rgba(0,0,0,.4); }
.tape .t-label.real { background: #ddd; }
.tape .t-label-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tape .t-band { height: 27%; background: var(--band, #222); color: #fff; display: flex; align-items: center; padding: 0 3%;
  font: 700 2.5cqw/1 Oswald, 'Archivo Narrow', sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 -.5cqw 0 var(--lab, #c00); }
.tape .t-band i { font: italic 700 3.3cqw/1 Georgia, serif; letter-spacing: 0; text-transform: none; margin-right: .5em; }
.tape .t-title { padding: 2.2cqw 3% 0; font: 400 5.6cqw/1.05 'Archivo Black', Impact, sans-serif; color: var(--ink, #111); text-transform: uppercase; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* long titles: two lines, set smaller, the way a typed label wraps (never a web-page ellipsis) */
.tape .t-title.long, .tape .t-title.xlong { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 4.4cqw; }
.tape .t-title.xlong { font-size: 3.6cqw; }
.tape .t-small { position: absolute; left: 3%; right: 3%; bottom: 7%; display: flex; gap: 2cqw; align-items: center; font: 700 1.9cqw/1 'Archivo Narrow', sans-serif; letter-spacing: .08em; color: #555; }
.tape .t-small span:last-child { margin-left: auto; }
.tape .t-rate { border: 1px solid #555; padding: .15em .3em; color: #222; }
.tape .t-label.st-disney .t-band { background: #fff; color: var(--band); box-shadow: inset 0 -.4cqw 0 var(--band); }
.tape .t-label.st-disney .t-title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; text-transform: none; color: var(--band); font-size: 6.4cqw; }
.tape .t-label.st-mca, .tape .t-label.st-hbo { background: #ecebe4; }
.tape .t-window { position: absolute; left: 25%; right: 25%; top: 55%; height: 27%; border-radius: 1cqw; overflow: hidden;
  background: linear-gradient(180deg, rgba(64,54,48,.88), rgba(14,11,9,.96)); box-shadow: inset 0 0 0 1px #000, inset 0 .6cqw 1.2cqw rgba(0,0,0,.85); }
.tape .t-strip { position: absolute; left: 0; right: 0; top: 40%; height: 12%; background: rgba(255,255,255,.05); }
.tape .reel { position: absolute; top: 50%; width: 23cqw; height: 23cqw; margin-top: -11.5cqw; border-radius: 50%;
  background: radial-gradient(circle, #e4e0d8 0 11%, #8a8580 12% 15%, #2a1b12 16% var(--r), #3b2a1f calc(var(--r) + .3%), transparent calc(var(--r) + 1%)); }
.tape .reel::after { content: ''; position: absolute; inset: 39%; border-radius: 50%; background: repeating-conic-gradient(#d6d2ca 0 22deg, #77736c 22deg 60deg); opacity: .85; }
.tape .reel.l { left: -3cqw; } .tape .reel.r { right: -3cqw; }
.tape .t-glare { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 35%, transparent 70%, rgba(255,255,255,.06)); }
.tape .t-vhs { position: absolute; left: 8%; top: 61%; font: italic 900 3.6cqw/1 'Archivo Black', sans-serif; color: #7a7a80; border: .25cqw solid #6a6a70; border-radius: .6cqw; padding: .3cqw .8cqw; letter-spacing: .02em; }
.tape .t-hifi { position: absolute; right: 8%; top: 62%; font: italic 700 2.6cqw/1 Georgia, serif; color: #6a6a70; }
.tape .t-tab { position: absolute; left: 2.2%; top: 4%; width: 3.6%; height: 7%; background: #000; border-radius: .2cqw; box-shadow: inset 0 .3cqw .4cqw rgba(255,255,255,.08); }
.tape .t-screw { position: absolute; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: radial-gradient(circle, #8a8a8e 0 25%, #3a3a3e 30% 60%, #1a1a1c 64%); bottom: 6%; }
.tape .t-screw.a { left: 4%; } .tape .t-screw.b { right: 4%; } .tape .t-screw.c { left: 50%; margin-left: -1.2cqw; bottom: auto; top: 51%; transform: scale(.7); }

/* the tape's end as it shows in the VCR slot (fills the slot; ~7.4 x 1) */
.slot-tape-face { position: absolute; inset: 6% 0; border-radius: .7cqw; container-type: inline-size; display: flex; align-items: center; gap: 2%; padding: 0 2.4%;
  background: linear-gradient(180deg, #2c2c2f, #141416 60%, #0d0d0e); box-shadow: 0 1cqw 1.4cqw rgba(0,0,0,.6), inset 0 .15cqw 0 rgba(255,255,255,.15); }
.slot-tape-face .stf-tab { flex: none; width: 2.2%; height: 46%; background: #000; border-radius: .2cqw; box-shadow: inset 0 .2cqw .3cqw rgba(255,255,255,.08); }
.slot-tape-face .stf-label { flex: 1; min-width: 0; height: 72%; display: flex; align-items: center; gap: 2%; padding: 0 2%; border-radius: .3cqw; overflow: hidden;
  background: var(--labbg, #f4f1e8); color: var(--ink, #111); box-shadow: inset 0 -.5cqw 0 var(--lab, #c00), inset 0 0 0 1px rgba(0,0,0,.2); }
.slot-tape-face .stf-studio { flex: none; background: var(--band, #222); color: #fff; font: 700 1.5cqw/1 Oswald, 'Archivo Narrow', sans-serif; letter-spacing: .14em; padding: .5cqw .8cqw; border-radius: .2cqw; }
.slot-tape-face .stf-title { flex: 1; min-width: 0; font: 400 2.6cqw/1 'Archivo Black', Impact, sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-tape-face .stf-vhs { flex: none; font: italic 900 1.6cqw/1 'Archivo Black', sans-serif; border: .2cqw solid currentColor; border-radius: .3cqw; padding: .2cqw .5cqw; opacity: .7; }
.slot-tape-face .stf-ribs { flex: none; width: 7%; height: 50%; background: repeating-linear-gradient(90deg, #0b0b0c 0 .4cqw, #2a2a2d .4cqw .9cqw); border-radius: .2cqw; }
.slot-tape-face.st-disney .stf-studio { background: #fff; color: var(--band); box-shadow: inset 0 0 0 1px var(--band); }
.slot-tape-face.st-disney .stf-title { font-family: Georgia, serif; font-style: italic; font-weight: 700; text-transform: none; color: var(--band); font-size: 2.9cqw; }

/* ============================================================ the pull-out ghost */
.pull-ghost { position: fixed; z-index: 900; pointer-events: none; perspective: 1600px; --cw: calc(var(--cH) * 4.1 / 7.4); --cd: calc(var(--cH) * 1.05 / 7.4 * var(--thick, 1)); --tl: var(--tree-light, #ffb46a); --ll: var(--lamp-light, #ffcf8f); --spec: .3; }
.pull-ghost .box { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--cH); transform-style: preserve-3d; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.pull-ghost .box.slip .face { background: var(--sp, #222); }
.pull-ghost .f-edge, .pull-ghost .f-top, .pull-ghost .f-bottom, .pull-ghost .f-back { background: #111; }
.pull-ghost .sheen.gloss { opacity: .3; } .pull-ghost .sheen.matte { opacity: .08; }

/* ============================================================ the shelves */
.collection {
  --sh: var(--shelf-h, clamp(150px, 21vh, 214px));            /* standing tape height */
  --sw: calc(var(--sh) * 1.05 / 7.4);           /* spine width (true thickness) */
  --wd: var(--wood-dark, #1c0f07);
  --w1: var(--wood-1, #7b4c2c); --w2: var(--wood-2, #5e3a21); --w3: var(--wood-3, #8d5d38);
  --tl: var(--tree-light, #ffb46a); --ll: var(--lamp-light, #ffcf8f);
  position: relative; overflow-x: clip; -webkit-user-select: none; user-select: none; padding: 0 0 6px;
}
.collection { container-type: inline-size; }
.units { display: flex; flex-direction: column; gap: 34px; }
@container (min-width: 360px) { .units { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } }
.case-unit { min-width: 0; }
.case-unit { position: relative; margin: 30px 0 0; padding: 0 14px 0;
  background: url(../assets/art/wood-grain.png) 0 0 / 720px auto, var(--w2); background-blend-mode: multiply;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 18px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,220,170,.18); }
.case-unit::before { /* vertical grain on the side stiles */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 14px, transparent calc(100% - 14px), rgba(0,0,0,.4)),
    radial-gradient(90% 60% at 0% 20%, color-mix(in srgb, var(--tl) 22%, transparent), transparent 70%); }
.unit-top { position: relative; height: 16px; margin: 0 -18px; border-radius: 4px 4px 0 0;
  background: url(../assets/art/wood-grain.png) 0 0 / 720px auto, var(--w3); background-blend-mode: multiply;
  box-shadow: 0 6px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,225,180,.35); z-index: 3; }
.unit-top .garland { position: absolute; left: 6px; right: 6px; top: -10px; height: 70px; pointer-events: none; z-index: 4; overflow: visible; }
.garland-svg { display: block; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.unit-base { height: 18px; margin: 0 -14px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #120904, #2a170b 40%, #140a05); box-shadow: inset 0 3px 6px rgba(0,0,0,.6); }
.unit-body { position: relative; display: flex; flex-direction: column; padding-top: 4px; }

.shelf { position: relative; }
.shelf-cell { position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.18) 22%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.4)),
    radial-gradient(70% 90% at 10% 100%, color-mix(in srgb, var(--tl) 20%, transparent), transparent 70%),
    url(../assets/art/wood-grain.png) 0 0 / 600px auto, var(--wd);
  background-blend-mode: normal, normal, multiply, normal;
  box-shadow: inset 12px 0 14px -10px rgba(0,0,0,.8), inset -12px 0 14px -10px rgba(0,0,0,.8); }
.shelf-track { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; touch-action: pan-x pan-y;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 18px; }
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-row { position: relative; display: flex; align-items: flex-end; gap: 0; width: max-content; min-width: 100%;
  height: calc(var(--sh) + var(--sw) + 22px); padding: 0 22px 0 18px; }
.shelf-row .row-end { flex: 1 0 18px; }

/* ---------- spines */
.spine {
  --w: calc(var(--sw) * var(--thick, 1));
  position: relative; flex: none; width: var(--w); height: var(--sh); margin: 0 0 0 var(--gap, 0px); padding: 0; border: 0; border-radius: 1.5px 1.5px 0 0;
  background: var(--sp, #222); color: inherit; cursor: pointer; overflow: hidden; scroll-snap-align: start; container-type: size;
  transform-origin: 50% 100%; transform: rotate(var(--lean, 0deg));
  box-shadow: 1px 0 0 rgba(0,0,0,.55), -1px 0 0 rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.3,1.5,.5,1), box-shadow .22s, filter .2s;
  touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; outline: none;
}
.spine.clam { height: calc(var(--sh) * 1.025); border-radius: 3px 3px 1px 1px; }
.spine .spine-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.spine .spine-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(255,255,255,.07) 20%, transparent 45%, transparent 75%, rgba(0,0,0,.42)),
    linear-gradient(180deg, color-mix(in srgb, var(--tl) 18%, transparent), transparent 30%, transparent 75%, rgba(0,0,0,.35)); }
.spine.clam .spine-shade { background:
    linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.28) 16%, rgba(255,255,255,.05) 30%, transparent 50%, transparent 78%, rgba(0,0,0,.45)),
    linear-gradient(180deg, color-mix(in srgb, var(--tl) 18%, transparent), transparent 30%, transparent 78%, rgba(0,0,0,.3)); }
.spine.clam.shell-white { box-shadow: 1px 0 0 rgba(0,0,0,.4), -1px 0 0 rgba(0,0,0,.25), inset 0 0 0 1.5px #ebe8e1; }
.spine.clam.shell-black { box-shadow: 1px 0 0 rgba(0,0,0,.6), -1px 0 0 rgba(0,0,0,.4), inset 0 0 0 1.5px #111; }
.spine .daws-tape { --cw: calc(var(--sw) * 4); left: 10%; right: 10%; bottom: 7%; font-size: calc(var(--sw) * .36); padding: 5% 0; }
.spine .sunfade { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(222,214,192,.5), rgba(206,212,214,.38) 55%, rgba(230,222,200,.28)); }
.spine .spine-note { display: none; }
@media (hover: hover) {
  .spine:hover { transform: translateY(-4px) perspective(500px) rotateX(-9deg); box-shadow: 1px 0 0 rgba(0,0,0,.5), -1px 0 0 rgba(0,0,0,.35), 0 8px 10px -4px rgba(0,0,0,.7); z-index: 2; }
}
.spine:focus-visible { transform: translateY(-4px) perspective(500px) rotateX(-9deg); z-index: 2;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tl) 80%, #fff), 0 8px 10px -4px rgba(0,0,0,.7); }
.spine:active { transform: translateY(-2px) scale(.985); }
.spine.out { visibility: hidden; pointer-events: none; transition: none; }
.spine.empty { transform: translateY(-3px) scale(1.035); filter: brightness(.66) saturate(.85); z-index: 1;
  box-shadow: 2px 0 3px rgba(0,0,0,.6), -2px 0 3px rgba(0,0,0,.5); overflow: visible; }
.spine.empty .spine-note { display: block; position: absolute; left: 50%; top: -9px; width: calc(var(--sw) * 1.15); height: 16px; margin-left: calc(var(--sw) * -.575);
  background: linear-gradient(180deg, #fff59a, #f6e266); transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0,0,0,.4); filter: brightness(1.5); }
.spine.empty .spine-note::after { content: 'VCR'; position: absolute; inset: 0; font: 400 9px/16px 'Permanent Marker', cursive; color: #1f2a6b; text-align: center; }
/* a tape tossed flat on top of the others, spine out */
.spine.flat { position: absolute; left: calc(18px + var(--flat-at, 0) * var(--sw) + 6px); bottom: calc(var(--sh) * 1.025 + 1px);
  width: calc(var(--sh) * 1.0); height: var(--w); transform: rotate(-.8deg); z-index: 1; scroll-snap-align: none; }
.spine.flat > .spine-img, .spine.flat > .fb-spine { left: 50%; top: 50%; right: auto; bottom: auto; width: var(--w); height: var(--sh); transform: translate(-50%, -50%) rotate(-90deg); }
.spine.flat .spine-shade { background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.45)); }
.spine.flat .daws-tape { display: none; }
@media (hover: hover) { .spine.flat:hover { transform: translateY(-3px) rotate(-.8deg); } }
.spine.flat:focus-visible { transform: translateY(-3px) rotate(-.8deg); }

/* ---------- shelf board + masking-tape label */
.shelf-lip { position: relative; z-index: 2; height: 15px; margin: 0 -14px;
  background: linear-gradient(180deg, rgba(255,228,190,.32), rgba(255,228,190,.06) 2px, transparent 5px, rgba(0,0,0,.35)), url(../assets/art/wood-grain.png) 0 0 / 640px auto, var(--w1);
  background-blend-mode: normal, multiply, normal;
  box-shadow: 0 7px 9px -2px rgba(0,0,0,.55), 0 -1px 0 rgba(0,0,0,.4); }
.shelf-lip::before { content: ''; position: absolute; left: 14px; right: 14px; top: -6px; height: 6px; pointer-events: none;
  background: url(../assets/art/dust.png) 0 0 / 160px 160px, linear-gradient(180deg, transparent, rgba(0,0,0,.25)); opacity: .55; }
.shelf-label { position: absolute; left: 30px; top: 1px; padding: 1px 9px 0; transform: rotate(var(--rot, 0deg));
  font: 400 11px/14px 'Permanent Marker', cursive; letter-spacing: .06em; color: #1d1d3a; white-space: nowrap;
  background: linear-gradient(180deg, rgba(238,224,186,.96), rgba(222,204,160,.96)); box-shadow: 0 1px 2px rgba(0,0,0,.35);
  clip-path: polygon(0 6%, 4% 0, 97% 4%, 100% 0, 99% 96%, 95% 100%, 3% 95%, 0 100%); }
.shelf-christmas .shelf-label { color: #a3101a; }

/* ---------- fade edges + "more →" */
.shelf-fade { position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .25s; }
.shelf-fade.l { left: 0; background: linear-gradient(90deg, var(--wd), transparent); }
.shelf-fade.r { right: 0; background: linear-gradient(270deg, var(--wd), transparent); }
.shelf-cell.can-scroll:not(.at-start) .shelf-fade.l, .shelf-cell.can-scroll:not(.at-end) .shelf-fade.r { opacity: .92; }
/* "more →" rides the shelf's lip at the right, like the label at the left: never over the garland or a tape lying flat */
.shelf-more { position: absolute; right: 4px; top: 50%; z-index: 5; pointer-events: none; opacity: 0; transform: translateY(-50%);
  transition: opacity .25s, color .15s, transform .15s;
  padding: 7px 7px 6px; margin: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  font: 400 11px/1 'Permanent Marker', cursive; letter-spacing: .04em; color: rgba(255,236,200,.86); text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.6); }
.shelf:has(.shelf-cell.can-scroll) .shelf-more { opacity: 1; pointer-events: auto; }
.shelf-more:hover { color: #fff3d6; transform: translate(2px, -50%); }
.shelf-more:focus-visible { outline: 2px solid rgba(255,236,200,.8); outline-offset: 1px; border-radius: 3px; }

/* ---------- decor on the shelves */
.decor { flex: none; position: relative; align-self: flex-end; pointer-events: none; }
.decor.bookend { width: 12px; height: calc(var(--sh) * .62); margin-left: 4px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #6d5326, #c9a456 35%, #8a6a30 60%, #4f3a16); box-shadow: 2px 0 4px rgba(0,0,0,.5); }
.decor.bookend::after { content: ''; position: absolute; left: -10px; right: -2px; bottom: 0; height: 4px; background: #5a4319; border-radius: 1px; }
/* Grandma's ceramic tree with the little plastic bulbs */
.decor.ceramic-tree { width: calc(var(--sh) * .5); height: calc(var(--sh) * .78); margin-left: 14px; }
.ceramic-tree .ct-tree { position: absolute; left: 6%; right: 6%; top: 6%; bottom: 14%;
  background: radial-gradient(60% 50% at 35% 40%, rgba(255,255,255,.2), transparent 60%),
    repeating-linear-gradient(170deg, transparent 0 7px, rgba(0,0,0,.15) 7px 9px), linear-gradient(90deg, #0f4a26, #1d6b3a 45%, #0c3a1d);
  clip-path: polygon(50% 0, 62% 20%, 57% 21%, 72% 44%, 66% 45%, 84% 70%, 78% 71%, 100% 100%, 0 100%, 22% 71%, 16% 70%, 34% 45%, 28% 44%, 43% 21%, 38% 20%); }
.ceramic-tree .ct-tree i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px 1px var(--c); }
.ceramic-tree .ct-star { position: absolute; left: 50%; top: -3%; width: 9px; height: 9px; margin-left: -4.5px; background: #fff6c8;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); box-shadow: 0 0 6px #ffe9a0; }
.ceramic-tree .ct-base { position: absolute; left: 14%; right: 14%; bottom: 0; height: 15%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #f2ede1, #b9b2a2); }
.decor.ceramic-tree::before { content: ''; position: absolute; inset: -30% -40% -10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bulb-amber, #ffb52e) 30%, transparent), transparent); }
/* the red sports-car tape rewinder */
.decor.rewinder { width: calc(var(--sh) * .78); height: calc(var(--sh) * .26); margin-left: 12px; }
.rewinder .rw-body { position: absolute; left: 0; right: 0; bottom: 14%; height: 72%; border-radius: 40% 55% 14% 14% / 70% 80% 20% 20%;
  background: linear-gradient(180deg, #ff5b45, #c4161c 55%, #7a0a0e); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.rewinder .rw-glass { position: absolute; left: 30%; width: 34%; top: 6%; height: 34%; border-radius: 50% 50% 6% 6%; background: linear-gradient(180deg, #2b3440, #0d1218); }
.rewinder span { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font: 700 7px/1 Oswald, sans-serif; letter-spacing: .2em; color: #ffd9c8; }
.rewinder .rw-wheel { position: absolute; bottom: 0; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #aaa 0 22%, #111 26%); }
.rewinder .rw-wheel.a { left: 10%; } .rewinder .rw-wheel.b { right: 10%; }
/* home-recorded tapes, marker labels */
.decor.home-tapes { width: calc(var(--sh) * .98); margin-left: 12px; display: flex; flex-direction: column-reverse; }
.home-tapes .ht { height: var(--sw); margin-top: -1px; border-radius: 2px; background: linear-gradient(180deg, #2a2a2d, #111113); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 1px rgba(0,0,0,.5);
  display: flex; align-items: center; padding: 0 6% 0 9%; transform: translateX(3px) rotate(.6deg); }
.home-tapes .ht.b { transform: translateX(-4px) rotate(-.8deg); }
.home-tapes .ht.c { transform: translateX(1px); }
.home-tapes .ht span { flex: 1; background: #f3eedf; color: #1d2a6b; font: 400 calc(var(--sw) * .36)/1.45 'Permanent Marker', cursive; padding: 0 4%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 1px; }
/* Dad's tapes lie piled at the FRONT of the Funny shelf, in front of the standing tapes (they used to sit past them,
   in the part of the row you had to scroll to, showing 20px stubs): a stack you can read, every bit of it clickable,
   covering only the feet of the boxes behind it */
.shelf-row.has-ht > .decor.home-tapes { position: absolute; left: 26px; bottom: 0; margin: 0; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 -5px 6px rgba(0,0,0,.45)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.shelf-row.has-ht .home-tapes .ht { height: calc(var(--sw) * 1.08); position: relative; }
.shelf-row.has-ht .home-tapes .ht span { font-size: calc(var(--sw) * .42); line-height: 1.5; }
.home-tapes .ht:focus-visible { outline: 2px solid color-mix(in srgb, var(--tl, #ffb46a) 80%, #fff); outline-offset: 1px; }
/* a Polaroid leaning on the end */
.decor.polaroid { width: calc(var(--sh) * .42); height: calc(var(--sh) * .5); margin-left: 12px; transform: rotate(-7deg); transform-origin: 0 100%;
  background: #f4f1e8; padding: 7% 7% 0; box-shadow: 2px 3px 5px rgba(0,0,0,.5); }
.polaroid .pl-photo { position: relative; height: 72%; background: linear-gradient(180deg, #3b2a1d, #6a4626 60%, #2a1a0f); overflow: hidden; }
.polaroid .pl-tree { position: absolute; right: 12%; bottom: 0; width: 40%; height: 80%; background: #1d4a26; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 100px #1d4a26; }
.polaroid .pl-tree::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 40% 50%, #ffb52e 0 3%, transparent 4%), radial-gradient(circle at 60% 70%, #e8322a 0 3%, transparent 4%), radial-gradient(circle at 50% 35%, #2f5fe0 0 3%, transparent 4%); }
.polaroid .pl-kid { position: absolute; bottom: 0; width: 16%; height: 46%; border-radius: 40% 40% 0 0; background: #c99a72; }
.polaroid .pl-kid.a { left: 14%; } .polaroid .pl-kid.b { left: 34%; height: 36%; background: #b5865e; }
.polaroid span { display: block; text-align: center; font: 400 calc(var(--sh) * .06)/1.6 'Reenie Beanie', cursive; color: #2a2a5a; }

/* ---------- phone: one swipe row per shelf, bigger spines */
@media (max-width: 820px) {
  .collection { --sh: var(--shelf-h, clamp(150px, 46vw, 186px)); }
  .units { display: flex; flex-direction: column; }
  .case-unit { margin-top: 26px; padding: 0 10px; }
  .unit-top { margin: 0 -12px; }
  .shelf-lip, .unit-base { margin: 0 -10px; }
  .shelf-row { padding: 0 16px 0 12px; }
  .spine.flat { left: calc(12px + var(--flat-at, 0) * var(--sw) + 6px); }
  .shelf-label { left: 22px; }
}

/* ---------- reduced motion: no lean, no bounce, instant swaps */
@media (prefers-reduced-motion: reduce) {
  .spine, .spine.flat { transition: none; transform: none !important; }
  .spine:focus-visible { box-shadow: 0 0 0 2px #fff; }
  .case.box3d .stage, .case.box3d .turn, .box3d.clam .lid, .box3d.slip .sleeve-tape.spring { transition: none !important; }
  .box3d.clam .lid { transition: opacity .15s !important; }
}

/* integration: the base .box plane sits in front of the tray in 3D and swallowed taps on the tape; only its faces take pointers */
.box3d.clam .stage, .box3d.clam .turn, .box3d.clam .box { pointer-events: none; }
.box3d.clam .box > * { pointer-events: auto; }