:root{--navy:#000881;--red:red;--anim:.3s;--drawer:.38s;--ease-out:cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--navy);scroll-behavior:smooth}body{background-color:var(--navy);overflow-anchor:none;-webkit-tap-highlight-color:transparent;overflow-x:hidden}img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:auto;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.press{transition:transform .2s,opacity .2s;display:block}@media (hover:hover){.press:hover{opacity:.9;transform:scale(1.05)}}.press:active{opacity:.8;transition-duration:80ms;transform:scale(.95)}.press:focus-visible,.close-button:focus-visible,.cover-link:focus-visible{outline:2px dashed var(--red);outline-offset:6px;border-radius:4px}.header{justify-content:center;align-items:center;gap:clamp(.75rem,3vw,2rem);padding:1rem .75rem;display:flex}.header-side{width:clamp(90px,15vw,160px)}.header-home{width:clamp(120px,34vw,320px)}.page{min-height:100vh;position:relative;overflow:hidden}.doodles{z-index:0;pointer-events:none;position:absolute;inset:0}@keyframes appear{0%{opacity:0}}.doodle{height:auto;transition:opacity .3s;animation:.4s both appear;position:absolute}.doodle.is-hidden{opacity:0}.header,.layout,.footer{z-index:1;position:relative}@keyframes fade-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}.layout{grid-template-columns:1fr;justify-items:center;gap:3.5rem;padding:1.5rem 1rem 0;display:grid}.stage{flex-direction:column;align-items:center;width:min(84vw,500px);display:flex}.stage-body{width:100%}.stage-cover,.stage-video{flex-direction:column;align-items:center;display:flex}.stage-cover{animation:fade-in var(--anim) ease both;transition:opacity var(--anim) ease, visibility 0s}.stage-cover.is-hidden{opacity:0;visibility:hidden;transition:opacity var(--anim) ease, visibility 0s linear var(--anim)}.stage-video{animation:fade-in var(--anim) ease both}.cover-link{width:100%;transition:transform .2s;display:block}@media (hover:hover){.cover-link:hover{transform:scale(1.03)}}.video-frame{aspect-ratio:16/9;width:100%}.video-frame iframe{border:0;width:100%;height:100%}.close-button{background:var(--navy);width:44px;height:44px;color:var(--red);border-radius:50%;justify-content:center;align-items:center;margin-top:20px;font-size:1.5rem;transition:transform .2s,opacity .2s;display:flex;box-shadow:0 4px 10px #00000073}.close-button:hover{transform:scale(1.08)}.close-button:active{transform:scale(.92)}.arrow-slot{position:relative}.arrow-slot--cover{aspect-ratio:401/633;width:15%;max-width:75px;margin-bottom:10px}.arrow-slot--above,.arrow-slot--below{width:100%;height:0;transition:height var(--drawer) var(--ease-out)}.arrow-slot--above.is-open,.arrow-slot--below.is-open{height:var(--slot-h)}.arrow-slot--above{--arrow-w:54px;--slot-h:96px}.arrow-slot--below{--arrow-w:34px;--slot-h:66px}.arrow-flyer{width:var(--arrow-w);margin-left:calc(var(--arrow-w) / -2);z-index:5;transform-origin:0 0;position:absolute;left:50%}.arrow-slot--cover .arrow-flyer{width:100%;margin-left:0;inset:0}.arrow-slot--above .arrow-flyer{bottom:6px}.arrow-slot--below .arrow-flyer{top:8px}.arrow-link{display:block}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}@media (hover:hover) and (pointer:fine){.arrow-flyer img{animation:1.8s ease-in-out infinite bob}}.tracklist{flex-direction:column;align-items:center;gap:3.5rem;width:min(80vw,460px);display:flex}.track{flex-direction:column;align-items:center;width:100%;scroll-margin:1rem;display:flex}.track-button{z-index:2;width:calc(100% * var(--title-scale,1));position:relative}.tracklist.has-playing .track-button:not(.is-playing){opacity:.55}.tracklist.has-playing .track-button:not(.is-playing):hover{opacity:.9}.track-video{width:min(92vw,560px);transition:grid-template-rows var(--drawer) var(--ease-out);grid-template-rows:0fr;display:grid}.track-video.is-open{grid-template-rows:1fr}.track-video-inner{min-height:0;overflow:hidden}.track-video-content{transform-origin:top;opacity:0;transition:transform var(--drawer) var(--ease-out), opacity var(--drawer) ease;flex-direction:column;align-items:center;padding-bottom:14px;display:flex;transform:translateY(-28px)scale(.94)}.track-video.is-open .track-video-content{opacity:1;transform:none}@media (min-width:900px){.layout{grid-template-columns:auto auto;justify-content:center;align-items:start;gap:clamp(3rem,7vw,7rem);padding-top:2rem}.arrow-slot--cover{width:18%;max-width:92px}.stage{z-index:3;width:min(44vw,540px,100vh - 250px);min-width:340px;position:sticky;top:1.5rem}.stage-body{display:grid}.stage-cover,.stage-video{grid-area:1/1}.stage-video{align-self:center}.tracklist{gap:2.25rem;width:min(30vw,360px);padding-top:2.5rem}}.footer{justify-content:center;padding:5rem 0 3rem;display:flex}.footer-link{flex-direction:column;align-items:center;gap:10px;display:flex}.footer-face{width:160px}.footer-name{width:min(75vw,300px)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}
