/*
 * THE CRATE · what we play (module "crate", class prefix crate-)
 *
 * Left: a wooden record bin, seen from a little above, sleeves standing on
 * edge with their tops peeking out (the further back, the higher and smaller).
 * Right: the band's turntable plus a handwritten shelf-talker card.
 * Under both: a felt board of glowing pegs, the heavy rotation.
 * Phones: the bin turns into a sideways-scrolling row behind a wooden lip.
 */

.crate-layout {
  --crate-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .21' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .07 0 0 0 0 .03 0 0 0 1.7 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --crate-wood-hi: #93552d; /* lighter --wood */
  --crate-wood-mid: #7c4423;
  --crate-tape: rgba(230, 201, 147, 0.92); /* --paper-2, a bit see-through */

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4rem);
}
/* a warm lamp glow behind the crate so it reads as an object in the night */
.crate-layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  top: -6%;
  width: 70%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 122, 44, 0.16), rgba(168, 50, 90, 0.08) 55%, transparent);
}

@media (min-width: 860px) {
  .crate-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
    row-gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .crate-deck {
    margin-top: clamp(1.5rem, 5vw, 4.5rem);
  }
  .crate-board {
    grid-column: 1 / -1;
  }
}
@media (min-width: 700px) and (max-width: 859px) {
  .crate-dig {
    max-width: 560px;
  }
  .crate-deck {
    width: min(100%, 600px);
    margin-left: auto;
  }
}

.crate-dig,
.crate-deck,
.crate-board {
  min-width: 0;
}

/* =========================================================== the crate */
.crate-pit {
  position: relative;
  container-type: inline-size;
}
.crate-scene {
  --S: min(330px, 70cqw); /* sleeve size */
  --step: calc(var(--S) * var(--stepf, 0.15)); /* how much of each sleeve peeks out */
  --head: calc(var(--S) * 0.2); /* headroom for lifting */
  --v0: calc(var(--S) * 0.4); /* how much of the front sleeve shows */
  --front: calc(var(--S) - var(--v0));
  --W: calc(var(--S) * 1.16); /* crate width */
  --yank: calc(var(--S) * -0.3);
  position: relative;
  height: calc(var(--head) + (var(--n) - 1) * var(--step) + var(--S));
}

/* inside of the crate: back wall, side walls, darkness */
.crate-walls {
  position: absolute;
  left: calc(50% - var(--W) / 2);
  width: var(--W);
  top: calc(var(--head) + var(--step) * 0.9);
  height: calc((var(--n) - 1.9) * var(--step) + var(--v0) + 4px);
  z-index: 0;
}
.crate-walls svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.crate-walls__hole {
  fill: #150b10;
}
.crate-walls__back {
  fill: var(--wood-dark);
}
.crate-walls__side {
  fill: var(--wood);
}
.crate-walls__rim {
  fill: none;
  stroke: var(--crate-wood-hi);
  stroke-width: 5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.crate-bin {
  position: absolute;
  inset: 0;
}

/* ---------- one sleeve ---------- */
.crate-sleeve {
  --lift: 0px;
  position: absolute;
  top: calc(var(--head) + (var(--n) - 1 - var(--i)) * var(--step));
  left: calc(50% - var(--S) / 2 + var(--dx, 0px));
  width: var(--S);
  height: var(--S);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 0;
  transform: translateY(var(--lift)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform 0.5s var(--ease-bounce);
}
.crate-sleeve.is-current {
  --lift: calc(var(--step) * -0.16);
}
.crate-sleeve:focus-visible {
  --lift: calc(var(--step) * -0.55);
  /* two-tone ring (ink inside, mustard outside) so it shows on every sleeve:
     the mustard Paul Simon, the cream ones and the dark ones alike */
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ink);
}
@media (hover: hover) {
  .crate-sleeve:hover {
    --lift: calc(var(--step) * -0.55);
  }
}
.crate-sleeve:active {
  --lift: calc(var(--step) * -0.75);
}
.crate-sleeve__body {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 -10px 18px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* shine + a top-edge highlight, so it reads as card stock */
.crate-sleeve__body::after,
.crate-big::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.18), transparent 32% 68%, rgba(0, 0, 0, 0.14));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* the "on the deck" price sticker on whichever record is out */
.crate-sleeve__tag {
  position: absolute;
  z-index: 4;
  top: calc(var(--step) * 0.16);
  right: -2.3rem;
  padding: 0.3rem 0.55rem 0.28rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--orange);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(5deg) scale(0);
  transition: transform 0.45s var(--ease-bounce);
}
.crate-sleeve.is-current .crate-sleeve__tag {
  transform: rotate(5deg) scale(1);
}

@keyframes crate-yank {
  0% {
    transform: translateY(var(--lift)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
  36% {
    transform: translateY(var(--yank)) rotate(calc(var(--rot, 0deg) - 3deg)) scale(var(--sc, 1));
  }
  100% {
    transform: translateY(var(--lift)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
}
@keyframes crate-flick {
  0%,
  100% {
    transform: translateY(var(--lift)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
  45% {
    transform: translateY(calc(var(--step) * -0.8)) rotate(calc(var(--rot, 0deg) + 2.5deg)) scale(var(--sc, 1));
  }
}
.crate-sleeve.is-yanked {
  animation: crate-yank 0.72s var(--ease-out);
}
.crate-sleeve.is-flick {
  animation: crate-flick 0.34s var(--ease-out) var(--d, 0ms) both;
}

/* ---------- the front of the crate ---------- */
.crate-front {
  position: absolute;
  z-index: 40;
  left: calc(50% - var(--W) / 2);
  width: var(--W);
  bottom: 0;
  height: var(--front);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  border-radius: 4px 4px 9px 9px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 6% 94%, rgba(0, 0, 0, 0.32)),
    linear-gradient(
      180deg,
      transparent 0 calc(33.33% - 2px),
      #1a0c06 calc(33.33% - 2px) calc(33.33% + 2px),
      rgba(255, 214, 160, 0.22) calc(33.33% + 2px) calc(33.33% + 3px),
      transparent calc(33.33% + 3px) calc(66.66% - 2px),
      #1a0c06 calc(66.66% - 2px) calc(66.66% + 2px),
      rgba(255, 214, 160, 0.22) calc(66.66% + 2px) calc(66.66% + 3px),
      transparent calc(66.66% + 3px)
    ),
    var(--crate-grain) 0 0 / 320px 140px,
    linear-gradient(
      180deg,
      var(--crate-wood-hi),
      var(--crate-wood-mid) 33%,
      #8a4c28 33.4%,
      #74401f 66.6%,
      #82482a 67%,
      var(--wood)
    );
  box-shadow:
    inset 0 3px 0 rgba(255, 214, 160, 0.3),
    inset 0 -5px 0 rgba(0, 0, 0, 0.32),
    0 22px 34px -14px rgba(0, 0, 0, 0.85);
}
.crate-front__handle {
  width: 32%;
  height: 34%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 0, #2a1610, #0d0608 70%);
  box-shadow: inset 0 4px 7px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 214, 160, 0.28);
}
.crate-front__stencil {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(var(--S) * 0.05);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 230, 196, 0.82);
  /* stencil bridges: a hairline cut through every letter */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 0.12em, transparent 0.12em 0.165em, #000 0.165em 0.82em);
  mask-image: repeating-linear-gradient(90deg, #000 0 0.12em, transparent 0.12em 0.165em, #000 0.165em 0.82em);
  transform: rotate(-0.8deg);
}
.crate-front__stencil--b {
  font-size: calc(var(--S) * 0.042);
  color: rgba(244, 179, 60, 0.85);
  transform: rotate(0.6deg);
}
.crate-front__bolt {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--paper-2), #5a3a22 70%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.crate-front__bolt--1 { left: 2.2%; top: 14%; }
.crate-front__bolt--2 { right: 2.2%; top: 14%; }
.crate-front__bolt--3 { left: 2.2%; bottom: 14%; }
.crate-front__bolt--4 { right: 2.2%; bottom: 14%; }

.crate-tape {
  position: absolute;
  z-index: 41;
  right: calc(50% - var(--W) / 2 - 4px);
  bottom: calc(var(--front) - 0.9em);
  padding: 0.35em 1em 0.3em;
  font-family: var(--font-hand);
  font-size: clamp(0.78rem, calc(var(--S) * 0.046), 1rem);
  line-height: 1;
  color: var(--ink);
  background: var(--crate-tape);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: rotate(5deg);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 3%, 97% 30%, 100% 55%, 96% 80%, 100% 100%, 8% 96%, 3% 100%, 0 70%, 3% 45%);
}

/* ---------- tools under the crate ---------- */
.crate-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.6rem;
}
.crate-digbtn {
  flex-shrink: 0;
}
.crate-digbtn__icon {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.3rem;
  transition: transform 0.6s var(--ease-bounce);
}
.crate-digbtn__icon svg {
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .crate-digbtn:hover .crate-digbtn__icon {
    transform: rotate(200deg);
  }
}
.crate-digbtn[aria-disabled="true"] .crate-digbtn__icon {
  animation: crate-spin 0.6s linear infinite;
}
.crate-hint {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 14rem;
}
.crate-hint__script {
  font-family: var(--font-script);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
}
.crate-hint__keys {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
/* Which hint: touch screens get "tap" (or "swipe" on the phone row), and only
   a mouse/trackpad + keyboard setup gets the arrow-key instructions. */
.crate-hint__wide,
.crate-hint__narrow {
  display: none;
}
@media (max-width: 699px) {
  .crate-hint__tap {
    display: none;
  }
  .crate-hint__narrow {
    display: inline;
  }
}
@media (hover: hover) and (pointer: fine) {
  .crate-hint__wide {
    display: inline;
  }
  .crate-hint__narrow,
  .crate-hint__tap {
    display: none;
  }
}

/* ================================================= sleeve art (shared) */
.crate-art {
  --t: var(--ink);
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  color: var(--t);
  background: var(--paper);
}
.crate-art__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.crate-art__title {
  position: absolute;
  z-index: 1;
  left: 6.5%;
  right: 6.5%;
  top: 3.4%;
  overflow: hidden;
  font-family: var(--font-display);
  font-variation-settings: var(--soft);
  font-weight: 900;
  font-size: 9.6cqw;
  line-height: 1.12;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--t);
}
.crate-art__cat,
.crate-art__stereo {
  position: absolute;
  z-index: 1;
  bottom: 4.5%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 3.3cqw;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t);
}
.crate-art__cat {
  right: 6.5%;
  opacity: 0.85;
}
.crate-art__stereo {
  left: 6.5%;
  padding: 0.35em 0.7em 0.3em;
  border: 0.45cqw solid currentColor;
  border-radius: 999px;
}

/* white-label test pressing */
.crate-art--white .crate-art__title {
  top: 5.5%;
  right: 4%;
  font-family: var(--font-hand);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 9.4cqw;
  line-height: 1.15;
  letter-spacing: 0.01em;
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
.crate-art--white .crate-art__stamp {
  position: absolute;
  z-index: 1;
  top: 22%;
  right: 7%;
  font-size: 5cqw;
  border-width: 0.8cqw;
  --tilt: -7deg;
}
.crate-art__sheet {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  bottom: 6.5%;
  display: grid;
  gap: 1.6cqw;
}
.crate-art__line {
  display: flex;
  align-items: baseline;
  gap: 3cqw;
  padding-bottom: 0.6cqw;
  border-bottom: 0.35cqw solid rgba(30, 20, 36, 0.35);
}
.crate-art__line b {
  font-family: var(--font-mono);
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crate-art__line i {
  font-family: var(--font-script);
  font-size: 6.2cqw;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--rust);
}
.crate-art__checks {
  align-items: center;
  border-bottom: 0;
  gap: 1.6cqw;
}
.crate-art__checks b + .crate-art__box {
  margin-left: 3cqw;
}
.crate-art__box {
  position: relative;
  width: 3.6cqw;
  height: 3.6cqw;
  border: 0.45cqw solid var(--ink-soft);
}
.crate-art__box.is-x::before,
.crate-art__box.is-x::after {
  content: "";
  position: absolute;
  left: -25%;
  top: 45%;
  width: 150%;
  height: 0.7cqw;
  border-radius: 1cqw;
  background: var(--rust);
  transform: rotate(40deg);
}
.crate-art__box.is-x::after {
  transform: rotate(-48deg);
}

/* a lot of one band */
.crate-art--wordmark {
  --t: var(--cream);
}
.crate-art--wordmark .crate-art__title {
  text-shadow: 0.06em 0.06em 0 var(--ink);
}
.crate-art__repeat {
  position: absolute;
  top: 27%;
  left: -4%;
  right: -4%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-display);
  font-variation-settings: var(--soft);
  font-weight: 900;
  font-size: 11.6cqw;
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
}
.crate-art__repeat span:nth-child(4n + 1) {
  color: var(--ink);
}
.crate-art__repeat span:nth-child(4n + 2) {
  color: var(--mustard);
  transform: translateX(-9%);
}
.crate-art__repeat span:nth-child(4n + 3) {
  color: var(--cream);
  transform: translateX(-3%);
}
.crate-art__repeat span:nth-child(4n) {
  color: var(--orange);
  transform: translateX(-13%);
}
.crate-art--spiral {
  --t: var(--cream);
}
.crate-art--spiral .crate-art__title {
  font-style: italic;
}
.crate-art--sunburst {
  --t: var(--ink);
}
.crate-art--bars {
  --t: var(--cream);
}
.crate-art--moon {
  --t: var(--moon);
}
.crate-art--moon .crate-art__title {
  font-style: italic;
  font-weight: 800;
}
.crate-art--memphis .crate-art__title {
  right: auto;
  max-width: 86%;
  top: 4.5%;
  padding: 1.7cqw 2.8cqw 1.5cqw;
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: 6.4cqw;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  box-shadow: 1.2cqw 1.2cqw 0 var(--teal);
  transform: rotate(-2deg);
}
.crate-art--checker {
  --t: var(--cream);
}

/* ================================================== the turntable deck */
.crate-deck {
  position: relative;
  container: crate-deck / inline-size;
}
.crate-stage {
  position: relative;
  container-type: inline-size;
}
.crate-plinth {
  position: relative;
  aspect-ratio: 100 / 68;
  padding: 2.6cqw;
  border-radius: 2.6cqw;
  background:
    var(--crate-grain) 0 0 / 320px 140px,
    linear-gradient(180deg, var(--crate-wood-hi), var(--wood) 70%, #5c311a);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 160, 0.32),
    inset 0 -4px 0 rgba(0, 0, 0, 0.35),
    0 1.6cqw 0 var(--wood-dark),
    var(--shadow-soft);
}
.crate-plate {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.6cqw;
  background:
    repeating-linear-gradient(90deg, rgba(246, 230, 196, 0.016) 0 1px, transparent 1px 3px),
    radial-gradient(120% 95% at 28% 12%, #30253c, var(--ink) 58%, #110b16);
  box-shadow: inset 0 0 0 1px rgba(246, 230, 196, 0.12), inset 0 1.6cqw 3cqw rgba(0, 0, 0, 0.55);
}
.crate-platter {
  position: absolute;
  left: 29.5cqw;
  top: 4.5cqw;
  width: 51cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #1b1522 0 88%, #3b3044 89% 100%);
  box-shadow: 0 0 0 0.45cqw #120d17, 0 1.2cqw 2.4cqw rgba(0, 0, 0, 0.6);
}
/* strobe dots around the platter edge */
.crate-platter__dots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(246, 230, 196, 0.6) 0 1.6deg, transparent 1.6deg 6deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 92.5%, #000 93% 97.5%, transparent 98%);
  mask-image: radial-gradient(circle closest-side, transparent 0 92.5%, #000 93% 97.5%, transparent 98%);
  animation: crate-spin 1.8s linear infinite paused;
}

.crate-vinyl {
  position: absolute;
  z-index: 1;
  left: 5cqw;
  top: 6cqw;
  width: 48cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 0.8cqw 1.1cqw rgba(0, 0, 0, 0.6));
  transition: transform 0.5s var(--ease-out) 0.12s;
}
.crate-deck.is-out .crate-vinyl {
  transform: translateX(26cqw);
  transition: transform 0.75s var(--ease-out) 0s;
}
.crate-vinyl__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle closest-side,
      transparent 0 33%,
      #08060b 33.5% 36%,
      transparent 36.5% 55.4%,
      rgba(0, 0, 0, 0.75) 55.4% 56.4%,
      transparent 56.4% 70.2%,
      rgba(0, 0, 0, 0.75) 70.2% 71.2%,
      transparent 71.2% 84.4%,
      rgba(0, 0, 0, 0.75) 84.4% 85.4%,
      transparent 85.4% 96.4%,
      #2a2230 96.6% 100%
    ),
    repeating-radial-gradient(circle at 50% 50%, rgba(246, 230, 196, 0.06) 0 0.5px, transparent 0.5px 2px),
    #151019;
  animation: crate-spin 1.8s linear infinite paused;
}
/* spins only while on screen, the tab is visible and no dialog is open */
html:not(.has-dialog) .crate-deck.is-out.is-visible:not(.is-hidden) .crate-vinyl__disc,
html:not(.has-dialog) .crate-deck.is-out.is-visible:not(.is-hidden) .crate-platter__dots {
  animation-play-state: running;
}
.crate-vinyl__label {
  position: absolute;
  inset: 31.5%;
  overflow: hidden;
  border-radius: 50%;
}
.crate-vinyl__label svg {
  display: block;
  width: 100%;
  height: 100%;
}
.crate-label__ring {
  font-family: var(--font-mono);
  font-size: 6.3px;
  font-weight: 700;
  letter-spacing: 0.75px;
}
.crate-label__name {
  font-family: var(--font-display);
  font-variation-settings: var(--soft);
  font-weight: 900;
  text-anchor: middle;
}
.crate-label__small {
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-anchor: middle;
  opacity: 0.8;
}
.crate-label__hand {
  font-family: var(--font-hand);
  font-size: 24px;
  text-anchor: middle;
}
.crate-label__script {
  font-family: var(--font-script);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.crate-vinyl__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 25deg,
    transparent 0deg,
    rgba(255, 240, 194, 0.16) 22deg,
    transparent 52deg 185deg,
    rgba(255, 240, 194, 0.11) 207deg,
    transparent 236deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 34%, #000 35% 96%, transparent 96.5%);
  mask-image: radial-gradient(circle closest-side, transparent 0 34%, #000 35% 96%, transparent 96.5%);
}

.crate-big {
  position: absolute;
  z-index: 2;
  left: 4cqw;
  top: 5cqw;
  width: 50cqw;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.5cqw;
  transform: rotate(-1.5deg);
  box-shadow: 1.2cqw 1.4cqw 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3);
  transition: transform 0.62s var(--ease-bounce);
}
.crate-deck.is-leaving .crate-big {
  transform: translateY(70cqw) rotate(-6deg);
  transition: transform 0.26s cubic-bezier(0.5, 0, 0.75, 0);
}
.crate-deck.is-leaving .crate-vinyl {
  transform: translateY(70cqw);
  transition: transform 0.26s cubic-bezier(0.5, 0, 0.75, 0);
}
.crate-deck.is-entering .crate-big {
  transform: translateY(70cqw) rotate(4deg);
  transition: none;
}
.crate-deck.is-entering .crate-vinyl {
  transform: translateY(70cqw);
  transition: none;
}

.crate-arm {
  position: absolute;
  z-index: 3;
  left: 78cqw;
  top: 0;
  width: 14cqw;
  height: 50cqw;
  transform-origin: 7cqw 9cqw;
  filter: drop-shadow(0.7cqw 1cqw 0.5cqw rgba(0, 0, 0, 0.6));
  transition: transform 0.55s var(--ease-out);
}
.crate-deck.is-out .crate-arm {
  transform: rotate(24deg);
  transition: transform 0.9s var(--ease-bounce) 0.55s;
}
.crate-arm svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.crate-arm__base {
  fill: #2c2234;
  stroke: rgba(246, 230, 196, 0.22);
  stroke-width: 0.5;
}
.crate-arm__weight {
  fill: var(--paper-2);
}
.crate-arm__tube {
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.crate-arm__head {
  fill: var(--mustard);
  stroke: var(--ink);
  stroke-width: 0.4;
}
.crate-arm__lift {
  fill: none;
  stroke: var(--cream);
  stroke-width: 0.7;
  stroke-linecap: round;
}
.crate-arm__pivot {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 0.6;
}

.crate-plate__speed {
  position: absolute;
  right: 3cqw;
  bottom: 2.6cqw;
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  font-family: var(--font-mono);
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(246, 230, 196, 0.6);
}
.crate-plate__light {
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: #4a2a1a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.crate-deck.is-out .crate-plate__light {
  background: var(--orange);
  box-shadow: 0 0 1.4cqw var(--orange), 0 0 0.4cqw var(--mustard);
  transition-delay: 0.6s;
}
.crate-plate__brand {
  position: absolute;
  left: 4.5cqw;
  bottom: 2.4cqw;
  font-family: var(--font-display);
  font-variation-settings: var(--soft);
  font-style: italic;
  font-weight: 800;
  font-size: 2.6cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(246, 230, 196, 0.42);
}

@keyframes crate-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- the shelf-talker card ---------- */
.crate-card {
  position: relative;
  z-index: 5;
  margin: -1.3rem 0 0 clamp(0.6rem, 8%, 4rem);
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.2rem, 3.2vw, 2.1rem) clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(236, 122, 44, 0.14), transparent 45%),
    var(--paper);
  border-radius: 5px;
  box-shadow: 7px 7px 0 rgba(10, 8, 32, 0.55), 0 26px 40px -18px rgba(0, 0, 0, 0.75);
  transform: rotate(-1.1deg);
  --focus: var(--ink); /* rings inside the paper card */
}
.crate-card:focus-visible {
  --focus: var(--mustard); /* the card's own ring sits out on the night sky */
  outline-offset: 5px;
}
.crate-card__pin {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 6.5rem;
  height: 1.6rem;
  background: var(--crate-tape);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(0 10%, 5% 0, 10% 12%, 16% 0, 100% 4%, 96% 35%, 100% 60%, 95% 100%, 6% 92%, 0 100%, 3% 55%);
}
.crate-card__head {
  position: relative;
  padding-bottom: 0.85rem;
  margin-bottom: 1.15rem;
  border-bottom: 3px solid var(--ink);
}
.crate-card__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: var(--rust);
}
.crate-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-ink);
}
.crate-card__eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 12%, var(--accent, var(--orange)) 13% 36%, var(--ink) 37%);
}
.crate-card__title {
  margin-top: 0.45rem;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-shadow: 0.045em 0.045em 0 var(--mustard), 0.09em 0.09em 0 var(--orange);
  overflow-wrap: anywhere;
  padding-bottom: 0.1em;
}
.crate-card.is-original .crate-card__title {
  font-family: var(--font-hand);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: 0;
  transform: rotate(-1.5deg);
  transform-origin: 0 50%;
}
.crate-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem 1.6rem;
  align-items: start;
}
.crate-card__words {
  display: grid;
  gap: 1rem;
  justify-items: start;
  min-width: 0;
}
.crate-card__note {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
}
.crate-card__filed span {
  white-space: nowrap;
}
.crate-card__filed {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crate-card__blame {
  color: var(--rust-ink); /* the stamp's --rust is too light for text on paper */
  max-width: 100%;
  margin: 0.15rem 0 0 0.3rem;
  font-size: 0.92rem;
  line-height: 1.25;
  white-space: normal;
}
.crate-card__cta {
  min-height: 2.75rem;
}
.crate-card__cta-icon {
  width: 0;
  height: 0;
  border-top: 0.38em solid transparent;
  border-bottom: 0.38em solid transparent;
  border-left: 0.62em solid var(--mustard);
}
@keyframes crate-slap {
  0% {
    transform: rotate(-3.2deg) translateY(-10px) scale(0.98);
  }
  55% {
    transform: rotate(0deg) translateY(2px) scale(1.005);
  }
  100% {
    transform: rotate(-1.1deg);
  }
}
.crate-card.is-swap {
  animation: crate-slap 0.55s var(--ease-out);
}

/* the How Often knob */
.crate-meter {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 8.6rem;
  max-width: 11.5rem;
}
.crate-dial {
  display: block;
  width: 8.6rem;
  height: 8.6rem;
}
.crate-dial svg {
  display: block;
  width: 100%;
  height: 100%;
}
.crate-dial__track,
.crate-dial__value {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.crate-dial__track {
  stroke: rgba(30, 20, 36, 0.14);
}
.crate-dial__value {
  stroke: var(--orange);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
.crate-dial__ticks path {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.crate-dial__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink-soft);
  text-anchor: middle;
}
.crate-dial__skirt {
  fill: var(--ink);
}
.crate-dial__knurl path {
  stroke: #4a3a4e;
  stroke-width: 2;
}
.crate-dial__cap {
  fill: #2c2234;
  stroke: rgba(246, 230, 196, 0.18);
  stroke-width: 1.5;
}
.crate-dial__pointer {
  transform-box: view-box;
  transform-origin: 70px 70px;
  transform: rotate(-135deg);
  transition: transform 0.9s var(--ease-bounce);
}
.crate-dial__pointer path {
  stroke: var(--mustard);
  stroke-width: 5;
  stroke-linecap: round;
}
.crate-meter__text {
  display: grid;
  justify-items: center;
  text-align: center;
  line-height: 1.1;
}
.crate-meter__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crate-meter__value {
  margin-top: 0.2rem;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.05;
  color: var(--rust-ink);
}

/* ============================================= heavy rotation felt board */
.crate-board {
  position: relative;
  padding: clamp(1.2rem, 3.4vw, 2.25rem);
  border: clamp(8px, 1.1vw, 12px) solid var(--wood);
  border-radius: var(--r-md);
  color: var(--cream);
  background:
    repeating-linear-gradient(90deg, rgba(246, 230, 196, 0.03) 0 1px, transparent 1px 5px),
    radial-gradient(130% 140% at 0 0, #2b2034, #130e18 70%);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 12px 30px rgba(0, 0, 0, 0.6),
    0 0 0 2px var(--wood-dark),
    var(--shadow-soft);
}
.crate-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(246, 230, 196, 0.2);
}
.crate-board__title {
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 0 12px rgba(244, 179, 60, 0.35);
}
.crate-board__sub {
  font-family: var(--font-script);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--fg-dim);
}
.crate-board__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
/* Two columns only once every name fits on one line next to its pegs
   (in em, so it moves with the visitor's font size: 74em = 1184px). */
@media (min-width: 74em) {
  .crate-board__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 4), auto);
    grid-auto-flow: column;
  }
}
.crate-row {
  position: relative;
  display: grid;
  /* fixed label track, so every row's pegs line up */
  grid-template-columns: minmax(0, 1fr) auto 6.25rem;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.6rem 0.5rem 0.6rem 1.15rem;
  border-bottom: 1px dashed rgba(246, 230, 196, 0.1);
  border-radius: 4px;
  transition: background-color 0.3s;
}
.crate-row::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 50%;
  border-top: 0.36rem solid transparent;
  border-bottom: 0.36rem solid transparent;
  border-left: 0.55rem solid var(--mustard);
  transform: translateY(-50%) scaleX(0);
  transition: transform 0.35s var(--ease-bounce);
}
.crate-row.is-current {
  background: rgba(246, 230, 196, 0.07);
}
.crate-row.is-current::before {
  transform: translateY(-50%) scaleX(1);
}
.crate-row__name {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.crate-row.is-current .crate-row__name {
  color: var(--mustard);
}
.crate-row__label {
  font-family: var(--font-script);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-dim);
  text-align: right;
}
.crate-row.is-current .crate-row__label {
  color: var(--cream);
}
.crate-pegs {
  display: inline-flex;
  gap: 0.26rem;
}
.crate-pegs i {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #050307, #251c2b);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(246, 230, 196, 0.07);
}
.crate-pegs i.is-lit {
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 9%, transparent 36%), var(--c);
  box-shadow: 0 0 5px var(--c), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  opacity: 0.78;
}
.crate-row.is-current .crate-pegs i.is-lit {
  opacity: 1;
  box-shadow: 0 0 6px var(--c), 0 0 16px -2px var(--c), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
  animation: crate-peg 0.5s var(--ease-out) calc(var(--k) * 45ms) both;
}
@keyframes crate-peg {
  0% {
    transform: scale(0.4);
    filter: brightness(2.2);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

/* ---------- empty crate ---------- */
.crate-empty {
  display: grid;
  gap: 0.4rem;
  max-width: 34rem;
  padding: 2rem;
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
}
.crate-empty__title {
  font-family: var(--font-hand);
  font-size: var(--fs-xl);
}

/* ============================================ phones: a row behind a lip */
@media (max-width: 699px) {
  .crate-scene {
    --R: min(54cqw, 200px);
    --S: var(--R);
    --step: 18px;
    --yank: -22px;
    --lip: calc(var(--R) * 0.22 + 18px);
    height: auto;
  }
  .crate-walls {
    display: none;
  }
  .crate-bin {
    position: relative;
    inset: auto;
    display: flex;
    gap: 12px;
    padding: 26px 22px 22px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(180deg, transparent 0 25%, rgba(0, 0, 0, 0.35)),
      radial-gradient(120% 90% at 50% 100%, #2a1610, #150b10 70%);
    box-shadow: inset 0 3px 0 var(--wood), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  }
  .crate-sleeve {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: var(--R);
    height: var(--R);
    scroll-snap-align: center;
    transform: translateY(var(--lift)) rotate(var(--rot, 0deg));
  }
  .crate-sleeve.is-current {
    --lift: -6px;
  }
  .crate-sleeve:focus-visible {
    --lift: -12px;
  }
  .crate-sleeve:active {
    --lift: -14px;
  }
  @keyframes crate-yank {
    0%,
    100% {
      transform: translateY(var(--lift)) rotate(var(--rot, 0deg));
    }
    36% {
      transform: translateY(-24px) rotate(calc(var(--rot, 0deg) - 3deg));
    }
  }
  @keyframes crate-flick {
    0%,
    100% {
      transform: translateY(var(--lift)) rotate(var(--rot, 0deg));
    }
    45% {
      transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 2.5deg));
    }
  }
  .crate-sleeve__tag {
    top: -0.9rem; /* straddles the top edge, clear of the sleeve's title */
    right: 0.6rem;
    font-size: 0.7rem;
  }
  /* the wooden lip the records slide behind (doesn't scroll) */
  .crate-front {
    left: 0;
    width: 100%;
    bottom: 0;
    height: var(--lip);
    grid-template-rows: 1fr 1fr;
    pointer-events: none;
    border-radius: 4px 4px 10px 10px;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 6% 94%, rgba(0, 0, 0, 0.32)),
      linear-gradient(
        180deg,
        transparent 0 calc(50% - 2px),
        #1a0c06 calc(50% - 2px) calc(50% + 2px),
        rgba(255, 214, 160, 0.22) calc(50% + 2px) calc(50% + 3px),
        transparent calc(50% + 3px)
      ),
      var(--crate-grain) 0 0 / 320px 140px,
      linear-gradient(180deg, var(--crate-wood-hi), var(--crate-wood-mid) 50%, #82482a 50.5%, var(--wood));
  }
  .crate-front__handle {
    display: none;
  }
  .crate-front__stencil {
    font-size: clamp(0.62rem, 3.2cqw, 0.85rem);
  }
  .crate-front__stencil--b {
    font-size: clamp(0.56rem, 2.8cqw, 0.75rem);
  }
  .crate-tape {
    right: 14px;
    bottom: calc(var(--lip) - 0.7em);
    font-size: 0.78rem;
  }
  /* wooden end posts over the scroller edges */
  .crate-scene::before,
  .crate-scene::after {
    content: "";
    position: absolute;
    z-index: 39;
    top: 0;
    bottom: 0;
    width: 9px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--crate-wood-hi), var(--wood));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }
  .crate-scene::before {
    left: 0;
    border-radius: 6px 0 0 6px;
  }
  .crate-scene::after {
    right: 0;
    border-radius: 0 6px 6px 0;
  }
  .crate-tools {
    margin-top: 1.2rem;
  }
  .crate-card {
    margin: -0.7rem 0 0 0.5rem;
  }
}

/* a narrow deck stacks the knob above the words */
@container crate-deck (max-width: 500px) {
  .crate-card__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .crate-meter {
    width: auto;
    min-width: 0;
    max-width: none;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 0.9rem;
  }
  .crate-dial {
    width: 6.4rem;
    height: 6.4rem;
  }
  .crate-meter__text {
    justify-items: start;
    text-align: left;
  }
}

/* ===== short screens (landscape phones): crate and deck side by side,
   the crate sized to the height so the whole bin fits on one screen ===== */
@media (min-width: 700px) and (max-height: 540px) {
  .crate-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    row-gap: 2.25rem;
    align-items: start;
  }
  .crate-board {
    grid-column: 1 / -1;
  }
  .crate-dig {
    max-width: none;
  }
  .crate-deck {
    width: auto;
    margin: 0;
  }
  .crate-scene {
    /* scene height is about 2.2 sleeves (headroom + the peeks + the front sleeve) */
    --S: min(330px, 76cqw, calc((100vh - 4.25rem) / 2.2));
    --head: calc(var(--S) * 0.12);
  }
  @supports (height: 100svh) {
    .crate-scene {
      --S: min(330px, 76cqw, calc((100svh - 4.25rem) / 2.2));
    }
  }
  /* a smaller sticker hanging off the edge, clear of the small sleeve's title */
  .crate-sleeve__tag {
    top: -0.35rem;
    right: -2.9rem;
    padding: 0.24rem 0.42rem 0.22rem;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }
  .crate-tools {
    margin-top: 1rem;
    gap: 0.6rem 1rem;
  }
  .crate-hint__script {
    font-size: 1.25rem;
  }
  .crate-card {
    margin: -1rem 0 0 clamp(0.6rem, 5%, 2rem);
    padding: 1.1rem 1.25rem 1.25rem;
  }
  .crate-card__head {
    padding-bottom: 0.6rem;
    margin-bottom: 0.95rem;
  }
  .crate-card__title {
    font-size: 2.1rem;
  }
  .crate-card__words {
    gap: 0.75rem;
  }
  .crate-card__note {
    font-size: 1rem;
    line-height: 1.45;
  }
  .crate-dial {
    width: 5.4rem;
    height: 5.4rem;
  }
  .crate-board {
    padding-block: 1rem 0.9rem;
  }
  .crate-board__head {
    padding-bottom: 0.7rem;
  }
  .crate-row {
    padding-block: 0.45rem;
  }
}

/* small landscape phones (still the sideways row): keep the turntable under a screen tall */
@media (max-width: 699px) and (max-height: 540px) and (orientation: landscape) {
  .crate-deck {
    width: min(100%, 30rem);
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .crate-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name label"
      "pegs pegs";
    padding-left: 1rem;
  }
  .crate-row__name {
    grid-area: name;
  }
  .crate-row__label {
    grid-area: label;
  }
  .crate-pegs {
    grid-area: pegs;
  }
}

/* ---------- reduced motion: nothing spins, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .crate-vinyl__disc,
  .crate-platter__dots,
  .crate-digbtn[aria-disabled="true"] .crate-digbtn__icon,
  .crate-sleeve.is-yanked,
  .crate-sleeve.is-flick,
  .crate-card.is-swap,
  .crate-row.is-current .crate-pegs i.is-lit {
    animation: none;
  }
}