/* A quieter frame and a single motion rhythm for the portfolio. */
html{scrollbar-gutter:stable}
.nav{transition:transform .42s var(--ease),background .4s,color .4s,box-shadow .4s;will-change:transform}
.nav.nav-away{transform:translate3d(0,-105%,0);pointer-events:none}
.nav:focus-within{transform:none;pointer-events:auto}
.nav nav>a:not(.nav-contact){position:relative}
.nav nav>a:not(.nav-contact)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav nav>a:hover::after{transform:scaleX(1)}
.hero-track{height:165svh}
.hero{will-change:auto}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 40%,#19161299);opacity:var(--hero-exit,0)}
.hero-bottom{transition:opacity .3s}
.book-hotspot{left:0;top:0;will-change:transform}
.book-current,.book-navigation{transition:opacity .32s var(--ease)}
.book-navigation button{transition:background .25s,color .25s,transform .3s var(--ease)}
.book-navigation button:active:not(:disabled){transform:scale(.92)}
.book-photograph img{filter:brightness(.7);transform:scale(1.06)}
.book-photograph{background:#191612}
.project-dialog{width:100%;max-width:100%;scroll-behavior:smooth}
.project-dialog[open]{animation:none}
.story-flight{will-change:transform}
.project-dialog .dialog-top{backdrop-filter:blur(16px);background:#f5f5f7eb}
.project-dialog.is-story .dialog-top{background:#f0eee8eb}
.story-cover{overflow:hidden}
.detail-window img{transition:transform .7s var(--ease),object-position .7s var(--ease)}
.close-text,.quiet-button{transition:opacity .2s}
.close-text:hover,.quiet-button:hover{opacity:.6}
@media(max-width:760px){
  .hero-track{height:145svh}
  .nav .brand>span:last-child{display:initial}
  .nav .nav-contact{font-size:12px;padding:10px 13px}
  .nav nav{gap:18px}
}
@media(max-width:350px){.nav .brand>span:last-child{font-size:11px}.nav .brand{gap:6px}.nav .nav-contact{padding:9px 10px}}
html[data-motion="reduced"] .hero-track{height:100svh}
html[data-motion="reduced"] .nav,html[data-motion="reduced"] .book-hotspot{will-change:auto}
html[data-motion="reduced"] .project-dialog{scroll-behavior:auto}

/* Controls wait on the table while the paper is moving. */
.book-hotspot{transition:opacity .18s ease,background .3s,color .3s}
.book-current{transition:opacity .18s ease}
.book-instagram-copy{translate:0 calc((1 - var(--dock-progress,1))*14px)}
html[data-motion="reduced"]{scroll-behavior:auto}
html[data-motion="reduced"] .book-current,html[data-motion="reduced"] .book-hotspot{transition:none}
#contact[tabindex="-1"]:focus,#top[tabindex="-1"]:focus{outline:none}