@font-face{font-family:'Quicksand';src:url('assets/fonts/Quicksand.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
:root{color-scheme:dark;font-family:'Quicksand','Microsoft YaHei',sans-serif;font-weight:300;background:#0b0b0b;color:#f5f5f5;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:6px}.skip{position:fixed;top:-100px;z-index:100;padding:15px;background:#000}.skip:focus{top:10px}header{position:absolute;z-index:3;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:35px 4.3%}.signature{font-size:30px;font-weight:300;letter-spacing:-3px}.signature span{font-size:10px;letter-spacing:0;vertical-align:top;margin-left:7px}.languages{display:flex;gap:12px;align-items:center;font-size:12px}.languages button{border:0;background:transparent;padding:8px 0;opacity:.5}.languages button[aria-pressed=true]{opacity:1}.hero{height:100svh;min-height:640px;position:relative;overflow:hidden}.hero-image{position:absolute;inset:-3%;background:url('assets/hero-v2.png') center center/cover;transform:scale(1.03);animation:arrival 2.5s ease-out;will-change:transform}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 65%,#0b0b0b)}.hero-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;padding-bottom:6vh;text-align:center;text-shadow:0 2px 24px #0005}.eyebrow{font-size:10px;letter-spacing:2.7px}.hero h1{font-size:clamp(56px,8.4vw,128.8px);font-weight:300;letter-spacing:-.07em;line-height:1;margin:25px 0 20px}.hero-caption p{font-size:clamp(15px,1.45vw,23px);letter-spacing:.02em;margin:0}.hero-bottom{position:absolute;bottom:35px;left:4.3%;right:4.3%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}.hero-bottom a{padding:10px;margin-top:-10px}.contact-tab{position:fixed;z-index:5;right:0;top:45%;writing-mode:vertical-rl;padding:22px 15px;display:flex;gap:18px;align-items:center;background:#141414cc;backdrop-filter:blur(12px);border:1px solid #ffffff25;border-right:0;font-size:10px;letter-spacing:2px}.work{max-width:1600px;margin:auto;padding:120px 6% 40px}.section-intro{position:relative;padding-bottom:65px}.section-intro>span{font-size:10px;letter-spacing:2px;color:#999}.section-intro h2{font-size:clamp(35px,5vw,72px);font-weight:300;letter-spacing:-.055em;margin:25px 0 15px}.section-intro p{font-size:14px;color:#999}.project-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:65px}.project-row.single{grid-template-columns:1fr}.project-card{display:block;text-align:left;border:0;padding:0;background:none;width:100%;min-width:0}.card-visual{position:relative;background:#1b1b1b;aspect-ratio:1.35;overflow:hidden}.single .card-visual{aspect-ratio:2.1}.card-visual img,.card-visual video{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s}.card-visual img{filter:saturate(.75)}.project-card:hover .card-visual img,.project-card:hover .card-visual video{transform:scale(1.035);filter:saturate(1)}.card-arrow{position:absolute;right:20px;bottom:20px;width:42px;height:42px;border-radius:50%;background:#111c;display:grid;place-items:center;font-size:22px;transition:background .3s}.project-card:hover .card-arrow{background:#fff;color:#111}.card-info{display:flex;justify-content:space-between;align-items:baseline;padding:19px 0;gap:12px}.card-info h3{font-size:23px;font-weight:300;letter-spacing:-.04em;margin:0}.card-info p{margin:7px 0 0;font-size:11px;letter-spacing:.5px;color:#999}.card-number{font-size:10px;color:#888}.sketches .card-visual{display:flex;gap:16px;padding:30px;background:#d4d4d1}.sketches .card-visual img{width:33.333%;object-fit:contain;background:#eee;transform:rotate(-4deg)}.sketches .card-visual img:nth-child(2){transform:rotate(4deg)}footer{margin:50px 6% 0;padding:65px 0 30px;border-top:1px solid #ffffff26}footer>p{font-size:clamp(28px,4vw,60px);letter-spacing:-.045em;max-width:650px}footer>a{font-size:15px;border-bottom:1px solid #777;padding-bottom:8px}footer>div{display:flex;justify-content:space-between;margin-top:90px;font-size:10px;color:#999;letter-spacing:1px}dialog{border:0;color:#eee;background:#111;padding:0}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}#project-dialog{width:94vw;max-width:1400px;height:94svh;max-height:94svh}.dialog-bar{position:sticky;top:0;z-index:2;background:#111e;backdrop-filter:blur(10px);padding:20px 4%;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1px}.close{background:none;border:1px solid #555;padding:12px 18px;font-size:10px;letter-spacing:1px}.project-heading{padding:50px 5%}.project-heading>span{font-size:12px;color:#aaa}.project-heading h2{font-size:clamp(40px,7vw,90px);font-weight:300;letter-spacing:-.06em;margin:18px 0}#project-media{padding:0 4% 50px}#project-media img{display:block;width:100%;height:auto;margin-bottom:16px;background:#222}#project-media video{display:block;width:100%;max-height:75vh;margin-bottom:30px;background:#000}.media-note{padding:20px;background:#222;font-size:13px;color:#ccc;line-height:1.6}.album-grid{columns:3;column-gap:16px}.album-grid img{break-inside:avoid}#contact-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(600px,100%);max-width:100%;height:100svh;max-height:100svh;padding:100px 7% 50px 45px}#contact-dialog>.close{position:absolute;right:30px;top:30px}#contact-dialog h2{font-size:45px;font-weight:300;letter-spacing:-2px;line-height:1.1;margin:35px 0 60px;white-space:pre-line}#contact-dialog>a,.contact-placeholder{display:block;border-top:1px solid #444;padding:23px 0;font-size:24px}#contact-dialog a span{float:right}#contact-dialog small{display:block;font-size:12px;color:#999;margin-top:10px}.contact-placeholder{color:#888}body.modal-open{overflow:hidden}@keyframes arrival{from{transform:scale(1.12);filter:brightness(.4)}to{transform:scale(1.03);filter:brightness(1)}}@media(max-width:650px){header{padding:25px}.hero{min-height:560px}.hero h1{font-size:16.1vw}.hero-caption .eyebrow{font-size:8px;letter-spacing:2px}.hero-bottom{left:25px;right:25px;bottom:27px}.hero-bottom>span:first-child{display:none}.hero-bottom{font-size:8px;letter-spacing:1px}.contact-tab{padding:15px 9px;font-size:9px}.work{padding:75px 24px 0}.project-row{grid-template-columns:1fr;gap:35px;margin-bottom:35px}.single .card-visual{aspect-ratio:1.35}.card-info h3{font-size:22px}.section-intro{padding-bottom:35px}.album-grid{columns:2}#project-dialog{width:100%;max-width:100%;height:100svh;max-height:100svh;margin:0}.sketches .card-visual{padding:16px;gap:7px}#contact-dialog{padding:110px 30px 30px}#contact-dialog h2{font-size:38px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-image{will-change:auto}}


.hero-image video{width:100%;height:100%;object-fit:cover;display:block}
.card-visual{border-radius:22px;border:1px solid #ffffff26;box-shadow:0 0 24px #ffffff16,0 0 65px #ffffff12;transition:box-shadow .35s,border-color .35s}
.project-card:hover .card-visual,.project-card:focus-visible .card-visual{border-color:#ffffff40;box-shadow:0 0 30px #ffffff22,0 0 85px #ffffff18}
#project-dialog{border-radius:22px}
#project-media img,#project-media video{border-radius:0}
@media(prefers-reduced-motion:reduce){.hero-image video{display:none}}

.card-visual::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 22px #ffffff24,inset 0 0 52px #ffffff12;z-index:1}
.card-arrow{z-index:2}



/* Original transparent logo: frame its artwork without modifying the source. */
.signature{display:block;position:relative;width:51px;height:75px;overflow:hidden;flex-shrink:0}
.signature img{position:absolute;width:120px;height:120px;max-width:none;left:-30.13px;top:-18.49px;filter:brightness(0) invert(1)}


.hero-caption .signature{margin-bottom:26px}
.header-contact{background:transparent;border:0;padding:8px 0;font:inherit;font-size:13px;letter-spacing:1px}
.contact-tab[hidden]{display:none}



.hero h1{display:flex;align-items:center;justify-content:center;gap:.38em;letter-spacing:-.04em}
.hero h1>span:not(.name-logo){display:block}
.name-logo{position:relative;display:block;flex:none;width:.4936em;height:.73em;overflow:hidden;opacity:.6}
.name-logo img{position:absolute;width:1.1753em;height:1.1753em;max-width:none;left:-.2951em;top:-.1811em;filter:brightness(0) invert(1)}
@media(max-width:650px){.hero h1{font-size:14vw;gap:.3em}}


/* Large overlapping mark does not reserve space between the words. */
.hero h1{position:relative;gap:.25em;isolation:isolate}
.hero h1>span:not(.name-logo){position:relative;z-index:1}
.hero h1 .name-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(4);opacity:.08;z-index:0;pointer-events:none}
@media(max-width:650px){.hero h1{gap:.25em}}





/* Reduce name lettering only; preserve the overlapping logo dimensions. */
.hero h1>span:not(.name-logo){font-size:.8em}


.extra-gallery{margin-top:40px;border-top:1px solid #ffffff26;padding-top:20px}.extra-gallery summary{cursor:pointer;padding:16px 0;color:#bbb}.extra-gallery[open] summary{margin-bottom:20px}


.project-video{cursor:pointer}.project-video:focus-visible{outline:2px solid #fff;outline-offset:4px}


/* Full-screen project presentation with a restrained entrance. */
#project-dialog{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;background:#0b0b0b;overscroll-behavior:contain}
#project-dialog[open]{animation:project-enter .45s cubic-bezier(.2,.7,.2,1) both}
#project-dialog.leaving{animation:project-exit .28s ease-in both;pointer-events:none}
#project-dialog::backdrop{background:#0b0b0b;backdrop-filter:none}
#project-dialog .dialog-bar{background:#0b0b0bf2}
#project-dialog .project-heading,#project-dialog #project-media{max-width:1500px;margin-left:auto;margin-right:auto}
@keyframes project-enter{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes project-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}}



#project-dialog #project-media.david-media{max-width:1200px;width:92%;padding:0 0 50px}
.david-row{display:grid;gap:8px;margin-bottom:40px;align-items:start}
.david-row:first-child,.david-row:nth-last-child(-n+3){margin-bottom:20px}
.david-sketch-strip{gap:0}
.david-frame{min-width:0;overflow:hidden}
#project-media .david-frame img{width:100%;height:100%;object-fit:contain;margin:0;background:transparent}
@media(max-width:650px){.david-row{margin-bottom:24px;gap:4px}.david-sketch-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px}}



/* Original project introductions, one language at a time. */
.project-actions{display:flex;align-items:center;gap:32px}
#project-description{max-width:850px;margin-top:34px;color:#d0d0d0;font-size:17px;line-height:1.85;letter-spacing:0}
#project-description p{margin:0 0 1em}
#project-description p:last-child{margin-bottom:0}
#project-description[lang="zh-CN"]{line-height:2}
@media(max-width:650px){.project-actions{gap:16px}#project-label{max-width:42%;font-size:10px}#project-description{font-size:15px;margin-top:24px}.project-actions .languages{gap:6px}}

/* One complete sketch at a time in the rotating homepage preview. */
.sketches .card-visual{display:block;padding:16px;background:#000}
.sketches .card-visual img{width:100%;height:100%;object-fit:contain;background:transparent;transform:none;filter:none}
.sketches:hover .card-visual img{transform:none}
.sketches .card-visual img{transition:opacity .45s ease-in-out}

/* Fade the hero into the same black as the project section. */
.hero-shade{background:linear-gradient(180deg,#0003 0%,transparent 38%,#0b0b0b55 66%,#0b0b0b 100%)}
#flow-mist{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
body.modal-open #flow-mist{visibility:hidden}

/* Paired cards are 99.75% of their original width; released space widens the aisle. */
@media(min-width:651px){.project-row:not(.single){column-gap:calc(0.25% + 27.93px)}}
.project-row.single .card-visual{aspect-ratio:42 / 19}
@media(max-width:650px){
 .project-row:not(.single) .project-card{width:99.75%;margin-inline:auto}
 .project-row.single .card-visual{aspect-ratio:27 / 19}
}
.project-row:not(.single) .card-visual{aspect-ratio:1.61803398875}