/* /explore: the endless photo field. */
html, body.explore { height: 100%; overflow: hidden; }
body.explore { background: var(--paper); }

.ex-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 18px var(--pad) 60px;
  background: linear-gradient(var(--paper) 58%, color-mix(in srgb, var(--paper) 0%, transparent));
  pointer-events: none;
}
.ex-bar > * { pointer-events: auto; }
.ex-back { font: 500 13px/1 var(--sans); display: inline-flex; gap: 8px; padding-top: 12px; transition: color 0.2s; }
.ex-back:hover { color: var(--accent); }
.ex-title { text-align: center; }
.ex-title h1 { font: 400 clamp(40px, 5vw, 68px) / 0.95 var(--serif); letter-spacing: -0.015em; }
.ex-title p { margin-top: 6px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.ex-hint { justify-self: end; padding-top: 12px; font: 400 11.5px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }

.field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.field.is-dragging { cursor: grabbing; }
.field-layer { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 0 0; }

.tile {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-2);
  animation: tile-in 0.7s var(--ease) both;
}
@keyframes tile-in { from { opacity: 0; } }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
}
.tile img.is-loaded { opacity: 1; transform: scale(1.001); }
.tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 10px;
  padding: 26px 12px 10px;
  font: 400 11px/1.3 var(--mono);
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile figcaption span { opacity: 0.7; }
.field:not(.is-dragging) .tile:hover img.is-loaded { transform: scale(1.05); }
.field:not(.is-dragging) .tile:hover figcaption { opacity: 1; transform: none; }

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 48px);
  border: 0;
  background: rgba(9, 9, 10, 0.94);
  color: var(--chalk);
  display: none;
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; animation: lb-in 0.4s var(--ease); }
.lightbox::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; min-height: 0; opacity: 0; transition: opacity 0.4s var(--ease); }
.lightbox img.is-loaded { opacity: 1; }
.lightbox-cap { font: 400 12px/1.4 var(--mono); color: var(--chalk-2); text-align: center; }
.lightbox-ctrl { display: flex; justify-content: center; gap: 8px; }
.lightbox .btn { border-color: var(--rule-d); }
.lightbox .btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .ex-bar { grid-template-columns: 1fr auto; padding-bottom: 40px; }
  .ex-hint { display: none; }
  .ex-title { text-align: right; }
}