/* common variables */
:root {
    /* https://github.com/system-fonts/modern-font-stacks#monospace-code */
    --code-font: ui-monospace, /* if available */
        'Cascadia Code', /* windows 11 */
        'Source Code Pro,' /* various linuxes */
        Menlo, /* macos */
        Consolas, /* windows 7 */
        'DejaVu Sans Mono', /* various linuxes */
        monospace; /* fallback */
    /* https://github.com/system-fonts/modern-font-stacks#transitional*/
    --body-font: Charter, /* macos, ios */
        'Bitstream Charter', /* various linuxes */
        'Sitka Text', /* windows 8 */
        Cambria, /* windows 7 */
        serif; /* fallback */
    --border: burlywood;
    --bg: antiquewhite;
    --highlight: darkgoldenrod;
    --decor: maroon;
}

/* Include padding and border in size calulations */
* {
    box-sizing: border-box;
}

/* vertical rhythm (html is the root element) */
html {
    /* 1rem font size (16px by default) and */
    /* unitless 1.5 line height (24px by default) */
    font-size: 1rem;
    line-height: 1.5;
}

/* apply fonts */
body {
    font-family: var(--body-font);
    /* make fonts look visually consistent */
    font-size-adjust: ex-height 0.5;
}
code {
    font-family: var(--code-font);
}

body {
    /* basic page sizing */
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    /* center horizontally */
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    & > * {
        grid-area: 1 / 1;
    }
    & > svg {
        width: 100%;
        height: 100%;
    }
    background-color: var(--bg);
}

/* "page" style */
main {
    /* 250,235,215 is antiquewhite */
    background-color: rgba(250, 235, 215, 90%);
    border: 2px solid var(--border);
    backdrop-filter: blur(1px);
    /* keep the bottom clear of the page */
    margin-bottom: auto;
    /* just a little peek */
    margin-top: 0.5rem;
}

/* responsive content sizing */
/* 40rem is approximately 80 characters wide */
/* 55 = 40 + 5 + (2 * 4) + (2 * 1) */
main {
    padding: 1rlh 0;
    @media (width >= 55rem) {
        width: 53rem;
    }
    @media (width < 55rem) {
        width: calc(100vw - 1rem);
    }
    /* grid layout allows elements to poke into the margins */
    display: grid;
    /* prevent small pages from being stretched out vertically */
    grid-auto-rows: min-content;
    @media (width >= 55rem) {
        grid-template-columns: 4rem 1fr 5rem 4rem;
        & > * {
            grid-column: 2 / span 2;
        }
    }
    @media (width < 55rem) {
        grid-template-columns: 1rem 1fr 1rem;
        & > * {
            grid-column: 2;
        }
    }
}

/* let codeblocks shrink */
pre {
    max-width: 90%;
    overflow-x: scroll;
    /* indicator that there is overflow happening */
    text-overflow: ellipsis;
    /* a bit of padding for the scrollbar */
    padding-bottom: 1rlh;
}

/* make media shrink when the viewport is small */
img, video {
    max-width: 100%;
}
/* page bounds */
header {
    margin-bottom: 1rlh;
}
footer {
    margin-top: 1rlh;
}
/* navbar */
nav {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
nav > :first-child {
    margin-right: 1rem;
}
nav > a:not(:first-child) {
    margin-left: 1rem;
}
nav > a {
    text-decoration: none;
    color: var(--decor);
    font-size: 1.3rem;
    line-height: 1rlh;
}
nav > a:hover {
    text-decoration: underline;
}
nav > hr {
    flex-grow: 1;
    border: none;
    height: 0.5rem;
    /* the height and border to add up to 1rlh, */
    /* thanks to box-sizing: border-box */
    border-top: 2px dashed var(--border);
}

/* three-column layout for outdents, content, and asides */
article {
    display: grid;
    grid-template-columns: subgrid;
    @media (width >= 55rem) {
        grid-column: 1 / span 4;
    }
    @media (width < 55rem) {
        grid-column: 1 / span 3;
    }
}
/* main content goes in the middle */
article > * {
    grid-column: 2;
}
/* asides poke to the right */
aside {
    font-size: 0.8rem;
    line-height: 1rlh;
    @media (width >= 55rem) {
        margin: 0 0.5rem;
        grid-column: 3 / span 2;
    }
}
/* loose lists can have pretty large content. */
/* this ensures that any associated asides are aligned */
/* with the correct paragraph at least */
ul:has(p), ol:has(p) {
    @media (width >= 55rem) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 2 / span 3;
        & > * {
            grid-column: 1;
        }
    }
}
li:has(p) {
    @media (width >= 55rem) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / span 3;
        & > * {
            /* this is a hack. the list bullet only shows */
            /* up for elements with display: list-item, and */
            /* we need grid for our asides to spread properly, */
            /* so we just pretend that the first child of the list */
            /* is the list item. lol. */
            display: list-item;
            grid-column: 1;
        }
        & > aside {
            display: unset;
            grid-column: 2 / span 2;
        }
    }
}
/* header icons poke to the left */
hgroup {
    display: grid;
    grid-template-columns: subgrid;
    /* outdents poke to the left margin */
    @media (width >= 55rem) {
        grid-column: 1 / span 2;
        /* nested non-h1 elements will be in column 2 */
        & > * {
            grid-column: 2;
        }
    }
}
h1, h2, h3 {
    display: grid;
    grid-template-columns: subgrid;
    @media (width >= 55rem) {
        grid-column: 1 / span 2;
        /* header links appear on hover and stick to the margin line */
        & > a:first-child {
            justify-self: right;
            /* padding instead of margin so it's clickable */
            padding-right: 0.5rem;
            text-decoration: none;
            opacity: 0;
        }
        &:hover > a:first-child {
            opacity: 1;
        }
    }
    /* the heading is always clickable */
    & > a:nth-child(2) {
        text-decoration: none;
        color: unset;
        width: fit-content;
    }
    /* hide the lil hover button on mobile */
    @media (width < 55rem) {
        & > a:first-child {
            display: none;
        }
    }
}

/* qwdring */
footer > iframe {
    border: none;
    width: 100%;
    height: 2.5rem;
}

/* Vertical rhythm primitives */
h1 {
    font-size: 2rem;
    line-height: 1.5;
    margin: 0;
    /* margins are handled in hgroup */
}
h2 {
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 0.5rlh;
}
h3 {
    font-size: 1.25rem;
    line-height: 1;
    margin: 0;
    margin-bottom: 1rlh;
}
li {
    margin: 0;
    line-height: 1rlh;
}
p, ul, ol, pre, figure, math[display="block"] {
    margin: 0;
    line-height: 1rlh;
    margin-bottom: 1rlh;
}
/* so footnotes links etc don't expand their lines */
sup {
    line-height: 1;
}

/* reposition margins when headers are in hgroup */
hgroup {
    margin: 0;
    margin: 1rlh 0;
}

/* make hr fit into vertical rhythm */
hr {
    /* note: hr default margins also interact badly with flex */
    /* https://stackoverflow.com/a/34372979 */
    margin: 0;
    /* reset default border */
    border: none;
    /* the height and border to add up to 1rlh, */
    /* thanks to box-sizing: border-box */
    border-bottom: 2px solid var(--highlight);
    height: 1rlh;
}

/* style post metadata */
dl {
    /* description lists are by default a block element */
    margin: 0;
    white-space: pre;
    display: inline;
}
dt {
    display: inline;
    font-style: italic;
}
dd {
    margin-left: 0;
    display: inline;
    font-style: italic;
}

/* convenient grid display for testing */
-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, darkgrey 1px, transparent 1px);
  background-size: 16px 24px;
  transform: translateY(60rlh);
  pointer-events: none;
}