/* Navigation adapted from Peter's supplied navbar. No scroll spy or scroll morphing. */
.portfolio-navigation{--nav-fg:#fff;color:var(--nav-fg);font-family:inherit;position:relative;z-index:100}
.portfolio-navigation *{box-sizing:border-box}
.portfolio-navigation a{text-decoration:none;color:inherit}
.island{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #ffffff20;border-radius:20px;background:rgba(32,32,32,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 36px #0002;width:max-content;max-width:calc(100% - 32px)}
.island-logo{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex-shrink:0;border-radius:14px;border:1px solid #ffffff0d;background:#ffffff06;font-size:24px;font-weight:500;letter-spacing:-2px}
.island-tabs{display:flex;align-items:center;gap:6px;padding:6px;border-radius:14px;background:#ffffff0e;border:1px solid #ffffff0d}
.chip{position:relative;display:flex;align-items:center;justify-content:center;white-space:nowrap;height:44px;padding:0 19px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:500;transition:background .25s}
.chip:hover{background:#ffffff14}.chip[aria-current=page]{border-color:#ffffffcc}.chip.chip-cta{background:#fff;color:#202020;font-weight:600}.chip.chip-cta:hover{background:#e5e9f0}
.menu-trigger{display:none;position:relative;width:48px;height:48px;border:1px solid #ffffff4d;border-radius:14px;background:transparent;cursor:pointer;color:#fff;flex-shrink:0}
.qd{position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-1.5px;background:#fff;border-radius:50%;transition:transform .45s cubic-bezier(.33,1,.68,1)}
.menu-trigger.open{background:rgba(8,8,8,.95);border-color:transparent}
.mobile-panel{display:none;position:fixed;left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:99;flex-direction:column;gap:6px;padding:8px;border-radius:20px;background:rgba(32,32,32,.94);border:1px solid #ffffff20;backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s,visibility .3s}
.mobile-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.m-item{display:flex;align-items:center;min-height:56px;padding:0 20px;border-radius:14px;border:1px solid transparent;background:#ffffff0f;font-size:16px;opacity:0;transform:translateY(14px);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.mobile-panel.open .m-item{opacity:1;transform:none}.mobile-panel.open .m-item:nth-child(2){transition-delay:.06s}.mobile-panel.open .m-item:nth-child(3){transition-delay:.12s}.mobile-panel.open .m-item:nth-child(4){transition-delay:.18s}.mobile-panel.open .m-item:nth-child(5){transition-delay:.24s}.m-item[aria-current=page]{border-color:#ffffffb3}.m-item.m-cta{background:white;color:#111;font-weight:600}
.portfolio-navigation :focus-visible{outline:3px solid #94caff;outline-offset:3px}
body{padding-bottom:110px}.page-navigation{position:relative;width:min(800px,calc(100% - 48px));margin:20px auto;color:#687180;font-size:13px}.page-navigation summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}.page-navigation nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 0}.page-navigation nav a{color:inherit;text-decoration:none}.page-navigation nav a:hover{color:#202020}.page-navigation .section-dot{display:none}.page-nav-chevron{margin-left:auto}.page-nav-dots{display:flex;gap:3px}.page-nav-dots i{width:3px;height:3px;border-radius:50%;background:currentColor}
@media(max-width:760px){.island{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;max-width:none;transform:none;justify-content:space-between}.island-tabs{display:none}.island-logo{width:48px;height:48px;font-size:24px}.menu-trigger{display:block}.mobile-panel{display:flex}body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.portfolio-navigation *{transition:none!important}}
.qd.tl-o{transform:translate(-9px,-9px)}.menu-trigger.open .qd.tl-o{transform:translate(-10px,-10px)}
.qd.tl-h{transform:translate(-9px,-5px)}.menu-trigger.open .qd.tl-h{transform:translate(-7.5px,-7.5px)}
.qd.tl-v{transform:translate(-5px,-9px)}.menu-trigger.open .qd.tl-v{transform:translate(-2px,-2px)}
.qd.tl-i{transform:translate(-5px,-5px)}.menu-trigger.open .qd.tl-i{transform:translate(-5px,-5px)}
.qd.tr-o{transform:translate(9px,-9px)}.menu-trigger.open .qd.tr-o{transform:translate(10px,-10px)}
.qd.tr-h{transform:translate(9px,-5px)}.menu-trigger.open .qd.tr-h{transform:translate(7.5px,-7.5px)}
.qd.tr-v{transform:translate(5px,-9px)}.menu-trigger.open .qd.tr-v{transform:translate(2px,-2px)}
.qd.tr-i{transform:translate(5px,-5px)}.menu-trigger.open .qd.tr-i{transform:translate(5px,-5px)}
.qd.bl-o{transform:translate(-9px,9px)}.menu-trigger.open .qd.bl-o{transform:translate(-10px,10px)}
.qd.bl-h{transform:translate(-9px,5px)}.menu-trigger.open .qd.bl-h{transform:translate(-7.5px,7.5px)}
.qd.bl-v{transform:translate(-5px,9px)}.menu-trigger.open .qd.bl-v{transform:translate(-2px,2px)}
.qd.bl-i{transform:translate(-5px,5px)}.menu-trigger.open .qd.bl-i{transform:translate(-5px,5px)}
.qd.br-o{transform:translate(9px,9px)}.menu-trigger.open .qd.br-o{transform:translate(10px,10px)}
.qd.br-h{transform:translate(9px,5px)}.menu-trigger.open .qd.br-h{transform:translate(7.5px,7.5px)}
.qd.br-v{transform:translate(5px,9px)}.menu-trigger.open .qd.br-v{transform:translate(2px,2px)}
.qd.br-i{transform:translate(5px,5px)}.menu-trigger.open .qd.br-i{transform:translate(5px,5px)}
/* Light glass navigation, with desktop and thumb-reachable mobile placement. */
.portfolio-navigation{--nav-fg:#202020}
.portfolio-navigation .island{top:16px;bottom:auto;width:min(832px,calc(100% - 32px));max-width:none;justify-content:space-between;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 32px #2020200b;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);transition:width .38s cubic-bezier(.22,1,.36,1),top .38s,box-shadow .3s}
body.nav-compact .portfolio-navigation .island{top:12px;width:min(760px,calc(100% - 48px));box-shadow:0 12px 32px #20202012}
.portfolio-navigation .island-logo{background:transparent;border-color:transparent;letter-spacing:normal;color:#202020}
.portfolio-navigation .island-tabs{background:transparent;border-color:transparent}
.portfolio-navigation .chip{color:#3a3a3a;border-color:transparent}
.portfolio-navigation .chip:hover{background:#20202008}
.portfolio-navigation .chip[aria-current=page]{border-color:transparent;background:#2020200a;color:#202020}
.portfolio-navigation .chip.chip-cta{background:#202020;color:#fff}
.portfolio-navigation .chip.chip-cta:hover{background:#373737}
.portfolio-navigation a,.portfolio-navigation a:hover,.portfolio-navigation a:focus,.portfolio-navigation a[aria-current]{text-decoration:none!important;background-image:none!important;box-shadow:none!important;border-bottom-color:transparent!important}
.portfolio-navigation a::after,.portfolio-navigation a::before{content:none!important;display:none!important}
.portfolio-navigation .menu-trigger{border-color:#20202020;color:#202020}
.portfolio-navigation .menu-trigger.open{background:#20202008;border-color:transparent}
.portfolio-navigation .qd{background:#202020}
.portfolio-navigation .mobile-panel{background:rgba(255,255,255,.9);border:1px solid #ffffffc9;color:#202020;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:0 8px 32px #20202012;align-items:stretch;max-height:calc(100dvh - 128px);overflow-y:auto}
.portfolio-navigation .mobile-panel .m-item{display:flex;width:100%;flex:0 0 auto;justify-content:flex-start;align-self:stretch;min-height:56px;background:#20202005;color:#3a3a3a;border:0;margin:0}
.portfolio-navigation .mobile-panel .m-item[aria-current=page]{background:#2020200c;color:#202020}
.portfolio-navigation .mobile-panel .m-item:hover{background:#2020200d}
.portfolio-navigation .mobile-panel .m-cta{background:#202020;color:#fff;justify-content:center}
body{padding-top:112px;padding-bottom:0}
.page-navigation{position:fixed;z-index:90;top:102px;right:max(24px,calc((100vw - 800px)/2));width:220px;margin:0;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 5px 24px #2020200d;color:#585858;transition:opacity .22s,transform .22s,visibility .22s}
.page-navigation summary{min-height:24px}.page-navigation nav{flex-direction:column;gap:0;padding:8px 0 0}.page-navigation nav a{display:block;padding:10px 0}.page-navigation details[open]{max-height:calc(100dvh - 150px);overflow:auto}
body.toc-hidden .page-navigation{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}
@media(max-width:760px){body{padding-top:0;padding-bottom:0}body>footer{padding-bottom:calc(108px + env(safe-area-inset-bottom))}.portfolio-navigation .island,body.nav-compact .portfolio-navigation .island{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;right:16px;width:auto;max-width:none;transform:none}.portfolio-navigation .mobile-panel{left:16px;right:16px;width:auto;bottom:calc(92px + env(safe-area-inset-bottom));padding:8px;gap:6px}.page-navigation{top:12px;right:16px;width:205px}.page-navigation details[open]{max-height:calc(100dvh - 140px)}}
@media(prefers-reduced-motion:reduce){.portfolio-navigation .island,.page-navigation{transition:none!important}}

/* Dotted PS brand; edge-to-edge desktop header until scrolling. */
.island-logo svg{display:block;flex-shrink:0}
@media(min-width:761px){.portfolio-navigation .island{top:0;left:0;right:0;bottom:auto;transform:none;width:100%;max-width:none;border-radius:0;padding:12px 24px;border-width:0 0 1px;box-shadow:none;transition:width .38s cubic-bezier(.22,1,.36,1),top .38s,border-radius .38s,padding .38s,box-shadow .3s}body.nav-compact .portfolio-navigation .island{top:12px;left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100% - 48px));max-width:none;border-radius:20px;padding:8px;border-width:1px;box-shadow:0 12px 32px #20202012}}