:root {
    color-scheme:dark;
    --bg:#101411;
    --panel:#1a211b;
    --text:#f0f3ec;
    --muted:#a5b3a8;
    --accent:#c0f580;
    --line:#334036
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.75 system-ui,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
a:hover {
    color:var(--accent)
}
a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:5px
}
h1,h2,h3 {
    line-height:1.08;
    letter-spacing:-.045em;
    font-weight:500
}
h1 {
    font-size:clamp(3rem,6.4vw,5.8rem);
    margin:24px 0
}
h2 {
    font-size:clamp(2rem,4vw,3rem);
    margin:14px 0 30px
}
h3 {
    font-size:1.5rem
}
p {
    color:var(--muted)
}
.wrap {
    width:min(1180px,calc(100% - 64px));
    margin:auto
}
.skip {
    position:absolute;
    top:-80px;
    padding:10px;
    background:var(--accent);
    color:var(--bg)
}
.skip:focus {
    top:0
}
header {
    border-bottom:1px solid var(--line)
}
nav {
    min-height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.logo {
    font-weight:700;
    font-size:1.25rem;
    letter-spacing:-.04em
}
.logo span {
    color:var(--accent)
}
.nav-links {
    display:flex;
    gap:30px;
    font-size:.9rem
}
.nav-links [aria-current] {
    color:var(--accent)
}
.nav-contact {
    border-bottom:1px solid var(--accent);
    font-size:.9rem
}
.eyebrow {
    font:12px/1.6 monospace;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.12em
}
.hero {
    display:grid;
    grid-template-columns:1fr;
    gap:65px;
    align-items:center;
    padding:90px 0 80px
}
.hero h1 span {
    color:var(--accent)
}
.hero p {
    max-width:560px;
    font-size:1.08rem
}
.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}
.button {
    display:inline-flex;
    padding:13px 22px;
    background:var(--accent);
    color:#172111;
    border:1px solid var(--accent);
    font-size:.9rem;
    font-weight:600;
    gap:22px;
    align-items:center
}
.button:hover {
    background:#d5ffa6;
    color:#172111
}
.secondary {
    background:transparent;
    color:var(--text);
    border-color:var(--line)
}
.secondary:hover {
    background:var(--panel);
    color:var(--accent)
}
.stack {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    border-block:1px solid var(--line);
    font:14px monospace;
    color:var(--muted)
}
.stack strong {
    color:var(--text);
    font-weight:400
}
.section {
    padding:70px 0;
    border-bottom:1px solid var(--line)
}
.section-head {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center
}
.text-link {
    font-size:.9rem;
    color:var(--accent)
}
.tag {
    font:12px monospace;
    color:var(--accent)
}
.projects-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px
}
.project {
    border-bottom:1px solid var(--line);
    padding-bottom:24px
}








.project-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.project h3 {
    margin:22px 0 12px
}
.project p {
    font-size:.95rem;
    max-width:540px
}
.page-intro {
    padding:75px 0 40px;
    max-width:950px
}
.page-intro h1 {
    font-size:clamp(3rem,6vw,4.8rem)
}
.page-intro p {
    max-width:710px;
    font-size:1.1rem
}
.about-grid {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:70px
}
.portrait {
    width:100%;
    max-height:460px;
    object-fit:cover;
    object-position:top;
    filter:saturate(.65)
}
.skills {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.skills span {
    font:14px monospace;
    padding:12px 18px;
    border:1px solid var(--line)
}
.contact {
    padding:75px 0
}
.contact h2 {
    max-width:750px
}
.contact p {
    max-width:600px
}
footer {
    border-top:1px solid var(--line);
    padding:25px 0;
    font-size:.8rem;
    color:var(--muted)
}
.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:20px
}
.footer-links {
    display:flex;
    gap:24px
}
.archive {
    margin-top:35px;
    display:flex;
    gap:24px;
    flex-wrap:wrap
}
.archive a {
    color:var(--accent)
}
@media(max-width:850px) {
    .hero {
    grid-template-columns:1fr;
    gap:35px;
    padding:55px 0
}
.nav-contact {
    display:none
}
.about-grid {
    gap:30px
}
}
@media(max-width:600px) {
    .wrap {
    width:calc(100% - 36px)
}
nav {
    min-height:86px;
    gap:12px;
    flex-wrap:wrap;
    padding:18px 0
}
.logo {
    font-size:1.1rem
}
.nav-links {
    font-size:.8rem;
    gap:16px
}
.hero h1 {
    font-size:3.2rem
}
.projects-grid,.about-grid {
    grid-template-columns:1fr
}
.section,.contact {
    padding:45px 0
}
.section-head {
    align-items:start;
    flex-direction:column
}
.page-intro {
    padding-top:45px
}
.footer-inner {
    flex-direction:column
}



}
@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}
* {
    transition:none!important
}

}
.project-visual {
    aspect-ratio: 1897 / 863;
    overflow: hidden;
    background: var(--panel);
}
.project-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}
.project:hover .project-visual img,
.project:focus-visible .project-visual img {
    transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
    .project:hover .project-visual img,
    .project:focus-visible .project-visual img {
        transform: none;
    }
}