@page {
  size: Letter portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .book {
    display: block;
    padding: 0;
  }

  .spread {
    display: contents;
  }

  .page {
    width: var(--page-width);
    height: var(--page-height);
    margin: 0;
    overflow: hidden;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .screen-only {
    display: none !important;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /*
    Keep headings attached to the material that follows them.
    These rules do not force an entire long section onto one page.
  */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .page-title,
  .section-title,
  .panel__title,
  .remember-panel__head {
    break-after: avoid;
    page-break-after: avoid;
  }

  /*
    Protect compact visual units from being split during multi-page export.
    Because each HTML page is already a fixed physical page, these rules mainly
    guard against browser print-engine inconsistencies.
  */
  img,
  svg,
  figure,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  blockquote,
  .section,
  .panel,
  .phase-ribbon,
  .tool-ribbon,
  .context-list__item,
  .numbered-tool-list li,
  .scripture-quote,
  .ornament-rule,
  .writing-area,
  .label-line {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  .writing-area,
  .panel,
  .phase-ribbon,
  .tool-ribbon,
  svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}