:root{--vhs-ink:#f5f0df;--vhs-dark:#090807;--vhs-wood:#3c2417;--vhs-wood2:#1d120d;--vhs-gold:#d9b86b}
*{box-sizing:border-box}.vhs-library{position:relative;min-height:100vh;overflow:hidden;color:var(--vhs-ink);background:radial-gradient(circle at 50% 0,#281d2c 0,#100d14 38%,#050506 100%);font-family:Arial,Helvetica,sans-serif}.vhs-library:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.2px);background-size:5px 5px;mix-blend-mode:screen}.vhs-library__scanlines{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px)}
.vhs-library__masthead{position:relative;z-index:2;width:min(1500px,94vw);margin:auto;padding:42px 24px 30px}.vhs-library__eyebrow{font-weight:900;letter-spacing:.28em;font-size:clamp(.68rem,1vw,.9rem);margin-bottom:14px;color:#fff4b5}.vhs-library__title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}.vhs-library h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(3.5rem,8vw,8.6rem);line-height:.77;letter-spacing:.01em;margin:0;text-transform:uppercase;text-shadow:6px 6px 0 #000}.vhs-library h1 span{-webkit-text-stroke:2px var(--vhs-ink);color:transparent}.vhs-library__masthead p{max-width:680px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.vhs-library__counter{flex:0 0 auto;border:3px solid var(--vhs-ink);padding:12px 18px;transform:rotate(2deg);box-shadow:5px 5px 0 #000;text-align:center}.vhs-library__counter strong{display:block;font:3rem/1 Impact,sans-serif}.vhs-library__counter span{font-size:.72rem;font-weight:900;letter-spacing:.16em}
.vhs-bookcase{position:relative;z-index:1;width:min(1560px,96vw);margin:0 auto 50px;padding:42px 34px 70px;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:0 7px;align-items:end;perspective:1700px;background:linear-gradient(90deg,#24140d,#5c3823 4%,#2e1a11 11%,#6b422a 22%,#28160e 38%,#674028 52%,#2e1b12 68%,#5a351f 84%,#21120c);border:16px solid #1c100b;border-top-width:22px;border-bottom-width:28px;box-shadow:inset 0 0 0 5px #7b5032,inset 0 0 38px #000,0 35px 70px #000}
.vhs-bookcase:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 335px,#120a07 335px 346px,#704728 346px 358px,#25130b 358px 376px);z-index:0}.vhs-slot{position:relative;z-index:1;height:334px;display:flex;align-items:flex-end;justify-content:center;animation:vhs-arrive .42s both;animation-delay:var(--delay);transform-style:preserve-3d}.vhs-box{position:relative;width:70px;height:312px;padding:0;border:0;background:none;color:inherit;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1),width .6s,height .6s;transform-origin:center bottom}.vhs-slot:nth-child(5n+2) .vhs-box{height:305px}.vhs-slot:nth-child(7n+3) .vhs-box{height:317px}.vhs-box__spine,.vhs-box__front{position:absolute;inset:0;backface-visibility:hidden;border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),8px 9px 12px rgba(0,0,0,.65)}.vhs-box__spine{display:flex;flex-direction:column;align-items:center;padding:13px 7px 9px;background:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.12) 9%,transparent 19% 74%,rgba(255,255,255,.10) 84%,rgba(0,0,0,.34) 100%),radial-gradient(ellipse at 28% 11%,rgba(255,255,255,.16) 0 4%,transparent 5% 100%),radial-gradient(ellipse at 72% 67%,rgba(0,0,0,.20) 0 5%,transparent 6% 100%),radial-gradient(ellipse at 38% 88%,rgba(255,255,255,.08) 0 3%,transparent 4% 100%),repeating-linear-gradient(173deg,transparent 0 18px,rgba(0,0,0,.08) 19px 20px,transparent 21px 39px),var(--spine);overflow:hidden;transform-origin:center center;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .22s ease;box-shadow:inset 4px 0 8px rgba(0,0,0,.28),inset -3px 0 6px rgba(255,255,255,.08)}.vhs-box__spine:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.34);pointer-events:none;z-index:3;clip-path:polygon(0 0,88% 0,92% 2%,100% 1%,100% 89%,96% 91%,100% 94%,98% 100%,11% 100%,8% 98%,0 99%)}.vhs-box__spine:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.78;background:linear-gradient(96deg,transparent 0 7%,rgba(255,255,255,.12) 7.5% 8%,transparent 8.5% 100%),linear-gradient(81deg,transparent 0 43%,rgba(0,0,0,.22) 43.5% 44.5%,transparent 45% 100%),radial-gradient(ellipse at 5% 19%,rgba(15,10,7,.48) 0 2%,transparent 2.8%),radial-gradient(ellipse at 96% 42%,rgba(245,238,218,.24) 0 2.5%,transparent 3.4%),radial-gradient(ellipse at 12% 82%,rgba(15,10,7,.38) 0 3%,transparent 4%),radial-gradient(ellipse at 89% 93%,rgba(245,238,218,.20) 0 2.4%,transparent 3.2%),repeating-linear-gradient(4deg,transparent 0 22px,rgba(255,255,255,.045) 23px,transparent 24px 41px);mix-blend-mode:multiply}.vhs-box__spine>*{position:relative;z-index:2}.vhs-box__format{font-size:.48rem;font-weight:900;letter-spacing:.13em;white-space:nowrap;transform:rotate(180deg);writing-mode:vertical-rl}.vhs-box__spine strong{flex:1;min-height:0;margin:8px 0;font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(1.15rem,1.45vw,1.52rem);line-height:.92;letter-spacing:.03em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px 0 #000}.vhs-box__date{font-size:.62rem;font-weight:900}.vhs-box__mark{margin-top:5px;padding:2px 4px;border:1px solid currentColor;font:700 .58rem/1 monospace}.vhs-box__front{width:218px;height:326px;inset:auto;left:50%;bottom:0;transform:translateX(-50%) rotateY(88deg);transform-origin:center center;opacity:0;background:#181818;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .22s ease}.vhs-box__cover-art{position:absolute;inset:0;background:var(--vhs-cover,linear-gradient(135deg,#fb2a91,#24d7df 48%,#ffe246)) center/cover no-repeat;filter:saturate(1.05) contrast(1.04)}.vhs-box__cover-art:after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 20% 20%,transparent 0 2px,rgba(0,0,0,.16) 2.8px 3.4px);mix-blend-mode:multiply}.vhs-box__cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 45%,rgba(0,0,0,.88))}.vhs-box__front-brand,.vhs-box__front-format,.vhs-box__front strong,.vhs-box__front-date,.vhs-box__play{position:absolute;left:13px;right:13px;z-index:2;text-align:left;text-shadow:2px 2px 0 #000}.vhs-box__front-brand{top:12px;font-size:.62rem;font-weight:900;letter-spacing:.14em}.vhs-box__front-format{top:29px;font:.57rem/1 monospace;letter-spacing:.08em}.vhs-box__front strong{bottom:57px;font:2rem/.9 Impact,sans-serif;text-transform:uppercase}.vhs-box__front-date{bottom:37px;font-size:.63rem;font-weight:900;letter-spacing:.12em}.vhs-box__play{bottom:13px;background:#000;padding:5px 6px;font-size:.55rem;font-weight:900;letter-spacing:.08em}
.vhs-slot.is-open{z-index:9}.vhs-slot.is-open .vhs-box{transform:translateY(-35px) translateZ(120px)}.vhs-slot.is-open .vhs-box__spine{transform:rotateY(-88deg);opacity:.16}.vhs-slot.is-open .vhs-box__front{transform:translateX(-50%) rotateY(0deg);opacity:1}.vhs-slot:not(.is-open) .vhs-box:hover{transform:translateY(-14px) translateZ(24px)}.vhs-slot__open{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);opacity:0;pointer-events:none}.vhs-load{position:relative;z-index:3;text-align:center;margin:-12px auto 55px}.vhs-load button{border:3px solid #f6eecf;background:#0b0a0d;color:#f6eecf;padding:14px 24px;box-shadow:6px 6px 0 #000;cursor:pointer;text-transform:uppercase}.vhs-load strong,.vhs-load span{display:block}.vhs-load span{margin-top:5px;font-size:.65rem;letter-spacing:.13em}.vhs-empty{width:min(900px,90vw);margin:60px auto;padding:70px;text-align:center;border:8px solid #3c2417;background:#0a090b;box-shadow:18px 18px 0 #000}.vhs-empty>div{font:5rem/1 Impact,sans-serif}.vhs-library__footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;width:min(1500px,92vw);margin:auto;padding:24px 0 35px;border-top:1px solid rgba(255,255,255,.25);font:700 .72rem/1 monospace;letter-spacing:.12em}
@keyframes vhs-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-width:760px){.vhs-library__masthead{padding:28px 14px 22px}.vhs-library__title-row{display:block}.vhs-library__counter{display:inline-block;margin-top:18px}.vhs-bookcase{width:100%;border-left-width:8px;border-right-width:8px;padding:30px 12px 65px;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:0 4px}.vhs-slot{height:280px}.vhs-box{width:56px;height:260px}.vhs-slot:nth-child(5n+2) .vhs-box,.vhs-slot:nth-child(7n+3) .vhs-box{height:255px}.vhs-box__spine strong{font-size:1.05rem}.vhs-slot.is-open .vhs-box{transform:translateY(-28px) translateZ(80px)}.vhs-box__front{width:188px;height:282px}.vhs-box__front strong{font-size:1.7rem}.vhs-bookcase:before{background:repeating-linear-gradient(to bottom,transparent 0 280px,#120a07 280px 291px,#704728 291px 303px,#25130b 303px 320px)}.vhs-library__footer{padding-inline:15px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.vhs-slot,.vhs-box{animation:none;transition:none}}