/* Bump the -vN suffix when this file changes: it is cached for a year. */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* no rubber-band bounce revealing the background */
  background: #2b1509; /* dark warm brown, only visible until the images paint */
}

/*
 * Backdrop: a blurred, enlarged copy of the photo that fills the whole
 * screen, including the strip behind mobile browser bars. It shows only
 * where the sharp photo doesn't reach, so there are never empty bars.
 */
body::before {
  content: "";
  position: fixed;
  top: -5vh;
  left: -5vw;
  z-index: 0;
  width: 110vw;
  height: 110vh;
  height: 110lvh;
  background: center / cover no-repeat url("/img/hero-v1-800.jpg");
  background-image: image-set(
    url("/img/hero-v1-800.avif") type("image/avif"),
    url("/img/hero-v1-800.webp") type("image/webp"),
    url("/img/hero-v1-800.jpg") type("image/jpeg")
  );
  filter: blur(32px) brightness(0.85);
  pointer-events: none;
}

/*
 * The photo. By default the whole image is shown, scaled to fit the visible
 * screen (dvh excludes the browser bars, so nothing hides behind them).
 */
.hero {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: contain;
}

/*
 * When the screen's shape is close to the photo's (between 8:5 and 2:1,
 * which covers most laptops and monitors), fill it edge to edge instead:
 * at most about a tenth is trimmed, centred.
 */
@media (min-aspect-ratio: 8/5) and (max-aspect-ratio: 2/1) {
  .hero {
    object-fit: cover;
  }
}

/*
 * Touch screens held upright: the photo fills the screen top to bottom and
 * its natural width overflows, so it scrolls sideways under your finger.
 * /js/hero-v1.js opens it centred on the elephant.
 */
@media (pointer: coarse) and (orientation: portrait) {
  .stage {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1;
    height: 100vh;
    height: 100lvh; /* reach behind the translucent browser bars too */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain; /* swiping past the edge won't go "back" */
    scrollbar-width: none;
  }

  .stage::-webkit-scrollbar {
    display: none;
  }

  .stage picture {
    display: block;
    width: max-content;
    height: 100%;
  }

  .hero {
    position: static;
    width: auto; /* follows the photo's own proportions */
    max-width: none;
    height: 100%;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 404 page */
.notice {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: max(2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: rgb(43 21 9 / 0.75);
  color: #fbe3c4;
  font: 500 1rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.notice a {
  color: #f6a640;
}