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

:root {
	--ani-transition-dur:.45s;
	--transition:all var(--ani-transition-dur) ease-in-out;
	--scroll-transition:.6s all ease-in-out;
	--scroll-transition-delay:.6s;
	--scroll-transition-faster:.3s all ease-in-out;
	--scroll-transition-faster-delay:.3s;

	--ani-normal-dur:.6s;
	--ani-normal:var(--ani-normal-dur) ease-in-out both;
	--ani-faster-dur:.4s;
	--ani-faster:var(--ani-faster-dur) ease-in-out both;

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

	--footer-height:100px;

	--main-bg-color:#ECECEC;
	--main-font-color:#231F20;
	--link-font-color:#000;
	--link-font-color-hover:#000;
	--link-font-color-hover-alt:#bcbcbc;
	--scrollbar-color:#bcbcbc;
	--color-gold:#916315;
	--alt-grey:#777677;
	--alt-grey2:#605e60;
	--alt-grey3:#CCCCCC;
	--alt-grey4:#b3b3b3;

	--mainmenu-width:min(95%, var(--container-narrow-width));
	--mainmenu-link-color:#393939;
	--mainmenu-link-color-hover:#FFF;
	--mainmenu-link-dot-size:6px;
	--mainmenu-close-cross-size:28px;
	--mainmenu-close-cross-dot-size:2px;
	--mainmenu-close-cross-line-width:38px; 
	
	--header-height:190px;
	--header-topcircle-height:182px;
	--header-logo-width:180px;
	--header-logo-image:url(images/logo.svg);
	--header-little-menu-gap:8px;
	--header-little-menu-dot-size:4px;
	--header-little-menu-line-width:65px;
	--header-mainmenu-btn-gap:8px;
	--header-mainmenu-btn-dot-size:3px;
	--header-mainmenu-btn-width:26px;
	--header-mainmenu-btn-color:var(--main-font-color);
	--header-little-menu-line-color:var(--link-font-color);
	--header-little-menu-line-color-hover:var(--link-font-color-hover-alt);
	--header-link-color:var(--main-font-color);
	--header-link-color-hover:var(--link-font-color-hover);

	--footer-padding:25px;

	--back-to-top-ico-size:24px;

	--works-header:0px;

	--main-min-height:calc(100vh - max(var(--header-height), var(--works-header)) - var(--footer-height));

	--heading-wave:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgyIDIwIiB2aWV3Qm94PSIwIDAgODIgMjAiPjxwYXRoIGQ9Ik0yNi4xIDMuNWMwIDUuMy00LjMgOS42LTkuNiA5LjZTNi45IDguOCA2LjkgMy41QzYuOSAxLjYgNS40LjEgMy41LjEgMS41LjEgMCAxLjYgMCAzLjUgMCAxMi42IDcuNCAyMCAxNi41IDIwYzUuMyAwIDEwLTIuNSAxMy02LjQtMi4xLTIuOC0zLjQtNi4zLTMuNC0xMC4xeiIgc3R5bGU9ImZpbGw6IzkxNjMxNSIvPjxwYXRoIGQ9Ik04MS42IDE2LjVDODEuNiA3LjQgNzQuMiAwIDY1LjEgMGMtMi4yIDAtNC40LjUtNi4zIDEuMy0zLjQgMS40LTYuMSAzLjktNy45IDctMS43IDIuOS00LjcgNC44LTguMyA0LjgtNS4zIDAtOS42LTQuMy05LjYtOS42QzMzIDEuNiAzMS41LjEgMjkuNi4xcy0zLjQgMS41LTMuNCAzLjRjMCAzLjggMS4zIDcuMyAzLjUgMTAuMSAxLjEgMS41IDIuNSAyLjcgNCAzLjcuNS4zIDEgLjYgMS41LjguMS4xLjIuMS40LjIuNC4yLjguNCAxLjIuNS4yLjEuMy4xLjUuMi40LjEuOC4yIDEuMi40LjIuMS40LjEuNi4yLjQuMS44LjIgMS4yLjIuMiAwIC40LjEuNi4xLjYuMSAxLjIuMSAxLjguMSAyLjIgMCA0LjQtLjUgNi4zLTEuMyAzLjEtMS4zIDYuMS0zLjcgNy42LTYuNCAxLjUtMy4yIDQuOC01LjQgOC42LTUuNCA1LjMgMCA5LjYgNC4zIDkuNiA5LjYgMCAxLjkgMS41IDMuNCAzLjQgMy40czMuNC0xLjUgMy40LTMuNHoiLz48L3N2Zz4=);
	
	--content-para-margin-bottom:1.8rem;
	--content-padding-bottom:2rem;
	--v-space:50px;
	--photo-grid-gap:20px;
	--desc-with-photo-width-default:400px;
	--desc-with-photo-grid:minmax(var(--desc-with-photo-width-default), 1fr) calc(var(--photo-grid-gap) *2) 1fr 1fr calc(var(--photo-grid-gap) *2) minmax(var(--desc-with-photo-width-default), 1fr);
}

/*body:has(.bg-white)	{
	--main-font-color:#000;
	--link-font-color-hover:#252525;
}*/

/* common */
	html {font-size:16px; scroll-behavior:smooth; scrollbar-gutter:stable;}
	body {font-family:'Poppins', Arial, sans-serif; font-size:1rem; line-height:1.25; margin:0 auto; 
		color:var(--main-font-color); background-color:var(--main-bg-color); width:100%; overflow-x:hidden;  }
	input, textarea, select, button {font-family:'Poppins', Arial, sans-serif;}

	body * {box-sizing:border-box; position:relative; }
	a, form * {transition:var(--transition);}
	a {text-decoration:none; color:var(--link-font-color)}
	a[href]:hover {color:var(--link-font-color-hover);}
	/*::selection { background:var(--selection-bg-color); color:var(--selection-font-color);}*/
	figure {margin:0; padding:0;}
	figure img {display:block;}
	img {max-width:100%; border:0;}

	h1, h2, h3, h4 {margin:0; line-height:1.25;}

	.upperrwave::after, .underwave::after {content:''; position:absolute; width:82px; height:20px; background-image:var(--heading-wave);}
	.upperrwave {margin-top:calc(var(--content-para-margin-bottom) * 1.5);}
	.upperrwave::after { top:-30px; left:0; }
	.underwave {margin-bottom:calc(var(--content-para-margin-bottom)/2);}
	.underwave::after { top:58%; left:35px; }
	.ani-heading-intro {animation:var(--ani-normal) h1-intro;}
	.underwave.ani-heading-intro::after, .upperrwave.ani-heading-intro::after {animation:var(--ani-normal) var(--ani-normal-dur) mask-from-left;}

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

	.hide {display:none !important;}

	.offscreen, .offscreen * {transition:var(--scroll-transition-faster);}
	.offscreen { transform:translateY(25px); opacity:0; transition-delay:calc(var(--i) * 100ms)}
	.onscreen, .onscreen.offscreen {transform:translateY(0); opacity:1;}

	.ico {display:inline-block; font-size:0; font-style:normal; line-height:0; vertical-align:middle;}
	.ico svg { height:100%; width:100%; display:inline-block; fill:currentColor;}

	.moveup {margin-top:-30px;}
	.v-space {height:var(--v-space);}
	.v-space-half {height:calc(var(--v-space)/2);}
	.v-space-onethird {height:calc(var(--v-space)/3);}

	.bg-main {background-color:var(--main-bg-color);}


/* scroll bar */
	/* Firefox */
	* {
		scrollbar-width: auto;
		scrollbar-color: var(--scrollbar-color) var(--main-bg-color);
	}

	/* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {
		width: 8px;
	}

	*::-webkit-scrollbar-track {
		background: var(--main-bg-color);
	}

	*::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar-color);
		border-radius: 10px;
		border: 0px none var(--main-bg-color);
	}

/* animation */

	@keyframes fade-in 	{ from 	{ opacity: 0; }}
	@keyframes fade-out 	{ to 		{ opacity: 0; }}

	@keyframes fadein-from-top		{ from 	{ transform:translateY(-30px); filter:opacity(0%); }}
	@keyframes fadein-from-bottom	{ from 	{ transform:translateY(30px); filter:opacity(0%); }}
	@keyframes fadein-from-left	{ from 	{ transform:translateX(-30px); filter:opacity(0%); }}
	@keyframes fadein-from-right	{ from 	{ transform:translateX(30px); filter:opacity(0%); }}

	@keyframes slide-from-top		{ from 	{ transform:translateY(-102%); }}
	@keyframes slide-to-top			{ to 		{ transform:translateY(-102%); }}
	@keyframes slide-from-bottom	{ from 	{ transform:translateY(102%); }}
	@keyframes slide-to-bottom		{ to 		{ transform:translateY(102%); }}
	@keyframes slide-from-right	{ from 	{ transform:translateX(102%); }}
	@keyframes slide-to-right		{ to 		{ transform:translateX(102%); }}
	@keyframes slide-from-left		{ from 	{ transform:translateX(-102%); }}
	@keyframes slide-to-left		{ to 		{ transform:translateX(-102%); }}

	@keyframes scaleX-from-0		{ from 	{ transform:scaleX(0);}}

	@keyframes mask-from-left		{ 
		0% 	{ clip-path: polygon(-1% 0%, 0% 0%, 0% 100%, -1% 100%); }
		100% 	{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
	}
	@keyframes mask-from-right		{ 
		0% 	{ clip-path: polygon(101% 0%, 100% 0%, 100% 100%, 101% 100%); }
		100% 	{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
	}

	@keyframes topcircle-in		{ 
		0% 	{ clip-path: circle(2% at 8% 0%); }
		100% 	{ clip-path: circle(140% at 0% 0%);}
	}
	@keyframes fadeindot-2			{ from 	{ /*transform:translate(350px, 120px)*/; margin-top:350px; margin-left:120px; filter:opacity(0%);}}

	/*@keyframes fadeindot-1			{ from 	{ transform:translate(450px, 150px);  filter:opacity(0%);}}	
	@keyframes fadeindot-3			{ from 	{ transform:translate(-150px, -100px); filter:opacity(0%);}}
	@keyframes fadeindot-4			{ from 	{ margin-top:-300px; margin-left:80px; filter:opacity(0%);}}
	@keyframes fadeindot-5			{ from 	{ transform:translate(200px, -50px); filter:opacity(0%);}}
	@keyframes fadeindot-6			{ from 	{ transform:translate(-180px, -100px); filter:opacity(0%);}}*/

	@keyframes h1-intro {from {filter:opacity(0%) blur(15px);}}
	@keyframes textclip-bg {to {background-position: 200% center;}}
	@keyframes floating-dot		{ 
		0%, 100% 	{ transform:translate(0px, 0px); }
		65%  { transform: translate(2px, 16px);}
	}

	@keyframes shaking-arrow		{ 
		0%, 100% 	{ transform:translateX(0px); }
		65%  { transform: translateX(4px);}
	}
	@keyframes bubble-intro		{ from 	{ transform:translateY(calc(20vh * var(--i))); opacity:0; }	}
	@keyframes bubble-outro		{ to 	{ transform:translateY(calc(-20vh * var(--i))); opacity:0; }	}


/* mainmenu */
	#mainmenu {position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,.98); z-index:100; transition:var(--transition);
		display:flex; align-items:center; justify-content:center; overflow:hidden; transform:translateY(-100%);}
	#mainmenu.on {transform:translateY(0px);}
	#mainmenu .btn-close {position:absolute; z-index:3; right:0; top:50%; color:#FFF; cursor:pointer;
		font-size:1.25rem; font-weight:200; display:flex; gap:4px; align-items:center;}
	#mainmenu .btn-close::after {content:'';  width:30px; background:#FFF; height:2px;}
	#mainmenu .btn-close-cross {width:var(--mainmenu-close-cross-size); aspect-ratio:1;}
	#mainmenu .btn-close-cross * {transition:var(--transition);}
	#mainmenu .btn-close-cross :is(.line, .dot) {position:absolute; height:var(--mainmenu-close-cross-dot-size); border-radius:var(--mainmenu-close-cross-dot-size); background-color:#FFF;}
	#mainmenu .btn-close-cross .dot {width:var(--mainmenu-close-cross-dot-size); transform:rotate(45deg) translate(1px, -2px); transform-origin:left top;}
	#mainmenu .btn-close-cross .line {right:0;}
	#mainmenu .btn-close-cross .line:last-of-type {width:calc(var(--mainmenu-close-cross-line-width) - var(--mainmenu-close-cross-dot-size)*3); transform:rotate(45deg) ; transform-origin:right bottom; bottom:0;}
	#mainmenu .btn-close-cross .line:first-of-type {width:var(--mainmenu-close-cross-line-width); transform:rotate(-45deg); transform-origin:right top; top:0;}
	#mainmenu .btn-close:hover .btn-close-cross .dot {width:calc(var(--mainmenu-close-cross-line-width) - var(--mainmenu-close-cross-dot-size)*3);}
	#mainmenu .btn-close:hover .btn-close-cross .line:last-of-type {width:var(--mainmenu-close-cross-dot-size);}
	#mainmenu nav {width:var(--mainmenu-width);}
	#mainmenu ul {list-style:none; margin:0; padding:0;}
	#mainmenu .menu a {color:var(--mainmenu-link-color); font-weight:600; font-size:3.5rem; display:inline-block; padding:0 10px;}
	#mainmenu .menu a::before, #mainmenu .menu a::after {content:''; position:absolute; z-index:-1; top:50%; height:var(--mainmenu-link-dot-size); border-radius:var(--mainmenu-link-dot-size); background-color:var(--color-gold); transition:var(--transition);}
	#mainmenu .menu a::before { width:0; left:0; }
	#mainmenu .menu a::after {left:calc(100% + var(--mainmenu-link-dot-size)); aspect-ratio:1; opacity:0; transition-delay:calc(var(--ani-transition-dur) /2);}
	#mainmenu .menu a:hover::before {width:100%;}
	#mainmenu .menu a:hover::after {opacity:1;}
	#mainmenu .menu a:hover {color:var(--mainmenu-link-color-hover);}
	
/* header */
	header {position:absolute; top:0; left:0; width:100%; z-index:20; }
	header .header-inner {height:var(--header-height); display:flex; align-items:center; justify-content:space-between;}

	header .topcircle {position:absolute; top:0; left:50%; transform:translateX(-50%);
		display:flex; align-items:center; justify-content:center;
		height:var(--header-topcircle-height); aspect-ratio:3.45;
	}
	header .topcircle .logo-img {content:var(--header-logo-image);}
	body:not(.page-works) header .topcircle {background:url(images/topcircle.png) no-repeat top center; background-size:contain;}
	body:not(.requested) header .topcircle {animation:var(--ani-normal) topcircle-in;}

	header .topcircle .logo {width:var(--header-logo-width); overflow:hidden;	/*clip-path:polygon(0% 0%, 0% 100%, 100% 1000%, 100% 0%);*/ }
	body:not(.requested) .topcircle .logo-img {
		animation:var(--ani-normal) slide-from-top; animation-delay:var(--scroll-transition-delay); }

	header .little-menu {display:flex; align-items:center; gap:var(--header-little-menu-gap);
		padding-left:calc(var(--header-little-menu-line-width) + var(--header-little-menu-dot-size) );}
	body:not(.requested) header .little-menu  {animation:var(--ani-normal) fadein-from-left; animation-delay:var(--scroll-transition-delay);}
	header .little-menu a {font-weight:700; margin-left:var(--header-little-menu-gap); color:var(--header-link-color);}
	header .little-menu a[href]:hover {color:var(--header-link-color-hover);}
	header .little-menu a>span {padding:0 var(--header-little-menu-gap); }
	header .little-menu a::before, header .little-menu a::after {content:''; position:absolute; z-index:-1;
		top:50%; transform:translateY(-50%); transition:var(--transition); 
		height:var(--header-little-menu-dot-size); border-radius:var(--header-little-menu-dot-size);}
	header .little-menu a::before {left:calc(0px - var(--header-little-menu-gap)); aspect-ratio:1; background:var(--header-little-menu-line-color);}
	header .little-menu a::after 	{left:-20px; width:20%;}
	header .little-menu :is(a.on) {color:var(--color-gold);}
	header .little-menu :is(a[href]:hover, a.on)::before {background-color:var(--header-little-menu-line-color-hover);}
	header:has(~ .outer:not(.htmx-swapping)) .little-menu :is(a[href]:hover, a.on)::after {left:0; width:100%; background:var(--header-little-menu-line-color-hover);}
	
	header .little-menu .line {position:absolute; z-index:-1; left:0;
		background:var(--header-little-menu-line-color); border-radius:var(--header-little-menu-dot-size);
		width:var(--header-little-menu-line-width); height:var(--header-little-menu-dot-size);}
	header .little-menu :is(a[href]:hover, a.on) ~ .line {transform:translateX(var(--header-little-menu-line-width)); filter:opacity(0%);}

	header .mainmenu-btn {display:flex; flex-direction:column; gap:var(--header-mainmenu-btn-gap); cursor:pointer;}
	body:not(.requested) header .mainmenu-btn {animation:var(--ani-normal) fadein-from-right; animation-delay:var(--scroll-transition-delay);}
	header .mainmenu-btn>span {display:flex; justify-content:space-between; width:var(--header-mainmenu-btn-width); }
	header .mainmenu-btn>span::after, header .mainmenu-btn>span::before {
		content:''; height:var(--header-mainmenu-btn-dot-size); border-radius:var(--header-mainmenu-btn-dot-size); background-color:var(--header-mainmenu-btn-color); transition:var(--transition);}
	header .mainmenu-btn>span::after { width:var(--header-mainmenu-btn-dot-size);}
	header .mainmenu-btn>span::before { width:calc(100% - var(--header-mainmenu-btn-dot-size) *2);}
	header .mainmenu-btn>span:nth-child(even) {flex-direction:row-reverse;}
	header .mainmenu-btn:hover>span::after {width:calc(100% - var(--header-mainmenu-btn-dot-size) *2);}
	header .mainmenu-btn:hover>span::before {width:var(--header-mainmenu-btn-dot-size);}

/*	footer */
	footer {position:absolute; left:0; width:100%; z-index:8; margin-top:calc( 0px - var(--footer-height)); font-size:.875rem;}
	footer .footer-inner {padding:var(--footer-padding) 0; height:var(--footer-height); display:flex; justify-content:space-between; align-items:center;}
	footer .footer-inner>*:first-child {animation:var(--ani-normal) fadein-from-left; animation-delay:calc(var(--scroll-transition-delay) * 1.5);}
	footer .footer-inner>*:last-child {animation:var(--ani-normal) fadein-from-right; animation-delay:calc(var(--scroll-transition-delay) * 1.5);}

	footer .social {display:flex; justify-content:flex-end; gap:15px;}
	footer .social .ico {width:20px; aspect-ratio:1;}

/*	back-to-top */
	.back-to-top {position:fixed; 
		bottom:0; left:50%; transform:translateX(-50%);
		width:230px; height:75px; overflow:hidden;
		display:flex; justify-content:center; align-items:flex-end;
		animation-timeline:scroll(root);
		animation-name:back-to-top-fadein;
		animation-range:entry 10% contain 33%;
		animation-fill-mode:both; animation-duration:var(--ani-normal-dur);
	}
	.back-to-top .ico {width:var(--back-to-top-ico-size); height:var(--back-to-top-ico-size);  margin-bottom:10px;}
	
	.back-to-top::before {content:''; position:absolute; z-index:-1;
		width:80%; aspect-ratio:1; border-radius:50%; left:50%; top:35%; transform:translateX(-50%);
		background:var(--main-bg-color); box-shadow:0 0 20px rgba(35,35,35,.5); transition:var(--transition);}
	.back-to-top:hover::before {background:var(--color-gold);}

	@keyframes back-to-top-fadein		{ 
		from 	{ opacity:0; z-index:-1; }
		to 	{ opacity:1; cursor:pointer; z-index:11; }
	}

/*	main */
	main {padding-top:max(var(--header-height), var(--works-header)); padding-bottom:var(--footer-height); min-height:100vh; max-width:100%; overflow:hidden;}
	.outer {min-height:100vh; transition:var(--transition);}
	.outer:is(.htmx-settling, .htmx-swapping) {opacity:0; filter:blur(50px); }

	.outer.active::before {content:''; position:absolute; z-index:0; width:100%; height:100%; }
	.bg-main::before {background:var(--main-bg-color); filter:opacity(60%);}


/* index */
	#page-index {
		--index-dots-size:48px;
		--index-dots-gap:min(90px, calc((100% - var(--index-dots-size) * 8 )) / 7);

		--dotcount:8;
		--turns:6;
	}

	#background-video {width: 100vw; height:100vh; object-fit:cover; position:fixed; left:0; right:0; top:0; bottom:0; z-index:-1; }
	#page-index .dot-preview.on~ #background-video	{filter:blur(10px) opacity(30%);}

	#page-index main h1 {position:absolute; z-index:1; left:50%; transform:translate(-50%,40px);
		font-size:3.875rem; line-height:1; font-weight:900; text-align:center; width:min(750px, 100%); text-transform: uppercase;		

		background-image: linear-gradient(
			-225deg,
			var(--main-font-color) 0%,
			var(--alt-grey) 29%,
			var(--alt-grey2) 67%,
			var(--main-font-color) 100%
		);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color:var(--main-font-color);
		background-clip:text;
		text-fill-color:transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation:var(--ani-normal) var(--ani-normal-dur) h1-intro, 3s textclip-bg linear infinite;
	}
	#page-index main h1:has( ~ .main-dots.on)  {opacity:0;}

	#page-index .main-dots {min-height:var(--main-min-height); position:absolute; width:100%;
		display:flex; justify-content:center; align-items:center; gap:var(--index-dots-gap); z-index:2;}
	#page-index .main-dots * {transition:var(--transition);}
	#page-index .main-dots.on {z-index:2;}
	#page-index .main-dots .dot {width:var(--index-dots-size); height:var(--index-dots-size); border-radius:calc(var(--index-dots-size) /2); 
		border:1px solid var(--link-font-color);
		animation-delay:calc(var(--ani-normal-dur) + var(--ani-normal-dur) * var(--i) / var(--turns)) !important;
		animation:var(--ani-normal) fadeindot-2, 3s infinite ease-in-out floating-dot;
	}
	#page-index .main-dots .dot>span {position:absolute; width:100%; height:100%; border-radius:50%; border:2px solid transparent; transition:var(--transition); }
	#page-index .main-dots.on .dot:not(.on) {opacity:0; animation-play-state:paused;}
	#page-index .main-dots.on .dot.on {animation-play-state:paused;
		border-color:var(--color-gold); background-color:var(--color-gold);}
	#page-index .main-dots.on .dot.on>span {transform:scale(1.35) ; border-color:var(--color-gold);}
	#page-index .main-dots .dot>.ico {position:absolute; width:70%; aspect-ratio:1; left:15%; top:15%; opacity:0; margin-left:-8px;}
	#page-index .main-dots.on .dot.on>.ico {opacity:1; margin-left:0; animation:2s infinite ease-in-out shaking-arrow;}


	#page-index .dot-preview {position:absolute; z-index:1; left:0; top:0; width:99.9vw; height:99.9vh; overflow:hidden; opacity:0;}
	#page-index .dot-preview.on {opacity:1; }
	#page-index .dot-preview>*	{position:absolute;}

	#page-index .dot-preview h2 {z-index:5; font-size:11rem; font-weight:800; line-height:1; text-transform:uppercase;}
	#page-index .dot-preview h2>span:not(:nth-child(5)) {position:absolute; left:0; top:0; }
	#page-index .dot-preview h2>span:nth-child(1) {clip-path:polygon(0% 0%, 100% 0%, 100% 38%, 0% 38%);}
	#page-index .dot-preview h2>span:nth-child(2) {clip-path:polygon(0% 40%, 100% 40%, 100% 65%, 0% 65%); }
	#page-index .dot-preview h2>span:nth-child(3) {clip-path:polygon(0% 67%, 100% 67%, 100% 78%, 0% 78%); }
	#page-index .dot-preview h2>span:nth-child(4) {clip-path:polygon(0% 80%, 100% 80%, 100% 90%, 0% 90%); }
	#page-index .dot-preview h2>span:nth-child(5) {clip-path:polygon(0% 92%, 100% 92%, 100% 100%, 0% 100%); }
	#page-index .dot-preview.on h2>span {
		animation-delay:calc(var(--ani-faster-dur) + var(--ani-faster-dur) * var(--i) / var(--turns)) !important;
		animation:var(--ani-faster) fade-in, var(--ani-faster) slide-from-bottom;}
	#page-index .dot-preview.fadeout h2>span {
		animation:var(--ani-faster) fade-out, var(--ani-faster) slide-to-top;}

	#page-index .dot-preview .bubble {z-index:1; aspect-ratio:1;}
	#page-index .dot-preview.on .bubble {
		animation-delay:calc(var(--ani-faster-dur) * var(--i) / var(--turns)) !important;
		animation:var(--ani-faster) bubble-intro; }
	#page-index .dot-preview.fadeout .bubble {animation:var(--ani-faster) bubble-outro; }

	/*#page-index .dot-preview.on .bubble>img {
		animation-delay:calc(var(--ani-normal-dur) + var(--ani-normal-dur) * var(--i) / var(--turns)) !important;
		animation:3s infinite ease-in-out floating-dot;}*/

	#page-index .dot-preview#brochure h2 {left:28%; top:38%;}
	#page-index .dot-preview#brochure .bubble:nth-of-type(1) {left:60%; top:-3%; width:15%;}
	#page-index .dot-preview#brochure .bubble:nth-of-type(2) {left:1%; top:10%; width:40%;}
	#page-index .dot-preview#brochure .bubble:nth-of-type(3) {left:50%; top:35%; width:25%;}
	#page-index .dot-preview#brochure .bubble:nth-of-type(4) {left:35%; top:70%; width:20%;}
	#page-index .dot-preview#brochure .bubble:nth-of-type(5) {right:0%; top:25%; width:28%; text-align:right;}	

	#page-index .dot-preview#exhibition h2 {left:6%; top:54%;}
	#page-index .dot-preview#exhibition .bubble:nth-of-type(1) {left:60%; top:-3%;}
	#page-index .dot-preview#exhibition .bubble:nth-of-type(2) {left:1%; top:10%;}
	#page-index .dot-preview#exhibition .bubble:nth-of-type(3) {left:50%; top:35%;}
	#page-index .dot-preview#exhibition .bubble:nth-of-type(4) {left:35%; top:70%;}
	#page-index .dot-preview#exhibition .bubble:nth-of-type(5) {right:0%; top:25%;}	

/* content? */
	.content {padding-top:var(--content-padding-top); padding-bottom:var(--content-padding-bottom);
		font-weight:300; font-size:1.125rem; line-height:1.6;}

	.content h1 {font-size:2.25rem; font-weight:700; color:#FFF; text-transform:uppercase;}
	.content h1.underwave {margin-bottom:0;}
	.content h2 {margin-bottom:calc(var(--content-para-margin-bottom)/2);}

	.content .desc {margin-bottom:var(--content-para-margin-bottom);}

	*[class^="photo-grid-"] {display:flex; gap:var(--photo-grid-gap); flex-wrap:wrap; justify-content:center; margin-bottom:var(--photo-grid-gap);}
	.photo-grid-1>* { max-width:100%; }
	.photo-grid-2>* { max-width:calc((100% - var(--photo-grid-gap))/2); }
	.photo-grid-3>* { max-width:calc((100% - var(--photo-grid-gap)*2)/3); }

	.desc-with-photo {display:grid; grid-template-columns:var(--desc-with-photo-grid); grid-template-rows:auto;}
	.desc-with-photo:not(.para-first) {grid-template-areas:"photo . para para para para";}
	.desc-with-photo.para-first {grid-template-areas:"para para para para . photo";}
	.desc-with-photo .photo {grid-area:photo; justify-self:center;}
	.desc-with-photo .para {grid-area:para;}

	/*.
	.content .sep {margin:1rem 0; height:1rem;}

	.content .sep::after, .content .sep::before {
		position:absolute; content:''; top:50%;  background:var(--link-font-color-hover);
		height:var(--content-sep-size); border-radius:calc( var(--content-sep-size) / 2);  }

	.content .sep::after
	{width:var(--content-sep-size-dot); left:calc(var(--content-sep-size-line) + var(--content-sep-size)*2); 
		animation:var(--transition-ani-normal) fade-in; animation-delay:calc(var(--ani-normal-dur) + 1s);}
	.content .sep::before
	{width:var(--content-sep-size-line); left:0; 
		animation:var(--transition-ani-normal) scaleX-from-0; transform-origin:0% 50%; 
		animation-delay:calc(var(--ani-normal-dur) + .6s);}*/

/* contact */
	#page-contact .ribbon {font-size:9rem; line-height:1.3; font-weight:200; color:var(--alt-grey3); overflow:hidden; white-space:nowrap; margin-left:-10%; animation:calc(var(--ani-normal-dur) *3) ease-in-out both mask-from-left;}

	.contact-form { max-width:700px; width:100%; margin-top:1.5rem;}
	.contact-form .form-grid {display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		gap: 20px 20px;
		grid-auto-flow: row;
		grid-template-areas:
			"field1 message"
			"field2 message"
			"field3 message"
			"button button";
	}

	.contact-form .form-grid .field1 { grid-area: field1; }
	.contact-form .form-grid .field2 { grid-area: field2; }
	.contact-form .form-grid .field3 { grid-area: field3; }
	.contact-form .form-grid .message { grid-area: message; }
	.contact-form .form-grid .button { grid-area: button; }

	.contact-form :is(input[type=text], textarea, select) {
		border:2px none #000; background:none;
		display:block; width:100%; padding:2px 6px;
	}
	.contact-form :is(input[type=text]::placeholder, select:invalid, textarea::placeholder) {color:var(--alt-grey) !important; font-size:1rem; font-weight:500;}
	.contact-form :is(input[type=text], textarea, select, button) {font-size:1.25rem; font-weight:600; color:#000;}

	.contact-form input[type=text] { border-bottom-style:solid;}
	.contact-form textarea { border-style:solid !important; height:100%;}
	.contact-form button {text-transform:uppercase; cursor:pointer; border:none; background:#000; color:#FFF !important; padding:2px 25px; border-radius:2.5rem; }

/* about */
	#page-knowusmore {}

/* works cat */
	.page-cat {
		/*--cat-balls-a-line:3;
		--cat-ball-size:min(360px, 90vw);*/
		--cat-name-width:min(500px, 40%);
		--cat-ball-size:min(360px, 40%);
		--cat-project-info-width:min(50%, 600px);
	}

	.cat-display {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
	.cat-display .cat-name {width:var(--cat-name-width); position:sticky; top:calc(var(--header-height) / 4); padding-top:calc(var(--header-height) / 4); overflow:hidden;}
	.cat-display .cat-name h1 {text-transform:uppercase; word-break:break-all; font-size:13.5rem; line-height:.8; font-weight:800; }
	.cat-display .cat-name h1>span {position:absolute; left:0; top:0; }
	.cat-display .cat-name h1>span:nth-child(1) {position:relative; display:block;}
	.cat-display .cat-name h1>span:nth-child(n+0) {clip-path:polygon(0% 0%, 100% 0%, 100% 18%, 0% 18%);}
	.cat-display .cat-name h1>span:nth-child(2n+0) {clip-path:polygon(0% 19%, 100% 19%, 100% 25.5%, 0% 25.5%); }
	.cat-display .cat-name h1>span:nth-child(3n+0) {clip-path:polygon(0% 26%, 100% 26%, 100% 44%, 0% 44%); }
	.cat-display .cat-name h1>span:nth-child(4n+0) {clip-path:polygon(0% 45%, 100% 45%, 100% 53%, 0% 53%); }
	.cat-display .cat-name h1>span:nth-child(5n+0) {clip-path:polygon(0% 53.5%, 100% 53.5%, 100% 73.5%, 0% 73.5%); }
	.cat-display .cat-name h1>span:nth-child(6n+0) {clip-path:polygon(0% 74%, 100% 74%, 100% 90%, 0% 90%); }
	.cat-display .cat-name h1>span:nth-child(7n+0) {clip-path:polygon(0% 91%, 100% 91%, 100% 100%, 0% 100%); }
	.cat-display .cat-name h1>span {
		animation:6s calc(var(--ani-faster-dur) + var(--ani-faster-dur) * var(--i) / 5)
			cat-name-ani ease-in-out both infinite;
		/*animation-delay:calc(var(--ani-faster-dur) + var(--ani-faster-dur) * var(--i) / 5) !important;
			animation:var(--ani-faster) fade-in, var(--ani-faster) slide-from-left;*/}
	@keyframes cat-name-ani		{ 
		0%		{ transform:translateX(-100%); opacity:0; }
		3%, 95%  { transform: translateX(0); opacity:1;}
		98%		{ transform:translateX(100%); opacity:0; }
	}

	.cat-display .project-list {width:calc(100% - var(--cat-name-width) - 30px); }
	.cat-display .project-list .project {margin-bottom:2rem; display:flex; align-items:center; justify-content:center; }
	.cat-display .project .project-info {max-width:var(--cat-project-info-width);}
	.cat-display .project .project-info h2 {font-size:2rem;}

	.cat-display .project .project-thumb {width:var(--cat-ball-size); aspect-ratio:1; display:flex; justify-content:center; align-items:flex-end; }
	.cat-display .project .project-thumb::before {content:''; position:absolute; z-index:2; width:100%; height:100%; background:url(images/works-ring.png) no-repeat; background-size:contain;}
	.cat-display .project .project-thumb>img {width:73%; height:73%; display:block; object-fit:cover; clip-path: circle(50% at 50% 50%); transform:translateY(-5%);}


	.cat-display .project-list .project:nth-child(even) .project-thumb {order:2;}
	.cat-display .project-list .project:is(.offscreen, .onscreen.offscreen) {transform:none;}
	.cat-display .project-list .project.offscreen .project-thumb {transition-delay:calc(100ms * var(--i));}
	.cat-display .project-list .project.offscreen .project-info>*:nth-child(1) {transition-delay:calc(120ms * var(--i));}
	.cat-display .project-list .project.offscreen .project-info>*:nth-child(2) {transition-delay:calc(200ms * var(--i));}
	.cat-display .project-list :is(.project.offscreen:nth-child(odd) .project-thumb, .project.offscreen:nth-child(even) .project-info>*) {transform:translateY(-100px); opacity:0;}
	.cat-display .project-list :is(.project.offscreen:nth-child(even) .project-thumb, .project.offscreen:nth-child(odd) .project-info>*) {transform:translateY(100px); opacity:0;}
	.cat-display .project-list .project:is(.onscreen, .onscreen.offscreen) :is(.project-thumb, .project-info>*) {transform:translateY(0); opacity:1;}
	.cat-display .project-list .project:is(.onscreen, .onscreen.offscreen) .project-info .upperrwave::after {animation:var(--ani-faster) calc(var(--ani-faster-dur) * var(--i) *.8) mask-from-left;}

	/*
	.underwave.ani-heading-intro::after, .upperrwave.ani-heading-intro::after {animation:var(--ani-normal) var(--ani-normal-dur) mask-from-left;}
	*/
	/*.cat-balls {display:flex; flex-wrap:wrap; justify-content:center;}
	.cat-balls .ball {width:var(--cat-ball-size); aspect-ratio:1; display:flex; justify-content:center; align-items:flex-end; }
	.cat-balls .ball:is(:nth-child(5n-4), :nth-child(5n-3), :nth-child(5n-2)) {margin-left:5%; margin-right:5%;}
	.cat-balls .ball:is(:nth-child(5n+0), :nth-child(5n-1)) {margin-left:8%; margin-right:8%;}
	.cat-balls .ball::before {content:''; position:absolute; z-index:2; width:100%; height:100%; background:url(images/works-ring.png) no-repeat; background-size:contain;}
	.cat-balls .ball>img {width:73%; height:73%; display:block; object-fit:cover; clip-path: circle(50% at 50% 50%); transform:translateY(-20px);}*/

/* works */
	.page-works {
		--header-height:120px;
		--header-topcircle-height:120px;
		--works-header:500px;
		--works-header-bg-color:var(--color-gold);
		--works-h1-inside:rgba(255,255,255,0);
		--works-h1-width:750px;
		--works-info-bar-translateY:-2rem;
		--works-info-bar-padding:calc( 50vw - (var(--container-width)/2) - (var(--content-padding)/2) );
		--works-info-bar-padding-s:30px;
		--works-info-bar-padding-v:15px;
		--works-nav-ico-size:40px;
		--works-nav-bar-height:calc(var(--works-nav-ico-size) * 1.5);
	}
	.page-works header:has( ~ #works-header.bg-dark) {
		--header-logo-image:url(images/logo-w.svg);
		--header-mainmenu-btn-color:#FFF;
		--header-link-color:#FFF;
		--header-little-menu-line-color:var(--alt-grey);
		--header-link-color-hover:#FFF;
	}

	#works-header {height:var(--works-header); padding-top:var(--header-height);
		position:absolute; z-index:-1; top:0; left:0; width:100%; background:var(--works-header-bg-color); }
	#works-header .bg {position:absolute; z-index:-2; right:0; top:0; height:100%; width:100%; overflow:hidden;
		animation:calc(var(--ani-normal-dur) *1.5) ease-in-out both mask-from-right;
		background:var(--bg-image) no-repeat fixed center top;}
	#works-header .bg>img {width:100%; height:100%; object-fit:cover;}
	#works-header .container {animation-timeline:scroll(root);
		animation-name:slide-to-bottom;
		animation-range:entry 0% contain 28%;
		animation-fill-mode:both; animation-duration:1ms;}

	#works-header h1 {width:min(100%, var(--works-h1-width)); font-size:4.5rem; font-weight:800; line-height:1.2; text-transform:uppercase;
		color:transparent; -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#FFF;
		text-shadow:2px 2px 0 var(--works-h1-inside);
		animation:calc(var(--ani-normal-dur) *1.5) ease-in-out both mask-from-left;}

	#works-info-bar {display:flex; transform:translateY(var(--works-info-bar-translateY)); z-index:10;}
	#works-info-bar ~ .bg-main	{transform:translateY(calc(var(--works-info-bar-translateY) * 1.8)); padding-top:calc(var(--works-info-bar-translateY) * -1.5);}
	#works-info-bar>div {padding-top:var(--works-info-bar-padding-v); padding-bottom:var(--works-info-bar-padding-v); display:flex; align-items:center; gap:var(--works-info-bar-padding-s);}

	#works-info-bar .date-and-place {flex-grow:1; background:var(--color-gold); border-end-end-radius:3rem; border-start-end-radius:3rem; padding-left:var(--works-info-bar-padding); padding-right:var(--works-info-bar-padding-s);}
	#works-info-bar .what-we-did {flex-grow:4; background:var(--main-bg-color); border-start-start-radius:2rem; padding-right:var(--works-info-bar-padding); padding-left:var(--works-info-bar-padding-s); }

	#works-info-bar .date-and-place>span {display:flex; align-items:center; gap:5px; color:#FFF;
		animation:calc(var(--ani-normal-dur) * .5) calc( var(--ani-normal-dur) * var(--i) /5) ease-in-out both fadein-from-left;}
	#works-info-bar .date-and-place>span::before {content:''; width:30px; height:30px;}
	#works-info-bar .date-and-place>span.location::before {
		background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0xMC43LDkuOGMwLTAuNC0wLjMtMC43LTAuNy0wLjdjLTEuMSwwLTItMC45LTItMnMwLjktMiwyLTJzMiwwLjksMiwyYzAsMC40LDAuMywwLjcsMC43LDAuNwoJCQkJYzAuNCwwLDAuNy0wLjMsMC43LTAuN2MwLTEuOS0xLjUtMy40LTMuNC0zLjRTNi42LDUuMyw2LjYsNy4yczEuNSwzLjQsMy40LDMuNEMxMC40LDEwLjUsMTAuNywxMC4yLDEwLjcsOS44eiIvPgoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTE4LjgsMTYuNmwtMS4zLTIuN2MtMC4zLTAuNi0wLjktMS0xLjctMWgtMC43Yy0wLjQsMC0wLjcsMC4zLTAuNywwLjdzMC4zLDAuNywwLjcsMC43aDAuNwoJCQkJYzAuMiwwLDAuMywwLjEsMC40LDAuMmwxLjMsMi43YzAuMSwwLjEsMCwwLjIsMCwwLjNjMCwwLTAuMSwwLjEtMC4yLDAuMUgyLjdjLTAuMSwwLTAuMi0wLjEtMC4yLTAuMWMwLDAtMC4xLTAuMSwwLTAuM2wxLjMtMi43CgkJCQljMC4xLTAuMSwwLjItMC4yLDAuNC0wLjJoMC43YzAuNCwwLDAuNy0wLjMsMC43LTAuN2MwLTAuNC0wLjMtMC43LTAuNy0wLjdINC4xYy0wLjcsMC0xLjMsMC40LTEuNywxbC0xLjMsMi43CgkJCQljLTAuMywwLjUtMC4yLDEuMSwwLjEsMS42QzEuNiwxOC43LDIuMSwxOSwyLjcsMTloMTQuN2MwLjYsMCwxLjEtMC4zLDEuNC0wLjhDMTkuMSwxNy43LDE5LjEsMTcuMSwxOC44LDE2LjZ6Ii8+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNOS4yLDE2YzAuMSwwLjIsMC40LDAuMywwLjYsMC4zaDAuNGMwLjIsMCwwLjUtMC4xLDAuNi0wLjNjMC42LTEsMS40LTEuOSwyLjItMi44CgkJCQljMS42LTEuNywzLjItMy41LDMuMi02LjFDMTYuMSwzLjcsMTMuNCwxLDEwLDFTMy44LDMuNywzLjgsNy4xYzAsMi42LDEuNiw0LjQsMy4yLDYuMUM3LjgsMTQuMSw4LjYsMTUsOS4yLDE2eiBNMTAsMi40CgkJCQljMi42LDAsNC43LDIuMSw0LjcsNC43YzAsMi4xLTEuMywzLjUtMi44LDUuMWMtMC43LDAuNy0xLjMsMS41LTIsMi4zYy0wLjYtMC45LTEuMy0xLjYtMi0yLjNjLTEuNS0xLjYtMi44LTMuMS0yLjgtNS4xCgkJCQlDNS4yLDQuNSw3LjQsMi40LDEwLDIuNHoiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==");}
	#works-info-bar .date-and-place>span.date::before {
		background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGOyIgZD0iTTYuOCwxYzAuNCwwLDAuNiwwLjMsMC42LDAuNnYwLjZoMy4yYzAuNCwwLDAuNiwwLjMsMC42LDAuNgoJCVMxMSwzLjYsMTAuNiwzLjZINy40djAuNmMwLDAuNC0wLjMsMC42LTAuNiwwLjZjLTAuNCwwLTAuNi0wLjMtMC42LTAuNlYzLjZINC45Yy0xLjQsMC0yLjYsMS4yLTIuNiwyLjZ2OWMwLDEuNCwxLjIsMi42LDIuNiwyLjYKCQloMy45YzAuNCwwLDAuNiwwLjMsMC42LDAuNmMwLDAuNC0wLjMsMC42LTAuNiwwLjZINC45QzIuNywxOSwxLDE3LjMsMSwxNS4xdi05QzEsNCwyLjcsMi4zLDQuOSwyLjNoMS4zVjEuNkM2LjEsMS4zLDYuNCwxLDYuOCwxegoJCSBNMTMuMiwxYzAuNCwwLDAuNiwwLjMsMC42LDAuNnYwLjZoMS4zQzE3LjMsMi4zLDE5LDQsMTksNi4xdjIuNmMwLDAuNC0wLjMsMC42LTAuNiwwLjZjLTAuNCwwLTAuNi0wLjMtMC42LTAuNlY2LjEKCQljMC0xLjQtMS4yLTIuNi0yLjYtMi42aC0xLjN2MC42YzAsMC40LTAuMywwLjYtMC42LDAuNmMtMC40LDAtMC42LTAuMy0wLjYtMC42VjEuNkMxMi42LDEuMywxMi45LDEsMTMuMiwxeiBNNC45LDYuOAoJCWMtMC40LDAtMC42LDAuMy0wLjYsMC42YzAsMC40LDAuMywwLjYsMC42LDAuNmgxMC4zYzAuNCwwLDAuNi0wLjMsMC42LTAuNmMwLTAuNC0wLjMtMC42LTAuNi0wLjZINC45eiBNMTQuNSwxMi42CgkJYzAuNCwwLDAuNiwwLjMsMC42LDAuNnYxbDAuOCwwLjhjMC4zLDAuMywwLjMsMC43LDAsMC45Yy0wLjMsMC4zLTAuNywwLjMtMC45LDBsLTEtMWMtMC4xLTAuMS0wLjItMC4zLTAuMi0wLjV2LTEuMwoJCUMxMy45LDEyLjksMTQuMSwxMi42LDE0LjUsMTIuNnogTTYuMSwxMWMwLDAuNS0wLjQsMS0xLDFzLTEtMC40LTEtMWMwLTAuNSwwLjQtMSwxLTFTNi4xLDEwLjQsNi4xLDExeiBNNS4yLDE1LjhjMC41LDAsMS0wLjQsMS0xCgkJYzAtMC41LTAuNC0xLTEtMXMtMSwwLjQtMSwxQzQuMiwxNS40LDQuNiwxNS44LDUuMiwxNS44eiBNMTEuMywxNC41YzAtMS44LDEuNC0zLjIsMy4yLTMuMnMzLjIsMS40LDMuMiwzLjJzLTEuNCwzLjItMy4yLDMuMgoJCVMxMS4zLDE2LjMsMTEuMywxNC41eiBNMTQuNSwxMEMxMiwxMCwxMCwxMiwxMCwxNC41czIsNC41LDQuNSw0LjVzNC41LTIsNC41LTQuNVMxNywxMCwxNC41LDEweiIvPgo8L2c+Cjwvc3ZnPgo=");}

	#works-info-bar .what-we-did>span {background:#000; color:#FFF; font-weight:200; font-size:.875rem; padding:4px 20px 4px 40px; border-radius:1rem;
		animation:calc(var(--ani-normal-dur) * .5) calc( var(--ani-normal-dur) * var(--i) /3) ease-in-out both fadein-from-right;}
	#works-info-bar .what-we-did>span::before, #works-info-bar .what-we-did>span::after {content:''; position:absolute; border-radius:50%; height:50%; aspect-ratio:1; top:50%; transform:translateY(-50%);}
	#works-info-bar .what-we-did>span::before {background:#FFF; left:10px;}
	#works-info-bar .what-we-did>span::after {background:var(--color-gold); left:20px;}

	#works-info-bar .btn-goback {position:absolute; right:var(--works-info-bar-padding); top:50%; transform:translateY(-50%); }
	#works-info-bar .btn-goback .ico {width:20px; height:20px; margin-right:3px;}

	#works-nav-bar {display:flex; margin-bottom:var(--content-para-margin-bottom); }
	#works-nav-bar:has(>.go-next) {justify-content:flex-end;}
	#works-nav-bar:has(>.go-prev) {justify-content:flex-start;}
	#works-nav-bar:has(>.go-prev):has(> .go-next) {justify-content:space-between;}
	#works-nav-bar>[class^="go-"] {background:var(--alt-grey4); height:var(--works-nav-bar-height); display:flex; align-items:center;}
	#works-nav-bar .ico {width:var(--works-nav-ico-size); height:var(--works-nav-ico-size);}
	#works-nav-bar .hidden {position:absolute; z-index:-1; opacity:0; top:50%; transform:translateY(-50%); 
		transition:var(--transition); font-size:1.25rem; font-weight:700; width:200%;}
	#works-nav-bar .go-prev {padding-left:calc(50% - var(--container-width)/2 ); padding-right:var(--works-nav-ico-size); 
		border-top-right-radius:var(--works-nav-bar-height); border-bottom-right-radius:var(--works-nav-bar-height);}
	#works-nav-bar .go-prev .hidden {left:0;}
	#works-nav-bar .go-next {padding-right:calc(50% - var(--container-width)/2 ); padding-left:var(--works-nav-ico-size); 
		border-top-left-radius:var(--works-nav-bar-height); border-bottom-left-radius:var(--works-nav-bar-height);}
	#works-nav-bar .go-next .hidden {right:0; text-align:right;}

	#works-nav-bar>[class^="go-"]:hover {background:var(--link-font-color); color:var(--color-gold);}
	#works-nav-bar>[class^="go-"]:hover .hidden {opacity:1;}
	#works-nav-bar>.go-prev:hover .hidden {left:calc(100% + 10px );}
	#works-nav-bar>.go-next:hover .hidden {right:calc(100% + 10px );}



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

		--header-height:160px;
		--header-topcircle-height:142px;
		--header-logo-width:180px;
	}

	/* works */
		.page-works {
			--works-info-bar-padding-s:20px;
			--works-nav-ico-size:30px;
		}

}

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

		--header-height:140px;
		--header-topcircle-height:82px;
		--header-logo-width:130px;
		--header-little-menu-gap:5px;
		--header-little-menu-dot-size:4px;
		--header-little-menu-line-width:30px;

		--desc-with-photo-width-default:1fr;
		--photo-grid-gap:15px;
	}



	/* common */
		.laptop-hide {display:none;}

	/* content? */
		.laptop-photo-grid-1>* { max-width:100%; }
		.laptop-photo-grid-2>* { max-width:calc((100% - var(--photo-grid-gap))/2); }
		.laptop-photo-grid-3>* { max-width:calc((100% - var(--photo-grid-gap)*2)/3); }
		.desc-with-photo:not(.para-first) {grid-template-areas:"photo photo photo photo photo photo" "para para para para para para";}
		.desc-with-photo.para-first {grid-template-areas:"para para para para para para" "photo photo photo photo photo photo";}

	/* works cat */
		.page-cat {
			--cat-name-width:100%;
			--cat-ball-size:min(360px, 35%);
			--cat-project-info-width:min(65%, 600px);
		}

		.cat-display .cat-name {position:relative; padding-top:0; top:auto;}
		.cat-display .cat-name h1 {margin-bottom:calc(var(--content-para-margin-bottom) *1.5);}
		.cat-display .project-list {width:100%; }
		.cat-display .project-list .project {margin-bottom:0;}

	/* works */
		.page-works {
			--works-header:400px;
			--works-h1-width:600px;
			--works-info-bar-padding-s:20px;
		}

		#works-header h1 {font-size:3.5rem;}
		#works-info-bar {flex-direction:column; transform:translateY(-20%);}
		#works-info-bar .date-and-place {padding-right:var(--works-info-bar-padding);}
		#works-info-bar .what-we-did {padding-left:var(--works-info-bar-padding); flex-wrap:wrap;}
		#works-info-bar .btn-goback {top:25%;}

		#works-info-bar ~ .bg-main	{transform:translateY(calc(var(--works-info-bar-translateY) * 1.1)); }
}


@media (max-width: 801px)	{
	:root {
		--container-width:600px;
		--container-narrow-width:var(--container-width);
		--content-padding:0px;

		--header-height:160px;
		--header-topcircle-height:62px;
		--header-logo-width:120px;
		--header-little-menu-line-width:20px;
		
	}


	/* common */
		.tablet-hide {display:none;}

	/* mainmenu */
		#mainmenu .btn-close {top:5%;}
		#mainmenu .menu a {font-size:3rem;}

	/* index */
		#page-index .main-dots {display:none;}

	/* content? */
		.tablet-photo-grid-1>* { max-width:100%; }
		.tablet-photo-grid-2>* { max-width:calc((100% - var(--photo-grid-gap))/2); }
		.tablet-photo-grid-3>* { max-width:calc((100% - var(--photo-grid-gap)*2)/3); }

	/* works cat */
		.page-cat {
			--cat-ball-size:min(360px, 35%);
			--cat-project-info-width:min(65%, 600px);
		}

		.cat-display .cat-name h1 {font-size:6rem; margin-bottom:calc(var(--content-para-margin-bottom) );}
		.cat-display .project-list {width:100%; }
		.cat-display .project-list .project {margin-bottom:0;}
		.cat-display .project-list .project .project-name {font-size:1.5rem;}


}

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

		--header-little-menu-gap:4px;
		--header-little-menu-line-width:15px;

		--footer-height:8rem;
	}

	/* common */
		.mobile-hide {display:none;}
	
	/* mainmenu */
		#mainmenu .menu a {font-size:2.5rem;}

	/*	footer */
		footer .footer-inner {height:var(--footer-height); justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:10px;}

	/* index */
		#page-index main h1 {font-size:2.5rem; top:50%;}


	/* content? */
		.mobile-photo-grid-1>* { max-width:100%; }
		.mobile-photo-grid-2>* { max-width:calc((100% - var(--photo-grid-gap))/2); }
		.mobile-photo-grid-3>* { max-width:calc((100% - var(--photo-grid-gap)*2)/3); }

	/* contact */
		#page-contact .ribbon {font-size:6rem; }

		.contact-form { max-width:700px; width:100%; margin-top:1.5rem;}
		.contact-form .form-grid {
			grid-template-columns: 1fr ;
			grid-template-rows: 1fr 1fr 1fr auto 1fr;
			grid-template-areas:
				"field1"
				"field2"
				"field3"
				"message"
				"button";
		}
		.contact-form .form-grid .message { grid-area: message; height:10rem; }

	/* works cat */
		.page-cat {
			--cat-ball-size:min(360px, 35%);
			--cat-project-info-width:min(65%, 600px);
		}

		.cat-display .project-list .project {margin-bottom:var(--content-para-margin-bottom);}
		.cat-display .project-list .project .project-thumb {align-self:flex-start;}
		.cat-display .project-list .project .project-name {font-size:1.5rem; }
		.cat-display .project-list .project .project-info .details {display:none; }


	/* works */
		.page-works {
			--header-height:110px;
			--header-topcircle-height:80px;
			--works-header:430px;
		}
		body.page-works header .header-inner {align-items:flex-end; padding-bottom:20px;}

		#works-header h1 {font-size:2.875rem;}
		#works-info-bar .btn-goback {top:100%;}
}