html { scrollbar-gutter: stable; }
.portrait-link { width: fit-content; max-width: 100%; cursor: zoom-in; }
.portrait-link.is-expanded > * { visibility: hidden; }
html:has(.portrait-viewer[open]) { overflow: hidden; background: #252628; }
.portrait-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 64px 24px 48px;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}
.portrait-viewer[open] { display: grid; place-items: center; }
.portrait-viewer::backdrop { background: #101113e8; animation: portrait-backdrop-in 280ms ease both; }
.portrait-viewer.is-closing::backdrop { animation: portrait-backdrop-out 260ms ease both; }
.portrait-figure { width: min(620px, 100%, calc(100svh - 180px)); }
.portrait-full { width: 100%; aspect-ratio: 1; transform-origin: top left; }
.portrait-figure figcaption { margin: 20px 0 0; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.3; text-align: center; }
.portrait-close { top: 16px; right: 20px; width: 44px; height: 44px; }
@keyframes portrait-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes portrait-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 700px) {
  .portrait-link .expand-icon { right: 6px; bottom: 6px; width: 28px; height: 28px; }
  .portrait-figure figcaption { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-viewer::backdrop, .portrait-viewer.is-closing::backdrop { animation: none; }
}