:root {
  --ink: #10283f;
  --muted: #5b6c7b;
  --paper: #fffdf8;
  --line: #d9e2e8;
  --accent: #db6b2c;
  --blue: #0d5c7b;
}

html { scroll-behavior: smooth; }
body {
  margin: 0 auto;
  max-width: 900px;
  padding: 5rem clamp(1.25rem, 4vw, 4rem);
  color: var(--ink);
  background: var(--paper);
  font: 18px/1.72 Georgia, "Times New Roman", serif;
}
.reader-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  color: white;
  background: rgba(13, 39, 64, .96);
  font: 600 .9rem/1.2 Arial, sans-serif;
}
.reader-nav a { color: white; text-decoration: none; }
.reader-nav a:last-child { color: #ffb37f; }
h1, h2, h3, h4 { color: #0d2740; line-height: 1.2; margin-top: 2.2em; }
h1.title { margin-top: 1rem; font-size: clamp(2.4rem, 7vw, 4.8rem); }
.subtitle { color: var(--accent); }
.author { color: var(--muted); font-style: italic; }
nav#TOC {
  margin: 3rem 0;
  padding: 1.5rem 2rem;
  border-left: 5px solid var(--accent);
  background: #eef5f7;
  font-family: Arial, sans-serif;
  font-size: .95rem;
}
nav#TOC::before { content: "Contents"; display: block; margin-bottom: 1rem; font-weight: 800; }
nav#TOC ul { padding-left: 1.2rem; }
nav#TOC a { color: var(--blue); text-decoration: none; }
p { margin: 1em 0; }
blockquote { margin: 2rem 0; padding: .5rem 1.5rem; border-left: 4px solid var(--accent); color: #344b5f; }
table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .93rem; }
th, td { padding: .75rem; border: 1px solid var(--line); vertical-align: top; }
th { background: #e8f0f3; }
a { color: var(--blue); }
img { max-width: 100%; height: auto; }
code { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  body { font-size: 16px; padding-top: 4.5rem; }
  table { display: block; overflow-x: auto; }
}