/* The enlarged portfolio image floats directly over the page. */
body.work-image-open,
html:has(body.work-image-open) { overflow:hidden; }
html:has(body.work-image-open) { scrollbar-gutter:auto; }
.work-image-viewer, .work-image-viewer * { box-sizing:border-box; }
.work-image-viewer {
  position:fixed; inset:0; width:100vw; height:100vh; height:100dvh;
  max-width:none; max-height:none; margin:0; padding:0; overflow:hidden;
  border:0; border-radius:0; box-shadow:none;
  background-color:var(--study-background, #d2d1cf);
  background-image:var(--studio-image, none); background-size:var(--studio-size, cover);
  background-position:center bottom; background-repeat:no-repeat;
  color:var(--ink, #302d29); font:400 14px/1.4 var(--headline-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
}
.work-image-viewer[open] { display:block; }
.work-image-viewer::backdrop { background:var(--study-background, #d2d1cf); }
.work-image-stage {
  position:absolute; inset:0; min-width:0; min-height:0; overflow:hidden;
  overscroll-behavior:none; touch-action:none; background:transparent;
  -webkit-user-select:none; user-select:none; cursor:default;
}
.work-image-stage[data-zoomed] { cursor:grab; }
.work-image-stage[data-zoomed][data-dragging] { cursor:grabbing; }
.work-image-canvas { position:absolute; top:0; left:0; display:block; min-width:0; min-height:0; transform-origin:0 0; }
.work-image-viewer[open] .work-image-canvas { will-change:transform; }
.work-image-picture { display:block; width:100%; height:100%; max-width:none; max-height:none; padding:0; border:0; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.work-image-viewer .work-image-control {
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  padding:0 8px; border:0; border-radius:var(--control-radius); color:var(--control-ink);
  background:transparent; box-shadow:none; font:var(--control-font); cursor:pointer;
}
.work-image-viewer .work-image-close {
  position:absolute; z-index:3; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right));
  width:44px; padding:0; font-size:20px; line-height:1;
}
.work-image-viewer .work-image-control:focus-visible,
.work-image-stage:focus-visible { outline:none; }
html[data-portfolio-tab-focus] .work-image-stage:focus .work-image-canvas { filter:brightness(.86); }
.work-image-sr-only, .work-image-feedback {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Temporary loading/retry feedback leaves the image-only view unobstructed. */
.work-image-feedback[data-state="loading"],
.work-image-feedback[data-state="error"] {
  z-index:2; inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:center; gap:12px; width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; clip-path:none; white-space:normal;
}
.work-image-feedback[data-state="loading"] { pointer-events:none; }
.work-image-status { margin:0; color:var(--ink, #302d29); font-size:13px; text-shadow:none; }
.work-image-viewer [hidden] { display:none; }
@media (hover:hover) and (pointer:fine) {
  .work-image-viewer .work-image-control:hover::before { background:var(--control-hover); }
}
@media (forced-colors:active) {
  .work-image-viewer { color:CanvasText; background:Canvas; }
  .work-image-viewer::backdrop { background:Canvas; }
  .work-image-status { color:CanvasText; text-shadow:none; }
}