/* A compact shared navigation shell: equal breathing room on every edge. */
.portfolio>.masthead{min-height:0;padding:8px;gap:16px;align-items:center}
.portfolio .masthead nav>.nav-link,.portfolio .masthead nav>.contact-link{min-height:44px;padding:8px 12px}
.portfolio .masthead nav>.contact-link{width:44px;min-width:44px;padding:8px}
.portfolio .masthead .contact-envelope{width:20px;height:20px}
.portfolio .masthead .discipline{line-height:1.3}
html{scroll-padding-top:96px}
@media(max-width:1120px){
 .portfolio>.masthead{gap:8px 16px}
 html{scroll-padding-top:144px}
}
@media(max-width:760px){
 .portfolio>.masthead{padding:8px;gap:8px}
 .portfolio .masthead nav{grid-template-columns:minmax(0,1fr) auto 44px}
 .portfolio .masthead nav>#works-link{grid-column:auto;border-bottom:0}
 .portfolio .masthead nav>#about-link{border-left:1px solid var(--line)}
 .portfolio .masthead nav>.nav-link{padding:8px;font-size:18px}
 .portfolio .masthead .discipline,.portfolio .masthead .discipline>span{font-size:16px}
 html{scroll-padding-top:184px}
}

/* Opaque sticky section: cover both side gutters and the area above the
   controls, including the iOS status/safe area while browser chrome collapses.
   Overscan changes paint only; it does not enlarge the compact control row. */
.portfolio>.masthead{isolation:isolate;background:var(--black)}
.portfolio>.masthead::before{content:'';position:absolute;inset:-100vh calc((100% - 100vw)/2) 0;z-index:-1;background:var(--black);pointer-events:none}
.portfolio .masthead .identity-short{display:none}
.portfolio .masthead #works-link .index-label{font:inherit;margin:0;vertical-align:baseline}
@media(max-width:760px){
 .portfolio>.masthead{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:8px}
 .portfolio .masthead .wordmark{grid-column:1;grid-row:1;gap:8px;font-size:18px;letter-spacing:0}
 .portfolio .masthead .wordmark .glasses-mark{width:30px;height:16px;flex:none}
 .portfolio .masthead .identity-full,.portfolio .masthead #works-link .index-label{display:none}
 .portfolio .masthead .identity-short{display:inline}
 .portfolio .masthead .identity-check{margin-left:4px}
 .portfolio .masthead nav{grid-column:2;grid-row:1;justify-self:end;grid-template-columns:44px auto 44px;width:auto;gap:0}
 .portfolio .masthead nav>#works-link{grid-column:auto;border-bottom:0}
 .portfolio .masthead nav>.nav-link{padding:8px;font-size:18px;white-space:nowrap}
 .portfolio .masthead nav>#works-link svg{width:20px;height:20px}
 .portfolio .masthead .discipline{grid-column:1/-1;grid-row:2;width:auto;font-size:16px}
 html{scroll-padding-top:120px}
}

/* viewport-fit=cover makes the top inset explicit instead of allowing page
   content to scroll behind iOS status chrome. Keep the existing 8px spacing. */
.portfolio>.masthead{padding-top:calc(8px + env(safe-area-inset-top,0px))}