textarea, input[type=text] {
  display: block; width: 100%; min-height: 44px; font: inherit; color: var(--ink);
  padding: 10px 12px; border: 0; border-radius: 12px; background: var(--field);
  -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; line-height: 1.5; }
::placeholder { color: var(--soft); opacity: 1; }
label.title.spaced { margin-top: 14px; }

.captions:not(:empty) { margin-top: 12px; }
.caption-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.caption-row img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--field); }
.caption-row input { flex: 1; min-width: 0; font-size: 16px; }
.caption-row button { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; margin: 0; color: var(--ink); }

.question { margin-top: 12px; }
.question label { display: block; font-size: 15px; margin-bottom: 6px; }
progress { display: block; width: 100%; height: 6px; margin: 8px 0; accent-color: var(--blue); }
#checks li { font-size: 15px; }
#app section > ol { margin-bottom: 8px; }

/* The book itself: on screen, a stack of A5 pages. */
#book {
  --serif: "New York", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --paper: #fffdf9;
  --type: #1d1c1a;
  --quiet: #6b675f;
  max-width: 600px; margin: 0 auto; padding: 0 16px 56px;
}
.leaf {
  background: var(--paper); color: var(--type);
  font: 16px/1.62 var(--serif);
  padding: 36px 30px; margin-bottom: 14px; border-radius: 6px;
  box-shadow: var(--glass-shadow);
}
.leaf p { margin: 0 0 .9em; outline: none; overflow-wrap: anywhere; }
.leaf p[contenteditable]:focus { box-shadow: 0 0 0 2px var(--blue); border-radius: 2px; }
.title-leaf { min-height: 420px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.title-leaf h1 { margin: 0 0 12px; font: 600 32px/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.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: 600 20px/1.2 var(--serif); color: inherit; letter-spacing: 0; }
.contents ol { margin: 0; padding-inline-start: 24px; }
.chapter-number { margin: 0 0 6px; color: var(--quiet); font-size: 14px; letter-spacing: .08em; }
.chapter h2 { margin: 0 0 28px; font: 600 26px/1.18 var(--serif); color: inherit; letter-spacing: -.005em; }
.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; }

@page { size: 148mm 210mm; margin: 20mm 17mm 22mm; @bottom-center { content: counter(page); font: 10pt Georgia, serif; color: #6b675f; } }
@page :first { @bottom-center { content: none; } }
@media print {
  html, body { background: #fff; }
  body::before, .bar, main { display: none !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; }
}
@media (prefers-contrast: more) {
  .leaf { --quiet: #4a4741; }
}