.welcome-card { display: none; }

@media (max-width: 650px) {
  body.cover-active .book-nav,
  body.cover-active .inside-page .scene-heading,
  body.cover-active .inside-page .welcome-card,
  body.cover-active .inside-page .turn-back,
  body.cover-active .inside-page .next-page {
    display: none !important;
  }

  .cover-active .cover-heading {
    right: 6%;
  }

  .cover-active .cover-heading h1 {
    font-size: clamp(52px, 15vw, 68px);
  }

  .cover-active .cover-wordmark,
  .cover-active .cover-heading small,
  .cover-active .cover-heading p {
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: .07em;
  }

  .cover-active .turn-page {
    display: none;
  }

  body.cover-active::after {
    content: "→";
    position: fixed;
    z-index: 3000;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    color: #ffca4e;
    font: 500 27px/1 "JetBrains Mono", monospace;
    pointer-events: none;
    animation: cover-arrow 2.4s ease-in-out infinite;
  }

  .welcome-card {
    display: block;
    position: absolute;
    z-index: 30;
    top: 22%;
    left: 5%;
    width: min(310px, 82vw);
    padding: 15px 16px 16px;
    border: 4px solid #18100a;
    background: #f5f1e8;
    box-shadow: 6px 6px #18100a;
  }

  .welcome-card strong {
    display: block;
    color: #c4531e;
    font: 600 10px/1.2 "JetBrains Mono", monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .welcome-card p {
    margin: 8px 0 0;
    color: #18100a;
    font: 500 14px/1.45 "JetBrains Mono", monospace;
  }
}

@keyframes cover-arrow {
  0%, 100% { opacity: .42; transform: translateX(-53%); }
  50% { opacity: .82; transform: translateX(-47%); }
}

@media (prefers-reduced-motion: reduce) {
  body.cover-active::after { animation: none; opacity: .65; transform: translateX(-50%); }
}