:root{
  --bg:#1b1e1d; --surface:#232726; --line:#343a37;
  --ash:#9ba39f; --silver:#dde2df; --green:#6fcf97; --green-deep:#2f6b4f;
  --hdr:rgba(27,30,29,.88); --tag:#2d3331; --on-green:#10281c; --green-hover:#8be0ae; --logo:#fff; --logo-filter:none; color-scheme:dark;
  --display:'Bricolage Grotesque','Segoe UI',Arial,sans-serif;
  --body:'Figtree','Segoe UI',Arial,sans-serif;
}
[data-theme="light"]{--bg:#f3f5f3; --surface:#ffffff; --line:#d3d9d5; --ash:#59635e; --silver:#1b211f; --green:#1f7a4e; --green-deep:#8fcaa9; --hdr:rgba(243,245,243,.9); --tag:#e6ebe8; --on-green:#ffffff; --green-hover:#165d3b; --logo:#1c2220; --logo-filter:invert(.9); color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--silver);font:400 1.05rem/1.65 var(--body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* nav: full-width bar, logo + lines on the left, links on the right */
header{position:sticky;top:0;z-index:5;background:var(--hdr);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);--lead:clamp(36px,5vw,110px);--lw:261px}
.bar{position:relative;height:72px}
.bar::before,.bar::after{content:"";position:absolute;top:12px;height:44px;background-size:100% 44px;background-repeat:no-repeat;filter:var(--logo-filter)}
.bar::before{left:0;width:calc(var(--lead) + 1px);background-image:url(line-l.png)}
.bar::after{left:calc(var(--lead) + var(--lw) - 1px);right:0;background-image:url(line-r.png)}
.brand{position:absolute;left:var(--lead);top:12px;display:block;width:var(--lw);height:44px}
.brand img{display:block;width:100%;height:100%;filter:var(--logo-filter)}
nav{position:absolute;right:24px;bottom:36px;display:flex;align-items:center;gap:26px;z-index:1}
nav a{color:var(--ash);text-decoration:none;font-weight:500;font-size:.97rem}
nav a:hover{color:var(--green)}
.theme{width:32px;height:32px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ash);cursor:pointer;transition:color .2s,border-color .2s}
.theme:hover{color:var(--green);border-color:var(--green)}
.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
[data-theme="light"] .theme .sun{display:none}
[data-theme="light"] .theme .moon{display:block}
section{scroll-margin-top:80px}
@media(max-width:860px){
  .bar{height:auto;padding-top:72px}
  nav{position:static;justify-content:space-between;gap:10px;padding:0 16px 10px}
  nav a{font-size:.92rem}
  section{scroll-margin-top:120px}
}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#grid{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;padding-top:110px;padding-bottom:120px;pointer-events:none}
.hero a,.hero .btn{pointer-events:auto}
.hello{color:var(--green);font-weight:600;margin-bottom:14px}
h1{font:700 clamp(2.5rem,7vw,4.9rem)/1.04 var(--display);letter-spacing:-.025em;max-width:14ch}
.motto{margin-top:30px;max-width:46ch;color:var(--ash);font-size:1.12rem;padding-left:18px;border-left:3px solid var(--green-deep)}
.btns{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border-radius:6px;font-weight:600;text-decoration:none;border:1px solid var(--line);transition:background .2s,border-color .2s}
.btn.main{background:var(--green);color:var(--on-green);border-color:var(--green)}
.btn.main:hover{background:var(--green-hover)}
.btn.alt:hover{border-color:var(--green);color:var(--green)}

/* sections */
section{padding:84px 0;border-bottom:1px solid var(--line)}
h2{font:700 clamp(1.8rem,4vw,2.5rem)/1.15 var(--display);letter-spacing:-.015em;margin-bottom:34px}
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:56px}
.about p+p{margin-top:16px}
.about p{color:var(--ash)}
.facts{list-style:none;border-top:1px solid var(--line)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
.facts span:first-child{color:var(--ash)}

/* projects */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s}
.card:hover{border-color:var(--green-deep)}
.card h3{font:700 1.3rem var(--display)}
.card p{color:var(--ash);flex:1}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:.85rem;padding:3px 11px;border-radius:99px;background:var(--tag);color:var(--silver)}
.card a{color:var(--green);font-weight:600;text-decoration:none}
.card a:hover{text-decoration:underline}
.card.empty{border-style:dashed;background:transparent}
.card.empty h3{color:var(--ash)}

/* skills */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.skills h3{font:700 1.1rem var(--display);margin-bottom:12px;color:var(--green)}
.skills ul{list-style:none}
.skills li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ash)}

/* contact */
.contact p{color:var(--ash);max-width:50ch;margin-bottom:28px}
.links{display:flex;flex-wrap:wrap;gap:12px}
footer{padding:30px 0;color:var(--ash);font-size:.92rem}

@media(max-width:760px){
  .about{grid-template-columns:1fr;gap:34px}
  .hero .wrap{padding-top:70px;padding-bottom:80px}
  section{padding:60px 0}
}

/* sprout */
#sprout{position:absolute;right:max(24px,calc((100% - 1040px)/2 + 24px));bottom:0;width:192px;height:256px;image-rendering:pixelated;pointer-events:none}
@media(max-width:760px){#sprout{width:120px;height:160px;right:12px;opacity:.9}}

/* scroll progress */
#bar{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;z-index:20}

/* custom cursor (pixel trail) */
.tr{position:fixed;left:0;top:0;pointer-events:none;z-index:99;background:var(--green);will-change:transform}
.tr.head{transition:width .15s,height .15s,background .15s,margin .15s}
.tr.head.big{width:34px!important;height:34px!important;margin:-10px 0 0 -10px;background:transparent;border:2px solid var(--green)}

/* load-in + scroll reveal */
.w{display:inline-block;animation:wordIn .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordIn{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hello{animation:fadeUp .7s both}
.motto{animation:fadeUp .8s .7s both}
.btns{animation:fadeUp .8s .95s both}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.card{transition:border-color .2s,transform .25s}
.card:hover{transform:translateY(-4px)}
.btn{transition:background .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .w,.hello,.motto,.btns{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}