/* The same persistent visual anchor on both sides of the portfolio. */
@view-transition { navigation: auto; }
.portfolio-header{position:sticky;top:0;z-index:50;height:72px;padding:0 clamp(16px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#181617;border-bottom:1px solid #ffffff12;color:#f3eee6;view-transition-name:portfolio-header;font-family:'DM Sans',sans-serif}
.portfolio-brand{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}
.portfolio-brand img{width:76px;height:44px;max-width:none;flex:none;object-fit:contain}
.portfolio-header nav{display:flex;align-items:center;gap:28px;font-size:14px}
.portfolio-header a{text-decoration:none;color:inherit}
.section-switch{display:flex;gap:28px;align-items:center}
.section-switch a{padding:12px 0;min-height:44px;display:flex;align-items:center;white-space:nowrap;color:#bcb4b7;border-bottom:2px solid transparent}
.section-switch a[aria-current="page"]{color:#fff4e9;border-bottom-color:#ff8d75}
.portfolio-header .talk-nav{color:#ff8d75;min-height:44px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.portfolio-header a:focus-visible{outline:2px solid #ff8d75;outline-offset:4px}
.portfolio-header a:hover{color:#fff}
html{scroll-padding-top:90px}
::view-transition-group(portfolio-header){z-index:10;animation:none}
::view-transition-old(portfolio-header){display:none}
::view-transition-new(portfolio-header){animation:none}
::view-transition-old(root){animation:420ms cubic-bezier(.22,.61,.36,1) both portfolio-out}
::view-transition-new(root){animation:420ms cubic-bezier(.22,.61,.36,1) both portfolio-in}
html[data-travel="back"]{--exit:100%;--enter:-100%}
html{--exit:-100%;--enter:100%}
@keyframes portfolio-out{to{transform:translateX(var(--exit))}}
@keyframes portfolio-in{from{transform:translateX(var(--enter))}}
@media(max-width:650px){.portfolio-header{height:68px;gap:8px;padding-inline:12px}.portfolio-brand{width:34px}.portfolio-brand img{width:64px;height:40px}.portfolio-header nav{gap:12px;font-size:12px}.section-switch{gap:16px}.section-switch a{padding:12px 0}.portfolio-header .about-nav{display:none}.portfolio-header .talk-nav{gap:4px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}