/* This file was generated with the assistance of an AI coding tool. */

/* A stylesheet for reading, adapted from the one at bonsai.postle.net. That
   site is a linear guide with a "chapters" pager; this one is a wiki-like
   collection of standalone articles, so the differences from the sister
   stylesheet are: no prev/next pager, an alphabetical "All pages" list
   instead of a weight-ordered chapter list, and serif set everywhere rather
   than switching to a sans face for headings and furniture.

   Light by default, dark for readers whose system asks for it. No
   JavaScript, and no external requests: the one web font is served from
   this site, and the only request a page makes to anybody else is a link
   the reader clicks. */

/* Body type: XCharter, Michael Sharpe's extension of Bitstream Charter, cut
   down to the characters this site uses and served from here. Four faces,
   about 17k each. See `/fonts/LICENCE.txt` - Bitstream's 1989 grant is what
   makes self-hosting it legitimate. Used for everything on the page,
   headings included - there is no second, sans-serif face here. */

@font-face {
  font-family: "XCharter";
  src: url("/fonts/xcharter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("/fonts/xcharter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("/fonts/xcharter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("/fonts/xcharter-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --serif: "XCharter", Charter, "Bitstream Charter", "Sitka Text", Cambria,
    Georgia, "Noto Serif", "Liberation Serif", serif;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono",
    "SFMono-Regular", Menlo, monospace;

  /* Warm off-white rather than paper white: less glare over long reading. */
  --bg: #fbfaf8;
  --surface: #fff;
  --text: #1c1b19;
  --muted: #5c5850;
  --rule: #e3ded4;

  /* Vermilion, darkened from the textbook #e34234 so link text clears
     4.5:1 against --bg. This is the site's one accent colour: links, the
     "you are here" marker in the page list, the rule under the masthead,
     and the blockquote rail all use it, nothing else does. */
  --accent: #c33a1f;
  --link: var(--accent);
  --link-visited: #8a4a30;
  --mark: #fbe0d6;
  --code-bg: #f2efe8;
  --code-text: #3a352c;

  /* The column, in one place. Change these three and the whole page follows.

     --measure is in `em`, NOT `rem`, and that is load-bearing. It is only ever
     used in `grid-template-columns` on `body`, so it resolves against the body
     type below, which is a clamp() that grows with the viewport. In `rem` it
     would resolve against the root's fixed 16px instead, and the column would
     stay 560px however large the type got - so the line would hold *fewer*
     characters the wider the screen, which is backwards. In `em` the column
     tracks the type and holds ~70 characters at every width. */
  --measure: 34em;
  --sidebar: 15rem;
  --gutter: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Not black on white inverted - a soft grey on charcoal, which is what
       stops the text glowing at night. */
    --bg: #16171a;
    --surface: #1d1f23;
    --text: #dbdcdf;
    --muted: #9b9da3;
    --rule: #303338;

    /* Lightened and desaturated just enough to clear 4.5:1 on charcoal
       while still reading unmistakably as the same vermilion. */
    --accent: #ff8a68;
    --link-visited: #d9a98a;
    --mark: #4a2419;
    --code-bg: #22252b;
    --code-text: #cfd1d6;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 2rem clamp(1.1rem, 4vw, 2.5rem) 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  /* Grows with the viewport, then stops - at 1440px and up. The column is
     sized in `em` off this, so raising the ceiling widens the text as well as
     enlarging it, which is what keeps a wide screen from stranding the page
     in the middle of a field of white. */
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;

  /* Narrow screens: title, article, page list, footer, in that order. */
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, var(--measure));
  grid-template-areas:
    "header"
    "main"
    "nav"
    "footer";
  column-gap: var(--gutter);
}

/* Wide screens: the page list becomes a sidebar and leaves the text alone.
   It sits after the article in the source, so a screen reader, a terminal
   browser and the tab key all reach the writing first. */
@media (min-width: 64em) {
  body {
    grid-template-columns: var(--sidebar) minmax(0, var(--measure));
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5em 0.9em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* Links ---------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--mark);
  color: var(--text);
}

/* Masthead -------------------------------------------------------------- */

.site-header {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.9em;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  /* The one deliberately loud use of the accent colour: a thin vermilion
     rule under the masthead, on every page. */
  border-bottom: 2px solid var(--accent);
}

.site-header .site-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}

.site-header .site-title:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-header .tagline {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted);
}

/* The article ----------------------------------------------------------- */

main {
  grid-area: main;
  min-width: 0;
}

.content-inner > :first-child {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.3rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

/* Headings need room above and very little below, so a section reads as one
   block rather than as a label floating between two. */
h2 {
  font-size: 1.35rem;
  margin: 2.8rem 0 0.6rem;
}

h3 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

p,
ul,
ol,
blockquote,
pre,
table {
  margin: 0 0 1.15rem;
}

/* Prose lists sit close to the paragraph they belong to. */
main ul,
main ol {
  padding-left: 1.4em;
}

main li + li {
  margin-top: 0.4em;
}

main li > ul,
main li > ol {
  margin: 0.4em 0 0;
}

strong {
  font-weight: 700;
}

blockquote {
  padding-left: 1.1em;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

hr {
  height: 0;
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Code ------------------------------------------------------------------ */

code,
kbd,
samp {
  font-family: var(--mono);
  /* Mono faces run large next to a serif; `em` keeps it in proportion
     whatever the reader's font size. */
  font-size: 0.88em;
}

:not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 3px;
  overflow-wrap: break-word;
}

pre {
  padding: 0.9em 1.1em;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 5px;
  line-height: 1.45;
  /* Long command lines scroll inside the block, never the page. */
  overflow-x: auto;
}

pre code {
  font-size: 0.85em;
}

/* Tables ---------------------------------------------------------------- */

.content-inner table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.content-inner th,
.content-inner td {
  padding: 0.45em 0.7em 0.45em 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.content-inner th {
  font-weight: 700;
}

/* Images and figures ------------------------------------------------------ */

.content-inner img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

/* This site's convention is an image on its own line, then a `*Figure: ...*`
   paragraph directly under it - two sibling <p> elements once rendered.
   :has() reaches across that gap without needing a class in the markdown. */
.content-inner p:has(> img:only-child) + p:has(> em:only-child) {
  margin-top: -0.7rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}

/* The dateline at the foot of a page. */
.dateline {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}

/* Front page article index ----------------------------------------------- */

.is-home main dl {
  margin: 2.5rem 0 0;
}

.is-home main dt {
  margin-top: 1.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.is-home main dd {
  margin: 0.25em 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* The "All pages" list ---------------------------------------------------- */

nav.all-pages {
  grid-area: nav;
}

/* On the front page the whole list is already there, with descriptions, so
   there is no sidebar and the article keeps the middle of the page. The list
   is not emitted at all on the home page - `baseof.html` skips it, because
   hiding it here left it in the source for a terminal browser to print a
   second time. */
body.is-home {
  grid-template-columns: minmax(0, var(--measure));
  grid-template-areas:
    "header"
    "main"
    "footer";
}

nav.all-pages h2 {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

nav.all-pages ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  line-height: 1.35;
}

nav.all-pages li {
  margin-bottom: 0.55em;
}

nav.all-pages a {
  color: var(--muted);
  text-decoration: none;
}

nav.all-pages a:visited {
  color: var(--muted);
}

nav.all-pages a:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Where you are now, marked with the accent colour as well as weight, so it
   doesn't rely on colour alone (it's also the only bold entry in the list). */
nav.all-pages [aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

/* Below the article on a narrow screen, so give it a rule of its own. */
nav.all-pages {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 64em) {
  nav.all-pages {
    margin-top: 0;
    padding-top: 0.4rem;
    border-top: 0;
    /* Follows you down a long page, and scrolls itself if it has to. */
    position: sticky;
    top: 2rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* Footer ---------------------------------------------------------------- */

footer.site-footer {
  grid-area: footer;
  margin-top: 3.5rem;
  padding: 1.2rem 0 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

footer.site-footer p {
  margin: 0;
}

footer.site-footer a {
  color: var(--muted);
}

/* Paper ----------------------------------------------------------------- */

@media print {
  body {
    display: block;
    max-width: none;
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  nav.all-pages,
  .skip-link {
    display: none;
  }

  a {
    color: #000;
  }

  /* Links are no use on paper unless they say where they go. */
  .content-inner a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--mono);
    font-size: 0.8em;
    word-break: break-all;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  pre,
  blockquote {
    break-inside: avoid;
  }
}