.record-collection{padding:46px var(--pad) 42px;border-bottom:1px solid var(--line)}
.record-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:42px}
.record-heading h1{font-size:clamp(28px,3.2vw,44px);font-weight:400;letter-spacing:-1.2px;margin:0}
.record-playlist{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:22px;min-height:44px}
.record-playlist span{font-size:23px;color:var(--blue)}
.record-playlist:hover{color:var(--ink)}
.record-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:42px 30px}
.record{display:block;min-width:0;position:relative;cursor:pointer}
.record-stage{display:block;position:relative;width:88%;aspect-ratio:1;margin-bottom:28px;isolation:isolate}
.record-stage:after{content:'';position:absolute;bottom:-10px;left:-14px;right:calc(-13.64% - 16px);height:8px;border-top:1px solid #bda06a66;border-bottom:1px solid #0008;background:linear-gradient(#6f533b,#382a20);box-shadow:0 6px 8px #0005;z-index:3}
.record-cover{display:block;position:relative;z-index:2;width:100%;height:100%;object-fit:contain;background:var(--panel);box-shadow:1px 3px 7px #0008;transition:transform .3s ease}
.record-vinyl{position:absolute;z-index:1;top:3%;right:-12%;width:94%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at center,#191919 0px,#191919 2px,#30302e 2.5px,#141414 3px);border:1px solid #474744;box-shadow:2px 2px 5px #0008;transition:transform .3s ease}
.record-vinyl:before{content:'';position:absolute;inset:35%;background:var(--blue);border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff33}
.record-vinyl:after{content:'';position:absolute;inset:48.5%;background:#141414;border:1px solid #6e6b65;border-radius:50%}
.record:hover .record-cover,.record:focus-visible .record-cover{transform:translateY(-5px) rotate(-1deg)}
.record:hover .record-vinyl,.record:focus-visible .record-vinyl{transform:translateX(4px) rotate(12deg)}
.record-caption{display:flex;flex-direction:column;gap:3px;min-height:51px;padding-right:3px}
.record-title{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.record-artist{font-size:12px;line-height:1.4;color:var(--muted)}
.record:hover .record-title,.record:focus-visible .record-title{color:var(--blue)}

@media(max-width:1000px){.record-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 26px}.record-stage:after{left:-12px;right:calc(-13.64% - 14px)}}
@media(max-width:650px){.record-collection{padding-top:30px;padding-bottom:30px}.record-heading{margin-bottom:28px}.record-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}.record-stage{margin-bottom:24px}.record-stage:after{left:-10px;right:calc(-13.64% - 14px)}.record-title{font-size:13px}.record-artist{font-size:11px}.record-caption{min-height:48px}}
@media(prefers-reduced-motion:reduce){.record-cover,.record-vinyl{transition:none}.record:hover .record-cover,.record:focus-visible .record-cover,.record:hover .record-vinyl,.record:focus-visible .record-vinyl{transform:none}}