@font-face {
  font-family: Equity;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-regular.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: Equity;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-bold.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-bold.subset.woff2") format("woff2");
}

@font-face {
  font-family: Equity;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-italic.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: Equity;
  font-weight: bold;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-bold-italic.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-bold-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Equity Caps";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-caps-regular.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-caps-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Equity Caps";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Equity/woff/equity-a-caps-bold.subset.woff") format("woff");
  src: url("/fonts/Equity/woff2/equity-a-caps-bold.subset.woff2") format("woff2");
}

@font-face {
  font-family: Concourse;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-regular.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: Concourse;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-bold.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-bold.subset.woff2") format("woff2");
}

@font-face {
  font-family: Concourse;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-italic.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: Concourse;
  font-weight: bold;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-bold-italic.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-bold-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Concourse Caps";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-caps-regular.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-caps-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Concourse Caps";
  font-style: normal;
  font-weight: bold;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Concourse/woff/concourse-4-caps-bold.subset.woff") format("woff");
  src: url("/fonts/Concourse/woff2/concourse-4-caps-bold.subset.woff2") format("woff2");
}

@font-face {
  font-family: Triplicate;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-regular.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: Triplicate;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-bold.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-bold.subset.woff2") format("woff2");
}

@font-face {
  font-family: Triplicate;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-italic.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: Triplicate;
  font-weight: bold;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-bold-italic.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-bold-italic.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Triplicate Caps";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-caps-regular.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-caps-regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Triplicate Caps";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("/fonts/Triplicate/woff/triplicate-a-code-caps-bold.subset.woff") format("woff");
  src: url("/fonts/Triplicate/woff2/triplicate-a-code-caps-bold.subset.woff2") format("woff2");
}

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

:root {
  --colour-foreground: #222;
  --colour-background: #f5eee6;
  --colour-backgroundSubtle: #999;
  --colour-backgroundVerySubtle: #e5e5e5;
  --colour-normal: #424242;
  --colour-normalSubtle: #767676;

  --fontSize-xxSmall: 0.75rem;
  --fontSize-xSmall: 0.9rem;
  --fontSize-small: 1rem;
  --fontSize-medium: 1.2rem;
  --fontSize-large: 1.35rem;
  --fontSize-xLarge: 1.6rem;
  --fontSize-xxLarge: 2rem;

  --fontFamily-serif: Equity, serif;
  --fontFamily-serifCaps: "Equity Caps", serif;
  --fontFamily-sansSerif: Concourse, sans-serif;
  --fontFamily-sansSerifCaps: "Concourse Caps", sans-serif;
  --fontFamily-monospace: Triplicate, monospace;
  --fontFamily-monospaceCaps: "Triplicate Caps", monospace;

  --size-1: 1px;
  --size-2: 2px;
  --size-3: 4px;
  --size-4: 8px;
  --size-5: 12px;
  --size-6: 16px;
  --size-7: 24px;
  --size-8: 32px;
  --size-9: 48px;
  --size-maxWidth: 512px;
}

body {
  max-width: var(--size-maxWidth);
  min-height: 100vh;
  margin: auto;

  font: normal var(--fontSize-medium) var(--fontFamily-serif);
  line-height: 1.4;
  color: var(--colour-normal);
  text-rendering: optimizelegibility;
  font-feature-settings: "kern";

  background-color: var(--colour-background);
}

body.dark-mode {
  --colour-foreground: #f5eee6;
  --colour-background: #222;
  --colour-backgroundSubtle: #545454;
  --colour-backgroundVerySubtle: #303030;
  --colour-normal: #ccc;
  --colour-normalSubtle: #767676;
}

@media screen and (max-width: 535px) {
  body {
      margin: 0 var(--size-5);
  }
}

nav {
  display: flex;
  justify-content: space-between;
  margin: var(--size-7) 0 var(--size-9) 0;

  a {
    line-height: 1;
    text-decoration: none;
  }

  #theme-toggle {
    background: none;
    border: var(--size-2) solid var(--colour-backgroundSubtle);
    border-radius: var(--size-3);
  }

  #theme-toggle--icon {
    margin: 0;
    padding: var(--size-2);
    width: auto;
    height: var(--fontSize-medium);

    cursor: pointer;
  }
}

main {
  margin-bottom: var(--size-8);
}

header {
  margin: var(--size-9) 0;

  .description {
    margin: var(--size-4) 0 0 0;

    font-size: var(--fontSize-small);
  }

  .timestamp {
    margin-top: var(--size-4);

    font-size: var(--fontSize-xSmall);
  }

  .contents {
    margin: var(--size-6) 0;

    border: var(--size-2) solid var(--colour-backgroundSubtle);
    border-radius: var(--size-3);

    summary {
      display: flex;
      justify-content: space-between;
      padding: 0.25em 0.5em;

      color: var(--colour-foreground);

      cursor: pointer;
      list-style: none;
    }

    summary::after {
      content: "+";

      font-size: var(--fontSize-xLarge);
      line-height: 1;
      color: var(--colour-foreground);
      text-align: end;
    }

    ul {
      margin: 0.45em 0 0.55em 1.6em;
    }

    li {
      margin: 0.5em 0;

      font-size: var(--fontSize-small);
    }
  }

  .contents[open] {
    summary {
      border-bottom: var(--size-2) solid var(--colour-backgroundSubtle);
    }

    summary::after {
      content: "−";
    }
  }
}

h1, h2, h3, h4 {
  font-weight: normal;
  line-height: 1.2;
  color: var(--colour-foreground);

  a {
    text-decoration: none;
  }
}

h1 {
  font-size: var(--fontSize-xxLarge);
}

h2 {
  margin-top: 1.2em;

  font-size: var(--fontSize-xLarge);
}

h3 {
  margin-top: 1em;

  font-size: var(--fontSize-large);
}

h4 {
  margin-top: 0.85em;

  font-size: var(--fontSize-medium);
}

p {
  margin: 0.85em 0;
}

ol, ul {
  margin: 0.85em 0 0.85em 2em;
}

li {
  margin: 0.65em 0;

  font-size: var(--fontSize-medium);
}

@media screen and (min-width: 536px) {
  p, li {
    text-align: justify;
    hyphens: auto;
    hyphenate-limit-chars: 6 4 4;
  }
}

a {
  color: var(--colour-foreground);
}

.articles {
  ul {
    margin: 0;

    list-style: none;
  }

  li {
    margin: 1.25em 0;
  }

  div {
    display: flex;
    justify-content: space-between;
  }

  h2 {
    margin: 0;

    font-size: var(--fontSize-small);
  }

  time {
    margin: auto 0;

    font: normal var(--fontSize-xxSmall) var(--fontFamily-monospace);
  }

  p {
    margin: var(--size-3) 0 0 0;

    font-size: var(--fontSize-small);
  }
}

@media screen and (max-width: 535px) {
  .articles {
    div {
      flex-direction: column;
    }

    time {
      margin-top: var(--size-4);
    }
  }
}

sup {
  display: inline-block;
  margin-top: calc(-1 * var(--size-3));
  padding-left: 0.1em;

  font-size: var(--fontSize-xSmall);

  a {
    text-decoration: none;
  }
}

figure {
  margin: var(--size-8) 0;

  img, a img {
    margin: var(--size-4) 0;
  }

  figcaption, cite {
    font-size: var(--fontSize-small);
    text-align: center;
  }

  cite {
    display: block;
    padding-top: 0.25em;
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--size-8) 0;
}

blockquote {
  padding: 0 2em;

  p {
    margin: 0;
    font-size: var(--fontSize-small);
  }
}

table {
  margin: var(--size-7) auto;
  border-collapse: collapse;

  font-size: var(--fontSize-small);
  font-feature-settings: "tnum";
}

tr + tr {
  border-top: var(--size-1) solid var(--colour-backgroundSubtle);
}

th, td {
  padding: 0.3em 0.4em;

  text-align: center;
}

th:first-child, td:first-child {
  text-align: left;
}

th + th, td + td {
  padding-left: 1.2em; 
}

th {
  font-family: var(--fontFamily-sansSerifCaps);
  font-weight: normal;
  text-transform: lowercase;
  color: var(--colour-foreground);
}

td {
  font-family: var(--fontFamily-sansSerif);
}

code {
  font: normal var(--fontSize-small) var(--fontFamily-monospace);
}

.code-container {
  max-width: var(--size-maxWidth);
  margin: var(--size-7) 0;
  padding: var(--size-2);

  font-size: var(--fontSize-xSmall);
  line-height: 1.25;

  border: var(--size-2) solid var(--colour-backgroundSubtle);
  border-radius: var(--size-3);
  overflow-x: auto;

  code {
    font-size: var(--fontSize-xSmall);
  }

  .syntax-highlighting {
    .c {
      color: var(--colour-backgroundSubtle);
    }

    .err {
      color: var(--colour-normal);
    }
    .esc {
      color: var(--colour-normal);
    }

    .g {
      color: var(--colour-normal);
    }

    .k {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .l {
      color: var(--colour-normal);
    }

    .n {
      color: var(--colour-normal);
    }

    .o {
      color: var(--colour-foreground);
    }

    .x {
      color: var(--colour-normal);
    }

    .p {
      color: var(--colour-normal);
    }

    .ch {
      color: var(--colour-backgroundSubtle);
    }

    .cm {
      color: var(--colour-backgroundSubtle);
    }
    
    .cp {
      color: var(--colour-normalSubtle);
    }

    .cpf {
      color: var(--colour-backgroundSubtle);
    }

    .c1 {
      color: var(--colour-backgroundSubtle);
    }

    .cs {
      color: var(--colour-normalSubtle);
      font-style: italic;
    }

    .gd {
      color: var(--colour-normal);
    }

    .ge {
      color: var(--colour-normal);
    }

    .ges {
      color: var(--colour-normal);
    }

    .gr {
      color: var(--colour-normal);
    }

    .gh {
      color: var(--colour-normal);
    }

    .gi {
      color: var(--colour-normal);
    }

    .go {
      color: var(--colour-normal);
    }

    .gp {
      color: var(--colour-normal);
    }

    .gs {
      color: var(--colour-normal);
    }

    .gu {
      color: var(--colour-normal);
    }
    
    .gt {
      color: var(--colour-normal);
    }
    
    .kc {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .kd {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .kn {
      color: var(--colour-normalSubtle);
    }

    .kp {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .kr {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .kt {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .ld {
      color: var(--colour-normal);
    }

    .m {
      color: var(--colour-normalSubtle);
    }

    .s {
      color: var(--colour-normalSubtle);
    }

    .na {
      color: var(--colour-normal);
    }

    .nb {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .nc {
      color: var(--colour-normal);
    }

    .no {
      color: var(--colour-normal);
    }

    .nd {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .ni {
      color: var(--colour-normal);
    }

    .ne {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .nf {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .nl {
      color: var(--colour-normal);
    }

    .nn {
      color: var(--colour-normal);
    }

    .nx {
      color: var(--colour-normal);
    }

    .py {
      color: var(--colour-normal);
    }

    .nt {
      color: var(--colour-normalSubtle);
      font-style: italic;
    }

    .nv {
      color: var(--colour-normal);
    }

    .ow {
      color: var(--colour-normal);
    }

    .pm {
      color: var(--colour-normal);
    }

    .w {
      color: var(--colour-normal);
    }

    .mb {
      color: var(--colour-normalSubtle);
    }

    .mf {
      color: var(--colour-normalSubtle);
    }

    .mh {
      color: var(--colour-normalSubtle);
    }

    .mi {
      color: var(--colour-normalSubtle);
    }

    .mo {
      color: var(--colour-normalSubtle);
    }

    .sa {
      color: var(--colour-normalSubtle);
    }

    .sb {
      color: var(--colour-normalSubtle);
    }

    .sc {
      color: var(--colour-normalSubtle);
    }

    .dl {
      color: var(--colour-normalSubtle);
      font-style: italic;
    }

    .sd {
      color: var(--colour-normalSubtle);
    }

    .s2 {
      color: var(--colour-normalSubtle);
    }

    .se {
      color: var(--colour-normalSubtle);
    }

    .sh {
      color: var(--colour-normalSubtle);
    }

    .si {
      color: var(--colour-normalSubtle);
    }

    .sx {
      color: var(--colour-normalSubtle);
    }

    .sr {
      color: var(--colour-normalSubtle);
    }

    .s1 {
      color: var(--colour-normalSubtle);
    }

    .ss {
      color: var(--colour-normalSubtle);
    }

    .bp {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .fm {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .vc {
      color: var(--colour-normal);
    }

    .vg {
      color: var(--colour-normal);
    }

    .vi {
      color: var(--colour-normal);
    }

    .vm {
      color: var(--colour-normal);
    }

    .il {
      color: var(--colour-normalSubtle);
    }
  }
}

.math-container {
  width: calc(100vw - (2 * var(--size-5)));
  max-width: var(--size-maxWidth);
  overflow: scroll hidden;

  font-size: var(--fontSize-medium);
}

aside {
  margin: var(--size-9) 0;
}

.recommendation-heading {
  margin: 0.35em 0;

  font: normal var(--fontSize-small) var(--fontFamily-sansSerifCaps);
  text-transform: lowercase;
}

.recommendation--before, .recommendation--after {
  display: flex;
  margin: 0;
  padding: 0.25em 0.5em;
  justify-content: space-between;

  border: var(--size-2) solid var(--colour-backgroundSubtle);
  border-radius: var(--size-3);
  text-decoration: none;

  cursor: pointer;
}

.recommendation--before::before, .recommendation--after::before {
  content: "←";
}

.recommendation--after::before {
 color: var(--colour-background); 
}

.recommendation--before::after, .recommendation--after::after {
  content: "→";
}

.recommendation--before::after {
 color: var(--colour-background); 
}

.recommendation--before::before, .recommendation--before::after,
.recommendation--after::before, .recommendation--after::after {
  margin: auto 0;

  font-size: var(--fontSize-xLarge);
  line-height: 1;
}

.footnotes {
  margin-left: 1.5em;

  li {
    font-size: var(--fontSize-small);
  }

  .footnote-return {
    text-decoration: none;
  }
}