* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: black;
  overflow: hidden;
  cursor: pointer;
}

.site-header {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(1rem, 2.5vw, 2.5rem));
  left: calc(env(safe-area-inset-left, 0px) + clamp(1rem, 2.5vw, 2.5rem));
  z-index: 10;
  pointer-events: none;
}

.site-wordmark {
  color: white;
  font-family: "American Typewriter", "Courier New", Courier, monospace;
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  user-select: none;
}

#photo-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.photo-layer {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center; /* This will later be adjustable per image */
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.photo-layer.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .photo-layer {
    transition-duration: 0.01ms;
  }
}