article {
    margin: 1.5em 0;
}

article {
    & p {
        margin-top:     0.8em;
        margin-bottom:  0.8em;

        font-size:      1em;
        line-height:    1.7em;
    }

    & h1 {
        margin-top:     1.3em;
        margin-bottom:  0.8em;

        font-size:      1.8em;
    }

    & h2 {
        margin-top:     1.4em;
        margin-bottom:  0.4em;

        font-size:      1.5em;
    }

    & h3 {
        margin-top:     1.2em;
        margin-bottom:  0.4em;

        font-size:      1.3em;
    }

    & a {
        text-decoration: underline 0.15em var(--col-s);
    }

    & blockquote {
        margin-left:    0;
        margin-right:   0;

        padding:        0.1em 1.2em;

        border-left:    0.3em solid var(--col-s);
    }

    & ol,
    & ul {
        font-size:      1em;
        line-height:    1.7em;

        margin-bottom:  1em;
        margin-top:     1em;

        padding-left:   2.2em;  /* @ */
        padding-right:  2.7em;
    }

    & li > ol,
    & li > ul {
        font-size:      1em;
    }

    & li {
        padding-left:   0.4em;
    }

    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
        padding-left:   1.25em;
        padding-right:  1.25em;
    }

    & ul > li::marker {
        content:        "• ";
    }

    & ul ul > li::marker,
    & ol ul > li::marker {
        content:        "‣ ";
    }

    & ul > ol,
    & ol > ol {
        list-style-type: lower-alpha;
    }

    & ol.par-upper-roman {
        list-style-type: upper-roman;
    }

    & ol.par-upper-roman > li::marker {
        content:        "(" counter(list-item, upper-roman) ")";
    }

    & ul.no-indent,
    & ol.no-indent {
        padding-left:   1.2em;
    }

    & ul.post-listing,
    & ol.post-listing {
        padding-left:   1.4em;
        padding-right:  1.4em;
    }

    & ul.post-listing > li,
    & ol.post-listing > li {
        display:        flex;

        padding-left:   0;
    }

    & hr {
        width:          60%;

        margin-top:     3em;
        margin-bottom:  3em;

        border-top:     0.4em dotted var(--col-s);
        border-bottom:  none;
        border-left:    none;
        border-right:   none;
    }

    & mjx-container[display="true"] {
        overflow-x:     scroll;
        overflow-y:     hidden;
    }

    & code {
        font-family:    var(--font-m);
        font-size:      0.9em;
    }

    & pre {
        padding:        1.6em;

        font-size:      0.8em;

        overflow-x:     scroll;
    }

    & table {
        width:          100%;  /* @ */

        margin:         1em auto;

        border-collapse: collapse;
    }

    & th,
    & td {
        padding:        0.8em;

        border:         0.12em solid var(--col-s);
    }

    & img {
        display:        block;

        max-width:      100%;

        margin:         1em auto 1em auto;
    }

    & img.framed {
        border:         0.15em solid var(--col-t);
    }

    & figcaption {
        font-size:      0.85em;
        text-align:     center;
    }

    & figure {
        margin:         1.2em 0;
    }

    & qed::before {
        content:        "◼";

        float:          right;
    }

    & div.entry {
        margin-top:     2em;
        margin-bottom:  2em;
    }

    & a.entry-heading {
        font-variant:    small-caps;
        text-decoration: none !important;
    }

    & .centered {
        text-align:     center;
    }

    & dl {
        display:        grid;
        grid-template-columns: max-content auto;

        line-height:    2em;
    }

    & dt {
        grid-column-start: 1;
    }

    & dd {
        grid-column-start: 2
    }
}

@media only screen and (min-width: 700px) {
    article {
        & ul,
        & ol {
            padding-left:   2.7em;
            padding-right:  2.7em;
        }

        & table:not(.references) {
            width:          fit-content;
            max-width:      100%;
            min-width:      60%;
        }
    }
}