body {
  font-family: var(--font-sans);
  text-transform: none;
}

/* TOP BAR */

.topbar {
  display: flex;
  font-family: var(--font-mono);
  text-transform: uppercase;

  .back {
    flex: none;
    width: var(--line); /* square: the bar is one line tall */
    text-align: center;
    color: var(--heavy);
    background-color: var(--bg);
    box-shadow: inset 0 0 0 var(--px) var(--heavy);

    &:hover {
      background-color: var(--accent);
    }
  }

  .project {
    flex: 1;
    min-width: 0; /* long names truncate rather than widen the page */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--bg);
    background-color: var(--heavy);
  }
}

/* POST */

.post {
  .post-title {
    margin: var(--gap-section) 0 0;
    font-size: calc(var(--font-size) * 2); /* 33px */
    font-weight: 700;
    line-height: calc(var(--px) * 24); /* 36px */
    letter-spacing: -0.02em;
  }

  .post-date {
    margin-bottom: var(--gap-section);
    color: var(--tint);
    text-transform: uppercase;
  }

  h2,
  h3 {
    margin: var(--line) 0 0;
    font-size: inherit;
    font-weight: 700;
  }

  p,
  ul,
  ol,
  pre,
  blockquote {
    margin: 0 0 var(--line);
  }

  ul,
  ol {
    padding-left: var(--gap-section);
  }

  a {
    text-decoration: underline;
    text-underline-offset: var(--px);

    &:hover {
      background-color: var(--accent);
    }
  }

  img {
    display: block;
    width: 100%;
    margin: var(--line) 0;
  }

  figure {
    margin: var(--line) 0;

    figcaption {
      margin-top: var(--gap-row);
      color: var(--tint);
      font-size: calc(var(--font-size) * 0.85);
    }

    img {
      margin: 0;
    }
  }

  blockquote {
    padding-left: var(--gap-section);
    border-left: var(--px) solid var(--tint);
    color: var(--tint);
  }

  code,
  pre {
    font-family: var(--font-mono);
    text-transform: none;
  }

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

  pre {
    padding: var(--gap-group);
    overflow-x: auto;
    background-color: var(--faint);

    code {
      background: none;
    }
  }

  hr {
    margin: var(--line) 0;
    border: 0;
    border-top: var(--px) solid var(--tint);
  }
}