:root{color-scheme:light;--ink:#191919;--paper:#fff;--muted:#777}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,'PingFang TC','Microsoft JhengHei',sans-serif;color:var(--ink);background:var(--paper)}body{height:100dvh;overflow:hidden}button,input{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit;background:none;border:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ac2b22;outline-offset:7px}button:hover,a:hover{opacity:.65}header{height:110px;position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 5.7%;z-index:5;pointer-events:none}header>*{pointer-events:auto}.brand{position:absolute;left:50%;transform:translateX(-50%);font-weight:750;font-size:clamp(21px,2.5vw,36px);letter-spacing:-1.3px;white-space:nowrap}.brand small{font-size:.43em;letter-spacing:-.2px;margin-left:4px}.icon{width:45px;height:45px;padding:4px}.icon svg{width:100%;height:100%}.menu-icon{display:grid;grid-template-columns:repeat(3,5px);gap:4px;align-content:center;justify-content:center;opacity:.4}.menu-icon span{width:5px;height:5px;background:currentColor}.menu-icon:hover{opacity:1}#main{position:absolute;inset:110px 0 130px;outline:none;overflow:auto;animation:none}.home{color:#fff;background:#fff}body:before{content:'';position:fixed;inset:0;background:linear-gradient(#0004,#0004),url('assets/oa43AEUWZUn07B_vLOvgZ.webp') center 48%/cover no-repeat;opacity:0;pointer-events:none;transition:opacity .42s ease}body.home:before{opacity:1}.home #main{overflow:hidden}.hero{height:100%;position:relative}.hero h1{position:absolute;left:7.85%;top:52%;margin:0;font-family:'Songti TC','Songti SC','Noto Serif CJK TC',serif;font-weight:600;font-size:clamp(40px,5.55vw,80px);line-height:1.23;letter-spacing:-.04em}.hero h1 span{border-bottom:2px solid currentColor;display:table}.hero h1 a:hover{opacity:1}footer{position:fixed;inset:auto 0 0;height:130px;z-index:6;background:#fff}body.home footer{background:transparent}footer nav{height:84px;display:flex;align-items:center;justify-content:space-between;margin:0 5.7%;font-size:18px}footer nav>a,footer nav>div>button{position:relative;font-size:inherit;padding:8px 0}footer nav>a.active:after,.works-nav.active>button:after{content:'';height:1px;background:currentColor;position:absolute;bottom:4px;left:0;right:0}.copyright{font-size:9px;text-align:center;color:#8b8b8b;margin:18px 20px 0;line-height:1.4}.home .copyright{color:#d2d2d2}.copyright a{margin-left:5px}.works-nav{position:relative}.categories{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(5px);display:grid;grid-template-columns:repeat(5,max-content);gap:10px 18px;width:max-content;padding:19px 24px;background:#fffc;color:#222;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:.2s;box-shadow:0 -6px 30px #00000004;font-size:12px}.categories a{padding:4px 0}.categories a.active{text-decoration:underline;text-underline-offset:5px}.works-nav:hover .categories,.works-nav.open .categories{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}body.home .categories{background:#222b;color:#fff}.about,.recruit{display:grid;grid-template-columns:1fr 1fr;gap:8%;height:100%;padding:6vh 12% 0 7.8%}.about h1{writing-mode:vertical-rl;font-family:'Songti TC','Songti SC',serif;font-size:45px;letter-spacing:20px;font-weight:400;margin:0 0 0 11%;max-height:300px}.about p,.recruit p{font-size:16px;line-height:2.5;margin:0;white-space:pre-line;max-width:460px}.recruit h1{font-family:'Songti TC','Songti SC',serif;font-size:clamp(28px,3.5vw,54px);line-height:1.7;letter-spacing:-1px;font-weight:600;margin:0}.recruit h1 span{display:block;margin-left:28%}.recruit .contact-link{display:inline-block;margin-top:22px;border-bottom:1px solid;font-size:12px;padding-bottom:5px}.contact{height:100%;padding:1% 11.5%;display:flex;flex-direction:column;justify-content:space-around}.contact-row{display:flex;justify-content:space-between;align-items:center;gap:30px;font-family:Georgia,'Songti TC',serif;font-size:clamp(16px,1.7vw,26px)}.contact-row h1,.contact-row h2{font-size:15px;font-weight:400}.contact-row .address{font-size:18px}.contact-tools{text-align:right;font-size:11px;margin-top:12px;color:#777}.contact-tools button{border-bottom:1px solid #aaa;padding:3px 0}.gallery{height:100%;position:relative;min-height:200px}.artboard{position:absolute;inset:0 0 40px;animation:none}.art{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.art:hover{opacity:1}.art img{width:100%;height:100%;object-fit:contain;transition:transform .3s}.art:hover img{transform:scale(1.025)}.slide-arrow{position:absolute;top:45%;font-size:42px;font-weight:200;color:#aaa;z-index:2;width:48px;height:70px}.slide-arrow.prev{left:0}.slide-arrow.next{right:0}.gallery-caption{position:absolute;bottom:0;left:5.7%;right:5.7%;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#888}.gallery-caption h1{font-size:11px;font-weight:400;margin:0;letter-spacing:.1em}.pagination{display:flex;gap:5px}.pagination button{padding:8px 4px;font-size:10px;min-width:24px}.pagination button.active{color:#111;text-decoration:underline;text-underline-offset:4px}.topics{padding:0 10%;height:100%;overflow:auto}.topic{display:grid;grid-template-columns:110px 1fr 150px;gap:45px;align-items:center;padding:25px 0 38px;min-height:270px}.topic time{font-size:12px;color:#888;letter-spacing:.12em}.topic h1,.topic h2{font-family:'Songti TC','Songti SC',serif;font-size:19px;line-height:1.9;font-weight:400}.topic img{width:100%;height:200px;object-fit:contain}.topic button{padding:0}.video-slide{height:100%;display:flex;align-items:center;justify-content:center;gap:40px;padding:15px 8% 45px}.video-slide video{max-width:85%;max-height:100%;background:#f5f5f5}.video-slide .poster-image{max-height:90%;max-width:28%;object-fit:contain}dialog{border:0;padding:60px;color:#171717;background:#fff;width:min(800px,92vw);max-height:90dvh}dialog::backdrop{background:#0008;backdrop-filter:blur(7px)}.close{position:absolute;right:20px;top:12px;font-size:36px;font-weight:200;padding:5px 12px}.menu-dialog{width:min(600px,92vw)}.eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:35px}.menu-dialog nav{display:flex;flex-direction:column;gap:20px;font-size:30px}.menu-dialog small{font-size:13px;float:right;font-weight:400;color:#888;margin-top:10px}#search-dialog label{font-size:12px;letter-spacing:.1em}#search{display:block;border:0;border-bottom:1px solid #aaa;border-radius:0;padding:20px 0;font-size:24px;width:100%;margin:15px 0 25px}#results{display:grid;grid-template-columns:1fr 1fr;gap:12px}#results a{padding:18px;background:#f6f6f6;display:flex;flex-direction:column;gap:8px}#results small{color:#888}#lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;background:#fffffff5;padding:50px 70px}#lightbox figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}#lightbox img{max-width:100%;max-height:calc(100% - 40px);object-fit:contain}#lightbox figcaption{font-size:12px;color:#777}.light-prev,.light-next{position:absolute;top:45%;font-size:50px;padding:20px}.light-prev{left:0}.light-next{right:0}#toast{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:4px;background:#222;color:white;font-size:13px;opacity:0;pointer-events:none;z-index:20}#toast.show{opacity:1}.skip{position:fixed;left:15px;top:-100px;z-index:30;background:#fff;color:#111;padding:12px}.skip:focus{top:10px}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes hero-in{from{opacity:.7;transform:scale(1.015)}to{opacity:1;transform:none}}
@media(min-width:1600px){.about,.recruit{padding-top:8vh}.about p,.recruit p{font-size:18px}}
@media(max-height:700px) and (min-width:701px){header{height:80px}#main{top:80px;bottom:100px}footer{height:100px}footer nav{height:65px}.copyright{margin-top:10px}.about,.recruit{padding-top:10px}.about p,.recruit p{font-size:13px;line-height:2}.hero h1{font-size:9vh}.contact-row{font-size:20px}}
@media(max-width:700px){body{min-height:100dvh;height:auto;overflow:auto}header{height:85px;padding:0 18px;background:#fffffff0;backdrop-filter:blur(10px)}.home header{background:transparent;backdrop-filter:none}.brand{font-size:23px;letter-spacing:-.8px}.icon{width:34px;height:40px}.menu-icon{grid-template-columns:repeat(3,4px);gap:3px}.menu-icon span{width:4px;height:4px}#main{position:relative;inset:auto;margin:85px 0 120px;min-height:calc(100dvh - 205px);overflow:visible}.home #main{height:calc(100dvh - 205px)}.home:before{background-position:57% center}.hero h1{left:7%;top:52%;font-size:clamp(34px,8.7vw,58px)}footer{height:105px;background:#fffffff5;backdrop-filter:blur(10px)}body.home footer{background:#0002}footer nav{height:65px;margin:0 6%;font-size:11px}.copyright{font-size:8px;margin:6px 10px 0}.copyright span{display:none}.categories{position:fixed;left:12px;right:12px;bottom:100px;width:auto;transform:none!important;grid-template-columns:repeat(3,1fr);gap:15px;padding:25px;background:#fffffff5!important;color:#222!important;border:1px solid #eee}.about,.recruit{padding:45px 8% 35px;display:flex;flex-direction:column;gap:35px}.about h1{font-size:34px;writing-mode:horizontal-tb;letter-spacing:8px;margin:0}.about p,.recruit p{font-size:14px;line-height:2.3;max-width:100%}.recruit h1{font-size:34px}.recruit h1 span{margin-left:20%}.contact{gap:42px;padding:50px 8%;min-height:calc(100dvh - 205px)}.contact-row{align-items:flex-start;flex-direction:column;gap:6px;font-size:21px}.contact-row h1,.contact-row h2{font-size:11px;letter-spacing:.1em}.contact-row .address{font-size:15px}.contact-tools{text-align:left}.gallery{min-height:calc(100dvh - 205px);padding:15px 7% 60px}.artboard{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:calc(100dvh - 320px)}.art{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:100px}.art img{width:100%;height:auto;max-height:360px;object-fit:contain}.artboard.package .art:first-child{grid-column:1/-1}.artboard.single .art{grid-column:1/-1}.slide-arrow{position:fixed;top:47%;width:25px;font-size:30px;background:#fffa;height:50px}.gallery-caption{left:7%;right:7%;bottom:5px;align-items:flex-start;gap:10px;flex-wrap:wrap}.pagination{flex-wrap:wrap}.topics{padding:0 8%;overflow:visible}.topic{grid-template-columns:1fr 90px;gap:12px 18px;min-height:0;padding:25px 0;border-bottom:1px solid #eee}.topic time{grid-column:1/-1}.topic h1,.topic h2{font-size:15px}.topic img{height:140px}.video-slide{padding:20px 6% 60px;height:calc(100dvh - 205px);gap:15px}.video-slide .poster-image{display:none}.video-slide video{max-width:100%;max-height:100%}dialog{padding:55px 25px 30px}#results{grid-template-columns:1fr}#search{font-size:18px}#lightbox{padding:65px 30px}.light-prev,.light-next{font-size:34px;padding:10px}.menu-dialog nav{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* Shared motion keeps the navigation steady while page content cross-fades. */
header,footer{transition:color .42s ease,background-color .42s ease}
.categories{font-family:Arial,Helvetica,'PingFang TC','Microsoft JhengHei',sans-serif;font-style:normal;font-weight:400;pointer-events:none;transform:translateX(-50%);transition:opacity .4s ease,visibility 0s linear .4s}
.works-nav:hover .categories,.works-nav.open .categories{pointer-events:auto;transform:translateX(-50%);transition:opacity .4s ease,visibility 0s linear 0s}
.categories a{display:block;font-family:inherit;opacity:1}
.categories a span{display:inline-block;transform:translateY(0);transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
.categories a:hover span,.categories a:focus-visible span{transform:translateY(-5px);opacity:.65}
@media(prefers-reduced-motion:reduce){.categories a:hover span,.categories a:focus-visible span{transform:none}header,footer,body:before,.categories,.categories a span{transition:none!important}}

/* Keep the submenu transparent on every page and at every breakpoint. */
body .categories,body.home .categories{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border:0!important;text-transform:uppercase}
footer nav>a,footer nav .works-nav>button{display:inline-block;text-transform:uppercase;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
footer nav>a:hover,footer nav>a:focus-visible,footer nav .works-nav>button:hover,footer nav .works-nav>button:focus-visible{transform:translateY(-5px)}
/* The image is its own layer, so its fade and colour reveal can run independently. */
body:before{content:none}
#home-background{position:fixed;inset:0;pointer-events:none;opacity:0;background:linear-gradient(#0004,#0004),url('assets/oa43AEUWZUn07B_vLOvgZ.webp') center 48%/cover no-repeat}
body.home #home-background{opacity:1}
@media(max-width:700px){#home-background{background-position:57% center}}
@media(prefers-reduced-motion:reduce){footer nav>a:hover,footer nav>a:focus-visible,footer nav .works-nav>button:hover,footer nav .works-nav>button:focus-visible{transform:none}footer nav>a,footer nav .works-nav>button{transition:none}}

body.home .categories{color:#fff!important}
@media(min-width:701px){.categories{grid-template-columns:repeat(6,max-content)}}
@media(min-width:701px) and (max-width:900px){.categories,.works-nav:hover .categories,.works-nav.open .categories{left:0;transform:none}}
/* A transparent navigation overlay with a soft, staggered entrance. */
#menu-dialog{background:transparent;color:#fff;box-shadow:none;border:0;overflow:visible;padding:55px 60px;width:min(620px,90vw)}
#menu-dialog::backdrop{background:rgba(15,17,20,.48);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#menu-dialog small{color:#e2e2e2}
#menu-dialog nav{gap:13px}
#menu-dialog nav a{display:flex;align-items:center;justify-content:space-between;padding:8px 0;opacity:1;animation:menu-item-in .55s cubic-bezier(.22,.61,.36,1) backwards}
#menu-dialog nav a:nth-child(1){animation-delay:40ms}#menu-dialog nav a:nth-child(2){animation-delay:85ms}#menu-dialog nav a:nth-child(3){animation-delay:130ms}#menu-dialog nav a:nth-child(4){animation-delay:175ms}#menu-dialog nav a:nth-child(5){animation-delay:220ms}#menu-dialog nav a:nth-child(6){animation-delay:265ms}
#menu-dialog .menu-word{display:inline-block;transform-origin:left center;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s}
#menu-dialog nav a:hover .menu-word,#menu-dialog nav a:focus-visible .menu-word{transform:translateY(-3px) scale(1.04)}
#menu-dialog small{float:none;margin:0;transition:transform .3s}
#menu-dialog nav a:hover small{transform:translateY(-2px)}
dialog[open]::backdrop{animation:backdrop-in .4s ease both}
dialog.closing::backdrop{animation:backdrop-out .22s ease both}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes menu-item-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.recruit h1 .recruit-line:first-child{margin-left:0;animation:recruit-line-in .8s cubic-bezier(.22,.61,.36,1) .12s both}
.recruit h1 .recruit-line:last-child{animation:recruit-line-in .85s cubic-bezier(.22,.61,.36,1) .7s both}
@keyframes recruit-line-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Give the artwork a definite, centered viewport instead of intrinsic flex sizing. */
#lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:60px 24px 30px;margin:0;overflow:hidden}
#lightbox[open]{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:minmax(0,1fr);align-items:center}
#lightbox figure{grid-column:2;grid-row:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;width:100%;height:100%;min-width:0;min-height:0;margin:0;justify-items:center;align-items:center}
#lightbox img{display:block;grid-row:1;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center}
#lightbox figcaption{grid-row:2;text-align:center;line-height:1.6;max-width:100%;overflow-wrap:anywhere}
#lightbox .light-prev,#lightbox .light-next{position:static;grid-row:1;align-self:center;padding:15px 0;width:100%;transition:transform .25s,opacity .25s}
#lightbox .light-prev{grid-column:1}#lightbox .light-next{grid-column:3}
#lightbox .light-prev:hover{transform:translateX(-3px)}#lightbox .light-next:hover{transform:translateX(3px)}
#lightbox .close{z-index:2}
@media(max-width:700px){#menu-dialog{padding:50px 20px 30px}#menu-dialog nav{gap:14px}#lightbox{padding:60px 8px 24px}#lightbox[open]{grid-template-columns:28px minmax(0,1fr) 28px}#lightbox figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){#menu-dialog nav a,#menu-dialog::backdrop,dialog[open]::backdrop,.recruit h1 .recruit-line{animation:none!important}#menu-dialog .menu-word,#menu-dialog small{transition:none}#menu-dialog nav a:hover .menu-word,#menu-dialog nav a:focus-visible .menu-word{transform:none}}
@media(min-width:701px){.artboard.space{inset:0 12% 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:24px;align-items:center}.artboard.space .art{position:static;width:100%;height:100%;min-width:0;min-height:0}.artboard.space .art:nth-child(2){grid-column:1;grid-row:2}.artboard.space .art:nth-child(3){grid-column:2;grid-row:1}}

/* Gentle typography entrances and Japan moving-image collection. */
.hero h1 span{border-bottom:0;position:relative;animation:title-reveal 1.05s cubic-bezier(.22,.61,.36,1) .25s both}
.hero h1 span:nth-child(2){animation-delay:.5s}
.hero h1 span::after{content:'';height:2px;background:currentColor;position:absolute;left:0;right:0;bottom:0;transform-origin:left;animation:underline-reveal 1s cubic-bezier(.22,.61,.36,1) .65s both}
.hero h1 span:nth-child(2)::after{animation-delay:.9s}
.about h1{animation:title-reveal 1.15s cubic-bezier(.22,.61,.36,1) .2s both}
@keyframes title-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes underline-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.phone-list{display:flex;flex-direction:column;gap:14px}.phone-list a{display:flex;align-items:center;gap:20px}.phone-list small{font:10px Arial,sans-serif;letter-spacing:.12em;min-width:45px}
.contact-row a[href^="mailto"]{font-size:clamp(17px,2.2vw,32px);overflow-wrap:anywhere}
.japan-index,.japan-project{padding:24px 7.8% 50px}.japan-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 28px}.japan-heading h1{font-size:22px;letter-spacing:-.04em;font-weight:500;margin:0}.japan-heading p,.japan-card p,.japan-kicker{font-size:10px;letter-spacing:.07em;color:#777}.japan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 25px}.japan-card:hover{opacity:1}.japan-cover{aspect-ratio:16/10;overflow:hidden;background:#f4f4f4}.japan-cover img{width:100%;height:100%;object-fit:contain;transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .65s;filter:grayscale(.25)}.japan-card:hover img{transform:scale(1.035);filter:none}.japan-card-title{display:flex;justify-content:space-between;font-size:12px;gap:10px;margin-top:15px}.japan-card p{margin:9px 0 0}.japan-back{display:inline-block;font-size:10px;letter-spacing:.1em;margin-bottom:25px}.japan-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:5%}.japan-player video{display:block;width:100%;height:min(48vh,510px);object-fit:contain;background:#f6f6f6}.japan-film-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:15px}.japan-film-caption h2{font-size:13px;font-weight:400;margin:0;text-transform:uppercase}.japan-film-caption>span{font-size:10px;color:#777;white-space:nowrap}.japan-description h1{font-size:clamp(22px,2.5vw,38px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:12px 0 23px}.japan-description>p:not(.japan-kicker){font-size:12px;line-height:2;color:#555}.film-list{display:grid;margin-top:24px}.film-list a{display:grid;grid-template-columns:20px 1fr 10px;gap:10px;border-top:1px solid #ddd;padding:11px 0;font-size:10px;text-transform:uppercase;line-height:1.4;transition:transform .25s,opacity .25s}.film-list a:hover{transform:translateX(3px)}.film-list a[aria-current]{font-weight:700}.film-list a>span:first-child{color:#888;font-weight:400}
@media(max-width:900px){.japan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.japan-heading{align-items:flex-start;flex-direction:column;gap:4px}.japan-layout{grid-template-columns:1fr}.japan-description{margin-top:30px}.japan-player video{height:45vh}}
@media(max-width:700px){.japan-index,.japan-project{padding:25px 7% 35px}.japan-grid{grid-template-columns:1fr;gap:30px}.japan-description h1{font-size:30px}.japan-player video{height:35vh}.phone-list{gap:14px}.phone-list a{font-size:19px;gap:12px}}
@media(prefers-reduced-motion:reduce){.hero h1 span,.hero h1 span::after,.about h1{animation:none}.japan-cover img,.film-list a{transition:none}}

/* Transparent search and restrained interaction feedback. */
#search-dialog{background:transparent;color:inherit;box-shadow:none;border:0;padding:40px 60px 20px;scrollbar-width:thin;scrollbar-color:currentColor transparent}
#search-dialog::backdrop{background:transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#search{background:transparent;color:inherit;border-bottom-color:currentColor;transform-origin:left center;transition:transform .32s cubic-bezier(.22,.61,.36,1),border-color .32s}
#search::placeholder{color:currentColor;opacity:.5}
#search:focus{transform:scale(1.025);outline:none;border-bottom-width:2px}
#search:focus-visible{outline:none}
#results{gap:8px 24px}
#results a{background:transparent;padding:10px 4px;transform-origin:left center;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s;opacity:.8}
#results a:hover,#results a:focus-visible{transform:translateY(-2px) scale(1.035);opacity:1}
#results a:active{transform:scale(1.01);opacity:.55}
#results small{color:inherit;opacity:.62;text-transform:uppercase}
header .icon{transform:scale(1);transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s}
header .icon:hover,header .icon:focus-visible{transform:scale(1.1);opacity:1}
header .icon:active{transform:scale(1.03);opacity:.6}
.slide-arrow{opacity:.72;background:transparent;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .22s}
.slide-arrow.prev{transform-origin:left center}.slide-arrow.next{transform-origin:right center}
.slide-arrow:hover,.slide-arrow:focus-visible{transform:scale(1.12);opacity:1}
.slide-arrow:active{transform:scale(1.04);opacity:.38}
.contact-row a[href^="mailto"]{font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:normal}
@media(max-width:700px){#search-dialog{padding:50px 25px 30px}.contact-row a[href^="mailto"]{font-size:19px}}
@media(prefers-reduced-motion:reduce){#search:focus,#results a:hover,#results a:focus-visible,#results a:active,header .icon:hover,header .icon:focus-visible,header .icon:active,.slide-arrow:hover,.slide-arrow:focus-visible,.slide-arrow:active{transform:none}}

/* Text-only awards retain dates and allow English titles to wrap. */
.topics .topic{grid-template-columns:120px minmax(0,1fr);gap:32px;min-height:145px}
.topics .topic h1,.topics .topic h2{max-width:900px;line-height:1.65}
@media(max-width:700px){.topics .topic{grid-template-columns:1fr;gap:12px;min-height:0}.topics .topic time{grid-column:auto}}

/* Contact details in each location remain readable on shorter screens. */
.email-list,.address-list{display:flex;flex-direction:column;gap:12px}
.contact{height:auto;min-height:100%;gap:34px;padding-top:24px;padding-bottom:30px}
.address-list{line-height:1.5}
@media(max-width:700px){.contact{padding-top:40px;gap:38px}.contact-row>div{max-width:100%}}

/* A shared edge inset balances the fixed navigation around the viewport. */
:root{--frame-edge:clamp(32px,4vw,64px);--header-icon:45px}
header{top:var(--frame-edge);left:var(--frame-edge);right:var(--frame-edge);bottom:auto;height:var(--header-icon);padding:0}
header .icon{width:var(--header-icon);height:var(--header-icon);opacity:.4}
header .brand{top:50%;transform:translate(-50%,-50%);line-height:1;display:flex;align-items:center}
header .brand small{line-height:1}
header .icon:hover,header .icon:focus-visible{opacity:1}
header .icon:active{opacity:.6}
footer{height:calc(var(--frame-edge) + 54px)}
footer nav{position:absolute;left:var(--frame-edge);right:var(--frame-edge);bottom:calc(var(--frame-edge) - 8px);height:38px;margin:0;line-height:22px}
footer .copyright{position:absolute;bottom:12px;left:20px;right:20px;margin:0}
@media(min-width:701px){#main{top:calc(var(--frame-edge) + var(--header-icon) + 20px);bottom:calc(var(--frame-edge) + 54px)}}
@media(max-width:700px){:root{--frame-edge:24px;--header-icon:40px}header{background:transparent;backdrop-filter:none}.brand{font-size:clamp(18px,5vw,23px)}footer{height:88px}footer nav{bottom:24px;line-height:18px}footer .copyright{bottom:5px;left:12px;right:12px}#main{margin-top:84px;margin-bottom:100px}.categories{bottom:88px}.home #main{height:calc(100dvh - 184px)}}

/* Keep a continuous pagination indicator while artwork slides independently. */
.pagination{position:relative}
.pagination button.active{text-decoration:none}
.pagination-marker{position:absolute;height:1px;background:currentColor;pointer-events:none;transform-origin:left center;color:#111}
.gallery:has(.pagination){overflow:hidden}
.slide-ghost{z-index:1}
.gallery .gallery-caption,.gallery .slide-arrow{z-index:2}

/* Contact uses shared columns and smaller, left-aligned details. */
.contact{max-width:1440px;margin-inline:auto;gap:34px}
.contact-row{display:grid;grid-template-columns:clamp(150px,15vw,216px) minmax(0,1fr);gap:48px;align-items:start;font-size:17px;text-align:left}
.contact-row h1,.contact-row h2{font-size:12px;line-height:1.65;margin:0}
.contact-row>div{min-width:0}
.contact-row .email-list a,.contact-row .phone-list a{font-size:17px;line-height:1.65}
.contact-row .phone-list a{display:grid;grid-template-columns:94px minmax(0,1fr);gap:22px;align-items:baseline}
.phone-list small{white-space:nowrap;font-size:10px;letter-spacing:.08em}
.phone-number{font-variant-numeric:tabular-nums;white-space:nowrap}
.contact-row .address{font-size:16px;line-height:1.7}
.contact-tools{text-align:left}
.address-list a{display:block;width:fit-content;max-width:100%;text-decoration:none;text-underline-offset:4px;transition:opacity .25s}
.address-list a:hover,.address-list a:focus-visible{text-decoration:underline}
.map-arrow{display:inline-block;opacity:.45;transition:opacity .25s,transform .25s}
.address-list a:hover .map-arrow,.address-list a:focus-visible .map-arrow{opacity:1;transform:translate(2px,-2px)}
@media(max-width:700px){.contact-row{grid-template-columns:1fr;gap:12px;font-size:16px}.contact-row .email-list a,.contact-row .phone-list a{font-size:16px}.contact-row .phone-list a{grid-template-columns:80px minmax(0,1fr);gap:18px}.contact-row .address{font-size:15px}.phone-list{gap:12px}}
@media(prefers-reduced-motion:reduce){.map-arrow{transition:none}.address-list a:hover .map-arrow,.address-list a:focus-visible .map-arrow{transform:none}}

/* Language controls share the search alignment; the brand signature sits at its baseline. */
header .brand{align-items:baseline}
header .brand small{align-self:flex-end;margin-bottom:.06em}
.header-tools{display:flex;align-items:center;gap:18px}
.language-button{font:12px Arial,Helvetica,sans-serif;min-width:32px;min-height:40px;padding:8px 4px;opacity:.5;transition:opacity .28s,transform .28s}
.language-button:hover,.language-button:focus-visible{opacity:1;transform:scale(1.08)}
html[lang="en"] body,html[lang="en"] body *{font-family:Manrope,Arial,Helvetica,sans-serif}
html[lang="en"] .hero h1{font-size:clamp(30px,4.6vw,68px);line-height:1.25;letter-spacing:-.035em;left:7.85%;right:5%}
html[lang="en"] .about h1{writing-mode:horizontal-tb;letter-spacing:-.03em;margin:0;font-size:clamp(32px,4vw,58px);line-height:1.15}
html[lang="en"] .about p,html[lang="en"] .recruit p{line-height:1.9}
html[lang="en"] .recruit h1{font-size:clamp(25px,3vw,44px);line-height:1.4}
html[lang="en"] .recruit h1 .recruit-line:last-child{margin-left:12%;margin-top:12px}
html[lang="en"] #menu-dialog small{display:none}
@media(max-width:700px){.header-tools{gap:5px}.language-button{min-width:27px;font-size:11px}header .brand{font-size:clamp(15px,4.3vw,23px);left:46%}html[lang="en"] .hero h1{font-size:clamp(22px,4.9vw,34px);left:7%;right:5%}html[lang="en"] .hero h1 span{max-width:100%}html[lang="en"] .recruit h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.language-button{transition:none}.language-button:hover{transform:none}}

/* A locally hosted variable sans keeps the portfolio light and consistent. */
@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
:root{--portfolio-sans:Manrope,Arial,Helvetica,'PingFang TC',sans-serif}
header .brand,footer nav,.categories,.topics,.topic h1,.topic h2,.contact-row,.phone-list small,.language-button{font-family:var(--portfolio-sans)}
footer nav,.categories,.contact-row,.topic h1,.topic h2{font-weight:350}
html[lang="en"] body{font-weight:350}
html[lang="en"] h1,html[lang="en"] h2{font-weight:300}
html[lang="en"] .hero h1{font-weight:300;letter-spacing:-.045em}
html[lang="en"] .about h1,html[lang="en"] .recruit h1{font-weight:300}
header .brand{font-weight:600}
.topic h1,.topic h2{line-height:1.8;letter-spacing:-.015em}
.contact-row{grid-template-columns:clamp(160px,29vw,410px) minmax(0,1fr)}
.hero-word{display:inline-block;white-space:nowrap;font:inherit}
.hero-letter{display:inline-block;font:inherit;font-style:normal;animation:letter-drift var(--cycle) ease-in-out var(--phase) infinite;will-change:transform,opacity}
@keyframes letter-drift{
 0%,100%{transform:translateY(0);opacity:1}
 23%{transform:translateY(calc(-1 * var(--drift)));opacity:var(--low-opacity)}
 57%{transform:translateY(calc(var(--drift) * .72));opacity:.96}
 81%{transform:translateY(calc(var(--drift) * -.35));opacity:.86}
}
@media(max-width:700px){.contact-row{grid-template-columns:1fr}.contact-row>div{margin-left:12px;max-width:calc(100% - 12px)}html[lang="en"] .hero h1{font-size:clamp(19px,4.9vw,34px)}}
@media(prefers-reduced-motion:reduce){.hero-letter{animation:none!important;transform:none!important;opacity:1!important;will-change:auto}}
/* Preserve clear word spacing when each glyph has its own animation box. */
html[lang="en"] .hero h1{letter-spacing:-.02em}
.hero-letter{letter-spacing:-.02em}
.hero-word:not(:last-child){margin-right:.22em}

/* Stronger navigation and a gently drifting brand signature. */
footer nav>a,footer nav .works-nav>button{font-weight:550}
.brand-word{display:inline-block;white-space:nowrap}
.brand-letter{display:inline-block;font:inherit;font-style:normal;animation:letter-drift var(--cycle) ease-in-out var(--phase) infinite;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.brand-letter{animation:none!important;transform:none!important;opacity:1!important;will-change:auto}}

/* A short lean travels across the headline; each glyph settles before the next wave. */
.hero-letter{transform-origin:50% 90%;animation:letter-domino 7.6s ease-in-out var(--phase) infinite}
@keyframes letter-domino{
 0%,6.5%,100%{transform:rotate(0deg);opacity:1}
 2.8%{transform:rotate(14deg);opacity:.84}
}
/* The smaller wordmark keeps its slower organic rhythm with subtle deformation. */
.brand-letter{transform-origin:50% 80%;animation-name:brand-morph}
@keyframes brand-morph{
 0%,100%{transform:translateY(0) rotate(0deg) scale(1,1);opacity:1}
 23%{transform:translateY(calc(-1 * var(--drift))) rotate(var(--tilt)) scale(.96,1.04);opacity:var(--low-opacity)}
 57%{transform:translateY(calc(var(--drift) * .72)) rotate(calc(var(--tilt) * -.7)) scale(1.04,.97);opacity:.96}
 81%{transform:translateY(calc(var(--drift) * -.35)) rotate(calc(var(--tilt) * .35)) scale(.99,1.02);opacity:.86}
}

/* Navigation mirrors the wordmark, then freezes and lifts on interaction. */
.nav-word{display:inline-block;white-space:nowrap}
footer nav>a:hover .nav-letter,footer nav>a:focus-visible .nav-letter,footer nav .works-nav:hover .nav-letter,footer nav .works-nav>button:focus-visible .nav-letter{animation-play-state:paused}
footer nav>a:hover,footer nav>a:focus-visible,footer nav .works-nav:hover>button,footer nav .works-nav>button:focus-visible{transform:translateY(-5px)}
/* The headline keeps its existing back-and-forth movement without an underline marker. */
.hero-letter{animation:none}
@media(prefers-reduced-motion:reduce){footer nav>a:hover,footer nav>a:focus-visible,footer nav .works-nav:hover>button,footer nav .works-nav>button:focus-visible{transform:none}}

/* A slightly stronger rule beneath the English headline. */
html[lang="en"] .hero h1> a>span::after{height:3px}

/* Compact three-language selection beside search. */
select.language-button{appearance:auto;border:0;background:transparent;color:inherit;width:64px;cursor:pointer;padding:8px 0;font-family:var(--portfolio-sans);border-radius:0}
select.language-button option{background:white;color:#191919}
@font-face{font-family:'Noto Sans JP';src:url('assets/fonts/NotoSansJP-subset.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
html[lang="ja"] body,html[lang="ja"] body *{font-family:'Noto Sans JP',Manrope,sans-serif}
html[lang="ja"] header .brand,html[lang="ja"] header .brand *{font-family:Manrope,Arial,sans-serif}
html[lang="ja"] body{font-weight:350}
html[lang="ja"] h1,html[lang="ja"] h2{font-weight:300}
html[lang="ja"] .hero h1{font-size:clamp(32px,4.7vw,68px);font-weight:300;letter-spacing:.01em;line-height:1.4}
html[lang="ja"] .hero-letter{letter-spacing:0}
html[lang="ja"] .hero-word{margin-right:0}
html[lang="ja"] .hero h1>a>span::after{height:3px}
html[lang="ja"] .about h1{writing-mode:horizontal-tb;letter-spacing:.12em;margin:0}
html[lang="ja"] .about p,html[lang="ja"] .recruit p{line-height:2.2;line-break:strict}
html[lang="ja"] .recruit h1{font-size:clamp(26px,3.1vw,45px);line-height:1.8}
html[lang="ja"] #menu-dialog small{display:none}
html[lang="ja"] footer nav{font-size:15px}
html[lang="ja"] .categories{font-size:12px;gap:15px 22px;grid-template-columns:repeat(4,max-content)}
html[lang="ja"] .contact-row .phone-list a{grid-template-columns:70px minmax(0,1fr)}
html[lang="ja"] .gallery-caption h1{letter-spacing:.03em}
@media(max-width:700px){select.language-button{width:52px;font-size:10px}.header-tools{gap:3px}header .brand{left:43%}html[lang="ja"] .hero h1{font-size:clamp(26px,7.2vw,45px);left:7%}html[lang="ja"] footer nav{font-size:10px;left:16px;right:16px}html[lang="ja"] .categories{grid-template-columns:repeat(2,minmax(0,1fr));font-size:11px;gap:12px 18px}html[lang="ja"] .about p,html[lang="ja"] .recruit p{font-size:14px}html[lang="ja"] .contact-row .phone-list a{grid-template-columns:60px minmax(0,1fr)}}

/* Japanese typography and the vertical signature; other languages stay unchanged. */
@font-face{font-family:'Zen Kaku Gothic New';src:url('assets/fonts/ZenKakuGothicNew-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Zen Kaku Gothic New';src:url('assets/fonts/ZenKakuGothicNew-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
html[lang="ja"] body,html[lang="ja"] body *{font-family:'Noto Sans JP',sans-serif}
html[lang="ja"] header .brand,html[lang="ja"] header .brand *{font-family:Manrope,Arial,sans-serif}
html[lang="ja"] body{font-weight:400}
html[lang="ja"] .hero h1{font-weight:400;font-size:clamp(30px,4.4vw,63px)}
html[lang="ja"] footer nav{left:10%;right:3.5%;font-size:13px}
html[lang="ja"] footer nav>a,html[lang="ja"] footer nav .works-nav>button{font-weight:400;letter-spacing:0}
html[lang="ja"] .nav-word{display:inline-flex;gap:0}
html[lang="ja"] .nav-letter{letter-spacing:0;margin:0;font-weight:400}
html[lang="ja"] .categories{font-size:12px;letter-spacing:0;font-weight:400;gap:12px 18px}
html[lang="ja"] #menu-dialog nav{font-size:24px;font-weight:400;letter-spacing:0;padding-left:20px}
html[lang="ja"] .topic h1,html[lang="ja"] .topic h2{font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.015em}
html[lang="ja"] .recruit h1{font-size:clamp(24px,2.6vw,37px);font-weight:400;letter-spacing:.02em}
html[lang="ja"] .contact-row h1,html[lang="ja"] .contact-row h2{font-weight:500}
html[lang="ja"] .japan-heading h1{font-size:20px;font-weight:500}
html[lang="ja"] .japan-description h1{font-size:28px;font-weight:400;line-height:1.4}
html[lang="ja"] .about h1.ja-name{position:relative;writing-mode:horizontal-tb;width:max-content;height:max-content;justify-self:end;margin:0 22% 0 0;font-size:40px;font-weight:400;letter-spacing:.15em;line-height:1.3;animation:none;overflow:visible}
html[lang="ja"] .ja-name-window{display:block;overflow:hidden;padding:0 2px}
html[lang="ja"] .ja-name-text{display:block;writing-mode:vertical-rl;text-orientation:upright;animation:ja-name-emerge 1.45s cubic-bezier(.16,1,.3,1) .25s both}
html[lang="ja"] .ja-name:before{content:'';position:absolute;width:28px;height:1px;background:currentColor;right:calc(100% + 10px);top:50%;transform-origin:right;animation:ja-name-rule 1s ease .65s both}
@keyframes ja-name-emerge{from{transform:translateX(115%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes ja-name-rule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.5}}
@media(max-width:700px){
 html[lang="ja"] footer nav{left:7%;right:3%;font-size:9px}
 html[lang="ja"] .hero h1{font-size:clamp(26px,7vw,44px)}
 html[lang="ja"] #menu-dialog nav{font-size:21px;padding-left:16px}
 html[lang="ja"] .topic h1,html[lang="ja"] .topic h2{font-size:14px}
 html[lang="ja"] .about h1.ja-name{font-size:32px;align-self:flex-end;margin-right:15%;letter-spacing:.12em}
 html[lang="ja"] .ja-name:before{width:22px}
 html[lang="ja"] .japan-description h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .ja-name-text,html[lang="ja"] .ja-name:before{animation:none;transform:none;opacity:1}}

/* Japanese revision: crisp sans, right-aligned detail column, rule-first signature. */
html[lang="ja"] .contact-row>div{margin-left:clamp(24px,4vw,58px);max-width:calc(100% - clamp(24px,4vw,58px))}
html[lang="ja"] .ja-name-window{width:calc(100% + 110px);margin-right:-110px;padding:0 2px;overflow:hidden}
html[lang="ja"] .ja-name-text{width:1.3em;animation:ja-name-cross 1.3s cubic-bezier(.22,.61,.36,1) .85s both}
html[lang="ja"] .ja-name:before{right:auto;left:calc(100% + 12px);width:30px;transform-origin:center;animation:ja-rule-extend .55s cubic-bezier(.22,.61,.36,1) .2s both}
@keyframes ja-rule-extend{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.55}}
@keyframes ja-name-cross{0%{transform:translateX(105px);opacity:0}18%{opacity:1}100%{transform:translateX(0);opacity:1}}
@media(max-width:700px){html[lang="ja"] .contact-row>div{margin-left:30px;max-width:calc(100% - 30px)}html[lang="ja"] .about h1.ja-name{margin-right:28%}}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .ja-name-text,html[lang="ja"] .ja-name:before{animation:none;transform:none;opacity:1}}
html[lang="ja"] .about h1.ja-name{width:1.4em}
@media(max-width:700px){html[lang="ja"] .about h1.ja-name{margin-right:40%}}
/* Japanese reading weight and rule-first, spring signature. */
html[lang="ja"] body{font-weight:300}
html[lang="ja"] .about p,html[lang="ja"] .recruit p,html[lang="ja"] .contact-row,html[lang="ja"] .topic h1,html[lang="ja"] .topic h2,html[lang="ja"] .japan-description>p,html[lang="ja"] .japan-card p{font-weight:300}
html[lang="ja"] footer nav>a,html[lang="ja"] footer nav .works-nav>button,html[lang="ja"] .nav-letter,html[lang="ja"] #menu-dialog nav,html[lang="ja"] .categories{font-weight:500}
html[lang="ja"] .about{gap:64px;grid-template-columns:1fr 1fr;align-items:start}
html[lang="ja"] .about h1.ja-name{font-size:32px;font-weight:350;letter-spacing:.12em;width:1.4em;margin:5px 0 0;justify-self:end}
html[lang="ja"] .ja-name-window{width:calc(100% + 75px);margin-right:-75px;overflow:hidden}
html[lang="ja"] .ja-name-text{animation:ja-name-spring 1.15s .9s both}
html[lang="ja"] .ja-name:before{left:calc(100% + 10px);right:auto;top:0;bottom:0;width:1px;height:100%;transform-origin:center;animation:ja-rule-grow .65s cubic-bezier(.22,.61,.36,1) .2s both}
@keyframes ja-rule-grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:.55}}
@keyframes ja-name-spring{0%{transform:translateX(70px);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}55%{transform:translateX(-4px);opacity:1;animation-timing-function:ease-in-out}77%{transform:translateX(2px);opacity:1;animation-timing-function:ease-in-out}100%{transform:translateX(0);opacity:1}}
@media(max-width:700px){html[lang="ja"] .about{display:grid;grid-template-columns:36px minmax(0,1fr);gap:26px;align-items:start}html[lang="ja"] .about h1.ja-name{font-size:25px;margin:5px 0 0;align-self:start}html[lang="ja"] .about p{font-size:13px;line-height:2.2}}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .ja-name-text,html[lang="ja"] .ja-name:before{animation:none;transform:none;opacity:1}}

/* Transparent language choices, matching the navigation's gentle lift. */
.language-switch{position:relative;color:inherit}
button.language-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:64px;padding:10px 0;background:transparent;border:0;cursor:pointer;color:inherit;font-size:12px;transition:opacity .28s,transform .28s}
.language-chevron{width:5px;height:5px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg);transition:transform .3s;opacity:.65;margin-right:3px}
.is-open .language-chevron{transform:rotate(225deg)}
#language-options{position:absolute;top:calc(100% + 6px);right:0;min-width:76px;display:flex;flex-direction:column;gap:8px;padding:6px 0;background:transparent;border:0;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .22s ease,transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s .32s}
.is-open #language-options{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
#language-options button{position:relative;text-align:left;font-size:12px;font-weight:400;letter-spacing:0;padding:8px 10px 8px 0;white-space:nowrap;opacity:0;transform:translateY(-5px);transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s;background:transparent}
.is-open #language-options button{opacity:1;transform:translateY(0)}
.is-open #language-options button:nth-child(2){transition-delay:45ms}
.is-open #language-options button:nth-child(3){transition-delay:90ms}
.is-open #language-options button:hover,.is-open #language-options button:focus-visible{opacity:.65;transform:translateY(-4px);transition-delay:0s}
#language-options button[aria-checked="true"]:after{content:'';position:absolute;left:0;bottom:4px;width:18px;height:1px;background:currentColor;opacity:.55}
button.language-button:hover{transform:translateY(-2px)}
@media(max-width:700px){button.language-button{width:52px;font-size:10px;gap:5px}#language-options{min-width:60px}#language-options button{font-size:11px}}
@media(prefers-reduced-motion:reduce){#language-options,#language-options button,button.language-button,.language-chevron{transition:none!important;transform:none!important}}

/* A fixed clipping edge hides the name until it crosses the vertical rule. */
html[lang="ja"] .ja-name-window{width:calc(100% + 10px);margin-right:0;padding:0 2px;overflow:hidden}
html[lang="ja"] .ja-name-text{animation:ja-name-mask-reveal 1.05s cubic-bezier(.22,.61,.36,1) .9s both}
@keyframes ja-name-mask-reveal{from{transform:translateX(70px);opacity:1}to{transform:translateX(0);opacity:1}}
/* Shared left edge for the three detail blocks, with more separation from labels. */
html .contact-row>div,html[lang="ja"] .contact-row>div{margin-left:clamp(50px,6vw,86px);max-width:calc(100% - clamp(50px,6vw,86px))}
html[lang="zh-Hant"] .about{align-items:start}
html[lang="zh-Hant"] .about h1{margin-top:8px;line-height:1.2}
/* Keep the underline mounted so both entering and leaving can fade. */
footer nav>a:after,footer nav .works-nav>button:after{content:'';position:absolute;height:1px;background:currentColor;bottom:4px;left:0;right:0;opacity:0;transform:scaleX(.9);transform-origin:center;transition:opacity .35s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
footer nav>a.active:after,footer nav .works-nav.active>button:after,footer nav .works-nav.open>button:after{opacity:1;transform:scaleX(1)}
@media(max-width:700px){html .contact-row>div,html[lang="ja"] .contact-row>div{margin-left:38px;max-width:calc(100% - 38px)}html[lang="zh-Hant"] .about{display:grid;grid-template-columns:42px minmax(0,1fr);gap:24px}html[lang="zh-Hant"] .about h1{writing-mode:vertical-rl;font-size:30px;letter-spacing:.15em;margin:4px 0 0}html[lang="zh-Hant"] .about p{font-size:14px}.award-date-empty{display:none}}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .ja-name-text{animation:none;transform:none}footer nav>a:after,footer nav .works-nav>button:after{transition:none}}

/* Equal outside margins; each contact block fits its content against the right edge. */
.contact{padding-left:11.5%;padding-right:11.5%}
.contact-row{grid-template-columns:minmax(90px,1fr) minmax(0,max-content);gap:48px}
html .contact-row>div,html[lang="ja"] .contact-row>div{justify-self:end;margin-left:0;max-width:min(100%,520px);width:max-content}
html[lang="ja"] .contact-row .email-list a{font-weight:250}
html[lang="ja"] .about h1.ja-name,html[lang="ja"] .about h1.ja-name *{font-family:'Songti TC','Songti SC','Noto Serif CJK TC',serif;font-weight:300}
@media(max-width:700px){.contact{padding-left:8%;padding-right:8%}.contact-row{grid-template-columns:1fr;gap:12px}html .contact-row>div,html[lang="ja"] .contact-row>div{max-width:100%;margin-left:0;justify-self:end}}

/* All contact details share the address block's left edge in every language. */
html .contact-row>div,html[lang="ja"] .contact-row>div{width:var(--contact-detail-width,max-content);text-align:left}

/* Transparent tracks, with a quiet thumb only during scrolling. */
@property --scroll-thumb{syntax:'<color>';inherits:false;initial-value:transparent}
html,body,#main,#main *,dialog{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
html.is-scrolling,body.is-scrolling,#main.is-scrolling,#main .is-scrolling,dialog.is-scrolling{--scroll-thumb:rgba(90,90,90,.38)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px}

html,body,#main,.topics,.japan-index,.japan-project{transition:--scroll-thumb .35s ease}

/* Lighter Japanese work-category labels, including hover. */
html[lang="ja"] .categories,html[lang="ja"] .categories a,html[lang="ja"] .categories a span{font-weight:350}

/* New portfolio pages use aligned cells instead of imported canvas coordinates. */
.artboard.curated{inset:16px 8% 55px;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:24px;align-items:center}
.artboard.curated .art{position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0}
.artboard.curated .art img{width:100%;height:100%;object-fit:contain}
.artboard.motion-board .video-slide{padding:10px 8%;height:100%}
@media(max-width:700px){.artboard.curated{position:relative;inset:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:18px;min-height:0;padding:15px 0 35px}.artboard.curated.single{grid-template-columns:1fr}.artboard.curated .art{height:auto;min-height:0}.artboard.curated .art img{height:auto;max-height:480px}.artboard.motion-board{height:calc(100dvh - 290px);display:block}.gallery:has(.curated){padding-bottom:70px}}

/* Full reading edition and exhibition studies. */
.folio{padding:20px 5.7% 60px;max-width:1800px;margin:auto;font-weight:350}
.folio .folio-heading{position:static;inset:auto;transform:none;height:auto;min-height:0;padding:0 0 26px;display:flex;gap:24px;align-items:flex-end;justify-content:space-between;pointer-events:auto;z-index:auto;background:transparent;backdrop-filter:none}
.folio-heading h1{font-family:inherit;font-size:clamp(22px,2.7vw,40px);font-weight:450;letter-spacing:-.035em;margin:8px 0 10px}
.folio-heading p{font-size:11px;letter-spacing:.08em;color:#777;margin:0;line-height:1.7}
.folio-heading nav{display:flex;gap:26px;font-size:12px;white-space:nowrap}
.folio-heading nav a{padding:10px 0;opacity:.5;transition:opacity .3s,transform .3s;border-bottom:1px solid transparent}
.folio-heading nav a[aria-current]{opacity:1;border-bottom-color:currentColor}
.folio-heading nav a:hover{opacity:1;transform:translateY(-3px)}
.folio-page{display:flex;align-items:center;justify-content:center;width:100%;padding:0;cursor:zoom-in;min-height:180px}
.folio-page:hover{opacity:1}.folio-page img{display:block;width:100%;max-height:58dvh;object-fit:contain}
.folio-controls{display:flex;justify-content:space-between;align-items:center;margin:20px 0 26px;font-size:11px;color:#666}
.folio-controls button{padding:10px 0;transition:opacity .3s,transform .3s}.folio-controls button:hover{transform:translateY(-2px)}
.folio-controls button:disabled{opacity:.2;cursor:default;transform:none}
.folio-index{border-top:1px solid #ddd;padding-top:18px}.folio-index summary{cursor:pointer;font-size:11px;letter-spacing:.08em;list-style:none}
.folio-index>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:24px}.folio-index a{display:block;opacity:.65;transition:opacity .3s}.folio-index a:hover,.folio-index a[aria-current]{opacity:1}.folio-index img{width:100%;aspect-ratio:2.7;object-fit:contain}.folio-index span{display:block;font-size:10px;margin-top:8px}
.folio-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}.folio-films article{min-width:0}.folio-films video{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#f3f3f3}.folio-films h2{font:inherit;font-size:11px;font-weight:350;letter-spacing:.1em;margin:14px 0 0;color:#666}
@media(max-width:700px){.folio{padding:15px 6% 35px}.folio .folio-heading{align-items:flex-start;flex-direction:column;gap:12px}.folio-heading nav{gap:24px}.folio-page img{max-height:none}.folio-index>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.folio-films{grid-template-columns:1fr;gap:28px}.folio-heading h1{font-size:24px}.folio-controls{font-size:10px}}

/* Portable serif headings and a compact Japanese signature reveal. */
@font-face{font-family:'Portfolio Serif';src:url('assets/fonts/NotoSerifTC-headings.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
html[lang="zh-Hant"] .hero h1,html[lang="zh-Hant"] .hero h1 *{font-family:'Portfolio Serif',serif;font-weight:600}
html[lang="zh-Hant"] .about h1,html[lang="ja"] .about h1.ja-name,html[lang="ja"] .about h1.ja-name *{font-family:'Portfolio Serif',serif;font-weight:400}
html[lang="ja"] .about h1.ja-name{width:1.3em}
html[lang="ja"] .ja-name-window{width:1.3em;margin:0;padding:0;overflow:hidden}
html[lang="ja"] .ja-name-text{width:1.3em;animation:ja-name-compact 1.15s cubic-bezier(.22,.61,.36,1) .85s both}
html[lang="ja"] .ja-name:before{left:calc(100% + 5px);right:auto;top:0;bottom:0;width:1px;height:100%}
@keyframes ja-name-compact{from{transform:translateX(22px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .ja-name-text{animation:none;transform:none;opacity:1}}

/* Adobe-licensed Futura PT, with a local fallback for interrupted font loading. */
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-variable.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
html[lang="en"]{--portfolio-sans:'Space Grotesk','Space Grotesk',Arial,sans-serif}
html[lang="en"] body,html[lang="en"] body *{font-family:'Space Grotesk','Space Grotesk',Arial,sans-serif}
html[lang="en"] body{font-weight:300}
html[lang="en"] :is(.hero h1,.about h1,.recruit h1,.contact-row),html[lang="en"] :is(.hero h1,.about h1,.recruit h1,.contact-row) *{font-family:'Space Grotesk','Space Grotesk',Arial,sans-serif;font-weight:300}
html[lang="en"] .hero h1{font-weight:300;letter-spacing:-.035em}
html[lang="en"] .about h1,html[lang="en"] .recruit h1{font-weight:300}
/* Japanese name now uses the same entrance as the Chinese name. */
html[lang="ja"] .about h1.ja-name{writing-mode:vertical-rl;text-orientation:upright;width:auto;animation:title-reveal 1.15s cubic-bezier(.22,.61,.36,1) .2s both}
html[lang="ja"] .about h1.ja-name::before,html[lang="ja"] .about h1.ja-name::after{content:none;display:none;animation:none}
@media(prefers-reduced-motion:reduce){html[lang="ja"] .about h1.ja-name{animation:none;transform:none;opacity:1}}

/* Chinese characters share the Japanese domino rhythm without word gaps. */
html[lang="zh-Hant"] .hero-word{margin-right:0}
html[lang="zh-Hant"] .hero-letter{letter-spacing:-.04em}

/* Phone-only frosted navigation and comfortable touch targets. */
#mobile-menu-backdrop{display:none}
@media(max-width:700px){
 :root{--phone-bottom:env(safe-area-inset-bottom,0px)}
 footer{height:calc(88px + var(--phone-bottom));backdrop-filter:none;-webkit-backdrop-filter:none}
 footer nav,html[lang="ja"] footer nav{bottom:calc(24px + var(--phone-bottom));height:44px;gap:6px}
 footer .copyright{bottom:calc(5px + var(--phone-bottom))}
 footer nav>a,footer nav .works-nav>button{min-height:44px;display:flex;align-items:center;justify-content:center}
 #main{margin-bottom:calc(100px + var(--phone-bottom))}
 #mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:5;opacity:0;visibility:hidden;pointer-events:none;background:linear-gradient(180deg,rgba(248,248,246,.1),rgba(248,248,246,.34) 70%,rgba(248,248,246,.48));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:opacity .32s ease,visibility 0s .32s}
 .home #mobile-menu-backdrop{background:linear-gradient(180deg,rgba(12,15,18,.1),rgba(12,15,18,.4) 70%,rgba(12,15,18,.52))}
 body.mobile-works-open #mobile-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
 body.mobile-works-open,body:has(dialog[open]){overflow:hidden}
 body.mobile-works-open footer{background:transparent}
 body .categories,body.home .categories,html[lang="ja"] .categories{position:fixed;left:16px;right:16px;bottom:calc(88px + var(--phone-bottom));width:auto;max-height:calc(100dvh - 180px - var(--phone-bottom));overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:18px 12px 20px;font-size:13px;line-height:1.45;letter-spacing:0;background:transparent!important;transform:none!important}
 body .works-nav:not(.open) .categories{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
 body .works-nav.open .categories{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease,visibility 0s}
 body .categories a{min-height:48px;display:flex;align-items:center;padding:10px 8px;overflow-wrap:anywhere;color:inherit;opacity:1}
 body .categories a:active{background:rgba(127,127,127,.15);border-radius:6px}
 body .categories a span{transform:none!important}
 .works-nav.open .nav-letter{animation-play-state:paused}
 header .icon{min-width:44px;min-height:44px}
 button.language-button{min-height:44px}
 #language-options,.home #language-options{min-width:112px;padding:8px 12px;gap:0;border-radius:0;background:transparent;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
 #language-options button{min-height:44px;padding:10px 6px;font-size:13px}
 #menu-dialog,#search-dialog{width:calc(100vw - 32px);max-height:calc(100dvh - 48px - var(--phone-bottom));overflow-y:auto;overscroll-behavior:contain;padding:60px 24px 28px;color:#fff}
 #menu-dialog::backdrop,#search-dialog::backdrop{background:linear-gradient(160deg,rgba(15,17,20,.62),rgba(15,17,20,.88));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
 #menu-dialog nav a{min-height:48px}
 #search{font-size:18px;min-height:48px}
 #search:focus{transform:none}
 #results a{min-height:64px;padding:12px 4px;opacity:1}
 .close{min-width:44px;min-height:44px;right:8px;top:6px}
 #lightbox{padding-top:calc(60px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + var(--phone-bottom))}
 #lightbox[open]{grid-template-columns:44px minmax(0,1fr) 44px}
 #lightbox .light-prev,#lightbox .light-next{min-height:48px}
 .slide-arrow{width:44px;min-height:48px}
 .pagination button{min-width:36px;min-height:44px}
 .contact-tools button{min-height:44px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){#mobile-menu-backdrop,.categories{transition:none!important}}

/* Keep English navigation readable alongside the lighter Futura display text. */
html[lang="en"] footer nav,html[lang="en"] footer nav :is(a,button,span){font-weight:600}

/* Mobile navigation sits directly on the page, without a separate tinted strip. */
@media(max-width:700px){footer,body.home footer{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}}

/* Use Futura for Latin text in Chinese, retaining each original Chinese fallback. */
html[lang="zh-Hant"]{--portfolio-sans:'Space Grotesk',Manrope,Arial,Helvetica,'PingFang TC',sans-serif}
html[lang="zh-Hant"] body{font-family:'Space Grotesk',Arial,'PingFang TC','Microsoft JhengHei',sans-serif}
html[lang="zh-Hant"] .hero h1,html[lang="zh-Hant"] .hero h1 *,html[lang="zh-Hant"] .about h1{font-family:'Space Grotesk','Portfolio Serif',serif}
html[lang="zh-Hant"] .recruit h1{font-family:'Space Grotesk','Songti TC','Songti SC',serif}

/* Mobile link affordances: quiet underlines instead of emoji-style arrows. */
@media(max-width:700px){
 .map-arrow,.outbound-arrow{display:none!important}
 .japan-card-title>span:first-child,.film-list a,#results a small{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:currentColor}
}

/* Subtle mobile link rules match the Copy Gmail control. */
@media(max-width:700px){.address-list a,.address-list a:hover,.address-list a:focus-visible,.recruit .contact-link,.recruit .contact-link:hover,.recruit .contact-link:focus-visible{text-decoration:none;border-bottom:1px solid #aaa}}

/* Japanese glyphs retain their original fonts; Latin glyphs use Futura. */
html[lang="ja"]{--portfolio-sans:'Space Grotesk','Noto Sans JP',sans-serif}
html[lang="ja"] body,html[lang="ja"] body *{font-family:'Space Grotesk','Noto Sans JP',sans-serif}
html[lang="ja"] header .brand,html[lang="ja"] header .brand *{font-family:'Space Grotesk',Manrope,Arial,sans-serif}
html[lang="ja"] .about h1.ja-name,html[lang="ja"] .about h1.ja-name *{font-family:'Space Grotesk','Portfolio Serif',serif}

/* Mobile address rules follow the address text color. */
@media(max-width:700px){.address-list a,.address-list a:hover,.address-list a:focus-visible{border-bottom-color:currentColor}}

/* Match the mobile Chinese Recruit headline to the homepage serif. */
@media(max-width:700px){html[lang="zh-Hant"] .recruit h1,html[lang="zh-Hant"] .recruit h1 *{font-family:'Space Grotesk','Portfolio Serif',serif;font-weight:600}}

/* Chiron Hei HK for Traditional Chinese; Latin stays in Futura PT. */
html[lang="zh-Hant"]{--portfolio-sans:'Space Grotesk','chiron-hei-hk','PingFang TC','Microsoft JhengHei',sans-serif}
html[lang="zh-Hant"] body,html[lang="zh-Hant"] .categories{font-family:var(--portfolio-sans)}
html[lang="zh-Hant"] :is(.recruit p,.japan-description>p,.japan-card p){font-weight:200}
html[lang="zh-Hant"] .about p{font-weight:300}
html[lang="zh-Hant"] .folio-heading :is(h1,p){font-weight:300}

/* Match the Chinese About name size to the Japanese version. */
html[lang="zh-Hant"] .about h1{font-size:32px}
@media(max-width:700px){html[lang="zh-Hant"] .about h1{font-size:25px}}