@font-face {
    font-family: "Museo_Slab";
    src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
        url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
    font-weight: normal;
    font-style: normal;
}

@layer typography {
    :root {
        --font-family: Verdana, Helvetica, sans-serif;
        --font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif;
        --font-family-monospace: "Courier New", Courier, monospace;
        --font-family-site-heading: Museo_Slab, Tahoma, sans-serif;

        --font-size: 2rem;
        --font-size-max: 8px;
        --font-size-min: 6px;
        --font-size-scale-factor: 1vmax;
        --site-header-font-size: 200%;

        --h1-size: 305%;
        --h2-size: 244%;
        --h3-size: 195%;
        --h4-size: 156%;
        --h5-size: 125%;
        --h6-size: 100%;

        --line-height: 1.5;
        --heading-line-height: 1;
        /* A little extra line height so the descenders don't get clipped */
        --site-heading-line-height: 1.1;
    }

    a {
        text-decoration: none;
    }

    a[href]:hover {
        text-decoration: underline;
        text-decoration-style: solid;
    }

    a.hover-only:hover {
        text-decoration: underline;
    }

    body {
        font-size: var(--font-size);
    }

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

    figcaption {
        font-size: 80%;
        line-height: var(--line-height);
    }

    footer.site {
        font-size: 80%;
        line-height: 1;
    }

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

    header.site nav > .active { font-weight: bold; }

    main:has(header > .post-title > h1) h1 { font-size: 244%; }
    main:has(header > .post-title > h1) h2 { font-size: 195%; }
    main:has(header > .post-title > h1) h3 { font-size: 156%; }
    main:has(header > .post-title > h1) h4 { font-size: 125%; }
    main:has(header > .post-title > h1) h5 { font-size: 100%; }
    main:has(header > .post-title > h1) h6 { font-size: 100%; }

    main:has(header > .post-title > h1) :is(h5, h6) {
        font-family: var(--font-family-body);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-family-heading);
        font-weight: 600;
        letter-spacing: 1pt;
        line-height: var(--heading-line-height);
    }

    h1.gradient {
        font-family: var(--font-family-site-heading);
    }

    h1.gradient > a { color: inherit; }


    header.site h1.site {
        font-size: var(--site-header-font-size);
        line-height: var(--site-heading-line-height);
        white-space: nowrap;
    }

    header.site nav {
        font-size: max(1.5rem, 80%);
        letter-spacing: 0.10em;
        text-transform: lowercase;
    }

    header.site nav > li {
        color: var(--site-nav-link-color);
    }

    :is(h1, h2, h3, h4, h5, h6) rt {
        font-family: var(--font-family);
        font-weight: normal;
        letter-spacing: 0;
    }

    header > span.series {
        font-size: 1.75rem;
        letter-spacing: 1px;
    }

    header > span.series::before {
        color: var(--header-series-arrow-foreground-color);
    }

    html {
        font-family: var(--font-family);
        font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
    }

    nav.bulleted > li::before {
        font-size: 60%;
        font-weight: normal;
    }

    p { line-height: var(--line-height); }


    .title {
        font-size: var(--h5-size);
    }
}