/* The book itself: on screen, a stack of A5 pages; in print, the pages. Set in Literata, made for reading books. */
#book {
  --paper: #FFFDF8;
  --type: #1d1c1a;
  --quiet: #6b675f;
  max-width: 600px; margin: 0 auto; padding: 0 0 56px;
}
.leaf {
  background: var(--paper); color: var(--type);
  font: 400 16px/1.65 var(--serif); font-optical-sizing: auto;
  padding: 44px 40px; margin-bottom: 18px; border-radius: 4px;
  box-shadow: var(--e2);
}
.leaf p { margin: 0 0 .9em; outline: none; overflow-wrap: anywhere; }
.leaf [contenteditable]:hover { background: rgba(245, 196, 0, .14); border-radius: 3px; }
.leaf [contenteditable]:focus { box-shadow: 0 0 0 2px #7A5A00; border-radius: 3px; background: none; }
.leaf ::selection { background: #FFF1B8; color: #1D1C1A; }
.title-leaf { min-height: 560px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.title-leaf h1 { margin: 0 0 14px; font: 500 34px/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; color: inherit; }
.title-leaf p { color: var(--quiet); font-style: italic; }
.dedication { text-align: center; font-style: italic; color: var(--quiet); padding-top: 64px; padding-bottom: 64px; }
.contents h2 { margin: 0 0 18px; font: 500 22px/1.2 var(--serif); color: inherit; letter-spacing: 0; }
.contents ol { margin: 0; padding-inline-start: 24px; }
.chapter-number { margin: 0 0 8px; color: var(--quiet); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.chapter h2 { margin: 0 0 28px; font: 500 28px/1.16 var(--serif); color: inherit; letter-spacing: -.012em; }
.chapter figure { margin: 22px 0; break-inside: avoid; }
.chapter img { display: block; width: 100%; max-height: 118mm; object-fit: contain; }
.chapter figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--quiet); font-style: italic; }
.colophon { color: var(--quiet); font-size: 12px; line-height: 1.45; }

/* Modern: the same text with a sans title, a heavy chapter head and photos to the page edge. */
.modern .leaf { font-size: 15.5px; line-height: 1.6; }
.modern .title-leaf { text-align: start; justify-content: flex-end; }
.modern .title-leaf h1 { font: 700 38px/1.06 var(--sans); letter-spacing: -.025em; }
.modern .title-leaf p { font: 400 15px/1.4 var(--sans); font-style: normal; }
.modern .chapter-number { font: 600 13px/1.2 var(--sans); letter-spacing: 0; }
.modern .chapter h2, .modern .contents h2 { font: 700 30px/1.08 var(--sans); letter-spacing: -.022em; }
.modern .chapter figure { margin-inline: -30px; }
.modern .chapter figcaption { margin-inline: 30px; font: 400 12.5px/1.4 var(--sans); font-style: normal; }

/* Picture book: big type for reading aloud, 1 short paragraph to a page and large photos. No contents page. */
.picture { --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.picture .leaf { font: 500 22px/1.45 var(--round); }
.picture .contents, .picture .chapter-number { display: none; }
.picture .title-leaf h1 { font: 700 40px/1.08 var(--round); letter-spacing: -.02em; }
.picture .title-leaf p { font: 400 17px/1.4 var(--round); font-style: normal; }
.picture .chapter h2 { font: 700 30px/1.12 var(--round); letter-spacing: -.015em; }
.picture .leaf p { margin-bottom: 1.4em; }
.picture .chapter figure { margin: 26px -30px; }
.picture .chapter img { max-height: none; border-radius: 0; }
.picture .chapter figcaption { margin-inline: 30px; font: 400 14px/1.4 var(--round); font-style: normal; }
.picture .colophon { font: 400 13px/1.45 var(--round); }

@page { size: 148mm 210mm; margin: 20mm 17mm 22mm; @bottom-center { content: counter(page); font: 9pt Literata, Georgia, serif; color: #6b675f; } }
@page :first { @bottom-center { content: none; } }
@media print {
  html, body { background: #fff; }
  .nav, .skip, main, .foot, .canvas-bar, .empty { display: none !important; }
  body { padding: 0 !important; }
  .studio, .canvas, .canvas-body { display: block !important; position: static !important; height: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
  #book { display: block !important; max-width: none; padding: 0; }
  .leaf { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; font-size: 10.5pt; line-height: 1.55; color: #000; }
  .leaf + .leaf { break-before: page; }
  .leaf p { orphans: 3; widows: 3; }
  .title-leaf { min-height: 150mm; }
  .chapter h2 { break-after: avoid; margin-top: 18mm; }
  .chapter img { width: auto; max-width: 100%; max-height: 82mm; margin-inline: auto; }
  .chapter figcaption { text-align: center; }
  .chapter-number { margin-top: 18mm; }
  .chapter-number + h2 { margin-top: 0; }
  .modern .leaf { font-size: 10pt; }
  .modern .chapter figure { margin-inline: 0; }
  .modern .chapter figcaption { margin-inline: 0; }
  .picture .leaf { font-size: 20pt; line-height: 1.38; }
  .picture .leaf p { break-after: page; margin: 30mm 0 0; }
  .picture .leaf p:last-child { break-after: auto; }
  .picture .chapter figure { margin: 0 0 8mm; }
  .picture .chapter img { max-height: 120mm; }
  .picture .chapter figcaption { margin-inline: 0; font-size: 10pt; }
  .picture .colophon { font-size: 9pt; }
  .picture .colophon p { break-after: auto; margin: 0 0 .6em; }
}
@media (prefers-contrast: more) {
  .leaf { --quiet: #4a4741; }
}