@layer reset, variables, base, utilities, components;

/* Fonts */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/nunito-sans-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/nunito-sans-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/fira-code-normal.woff2") format("woff2");
}

:root {
    --font-inter: "Inter";
    --font-nunito-sans: "Nunito Sans";
    --font-fira-code: "Fira Code";
}

/* ---- reset ---- */
@layer reset {
    /* Use a more-intuitive box-sizing model */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Remove default margin */
    *:not(dialog) {
        margin: 0;
    }

    /* Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    body {
        /* Looks better with Nunito Sans */
        -webkit-font-smoothing: auto;
    }

    /* Improve media defaults */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
        vertical-align: middle;
    }

    /* Inherit fonts for form controls */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* Avoid text overflows */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    /* Improve line wrapping */
    p {
        text-wrap: pretty;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    /* Remove native button user agent */
    button {
        appearance: none; /* Removes platform-specific styling */
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit; /* Forces button to use the parent's font settings */
        color: inherit;
        cursor: pointer; /* Adds the hand icon back */
        outline: none; /* Be careful with this (see accessibility note) */
    }

    /* Create a root stacking context */
    #root {
        isolation: isolate;
    }
}

/* ---- variables (was styles/variables.css) ---- */
@layer variables {
    /* Base colors variables */

    :root.dark {
        color-scheme: dark;
    }

    :root {
        --color-off-white: oklch(99% 0.002 247.839deg);
        --color-slight-gray: rgb(250 250 250);
        --color-base-50: oklch(98.5% 0.002 247.839deg);
        --color-base-100: oklch(96.7% 0.003 264.542deg);
        --color-base-150: oklch(95.5% 0.004 261.325deg);
        --color-base-200: oklch(92.8% 0.006 264.531deg);
        --color-base-300: oklch(87.2% 0.01 258.338deg);
        --color-base-400: oklch(70.7% 0.022 261.325deg);
        --color-base-500: oklch(55.1% 0.027 264.364deg);
        --color-base-600: oklch(44.6% 0.03 256.802deg);
        --color-base-700: oklch(37.3% 0.034 259.733deg);
        --color-base-750: oklch(32.5% 0.033 261.692deg);
        --color-base-800: oklch(27.8% 0.033 256.848deg);
        --color-base-900: oklch(21% 0.034 264.665deg);
        --color-base-950: oklch(13% 0.028 261.692deg);

        color-scheme: light;

        /* Base colors */
        --background: light-dark(var(--color-off-white), var(--color-base-800));
        --foreground: light-dark(var(--color-base-950), var(--color-base-200));
        --primary: light-dark(var(--color-base-800), var(--color-base-200));
        --primary-foreground: light-dark(
            var(--color-base-100),
            var(--color-base-800)
        );
        --border: light-dark(var(--color-base-200), var(--color-base-600));
        --list-disc: light-dark(var(--color-base-400), var(--color-base-600));
        --secondary: light-dark(
            var(--color-slight-gray),
            var(--color-base-750)
        );
        --button: light-dark(var(--color-base-150), var(--color-base-700));
        --foreground-secondary: light-dark(
            var(--color-base-700),
            var(--color-base-300)
        );
        --space-quarter: 0.0625rem;
        --space-half: 0.125rem;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;
        --space-18: 4.5rem;
        --space-char: 65ch;
        --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
        --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
        --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
        --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
        --text-5: 1.125rem;
        --text-6: 1rem;
        --text-7: 0.875rem;
        --text-8: 0.75rem;
        --text-9: 0.625rem;
        --text-10: 0.5rem;
        --text-11: 0.375rem;
        --text-12: 0.25rem;
        --radius-small: 0.125rem;
        --radius-medium: 0.375rem;
        --radius-large: 0.75rem;
        --radius-full: 9999px;

        /* Max widths */
        --width-sm: 640px;
        --width-md: 768px;
        --width-lg: 1120px;
        --width-sidebar: 25ch;
        --width-avatar: 200px;
        --sz: var(--width-avatar);

        /* Fonts */
        --font-text: var(--font-nunito-sans), system-ui, sans-serif;
        --font-heading: var(--font-inter), system-ui, sans-serif;
        --font-mono: var(--font-fira-code), ui-monospace, consolas, monospace;
        --leading-small: 1.25;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.75;
        --font-normal: 450;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --text-regular: var(--text-5);
        --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
        --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
        --color-info: oklch(70.7% 0.165 254.624deg);
        --color-important: oklch(71.4% 0.203 305.504deg);
        --color-warning: oklch(75% 0.183 55.934deg);
        --color-caution: oklch(63.7% 0.237 25.331deg);
        --color-tip: oklch(0.6456 0.2245 148.76);
    }
}

/* ---- defaults ---- */
@layer base {
    * {
        border-color: var(--border);
    }

    body {
        color: var(--foreground);
        background-color: var(--background);
        font-family: var(--font-text);
        font-weight: var(--font-normal);
        font-size: var(--text-regular);
        line-height: var(--leading-normal);
    }

    /* Main layout placement */
    main {
        max-width: var(--width-lg);
        margin-inline: auto;
        padding-block-start: var(--space-8);
        padding-inline: var(--space-6);
        display: flex;
        flex-direction: column;
    }

    .sr-only {
        display: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-heading);
        font-weight: var(--font-semibold);
        line-height: 1.25;

        &:first-child {
            margin-block-start: 0;
        }
    }

    h1 {
        font-size: var(--text-1);
        margin: var(--space-10) 0 var(--space-6);
    }

    h2 {
        font-size: var(--text-2);
        margin: var(--space-8) 0 var(--space-5);
    }

    h3 {
        font-size: var(--text-3);
        margin: var(--space-6) 0 var(--space-4);
    }

    h4 {
        font-size: var(--text-4);
        margin: var(--space-5) 0 var(--space-3);
    }

    h5 {
        font-size: var(--text-5);
        margin: var(--space-4) 0 var(--space-2);
    }

    h6 {
        font-size: var(--text-regular);
        margin: var(--space-4) 0 var(--space-2);
    }

    p {
        margin-block-end: var(--space-4);

        &:last-child {
            margin-block-end: 0;
        }
    }

    a {
        color: var(--foreground);
        font-weight: var(--font-semibold);
        text-decoration: underline;
        text-underline-offset: var(--space-1);
        transition: color var(--transition-fast);

        &:hover {
            color: var(--foreground-secondary);
        }
    }

    strong,
    b {
        font-weight: var(--font-semibold);
    }

    em,
    i {
        font-style: italic;
    }

    ul,
    ol {
        padding-inline-start: var(--space-6);
        margin-block-end: var(--space-4);
    }

    ul {
        list-style-type: disc;
    }

    li {
        margin-block-end: var(--space-1);
    }

    ul li:not(:last-child) {
        margin-bottom: var(--space-2);
    }

    ol {
        list-style-type: decimal;
    }

    ul > li::marker {
        color: var(--list-disc);
    }

    svg,
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    figure > img,
    figure > svg {
        margin-inline: auto;
    }

    .katex-display {
        overflow: auto hidden;
        height: auto;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .katex * {
        display: inherit;
        width: initial;
        height: initial;
    }

    .katex svg {
        display: inline;
    }

    .katex .sr-only,
    .katex .katex-mathml {
        display: none;
    }

    kbd {
        box-shadow:
            0 0 0 1px var(--border),
            0 3px 0 var(--border);
        border-radius: var(--radius-medium);
        padding: var(--space-1);
        font-family: var(--font-mono);
        font-size: var(--text-6);
    }
}

/* ---- prose ---- */
@layer components {
    .prose {
        max-width: var(--space-char);

        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        figure,
        blockquote,
        pre,
        ul,
        table,
        aside {
            margin-bottom: var(--space-4);
        }

        /*p {*/
        /*line-height: var(--leading-relaxed);*/
        /*}*/

        h2 {
            line-height: var(--leading-snug);
            /*font-size: var(--text-3);*/
            font-weight: var(--font-bold);
        }

        h2:not(:first-child) {
            margin-top: var(--space-10);
        }

        h3:not(:first-child) {
            margin-top: var(--space-8);
        }

        h4:not(:first-child) {
            margin-top: var(--space-6);
        }

        h5:not(:first-child) {
            margin-top: var(--space-4);
        }

        blockquote {
            padding-inline-start: var(--space-4);
            margin-top: var(--space-6);
            margin-bottom: var(--space-6);
            border-left: 4px solid var(--border);

            p {
                font-style: italic;
                color: var(--foreground-secondary);
            }
        }

        blockquote > ::before {
            content: open-quote;
        }
        blockquote > ::after {
            content: close-quote;
        }

        li {
            padding-inline-start: var(--space-2);
        }

        strong,
        b {
            font-weight: var(--font-bold);
        }

        em,
        i {
            font-style: italic;
        }

        code {
            font-family: var(--font-mono);
            font-weight: var(--font-semibold);
            font-size: var(--text-6);
        }

        :not(pre) > code {
            font-weight: var(--font-medium);
            background: color-mix(in srgb, currentColor 6%, transparent);
            padding: var(--space-half) var(--space-1);
            border-radius: var(--radius-medium);
            overflow-wrap: break-word;
        }

        pre > code .ec-line {
            max-height: var(--space-5) !important;
        }

        svg,
        img,
        video {
            border-radius: var(--radius-medium);
        }

        figure:not(.lumis-figure) {
            @media (width >= 110ch) {
                margin-inline: auto;
                max-width: 75%;
            }
        }

        figure > img,
        figure > svg {
            margin-bottom: var(--space-4);
        }

        figure > figcaption {
            font-size: var(--text-6);
            color: var(--foreground-secondary);
            text-align: center;
        }

        sup {
            white-space: nowrap;
            unicode-bidi: isolate;
            font-size: var(--text-7);
            /*margin-left: 0.2rem;*/

            a.footnote-ref {
                display: inline-block;
                text-decoration: none;
            }

            a.footnote-ref::before {
                content: "[";
            }

            a.footnote-ref::after {
                content: "]";
            }
        }

        table {
            width: 100%;
            border-collapse: collapse;
            /* A collapsed border never takes the radius, and the header bar and
               the cell borders would paint over the corners of the table, so
               the radius only shows once the content of the table is clipped.
               The frame of the table is the ring below, at the weight of the
               row separators: a border on the table or on a cell is drawn as a
               straight line and would be clipped mid-corner, leaving the arc
               of the corner unjoined. */
            border-radius: var(--radius-medium);
            overflow: hidden;
            box-shadow: 0 0 0 1px var(--border);
            font-size: var(--text-7);
            font-weight: var(--font-medium);
            background-color: var(--secondary);

            code,
            p {
                font-size: inherit;
            }

            thead {
                background-color: var(--button);
                border-bottom: 1px solid var(--border);
            }

            th {
                padding-inline: var(--space-2);
                padding-block: var(--space-2);
                text-align: center;
                vertical-align: middle;

                img {
                    margin-block: 0;
                }
            }

            td {
                padding-inline: var(--space-2);
                padding-block: var(--space-2);
                border-bottom: 1px solid var(--border);
            }

            /* The ring closes the table: the separator of the last row would
               sit one pixel inside it and read as a double line. */
            tbody tr:last-child td {
                border-bottom: 0;
            }
        }
    }
}

/* ---- utilities ---- */
@layer utilities {
    .align-left {
        text-align: start;
    }
    .align-center {
        text-align: center;
    }
    .align-right {
        text-align: end;
    }

    .inline {
        display: inline;
    }
    .flex {
        display: flex;
    }
    .inline-flex {
        display: inline-flex;
    }
    .wrap {
        flex-wrap: wrap;
    }
    .flex-col {
        flex-direction: column;
    }
    .items-center {
        align-items: center;
    }
    .items-start {
        align-items: flex-start;
    }
    .items-end {
        align-items: flex-end;
    }
    .items-baseline {
        align-items: baseline;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-between {
        justify-content: space-between;
    }
    .justify-end {
        justify-content: flex-end;
    }

    /* Bootstrap inspired. */
    .hstack {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
        align-content: flex-start;
        height: auto;

        > * {
            margin: 0;
        }
    }

    .vstack {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .gap-1 {
        gap: var(--space-1);
    }
    .gap-2 {
        gap: var(--space-2);
    }
    .gap-4 {
        gap: var(--space-4);
    }
    .gap-6 {
        gap: var(--space-6);
    }
    .gap-8 {
        gap: var(--space-8);
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .mt-2 {
        margin-block-start: var(--space-2);
    }
    .mt-4 {
        margin-block-start: var(--space-4);
    }
    .mt-6 {
        margin-block-start: var(--space-6);
    }

    .mb-2 {
        margin-block-end: var(--space-2);
    }
    .mb-4 {
        margin-block-end: var(--space-4);
    }
    .mb-6 {
        margin-block-end: var(--space-6);
    }
    .p-4 {
        padding: var(--space-4);
    }

    :is(ul, ol, a).unstyled {
        list-style: none;
        text-decoration: none;
        padding: 0;
    }

    .hide-md {
        @media (width <= 110ch) {
            display: none !important;
        }
    }

    .sidebar {
        position: sticky;
        top: var(--space-8);
        align-self: flex-start;
        padding-bottom: var(--space-4);
    }

    ul.list-no-decoration,
    .list-no-decoration ul {
        list-style: none;
        padding: 0;
    }

    a.link-no-decoration,
    .link-no-decoration a {
        text-decoration: none;
    }

    .hide-dark {
        display: block;
    }

    .hide-light {
        display: none;
    }

    .dark {
        .hide-dark {
            display: none;
        }

        .hide-light {
            display: block;
        }
    }

    .w-100 {
        width: 100%;
    }
    .w-23 {
        width: 25%;
    }
    .w-50 {
        width: 50%;
    }
    .w-33 {
        width: 33%;
    }

    .image-row p {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-4);

        @media (width <= 110ch) {
            grid-template-columns: 100%;
        }
    }
}

/* ---- components: blog ---- */
@layer components {
    .blog-post-hero {
        h1 {
            margin-bottom: var(--space-2);
            text-wrap: auto;
        }
        h1 code {
            display: inline;
        }

        p {
            margin-bottom: 0;
        }

        .blog-post-metadata {
            color: var(--foreground-secondary);
            font-size: var(--text-6);
        }

        .hero-tag {
            display: inline-block;

            .tag-label {
                font-size: var(--text-6);
            }

            .tag-label::before {
                content: "#";
                margin-right: 0;
            }
        }
    }

    .blog-content {
        width: 100%;
    }

    figure.d2 {
        margin-inline: auto;
        max-width: 100% !important;

        svg.d2-svg > rect {
            fill: var(--background) !important;
        }
    }

    .footnotes {
        margin-top: var(--space-10);
    }
}

/* ---- components: card ---- */
@layer components {
    .card {
        border: 1px solid var(--border);
        border-radius: var(--radius-large);
        background-color: var(--secondary);
    }
}

/* ---- components: blog list ---- */
@layer components {
    .section-posts ul li:not(:last-child) {
        margin-bottom: var(--space-4);
    }

    .section-posts h2 {
        margin-bottom: var(--space-4);
    }

    .section-posts .post-preview .post-date {
        color: var(--foreground-secondary);
        min-width: 18%;
    }

    @media (min-width: 768px) {
        .section-posts .post-preview .post-date {
            padding-right: var(--space-4);
        }
    }

    /* Custom styling of link titles even though they are h3 */
    .section-posts h3 {
        font-family: var(--font-normal);
        font-weight: var(--font-semibold);
        font-size: var(--text-4);
        margin-bottom: var(--space-1);
    }

    .section-posts h3 a {
        font-weight: inherit;
        text-decoration: none;
        text-decoration-line: none;
    }

    .section-posts p {
        color: var(--foreground-secondary);
        font-size: var(--text-6);
    }

    .more-posts {
        display: flex;
        justify-content: flex-end;
    }

    .more-posts button {
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-medium);
        border-color: var(--border);
        background-color: var(--button);
        font-size: var(--text-7);
        font-family: var(--font-text);
        font-weight: var(--font-semibold);
    }

    .more-posts button a {
        color: inherit;
        text-decoration: none;
        text-decoration-line: none;
        transition: inherit;
    }

    .more-posts button:hover {
        background-color: var(--primary);
        color: var(--primary-foreground);
        border: none;
    }

    .more-posts button:hover a {
        color: inherit;
    }

    .post-preview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
        gap: var(--space-6);
    }

    @media (max-width: 480px) {
        .post-preview {
            grid-template-columns: minmax(0, 1fr);
        }

        .post-date {
            display: none;
        }
    }

    .post-date-mobile {
        display: none;
        font-size: var(--text-6);
    }

    @media (max-width: 480px) {
        .post-date-mobile {
            display: block;
            color: var(--foreground-secondary);
            margin-top: var(--space-1);
        }
    }
}

@layer components {
    .navbar {
        margin-bottom: var(--space-6);
        font-family: var(--font-heading);
        flex-wrap: wrap;
        row-gap: var(--space-2);

        .navbar-home-link span {
            font-size: var(--text-3);
            font-weight: var(--font-bold);
            line-height: var(--leading-small);
        }

        #toggleDarkMode {
            padding: 0;
            border: none;
        }

        .dark #toggleDarkMode svg {
            filter: invert(1);
        }

        .navbar-secondary-links {
            margin-left: auto;
            a {
                font-size: var(--text-5);
                font-weight: var(--font-semibold);
                line-height: calc(var(--leading-small) * var(--text-3));
            }
        }
    }

    /* The bare `footer` selector is qualified with
       .site-footer so it cannot leak into page content. */
    .site-footer {
        font-size: var(--text-7);
        color: var(--foreground-secondary);
        margin-top: var(--space-8);
        border-top: 1px solid var(--border);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        row-gap: var(--space-3);
    }

    .footer-attributions {
        @media (max-width: 768px) {
            text-align: center;
            width: 100%;
        }
    }

    .footer-socials {
        margin-left: auto;

        @media (max-width: 768px) {
            margin-inline: auto;
        }

        /* The icons of this row are sized here, not in their file: the header
           shows the same ones at another size */
        svg {
            width: 24px;
        }
    }

    .social-connection {
        line-height: var(--leading-snug);
    }

    .social-connection a {
        font-weight: var(--font-normal);
    }
}