/* Main layout */

body {
    --main-min-size: 100vh;

    margin: 0;

    display: grid;
    grid-template-columns:
        [left] minmax(0, 1fr)
        [right] auto;
    grid-template-rows:
        [nav] auto
        [main] minmax(var(--main-min-size), auto)
        [virtual] 100vh;
}

html {
    /* Leave a bunch of space at the top when scrolling to elements.
       I'm honestly not sure why this is needed on <html> and not the scrolled-to element... */
    scroll-padding-top: 10vh;
}

.sidebar-sticky {
    grid-column: right;
    grid-row: main;
}

aside.sidebar {
    position: sticky;
    top: 0px;

    max-width: 50rem;
    height: 100vh;
    padding: 0.8rem;

    display: flex;
}

main {
    grid-column: left;
    grid-row: main;
    min-width: 0;
}

footer.pink-space {
    grid-column: 1 / -1;
    grid-row: virtual;
}

/* Narrower layout: sidebar is pushed to the top */

@media (max-width: 1280px) {
    body {
        --main-min-size: 0;
    }

    .sidebar-sticky {
        grid-column: left;
        grid-row: nav;

        display: flex;
        justify-content: center;
    }

    aside.sidebar {
        position: relative;
        height: auto;
        padding: 0;
    }
}

/* Set up typography */

:root {
    --font-normal: "RecVar-Crit", "RecVar-Full", sans-serif;
    --font-italic: "RecVar-Full", "RecVar-Crit", sans-serif;
    --font-code: "RecVar-Full", monospace;
    --font-title: "RecVar-Title", "Arial Black", sans-serif;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

body,
pre,
code,
kbd,
button,
select,
input,
dfn {
    font-family: var(--font-normal);
    line-height: 1.5;
    text-size-adjust: none;
    font-style: normal;
    --recursive-slnt: 0;
}

pre,
code,
kbd,
button,
select,
input {
    font-size: inherit;
}

:root {
    font-weight: 450;
    --recursive-mono: 0;
    --recursive-crsv: 0.5;
    font-style: normal;
    --recursive-slnt: 0;
}

*,
*:before,
*:after {
    font-variation-settings:
        "MONO" var(--recursive-mono),
        "CRSV" var(--recursive-crsv),
        "slnt" var(--recursive-slnt);
    font-feature-settings: "ss03", "ss04", "ss05", "ss06";
    font-synthesis: none; /* Chrome: synthesises italics on top of using the font's built-in italic (????) */
}

h1 {
    font-weight: 900;

    font-size: 4.8rem;
}

h2 {
    font-weight: 850;

    font-size: 3.2rem;
}

h3 {
    font-weight: 850;

    font-size: 2.4rem;
}

h4 {
    font-weight: 800;

    font-size: 1.6rem;
}

code {
    font-family: var(--font-code);
    --recursive-mono: 0.5;
}

pre,
pre code,
kbd,
th-literate-program {
    font-family: var(--font-code);
    --recursive-mono: 1;
    font-weight: 450;
    tab-size: 4;
}

strong code {
    font-weight: 800;
}

b,
strong {
    font-weight: 700;
}

i,
em {
    --recursive-crsv: 1;
    --recursive-slnt: -15; /* required for Chrome */
    font-family: var(--font-italic);
    font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* Other classes for controlling typography */

.nowrap {
    white-space: nowrap;
}

/* Lay out elements a bit more compactly */

p,
pre {
    margin: 0 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.4rem 0;
}

/* Make code examples a little prettier by giving them visual separation from the rest of the page */

code,
th-literate-program {
    padding: 0.3rem 0.4rem;
    background-color: var(--shaded-background);
    border-radius: 0.4rem;
}

kbd {
    padding: 0.3rem 0.6rem;
    border: 0.1rem solid var(--border-1);
    border-radius: 0.4rem;
}

pre,
th-literate-program {
    padding: 0.8rem 1.2rem;
    margin: 1.2rem 0;
    background-color: var(--shaded-background);
    border-radius: 0.4em;

    transition: background-color var(--transition-duration);
}

@media (prefers-color-scheme: light) {
    pre,
    th-literate-program {
        background-color: transparent;
        border: 0.1rem solid var(--border-1);
    }
}

pre > code,
th-literate-program > code {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* And don't let code examples fly off and overflow the window */

pre,
th-literate-program {
    min-width: 0;
    width: auto;
    overflow: auto;
}

/* Images */

img {
    /* Prevent images from causing horizontal scrolling */
    max-width: 100%;
    height: auto;
}

img.pic {
    border-radius: 0.6rem;
    margin: 0.8rem 0;
}

img.emoji {
    max-width: 1.3125em;
    max-height: 1.3125em;
    vertical-align: text-bottom;
    object-fit: contain;
}

img {
    /* Hints for tweaking rendering */
    &[src*="+pixel"] {
        image-rendering: pixelated;
        border-radius: 0;
    }

    &[src*="+illust"] {
        border-radius: 0;
    }

    /* TODO: These could be autogenerated! */

    &[src*="+width72"] {
        width: 7.2rem;
        height: auto;
    }

    &[src*="+width160"] {
        width: 16rem;
        height: auto;
    }

    &[src*="+width640"] {
        width: 64rem;
        height: auto;
    }

    &[src*="+width752"] {
        width: 75.2rem;
        height: auto;
    }

    /* Resources for use in JavaScript. */
    &.resource {
        display: none;
    }
}

/* Fix the default blue and ugly purple links normally have */

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color-visited);
}

a.secret {
    color: var(--text-color);
    text-decoration: none;
}

/* Links to headings should be invisible by default, only appearing on hover. */

h1,
h2,
h3,
h4,
h5,
h6 {
    & > a {
        color: var(--text-color);
        text-decoration: none;

        &:visited {
            color: var(--text-color);
        }

        &:hover {
            text-decoration: underline;
        }
    }
}

@media (hover: none) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        & > a {
            text-decoration: underline;
        }
    }
}

/* Make blockquotes a bit prettier */

blockquote {
    margin: 0;
    padding: 0.4rem 1.2rem;
    margin: 0.4rem 0;
    border-left: 0.4rem solid var(--border-1);
}

/* And tables. */

table {
    margin: 0.8rem 0;
}

table,
th,
td {
    border: 0.1rem solid var(--border-2);
    border-collapse: collapse;
    padding: 0.4rem 1rem;
}

th {
    background-color: var(--shaded-background);

    font-weight: 700;
}

/* Horizontal rules */

hr {
    width: 100%;
    border: none;
    border-top: 0.1rem solid var(--border-1);
    margin-top: 2em;
    margin-bottom: 2em;
}

/* Push buttons */

button.push {
    padding: 0.2rem 1.2rem;

    border: 1px solid var(--border-2);
    background-color: color-mix(in oklab, var(--background-color), white 25%);
    color: var(--text-color);
    box-shadow:
        0 1px 2px var(--border-1),
        inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.05);

    border-radius: 0.75lh;

    transition:
        background-color var(--transition-duration) var(--ease-out-quintic),
        box-shadow var(--transition-duration) var(--ease-out-quintic),
        transform var(--transition-duration) var(--ease-out-quintic);

    &:hover {
        box-shadow:
            0 4px 6px var(--border-1),
            inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.1);
        transform: translateY(-2px);
    }

    &:active {
        background-color: color-mix(
            in oklab,
            var(--background-color),
            var(--shading-base) 5%
        );
        box-shadow:
            0 0 2px var(--border-1),
            inset 0 1px 2px rgb(from var(--shading-base) r g b / 0.1);
        transform: translateY(0);
        transition: none;
    }
}

/* Feeds */

section.feed {
    display: flex;
    flex-direction: column;

    /* Titles */

    & h2 {
        & a {
            color: var(--text-color);
            text-decoration: underline;

            &:visited {
                color: color-mix(
                    in srgb,
                    var(--background-color),
                    var(--text-color) 60%
                );
            }
        }
    }

    & h1 {
        font-weight: 800;
        font-size: 125%;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

    & h2 {
        font-weight: 600;
        font-size: 100%;
        padding: 0;
    }

    /* Articles */

    & article {
        display: flex;
        flex-direction: column;

        padding-bottom: 1.2rem;

        line-height: 1.4;

        & .info {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            font-size: 87.5%;

            & > *:not(:first-child)::before {
                content: "·";
                padding: 0 0.4rem;
            }
        }

        & .categories {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            list-style: none;
            margin: 0;
            padding: 0;

            & > *:not(:first-child) {
                padding-left: 1ch;
            }

            & a,
            & a:visited {
                color: var(--text-color);
            }
        }
    }
}

/* Page sidebar */

aside.sidebar {
    overflow: clip;

    & > a {
        display: block;
        height: min-content;
        margin-top: auto;
    }
}

header.floof {
    margin-top: auto;

    position: relative;

    & > picture > img {
        display: block;
        min-width: 0;
        object-fit: cover;
        object-position: 33% 0;
    }

    & > h1 {
        position: absolute;
        top: 3rem;
        left: 3rem;

        display: flex;
        flex-direction: column;
        line-height: 1;
        width: min-content;

        font-family: var(--font-title);
        font-weight: 900;
        font-size: 5.6rem;
        text-align: right;

        transform: skew(-5deg, -5deg);

        & .rikis {
            width: max-content;
            background-color: var(--text-color);
            color: var(--background-color);
            padding: 0.1em;

            --shadow-color: var(--accent-pink);
            /*
                import math

                print("box-shadow:")
                x = 0
                max_x = 16
                while x < max_x:
                    print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),")
                    x += 0.5
            */
            /* prettier-ignore */
            box-shadow:
                0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0),
                0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875),
                1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375),
                1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625),
                2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875),
                2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375),
                3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125),
                3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125),
                4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875),
                4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875),
                5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875),
                5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625),
                6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625),
                6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375),
                7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625),
                7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125),
                8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125),
                8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875),
                9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375),
                9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625),
                10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375),
                10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375),
                11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125),
                11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125),
                12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
                12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
                13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
                13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625)
            ;
        }

        & .fluffy-little-house {
            display: flex;
            flex-direction: column;

            background-color: var(--background-color);
            width: min-content;
            align-self: end;

            padding-left: 0.8rem;
            padding-right: 0.8rem;
            padding-top: 0.4rem;

            z-index: -1;

            color: var(--text-color);

            & .adjectives {
                font-weight: 800;
                font-size: 1.6rem;
                padding-top: 0.6rem;
            }

            & .house {
                margin-top: -0.2em;
                font-size: 3.6rem;
            }
        }
    }
}

/* Navigation header (contains page title & breadcrumbs) */

h1.page-title {
    font-weight: 900;

    line-height: 1.2;
    padding-top: 0.5lh;
    padding-bottom: 0.5lh;
}

@media (max-width: 700px) {
    h1.page-title {
        font-size: 4rem;
    }
}

/* Style the footer */

footer {
    width: 100%;
    max-width: 90ch;
    padding: 1.6rem 0.8rem;

    display: flex;
    flex-direction: row;

    & > .left {
        flex-grow: 1;
    }

    & > .right {
        flex-shrink: 0;
    }

    & #footer-icon {
        display: block;

        & > svg {
            display: block;
            color: var(--text-color);
            opacity: 40%;
        }
    }

    & #open-command-line {
        width: 3.2rem;
        height: 3.2rem;

        background: none;
        border: none;
        padding: 0;

        background-image: var(--icon-cmd);
        background-repeat: no-repeat;
        background-position: 50% 50%;

        opacity: 50%;
        transition: var(--transition-duration) opacity;

        &:hover {
            opacity: 100%;
        }

        &:active {
            opacity: 75%;
        }
    }
}

footer.pink-space {
    display: block;
    max-width: none;
    position: relative;

    & .copyright {
        position: absolute;
        right: 0;
        top: 0;
        opacity: 70%;

        padding: 1.6rem;

        & a,
        & a:visited {
            color: var(--text-color);
        }
    }

    & .jinkou {
        position: absolute;
        left: 0;
        bottom: 0;
        opacity: 70%;

        padding: 1.6rem;

        & a,
        & a:visited {
            color: var(--text-color);
        }
    }

    & pre.meow {
        position: absolute;
        right: 0;
        bottom: 0;

        width: min-content;
        background: none;
        border: none;

        font-weight: 700;
        line-height: 1.3;
        font-size: 75%;
        opacity: 25%;

        user-select: none;
    }
}
