/* Story pages as an open book on laptop and desktop screens.
   Loaded after Codex's stylesheets on the seven story pages in this proposal's
   preview (build_preview.py adds the link). The picture is the left page and
   stays in view; the story is the right page. Phones keep the single column. */

@media (min-width: 1000px) {
  .reader-page main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(44px, 5vw, 96px); }
  .reader-page .reader-top, .reader-page .reader-next { grid-column: 1 / -1; }

  /* Left page: the picture, held still while the story is read */
  .reader-page .reader-hero { grid-column: 1; grid-row: 2 / span 2; align-self: start; position: sticky; top: 24px; max-width: none; margin: 48px 0 64px; padding: 0 0 0 var(--gutter); }
  .reader-page .reader-hero img { box-sizing: border-box; width: 100%; height: min(660px, calc(100vh - 150px)); max-height: none; padding: clamp(22px, 3vw, 48px); object-fit: contain; background: #e8ddc9; }
  .reader-wedding .reader-hero img, .reader-heirloom .reader-hero img { padding: 0; object-fit: cover; }
  .reader-heirloom .reader-hero img { object-position: 50% 30%; }
  .reader-confluence .reader-hero img { background: #281b2b; padding-inline: 14px; }
  /* The two wide maps: crop to the story's own part of the world, as on the homepage */
  .reader-migration .reader-hero img { padding: 0; object-fit: cover; object-position: 31% 50%; background: #281b2b; }
  .reader-escape .reader-hero img { padding: 0; object-fit: cover; object-position: 39% 50%; background: #0b111c; }
  .reader-business .reader-hero img { background: #e7dbc3; }
  .reader-music .reader-hero img { background: #d6cfba; }
  .reader-page .reader-hero figcaption { margin-top: 12px; font: 12px/1.55 var(--sans); color: #5d4a4f; }

  /* Right page: the story */
  .reader-page .reader-heading { grid-column: 2; grid-row: 2; max-width: 640px; margin: 0; padding: 64px var(--gutter) 0 0; text-align: left; }
  .reader-page .reader-heading h1 { font-size: clamp(46px, 4.4vw, 70px); }
  .reader-page .reader-heading > p:last-child { max-width: none; margin: 20px 0 0; font-size: 21px; }
  .reader-page .reader-prose { grid-column: 2; grid-row: 3; max-width: 640px; margin: 30px 0 72px; padding: 0 var(--gutter) 0 0; }
  .reader-page .reader-prose > p { font-size: 19.5px; line-height: 1.75; margin-bottom: 22px; }
  .reader-page .reader-secondary { max-width: 220px; margin: 30px 0 34px; }
  .reader-page .reader-secondary img { max-height: 360px; object-fit: contain; object-position: left top; }
  .reader-page .reader-score { margin-top: 30px; }
}

/* Wide screens: the wedding's second picture sits in the margin beside the text, as in the
   printed book. The watch's keepers chart is text, so it stays under the story at a readable size. */
@media (min-width: 1360px) {
  .reader-wedding .reader-prose { display: grid; grid-template-columns: minmax(0, 1fr) 170px; column-gap: 32px; align-items: start; }
  .reader-wedding .reader-prose > * { grid-column: 1; }
  .reader-wedding .reader-prose > .reader-secondary { grid-column: 2; grid-row: 1 / span 6; max-width: none; margin: 6px 0 0; }
}
@media (min-width: 1000px) {
  .reader-heirloom .reader-secondary { max-width: 360px; }
  .reader-heirloom .reader-secondary img { max-height: none; }
}