.article {
  /* @apply pr-8 */
  max-width: 25rem;
}

.article .tunit {
  @apply hover:bg-gray-300;
}

.article a.hide-link {
  display: none;
}

.article.show-boundary a.hide-link {
  display: inline;
}

.article.show-boundary a.show-link {
  display: none;
}

.article.show-boundary span + span.tunit::before {
  content: "🭱";
  color: brown;
  font-weight: bold;
  font-size: 130%;
  vertical-align: -2px;
}

.article h4 {
  @apply my-2 font-semibold text-lg leading-8 text-stone-800;
}

.dark .article h4 {
  @apply text-stone-300;
}

.article p, .article div {
  @apply text-justify;
}

.article p + p {
  @apply  indent-4;
}

.article blockquote {
  @apply px-4 py-2 text-sm;
}

.article a {
  @apply text-cyan-900;
}

.dark .article a {
  @apply text-cyan-700;
}

.article ul {
  @apply pl-6 list-disc my-2;
}

.article ol {
  @apply pl-8 list-decimal my-2;
}

.article li {
  @apply text-justify;
}

.article img {
    max-width: 100%;
    height: auto;
}

.article img + div, a + div {
  font-size: smaller;
  margin-bottom: 0.6ex;
}