/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@layer reset {
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol,
    ul {
        list-style: none;
    }
    blockquote,
    q {
        quotes: none;
    }
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    button {
        display: block;
        border: none;

        appearance: none;
        background: none;
        padding: 0;

        text-decoration: none;

        cursor: pointer;

        &:focus {
            outline: none;
        }
    }
}

@layer base {
    pre:has(code) {
        position: relative;
        overflow: hidden;

        background-color: var(--slate-2);

        display: block;
        overflow: auto;
        padding: var(--space-2) 0;

        max-height: var(--height-code);

        code {
            span {
                &[data-highlighted-line] {
                    background: var(--slate-4);
                }
            }

            /* white-space: pre-wrap; */
        }
    }

    code:not(pre > code) {
        white-space: nowrap;
        background-color: var(--slate-2);
        padding: var(--space-0\.25) var(--space-1);
        border-radius: var(--radius-sm);
        border: 1px solid var(--slate-5);
    }

    code {
        font-family: var(--font-family-code);
        font-size: var(--font-size-body-md);
        color: var(--slate-12);

        /* For line numbers */
        counter-reset: line;
    }

    code > [data-line]::before {
        counter-increment: line;
        content: counter(line);

        /* Other styling */
        display: inline-block;
        min-width: var(--space-6);
        max-width: var(--space-8);
        margin-right: var(--space-4);
        text-align: right;
        color: gray;
    }

    code[data-line-numbers-max-digits="2"] > [data-line]::before {
        width: var(--space-2);
        margin-right: var(--space-4);
    }

    code[data-line-numbers-max-digits="3"] > [data-line]::before {
        width: calc(var(--content-overflow) - var(--space-2));
        margin-right: var(--space-2);
    }
}

@layer base {
    img {
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: var(--slate-2);
    }

    figure:has(img),
    img:not(figure > img) {
        width: 100%;
        margin-top: var(--space-4);
        margin-bottom: var(--space-8);
    }
}

@layer base {
    ul,
    ol {
        color: var(--slate-11);
        list-style: outside;
        margin-bottom: var(--space-4);

        li {
            list-style-type: disc;
            margin-bottom: var(--space-1);
            margin-left: var(--space-4);

            &::marker {
                color: var(--slate-8);
            }
        }
    }
}

@layer ui {
    .md-alert {
        --highlight-color: var(--slate-11);
        --background-color: var(--slate-2);
        --border-color: var(--slate-5);
        --text-color: var(--slate-12);

        width: 100%;
        margin-top: var(--space-8);
        margin-bottom: var(--space-8);

        padding: var(--space-2) var(--space-4);

        border-left: 4px solid var(--highlight-color);

        color: var(--text-color);
        background: var(--background-color);

        p:empty {
            display: none;
        }

        .md-alert-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-1);

            font-weight: var(--font-weight-medium);
            color: var(--highlight-color);

            .md-alert-icon {
                width: var(--font-size-body-lg);
                height: var(--font-size-body-lg);
            }
        }

        p,
        li,
        ol,
        ul {
            color: var(--text-color);

            &::marker {
                color: var(--border-color);
            }
        }

        :first-child {
            margin-top: 0;
        }

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

        &.md-alert-note {
            --highlight-color: var(--blue-11);
            --background-color: var(--blue-2);
            --border-color: var(--blue-5);
            --text-color: var(--blue-12);
        }

        &.md-alert-tip {
            --highlight-color: var(--green-11);
            --background-color: var(--green-2);
            --border-color: var(--green-5);
            --text-color: var(--green-12);
        }

        &.md-alert-important {
            --highlight-color: var(--purple-11);
            --background-color: var(--purple-2);
            --border-color: var(--purple-5);
            --text-color: var(--purple-12);
        }

        &.md-alert-warning {
            --highlight-color: var(--amber-11);
            --background-color: var(--amber-2);
            --border-color: var(--amber-5);
            --text-color: var(--amber-12);
        }

        &.md-alert-caution {
            --highlight-color: var(--red-11);
            --background-color: var(--red-3);
            --border-color: var(--red-5);
            --text-color: var(--red-12);
        }
    }
}

@layer base {
    table {
        width: 100%;
        margin: var(--space-8) auto;

        border-collapse: separate;
        border-spacing: 0;

        color: var(--slate-11);

        thead {
            background-color: var(--slate-2);

            overflow: hidden;

            font-weight: var(--font-weight-semibold);

            text-align: left;
            vertical-align: bottom;
        }

        tr:not(:last-child) td {
            border-bottom: 1px solid var(--slate-5);
            border-width: 0 0 1px 0;
        }

        td,
        th {
            margin: 0;
            overflow: visible;
            padding: var(--space-2) var(--space-4);
        }

        td {
            font-size: inherit;
        }

        th {
            text-transform: uppercase;
            font-size: var(--font-size-body-sm);
        }
    }
}

@layer base {
    video {
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: var(--slate-2);
    }

    figure:has(video),
    video:not(figure > video) {
        width: 100%;
        margin-top: var(--space-4);
        margin-bottom: var(--space-8);
    }
}


@layer reset;
@layer base;
@layer util;
@layer ui;

@layer vars {
    :root {
        --slate-1: #111113;
        --slate-2: #18191b;
        --slate-3: #212225;
        --slate-4: #272a2d;
        --slate-5: #2e3135;
        --slate-6: #363a3f;
        --slate-7: #43484e;
        --slate-8: #5a6169;
        --slate-9: #696e77;
        --slate-10: #777b84;
        --slate-11: #b0b4ba;
        --slate-12: #edeef0;

        --amber-1: #16120c;
        --amber-2: #1d180f;
        --amber-3: #302008;
        --amber-4: #3f2700;
        --amber-5: #4d3000;
        --amber-6: #5c3d05;
        --amber-7: #714f19;
        --amber-8: #8f6424;
        --amber-9: #ffc53d;
        --amber-10: #ffd60a;
        --amber-11: #ffca16;
        --amber-12: #ffe7b3;

        --red-1: #191111;
        --red-2: #201314;
        --red-3: #3b1219;
        --red-4: #500f1c;
        --red-5: #611623;
        --red-6: #72232d;
        --red-7: #8c333a;
        --red-8: #b54548;
        --red-9: #e5484d;
        --red-10: #ec5d5e;
        --red-11: #ff9592;
        --red-12: #ffd1d9;

        --green-1: #0e1512;
        --green-2: #121b17;
        --green-3: #132d21;
        --green-4: #113b29;
        --green-5: #174933;
        --green-6: #20573e;
        --green-7: #28684a;
        --green-8: #2f7c57;
        --green-9: #30a46c;
        --green-10: #33b074;
        --green-11: #3dd68c;
        --green-12: #b1f1cb;

        --blue-1: #0d1520;
        --blue-2: #111927;
        --blue-3: #0d2847;
        --blue-4: #003362;
        --blue-5: #004074;
        --blue-6: #104d87;
        --blue-7: #205d9e;
        --blue-8: #2870bd;
        --blue-9: #0090ff;
        --blue-10: #3b9eff;
        --blue-11: #70b8ff;
        --blue-12: #c2e6ff;

        --purple-1: #18111b;
        --purple-2: #1e1523;
        --purple-3: #301c3b;
        --purple-4: #3d224e;
        --purple-5: #48295c;
        --purple-6: #54346b;
        --purple-7: #664282;
        --purple-8: #8457aa;
        --purple-9: #8e4ec6;
        --purple-10: #9a5cd0;
        --purple-11: #d19dff;
        --purple-12: #ecd9fa;

        --space-0: 0;
        --space-0\.25: 0.0625rem;
        --space-0\.5: 0.125rem;
        --space-0\.75: 0.1875rem;
        --space-1: 0.25rem;
        --space-1\.5: 0.375rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-7: 1.75rem;
        --space-8: 2rem;
        --space-9: 2.25rem;
        --space-10: 2.5rem;
        --space-11: 2.75rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;

        --ui-height-sm: var(--space-7);
        --ui-height-md: var(--space-9);
        --ui-height-lg: var(--space-11);

        --icon-size-sm: var(--space-4);

        --content-overflow: var(--space-12);

        --width-main: 40rem;
        --height-code: calc(
            ((var(--width-main) + (var(--content-overflow) * 2)) / 16) *
            9
        );

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-pill: 99999px;
        --radius-round: 50%;

        --dur-short: 150ms;
        --dur-medium: 300ms;
        --dur-long: 600ms;

        --ease-quart-in-out: cubic-bezier(0.76, 0, 0.24, 1);

        --shadow-xs: rgba(0, 0, 0, 0.05) 0px 2px 1px;
        --shadow-sm: rgba(0, 0, 0, 0.05) 0px 5px 10px;
        --shadow-md: rgba(0, 0, 0, 0.1) 0px 5px 20px;
        --shadow-lg: rgba(0, 0, 0, 0.15) 0px 5px 40px;

        --font-family-body: Inter, system-ui, Avenir, Helvetica, Arial,
            sans-serif;
        --font-family-code: Menlo, Monaco, Consolas, "Liberation Mono";

        --font-size-root: 16px;
        --line-height-root: 1.5rem;

        --font-size-body-lg: 1rem;
        --line-height-body-lg: 1.5rem;

        --font-size-body-md: 0.875rem;
        --line-height-body-md: 1.5rem;

        --font-size-body-sm: 0.8125rem;
        --line-height-body-sm: 1rem;

        --font-size-h1: 2.5rem;
        --line-height-h1: 3rem;

        --font-size-h2: 2rem;
        --line-height-h2: 2.5rem;

        --font-size-h3: 1.75rem;
        --line-height-h3: 2rem;

        --font-size-h4: 1.5rem;
        --line-height-h4: 1.75rem;

        --font-size-h5: 1.25rem;
        --line-height-h5: 1.5rem;

        --font-size-h6: 1.125rem;
        --line-height-h6: 1.5rem;

        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
    }
}

@layer base {
    :root {
        font-family: var(--font-family-body);
        font-size: var(--font-size-root);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-normal);

        scrollbar-gutter: stable;

        color-scheme: light dark;
        color: var(--slate-12);
        background: var(--slate-1);
        accent-color: var(--blue-9);

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        scrollbar-color: var(--slate-5) transparent;
    }

    a,
    button {
        cursor: pointer;

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--slate-6);
        }
    }

    body {
        height: 100%;
        overscroll-behavior: none;

        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);

        @media (max-width: 767px) {
            --content-overflow: var(--space-2);
        }
    }

    em {
        font-style: italic;
    }

    strong {
        font-weight: var(--font-weight-bold);
        color: var(--slate-12);
    }

    * {
        box-sizing: border-box;
        margin: 0;
    }

    main,
    nav,
    footer {
        max-width: var(--width-main);
        margin: 0 auto;
    }

    main {
        @media (max-width: 767px) {
            padding: var(--space-4) calc(var(--content-overflow) * 2);
        }
    }

    a {
        color: var(--slate-12);
    }

    nav {
        display: flex;
        align-items: center;
        gap: var(--space-4);

        margin-bottom: var(--space-4);

        padding: var(--space-4) 0;

        @media (max-width: 767px) {
            padding: var(--space-4) calc(var(--content-overflow) * 2);
        }

        border-bottom: 1px solid var(--slate-5);

        a {
            text-decoration: none;
            color: var(--slate-11);

            &:hover {
                color: var(--slate-12);
            }

            @media (prefers-reduced-motion: no-preference) {
                transition-duration: var(--dur-short);
                transition-property: color;
                transition-timing-function: var(--ease-quart-in-out);
            }
        }

        a.icon-link {
            display: flex;
            align-items: center;
            gap: var(--space-1);

            width: var(--space-6);
            height: var(--space-6);
        }
    }

    footer {
        display: flex;
        align-items: center;
        gap: var(--space-4);

        margin-top: var(--space-4);
        border-top: 1px solid var(--slate-5);

        color: var(--slate-11);

        position: sticky;
        top: 100%;

        padding: var(--space-4) 0;

        @media (max-width: 767px) {
            padding: var(--space-4) calc(var(--content-overflow) * 2);
        }
    }

    blockquote {
        padding: var(--space-2) var(--space-4);
        margin-bottom: var(--space-4);

        border-left: 4px solid var(--slate-5);
        background-color: var(--slate-2);
        color: var(--slate-11);

        p {
            margin: 0;
        }
    }

    mark {
        background: var(--blue-5);
        padding: var(--space-0\.25) var(--space-0\.5);
        margin: calc(var(--space-0\.25) * -1) calc(var(--space-0\.5) * -1);
        border-radius: var(--radius-sm);
        color: var(--blue-12);

        * {
            color: var(--blue-12) !important;
        }
    }

    figure {
        width: 100%;
        margin-top: var(--space-8);
        margin-bottom: var(--space-8);
    }

    figure {
        margin: var(--space-4) 0;

        figcaption {
            margin-top: var(--space-2);
            text-align: center;
            color: var(--slate-11);

            font-size: var(--font-size-body-md);
            line-height: var(--line-height-body-md);
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        display: block;

        font-weight: var(--font-weight-medium);
        overflow-wrap: break-word;

        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
    }

    h1 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    h2 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    h3 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    h4 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    h5 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    h6 {
        font-size: var(--font-size-body-lg);
        line-height: var(--line-height-body-lg);
        font-weight: var(--font-weight-semibold);
    }

    hr {
        border: 1px solid var(--slate-5);
        border-width: 1px 0 0 0;

        margin: var(--space-6) 0;
    }

    p {
        color: var(--slate-11);
        margin-bottom: var(--space-4);
    }
}

@layer ui {
    .blog-index-link {
        display: flex;
        gap: var(--space-2);

        text-decoration: none;

        @media (max-width: 767px) {
            flex-direction: column;
        }

        margin-bottom: var(--space-2);

        .blog-index-link-date {
            color: var(--slate-11);
            white-space: nowrap;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;

            width: 100px;
        }

        .blog-index-link-title {
            color: var(--slate-12);
        }

        &:hover {
            .blog-index-link-title {
                text-decoration: underline;
            }
        }
    }

    .cv-entry-grid {
        width: 100%;

        .cv-entry-item {
            list-style: none;

            margin-left: 0;
            gap: var(--space-2);

            margin-bottom: var(--space-2);

            details {
                summary {
                    padding: var(--space-1) var(--space-3);
                    margin: calc(var(--space-1) * -1) calc(var(--space-3) * -1);
                    border-radius: var(--radius-md);

                    &:hover {
                        background-color: var(--slate-3);
                        cursor: pointer;
                    }

                    display: flex;
                    gap: var(--space-2);

                    list-style: none;

                    .cv-entry-date {
                        color: var(--slate-11);
                        white-space: nowrap;

                        flex-shrink: 0;
                        font-variant-numeric: tabular-nums;

                        margin-left: auto;
                    }

                    .cv-entry-title {
                        color: var(--slate-12);
                    }
                }
                summary::-webkit-details-marker {
                    display: none;
                }
            }

            .cv-entry-content {
                color: var(--slate-12);
                margin-top: var(--space-2);
                margin-bottom: var(--space-6);
            }
        }
    }
}

@layer util {
    .flex {
        display: flex;

        &.align-center {
            align-items: center;
        }

        &.justify-center {
            justify-content: center;
        }

        &.column {
            flex-direction: column;
        }

        &.row {
            flex-direction: row;
        }

        &.grow {
            flex-grow: 1;
        }

        &.gap-1 {
            gap: var(--space-1);
        }

        &.gap-2 {
            gap: var(--space-2);
        }

        &.gap-3 {
            gap: var(--space-3);
        }

        &.gap-4 {
            gap: var(--space-4);
        }
    }

    .mt-0 {
        margin-top: 0;
    }

    .mt-1 {
        margin-top: var(--space-1);
    }

    .mt-2 {
        margin-top: var(--space-2);
    }

    .mt-4 {
        margin-top: var(--space-4);
    }

    .mt-auto {
        margin-top: auto;
    }

    .mr-0 {
        margin-right: 0;
    }

    .mr-1 {
        margin-right: var(--space-1);
    }

    .mr-2 {
        margin-right: var(--space-2);
    }

    .mr-4 {
        margin-right: var(--space-4);
    }

    .mr-auto {
        margin-right: auto;
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .mb-1 {
        margin-bottom: var(--space-1);
    }

    .mb-2 {
        margin-bottom: var(--space-2);
    }

    .mb-4 {
        margin-bottom: var(--space-4);
    }

    .mb-auto {
        margin-bottom: auto;
    }

    .ml-0 {
        margin-left: 0;
    }

    .ml-1 {
        margin-left: var(--space-1);
    }

    .ml-2 {
        margin-left: var(--space-2);
    }

    .ml-4 {
        margin-left: var(--space-4);
    }

    .ml-auto {
        margin-left: auto;
    }

    .p-0 {
        padding: 0;
    }

    .p-1 {
        padding: var(--space-1);
    }

    .p-2 {
        padding: var(--space-2);
    }

    .p-4 {
        padding: var(--space-4);
    }

    .pt-0 {
        padding-top: 0;
    }

    .pt-1 {
        padding-top: var(--space-1);
    }

    .pt-2 {
        padding-top: var(--space-2);
    }

    .pt-4 {
        padding-top: var(--space-4);
    }

    .pr-0 {
        padding-right: 0;
    }

    .pr-1 {
        padding-right: var(--space-1);
    }

    .pr-2 {
        padding-right: var(--space-2);
    }

    .pr-4 {
        padding-right: var(--space-4);
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .pb-1 {
        padding-bottom: var(--space-1);
    }

    .pb-2 {
        padding-bottom: var(--space-2);
    }

    .pb-4 {
        padding-bottom: var(--space-4);
    }

    .pl-0 {
        padding-left: 0;
    }

    .pl-1 {
        padding-left: var(--space-1);
    }

    .pl-2 {
        padding-left: var(--space-2);
    }

    .pl-4 {
        padding-left: var(--space-4);
    }

    .w-100 {
        width: 100%;
    }

    .color-gray {
        color: var(--slate-11);
    }
}