/* Tinylabs brand palette — https://tinylabs-brand.netlify.app/#color */
:root {
	--green: #3FCD5F;    /* Bio-Logic Green */
	--sage: #70B78D;     /* Sage Green */
	--gold: #E2B358;     /* Timber Gold */
	--blue: #0177FB;     /* Energy Stream Blue */
	--white: #FFFFFF;
	--graphite: #2B2B2B; /* Graphite Black */
	--walnut: #492601;   /* Walnut Brown */
	--cream: #FFF3D1;    /* Ground colour from the brand's web mockup */

	--display: "DynaPuff", system-ui, sans-serif;
	--body: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--graphite);
	font-family: var(--body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Header. The logo keeps well over the 2x minimum clear space. */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 40px;
}
.logo { display: block; }
.logo img { display: block; width: 168px; height: auto; }

.button {
	background: var(--sage);
	color: var(--white);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 24px;
	border-radius: 999px;
	transition: background .15s;
}
.button:hover { background: var(--green); }
.button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Hero */
.hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
	padding-top: clamp(24px, 6vh, 64px);
}

.kicker {
	font-family: var(--display);
	font-weight: 500;
	color: var(--gold);
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	line-height: 1.1;
}

h1 {
	font-family: var(--display);
	font-weight: 600;
	color: var(--sage);
	font-size: clamp(4rem, 15vw, 10.5rem);
	line-height: 1;
	position: relative;
	z-index: 1;
}

.lead {
	max-width: 32rem;
	margin: 16px auto 28px;
	padding: 0 16px;
	font-size: 1.125rem;
}

.button-large {
	align-self: center;
	font-size: 1.125rem;
	padding: 14px 32px;
}

/* Rocket sits above the title by default, and beside it only when
   the screen is wide enough that it can never touch the text. */
.title { position: relative; align-self: center; }
.rocket {
	display: block;
	width: 64px;
	height: auto;
	margin: 0 auto 12px;
}
@media (min-width: 1180px) {
	.rocket {
		position: absolute;
		top: 0;
		right: calc(100% + 32px);
		width: 130px;
		margin: 0;
	}
}

/* Ground: cream wave with the brand pattern; the mascot stands on it. */
.stage {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 32px;
}

.ground {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 72%;
}
.texture { opacity: .12; mix-blend-mode: multiply; }

.mascot {
	position: relative;
	z-index: 2;
	display: block;
	width: clamp(220px, 28vw, 400px);
	height: auto;
	margin: 0 auto;
}

/* Social links: official glyphs, brand colours only. */
.social {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 72px;
}
.social a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--white);
	color: var(--walnut);
	transition: background .15s;
}
.social a:hover { background: var(--sage); color: var(--graphite); }
.social a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.social svg { width: 22px; height: 22px; fill: currentColor; }

.email {
	position: relative;
	z-index: 2;
	align-self: center;
	margin-top: 16px;
	color: var(--walnut);
	font-weight: 600;
	text-decoration: none;
}
.email:hover { text-decoration: underline; }
.email:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.footer {
	position: relative;
	z-index: 2;
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 40px;
	font-size: .875rem;
	color: var(--walnut);
}

/* Mobile */
@media (max-width: 720px) {
	.header { padding: 16px; }
	.logo img { width: 124px; }
	.button { font-size: .9375rem; padding: 9px 18px; }

	.hero { padding-top: 24px; }
	.rocket { width: 52px; }
	.lead { font-size: 1rem; }

	.ground { height: 60%; }
	.mascot { width: min(86vw, 360px); margin-top: 8px; }

	.footer {
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 24px 16px;
	}
}