/* Shared: the revealed 47KAI docks into the top-left logo as the visitor scrolls,
   and the menu arrives top right. Variant pages own everything below the intro. */

html.js:not(.revealed){overflow:hidden}
html.instant *{transition:none!important}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis-smooth{scroll-behavior:auto!important}
.lenis-stopped{overflow:hidden}
html.js:not(.revealed) .after{display:none}
html:root{--page:var(--bg);background:var(--page);transition:background-color .7s cubic-bezier(.3,0,.1,1)}

/* The stage leaves the intro's flow so the mark can travel; only the mark stays clickable. */
html.revealed .stage{position:fixed;z-index:30;pointer-events:none}
html.revealed .wordmark{transform-origin:0 0;pointer-events:auto;cursor:pointer;will-change:transform}
html.revealed .tagline{will-change:opacity}

.bar{--logo:26px;position:fixed;inset:0 0 auto;height:64px;padding:0 32px;display:flex;align-items:center;justify-content:flex-end;z-index:29;pointer-events:none;font-size:15px;font-weight:400;letter-spacing:0;line-height:1}
.bar::before{content:'';position:absolute;inset:0;background:var(--page);opacity:var(--bar-bg,0);z-index:-1;transition:background-color .7s cubic-bezier(.3,0,.1,1)}
.nav{display:flex;gap:32px}
.nav a{pointer-events:auto;opacity:0}
.nav a:hover{opacity:.6!important}
.menu-btn{display:none;background:none;padding:8px 0;font-size:15px;pointer-events:auto;opacity:0}

@media(max-width:650px){
  .bar{--logo:22px;height:56px;padding:0 16px}
  .nav{display:none}
  .menu-btn{display:block}
  html.menu-open .nav{display:flex;flex-direction:column;justify-content:center;gap:4px;position:fixed;inset:0;padding:0 16px;background:var(--page);font-size:48px;letter-spacing:-.04em;z-index:-1}
  html.menu-open .nav a{opacity:1!important}
}

/* At display sizes the tight tracking lets K and A meet at the baseline. */
.wordmark .kai{letter-spacing:-.05em}