@font-face {
    font-family: "Alegreya";
    src: url("Alegreya-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alegreya";
    src: url("Alegreya-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

:root {
    --font-sans: sans-serif;
    --font-serif: "Alegreya", -apple-system-ui-serif, ui-serif, "Spectral", "Georgia", serif;
    --content-width: 43rem;
}

/* Light theme (default) */
:root {
    --primary:    oklch(0.18 0.02 60);
    --secondary:  oklch(0.50 0.01 60);
    --tertiary:   oklch(0.97 0.01 80);
    --quaternary: oklch(0.94 0.01 70);
    --base:       oklch(0.92 0.012 79.78);
    --accent:     oklch(0.90 0.06 310);
    --accent-alt: oklch(0.97 0.01 80);
    --accent-ui:  oklch(0.6348 0.1565 350.47);
    --link:         oklch(0.6791 0.3447 227.78);
    --link-visited: oklch(0.5694 0.2399 300.73);
    --semantic-red:     oklch(0.597  0.1692 28.38);
    --semantic-orange:  oklch(0.6576 0.1539 49.3);
    --semantic-green:   oklch(0.6513 0.1242 119.38);
    --semantic-saffron: oklch(0.7346 0.1462 87.46);
    --semantic-cyan:    oklch(0.6701 0.0999 186.58);
    --semantic-blue:    oklch(0.5988 0.1104 247);
    --semantic-purple:  oklch(0.6348 0.1098 291);
    --semantic-magenta: oklch(0.6348 0.1565 350.47);
    --semantic-pink:    oklch(0.6324 0.1485 349.76);
    --semantic-0-red:     oklch(0.597  0.1692 28.38);
    --semantic-0-orange:  oklch(0.6576 0.1539 49.3);
    --semantic-0-green:   oklch(0.6513 0.1242 119.38);
    --semantic-0-saffron: oklch(0.7346 0.1462 87.46);
    --semantic-0-cyan:    oklch(0.6701 0.0999 186.58);
    --semantic-0-blue:    oklch(0.5988 0.1104 247);
    --semantic-0-purple:  oklch(0.6348 0.1098 291);
    --semantic-0-magenta: oklch(0.6348 0.1565 350.47);
    --semantic-0-pink:    oklch(0.6324 0.1485 349.76);

    /* Drawing palette - ink levels (higher = more visible) */
    --draw-100: oklch(0.90 0 0);
    --draw-200: oklch(0.82 0 0);
    --draw-400: oklch(0.65 0 0);
    --draw-600: oklch(0.45 0 0);
    --draw-800: oklch(0.25 0 0);

    /* Drawing palette - muted hues */
    --draw-red:    oklch(0.65 0.08 25);
    --draw-orange: oklch(0.65 0.08 55);
    --draw-yellow: oklch(0.65 0.18 90);
    --draw-green:  oklch(0.65 0.08 145);
    --draw-cyan:   oklch(0.65 0.08 190);
    --draw-blue:   oklch(0.65 0.08 250);
    --draw-purple:  oklch(0.65 0.08 300);
    --draw-magenta: oklch(0.65 0.08 330);
    --draw-pink:    oklch(0.65 0.08 350);
}

/* Dark theme — system preference or manual toggle.
 * Neutral gray scale inspired by katamari.io */
@media (prefers-color-scheme: dark) { :root {
    --primary:    oklch(0.83 0 0);
    --secondary:  oklch(0.63 0 0);
    --tertiary:   oklch(0.27 0 0);
    --quaternary: oklch(0.21 0 0);
    --base:       oklch(0.18 0 0);
    --accent:     oklch(0.35 0.06 310);
    --accent-alt: oklch(0.31 0 0);
    --accent-ui:  oklch(0.6324 0.1485 349.76);
    --link:         oklch(0.7791 0.1447 227.78);
    --link-visited: oklch(0.7694 0.1399 300.73);
    --semantic-red:     oklch(0.5042 0.1648 27.84);
    --semantic-orange:  oklch(0.5665 0.1523 45.02);
    --semantic-green:   oklch(0.5593 0.1335 122.92);
    --semantic-saffron: oklch(0.6333 0.1295 85.81);
    --semantic-cyan:    oklch(0.5544 0.0863 186.74);
    --semantic-blue:    oklch(0.4818 0.1315 254.79);
    --semantic-purple:  oklch(0.454 0.1451 294.83);
    --semantic-magenta: oklch(0.4954 0.1614 349.76);
    --semantic-pink:    oklch(0.6324 0.1485 349.76);
    --semantic-0-red:     oklch(0.4042 0.1648 27.84);
    --semantic-0-orange:  oklch(0.4665 0.1523 45.02);
    --semantic-0-green:   oklch(0.4593 0.1335 122.92);
    --semantic-0-saffron: oklch(0.5333 0.1295 85.81);
    --semantic-0-cyan:    oklch(0.4544 0.0863 186.74);
    --semantic-0-blue:    oklch(0.4818 0.1315 254.79);
    --semantic-0-purple:  oklch(0.454  0.1451 294.83);
    --semantic-0-magenta: oklch(0.4954 0.1614 349.76);
    --semantic-0-pink:    oklch(0.5324 0.1485 349.76);

    /* Drawing palette — chalk levels (higher = more visible) */
    --draw-100: oklch(0.25 0 0);
    --draw-200: oklch(0.33 0 0);
    --draw-400: oklch(0.50 0 0);
    --draw-600: oklch(0.68 0 0);
    --draw-800: oklch(0.85 0 0);

    /* Drawing palette — muted hues */
    --draw-red:    oklch(0.55 0.08 25);
    --draw-orange: oklch(0.55 0.08 55);
    --draw-yellow: oklch(0.55 0.08 90);
    --draw-green:  oklch(0.55 0.08 145);
    --draw-cyan:   oklch(0.55 0.08 190);
    --draw-blue:   oklch(0.55 0.08 250);
    --draw-purple:  oklch(0.55 0.08 300);
    --draw-magenta: oklch(0.55 0.08 330);
    --draw-pink:    oklch(0.55 0.08 350);
}}

html,
body {
    color-scheme: light dark;
    accent-color: var(--accent-ui);
    color: var(--primary);
    background-color: var(--base);
    font-family: var(--font-sans);
    /* font-family: var(--font-serif); */
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

main {
    width: min(100% - 3rem, var(--content-width));
    margin-inline: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}

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

ul ul, ul ol, ol ul, ol ol {
    padding-inline-start: 1.5em;
}

a {
    color: var(--link);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-color: oklch(from var(--link) l c h / 50%);
}

a:visited {
    color: var(--link-visited);
    text-decoration-color: oklch(from var(--link-visited) l c h / 50%);
}

a:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 0.1em;
}

blockquote {
    background-color: var(--accent-alt);
    border: 1px solid oklch(from var(--accent-alt) calc(l - 0.10) calc(c - 0.05) h);
    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 4pt -1pt  rgba(0,0,0,0.1),
              0pt  0pt  4pt -1pt rgba(0,0,0,0.1),
              0pt  2pt 8pt -3pt  rgba(0,0,0,0.1);

    border-radius: 0.5em;

    margin: 0 0 1.5em 0;
    position: relative;
    padding: 0.7em;
    z-index: 1;
}

blockquote p {
    margin: 0;
}

blockquote[data-quote]::after,
blockquote[data-quote]::before {
    color: var(--accent-ui);
    font-size: 5em;
    line-height: 0.8;
}

blockquote[data-quote]::before {
    content: open-quote;
    vertical-align: top;
    position: absolute;
    left: -0.15em;
    top: -0.1em;
}

blockquote[data-quote]::after {
    content: close-quote;
    vertical-align: bottom;
    position: absolute;
    right: -0.1em;
    bottom: -0.65em;
}

blockquote[data-quote] {
    padding: 1.5em;
    font-family: var(--font-serif);
    font-size: 1.05em;
    line-height: 1.6;
}

blockquote[data-quote] footer {
    margin-top: 1em;
    font-family: var(--font-sans);
    font-size: 0.8em;
    color: oklch(0.73 0 0);
}

[lang='fr'] blockquote[data-quote]::before,
[lang='fr'] blockquote[data-quote]::after {
    font-size: 3.5em;
}

[lang='fr'] blockquote[data-quote]::before {
    left: -0.3em;
    top: -0.4em;
}

[lang='fr'] blockquote[data-quote]::after {
    right: -0.3em;
    bottom: -0.3em;
}

button,
input[type='submit'] {
    color: var(--primary);
    padding: 0.4em 1em;
    border-radius: 0.3em;
    cursor: pointer;
    font-size: inherit;
    position: relative;

    background-color: var(--accent-alt);
    border: 1px solid oklch(from var(--accent-alt) calc(l - 0.20) c h);
    box-shadow:
              0pt  0pt  2pt -1pt rgba(0,0,0,0.4),
              0pt  2pt  8pt -3pt  rgba(0,0,0,0.2),
        inset 0pt  0pt  4pt -3pt rgba(0,0,0,0.2),
        inset 0pt -8pt 12pt -3pt rgba(0,0,0,0.1),
        inset 0pt  1pt  2pt -1pt rgba(255,255,255,0.6);

}

input::placeholder {
    font-style: italic;
}

button:hover,
input[type='submit']:hover {
    opacity: 0.8;
}

button:active,
input[type='submit']:active {
    border: 1px solid oklch(from var(--secondary) calc(l - 9.73) c h);
    background-color: oklch(from var(--accent-alt) calc(l - 0.03) c h);
    opacity: 1;
    box-shadow:
        inset 0px  2px  1px  0px rgba(0,0,0,0.1),
        inset 0px  -1px  2px -1px rgba(0,0,0,0.6);
}

button[data-primary],
input[type='submit'] {
    color: var(--base);
    background-color: var(--accent-ui);
    border-color: var(--accent-ui);
    /* outline: 1px solid var(--accent); */
    /* outline-offset: -0.15em; */
    padding: 0.4em 0.8em;
    border-radius: 0.3em;
    cursor: pointer;
    font-weight: bold;
}

button:disabled,
input[type='submit']:disabled {
    cursor: not-allowed;
    background-color: var(--tertiary);
    color: var(--secondary);
    border-color: var(--secondary);
    opacity: 0.5;
    box-shadow:none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
details:has(summary:focus-visible) {
    outline: none;
    z-index: 2;
    animation: 1s infinite pulseBorder linear alternate-reverse;

    border: 1px solid oklch(from var(--tertiary) calc(l - 0.06) c h);

    box-shadow:
        inset 0pt  0pt  2pt -0pt   rgba(0,0,0,0.4),
        inset 0pt  2pt  5pt -0.5pt rgba(0,0,0,0.4),
              0pt -1pt  0pt -0.5pt rgba(255,255,255,0.05),
              0pt  1pt  1pt -0.5pt rgba(255,255,255,0.3)
              ;
}

details:has(summary:focus-visible) summary {
    outline: none;
}

@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 0 0.2em var(--base), 0 0 0 0.4em var(--accent-ui);
    }

    100% {
        box-shadow: 0 0 0 0.2em var(--base), 0 0 0 0.4em var(--accent);
    }
}

code {
    background-color: var(--tertiary);
    border: 1px solid oklch(from var(--secondary) l c h / 60%);
    border-radius: 0.3em;
    font-family: monospace;
    padding: 0.2em 0.3em;
    /* border-radius: var(--radius-s); */
    /* padding: 0 var(--space-s); */
    /* background-color: var(--gray-200); */
    /* border: 1px solid var(--gray-300); */

}

details {    
    background-color: var(--tertiary);
    border: 1px solid oklch(from var(--tertiary) calc(l - 0.10) calc(c - 0.05) h);
    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 4pt -1pt  rgba(0,0,0,0.1),
              0pt  0pt  4pt -1pt rgba(0,0,0,0.1),
              0pt  2pt 8pt -3pt  rgba(0,0,0,0.1);
    
    border-radius: 0.3em;
    padding: 0.5em;
    margin: 1em 0;
}

summary {
    font-weight: bold;
}

details[open] {
    background-color: var(--accent-alt);
}

details[open] summary {
    border-bottom: 0.01em solid oklch(from var(--secondary) l calc(c - 0.05) h / 50%);
    padding-bottom: 0.3em;
    margin-bottom: 0.7em;
}

dialog {
    border-radius: 0.6em;
    max-width: min(100% - 3rem, 65ch);
    background-color: var(--base);
    border: 1px solid var(--accent-ui);
    box-shadow: 0 0 0.3em 0.1em var(--accent-alt);
    color: inherit;
}

::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

form:not([data-modal]) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1em 0;
}

form > div {
    display: flex;
    flex-direction: column;
}

form > div:has(input[type='checkbox']) {
    flex-direction: row;
    align-items: center;
    gap: 0.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    font-family: var(--font-serif);
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
    opacity: 0;
    transition: opacity 0.2s;
}

h1:hover::before,
h2:hover::before,
h3:hover::before,
h4:hover::before,
h5:hover::before,
h6:hover::before {
    opacity: 1;
}

h1::before {
    content: '#';
    position: absolute;
    left: -2ch;
    color: var(--accent-ui);
}

h1:dir(rtl)::before {
    right: -2ch;
}

h2::before {
    content: '##';
    position: absolute;
    left: -3ch;
    color: var(--accent-ui);
}

h2:dir(rtl)::before {
    right: -3ch;
}

h3::before {
    content: '###';
    position: absolute;
    left: -4ch;
    color: var(--accent-ui);
}

h3:dir(rtl)::before {
    right: -4ch;
}

h4::before {
    content: '####';
    position: absolute;
    left: -5ch;
    color: var(--accent-ui);
}

h4:dir(rtl)::before {
    right: -5ch;
}

h5::before {
    content: '#####';
    position: absolute;
    left: -6ch;
    color: var(--accent-ui);
}

h5:dir(rtl)::before {
    right: -6ch;
}

h6::before {
    content: '######';
    position: absolute;
    left: -7ch;
    color: var(--accent-ui);
}

h6:dir(rtl)::before {
    right: -7ch;
}

h1[data-no-heading-level]::before,
h2[data-no-heading-level]::before,
h3[data-no-heading-level]::before,
h4[data-no-heading-level]::before,
h5[data-no-heading-level]::before,
h6[data-no-heading-level]::before {
    content: '';
}

/* Clickable heading anchors — suppress ::before when link is present */
:is(h1,h2,h3,h4,h5,h6):has(> [data-heading-link])::before {
    content: none;
}

a[data-heading-link],
a[data-heading-link]:visited {
    position: absolute;
    color: var(--accent-ui);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s;
}

:is(h1,h2,h3,h4,h5,h6):hover > a[data-heading-link] {
    opacity: 1;
}

h1 > a[data-heading-link] { left: -2ch; }
h2 > a[data-heading-link] { left: -3ch; }
h3 > a[data-heading-link] { left: -4ch; }
h4 > a[data-heading-link] { left: -5ch; }
h5 > a[data-heading-link] { left: -6ch; }
h6 > a[data-heading-link] { left: -7ch; }

:dir(rtl) h1 > a[data-heading-link] { left: auto; right: -2ch; }
:dir(rtl) h2 > a[data-heading-link] { left: auto; right: -3ch; }
:dir(rtl) h3 > a[data-heading-link] { left: auto; right: -4ch; }
:dir(rtl) h4 > a[data-heading-link] { left: auto; right: -5ch; }
:dir(rtl) h5 > a[data-heading-link] { left: auto; right: -6ch; }
:dir(rtl) h6 > a[data-heading-link] { left: auto; right: -7ch; }

hr {
    
    border: 0;
    
    border-top: 1px dashed oklch(from var(--secondary) l c h / 50%);

    color: var(--primary);
    overflow: visible;
    text-align: center;
    height: 1pt;
    margin: 1em 0;
}

img {
    border-radius: 0.3em;
    width: 100%;
    height: auto;

}

article header {
    padding: 2em 0 0;
    margin-bottom: 6em;
    /* margin-bottom: 2em; */
}

article header h1 {
    font-size: clamp(42px, 10vw, 72px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.06;
    color: var(--text);
    letter-spacing: -2px;
    margin-bottom: 0.2em;
}

article header h1::before {
    content: none;
}

article > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-serif);
    font-size: 5.1em;
    line-height: 0.75;
    font-weight: 400;
    color: var(--primary);
    margin: 0.06em 0.12em 0 -0.04em;
    padding: 0;
}

article {

}

input,
textarea {
    color: var(--primary);
    background-color: var(--tertiary);
    padding: 0.4em 1em;
    border-radius: 0.3em;
    font-size: inherit;
    font-family: inherit;
    position: relative;

    border: 1px solid oklch(from var(--tertiary) calc(l - 0.06) c h);

    box-shadow:
        inset 0pt  0pt  2pt -0pt   rgba(0,0,0,0.4),
        inset 0pt  2pt  5pt -0.5pt rgba(0,0,0,0.4),
              0pt -1pt  0pt -0.5pt rgba(255,255,255,0.05),
              0pt  1pt  1pt -0.5pt rgba(255,255,255,0.3)
              ;

}

input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    background-color: var(--tertiary);
    color: var(--secondary);
    border-color: var(--quaternary);
    opacity: 0.5;
}

select {    
    background-color: var(--accent-alt);
    border: 1px solid oklch(from var(--accent-alt) calc(l - 0.20) c h);
    box-shadow:
              0pt  0pt  2pt -1pt rgba(0,0,0,0.4),
              0pt  2pt  8pt -3pt  rgba(0,0,0,0.2),
        inset 0pt  0pt  4pt -3pt rgba(0,0,0,0.2),
        inset 0pt -8pt 12pt -3pt rgba(0,0,0,0.1),
        inset 0pt  1pt  2pt -1pt rgba(255,255,255,0.6);

    color: var(--primary);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;

    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6em center;

    padding: 0.4em 1em;
    border-radius: 0.3em;
    padding-right: 2em;
}
select:hover {
    opacity: 0.8;
}

input[type="range"] {
    background-color: oklch(from var(--base) calc(l - 0.02) c h);
    border:        1px solid oklch(from var(--accent-alt) calc(l + 0.02) calc(c - 0.02) h / 60%);
    border-bottom: 1px solid oklch(from var(--accent-alt) calc(l + 0.06) calc(c - 0.04) h / 80%);
    box-shadow:
        inset 0pt  0pt  4pt 0pt rgba(0,0,0,0.2),
        inset 0pt  0pt  1pt 0pt rgba(0,0,0,0.1)
        ;

    appearance: none;
    width: 100%;
    height: 0.4em;
    border-radius: 1em;
    outline: none;
    padding: 0;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 0.5em;
    height: 1.2em;
    border-radius: 20%;
    background-color: var(--accent-ui);
    cursor: pointer;
    border: 1px solid oklch(from var(--accent-ui) calc(l - 0.05) calc(c - 0.05) h);
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--accent-alt);
    border: 1px solid oklch(from var(--accent-alt) calc(l - 0.20) c h);
    box-shadow:
              0pt  1pt  1pt  0pt rgba(0,0,0,0.2),
              0pt  3pt  6pt  0pt rgba(0,0,0,0.2),
        inset 0pt  0pt  4pt -3pt rgba(0,0,0,0.2),
        inset 0pt -8pt 12pt -3pt rgba(0,0,0,0.1),
        inset 0pt  1pt  2pt -1pt rgba(255,255,255,0.6);

    width: 0.6em;
    height: 1.4em;
    border-radius: 2pt;
    cursor: pointer;
    
}

kbd {
    background-color: var(--tertiary);
    border-radius: 0.3em;
    border: 1px solid var(--secondary);
    box-shadow:
              0 2px 0px 0 var(--secondary),
        inset 0 2px 0 0   var(--base);
    color: var(--primary);
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.4em;
    white-space: nowrap;
}

mark {
    background-color: var(--accent);
    color: inherit;
}

p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

main p,
main ul,
main ol {
    margin-top: 0;
}

main p:last-child {
    margin-bottom: 0;
}

pre {
    background-color: var(--tertiary);
    border: 1px solid oklch(from var(--tertiary) calc(l - 0.06) c h);

    box-shadow:
        inset 0pt  0pt  2pt -0pt   rgba(0,0,0,0.4),
        inset 0pt  2pt  3pt -0.5pt rgba(0,0,0,0.2),
              0pt -1pt  0pt -0.5pt rgba(255,255,255,0.15),
              0pt  1pt  1pt -0.5pt rgba(255,255,255,0.3)
              ;


    
    font-family: monospace;
    /* background-color: var(--tertiary); */
    color: var(--primary);
    border-radius: 0.6em;
    /* border: 1px solid var(--secondary); */
    padding: 0.5em;
}

progress {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 1em;
    display: block;
    height: 0.5rem;
    padding: 0;
    margin: 1em 0;
    width: 100%;

    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 4pt -1pt  rgba(0,0,0,0.1),
              0pt  0pt  4pt -1pt rgba(0,0,0,0.1),
              0pt  2pt 8pt -3pt  rgba(0,0,0,0.1);
}

progress::-webkit-progress-bar {
    background-color: var(--accent);
    border-radius: 1em;
    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 4pt -1pt  rgba(0,0,0,0.1);
}

progress::-webkit-progress-value {
    background-color: var(--accent-ui);
}

progress::-moz-progress-bar {
    background-color: var(--accent-ui);
}

progress::-ms-fill {
    background-color: var(--accent-ui);
    border: none;
}

progress:indeterminate {
    animation: 3s infinite progressShine linear;
    background-color: var(--accent-ui);
    background-image: linear-gradient(to right,
        var(--accent-ui) 0%,
        oklch(from var(--accent) calc(l + 0.08) calc(c - 0.09) calc(h + 0.7)) 10%,
        oklch(from var(--accent) calc(l + 0.08) calc(c - 0.09) calc(h + 0.7)) 30%,
        var(--accent-ui) 40%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 150% 150%;
}

progress:indeterminate:dir(rtl) {
    animation-direction: reverse;
}

progress:indeterminate::-webkit-progress-bar {
    background-color: transparent;
}

progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
}

progress:indeterminate::-ms-fill {
    animation-name: none;
}

@keyframes progressShine {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

caption {
    padding: 0.8em;
    caption-side: bottom;
}

figure {
    margin: 1.5em 0;
}

figcaption {
    text-align: center;
    font-size: 0.85em;
    color: var(--secondary);
    margin-top: 0.3em;
}

/* table */

table {
    border: 1px solid oklch(from var(--accent-alt) calc(l - 0.0) calc(c - 0.0) h);
    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 4pt -1pt  rgba(0,0,0,0.1),
              0pt  0pt 4pt -1pt rgba(0,0,0,0.2),
              0pt  6pt 8pt -3pt  rgba(0,0,0,0.2);
    border-radius: 0.0em;
    margin-inline: auto;

    border-collapse: collapse;
    width: 100%;
}

td,
th {
    padding: 0.4em 0.5em;
    border: 1px solid var(--base);
    border-spacing: 0;
}

th {
    background-color: var(--tertiary);
    border-bottom: 1pt solid var(--quaternary);
    box-shadow:
        inset 0pt  1pt  1pt -1pt rgba(255,255,255,0.5),
        inset 0pt -2pt 2pt -1pt  rgba(0,0,0,0.1);
}

tr {

}

td {
    text-align: center;
}

td:first-child,
td:last-child {
    text-align: left;
}

tr:nth-child(even) td {
    background-color: var(--quaternary);
}

tr:nth-child(odd) td {
    background-color: var(--tertiary);
}

ins {
    background-color: var(--semantic-0-green);
    text-decoration: none;
}

del {
    background-color: var(--semantic-0-red);
    text-decoration: none;
}
em-0 { background-color: var(--semantic-0-green); }
em-1 { background-color: var(--semantic-0-blue); }
em-2 { background-color: var(--semantic-0-red); }
em-3 { background-color: var(--semantic-0-magenta); }
em-4 { background-color: var(--semantic-0-pink); }
em-5 { background-color: var(--semantic-0-purple); }
em-6 { background-color: var(--semantic-0-cyan); }
em-7 { background-color: var(--semantic-0-saffron); }
em-7 { background-color: var(--semantic-0-orange); }

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
}

nav ul {
    list-style: none;
    display: flex;uU
    gap: 1.5em;
    margin: 0;
    padding: 0;
    align-items: center;
}

nav a, nav a:visited {
    color: var(--primary);
    text-decoration-color: var(--accent-ui);
}

nav a[aria-current="page"] {
    text-decoration-thickness: 0.2em;
    text-decoration-style: double;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        gap: 0.5em;
    }

    nav ul {
        justify-content: center;
    }
}


/* Custom tags */

lead {
    display: block;
    font-size: 1.2em;
    color: var(--secondary);
    font-family: var(--font-serif);

    font-size: clamp(18px, 3.5vw, 22px);
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 560px;
}

footnotes {
    display: block;
}

fn-item {
    display: block;
    margin-block: 0.5em;
}

fn-index {
    margin-inline-end: 0.75em;
}

table-wrap {
    display: block;
    overflow: auto;
    padding: 1.5em;
    margin: -1.5em;
}