/* Fixed navigation anchors. Only the label transforms; text never reflows. */
:root{--nav-label-size:clamp(80px,10.5vw,184px);--nav-small:14px;--nav-top:24px;--nav-gap:18px;--nav-ink:var(--vi-ink)}
body .code-header .works-title,body .code-header .about-link,
body[data-mode] .code-header .works-title,body[data-mode] .code-header .about-link{position:absolute;top:var(--nav-top);width:58px;height:20px;font-size:var(--nav-small);line-height:20px;letter-spacing:-.025em;transform:none;transition:none;color:var(--nav-ink)}
body[data-mode] .code-header .works-title{left:32%;right:auto}
body[data-mode] .code-header .about-link{left:64%;right:auto}
.nav-label{position:absolute;top:0;white-space:nowrap;font-size:var(--nav-label-size);line-height:.9;font-weight:700;letter-spacing:-.075em;transition:transform 1s cubic-bezier(.65,0,.35,1),color .45s;will-change:transform}
.works-title .nav-label{left:0;right:auto;transform-origin:0 0;transform:scale(calc(var(--nav-small)/var(--nav-label-size)))}
.about-link .nav-label{left:0;transform-origin:0 0;transform:scale(calc(var(--nav-small)/var(--nav-label-size)));color:var(--vi-text-secondary)}
body[data-mode=index] .works-title .nav-label{transform:scale(1)}
body[data-mode=about] .about-link .nav-label{transform:scale(1);color:var(--nav-ink)}
body[data-mode=about] .works-title .nav-label{color:var(--vi-text-secondary)}
body .code-header .back-link,body[data-mode] .code-header .back-link{position:absolute;display:grid;place-items:center;left:var(--gutter);top:calc(var(--nav-top) - 12px);bottom:auto;width:44px;height:44px;padding:0;background:transparent;color:var(--nav-ink);z-index:1;transition:color .2s}
.back-icon{display:block;width:18px;height:18px;background:currentColor;mask:url('./icons/chevron-left.0a6ea5312967a3d9.svg') center/contain no-repeat;-webkit-mask:url('./icons/chevron-left.0a6ea5312967a3d9.svg') center/contain no-repeat}
body .code-header .section-caption{left:var(--gutter);top:calc(var(--nav-top) + var(--nav-label-size) + 18px);transform:none}
@media(max-width:700px){:root{--nav-label-size:clamp(64px,17vw,86px);--nav-small:13px;--nav-top:24px;--nav-gap:16px;--axis:52%}
body .project-index{left:20px}body .code-header .section-caption{top:150px}
body[data-mode] .code-header .works-title{left:32%;right:auto}body[data-mode] .code-header .about-link{left:auto;right:20px}.about-link .nav-label{left:auto;right:0;transform-origin:100% 0}
body[data-mode=index] .works-title .nav-label{transform:translateY(44px) scale(.72)}
body[data-mode=about] .about-link .nav-label{transform:translateY(44px) scale(.72)}
}
@media(prefers-reduced-motion:reduce){.nav-label{transition:none;will-change:auto}}

body[data-mode] .code-header a:hover .nav-label{color:var(--vi-focus)}

/* Index / Focus bridges stay below the fixed navigation (z-index:20). */
body[data-image-transition] .image-transition{z-index:18}
body[data-image-transition] .stage-frame{transition:none;transform:none}

/* Mobile is an image-led flow: no project index or floating display heading. */
@media(max-width:700px){
  body[data-mode]>.project-index{display:none}
  body[data-mode] .code-header{height:64px;background:var(--vi-surface)}
  body[data-mode] .code-header .works-title{left:82px}
  body[data-mode] .code-header .nav-label{font-size:var(--nav-small);line-height:20px;letter-spacing:-.025em;transform:none;transition:none;will-change:auto}
  body[data-mode] #catalog{padding-top:92px}
  body[data-mode] .filmstrip{padding-top:200px}
  body[data-mode] #focus-view:before{height:180px}
}