.article {
  font-family: var(--font-mincho);
  line-height: 1.5rem;

  padding: 2rem 1rem;
  max-width: 50rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  &.article--default {
    font-family: var(--font-mincho);
      letter-spacing: .12em;
  }

  &.article--casual {
    font-family: var(--font-sans);
    letter-spacing: .08em;
  }

  &.article--novel {
    font-family: var(--font-mincho);
    letter-spacing: .12em;

    .article__content {
      margin: 2rem 0;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      gap: 2rem;

      max-width: 95vw;

      overflow-x: scroll;

      .article__content__title {
        border-bottom: none;
      }

      .article__content__body {
        max-height: 30rem;
      }
    }
  }

  .article__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .article__content__title {
      font-weight: normal;
      font-size: var(--font-large-responsive);

      margin: 0 0 1rem;
      padding-bottom: .2rem;
      border-bottom: 1px dotted var(--color-ink);
    }

    .article__content__body {
      font-size: .85rem;

      @media (max-width: 70ch) {
        font-size: var(--font-small-responsive);
      }

      :is(img), :is(iframe) {
        max-width: 80vw;
        max-height: 20rem;

        border: none;
      }

      .twitter-tweet, .instagram-media {
        margin-top: 1rem !important;
        min-width: 20% !important;
        max-width: 50ch !important;
      }
    }
  }

  .article__meta {
    font-size: var(--font-x-small-responsive);
    margin: 0;
    margin-top: 2rem;

    @media (max-width: 70ch) {
      font-size: var(--font-small-responsive);
    }
  }

  .article__action-buttons {
    margin-top: 2rem;

    display: flex;
    flex-direction: row;
    gap: .5rem;

    :is(a) {
      font-size: var(--font-x-small-responsive);
      text-transform: uppercase;
      color: var(--color-ink);
      cursor: pointer;
      text-decoration: none;

      padding: 0 0 0 .1rem;

      border-bottom: 1px solid var(--color-ink);

      @media (max-width: 70ch) {
        font-size: var(--font-small-responsive);
      }

      &:hover {
        color: var(--color-link);
        border-bottom: 1px solid var(--color-link);
      }
    }
  }
}