:root {
    --bg:#050505;
    --surface:#0d0d0d;
    --text:#b5b4b4;
    --muted:#8f8f8f;
    --line:#242424;
    --accent:#ffffff;
    --accent-hover:#d4d4d4;
    --max-width:1120px;
}

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

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body {
    background:var(--bg);
    color:var(--text);
    font-family:"Inter",sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

a { color:inherit; }

button,
a { -webkit-tap-highlight-color:transparent; }

button { font:inherit; }

::selection {
    background:#fff;
    color:#000;
}

.container {
    width:min(calc(100% - 48px),var(--max-width));
    margin:0 auto;
}


.site-nav {
    position:sticky;
    top:0;
    z-index:20;
    background:var(--bg);
    border-bottom:1px solid var(--line);
}

.nav-inner {
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
}

.brand-avatar {
    width:30px;
    height:30px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--line);
}

.nav-links {
    display:flex;
    align-items:center;
    gap:28px;
}

.nav-links a {
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
}

.nav-links a:hover,
.nav-links a.active {
    color:var(--text);
}

.hero { padding:112px 0 0; }

.hero-inner {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
    gap:80px;
    align-items:start;
}

.eyebrow {
    margin-bottom:20px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hero h1 {
    max-width:760px;
    font-size:clamp(52px,7vw,86px);
    line-height:1;
    letter-spacing:-.04em;
    font-weight:600;
}

.hero h1 span { color:var(--text); }

.hero-description {
    max-width:650px;
    margin-top:30px;
    color:#b5b5b5;
    font-size:17px;
    line-height:1.8;
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:36px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:background .2s ease,color .2s ease;
}

.button-primary {
    background:#fff;
    color:#000;
}

.button-primary:hover { background:#d4d4d4; }

.text-link {
    color:#cfcfcf;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:color .2s ease;
}

.text-link:hover { color:#fff; }



.hero-profile {
    padding-top:18px;
}

.profile-image {
    width:100%;
    aspect-ratio:1;
    display:block;
    object-fit:cover;
    border-radius:6px;
    background:var(--surface);
}

.profile-meta { margin-top:20px; }

.profile-meta > div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
}

.meta-label { color:var(--muted); }

.profile-meta strong {
    font-weight:500;
    text-align:right;
}


.hero-stats {
    display:flex;
    align-items:flex-start;
    gap:50px;
    margin-top:88px;
}

.hero-stats > div { padding:27px 0; }

.hero-stats > div + div { padding-left:0; }

.hero-stats strong {
    display:block;
    font-size:28px;
    line-height:1.2;
    font-weight:600;
}

.hero-stats span {
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
}



.section {
    padding:120px 0;
    border-bottom:1px solid var(--line);
}

.section-grid,
.contact-grid {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:80px;
}

.section-heading {
    display:flex;
    align-items:baseline;
    gap:14px;
}

.section-heading > span {
    color:#fff;
    font-size:12px;
    font-weight:600;
}

.section-heading h2 {
    font-size:25px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.02em;
}
.skills-list { border-top:1px solid var(--line); }

.skill-row {
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:24px;
    padding:24px 0;
    border-bottom:1px solid var(--line);
}

.skill-row h3 {
    font-size:15px;
    font-weight:600;
}

.skill-row p { color:var(--muted); }



#projects .section-heading { margin-bottom:48px; }

.project-list { border-top:1px solid var(--line); }

.project {
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:26px;
    padding:34px 0;
    border-bottom:1px solid var(--line);
}

.project-number {
    padding-top:5px;
    color:#666;
    font-size:12px;
    font-weight:500;
}

.project-title-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
}

.project-title-row h3 {
    font-size:24px;
    font-weight:600;
    letter-spacing:-.02em;
}

.project-title-row > span {
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}

.project-copy > p {
    max-width:680px;
    margin-top:10px;
    color:var(--muted);
}

.project-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.project-tags span {
    padding:4px 9px;
    border:1px solid var(--line);
    border-radius:4px;
    color:#b8b8b8;
    font-size:12px;
}

.project-link {
    display:inline-block;
    margin-top:22px;
    color:#d0d0d0;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:color .2s ease;
}

.project-link:hover { color:#fff; }

.project-links {
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:22px;
}

.project-links .project-link { margin-top:0; }



.contact-copy > p {
    max-width:620px;
    color:#c0c0c0;
    font-size:clamp(26px,4vw,42px);
    line-height:1.2;
    letter-spacing:-.03em;
    font-weight:500;
}

.contact-links {
    margin-top:48px;
    border-top:1px solid var(--line);
}

.contact-link {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:20px 0;
    border:0;
    border-bottom:1px solid var(--line);
    background:transparent;
    color:var(--text);
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}

.contact-link > span:first-child {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.contact-link small {
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.contact-link strong {
    font-size:15px;
    font-weight:500;
}

.contact-link > span:last-child {
    color:var(--muted);
    font-size:13px;
    transition:color .2s ease;
}

.contact-link:hover > span:last-child { color:var(--text); }


footer { padding:30px 0 42px; }

.footer-inner {
    display:flex;
    justify-content:space-between;
    color:#686868;
    font-size:12px;
}


@media (max-width:860px) {
    .hero { padding-top:84px; }

    .hero-inner {
        grid-template-columns:1fr;
        gap:56px;
    }

    .hero-profile {
        display:grid;
        grid-template-columns:180px 1fr;
        gap:24px;
    }

    .profile-meta { margin-top:0; }

    .section-grid,
    .contact-grid {
        grid-template-columns:1fr;
        gap:44px;
    }

    .section { padding:88px 0; }
}

@media (max-width:620px) {
    .container {
        width:min(calc(100% - 32px),var(--max-width));
    }

    .nav-inner { height:64px; }

    .nav-links { gap:16px; }

    .nav-links a { font-size:13px; }

    .brand-avatar {
        width:26px;
        height:26px;
    }

    .hero h1 {
        font-size:clamp(46px,15vw,66px);
    }

    .hero-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .hero-profile { grid-template-columns:1fr; }

    .profile-image { max-width:220px; }

    .hero-stats {
        flex-direction:column;
        gap:0;
    }

    .hero-stats > div {
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:20px;
        padding:18px 0;
    }

    .hero-stats > div + div {
        padding-left:0;
        border-left:0;
        border-top:1px solid var(--line);
    }

    .hero-stats strong { font-size:23px; }

    .skill-row {
        grid-template-columns:1fr;
        gap:4px;
    }

    .project {
        grid-template-columns:34px minmax(0,1fr);
        gap:14px;
    }

    .project-title-row { display:block; }

    .project-title-row > span {
        display:block;
        margin-top:3px;
    }

    .project-links {
        gap:30px;
        flex-wrap:wrap;
    }

    .footer-inner {
        gap:12px;
        flex-direction:column;
    }
}