header nav a:last-child{border:0;padding:0}nav a[aria-current=page]{color:var(--accent)}.portfolio,.project-page,.about-page{margin:0 5%;padding:45px 0 35px;min-height:calc(100vh - 180px)}.portfolio-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.portfolio-heading .eyebrow{margin-bottom:12px}h1{font-size:clamp(32px,3.7vw,60px);letter-spacing:-2px;line-height:1.3;font-weight:400;margin:0}.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--line);margin-bottom:12px}.filters button{padding:9px 13px}.portfolio-toolbar>span{font-size:9px;letter-spacing:1px;color:var(--muted);white-space:nowrap}.projects{gap:32px 25px}.visual{aspect-ratio:1.85}.project-info h2{font-size:16px;letter-spacing:0;line-height:1.5;margin:0 0 7px}.project-info h2 a:hover{color:var(--accent)}.page-note{font-size:10px;color:var(--muted);line-height:1.8;margin:30px 0 0}footer{border-top:1px solid var(--line)}.back-link{font-size:11px;color:var(--muted)}.project-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0}.project-heading .eyebrow{margin-bottom:12px}.project-heading>p{font-size:12px;line-height:2}.project-heading>p span{color:var(--muted);font-size:10px}.detail-cover{aspect-ratio:2.2;max-height:620px}.detail-cover .motion-word{font-size:clamp(80px,11vw,180px);top:13%;left:35%}.project-summary{display:grid;grid-template-columns:2fr 1fr;gap:8%;margin:40px 0}.project-summary h2{font-size:12px;letter-spacing:1px;margin-bottom:15px}.project-summary p,.project-breakdown>p{font-size:13px;line-height:2;color:var(--muted)}.project-summary aside section{border-top:1px solid var(--line);padding:20px 0 10px}.video-slot{min-height:180px;border:1px solid var(--line);margin-top:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#192018}.video-slot>span{font-size:25px;color:var(--accent)}.video-slot p{margin:10px}.video-slot small{font-size:10px;color:var(--muted)}.project-breakdown{border-top:1px solid var(--line);padding-top:35px}.project-breakdown h2{font-size:30px}.breakdown-slots{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.breakdown-slots>div{aspect-ratio:1.9;background:#1c241b;border:1px dashed #46513e;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.breakdown-slots span{font-size:9px;letter-spacing:1px;color:var(--muted)}.breakdown-slots p{font-size:13px}.project-end{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:40px;padding-top:30px;font-size:14px}.project-end small{display:block;font-size:11px;color:var(--muted);margin-top:10px}.about-page>.eyebrow{margin-bottom:15px}.about-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;margin-top:45px}.about-columns .muted{font-size:13px;line-height:2}.contact-card{padding:30px;background:#1a2218;align-self:start}.contact-card h2{font-size:28px}.contact-card>p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted)}.contact-card .outline{margin-top:20px}@media(max-width:760px){.portfolio,.project-page,.about-page{padding-top:30px}.portfolio-heading{display:block;margin-bottom:25px}.portfolio-heading .intro{margin-top:15px;font-size:11px}h1{font-size:36px;letter-spacing:-1px}.portfolio-toolbar{display:block}.portfolio-toolbar>span{display:block;margin:15px 0 5px}.filters button{font-size:10px;padding:8px 11px}.projects{grid-template-columns:1fr;gap:28px}.visual{aspect-ratio:1.65}.project-heading{display:block;margin:25px 0}.project-heading>p{margin-bottom:0}.project-heading h1{font-size:30px}.detail-cover{aspect-ratio:1.6}.detail-cover .motion-word{font-size:22vw;left:20%;top:15%}.project-summary,.about-columns{grid-template-columns:1fr;gap:30px;margin-top:30px}.breakdown-slots{gap:12px}.breakdown-slots>div{aspect-ratio:1.3;padding:12px}.project-end{gap:20px}.project-end small{max-width:160px}.contact-card{padding:25px}header nav{gap:15px}header nav a{font-size:10px}footer>span{width:auto;order:initial}}
/* Project-led revision: neutral palette and factual project metadata. */
:root{--bg:#151515;--fg:#f1f1f1;--muted:#aaa;--line:#393939;--accent:#fff}header{height:90px}.brand{font-size:21px;letter-spacing:-.6px}.brand small{color:var(--muted);font-size:8px;letter-spacing:1px}nav a[aria-current=page]{border-bottom:1px solid #fff;padding-bottom:5px}.portfolio{padding-top:42px}.portfolio-heading{align-items:center;margin-bottom:32px}.portfolio-heading h1{font-size:40px;letter-spacing:-1px}.project-filters{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px;font-size:12px}.project-filters label span{color:var(--muted);margin-left:5px}.project-filters select{font:inherit;color:var(--fg);background:#202020;border:1px solid #656565;padding:11px 35px 11px 12px;min-width:230px;border-radius:0}.project-filters button{padding:12px 18px;background:#efefef;color:#171717}.project-filters #reset-filters{background:transparent;color:var(--muted);padding:12px 5px;text-decoration:underline;text-underline-offset:4px}.project-filters>span{margin-left:auto;font-size:11px;color:var(--muted)}.project-filters select:focus-visible{outline:2px solid #fff;outline-offset:4px}.projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px}.visual{aspect-ratio:16/9;background:#242424}.cover-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#777;letter-spacing:2px}.cover-placeholder span{font-size:10px;letter-spacing:0;color:#999;margin-top:9px}.project-info{margin-top:17px}.project-info>span{display:none}.project-info h2{font-size:21px;font-weight:500;margin:9px 0 12px;letter-spacing:-.4px}.project-info p{letter-spacing:0;line-height:1.8}.project-info .project-kind{font-size:10px;color:#aaa}.project-info .project-role{font-size:11px;color:#ddd}.project-info .project-description{font-size:12px;color:#aaa;margin-top:9px}.project-more{display:inline-block;margin-top:18px;font-size:11px;border-bottom:1px solid #777;padding-bottom:4px}.project-more:hover{border-color:#fff}.detail-cover{background:#242424;aspect-ratio:2.2}.video-slot,.breakdown-slots>div,.contact-card{background:#202020}.breakdown-slots>div{border-color:#555}.project-heading h1{font-size:38px}.project-summary h2{font-size:12px}.page-note{color:#999}a:hover{color:#fff}.outline{border-color:#777;border-radius:0}.outline:hover{background:#fff;color:#151515}@media(min-width:1700px){.projects{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1050px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.project-filters{flex-wrap:wrap}.project-filters>span{margin-left:0}}@media(max-width:600px){.projects{grid-template-columns:1fr}.portfolio-heading{display:block}.portfolio-heading h1{font-size:34px}.project-filters{gap:12px}.project-filters label{width:100%}.project-filters select{flex:1;min-width:0;max-width:100%}.project-filters>span{width:100%;margin-top:3px}.project-info h2{font-size:21px}.project-heading h1{font-size:30px}.detail-cover{aspect-ratio:16/9}}

.brand{font-size:24px;letter-spacing:-.7px;font-weight:600}nav .language-switch{font-size:11px;color:var(--muted);border-left:1px solid var(--line);padding-left:18px}.type-toolbar{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:30px;font-size:12px}.type-toolbar>span{color:var(--muted)}.type-tabs{display:flex;flex-wrap:wrap;gap:24px}.type-tabs button{font-size:12px;padding:12px 0;background:transparent;color:var(--muted);border-bottom:2px solid transparent}.type-tabs button:hover{color:var(--fg)}.type-tabs button.active{color:var(--fg);border-bottom-color:var(--fg)}.type-toolbar>span:last-child{font-size:11px;margin-left:auto;white-space:nowrap}@media(max-width:760px){.type-toolbar{gap:12px;flex-wrap:wrap}.type-tabs{gap:18px}.type-toolbar>span:first-child{width:100%}.type-toolbar>span:last-child{margin-left:0;width:100%;padding-bottom:8px}nav .language-switch{padding-left:12px}.brand{font-size:21px}}

/* Project detail: one full-width film, followed by separate credits. */
.project-heading .project-category{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 5px}.project-film{width:100%}.full-video-placeholder{aspect-ratio:16/9;background:#242424;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;color:var(--muted)}.full-video-placeholder>span{font-size:28px;color:#999}.full-video-placeholder p{font-size:14px;margin:15px 0 10px}.full-video-placeholder small{font-size:11px;line-height:1.8}.project-film video,.project-film iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.project-credits{display:grid;grid-template-columns:1fr 3fr;gap:30px;margin-top:40px;border-top:1px solid var(--line);padding-top:28px}.project-credits h2{font-size:24px;letter-spacing:0;font-weight:400;margin:0}.project-credits dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0}.project-credits dt{font-size:11px;color:var(--fg);margin-bottom:12px}.project-credits dd{font-size:12px;line-height:1.9;color:var(--muted);margin:0}@media(max-width:760px){.project-credits{grid-template-columns:1fr;gap:22px;margin-top:28px;padding-top:24px}.project-credits dl{grid-template-columns:1fr;gap:20px}.project-credits h2{font-size:22px}.project-credits dt{margin-bottom:6px}.full-video-placeholder{padding:15px}.full-video-placeholder small{font-size:10px}.project-heading .project-category{margin-top:16px}}

/* Cover above; equal-width full film and free-form credits below. */
.project-media-credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:40px}.project-media-credits .project-credits{display:block;margin:0;border:0;padding:0}.project-media-credits .project-credits h2{margin:0 0 20px;font-size:24px}.credits-text{font-size:13px;line-height:1.95;color:var(--muted);overflow-wrap:anywhere}.credits-text p{margin:0 0 1em;white-space:pre-line}.project-media-credits .project-film{min-width:0}.detail-cover{aspect-ratio:2.2}@media(max-width:760px){.project-media-credits{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:28px}.project-media-credits .project-credits h2{font-size:22px;margin-bottom:15px}.detail-cover{aspect-ratio:16/9}}

/* Typography, editorial grid, sticky navigation and restrained movement. */
:root{font-family:"Helvetica Neue","Segoe UI Variable","Segoe UI","Microsoft JhengHei",sans-serif;--header-height:86px}html{scroll-padding-top:170px;scrollbar-gutter:stable}body{background:#161616}header{position:sticky;top:0;z-index:50;height:var(--header-height);margin:0;padding:0 5%;background:#161616f5;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff1c}.brand{font-size:26px;font-weight:650;letter-spacing:-1.4px}header nav a{position:relative;transition:color .2s,opacity .2s}header nav a:hover{opacity:.65}header nav a[aria-current=page]{border:0;padding:0}header nav a[aria-current=page]:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:#eee}.portfolio-heading{padding:12px 0 24px}.portfolio-heading h1{font-size:clamp(38px,4.6vw,72px);font-weight:500;letter-spacing:-2.8px}.intro{line-height:1.9}.type-toolbar{position:sticky;top:var(--header-height);z-index:40;background:#161616f5;backdrop-filter:blur(16px);padding:11px 0;margin-bottom:36px;gap:28px}.type-tabs{gap:35px}.type-tabs button{font-size:14px;letter-spacing:.2px;position:relative;transition:color .2s,background .2s;min-height:44px;border:0}.type-tabs button:after{content:"";position:absolute;bottom:1px;left:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.type-tabs button.active:after,.type-tabs button:hover:after{transform:scaleX(1)}.projects{gap:48px 28px}.projects article{min-width:0}.visual{transition:filter .35s;background:radial-gradient(ellipse at 80% 25%,hsl(var(--cover-hue,200) 9% 29%),transparent 65%),linear-gradient(140deg,#292929,#202020);border:1px solid #ffffff08}.visual:after{content:"↗";position:absolute;right:18px;top:14px;font-size:22px;opacity:0;transform:translate(-5px,5px);transition:opacity .25s,transform .25s}.visual:hover{filter:none}.visual:hover:after{opacity:1;transform:none}.cover-placeholder{letter-spacing:0}.cover-placeholder>.cover-index{font-size:clamp(50px,6vw,110px);font-weight:300;line-height:1;color:#ffffff20;letter-spacing:-5px}.cover-placeholder>span:last-child{font-size:10px;color:#aaa;margin-top:14px}.project-info{position:relative;padding-left:31px}.project-info>.project-index{display:block;position:absolute;left:0;top:2px;color:#777;font-size:10px}.project-info h2{font-size:21px;font-weight:450;margin:8px 0;letter-spacing:-.7px}.project-info .project-kind{font-size:10px;letter-spacing:.5px}.project-info .project-description{font-size:11px;color:#888}.project-more{transition:opacity .2s,border-color .2s}.project-more:hover{opacity:.65}.reveal-ready{opacity:0;transform:translateY(20px);transition:opacity .55s,transform .65s}.reveal-ready.is-visible{opacity:1;transform:none}.about-page{padding-top:70px}.about-page>h1{font-size:clamp(46px,6.5vw,100px);line-height:1.2;letter-spacing:-4px;font-weight:400}.about-page>h1>span{color:#929292}.about-page>h1>.about-join{font-size:.38em;vertical-align:middle;color:#929292;margin-left:14px}.contact-details{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid var(--line);margin-top:65px;padding:32px 0 35px}.contact-details h2{font-size:18px;letter-spacing:0}.contact-label{font-size:11px;color:#999;margin:0 0 16px}.email-link{display:inline-flex;gap:30px;align-items:center;font-size:clamp(18px,2.6vw,38px);letter-spacing:-1px;border-bottom:1px solid #777;padding-bottom:12px;overflow-wrap:anywhere;max-width:100%;transition:border-color .2s}.email-link:hover{border-color:#fff}.email-link span{font-size:.7em}.contact-secondary{margin-top:40px}.contact-details .muted{font-size:12px}.site-footer{display:block;margin:65px 5% 0;padding:42px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:60px}.footer-wordmark{display:flex;gap:45px;font-size:clamp(28px,4.5vw,68px);letter-spacing:-3px;color:#eee;font-weight:500;align-self:start}.footer-wordmark span{font-size:.7em}.footer-social{display:grid;gap:15px;min-width:200px}.footer-social p{font-size:10px;letter-spacing:1px;color:#888;margin:0 0 8px}.footer-social a,.social-pending{font-size:13px;color:#ddd}.footer-social a:hover{text-decoration:underline;text-underline-offset:5px}.social-pending small{font-size:10px;color:#777;margin-left:15px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #333;font-size:9px;color:#888}@view-transition{navigation:auto}::view-transition-old(root){animation:page-out .18s ease both}::view-transition-new(root){animation:page-in .3s ease both}@keyframes page-out{to{opacity:0}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:760px){:root{--header-height:76px}.brand{font-size:23px}.portfolio-heading{padding:0 0 8px}.portfolio-heading h1{font-size:42px;letter-spacing:-2px}.type-toolbar{flex-wrap:nowrap;padding:8px 0;gap:15px;margin-bottom:26px}.type-tabs{gap:24px;flex-wrap:nowrap}.type-tabs button{font-size:12px;white-space:nowrap}.type-toolbar>span:last-child{width:auto;margin-left:auto;padding:0;font-size:9px}.projects{gap:35px 20px}.cover-placeholder>.cover-index{font-size:75px}.about-page{padding-top:45px}.about-page>h1{font-size:48px;letter-spacing:-2px}.contact-details{grid-template-columns:1fr;margin-top:40px;gap:25px}.email-link{font-size:clamp(16px,5.3vw,26px);gap:14px;letter-spacing:-.5px}.site-footer{margin-top:35px}.footer-top{flex-direction:column;padding-bottom:35px;gap:35px}.footer-wordmark{font-size:44px;letter-spacing:-2px}.footer-bottom{flex-wrap:wrap;font-size:8px}.site-footer>div{width:100%}header nav{gap:12px}header nav a{font-size:10px}}@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}html{scroll-behavior:auto}}
/* Paginated work and distinct dark footer. */
.pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin:48px 0 20px;flex-wrap:wrap}.pagination button{min-width:44px;min-height:44px;background:transparent;border:1px solid #444;color:#aaa;padding:10px 15px;transition:background .2s,color .2s,border-color .2s}.pagination button:hover:not(:disabled){background:#303030;color:#fff;border-color:#888}.pagination button[aria-current=page]{background:#eee;color:#161616;border-color:#eee}.pagination button:disabled{opacity:.3;cursor:default}.site-footer{margin:65px 0 0;padding:48px 5% 24px;background:#0c0c0c;border-top:1px solid #303030}.email-control{position:relative;display:inline-block;max-width:100%}.email-copy{font:inherit;text-align:left;color:inherit;background:transparent;padding:0;cursor:pointer}.email-copy:hover{color:#fff}.footer-social .email-copy{font-size:13px;color:#ddd;line-height:1.9}.footer-email-address{display:block;font-size:11px;color:#888;overflow-wrap:anywhere}.email-toast{position:absolute;bottom:calc(100% + 13px);left:0;max-width:min(310px,80vw);width:max-content;padding:11px 15px;background:#e5e5e5;color:#171717;border:1px solid #fff;font-size:12px;line-height:1.6;box-shadow:0 8px 30px #0006;z-index:60;pointer-events:none;overflow-wrap:anywhere}.email-toast:after{content:'';position:absolute;top:100%;left:18px;border:6px solid transparent;border-top-color:#e5e5e5}.email-toast[hidden]{display:none}.contact-details .email-copy{font-size:clamp(18px,2.6vw,38px);padding-bottom:12px}.type-toolbar{scroll-margin-top:var(--header-height)}@media(max-width:760px){.site-footer{margin-top:35px;padding:35px 5% 22px}.pagination{gap:8px;margin-top:35px}.pagination button{font-size:12px;padding:9px 12px}.contact-details .email-copy{font-size:clamp(16px,5.3vw,26px)}}

/* Stable pagination, subtle atmospheric background and pointer light. */
body{isolation:isolate;background-color:#161616;background-image:radial-gradient(ellipse at 12% 8%,#a5a09009,transparent 48%),radial-gradient(ellipse at 95% 48%,#83909b07,transparent 48%);background-attachment:fixed}body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.22' d='M0 0h160v160H0z'/%3E%3C/svg%3E");background-size:160px 160px}.pointer-glow{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(circle 340px at var(--glow-x,50%) var(--glow-y,30%),#e2d6b312 0%,#c8d3dd07 45%,transparent 100%);transition:opacity .35s}.pointer-glow.is-active{opacity:1}.projects{align-content:start;overflow-anchor:none}.pagination{overflow-anchor:none}.email-toast{will-change:opacity}@media(any-hover:none){.pointer-glow{display:none}}@media(prefers-reduced-motion:reduce){.pointer-glow{display:none}.email-toast{will-change:auto}}

/* Darker base keeps the pointer light legible. Short pages use natural height. */
:root{--bg:#101010}body{background-color:#101010;background-image:radial-gradient(ellipse at 12% 8%,#a5a09005,transparent 48%),radial-gradient(ellipse at 95% 48%,#83909b04,transparent 48%)}header,.type-toolbar{background:#101010f5}.site-footer{background:#080808}.projects{min-height:0}body:before{opacity:.1}
/* Full-bleed category strip; content remains aligned to the work grid. */
.type-toolbar{isolation:isolate;background:transparent;backdrop-filter:none;border-top-color:transparent;border-bottom-color:transparent;overflow:visible}
.type-toolbar:before{content:'';position:absolute;inset:-1px calc(-100vw) -1px;z-index:-1;background:#101010f5;backdrop-filter:blur(16px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);pointer-events:none}
html{overflow-x:clip}

/* About heading: once on entry, never dependent on hover. */
.about-page>h1.about-animated-title{line-height:1.3}
.about-page>h1.about-animated-title>span{display:block;width:fit-content;max-width:100%;opacity:1;clip-path:inset(0);transform:none;overflow-wrap:anywhere}
.about-page>h1.about-animated-title>.title-post{color:#f1f1f1;animation:post-mask-reveal 1000ms cubic-bezier(.2,.65,.3,1) 1 both}
.about-page>h1.about-animated-title>.title-motion{color:#b8b8b8;animation:motion-type-settle 1100ms cubic-bezier(.2,.7,.25,1) 1 both}
@keyframes post-mask-reveal{0%{clip-path:inset(0 100% 0 0)}12%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0)}}
@keyframes motion-type-settle{0%{letter-spacing:.055em;transform:translateY(12px)}100%{letter-spacing:inherit;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.about-page>h1.about-animated-title>span{animation:none!important;opacity:1;clip-path:none;transform:none;letter-spacing:inherit}}

/* Pointer study: stable typography with local fill reveal, no entrance animation. */
.about-page>h1.about-animated-title>.title-post,.about-page>h1.about-animated-title>.title-motion{animation:none!important;transform:none;letter-spacing:inherit;clip-path:none}
.about-page>h1.about-animated-title>.title-post{position:relative;color:#eee}
.post-base{display:block;color:#eee}
.post-reveal{display:none}
@media(any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){
 @supports (mask-image:radial-gradient(circle,white,transparent)) or (-webkit-mask-image:radial-gradient(circle,white,transparent)){
  .post-base{color:#858585;-webkit-text-stroke:1px #b7b7b7}
  .post-reveal{display:block;position:absolute;inset:0;color:#f5f5f5;pointer-events:none;opacity:0;-webkit-mask-image:radial-gradient(circle 200px at var(--text-x,-400px) var(--text-y,-400px),#fff 0%,#fff 36%,#ffffffb3 60%,transparent 100%);mask-image:radial-gradient(circle 200px at var(--text-x,-400px) var(--text-y,-400px),#fff 0%,#fff 36%,#ffffffb3 60%,transparent 100%);transition:opacity .2s}
  .title-post.is-lit .post-reveal{opacity:1}
 }
}

/* Both headings share the same understated outline and pointer reveal. */
.about-page>h1.about-animated-title>.title-motion{position:relative}
@media(any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){
 @supports (mask-image:radial-gradient(circle,white,transparent)) or (-webkit-mask-image:radial-gradient(circle,white,transparent)){
  .about-animated-title .post-base{color:#ffffff05;-webkit-text-stroke:.8px #777777}
  .title-motion.is-lit .post-reveal{opacity:1}
 }
}

.brand{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.brand-logo{display:block;width:54px;height:54px;object-fit:contain;flex-shrink:0}.brand .brand-name{color:var(--fg)}.project-cover-image{display:block;width:100%;height:100%;object-fit:cover}.hdre-cover{aspect-ratio:3830/1939;max-height:none}.hdre-cover .project-cover-image{object-fit:contain}.video-external{display:inline-block;font-size:11px;color:var(--muted);padding:13px 0;text-decoration:underline;text-underline-offset:4px}@media(max-width:600px){.brand{font-size:19px;gap:3px}.brand-logo{width:36px;height:36px}header{gap:10px}header nav{gap:10px}}

/* Film first: full-width player, then cover and credits side by side. */
.project-page>.project-film{width:100%;margin:0}.project-page>.project-film iframe,.project-page>.project-film video{display:block;width:100%;aspect-ratio:16/9}.project-media-credits>.detail-cover{width:100%;height:auto;aspect-ratio:16/9;align-self:start;max-height:none}.project-media-credits>.hdre-cover{aspect-ratio:3830/1939}.project-media-credits>.detail-cover img{width:100%;height:100%;object-fit:contain}

/* Compact captions keep project imagery dominant. */
.portfolio .projects{column-gap:16px;row-gap:26px}
.portfolio .project-info{display:block;margin-top:10px;padding-left:0}
.portfolio .project-info h2{font-size:16px;line-height:1.45;font-weight:500;letter-spacing:-.25px;margin:0 0 4px}
.portfolio .project-info .project-description{font-size:11px;line-height:1.5;margin:0;color:#999}
@media(max-width:760px){.portfolio .projects{column-gap:14px;row-gap:24px}.portfolio .project-info{margin-top:9px}.portfolio .project-info h2{font-size:16px;line-height:1.5;margin-bottom:3px}}
/* Project stills and viewport-contained, consistently sized image lightbox. */
.project-stills{min-width:0;display:grid;gap:20px;align-self:start}.project-stills>.detail-cover{aspect-ratio:3830/1939;max-height:none}.project-additional-stills{display:grid;gap:20px}.project-additional-stills>img{display:block;width:100%;height:auto}.image-zoom{display:block;width:100%;padding:0;background:transparent;cursor:zoom-in;border:0}.image-zoom img{display:block;width:100%;height:auto}.detail-cover>.image-zoom{height:100%}.detail-cover>.image-zoom img{height:100%;object-fit:contain}
/* One sizing contract: header + intrinsic-ratio image + measured caption. */
.image-lightbox{box-sizing:border-box;margin:auto;width:var(--lightbox-width,90vw);height:auto;max-width:94vw;max-height:90dvh;padding:0;border:1px solid #444;background:#111;color:#eee;overflow:hidden;overscroll-behavior:contain}
.image-lightbox::backdrop{background:#000d;backdrop-filter:blur(8px)}
.lightbox-stage{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;height:auto;padding:0;cursor:zoom-out}
.lightbox-image{display:block;flex:none;align-self:center;width:var(--lightbox-image-width);height:var(--lightbox-image-height);max-width:100%;min-height:0;object-fit:contain;cursor:default}
.lightbox-close{position:relative;align-self:flex-end;flex:none;margin:6px 10px;height:32px;padding:6px 12px;border:1px solid #555;background:#222;color:#eee;font-size:11px;line-height:18px;cursor:pointer}
.lightbox-caption{position:static;flex:none;box-sizing:border-box;min-height:36px;max-height:96px;padding:10px 16px;margin:0;font-size:11px;line-height:16px;color:#aaa;text-align:center;overflow-wrap:anywhere;overflow:auto;pointer-events:auto;cursor:default}
.lightbox-nav{position:absolute;top:calc(44px + var(--lightbox-image-height)/2);transform:translateY(-50%);width:44px;height:60px;display:block;background:#111b;border:1px solid #ffffff44;color:#fff;font-size:0;padding:0;line-height:0;cursor:pointer;z-index:2;transition:background .2s}
.lightbox-prev{left:12px}.lightbox-next{right:12px}.lightbox-nav:hover{background:#111e}.lightbox-nav[hidden]{display:none}
.lightbox-nav::before{content:'';display:block;width:13px;height:13px;border-top:2px solid currentColor;border-right:2px solid currentColor;position:absolute;top:50%;left:50%}
.lightbox-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}.lightbox-next::before{transform:translate(-65%,-50%) rotate(45deg)}
@media(max-width:760px){.project-stills,.project-additional-stills{gap:15px}.lightbox-nav{width:38px;height:48px}.lightbox-prev{left:6px}.lightbox-next{right:6px}.lightbox-nav::before{width:11px;height:11px}}
.cursor-tracker{position:fixed;inset:0;z-index:65;pointer-events:none;user-select:none;contain:strict}
@media(any-hover:none),(prefers-reduced-motion:reduce){.cursor-tracker{display:none}}
/* Tracker shares the ambient background plane, below normal page content. */
.cursor-tracker{z-index:-1}

.project-page>.instagram-film iframe{display:block;width:min(100%,440px);height:720px;max-height:80dvh;aspect-ratio:auto;margin:0 auto}.credits-text a{text-decoration:underline;text-underline-offset:3px}
/* Extend navigation/footer surfaces even beyond a centered wide-screen layout. */
body>header,.site-footer{isolation:isolate;overflow:visible}
body>header::before,.site-footer::before{content:'';position:absolute;inset:0 -100vw;z-index:-1;pointer-events:none}
body>header::before{background:#101010f5;border-bottom:1px solid #ffffff1c;backdrop-filter:blur(16px)}
.site-footer{position:relative}.site-footer::before{background:#080808;border-top:1px solid #303030}
.contact-instagram{display:inline-block;font-size:18px;border-bottom:1px solid #777;padding-bottom:8px}.contact-instagram:hover{border-color:#fff}.comparison-help{font-size:12px;line-height:1.8;color:var(--muted)}.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:25px}.comparison-figure{margin:0;min-width:0}.image-comparison{position:relative;overflow:hidden;background:#222}.image-comparison>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.image-comparison>.compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-label{position:absolute;bottom:12px;padding:5px 8px;background:#111b;font-size:10px;color:#fff;pointer-events:none}.before-label{left:12px}.after-label{right:12px}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}.compare-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;background:#222c;color:#fff;font-size:18px}.image-comparison>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.image-comparison:focus-within{outline:2px solid #fff;outline-offset:4px}.comparison-figure figcaption{font-size:10px;letter-spacing:1px;color:#999;margin-top:10px}@media(max-width:760px){.comparison-grid{grid-template-columns:1fr;gap:22px}}
/* Single-column comparison gallery with geometrically centered chevrons. */
.comparison-grid{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:0}
.compare-divider>.compare-handle{font-size:0;line-height:0;padding:0}
.compare-handle::before,.compare-handle::after{content:'';position:absolute;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.compare-handle::before{left:9px;transform:translateY(-50%) rotate(-135deg)}
.compare-handle::after{right:9px;transform:translateY(-50%) rotate(45deg)}
@media(max-width:760px){.comparison-grid{gap:24px}}
/* Portrait cover trial: fills card width at its natural vertical ratio. */
.portfolio .visual.portrait-cover{aspect-ratio:auto;height:auto}
.portfolio .visual.portrait-cover .project-cover-image{height:auto;object-fit:contain}
/* Fixed-ratio project thumbnails regardless of source orientation. */
.portfolio .visual.portrait-cover{aspect-ratio:16/9;height:auto}.portfolio .visual.portrait-cover .project-cover-image{height:100%;object-fit:cover}
.video-breakdown{margin-top:45px;display:grid;gap:32px}.video-breakdown figure{margin:0;min-width:0}.video-breakdown video{display:block;width:100%;height:auto;background:#171717}.video-breakdown figcaption{font-size:12px;color:var(--muted);line-height:1.7;margin-top:10px}
/* Leave source-image luminance untouched; hover light stays outside the cover. */
.portfolio .visual{transition:box-shadow .25s,border-color .25s;filter:none}
.portfolio .visual:hover{filter:none}
.work-outline-title>.title-post{display:block;position:relative;width:fit-content}.work-outline-title .post-reveal{inset:0}
.external-project-cover{display:block;width:100%;height:100%}.external-project-cover img{width:100%;height:100%;object-fit:contain}
@media(any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){@supports (mask-image:radial-gradient(circle,white,transparent)) or (-webkit-mask-image:radial-gradient(circle,white,transparent)){.work-outline-title .post-base{color:#ffffff05;-webkit-text-stroke:.8px #777}}}

/* All image interactions preserve source pixels; only the outside lower edge glows. */
.visual,.visual:hover,.image-zoom,.image-zoom:hover,.external-project-cover,.external-project-cover:hover,.image-comparison,.image-comparison:hover{filter:none;transition:box-shadow .25s ease}
.visual:hover,.portfolio .visual:hover,.project-additional-stills .image-zoom:hover,.image-comparison:hover{filter:none;box-shadow:0 15px 20px -15px rgba(255,255,255,.48)}
.portfolio .visual:hover{border-color:#ffffff08}
.visual::after,.visual:hover::after{display:none}
.visual img,.visual:hover img,.image-zoom img,.image-zoom:hover img,.image-comparison img,.image-comparison:hover img,.lightbox-image{filter:none;opacity:1;mix-blend-mode:normal}
/* Work and About use the same headline typography and pointer-fill treatment. */
.portfolio-heading h1.work-outline-title{font-family:inherit;font-size:clamp(46px,6.5vw,100px);line-height:1.3;letter-spacing:-4px;font-weight:400}
.work-outline-title.about-animated-title>.title-post{display:block;position:relative;width:fit-content;max-width:100%;opacity:1;clip-path:none;transform:none;overflow-wrap:anywhere;animation:none!important}
@media(max-width:760px){.portfolio-heading h1.work-outline-title{font-size:48px;letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){.work-outline-title.about-animated-title>span{animation:none!important;clip-path:none;transform:none}}

/* All headline layers inherit the headline metrics, not legacy bilingual-caption metrics. */
.portfolio-heading h1.work-outline-title span{font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;margin-left:0}
.contact-behance{display:inline-block;margin-left:24px;font-size:18px;border-bottom:1px solid #777;padding-bottom:8px}.contact-behance:hover{border-color:#fff}
.project-media-credits+.instagram-film{margin-top:40px}
.additional-project-video{margin-top:40px}
.project-breakdown>.project-additional-stills img{display:block;width:100%;height:auto}

.project-media-credits.media-only{grid-template-columns:minmax(0,1fr)}.project-media-credits.media-only>.detail-cover{width:min(100%,900px)}
/* Readable navigation and section labels. */
.type-tabs button{font-size:17px;line-height:1.5}
.about-page>.eyebrow{font-size:16px;line-height:1.7;letter-spacing:1px}
body>header .brand{font-size:30px;letter-spacing:-1px}
body>header nav a,body>header nav .language-switch{font-size:15px;line-height:1.5}
.footer-social>p{font-size:12px;line-height:1.6;letter-spacing:.7px}
@media(max-width:760px){
 .type-tabs button{font-size:15px}
 .about-page>.eyebrow{font-size:15px}
 body>header .brand{font-size:25px}
 body>header nav a,body>header nav .language-switch{font-size:13px}
 .footer-social>p{font-size:12px}
}
@media(max-width:520px){
 :root{--header-height:108px}
 body>header{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px;align-content:center;gap:0;padding:8px 5%}
 body>header .brand{justify-self:start;font-size:25px}
 body>header nav{justify-self:end;gap:22px;align-items:center}
 body>header nav a{display:inline-flex;align-items:center;min-height:40px}
 body>header nav .language-switch{padding-left:16px}
 body>header nav a[aria-current=page]:after{bottom:2px}
 .type-tabs{gap:24px}
}

/* About: role typography left; biography, contact and social right. */
.about-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:7%;align-items:start;margin-top:30px}
.about-role-heading{min-width:0}
.about-role-heading>h1.about-animated-title{font-family:inherit;font-size:clamp(46px,5.7vw,92px);line-height:1.3;letter-spacing:-4px;font-weight:400;margin:0}
.about-role-heading>h1.about-animated-title>span{display:block;position:relative;width:fit-content;max-width:100%;opacity:1;clip-path:none;transform:none;animation:none!important;overflow-wrap:normal}
.about-role-heading .title-post{color:#f1f1f1}.about-role-heading .title-motion{color:#b8b8b8}
.about-information{min-width:0;padding-top:10px}
.about-bio p{font-size:16px;line-height:2.05;color:#c5c5c5;margin:0;text-wrap:pretty}
.about-information .contact-details{display:block;margin:32px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.about-information .contact-details h2{font-size:18px;line-height:1.6;margin:0 0 22px;letter-spacing:0}
.about-information .email-link,.about-information .contact-details .email-copy{font-size:clamp(17px,1.65vw,26px);letter-spacing:-.5px}
.about-information .contact-secondary{margin-top:28px}
html[lang=en] .about-role-heading>h1.about-animated-title{font-size:clamp(42px,4.45vw,76px);letter-spacing:-3px}
@media(max-width:760px){.about-layout{grid-template-columns:minmax(0,1fr);gap:34px}.about-information{padding-top:0;max-width:680px}.about-role-heading>h1.about-animated-title{font-size:clamp(48px,8vw,80px)}html[lang=en] .about-role-heading>h1.about-animated-title{font-size:clamp(40px,7vw,72px)}}
@media(max-width:760px){.about-layout{margin-top:24px;gap:28px}.about-role-heading>h1.about-animated-title{font-size:48px;letter-spacing:-2px}html[lang=en] .about-role-heading>h1.about-animated-title{font-size:clamp(35px,7.8vw,48px);letter-spacing:-1.5px}.about-bio p{font-size:15px;line-height:1.95}.about-information .contact-details{margin-top:25px}.about-information .email-link,.about-information .contact-details .email-copy{font-size:clamp(17px,5.1vw,24px)}}

/* Explicit containing blocks keep the reveal aligned in Chrome, Edge, Firefox and Safari. */
.about-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7%;}
.about-role-heading .about-animated-title>.title-post,
.about-role-heading .about-animated-title>.title-motion{position:relative;display:table;width:auto;max-width:100%;}
.about-role-heading .post-base{position:relative;display:block;}
.about-role-heading .post-reveal{top:0;left:0;right:0;bottom:0;width:100%;height:100%;font:inherit;letter-spacing:inherit;line-height:inherit;}
.about-information{grid-column:2;grid-row:1;align-self:start;}
@media(min-width:761px) and (max-width:1050px){
.about-role-heading>h1.about-animated-title{font-size:clamp(40px,5.5vw,58px);letter-spacing:-2px;}
html[lang=en] .about-role-heading>h1.about-animated-title{font-size:clamp(29px,3.9vw,42px);letter-spacing:-1.5px;}
.about-bio p{font-size:15px;line-height:1.95;}
}
@media(max-width:760px){.about-layout{grid-template-columns:minmax(0,1fr);}.about-information{grid-column:1;grid-row:2;}}