/* The personalized storybook cover — art full-bleed, title and names on a
   night band. Same design as the printed cover (lib/pdf.js drawFrontCover),
   used everywhere a book appears: hero, shelf, library, reader.
   Sizes in cqi so one component works from a 150px shelf to the hero. */

.storybook {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px 10px 10px 3px;
  background: #262345;
  box-shadow: 0 1px 2px rgba(22, 20, 48, 0.25), 0 16px 32px -10px rgba(22, 20, 48, 0.5);
}

.storybook img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the hinge: a crease where the cover meets the spine */
.storybook::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6%;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.16) 55%, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

.storybook-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5cqi 9cqi 6cqi;
  background: rgba(38, 35, 69, 0.84);
  color: #fbf4e7;
  text-align: center;
}

.storybook-title {
  display: block;
  font-family: "Young Serif", Georgia, serif;
  font-size: 7.2cqi;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.storybook-for {
  display: block;
  margin-top: 1.6cqi;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 8cqi;
  line-height: 1;
  color: #f2b25c;
}