:root{--orange:#ffb84d;--black:#090907}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--black)}body{color:var(--orange);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.shop{min-height:100svh;background:var(--black);overflow:hidden}header{position:fixed;z-index:30;inset:0 0 auto;height:142px;display:flex;align-items:flex-start;justify-content:space-between;padding:4px 28px;background:linear-gradient(var(--black),transparent)}.wordmark{display:block;flex:none;width:270px;height:132px;background:url('assets/compas-wordmark-transparent.png') center/contain no-repeat;filter:brightness(0) saturate(100%) invert(78%) sepia(93%) saturate(834%) hue-rotate(329deg) brightness(106%) contrast(102%)}.instagram{margin:22px 0 0 auto;font:800 10px monospace;letter-spacing:.12em;border-bottom:1px solid;padding:9px 0}.crate-scene{min-height:calc(100svh - 44px);position:relative;overflow:hidden;isolation:isolate;background:#29231d url('assets/record-shop-natural-v4.png') center bottom/cover no-repeat}.crate-scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,9,7,.08),transparent 58%,rgba(9,9,7,.08)),linear-gradient(0deg,rgba(9,9,7,.32),transparent 34%);pointer-events:none}.intro{position:absolute;z-index:3;left:5vw;top:20%;width:min(690px,45vw);text-shadow:0 2px 18px var(--black)}.intro h1{margin:18px 0 0;font-size:clamp(42px,5.5vw,86px);line-height:.88;letter-spacing:-.065em;color:var(--orange)}.instruction{font:800 9px monospace;letter-spacing:.2em;position:absolute;z-index:4;bottom:37%;left:50%;transform:translateX(-50%);color:var(--orange);text-align:center;animation:pulse 1.8s ease-in-out infinite}.instruction span{display:block;margin-bottom:7px;font-size:20px}@keyframes pulse{50%{transform:translate(-50%,5px)}}.record-nav{position:absolute;z-index:6;left:14%;right:10%;bottom:17%;height:34%;display:flex;justify-content:center;align-items:flex-end;perspective:900px;pointer-events:none}.record{--turn:0deg;--sleeve:#e7d8b5;--ink:#171510;--label:#d97042;pointer-events:auto;cursor:pointer;appearance:none;border:0;padding:0;position:relative;flex:0 0 min(19vw,280px);width:min(19vw,280px);height:min(19vw,280px);margin-left:-5vw;background:transparent;color:var(--ink);overflow:visible;filter:drop-shadow(0 15px 12px rgba(0,0,0,.48));transform-origin:50% 100%;transform:translateY(54%) rotate(var(--turn));transition:transform .5s cubic-bezier(.2,.85,.18,1),filter .4s}.record:first-child{margin-left:0}.record-1{--turn:-2deg;z-index:1}.record-2{--turn:1deg;--sleeve:#b9654e;--ink:#160f0b;--label:#e4c78f;z-index:2}.record-3{--turn:-1deg;--sleeve:#66808a;--ink:#101719;--label:#d99a55;z-index:3}.record-4{--turn:2deg;--sleeve:#7d7b4e;--ink:#16160e;--label:#d47a4b;z-index:4}.record-5{--turn:-1deg;--sleeve:#c28a48;--ink:#17120c;--label:#e4d1a4;z-index:5}.record:hover,.record:focus-visible{transform:translateY(9%) rotate(0);outline:0;z-index:10;filter:drop-shadow(0 25px 18px rgba(0,0,0,.64))}.record:focus-visible .sleeve-paper{outline:3px solid var(--orange);outline-offset:5px}.record.selected{transform:translateY(-7%) rotate(0) scale(1.04);z-index:12;filter:drop-shadow(0 30px 22px rgba(0,0,0,.72))}.sleeve-paper{position:absolute;z-index:2;inset:0;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 28%,rgba(0,0,0,.08) 82%),repeating-linear-gradient(95deg,transparent 0 9px,rgba(255,255,255,.025) 10px),var(--sleeve);border:1px solid rgba(18,15,11,.42);box-shadow:inset 0 0 24px rgba(255,255,255,.15),inset 0 0 2px rgba(0,0,0,.45)}.sleeve-paper:before,.sleeve-paper:after{content:"";position:absolute;inset:4% 5%;border-top:1px solid rgba(255,255,255,.23);transform:rotate(-.5deg)}.sleeve-paper:after{inset:auto 4% 4%;border-top:0;border-bottom:1px solid rgba(0,0,0,.12)}.vinyl-45{position:absolute;z-index:1;width:86%;aspect-ratio:1;right:7%;top:6%;border-radius:50%;background:repeating-radial-gradient(circle at center,#171717 0 2px,#252525 3px 4px,#111 5px 7px);box-shadow:0 8px 18px rgba(0,0,0,.65);transition:transform .55s cubic-bezier(.2,.85,.18,1)}.vinyl-45:before{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,#0d0d0c 0 22%,var(--label) 23% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}.vinyl-45 i{display:none}.record:hover .vinyl-45,.record:focus-visible .vinyl-45{transform:translateY(-48%) rotate(32deg)}.record.selected .vinyl-45{transform:translateY(-62%) rotate(58deg)}.record-title{position:absolute;z-index:3;left:7%;top:8%;bottom:8%;writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;text-transform:uppercase;font:850 clamp(18px,2vw,32px)/1 Arial,Helvetica,sans-serif;letter-spacing:.01em;text-shadow:0 1px rgba(255,255,255,.12)}.details{position:absolute;z-index:20;inset:142px 0 0 auto;width:min(660px,100%);overflow-y:auto;background:var(--orange);color:var(--black);padding:45px 55px;transform:translateX(102%);transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:-22px 0 45px rgba(0,0,0,.45)}.details.open{transform:translateX(0)}.close{position:absolute;top:24px;right:27px;border:2px solid var(--black);background:transparent;color:var(--black);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:25px}.detail-number,.kicker{font:900 9px monospace;letter-spacing:.18em}.details h2{max-width:90%;font:950 clamp(54px,6vw,88px)/.78 Arial;letter-spacing:-.08em;margin:42px 0 30px}.kicker{border-block:2px solid;padding:13px 0}.detail-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:24px}.detail-photos img{width:100%;height:190px;display:block;object-fit:cover;filter:saturate(.82) contrast(1.04)}.detail-photos img:only-child{grid-column:1/-1;height:240px}.detail-copy{font-size:clamp(15px,1.3vw,18px);line-height:1.45;margin-top:24px}.detail-copy p{margin:0 0 14px}.detail-links{display:flex;gap:30px}.detail-links a{display:inline-block;border:0;border-bottom:2px solid;padding:13px 0;margin-top:35px;color:var(--black);font:900 10px monospace;letter-spacing:.12em}.contact-actions,.sound-links{display:grid;gap:10px}.contact-actions a,.sound-links a{margin-top:10px;border:2px solid var(--black);padding:16px 18px;font-size:13px}.next{border:0;border-bottom:2px solid;background:none;padding:13px 0;margin-top:35px;color:var(--black);font:900 10px monospace;letter-spacing:.12em;cursor:pointer}footer{height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;background:var(--orange);color:var(--black);font:900 8px monospace;letter-spacing:.12em}@media(max-width:800px){header{height:112px;padding:0 16px}.wordmark{width:205px;height:104px}.instagram{margin-top:22px;font-size:8px}.crate-scene{min-height:calc(100svh - 36px);background-position:right bottom}.intro{top:17%;left:7vw;width:84vw}.intro h1{font-size:11.5vw;line-height:.9}.instruction{bottom:38%}.record-nav{left:-5%;right:-9%;bottom:16%;height:32%}.record{flex-basis:38vw;width:38vw;height:38vw;margin-left:-23vw;transform:translateY(58%) rotate(var(--turn))}.record:hover,.record:focus-visible{transform:translateY(18%) rotate(0)}.record.selected{transform:translateY(4%) rotate(0)}.record-title{font-size:18px}.details{inset:112px 0 0;width:100%;padding:35px 24px 30px}.details h2{font-size:17vw}.detail-photos img,.detail-photos img:only-child{height:180px}footer{height:36px;padding:0 12px}footer span:first-child{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important}}