/* ════════════════════════════════════════════════════════════════
   TAOCP — Knuth's "The Art of Computer Programming" pastiche.
   Adapted for Emacs Org-mode HTML export.
   Cream paper, black ink, Computer Modern, classical typesetting.
   ════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css');

:root {
  --paper:  #fbf8f1;
  --paper2: #f6f1e3;
  --ink:    #000000;
  --rule:   #cbc4ad;
  --faint:  #8a8472;
  --soft:   #3a3528;
  --mono:   'Computer Modern Typewriter', 'CMU Typewriter Text', 'Latin Modern Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif:  'Computer Modern Serif', 'CMU Serif', 'Latin Modern Roman', 'Computer Modern', 'EB Garamond', Georgia, 'Times New Roman', serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  min-height: 100%;
}

body {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
#content p, #content li { font-weight: 500; }

::selection { background: #fce28a; color: var(--ink); }

/* Page frame: classical narrow column with extra left padding so
   section heads sit further from the page edge — TAOCP feel. */
#preamble,
#content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 120px;
  padding-right: 64px;
  box-sizing: border-box;
}
@media (min-width: 1000px) {
  #preamble,
  #content {
    max-width: 820px;
    padding-left: 160px;
    padding-right: 80px;
  }
}

/* Mobile / narrow viewports: drop the asymmetric margins, ease the
   body measure, and stop justifying so words don't stretch into
   single-column columns. */
@media (max-width: 720px) {
  body { font-size: 16.5px; line-height: 1.5; }
  #preamble,
  #content {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  #preamble { padding-top: 32px; }
  #content { padding-top: 28px; padding-bottom: 80px; }

  h1.title { font-size: 28px; }
  h1.title .subtitle, p.subtitle { font-size: 15px; }

  #table-of-contents { max-width: 100%; margin-bottom: 56px; }
  .byline { margin-bottom: 56px; }

  #content p {
    text-align: left;     /* rag-right reads better in narrow columns */
    hyphens: auto;
    text-indent: 0;
  }
  #content p + p { margin-top: 0.6em; }

  /* Code blocks: smaller, scroll horizontally, less inner padding. */
  .org-src-container > pre.src,
  pre.src,
  pre.example {
    font-size: 13.5px;
    line-height: 1.4;
    padding: 10px 12px;
  }

  #content blockquote { width: 100%; text-align: left; }
  #content blockquote p { text-align: left; }

  /* Tables: let them scroll horizontally if too wide. */
  #content table { font-size: 13.5px; }
  #content figure, .figure { overflow-x: auto; }
}

/* ── Folio (running head) ──────────────────────────────────────── */
#preamble {
  padding-top: 80px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-style: italic;
  color: var(--soft);
  border-bottom: 0.5px solid var(--ink);
}
#preamble .pageno {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.12em;
}
#content { padding-top: 56px; padding-bottom: 140px; }

/* ── Title block ───────────────────────────────────────────────── */
h1.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  text-align: left;
}
h1.title .subtitle,
p.subtitle {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--soft);
  margin: 14px 0 0;
}

.byline {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--soft);
  margin: 18px 0 84px;
}
.byline .sep { color: var(--faint); margin: 0 0.2em; }

.ornament {
  text-align: center;
  margin: 36px 0 48px;
  letter-spacing: 1.2em;
  color: var(--faint);
  font-size: 12px;
}
.ornament::before {
  content: '* * *';
  margin-left: 1.2em; /* re-centre after letter-spacing pulls right */
}

/* ── Table of contents ─────────────────────────────────────────── */
#table-of-contents {
  margin: 0 0 84px;
  max-width: 420px;
}
#table-of-contents > h2 {
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--rule);
  color: var(--ink);
}
#text-table-of-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}
#text-table-of-contents > ul > li { margin-bottom: 4px; }
#text-table-of-contents ul ul {
  margin: 2px 0 6px 28px;
  font-size: 14.5px;
  color: var(--soft);
}
#text-table-of-contents a {
  color: var(--ink);
  text-decoration: none;
  border: none;
}
#text-table-of-contents a:hover { background: #fce28a; }

/* ── Body sections ─────────────────────────────────────────────── */
#content [class^="outline-"] { margin-bottom: 28px; position: relative; }
.outline-3 { margin-top: 22px; margin-bottom: 22px; }

#content h2,
#content h3,
#content h4,
#content h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}

/* h2 — primary section heading */
.outline-2 > h2 {
  font-size: 18px;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  margin: 40px 0 14px;
  font-weight: 500;
}
.outline-2 > h2 .section-number-2 {
  font-variant: normal;
  letter-spacing: 0;
  font-style: italic;
  font-weight: 400;
  color: var(--soft);
  margin-right: 0.6em;
}

/* h3 — Knuth-style run-in subsection */
.outline-3 > h3 {
  display: inline;
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  margin: 0;
}
.outline-3 > h3::after { content: '.\00a0'; }
.outline-3 > h3 .section-number-3 {
  font-variant: small-caps;
  font-style: normal;
  letter-spacing: 0.06em;
  margin-right: 0.4em;
  color: var(--ink);
}
.outline-3 > .outline-text-3 { display: inline; }
.outline-3 > .outline-text-3 > p:first-child {
  display: inline;
  text-indent: 0;
}
.outline-3 > .outline-text-3 > p:first-child::after {
  content: '';
  display: block;
  height: 1em;
}

/* ── Paragraphs ────────────────────────────────────────────────── */
#content p {
  margin: 0 0 0.55em;
  text-align: justify;
  hyphens: auto;
  text-indent: 1.5em;
}
/* First paragraph after a heading — no indent */
.outline-text-2 > p:first-child,
.outline-text-3 > p:first-child,
#content > p:first-of-type,
h1.title + p,
h1.title + .byline + .ornament + p,
.ornament + p,
#table-of-contents + p {
  text-indent: 0;
}

#content em, #content cite, #content i { font-style: italic; }
#content strong, #content b { font-weight: 600; }

#content code, #content tt, #content kbd {
  font-family: var(--mono);
  font-size: 0.95em;
  font-weight: 900;
  font-synthesis-weight: auto;
  font-feature-settings: "liga" 0;
  background: transparent;
  padding: 0;
  border: none;
  color: var(--ink);
}
#content a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--ink);
}
#content a:hover { background: #fce28a; }
#content a.target, #content sup a { border: none; }

/* ── Block quote (epigraph) ────────────────────────────────────── */
#content blockquote {
  margin: 28px 0 28px auto;
  padding: 0;
  width: 70%;
  font-family: var(--serif);
  font-style: italic;
  color: var(--soft);
  font-size: 0.96em;
  text-align: right;
  border: none;
  background: transparent;
}
#content blockquote p {
  text-indent: 0;
  margin: 0 0 0.4em;
  text-align: right;
}

/* ── Source listings — TAOCP-style: thin box, no chrome ──────── */
.org-src-container {
  margin: 22px 0;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
}
.org-src-container > pre.src,
pre.src,
pre.example {
  margin: 0;
  padding: 12px 18px;
  border: 0.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  overflow-x: auto;
  background: transparent;
  box-shadow: none;
  font-feature-settings: "liga" 0;
}
/* Hide the language label Org sometimes prepends. */
pre.src::before { display: none !important; content: '' !important; }
pre code, pre tt {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
}

/* Source-name caption (#+name:) styled as TAOCP figcaption. */
.org-src-container > label,
.org-src-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92em;
  color: var(--soft);
  margin-bottom: 6px;
  text-align: left;
}

/* ── Lists ─────────────────────────────────────────────────────── */
#content ul, #content ol {
  margin: 0.4em 0 0.8em 1.4em;
  padding: 0;
}
#content ul li, #content ol li {
  margin-bottom: 0.2em;
  text-indent: 0;
}
#content ul { list-style: none; }
#content ul > li {
  position: relative;
  padding-left: 0.2em;
}
#content ul > li::before {
  content: '\25AA';   /* black small square — TAOCP-feel */
  position: absolute;
  left: -1em;
  top: 0;
  color: var(--ink);
  font-size: 0.9em;
  line-height: inherit;
}

/* ── Tables ────────────────────────────────────────────────────── */
#content table {
  margin: 24px auto;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 15px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
#content table thead th {
  font-weight: 400;
  font-style: italic;
  text-align: center;
  padding: 6px 18px;
  border-top: 0.5px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}
#content table tbody td {
  padding: 4px 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: none;
}
#content table tbody td:first-child { text-align: right; }
#content table tbody tr:last-child td { border-bottom: 0.5px solid var(--ink); }

/* Definition-style table (e.g. address → meaning lookups).
   Hairline top/bottom rules only; first column right-aligned. */
#content table.taocp-defs tbody td { text-align: left; }
#content table.taocp-defs tbody td:first-child {
  text-align: right;
  padding-right: 24px;
  white-space: nowrap;
}
#content table.taocp-defs thead th { text-align: left; }
#content table.taocp-defs thead th:first-child { text-align: right; }

/* Full-grid table — every cell boxed, like a Knuth opcode reference. */
#content table.taocp-grid {
  border: 0.5px solid var(--ink);
}
#content table.taocp-grid thead th,
#content table.taocp-grid tbody td {
  border: 0.5px solid var(--ink);
  padding: 6px 14px;
  text-align: left;
  font-variant-numeric: normal;
}
#content table.taocp-grid thead th {
  font-style: italic;
  font-weight: 400;
  text-align: left;
}
#content table.taocp-grid tbody tr:last-child td {
  border-bottom: 0.5px solid var(--ink);
}
#content table.taocp-grid tbody td:first-child { text-align: left; }

/* Plain table — borderless, just whitespace separation. */
#content table.taocp-plain {
  border-collapse: collapse;
}
#content table.taocp-plain thead th,
#content table.taocp-plain tbody td {
  border: none;
  padding: 4px 18px;
  text-align: left;
}
#content table.taocp-plain thead th {
  font-style: italic;
  font-weight: 400;
  border-bottom: 0.5px solid var(--ink);
}
#content table.taocp-plain tbody tr:last-child td { border-bottom: none; }
#content table caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92em;
  color: var(--soft);
  margin-bottom: 8px;
  caption-side: top;
  text-align: center;
}

/* ── Figures ───────────────────────────────────────────────────── */
#content figure, .figure { margin: 24px 0; text-align: center; }
#content figcaption,
.figure p,
.figure-number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92em;
  color: var(--soft);
  margin-top: 8px;
  text-align: center;
}
#content img { max-width: 100%; height: auto; }

/* ── Footnotes ─────────────────────────────────────────────────── */
#footnotes {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 0.5px solid var(--ink);
  font-size: 14px;
  color: var(--soft);
}
#footnotes h2.footnotes,
.footnotes > h2 {
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  margin: 0 0 10px;
  color: var(--ink);
}
.footdef { margin-bottom: 6px; text-indent: 0; }
.footpara { display: inline; text-indent: 0; }
sup a, sup a:visited { border: none; color: var(--ink); }
sup { font-feature-settings: "sups" 1; font-size: 0.78em; }

/* ── Misc ──────────────────────────────────────────────────────── */
.strikethrough, s, del {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--faint);
}
hr {
  border: none;
  border-top: 0.5px solid var(--rule);
  margin: 28px 0;
}

/* Postamble (Org's auto footer) — hidden when html-postamble:nil
   but guarded here too. */
#postamble { display: none; }

/* Small-caps utility for inline use */
.sc { font-variant: small-caps; letter-spacing: 0.06em; }

/* KaTeX — tame the default 1.21em scale-up so math sits flush with prose.
   !important needed because katex.min.css may load after this file. */
#content .katex { font-size: 1em !important; }
#content .katex-display { font-size: 1.05em !important; margin: 18px 0; }
#content .katex-display > .katex { white-space: normal; }