<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Clayton Lengel-Zigich</title>
        <meta
            name="description"
            content="Clayton Lengel-Zigich's personal website."
        />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;650&display=swap"
            rel="stylesheet"
        />

        <style>
            :root {
                color-scheme: light;
                --bg: #f8f7f2;
                --text: #202124;
                --muted: #64645f;
                --line: #dedbd1;
                --accent: #1f7a5f;
            }

            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                min-height: 100vh;
                background: var(--bg);
                color: var(--text);
                font-family:
                    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
                line-height: 1.6;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
            }

            .page {
                display: flex;
                min-height: 100vh;
                align-items: center;
                padding: 48px 24px;
            }

            .content {
                width: min(100%, 620px);
                margin: 0 auto;
            }

            h1 {
                margin: 0 0 24px;
                font-size: clamp(2.5rem, 8vw, 5rem);
                line-height: 0.95;
                font-weight: 650;
                letter-spacing: 0;
            }

            p {
                max-width: 560px;
                margin: 0 0 1em 0;
                color: var(--muted);
                font-size: 1.075rem;
            }

            nav {
                display: flex;
                flex-wrap: wrap;
                gap: 18px;
                margin-top: 36px;
            }

            a {
                color: var(--text);
                font-weight: 500;
                text-decoration-color: color-mix(
                    in srgb,
                    var(--accent) 42%,
                    transparent
                );
                text-decoration-thickness: 2px;
                text-underline-offset: 5px;
                transition:
                    color 160ms ease,
                    text-decoration-color 160ms ease;
            }

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

            footer {
                margin-top: 88px;
                padding-top: 22px;
                border-top: 1px solid var(--line);
                color: color-mix(in srgb, var(--muted) 76%, white);
                font-size: 0.875rem;
            }
        </style>
    </head>
    <body>
        <main class="page">
            <div class="content">
                <h1>Clayton Lengel-Zigich</h1>
                <p>
                    I'm a pragmatic technology executive that owns problems and
                    enables teams to deliver working solutions. Always learning,
                    I separate what works from the hype through hands-on
                    experimentation, keeping the business on the cutting edge.
                </p>
                <p>
                    Grounded in driving results for the business, I never use
                    technology for technology's sake, but instead work across
                    the organization to achieve outsized outcomes.
                </p>

                <nav aria-label="Social links">
                    <a href="https://x.com/claytonlz">X</a>
                    <a href="https://www.linkedin.com/in/claytonlz/"
                        >LinkedIn</a
                    >
                    <a href="https://github.com/clayton">GitHub</a>
                </nav>

                <footer>&copy; 2026 Clayton Lengel-Zigich</footer>
            </div>
        </main>
    </body>
</html>
