/* Navigation shared by Home and About. */
:root{--feed-gap:24px;--nav-motion:0px}
.noise,.project-noise,.contact-noise{display:none!important;animation:none!important}
header.site-topbar{display:contents;view-transition-name:none}
.site-brand{position:fixed;left:30px;top:28px;z-index:26;width:112px;height:44px;display:flex;align-items:center;mix-blend-mode:difference;pointer-events:auto;view-transition-name:persistent-brand}
.site-brand img{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}
.site-topbar>.nav-info{display:none}
.site-bottombar{position:fixed;z-index:26;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 20px;border-radius:999px;background:rgba(10,10,10,.82);box-shadow:7px 7px 10px #0008;pointer-events:auto}
.nav-icon{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:9px;border:1px solid #fff;border-radius:50%;color:#fff;background:transparent;text-decoration:none;opacity:1;line-height:1;cursor:pointer;transition:background .2s,opacity .2s;box-sizing:border-box}
.nav-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.nav-icon:focus-visible{outline:2px solid #bba0ff;outline-offset:4px}
.model-toggle[aria-pressed=false]{opacity:.5}
@media(hover:hover){.nav-icon:hover{background:#ffffff24}}
.about-mosaic{padding-top:130px;padding-bottom:140px}
.bio-tile{box-shadow:7px 7px 10px #0008}
html:not(.mobile-gallery) #gallery,.mobile-gallery #gallery{margin:0 var(--feed-gap)}
.mobile-gallery .gallery-item :is(img,video){transform:scaleY(min(var(--stretch,1),var(--max-stretch,1.16)));transform-origin:50% 100%;will-change:transform}
.mobile-gallery .gallery-item .project-caption{top:100%;bottom:auto;left:0;max-width:100%;width:100%;height:28px;padding:7px 2px 0;margin:0;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:var(--ink);font-size:11px;font-weight:400;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;translate:none;transition:none}
@media(min-width:1440px){.site-brand{width:170px;height:66px}.site-bottombar{gap:30px;padding:14px 22px}.nav-icon{width:48px;height:48px}.nav-icon svg{width:26px;height:26px}}
@media(max-width:999px){:root{--feed-gap:16px}}
/* Smartphone portrait: upper brand bar and smaller model anchored at its center. */
@media(max-width:700px) and (orientation:portrait){
 :root{--feed-gap:10px}
 header.site-topbar{position:fixed;inset:auto;left:10%;right:10%;top:calc(24px + env(safe-area-inset-top));height:58px;min-height:0;padding:9px 18px;z-index:25;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:rgba(10,10,10,.82);pointer-events:none;transform:translateY(var(--nav-motion));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
 .site-brand{position:static;width:86px;height:auto;mix-blend-mode:normal;view-transition-name:none}
 .site-topbar>.nav-info{display:flex;pointer-events:auto}
 .nav-icon{width:38px;height:38px;padding:7px}
 .nav-icon svg{width:22px;height:22px}
 .site-bottombar{width:80%;bottom:calc(24px + env(safe-area-inset-bottom));padding:9px 18px;gap:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
 .site-bottombar>.nav-info{display:none}
 #stage{display:block;inset:auto;left:50%;top:calc(-10px + env(safe-area-inset-top));width:112px;height:130px;z-index:27;transform:translate(-50%,var(--nav-motion));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
 #status{font-size:9px;text-align:center}
 html.nav-header-hidden{--nav-motion:-130px}
 .nav-scrolling .site-bottombar{transform:translateX(-50%) scale(.88)}
 .about-mosaic{padding-top:118px;padding-bottom:120px}
}
@media(max-height:500px) and (orientation:landscape){.site-bottombar{bottom:calc(12px + env(safe-area-inset-bottom));padding:8px 16px;gap:18px}.nav-icon{width:38px;height:38px;padding:7px}.site-brand{top:18px;width:100px}}
@media(prefers-reduced-motion:reduce){.site-topbar,.site-bottombar,#stage,.nav-icon{transition:none!important}.mobile-gallery .gallery-item :is(img,video){transform:none!important}}

/* Translucent glass fallback also works in Safari, without SVG backdrop refraction. */
.site-bottombar{background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1118;border:1px solid #ffffff50;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff90,inset 0 -1px 2px #ffffff30,7px 7px 10px #0006}
.site-bottombar.glass-refractive{backdrop-filter:var(--glass-filter) blur(2px) saturate(1.35)}
#stage[hidden]{display:none!important}
.about-page .model-toggle{display:flex}
@media(max-width:700px) and (orientation:portrait){
 header.site-topbar{background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1118;border:1px solid #ffffff50;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff90,inset 0 -1px 2px #ffffff30,7px 7px 10px #0006}
 header.site-topbar.glass-refractive{backdrop-filter:var(--glass-filter) blur(2px) saturate(1.35)}
}
/* Original vector artwork supplied by BOSKI; shared optical scale for every control. */
.nav-icon .nav-artwork{display:block;width:32px;height:32px;object-fit:contain;flex:none}
@media(min-width:1440px){.nav-icon .nav-artwork{width:36px;height:36px}}
@media(max-width:700px) and (orientation:portrait){.nav-icon .nav-artwork{width:22px;height:22px}}

/* Final navigation: social glyphs, text links and a visibly selected wand. */
.site-bottombar{gap:22px;padding:7px 12px}
.site-bottombar .nav-icon{border-color:transparent;width:48px;height:48px;padding:6px}
.site-bottombar .nav-info,.site-bottombar .contact-link{width:120px;height:40px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:#0009;font-size:16px;font-weight:500;letter-spacing:-.04em}
.nav-icon>span{position:relative;z-index:1;display:block;line-height:1;transform:none}
.contact-link{position:relative;isolation:isolate}
.contact-link::before,.contact-link::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--contact-angle),transparent 0deg,transparent 245deg,#8250df80 280deg,#bba0ff 310deg,#fff 330deg,transparent 355deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:contact-rim 4.5s linear infinite;z-index:0}
.contact-link::after{inset:-3px;padding:3px;filter:blur(4px);opacity:.6}
.model-toggle[aria-pressed=true]{background:#080808b8;box-shadow:inset 0 0 0 1px #ffffff12;opacity:1}
.model-toggle[aria-pressed=false]{background:transparent;opacity:.6}
.nav-icon,.nav-icon .nav-artwork{transition:transform .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease}
@media(hover:hover) and (pointer:fine){
 .nav-icon:hover{transform:translateY(-2px);background:#ffffff18;box-shadow:0 4px 12px #0002}
 .nav-icon:hover .nav-artwork{transform:scale(1.1)}
 .model-toggle:hover .nav-artwork{transform:rotate(-12deg) scale(1.1)}
 .nav-icon.contact-link:hover{background:#ffffff20;box-shadow:inset 0 0 0 1px #ffffff40,0 4px 12px #0002}
 .nav-icon:active{transform:translateY(0) scale(.96)}
}
@media(min-width:1440px){
 .site-bottombar{gap:28px;padding:8px 14px}
 .site-bottombar .nav-icon{width:56px;height:56px}
 .site-bottombar .nav-info,.site-bottombar .contact-link{width:132px;height:44px;font-size:18px}
}
@media(max-width:700px) and (orientation:portrait){
 header.site-topbar{padding:8px 16px;height:56px}
 .site-topbar .nav-info{width:92px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:-.04em;border:1px solid transparent;background:#0009}
 .site-bottombar{padding:5px 16px;gap:6px;min-height:56px}
 .site-bottombar .nav-icon{width:44px;height:44px;padding:6px;border:1px solid transparent;background:transparent}
 .site-bottombar .nav-artwork{width:32px;height:32px}
 .site-bottombar .contact-link{width:92px;height:36px;padding:0 14px;font-size:14px;background:#0009}
 .site-bottombar .model-toggle[aria-pressed=false]{background:#1119;opacity:1;border-color:transparent;box-shadow:none}
 .site-bottombar .model-toggle[aria-pressed=false] .nav-artwork{opacity:.6}
 .site-bottombar .model-toggle[aria-pressed=true]{background:#080808dd;opacity:1;box-shadow:inset 0 0 0 1px #ffffff20}
 .site-brand{width:86px}
}
@media(max-width:359px) and (orientation:portrait){
 header.site-topbar,.site-bottombar{left:6%;right:6%;width:auto}
 .site-bottombar{transform:none}
 .nav-scrolling .site-bottombar{transform:scale(.88)}
 .site-brand{width:76px}
 .site-topbar .nav-info{width:92px;padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){.nav-icon .nav-artwork{transition:none}.nav-icon:hover,.nav-icon:active,.nav-icon:hover .nav-artwork{transform:none}}
@media(prefers-reduced-motion:reduce){.contact-link::before,.contact-link::after{animation:none;--contact-angle:40deg}}

/* Project details share the navigation glass and keep the playing gallery visible. */
.gallery-item > :is(img,video).project-media{filter:grayscale(0);transition:filter .45s ease}
.project-open .gallery-item:not(.project-selected) > :is(img,video).project-media{filter:grayscale(1)}
.project-dialog{font-family:'Gotham Pro',Arial,sans-serif;background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#111b;border:1px solid #ffffff50;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff90,inset 0 -1px 2px #ffffff30,7px 7px 10px #0006;color:#fff}
.project-dialog::before,.project-dialog::after{display:none}
.project-dialog::backdrop{background:#00000012;backdrop-filter:none;-webkit-backdrop-filter:none}
.project-close{padding:0;background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1118;border:1px solid #ffffff50;box-shadow:inset 0 1px 1px #ffffff70,3px 3px 8px #0004;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:'Gotham Pro',Arial,sans-serif;line-height:1;transition:background .2s,transform .2s}
.project-close:focus-visible{outline:2px solid #bba0ff;outline-offset:3px}
.project-details h2{font-weight:700;margin:8px 0 24px;font-size:clamp(26px,3vw,36px);line-height:1.15}
.project-details p{font-weight:400;font-size:14px;line-height:1.65;margin:0}
.project-details .project-kicker{font-weight:500;font-size:11px;letter-spacing:.08em;margin-bottom:12px}
.project-kicker:empty{display:none}
.project-details h3{font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:28px 0 8px;opacity:.65}
.project-details #project-credits{font-weight:300;font-size:12px;white-space:pre-line;opacity:.85}
@media(hover:hover) and (pointer:fine){.project-close:hover{background:#ffffff24;transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.gallery-item,.project-close{transition:none}}
/* Local demo likes, always inside the media frame. */
.project-like{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;min-width:68px;min-height:40px;padding:8px 12px;border:1px solid #ffffff50;border-radius:999px;background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1119;color:#fff;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff70,3px 4px 12px #0004;font:500 12px/1 'Gotham Pro',Arial,sans-serif;cursor:pointer;transition:background .2s,scale .2s}
.project-like svg{width:19px;height:19px;flex:none;fill:transparent;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s,color .2s}
.project-like[aria-pressed=true] svg{color:#ff6685;fill:currentColor}
.project-like .like-count{font-variant-numeric:tabular-nums}
.project-like:focus-visible,.project-media:focus-visible{outline:2px solid #bba0ff;outline-offset:3px}
.project-like.like-pop svg{animation:like-heart .35s ease}
@keyframes like-heart{0%,100%{transform:scale(1)}45%{transform:scale(1.3)}70%{transform:scale(.92)}}
@media(hover:hover) and (pointer:fine){.project-like:hover{background:#27232be6;scale:1.04}.gallery-item .project-caption{max-width:calc(100% - 115px)}}
@media(max-width:700px){.project-like{right:8px;bottom:8px;padding:7px 10px;min-height:44px;min-width:64px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.project-like,.project-like svg{transition:none}.project-like.like-pop svg{animation:none}}
/* Keep the heart compact; briefly reveal the count after an interaction. */
.project-like{min-width:40px;gap:0;padding:10px}
.project-like .like-count{display:block;max-width:0;opacity:0;overflow:hidden;margin-left:0;transition:max-width .25s ease,opacity .25s ease,margin-left .25s ease}
.project-like.show-count .like-count{max-width:5ch;opacity:1;margin-left:7px}
.gallery-item .project-caption{border:1px solid #ffffff50;border-radius:999px;background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1119;color:#fff;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff70,3px 4px 12px #0004;font-family:'Gotham Pro',Arial,sans-serif;font-weight:500}
/* On phones captions keep their reserved row beneath the media. */
.mobile-gallery .gallery-item .project-caption{top:100%;bottom:auto;left:0;width:100%;max-width:100%;height:28px;padding:7px 2px 0;border:0;border-radius:0;background:none;color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;font-size:11px;font-weight:400;line-height:16px}
@media(max-width:700px){.project-like{min-width:44px;padding:10px}}
@media(prefers-reduced-motion:reduce){.project-like .like-count{transition:none}}
/* Shared navigation glass, and an aligned desktop caption/like row. */
.project-like,html:not(.mobile-gallery) .gallery-item .project-caption{background:linear-gradient(135deg,#ffffff22,#ffffff06 48%,#ffffff18),#1118;border:1px solid #ffffff50;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:inset 0 1px 1px #ffffff90,inset 0 -1px 2px #ffffff30,7px 7px 10px #0006}
html:not(.mobile-gallery) .gallery-item .project-caption{left:12px;bottom:12px;top:auto;height:44px;padding:0 14px;display:flex;align-items:center;line-height:1.2;margin:0;translate:none;max-width:calc(100% - 116px)}
html:not(.mobile-gallery) .project-like{right:12px;bottom:12px;height:44px;min-width:44px}
@media(hover:hover) and (pointer:fine){.project-like:hover{scale:1;background:linear-gradient(135deg,#ffffff30,#ffffff0c 48%,#ffffff20),#1118}}

main[data-site-page][hidden]{display:none!important}main[data-site-page]{outline:none}body:not(.about-page) .about-card-halo{display:none}

html.route-sliding,html.route-sliding body{overflow-x:clip}

/* Pointer taps do not draw keyboard rings or trigger desktop media enlargement. */
#gallery.pointer-interaction .project-media:focus,#gallery.pointer-interaction .project-like:focus{outline:none}
#gallery :is(.project-media,.project-like){-webkit-tap-highlight-color:transparent}
.project-dialog.pointer-open .project-close:focus{outline:none}
@media(hover:none),(pointer:coarse),(max-width:700px){
 #gallery .gallery-item > .project-media{scale:1!important}
 #gallery .gallery-item.project-selected > .project-media{transform:none!important}
}