:root {
	--pad: 1rem;
}
@media(min-width: 600px) {
	:root {
		--pad: 2rem;
	}
}
@font-face {
	font-family:"MaisonMono";
	src:url("../fonts/MaisonMG-MonoLight.woff2") format("woff2"),url("../fonts/MaisonMG-MonoLight.woff") format("woff"),url("../fonts/MaisonMG-MonoLight.otf") format("opentype");
	font-style:normal;font-weight:300;
}
@font-face {
	font-family:"MaisonMono";
	src:url("../fonts/MaisonMG-MonoRegular.woff2") format("woff2"),url("../fonts/MaisonMG-MonoRegular.woff") format("woff"),url("../fonts/MaisonMG-MonoRegular.otf") format("opentype");
	font-style:normal;font-weight:400;
}

html {
	/*font: 400 16px/1.4 'IBM Plex Mono', monospace;*/
	font: 300 16px/1.2 'MaisonMono', monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #fff;
	background: #000;
}
body, html {
	margin: 0;
}
h1 {
	font-size: 1rem;
	margin: 0;
	font-weight: 400;
}
h2 {
	font-size: 1rem;
	margin: 0 0 .5rem;
	font-weight: 300;
}
a {
	color: inherit;
	text-decoration: none;
	font-weight: 400;
}
strong {
	font-weight: 400;
}
button {
	all: unset;
	cursor: pointer;
	font-weight: 400;
}
button .word:after {
	text-decoration: underline;
}

header {
	padding: var(--pad);
}

header:not(.splitting) {
	opacity: 0;
}

.splitting .whitespace {
	display: inline-block;
	width: 0.5rem;
}
/*.splitting .word {
  animation: slide-in .3s ease-out both;
  animation-delay: calc(.05s * var(--word-index) + .4s );
}*/

@keyframes slide-in {
  from {
    transform: translateY(1.5em);
    opacity: 0;
  }
}
.splitting .word {
	color: transparent;
	position: relative;
	overflow: hidden;
}
.splitting .word:after {
	content: attr(data-word);
	position: absolute;
	color: #fff;
	inset: 0;

	animation: slide-in .3s ease-out both;
  	animation-delay: calc(.05s * var(--word-index) + .4s );
}

#about,
#services {
	padding: 0 var(--pad);
	margin: calc( var(--pad) * -1 ) 0 0;
	max-width: 20rem;
	display: none;
}
.about__close,
.services__close {
	position: fixed;
	top: var(--pad); right: var(--pad);
	height: 3rem; width: 2.25rem;
	background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi40NCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDE2LjQ0IDIxIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTIuMjcgMCA4LjIyIDcuMiA0LjIzIDAgLjYzIDAgNi40MiA5Ljk5IDAgMjEgMy43NSAyMSA4LjMxIDEyLjkgMTIuODQgMjEgMTYuNDQgMjEgMTAuMTEgMTAuMTEgMTYuMDIgMCAxMi4yNyAwIi8+PC9zdmc+') right top/contain no-repeat;

	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}

header > :not(button) {
	transition: opacity .3s;
}

.js-about header > :not(button),
.js-services header > :not(button) {
	opacity: 0.5;
}
.js-services header p,
.js-about header p {
	display: none;
}

.js-about #about {
	display: block;
}
.js-about #about p {
	animation: slide-in .4s .3s ease-out both;
}
.js-about header > button[aria-controls="services"] {
	display: none;
}

.js-services #services {
	display: block;
}
.js-services #services li {
	animation: slide-in .4s .3s ease-out both;
}
.js-services #services li:nth-child(2) { animation-delay: .33s; }
.js-services #services li:nth-child(3) { animation-delay: .36s; }
.js-services #services li:nth-child(4) { animation-delay: .39s; }
.js-services #services li:nth-child(5) { animation-delay: .42s; }
.js-services #services li:nth-child(6) { animation-delay: .45s; }
.js-services #services li:nth-child(7) { animation-delay: .48s; }
.js-services #services li:nth-child(8) { animation-delay: .51s; }
.js-services #services li:nth-child(9) { animation-delay: .54s; }
.js-services #services li:nth-child(10) { animation-delay: .57s; }
.js-services #services li:nth-child(11) { animation-delay: .6s; }
.js-services #services li:nth-child(12) { animation-delay: .63s; }
.js-services #services li:nth-child(13) { animation-delay: .66s; }
.js-services #services li:nth-child(14) { animation-delay: .69s; }
.js-services #services li:nth-child(15) { animation-delay: .72s; }
.js-services #services li:nth-child(16) { animation-delay: .75s; }
.js-services #services li:nth-child(17) { animation-delay: .78s; }
#services ul {
	list-style-type: none;
	padding: 0;
}
#services li:before {
	content: '– ';
}

@keyframes grow {
	to {
		transform: skewX(-17.5deg) translateY(0);
	}
}
.slash {
	position: absolute;
	bottom: var(--pad); right: var(--pad);
	width: 20vh; height: 50vh;
	overflow: hidden;
	z-index: 1;
}
.slash:before {
	content: '';
	position: absolute;
	bottom: 0; left: calc(50% - 2vh);
	width: 4vh; height: 50vh;
	background: #fff;
	transform: skewX(-17.5deg) translateY(100%);
	animation: grow 1s .8s forwards;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.splide {
	background: #000;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
}
.splide__track {
	height: 100%;
}
.splide__list {
	transition: opacity .3s;
	height: 100%;
}
.splide__slide {
	height: 100%;
	position: relative;
	overflow: hidden;
}
.splide__slide img, 
.splide__slide video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.splide__slide__caption {
	position: absolute;
	bottom: var(--pad); left: var(--pad); right: var(--pad);
	opacity: 0;
	animation: fadeIn 1s .5s forwards;
	font-size: 0.8rem;
}
@media(min-width: 768px) {
	.splide__slide__caption {
		font-size: 0.9rem;
	}
}
.splide__slide__caption strong,
.splide__slide__caption span {
	display: block;
}
.js-services .splide__list,
.js-about .splide__list {
	opacity: 0.5;
}

@media(max-width: 400px) {
	#about p:last-child {
		max-width: 16em;
	}
}