@layer legacy {
/* One motion vocabulary, shared across all six pages. */
:root{--motion-quick:180ms;--motion-content:280ms;--motion-surface:400ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
.header{view-transition-name:site-header;transition:background var(--motion-content),color var(--motion-content),border-color var(--motion-content)}main{view-transition-name:page-content}.hero-content{animation:none}
.button,.textlink,.circle-arrow{transition:background var(--motion-quick),color var(--motion-quick),transform var(--motion-content) var(--motion-ease)}.button svg,.textlink svg{transition:transform var(--motion-content) var(--motion-ease)}.button:active{transform:scale(.98)}.textlink:active{opacity:.65}.menu-toggle{min-width:94px}.menu-toggle span,.menu-toggle[aria-expanded=true] span{transform:none}.menu-toggle svg{width:24px;height:24px}.menu-line{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-origin:12px 12px;transition:transform var(--motion-surface) var(--motion-ease)}.menu-toggle[aria-expanded=true] .first{transform:translateY(4px) rotate(45deg);transform-origin:12px 8px}.menu-toggle[aria-expanded=true] .last{transform:translateY(-4px) rotate(-45deg);transform-origin:12px 16px}
.case-dialog{transition:opacity var(--motion-content) var(--motion-ease),transform var(--motion-content) var(--motion-ease);transform:translateY(16px)}.case-dialog.visible{transform:none}.case-dialog::backdrop{transition:background var(--motion-content),backdrop-filter var(--motion-content)}.case-dialog:not(.visible)::backdrop{background:transparent;backdrop-filter:blur(0)}.case-controls button,.tabs button,.collab-filters button{transition:background var(--motion-quick),color var(--motion-quick),opacity var(--motion-quick)}.case-controls button:active{transform:scale(.94)}
@media(max-width:1049px){.menu-is-open .header,.home.menu-is-open .header{background:#fff;color:#000}.menu-is-open .header .logo img{filter:invert(1)}.header nav{background:#fff;padding-top:24px;padding-bottom:max(28px,env(safe-area-inset-bottom));opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100%);transition:clip-path var(--motion-surface) var(--motion-ease),opacity 240ms ease,transform var(--motion-surface) var(--motion-ease),visibility var(--motion-surface);overscroll-behavior:contain}.header nav.open{opacity:1;transform:none;clip-path:inset(0)}.header nav>a:not(.button){font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.025em;border:0;padding-top:16px;padding-bottom:16px;transform:translateY(12px);transition:opacity var(--motion-quick),transform var(--motion-content) var(--motion-ease);transition-delay:0ms}.header nav.open>a{opacity:1;transform:none;transition-delay:calc(min(var(--item,0),4)*28ms + 75ms)}.header nav .nav-cta{margin-top:auto;align-self:stretch;background:var(--yellow);color:#000;min-height:52px}.menu-foot{opacity:0;transform:translateY(6px);transition:opacity var(--motion-content),transform var(--motion-content) var(--motion-ease)}.header nav.open .menu-foot{opacity:1;transform:none;transition-delay:160ms}.home .header{transition:background var(--motion-content),color var(--motion-content)}}
@view-transition{navigation:auto}
main{view-transition-name:none}
::view-transition-old(root){animation:document-out 120ms ease-out both;mix-blend-mode:normal}
::view-transition-new(root){animation:document-in 200ms var(--motion-ease) both;mix-blend-mode:normal}
::view-transition-group(site-header){animation-duration:200ms}
@keyframes document-out{to{opacity:0}}@keyframes document-in{from{opacity:0}to{opacity:1}}
@media(hover:hover){.community-art img{transition:transform var(--motion-surface) var(--motion-ease)}.community-art:hover img{transform:scale(1.015)}.project-tile>img,.project-tile .artwork img,.collab-visual img,.image-link img,.video-library-image img{transition:transform var(--motion-surface) var(--motion-ease)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.button:active,.case-controls button:active{transform:none}}

/* Gallery media keeps its geometry as images load or change. */
.case-full-image{height:54svh;min-height:260px;overflow:hidden}.case-full-image img{max-height:100%;max-width:100%;height:100%;width:100%;min-height:0;min-width:0;object-fit:contain}.case-caption{padding:28px 24px 40px}.case-caption h2{font-size:28px;line-height:1.15}.case-caption>p{font-size:16px}.case-toolbar{padding-right:max(18px,env(safe-area-inset-right));padding-left:max(18px,env(safe-area-inset-left))}
.collection-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.collection-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:white;border-radius:50%}.collection-controls button:first-of-type svg{transform:rotate(180deg)}.collection-controls button:disabled{opacity:.25}.collection-controls[hidden]{display:none}.rail-controls{display:none!important}
@media(min-width:700px){.case-full-image{height:calc(92dvh - 66px)}.case-caption{padding:40px}.case-caption h2{font-size:36px}}

.case-full-image{touch-action:pan-y pinch-zoom}.case-full-image img{user-select:none;-webkit-user-drag:none}

@media(hover:hover){.collab-visual:hover .expand-image{transform:none;background:var(--yellow)}}

}
