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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #050505;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  color: #fff;
}

.poster-shell {
  width: min(100%, 1024px);
  background: #050505;
  overflow: hidden;
}

.poster-art {
  position: relative;
  width: 100%;
  line-height: 0;
}

.poster {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  cursor: pointer;
  background: transparent;
  border-radius: 12px;
}

/* Percent coordinates mapped to the approved poster artwork. */
.phone {
  left: 18%;
  top: 73.5%;
  width: 76%;
  height: 10%;
}

.address {
  left: 4%;
  top: 88%;
  width: 55%;
  height: 9%;
}

.hotspot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

.mobile-fill {
  display: none;
}

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

@media (max-width: 640px) {
  html, body {
    min-height: 100svh;
  }

  body {
    min-height: 100svh;
    align-items: stretch;
  }

  .poster-shell {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  .poster-art {
    flex: 0 0 auto;
  }

  /* Decorative continuation for tall phone screens. No extra text is added. */
  .mobile-fill {
    display: block;
    flex: 1 1 auto;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(224, 24, 33, .9);
    background:
      linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.82) 60%, #050505 100%),
      url("assets/brads-towing-poster.png") center bottom / 100% auto no-repeat;
  }

  .mobile-fill::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: url("assets/brads-towing-poster.png") center bottom / 115% auto no-repeat;
    filter: blur(16px);
    opacity: .28;
    transform: scale(1.08);
  }

  .mobile-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 0%, rgba(220, 20, 30, .24), transparent 52%),
      linear-gradient(180deg, rgba(0,0,0,.25), #050505 92%);
  }
}

@media (min-width: 1025px) {
  body {
    padding: 18px 0;
  }
  .poster-shell {
    box-shadow: 0 0 60px rgba(220, 0, 0, .18);
  }
}