@font-face {
	font-family: "Cordia-New";
	src: url("../fonts/CordiaNew.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Cordia-New";
	src: url("../fonts/CordiaNew-Bold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap
}

:root {
	
	--fontFamily: "Cordia-New";

	--colorBlack: #000000;
	--colorGreyLight: #D9D9D9;
	--colorGreyDark: #989898;
	--colorWhite: #FFFFFF;
	
	--fontSize12: 0.8rem;
	--fontSize14: 1rem;
	--fontSize16: 1.2rem;
	--fontSize18: 1.4rem;
	--fontSize20: 1.6rem;
	--fontSize22: 1.8rem;
	--fontSize24: 2rem;
	--fontSize26: 2.2rem;
	--fontSize28: 2.4rem;
	--fontSize30: 2.6rem;
	--fontSize32: 2.8rem;
	--fontSize34: 3rem;
	--fontSize36: 3.2rem;
	--fontSize38: 3.4rem;
	--fontSize40: 3.6rem;
	--fontSize42: 3.8rem;
	--fontSize44: 4rem;
	--fontSize46: 4.2rem;
	--fontSize48: 4.4rem;
	--fontSize50: 4.6rem;
	--fontSize52: 4.8rem;
	--fontSize54: 5rem;
	--fontSize56: 5.2rem;
	--fontSize58: 5.4rem;
	--fontSize60: 5.6rem;
	--fontSize62: 5.8rem;
	--fontSize64: 6rem;
	--fontSize66: 6.2rem;
	--fontSize68: 6.4rem;
	--fontSize70: 6.6rem;
	--fontSize72: 6.8rem;
	--fontSize74: 7rem;
	--fontSize76: 7.2rem;
	--fontSize78: 7.4rem;
	--fontSize80: 7.6rem;
	
	--sideSpacing: 2rem;
	
	--headerHeight: 3rem;

	@media (max-width: 767px) {
		--sideSpacing: 1rem;
		--headerHeight: 3.25rem;
	}
}


html, body {
	scrollbar-gutter: stable;
}

html {
	font-size: clamp(
		16px,
		calc(16px + 4 * ((100vw - 767px) / 693)),
		20px
	);

	@media (max-width: 767px) {
		font-size: 16px;
	}
}

body.frontend {
	margin: 0;
	padding: 0;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: var(--fontSize20);
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	font-family: "Cordia-New";
	color: var(--colorBlack);
	background-color: #f2f2f2;
	
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=url],
	input[type=search],
	input[type=submit],
	button {
	  appearance: none;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  border-radius: 0;
	  -moz-border-radius: 0;
	  -webkit-border-radius: 0;
	}
	
	*, *:before, *:after {
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}
	
	*:focus:not(:focus-visible) {
	  outline: 0;
	}
	
	img {
		border: 0;
	}

	@media (max-width: 767px) {
		padding-top: var(--headerHeight);
		background-color: var(--colorWhite);
	}
}

body.frontend header,
body.frontend footer,
body.frontend main {
	background-color: var(--colorWhite);
	max-width: 1380px;
	margin-inline: auto;
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));

	@media (max-width: 767px) {
		width: 100%;
		max-width: none;
	}
}

body.frontend main {
	min-height: calc(100svh - var(--headerHeight) - var(--headerHeight) - 1px - var(--sideSpacing) - var(--sideSpacing));	
	display: flex;
	flex-direction: column;
	padding-block: var(--sideSpacing);

	@media (max-width: 767px) {
		min-height: calc(100svh - var(--headerHeight));
		padding-block: var(--sideSpacing) calc(var(--sideSpacing) + 4rem);
	}
}

body.frontend .innerwrapper {
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	margin: 0 auto;

	@media (max-width: 767px) {
		width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	}
}

body.frontend header {
	margin-top: var(--sideSpacing);
	font-size: var(--fontSize18);

	@media (max-width: 767px) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		margin-top: 0;
		font-size: var(--fontSize18);
		box-shadow: 0 1px 0 var(--colorGreyLight);
	}
	
	.innerwrapper {
		height: var(--headerHeight);
		display: flex;
		justify-content: center;
		border-bottom: 1px solid var(--colorGreyLight);

		@media (max-width: 767px) {
			position: relative;
			width: 100%;
			height: var(--headerHeight);
			padding-inline: var(--sideSpacing);
			justify-content: space-between;
			align-items: center;
			border-bottom: 0;
		}
		
		nav {
			display: flex;
			position: relative;

			@media (max-width: 767px) {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				width: 100%;
				display: none;
				background-color: var(--colorWhite);
				border-top: 1px solid var(--colorGreyLight);
				border-bottom: 1px solid var(--colorGreyLight);
				box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
			}
			
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;

				@media (max-width: 767px) {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					padding-block: 0.45rem;
				}
				
				li {
					list-style-type: none;
					margin: 0;
					padding: 0 1em;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: var(--colorGreyDark);

					@media (max-width: 767px) {
						width: 100%;
						padding: 0;
						display: block;

						&:first-child {
							display: none;
						}
					}
					
					a {
						color: inherit;
						text-decoration: none;
						display: block;

						@media (max-width: 767px) {
							padding: 0.75rem var(--sideSpacing);
							font-size: var(--fontSize22);
							line-height: 1;
						}
					}
					
					&.current-menu-item {
						color: var(--colorBlack);

						@media (max-width: 767px) {
							a {
								color: var(--colorBlack);
								font-weight: 600;
							}
						}
					}
				}
			}
			
			.nav__indicator {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 0;
				height: 0.2rem;
				background-color: var(--colorGreyLight);
				pointer-events: none;
				transform-origin: left center;

				@media (max-width: 767px) {
					display: none;
				}
			}
		}
	}

	&.is-nav-open {
		.mobile__nav-toggle {
			span {
				@media (max-width: 767px) {
					&:nth-child(1) {
						transform: translateY(0.32rem) rotate(45deg);
					}

					&:nth-child(2) {
						opacity: 0;
					}

					&:nth-child(3) {
						transform: translateY(-0.32rem) rotate(-45deg);
					}
				}
			}
		}
	}
}

.mobile__logo,
.mobile__nav-toggle {
	display: none;
}

.mobile__logo {
	@media (max-width: 767px) {
		display: block;
		color: var(--colorBlack);
		text-decoration: none;
		line-height: 1;
	}
}

.mobile__nav-toggle {
	@media (max-width: 767px) {
		width: 2.25rem;
		height: 2.25rem;
		padding: 0.55rem 0.35rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.26rem;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	
	span {
		@media (max-width: 767px) {
			display: block;
			width: 100%;
			height: 1px;
			background-color: var(--colorBlack);
			transition: transform 220ms ease, opacity 220ms ease;
		}
	}
}

body.frontend {
	main {
		flex: 1;
	}
}

body.frontend footer {
	margin-top: auto;
	font-size: var(--fontSize16);
	margin-bottom: var(--sideSpacing);

	@media (max-width: 767px) {
		margin-bottom: 0;
	}
	
	.innerwrapper {
		height: var(--headerHeight);
		display: flex;
		justify-content: center;

		@media (max-width: 767px) {
			height: auto;
			padding-block: 0.75rem;
		}
		
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;

			@media (max-width: 767px) {
				flex-wrap: wrap;
				gap: 0.25rem 0;
			}
			
			li {
				list-style-type: none;
				margin: 0;
				padding: 0 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: var(--colorGreyDark);

				@media (max-width: 767px) {
					padding-inline: 0.5em;
				}
				
				a {
					color: inherit;
					text-decoration: none;
					display: block;
				}
				
				&.current {
					color: var(--colorBlack);
				}
			}
		}
	}
}

.section__start {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	.innerwrapper {
		display: flex;
		justify-content: center;
		
		.image {
			font-size: 0;
			line-height: 0;
			width: 100%;
			max-width: 40rem;
			
			img {
				width: 100%;
				height: auto;
			}
		}
	}
}

.section__project {
	.innerwrapper {
		display: grid;
		display: grid;
		grid-template-columns: 14rem 1fr;
		gap: 0 4rem;
		align-items: start;

		@media (max-width: 767px) {
			display: block;
		}
		
		.project__sidebar {
			//background-color: lightblue;
			position: sticky;
			margin-bottom: auto;

			@media (max-width: 767px) {
				position: fixed;
				left: var(--sideSpacing);
				right: var(--sideSpacing);
				bottom: var(--sideSpacing);
				z-index: 40;
				margin-bottom: 0;
				background-color: var(--colorWhite);
				border: 1px solid var(--colorGreyLight);
				box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
			}
			
			> ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				font-size: var(--fontSize20);

				@media (max-width: 767px) {
					display: none;
					max-height: min(70svh, 28rem);
					overflow-y: auto;
					padding: 0.45rem var(--sideSpacing) 0.75rem;
					border-top: 1px solid var(--colorGreyLight);
					-webkit-overflow-scrolling: touch;
				}
				
				> li {
					list-style-type: none;
					margin: 0;
					cursor: pointer;
					/*border-bottom: 1px solid yellow;*/
					
					&.current {
						> button {
							font-weight: 600;
							
							&:after {
								transform: rotate(90deg);
							}
						}
					}
					
					> button {
						padding: 0.15em 0 0.1em 0;
						display: grid;
						grid-template-columns: 1fr 0.3em;
						line-height: 1.2;
						border: 0;
						background: transparent;
						font-size: var(--fontSize20);
						font-family: "Cordia-New";
						width: 100%;
						text-align: left;
						cursor: pointer;
						
						&:after {
							content: '';
							background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='11' fill='none' viewBox='0 0 6 11'><path stroke='%23bcbcbc' stroke-linejoin='round' d='m.354.354 5 5-5 5'/></svg>");	
							background-repeat: no-repeat;
							background-size: 98% auto;
							width: 100%;
							aspect-ratio: 6 / 11;
							margin-top: 0.3em;
							transition: transform 250ms ease;
							
						}
					}
					
					> ul {
						list-style-type: none;
						margin: 0;
						padding: 0;
						display: none;
						font-size: var(--fontSize18);
						padding-left: 0;
						line-height: 1;
						padding-bottom: 0.5em;
						
						> li {
							list-style-type: none;
							margin: 0;
							padding: 0;
							color: var(--colorGreyDark);
							
							&.current {
								color: var(--colorBlack);
								font-weight: 600;
							}
							
							a {
								color: inherit;
								text-decoration: none;
								display: block;
								
								@media (hover: hover) {
									&:hover {
										color: var(--colorBlack);
									}	
								}
							}
						}
					}
					
					
				}
			}

			&.is-open {
				.project__sidebar-toggle {
					@media (max-width: 767px) {
						&:after {
							transform: rotate(-90deg);
						}
					}
				}
			}
		}
		
		.project__detail {
			display: flex;
			flex-direction: column;
			gap: 2rem 0;

			@media (max-width: 767px) {
				gap: 1.25rem 0;
			}

			.project__header {
				display: grid;
				grid-template-columns: 1fr 12em;

				@media (max-width: 767px) {
					display: block;
				}
				
				h1 {
					font-size: var(--fontSize34);
					margin: 0;
					font-weight: 600;
					line-height: 0.7;

					@media (max-width: 767px) {
						font-size: var(--fontSize30);
						line-height: 0.85;
					}
				}
				
				.description {
					text-align: right;
					line-height: 0.9;
					font-size: var(--fontSize18);

					@media (max-width: 767px) {
						margin-top: 0.8rem;
						text-align: left;
					}
					
					p {
						&:first-child {
							margin-top: 0;
						}
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
				
			}
			
			.grid {
				--spacing: 2rem;
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				gap: var(--spacing);

				@media (max-width: 767px) {
					--spacing: 1rem;
					display: block;
				}
				
				.grid-col {
					-webkit-box-flex: 1;
					-webkit-flex-grow: 1;
					-ms-flex-positive: 1;
					flex-grow: 1;
					gap: var(--spacing);
					display: flex;
					flex-direction: column;

					@media (max-width: 767px) {
						gap: var(--spacing);
					}
				}
				
				.grid-item {
					font-size: 0;
					line-height: 0;
					display: block;
					
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}

.project__sidebar-toggle {
	display: none;

	@media (max-width: 767px) {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 0.5rem;
		gap: 1rem;
		align-items: center;
		border: 0;
		background-color: var(--colorWhite);
		padding: 0.75rem var(--sideSpacing);
		font-family: "Cordia-New";
		font-size: var(--fontSize20);
		line-height: 1;
		text-align: left;
		cursor: pointer;
	}
	
	&:after {
		@media (max-width: 767px) {
			content: '';
			width: 0.45rem;
			aspect-ratio: 6 / 11;
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='11' fill='none' viewBox='0 0 6 11'><path stroke='%23000000' stroke-linejoin='round' d='m.354.354 5 5-5 5'/></svg>");
			background-repeat: no-repeat;
			background-size: 100% auto;
			transform: rotate(90deg);
			transition: transform 220ms ease;
		}
	}
}