/* Header (logo, left) + always-open menu (right). No backgrounds — ink follows the section. */
.site-header{position:fixed;top:0;left:0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) 0;pointer-events:none}
.site-header>*{pointer-events:auto}
.site-header__logo{display:block;height:clamp(2.3rem,3.6vw,3.2rem)}
.site-header__logo .logo{height:100%}

.menu{position:fixed;z-index:51;top:calc(env(safe-area-inset-top,0px) + 16px);right:var(--gutter);height:clamp(2.3rem,3.6vw,3.2rem);display:flex;align-items:center;background:none;color:var(--nav-ink);transition:color .5s ease}
.menu__list{display:flex;list-style:none;margin:0;padding:0;gap:clamp(.9rem,1.8vw,2rem)}
.menu__link{position:relative;display:block;padding:.3rem 0;text-decoration:none;font-size:clamp(1rem,1.2vw,1.2rem);letter-spacing:.06em;color:inherit;white-space:nowrap}
.menu__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--nav-accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.menu__link:hover::after,.menu__link:focus-visible::after,.menu__link[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.menu__link .roll>span{display:inline-block}

@media (max-width:980px){
  /* menu becomes a solid bottom dock in the current section colour */
  .menu{top:auto;bottom:0;left:0;right:0;height:auto;padding:.9rem var(--gutter) calc(env(safe-area-inset-bottom,0px) + .9rem);background-color:inherit;color:var(--dock-ink);overflow-x:auto;scrollbar-width:none;border-top:1px solid currentColor}
  .menu::-webkit-scrollbar{display:none}
  .menu__list{gap:1.2rem;margin-inline:auto;width:max-content}
  .menu__link{font-size:1rem}
}