/* Shared photo viewer. Fixed units keep controls consistent across both site roots. */
.image-viewer {
  --image-viewer-inset: 24px;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(12px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0;
  background: #f7f5ef;
  color: #242826;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 2147483000;
  color-scheme: light;
}
.image-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.image-viewer:not([open]) { display: none; }
.image-viewer::backdrop { background: rgba(25, 28, 26, .82); }
.image-viewer *, .image-viewer *::before, .image-viewer *::after { box-sizing: border-box; }
.image-viewer [hidden] { display: none !important; }
.image-viewer button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #dcd7c9;
  border-radius: 50%;
  background: #fffefa;
  color: #242826;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease;
}
.image-viewer button:hover:not(:disabled) { background: #eae5d8; border-color: #a39165; }
.image-viewer button:disabled { opacity: .38; cursor: default; }
.image-viewer button:focus-visible, .image-viewer a:focus-visible { outline: 3px solid #8a7135; outline-offset: 3px; }
.image-viewer__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.image-viewer__title { margin: 0; padding: 0; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: .02em; }
.image-viewer .image-viewer__close { font-family: Arial, Helvetica, sans-serif; font-size: 32px; font-weight: 300; }
.image-viewer__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e6e2d8;
  border-radius: 4px;
  background: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: zoom-in;
  isolation: isolate;
}
.image-viewer__stage.is-zoomed { cursor: grab; }
.image-viewer__stage.is-dragging { cursor: grabbing; }
.image-viewer .image-viewer__image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: fill;
  transform-origin: center center;
  transition: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.image-viewer__loading, .image-viewer__error { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; margin: 0; padding: 24px; color: #66685f; font-size: 15px; line-height: 1.5; text-align: center; }
.image-viewer__error { z-index: 1; }
.image-viewer__error p { margin: 0; font: inherit; }
.image-viewer .image-viewer__original { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; color: #6d5629; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.image-viewer__footer { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; min-width: 0; }
.image-viewer__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; width: 100%; min-width: 0; }
.image-viewer__navigation, .image-viewer__zoom { display: flex; align-items: center; gap: 8px; }
.image-viewer__counter { min-width: 48px; color: #5d6157; font-size: 13px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.image-viewer .image-viewer__reset { min-width: 64px; padding: 0 8px; border-radius: 24px; font-size: 13px; font-variant-numeric: tabular-nums; }
.image-viewer__caption { max-width: min(100%, 1000px); margin: 0; color: #30352f; font-size: 15px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.image-viewer__hint { max-width: 850px; margin: 0; color: #62675c; font-size: 12px; line-height: 1.4; text-align: center; }
.image-viewer__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .image-viewer { --image-viewer-inset: 12px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 8px; }
  .image-viewer[open] { gap: 8px; }
  .image-viewer__title { font-size: 13px; }
  .image-viewer__controls { gap: 8px 12px; justify-content: center; }
  .image-viewer__navigation, .image-viewer__zoom { gap: 4px; }
  .image-viewer button { min-width: 44px; min-height: 44px; padding: 0 9px; }
  .image-viewer__counter { min-width: 36px; font-size: 12px; }
  .image-viewer .image-viewer__reset { min-width: 54px; font-size: 12px; }
  .image-viewer__caption { font-size: 13px; }
  .image-viewer__hint { font-size: 11px; max-width: 340px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .image-viewer { --image-viewer-inset: 8px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .image-viewer[open] { gap: 4px; }
  .image-viewer__header { position: absolute; z-index: 2; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .image-viewer__title, .image-viewer__hint { display: none; }
  .image-viewer[open] { grid-template-rows: minmax(0, 1fr) auto; }
  .image-viewer__footer { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .image-viewer__controls { grid-column: 2; grid-row: 1; width: auto; gap: 12px; }
  .image-viewer__caption { grid-column: 1; grid-row: 1; text-align: left; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .image-viewer button { transition: none; } }