/* ---------- Theme ---------- */

        :root {
            --bg: #0b0d10;
            --surface: #12151a;
            --surface-hover: #171b21;
            --border: rgba(255, 255, 255, .08);

            --text: #f4f4f5;
            --muted: #858b95;
            --accent: #7cff9b;

            --glow: #1b2228;

            --radius: 14px;
        }


        /* ---------- Light Theme ---------- */

        :root.light-theme {
            --bg: #f4f4f2;
            --surface: #ffffff;
            --surface-hover: #f8f8f6;
            --border: rgba(0, 0, 0, .10);

            --text: #181a1d;
            --muted: #74787d;
            --accent: #16883b;

            --glow: #e4e8e2;
        }


        /* ---------- Base ---------- */

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

        body {
            min-height: 100vh;

            background:
                radial-gradient(circle at 50% -20%,
                    var(--glow) 0%,
                    transparent 42%),
                var(--bg);

            color: var(--text);

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            transition:
                background .25s ease,
                color .25s ease;
        }


        /* ---------- Theme Toggle ---------- */

        .theme-toggle {
            position: fixed;

            top: 24px;
            right: 24px;

            width: 42px;
            height: 42px;

            display: grid;
            place-items: center;

            background: var(--surface);
            color: var(--muted);

            border: 1px solid var(--border);
            border-radius: 50%;

            font-size: 1rem;
            font-family: monospace;

            cursor: pointer;

            z-index: 100;

            transition:
                background .25s ease,
                color .25s ease,
                border-color .25s ease,
                transform .2s ease;
        }

        .theme-toggle:hover {
            color: var(--accent);
            border-color: var(--accent);
            transform: rotate(10deg);
        }


        /* ---------- Layout ---------- */

        .site-shell {
            width: min(900px, calc(100% - 40px));
            min-height: 100vh;

            margin: 0 auto;
            padding: 60px 0;

            display: flex;
            flex-direction: column;
        }

        .container {
            width: 100%;
            flex: 1;

            display: flex;
            flex-direction: column;
            justify-content: center;
        }


        /* ---------- Identity ---------- */

        .eyebrow {
            font-family: monospace;
            font-size: .75rem;
            letter-spacing: .12em;
            text-transform: uppercase;

            color: var(--accent);

            margin-bottom: 18px;
        }

        h1 {
            font-size: clamp(3rem, 9vw, 6.5rem);
            line-height: .95;

            font-weight: 600;
            letter-spacing: -.055em;

            margin-bottom: 24px;
        }

        h1 span {
            color: var(--muted);
            font-weight: 300;
        }

        .intro {
            max-width: 500px;

            color: var(--muted);
            font-size: 1.1rem;
            line-height: 1.7;

            margin-bottom: 50px;
        }


        /* ---------- Projects ---------- */

        .links {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .project {
            position: relative;

            min-height: 130px;

            padding: 22px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            text-decoration: none;

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

            border: 1px solid var(--border);
            border-radius: var(--radius);

            transition:
                transform .2s ease,
                background .25s ease,
                color .25s ease,
                border-color .25s ease;
        }

        .project:hover {
            transform: translateY(-3px);
            background: var(--surface-hover);
            border-color: rgba(124, 255, 155, .35);
        }

        .light-theme .project:hover {
            border-color: rgba(22, 136, 59, .35);
        }

        .project-number {
            font-family: monospace;
            font-size: .72rem;
            color: var(--muted);
        }

        .project-name {
            font-size: 1.15rem;
            font-weight: 600;
        }

        .project-arrow {
            position: absolute;

            right: 20px;
            bottom: 20px;

            color: var(--accent);
        }


        /* ---------- Footer ---------- */

        footer {
            margin-top: 60px;

            display: flex;
            justify-content: space-between;

            padding-top: 20px;

            border-top: 1px solid var(--border);

            color: var(--muted);

            font-family: monospace;
            font-size: .75rem;

            transition:
                color .25s ease,
                border-color .25s ease;
        }


        /* ---------- Mobile ---------- */

        @media (max-width: 650px) {

            .site-shell {
                padding: 80px 0 40px;
            }

            .theme-toggle {
                top: 18px;
                right: 18px;

                width: 38px;
                height: 38px;
            }

            .links {
                grid-template-columns: 1fr;
            }

            .project {
                min-height: 100px;
            }

            footer {
                flex-direction: column;
                gap: 8px;
            }
        }

/* ---------- Inner Pages ---------- */

.page {
    justify-content: flex-start;
    max-width: 760px;
}

.back {
    display: inline-block;
    margin-bottom: 70px;

    color: var(--muted);
    text-decoration: none;

    font-family: monospace;
    font-size: .75rem;
}

.back:hover {
    color: var(--accent);
}

.page-title {
    font-size: clamp(3rem, 8vw, 5.5rem);
}

.content {
    max-width: 620px;
}

.content h2 {
    margin-top: 42px;
    margin-bottom: 14px;

    font-size: .75rem;
    font-family: monospace;
    font-weight: 500;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--accent);
}

.content p {
    margin-bottom: 18px;

    color: var(--muted);

    font-size: 1rem;
    line-height: 1.75;
}

.content a {
    color: var(--text);
    text-decoration: none;

    border-bottom: 1px solid var(--border);
}

.content a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.empty-state {
    margin: 35px 0;
    padding: 28px;

    border: 1px dashed var(--border);
    border-radius: var(--radius);

    color: var(--muted);

    font-family: monospace;
    font-size: .8rem;
}