/* Original flat artwork, with each project keeping its own composition. */
:root{--paper:#f6f5f1;--ink:#282824;--muted:#6b6d66;--line:#dbdcd5}
body{background:var(--paper);color:var(--ink)}
.header{background:#f6f5f1f0;border-bottom-color:#dedfd8}
.header nav a,.header nav button{color:#343630}
.hero{padding-top:35px;padding-bottom:39px}.hero-top,.hero-top>span:last-child{font-size:12px;letter-spacing:0;color:#64685f}.hero-line{margin-top:36px}.hero-line>p{font-size:11px;letter-spacing:.025em;color:#666c61}.hero-intro{padding-top:26px}.hero-intro>p{font-size:15px;color:#555c4e}.hero-intro>a{color:#343d2d}
.projects{row-gap:65px;column-gap:32px}.project[data-work=serein],.project[data-work=aura],.project[data-work=field]{grid-column:span 7}.project[data-work=daybreak],.project[data-work=lune],.project[data-work=flow]{grid-column:span 5}
.project[data-work=serein]>.cover,.project[data-work=daybreak]>.cover,.project[data-work=lune]>.cover,.project[data-work=aura]>.cover,.project[data-work=field]>.cover,.project[data-work=flow]>.cover{height:clamp(400px,42vw,650px);aspect-ratio:auto}
.project[data-work=pace]>.cover{aspect-ratio:2.12;height:auto}
.caption h2,.showcase-project .caption h2{font-weight:400;font-size:16px}.caption>span:not(.caption-arrow),.showcase-project .caption>span:not(.caption-arrow){font-size:11px;color:#777a70}.caption h2::before{color:#8c9181}
.project .cover-action{font-size:11px;border:1px solid #d7dbd1;background:#f7f8f2f0}
.authored-cover{position:relative;display:block;overflow:hidden;container-type:inline-size;text-align:left;color:#272a24;font-family:var(--font-ui);line-height:1.4}
.authored-cover .art-composition{position:absolute;inset:0;overflow:hidden}
.art-registration{position:absolute;left:7%;right:7%;top:6%;display:flex;justify-content:space-between;align-items:flex-start;font-size:1.45cqw;line-height:1.5;z-index:2}.art-registration>span:last-child{text-align:right}
.art-composition strong,.art-composition b{font-weight:500}
/* Qingxu: a brand specimen and the actual information face of a label. */
.serein-art{background:#dce5e7;color:#283a40}.serein-name{position:absolute;left:7%;top:24%;display:flex;flex-direction:column;gap:2cqw}.serein-name>strong{font-size:12cqw;letter-spacing:-.04em;line-height:1.15;font-weight:400}.serein-name>span{font-size:1.8cqw;letter-spacing:.08em}
.serein-label{position:absolute;left:50%;top:16%;width:42%;height:70%;padding:4cqw 3.2cqw;background:#f9f9f3;display:flex;flex-direction:column;border:1px solid #c3ced0}.serein-series{font-size:1.4cqw;letter-spacing:.08em;line-height:1.4}.serein-label>strong{font-size:18cqw;font-weight:300;letter-spacing:-.08em;margin:auto 0;line-height:1.1}.serein-label-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1cqw;font-size:1.35cqw;line-height:1.7}.serein-label-foot>b{font-size:4.4cqw;font-weight:400;line-height:1}.serein-label-foot>b>span{display:block;font-size:1.2cqw;text-align:right;margin-top:.6cqw}.serein-label-rule{height:1.2cqw;background:#7f9da6;margin-top:2.4cqw}.serein-side{position:absolute;left:7%;bottom:16%;display:flex;flex-direction:column;gap:1.5cqw;font-size:1.4cqw}.serein-colour{position:absolute;left:7%;right:7%;bottom:6%;display:flex;align-items:center;gap:.6cqw}.serein-colour i{display:block;height:1cqw;width:5cqw;background:#31494e}.serein-colour i:nth-child(2){background:#809da5}.serein-colour i:nth-child(3){background:#b5c9cf}.serein-colour>span{font-size:1.2cqw;margin-left:auto}
/* Zaoshan: one label structure, three roast colours. */
.coffee-art{background:#e66837;color:#302226}.coffee-art .art-registration{font-size:1.8cqw}.coffee-ticket{position:absolute;left:9%;right:9%;top:16%;bottom:28%;background:#f8e9ca;padding:5cqw 4.5cqw;display:flex;flex-direction:column;border:1px solid #9f3e2460}.coffee-ticket-top{display:flex;justify-content:space-between;font-size:1.7cqw;line-height:1.4}.coffee-ticket-top>span:last-child{text-align:right}.coffee-ticket>strong{font-size:24cqw;line-height:1.1;letter-spacing:-.06em;font-weight:800;margin:auto 0}.coffee-ticket-bottom{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid #4c332e;padding-top:2.2cqw;font-size:3.1cqw}.coffee-ticket-bottom small{display:block;font-size:1.35cqw;margin-top:.8cqw;letter-spacing:.04em}.coffee-ticket-bottom>b{font-size:7cqw;font-weight:400;line-height:1}.coffee-ticket-bottom>b>small{display:inline;font-size:2.5cqw;margin-left:.5cqw}.coffee-strip{position:absolute;left:9%;right:9%;bottom:12%;height:12%;display:flex}.coffee-strip>span{width:33.333%;padding:2.5cqw 2cqw;font-size:2.4cqw;display:flex;flex-direction:column;justify-content:space-between;background:#f3ddba}.coffee-strip>span:nth-child(2){background:#b4442d;color:#f8e7cc}.coffee-strip>span:nth-child(3){background:#3a2530;color:#f8e7cc}.coffee-strip i{font-size:1.25cqw;font-style:normal;white-space:nowrap}.coffee-foot{position:absolute;left:9%;right:9%;bottom:5%;display:flex;flex-direction:column;gap:.6cqw;font-size:1.5cqw}.coffee-foot>span:last-child{font-size:1.2cqw;letter-spacing:.06em}
/* Xiangye: type and direction, without a generated model or scene. */
.running-art{background:#212725;color:#f3f0dc}.running-art .art-registration{left:4.5%;right:4.5%;top:7%;font-size:.9cqw}.running-type{position:absolute;left:4%;top:19%;display:flex;flex-direction:column;line-height:.94;z-index:1}.running-type>strong{font-size:14cqw;letter-spacing:-.09em;font-weight:800;line-height:1}.running-type>strong:last-child{margin-left:19cqw}.running-arrow{position:absolute;right:3%;top:19%;height:66%;width:39%;color:#f3a03b;overflow:visible}.running-foot{position:absolute;left:4.5%;right:4.5%;bottom:7%;display:flex;justify-content:space-between;align-items:baseline;font-size:.9cqw}.running-foot>span:first-child{font-size:1.5cqw}.running-foot>span:last-child{font-size:3.4cqw;line-height:1}
/* Heyan: menu hierarchy, presented as two flat printed surfaces. */
.menu-art{background:#612a36;color:#eedbc3}.menu-art .art-registration{font-size:1.7cqw}.menu-sign{position:absolute;left:8%;top:20%;bottom:10%;width:24%;display:flex;flex-direction:column;justify-content:space-between}.menu-sign>strong{font-family:var(--font-ui);font-size:16cqw;font-weight:400;line-height:1.18}.menu-sign>span{font-size:1.9cqw;line-height:1.9;letter-spacing:.1em}.menu-paper{position:absolute;left:39%;right:7%;top:16%;bottom:9%;padding:3.5cqw;background:#f3ead7;color:#5b2832;display:flex;flex-direction:column}.menu-paper-top{display:flex;justify-content:space-between;font-size:1.6cqw;padding-bottom:2cqw;border-bottom:1px solid #b8a38b}.menu-paper-top>span:last-child{font-family:var(--font-ui);font-size:4cqw;line-height:1}.menu-paper h3{font-family:var(--font-ui);font-size:5.5cqw;letter-spacing:.04em;line-height:1.4;margin:4cqw 0}.menu-course{padding:2cqw 0;display:flex;flex-direction:column;gap:.6cqw}.menu-course>span{font-size:1.4cqw;color:#8b6e69}.menu-course>strong{font-size:3.2cqw;font-weight:400;letter-spacing:.05em}.menu-course>small{font-size:1.02cqw;letter-spacing:.04em}.menu-paper-bottom{display:flex;justify-content:space-between;font-size:1.15cqw;margin-top:auto;border-top:1px solid #b8a38b;padding-top:2cqw}
/* Shanyejian: a flat spread, with an original line drawing. */
.book-art{background:#d0d0c1;color:#252f27}.book-art .art-registration{font-size:1.35cqw}.book-spread{position:absolute;left:7%;right:7%;top:17%;bottom:11%;display:grid;grid-template-columns:1fr 1fr;background:#f4f0e5;border:1px solid #b4b7a7}.book-left,.book-right{position:relative;overflow:hidden;padding:3cqw}.book-left{border-right:1px solid #c3c6b8}.book-running-head{display:block;font-size:1.1cqw;letter-spacing:.03em}.book-left svg{position:absolute;left:-4%;top:17%;width:108%;height:74%;color:#5f705d}.book-folio{position:absolute;bottom:3cqw;left:3cqw;font-size:1.1cqw}.book-right>strong{position:absolute;left:3cqw;top:15%;font-family:var(--font-ui);font-size:10.7cqw;font-weight:400;line-height:1.02}.book-right>p{position:absolute;right:3.2cqw;bottom:13%;font-size:1.35cqw;line-height:1.9;writing-mode:vertical-rl;letter-spacing:.06em;margin:0}.book-right .book-folio{left:auto;right:3cqw}
.art-sheet{margin:0 6% 12px}.art-sheet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px;font-size:12px;color:#686e61}.art-sheet-toolbar button{font-size:12px;color:#4d6240;padding:6px 0}.art-sheet-toolbar button[aria-pressed=true]{color:#284e9f}.art-sheet>.authored-cover{width:100%;height:auto;aspect-ratio:1.7}.art-sheet>.design-pace{aspect-ratio:2.12}.art-sheet>.design-lune{aspect-ratio:1.3}.art-sheet>.design-daybreak{aspect-ratio:1.25}.art-guides{position:absolute;inset:7%;z-index:4;pointer-events:none;opacity:0;border:1px solid #2c68ef80;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#2c68ef60 calc(25% - 1px),#2c68ef60 25%),linear-gradient(transparent calc(50% - .5px),#2c68ef80 calc(50% - .5px),#2c68ef80 calc(50% + .5px),transparent calc(50% + .5px));transition:opacity .2s}.is-guided .art-guides{opacity:1}.art-sheet .cover-action{display:none}.render-reference{margin:0 6% 30px;border-top:1px solid #d6dace;border-bottom:1px solid #d6dace}.render-reference summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:15px;padding:19px 0;font-size:13px;color:#4d5b41}.render-reference summary::-webkit-details-marker{display:none}.render-reference summary>span{font-size:11px;color:#7e8872}.render-reference summary>i{margin-left:auto;font-style:normal;font-size:17px}.render-reference[open] summary>i{transform:rotate(45deg)}.render-reference img{display:block;width:100%;height:auto}.render-reference>p{font-size:12px;line-height:1.8;color:#6c795f;margin:16px 0 20px}
.about-content>h2{font-weight:400;letter-spacing:0}.about-content>h2>span{color:#757d6c}.about-content>p{color:#626b58}.about-practice{gap:0 18px}.about-practice>span{padding:0;border:0;font-size:12px;color:#777f6c}.about-practice>span+span::before{content:'/';color:#a3a995;margin-right:18px}.about-portrait{padding:0;border:0;background:transparent}.about-portrait>figcaption{padding-top:12px}.contact-dialog h2{font-weight:400}.contact-dialog>.small-label{letter-spacing:0}.contact-block .contact-mail{letter-spacing:-.025em}
.case-context{border-bottom:0}.case-context h3{font-weight:400}.detail-head h2{font-weight:400}.case-meta dt{letter-spacing:0}.case-overline{letter-spacing:0}.index-hint{color:#727b65}
@media(max-width:1100px){.projects{column-gap:24px;row-gap:51px}.project[data-work=serein]>.cover,.project[data-work=daybreak]>.cover,.project[data-work=lune]>.cover,.project[data-work=aura]>.cover,.project[data-work=field]>.cover,.project[data-work=flow]>.cover{height:43vw;min-height:300px}.menu-course{padding:1.8cqw 0}.menu-paper h3{margin:3cqw 0}.art-sheet>.authored-cover{aspect-ratio:1.4}.art-sheet>.design-pace{aspect-ratio:2.12}}
@media(max-width:760px){.hero{padding-top:27px;padding-bottom:30px}.hero-top{flex-direction:row;gap:12px}.hero-top,.hero-top>span:last-child{font-size:11px}.hero-line{margin-top:28px}.hero-intro{padding-top:23px}.hero-intro>p{font-size:13px}.hero-intro>a{font-size:12px;gap:10px}.projects{row-gap:38px}.project[data-work=serein],.project[data-work=daybreak],.project[data-work=lune],.project[data-work=aura],.project[data-work=field],.project[data-work=flow]{grid-column:1/-1}.project[data-work=serein]>.cover,.project[data-work=daybreak]>.cover,.project[data-work=lune]>.cover,.project[data-work=aura]>.cover,.project[data-work=field]>.cover,.project[data-work=flow]>.cover{height:auto;min-height:0;aspect-ratio:1.05}.project[data-work=daybreak]>.cover{aspect-ratio:.98}.project[data-work=lune]>.cover{aspect-ratio:.94}.project[data-work=pace]>.cover{aspect-ratio:1.05}.caption h2,.showcase-project .caption h2{font-size:15px}.caption>span:not(.caption-arrow),.showcase-project .caption>span:not(.caption-arrow){font-size:11px}.art-registration{font-size:1.9cqw}.serein-name{top:26%}.serein-side{font-size:1.8cqw}.serein-name>span{font-size:2cqw}.serein-label-foot{font-size:1.7cqw}.serein-series{font-size:1.8cqw}.coffee-art .art-registration{font-size:1.9cqw}.coffee-ticket>strong{font-size:25cqw}.coffee-ticket{padding:5cqw;bottom:28%}.coffee-ticket-top{font-size:1.9cqw}.coffee-ticket-bottom{font-size:3.7cqw}.coffee-strip i{font-size:1.6cqw}.coffee-foot{font-size:1.8cqw}.coffee-foot>span:last-child{font-size:1.5cqw}.running-art .art-registration{font-size:1.9cqw;top:7%;left:7%;right:7%}.running-type{top:21%;left:5%}.running-type>strong{font-size:25cqw}.running-type>strong:last-child{margin-left:18cqw}.running-arrow{top:48%;right:9%;width:40%;height:33%;opacity:1}.running-foot{left:7%;right:7%;font-size:1.65cqw;flex-wrap:wrap;gap:2cqw;align-items:center}.running-foot>span:first-child{font-size:2.7cqw}.running-foot>span:last-child{font-size:5cqw}.running-foot>span:nth-child(2){display:none}.menu-art .art-registration{font-size:1.9cqw}.menu-paper{padding:4cqw;left:37%;right:7%;bottom:8%}.menu-sign{left:7%;top:23%}.menu-sign>strong{font-size:17cqw}.menu-sign>span{font-size:2cqw}.menu-paper h3{font-size:6cqw;margin:5cqw 0}.menu-paper-top{font-size:2cqw}.menu-course{padding:3cqw 0;gap:1.2cqw}.menu-course>span{font-size:1.9cqw}.menu-course>strong{font-size:4cqw}.menu-course>small{font-size:1.2cqw}.menu-paper-bottom{font-size:1.5cqw}.book-art .art-registration{font-size:1.8cqw}.book-spread{left:6%;right:6%;top:18%;bottom:13%}.book-running-head,.book-folio{font-size:1.55cqw}.book-right>strong{font-size:14cqw;top:18%}.book-right>p{font-size:1.85cqw;bottom:14%;right:4cqw}.art-sheet{margin:0 23px 12px}.art-sheet-toolbar{font-size:11px;gap:12px;margin-bottom:11px}.art-sheet-toolbar button{font-size:11px}.art-sheet>.authored-cover,.art-sheet>.design-pace{aspect-ratio:1.05}.art-sheet>.design-lune{aspect-ratio:.94}.art-sheet>.design-daybreak{aspect-ratio:.98}.render-reference{margin:0 23px 25px}.render-reference summary{font-size:12px;gap:9px;flex-wrap:wrap}.render-reference summary>span{font-size:10px}.render-reference>p{font-size:11px}.about-practice{gap:8px 16px}.about-practice>span{font-size:11px}.about-practice>span+span::before{display:none}.about-content>h2{font-size:28px}.about-content>p{font-size:15px}.about-portrait small{font-size:8px}}
.index-artwork.authored-cover{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.art-sheet>.design-daybreak,.art-sheet>.design-lune{aspect-ratio:.98;max-width:700px;margin-inline:auto}
.projects{--flat-height:clamp(400px,42vw,650px);--flat-aspect:auto}
.projects .project>.cover.authored-cover[data-open],.projects .project[data-work=aura]>.cover.image-cover[data-open],.projects .project[data-work=flow]>.cover.flow-cover[data-open]{height:var(--flat-height);aspect-ratio:var(--flat-aspect);min-height:0}
.project[data-work=pace]{--flat-height:auto;--flat-aspect:2.12}
#index-open:has(.design-daybreak),#index-open:has(.design-lune){height:auto;aspect-ratio:.98}
@media(max-width:1100px){.projects{--flat-height:43vw}}
@media(max-width:760px){.projects{--flat-height:auto;--flat-aspect:1.05}.project[data-work=pace]{--flat-aspect:1.05}.project[data-work=daybreak]{--flat-aspect:.98}.project[data-work=lune]{--flat-aspect:.94}}
@media(max-width:760px){.menu-paper h3{margin:3.2cqw 0}.menu-course{padding:1.8cqw 0;gap:.7cqw}}
@media(prefers-reduced-motion:reduce){.art-guides{transition:none}}