/* onest-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/onest-v9-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/onest-v9-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 800;
    src: url("/fonts/onest-v9-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/onest-v9-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**************************************************************************************
***                                  css variables                                  ***
**************************************************************************************/

:root {
    /* colours */
    --back-dark: light-dark(#f0eee6, #141310);
    --back-lite: light-dark(#fafafa, #242220);
    --back-tone: light-dark(#f9f8f4, #1a1917);
    --bord: light-dark(#1f1e1d26, #e8e4da26);
    --fore: light-dark(#1f1e1d, #e8e4da);
    --grey: light-dark(#73726c, #9e9b93);
    --link-base: light-dark(#1e5fb5, #5a9fd4);
    --link-hovr: light-dark(#163f80, #7db3f0);

    /* font settings */
    --font-name: Onest, system-ui;
    --font-line: 1.6rem;
    --font-size: 16px;

    /* site measurements */
    --site-bord: 0.1rem;
    --site-wide: 64ch;
}

/**************************************************************************************
***                                 global elements                                 ***
**************************************************************************************/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--back-tone);
    color: var(--fore);
    font-family: var(--font-name);
    font-size: var(--font-size);
    line-height: var(--font-line);
}

body {
    margin: 0 auto;
    max-width: var(--site-wide);
    width: 100%;
}

/**************************************************************************************
***                                 generic elements                                ***
**************************************************************************************/

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

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

article {
    background-color: var(--back-lite);
    border: var(--site-bord) solid var(--bord);
    margin: 1rem 0;
    padding: 0rem 1rem;

    header {
        p {
            color: var(--grey);
            margin-top: -0.5rem;
        }
    }

    section img {
        border: var(--site-bord) solid var(--bord);
        display: block;
        height: auto;
        margin: 1rem 0;
        max-width: 100%;
    }
}

blockquote {
    background-color: var(--back-tone);
    border-bottom: var(--site-bord) solid var(--bord);
    border-top: var(--site-bord) solid var(--bord);
    padding: 0 1rem;
    margin: 1rem 0;

    cite,
    cite a {
        color: var(--grey);
        font-style: normal;
    }
}

code {
    background-color: var(--back-tone);
    font-size: 0.875rem;
    padding: 0.1rem 0.25rem;
}

h1 {
    font-weight: 900;
}

h2 {
    font-weight: 800;
}

ol,
ul {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/**************************************************************************************
***                                   site header                                   ***
**************************************************************************************/

body > header {
    text-align: center;

    nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        list-style-type: none;
        padding: 0;

        a {
            color: var(--grey);
            display: block;
            padding: 0.1rem 0.5rem;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        li {
            background-color: var(--back-lite);
            border: var(--site-bord) solid var(--bord);
            flex: 1;
        }
    }
}

/**************************************************************************************
***                                   site footer                                   ***
**************************************************************************************/

body > footer {
    color: var(--grey);
    text-align: center;

    a:first-of-type {
        color: var(--grey);
        text-decoration: none;
    }
}

/**************************************************************************************
***                                 custom elements                                 ***
**************************************************************************************/

body > main ul.post-list {
    list-style: none;
    padding: 0;

    li {
        align-items: center;
        display: grid;
        gap: 1rem;
        grid-template-columns: auto 1fr auto;
        padding: 0.25rem;
    }

    li img {
        display: block;
        height: 2.5rem;
        margin: 0;
    }

    time {
        color: var(--grey);
        white-space: nowrap;
    }
}

body > main nav.post-navs ul {
    color: var(--grey);
}

body > main ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    text-align: center;

    a {
        color: var(--grey);
        display: block;
        padding: 0.1rem 0.5rem;
        text-decoration: none;
    }

    a:hover {
        color: var(--link-hovr);
        text-decoration: underline;
    }

    li {
        background-color: var(--back-lite);
        border: var(--site-bord) solid var(--bord);
        flex: 1;
    }

    li.active {
        outline: var(--site-bord) solid var(--bord);
    }
}

/**************************************************************************************
***                                  media queries                                  ***
**************************************************************************************/

@media screen and (max-width: 680px) {
    article {
        border-left: none;
        border-right: none;
    }

    body > header {
        nav ul {
            background-color: var(--back-lite);
            border-top: var(--site-bord) solid var(--bord);
            border-bottom: var(--site-bord) solid var(--bord);

            li {
                border: none;
            }
        }
    }

    body > main ul.post-list li {
        grid-template-columns: 1fr auto;
    }

    body > footer {
        font-size: 0.875rem;
    }

    .desktop {
        display: none;
    }
}

@media print {
    :root {
        --back-dark: #fff;
        --back-lite: #fff;
        --back-tone: #fff;
        --bord: #ccc;
        --grey: #777;
        --fore: #000;
        --link-base: #05a;
        --link-hovr: #05a;
    }
}

@media (prefers-color-scheme: dark) {
    article img,
    ul.post-list img {
        filter: brightness(0.85);
    }
}