/* Monty Marsh: the site viewer. One viewer for every image, film, video and show on the site.
   Full screen on Darkroom ground, one item at a time, with its label and a count for its set.
   It cuts between items and never dissolves. An image never shows larger than its file.
   Colors are design system tokens. The value after each token is its Darkroom value, used only if the token is missing. */

.mm-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ground, #1A0A0F);
  color: var(--ink, #F6E6EA);
  font-family: var(--font-body, "Outfit", system-ui, sans-serif);
  font-variant-numeric: lining-nums;
  isolation: isolate;
}
.mm-viewer::backdrop { background: var(--ground, #1A0A0F); }
/* Grain on the ground only, at 12 percent. It sits under the image, never over it. */
.mm-viewer::after { content: ""; position: absolute; z-index: -1; inset: 0; background: url("media/grain.png") 0 0 / 180px 180px; opacity: 0.12; mix-blend-mode: screen; pointer-events: none; }

.mm-viewer__bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 88px; padding: 0 40px; box-sizing: border-box; }
.mm-viewer__where { margin: 0; font: 700 12px / 16px var(--font-display, "Syne", "Arial Black", sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute, #9A8891); }
.mm-viewer__count { margin: 6px 0 0; font: 500 15px / 20px var(--font-body, "Outfit", system-ui, sans-serif); color: var(--ink-soft, #C9B6BC); }

.mm-viewer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(246, 230, 234, 0.24);
  border-radius: 999px;
  background: rgba(246, 230, 234, 0.06);
  color: var(--ink, #F6E6EA);
  cursor: pointer;
}
.mm-viewer__btn:hover { background: rgba(246, 230, 234, 0.12); }
.mm-viewer__btn svg { display: block; }
.mm-viewer__btn[disabled] { opacity: 0.32; cursor: default; }
.mm-viewer__close { width: 44px; height: 44px; flex: none; }
.mm-viewer__close svg { width: 18px; height: 18px; }
.mm-viewer__nav { position: absolute; z-index: 2; top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.mm-viewer__nav svg { width: 22px; height: 22px; }
.mm-viewer__nav--prev { left: 40px; }
.mm-viewer__nav--next { right: 40px; }
.mm-viewer button:focus-visible,
.mm-viewer a:focus-visible { outline: 2px solid var(--focus, #C9962A); outline-offset: 3px; }

/* The figure: the item, then its label. */
.mm-viewer__fig { position: absolute; top: 96px; bottom: 32px; left: 136px; right: 136px; display: flex; flex-direction: column; align-items: center; margin: 0; }
.mm-viewer__stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
/* Width and height stay auto, so an image shows at its own size when it fits and only ever scales down.
   viewer.js caps each image at the room it has. Two images in one item stack and share the height. */
.mm-viewer__imgs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; max-width: 100%; max-height: 100%; }
.mm-viewer__imgs[hidden] { display: none; }
.mm-viewer__obj { position: relative; flex: none; }
.mm-viewer__img { display: block; width: auto; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; }
/* Labels stay on: Front, Back, Outside and Inside. */
.mm-viewer__pill { position: absolute; top: 16px; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--scrim, rgba(26, 10, 15, 0.72)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #F6E6EA; font: 600 12px / 16px var(--font-body, "Outfit", system-ui, sans-serif); letter-spacing: 0.02em; }
.mm-viewer__media { position: relative; flex: none; background: #000000; }
.mm-viewer__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mm-viewer__media--audio { background: transparent; }

.mm-viewer__cap { flex: none; margin: 24px 0 0; text-align: center; }
.mm-viewer__name { display: block; font: 600 16px / 22px var(--font-body, "Outfit", system-ui, sans-serif); color: var(--ink, #F6E6EA); }
.mm-viewer__detail { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-mute, #9A8891); }
.mm-viewer__detail:empty { display: none; }
.mm-viewer__steps { display: none; }

/* End card after a film: the next film, and the ask. After the last film, the ask leads. */
.mm-viewer__end { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; background: color-mix(in srgb, var(--ground, #1A0A0F) 86%, transparent); text-align: center; }
.mm-viewer__end[hidden] { display: none; }
.mm-viewer__kicker { margin: 0; font: 700 12px / 16px var(--font-display, "Syne", "Arial Black", sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold, #C9962A); }
.mm-viewer__next { margin: 0; max-width: 24ch; font: 700 clamp(26px, 3vw, 36px) / 1.2 var(--font-display, "Syne", "Arial Black", sans-serif); color: var(--ink, #F6E6EA); font-variant-numeric: lining-nums; }
.mm-viewer__next:empty { display: none; }
.mm-viewer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.mm-viewer__action { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; box-sizing: border-box; border-radius: var(--radius-m, 10px); font: 600 14px / 20px var(--font-body, "Outfit", system-ui, sans-serif); text-decoration: none; white-space: nowrap; cursor: pointer; }
.mm-viewer__action--primary { border: 0; background: var(--voice, #8A2A3D); color: var(--voice-on, #F6E6EA); box-shadow: var(--glow-voice, 0 8px 22px rgba(138, 42, 61, 0.38)); }
.mm-viewer__action--primary:hover { background: var(--voice-hover, #A23A4F); box-shadow: var(--glow-voice-hover, 0 10px 26px rgba(138, 42, 61, 0.52)); transform: translateY(-1px); }
.mm-viewer__action--secondary { border: 1.5px solid var(--voice-line, #B4485E); background: transparent; color: var(--ink, #F6E6EA); }
.mm-viewer__action--secondary:hover { border-color: var(--voice-hover, #A23A4F); }
.mm-viewer__action[hidden] { display: none; }

/* Openers: an image shows a magnifier on desktop. Films and videos keep the pointer. */
[data-viewer]:not([data-media]) { cursor: zoom-in; }

/* While the viewer is open, the page behind it holds still and doesn't scroll. */
:root[data-viewer-open] { overflow: hidden; }
:root[data-viewer-open] .mm-grain::after,
:root[data-viewer-open] .mm-safelight::before,
:root[data-viewer-open] .mm-guapy-breath::before { animation-play-state: paused; }

@media (max-width: 767px) {
  .mm-viewer__bar { height: 64px; padding: 0 16px; }
  .mm-viewer__count { margin-top: 2px; font-size: 14px; }
  .mm-viewer__nav { display: none; }
  .mm-viewer__fig { top: 72px; bottom: 16px; left: 0; right: 0; }
  .mm-viewer__cap { margin-top: 16px; padding: 0 16px; }
  /* Films and videos step with two buttons under the title, since a swipe on a playing film would skip through it. */
  .mm-viewer.is-media .mm-viewer__steps { display: flex; gap: 12px; margin-top: 16px; }
  .mm-viewer__steps .mm-viewer__btn { height: 44px; padding: 0 18px; border-radius: var(--radius-m, 10px); font: 600 14px / 20px var(--font-body, "Outfit", system-ui, sans-serif); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-viewer__action--primary:hover { transform: none; }
}