.catalogue-splash {
  --scrolllit-literary-red: #c01212;
  --scrolllit-literary-red-dark: #a30f10;
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: rgb(25 20 14 / .68);
}

.catalogue-splash[hidden] {
  display: none;
}

.catalogue-splash-card {
  /* The artwork is square. Reserve room for both actions so the dialog fits at browser zoom. */
  width: min(100%, 30rem, calc(100svh - 9rem));
}

.referral-link-expired-splash .catalogue-splash-card {
  width: min(100%, 32rem, calc(100svh - 14rem));
}

.catalogue-splash-artwork {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(1rem, 3vw, 1.75rem);
  box-shadow: 0 1.4rem 3.5rem rgb(0 0 0 / .35);
}

.catalogue-splash-message {
  margin: 1.25rem auto 0;
  max-width: 28rem;
  color: #fffdf6;
  text-align: center;
}

.catalogue-splash-message h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
}

.catalogue-splash-message p {
  margin: .5rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.referral-link-expired-attribution {
  color: rgb(255 253 246 / .78);
  font-size: .8125rem !important;
}

.referral-link-expired-splash .catalogue-splash-message,
.referral-link-expired-splash .catalogue-splash-actions {
  margin-top: .875rem;
}

.catalogue-splash-actions {
  display: grid;
  gap: .5rem;
  margin: .875rem auto 0;
  width: min(100%, 24rem);
}

.catalogue-splash-button {
  width: 100%;
  min-height: 2.75rem;
  border: 2px solid var(--scrolllit-literary-red);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1rem;
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.catalogue-splash-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgb(93 16 18 / 0.18);
}

.catalogue-splash-button:focus-visible {
  outline: 3px solid #14213d;
  outline-offset: 3px;
}

.catalogue-splash-button-primary {
  background: var(--scrolllit-literary-red);
  color: #fff;
}

.catalogue-splash-button-primary:hover {
  background: var(--scrolllit-literary-red-dark);
}

.catalogue-splash-button-secondary {
  background: #fffdf6;
  color: var(--scrolllit-literary-red-dark);
}

@media (max-width: 25rem) {
  .catalogue-splash-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalogue-splash-button {
    transition: none;
  }
}