:root {
  color-scheme: dark;
  background: #000;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.mobile-band { display: none; }

/* Keep the immersive portrait crop, but replace the cropped image-baked label
   with a responsive label spanning the viewport. */
@media (max-width: 820px) and (orientation: portrait) {
  img { object-position: 43% center; }

  .mobile-band {
    position: absolute;
    top: 61%;
    left: 0;
    display: grid;
    width: 100%;
    height: 15.2%;
    min-height: 92px;
    place-items: center;
    overflow: hidden;
    background: #fff;
    color: #050505;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2rem, 10vw, 4.75rem);
    font-weight: 300;
    letter-spacing: clamp(.16em, 2vw, .32em);
    line-height: 1;
    text-align: center;
    text-indent: clamp(.16em, 2vw, .32em);
    white-space: nowrap;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .mobile-band {
    min-height: 82px;
    font-size: clamp(1.75rem, 9.5vw, 2.35rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  img { object-position: center 48%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}