/* One shared lightbox for foreground images and films throughout the site. */
.g-viewer {
  --g-line: rgba(193,219,239,.2); --g-soft: #afc1cf; --g-accent: #7adcf0;
  position: fixed; inset: 0; width: 90vw; height: 90dvh; max-width: none; max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; overflow: hidden; border: 1px solid #385367; border-radius: 10px;
  background: #081723; color: white; box-shadow: 0 30px 120px #0009;
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity 160ms ease, transform 160ms ease, display 160ms allow-discrete, overlay 160ms allow-discrete;
}
.g-viewer[open] { opacity: 1; transform: none; }
@starting-style { .g-viewer[open] { opacity: 0; transform: translateY(10px) scale(.985); } }
.g-viewer [hidden] { display: none !important; }
.g-viewer::backdrop { background: rgba(1,7,14,.93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.g-viewer-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: #081723; }
.g-viewer-top { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--g-line); }
.g-viewer-kind { color: #9cdce9; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.g-viewer-tools { display: flex; gap: 8px; align-items: center; }
.g-viewer-tools button, .g-viewer-bottom > button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px;
  border: 1px solid var(--g-line); border-radius: 50%; background: transparent; color: white; font-size: 1.1rem;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.g-viewer-tools button:hover:not(:disabled), .g-viewer-bottom > button:hover:not(:disabled) { border-color: var(--g-accent); background: var(--g-accent); color: #071421; }
.g-viewer button:disabled { opacity: .3; cursor: default; }
.g-viewer button:focus-visible, .g-viewer a:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 3px; }
.g-zoom-readout { min-width: 44px; text-align: center; font-size: .7rem; color: var(--g-soft); font-variant-numeric: tabular-nums; }
.g-viewer-stage { position: relative; display: grid; place-items: center; flex: 1 1 auto; min-height: 130px; overflow: hidden; background: #02090f; }
.g-image-viewport { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.g-image-viewport.is-zoomed { cursor: grab; touch-action: none; }
.g-image-viewport.is-dragging { cursor: grabbing; }
.g-viewer-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: scale-down; opacity: 1; filter: none; user-select: none; transform-origin: center; transition: transform 110ms ease-out; }
.g-image-viewport.is-dragging .g-viewer-image { transition: none; }
.g-viewer-video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; opacity: 1; filter: none; background: black; }
.g-viewer-status { position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px; margin: 0; padding: 12px; border: 1px solid #5b7485; background: #081723ed; font-size: .85rem; }
.g-viewer-bottom { display: flex; justify-content: space-between; align-items: flex-start; flex: 0 0 auto; gap: 22px; padding: 14px 24px 4px; border-top: 1px solid var(--g-line); }
.g-viewer-bottom > div { flex: 1; min-width: 0; text-align: center; }
.g-viewer-count { margin: 0 0 4px; color: #9cdce9; font-size: .6rem; letter-spacing: .12em; }
.g-viewer-bottom h2 { margin: 0; font: 500 clamp(1.15rem, 2vw, 1.6rem)/1.35 var(--display); letter-spacing: -.035em; }
.g-viewer-description { max-width: 680px; margin: 8px auto 4px; color: #c4d3df; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.g-viewer-copy { max-height: min(38dvh, 280px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 5px 4px; }
.g-viewer-copy:focus-visible { outline: 2px solid var(--g-accent); outline-offset: -2px; }
.g-viewer-credit { display: inline-flex; align-items: center; min-height: 32px; color: #a7deec; text-decoration: underline; text-underline-offset: 4px; font-size: .65rem; }
.g-viewer-help { flex: 0 0 auto; margin: 8px 16px 14px; color: #95adbd; font-size: .65rem; text-align: center; }
.g-viewer-shell:fullscreen { width: 100vw; height: 100dvh; max-height: none; background: #081723; }
.g-viewer.g-viewport-fullscreen { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
body.g-viewer-open { overflow: hidden; }
.image-card .image-expand { position: absolute; z-index: 2; top: 12px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(5,19,46,.45); color: white; font-size: 1rem; pointer-events: none; transition: background 180ms, color 180ms; }
.image-card:hover .image-expand, .image-card:focus-visible .image-expand { background: #80def0; border-color: #80def0; color: #071421; }
@media (max-width: 680px) {
  .g-viewer { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 6px; }
  .g-viewer-top { justify-content: center; padding: 8px 10px; }
  .g-viewer-kind { display: none; }
  .g-viewer-tools { width: 100%; justify-content: space-between; gap: 4px; }
  .g-zoom-readout { min-width: 36px; font-size: .63rem; }
  .g-viewer-bottom { gap: 8px; padding: 12px 10px 2px; }
  .g-viewer-bottom > button { width: 44px; height: 44px; }
  .g-viewer-bottom h2 { font-size: 1.1rem; }
  .g-viewer-description { font-size: .8125rem; line-height: 1.6; }
  .g-viewer-credit { font-size: .6rem; }
  .g-viewer-help { margin: 8px 10px 10px; font-size: .57rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .g-viewer { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .g-viewer-top { padding-block: 4px; }
  .g-viewer-bottom { padding-block: 5px; }
  .g-viewer-help { display: none; }
  .g-viewer-copy { max-height: 38dvh; }
  .g-viewer-credit { min-height: 24px; }
  .g-viewer-stage { min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-viewer, .g-viewer-image, .g-viewer button, .image-expand { transition: none !important; animation: none !important; }
}