.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;align-items:center;gap:55px}.record-stage{position:relative;width:410px;height:410px;display:grid;place-items:center}.vinyl{width:350px;height:350px;border-radius:50%;background:repeating-radial-gradient(circle at center,#080808 0 4px,#191919 5px 7px,#050505 8px 11px);box-shadow:0 30px 60px #0009;position:relative}.vinyl:after{content:"";position:absolute;inset:48%;border-radius:50%;background:#ddd;border:5px solid #151515}.record-label{position:absolute;inset:92px;border-radius:50%;overflow:hidden;border:5px solid #0a0a0a}.record-label img{width:100%;height:100%;object-fit:cover}.vinyl.playing{animation:azzurro-spin 3.5s linear infinite}.tonearm{position:absolute;width:165px;height:14px;background:linear-gradient(#f4f4f4,#888);border-radius:20px;right:-12px;top:62px;transform:rotate(-12deg);transform-origin:100% 50%;transition:transform .7s;z-index:3}.tonearm.active{transform:rotate(32deg)}.tonearm:before{content:"";position:absolute;width:62px;height:62px;background:radial-gradient(circle,#888 0 18%,#171717 20% 64%,#050505 66%);border-radius:50%;right:-25px;top:-24px;box-shadow:0 8px 20px #0008}.tonearm:after{content:"";position:absolute;width:34px;height:46px;background:#161616;border-radius:5px;left:-16px;top:-16px;transform:rotate(-8deg)}@keyframes azzurro-spin{to{transform:rotate(360deg)}}.track-detail{display:grid;grid-template-columns:380px 1fr;gap:36px;background:#fff;border-radius:24px;padding:28px;box-shadow:0 16px 45px #0c314220}.track-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.track-info h3{font:400 clamp(2.5rem,5vw,5rem)/.95 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;margin:8px 0}.track-artist{font-size:1.35rem;color:#087cad;font-weight:900}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.info-box{border:1px solid #d9e3e8;border-radius:14px;padding:18px}.info-box h4{color:#087cad;text-transform:uppercase;font-size:.78rem;margin:0 0 8px}.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.fact{background:#eef4f7;border-radius:99px;padding:9px 13px;font-size:.82rem;font-weight:800}.chart-badge{display:none;margin-top:18px;background:#11192e;color:#fff;border-left:6px solid #efb02c;border-radius:12px;padding:16px}.chart-badge.visible{display:block}.history-wrap{margin-top:52px}.history-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.history-head h3{font:400 2.8rem/1 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;margin:6px 0}.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.history-card{background:#11192e;color:#fff;border-radius:16px;overflow:hidden}.history-card img{width:100%;aspect-ratio:1;object-fit:cover}.history-card div{padding:14px}.history-card b,.history-card span{display:block}.history-card span{color:#efb02c;font-size:.82rem;margin-top:5px}.history-card small{color:#9eacc0}.history-empty{color:#657487}@media(max-width:900px){.hero-layout,.track-detail{grid-template-columns:1fr}.record-stage{width:320px;height:320px;margin:0 auto 45px}.vinyl{width:285px;height:285px}.record-label{inset:75px}.tonearm{right:-10px;top:50px}.track-art{max-width:420px}.history-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.info-grid,.history-grid{grid-template-columns:1fr}}
/* v1.0.6: de naald landt op de buitenste groef, niet midden op de plaat. */
.record-stage .tonearm{width:115px;right:3px;top:58px;transform:rotate(-24deg)}
.record-stage .tonearm.active{transform:rotate(22deg)}
/* v1.0.8: arm en naald liggen duidelijk op de plaat. */
.record-stage .tonearm{width:145px;right:45px;top:82px;transform:rotate(-18deg)}
.record-stage .tonearm.active{transform:rotate(25deg)}