.lightbox{max-width:94vw;max-height:92vh;padding:var(--spacing-s4);padding-inline:calc(var(--spacing-s2) * 2 + 44px);border-radius:var(--radius-card);background:var(--color-blue-900);color:var(--color-white);place-items:center;gap:var(--spacing-s2);border:0;margin:auto;display:grid;position:fixed;inset:0}.lightbox::backdrop{background:color-mix(in srgb, var(--color-ink) 86%, transparent)}html:has(dialog.lightbox[open]){scrollbar-gutter:stable;overflow:hidden}.lightbox__close,.lightbox__nav{z-index:2;background:color-mix(in srgb, var(--color-white) 40%, var(--color-blue-900));width:44px;height:44px;color:var(--color-white);cursor:pointer;border:0;border-radius:50%;place-items:center;font-size:1.25rem;line-height:1;display:grid;position:absolute}.lightbox__close:hover,.lightbox__nav:hover,.lightbox__close:focus-visible,.lightbox__nav:focus-visible{background:color-mix(in srgb, var(--color-white) 48%, var(--color-blue-900))}.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid var(--color-white);outline-offset:2px}.lightbox__close{top:var(--spacing-s2);inset-inline-end:var(--spacing-s2)}.lightbox__nav{top:50%;translate:0 -50%}.lightbox__nav--prev{inset-inline-start:var(--spacing-s2)}.lightbox__nav--next{inset-inline-end:var(--spacing-s2)}.lightbox__count{z-index:2;top:var(--spacing-s2);font-family:var(--font-display);letter-spacing:-.01em;color:var(--color-white);font-variant-numeric:tabular-nums;margin:0;font-size:1.25rem;font-weight:900;line-height:44px;position:absolute;inset-inline-start:var(--spacing-s2)}.lightbox__count-sep{color:var(--color-red);padding-inline:4px}.lightbox__figure{justify-items:center;gap:var(--spacing-s1);max-width:100%;max-height:100%;margin:0;display:grid}.lightbox__frame{view-transition-class:gallery;justify-items:center;max-width:100%;max-height:100%;display:grid}.lightbox__img{object-fit:contain;border-radius:var(--radius-tile);max-width:min(1100px,84vw);max-height:76vh}.lightbox__figure figcaption{color:color-mix(in srgb, var(--color-white) 80%, transparent);text-align:start;justify-self:start;font-size:.9375rem}@media (max-width:620px){.lightbox{block-size:100dvh;inline-size:100vw;max-width:100vw;max-height:100dvh;padding:var(--spacing-s3);border-radius:0;padding-block-end:calc(var(--spacing-s3) * 2 + 44px)}.lightbox__nav{top:auto;inset-block-end:var(--spacing-s3);translate:none}.lightbox__img{max-width:calc(100vw - var(--spacing-s3) * 2);max-height:calc(100dvh - var(--spacing-s7) - var(--spacing-s3) - 44px)}}@keyframes lightbox-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){:where(html:not(.a11y-still)) .lightbox::backdrop{animation:lightbox-fade-in .32s var(--ease-land) both}:where(html:not(.a11y-still))::view-transition-group(.gallery){animation-duration:.32s;animation-timing-function:var(--ease-land)}:where(html:not(.a11y-still))::view-transition-old(.gallery){animation-duration:.32s;animation-timing-function:var(--ease-land)}:where(html:not(.a11y-still))::view-transition-new(.gallery){animation-duration:.32s;animation-timing-function:var(--ease-land)}}@media (prefers-reduced-motion:reduce){.lightbox[open],.lightbox::backdrop{animation:.2s both lightbox-fade-in}}html.a11y-still .lightbox[open],html.a11y-still .lightbox::backdrop{animation:.2s both lightbox-fade-in}
