:root { --ink:#161616; --paper:#f5f2eb; --acid:#d8f658; --coral:#ff6b50; --line:rgba(22,22,22,.17); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }.wrap { width:min(1220px, calc(100% - 48px)); margin:auto; }.nav { height:92px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.wordmark { font-size:26px; font-weight:900; letter-spacing:-2px; }.wordmark span { color:var(--coral); }.nav-links { display:flex; gap:34px; font-size:14px; }.nav-links a,.footer-bottom a { transition:opacity .2s; }.nav-links a:hover,.footer-bottom a:hover { opacity:.55; }.nav-cta { border:1px solid var(--ink); border-radius:100px; padding:12px 16px; font-size:13px; font-weight:700; }.nav-cta span { color:var(--coral); font-size:17px; margin-left:5px; }
.hero { min-height:650px; position:relative; padding:70px 0 76px; overflow:hidden; }.eyebrow,.kicker { text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.2px; }.eyebrow { display:flex; align-items:center; gap:10px; }.eyebrow i { width:8px; height:8px; border-radius:50%; background:var(--coral); animation:pulse 1.8s infinite; }.hero-title { position:relative; z-index:1; margin:72px 0 0; max-width:900px; font-size:clamp(58px, 10.5vw, 145px); line-height:.85; letter-spacing:-.09em; font-weight:900; }.hero-title span,.hero-title em { display:block; }.hero-title em { font-family:Georgia, serif; font-weight:400; letter-spacing:-.09em; margin-left:16%; color:var(--coral); }.hero-bottom { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; margin-top:58px; }.hero-bottom p { max-width:360px; line-height:1.45; font-size:16px; }.round-link { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--acid); font-size:27px; transition:transform .25s; }.round-link:hover { transform:rotate(-15deg) scale(1.08); }.orb { position:absolute; border-radius:50%; filter:blur(.2px); }.orb-one { width:310px;height:310px;right:8%;top:92px;background:var(--acid);animation:float 7s ease-in-out infinite; }.orb-two { width:124px;height:124px;right:31%;bottom:47px;background:#bfd3ff;animation:float 6s ease-in-out -2s infinite; }.marquee { overflow:hidden; background:var(--ink); color:var(--paper); padding:21px 0; white-space:nowrap; }.marquee div { width:max-content; font-size:20px; font-weight:800; letter-spacing:-.5px; animation:scroll 26s linear infinite; }.marquee b { color:var(--acid); margin:0 19px; }
.work { padding:142px 0; }.section-top { display:flex; justify-content:space-between; align-items:start; gap:30px; margin-bottom:48px; }.section-top > p:last-child { max-width:365px; margin:0; line-height:1.45; font-size:16px; }.section-top > a { font-size:14px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px; }.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.project-card { position:relative; min-height:490px; padding:22px; overflow:hidden; background:#ece8df; transition:transform .3s, box-shadow .3s; }.project-card:hover { transform:translateY(-7px); box-shadow:9px 10px 0 var(--ink); }.project-head { display:flex; justify-content:space-between; position:relative; z-index:1; font-size:12px; font-weight:800; }.arrow { font-size:23px; }.project-visual { height:195px; position:relative; display:grid; place-items:center; }.project-visual:before { content:""; width:148px; height:148px; background:var(--coral); position:absolute; transform:rotate(15deg); }.project-visual span { position:absolute; z-index:1; background:var(--ink); }.project-visual span:nth-child(1) { width:104px;height:104px;border-radius:50%; }.project-visual span:nth-child(2) { width:40px;height:125px;border-radius:100px;transform:rotate(-35deg); }.project-visual span:nth-child(3) { width:77px;height:9px;background:var(--paper);transform:rotate(32deg); }.lime .project-visual:before{background:var(--acid);border-radius:50%;}.blue .project-visual:before{background:#a9c7ff;clip-path:polygon(50% 0,100% 100%,0 100%);}.violet .project-visual:before{background:#d0a8fa;border-radius:50% 50% 0 0;}.project-copy { position:relative; z-index:1; }.project-type { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.7px; }.project-copy h2 { margin:0; font-size:clamp(27px,3vw,42px); letter-spacing:-2px; }.project-copy > p:last-of-type { max-width:460px; margin:13px 0 18px; line-height:1.4; font-size:14px; }.tags { display:flex; flex-wrap:wrap; gap:7px; }.tags span { border:1px solid var(--line); border-radius:100px; padding:6px 9px; font-size:11px; }
.about { background:var(--acid); padding:138px 0; }.about-grid { display:grid; grid-template-columns:1fr 2fr; gap:70px; }.about h2 { margin:0; max-width:820px; font-size:clamp(38px,5.7vw,76px); letter-spacing:-.07em; line-height:.95; }.about h2 em { font-family:Georgia,serif; font-weight:400; }.about-text { max-width:540px; margin:32px 0 54px; font-size:17px; line-height:1.5; }.stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(22,22,22,.4); }.stats div { padding:17px 20px 0 0; }.stats div + div { border-left:1px solid rgba(22,22,22,.4); padding-left:20px; }.stats strong { display:block; font-size:35px; letter-spacing:-2px; }.stats span { display:block; margin-top:5px; font-size:11px; line-height:1.25; }
.languages { padding:120px 0 0; }.language-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.language-grid div { padding:26px 24px 28px 0; }.language-grid div + div { padding-left:24px; border-left:1px solid var(--line); }.language-grid strong { display:block; font-size:clamp(25px,3vw,38px); letter-spacing:-1.5px; }.language-grid span { display:block; margin-top:8px; max-width:190px; font-size:13px; line-height:1.35; color:#5f5b56; }
.repos { padding:140px 0; }.repo-list { border-top:1px solid var(--line); }.repo-list a { display:grid; grid-template-columns:75px 1fr 130px 24px; align-items:center; padding:21px 5px; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; }.repo-list a:hover { padding-left:15px; background:#ece8df; }.repo-list span,.repo-list em { font-style:normal; font-size:12px; }.repo-list strong { font-size:22px; letter-spacing:-.7px; }.repo-list b { font-size:20px; font-weight:400; }
footer { background:var(--ink); color:var(--paper); padding:100px 0 28px; }.email { display:block; margin:35px 0 110px; font-size:clamp(48px,8.4vw,111px); font-weight:900; line-height:.84; letter-spacing:-.09em; }.email em { color:var(--coral); font-family:Georgia,serif; font-weight:400; }.email span { color:var(--acid); font-size:.55em; vertical-align:top; }.footer-bottom { display:flex; justify-content:space-between; color:#b8b5ae; font-size:12px; }.footer-bottom div { display:flex; gap:24px; }
.rise { animation:rise .8s both; }.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}.delay-4{animation-delay:.38s}@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(22px) rotate(8deg)}}@keyframes pulse{50%{transform:scale(1.7);opacity:.4}}@keyframes scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){.wrap{width:min(100% - 32px,1220px)}.nav{height:75px}.nav-links{display:none}.hero{min-height:590px;padding-top:47px}.hero-title{margin-top:75px;font-size:clamp(54px,16vw,88px)}.hero-title em{margin-left:5%}.orb-one{width:185px;height:185px;right:-23px;top:150px}.orb-two{right:26%;bottom:77px;width:75px;height:75px}.hero-bottom{margin-top:56px}.hero-bottom p{font-size:14px;max-width:255px}.round-link{width:54px;height:54px}.work,.repos{padding:85px 0}.section-top{margin-bottom:30px}.project-grid{grid-template-columns:1fr}.project-card{min-height:455px}.about{padding:85px 0}.about-grid{grid-template-columns:1fr;gap:28px}.about-text{font-size:16px}.stats strong{font-size:28px}.stats div{padding-right:10px}.stats div + div{padding-left:10px}.repo-list a{grid-template-columns:39px 1fr 20px}.repo-list em{display:none}.repo-list strong{font-size:17px}footer{padding-top:75px}.email{margin-bottom:75px}.footer-bottom{align-items:end}.footer-bottom div{flex-direction:column;gap:8px;text-align:right}}

/* Portrait-led, photo-rich portfolio refresh */
.hero { min-height:690px; }
.hero-title { z-index:2; }.hero-bottom { z-index:3; }
.portrait-card { position:absolute; z-index:2; right:6%; bottom:48px; width:185px; transform:rotate(7deg); background:#fff; padding:9px 9px 12px; box-shadow:10px 12px 0 var(--coral); }
.portrait-card img { display:block; width:100%; height:205px; object-fit:cover; object-position:center 18%; filter:saturate(1.06) contrast(1.02); }
.portrait-card span { display:block; padding:10px 3px 0; font-family:Georgia,serif; font-size:18px; }.portrait-card b { color:var(--coral); font-family:Arial,sans-serif; }
.project-visual { height:205px; overflow:hidden; margin:8px -22px 0; display:block; }.project-visual:before { display:none; }.project-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(22,22,22,.16)); mix-blend-mode:multiply; }.project-visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.2,.8,.2,1); }.project-card:hover .project-visual img { transform:scale(1.09) rotate(-1deg); }.project-copy { padding-top:14px; }
.project-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }.project-actions a,.repo-actions a { border:1px solid var(--ink); border-radius:100px; padding:7px 10px; font-size:11px; font-weight:800; transition:background .2s,color .2s; }.project-actions a:hover,.repo-actions a:hover { background:var(--ink); color:var(--paper); }.repo-row { display:grid; grid-template-columns:75px 1fr 130px auto; align-items:center; gap:10px; padding:17px 5px; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; }.repo-row:hover { padding-left:15px; background:#ece8df; }.repo-row > span,.repo-row em { font-style:normal; font-size:12px; }.repo-row strong { font-size:22px; letter-spacing:-.7px; }.repo-actions { display:flex; gap:7px; }
.arrow,.project-actions a,.repo-actions a,.nav-cta span,.email span { font-family:Arial, Helvetica, sans-serif; font-variant-emoji:text; }
@media(max-width:700px){.hero{min-height:650px}.portrait-card{width:124px;right:8px;bottom:29px;box-shadow:6px 7px 0 var(--coral)}.portrait-card img{height:140px}.portrait-card span{font-size:13px;padding-top:6px}.orb-one{width:165px;height:165px;right:-45px}.project-visual{height:190px}}
@media(max-width:700px){.repo-row{grid-template-columns:33px 1fr;gap:7px;padding:16px 0}.repo-row em{grid-column:2}.repo-actions{grid-column:2;grid-row:3;flex-wrap:wrap}.project-actions a,.repo-actions a{padding:7px 9px}}

@media(max-width:700px){
  .nav { gap:10px; }.wordmark { font-size:23px; }.nav-cta { padding:10px 12px; font-size:12px; white-space:nowrap; }
  .hero { min-height:620px; padding-bottom:42px; }.hero-title { margin-top:61px; font-size:clamp(49px,15vw,74px); line-height:.88; }.hero-bottom { margin-top:38px; align-items:center; }.hero-bottom p { max-width:210px; font-size:13px; }.orb-two { display:none; }
  .marquee { padding:16px 0; }.marquee div { font-size:16px; animation-duration:34s; }.marquee b { margin:0 12px; }
  .section-top { flex-direction:column; gap:12px; margin-bottom:27px; }.section-top > p:last-child { font-size:15px; }.section-top > a { font-size:13px; }
  .project-card { min-height:0; padding:16px; }.project-card:hover { transform:none; box-shadow:none; }.project-visual { height:182px; margin:8px -16px 0; }.project-copy h2 { font-size:30px; }.project-copy > p:last-of-type { font-size:14px; }.project-actions { gap:9px; margin-top:16px; }.project-actions a,.repo-actions a { min-height:40px; display:inline-flex; align-items:center; padding:9px 12px; font-size:12px; }
  .about h2 { font-size:42px; }.stats { grid-template-columns:1fr; }.stats div,.stats div + div { border-left:0; border-bottom:1px solid rgba(22,22,22,.25); padding:14px 0; }.stats div:last-child { border-bottom:0; }
  .languages { padding:78px 0 0; }.language-grid { grid-template-columns:1fr; }.language-grid div,.language-grid div + div { padding:18px 0; border-left:0; border-bottom:1px solid var(--line); }.language-grid div:last-child { border-bottom:0; }.language-grid strong { font-size:28px; }.language-grid span { max-width:none; }
  .repo-list { border-top:0; }.repo-row { grid-template-columns:1fr auto; grid-template-areas:"title number" "language language" "actions actions"; gap:7px; margin-bottom:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }.repo-row:hover { padding:16px; background:#fffdf8; }.repo-row > span { grid-area:number; align-self:start; text-align:right; color:#77726a; }.repo-row strong { grid-area:title; font-size:19px; line-height:1.05; }.repo-row em { grid-area:language; margin:0; }.repo-actions { grid-area:actions; gap:8px; margin-top:6px; }
  .email { font-size:clamp(45px,15vw,68px); line-height:.9; }.footer-bottom { gap:20px; }
}

.toptal-badge { width:min(100%,310px); margin:-66px 0 52px; padding:16px 17px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; background:#f5fbff; color:#204ecf; clip-path:polygon(50% 0,100% 13%,100% 87%,50% 100%,0 87%,0 13%); transition:transform .25s; }.toptal-badge:hover { transform:translateY(-4px); }.toptal-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#25a9ef; color:#fff; font-size:25px; font-weight:900; }.toptal-badge strong,.toptal-badge small { display:block; }.toptal-badge strong { text-transform:uppercase; font-size:12px; letter-spacing:.3px; }.toptal-badge small { margin-top:3px; color:#4c679f; font-size:11px; }.toptal-badge b { border-radius:5px; background:#296bff; color:#fff; padding:7px 9px; font-size:11px; white-space:nowrap; }
@media(max-width:700px){.toptal-badge { margin:-39px 0 42px; width:100%; grid-template-columns:38px 1fr auto; padding:14px; }.toptal-badge b { padding:7px 8px; font-size:10px; }}

.nav-actions { display:flex; align-items:center; gap:8px; }.nav-toptal { padding:8px 10px; border:1px solid #25a9ef; border-radius:100px; background:#f5fbff; color:#204ecf; font-size:11px; font-weight:800; white-space:nowrap; }.nav-toptal:hover { background:#dff5ff; }
@media(max-width:700px){.nav-toptal{display:none}}

.playroom-visual { width:100%; height:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:18px; background:#20201e; }.playroom-visual span { display:grid; place-items:center; border-radius:14px; color:rgba(32,32,30,.66); font-size:13px; font-weight:900; }.playroom-visual span:nth-child(1){background:#ff5f48}.playroom-visual span:nth-child(2){background:#7b61ff}.playroom-visual span:nth-child(3){background:#30b875}.playroom-visual span:nth-child(4){background:#ffd64a}