.content {
  @mixin responsive-wrapper;
  font-family: var(--font-body);
  /* === Headings === */
  & h1 {
    margin-block: var(--el-h1-vspace-top) var(--el-h1-vspace-bottom);
    padding-bottom: var(--spacing-snug);
    border-bottom: var(--size-4) solid var(--el-h1-color);

    font-family: var(--el-h1-font-family), serif;
    font-size: var(--el-h1-font-size);
    font-weight: 400;
    line-height: var(--typo-leading-tight);
    color: var(--el-h1-color);
    text-transform: uppercase;
    letter-spacing: -0.0137em;

    & + p,
    & + ul,
    & + ol,
    & + blockquote {
      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
    }

    & + h2 {
      margin-block: calc(1em * 1.125 * var(--vspace-snug))
        calc(1em * 1.125 * var(--vspace-normal));
    }
  }

  & h2 {
    margin-block: var(--el-h2-vspace-top) var(--el-h2-vspace-bottom);
    padding-left: var(--spacing-snug);
    border-left: var(--size-4) solid var(--el-h2-color);

    font-family: var(--el-h2-font-family), serif;
    font-size: var(--el-h2-font-size);
    font-weight: 900;
    line-height: 1.1765;
    color: var(--el-h2-color);
    text-transform: uppercase;
    letter-spacing: -0.0096em;

    & + p,
    & + ul,
    & + ol,
    & + blockquote {
      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
    }

    & + h3 {
      margin-block: calc(1em * 1.125 * var(--vspace-compressed))
        calc(1em * 1.125 * var(--vspace-snug));
    }
  }

  & h3 {
    margin-block: var(--el-h3-vspace-top) var(--el-h3-vspace-bottom);
    padding: var(--spacing-tight) var(--spacing-snug);

    font-family: var(--el-h3-font-family), serif;
    font-size: var(--el-h3-font-size);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-surface-base);
    text-transform: uppercase;
    letter-spacing: -0.004em;

    background: var(--el-h3-color);
  }

  & h4 {
    margin-block: var(--el-h4-vspace-top) var(--el-h4-vspace-bottom);
    padding: var(--spacing-tight) var(--spacing-snug);
    border-top: var(--size-3) solid var(--el-h4-color);
    border-bottom: var(--size-3) solid var(--el-h4-color);

    font-family: var(--el-h4-font-family), serif;
    font-size: var(--el-h4-font-size);
    font-weight: 800;
    line-height: 1.125;
    text-transform: uppercase;
    letter-spacing: 0.0025em;
  }

  & h5 {
    margin-block: var(--el-h5-vspace-top) var(--el-h5-vspace-bottom);
    padding: var(--spacing-tight) var(--spacing-snug);

    font-family: var(--el-h5-font-family), serif;
    font-size: var(--el-h5-font-size);
    font-weight: 800;
    line-height: 1.28;
    color: var(--el-h5-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &::before,
    &::after {
      content: '';
      padding-right: var(--spacing-tight);
      line-height: 1;
    }

    &::before {
      content: '⭑';
    }

    &::after {
      content: '';
    }
  }

  & h6 {
    margin-block: var(--el-h6-vspace-top) var(--el-h6-vspace-bottom);

    font-family: var(--el-h6-font-family), serif;
    font-size: var(--el-h6-font-size);
    font-weight: 900;
    line-height: 1.4;
    color: var(--el-h6-color);
    text-transform: uppercase;
    letter-spacing: 0.035em;
  }

  & h3,
  & h4,
  & h5,
  & h6 {
    & + p,
    & + ul,
    & + ol,
    & + blockquote {
      margin-block: calc(
          1em * var(--typo-leading-normal) * var(--vspace-compressed)
        )
        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
    }
  }

  /* === Body Text === */

  & p {
    margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);

    font-family: var(--el-p-font-family), sans-serif;
    font-size: var(--el-p-font-size);
    font-weight: 400;
    line-height: var(--typo-leading-normal);
    color: var(--el-p-color);
    text-align: justify;
  }

  & blockquote {
    margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
    padding: var(--spacing-snug) 0 var(--spacing-snug)
      var(--spacing-comfortable);
    border-left: var(--size-4) solid var(--color-text-tertiary);

    font-family: var(--el-blockquote-font-family), serif;
    font-size: var(--el-blockquote-font-size);
    font-weight: 500;
    font-style: normal;
    line-height: var(--typo-leading-comfortable);
    color: var(--el-blockquote-color);
  }

  /* === Code === */

  pre {
    margin-block: var(--el-pre-vspace-top) var(--el-pre-vspace-bottom);
    padding: var(--spacing-comfortable);

    font-family: var(--el-pre-font-family), monospace;
    font-size: var(--el-pre-font-size);
    line-height: 1.5385;
    color: var(--el-pre-color);

    background: var(--el-pre-background);
  }

  code {
    padding: 0.1em 0.3em;

    font-family: var(--font-mono), monospace;
    font-size: var(--typo-size-sm);
    color: var(--color-text-inverse);

    background: var(--color-surface-inverse);
  }

  kbd {
    padding: 0.1em 0.3em;
    border: 1px solid var(--color-text-primary);
    border-radius: 2px;

    font-family: var(--font-mono), monospace;
    font-size: var(--typo-size-xs);
    color: var(--color-text-inverse);
    text-transform: uppercase;

    background: var(--color-surface-inverse);
  }

  samp {
    padding: 0.1em 0.3em;
    border-left: var(--size-1) solid var(--color-text-tertiary);

    font-family: var(--font-mono), monospace;
    font-size: var(--typo-size-sm);
    color: var(--color-text-primary);

    background: var(--color-surface-elevated-2);
  }

  var {
    font-family: var(--font-mono), monospace;
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-secondary);
  }

  /* === Lists === */

  ul,
  ol {
    margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
    font-size: var(--el-list-font-size);
    line-height: var(--typo-leading-normal);
    color: var(--el-list-color);
  }

  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-block: var(--el-list-nested-vspace-top)
      var(--el-list-nested-vspace-bottom);
  }

  li {
    margin-block: var(--el-li-vspace-top) var(--el-li-vspace-bottom);

    li {
      margin-block: var(--el-li-nested-vspace-top)
        var(--el-li-nested-vspace-bottom);
    }
  }

  ul {
    padding-left: var(--spacing-cozy);
    list-style: none;

    li {
      padding-left: var(--spacing-cozy);

      &::marker {
        content: '⎊';
        color: var(--color-text-primary);
      }
    }

    ul,
    ol {
      padding-left: var(--spacing-cozy);
    }

    ul li::marker {
      content: '⋊';
      color: var(--color-text-primary);
    }

    ul ul,
    ul ol,
    ol ul,
    ol ol {
      padding-left: var(--spacing-cozy);
    }

    ul ul li::marker,
    ol ul li::marker {
      content: '◆';
      color: var(--color-text-primary);
    }

    ul ul ul,
    ul ul ol,
    ul ol ul,
    ul ol ol,
    ol ul ul,
    ol ul ol,
    ol ol ul,
    ol ol ol {
      padding-left: var(--spacing-cozy);
    }

    ul ul ul li::marker,
    ul ol ul li::marker,
    ol ul ul li::marker,
    ol ol ul li::marker {
      content: '⯀';
      color: var(--color-text-primary);
    }
  }

  ol {
    counter-reset: ol-l1;
    contain: style;
    padding-left: var(--spacing-cozy);
    list-style: none;

    & > li {
      counter-increment: ol-l1;
      margin-left: 1.5em;
      padding-left: var(--spacing-cozy);

      &::marker {
        content: counter(ol-l1, decimal-leading-zero) '.)';
        color: var(--color-text-primary);
      }
    }
  }

  ol > li > ol {
    counter-reset: ol-l2;
    padding-left: var(--spacing-cozy);

    & > li {
      counter-increment: ol-l2;
      margin-left: 0.825em;

      &::marker {
        content: counter(ol-l2, lower-alpha) '.)';
        color: var(--color-text-primary);
      }
    }
  }

  ol > li > ul {
    padding-left: var(--spacing-cozy);
  }

  ol > li > ol > li > ol,
  ol > li > ul > li > ol {
    counter-reset: ol-l3;
    margin-left: 0;
    padding-left: var(--spacing-cozy);

    & > li {
      counter-increment: ol-l3;

      &::marker {
        content: counter(ol-l3, upper-roman) '.)';
        color: var(--color-text-primary);
      }
    }
  }

  ol > li > ol > li > ul,
  ol > li > ul > li > ul {
    padding-left: var(--spacing-cozy);
  }

  ol > li > ol > li > ol > li > ol,
  ol > li > ol > li > ul > li > ol,
  ol > li > ul > li > ol > li > ol,
  ol > li > ul > li > ul > li > ol {
    counter-reset: ol-l4;
    margin-left: 0;
    padding-left: var(--spacing-cozy);

    & > li {
      counter-increment: ol-l4;

      &::marker {
        content: counter(ol-l4, lower-greek) '.)';
        color: var(--color-text-primary);
      }
    }
  }

  ol > li > ol > li > ol > li > ul,
  ol > li > ol > li > ul > li > ul,
  ol > li > ul > li > ol > li > ul,
  ol > li > ul > li > ul > li > ul {
    padding-left: var(--spacing-cozy);
  }

  ol li,
  ul li {
    list-style-position: outside;
  }

  .list-inside ol li,
  .list-inside ul li {
    list-style-position: inside;
  }

  /* === Tables === */

  table {
    border-collapse: collapse;

    width: 100%;
    margin-block: var(--spacing-tight) var(--spacing-tight);
    border: var(--size-2) solid var(--color-text-primary);

    font-size: var(--typo-size-md);
    line-height: 1.2;

    & thead th,
    & th {
      padding: 0 var(--spacing-snug) var(--spacing-snug);

      font-family: var(--el-th-font-family), serif;
      font-size: var(--typo-size-sm);
      font-weight: 900;
      line-height: 1.2;
      color: var(--el-th-color);
      text-transform: uppercase;

      background: var(--el-th-background);
    }

    & tbody td,
    & td {
      padding: var(--spacing-snug);
      border: var(--size-1) solid var(--color-text-secondary);

      font-family: var(--el-td-font-family), monospace;
      font-size: var(--typo-size-sm);
      line-height: 1.2;
      color: var(--el-td-color);
      text-align: center;
    }
  }

  /* === DL / DT / DD === */

  dl {
    margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-snug))
      calc(1em * var(--typo-leading-normal) * var(--vspace-compressed));
    font-size: var(--typo-size-md);
    line-height: var(--typo-leading-normal);
  }

  dt {
    margin-block: calc(1em * 1.4 * var(--vspace-snug))
      calc(1em * 1.4 * var(--vspace-compressed));
    padding: var(--spacing-snug);

    font-family: var(--el-dt-font-family), serif;
    font-size: var(--typo-size-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--el-dt-color);
    text-transform: uppercase;
    letter-spacing: 0.035em;

    background: var(--el-dt-background);
  }

  dd {
    margin-block: calc(
        1em * var(--typo-leading-normal) * var(--vspace-compressed)
      )
      calc(1em * var(--typo-leading-normal) * var(--vspace-tight));
    padding: 0 var(--spacing-comfortable);

    font-family: var(--el-dd-font-family), sans-serif;
    font-size: var(--typo-size-md);
    line-height: var(--typo-leading-normal);
    color: var(--el-dd-color);
  }

  /* === HR === */

  hr {
    position: relative;

    overflow: visible;

    height: var(--size-3);
    margin-block: var(--spacing-relaxed) 0;
    border: none;

    background: var(--hr-color);

    &::after {
      content: '▼';

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      padding: 0 0.25em;

      font-size: var(--typo-size-4xl);
      line-height: var(--typo-leading-compressed);
      color: var(--hr-symbol-color);

      background: var(--hr-symbol-background);
    }
  }

  /* === Inline Elements === */

  em,
  i {
    font-style: italic;
    letter-spacing: 0.025em;
  }

  strong,
  b {
    font-weight: 900;
    letter-spacing: 0.025em;
  }

  a {
    position: relative;

    padding: 0.1em 0.2em;

    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-thickness: var(--size-1);
    text-underline-offset: 2px;

    transition:
      color 0.5s ease-in-out,
      background 0.5s ease-in-out;

    &:hover {
      cursor: pointer;
      color: var(--color-surface-base);
      text-decoration: none;
      background: var(--color-text-primary);
    }

    &:visited,
    &:active {
      color: var(--color-primary-emphasis);
    }
  }

  small {
    font-size: var(--typo-size-xs);
    color: var(--color-text-tertiary);
  }

  sub,
  sup {
    font-size: 0.5625em;
    font-weight: 600;
    color: var(--color-text-secondary);
  }

  del,
  s {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    text-decoration-thickness: var(--size-1);
  }

  ins {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: var(--size-1);

    background: transparent;
  }

  abbr {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: var(--size-1);
  }

  dfn {
    font-weight: 700;
    font-style: normal;
    color: var(--color-text-primary);
  }

  cite {
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-secondary);
  }

  q {
    font-style: normal;

    &::before {
      content: '»';
    }

    &::after {
      content: '«';
    }
  }

  time {
    font-family: var(--font-mono), monospace;
    font-size: var(--typo-size-sm);
    color: var(--color-text-secondary);
  }

  /* === Article Lead Paragraph === */

  & article {
    & > p:first-of-type {
      font-size: var(--typo-size-xl);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.022em;

      &::first-letter {
        float: left;

        margin: 0.1em 0.1em 0 0;
        padding: 0;

        font-family: var(--font-display), serif;
        font-size: 4em;
        font-weight: bold;
        line-height: 1;
        color: var(--color-primary);

        @supports (initial-letter: 4) {
          float: none;

          margin: 0;
          padding-right: var(--spacing-snug);

          font-size: inherit;
          line-height: inherit;

          initial-letter: 3;
        }
      }
    }
  }
}
