/* Phone layouts share the original palette and keep the desktop presentation. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{scroll-padding-top:80px}
.huy-mobile-gallery{display:none}
.huy-mobile-gallery[hidden]{display:none!important}
#mobile-menu-toggle{min-width:44px;min-height:44px}
#mobile-menu a{min-height:44px;display:flex;align-items:center;justify-content:center}
#mobile-menu.hidden{display:none}
#navbar{padding-top:var(--safe-top)}
.detail-view{height:100vh;height:100dvh;overscroll-behavior:contain}
button,a,input,textarea,select{touch-action:manipulation}

@media(max-width:767px),(pointer:coarse) and (max-width:1023px){
 html{scroll-padding-top:calc(76px + var(--safe-top))}
 body{overflow-x:clip}
 #navbar>div:first-child{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
 #mobile-menu{max-height:calc(100svh - 70px - var(--safe-top));overflow-y:auto;padding-bottom:calc(16px + var(--safe-bottom))}
 #mobile-menu a{font-size:16px}
 #main-portfolio #home{min-height:100svh;padding-top:calc(94px + var(--safe-top));padding-bottom:72px}
 #home>div{gap:24px}
 #home .order-1>div{width:clamp(144px,40vw,190px);height:clamp(144px,40vw,190px)}
 #home .order-2>div:first-child{font-size:10px;line-height:1.5;letter-spacing:.09em}
 #main-portfolio #home .portfolio-role{font-size:clamp(23px,6vw,28px);margin-bottom:16px}
 #home .order-2>p{font-size:16px;line-height:1.65;margin-bottom:24px}
 #home .btn-primary{min-height:48px;display:flex;align-items:center;justify-content:center}
 #home>a[href="#about"]{bottom:20px;min-width:44px;min-height:44px;display:grid;place-items:center;animation:none}
 #main-portfolio section.py-24{padding-block:64px}
 #main-portfolio section h2{font-size:28px;line-height:1.2;margin-bottom:32px}
 #about .glass-panel{padding:24px}
 #about .space-y-6{font-size:16px;line-height:1.75}
 #skills button{padding:24px;transform:none}
 #skills .tracking-\[0\.3em\]{letter-spacing:.12em}
 #skills h3{font-size:24px;line-height:1.25}
 #experience>div>p{font-size:16px;line-height:1.65;margin-bottom:30px}
 .glass-panel{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
 #education::before,#education::after{display:none}
 #home .animate-float,#home .animate-pulse-slow{animation:none}
 #portfolio-entrance-cover>span{animation:mobile-intro-in .55s ease both}
 #portfolio-entrance-skip{bottom:calc(18px + var(--safe-bottom));right:20px;font-size:12px;min-height:44px;padding:12px 0}
 .huy-project-showcase{height:auto;min-height:0;overflow:visible}
 #huy-project-gallery,.huy-project-meta,.huy-project-information,.huy-project-count,.huy-gallery-fallback{display:none!important}
 .huy-mobile-gallery{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:2px 2px 18px;scrollbar-width:thin;scrollbar-color:#8d7636 transparent}
 .huy-mobile-card{flex:0 0 calc(100% - 22px);scroll-snap-align:start;scroll-snap-stop:always;min-width:0;border:0;border-radius:20px;overflow:hidden;background:transparent}
 .huy-mobile-card button{display:block;width:100%;padding:0;border:0;background:transparent;color:#eee;text-align:left;cursor:pointer}
 .huy-mobile-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#111}
 .huy-mobile-card-copy{display:block;padding:22px}
 .huy-mobile-card small{display:block;font:12px/1.5 Inter,Arial,sans-serif;color:#b7a36b;margin-bottom:9px}
 .huy-mobile-card strong{display:block;font:600 24px/1.12 Inter,Arial,sans-serif;letter-spacing:-.03em;margin-bottom:12px}
 .huy-mobile-card-summary{display:block;color:#b8b8b8;font:14px/1.65 Inter,Arial,sans-serif}
 .huy-mobile-card-cta{display:flex;align-items:center;justify-content:space-between;color:#e0bf59;font:14px/1.5 Inter,Arial,sans-serif;min-height:44px;margin-top:14px;border-top:1px solid #ffffff12;padding-top:12px}
 .huy-gallery-bottom{position:static;display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:#b8b5a9}
 .huy-gallery-bottom>span{max-width:none}
 #huy-image-position{font-size:12px;color:#99958a;margin-top:6px}
 .huy-gallery-controls{gap:10px}
 .huy-gallery-controls button{width:44px;height:44px;font-size:20px}
 .huy-gallery-controls .huy-gallery-continue{display:none}
 #contact input,#contact textarea{font-size:16px;min-height:48px}
 #contact label{font-size:12px;letter-spacing:.1em}
 #contact form button{min-height:48px;font-size:16px}
 #contact a[href^="mailto:"]{overflow-wrap:anywhere}
 .detail-view{padding-bottom:var(--safe-bottom)}
 .detail-view button,.aria-selection button{min-height:44px;min-width:44px}
 .detail-view .a350-detail-shell,.detail-view .print-detail-shell{padding:0}
 .aria-navigation{top:calc(16px + var(--safe-top))}
 .aria-hero{height:170svh}
 .aria-liquid-veil,.aria-case-photo-surface::after{backdrop-filter:none;-webkit-backdrop-filter:none}
 .aria-liquid-veil::before,.aria-liquid-veil::after{display:none}
 .aria-hero-bottom{bottom:calc(28px + var(--safe-bottom))}
 .aria-ring-controls button,.aria-selection-arrows button{width:44px;height:44px}
 .aria-selection{height:100vh;height:100dvh}
 .aria-selection-shell{padding-top:calc(72px + var(--safe-top));padding-bottom:calc(24px + var(--safe-bottom))}
 .aria-selection-close{top:calc(10px + var(--safe-top))}
 .aria-selection-caption p,.aria-chapter>div>p:not(.aria-eyebrow){font-size:15px;line-height:1.7}
 .aria-selection-caption{overflow-wrap:anywhere}
 .aria-back,.aria-scroll-link{min-height:44px}
 .a350-assembly-label{font-size:10px;bottom:calc(16px + var(--safe-bottom))}
 .a350-nav-links{gap:12px;flex-wrap:wrap}
 .a350-lightbox{height:100dvh;padding-top:calc(60px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}
 .a350-lightbox-close{top:var(--safe-top)}
 .a350-reel-root::before,.a350-reel-root [data-reel-backdrop]{display:none}
 .a350-reel-pause{min-height:44px;min-width:44px;backdrop-filter:none;-webkit-backdrop-filter:none}
 .ls-tool-grid,.ls-chart-grid{min-width:0}
 .nav{padding-top:calc(16px + var(--safe-top))}
 .assembly-stage{touch-action:pan-y}
}
@media(max-width:380px){#main-portfolio #home{padding-top:82px}#home .order-1>div{width:136px;height:136px}#home>div{gap:18px}.huy-mobile-card-copy{padding:18px}.huy-mobile-card strong{font-size:22px}}
@media(max-height:500px) and (max-width:1023px){#main-portfolio #home{min-height:100svh}#home .order-1>div{width:128px;height:128px}.aria-hero-bottom>p{font-size:17px}.aria-hero-bottom{gap:12px}.aria-selection-shell{justify-content:flex-start}.aria-selection-visual{height:55svh;min-height:150px}}
@keyframes mobile-intro-in{from{opacity:0;transform:translateY(8px) rotate(-8deg)}to{opacity:1;transform:translateY(0) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){html,.huy-mobile-gallery{scroll-behavior:auto}#portfolio-entrance-cover>span{animation:none}}