/* Layout concept: the album's two colours, dark blue and signal yellow, bound along a left rail. A fixed Three.js stage holds the video, the record, the photographs and the phone; type sits on top. taste-skill-ignore */
:root{color-scheme:dark;--midnight:#070e22;--slate:#2c4160;--yellow:#fdea03;
--sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--rail:68px;--m:clamp(16px,2.4vw,36px);--body:clamp(1.0625rem,1rem + .25vw,1.1875rem);--small:.875rem;--lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);--head:clamp(2.25rem,1.2rem + 4vw,5rem);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;color:var(--yellow);font:500 var(--body)/1.4 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}ul,ol{list-style:none}img{display:block;max-width:100%;height:auto}a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:30;background:var(--midnight);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0 22px;color:var(--yellow)}
.menu-btn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:7px;justify-items:center;padding:10px 6px;font-weight:800;font-size:.8125rem;text-transform:uppercase}
.menu-btn i{display:block;width:30px;height:3px;background:currentColor;transition:transform .25s var(--ease)}
.menu-btn:hover i:first-child{transform:translateX(-4px)}.menu-btn:hover i:nth-child(2){transform:translateX(4px)}.menu-btn:focus-visible{outline:3px solid var(--yellow)}
.rail .here{writing-mode:vertical-rl;rotate:180deg;font-weight:800;font-size:.875rem;text-transform:uppercase;text-decoration:none}
main{position:relative;z-index:1;margin-left:var(--rail);transition:opacity .22s linear}
html.leaving main,html.leaving .foot{opacity:0}.foot{transition:opacity .22s linear}
.ch{position:relative;background:var(--paper)}html.gl main .ch{background:none}
.hold{position:sticky;top:0;min-height:100svh;padding:var(--m);display:flex;flex-direction:column;color:var(--ink);overflow:clip}
html.gl main .hold{opacity:0;transition:opacity .14s linear;pointer-events:none}html.gl main .ch.on .hold{opacity:1;pointer-events:auto}
.free{height:auto!important}.free .hold{position:relative;top:0}
.haspic .hold{padding-right:calc(var(--pr,0%) + var(--m));padding-left:calc(var(--pl,0%) + var(--m))}
.poster{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.84;letter-spacing:-.008em}
.fit{display:block;white-space:nowrap;width:max-content;font-size:18vw}.fit.stack{display:none}
.head{font-weight:800;font-size:var(--head);font-variation-settings:"wdth" 72;line-height:.94;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:var(--lead);line-height:1.25}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:4px;background:var(--ink);color:var(--paper);font-weight:800;text-decoration:none;transition:transform .14s var(--ease),background-color .18s ease,color .18s ease;border:2px solid var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}.btn:active{transform:scale(.97)}
.btn.big{min-height:68px;padding:0 44px;font-size:clamp(1.125rem,1rem + .5vw,1.5rem)}
.say{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start;max-width:36ch}.spacer{flex:1;min-height:12px}
.fb{display:none}html:not(.gl) .fb{display:block;width:100%;max-height:70svh;object-fit:cover;margin-top:24px}
/* album */
.album{--s:min(49vh,calc((100vw - var(--rail))*.29))}.album .hold{justify-content:center;padding-left:calc((100vw - var(--rail) - var(--s)*2.78)/2 + var(--s)*1.69);padding-right:0}
.album .say{max-width:none;width:calc(var(--s)*1.09);gap:22px}.album h2{width:100%}
.sig{position:absolute;left:50%;top:clamp(16px,3svh,32px);translate:-50% 0;font-family:"Mrs Saint Delafield","Snell Roundhand",cursive;font-size:clamp(2.25rem,1.5rem + 2.55vw,4.125rem);line-height:1.1;padding:0 .3em;white-space:nowrap;text-decoration:none;-webkit-text-stroke:.018em currentColor;color:var(--yellow)}
html.gl .album .btn{opacity:var(--rv,0)}
.motion{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
html:not(.gl) .motion{position:static;width:100%;height:auto;opacity:1;margin-top:24px}
/* phone */
.ig .hold{justify-content:center;align-items:center;width:50%;gap:clamp(28px,5svh,52px)}.ig h2{width:min(100%,560px)}.ig .fit{margin-inline:auto}
.socials{display:grid;max-width:560px;width:100%}
.socials a{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:.28em 0;border-top:2px solid var(--yellow);text-decoration:none;font-weight:800;font-size:clamp(1.25rem,min(1rem + 1.1vw,3.4svh),2rem);line-height:1.2;font-variation-settings:"wdth" 72;text-transform:uppercase;transition:padding .25s var(--ease),background-color .18s ease,color .18s ease}
.socials li:last-child a{border-bottom:2px solid var(--yellow)}.socials b{font-weight:800}.socials svg{flex:none;width:.8em;height:.8em;transition:transform .25s var(--ease)}
.socials a:hover,.socials a:focus-visible{background:var(--yellow);color:var(--midnight);padding-inline:.45em}
#igView{position:fixed;z-index:3;display:none;overflow:hidden;border-radius:9%/4.2%;background:var(--midnight)}#igView.open{display:block}.igbar{height:7%;display:flex;align-items:flex-end;justify-content:space-between;padding:0 7% 2%;color:var(--yellow);font-weight:800;font-size:.875rem}.igback{all:unset;cursor:pointer}.igback:focus-visible,.igopen:focus-visible{outline:2px solid var(--yellow)}#igView iframe{display:none;border:0;background:#fff;transform-origin:0 0}#igView.isembed iframe{display:block}.igstage{position:relative;height:93%;overflow:hidden;background:var(--midnight)}#igView video{display:none;width:100%;height:100%;object-fit:cover;cursor:pointer}#igView.isvideo video{display:block}.igplay{all:unset;display:none;position:absolute;left:50%;top:50%;translate:-50% -50%;width:88px;height:88px;border-radius:50%;place-items:center;cursor:pointer;background:var(--midnight);color:var(--yellow)}#igView.isvideo.paused .igplay{display:grid}.igline{display:none;position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(253,234,3,.25)}.igline i{display:block;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%}#igView.isvideo .igline{display:block}.igsound{all:unset;cursor:pointer}.igsound:focus-visible{outline:2px solid var(--yellow)}#igView:not(.isvideo) .igsound{display:none}
#phoneHit{position:fixed;z-index:2;display:none;touch-action:pan-y;cursor:grab;border-radius:9%}#phoneHit:active{cursor:grabbing}
html.gl .posts{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html:not(.gl) .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px}.posts img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* the way down */
.next{all:unset;box-sizing:border-box;position:fixed;z-index:10;left:calc(var(--rail) + (100vw - var(--rail))/2);bottom:14px;translate:-50% 0;width:72px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--ink,var(--yellow));transition:transform .2s var(--ease),color .2s linear}.next svg{display:block;width:54px;height:auto}
.next.up{bottom:auto;top:14px}.next.up svg{rotate:180deg}.next.up:hover{transform:translateY(-4px)}.next.up:active{transform:translateY(-6px) scale(.96)}.next[hidden]{display:none}.next:hover{transform:translateY(4px)}.next:active{transform:translateY(6px) scale(.96)}.next:focus-visible{outline:3px solid var(--ink,var(--yellow));outline-offset:3px}
.next svg{animation:nudge 2.4s var(--ease) infinite}@keyframes nudge{0%,70%,100%{transform:none}85%{transform:translateY(4px)}}
html.navopen .next,html.leaving .next{display:none}
/* meet: the collage */
.meet .hold{align-items:center;justify-content:center;padding:0}.collage{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;overflow:hidden}
.crow{display:flex;gap:8px;width:max-content;height:100%;animation:slide var(--d) linear infinite;will-change:transform}.crow.rev{animation-direction:reverse}.crow img{height:100%;width:auto;max-width:none;flex:none;border-radius:3px}
@keyframes slide{to{transform:translateX(calc(-50% - 4px))}}.ch:not(.on) .crow{animation-play-state:paused}
.collage::after{content:"";position:fixed;inset:0;background:rgba(7,14,34,.6)}
.meet h2{position:relative;z-index:1}.meetlink{display:block;padding:.16em .3em .12em;border-radius:6px;background:var(--yellow);color:var(--midnight);text-decoration:none;white-space:nowrap;font-size:clamp(2.25rem,.75rem + 6vw,6.75rem);transition:background-color .2s linear,color .2s linear,transform .2s var(--ease)}.meetlink:hover{background:var(--midnight);color:var(--yellow)}.meetlink:active{transform:scale(.98)}
/* booking */
.bookit .say{margin-top:22px}.bookit .hold{padding-bottom:var(--m)}
/* tour */
.tourpage .hold,.tourpv .hold{padding-block:clamp(56px,10svh,110px) clamp(56px,7vw,96px)}
.shows{max-width:1100px;width:100%;margin:0 auto}.shows li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;gap:8px 28px;align-items:center;padding:18px 0;border-top:2px solid currentColor}.shows li:last-child{border-bottom:2px solid currentColor}
.sdate{font-weight:800;text-transform:uppercase;font-size:var(--lead);font-variation-settings:"wdth" 72}.swhere{display:grid}.swhere b{font-weight:800;font-size:var(--lead);line-height:1.15}.snote{font-weight:800}
.tourempty{display:grid;justify-items:center;gap:22px;text-align:center}.tourempty[hidden]{display:none}
/* shop */
.shopsec .hold{padding-block:clamp(56px,10svh,110px) clamp(84px,7vw,110px)}
.shoph{text-align:center;font-size:clamp(3rem,11.5vw,11rem);line-height:.86;margin-bottom:clamp(36px,6svh,72px)}
.cat+.cat{margin-top:clamp(56px,7vw,96px)}.cat h2{font-weight:800;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-variation-settings:"wdth" 80;margin-bottom:clamp(20px,3vw,36px)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2.2vw,32px)}
.prod{display:block;text-align:center;text-decoration:none}.prod .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1;margin-bottom:14px;padding:5%}.prod img{max-width:100%;max-height:100%;width:auto;height:auto;transition:transform .5s var(--ease)}
.prod:hover img{transform:scale(1.05) rotate(-1.5deg)}.prod:hover h3{text-decoration:underline;text-underline-offset:.18em}
.prod h3{font-weight:700;font-size:1rem;line-height:1.3;text-wrap:balance}.prod p{font-size:1rem;margin-top:4px;font-variant-numeric:tabular-nums}.prod small{display:block;font-size:var(--small);margin-top:4px}
.shopcta{margin-top:clamp(48px,6vw,80px);text-align:center}
.homeshop .hold{height:100svh;min-height:0;justify-content:flex-start;align-items:center;padding-block:clamp(64px,8.6svh,80px) clamp(44px,6.4svh,60px)}
.homeshop .shoph{font-size:min(7.7svh,5.6vw);margin-bottom:clamp(14px,2.8svh,28px)}
.homeshop .shopcta{position:absolute;top:clamp(14px,3svh,32px);right:var(--m);margin:0}
.homeshop .grid{flex:1 1 0;width:min(83%,calc(100svh*1.3));min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(16px,4svh,40px) clamp(28px,4.8vw,76px)}.homeshop .grid li{min-height:0}
.homeshop .prod{height:100%;display:flex;flex-direction:column}.homeshop .prod .ph{position:relative;flex:1;min-height:0;aspect-ratio:auto;margin-bottom:6px;padding:0}.homeshop .prod img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.homeshop .prod h3,.homeshop .prod p{font-size:clamp(.75rem,1.7svh,1rem);margin-top:0}.homeshop .prod small{display:none}
/* about */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3svh,30px);max-width:none;width:100%;margin:auto 0;padding-block:clamp(40px,8svh,96px)}
.story h2{width:100%}.story p{font-size:var(--lead);line-height:1.34;max-width:34em}.story p.lead{line-height:1.2}.story b{font-weight:800}.facts{list-style:disc;padding-left:1.1em;display:grid;gap:.55em;font-size:var(--lead);line-height:1.3}
.haspic .say.story{padding-block:clamp(16px,3svh,26px) 0;margin:0}.haspic .say.story p{font-size:var(--body)}.haspic .say.story p.lead{font-size:var(--lead)}
.asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:48px;max-width:760px}.asks h3{font-weight:800;margin-bottom:4px}
/* footer */
.foot{position:relative;z-index:1;margin-left:var(--rail);background:var(--midnight);color:var(--yellow);padding:clamp(28px,4vw,56px) var(--m) var(--m);display:grid;grid-template-columns:minmax(0,1.4fr) auto auto auto;gap:24px clamp(28px,5vw,80px)}
.foot .creed h2{font-size:var(--lead);font-weight:800;line-height:1.15;text-transform:none;margin-bottom:.35em;max-width:18em}.creed p{max-width:26em}.foot .fl h2{font-size:var(--small);font-weight:800;text-transform:uppercase;margin-bottom:8px}.foot li a{font-weight:600;min-height:32px;display:inline-flex;align-items:center;text-decoration:none}.foot li a:hover{text-decoration:underline}.foot small{grid-column:1/-1;font-size:var(--small)}
/* full page navigation: the pages themselves, in a column beside the list */
.nav{position:fixed;inset:0;z-index:20;visibility:hidden;pointer-events:none;transition:visibility 0s .38s}.nav.open{visibility:visible;pointer-events:auto;transition:none}
.view{position:absolute;inset:0;background:var(--midnight);opacity:0;overflow:hidden;transition:opacity .22s linear}.nav.open .view{opacity:1}
.strip{position:absolute;left:var(--rail);top:0;width:calc(100vw - var(--rail));transform-origin:0 0;transition:transform .58s cubic-bezier(.76,0,.24,1)}
.pv{position:absolute;left:0;width:100%;overflow:hidden;background:var(--paper);cursor:pointer}
.pv .hold{position:relative;top:0;height:100%;min-height:100%;opacity:1;pointer-events:none}
.pvi{position:absolute;top:0;height:100%!important;max-width:none;object-fit:cover}.pvscrim{position:absolute;inset:0;background:rgba(7,14,34,.6)}
.pvsleeve{position:absolute;max-width:none}.pvdisc{position:absolute;background-size:100% 100%;animation:spin 7.4s linear infinite}@keyframes spin{to{transform:rotate(-360deg)}}
.nav .panel{position:absolute;left:var(--rail);top:0;bottom:0;width:min(40vw,620px);background:var(--midnight);color:var(--yellow);padding:clamp(16px,3svh,28px) clamp(20px,3vw,44px);display:flex;flex-direction:column;transform:translateX(-101%);transition:transform .38s cubic-bezier(.76,0,.24,1)}
.nav.open .panel{transform:none}.nav.open.going .panel{transform:translateX(-101%)}
.nav .close{all:unset;cursor:pointer;font-weight:800;text-transform:uppercase;font-size:var(--small);min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}.nav .close:hover{text-decoration:underline}.nav .close:focus-visible{outline:3px solid var(--yellow)}
.nav ol{flex:1;display:flex;flex-direction:column;justify-content:center}
.nav ol a{display:block;width:max-content;white-space:nowrap;font-weight:900;text-transform:uppercase;text-decoration:none;font-size:clamp(3rem,min(7vw,16svh),7.5rem);line-height:.94;font-variation-settings:"wdth" 62;transition:font-variation-settings .32s var(--ease)}
.nav ol a:hover,.nav ol a:focus-visible,.nav ol a.hot{font-variation-settings:"wdth" 92}.nav ol a:focus-visible{outline:none}
.nav ol a[aria-current]::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:currentColor;margin-left:.12em;vertical-align:.55em}
html.navopen{overflow:hidden}
@media (max-width:860px){
:root{--rail:0px}.rail{right:0;bottom:auto;width:auto;height:58px;flex-direction:row;justify-content:flex-end;padding:0 16px}.rail .here{display:none}
.menu-btn{grid-auto-flow:column;align-items:center;gap:6px}.menu-btn i{width:18px}.menu-btn i+i{display:none}
main{padding-top:58px}.hold{min-height:calc(100svh - 58px);top:58px;padding:16px 16px 76px}.free .hold{padding-top:16px}
.fit.wide{display:none}.fit.stack{display:block}.igbar{font-size:.6875rem;padding-inline:9%}
.haspic .hold{padding:calc(var(--ph)*100svh + 16px) 16px 76px}
.album{--s:min(50vw,27svh)}.album .hold{padding:calc(var(--s) + 32px) 16px 76px;justify-content:center}.album .say{width:100%;justify-items:center;gap:14px}.album h2{width:90%}.album .fit{margin-inline:auto}
.homeshop .hold{height:calc(100svh - 58px);padding:10px 16px 50px;align-items:stretch;justify-content:flex-start}.homeshop .shoph{text-align:left;font-size:clamp(2rem,9svh,3rem)}.homeshop .shopcta{top:12px;right:16px}.homeshop .shopcta .btn{min-height:40px;padding:0 16px;font-size:.875rem}.homeshop .grid{flex:1;width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px 12px}.homeshop .prod h3{line-height:1.15}
.next{width:60px;height:36px;bottom:12px}.next svg{width:45px}.next.up{top:11px;z-index:31;color:var(--yellow)}.meet .hold{padding:0}.bookit .hold{padding-bottom:16px}.shows li{grid-template-columns:minmax(0,1fr);gap:8px}.crow img{border-radius:2px}
.ig .hold{width:100%;gap:12px;justify-content:space-between;align-items:stretch}.ig h2{width:100%}.socials{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;max-width:none}.socials a{font-size:1.0625rem;padding:.42em 0}.socials li:nth-last-child(2) a{border-bottom:2px solid var(--yellow)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}.creed{grid-column:1/-1}.shopsec .hold{padding-bottom:84px}
.strip{display:none}.nav .panel{left:0;top:58px;width:100%;padding:12px 16px}.nav ol a{font-size:min(20vw,11.5svh)}
}
html:not(.gl) .ch{height:auto!important}html:not(.gl) main .hold{position:relative}html:not(.gl) .haspic .hold{padding:var(--m)}html:not(.gl) .album .hold{padding:var(--m)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}