/* Scaffolding */

@font-face {
    font-family: "Murecho";
    src: url("/-/font/murecho.woff2");
}

@font-face {
    font-family: "BricolageGrotesque";
    src: url("/-/font/bricolage-grotesque.woff2");
}

@font-face {
    font-family: "SplineSans";
    src: url("/-/font/spline-sans.woff2");
}

@font-face {
    font-family: "SplineSansMono";
    src: url("/-/font/spline-sans-mono.woff2");
}

:root {
    --font-heading: "BricolageGrotesque", "Murecho", sans-serif;
    --font-body: "SplineSans", "Murecho", sans-serif;
    --font-mono: "SplineSansMono", monospace;

    font-family: var(--font-body);
    font-weight: 450;
    font-synthesis: none;

    line-height: 1.5;
}

*,
*::before,
*::after {
    /* Does not work properly with `inherit`. */
    font-variation-settings: "slnt" var(--font-oblique-angle);
}

/* Element styles */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

strong {
    font-weight: 700;
}

pre,
code {
    font-family: var(--font-mono);
}

/* Emphasis cannot be italic in Japanese. */
:root:not([lang="ja"]) {
    & em {
        --font-oblique-angle: -16;
        font-style: oblique 16deg;
    }
}

.prose {
    --paragraph-padding: 0.5lh;

    &.prose-compact {
        --paragraph-padding: 0.25lh;
    }

    & p {
        padding: var(--paragraph-padding) 0;
    }

    & ul {
        padding: var(--paragraph-padding) 0;
        padding-left: 2.5ch;

        & li {
            list-style: square;
        }
    }

    & h1 {
        font-size: 200%;
        font-weight: 900;
        padding-top: 0.75lh;
    }

    & h2 {
        font-size: x-large;
        font-weight: 900;
        padding-top: 0.75lh;
    }

    & h3 {
        font-size: larger;
        font-weight: 900;
        padding-top: 0.75lh;
    }

    & h4 {
        font-size: large;
        font-weight: 900;
        padding: 1rem 0;
    }

    & blockquote {
        --tile-color: magenta;
        &:nth-of-type(6n + 1) {
            --tile-color: var(--p-foreground-purple);
        }
        &:nth-of-type(6n + 2) {
            --tile-color: var(--p-foreground-blue);
        }
        &:nth-of-type(6n + 3) {
            --tile-color: var(--p-foreground-green);
        }
        &:nth-of-type(6n + 4) {
            --tile-color: var(--p-foreground-pink);
        }
        &:nth-of-type(6n + 5) {
            --tile-color: var(--p-foreground-sea);
        }
        &:nth-of-type(6n + 6) {
            --tile-color: var(--p-foreground-red);
        }

        display: flex;
        justify-content: center;
        padding: 1rem;
        margin: 1rem;
        background-color: color-mix(
            in oklab,
            var(--tile-color),
            var(--p-background-off-white) 93.5%
        );
        text-align: center;
        box-shadow: inset 0 0 12px var(--shadow-color);
        border-radius: 0.8rem;
    }

    & details {
        --tile-color: magenta;
        &:nth-of-type(6n + 1) {
            --tile-color: var(--p-foreground-blue);
        }
        &:nth-of-type(6n + 2) {
            --tile-color: var(--p-foreground-pink);
        }
        &:nth-of-type(6n + 3) {
            --tile-color: var(--p-foreground-red);
        }
        &:nth-of-type(6n + 4) {
            --tile-color: var(--p-foreground-sea);
        }
        &:nth-of-type(6n + 5) {
            --tile-color: var(--p-foreground-purple);
        }
        &:nth-of-type(6n + 6) {
            --tile-color: var(--p-foreground-green);
        }

        margin-top: 0.75lh;
        padding: 1rem;
        background-color: color-mix(
            in oklab,
            var(--tile-color),
            var(--p-background-off-white) 93.5%
        );
        box-shadow: inset 0 0 12px var(--shadow-color);
        border-radius: 0.8rem;

        & summary {
            font-size: larger;
            font-weight: 900;

            list-style-type: "";
        }

        &[open] summary {
            list-style-type: "";
        }
    }

    & hr {
        margin: 1lh 0;
        border-bottom: 0.1rem solid var(--border-2);
    }

    /* Magic tags */

    & .no-break {
        white-space: pre;
    }
}