@font-face{
  font-family:"Mona Sans";
  src:url("fonts/MonaSans.woff2") format("woff2");
  font-weight:200 900;
  font-display:block;
}

:root{
  --bone:#efe9f7;
  --pink:#ff2e97;
  --ground:#07040b;
  --hair:rgba(239,233,247,.16);
  --e:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.16,.84,.24,1);
  /* one curve for everything that travels: the panel and the photo move as one */
  --move:cubic-bezier(.32,.72,0,1);
  --move-t:.7s;
  --m:32px;
  --sheet-w:58vw;
  --pad:48px;
  /* four sizes, nothing else */
  --s:14px;
  --b:18px;
  --l:clamp(24px,4.2cqw,32px);
  --xl:clamp(46px,9.4cqw,76px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ground);overflow:hidden;overscroll-behavior:none}
body{
  font-family:"Mona Sans",system-ui,-apple-system,sans-serif;
  font-weight:500;color:var(--bone);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:2px}
::selection{background:var(--pink);color:#0b0612}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- atmosphere: near-black ground, one small dim light pool, heavy vignette, fine static grain ---------- */
.ground,.grain{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ground{
  z-index:0;
  background:
    radial-gradient(ellipse farthest-corner at 50% 44%,rgba(2,1,3,0) 34%,rgba(2,1,3,.55) 72%,#020103 100%),
    radial-gradient(ellipse 52vw 50vh at 50% 44%,#1a0c1f 0%,rgba(26,12,31,0) 55%),
    var(--ground);
}
.grain{z-index:60;opacity:.06}
.grain i{position:absolute;inset:0;background:url(tex/fine-grain.png) 0 0/512px 512px}
@media (min-resolution:1.5dppx){ .grain i{background-size:256px 256px} }

/* ---------- hero: one still photograph of the lips lollipop, standing on the bottom edge ---------- */
.hero{
  position:fixed;left:0;top:0;width:100vw;height:100vh;height:100svh;
  z-index:1;pointer-events:none;overflow:hidden;
  transform-origin:50% 44%;
  transition:transform var(--move-t) var(--move),opacity var(--move-t) var(--move);
}
.hero img{position:absolute;left:50%;bottom:0;display:block;height:76svh;width:auto;max-width:none;transform:translateX(-50%);
  user-select:none}
/* the intro is a rack focus: the photo starts soft, the focus pulls in, overshoots a hair and settles.
   It happens on a full-frame layer centred on the candy, so the photo never travels, it only breathes. */
.lens{position:absolute;inset:0;transform-origin:50% 46%;opacity:0}
body.in .lens{animation:focus 2.8s cubic-bezier(.3,.1,.2,1) .5s both;will-change:filter,transform,opacity}
body.done .lens{will-change:auto}
/* the long waits are for the first visit only; afterwards things come back right away */
body.done .wordmark,body.done .menu li{transition-delay:0s}
@keyframes focus{
  0%{opacity:0;filter:blur(22px);transform:scale(1.05)}
  28%{opacity:1}
  64%{filter:blur(.4px);transform:scale(1.004)}
  78%{filter:blur(2.2px)}
  100%{opacity:1;filter:blur(0);transform:scale(1)}
}
body:not([data-view="home"]) .hero{opacity:.74;transform:translate3d(-29vw,0,0) scale(.94)}
@media (max-width:699px){
  .hero img{bottom:auto;top:47%;width:90vw;height:auto;transform:translate(-50%,-50%)}
}

/* ---------- chrome: wordmark and nav list ---------- */
.wordmark{position:fixed;z-index:20;left:var(--m);top:var(--m);display:block;opacity:0;transition:opacity 1.1s ease 3s}
.wordmark img{display:block;width:118px;height:auto}
body.in .wordmark{opacity:1}

.menu{
  position:fixed;z-index:20;left:var(--m);bottom:calc(var(--m) + env(safe-area-inset-bottom,0px));
  transition:opacity .5s ease;
}
.menu ul{display:block}
.menu li{opacity:0;transition:opacity 1s ease calc(3.7s + var(--n,0) * .25s)}
.menu li:nth-child(2){--n:1}
body.in .menu li{opacity:1}

.menu ul a,.snav a{
  position:relative;display:inline-block;
  font-size:var(--b);line-height:1.45;font-weight:500;letter-spacing:-.008em;
  color:rgba(239,233,247,.7);
  transition:color .35s ease;
  -webkit-touch-callout:none;touch-action:manipulation;
}
.menu ul a,.snav a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.28em;transition:color .25s ease,text-decoration-color .25s ease}
.menu ul a[aria-current],.snav a[aria-current]{color:var(--bone);text-decoration-color:currentColor}
@media (hover:hover){.menu ul a:hover,.snav a:hover{color:var(--bone)}}
.menu ul a:focus-visible,.snav a:focus-visible{color:var(--bone);outline-offset:6px}


/* ---------- the sheet ---------- */
.sheet{
  position:fixed;z-index:10;top:0;right:0;bottom:0;width:var(--sheet-w);
  background:#0a0610;
  border-left:1px solid rgba(239,233,247,.09);
  transform:translate3d(100%,0,0);visibility:hidden;
  transition:transform var(--move-t) var(--move),visibility 0s linear var(--move-t);
}
body:not([data-view="home"]) .sheet{transform:none;visibility:visible;transition:transform var(--move-t) var(--move),visibility 0s}
.sheet-top{position:absolute;z-index:2;left:0;right:0;top:0;height:0}
.snav{display:none}
.close{
  position:absolute;top:var(--m);right:var(--m);
  font-size:var(--b);line-height:1;color:rgba(239,233,247,.6);transition:color .25s ease;
  touch-action:manipulation;
}
.close:hover,.close:focus-visible{color:var(--bone)}
.scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;
  container-type:inline-size;container-name:sheet;
}
.scroll::-webkit-scrollbar{display:none}
/* content fades out under the top bar instead of colliding with Close */
.scroll.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 84px);mask-image:linear-gradient(to bottom,transparent 0,#000 84px)}

/* every panel is a spread: a top block on the wordmark line, a bottom block on the nav line */
.view{display:none;flex-direction:column;min-height:100%;padding:var(--m) var(--pad)}
.view.active{display:flex;animation:show .5s ease both;animation-delay:var(--d,0s)}
@keyframes show{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.top{max-width:34em}

a.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(239,233,247,.4);transition:text-decoration-color .2s ease,color .2s ease}
a.u:hover,a.u:focus-visible{color:var(--pink);text-decoration-color:currentColor}

.label{font-size:var(--s);line-height:1.3;font-weight:500;opacity:.5}
.title{font-size:var(--xl);line-height:.9;font-weight:600;letter-spacing:-.035em;margin-left:-.04em}
.sub{margin-top:14px;font-size:var(--b);line-height:1.45;opacity:.6}
.lineup,.lede{font-size:var(--l);line-height:1.2;font-weight:600;letter-spacing:-.02em;text-wrap:pretty}
.body{font-size:var(--b);line-height:1.5;opacity:.74;max-width:30em;text-wrap:pretty}
.body{margin-top:20px}
.lede{max-width:19em}

/* Events: one column, read top to bottom. Each night has the same parts in the same order. */
.ev .label{margin-bottom:14px}
.ev .lineup{margin-top:32px;max-width:18em}
.ev + .ev{margin-top:72px;padding-top:28px;box-shadow:inset 0 1px 0 var(--hair)}
.ev-past .title{font-size:var(--l);line-height:1.1;letter-spacing:-.02em;margin-left:0}
.ev-past .sub{margin-top:6px}
.ev-past .lineup{margin-top:18px;font-size:var(--b);line-height:1.45;font-weight:500;letter-spacing:-.008em;opacity:.85}
.flyer{display:block;width:min(100%,300px);margin-top:24px}
.flyer img{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#14101c;transition:opacity .25s ease}
.flyer:hover img{opacity:.88}

/* About: who we are */

/* wide panel: the label hangs in its own column, level with the night's title */
@container sheet (min-width:600px){
  .ev{display:grid;grid-template-columns:7.5em minmax(0,1fr);align-items:baseline}
  .ev .label{margin-bottom:0}
}

/* ---------- mobile: the sheet is a full-screen page rising from the bottom ---------- */
@media (max-width:760px){
  :root{--m:28px;--pad:22px}
  .menu ul a,.snav a{font-size:16px}
  body:not([data-view="home"]) .hero{transform:scale(.96)}
  body:not([data-view="home"]) .menu,body:not([data-view="home"]) .wordmark{opacity:0;pointer-events:none;transition:opacity .35s ease}
  .sheet{width:100%;border-left:0;border-top:1px solid rgba(239,233,247,.08);transform:translate3d(0,100%,0);padding-top:env(safe-area-inset-top,0px)}
  .sheet-top{position:relative;z-index:2;height:auto;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad) 6px}
  .snav{display:flex;gap:22px}
  .close{position:static;font-size:16px;line-height:1.45}
  .scroll{top:calc(58px + env(safe-area-inset-top,0px))}
  .scroll.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}
  .view{padding:28px var(--pad) calc(var(--m) + env(safe-area-inset-bottom,0px))}
  .view.active{display:flex}
}

@media (min-width:761px) and (max-width:1000px){
  :root{--sheet-w:72vw;--pad:44px}
}

@media (prefers-reduced-motion:reduce){
  .lens{opacity:1;animation:none !important;filter:none;transform:none}
  *,*::before,*::after{transition-duration:0s !important;transition-delay:0s !important;animation-duration:0s !important;animation-delay:0s !important}
}