/* Interaction layer: movement communicates entry, selection, manipulation and image position. */
.interactive-portfolio{--ease-out:cubic-bezier(.16,1,.3,1)}
.header{border-bottom:1px solid #ffffff12}.reading-progress{position:absolute;bottom:-1px;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}.header nav .interview-link{transition:background .25s,color .25s,box-shadow .25s}.header nav .interview-link:hover{background:var(--accent);color:#000;box-shadow:0 0 0 6px #ff514312}.header nav .interview-link:hover svg{color:#000}.original-cover .cover-enter{padding:21px 25px;border-color:#ff5143b3;transition:background .25s,transform .4s var(--ease-out),box-shadow .4s}.original-cover:hover .cover-enter{background:#f44a3d;box-shadow:0 0 0 9px #ff514318;transform:translateY(-5px)}.cover-enter>span{font-weight:500}.original-cover>img{transition:filter .6s}.original-cover:hover>img{filter:brightness(1.08)}.directions{padding-top:75px;padding-bottom:75px}.direction-card>div,.card-cover{transition:transform .45s var(--ease-out);will-change:transform}.direction-card{transition:transform .4s var(--ease-out),box-shadow .4s}.direction-card:hover{box-shadow:0 20px 50px #0005}.archive.section{background:#141414;padding-top:65px;padding-bottom:85px}.section-title{border-color:#ffffff24}.section-title h2{font-size:clamp(42px,5.5vw,86px);font-weight:500}.section-title h2>.heading-suffix{font-size:.42em}.section-title h2>.heading-en{font-size:.35em;letter-spacing:1px}.archive-toolbar{gap:20px;padding:14px 0;border-bottom:1px solid #ffffff1f;margin-bottom:0;flex-wrap:wrap}.search-label{flex:1;width:auto;max-width:340px;min-width:180px}.search-label input{border:0}.view-controls{display:flex;background:#080808;padding:4px;border:1px solid #333;border-radius:30px;gap:3px}.view-button{font-size:11px;color:#929292;white-space:nowrap;padding:11px 20px;border-radius:24px;transition:background .25s,color .25s,box-shadow .25s}.view-button.active{color:#080808;background:var(--accent);box-shadow:inset 0 0 0 1px #ff8b82}.view-button:hover:not(.active){color:#fff;background:#232323}.filter,.view-button,.interview-link,.focus-controls button,.project-dock button{position:relative;isolation:isolate;overflow:hidden}.filter{padding-left:3px;padding-right:3px}.filter:hover{color:var(--accent)}.filter:active{transform:translateY(2px)}.press-wave{position:absolute;width:20px;height:20px;border-radius:50%;background:#ffffff55;pointer-events:none;z-index:3;transform:translate(-50%,-50%) scale(0);animation:press-wave .55s ease-out forwards}.focus-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0}.focus-controls p{font-size:11px;color:#999;display:flex;align-items:center;gap:15px}.drag-mark{font-size:23px;color:var(--accent);line-height:1}.focus-count{font-family:'Space Grotesk',sans-serif;font-size:10px;color:#eee;margin-left:20px;letter-spacing:2px}.focus-controls>div{display:flex;gap:9px}.focus-controls button{height:40px;width:55px;border:1px solid #484848;border-radius:24px;font-size:22px;transition:background .2s,color .2s,transform .2s}.focus-controls button:hover:enabled{background:#eee;color:#111;transform:translateX(2px)}.focus-controls button:active:enabled{transform:scale(.92)}
#gallery[data-view="wall"]{padding-top:28px}#gallery[data-view="focus"]{display:block;column-count:auto;max-width:none;overflow:visible}#gallery[data-view="focus"].single{max-width:none}.focus-track{display:flex;gap:32px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0;padding:0 0 30px;cursor:grab;touch-action:pan-x pan-y;scrollbar-color:#fc5545 #292929;scrollbar-width:thin;outline-offset:10px;overscroll-behavior-x:contain}.focus-track:active,.focus-track.dragging{cursor:grabbing}.focus-track.dragging{scroll-snap-type:none;user-select:none}.focus-track.dragging *{cursor:grabbing!important}.focus-track .project-card{flex:0 0 min(72vw,940px);width:min(72vw,940px);min-width:0;scroll-snap-align:start;opacity:.48;transition:opacity .35s;text-align:left;position:relative;padding-top:22px}.focus-track .project-card.in-focus,.focus-track .project-card:focus-visible,.focus-track .project-card:hover{opacity:1}.focus-track .project-card:before{content:'PROJECT / ' attr(data-project-index);display:block;position:absolute;top:0;left:0;font-size:9px;color:#777;letter-spacing:2px;line-height:1}.focus-track .card-cover{aspect-ratio:auto;height:clamp(340px,54dvh,660px);border-radius:3px;background:#090909;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0d}.focus-track .card-cover img{height:100%;width:100%;object-fit:contain}.focus-track .card-open{opacity:1;transform:none;width:58px;height:58px;right:20px;bottom:20px;border-radius:0;background:var(--accent);color:#000;border:0}.focus-track .card-open svg{height:26px;width:26px}.focus-track .card-title{font-size:clamp(18px,2vw,29px);letter-spacing:-.5px;font-weight:500;color:#fff;line-height:1.4;margin-top:20px}.focus-track .card-meta{font-size:11px;margin-top:8px;display:flex}.focus-track .card-meta>span:first-child{display:block;font-size:9px;color:#777;letter-spacing:2px}.focus-track .project-card:hover .card-cover img{filter:brightness(1);transform:scale(1.025)}.work-cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;gap:9px;width:76px;height:76px;border-radius:50%;background:#ff5143;color:#090909;transition:opacity .18s;box-shadow:0 8px 35px #0005;font-size:10px}.work-cursor.visible{opacity:1}.work-cursor b{font-size:25px;font-weight:400}.entry-transition{display:none;position:fixed;inset:0;z-index:2000;background:#ed4336;color:#080808;transform:translateY(100%);align-content:center;justify-content:center;pointer-events:none}.entry-transition.running{display:grid}.entry-transition strong{font-size:clamp(70px,17vw,260px);font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.08em;line-height:1}.entry-transition strong>span{color:#fff}.entry-transition p{font-size:12px;letter-spacing:4px;margin:20px 0 0 8px}.project-dialog{padding-bottom:100px}.project-dialog.compact-project .project-intro{display:block;padding:25px 4% 28px}.compact-project .project-intro h2{max-width:none;font-size:30px;margin:0}.compact-project .project-intro>p,.compact-project .project-intro dl,.compact-project .project-story{display:none}.project-dock{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:28px;width:min(620px,90%);padding:9px;background:#111;border:1px solid #ffffff38;border-radius:45px;box-shadow:0 14px 50px #0009}.project-dock button{border-radius:28px;padding:13px 20px;white-space:nowrap;font-size:11px;background:#252525;transition:background .25s,color .25s}.project-dock button:hover,.project-dock button[aria-expanded=true]{background:var(--accent);color:#080808}.project-dock button>span{font-size:16px;margin-left:13px}.project-dock>span{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:2px;color:#b8b8b8;white-space:nowrap}.project-thumb-strip{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);width:min(1000px,94%);display:flex;gap:10px;padding:17px;background:#101010;border:1px solid #444;box-shadow:0 12px 50px #0009;overflow-x:auto;z-index:25}.project-thumb-strip button{flex:0 0 120px;padding:0;position:relative;border:1px solid #444;transition:border-color .2s}.project-thumb-strip button.selected,.project-thumb-strip button:hover{border-color:var(--accent);outline:1px solid var(--accent)}.project-thumb-strip img{width:120px;height:80px;object-fit:cover}.project-thumb-strip span{font-size:9px;position:absolute;bottom:4px;right:5px;background:#000b;padding:3px 6px}.project-figure{scroll-margin-top:90px}.project-bottom{padding-bottom:80px}.image-button:active{transform:none}.image-button img{transition:filter .3s}.image-button:hover img{filter:brightness(.93)}.project-dialog .project-intro{scroll-margin-top:80px}
@keyframes press-wave{to{transform:translate(-50%,-50%) scale(12);opacity:0}}
@media(max-width:1100px){.view-button{padding:10px 16px}.focus-track .project-card{flex-basis:78vw;width:78vw}.focus-track .card-cover{height:52dvh}.archive-toolbar{gap:15px}}
@media(max-width:767px){.archive.section{padding-top:40px}.section-title h2{font-size:48px}.archive-toolbar{gap:10px;padding:12px 0}.search-label{min-width:160px;flex-basis:55%}.view-controls{order:3;flex-basis:100%;justify-content:center;border-radius:8px}.view-button{flex:1;border-radius:5px;padding:11px 13px;font-size:11px}.focus-controls{padding:20px 0 14px}.focus-controls p{font-size:10px;gap:8px}.focus-count{font-size:9px;margin-left:9px;letter-spacing:1px}.focus-controls button{width:41px;height:33px;font-size:18px}.focus-track{gap:18px;padding-bottom:25px}.focus-track .project-card{flex-basis:83vw;width:83vw;padding-top:20px}.focus-track .card-cover{height:48dvh;min-height:280px}.focus-track .card-title{font-size:18px;line-height:1.55;margin-top:16px}.focus-track .card-meta{font-size:10px}.focus-track .card-meta>span:first-child{font-size:8px;letter-spacing:1px}.focus-track .card-open{width:42px;height:42px;right:12px;bottom:12px}.focus-track .card-open svg{width:20px;height:20px}.work-cursor{display:none}.project-dialog.compact-project .project-intro{padding:20px 6%}.compact-project .project-intro h2{font-size:23px;line-height:1.55}.project-dock{width:94%;bottom:12px;padding:7px;gap:10px}.project-dock button{font-size:10px;padding:11px 13px}.project-dock button>span{font-size:13px;margin-left:6px}.project-dock>span{font-size:9px;letter-spacing:1px}.project-thumb-strip{bottom:80px;padding:12px;gap:8px}.project-thumb-strip button{flex-basis:100px}.project-thumb-strip img{height:70px;width:100px}.entry-transition p{font-size:9px;letter-spacing:1px}.original-cover .cover-enter{padding:16px 18px}.directions{padding-top:45px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.work-cursor,.entry-transition{display:none!important}.focus-track .project-card{opacity:1}.card-cover,.direction-card>div{transform:none!important}.press-wave{display:none}}

/* Original cover and artwork remain the visual authority; controls recede on black. */
body,.header,.cover-entry,.directions,.archive.section,.project-dialog{background:#000}
.original-cover>img{filter:none;transition:none}.original-cover:hover>img{filter:none}
.original-cover .cover-enter{padding:14px 18px;border:1px solid #ffffff40;background:#050505;color:#eee;box-shadow:none}
.original-cover:hover .cover-enter{background:#181818;border-color:#b5b5b5;box-shadow:none;transform:translateY(-2px)}
.original-cover .cover-enter svg{width:21px;height:21px;color:#ff5749}
.work-cursor{width:28px;height:28px;gap:0;background:#ed4a3d;box-shadow:none;border:1px solid #ffffff24}
.work-cursor span{display:none}.work-cursor b{font-size:16px;line-height:1;font-weight:400}
.header nav .interview-link:hover{box-shadow:none}.direction-card:hover{box-shadow:none}
.direction-card{background:#0a0a0a}.focus-track .card-cover{background:#030303;box-shadow:none}
.focus-track .project-card{opacity:.7}.focus-track .project-card.in-focus,.focus-track .project-card:hover,.focus-track .project-card:focus-visible{opacity:1}
.focus-track .card-open{width:38px;height:38px;border:1px solid #ffffff50;background:#0a0a0a;color:#fff;border-radius:50%}
.focus-track .card-open svg{width:17px;height:17px}.focus-track .project-card:hover .card-open{background:#e74336;border-color:#e74336}
.focus-track .project-card:hover .card-title{color:#fff}.view-button.active{background:#e6e4df;box-shadow:none}
.focus-track{scrollbar-width:thin;scrollbar-color:#595959 #101010}.project-intro,.project-bottom{background:#090909}
.project-dock{background:#090909;border-color:#363636;box-shadow:0 8px 30px #0008}
@media(max-width:767px){.work-cursor{display:none}.original-cover .cover-enter{padding:14px 16px}.focus-track .card-open{width:34px;height:34px}}

/* English display type backs the Chinese section title. */
.editorial-heading{width:100%;position:relative;text-align:center;padding:37px 0 5px;min-height:108px;isolation:isolate;margin:0 0 44px}
.editorial-heading>span{font-family:"Space Grotesk",sans-serif;font-size:clamp(42px,7.1vw,100px);font-weight:400;letter-spacing:-.035em;line-height:1;color:#222;position:absolute;top:0;left:0;right:0;white-space:nowrap;pointer-events:none;z-index:-1}
.editorial-heading h2,.section-title .editorial-heading h2{font-size:30px;font-weight:500;line-height:1.4;letter-spacing:3px;color:#ff5749;position:relative;margin:0}
.editorial-heading p{margin-top:25px;font-size:13px;letter-spacing:2px;color:#aaa}
.section-title.editorial-section-title{display:block;text-align:center;padding-bottom:27px;margin-bottom:27px}
.editorial-section-title .editorial-heading{margin-bottom:4px}
.section-title.editorial-section-title>p{font-size:11px;color:#aaa;margin-top:12px}
.practice>.editorial-heading,.interview>.editorial-heading{grid-column:1/-1;margin-bottom:0}
.practice,.interview{row-gap:40px}
.practice-statement,.interview-statement{font-size:clamp(28px,3vw,43px);line-height:1.5;letter-spacing:-.02em;font-weight:400}
.about>.editorial-heading{margin-bottom:60px}
.about .designer-name{font-size:46px;font-weight:400;line-height:1.25}
.designer-name small{font-size:13px;display:block;font-weight:400;letter-spacing:2px;color:#aaa;margin-top:16px}
@media(max-width:767px){.editorial-heading{padding-top:22px;min-height:76px;margin-bottom:30px}.editorial-heading>span{font-size:clamp(29px,8.5vw,58px);letter-spacing:-.035em}.editorial-heading h2,.section-title .editorial-heading h2{font-size:23px;letter-spacing:2px}.editorial-heading p{font-size:11px;letter-spacing:1px;margin-top:19px}.editorial-section-title .editorial-heading{min-height:69px}.section-title.editorial-section-title>p{font-size:9px;white-space:normal;line-height:1.9;margin-top:5px}.practice>.editorial-heading,.interview>.editorial-heading{margin-bottom:4px}.about>.editorial-heading{margin-bottom:35px}.about .designer-name{font-size:37px}.practice-statement,.interview-statement{font-size:28px}}

/* Keep the Codex preview at its real height instead of reserving its HTML height. */
.practice{grid-template-columns:1fr 1.12fr;align-items:start;gap:26px 40px;padding-top:56px;padding-bottom:56px}
.practice-statement{font-size:clamp(26px,2.45vw,36px);line-height:1.4}
.practice .practice-lead{margin:16px 0 10px;font-size:14px}
.practice-copy>p:not(.practice-lead){max-width:none;line-height:1.9}
.practice .practice-steps{margin:18px 0 12px}
.practice-steps>div{padding:10px 0;font-size:11px}
.practice-visual{align-self:start;display:block;width:100%;height:auto;min-height:0}
.practice-visual img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:top;background:none;filter:none}
.practice-visual:hover img{filter:brightness(1.04)}
.practice-visual>span{padding-top:10px;line-height:1.6}
@media(max-width:767px){.practice{gap:24px;padding-top:40px;padding-bottom:40px;align-items:stretch}.practice-statement{font-size:27px}.practice .practice-lead{margin-top:14px}.practice-steps>div{font-size:10px;padding:10px 0}.practice>.editorial-heading{margin-bottom:0}}

/* The masonry wall is the primary way to browse the portfolio. */
.view-button.active{background:#ff5749;color:#080808;box-shadow:inset 0 0 0 1px #ff978d}

.stage-entry{font-size:11px;color:var(--accent);display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.stage-entry svg{width:17px;height:17px}.header nav>a.stage-nav{display:block!important;color:var(--accent)}@media(max-width:767px){.header nav{gap:12px}.header nav>a.stage-nav{font-size:10px}.archive-toolbar{flex-wrap:wrap}.stage-entry{font-size:10px}.header nav>a[href="#practice"],.header nav>a[href="#about"]{display:none}}

.workflow-code-link{margin-left:25px;color:#aaa}.workflow-preview{display:block;align-self:start}.workflow-preview img{max-height:620px;object-fit:contain;background:#101010}.workflow-preview>span{display:flex;align-items:center;justify-content:space-between}.workflow-preview svg{width:20px;height:20px}.header nav>a[href="workflow.html"]{color:var(--accent)}@media(max-width:767px){.header nav>a[href="workflow.html"]{display:none}.workflow-code-link{margin-left:0;display:flex}.workflow-preview img{max-height:none}}

/* Keep the cover artwork clear: the entry sits below the image. */
.original-cover .cover-enter{position:static;display:flex;width:max-content;max-width:92%;min-height:34px;align-items:center;justify-content:center;margin:8px 4% 10px auto;padding:8px 12px;gap:18px;border:1px solid #ffffff35;background:#080808;box-shadow:none;transform:none}
.original-cover .cover-enter>span{font-size:10px;font-weight:400;letter-spacing:1px;line-height:1.4}
.original-cover .cover-enter small{display:none}
.original-cover .cover-enter>svg{width:16px;height:16px}
.original-cover:hover .cover-enter,.original-cover:focus-visible .cover-enter{transform:none;box-shadow:none;background:#181818}
@media(max-width:767px){.original-cover .cover-enter{margin:8px 5% 8px auto;padding:8px 11px;gap:15px;min-height:34px}.original-cover .cover-enter>span{font-size:10px}.cover-footer{margin-top:0}}

/* Clear white English display behind Creative Focus. */
.directions .editorial-heading>span{color:rgba(255,255,255,.72)}