:root {
    --rempx: calc(1rem / 16); /* scalable pixels */
    --u: calc(var(--rempx) * 4);
    --body-line-height: calc(var(--rempx) * 24);
    --body-font-size: calc(var(--rempx) * 16);
    --body-gap: calc(var(--u) * 4);
    --h1-line-height: calc(var(--u) * 9);
    --h1-font-size: calc(var(--rempx) * 30);
    --h2-line-height: var(--body-line-height);
    --h2-font-size: calc(var(--rempx) * 17);
    --sm-line-height: var(--body-line-height);
    --sm-font-size: calc(var(--rempx) * 14);
    --bg: #000;
    --bg2: hsl(0 0 9%);
    --fg: hsl(0 0 68%);
    --fg2: hsl(0 0 40%);
    --link-fg: hsl(0 0 100%);
    --border-bg: hsl(0 0 30%);
    --serif-font-family: "Fira Sans", sans-serif;
    --sans-font-family:
        "Fira Sans", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    --measure: 40em;
    --radius: calc(var(--u) * 2);
    --gap: var(--body-gap);
    --gap-sm: calc(var(--u) * 2);
    --gap-md: calc(var(--u) * 6);
    --page-gap-y: calc(var(--u) * 16);
    --page-gap-x: calc(var(--u) * 16);
    --section-gap: calc(var(--u) * 16);
    --max-page-width: calc(var(--u) * 378);
}

@view-transition {
    navigation: auto;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in-slide {
    from {
        opacity: 0;
        transform: translateY(calc(var(--u) * 3));
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

::view-transition-old(root) {
    animation: 200ms ease-in-out forwards fade-out;
}

::view-transition-new(root) {
    animation: 500ms ease-in-out forwards fade-in-slide;
}

@layer reset {
    :root {
        scroll-behavior: smooth;
        font-family: var(--serif-font-family);
        font-size: var(--body-font-size);
        line-height: var(--body-line-height);
        color: var(--fg);
        background-color: var(--bg);
        font-optical-sizing: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    a {
        color: var(--link-fg);
        text-decoration-color: var(--border-bg);
        text-decoration-thickness: 1px;
        text-underline-offset: 6px;
        transition: text-decoration-color 300ms ease-in-out;
    }

    a:hover {
        text-decoration-color: var(--link-fg);
    }

    hr {
        border: 0;
        height: 1px;
        background-color: var(--border-bg);
        display: block;
    }
}

@layer utility {
    .nolink {
        text-decoration: none;
        font-style: normal;
        color: inherit;
    }
    .b {
        font-weight: 500;
    }

    .sm {
        font-size: var(--sm-font-size);
        line-height: var(--sm-line-height);
    }

    .fg2 {
        color: var(--fg2);
    }

    .h1 {
        font-size: var(--h1-font-size);
        line-height: var(--h1-line-height);
    }

    .h2 {
        color: var(--fg2);
        font-family: var(--sans-font-family);
        font-size: var(--sm-font-size);
        line-height: var(--sm-line-height);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.07ch;
    }
}

@layer components {
    x-sections {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
    }

    x-page {
        @media (width < 700px) {
            --page-gap-x: calc(var(--u) * 5);
            --page-gap-y: calc(var(--u) * 5);
        }

        display: block;
        padding: var(--page-gap-y) var(--page-gap-x);
        container-type: inline-size;
        max-width: var(--max-page-width);
    }

    x-hstack {
        display: flex;
        flex-direction: row;
        gap: var(--gap);

        @container (width < 700px) {
            flex-direction: column;
            gap: var(--gap-sm);
        }

        &[gap="none"] {
            gap: 0;
        }
    }

    x-vstack {
        --vstack-gap: var(--gap);
        display: flex;
        flex-direction: column;
        gap: var(--vstack-gap);

        &[gap="none"] {
            --vstack-gap: 0;
        }

        &[gap="sm"] {
            --vstack-gap: var(--gap-sm);
        }

        &[gap="md"] {
            --vstack-gap: var(--gap-md);
        }
    }

    table.kv {
        width: 100%;
        border: 0;
        border-collapse: collapse;
        table-layout: auto;

        th {
            text-align: left;
            font-weight: 500;
            font-size: var(--sm-font-size);
            line-height: var(--sm-line-height);
            color: var(--fg2);
            text-transform: uppercase;
            letter-spacing: 0.07ch;
            padding-right: var(--gap);
            width: 0px;
        }
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--u) * 2);
    }

    .tag {
        --tag-height: calc(var(--u) * 6);
        --tag-font-size: calc(var(--rempx) * 14);
        --tag-padding: var(--u) calc(var(--u) * 3);
        border: 0.5px solid var(--border-bg);
        color: var(--fg);
        font-size: var(--tag-font-size);
        font-family: var(--sans-font-family);
        line-height: 1;
        text-decoration: none;
        display: flex;
        align-items: center;
        width: fit-content;
        height: var(--tag-height);
        white-space: nowrap;
        border-radius: calc(var(--tag-height) / 2);
        padding: var(--tag-padding);
        transition:
            color 300ms ease-in-out,
            background-color 300ms ease-in-out;

        &:hover {
            background-color: var(--border-bg);
            color: var(--link-fg);
        }
    }

    .note-list {
        display: flex;
        flex-direction: column;
        border-bottom: 0.5px solid var(--border-bg);
    }

    .note-item {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: "date title title title title tags tags tags tags tags tags tags";
        gap: var(--gap);
        border-top: 0.5px solid var(--border-bg);
        padding: calc(var(--u) * 3) 0;

        @container (width < 1150px) {
            grid-template-areas: "date date title title title title title tags tags tags tags tags";
        }

        @container (width < 700px) {
            grid-template-columns: 1fr;
            grid-template-areas:
                "date"
                "title";
            gap: var(--u);

            .note-item-tags {
                display: none;
            }
        }

        .note-item-title {
            grid-area: title;
        }

        .note-item-title a {
            text-decoration: none;
        }

        .note-item-date {
            grid-area: date;
            color: var(--fg2);
            font-family: var(--sans-font-family);
            font-size: var(--sm-font-size);
            line-height: var(--sm-line-height);
        }

        .note-item-tags {
            grid-area: tags;
        }
    }

    .note {
        display: flex;
        flex-direction: column;
        gap: calc(var(--body-gap) * 2);
    }

    .meta {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: "key value value value value value value value value value value value";
        gap: var(--gap);
        padding: var(--u) 0;

        .meta-key {
            grid-area: key;
            color: var(--fg2);
            font-family: var(--sans-font-family);
            font-size: var(--sm-font-size);
            line-height: var(--sm-line-height);
        }

        .meta-value {
            grid-area: value;
        }
    }
}

@layer content {
    .content-flex {
        display: flex;
        flex-direction: column;
        gap: var(--body-gap);
    }

    .content-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--gap);
        row-gap: var(--body-gap);

        & > * {
            grid-column: 1 / -1;
        }

        & > .col-wide {
            grid-column: 1 / -1;
            width: 100%;
        }

        & > .col-full {
            grid-column: 1 / -1;
            margin: var(--body-gap) 0;
            width: 100%;
        }

        @container (width >= 40em) {
            & > * {
                grid-column: 1 / 11;
            }
        }

        @container (width >= 45em) {
            & > * {
                grid-column: 1 / 10;
            }
        }

        @container (width >= 50em) {
            & > * {
                grid-column: 1 / 9;
            }

            & > .col-wide {
                grid-column: 1 / 11;
            }
        }

        @container (width >= 60em) {
            & > * {
                grid-column: 1 / 8;
            }

            & > .col-wide {
                grid-column: 1 / 10;
            }
        }

        @container (width >= 70em) {
            & > * {
                grid-column: 1 / 7;
            }
        }

        @container (width >= 80em) {
            & > * {
                grid-column: 1 / 6;
            }

            & > .col-wide {
                grid-column: 1 / 9;
            }
        }
    }

    .content {
        & > :is(h1, h2, h3, h4, h5) {
            color: var(--fg2);
            font-family: var(--sans-font-family);
            font-size: var(--h2-font-size);
            font-weight: 500;
            line-height: var(--h2-line-height);
            text-transform: uppercase;
            letter-spacing: 0.07ch;
            margin-top: calc(var(--body-gap) * 2);
        }

        hr {
            margin: var(--body-gap) 0;
        }

        img {
            display: block;
            margin: var(--u) 0;
            max-width: 100%;
            overflow: hidden;
            border-radius: var(--u);
        }

        b,
        strong {
            font-weight: 500;
        }

        i {
            font-style: italic;
        }

        ul {
            display: flex;
            flex-direction: column;
            padding-left: 1em;
            gap: var(--u);

            > li {
                list-style: disc;
            }

            ul {
                margin-top: var(--u);
            }
        }

        ol {
            display: flex;
            flex-direction: column;
            padding-left: 2em;

            > li {
                list-style: decimal;
            }
        }

        blockquote {
            border-left: 2px solid var(--border-bg);
            margin: var(--gap-sm) 0;
            padding-left: var(--gap);
            display: flex;
            flex-direction: column;
            gap: var(--gap);
        }

        table {
            border: 1px solid var(--border-bg);
            width: 100%;
            border-collapse: collapse;
        }

        & > table {
            margin: var(--body-gap) 0;
        }

        caption {
            text-align: left;
            color: var(--fg2);
            padding: var(--gap-sm) 0;
        }

        thead {
            background-color: var(--bg2);
        }

        td,
        th {
            border: 1px solid var(--border-bg);
            padding: var(--u) var(--gap-sm);
            vertical-align: top;
        }

        th {
            font-weight: 500;
            text-align: left;
        }

        figure {
            margin: var(--body-gap) 0;
            display: flex;
            flex-direction: column;
            gap: var(--gap-sm);
        }

        figcaption {
            color: var(--fg2);
        }

        & > pre {
            background-color: var(--bg2);
            border: 1px solid var(--border-bg);
            padding: calc(var(--u) * 4);
            border-radius: var(--radius);
            overflow-x: auto;
        }

        code {
            font-family: "Fira Mono";
            background-color: var(--bg2);
            padding: calc(var(--u) / 2) var(--u);
            border-radius: var(--radius);
        }
    }
}