/* V30: rearrange original comic panels into a wide reading layout.
   Source artwork and dialogue are unchanged. Panel positions are measured
   in the original images; only the browser viewport changes. */
.step.step-comic {
  padding-inline: clamp(16px, 2.5vw, 44px);
}
.comic-image.comic-landscape {
  width: 100%;
  max-width: none;
  margin: 0 auto 28px;
  padding: clamp(8px, 1vw, 14px);
  background: #faf7f0;
  color: #123c29;
}
.comic-landscape-intro {
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.1rem, 1.9vw, 1.65rem);
  text-align: center;
  line-height: 1.2;
}
.comic-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, .75vw, 12px);
  align-items: stretch;
}
.comic-panel {
  min-width: 0;
  display: flex;
  align-items: center;
}
.comic-panel-crop {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.comic-panel-crop > img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.comic-landscape-credit {
  padding: 12px 0 2px;
  color: #123c29;
  text-align: center;
  font: 700 clamp(1rem, 2vw, 1.8rem)/1.2 Georgia, 'Times New Roman', serif;
}
.comic-landscape > .comic-original {
  display: none;
}
@media (min-width: 1321px) {
  /* Only the comic expands beyond the normal page column. */
  .comic-image.comic-landscape {
    width: calc(100vw - 48px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 800px) {
  .comic-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .comic-panels { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .comic-landscape-intro { font-size: 1.1rem; }
  .comic-landscape-credit { font-size: 1.25rem; }
}
@media print {
  .step.step-comic { padding: 20pt 0; }
  .comic-image.comic-landscape { width: 100%; max-width: 450px; position: static; transform: none; padding: 0; margin: 0 auto; background: white; break-inside: avoid; }
  .comic-landscape .comic-panels,
  .comic-landscape .comic-landscape-intro,
  .comic-landscape .comic-landscape-credit { display: none; }
  .comic-landscape > .comic-original { display: block; width: 100%; height: auto; }
}