article {
    margin-top: 1lh;
    border-radius: 0.5em;

    &:last-of-type {
        margin-bottom: 1lh;
    }

    background-color: var(--color-bg);
    padding: var(--margin-small);
    filter: drop-shadow(0px 2px 2px var(--color-border));
    min-height: 100lvh;

    line-height: 1.75em;
}

p,
pre,
header {
    & + p,
    & + pre,
    & + .footnote-definition {
        margin-top: 0.5lh;
    }
}

date + category,
category + category {
    &:before {
        content: " | ";
    }
}

li[linkblock] tags ul {
    justify-content: flex-end;
}

tags {
    ul {
        display: flex;
    }

    li + li {
        margin-left: 1ch;
    }

    li {
        display: flex;

        &:before {
            display: block;
            content: "🏷️";
            margin-right: 0.25ch;
            rotate: 45deg;
            filter: invert(20%) sepia(60%) saturate(400%) hue-rotate(200deg); /* purple */
        }
    }

    a {
        color: var(--color-text);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

pre {
    overflow-x: auto;
    padding: 1em;
    border-radius: 0.5em;
    font-family: var(--font-mono);
    font-size: 1em;
    font-size: calc(min(1em, 2lvw));
    line-height: 1.25em;
}

code {
    font-family: var(--font-code);
}

sup.footnote-reference > a {
    color: var(--color-text);
    text-decoration: none;
}

section.footnotes {
    font-size: 0.75em;
    line-height: 1.5em;

    > ol {
        padding: var(--margin-small);

        > li + li {
            margin-top: 0.5lh;
        }
    }

    > sup {
        margin-right: 1ch;
        &:after {
            content: ":";
        }
    }
}