.drawing-panel{padding:0;color:#171817;background:#eae8e1;scroll-behavior:smooth}
.drawing-panel::before{display:none}
.drawing-archive{padding:0 clamp(20px,3.6vw,64px)}
.drawing-intro{position:relative;display:flex;flex-direction:column;min-height:0;padding-top:58px;border-bottom:1px solid #aaa9a0}
.drawing-intro-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:35px;align-items:end}
.drawing-kicker{display:block;margin-bottom:18px;font:18px var(--serif)}
.drawing-intro h2{margin:0;font:900 clamp(82px,11vw,185px)/.8 var(--sans);letter-spacing:-.09em}
.drawing-intro h2 em{color:#b44d2c;font-style:normal}
.drawing-intro-main>p{max-width:340px;margin:0 0 10px auto;font:18px/1.75 var(--serif)}
.drawing-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;padding-bottom:28px}
.drawing-jump button{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid #aaa9a0;border-right:0;background:rgba(255,255,255,.2);text-align:left;font:19px var(--serif);transition:color .25s,background .25s,border-color .25s}
.drawing-jump button:last-child{border-right:1px solid #aaa9a0}
.drawing-jump button::before{content:attr(data-index);align-self:flex-start;color:#8a8b83;font:10px var(--mono)}
.drawing-jump button::after{content:'↗';margin-left:auto;font:18px var(--sans)}
.drawing-jump button:hover,.drawing-jump button:focus-visible{color:#a94427;background:#f6f4ed;border-color:#a94427}
.drawing-group{scroll-margin-top:12px;padding-top:64px}
.drawing-group-heading{display:grid;grid-template-columns:1fr 260px;gap:30px;align-items:end;padding-bottom:22px;border-bottom:1px solid #171817}
.drawing-group-heading h3{margin:0;font:400 clamp(46px,5.1vw,78px)/1.1 var(--serif);letter-spacing:-.055em}
.drawing-group-heading h3 span{display:block;margin-top:4px;color:#77786f;font-size:.52em;letter-spacing:0}
.drawing-group-heading>p{max-width:260px;margin:0;font:14px/1.75 var(--sans)}
.drawing-case,.drawing-case-dark,.drawing-case-warm{margin:0;padding:64px 0 74px;border:0;border-bottom:1px solid #c0beb4;color:inherit;background:transparent}
.drawing-case-copy{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:30px;align-items:start;margin-bottom:26px}
.drawing-case-copy h4{margin:0;font:400 clamp(35px,3.4vw,55px)/1.14 var(--serif);letter-spacing:-.06em}
.drawing-case-copy p{max-width:650px;margin:0;font:15px/1.85 var(--sans)}
.drawing-media-pair,.drawing-pattern-list>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.drawing-media-pair figure,.drawing-pattern-list figure,.drawing-art-grid figure,.drawing-sketch-grid figure,.drawing-support{margin:0;min-width:0}
.drawing-archive figure>img,.drawing-archive figure video{display:block;width:100%;height:auto;max-height:none;object-fit:initial;background:none}
.drawing-support{margin:0 0 20px}
.drawing-archive .drawing-support img{width:min(1040px,100%);height:auto;margin:0 auto}
.drawing-dunhuang-layout{display:grid;grid-template-columns:minmax(0,1.43fr) minmax(0,1fr);gap:16px;align-items:stretch}
.drawing-case-dunhuang .drawing-support{margin:0}
.drawing-case-dunhuang .drawing-support img{width:100%;height:auto;margin:0}
.drawing-dunhuang-side{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:0}
.drawing-dunhuang-side figure{min-height:0;margin:0;overflow:hidden}
.drawing-dunhuang-side figure>img,.drawing-dunhuang-side .process-frame{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.drawing-pattern-list{display:grid;gap:50px}
.drawing-pattern-list>div{padding:0;border:0}
.drawing-art-grid,.drawing-sketch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.drawing-case-commercial .drawing-art-grid{align-items:stretch}
.drawing-case-commercial .drawing-art-grid figure{aspect-ratio:3/4;overflow:hidden}
.drawing-case-commercial .drawing-art-grid figure img{width:100%;height:100%;object-fit:cover;object-position:center top}
.drawing-case-commercial .drawing-art-grid figure a{display:block;width:100%;height:100%}
.drawing-case-sketch .drawing-sketch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.drawing-art-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.drawing-single-art{width:min(680px,100%);margin:0 auto}
.process-frame{position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.drawing-case-warm .process-frame{aspect-ratio:5/4}
.drawing-pattern-list>div:first-child .process-frame{aspect-ratio:170/81}
.process-frame video{width:100%;height:100%!important;object-fit:cover!important;background:transparent!important}
.process-play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;transition:opacity .2s}
.process-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.process-play span{position:relative;z-index:1;display:grid;place-items:center;width:74px;height:74px;padding-left:4px;border-radius:50%;color:#171817;background:rgba(245,243,237,.93);font:25px var(--sans);box-shadow:0 5px 25px rgba(0,0,0,.18);transition:transform .2s,background .2s}
.process-play:hover span,.process-play:focus-visible span{transform:scale(1.1);background:#fff}
.process-frame.is-playing .process-play{opacity:0;pointer-events:none}
.drawing-outro{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0;padding:90px 0 100px;border:0;color:inherit;background:transparent}
.drawing-outro p{margin:0;font:400 clamp(29px,3.8vw,58px)/1.35 var(--serif)}
.drawing-outro button{min-width:170px;height:50px;padding:0 15px;border:1px solid #171817;color:inherit;background:none;font:12px var(--sans)}
.drawing-outro button:hover{color:#f4f2e8;background:#171817}
@media(max-width:900px){
 .drawing-panel{padding:0}
 .drawing-intro h2{font-size:clamp(77px,12vw,125px)}
 .drawing-case-copy{grid-template-columns:1fr 1.4fr}
 .drawing-art-grid,.drawing-sketch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .drawing-case-sketch .drawing-sketch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
 .drawing-archive{padding:0 18px}
 .drawing-intro{min-height:0;padding-top:38px}
 .drawing-intro-main{display:block}
 .drawing-intro h2{font-size:clamp(68px,16vw,104px)}
 .drawing-intro-main>p{max-width:300px;margin:33px 0 0;font-size:15px}
 .drawing-jump{gap:0;margin-top:34px;padding-bottom:22px}
 .drawing-jump button{min-height:66px;display:block;padding:10px 8px;font-size:12px}
 .drawing-jump button::before{display:block;margin-bottom:6px}
 .drawing-jump button::after{display:none}
 .drawing-group{padding-top:60px}
 .drawing-group-heading{display:block}
 .drawing-group-heading h3{font-size:43px}
 .drawing-group-heading>p{margin-top:17px;font-size:13px}
 .drawing-case,.drawing-case-dark,.drawing-case-warm{padding:43px 0 50px}
 .drawing-case-copy{display:block;margin-bottom:23px}
 .drawing-case-copy h4{font-size:38px}
 .drawing-case-copy p{margin-top:16px;font-size:13px}
 .drawing-media-pair,.drawing-pattern-list>div{display:block}
 .drawing-dunhuang-layout,.drawing-dunhuang-side{display:block}
 .drawing-dunhuang-side{margin-top:12px}
 .drawing-dunhuang-side figure+figure{margin-top:12px}
 .drawing-dunhuang-side figure>img{height:auto;object-fit:initial}
 .drawing-dunhuang-side .process-frame{height:auto;aspect-ratio:1}
 .drawing-media-pair figure+figure,.drawing-pattern-list figure+figure{margin-top:14px}
 .drawing-pattern-list{gap:35px}
 .drawing-art-grid,.drawing-sketch-grid{gap:12px}
 .drawing-case-sketch .drawing-sketch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .drawing-outro{display:block;padding:65px 0 80px}
 .drawing-outro p{font-size:33px}
 .drawing-outro button{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){.drawing-panel{scroll-behavior:auto}}

/* Shared editorial layout for the work folders. */
.ambient-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;--ambient-x:50%;--ambient-y:50%}
.ambient-field::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 240px at var(--ambient-x) var(--ambient-y),rgba(207,255,56,.12),transparent 72%);opacity:.3;transition:opacity .4s}
.ambient-field.is-tracking::before{opacity:1}
.ambient-field svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.ambient-field path{stroke:rgba(185,214,199,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:8 18;animation:ambientCurrent 23s linear infinite}
.ambient-field path:nth-child(2){stroke:rgba(207,255,56,.3);stroke-dasharray:2 21;animation-duration:31s;animation-direction:reverse}
.ambient-field path:nth-child(3){stroke:rgba(98,182,204,.22);stroke-dasharray:3 25;animation-duration:28s}
.ambient-field path:nth-child(4){stroke:rgba(207,255,56,.18);stroke-dasharray:14 27;animation-duration:37s;animation-direction:reverse}
.ambient-glow{position:absolute;width:370px;height:370px;border-radius:50%;filter:blur(42px);opacity:.5;mix-blend-mode:screen}
.ambient-glow-one{left:-180px;top:8%;background:radial-gradient(circle,rgba(70,111,128,.2),transparent 70%);animation:ambientFloatOne 15s ease-in-out infinite alternate}
.ambient-glow-two{right:-180px;bottom:7%;background:radial-gradient(circle,rgba(175,105,70,.17),transparent 70%);animation:ambientFloatTwo 18s ease-in-out infinite alternate}
.ambient-pointer{position:absolute;left:var(--ambient-x);top:var(--ambient-y);width:12px;height:12px;border:1px solid rgba(207,255,56,.8);border-radius:50%;box-shadow:0 0 18px rgba(207,255,56,.35);opacity:0;transform:translate(-50%,-50%);transition:opacity .3s,width .35s,height .35s}
.ambient-field.is-tracking .ambient-pointer{opacity:1}
.ambient-ripple{position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:24px;height:24px;border:1px solid rgba(207,255,56,.7);border-radius:50%;transform:translate(-50%,-50%) scale(.4);animation:ambientRipple 1.15s ease-out forwards}
@keyframes ambientCurrent{to{stroke-dashoffset:-520}}
@keyframes ambientFloatOne{to{transform:translate(100px,160px) scale(1.35)}}
@keyframes ambientFloatTwo{to{transform:translate(-90px,-190px) scale(1.28)}}
@keyframes ambientRipple{to{opacity:0;transform:translate(-50%,-50%) scale(8)}}
.editorial-panel{padding:0;color:#171817;background:#eae8e1;scroll-behavior:smooth}
.editorial-panel::before{display:none}
.editorial-panel.ui-panel{background:#e8e6e1}
.editorial-panel.web-panel{background:#e8e6e1}
.editorial-panel.poster-panel{background:#e8e6e1}
.editorial-intro{padding:68px 0 42px;border-bottom:1px solid #aaa9a0}
.editorial-kicker{display:block;margin-bottom:24px;font:16px var(--serif)}
.editorial-intro-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);align-items:end;gap:35px}
.editorial-intro h2{margin:0;font:900 clamp(82px,11vw,180px)/.78 var(--sans);letter-spacing:-.09em}
.editorial-intro-main>p{max-width:350px;margin:0 0 6px auto;font:18px/1.7 var(--serif)}
.editorial-case{padding:64px 0 74px;border-bottom:1px solid #bdbbb2}
.editorial-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.editorial-media figure,.editorial-case>figure{min-width:0;margin:0}
.editorial-panel figure img{width:100%;height:auto;display:block}
.editorial-media-asymmetric{grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr)}
.editorial-media-feature{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.editorial-media-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.editorial-case-wide>figure img{max-width:100%}
.editorial-web-media{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:stretch}
.editorial-web-media>a{min-width:0;display:flex;flex-direction:column;gap:12px}
.editorial-web-media figure{height:clamp(350px,43vw,570px);overflow:hidden;background:#dddcd5}
.editorial-web-media figure img{height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.editorial-web-media>a:first-child figure img{object-fit:cover}
.editorial-web-media>a:hover img{transform:scale(1.035)}
.editorial-web-media>a span{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #77776f;font:11px var(--mono);letter-spacing:.06em}
.editorial-web-media>a span::after{content:'↗';font-size:18px}
@media(max-width:900px){
 .editorial-panel{padding:0}
 .editorial-intro h2{font-size:clamp(80px,12vw,126px)}
 .editorial-web-media figure{height:420px}
}
@media(max-width:620px){
 .editorial-intro{padding:42px 0 28px}
 .editorial-kicker{margin-bottom:18px;font-size:14px}
 .editorial-intro-main{display:block}
 .editorial-intro h2{font-size:clamp(68px,16vw,104px)}
 .editorial-intro-main>p{margin:28px 0 0;font-size:15px}
 .editorial-case{padding:44px 0 50px}
 .editorial-media,.editorial-media-asymmetric,.editorial-media-feature,.editorial-web-media{grid-template-columns:1fr}
 .editorial-media-three{gap:7px}
 .editorial-media-three img{height:auto!important}
 .editorial-web-media{gap:27px}
 .editorial-web-media figure{height:250px}
 .editorial-web-media>a:nth-child(2) figure{height:350px}
}
@media(max-width:900px){.ambient-field{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-field path,.ambient-glow{animation:none}.editorial-panel{scroll-behavior:auto}}
html{overflow-x:clip}
.workspace{overflow:clip}

/* Tactile file tabs. */
@media(min-width:901px){
 .folder-tabs{right:-86px;top:20px;width:88px;gap:5px}
 .folder-tabs .folder-tab{position:relative;width:88px;height:97px;gap:6px;border:1px solid #777a75;border-left:3px solid var(--tab-color,#a5a8a3);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--tab-color) 19%,#f0efe9);color:#303432;box-shadow:4px 5px 0 rgba(0,0,0,.2);font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s}
 .folder-tabs .folder-tab span{color:#8b918b;font-size:9px}
 .folder-tabs .folder-tab:hover{transform:translateX(8px);background:color-mix(in srgb,var(--tab-color) 32%,#fffef8);color:#111}
 .folder-tabs .folder-tab.is-active{transform:translateX(11px);background:color-mix(in srgb,var(--tab-color) 35%,#f7f5ee);color:#101412;box-shadow:inset 5px 0 0 var(--tab-color),6px 9px 0 rgba(0,0,0,.25)}
 .folder-tabs .folder-tab.is-active span{color:#475342}
}
.folder-tabs .folder-tab:nth-child(1){--tab-color:#b8beb7}
.folder-tabs .folder-tab:nth-child(2){--tab-color:#b7acd9}
.folder-tabs .folder-tab:nth-child(3){--tab-color:#99bdcc}
.folder-tabs .folder-tab:nth-child(4){--tab-color:#cc9c85}
.folder-tabs .folder-tab:nth-child(5){--tab-color:#aab99b}
.folder-tabs .folder-tab:nth-child(6){--tab-color:#d09aae}
.folder-tabs .folder-tab:nth-child(7){--tab-color:#c8ac7c}
.folder-tabs .folder-tab:nth-child(8){--tab-color:#9cb5ad}
@media(min-width:901px) and (max-height:1050px){
 .folder-tabs .folder-tab{height:74px;gap:3px;writing-mode:horizontal-tb;font-size:11px}
}
@media(max-width:900px){
 .folder-tabs{gap:4px}
 .folder-tabs .folder-tab{border:1px solid #9a9b95;border-bottom:0;border-radius:9px 9px 0 0;background:#e9e8e1;color:#3c4140;box-shadow:inset 0 3px 0 var(--tab-color);font-size:11px}
 .folder-tabs .folder-tab.is-active{background:#f7f5ee;box-shadow:inset 0 4px 0 var(--tab-color)}
}
@media(max-width:620px){
 .folder-tabs{display:flex;grid-template-columns:none;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 .folder-tabs .folder-tab{flex:0 0 auto;min-width:69px;width:auto;height:49px;display:flex;flex-direction:column;gap:1px;padding:5px 8px;letter-spacing:0;font-size:10px;writing-mode:horizontal-tb}
 .folder-tabs .folder-tab span{font-size:7px}
}
.portfolio-cover-index{grid-template-columns:repeat(4,auto)}
@media(max-width:900px){.portfolio-cover-index{grid-template-columns:repeat(3,auto)}}
@media(max-width:620px){.portfolio-cover-index{grid-template-columns:repeat(3,1fr)}}

/* Memo project overview and complete screen flows. */
.memo-board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start}
.memo-board-grid figure,.memo-screen-boards figure{min-width:0;margin:0;padding:0;overflow:hidden}
.memo-board-grid img,.memo-screen-boards img{display:block;width:100%;height:auto}
.memo-screen-heading{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-top:64px;padding:20px 0 24px;border-top:1px solid #aaa9a0}
.memo-screen-heading h5{margin:0;font:400 clamp(25px,2.8vw,40px)/1.2 var(--serif)}
.memo-screen-heading p{max-width:380px;margin:0 0 4px auto;font:14px/1.7 var(--sans)}
.memo-screen-boards{display:grid;gap:24px}
.memo-screen-boards a{display:block;cursor:zoom-in;background:#dcd9df}
.memo-screen-boards a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.memo-screen-boards a:hover img{filter:contrast(1.025)}
.memo-board-caption{display:flex;justify-content:space-between;gap:16px;margin:0;padding:10px 0 0;color:#5c5b59;font:11px/1.5 var(--sans);letter-spacing:.04em}

/* SuitU: two paired rows of the four source boards. */
.dressup-case .dressup-flow-grid figure{min-width:0;margin:0}
.dressup-case a{display:block;cursor:zoom-in;background:#393939}
.dressup-case a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.dressup-case img{display:block;width:100%;height:auto;transition:filter .25s}
.dressup-case a:hover img{filter:saturate(1.12)}
.dressup-case figcaption{padding:13px 0 0;color:#55544f;font:13px/1.5 var(--sans)}
.dressup-flow-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:34px 16px;align-items:start}
.dressup-flow-grid a{display:block;overflow:hidden}
.ui-panel .dressup-flow-grid figure img{width:100%;height:auto}

/* Shujin app: complete screens, structure, and application views. */
.shujin-case .shujin-section-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:24px;margin:58px 0 22px;padding-top:20px;border-top:1px solid #aaa9a0}
.shujin-section-heading h5{margin:0;font:400 clamp(25px,2.8vw,40px)/1.2 var(--serif)}
.shujin-section-heading p{max-width:390px;margin:0 0 3px auto;font:14px/1.7 var(--sans)}
.shujin-case figure{min-width:0;margin:0}
.shujin-case figure a{display:block;cursor:zoom-in}
.shujin-case figure a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.shujin-case figure img{display:block;width:100%;height:auto}
.shujin-case figure a:hover img{filter:saturate(1.08)}
.shujin-board-stack{display:grid;gap:18px;margin-bottom:22px}
.shujin-screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shujin-wire-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.shujin-mock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shujin-case .shujin-video{background:#fff}
.shujin-video video{display:block;width:100%;height:auto;aspect-ratio:827/537;object-fit:contain;background:#fff}

/* Type and mixed-media archive folders. */
.type-panel,.other-panel{padding:0;color:#171817;background:#eae8e1;scroll-behavior:smooth}
.type-panel::before,.other-panel::before{display:none}
.type-panel .editorial-intro-main>p,.other-panel .editorial-intro-main>p{font-size:20px}
.type-panel .editorial-intro h2,.other-panel .editorial-intro h2{font-size:clamp(78px,10vw,150px)}
.archive-case .drawing-case-copy{margin-bottom:22px}
.archive-case .drawing-case-copy p{color:#51524c;font-size:14px;line-height:1.5}
.archive-grid{display:grid;gap:12px;align-items:start}
.archive-grid figure,.other-video{min-width:0;margin:0}
.archive-grid a{display:block;overflow:hidden;background:#e2e1da;cursor:zoom-in}
.archive-grid img{display:block;width:100%;height:auto;transition:transform .5s ease,filter .5s ease}
.archive-grid a:hover img{transform:scale(1.025);filter:saturate(1.07)}
.archive-grid a:focus-visible{outline:3px solid #a1af79;outline-offset:3px}
.type-opening{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:stretch}
.type-opening figure,.type-opening a{height:100%}
.type-panel .type-opening img{height:100%;object-fit:cover}
.type-posters,.type-experiments,.other-packaging{grid-template-columns:repeat(3,minmax(0,1fr))}
.type-studies{grid-template-columns:repeat(2,minmax(0,1fr))}
.other-wayfinding{grid-template-columns:repeat(2,minmax(0,1fr))}
.other-wayfinding figure:first-child{grid-column:1/-1}
.other-photobook{grid-template-columns:repeat(2,minmax(0,1fr))}
.other-video{position:relative;overflow:hidden;background:#191b18}
.other-video video{display:block;width:100%;max-height:680px;object-fit:contain;background:#191b18}
.other-video .video-cover{position:absolute;inset:0;display:grid;place-content:center;gap:16px;background:radial-gradient(circle at 62% 48%,#46584a,#191b18 65%);color:#f6f2e8;text-align:center;transition:opacity .3s}
.other-video .video-cover::before{content:'剪';font:220px/.8 var(--serif);opacity:.22}
.other-video .video-cover button{position:relative;z-index:1;min-width:110px;margin:auto;padding:11px 25px;border:1px solid #ddd6c6;color:#f6f2e8;background:transparent;font-size:13px}
.other-video .video-cover button:hover{color:#191b18;background:#f6f2e8}
.other-video.is-playing .video-cover{opacity:0;pointer-events:none}
.folder-shell{pointer-events:none}
.folder-shell .folder-tabs,.folder-shell .folder-panel.is-active{pointer-events:auto}
@media(max-width:620px){.folder-tabs{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;padding-top:3px}.folder-tab{flex:0 0 84px;width:84px;min-width:84px;height:46px;padding:0 5px;white-space:nowrap;font-size:9px}.folder-tab span{font-size:7px}}
@media(max-width:900px){.type-opening{grid-template-columns:1fr 1.2fr}.type-posters,.type-experiments,.other-packaging{grid-template-columns:repeat(2,minmax(0,1fr))}.type-posters figure:last-child,.type-experiments figure:last-child,.other-packaging figure:last-child{grid-column:1/-1}}
@media(max-width:620px){.type-panel .editorial-intro h2,.other-panel .editorial-intro h2{font-size:clamp(68px,16vw,100px)}.type-panel .editorial-intro-main>p,.other-panel .editorial-intro-main>p{font-size:15px}.archive-case .drawing-case-copy p{font-size:13px}.type-opening{grid-template-columns:1fr 1fr}.type-posters,.type-experiments,.other-packaging,.type-studies,.other-wayfinding,.other-photobook{gap:7px}.other-video video{max-height:520px}.other-video .video-cover::before{font-size:140px}}

/* Long-form public-account work. */
.social-panel{background:#e9e7e1}
.social-panel .editorial-intro h2{font-family:var(--serif);font-size:clamp(80px,8.2vw,136px);font-weight:700;letter-spacing:-.09em}
.social-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:flex-start}
.social-strip figure{min-width:0;margin:0;overflow:hidden}
.social-strip figure{flex:0 0 calc((100% - 24px)/3)}
.social-strip img{display:block;width:100%;height:auto}
.social-strip a{display:block;cursor:zoom-in}
.social-strip a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.social-strip a:hover img{filter:saturate(1.1)}
@media(max-width:900px){.social-strip figure{flex-basis:calc((100% - 12px)/2)}}
@media(max-width:620px){
 .memo-screen-heading{display:block;margin-top:34px}
 .memo-screen-heading p{margin:10px 0 0;font-size:13px}
 .memo-screen-boards{gap:20px}
 .memo-board-caption{font-size:10px}
 .dressup-flow-grid{grid-template-columns:1fr;gap:28px}
 .shujin-case .shujin-section-heading{display:block;margin:40px 0 18px}
 .shujin-section-heading p{margin:10px 0 0;font-size:13px}
 .shujin-screen-grid,.shujin-wire-grid,.shujin-mock-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .shujin-board-stack{gap:12px}
 .social-panel .editorial-intro h2{font-size:clamp(58px,14vw,90px)}
 .social-strip{gap:8px}
 .social-strip figure{flex-basis:calc((100% - 8px)/2)}
}
@media(max-width:620px){
 .folder-tabs .folder-tab:hover,.folder-tabs .folder-tab.is-active{transform:none}
}

/* Brand identity archive. */
.brand-design-panel .editorial-intro h2{font-size:clamp(84px,10vw,154px)}
.brand-design-panel .editorial-case:first-child{padding-top:56px}
.brand-design-panel .brand-visual-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:flex-start}
.brand-design-panel .brand-visual-grid figure{min-width:0;flex:0 0 calc((100% - 24px)/3);margin:0;overflow:hidden}
.brand-design-panel .brand-grid-two figure{flex-basis:calc((100% - 12px)/2)}
.brand-design-panel .brand-visual-grid a{display:block;cursor:zoom-in}
.brand-design-panel .brand-visual-grid a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.brand-design-panel .brand-visual-grid img{display:block;width:100%;height:auto;transition:filter .25s}
.brand-design-panel .brand-visual-grid a:hover img{filter:saturate(1.08)}
.brand-design-panel .brand-board-stack{display:grid;gap:24px}
.brand-design-panel .brand-board-stack figure{min-width:0;margin:0}
.brand-design-panel .brand-board-stack a{display:block;cursor:zoom-in}
.brand-design-panel .brand-board-stack a:focus-visible{outline:3px solid #a8c449;outline-offset:4px}
.brand-design-panel .brand-board-stack img{display:block;width:100%;height:auto}
.brand-design-panel .brand-museum-boards{margin-bottom:34px}
.brand-design-panel .brand-motion-intro{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid #aaa9a0;padding:20px 0 17px}
.brand-design-panel .brand-motion-intro h5{margin:0;font:400 clamp(25px,2.8vw,40px)/1.2 var(--serif)}
.brand-design-panel .brand-motion-intro p{max-width:380px;margin:0;font:14px/1.7 var(--sans)}
.brand-design-panel .brand-motion-figure{margin:0 0 34px;background:#fff}
.brand-design-panel .brand-motion-figure video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}
@media(max-width:620px){
 .brand-design-panel .editorial-intro h2{font-size:clamp(64px,17vw,110px)}
 .brand-design-panel .brand-visual-grid{gap:8px}
 .brand-design-panel .brand-visual-grid figure,.brand-design-panel .brand-grid-two figure{flex-basis:calc((100% - 8px)/2)}
 .brand-design-panel .brand-board-stack{gap:12px}
 .brand-design-panel .brand-museum-boards{margin-bottom:25px}
 .brand-design-panel .brand-motion-intro{display:block}
 .brand-design-panel .brand-motion-intro p{margin:9px 0 0;font-size:13px}
 .brand-design-panel .brand-motion-figure{margin-bottom:25px}
}

/* Keep the portfolio artwork in its color-managed source colors. */
.folder-panel img,.portfolio-cover img{filter:none!important}

/* Read the desktop file labels in one consistent direction. */
@media(min-width:901px){
 .folder-tabs .folder-tab{writing-mode:horizontal-tb;text-orientation:mixed;flex-direction:column;gap:0}
 .folder-tabs .folder-tab span{position:absolute;top:7px;left:9px;writing-mode:horizontal-tb}
 .folder-tabs .folder-tab b{margin-top:13px;font:inherit;writing-mode:vertical-rl;text-orientation:upright;line-height:1;white-space:nowrap}
}
@media(max-width:900px){
 .folder-tabs .folder-tab span{position:static}
 .folder-tabs .folder-tab b{font:inherit;writing-mode:horizontal-tb;text-orientation:mixed}
}

/* A compact project rhythm for the mixed-media folder. */
.other-panel .editorial-intro{padding:48px 0 30px}
.other-panel .editorial-intro-main{display:block}
.other-panel .editorial-case{padding:40px 0 48px}
.other-panel .drawing-case-copy{display:block;margin-bottom:18px}
.other-panel .drawing-case-copy p{max-width:620px;margin:8px 0 0;font-size:13px;line-height:1.55}
.other-panel .drawing-outro{justify-content:flex-end;padding:42px 0 54px}
.other-wayfinding{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.other-wayfinding figure:first-child{grid-column:auto}
.wayfinding-detail-stack{min-width:0;display:grid;gap:12px}
.wayfinding-detail-stack figure{margin:0}
.other-video{background:#070708}
.other-video video{aspect-ratio:16/9;max-height:none;object-fit:cover;background:#070708}
.other-video .video-cover{display:flex;align-items:flex-end;justify-content:flex-start;padding:26px;background:transparent}
.other-video .video-cover::before{display:none}
.other-video .video-cover button{margin:0;color:#fff;border-color:#fff;background:rgba(0,0,0,.35)}
@media(max-width:900px){.other-wayfinding{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
 .folder-tabs .folder-tab{flex-direction:column}
 .other-panel .editorial-case{padding:32px 0 38px}
 .other-wayfinding{grid-template-columns:1fr}
 .other-video .video-cover{padding:16px}
}

/* Compact, legible file tabs with one reading direction. */
@media(min-width:1201px){
 .editorial-web-media figure{height:380px}
}
@media(min-width:901px) and (max-width:1200px){
 .editorial-web-media figure{height:clamp(230px,25vw,300px)}
}
@media(min-width:901px){
 .folder-tabs{right:-106px;top:18px;width:108px;gap:5px}
 .folder-tabs .folder-tab{width:108px;height:66px;justify-content:flex-start;flex-direction:row;gap:10px;padding:0 12px;border-left:4px solid var(--tab-color);border-radius:0 9px 9px 0;box-shadow:3px 3px 0 rgba(0,0,0,.18);text-align:left;writing-mode:horizontal-tb}
 .folder-tabs .folder-tab span{position:static;flex:0 0 auto;min-width:17px;color:#727873;font:10px var(--mono)}
 .folder-tabs .folder-tab b{margin:0;font:700 13px/1.2 var(--sans);writing-mode:horizontal-tb;text-orientation:mixed;white-space:nowrap}
 .folder-tabs .folder-tab:hover{transform:translateX(5px)}
 .folder-tabs .folder-tab.is-active{transform:translateX(7px);box-shadow:inset 4px 0 0 var(--tab-color),4px 5px 0 rgba(0,0,0,.22)}
}
@media(min-width:901px) and (max-width:1200px){
 .folder-shell,.folder-stack{width:min(1160px,calc(100vw - 230px))}
}

/* Book spreads share stable edges and retain their original proportions. */
.book-case .drawing-case-copy{margin-bottom:18px}
.book-case .drawing-case-copy h4{font-size:clamp(32px,3vw,48px)}
.book-subtitle{margin:36px 0 13px;padding-top:13px;border-top:1px solid #c0beb4;font:15px var(--serif)}
.book-pigs,.book-spreads,.book-arts,.book-bookmarks{grid-template-columns:repeat(2,minmax(0,1fr))}
.book-pigs figure:first-child{grid-column:1/-1}
.book-pigs figure:last-child{grid-column:1/-1}
.book-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.book-arts figure:nth-child(3),.book-arts figure:nth-child(6){grid-column:1/-1}
.book-bookmarks{max-width:440px;margin:12px auto 0}
.book-case .archive-grid{align-items:stretch}
.book-case .archive-grid figure,.book-case .archive-grid a{height:100%}
.book-case .archive-grid img{height:100%;object-fit:cover}
.book-pigs img,.book-spreads img{aspect-ratio:5032/1783}
.book-spreads img{aspect-ratio:1208/612}
.book-photos img{aspect-ratio:4/3}
.book-arts figure:nth-child(-n+2) img{aspect-ratio:2480/3508}
.book-arts figure:nth-child(n+3) img{aspect-ratio:2/1}
.book-arts figure:nth-child(3) img{aspect-ratio:1724/1134}
.book-bookmarks img{aspect-ratio:567/1098}
@media(max-width:620px){
 .book-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
 .book-pigs,.book-spreads,.book-arts,.book-bookmarks{gap:7px}
 .book-case .drawing-case-copy h4{font-size:30px}
}

/* Three Figma viewport captures and consistent website links. */
.editorial-web-media>a span{min-width:0;overflow-wrap:anywhere}
.editorial-web-media figure.figma-device-preview{display:grid;grid-template-columns:2.1fr 1.1fr .7fr;gap:5px;padding:5px;background:#d6d6cf}
.figma-device-preview>div{position:relative;min-width:0;height:100%;overflow:hidden;background:#1e211d}
.editorial-web-media .figma-device-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.figma-device-preview small{position:absolute;left:7px;bottom:7px;padding:4px 5px;color:#fff;background:rgba(0,0,0,.68);font:8px var(--mono);letter-spacing:.08em}
@media(max-width:620px){.editorial-web-media .figma-device-preview{height:300px}.figma-device-preview small{font-size:7px}}

/* Match the two stacked wayfinding boards to the sign board's lower edge. */
.other-wayfinding{grid-template-columns:minmax(0,1fr) minmax(0,1.017fr)}
@media(max-width:620px){.other-wayfinding{grid-template-columns:1fr}}