.home-menu-book {
  --book-ink: #183b2d;
  --book-muted: #718078;
  --book-line: #d9e0da;
  --book-gap: 1rem;
  --book-gap-half: calc(var(--book-gap) / 2);
  --book-turn-overlap: calc(var(--book-gap) * 2);
}

.home-menu-book-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--book-gap);
  height: 38rem;
}

.home-menu-book-page {
  box-sizing: border-box;
  height: 38rem;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--book-line);
  background: #fbfaf6;
  box-shadow: 0 24px 70px rgba(22, 48, 37, .12);
  will-change: transform, opacity;
}

.home-menu-book-page.is-entering-next {
  animation: home-menu-book-enter-next .42s cubic-bezier(.22, .8, .24, 1) both;
}

.home-menu-book-page.is-entering-previous {
  animation: home-menu-book-enter-previous .42s cubic-bezier(.22, .8, .24, 1) both;
}

.home-menu-book-page[hidden] {
  display: none;
}

.home-menu-book-turn-sheet {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: calc(50% - .5rem);
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  perspective: 1800px;
  animation: home-menu-book-turn-next .82s cubic-bezier(.2, .7, .2, 1) both;
}

.home-menu-book-turn-sheet::after {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  content: '';
  opacity: .24;
}

.home-menu-book-turn-sheet.is-turning-next::after {
  left: 0;
  background: linear-gradient(90deg, rgba(24, 59, 45, .22), transparent);
}

.home-menu-book-turn-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--book-line);
  background: #fbfaf6;
  backface-visibility: hidden;
}

.home-menu-book-turn-back {
  transform: rotateY(180deg);
}

.home-menu-book-turn-sheet.is-turning-previous {
  right: auto !important;
  left: 0 !important;
  width: 50% !important;
  transform-origin: 100% 50% !important;
  animation: home-menu-book-turn-previous-left .82s cubic-bezier(.2, .7, .2, 1) both;
}

.home-menu-book-turn-sheet.is-turning-previous::after {
  right: 0;
  background: linear-gradient(270deg, rgba(24, 59, 45, .22), transparent);
}

.home-menu-book-turn-sheet.is-turning-previous .home-menu-book-turn-back {
  transform: rotateY(-180deg);
}

.home-menu-book-turn-sheet.is-turning-previous .home-menu-book-turn-face {
  width: calc(100% - var(--book-gap-half));
}

.home-menu-book-turn-sheet.is-turning-previous .home-menu-book-turn-front {
  transform: none;
}

@keyframes home-menu-book-turn-next {
  from { transform: translateX(0) rotateY(0deg); }
  to { transform: translateX(calc(var(--book-gap) * -1)) rotateY(-180deg); }
}

@keyframes home-menu-book-turn-previous-left {
  from { transform: translateX(calc(var(--book-turn-overlap) * -1)) rotateY(0deg); }
  to { transform: translateX(0) rotateY(180deg); }
}

.home-menu-book-cover {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 42%, #fffdf5 0, #f1eee4 100%);
}

.home-menu-book-cover h3 {
  max-width: 35rem;
  margin: 1.2rem 0 .8rem;
  color: var(--book-ink);
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.05;
}

.home-menu-book-cover p,
.home-menu-book-section-description {
  max-width: 34rem;
  margin: 0;
  color: var(--book-muted);
  font-size: .6rem;
  line-height: 1.65;
}

.home-menu-book-mark {
  color: var(--book-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-menu-book-rule {
  width: 4rem;
  height: 1px;
  margin: 2rem 0 1rem;
  background: var(--book-ink);
}

.home-menu-book-hint {
  color: var(--book-muted);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-menu-book-section + .home-menu-book-section {
  margin-top: 1.1rem;
}

.home-menu-book-page-header {
  position: relative;
  margin-bottom: .55rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--book-line);
}

.home-menu-book-page-header h3 {
  margin: 0;
  color: var(--book-ink);
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400;
}

.home-menu-book-section-header h4 {
  margin: 0 0 .25rem;
  color: var(--book-ink);
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
}

.home-menu-book-continuation {
  color: var(--book-muted);
  font-family: inherit;
  font-size: .65em;
  font-style: italic;
  white-space: nowrap;
}

.home-menu-book-section-header p {
  margin: 0 0 .2rem;
}

.home-menu-book-page-number {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--book-muted);
  font-size: .75rem;
}

.home-menu-book-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.home-menu-book-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--book-line);
}

.home-menu-book-item h5 {
  margin: 0;
  color: var(--book-ink);
  font-size: .62rem;
  font-weight: 700;
}

.home-menu-book-item p {
  margin: .15rem 0 0;
  color: var(--book-muted);
  font-size: .52rem;
  line-height: 1.4;
}

.home-menu-book-price {
  flex: 0 0 auto;
  color: var(--book-ink);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-menu-book-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-top: 1.1rem;
}

.home-menu-book-button {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--book-line);
  color: var(--book-ink);
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .2s ease, color .2s ease;
}

.home-menu-book-button:hover:not(:disabled) {
  color: #fff;
  background: var(--book-ink);
}

.home-menu-book-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.home-menu-book-counter,
.home-menu-book-note {
  color: var(--book-muted);
  font-size: .75rem;
}

.home-menu-book-note {
  margin-top: 1rem;
}

@keyframes home-menu-book-enter-next {
  from { opacity: 0; transform: translateX(8%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes home-menu-book-enter-previous {
  from { opacity: 0; transform: translateX(-8%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-menu-book-page.is-entering-next,
  .home-menu-book-page.is-entering-previous {
    animation: none;
  }

  .home-menu-book-turn-sheet {
    animation: none;
  }
}

@media (max-width: 700px) {
  .home-menu-book-stage,
  .home-menu-book-page {
    height: 42rem;
  }

  .home-menu-book-stage {
    display: block;
  }

  .home-menu-book-turn-sheet {
    display: none;
  }
}