.book-stack {
  --book-stack-left: 55%;
  --book-stack-bottom: 8.25%;
  --book-stack-width: 10%;
  --book-stack-height: 3.7%;
  --book-stack-scale: 4.7;
  position: absolute;
  left: var(--book-stack-left);
  bottom: var(--book-stack-bottom);
  width: var(--book-stack-width);
  height: var(--book-stack-height);
  pointer-events: none;
  transform: scale(var(--book-stack-scale));
  transform-origin: left bottom;
}

.book-stack__book {
  /* Book tuning model: position within the stack box, explicit size, and back-to-front z. */
  --book-left: 0%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 1;
  --book-origin-x: 50%;
  --book-origin-y: 100%;
  --book-hover-x: -3px;
  --book-hover-y: 3px;
  --book-hover-rotate: -0.5deg;
  bottom: 0;
  left: var(--book-left);
  width: var(--book-width);
  height: var(--book-height);
  z-index: var(--book-z);
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(0) translateY(0) rotate(0deg);
  transform-origin: var(--book-origin-x) var(--book-origin-y);
  transition: transform 180ms ease;
  will-change: transform;
}

.book-stack__book:hover {
  transform:
    translateX(var(--book-hover-x))
    translateY(var(--book-hover-y))
    rotate(var(--book-hover-rotate));
}

body[data-mobile] .book-stack {
  display: none !important;
}

.book-stack__book--momo-orange {
  --book-left: 0%;
  --book-width: auto;
  --book-height: 78.1%;
  --book-z: 1;
}

.book-stack__book--brokerage-closure {
  --book-left: 3.8%;
  --book-width: auto;
  --book-height: 81.2%;
  --book-z: 2;
}

.book-stack__book--this-is-water {
  --book-left: 7.8%;
  --book-width: auto;
  --book-height: 73.7%;
  --book-z: 3;
}

.book-stack__book--momo-red {
  --book-left: 11.4%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 4;
}

.book-stack__book--heros-journey {
  --book-left: 16.3%;
  --book-width: auto;
  --book-height: 96.6%;
  --book-z: 5;
}

.book-stack__book--runnin-down-dream {
  --book-left: 21%;
  --book-width: auto;
  --book-height: 81.2%;
  --book-z: 6;
}

.book-stack__book--ex-machina {
  --book-left: 25%;
  --book-width: auto;
  --book-height: 81.2%;
  --book-z: 7;
}

.book-stack__book--scaling-people {
  --book-left: 29%;
  --book-width: auto;
  --book-height: 81.2%;
  --book-z: 8;
}

.book-stack__book--becoming-person {
  --book-left: 33%;
  --book-width: auto;
  --book-height: 81.2%;
  --book-z: 9;
}

.book-stack__book--lenny-newsletter {
  --book-left: 37%;
  --book-width: auto;
  --book-height: 78.1%;
  --book-z: 10;
}

.book-stack__book--revolt-public {
  --book-left: 40.5%;
  --book-width: auto;
  --book-height: 96.6%;
  --book-z: 11;
}

.book-stack__book--bowling-alone {
  --book-left: 45%;
  --book-width: auto;
  --book-height: 90.3%;
  --book-z: 12;
}

.book-stack__book--outsider-camu {
  --book-left: 49.5%;
  --book-width: auto;
  --book-height: 73.7%;
  --book-z: 13;
}

.book-stack__book--eigen-i {
  --book-left: 53%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 14;
}

.book-stack__book--eigen-ii {
  --book-left: 57.8%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 15;
}

.book-stack__book--eigen-iii {
  --book-left: 62.6%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 16;
}

.book-stack__book--momo-slanted-books {
  --book-left: 65%;
  --book-width: auto;
  --book-height: 100%;
  --book-z: 17;
  pointer-events: none;
  transition: none;
  will-change: auto;
}

.book-stack__book--momo-slanted-books:hover {
  transform: translateX(0) translateY(0) rotate(0deg);
}
