:root {
    --bg: 0.01 218.46;
    --fg: 0.1125 0;      /* pink */
    --ac: 0.1301 153.52; /* green */
    --bg9: oklch(0.9006 var(--bg));
    --bg8: oklch(0.8 var(--bg));
    --bg5: oklch(0.5118 var(--bg));
    --fg6: oklch(0.6513 var(--fg));
    --ac6: oklch(0.6929 var(--ac));
    --acside: oklch(0.78 var(--ac));

}
:where(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, 24px);
}


html {
    background: var(--bg9);

    max-width: 54ch;
    margin: auto;
    line-height: 1.47;
    font-size: 1.4rem;
    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 12px;
    padding-bottom: 8px;
    margin-bottom: 20px;

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

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

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

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

    & footer {
        border-top: 1px solid var(--bg5);
        padding-top: 6px;
        color: #333;
        line-height: 0.9;
        font-weight: 400;
        font-size: 0.80em;
    }
}

.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;
    clear: both;

    &:is(h1) {
        font-weight: 500;
    }

    &:is(h2) {
        font-weight: 500;
        font-size: 1.2em;
        border-bottom: 1px solid var(--bg5);
    }
}

span#firstword {
    font-variant: small-caps;
    font-weight: 600;
}

code {
    background: var(--bg8);
    padding: 1px 2px;
}

ul {
   padding: 0 4px;
   display: flex;
   gap: 4px;
   flex-direction: column;
   &>li {
        list-style-position: inside;
   }
}

img {
    box-sizing: border-box;
    aspect-ratio:1;
    object-fit: cover;
    max-width: 100%;
    width: fit-content;
}

figure {
    margin: 0 auto;
    &>figcaption {
        align-self: center;
        background: var(--bg9);
        padding: 2px 4px;
        line-height: 0.9;
        font-weight: 400;
        font-size: 0.80em;
        text-wrap: wrap;
        flex: 0 0 0;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    }
}


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