:root{color-scheme:dark;--bg:#090909;--fg:#eee;--muted:#909090;--line:#292929;--pad:42px;--font:"Avenir Next","Helvetica Neue",Arial,"PingFang TC",sans-serif}
.ui-icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{position:fixed;left:10px;top:-80px;z-index:300;background:#fff;color:#000;padding:12px}
.skip:focus{top:10px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid #fff;outline-offset:6px}
header{position:fixed;top:0;left:0;right:0;height:100px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;z-index:50;background:linear-gradient(#090909e8,transparent);pointer-events:none}
header>*{pointer-events:auto}
.logo{font-family:"Bodoni 72","Didot","Bodoni MT",serif;font-size:42px;font-weight:400;font-style:italic;line-height:1;letter-spacing:-.08em}
.menu-open,.menu-close{font-size:12px;letter-spacing:.1em;min-height:44px}
.menu-open{display:flex;align-items:center;gap:12px}
.menu-open i{width:13px;height:13px;border:1px solid #aaa;border-radius:50%}
.menu-open:hover i{background:#eee}
footer{position:fixed;bottom:0;left:0;right:0;min-height:72px;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;z-index:40;font-size:11px;letter-spacing:.08em;background:linear-gradient(transparent,#090909f5 45%);pointer-events:none}
footer>*{pointer-events:auto}
.count,.footer-note{width:180px;color:var(--muted)}
.footer-note{text-align:right}
.footer-note a{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px}
.footer-note .ui-icon{width:12px;height:12px}
.views{display:flex;gap:10px}
.views button{width:42px;height:42px;padding:10px;position:relative;color:#858585}
.views button[aria-pressed=true]{color:#eee}
.views button[aria-pressed=true]:after{content:"";position:absolute;bottom:0;left:calc(50% - 1.5px);width:3px;height:3px;border-radius:50%;background:#eee}
.views svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1}
.gallery{height:100svh;min-height:560px;overflow:hidden;position:relative;touch-action:pan-y}
.track{position:absolute;inset:125px 0 220px}
.slide{position:absolute;left:50%;top:50%;width:42vw;max-width:610px;height:100%;transform:translate(calc(-50% + var(--offset)*57vw),-50%) scale(var(--scale));opacity:var(--opacity);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s;display:flex;align-items:center;justify-content:center}
.cover{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cover img,.cover video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.preview-control{position:absolute;right:18px;bottom:18px;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff55;background:#0007;z-index:4;display:grid;place-items:center}
.preview-control .ui-icon{width:16px;height:16px}
.slide:not(.active) .preview-control{display:none}
.caption{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);text-align:center;width:80%}
.caption a{font-size:18px;letter-spacing:.07em}
.caption p{margin:10px 0 0;font-size:11px;letter-spacing:.13em;color:var(--muted)}
.caption .roles{color:#d8d8d8;text-transform:uppercase}
.caption .taxonomy{margin-top:6px;font-size:10px;color:#909090}
.arrow{position:absolute;top:50%;width:44px;height:44px;color:#909090}
.arrow.prev{left:var(--pad)}
.arrow.next{right:var(--pad)}
.arrow svg{width:20px;height:20px}
.grid-page{padding:150px var(--pad) 120px;min-height:100svh}
.grid-head{display:flex;align-items:baseline;gap:14px;margin-bottom:50px}
.grid-head h1{font-size:38px;font-weight:300;letter-spacing:-.02em;margin:0}
.grid-head span{font-size:11px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.card figure{position:relative;margin:0;height:58vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#111}
.card img,.card video{position:absolute;inset:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
.card h2{font-size:17px;font-weight:400;letter-spacing:.06em;margin:18px 0 6px}
.card p{font-size:11px;color:var(--muted);letter-spacing:.09em;margin:0}
.card .roles{color:#cfcfcf;text-transform:uppercase}
.card .taxonomy{margin-top:5px;font-size:10px;color:#909090}
.card-preview{opacity:0}
.card.is-playing .card-preview{opacity:1}
.card.is-playing .card-poster{opacity:0}
#menu{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;margin:0;background:#0d0d0df7;color:#eee;padding:0}
#menu::backdrop{background:#0009;backdrop-filter:blur(12px)}
.menu-close{position:absolute;right:var(--pad);top:28px}
.menu-body{width:min(980px,82%);margin:auto;padding-top:12vh}
.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--muted)}
.menu-primary{display:flex;align-items:flex-start;margin:26px 0 24px}
.menu-primary a{font-size:clamp(42px,6vw,82px);font-weight:300;letter-spacing:-.035em;line-height:1.08}
.menu-body sup{display:inline-block;margin-left:.18em;font-size:clamp(18px,1.45vw,24px);line-height:1.8;vertical-align:top;color:#aaa;letter-spacing:.02em}
.menu-categories{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0 18px}
.menu-category-group{min-width:0}
.menu-label{display:block;margin-bottom:13px;font-size:10px;letter-spacing:.14em;color:#909090}
.menu-filter-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:18px}
.menu-categories a{position:relative;padding:10px 0;font-size:13px;letter-spacing:.09em;color:#909090;transition:color .2s}
.menu-categories a:hover,.menu-categories a[aria-current]{color:#eee}
.menu-categories a[aria-current]:after{content:"";position:absolute;left:0;bottom:5px;width:18px;height:1px;background:#eee}
.menu-secondary{display:flex;align-items:flex-start;margin-top:24px}
.menu-secondary a{font-size:clamp(36px,4.5vw,62px);font-weight:300;letter-spacing:-.035em;line-height:1}
.project{padding:130px var(--pad) 120px;display:grid;grid-template-columns:minmax(230px,25%) minmax(0,1fr);gap:6vw}
.project-info{position:sticky;top:130px}
.back{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.back .ui-icon{width:13px;height:13px}
.project-title{margin:60px 0 45px}
.project-title h1{font-size:clamp(38px,4.2vw,64px);font-weight:300;letter-spacing:.02em;margin:12px 0}
.project-title p{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.project-client{margin:-24px 0 34px}
.project-client p{margin:8px 0 0;font-size:14px;letter-spacing:.04em;color:#d8d8d8}
.description{font-size:15px;line-height:1.7}
.credits{margin-top:40px}
.credits summary{list-style:none;border-bottom:1px solid var(--line);padding:14px 0;font-size:11px;letter-spacing:.12em;cursor:pointer}
.credits summary::-webkit-details-marker{display:none}
.credits dl div{display:flex;justify-content:space-between;gap:18px;margin:15px 0;font-size:12px}
.credits dt{color:#aaa}
.credits dd{margin:0}
.credits .pending{color:#909090}
.project-media figure{margin:0 0 80px}
.film{display:block;width:100%;max-height:82vh;background:#111;object-fit:contain}
.project-media figcaption{display:flex;justify-content:space-between;margin-top:14px;font-size:11px;letter-spacing:.08em;color:#909090}
.project-next{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:36px 0;font-size:30px}
.project-next .ui-icon{width:28px;height:28px}
.about{min-height:100svh;padding:150px var(--pad) 110px}
.about h1{font-size:clamp(85px,13vw,180px);font-weight:300;letter-spacing:-.045em;margin:60px 0}
.about .intro{font-size:clamp(22px,3vw,40px);font-weight:300}
.about .pending{color:#909090}
.contact{margin-top:60px;display:flex;flex-direction:column;gap:18px}
.contact a{width:max-content;display:inline-flex;align-items:center;gap:7px;font-size:15px;letter-spacing:.04em;color:#d4d4d4}
.contact .ui-icon{width:14px;height:14px}
.contact a:hover{text-decoration:underline;text-underline-offset:6px}
.route-shell{min-height:100svh;padding:150px var(--pad) 120px;max-width:900px}
.route-shell h1{font-size:clamp(42px,7vw,92px);font-weight:300;line-height:1.05;margin:24px 0}
.route-shell p,.route-shell li{font-size:15px;line-height:1.7;color:#aaa}
.route-shell ul{padding-left:18px}
.error,.empty-category{min-height:100svh;display:grid;place-content:center;text-align:center}
.empty-category h1{margin:14px 0 8px;font-size:clamp(38px,6vw,72px);font-weight:300}
.empty-category p{color:var(--muted);margin:0 0 30px}
.empty-category a{font-size:11px;letter-spacing:.12em;text-decoration:underline;text-underline-offset:6px}
.cursor{position:fixed;left:0;top:0;z-index:250;pointer-events:none;opacity:0;mix-blend-mode:difference}
.cursor:before{content:"";position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border:1px solid #fff;border-radius:50%;transition:.2s}
.cursor span{position:absolute;transform:translate(-50%,-50%);font-size:9px}
.cursor.show{opacity:1}
.cursor.hover:before{width:52px;height:52px;background:#fff}
.cursor.hover span{color:#000}
.custom,.custom a,.custom button,.custom summary{cursor:none}
@media(max-width:800px){:root{--pad:21px}
.logo{font-size:22px}
.track{inset:120px 0 250px}
.slide{width:80vw;transform:translate(calc(-50% + var(--offset)*98vw),-50%) scale(var(--scale))}
.caption{bottom:145px}
.caption a{font-size:17px}
.arrow{top:auto;bottom:88px}
.arrow.prev{left:calc(50% - 66px)}
.arrow.next{right:calc(50% - 66px)}
.count,.footer-note{width:76px;font-size:10px}
.views button{width:38px;height:38px}
.cards{grid-template-columns:1fr}
.grid-page{padding-top:125px}
.card figure{height:60vh}
.project{display:block;padding-top:105px}
.project-info{position:static;margin-bottom:45px}
.project-title{margin:35px 0 25px}
.project-title h1{font-size:47px}
.credits dl{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.project-media figure{margin-bottom:48px}
.film{max-height:none}
.menu-body{width:calc(100% - 42px);padding-top:11vh}
.menu-primary{margin:22px 0 18px}
.menu-categories{padding:18px 0 14px}
.menu-filter-links{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-secondary{margin-top:20px}
.about h1{font-size:90px}
.project-next{font-size:24px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}



[hidden]{display:none!important}

footer .views{width:82px;height:40px;padding:3px;justify-content:flex-start;gap:0;position:relative;border:1px solid #333;border-radius:999px;background:#111}

.views:before{content:"";position:absolute;left:3px;top:3px;width:36px;height:32px;border-radius:999px;background:#eee;transition:transform .28s cubic-bezier(.2,.8,.2,1)}

.views:has(button[data-view="grid"][aria-pressed="true"]):before{transform:translateX(36px)}

.views button{display:block;width:36px;height:32px;padding:8px;z-index:1;color:#707070;transition:color .25s ease}

.views button[aria-pressed=true]{color:#090909}

.views button[aria-pressed=true]:after{display:none}

.scroll-cue{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.12em;color:var(--muted);transform:translate(-50%,-50%);transition:opacity .3s ease,transform .3s ease}

.scroll-cue.leaving{opacity:0;transform:translate(-50%,calc(-50% + 8px))}

.cue-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:scrollCue 1.45s ease-in-out infinite}
.cue-mobile{display:none}

.about-detail{max-width:760px;font-size:clamp(18px,2vw,28px);font-weight:300;line-height:1.5;color:#aaa}

@keyframes scrollCue{0%,100%{transform:translateY(-2px);opacity:.45}
50%{transform:translateY(4px);opacity:1}
}

@media(max-width:800px){.footer-note{width:76px}
.scroll-cue{gap:7px;font-size:10px;white-space:nowrap}
.cue-desktop{display:none}
.cue-mobile{display:block}
}

@media(prefers-reduced-motion:reduce){.cue-icon{animation:none}
}


main{transition:opacity .2s ease,transform .2s ease}

body.view-changing main{opacity:0;transform:scale(.992)}