html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: #222;
	font: 100 12px Inter,Helvetica,Arial,sans-serif;
	letter-spacing: -0.5px;
	width: 100vw !important;
	overflow-x: clip;
	background: #fff;
}

a {
	color: #222;
	text-decoration: none;
}

.project a::after {
	content: " \2192";
}

a:hover {
	text-decoration: underline;
}

.bg {
	background-image: url("img/clouds.jpg"), linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 100%);
	background-repeat: repeat-x;
	height: 300px;
	width: 200vw;
	overflow-x: hidden;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	animation: bg-slide 180s linear infinite;
}

.wrapper {
	max-width: 1920px;
	padding: 50px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

header, article section, nav, footer div, .diptych, .text {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 50px;
	margin-bottom: 30px;
}

h1, h2 {
	margin: 0 0 50px;
}

header h2 {
	font-family: Inter,Helvetica,Arial,sans-serif;
	font-weight: normal;
	color: #999;
}

header h2::after {
	content: " \2022";
	font-size: 1.2rem;
	color: #4c4;
	text-shadow: 0 0 15px #4c4;
}

summary, nav, h2, .text blockquote {
	font-family: "Goudy Bookletter 1911",Baskerville,Georgia,"Times New Roman",serif;
	line-height: 1.1;
}

summary {
	font-size: clamp(2rem,4.5vw,3.5rem);
}

summary::before {
	content: '\273A';
	color: #222;
	position: absolute;
	text-align: center;
	left: 0;
	width: 100px;
	margin-left: -52px;
}

.offering {
	font-size: clamp(1.25rem,2.25vw,2rem);
	padding: 12px 0 12px;
	letter-spacing: -1.25px;
	color: #999;
}

.offering span {
	color: #222;
}

article h2, .wrapper > h2 {
	font-size: 0.9rem;
}

nav {
	max-width: 700px;
	grid-gap: 30px;
}

.button, #copied, .text cite {
	font-size: clamp(0.7rem,1.75vw,1.2rem);
	font-family: Inter,Helvetica,Arial,sans-serif;
	transition: all .25s ease-out;
}

.button {
	text-align: center;
	border-radius: 10px;
	background: #c20;
	color: #000;
	padding: 16px 0 15px;
	border-top: 1px solid #a00;
	border-bottom: 1px solid #800;
	border-left: none;
	border-right: none;
	text-decoration: none;
}

a.button:hover {
	opacity: 0.8;
}

.mail {
	background: none;
	border: 1px solid rgba(0,0,0,.2);
	color: #222;
	border-radius: 10px;
	cursor: pointer;
}

a#email:hover {
	border: 1px solid rgba(0,0,0,0.8);
	background: #eee;
	text-decoration: none;
}

.mail span {
	display: none;
	visibility: hidden;
}

#copied {
	opacity: 0;
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 2rem;
}

body footer {
	margin-bottom: 0;
	padding-top: 20px;
	font-size: 1rem;
	background: #111;
}

body footer div {
	margin: 0;
	padding: 50px;
}

footer h2 {
	font-size: clamp(1rem, 5vw, 3rem);
}

footer * {
	margin-top: 0;
	color: #fff;
	opacity: 0.75;
}

article section, footer, .wrapper > section {
	border-top: 1px solid #999;
	padding-top: 60px;
	margin-bottom: 60px;
}

.text {
	padding-top: 50px;
	font-size: clamp(0.8rem,3vw,1.5rem);
}

.text blockquote, .text p {
	margin: 0 20px 20px 0;
}

.text blockquote p {
	margin-bottom: 30px;
}

.text cite {
	font-style: normal;
}

.text strong {
	font-weight: 900;
}

.project .desc .intro {
	color: #222;
	font-size: clamp(1rem,4vw,1.5rem);
}

.project .desc {
	position: -webkit-sticky; /* For Safari */
	position: sticky;
	top: 50px;
	font-size: clamp(1rem,2vw,1.25rem);
	max-width: 750px;
	min-height: calc(100vh - 80px);
}

.project .desc {
	color: #888;
	orphans: 2;
}

.project .desc .meta {
	color: #222;
	margin-top: 50px;
	font-size: clamp(0.9rem,1.25vw,1.25rem);
	position: absolute;
	bottom: 0;
}

.project .desc .meta span {
	color: #888;
	display: block;
	width: 100px;
}

article h2, .wrapper > section h2 {
	font-size: 2.5rem;
	font-weight: 100;
	color: #222;
	margin-bottom: 0;
}

h2 span { letter-spacing: -8px; }

.gallery img, .gallery iframe {
	border-radius: 10px;
	box-shadow: 0 5px 20px #aaa;
	width: 100%;
	display: block;
	margin-bottom: 50px;
}

.noshadow {
	box-shadow: none !important;
}

.gallery iframe {
	padding: 10px 0;
	background: #111;
}

.diptych {
	margin: 0;
}

.label {
	text-align: center;
	text-transform: uppercase;
	background: #fff;
	display: inline;
	padding: 0 1rem;
	margin: -0.5rem auto 0;
	letter-spacing: 1px;
	display: none;
}

#focus {
	display: block;
}

header p.mobile {
	animation: float 3s ease-in-out infinite;
	font-size: 1.5rem;
	opacity: 0.25;
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

 @-webkit-keyframes fade-in {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes bg-slide {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@-webkit-keyframes rotate {
    0% { transform: rotate(-180deg); }
    100% { transform: rotate(180deg); }
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.wide, .mobile { display: none; }

@media (max-height: 800px) {
	.project .desc, .project .desc .meta { position: relative; }
}

@media (min-width: 1500px) {
	summary { font-size: clamp(3.25rem,3.25vw,4.1rem); }
	.offering { max-width: 600px; }
	summary br { display: none; }
	.wide { display: inline-block; }
}

@media (max-width: 800px) {
	.bg { display: none; }
	.wrapper { padding: 2rem; }
	header, header nav { margin-bottom: 0; }
	header, article section, nav, .text { grid-auto-flow: unset; grid-template-columns: none; }
	.text { font-size: clamp(1rem,6vw,2.5rem); }
	.text blockquote { margin: 0 0 50px; }
	h1, h2 { margin: 0 0 60px; }
	header h2 { position: absolute; top: 32px; right: 30px; x}
	.offering { margin-top: 0; padding: 0 0 24px; font-size: clamp(1rem,5vw,2.5rem); }
	.project { padding-top: 0; }
	.project .desc .intro, .text cite { font-size: clamp(1rem,5vw,2rem); }
	.project .desc, .project .desc .meta { position: relative; -webkit-position: relative; top: 0; font-size: clamp(1rem,5vw,2rem); }
	header summary { font-size: clamp(1.5rem,9vw,5rem); }
	.button { font-size: 1.2rem; text-align: center; }
	#copied { margin-top: -1rem; text-align: center; }
	.gallery iframe { padding: 0; width: 100vw; height: 260px; margin-left: -2rem; margin-right: -2rem; border-radius: 0; }
	footer { padding-top: 50px; }
	nav { max-width: 85vw; margin: 0 auto; }
	.mobile, .label { display: block; text-align: center; }
}