/* Shared interaction polish and project photography. */
html.lenis,html.lenis body{height:auto}
.photo-experience{background:var(--paper);color:var(--ink);position:relative}
.photo-pin{padding:48px 0 64px}
.photo-scroll .photo-pin{position:sticky;top:8svh;height:82svh;display:flex;flex-direction:column;justify-content:center;padding-block:12px 40px}
.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter) 32px}
.photo-toolbar>span{font-size:clamp(20px,2vw,32px);letter-spacing:-.025em;max-width:60%}
.photo-controls,.viewer-controls{display:flex;align-items:center;gap:12px}
.photo-count{font-size:13px;letter-spacing:.12em;font-variant-numeric:tabular-nums;margin-right:0;white-space:nowrap}
.photo-controls button,.lightbox .viewer-controls button{position:static;width:48px;height:48px;display:grid;place-items:center;border:1px solid #f0efea55;color:inherit;background:transparent;transition:background .25s,color .25s}
.photo-controls button:not(:disabled):is(:hover,:focus-visible),.viewer-controls button:is(:hover,:focus-visible){background:var(--paper);color:var(--ink)}
.photo-controls button:disabled{opacity:.25;cursor:default}
.project-gallery.photo-track{position:relative;display:block;margin:0 var(--gutter);padding:0;overflow:clip;height:min(62svh,680px);flex-shrink:0}
.project-gallery.photo-track a,.project-gallery.photo-track a:nth-child(n){position:absolute;top:0;left:calc(var(--photo-column,0)*(50% + 12px));width:calc(50% - 12px);height:100%;aspect-ratio:auto;margin:0;clip-path:none;transform:none;translate:0 var(--photo-entry,0%);opacity:1;transition:none;filter:none;background:var(--paper)}
.project-gallery.photo-track a.photo-current{filter:brightness(1)}
.project-gallery.photo-track a.photo-solo:nth-child(n){left:0;width:100%}
.project-gallery.photo-track .photo-expand-icon{position:absolute;right:20px;bottom:20px;width:48px;height:48px;display:grid;place-items:center;background:#1F1F1Fc9;border:1px solid #f0efea66;color:var(--paper);font-size:25px;opacity:0;translate:0 8px;transition:opacity .25s,translate .3s var(--ease)}
.project-gallery.photo-track a:is(:hover,:focus-visible) .photo-expand-icon{opacity:1;translate:0 0}
@media(hover:none){.project-gallery.photo-track .photo-expand-icon{opacity:1;translate:0 0;width:44px;height:44px;right:14px;bottom:14px}}
.project-gallery.photo-track a img{inset:0;width:100%;height:100%;transform:none!important;scale:1!important;object-fit:cover}
.project-gallery.photo-track a:focus-visible{outline:2px solid var(--paper);outline-offset:-6px;filter:brightness(1)}
.lightbox{max-width:none;width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:64px 5vw 92px;background:#1F1F1Ffa}
.lightbox>button{z-index:2;width:48px;height:48px}
.lightbox .viewer-controls{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);gap:28px}
.viewer-controls>span{font-variant-numeric:tabular-nums;min-width:60px;text-align:center;font-size:14px;letter-spacing:.1em}
.lightbox>img{touch-action:pan-y}
@media(max-width:700px){
 .photo-pin{padding:20px 0 28px}.photo-scroll .photo-pin{top:6svh;height:80svh;padding-block:14px 30px}.photo-toolbar{align-items:start;gap:16px;padding-bottom:20px}.photo-toolbar>span{font-size:20px;max-width:75%}
 .photo-controls{gap:8px;flex-wrap:wrap;justify-content:end}.photo-count{width:100%;text-align:right;margin:0 0 4px;font-size:12px}
 .photo-controls button{width:44px;height:44px}.project-gallery.photo-track{gap:14px}
 .project-gallery.photo-track{height:56svh}.project-gallery.photo-track a,.project-gallery.photo-track a:nth-child(n){left:0;width:100%;height:100%}
 .lightbox{padding:70px 12px 100px}
}
.photo-experience:not(.photo-scroll) .photo-track{display:grid;grid-template-columns:1fr;gap:24px;height:auto}
.photo-experience:not(.photo-scroll) .photo-track a:nth-child(n){position:relative;left:0;width:100%;translate:none;filter:none;height:auto;aspect-ratio:1.5}
@media(prefers-reduced-motion:reduce){.project-gallery.photo-track a{transition:none}.photo-count{display:none}}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
html.lenis.lenis-stopped body:has(dialog[open]){overflow:clip}
.lenis dialog{overscroll-behavior:contain}
.text-link svg{transform:rotate(-45deg)}
.text-link:is(:hover,:focus-visible) svg{transform:rotate(-45deg)}
.menu nav a{transition:color .25s,transform .36s var(--ease)}
.menu nav a:is(:hover,:focus-visible){color:#fff;transform:translateX(4px)}
.menu nav a:is(:hover,:focus-visible) svg{transform:translateX(4px)}
.menu .menu-meta a:focus-visible{color:white}
.hero-control:focus-visible{background:#ffffff14;border-color:#ffffffaa}
.dock-icon:focus-visible,.dock-toggle:focus-visible{background:#ffffff0d}
.menu-close{transition:background .25s,border-color .25s}
.menu-close:is(:hover,:focus-visible){background:#ffffff0d;border-color:#ffffffaa}
.nav-roll-inner{transition-duration:.32s}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:blac-page-out .18s ease-out both}
  ::view-transition-new(root){animation:blac-page-in .28s var(--ease) both}
  ::view-transition-group(root){animation-duration:.28s}
  .text-link:focus-visible svg{animation:blac-arrow-reveal .42s var(--ease) both}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.text-link:hover svg{animation:blac-arrow-reveal .42s var(--ease) both}}
@keyframes blac-arrow-reveal{0%{translate:0 0;opacity:1}42%{translate:6px -6px;opacity:0}43%{translate:-5px 5px;opacity:0}100%{translate:0 0;opacity:1}}
@keyframes blac-page-out{to{opacity:0}}
@keyframes blac-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(root){animation:none!important}
  .menu nav a:is(:hover,:focus-visible),.menu nav a:is(:hover,:focus-visible) svg{transform:none}
}

/* One expansion symbol for the toolbar and the photograph affordance. */
.photo-controls{flex-shrink:0;flex-wrap:nowrap}
.photo-controls .photo-expand{border-color:var(--line);flex-shrink:0}
.photo-controls .photo-expand:is(:hover,:focus-visible){background:var(--ink);color:var(--paper)}
.photo-expand svg,.photo-expand-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.photo-expand-icon{pointer-events:none}
@media(max-width:700px){.photo-toolbar>span{max-width:none;min-width:0;font-size:18px}.photo-count{width:auto;margin:0}.photo-controls{gap:10px}}