header{position:fixed;z-index:50;color:#fff;mix-blend-mode:difference;background:transparent;box-shadow:none}
header.is-scrolled,body.text-mode-open header,body:has(.about:not([hidden])) header{background:transparent;box-shadow:none}
header .brand img{filter:invert(1)}
.work{padding-top:calc(var(--nav-height,100px) + var(--work-side-gap,4.7vw));scroll-margin-top:-90px}
header nav{position:relative}
header nav a::after{display:none}
header nav .nav-underline{position:absolute;left:0;bottom:0;height:1px;width:var(--line-width,20px);background:currentColor;pointer-events:none;transform:translate3d(var(--line-x,0px),0,0);transition:transform .45s cubic-bezier(.22,1,.36,1),width .35s ease}
header nav:has(a:hover) a:not(:hover){opacity:1}
@media(prefers-reduced-motion:reduce){header nav .nav-underline{transition:none}}
.about{padding-top:max(120px,15vh)}
.about .close{top:100px}
@media(max-width:600px){.about .close{top:75px}}

/* Animated off-screen content must not expand the document horizontally. */
html{overflow-x:clip}
.text-panel,.case-page,.about{overflow-x:hidden}