:root{--bg:#f7f7f7;--ink:#171717;--muted:#888;--edge:5vw;--gap:28px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;color:var(--ink);background:var(--bg);font-family:'Studio Geometric','PingFang TC','Noto Sans TC',sans-serif;font-size:17px;font-weight:500;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #555;outline-offset:6px}button{cursor:pointer}.site-header{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:24px;align-items:start;padding:38px var(--edge);min-height:126px}.wordmark{display:block;max-width:200px;margin-top:-12px}.wordmark img{width:100%;height:auto;display:block}.nav-pair{display:flex;flex-direction:column;align-items:start;gap:5px;font-size:17px;line-height:1.4}.nav-pair a{color:#8e8e8e;transition:color .2s}.nav-pair a:hover{color:#171717}.nav-pair a:first-child{color:#171717}.language-toggle{border:0;background:transparent;color:#555;font-size:14px;padding:4px 8px}.hero{padding:100px var(--edge) 92px;min-height:calc(100svh - 126px);display:flex;flex-direction:column;justify-content:space-between;gap:120px}.hero h1{font-size:clamp(62px,7.6vw,118px);font-weight:600;line-height:1.13;letter-spacing:-.055em;text-indent:25%;margin:0;translate:0 var(--text-drift,0px)}html[lang="zh-Hant"] .hero h1{font-size:clamp(48px,6.25vw,94px);letter-spacing:-.045em;font-weight:600;line-height:1.3}.hero-bottom{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;font-size:16px;line-height:1.6;align-items:start}.hero-bottom p{color:#888;margin:0}.hero-bottom a{max-width:220px}.hero-bottom a:before{content:'';display:block;width:20px;height:20px;border:1px solid #222;border-radius:50%;margin-bottom:14px}.work-section{padding:60px var(--edge) 120px}.section-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px;font-size:14px}.section-intro h2{font-size:17px;font-weight:500;margin:0}.section-intro span{color:#999}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:80px var(--gap);align-items:start}.tile{display:block;min-width:0;text-align:left;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}.tile .cover{position:relative;overflow:hidden;background:#eee;width:100%;aspect-ratio:1}.tile img{position:absolute;top:-6%;width:100%;height:112%;object-fit:cover;transform:translate3d(0,var(--image-drift,0px),0);transition:filter .4s ease}.tile:hover img,.tile:focus-visible img{filter:brightness(.85)}.caption{padding-top:20px;translate:0 var(--caption-drift,0px)}.caption h2{font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.02em;margin:0 0 7px}.caption p{font-size:13px;color:#929292;margin:0;line-height:1.6}.tile:nth-child(8n+1){grid-column:1/span 2}.tile:nth-child(8n+2){grid-column:4;margin-top:160px}.tile:nth-child(8n+3){grid-column:2}.tile:nth-child(8n+4){grid-column:3/span 2;margin-top:60px}.tile:nth-child(8n+5){grid-column:1;margin-top:100px}.tile:nth-child(8n+6){grid-column:2/span 2}.tile:nth-child(8n+7){grid-column:4;margin-top:140px}.tile:nth-child(8n+8){grid-column:1/span 2}.tile.reel .cover{aspect-ratio:4/3}.about{margin:80px var(--edge) 0;padding:100px 0 140px;display:grid;grid-template-columns:1fr 1fr;gap:10vw;border-top:1px solid #ddd}.about h2{font-size:clamp(36px,4vw,64px);font-weight:600;line-height:1.2;letter-spacing:-.04em;margin:0;translate:0 var(--text-drift,0px)}.about p{font-size:21px;font-weight:400;line-height:1.8;margin:0}.about .services{font-size:14px;color:#888;margin-top:40px}.contact{margin:0 var(--edge);padding:100px 0 140px;border-top:1px solid #ddd}.contact h2{max-width:1100px;font-size:clamp(44px,6.6vw,100px);font-weight:600;letter-spacing:-.05em;line-height:1.15;margin:0 0 48px;translate:0 var(--text-drift,0px)}.contact p{max-width:560px;margin-left:50%;font-size:18px;font-weight:400;line-height:1.8}.site-footer{padding:60px var(--edge) 80px;border-top:1px solid #ddd;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;font-size:15px;line-height:1.8}.site-footer>div{display:flex;flex-direction:column;gap:10px}.footer-brand{font-size:26px;font-weight:700;letter-spacing:-.045em}.site-footer span{color:#999;font-size:12px}#load-status:empty{display:none}dialog{border:0;width:min(1100px,94vw);padding:24px;background:#171717;color:white}dialog::backdrop{background:#000c}.player-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:24px}.player-bar h2{font-size:21px;margin:0;font-weight:500}.close{border:1px solid #666;background:none;color:inherit;padding:8px 16px}.player-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:20px;font-size:14px}.player-links a{text-decoration:underline}iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#111}
.project-main{padding:70px var(--edge) 100px}.project-title{margin:20px 0 100px}.project-title h1{font-size:clamp(42px,6vw,88px);font-weight:600;letter-spacing:-.045em;line-height:1.18;max-width:1100px;margin:0 0 36px}.project-title p{font-size:15px;color:#999;line-height:1.6}.film{margin-bottom:72px}.film-label{display:flex;justify-content:flex-end;font-size:13px;color:#888;margin-top:18px}.film-label a{text-decoration:underline}.project-story{display:grid;grid-template-columns:1fr 3fr;gap:60px;padding:60px 0 120px}.project-story>div:first-child{font-size:15px;color:#888}.project-description>p{font-size:clamp(22px,2.2vw,32px);line-height:1.7;font-weight:400;margin:0 0 64px;max-width:940px}.sidebar-story{margin:0 0 56px}.sidebar-story h2{font-weight:500;font-size:15px;color:#999;margin:0 0 24px}.sidebar-story p{font-size:19px;line-height:1.9;font-weight:400;margin:0 0 22px;max-width:820px}.section-heading{padding:20px 0 40px}.section-heading h2{font-size:clamp(30px,3.2vw,48px);font-weight:600;letter-spacing:-.035em;margin:0;translate:0 var(--text-drift,0px)}.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:120px;align-items:start}.image-grid>img{display:block;width:100%;height:auto}.depth-frame{overflow:hidden;min-width:0}.depth-frame:first-child{grid-column:1/-1}.depth-frame img{width:100%;height:auto;display:block;transform:translate3d(0,var(--image-drift,0px),0) scale(1.07)}.project-nav{display:flex;justify-content:space-between;gap:48px;border-top:1px solid #ddd;padding:60px 0 0}.project-nav a{max-width:42%;font-size:clamp(21px,2.5vw,36px);line-height:1.4;letter-spacing:-.035em}.project-nav small{display:block;color:#999;font-size:13px;letter-spacing:0;margin-bottom:24px}.project-nav a:last-child{text-align:right}
@media(max-width:900px){.hero{padding-top:90px;gap:90px}.hero h1{text-indent:0}.hero-bottom{grid-template-columns:1fr 1fr}.hero-bottom p{grid-column:1/-1}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 24px}.tile:nth-child(n){grid-column:auto;margin-top:0}.tile:nth-child(5n+1){grid-column:1/-1}.tile:nth-child(5n+1) .cover{aspect-ratio:16/10}.about{gap:40px}.about p{font-size:18px}.project-story{grid-template-columns:1fr 3fr;gap:32px}.project-title{margin-bottom:64px}}
@media(max-width:600px){:root{--edge:7vw}.site-header{grid-template-columns:1fr auto;gap:24px;padding-top:24px;min-height:150px}.wordmark{max-width:175px;grid-column:1}.nav-pair{grid-row:2;font-size:14px}.nav-pair:nth-child(3){grid-column:2}.language-toggle{grid-row:1;grid-column:2}.hero{padding-top:45px;padding-bottom:64px;min-height:calc(90svh - 150px);gap:70px}.hero h1{font-size:clamp(43px,9vw,57px);line-height:1.14}html[lang="zh-Hant"] .hero h1{font-size:clamp(34px,7.9vw,45px);line-height:1.35}.hero-bottom{font-size:14px;gap:26px}.work-section{padding-top:30px;padding-bottom:50px}.section-intro{margin-bottom:36px}.gallery{grid-template-columns:1fr;gap:48px}.tile:nth-child(n){grid-column:1}.tile .cover{aspect-ratio:4/3}.caption h2{font-size:17px}.caption{padding-top:16px}.about{grid-template-columns:1fr;margin-top:48px;padding:56px 0 64px;gap:32px}.about h2{font-size:38px}.about p{font-size:17px}.contact{padding:56px 0 80px}.contact h2{font-size:43px;line-height:1.3}.contact p{margin-left:0;font-size:17px}.site-footer{grid-template-columns:1fr 1fr;gap:32px;font-size:14px;padding-top:40px}.footer-brand{grid-column:1/-1}.project-main{padding-top:35px}.project-title h1{font-size:38px;line-height:1.3}.project-title{margin-bottom:46px}.film{margin-bottom:48px}.project-story{grid-template-columns:1fr;gap:28px;padding:32px 0 56px}.project-description>p{font-size:23px;margin-bottom:40px}.sidebar-story p{font-size:17px}.sidebar-story{margin-bottom:40px}.image-grid{grid-template-columns:1fr;gap:24px;margin-bottom:72px}.depth-frame:first-child{grid-column:auto}.project-nav{padding-top:36px;gap:24px}.project-nav a{font-size:22px;max-width:46%}.project-nav small{font-size:12px;margin-bottom:18px}.section-heading h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile img,.depth-frame img{transform:none;top:0;height:auto}.tile img{height:100%}.caption,.hero h1,.about h2,.contact h2,.section-heading h2{translate:none}}

.mobile-break{display:none}@media(max-width:600px){.mobile-break{display:block}.hero{gap:56px;min-height:calc(85svh - 150px)}}

/* A circular showreel in the open space beside the opening typography. */
.hero-composition{position:relative}.hero h1{position:relative;z-index:1}.hero-reel{position:absolute;right:4%;top:43%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;border:0;padding:0;background:none;color:var(--ink);font:inherit}.reel-disc{display:block;position:relative;width:clamp(130px,14vw,210px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#161616;box-shadow:0 0 0 1px #17171714;transition:transform .35s ease}.reel-disc img{width:100%;height:100%;object-fit:cover;filter:brightness(.65);transition:filter .35s ease,transform .5s ease}.reel-disc svg{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);color:white}.reel-disc-label{font-size:14px;font-weight:500}.hero-reel:hover .reel-disc{transform:scale(1.045)}.hero-reel:hover img{filter:brightness(.85);transform:scale(1.05)}.hero-reel:disabled{opacity:.5;cursor:wait}.more-work{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:100px;padding-top:44px;border-top:1px solid #ddd}.more-work a{font-size:clamp(30px,3.5vw,54px);letter-spacing:-.04em;font-weight:600}.more-work span{font-size:16px;color:#888}.archive-main{padding-bottom:100px}.archive-heading{padding:110px var(--edge) 90px}.archive-heading h1{font-size:clamp(50px,7vw,108px);font-weight:600;letter-spacing:-.05em;line-height:1.15;margin:0 0 32px}.archive-heading p{font-size:19px;color:#888;line-height:1.7;margin:0}.archive-work{padding-top:20px;padding-bottom:80px}.archive-back{margin:0 var(--edge);padding-top:36px;border-top:1px solid #ddd;font-size:20px}@media(max-width:1100px){.hero-reel{right:0;top:43%}.reel-disc{width:145px}}@media(max-width:900px){.hero-composition{display:flex;flex-direction:column;gap:40px}.hero-reel{position:static;align-self:flex-end;margin-right:7%;gap:12px}.reel-disc{width:150px}.hero{gap:70px}.hero h1{text-indent:0}}@media(max-width:600px){.hero-composition{gap:36px}.hero-reel{margin-right:2%;align-self:flex-end}.reel-disc{width:140px}.reel-disc-label{font-size:13px}.hero{min-height:0}.more-work{margin-top:60px;display:block;padding-top:32px}.more-work span{display:block;margin-top:18px;font-size:14px}.archive-heading{padding-top:45px;padding-bottom:50px}.archive-heading h1{font-size:48px}.archive-heading p{font-size:17px}}@media(prefers-reduced-motion:reduce){.reel-disc,.reel-disc img{transition:none}}
/* Rounded imagery and a connected Hansen brand family. */
.tile .cover,.depth-frame,.image-grid>img,iframe{border-radius:18px}.brand-network{margin:0 var(--edge);padding:72px 0 88px;border-top:1px solid #ddd}.network-heading{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:40px}.network-heading h2{font-size:30px;font-weight:600;letter-spacing:-.035em;margin:0}.network-heading p{font-size:15px;color:#888;margin:0;line-height:1.7}.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.network-link{border-radius:20px;background:#191919;color:#fff;min-height:230px;padding:44px 32px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:background .25s ease}.network-link:hover{background:#303030}.network-link>span:last-child{font-size:14px;color:#bdbdbd}.network-logo{position:relative;display:block;width:min(320px,85%);height:92px;overflow:hidden}.tools-logo img{display:block;width:100%;height:100%;object-fit:contain}.personal-logo img{position:absolute;width:212%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-reel{will-change:translate}@media(max-width:600px){.brand-network{padding:48px 0 60px}.network-heading{display:block;margin-bottom:28px}.network-heading h2{font-size:27px;margin-bottom:16px}.network-grid{grid-template-columns:1fr;gap:20px}.network-link{min-height:200px;padding:32px 24px;gap:24px}.network-logo{max-width:280px;height:80px}.tile .cover,.depth-frame,.image-grid>img,iframe{border-radius:14px}}@media(prefers-reduced-motion:reduce){.network-link{transition:none}.hero-reel{translate:none!important}}
/* Light brand links, focused reel interaction, chronological archive. */
.network-link{background:transparent;color:#171717;border-radius:0;border-top:1px solid #ddd;transition:border-color .25s ease}.network-link:hover{background:transparent;border-color:#171717}.network-logo img{filter:brightness(0)}.network-link>span:last-child{color:#777}.hero-reel{right:8%}.hero-reel .reel-disc{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}.hero-reel:hover .reel-disc,.hero-reel:focus-visible .reel-disc{transform:scale(1.09);box-shadow:0 0 0 9px #1717170b}.hero-reel .reel-disc svg{transition:transform .35s ease}.hero-reel:hover .reel-disc svg,.hero-reel:focus-visible .reel-disc svg{transform:translate(-50%,-50%) scale(1.18)}.hero-reel:hover .reel-disc img{filter:brightness(.82);transform:scale(1.04)}.archive-work .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px}.archive-work .tile:nth-child(n){grid-column:auto;margin-top:0}.archive-work .tile .cover{aspect-ratio:4/3}.archive-work .caption{translate:none}.archive-work .caption h2{font-size:17px;line-height:1.6}.archive-work .caption p{font-size:13px}@media(max-width:1100px){.hero-reel{right:5%}.archive-work .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.hero-reel{margin-right:12%}}@media(max-width:600px){.hero-reel{margin-right:8%}.archive-work .gallery{grid-template-columns:1fr;gap:40px}.network-link{min-height:175px;padding:28px 24px}.network-grid{gap:12px}}@media(prefers-reduced-motion:reduce){.hero-reel .reel-disc,.hero-reel .reel-disc svg{transition:none}.hero-reel:hover .reel-disc,.hero-reel:focus-visible .reel-disc{transform:none}}
/* Compact navigation and a stationary, larger showreel. */
.wordmark{max-width:160px}.work-actions{display:flex;align-items:center;gap:24px}.more-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:1px solid #bbb;border-radius:24px;font-size:14px;line-height:1.4;transition:background .2s,color .2s,border-color .2s}.more-button:hover{background:#171717;color:#fff;border-color:#171717}.network-link{border:0}.network-logo{width:min(250px,80%);height:76px}.personal-logo{width:min(228px,74%);height:76px}.hero-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.64fr);gap:5vw;align-items:center}.hero h1{text-indent:0!important;font-size:clamp(46px,5vw,82px);line-height:1.13}html[lang="zh-Hant"] .hero h1{font-size:clamp(36px,4.15vw,64px);line-height:1.3}.hero-reel{position:static;justify-self:center;align-self:center;margin:0!important;translate:none!important;will-change:auto;width:var(--reel-size,320px);max-width:100%;padding:0;display:block}.hero-reel .reel-disc{width:100%;aspect-ratio:1;transition:box-shadow .3s ease}.hero-reel:hover .reel-disc,.hero-reel:focus-visible .reel-disc{transform:none;box-shadow:0 0 0 7px #17171708}.hero-reel .reel-disc img,.hero-reel:hover .reel-disc img{transform:translate3d(var(--reel-x,0px),var(--reel-y,0px),0) scale(1.11);transition:filter .3s ease}.hero-reel:hover .reel-disc img{filter:brightness(.78)}.hero-reel .reel-disc svg{width:44px;height:44px}.hero-reel:hover .reel-disc svg{transform:translate(-50%,-50%) scale(1.08)}@media(max-width:900px){.hero-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:4vw}.hero h1{font-size:clamp(38px,5vw,55px)}html[lang="zh-Hant"] .hero h1{font-size:clamp(30px,4.1vw,38px)}.hero-reel .reel-disc{width:100%}}@media(max-width:600px){.wordmark{max-width:140px}.work-actions{gap:12px}.work-actions>span{display:none}.more-button{font-size:13px;padding:8px 14px}.hero-composition{grid-template-columns:1fr;gap:36px}.hero h1{font-size:43px}html[lang="zh-Hant"] .hero h1{font-size:34px}.hero-reel{justify-self:center;width:240px;max-width:80%}.network-logo{max-width:230px;height:68px}.personal-logo{max-width:210px;height:68px}.network-link{min-height:150px}}@media(prefers-reduced-motion:reduce){.hero-reel .reel-disc img{transform:scale(1.11)!important}}
@media(min-width:901px){.hero-composition{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:4vw}.hero h1{font-size:clamp(52px,5.8vw,96px)}html[lang="zh-Hant"] .hero h1{font-size:clamp(42px,4.7vw,72px)}}
.work-end{display:flex;justify-content:flex-end;margin-top:48px}.about h2,.about p{white-space:pre-line}.work-end .more-button{font-size:14px;padding:10px 20px}@media(max-width:600px){.work-end{margin-top:36px;justify-content:center}.about h2{font-size:34px}}
/* Center the small archive entry under selected projects. */
.work-end{justify-content:center}

/* Noto Sans TC + Inter: consistent, restrained typography. */
body{font-family:"Inter","Noto Sans TC","PingFang TC",sans-serif;font-weight:400}.hero h1,.project-title h1,.archive-heading h1,.about h2,.contact h2,.section-heading h2,.more-work a,.footer-brand{font-weight:500}.caption h2,.section-intro h2,.network-heading h2{font-weight:500}.hero h1,.project-title h1,.archive-heading h1,.contact h2,.about h2{letter-spacing:-.035em}html[lang="zh-Hant"] .hero h1,html[lang="zh-Hant"] .project-title h1,html[lang="zh-Hant"] .archive-heading h1,html[lang="zh-Hant"] .about h2,html[lang="zh-Hant"] .contact h2,html[lang="zh-Hant"] .section-heading h2{font-weight:500;letter-spacing:0}html[lang="zh-Hant"] .caption h2{letter-spacing:.01em}.about p,.project-description>p,.sidebar-story p,.contact p{font-weight:400;letter-spacing:0}.nav-pair,.more-button{font-weight:400}
/* Desktop hover films retain the same crop and poster as their first frame. */
.cover .hover-film{position:absolute;inset:-6% 0 auto;width:100%;height:112%;object-fit:cover;pointer-events:none;opacity:0;transform:translate3d(0,var(--image-drift,0px),0);filter:brightness(.85);transition:opacity .15s ease;z-index:1}.tile.preview-playing .hover-film{opacity:1}@media(hover:none),(pointer:coarse),(max-width:700px),(prefers-reduced-motion:reduce){.cover .hover-film{display:none}}
.email-action{margin:48px 0 0 50%;display:flex;flex-direction:column;align-items:flex-start;gap:24px}.contact-email{font-size:clamp(21px,2.6vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.5;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;overflow-wrap:anywhere}.email-button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:12px 24px;border-radius:28px;background:#171717;color:#fff;font-size:15px;transition:background .2s}.email-button:hover{background:#444}.site-footer a[data-contact-email]{font-size:14px;overflow-wrap:anywhere}@media(max-width:600px){.email-action{margin-left:0;margin-top:32px}.contact-email{font-size:23px}.email-button{font-size:14px}}