/* The supplied cover artwork is the visual source of truth for the opening view. */
.cover.cover-image {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  align-content: center;
  min-height: 100svh;
  padding: clamp(8px, 1.2vw, 20px);
  overflow: hidden;
  background: #010813;
  color: white;
}

.cover.cover-image::before {
  display: none;
}

.cover-art {
  position: relative;
  width: min(100%, calc(100svh * 1.7768));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #010813;
  box-shadow: 0 28px 90px rgb(0 0 0 / 45%);
}

.cover-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.cover-institution {
  position: absolute;
  z-index: 2;
  top: 8.5%;
  right: 3.1%;
  width: 14.5%;
  padding: 1% 1.25%;
  border: 1px solid rgb(84 229 255 / 42%);
  border-radius: clamp(4px, 0.65vw, 11px);
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 30%);
}

.cover-institution img {
  display: block;
  width: 100%;
  height: auto;
}

.cover-hotspot {
  position: absolute;
  z-index: 2;
  height: 6.7%;
  border: 1px solid transparent;
  border-radius: clamp(4px, 0.7vw, 12px);
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms, box-shadow 180ms, background 180ms;
}

.cover-hotspot:hover {
  border-color: rgb(93 225 255 / 72%);
  background: rgb(18 193 225 / 5.5%);
  box-shadow: 0 0 28px rgb(58 210 241 / 22%), inset 0 0 18px rgb(58 210 241 / 8%);
}

.cover-hotspot:focus-visible {
  outline: 3px solid #54e5ff;
  outline-offset: 4px;
  background: rgb(2 20 37 / 32%);
  box-shadow: 0 0 30px rgb(84 229 255 / 55%);
}

.cover-open {
  left: 7.75%;
  top: 81.45%;
  width: 17.55%;
}

.cover-browse {
  left: 26.35%;
  top: 81.45%;
  width: 16.7%;
}

.cover-mobile-actions {
  display: none;
}

@media (max-width: 760px) {
  .cover.cover-image {
    align-content: center;
    min-height: 100svh;
    padding: 0 0 max(18px, env(safe-area-inset-bottom));
    overflow: auto;
  }

  .cover-art {
    width: 100%;
    box-shadow: none;
  }

  .cover-hotspot {
    display: none;
  }

  .cover-institution {
    top: 8%;
    right: 2.8%;
    width: 16%;
  }

  .cover-mobile-actions {
    display: grid;
    width: calc(100% - 28px);
    max-width: 560px;
    gap: 10px;
    margin: 18px auto 0;
    padding: 0;
  }

  .cover-mobile-actions button {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid #1d6387;
    border-radius: 8px;
    background: #06162a;
    color: #eaf7fb;
    cursor: pointer;
    font: 700 0.73rem var(--sans);
    letter-spacing: 0.055em;
    text-align: left;
    text-transform: uppercase;
  }

  .cover-mobile-actions button:first-child {
    border-color: #f5bd50;
    background: #f5bd50;
    color: #071525;
    box-shadow: 0 10px 30px rgb(245 189 80 / 20%);
  }

  .cover-mobile-actions button i {
    font-style: normal;
  }

  .cover-mobile-actions button:focus-visible {
    outline-color: #54e5ff;
  }
}