body {
    --margins: 1cm;

    margin: var(--margins);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-height: calc(100vh - 2 * var(--margins));
}

header {
    position: relative;

    border-block-end: 1px solid var(--color-stroke);
    margin-block-end: 2rem;
}

header > hgroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;

    margin-block-end: 2rem;

    & > h1 {
        flex-shrink: 0;

        margin: 0;
        margin-inline-start: 0.3em;

        font-size: 2rem;
        font-weight: 700;
    }

    & > p {
        margin: 0;

        font-size: 1.8rem;
        font-weight: 100;

        &::before {
            content: "\00A0—\00A0";
        }
    }
}

header > nav {
    width: 100%;
    margin-block: 0.5rem;

    font-size: 1.3rem;

    & > ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        column-gap: 2rem;

        @media (width <= 50rem) {
            flex-direction: column;
            row-gap: 0.5rem;
        }

        margin: 0;
        padding: 0;

        list-style-type: none;

        & > li {
            margin: 0;
            padding: 0;

            flex-shrink: 0;

            font-weight: bold;
        }
    }

    a {
        &::before {
            content: "—\00A0";
            clip-path: inset(0 100% 0 0);
            transition: clip-path var(--duration-transitions);
        }

        &:is(:hover, :active, :focus-visible, [href="#"])::before {
            clip-path: inset(0);
        }
    }
}

main {
    margin-block-end: 2rem;
}

footer {
    margin-block-start: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

    font-size: 0.8rem;

    & > * {
        text-align: center;
    }

    & > :first-child {
        text-align: start;
    }

    & > :last-child {
        text-align: end;
    }
}

@media (width <= 55rem) {
    body {
        --margins: 0.5cm;
    }

    header {
        margin-block-end: 1.6rem;

        & > hgroup {
            margin-block-end: 1.2rem;

            flex-direction: column;

            & > h1 {
                margin-inline-start: 0;
                font-size: 1.6rem;
            }

            & > p {
                font-size: 1.4rem;

                &::before {
                    content: none;
                }
            }
        }

        & > nav {
            font-size: 1.1rem;
        }
    }

    main {
        margin-block-end: 1rem;
    }
}

article {
    margin-block: 1.2rem;

    & :is(h2, h3, h4, h5, h6) {
        margin-block-start: 1.2rem;
        margin-block-end: 0.2rem;

        font-size: 1.2rem;
        font-weight: bold;
    }

    & a.anchor {
        display: inline;
        margin-inline-start: 0.8rem;

        color: var(--color-stroke-soft);
        font-weight: 200;
        text-decoration: none;

        scale: 125%;
        transform-origin: 0% 65%;

        &::before {
            content: "#";
        }
    }

    &:not(:hover) a.anchor:not(:focus-visible) {
        opacity: 0;
        pointer-events: none;
    }

    & hgroup p {
        margin-block-start: 0;
        margin-block-end: 0.2rem;
        margin-inline: 0;

        font-size: 1.1rem;
        font-style: italic;

        /* Small hack to kinda support nested italics. */
        & i {
            font-style: normal;
        }
    }

    & :is(p, ul, ol) {
        margin-inline-start: 0.7rem;
    }
}

.illustration {
    float: inline-end;
    clear: inline-end;
    margin-inline-start: 1rem;
    margin-block-end: 0.5rem;
    width: 6rem;
    /* If the `<img>` element has `width` and `height` attributes set, this
       ensures the element's computed height is obtained from the width set
       above and the image's actual aspect ratio. */
    height: auto;
    box-sizing: border-box;

    &:not(.transparent) {
        border-radius: 0.3rem;
    }
}