/* ========================================
   Fonts
   ======================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ========================================
   Reset and Variables
   ======================================== */

*, *::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;
}

/* ========================================
   Layout
   ======================================== */

body {
  max-width: var(--size-maxWidth);
  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 {
    width: auto;
    height: var(--fontSize-medium);
    margin: 0;
    padding: var(--size-2);

    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 {
    summary {
      color: var(--colour-foreground);
    }

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

    li {
      margin: 0.5em 0;

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

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

  font: normal var(--fontSize-xSmall) var(--fontFamily-sansSerifCaps);
  text-transform: uppercase;
  letter-spacing: 0.924px;
}

/* ========================================
   Typography
   ======================================== */

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

  &:has(> img) {
    display: block;
    width: fit-content;
    margin: auto;
  }

  img:hover {
    cursor: zoom-in;
  }
}

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

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

  a {
    text-decoration: none;
  }
}

blockquote {
  padding: 0 2em;

  p {
    margin: 0;

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

hr {
    margin: var(--size-7) auto;

    border: none;
}

hr::before {
    content: "⁂";
    width: 100%;
    display: inline-block;
    text-align: center;

    font-size: var(--fontSize-large);
    color: var(--colour-normalSubtle);
}

/* ========================================
   Media
   ======================================== */

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

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

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

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

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

  .metadata {
    font: normal var(--fontSize-xxSmall) var(--fontFamily-sansSerifCaps);
  }
}

/* ========================================
   Components
   ======================================== */

details {
    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;

      cursor: pointer;
      list-style: none;
    }

    summary::after {
      content: "+";

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

    .code-container {
        margin: 0;

        border: none;
    }
}

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

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

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

  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 {
  margin: var(--size-7) 0;
  padding: var(--size-2);
  overflow-x: auto;

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

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

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

  .syntax-highlighting {
    .err, .esc, .g, .l, .n, .x, .p, .gd, .ge, .ges, .gr, .gh, .gi, .go,
    .gp, .gs, .gu, .gt, .ld, .na, .nc, .no, .ni, .nl, .nn, .nx, .py, .nv,
    .ow, .pm, .w, .vc, .vg, .vi, .vm {
      color: var(--colour-normal);
    }

    .cp, .kn, .m, .s, .mb, .mf, .mh, .mi, .mo, .sa, .sb, .sc, .sd, .s2,
    .se, .sh, .si, .sx, .sr, .s1, .ss, .il {
      color: var(--colour-normalSubtle);
    }

    .c, .ch, .cm, .cpf, .c1 {
      color: var(--colour-backgroundSubtle);
    }

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

    .nb, .nd, .nf, .bp, .fm {
      color: var(--colour-foreground);
      font-style: italic;
    }

    .o, .kt {
      color: var(--colour-normal);
      font-weight: bold;
    }

    .k, .kc, .kd, .kp, .kr, .ne {
      color: var(--colour-foreground);
      font-weight: bold;
    }

    .hll {
        background-color: var(--colour-backgroundVerySubtle);
        border: 1px solid var(--colour-backgroundVerySubtle);
    }
  }
}

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

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

.articles {
  ul {
    margin: 0;

    list-style: none;
  }

  li {
    margin: 1.4em 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);
    }
  }
}

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

.footnotes {
  margin-left: 1.5em;

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

  .footnote-return {
    font-size: var(--fontSize-medium);
    line-height: 1;
    text-decoration: none;
  }
}