/* The image stays complete; controls live outside it, including on small screens. */
#lightbox.portfolio-viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:hidden;overscroll-behavior:contain}
#lightbox.portfolio-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.portfolio-viewer .viewer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left))}
.viewer-heading{min-width:0}
.viewer-heading h2{font-size:20px;font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:0;overflow-wrap:anywhere}
.viewer-heading p{font-size:12px;color:var(--muted);line-height:1.4;margin:5px 0 0;overflow-wrap:anywhere}
.viewer-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.portfolio-viewer button{color:var(--ink);-webkit-tap-highlight-color:transparent}
.portfolio-viewer .viewer-icon{position:static;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:0;border-radius:3px}
.portfolio-viewer button:disabled{opacity:.22;cursor:default}
.portfolio-viewer button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.viewer-stage{position:relative;min-width:0;min-height:0;overflow:hidden;margin:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));touch-action:pinch-zoom;user-select:none;-webkit-user-select:none}
#lightbox.portfolio-viewer #lightbox-media{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}
#lightbox.portfolio-viewer .viewer-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:auto;opacity:0;transition:opacity .16s ease;-webkit-user-drag:none}
#lightbox.portfolio-viewer .viewer-image.is-ready{opacity:1}
.viewer-loading,.viewer-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.viewer-error{width:min(100%,340px);padding:16px}
.viewer-error button{min-height:44px;padding:8px 16px;border:1px solid var(--ink);background:transparent}
.portfolio-viewer .viewer-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 24px;margin:0;padding:10px max(24px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border:0}
.viewer-project-controls,.viewer-image-controls{display:flex;align-items:center;gap:4px}
.viewer-counter{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px}
.viewer-count-label{font-size:10px;line-height:1.2;color:var(--muted)}
.viewer-project-controls>span{font-size:12px;color:var(--muted);margin-right:10px}
#lightbox.portfolio-viewer #lightbox-count{font-size:13px;line-height:1.3;text-align:center;min-width:62px;font-variant-numeric:tabular-nums;white-space:nowrap}
.portfolio-viewer .viewer-play{justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 14px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:3px;font-size:13px}
#viewer-help{grid-column:1/-1;text-align:center;font-size:11px;line-height:1.5;letter-spacing:.015em;color:var(--muted);margin:0}
#viewer-help>span{margin:0 8px}
.viewer-zoom{font-size:12px;line-height:1.2;max-width:118px;min-height:44px;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:8px}
.portfolio-viewer [hidden]{display:none!important}
#lightbox.portfolio-viewer.viewer-detail #lightbox-media{display:block;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.viewer-detail .viewer-stage{touch-action:pan-y pinch-zoom;user-select:auto}
#lightbox.portfolio-viewer.viewer-detail .viewer-image{width:min(100%,1000px);height:auto;max-height:none;margin:0 auto}
@media(hover:hover){.portfolio-viewer .viewer-icon:not(:disabled):hover{background:#e8e7e1}.portfolio-viewer .viewer-play:hover{background:#343434}}
@media(max-width:600px){
 .portfolio-viewer .viewer-header{gap:10px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
 .viewer-heading h2{font-size:17px}
 .viewer-heading p{font-size:11px;margin-top:3px}
 .viewer-header-actions{gap:0}
 .viewer-stage{margin-inline:12px}
 .portfolio-viewer .viewer-footer{gap:5px 8px;padding-inline:max(12px,env(safe-area-inset-left));padding-top:6px}
 .viewer-project-controls{gap:0}
 .viewer-project-controls>span,.viewer-play>span{display:none}
 .portfolio-viewer .viewer-play{padding:0;width:44px}
 .viewer-image-controls{gap:0}
 #lightbox.portfolio-viewer #lightbox-count{min-width:58px;font-size:12px}
 #viewer-help{font-size:10px;letter-spacing:0}
 #viewer-help>span{margin:0 5px}
 .viewer-zoom{max-width:88px;font-size:11px;padding:5px}
}
@media(max-height:500px){.portfolio-viewer .viewer-header{padding-block:4px}.portfolio-viewer .viewer-footer{padding-block:4px}#viewer-help{display:none}.viewer-heading h2{font-size:16px}.viewer-heading p{margin-top:2px}}
@media(prefers-reduced-motion:reduce){#lightbox.portfolio-viewer .viewer-image{transition:none}}