@font-face{font-family:MedievalSharp;src:url('Fonts/MedievalSharp.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PoZhen;src:url('Fonts/迫真打字油印体.subset.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--site-font:MedievalSharp,PoZhen,serif;--paper:#f0ebe3;--ink:#130e09;--mint:#3ddfc1;--line:#130e0933}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--site-font)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:var(--mint);color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid #117c69;outline-offset:6px}.header{height:96px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;background:#f0ebe3ed;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-size:30px;letter-spacing:-5px;line-height:1}nav{display:flex;gap:34px;align-items:center;font-size:15px}nav a{position:relative}nav a:after{content:'';position:absolute;height:1px;background:var(--ink);bottom:-5px;left:0;width:0;transition:width .25s}nav a:hover:after{width:100%}sup{font:10px var(--site-font);vertical-align:super}.language{border:1px solid var(--line);border-radius:50%;width:48px;height:36px;background:none;cursor:pointer;font:11px var(--site-font)}.language:hover{background:var(--mint)}main{padding:0 4.5%}.intro{min-height:calc(100svh - 96px);display:flex;flex-direction:column;padding-top:38px}.section-label,.intro-rule,footer,.detail-meta{font:10px/1.6 var(--site-font);letter-spacing:1.5px}.intro h1{font-size:clamp(58px,8.65vw,150px);font-weight:400;letter-spacing:-.065em;line-height:1.12;margin:65px 0 48px}.title-line{display:block}em{font-weight:400}.intro-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:start;margin-bottom:65px;gap:50px}.intro-copy{max-width:440px;justify-self:end}.intro-copy p{font-size:17px;line-height:1.95;margin:0 0 25px}.text-link{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0;font:11px var(--site-font);letter-spacing:1px}.text-link span:last-child{font-size:22px}.intro-rule{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:17px 0;margin-top:auto;color:#716b64;font-size:9px}.projects{border-top:1px solid var(--line);padding:95px 0 110px;display:grid;grid-template-columns:36% 64%;align-items:start}.project-sidebar{position:sticky;top:130px;padding-right:50px}.section-label{font-size:11px}h2{font-size:clamp(44px,5.7vw,90px);font-weight:400;letter-spacing:-.045em;line-height:1.06;margin:30px 0 44px}.project-sidebar h2 sup{margin-left:12px;letter-spacing:0}#project-list{margin-top:50px}.project-item{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:20px 0;transition:padding .3s}.project-item span{font:10px var(--site-font);color:#797168}.project-item b{font-size:21px;font-weight:400}.project-item i{font-style:normal;margin-left:auto;opacity:0}.project-item:hover,.project-item.active{padding-left:10px}.project-item.active i,.project-item:hover i{opacity:1}.project-item.active span{color:#14836e}.sidebar-note{font-size:12px;line-height:1.9;margin-top:35px;white-space:pre-line;color:#766f65}.project-card{display:block;margin-bottom:55px}.project-card:last-child{margin-bottom:0}.art{height:480px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center}.contact{border-top:1px solid var(--line);padding:65px 0 75px}.contact h2{font-size:clamp(70px,11vw,170px);margin:45px 0}.contact-bottom{display:flex;justify-content:space-between;align-items:center}.contact-bottom p{font-size:14px}footer{margin:0 4.5%;border-top:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;font-size:9px;color:#746c63}.detail{padding-top:65px;padding-bottom:80px;display:grid;grid-template-columns:36% 64%;gap:0;min-height:80vh}.detail-info{padding-right:65px;position:sticky;top:130px;align-self:start}.back{font:11px var(--site-font)}.detail h1{font-size:64px;font-weight:400;letter-spacing:-3px;margin:50px 0 25px}.detail-description{font-size:16px;line-height:1.9}.detail-meta{margin:35px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:25px}.detail-meta dt{color:#82786c;margin-bottom:10px}.detail-meta dd{margin:0;font-size:12px;letter-spacing:0}.detail-visuals .art{height:640px}.next-project{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;font-size:26px}
.project-item.active{border-bottom-color:#14836e}.project-item.active b{color:#14836e}


.detail-info h1[tabindex="-1"]:focus{outline:none}
.detail-meta dd{overflow:hidden}
.detail-info>.text-link{display:table;width:fit-content}
.detail-info>.text-link span{font-size:inherit}
.project-website .website-char{display:inline-block}
.project-website:hover .website-char,.project-website:focus-visible .website-char{animation:website-char-hop .5s cubic-bezier(.33,0,.67,1) both;animation-delay:calc(var(--char-index)*55ms)}
@keyframes website-char-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}}
[hidden]{display:none!important}.detail-mode #intro,.detail-mode #contact{display:none}.detail-mode .projects{border-top:0;padding-top:65px}.inline-detail-info h1{font-size:64px;font-weight:400;letter-spacing:-3px;margin:50px 0 25px}.detail-mode #project-gallery>a{cursor:default}.inline-detail-info{animation:info-in .45s ease both}.contact{min-height:calc(100svh - 96px)}
@keyframes info-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(min-width:1600px){main,.header,footer{max-width:1700px;margin-left:auto;margin-right:auto}.art{height:600px}}
@media(max-width:800px){.header{height:76px;padding:0 6%}nav{gap:19px;font-size:13px}nav sup{display:none}.logo{font-size:35px}.language{width:39px;height:32px}main{padding:0 6%}.intro{min-height:calc(90svh - 76px);padding-top:28px}.intro h1{font-size:clamp(43px,8.9vw,75px);margin:70px 0 40px}.intro-bottom{grid-template-columns:1fr;gap:35px;margin-bottom:50px}.intro-copy{justify-self:start;max-width:440px}.intro-copy p{font-size:15px}.intro-rule{font-size:7px;gap:12px}.projects{grid-template-columns:1fr;padding:55px 0}.project-sidebar{position:static;padding:0}.project-sidebar h2{font-size:57px;margin:25px 0}.project-sidebar h2 br{display:none}.project-sidebar h2 em{margin-left:10px}#project-list{display:flex;flex-wrap:wrap;gap:10px 20px;margin:20px 0 35px}.project-item{padding:10px 0;gap:7px}.project-item b{font-size:16px}.project-item i,.sidebar-note{display:none}.project-item:hover,.project-item.active{padding-left:0}.art{height:420px}.contact{padding:45px 0}.contact h2{font-size:clamp(65px,13vw,105px)}.contact-bottom{display:block}footer{margin:0 6%;gap:20px;font-size:8px}.detail{grid-template-columns:1fr;padding-top:35px}.detail-info{position:static;padding:0 0 40px}.detail h1{margin-top:35px}.detail-visuals .art{height:480px}}
.social-links{display:flex;gap:12px;margin-top:28px}.social-links a{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;transition:background .2s,transform .2s,border-color .2s}.social-links svg{width:21px;height:21px}.social-links a:hover,.social-links a:focus-visible{background:var(--mint);border-color:var(--mint);transform:translateY(-3px)}
@media(max-width:420px){nav{gap:13px}.art{height:350px}}
@media(min-width:801px){
 html.stage-locked{overflow:hidden;overscroll-behavior:none;overflow-anchor:none;scroll-behavior:auto}
 .projects,#project-detail,.project-sidebar,#project-gallery,.detail-visuals{overflow-anchor:none}
 .projects,.detail-mode .projects,#project-detail.detail{height:calc(100dvh - 96px);min-height:0;padding-top:34px;padding-bottom:24px;align-items:stretch;overflow:hidden}
 .project-sidebar,.projects .detail-info,#project-detail .detail-info{position:relative;top:0;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
 #project-gallery,.detail-visuals{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:auto}
 #project-gallery::-webkit-scrollbar,.detail-visuals::-webkit-scrollbar,.project-sidebar::-webkit-scrollbar,.detail-info::-webkit-scrollbar{display:none}
 .inline-detail-info{animation:none}
 .standalone-detail footer,.detail-mode footer{display:none}
 .project-sidebar h2{font-size:clamp(42px,4.5vw,72px);margin:22px 0}
 #project-list{margin-top:24px}.project-item{padding:15px 0}.sidebar-note{margin-top:22px}
}
html,body{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.next-project{min-height:120px;padding:28px 0 32px;align-items:center;gap:24px}.next-project>span:last-child{font-size:38px;transition:transform .25s,color .25s}.next-project:hover>span:last-child,.next-project:focus-visible>span:last-child{color:#14836e;transform:translate(5px,-5px)}.detail-mode #project-gallery>a.next-project{cursor:pointer}
.projects em,.contact em{font-style:normal}
.project-sidebar{min-width:0;container-type:inline-size}
.project-sidebar h2{font-size:clamp(24px,14cqw,64px);font-style:normal;white-space:nowrap}
@media(max-width:800px){
 .projects{grid-template-columns:minmax(0,1fr)}
 .project-sidebar h2{font-size:clamp(28px,7vw,52px)}
 #project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;width:100%;height:auto}
 .project-item{min-width:0;min-height:44px;align-items:baseline}
 .project-item span{flex-shrink:0}
 .project-item b{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
}
@media(max-width:360px){#project-list{grid-template-columns:minmax(0,1fr)}}
.project-card{width:90%;margin-left:auto;margin-right:0;transform-origin:right center}
@media(max-width:800px){.project-card{margin-left:auto;margin-right:auto}}
.art.art-video,.art.art-image{width:100%;height:auto;aspect-ratio:16 / 9;background:transparent;isolation:auto}.preview-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.art-image>.preview-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.art.art-long-image{width:100%;;aspect-ratio:16 / 9;background:transparent;isolation:auto}.preview-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.art.art-long-image{display:block;background:var(--paper);cursor:grab;touch-action:pan-y;user-select:none}
.long-image-scroll{position:absolute;inset:0;overflow:hidden;scroll-behavior:auto;overflow-anchor:none}
.long-image-content{display:block;width:100%;height:auto;pointer-events:none}
.long-image-hint{position:absolute;left:50%;top:50%;width:64px;height:64px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;visibility:hidden}
.art-long-image.show-drag-hint .long-image-hint{visibility:visible}
.art-long-image.is-dragging{cursor:grabbing}
.art-long-image.is-dragging .long-image-hint{visibility:hidden}
.art-long-image:focus-visible{outline:2px solid #117c69;outline-offset:-2px}
.project-card,.art-video,.preview-video{animation:none;transition:none;transform:none;filter:none}
.intro{position:relative;isolation:isolate}
.intro-deco{position:absolute;inset:0 -4.945055% 0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--paper);isolation:isolate}
.intro-bush{position:absolute;display:block;height:auto;max-width:none;opacity:.3;mix-blend-mode:normal;user-select:none}
.intro-deco-motion .intro-bush{transform:translateY(105%);translate:var(--bush-x,0px) var(--bush-y,0px);transition:transform .65s cubic-bezier(.4,0,.6,1),translate .65s cubic-bezier(.2,.7,.2,1)}
.intro-deco-motion.intro-deco-visible .intro-bush{transform:translateY(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1),translate .65s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.intro-deco-motion .intro-bush{transform:none;translate:none;transition:none}}
.intro-bush-right{width:40vw;right:-10vw;bottom:-15vw}
.intro-bush-left{width:44vw;left:-10vw;bottom:-9vw}
.contact{position:relative;isolation:isolate}
.contact-bush{width:54vw;left:70%;margin-left:-27vw;bottom:-4vw}
@media(max-width:800px){.contact-bush{width:84vw;margin-left:-42vw;bottom:-7vw}}
@media(max-width:800px){.intro-deco{left:-6.818182%;right:-6.818182%}.intro-bush-right{width:64vw;right:-32vw;bottom:-24vw}.intro-bush-left{width:68vw;left:-31vw;bottom:-14vw}}
.intro-photo{position:absolute;left:0;top:50%;width:50%;max-width:688px;aspect-ratio:736/526;transform:translateY(-50%);overflow:hidden;z-index:-1;pointer-events:none;opacity: .6;}
.intro-photo img{position:absolute;inset:-24px;width:calc(100% + 30px);height:calc(100% + 48px);object-fit:cover;object-position:center}
#intro .intro-bottom{flex:1;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;gap:clamp(28px,4vw,64px);margin:0;padding:16px 0 40px;min-height:520px}
#intro .intro-photo{position:relative;inset:auto;width:100%;max-width:none;height:100%;min-height:clamp(420px,42vw,620px);aspect-ratio:auto;transform:none}
#intro .intro-copy{grid-column:2;width:100%;max-width:440px;justify-self:center;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,56px) 0}
.logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;letter-spacing:normal}
.logo img{
  display:block;
  width:70px;
  height:70px;
  object-fit:contain;
}
@media (max-width:768px){
  .logo img{
    width:40px;
    height:40px;
  }
}

#intro .intro-name{font:400 32px/1.4 var(--site-font);margin:0 0 22px}
#intro .intro-role{font:400 clamp(17px,1.6vw,24px)/1.6 var(--site-font);letter-spacing:.035em;margin:0 0 18px}
#intro .intro-rule{height:0;padding:0;margin:0;border:0}


.intro-location{font:10px/1.6 var(--site-font);letter-spacing:1.5px;color:#716b64;margin-bottom:32px}
#intro .intro-copy,#intro .intro-name,#intro .intro-role,#intro .intro-location,#intro .text-link{font-family:var(--site-font)}
@media(max-width:800px){
 #intro{padding-top:16px;min-height:calc(100svh - 76px)}
 #intro .intro-photo{height:auto;min-height:0;aspect-ratio:736/526;align-self:center}
 #intro .intro-bottom{grid-template-columns:1fr;min-height:0;flex:none;padding:8px 0 32px;gap:30px}
 #intro .intro-copy{grid-column:1;max-width:none;justify-self:stretch;padding:0}
 #intro .intro-role{font-size:18px;line-height:1.65;margin-bottom:12px}
 .intro-location{margin-bottom:22px}
}
.language{border-radius:8px;width:auto;min-width:66px;padding:0 12px;font-family:var(--site-font)}
footer{flex-wrap:wrap;column-gap:20px;row-gap:16px}
.footer-records{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;letter-spacing:.5px;line-height:1.8}
.footer-records a:hover{text-decoration:underline;text-underline-offset:3px}
html[lang="zh-CN"] .intro h1{letter-spacing:-.025em;font-size:clamp(44px,7.7vw,130px)}html[lang="zh-CN"] .project-item b{font-family:var(--site-font)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
