/* Reading comfort across devices.
 *
 * mdBook fixes the text column at 750 px and the type at 16 px, which leaves
 * most of a large monitor empty and the text small. Here the type grows
 * smoothly with the viewport, from 16 px on phones to 21 px on wide screens,
 * and the column widens with it while staying near 75 characters per line,
 * the range typographers recommend for sustained reading
 * (Bringhurst, The Elements of Typographic Style, §2.1.2).
 */
:root {
  --content-max-width: clamp(320px, 78ch, 92vw);
}

.content main {
  font-size: clamp(1.6rem, 1.15rem + 0.55vw, 2.1rem);
  line-height: 1.7;
}

.content main h1 { font-size: 1.9em; line-height: 1.25; }
.content main h2 { font-size: 1.45em; margin-top: 2.2em; }
.content main h3 { font-size: 1.18em; margin-top: 1.8em; }

.content main table { font-size: 0.92em; display: block; overflow-x: auto; }
.content main code { font-size: 0.88em; }
.content main pre > code { font-size: 0.82em; }
.content main img { max-width: 100%; height: auto; }

/* A short plain-language summary at the top of a chapter. */
.content main blockquote.summary,
.content main .summary {
  border-left: 4px solid #b5522a;
  background: rgba(181, 82, 42, 0.07);
  padding: 0.8em 1.2em;
  margin: 1.2em 0 1.8em;
}

@media (max-width: 600px) {
  .content main { line-height: 1.6; }
  .content main h1 { font-size: 1.6em; }
}

/* Diagrams shared with the paper have transparent backgrounds and dark ink;
   a light card keeps them legible in the dark themes as well. */
.content main img[src*="paper-"] {
  display: block;
  margin: 1.4em auto;
  background: #ffffff;
  border-radius: 10px;
  padding: 12px;
  max-width: min(100%, 760px);
}