/* Painted illustrations share the existing layout and leave game rules alone. */
.hero-art.storybook-art {
  min-height: 0;
  aspect-ratio: 3 / 2;
  border: 1px solid #d7c8ad;
  border-radius: 22px 30px 24px 18px;
  background: #ece5d6;
  box-shadow: 0 7px 0 #e5ddc9;
}
.storybook-cover,
.storybook-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.storybook-cover img { object-fit: cover; }
.storybook-art .hero-bubble {
  left: auto;
  right: 12px;
  bottom: 14px;
  max-width: 170px;
  font-size: 15px;
  background: #fffaf0;
  box-shadow: 0 3px 0 #122f3e35;
}
.storybook-art .hero-bubble::before { background: #fffaf0; }
.story-illustration {
  float: right;
  width: 46%;
  max-width: 340px;
  margin: 4px 0 22px 26px;
  break-inside: avoid;
}
.story-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px 13px 7px 12px;
  background: #e9e0ce;
  box-shadow: 0 3px 0 #d7c8ad;
}
.story-illustration figcaption {
  margin-top: 8px;
  color: #625844;
  font: italic 14px/1.5 Georgia, serif;
  letter-spacing: normal;
  word-spacing: normal;
}
.story::after { content: ''; display: block; clear: both; }
.story h2 { clear: both; }
@media (max-width: 600px) {
  .hero-art.storybook-art { max-height: 270px; }
  .storybook-art .hero-bubble { padding: 8px 12px; font-size: 14px; }
  .story-illustration { float: none; width: 100%; max-width: 440px; margin: 12px 0 24px; }
}
@media print {
  .story-illustration img { box-shadow: none; }
}