/* Photography: one photo per screen, stacked, scrolling page. */

html, body {
  height: auto;
  overflow: auto;
}

/* Fixed nav floats over photos while scrolling: invert against whatever is behind it. */
.nav { mix-blend-mode: difference; }
.nav a { color: #fff; }

.photo-list {
  position: relative;
  padding: 61px 0 21px;
}

.photo {
  position: relative;
  width: fit-content;
  margin: 0 auto 21px;
}

.photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 28px);
  max-height: 100vh;
}

@media (max-width: 768px) {
  .photo-list { padding-top: 70px; }
  .photo img { max-width: calc(100vw - 24px); max-height: none; }
}