/* Restored gooey navigation from before the submenu animation changes. */
/* Center the logo in a surface aligned with the navigation's outer edge. */
@media(min-width:801px){.navigation .brand img{left:calc(var(--nav-row)/2 - 39px)}}
@media(max-width:800px){.navigation .brand img{left:calc(var(--nav-row)/2 - 36px)}}
.navigation{--nav-jelly:linear(0,.275 10%,.6516 20%,.8851 30%,.9856 40%,1.0134 50%,1.0135 60%,1.0076 70%,1.003 80%,1.0007 90%,1)}
.nav-goo-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none;fill:#f0eee5}
.navigation.on-light .nav-goo-surface{fill:#202720}
.nav-goo-surface g{transition:fill .4s ease}
.nav-goo-left,.nav-goo-bridge{transform-box:fill-box;backface-visibility:hidden}
.nav-goo-left{transform-origin:left center;x:0;width:var(--goo-left-width);transition:x .46s cubic-bezier(.45,0,.2,1),width .46s cubic-bezier(.45,0,.2,1),fill-opacity .46s ease}
.nav-goo-bridge{transform:none;transition:none;fill:none;stroke:#f0eee5;stroke-width:6;stroke-linecap:round}
.navigation.on-light .nav-goo-bridge{stroke:#202720}
@media(max-width:800px){.navigation.menu-open .nav-goo-bridge{stroke:#f0eee5}}
.nav-goo-right{transform-box:fill-box;transform-origin:right center;x:var(--goo-right-x);width:var(--goo-right-width);transition:x .46s cubic-bezier(.45,0,.2,1),width .46s cubic-bezier(.45,0,.2,1)}
.navigation.nav-collapsed .nav-goo-left{x:var(--goo-left-closed-x);width:var(--goo-left-closed-width);fill-opacity:.1}
.navigation.nav-collapsed .nav-goo-bridge{transform:none;opacity:1}
.navigation.nav-collapsed .nav-goo-right{x:var(--goo-closed-x);width:var(--goo-closed-width)}
.navigation.nav-goo.jelly-opening::before,.navigation.nav-goo.jelly-closing::before{animation:none!important;scale:1}
.navigation.nav-goo,.navigation.nav-goo::before,.navigation.nav-goo .brand::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media(prefers-reduced-motion:no-preference){
 .navigation.jelly-closing .nav-goo-left,.navigation.jelly-closing .nav-goo-right{animation:nav-gel-impact .5s both}
 .navigation.jelly-opening .nav-goo-left,.navigation.jelly-opening .nav-goo-right{animation:nav-gel-arrive .62s both}
 @keyframes nav-gel-impact{0%,18%{scale:1 1}42%{scale:1.055 .948}61%{scale:.925 1.081}76%{scale:1.035 .966}89%{scale:.989 1.011}100%{scale:1 1}}
 @keyframes nav-gel-arrive{0%,35%{scale:1 1}58%{scale:1.07 .935}76%{scale:.96 1.042}90%{scale:1.018 .982}100%{scale:1 1}}
}
@media(prefers-reduced-motion:reduce){.nav-goo-left,.nav-goo-bridge,.nav-goo-right{transition:none;animation:none}}

/* One surface remains mounted throughout opening and closing. */
.navigation.nav-managed::before{display:none!important}
.navigation.nav-managed .services-menu,.navigation.nav-managed .contact-panel{animation:none!important;transition:none!important;transform:none!important;visibility:visible;opacity:1}
.navigation.nav-managed .services-menu[hidden],.navigation.nav-managed .contact-panel[hidden]{display:none!important}
.navigation.nav-managed [inert]{pointer-events:none}
.navigation.nav-goo-boot .nav-goo-left,.navigation.nav-goo-boot .nav-goo-right,.navigation.nav-goo-boot .nav-goo-bridge{transition:none!important;animation:none!important}
@media(min-width:801px){
.navigation.nav-managed .services-menu,.navigation.nav-managed .contact-panel{position:absolute;top:100%;left:0;right:0;pointer-events:auto;clip-path:inset(0 0 max(0px,calc(100% - var(--drawer-visible,0px))) 0)}
.navigation.nav-managed .services-menu:not([hidden]){display:grid}
.navigation.nav-managed .contact-panel:not([hidden]){display:grid}
}
@media(max-width:800px){
body.mobile-menu-closing::after{content:'';position:fixed;inset:-100px 0;min-height:calc(100dvh + 200px);background:#f8f7f2;z-index:19;pointer-events:none;animation:nav-overlay-out .16s ease both}
@keyframes nav-overlay-out{to{opacity:0}}
}

/* Blur only the animated navigation silhouette; text stays sharp. */
.nav-glass-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none;-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);clip-path:url(#nav-glass-clip)}
.navigation .nav-goo-surface{opacity:.84}
.navigation.on-light .nav-goo-surface{opacity:.88}
@media(max-width:800px){
body.mobile-menu-open::after,body.mobile-menu-closing::after{inset:0;min-height:100dvh;background:rgba(248,247,242,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

/* Keep the mobile brand to a single, vertically centered name. */
@media(max-width:800px){.navigation .nav-identity-line{display:none}}

/* Each island settles toward its own edge; the left glass silhouette keeps blurring. */
.navigation.nav-collapsed .brand{opacity:1;translate:0 0;visibility:visible;pointer-events:none}
.navigation.nav-collapsed .brand img{pointer-events:auto}
.navigation.nav-collapsed .brand>span{opacity:0;translate:-24px 0;visibility:hidden;transition:opacity .16s,translate .46s cubic-bezier(.45,0,.2,1),visibility 0s .18s}
.navigation.nav-collapsed .brand::before{content:none}

/* Three small studies, drawn in the same visual language as the portfolio. */
.navigation .services-menu a{--study-ink:#806b3f;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:128px auto auto;align-content:start;gap:7px 12px;padding:16px 20px 20px;overflow:hidden;border-radius:14px;background:linear-gradient(145deg,#fff7,#fff0);transition:background .25s,border-color .25s}
.navigation .services-menu .service-menu-art{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;height:128px;margin:0 0 8px;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at center,#b2934b12,transparent 70%);color:var(--study-ink)}
.navigation .service-menu-art svg{display:block;width:auto;height:116px;max-width:100%;overflow:visible}
.navigation .service-menu-art .portfolio-drawing-browser{width:170px;box-shadow:none;filter:none;border:1px solid #a18a5250;border-radius:6px;overflow:hidden;background:transparent}
.navigation .service-menu-art .portfolio-drawing-window{display:flex;align-items:center;height:17px;padding:0 7px;border-bottom:1px solid #a18a5230}
.navigation .service-menu-art .portfolio-drawing-window span{display:flex;gap:3px}
.navigation .service-menu-art .portfolio-drawing-window i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.navigation .service-menu-art .portfolio-drawing-window small{display:none}
.navigation .service-menu-art .portfolio-website-drawing{width:100%;height:auto}
.navigation .service-menu-art .portfolio-logo-drawing{height:128px}
.navigation .service-menu-art .portfolio-logo-drawing [stroke]{stroke:currentColor}
.navigation .services-menu .service-menu-title{grid-column:1;grid-row:2;align-self:center;font-size:15px}
.navigation .services-menu small{grid-column:1 / -1;grid-row:3;font-size:12px;line-height:1.6}
.navigation .services-menu a::after{grid-column:2;grid-row:2;align-self:center;width:20px;height:20px}
.navigation .services-menu .service-menu-photo{gap:16px}
.navigation .service-menu-photo img{width:86px;height:86px;object-fit:contain}
.navigation .service-menu-photo img.service-menu-milo-name{width:105px;height:auto;max-height:44px;object-fit:contain}
.navigation.on-light .services-menu a{--study-ink:#ddc58d;background:linear-gradient(145deg,#ffffff08,#ffffff02)}
.navigation.on-light .service-menu-milo-name{filter:brightness(0) invert(1);opacity:.85}
.navigation .services-menu a:hover{border-color:#b2995b90;background:#b2995b0c;transform:none;box-shadow:none}
@media(min-width:801px){
 .navigation .services-menu,.navigation .services-menu[hidden]{height:auto;min-height:264px;padding:22px 28px 28px;gap:16px}
}
@media(max-width:800px){
 .navigation.menu-open .services-menu a{grid-template-columns:90px minmax(0,1fr) 20px;grid-template-rows:auto auto;padding:12px;gap:4px 14px}
 .navigation .services-menu .service-menu-art{grid-column:1;grid-row:1 / 3;height:76px;margin:0}
 .navigation .service-menu-art svg,.navigation .service-menu-art .portfolio-logo-drawing{height:76px;max-width:90px}
 .navigation .services-menu .service-menu-title{grid-column:2;grid-row:1;align-self:end}
 .navigation .services-menu small{grid-column:2;grid-row:2}
 .navigation .services-menu a::after{grid-column:3;grid-row:1 / 3}
 .navigation .service-menu-photo img{width:64px;height:64px}
 .navigation .service-menu-photo img.service-menu-milo-name{display:none}
 .navigation.on-light.menu-open .services-menu a{--study-ink:#806b3f;background:#f5f2e9}
}

.navigation .service-menu-art svg :is(path,rect,circle,polygon){vector-effect:non-scaling-stroke}
.navigation .service-menu-art .portfolio-website-drawing g:first-child{stroke-width:.85}
.navigation .service-menu-art .portfolio-logo-drawing>path,.navigation .service-menu-art .portfolio-logo-drawing>polygon{stroke-width:1.1}
.navigation .service-menu-art .portfolio-logo-drawing g{stroke-width:.6}
.navigation .service-menu-photo .service-menu-milo-name{filter:brightness(0);opacity:.8}
.navigation.on-light .service-menu-photo .service-menu-milo-name{filter:brightness(0) invert(1)}
@media(max-width:800px){
 .navigation.menu-open .services-menu a{display:grid}
 .navigation.menu-open .services-menu small{display:block}
 .navigation .service-menu-art .portfolio-drawing-browser{width:90px;max-width:100%}
}
.navigation.menu-open .services-menu .portfolio-drawing-window small{display:none}
/* Mobile keeps a simple text menu and a readable, quiet header. */
@media(max-width:800px){
 .navigation.menu-open .services-menu{display:block;padding:16px 0 8px 15px;min-height:0;height:auto;background:none;border:0}
 .navigation.menu-open .services-menu a,.navigation.on-light.menu-open .services-menu a{display:block;height:auto;padding:9px 0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#202720;font:600 clamp(17px,4.7vw,24px)/1.45 Manrope,sans-serif;letter-spacing:-.025em;overflow:visible}
 .navigation.menu-open .services-menu .service-menu-art,.navigation.menu-open .services-menu small,.navigation.menu-open .services-menu a::after{display:none}
 .navigation.menu-open .services-menu .service-menu-title{font:inherit;color:inherit}
 .navigation.menu-open .nav-goo-surface{fill:#f0eee5;color:#f0eee5}
 .navigation.menu-open .brand,.navigation.menu-open .menu-toggle{color:#202720}
 .navigation.on-light:not(.menu-open) .brand,.navigation.on-light:not(.menu-open) .menu-toggle{color:#f0eee5}
 .navigation .menu-toggle,.navigation.menu-open .menu-toggle{border:0;background:transparent;box-shadow:none;border-radius:0;outline:none}
 .navigation .menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
}