@font-face{font-family:EB Garamond;src:url('assets/garamond.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:EB Garamond;src:url('assets/garamond-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Dongxia Song;src:url('assets/song.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#f3efe7;--ink:#151513;--line:rgba(243,239,231,.32);color-scheme:dark;font-family:'EB Garamond','Dongxia Song','Songti SC','Noto Serif CJK SC',serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:var(--paper);height:100%;overflow:hidden}body{font-size:16px;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}a,button{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:6px}::selection{background:var(--paper);color:var(--ink)}
.skip-link{position:fixed;top:-80px;left:24px;z-index:200;padding:14px;background:var(--paper);color:var(--ink)}.skip-link:focus{top:10px}
.masthead{position:fixed;z-index:20;top:21px;left:50%;width:320px;transform:translateX(-50%);text-align:center;text-shadow:0 1px 15px #0009;font-size:15px;transition:opacity 1s .2s}
.identity{display:inline-block;white-space:nowrap;font-size:34px;font-style:italic;letter-spacing:-.025em;line-height:1.1}.identity span{margin-left:.08em}.position{font-size:13px;margin:10px -30px 12px;font-style:italic;line-height:1.5}:lang(zh-CN) .position{font-style:normal;letter-spacing:.17em;font-size:11px}
.masthead nav{display:flex;justify-content:center;gap:32px;line-height:1.8}.masthead nav a{position:relative}.masthead nav a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}.masthead nav a:hover::after,.masthead nav a[aria-current]::after{transform:scaleX(1)}
.language{position:fixed;z-index:25;top:24px;right:30px;display:flex;align-items:center;gap:9px;font-size:13px;text-shadow:0 1px 12px #000}.language button{min-height:32px}.language button[aria-pressed=false]{opacity:.55}.language button:hover{opacity:1}
#main{height:100vh;height:100svh;position:relative;overflow:hidden;outline:0;touch-action:pan-x pinch-zoom;background:#141515;isolation:isolate}
#startup-fallback{position:absolute;inset:175px 24px 90px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:16px/1.7 Georgia,'Songti SC',serif;background:#141515;overflow:auto}#startup-fallback h1{font-size:25px;font-weight:400}#startup-fallback p{margin:8px 0}#startup-fallback a{text-decoration:underline}
.film-slide{position:absolute;inset:0;overflow:hidden;isolation:isolate;opacity:0;pointer-events:none;transition:opacity .85s ease}
.film-slide.active{opacity:1;pointer-events:auto;z-index:1}
.film-image,.ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.film-image{transform:scale(1.035);transition:transform 1.8s cubic-bezier(.2,.6,.3,1)}.film-slide.active .film-image{transform:scale(1)}
.ambient{opacity:0;transition:opacity 1s;pointer-events:none}.ambient.ready{opacity:1}
.film-slide::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#0008,#0002 29%,#0005 55%,#0004 75%,#0009)}
.project-focus{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(56vw,680px);text-align:center;text-shadow:0 2px 20px #0009;opacity:0;translate:0 12px;transition:opacity .7s .15s,translate .9s cubic-bezier(.2,.6,.3,1)}
.active .project-focus{opacity:1;translate:0 0}
.project-title{font-weight:400;font-style:italic;font-size:clamp(34px,3.2vw,53px);line-height:1.15;margin:0 0 25px;letter-spacing:-.02em;text-wrap:balance}:lang(zh-CN) .project-title{font-style:normal;font-size:clamp(28px,2.6vw,42px);letter-spacing:.1em;line-height:1.5}
.project-role{margin:0;font-size:15px}.project-open{display:block;width:100%;padding:25px 0;touch-action:pan-x pinch-zoom}.project-hint{display:block;font-size:13px;margin-top:26px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}.project-open:hover .project-hint,.project-open:focus-visible .project-hint{opacity:1;transform:none}
.project-brand{position:absolute;right:28px;top:50%;max-width:17vw;font-size:15px;line-height:1.5;text-align:right}.project-category{position:absolute;left:28px;bottom:95px;font-size:12px;letter-spacing:.05em;max-width:40%}
.reel-index{position:fixed;inset:0 auto 0 22px;width:44px;z-index:15;pointer-events:none;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
#index-track{height:100%;position:relative}.rail-stop{position:absolute;top:0;left:0;height:100svh;width:44px;will-change:transform}.rail-stop span{position:absolute;left:0;top:-10px;font-size:14px;line-height:20px;opacity:.8}.rail-stop i{position:absolute;left:0;top:38px;bottom:38px;width:1px;background:var(--line)}
.screen-footer{position:fixed;z-index:20;bottom:17px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-shadow:0 1px 12px #0009;transition:opacity 1s .2s}.screen-footer button{font-size:13px;min-height:44px;min-width:38px}.screen-footer #motion-toggle{position:absolute;left:50%;transform:translateX(-50%)}
.reel-controls{display:flex;align-items:center;gap:7px}.reel-controls button{font-size:20px}.film-picker{position:relative;display:grid;place-items:center;min-height:44px;min-width:62px;font-size:13px;letter-spacing:.04em}.film-picker select{position:absolute;inset:0;opacity:0;width:100%;height:100%;color:#171715;cursor:pointer}.film-picker option{background:#f3efe7;color:#171715}.film-picker:focus-within{outline:1px solid currentColor;outline-offset:2px}
.page-open .reel-index,.page-open .screen-footer{display:none}.noscript{position:fixed;z-index:100;inset:140px 0 0;background:var(--ink);padding:50px}
/* The opening uses Dongxia's own initials, and waits for first-image/font readiness. */
#preloader{position:fixed;inset:0;z-index:100;background:#faf9f6;color:#171715;display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .8s ease,visibility 0s .8s;color-scheme:light}
.is-loading #preloader{visibility:visible;opacity:1;pointer-events:auto;transition:none}
.loader-mark{position:relative;width:170px;height:175px;font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:105px;line-height:1;font-weight:400}
.loader-mark span{position:absolute;animation:letter-arrive 1.3s cubic-bezier(.16,1,.3,1) both}.loader-mark span:nth-child(1){left:14px;top:0;--dx:-38px;--dy:-20px}.loader-mark span:nth-child(2){left:80px;top:36px;font-size:68px;--dx:38px;--dy:-14px;animation-delay:.12s}.loader-mark span:nth-child(3){left:40px;top:69px;--dx:26px;--dy:34px;animation-delay:.22s}
.loader-name{font-family:'EB Garamond',Georgia,serif;font-size:16px;letter-spacing:.14em;margin:23px 0 0;animation:word-arrive 1.3s .2s both}.loader-rule{width:32px;height:1px;background:#171715;margin-top:27px;transform-origin:left;animation:rule-arrive 1.2s .3s both}
.is-loading .masthead,.is-loading .screen-footer,.is-loading .language{opacity:0}
@keyframes letter-arrive{from{opacity:0;transform:translate(var(--dx),var(--dy))}to{opacity:1;transform:none}}
@keyframes word-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes rule-arrive{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){
 .masthead{top:23px;width:280px;font-size:14px}.identity{font-size:32px}.position{margin:8px -12px 11px;font-size:12px}:lang(zh-CN) .position{font-size:10px;letter-spacing:.15em}.masthead nav{gap:27px}
 .language{top:131px;right:21px;font-size:12px}.project-focus{width:77vw;top:49%}.project-title{font-size:35px}:lang(zh-CN) .project-title{font-size:28px;letter-spacing:.08em}.project-role{font-size:14px}.project-hint{opacity:.8;transform:none;font-size:12px;margin-top:22px}
 .project-brand{top:auto;bottom:106px;right:21px;font-size:13px;max-width:51%}.project-category{left:21px;bottom:106px;font-size:11px;max-width:35%}.reel-index{left:15px;width:36px}.rail-stop span{font-size:12px}.rail-stop i{top:32px;bottom:32px}
 .screen-footer{left:21px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));font-size:10px;align-items:flex-end}.screen-footer .footer-credit{position:absolute;left:0;bottom:49px;font-size:10px}.screen-footer #motion-toggle{position:static;transform:none;font-size:12px}.reel-controls{gap:2px}.film-picker{font-size:12px;min-width:60px}.screen-footer .reel-controls button{min-width:38px}
 .loader-mark{transform:scale(.85)}.loader-name{margin-top:9px}.film-slide[data-project=bmw] .film-image,.film-slide[data-project=bmw] .ambient{object-position:53% center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ambient{display:none}}
/* Interior views share the restrained cinematic typography of the reel. */
[hidden]{display:none!important}.page{position:fixed;inset:0;z-index:10;background:var(--ink);overflow-y:auto;scrollbar-width:thin;padding:164px 7vw 40px;outline:0}.page-open .masthead{padding-bottom:22px}.page-open .masthead::before{content:'';position:fixed;top:-22px;bottom:0;left:calc(160px - 50vw);width:100vw;z-index:-1;background:linear-gradient(var(--ink) 65%,transparent)}.page-inner{max-width:1140px;margin:auto}.page-kicker{font-size:14px;text-align:center;letter-spacing:.02em;margin:8px 0 22px;opacity:.75}.page-title{text-align:center;font-style:italic;font-weight:400;font-size:clamp(40px,4vw,68px);line-height:1.18;letter-spacing:-.015em;margin:0 0 60px}:lang(zh-CN) .page-title{font-style:normal;font-size:clamp(30px,3vw,46px);letter-spacing:.12em;line-height:1.55}.page-back{position:fixed;z-index:22;left:28px;top:27px;font-size:14px}.page-end{border-top:1px solid var(--line);margin-top:100px;padding-top:24px;display:flex;justify-content:space-between;gap:30px;font-size:13px;color:#b9b6ae}.about-lead{display:grid;grid-template-columns:1fr 1.05fr;gap:9vw;margin:35px 0 110px}.portrait-word{font-size:clamp(60px,7vw,110px);font-style:italic;line-height:.93;letter-spacing:-.04em;margin:0}.portrait-word span{display:block}.name-cn{font-style:normal;font-size:22px;letter-spacing:.5em;line-height:2;margin:32px 0 0}.bio{font-size:22px;line-height:1.65;margin:0}.objective{font-size:16px;line-height:1.85;opacity:.72;margin-top:30px}.credentials{font-size:15px;display:flex;gap:30px;margin:28px 0;color:#c2bdb2}.section-heading{font-size:25px;font-weight:400;font-style:italic;margin:0 0 34px}:lang(zh-CN) .section-heading{font-style:normal;font-size:22px;letter-spacing:.15em}.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:46px 10%;margin:0 0 95px}.capability{border-top:1px solid var(--line);padding-top:23px}.capability h3{font-size:24px;font-weight:400;margin:0 0 15px}.capability p{font-size:17px;line-height:1.85;color:#bab6ad;max-width:430px;margin:0}.timeline{padding:0;list-style:none}.timeline li{display:grid;grid-template-columns:190px 1fr auto;gap:28px;padding:24px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.7}.timeline time{font-size:15px;color:#aaa69e}.timeline-role{font-size:15px;color:#c9c4b9}.education{font-size:16px;color:#c9c4b9;margin-top:35px;line-height:1.9}.inline-link{display:inline-block;border-bottom:1px solid currentColor;padding:0 0 3px;transition:opacity .2s}.inline-link:hover{opacity:.65}.resume-view,.contact-view{min-height:calc(100svh - 300px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.resume-view .page-title,.contact-view .page-title{margin-bottom:28px}.resume-summary{font-size:20px;line-height:1.8;color:#c9c4b9;max-width:660px;margin:0 0 55px}.resume-options{display:grid;grid-template-columns:1fr 1fr;gap:45px;width:min(710px,100%)}.resume-option{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 15px;display:flex;flex-direction:column;align-items:center;gap:16px}.resume-option strong{font-weight:400;font-size:30px}.resume-option span{font-size:14px;color:#b9b6ae}.resume-option .download{font-size:17px;border-bottom:1px solid var(--line);padding-bottom:5px}.resume-option:hover{border-color:var(--paper)}.email{font-size:clamp(27px,4.8vw,70px);line-height:1.5;letter-spacing:-.025em;border-bottom:1px solid var(--line);margin:25px 0 40px}.contact-view .objective{max-width:590px;font-size:18px}.contact-view .name-cn{font-size:18px;letter-spacing:.3em;margin:0 0 30px}.detail-heading{display:flex;justify-content:space-between;align-items:baseline;gap:30px;margin:20px 0 28px}.detail-heading h1{font-style:italic;font-weight:400;font-size:clamp(35px,4vw,60px);line-height:1.2;margin:0}:lang(zh-CN) .detail-heading h1{font-style:normal;font-size:clamp(28px,3.3vw,46px);letter-spacing:.07em}.detail-heading p{font-size:16px;flex-shrink:0;color:#b9b6ae}.film-player{width:100%;aspect-ratio:16/9;object-fit:contain;background:#050505;display:block}.player-caption{display:flex;justify-content:space-between;gap:25px;font-size:14px;color:#b9b6ae;margin-top:13px;line-height:1.6}.detail-copy{display:grid;grid-template-columns:1fr 1.1fr;gap:10%;margin:65px 0}.detail-copy h2{font-size:18px;font-weight:400;margin:0 0 18px;color:#b9b6ae}.detail-copy p{font-size:21px;line-height:1.85;margin:0 0 24px}.detail-copy .award{font-size:16px;color:#b9b6ae}.next-project{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:35px;margin-top:45px}.next-project span{font-size:14px;color:#b9b6ae}.next-project strong{font-style:italic;font-size:28px;font-weight:400}.play-error{border:1px solid var(--line);padding:20px;font-size:16px;line-height:1.8}.announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:700px){.page{padding:170px 24px 35px}.page-open .masthead::before{left:calc(140px - 50vw);padding-bottom:42px}.page-back{top:122px;left:24px;font-size:12px}.page-title{margin-bottom:40px}.page-end{margin-top:65px;font-size:11px;line-height:1.7;flex-direction:column;gap:10px}.about-lead{grid-template-columns:1fr;gap:38px;margin:15px 0 65px}.portrait-word{font-size:76px}.name-cn{font-size:19px;margin-top:20px}.bio{font-size:19px;line-height:1.9}.objective{font-size:15px;line-height:1.9}.credentials{gap:25px;font-size:14px}.capabilities{grid-template-columns:1fr;gap:32px;margin-bottom:70px}.capability h3{font-size:23px}.capability p{font-size:16px}.timeline li{grid-template-columns:1fr;gap:7px;padding:22px 0}.timeline-role{font-size:14px}.education{font-size:14px}.resume-options{grid-template-columns:1fr;gap:22px}.resume-summary{font-size:17px;margin-bottom:32px}.resume-option{padding:27px 12px;gap:13px}.resume-option strong{font-size:28px}.contact-view .objective{font-size:16px}.email{font-size:clamp(26px,6.6vw,43px);max-width:100%;margin-bottom:30px}.detail-heading{display:block;margin-top:15px}.detail-heading h1{font-size:36px}.detail-heading p{font-size:14px;margin-top:18px}.player-caption{font-size:12px}.detail-copy{grid-template-columns:1fr;gap:18px;margin:37px 0}.detail-copy p{font-size:18px;line-height:1.9}.detail-copy .award{font-size:14px}.next-project strong{font-size:23px}.next-project span{font-size:12px}.contact-view,.resume-view{min-height:calc(100svh - 300px)}}
.page-back{top:132px}
@media(max-width:700px){.page-back{top:122px}.language button{min-height:34px}.masthead nav a{min-height:32px}}
.page-title{text-wrap:balance}

.page-open .masthead::before{pointer-events:none}

.player-shell{position:relative}.film-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:15px 25px;border:1px solid #f3efe799;background:#15151366;backdrop-filter:blur(8px);font-size:18px;white-space:nowrap}.film-start:hover{background:#151513aa}
/* v05: visible film previews follow the left-hand reel. */
.reel-index{width:182px;pointer-events:auto;mask-image:linear-gradient(transparent 16%,#000 27%,#000 73%,transparent 86%)}
.rail-stop{width:175px;height:138px;pointer-events:none;opacity:var(--distance-opacity,1)}
.rail-stop span{top:-8px;font-size:12px;width:27px}.rail-stop i{top:20px;bottom:20px}
.rail-preview{position:absolute;left:31px;top:-41px;width:112px;pointer-events:auto;text-align:left;transition:opacity .3s,transform .3s}
.rail-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #f3efe733;transition:border-color .3s}
.rail-preview small{display:block;font-size:10px;line-height:1.35;margin-top:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 5px #000}
.rail-preview[aria-current=true] img{border-color:var(--paper)}.rail-preview:hover{transform:scale(1.06);opacity:1}
@media(min-width:701px) and (max-width:1000px){.project-focus{left:57%;width:54vw}.project-brand{top:auto;bottom:95px;max-width:45%}}
@media(max-width:700px){.reel-index{width:103px;mask-image:linear-gradient(transparent 19%,#000 31%,#000 65%,transparent 78%)}.rail-stop{height:100px;width:96px}.rail-preview{left:22px;top:-25px;width:63px}.rail-preview small{font-size:8px;margin-top:4px}.rail-stop span{font-size:10px}.rail-stop i{top:15px;bottom:15px}.project-focus{left:61%;width:65vw}.project-title{font-size:30px}:lang(zh-CN) .project-title{font-size:25px}.project-role{font-size:12px}}
/* The film page is a full-screen viewing stage with a left vertical time rail. */
.film-page .masthead{display:none}.film-page .page{padding:0}.film-page .page-inner{max-width:none}.film-page .page-back{top:25px;left:28px;z-index:30;text-shadow:0 1px 8px #000}
.film-page .language{top:21px}.player-shell{height:100svh;width:100%;isolation:isolate;background:#050505;touch-action:none;overflow:hidden}
.player-shell .film-player{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;cursor:pointer;touch-action:none}
.player-heading{position:absolute;top:21px;left:50%;transform:translateX(-50%);width:60%;text-align:center;pointer-events:none;text-shadow:0 1px 10px #000}
.player-heading h1{font-size:22px;font-style:italic;font-weight:400;margin:0;line-height:1.3}.player-heading p{font-size:12px;margin:7px 0 0}:lang(zh-CN) .player-heading h1{font-style:normal;letter-spacing:.12em;font-size:20px}
.film-timeline{position:absolute;left:0;top:96px;bottom:98px;width:54px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:11px;text-shadow:0 1px 6px #000}
.film-scrubber{position:relative;width:54px;flex:1;--progress:0;cursor:ns-resize;touch-action:none;outline:none}
.film-track,.film-fill{position:absolute;left:27px;top:0;bottom:0;width:1px;pointer-events:none}.film-track{background:#f3efe74d}.film-fill{background:var(--paper);transform:scaleY(var(--progress));transform-origin:top}
.film-handle{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--paper);left:24px;top:calc(var(--progress)*100%);transform:translateY(-50%);box-shadow:0 0 7px #0006}
.film-scrubber:focus-visible{outline:1px solid #f3efe788;outline-offset:-9px}.seek-time{position:absolute;left:46px;top:clamp(0px,calc(var(--progress)*100% - 12px),calc(100% - 25px));padding:4px 8px;background:#151513b3;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}.film-scrubber:hover .seek-time,.film-scrubber:focus-visible .seek-time,.is-scrubbing .seek-time{opacity:1}
.scrub-hint{position:absolute;left:65px;bottom:92px;font-size:11px;opacity:.7;pointer-events:none;text-shadow:0 1px 6px #000}
.player-toolbar{position:absolute;left:27px;right:27px;bottom:22px;display:flex;align-items:center;gap:30px;font-size:13px;text-shadow:0 1px 8px #000}.player-toolbar button{min-height:44px;border-bottom:1px solid transparent}.player-toolbar button:hover{border-color:currentColor}.player-toolbar .player-toggle{position:absolute;left:50%;transform:translateX(-50%)}.player-toolbar .player-fullscreen{margin-left:auto}
.player-shell .play-error{position:absolute;left:15%;right:15%;top:44%;background:#151513e6}.player-shell .film-start{z-index:2}
.project-notes{max-width:1140px;margin:0 auto;padding:75px 40px 0;scroll-margin-top:0;min-height:calc(100svh - 160px)}.project-notes .detail-heading h2{font-size:40px;font-style:italic;font-weight:400;margin:0}:lang(zh-CN) .project-notes .detail-heading h2{font-style:normal;letter-spacing:.1em;font-size:34px}.film-page .page-end{max-width:1060px;margin:75px auto 0;padding:26px 0 50px}
@media(max-width:700px){.film-page .page-back{top:24px;left:20px}.film-page .language{top:19px;right:20px}.player-heading{top:91px;width:75%;left:55%}.player-heading h1{font-size:22px}:lang(zh-CN) .player-heading h1{font-size:18px}.player-heading p{font-size:11px}.film-timeline{top:175px;bottom:149px;width:46px;gap:13px;font-size:10px}.film-scrubber{width:46px}.film-track,.film-fill{left:22px}.film-handle{left:19px}.seek-time{left:37px}.scrub-hint{left:53px;right:15px;bottom:115px;font-size:10px;line-height:1.6}.player-toolbar{left:20px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));gap:18px;flex-wrap:wrap;font-size:12px}.player-toolbar .player-toggle{position:static;transform:none}.player-toolbar .player-fullscreen{margin-left:auto}.player-toolbar .player-info{position:absolute;right:0;bottom:50px}.project-notes{padding:70px 24px 0}.project-notes .detail-heading h2{font-size:32px}:lang(zh-CN) .project-notes .detail-heading h2{font-size:27px}.film-page .page-end{margin:60px 24px 0}.player-shell .film-start{font-size:16px;padding:13px 20px}}

.player-shell::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0006,transparent 24%,transparent 72%,#0008),linear-gradient(90deg,#0004,transparent 18%)}
.player-heading,.film-timeline,.scrub-hint,.player-toolbar{z-index:2}.player-shell .play-error{z-index:3}

.film-gesture{position:absolute;inset:0;z-index:2;touch-action:none;cursor:ns-resize}.player-heading,.film-timeline,.scrub-hint,.player-toolbar,.player-shell .film-start{z-index:3}
/* v06: floating stills; selected and focused images rise out of the collection. */
@font-face{font-family:'Long Cang';src:url('assets/long-cang.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.reel-index{width:232px;mask-image:linear-gradient(transparent 13%,#000 26%,#000 74%,transparent 87%);touch-action:pan-x pinch-zoom;user-select:none}
.rail-stop{width:222px;transition:opacity .3s}
.rail-stop:has(.rail-preview:is(:hover,:focus-visible)){opacity:1;z-index:2}
.rail-stop span{opacity:.55}
.rail-preview{left:34px;top:-40px;width:118px;transform:translateX(var(--float-offset));transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rail-preview img,.rail-preview[aria-current=true] img{border:0;box-shadow:0 9px 26px #0006;transition:box-shadow .4s,filter .4s;filter:brightness(.87)}
.rail-preview[aria-current=true]{transform:translateX(calc(var(--float-offset) + 8px)) scale(1.17)}
.rail-preview:is(:hover,:focus-visible){transform:translateX(calc(var(--float-offset) + 8px)) scale(1.2)}
.rail-preview:is([aria-current=true],:hover,:focus-visible) img{filter:brightness(1);box-shadow:0 14px 35px #0008}
.rail-preview small{padding-right:16px;font-size:10px;letter-spacing:.015em}
.rail-preview em{position:absolute;right:0;bottom:0;font:12px 'EB Garamond',serif;opacity:0;transition:opacity .25s}
.rail-preview:is([aria-current=true],:hover,:focus-visible) em{opacity:1}
/* Reveal the desktop collection on approach; touch devices keep a visible rail. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .reel-index #index-track{opacity:0;transform:translateX(-22px);transition:opacity .24s ease,transform .3s ease}
 .reel-index:hover #index-track,.reel-index:has(.rail-preview:focus-visible) #index-track{opacity:1;transform:translateX(0)}
}
:lang(zh-CN) :is(.identity,.position,.masthead nav,.project-title,.page-title,.name-cn,.section-heading,.capability h3,.player-heading h1,.detail-heading h1,.detail-heading h2){font-family:'EB Garamond','Long Cang','Dongxia Song',serif;font-style:normal;letter-spacing:.035em}
:lang(zh-CN) .identity{font-size:43px;line-height:.92;letter-spacing:.1em;padding-left:.1em}
:lang(zh-CN) .position{font-size:16px;letter-spacing:.055em;margin-top:12px;margin-bottom:8px}
:lang(zh-CN) .masthead nav{font-size:21px;line-height:1.5}
:lang(zh-CN) .project-title{font-size:clamp(38px,3.6vw,59px);line-height:1.25}
:lang(zh-CN) .page-title{font-size:clamp(40px,4.2vw,65px);line-height:1.35}
:lang(zh-CN) .name-cn{font-size:32px;letter-spacing:.1em}
:lang(zh-CN) .section-heading{font-size:30px}
:lang(zh-CN) .capability h3{font-size:30px}
:lang(zh-CN) .player-heading h1{font-size:28px}
:lang(zh-CN) .project-notes .detail-heading h2{font-size:43px}
@media(max-width:700px){
 .reel-index{left:12px;width:109px;mask-image:linear-gradient(transparent 18%,#000 30%,#000 67%,transparent 80%)}
 .rail-stop{width:106px}.rail-stop span{font-size:9px;top:-5px}
 .rail-preview{left:19px;top:-26px;width:60px;transform:translateX(calc(var(--float-offset)*.4));min-height:44px}
 .rail-preview[aria-current=true]{transform:translateX(calc(var(--float-offset)*.4 + 3px)) scale(1.17)}
 .rail-preview:is(:hover,:focus-visible){transform:translateX(calc(var(--float-offset)*.4 + 3px)) scale(1.2)}
 .rail-preview small{font-size:8px;padding-right:9px}.rail-preview em{font-size:9px}
 .project-focus{left:63%;width:61vw}
 :lang(zh-CN) .identity{font-size:39px}
 :lang(zh-CN) .position{font-size:14px;margin-top:11px;margin-bottom:7px}
 :lang(zh-CN) .masthead nav{font-size:19px}
 :lang(zh-CN) .project-title{font-size:33px;line-height:1.3}
 :lang(zh-CN) .page-title{font-size:38px}
 :lang(zh-CN) .player-heading h1{font-size:25px}
 :lang(zh-CN) .project-notes .detail-heading h2{font-size:34px}
 .page-open:not(.film-page) .page-back{top:147px}
}
/* Reviewed content may include a role only, or an award without a full case study. */
.detail-copy.single-column{grid-template-columns:1fr}.project-award{grid-column:1/-1;max-width:740px}
.project-notes .detail-heading{align-items:flex-start}.project-notes .detail-heading h2{overflow-wrap:anywhere}
.project-title,.player-heading h1{overflow-wrap:anywhere}
@media(max-width:700px){.project-notes .detail-heading{display:block}.next-project strong{max-width:70%;text-align:right}}

/* Keep artwork long-press menus separate from the downloadable resumes. */
.player-shell,.film-slide,.rail-preview{-webkit-touch-callout:none}
.film-player,.film-image,.ambient,.rail-preview img{-webkit-user-drag:none;user-select:none}
.player-shell .play-error{z-index:4}
.contact-view .email{margin-bottom:18px}
.contact-view .phone{display:inline-flex;align-items:baseline;gap:12px;font-size:clamp(22px,2.3vw,32px);letter-spacing:.03em;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line)}
.contact-view .phone span{font-size:14px;letter-spacing:.04em;color:#b9b6ae}
.contact-view .phone:hover{border-color:var(--paper)}