/* Copyright © 2019-2024  Fanael Linithien */
/* SPDX-License-Identifier: AGPL-3.0-or-later OR CC-BY-SA-4.0 */
/* Basics */
* {
    margin: 0;
    padding: 0;
}

:focus {
    outline-offset: 0.125em;
    outline-offset: max(0.125em, 2px);
    outline: 0.125em dashed;
    outline-width: max(0.125em, 2px);
}

html {
    --basic-link-color: #2431a9;
    --box-shadow-color: rgba(0, 0, 0, 0.094);
    --box-shadow-specs: 0 0 0.75ch 0.5ch var(--box-shadow-color), 0 0 1.5ch 1ch var(--box-shadow-color);
    --visited-link-color: #819;
    -webkit-text-size-adjust: 100%;
    color-scheme: light dark;
    font-family: serif;
    line-height: 1.25;
    scroll-padding: 1em 0;
}

@media screen {
    html {
        background-color: #ece5e9;
        background-image: linear-gradient(
            to bottom,
            #ece1de 0%, #ece1de 5.714%,
            #eee6e1 15.714%, #eee6e1 21.429%,
            #efe8e4 31.429%, #efe8e4 37.143%,
            #efefef 47.143%, #efefef 52.857%,
            #ece5e9 62.857%, #ece5e9 68.571%,
            #eae4e8 78.571%, #eae4e8 84.286%,
            #e9dee5 94.286%);
        color: #11091c;
        font-size: calc(1em + 0.1vh + 0.1vw);
        min-height: 100%;
    }

    body {
        margin: 0 auto;
        max-width: 93.75%;
        width: 100ch;
    }
}

/* Rein in underline size in blink */
@supports (-webkit-locale: "en") and (not (-webkit-hyphens: none)) {
    a:any-link {
        text-decoration-thickness: max(1px, 0.065em);
    }
}

a:visited {
    color: #819;
    color: var(--visited-link-color);
}

a:link, a[href^="#"] {
    color: #2431a9;
    color: var(--basic-link-color);
}

a:active {
    color: #841;
}

a:focus, a:hover {
    text-decoration-thickness: max(2px, 0.1em);
}

ul, ol {
    padding-left: 3ch;
}

main li {
    margin: 0.5em 0;
}

.at-only:not(:focus):not(:active) {
    clip-path: inset(50%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -0.5px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Banner-header */
#top-header {
    padding: 1.5rem 0 1rem;
    position: relative;
    text-align: center;
}

#top-header div {
    font-size: 207.4%;
    font-variant: small-caps;
}

#skip-nav {
    left: 0;
    padding: 0 0.25ch;
    position: absolute;
    top: 0.25em;
}

/* Navigation menu */
#top-nav {
    line-height: 2;
    list-style: none;
    padding: 0 0 0.75em 0;
    text-align: center;
}

#top-nav li {
    display: inline-block;
    font-size: 112.5%;
    padding: 0 0.75ch;
}

@supports (display: flex) and (min-width: max-content) {
    #top-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #top-nav li {
        min-width: max-content;

        flex-basis: calc((40ch - 100%) * 1000);
        flex-basis: clamp(min((40ch - 100%) * 1000, 35%), (25ch - 100%) * 1000, 100%);
    }
}

/* Articles */
main {
    border-top: thin dotted #777;
    line-height: 1.5;
}

@media (min-width: 50em) {
    main {
        line-height: 1.625;
    }
}

article header {
    padding-bottom: 1em;
}

article header p {
    color: #333;
    font-size: 81.25%;
    padding-top: 0;
    text-align: center;
    text-indent: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.375;
    padding: 0.5rem 0;
    page-break-after: avoid;
}

h4, h5, h6 {
    font-weight: bold;
    line-height: 1.5;
}

h1 {
    font-size: 207.4%;
    font-variant: small-caps;
    padding-bottom: 0;
}

h2 {
    font-size: 172.8%;
}

h3 {
    font-size: 144%;
}

h4 {
    font-size: 120%;
}

h5 {
    font-size: 100%;
}

h6 {
    font-size: 83.33%;
}

section:first-of-type {
    counter-reset: section;
}

section {
    counter-increment: section;
}

section .section-link > :first-child::before {
    content: counters(section, ".") ". ";
}

.section-link > [aria-hidden] {
    padding-left: 0.5ch;
    user-select: none;
}

@media (min-width: 118em),
(min-width: 95em) and (min-aspect-ratio: 1/4),
(min-width: 85em) and (min-aspect-ratio: 1/2),
(min-width: 75em) and (min-aspect-ratio: 1/1) {
    .section-link {
        display: inline-block;
        position: relative;
    }

    .section-link > [aria-hidden] {
        left: -2.25ch;
        padding-right: 2.25ch;
        position: absolute;
        top: 0;
    }
}

@supports (--x: 0) {
    .section-link {
        --text-decoration: underline;
        text-decoration: none;
    }

    .section-link:not(:hover):not(:focus):not(:active) {
        --link-color: var(--basic-link-color);
        --text-decoration: none;
        color: inherit;
    }

    .section-link > :first-child {
        text-decoration: var(--text-decoration);
        text-decoration-thickness: inherit;
    }

    .section-link > [aria-hidden] {
        color: var(--link-color, inherit);
    }
}

p {
    padding: 0.5em 0;
    text-indent: 3ch;
}

li > p {
    text-indent: 0;
}

.sidenote, .info {
    border-radius: 1.5ch;
    margin: 0.5em 0;
    padding: 0.25em 1ch;
    page-break-inside: avoid;
}

.sidenote {
    font-size: 87.5%;

    border: thin solid #777;
    border-width: thin thick;
}

.info {
    border: medium solid #658;
}

em, strong {
    color: #98362a;
}

/* Figures, code blocks and syntax highlighting */
pre, code, samp, kbd, .program-name {
    /* Browsers completely break relative font sizing when the font family
       is just "monospace", so work around this misbehavior. */
    font-family: monospace, monospace;
    font-size: 87.5%;
}

pre code, pre samp, pre kbd {
    font-size: 100%;
}

figure, .code-block {
    margin: 0.625em 0;
    page-break-inside: avoid;
    text-indent: 0;
}

.code-block {
    border-radius: 1.5ch;
    border: thin solid #aaa;
    line-height: 1.5;
    padding: 0.5em 1ch;
}

@media screen {
    .code-block {
        background-color: rgba(221, 221, 204, 0.2);
        border: var(--kill);
        box-shadow: var(--box-shadow-specs);
        overflow: auto;
    }
}

.cx-language {
    border-bottom: thin solid #aaa;
    display: block;
    left: 0;
    margin-bottom: -1.5em;
    position: sticky;
    white-space: normal;
}

.cx-numbered {
    counter-reset: line-number;
    display: table;
    min-width: 100%;
}

.cx-l {
    counter-increment: line-number;
    display: table-row;
    transition: background-color 0.2s;
}

.cx-l:hover {
    background-color: rgba(196, 196, 179, 0.267);
}

.cx-l::before, .cx-l > * {
    display: table-cell;
}

.cx-l::before {
    border-right: thin solid #aaa;
    color: #555;
    content: counter(line-number);
    padding-right: 0.5ch;
    text-align: right;
}

.cx-l > * {
    width: 100%;
    padding-left: 0.5ch;
}

.c-k, .c-se {
    color: #811;
}

.c-s, .c-gi {
    color: #138;
}

.c-m {
    color: #618;
}

.c-c {
    color: #555;
    font-style: italic;
}

.c-gh, .c-gu, .c-nc, .c-nf {
    color: #153;
}

.c-gd, .c-nb {
    color: #541;
}

figure {
    padding-top: 0.5em;
    text-align: center;

    border: medium #aaa;
    border-style: solid none;
}

figcaption p {
    text-align: left;
}

figure .holder > * {
    margin: 0.5em auto;
}

@media screen {
    figure .holder {
        overflow: auto;
    }
}

@supports (width: max(1%, 1vw)) {
    figure .holder {
        left: 50%;
        margin-left: min(-45vw, -50%);
        margin-right: min(-45vw, -50%);
        position: relative;
        right: 50%;
        width: max(100%, 90vw);
    }
}

figure img {
    display: block;
    height: auto;
    max-width: 100%;
    width: auto;
}

/* Tables */
table {
    border-collapse: collapse;
}

td, th {
    border: thin solid;
    padding: 0.2em 0.5ch;
}

tbody th {
    text-align: left;
}

tfoot {
    font-style: italic;
}

table.perf-stat td:nth-child(2) {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

table.perf-stat td:nth-child(4) {
    text-align: left;
}

@media screen {
    tr {
        transition: background-color 0.2s;
    }

    td, th {
        white-space: nowrap;
    }

    thead, tfoot {
        background-color: rgba(229, 209, 212, 0.533);
    }

    tbody > tr:nth-child(2n) {
        background-color: rgba(204, 204, 170, 0.2);
    }

    table tr:hover {
        background-color: rgba(255, 170, 238, 0.333);
    }
}

/* Table of contents */
.toc {
    background-color: rgba(229, 209, 212, 0.266);
    border: thin solid #aaa;
    border: var(--kill);
    border-radius: 1.5ch;
    box-shadow: var(--box-shadow-specs);
    padding: 1ch;
}

.toc ol {
    counter-reset: item;
}

.toc > ol {
    padding-left: 1.6ch;
}

.toc li {
    counter-increment: item;
    list-style-type: none;
}

.toc li::before {
    content: counters(item, ".") ". ";
}

/* In-order post navigation */
#order-nav {
    border-top: thin dotted #777;
    font-size: 112.5%;
    font-style: italic;
    line-height: 1.5;
    list-style: none;
    padding: 0.5rem 0;
    text-align: center;
}

#order-nav li {
    display: inline-block;
    width: 33.33333%;
}

#order-nav .top {
    display: block;
    padding-bottom: 0.375rem;
    width: 100%;
}

#order-nav .prev {
    text-align: left;
}

#order-nav .next {
    text-align: right;
}

/* Footer */
#footer {
    border-top: thin dotted #777;
    color: #555;
    font-size: 75%;
    line-height: 1.625;
    list-style: none;
    padding: 0.5rem 0 1rem;
    text-align: center;
}

/* Archives */
.read-full {
    display: block;
    font-style: italic;
    font-weight: bold;
    margin: 0.5em 0;
    width: fit-content;
}

article:not(:last-child) .read-full {
    margin-bottom: 2.5em;
}

/* Interactive elements */
button {
    font-size: inherit;
    padding: 0.125em 0.5ch;
}

/* Dark mode */
@media only screen and (prefers-color-scheme: dark) {
    html {
        --basic-link-color: #6fa5dc;
        --box-shadow-color: rgba(0, 0, 0, 0.466);
        --visited-link-color: #68d391;
        background-color: #111;
        background-image: none;
        color: #eee;
    }

    a:active {
        color: #ea7a7a;
    }

    .c-k, .c-se {
        color: #ef8e8b;
    }

    .c-s, .c-gi {
        color: #8bb4e2;
    }

    .c-m {
        color: #ecca7d;
    }

    .c-gh, .c-gu, .c-nc, .c-nf, em, strong {
        color: #7fdfa6;
    }

    .c-gd, .c-nb {
        color: #c292d0;
    }

    .c-c, #footer li, article header p, .cx-l::before {
        color: #a5a5a5;
    }

    figure, .code-block, .cx-language, .cx-l::before, td, th {
        border-color: #888;
    }

    .info {
        border-color: #b87ec9;
    }

    thead, tfoot {
        background-color: #111;
    }

    tbody > tr:nth-child(2n), .cx-l:hover {
        background-color: #1d1d1d;
    }

    .code-block, .toc, thead, tfoot {
        background-color: #262626;
    }

    table tr:hover {
        background-color: #2b242b;
    }

    @supports (-webkit-background-clip: text) or (background-clip: text) {
        #top-header span {
            -webkit-background-clip: text;
            background-clip: text;
            background-image: linear-gradient(
                to right,
                #9ad4ee 0%, #9ad4ee 8%, #bfcaec 13%, #dcc1de 18%,
                #ecbdc6 23%, #ecbdc6 31%, #edcdd3 36%, #eedee1 41%,
                #eee 46%, #eee 54%, #eedee1 59%, #edcdd3 64%,
                #ecbdc6 69%, #ecbdc6 77%, #dcc1de 82%, #bfcaec 87%,
                #9ad4ee 92%);
            color: transparent;
        }
    }
}

/* Print-friendly overrides */
@media print {
    nav, #skip-nav, .section-link > [aria-hidden], #footer > :first-child {
        display: none;
    }

    a:link, a:visited {
        color: inherit;
        text-decoration: inherit;
    }

    .code-block {
        white-space: pre-wrap;
    }
}