.content {
  max-width: clamp(60ch, 90vw, 90ch);
  margin: 0 auto;
  padding: 0 var(--spacing-comfortable);
  font-size: var(--font-size-responsive);

  & 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: var(--el-h1-font-weight);
    line-height: var(--el-h1-line-height);
    color: var(--el-h1-color);
    text-transform: var(--el-h1-text-transform);
    letter-spacing: var(--el-h1-letter-spacing);

    & + 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 * var(--el-h1-line-height) * var(--vspace-snug))
          calc(1em * var(--el-h1-line-height) * 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: var(--el-h2-font-weight);
    line-height: var(--el-h2-line-height);
    color: var(--el-h2-color);
    text-transform: var(--el-h2-text-transform);
    letter-spacing: var(--el-h2-letter-spacing);

    & + 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 * var(--el-h1-line-height) * var(--vspace-compressed))
          calc(1em * var(--el-h1-line-height) * 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: var(--el-h3-font-weight);
    line-height: var(--el-h3-line-height);
    color: var(--color-surface-base);
    text-transform: var(--el-h3-text-transform);
    letter-spacing: var(--el-h3-letter-spacing);

    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: var(--el-h4-font-weight);
    line-height: var(--el-h4-line-height);
    text-align: center;
    text-transform: var(--el-h4-text-transform);
    letter-spacing: var(--el-h4-letter-spacing);
  }

  & 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: var(--el-h5-font-weight);
    line-height: var(--el-h5-line-height);
    color: var(--el-h5-color);
    text-align: center;
    text-transform: var(--el-h5-text-transform);
    letter-spacing: var(--el-h5-letter-spacing);

    &::before,
    &::after {
      content: "";
      padding: 0 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: var(--el-h6-font-weight);
    line-height: var(--el-h6-line-height);
    color: var(--el-h6-color);
    text-align: center;
    text-transform: var(--el-h6-text-transform);
    letter-spacing: var(--el-h6-letter-spacing);
  }

  & 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));
    }
  }

  & 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: var(--el-p-font-weight);
    line-height: var(--el-p-line-height);
    color: var(--el-p-color);
    text-align: var(--el-p-text-align);
  }

  & 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: var(--el-blockquote-font-weight);
    font-style: var(--el-blockquote-font-style);
    line-height: var(--el-blockquote-line-height);
    color: var(--el-blockquote-color);
  }

  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: var(--el-pre-line-height);
    color: var(--el-pre-color);

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

  ul, ol {
    margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
    font-size: var(--el-list-font-size);
    line-height: var(--el-list-line-height);
    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(--el-ul-indent-l1);
    list-style: none;

    li {
      padding-left: var(--el-ul-item-padding);

      &::marker {
        content: var(--el-ul-symbol-l1);
        color: var(--el-ul-symbol-l1-color);
      }
    }

    ul, ol {
      padding-left: var(--el-ul-indent-l2);
    }

    ul li::marker {
      content: var(--el-ul-symbol-l2);
      color: var(--el-ul-symbol-l2-color);
    }

    ul ul, ul ol, ol ul, ol ol {
      padding-left: var(--el-ul-indent-l3);
    }

    ul ul li::marker,
    ol ul li::marker {
      content: var(--el-ul-symbol-l3);
      color: var(--el-ul-symbol-l3-color);
    }

    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(--el-ul-indent-l4);
    }

    ul ul ul li::marker,
    ul ol ul li::marker,
    ol ul ul li::marker,
    ol ol ul li::marker {
      content: var(--el-ul-symbol-l4);
      color: var(--el-ul-symbol-l4-color);
    }
  }

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

    & > li {
      counter-increment: ol-l1;
      margin-left: var(--el-ol-item-indent-l1);
      padding-left: var(--el-ol-item-padding);

      &::marker {
        content: var(--el-ol-prefix-l1) counter(ol-l1, var(--el-ol-style-l1)) var(--el-ol-suffix-l1);
        color: var(--el-ol-marker-color-l1);
      }
    }
  }

  ol > li > ol {
    counter-reset: ol-l2;
    padding-left: var(--el-ol-indent-l2);

    & > li {
      counter-increment: ol-l2;
      margin-left: var(--el-ol-item-indent-l2);

      &::marker {
        content: var(--el-ol-prefix-l2) counter(ol-l2, var(--el-ol-style-l2)) var(--el-ol-suffix-l2);
        color: var(--el-ol-marker-color-l2);
      }
    }
  }

  ol > li > ul {
    padding-left: var(--el-ol-indent-l2);
  }

  ol > li > ol > li > ol,
  ol > li > ul > li > ol {
    counter-reset: ol-l3;
    margin-left: var(--el-ol-item-indent-l3);
    padding-left: var(--el-ol-indent-l3);

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

      &::marker {
        content: var(--el-ol-prefix-l3) counter(ol-l3, var(--el-ol-style-l3)) var(--el-ol-suffix-l3);
        color: var(--el-ol-marker-color-l3);
      }
    }
  }

  ol > li > ol > li > ul,
  ol > li > ul > li > ul {
    padding-left: var(--el-ol-indent-l3);
  }

  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: var(--el-ol-item-indent-l4);
    padding-left: var(--el-ol-indent-l4);

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

      &::marker {
        content: var(--el-ol-prefix-l4) counter(ol-l4, var(--el-ol-style-l4)) var(--el-ol-suffix-l4);
        color: var(--el-ol-marker-color-l4);
      }
    }
  }

  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(--el-ol-indent-l4);
  }

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

  /* Override if you specifically need inside positioning */
  .list-inside ol li,
  .list-inside ul li {
    list-style-position: inside;
  }

  table {
    border-collapse: collapse;

    width: 100%;
    margin-block: var(--el-table-vspace-top) var(--el-table-vspace-bottom);
    border: var(--el-table-border);

    font-size: var(--el-table-font-size);
    line-height: var(--el-table-line-height);

    & thead th,
    & th {
      padding: var(--el-th-padding);

      font-family: var(--el-th-font-family), serif;
      font-size: var(--el-th-font-size);
      font-weight: var(--el-th-font-weight);
      line-height: var(--el-th-line-height);
      color: var(--el-th-color);
      text-transform: var(--el-th-text-transform);

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

    & tbody td,
    & td {
      padding: var(--el-td-padding);
      border: var(--el-td-border);

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

    & td:first-child,
    & th:first-child {
      text-align: left;
    }
  }

  hr {
    position: relative;

    overflow: visible;

    height: var(--hr-height);
    margin-block: var(--hr-margin);
    border: none;

    background: var(--hr-color);

    &::after {
      content: var(--hr-symbol-content);

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

      padding: var(--hr-symbol-space);

      font-size: var(--hr-symbol-size);
      line-height: var(--hr-symbol-line-height);
      color: var(--hr-symbol-color);

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

    }

  }

  em,
  i {
    padding: 0.1em 0.2em;

    font-weight: var(--typo-weight-semibold);
    font-style: normal;
    color: var(--color-surface-base);
    letter-spacing: var(--typo-spacing-relaxed);

    background: var(--color-primary);

    & * {
      color: var(--color-text-inverse) !important;
    }
  }

  strong,
  b {
    font-weight: var(--typo-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--typo-spacing-loose);
  }

  a {
    position: relative;

    padding: 0.1em 0.2em;

    font-weight: var(--typo-weight-semibold);
    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);
    }
  }

  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: var(--typo-weight-semibold);
    font-style: normal;
    color: var(--color-text-secondary);
  }

  mark {
    padding: 0.1em 0.2em;
    font-weight: var(--typo-weight-semibold);
    color: var(--color-surface-base);
    background: var(--color-primary);
  }

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

  sub, sup {
    font-size: 0.5625em;
    font-weight: var(--typo-weight-semibold);
    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: var(--typo-weight-semibold);
    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: var(--typo-weight-bold);
    font-style: normal;
    color: var(--color-text-primary);
  }

  cite {
    font-weight: var(--typo-weight-semibold);
    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 {
    & > p:first-of-type {
      font-size: var(--typo-size-xl);
      font-weight: var(--typo-weight-bold);
      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;
        }
      }
    }
  }
}