:root {
    --bg: 0.0261 90.1;
    --fg: 0.0284 219.16;
    --ac: 0.124 349.43; /* floret */
    --bg0: oklch(0.9735 var(--bg));
    --fg0: oklch(0.5125 var(--fg));
    --ac0: oklch(0.8163 var(--ac));
    --acside: oklch(0.78 var(--ac));
}
/* https://clagnut.com/blog/2433/ */
@font-face {
    font-family: 'Neuton';
    src: url('/Neuton-Regular.woff2') format('woff2') tech(variations),
        url('/Neuton-Regular.woff2') format('woff2-variations');
    font-weight: 1 1000;
    font-stretch: 50% 200%;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Neuton';
    src: url('/Neuton-Italic.woff2') format('woff2') tech(variations),
        url('/Neuton-Italic.woff2') format('woff2-variations');
    font-weight: 1 1000;
    font-stretch: 50% 200%;
    font-style: italic;
    font-display: swap;
}
body, h1, h2, h3, h4, h5, h6, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, table, caption, form, fieldset {
    margin: 0;
}
.flow > * + * {
    margin-block-start: var(--flow, 1em);
}


html {
    background: var(--bg0);
    /* filter: url("/filters.svg#dither"); */

    font-family: 'Neuton', serif;

    max-width: 67ch;
    margin: auto;
    line-height: 1.75;
    font-size: 1.5rem;
    font-size-adjust: ex-height 0.51;

    text-decoration-skip-ink: auto;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
    font-kerning: normal;
}

main {
    min-height: min(850px, 80vw);
    background: oklch(0.93 var(--bg));
    margin-top: 48px;
    padding: 0 8px;

    border-top: linear-gradient(to bottom, var(--acside) 0 160px, transparent) 1;
    position: relative;

    & > h1 {
        position: relative;
        --t: -37.5px;
        top: var(--t);
        left: -15px;
        margin-bottom: var(--t);
    }

    &::before {
        content: "";
        border-left: 4px solid;
        border-right: 4px solid;
        border-top: 4px solid;
        clip-path: polygon(0 0px, 0 100%, 100% 40%, 100% -40px, 70% 8px, 50% 100%, 4px 0);
        height: 400px;
        border-image:
            linear-gradient(to bottom, var(--acside) 0 160px, transparent) 1;

        position: absolute;
        display: inline-block;
        left: 0; right: 0;
    }

    & img#slap {
        transform: rotate(-31.5deg);
        position: absolute;
        top: 200px;
        right: 0;
        --flow: 0;
        width: 300px;
        opacity: 0.7;
    }
}

.prose {
    text-wrap: pretty;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-size-adjust: 0.507;
    --flow: 4px;
}
hr {
    --flow: 10px;
    border: none; height: 3px;
    background: oklch(0.37 var(--fg));
}
strong, b, th {
    font-weight: bold;
}
h1, h2, h3, h4 {
    line-height: 1.1;
    font-variant-numeric: lining-nums;


    &:is(h1) {
        font-variant-caps: titling-caps;
        text-align: justify;
        letter-spacing: 0.3rem;
        white-space-collapse: preserve-spaces;
    }
}


/* @media (prefers-color-scheme: dark) { */
/*     html, img { filter: invert(); } */
/* } */