/* ==========================================================================
   Songs: a wall of forty-two sleeves on a violet field, each record peeking out
   of its open edge, and the turntable they go on. Every rule is scoped to
   #songs (Songs gallery agent).
   ========================================================================== */

#songs {
  /* Materials */
  --vinyl: #16121f;
  --plinth-hi: #ff86c0;                     /* orchid lacquer, like the piano above */
  --plinth-lo: #e24f9b;
  --mat-hi: #fffaf2;                        /* paper felt */
  --mat-lo: #efe4d4;
  --deck-ink: #2a2342;
  --cart: var(--marigold);
  --shade: 18, 6, 72;                       /* violet-ink, for every shadow */
  /* Wall geometry: how far each record sits out of its sleeve */
  --peek: 15%;                              /* at rest, % of the disc */
  --pull: 46%;                              /* on hover or focus */
  --tilt: 26deg;
  --out: x;                                 /* read by gallery.js: x slides right, y slides up */

  position: relative;
  overflow-x: clip;                         /* records may travel into the page gutter */
  /* The page stacks its galleries as sheets: the next one slides up over
     this one's bottom by --sheet-r, so the bottom padding carries that too. */
  --pad: clamp(40px, 5.2svh, 72px);
  padding-block: var(--pad) calc(var(--pad) + var(--sheet-r, 0px));
  --focus: #ffffff;
  /* Off screen the section isn't laid out or painted at all, so images
     arriving early (lazy-load margins) cost nothing while other galleries
     scroll. The placeholder height is close to the real one, and "auto"
     remembers the real one after the first render. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1150px;      /* the content box; padding is added */
}
@media (min-width: 700px) and (max-width: 1099px) { #songs { contain-intrinsic-size: auto 1750px; } }
@media (max-width: 699px) { #songs { contain-intrinsic-size: auto 1000px; } }

#songs .songs__inner {
  width: min(100% - 2 * var(--gutter), 1720px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* ---------- The side: heading, the turntable, what's on it ---------- */
#songs .songs__side { position: relative; z-index: 2; min-width: 0; }
#songs .songs__title {
  font: 700 clamp(36px, 3.1vw, 56px)/.98 var(--font-display);
  letter-spacing: -.032em;
  max-width: 12ch;
  text-wrap: balance;
}
#songs .songs__lede {
  margin-top: 16px;
  max-width: 34ch;
  font: 400 clamp(17px, 1.15vw, 19px)/1.5 var(--font-body);
}

#songs .deck {
  position: relative;
  margin-top: clamp(26px, 2.6vw, 40px);
  width: 100%;
  aspect-ratio: 460 / 380;
  border-radius: 5.22% / 6.32%;
  box-shadow:
    0 1px 2px rgba(var(--shade), .2),
    0 18px 30px -16px rgba(var(--shade), .5),
    0 44px 70px -34px rgba(var(--shade), .55);
}
#songs .deck__body,
#songs .deck__arm { position: absolute; inset: 0; width: 100%; height: 100%; }
#songs .s-plinth-hi { stop-color: var(--plinth-hi); }
#songs .s-plinth-lo { stop-color: var(--plinth-lo); }
#songs .s-mat-hi { stop-color: var(--mat-hi); }
#songs .s-mat-lo { stop-color: var(--mat-lo); }
#songs .deck__ink { fill: var(--deck-ink); }
#songs .deck__cart { fill: var(--cart); }
#songs .deck__dot { fill: var(--marigold); }
#songs .deck__ticks { fill: var(--deck-ink); fill-opacity: .45; }
/* The strobe rim is its own element so the platter turns on the compositor */
#songs .deck__strobe {
  position: absolute; left: 4.565%; top: 7.105%; width: 70.87%; height: auto; aspect-ratio: 1;
  stroke: #3a3157; pointer-events: none;
}
/* While the platter turns, the record and the rim are each a layer of their
   own: rasterised once, then only rotated */
#songs .deck.is-spinning .deck__disc,
#songs .deck.is-spinning .deck__strobe { will-change: transform; }

/* The record on the platter: a 7-inch single, label = the album art */
#songs .deck__rec {
  position: absolute; z-index: 1;
  left: 11.739%; top: 15.789%;
  width: 56.522%; aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(var(--shade), .45), 0 14px 26px -12px rgba(var(--shade), .6);
}
#songs .deck__disc { position: absolute; inset: 0; border-radius: 50%; }
#songs .deck__sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 215deg,
    rgba(255, 255, 255, 0) 0deg 18deg, rgba(255, 255, 255, .17) 40deg, rgba(255, 255, 255, 0) 66deg 196deg,
    rgba(255, 255, 255, .12) 220deg, rgba(255, 255, 255, 0) 246deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 46.6%, #000 47.4% 98.6%, transparent 99.4%);
  mask: radial-gradient(circle closest-side, transparent 0 46.6%, #000 47.4% 98.6%, transparent 99.4%);
}
#songs .deck__pin {
  position: absolute; left: 50%; top: 50%; width: 2.2%; aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 34%, #d6d0e3 0 12%, #8a82a3 52%, #474060 100%);
  box-shadow: 0 0 0 1px rgba(22, 18, 31, .5), 0 1px 1px rgba(var(--shade), .5);
}

/* The tonearm rests on its post until a record plays. The whole arm layer
   turns about the pivot (396, 76 in deck units), on the compositor. */
#songs .deck__arm {
  z-index: 2; pointer-events: none;       /* its shadow is drawn in the SVG: no filter */
  transform-origin: 86.087% 20%;
  transform: rotate(0deg);
  transition: transform var(--arm-ms, 720ms) var(--ease-in-out);
}
#songs .deck[data-playing="true"] .deck__arm { transform: rotate(32deg); }

/* Start/stop: the key on the plinth (the SVG draws it; this is its hit area) */
#songs .deck__power {
  position: absolute; z-index: 3;
  left: 4.783%; top: 83.684%; width: 16.957%; height: 10.526%;
  min-height: 44px;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent;
}
#songs .deck__power::before { content: ""; position: absolute; inset: -6px -8px; }
#songs .deck__key {
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform var(--dur-micro) var(--ease-out);
}
#songs .deck[data-playing="true"] .deck__key { transform: translateY(1px) scale(.985); }
#songs .deck:has(.deck__power:active) .deck__key { transform: translateY(1.8px) scale(.97); }
#songs .deck__power:focus-visible { outline: 2.5px solid var(--ink-fixed); outline-offset: 3px; }

/* Title and artist of the record on the platter */
#songs .deck__now { margin-top: clamp(20px, 2vw, 28px); }
#songs .deck__t {
  font: 650 clamp(22px, 1.75vw, 30px)/1.12 var(--font-display);
  letter-spacing: -.018em;
  text-wrap: balance;
}
#songs .deck__by { margin-top: 6px; font: 400 17px/1.4 var(--font-body); }
#songs .deck__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; margin-top: 14px; padding: 0 18px 0 20px;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: var(--pill);
  font: 600 15px/1 var(--font-body); color: #ffffff; text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
/* Hover brightens the ring and fills it faintly: an overlay that only fades */
#songs .deck__link::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid #ffffff; background: rgba(255, 255, 255, .1);
  opacity: 0; transition: opacity var(--dur-micro) ease-out;
}
#songs .deck__link svg { width: 15px; height: 15px; flex: none; }
#songs .deck__link.is-hot { transform: translateY(-1px); }
#songs .deck__link.is-hot::before { opacity: 1; }

/* ---------- The wall: forty-two sleeves, face out, seven by six ---------- */
/* The wall paints only inside itself (contain), so its box reaches past the
   sleeves by the "overhang" every sliding record needs; equal negative
   margins keep the layout exactly where it was. */
#songs .wall {
  --colgap: clamp(14px, 1.25vw, 24px);
  --room-r: 4.4%;                           /* layout room for the last column's records */
  --ov-t: 10px; --ov-b: 10px; --ov-l: 14px;
  --ov-r: calc(var(--gutter) + 24px);       /* a record slid fully out reaches into the gutter */
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(14px, 2vh, 24px);
  padding: var(--ov-t) calc(var(--room-r) + var(--ov-r)) var(--ov-b) var(--ov-l);
  margin: calc(-1 * var(--ov-t)) calc(-1 * var(--ov-r)) calc(-1 * var(--ov-b)) calc(-1 * var(--ov-l));
  align-content: start;
  contain: layout paint;
}
/* A fixed stacking order, so nothing restacks on hover: each record may
   cover the sleeve to its right as it slides out. */
#songs .rec { position: relative; z-index: calc(50 - var(--i, 0)); min-width: 0; }

#songs .rec__btn {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#songs .rec__btn:focus-visible { outline: none; }
#songs .rec__sleeve {
  position: relative; display: block; aspect-ratio: 1;
  transition: transform 320ms var(--ease-out);
}
#songs .rec__art {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 3px;
  background: #4a33c4;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 1px 1px rgba(var(--shade), .28),
    0 10px 18px -9px rgba(var(--shade), .6);
}
#songs .rec__btn:focus-visible .rec__art { outline: 2px solid #ffffff; outline-offset: 4px; }

/* A record half in its sleeve */
#songs .rec__disc {
  --dx: var(--peek); --dy: 0%; --dr: 0deg;
  position: absolute; z-index: 0; inset: 3%;
  border-radius: 50%;
  transform: translate(var(--dx), var(--dy)) rotate(var(--dr));
  transition: transform 460ms var(--ease-out);
}
#songs .rec__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 215deg,
    rgba(255, 255, 255, 0) 0deg 18deg, rgba(255, 255, 255, .16) 40deg, rgba(255, 255, 255, 0) 66deg 196deg,
    rgba(255, 255, 255, .11) 220deg, rgba(255, 255, 255, 0) 246deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 46.6%, #000 47.4% 98.6%, transparent 99.4%);
  mask: radial-gradient(circle closest-side, transparent 0 46.6%, #000 47.4% 98.6%, transparent 99.4%);
}
#songs .rec.is-out .rec__disc { visibility: hidden; }

/* Vinyl: grooves, the run-out and lead-in bands, then the paper label */
#songs .vinyl {
  background:
    radial-gradient(circle closest-side,
      rgba(255, 255, 255, 0) 0 47%, rgba(255, 255, 255, .09) 47.6% 48.4%, rgba(255, 255, 255, 0) 49% 66%,
      rgba(255, 255, 255, .045) 66.4% 67.2%, rgba(255, 255, 255, 0) 67.8% 92%,
      rgba(255, 255, 255, .07) 92.6% 93.6%, rgba(255, 255, 255, 0) 94.2%),
    repeating-radial-gradient(circle closest-side, rgba(255, 255, 255, .03) 0 .9%, rgba(255, 255, 255, 0) .9% 1.8%),
    radial-gradient(circle closest-side, #1f1a2c 0 55%, var(--vinyl) 100%);
  box-shadow: 0 4px 10px -4px rgba(var(--shade), .6);
}
#songs .rec__label,
#songs .deck__label {
  position: absolute; left: 27%; top: 27%; width: 46%; height: 46%;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}

/* Title and artist under each sleeve. They may run into the column gap (the
   record peeks out beside the sleeve, never beside the text). Two lines is
   the most either needs at laptop sizes; the clamp is only a safety net. */
#songs .rec__t,
#songs .rec__by {
  margin-inline-end: calc(10px - var(--colgap, 16px));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}
#songs .rec__t {
  -webkit-line-clamp: 3; line-clamp: 3;
  margin-top: 11px;
  font: 600 clamp(13px, .82vw, 14px)/1.24 var(--font-body); letter-spacing: -.004em;
}
#songs .rec__by {
  margin-top: 2px;
  font: 400 clamp(12.5px, .76vw, 13px)/1.3 var(--font-body);
}
/* Japanese and Chinese titles fall back to system fonts with taller line
   boxes; give them room so the clamp never clips a glyph */
#songs .rec__t:lang(ja), #songs .rec__t:lang(zh) { line-height: 1.38; }

/* Hover and focus pull the record out. Transform only. There is no CSS
   :hover in this section: gallery.js marks a sleeve .is-hot only after the
   pointer really moves onto it (never because the page scrolled under a
   resting mouse, never mid-scroll), so scrolling restyles nothing here. */
#songs.is-live .rec__btn { cursor: pointer; }
#songs .rec.is-hot .rec__disc,
#songs.is-live .rec__btn:focus-visible .rec__disc { --dx: var(--pull); --dr: var(--tilt); }
#songs .rec.is-hot .rec__sleeve,
#songs.is-live .rec__btn:focus-visible .rec__sleeve { transform: translateY(-3px); }
#songs.is-live .rec__btn:active .rec__sleeve { transform: translateY(-1px); }

/* While a record flies, the wall may sit above the side for the hand-off */
#songs.is-launch .wall { z-index: 3; }

/* ---------- Below desktop the turntable sits above the wall, so records
   stand in a crate: they peek out of the top and leave upward ---------- */
@media (max-width: 1099px) {
  #songs { --peek: 0%; --pull: 0%; --tilt: 0deg; --out: y; }
  #songs .rec__disc { --dy: -13%; }
  #songs .rec.is-hot .rec__disc,
  #songs.is-live .rec__btn:focus-visible .rec__disc { --dy: -40%; --dr: 0deg; }
  /* records leave upward here, a whole sleeve's height above the top row */
  #songs .wall { --room-r: 0%; --ov-t: calc(22% + 6px); --ov-r: 14px; }
  /* and each record may cover the row above */
  #songs .rec { z-index: calc(1 + var(--i, 0)); }
}

/* ---------- Tablet: deck beside the heading, wall below ---------- */
@media (min-width: 700px) and (max-width: 1099px) {
  #songs .songs__side {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 40px; align-items: start;
  }
  #songs .songs__side > .songs__title,
  #songs .songs__side > .songs__lede,
  #songs .songs__side > .deck__now { grid-column: 1; }
  #songs .deck { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  #songs .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Desktop: the turntable beside the wall. The wall is taller
   than a screen, so the turntable stays in view while it scrolls past
   (the column fits under the header down to 1100 x 700). ---------- */
@media (min-width: 1100px) {
  #songs .songs__inner {
    grid-template-columns: clamp(296px, 23.5vw, 410px) minmax(0, 1fr);
    column-gap: clamp(44px, 4.2vw, 84px);
    align-items: start;
  }
  #songs .songs__side { position: sticky; top: calc(var(--chrome-h) + 12px); }
}

/* ---------- Phone: all forty-two at once, the turntable on top ---------- */
@media (max-width: 699px) {
  #songs { padding-block: 26px calc(40px + var(--sheet-r, 0px)); }
  #songs .songs__inner { gap: 20px; }
  #songs .songs__side {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px; align-items: center;
  }
  #songs .songs__title, #songs .songs__lede { grid-column: 1 / -1; }
  #songs .songs__title { font-size: clamp(27px, 7.5vw, 34px); max-width: none; }
  #songs .songs__lede { font-size: 16px; line-height: 1.45; margin-top: 8px; }
  #songs .deck { grid-column: 1; margin-top: 15px; }
  #songs .deck__now { grid-column: 2; margin-top: 15px; }
  #songs .deck__t { font-size: 19px; }
  #songs .deck__by { margin-top: 4px; font-size: 14.5px; line-height: 1.35; }
  #songs .deck__link { margin-top: 12px; gap: 7px; padding: 0 13px 0 15px; font-size: 14px; white-space: nowrap; }
  #songs .deck__link svg { width: 13px; height: 13px; }
  #songs .wall {
    --colgap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 11px;
  }
  #songs .rec__t, #songs .rec__by {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* Smaller phones: the title sits under the turntable */
@media (max-width: 389px) {
  #songs .songs__side { grid-template-columns: minmax(0, 1fr); }
  #songs .deck { width: min(100%, 250px); }
  #songs .deck__now { grid-column: 1; margin-top: 14px; }
  #songs .deck__t { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #songs .rec__disc, #songs .rec__sleeve, #songs .deck__arm { transition: none; }
}