:root{
    --ink:#e7f2e8;
    --muted:#91a59a;
    --paper:#0b100e;
    --card:#111a16;
    --line:#26352d;
    --accent:#b7f34b;
    --accent-dark:#e7b84b;
    --terminal:#16221b;
    --max:1120px
}

*{
    box-sizing:border-box
}
    
html{
    scroll-behavior:smooth
}

body{
    margin:0;color:var(--ink);
    background:var(--paper);
    font:16px/1.6 "IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
    background-image:linear-gradient(rgba(183,243,75,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(183,243,75,.035) 1px,transparent 1px);
    background-size:32px 32px
}

a{
    color:inherit;text-decoration:none
}

a:hover{
    color:var(--accent)
}

.wrap{
    width:min(var(--max),calc(100% - 40px));
    margin:auto
}

header{
    padding:22px 0;border-bottom:1px solid var(--line);background:rgba(11,16,14,.86);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)
}

nav{
    display:flex;
    align-items:center;
    justify-content:space-between
}

.logo{
    font-weight:800;letter-spacing:.04em;
    font-size:1.1rem
}

.logo span{
    color:var(--accent-dark)
}

.links{
    display:flex;
    gap:28px;
    color:var(--muted);
    font-size:.8rem
}

.links a:hover{
    color:var(--ink)
}

.hero{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:70px;align-items:center;padding:110px 0 120px
}

.eyebrow{
    color:var(--accent);
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.72rem
}

.hero h1{
    font-size:clamp(3rem,7vw,6.2rem);
    line-height:.98;letter-spacing:-.09em;margin:18px 0 25px;
    max-width:740px
}

.typed-wrap {
    --cursor-shift: 0px;
    display: inline-block;
    width: 10ch;
    position: relative;
    font-weight: 400;
    color: var(--accent);
    white-space: nowrap;
}

.typed-text {
    display: inline-block;
}

.cursor {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.62ch;
    height: 0.9em;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(183,243,75,.8);
    transform: translate(var(--cursor-shift), -50%);
    transition: transform 80ms linear;
    animation: blink 0.9s steps(1) infinite;
}

@keyframes blink{
    0%, 50% { opacity:1 }
    50.01%, 100% { opacity:0 }
}

.hero p{
    font-size:1rem;color:var(--muted);
    max-width:550px;margin:0 0 30px
}

.button{
    display:inline-block;background:var(--accent);
    color:#0b100e;
    border:1px solid var(--accent);border-radius:2px;padding:12px 19px;
    font-weight:700;font-size:.86rem
}

.button:hover{
    background:var(--accent-dark);
    border-color:var(--accent-dark);color:#0b100e
}

.button.secondary{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
    margin-left:9px
}

.portrait{
    background:var(--terminal);
    border:1px solid var(--line);border-radius:2px;
    padding:42px 28px 28px;
    max-width:330px;
    justify-self:end;
    transform:rotate(2deg);position:relative
}

.portrait:before{
    content:"●  ●  ●";position:absolute;top:12px;left:16px;color:var(--accent-dark);font-size:.7rem;letter-spacing:.15em
}

.portrait .face{
    height:285px;
    border-radius:0;
    background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(183,243,75,.12) 12px),repeating-linear-gradient(90deg,transparent 0 11px,rgba(183,243,75,.12) 12px),#0d1511;
    position:relative;
    overflow:hidden
}

.face:before{
    content:"";
    position:absolute;
    width:170px;height:170px;
    background:transparent;
    border:2px solid var(--accent);
    border-radius:50%;
    top:48px;left:50%;transform:translateX(-50%)
}

.face:after{
    content:"TJ_HUCK.exe";
    position:absolute;
    color:var(--accent);
    bottom:24px;left:0;right:0;text-align:center;
    font-size:.75rem
}

section{
    padding:82px 0;
    border-top:1px solid var(--line)
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:34px
}
.section-head h2{
    font-size:2rem;
    letter-spacing:-.05em;
    margin:7px 0 0
}

.section-head a{
    color:var(--accent-dark);
    font-weight:700
}

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

.project,
.post{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden
}

.project-card{
    display:block;
    height:100%
}

.project-card:hover .project,
.project-card:focus-visible .project{
    border-color:var(--accent);
    transform:translateY(-3px)
}

.project-card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px
}

.project{
    height:100%;
    transition:border-color .2s ease,transform .2s ease
}

.project-image{
    height:180px;
    background:var(--terminal);
    display:grid;
    place-items:center;
    overflow:hidden;
    font-family:inherit;
    font-size:3.7rem;color:var(--accent)
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block
}

.project:nth-child(2) .project-image{
    background:#1b1b13;color:var(--accent-dark)
}

.project:nth-child(3) .project-image{
    background:#111b20;color:#76d7d0
}

.project-body{
    padding:22px
}

.project h3,
.post h3{
    margin:0 0 8px;
    font-size:1.25rem
}

.project p,
.post p{
    color:var(--muted);
    margin:0 0 17px
}

.tags{
    font-size:.77rem;
    color:var(--accent);
    font-weight:700;
    letter-spacing:.04em
}

.posts{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px
}

.post{
    padding:25px
}

.post-card{
    display:block;
    height:100%
}

.post-card:hover .post,
.post-card:focus-visible .post{
    border-color:var(--accent);
    transform:translateY(-3px)
}

.post-card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px
}

.post{
    transition:border-color .2s ease,transform .2s ease
}

.post small{
    color:var(--muted)
}

.post h3{
    margin-top:12px
}

.about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:start
}

.about h2{
    font-size:2.5rem;
    letter-spacing:-.06em;
    line-height:1.05;
    margin:0
}

.about p{
    color:var(--muted);
    margin-top:0;
    font-size:1.05rem
}

.skills{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:22px
}

.skills span{
    padding:7px 12px;
    border-radius:2px;
    background:var(--terminal);border:1px solid var(--line);
    font-size:.86rem;
    font-weight:650
}

footer{
    padding:36px 0;
    color:var(--muted);
    font-size:.9rem;
    display:flex;
    justify-content:space-between
}

footer .social{
    display:flex;
    gap:20px;
    color:var(--ink);
    font-weight:650
}

@media(max-width:760px){
    .links{
        gap:12px
    }

    .links a:nth-child(2){
        display:none
    }

    .hero{
        grid-template-columns:1fr;
        padding:65px 0 75px;
        gap:35px
    }

    .portrait{
        justify-self:start;
        max-width:260px
    }

    .portrait .face{
        height:220px
    }

    .projects,
    .posts,
    .about{
        grid-template-columns:1fr;
        gap:16px
    }

    .about{
        gap:28px
    }

    .section-head{
        align-items:start;
        display:block
    }

    .section-head a{
        display:inline-block;
        margin-top:10px
    }

    section{
        padding:58px 0
    }

    footer{
        display:block
    }

    footer .social{
        margin-top:12px
    }
}