html {
    font-size:16px;

    --color-bg-body:hsl(226, 26%, 8%);
    --color-link:#3ee;
}

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

h1, h2, h3, h4 {
    all:unset;
    display:block;
    color:#ddd;
    line-height:1.25em;
    margin:0.75em 0;
    font-weight:700;
}

h1 {font-size:1.75em;}
h2 {font-size:1.5em}
h3 {font-size:1.25em}
h4 {font-size:1em}

body {
    margin:0;
    background-color:var(--color-bg-body);
    color:#ddd;
    font-family: "Inria Serif", serif;

    & > header {
        position:sticky; top:0;
        background-color:var(--color-bg-body);

        display:grid;
        grid-template-columns:1fr max-content;
        padding:1.25em 1.5em;
        max-width:64em;
        box-sizing:border-box;
        margin:auto;

        & > a {
            color:white;
            text-decoration:none;
            justify-self:start;

            &:first-child {
                font-size:1.375em;
                white-space:nowrap;
            }

            &:last-child {
                font-weight:700;
            }
        }

    }

    & > :is(main, article) {
        max-width:64em;
        box-sizing:border-box;
        margin:auto;
        overflow:hidden;
    }

    & > main {
        padding:0.875rem;
    }

    & > .articles-list {
        display:grid;
        grid-auto-rows:max-content;
        grid-gap:1.125rem;

        & > * {
            padding:0.5rem;
            border-radius:0.25rem;
            background-color:hsl(226, 26%, 14%);

            & > a > img {
                border:2px solid hsl(226, 18%, 40%);
            }

            & > :last-child {
                text-align:right;
            }
        }
    }

    & > article {
        &:not(.cover), &.cover > main {
            padding:0.875rem;
        }

        &.cover > :first-child {
            display:grid;
            grid-template-columns:1fr;
            grid-template-rows:repeat(4, max-content);

            & > img {
                order:1;
                grid-column:1/-1;
                grid-row:1/3;
                width:100%;
                min-height:384px;
                aspect-ratio:16/9;
                object-fit:cover;
                object-position:center center;
            }

            & > h1 {
                order:2;
                grid-column:1/-1;
                grid-row:2/3;
                margin:0;
                padding:0.875rem;
                box-sizing:border-box;
                background:linear-gradient(to bottom, transparent 0, hsla(226, 26%, 8%, 0.8) 10px, var(--color-bg-body) 100%);
                align-self:end;
            }

            & > summary {
                order:3;
                grid-column:1/-1;
                grid-row:3/-1;
                padding:0.875rem;
                box-sizing:border-box;
            }
        }
    }
}

@media all and (min-width: 736px) {
    body > article.cover > :first-child {
        & > img {
            grid-row:1/4;
        }

        & > h1 {
            background:linear-gradient(to bottom, transparent 0, hsla(226, 26%, 8%, 0.8) 10px);
        }

        & > summary {
            background:linear-gradient(to bottom, hsla(226, 26%, 8%, 0.8), var(--color-bg-body) 40%);
        }
    }
}

@media all and (min-width: 928px) {
    body > .articles-list > * {
        display:grid;
        grid-gap:1rem;
        grid-template-columns:max-content 1fr;
        grid-template-rows:max-content 1fr max-content;

        & > :first-child {
            grid-row:1/-1;
            align-self:start;
        }
    }
}