@charset "UTF-8";
@font-face { font-family:Outfit; src:url("assets/fonts/Outfit-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
:root { --black:#000; --white:#fff; --muted:#aaa; --quiet:#727272; --line:#272727; --header:68px; --pad:clamp(24px,7vw,110px); --sans:Outfit,"PingFang SC","Hiragino Sans GB",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header); }
body { margin:0; color:white; background:black; font-family:var(--sans); font-size:14px; font-weight:300; -webkit-font-smoothing:antialiased; }
body.menu-open,body:has(dialog[open]) { overflow:hidden; }
h1,h2,h3,p { margin:0; font-weight:300; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; font-weight:300; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:1px solid white; outline-offset:5px; }
section[tabindex]:focus,footer[tabindex]:focus,main:focus { outline:none; }
[hidden] { display:none!important; }
img { display:block; width:100%; height:auto; }
::selection { color:black; background:white; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:50; padding:12px 20px; background:white; color:black; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; height:var(--header); background:#000; z-index:30; }
.header-inner { max-width:1440px; padding:0 48px; margin:auto; height:100%; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { font-size:22px; letter-spacing:.32em; font-weight:300; white-space:nowrap; }
.main-nav { display:flex; align-items:center; gap:36px; margin-left:auto; margin-right:80px; }
.main-nav a,.works-toggle { color:#f2f2f2; font-size:12px; letter-spacing:.15em; transition:opacity .2s; }
.main-nav a:hover,.works-toggle:hover { opacity:.65; }
.works-toggle { border:0; background:none; display:flex; align-items:center; gap:10px; padding:12px 0; }
.chevron { width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.works-toggle[aria-expanded=true] .chevron { transform:rotate(225deg) translate(-1px,-1px); }
.header-tools,.language { display:flex; align-items:center; gap:10px; }
.language { font-size:10px; }
.language>span { color:#555; }
.language button { background:none; border:0; padding:9px 3px; min-width:24px; font-size:10px; color:#858585; }
.language button[aria-pressed=true] { color:white; }
.mobile-menu-toggle { display:none; border:0; background:none; width:30px; height:30px; padding:5px; }
.mobile-menu-toggle span { display:block; width:20px; height:1px; background:white; margin:6px 0; transition:transform .2s; }
.mobile-menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.navigation-panel { position:fixed; left:0; right:0; top:var(--header); z-index:29; background:#080808; animation:panel-in .25s ease both; }
.panel-inner { max-width:1280px; margin:auto; padding:50px 48px 65px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:60px; }
.panel-group { display:flex; flex-direction:column; align-items:flex-start; gap:17px; }
.panel-group>a { font-size:13px; color:#aaa; letter-spacing:.06em; }
.panel-group>a:hover { color:white; }
.panel-group>.panel-heading { font-size:19px; color:white; margin-bottom:10px; }
.panel-group p { color:#777; font-size:11px; line-height:1.8; }
.panel-signature { letter-spacing:.16em; margin-top:10px; }
.menu-scrim { position:fixed; inset:var(--header) 0 0; background:#0009; z-index:28; border:0; }
.mobile-only { display:none!important; }
.image-panel { position:relative; min-height:650px; height:calc(100svh - var(--header)); max-height:1050px; overflow:hidden; isolation:isolate; }
.panel-media,.panel-shade { position:absolute; inset:0; z-index:-1; }
.panel-media { background:#111; }
.panel-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media img { height:108%; top:-4%; transform:translateY(var(--image-shift,0px)); object-position:center 48%; }
.panel-shade { background:linear-gradient(180deg,#0001 25%,#0003 48%,#000c 100%); }
.panel-copy { position:absolute; bottom:12%; left:var(--pad); right:var(--pad); text-align:center; }
.hero-copy { bottom:13%; animation:content-in 1s .15s both; }
.hero-copy h1 { font-size:58px; letter-spacing:.4em; padding-left:.4em; line-height:1.3; }
.hero-identity { font-size:17px; letter-spacing:.19em; margin-top:24px; line-height:1.7; }
.hero-role { font-size:13px; letter-spacing:.22em; margin-top:13px; }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin-top:29px; }
.cta { border:1px solid white; border-radius:0; background:transparent; color:white; padding:12px 24px; min-width:135px; min-height:43px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.13em; line-height:1.5; text-align:center; transition:color .25s,background .25s; }
.cta:hover,.cta:focus-visible { color:black; background:white; }
.source-note { position:absolute; bottom:18px; left:25px; font-size:8px; line-height:1.6; color:#c4c4c4; letter-spacing:.03em; max-width:45%; }
.scroll-invitation { position:absolute; left:50%; bottom:22px; width:20px; height:28px; display:grid; place-items:center; transform:translateX(-50%); }
.scroll-invitation span { width:8px; height:8px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; transform:rotate(45deg); }
.selected-section { height:83svh; min-height:650px; max-height:950px; margin-top:8px; }
.selected-preview img { opacity:0; transition:opacity .65s; object-position:center 35%; }
.selected-preview img.is-active { opacity:1; }
.selected-section .panel-shade { background:linear-gradient(0deg,#000e 0%,#0009 48%,#0003 100%); }
.selected-copy { bottom:16%; }
.eyebrow { font-size:12px; letter-spacing:.22em; line-height:1.7; color:#e5e5e5; }
.panel-copy h2 { font-size:39px; letter-spacing:.16em; line-height:1.5; margin-top:15px; }
.panel-description { font-size:15px; letter-spacing:.12em; line-height:1.9; margin-top:18px; }
.work-section { margin-top:8px; }
.photo-selection { padding-top:100px; padding-bottom:110px; }
.selection-heading { text-align:center; margin-bottom:55px; }
.selection-heading h2 { font-size:39px; letter-spacing:.16em; line-height:1.5; margin-top:15px; }
.selected-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,60px); }
.selected-photo-grid figure { margin:0; min-width:0; background:#101010; }
.selected-photo-grid img { aspect-ratio:1; object-fit:contain; }
.featured-projects { margin-top:55px; margin-bottom:60px; }
.project-gallery img { width:100%; max-height:85vh; object-fit:contain; margin:30px 0; }
.project-description,.project-concept { white-space:pre-line; line-height:2; font-size:13px; margin-top:25px; color:#bbb; }
.project-concept h3 { margin-bottom:12px; font-size:15px; color:#fff; }
#about-text { white-space:pre-line; }
.image-unavailable { min-height:180px; background:#141414; color:#aaa; }
.load-error { padding:45px var(--pad); line-height:2; }
html[lang=en] .selection-heading h2 { text-transform:uppercase; letter-spacing:.12em; }
.photo-section .panel-media img { object-position:center 28%; }
.photo-section .panel-shade { background:linear-gradient(0deg,#000d 0%,#0004 50%,#0001 100%); }
.film-section .panel-media img { object-position:center; }
.film-section .panel-shade { background:linear-gradient(0deg,#000f 0%,#0006 57%,#0002 100%); }
.illustration { filter:grayscale(1); }
.film-project-title { font-size:25px; letter-spacing:.15em; line-height:1.6; margin-top:20px; }
.section-shell { padding-left:max(var(--pad),calc((100vw - 1280px)/2)); padding-right:max(var(--pad),calc((100vw - 1280px)/2)); }
.archive-callout { padding-top:110px; padding-bottom:110px; text-align:center; }
.archive-callout h2 { font-size:35px; letter-spacing:.16em; margin:22px 0; }
.archive-callout>p:not(.eyebrow) { font-size:13px; line-height:2; color:#aaa; letter-spacing:.06em; }
.archive-callout>.cta { margin-top:30px; }
.site-footer { background:#080808; padding-top:64px; padding-bottom:25px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:50px; }
.footer-grid h2,.footer-grid h3 { font-size:13px; letter-spacing:.08em; margin-bottom:22px; }
.footer-grid p,.footer-grid a { display:block; font-size:11px; line-height:1.9; color:#929292; margin-top:10px; }
.footer-grid a:hover { color:white; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; border-top:1px solid #242424; padding-top:22px; margin-top:62px; font-size:8px; color:#777; letter-spacing:.03em; line-height:1.7; }
.footer-bottom a { color:#999; }
.archive-view { padding-top:50px; padding-bottom:100px; min-height:70vh; }
.back-link,.text-link { font-size:11px; color:#aaa; display:inline-flex; gap:16px; align-items:center; }
.back-link { margin-bottom:58px; }
.archive-view h1 { font-size:37px; letter-spacing:.14em; margin:16px 0; }
.archive-description { font-size:12px; color:#999; line-height:1.9; }
.filters { display:flex; flex-wrap:wrap; gap:28px; margin:44px 0; }
.filters button { background:none; border:0; padding:0 0 10px; text-align:left; color:#777; font-size:12px; letter-spacing:.04em; position:relative; }
.filters button>span { display:block; margin-top:8px; font-size:9px; letter-spacing:.1em; }
.filters button[aria-pressed=true] { color:white; }
.filters button[aria-pressed=true]:after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:white; }
.archive-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px 30px; }
.project-feature { width:100%; background:none; border:0; padding:0; text-align:left; }
.image-frame { position:relative; overflow:hidden; background:#151515; }
.image-frame img { aspect-ratio:1.55; object-fit:cover; }
.image-tag { position:absolute; left:12px; bottom:12px; color:#eee; font-size:8px; text-shadow:0 1px 3px black; max-width:90%; }
.project-open { position:absolute; right:15px; top:12px; font-size:22px; }
.project-caption { padding-top:19px; display:flex; justify-content:space-between; align-items:baseline; gap:15px; }
.project-caption>div { display:flex; align-items:baseline; gap:12px; }
.project-id { display:none; }
.project-caption h3 { font-size:18px; letter-spacing:.05em; line-height:1.6; }
.project-caption p { font-size:9px; color:#aaa; white-space:nowrap; }
.archive-empty { padding:70px 0; font-size:13px; line-height:1.9; color:#aaa; }
.route-transition { animation:content-in .4s both; }
dialog { width:min(1120px,calc(100% - 44px)); max-height:92dvh; padding:0; border:1px solid #333; background:#080808; color:white; overscroll-behavior:contain; }
dialog::backdrop { background:#000d; backdrop-filter:blur(6px); }
.dialog-toolbar { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 32px; background:#080808; z-index:1; font-size:10px; color:#999; }
.dialog-actions { display:flex; align-items:center; gap:28px; }
#dialog-close { background:none; border:0; display:flex; align-items:center; gap:15px; font-size:10px; }
#dialog-close>span:last-child { font-size:23px; line-height:1; }
.dialog-body { padding:30px 45px 45px; }
.dialog-body>.eyebrow { font-size:9px; color:#999; margin-bottom:18px; }
.dialog-body h2 { font-size:33px; line-height:1.5; letter-spacing:.08em; }
.dialog-subtitle { font-size:13px; color:#aaa; line-height:1.8; letter-spacing:.1em; margin-top:12px; }
.dialog-body>img { margin:32px 0; max-height:60vh; object-fit:contain; }
.dialog-info { display:grid; grid-template-columns:1fr 2fr; gap:30px; }
.dialog-info h3 { font-size:12px; margin-bottom:15px; }
.dialog-info p { font-size:12px; line-height:2; color:#aaa; }
.dialog-notice,.empty-player { margin-top:28px; color:#777; font-size:10px; line-height:1.9; }
.reveal-item { opacity:0; transform:translateY(15px); transition:opacity .75s,transform .75s; }
.reveal-item.is-visible { opacity:1; transform:none; }
@keyframes content-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes panel-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
html[lang=en] .hero-role { display:none; }
html[lang=en] .panel-copy h2,html[lang=en] .archive-callout h2,html[lang=en] .archive-view h1 { letter-spacing:.12em; text-transform:uppercase; }
html[lang=en] .panel-description { letter-spacing:.04em; }
@media(max-width:1000px) {
  .header-inner { padding:0 30px; }.main-nav { gap:26px; margin-right:25px; }.footer-grid { grid-template-columns:1.4fr 1fr 1fr; gap:35px; }.footer-grid>div:last-child { grid-column:1/-1; }.project-caption { display:block; }.project-caption p { margin-top:9px; }
}
@media(max-width:760px) {
  :root { --header:64px; --pad:25px; }
  .photo-selection { padding-top:65px; padding-bottom:70px; }
  .selection-heading { margin-bottom:35px; }
  .selection-heading h2 { font-size:30px; }
  .selected-photo-grid { grid-template-columns:1fr; gap:30px; }
  html[lang=en] .selection-heading h2 { font-size:27px; letter-spacing:.09em; }
  .header-inner { padding:0 25px; gap:20px; }.brand { font-size:20px; }.main-nav { display:none; }.header-tools { gap:20px; }.language { gap:6px; }.language button { font-size:9px; min-width:20px; }.mobile-menu-toggle { display:block; }
  .navigation-panel { bottom:0; overflow-y:auto; }.panel-inner { padding:32px 30px 45px; display:flex; flex-direction:column; gap:34px; }.panel-group { gap:17px; }.panel-group>.panel-heading { font-size:20px; margin-bottom:3px; }.panel-signature { display:none; }.mobile-only { display:block!important; }
  .image-panel { height:calc(100svh - var(--header)); min-height:600px; max-height:950px; }.hero-media img { object-position:52% center; }.panel-copy { left:25px; right:25px; bottom:15%; }.hero-copy { bottom:16%; }.hero-copy h1 { font-size:44px; letter-spacing:.32em; padding-left:.32em; }.hero-identity { font-size:12px; letter-spacing:.12em; line-height:1.9; margin-top:20px; }.hero-role { font-size:11px; margin-top:10px; letter-spacing:.16em; }
  .cta { font-size:10px; padding:11px 17px; min-width:125px; min-height:41px; letter-spacing:.08em; }.cta-row { gap:10px; margin-top:25px; }.source-note { left:15px; bottom:14px; font-size:6px; max-width:75%; }.scroll-invitation { bottom:24px; left:auto; right:21px; transform:none; }
  .selected-section { min-height:600px; height:82svh; }.selected-preview img { object-position:53% center; }.selected-copy { bottom:14%; }.panel-copy h2 { font-size:30px; letter-spacing:.12em; }.eyebrow { font-size:9px; letter-spacing:.18em; }.panel-description { font-size:12px; margin-top:15px; line-height:2; }.photo-section .panel-media img { object-position:53% center; }.film-section .panel-media img { object-position:61% center; }.film-project-title { font-size:23px; letter-spacing:.08em; margin-top:15px; }
  .archive-callout { padding-top:80px; padding-bottom:80px; }.archive-callout h2 { font-size:30px; }.archive-callout>p:not(.eyebrow) { font-size:11px; }.site-footer { padding-top:45px; }.footer-grid { grid-template-columns:1fr 1fr; gap:37px 25px; }.footer-about { grid-column:1/-1; }.footer-grid>div:last-child { grid-column:1/-1; }.footer-grid h2,.footer-grid h3 { font-size:12px; margin-bottom:17px; }.footer-grid p,.footer-grid a { font-size:10px; }.footer-bottom { margin-top:40px; gap:12px; font-size:7px; }.footer-bottom>a { width:100%; }
  .archive-view { padding-top:35px; padding-bottom:65px; }.back-link { margin-bottom:42px; }.archive-view h1 { font-size:30px; }.archive-description { font-size:11px; }.filters { gap:24px 28px; margin:32px 0; }.filters button { font-size:11px; }.filters button>span { font-size:8px; }.archive-grid { grid-template-columns:1fr; gap:35px; }.project-caption { display:flex; }.project-caption h3 { font-size:16px; }.project-caption p { margin-top:0; font-size:8px; white-space:normal; text-align:right; max-width:45%; }
  dialog { width:calc(100% - 20px); max-height:94dvh; }.dialog-toolbar { padding:15px 20px; font-size:9px; }.dialog-actions { gap:20px; }.dialog-body { padding:25px 22px 32px; }.dialog-body h2 { font-size:26px; }.dialog-subtitle { font-size:11px; letter-spacing:.04em; }.dialog-info { grid-template-columns:1fr; gap:26px; }.dialog-info p { font-size:11px; }.dialog-notice,.empty-player { font-size:9px; }
  html[lang=en] .panel-copy h2 { font-size:27px; letter-spacing:.09em; }html[lang=en] .film-project-title { font-size:23px; letter-spacing:.02em; }html[lang=en] .panel-description { font-size:11px; }
}
@media(max-width:360px) { .header-inner { padding:0 21px; }.cta { min-width:117px; padding-left:14px; padding-right:14px; }.hero-identity { font-size:11px; letter-spacing:.08em; }.panel-copy { left:20px; right:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*:before,*:after { animation:none!important; transition:none!important; }.hero-media img { transform:none; }.reveal-item { opacity:1; transform:none; } }

/* The opening image fades into the same black surface as the introduction. */
@font-face{font-family:SignatureHan;src:url('assets/fonts/Signature-Han.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:SignatureLatin;src:url('assets/fonts/Signature-Latin.ttf') format('truetype');font-weight:400;font-display:swap}
.brand{display:inline-flex;align-items:center;gap:17px;letter-spacing:0}
.brand-latin{font-family:SignatureLatin,Outfit,sans-serif;font-size:18px;font-weight:400;letter-spacing:.2em}
.brand-han{font-family:SignatureHan,"PingFang SC",sans-serif;font-size:21px;font-weight:400;letter-spacing:.22em}
.hero.image-panel{height:auto;min-height:950px;max-height:none;background:#000;padding:clamp(245px,29vw,420px) var(--pad) 100px}
.hero .hero-media{height:clamp(650px,64vw,920px);bottom:auto;background:#000;mask-image:linear-gradient(transparent 0%,#000 12%,#000 40%,#0009 65%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0%,#000 12%,#000 40%,#0009 65%,transparent 100%)}
.hero-media img{height:100%;top:0;object-position:center 45%;transform:translateY(var(--image-shift,0px))}
.hero .panel-shade{background:linear-gradient(90deg,#0009 0%,transparent 23%,transparent 77%,#0009 100%),linear-gradient(180deg,#0004 0%,#0001 24%,#0006 43%,#000c 62%,#000 86%)}
.hero .hero-copy{position:relative;inset:auto;max-width:1000px;margin:auto;text-align:center;animation:content-in 1s .15s both}
.hero-copy #name{display:flex;flex-direction:column;align-items:center;gap:22px;padding:0;line-height:1.2}
.signature-han{font-family:SignatureHan,"PingFang SC",sans-serif;font-weight:400;font-size:clamp(68px,7vw,100px);letter-spacing:.28em;padding-left:.28em;order:1}
.signature-latin{font-family:SignatureLatin,Outfit,sans-serif;font-weight:400;font-size:27px;letter-spacing:.34em;padding-left:.34em;order:2}
.hero .hero-identity{font-size:12px;letter-spacing:.24em;color:#c4c4c4;margin-top:28px}
.hero .hero-role{font-size:13px;color:#b0b0b0;margin-top:12px;letter-spacing:.18em}
.hero-introduction{max-width:820px;margin:52px auto 0;font-size:17px;line-height:2.15;letter-spacing:.045em;color:#d0d0d0;text-wrap:pretty}
.hero-introduction p{white-space:pre-line;font-weight:400}
.hero-introduction p+p{margin-top:24px}
.hero .cta-row{margin-top:42px}
.hero .scroll-invitation{bottom:30px;left:50%;right:auto}
html[lang=en] .signature-latin{order:1;font-size:clamp(65px,7.7vw,108px);letter-spacing:.22em;padding-left:.22em}
html[lang=en] .signature-han{order:2;font-size:31px;letter-spacing:.3em;padding-left:.3em}
html[lang=en] .hero-introduction{font-size:18px;line-height:1.95;letter-spacing:.015em}
@media(max-width:760px){
 .brand{gap:12px}.brand-latin{font-size:15px;letter-spacing:.16em}.brand-han{font-size:18px}
 .hero.image-panel{min-height:850px;padding:230px 26px 95px}
 .hero .hero-media{height:630px}.hero-media img{object-position:52% center}
 .hero .panel-shade{background:linear-gradient(90deg,#0004,transparent 25%,transparent 75%,#0004),linear-gradient(180deg,#0003 0%,#0002 20%,#0008 42%,#000 76%)}
 .hero-copy #name{gap:19px}.signature-han{font-size:64px}.signature-latin{font-size:22px}
 .hero .hero-identity{font-size:10px;letter-spacing:.13em;line-height:1.9;margin-top:24px}
 .hero .hero-role{font-size:11px}.hero-introduction{margin-top:38px;font-size:14px;line-height:2.1;letter-spacing:.02em;max-width:480px}
 .hero-introduction p+p{margin-top:20px}.hero .cta-row{margin-top:32px}
 html[lang=en] .signature-latin{font-size:clamp(45px,12vw,65px);letter-spacing:.17em;padding-left:.17em}
 html[lang=en] .signature-han{font-size:26px}
 html[lang=en] .hero-introduction{font-size:15px;line-height:1.9}
}