/**
 * Micro reset
 header, section, div, body, h1, p {
	margin: 0; padding: 0;
}*/

:root {
	--color-primary: #ffffff;
	--color-secondary: #000000;
	--max-width: 1512px;
	--margin-gutter: 3em;
}
html {
	font-size: 100%;
	font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.5;
	min-width: 100vw;
	min-height: 100vh;
}

html, body {
	margin: 0; padding: 0;
}

body {
	color: var(--color-primary);
	background: #164258;
	/* background: linear-gradient(to bottom, ##448899 0%, #BBBBCC 100%); */
	max-width: var(--max-width);
	margin: 0 auto;
}

h1 {
	color: var(--color-primary);
	text-align: center;
}

section {
	margin: 0 auto;
}

.label {
	color: var(--color-primary);

	text-align: right;

	font-size: 2.5rem;
	font-style: normal;
	line-height: 2.5rem; /* 100% */

	letter-spacing: .01em;
}

.wrap {
	margin: 8em var(--margin-gutter);
	/* width: 920px; */

	display: flex;
	justify-content: flex-end;

	/* background: #164258; */
}

img.logo {
	width: 100%;
}
img.tagline {
	margin-top:1em;
	width: 640px;
}
/* sections */

#where {
	margin-top: 1em;
}

/*#what {}*/

#when {
	margin-top: 3.25em;
}

/* breakpoints - just one for < logo actual size --> break to "mobile" */
/* calc(2 * var(--margin-gutter))) ~ meh */
@media (max-width: calc(920px + 6em)) {
	body {
		width: 100vw;
		margin: 0;
	}
	.wrap {
		/* width: auto; */
		float: none;
		margin: 8em 2em;
	}
	.label {
		font-size: clamp(1.7rem, 3.7vw, 4rem);
		line-height: 1em;
	}
	img.tagline {
		width: 100%;
		max-width: 640px;
	}
	#when {
		margin-top: 12vw; /* scale this down relative to vp width */
	}
}

/* utility classes */

.screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	padding: 0;
	margin: -1px;
}

.hidden {
	display: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}