@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/font-6.ttf) format('truetype');
}
:root{--paper:#fafaf8;--ink:#131411;--muted:#85857f;--accent:#ed623e;--line:#deded7;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,'PingFang SC',sans-serif;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0}img{display:block;max-width:100%}p,h1,h2,h3,figure{margin:0}button:disabled{cursor:default}::selection{background:#cce381;color:#131411}.nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);width:min(1160px,90%);height:58px;z-index:30;border:1px solid #18181312;background:#ffffffcf;backdrop-filter:blur(18px);border-radius:50px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;box-shadow:0 8px 34px #1818130b}.brand{font-size:16px;font-weight:800;letter-spacing:2px}.brand span{font-size:9px;vertical-align:top;margin-left:4px}.nav nav{display:flex;gap:28px}.nav nav a{font-size:10px;font-weight:700;letter-spacing:1.5px;transition:color .2s}.nav nav a:hover{color:var(--accent)}.nav nav a span{margin-left:4px}.progress{position:absolute;bottom:-6px;left:25px;right:25px;height:1px;background:#1111}.progress span{display:block;width:0;height:100%;background:var(--accent)}.hero{min-height:850px;height:100svh;max-height:1150px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:130px 28px 95px}.hero-meta{position:absolute;top:111px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:9px;line-height:1.6;letter-spacing:1px;color:#74766c}.hero-meta span:last-child{text-align:right}.hero-body{width:100%;text-align:center;position:relative}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.7px;color:var(--accent);line-height:1.5}.intro-label{margin-bottom:13px}.hero h1{font-family:var(--display);font-size:clamp(70px,10.6vw,162px);font-weight:800;letter-spacing:-.025em;line-height:.88;animation:text-in .85s both}.hero-cards{display:flex;justify-content:center;position:relative;z-index:2;margin:12px auto 14px;padding:15px 0;width:min(840px,92%)}.hero-card{flex:0 0 25.5%;aspect-ratio:1.12;position:relative;padding:0;border-radius:14px;background:#e7e8df;box-shadow:0 18px 25px #2222;transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--lift)),0) rotate(calc(var(--r) + var(--mr,0deg)));transition:box-shadow .3s;animation:card-in .9s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--delay);will-change:transform}.hero-card+.hero-card{margin-left:-15px}.hero-card img{height:100%;width:100%;object-fit:cover;border-radius:inherit;pointer-events:none}.hero-card.inben{--r:-6deg;--lift:8px;--delay:.12s;overflow:hidden}.hero-card.inben img{width:139%;max-width:none;height:139%;object-fit:fill;position:absolute;left:-19.5%;top:-14%}.hero-card.ip{--r:3deg;--lift:-8px;--delay:.2s}.hero-card.ip img{object-position:50% 30%}.hero-card.wuxi{--r:-4deg;--lift:7px;--delay:.28s}.hero-card.wuxi img{object-position:center}.hero-card.brand-ip{--r:6deg;--lift:-5px;--delay:.36s}.hero-card.brand-ip img{object-position:center 35%}.hero-card:hover{z-index:3;box-shadow:0 28px 40px #2223}.hero h2{font:800 clamp(54px,7vw,105px)/.9 var(--display);letter-spacing:-.015em;color:#c4c5be;animation:text-in .9s .25s both}.hero h2 span{color:#bfc0b8}.hero-note{margin-top:24px;font-size:10px;color:#797b73;letter-spacing:2px}.hero-bottom{position:absolute;bottom:28px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.3px;color:#6a6c63}.hero-bottom a{display:flex;align-items:center;gap:14px}.hero-bottom a span{font-size:22px;animation:bob 2s infinite}.section{padding:110px 0}.section-heading{text-align:center;padding:0 24px}.section-heading h2,.archive h2{font:800 clamp(48px,6.2vw,88px)/.95 var(--display);letter-spacing:-.015em;margin-top:14px}.section-subtitle{font-size:12px;color:var(--muted);line-height:1.8;margin-top:18px}.about{padding-bottom:50px}.about-grid{max-width:1000px;margin:70px auto 85px;display:grid;grid-template-columns: .8fr 1.2fr;gap:100px;align-items:center;padding:0 40px}.portrait-stack{position:relative;width:260px;max-width:100%;margin:auto;perspective:1000px}.photo-back{position:absolute;inset:0;background:#dce3c3;border:1px solid #cdd4b8;border-radius:14px;transform:rotate(5deg) translate(10px,4px)}.portrait{position:relative;transform:rotate(-4deg);background:white;padding:9px 9px 0;border-radius:14px;box-shadow:0 18px 50px #2222;transition:transform .3s;will-change:transform}.portrait img{width:100%;height:310px;object-fit:cover;border-radius:8px}.portrait figcaption{padding:17px 6px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.portrait figcaption span{font-size:8px;letter-spacing:.7px;color:var(--muted)}.about-copy .mini-label{font-size:9px;letter-spacing:2px;color:var(--muted)}.about-copy h3{font-size:30px;line-height:1.5;font-weight:500;letter-spacing:2px;margin:16px 0 20px}.about-copy>p:not(.mini-label){font-size:12px;line-height:2;color:#73766b;margin-bottom:12px}.education{border-top:1px solid var(--line);display:flex;gap:50px;margin-top:25px;padding-top:22px}.education div{display:flex;flex-direction:column;gap:7px}.education span{font-size:9px;letter-spacing:1px;color:var(--muted)}.education strong{font-size:13px;font-weight:500}.education small{font-size:10px;color:var(--muted)}.skills{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.skills-track{display:flex;align-items:center;width:max-content;gap:45px;animation:marquee 30s linear infinite}.skills-track span{font:700 30px var(--display);color:#7a7c70}.skills-track i{font-size:24px;font-style:normal;color:#bac99a}.skills:hover .skills-track{animation-play-state:paused}.projects{padding-bottom:80px;overflow:hidden}.gallery{height:530px;max-width:1800px;margin:0 auto;position:relative;touch-action:pan-y;cursor:grab;user-select:none}.gallery.is-dragging{cursor:grabbing}.gallery-track{position:absolute;inset:0;overflow:hidden}.project-card{position:absolute;left:50%;top:48%;width:330px;padding:0;background:none;text-align:center;will-change:transform;transform-origin:center}.project-art{height:330px;width:100%;position:relative;overflow:hidden;border-radius:19px;box-shadow:0 22px 50px #2126191c;background:#e2e2d9;border:1px solid #1111;transition:box-shadow .3s,border-color .3s}.project-art img{height:100%;width:100%;object-fit:cover;transition:scale .65s cubic-bezier(.22,1,.36,1)}.project-card[data-id="inben"] .project-art img{position:absolute;width:139%;max-width:none;height:139%;left:-19.5%;top:-14%;object-fit:fill}.project-card[data-id="personal-ip"] .project-art img{object-position:50% 33%}.project-card[data-id="wuxi"] .project-art img{object-fit:contain;background:#d4dcde}.project-art:after,.archive-card .archive-art:after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 35%,#ffffff65 50%,transparent 65%);transform:translateX(-110%) rotate(-10deg);pointer-events:none;transition:transform .85s}.project-card:hover .project-art:after,.archive-card:hover .archive-art:after{transform:translateX(110%) rotate(-10deg)}.project-card:hover .project-art{box-shadow:0 30px 65px #2126192b;border-color:#ed623e80}.project-card:hover .project-art img{scale:1.03}.project-label{display:inline-block;margin-top:22px;color:#55594b;background:#eaece3;border-radius:30px;padding:9px 20px;font-size:12px;font-weight:600}.project-category{display:block;margin-top:9px;font-size:9px;letter-spacing:1.2px;color:#8c8f82}.gallery-bottom{display:flex;justify-content:space-between;align-items:center;max-width:1110px;margin:10px auto 0;padding:0 35px}.gallery-bottom p{font-size:10px;color:#828677;letter-spacing:.7px}.drag-symbol{font-size:22px;vertical-align:middle;margin-right:10px}.gallery-controls{display:flex;align-items:center;gap:23px}.gallery-controls button{width:42px;height:42px;border:1px solid #d2d5c9;border-radius:50%;background:transparent;transition:background .2s}.gallery-controls button:hover{background:#e4e8d7}.gallery-controls>span{font-size:10px;letter-spacing:1.5px;width:56px;text-align:center}.archive{padding:115px max(5vw,24px) 140px}.archive-header{max-width:1250px;margin:0 auto 50px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.archive-header>p{font-size:11px;line-height:1.9;color:var(--muted);padding-bottom:5px}.archive h2{font-size:clamp(44px,5.5vw,72px)}.masonry{max-width:1250px;margin:auto;columns:4;column-gap:18px}.archive-card{display:block;width:100%;margin:0 0 23px;padding:0;background:none;text-align:left;break-inside:avoid}.archive-art{position:relative;overflow:hidden;border-radius:9px;background:#e4e5dc}.archive-art img{width:100%;height:auto;transition:transform .4s}.archive-card:hover img{transform:scale(.97)}.archive-card figcaption{display:flex;justify-content:space-between;padding-top:11px;font-size:9px;letter-spacing:.5px;color:#787d6e}.archive-card figcaption span:last-child{font-size:14px}.contact{min-height:650px;background:#d9ddcd;padding:100px 6% 28px;position:relative;overflow:hidden}.contact-inner{max-width:1400px;margin:auto}.contact .eyebrow{color:#69734c}.contact h2{font:800 clamp(100px,19vw,300px)/.95 var(--display);letter-spacing:-.035em;white-space:nowrap;margin-top:20px;transform:translateY(var(--footer-y,30px));will-change:transform}.contact h2>span{display:inline-block;font:400 .65em Arial;vertical-align:10%;margin-left:4vw;color:#94a46f}.contact-info{display:flex;justify-content:space-between;gap:30px;padding:60px 0 70px;border-bottom:1px solid #1112}.contact-info>a,.contact-name{font-size:clamp(12px,1.6vw,20px)}.contact-info span{display:block;font-size:9px;letter-spacing:1.8px;margin-bottom:15px;color:#777f66}.contact-info a{transition:color .2s}.contact-info a:hover{color:#687e37}.footer-line{display:flex;justify-content:space-between;margin-top:25px;font-size:9px;letter-spacing:1px;color:#6b725e}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(35px);transition:opacity .75s,transform .85s cubic-bezier(.22,1,.36,1)}.js .reveal.visible{opacity:1;transform:none}dialog{border:0;padding:0;max-width:none;max-height:none}dialog::backdrop{background:#171b16b8;backdrop-filter:blur(8px)}body.modal-open{overflow:hidden}.project-dialog{width:100%;height:100dvh;background:var(--paper);color:var(--ink);overflow:hidden}.detail-nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:17px 4%;background:#fafaf8e6;backdrop-filter:blur(18px);border-bottom:1px solid #1111}.back-button{background:none;font-size:11px;padding:10px}.detail-nav>span{font-size:10px;font-weight:600;letter-spacing:1px}.detail-scroll{height:100%;overflow:auto;overscroll-behavior:contain}.detail-intro{max-width:1240px;margin:auto;padding:140px 30px 60px}.detail-intro h2{font:800 clamp(40px,7vw,90px)/1.05 var(--display);margin:20px 0}.detail-intro>p:last-child{font-size:13px;line-height:1.8;color:#7a7c71}.detail-images{max-width:1240px;margin:auto;background:#111}.detail-images img{width:100%;height:auto;margin:0;display:block}.detail-end{text-align:center;padding:80px 20px}.detail-end p{font:700 38px var(--display);color:#929781}.detail-end button{margin-top:25px;padding:15px 28px;border-radius:40px;background:#e4e8d9;font-size:12px}.lightbox{width:100vw;height:100dvh;background:#131511ed;color:white;overflow:hidden}.lightbox-tools{display:flex;align-items:center;gap:25px;position:absolute;top:0;left:0;right:0;padding:18px 30px;background:#131511cc;z-index:2;font-size:11px}.lightbox-tools>span{margin-right:auto}.lightbox-tools label{display:flex;align-items:center;gap:10px}.lightbox-tools input{width:100px;accent-color:#bacc93}.lightbox-tools button{background:none;color:white;font-size:20px}.lightbox-scroll{height:100%;overflow:auto;padding:80px 20px 30px;display:grid;align-items:start;justify-items:center}.lightbox-scroll img{width:auto;max-width:90vw;max-height:84vh;transform-origin:top center;transition:transform .2s}.archive-card.reveal{transition-delay:var(--delay,0s)}@keyframes text-in{from{opacity:0;transform:translateY(22px) scaleY(.8)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes card-in{from{opacity:0;scale:.5}to{opacity:1;scale:1}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(min-width:1600px){.hero-cards{width:940px}.hero-card{aspect-ratio:1.08}.hero h1{font-size:170px}.hero h2{font-size:110px}}@media(max-width:1000px){.hero{min-height:720px}.about-grid{gap:55px}.masonry{columns:3}.hero-cards{width:720px}.contact-name{display:none}.hero h1{font-size:12vw}.hero h2{font-size:8.5vw}}@media(max-width:640px){html{scroll-padding-top:85px}.nav{top:14px;width:92%;height:51px;padding:0 16px}.brand{font-size:13px}.nav nav{gap:16px}.nav nav a{font-size:8px;letter-spacing:.8px}.nav nav a span{display:none}.hero{height:100svh;min-height:690px;max-height:900px;padding:160px 12px 125px}.hero-meta{top:95px;font-size:7px}.intro-label{font-size:8px;letter-spacing:2px;margin-bottom:18px}.hero h1{font-size:15vw;letter-spacing:-.02em;white-space:nowrap}.hero-cards{width:110%;margin:25px -5% 27px;padding:10px 12px}.hero-card{flex-basis:27%;aspect-ratio:.9;border-radius:9px}.hero-card+.hero-card{margin-left:-10px}.hero h2{font-size:12vw;line-height:.97}.hero-note{font-size:8px;letter-spacing:1.5px;margin-top:24px}.hero-bottom{bottom:28px;justify-content:center}.hero-bottom>span{display:none}.hero-bottom a{font-size:8px}.section{padding:80px 0}.section-heading h2{font-size:12vw;white-space:nowrap}.eyebrow{font-size:8px;letter-spacing:2px}.section-subtitle{font-size:10px;max-width:260px;margin:15px auto 0}.about-grid{grid-template-columns:1fr;gap:55px;padding:0 28px;margin:50px auto}.portrait-stack{width:215px}.portrait img{height:270px}.about-copy h3{font-size:27px}.about-copy>p:not(.mini-label){font-size:12px}.education{gap:60px}.skills{margin-top:20px;padding:20px 0}.skills-track{gap:30px}.skills-track span{font-size:25px}.gallery{height:415px;margin-top:10px}.project-card{width:245px}.project-art{height:265px;border-radius:13px}.project-label{font-size:11px;padding:8px 15px;margin-top:18px}.project-category{font-size:8px}.gallery-bottom{padding:0 24px;gap:12px}.gallery-bottom p{font-size:8px;max-width:140px;line-height:1.8}.drag-symbol{display:none}.gallery-controls{gap:12px}.gallery-controls button{width:36px;height:36px}.gallery-controls>span{font-size:9px}.archive{padding:70px 20px 75px}.archive-header{display:block;margin-bottom:35px}.archive-header>p{margin-top:20px;font-size:10px}.archive h2{font-size:12vw}.masonry{columns:2;column-gap:12px}.archive-card{margin-bottom:20px}.archive-card figcaption{font-size:8px;gap:8px}.archive-art{border-radius:6px}.contact{min-height:500px;padding:75px 24px 25px}.contact h2{font-size:21vw;margin-top:25px}.contact h2>span{margin-left:2vw}.contact-info{flex-direction:column;gap:25px;padding:40px 0}.contact-info>a{font-size:17px}.contact-info span{margin-bottom:8px;font-size:8px}.footer-line{font-size:7px;gap:10px}.footer-line>span:nth-child(2){display:none}.detail-nav{padding:13px 12px}.detail-nav>span{display:none}.detail-intro{padding:115px 22px 40px}.detail-intro h2{font-size:44px}.detail-intro>p:last-child{font-size:12px}.lightbox-tools{padding:18px 15px;gap:12px}.lightbox-tools>span{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lightbox-tools input{width:65px}.lightbox-scroll{padding-left:8px;padding-right:8px}.lightbox-scroll img{max-width:96vw}.detail-end p{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

.hero-card.inben img,.project-card[data-id="inben"] .project-art img{position:static;width:100%;height:100%;object-fit:cover;object-position:62% center}
@media(max-height:780px) and (min-width:641px){.hero{min-height:700px;padding-top:145px;padding-bottom:70px}.hero h1{font-size:110px}.hero h2{font-size:77px}.hero-cards{width:710px;margin-top:8px;margin-bottom:10px}.hero-note{margin-top:17px}.intro-label{margin-bottom:10px}}

body{overflow-x:clip}.about{overflow:hidden}

/* Category navigation: shareable brand and UX/UI modes. */
.mode-switch{display:flex;align-items:center;gap:3px;margin-right:auto;margin-left:24px;padding:4px;border-radius:30px;background:#eceee6}
.mode-switch a{font-size:11px;line-height:1.2;font-weight:600;padding:9px 15px;border-radius:24px;color:#767a6d;transition:background .2s,color .2s}
.mode-switch a.is-active{background:#fff;color:#20251b;box-shadow:0 2px 7px #1111}
.mode-switch a:hover{color:var(--accent)}
html[data-mode="ux"]{--accent:#7764ca}
html[data-mode="ux"] .contact{background:#dcd9ec}
html[data-mode="ux"] .contact .eyebrow{color:#71628f}
html[data-mode="ux"] .contact h2>span{color:#a294c4}
html[data-mode="ux"] .project-label{background:#eeebf5;color:#645a7b}
html[data-mode="ux"] .gallery-controls button:hover{background:#e5dff1}
.hero-card.ux-hero-card{overflow:hidden}
.hero-card.ux-hero-card img{position:static;width:100%;height:100%;object-fit:cover;object-position:center}
html[data-mode="ux"] .hero h2{font-size:clamp(49px,6.4vw,96px)}
html[data-mode="ux"] .project-art img{object-position:center}
@media(max-width:850px){.nav nav{gap:15px}.mode-switch{margin-left:15px}.mode-switch a{padding:8px 11px}}
@media(max-width:640px){.nav{height:84px;flex-wrap:wrap;justify-content:space-between;padding:10px 16px;align-content:center;row-gap:8px}.mode-switch{order:1;margin-left:0;margin-right:0}.brand{order:0}.nav nav{order:2;width:100%;justify-content:space-between;padding:0 2px}.mode-switch a{font-size:10px;padding:6px 13px}.mode-switch{padding:3px}.hero-meta{top:122px}.hero{padding-top:175px}.hero-body{margin-top:12px}html[data-mode="ux"] .hero h2{font-size:10.6vw}.progress{bottom:-5px}html{scroll-padding-top:115px}}
@media(max-height:780px) and (min-width:641px){html[data-mode="ux"] .hero h2{font-size:70px}}
.hero-cards{max-width:94%}
@media(max-width:640px){.hero-cards{max-width:110%}}