:root{--ink:#0b0b0b;--paper:#f0eee9;--muted:#aaa6a4;--line:#353131;--accent:#f26868;--brand-red:#b51212;--font:'DM Sans','Noto Sans Thai',sans-serif;--display:'Barlow Condensed',Impact,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{color:#fff;background:var(--brand-red)}.skip{position:fixed;z-index:100;top:-100px;left:20px;padding:14px;background:var(--paper);color:var(--ink)}.skip:focus{top:20px}.nav{position:absolute;inset:0 0 auto;z-index:10;padding:28px 3.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eeeede45}.small-logo{font-family:var(--display);font-size:25px;font-weight:700;line-height:.83;letter-spacing:-.4px}.small-logo span{display:block;font-size:16px;letter-spacing:6.6px;margin-top:6px}.nav nav{display:flex;align-items:center;gap:42px}.nav nav a{font-size:14px;position:relative;padding:10px 0}.nav nav a>span{font-size:12px;margin-left:6px;opacity:.65}.nav nav a:after,.text-link:after{content:'';position:absolute;height:1px;bottom:4px;left:0;right:100%;background:currentColor;transition:right .3s}.nav nav a:hover:after,.text-link:hover:after{right:0}.nav .nav-youtube>span{font-size:20px;opacity:1}.hero{height:max(800px,100svh);min-height:700px;max-height:1300px;position:relative;display:flex;flex-direction:column;padding:130px 3.5% 0;isolation:isolate;overflow:hidden}.hero-visual,.hero-shade{position:absolute;inset:0;z-index:-2}.hero-image{width:100%;height:100%;object-fit:cover;object-position:50% 54%;animation:drift 25s ease-in-out infinite alternate;filter:saturate(.75)}.hero-shade{z-index:-1;background:linear-gradient(180deg,#05050599 0%,#08080818 35%,#09090938 55%,#080808ed 88%,#080808 100%)}.hero-topline,.hero-foot,.hero-index,.eyebrow,.footer-bottom{font-size:12px;letter-spacing:1.3px;font-weight:500}.hero-topline{display:flex;justify-content:space-between;color:#f0eee9db}.hero-center{display:flex;align-items:center;justify-content:space-between;flex:1;padding:50px 0 20px}.hero-center p{font-size:clamp(30px,3.5vw,60px);line-height:1.07;letter-spacing:-1.5px;font-weight:400;margin:0}.hero-center em,h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.round-link{height:76px;width:76px;border:1px solid #eaece278;border-radius:50%;display:grid;place-items:center;margin-right:2.5%;backdrop-filter:blur(3px);transition:background .3s,transform .3s}.round-link:hover{background:#eaece22b;transform:scale(1.07)}.round-link svg{width:22px;fill:var(--paper);margin-left:2px}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:25px}.hero-caption{font-size:16px;line-height:1.8;margin:0}.hero-index{opacity:.7;padding-bottom:5px}.hero h1{font-family:var(--display);font-size:clamp(90px,16.65vw,290px);font-weight:700;letter-spacing:-.025em;line-height:.83;margin:0 0 25px;white-space:nowrap;position:relative;width:100%;display:flex;align-items:flex-start;gap:.13em}.hero h1 sup{font-family:var(--font);font-size:.12em;line-height:1;margin-top:.16em;font-weight:400;letter-spacing:0}.hero-foot{border-top:1px solid #eaece24d;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;font-size:12px}.hero-foot>a span{margin-left:24px}.hero-foot>span{letter-spacing:0;opacity:.55;font-size:12px}.motion-toggle{background:none;border:0;font-size:12px;display:flex;align-items:center;gap:10px;padding:10px 0}.motion-toggle span{font-size:14px}.paused .hero-image{animation-play-state:paused}.section{padding:88px 5%}.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{color:var(--muted)}.text-link{position:relative;font-size:14px;padding-bottom:8px}.text-link span{font-size:21px;padding-left:18px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:42px 0 48px}h2{font-size:clamp(42px,5vw,76px);line-height:1.02;letter-spacing:-2.5px;font-weight:400;margin:0}.section-heading>p{color:var(--muted);font-size:16px;line-height:1.9;margin:0 0 3px}.film-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 26px}.about{display:grid;grid-template-columns:1fr 1.5fr;border-top:1px solid var(--line);padding-top:96px;padding-bottom:106px;gap:70px}.about-label{display:flex;flex-direction:column;justify-content:space-between}.about-monogram{font:700 clamp(100px,18vw,260px)/.8 var(--display);letter-spacing:-6px;color:#b5121238}.about-copy h2{margin-bottom:37px}.about-copy>p{color:var(--muted);max-width:660px;font-size:16px;line-height:1.95}.about-copy .about-name{color:var(--paper);margin-bottom:22px}.about-name span{color:var(--muted);font-size:12px;letter-spacing:1px;margin-left:14px;white-space:nowrap}.crafts{margin-top:32px}.crafts>div{display:flex;border-top:1px solid var(--line);gap:32px;padding:18px 0;align-items:flex-start}.crafts>div>span{font-size:12px;color:var(--muted);padding-top:5px}.crafts p{margin:0;font-size:18px}.crafts small{display:block;font-size:14px;color:var(--muted);margin-top:7px}footer.section{background:#060606;padding-top:42px;padding-bottom:28px}.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-top{padding-bottom:35px}.footer-wordmark{font:700 clamp(32px,5vw,72px)/1 var(--display);letter-spacing:-1px}.footer-bottom{border-top:1px solid var(--line);padding-top:26px;color:var(--muted);font-size:12px;letter-spacing:.6px}@keyframes drift{from{transform:scale(1.01) translateY(0)}to{transform:scale(1.1) translateY(-1%)}}@media(min-width:1800px){.hero{padding-left:5%;padding-right:5%}.hero h1{font-size:16vw}.section{padding-left:max(5%,calc((100% - 1600px)/2));padding-right:max(5%,calc((100% - 1600px)/2))}}@media(max-width:800px){.nav{padding:24px 5%}.nav nav{gap:22px}.nav nav a>span:not([aria-hidden]){display:none}.hero{height:100svh;min-height:730px;padding:122px 5% 0}.hero-topline>span:last-child{max-width:160px;text-align:right;font-size:10px;line-height:1.6}.hero-center{padding-top:32px}.hero-center p{font-size:38px}.round-link{width:62px;height:62px;margin-right:0}.hero h1{font-size:16vw;margin-bottom:22px}.hero-index{display:none}.hero-bottom{padding-bottom:30px}.hero-caption{font-size:15px}.hero-foot{font-size:10px}.hero-foot>span{display:none}.hero-foot>a span{margin-left:8px}.section{padding:62px 5%}.section-heading{align-items:flex-start;flex-direction:column;gap:24px;margin:32px 0}.section-heading p{font-size:15px}h2{font-size:50px;letter-spacing:-2px}.film-grid{gap:35px 20px}.about{grid-template-columns:1fr;gap:32px}.about-monogram{display:none}.about-name span{display:block;margin:5px 0 0}.footer-bottom{flex-wrap:wrap;font-size:10px}.footer-bottom>span:nth-child(2){display:none}}@media(max-width:480px){.nav nav{gap:19px}.nav nav a{font-size:13px}.small-logo{font-size:22px}.small-logo span{font-size:14px;letter-spacing:5.6px}.hero{min-height:680px}.hero-topline{font-size:10px;letter-spacing:1px}.hero-center{align-items:flex-start;padding-top:75px}.hero-center p{font-size:35px}.round-link{margin-top:5px;width:54px;height:54px}.hero-image{object-position:59% 50%}.hero h1{font-size:25.5vw;flex-wrap:wrap;line-height:.8;gap:0 .1em;letter-spacing:-.02em}.hero h1 span{font-size:.55em;align-self:center}.hero h1 sup{align-self:center;margin-left:auto;font-size:.15em}.hero h1{max-width:100%;white-space:normal}.hero-bottom{padding-bottom:28px}.hero-caption{font-size:14px}.film-grid{grid-template-columns:1fr;gap:36px}.eyebrow{font-size:11px;letter-spacing:1px}.text-link{font-size:13px}.section-heading h2{font-size:48px}.footer-top{align-items:flex-start;gap:20px}.footer-wordmark{font-size:35px}.footer-top .text-link{font-size:11px;white-space:nowrap}.footer-top .text-link span{padding-left:4px}.motion-toggle{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.round-link{position:relative}.round-link>span{position:absolute;top:calc(100% + 17px);font:500 11px var(--font);letter-spacing:1.3px;white-space:nowrap}.film a{display:block}.film-image{aspect-ratio:16/9;position:relative;overflow:hidden;background:#181616}.film-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .7s;filter:saturate(.8)}.film a:hover img{transform:scale(1.04);filter:saturate(1)}.film-play{position:absolute;right:20px;top:20px;width:43px;height:43px;border:1px solid #ffffff88;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#100b0b80;backdrop-filter:blur(4px);transition:background .3s}.film a:hover .film-play{background:var(--paper);color:var(--ink)}.film-duration{position:absolute;bottom:15px;right:16px;font-size:12px;letter-spacing:1px;padding:5px 8px;background:#080808dc}.film-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.6px;color:var(--muted);margin-top:19px}.film h3{font-size:24px;font-weight:500;letter-spacing:-.5px;line-height:1.6;margin:7px 0 0}.film h3 span{color:var(--muted);font-size:18px;font-weight:400}@media(max-width:800px){.film h3{font-size:20px}.film h3 span{font-size:16px}.film-meta{font-size:11px;letter-spacing:.2px}.film-play{right:12px;top:12px;width:36px;height:36px}}@media(max-width:480px){.round-link>span{font-size:9px;letter-spacing:.5px}.film-meta{font-size:12px}.hero-foot>span{display:none}.hero{max-height:none}.film h3{font-size:22px}}

@media(max-width:480px){.hero-center p{font-size:32px;letter-spacing:-1px}.round-link{width:50px;height:50px;flex-shrink:0}.round-link>span{font-size:8px;right:0}.hero h1{font-size:25vw}.hero-foot{gap:8px}}

/* Keep the supplied artwork intact; crop its canvas only in the layout. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0}
.brand-mark{display:block;position:relative;width:100%;aspect-ratio:12/1;overflow:hidden;background:var(--brand-red);mix-blend-mode:screen}
.brand-mark img{position:absolute;width:114.3%;height:auto;max-width:none;left:-6.85%;top:50%;transform:translateY(-49.45%);filter:grayscale(1) invert(1) brightness(1.27);mix-blend-mode:multiply}
.nav{min-height:94px;background:linear-gradient(180deg,#050505e8,#080808a3);border-bottom:1px solid #ffffff24}
.small-logo{display:block;width:220px;flex-shrink:0;padding:12px 0}
.small-logo .brand-mark{margin:0;font-size:inherit;letter-spacing:0}
.nav nav a:hover,.text-link:hover,.motion-toggle:hover{color:var(--accent)}
.nav nav a:after,.text-link:after{background:var(--brand-red);height:2px}
.hero h1{font-size:inherit;display:block;margin:6px 0 34px;line-height:1;letter-spacing:0;flex-shrink:0}
.hero h1 .brand-mark{display:block;margin:0}
.hero-center p{color:var(--paper)}
.round-link{background:var(--brand-red);border-color:var(--brand-red);box-shadow:0 0 0 9px #b5121214}
.round-link:hover{background:#d31d1d;border-color:#d31d1d;transform:scale(1.06)}
.round-link svg{fill:#fff}
.round-link>span{color:var(--paper);font-size:12px;letter-spacing:.65px}
.hero-foot{border-top:1px solid #7d1b1b}
.hero-foot>a span{color:var(--accent)}
.section-top .eyebrow,.about-label>.eyebrow{color:var(--accent)}
.work{background:var(--ink)}
.about{background:#0e0c0c}
.crafts>div>span{color:var(--accent)}
.film a:hover .film-play{background:var(--brand-red);border-color:var(--brand-red);color:#fff}
.film h3{transition:color .2s}
.film a:hover h3{color:var(--accent)}
.footer-wordmark{display:block;width:min(480px,55%);padding:12px 0;flex-shrink:0}
.footer-top{min-height:90px}
@media(max-width:800px){.small-logo{width:190px}.nav{min-height:90px}.hero h1{margin-bottom:30px}.hero h1 .brand-mark{aspect-ratio:12/1}.footer-wordmark{width:58%}}
@media(max-width:600px){.small-logo{width:145px}.nav{padding:22px 5%;gap:18px}.nav nav{gap:16px}.nav nav a{font-size:13px}.nav .nav-youtube>span{margin-left:3px;font-size:17px}.hero h1{margin-bottom:30px}.footer-top{align-items:center}.footer-wordmark{width:59%}}
@media(max-width:380px){.small-logo{width:125px}.nav{gap:12px}.nav nav{gap:12px}.nav nav a{font-size:12px}.nav .nav-youtube>span{font-size:15px}.hero-center p{font-size:29px}}

/* Portfolio editorial sections */
.section-aside{font-size:14px;color:var(--muted)}
.film-notes{margin-top:16px;border-top:1px solid var(--line)}
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.film-notes>summary,.project-expansion>summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:54px;font-size:14px;color:var(--muted)}
.film-notes>summary:hover,.project-expansion>summary:hover{color:var(--paper)}
.film-notes>summary>span,.project-expansion>summary>span,.archive-plus{font-family:var(--font);font-size:24px;font-weight:400;line-height:1;transition:transform .2s;color:var(--accent)}
.film-notes[open]>summary>span,.project-expansion[open]>summary>span,.archive-project[open] .archive-plus{transform:rotate(45deg)}
.film-notes h4{font-size:16px;font-weight:500;margin:12px 0}
.film-notes p,.project-detail-block p,.archive-body p{font-size:16px;line-height:1.95;color:var(--muted);margin:0 0 16px}
.film-notes>div{padding:4px 0 10px}
.development{background:#100d0d;border-top:1px solid var(--line)}
.development-list{border-top:1px solid var(--line)}
.development-project{padding:36px 0 18px;border-bottom:1px solid var(--line)}
.project-front{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:start;gap:28px}
.project-number{font-size:14px;color:var(--accent);padding-top:7px}
.project-kind,.project-meta-line{font-size:12px;letter-spacing:1px;color:var(--muted);line-height:1.7;margin:0 0 18px}
.project-main h3{font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.2;letter-spacing:-1px;margin:0 0 7px}
.project-english{font-size:14px;letter-spacing:1px;color:var(--muted);margin:0}
.project-logline{max-width:730px;font-size:18px;line-height:1.9;margin:26px 0 18px;color:var(--paper)}
.project-meta-line{letter-spacing:0;font-size:14px;margin-bottom:12px}
.project-status{font-size:14px;padding:7px 12px;border:1px solid #752323;color:var(--accent);white-space:nowrap;line-height:1.5}
.project-expansion{margin-left:92px;margin-top:12px}
.project-expansion>summary{border-top:1px solid var(--line)}
.project-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;padding:30px 0 15px}
.project-detail-block h4{font-size:16px;font-weight:500;color:var(--paper);margin:0 0 16px}
.project-detail-block:first-child{grid-column:1/-1;max-width:900px}
.project-archive{background:var(--ink)}
.archive-list{border-top:1px solid var(--line)}
.archive-project{border-bottom:1px solid var(--line)}
.archive-project>summary{display:grid;grid-template-columns:42px minmax(0,1fr) 190px 24px;align-items:center;gap:24px;padding:27px 0}
.archive-number{font-size:12px;color:var(--muted)}
.archive-name{display:flex;flex-direction:column;gap:7px}
.archive-title{font-size:clamp(20px,2.1vw,29px);line-height:1.55;letter-spacing:-.4px}
.archive-subtitle{font-size:14px;line-height:1.7;color:var(--muted)}
.archive-kind{font-size:12px;line-height:1.6;letter-spacing:.7px;color:var(--muted)}
.archive-project>summary:hover .archive-title{color:var(--accent)}
.archive-body{padding:0 10% 28px 66px;max-width:1000px}
.archive-body .text-link{display:inline-block;margin-top:6px}
.experience{background:#100d0d;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.experience-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.experience-list>div{border-top:2px solid var(--brand-red);padding-top:25px}
.experience-type{font-size:12px;letter-spacing:1px;color:var(--accent)}
.experience-list h3{font-size:25px;font-weight:500;letter-spacing:-.6px;line-height:1.35;margin:20px 0 14px}
.experience-list p{font-size:14px;line-height:1.85;margin:0 0 12px;color:var(--muted)}
.experience-list .experience-note{font-size:16px;margin-top:18px}
.about{border-top:0}
.about-copy .education-line{padding-left:18px;border-left:2px solid var(--brand-red);font-size:14px;margin:29px 0;color:var(--paper)}
.crafts small{font-size:14px;line-height:1.85;max-width:660px}
.hero-caption{line-height:1.8}
@media(max-width:1000px){.project-front{grid-template-columns:40px minmax(0,1fr);gap:20px}.project-status{grid-column:2;justify-self:start;grid-row:1;margin-bottom:12px}.project-main{grid-column:2;grid-row:2}.project-number{grid-row:1}.project-expansion{margin-left:60px}.experience-list{gap:24px}.experience-list h3{font-size:21px}}
@media(max-width:800px){.section-aside{font-size:12px}.project-detail-grid{grid-template-columns:1fr;gap:14px;padding-top:22px}.project-detail-block:first-child{grid-column:auto}.project-main h3{font-size:38px}.project-logline{font-size:16px;margin:22px 0 16px}.project-kind{font-size:12px;letter-spacing:.6px;margin-bottom:12px}.project-english{font-size:13px}.project-status{font-size:13px}.archive-project>summary{grid-template-columns:28px minmax(0,1fr) 24px;gap:14px;padding:24px 0}.archive-kind{display:none}.archive-body{padding:0 0 24px 42px}.archive-title{font-size:23px}.experience-list{grid-template-columns:1fr;gap:30px}.experience-list h3{font-size:26px}.experience-list>div{padding-top:22px}.project-detail-block p,.archive-body p,.film-notes p{font-size:16px}.hero-topline>span:first-child{max-width:200px;line-height:1.8}}
@media(max-width:480px){.project-front{grid-template-columns:24px minmax(0,1fr);gap:14px}.project-expansion{margin-left:38px}.project-main h3{font-size:33px}.project-number{font-size:12px}.project-english{font-size:12px;letter-spacing:.8px}.project-status{font-size:12px}.project-meta-line{font-size:13px}.development-project{padding-top:28px}.project-expansion>summary,.film-notes>summary{font-size:14px}.archive-body{padding-left:0}.archive-title{font-size:21px}.archive-subtitle{font-size:14px}.hero-caption{font-size:14px}.hero-topline>span:first-child{max-width:165px}.section-aside{max-width:120px;text-align:right;line-height:1.7}}