:root{--ink:#292a27;--paper:#e4e2dc;--surface:#eeece6;--muted:#65655e;--line:#292a2724}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--ink);background-color:var(--paper);font-size:18px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #ed913b;outline-offset:5px}
header{position:absolute;z-index:12;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:start;padding:22px 1.5%;color:white}
header nav,.nav-right{display:flex;gap:6px}
header nav a,.nav-right a,.nav-right button{display:flex;align-items:center;justify-content:center;min-width:110px;padding:14px 20px;border:1px solid #ffffff26;background:#18304722;font-size:17px;color:white}
.nav-right button{background:#18304722}
.logo{position:absolute;left:50%;transform:translateX(-50%);font-size:25px;letter-spacing:4px;text-align:center;font-weight:600}
.logo .mark{font-size:38px;line-height:18px;display:block;margin:0 0 8px}
.logo small{display:block;font-size:12px;letter-spacing:5px;margin-top:5px}
#menu{position:fixed;inset:0;background:#242521;z-index:30;padding:100px 10%;color:white}
#menu:not([hidden]){display:flex;flex-direction:column;gap:24px}
#menu a{font-size:clamp(32px,6vw,80px)}
#menu button{position:absolute;right:30px;top:30px;background:none;border:1px solid #fff5;color:white;padding:12px 25px}
.hero-track{height:210vh}
.hero-sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#425a6a;color:white}
.hero-background{position:absolute;inset:-4%;will-change:transform}
.hero-background img{width:100%;height:100%;object-fit:cover;animation:drift 20s ease-in-out infinite alternate}
.hero-shade{position:absolute;inset:0;background:linear-gradient(#152c344a,transparent 45%,#16293666)}
.hero-side{position:absolute;left:4.2%;right:4.2%;top:47%;display:flex;justify-content:space-between;align-items:center;z-index:2}
.hero-side p{font-size:24px;line-height:1.6}
.hero-side a{min-width:205px;font-size:18px;border-top:1px solid #fff4;border-bottom:1px solid #fff4;padding:18px 22px}
.hero-side a span{float:right;margin-left:24px}
.hero-bottom{position:absolute;bottom:16px;left:4.2%;right:4.2%;display:flex;justify-content:space-between;font-size:16px;z-index:3}
.mist{position:absolute;inset:-10%;background:radial-gradient(ellipse at 20% 80%,#fff 0,transparent 50%),radial-gradient(ellipse at 90% 60%,#fff 0,transparent 50%),linear-gradient(transparent 15%,white 90%);opacity:0;transform:translateY(35%);z-index:4;pointer-events:none}
.introduction{padding:110px 4.2% 150px;position:relative}
.small-label{font-size:23px;text-align:center}
.small-label span{display:block;font-size:35px;margin-top:25px}
.introduction h2{font-size:clamp(35px,4.5vw,68px);font-weight:400;line-height:1.55;margin:110px 0 65px;padding-left:28.6%;letter-spacing:1px}
.word-reveal{color:#292a2740}
.word-reveal .lit{color:var(--ink);transition:color .2s}
.intro-description{display:grid;grid-template-columns:1fr 2fr;margin-left:42.8%;gap:25px;font-size:19px;line-height:1.9}
.intro-description p:first-child{font-size:16px}
.section-title{font-size:clamp(48px,5vw,78px);font-weight:400;text-align:center;letter-spacing:3px;margin:0 0 80px}
.works{padding:80px 4.2% 100px;overflow:hidden}
.demo-note{font-size:15px;color:#7b818a;margin-top:30px}
.quote{max-width:660px;margin:70px auto 170px;position:relative}
.quote>span{font-size:70px}
.quote blockquote{font-size:30px;line-height:1.9;margin:0}
.quote>p{font-size:20px;margin-top:40px}
.quote>p span{font-size:16px;color:#7b818a}
.scene-track{height:240vh}
.scene-sticky{position:sticky;top:0;height:100svh;overflow:hidden;color:white}
.scene-sticky>img{width:100%;height:100%;object-fit:cover}
.scene-overlay{position:absolute;inset:0;background:#24241e55}
.scene-content{position:absolute;top:18%;left:4.2%;right:4.2%;display:grid;grid-template-columns:1fr 2fr;gap:35px}
.scene-content>p{font-size:20px}
.scene-content h2{font-size:clamp(55px,7.5vw,115px);font-weight:400;line-height:1.4;margin:0}
.scene-content>div{grid-column:2;display:flex;justify-content:space-between;font-size:22px;line-height:1.8}
.scene-mask{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
.process{padding:150px 4.2%}
.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:80px}
.process-heading>span{font-size:18px}
.process-heading h3{font-weight:400;font-size:95px;line-height:1.3;margin:30px 0}
.steps details{border-top:1px solid #26313c33;padding:25px 0}
.steps details:last-child{border-bottom:1px solid #26313c33}
.steps summary{list-style:none;cursor:pointer;display:flex;gap:25px;font-size:26px;align-items:center}
.steps summary span{font-size:16px}
.steps summary b{margin-left:auto;font-weight:400}
.steps details[open] b{rotate:45deg}
.steps p{font-size:20px;line-height:1.9;color:#66707d;padding-left:45px}
.about{padding:80px 4.2% 150px;text-align:center}
.about h2{font-size:clamp(34px,4.3vw,65px);font-weight:400;line-height:1.7;margin:60px 0}
.about>p:last-child{font-size:20px;color:#687381}
footer{padding:95px 4.2% 30px;background:#242521;color:#efeee8}
footer>h2{font-size:clamp(48px,7vw,100px);font-weight:400;line-height:1.4;margin:0 0 90px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;font-size:18px}
.footer-name{font-size:36px;letter-spacing:4px}
.footer-name small{display:block;font-size:17px;letter-spacing:1px;margin-top:18px}
.footer-grid h3{font-size:18px;font-weight:400;color:#b5c0ca;margin:0 0 25px}
.footer-grid a{display:block;margin-bottom:20px}
.footer-grid p{color:#b5c0ca}
.copyright{border-top:1px solid #fff3;padding-top:25px;margin-top:70px;display:flex;justify-content:space-between;font-size:16px;color:#aebbc8}
.reveal{opacity:0;transform:translateY(45px);transition:opacity 1s,transform 1s}
.visible{opacity:1;transform:none}
dialog{width:100vw;max-width:none;height:100svh;max-height:none;margin:0;border:0;background:var(--paper);color:var(--ink);padding:0;overflow:auto}
dialog::backdrop{background:#18232ddd}
.close{position:fixed;right:25px;top:25px;z-index:20;background:var(--surface);border:1px solid #202a3744;padding:15px 28px;font-size:18px}
.detail-hero{padding:100px 6% 60px}
.detail-hero h2{font-size:clamp(42px,5vw,80px);font-weight:400}
.detail-image{width:100%;height:70vh;object-fit:contain;background:#edf0f1}
.detail-body{padding:70px 8%;display:grid;grid-template-columns:1fr 2fr;gap:50px}
.detail-body h3{font-weight:400;font-size:34px}
.detail-body p{font-size:20px;line-height:1.9}
.detail-end{padding:0 8% 90px}
.detail-next{border:0;border-bottom:1px solid;background:transparent;padding:20px 0;font-size:24px}
.eyebrow{font-size:18px}
.hero-background img{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02) translateX(-.8%)}to{transform:scale(1.09) translateX(.8%)}}
@media(max-width:800px){header nav{display:none}
header{padding:22px 4.2%}
.logo{position:static;transform:none;font-size:22px}
.logo .mark{display:none}
.nav-right a{display:none}
.nav-right button{min-width:90px;font-size:16px}
.hero-sticky{min-height:600px}
.hero-side{top:37%}
.hero-side p{font-size:20px}
.hero-side a{min-width:150px;font-size:16px;padding:15px}
.hero-bottom{font-size:13px}
.introduction{padding:70px 6%}
.introduction h2{padding-left:0;font-size:34px;margin:65px 0}
.intro-description{margin-left:0;grid-template-columns:1fr;font-size:18px;gap:0}
.section-title{font-size:44px;margin-bottom:45px}
.works{padding:60px 6%}
.quote{margin:40px 7% 90px}
.quote blockquote{font-size:25px}
.scene-content{display:block;top:20%;left:7%;right:7%}
.scene-content h2{font-size:64px;margin-top:35px}
.scene-content>div{display:block;font-size:20px}
.process{padding:80px 7%}
.process-layout{grid-template-columns:1fr}
.process-heading h3{font-size:65px}
.steps summary{font-size:23px}
.about{padding:60px 7% 100px}
.about h2{font-size:32px}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-name{grid-column:1/-1}
.copyright{font-size:13px;gap:25px}
.detail-body{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
.reveal{opacity:1;transform:none}
.hero-track,.scene-track{height:100svh}
.mist,.scene-mask{display:none}}
.scene-content{display:block;top:44%;transform:translateY(-50%);text-align:center}
.scene-content>p{font-size:20px}
.scene-content h2{font-size:clamp(60px,7vw,108px);line-height:1.2}
.scene-content h2 br{display:none}
.scene-content>div{text-align:left;display:block;position:absolute;left:71%;top:-35px;width:25%;font-size:20px}
.hero-background video{width:100%;height:100%;object-fit:cover}
.hero-background img{position:absolute;inset:0;z-index:0}
.hero-background video{position:relative;z-index:1}
@media(max-width:800px){.scene-content{top:30%;transform:none}
.scene-content h2{font-size:52px}
.scene-content h2 br{display:block}
.scene-content>div{position:static;width:auto;text-align:center;font-size:18px;margin-top:40px}}
@media(prefers-reduced-motion:reduce){.hero-background video{display:none}}
html{overflow-x:clip}
body{overflow-x:clip}
header{align-items:start}
.logo{max-width:220px}
.hero-sticky{min-height:0}
.hero-bottom{flex-wrap:wrap;gap:8px}
.hero-side a{flex-shrink:0}
.introduction{padding:75px 4.2% 95px}
.introduction h2{margin:65px auto 0;padding-left:0;text-align:center;max-width:1100px}
.scene-track{height:180vh}
.scene-content{left:7%;right:7%}
.scene-content h2{font-size:clamp(40px,6.2vw,95px);line-height:1.35}
.scene-content h2 br{display:block}
.scene-content>p{margin-bottom:35px}
.archive{padding:100px 4.2% 80px;scroll-margin-top:25px}
.archive-heading{display:flex;justify-content:space-between;gap:25px;align-items:baseline}
.archive-heading h2{font-weight:400;font-size:clamp(40px,5vw,72px);margin:0}
.archive-heading>span{font-size:18px;color:#7b818a;white-space:nowrap}
.archive-filters{display:flex;flex-wrap:wrap;gap:12px 28px;margin:35px 0 45px}
.archive-filters button{background:none;border:0;border-bottom:1px solid transparent;padding:10px 0;font-size:18px;color:#7b818a}
.archive-filters .selected{border-color:var(--ink);color:var(--ink)}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 28px;align-items:start}
.archive-card{min-width:0}
.archive-card>button{border:0;background:none;padding:0;text-align:left;width:100%;display:block}
.archive-image{aspect-ratio:4/3;position:relative;overflow:hidden;background:#e7e9e6}
.archive-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.archive-card:nth-child(2) .archive-image img{object-fit:contain;background:#f15432}
.archive-card:hover img{transform:scale(1.035)}
.archive-image>span{position:absolute;right:20px;bottom:20px;background:white;width:45px;height:45px;display:grid;place-items:center;font-size:24px}
.archive-meta{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-top:20px}
.archive-meta h3{font-size:24px;font-weight:400;margin:0;line-height:1.5}
.archive-meta>span{font-size:16px;color:#7b818a;white-space:nowrap;line-height:2}
.about{padding:80px 4.2% 100px}
.about h2{margin:35px 0}
.detail-hero{padding-top:110px}
.detail-hero h2{overflow-wrap:anywhere}
.detail-body>*{min-width:0}
.footer-grid>*{min-width:0}
.footer-name{letter-spacing:2px}
.reveal{will-change:opacity,transform}
@media(min-width:801px) and (max-width:1100px){header nav a{min-width:auto;font-size:16px;padding:12px 14px}
.nav-right a,.nav-right button{min-width:auto;padding:12px 14px;font-size:16px}
.logo{font-size:22px}
.archive-meta{display:block}
.archive-meta>span{display:block;margin-top:6px}}
@media(max-width:800px){.hero-side{gap:20px;top:35%}
.hero-side p{font-size:19px}
.hero-side a{min-width:0;font-size:15px;padding:12px}
.hero-side a span{margin-left:12px}
.hero-track{height:170vh}
.hero-bottom{font-size:12px}
.hero-side{left:6%;right:6%}
.introduction{padding:60px 6% 70px}
.introduction h2{font-size:34px}
.small-label{font-size:19px}
.scene-track{height:150vh}
.scene-content{top:34%;transform:translateY(-20%)}
.scene-content h2{font-size:48px}
.scene-content>p{font-size:18px}
.archive{padding:75px 6% 45px}
.archive-grid{gap:35px 18px}
.archive-meta{display:block}
.archive-meta h3{font-size:20px}
.archive-meta>span{font-size:14px;display:block;margin-top:7px}
.archive-filters{gap:8px 20px;margin:25px 0 30px}
.archive-filters button{font-size:16px}
.archive-heading>span{font-size:16px}
.about h2{font-size:30px}
.about>p:last-child{font-size:17px}}
@media(max-width:540px){.archive-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.back-top{grid-column:1/-1}
.hero-side{align-items:start}
.hero-side p{margin:0;font-size:17px}
.hero-side a{font-size:14px}
.archive-image{aspect-ratio:4/3}
.copyright{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.hero-track,.scene-track{height:100svh}}
.archive-image img{object-fit:contain;background:#dcdcd5;padding:12px}
.archive-card:nth-child(2) .archive-image img{background:#dcdcd5}
.project-gallery{width:min(1040px,94%);margin:0 auto 75px}
.project-gallery figure{margin:0 0 60px}
.project-gallery img{display:block;width:100%;height:auto;box-shadow:0 5px 30px #26313c12}
.project-gallery figcaption{display:flex;justify-content:space-between;gap:20px;font-size:16px;color:#64707b;padding-top:18px}
.project-gallery figcaption a{border-bottom:1px solid #64707b;padding-bottom:4px}
.project-summary{max-width:65ch;font-size:20px;line-height:1.8;color:#697380}
.detail-hero{padding-bottom:45px}
.detail-hero h2{line-height:1.4}
@media(max-width:800px){.project-summary{font-size:18px}
.project-gallery{width:96%}
.project-gallery figure{margin-bottom:35px}
.project-gallery figcaption{font-size:14px}
.archive-meta>span{white-space:normal}}
.works{padding-top:65px}
.archive-grid{gap:40px 28px}
.archive-card{border:1px solid #292a272e;background:var(--surface);padding:14px}
.archive-meta{border-top:1px solid #27344133;margin-top:14px;padding:18px 5px 8px}
.archive-image{background:#dcdcd5}
.project-gallery figure{padding-bottom:32px;border-bottom:1px solid #27344133}
.project-gallery figure:last-child{border-bottom:0}
.introduction{border-top:1px solid #27344122;margin:35px 4.2% 0;padding-top:75px;padding-bottom:100px}
.hero-track{height:150vh}
@media(max-width:800px){.works{padding-top:45px}
.archive-card{padding:10px}
.archive-meta{padding:14px 3px 5px}
.hero-track{height:135vh}
.introduction{padding-bottom:75px}
.archive-grid{gap:25px 18px}}
@media(prefers-reduced-motion:reduce){.hero-track{height:100svh}}
@media(max-width:800px){}
@media(prefers-reduced-motion:reduce){}
@media(max-width:800px){}
.works{padding-bottom:70px}
.demo-note{margin-top:35px}
.archive-image>span{transition:transform .5s}
.archive-card:hover .archive-image>span{transform:rotate(45deg)}
dialog[open]{animation:detail-enter .5s cubic-bezier(.4,0,.2,1)}
#menu:not([hidden]){animation:detail-enter .45s cubic-bezier(.4,0,.2,1)}
@keyframes detail-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){}
@media(prefers-reduced-motion:reduce){dialog[open],#menu{animation:none!important;transition:none!important}
.archive-card.reveal{opacity:1;transform:none}}
@media(max-width:800px){}
header{padding:20px 3%;color:#e2e2df}
header nav a,.nav-right a,.nav-right button{background:#1011133b;border-color:#ffffff20}
.hero-sticky{background:#111214}
.hero-background{inset:0}
.hero-background img{object-position:center center;animation:drift 28s ease-in-out infinite alternate}
.hero-shade{background:linear-gradient(#08090c50,transparent 45%,#08090c65),linear-gradient(90deg,#08090c50,transparent 50%,#08090c30)}
.hero-side{top:auto;bottom:14%;left:6%;right:auto;display:block}
.hero-side p{font-size:clamp(22px,2.2vw,32px);line-height:1.6;letter-spacing:3px;margin:0 0 22px}
.hero-side a{font-size:16px;display:inline-block;min-width:205px;border-top:0;padding:12px 0}
.hero-bottom{left:6%;bottom:30px;font-size:14px;letter-spacing:2px}
.scroll-guide{position:absolute;z-index:3;left:50%;bottom:3%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:10px;color:#f2f2ec}
.scroll-guide span{font-size:14px;letter-spacing:3px}
.scroll-guide i{width:1px;height:80px;background:#ffffff30;position:relative;overflow:hidden}
.scroll-guide i:after{content:"";position:absolute;top:-40%;height:40%;width:100%;background:white;animation:guide-flow 2.4s ease-in-out infinite}
.scroll-guide b{font-size:20px;font-weight:400}
.mist{inset:-15%;background:linear-gradient(transparent 10%,var(--paper) 85%);overflow:visible;filter:blur(10px)}
.cloud{position:absolute;border-radius:50%;background:radial-gradient(ellipse,var(--paper) 30%,#e4e2dcdc 52%,#e4e2dc00 72%);filter:blur(25px);width:115%;height:70%;pointer-events:none}
.cloud-one{left:-35%;top:15%}
.cloud-two{right:-35%;top:32%;height:75%}
.cloud-three{left:-5%;top:50%;width:110%;height:70%}
@keyframes guide-flow{0%{top:-40%;opacity:0}25%{opacity:1}100%{top:110%;opacity:0}}
@media(max-width:800px){header{padding:20px 5%}
.hero-side{bottom:22%;left:7%;right:7%;top:auto}
.hero-side p{font-size:24px;letter-spacing:2px}
.hero-side a{font-size:15px;padding:9px 0;min-width:190px}
.hero-bottom{font-size:11px;bottom:20px;left:7%}
.scroll-guide{bottom:6%;left:78%}
.scroll-guide i{height:65px}
.scroll-guide span{font-size:12px}
.hero-background img{object-position:center}
.mist{filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){.scroll-guide i:after{animation:none;top:0;height:100%}
.mist{display:none}}
.about-brief{max-width:880px;margin:42px auto 0}
.education{font-size:20px;line-height:1.7}
.education>span{display:inline-block;margin-left:20px;font-size:16px;color:#79828a}
.about-intro{font-size:18px;line-height:1.9;color:#687381;max-width:42ch;margin:22px auto 35px}
.email-link{overflow-wrap:anywhere;font-size:16px;line-height:1.7}
@media(max-width:600px){.education{font-size:18px}
.education>span{display:block;margin:8px 0 0}
.about-intro{font-size:17px}
.about-brief{margin-top:30px}}
/* One sizing model for all six panels; image edges cover the clipping box. */
.work-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;font-size:16px}
.work-nav button{background:var(--surface);border:1px solid #292a2733;width:58px;height:48px;font-size:25px}
.work-controls{display:flex;align-items:center;gap:8px}
.work-controls>span{font-size:16px;font-variant-numeric:tabular-nums;margin-right:18px;min-width:65px}
.work-rail{--poster-height:min(75svh,760px);display:flex;align-items:center;gap:0;height:calc(var(--poster-height) + 56px);min-height:0;padding:28px 12px;overflow:visible;isolation:isolate;background:transparent}
.work-card{position:relative;min-width:0;flex:1 1 0;height:var(--poster-height);margin-left:-18px;border:0;overflow:hidden;background:#1f2c38;box-shadow:0 7px 24px #13203022;transform:translateY(var(--stack-y,0px)) rotate(var(--stack-angle,0deg));transform-origin:center;z-index:1;transition:flex .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1)}
.work-card:first-child{margin-left:0}
.work-card.active{flex:0 0 calc(var(--poster-height) * .707);transform:translateY(0) rotate(0);z-index:6}
.work-card>button{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;text-align:left;color:#fff;background:transparent;overflow:hidden}
.work-cover{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.work-cover img{display:block;position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;object-position:center;padding:0;filter:none;transform:none;transition:none}
.work-cover:before{content:"";position:absolute;inset:-10px;z-index:1;backdrop-filter:blur(7.5px);-webkit-backdrop-filter:blur(7.5px);background:#17242e18;opacity:1;transition:opacity .65s;pointer-events:none}
.work-card.active .work-cover:before{opacity:0}
.work-cover:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(#12202d66,transparent 40%,#12202d99);pointer-events:none}
.work-card.active .work-cover:after{background:linear-gradient(#12202d77,transparent 24%,transparent 78%,#12202d88)}
.card-content{position:absolute;inset:35px;z-index:3;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.work-card.active .card-content{opacity:1;visibility:visible;transition:opacity .5s .2s}
.work-card h3{font-size:clamp(24px,2.6vw,38px);font-weight:400;line-height:1.3;margin:0 0 20px;max-width:16ch;color:white;text-shadow:0 2px 12px #0009;overflow-wrap:anywhere}
.work-card .meta{display:flex;flex-wrap:wrap;gap:25px;margin:0;font-size:17px;text-shadow:0 2px 8px #0009}
.explore{align-self:flex-start;display:inline-block;padding:15px 0;border-bottom:1px solid white;font-size:20px;text-shadow:0 2px 8px #0009}
.card-number{position:absolute;bottom:25px;left:25px;z-index:3;font-size:20px;opacity:.8;pointer-events:none}
.work-card.active .card-number{display:none}
@media(min-width:801px) and (max-width:1100px){.card-content{inset:22px}.work-card h3{font-size:28px}}
@media(max-width:800px){
 .work-rail{--poster-height:min(520px,calc(100vw * .88 * .9 * 1.414));height:calc(var(--poster-height) + 24px);padding:12px 0;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
 .work-rail::-webkit-scrollbar{display:none}
 .work-card,.work-card.active{flex:0 0 calc(var(--poster-height) * .707);height:var(--poster-height);margin-left:0;transform:none;box-shadow:none;scroll-snap-align:start}
 .work-cover:before{display:none}
 .work-card .card-content{opacity:1;visibility:visible;inset:24px}
 .work-card h3{font-size:28px}
 .card-number{display:none}
 .work-controls>span{font-size:14px;margin-right:5px}
 .work-nav{font-size:13px}.work-nav button{width:42px}
}
@media(prefers-reduced-motion:reduce){.work-card,.work-cover:before,.card-content{transition:none!important}}

/* Draw the original display lettering directly, without image or SVG filters. */
.hero-sticky h1{position:absolute;top:max(110px,17%);bottom:auto;left:6%;right:6%;height:clamp(135px,25svh,235px);display:flex;justify-content:space-between;align-items:center;margin:0;font-size:0;line-height:0;color:#efeee7;z-index:2;will-change:opacity,transform}
.hero-sticky h1>span{display:block;width:clamp(100px,15vw,185px);max-width:22%;height:100%;flex:0 1 auto}
.hero-sticky h1 svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:800px){.hero-sticky h1{top:max(100px,20%);height:clamp(100px,19svh,160px)}.hero-sticky h1>span{width:18vw}}
@media(max-height:500px){.hero-sticky h1{top:90px;height:24svh}}
.hero-background img{image-rendering:auto}
.hero-shade{background:linear-gradient(#08090c65,#08090c50 35%,#08090c15 62%,#08090c65),linear-gradient(90deg,#08090c45,transparent 50%,#08090c20)}
@media(max-width:800px){.hero-background img{object-position:54% center}}

/* Seal the cloud transition in the same stone-grey as selected works. */
.mist:after{content:"";position:absolute;inset:-30%;background:var(--paper);opacity:var(--mist-seal,0);pointer-events:none}

/* Warm grey surfaces around untouched artwork. */
.scene-sticky>img{filter:grayscale(.88) sepia(.12)}
.archive-card{box-shadow:0 5px 24px #292a2705}
.archive-image>span{background:var(--surface)}
.introduction{border-top-color:var(--line)}
.archive-meta,.project-gallery figure{border-color:var(--line)}
.demo-note,.archive-heading>span,.archive-meta>span,.archive-filters button,.about>p,.education>span,.about-intro,.project-summary,.project-gallery figcaption{color:var(--muted)}
.archive-filters .selected{color:var(--ink)}
.footer-grid h3,.footer-grid p,.copyright{color:#c0c0b6}

/* A single local route connects the mountain opening to selected works. */
.hero-track{position:relative}
.transition-route{position:absolute;z-index:6;left:50%;bottom:-90px;width:clamp(280px,45vw,620px);height:calc(80svh + 90px);transform:translateX(-50%);pointer-events:none;opacity:0}
.transition-route svg{display:block;width:100%;height:100%;overflow:visible}
.transition-route path{fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.route-base{opacity:.18}
#route-progress{opacity:.7;stroke-linecap:round}
.route-origin,.route-dot{fill:var(--muted)}
.route-ring{fill:var(--paper);stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.works{padding-top:130px}
@media(max-width:800px){.transition-route{bottom:-70px;width:80vw;height:calc(75svh + 70px)}.works{padding-top:110px}}
@media(prefers-reduced-motion:reduce){.transition-route{opacity:1}#route-progress{stroke-dashoffset:0}}

/* Compact project details: two complete boards per desktop row. */
dialog{--detail-image-height:clamp(220px,calc(100svh - 310px),650px)}
.detail-hero{padding:80px 6% 28px}
.detail-hero .eyebrow{font-size:16px;line-height:1.5;margin:0}
.detail-hero h2{font-size:clamp(30px,3vw,48px);line-height:1.3;margin:12px 0}
.project-summary{font-size:17px;line-height:1.7;margin:12px 0 0;max-width:70ch}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;width:min(1100px,90%,calc(var(--detail-image-height) * 1.414 + 28px));margin:0 auto 60px}
.project-gallery.gallery-single{grid-template-columns:minmax(0,1fr);width:min(440px,90%,calc(var(--detail-image-height) * .707))}
.project-gallery figure{min-width:0;margin:0;padding-bottom:18px;border-bottom:1px solid var(--line)}
.project-gallery img{display:block;width:auto;max-width:100%;height:auto;max-height:var(--detail-image-height);object-fit:contain;margin:0 auto}
.project-gallery figcaption{font-size:14px;padding-top:12px;align-items:center}
.detail-image{display:block;width:min(850px,90%);height:var(--detail-image-height);object-fit:contain;margin:0 auto 60px;background:transparent}
@media(max-width:700px){
 dialog{--detail-image-height:min(72svh,680px)}
 .detail-hero{padding:85px 6% 24px}
 .detail-hero h2{font-size:30px}
 .project-summary{font-size:16px}
 .project-gallery,.project-gallery.gallery-single{grid-template-columns:minmax(0,1fr);width:min(460px,90%);gap:28px}
 .project-gallery figure{margin:0}
 .project-gallery img{max-height:var(--detail-image-height)}
}

/* Music-film details pair the portrait poster with the complete film. */
.film-detail{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);align-items:center;gap:32px;width:min(1120px,90%);margin:0 auto 60px}
.film-poster{min-width:0;margin:0}
.film-poster img{display:block;width:100%;height:var(--detail-image-height);object-fit:contain}
.film-poster figcaption{margin-top:12px;text-align:center;font-size:14px;color:var(--muted)}
.film-poster figcaption a{display:inline-block;border-bottom:1px solid var(--line);padding-bottom:4px}
.film-watch{min-width:0}
.film-player{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#121210}
.film-caption{margin:14px 0 0;color:var(--muted);font-size:14px}
@media(max-width:700px){.film-detail{grid-template-columns:minmax(0,1fr);gap:28px}.film-poster{width:min(360px,100%);margin:0 auto}.film-player{width:100%}}

/* Project asset handoff */
.project-download{display:inline-block;font-size:16px;border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 24px 24px 0}
.project-gallery figcaption>span{line-height:1.5;max-width:70%}
.project-gallery figcaption>a{flex-shrink:0}

/* A clear reading order for complete project cases */
.gallery-section-title{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin:18px 0 0;font-size:18px;font-weight:400;color:var(--ink)}
.gallery-section-title:after{content:"";height:1px;flex:1;background:var(--line)}
@media(max-width:700px){.gallery-section-title{font-size:17px;margin-top:10px}}

.project-study-link{display:inline-block;font-size:16px;margin-top:18px;border-bottom:1px solid var(--line);padding-bottom:6px}

.project-downloads{display:flex;flex-wrap:wrap;gap:12px 24px}

/* Resume-grounded skills, placed after the portfolio and personal introduction. */
.skills{padding:0 4.2% 100px;scroll-margin-top:105px}
.skills-inner{max-width:1280px;margin:0 auto}
.skills-heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line);padding-top:34px;margin-bottom:36px}
.skills-heading h2{font-size:clamp(32px,3.2vw,48px);font-weight:400;line-height:1.35;margin:0}
.skills-heading>span{font-size:18px;color:var(--muted)}
.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 64px}
.skill-item{min-width:0;border-top:1px solid var(--line);padding-top:22px}
.skill-item h3{font-size:26px;line-height:1.4;font-weight:400;margin:0 0 12px}
.skill-item p{font-size:18px;line-height:1.8;margin:0 0 16px;max-width:36ch;color:var(--muted)}
.skill-tools{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;margin:0}
.skill-tools li{font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:999px;padding:5px 13px;max-width:100%;overflow-wrap:anywhere}
@media(max-width:800px){.skills{padding:0 7% 75px;scroll-margin-top:85px}.skills-grid{gap:30px}.skill-item h3{font-size:24px}}
@media(max-width:600px){.skills-heading{padding-top:28px;margin-bottom:28px}.skills-heading>span{font-size:17px}.skills-grid{grid-template-columns:minmax(0,1fr);gap:30px}.skill-item{padding-top:20px}.skill-item p{font-size:17px;max-width:none}}

/* Portrait film covers keep the full poster visible in the archive. */
.archive-card.is-film .archive-image{aspect-ratio:3/5}
.archive-card.is-film .archive-image img{object-fit:cover;padding:0;background:#18231f}
.archive-card.is-film:hover .archive-image>span{transform:none}

/* Mixed-height covers flow into the shorter column without empty grid rows. */
.archive-grid.masonry{grid-auto-rows:1px;row-gap:0;--archive-card-gap:40px}
@media(max-width:800px){.archive-grid.masonry{--archive-card-gap:25px}}
.archive-grid.masonry .archive-card.reveal{opacity:1;transform:none}