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

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

@layer reset, tokens, base, layout, components;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote {
        margin: 0;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }

    a {
        color: inherit;
    }
}

@layer tokens {
    :root {
        color-scheme: light dark;
        --bg: light-dark(#fff, #000);
        --fg: light-dark(#000, #fff);
        --text: light-dark(#404040, #d4d4d4);
        --muted: light-dark(#525252, #a3a3a3);
        --faint: light-dark(#737373, #a3a3a3);
        --rule: light-dark(#e5e5e5, #262626);
        --code-bg: light-dark(#f5f5f5, #171717);
        --focus: light-dark(#000, #fff);
        --sans: Geist, ui-sans-serif, system-ui, sans-serif;
        --mono: "Geist Mono", ui-monospace, "SFMono-Regular", menlo, monospace;
        --measure: 42rem;
        --page: 64rem;
        --space: clamp(1.25rem, 4vw, 2rem);
    }
}

@layer base {
    html {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.7;
        hanging-punctuation: first last;
        interpolate-size: allow-keywords;
    }

    body {
        min-height: 100dvh;
        background: var(--bg);
        color: var(--fg);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
    }

    @view-transition {
        navigation: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        @view-transition {
            navigation: none;
        }
    }
}

@layer layout {
    .skip-link {
        position: absolute;
        inset: 0.75rem auto auto 0.75rem;
        z-index: 10;
        padding: 0.4rem 0.7rem;
        background: var(--fg);
        color: var(--bg);
        text-decoration: none;
        transform: translateY(-150%);
    }

    .skip-link:focus {
        transform: none;
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .shell {
        width: min(var(--page), calc(100% - (var(--space) * 2)));
        margin: 2rem auto 0;
        padding-bottom: 3rem;
    }

    main {
        display: grid;
        gap: 5rem;
        margin-top: 3rem;
        min-width: 0;
    }

    @media (width < 48rem) {
        main {
            gap: 3.5rem;
        }
    }
}

@layer components {
    .site-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem 2rem;
        letter-spacing: -0.01em;
    }

    .wordmark {
        font-size: 1.125rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0.02em;
    }

    .nav-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 2rem;
        padding: 0;
        list-style: none;
    }

    .nav-list a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        color: var(--fg);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .nav-list a:hover,
    .nav-list a[aria-current="page"] {
        color: light-dark(#262626, #e5e5e5);
    }

    @media (width < 40rem) {
        .nav-list a svg + span {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
    }

    .hero {
        max-width: 48rem;
    }

    .hero h1,
    .post-header h1 {
        margin-bottom: 1.5rem;
        font-size: clamp(1.5rem, 2.4vw, 1.875rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2;
        text-wrap: balance;
    }

    .lede {
        font-family: var(--mono);
        font-size: 0.875rem;
        letter-spacing: 0.04em;
        color: var(--muted);
    }

    .intro,
    .empty {
        max-width: var(--measure);
        color: var(--text);
        text-wrap: pretty;
    }

    .section-label {
        margin-bottom: 1.5rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--faint);
    }

    .section-label a {
        color: inherit;
        text-decoration: none;
    }

    .section-label a:hover {
        color: var(--fg);
    }

    .prose {
        display: grid;
        gap: 1rem;
        max-width: var(--measure);
        color: var(--text);
        text-wrap: pretty;
    }

    .prose a,
    .intro a {
        color: var(--fg);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 0.18em;
        text-decoration-thickness: 1px;
    }

    .prose a.project-name {
        font-family: var(--mono);
        font-weight: 500;
        text-decoration: none;
    }

    .prose a.project-name:hover {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .post-list {
        display: grid;
        gap: 1rem;
        max-width: 48rem;
        padding: 0;
        list-style: none;
    }

    .post-list li {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        gap: 1rem;
        align-items: baseline;
    }

    .post-list time {
        font-family: var(--mono);
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        color: var(--faint);
    }

    .post-list a {
        color: var(--fg);
        font-weight: 500;
        text-decoration: none;
        letter-spacing: -0.01em;
    }

    .post-list a:hover {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .post-list--notes li {
        align-items: start;
        padding: 0.35rem 0;
    }

    .post-list--notes p {
        margin-top: 0.25rem;
        color: var(--text);
    }

    @media (width < 40rem) {
        .post-list li,
        .post-list--notes li {
            grid-template-columns: 1fr;
            gap: 0.2rem;
        }
    }

    .post {
        max-width: 48rem;
    }

    .post-header {
        margin-bottom: 2.5rem;
    }

    .post-header h1 {
        margin-bottom: 0;
    }

    .prose--post {
        gap: 1.15rem;
    }

    .prose--post h1,
    .prose--post h2,
    .prose--post h3 {
        color: var(--fg);
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .prose--post h2 {
        margin-top: 1.75rem;
        font-size: 1.25rem;
    }

    .prose--post h3 {
        margin-top: 1.25rem;
        font-size: 1.05rem;
    }

    .prose--post ul,
    .prose--post ol {
        padding-left: 1.25rem;
    }

    .prose--post li + li {
        margin-top: 0.35rem;
    }

    .prose--post blockquote {
        padding-left: 1rem;
        border-left: 2px solid var(--rule);
        color: var(--muted);
    }

    .prose--post hr {
        width: 100%;
        height: 1px;
        margin: 1.5rem 0;
        border: 0;
        background: var(--rule);
    }

    .prose--post pre,
    .prose--post code {
        font-family: var(--mono);
        font-size: 0.875em;
    }

    .prose--post code {
        padding: 0.1em 0.3em;
        background: var(--code-bg);
        border-radius: 0.25rem;
    }

    .prose--post pre {
        overflow-x: auto;
        padding: 1rem 1.1rem;
        background: var(--code-bg);
        border-radius: 0.4rem;
    }

    .prose--post pre code {
        padding: 0;
        background: none;
    }

    .prose--post img {
        margin: 0.5rem 0;
        border-radius: 0.25rem;
    }

    .site-footer {
        margin-top: 4rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .social {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;
    }

    .social a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--muted);
        font-size: 0.875rem;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .social a:hover {
        color: var(--fg);
    }
}