/* The records — v5's spinning-vinyl crate, shared by every version.
 * Each page sets --rec-bg (its page background, for the spindle hole) and --rec-soft (its muted text colour).
 * Needs Instrument Serif and Archivo loaded on the page. Rendered by records.js. */
.crate{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4vw,40px)}
.crate .rec{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.crate .disc{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#141414 0 2px,#1f1f1f 2px 3px);box-shadow:0 30px 60px -20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.crate .disc::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 40deg,rgba(255,255,255,.14) 60deg,transparent 80deg 220deg,rgba(255,255,255,.1) 240deg,transparent 260deg)}
.crate .disc .lbl{position:absolute;inset:31%;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.2)}
.crate .disc .lbl img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.crate .disc .lbl::after{content:'';position:absolute;left:50%;top:50%;width:9%;height:9%;margin:-4.5%;border-radius:50%;background:var(--rec-bg,#0A0A0A)}
.crate .rec:hover .disc{transform:translateY(-10px)}
.crate .rec.on .disc{animation:rec-spin 1.94s linear infinite}
@keyframes rec-spin{to{transform:rotate(360deg)}}
.crate .rec .t{font-family:'Instrument Serif',serif;font-weight:400;font-style:normal;font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:0;text-transform:none;font-variation-settings:normal}
.crate .rec .t em{font-style:italic}
.crate .rec .m{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;font-variation-settings:normal;color:var(--rec-soft,rgba(255,255,255,.62))}
@media (max-width:900px){.crate{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.crate{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.crate .rec.on .disc{animation:none}}