/* Dot matrix background — scalable, vector, zero extra markup */
:root {
    --dot-gap: 32px;
    --dot-size: 1.2px;
    --dot-color-light: rgba(0, 0, 0, 0.2);
    --dot-color-dark: rgba(255, 255, 255, 0.08);
    --date-col: 12ch;
}

@supports (background: radial-gradient(#000, transparent)) {
    html {
        /* light mode */
        background-image: radial-gradient(
            var(--dot-color-light) var(--dot-size),
            transparent 0
        );
        background-size: var(--dot-gap) var(--dot-gap);
        background-attachment: fixed;
    }
    @media (prefers-color-scheme: dark) {
        html {
            /* dark mode */
            background-image: radial-gradient(
                var(--dot-color-dark) var(--dot-size),
                transparent 0
            );
        }
    }
}

body {
    background: transparent;
}

/* Center the content column */
header,
footer,
main {
    max-width: 600px;
    margin-inline: auto;
}

ul.h-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.h-feed > li {
    display: grid;
    grid-template-columns: var(--date-col) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    margin: 1.5rem 0;
}

ul.h-feed > li > a {
    grid-column: 1;
    justify-self: end;
    align-self: start;
    text-decoration: none;
    color: inherit;
}

ul.h-feed > li > article {
    padding: 1rem 1rem 0.85rem;
    background: var(--background-body);
    border: 1px solid var(--border);
    border-radius: 2px;
    box-shadow: 0 2px 10px var(--background);
    grid-column: 2;
}

ul.h-feed > li > a > time.dt-published,
ul.h-feed > li > time.dt-published {
    line-height: 1.1;
    font-size: small;
}

article footer {
    margin: 1.5rem 0 0.5rem 0;
}

article footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

article footer ul li {
    display: inline-block;
    margin-right: 0.5em;
}

article footer ul li::before {
    content: "#";
    margin-right: -0.3ch;
}

@media (max-width: 640px) {
    ul.h-feed > li {
        grid-template-columns: 1fr;
    }
    ul.h-feed > li > a {
        justify-self: start;
        margin: 0 0 0.5rem;
    }
    ul.h-feed > li > article {
        grid-column: 1;
    }
}