/* Mobile is an editorial reading layout, independent of the desktop perspective scene. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 html{scroll-behavior:smooth}body{overflow-x:clip}
 header{height:72px!important;padding:20px 5%!important;align-items:center!important;background:transparent!important;backdrop-filter:none!important}
 header .logo{font-size:18px!important;transform:none!important;max-width:75%}
 header>.main-nav,header>.cooperate{display:none!important}
 .mobile-menu-toggle{display:block!important;min-width:48px;min-height:40px;border:1px solid #8e958c66;border-radius:24px;background:#fafafacc;color:#252c25;font-size:13px}
 .mobile-navigation{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:24px 7%;border:0;background:linear-gradient(135deg,#62716bd9,#101b16ed);color:#f6f6ef;backdrop-filter:blur(28px);overflow-y:auto}
 .mobile-navigation::backdrop{background:#17201aa6;backdrop-filter:blur(16px)}
 .mobile-navigation>button{display:block;margin-left:auto;width:44px;height:44px;border:1px solid #ffffff4d;border-radius:50%;font-size:24px}
 .mobile-navigation nav{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:8svh}
 .mobile-navigation nav button{font-size:clamp(30px,6vw,48px);font-weight:400;text-align:left;padding:18px 0;border-bottom:1px solid #ffffff26;background:none;color:inherit}
 main{height:100svh!important;min-height:560px!important;background:#f8f7f3!important;color:#282d27!important}
 main>aside,main>.side-nav,main .total,main footer{display:none!important}
 #stage{inset:80px 0 90px!important;touch-action:pan-y!important;perspective:none!important}
 #stack{transform:none!important;transition:none!important}
 #stage .card{display:none!important;width:92vw!important;height:auto!important;aspect-ratio:16/9!important;top:50%!important;left:50%!important;transform:var(--mobile-transform);transition:none!important;border:0!important;box-shadow:none!important;visibility:visible!important}
 #stage .card.active{display:block!important}
 #stage .card .work-image{object-fit:contain!important;width:100%;height:100%;image-rendering:auto}
 .mobile-hero-caption{display:flex!important;position:absolute;bottom:58px;left:5%;right:5%;justify-content:space-between;gap:20px;font-size:14px;line-height:1.6;color:#30372d}
 .mobile-hero-caption small{white-space:nowrap;font-size:12px;color:#70776b}
 .personal-introduction{height:100svh!important;min-height:640px!important;overflow:hidden!important;padding:90px 5% 24px!important}
 .personal-introduction .about-heading{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;text-align:left!important;z-index:3}
 .about-heading h2{font-size:clamp(28px,6vw,42px)!important;line-height:1.25!important;margin:12px 0!important}
 .about-heading>p{font-size:13px!important;line-height:1.8!important;max-width:48ch!important;margin:12px 0!important}
 .about-heading .about-eyebrow,.about-actions,.career-glass,.about-footer,.about-orbit{display:none!important}
 .personal-introduction .about-portrait{position:absolute!important;width:min(86vw,450px)!important;height:54%!important;left:50%!important;top:auto!important;bottom:0!important;transform:translateX(-50%)!important;pointer-events:none}
 .about-portrait video{display:none!important}.about-portrait .portrait-poster{display:block!important;opacity:1!important;object-fit:contain!important}
 .personal-introduction .resume-toggle{position:absolute!important;top:auto!important;bottom:24px!important;left:auto!important;right:5%!important;transform:none!important;z-index:5;padding:12px 20px!important;background:#ffffffd9!important;border:1px solid #c9d0c3!important;color:#30372d!important}
 .projects-screen.folder-projects{height:100svh!important;min-height:650px!important;padding:88px 5% 22px!important;overflow:hidden!important}
 .projects-heading>span,.projects-heading>p,.projects-heading h2 span:first-child,.projects-screen>.about-footer{display:none!important}
 .projects-heading h2{font-size:28px!important;margin:0 0 20px!important;text-align:left!important;line-height:1.2!important}
 .reference-folder-stage.reference-folder-grid.project-page-grid{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:20px 16px!important;margin:0!important;height:calc(100% - 70px)!important;align-content:center}
 .project-page-grid .page-stack-entry{aspect-ratio:auto!important;height:auto!important;min-height:0!important;transform:none!important;translate:none!important;perspective:none!important;display:flex!important;flex-direction:column;justify-content:center}
 .project-page-grid .project-stack-sheet{display:none!important}
 .project-page-grid .project-stack-sheet:first-child{display:block!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important}
 .project-stack-sheet img{object-fit:contain!important}
 .project-page-grid .reference-folder-label{position:relative!important;inset:auto!important;padding:10px 0!important}
 .reference-folder-label h3{font-size:14px!important;line-height:1.5!important}.reference-folder-label p{font-size:10px!important}
 .project-page-grid .kemi-play,.project-page-grid .folder-plus{display:none!important}
 #work-collection.perspective-archive{height:100svh!important;min-height:600px!important;overflow:hidden!important;padding:90px 0 32px!important}
 .perspective-archive .collection-heading{padding:0 5%!important;margin:0!important}
 .perspective-archive .collection-filters{gap:6px 20px!important}.perspective-archive .collection-filters button{font-size:12px!important;min-height:40px}
 .archive-viewport{height:calc(100% - 105px)!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y!important;scrollbar-width:none}
 .archive-scene{display:flex!important;align-items:center;gap:24px!important;width:max-content!important;height:100%!important;padding:0 5vw!important;transform:none!important}
 .archive-scene .archive-cover{flex:0 0 90vw!important;width:90vw!important;height:min(56svh,580px)!important;aspect-ratio:auto!important;scroll-snap-align:center;transform:none!important;visibility:visible!important}
 .archive-scene .archive-card-face{background:transparent!important;box-shadow:none!important;border:0!important;mask:none!important;overflow:visible!important;pointer-events:auto!important}
 .archive-card-face::before,.archive-card-face::after{display:none!important}
 .archive-cover .archive-card-face img{object-fit:contain!important;object-position:center!important;background:transparent!important;mask:none!important;opacity:1!important}
 .archive-cover .archive-card-face span{bottom:-38px!important;padding:8px 0!important;background:transparent!important;font-size:14px!important}
 .archive-detail-heading{padding-top:90px!important;padding-bottom:24px!important}.archive-detail-heading h1{font-size:28px!important}
 .archive-detail-pages img{object-fit:contain!important}.archive-detail-pages{gap:20px!important}
 .kemi-viewer-layout{overflow-y:auto!important}.kemi-copy-glass{overflow:visible!important;height:auto!important;min-height:0!important;padding:26px 22px!important}
 .kemi-project-copy{min-height:0!important;flex:0 0 auto!important}.kemi-copy-note{display:none!important}
 .resume-viewer-layout{display:block!important;overflow-y:auto!important;height:100%!important}.resume-viewer-rail{padding:30px 24px 12px!important}.resume-viewer-rail nav,.resume-viewer-rail>small,.resume-viewer-rail>p{display:none!important}.resume-viewer-rail h2{font-size:25px!important}.resume-viewer-scroll{overflow:visible!important;height:auto!important;padding:20px 24px!important}
 .experience-pill,.project-stack-sheet,.archive-card-face{animation:none!important;transition:none!important}
}
.mobile-menu-toggle,.mobile-hero-caption{display:none}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .about-heading,.projects-heading{opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important}
 .about-heading>* ,.projects-heading>*{opacity:1!important;visibility:visible!important;transform:none!important}
 .project-page-grid .project-page-stack{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;transform:none!important}
 .project-page-grid .project-stack-sheet:first-child{display:none!important}
 .project-page-grid .project-stack-sheet:last-child{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;aspect-ratio:4/3!important;border:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important}
 .project-stack-sheet::after,.sheet-image-extension,.reference-folder-play{display:none!important}
 .project-page-grid .reference-folder-label{max-width:100%!important;width:100%!important;bottom:auto!important;white-space:normal!important;transform:none!important}
 .reference-folder-label h3 span{white-space:normal!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .about-heading h2,.about-heading>p,.about-title-line,.projects-heading h2,.projects-heading h2 span{opacity:1!important;translate:none!important;clip-path:none!important;filter:none!important;animation:none!important;transition:none!important}
 .projects-heading{height:40px!important;inset:auto!important;text-align:left!important}.projects-heading h2{color:#eee9dd!important}
 .project-page-grid .page-stack-entry{display:block!important}
 .project-page-grid .reference-folder-label{margin-top:10px!important;position:static!important;display:block!important}
 .project-page-grid .project-page-stack{display:block!important;flex:none!important}
 .mobile-menu-toggle{pointer-events:auto!important;position:relative;z-index:3000}
}
.mobile-projects,.mobile-project-title{display:none}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .projects-screen .projects-heading,.projects-screen .reference-folder-stage{display:none!important}
 .mobile-project-title{display:block;font-size:28px;font-weight:400;margin:10px 0 28px}
 .mobile-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;align-content:center;height:calc(100% - 85px)}
 .mobile-projects button{padding:0;text-align:left;min-width:0}
 .mobile-projects strong{display:block;font-size:14px;font-weight:400;line-height:1.5;margin:12px 0 6px}
 .mobile-projects small{display:block;font-size:10px;line-height:1.5;color:#bfc5b8}
 .archive-cover .archive-card-face span{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;position:absolute!important;bottom:-38px!important;left:0!important;right:0!important}
 .collection-back,.project-cases{display:none!important}
 body:has(.mobile-navigation[open]){overflow:hidden!important}
}
/* Mobile selected works: vertical deck and a translucent half-height menu. */
.mobile-contact{display:none}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 body,body.intro-state{background:#282927!important}
 main{background:#282927!important;color:#eee9dd!important}
 body:not(.about-visible):not(.collection-visible) header .logo{color:#eee9dd!important}
 #stage{inset:74px 0 130px!important;overflow:hidden!important;touch-action:pan-x!important}
 #stage .card,#stage .card.active{display:block!important;transform:var(--mobile-transform);transition:transform .7s cubic-bezier(.22,.68,.22,1)!important;backface-visibility:hidden!important}
 #stage .card[data-mobile-visible=false]{display:none!important}
 #stage .card .work-image{object-fit:contain!important}
 .mobile-hero-caption{bottom:35px!important;align-items:center;color:#eee9dd!important;gap:15px;min-height:58px}
 .mobile-hero-caption h2{margin:0 0 7px;font-size:24px;font-weight:400;line-height:1.1}
 .mobile-hero-caption span{display:block;font-size:12px;line-height:1.5;max-width:58vw}
 .mobile-hero-caption small{font-size:clamp(30px,7.5vw,52px)!important;line-height:1;color:#eee9dd!important;font-weight:400;letter-spacing:-1.5px}
 .mobile-menu-toggle,.mobile-navigation>button{padding:9px!important;display:flex!important;flex-direction:column;justify-content:center;gap:5px;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:0!important;border-radius:0!important;background:transparent!important;color:inherit}
 .mobile-menu-toggle i,.mobile-menu-close i{display:block;width:24px;height:1px;background:currentColor;transition:transform .3s ease;transform-origin:center}
 body:not(.about-visible):not(.collection-visible) .mobile-menu-toggle{color:#eee9dd!important}
 .mobile-menu-toggle[aria-expanded=true] i:first-child,.mobile-menu-close i:first-child{transform:rotate(-35deg)}
 .mobile-navigation{inset:0 0 auto 0!important;height: min(60svh,560px)!important;min-height:410px;max-height:75svh!important;padding:15px 6% 24px!important;border-radius:0 0 28px 28px!important;background:linear-gradient(135deg,#63716c66,#18231e80)!important;backdrop-filter:blur(25px) saturate(120%)!important;box-shadow:0 20px 60px #0003}
 .mobile-navigation::backdrop{background:#10191114!important;backdrop-filter:none!important}
 .mobile-navigation>button{margin:0 0 0 auto!important;color:#f6f6ef}
 .mobile-navigation nav{padding-top:12px!important;gap:0!important}
 .mobile-navigation nav button{font-size:clamp(25px,6vw,36px)!important;padding:11px 0!important;line-height:1.3;border-bottom-color:#ffffff24!important}
 .mobile-contact{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:100svh;box-sizing:border-box;padding:96px 7% 35px;background:linear-gradient(145deg,#53625c,#17221c 80%);color:#f2f4ec;gap:25px;scroll-snap-align:start}
 .mobile-contact small{font-size:10px;letter-spacing:1.5px;color:#d0d8ca}
 .mobile-contact h2{font-size:clamp(28px,7vw,42px);line-height:1.3;font-weight:400;margin:18px 0}
 .mobile-contact a{font-size:15px;line-height:1.6}
 .mobile-contact figure{margin:0;align-self:center;text-align:center}
 .mobile-contact figure img{display:block;width:min(70vw,330px);height:auto;filter:grayscale(1) contrast(1.8) invert(1);border:10px solid #000;border-radius:9px;-webkit-touch-callout:default;user-select:auto}
 .mobile-contact figcaption{font-size:12px;color:#d0d8ca;margin-top:16px}
 .mobile-contact-phone{width:100%;padding-top:20px;border-top:1px solid #ffffff30;display:flex;justify-content:space-between;align-items:center;gap:10px}
 .mobile-contact-phone span{font-size:11px;color:#c3cdbd}
 body:has(#mobile-contact:hover) header .logo{color:#eee9dd}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (prefers-reduced-motion:reduce){#stage .card{transition:none!important}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .mobile-hero-caption small{font-size:clamp(40px,11.5vw,58px)!important;line-height:1.08!important}
 .mobile-hero-caption h2{font-size:24px!important}
 .mobile-navigation{height:54svh!important}
 .mobile-contact a{font-style:normal!important}
}
/* Restore the original compact seven-card mobile stack; keep the revised UI. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){#stage .card,#stage .card.active{width:78vw!important;height:calc(78vw * 9 / 16)!important;aspect-ratio:16/9!important}}
/* Recorded reference: flat cards advance from a tapered rear stack; front exits down. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #stage .card,#stage .card.active{border-radius:7px!important;overflow:hidden!important;opacity:var(--mobile-opacity,1)!important;transition:transform .85s cubic-bezier(.22,.7,.22,1),opacity .65s ease!important;will-change:transform,opacity;box-shadow:0 7px 22px #00000014!important}
 #stage .card .work-image{object-fit:cover!important;object-position:center!important}
 #stage{overflow:hidden!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (prefers-reduced-motion:reduce){#stage .card{transition:none!important}}
/* Enlarge the complete deck proportionally while retaining its layer rhythm. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){#stage .card,#stage .card.active{width:92vw!important;height:calc(92vw * 9 / 16)!important}}
/* Reference cadence: restrained launch, quick advance, long soft settling. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #stage .card,#stage .card.active{transition:transform 1.15s cubic-bezier(.76,0,.24,1),opacity .9s cubic-bezier(.76,0,.24,1)!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (prefers-reduced-motion:reduce){#stage .card{transition:none!important}}
/* Light mobile system: paper, neutral ink and translucent white glass. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 body,body.intro-state,main{background:#f8f7f3!important;color:#282d27!important}
 body header .logo,body:not(.about-visible):not(.collection-visible) header .logo{color:#282d27!important}
 .mobile-menu-toggle,body:not(.about-visible):not(.collection-visible) .mobile-menu-toggle{color:#282d27!important}
 .mobile-hero-caption,.mobile-hero-caption small{color:#282d27!important}
 .mobile-hero-caption span{color:#70776b!important}
 .mobile-navigation{background:linear-gradient(135deg,#ffffff9c,#edf0e6b3)!important;color:#282d27!important;box-shadow:0 20px 60px #29372916!important}
 .mobile-navigation>button{color:#282d27!important}.mobile-navigation nav button{border-bottom-color:#282d2724!important}
 .mobile-navigation::backdrop{background:#edf0e512!important}
 .projects-screen.folder-projects{background:#f8f7f3!important;color:#282d27!important}
 .mobile-projects small{color:#70776b!important}
 .mobile-contact{background:linear-gradient(145deg,#eef1e9,#f8f7f3 80%)!important;color:#282d27!important}
 .mobile-contact small,.mobile-contact figcaption,.mobile-contact-phone span{color:#70776b!important}
 .mobile-contact-phone{border-top-color:#282d2724!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 body,body.intro-state,main{background:#fff!important}
 #stage.mobile-deck-opening .card{transition:transform 1.25s cubic-bezier(.22,.68,.22,1),opacity 1s ease!important}
 .mobile-navigation{height:60svh!important;min-height:470px;max-height:80svh!important;padding:18px 6% 28px!important}
 .mobile-navigation nav{padding-top:22px!important}
 .mobile-navigation nav button{font-weight:400!important;font-size:26px!important;line-height:1.4!important;padding:15px 0!important;letter-spacing:.3px}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (max-height:740px){.mobile-navigation{min-height:0;height:72svh!important}.mobile-navigation nav{padding-top:10px!important}.mobile-navigation nav button{font-size:23px!important;padding:12px 0!important}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (prefers-reduced-motion:reduce){#stage.mobile-deck-opening .card{transition:none!important}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #stage.mobile-deck-initializing .card{transition:none!important;box-shadow:none!important}
 #stage .card{transform-origin:center center!important}
}
/* Cards run behind soft iOS-like foreground chrome at both screen edges. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #stage{inset:0!important}
 header{z-index:2200!important;isolation:isolate}
 header::after{content:'';position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;background:linear-gradient(#ffffffed 0%,#ffffffb8 65%,#ffffff00);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);mask-image:linear-gradient(#000 0%,#000 62%,transparent);-webkit-mask-image:linear-gradient(#000 0%,#000 62%,transparent)}
 .mobile-hero-caption{bottom:0!important;left:0!important;right:0!important;padding:35px 5% 30px!important;min-height:130px;z-index:200;isolation:isolate;pointer-events:none}
 .mobile-hero-caption::before{content:'';position:absolute;inset:-25px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(#ffffff00,#ffffffc9 36%,#fffffff5 80%);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);mask-image:linear-gradient(transparent,#000 32%);-webkit-mask-image:linear-gradient(transparent,#000 32%)}
 .mobile-navigation{height:auto!important;min-height:0!important;max-height:82svh!important;padding:14px 6% 22px!important;background:linear-gradient(135deg,#52635d94,#14231dbd)!important;color:#f2f4ee!important;backdrop-filter:blur(28px) saturate(120%)!important;-webkit-backdrop-filter:blur(28px) saturate(120%)!important}
 .mobile-navigation nav{padding-top:8px!important;padding-bottom:0!important}
 .mobile-navigation nav button{font-size:22px!important;font-weight:400!important;line-height:1.4!important;padding:13px 0!important;letter-spacing:.2px;border-bottom-color:#ffffff28!important}
 .mobile-navigation>button{color:#f2f4ee!important}
 .mobile-navigation::backdrop{background:#12201a0d!important}
}
/* Longer, softer foreground falloff and breathing room beneath the open menu. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 header::after{inset:0 0 -155px!important;background:linear-gradient(to bottom,#ffffffb8 0%,#ffffff8c 23%,#ffffff47 53%,#ffffff12 78%,transparent 100%)!important;backdrop-filter:blur(24px) saturate(125%)!important;-webkit-backdrop-filter:blur(24px) saturate(125%)!important;mask-image:linear-gradient(#000 0%,#000d 28%,#0008 56%,#0003 80%,transparent 100%)!important;-webkit-mask-image:linear-gradient(#000 0%,#000d 28%,#0008 56%,#0003 80%,transparent 100%)!important}
 .mobile-hero-caption::before{inset:-165px 0 0!important;background:linear-gradient(to top,#ffffffd9 0%,#ffffffa1 25%,#ffffff52 52%,#ffffff14 78%,transparent 100%)!important;backdrop-filter:blur(24px) saturate(125%)!important;-webkit-backdrop-filter:blur(24px) saturate(125%)!important;mask-image:linear-gradient(to top,#000 0%,#000e 25%,#0008 55%,#0003 80%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to top,#000 0%,#000e 25%,#0008 55%,#0003 80%,transparent 100%)!important}
 #stack{translate:0 0;scale:1;transition:translate .65s cubic-bezier(.22,.7,.22,1),scale .65s cubic-bezier(.22,.7,.22,1)!important}
 body:has(.mobile-navigation[open]) main #stack{translate:0 100px;scale:.88}
 .mobile-navigation{padding-bottom:27px!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (prefers-reduced-motion:reduce){#stack{transition:none!important}}
/* Clean white chrome: suppress artwork color bleed while keeping a soft glass edge. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 header::after{inset:0 0 -125px!important;background:linear-gradient(to bottom,#fff 0%,#fffffff5 24%,#ffffffd9 48%,#ffffff80 70%,#ffffff22 88%,transparent 100%)!important;backdrop-filter:blur(30px) saturate(75%)!important;-webkit-backdrop-filter:blur(30px) saturate(75%)!important;mask-image:linear-gradient(#000 0%,#000 35%,#000d 60%,#0006 82%,transparent 100%)!important;-webkit-mask-image:linear-gradient(#000 0%,#000 35%,#000d 60%,#0006 82%,transparent 100%)!important}
 .mobile-hero-caption::before{inset:-140px 0 0!important;background:linear-gradient(to top,#fff 0%,#fff 35%,#fffffff0 53%,#ffffffb8 70%,#ffffff52 86%,transparent 100%)!important;backdrop-filter:blur(30px) saturate(75%)!important;-webkit-backdrop-filter:blur(30px) saturate(75%)!important;mask-image:linear-gradient(to top,#000 0%,#000 44%,#000d 65%,#0006 83%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 44%,#000d 65%,#0006 83%,transparent 100%)!important}
 .mobile-navigation{padding-bottom:70px!important;max-height:85svh!important}
 body:has(.mobile-navigation[open]) main #stack{translate:0 135px;scale:.88}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (max-height:650px){.mobile-navigation{padding-bottom:42px!important}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .mobile-hero-caption{padding-top:26px!important;padding-bottom:max(26px,env(safe-area-inset-bottom))!important}
 .mobile-hero-caption h2{font-size:clamp(18px,4.8vw,24px)!important;line-height:1.4!important;font-weight:400;max-width:60vw;margin:0 0 5px!important}
 .mobile-hero-caption span{font-size:12px!important;color:#70776b!important}
 .mobile-contact{background:#fff!important;color:#282d27!important;min-height:100svh!important;height:auto!important;padding:clamp(145px,18svh,180px) 7% max(70px,9svh)!important;justify-content:center!important;align-items:center!important;gap:30px!important}
 .mobile-contact-heading{width:100%;text-align:center}
 .mobile-contact-heading>small{font-size:12px!important;letter-spacing:.5px!important;color:#70776b!important}
 .mobile-contact-heading h2{font-size:27px!important;font-weight:400!important;line-height:1.35!important;margin:10px 0 24px!important}
 .mobile-contact .mobile-contact-primary{display:block;font-size:clamp(30px,8.2vw,40px)!important;font-weight:400;line-height:1.2!important;letter-spacing:-.8px;color:#282d27!important}
 .mobile-contact-heading p{font-size:12px;color:#70776b;margin:9px 0 0}
 .mobile-contact figure{margin:0!important}
 .mobile-contact figure img{width:min(72vw,330px)!important}
 .mobile-contact figcaption{font-size:12px!important;line-height:1.6;margin-top:14px!important}
 .mobile-contact-email{font-size:14px!important;text-align:center;color:#70776b!important}
 body:has(#mobile-contact:hover) header .logo{color:#282d27!important}
}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) and (max-height:740px){.mobile-contact{padding-top:125px!important;padding-bottom:55px!important;gap:22px!important}.mobile-contact-heading h2{margin-bottom:18px!important}.mobile-contact figure img{width:min(62vw,280px)!important}}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 #stage{touch-action:pan-y!important}
 #stage .card{touch-action:none!important;-webkit-user-select:none;user-select:none}
 #stage.mobile-deck-dragging .card{transition:none!important}
}
/* Dark comparison theme for mobile; artwork and QR remain unchanged. */
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 body,body.intro-state,main,.projects-screen.folder-projects,#work-collection.perspective-archive,.personal-introduction,.mobile-contact{background:#252724!important;color:#f1f2eb!important}
 body header .logo,body:not(.about-visible):not(.collection-visible) header .logo,body:has(#mobile-contact:hover) header .logo,.mobile-menu-toggle,body:not(.about-visible):not(.collection-visible) .mobile-menu-toggle{color:#f1f2eb!important}
 .mobile-hero-caption,.mobile-hero-caption small,.mobile-project-title,.about-heading h2,.about-heading h2 span,.mobile-contact .mobile-contact-primary,.mobile-contact h2,.archive-cover .archive-card-face span{color:#f1f2eb!important}
 .mobile-hero-caption span,.about-heading>p,.mobile-projects small,.mobile-contact small,.mobile-contact-heading p,.mobile-contact figcaption,.mobile-contact-email{color:#b8c0b0!important}
 header::after{background:linear-gradient(to bottom,#252724 0%,#252724f5 24%,#252724d9 48%,#25272480 70%,#25272422 88%,transparent)!important}
 .mobile-hero-caption::before{background:linear-gradient(to top,#252724 0%,#252724 35%,#252724f0 53%,#252724b8 70%,#25272452 86%,transparent)!important}
 .perspective-archive .collection-filters button{color:#aeb8a6!important}.perspective-archive .collection-filters button[aria-pressed=true]{color:#f1f2eb!important}
 .personal-introduction .resume-toggle{background:#ffffff12!important;border-color:#ffffff30!important;color:#f1f2eb!important}
 .mobile-contact figure img{filter:grayscale(1) contrast(1.8) invert(1)!important}
}
.mobile-next-screen{display:none}
@media((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))){
 .mobile-next-screen{display:flex;align-items:center;justify-content:center;position:absolute;z-index:230;bottom:max(7px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:92px;height:44px;padding:8px;color:#f1f2eb;touch-action:manipulation}
 .mobile-next-screen svg{width:72px;height:24px;overflow:visible}.mobile-next-screen path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
 .mobile-hero-caption{padding-bottom:max(58px,env(safe-area-inset-bottom))!important}
}

@media ((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) {#stage .card{width:min(92vw,108svh)!important}.mobile-hero-caption h2{font-size:clamp(16px,4.2vw,24px)!important;line-height:1.22!important}}

@media ((max-width: 767px) or ((orientation: portrait) and (max-width: 1400px))) {
 #stage #stack {inset-inline:5%;touch-action:none}
}