/* v20 Record Crate: landing page */

html.locked { overflow: hidden; }

/* The crate run: a tall section whose stage stays put while scrolling flicks the records */
.run { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; background: var(--night); }
.scene {
  position: absolute; inset: 0; overflow: hidden; overflow: clip;
  perspective: 2300px; perspective-origin: 50% 50%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.scene.dragging { cursor: grabbing; }
.glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 52% at 50% 46%, rgba(255, 196, 120, 0.07), transparent 70%),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(8, 6, 5, 0.72) 100%);
}

/* The crate: one 3D box, sizes set from script */
.crate { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.crate > div { position: absolute; }

.shopfloor {
  left: -900px; right: -900px; top: -700px; bottom: -420px;
  transform: translateZ(-3px);
  background-color: #1b1714;
  background-image:
    radial-gradient(ellipse 34% 38% at 50% 58%, rgba(255, 205, 140, 0.13), transparent 100%),
    repeating-conic-gradient(#25201b 0 25%, #191512 0 50%);
  background-size: 100% 100%, 132px 132px;
  -webkit-mask-image: radial-gradient(ellipse 44% 50% at 50% 60%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 50% at 50% 60%, #000 30%, transparent 100%);
}
.c-shadow {
  left: -40px; right: -40px; top: -30px; bottom: -50px;
  transform: translateZ(-2px);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.4) 70%, transparent);
}
.c-bed {
  left: 0; top: 0; right: 0; bottom: 0;
  transform: translateZ(-1px);
  background-color: #6f4a2a;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 25%);
}

.c-wall, .c-rim {
  background-color: var(--pine);
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 50, 20, 0.12) 0 1px, transparent 1px 7px, rgba(255, 230, 190, 0.06) 7px 9px, transparent 9px 17px, rgba(80, 45, 18, 0.09) 17px 19px, transparent 19px 31px);
}
.c-front {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 6% calc(var(--S) * 0.03);
  background-image:
    linear-gradient(to bottom, rgba(255, 236, 200, 0.16), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.28)),
    linear-gradient(to bottom, rgba(40, 20, 6, 0.4) 0 2px, transparent 2px calc(100% - 3px), rgba(40, 20, 6, 0.5) calc(100% - 3px)),
    repeating-linear-gradient(90deg, rgba(90, 50, 20, 0.12) 0 1px, transparent 1px 7px, rgba(255, 230, 190, 0.06) 7px 9px, transparent 9px 17px, rgba(80, 45, 18, 0.09) 17px 19px, transparent 19px 31px);
  box-shadow: inset 0 0 0 1px rgba(60, 30, 10, 0.35);
}
.c-front::before, .c-front::after {
  content: ""; position: absolute; top: 20%; width: 5px; height: 5px; border-radius: 50%;
  background: #3b2a1d; box-shadow: 0 calc(var(--S) * 0.16) 0 #3b2a1d;
}
.c-front::before { left: 3.5%; }
.c-front::after { right: 3.5%; }
.c-left, .c-right {
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1)),
    repeating-linear-gradient(0deg, rgba(90, 50, 20, 0.14) 0 1px, transparent 1px 8px, rgba(255, 230, 190, 0.05) 8px 10px, transparent 10px 23px);
}
.c-left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12)), repeating-linear-gradient(0deg, rgba(90, 50, 20, 0.14) 0 1px, transparent 1px 8px, rgba(255, 230, 190, 0.05) 8px 10px, transparent 10px 23px); }
.c-right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12)), repeating-linear-gradient(0deg, rgba(90, 50, 20, 0.14) 0 1px, transparent 1px 8px, rgba(255, 230, 190, 0.05) 8px 10px, transparent 10px 23px); }
.c-back { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)); }
.c-rim { background-color: #d9a46b; background-image: linear-gradient(rgba(255, 240, 210, 0.18), rgba(0, 0, 0, 0.08)); box-shadow: inset 0 0 0 1px rgba(90, 50, 20, 0.25); }

.stencil {
  margin: 0; color: rgba(34, 18, 7, 0.86);
  font: 400 calc(var(--S) * 0.088)/1 var(--sten); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.stencil-line {
  margin: calc(var(--S) * 0.012) 0 0; color: rgba(34, 18, 7, 0.78);
  font: 600 max(10px, calc(var(--S) * 0.03))/1.2 var(--mono); letter-spacing: 0.04em; text-align: center;
}

/* Records */
.rec { transform-style: preserve-3d; transform-origin: 50% 100%; cursor: pointer; }
.rec-f, .rec-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.rec-f { transform: translateZ(var(--th2)); }
.rec-b { transform: rotateY(180deg) translateZ(var(--th2)); }
.rec-f > svg { width: 100%; height: 100%; }
.rec-e {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--th);
  transform-origin: 50% 0; transform: translateZ(var(--th2)) rotateX(-90deg);
  box-shadow: inset 0 0 0 40px rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.sh { position: absolute; inset: 0; background: #0b0806; opacity: 0; pointer-events: none; }
.rec.out { visibility: hidden; }

/* Shelf talker: the handwritten card clipped to the crate */
.talker {
  position: absolute; z-index: 3; right: max(24px, 4vw); top: 50%;
  width: clamp(200px, 19vw, 280px);
  transform: translateY(-50%) rotate(1.4deg);
  padding: 26px 22px 22px;
  background: var(--paper); color: var(--paper-ink);
  background-image: linear-gradient(transparent 0 47px, rgba(214, 69, 39, 0.5) 47px 48px, transparent 48px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 22px 34px rgba(0, 0, 0, 0.5);
}
.talker::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(236, 226, 200, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.talker p { margin: 0; }
.t-no { display: flex; align-items: baseline; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.t-no b { font-size: 14px; }
.t-title { margin-top: 18px !important; font: 700 clamp(24px, 2.2vw, 31px)/1.04 var(--hand); overflow-wrap: break-word; }
.t-kind {
  display: inline-block; margin-top: 10px !important; padding: 5px 8px 4px; border: 1.5px solid currentColor; border-radius: 99px;
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.t-tag { margin-top: 12px !important; font: 400 clamp(17px, 1.4vw, 20px)/1.28 var(--hand); }
.t-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.t-acts .btn-solid { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.talker.swap .t-title, .talker.swap .t-tag, .talker.swap .t-kind { animation: talk 0.32s ease-out; }
@keyframes talk { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Counter and arrows */
.dial { position: absolute; z-index: 3; left: max(24px, 4vw); top: 50%; transform: translateY(-50%); }
.count { margin: 0; display: flex; flex-direction: column; }
.count b { font: 800 clamp(72px, 8vw, 124px)/0.82 var(--grot); font-stretch: 62%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.count span { margin-top: 10px; font: 600 12px/1 var(--mono); color: var(--soft); letter-spacing: 0.1em; text-transform: uppercase; }
.count i { font-style: normal; color: var(--ink); }
.arrows { display: flex; gap: 10px; margin-top: 22px; }
.arrow {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover:not(:disabled) { background: var(--ink); color: var(--night); }
.arrow:disabled { opacity: 0.3; cursor: default; }

.hint {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; margin: 0; transform: translateX(-50%);
  font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft);
  transition: opacity 0.6s;
}
.hint.gone { opacity: 0; }
.basket {
  position: absolute; z-index: 3; top: 22px; right: max(24px, 4vw); margin: 0;
  font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft);
}
.basket b, .basket-foot b { color: var(--ink); }

/* Discography */
.disco { max-width: 1120px; margin: 0 auto; padding: 110px 32px 30px; }
.disco-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.disco-head h2 { margin: 0; font: 800 clamp(48px, 8vw, 112px)/0.86 var(--grot); font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.005em; }
.disco-count { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.disco-list { list-style: none; margin: 0; padding: 0; }
.d-row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.d-cover { width: 84px; height: 84px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.d-meta { display: block; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.d-title { display: block; margin-top: 8px; font: 800 clamp(24px, 2.6vw, 36px)/1 var(--grot); font-stretch: 72%; text-transform: uppercase; overflow-wrap: break-word; transition: color 0.2s; }
.d-tag { display: block; margin-top: 7px; max-width: 62ch; color: #d4c9b8; font-size: 16px; line-height: 1.4; }
.d-go { font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.d-row:hover .d-title, .d-row:focus-visible .d-title { color: var(--hot); }
.d-row:hover .d-cover, .d-row:focus-visible .d-cover { transform: rotate(-4deg) translateY(-3px); }

.foot {
  max-width: 1120px; margin: 0 auto; padding: 34px 32px 60px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft);
}
.foot p { margin: 0; }
.foot b { color: var(--ink); font-weight: 700; margin-right: 10px; }

/* Pulled out: the sleeve, its disc, flip and open */
.viewer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; --V: min(500px, 60vh, 42vw); }
.viewer[hidden] { display: none; }
.v-shade { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.92); opacity: 0; transition: opacity 0.45s; }
.viewer.open .v-shade { opacity: 1; }
.v-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.v-stage { position: relative; width: var(--V); height: var(--V); transform: translateX(calc(var(--V) * -0.21)); }
.v-disc { position: absolute; inset: 2%; border-radius: 50%; transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); }
.viewer.disc-out .v-disc { transform: translateX(calc(var(--V) * 0.44)); }
.v-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 34%, #0f0e0d 34% 35.5%, transparent 35.5% 96%, #0b0a09 96%),
    repeating-radial-gradient(circle, #141312 0 1.2px, #22201d 1.2px 2.5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  animation: spin 1.8s linear infinite; animation-play-state: paused;
}
.viewer.disc-out .v-grooves { animation-play-state: running; }
.disc-label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; }
.v-sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0 6%, rgba(255, 255, 255, 0.12) 11%, transparent 17% 50%, rgba(255, 255, 255, 0.09) 61%, transparent 67%);
}
@keyframes spin { to { transform: rotate(360deg); } }
.v-sleeve { position: absolute; inset: 0; perspective: 1800px; transform-origin: 50% 50%; cursor: pointer; }
.viewer.anim .v-sleeve { transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1); }
.v-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.35, 0.1, 0.2, 1); }
.viewer.flipped .v-flip { transform: rotateY(180deg); }
.v-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
.v-backface { transform: rotateY(180deg); }
.v-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  width: calc(var(--V) * 1.42); opacity: 0; transform: translateY(8px); transition: opacity 0.4s 0.15s, transform 0.4s 0.15s;
}
.viewer.open .v-bar { opacity: 1; transform: none; }
.v-id { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.v-no, .v-kind { font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.v-title { font: 800 26px/1.05 var(--grot); font-stretch: 72%; text-transform: uppercase; }
.v-btns { display: flex; gap: 10px; flex: none; }

/* Phone and portrait tablet: the crate seen front on, swiped through, the list below */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .run { height: auto !important; }
  .stage { position: relative; height: auto; display: flex; flex-direction: column; padding-bottom: 8px; overflow: visible; }
  .scene { position: relative; inset: auto; width: 100%; height: 560px; }
  .basket { top: 16px; right: 16px; }
  .talker {
    position: relative; right: auto; top: auto; width: calc(100% - 40px); max-width: 560px; margin: 22px auto 0;
    transform: rotate(-0.8deg); padding: 22px 18px 18px;
    background-image: linear-gradient(transparent 0 43px, rgba(214, 69, 39, 0.5) 43px 44px, transparent 44px);
  }
  .t-title { margin-top: 16px !important; font-size: 28px; }
  .t-tag { font-size: 19px; }
  .t-acts .btn { flex: 1 1 0; }
  .dial {
    position: relative; left: auto; top: auto; transform: none; order: -1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: calc(100% - 32px); max-width: 580px; margin: 0 auto; padding: 14px 0 0;
  }
  .scene { order: -3; }
  .count { flex-direction: row; align-items: baseline; gap: 10px; }
  .count b { font-size: 56px; }
  .count span { margin: 0; }
  .arrows { margin: 0; }
  .hint { position: relative; left: auto; bottom: auto; transform: none; text-align: center; order: -2; margin: 0; }
  .disco { padding: 64px 16px 20px; }
  .disco-head { flex-wrap: wrap; }
  .d-row { grid-template-columns: 68px minmax(0, 1fr); gap: 16px; padding: 14px 0; align-items: start; }
  .d-cover { width: 68px; height: 68px; }
  .d-title { font-size: 25px; }
  .d-go { display: none; }
  .foot { padding: 28px 16px 48px; }
  .shopfloor { left: -560px; right: -560px; top: -520px; bottom: -320px; }
  .viewer { --V: min(calc(100vw - 56px), 48vh, 420px); }
  .v-stage { transform: translateX(calc(var(--V) * -0.04)); }
  .viewer.disc-out .v-disc { transform: translateX(calc(var(--V) * 0.3)); }
  .v-wrap { gap: 22px; }
  .v-bar { width: calc(100vw - 32px); flex-direction: column; align-items: stretch; gap: 16px; }
  .v-btns .btn { flex: 1 1 0; padding: 0 8px; }
  .v-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-grooves { animation: none; }
  .v-shade, .v-bar, .v-disc, .v-flip, .viewer.anim .v-sleeve, .hint, .d-cover, .btn { transition: none !important; }
  .talker.swap .t-title, .talker.swap .t-tag, .talker.swap .t-kind { animation: none; }
}