@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/portfolio-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/portfolio-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/portfolio-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/portfolio-3.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/portfolio-4.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/portfolio-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/portfolio-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/portfolio-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/portfolio-8.ttf) format('truetype');
}

:root{--bg:#121212;--white:#fff;--muted:#b6b6b6;--line:#333;--red:#8e243b;--lime:#d9f24f;--mono:'JetBrains Mono',monospace;--display:'Space Grotesk','Arial Black',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--white);font:15px/1.6 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:6px}::selection{background:var(--lime);color:var(--bg)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);position:relative;z-index:10;background:var(--bg)}.brand{font:bold 28px var(--mono);color:var(--lime);display:flex;align-items:center;gap:26px}.brand span{font:11px var(--mono);color:var(--white)}nav{display:flex;gap:36px}nav a{font-size:13px}nav a:hover,.text-link:hover,footer a:hover{color:var(--lime)}sup{font:10px var(--mono);color:var(--lime)}.hero{height:calc(100svh - 78px);min-height:730px;max-height:1100px;position:relative;overflow:hidden;padding:0 4vw;border-bottom:1px solid var(--line)}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between;font:11px var(--mono);position:absolute;left:4vw;right:4vw;z-index:4}.hero-top{top:26px;color:var(--muted)}.hero-copy{position:relative;padding-top:11vh;z-index:2;width:100%;pointer-events:none}.hero-copy a{pointer-events:auto}h1{font-family:var(--display);font-size:clamp(75px,10.2vw,166px);letter-spacing:-.075em;line-height:.94;margin:0;font-weight:700}.amp{color:var(--lime)}.automation{font-size:.79em;color:var(--red);letter-spacing:-.065em}.semicolon{color:var(--lime);font-size:.72em}.hero-intro{display:flex;align-items:center;gap:22px;margin-top:42px}.hero-intro p{font-size:17px;line-height:1.7;margin:0}.hero-intro p span{display:inline-block;color:var(--muted);font-size:13px;margin-top:12px}.bracket{color:var(--lime);font:65px var(--display)}.text-link{display:inline-flex;gap:55px;margin:30px 0 0 45px;border-bottom:2px solid var(--lime);padding-bottom:8px;font-size:13px}.hero-person{position:absolute;right:5%;top:4%;height:91%;width:43%;z-index:3;pointer-events:none;will-change:transform}.hero-person img,.stage-person img{height:100%;width:100%;object-fit:contain;position:relative;z-index:1}.selection{position:absolute;inset:4% 21% 2% 21%;border:1px solid #737373;z-index:2}.person-label{position:absolute;top:-28px;left:0;white-space:nowrap;font:10px var(--mono);padding:4px 7px;background:var(--bg);border:1px solid #666}.corner{position:absolute;width:10px;height:10px;background:var(--bg);border:2px solid var(--white)}.tl{left:-5px;top:-5px}.tr{right:-5px;top:-5px}.bl{left:-5px;bottom:-5px}.br{right:-5px;bottom:-5px}.person-note{position:absolute;right:10%;top:30%;font:9px var(--mono);writing-mode:vertical-rl;color:var(--muted)}.hero-bottom{bottom:0;height:58px;border-top:1px solid var(--line)}.hero-bottom a{color:var(--lime)}.hero-index{font-family:var(--mono)}.portfolio{height:340vh;position:relative}.project-stage{position:sticky;top:0;height:100svh;min-height:690px;overflow:hidden;border-bottom:1px solid var(--line);padding:26px 4vw 0}.section-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;gap:18px}.section-line h2{margin:0;font:600 15px var(--display);letter-spacing:.02em}.section-line h2 span{font:11px var(--mono);color:var(--muted)}.section-line>span{font:11px var(--mono);color:var(--muted)}.stage-word{position:absolute;top:70px;left:3.5vw;white-space:nowrap;font:700 12vw/1 var(--display);letter-spacing:-.07em;color:#242424;user-select:none}.stage-word span{color:var(--red)}.stage-person{position:absolute;left:-5%;bottom:65px;width:54%;height:77%;pointer-events:none}.stage-person .selection{inset:4% 29% 1% 29%}.core-tag{position:absolute;bottom:12%;left:55%;white-space:nowrap;font:10px var(--mono);padding:6px 10px;border:1px solid var(--lime);background:var(--bg);z-index:3;color:var(--lime)}.project-panels{position:absolute;right:4vw;top:20%;bottom:95px;width:53%;max-width:850px}.project{position:absolute;inset:0;border:2px solid var(--white);background:var(--bg);display:flex;flex-direction:column;opacity:0;transform:translateX(90px);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none;visibility:hidden}.project.active{opacity:1;transform:translateX(0);pointer-events:auto;visibility:visible}.project-meta{display:flex;justify-content:space-between;padding:8px 15px;border-bottom:1px solid var(--line);font:10px var(--mono)}.project-meta span:last-child{color:var(--muted)}.project-title{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 10px}.project-title h3{font:700 clamp(34px,4vw,66px)/1.2 var(--display);letter-spacing:-.055em;margin:0}.project-title>a{font:40px/1 var(--display)}.project-title>a:hover{color:var(--lime)}.project-visual{display:block;overflow:hidden;margin:0 17px;position:relative;flex:1;min-height:120px;border:1px solid var(--line);clip-path:inset(0 0 0 100%);transition:clip-path .65s .13s cubic-bezier(.2,.8,.2,1)}.active .project-visual{clip-path:inset(0)}.project-visual img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.forma-visual img{object-position:center}.visual-caption{position:absolute;bottom:15px;left:18px;font:700 clamp(22px,3vw,44px)/1 var(--display);letter-spacing:-.04em;background:var(--red);padding:9px 12px}.project-description{padding:14px 20px 12px}.project-description h4{font:600 17px var(--display);margin:0 0 5px}.project-description p{font-size:12px;color:#ccc;line-height:1.7;margin:0;max-width:650px}.project-footer{padding:10px 17px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);font:10px var(--mono)}.project-footer>a{color:var(--lime);white-space:nowrap}.project-controls{position:absolute;left:4vw;right:4vw;bottom:22px;display:flex;align-items:center;border-top:1px solid var(--line);padding-top:17px;gap:24px}.project-controls button{background:none;border:0;padding:6px 0;font:11px var(--mono);color:var(--muted)}.project-controls button span{margin-right:10px}.project-controls button[aria-pressed=true]{color:var(--lime)}.track{height:2px;background:var(--line);flex:1;margin-left:8%;overflow:hidden}.track span{display:block;width:100%;height:100%;background:var(--lime);transform:scaleX(var(--progress,0));transform-origin:left}.about,.contact{padding:65px 4vw 75px;border-bottom:1px solid var(--line)}.about-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;padding-top:60px}.about-heading h3,.contact h3{font:700 clamp(50px,6.6vw,105px)/.98 var(--display);letter-spacing:-.06em;margin:0}.about-heading h3 span{color:var(--red)}.about-heading p{max-width:385px;color:#ccc;font-size:14px;margin-top:26px}.config{padding:20px 0;border-top:2px solid var(--white);border-bottom:2px solid var(--white);align-self:center;font:clamp(10px,1.05vw,15px)/2.2 var(--mono)}.config-line{display:flex;white-space:pre-wrap}.line-number{color:#909090;margin-right:22px;user-select:none}.config b{font-weight:400;color:var(--lime)}.config em{font-style:normal;color:#e8a4b4}.config-comment{font-size:11px;color:var(--muted);padding-left:40px;line-height:1.7}.contact-main{padding-top:55px;display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact h3 span{color:var(--lime)}.contact-links p{color:#ccc;font-size:14px;margin:0 0 28px}.glitch{display:flex;justify-content:space-between;position:relative;isolation:isolate;font:700 clamp(24px,3vw,45px)/1.2 var(--display);border:2px solid var(--white);padding:15px 20px;margin-top:12px}.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:15px 20px;opacity:0;pointer-events:none}.glitch::before{color:var(--lime);clip-path:inset(0 0 45% 0)}.glitch::after{color:#de4f6f;clip-path:inset(48% 0 0 0)}.glitch:hover::before,.glitch:focus-visible::before{opacity:1;animation:glitch-a .22s steps(2,end) infinite}.glitch:hover::after,.glitch:focus-visible::after{opacity:1;animation:glitch-b .19s steps(2,end) infinite}.email-address{display:block;font:11px var(--mono);color:var(--muted);margin-top:12px}footer{padding:25px 4vw;display:flex;justify-content:space-between;align-items:center;gap:15px}footer>span,footer>a:last-child{font:11px var(--mono);color:var(--muted)}.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s,transform .65s}.js .reveal.visible{opacity:1;transform:none}@keyframes glitch-a{0%,100%{transform:translateX(-3px)}50%{transform:translate(4px,-1px)}}@keyframes glitch-b{0%,100%{transform:translateX(3px)}50%{transform:translate(-4px,1px)}}
@media(min-width:1600px){.hero-copy{padding-top:13vh}.hero-intro{margin-top:60px}}
@media(max-width:1000px){.brand span{display:none}.hero-person{right:-9%;width:65%;height:83%;top:14%}.hero-copy{padding-top:15vh}.hero-intro{max-width:52%}.hero-intro p{font-size:14px}.hero-intro p span{font-size:11px}.project-panels{width:57%;top:24%}.stage-person{left:-14%;width:65%;height:70%}.project-description p{font-size:11px}.project-footer{font-size:9px}.about-layout{gap:5%}.config{font-size:11px}.contact-main{gap:5%}}
@media(max-width:1099px){html{scroll-padding-top:20px}.nav{height:64px;padding:0 20px}.brand{font-size:23px}nav{gap:18px}nav a{font-size:11px}.hero{min-height:820px;height:calc(100svh - 64px);max-height:1000px;padding:0 20px}.hero-top{left:20px;right:20px;top:19px;font-size:9px}.hero-top span:last-child{display:none}.hero-copy{padding-top:78px}h1{font-size:clamp(56px,14vw,105px);line-height:1.02}.automation{font-size:.79em}.hero-intro{margin-top:25px;max-width:100%;gap:13px}.hero-intro p{font-size:13px}.hero-intro p span{font-size:11px}.bracket{font-size:45px}.text-link{margin:22px 0 0 28px;gap:25px;font-size:12px}.hero-person{top:auto;bottom:60px;right:-5%;height:49%;width:79%;transform:none!important}.hero-person .selection{inset:4% 26% 2% 26%}.person-label{font-size:8px;top:-25px}.person-note{font-size:8px;right:13%}.hero-bottom{left:20px;right:20px;height:45px;font-size:9px}.hero-bottom>a{display:none}.portfolio{height:auto}.project-stage{position:relative;height:auto;min-height:0;padding:30px 20px 35px;overflow:visible}.section-line{padding-bottom:16px}.section-line h2{font-size:13px}.section-line h2 span{font-size:9px}.section-line>span{font-size:10px}.stage-word,.stage-person,.project-controls,.project-counter{display:none}.project-panels{position:static;width:100%;max-width:none;margin-top:28px}.project{position:relative;inset:auto;opacity:1;visibility:visible;transform:none!important;pointer-events:auto;margin-top:28px;transition:none}.project-visual{flex:none;height:auto;aspect-ratio:16/10;clip-path:none!important}.project-meta{font-size:8px;padding:8px 10px}.project-title{padding:9px 12px}.project-title h3{font-size:42px}.project-visual{margin:0 10px}.project-description{padding:15px 12px}.project-description p{font-size:12px}.project-footer{padding:12px 10px;flex-wrap:wrap;font-size:9px}.visual-caption{font-size:30px}.about,.contact{padding:35px 20px 45px}.about-layout,.contact-main{grid-template-columns:1fr;padding-top:30px;gap:30px}.about-heading h3,.contact h3{font-size:64px}.about-heading p{font-size:13px;max-width:420px}.config{font-size:clamp(9px,2.35vw,13px);line-height:2.3;padding:18px 0}.line-number{margin-right:12px}.config-comment{font-size:10px;padding-left:25px}.contact-links p{font-size:13px}.glitch{font-size:29px}footer{padding:22px 20px;flex-wrap:wrap}footer>span{font-size:9px;max-width:155px}footer>a:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-person{transform:none!important}.js .reveal{opacity:1;transform:none}.portfolio{height:auto}.project-stage{position:relative;height:auto;min-height:0}.project-panels{position:relative;top:auto;right:auto;bottom:auto;width:100%;margin:30px 0}.project{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin:25px 0}.project-visual{clip-path:none;flex:none;height:300px}.stage-person,.stage-word,.project-controls,.project-counter{display:none}}
/* Progressive fallback: the complete portfolio is readable without JavaScript. */
html:not(.js) .portfolio{height:auto}html:not(.js) .project-stage{position:relative;height:auto;min-height:0}html:not(.js) .project-panels{position:relative;top:auto;right:auto;bottom:auto;width:100%;margin:30px 0}html:not(.js) .project{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin:25px 0}html:not(.js) .project-visual{clip-path:none;flex:none;height:300px}html:not(.js) .stage-person,html:not(.js) .stage-word,html:not(.js) .project-controls{display:none}
/* A single desktop canvas: the person stays for the entire narrative. */
.canvas-core{display:none}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.js .scroll-canvas{position:relative;height:600svh}
.js .canvas-screen{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;border-bottom:1px solid var(--line)}
.js .canvas-core{display:block;position:absolute;height:91%;width:38%;left:31%;bottom:3%;z-index:4;pointer-events:none}
.js .canvas-core img{display:block;height:100%;width:100%;object-fit:contain;position:relative;z-index:1}
.js .canvas-core .selection{inset:3% 23% 1%}
.js .canvas-screen>.hero,.js .canvas-screen>.portfolio,.js .canvas-screen>.about{position:absolute;inset:0;height:100%;min-height:0;max-height:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,visibility .45s;transform:none;border:0}
.js .canvas-screen>.scene-visible{opacity:1;visibility:visible;pointer-events:auto}
.js .hero-person,.js .stage-person,.js .stage-word{display:none}
.js .hero{padding:0 4vw;overflow:visible}
.js .hero-top{top:25px}
.js .hero-copy{padding-top:14vh;z-index:2}
.js .hero h1{font-size:clamp(65px,10.5vw,175px);line-height:.98}
.js .hero .automation{font-size:.79em}
.js .hero-intro{position:absolute;top:49vh;left:0;width:29%;max-width:none;gap:10px;margin:0}
.js .hero-intro p{font-size:clamp(11px,1vw,16px)}
.js .hero-intro p span{font-size:clamp(10px,.85vw,13px)}
.js .hero-intro .bracket{font-size:40px}
.js .text-link{position:absolute;top:74vh;left:0;margin:0;gap:30px}
.js .hero::after{content:'САЙТЫ / ИНТЕГРАЦИИ / АВТОМАТИЗАЦИЯ';position:absolute;right:4vw;top:60%;width:24%;font:12px/2 var(--mono);color:var(--lime);border-top:2px solid var(--white);padding-top:20px}
.js .hero-bottom{height:46px;font-size:10px}
.js .project-stage{position:relative;height:100%;min-height:0;overflow:visible;border:0}
.js .project-panels{inset:0;width:100%;max-width:none;pointer-events:none}
.js .project{border:0;background:none;inset:0;display:block;pointer-events:none;transform:none;transition:opacity .4s,visibility .4s}
.js .project.active{pointer-events:none}
.js .project-meta{position:absolute;left:4vw;top:17%;width:27%;border-top:2px solid var(--white);padding:14px 0;flex-wrap:wrap;gap:10px}
.js .project-title{position:absolute;left:4vw;top:25%;width:28%;padding:0;display:block;transform:translateX(-35px);transition:transform .6s}
.js .project.active .project-title{transform:none}
.js .project-title h3{font-size:clamp(40px,5.2vw,90px);line-height:1.05}
.js .project-title>a{display:inline-block;margin-top:14px;color:var(--lime);pointer-events:auto}
.js .project-visual{position:absolute;right:4vw;top:21%;width:28%;height:34%;min-height:0;margin:0;flex:none;border:2px solid var(--white);pointer-events:auto}
.js .project-description{position:absolute;right:4vw;top:58%;width:28%;padding:0;transform:translateX(35px);transition:transform .65s}
.js .project.active .project-description{transform:none}
.js .project-description h4{font-size:clamp(15px,1.5vw,23px);line-height:1.3}
.js .project-description p{font-size:clamp(11px,.95vw,14px);line-height:1.75;margin-top:12px}
.js .project-footer{position:absolute;left:4vw;top:65%;width:27%;padding:15px 0;flex-direction:column;align-items:flex-start;font-size:11px;gap:20px}
.js .project-footer>a{pointer-events:auto;border-bottom:2px solid var(--lime);padding-bottom:5px}
.js .visual-caption{font-size:clamp(18px,2vw,32px);left:10px;bottom:10px}
.js .project-controls{bottom:20px}
.js .about{padding:26px 4vw 0}
.js .about-layout{display:block;padding:0}
.js .about-heading{position:absolute;left:4vw;top:24%;width:27%}
.js .about-heading h3{font-size:clamp(40px,5vw,80px)}
.js .about-heading p{font-size:clamp(11px,1vw,15px);line-height:1.8}
.js .config{position:absolute;right:4vw;top:26%;width:28%;font-size:clamp(9px,.8vw,13px);line-height:2.2;overflow-wrap:anywhere}
.js .config-line{white-space:pre-wrap}.js .config-line>span:last-child{min-width:0}
.js .line-number{margin-right:10px}.js .config-comment{padding-left:0;font-size:10px}
.js .about .reveal{opacity:1;transform:none}
}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){.js .canvas-screen{min-height:0}}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){.js .nav{position:absolute;top:0;left:0;right:0}.js .hero-top{top:96px}.js .hero-copy{padding-top:19vh}.js .hero .automation{font-size:1.03em}}
/* Natural vertical flow around one sticky, full-height person. */
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.js .scroll-canvas{height:auto}
.js .canvas-screen{position:relative;top:auto;height:auto;overflow:visible;border:0;display:flow-root}
.js .canvas-core{position:sticky;top:0;left:auto;margin-left:31%;height:100svh;width:38%;bottom:auto;margin-bottom:-100svh;padding:6svh 0 3svh}
.js .canvas-core .selection{inset:8% 23% 4%}
.js .canvas-screen>.hero,.js .canvas-screen>.portfolio,.js .canvas-screen>.about{position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}
.js .canvas-screen>.hero{height:100svh;border-bottom:1px solid var(--line)}
.js .canvas-screen>.portfolio{height:auto}
.js .project-stage{height:auto;padding:0;position:relative}
.js .project-stage>.section-line{position:absolute;top:26px;left:4vw;right:4vw;z-index:2}
.js .project-panels{position:relative;inset:auto;width:100%;height:auto;margin:0}
.js .project{position:relative;inset:auto;height:100svh;opacity:1;visibility:visible;transform:none;transition:none;border-bottom:1px solid var(--line)}
.js .project-visual{clip-path:none;transition:none}
.js .project-title,.js .project-description{transform:none;transition:none}
.js .project-controls{display:none}
.js .canvas-screen>.about{height:100svh;border-bottom:1px solid var(--line)}
}
.canvas-person-rail{display:none}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
/* The rail ends with About. Its sticky child cannot follow into Contacts. */
.js .canvas-person-rail{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.js .canvas-person-rail .canvas-core{margin-bottom:0}
}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
/* Keep the intro below the full two-line heading at every desktop ratio. */
.js .hero-copy{padding-top:clamp(125px,18svh,200px)}
.js .hero h1{font-size:min(10.5vw,18svh);line-height:.98}
.js .hero-intro{position:relative;top:auto;left:auto;margin-top:32px;width:29%;max-width:29%}
.js .text-link{top:auto;bottom:auto;position:relative;margin:26px 0 0 0}
.js .project-visual img{object-fit:contain;background:#181818}
}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){.js .canvas-person-rail .canvas-core{padding-top:max(6svh,80px)}}
/* Real site screenshots keep their full composition on small screens too. */
.project-visual img{object-fit:contain;background:#181818}
/* The sprite is drawn at a stable shoe anchor, so pose changes do not move the body. */
.character-motion{display:none;position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.canvas-core.motion-ready>img{display:none}
.canvas-core.motion-ready>.character-motion{display:block}
}
@media(max-width:1099px) and (prefers-reduced-motion:no-preference){
.hero-person.motion-ready>img{display:none}
.hero-person.motion-ready>.character-motion{display:block}
}

/* Low-contrast moving city texture, behind every interactive layer. */
.ambient-video{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#121212}
.ambient-video video{display:block;width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.45) brightness(.75)}
body>header,body>main,body>footer{position:relative;z-index:1}
.contact,footer{background:#121212}
.background-toggle{border:1px solid #555;background:#121212;color:#b6b6b6;padding:7px 10px;font:10px var(--mono);border-radius:0}
.background-toggle[hidden]{display:none}.background-toggle:hover{color:#d9f24f;border-color:#d9f24f}
@media(prefers-reduced-motion:reduce){.ambient-video{display:none}}
/* Reading column on the left; the character travels from centre to the right. */
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.js .canvas-person-rail .canvas-core{transform:translate3d(var(--character-x,0vw),0,0);will-change:transform}
.js .canvas-core>img{transform-origin:50% 96%;will-change:transform}
.js .hero h1{font-size:min(8vw,12svh);letter-spacing:-.055em}
.js .hero .automation{font-size:.72em;letter-spacing:-.055em}
.js .hero-intro{width:43%;max-width:43%}
.js .hero::after{display:none}
.js .hero-copy{padding-top:max(145px,20svh)}
.js .project{height:auto;min-height:100svh;padding:105px 43vw 60px 4vw;display:flex;flex-direction:column;gap:16px;pointer-events:auto}
.js .project-meta,.js .project-title,.js .project-visual,.js .project-description,.js .project-footer{position:static;inset:auto;width:100%;margin:0;transform:none}
.js .project-meta{order:0;padding:8px 0}
.js .project-title{order:1;display:flex;align-items:center;justify-content:space-between}
.js .project-title h3{font-size:clamp(35px,4vw,65px)}
.js .project-title>a{margin:0;font-size:35px}
.js .project-visual{order:2;flex:none;height:auto;aspect-ratio:16/10;min-height:0}
.js .project-description{order:3}
.js .project-description h4{font-size:20px}
.js .project-description p{font-size:14px;line-height:1.75}
.js .project-footer{order:4;flex-direction:row;font-size:10px;padding:12px 0;gap:12px;flex-wrap:wrap}
.js .canvas-screen>.about{height:auto;min-height:100svh;padding:70px 43vw 70px 4vw}
.js .about .section-line{margin-bottom:35px}
.js .about .section-line h2 span{display:none}
.js .about-heading,.js .config{position:static;width:100%;inset:auto}
.js .about-heading h3{font-size:clamp(35px,4.5vw,70px)}
.js .about-heading p{max-width:none;font-size:14px}
.js .config{margin-top:30px;font-size:clamp(10px,1vw,14px)}
.js .hero-bottom>a{margin-left:auto;margin-right:15px}
.js .hero-index{display:none}
}
.ambient-video video{opacity:.19}
.ambient-video video{opacity:.12}
/* About: editorial streetwear poster, without code-editor furniture. */
.about-street{position:relative;isolation:isolate}
.street-top{display:flex;justify-content:space-between;gap:15px;border-bottom:2px solid #fff;padding-bottom:15px;font:600 10px Inter,sans-serif;letter-spacing:.02em}
.street-title{font:700 clamp(64px,7vw,115px)/.88 var(--display);letter-spacing:-.065em;margin:40px 0 22px;color:#fff}
.street-title>span{color:var(--lime)}
.street-stamp{display:inline-block;background:var(--red);padding:8px 13px;transform:rotate(-3deg);font:700 12px Inter,sans-serif;letter-spacing:.015em;margin:2px 0 28px}
.street-lead{font:600 clamp(20px,2vw,30px)/1.25 var(--display);letter-spacing:-.025em;margin:0 0 23px}
.street-lead strong{font-weight:600;color:var(--lime)}
.street-bio{font:14px/1.85 Inter,sans-serif;color:#dedede;max-width:590px;margin:0 0 25px}
.street-skills{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid #666;border-bottom:1px solid #666;padding:9px 0;margin-bottom:26px}
.street-skills span{font:600 11px Inter,sans-serif;padding:7px 13px 7px 0;margin-right:13px;text-transform:uppercase}
.street-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;font:700 14px var(--display);border-bottom:2px solid var(--lime);padding:0 0 13px}
.street-contact span{font-size:25px;color:var(--lime)}
.street-contact:hover{color:var(--lime)}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.js .canvas-screen>.about-street{padding:65px 43vw 65px 4vw;min-height:110svh}
.js .about-street .street-title{font-size:clamp(64px,7vw,115px)}
}
@media(max-width:1099px){
.about-street{padding:40px 20px 50px}.street-top{font-size:9px;align-items:center}.street-top span:first-child{max-width:150px}
.street-title{font-size:clamp(62px,17vw,110px);margin-top:35px}.street-lead{font-size:23px}.street-bio{font-size:13px}.street-skills span{font-size:10px}.street-contact{font-size:13px}
}
.hero-right{display:none}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
.js .hero-right{display:block;position:absolute;right:4vw;top:25%;width:25%;z-index:3;transform:translateY(calc(var(--hero-exit,0) * -40px));opacity:calc(1 - var(--hero-exit,0));pointer-events:auto}
.hero-right-caption{display:block;font:600 10px Inter,sans-serif;border-top:2px solid #fff;padding-top:15px;margin-bottom:27px}
.hero-right-type{font:700 clamp(35px,4.1vw,78px)/1.05 var(--display);letter-spacing:-.055em}
.hero-right-type>span{display:block}.hero-right-type>span:nth-child(2){color:var(--lime)}.hero-right-type>span:nth-child(3){color:#d28294}.hero-right-dot{color:var(--lime)}
.hero-right p{font:13px/1.8 Inter,sans-serif;color:#ddd;margin:25px 0}
.hero-right>a{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--lime);padding-bottom:12px;font:600 10px Inter,sans-serif}
.hero-right>a>span{font:30px var(--display);color:var(--lime)}
}
.techwear-poses{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1;transform-origin:50% 95%}
.pose-ready>img{display:none!important}
/* Full video sequence, decoded from the supplied clip at 30 fps. */
.character-video-canvas{display:none;position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.character-video-ready>img{display:none!important}
.character-video-ready>.character-video-canvas{display:block}

/* Keep the urban scene quiet behind readable text and the black shell. */
.ambient-video video{opacity:.16;filter:saturate(.25) brightness(.65)}

/* Warm city architecture: restrained contrast behind the portfolio. */
.ambient-video video{opacity:.13;filter:saturate(.65) brightness(.85)}

/* Phone edition: a vertical poster, then a full-width editorial project feed. */
@media(max-width:1099px){
 html{scroll-padding-top:24px}
 .nav{height:68px;padding:0 20px;gap:18px}
 .brand{font-size:25px;white-space:nowrap}
 nav{gap:16px}nav a{font-size:11px;min-height:44px;display:flex;align-items:center;gap:3px}
 .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;padding:0 20px;overflow:hidden}
 .hero-top{position:relative;inset:auto;padding:20px 0 0;font-size:9px}
 .hero-top span:last-child{display:block;font-size:8px}
 .hero-copy{display:contents;padding:0;pointer-events:auto}
 .hero h1{order:1;margin:30px 0 24px;font-size:clamp(68px,20vw,125px);letter-spacing:-.065em;line-height:.91;position:relative;z-index:2}
 .hero .automation{display:inline-block;font-size:.50em;letter-spacing:-.055em;white-space:nowrap}
 .hero .semicolon{font-size:.45em}
 .hero-person{order:2;position:relative;inset:auto;width:100%;height:clamp(420px,122vw,650px);margin:0;transform:none!important;isolation:isolate}
 .hero-person::before{content:'';position:absolute;z-index:0;left:13%;right:13%;top:14%;bottom:13%;background:var(--red);opacity:.7;clip-path:polygon(0 0,100% 0,100% 83%,70% 100%,0 100%)}
 .hero-person .selection{inset:4% 17% 2%;border-color:#888}
 .hero-person .person-label{left:-1px;top:-22px;font-size:8px}
 .hero-person .person-note{right:1%;top:30%;font-size:8px;letter-spacing:.09em}
 .hero-person img,.hero-person .character-video-canvas{position:relative;height:100%;width:100%;object-fit:contain}
 .hero-intro{order:3;margin:30px 0 0;max-width:none;width:100%;gap:12px;align-items:flex-start}
 .hero-intro .bracket{font-size:40px;line-height:1.2}
 .hero-intro p{font-size:15px;line-height:1.6}
 .hero-intro p span{font-size:12px;margin-top:12px}
 .hero .text-link{order:4;display:flex;justify-content:space-between;margin:25px 0 28px;padding:14px 0;min-height:48px;font-size:14px;border-top:1px solid #555;border-bottom:2px solid var(--lime)}
 .hero-bottom{order:5;position:relative;inset:auto;height:auto;min-height:48px;font-size:9px}
 .hero-index{color:#b6b6b6}.hero-right{display:none}
 .project-stage{padding:40px 20px 0}
 .project-stage>.section-line{padding-bottom:19px}
 .project-counter{display:block;font-size:10px}
 .project-panels{margin:0}
 .project{margin:0;padding:32px 0 35px;background:transparent;border:0;border-bottom:1px solid #555;gap:0}
 .project-meta{padding:0 0 12px;border:0;font-size:8px;gap:12px;line-height:1.7}
 .project-title{padding:0 0 20px;gap:12px}
 .project-title h3{font-size:clamp(38px,11vw,62px);letter-spacing:-.05em}
 .project-title>a{display:flex;align-items:center;justify-content:center;border:1px solid #666;min-width:44px;min-height:44px;font-size:28px;color:var(--lime)}
 .project-visual{margin:0;width:100%;aspect-ratio:16/10;border:1px solid #666;min-height:0}
 .project-description{padding:20px 0 18px}
 .project-description h4{font-size:20px;line-height:1.25;margin-bottom:10px}
 .project-description p{font-size:13px;line-height:1.8;color:#ccc}
 .project-footer{padding:13px 0 0;align-items:stretch;flex-direction:column;gap:14px;font-size:9px}
 .project-footer>a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:11px 14px;background:var(--red);color:#fff;border:0;font:600 13px Inter,Arial,sans-serif}
 .about-street{padding:48px 20px 45px;background:rgba(18,18,18,.65)}
 .street-top{font-size:8px;padding-bottom:16px}
 .street-title{font-size:clamp(68px,20vw,125px);margin:34px 0 24px}
 .street-stamp{font-size:10px;padding:8px 12px;margin-bottom:28px}
 .street-lead{font-size:25px;line-height:1.2;max-width:350px}
 .street-bio{font-size:14px;line-height:1.85}
 .street-skills{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border-bottom:0}
 .street-skills span{font-size:10px;padding:15px 0;margin:0;border-bottom:1px solid #444}
 .street-contact{min-height:52px;font-size:12px}
 .contact{padding:40px 20px 42px}.contact-main{padding-top:32px;gap:30px}
 .contact h3{font-size:clamp(58px,17vw,100px)}
 .contact-links p{font-size:13px;line-height:1.8}
 .glitch{font-size:29px;padding:18px 16px;min-height:76px}
 footer{padding:24px 20px;display:grid;grid-template-columns:1fr auto;gap:22px 12px}
 footer .background-toggle{grid-column:1/-1;justify-self:start;min-height:40px}
 footer>.brand{font-size:23px}footer>span{grid-column:1;grid-row:3;max-width:230px;line-height:1.6}
 footer>a:last-child{grid-column:2;grid-row:3;min-height:44px;display:flex;align-items:center}
 .ambient-video video{opacity:.09}
}
@media(max-width:359px){.nav{padding:0 16px}nav{gap:11px}nav a{font-size:10px}.hero,.project-stage,.about-street,.contact{padding-left:16px;padding-right:16px}.hero-top span:last-child{display:none}.hero-person{height:410px}.hero-intro p{font-size:13px}}
@media(max-width:1099px){.street-title{font-size:clamp(58px,18.5vw,110px)}.portfolio{background:rgba(18,18,18,.5)}}
/* Language controls stay reachable at every viewport size. */
.language-switch{display:flex;align-items:center;gap:4px;flex:none;font:11px var(--mono)}
.language-switch button{border:0;background:none;color:#aaa;padding:10px 7px;min-height:44px;cursor:pointer}
.language-switch button[aria-pressed=true]{color:#fff;border-bottom:2px solid var(--lime)}
.language-switch>span{color:#555}
.nav nav{margin-left:auto}.nav{gap:28px}
@media(max-width:1099px){
 .nav{height:auto;min-height:102px;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding-top:6px;padding-bottom:7px}
 .nav .brand{grid-column:1;grid-row:1}.language-switch{grid-column:2;grid-row:1}
 .nav nav{grid-column:1/-1;grid-row:2;margin:0;justify-content:space-between;gap:12px}
 .nav nav a{min-height:36px;font-size:12px}
 html[lang=en] .street-title{font-size:clamp(45px,14vw,88px)}
 html[lang=en] .contact h3{font-size:clamp(45px,13.5vw,85px)}
}
@media(min-width:768px) and (max-width:1099px){
 .nav{display:flex;min-height:76px;padding:0 32px;gap:25px}
 .nav nav{margin-left:auto;gap:25px}.brand span{display:none}
 .hero{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;padding:0 32px}
 .hero-top{grid-column:1/-1;grid-row:1;padding-top:24px}
 .hero h1{grid-column:1;grid-row:2;align-self:end;margin:0 0 25px;font-size:clamp(78px,10vw,108px);padding-top:80px}
 .hero-person{grid-column:2;grid-row:2/5;width:100%;height:580px;margin:35px 0 28px}
 .hero-intro{grid-column:1;grid-row:3;margin:0;align-self:start}
 .hero-intro p{font-size:15px}.hero-intro .bracket{display:none}
 .hero .text-link{grid-column:1;grid-row:4;align-self:start;margin:12px 0 32px}
 .hero-bottom{grid-column:1/-1;grid-row:5;width:100%}
 .project-stage{padding:48px 32px 0}.project-panels{display:block;max-width:860px;margin:auto}
 .project{padding-top:38px;padding-bottom:45px}.project-title h3{font-size:60px}
 .project-description h4{font-size:26px}.project-description p{font-size:15px;max-width:680px}
 .project-meta,.project-footer{font-size:11px}.project-footer{flex-direction:row;align-items:center;justify-content:space-between}
 .project-footer>a{min-width:180px}
 .about-street{padding:55px 32px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
 .street-top{grid-column:1/-1}.street-title{grid-column:1;grid-row:2/4;font-size:clamp(64px,9vw,88px);align-self:center}
 .street-stamp{grid-column:2;justify-self:start;margin-top:35px}.street-lead{grid-column:2;font-size:25px}
 .street-bio{grid-column:1/-1;max-width:740px;font-size:15px;margin-top:15px}
 .street-skills{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.street-contact{grid-column:1/-1}
 .contact{padding:48px 32px}.contact-main{grid-template-columns:1fr 1fr;gap:35px}
 .contact h3{font-size:clamp(58px,8vw,86px)}.glitch{font-size:27px}
 html[lang=en] .street-title{font-size:clamp(46px,7vw,72px)}
 html[lang=en] .contact h3{font-size:clamp(46px,6.5vw,69px)}
}
@media(min-width:1100px) and (max-width:1279px){
 .brand span{display:none}.nav{gap:20px}nav{gap:24px}
 .js .hero-right{width:25%;top:27%}.hero-right-type{font-size:40px}
 .js .hero-intro{width:38%;max-width:38%}.hero-intro p{font-size:13px}
 .js .canvas-core .selection{inset:8% 24% 4%}
}
@media(min-width:1100px){html[lang=en] .street-title,html[lang=en] .about-street .street-title{font-size:clamp(58px,5.5vw,94px)}html[lang=en] .contact h3{font-size:clamp(54px,5.2vw,85px)}}
@media(max-width:359px){.nav{padding-left:16px;padding-right:16px}.language-switch button{padding:8px 6px}.hero-intro .bracket{display:none}}

@media(min-width:1100px) and (prefers-reduced-motion:no-preference){.js .canvas-person-rail .canvas-core{transform:translate3d(var(--character-x,0vw),var(--character-y,0px),0) rotate(var(--character-tilt,0deg));transform-origin:50% 90%}}
.project-visual img{object-fit:cover;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.project-visual:hover img{transform:scale(1.035)}}
.project-visual,.js .project-visual{aspect-ratio:3/2}
.project-visual img,.js .project-visual img{object-fit:cover}