#sidebar {
    padding-top: 0;
}
#sidebar > *:not(:has(img), table) {
    padding-left: 1rem;
    padding-right: 1rem;
}

p:has(img) {
    line-height: 0;
}
.bio {
    font-family: var(--fonts-serif);
    font-feature-settings: "liga" 0;
}

#sidebar #infobox {
    margin-top: -1rem;
    border-color: black;
    border-top: 1pt solid;
    border-bottom: 1pt solid;
    tr:not(:last-child) td {
        border-bottom: 1pt solid;
    }
    tr td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    tr td:first-child {
        padding-left: 1rem;
    }
    tr td:last-child {
        font-weight: bold;
        padding-right: 1rem;
    }
}

@media (min-width: 450px) {
    #sidebar > *:not(:has(img), table) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    #sidebar #infobox {
        tr td:first-child {
            padding-left: 1.5rem;
        }
        tr td:last-child {
            padding-right: 1.5rem;
        }
    }
}

#sidebar li {
    a {
        text-decoration: none;
    }
    &::before {
        width: 1em;
        text-align: center;
    }
    &:has(a[href*="mailto"])::before {
        content: "❤︎";
    }
    &:has(a[href*="lasagna"])::before {
        content: "✦";
    }
    &:has(a[href*="bsky.app"])::before {
        content: "@";
    }
    &:has(a[href*="dyke.solutions"])::before {
        content: "❦";
    }
    &:has(a[href*="cohost.org"])::before {
        content: "†";
    }
}

@supports (display: grid) {
    #sidebar {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(1, 1fr);
        align-content: baseline;
        padding-bottom: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        max-width: unset;
        border-color: black;
        border-top: 1pt solid;
        border-bottom: 1pt solid;
    }
    #sidebar > * {
        grid-column: 1;
    }

    #content {
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 1rem;
        column-gap: 2rem;
        align-content: last baseline;
    }
    #content > * {
        max-width: 500px;
    }

    @media (min-width: 450px) {
        #sidebar {
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            border-color: black;
            border: 1pt solid;
            @supports (outline: 1pt solid black) {
                border: none;
                outline: 1pt solid var(--colour-text);
            }
        }
    }

    @media (min-width: 700px) {
        #sidebar img {
            max-width: 500px;
        }

        #sidebar {
            grid-column: 1;
            margin-left: -1.5rem;
            margin-right: 0;
        }
        #content {
            padding-top: 2rem;
            grid-column: 2 / span 3;
        }
        main {
            border: 1pt solid black;
            @supports (outline: 1pt solid black) {
                border: none;
                outline: 1pt solid var(--colour-text);
            }
        }
    }
    @media (min-width: 1440px) {
        #content {
            grid-column: 2 / span 5;
        }
    }
}