.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 #c8c8c880;border-bottom:1px solid #00000088;background:linear-gradient(#737373,#2f2f2f);box-shadow:0 6px 8px #00000055;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 #00000088;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,#303030 2.5px,#141414 3px);border:1px solid #474747;box-shadow:2px 2px 5px #00000088;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 #6b6b6b;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}}

.record{color:var(--ink);text-decoration:none}.record-collection{padding:44px var(--pad) 60px}.record-heading h1{font-family:paper-alt,brandon,sans-serif;font-size:58px;letter-spacing:.025em}.record-grid{padding-top:10px}.record-cover{border-radius:2px}.record-title{font-size:15px}.record-artist{font-size:13px}.record-stage:after{border-radius:2px}.record-playlist{max-width:45%;text-align:right;line-height:1.5}.record-heading{align-items:center}@media(max-width:650px){.record-heading{align-items:flex-start;gap:18px}.record-heading h1{font-size:43px}.record-playlist{font-size:11px;gap:10px}.record-playlist span{font-size:22px}.record-collection{padding:30px 24px 40px}.record-title{font-size:13px}.record-artist{font-size:11px}}