@charset "UTF-8";

/* CSS design (i.e. the way the CSS code is organised) inspired
by Roman <https://mmapped.blog> */

:root {
    /* Fonts */
    --font-sans:  "Libertinus Sans", -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-display: var(--font-sans);

    /* Font sizes */
    --fs-footnotesize: 0.78rem;
    --fs-small: 1.05rem;
    --fs-normal: 1.3rem;
    --fs-large: 1.8rem;
    --fs-xlarge: 2.5rem;

    --fs-code-footnotesize: calc(0.78 * var(--fs-footnotesize));
    --fs-code-small: calc(0.78 * var(--fs-small));
    --fs-code-normal: calc(0.78 * var(--fs-normal));

    --fs-math-small: calc(0.92 * var(--fs-small));
    --fs-math-normal: calc(0.92 * var(--fs-normal));
    
    /* Colors */
    --page: #F7F5F3;
    --page-sunk: #E7E0DA;

    --ink: #35003D;
    --ink-subtle: #95579F;
    --ink-faint: #95579F;

    --rule: #3E3228; /* borders */
    --rule-soft: #645040;

    --accent: #E5B340;
    --selection: #E5B340;

    /* Syntax highlighting */
    --hl-kw: var(--ink);
    --hl-defun: var(--accent);
    --hl-str: var(--ink-subtle);
    --hl-comment: var(--accent);
    --hl-var: var(--ink);
    --hl-typedef: var(--accent-1);
    --hl-id: var(--ink);

    /* Spacing */
    --sp-tight: 0.25rem;
    --sp-inline: 0.5rem;
    --sp-default: 1rem;
    --sp-para-gap: 1rem;
    --sp-line: 2rem;
    --sp-large: 2.8rem;

    /* Line heights */
    --lh-compact: 1.12rem;
    --lh-code: 1.3rem;
    --lh-medium: 1.5rem;
    --lh-body: var(--sp-line);

    --left-gutter-width: var(--sp-default);
    --left-gutter-gap: var(--sp-default);
}

/* Font faces */

@font-face {
    font-family: "Libertinus Sans";
    font-style: normal;
    font-weight: normal;
    src:
        local("Libertinus Sans"),
        local("Linux Biolinum O"),
        url("fonts/LibertinusSans-Regular.otf") format("opentype"),
        url("fonts/LibertinusSans-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    font-style: italic;
    font-weight: normal;
    src:
        local("Libertinus Sans Italic"),
        local("Linux Biolinum O"),
        url("fonts/LibertinusSans-Italic.otf") format("opentype"),
        url("fonts/LibertinusSans-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    font-weight: bold;
    src:
        local("Libertinus Sans Bold"),
        local("Linux Biolinum O"),
        url("fonts/LibertinusSans-Bold.otf") format("opentype"),
        url("fonts/LibertinusSans-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: normal;
    src:
        local(JetBrains Mono),
        url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: bold;
    src:
        local(JetBrains Mono),
        url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: normal;
    src:
        local(JetBrains Mono),
        url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: bold;
    src:
        local(JetBrains Mono),
        url("fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
    font-display: swap;
}

::selection {
    background-color: var(--selection);
}

a:link, a:visited {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: var(--accent-2-ink);
}

body {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12.5%;
    font-family: var(--font-serif);
    background-color: var(--page);
    color: var(--ink);
    max-width: 1400px;
    counter-reset: sidenote-counter;
}

nav {
    height: 30vh;
    display: flex;
    align-items: flex-end;
    font-weight: bold;
    font-size: var(--fs-large);
    font-family: var(--font-sans);}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-weight: bold;
    margin-top: var(--sp-large);
    margin-bottom: var(--sp-inline);
    font-size: var(--fs-xlarge);
    line-height: 1;
    font-family: var(--font-display);
    hyphens: none;
}

h2 {
    font-weight: bold;
    margin-top: var(--sp-line);
    margin-bottom: var(--sp-inline);
    font-size: var(--fs-large);
    line-height: 1;
    font-family: var(--font-sans);
    hyphens: none;
}

h1 a:link, h1 a:visited,
h2 a:link, h2 a:visited,
h3 a:link, h3 a:visited {
    background: none;
    text-decoration: none;
    font-feature-settings: normal;
    text-transform: initial;
    color: var(--ink);
}

h3 {
    font-weight: bold;
    font-size: var(--fs-normal);
    margin-top: var(--sp-large);
    margin-bottom: var(--sp-inline);
    line-height: 1;
    font-family: var(--font-sans);
}

hr {
    display: block;
    height: 1px;
    width: 55%;
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--sp-default) 0;
    padding: 0;
}

section {
    padding-top: var(--sp-line);
    width: 55%;
}

footer {
    width: 55%;
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-default);
}

p {
    font-size: var(--fs-normal);
    margin-block-start: var(--sp-para-gap);
    margin-block-end: var(--sp-para-gap);
    padding-right: 0;
    vertical-align: baseline;
    hyphens: auto;
    text-wrap: pretty;
}

@media (max-width: 760px) {
    body {
        width: 84%;
        padding-left: 8%;
        padding-right: 8%;
    }

    hr {
        width: 84%;
    }
    
    nav {
        height: 15vh;
    }
    
    nav ul {
        font-size: 14px;
    }

    section {
        width: 84%;
    }

    footer {
        width: 84%;
    }
}