/* 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+ */
}
/**************************************************************************************
***                              reset & normalisation                              ***
**************************************************************************************/

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

body {
    margin: 0;
}

/**************************************************************************************
***                                  css variables                                  ***
**************************************************************************************/

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

    --font: "Onest", sans-serif;
    --font-size: 17px;
    --page-bord: 0.1rem;
    --page-line: 1.6rem;
    --page-radi: 0.25rem;
    --page-size: 64ch;
}

/**************************************************************************************
***                                globals & generics                               ***
**************************************************************************************/

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

body {
    background-color: var(--back);
    color: var(--fore);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

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

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

code {
    background-color: var(--back-lite);
    border-radius: var(--page-radi);
    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;

    h1 {
        margin: 0;
        padding: 0.75em 0 0.25em 0;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        list-style-type: none;
        margin: 0.5rem auto;
        padding: 0;
        width: fit-content;

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

/**************************************************************************************
***                                   site content                                  ***
**************************************************************************************/

body > main {
    flex: 1;
    margin-inline: auto;
    max-width: var(--page-size);
    padding: 0 1rem;
    width: 100%;
}

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

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

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

article section {
    text-align: justify;
    text-justify: inter-word;

    blockquote {
        background-color: var(--back-lite);
        border: var(--page-bord) solid var(--bord);
        border-radius: var(--page-radi);
        padding: 0 1rem;
        margin: 1rem 0;

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

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

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

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

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

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

    a:first-of-type {
        text-decoration: none;
    }

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

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

body > main p.split {
    color: var(--grey);
    margin: 2rem auto;
    text-align: center;
}

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

    li {
        align-items: center;
        border-radius: var(--page-radi);
        display: grid;
        gap: 1rem;
        grid-template-columns: auto 1fr auto;
        padding: 0.25rem;
    }

    li img {
        border: var(--page-bord) solid var(--bord);
        border-radius: var(--page-radi);
        display: block;
        height: 40px;
        margin: 0;
        width: 80px;
    }

    li:hover {
        background-color: var(--back-dark);
    }

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

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

@media screen and (max-width: 500px) {
    body > footer {
        font-size: 0.875rem;
    }
}

@media print {
    :root {
        --back: #fff;
        --back-dark: #fff;
        --back-lite: #fff;
        --fore: #000;
    }
}

@media (prefers-color-scheme: light) {
    article img,
    ul.list img {
        filter: sepia(0.4) saturate(0.75);
    }
}

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