.common-logo {

  a {

    align-items: center;
    color: var(--color-ink);
    display: flex;
    gap: 0.325em;

    &:before {
      background: url('/assets/images/logo.png') center 0.2375em / auto 0.8625em no-repeat var(--color-canvas-light);
      border-radius: 0.2375em;
      box-shadow: var(--box-shadow-pill);
      content: '';
      height: 1.3em;
      width: 1.3em;
    }

    svg {
      height: 100%;
      max-height: 0.8em;
      overflow: visible;
      pointer-events: none;
      width: auto;
    }

  }

  @media(hover: hover) {

    a {

      transition: transform var(--transition);
      will-change: transform;

      &:before {
        transition: box-shadow var(--transition);
      }

      &:focus,
      &:hover {

        &:before {
          box-shadow: var(--box-shadow-pill-hover);
        }

      }

      &:active {
        transform: scale(0.98) translateY(0.0125em);
      }

    }

  }

  @media(prefers-color-scheme: dark) {

    a:before {
      background-color: var(--color-canvas-light-inverted);
    }

  }

}

.common-header {

  h1,
  h2 {

    font-family: var(--font-family-scorekard);
    font-size: var(--font-size-xxx-large);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tightest);
    margin-bottom: -0.1625em;
    margin-top: -0.425em;

    a {
      color: inherit;
      text-decoration: none;
    }

  }

  h3 {
    font-family: var(--font-family-scorekard);
    font-size: var(--font-size-medium);
    font-weight: 700;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height-tightest);
    margin-bottom: -0.1875em;
    margin-top: -0.2em;
  }

  a {
    font-weight: inherit;
  }

  @media(hover: hover) {

    h1,
    h2,
    h3 {

      a {

        &:focus,
        &:hover {
          color: var(--color-blue-hover);
        }

      }

    }

  }

}

.common-content {

  p {
    font-size: var(--font-size-x-small);
    letter-spacing: var(--letter-spacing-tighter);
    margin-bottom: -0.3875em;
    margin-top: -0.5625em;
  }

}