:root
{
	--page-bg:#ffffff;
	--page-text:#1d242b;
	--page-text-work:#002E34;
	--page-text-negative:#EBF4EE;
	--grid-toggle-block:#002E34;
	--accent:#E30A13;
	
	--page-text-size:19px;
	--page-text-line-height:23px;
	
	--page-image-maxheight:calc(100vh - var(--top-margin) - 45px);
	
	--left-margin:55px;
	--top-margin:120px;
	--page-left-margin:220px;
	--page-text-left-margin:440px;

	/* --grid-transition-on:.2s cubic-bezier(.39,.25,.62,1.51); */
	--grid-transition-on:.25s cubic-bezier(.26,.31,.4,1.52) 0s;
	--grid-transition-off:.35s cubic-bezier(.39,.25,.62,1) 0s;

	--grid-fade-on:.5s ease 0s;
	--grid-fade-off:1s ease 0s;

	--menu-transition-on:.5s cubic-bezier(.45,.19,.04,1) .4s;
	--menu-transition-off:.4s cubic-bezier(.45,.19,.04,1) .3s;

	--item-zoom:.2s cubic-bezier(.39,.25,.29,1.5) 0s;
	
	/* just ease */
	--item-zoom:.2s ease 0s;
}

body
{
	margin:0;
	padding:0;
	
	font-family:'courier','courier new',sans-serif;
	font-size:var(--page-text-size);
	line-height:var(--page-text-line-height);
	font-weight:normal;
	font-style:normal;

	/* image-rendering:-webkit-optimize-contrast; */
	-webkit-text-size-adjust:100%;

	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:var(--page-bg);
	color:var(--page-text);
	
	transition:background-color .4s ease-in .1s;
}
body.negative,
body.negative a
{
	color:var(--page-text-negative);
}
body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden
{
	display:none !important;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
a
{
	color:var(--page-text);
	text-decoration:none;
}
a:hover,
a.active,
body.negative a:hover,
body.negative a.active
{
	color:var(--accent);
}
.text-accent
{
	color:var(--accent);
}
.text-accent-alt
{
	color:var(--accent-alt);
}
ul
{
	margin:0;
	padding:0;
	list-style:none;
}


/* logo, menu */

#logo
{
	position:fixed;
	height:30px;
}
#logo path
{
	fill:var(--page-text);
}
body.negative #logo path	
{
	fill:var(--page-text-negative);
}
#menu
{
	position:fixed;
	left:var(--left-margin);
	top:var(--top-margin);
}
#static-menu
{
	display:none;
}
#pages-menu
{
	display:flex;
	/* margin-top:10px; */
	width:calc((5 * 20px) + (4 * 9px));
	justify-content: space-between;
}
#pages-menu li a
{
	display:block;
	width:20px;
	height:20px;
}


/* scrolling items menu */

#items-menu
{
	position:fixed;
	left:var(--left-margin);
	/* top:210px; */
	top:150px;
	bottom:0;
	width:360px;
	
	overflow:scroll;
	z-index:1000;
	
	transition:var(--menu-transition-off);
	
	scrollbar-width: none;
}
#items-menu::-webkit-scrollbar
{
	display:none;
}
#items-menu a
{
	display:block;
}
#items-menu.large
{
	left:25vw;
	top:0;
	width:380px;
	font-size:32px;
	line-height:40px;

	transition:var(--menu-transition-on);
}


/* pages */

#page
{
	margin:45px var(--left-margin);
}
.page
{
	position:absolute;
	inset:var(--top-margin) var(--page-left-margin);
	/* z-index:1100; */
}
.page.work,
.page.text
{
	background-color:transparent;
}
.page.text
{
	left:var(--page-text-left-margin);
}

.page.off
{
	display:none;
}


.text,
.text h1
{
	margin:0;
	font-size:32px;
	line-height:40px;
}
.page:not(.text) h1
{
	margin:28px 0 0 0;
	font-size:var(--page-text-size);
	line-height:var(--page-text-line-height);
	text-decoration: underline;
}
.page:not(.text) h1 + p
{
	margin-top:0;
}

.page .navigation
{
	margin-right:-40px;
	display:flex;
	align-items: center;
	justify-content: flex-end;
}
.page .navigation a
{
	display:flex;
	width:40px;
	height:40px;
	justify-content:center;
	align-items: center;
}
.page .navigation .arrow
{
	vertical-align: middle;
}
.page .navigation .arrow polygon
{
	fill:var(--page-text);
}
body.negative .page .navigation .arrow polygon
{
	fill:var(--page-text-negative);
}
.page .navigation a:hover .arrow polygon
{
	fill:var(--accent);
}



/* work slides */

.page.work .flex
{
	/* background-color:rgba(250,0,0,.1); */
	display:flex;
	flex-direction:column;
	/* align-items: flex-end; */
	/* float:left; */
	/* justify-content: center; */
}
.page.work figure
{
	position:relative;
	margin:0;
}
.page.work figure .navigation
{
	position:absolute;
	right:0;
}
.page.work img
{
	display:block;
	margin:auto;
	max-width:100%;
	max-height:var(--page-image-maxheight);
	cursor:pointer;
}
.page.work .navigation a
{
	margin:7px 0 7px 7px;
	display:block;
	width:14px;
	height:14px;
	background-color:var(--grid-toggle-block);
}
.page.work .navigation a:hover,
.page.work .navigation a.active
{
	background-color:var(--accent);
}
.page.work .nav
{
	position:absolute;
	top:50%;
	width:40px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	display:flex;
	justify-content: center;
	align-items: center;
	z-index:1000;
}
.page.work .nav.prev
{
	left:-40px;
}
.page.work .nav:hover:not(.swiper-button-disabled) polygon
{
	fill:var(--accent);
}
.page.work .swiper-button-disabled
{
	opacity:.2;
}


/* video / collect */

.page.video,
.page.collect
{
	background-color:transparent;
	z-index:1100;
}
.page.video .player
{
	width:100%;
	aspect-ratio:16/9;
}
.page.video .navigation
{
	margin-right:-40px;
}

.page.video .body,
.page.collect .body,
.page.work .body
{
	margin-left:calc(var(--page-text-left-margin) - var(--page-left-margin));
}
 
.page .image
{
	width:100%;
	display:flex;
	justify-content: center;
/* 
	aspect-ratio:3/2;
	max-height:var(--page-image-maxheight);
 */
}

.page.collect .image img
{
	display:block;
	max-width:100%;
	max-height:var(--page-image-maxheight);
}
.page.collect .image:hover .navigation polygon
{
	fill:var(--accent);
}


/* dimmed UI */

body.negative:not(.has-menu),
body.negative:not(.has-menu) a:not(:hover)
{
	color:rgba(235,244,238,.2);
}
body.negative:not(.has-menu) a.active
{
	color:rgba(227,10,10,.5);
}
/* 
body.video:not(.has-menu) #pages-menu a:not(:hover),
body.collect:not(.has-menu) #pages-menu a:not(:hover)
{
	opacity:.3;
}
 */


/* grids */

#grid-toggle
{
	position:fixed;
	right:100px;
	top:var(--top-margin);
}
#grid-toggle.off
{
	display:none;
}
#grid-toggle a
{
	display:block;
	margin-bottom:28px;
}
#grid-toggle rect
{
	fill:var(--grid-toggle-block);
}
.grid
{
	position:absolute;
	inset:var(--top-margin) var(--page-left-margin);
	bottom:auto;
	
	display:grid;
	grid-gap:2.9vw;
	align-items: start;
	align-content: start;
}
.grid.off
{
	pointer-events:none;
}
.grid.large
{
	grid-template-columns: repeat(3,1fr);
}
.grid.small
{
	grid-template-columns: repeat(6,1fr);
	z-index:1100; /* above items menu */
	pointer-events:none;
}
.grid .item
{
	position:relative;
	background-color:rgba(0,46,52,.1);
	aspect-ratio:1/1;
	
	box-shadow:.3vw .3vw 1.2vw rgba(0,0,0,.60);
	
	overflow:hidden;
	pointer-events:all;
}
.grid.small .item
{
	/* box-shadow:.15vw .15vw .6vw rgba(0,0,0,.60); */
}
.grid.off .item
{
 	pointer-events:none;
}


/* grid transitions */

.grid.scale .item
{
	transition:transform var(--grid-transition-on);
}
.grid.scale.off .item
{
	transform:scale(0);
	transition:transform var(--grid-transition-off);
}
.grid.scale.blink .item
{
	transform:scale(.95);
	transform:scale(.5);
}
.grid.fade .item
{
	transition:opacity var(--grid-fade-on);
}
.grid.fade.off .item
{
 	opacity:0;
 	transition:opacity var(--grid-fade-off);
}
.grid .item img
{
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1.2);
	transition:transform var(--item-zoom);
}
.grid .item img:hover
{
	transform:scale(1.08);
	transform:none;
}
.grid.parallax .item img
{
	transition:none;
}
.grid .item img.move
{
	transition:none;
}
.grid .item .move
{
	position:absolute;
	inset:0;
}


/* responsive views */

@media (max-width:1200px)
{
	:root
	{
		--left-margin:calc(55px - 30px);
		--page-left-margin:calc(220px - 30px);

		--page-text-left-margin:410px;
	}
	#grid-toggle
	{
		right:25px;
	}
	#items-menu.large
	{
		left:30vw;
		font-size:26px;
		line-height:33px;
	}
	
	.grid,
	.page.work
	{
		right:105px;
	}
	.page.text
	{
		right:25px;
	}
}

@media (max-width:800px)
{
	:root
	{
		--page-text-left-margin:320px;
	}
	.grid.small {
  	grid-template-columns: repeat(4,1fr);
	}
	.grid.large {
  	grid-template-columns: repeat(2,1fr);
  }
	#items-menu.large
	{
		left:35vw;
		font-size:20px;
		line-height:25px;
	}
  
}

@media (max-width:600px)
{
	:root
	{
		--left-margin:15px;
		--page-left-margin:15px;
		--page-text-left-margin:15px;
		--top-margin:60px;
	}
	
	#logo
	{
		top:15px;
	}
	
	#page
	{
		margin:20px var(--left-margin);
	}
	
	.page
	{
		transition:transform .2s ease 0s;
		right:calc(15px + 20px + 9px) !important;
	}
	body.has-menu .page
	{
		transform:translateX(calc(-100% + 20px));
	}

	.page.video,
	.page.collect
	{
  	z-index: 900;
	}	
	#menu
	{
		top:20px;
		right:15px;
		left:auto;
	}
	
	#items-menu	
	{
		width:300px;
		top:var(--top-margin);
		left:calc(100vw - 35px);
	}
	body.has-menu #items-menu
	{
		left:60px;
	}
	#items-menu.large
	{
		left:25vw;
		width:50vw;
		font-size:inherit;
		line-height:inherit;
	}
	#grid-toggle
	{
		display:none;
	}
	.grid
	{
		right:15px;
	}
	
	.page.work .nav 
	{
		display:none;
	}

	.page.video .image,
	.page.collect .image
	{
		flex-direction: column;
	}
	.page .navigation
	{
		margin:10px 0 0 0 !important;
	}
	a:hover
	{
		color:inherit;
	}

}