@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url(../fonts/dm-mono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url(../fonts/dm-mono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Pixelify Sans';src:url(../fonts/pixelify-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
a:focus-visible{outline:3px solid #1800ad;outline-offset:3px}
.navlink{transition:background .2s,color .2s}
.navlink:hover{background:#141414;color:#F6F1E7}
.btn{transition:transform .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.poster{transition:transform .3s ease}
.poster:hover{transform:translateY(-8px) rotate(-.8deg)}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.float{transform-box:fill-box;transform-origin:center;animation:float 3.5s ease-in-out infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
.panelin{animation:panelIn .22s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rowbtn .tog{transition:transform .2s}
.rowbtn:hover .tog{transform:rotate(90deg)}
.deck{position:absolute;top:12%;height:76%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;transform-origin:bottom center;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.poster>div[aria-hidden="true"]{flex:none!important;height:60%!important;margin-top:auto}
.deck1{left:29%;transform:translateX(-50%) rotate(-10deg)}
.deck2{left:50%;z-index:2;transform:translateX(-50%) rotate(0deg)}
.deck3{left:71%;transform:translateX(-50%) rotate(10deg)}
.poster:hover .deck1{transform:translateX(-64%) rotate(-15deg)}
.poster:hover .deck2{transform:translateX(-50%) translateY(-5%)}
.poster:hover .deck3{transform:translateX(-36%) rotate(15deg)}
.fadein{animation:fadeIn .25s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.popout{transform-origin:bottom center;animation:popOut .65s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes popOut{0%{opacity:0;transform:translateY(60px) scale(.6) rotate(-6deg)}55%{opacity:1;transform:translateY(-10px) scale(1.04) rotate(2.5deg)}75%{transform:translateY(0) scale(.99) rotate(-1deg)}100%{opacity:1;transform:none}}
.closelite,.igl{transition:background .2s,color .2s}
.closelite:hover,.igl:hover{background:#F6F1E7;color:#141414}
.slide2{animation:slide2 4.5s ease-in-out infinite}
@keyframes slide2{0%,100%{transform:translateX(0)}50%{transform:translateX(28px)}}
.slide{animation:slide 3s ease-in-out infinite}
@keyframes slide{0%,100%{transform:translateX(0)}50%{transform:translateX(44px)}}
.wob{transform-box:fill-box;transform-origin:50% 100%;animation:wob 2.2s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.hue{animation:hue 5s linear infinite}
@keyframes hue{0%,100%{fill:#cf0210}33%{fill:#f68139}66%{fill:#e10a71}}
.hue2{animation:hue2 4s linear infinite}
@keyframes hue2{0%,100%{fill:#f68139}33%{fill:#0d93ab}66%{fill:#1800ad}}
@media (prefers-reduced-motion:reduce){.slide,.slide2,.wob,.pulse,.hue,.hue2,.spin,.float,.poster,.btn,.panelin,.rowbtn .tog,.deck,.fadein,.popout,.closelite,.igl{animation:none;transition:none}}

.poster{container-type:inline-size;--t:clamp(30px,3.4vw,44px)}
@media (max-width:640px){
.poster{aspect-ratio:4/5!important;--t:min(15cqw,56px)}
.poster>div[aria-hidden="true"]{height:64%!important}
}