/* ═══════════════════════════════════════════════════════════════════════════════════════════
   The reader's own typography.

   Served at a stable /reader.css rather than bundled, because the publisher's formatter preview
   loads this exact file. A preview that reimplemented these rules would be a second thing to keep
   in step, which is the failure this whole pipeline was rebuilt to remove: an editor showing
   formatting the reader did not have.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap");

.mk-book {
  --ink: #23201c;
  --ink-soft: rgba(35, 32, 28, .62);
  --paper: #fbf8f3;
  --rule: rgba(35, 32, 28, .14);
  --accent: #01565B;

  color: var(--ink);
  max-width: 34rem;              /* ~66 characters at this size, not ~100 */
  margin: 0 auto;
}

/* Latin: a book measure and a book rhythm. */
.mk-book p,
.mk-book blockquote,
.mk-book .verse {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1.05em;
  text-align: left;
}

/* Arabic gets its own face and its own leading — the two scripts do not share a rhythm. */
.mk-book [lang="ar"],
.mk-book [dir="rtl"] {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 1.35rem;
  line-height: 2.05;
  text-align: right;
  hyphens: none;                 /* Arabic does not hyphenate */
}

/* Headings: space and type mark a division, not a horizontal rule. */
.mk-book h2,
.mk-book h3,
.mk-book h4 {
  font-family: Quattrocento, Georgia, serif;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}
.mk-book h2 { font-size: 1.5rem;  font-weight: 700; margin: 2.4em 0 .2em; }
.mk-book h3 { font-size: 1.22rem; font-weight: 700; margin: 1.9em 0 .2em; }
.mk-book h4 { font-size: 1.06rem; font-weight: 600; margin: 1.6em 0 .2em; }

.mk-book h2[lang="ar"] { font-family: "Amiri", serif; font-size: 1.75rem; }
.mk-book h3[lang="ar"] { font-family: "Amiri", serif; font-size: 1.5rem; }
.mk-book h4[lang="ar"] { font-family: "Amiri", serif; font-size: 1.3rem; }

/* An Arabic heading and its English translation are one division, so they sit together. */
.mk-book h2 + h2, .mk-book h3 + h3, .mk-book h4 + h4 { margin-top: .1em; }

/* A quotation is set in, not merely line-broken. This is the 826 paragraphs that used to be a
   bare newline inside a body paragraph. */
.mk-book blockquote {
  margin: 1.2em 0;
  padding-inline-start: 1.1em;
  border-inline-start: 2px solid var(--accent);
  color: rgba(35, 32, 28, .88);
}

/* Poetry: the line breaks are the poet's. */
.mk-book .verse {
  white-space: pre-line;
  margin: 1.2em 0 1.2em 1.4em;
  font-style: italic;
}

/* Apparatus, not prose. The old reader printed "Editorial Note:" in bold-italic and set the whole
   note in italic, inline in the text flow. */
.mk-book .note {
  display: block;
  font-family: Quattrocento, Georgia, serif;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin: .5em 0 1.4em;
  padding-top: .45em;
}
.mk-book .note::before {
  content: "Note";
  display: block;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .2em;
}

.mk-book strong { font-weight: 700; }
.mk-book em { font-style: italic; }
.mk-book sup { font-size: .7em; vertical-align: super; line-height: 0; }

/* Night reading, which a reading app needs and the old one never had. */
@media (prefers-color-scheme: dark) {
  .ereader-content:has(.mk-book) { background-color: #16150f !important; box-shadow: none; }
  .mk-book {
    --ink: #e8e3d8;
    --ink-soft: rgba(232, 227, 216, .58);
    --paper: #16150f;
    --rule: rgba(232, 227, 216, .16);
    --accent: #6fb6ac;
  }
  .mk-book blockquote { color: rgba(232, 227, 216, .9); }
}

@media (max-width: 640px) {
  .mk-book { max-width: none; }
  .mk-book p, .mk-book blockquote, .mk-book .verse { font-size: 1rem; }
  .mk-book [lang="ar"], .mk-book [dir="rtl"] { font-size: 1.25rem; }
}