.container,
.content-column {
  max-width: var(--content-width);
  width: 100%;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
}

#main-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.site-header {
  padding-top: 2rem;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;

  h1,
  .site-title {
    font-size: var(--font-size);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;

    a {
      color: var(--color-ink);
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
      }
    }
  }
}

.nav-links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;

  a {
    color: var(--color-ink-label);
    font-size: var(--font-size);
    text-decoration: none;
    transition: color 0.15s ease;

    &:hover,
    &.active {
      color: var(--color-ink);
    }
  }
}

img:not([src]) {
  visibility: hidden;
}

@-moz-document url-prefix() {
  img:-moz-loading {
    visibility: hidden;
  }
}