/* screenshots open larger on click (assets/js/lightbox.js) */
img.shot{cursor:zoom-in;transition:scale .25s var(--spring)}
img.shot:hover{scale:1.015}
img.shot:focus-visible{outline:3px solid var(--ochre);outline-offset:6px}
html.lightbox-on{overflow:hidden;scrollbar-gutter:stable}

.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:clamp(16px,4vw,48px);border:0;display:grid;place-items:center;cursor:zoom-out;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox:not([open]){display:none}
.lightbox::backdrop{background:transparent}
.lightbox img{display:block;max-width:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.lightbox-close{position:absolute;top:clamp(12px,2.5vw,24px);right:clamp(12px,2.5vw,24px);
  width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px;cursor:pointer;
  color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent)}
.lightbox-close:hover{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.lightbox-close:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
/* phones: keep the close button clear of the picture */
@media (max-width:700px){.lightbox{padding-top:72px}}

@media (prefers-reduced-motion:reduce){img.shot,img.shot:hover{transition:none;scale:none}}