/* Project pages use the homepage ribbon, player, and contact rail. */
.portfolio-header.case-toolbar{position:sticky;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;width:100%;max-width:none;margin:0;height:calc(var(--portfolio-header-height) + env(safe-area-inset-top));min-height:var(--portfolio-header-height);pointer-events:auto;isolation:isolate;}
.case-toolbar:before{display:none;}
.case-header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.case-music-slot{min-width:0;}
.case-toolbar .case-pager{grid-column:2;display:flex;align-items:center;justify-content:center;gap:4px;margin:0;justify-self:center;}
.case-toolbar .case-profile-links{grid-column:3;justify-self:end;}
.case-toolbar .case-back,.case-toolbar .case-profile-links a{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:44px;height:44px;padding:0 12px;gap:7px;border:0;border-radius:8px;background:transparent;color:#f2e9f6;font:500 13px/1.1 Arial,sans-serif;letter-spacing:normal;box-shadow:none;white-space:nowrap;text-decoration:none;backdrop-filter:none;transition:background .18s ease,color .18s ease;}
.case-toolbar .case-back span[aria-hidden]{font-size:18px;font-weight:400;}
.case-toolbar .case-back:hover,.case-toolbar .case-profile-links a:hover{background:#d4a8ed1c;color:#fff;filter:none;animation:none;transform:none;}
.case-toolbar .case-back:hover span[aria-hidden]{transform:none;}
.case-toolbar .case-back:focus-visible,.case-toolbar .case-profile-links a:focus-visible{outline:2px solid #edc6ff;outline-offset:-3px;background:#d4a8ed29;}
.case-toolbar .case-pager .case-back:last-child{font-weight:700;}
.case-toolbar .header-music{gap:16px;}
.case-toolbar .header-music .music-play{min-width:128px;}
.case-toolbar .volume-control{gap:10px;}
.case-toolbar .volume-control input{width:100px;}
@media(max-width:1200px){
 .portfolio-header.case-toolbar{gap:8px;padding-inline:16px;}
 .case-header-left{gap:4px;}
 .case-toolbar .header-music{gap:8px;}
 .case-toolbar .volume-control{gap:6px;}
 .case-toolbar .volume-control input{width:64px;}
 .case-toolbar .case-back,.case-toolbar .case-profile-links a{padding-inline:9px;}
}
/* Silent mobile policy keeps contacts alone in the first row, with navigation
   below. Small desktop windows get the same non-overlapping two-row layout. */
@media(max-width:960px){
 .portfolio-header.case-toolbar{height:auto;min-height:96px;grid-template-columns:1fr auto 1fr;grid-template-rows:44px 44px;gap:0;padding:2px 12px;padding-top:calc(2px + env(safe-area-inset-top));}
 .case-toolbar .case-profile-links{grid-column:2/4;grid-row:1;}
 .case-toolbar .case-header-left{display:contents;}
 .case-toolbar .case-music-slot{grid-column:1;grid-row:1;}
 .case-toolbar .case-header-left>.case-back{grid-column:1;grid-row:2;justify-self:start;}
 .case-toolbar .case-pager{grid-column:2;grid-row:2;}
 .case-toolbar .volume-control{display:none;}
}
.mobile-portfolio .portfolio-header.case-toolbar{height:auto;min-height:96px;grid-template-columns:1fr auto 1fr;grid-template-rows:44px 44px;gap:0;padding:2px 12px;padding-top:calc(2px + env(safe-area-inset-top));background:linear-gradient(100deg,#100c16f5,#131019f2 58%,#0b1316f5);}
.mobile-portfolio .case-toolbar .case-header-left{display:contents;}
.mobile-portfolio .case-toolbar .case-music-slot{display:none;}
.mobile-portfolio .case-toolbar .case-profile-links{grid-row:1;grid-column:1/-1;justify-self:center;}
.mobile-portfolio .case-toolbar .case-header-left>.case-back{grid-row:2;grid-column:1;justify-self:start;}
.mobile-portfolio .case-toolbar .case-pager{grid-row:2;grid-column:2;}
.mobile-portfolio .case-toolbar .case-back{min-width:0;padding-inline:8px;}
@media(prefers-reduced-motion:reduce){.case-toolbar .case-back,.case-toolbar .case-profile-links a{transition:none;}}
/* Keep Back clear of the centered pager even when a narrow dialog reserves
   its own scrollbar. The existing aria-label keeps the arrow unambiguous. */
@media(max-width:380px){
 .case-toolbar .case-header-left>.case-back,
 .mobile-portfolio .case-toolbar .case-header-left>.case-back{width:44px;min-width:44px;padding:0;gap:0;}
 .case-toolbar .case-header-left>.case-back span:not([aria-hidden]){display:none;}
}