/* ── nav ────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:10px;padding:22px clamp(18px,4vw,46px);
}
.brand{
  display:flex;align-items:center;gap:10px;margin-right:auto;flex:0 0 auto;
  font-weight:800;font-size:17px;letter-spacing:-.03em;
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--lum);
  box-shadow:0 0 14px var(--lum);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w3);padding:10px 15px;white-space:nowrap;position:relative;
  transition:color .4s var(--e);
}
.tab:hover{color:var(--w2)}
.tab[aria-current=true]{color:var(--w)}
.tab::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:1px;background:var(--lum);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e);
}
.tab[aria-current=true]::after{transform:scaleX(1)}

/* ── stage ──────────────────────────────────────────── */
main{position:fixed;inset:0;z-index:10}
.p{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(90px,11vh,120px) clamp(20px,6vw,84px) clamp(60px,8vh,80px);
  opacity:0;pointer-events:none;overflow-y:auto;overscroll-behavior:contain;
  transform:scale(1.035);filter:blur(7px);
  transition:opacity .6s var(--e),transform .78s var(--e),filter .6s var(--e);
}
.p.on{opacity:1;pointer-events:auto;transform:none;filter:none}
.p::-webkit-scrollbar{width:3px}
.p::-webkit-scrollbar-thumb{background:var(--line-2)}
.in{width:100%;max-width:1160px}

/* staggered reveal */
.p.on .r{animation:up .85s var(--e-out) both}
.p.on .r:nth-child(2){animation-delay:.08s}
.p.on .r:nth-child(3){animation-delay:.15s}
.p.on .r:nth-child(4){animation-delay:.22s}
.p.on .r:nth-child(5){animation-delay:.29s}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ── rail ───────────────────────────────────────────── */
.rail{
  position:fixed;right:clamp(14px,2.2vw,28px);top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:12px;
}
@media(max-width:820px){.rail{display:none}}
.rail button{
  width:18px;height:1px;background:var(--line-2);padding:0;
  transition:background .45s var(--e),width .45s var(--e);
}
.rail button:hover{background:var(--w3);width:26px}
.rail button[aria-current=true]{background:var(--lum);width:34px;box-shadow:0 0 8px var(--lum)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}