.root {
}

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

.h1 {
  min-width: 0;
  font-size: 33px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 20px;
  white-space: pre-line;
  text-rendering: optimizeLegibility;
  @extend .hyphenate;
  &.is-flat {
    margin-bottom: 0;
  }
}

.h2 {
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.33;
  margin-bottom: 9px;
  white-space: pre-line;
  text-rendering: optimizeLegibility;
  @extend .hyphenate;
  &.is-flat {
    margin-bottom: 0;
  }
}

.h3 {
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 5px;
  white-space: pre-line;
  text-rendering: optimizeLegibility;
  @extend .hyphenate;
  &.is-flat {
    margin-bottom: 0;
  }
}

.h4 {
  min-width: 0;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: pre-line;
  text-rendering: optimizeLegibility;
  @extend .hyphenate;
  &.is-flat {
    margin-bottom: 0;
  }
}

.h5 {
  min-width: 0;
  font-size: 11.5px;
  font-weight: bold;
  margin-bottom: 3px;
  white-space: pre-line;
  text-rendering: optimizeLegibility;
  @extend .hyphenate;
  &.is-flat {
    margin-bottom: 0;
  }
}

.p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 50ch;
  text-rendering: optimizeLegibility;
  white-space: pre-line;
  @extend .hyphenate;
  &.is-flat,
  &:last-child {
    margin-bottom: 0;
  }
}

.link {
  text-decoration: underline;
  text-decoration-color: hsla(var(--alinea-negative), 0.4);
  text-underline-offset: 0.3em;
  @extend .hyphenate;
  cursor: pointer;
  color: inherit;

  &:hover {
    text-decoration-color: currentColor;
  }
}

.monospace {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
  white-space: pre;
}

.small {
  font-size: 0.8em;
}
