:root{--bg:#0d0c0b;--bg2:#161412;--ink:#e9e4dc;--mute:#9a938a;--line:rgba(233,228,220,.11)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:13px;letter-spacing:.14em;line-height:2.2}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.en{font-family:var(--fs);font-weight:300;letter-spacing:.32em;text-transform:uppercase}
header{position:fixed;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:28px 6vw;transition:background 1s}
header.solid{background:rgba(13,12,11,.92)}
header .logo{grid-column:2}header .logo img{height:40px;width:auto}
header nav{grid-column:3;justify-self:end;font-size:11px}header nav a{margin-left:3em;opacity:.85}
.hero{height:100vh;position:relative;overflow:hidden;background:#000}
.hero .s{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.hero .s.on{opacity:1}
.hero .s img{transform:scale(1);transition:transform 8.5s linear}
.hero .s.on img{transform:scale(1.06)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 35%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.5))}
.hero .cap{position:absolute;inset:auto 0 12vh;text-align:center;z-index:2;color:#f3eee6;opacity:0;transition:opacity 2.4s ease 1s}
.hero .cap.in{opacity:1}
.hero .cap h1{font-size:clamp(20px,2.2vw,30px);font-weight:300}
.hero .cap p{font-size:12px;margin-top:1.4em;letter-spacing:.5em}
section{padding:26vh 6vw}
.center{text-align:center}
.lead{max-width:520px;margin:0 auto;text-align:center;font-size:14px;color:var(--ink)}
.label{font-size:11px;color:var(--mute);letter-spacing:.5em;text-align:center;margin-bottom:8vh}
.rule{width:1px;height:8vh;background:var(--line);margin:6vh auto}
.works .bleed{aspect-ratio:21/9}
.works .row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.works .row .ph{aspect-ratio:4/3}
.work{display:block;position:relative;overflow:hidden}
.work img{transition:transform 1.6s ease,opacity 1.6s}
a.work:hover img{transform:scale(1.03)}
.work .t{position:absolute;inset:auto 0 0;padding:4vh 0;text-align:center;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);color:#f3eee6}
.work .t .en{display:block;font-size:13px}.work .t span:last-child{font-size:11px;opacity:.8}
.award{text-align:center}
.award ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;max-width:820px;margin:0 auto}
.award li{padding:0 2vw;font-size:12px;color:var(--mute)}.award li+li{border-left:1px solid var(--line)}
.award li .en{display:block;font-size:13px;color:var(--ink);margin-bottom:.6em}
.steps{display:grid;grid-template-columns:repeat(5,1fr);max-width:960px;margin:0 auto;text-align:center}
.steps div{font-size:12px;padding:0 1vw}.steps div+div{border-left:1px solid var(--line)}
.steps .en{display:block;font-size:12px;color:var(--mute)}
.full{height:100vh}
footer{padding:20vh 6vw 10vh;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;font-size:11px;color:var(--mute);border-top:1px solid var(--line);align-items:start}
footer img{height:46px;width:auto;margin:0 auto 2em}footer .label{margin-bottom:2em}footer p{line-height:2.4}
.float{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;flex-direction:column;gap:10px}
.float a{width:48px;height:48px;border-radius:50%;border:1px solid rgba(233,228,220,.35);background:rgba(13,12,11,.7);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.1em;backdrop-filter:blur(6px)}
.p-head{padding:30vh 6vw 16vh;text-align:center}
.p-head h1{font-weight:300;font-size:clamp(20px,2vw,28px)}
.p-head h1 small{display:block;font-size:12px;color:var(--mute);margin-top:1.4em;letter-spacing:.5em}
.p-head .meta,.p-head .lead{margin-top:5vh;color:var(--mute);font-size:12px}
.gal2{display:flex;flex-direction:column;gap:6px;padding-bottom:20vh}
.gal2 .one{aspect-ratio:16/9}
.gal2 .two{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gal2 .two div{aspect-ratio:4/3}.gal2 .two.tall div{aspect-ratio:2/3}
.gal2 .solo{width:50%;margin:0 auto;aspect-ratio:2/3}
.gal2 p{text-align:center;font-size:13px;color:var(--mute);padding:20vh 6vw}
.next{display:grid;grid-template-columns:1fr 1fr;padding:10vh 6vw;border-top:1px solid var(--line);font-size:11px}.next a:last-child{text-align:right}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
.contact .tx{display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--bg2);padding:10vh 4vw}
.contact .tx ul{list-style:none;font-size:12px}.contact li{padding:2.2em 0}.contact li+li{border-top:1px solid var(--line)}.contact li .en{display:block;font-size:11px;color:var(--mute)}
.contact .ph{aspect-ratio:4/5}
.fade{opacity:0;transform:translateY(12px);transition:opacity 1.4s ease,transform 1.4s ease}.fade.in{opacity:1;transform:none}
@media(max-width:760px){header{padding:20px 6vw}header nav{display:none}header .logo img{height:32px}
.works .row,.gal2 .two,.contact,footer{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps div+div{border:0}.award ul{grid-template-columns:1fr}.award li+li{border:0;margin-top:3em}
.works .bleed,.works .row .ph{aspect-ratio:4/5}.gal2 .solo{width:100%}section{padding:16vh 6vw}footer{gap:6vh}.gal2 p{padding:12vh 6vw}}
@media(prefers-reduced-motion:reduce){.fade,.hero .cap{transition:none;opacity:1;transform:none}.hero .s img{transition:none;transform:none}.hero .s{transition:none}}
/* v4.1 */
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 72%,rgba(13,12,11,.62) 100%)}
.hero .cap{inset:auto 0 3.2vh}.hero .cap h1{font-size:clamp(16px,1.5vw,22px)}.hero .cap p{margin-top:.6em;font-size:11px}
header .logo img{height:60px}
header nav a{color:rgba(243,238,230,.85);opacity:1}
.label,.p-head h1 small,footer,.steps .en,.award li,.contact li .en{color:rgba(243,238,230,.74)}
section.intro{padding:13vh 6vw}
@media(max-width:760px){header .logo img{height:48px}.hero .cap{bottom:3vh}section.intro{padding:8vh 6vw}}
.hero::after{background:linear-gradient(180deg,rgba(13,12,11,.42),rgba(13,12,11,0) 18%,rgba(13,12,11,0) 70%,rgba(13,12,11,.55) 86%,rgba(13,12,11,.78) 100%)}
.hero .cap{bottom:2.6vh}header nav a{color:rgba(246,242,235,.9);text-shadow:0 0 12px rgba(0,0,0,.35)}
.label{font-size:12px;color:rgba(246,242,235,.86)!important;font-weight:400}
.float{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 1.2s ease,transform 1.2s ease,visibility 0s 1.2s}
.float.show{opacity:1;visibility:visible;transform:none;transition:opacity 1.2s ease,transform 1.2s ease}
.nohero .float{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.hero .s:nth-child(1) img{object-position:72% 50%}.hero .s:nth-child(2) img{object-position:52% 50%}.hero .s:nth-child(3) img{object-position:60% 50%}.hero .s:nth-child(4) img{object-position:86% 50%}.hero .s:nth-child(5) img{object-position:64% 50%}}
header{transition:background .8s ease,padding .8s ease}
header.solid{background:rgba(13,12,11,.92);padding-top:14px;padding-bottom:14px;backdrop-filter:blur(4px)}
header .logo img{transition:height .8s ease}header.solid .logo img{height:44px}
.works .bleed,.works .row .ph{aspect-ratio:auto}
.works .bleed img{aspect-ratio:21/9;height:auto}.works .row .ph img{aspect-ratio:4/3;height:auto}
.work{overflow:visible}.work img{overflow:hidden}
.work .t{position:static;background:none;padding:2.6vh 0 6vh;color:var(--ink)}
.works .row{margin-top:0}
@media(max-width:760px){header.solid{padding-top:10px;padding-bottom:10px}header.solid .logo img{height:36px}.works .bleed img,.works .row .ph img{aspect-ratio:4/5}.work .t{padding:2vh 0 5vh}}
@media(max-width:760px){.float{right:12px;bottom:16px;gap:8px}.float a{width:40px;height:40px;font-size:9px}.work .t{padding-left:64px;padding-right:64px}}
@media(min-width:761px){.m-only{display:none}}
@media(max-width:760px){.hero .s:nth-child(1) img{object-position:50% 50%}.hero .s:nth-child(2) img{object-position:80% 50%}.hero .s:nth-child(3) img{object-position:40% 50%}.hero .s:nth-child(4) img{object-position:50% 50%}}
/* v5 hero: Ken Burns zoom then crossfade */
.hero{background:#0d0c0b}
.hero .s{opacity:0;transition:opacity 1.5s ease;z-index:0}
.hero .s.on{opacity:1;z-index:1}.hero .s.top{z-index:2}
.hero .s img{transition:none;transform:scale(1);will-change:transform}
.hero .s.on img{transform:scale(1);animation:kb 8.5s linear forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero::after{z-index:3}.hero .cap{z-index:4}
@media(prefers-reduced-motion:reduce){.hero .s.on img{animation:none;transform:none}.hero .s{transition:none}}
/* v5 awards */
.aw-line{margin-top:3vh;text-align:center;font-family:var(--fs);font-weight:300;font-size:13px;letter-spacing:.18em;color:var(--mute)}
.awards{padding:14vh 6vw 16vh;text-align:center}.awards .label{margin-bottom:5vh}
.awards ul{list-style:none;font-family:var(--fs);font-weight:300;font-size:15px;letter-spacing:.16em;color:var(--ink)}
.awards li+li{margin-top:3.2vh}.awards small{display:block;font-size:11px;color:var(--mute);letter-spacing:.32em;margin-top:.5em}
@media(max-width:760px){.aw-line{font-size:12px;line-height:2}.aw-line .sep{display:none}.awards ul{font-size:13px}}
@media(max-width:760px){.aw-line{font-size:11px;letter-spacing:.08em}}
/* ===== v6 ===== */
.works{padding:0 7vw 14vh}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7vh 3.2vw;max-width:1500px;margin:0 auto}
.card{display:block}.card .frame{overflow:hidden;aspect-ratio:4/5;background:var(--bg2)}
.card .frame img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1s ease}
.card:hover .frame img{transform:scale(1.06)}
.ct{padding:2.2vh 0 0;text-align:center}.ct .en{display:block;font-family:var(--fs);font-weight:300;font-size:15px;letter-spacing:.2em}
.ct .zh{display:block;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:11px;color:var(--mute);letter-spacing:.4em;margin-top:.3em}
@media(max-width:1100px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.works{padding:0 6vw 10vh}.wgrid{grid-template-columns:1fr;gap:6vh}}
/* nav swap */
nav a.sw{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;height:2.2em;line-height:2.2em}
nav a.sw span{display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
nav a.sw .c{position:absolute;left:0;right:0;top:0;text-align:center;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;letter-spacing:.3em;white-space:nowrap;transform:translateY(100%);opacity:0}
nav a.sw:hover .e{transform:translateY(-100%);opacity:0}nav a.sw:hover .c{transform:none;opacity:1}
/* project top */
.p-top{max-width:1100px;margin:0 auto;padding:30vh 7vw 12vh;text-align:center}
.p-top h1{font-family:var(--fs);font-weight:300;font-size:clamp(24px,2.6vw,38px);letter-spacing:.2em}
.p-top h1 small{display:block;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:12px;color:var(--mute);margin-top:1.4em;letter-spacing:.5em}
.p-info{display:grid;grid-template-columns:1.4fr 1fr;gap:6vw;margin-top:10vh;text-align:left;border-top:1px solid var(--line);padding-top:6vh}
.p-info .label{text-align:left;margin-bottom:2.4vh}.concept p:last-child{color:var(--mute);font-size:13px}
.p-info dl{display:grid;grid-template-columns:5em 1fr;font-size:12px;row-gap:1.6em}.p-info dt{color:var(--mute);letter-spacing:.3em}.p-info dd{color:var(--mute)}
.pg{max-width:1280px;margin:0 auto;padding:0 7vw 18vh}
.pg .big{display:flex;flex-direction:column;gap:6vh}.pg .big img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pg .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;margin-top:10vh}.pg .thumbs img{aspect-ratio:4/5;object-fit:cover;width:100%}
.pg figure{overflow:hidden}.pg img[data-lb]{cursor:zoom-in;transition:transform 1s ease}.pg figure:hover img{transform:scale(1.03)}
@media(max-width:760px){.p-top{padding:20vh 6vw 8vh}.p-info{grid-template-columns:1fr;gap:5vh}.pg{padding:0 5vw 12vh}.pg .thumbs{grid-template-columns:1fr 1fr;gap:3vw}}
.lb{position:fixed;inset:0;z-index:50;background:rgba(13,12,11,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;cursor:zoom-out}
.lb.on{opacity:1;visibility:visible}.lb img{max-width:90vw;max-height:88vh;object-fit:contain;width:auto;height:auto}
.lb .x{position:absolute;top:24px;right:28px;color:var(--ink);font-size:12px;letter-spacing:.3em}
/* process */
.psec{padding-top:6vh}.proc{list-style:none;max-width:760px;margin:0 auto}
.proc li{display:grid;grid-template-columns:5em 1fr;padding:4.5vh 0;border-top:1px solid var(--line);text-align:left}
.proc .n{font-family:var(--fs);font-weight:300;font-size:22px;color:var(--mute)}
.proc h3{font-weight:400;font-size:15px;letter-spacing:.3em}.proc h3 .en{display:block;font-size:11px;color:var(--mute);letter-spacing:.4em;margin-bottom:.4em}
.proc p{font-size:12px;color:var(--mute);margin-top:.6em}
.book{max-width:760px;margin:0 auto;padding:12vh 6vw 20vh;text-align:center}.book h2{font-weight:400;font-size:18px;letter-spacing:.4em;margin:-4vh 0 6vh}
.book form{display:grid;grid-template-columns:1fr 1fr;gap:3.4vh 3vw;text-align:left}
.book label{display:flex;flex-direction:column;font-size:11px;color:var(--mute);letter-spacing:.3em}.book label.w{grid-column:1/-1}
.book input,.book textarea{margin-top:.8em;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;letter-spacing:.1em;padding:.6em 0;outline:none;resize:vertical}
.book input:focus,.book textarea:focus{border-color:var(--mute)}.book input::placeholder{color:rgba(154,147,138,.5)}
.book button{grid-column:1/-1;justify-self:center;margin-top:3vh;background:none;border:1px solid var(--line);color:var(--ink);padding:1.1em 4.4em;font-family:var(--fs);font-size:13px;letter-spacing:.4em;cursor:pointer;transition:border-color .6s}
.book button:hover{border-color:var(--ink)}.book .sent{margin-top:4vh;font-size:13px}
@media(max-width:760px){.book form{grid-template-columns:1fr}.proc li{grid-template-columns:3.6em 1fr}}
.card .frame img{object-position:50% 88%}
/* v6b cards */
.card .frame{aspect-ratio:8/7}.card .frame img{object-position:50% 60%}
.ct{text-align:left;padding-top:2.4vh}
.ct h3{font-weight:300;display:flex;justify-content:space-between;align-items:baseline}
.ct h3 .en{font-family:var(--fs);font-weight:300;font-size:15px;letter-spacing:.22em;color:var(--ink)}
.ct h3 .no{font-size:11px;color:var(--mute);letter-spacing:.2em}
.ct .zh{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:11px;color:var(--mute);letter-spacing:.3em;margin-top:.6em}
.ct .mi{margin-left:1.4em;opacity:.75;letter-spacing:.2em}
.ct h3 .no{font-size:13px}
/* ===== v7 ===== */
header{grid-template-columns:1fr auto 1fr}
header nav{grid-column:3;justify-self:end;display:flex;align-items:center}
header .cta{position:absolute;right:6vw;top:50%;transform:translateY(-50%)}
header nav{margin-right:9.5em}
.cta{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:11px;letter-spacing:.3em;line-height:1;padding:.95em 1.5em .95em 1.8em;border:1px solid rgba(246,242,235,.45);color:rgba(246,242,235,.92);transition:border-color .6s,background .6s;white-space:nowrap}
.cta:hover{border-color:rgba(246,242,235,.9);background:rgba(246,242,235,.06)}
nav a.cur .e{color:var(--ink)}nav a.cur{border-bottom:1px solid rgba(246,242,235,.35)}
.hero{height:min(50vw,82vh)}
.inner header{background:linear-gradient(180deg,rgba(13,12,11,.55),rgba(13,12,11,0))}.inner header.solid{background:rgba(13,12,11,.92)}
.banner{aspect-ratio:3/1;overflow:hidden;background:var(--bg2)}
.banner img{width:100%;height:100%;object-fit:cover}
.p-head{max-width:760px;margin:0 auto;padding:13vh 6vw 4vh;text-align:center}
.p-head h1,.p-top h1{font-weight:400}
.p-head h1 .zh,.p-top h1 .zh{display:block;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:clamp(20px,1.9vw,28px);letter-spacing:.42em;text-indent:.42em}
.p-head h1 small,.p-top h1 small{display:block;font-size:11px;letter-spacing:.42em;color:var(--mute);margin-top:1.4em;font-family:var(--fs);text-transform:uppercase}
.p-head .lead{margin-top:7vh;color:rgba(233,228,220,.82);line-height:2.5}
.since{margin-top:3vh;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.42em}
.p-top{padding:13vh 7vw 12vh}
.home .works{padding-top:0}.more{text-align:center;margin-top:9vh}.more a{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:.6em;transition:border-color .6s}.more a:hover{border-color:var(--ink)}
.inner .works{padding-top:10vh}
.slim{max-width:1280px;margin:0 auto 16vh;padding:0 7vw}.slim img{aspect-ratio:21/9}
.awards{padding:12vh 6vw}
.map{font-size:10px;letter-spacing:.24em;margin-left:.9em;border-bottom:1px solid rgba(233,228,220,.3);padding-bottom:.15em;white-space:nowrap;transition:border-color .5s}.map:hover{border-color:var(--ink)}
.cinfo{max-width:620px;margin:6vh auto 18vh;padding:0 6vw}
.cinfo dl{display:grid;grid-template-columns:8em 1fr;row-gap:2.4em;border-top:1px solid var(--line);padding-top:6vh}
.cinfo dt{font-size:11px;color:var(--mute)}.cinfo dd{font-size:13px}
.cbtn{text-align:center;margin-top:9vh}
.btn{display:inline-block;border:1px solid rgba(233,228,220,.4);padding:1.2em 3.6em 1.2em 4em;font-size:12px;letter-spacing:.4em;transition:border-color .6s,background .6s}.btn:hover{border-color:var(--ink);background:rgba(233,228,220,.05)}
.pcta{text-align:center;padding:10vh 6vw 20vh}.pcta .lead{margin-bottom:6vh;color:rgba(233,228,220,.82)}
/* process hover */
.psec{padding:6vh 6vw 4vh}.proc{max-width:1080px}
.proc li{position:relative;grid-template-columns:5em 1fr 42%;gap:0 2vw;align-items:start;padding:4.6vh 0;cursor:default}
.proc li:last-child{border-bottom:1px solid var(--line)}
.proc h3{font-size:15px;transition:color .6s}
.proc .ex{max-height:0;opacity:0;overflow:hidden;transition:max-height .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.proc .ex p{font-size:12.5px;color:var(--mute);margin-top:.5em}.proc .ex .sub{color:var(--ink);margin-top:1.4em;font-size:13.5px}
.proc .ph{aspect-ratio:2.4/1;overflow:hidden;opacity:0;transform:translateX(12px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.proc .ph img{transform:scale(1.04);transition:transform 2.4s ease}
.proc .n{transition:color .6s}
@media(hover:hover) and (min-width:761px){
.proc li:hover .ex{max-height:12em;opacity:1}
.proc li:hover .ph{opacity:1;transform:none}.proc li:hover .ph img{transform:scale(1)}
.proc li:hover .n{color:var(--ink)}}
@media(hover:none),(max-width:760px){.proc .ex{max-height:none;opacity:1}}
@media(max-width:760px){
header{padding:16px 5vw}header .logo{grid-column:1;justify-self:start}header nav{display:none}
header .cta{right:5vw;font-size:10px;padding:.85em 1.1em .85em 1.4em}
.hero{height:125vw;max-height:82vh}
.banner{aspect-ratio:2/1}
.p-head{padding:9vh 7vw 2vh}.p-head .lead{font-size:13px;margin-top:5vh}
.p-top{padding:9vh 6vw 8vh}
.proc li{grid-template-columns:3.4em 1fr}.proc .ph{grid-column:1/-1;opacity:1;transform:none;margin-top:3vh;aspect-ratio:2/1}.proc .ph img{transform:none}
.cinfo dl{grid-template-columns:6.5em 1fr}.map{display:inline-block;margin:.4em 0 0}
.slim img{aspect-ratio:2/1}}
.mt{display:none}
@media(max-width:760px){
.mt{display:block;position:absolute;right:calc(5vw + 7.4em);top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(246,242,235,.92);font-size:10px;letter-spacing:.3em;cursor:pointer;padding:.8em .4em}
.mo header{background:rgba(13,12,11,.97)}
.mo header nav{display:flex;flex-direction:column;position:fixed;inset:64px 0 auto;background:rgba(13,12,11,.97);padding:4vh 0 6vh;margin:0;align-items:center;font-size:13px}
.mo header nav a{margin:1.1em 0}.mo nav a.sw .c{position:static;transform:none;opacity:.7;font-size:11px}.mo nav a.sw{height:auto;line-height:1.8;text-align:center;border:0}.mo nav a.sw .e{transform:none!important;opacity:1!important}}
@media(min-width:761px){.proc li{grid-template-columns:5em 1fr;min-height:150px}.proc .ph{position:absolute;right:0;top:50%;width:36%;aspect-ratio:3/1;transform:translate(12px,-50%)}
.proc li:hover .ph{transform:translate(0,-50%)!important}.proc .pt{max-width:52%}}
/* ===== v8 ===== */
.lg{position:relative;display:block;height:60px;aspect-ratio:600/364;transition:height .8s ease}
header.solid .lg{height:44px}
.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
header .logo img{height:100%!important;width:100%}
.l-ring{transform-origin:48.58% 36.4%;transition:transform 1.2s cubic-bezier(.45,0,.25,1)}
.l-text{transform-origin:50% 90%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.logo:hover .l-ring{transform:rotate(360deg)}.logo:hover .l-text{transform:scaleX(1.07)}
@media(max-width:760px){.lg{height:48px}header.solid .lg{height:36px}}
.awards ul{display:grid;grid-template-columns:1fr 1fr;gap:0 6vw;max-width:900px;margin:0 auto;align-items:start}
.awards li+li{margin-top:0}
.awl{display:block;height:120px;width:auto;margin:0 auto 4vh;object-fit:contain}
.awards small.zh{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;text-transform:none;letter-spacing:.3em;color:rgba(233,228,220,.8);font-size:12px;margin-top:.9em}
.aw-line small.zh{display:block}
@media(max-width:760px){.awards ul{grid-template-columns:1fr;gap:9vh}.awl{height:96px}}
.since{display:flex;flex-direction:column;align-items:center}.since small{font-size:11px;letter-spacing:.4em;margin-top:.4em;color:var(--mute)}
.about-pad{padding-bottom:16vh}
/* process: text only */
.proc li{min-height:0!important}.proc .pt{max-width:none!important}
/* floating icons */
.float a.fi{display:flex;align-items:center;justify-content:center;transition:background .6s ease,transform .6s ease,border-color .6s}
.float a.fi svg{width:19px;height:19px;fill:none;stroke:rgba(246,242,235,.92);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.float a.fi:hover{background:#f3eee6;border-color:#f3eee6;transform:scale(1.06)}.float a.fi:hover svg{stroke:#0d0c0b}
@media(max-width:760px){.float a.fi svg{width:16px;height:16px}}
/* zoom-out motion */
.banner img{animation:zo 6s cubic-bezier(.25,.1,.25,1) forwards;transform:scale(1.12)}
@keyframes zo{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero .s.on img{animation:zo 7.5s ease-out forwards}
.hero .s img{transform:scale(1.12)}
/* works 4:3 */
.card .frame{aspect-ratio:4/3}.card .frame img{object-position:50% 72%}
@media(prefers-reduced-motion:reduce){.banner img,.hero .s.on img{animation:none;transform:none}.l-ring,.l-text{transition:none}.logo:hover .l-ring,.logo:hover .l-text{transform:none}.float a.fi{transition:none}}
.aw-line{display:flex;justify-content:center;gap:4vw;flex-wrap:wrap}.aw-line p{text-align:center}
.aw-line small.zh{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:11px;letter-spacing:.3em;margin-top:.2em;color:var(--mute)}
@media(max-width:760px){.aw-line{flex-direction:column;gap:1.6vh}}
.awards ul{max-width:1120px}
/* ===== v9 ===== */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.eni{font-family:var(--fs);font-style:italic;font-weight:300;font-size:clamp(18px,2vw,24px);letter-spacing:.02em;color:var(--mute);line-height:1.6}
.pj-top{padding:24vh 8vw 12vh;max-width:1280px;margin:0 auto}
.pj-k{font-size:12px;letter-spacing:.4em;color:var(--mute);margin-bottom:3em}
.pj-top h1{font-weight:400}.pj-top h1 .zh{display:block;font-family:'Noto Sans TC',sans-serif;font-size:clamp(34px,5vw,64px);letter-spacing:.18em;line-height:1.3}
.pj-top h1 .en2{display:block;font-family:var(--fs);font-weight:300;font-size:clamp(18px,2vw,26px);letter-spacing:.08em;color:var(--mute);margin-top:.8em}
.pj-aw{margin-top:2.4em;font-size:12px;letter-spacing:.18em;color:#b9a88a;border-top:1px solid var(--line);display:inline-block;padding-top:1.2em}
.pj-in{margin-top:9vh;max-width:640px;margin-left:auto}.pj-in p{font-size:15px;line-height:2.3;letter-spacing:.08em}.pj-in .eni{margin-top:1.6em;font-size:19px}
.pg{padding:0 4vw;display:flex;flex-direction:column;gap:10px;max-width:1680px;margin:0 auto}
.pf img,.pr img{display:block;width:100%;height:auto}
.pr{display:flex;gap:10px;align-items:flex-start}.pr figure{flex-basis:0;margin:0;min-width:0}.pr img{cursor:zoom-in}
.pr.solo{justify-content:center}.pr.solo figure{max-width:55%}
.pt9{padding:16vh 4vw;max-width:1200px;margin:0 auto;width:100%}.pt9 .eni{text-align:center;font-size:clamp(20px,2.4vw,30px)}
.pt9.two{display:grid;grid-template-columns:1fr 2fr;gap:6vw}.pt9 .lab{font-size:12px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase}.pt9 .lab small{display:block;font-family:'Noto Sans TC',sans-serif;letter-spacing:.3em;margin-top:1em;text-transform:none}
.pt9 .body{font-size:15px;line-height:2.3;letter-spacing:.08em}
.pj-qa{padding:6vh 0 4vh;border-top:1px solid var(--line);margin:12vh 4vw 0}.qa+.qa{margin-top:4.5em}.qa .q{font-family:'Noto Sans TC',sans-serif;font-size:17px;letter-spacing:.12em;margin-bottom:1.2em}.qa .a{color:var(--mute);line-height:2.3;font-size:14.5px;letter-spacing:.06em}
.next{display:flex;justify-content:space-between;align-items:flex-end;padding:14vh 8vw;border-top:1px solid var(--line);margin-top:12vh}.next a{font-size:13px;letter-spacing:.2em}.next a small{display:block;text-align:right;color:var(--mute);margin-top:.6em;font-family:'Noto Sans TC',sans-serif}
.lb9{position:fixed;inset:0;background:#000;z-index:100;display:none;align-items:center;justify-content:center}.lb9.on{display:flex}
.lb9 img{max-width:90vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb9 button{position:absolute;background:none;border:0;color:#eee;cursor:pointer}.lb9 .x{top:18px;right:22px;font-size:34px;font-weight:200;line-height:1}
.lb9 .pv,.lb9 .nx{top:0;bottom:0;width:12vw}.lb9 .pv{left:0}.lb9 .nx{right:0}
.lb9 .pv::after,.lb9 .nx::after{content:'';position:absolute;top:50%;width:18px;height:18px;border-left:1px solid #ccc;border-bottom:1px solid #ccc}.lb9 .pv::after{left:40%;transform:rotate(45deg)}.lb9 .nx::after{right:40%;transform:rotate(-135deg)}
.lb9 .ctr{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.3em;color:#999}
.float{display:none!important}
.bookfab{position:fixed;right:26px;bottom:26px;z-index:30;width:64px;height:64px;border-radius:50%;border:1px solid rgba(233,228,220,.45);background:rgba(13,12,11,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-family:'Noto Sans TC',sans-serif;font-size:13px;letter-spacing:.2em;padding-left:.2em;color:var(--ink);opacity:0;visibility:hidden;transition:opacity 1s,visibility 0s 1s,background .5s}
.bookfab.show{opacity:1;visibility:visible;transition:opacity 1s,background .5s}.bookfab:hover{background:rgba(233,228,220,.1)}
.ph9{display:grid;grid-template-columns:1fr 1.3fr;gap:8vw;padding:24vh 10vw 18vh;max-width:1400px;margin:0 auto}
.ph9 h2{font-family:'Noto Sans TC',sans-serif;font-weight:400;font-size:clamp(24px,2.8vw,38px);letter-spacing:.2em;line-height:1.6}.ph9 .l .en{margin-top:1.4em;color:var(--mute);font-size:16px;letter-spacing:.15em;font-style:italic}
.ph9 .r p{font-size:15px;line-height:2.5;letter-spacing:.1em}.ph9 .r .eni{margin-top:2em}
.aw9{display:flex;justify-content:center;gap:10vw;padding:9vh 8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 6vw;text-align:center}
.awn{font-size:12px;letter-spacing:.3em;color:#b9a88a;text-transform:uppercase}.awy{font-size:13px;letter-spacing:.2em;margin:.8em 0 1em}.awp a{display:block;font-size:12.5px;color:var(--mute);letter-spacing:.1em;line-height:2.2}
.awl{display:block;height:40px;width:auto;margin-bottom:1.4em;opacity:.85}
.works .more{text-align:center;margin-top:10vh}.works .more a{font-size:13px;letter-spacing:.3em;border-bottom:1px solid var(--line);padding-bottom:.6em}
.awd{display:none}
.f9{display:flex!important;justify-content:space-between;align-items:center;gap:2em;padding:8vh 6vw 10vh;font-size:11.5px;letter-spacing:.1em;color:var(--mute);border-top:1px solid var(--line);text-align:left}
.f9 p{line-height:2}.f9 .fr a{margin-left:2em}.f9 .fr a:first-child{margin-left:0}
.pv{max-width:760px;margin:0 auto;padding:0 6vw 16vh}.pv h2{font-family:'Noto Sans TC',sans-serif;font-weight:400;font-size:18px;letter-spacing:.15em;margin:3.5em 0 1.2em}.pv p,.pv li{font-size:14.5px;line-height:2.3;letter-spacing:.06em;color:#cfc8bd}.pv ul{padding-left:1.2em;list-style:'—  '}.pv a{border-bottom:1px solid var(--line)}
.bk{max-width:760px;margin:0 auto;padding:0 6vw 12vh}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:7vh}.tabs button{background:none;border:0;color:var(--mute);padding:1.4em .5em;cursor:pointer;text-align:center;border-bottom:1px solid transparent;margin-bottom:-1px;font:inherit}
.tabs button span{display:block;font-family:'Noto Sans TC',sans-serif;font-size:17px;letter-spacing:.2em}.tabs button small{display:block;font-size:11.5px;margin-top:.7em;letter-spacing:.06em}.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.fq{margin-bottom:3.2em}.fq>label{display:block;font-size:14px;letter-spacing:.14em;margin-bottom:1.1em}.fq>label i{color:#b9a88a;font-style:normal;margin-left:.3em}.fq>label small{color:var(--mute);font-size:12px}
.bf input[type=text],.bf input:not([type]),.bf input[type=tel],.bf input[type=number],.bf textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(233,228,220,.28);color:var(--ink);font:inherit;font-size:16px;padding:.5em 0;border-radius:0;outline:none}
.bf textarea{border:1px solid rgba(233,228,220,.28);padding:.8em}.bf input:focus,.bf textarea:focus{border-color:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:.8em 1.6em;align-items:center}.ck{display:inline-flex;align-items:center;gap:.6em;font-size:14px;cursor:pointer;letter-spacing:.06em}
.ck input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1px solid rgba(233,228,220,.5);border-radius:50%;margin:0;display:grid;place-content:center}.ck input[type=checkbox]{border-radius:0}
.ck input:checked::before{content:'';width:7px;height:7px;background:var(--ink);border-radius:inherit}
.bf .oth{width:12em!important;font-size:14px!important}.bf .num{width:7em!important}.unit{font-size:14px;margin-right:1.2em}
.fq.bad>label{color:#d8a28f}.err{color:#d8a28f;font-size:13px;margin-bottom:2em}
.fee{font-size:13px;line-height:2.1;color:var(--mute);border-top:1px solid var(--line);padding-top:2em;margin:4em 0 3em;letter-spacing:.06em}
.sub{text-align:center}.btn{display:inline-block;border:1px solid rgba(233,228,220,.5);background:none;color:var(--ink);padding:1.1em 3.4em;font:inherit;font-size:14px;letter-spacing:.3em;cursor:pointer;transition:background .5s}.btn:hover{background:rgba(233,228,220,.08)}
.pvn{text-align:center;font-size:12px;color:var(--mute);margin-top:2em}.pvn a{border-bottom:1px solid var(--line)}
.thx{text-align:center;padding:8vh 0}.thx p{font-family:'Noto Sans TC',sans-serif;font-size:17px;letter-spacing:.12em;line-height:2;margin-bottom:3em}
.dn{font-size:14.5px;line-height:2.4;letter-spacing:.08em;text-align:center;margin-bottom:4em}
.cinfo{max-width:760px;margin:0 auto;padding:6vh 6vw 14vh;border-top:1px solid var(--line)}
@media(max-width:760px){.pj-top{padding:18vh 7vw 8vh}.pj-in{margin-top:6vh}.pg{padding:0;gap:8px}.pr{flex-direction:column;gap:8px}.pr figure{width:100%;flex:none!important}.pr.solo figure{max-width:100%}
.pt9{padding:11vh 7vw}.pt9.two{grid-template-columns:1fr;gap:1.6em}.pj-qa{margin:8vh 7vw 0}.next{padding:10vh 7vw;flex-direction:column;align-items:flex-start;gap:2.4em}.next a small{text-align:left}
.ph9{grid-template-columns:1fr;gap:5vh;padding:16vh 8vw 12vh}.aw9{flex-direction:column;gap:6vh;margin:0 7vw;padding:8vh 0}
.f9{flex-direction:column;align-items:center;text-align:center;gap:1.4em}.f9 .fl .bar{display:none}.bookfab{width:56px;height:56px;right:18px;bottom:18px;font-size:12px}
.lb9 .pv,.lb9 .nx{width:18vw}.lb9 img{max-width:100vw}.tabs button small{font-size:10.5px}}
@media(min-width:761px){.f9 .m-only{display:none}}
@media(max-width:760px){.m-hide{display:none}}
/* ===== v10 ===== */
body{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:300;letter-spacing:.12em}
.p-head h1 .zh,.p-top h1 .zh,.pj-top h1 .zh,.ph9 h2,.qa .q,.tabs button span,.thx p,.pv h2,.proc h3,.bel h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:500}
.pj-top h1 .zh{font-weight:500;letter-spacing:.14em}
.pj-in p,.pt9 .body,.qa .a,.ph9 .r p,.p-head .lead,.dn,.pv p,.pv li{font-weight:300;letter-spacing:.1em}
.en,.eni,.ct h3 .en{font-family:var(--fs)}
/* header / nav cta */
header nav{margin-right:12.5em}
header .cta{font-size:11px;letter-spacing:.3em;line-height:1;padding:.75em 1.2em .75em 1.5em}
header .hb{display:none}
.mm{display:none}
@media(max-width:760px){
header{grid-template-columns:1fr auto 1fr}header .logo{grid-column:2!important;justify-self:center!important}
header .cta,.mt{display:none!important}
header .hb{display:flex;flex-direction:column;justify-content:center;gap:7px;position:absolute;right:5vw;top:50%;transform:translateY(-50%);width:34px;height:34px;background:none;border:0;cursor:pointer;z-index:62;padding:0 4px}
header .hb i{display:block;height:1px;background:rgba(246,242,235,.92);transition:transform .5s ease}
.mo header .hb i:first-child{transform:translateY(4px) rotate(45deg)}.mo header .hb i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mm{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;inset:0;z-index:9;background:#000;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.mo .mm{opacity:1;visibility:visible;transition:opacity .6s ease}
.mm nav{display:flex;flex-direction:column;align-items:center;gap:5.2vh}
.mm nav a{text-align:center;opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.mo .mm nav a{opacity:1;transform:none}.mo .mm nav a:nth-child(2){transition-delay:.08s}.mo .mm nav a:nth-child(3){transition-delay:.16s}.mo .mm nav a:nth-child(4){transition-delay:.24s}
.mm nav .en{display:block;font-size:22px;letter-spacing:.3em;text-indent:.3em}.mm nav small{display:block;font-size:12px;letter-spacing:.4em;color:var(--mute);margin-top:.5em}
.mm .mms{position:absolute;bottom:7vh;left:0;right:0;display:flex;justify-content:center;gap:3em;font-size:13px;letter-spacing:.3em}
.mo header,.mo header.solid{background:transparent!important;backdrop-filter:none}
.mo .fabs{opacity:0;pointer-events:none}
}
/* floating stack */
.fabs{position:fixed;right:26px;bottom:26px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .5s}
.fabs .bookfab{position:static}
.fab,.totop{width:44px;height:44px;border-radius:50%;border:1px solid rgba(233,228,220,.45);background:rgba(13,12,11,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .5s,opacity .8s,visibility 0s}
.fab svg,.totop svg{width:18px;height:18px;fill:none;stroke:rgba(246,242,235,.92);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.fab:hover,.totop:hover{background:rgba(233,228,220,.12)}
.totop{opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}.totop.show{opacity:1;visibility:visible;transition:opacity .8s}
@media(max-width:760px){.fabs{right:16px;bottom:16px;gap:8px}.fab,.totop{width:40px;height:40px}.fab svg,.totop svg{width:16px;height:16px}.fabs .bookfab{width:52px;height:52px;font-size:12px}}
/* lightbox */
.lb9 .x{z-index:5;width:56px;height:56px;top:10px;right:10px;display:flex;align-items:center;justify-content:center}
.lb9 .pv,.lb9 .nx{top:76px;bottom:60px;z-index:2}.lb9 img{position:relative;z-index:1}
/* round checkboxes */
.ck input[type=checkbox]{border-radius:50%}
.bamt{margin-top:1.6em}.bamt label{display:block;font-size:13px;letter-spacing:.12em;margin-bottom:.6em}.bamt label i{color:#b9a88a;font-style:normal;margin-left:.3em}
/* awards logos */
.awards .awl{height:100px;width:auto;margin:0 auto 4vh;opacity:.92}
@media(max-width:760px){.awards .awl{height:90px}}
/* project page photos (knrn-like) */
.pg{max-width:1600px;padding:0 2vw;gap:8px}.pr{gap:8px}
/* works grid */
.wgrid.sel{grid-template-columns:repeat(2,1fr);max-width:1400px;gap:8vh 3vw}
.ct .zh{font-weight:400}
@media(max-width:760px){.wgrid.sel{grid-template-columns:1fr}
.card .frame{aspect-ratio:4/5}.card .frame img{object-position:50% 50%}
.ct{padding-top:2vh;text-align:center}.ct h3{display:block}.ct h3 .no{display:none}.ct h3 .en{font-size:16px;letter-spacing:.24em}.ct .zh{margin-top:.5em;font-size:12px;letter-spacing:.42em}.wgrid{gap:7vh}}
/* next project */
.nxt{margin-top:12vh;border-top:1px solid var(--line)}
.nxb{position:relative;display:block;overflow:hidden;height:min(56vh,46vw);background:#000}
.nxb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.6s cubic-bezier(.2,.7,.2,1);opacity:.8}
.nxb:hover img{transform:scale(1.05)}
.nxb .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(0,0,0,.38);color:#f3eee6}
.nxb .k{font-size:12px;letter-spacing:.5em;margin-bottom:2.2em}.nxb .zh{font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:.3em;text-indent:.3em}.nxb .e2{font-size:15px;letter-spacing:.24em;margin-top:1em;opacity:.85}
.nxl{display:flex;justify-content:space-between;align-items:center;padding:6vh 6vw 9vh;font-size:12px;letter-spacing:.24em}
.nxl small{display:block;color:var(--mute);margin-top:.4em}
@media(max-width:760px){.nxb{height:62vw}.nxl{padding:5vh 7vw 7vh}}
/* about beliefs */
.bel{max-width:1100px;margin:0 auto;padding:12vh 7vw 6vh}
.bl{display:grid;grid-template-columns:4em 1fr 1.3fr;gap:3vw;padding:7vh 0;border-top:1px solid var(--line);align-items:start}
.bl:last-child{border-bottom:1px solid var(--line)}
.bn{font-size:18px;color:var(--mute)}.bl h2{font-size:clamp(19px,1.7vw,23px);letter-spacing:.24em;line-height:1.6}
.bl .eni{font-size:17px;margin-top:.6em}.bb{font-size:14.5px;line-height:2.4;letter-spacing:.1em;color:#d6cfc4}
@media(max-width:760px){.bl{grid-template-columns:2.6em 1fr;gap:1.4em 4vw;padding:6vh 0}.bb{grid-column:2}.bel{padding:8vh 7vw 4vh}}
/* process quotes: desktop left aligned */
@media(min-width:761px){.proc .ex,.proc .ex p,.proc .ex .sub{text-align:left}}
@media(max-width:1000px){.mo header nav{display:none!important}}
/* knrn typography */
h1,h2,h3,.intro h2,.ttl,.bel h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC",sans-serif!important;font-weight:700!important;letter-spacing:.02em!important;text-indent:0!important}
.en,.lab,.label,.k,.no,.n,.bn,.awn,.mms,.fm{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.28em;font-weight:400;font-style:normal}
.lab,.label{font-size:10.5px!important}
.eni{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;font-style:italic!important;font-weight:300;letter-spacing:.01em!important;text-transform:none;line-height:1.9}
p,.intro p,.bel p{font-weight:300;line-height:2}
/* v10b: knrn system */
body{letter-spacing:.04em}
.bb,.intro p,.bel p,section p:not(.en):not(.eni):not(.lab):not(.label){letter-spacing:.04em!important}
.bel{max-width:1200px;margin:0 auto;padding:14vh 6vw 8vh}
.bel .eyb{font-size:11px;letter-spacing:.32em;color:var(--mute);margin-bottom:2.2vh;text-align:left}
.bel .belt{font-size:clamp(26px,2.6vw,38px);text-align:left;margin-bottom:8vh;line-height:1.4}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:7vh 7vw}
.bel .bl{display:block;padding:0;border:0}
.bel .bh{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4em 1.1em;margin-bottom:1.4em;text-align:left}
.bel .bh h3{font-size:19px;font-weight:500!important;line-height:1.5;margin:0}
.bel .ben{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.bel .bb{font-size:14px;font-weight:300;line-height:2.05;color:var(--mute);text-align:left;margin:0;max-width:30em}
@media(max-width:760px){.bgrid{grid-template-columns:1fr;gap:6vh}.bel{padding:10vh 7vw 4vh}.bel .belt{margin-bottom:6vh}}
.awl,.awards .awl,.aw9 .awl{height:130px!important;width:auto!important;opacity:.95}
@media(max-width:760px){.awl,.awards .awl,.aw9 .awl{height:100px!important}}
.awards ul,.aw9{font-family:"Inter","Helvetica Neue",Arial,"Noto Sans TC",sans-serif!important;letter-spacing:.08em;font-weight:400}
.awards small.zh,.aw9 .awc,.aw9 .awp,.awards small{font-family:"Noto Sans TC","PingFang TC",sans-serif!important;letter-spacing:.04em!important;text-transform:none!important;font-weight:300}
.aw9 .awn,.aw9 .awy{letter-spacing:.24em}
@media(min-width:761px){.proc .ex .sub,.proc .ex p.sub{text-align:left!important;margin-left:0!important}.proc li{padding-left:1.2em!important}}
.proc .n{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;font-size:14px;letter-spacing:.12em;overflow:visible;padding-left:2px}
.fabs{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:50}
.fabs a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(233,228,220,.4);background:transparent}
.fabs svg{width:16px!important;height:16px!important;max-width:16px}
.fabs .bookfab{width:58px;height:58px}
.ck input[type=checkbox],.ck input[type=radio]{-webkit-appearance:none!important;appearance:none!important;border-radius:50%!important;width:15px;height:15px;border:1px solid currentColor;opacity:.7;display:inline-grid;place-content:center;flex:none}
.ck input[type=checkbox]::before,.ck input[type=radio]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .2s}
.ck input:checked::before{transform:scale(1)}.ck input:checked{opacity:1}
@media(min-width:761px){
header{align-items:center}
header .logo{align-self:center;display:flex;align-items:center}
header nav{align-self:center;align-items:center;margin-right:calc(var(--ctaw,96px) + 3em)!important;line-height:1}
header nav a{line-height:2.2em}
header .cta{font-family:"Noto Sans TC","PingFang TC",sans-serif!important;font-size:11px!important;letter-spacing:.2em!important;line-height:1!important;padding:.6em 1em .6em 1.2em!important;border:1px solid rgba(233,228,220,.45);top:50%!important;transform:translateY(-50%)!important;white-space:nowrap}
}
@media(min-width:761px){.wgrid.sel{grid-template-columns:repeat(3,1fr)!important;gap:0 2.4vw}}@media(max-width:760px){.wgrid.sel{grid-template-columns:1fr!important}}
.lb9 .x{position:absolute;top:12px;right:12px;width:48px!important;height:48px!important;z-index:30!important;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;background:none;border:0;color:#e9e4dc;cursor:pointer}
.lb9 .pv,.lb9 .nx{top:76px!important;bottom:60px!important;height:auto!important;width:14%!important;z-index:5}
.lb9 img{pointer-events:none}
/* knrn font system (from knrndesign.co CSS: --font-sans system/PingFang/Noto; --font-display-en Cormorant) */
:root{--fs:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;--fd:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
body,p,li,input,textarea,button,h1,h2,h3,.en,.lab,.label,.k,.no,.n,.bn,.awn,.mms,.fm,.eni,.ben,.awards ul,.aw9,.proc .n,header .cta,.awards small{font-family:var(--fs)!important}
.eni{font-style:italic!important;font-weight:400!important;letter-spacing:.01em!important}
.en2,.work .t .en,.wgrid .en.nm,.nxt .en2,.pj-top h1 .en2{font-family:var(--fd)!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:400}
/* project header */
.pj-top{max-width:1200px;margin:0 auto;padding:150px 6vw 8vh;text-align:left}
.pj-top .bc{font-size:14px;letter-spacing:.06em;color:var(--mute);margin-bottom:6vh;display:flex;gap:.9em}
.pj-top .bc i{font-style:normal;opacity:.5}.pj-top .bc span{color:var(--ink)}.pj-top .bc a:hover{color:var(--ink)}
.pj-top .pj-k{display:flex;align-items:center;gap:1.2em;font-size:12px;letter-spacing:.4em;color:var(--mute);margin:0 0 3.5vh;text-transform:uppercase}
.pj-top .pj-k b{display:block;width:80px;height:1px;background:var(--line);margin-left:.6em}
.pj-top h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .45em;text-align:left;margin:0 0 3vh}
.pj-top h1 .zh{font-size:clamp(40px,5.4vw,76px)!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.08}
.pj-top h1 .en2{display:inline!important;font-size:clamp(22px,2.6vw,36px)!important;color:var(--mute);margin:0!important}
.pj-top .pj-aw{text-align:left;letter-spacing:.06em;font-size:13px;margin:0 0 5vh}
.pj-top .pj-in{max-width:52em;margin:0;text-align:left}
.pj-top .pj-in p{font-size:16px;line-height:2;font-weight:400;letter-spacing:.02em!important;text-align:left}
.pj-top .pj-in .eni{font-size:15px;color:var(--mute);margin-top:2.2vh;line-height:1.9}
/* photo column */
@media(min-width:761px){.pg{width:64vw!important;max-width:1100px!important;margin:0 auto!important;padding:0!important}}
@media(max-width:760px){.pg{padding:0 4vw!important}.pj-top{padding:110px 6vw 6vh}}
header.pbar{display:flex!important;justify-content:space-between;align-items:center;padding:26px 4vw!important;background:rgba(13,12,11,.92)}
header.pbar.solid{padding:18px 4vw!important}
.pbar .wm{display:flex;align-items:baseline;gap:.9em}
.pbar .wz{font-family:var(--fs)!important;font-weight:500;font-size:16px;letter-spacing:.06em;color:var(--ink)}
.pbar .we{font-family:var(--fd)!important;font-variant:small-caps;text-transform:lowercase;font-size:17px;letter-spacing:.22em;color:var(--mute)}
.pbar .bk2{font-family:var(--fs)!important;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);opacity:.8}.pbar .bk2:hover{opacity:1}
.lb9 .pv,.lb9 .nx{top:50%!important;bottom:auto!important;width:56px!important;height:56px!important;transform:translateY(-50%);z-index:10}
.lb9 .pv{left:12px!important}.lb9 .nx{right:12px!important}
.lb9 img{pointer-events:auto!important}
/* wordmark header */
header .logo{display:flex!important;align-items:baseline;gap:.8em;width:auto!important;height:auto!important;color:#f3eee6;white-space:nowrap}
header .logo .wz{font-family:var(--fs)!important;font-weight:500;font-size:14px;letter-spacing:.12em}
header .logo .we{font-family:var(--fd)!important;text-transform:uppercase;font-size:13.5px;letter-spacing:.26em;font-weight:400}
@media(min-width:761px){header .logo{grid-column:1!important;justify-self:start!important}}
@media(max-width:760px){header .logo{grid-column:2!important;justify-self:center!important}header .logo .wz{font-size:13px}header .logo .we{font-size:12px;letter-spacing:.2em}}
.hero .cap{display:none!important}
/* v11b reviewer fixes */
.fab,.totop,.fabs .bookfab{width:44px!important;height:44px!important;border:1px solid rgba(233,228,220,.45)!important;box-sizing:border-box}
.fabs .bookfab{opacity:1!important;visibility:visible!important;position:static!important;font-size:11px!important;letter-spacing:.08em!important;padding-left:.08em!important;font-weight:400}
@media(max-width:760px){.fab,.totop,.fabs .bookfab{width:40px!important;height:40px!important}.fabs .bookfab{font-size:10.5px!important}}
header .logo .wz,header .logo .we{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4);background:none!important}
header .logo .wz{font-weight:600!important}
header .logo .we{font-weight:500!important}
/* v11c director */
@media(min-width:761px){.pj-top{width:64vw!important;max-width:1100px!important;padding-left:0!important;padding-right:0!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}}
.hero{height:100vh!important;height:100svh!important;min-height:0!important}
.hero img,.hero video{width:100%;height:100%!important;object-fit:cover!important}
.hero .cap{display:none!important}
/* v11c pbar wordmark */
header.pbar .wz,header.pbar .we{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4)}
header.pbar .wz{font-weight:600!important}header.pbar .we{font-weight:500!important}
header.pbar{background:#0d0c0b!important;border-bottom:1px solid rgba(233,228,220,.08);backdrop-filter:none!important}

/* v12 */
header .logo .wz,header.pbar .wz{font-family:"Noto Sans TC",var(--fs)!important;font-weight:300!important;letter-spacing:.42em!important;font-size:13px!important}
header .logo .we,header.pbar .we{font-family:var(--fd)!important;font-weight:300!important;letter-spacing:.42em!important;font-size:12.5px!important}
header .logo .wz,header .logo .we{text-shadow:0 1px 8px rgba(0,0,0,.45)!important}
header.pbar .wz,header.pbar .we{text-shadow:none!important}
@media(max-width:760px){header .logo .wz,header.pbar .wz{letter-spacing:.3em!important;font-size:12px!important}header .logo .we,header.pbar .we{letter-spacing:.3em!important;font-size:11px!important}}
.hero .cap{display:block!important;opacity:1!important;inset:auto!important;left:0!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero .cap h1{font-family:var(--fd)!important;font-weight:300!important}
.pj-top h1 .zh{font-family:"Noto Serif TC",serif!important;font-weight:300!important;font-size:46px!important;letter-spacing:.08em!important}
@media(max-width:760px){.pj-top h1 .zh{font-size:32px!important}}
.pt9 .eni{font-family:var(--fd)!important;font-weight:300!important;font-style:italic!important;font-size:20px!important;letter-spacing:.02em!important}
@media(max-width:760px){.pt9 .eni{font-size:17px!important}}
.pj-qa .lab{font-size:13px!important}.pj-qa .lab small{font-size:12px!important}
.pj-qa{margin-top:24px!important;padding-top:24px!important}.pj-qa .pt9{padding-top:40px!important}
.fab svg.ln{stroke-width:1.1}

.agr{margin:2.2em 0 1.4em}.agr .ck{display:flex;gap:.8em;align-items:flex-start;line-height:1.9;font-weight:300;font-size:13px;opacity:.85}
.agr .ck input{margin-top:.45em}.agr a{text-decoration:underline;text-underline-offset:3px}
.agerr{font-size:12px;font-weight:300;color:#c9a28f;margin:.6em 0 0 2.1em;letter-spacing:.04em}
.agr.bad .ck input{border-color:#c9a28f;opacity:1}
.pv{font-weight:300}.pv h2{font-weight:400}
.pj-in .eni,.pj-top .eni{font-family:var(--fd)!important;font-weight:300!important;font-style:italic!important;font-size:20px!important;letter-spacing:.02em!important}@media(max-width:760px){.pj-in .eni,.pj-top .eni{font-size:17px!important}}
/* ===== v13 ===== */
.hero .cap{top:65%!important}
.pj-top h1 .zh{font-family:"Noto Serif TC",serif!important;font-weight:700!important;letter-spacing:.06em!important}
.we,.hero .cap h1,.pj-top h1 .en2,.eni,.pt9 .eni,.pj-in .eni{font-style:normal!important}
.we,.hero .cap h1,.pj-top h1 .en2{font-family:var(--fs)!important;font-weight:300!important;text-transform:uppercase!important;letter-spacing:.32em!important}
.hero .cap h1{letter-spacing:.2em!important}
.pj-top h1 .en2{font-size:13px!important}
.pt9 .eni,.pj-in .eni{font-family:var(--fs)!important;font-weight:300!important;font-size:15px!important;line-height:1.9!important;letter-spacing:.01em!important;text-transform:none!important}
.fab{color:rgba(246,242,235,.92)}
.fab svg.ln text{fill:currentColor!important;stroke:none!important;font-weight:400}
/* form pills */
form .ck:not(.agr .ck){position:relative;cursor:pointer}
form .ck:not(.agr .ck) input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important}
form .ck:not(.agr .ck) span{display:inline-block;padding:.5em 1.15em;border:1px solid rgba(246,242,235,.28);border-radius:999px;transition:background .35s ease,color .35s ease,border-color .35s ease}
form .ck:not(.agr .ck):hover span{border-color:rgba(246,242,235,.65)}
form .ck:not(.agr .ck) input:checked+span{background:#f0ebe2;color:#0d0c0b;border-color:#f0ebe2}
form .ck:not(.agr .ck) input:focus-visible+span{outline:1px solid #f0ebe2;outline-offset:3px}
.agr .ck input{appearance:none;-webkit-appearance:none;width:16px!important;height:16px!important;border:1px solid rgba(246,242,235,.6)!important;border-radius:1px!important;position:relative;background:transparent!important;cursor:pointer;flex:none}
.agr .ck input::before{content:""!important;position:absolute!important;left:5px!important;top:1px!important;width:4px!important;height:9px!important;border:solid #f0ebe2!important;border-width:0 1px 1px 0!important;border-radius:0!important;background:none!important;transform:rotate(45deg) scale(0)!important;transform-origin:center;transition:transform .3s ease!important;opacity:1!important}
.agr .ck input:checked::before{transform:rotate(45deg) scale(1)!important}
/* wordmark hover */
@media (hover:hover) and (min-width:1001px){
header .logo,.pbar .wm{position:relative;cursor:pointer}
header .logo::after,.pbar .wm::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
header .logo:hover::after,.pbar .wm:hover::after{transform:scaleX(1)}
}
/* ===== v13b ===== */
.hero .cap{top:80%!important}
.pt9 .eni{color:var(--ink)!important;font-size:17px!important;font-weight:300!important;font-style:normal!important}
/* v13c */
.hero .cap{top:93%!important}
/* v13d */
.pj-in .eni{color:#e9e4dc!important}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 72%,rgba(0,0,0,.12) 84%,rgba(0,0,0,.35) 100%),linear-gradient(180deg,rgba(13,12,11,.42),rgba(13,12,11,0) 18%,rgba(13,12,11,0) 70%,rgba(13,12,11,.55) 86%,rgba(13,12,11,.78) 100%)!important}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
input[type=number]{-moz-appearance:textfield!important;appearance:textfield!important}
/* v13e */
.pj-in .eni{font-size:16px!important;font-weight:400!important;color:#e9e4dc!important}
.pj-top h1 .en2{color:#bdb6ab!important}

/* v14 */.ph9 .l .en{font-style:normal!important;font-family:var(--fs)!important;font-weight:300!important;text-transform:uppercase;letter-spacing:.32em}