/* Profile photo viewer: a dark, full-screen stage with the photo large and centered. */
.photo-zoom {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  display: none; place-items: center; background: color-mix(in srgb, #05050c 95%, transparent); color: #fff; overflow: hidden;
}
.photo-zoom[open] { display: grid; animation: photo-zoom-fade .25s ease both; }
/* The site tints and blurs other dialogs' backdrops; this one is its own stage. */
.photo-zoom::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:has(.photo-zoom[open]) { overflow: hidden; }

.photo-zoom-figure { display: grid; justify-items: center; gap: 14px; margin: 0; max-width: 100vw; max-height: 100vh; padding: 56px 16px 40px; box-sizing: border-box; }
.photo-zoom-frame { display: grid; place-items: center; overflow: hidden; border-radius: 20px; box-shadow: 0 30px 90px -20px #000; background: #111; }
.photo-zoom-image { display: block; max-width: min(92vw, 760px); max-height: min(76vh, 760px); width: auto; height: auto; min-width: min(60vw, 280px); object-fit: contain; cursor: zoom-in; transition: transform .35s cubic-bezier(.2, .8, .2, 1); user-select: none; -webkit-user-drag: none; }
.photo-zoom[data-zoomed="true"] .photo-zoom-image { transform: scale(2.4); cursor: zoom-out; }
.photo-zoom-missing { margin: 0; padding: 48px 32px; font-size: .95rem; color: #ddd; }
.photo-zoom-caption { font: 400 1.4rem/1.2 var(--studio-serif, Georgia, serif); letter-spacing: -.01em; text-align: center; overflow-wrap: anywhere; }
.photo-zoom-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: .8125rem; color: #bbb; pointer-events: none; transition: opacity .2s; }
.photo-zoom[data-zoomed="true"] .photo-zoom-hint { opacity: 0; }
.photo-zoom-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid #fff4; border-radius: 50%; background: #0008; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.photo-zoom-close:hover { background: #000b; border-color: #fff9; }
.photo-zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A photo that can be opened says so: a pointer, a soft highlight, and a visible focus ring. */
.is-zoomable { cursor: zoom-in; transition: filter .15s, box-shadow .15s; }
.is-zoomable:hover { filter: brightness(1.08); }
.is-zoomable:focus-visible { outline: 3px solid var(--accent-color, currentColor); outline-offset: 3px; }

@keyframes photo-zoom-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-zoom, .photo-zoom * { animation: none !important; transition: none !important; } }
html[data-motion="off"] .photo-zoom, html[data-motion="off"] .photo-zoom * { animation: none !important; transition: none !important; }
@media (max-width: 520px) { .photo-zoom-figure { padding-top: 64px; } .photo-zoom-caption { font-size: 1.2rem; } }