*, *::before, *::after { box-sizing: border-box; }
*:not(dialog) { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    html { interpolate-size: allow-keywords; }
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select { font: inherit;}
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Épuisé d'exister */

/* Variables */
:root {
    color-scheme: light dark;
    --font:      system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --accent:    light-dark(#6e1919, #ff9797);
    --fg:        light-dark(#060f15, #dfdfdf);
    --bg:        light-dark(#d8d8d8, #131619);
    --fg-muted:   color-mix(in srgb, var(--fg) 90%, var(--bg));
    --bg-muted:     color-mix(in srgb, var(--bg) 90%, var(--fg));
    --radius: 3px;
}

/* Structure */
body {
    max-width: 75ch;
    margin-inline: auto;
    padding: 1rem;
    &>header ul {
        display: flex;
        gap: 1rem;
    }
}

/* Éléments génériques */
body {
    font: 1.125rem/1.6 var(--font);
    color: var(--fg);
    background-color: var(--bg);
}
a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    &:hover { text-decoration-thickness: calc(0.2em);}
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-block: 0.5em 0.25em;
}
p {
    margin-block-start: 0.5rem;
}
blockquote {
    border-left: 3px solid var(--bg-muted);
    padding-left: 1rem;
    font-style: italic;
}

abbr {
    cursor: help;
}

/* Éléments spécifiques */
body>header {
    ul {
        list-style: none;
        padding: 0;
    }
    margin-block-end: 1rem;
}

#site-title {
    display: inline-block;
    width: 100%;
    color: var(--fg);
    font-size: 1.6rem;
    text-decoration: none;
    border-bottom: 1px solid var(--fg-muted);
    margin-block-end: 1rem;
}
ul.post-list {
    list-style: none;
    padding: 0.5em;
    li {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 1rem;
        margin-block-end: 1em;
    }
}

div.meta {
    font-size: 0.8em;
    background-color: var(--bg-muted);
    padding: 0.2em 0.4em;
    margin-bottom: 1rem;
    border-radius: var(--radius);
}

div.note {
    background-color: var(--bg-muted);
    padding: 0.2em 0.4em;
    margin-bottom: 1rem;
    font-size: 0.9em;
    font-style: italic;
    display: grid;
    grid-template-columns: 2em 1fr;
    gap: 0.4em;
    border-radius: var(--radius);
    &::before {
        content: "";
        height: 1.2em;
        width: 1.2em;
        background: currentColor;
        mask: url('/static/svg/info-circle.svg') no-repeat center / contain;
        align-self: center;
        justify-self: center;
    }
    & > * {
        grid-column: 2;
    }
}

hr {
    margin-block: 1rem;
}

article > footer {
    margin-block-start: 1.5rem;
}

time.narrow {
    display: none;
}
@media (max-width: 55ch) {
    time.narrow {
        display: inline;
    }
    time.wide {
        display: none;
    }
}

article.not-found p {
    text-align: center;
    font-size: 0.8em;
    font-style: italic;
    img {
        width: clamp(200px, 75%, 50ch);
        display: block;
        margin: auto;
    }
}
a[href^="http"] {
    /* font-size: 0; */
    &::after {
        content    : " ↗";
        display    : inline-block;
        font-size  : 1rem;
    }
}

.footnotes {
    border-top: 1px solid var(--bg-muted);
    margin-block-start: 2rem;
    hr {display: none;}
}
nav.pagination {
    margin-block-start: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    .prev {grid-column: 1; justify-self: start; }
    .next {grid-column: 2; justify-self: end; }
}