/*
 * Shared screen layout for every MS book.
 *
 * The manuscripts keep their individual typography and artwork, while this
 * file gives every template the same Vol. III shelf: three page cards on a
 * desktop and one readable page on narrower screens. Print rules remain owned
 * by each manuscript.
 */

@media screen {
  html {
    overflow-x: hidden;
  }

  body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  /* Some manuscripts wrap their pages; flatten those wrappers into the grid. */
  body > :is(.book, .stage, .wrap) {
    display: contents !important;
  }

  body > .page,
  body > :is(.book, .stage) > .page,
  body > .wrap > :is(.cover, .part, .chapter, .colophon) {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }

  /* The two long-form templates become the same discrete page-card format. */
  body > .wrap > :is(.cover, .part, .chapter, .colophon) {
    min-height: 792px !important;
    padding: 56px !important;
    border: 1px solid var(--hairline, #e7e5e4) !important;
    background: var(--paper, #fafaf9);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  }
}

@media screen and (min-width: 1100px) {
  body {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1792px;
    margin-inline: auto !important;
    gap: 24px !important;
    padding: 32px !important;
  }

  body > .page,
  body > :is(.book, .stage) > .page {
    height: auto !important;
    min-height: 792px !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 1099px) {
  body > .page,
  body > :is(.book, .stage) > .page,
  body > .wrap > :is(.cover, .part, .chapter, .colophon) {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body > .wrap > :is(.cover, .part, .chapter, .colophon) {
    padding: 32px !important;
  }
}

@media screen and (max-width: 640px) {
  body {
    gap: 12px !important;
    padding: 8px !important;
  }

  body > .wrap > :is(.cover, .part, .chapter, .colophon) {
    padding: 20px !important;
  }

  /* Keep bespoke full-bleed covers inside the single mobile column. */
  :is(.titlepage, .titlepg, .fm, .cover) h1,
  :is(.tp-title, .cover-title, .cv-title) {
    max-width: 100% !important;
    font-size: 40px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }
}