/* Two shelves of three compact sleeves; two columns on narrow phones. */
.vibe-section {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 100px 5vw 60px;
  scroll-margin-top: 100px;
}
.vibe-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid #13141724;
}
.vibe-heading .eyebrow {
  color: var(--text-secondary);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.vibe-heading h2 {
  margin: 18px 0 0;
  font: 400 clamp(42px, 5.5vw, 80px)/1.05 var(--font-sans);
  letter-spacing: -0.05em;
}
.vibe-heading > p {
  max-width: 300px;
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.vibe-wall {
  position: relative;
  margin-top: 40px;
  padding: 52px 2% 20px;
  background: radial-gradient(
    ellipse at 50% 28%,
    #fff 0%,
    #eeeeed70 55%,
    #f5f5f500 78%
  );
}
.vibe-shelf {
  --album-gap: clamp(40px, 6vw, 84px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, clamp(132px, 12vw, 180px)));
  justify-content: center;
  align-items: start;
  column-gap: var(--album-gap);
  row-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vibe-album {
  position: relative;
  min-width: 0;
  perspective: 1000px;
}
/* Attach the ledge to the square artwork so all responsive rows align. */
.album-slot::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 100%;
  left: calc(var(--album-gap) / -2 - 1px);
  right: calc(var(--album-gap) / -2 - 1px);
  height: 8px;
  background: linear-gradient(#fff 0 35%, #dededd 38%, #fafafa 100%);
  box-shadow:
    0 16px 20px -9px #13141755,
    0 35px 40px -14px #13141728;
  pointer-events: none;
}
.album-slot {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  color: #fff;
  text-decoration: none;
  outline-offset: 10px;
}
.album-jacket {
  position: absolute;
  inset: 0;
  display: block;
  transform: rotateY(-6deg) rotateZ(-2deg);
  transform-origin: 50% 100%;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms;
  filter: drop-shadow(6px 8px 8px #13141728);
}
.vibe-album:nth-child(even) .album-jacket {
  transform: rotateY(-6deg) rotateZ(2deg);
}
.album-jacket::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 -4px 0 auto;
  width: 5px;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(90deg, #d0cfcb 0 1px, #f1efea 1px 2px);
  transform: skewY(-18deg);
  transform-origin: left center;
}
/* The record sits behind the sleeve and moves within the shelf gap. */
.album-record {
  --record-label: #dedbd3;
  position: absolute;
  z-index: 1;
  inset: 3%;
  border: 1px solid #08090b;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #f1f1ed 0 2%,
      #17191b 2.5% 3.5%,
      var(--record-label) 4% 17%,
      #16181a 17.5% 20%,
      transparent 20.5%
    ),
    conic-gradient(
      from -35deg,
      transparent 0%,
      #ffffff36 13%,
      transparent 23% 46%,
      #ffffff25 64%,
      transparent 78%
    ),
    repeating-radial-gradient(
      circle,
      #121416 0 1px,
      #303235 1.5px 2px,
      #101214 2.5px 3px
    );
  box-shadow:
    3px 5px 9px #13141735,
    inset 0 0 0 2px #484a4b;
  transform: translateX(0) rotate(-18deg);
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.vibe-album--qianli .album-record {
  --record-label: #b5c8a6;
}
.vibe-album--crystal .album-record {
  --record-label: #d5c3e5;
}
.album-cover {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #ffffff5c;
  border-radius: 2px;
  background: #314e50;
  box-shadow: inset 4px 0 8px #0002;
}
.album-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vibe-album--qianli .album-cover img {
  object-position: 60% 60%;
}
.vibe-album--crystal .album-cover img {
  position: absolute;
  width: 170%;
  height: 170%;
  max-width: none;
  left: -35%;
  top: -20%;
  object-position: 58% 45%;
}
.album-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      #13141755,
      transparent 27%,
      transparent 50%,
      #131417c2
    ),
    linear-gradient(
      95deg,
      #ffffff40,
      transparent 3%,
      #ffffff12 45%,
      transparent 55%
    );
  pointer-events: none;
}
.album-cover-top {
  position: absolute;
  z-index: 1;
  inset: 8% 7% auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 400 7px/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 5px #0008;
}
.album-cover-title {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  bottom: 8%;
  font: 400 clamp(18px, 1.6vw, 24px)/1.1 var(--font-serif);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 14px #0004;
  transition:
    transform 450ms,
    opacity 450ms;
}
.album-open {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  padding: 9px 16px;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: var(--hover-bg, #131417a6);
  backdrop-filter: blur(12px);
  color: #fff;
  white-space: nowrap;
  font: 400 12px/1.4 var(--font-sans);
  opacity: 0;
  transform: translate(-50%, -35%);
  transition:
    opacity 350ms,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.album-caption {
  padding-top: 30px;
}
.album-tags {
  color: var(--text-secondary);
  font: 400 8px/1.6 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.album-caption h3 {
  margin: 9px 0 5px;
  color: var(--ink);
  font: 400 17px/1.3 var(--font-sans);
  letter-spacing: -0.035em;
}
.album-caption p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.65;
}
.vibe-colophon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
  color: var(--text-secondary);
  font: 400 10px/1.6 var(--font-mono);
}
.vibe-album-link:focus-visible {
  outline: 2px solid var(--ink);
}
.vibe-album-link:focus-visible .album-jacket {
  transform: translateY(-12px) rotateY(0) rotateZ(0);
}
.vibe-album-link:focus-visible .album-open {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.vibe-album:focus-within {
  z-index: 3;
}
.vibe-album-link:focus-visible .album-record {
  transform: translateX(min(42%, calc(var(--album-gap) * 0.75))) rotate(18deg);
}
@media (hover: hover) and (pointer: fine) {
  .vibe-album:hover {
    z-index: 3;
  }
  .album-slot:hover .album-jacket {
    transform: translateY(-12px) rotateY(0) rotateZ(0);
    filter: drop-shadow(8px 18px 12px #13141730);
  }
  .vibe-album-link:hover .album-cover img {
    transform: scale(1.035);
  }
  .vibe-album-link:hover .album-open {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .album-slot:hover .album-record {
    transform: translateX(min(42%, calc(var(--album-gap) * 0.75))) rotate(18deg);
  }
}
@media (max-width: 1000px) {
  .vibe-wall {
    padding-inline: 6%;
  }
  .vibe-shelf {
    --album-gap: 44px;
  }
  .album-cover-title {
    font-size: 22px;
  }
}
@media (max-width: 600px) {
  .vibe-section {
    padding: 64px 5vw 32px;
  }
  .vibe-heading {
    display: block;
  }
  .vibe-heading > p {
    margin-top: 24px;
  }
  .vibe-wall {
    margin-top: 28px;
    padding: 34px 3% 10px;
  }
  .vibe-shelf {
    --album-gap: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 38px;
  }
  .album-cover-title {
    font-size: 22px;
  }
  .vibe-colophon {
    margin-top: 28px;
    font-size: 9px;
  }
}
@media (hover: none) {
  .album-open {
    left: auto;
    right: 8px;
    top: 25%;
    padding: 6px 10px;
    font-size: 10px;
    opacity: 1;
    transform: none;
  }
  .vibe-album-link:focus-visible .album-open {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-section .album-jacket,
  .vibe-section .album-record,
  .vibe-section .album-cover img,
  .vibe-section .album-open,
  .vibe-section .album-cover-title {
    transition: none;
  }
  .vibe-section .album-jacket,
  .vibe-section .album-slot:hover .album-jacket,
  .vibe-section .album-record,
  .vibe-section .album-slot:hover .album-record,
  .vibe-section .vibe-album-link:focus-visible .album-record,
  .vibe-section .vibe-album-link:focus-visible .album-jacket,
  .vibe-section .vibe-album-link:hover .album-cover img {
    transform: none;
  }
}

.album-status {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font: 400 9px/1.5 var(--font-mono);
}
.album-status::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.vibe-album--qianli .album-status::before {
  background: currentColor;
}
.vibe-album--reserved .album-cover {
  color: #747574;
  background: linear-gradient(125deg, #f5f4f1, #e2e3df);
  border-color: #b7b9b22b;
  box-shadow: inset 2px 0 4px #0001;
}
.vibe-album--reserved:nth-child(4) .album-cover {
  background: linear-gradient(125deg, #f1f3f4, #dde1e3);
}
.vibe-album--reserved:nth-child(5) .album-cover {
  background: linear-gradient(125deg, #f2f0f4, #e3dfe6);
}
.vibe-album--reserved:nth-child(6) .album-cover {
  background: linear-gradient(125deg, #f2f2ef, #e4e4dc);
}
.vibe-album--reserved .album-cover::after {
  inset: 13%;
  border: 1px solid #74757418;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 9px #74757406;
}
.vibe-album--reserved .album-jacket {
  filter: drop-shadow(4px 6px 6px #13141714);
}
.album-reserved-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 30px/1 var(--font-serif);
  color: #74757470;
}
.album-reserved-note {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 9%;
  text-align: center;
  font: 400 6px/1.5 var(--font-mono);
}
.album-caption .album-reserved-caption {
  margin-top: 8px;
  font-size: 11px;
}