/* Small art-direction overrides kept separate from the main compressed stylesheet. */
.world-panel.freddie .world-art img {
  object-position: center 22%;
}

.world-panel.henrietta {
  --world: #d7c7ea;
}

.world-panel.knight {
  --world: #9fb7d4;
}

.world-panel.isadora .world-art img {
  object-fit: contain;
  background: var(--paper);
  mix-blend-mode: normal;
}

.world-panel.henrietta .world-art img,
.world-panel.knight .world-art img {
  object-fit: cover;
  object-position: center;
  background: transparent;
  mix-blend-mode: normal;
  transform: scale(1.04);
}

.author-photo {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: center 38%;
}

/* Keep the hero sky decorative, then place the book and heading on one row. */
.hero-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (min-width: 1001px) {
  .storybook {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .hero-copy {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Characters tucked into the open page margins. */
.section-character {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 12px rgba(23, 50, 77, .2));
}

.section-character.soft-edge {
  border-radius: 0;
  mix-blend-mode: normal;
}

/* Transparent hero character: no oval mask or fixed crop box. */
.hero-unicorn {
  width: 72%;
  height: auto;
  top: 2%;
  left: -8%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  mix-blend-mode: normal;
}

/* Free-floating kennel: sit in the open cream margin without dimming or distortion. */
.bookshelf-section {
  z-index: 11;
  overflow: visible;
}

.bookshelf-section > .flying-kennel {
  position: absolute;
  z-index: 20;
  width: min(23vw, 390px);
  height: auto;
  top: -105px;
  right: 2.5vw;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 16px rgba(23, 50, 77, .2));
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 1000px) {
  .bookshelf-section > .flying-kennel {
    width: min(34vw, 270px);
    top: -70px;
    right: 2vw;
  }
}

@media (max-width: 650px) {
  .bookshelf-section > .flying-kennel {
    display: none;
  }
}

.books-henrietta { width: 155px; left: 2.2%; top: 130px; transform: rotate(-8deg); }
.books-molly { width: 150px; right: 1.6%; top: 570px; transform: rotate(7deg); }
.books-toby { width: 120px; left: 2.5%; bottom: 14px; transform: rotate(6deg); }
.adventures-trev { width: 145px; right: 1.4%; bottom: 18px; transform: rotate(-5deg); }
.about-herbert { width: 145px; right: .8%; bottom: 30px; transform: rotate(6deg); }
.reviews-pip { width: 220px; right: 1.5%; top: 105px; transform: rotate(7deg); }
.club-leo { width: 285px; right: 1%; bottom: -8px; transform: rotate(-3deg); }
.contact-trev { width: 125px; left: 1.5%; top: 115px; transform: rotate(-8deg); }
.contact-lady { width: 430px; right: .4%; bottom: -8px; transform: rotate(4deg); }

.about,
.reviews,
.contact {
  position: relative;
  overflow: hidden;
}

.bookshelf-section > .section-heading,
.bookshelf,
.about > :not(.section-character),
.reviews > :not(.section-character),
.contact > :not(.section-character) {
  position: relative;
  z-index: 4;
}

@media (max-width: 1350px) and (min-width: 1001px) {
  .section-character { opacity: .72; }
  .books-henrietta, .books-molly, .about-herbert { width: 105px; }
  .adventures-trev { width: 110px; }
  .club-leo { width: 205px; }
  .reviews-pip { width: 165px; }
  .contact-lady { width: 300px; }
  .contact-trev, .books-toby { width: 90px; }
}

@media (max-width: 1000px) {
  .section-character { display: none; }
}

footer > p {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.creator-credit {
  white-space: nowrap;
}

.creator-credit b {
  color: var(--coral);
  font-size: 1.15em;
}

@media (max-width: 650px) {
  footer > p {
    flex-direction: column;
    gap: 6px;
  }
}

/* Keep every bookshelf card on the same baseline. */
.shelf-book:nth-child(2n) {
  transform: none;
}

.shelf-book:nth-child(2n):hover {
  transform: translateY(-12px) rotate(1deg);
}

/* Gentle crossfade while the world scene swaps. */
.world-art img {
  transition: opacity .35s ease;
}

.world-art img.is-swapping {
  opacity: 0;
}

/* Clear, playful keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.hero a:focus-visible,
.adventures a:focus-visible,
.adventures button:focus-visible,
.story-club :focus-visible,
footer a:focus-visible {
  outline-color: var(--yellow);
}

/* Back-to-top balloon. */
.back-to-top[hidden] {
  display: none;
}

.back-to-top {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 74px;
  height: 74px;
  background: var(--yellow);
  color: var(--navy);
  border: 3px solid var(--navy);
  border-radius: 50% 46% 52% 48%;
  box-shadow: 4px 5px 0 var(--navy);
  text-decoration: none;
  text-align: center;
  opacity: 0;
  transform: translateY(20px) rotate(-6deg);
  pointer-events: none;
  transition: .3s opacity, .3s transform;
}

.back-to-top span {
  font: 800 1.5rem/1 var(--heading);
}

.back-to-top small {
  font: 800 .5rem/1.1 var(--body);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.back-to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-4px) rotate(4deg);
}

@media (max-width: 650px) {
  .back-to-top {
    width: 60px;
    height: 60px;
    right: 14px;
    bottom: 14px;
  }

  .back-to-top small {
    display: none;
  }
}

@media (min-width: 1001px) {
  .bookshelf {
    grid-template-columns: repeat(6, minmax(135px, 1fr));
    gap: 14px;
  }

  .world-panel {
    height: 610px;
    min-height: 610px;
  }

  .shelf-book > a {
    position: relative;
    z-index: 4;
    transform: translateY(20px);
  }
}