/* Interface icons are vector strokes, independent of the device's emoji font. */
.ui-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.text-button,.case-footer>a,.contact-links>a,.player-status>a{display:inline-flex;align-items:center;gap:10px}
.text-button .ui-icon{margin:0;transition:transform .3s var(--ease)}
.gallery-controls button{display:grid;place-items:center}
.gallery-index,.menu-page-arrow,.opening-skip{display:none}
.opening-skip{position:fixed;right:var(--gutter);top:max(12px,env(safe-area-inset-top));z-index:12;min-height:44px;align-items:center;gap:10px;padding:0 12px;background:var(--paper);font-size:11px;text-transform:uppercase}
.is-entering .opening-skip{display:inline-flex}
@media(max-width:900px),(max-height:480px) and (max-width:1000px){
 :root{--gutter:16px;--card-width:calc(100vw - 48px);--card-height:min(54svh,500px)}
 .site-header{grid-template-columns:1fr auto;align-items:center;padding:max(8px,env(safe-area-inset-top)) var(--gutter) 8px;row-gap:0;min-height:64px}
 .brand{display:flex;align-items:center;width:132px;min-height:44px;padding:0}.brand img{width:132px}
 .site-description,.site-edition{display:none}
 .navigation{grid-row:1;grid-column:2;flex-direction:row;align-items:center;gap:10px;font-size:11px;min-width:0}
 .navigation .text-roll{display:flex;align-items:center;justify-content:center;height:44px;min-width:44px;line-height:1;padding:0 3px;overflow:visible}
 .navigation .text-roll span{transform:none!important}.navigation .text-roll span[aria-hidden=true]{display:none}
 .recognition{--mark-size:clamp(64px,calc(100svh - var(--card-height) - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),144px);top:calc((100svh - var(--card-height) - 52px + env(safe-area-inset-top) - env(safe-area-inset-bottom))/2);width:calc(100% - 32px)}
 .recognition-slide{gap:14px}.recognition-name{width:120px;font-size:13px}
 .gallery-toolbar{bottom:calc(var(--card-height) + 72px + env(safe-area-inset-bottom));height:44px;font-size:11px;gap:12px}
 .gallery-toolbar>p:first-child,.gallery-hint{display:none}
 .gallery-controls{gap:2px}.gallery-count{order:1;width:42px;text-align:center;margin:0;font-size:10px}
 .gallery-controls button{width:44px;height:44px;flex:none}.gallery-prev{order:0}.gallery-next{order:2}
 .gallery-controls .motion-toggle{order:3;margin:0!important;opacity:.65}.motion-toggle svg{width:17px;height:17px}
 .gallery-index{display:flex;min-height:44px;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;color:var(--ink);white-space:nowrap}
 .gallery-index .ui-icon{width:16px}
 .gallery{bottom:calc(var(--gutter) + env(safe-area-inset-bottom));touch-action:pan-y pinch-zoom}
 .project-label{height:44px;padding-top:3px}.client-roll{font-size:11px;height:15px;line-height:15px}.project-name{font-size:11px;line-height:15px;max-width:calc(var(--card-width) - 28px)}
 .project-number{font-size:10px}.project-cursor{display:none}
 .touch-play{display:flex;position:absolute;bottom:18px;left:18px;right:18px;align-items:center;justify-content:space-between;color:#fff;font-size:11px;text-transform:uppercase;z-index:1;text-shadow:0 1px 8px #000}
 .touch-play .ui-icon{width:20px;height:20px}
 .project-image-wrap:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
 /* All destinations fit in a readable menu instead of hidden horizontal pages. */
 .menu-dialog{background:var(--paper);overflow-y:auto;overscroll-behavior:contain}
 .menu-top{position:sticky;top:0;left:auto;right:auto;padding:max(8px,env(safe-area-inset-top)) 20px 8px;min-height:64px;background:var(--paper);font-size:11px}
 .menu-top .menu-close{font-size:11px;min-height:44px}
 .menu-pages{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto;padding:20px 20px 40px;overflow:visible;scroll-snap-type:none}
 .menu-page{display:flex;align-items:center;gap:16px;width:100%;height:auto;min-width:0;min-height:clamp(64px,10svh,86px);overflow:visible;border-top:1px solid #dedbd5;background:transparent;transition:none;scroll-snap-align:none}
 .menu-page:last-child{border-bottom:1px solid #dedbd5}.menu-page:hover{translate:none}
 .menu-page-title{position:static;order:2;flex:1;font-size:36px;line-height:1.15;letter-spacing:-.055em}
 .menu-page-number{position:static;order:1;width:22px;font-size:10px}
 .menu-page-arrow{display:block;order:3}.menu-page-arrow .ui-icon{width:22px;height:22px}
 .menu-preview{display:none}.menu-hint{position:static;margin:0 20px;padding:0 0 max(24px,env(safe-area-inset-bottom));font-size:11px;color:var(--muted)}
 .menu-footer{position:static;margin:0 20px;padding:0 0 max(24px,env(safe-area-inset-bottom));gap:12px}
 /* Clear, reachable exits remain available while a panel scrolls. */
 .case-header,.index-header,.info-header,.contact-top{position:sticky;top:0;z-index:6;min-height:64px;padding:max(8px,env(safe-area-inset-top)) var(--gutter) 8px;background:var(--paper);align-items:center;gap:10px}
 .case-header{grid-template-columns:1fr auto}.case-header-name,.case-counter{display:none}
 .case-header>img,.index-header>img,.info-header>img,.contact-top>img{width:114px;height:auto}
 .case-close,.index-close,.info-close,.contact-close,.case-next,.case-footer>a{min-height:44px;font-size:10px;white-space:nowrap}
 .case-close{justify-self:end}.case-close,.index-close,.info-close{flex-direction:row-reverse}.case-close .ui-icon,.index-close .ui-icon,.info-close .ui-icon{width:16px}
 .case-dialog{background:var(--paper)}
 .case-layout{display:flex;flex-direction:column;height:auto;min-height:0;margin:0 var(--gutter)}
 .case-info{padding:22px 0 24px}.case-info h2{font-size:clamp(38px,11vw,62px);line-height:1;max-width:100%;margin-bottom:20px;overflow-wrap:anywhere;text-wrap:balance}
 .case-meta{font-size:11px;line-height:1.5;gap:16px}
 .case-media{height:auto;min-height:0;aspect-ratio:16/10;flex:none}
 .watch-caption{left:16px;right:16px;bottom:16px;font-size:11px}.watch-symbol{width:60px;height:60px;background:rgba(0,0,0,.24)}.watch-symbol svg{width:20px;height:20px}
 .case-footer{position:relative;left:auto;bottom:auto;width:auto;margin:10px var(--gutter) max(20px,env(safe-area-inset-bottom));font-size:11px;gap:16px}
 .case-dialog.film-view .case-media{top:calc(72px + env(safe-area-inset-top));bottom:calc(72px + env(safe-area-inset-bottom));aspect-ratio:auto;height:auto;min-height:0}
 .case-dialog.film-view .case-footer{position:fixed;left:var(--gutter);right:var(--gutter);bottom:max(12px,env(safe-area-inset-bottom));margin:0}
 .index-intro{display:block;margin:36px var(--gutter) 28px}.index-intro h2{font-size:17vw;margin-bottom:20px}.index-intro>span{font-size:10px}
 .index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}.index-picture{height:56vw}
 .index-label{gap:6px;padding-top:10px}.index-client,.index-name{font-size:11px;line-height:1.4}.index-number{font-size:9px}
 .info-intro{display:block;margin:36px var(--gutter) 30px}.info-intro h2{font-size:14vw;margin-bottom:20px}.info-intro p{font-size:10px;line-height:1.5}
 .awards-grid,.clients-grid{padding-bottom:calc(32px + env(safe-area-inset-bottom))}.award-item h3,.award-item p{font-size:11px}.clients-grid li{padding:20px 0;gap:8px;grid-template-columns:18px 1fr}.clients-grid li>span:last-child{font-size:18px;overflow-wrap:anywhere}
 .contact-dialog{padding:0;display:none}.contact-dialog[open]{display:flex;flex-direction:column}
 .contact-body{position:static;flex:1;margin:0;padding:46px var(--gutter) 48px;display:flex;flex-direction:column;justify-content:center}
 .contact-body>p{font-size:12px;line-height:1.6;margin-bottom:26px}.contact-body h2{font-size:18vw}
 .contact-links{margin-top:32px;gap:12px;align-items:flex-start;font-size:12px;flex-direction:column}.contact-links a{min-height:44px;padding:8px 0}
 .contact-copyright{position:static;padding:0 var(--gutter) max(24px,env(safe-area-inset-bottom));font-size:10px}
}
@media(max-width:360px){.navigation{gap:4px}.brand,.brand img{width:124px}.gallery-toolbar{gap:4px}.gallery-controls{gap:0}.gallery-index{gap:4px}.recognition-name{font-size:12px;width:116px}.menu-page-title{font-size:32px}}
@media(max-height:480px) and (max-width:1000px){
 :root{--card-height:36svh;--card-width:44vw}
 .site-header{padding-top:4px;padding-bottom:4px;min-height:52px}.brand,.navigation .text-roll{min-height:44px;height:44px}
 .recognition{--mark-size:clamp(40px,calc(100svh - var(--card-height) - 180px),64px);top:calc((100svh - var(--card-height) - 64px)/2)}.recognition-name{font-size:11px}
 .gallery-toolbar{bottom:calc(var(--card-height) + 72px + env(safe-area-inset-bottom))}
 .menu-pages{padding-top:8px}.menu-page{min-height:58px}.menu-page-title{font-size:28px}
 .case-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}.case-media{align-self:center}.case-info h2{font-size:38px}
 .contact-body{padding-top:24px}.contact-body h2{font-size:10vw}
}

@media(min-width:600px) and (max-width:900px) and (min-height:481px){:root{--card-width:calc((100vw - 40px)/2)}}