:root {
  color-scheme: light;
  --frame: clamp(16px, 2.45vw, 38px);
  --paper: #fff;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body {
  background: var(--paper);
  overflow: hidden;
  overscroll-behavior: none;
}

button { -webkit-tap-highlight-color: transparent; }

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100svh;
  padding: max(var(--frame), env(safe-area-inset-top))
    max(var(--frame), env(safe-area-inset-right))
    max(var(--frame), env(safe-area-inset-bottom))
    max(var(--frame), env(safe-area-inset-left));
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #0b0908;
}

.photograph, .photograph img, .ink-canvas, .advance {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photograph {
  visibility: hidden;
  overflow: hidden;
}

.photograph.is-active, .photograph.is-entering { visibility: visible; }
.photograph.is-active { z-index: 1; }
.photograph.is-entering { z-index: 2; }

.photograph img {
  display: block;
  object-fit: cover;
  object-position: var(--position, 50% 50%);
  user-select: none;
  -webkit-user-drag: none;
}

/* These positions also keep the important details in a portrait viewport. */
.photograph:nth-child(1) { --position: 64% 55%; }
.photograph:nth-child(2) { --position: 58% 72%; }
.photograph:nth-child(3) { --position: 50% 50%; }
.photograph:nth-child(4) { --position: 50% 56%; }

.photograph.is-active img {
  animation: quiet-drift 15s cubic-bezier(.2, .1, .3, 1) both;
}

.gallery.is-paused .photograph img { animation-play-state: paused; }

@keyframes quiet-drift {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

.ink-canvas { z-index: 3; visibility: hidden; pointer-events: none; }
.ink-canvas.is-visible { visibility: visible; }

.advance {
  z-index: 4;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.advance:focus { outline: none; }
/* A small keyboard-only marker replaces the outline around the photograph. */
.advance:focus-visible::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 2px rgb(0 0 0 / .25);
}

@media (max-width: 600px) {
  :root { --frame: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .photograph.is-active img { animation: none; }
  *, *::before, *::after { transition: none !important; }
}