/* Our jukebox — Figma "Frame 15649" (node 1356:266), 1999×526, orange. Absolute
   layout at EXACT Figma coords scaled by --px inside a 1999-wide centred frame. */
.juke {
  position: relative;
  height: calc(555.7 * var(--px));   /* 526 + 29.7 (section-spacing standard) */
  background: #c1620f;
  overflow: hidden;
  color: #fff;
}
.juke__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(29.7 * var(--px)); transform: translateX(-50%);
  width: calc(1999 * var(--px)); height: 100%;
}
.juke__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}

/* ---- header ---- */
.juke__title { transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: calc(32 * var(--px)); line-height: 1.1; text-align: center; white-space: nowrap; }
.juke__rule  { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.6); }

/* ---- request block ---- */
.juke__req { transform: translateX(-50%); width: calc(var(--w) * var(--px)); text-align: center; font-family: var(--font-display); }
.juke__req-a { font-weight: 700; font-size: calc(44.021 * var(--px)); line-height: 1.35; }
.juke__req-b { font-weight: 400; font-style: italic; font-size: calc(39.032 * var(--px)); line-height: 1.35; }

/* ---- description ---- */
.juke__desc { transform: translateX(-50%); width: calc(var(--w) * var(--px)); text-align: center; font-family: var(--font-sans); font-weight: 400; font-size: calc(19.377 * var(--px)); line-height: 1.35; }
.juke__desc strong { font-weight: 700; }

/* ---- jukebox illustration ---- */
/* Matches Figma (node 1356:271): the image is stretched to fill the 147.493×260
   slot (aspect 59/104) — object-fit: fill, same as Figma. Width is unchanged;
   the height stretches so the top of the jukebox reaches the Figma position. */
.juke__box { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); object-fit: fill; }

/* ---- vinyl records: each a crop of the one spritesheet ---- */
.juke-rec { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); overflow: hidden; }
.juke-rec img {
  position: absolute;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
  max-width: none; display: block;
}

/* ---- section order: the mobile copy follows the "What's new?" strip, the desktop
   copy keeps its slot after Sing-across-eleven-decades. Only one shows. ---- */
.juke-m { display: none; }
@media (max-width: 600px) {
  .juke--desktop-only { display: none; }

  /* ---- MOBILE Our jukebox (Figma "Frame 15648" 1356:218, 421×453) ---- */
  .juke-m {
    display: block; position: relative;
    height: calc(453 * var(--mpx));
    background: #c1620f;
    overflow: hidden; color: #fff;
  }
  .juke-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .juke-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }
  /* the text blocks are centred on --x, so only the x axis is translated */
  .jm__title {
    transform: translateX(-50%); width: calc(var(--w) * var(--mpx));
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(32 * var(--mpx)); line-height: 1.1; text-align: center;
  }
  .jm__rule { width: calc(var(--w) * var(--mpx)); height: 1px; background: rgba(255,255,255,.6); }
  .jm__req  { transform: translateX(-50%); width: calc(var(--w) * var(--mpx)); text-align: center; font-family: var(--font-display); }
  .jm__req-a { font-weight: 700; font-size: calc(35.296 * var(--mpx)); line-height: 1.35; }
  .jm__req-b { font-weight: 400; font-style: italic; font-size: calc(31.296 * var(--mpx)); line-height: 1.35; }
  .jm__desc {
    transform: translateX(-50%); width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-sans); font-weight: 400;
    font-size: calc(13.981 * var(--mpx)); line-height: 1.35;
  }
  .jm__box {
    width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx));
    object-fit: contain; object-position: bottom;
  }
  /* records reuse .juke-rec (and its inner %-cropped img), just resized to --mpx */
  .juke-m .juke-rec {
    width:  calc(var(--w) * var(--mpx));
    height: calc(var(--h) * var(--mpx));
  }
}