@font-face { font-family: "LM Roman 10"; src: url("fonts/lmroman10-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Roman 10"; src: url("fonts/lmroman10-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Roman 10"; src: url("fonts/lmroman10-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "LM Mono 10"; src: url("fonts/lmmono10-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Latin Modern Math"; src: url("fonts/latinmodern-math.otf") format("opentype"); font-display: swap; }

/* Layout: one LaTeX book page (34em measure, chapter-opening heading) lying on a reading desk */
:root {
  --desk: #e4e4e1;
  --paper: #fdfdfc;
  --ink: #161616;
  --shade: #d6d6d4;
  --faint: #8a8a86;
  --shadow: rgba(20, 20, 18, 0.14);
  --serif: "LM Roman 10", "Latin Modern Roman", "CMU Serif", "Computer Modern Serif", Georgia, "Times New Roman", serif;
  --mono: "LM Mono 10", "Latin Modern Mono", "CMU Typewriter Text", "Courier New", monospace;
  --math: "Latin Modern Math", "STIX Two Math", "Cambria Math", math;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #111111; --paper: #1c1c1b; --ink: #e7e5df; --shade: #3a3a38; --faint: #77756f; --shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #111111; --paper: #1c1c1b; --ink: #e7e5df; --shade: #3a3a38; --faint: #77756f; --shadow: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 48px;
}

.page {
  box-sizing: border-box;
  max-width: 45em;
  margin: 0 auto;
  padding: 4.5em 5.5em 3.5em;
  background: var(--paper);
  box-shadow: 0 1px 2px var(--shadow), 0 10px 36px var(--shadow);
  font-size: 18px;
  line-height: 1.28;
  font-kerning: normal;
}
.page + .page { margin-top: 48px; }

/* \chapter: "Chapter N" in \huge, the title in \Huge, both bold and flush left */
.chapter { margin: 0.5em 0 2.4em; }
.chapter .label { display: block; font-size: 2.07em; font-weight: 700; line-height: 1.1; margin-bottom: 0.6em; }
.chapter h1 { font-size: 2.49em; font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }

/* \section: number, a quad, the title, in \Large bold */
h2 {
  display: flex;
  gap: 1em;
  font-size: 1.44em;
  font-weight: 700;
  line-height: 1.2;
  margin: 1.6em 0 0.65em;
  text-wrap: balance;
}

p { margin: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
p + p, .figure + p, pre + p { text-indent: 1.5em; }

strong { font-weight: 700; }
code { font-family: var(--mono); font-size: 0.95em; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.xref { text-decoration: none; }
.xref:hover { text-decoration: underline; }

math { font-family: var(--math); font-size: 1.05em; }
.m { white-space: nowrap; }
math[display="block"] { display: block math; margin: 0.9em 0; overflow-x: auto; overflow-y: hidden; padding-block: 0.1em; }

/* figures, tables and listings sit in the text column, centered, never wider than it */
.figure { display: flex; justify-content: center; margin: 1.1em 0; overflow-x: auto; }
.figure svg { max-width: 100%; height: auto; }

table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table th, table td { padding: 0.22em 0.8em; font-weight: 400; vertical-align: top; }
table th:first-child, table td:first-child { padding-left: 0.4em; }
table thead tr { border-top: 1px solid var(--ink); border-bottom: 0.6px solid var(--ink); }
table tbody tr:last-child { border-bottom: 1px solid var(--ink); }
table th, table td { white-space: nowrap; }
table .wrap { white-space: normal; min-width: 13em; max-width: 22em; }

pre { margin: 1.1em 0; padding-left: 1.5em; font-family: var(--mono); font-size: 0.9em; line-height: 1.3; white-space: pre-wrap; }
pre code { font-size: 1em; }

/* footnotes at the end of the chapter, under a short rule */
.footnote-ref sup { font-size: 0.68em; line-height: 0; }
.footnote-ref { text-decoration: none; }
section.footnotes { margin-top: 2.6em; font-size: 0.8em; line-height: 1.25; }
section.footnotes hr { width: 40%; margin: 0 0 0.6em; border: 0; border-top: 0.6px solid var(--ink); }
section.footnotes ol { margin: 0; padding: 0; list-style: none; counter-reset: fn; display: grid; gap: 0.35em; }
section.footnotes li { counter-increment: fn; }
section.footnotes li p { text-align: left; text-indent: 0; }
section.footnotes li p:first-child::before { content: counter(fn); font-size: 0.68em; vertical-align: 0.55em; margin-right: 0.3em; }
section.footnotes li:target { background: var(--shade); }
.footnote-back { display: none; }

/* title page and contents */
.titlepage { text-align: center; margin: 3em 0 4em; }
.titlepage h1 { font-size: 2.49em; font-weight: 700; line-height: 1.15; margin: 0 0 0.6em; text-wrap: balance; }
.titlepage p { text-align: center; font-size: 1.2em; font-style: italic; }
.contents h2 { display: block; font-size: 2.07em; margin: 0 0 1em; }
.contents .part { font-weight: 700; font-size: 1.1em; margin: 1.3em 0 0.4em; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2em; }
.contents li { display: grid; grid-template-columns: 2em 1fr; }
.contents li.planned { color: var(--faint); }
.contents .note { margin-top: 2em; color: var(--faint); font-size: 0.9em; }

/* navigation between pages, outside the paper */
nav.pager { max-width: 45em; margin: 20px auto 0; display: flex; justify-content: space-between; gap: 1em; font-size: 15px; color: var(--ink); }
nav.pager a { text-decoration: none; }
nav.pager a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  body { padding-block: 16px; }
  .page { font-size: 17px; padding: 2.4em 1.3em 2em; }
  .chapter { margin-top: 0; }
  pre { padding-left: 0.75em; font-size: 0.85em; }
  nav.pager { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .page { padding-left: 1em; padding-right: 1em; }
}

/* the PDF: A4 pages, one chapter per page break, page numbers at the bottom */
@page {
  size: A4;
  margin: 24mm 24mm 26mm;
  @bottom-center { content: counter(page); font-family: "LM Roman 10", serif; font-size: 10pt; }
}
@page :first { @bottom-center { content: none; } }
@media print {
  :root { --paper: #ffffff; --desk: #ffffff; --ink: #000000; --shade: #d9d9d9; --faint: #7a7a7a; }
  body { padding: 0; background: #ffffff; }
  .page { max-width: none; margin: 0; padding: 0; box-shadow: none; font-size: 11pt; }
  .page + .page { margin-top: 0; break-before: page; }
  .chapter { margin-top: 2.5em; }
  .titlepage { margin: 1.5em 0 2.5em; }
  .contents .part { margin-top: 1em; }
  nav.pager { display: none; }
  .figure, table, pre, math[display="block"] { break-inside: avoid; }
  h2 { break-after: avoid; }
  a { text-decoration: none; }
}