: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 inside the box that frames it.
   Saying so on the pre alone is not enough: the line numbers sit in a
   table cell beside the code, and a table grows to fit what it holds,
   so the pre is never narrower than its longest line and never has
   anything to scroll.  The box scrolls instead, and the numbers stay
   where they are while the code moves under them. */
.highlight, .listingblock .content {
  overflow-x: auto;
}

/* Collapsed, so the numbers sit flush against the code.  Left
   separate, the cells stand two pixels apart: pinning the first to
   the left edge moves it by that much, and the gap it leaves is a
   strip the code scrolls through in plain view. */
.listingblock table {
  border-collapse: collapse;
}

.listingblock td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--color-code-bg);
}

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);
  }
}