/* Kenya photographs: full-screen slideshow, one line of text (the place). */
:root {
  --bg: #0a0a0a;
  --fg: rgba(236, 234, 229, .78);
  --m: clamp(12px, 3vmin, 40px);              /* margin around the photograph */
  --mb: calc(var(--m) + 26px);                /* extra room below for the place name */
  --cur-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M22 8 L12 18 L22 28' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M22 8 L12 18 L22 28' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 18 18, w-resize;
  --cur-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M14 8 L24 18 L14 28' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M14 8 L24 18 L14 28' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 18 18, e-resize;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body {
  color: var(--fg);
  font: 400 12px/1 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: fixed; inset: 0; }
.layer {
  position: absolute;
  top: max(var(--m), env(safe-area-inset-top));
  left: max(var(--m), env(safe-area-inset-left));
  width: calc(100% - 2 * var(--m));
  height: calc(100% - var(--m) - var(--mb) - env(safe-area-inset-bottom));
  object-fit: contain;
  opacity: 0;
  transition: opacity .9s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.layer.is-on { opacity: 1; }
.layer:not([src]) { visibility: hidden; }

.hit { position: fixed; top: 0; bottom: 0; width: 50%; z-index: 1; }
.hit.prev { left: 0; cursor: var(--cur-prev); }
.hit.next { right: 0; cursor: var(--cur-next); }

.place {
  position: fixed; z-index: 2; margin: 0;
  left: max(var(--m), env(safe-area-inset-left));
  bottom: calc((var(--mb) - 12px) / 2 + env(safe-area-inset-bottom));
  pointer-events: none;
}

.close {
  position: fixed; z-index: 3;
  top: max(4px, env(safe-area-inset-top)); right: max(4px, env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--fg); opacity: .5; transition: opacity .25s;
}
.close:hover, .close:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .layer { transition: none; }
}