*{box-sizing:border-box}body{margin:0;background:#fff;color:#161616;font-family:Arial,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}header{height:74px;position:absolute;top:0;left:0;width:100%;padding:0 3%;display:flex;align-items:center;justify-content:space-between;z-index:50;font-size:9px}.logo{font-size:18px;font-weight:800;letter-spacing:-1px}header>span{position:absolute;left:26%;font-size:8px}nav{display:flex;gap:24px;align-items:center}nav a{background:#f4f4f4;padding:7px 10px}main{height:100svh;min-height:620px;position:relative;overflow:hidden}aside{position:absolute;left:3%;top:48%;z-index:30;pointer-events:none;display:grid;gap:8px;font-size:15px}small{font-size:9px;color:#777}aside small:last-child{max-width:150px}.total{position:absolute;right:3%;top:50%;font-size:12px}#stage{position:absolute;inset:0 20%;perspective:1000px;touch-action:pan-x;user-select:none;cursor:grab}#stage:active{cursor:grabbing}#stack{position:absolute;inset:0;transform-style:preserve-3d}.card{width:min(43vw,650px);height:340px;position:absolute;top:50%;left:50%;transform-origin:center;overflow:hidden;backface-visibility:hidden;transition:transform .85s cubic-bezier(.22,.75,.18,1),opacity .7s;display:block;text-align:left;padding:0;border:1px solid #00000018;background:var(--bg);color:var(--ink);will-change:transform}.bar{height:24px;background:#fff;color:#222;font-size:8px;display:flex;justify-content:space-between;align-items:center;padding:0 12px}.art{height:316px;padding:26px 30px;position:relative;overflow:hidden}.art h2{font-size:clamp(32px,4vw,68px);letter-spacing:-3px;line-height:.95;margin:0;position:relative;z-index:2;max-width:80%;font-weight:500}.art p{font-size:9px;position:absolute;bottom:17px;left:30px;z-index:2;letter-spacing:1px}.object{position:absolute;width:170px;height:210px;right:25px;bottom:-30px;border-radius:45% 45% 15% 15%;background:linear-gradient(110deg,#fff8,transparent 35%,#0008),var(--accent);transform:rotate(-20deg);box-shadow:12px 22px 35px #0003}.object:before{content:'';position:absolute;inset:20px;border:1px solid #ffffff70;border-radius:inherit}.object:after{content:'FORM';position:absolute;top:45%;left:15%;font-size:22px;font-weight:bold;letter-spacing:5px;writing-mode:vertical-rl}.card:nth-child(3n) .object{border-radius:50%;width:260px;height:260px;right:-30px;bottom:-60px}.card:nth-child(3n+2) .object{border-radius:15px;height:230px;transform:rotate(20deg)}.card:nth-child(2n) h2{font-family:Georgia,serif;font-style:italic}.card.active{box-shadow:0 15px 35px #00000012}footer{position:absolute;bottom:25px;left:3%;right:3%;display:flex;align-items:end;justify-content:space-between;z-index:40;font-size:8px;line-height:1.5;pointer-events:none}footer>*{pointer-events:auto}footer small{display:block;margin-top:10px;font-size:7px}.controls{display:flex;gap:16px;align-items:center;color:#777;font-size:8px}.controls button{width:30px;height:30px;border:1px solid #ddd;background:white}#all{font-size:8px;background:#f3f3f3;padding:9px 12px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}button:focus-visible,a:focus-visible,#stage:focus-visible{outline:2px solid #555;outline-offset:4px}dialog{border:1px solid #ddd;width:min(900px,90vw);max-height:85svh;padding:25px;background:#fff}dialog::backdrop{background:#0008;backdrop-filter:blur(10px)}#close{float:right;padding:10px;font-size:10px}#detail-content{clear:both;padding:30px 0}#detail-content .art{height:420px;margin-top:25px;background:var(--bg);color:var(--ink)}#detail-content h2{font-size:60px}#detail-content>p{font-size:13px;color:#777}.index-row{width:100%;display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid #ddd;text-align:left}@media(max-width:700px){header{height:65px}header>span{display:none}#stage{inset:40px 0 60px;perspective:850px}.card{width:74vw;height:290px}.art{height:266px;padding:22px}.art h2{font-size:42px}.object{width:130px;height:160px}aside{top:75px;left:4%;font-size:12px}aside small:last-child{display:none}.total{top:85px;right:4%;font-size:10px}footer{bottom:20px}.controls{gap:8px}.controls span{display:none}footer small{max-width:120px}nav{gap:12px;font-size:8px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}
/* One continuous depth axis: distant cards above, larger cards below. */
.card{border:0;box-shadow:none!important}.bar{border:0}#stage{inset:0 20%;perspective:1400px}.card{width:min(40vw,610px)}
@media(max-width:700px){#stage{inset:0;perspective:1100px}.card{width:70vw}}
/* Viewport-relative geometry keeps the expanded centre card exactly one third wide. */
main{height:100dvh;min-height:0}#stage{inset:0;perspective:140dvh;perspective-origin:50% 50%}.card{width:calc(100vw / 3);height:auto;aspect-ratio:1.8}.card .bar{height:clamp(10px,1.4vw,24px);font-size:clamp(4px,.46vw,8px);padding:0 2%}.card .art{height:calc(100% - clamp(10px,1.4vw,24px));padding:5%}.card .art h2{font-size:clamp(14px,3.3vw,70px);letter-spacing:-.045em}.card .art p{font-size:clamp(4px,.5vw,9px);left:5%;bottom:5%}.card .object{width:30%;height:75%;right:4%;bottom:-10%}.card:nth-child(3n) .object{width:45%;height:85%;right:-5%;bottom:-20%}.card:nth-child(3n+2) .object{height:80%}.card .object:after{font-size:clamp(8px,1.3vw,22px)}
/* Project each card independently so tilted neighbours cannot intersect the open card. */
#stage{perspective:none}#stack{transform-style:flat}.card{isolation:isolate}.card.active{z-index:100}
/* Timing estimated from the 0.2-second source samples, 2.4–3.0s / 4.4–4.8s. */
.card{transition:transform .55s cubic-bezier(.22,.68,.22,1),opacity .4s}.card .art{width:100%}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
/* A clipped gallery must not become a focus-scroll container. */
html,body{overflow:clip}main{overflow:clip}#stage{overflow:visible}
/* Edge-to-edge artwork, ready for replacement with the supplied image collection. */
.card .bar{display:none}.card .art{height:100%;width:100%;margin:0}.card>img{display:block;width:100%;height:100%;object-fit:contain}
/* Keep artwork inside its own layer while the selected case unfolds. */
.card{transform-style:flat;backface-visibility:hidden}.card.active{z-index:1000}
.card .work-image{display:block;width:100%;height:auto;max-width:none;object-fit:contain}.card{background:transparent}#detail-content>.work-image{width:100%;height:auto;display:block}
/* Fixed geometry prevents intrinsic PNG dimensions from stretching the gallery. */
.card{aspect-ratio:16/9!important;height:calc(100vw / 3 * 9 / 16);min-height:0;min-width:0;overflow:hidden}.card .work-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
/* Artwork cards remain edge-to-edge when focused or selected. */
.card,.card:focus,.card:focus-visible,.card:active{border:0;outline:none!important;outline-offset:0;box-shadow:none!important}
/* Keep the lower product cluster visible in the lab-coat composition. */
.card .work-image[src="assets/work-07.png"]{object-position:center bottom}
/* Depth follows queue position; the next foreground card stays above the preview. */
.card.active{z-index:auto}
.card{will-change:auto;cursor:default}.card.active{backface-visibility:visible}.card .work-image{image-rendering:auto;filter:none;transform:none}
/* Render both folded and open states at 2x resolution before projection. */
.card{width:calc(200vw / 3);height:calc(200vw / 3 * 9 / 16);backface-visibility:hidden;will-change:transform}.card.active{backface-visibility:hidden}.card .work-image{width:100%;height:100%;image-rendering:auto;backface-visibility:hidden}
header .logo{font-size:22px;letter-spacing:-.8px;font-weight:600}header .main-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:30px;font-size:11px}header .main-nav a{padding:0;background:none}.cooperate{margin-left:auto;font-size:11px;background:#f4f4f4;padding:9px 13px}@media(max-width:700px){header .main-nav{gap:16px;font-size:10px}header .logo{font-size:18px}.cooperate{font-size:9px;padding:7px 9px}}
/* Light frosted navigation material keeps text readable over moving artwork. */
header{position:fixed;top:0;left:0;right:0;width:100%;z-index:2000;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-bottom:1px solid rgba(25,25,30,.07);box-shadow:0 1px 10px rgba(0,0,0,.025);color:#161616}header .main-nav{font-weight:500}header .main-nav button,header .main-nav a{color:#161616}.cooperate{background:rgba(235,235,240,.72);border:1px solid rgba(255,255,255,.65);border-radius:7px}header .main-nav button:hover,header .main-nav a:hover{opacity:.6}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header{background:rgba(255,255,255,.96)}}
/* Feather the glass material into the page instead of ending at a hard edge. */
header{isolation:isolate;background:transparent;border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}header::before{content:'';position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.88),rgba(255,255,255,.76) 55%,rgba(255,255,255,.48) 78%,rgba(255,255,255,0));-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.3) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.3) 88%,transparent 100%)}
/* Use a clean luminance fade; avoid smearing artwork into a grey glass band. */
header::before{inset:0 0 -48px;background:linear-gradient(to bottom,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 35%,rgba(255,255,255,.75) 58%,rgba(255,255,255,.32) 78%,rgba(255,255,255,.08) 91%,transparent 100%);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}header{border:0;box-shadow:none}
/* Restore the original frosted navigation material. */
header::before{display:none}header{position:fixed;top:0;left:0;right:0;width:100%;z-index:2000;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-bottom:1px solid rgba(25,25,30,.07);box-shadow:0 1px 10px rgba(0,0,0,.025);color:#161616}
/* Improve peripheral copy readability on large displays. */
aside{gap:12px;max-width:26vw;font-size:clamp(18px,1.05vw,26px);line-height:1.45}aside #count{font-size:clamp(12px,.65vw,16px);color:#626262}aside #name{max-width:24vw;font-size:clamp(12px,.7vw,17px);line-height:1.7;color:#555}.total{font-size:clamp(14px,.85vw,21px);line-height:1.5}footer{font-size:clamp(12px,.65vw,16px);line-height:1.8}footer small{font-size:clamp(10px,.55vw,13px);color:#666;margin-top:8px}#all{font-size:clamp(12px,.7vw,17px);padding:12px 18px}@media(max-width:700px){aside{font-size:15px;max-width:65vw;gap:6px}aside #count{font-size:11px}aside #name{font-size:11px;max-width:65vw}.total{font-size:12px}footer{font-size:10px}footer small{font-size:9px}#all{font-size:11px;padding:10px 12px}}
/* A modest increase over the original compact labels. */
aside{font-size:17px;gap:9px;line-height:1.4}aside #count{font-size:10px}aside #name{font-size:11px;line-height:1.7}.total{font-size:14px}footer{font-size:10px;line-height:1.7}footer small{font-size:9px;margin-top:8px}#all{font-size:10px;padding:10px 13px}@media(max-width:700px){aside{font-size:14px;gap:6px}aside #count{font-size:10px}aside #name{font-size:10px}.total{font-size:11px}footer{font-size:9px}footer small{font-size:8px}#all{font-size:10px;padding:9px 12px}}
.total{font-size:12px;letter-spacing:.5px;font-weight:400}.work-total{color:#777;margin-left:6px;font-size:11px;font-variant-numeric:tabular-nums}
/* Opening composition transitions to the white gallery on the first pointer movement. */
body{transition:background-color 1.3s cubic-bezier(.22,.61,.36,1),color 1.3s ease}header{transition:background-color 1.3s ease,color 1.3s ease,border-color 1.3s ease}#stack{transition:transform 1.4s cubic-bezier(.22,.61,.36,1);transform-origin:50% 50%}aside,.total,footer{transition:color 1.3s ease,transform 1.4s cubic-bezier(.22,.61,.36,1);transform-origin:left center}.total{transform-origin:right center}header .main-nav a,header .main-nav button,.cooperate,aside small,.work-total,footer small{transition:color 1.3s ease,background-color 1.3s ease,transform 1.3s ease}.main-nav{transform-origin:center}
body.intro-state{background:#282927;color:#eee9dd}.intro-state header{background:rgba(40,41,39,.76);color:#eee9dd;border-bottom-color:rgba(238,233,221,.07)}.intro-state header .main-nav a,.intro-state header .main-nav button{color:#eee9dd}.intro-state .cooperate{background:rgba(238,233,221,.09);border-color:rgba(238,233,221,.12);color:#eee9dd}.intro-state #stack{transform:scale(.88)}.intro-state aside,.intro-state .total,.intro-state footer{transform:scale(1.12);color:#eee9dd}.intro-state aside #count,.intro-state aside #name,.intro-state .work-total,.intro-state footer small{color:#c8c2b7}.intro-state header .logo{transform:scale(1.06);transform-origin:left center}.intro-state header .main-nav{transform:translateX(-50%) scale(1.1)}header .logo,header .main-nav{transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){body,header,#stack,aside,.total,footer,header .logo,header .main-nav{transition:none}}
.inspect-lens{position:fixed;z-index:2500;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 8px 30px #0003}.inspect-note{position:fixed;z-index:2500;pointer-events:none;max-width:330px;padding:9px 13px;border-radius:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);color:#282927;font-size:11px;line-height:1.6;box-shadow:0 3px 16px #0000000d}.intro-state .inspect-note{background:rgba(40,41,39,.92);color:#eee9dd}

/* Exchanged light/dark composition sizes, with matched control contrast. */
#stack{transform:scale(.88)}body.intro-state #stack{transform:scale(1)}
aside,.total,footer{transform:scale(1.12)}body.intro-state aside,body.intro-state .total,body.intro-state footer{transform:scale(1)}
header .logo{transform:scale(1.06);transform-origin:left center}body.intro-state header .logo{transform:scale(1)}
header .main-nav{transform:translateX(-50%) scale(1.1)}body.intro-state header .main-nav{transform:translateX(-50%) scale(1)}
header .cooperate{transform:scale(1.06);transform-origin:right center}body.intro-state header .cooperate{transform:scale(1)}
#all{background:rgba(25,25,25,.055);color:#292927;border:1px solid rgba(25,25,25,.07);border-radius:6px;transition:background-color 1.3s ease,color 1.3s ease,border-color 1.3s ease}.intro-state #all{background:rgba(238,233,221,.09);color:#eee9dd;border-color:rgba(238,233,221,.17)}#all:hover{background:rgba(25,25,25,.1)}.intro-state #all:hover{background:rgba(238,233,221,.16)}
/* Quiet vertical navigation at the right-hand reading position. */
.side-nav{position:absolute;right:3%;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:18px}.side-nav button{padding:3px 0;font-size:12px;line-height:1.6;color:#777;transition:color .3s}.side-nav button.is-selected{color:#222}.side-nav button.is-selected::after{content:'•';display:inline-block;margin-left:10px}.intro-state .side-nav button{color:#aaa69f}.intro-state .side-nav button.is-selected{color:#eee9dd}.side-nav button:hover{color:#222}.intro-state .side-nav button:hover{color:#fff}aside,footer>div{transition:opacity .6s ease,transform 1.4s cubic-bezier(.22,.61,.36,1),color 1.3s ease}body:not(.intro-state) aside,body:not(.intro-state) footer>div{opacity:0;pointer-events:none}@media(max-width:700px){.side-nav{right:4%;gap:13px}.side-nav button{font-size:10px}}
/* Restore peripheral copy in both themes. */
body:not(.intro-state) aside,body:not(.intro-state) footer>div{opacity:1;pointer-events:auto}
/* Reference-inspired section index: leading dots and graded emphasis. */
.side-nav{align-items:flex-start;gap:22px;min-width:104px}.side-nav button{position:relative;display:flex;align-items:center;gap:12px;padding:0;font-size:14px;font-weight:500;letter-spacing:.3px;text-align:left;color:#222;opacity:var(--nav-emphasis,.35);transition:opacity .4s ease,color .4s ease}.side-nav button::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}.side-nav button.is-selected{opacity:1;color:#222;font-weight:600}.side-nav button.is-selected::after{display:none}.intro-state .side-nav button{color:#eee9dd}.intro-state .side-nav button.is-selected{color:#eee9dd}.side-nav button:hover{opacity:1}.intro-state .side-nav button:hover{color:#eee9dd}@media(max-width:700px){.side-nav{min-width:76px;gap:17px}.side-nav button{font-size:11px;gap:8px}.side-nav button::before{width:4px;height:4px}}

/* Full-screen introduction placeholder, below the existing gallery. */
html{overflow-x:clip;overflow-y:auto;scroll-behavior:smooth;scroll-padding-top:0}body{overflow:visible}.personal-introduction{min-height:100svh;padding:130px 7% 80px;display:grid;grid-template-columns:1fr 2.1fr;gap:7vw;color:inherit;background:transparent}.intro-kicker{font-size:12px;letter-spacing:1px;padding-top:10px}.intro-copy{max-width:850px}.intro-label{font-size:15px}.intro-copy h2{font-size:clamp(30px,3vw,52px);font-weight:500;line-height:1.4;letter-spacing:-1px;margin:24px 0 35px}.intro-copy>p{font-size:16px;line-height:1.95;max-width:690px}.intro-tags{display:flex;flex-wrap:wrap;gap:12px;margin:35px 0}.intro-tags span{font-size:12px;padding:9px 13px;border:1px solid #8884;border-radius:30px}.intro-back{padding:12px 0;margin-top:30px;font-size:13px}.side-nav{position:fixed}.personal-introduction .intro-copy p{opacity:.8}@media(max-width:700px){.personal-introduction{padding:105px 6% 60px;grid-template-columns:1fr;gap:25px}.intro-copy{padding-right:65px}.intro-copy>p{font-size:14px}.intro-copy h2{font-size:28px}.intro-tags{gap:8px}.intro-tags span{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Each section lands on a full viewport boundary. */
main,.personal-introduction{scroll-snap-align:start;scroll-snap-stop:always}
#all{font-size:12px;padding:13px 19px;min-width:110px;border-radius:7px}@media(max-width:700px){#all{font-size:11px;padding:11px 16px;min-width:98px}}
/* The former section navigation stays hidden; retain only its replacement caption. */
.side-nav,.side-nav[hidden]{display:none!important}
/* Reference header: open branding, capsule navigation, contrasting contact pill. */
header{height:82px;padding:0 3%;border:0!important;border-bottom:0!important;box-shadow:none!important;background:rgba(255,255,255,.74)}header .main-nav{padding:5px 7px;gap:3px;border:1px solid rgba(30,30,30,.07);border-radius:999px;background:rgba(255,255,255,.48);box-shadow:0 1px 3px #00000003}header .main-nav a,header .main-nav button{padding:9px 18px;border-radius:999px;font-size:12px;font-weight:400;line-height:1.2;opacity:1}header .main-nav a:hover,header .main-nav button:hover{background:rgba(0,0,0,.045);opacity:1}header .cooperate{border:0;background:#171817;color:#f6f4ed;padding:12px 19px;border-radius:999px;font-size:12px;line-height:1.2}.intro-state header{border:0!important;box-shadow:none!important;background:rgba(40,41,39,.74)}.intro-state header .main-nav{background:rgba(238,233,221,.045);border-color:rgba(238,233,221,.13)}.intro-state header .main-nav a:hover,.intro-state header .main-nav button:hover{background:rgba(238,233,221,.08)}.intro-state header .cooperate{background:#eee9dd;color:#282927;border:0}header .cooperate:hover{opacity:.85}@media(max-width:700px){header{height:72px;padding:0 4%}header .logo{font-size:15px}header .main-nav{padding:4px;gap:0}header .main-nav a,header .main-nav button{padding:7px 8px;font-size:10px}header .cooperate{font-size:10px;padding:10px 12px}}
/* Match the introduction CTA to the header contact pill in both themes. */
#all{display:inline-flex!important;align-items:center;justify-content:center;opacity:1!important;visibility:visible!important;background:#171817;color:#f6f4ed;border:0;border-radius:999px;padding:12px 19px;min-width:110px;font-size:12px;line-height:1.2;box-shadow:none;transition:background-color 1.3s ease,color 1.3s ease,opacity .2s ease}.intro-state #all{background:#eee9dd;color:#282927;border:0}#all:hover{background:#171817;opacity:.85!important}.intro-state #all:hover{background:#eee9dd;opacity:.85!important}@media(max-width:700px){#all{font-size:10px;padding:10px 12px;min-width:98px}}
/* Scale footer contents individually so the right CTA never leaves the viewport. */
footer,body.intro-state footer{transform:none!important}footer>div{transform:scale(1.12);transform-origin:left bottom}body.intro-state footer>div{transform:scale(1)}footer :is(#all,.project-cases){transform:scale(1.06);transform-origin:right bottom;opacity:1!important;visibility:visible!important;display:inline-flex!important}body.intro-state footer :is(#all,.project-cases){transform:scale(1)}footer>div,footer :is(#all,.project-cases){transition:transform 1.4s cubic-bezier(.22,.61,.36,1),background-color 1.3s ease,color 1.3s ease}
/* Glass belongs only to the navigation capsule, not the full-width header. */
header,body.intro-state header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;pointer-events:none}header>a,header>nav{pointer-events:auto}header::before{display:none!important}header .main-nav{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(30,30,30,.065);box-shadow:inset 0 1px 0 #ffffffb3,0 2px 8px #00000003;padding:4px;gap:2px}header .main-nav a,header .main-nav button{transition:background-color .22s ease,box-shadow .22s ease,color .22s ease,transform .14s ease;background:transparent}header .main-nav a:hover,header .main-nav button:hover{background:rgba(255,255,255,.75);box-shadow:0 1px 4px #00000006}header .main-nav .nav-current{background:rgba(255,255,255,.85);box-shadow:0 1px 5px #00000009}header .main-nav a:active,header .main-nav button:active{transform:scale(.97);background:rgba(235,235,235,.8)}body.intro-state header .main-nav{background:rgba(50,51,48,.55);border-color:rgba(238,233,221,.14);box-shadow:inset 0 1px 0 #ffffff0a,0 2px 8px #00000008}body.intro-state header .main-nav a:hover,body.intro-state header .main-nav button:hover{background:rgba(238,233,221,.1);box-shadow:none}body.intro-state header .main-nav .nav-current{background:rgba(238,233,221,.14);box-shadow:0 1px 5px #0000000a}body.intro-state header .main-nav a:active,body.intro-state header .main-nav button:active{background:rgba(238,233,221,.2)}
/* Wider reference-style capsule with a quiet, softly lit active segment. */
header .main-nav{gap:16px;padding:5px 12px}header .main-nav a,header .main-nav button{min-width:72px;padding:10px 22px;border:0;border-radius:999px;box-shadow:none}header .main-nav .nav-current{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,248,246,.65));box-shadow:0 1px 6px rgba(0,0,0,.025)}header .main-nav a:hover,header .main-nav button:hover{background:rgba(255,255,255,.55);box-shadow:none}header .main-nav .nav-current:hover{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,248,246,.72));box-shadow:0 1px 6px rgba(0,0,0,.025)}body.intro-state header .main-nav{gap:16px}body.intro-state header .main-nav .nav-current{background:linear-gradient(180deg,rgba(238,233,221,.14),rgba(238,233,221,.065));box-shadow:none}body.intro-state header .main-nav .nav-current:hover{background:rgba(238,233,221,.16)}@media(max-width:700px){header .main-nav,body.intro-state header .main-nav{gap:4px;padding:4px 6px}header .main-nav a,header .main-nav button{min-width:0;padding:8px 9px}}

/* Quiet sequential edge highlights, leaving the control interiors untouched. */
@property --edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
header .cooperate,footer :is(#all,.project-cases){position:relative;overflow:visible}header .main-nav{overflow:visible}
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{content:'';position:absolute;inset:-1px;padding:1px;border-radius:999px;pointer-events:none;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 285deg,rgba(115,173,215,.15) 310deg,rgba(139,183,218,.7) 335deg,rgba(213,194,230,.7) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:quiet-edge-pass 12s linear infinite;opacity:0}
header .main-nav::after{animation-delay:0s}header .cooperate::after{animation-delay:4s}footer :is(#all,.project-cases)::after{animation-delay:8s}
@keyframes quiet-edge-pass{0%{--edge-angle:0deg;opacity:0}3%{opacity:.55}29%{opacity:.55}33.333%{--edge-angle:360deg;opacity:0}100%{--edge-angle:360deg;opacity:0}}
@media(prefers-reduced-motion:reduce){header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{animation:none;opacity:0}}
/* A more legible edge sweep, still confined to the control outline. */
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{inset:-2px;padding:2px;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 245deg,rgba(76,185,224,.25) 275deg,#78dcf5 315deg,#bda5f1 340deg,#eadcfb 352deg,transparent 360deg);filter:drop-shadow(0 0 3px rgba(116,198,239,.45));animation-duration:9s}header .main-nav::after{animation-delay:0s}header .cooperate::after{animation-delay:3s}footer :is(#all,.project-cases)::after{animation-delay:6s}@keyframes quiet-edge-pass{0%{--edge-angle:0deg;opacity:.15}3%{opacity:1}30%{opacity:1}33.333%{--edge-angle:360deg;opacity:.15}100%{--edge-angle:360deg;opacity:.15}}@media(prefers-reduced-motion:reduce){header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{animation:none;opacity:.4}}
/* All three edges move continuously at the same speed from independent phases. */
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{animation:parallel-edge-flow 6s linear infinite;animation-delay:var(--edge-phase,0s);opacity:1}@keyframes parallel-edge-flow{from{--edge-angle:0deg}to{--edge-angle:360deg}}@media(prefers-reduced-motion:reduce){header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{animation:none;opacity:.4}}
/* A permanent illuminated rim supports the travelling highlight. */
header .main-nav::before,header .cooperate::before,footer :is(#all,.project-cases)::before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:999px;pointer-events:none;background:linear-gradient(125deg,rgba(112,201,228,.58),rgba(177,158,221,.4) 45%,rgba(116,197,223,.6));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.8}.intro-state header .main-nav::before,.intro-state header .cooperate::before,.intro-state footer :is(#all,.project-cases)::before{opacity:.9}
/* Cards render at double size, so a 40px radius displays at roughly 20px. */
.card{border-radius:40px;overflow:hidden}.card .work-image{border-radius:inherit}@media(max-width:700px){.card{border-radius:28px}}
/* Integrate highlights into the material rather than outlining it in neon. */
header .main-nav::before,header .cooperate::before,footer :is(#all,.project-cases)::before{inset:0;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.45),rgba(160,160,150,.16) 45%,rgba(255,255,255,.22));opacity:.55}.intro-state header .main-nav::before,.intro-state header .cooperate::before,.intro-state footer :is(#all,.project-cases)::before{opacity:.6}
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{inset:0;padding:1px;filter:none;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 300deg,rgba(221,227,224,.12) 320deg,rgba(244,242,229,.65) 342deg,rgba(194,209,208,.25) 354deg,transparent 360deg);opacity:.6;animation-duration:8s}
header .main-nav{border-color:rgba(255,255,255,.14)}body:not(.intro-state) header .main-nav{border-color:rgba(30,30,30,.065)}
/* Visible iridescent travelling segment, without a permanent neon outline. */
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{inset:-1px;padding:2px;opacity:.95;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 235deg,rgba(91,197,234,.12) 265deg,#78dbf5 300deg,#c1a5f4 325deg,#f1c4e5 343deg,#d9f8ff 354deg,transparent 360deg);filter:drop-shadow(0 0 2px rgba(132,191,237,.28));animation-duration:6s}header .main-nav::before,header .cooperate::before,footer :is(#all,.project-cases)::before{opacity:.35}
@media(prefers-reduced-motion:reduce){header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{animation:none;opacity:.6}}
/* Continuous iridescent perimeter with no transparent gaps. */
header .main-nav::after,header .cooperate::after,footer :is(#all,.project-cases)::after{background:conic-gradient(from var(--edge-angle),#79cce9 0deg,#afa1e6 75deg,#e6b8d5 145deg,#eed7b5 205deg,#9bd9d7 275deg,#79cce9 360deg);inset:-1px;padding:1.5px;opacity:.85;filter:drop-shadow(0 0 2px rgba(132,191,237,.2))}header .main-nav::before,header .cooperate::before,footer :is(#all,.project-cases)::before{opacity:0}
.card,.card .work-image{border-radius:0!important}
/* Editorial introduction with floating capability notes and a portrait placeholder. */
.personal-introduction.about-composition{position:relative;display:block;height:100svh;min-height:820px;padding:110px 6% 0;overflow:clip;background:#f8f7f3;color:#20221f;isolation:isolate}.about-heading{position:relative;text-align:center;z-index:4}.about-eyebrow{font-size:10px;letter-spacing:2px;color:#88897f}.about-heading h2{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(42px,4.8vw,80px);font-weight:400;letter-spacing:-2px;line-height:1.16;margin:22px 0}.about-heading h2 em{font-weight:400}.about-heading>p{font-size:14px;line-height:1.8;color:#777a70;margin:0 auto 20px}.about-actions{display:flex;justify-content:center;align-items:center;gap:12px}.about-actions>a,.about-actions>button{font-size:12px;line-height:1.2;border-radius:999px;padding:13px 20px;border:1px solid #e5e4de}.about-actions>a{background:#1e201d;color:#f8f7f3;border-color:#1e201d}.about-actions .intro-back{margin:0;background:#ffffff70}.about-portrait{position:absolute;width:min(45vw,650px);height:51%;bottom:0;left:50%;transform:translateX(-50%);z-index:2}.about-portrait svg{width:100%;height:100%;display:block}.about-portrait>span{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#555b52;white-space:nowrap}.about-float{position:absolute;width:180px;background:#ffffffa8;border:1px solid #fff;border-radius:25px;padding:23px;z-index:3;box-shadow:0 8px 40px #363a2e05}.about-float-left{top:32%;left:9%;transform:rotate(-7deg)}.about-float-right{top:40%;right:9%;transform:rotate(8deg)}.about-card-icon{font-size:24px}.about-float h3{font-size:17px;line-height:1.5;font-weight:500;margin:15px 0 9px}.about-float p{font-size:11px;color:#888a81;line-height:1.8;margin:0}.about-orbit{position:absolute;width:65%;height:40%;border:1px solid #dfdfd5;border-top:0;border-radius:0 0 50% 50%;top:36%;left:17.5%;z-index:0}.about-glass{position:absolute;z-index:3;display:flex;flex-direction:column;gap:6px;padding:17px 22px;border:1px solid #ffffffd9;background:#ffffff73;backdrop-filter:blur(16px);border-radius:17px;box-shadow:0 8px 20px #21281d08}.about-glass b{font-size:14px;font-weight:500}.about-glass span{font-size:10px;color:#6e7369}.about-glass-one{left:33%;bottom:30%;transform:rotate(-9deg)}.about-glass-two{left:39%;bottom:17%;transform:rotate(-5deg)}.about-glass-three{right:24%;bottom:27%;transform:rotate(10deg)}.about-stat{position:absolute;left:6%;bottom:12%;display:grid;gap:11px;z-index:3}.about-stat strong{font-size:27px;font-weight:400}.about-stat small{font-size:12px;font-weight:400;color:#777a70;margin-left:5px}.about-stat>span{font-size:10px;color:#888a81}.about-sign{position:absolute;right:6%;bottom:12%;z-index:3}.about-sign>span{font-size:28px}.about-sign p{font-size:11px;line-height:1.8;color:#888a81}@media(max-width:700px){.personal-introduction.about-composition{min-height:800px;padding:105px 5% 0}.about-heading h2{font-size:38px}.about-heading>p{font-size:12px}.about-float{width:125px;padding:16px;border-radius:18px}.about-float h3{font-size:12px}.about-float p{font-size:9px}.about-float-left{left:4%;top:46%}.about-float-right{right:4%;top:49%}.about-portrait{width:88vw;height:40%}.about-glass{padding:12px 14px}.about-glass-one{left:15%;bottom:25%}.about-glass-two{left:32%;bottom:13%}.about-glass-three{right:7%;bottom:22%}.about-glass b{font-size:12px}.about-glass span{font-size:8px}.about-stat{left:5%;bottom:4%;gap:5px}.about-stat strong{font-size:20px}.about-stat>span{font-size:8px}.about-sign{right:5%;bottom:4%}.about-sign p{font-size:9px}.about-orbit{top:48%;height:25%}}
/* Annotated introduction: consistent sans typography and static experience labels. */
.about-heading h2,.about-heading h2 em{font-family:Arial,'Microsoft YaHei',sans-serif;font-style:normal;font-weight:600;letter-spacing:-1.5px}.about-heading>p{max-width:650px;line-height:1.9;margin-left:auto;margin-right:auto}.experience-pill{display:inline-flex;align-items:center;justify-content:center;padding:12px 19px;border-radius:999px;background:#eeede7;border:1px solid #e4e3dd;font-size:12px;line-height:1.3;color:#393d35}.experience-pill:first-child{background:#22251f;color:#f8f7f3;border-color:#22251f}
/* The light introduction always receives a light-theme header, regardless of gallery state. */
body.about-visible header{color:#20221f}body.about-visible header .logo{color:#20221f}body.about-visible header .main-nav{background:rgba(255,255,255,.6);border-color:rgba(30,30,30,.07);box-shadow:inset 0 1px 0 #ffffffb3,0 2px 8px #00000003}body.about-visible header .main-nav a,body.about-visible header .main-nav button{color:#20221f}body.about-visible header .main-nav .nav-current{background:rgba(255,255,255,.9);box-shadow:0 1px 6px #00000007}body.about-visible header .main-nav a:hover,body.about-visible header .main-nav button:hover{background:rgba(255,255,255,.7)}body.about-visible header .cooperate{background:#171817;color:#f6f4ed;border:0}@media(max-width:700px){.about-heading>p{font-size:12px;max-width:90%}.experience-pill{font-size:10px;padding:10px 13px}.about-heading h2{letter-spacing:-1px}}
.about-heading h2,.about-heading h2 em{font-weight:400}.about-actions{flex-wrap:wrap;gap:9px;max-width:820px;margin:0 auto}.experience-pill,.experience-pill:first-child{background:#eeede7;color:#393d35;border:1px solid #e4e3dd;font-weight:400;transition:background-color .22s ease,color .22s ease,border-color .22s ease;cursor:default}.experience-pill:hover,.experience-pill:focus-visible{background:#22251f;color:#f8f7f3;border-color:#22251f;outline:none}@media(max-width:700px){.about-actions{max-width:92%;gap:7px}.experience-pill{padding:9px 12px}}
.experience-pill.pill-highlight{background:#22251f;color:#f8f7f3;border-color:#22251f}
/* Carry the shared iridescent edge language into the introduction labels. */
.experience-pill{position:relative;overflow:visible}.experience-pill::after{content:'';position:absolute;inset:-1px;padding:1.5px;border-radius:999px;pointer-events:none;background:conic-gradient(from var(--edge-angle),#79cce9 0deg,#afa1e6 75deg,#e6b8d5 145deg,#eed7b5 205deg,#9bd9d7 275deg,#79cce9 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.65;filter:drop-shadow(0 0 2px rgba(132,191,237,.15));animation:parallel-edge-flow 6s linear infinite;animation-delay:var(--edge-phase,0s);transition:opacity .22s ease}.experience-pill.pill-highlight::after,.experience-pill:hover::after{opacity:1}@media(prefers-reduced-motion:reduce){.experience-pill::after{animation:none}}
/* Keep the original colour rim only on the light labels. */
.experience-pill.pill-highlight::after,.experience-pill:hover::after,.experience-pill:focus-visible::after{opacity:0;visibility:hidden}.experience-pill.pill-highlight,.experience-pill:hover,.experience-pill:focus-visible{box-shadow:none}
/* Inverted active navigation segment, matched to the current surface. */
header .main-nav .nav-current,header .main-nav .nav-current:hover,body.about-visible header .main-nav .nav-current,body.about-visible header .main-nav .nav-current:hover{background:#22251f;color:#f8f7f3;box-shadow:none}body.intro-state:not(.about-visible) header .main-nav .nav-current,body.intro-state:not(.about-visible) header .main-nav .nav-current:hover{background:#eee9dd;color:#282927;box-shadow:none}
/* One consistent navigation surface; no active or theme inversion. */
header .main-nav,body.intro-state header .main-nav,body.about-visible header .main-nav{background:rgba(255,255,255,.75);border-color:rgba(30,30,30,.065);box-shadow:inset 0 1px 0 #ffffffb3,0 2px 8px #00000003}header .main-nav a,header .main-nav button,body.intro-state header .main-nav a,body.intro-state header .main-nav button,body.about-visible header .main-nav a,body.about-visible header .main-nav button{color:#252723}header .main-nav .nav-current,header .main-nav .nav-current:hover,body.intro-state:not(.about-visible) header .main-nav .nav-current,body.intro-state:not(.about-visible) header .main-nav .nav-current:hover,body.about-visible header .main-nav .nav-current,body.about-visible header .main-nav .nav-current:hover{background:transparent;color:#252723;box-shadow:none}header .main-nav a:hover,header .main-nav button:hover,body.intro-state header .main-nav a:hover,body.intro-state header .main-nav button:hover{background:rgba(0,0,0,.035);color:#252723;box-shadow:none}

/* Selected portrait: preserve proportions and anchor shoulders to the section edge. */
.about-portrait{display:flex;align-items:flex-end;justify-content:center}.about-portrait>img,.about-portrait>video{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}

.portrait-toggle>img,.portrait-toggle>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.portrait-toggle>video{opacity:0;pointer-events:none}
.portrait-toggle>video.is-visible{opacity:1}
.portrait-toggle.has-played>.portrait-poster{visibility:hidden}
.resume-toggle{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:5;border:0;border-radius:999px;padding:14px 24px;background:#20221f;color:#f8f7f3;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,box-shadow .2s}
.resume-toggle:hover{background:#383b35;box-shadow:0 4px 18px #20221f18}
.resume-toggle:focus-visible{outline:2px solid #8b8e84;outline-offset:4px}
.resume-toggle:disabled{cursor:wait}
@media(max-width:700px){.resume-toggle{right:5%;top:57%;padding:11px 17px;font-size:12px}}

/* Preserve hair detail; feather only the outermost frame instead of the portrait silhouette. */
.about-portrait.portrait-toggle{width:35vw;max-width:none;height:auto;aspect-ratio:2872/2160;bottom:0;isolation:isolate;filter:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.portrait-toggle>img,.portrait-toggle>video{object-fit:contain;object-position:center;filter:none}
.portrait-toggle::after{content:'';display:block;position:absolute;inset:0;z-index:3;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 44%,transparent 66%,rgba(0,0,0,.25) 81%,#000 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 44%,transparent 66%,rgba(0,0,0,.25) 81%,#000 100%)}
/* Curved glass resume ribbon layered above the portrait. */
.career-orbit{position:absolute;left:50%;bottom:2%;width:min(78vw,1180px);height:44%;transform:translateX(-50%);z-index:4;perspective:1100px;pointer-events:none}
.career-glass{position:absolute;display:flex;gap:13px;align-items:flex-start;width:280px;padding:21px 23px;border-radius:29px;border:1px solid #ffffffbf;background:linear-gradient(130deg,#ffffffcc,#f6f6f270);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:inset 0 1px 1px #fff,0 14px 32px #20251d0c;color:#252822;opacity:0;translate:0 35px;transition:opacity .65s ease,translate .85s cubic-bezier(.2,.7,.2,1)}
.career-glass-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e5e9df;color:#657052;font-size:21px}
.career-glass small{font-size:10px;letter-spacing:.5px;color:#777e71}.career-glass h3{font-size:17px;line-height:1.35;font-weight:500;margin:7px 0 5px}.career-glass strong{font-size:12px;font-weight:400;color:#555e4e}.career-glass p{font-size:11px;line-height:1.8;color:#7b8275;margin:10px 0 0}
.career-glass-1{left:10%;top:0;transform:rotate(-9deg) rotateY(16deg);transition-delay:.06s}
.career-glass-2{left:1%;top:49%;transform:rotate(-8deg) rotateY(23deg);transition-delay:.14s}
.career-glass-3{right:0;top:12%;transform:rotate(10deg) rotateY(-22deg);transition-delay:.22s}
.career-glass-4{right:7%;top:63%;transform:rotate(7deg) rotateY(-15deg);transition-delay:.3s}
.resume-open .career-glass{opacity:1;translate:0 0}
@media(max-width:1000px){.career-glass{width:230px;padding:15px;gap:10px}.career-glass h3{font-size:14px}.career-glass p{font-size:10px}.career-orbit{width:90vw}}
@media(max-width:700px){.career-orbit{width:96vw;height:38%;bottom:3%}.career-glass{width:44%;padding:12px;border-radius:20px;gap:7px}.career-glass-icon{width:23px;height:23px;font-size:16px;border-radius:7px}.career-glass h3{font-size:12px}.career-glass small{font-size:8px}.career-glass strong{font-size:10px}.career-glass p{font-size:9px;line-height:1.55;margin-top:6px}.career-glass-1{left:2%;top:0}.career-glass-2{left:2%;top:53%}.career-glass-3{right:2%;top:5%}.career-glass-4{right:2%;top:58%}}
@media(prefers-reduced-motion:reduce){.career-glass{transition:none}}
/* Orbit follows the head: upper-left, foreground-left, right and rear-right. */
.career-orbit{width:58vw;max-width:1050px;height:42%;bottom:1%;perspective:850px;perspective-origin:50% 48%;transform-style:preserve-3d}
.career-glass{width:clamp(200px,19vw,310px);padding:22px 24px;border-radius:27px / 34px;background:linear-gradient(110deg,#ffffffb8 0%,#ffffff6b 48%,#eaece75c 100%);border:1px solid #ffffffc9;box-shadow:inset 1px 1px 2px #ffffffed,inset -1px -1px 2px #ffffff38,0 12px 30px #242a2010;transform-style:preserve-3d;backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.career-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,#ffffff38,transparent 36%,transparent 70%,#ffffff24);box-shadow:inset 0 -1px 0 #ffffff80}
.career-glass-1{left:13%;top:-4%;z-index:3;transform:translateZ(15px) rotateZ(-10deg) rotateY(24deg) rotateX(-7deg);border-radius:30px 24px 31px 25px / 39px 25px 35px 27px}
.career-glass-2{left:4%;top:43%;z-index:5;transform:translateZ(65px) rotateZ(-8deg) rotateY(16deg) rotateX(4deg)}
.career-glass-3{right:0;top:20%;z-index:4;transform:rotateZ(10deg) rotateY(-34deg) rotateX(-5deg);border-radius:24px 35px 29px 25px / 25px 48px 35px 27px}
.career-glass-4{right:5%;top:71%;z-index:2;transform:translateZ(-30px) rotateZ(9deg) rotateY(-30deg);opacity:0}
.resume-open .career-glass-4{opacity:.85}
.career-glass-icon{width:35px;height:35px;border-radius:11px;color:#fff;box-shadow:inset 0 1px 1px #ffffff70,0 3px 9px #0000000a}
.career-glass-icon svg{width:23px;height:23px;display:block}
.career-glass-1 .career-glass-icon{background:#c8a052}
.career-glass-2 .career-glass-icon{background:#638ddc}
.career-glass-3 .career-glass-icon{background:#292b2e}
@media(max-width:700px){.career-orbit{width:94vw;height:37%;bottom:2%}.career-glass{width:44%;padding:13px;gap:8px}.career-glass-icon{width:26px;height:26px;border-radius:8px}.career-glass-icon svg{width:18px;height:18px}.career-glass-1{left:4%;top:0}.career-glass-2{left:0;top:48%}.career-glass-3{right:0;top:15%}.career-glass-4{right:1%;top:67%}}
/* Lift and spread the resume orbit; keep all four card bounds within the section. */
.career-orbit{width:64vw;max-width:1280px;height:48%;bottom:7%;perspective-origin:50% 45%}
.career-glass-1{left:9%;top:0;transform:translateZ(15px) rotateZ(-8deg) rotateY(20deg) rotateX(-5deg)}
.career-glass-2{left:0;top:48%;transform:translateZ(45px) rotateZ(-7deg) rotateY(18deg) rotateX(3deg)}
.career-glass-3{right:1%;top:3%;transform:rotateZ(8deg) rotateY(-27deg) rotateX(-4deg)}
.career-glass-4{right:6%;top:53%;transform:translateZ(-15px) rotateZ(7deg) rotateY(-22deg)}
@media(max-width:1000px){.career-orbit{width:86vw;height:43%;bottom:8%}.career-glass-1{left:4%}.career-glass-3{right:0}.career-glass-4{right:3%}}
@media(max-width:700px){.career-orbit{width:94vw;height:38%;bottom:9%}.career-glass-1{left:3%;top:0}.career-glass-2{left:0;top:51%}.career-glass-3{right:0;top:3%}.career-glass-4{right:2%;top:54%}}/* Yikuier takes the front-center position; career cards are actionable. */
.career-glass-1{left:3%;top:0;z-index:3}
.career-glass-2{left:24%;top:30%;z-index:6;transform:translateZ(70px) rotateZ(-5deg) rotateY(8deg);width:clamp(230px,21vw,340px)}
.career-glass-3{right:0;top:4%}
.career-glass-4{right:5%;top:56%}
.career-glass{transition:opacity .65s ease,translate .85s cubic-bezier(.2,.7,.2,1),scale .3s ease,box-shadow .3s ease}
.resume-open .career-glass{pointer-events:auto}
.career-glass:hover,.career-glass:focus-within{scale:1.055;z-index:10;box-shadow:inset 0 1px 2px #fff,0 18px 40px #20251d20}
.career-detail-link{position:absolute;inset:0;border-radius:inherit;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px 18px;text-decoration:none;color:#525b49;font-size:10px}
.career-detail-link span{opacity:0;translate:0 3px;transition:opacity .2s,translate .2s}
.career-glass:hover .career-detail-link span,.career-glass:focus-within .career-detail-link span{opacity:1;translate:0 0}
.career-detail-link:focus-visible{outline:2px solid #849c74;outline-offset:4px}
.career-glass-4 .career-glass-icon{background:#87a28e}
.career-glass p{padding-bottom:8px}
@media(max-width:700px){.career-glass-2{left:0;top:50%;width:46%;transform:translateZ(25px) rotateZ(-5deg) rotateY(8deg)}.career-glass-1{left:3%;top:0}.career-glass-4{right:2%;top:54%}.career-detail-link span{opacity:1;font-size:8px}.career-detail-link{padding:6px 12px}}

/* Requested four-corner arrangement; timings are driven by video currentTime. */
.career-orbit{width:67vw;max-width:1360px;height:48%;bottom:7%}
.career-glass{width:clamp(230px,22vw,355px);transition:scale .3s ease,box-shadow .3s ease;transition-delay:0s!important;opacity:0;pointer-events:none}
.resume-open .career-glass,.resume-open .career-glass-4{opacity:0;pointer-events:none}
.career-glass-1{left:0;top:0;z-index:4;transform:rotateZ(-7deg) rotateY(18deg) rotateX(-4deg)}
.career-glass-2{left:auto;right:0;top:0;z-index:6;width:clamp(245px,23vw,375px);transform:translateZ(25px) rotateZ(6deg) rotateY(-20deg)}
.career-glass-3{right:auto;left:7%;top:57%;z-index:5;transform:rotateZ(-6deg) rotateY(17deg)}
.career-glass-4{right:3%;top:53%;z-index:4;transform:rotateZ(7deg) rotateY(-20deg)}
@media(max-width:1000px){.career-orbit{width:88vw}.career-glass,.career-glass-2{width:31vw}}
@media(max-width:700px){.career-orbit{width:95vw;height:38%;bottom:9%}.career-glass,.career-glass-2{width:45%;padding:13px}.career-glass-1{left:0;top:0}.career-glass-2{left:auto;right:0;top:0}.career-glass-3{left:1%;right:auto;top:57%}.career-glass-4{right:0;top:55%}}
/* Shared iridescent outline appears on interactive resume cards. */
.career-glass::before{content:'';position:absolute;inset:-1px;padding:1.5px;border-radius:inherit;pointer-events:none;z-index:3;background:conic-gradient(from var(--edge-angle),#79cce9 0deg,#afa1e6 75deg,#e6b8d5 145deg,#eed7b5 205deg,#9bd9d7 275deg,#79cce9 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;filter:drop-shadow(0 0 2px #84bfed55);animation:parallel-edge-flow 6s linear infinite;transition:opacity .25s ease}
.career-glass:hover::before,.career-glass:focus-within::before{opacity:1}
@media(prefers-reduced-motion:reduce){.career-glass::before{animation:none}}

/* Resume control rests over the portrait's chest. */
.resume-toggle{right:auto;left:calc(50% - 8vw);top:auto;bottom:3.5%;transform:translateX(-50%);z-index:12}
/* Fine complete rim plus a thicker, smoothly tapered travelling highlight. */
.career-glass::before{padding:1px;opacity:0;background:conic-gradient(from var(--edge-angle),#79cce9,#afa1e6,#e6b8d5,#eed7b5,#9bd9d7,#79cce9);filter:none;animation-duration:3s}
.career-glass::after{inset:-1.5px;padding:2.5px;border-radius:inherit;z-index:4;box-shadow:none;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 235deg,rgba(121,204,233,0) 245deg,rgba(121,204,233,.18) 260deg,rgba(121,204,233,.7) 278deg,#b8eaff 295deg,#d3bbff 311deg,rgba(230,184,213,.7) 328deg,rgba(230,184,213,.15) 345deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 3px #a9c9f070);opacity:0;animation:parallel-edge-flow 3s linear infinite;transition:opacity .22s ease}
.career-glass:hover::before,.career-glass:focus-within::before{opacity:.75}
.career-glass:hover::after,.career-glass:focus-within::after{opacity:1}
@media(max-width:700px){.resume-toggle{right:auto;left:44%;top:auto;bottom:3%;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.career-glass::after{animation:none}}
/* One shared light treatment across navigation, controls, tags and career cards. */
.resume-toggle{left:50%;right:auto}
header .main-nav,header .cooperate,footer :is(#all,.project-cases),.experience-pill,.resume-toggle,.career-glass{--edge-phase:0s!important}
.resume-toggle{overflow:visible}
:is(header .main-nav,header .cooperate,footer :is(#all,.project-cases),.experience-pill,.resume-toggle,.career-glass)::before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;z-index:3;background:conic-gradient(from var(--edge-angle),#79cce9,#afa1e6,#e6b8d5,#eed7b5,#9bd9d7,#79cce9);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:none;opacity:.65;animation:parallel-edge-flow 3s linear infinite;animation-delay:0s}
:is(header .main-nav,header .cooperate,footer :is(#all,.project-cases),.experience-pill,.resume-toggle,.career-glass)::after{content:'';position:absolute;inset:-1.5px;padding:2.5px;border-radius:inherit;pointer-events:none;z-index:4;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 235deg,rgba(121,204,233,0) 245deg,rgba(121,204,233,.18) 260deg,rgba(121,204,233,.7) 278deg,#b8eaff 295deg,#d3bbff 311deg,rgba(230,184,213,.7) 328deg,rgba(230,184,213,.15) 345deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 3px #a9c9f070);opacity:.9;visibility:visible;animation:parallel-edge-flow 3s linear infinite;animation-delay:0s}
.career-glass::before,.career-glass::after{opacity:0}
.career-glass:hover::before,.career-glass:focus-within::before{opacity:.65}
.career-glass:hover::after,.career-glass:focus-within::after{opacity:1}
.about-heading .about-eyebrow,.about-heading h2,.about-heading>p{opacity:0;translate:0 16px;transition:opacity .85s ease,translate 1.1s cubic-bezier(.2,.65,.25,1)}
.about-heading h2{transition-delay:.12s}.about-heading>p{transition-delay:.28s}
.about-copy-visible .about-heading :is(.about-eyebrow,h2,p){opacity:1;translate:0 0}
.about-eyebrow{display:inline-block}
@media(max-width:700px){.resume-toggle{left:50%}}
@media(prefers-reduced-motion:reduce){.about-heading :is(.about-eyebrow,h2,p){opacity:1;translate:none;transition:none}:is(header .main-nav,header .cooperate,footer :is(#all,.project-cases),.experience-pill,.resume-toggle,.career-glass)::before,:is(header .main-nav,header .cooperate,footer :is(#all,.project-cases),.experience-pill,.resume-toggle,.career-glass)::after{animation:none}}
.career-orbit .career-glass::before,.career-orbit .career-glass::after{opacity:0!important}
.career-orbit .career-glass:is(:hover,:focus-within)::before{opacity:.65!important}
.career-orbit .career-glass:is(:hover,:focus-within)::after{opacity:1!important}
/* Restore the original restrained tag rim and suppress light on dark highlights. */
.about-actions .experience-pill::before{display:none}
.about-actions .experience-pill::after{inset:-1px;padding:1.5px;background:conic-gradient(from var(--edge-angle),#79cce9 0deg,#afa1e6 75deg,#e6b8d5 145deg,#eed7b5 205deg,#9bd9d7 275deg,#79cce9 360deg);opacity:.65;filter:drop-shadow(0 0 2px rgba(132,191,237,.15));animation:parallel-edge-flow 6s linear infinite;animation-delay:var(--tag-phase,0s);visibility:visible}
.about-actions .experience-pill:is(.pill-highlight,:hover,:focus-visible)::after{opacity:0;visibility:hidden}
/* Give each typographic tier room to arrive, followed by the supporting copy. */
.about-heading .about-eyebrow{transition:opacity 1.2s ease,translate 1.5s cubic-bezier(.2,.65,.25,1);transition-delay:.15s}
.about-heading h2{opacity:1;translate:none;transition:none}
.about-heading h2 .about-title-line{display:block;opacity:0;translate:0 24px;transition:opacity 1.4s ease,translate 1.8s cubic-bezier(.2,.65,.25,1);transition-delay:.55s}
.about-heading h2 .about-title-line+ .about-title-line{transition-delay:1.05s}
.about-heading>p{transition:opacity 1.4s ease,translate 1.8s cubic-bezier(.2,.65,.25,1);transition-delay:1.65s}
.about-copy-visible .about-heading h2 .about-title-line{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.about-heading h2 .about-title-line{opacity:1;translate:none;transition:none}.about-heading .about-eyebrow,.about-heading>p{transition:none}.about-actions .experience-pill::after{animation:none}}
/* Experience tags keep their emphasis states without animated light rims. */
.about-actions .experience-pill::before,.about-actions .experience-pill::after{display:none!important;animation:none!important}
/* Shared warm-white light canvas. */
body:not(.intro-state){background:#fff}.personal-introduction.about-composition{background:#f8f7f3}



/* Resume entry aligns with the gallery's right-hand section caption. */
.personal-introduction .resume-toggle{left:auto;right:3%;top:50%;bottom:auto;transform:none;background:#eee9dd;color:#282927;box-shadow:none;transition:background .25s,color .25s,box-shadow .25s}
.personal-introduction .resume-toggle:is(:hover,:active,[aria-expanded="true"]){background:#20221f;color:#f8f7f3;box-shadow:0 4px 18px #20221f18}
.about-footer{justify-content:flex-end;z-index:12}
.about-footer .project-cases{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible;border:0;border-radius:999px;padding:12px 19px;min-width:110px;background:#171817;color:#f6f4ed;font-size:12px;line-height:1.2;transform:scale(1.06);transform-origin:right bottom;transition:opacity .2s ease}
.about-footer .project-cases:hover{opacity:.85}
body.intro-state .about-footer .project-cases{background:#171817;color:#f6f4ed}
@media(max-width:700px){.personal-introduction .resume-toggle{left:auto;right:4%;top:50%;bottom:auto;transform:none}.about-footer .project-cases{font-size:10px;padding:10px 12px;min-width:98px}}
.projects-screen{position:relative;min-height:100svh;padding:125px 8% 65px;background:#f8f7f3;color:#242621;scroll-snap-align:start;scroll-margin-top:0}
.projects-heading{max-width:1100px;margin:0 auto 42px}.projects-heading>span{font-size:10px;letter-spacing:2px;color:#88897f}.projects-heading h2{font-size:clamp(32px,3.3vw,58px);font-weight:400;line-height:1.25;letter-spacing:-1.5px;margin:22px 0}.projects-heading>p{font-size:14px;color:#777a70;line-height:1.8}
.projects-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}.projects-grid article{padding:28px 30px;border:1px solid #ffffffc9;border-radius:24px;background:linear-gradient(125deg,#ffffffbc,#ffffff68);box-shadow:inset 0 1px 1px #fff,0 10px 30px #242a2006}.projects-grid small{font-size:10px;letter-spacing:1px;color:#868a80}.projects-grid h3{font-size:21px;font-weight:400;margin:18px 0 13px}.projects-grid p{font-size:13px;line-height:1.9;color:#6c7267;max-width:480px}.projects-grid article>span{display:block;margin-top:22px;font-size:10px;color:#8b9085}.projects-footnote{max-width:1100px;margin:28px auto 0;font-size:10px;color:#94988f}
@media(max-width:700px){.projects-screen{padding:105px 6% 45px}.projects-grid{grid-template-columns:1fr}.projects-grid article{padding:24px}.projects-grid h3{font-size:19px}}

/* Dark project chapter with softly layered, sculpted glass folders. */
.projects-screen.folder-projects{height:100svh;min-height:850px;background:#282927;color:#eee9dd;padding:115px 6% 40px;isolation:isolate;overflow:hidden}
.folder-projects .projects-heading{text-align:center;margin:0 auto;position:relative;z-index:3;pointer-events:none}.folder-projects .projects-heading>span{color:#a5a69d}.folder-projects .projects-heading h2{font-size:clamp(32px,3.5vw,64px);font-weight:400;margin:20px 0 22px;line-height:1.2}.folder-projects .projects-heading h2>span{display:block}.folder-projects .projects-heading>p{color:#a7aaa0;font-size:14px}
.folder-projects .projects-heading>span,.folder-projects .projects-heading h2>span,.folder-projects .projects-heading>p{opacity:0;translate:0 24px;transition:opacity 1.4s ease,translate 1.8s cubic-bezier(.2,.65,.25,1)}
.folder-projects .projects-heading>span{transition-delay:.15s}.folder-projects .projects-heading h2>span:first-child{transition-delay:.55s}.folder-projects .projects-heading h2>span:last-child{transition-delay:1.05s}.folder-projects .projects-heading>p{transition-delay:1.65s}.projects-copy-visible .projects-heading>span,.projects-copy-visible .projects-heading h2>span,.projects-copy-visible .projects-heading>p{opacity:1;translate:0 0}
.folder-grid{position:absolute;inset:0;z-index:2;max-width:1500px;margin:auto;pointer-events:none}
.project-folder{position:absolute;width:clamp(240px,25vw,410px);aspect-ratio:1.5;perspective:1100px;pointer-events:auto;outline:none;transition:transform .65s cubic-bezier(.2,.65,.25,1);filter:drop-shadow(0 18px 22px #0003)}
.folder-1{left:7%;top:43%;transform:rotate(-7deg)}.folder-2{right:7%;top:49%;transform:rotate(7deg)}.folder-3{left:13%;top:73%;transform:rotate(4deg)}.folder-4{right:12%;top:78%;transform:rotate(-5deg)}
.folder-back{position:absolute;inset:0 3% 7%;border-radius:27px;background-size:cover;background-position:center;clip-path:polygon(0 15%,52% 15%,63% 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 1px 2px #ffffff80;filter:brightness(.8)}
.folder-paper{position:absolute;inset:12% 11% 10%;border-radius:15px;background:linear-gradient(150deg,#f7f7f4,#bec6c4);transform:rotate(3deg);box-shadow:0 2px 10px #0002;transition:transform .65s cubic-bezier(.2,.65,.25,1)}.folder-paper span{display:block;padding:20px;font-size:9px;letter-spacing:2px;color:#777e7a}
.folder-front{position:absolute;inset:26% 0 0;border-radius:23px;background:linear-gradient(145deg,#ffffff72,#ffffff26 47%,#a4b0aa24);backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);border:1px solid #ffffff70;box-shadow:inset 0 1px 2px #ffffff8c,inset 0 -1px 1px #ffffff24,0 10px 25px #0002;clip-path:polygon(0 0,35% 0,48% 16%,100% 16%,100% 100%,0 100%);transform-origin:center bottom;transition:transform .65s cubic-bezier(.2,.65,.25,1),background .65s;display:flex;align-items:flex-end;justify-content:space-between;padding:22px;color:#f5f3ec}
.folder-label small{font-size:10px;color:#e4e7dfb3}.folder-label h3{font-size:clamp(16px,1.3vw,22px);font-weight:400;margin:8px 0 0;line-height:1.3}.folder-plus{display:flex;align-items:center;justify-content:center;flex:none;margin-left:12px;width:37px;height:37px;border-radius:13px;background:linear-gradient(150deg,#41453f,#191d19);border:1px solid #ffffff45;box-shadow:inset 0 1px 2px #ffffff36,0 3px 6px #0002;font-size:25px;font-weight:200}
.project-folder:is(:hover,:focus-visible){transform:translateY(-9px) rotate(0deg)}.project-folder:is(:hover,:focus-visible) .folder-paper{transform:translateY(-16px) rotate(0deg)}.project-folder:is(:hover,:focus-visible) .folder-front{transform:rotateX(-9deg);background:linear-gradient(145deg,#ffffff88,#ffffff30 47%,#a4b0aa30)}
body.projects-visible header .logo{color:#eee9dd}body.projects-visible header .main-nav{background:#3233308c}body.projects-visible header .main-nav a,body.projects-visible header .main-nav button{color:#eee9dd}body.projects-visible header .cooperate{background:#eee9dd;color:#282927}
@media(max-height:900px) and (min-width:701px){.folder-projects .projects-heading h2{font-size:42px}.project-folder{width:clamp(220px,23vw,340px)}.folder-1{top:43%;left:9%}.folder-2{top:46%;right:9%}.folder-3{top:70%;left:16%}.folder-4{top:73%;right:15%}}
@media(max-width:700px){.projects-screen.folder-projects{height:auto;min-height:100svh;padding:105px 6% 45px;overflow:visible}.folder-projects .projects-heading h2{font-size:32px}.folder-projects .projects-heading>p{font-size:12px}.folder-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px 16px;margin-top:55px;padding-bottom:25px}.project-folder{position:relative;inset:auto;width:100%;aspect-ratio:1.05}.folder-2,.folder-4{translate:0 30px}.folder-front{padding:14px 10px;border-radius:17px}.folder-label h3{font-size:13px}.folder-label small{font-size:8px}.folder-plus{width:25px;height:25px;border-radius:9px;font-size:19px;margin-left:4px}.folder-paper span{padding:15px;font-size:7px}}
@media(prefers-reduced-motion:reduce){.folder-projects .projects-heading>span,.folder-projects .projects-heading h2>span,.folder-projects .projects-heading>p{opacity:1;translate:none;transition:none}.project-folder,.folder-paper,.folder-front{transition:none}}
@media(min-width:701px){.project-folder{width:min(25vw,38svh,410px)}.folder-3{top:69%}.folder-4{top:72%}}
/* Centered, aligned project folders with readable labels. */
.folder-projects .folder-grid{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(850px,72vw);max-width:none;margin:48px auto 0;gap:38px 70px;pointer-events:none}
.folder-projects .project-folder{position:relative;inset:auto;width:100%;aspect-ratio:1.5;transform:none;translate:none}
.folder-projects .folder-front{color:#202621;background:linear-gradient(145deg,#ffffff9c,#e6ece580 47%,#d1dcd16b);text-shadow:none}
.folder-projects .folder-label small{color:#4d594e;font-size:11px}.folder-projects .folder-label h3{color:#202621;font-size:clamp(16px,1.3vw,22px);font-weight:500}
.folder-projects .project-folder:is(:hover,:focus-visible){transform:translateY(-7px)}
body.projects-visible header .main-nav :is(a,button),body.projects-visible header .main-nav :is(a,button).nav-current,body.projects-visible header .main-nav :is(a,button).nav-current:hover{color:#eee9dd;background:transparent;box-shadow:none}
body.projects-visible header .main-nav :is(a,button):hover{color:#fff;background:#ffffff12}
@media(min-width:701px) and (max-height:900px){.projects-screen.folder-projects{min-height:760px;padding-top:100px}.folder-projects .folder-grid{width:min(740px,70vw);gap:26px 65px;margin-top:32px}.folder-projects .projects-heading h2{font-size:38px;margin:16px 0}.folder-projects .folder-front{padding:19px}}
@media(max-width:700px){.folder-projects .folder-grid{width:100%;gap:30px 18px;margin-top:42px}.folder-projects .project-folder{aspect-ratio:1.05}.folder-projects .folder-front{padding:14px 10px}.folder-projects .folder-label small{font-size:8px}.folder-projects .folder-label h3{font-size:13px}}
/* Project navigation must win over legacy light-theme current-item rules. */
body.projects-visible header .main-nav :is(a,button),body.projects-visible header .main-nav .nav-current,body.projects-visible header .main-nav .nav-current:hover{color:#eee9dd!important;background:transparent!important;opacity:1!important;box-shadow:none!important}
/* Match the introduction's heading hierarchy at every viewport size. */
.folder-projects .projects-heading h2{font-family:Arial,'Microsoft YaHei',sans-serif;font-size:clamp(42px,4.8vw,80px);font-weight:400;letter-spacing:-1.5px;line-height:1.16;margin:22px 0}
.folder-projects .projects-heading>span{font-size:10px;letter-spacing:2px}.folder-projects .projects-heading>p{font-size:14px;line-height:1.9;max-width:650px;margin:0 auto 20px}
@media(max-width:700px){.folder-projects .projects-heading h2{font-size:38px;letter-spacing:-1px}.folder-projects .projects-heading>p{font-size:12px;max-width:90%}}
/* Give the project folders more breathing room below the heading. */
.folder-projects .folder-grid{margin-top:clamp(72px,7.5vh,100px)}
@media(max-width:700px){.folder-projects .folder-grid{margin-top:62px}}
.folder-projects .folder-grid{margin-top:clamp(105px,11vh,145px)}
@media(max-width:700px){.folder-projects .folder-grid{margin-top:85px}}

/* Reference silhouettes: white glass closed, dark sculpted glass open. */
.folder-projects .project-folder{aspect-ratio:1.34;filter:drop-shadow(0 14px 16px #0004)}
.folder-projects .folder-back{inset:0 1% 8%;border-radius:0;clip-path:url(#folder-back-tab);filter:none;box-shadow:inset 0 1px 2px #ffffffaa;background-size:cover;transition:inset .75s cubic-bezier(.2,.65,.25,1),clip-path .75s,border-radius .75s,filter .75s;}
.folder-projects .folder-front{inset:25% 1% 0;clip-path:url(#folder-closed);border:0;border-radius:0;transform:none;background:linear-gradient(180deg,#dce4e535 0%,#edf0ec7a 50%,#fffffff2 100%);backdrop-filter:blur(19px) saturate(110%);-webkit-backdrop-filter:blur(19px) saturate(110%);box-shadow:none;overflow:visible;padding:0;color:#171b19;transition:inset .75s cubic-bezier(.2,.65,.25,1),background .75s,color .75s,filter .75s,transform .75s;}
.folder-contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.folder-contour path{fill:none;stroke:#ffffffb8;stroke-width:1.6;vector-effect:non-scaling-stroke;transition:opacity .6s,stroke .6s}.folder-contour .open-contour{opacity:0}
.folder-projects .folder-label{position:absolute;left:9%;bottom:10%;max-width:73%;transition:left .75s,bottom .75s,color .75s}
.folder-projects .folder-label small{display:none}.folder-projects .folder-label h3{font-size:clamp(15px,1.25vw,22px);font-weight:500;margin:0;color:inherit}
.folder-projects .folder-plus{position:absolute;right:5%;bottom:8%;width:18%;height:auto;aspect-ratio:1;border-radius:30%;background:linear-gradient(145deg,#303330,#080a09 65%);border:1px solid #ffffff66;box-shadow:inset 0 2px 3px #ffffff55,inset 0 -2px 2px #000,0 2px 4px #0003;color:#eee;font-size:clamp(26px,2.4vw,42px);font-weight:200;transition:opacity .35s,transform .6s}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected){transform:translateY(-5px);filter:drop-shadow(0 20px 17px #0008)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-back{inset:3% 1% 12%;clip-path:inset(0 round 24px);filter:brightness(.82)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-front{inset:34% -5% -2%;clip-path:url(#folder-open);transform:none;background:linear-gradient(155deg,#1b2021b8,#101314e8 65%,#0b0d0ff5);color:#f1f0ec;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label{left:66%;bottom:68%;max-width:29%}.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label h3{font-size:clamp(12px,1vw,17px);line-height:1.3}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-plus{opacity:0;transform:scale(.8)}
.project-folder:is(:hover,:focus-visible,.folder-selected) .closed-contour{opacity:0}.project-folder:is(:hover,:focus-visible,.folder-selected) .open-contour{opacity:1;stroke:#ffffff36}
@media(max-width:700px){.folder-projects .project-folder{aspect-ratio:1.2}.folder-projects .folder-label h3{font-size:12px}.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label{left:58%;max-width:36%;bottom:65%}.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label h3{font-size:10px}}
@media(prefers-reduced-motion:reduce){.folder-projects .project-folder *{transition:none}}
/* Project 01 keeps only the VIS palette visible on its folder back. */
.folder-projects .kemi-folder .folder-back{background-image:none!important;background:transparent;overflow:hidden}
.folder-projects .kemi-folder .folder-back::before{content:'';position:absolute;inset:-25%;background:url('assets/kemi-vis/slide-01.jpg') center/cover;filter:blur(32px);transform:scale(1.15)}
.folder-projects .kemi-folder .folder-plus{pointer-events:auto;cursor:pointer;z-index:3}.kemi-play svg{width:43%;height:43%;display:block}
.folder-projects .kemi-folder:is(:hover,:focus-visible,.folder-selected) .folder-plus{opacity:1;transform:none}
.folder-projects .kemi-folder .folder-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.kemi-viewer{position:fixed;inset:0;margin:auto;width:min(1420px,92vw);max-width:92vw;height:min(820px,86svh);max-height:86svh;padding:0;border:1px solid #ffffff9c;border-radius:26px;overflow:hidden;background:#f8f7f3f5;color:#242621;box-shadow:0 35px 120px #0005}
.kemi-viewer::backdrop{background:#17201e66;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.project-viewer-open{overflow:hidden}
.kemi-viewer-layout{display:grid;grid-template-columns:1.35fr 1fr;height:100%;min-height:0}
.kemi-slideshow{display:flex;flex-direction:column;min-width:0;background:#e8eae6;padding:26px;gap:16px}
.kemi-slide-stage{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:12px;background:#dfe3df}
.kemi-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .65s ease}.kemi-slide.active{opacity:1}
.kemi-slide-controls{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#60685c;font-variant-numeric:tabular-nums}.kemi-slide-controls>div{display:flex;gap:8px}.kemi-slide-controls button{border:1px solid #b7c0b55c;border-radius:999px;padding:9px 14px;font-size:12px;background:#ffffff80;color:#343b32}.kemi-slide-controls button:hover{background:#fff}
.kemi-project-copy{padding:52px 42px 35px;overflow-y:auto;overscroll-behavior:contain;line-height:1.8}.kemi-project-copy>small{font-size:10px;letter-spacing:1.5px;color:#8b9285}.kemi-project-copy h2{font-size:clamp(28px,2.7vw,44px);line-height:1.25;font-weight:400;letter-spacing:-1px;margin:20px 0 28px}.kemi-project-copy dl{margin:0 0 30px;padding:18px 0;border-top:1px solid #dce0d7;border-bottom:1px solid #dce0d7;font-size:12px}.kemi-project-copy dl>div{display:grid;grid-template-columns:75px 1fr;gap:15px;margin:6px 0}.kemi-project-copy dt{color:#92988c}.kemi-project-copy dd{margin:0}.kemi-project-copy h3{font-size:14px;font-weight:500;margin:25px 0 9px}.kemi-project-copy p{font-size:13px;line-height:1.95;color:#687161;margin:0}.kemi-copy-note{display:block;font-size:10px;color:#969e8e;margin-top:30px}
.kemi-close{position:absolute;right:15px;top:13px;z-index:3;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#e3e6de;color:#40493a;font-size:24px;line-height:1}
@media(max-width:700px){.kemi-viewer{height:90svh;max-height:90svh;border-radius:20px}.kemi-viewer-layout{display:block;overflow:auto}.kemi-slideshow{height:48svh;padding:16px}.kemi-project-copy{padding:28px 24px;overflow:visible}.kemi-project-copy h2{font-size:30px}.kemi-close{background:#f8f7f3e6}}
@media(prefers-reduced-motion:reduce){.kemi-slide{transition:none}}
/* Remove the lower perimeter line; retain only the shaped upper rim. */
.folder-contour .closed-contour{d:path('M1 244 V39 Q1 1 34 1 H147 Q164 1 176 16 L206 42 Q218 53 239 53 H386 Q419 53 419 92 V244')}
.folder-contour .open-contour{display:none}
.folder-lifted-sheet{position:absolute;inset:9% 14% 10%;z-index:0;border-radius:15px 15px 8px 8px;background:linear-gradient(180deg,#fff,#f4f4f3 48%,#cdd0cd);border:1px solid #ffffffba;box-shadow:0 2px 8px #0002;opacity:0;transform:translateY(15px) scale(.94);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.65,.25,1),inset .75s cubic-bezier(.2,.65,.25,1)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-lifted-sheet{opacity:1;inset:-10% 12% 8%;transform:translateY(0) scale(1)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-back{inset:3% 1% 6%;clip-path:inset(0 round 24px);filter:none}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-front{inset:29% -4% -3%;clip-path:url(#folder-closed);background:linear-gradient(155deg,#e6ebe965,#e1e5e380 45%,#ffffffed);color:#171b19;transform:perspective(1000px) rotateX(-5deg);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .closed-contour{opacity:1;stroke:#ffffffa6}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label{left:7%;bottom:70%;max-width:73%}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label h3{font-size:clamp(15px,1.25vw,22px);line-height:1.3}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-plus{opacity:1;transform:none;background:linear-gradient(145deg,#f0f1ed85,#bfc6bf80);color:#202620;border:1px solid #424d4245;box-shadow:inset 0 1px 2px #fff8,0 1px 3px #0001;width:19%;border-radius:22%;}
@media(max-width:700px){.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label h3{font-size:12px}.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-label{bottom:66%}}
@media(prefers-reduced-motion:reduce){.folder-lifted-sheet{transition:none}}
/* Preserve the back silhouette across both states; only the sheet moves. */
.folder-projects .project-folder .folder-back,.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-back{inset:0 1% 8%;clip-path:url(#folder-back-tab);border:0;border-radius:0;box-shadow:none;transition:filter .7s ease;z-index:0;-webkit-mask-image:linear-gradient(#000 0%,#000 42%,transparent 88%);mask-image:linear-gradient(#000 0%,#000 42%,transparent 88%)}
.folder-projects .folder-lifted-sheet{z-index:1;border:0;box-shadow:none;-webkit-mask-image:linear-gradient(#000 0%,#000 38%,transparent 87%);mask-image:linear-gradient(#000 0%,#000 38%,transparent 87%)}
.folder-projects .folder-front{z-index:2;isolation:isolate}
/* Opaque diffusion at the lower pocket prevents rear edges showing through. */
.folder-projects .project-folder .folder-front,.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-front{background:linear-gradient(180deg,#e3e8e554 0%,#dce2df99 37%,#e6e9e5eb 69%,#f8f9f6 100%);backdrop-filter:blur(34px) saturate(105%);-webkit-backdrop-filter:blur(34px) saturate(105%);box-shadow:none}
.folder-projects .kemi-folder .folder-back::before{background-image:url('assets/kemi-vis/water-portrait.png');filter:blur(18px);inset:-15%;transform:scale(1.12)}
/* The pocket outline stays fixed while the sheet rises; avoid clip-path snapping. */
.folder-projects .project-folder .folder-front,.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-front{clip-path:url(#folder-closed);transform:none}
.folder-projects .project-folder:is(:hover,:focus-visible,.folder-selected) .folder-front{inset:29% -2% -1%}
.folder-projects .folder-front .folder-contour{z-index:2}.folder-projects .folder-label,.folder-projects .folder-plus{z-index:3}
/* Single reference study: fixed geometry, finely outlined dark frosted pocket. */
.reference-folder-stage{width:min(550px,80vw);aspect-ratio:550/524;margin:65px auto 0;position:relative;isolation:isolate;border-radius:2px;background-color:#eeefed;background-image:radial-gradient(circle,#daddd9 3px,transparent 4.5px);background-size:27px 27px;box-shadow:inset 0 0 40px #ffffff8c}
.reference-folder{position:absolute;inset:22.4% 4.5% 8.5%;filter:drop-shadow(0 12px 7px #0007)}
.reference-folder-back{position:absolute;left:10%;right:5%;top:0;bottom:5%;border-radius:34px 34px 19px 19px;background:#172a2d url('assets/folder-marble-reference.png') center top/100% auto no-repeat;border:1px solid #8d9593;box-shadow:inset 0 1px 2px #d6dfdfb0,0 1px 4px #0006}
.reference-folder-pocket{position:absolute;inset:29% 0 0;isolation:isolate}
.reference-pocket-color{position:absolute;inset:0;clip-path:url(#reference-pocket-clip);background:linear-gradient(180deg,#18191bb8,#0d1014e8 69%,#101214f5);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.reference-pocket-color::before{content:'';position:absolute;inset:-25%;z-index:-1;background:url('assets/folder-marble-reference.png') center/cover;filter:blur(30px) brightness(.45);opacity:.53}
.reference-pocket-color::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff07,#090c0ed9 82%);box-shadow:inset 0 -3px 3px #0009}
.reference-pocket-rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.reference-pocket-rim path{fill:none;stroke:#b3b8b34d;stroke-width:1.5;vector-effect:non-scaling-stroke}
.reference-folder-label{position:absolute;left:68%;top:10%;color:#f4f2ed;z-index:2;white-space:nowrap;text-shadow:0 1px 2px #0007}.reference-folder-label h3{font-size:20px;font-weight:400;margin:0 0 5px;line-height:1.2}.reference-folder-label p{font-family:Consolas,monospace;font-size:12px;letter-spacing:.5px;margin:0;color:#b5b8b6;line-height:1.4}
.reference-folder-play{position:absolute;left:50%;top:60%;transform:translate(-50%,-40%) scale(.9);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid #ffffff65;color:#fff;background:#ffffff16;backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.65,.25,1),background .25s}
.reference-folder-play svg{width:27px;height:27px}.reference-folder:is(:hover,:focus-within) .reference-folder-play{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.reference-folder-play:hover{background:#ffffff2b}.reference-folder-play:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-height:900px) and (min-width:701px){.reference-folder-stage{width:min(440px,54vh);margin-top:45px}}
@media(max-width:700px){.reference-folder-stage{margin-top:55px;width:88vw}.reference-folder-label h3{font-size:16px}.reference-folder-label p{font-size:9px}.reference-folder-play{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.reference-folder-play{transition:none}}
/* Keep only the folder, directly on the project section background. */
.reference-folder-stage{background:transparent;background-image:none;box-shadow:none}
/* Use the selected original Kemi VIS image for the folder and its diffused reflection. */
.reference-folder-back{background-image:url('assets/kemi-vis/water-portrait.png');background-size:cover;background-position:center 30%}
.reference-pocket-color::before{background-image:url('assets/kemi-vis/water-portrait.png')}
.reference-folder-stage.reference-folder-grid{width:min(920px,78vw);aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 65px;margin-top:clamp(85px,9vh,125px)}
.reference-folder-grid .reference-folder{position:relative;inset:auto;width:100%;aspect-ratio:1.4}
.reference-folder-grid .reference-folder-back{background-image:var(--folder-cover);background-size:cover;background-position:center 30%}
.reference-folder-grid .reference-pocket-color::before{background-image:var(--folder-cover)}
.reference-folder-grid .reference-folder-label{left:63%;max-width:34%;white-space:normal}.reference-folder-grid .reference-folder-label h3{font-size:clamp(13px,1.1vw,19px)}.reference-folder-grid .reference-folder-label p{font-size:10px}
.project-placeholder-viewer{width:min(650px,90vw);height:auto;min-height:300px}.project-placeholder-copy{padding:65px 45px}.project-placeholder-copy small{font-size:10px;letter-spacing:1px;color:#89917f}.project-placeholder-copy h2{font-size:30px;font-weight:400;margin:24px 0}.project-placeholder-copy p,.project-placeholder-copy>span{font-size:13px;color:#7d8673}
@media(max-height:900px) and (min-width:701px){.reference-folder-stage.reference-folder-grid{width:min(760px,72vw);margin-top:65px;gap:28px 55px}}
@media(max-width:700px){.reference-folder-stage.reference-folder-grid{width:100%;gap:32px 16px;margin-top:65px}.reference-folder-grid .reference-folder{aspect-ratio:1.15}.reference-folder-grid .reference-folder-label{left:59%;max-width:37%}.reference-folder-grid .reference-folder-label h3{font-size:10px}.reference-folder-grid .reference-folder-label p{font-size:7px}.reference-folder-grid .reference-folder-play{width:38px;height:38px}}
/* Two image-led panes, with the next page diffused behind a dark glass reading layer. */
.kemi-viewer{width:min(1520px,94vw);max-width:94vw;height:auto;aspect-ratio:2.1;max-height:88svh;background:#171c18;border:1px solid #ffffff35;border-radius:25px}
.kemi-viewer-layout{grid-template-columns:1fr 1fr;gap:0;height:100%;min-height:0}
.kemi-slideshow{position:relative;padding:0;gap:0;background:#dfe4df;overflow:hidden}
.kemi-slide-stage{height:100%;flex:1;border-radius:0;background:#e4e7e2}.kemi-slide{object-fit:contain}
.kemi-slide-controls{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;color:#fff;text-shadow:0 1px 5px #0008}.kemi-slide-controls>div{padding:3px;border-radius:999px;background:#17201966;backdrop-filter:blur(16px)}.kemi-slide-controls button{background:transparent;border:0;color:#fff}.kemi-slide-controls button:hover{background:#ffffff26}
.kemi-project-copy{position:relative;padding:0;overflow:hidden;isolation:isolate;background:#414b3d;min-height:0}
.kemi-next-preview{position:absolute;inset:0;z-index:-2;background:#fff}.kemi-next-preview img{width:100%;height:100%;object-fit:cover;display:block}
.kemi-copy-glass{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;padding:40px 38px;color:#f4f4ef;background:linear-gradient(155deg,#222d255e,#101810b3 42%,#070d0be8);backdrop-filter:blur(23px) saturate(95%);-webkit-backdrop-filter:blur(23px) saturate(95%);box-shadow:inset 1px 0 0 #ffffff40,inset 0 1px 0 #ffffff3b;scrollbar-width:thin;scrollbar-color:#ffffff35 transparent}
.kemi-copy-glass>small{font-size:10px;letter-spacing:1.5px;color:#e3e9dbb3}.kemi-copy-glass h2{color:#fff;font-size:clamp(25px,2.4vw,40px);line-height:1.2;margin:18px 0 24px}.kemi-copy-glass dl{border-color:#ffffff30;font-size:11px;margin-bottom:24px;padding:14px 0}.kemi-copy-glass dt{color:#d9e2d4a6}.kemi-copy-glass dd{color:#f2f4ed}.kemi-copy-glass h3{color:#fff;font-size:13px;margin:21px 0 7px}.kemi-copy-glass p{font-size:12px;line-height:1.85;color:#e0e6d9}
.kemi-close{background:#111b166e;color:#fff;border:1px solid #ffffff40;backdrop-filter:blur(14px);right:12px;top:12px}
@media(max-width:700px){.kemi-viewer{height:88svh;aspect-ratio:auto}.kemi-viewer-layout{display:grid;grid-template-columns:1fr;grid-template-rows:42% 58%;overflow:hidden}.kemi-slideshow{height:auto}.kemi-copy-glass{padding:28px 24px}.kemi-copy-glass h2{font-size:28px}.kemi-slide-controls{left:12px;right:12px;bottom:10px}}
/* Each half is one original 4:3 VIS page; controls float over the artwork. */
.kemi-viewer{width:min(1520px,94vw,234.6667svh);max-width:94vw;height:auto;aspect-ratio:8/3;max-height:none}
.kemi-viewer-layout{position:absolute;inset:0;grid-template-columns:1fr 1fr;height:100%}
.kemi-slideshow{display:block;position:relative;height:100%;padding:0}
.kemi-slide-stage{position:absolute;inset:0;height:100%;min-height:0;border-radius:0}
.kemi-slide{object-fit:contain;inset:0;width:100%;height:100%}
.kemi-next-preview img{object-fit:contain}
.kemi-slide-controls{position:absolute;left:18px;right:18px;bottom:14px;margin:0;pointer-events:none}.kemi-slide-controls>div{pointer-events:auto}.kemi-page{padding:5px 8px;border-radius:999px;background:#17201945;backdrop-filter:blur(10px)}
@media(max-width:700px){.kemi-viewer{width:94vw;height:88svh;aspect-ratio:auto;max-height:88svh}.kemi-viewer-layout{display:flex;flex-direction:column;overflow:auto}.kemi-slideshow{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3}.kemi-project-copy{flex:1 0 350px}.kemi-copy-glass{height:100%;overflow:auto}.kemi-slide-controls{left:10px;right:10px;bottom:10px}}
/* One-page editorial copy and independently rounded glass corners. */
.kemi-project-copy{border-radius:24px;overflow:hidden}.kemi-copy-glass{border-radius:24px;padding:clamp(22px,2.4vw,38px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 1px #ffffff25}
.kemi-copy-glass h2{font-size:clamp(24px,2.25vw,36px);line-height:1.25;margin:15px 0 18px;letter-spacing:-.7px}
.kemi-project-meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:11px;color:#e1e6d9b8;padding-bottom:18px;border-bottom:1px solid #ffffff26}
.kemi-story{display:grid;gap:18px;margin-top:20px}.kemi-copy-glass .kemi-story h3{font-size:12px;font-weight:500;letter-spacing:.5px;margin:0 0 6px}.kemi-copy-glass .kemi-story p{font-size:12px;line-height:1.8;margin:0;color:#e1e6dc}
@media(min-width:701px) and (max-height:750px){.kemi-copy-glass{padding:22px 28px}.kemi-copy-glass h2{font-size:26px;margin:12px 0}.kemi-project-meta{padding-bottom:12px;font-size:10px}.kemi-story{gap:13px;margin-top:14px}.kemi-copy-glass .kemi-story p{font-size:11px;line-height:1.7}}
@media(max-width:700px){.kemi-copy-glass{padding:26px 24px;overflow:auto;justify-content:flex-start}.kemi-copy-glass h2{font-size:26px}.kemi-story{gap:18px}}
/* Restore square edges throughout the VIS viewer. */
.kemi-viewer,.kemi-project-copy,.kemi-copy-glass,.kemi-slide-stage{border-radius:0}
/* Subtle rounding only on the outer viewer silhouette. */
.kemi-viewer{border-radius:10px;overflow:hidden}
/* The proposal's original page ratio is 16:9. */
.kemi-viewer.timeshop-viewer{aspect-ratio:32/9;width:min(1700px,94vw);height:auto}.timeshop-viewer .kemi-copy-glass{padding:22px 32px}.timeshop-viewer .kemi-copy-glass h2{font-size:clamp(22px,2vw,32px);margin:12px 0 14px}.timeshop-viewer .kemi-project-meta{padding-bottom:12px}.timeshop-viewer .kemi-story{gap:12px;margin-top:14px}.timeshop-viewer .kemi-story p{font-size:11px;line-height:1.75}
@media(max-width:700px){.kemi-viewer.timeshop-viewer{height:88svh;aspect-ratio:auto}.timeshop-viewer .kemi-slideshow{aspect-ratio:16/9}.timeshop-viewer .kemi-copy-glass{padding:26px 24px}}
/* Page turns use a right-to-left incoming sheet, with no opacity crossfade. */
.kemi-slide{transition:none;will-change:transform}
/* Career history uses the same floating glass language as project viewers. */
.resume-viewer{position:fixed;inset:0;margin:auto;width:min(1180px,92vw);max-width:92vw;height:min(760px,85svh);max-height:85svh;padding:0;border:1px solid #ffffff40;border-radius:10px;background:#1a231f;color:#f3f1e9;overflow:hidden;box-shadow:0 35px 120px #0005}
.resume-viewer::backdrop{background:#17201e66;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.resume-viewer-layout{display:grid;grid-template-columns:32% 68%;height:100%;min-height:0;background:linear-gradient(135deg,#6b79746b,#152019ed),url('assets/kemi-vis/water-portrait.png') center/cover}
.resume-viewer-rail{padding:45px 32px;background:#17241d8c;backdrop-filter:blur(28px);border-right:1px solid #ffffff25}.resume-viewer-rail>small{font-size:9px;color:#d7e2d0a6;letter-spacing:1.5px}.resume-viewer-rail h2{font-size:clamp(25px,2.6vw,39px);line-height:1.35;letter-spacing:-1px;font-weight:400;margin:25px 0}.resume-viewer-rail>p{font-size:12px;line-height:1.9;color:#c0cdb8}.resume-viewer-rail nav{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:35px}.resume-viewer-rail nav button{text-align:left;border-radius:8px;padding:11px 14px;font-size:12px;color:#d4dccd;transition:background .25s,color .25s}.resume-viewer-rail nav button:is(:hover,.is-current){background:#ffffff1c;color:#fff}
.resume-viewer-scroll{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;padding:26px 32px;background:#17211a88;backdrop-filter:blur(25px);scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;outline:none}
.resume-viewer .job{position:relative;display:grid;grid-template-columns:1fr;gap:13px;padding:28px 24px;margin:0 0 22px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff05;transition:background .5s,border-color .5s}.resume-viewer .job.resume-current{background:linear-gradient(135deg,#ffffff24,#ffffff09);border-color:#ffffff45;box-shadow:inset 0 1px 1px #ffffff35,0 10px 25px #0001}.resume-viewer .period{font-size:11px;color:#cbd5c2}.resume-viewer .job small{font-size:10px;letter-spacing:.5px;color:#b9c9af}.resume-viewer .job h2{font-size:25px;font-weight:400;margin:10px 0}.resume-viewer .job h3{font-size:13px;color:#ced8c6;font-weight:400;margin:0 0 16px}.resume-viewer .job p,.resume-viewer .job li{font-size:12px;line-height:1.9;color:#e1e7da}.resume-viewer .job ul{padding-left:18px;margin:15px 0}.resume-viewer .job blockquote{border-left:1px solid #b5c7a68c;padding-left:15px;font-size:11px;line-height:1.8;color:#b7c7ac;margin:20px 0 0}.resume-viewer .anchor{display:none}
@media(max-width:700px){.resume-viewer{height:90svh;max-height:90svh}.resume-viewer-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.resume-viewer-rail{padding:24px 22px 15px}.resume-viewer-rail h2,.resume-viewer-rail>p{display:none}.resume-viewer-rail nav{flex-direction:row;flex-wrap:wrap;gap:3px;margin-top:17px}.resume-viewer-rail nav button{font-size:10px;padding:8px}.resume-viewer-scroll{padding:18px}.resume-viewer .job{padding:22px 18px}}
/* Larger image-led project viewers, retaining each document's original ratio. */
.kemi-viewer{width:min(2100px,97vw,250svh);max-width:97vw}
.kemi-viewer.timeshop-viewer{width:min(2300px,97vw);max-width:97vw}
@media(max-width:700px){.kemi-viewer,.kemi-viewer.timeshop-viewer{width:96vw;max-width:96vw;height:92svh;max-height:92svh}}
.reference-folder-grid .reference-folder:last-child .reference-folder-label{left:60%;max-width:39%}
.reference-folder-grid .reference-folder:last-child .reference-folder-label h3 span{display:block;white-space:nowrap}
.reference-folder-grid .reference-folder:nth-child(2) .reference-folder-label{left:59%;max-width:39%}.reference-folder-grid .reference-folder:nth-child(2) .reference-folder-label h3 span{display:block;white-space:nowrap}
.reference-folder-grid .reference-folder:nth-child(2) .reference-folder-back{background-position:center top}
/* The content sheet lifts independently of the glass pocket. */
.reference-folder-grid .reference-folder-back{transition:transform .85s cubic-bezier(.2,.65,.25,1),box-shadow .85s ease;transform:translateY(0);transform-origin:center bottom}
.reference-folder-grid .reference-folder:is(:hover,:focus-within) .reference-folder-back{transform:translateY(-24px);box-shadow:inset 0 1px 2px #d6dfdfb0,0 12px 20px #0003}
@media(prefers-reduced-motion:reduce){.reference-folder-grid .reference-folder-back{transition:none}.reference-folder-grid .reference-folder:is(:hover,:focus-within) .reference-folder-back{transform:none}}
/* Hover lifts, click holds, dialog close resets even when focus returns to the play button. */
.reference-folder-grid .reference-folder .reference-folder-back{transform:translateY(0)}
.reference-folder-grid .reference-folder:is(.folder-hovered,.folder-pinned) .reference-folder-back{transform:translateY(-24px)}
.reference-folder-grid .reference-folder.folder-close-reset .reference-folder-back{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reference-folder-grid .reference-folder .reference-folder-back{transform:none!important}}
.collection-screen{position:relative;min-height:100svh;background:#f8f7f3;color:#242621;padding:120px 7% 90px;scroll-snap-align:start}.collection-heading{text-align:center;margin:0 auto 65px}.collection-heading>small{font-size:10px;letter-spacing:2px;color:#858b7d}.collection-heading h2{font-size:clamp(42px,4.8vw,80px);font-weight:400;line-height:1.16;letter-spacing:-1.5px;margin:22px 0}.collection-heading p{font-size:14px;line-height:1.9;color:#777e70}.collection-heading{opacity:0;translate:0 22px;transition:opacity 1.2s ease,translate 1.5s cubic-bezier(.2,.65,.25,1)}.collection-entered .collection-heading{opacity:1;translate:0 0}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 25px;max-width:1600px;margin:auto}.collection-item{text-align:left;padding:0;min-width:0}.collection-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:6px;transition:transform .6s cubic-bezier(.2,.65,.25,1),box-shadow .6s}.collection-item:hover img{transform:translateY(-5px);box-shadow:0 15px 30px #20251d18}.collection-item>span{display:flex;justify-content:space-between;gap:12px;padding:15px 2px}.collection-item b{font-size:12px;font-weight:400;line-height:1.5}.collection-item small{font-size:10px;color:#959b8e}
.collection-back{display:block;margin:60px auto 0;padding:13px 22px;border-radius:999px;background:#20221f;color:#f8f7f3;font-size:12px}.projects-screen>.about-footer{bottom:25px}
body.collection-visible header .logo,body.collection-visible header .main-nav :is(a,button),body.collection-visible header .main-nav .nav-current{color:#242621!important}body.collection-visible header .main-nav{background:#ffffffa6}body.collection-visible header .cooperate{background:#20221f;color:#f8f7f3}
.collection-viewer{width:min(1500px,94vw);max-width:94vw;max-height:92svh;padding:0;border:1px solid #ffffff40;border-radius:10px;background:#20251f;color:#eee9dd;overflow:auto}.collection-viewer::backdrop{background:#17201e77;backdrop-filter:blur(18px)}.collection-viewer>img{display:block;width:100%;max-height:82svh;object-fit:contain}.collection-viewer>p{font-size:12px;margin:15px 22px}.collection-viewer .kemi-close{position:sticky;float:right;margin:12px 12px -44px 0}
@media(max-width:700px){.collection-screen{padding:105px 5% 60px}.collection-heading h2{font-size:38px}.collection-heading p{font-size:12px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.collection-item b{font-size:10px}.collection-heading{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.collection-heading{opacity:1;translate:none;transition:none}.collection-item img{transition:none}}
/* A quiet filter row and an immersive, pannable image field. */
.collection-screen{padding-left:0;padding-right:0}.collection-heading{padding:0 6%;margin-bottom:40px}.collection-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin:28px auto 0}.collection-filters button{position:relative;font-size:12px;padding:9px 0;color:#8b9086;transition:color .3s}.collection-filters button[aria-pressed=true],.collection-filters button:hover{color:#252b22}.collection-filters button::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}.collection-filters button[aria-pressed=true]::after{transform:scaleX(1)}
.work-canvas{position:relative;height:78svh;min-height:520px;overflow:hidden;cursor:grab;touch-action:pan-y;background:#eeeee8;isolation:isolate}.work-canvas.is-dragging{cursor:grabbing;touch-action:none}.work-canvas::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px 15px #f8f7f340;z-index:2}
.work-canvas .collection-grid{position:absolute;top:50%;left:50%;width:140%;max-width:2100px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:55px 45px;transform:translate3d(-50%,-50%,0);will-change:transform;padding:80px 40px;align-items:start;user-select:none}
.work-canvas .collection-item{position:relative;min-width:0;transition:opacity .4s}.work-canvas .collection-item[hidden]{display:none}.work-canvas .collection-item:nth-child(5n+2),.work-canvas .collection-item:nth-child(5n+4){margin-top:60px}.work-canvas .collection-item img{aspect-ratio:4/3;border-radius:0;object-fit:cover;transition:transform .8s cubic-bezier(.2,.65,.25,1),filter .5s,box-shadow .6s;box-shadow:0 5px 20px #27302409}.work-canvas .collection-item:nth-child(4n) img{aspect-ratio:1/1}.work-canvas .collection-item>span{padding:10px 0;opacity:.6;transition:opacity .3s}.work-canvas .collection-item b{font-size:10px}.work-canvas .collection-item small{font-size:9px}.work-canvas .collection-item:hover img{transform:scale(1.035);box-shadow:0 20px 45px #27302420}.work-canvas .collection-item:hover>span{opacity:1}.work-canvas.is-dragging .collection-item{pointer-events:none}
.work-canvas-hint{position:absolute;left:4%;right:4%;bottom:22px;z-index:3;display:flex;justify-content:space-between;pointer-events:none;font-size:9px;letter-spacing:1.5px;color:#747c6e;background:linear-gradient(transparent,#eeeee8ad);padding-top:18px}.work-canvas.is-filtered .collection-grid{width:95%;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.work-canvas.is-filtered .collection-item{margin-top:0}.collection-back{margin-top:40px}
@media(max-width:700px){.collection-filters{gap:5px 15px;margin-top:22px}.collection-filters button{font-size:10px}.work-canvas{height:70svh;min-height:440px}.work-canvas .collection-grid{width:220%;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 25px;padding:60px 20px}.work-canvas .collection-item:nth-child(5n+2),.work-canvas .collection-item:nth-child(5n+4){margin-top:25px}.work-canvas.is-filtered .collection-grid{width:130%;grid-template-columns:repeat(2,minmax(0,1fr))}.work-canvas-hint{font-size:8px;letter-spacing:.5px}.work-canvas .collection-item b{font-size:9px}}
@media(prefers-reduced-motion:reduce){.work-canvas .collection-item img,.collection-filters button::after{transition:none}}
/* Diagonal standing covers on a clean, open canvas. */
.collection-screen.perspective-archive{height:100svh;min-height:750px;padding:95px 0 0;overflow:hidden;background:#fafafa}
.perspective-archive .collection-heading{position:relative;z-index:4;pointer-events:none;margin:0;padding:0 5%;text-align:left}.perspective-archive .collection-heading h2{font-size:clamp(24px,2.4vw,38px);line-height:1.2;margin:12px 0 15px}.perspective-archive .collection-heading h2 br{display:none}.perspective-archive .collection-heading>small{font-size:9px}.perspective-archive .collection-filters{pointer-events:auto;justify-content:flex-start;margin:0;gap:22px}.perspective-archive .collection-back{position:absolute;bottom:22px;right:3%;z-index:5;margin:0}
.archive-viewport{position:absolute;inset:260px 0 0;perspective:1800px;overflow:hidden;cursor:grab;touch-action:pan-y}.archive-viewport:active{cursor:grabbing}.archive-scene{position:absolute;left:50%;top:48%;transform-style:preserve-3d}
.archive-cover{position:absolute;left:0;top:0;width:clamp(230px,23vw,430px);height:clamp(310px,43vh,570px);margin-left:-160px;margin-top:-200px;transform-origin:center;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .5s;backface-visibility:hidden;border:1px solid #676a6240;box-shadow:2px 0 2px #25302138;overflow:hidden;user-select:none;background:#e2e4df;border-radius:1px}
.archive-cover img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:filter .7s}.archive-cover::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff22,transparent 50%,#22282010),linear-gradient(0deg,#ffffff6b,transparent 27%)}.archive-cover span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;font-size:10px;letter-spacing:1px;text-shadow:0 1px 5px #0009;opacity:0;transition:opacity .4s}.archive-cover:is(:hover,:focus-visible) span{opacity:1}.archive-cover:focus-visible{outline:2px solid #6b8066;outline-offset:3px}
.archive-caption{position:absolute;bottom:25px;left:3%;display:flex;gap:25px;font-size:9px;letter-spacing:1px;color:#8b9086;pointer-events:none}
@media(max-width:700px){.collection-screen.perspective-archive{padding-top:100px;min-height:700px}.perspective-archive .collection-heading h2{font-size:27px}.perspective-archive .collection-filters{gap:4px 14px}.archive-viewport{inset:285px 0 0;perspective:1200px}.archive-cover{width:240px;height:330px;margin-left:-120px;margin-top:-170px}.archive-caption{bottom:75px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.archive-cover{transition:none}}
/* Full-bleed loop of original-ratio glass image plates. */
.collection-screen.perspective-archive{padding:0;height:100svh;min-height:620px;background:#fafafa}
.perspective-archive .collection-heading{position:absolute;left:0;right:0;top:88px;padding:0 24px;z-index:150;opacity:1;translate:none}.perspective-archive .collection-heading>small,.perspective-archive .collection-heading h2{display:none}
.perspective-archive .collection-filters{display:flex;gap:2px;flex-wrap:wrap;margin:0;align-items:stretch}.perspective-archive .collection-filters button{min-width:110px;height:55px;padding:23px 12px 8px;text-align:left;border:1px solid #c6c9c5;border-radius:5px;background:#f2f3f1d9;backdrop-filter:blur(14px);color:#a1a69d;font-size:10px;transition:color .3s,background .3s}.perspective-archive .collection-filters button:first-child{min-width:155px}.perspective-archive .collection-filters button[aria-pressed=true],.perspective-archive .collection-filters button:hover{color:#242a20;background:#f3f4f1f0}.perspective-archive .collection-filters button::after{display:none}
.perspective-archive .archive-viewport{inset:0;perspective:2000px}.archive-scene{left:50%;top:53%}.archive-cover{margin-left:-200px;margin-top:-160px;overflow:visible;transform-style:preserve-3d;background:rgb(var(--glass-color,150 160 150)/.12);border:1px solid rgb(var(--glass-color,150 160 150)/.6);box-shadow:2px 0 0 rgb(var(--glass-color,150 160 150)/.5),4px 1px 0 rgb(var(--glass-color,150 160 150)/.2),inset 0 1px 0 #ffffffa6;border-radius:1px;backdrop-filter:blur(3px)}
.archive-cover img{object-fit:contain;opacity:.92;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 65%,#000d 84%,#0007 100%);mask-image:linear-gradient(180deg,#000 0%,#000 65%,#000d 84%,#0007 100%)}
.archive-cover::after{background:linear-gradient(115deg,#ffffff38,transparent 35%,rgb(var(--glass-color,150 160 150)/.15)),linear-gradient(0deg,#ffffff65,transparent 36%);box-shadow:inset 1px 1px 0 #ffffff8c,inset -1px 0 0 rgb(var(--glass-color,150 160 150)/.7)}
.archive-cover::before{content:'';position:absolute;inset:0;pointer-events:none;border-right:3px solid rgb(var(--glass-color,150 160 150)/.42);transform:translateX(3px) translateZ(-3px);background:rgb(var(--glass-color,150 160 150)/.12)}
.archive-cover:is(:hover,:focus-visible) img{opacity:1}.archive-cover span{bottom:18px}.archive-caption{z-index:150}
@media(max-width:700px){.perspective-archive .collection-heading{top:85px;padding:0 12px}.perspective-archive .collection-filters{gap:2px}.perspective-archive .collection-filters button,.perspective-archive .collection-filters button:first-child{min-width:0;height:42px;font-size:9px;padding:18px 8px 6px}.archive-cover{margin-left:-100px;margin-top:-100px}.archive-scene{top:56%}.perspective-archive .archive-viewport{inset:0}}
/* Folded page stacks, with a persistent identity label below each preview. */
.project-page-grid .page-stack-entry{aspect-ratio:1.35;filter:none;perspective:1100px}
.page-stack-entry .reference-folder-back,.page-stack-entry .reference-pocket-color,.page-stack-entry .reference-pocket-rim{display:none}
.project-page-stack{position:absolute;inset:0 4% 19%;transform-style:preserve-3d;perspective:1000px;transition:transform .8s cubic-bezier(.2,.65,.25,1)}
.project-stack-sheet{position:absolute;inset:0;background:#d5d9d5;overflow:hidden;border:1px solid #ffffff65;box-shadow:0 5px 15px #0002;transform-origin:center bottom;transform:translateY(calc((3 - var(--sheet-index))*-13px)) translateZ(calc(var(--sheet-index)*8px)) rotateX(calc(15deg + (3 - var(--sheet-index))*5deg)) scale(calc(.88 + var(--sheet-index)*.04));transition:transform .85s cubic-bezier(.2,.65,.25,1),box-shadow .7s}
.project-stack-sheet img{width:100%;height:100%;object-fit:cover;display:block}.project-stack-sheet::after{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff12,transparent 65%,#00000012);pointer-events:none}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-page-stack{transform:translateY(-10px) scale(1.055)}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc((3 - var(--sheet-index))*-20px)) translateZ(calc(var(--sheet-index)*12px)) rotateX(calc(8deg + (3 - var(--sheet-index))*7deg)) scale(calc(.88 + var(--sheet-index)*.04))}
.project-page-grid .page-stack-entry.folder-close-reset .project-page-stack{transform:none}
.project-page-grid .reference-folder-pocket{inset:0;clip-path:none;pointer-events:none}
.project-page-grid .reference-folder-label{left:4%;top:auto;bottom:0;max-width:90%;white-space:normal;text-shadow:none}.project-page-grid .reference-folder-label h3{font-size:15px;color:#eee9dd}.project-page-grid .reference-folder-label p{font-size:10px;color:#a9afa4;margin-top:6px}
.project-page-grid .reference-folder-play{top:40%;pointer-events:auto;z-index:6;background:#141b1b4d}:root:not(.tablet-landscape) .project-page-grid .page-stack-entry:not(.folder-hovered):not(.folder-pinned) .reference-folder-play{opacity:0;pointer-events:none}
.project-page-grid .reference-folder:nth-child(2) .reference-folder-label,.project-page-grid .reference-folder:last-child .reference-folder-label{left:4%;max-width:90%}.project-page-grid .reference-folder-label h3 span{display:inline!important}.project-page-grid .reference-folder-label h3 span+span::before{content:' '}
@media(max-width:700px){.project-page-grid .reference-folder-label h3{font-size:11px}.project-page-grid .reference-folder-label p{font-size:8px}.project-page-grid .page-stack-entry{aspect-ratio:1.1}}
@media(prefers-reduced-motion:reduce){.project-page-stack,.project-stack-sheet{transition:none}}
/* Closed stack: one full front cover, with ordered page edges stepping upward. */
.project-page-grid .project-page-stack{inset:12% 4% 19%;perspective:1200px}
.project-page-grid .project-stack-sheet{transform-origin:center bottom;transform:translateY(calc(var(--page-depth)*-12px)) translateZ(calc(var(--page-depth)*-5px)) rotateX(-10deg) scale(calc(1 - var(--page-depth)*.045));box-shadow:0 2px 5px #0002;transition:transform .85s cubic-bezier(.2,.65,.25,1)}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-16px)) translateZ(calc(var(--page-depth)*-5px)) rotateX(-5deg) scale(calc(1 - var(--page-depth)*.045))}
.project-page-grid .project-stack-sheet img{object-fit:cover}
/* Tight trapezoid page stack at rest; hover expands only the page spacing. */
.project-page-grid .project-page-stack{perspective:1000px;transform:none;inset:14% 4% 19%}
.project-page-grid .project-stack-sheet{transform-origin:50% 100%;transform:translateY(calc(var(--page-depth)*-11px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047));transition:transform .95s cubic-bezier(.22,.7,.2,1);border:1px solid #ffffff40}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-page-stack,.project-page-grid .page-stack-entry.folder-close-reset .project-page-stack{transform:none}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-25px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047))}
.project-page-grid .page-stack-entry.folder-close-reset .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-11px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047))}
@media(prefers-reduced-motion:reduce){.project-page-grid .project-stack-sheet{transition:none}}
/* Preserve the resting stack and make the hover separation more pronounced. */
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-38px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047))}
/* The reference's visibly expanded stack is the resting state. */
.project-page-grid .project-stack-sheet,.project-page-grid .page-stack-entry.folder-close-reset .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-25px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047))}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-42px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.047))}
/* Four-page previews have separate vertical space, including their hover extension. */
.reference-folder-stage.reference-folder-grid.project-page-grid{gap:95px 65px}
.project-page-grid .project-page-stack{inset:20% 4% 22%}
.project-page-grid .project-stack-sheet,.project-page-grid .page-stack-entry.folder-close-reset .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-16px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.055))}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-25px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.055))}
.project-page-grid .project-stack-sheet{overflow:visible;background:rgb(var(--sheet-tint,150 160 150)/.18);border:1px solid rgb(var(--sheet-tint,150 160 150)/.7);box-shadow:2px 1px 0 rgb(var(--sheet-tint,150 160 150)/.5),4px 2px 0 rgb(var(--sheet-tint,150 160 150)/.18),inset 0 1px 0 #ffffff85;backdrop-filter:blur(3px);border-radius:1px}
.project-page-grid .project-stack-sheet img{opacity:.93;-webkit-mask-image:linear-gradient(#000 0%,#000 65%,#000c 85%,#0007 100%);mask-image:linear-gradient(#000 0%,#000 65%,#000c 85%,#0007 100%)}
.project-page-grid .project-stack-sheet::after{background:linear-gradient(115deg,#ffffff25,transparent 40%,rgb(var(--sheet-tint,150 160 150)/.15)),linear-gradient(0deg,#ffffff50,transparent 35%);box-shadow:inset 1px 1px 0 #ffffff66,inset -1px 0 0 rgb(var(--sheet-tint,150 160 150)/.7)}
@media(max-height:900px) and (min-width:701px){.reference-folder-stage.reference-folder-grid.project-page-grid{gap:75px 55px;width:min(700px,68vw);margin-top:65px}}
@media(max-width:700px){.reference-folder-stage.reference-folder-grid.project-page-grid{gap:75px 20px}.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-20px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-18deg) scale(calc(1 - var(--page-depth)*.055))}}
/* Taller page previews, with uncropped imagery and clearer layered spacing. */
.project-page-grid .page-stack-entry{aspect-ratio:1.05}
.project-page-grid .project-page-stack{inset:20% 4% 19%}
.project-page-grid .project-stack-sheet,.project-page-grid .page-stack-entry.folder-close-reset .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-23px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-14deg) scale(calc(1 - var(--page-depth)*.055))}
.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-35px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-14deg) scale(calc(1 - var(--page-depth)*.055))}
.project-page-grid .project-stack-sheet img{object-fit:contain;object-position:center;background:rgb(var(--sheet-tint,150 160 150));-webkit-mask-image:linear-gradient(#000 0%,#000 85%,#000c 100%);mask-image:linear-gradient(#000 0%,#000 85%,#000c 100%)}
.project-page-grid .project-stack-sheet::after{background:linear-gradient(115deg,#ffffff15,transparent 45%,rgb(var(--sheet-tint,150 160 150)/.08)),linear-gradient(0deg,#ffffff24,transparent 18%)}
.reference-folder-stage.reference-folder-grid.project-page-grid{gap:65px 65px;margin-top:110px}
.projects-screen.folder-projects{height:auto;min-height:100svh;padding-bottom:100px;overflow:visible}
@media(max-height:900px) and (min-width:701px){.reference-folder-stage.reference-folder-grid.project-page-grid{width:min(760px,72vw);gap:65px 55px;margin-top:100px}}
@media(max-width:700px){.reference-folder-stage.reference-folder-grid.project-page-grid{margin-top:90px;gap:60px 20px}.project-page-grid .page-stack-entry{aspect-ratio:.85}.project-page-grid .project-stack-sheet,.project-page-grid .page-stack-entry.folder-close-reset .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-17px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-14deg) scale(calc(1 - var(--page-depth)*.055))}.project-page-grid .page-stack-entry:is(.folder-hovered,.folder-pinned) .project-stack-sheet{transform:translateY(calc(var(--page-depth)*-25px)) translateZ(calc(var(--page-depth)*-7px)) rotateX(-14deg) scale(calc(1 - var(--page-depth)*.055))}}
/* Fully opaque page imagery with a source-matched fill around the original framing. */
.project-page-grid .project-stack-sheet{overflow:hidden;isolation:isolate}
.project-page-grid .project-stack-sheet img{position:relative;z-index:1;opacity:1;background:transparent;-webkit-mask-image:none;mask-image:none;object-fit:contain}
.project-page-grid .project-stack-sheet::after{background:none;box-shadow:inset 1px 1px 0 #ffffff45,inset -1px 0 0 rgb(var(--sheet-tint,150 160 150)/.55);z-index:2}
.sheet-image-extension{position:absolute;inset:-12%;background-position:center;background-size:cover;filter:blur(22px);transform:scale(1.08);z-index:0;pointer-events:none}
/* Adjust spacing only; preserve card dimensions, content and typography. */
.projects-screen.folder-projects{padding-bottom:40px}
.reference-folder-stage.reference-folder-grid.project-page-grid{margin-top:20px;row-gap:0}
@media(max-height:900px) and (min-width:701px){.reference-folder-stage.reference-folder-grid.project-page-grid{margin-top:16px;row-gap:0}}
@media(max-width:700px){.reference-folder-stage.reference-folder-grid.project-page-grid{margin-top:20px;row-gap:0}}

/* Stable painter order during scrolling; only hover offset is eased. */
.archive-scene{transform-style:flat;isolation:isolate}
.archive-cover{transform-style:flat;transition:translate .65s cubic-bezier(.2,.7,.2,1);will-change:transform,translate}
@media(prefers-reduced-motion:reduce){.archive-cover{transition:none}}

.archive-work-intro{position:absolute;inset:auto 5% 13% auto;width:clamp(210px,19vw,340px);margin:0;padding:0;z-index:160;pointer-events:none;color:#282b27;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .5s}
.archive-work-intro.is-visible{opacity:1;transform:translateY(0)}
.archive-work-intro small{display:block;font-size:9px;letter-spacing:1.5px;color:#8a8e84;margin-bottom:14px}
.archive-work-intro h3{font-size:clamp(18px,1.4vw,26px);line-height:1.35;font-weight:400;margin:0 0 12px}
.archive-work-intro p{font-size:12px;line-height:1.85;color:#747a6e;margin:0}
@media(max-width:700px){.archive-work-intro{right:5%;bottom:13%;width:210px;padding:14px;background:#fafafae8;backdrop-filter:blur(12px)}.archive-work-intro h3{font-size:17px}.archive-work-intro p{font-size:11px}}

/* The anchor is a stationary hit area; only its visual face moves on hover. */
.archive-cover{background:transparent;border:0;box-shadow:none;backdrop-filter:none;transition:none}
.archive-cover::before,.archive-cover::after{display:none}
.archive-card-face{position:absolute;inset:0;pointer-events:none;transition:translate .65s cubic-bezier(.2,.7,.2,1);background:rgb(var(--glass-color,150 160 150)/.12);border:1px solid rgb(var(--glass-color,150 160 150)/.6);box-shadow:2px 0 0 rgb(var(--glass-color,150 160 150)/.5),4px 1px 0 rgb(var(--glass-color,150 160 150)/.2),inset 0 1px 0 #ffffffa6;backdrop-filter:blur(3px);border-radius:1px}
.archive-card-face::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff38,transparent 35%,rgb(var(--glass-color,150 160 150)/.15)),linear-gradient(0deg,#ffffff65,transparent 36%);box-shadow:inset 1px 1px 0 #ffffff8c,inset -1px 0 0 rgb(var(--glass-color,150 160 150)/.7)}
.archive-card-face::before{content:'';position:absolute;inset:0;border-right:3px solid rgb(var(--glass-color,150 160 150)/.42);transform:translateX(3px);background:rgb(var(--glass-color,150 160 150)/.12)}
@media(prefers-reduced-motion:reduce){.archive-card-face{transition:none}}

.archive-opening .archive-cover,.archive-opening .archive-work-intro,.archive-opening .collection-heading,.archive-opening .archive-caption,.archive-opening .collection-back{opacity:0!important;pointer-events:none!important;transition:opacity .3s}
body.archive-detail-open{overflow:hidden}
.archive-opening-cover{position:fixed;z-index:10001;object-fit:contain;pointer-events:none;transform-origin:center}
.archive-detail{position:fixed;inset:0;width:100%;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:#fafafa;color:#282b27;overflow-y:auto;overscroll-behavior:contain}
.archive-detail::backdrop{background:#fafafa}
.archive-detail-back{position:sticky;top:20px;z-index:5;margin:20px 0 0 2%;padding:12px 18px;background:#fafafae8;border:1px solid #d5d7d2;border-radius:4px;color:#282b27;cursor:pointer;backdrop-filter:blur(12px)}
.archive-detail-heading{display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:85px 3% 65px;align-items:start}
.archive-detail-heading h1{font-size:clamp(26px,3vw,52px);font-weight:400;line-height:1.2;margin:0}
.archive-detail-heading p{max-width:580px;font-size:14px;line-height:1.9;margin:0;color:#747a6e}
.archive-detail-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start;width:100%}
.archive-detail-pages img{display:block;width:100%;height:auto;max-height:none;margin:0;object-fit:contain}
@media(max-width:700px){.archive-detail-heading{padding:55px 5% 40px;grid-template-columns:1fr;gap:22px}.archive-detail-heading p{font-size:12px}.archive-detail-pages{grid-template-columns:1fr}}
.archive-detail-pages img:only-child{grid-column:1/-1}.archive-detail-back:focus:not(:focus-visible){outline:none}

/* Continuous shared-layer transition, with left-aligned editorial introduction. */
.archive-detail::backdrop{background:transparent}
.archive-detail.is-transitioning{overflow:hidden}
.archive-detail .archive-opening-cover{display:block;will-change:transform,opacity}
.archive-detail-heading{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:80px 3% 60px;text-align:left}
.archive-detail-heading h1{max-width:900px}
.archive-detail-heading p{max-width:580px;text-align:left}
.archive-detail-pages:has(img:only-child){display:flex;justify-content:center;padding:0 5% 80px}
.archive-detail-pages img:only-child{width:auto;max-width:min(860px,85vw);height:auto;max-height:none;object-fit:contain}
@media(max-width:700px){.archive-detail-heading{padding:55px 5% 40px;gap:18px}.archive-detail-pages img:only-child{max-width:88vw}}

/* Separate individual case pages in both directions. */
.archive-detail-pages{box-sizing:border-box;gap:clamp(16px,1.6vw,32px);padding:0 clamp(16px,2vw,40px) 60px}
@media(max-width:700px){.archive-detail-pages{gap:18px;padding:0 14px 40px}}

.archive-product-scenes{padding:20px clamp(16px,2vw,40px) 80px}
.archive-scenes-heading{padding:25px 1% 32px;text-align:left}
.archive-scenes-heading small{font-size:10px;letter-spacing:1.5px;color:#898e84}
.archive-scenes-heading h2{font-size:clamp(24px,2.2vw,36px);font-weight:400;margin:12px 0 0}
.archive-scenes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,32px);align-items:start}
.archive-scenes-grid figure{margin:0;min-width:0}
.archive-scenes-grid img{display:block;width:100%;height:auto;object-fit:contain}
.archive-scenes-grid .scene-centered{grid-column:1/-1;width:calc((100% - clamp(16px,1.6vw,32px))/2);justify-self:center}
@media(max-width:700px){.archive-product-scenes{padding:0 14px 40px}.archive-scenes-grid{gap:18px}.archive-scenes-heading{padding-top:20px}.archive-scenes-grid{grid-template-columns:1fr}.archive-scenes-grid .scene-centered{width:100%;grid-column:auto}}

/* Detail owns scrolling; the document behind it must not keep a second scrollbar. */
html:has(body.archive-detail-open){overflow:hidden!important}
body.archive-detail-open{overflow:hidden!important}
.archive-detail{overflow-x:hidden;overflow-y:auto}
.archive-detail-content{overflow:visible}
.archive-product-scenes{padding-top:0}
.archive-scenes-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start}
.archive-scenes-grid .scene-centered{grid-column:auto;width:100%;justify-self:start}
@media(max-width:1000px){.archive-scenes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.archive-scenes-grid{grid-template-columns:1fr}}

/* Only the visible glass face accepts pointer hits, including its pulled-out position. */
.archive-cover{pointer-events:none!important}
.archive-card-face{pointer-events:auto;cursor:pointer}
.archive-card-face img,.archive-card-face span{pointer-events:none}
.archive-cover[style*="visibility: hidden"] .archive-card-face{pointer-events:none}

.archive-work-intro[hidden]{display:none!important;visibility:hidden!important}
.archive-hit-corner{position:absolute;width:0;height:0;pointer-events:none;visibility:hidden}
.archive-cover{pointer-events:auto!important}
.archive-card-face{pointer-events:none}
.archive-cover span{display:none}

/* Avoid live backdrop re-rasterization across overlapping animated covers. */
.archive-card-face{backdrop-filter:none;-webkit-backdrop-filter:none}
.archive-card-face img{backface-visibility:visible}
.archive-detail-pages img,.archive-scenes-grid figure{content-visibility:auto;contain-intrinsic-size:auto 480px}

.archive-phone-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));justify-content:start;gap:45px 36px;padding:20px 4% 90px}
.detail-phone{width:100%;padding:9px;border-radius:38px;background:#161817;box-shadow:inset 0 0 0 1px #6a6d68,0 12px 30px #00000016;position:relative}
.detail-phone::after{content:'';position:absolute;top:15px;left:50%;translate:-50% 0;width:27%;height:18px;background:#151716;border-radius:20px;pointer-events:none}
.phone-screen{aspect-ratio:9/19.5;overflow:hidden;border-radius:30px;background:#fff}
.phone-screen img{display:block;width:100%;height:auto;will-change:transform}
@media(max-width:600px){.archive-phone-gallery{grid-template-columns:minmax(0,320px);justify-content:center;padding:10px 6% 60px}}

.archive-detail-pages[hidden]{display:none!important}
.manual-phone-gallery{justify-content:center;padding-top:0}
.manual-phone-gallery .phone-screen{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#969c98 transparent}
.manual-phone-gallery .phone-screen img{will-change:auto;transform:none!important}

.commerce-brand-filters{display:flex;gap:6px;margin-top:10px;pointer-events:auto}
.commerce-brand-filters[hidden]{display:none!important}
.commerce-brand-filters button{padding:8px 12px;font-size:10px;border:1px solid #d9dcd6;border-radius:3px;color:#8a9085;background:#fafafacc}
.commerce-brand-filters button[aria-pressed=true]{color:#fff;background:#282d26;border-color:#282d26}

.archive-detail-pages.unified-background{align-items:stretch}.archive-detail-pages.unified-background img{height:100%;aspect-ratio:16/9;object-fit:contain;background:#131313;content-visibility:visible}

.archive-detail-pages.zhang-posters{grid-template-columns:repeat(6,minmax(0,1fr));align-items:start}
.archive-detail-pages.zhang-posters img{grid-column:span 3;height:auto;aspect-ratio:auto;object-fit:contain}
.archive-detail-pages.zhang-posters img:nth-child(n+3){grid-column:span 2;width:100%;height:auto;background:transparent}
@media(max-width:700px){.archive-detail-pages.zhang-posters{grid-template-columns:repeat(3,minmax(0,1fr))}.archive-detail-pages.zhang-posters img{grid-column:1/-1}.archive-detail-pages.zhang-posters img:nth-child(n+3){grid-column:span 1}}

/* Three Zhang Jingchu posters share one width and stack vertically. */
.archive-detail-pages.zhang-posters img:nth-child(n+3){grid-column:1/-1;width:min(760px,100%);height:auto;aspect-ratio:auto;justify-self:center;object-fit:contain}
@media(max-width:700px){.archive-detail-pages.zhang-posters img:nth-child(n+3){grid-column:1/-1;width:100%}}

.archive-scenes-grid figure:has(img[src*="family-video-frame"]){align-self:stretch;background:#e2e5e7;display:flex;align-items:center}.archive-scenes-grid img[src*="family-video-frame"]{height:100%;object-fit:contain;background:#e2e5e7}

.archive-detail-pages img[src*="family-video-frame"]{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.archive-scenes-grid img[src*="pro-video-first-frame"]{width:100%;height:auto;aspect-ratio:1270/1390;object-fit:cover;object-position:center}

.archive-detail-pages.adaptive-layout{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;grid-auto-flow:row}
.archive-detail-pages.adaptive-layout img{width:100%;height:auto;object-fit:contain;content-visibility:visible}
@media(max-width:700px){.archive-detail-pages.adaptive-layout img{grid-column:1/-1!important}}

.archive-detail-pages.adaptive-layout.annual-visual{grid-template-columns:1.996672213fr 1.777777778fr 1.777777778fr;align-items:start}
.archive-detail-pages.annual-visual img:first-child{grid-column:1/-1!important}
.archive-detail-pages.annual-visual img:nth-child(n+2){grid-column:auto!important;width:100%;height:auto}
@media(max-width:700px){.archive-detail-pages.adaptive-layout.annual-visual{column-gap:12px;row-gap:18px}}

/* Category navigation aligns with the site's 3% left content gutter. */
.perspective-archive .collection-heading{position:absolute;left:3%;right:auto;top:50%;width:auto;margin:0;padding:0;transform:translateY(-50%);text-align:left;z-index:180;pointer-events:auto}
.perspective-archive .collection-filters{display:flex;flex-direction:column;align-items:flex-start;gap:22px;width:auto;max-width:none;margin:0}
.perspective-archive .collection-filters button,.perspective-archive .collection-filters button:first-child{min-width:0;height:auto;padding:3px 0;border:0;border-radius:0;background:transparent;backdrop-filter:none;font-size:13px;line-height:1.6;letter-spacing:.3px;text-align:left;color:#969c91}
.perspective-archive .collection-filters button[aria-pressed=true],.perspective-archive .collection-filters button:hover{background:transparent;color:#242a20}
.perspective-archive .collection-filters button[aria-pressed=true]{font-weight:600}
@media(max-width:700px){.perspective-archive .collection-heading{left:4%;top:50%;padding:0}.perspective-archive .collection-filters{gap:17px}.perspective-archive .collection-filters button,.perspective-archive .collection-filters button:first-child{font-size:10px;padding:3px 0}}

/* Browser hit tests the visible moved face; stationary geometry remains hover-only. */
.archive-cover{pointer-events:none!important}
.archive-card-face{pointer-events:auto}
.archive-cover[style*="visibility: hidden"] .archive-card-face{pointer-events:none}

/* A restrained portrait frame keeps the deck rhythm without stretching artwork. */
.archive-card-face img{object-fit:contain;object-position:center}

.archive-card-face.cover-fill-top{overflow:hidden}
.archive-card-face.cover-fill-top img{width:100%;height:100%;object-fit:cover;object-position:center top}

.archive-card-face.cover-protected img{object-fit:contain;object-position:center}

/* Shared larger phone scale: four across on desktop, incomplete rows left aligned. */
.archive-phone-gallery{--phone-gap:clamp(24px,2vw,48px);--phone-width:calc((100vw - 8vw - 3 * var(--phone-gap))/4);grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--phone-gap);justify-content:start;padding-left:4%;padding-right:4%}
.manual-phone-gallery{justify-content:start}
.archive-phone-gallery .detail-phone{width:100%;max-width:none}
.archive-phone-gallery:has(.detail-phone:only-child){grid-template-columns:minmax(0,var(--phone-width));justify-content:center}
@media(max-width:1100px){.archive-phone-gallery{--phone-width:calc((92vw - var(--phone-gap))/2);grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.archive-phone-gallery{--phone-width:min(88vw,420px);grid-template-columns:minmax(0,var(--phone-width));justify-content:center}.archive-phone-gallery:has(.detail-phone:only-child){grid-template-columns:minmax(0,var(--phone-width))}}

/* Reduce multi-phone devices only; preserve their column count and single-phone scale. */
.archive-phone-gallery:has(.detail-phone:nth-child(2)) .detail-phone{width:78%;justify-self:start}
@media(max-width:600px){.archive-phone-gallery:has(.detail-phone:nth-child(2)) .detail-phone{width:88%;justify-self:center}}

.contact-viewer{position:fixed;inset:0;margin:auto;padding:0;width:min(760px,90vw);max-width:90vw;max-height:88svh;border:1px solid #ffffff35;border-radius:10px;color:#f4f4ef;background:linear-gradient(145deg,#63726c99,#0c1610ed),url('assets/kemi-vis/water-portrait.png') center/cover;overflow:hidden;box-shadow:0 35px 120px #0006}
.contact-viewer::backdrop{background:#17201e88;backdrop-filter:blur(18px)}
.contact-glass{padding:clamp(32px,5vw,65px);background:linear-gradient(150deg,#22302955,#0a130ed9);backdrop-filter:blur(28px);overflow-y:auto;max-height:88svh}
.contact-glass>small{font-size:10px;letter-spacing:1.7px;color:#e0e6db99}
.contact-glass h2{font-size:clamp(29px,3.1vw,44px);font-weight:400;line-height:1.3;letter-spacing:-1px;margin:24px 0 18px}
.contact-location{font-size:12px;color:#d3dbcf99;margin:0 0 32px}
.contact-method{padding:24px 0;border-top:1px solid #ffffff26;display:flex;justify-content:space-between;align-items:center;gap:20px}
.contact-method>span{font-size:10px;letter-spacing:1px;color:#dce4d4a6}.contact-method a,.contact-method strong{font-size:clamp(15px,2vw,21px);font-weight:400}.contact-method>div{display:flex;align-items:center;gap:18px}.contact-copy{padding:8px 12px;border:1px solid #ffffff30;border-radius:30px;font-size:10px;background:#ffffff0c;color:#e5eade}.contact-copy:hover{background:#ffffff22}.contact-status{min-height:16px;font-size:11px;color:#d4ddcc;margin:14px 0 0}
html:has(.contact-viewer[open]){overflow:hidden}
@media(max-width:600px){.contact-method{align-items:flex-start;flex-direction:column;gap:14px}.contact-method>div{flex-wrap:wrap}}

.contact-qr{display:flex;align-items:center;gap:24px;padding-top:24px;border-top:1px solid #ffffff26}
.contact-qr img{width:160px;height:160px;object-fit:contain;display:block;border-radius:8px}
.contact-qr span{font-size:12px;color:#d7e0d0b3}

/* A compact editorial contact composition with a neutral, scannable QR. */
.contact-viewer{width:min(820px,92vw);max-width:92vw}
.contact-glass{padding:clamp(30px,4.5vw,56px)}
.contact-glass h2{font-size:clamp(29px,3vw,42px);margin:24px 0 16px;font-weight:400}
.contact-location{margin-bottom:30px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 152px;gap:40px;align-items:center;border-top:1px solid #ffffff25;padding-top:28px}
.contact-method{display:block;padding:0;border:0}
.contact-method+.contact-method{margin-top:26px}
.contact-method>span{display:block;font-size:10px;letter-spacing:.8px;margin-bottom:10px;color:#d5dfcf99}
.contact-method a,.contact-method strong{font-size:clamp(16px,1.8vw,21px);font-weight:400;letter-spacing:.2px}
.contact-method>div{display:flex;gap:14px;align-items:center}
.contact-copy{padding:6px 10px;font-size:10px;border-color:#ffffff25;background:transparent}
.contact-qr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0}
.contact-qr img{display:block;width:152px;height:152px;border-radius:5px;filter:grayscale(1) contrast(1.8) invert(1);border:6px solid #000}
.contact-qr span{font-size:10px;letter-spacing:.4px;color:#d5dfcfa6;text-align:center}
.contact-status{margin-top:18px;min-height:14px}
@media(max-width:580px){.contact-grid{grid-template-columns:minmax(0,1fr) 112px;gap:18px}.contact-qr img{width:112px;height:112px}.contact-method a{font-size:14px}.contact-method>div{gap:9px;flex-wrap:wrap}.contact-copy{font-size:9px}.contact-glass{padding:36px 24px}.contact-qr span{font-size:9px}.contact-grid{padding-top:24px}}

/* Legible career cards: restrained perspective and clearer type hierarchy. */
.career-glass-1{transform:rotateZ(-2deg) rotateY(4deg)}
.career-glass-2{transform:translateZ(12px) rotateZ(2deg) rotateY(-4deg)}
.career-glass-3{transform:rotateZ(-2deg) rotateY(4deg)}
.career-glass-4{transform:rotateZ(2deg) rotateY(-4deg)}
.career-glass{border-radius:24px;background:linear-gradient(115deg,#fffffff0,#ffffffb8 65%,#eef0ebbd);padding:24px; -webkit-font-smoothing:antialiased}
.career-glass h3{font-size:clamp(17px,1.2vw,21px);font-weight:500;line-height:1.4;letter-spacing:0;color:#30372d;margin:7px 0}
.career-glass small{font-size:11px;letter-spacing:.3px;color:#686f62}
.career-glass strong{font-size:13px;line-height:1.5;color:#48513f;font-weight:400}
.career-glass p{font-size:12px;line-height:1.85;color:#59614f;margin-top:10px}
@media(max-width:1000px){.career-glass{padding:17px}.career-glass h3{font-size:16px}.career-glass small{font-size:10px}.career-glass strong,.career-glass p{font-size:11px}}
@media(max-width:700px){.career-glass{padding:13px}.career-glass h3{font-size:13px}.career-glass small{font-size:9px}.career-glass strong,.career-glass p{font-size:10px}.career-glass p{line-height:1.65}}

/* Shared interface type and neutral palette; artwork retains its own design. */
:root{--ui-font:Arial,"Microsoft YaHei",sans-serif;--ink:#282d27;--muted:#70776b;--soft:#858c7e;--paper:#fafafa;--dark:#202720;--on-dark:#f2f4ee;--muted-dark:#c0c9b9;--line-light:#282d2724;--line-dark:#ffffff26;--radius-panel:10px;--radius-control:999px;--weight-title:400;--weight-label:500;--weight-active:600;--text-body:14px;--text-small:12px;--text-caption:11px}
body,button,input,textarea{font-family:var(--ui-font)}
.archive-detail{color:var(--ink);background:var(--paper)}
.archive-detail-heading h1,.contact-glass h2{font-weight:var(--weight-title);letter-spacing:-.6px;line-height:1.25}
.archive-detail-heading h1{font-size:clamp(28px,3vw,48px)}
.archive-detail-heading p{font-size:var(--text-body);line-height:1.9;color:var(--muted)}
.archive-work-intro h3{color:var(--ink);font-weight:var(--weight-title);font-size:clamp(19px,1.4vw,26px);line-height:1.4}
.archive-work-intro p{color:var(--muted);font-size:13px;line-height:1.85}
.perspective-archive .collection-filters button,.perspective-archive .collection-filters button:first-child{font-size:13px;font-weight:400;color:var(--muted);line-height:1.6}
.perspective-archive .collection-filters button[aria-pressed=true]{color:var(--ink);font-weight:var(--weight-active)}
.kemi-viewer,.resume-viewer,.contact-viewer{border-radius:var(--radius-panel);color:var(--on-dark);border-color:var(--line-dark)}
.kemi-copy-glass h2,.timeshop-viewer .kemi-copy-glass h2{font-size:clamp(26px,2.25vw,36px);font-weight:var(--weight-title);line-height:1.25;letter-spacing:-.6px}
.kemi-copy-glass>small,.resume-viewer-rail>small,.contact-glass>small{font-size:10px;letter-spacing:1.5px;color:var(--muted-dark);font-weight:var(--weight-label)}
.kemi-project-meta{color:var(--muted-dark);font-size:12px;line-height:1.6;border-color:var(--line-dark)}
.kemi-copy-glass .kemi-story h3{font-size:13px;font-weight:var(--weight-label);color:var(--on-dark);line-height:1.5}
.kemi-copy-glass .kemi-story p,.timeshop-viewer .kemi-story p{font-size:13px;line-height:1.85;color:#e0e6da}
.resume-viewer .job h2{font-size:26px;font-weight:var(--weight-title);line-height:1.35}
.resume-viewer .job h3{font-size:14px;font-weight:var(--weight-label);color:var(--muted-dark)}
.resume-viewer .job p,.resume-viewer .job li{font-size:13px;line-height:1.9;color:#e0e6da}
.resume-viewer .period,.resume-viewer .job small{font-size:11px;color:var(--muted-dark)}
.contact-method>span,.contact-location,.contact-qr span{color:var(--muted-dark)}
.contact-method>span{font-size:11px;font-weight:var(--weight-label)}
.contact-method a,.contact-method strong{font-weight:400;color:var(--on-dark)}
.contact-copy,.contact-status{font-size:11px}
.kemi-close{font-size:20px;font-weight:500;border-radius:50%}
.archive-detail-back,.collection-back,.project-cases,.resume-toggle,.kemi-slide-controls button{font-size:12px;font-weight:var(--weight-label);line-height:1.5}
.archive-detail-back{border-radius:var(--radius-control);border-color:var(--line-light);color:var(--ink)}
button:focus-visible,a:focus-visible{outline:2px solid #7a9375;outline-offset:4px}
@media(min-width:701px) and (max-height:750px){.kemi-copy-glass .kemi-story p,.timeshop-viewer .kemi-story p{font-size:12px;line-height:1.75}.kemi-project-meta{font-size:11px}.kemi-copy-glass h2,.timeshop-viewer .kemi-copy-glass h2{font-size:26px}}
@media(max-width:700px){.archive-detail-heading p{font-size:13px}.archive-work-intro p{font-size:12px}.perspective-archive .collection-filters button,.perspective-archive .collection-filters button:first-child{font-size:11px}.kemi-copy-glass h2,.timeshop-viewer .kemi-copy-glass h2{font-size:26px}.kemi-copy-glass .kemi-story p,.timeshop-viewer .kemi-story p{font-size:13px}.contact-method>span{font-size:10px}}

/* Touch layouts keep artwork readable and expose every case without hover. */
@media(max-width:700px){
 header{height:112px;align-items:flex-start;padding:18px 4%}
 header .logo{font-size:18px;max-width:65%;transform:none!important}
 header .cooperate{font-size:11px;padding:9px 12px}
 header .main-nav{position:absolute;top:65px;left:4%;right:4%;width:92%;transform:none!important;justify-content:space-around;margin:0;height:38px}
 header .main-nav :is(a,button){min-height:36px;font-size:12px}
 #stage{inset:112px 0 100px;touch-action:pan-y}
 #stage .card{width:78vw!important;height:calc(78vw * 9 / 16)!important}
 main>aside{top:132px;max-width:75vw}main .total{top:135px;font-size:10px}main>aside #category{font-size:13px}
 .kemi-viewer-layout{display:flex;flex-direction:column;overflow-y:auto!important}
 .kemi-project-copy{flex:0 0 auto;min-height:350px;overflow:visible}
 .kemi-copy-glass{height:auto;min-height:350px;overflow:visible;justify-content:flex-start;padding:30px 24px}
 .kemi-close{z-index:20;min-width:36px;min-height:36px}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #work-collection.perspective-archive{height:auto;min-height:100svh;overflow:visible;padding:140px 4% 80px}
 .perspective-archive .collection-heading{position:relative;inset:auto;transform:none;width:100%;padding:0;margin:0 0 28px}
 .perspective-archive .collection-filters{flex-direction:row;flex-wrap:wrap;gap:12px 22px;align-items:flex-start}
 .perspective-archive .collection-filters button{min-height:40px;font-size:12px!important}
 .archive-viewport{position:relative;inset:auto;height:auto;min-height:0;overflow:visible;touch-action:pan-y;perspective:none;cursor:auto}
 .archive-scene{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;transform:none!important;width:100%;height:auto}
 .archive-scene .archive-cover{position:relative!important;inset:auto!important;margin:0!important;width:100%!important;height:auto!important;aspect-ratio:4/3;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:auto!important}
 .archive-card-face{width:100%;height:100%;translate:none!important;transform:none!important}
 .archive-hit-corner,.archive-work-intro,.archive-caption{display:none!important}
 .archive-cover .archive-card-face img{object-fit:contain;background:#eef0ed}
 .archive-cover .archive-card-face span{display:block;position:absolute;bottom:0;left:0;right:0;padding:9px;background:#fafafae8;color:#282d27;font-size:12px}
}
@media(max-width:520px){.archive-scene{grid-template-columns:1fr}.archive-scene .archive-cover{aspect-ratio:4/3}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){.archive-scene .archive-card-face{pointer-events:auto!important}}
/* Keep keyboard focus on the visible face, not its stationary hit plane. */
.archive-cover:focus-visible{outline:none;outline-offset:0}
.archive-cover:focus-visible .archive-card-face{outline:2px solid #6b8066;outline-offset:3px}



/* Compact landscape layout for short viewports. */
@media ((min-width: 768px) and ((orientation: landscape) or (width > 1400px))) and (max-height: 900px) {
 .personal-introduction.about-composition {min-height:100svh;padding-top:clamp(76px,11svh,104px)}
 .about-heading h2,.folder-projects .projects-heading h2 {font-size:clamp(26px,5.4svh,46px);margin:12px 0}
 .about-heading h2 .about-title-line,.folder-projects .projects-heading h2 span {display:inline}
 .about-heading>p {margin-bottom:12px}
 .about-portrait.portrait-toggle {width:min(35vw,46svh);max-height:35svh}
 .career-orbit {width:min(78vw,1050px);height:46%;bottom:8%}
 .career-orbit .career-glass {width:min(29vw,275px);padding:clamp(10px,1.8svh,18px)}
 .projects-screen.folder-projects {min-height:100svh;padding-top:clamp(76px,11svh,100px)}
 .reference-folder-stage.reference-folder-grid.project-page-grid {width:min(72vw,calc((100svh - 250px) * 1.05),760px);column-gap:clamp(22px,4vw,55px)}
}


/* Landscape tablets keep the desktop layout, with touch targets and viewport-sized chapters. */
.tablet-landscape .about-portrait.portrait-toggle {
 width:min(49vw, 66svh);
 max-height:none;
 cursor:pointer;
}
.tablet-landscape .personal-introduction.about-composition {
 min-height:100svh;
 padding-top:clamp(78px, 10svh, 108px);
}
.tablet-landscape .about-heading h2,
.tablet-landscape .folder-projects .projects-heading h2 {
 font-size:clamp(24px, 4.2vw, 54px);
 margin:12px 0;
}
.tablet-landscape .about-heading h2 .about-title-line,
.tablet-landscape .folder-projects .projects-heading h2 > span {display:inline}
.tablet-landscape .career-orbit .career-glass:is(:hover,:focus-within) {
 scale:1;
}
.tablet-landscape .career-orbit .career-glass:is(:hover,:focus-within)::before,
.tablet-landscape .career-orbit .career-glass:is(:hover,:focus-within)::after {opacity:0!important}
.tablet-landscape .career-detail-link span {opacity:1;translate:none}

.tablet-landscape .projects-screen.folder-projects {
 height:100svh;
 min-height:0;
 padding:clamp(76px, 10svh, 104px) 6% 52px;
 display:grid;
 grid-template-rows:auto minmax(0, 1fr);
}
.tablet-landscape .folder-projects .projects-heading > p {margin:0 0 8px}
.tablet-landscape .reference-folder-stage.reference-folder-grid.project-page-grid {
 width:min(72vw, max(270px, calc(100svh - clamp(224px, 30svh, 310px))), 850px);
 height:100%;
 min-height:0;
 margin:0 auto;
 grid-template-rows:repeat(2, minmax(0, 1fr));
 gap:8px clamp(20px, 4vw, 55px);
}
.tablet-landscape .project-page-grid .page-stack-entry {
 height:100%;
 min-height:0;
 aspect-ratio:auto;
 transform:none!important;
}
.tablet-landscape .project-page-grid .project-page-stack {inset:23% 4% 42px}
.tablet-landscape .project-page-grid .page-stack-entry .project-stack-sheet {
 transform:translateY(calc(var(--page-depth) * -20px)) translateZ(calc(var(--page-depth) * -7px)) rotateX(-14deg) scale(calc(1 - var(--page-depth) * .055));
}
.tablet-landscape .project-page-grid .page-stack-entry .reference-folder-play {
 inset:0;
 width:100%;
 height:100%;
 border:0;
 border-radius:4px;
 opacity:1;
 background:transparent;
 backdrop-filter:none;
 transform:none;
 pointer-events:auto;
}
 .tablet-landscape .project-page-grid .reference-folder-play::before {
 content:'';
 position:absolute;
 left:50%;
 top:calc(61.5% - 21px);
 width:46px;
 height:46px;
 translate:-50% -50%;
 border:1px solid #ffffff80;
 border-radius:50%;
 background:#141b1bb0;
 backdrop-filter:blur(8px);
 }
 .tablet-landscape .reference-folder-play svg {
 position:absolute;
 left:50%;
 top:calc(61.5% - 21px);
 translate:-50% -50%;
 width:24px;
 height:24px;
 }
.tablet-landscape .project-page-grid .reference-folder-label p {margin-bottom:2px}

.tablet-landscape .collection-screen.perspective-archive {min-height:0}
.tablet-landscape .perspective-archive .collection-heading {
 left:3%;
 top:80px;
 max-width:94%;
 transform:none;
}
.tablet-landscape .perspective-archive .collection-filters {
 flex-direction:row;
 gap:0 clamp(14px, 2.5vw, 36px);
}
.tablet-landscape .perspective-archive .collection-filters button {min-height:44px}
.tablet-landscape .archive-cover:not(:focus-visible):hover span {opacity:0}
.tablet-landscape .archive-cover:not(:focus-visible):hover img {opacity:var(--archive-image-opacity, .93)}


.tablet-landscape :is(main, #personal-introduction, #project-cases, #work-collection) {
 touch-action:pinch-zoom;
}
.tablet-landscape :is(main > #stage, #personal-introduction > .about-portrait, #personal-introduction > .career-orbit, #project-cases > .project-page-grid, #work-collection > .archive-viewport) {
 translate:0 var(--tablet-pull, 0px);
 transition:translate .44s cubic-bezier(.22,.75,.25,1);
}
.tablet-landscape .tablet-pulling > * {transition:none!important}
.tablet-landscape .archive-card-face {overflow:hidden}
.tablet-landscape .archive-card-face img {
 object-fit:cover;
 object-position:center;
 background:transparent;
}
.tablet-landscape .archive-card-face.cover-fill-top img {object-position:center top}
@media (prefers-reduced-motion:reduce) {
 .tablet-landscape :is(main > #stage, #personal-introduction > .about-portrait, #personal-introduction > .career-orbit, #project-cases > .project-page-grid, #work-collection > .archive-viewport) {
  translate:none;
  transition:none;
 }
}


.tablet-landscape main {background:#282927;color:#eee9dd}
.tablet-landscape main :is(#count,#name,.work-total,footer small) {color:#c8c2b7}
.tablet-landscape main #all,
.tablet-landscape body.tablet-home-dark header .cooperate {background:#eee9dd;color:#282927}
.tablet-landscape body.tablet-home-dark header .logo {color:#eee9dd}
.tablet-landscape body.tablet-home-dark header .main-nav {
 background:#282927e8;
 border-color:#eee9dd30;
 box-shadow:none;
}
.tablet-landscape body.tablet-home-dark header .main-nav :is(a,button) {color:#eee9dd}
@media ((min-width: 768px) and ((orientation: landscape) or (width > 1400px))) {
 #stage :is(.card,.work-image) {backface-visibility:visible}
 #stage .card {will-change:auto}
 #stage .card.is-offstage {visibility:hidden!important;pointer-events:none!important}
}
.tablet-landscape .archive-card-face {
 transition:translate .65s cubic-bezier(.2,.7,.2,1), scale .26s cubic-bezier(.22,.75,.25,1);
}
.tablet-landscape .archive-drag-lift .archive-card-face {scale:1.055}
@media (prefers-reduced-motion:reduce) {
 .tablet-landscape .archive-card-face {transition:none}
}

@media (prefers-reduced-motion:no-preference) {
 .tablet-landscape #stage .card {transition-duration:.3s}
}

/* Surface Pro 10: paint the selected bitmap within the original animated card. */
@media (width: 1440px) and (height: 960px) and (orientation: landscape) {
 .surface-centered-cover {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
 }
 #stage .card:has(> .surface-centered-cover:not([hidden])) .work-image {opacity:0}
}
.selected-fullscreen{position:fixed;inset:0;box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;border-radius:0;background:#171916;color:#fff;overflow:hidden}.selected-fullscreen::backdrop{background:#171916}.selected-fullscreen[open]{display:flex;align-items:center;justify-content:center}.selected-fullscreen img{display:block;width:100%;height:100%;object-fit:contain}.selected-fullscreen>button{position:absolute;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));z-index:1;padding:10px 18px;border:1px solid #ffffff60;border-radius:30px;background:#252724dd;color:#fff;cursor:pointer}