/* Fixed navigation blends with the actual pixels beneath each glyph. */
:root{--header-height:88px}
html{scroll-padding-top:calc(var(--header-height) + 16px)}
body{padding-top:var(--header-height)}
.header{position:fixed;inset:0 0 auto;height:var(--header-height);z-index:70;background:transparent;color:#fff;border-color:#ffffff26;mix-blend-mode:difference;pointer-events:none}
.header>a,.header>nav,.header>button{pointer-events:auto}
.header .brand-mark,.header .header-contact span{color:inherit}
.header .brand-mark path:last-child{fill:#000}
.header .desktop-nav a:hover,.header .header-contact:hover{color:#fff}
.header .desktop-nav a>span{color:#ffffffb0}
.header .header-contact{border-color:#ffffff80}
.header .menu-icon i{background:#fff}
.header::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#fff;transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.header :focus-visible{outline-color:#fff}
.header .desktop-nav .roll-label{display:inline-block;position:relative;top:0;height:1.5em;overflow:hidden;vertical-align:middle;font:inherit;color:inherit}
.header .desktop-nav .roll-label>span{display:block;position:relative;top:0;font:inherit;color:inherit;line-height:1.5;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.header .desktop-nav .roll-label .roll-second{position:absolute;top:100%;left:0}
.header .desktop-nav a:is(:hover,:focus-visible) .roll-label>span{transform:translateY(-100%)}
.desktop-nav a::after{content:'';position:absolute;bottom:2px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s}
.desktop-nav a[aria-current=location]::after,.desktop-nav a:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.header-contact>span{transition:transform .3s}
.header-contact:hover>span{transform:translate(3px,-3px)}
/* Type and imagery react to scroll without changing the document's flow. */
.hero-letter{display:inline-block;translate:calc(var(--hero-exit,0) * var(--letter-x,0px)) calc(var(--hero-exit,0) * var(--letter-y,0px));rotate:calc(var(--hero-exit,0) * var(--letter-turn,0deg));transform-origin:50% 85%}
.hero-art>img{translate:var(--hero-pointer-x,0px) calc(var(--hero-parallax,0px) + var(--hero-pointer-y,0px))}
.hero-stamp{translate:calc(var(--hero-pointer-x,0px) * -.6) calc(var(--hero-pointer-y,0px) * -.6)}
.lines-ready .title-line{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.lines-ready .title-line-inner{display:block;translate:0 108%;rotate:2deg;transform-origin:left center;transition:translate .85s cubic-bezier(.16,1,.3,1),rotate .85s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--line-index,0) * 100ms)}
.lines-ready.lines-visible .title-line-inner{translate:0 0;rotate:0deg}
.project-open .project-visual{scale:var(--project-scale,1);transform-origin:center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.project-open .noform-art>img{scale:1.13;translate:var(--art-pointer-x,0px) calc(var(--image-parallax,0px) + var(--art-pointer-y,0px));transition:transform .7s}
.project-open .silt-art>img{translate:var(--art-pointer-x,0px) calc(var(--image-parallax,0px) + var(--art-pointer-y,0px))}
.project-peek{position:absolute;left:var(--peek-x,50%);top:var(--peek-y,50%);width:78px;height:78px;border-radius:50%;display:grid;place-content:center;background:var(--acid);color:var(--ink);font:9px/1.5 var(--mono);text-align:center;letter-spacing:.01em;z-index:5;pointer-events:none;opacity:0;translate:-50% -50%;scale:.6;transition:opacity .2s,scale .3s cubic-bezier(.2,.8,.2,1)}
.project-peek b{font-size:19px;font-weight:400;line-height:1.2}
.studio-scroll-stage{position:relative;margin-top:70px}
.studio-scroll-stage .studio-layout{margin-top:0}
.studio-copy .scrub-word{opacity:calc(.2 + var(--word-progress,1) * .8);transition:opacity .12s linear}
.studio-copy h2>.scrub-word{color:inherit}
.studio-symbol svg{rotate:calc(var(--studio-progress,0) * 14deg);translate:0 calc(var(--studio-progress,0) * -20px)}
.studio-symbol .studio-progress{width:100%;max-width:200px;height:2px;background:#10110f20;margin-top:18px;position:relative;overflow:hidden}
.studio-symbol .studio-progress::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--studio-progress,0));transform-origin:left}
.service summary h3{transition:color .25s,translate .35s}
.service summary:hover h3,.service[open] summary h3{translate:10px 0}
.journal-entry-copy{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.journal-entry:hover .journal-entry-copy{translate:10px 0}
.journal-thumb{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.journal-entry:hover .journal-thumb{transform:rotate(-4deg) scale(1.04)}
.thumb-motion i{transition:translate .4s}
.journal-entry:hover .thumb-motion i:nth-child(odd){translate:0 -6px}
.journal-entry:hover .thumb-motion i:nth-child(even){translate:0 6px}
.contact h2>span{display:inline-block;translate:calc((1 - var(--contact-progress,1)) * -65px) 0;opacity:calc(.25 + var(--contact-progress,1) * .75)}
.contact-orb span{transform:rotate(calc((1 - var(--contact-progress,1)) * 65deg));transition:transform .2s linear}
.contact-orb:hover span{transform:rotate(45deg);transition:transform .3s}
@supports(interpolate-size:allow-keywords){
  .service{interpolate-size:allow-keywords}
  .service::details-content{height:0;overflow:clip;transition:height .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
  .service[open]::details-content{height:auto}
}
@media(hover:hover) and (pointer:fine){
  .project-open .project-visual{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
  .project-visual.is-pointed .project-peek{opacity:1;scale:1}
  .project-visual.is-pointed .project-arrow{opacity:0}
}
@media(min-width:1000px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  .studio-scroll-stage{min-height:155svh}
  .studio-scroll-stage .studio-layout{position:sticky;top:calc(var(--header-height) + 35px);padding-bottom:70px}
  .studio:has(.studio-scroll-stage) .studio-values{margin-top:20px}
}
@media(max-width:760px){
  :root{--header-height:72px}
  .menu-open main{padding-top:0}
  .mobile-nav{z-index:65}
  .menu-open .header{background:var(--ink);mix-blend-mode:normal;color:var(--paper)}
  .menu-open .header .brand-mark path:last-child{fill:var(--ink)}
  .hero-letter{translate:0 calc(var(--hero-exit,0) * var(--letter-y,0px) * .35);rotate:calc(var(--hero-exit,0) * var(--letter-turn,0deg) * .35)}
  .studio-scroll-stage{margin-top:35px}
  .studio-symbol .studio-progress{display:none}
  .service summary:hover h3,.service[open] summary h3{translate:0}
  .contact h2>span{translate:calc((1 - var(--contact-progress,1)) * -15px) 0}
  .project-peek{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-letter,.hero-art>img,.hero-stamp,.project-open .noform-art>img,.project-open .silt-art>img,.studio-symbol svg,.contact h2>span{translate:none;rotate:none}
  .project-open .project-visual{scale:1;transform:none!important}
  .lines-ready .title-line-inner{translate:none;rotate:none}
  .studio-copy .scrub-word,.contact h2>span{opacity:1}
  .project-peek{display:none}
  .project-visual.is-pointed .project-arrow{opacity:1}
  .journal-entry:hover .journal-thumb{transform:none}
  .journal-entry:hover .journal-entry-copy,.journal-entry:hover .thumb-motion i{translate:none}
  .service summary:hover h3,.service[open] summary h3{translate:none}
  .contact-orb span{transform:none}
}