@charset 'utf-8';

main section {
	padding: 8% 0
}

/* About */
#about h3.copy {
	font-size: 3em;
	position: absolute;
	margin-top: 4em;
	z-index: 2
}
#about h6 {
	margin: 38% 0 0;
	position: absolute;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-lr
}
#about .grid-col-2 > :nth-child(1) {
	align-items: end;
	display: flex
}
#about .grid-col-2 picture {
	margin: 0 -14% 0 0
}
#about .grid-col-2 picture img {
	aspect-ratio: 3 / 4;
	margin: 0 0 0 8%;
	width: 100%
}
@media only screen and (min-width: 1024px) {
	#about .grid-col-2 picture {
		margin: 0
	}
	#about .grid-col-2 picture img {
		aspect-ratio: 5 / 7;
		margin: 0 0 0 16%;
	}
	#about-origins {
		position: relative;
    }
	#about-origins h4 {
		position: static
    }
	#about-origins h4 span {
		position: absolute;
		bottom: .6em;
		left: 0;
		font-size: .6em;
		text-transform: uppercase;
		transform-origin: left bottom;
		white-space: nowrap;
		writing-mode: vertical-lr
    }
	#about-origins p {
		margin-bottom: 0
    }
	#about-origins > div {
		padding: 0 0 0 7.5%
	}
}
@media only screen and (min-width: 1440px) {
	#about > h3 {
		padding: 0 8.5%
	}
}

/* Hello */
#hello p,
#hello figure {
	text-align: center
}
#hello img {
	filter: invert(24%) sepia(11%) saturate(23%) hue-rotate(48deg) brightness(101%) contrast(94%);
	margin: 6em auto 0;
	max-width: 600px;
	min-width: 240px;
	width: 50%
}

/* Studio */
#studio h3 {
	font-size: 3em;
	position: absolute;
	margin-top: 4em;
	right: 10%;
	z-index: 2
}
#studio .list {
	display: flex;
    flex-wrap: wrap;
	margin: 0;
	padding: 0
}
#studio .list > li {
	list-style: none !important;
	width: 50%
}
#studio .list ul {
	font-size: .8em;
	line-height: 2em;
	list-style: none;
	margin: 0;
	padding: 0 0 0 28px
}
#studio .list h4 {
	font-size: 1.2em;
	margin-bottom: 2rem;
	letter-spacing: normal
}
#studio .list span {
	display: block;
	font-size: .6em;
	margin: 4px 14px;
}
#studio .grid-col-2 .grid-col-2 {
	align-items: center;
	display: grid;
	gap: 0 5%;
	grid-template-columns: 1fr 1fr;
	margin: 6rem 0 0
}
#studio .grid-col-2 .grid-col-2 h4 {
	margin-bottom: 0
}
#studio .grid-col-2 .grid-col-2 p {
	font-size: .8em;
	letter-spacing: normal;
	line-height: 1.6em;
	height: auto;
}
@media only screen and (min-width: 1024px) {
	#studio picture {
		margin: 0
	}
	#studio picture img {
		aspect-ratio: 5 / 7;
		margin: 0 16% 0 0;
	}
	#studio .list h4 {
		font-size: 1.4em;
	}
	#business-location .grid-col-2 {
		align-items: start;
		grid-template-columns: 3fr 1fr
	}
}

/* Works */
#works {
	width: auto;
}
#works .list li {
	margin: 0 .2%;
	width: 300px
}
#works .list li h4 {
	font-size: 1.2em;
	font-weight: normal;
	margin: 1em 0 0;
	text-transform: none;
}
@media only screen and (min-width: 640px) {
	#works .list li {
		width: 400px
	}
}