@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{--ink:#000;--paper:#fff;--serif:"Noto Serif SC",serif;--display:"Playfair Display","Noto Serif SC",serif;--mono:"JetBrains Mono",monospace}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--serif)}
header{height:108px;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 48px}
header>p,header>a:not(.brand){font:11px/1.55 var(--mono);letter-spacing:.06em;color:var(--ink);text-decoration:none}
.brand{font:500 18px/.75 var(--mono);letter-spacing:-1px;color:var(--ink);text-decoration:none}
.brand small{font-size:8px;vertical-align:top}
.landing,.projects,.project-page,.about{width:1152px;margin:auto}
.landing{min-height:660px;padding:36px 0 90px;display:flex;flex-direction:column;justify-content:space-between}
.eyebrow{font:11px var(--mono);letter-spacing:.07em}
.landing h1,.project-heading h1{font:400 7rem/.8 var(--display);letter-spacing:-.075em;margin:0}
.landing h1 i{font-weight:400}
.intro{font-size:20px;line-height:1.5;margin:0}
.projects{border-top:4px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr)}
.project-link{min-height:185px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:20px;color:var(--ink);text-decoration:none;position:relative;display:flex;flex-direction:column;justify-content:end}
.project-link:first-child{grid-column:1/-1;border-left:1px solid var(--ink)}
.project-link:nth-child(even){border-left:1px solid var(--ink)}
.project-link span,.project-link em{font:11px var(--mono);font-style:normal}
.project-link span{position:absolute;top:20px}
.project-link strong{font:400 2.7rem/.95 var(--display);letter-spacing:-.045em;margin-bottom:8px}
.project-link:hover{background:#000;color:#fff}
.about{padding:80px 0 130px;display:grid;grid-template-columns:365px 1fr;gap:110px}
.about aside img{width:365px;filter:grayscale(1);border:1px solid #000;display:block}
.profile-meta{width:365px;font-size:12px;line-height:1.7;margin-top:24px}
.profile-meta .eyebrow{margin:25px 0 7px}
.profile-meta p{margin:0 0 10px}
.about section{max-width:640px;font-size:18px;line-height:1.75}
.about section .eyebrow{margin-top:0}
.about a{color:#000;text-decoration-thickness:1px}
.statement-gap{height:1.75em}
.project-page{padding:48px 0 100px}
.project-heading{margin-bottom:42px}
.project-heading h1{margin:46px 0 24px;font-size:5.7rem}
.subtitle-en{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 11px}
.subtitle-cn{font-size:20px;margin:0}
.flipbook{border-top:4px solid #000;border-bottom:1px solid #000}
.flipbook-toolbar{height:72px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #000;font:11px var(--mono);letter-spacing:.02em}
.flipbook button,.flipbook input{height:34px;background:#fff;border:1px solid #000;border-radius:0;padding:0 11px;font:11px var(--mono)}
.flipbook button{cursor:pointer}
.flipbook button:hover:not(:disabled){background:#000;color:#fff}
.flipbook button:disabled{border-color:#bbb;color:#999;cursor:not-allowed}
.flipbook input{width:54px;margin-left:6px;text-align:center}
.flipbook output{min-width:94px;text-align:center}
.tool-rule{height:34px;border-left:1px solid #000;margin:0 5px}
.pdf-stage{height:760px;background:#f4f4f4;display:grid;place-items:center;overflow:auto;padding:28px;position:relative}
.book-shell{position:relative;display:inline-flex;align-items:center;perspective:1500px;transform-style:preserve-3d}
.pdf-pages{display:flex;justify-content:center;align-items:center;min-height:100%;gap:0;position:relative;isolation:isolate;will-change:transform}
.pdf-pages::before{content:"";position:absolute;z-index:0;left:4px;right:4px;bottom:-5px;height:6px;background:linear-gradient(to bottom,#f7f7f7,#dedede);box-shadow:0 9px 16px rgba(0,0,0,.14),0 2px 2px rgba(0,0,0,.08);pointer-events:none}
.pdf-pages.is-spread{gap:0}
.pdf-pages.is-spread::after{content:"";position:absolute;z-index:2;top:2px;bottom:2px;left:50%;width:4px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(255,255,255,.02) 50%,rgba(0,0,0,.08));opacity:.28;pointer-events:none}
.pdf-pages canvas{display:block;position:relative;z-index:1;background:#fff;box-shadow:0 1px 0 #aaa}
.pdf-pages.turn-forward{transform-origin:left center;animation:page-arrive-forward 280ms cubic-bezier(.22,.76,.25,1)}
.pdf-pages.turn-backward{transform-origin:right center;animation:page-arrive-backward 280ms cubic-bezier(.22,.76,.25,1)}
@keyframes page-arrive-forward{0%{transform:translate3d(7px,0,0) rotateY(-1.2deg) scaleX(.997)}100%{transform:translate3d(0,0,0) rotateY(0) scaleX(1)}}
@keyframes page-arrive-backward{0%{transform:translate3d(-7px,0,0) rotateY(1.2deg) scaleX(.997)}100%{transform:translate3d(0,0,0) rotateY(0) scaleX(1)}}
.page-bend{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none}
.page-bend.turn-forward{transform-origin:left center;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(0,0,0,.02) 65%,rgba(0,0,0,.11) 100%);box-shadow:inset -13px 0 14px -13px rgba(0,0,0,.38);animation:page-bend-forward 580ms cubic-bezier(.22,.76,.25,1)}
.page-bend.turn-backward{transform-origin:right center;background:linear-gradient(90deg,rgba(0,0,0,.11),rgba(0,0,0,.02) 35%,rgba(255,255,255,0));box-shadow:inset 13px 0 14px -13px rgba(0,0,0,.38);animation:page-bend-backward 580ms cubic-bezier(.22,.76,.25,1)}
.book-shell.is-spread .page-bend.turn-forward{left:50%;right:auto;width:30%;transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.11),rgba(0,0,0,.02) 52%,rgba(255,255,255,0));box-shadow:inset 13px 0 14px -13px rgba(0,0,0,.38)}
.book-shell.is-spread .page-bend.turn-backward{right:50%;left:auto;width:30%;transform-origin:right center;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(0,0,0,.02) 48%,rgba(0,0,0,.11));box-shadow:inset -13px 0 14px -13px rgba(0,0,0,.38)}
@keyframes page-bend-forward{0%{opacity:0;transform:skewY(0) scaleX(1)}48%{opacity:.38;transform:skewY(-.28deg) scaleX(.976)}76%{opacity:.14;transform:skewY(-.06deg) scaleX(.996)}100%{opacity:0;transform:skewY(0) scaleX(1)}}
@keyframes page-bend-backward{0%{opacity:0;transform:skewY(0) scaleX(1)}48%{opacity:.38;transform:skewY(.28deg) scaleX(.976)}76%{opacity:.14;transform:skewY(.06deg) scaleX(.996)}100%{opacity:0;transform:skewY(0) scaleX(1)}}
.turning-pages{position:absolute;z-index:5;inset:0;pointer-events:none;transform-style:preserve-3d}
.turning-leaf{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.turning-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 1px 0 #aaa}
.turning-face canvas{display:block;width:100%;height:100%;background:#fff}
.turning-face-back{transform:rotateY(180deg)}
.turning-pages.is-spread .turning-leaf{top:0;bottom:0;width:50%}
.turning-pages.is-spread.turn-forward .turning-leaf{left:50%;right:auto;transform-origin:left center}
.turning-pages.is-spread.turn-backward .turning-leaf{right:50%;left:auto;transform-origin:right center}
.turning-pages:not(.is-spread).turn-forward .turning-leaf{transform-origin:left center}
.turning-pages:not(.is-spread).turn-backward .turning-leaf{transform-origin:right center}
.turning-leaf::after{content:"";position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.turning-pages.turn-forward .turning-leaf::after{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.015) 45%,rgba(255,255,255,.11))}
.turning-pages.turn-backward .turning-leaf::after{background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(0,0,0,.015) 55%,rgba(0,0,0,.16))}
.turning-pages.is-turning.turn-forward .turning-leaf{animation:paper-leaf-forward 580ms cubic-bezier(.22,.76,.25,1) both}
.turning-pages.is-turning.turn-backward .turning-leaf{animation:paper-leaf-backward 580ms cubic-bezier(.22,.76,.25,1) both}
.turning-pages.is-turning .turning-leaf::after{animation:paper-leaf-shade 580ms cubic-bezier(.22,.76,.25,1) both}
@keyframes paper-leaf-forward{0%{transform:translate3d(0,0,0) rotateY(0) skewY(0) scaleX(1)}18%{transform:translate3d(-2px,0,0) rotateY(-16deg) skewY(-.08deg) scaleX(.996)}52%{transform:translate3d(-5px,0,0) rotateY(-84deg) skewY(-.3deg) scaleX(.972)}78%{transform:translate3d(-2px,0,0) rotateY(-142deg) skewY(-.12deg) scaleX(.992)}100%{transform:translate3d(0,0,0) rotateY(-180deg) skewY(0) scaleX(1)}}
@keyframes paper-leaf-backward{0%{transform:translate3d(0,0,0) rotateY(0) skewY(0) scaleX(1)}18%{transform:translate3d(2px,0,0) rotateY(16deg) skewY(.08deg) scaleX(.996)}52%{transform:translate3d(5px,0,0) rotateY(84deg) skewY(.3deg) scaleX(.972)}78%{transform:translate3d(2px,0,0) rotateY(142deg) skewY(.12deg) scaleX(.992)}100%{transform:translate3d(0,0,0) rotateY(180deg) skewY(0) scaleX(1)}}
@keyframes paper-leaf-shade{0%{opacity:0}20%{opacity:.12}52%{opacity:.52}78%{opacity:.18}100%{opacity:0}}.page-turn{position:absolute;z-index:4;top:50%;width:44px;height:60px;transform:translateY(-50%);border:0!important;background:transparent!important;padding:0!important;color:#000!important;font:15px/1 var(--mono)!important;opacity:.28;transition:opacity 100ms ease,transform 100ms ease}
.page-turn:hover:not(:disabled),.page-turn:focus-visible{background:transparent!important;color:#000!important;opacity:.72;transform:translateY(-50%) scale(1.08)}
.page-turn:focus-visible{outline:2px solid #000;outline-offset:2px}
.page-turn:disabled{border:0!important;background:transparent!important;opacity:0;pointer-events:none}
.page-turn-prev{right:calc(100% + 8px)}
.page-turn-next{left:calc(100% + 8px)}
.reader-status{position:absolute;font:12px var(--mono)}
.project-details{display:grid;grid-template-columns:1fr 365px;gap:110px;padding:55px 0 0}
.project-details article{font-size:18px;line-height:1.75}
.project-details article .eyebrow{margin-top:0}
.project-details article.is-empty{visibility:hidden}
.project-details aside{font-size:13px;line-height:1.6}
.project-details aside p{border-top:1px solid #000;margin:0;padding:13px 0}
.project-details aside p+p{margin-top:12px}

/* Home: editorial project navigation */
.landing{min-height:760px;padding:42px 0 112px}
.projects{display:block;border-top:1px solid var(--ink);padding:0 0 210px}
.project-link,.project-link:first-child,.project-link:nth-child(even){min-height:0;border:0;background:transparent;color:var(--ink);padding:0;text-decoration:none}
.project-link:hover{background:transparent;color:var(--ink)}
.projects > .project-link.project-link--about{display:grid;grid-template-columns:132px 1fr;align-items:center;min-height:220px;background:#000;color:#fff;border-bottom:1px solid var(--ink);padding:56px 46px;transition:background-color 360ms ease,color 360ms ease}
.project-link .project-index{position:static!important;display:block;font:17px/1.25 var(--mono);letter-spacing:.07em}
.project-copy strong{display:block;font:400 3.15rem/.92 var(--display);letter-spacing:-.055em;margin:0 0 10px}
.project-copy em{display:block;font:11px/1.5 var(--mono);letter-spacing:.05em;font-style:normal}
.project-link--about .project-copy strong{font-size:2.35rem}.project-link--about .project-copy em{font-size:16px;line-height:1.45}
.project-link--work{position:relative;display:block;border-bottom:1px solid var(--ink);padding:54px 0 176px}
.project-link--work .project-index{margin-bottom:25px}
.project-media{position:relative;display:block;overflow:hidden;margin:0;background:#f0f0f0}
.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.075));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);opacity:0;transition:opacity 380ms ease}
.project-media img{display:block;width:100%;height:auto;filter:grayscale(100%);transform:scale(1);transition:filter 380ms ease,transform 380ms ease;will-change:filter,transform}
.project-media:hover img,.project-link--work:focus-visible .project-media img{filter:grayscale(0);transform:scale(.98)}
.project-media:hover::after,.project-link--work:focus-visible .project-media::after{opacity:1}
.project-link--work:hover .project-copy,.project-link--work:focus-visible .project-copy{transform:translateX(7px)}
.project-link--work .project-copy{margin-top:21px;transition:transform 420ms ease}
.project-link--one .project-media{width:70%}
.project-link--one .project-copy{width:61%;margin-left:17%}
.project-link--two .project-media{width:42%;margin-left:auto}
.project-link--two .project-copy{width:42%;margin-left:auto}
.project-link--three .project-media{width:56%;margin-left:9%}
.project-link--three .project-copy{width:56%;margin-left:9%}
.project-link--four .project-media{width:80%;margin-left:auto}
.project-link--four .project-copy{width:57%;margin-left:6%}
html.has-home-motion .project-link--work .project-media,html.has-home-motion .project-link--work .project-copy{opacity:0;transform:translateY(18px);transition:opacity 620ms ease,transform 620ms ease}
html.has-home-motion .project-link--work .project-copy{transition-delay:90ms}
html.has-home-motion .project-link--work.is-visible .project-media,html.has-home-motion .project-link--work.is-visible .project-copy{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.project-media::after,.project-media img,.project-link--work .project-copy,html.has-home-motion .project-link--work .project-media,html.has-home-motion .project-link--work .project-copy{transition:none!important}}

/* About: preserve the supplied low-saturation colour portrait */
.about aside img{filter:none}

/* Requested home and navigation refinements */
.projects{padding-bottom:72px}

.project-link--about .project-index,.project-link--about .project-copy{color:inherit}
.projects > .project-link.project-link--about:hover,.projects > .project-link.project-link--about:focus-visible{background:#5b5b5b;color:#fff}

.project-link--work .project-copy em{font-size:14px;line-height:1.55}
.project-link--one .project-media{width:60%}
.project-link--two .project-media{width:35%}
.project-link--three .project-media{width:47%}
.project-link--four .project-media{width:68%}
.project-link--one{margin-top:120px;padding-bottom:215px}
.project-link--two{padding-top:82px}
.home-footer{width:1152px;margin:0 auto 92px;background:#000;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:24px 28px;font:11px/1.5 var(--mono);letter-spacing:.05em}
.home-footer span:nth-child(2){text-align:center}
.home-footer a{justify-self:end;color:#fff;text-decoration:none;transition:opacity 180ms ease}
.home-footer a:hover,.home-footer a:focus-visible{opacity:.62}
.about-project-link{display:table;margin:52px 0 0 auto;border:1px solid #000;padding:11px 14px;font:11px var(--mono);letter-spacing:.04em;text-decoration:none}
.about-project-link:hover,.about-project-link:focus-visible{background:#000;color:#fff}
.project-navigation{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-top:1px solid #000;margin-top:86px;padding-top:27px;font:11px var(--mono);letter-spacing:.04em}
.project-navigation a{border:1px solid #000;color:#000;text-decoration:none;padding:11px 14px;transition:background-color 160ms ease,color 160ms ease}
.project-navigation a:hover,.project-navigation a:focus-visible{background:#000;color:#fff}`r`n.project-navigation #next-project{grid-column:2;justify-self:end}

.home-footer{margin:0 auto}