@charset "UTF-8";
/* Design direction adapted from OpenDesign editorial/tokens.css and taste-editorial.
   Sources and Apache-2.0 license are preserved in ../references. Layout/code authored for this portfolio. */
:root{--paper:#fbf7f0;--ink:#1f1a16;--muted:#756d63;--accent:#9a5a2f;--line:#d7cfc2;--soft:#eee6d9;--serif:Georgia,"Noto Serif SC","Songti SC","SimSun",serif;--sans:Arial,"PingFang SC","Microsoft YaHei",sans-serif;--mono:"Courier New",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img,video{display:block;max-width:100%}img{height:auto}figure{margin:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}button{color:inherit}::selection{background:#bd8c62;color:#fff}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip{position:absolute;left:20px;top:-80px;background:var(--ink);color:white;padding:12px;z-index:30}.skip:focus{top:12px}.wrap{width:min(1320px,calc(100% - 112px));margin:auto}.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.nav-shell{background:var(--paper);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;font:12px/1.4 var(--mono);letter-spacing:.09em}.brand-mark{width:29px;height:29px;border:1px solid var(--ink);display:grid;place-items:center;font:20px var(--serif)}.nav-links{display:flex;gap:30px;font-size:13px}.nav-links a{padding:10px 0}.nav-links a:hover{color:var(--accent)}.edition{font:10px var(--mono);color:var(--muted);letter-spacing:.15em}.eyebrow{font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.17em;color:var(--accent)}.hero{padding:68px 0 50px}.hero-top{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}.hero h1{font-family:var(--serif);font-size:clamp(44px,4.8vw,70px);line-height:1.32;letter-spacing:-.055em;margin:26px 0}.hero h1 em{font-style:normal;color:var(--accent)}.hero-intro{max-width:425px;color:#665d54;font-size:15px;line-height:2}.hero .button{margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:13px 23px;border:1px solid var(--ink);font-size:13px;background:transparent;transition:background .2s,color .2s}.button:hover{background:var(--ink);color:var(--paper)}.button.dark{background:var(--ink);color:var(--paper)}.button.dark:hover{background:var(--accent);border-color:var(--accent)}.hero-art{position:relative;padding:0 0 22px 30px;isolation:isolate}.hero-art::before{content:"";position:absolute;inset:25px 25px 0 0;background:var(--soft);z-index:-1}.cover-pair{display:grid;grid-template-columns:1.22fr .85fr;gap:12px;align-items:end}.cover-pair .cover-main{aspect-ratio:3/4;object-fit:cover;object-position:center 30%;width:100%}.cover-pair .cover-second{aspect-ratio:3/4;object-fit:cover;width:100%}.cover-note{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0;font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}.hero-bottom{display:flex;justify-content:space-between;gap:35px;align-items:center;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.disciplines{display:flex;gap:24px}.index-head{display:flex;justify-content:space-between;align-items:end;margin:48px 0 28px}.section-title{font:38px/1.3 var(--serif);letter-spacing:-.03em;margin-top:8px}.index-caption{font-size:12px;color:var(--muted)}.work{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center;border-top:1px solid var(--line);padding:44px 0 52px}.work:nth-of-type(even){grid-template-columns:1fr 1.35fr}.work:nth-of-type(even) .work-art{order:2}.work-art{display:block;overflow:hidden;background:var(--soft);position:relative}.work-art img{transition:transform .6s;aspect-ratio:4/3;object-fit:cover;width:100%}.work-art:hover img{transform:scale(1.025)}.work-art .work-collage{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#e4d8c8}.work-collage img{aspect-ratio:4/5;object-fit:cover}.work-art .work-image-wide{aspect-ratio:4/3;object-fit:contain;background:#e9e4dc;padding:16px}.work-no{font:12px var(--mono);color:var(--accent);letter-spacing:.1em}.work h3{font:36px/1.25 var(--serif);margin:17px 0 18px;letter-spacing:-.035em}.work .cn-title{font:15px/1.7 var(--sans);display:block;margin-top:12px;letter-spacing:0}.work p{color:var(--muted);font-size:14px;max-width:430px}.tags{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 28px}.tags span{font-size:11px;border:1px solid var(--line);padding:3px 10px}.text-link{font-size:13px;padding-bottom:5px;border-bottom:1px solid var(--ink);display:inline-flex;gap:42px}.text-link:hover{color:var(--accent);border-color:var(--accent)}.about{background:#eee7dc;padding:70px 0;margin:50px 0 0}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.about h2{font:42px/1.45 var(--serif);margin:16px 0 28px}.about p{color:#5f574e;font-size:14px;max-width:700px}.practice{border-top:1px solid #cec3b3;display:grid;grid-template-columns:45px 1fr;gap:18px;padding:19px 0}.practice:last-child{border-bottom:1px solid #cec3b3}.practice span{font:12px var(--mono);color:var(--accent);padding-top:5px}.practice h3{font-size:16px;margin-bottom:5px}.practice p{font-size:13px}.footer{padding:33px 0;display:flex;justify-content:space-between;gap:30px;align-items:start;font-size:11px;color:var(--muted)}.footer a{border-bottom:1px solid var(--line)}.footer small{display:block;font-size:10px;margin-top:7px}.back{font-size:12px;color:var(--muted);display:inline-flex;gap:10px;margin:36px 0}.case-intro{padding:6px 0 44px;display:grid;grid-template-columns:1.4fr .7fr;gap:80px;align-items:end}.case-intro h1{font:clamp(40px,4.7vw,66px)/1.15 var(--serif);letter-spacing:-.04em;margin:20px 0}.case-intro h1 .chinese{font-family:var(--serif);line-height:1.4}.case-intro .lead{font-size:16px;color:#695f54;max-width:670px}.case-facts{font-size:12px;border-top:1px solid var(--line)}.case-facts div{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}.case-facts dt{color:var(--muted)}.case-facts dd{margin:0}.cover-banner{background:#e6dfd3;overflow:hidden}.cover-banner img{width:100%;max-height:640px;object-fit:cover}.cover-banner.binge img{object-fit:contain;max-height:570px;background:#e8e5df}.caption{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;padding:12px 0}.case-section{padding:68px 0;border-bottom:1px solid var(--line)}.section-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:75px}.section-grid h2{font:34px/1.5 var(--serif);margin:14px 0 22px}.section-grid .intro-copy{color:var(--muted);font-size:14px}.responsibility{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}.responsibility h3{font-size:17px;margin-bottom:10px}.responsibility p{font-size:13px;color:var(--muted)}.responsibility .n{font:12px var(--mono);color:var(--accent);display:block;margin-bottom:14px}.quote-callout{font:22px/1.8 var(--serif);border-left:2px solid var(--accent);padding-left:24px;margin:34px 0}.quote-callout small{display:block;font:11px/1.8 var(--sans);color:var(--muted);margin-top:10px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison figure{background:#eae6df;padding:18px 18px 0}.comparison img{width:100%;height:340px;object-fit:contain}.comparison figcaption{display:flex;justify-content:space-between;gap:8px;padding:16px 0;font-size:11px;color:var(--muted)}.comparison figcaption strong{font:10px var(--mono);color:var(--accent)}.process{margin-top:36px}.process-row{display:grid;grid-template-columns:42px .65fr 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}.process-row .number{font:12px var(--mono);color:var(--accent)}.process-row h3{font:19px/1.6 var(--serif)}.process-row p{font-size:13px;color:var(--muted)}.media-stage{background:#211c18;color:var(--paper);padding:40px;display:grid;grid-template-columns:minmax(190px,.65fr) 1fr;gap:50px;align-items:center}.media-stage video{width:100%;max-height:570px;background:#12100d}.media-stage h3{font:30px/1.45 var(--serif);margin:17px 0}.media-stage p{font-size:13px;color:#c8beb2}.media-stage .eyebrow{color:#c7986b}.media-stage .video-meta{margin-top:25px;font:11px var(--mono);color:#a99e90}.video-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0}.video-tabs button{border:1px solid #6d5f51;background:transparent;color:#d8cfc5;padding:8px 15px;font-size:12px}.video-tabs button.active{background:#f1e8db;color:#211c18;border-color:#f1e8db}.fineprint{font-size:11px!important;color:var(--muted);margin-top:16px;line-height:1.8}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery img{width:100%;height:440px;object-fit:contain;background:#eae4da}.gallery figcaption{font-size:11px;color:var(--muted);padding-top:10px}.image-button{border:0;background:none;padding:0;display:block;width:100%;cursor:zoom-in}.image-button img{transition:filter .2s}.image-button:hover img{filter:brightness(.96)}.wide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide-grid img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#eee9e1}.wide-grid figcaption{padding-top:10px;font-size:11px;color:var(--muted)}.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.phone-grid img{height:280px;width:100%;object-fit:contain;background:#ebe7df}.phone-grid figcaption{font-size:11px;color:var(--muted);padding-top:10px}.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0}.outcome{border-top:1px solid var(--line);padding-top:18px}.outcome strong{display:block;font:40px var(--serif);margin-bottom:12px}.outcome span{font-size:12px;color:var(--muted)}.closing{padding:55px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}.closing h2{font:30px/1.5 var(--serif)}.closing small{font:11px var(--mono);color:var(--accent);display:block;margin-bottom:12px}.lightbox{border:0;background:#191612f5;color:white;max-width:none;max-height:none;width:100vw;height:100dvh;padding:30px;position:fixed;inset:0;margin:0}.lightbox::backdrop{background:#191612}.lightbox-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.lightbox img{max-height:calc(100dvh - 130px);max-width:90vw;object-fit:contain}.lightbox p{font-size:12px;color:#d4c9bc}.close-modal{position:absolute;right:25px;top:20px;background:none;border:1px solid #9b8b78;color:white;font-size:22px;line-height:1;width:43px;height:43px}.reveal{opacity:1;transform:none}.js-motion .reveal.pending{opacity:0;transform:translateY(18px)}.js-motion .reveal{transition:opacity .65s ease,transform .65s ease}.error-page{min-height:65vh;display:grid;place-content:center;text-align:center;gap:25px}
@media(min-width:1600px){.hero h1{font-size:76px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero-top{gap:28px}.hero h1{font-size:48px}.hero-art{padding-left:15px}.work,.work:nth-of-type(even){gap:35px}.work h3{font-size:30px}.about-grid,.case-intro{gap:40px}.section-grid{gap:35px;grid-template-columns:.65fr 1.35fr}.responsibility{gap:18px}.media-stage{gap:30px;padding:28px}.gallery img{height:330px}.case-intro h1{font-size:47px}}
@media(max-width:740px){html{scroll-padding-top:75px}.wrap{width:calc(100% - 36px)}.nav{height:70px;gap:12px}.nav-links{gap:16px;font-size:12px}.brand{font-size:10px;gap:8px}.brand-mark{width:25px;height:25px}.edition{display:none}.hero{padding:37px 0 24px}.hero-top{grid-template-columns:1fr;gap:34px}.hero h1{font-size:46px;margin:20px 0}.hero-intro{font-size:14px;max-width:440px}.hero .button{margin-top:23px}.hero-art{padding:0 0 16px 20px;max-width:580px}.cover-pair .cover-main{aspect-ratio:4/5}.cover-pair .cover-second{aspect-ratio:3/4}.hero-bottom{margin-top:28px;font-size:10px;align-items:start;gap:18px}.disciplines{gap:10px;flex-wrap:wrap;max-width:210px}.index-head{margin-top:35px;align-items:start}.section-title{font-size:30px}.index-caption{font-size:10px;max-width:100px;text-align:right}.work,.work:nth-of-type(even){grid-template-columns:1fr;gap:25px;padding:28px 0 38px}.work:nth-of-type(even) .work-art{order:0}.work h3{font-size:32px;margin:12px 0}.work p{max-width:none}.work .tags{margin:18px 0}.work-art img{aspect-ratio:5/4}.work .work-collage img{aspect-ratio:4/5}.about{padding:42px 0;margin-top:28px}.about-grid{grid-template-columns:1fr;gap:30px}.about h2{font-size:34px;margin:15px 0 20px}.footer{flex-direction:column;gap:20px;padding:28px 0}.back{margin:25px 0}.case-intro{grid-template-columns:1fr;gap:25px;padding-bottom:28px}.case-intro h1{font-size:43px;line-height:1.2;margin:15px 0}.case-intro .lead{font-size:14px}.case-facts{margin:0}.cover-banner img{min-height:230px;object-fit:cover}.caption{font-size:10px;gap:12px}.case-section{padding:40px 0}.section-grid{grid-template-columns:1fr;gap:28px}.section-grid h2{font-size:29px;margin:10px 0 15px}.responsibility{grid-template-columns:1fr;gap:22px}.responsibility .n{margin-bottom:7px}.responsibility h3{font-size:16px}.quote-callout{font-size:20px;margin:25px 0}.comparison{gap:9px}.comparison figure{padding:10px 10px 0}.comparison img{height:230px}.comparison figcaption{display:block;font-size:10px;padding:10px 0}.comparison figcaption strong{display:block;margin-bottom:4px}.process-row{grid-template-columns:27px 1fr;gap:8px 12px;padding:18px 0}.process-row p{grid-column:2}.process-row h3{font-size:18px}.media-stage{padding:22px;grid-template-columns:1fr;gap:24px}.media-stage video{max-height:520px}.media-stage h3{font-size:25px;margin:12px 0}.media-stage .video-meta{margin-top:15px}.video-tabs{margin:20px 0 0;gap:8px}.video-tabs button{font-size:11px;padding:8px 10px}.gallery{gap:10px}.gallery img{height:225px}.gallery figcaption{font-size:10px}.wide-grid{gap:14px;grid-template-columns:1fr}.phone-grid{gap:8px}.phone-grid img{height:190px}.phone-grid figcaption{font-size:10px}.outcomes{gap:16px;margin:25px 0}.outcome strong{font-size:32px}.outcome span{font-size:11px}.closing{padding:36px 0;align-items:start;flex-direction:column}.closing h2{font-size:28px}.lightbox{padding:20px}.lightbox img{max-width:94vw}.close-modal{right:14px;top:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.js-motion .reveal.pending{opacity:1;transform:none}}
@media print{.nav-shell,.button,.text-link,.lightbox,.closing{display:none}.wrap{width:100%}.reveal{opacity:1!important;transform:none!important}.work,.case-section{break-inside:avoid}.hero h1{font-size:44px}body{background:white}}
.asset-breakdown{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;gap:20px;font-size:12px;color:var(--muted)}.asset-breakdown b{font:22px var(--serif);color:var(--ink);margin-right:8px}.outcome small{font:13px var(--sans)}
.cover-pair .cover-main{aspect-ratio:9/16;object-fit:contain}
@media(max-width:740px){.comparison.landscape{grid-template-columns:1fr}.comparison.landscape img{height:auto}.asset-breakdown{grid-template-columns:repeat(2,1fr);gap:16px}.gallery{grid-template-columns:1fr}.gallery img{height:auto;max-height:540px}.phone-grid .image-button{min-height:44px}.video-tabs button{min-height:44px}}
