500;600&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#343b36;--paper:#f3f0e9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,'PingFang SC',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}header{height:90px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d5d5cc}.brand{font-family:'Noto Serif SC',serif;font-size:23px;font-weight:600;letter-spacing:3px}.brand span{display:block;font:8px Manrope;letter-spacing:2.8px;margin-top:6px}.headnote{font-size:11px;letter-spacing:4px}header button{border:0;background:none;font-size:12px}header button span{margin-left:24px}main{max-width:1500px;margin:auto;padding:0 4.5%}.intro{padding:54px 0 57px}.eyebrow{font-size:10px;letter-spacing:2px}h1{font-family:'Noto Serif SC',serif;font-size:clamp(40px,6.1vw,90px);letter-spacing:-4px;font-weight:400;margin:24px 0 29px;line-height:1.4}h1 em{font-weight:400;font-style:normal;color:#8e9a8a}.intro-bottom{display:flex;justify-content:space-between;align-items:end}.intro-bottom p{font-size:12px;line-height:2;color:#70766b;margin:0}.intro-bottom>span{font-size:9px;line-height:2.2;text-align:right;letter-spacing:1px;color:#7f857b}#directory{padding-top:32px}.folder{position:relative;margin-top:0;background:var(--color);border-radius:0 9px 0 0;scroll-margin-top:40px}.folder:before{content:'';position:absolute;top:-28px;left:0;width:245px;height:30px;background:var(--color);border-radius:18px 30px 0 0;clip-path:polygon(0 0,88% 0,100% 100%,0 100%)}.folder:nth-child(2):before{left:15%}.folder:nth-child(3):before{left:30%}.folder:nth-child(4):before{left:45%}.folder:nth-child(5):before{left:60%}.folder:nth-child(6):before{left:75%}.folder-toggle{width:100%;background:none;border:0;display:flex;align-items:center;justify-content:space-between;padding:17px 30px 35px;text-align:left}.folder-toggle .label{display:flex;align-items:center;gap:24px}.num{font-size:10px;opacity:.6}.zh{font-family:'Noto Serif SC',serif;font-size:22px}.en{font-size:9px;letter-spacing:1.6px;opacity:.65}.sign{font-size:22px;font-weight:400}.folder.open .folder-toggle{padding-bottom:24px}.folder-body{display:none;padding:0 44px 65px}.folder.open .folder-body{display:block;animation:enter .45s ease}.folder:not(.open) .folder-toggle{height:89px}.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9%;padding-top:18px}.kicker{font-size:9px;letter-spacing:2px;opacity:.6}.about-text h2{font-family:'Noto Serif SC',serif;font-size:42px;font-weight:400;line-height:1.6;margin:20px 0}.about-text p{font-size:12px;line-height:2.2;max-width:410px;color:#536052}.pill{display:inline-block;border:1px solid #75836f66;border-radius:30px;padding:7px 13px;font-size:10px;margin:12px 6px 0 0}.portrait{position:relative;height:315px;overflow:hidden;background:#a8b09f}.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.45)}.portrait-caption{display:flex;justify-content:space-between;font-size:9px;margin-top:10px;opacity:.65}.inline-link{border:0;border-bottom:1px solid #6f7b67;background:transparent;padding:0 0 7px;margin-top:27px;font-size:11px}.subheading{display:flex;justify-content:space-between;align-items:end;margin:16px 0 30px}.subheading h2{font:400 32px 'Noto Serif SC',serif;margin:0}.subheading p{font-size:11px;opacity:.65}.timeline{display:grid;grid-template-columns:1fr 2fr;gap:35px;border-top:1px solid #343b3633;padding:25px 0}.timeline h3{font-size:16px;margin:0 0 10px}.timeline p{font-size:12px;line-height:2;max-width:650px;margin:0}.small{font-size:10px;opacity:.65}.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.skill{border-top:1px solid #343b3644;padding-top:22px}.skill h3{font:400 24px 'Noto Serif SC',serif}.skill p{font-size:12px;line-height:2}.skill span{font-size:10px;line-height:2.5}.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.work{border:0;background:none;text-align:left;padding:0;min-width:0}.work img{width:100%;height:260px;object-fit:cover;filter:saturate(.5);transition:transform .5s,filter .5s}.image-wrap{overflow:hidden}.work:hover img{transform:scale(1.04);filter:saturate(.85)}.work h3{font:400 20px 'Noto Serif SC',serif;margin:17px 0 9px}.work p{font-size:10px;opacity:.65;line-height:1.7}.work .arrow{float:right}.writing{display:block}.article{display:grid;grid-template-columns:70px 1fr 1fr 30px;gap:20px;border-top:1px solid #343b3633;padding:25px 0;align-items:center;width:100%;background:none;border-bottom:0;border-left:0;border-right:0;text-align:left}.article h3{font:400 22px 'Noto Serif SC',serif;margin:0}.article p{font-size:11px;line-height:1.9;opacity:.7}.creative-art{height:240px;display:grid;place-items:center;overflow:hidden;background:#e5ded4}.creative-art b{font-family:serif;font-weight:400;font-size:85px;line-height:.9;letter-spacing:-6px}.art2{background:#9daaa7}.art2 i{width:130px;height:130px;border:1px solid #e6e4da;border-radius:50%;box-shadow:30px 0 0 -1px #9daaa7,30px 0 0 0 #e6e4da;transform:rotate(-35deg)}.art3{background:#b89b91}.art3 b{font-size:56px;letter-spacing:12px;writing-mode:vertical-rl}footer{display:flex;justify-content:space-between;align-items:center;padding:30px 0;font-size:9px;letter-spacing:1px;color:#7b8176}dialog{border:0;background:var(--paper);color:var(--ink);padding:50px;max-width:760px;width:90%;max-height:85vh}dialog::backdrop{background:#252a2677;backdrop-filter:blur(7px)}.close{display:block;margin-left:auto;border:0;background:none;font-size:12px}dialog h2{font:400 32px 'Noto Serif SC';line-height:1.6}dialog p{font-size:14px;line-height:2.3}dialog img{width:100%;max-height:380px;object-fit:cover}.demo{font-size:9px;opacity:.55;margin-top:25px;letter-spacing:1px}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}button:focus-visible,a:focus-visible{outline:2px solid #455b51;outline-offset:4px}@media(max-width:700px){header{height:75px}.headnote{display:none}.intro{padding:35px 0 45px}h1{letter-spacing:-2px}.intro-bottom>span{display:none}.folder:before{width:25%;height:24px;top:-23px}.folder-toggle{padding:15px 18px 30px}.folder-toggle .label{gap:12px}.zh{font-size:18px}.en{font-size:7px;letter-spacing:.4px}.folder-body{padding:0 23px 50px}.about-grid{grid-template-columns:1fr;gap:30px}.about-text h2{font-size:32px}.portrait{height:280px}.works,.skills{grid-template-columns:1fr}.work img{height:300px}.timeline{grid-template-columns:1fr;gap:12px}.article{grid-template-columns:30px 1fr 20px}.article p{grid-column:2;grid-row:2}.article h3{font-size:18px}.subheading{display:block}.subheading h2{font-size:28px}footer>span:nth-child(2){display:none}dialog{padding:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media print{header,.intro,footer,.folder-toggle .sign{display:none}.folder-body{display:block}.folder{break-inside:avoid}.folder:before{display:none}}

@media print{.folder:not(.open){display:none}.folder.open .folder-body{display:block}.demo{display:none}}

.resume-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.brand{letter-spacing:1px}#skills .skills{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 45px}#skills .skill p{line-height:2.2}#skills .skill>span:last-child{display:block;overflow-wrap:anywhere}@media(max-width:700px){#skills .skills{grid-template-columns:1fr}}@media print{.resume-actions{display:none}}

#about .about-grid{grid-template-columns:1.35fr .85fr;align-items:start}#about .portrait{height:auto;aspect-ratio:1290 / 1922;max-width:300px;margin-left:auto;background:#c1c7bb}#about .portrait img{display:block;filter:none;width:100%;height:100%;object-fit:contain}#about .portrait-caption{max-width:300px;margin-left:auto}#about .about-text p{max-width:540px;font-size:13px;line-height:2.2}.resume-profile{display:flex;align-items:center;gap:24px;margin:15px 0 30px}.resume-profile img{width:85px;height:126px;object-fit:contain}.resume-profile p{font-size:12px;line-height:2;color:#5f655b}#resume .timeline p{line-height:2.1}@media(max-width:700px){#about .about-grid{grid-template-columns:1fr}#about .portrait,#about .portrait-caption{margin-left:0;margin-right:auto;max-width:260px}}@media print{@page{size:A4;margin:12mm}body{background:#fff;color:#222}main{padding:0;max-width:none}.folder{break-inside:auto;background:#fff!important}.folder-toggle{display:none!important}.folder-body{padding:0}.subheading{margin:0 0 12px}.subheading h2{font-size:26px}.resume-profile{margin:8px 0 15px}.resume-profile img{width:56px;height:84px}.timeline{padding:12px 0;grid-template-columns:1fr 3fr;gap:16px;break-inside:avoid}.timeline h3{font-size:13px;margin-bottom:6px}.timeline p{font-size:10px;line-height:1.8!important}.small{font-size:9px;opacity:1}}
.work-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}.work-filters button{border:1px solid #343b3640;border-radius:30px;padding:8px 14px;font-size:11px;background:transparent}.work-filters button.selected{background:#343b36;color:#f4f0e8}.work-filters small{opacity:.65;margin-left:5px}.work[hidden],.article[hidden]{display:none!important}.image-wrap{position:relative}.media-badge{position:absolute;bottom:12px;left:12px;padding:7px 11px;background:#f3f0e9ed;color:#343b36;font-size:10px;border-radius:2px}.work img,.work:hover img{filter:none}.work .image-wrap{background:#c6cbbd}.work .image-wrap>img{aspect-ratio:4/3;height:auto;display:block}.work h3{line-height:1.6;padding-right:8px}.works{row-gap:34px}.empty-archive{padding:65px 0 85px;border-top:1px solid #343b3633;text-align:center}.empty-archive span{font-size:11px;letter-spacing:6px;opacity:.5}.empty-archive p{font:400 28px 'Noto Serif SC',serif;opacity:.7;margin-top:25px}dialog.wide{max-width:1000px}dialog .close{position:sticky;top:0;background:#f3f0e9e8;padding:8px 12px;z-index:3}dialog .project-image{max-height:65vh;object-fit:contain;margin:16px 0;background:#e5e2db}dialog .project-video{display:block;width:100%;max-height:65vh;background:#171b18;margin:20px 0}dialog .reading-body{max-width:780px;margin:25px auto}dialog .reading-body p{font-size:14px;line-height:2.2;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 12px}.project-links{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.project-links a{font-size:12px;border:1px solid #909984;padding:12px 16px}.pdf-preview{border-top:1px solid #d4d6cc;margin-top:28px;padding-top:18px}.pdf-preview h3{font:400 20px 'Noto Serif SC',serif}.pdf-preview iframe{width:100%;height:65vh;border:1px solid #d5d8cc;background:white}.pdf-preview>p{font-size:11px;color:#788071}.photo-viewer{margin-top:20px}.photo-viewer>#galleryImage{display:block;width:100%;height:min(62vh,650px);max-height:none;object-fit:contain;background:#e6e4dd}.gallery-controls{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:11px}.gallery-controls button{border:1px solid #adb4a5;background:transparent;padding:8px 17px}.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px}.gallery-thumbs button{padding:3px;border:1px solid transparent;background:transparent;flex:0 0 80px;opacity:.6}.gallery-thumbs button.selected{border-color:#526651;opacity:1}.gallery-thumbs img{display:block;width:74px;height:55px;object-fit:cover}.load-error{padding:40px}#writing .article{grid-template-columns:44px 1.2fr 1fr 25px}#writing .article h3{font-size:20px;line-height:1.6}#writing .article .small{display:block;margin-top:6px;line-height:1.6}@media(max-width:700px){dialog{padding:20px}.work-filters button{font-size:10px;padding:7px 11px}#writing .article{grid-template-columns:27px 1fr 20px}#writing .article h3{font-size:18px}.photo-viewer>#galleryImage{height:50vh}.pdf-preview iframe{height:60vh}.project-links a{font-size:11px}.empty-archive{padding:45px 0 65px}}@media print{.work-filters{display:none}}

/* Opening statement */
.intro h1{font-size:clamp(30px,4.8vw,70px);letter-spacing:-.035em;line-height:1.5;max-width:1200px;margin:27px 0 32px;text-wrap:balance}.intro h1 em{display:block;color:var(--ink)}.intro h1 .word-emphasis{display:inline-block;font-size:1.2em;font-weight:600;color:#74816c;letter-spacing:.03em;margin:0 .045em}.intro-bottom{align-items:flex-end;gap:40px}.intro-bottom #siteDescription{font-size:14px;line-height:2.15;max-width:850px;color:#626b60}.intro-bottom>span{flex-shrink:0}.brand span{letter-spacing:2px;font-size:9px}@media(max-width:700px){.intro h1{font-size:clamp(27px,6.3vw,43px);line-height:1.65;letter-spacing:-.04em}.intro-bottom{display:block}.intro-bottom #siteDescription{font-size:13px;line-height:2.15}.intro{padding-bottom:56px}}