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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: #fff;
  color: #000;
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100dvh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: 3vh 4vh;
  height: 100dvh;
  margin: 0 auto;
}

.player-wrap {
  flex: 0 0 auto;
  height: 94vh;
  aspect-ratio: 1731 / 3107;
  max-width: 100%;
}

.player {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1731 / 3107;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.player.is-ready {
  opacity: 1;
}

.player__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.player__reel {
  z-index: 0;
}

.player__body {
  z-index: 1;
}

.player__spinner-stack {
  z-index: 2;
}

.player__spinner-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  visibility: hidden;
}

.player__spinner-frame.is-active {
  visibility: visible;
}

.player__press {
  z-index: 4;
}

.player__press[hidden] {
  display: none;
}

.player__btn {
  position: absolute;
  z-index: 5;
}

.player__btn[data-action="rewind"] {
  left: 25.25%;
  top: 84.16%;
  width: 15.66%;
  height: 12.71%;
}

.player__btn[data-action="play"] {
  left: 38.3%;
  top: 84.13%;
  width: 15.42%;
  height: 12.68%;
}

.player__btn[data-action="ff"] {
  left: 51.24%;
  top: 84.07%;
  width: 15.14%;
  height: 12.58%;
}

.player__btn[data-action="stop"] {
  left: 64.07%;
  top: 84.07%;
  width: 15.14%;
  height: 12.71%;
}

.shop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
  flex: 0 0 auto;
}

.shop__image {
  display: block;
  line-height: 0;
}

.shop__image img {
  width: 42vh;
  max-width: 100%;
  height: auto;
}

.shop__email {
  display: block;
  line-height: 0;
}

.shop__email img {
  width: 9vh;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.poster {
  flex: 0 0 auto;
  height: 86vh;
  display: flex;
  align-items: center;
}

.poster__link {
  display: block;
  line-height: 0;
  height: 100%;
}

.poster__link img {
  height: 100%;
  width: auto;
  max-width: 100%;
}

@media (max-width: 820px) {
  .page {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 100dvh;
    width: 100%;
    padding: 24px 20px;
    gap: 36px;
  }

  /* Promote the shop's children into the page's column so the email icon can be
     ordered to the very bottom (after the poster), matching the mobile mockup. */
  .shop {
    display: contents;
  }

  .player-wrap {
    order: 1;
    height: auto;
    width: min(420px, 90vw);
  }

  .shop__image {
    order: 2;
  }

  .shop__image img {
    width: min(380px, 84vw);
  }

  .poster {
    order: 3;
    height: auto;
    width: min(380px, 84vw);
  }

  .poster__link {
    height: auto;
  }

  .poster__link img {
    height: auto;
    width: 100%;
  }

  .shop__email {
    order: 4;
  }

  .shop__email img {
    width: 64px;
  }
}