:root {
  --color-fg: #171D1A;
  --color-bg: #F3F5F3;
  --color-2nd-fg: #4A5651;
  --color-2nd-bg: #E9EDEA;
  --color-3rd-fg: #6F7B76;
  --color-line: #CBD3CE;
  --color-line-soft: #DDE3DF;
  --color-accent: #1F6F5B;
  --color-accent-soft: #D8E9E2;
  --color-ochre: #9A6B1F;
  --color-code-bg: #E6EBE8;
  --color-pre-border: #CBD3CE;

  --font-body: sans-serif;
  --font-display: serif;
  --font-mono: monospace;

  color:            var(--color-fg);
  background-color: var(--color-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #E4EAE7;
    --color-bg: #121716;
    --color-2nd-fg: #A7B3AE;
    --color-2nd-bg: #19201E;
    --color-3rd-fg: #7E8A85;
    --color-line: #2C3733;
    --color-line-soft: #222B28;
    --color-accent: #5CC2A2;
    --color-accent-soft: #1B3A31;
    --color-ochre: #D9A85A;
    --color-code-bg: #1C2522;
    --color-pre-border: #2C3733;
  }
}

a {
  color: var(--color-accent);
}

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


/* General declarations */

body {
  margin: 0px auto;
  padding: 1%;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 25px; }
h4, h5, h6 { font-size: 20px; }

code, pre, .mono {
  font-family: var(--font-mono);
}

code {
  background-color: var(--color-code-bg);
}

.icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}


/* Navigation header */

header {
  margin-bottom: 30px;
  padding: 12px 0px 12px 0px;
}

nav, nav ol {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

nav ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}


nav a {
  font-size: 18px;
  margin: 12px;
  text-decoration: none;
}

nav a img {
  width: 32px;
  height: 32px;
}

nav ol.languages {
  margin-left: auto;
}

nav ol.languages a, nav ol.languages li {
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 6px;
}

nav ol.languages li {
  color: var(--color-fg);
}

nav ol.languages a,
nav ol.languages a:visited {
  color: var(--color-2nd-fg);
}

nav ol.languages a:hover {
  color: var(--color-fg);
}

#tagline {
  margin: 0px 12px 6px 12px;
  font-size: 14px;
  color: var(--color-2nd-fg);
}


/* A published recording */

#media video, #media audio {
  width: 100%;
  max-width: 100%;
}

#media-links {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-2nd-fg);
}


/* Article bodies */

#published-at, #updated-at {
  color: var(--color-2nd-fg);
  font-size: 14px;
  font-style: italic;
}

blockquote {
  font-style: italic;
  color: var(--color-2nd-fg);
  padding-left: 10px;
  border-left: 3px solid var(--color-2nd-fg);
}

.collection-list {
  list-style-type: none;
}

.collection-list li {
  margin: 20px 0px;
}


/* Footer */

body > footer {
  font-size: 14px;
  padding: 12px 0px 12px 0px;
}

body > footer li {
  list-style-type: none;
  margin-top: 10px;
}

body > footer li a {
  margin-left: 5px;
}

.content-footer, .page-footer, #footnotes {
  border-top: 0.5px solid var(--color-2nd-fg);
}



table.tableblock {
  border-collapse: collapse;
  margin: 16px 0px;
}

table.tableblock td, table.tableblock th {
  text-align: left;
  vertical-align: top;
  padding: 6px 24px 6px 0px;
  border-bottom: 1px solid var(--color-line-soft);
}

table.tableblock th {
  color: var(--color-2nd-fg);
  font-size: 14px;
}

table.tableblock p {
  margin: 0px;
}


/* Code blocks */

/* The "lineno" class is the default generated by Rouge for table-row in code blocks, see:
   https://github.com/rouge-ruby/rouge */
pre.lineno {
  margin-right: 3px;
  padding-right: 3px;
  border-right: 1px solid;
  border-color: var(--color-pre-border);
  text-align: right;
  user-select: none;
}

.highlight, .listingblock .content {
  border: 1px solid;
  border-color: var(--color-pre-border);
  border-radius: 10px;
  background-color: var(--color-code-bg);
}

/* A line wider than the page scrolls, and only the code does, so the
   numbers stay where they are.
   
   Saying "overflow" on the pre alone does nothing while the two sit
   in a table: a table grows to fit what it holds, so the pre is never
   narrower than its longest line and never has anything to scroll.
   Telling the cell it may be narrower is a hint a table is free to
   ignore, and Firefox ignores it.  A row laid out as a flex line is
   not: "min-width: 0" there is honoured, and the code finally has a
   box smaller than its content to scroll inside.
   
   Pinning the numbers instead --- leaving them in the scrolling box
   and sticking them to its edge --- was tried and taken out.  Nothing
   uncovers them, but a scroll draws the two out of step for a frame
   and the code is seen crossing them. */
.listingblock table,
.listingblock tbody {
  display: block;
}

.listingblock tr {
  display: flex;
}

.listingblock td {
  display: block;
}

.listingblock td:first-child {
  flex: 0 0 auto;
}

.listingblock td:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.listingblock td:last-child pre {
  overflow-x: auto;
}

.highlight {
  overflow-x: auto;
}

pre {
  overflow: auto;
}


/* Code block anchors */

a.code-line-anchor {
  color: var(--color-fg);
  user-select: none;
  text-decoration: none;
}

a.code-line-anchor:hover {
  text-decoration: underline;
}


/* Header anchor */

div.header-anchor {
  color: var(--color-fg);
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

div.header-anchor h1,
div.header-anchor h2,
div.header-anchor h3,
div.header-anchor h4,
div.header-anchor h5,
div.header-anchor h6 {
  display: inline;
}


div.header-anchor img {
  visibility: hidden;
}

div.header-anchor:hover img {
  visibility: visible;
}


/* Plaintext code block links */

.plaintext {
  margin: auto auto 0 auto;
  text-align: right;
  font-family: var(--font-mono);
}

a.anchor {
  background: transparent url(img/link.svg) center right no-repeat;
  padding-right: 22px;
  margin-left: 10px;
  visibility: hidden;
}

h2:hover a.anchor {
  visibility: visible;
}


/* Fix asciidoc shortcoming */

.line-through {
  text-decoration: line-through;
}


/* A reply is written inside what it answers, so the indent comes
   from the nesting and not from counting depth: one margin a level,
   and a rail down the left of each that stacks with its parents'.
   The card carries the box, so nesting costs a margin rather than
   the whole of a parent's padding and border as well. */
#comments .message .message {
  margin-left: 1rem;
  border-left: 3px solid var(--color-line);
  padding-left: 0.75rem;
}

#comments .message-card {
  background-color: var(--color-2nd-bg);
  border: 1px solid;
  border-color: var(--color-pre-border);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}


#comments .message-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  font-size: 0.9em;
}

#comments .from {
  font-weight: bold;
}

#comments .date, #comments .reply, #comments .handle {
  color: var(--color-2nd-fg);
}

#comments .handle {
  font-weight: normal;
}

#comments .message-body {
  background-color: transparent;
  border: none;
  overflow-wrap: anywhere;
  font-size: 0.9em;
}

#comments pre.message-body { white-space: pre-wrap; }
#comments div.message-body p { margin: 0.5em 0; }
#comments div.message-body p:first-child { margin-top: 0; }
#comments div.message-body p:last-child { margin-bottom: 0; }

/* A narrow screen has no room for a rem a level: this site's threads
   reach depth 8, and eight rems of nesting leaves about ten for the
   words on a 390px phone.  The margin goes and the rails do the
   work, each level costing only the width of its own rule.  Past
   the sixth the rails stop stacking --- which is what the depth on
   the element is for, since CSS cannot count ancestors. */
@media (max-width: 40rem) {
  #comments .message .message {
    margin-left: 0;
    padding-left: 0.5rem;
  }

  #comments .message[data-depth="7"],
  #comments .message[data-depth="8"] {
    border-left-color: var(--color-accent);
  }
}