/* One proportional layout for all six homepage binding illustrations. */
body[data-design] .hero-stage:not(.hero-single) {
  isolation: isolate;
}

body[data-design] .hero-stage:not(.hero-single) .hero-book {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(29%, 210px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  margin: 0;
  transform-origin: 50% 100%;
  transform: translate(calc(-50% + var(--fan-x)), calc(-50% + var(--fan-y))) rotate(var(--fan-r)) !important;
  transition: none !important;
  pointer-events: none;
}

body[data-design] .hero-stage:not(.hero-single) .hero-book img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

/* Equal 36%-of-book-width steps and six-degree rotations; mirrored pairs. */
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(1) { --fan-x: -90%; --fan-y: 6%; --fan-r: -15deg; z-index: 1; }
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(2) { --fan-x: -54%; --fan-y: 2%; --fan-r: -9deg; z-index: 2; }
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(3) { --fan-x: -18%; --fan-y: 0%; --fan-r: -3deg; z-index: 3; }
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(4) { --fan-x: 18%; --fan-y: 0%; --fan-r: 3deg; z-index: 3; }
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(5) { --fan-x: 54%; --fan-y: 2%; --fan-r: 9deg; z-index: 2; }
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(6) { --fan-x: 90%; --fan-y: 6%; --fan-r: 15deg; z-index: 1; }

/* A restrained display adjustment, confined to the decorative hero image. */
body[data-design] .hero-stage .hero-book[data-binding="green"] img {
  filter: saturate(1.65) brightness(1.12);
}