/* 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, what the reader can set (the contents
   opened, on a narrow screen where they are not beside the page; the colours), and the book's
   repository, as its mark. */
.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; }
.running .github { display: inline-flex; align-items: baseline; gap: 0.4em; color: var(--ink-2); text-decoration: none; }
.running .github:hover, .running .github:focus-visible { color: var(--ink); text-decoration: none; }
.running .github svg { position: relative; top: 0.14em; width: 1.1em; height: 1.1em; fill: currentColor; }

/* 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 .parts > li + li > .chapters:first-child { margin-top: 1.1em; }  /* a chapter outside the parts, after one */
.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); }
  /* Sticky at the top of the screen and as tall as it; but it begins under the running head, so until the
     page has scrolled past the head its last lines stand below the screen. The padding at its foot is more
     than the head is tall, so that the last chapter is in reach from the top of the page too. */
  .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 5.5rem 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. The words
   are the renderer's, from the recording's first line (render.py, recording_label). */
pre[data-kind="recording"]::before { content: attr(data-label); 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 .group { margin: 1.7em 0 0.4em; font-size: 1.08em; font-weight: 600; font-style: italic; }
.outline h2 + .group { margin-top: 0.4em; }
.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; }
.contents > h2 + .toc { margin-top: 1.2em; }  /* a chapter before the first part */
.contents .toc + .toc { margin-top: 2.1em; }  /* a chapter outside the parts, after one */
.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; }
.contents + .turn { margin-top: 1.6em; }  /* the contents end in a rule of their own */
.contents + .turn > div { border-top: 0; padding-top: 0; }

/* 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; }
}