:is(.rich-text, trix-editor) {
    margin-inline: auto;
    inline-size: min(100%, 80ch);
    line-height: 1.7;
    color: var(--dark);

    h3, h4, h5, h6 { margin-block: 1.5rem 0.75rem; }
    h3 { font-size: 1.25rem; }

    h2 {
        color: var(--color-1);
        margin-block: 2rem 0.75rem;
        padding-block-end: 0.25rem;
        border-block-end: 1px solid var(--color-1-desaturated);
    }

    code {
        background: hsl(0 0% 95%);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-family: monospace;
        font-size: 0.875em;
    }

    blockquote {
        margin-block: 1.5rem;
        margin-inline-start: 1rem;
        padding-inline-start: 1rem;
        border-inline-start: 3px solid var(--color-1);
        color: var(--gray);
        font-style: italic;
    }

    ul, ol {
        margin-block: 1rem;
        padding-inline-start: 1.5rem;
    }

    ul { list-style-type: disc; }
    ol { list-style-type: decimal; }

    li {
        list-style-type: inherit;
        margin-block: 0.5rem;

        &::marker { color: var(--color-1); }
    }

    a {
        color: var(--color-1);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        transition: opacity var(--transition-duration) var(--transition-timing);

        &:hover, &:focus-visible { opacity: 0.8; }
    }
}

.rich-text br { display: none; }