/* Material signposts retain the approved composition and link targets. */
.paper-note {
  background-color: #d8bc91;
  background-image: url('../assets/images/swatches/atlas.webp');
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: #2b1a07;
  border: 1px solid #61462638;
  border-radius: 12px 17px 10px 15px;
  box-shadow: 0 3px 1px #56381b38, 2px 14px 22px #2b1a0720;
  padding-inline: 20px;
}
.paper-note::before {
  inset: 7px;
  height: auto;
  background: none;
  border: 1px solid #ffffff24;
  border-radius: 9px 13px 7px 11px;
  pointer-events: none;
}
.paper-note.note-two {
  background-color: #243f32;
  background-position: 100% 0%;
  color: #fff8e9;
}
.paper-note.note-three {
  background-color: #6f303b;
  background-position: 0% 100%;
  color: #fff8e9;
}
.paper-note.note-four {
  background-color: #b4c4ca;
  background-position: 100% 100%;
  color: #2b1a07;
}

/* One scaled canvas carries both the image and its page content. */
.spread-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-60.8%, -50%);
}
.spread-canvas > .open-spread-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}
.welcome-page {
  left: 62%;
  right: auto;
  top: 16%;
  width: 32.6%;
  height: 74%;
  padding: 40px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.welcome-page > p { max-width: 100%; }
.welcome-page h2 { font-size: clamp(42px, 4.5vw, 74px); }
.welcome-page > a { max-width: 100%; }
.welcome-star { top: 11%; right: 12%; }
.welcome-pieces {
  left: 26.8%;
  top: 16%;
  width: 32.5%;
  height: 74%;
}
.welcome-pieces > .handwritten {
  top: 17%;
  left: 5%;
  width: 90%;
  text-align: center;
  font-size: clamp(22px, 1.9vw, 30px);
  transform: rotate(-3deg);
}
.welcome-bag { left: 4%; top: 31%; width: 70%; height: 48%; }
.welcome-pouch { left: 66%; right: auto; top: 32%; width: 32%; height: 25%; }
.welcome-wallet { left: 66%; right: auto; top: 61%; bottom: auto; width: 32%; height: 23%; }

/* The label and cover now rotate around one shared centre. */
.conversation-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.conversation-folio {
  position: relative;
  height: 90%;
  max-width: 85%;
  aspect-ratio: 1086 / 1448;
  transform: rotate(-11deg);
}
.conversation-folio > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.conversation-folio > .conversation-note {
  left: 50%;
  top: 50%;
  width: 70%;
  padding: 24px 18px;
  font-size: clamp(27px, 2.4vw, 36px);
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
}

@media (max-width: 1100px) and (min-width: 761px) {
  .welcome-page { padding: 30px 20px; }
  .welcome-page > p { font-size: 14px; }
  .welcome-page > a { font-size: 23px; }
  .welcome-page h2 { font-size: 52px; }
  .conversation-folio > .conversation-note { font-size: 28px; padding-inline: 14px; }
}

@media (max-width: 760px) {
  .paper-note { padding-inline: 12px; border-radius: 9px 13px 7px 10px; }
  .spread-canvas { transform: translate(-78.3%, -50%); }
  .welcome-page {
    left: 62%;
    right: auto;
    top: 16%;
    width: 32.6%;
    height: 74%;
    padding: 28px 50px;
    background: transparent;
    border-radius: 0;
  }
  .welcome-page h2 { font-size: 45px; }
  .welcome-page > p { font-size: 13px; }
  .welcome-page > a { font-size: 23px; margin-top: 28px; }
  .welcome-star { top: 11%; right: 20%; }
  .conversation-folio { height: 90%; max-width: 82%; }
  .conversation-folio > .conversation-note { font-size: 27px; padding: 17px 12px; }
}

@media (max-width: 370px) {
  .welcome-page { padding-inline: 45px; }
  .welcome-page h2 { font-size: 42px; }
  .conversation-folio > .conversation-note { font-size: 25px; }
}

/* The closed and open images are complete objects, so only one may be painted.
   Visibility also removes the inactive image from hit testing without changing
   the spread dimensions used by layoutSpread(). */
.opening:not([data-stage='open']) .open-spread {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.opening[data-stage='open'] .open-spread {
  visibility: visible;
  opacity: 1;
}
.opening[data-stage='open'] :is(.closed-folio, .intro-copy, .intro-action, .opening-scroll) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.closed-folio {
  transform: rotate(calc(-20deg + var(--folio-place, 0) * 20deg));
}
@media (max-width: 760px) {
  .closed-folio {
    left: calc(47vw - var(--folio-place, 0) * 30vw);
    top: calc(42svh - var(--folio-place, 0) * 7svh);
    transform: rotate(calc(-19deg + var(--folio-place, 0) * 19deg));
  }
}