:root {
  --neutral-100: #fafafa;
  --neutral-200: #e6e6e6;
  --neutral-400: #666666;
  --neutral-900: #3a3a3a;
}


body  {
	font-family: Inter;
	color: var(--neutral-900);
	background: var(--neutral-100);
	padding: 16px;
}
a {
	color: var(--neutral-900);
}
h1 {

}
h2 {

}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

nav {
	max-width: 1440px;
	margin: 0 auto 24px 0;
	display: flex;
	justify-content: space-between;

	.logo img {
		@media screen and (max-width: 768px) { 
			width: 100px;
		}
	}

	.nav-group {
		display: flex;
		gap: 16px;
		justify-content: flex-end;

		@media screen and (max-width: 768px) { 
			gap: 0;
		}

		.nav-link {
			font-size: 16px;
			font-style: normal;
			font-weight: 800;
			line-height: 36px;
			height: 36px;
			padding: 0 12px;
			border-radius: 18px;
			text-decoration: none;

			&:hover {
				background: var(--neutral-200);
			}
			&.active {
				color: var(--neutral-100);
				background: var(--neutral-900);
			}
		}
	}
}

main {
	max-width: 1440px;
	margin: auto;

	.project-grid {
		/*display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: masonry;*/
		column-count: 3;
		column-gap: 16px;

		@media screen and (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media screen and (max-width: 768px) { 
			grid-template-columns: repeat(1, 1fr);
		}

		> li {
			margin-bottom: 16px;
		}

		.project {
			text-decoration: none;

			.project-img {
				width: 100%;
				margin-bottom: 4px;

				img {

				}

			}

			.project-info {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				align-self: stretch;

				.project-title {
					font-size: 16px;
					font-style: normal;
					font-weight: 800;
					line-height: normal;
				}

				.project-tags {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 8px;

					p {
						color: var(--Neutral-900, #666);
						font-size: 10px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
						letter-spacing: 0.8px;
						text-transform: uppercase;
					}
				}
			}
		}
	}


	.info-group {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 80px;
		padding-top: 200px;

		@media screen and (max-width: 1024px) {
			padding-top: 80px;
		}
		@media screen and (max-width: 768px) {
			display: block;
		}

		.info-bio {
			font-size: 54px;
			font-style: normal;
			font-weight: 700;
			line-height: 60px;
			max-width: 848px; 

			@media screen and (max-width: 1024px) {
				font-size: 42px;
				line-height: normal;
			}
			@media screen and (max-width: 768px) {
				font-size: 32px;
				margin-bottom: 40px;
			}

			a {
				text-decoration-line: underline;
				text-decoration-style: solid;
				text-decoration-skip-ink: auto;
				text-decoration-thickness: 2px;
				text-underline-offset: 2px;
				text-underline-position: from-font;

				&:hover {
					text-decoration: none;
				}

				img {
					position: relative;
                    top: -26px;
                    right: 2px;

        	@media screen and (max-width: 768px) {
						top: -10px;
					}
				}
			}
		}

		.info-detail {

			h2 {
				width: 200px;
				font-size: 16px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
			}

			.info-link-group {
				margin-top: 16px;
				display: flex;
				padding-left: 16px;
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
				
				a {
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: 16px; /* 100% */
					text-decoration: none;

					span {
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: auto;
						text-decoration-thickness: 1px;
						text-underline-offset: 1px; 
						text-underline-position: from-font;
					}

					small {
						color: var(--Neutral-900, #666);
						font-size: 10px;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}

					img {
						width: 6px;
					    position: relative;
    					top: -6px;
					}

					&:hover {
						span {
							text-decoration: none;
						}
					}
				}
			}
		}
	}

	.projectpage-1col {
		width: 100%;
		margin-bottom: 8px;
	}
	.projectpage-2col {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;

		@media screen and (max-width: 1024px) {
			flex-direction: column;
		}

		> * {
			width: calc(50% - 4px);

			@media screen and (max-width: 1024px) {
				width: 100%;
			}
		}

		> img {
			@media screen and (max-width: 1024px) {
				order: 2;
			}
		}

		.projectpage-detail {
			padding: 24px 0 24px 40px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			align-self: stretch;

			@media screen and (max-width: 1024px) {
				padding: 0;
				width: 80%;
			}
			@media screen and (max-width: 768px) {
				width: 100%;
			}

			h1 {
				font-size: 80px;
				font-style: normal;
				font-weight: 800;
				line-height: 84px;
				margin-bottom: 32px;
			}

			.projectpage-detail-group {
				display: flex;
				align-items: flex-start;
				gap: 16px;
				align-self: stretch;
				margin-bottom: 80px;

				@media screen and (max-width: 1024px) {
					margin-bottom: 40px;
				}

				> div {
					width: 50%;
				}

				h2 {
					font-size: 12px;
					font-style: normal;
					font-weight: 700;
					line-height: normal;
				}

				.projectpage-detail-group-inner {
					display: flex;
					padding-left: 16px;
					flex-direction: column;
					align-items: flex-start;
					gap: 2px;
					align-self: stretch;

					p {
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 16px;

						small {
							color: var(--Neutral-900, #666);
							font-size: 10px;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						}
						a {
							text-decoration-line: underline;
							text-decoration-style: solid;
							text-decoration-skip-ink: auto;
							text-decoration-thickness: 1px;
							text-underline-offset: 1px;
							text-underline-position: from-font;

							img {
								width: 6px;
							    position: relative;
		    					top: -4px;
							}
						}
					}
				}
			}

			.projectpage-detail-description {
				font-size: 14px;
				font-style: normal;
				font-weight: 300;
				line-height: 22px; /* 157.143% */
				padding-right: 40px;

				p {
					margin-bottom: 16px;
				}
			}
		}
	}
}

footer {
	width: 100%;
	text-align: right;

	.next-post-link {
		font-size: 16px;
		font-style: normal;
		font-weight: 800;
		line-height: 26px; /* 162.5% */
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: auto;
		text-underline-offset: auto;
		text-underline-position: from-font;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: 80px;
	}

	.copyright {
		color: var(--Neutral-900, #666);
		font-size: 8px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		position: fixed;
		right: 16px;
		bottom: 16px;
	}
}