/* Django Internals: the one stylesheet.

   A book, not a documentation site. One column of text at a reading measure,
   set in a serif; a sans for everything that is not the text (the running
   head, the contents, captions, labels); a mono for the names of the source.
   One accent, a rubric red, for links, numbers and rules.

   Beside the text, where the screen is wide enough, a margin: the sources of
   each paragraph stand there, level with it, as a textbook's marginal notes
   do. Where there is no room for a margin they stand under their paragraph.
   Tables and wide figures may run into the margin. To the left, the book's
   contents; on a narrow screen they open under the running head when asked.

   The colours are five palettes: Paper and Dusk, which follow the reader's
   system unless the reader chooses, and White, Sepia and Night, which are
   chosen. The choice is the root element's data-colours, set by the page's
   one script (site.js) from what the reader last picked; with no script the
   system decides, and nothing else here needs one.

   Every colour is a custom property of :root, so a figure, which carries
   classes and never a colour, follows the palette with the page. A chapter
   adds its own figure classes in figures/figures.css in its own directory of
   the book, which the site puts on that chapter's pages only. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-code-pro-latin-wght-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --paper: #fbf9f4;
  --paper-2: #f2eee5;
  --ink: #1e1c19;
  --ink-2: #5e594f;
  --rule: #dcd6c9;
  --accent: #a3301a;
  --why: #35557d;
  --history: #6b5423;
  --trap: #9a4a0c;
  --changed: #2e6b3f;
  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 34em;
  --gap: 2.2em;
  --margin: 13.5em;
  --gutter: 1.25rem;
  --beside: 17rem;
}
/* The palettes. :root above is Paper. With no choice made, a system that asks for dark gets Dusk;
   a choice (data-colours on the root element) outranks the system. Each text colour is at least
   5 to 1 against both grounds of its palette. views.COLOURS names the choices the control offers. */
@media (prefers-color-scheme: dark) {
  :root:not([data-colours]) {
    --paper: #181613;
    --paper-2: #23201b;
    --ink: #e6e1d7;
    --ink-2: #a8a195;
    --rule: #3d3931;
    --accent: #e9866c;
    --why: #93b4dc;
    --history: #cdb27a;
    --trap: #e8a060;
    --changed: #86c492;
  }
}
:root[data-colours="paper"], :root[data-colours="white"], :root[data-colours="sepia"] { color-scheme: light; }
:root[data-colours="dusk"], :root[data-colours="night"] { color-scheme: dark; }
:root[data-colours="white"] {
  --paper: #ffffff;
  --paper-2: #f4f4f1;
  --ink: #1b1b1a;
  --ink-2: #5c5c58;
  --rule: #dededa;
}
:root[data-colours="sepia"] {
  --paper: #f2e8d3;
  --paper-2: #e8dcc1;
  --ink: #2f261a;
  --ink-2: #65563f;
  --rule: #d2c3a3;
  --accent: #8c2a12;
}
:root[data-colours="dusk"] {
  --paper: #181613;
  --paper-2: #23201b;
  --ink: #e6e1d7;
  --ink-2: #a8a195;
  --rule: #3d3931;
  --accent: #e9866c;
  --why: #93b4dc;
  --history: #cdb27a;
  --trap: #e8a060;
  --changed: #86c492;
}
:root[data-colours="night"] {
  --paper: #000000;
  --paper-2: #141311;
  --ink: #d9d4ca;
  --ink-2: #9c968b;
  --rule: #302d28;
  --accent: #e9866c;
  --why: #93b4dc;
  --history: #cdb27a;
  --trap: #e8a060;
  --changed: #86c492;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "running" "beside" "main" "colophon";
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
@media (min-width: 46em) { body { font-size: 1.1875rem; } }

a { color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

main { grid-area: main; min-width: 0; align-content: start; }

/* The column. Text at the measure; where the screen is wide, a margin beside it. */
.flow { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--measure)) minmax(var(--gutter), 1fr); }
.flow > * { grid-column: 2; min-width: 0; }

/* The running head: the book, the chapter this page is in, and what the reader can set:
   the contents opened (on a narrow screen, where they are not beside the page) and the colours. */
.running { grid-area: running; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3em 1.4em; padding: 0.75em var(--gutter); font-family: var(--sans); font-size: 0.8em; font-variant-numeric: lining-nums; border-bottom: 1px solid var(--rule); }
.running .crumbs { display: flex; flex-wrap: wrap; gap: 0.1em 0.6em; align-items: baseline; }
.running a { color: var(--ink-2); text-decoration: none; }
.running a:hover { color: var(--ink); text-decoration: underline; }
.running .book { color: var(--ink); font-family: var(--serif); font-size: 1.12em; font-weight: 600; letter-spacing: 0.005em; }
.running .book:hover { color: var(--accent); text-decoration: none; }
.running .sep { color: var(--rule); }
.running .controls { display: flex; align-items: baseline; gap: 1.2em; margin-left: auto; color: var(--ink-2); }
.open-contents { position: relative; cursor: pointer; font-weight: 600; color: var(--ink); user-select: none; }
.open-contents input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.open-contents::after { content: " +"; color: var(--accent); }
.open-contents:has(input:checked)::after { content: " \2212"; }
.open-contents:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }
.colours select { margin-left: 0.25em; padding: 0.05em 0.2em; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
.colours select:hover { border-color: var(--ink-2); }
.colours select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The book's contents, beside the page: the parts and their chapters, the chapter this page is
   in opened to its sections, and this page's own headings under it. On a narrow screen they are
   closed until the running head's Contents is pressed, and then stand above the page. */
.booknav { grid-area: beside; display: none; padding: 0.9rem var(--gutter) 1.1rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.875rem; line-height: 1.35; font-variant-numeric: lining-nums tabular-nums; }
body:has(#_contents-open:checked) .booknav { display: block; }
.booknav ol { margin: 0; padding: 0; list-style: none; }
.booknav li { margin: 0; }
.booknav .part { margin: 1.5em 0 0.45em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); }
.booknav .parts > li:first-child .part { margin-top: 0; }
.booknav a, .booknav .planned { display: grid; grid-template-columns: 1.75em 1fr; padding: 0.27em 0; color: var(--ink); text-decoration: none; }
.booknav a:hover { color: var(--accent); }
.booknav .no { color: var(--ink-2); }
.booknav .planned { color: var(--ink-2); }
.booknav code { font-size: 0.9em; }
.booknav a[aria-current] { color: var(--accent); font-weight: 600; }
.booknav a[aria-current] .no { color: inherit; }
.booknav .under { margin: 0.1em 0 0.5em 0.55em; padding-left: 0.9em; border-left: 1px solid var(--rule); font-size: 0.95em; }
.booknav .under a, .booknav .under .planned { grid-template-columns: 2.85em 1fr; padding: 0.24em 0; }
.booknav .no, .outline .no, .toc .no { white-space: nowrap; }
.booknav .headings { margin: 0 0 0.35em 2.1em; font-size: 0.93em; }
.booknav .chapters > li > .headings { margin-left: 1.75em; }
.booknav .headings a { display: block; padding: 0.2em 0; color: var(--ink-2); font-weight: 400; }
.booknav .headings a:hover { color: var(--accent); }

@media (min-width: 62em) {
  body { grid-template-columns: var(--beside) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "running running" "beside main" "beside colophon"; }
  body::before { content: ""; grid-area: beside; border-right: 1px solid var(--rule); }
  .booknav, body:has(#_contents-open:checked) .booknav { display: block; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 1.7rem 1.1rem 2rem var(--gutter); border-bottom: 0; }
  .open-contents { display: none; }
}

/* Where there is room, the margin. A block's sources go there; a table or a wide figure may. */
@media (min-width: 80em) {
  .flow { grid-template-columns: minmax(var(--gutter), 0.7fr) minmax(0, var(--measure)) var(--gap) var(--margin) minmax(var(--gutter), 1fr); }
  .flow > .sources { grid-column: 4; align-self: start; margin: 0; padding: 0.42em 0 0; border: 0; }
  .flow > .sources .src { margin-bottom: 0.6em; }
  .flow > .sources .src code, .flow > .sources .src .in { display: block; }
  .flow > .table, .flow > .tabular, .flow > .figure.wide { grid-column: 2 / 5; }
  /* A block of code is as wide as the text, and wider, into the margin, when its lines need it
     (0.8 is the size a block of code is set at: its own em is that much smaller than the text's). */
  .flow > pre { grid-column: 2 / 5; justify-self: start; width: max-content; min-width: calc(var(--measure) / 0.8); max-width: 100%; }
}

/* The head of a page. */
.head { padding-top: 3.4em; }
.kicker { margin: 0 0 0.65em; font-family: var(--sans); font-size: 0.74em; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: lining-nums; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--accent); }
h1 { margin: 0; font-size: 2.3em; line-height: 1.12; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; font-variant-numeric: lining-nums; }
h1 .no { margin-right: 0.28em; font-weight: 400; color: var(--accent); }
.lede { margin: 0.75em 0 0; font-size: 1.22em; line-height: 1.42; font-style: italic; color: var(--ink-2); text-wrap: pretty; }
.lede code { font-style: normal; }
.spoken { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A chapter opens with its number, large. */
.opener { padding-top: 3.8em; }
.opener .numeral { margin: 0.1em 0 0.12em -0.03em; font-size: 5.6em; line-height: 0.95; font-weight: 300; color: var(--accent); font-variant-numeric: lining-nums; }
.opener h1 { font-size: 2.65em; }
.opener .lede { padding-bottom: 1.3em; border-bottom: 1px solid var(--rule); }

/* The front page: the title, what the book is, which Django it describes. */
.title-page { padding-top: 4.6em; }
.title-page h1 { font-size: 3.5em; line-height: 1.02; letter-spacing: -0.022em; }
.title-page .lede { margin-top: 0.7em; font-size: 1.34em; }
.title-page .lede::after { content: ""; display: block; width: 3.2em; margin-top: 1.25em; border-top: 2px solid var(--accent); }
.edition { margin: 1.25em 0 0; font-family: var(--sans); font-size: 0.78em; color: var(--ink-2); font-variant-numeric: lining-nums; }
.edition a { color: inherit; }
@media (max-width: 46em) { .title-page h1 { font-size: 2.7em; } .opener .numeral { font-size: 4.4em; } .opener h1 { font-size: 2.2em; } }

.brief { padding-top: 1.9em; }

/* The text. */
p { margin: 0 0 0.85em; text-wrap: pretty; hanging-punctuation: first; }
.section h2 { margin: 2.4em 0 0.6em; font-size: 1.46em; line-height: 1.22; font-weight: 600; letter-spacing: -0.006em; text-wrap: balance; font-variant-numeric: lining-nums; }
.section h3 { margin: 1.7em 0 0.4em; font-size: 1.08em; line-height: 1.3; font-weight: 600; font-style: italic; }
strong { font-weight: 600; }
code, pre { font-family: var(--mono); font-variant-ligatures: none; font-variant-numeric: normal; }
code { font-size: 0.86em; }
code.whole { white-space: nowrap; }  /* a short name stays on one line, wherever it stands */
h1 code, h2 code, h3 code { font-size: 0.9em; font-weight: 500; letter-spacing: -0.01em; }
pre { margin: 0.2em 0 1.1em; padding: 0.85em 1em; background: var(--paper-2); border-radius: 3px; font-size: 0.8em; line-height: 1.5; overflow-x: auto; overflow-wrap: normal; }
pre code { font-size: 1em; }
ul, ol { margin: 0 0 0.85em; padding-left: 1.4em; }
li { margin: 0.25em 0; }
li > p { margin-bottom: 0.4em; }
blockquote { margin: 1.1em 0; padding: 0.05em 0 0.05em 1.1em; border-left: 2px solid var(--rule); color: var(--ink-2); font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.planned { color: inherit; }

/* A pointer in the text is a link to the lines it names at the pinned commit. Quiet: it reads as
   the name it shows, and the underline comes on hover. */
a.pointer { color: inherit; text-decoration: underline dotted var(--rule); text-decoration-thickness: 0.09em; text-underline-offset: 0.22em; }
a.pointer:hover, a.pointer:focus-visible { color: var(--accent); text-decoration: underline solid var(--accent); }
a.pointer code { color: inherit; }

/* A block's sources: the symbols it is about, each a link to its lines. Under the block on a
   narrow screen; in the margin, level with the block, on a wide one (above). */
.sources { margin: -0.3em 0 1em; padding-left: 0.8em; border-left: 1px solid var(--rule); font-family: var(--sans); font-size: 0.7em; line-height: 1.32; color: var(--ink-2); font-variant-numeric: lining-nums; }
.sources .src { display: block; margin-bottom: 0.25em; color: inherit; text-decoration: none; }
.sources .src code { font-size: 0.97em; color: var(--ink); }
.sources .src .in { font-size: 0.94em; }
.sources .src:hover code, .sources .src:focus-visible code { color: var(--accent); }
a.src { color: inherit; text-decoration: none; }
a.src:hover code { color: var(--accent); }
td a.src code { display: block; }
td a.src .in { display: block; font-family: var(--sans); font-size: 0.86em; color: var(--ink-2); }

/* A note: a quotation that opens with its label in bold. */
/* Notes: what stands beside the main line, each a tinted block whose colour says its kind
   (SPEC.md, "A note"): why it is so, how it came to be, a trap, what changed between releases.
   A note of no kind takes the accent. The kind is data-kind on the aside, set from the label. */
.note { --kind: var(--accent); margin: 1.3em 0 1.4em; padding: 0.7em 1.1em 0.75em 1.1em; border-left: 2px solid var(--kind); border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--kind) 6%, var(--paper)); font-size: 0.94em; line-height: 1.5; }
.note[data-kind="why"] { --kind: var(--why); }
.note[data-kind="history"] { --kind: var(--history); }
.note[data-kind="trap"] { --kind: var(--trap); }
.note[data-kind="changed"] { --kind: var(--changed); }
.note > :last-child { margin-bottom: 0; }
.note > p:first-child > strong:first-child { margin-right: 0.35em; font-family: var(--sans); font-size: 0.8em; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--kind); }
.note pre { background: color-mix(in srgb, var(--kind) 4%, var(--paper-2)); }

/* A recording's quote says what it is: a trace from a running Django, not code to read. */
pre[data-kind="recording"]::before { content: "Recorded from a running Django"; display: block; margin: -0.15em 0 0.65em; font-family: var(--sans); font-size: 0.95em; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }

/* Tables: ruled above and below, a hairline between rows, no boxes. */
.table { margin: 1.3em 0 1.5em; overflow-x: auto; justify-self: start; width: max-content; min-width: min(100%, var(--measure)); max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.42; border-block: 1.5px solid var(--ink); font-variant-numeric: lining-nums tabular-nums; }
th, td { padding: 0.5em 1.1em 0.5em 0; vertical-align: top; text-align: left; }
th:last-child, td:last-child { padding-right: 0; }
th { font-family: var(--sans); font-size: 0.84em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); white-space: nowrap; }
th code { text-transform: none; letter-spacing: 0; }  /* a name in a heading keeps its case */
tbody tr + tr td { border-top: 1px solid var(--rule); }
td code { font-size: 0.9em; }
.tabular { margin: 1.5em 0 1.6em; justify-self: start; width: max-content; min-width: min(100%, var(--measure)); max-width: 100%; }
.tabular .table { margin: 0.55em 0 0; width: auto; min-width: 0; }
/* Without the margin a table gives way before it scrolls: its headings wrap, and a long name may break
   between its words, at the places render.py marked. */
wbr.word { display: none; }
@media (max-width: 79.99em) {
  th { white-space: normal; }
  td wbr.word { display: revert; }
}
/* On a narrow screen it is set smaller, and a long name may break anywhere. */
@media (max-width: 46em) {
  table { font-size: 0.86em; }
  td code { overflow-wrap: anywhere; }
  td:not(:first-child) code.whole { white-space: normal; }  /* but not a short name in a row's first cell */
  th, td { padding-right: 0.8em; }
}
/* A table of three columns or more has no room there, and is set row by row: a row's first cell names it,
   and each cell after it stands beside the heading of its column, which render.py put in the cell. */
.label { display: none; }
@media (max-width: 46em) {
  .stacks table, .stacks tbody, .stacks tr, .stacks td { display: block; }
  .stacks thead { display: none; }
  .stacks tr { padding: 0.7em 0 0.8em; }
  .stacks tbody tr + tr { border-top: 1px solid var(--rule); }
  .stacks tbody tr + tr td { border-top: 0; }
  .stacks td { padding: 0; }
  .stacks td:empty { display: none; }
  .stacks td + td { display: flow-root; margin-top: 0.4em; padding-left: 7rem; }
  .stacks td code.whole { white-space: nowrap; }
  .stacks .label { display: block; float: left; width: 6.4rem; margin-left: -7rem; padding-top: 0.25em; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
  .stacks .label code { font-size: 1em; text-transform: none; letter-spacing: 0; white-space: normal; }
}

/* Figures: drawn before the bake, put into the page as they are, numbered by the book. */
/* A figure is shown at the size it was drawn (--natural, its viewBox's width) where there is
   room. Where there is not, it shrinks to three quarters of that and then scrolls sideways:
   a figure too small to read is worse than one that has to be scrolled. */
.figure { margin: 1.7em 0 1.9em; }
.figure .art { overflow-x: auto; }
.figure svg { display: block; width: 100%; max-width: var(--natural); min-width: calc(var(--natural) * 0.75); height: auto; margin: 0 auto; }
.figure.wide svg { margin: 0; }
figcaption { margin-top: 0.75em; font-family: var(--sans); font-size: 0.82em; line-height: 1.42; color: var(--ink-2); font-variant-numeric: lining-nums; }
.tabular figcaption { margin-top: 0; }
figcaption .no { margin-right: 0.3em; font-weight: 600; color: var(--ink); }
figcaption code { font-size: 0.9em; }

/* What a figure is drawn with. A figure names these classes and no colour. */
.fig text { font-family: var(--sans); font-size: 14px; fill: var(--ink); font-variant-numeric: lining-nums; }
.fig .name { font-family: var(--mono); font-size: 13px; }
.fig .quiet { fill: var(--ink-2); }
.fig .strong { font-weight: 600; }
.fig .small { font-size: 12px; }
.fig .box { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1; }
.fig .ground { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1; }
.fig .line { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.fig .dashed { stroke-dasharray: 4 3; }
.fig .head { fill: var(--ink-2); stroke: none; }
.fig .mark { fill: var(--accent); }
.fig text.mark { fill: var(--accent); }
.fig .mark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.fig .mark-box { fill: color-mix(in srgb, var(--accent) 9%, var(--paper)); stroke: var(--accent); stroke-width: 1.25; }

/* A chapter's outline, on its opening page: its sections, each with what it is about. */
.outline { margin-top: 1.6em; }
.outline h2, .contents > h2 { margin: 0 0 0.7em; font-family: var(--sans); font-size: 0.74em; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); }
.outline ol { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.outline li { display: grid; grid-template-columns: 3.15em 1fr; margin: 0; padding: 0.62em 0 0.6em; }
.outline li + li { border-top: 1px solid var(--rule); }
.outline a, .outline .planned { display: contents; color: var(--ink); text-decoration: none; }
.outline .no { grid-column: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.outline .title { grid-column: 2; font-weight: 600; }
.outline a:hover .title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
.outline .planned .no, .outline .planned .title { color: var(--ink-2); font-weight: 400; }
.outline .about { grid-column: 2; margin-top: 0.12em; font-size: 0.9em; line-height: 1.45; color: var(--ink-2); }

/* The contents, on the front page: the parts, their chapters, each with what it is about. */
.contents { margin-top: 2.6em; }
.contents > h2 { padding-top: 1.1em; border-top: 1.5px solid var(--ink); margin-bottom: 0; }
.contents .part { margin: 2.1em 0 0.2em; font-size: 1.08em; font-weight: 600; font-style: italic; }
.toc { margin: 0; padding: 0; list-style: none; }
.toc > li { margin: 0; padding: 0.7em 0 0.72em; border-bottom: 1px solid var(--rule); }
.toc .entry { margin: 0; font-size: 1.06em; line-height: 1.3; }
.toc .entry a, .toc .entry .planned { display: grid; grid-template-columns: 2.1em 1fr; color: var(--ink); text-decoration: none; }
.toc .entry .no { color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.toc .entry .title { font-weight: 600; }
.toc .entry a:hover .title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
.toc .entry .planned .title { font-weight: 500; }
.toc .about { margin: 0.18em 0 0 2.23em; font-size: 0.9em; line-height: 1.45; color: var(--ink-2); }
.toc .under { margin: 0.5em 0 0 2.23em; padding: 0; list-style: none; font-family: var(--sans); font-size: 0.82em; line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.toc .under li { margin: 0; padding: 0.14em 0; }
.toc .under a, .toc .under .planned { display: grid; grid-template-columns: 2.95em 1fr; color: var(--ink); text-decoration: none; }
.toc .under a:hover { color: var(--accent); }
.toc .under .no, .toc .under .planned { color: var(--ink-2); }

/* Turning the page. */
.turn { margin-top: 3.6em; }
.turn > div { display: flex; justify-content: space-between; gap: 2em; padding-top: 1.1em; border-top: 1px solid var(--rule); font-size: 1.02em; line-height: 1.3; }
.turn a { color: var(--ink); text-decoration: none; font-weight: 600; max-width: 46%; }
.turn a:hover { color: var(--accent); }
.turn a span { display: block; margin-bottom: 0.25em; font-family: var(--sans); font-size: 0.7em; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); }
.turn .no { font-weight: 400; color: var(--accent); font-variant-numeric: lining-nums; }
.turn .after { margin-left: auto; text-align: right; }

/* The foot of the page. */
.colophon { grid-area: colophon; margin-top: 4em; padding: 1.3em 0 2.4em; border-top: 1px solid var(--rule); }
.colophon div { font-family: var(--sans); font-size: 0.76em; line-height: 1.5; color: var(--ink-2); font-variant-numeric: lining-nums; }
.colophon p { margin: 0 0 0.4em; }
.colophon a { color: inherit; }

/* On paper: the page alone, in black on white whatever the reader chose on the screen. */
@media print {
  :root, :root[data-colours] { --paper: #fff; --paper-2: #f4f4f4; --ink: #000; --ink-2: #444; --rule: #bbb; --accent: #7a1f10; }
  body { display: block; font-size: 10.5pt; }
  body::before { content: none; }
  .running, .booknav, .turn { display: none !important; }
}