/* Landing: one screen. Positions are driven per frame by landing.js. */
html.js,html.js body.landing{height:100%;overflow:hidden;overscroll-behavior:none}

.stage{position:relative;width:100%;height:100svh;overflow:hidden}

.landing .logo{position:absolute;left:0;top:0;width:200px}
.landing .logo .wm{clip-path:inset(0 0 0 0)}

.landing .toggle{position:absolute;right:var(--m);top:var(--m)}

.cue{position:absolute;left:50%;bottom:calc(var(--m) + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.cue__label{font-size:var(--small);line-height:1;letter-spacing:.01em;color:var(--sm)}
.cue__track{position:relative;display:block;width:1px;height:44px;background:var(--track);overflow:hidden}
.cue__fill{position:absolute;left:0;width:1px;top:0;height:0;background:var(--fg)}

.menu{position:absolute;left:0;right:0;top:54%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.menu__w{overflow:hidden;padding:0 .06em}
.menu a{display:flex;font-weight:400;letter-spacing:-.035em;line-height:1.08;color:var(--fg);transition:opacity .4s ease}
.menu .l{position:relative;display:block;overflow:hidden}
.menu .l>span{display:block;transition:transform .55s cubic-bezier(.45,0,.55,1);transition-delay:calc(var(--j) * 18ms)}
.menu .l>span>span{position:absolute;left:0;top:100%}
.menu a.is-hover .l>span{transform:translateY(-100%)}

.irony{margin:0;padding:0 var(--m);font-size:var(--small);line-height:1.5;letter-spacing:.01em;color:var(--sm);text-align:center;text-wrap:pretty}

.corners{display:contents}
.corner{position:absolute;bottom:calc(var(--m) + env(safe-area-inset-bottom));margin:0;font-size:var(--small);line-height:16px;letter-spacing:.01em}
.corner--l{left:var(--m);color:var(--sm);max-width:44ch;line-height:1.5;text-wrap:pretty}
.corner--r{right:var(--m);display:flex;gap:8px;align-items:baseline;white-space:nowrap;color:var(--sm)}
.corner--r a{color:var(--sm)}
.corner__sep{color:var(--sm)}

/* Without JavaScript: show the menu screen statically */
html:not(.js) .landing .logo{left:50%;top:var(--m);width:var(--W1);transform:translateX(-50%)}
html:not(.js) .cue{display:none}
html:not(.js) .menu a{font-size:clamp(38px, 5.4vw, 78px)}
html:not(.js) .irony{margin-top:32px}

@media (max-width:639px){
  .corners{display:flex;flex-direction:column;gap:8px;position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + env(safe-area-inset-bottom))}
  .corner{position:static}
  .corner--l,.corner--r{left:auto;right:auto;max-width:none}
  .corner--r{justify-content:flex-start}
}