/* One stable framed viewer. Media never dictates the page height. */
.format-label:empty{display:none}
body:has(#portfolio-page:not([hidden])) .site-header{height:110px}
#portfolio-page .intro{padding:20px 0 22px}
#portfolio-page .intro-title{font-size:clamp(62px,6vw,88px);margin-top:12px;line-height:1.05}
#portfolio-page .path-line{margin-top:10px}
#portfolio-page .intro-description{font-size:18px;line-height:1.4;margin-top:12px}
.portfolio-layout{align-items:start}
.sidebar{padding-top:0}
.category-tabs{margin-top:14px}
.sidebar-caption{margin-top:20px;padding-top:20px}
.sidebar-caption p{font-size:26px}
.sidebar-caption span{font-size:15px;margin-top:12px}
#category-panel{height:var(--gallery-height,460px);display:grid;grid-template-rows:48px minmax(0,1fr) 68px;gap:8px;padding:16px}
.viewer-heading{min-height:0;gap:12px;align-items:center}
.viewer-name{min-width:0}
.viewer-heading h2{font-size:22px;line-height:1.15;margin-top:4px;overflow-wrap:anywhere}
.viewer-navigation{display:flex;align-items:center;gap:12px;flex-shrink:0}
.gallery-navigation{display:flex;align-items:center;gap:5px}
.gallery-arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--milk);padding:0}
.gallery-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gallery-arrow:disabled{opacity:.3;cursor:default;background:transparent;transform:none}
.work-position{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:42px;text-align:center;color:var(--muted)}
#category-panel:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
#category-panel #media-stage{height:100%;min-height:0;margin:0;padding:8px}
#media-stage .media-shell{width:100%;height:100%;max-width:none;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
#media-stage .image-shell{grid-template-rows:minmax(0,1fr)}
#media-stage .media-canvas{width:100%;height:100%;min-height:0;touch-action:pan-y pinch-zoom}
#media-stage .media-canvas video,#media-stage .media-canvas img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
#media-stage .player-controls{min-width:0;padding-top:0;gap:0}
.viewer-bottom{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:0;padding-top:10px}
.viewer-bottom p{font-size:14px;line-height:1.4}
.viewer-bottom .viewer-meta{font-size:12px;margin-top:5px}
.enlarge-button{min-width:0;min-height:44px;padding:9px 11px;gap:10px}
.empty-state{height:100%;padding:8px;gap:12px;max-width:100%}
.empty-state h3{font-size:26px}
.empty-state p{font-size:15px}
.empty-state button{padding:10px 14px;margin-top:0;min-height:44px}
@media(max-height:850px) and (min-width:721px){
 body:has(#portfolio-page:not([hidden])) .site-header{height:96px}
 #portfolio-page .intro{padding:16px 0}
 #portfolio-page .intro-title{font-size:64px;margin-top:10px}
 #portfolio-page .path-line{margin-top:8px}
 #portfolio-page .intro-description{font-size:17px;margin-top:10px}
 .category-tab{min-height:44px;padding-block:12px}
 .category-tab[aria-selected=true]::before{top:12px}
}
@media(max-width:1100px){.viewer-navigation .format-label{display:none}.viewer-bottom p{font-size:13px}.viewer-bottom .viewer-meta{font-size:11px}}
@media(min-width:721px) and (max-width:1100px){.portfolio-layout{grid-template-columns:240px minmax(0,1fr);gap:20px}#category-panel{grid-template-rows:60px minmax(0,1fr) 96px}.enlarge-button{max-width:112px;font-size:12px}.viewer-bottom{gap:10px}}
@media(max-width:720px){
 body:has(#portfolio-page:not([hidden])) .site-header{height:auto;min-height:0;padding:8px 0 4px}
 #portfolio-page .intro{padding:16px 0 14px}
 #portfolio-page .intro-title{font-size:44px;letter-spacing:-2px;margin-top:10px}
 #portfolio-page .intro-description{font-size:16px;margin-top:10px}
 #portfolio-page .path-line{margin-top:8px}
 .portfolio-layout{gap:12px}
 .mobile-category{min-height:44px;margin-top:8px;padding:9px 12px}
 #category-panel{padding:8px;gap:6px;grid-template-rows:48px minmax(0,1fr) 80px}
 .viewer-heading h2{font-size:18px;margin-top:4px}
 .viewer-heading{gap:8px}
 .viewer-category{font-size:9px;letter-spacing:1px}
 .viewer-navigation{gap:0}
 .gallery-navigation{gap:2px}
 .work-position{font-size:11px;min-width:34px}
 #category-panel #media-stage{padding:6px}
 .viewer-bottom{gap:8px;padding-top:8px}
 .viewer-bottom p{font-size:12px;line-height:1.4}
 .viewer-bottom .viewer-meta{font-size:10px;margin-top:4px}
 .enlarge-button{font-size:11px;max-width:112px;padding:7px 9px;gap:7px}
 .empty-state{gap:8px;padding:5px}
 .empty-state h3{font-size:20px}
 .empty-state p{font-size:12px}
 .empty-state button{font-size:12px;padding:8px;min-height:36px}
}
@media(max-height:740px) and (max-width:720px){
 body:has(#portfolio-page:not([hidden])) .brand img{height:55px}
 #portfolio-page .intro{padding:10px 0}
 #portfolio-page .intro-title{font-size:36px;margin-top:7px}
 #portfolio-page .path-line{margin-top:6px}
 #portfolio-page .intro-description{font-size:14px;margin-top:7px}
}
@media(max-height:620px) and (max-width:720px){
 body:has(#portfolio-page:not([hidden])) .site-header{padding:4px 0}
 body:has(#portfolio-page:not([hidden])) .brand img{height:45px}
 #portfolio-page .intro{padding:8px 0}
 #portfolio-page .intro-title{font-size:32px;margin-top:5px}
 #portfolio-page .path-line{margin-top:4px}
 #portfolio-page .intro-description{font-size:12px;line-height:1.4;margin-top:5px}
 .portfolio-layout{gap:6px}
 #category-panel{grid-template-rows:44px minmax(0,1fr) 88px}
 .viewer-heading h2{font-size:16px;margin-top:2px}
 .viewer-bottom p{font-size:11px;line-height:1.3}
 .viewer-bottom .viewer-meta{font-size:9px}
}