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

html {
  height: 100%;
}

body {
  min-height: 100dvh;
  background-color: #f0f0f0;
  font-family: system-ui, -apple-system, sans-serif;
  color: #333;
}

:root {
  /* How far the artwork is lifted off the bottom edge */
  --lift: 0px;
  /* Matches the artwork's top field and its bottom ground strip */
  --field: #f0f0f0;
  --ground: #83888a;
}

.page {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  /* The band revealed below the lifted artwork continues its ground colour */
  background: linear-gradient(
    to bottom,
    var(--field) calc(100% - var(--lift)),
    var(--ground) calc(100% - var(--lift))
  );
}

.hero-frame {
  display: block;
  width: 100%;
  height: 100%;
}

/* Anchored near the bottom so the artwork's ground meets the viewport edge;
   leftover space falls at the top, where the background matches the artwork. */
.hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center calc(100% - var(--lift));
}

/* Small screens: lift the artwork clear of browser chrome and the home indicator
   so its bottom edge stays fully visible. */
@media (max-width: 768px) {
  :root {
    --lift: calc(env(safe-area-inset-bottom, 0px) + 3dvh);
  }
}