@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');

:root {
	--transition:all .3s ease-in-out;

	--container-width:1600px;
	--content-padding:0;

	--main-font-color:#000;
	--link-font-color:#000;
	--link-font-color-inverted:#FFF;
	--border-color:#101010;

	--section-margin:35px;

	--sep-padding:35px;
	--sep-width:min(50%, 500px);
	--sep-height:6px;

	--clipping:polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
	--clipping-s:polygon(3px 0%, 100% 0%, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0% 100%, 0% 3px);

	--clipping-hide-top:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
	--clipping-hide-middle:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
	--clipping-showall:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

	/* project settings */
		--project-gap-row:30px;
		--project-gap-column:40px;
		--project-grid:3;
		--project-figure-ratio:3/2;
		--project-figure-border-width:12px;
		--project-figure-border-width-hover:2px;
		--clipping-figure-outer:polygon(calc( var(--project-figure-border-width) * 1.3) 0%, 100% 0%, 100% calc(100% - var(--project-figure-border-width) * 1.3), calc(100% - var(--project-figure-border-width) * 1.3) 100%, 0% 100%, 0% calc( var(--project-figure-border-width) * 1.3) );
		--clipping-figure-outer-none:polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0% );

	/* gallery settings */
		--gallery-animation-dur:.7s;
		--gallery-close-size:50px;
		--slider-width:calc(var(--container-width) * .85);
		--slider-ratio:16/9;
		--slider-arrow-size:35px;
		--slider-corner:40px;
		--slider-clipping:polygon(var(--slider-corner) 0%, 100% 0%, 100% calc(100% - var(--slider-corner)), calc(100% - var(--slider-corner)) 100%, 0% 100%, 0% var(--slider-corner));
		--slider-dot-size:20px;

	/* icons */
		--ico-link:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m9.5 7.5 1-1a2.828 2.828 0 1 1 4 4l-1 1m-3 3-1 1a2.828 2.828 0 1 1-4-4l1-1M7.5 13.5l5-5"/></g></svg>');
		--ico-code:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m12.5 3.5-4 14M6.5 12.5l-4-4 4-4M14.5 16.5l4-4-4-4"/></g></svg>');
		--ico-tool:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9 15 7-7a1.414 1.414 0 0 0-2-2L3.5 16.5h7L7 13"/></svg>');
		--ico-gallery:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" transform="translate(3 3)"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5.5h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2z"/><path d="m14.5 10.5-3-3-3 2.985M12.5 14.5l-9-9-3 3"/></g><circle cx="11" cy="4" r="1" fill="currentColor"/></g></svg>');
		--ico-close:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 15.5-10-10zM15.5 5.5l-10 10"/></g></svg>');
		--ico-right:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m13.5 6.497 4 4.002-4 4.001M4.5 10.5h13"/></g></svg>');
		--ico-left:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M7.499 6.497 3.5 10.499l4 4.001M16.5 10.5h-13"/></g></svg>');
}

/* common */
	html {font-size:16px; scroll-behavior: smooth;}
	body {font-family:'Khand', Arial, sans-serif; font-size:1.125rem; line-height:1.25; margin:0 auto; color:var(--main-font-color);}

	body * {box-sizing:border-box; position:relative;}
	a {text-decoration:none; cursor:pointer; transition:var(--transition); color:var(--link-font-color)}
	img {max-width:100%; border:0;}
	figure {margin:0; padding:0;}

	h1, h2, h3, h4 {margin:0; line-height:1.25;}
	h1 {text-align:center; font-size:3.5rem; font-weight:700;}
	h2 {text-align:center; font-size:1.5rem; font-weight:500;}
	h3 {text-align:center; font-size:1.5rem; font-weight:600; }
	h4 {font-size:1.25rem; font-weight:600; }

	.container {max-width:var(--container-width); margin-right:auto; margin-left:auto;}

	svg {fill:currentColor; width:100%;}
	
/* header + footer + intro + main */
	.header-inner, #intro, main
	{margin-top:var(--section-margin); margin-bottom:var(--section-margin);}

	header h1>span {display:inline-block; animation-duration:.5s; animation-fill-mode:forwards; }
	header h1>span:nth-child(odd) {animation-name:h1-ani-up;}
	header h1>span:nth-child(even) {animation-name:h1-ani-down;}
	@keyframes h1-ani-up {
		from 	{transform:translateY(20px);}
		to 	{transform:translateY(0);}
	}
	@keyframes h1-ani-down {
		from 	{transform:translateY(-20px);}
		to 	{transform:translateY(0);}
	}

	#intro { padding:var(--sep-padding) 0; 
		animation-duration:1.2s; animation-fill-mode:forwards; animation-delay:.25s; animation-name:intro-ani; clip-path:var(--clipping-hide-middle);}
	#intro:before, #intro:after {
		content:''; position:absolute; background:var(--border-color);
		width:var(--sep-width); height:var(--sep-height);
		clip-path:var(--clipping);
		left:50%; transform:translateX(-50%);
		
	}
	#intro:before {top:calc( 0px - var(--sep-height) / 2);}
	#intro:after {bottom:calc( 0px - var(--sep-height) / 2);}
	@keyframes intro-ani {
		from 	{clip-path:var(--clipping-hide-middle);}
		to 	{clip-path:var(--clipping-showall);}
	}

	main {animation-duration:.8s; animation-fill-mode:forwards; animation-delay:.5s; animation-name:main-ani; clip-path:var(--clipping-hide-top);}
	@keyframes main-ani {
		from 	{clip-path:var(--clipping-hide-top);}
		to 	{clip-path:var(--clipping-showall);}
	}

	footer {padding:var(--section-margin) 0; font-size:1rem;}
	.footer-inner {display:flex; justify-content:space-between;}
	.footer-inner .contact {display:flex; gap:6px;}
	.footer-inner .contact>a {width:30px; }


/* projects */
	.select-project-cat {margin-bottom:var(--section-margin); margin-top:calc( var(--section-margin) /3 ); 
		display:flex; justify-content:center; gap:6px;
	}
	.select-project-cat>a {line-height:1; padding:6px 16px 3px;}
	.select-project-cat>a:before {position:absolute; z-index:-1;
		content:''; width:0; height:0; 
		left:50%; top:50%; transform:translate(-50%, -50%);
		clip-path:var(--clipping); background-color:var(--border-color);
		transition:var(--transition);
	}
	.select-project-cat>a.on { color:#FFF; }
	.select-project-cat>a.on:before { width:100%; height:100%; }

	.projects {display:flex; flex-wrap:wrap;
		column-gap:var(--project-gap-column); row-gap:var(--project-gap-row);}
	.project {overflow:hidden;
		width:calc( (100% - var(--project-gap-column) * (var(--project-grid) - 1)) / var(--project-grid) );}
	.project.off {display:none;}
	.project * {transition:var(--transition);}

	.project>figure {width:100%;  aspect-ratio:var(--project-figure-ratio); margin-bottom:10px; clip-path:var(--clipping-figure-outer);
		background-image: url(data:image/png;base64,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);
	}
	.project>figure>a {width:100%; height:100%; display:block;}
	.project>figure:after {content:''; position:absolute; z-index:8; width:100%; height:100%; left:0; top:0; border:solid var(--border-color) var(--project-figure-border-width); box-sizing:border-box; transition:var(--transition); pointer-events:none;}

	.project>figure:hover {clip-path:var(--clipping-figure-outer-none);}
	.project>figure:hover:after {border-width:var(--project-figure-border-width-hover);}

	.project>figure img {mix-blend-mode:saturation; filter:grayscale(70%);
		position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - var(--project-figure-border-width-hover) *2 + 2px); height:calc(100% - var(--project-figure-border-width-hover) *2 + 2px);*display:block; object-fit:cover; z-index:1;}
	.project>figure:hover img {mix-blend-mode:normal; filter:grayscale(0%);}
	
	.project>figure[class^='goto-']>a:after {content:''; position:absolute;
		z-index:3; width:30px; height:30px; transition:var(--transition);
		right:calc( var(--project-figure-border-width-hover) + 4px ); top:calc( var(--project-figure-border-width-hover) + 4px );
		background-repeat:no-repeat; background-color:rgba(255,255,255,.7); background-position:center center; background-size:80%; border-radius:50%;
		filter:invert(1);
		transform: scale(0.2, 1) skew(0deg, 20deg); opacity:0;
		}
	.project>figure[class^='goto-']:hover>a:after {
		transform:none; opacity:1;
	}
	.project>figure.goto-link>a:after {background-image:var(--ico-link);}
	.project>figure.goto-gallery>a:after {background-image:var(--ico-gallery);}


	.project>article a {display:inline-block;}
	.project>article a:after {position:absolute; content:''; left:50%; bottom:0; transform:translateX(-50%); width:0; height:2px; background:var(--border-color); transition:var(--transition);}
	.project>article a:hover:after {width:100%;}

	div[class^='line'] {padding-left:28px; margin-top:6px;}
	div[class^='line']:before {position:absolute; left:0; top:0; width:21px; height:21px; content:''; background-repeat:no-repeat}
	div.line-link:before {background-image:var(--ico-link);}
	div.line-code:before {background-image:var(--ico-code);}
	div.line-tool:before {background-image:var(--ico-tool);}
	div.line-gallery:before {background-image:var(--ico-galler);}
	
	div:where(.line-code, .line-tool)>span {display:inline-block;}
	div:where(.line-code, .line-tool)>span:not(:last-child) {padding-right:22px; margin-right:5px;}
	div:where(.line-code, .line-tool)>span:not(:last-child):after {
		position:absolute; content:''; right:0; top:50%; transform:translateY(-100%);
		width:16px; height:3px; background:var(--border-color);
		clip-path:var(--clipping-s);}

/* gallery */
	.close-gallery {position:absolute; z-index:30; top:2vw; right:2vw; width:var(--gallery-close-size); height:var(--gallery-close-size); background:no-repeat var(--ico-close);}
	.gallery {display:none; position:fixed; width:100vw; height:100vh; z-index:20; background:rgba(255,255,255,.9); left:0; top:0; animation-fill-mode:forwards; animation-duration:var(--gallery-animation-dur);}
	.gallery.on {display:flex; justify-content:center; align-items:center; animation-name:gallery-in;}
	.gallery.fadeout {animation-name:gallery-out;}
	@keyframes gallery-in {
		from {
			clip-path: polygon(100% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
		}
		to {
			clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 0%, 100% 0%, 100% 0%, 0% 100%, 100% 100%);
		}
	}
	@keyframes gallery-out {
		from {
			clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 0%, 100% 0%, 100% 0%, 0% 100%, 100% 100%);
		}
		to {
			clip-path: polygon(100% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
		}
	}

/* gallery slider */
	.slider {width:var(--slider-width); aspect-ratio:var(--slider-ratio);  display:none; }
	.slider.on {display:block;}
	.slider :is(.slides, .slide, .slide>img) {width:100%; height:100%;}
	.slider .slides {clip-path:var(--slider-clipping);}
	.slider .slide {position:absolute; left:0; top:0;  z-index:-1; opacity:0; animation-fill-mode:forwards; animation-duration:.5s;}
	.slider .slide.on {z-index:1; opacity:1;}
	.slider .slide.next {z-index:2; opacity:1; animation-name:next-slide;}
	.slider .slide.leaving {animation-name:leaving-slide;}
	@keyframes next-slide {
		from {
			opacity:0;
			transform:translateX(50%);
			clip-path: polygon(100% 0%, 100% 100%, 78% 100%, 100% 0%);
		}
		to {
			opacity:1;
			transform:translateX(0);
			clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);
		}
	}
	@keyframes leaving-slide {
		from {
			opacity:1;
		}
		to {
			opacity:0;
		}
	}

	.slider .slide>img {object-fit:contain; }

	.slider a[class^='btn-'] {position:absolute; top:50%; transform:translateY(-50%); width:var(--slider-arrow-size); height:calc(var(--slider-arrow-size) * 2); z-index:21; background-repeat:no-repeat; background-color:rgba(255,255,255,.7); background-position:center; background-size:85%; filter:invert(100%);}
	.slider a.btn-prev {left:0; background-image:var(--ico-left);}
	.slider a.btn-next {right:0; background-image:var(--ico-right);}

	.slider .dots {position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); display:flex; gap:10px; filter:opacity(70%);}
	.slider .dots>.dot {width:var(--slider-dot-size); aspect-ratio:1; border-radius:50%; border:1px solid var(--border-color); display:flex; justify-content:center; align-items:center;}
	.slider .dots>.dot:after {content:''; width:calc(var(--slider-dot-size) * .6); aspect-ratio:1; border-radius:50%; transform:translateY(-5px); transition:var(--transition);}
	.slider .dots>.dot.on:after { background:var(--border-color); transform:translateY(0); }



@media (max-width: 1601px)	{
	:root {
		--container-width:1200px;
		--content-padding:0;

		--project-grid:3;
	}

}

@media (max-width: 1201px)	{
	:root {
		--container-width:800px;
		--content-padding:0;

		--project-grid:2;

		--slider-width:var(--container-width);
		--slider-arrow-size:25px;
		--slider-corner:30px;
	}

	
}


@media (max-width: 801px)	{
	:root {
		--container-width:600px;
		--content-padding:0;
		
		--slider-width:100%;
	}

	

}

@media (max-width: 601px)	{
	:root {
		--container-width:320px;
		--content-padding:15px;

		--project-grid:1;
	}

	

}