/* Pop Joy comes in two files, so a page without CJK text never downloads the
   CJK glyphs, which are nearly all of the font's size. The first is made
   from the second with pyftsubset's
   "--unicodes=U+0000-2E7F --layout-features='*' --flavor=woff2". */
@font-face {
    font-family: "Pop Joy";
    src: url("/assets/pop-joy-no-cjk.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2E7F;
}

@font-face {
    font-family: "Pop Joy";
    src: url("/assets/pop-joy.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2E80-10FFFF;
}

/* The homepage carousel spans the whole window, scrollbar included. */
html {
    overflow-x: clip;
}

body {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;

    margin: 0;
    padding: 0;

    background-color: var(--base);
    background-image: url("/assets/textures/subtle-paper-pulp-repeat.webp");
    background-repeat: repeat;
    background-blend-mode: multiply;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.25;
}

h1,
h2,
h3 {
    line-height: 1.2;
    text-wrap: pretty;
}

h1 {
    font-size: var(--text-2xl);
}
h2 {
    font-size: var(--text-xl);
}
h3 {
    font-size: var(--text-lg);
}

:is(h1, h2, h3, p, form, ul, ol, pre, table) + * {
    margin-block-start: var(--space-4);
}

/* Darkened where the accent is too light to read as text on the page. */
a {
    color: oklch(from var(--accent) min(l, 0.5) c h);

    &:any-link {
        text-decoration: underline;
    }
}

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

:focus-visible {
    outline: var(--ring);
    outline-offset: var(--ring-offset);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}