/* ------------------------------------------------------------------
   Look and feel. The values in :root are the ones you're most likely
   to want to change.
   ------------------------------------------------------------------ */
:root {
  --background: #fafaf8;               /* page and lightbox colour */
  --ink: #161616;                      /* lightbox buttons and focus outlines */
  --loading: #efefeb;                  /* tone shown while an image loads */
  --page-margin: clamp(16px, 4.5vw, 72px);
  --gap: clamp(10px, 1.5vw, 22px);     /* space between images */
  --row-height: 280px;                 /* target height of each row */
}

@media (min-width: 1100px) { :root { --row-height: 340px; } }
@media (min-width: 1700px) { :root { --row-height: 420px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  background: var(--background);
  -webkit-text-size-adjust: 100%;
}
html.locked { overflow: hidden; }

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding:
    calc(var(--page-margin) + env(safe-area-inset-top, 0px))
    max(var(--page-margin), env(safe-area-inset-right, 0px))
    calc(var(--page-margin) + env(safe-area-inset-bottom, 0px))
    max(var(--page-margin), env(safe-area-inset-left, 0px));
}

/* ------------------------------------------------------------------
   Grid. gallery.js positions each image in justified rows: every row
   fills the full width, and each image keeps its own proportions.
   ------------------------------------------------------------------ */
.gallery {
  position: relative;
  column-gap: var(--gap); /* read by gallery.js as the spacing between images */
}

.tile {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: var(--loading);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.tile img,
.tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the tile already has the video's proportions; this just hides sub-pixel gaps */
  opacity: 0;
  transition: opacity 0.7s ease;
}

.tile.loaded { background: transparent; }
.tile.loaded img,
.tile.loaded video { opacity: 1; }

.tile:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* Hover only on devices with a real pointer, so phones never get stuck in a hover state */
@media (hover: hover) and (pointer: fine) {
  .tile.loaded img, .tile.loaded video { transition: opacity 0.45s ease; }
  .tile.loaded:hover img, .tile.loaded:hover video { opacity: 0.86; }
}

.empty {
  padding-top: 30vh;
  text-align: center;
  color: #9a9a95;
  font-size: 13px;
}
.empty code { font: inherit; color: #6f6f6a; }

/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(64px + env(safe-area-inset-top, 0px))
    calc(88px + env(safe-area-inset-right, 0px))
    calc(64px + env(safe-area-inset-bottom, 0px))
    calc(88px + env(safe-area-inset-left, 0px));
  background: var(--background);
  opacity: 0;
  transition: opacity 0.3s ease;
  touch-action: pan-y pinch-zoom;
}
.lightbox.open { opacity: 1; }

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-image.ready { opacity: 1; }
video.lightbox-image { background: transparent; outline: none; }

.lightbox-button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lightbox-button:hover,
.lightbox-button:focus-visible { opacity: 1; }
.lightbox-button:focus-visible { outline: 1px solid var(--ink); outline-offset: -6px; }

.lightbox-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.lightbox-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
.lightbox-prev { left: calc(16px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: calc(16px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

/* On small screens the image gets almost the whole screen and the arrows move to the bottom corners */
@media (max-width: 700px) {
  .lightbox {
    padding:
      calc(60px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px))
      calc(68px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
  }
  .lightbox-prev,
  .lightbox-next { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile img, .lightbox, .lightbox-image { transition: none; }
}