/* Cover browsing below the cabinet. These selectors do not change the jukebox. */
.cover-gallery {margin:89px 0 0;padding:0 0 8px;color:#e4dfca;scroll-margin-top:24px}
.gallery-intro {display:flex;align-items:end;justify-content:space-between;gap:25px;margin:0 0 23px}
.gallery-eyebrow {color:#a8ac93;font-size:8px;letter-spacing:.2em;margin:0 0 7px}
.gallery-intro h2 {font:500 45px/1.1 var(--serif);letter-spacing:-.025em;margin:0}
.gallery-intro h2 span {color:#d29c54}
.gallery-intro>p {margin:0;font-size:11px;line-height:1.9;color:#d0cfb9}
.gallery-intro>p span {font-size:9px;color:#939c83}
.gallery-jumps {display:flex;flex-wrap:wrap;gap:9px;margin-bottom:29px}
.gallery-jumps a {padding:9px 12px;border:1px solid #b5b69644;border-radius:2px;text-decoration:none;font-size:9px;letter-spacing:.03em;color:#c6c9af;transition:color .2s,border-color .2s,background .2s}
.gallery-jumps a:hover {color:#f6deb0;border-color:#c39b58;background:#d5a9540d}
.cover-shelf {padding:24px 0 30px;border-top:1px solid #c1c1a433;scroll-margin-top:20px}
.gallery-shelf-header {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.gallery-shelf-label {display:flex;align-items:center;gap:13px;min-width:0}
.gallery-shelf-letter {display:grid;place-items:center;width:31px;height:38px;flex-shrink:0;font:400 25px/1 var(--serif);color:#d4b67d;border:1px solid #b5ad853b;border-radius:45% 45% 2px 2px;background:#bca16f0b}
.gallery-shelf-label h3 {font:500 28px/1.1 var(--serif);letter-spacing:.01em;color:#e8e2cd;margin:0}
.gallery-shelf-label small {display:block;color:#8e9b80;font-size:8px;letter-spacing:.06em;margin-top:5px}
.gallery-shelf-tools {display:flex;align-items:center;gap:14px;flex-shrink:0}
.gallery-type,.gallery-year {display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.05em;color:#959e82}
.gallery-type select,.gallery-year select {color:#cecfb6;background:#222c2244;border:1px solid #9da98755;border-radius:2px;min-height:32px;padding:5px 9px;font-size:9px}
.gallery-type select option,.gallery-year select option {color:#e7e2ca;background:#283226}
.gallery-pager {display:flex;align-items:center;gap:9px}
.gallery-pager button {display:grid;place-items:center;min-width:32px;height:32px;padding:0;background:#bfaa7810;border:1px solid #b9b18b66;border-radius:2px;color:#dfd4ae;font-size:15px;transition:background .2s,border-color .2s}
.gallery-pager button:disabled {opacity:.28}
.gallery-pager button:not(:disabled):hover {background:#d2b57324;border-color:#d7b36d}
.gallery-range {font-size:8px;letter-spacing:.05em;text-align:center;color:#aeb598;min-width:64px;font-variant-numeric:tabular-nums}
.gallery-grid {--cover-gap:22px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--cover-gap)) / 4);grid-template-columns:none;gap:var(--cover-gap);align-items:start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b89d6877 #18231a44;padding:7px 1px 16px;scroll-padding-inline:1px;min-width:0;touch-action:pan-x pan-y pinch-zoom}
.gallery-grid::-webkit-scrollbar {height:6px}.gallery-grid::-webkit-scrollbar-track {background:#18231a44}.gallery-grid::-webkit-scrollbar-thumb {background:#b89d6877;border-radius:3px}
.gallery-grid.is-dragging {scroll-snap-type:none;cursor:grabbing;user-select:none}.gallery-grid.is-dragging .gallery-card {cursor:grabbing}
.gallery-grid:focus-visible {outline-offset:4px}
.gallery-card {display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;min-width:0;scroll-snap-align:start;scroll-margin-inline:1px}
.gallery-cover {display:block;position:relative;width:100%;aspect-ratio:1;isolation:isolate;overflow:hidden;background:#3d4939;border:1px solid #c8c4a34d;box-shadow:0 10px 18px #10190d55,0 1px 0 #e4d8ac22;transition:transform .25s,box-shadow .25s}
.gallery-cover>img {display:block;width:100%;height:100%;object-fit:cover}
.gallery-cover::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#fff1,transparent 30%,transparent 80%,#0001);box-shadow:inset 0 0 0 3px #f2e9cf0a}
.gallery-card:hover .gallery-cover {transform:translateY(-4px);box-shadow:0 15px 24px #10190d77,0 0 0 1px #c3a46b66}
.gallery-card:focus-visible {outline-offset:7px}
.gallery-card-meta {display:block;margin-top:13px;font-size:8px;letter-spacing:.04em;line-height:1.6;color:#a4ae91;min-height:13px}
.gallery-card-title {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 14px/1.6 var(--sans);color:#e6e1cc;margin:4px 0 6px;overflow-wrap:anywhere}
.gallery-card-more {display:block;color:#b69c6b;font-size:8px;line-height:1.8;letter-spacing:.03em}
.gallery-card-artist {display:block;color:#a4ae91;font-size:9px;line-height:1.6;margin:0 0 6px;overflow-wrap:anywhere}
.gallery-card-more span {font-size:11px;margin-left:5px}
.gallery-sleeve {width:100%;height:100%;padding:10%;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 85% 20%,#f7d58d22,transparent 44%),linear-gradient(155deg,var(--sleeve-color,#4c614c),#101d1844),var(--sleeve-color,#4c614c);color:#f4ebd0}
.gallery-sleeve-by {font-size:7px;letter-spacing:.12em;line-height:1.5;opacity:.67}
.gallery-sleeve-title {font:500 clamp(21px,2.5vw,33px)/1.08 var(--serif);letter-spacing:-.01em;overflow-wrap:anywhere;white-space:normal;margin:12px 0}
.gallery-sleeve-title.is-long {font-size:22px;line-height:1.12}
.gallery-sleeve-bottom {display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:7px;letter-spacing:.05em;opacity:.74}
.gallery-sleeve-rule {height:2px;width:24%;background:#efd19b;opacity:.6}
.gallery-message {font-size:12px;color:#b8b99f;padding:25px 0;line-height:1.8}
#gallery-dialog .gallery-detail-art {box-shadow:0 8px 18px #5d492530;background:#3d4939}
#gallery-dialog .gallery-detail-art>img {display:block;width:100%;height:100%;object-fit:cover}
#gallery-dialog .gallery-sleeve {padding:10%}
#gallery-dialog .gallery-sleeve-title {font-size:27px}
#gallery-dialog .gallery-sleeve-title.is-long {font-size:20px}
#gallery-dialog .gallery-sleeve-by,#gallery-dialog .gallery-sleeve-bottom {font-size:6px}
#gallery-dialog .gallery-runtime {margin:0 0 12px;color:#8b7657;font-variant-numeric:tabular-nums}
#gallery-dialog .gallery-track {padding-right:45px}
#gallery-dialog .gallery-track-time {position:absolute;right:0;top:12px;font-size:10px;color:#8b7657;font-variant-numeric:tabular-nums}
@media(max-width:1000px){
  .gallery-grid {--cover-gap:18px}
  .gallery-sleeve-title {font-size:27px}.gallery-sleeve-title.is-long {font-size:18px}
  .gallery-card-title {font-size:12px}
}
@media(max-width:760px){
  .cover-gallery {margin-top:63px;padding:0 2px 5px}
  .gallery-intro {display:block;margin-bottom:18px}
  .gallery-intro h2 {font-size:36px}.gallery-eyebrow {font-size:7px;margin-bottom:6px}
  .gallery-intro>p {font-size:10px;margin-top:11px;line-height:1.8}
  .gallery-intro>p span {font-size:8px}
  .gallery-jumps {gap:6px;margin-bottom:23px}
  .gallery-jumps a {font-size:8px;padding:8px 9px}
  .cover-shelf {padding:19px 0 25px}
  .gallery-shelf-header {align-items:start;flex-wrap:wrap;gap:13px;margin-bottom:15px}
  .gallery-shelf-label {gap:10px}.gallery-shelf-label h3 {font-size:26px}
  .gallery-shelf-label small {font-size:7px;margin-top:4px}.gallery-shelf-letter {width:27px;height:32px;font-size:22px}
  .gallery-shelf-tools {width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px}
  .gallery-type,.gallery-year {font-size:7px;gap:7px}.gallery-type select,.gallery-year select {font-size:9px;min-height:31px;padding:5px 8px}
  .gallery-pager {gap:8px;margin-left:auto}.gallery-pager button {min-width:31px;height:31px}
  .gallery-range {font-size:8px;min-width:62px}
  .gallery-grid {--cover-gap:15px;grid-auto-columns:calc((100% - var(--cover-gap)) / 2)}
  .gallery-card-meta {font-size:7px;margin-top:10px;min-height:12px}
  .gallery-card-title {font-size:11px;line-height:1.55;margin:4px 0 5px}
  .gallery-card-more {font-size:7px}.gallery-card-more span {font-size:10px}
  .gallery-card-artist {font-size:8px;margin-bottom:5px}
  .gallery-sleeve-title {font-size:25px}.gallery-sleeve-title.is-long {font-size:17px}
  .gallery-sleeve-by {font-size:5px}.gallery-sleeve-bottom {font-size:5px}
  #gallery-dialog .gallery-sleeve-title {font-size:17px}#gallery-dialog .gallery-sleeve-title.is-long {font-size:12px}
  #gallery-dialog .gallery-sleeve-by,#gallery-dialog .gallery-sleeve-bottom {font-size:4px}
}
@media(max-width:360px){
  .gallery-grid {--cover-gap:12px}.gallery-intro h2 {font-size:32px}
  .gallery-shelf-label h3 {font-size:24px}.gallery-sleeve-title {font-size:22px}
  .gallery-sleeve-title.is-long {font-size:15px}.gallery-card-title {font-size:10px}
}
@media(prefers-reduced-motion:reduce){.gallery-cover,.gallery-jumps a,.gallery-pager button{transition:none}}

/* D: all production work stays visible, at a smaller scale than A–C. */
.is-works {padding-top:30px}
.is-works .gallery-shelf-label h3 {font-size:30px}
.works-summary {margin:0;color:#a4ae91;font-size:9px;letter-spacing:.06em;white-space:nowrap}
.is-works .works-grid {display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:19px;row-gap:30px;overflow:visible;scroll-snap-type:none;padding:7px 1px 16px;touch-action:auto}
.is-works .gallery-card-meta {font-size:8px;margin-top:10px}
.is-works .gallery-card-title {display:block;overflow:visible;font-size:11px;line-height:1.6;margin:4px 0 5px}
.is-works .gallery-card-artist {font-size:8px;line-height:1.6}
.is-works .gallery-card-more {font-size:8px}
@media(max-width:1000px){.is-works .works-grid{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:17px}}
@media(max-width:760px){
  .is-works {padding-top:24px}
  .is-works .gallery-shelf-header {align-items:center;gap:11px}
  .is-works .gallery-shelf-label {gap:9px}
  .is-works .gallery-shelf-label h3 {font-size:24px;line-height:1.1}
  .works-summary {display:none}
  .is-works .works-grid {grid-template-columns:repeat(3,minmax(0,1fr));column-gap:13px;row-gap:25px}
  .is-works .gallery-card-meta {font-size:7px;line-height:1.65;margin-top:9px}
  .is-works .gallery-card-title {font-size:10px;line-height:1.65}
  .is-works .gallery-card-artist {font-size:7px}
  .is-works .gallery-card-more {font-size:7px}
}
@media(max-width:360px){.is-works .works-grid{column-gap:10px}.is-works .gallery-shelf-label h3{font-size:22px}.is-works .gallery-card-title{font-size:9px}}

/* Spotify playlists: a small, quiet version of the Record Collection, so the collection below still stands out.
   Newest on the left, scrolls sideways as it grows. */
.playlists{margin-top:80px}
.playlists .gallery-intro{margin-bottom:16px}
.playlists .gallery-intro h2{font-size:32px}
.playlists + .cover-gallery{margin-top:34px}
.playlist-shelf{padding:18px 0 0;border-top:1px solid #c1c1a433}
.playlist-grid{--cover-gap:16px;grid-auto-columns:calc((100% - 7 * var(--cover-gap)) / 8);padding-bottom:10px}
.playlist-card{text-decoration:none}
.playlist-card .gallery-card-meta{margin-top:9px;font-size:7px}
.playlist-card .gallery-card-title{font-size:11px;line-height:1.5;margin:2px 0 3px}
.playlist-card .gallery-card-more{font-size:7px}
.playlist-count{display:block;margin-top:2px;font-size:8px;letter-spacing:.1em;color:#8e9b80;text-align:right}
@media(max-width:1000px){.playlist-grid{--cover-gap:14px;grid-auto-columns:calc((100% - 5 * var(--cover-gap)) / 6)}}
@media(max-width:760px){.playlists{margin-top:56px}.playlists .gallery-intro h2{font-size:28px}.playlists + .cover-gallery{margin-top:28px}.playlist-shelf{padding-top:14px}.playlist-grid{--cover-gap:12px;grid-auto-columns:calc((100% - 3 * var(--cover-gap)) / 3.6)}}
/* phone: KENNY PARAVES / MUUDO / SPiCYSOL shelves show 3 covers at a time (was 2) */
@media(max-width:760px){
  .cover-shelf:not(.is-works) .gallery-grid{--cover-gap:10px;grid-auto-columns:calc((100% - 2 * var(--cover-gap)) / 3)}
  .cover-shelf:not(.is-works) .gallery-card-meta{font-size:7px;margin-top:8px;letter-spacing:0}
  .cover-shelf:not(.is-works) .gallery-card-title{font-size:10px;line-height:1.5;margin:3px 0 4px}
  .cover-shelf:not(.is-works) .gallery-card-more{font-size:7px}
  .cover-shelf:not(.is-works) .gallery-card-more span{font-size:9px;margin-left:3px}
}