.intro-stage{--ivory:#eae7dd;position:relative;isolation:isolate;display:grid;align-items:center;min-height:max(740px,100vh);min-height:max(740px,100svh);overflow:hidden;background:#0b0c0d;color:var(--ivory);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}
.silk-canvas{position:absolute;inset:0;z-index:-3;width:100%;height:100%;background:radial-gradient(ellipse at 85% 20%,#696c6466,transparent 48%),linear-gradient(125deg,#0a0b0c 30%,#373b38 65%,#090a0b 90%)}
.silk-overlay{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#08090bbc 0%,#090a0b77 30%,#090a0b0a 70%),linear-gradient(0deg,#08090bd9,transparent 22%,transparent 85%,#08090b44)}
.intro-masthead{position:absolute;top:42px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#d0d0c5;font-size:11px;letter-spacing:2px}.intro-masthead.is-stuck{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 5% 18px;background:#0b0c0cbf;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 1px 0 #ffffff17}.intro-stage.nav-stuck{z-index:50}
.intro-masthead>a{font-size:14px;font-weight:600;letter-spacing:2px;display:flex;gap:18px;align-items:center}.intro-masthead>span{font-size:10px;opacity:.6;letter-spacing:2px}
.intro-identity{position:relative;padding:140px 0;transform:translateY(-12px)}
.identity-profile{margin:0 0 30px;padding-left:10px;animation:quiet-enter 1.4s .1s both}
.identity-kicker{font-size:26px;line-height:1.6;letter-spacing:1px;color:#fff;font-weight:500;margin:0 0 8px}
.identity-detail{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px;margin:0;font-size:24px;line-height:1.9;letter-spacing:.5px;color:#a3aa9b}.identity-divider{flex-shrink:0;width:1px;height:20px;background:#a3aa9b;opacity:.45}
.intro-identity h1{margin:48px 0 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:clamp(56px,4.5vw,88px);font-weight:400;letter-spacing:-.035em;line-height:1.26;text-align:left;white-space:nowrap}
.headline-line{display:inline-block;animation:quiet-enter 1.7s .16s cubic-bezier(.2,.8,.2,1) both}.headline-line.second-line{animation-delay:.32s;margin-left:0;font:inherit;letter-spacing:inherit;color:inherit}
.intro-foot{position:absolute;bottom:35px;left:24px;right:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;animation:quiet-enter 2s .8s both;transition:opacity .5s ease,visibility .5s ease}.intro-foot.is-hidden{animation:none;opacity:0;visibility:hidden;pointer-events:none}.intro-foot.is-settled{animation:none}
.intro-scroll{width:44px;height:48px;display:grid;place-items:center;color:#bac1b0;transition:color .25s}
.intro-scroll:hover{color:#f2f2e7}
.scroll-mouse{position:relative;display:block;width:21px;height:32px;border:1px solid currentColor;border-radius:12px}
.scroll-wheel{position:absolute;top:7px;left:9px;width:1px;height:6px;border-radius:1px;background:currentColor;animation:mouse-scroll 2.4s ease-in-out infinite}

.intro-stage a:focus-visible{outline:2px solid #d8dec8;outline-offset:5px;border-radius:4px}
.intro-stage[data-motion='paused'] .scroll-wheel{animation-play-state:paused}
@keyframes mouse-scroll{0%,15%{opacity:0;transform:translateY(0)}30%{opacity:1}75%,100%{opacity:0;transform:translateY(9px)}}
@keyframes quiet-enter{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

@media(max-width:760px){.intro-stage{min-height:max(670px,100vh);min-height:max(670px,100svh)}.intro-masthead{top:27px;left:7%;right:7%}.intro-masthead.is-stuck{left:0;right:0;padding:16px 7% 14px}.intro-masthead>span{font-size:8px;letter-spacing:1px}.intro-masthead>a{font-size:12px}.intro-identity{padding:120px 0 150px;transform:none}.identity-profile{margin-bottom:28px}.identity-kicker{font-size:18px;margin-bottom:9px;letter-spacing:.5px}.identity-detail{font-size:12px;line-height:1.8;gap:3px 20px}.identity-divider{height:14px}.identity-detail>span{white-space:nowrap}.intro-identity h1{font-size:clamp(44px,11.8vw,72px);letter-spacing:-.035em;line-height:1.3}.headline-line{display:block}.headline-line.second-line{margin-left:0;letter-spacing:inherit;white-space:nowrap}.intro-foot{bottom:25px;gap:10px;left:20px;right:20px}.silk-overlay{background:linear-gradient(90deg,#08090b99,#090a0b22),linear-gradient(0deg,#08090bcc,transparent 25%,transparent 90%,#08090b33)}}
@media(prefers-reduced-motion:reduce){.intro-stage *{animation:none!important;transition:none!important}}

.intro-nav{display:flex;align-items:center;gap:36px}.intro-nav a{position:relative;display:flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:1px;color:#a0a39d;transition:color .2s}.intro-nav a:hover,.intro-nav a[aria-current]{color:#eeeee6}.intro-nav a::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s}.intro-nav a[aria-current]::after{transform:scaleX(1)}
@media(max-width:760px){.intro-nav{gap:22px}.intro-nav a{font-size:14px;letter-spacing:0}}

.profile-header{display:flex;align-items:center;justify-content:space-between;min-height:112px}.profile-brand{font-size:14px;font-weight:600;letter-spacing:2px}.profile-page .intro-nav a{color:#787c75}.profile-page .intro-nav a:hover,.profile-page .intro-nav a[aria-current]{color:#22251f}.profile-page .about-section{padding-top:120px}.profile-header a:focus-visible{outline:2px solid #333;outline-offset:5px}@media(max-width:760px){.profile-header{min-height:88px}.profile-page .about-section{padding-top:64px}}

.profile-page .about-section{margin-top:0;border-top:0}.profile-page .about-section h1{font-size:31px;line-height:1.65;margin:0}.profile-page .about-section h1 span{color:#7b9d3e}@media(max-width:760px){.profile-page .about-section h1{font-size:27px}}

.work-section .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.work-section .section-heading{margin-bottom:32px}.project-cover{display:grid;place-items:center;aspect-ratio:1.2;padding:32px;background:#efefed;border-radius:14px}.project-cover h3{margin:0;font-size:clamp(20px,1.7vw,30px);font-weight:400;line-height:1.5;text-align:center;letter-spacing:-.02em;color:#252723}@media(max-width:760px){.work-section .project-grid{grid-template-columns:1fr;gap:20px}.project-cover{padding:24px;border-radius:12px}.project-cover h3{font-size:22px}}

.portfolio-project h3{margin:20px 0 0;font-size:23px;line-height:1.5;font-weight:500;letter-spacing:-.025em}.work-section .project-grid{row-gap:52px}.portfolio-art{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.36;border-radius:10px;padding:28px;display:flex;align-items:flex-end}.portfolio-art::before{content:"";position:absolute;z-index:-1;width:90%;height:110%;left:35%;top:-30%;border-radius:50%;filter:blur(40px);transform:rotate(-35deg)}.art-index{position:absolute;top:26px;left:28px;font-size:12px;letter-spacing:2px;opacity:.65}.art-word{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:clamp(56px,6vw,100px);font-weight:400;letter-spacing:-.065em;line-height:1}.art-line{position:absolute;left:28px;right:28px;top:56px;height:1px;background:currentColor;opacity:.15}@media(max-width:760px){.portfolio-project h3{font-size:20px;margin-top:16px}.work-section .project-grid{row-gap:32px}.portfolio-art{padding:24px}.art-word{font-size:64px}}

/* Featured project followed by paired projects; covers can be replaced by images. */
.work-section{padding-bottom:40px}#work-title{font-size:24px;font-weight:500}
.work-section .project-grid{column-gap:36px;row-gap:64px}
.featured-project{grid-column:1 / -1}
.featured-project .portfolio-art{aspect-ratio:2.15;padding:40px}
.featured-project .art-word{font-size:clamp(80px,10vw,156px)}
.featured-project h3{font-size:28px;margin-top:24px}
.portfolio-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.more-projects{align-self:center;margin:0 36px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more-projects .portfolio-art{aspect-ratio:2.6;padding:22px}
.more-projects .art-index,.more-projects .art-line{display:none}
.more-projects .art-word{font-size:clamp(46px,4vw,64px)}
.more-projects h3{font-size:21px;margin-top:18px}
@media(max-width:760px){.work-section .project-grid{gap:36px}.featured-project{grid-column:auto}.featured-project .portfolio-art{aspect-ratio:1.45;padding:24px}.featured-project .art-word{font-size:76px}.featured-project h3{font-size:22px;margin-top:16px}.more-projects{margin:4px 0 0;padding:24px 0}.more-projects .portfolio-art{aspect-ratio:2.6}.more-projects .art-word{font-size:48px}}

/* Each cover derives its palette from one project theme color.
   Other project colors remain provisional until supplied by the designer. */
.art-1{--project-theme:#0AB8A6}
.art-2{--project-theme:#6B82CB}
.art-3{--project-theme:#FF6B22}
.art-4{--project-theme:#D02020}
.art-5{--project-theme:#879578}
.portfolio-art{
 --cover-base:color-mix(in srgb,var(--project-theme) 16%,var(--cover-surface,#ffffff));
 --cover-text:color-mix(in srgb,var(--project-theme) 28%,var(--cover-ink,#101b1a));
 background:var(--cover-base);
 color:var(--cover-text);
}
.portfolio-art::before{
 background:linear-gradient(110deg,color-mix(in srgb,var(--project-theme) 56%,var(--cover-surface,#ffffff)),transparent 72%);
}

/* Project information / image stage composition based on supplied reference. */
.work-section .project-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.project-card{display:grid;grid-template-columns:30.4% minmax(0,1fr);min-height:560px;border-radius:16px;overflow:hidden;background:#f6f6f6}
.project-copy{display:flex;flex-direction:column;align-items:flex-start;padding:38px;min-width:0}
.project-category,.project-period{margin:0;color:#747474;font-size:16px;line-height:1.6}
.project-category{letter-spacing:1px}
.project-heading{margin-top:42px}
.project-heading h3{font-size:24px;line-height:1.45;letter-spacing:-.025em;font-weight:500;margin:0 0 14px;color:#222}
.project-summary{font-size:16px;line-height:1.75;color:#767676;margin:0}
.project-period{margin-top:auto;padding-top:60px}
.project-card .portfolio-art{aspect-ratio:auto;border-radius:0;padding:0;min-height:100%}
.project-card .portfolio-art>img{top:16.5%;left:15%;width:70%;height:auto;max-width:70%;object-fit:contain;object-position:top;border-radius:12px;box-shadow:0 12px 40px #0000000a}
@media(min-width:1500px){.project-card{min-height:570px}}
@media(max-width:1000px){.project-card{grid-template-columns:34% minmax(0,1fr);min-height:440px}.project-copy{padding:28px}.project-heading h3{font-size:21px}.project-summary{font-size:15px}.project-category,.project-period{font-size:14px}}
@media(max-width:760px){.work-section .project-grid{gap:28px}.project-card{grid-template-columns:1fr;min-height:0;border-radius:12px}.project-copy{padding:28px}.project-heading{margin-top:24px}.project-heading h3{font-size:22px}.project-period{padding-top:30px}.project-card .portfolio-art{aspect-ratio:1.3;min-height:0}.project-card .portfolio-art>img{top:12%;left:8%;width:84%;max-width:84%}}

/* Hover the entire themed stage to open the screenshot stack. */
.project-preview{display:grid;place-items:center;outline:none}
.project-preview:focus-visible{box-shadow:inset 0 0 0 3px #087e72}
.preview-stack{position:relative;width:74%;aspect-ratio:var(--preview-ratio,1740 / 1089);isolation:isolate;pointer-events:none}
.preview-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;transform-origin:center;transition:transform 520ms cubic-bezier(.22,.75,.2,1),filter 520ms ease;box-shadow:0 12px 30px #064d4310}
.preview-back{z-index:1;transform:scale(.94);filter:brightness(.95)}
.preview-middle{z-index:2;transform:scale(.97);filter:brightness(.98)}
.preview-front{z-index:3;transform:translateY(0)}
@media(hover:hover) and (pointer:fine){
.project-preview:hover .preview-back{transform:translate(-4%,-3%) rotate(-5deg) scale(.94)}
.project-preview:hover .preview-middle{transform:translate(4%,-2%) rotate(4deg) scale(.97)}
.project-preview:hover .preview-front{transform:translateY(-3px)}
}
.project-preview:focus-visible .preview-back{transform:translate(-4%,-3%) rotate(-5deg) scale(.94)}
.project-preview:focus-visible .preview-middle{transform:translate(4%,-2%) rotate(4deg) scale(.97)}
.project-preview:focus-visible .preview-front{transform:translateY(-3px)}
@media(max-width:760px){.preview-stack{width:84%}.preview-layer{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.preview-layer{transition:none}.project-preview .preview-layer{transform:none!important}}

/* Match the landscape cover height while preserving the portrait ratio. */
.art-4{container-type:inline-size}
.art-4 .preview-portrait{height:calc(74cqw * 1089 / 1740);width:auto;aspect-ratio:var(--preview-ratio);max-width:80%}
@media(max-width:760px){.art-4 .preview-portrait{height:calc(84cqw * 1089 / 1740)}}

/* Equal-height multi-project gallery; desktop screen continues past the edge. */
.project-card .more-project-gallery{container-type:inline-size;display:grid;align-items:center;background:#17191c}
.more-project-gallery::before{inset:0;width:100%;height:100%;border-radius:0;filter:none;transform:none;background:radial-gradient(ellipse at 48% 42%,#41454b 0%,#24272b 42%,#17191c 80%)}
.gallery-strip{display:flex;align-items:flex-start;gap:5cqw;padding-left:8cqw;width:max-content;height:calc(74cqw * 1089 / 1740)}
.gallery-strip img{display:block;flex:none;height:100%;width:auto;max-width:none;object-fit:contain;border-radius:8px;box-shadow:0 12px 30px #0004}
@media(max-width:760px){.gallery-strip{height:calc(84cqw * 1089 / 1740);gap:5cqw;padding-left:8cqw}.gallery-strip img{border-radius:5px}}

/* Each image lifts independently; its hover area stays in place. */
.gallery-item{flex:none;height:100%}
.gallery-item img{transition:transform 420ms cubic-bezier(.2,.8,.3,1),box-shadow 420ms ease}
@media(hover:hover) and (pointer:fine){
 .gallery-item:hover img{transform:translateY(-10px);box-shadow:0 24px 40px #0006;transition-timing-function:cubic-bezier(.2,.8,.3,1.35),ease}
}
@media(prefers-reduced-motion:reduce){.gallery-item img{transition:none}.gallery-item:hover img{transform:none}}

/* The whole project card is one semantic link; image interactions remain independent. */
a.project-card{text-decoration:none;color:inherit}
a.project-card,a.project-card *,a.project-card::before,a.project-card::after,a.project-card *::before,a.project-card *::after{cursor:pointer!important}
.project-heading h3{display:flex;align-items:center;gap:10px}
.project-heading h3>span:first-child{min-width:0}
.project-arrow{display:inline-flex;flex:0 0 22px;opacity:0;transform:translateX(-4px);transition:opacity 220ms ease,transform 320ms cubic-bezier(.2,.8,.3,1)}
.project-arrow svg{width:22px;height:22px}
.project-card:hover .project-arrow,.project-card:focus-visible .project-arrow{opacity:1;transform:translate(0,0)}
.project-card:focus,.project-card:focus-visible{outline:none}
.project-card:focus-visible .preview-back{transform:translate(-4%,-3%) rotate(-5deg) scale(.94)}
.project-card:focus-visible .preview-middle{transform:translate(4%,-2%) rotate(4deg) scale(.97)}
.project-card:focus-visible .preview-front{transform:translateY(-3px)}
@media(hover:none){.project-arrow{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.project-arrow{transition:none;transform:none}.project-card:focus-visible .preview-layer{transform:none}}

/* A full-width dark chapter separates written research from visual projects. */
.research-section{--research-line:#ffffff26;background:#111313;color:#f3f3ef;margin-top:56px;padding:88px 0 104px;scroll-margin-top:80px}
.research-section h2{font-size:24px;font-weight:500}
.research-section .section-heading{margin-bottom:44px}
.research-grid{display:flex;flex-direction:column}
.research-card{min-width:0;padding:42px 0;border-top:1px solid var(--research-line);display:grid;grid-template-columns:210px minmax(0,1fr) 32px;align-items:baseline;gap:32px;cursor:pointer;font-size:clamp(22px,1.65vw,26px);font-weight:400;line-height:1.55;letter-spacing:-.025em}
.research-card:last-child{border-bottom:1px solid var(--research-line)}
.research-meta{color:#a1a5a2;font:inherit;letter-spacing:inherit;transition:color 240ms ease}
.research-card h3{margin:0;font:inherit;letter-spacing:inherit;transition:transform 300ms cubic-bezier(.2,.8,.3,1),color 240ms ease}
.research-arrow{display:flex;align-self:center;opacity:.42;transform:translateX(-6px);transition:opacity 240ms ease,transform 300ms cubic-bezier(.2,.8,.3,1)}
.research-arrow svg{width:26px;height:26px}
@media(hover:hover) and (pointer:fine){.research-card:hover .research-meta{color:#f3f3ef}.research-card:hover h3{color:#fff;transform:translateX(6px)}.research-card:hover .research-arrow{opacity:1;transform:translateX(0)}}
.research-card:focus-visible{outline:none;box-shadow:inset 3px 0 #c9f66b}
.research-card:focus-visible .research-meta{color:#fff;transform:translateX(14px)}
.research-card:focus-visible h3{color:#fff;transform:translateX(6px)}
.research-card:focus-visible .research-arrow{opacity:1;transform:none}
.research-footer{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#111313,#0a0c0c);color:#a1a5a2;padding:0;border:0}
.footer-light{position:absolute;inset:-24px -8% 58px 18%;z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,#000 22%,#000 70%,transparent)}
.footer-light svg{width:100%;height:100%;display:block}
.footer-glow{transform-box:view-box;transform-origin:50% 65%}
.footer-glow-wide{animation:footer-light-breathe 12s ease-in-out infinite alternate}
.footer-glow-fold{opacity:.55;animation:footer-light-flow 15s ease-in-out -5s infinite alternate}
.footer-signoff{position:relative;display:flex;align-items:flex-end;min-height:360px}
.footer-note{margin:0;color:#9da6a0;font-size:16px;font-weight:400;letter-spacing:.02em;line-height:1.75}
.research-footer .footer-bottom{width:100%;border:0;color:inherit;padding:28px 0 40px;align-items:center;gap:24px}
.footer-top{display:inline-flex;align-items:center;gap:12px;min-height:44px;transition:color 200ms ease}
.footer-top svg{height:18px;width:18px;transition:transform 300ms cubic-bezier(.2,.8,.3,1)}
.footer-top:hover,.footer-top:focus-visible{color:#f1f3ed}
.footer-top:hover svg,.footer-top:focus-visible svg{transform:translateY(-4px)}
.research-footer a:focus-visible{outline:1px solid #c9ceca;outline-offset:6px;border-radius:2px}
@keyframes footer-light-breathe{from{transform:translate3d(-1%,2%,0) scale(1);opacity:.65}to{transform:translate3d(1.5%,-2%,0) scale(1.025);opacity:1}}
@keyframes footer-light-flow{from{transform:translate3d(2%,1%,0) rotate(-1deg);opacity:.4}to{transform:translate3d(-2%,-1.5%,0) rotate(1deg);opacity:.7}}
@media(max-width:760px){.research-section{margin-top:28px;padding:56px 0 64px}.research-section .section-heading{margin-bottom:28px}.research-card{grid-template-columns:minmax(0,1fr) 28px;padding:28px 0;gap:10px 20px;font-size:22px}.research-meta{grid-column:1}.research-card h3{grid-column:1;grid-row:2}.research-arrow{grid-column:2;grid-row:1 / 3}.research-card:focus-visible h3{transform:translateX(14px)}}
@media(hover:none){.research-arrow{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.research-card h3,.research-meta,.research-arrow{transition:none}.research-card:hover h3{transform:none}}
@media(max-width:760px){.footer-signoff{min-height:240px}.footer-note{font-size:14px}.footer-light{top:-10px;left:-8%;right:-45%;bottom:56px}.research-footer .footer-bottom{padding:20px 0 28px;gap:12px;font-size:11px}.footer-top{gap:7px}}
@media(prefers-reduced-motion:reduce){.footer-glow{animation:none}.footer-top,.footer-top svg{transition:none}.footer-top:hover svg,.footer-top:focus-visible svg{transform:none}}