/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;800&family=PT+Serif:ital,wght@0,400;1,700');

/* colors */
:root {
	--background-color: #f7f5f2;
	--inset-background-color: #632A3E;
	--inset-highlight-color: #e8b9c4;
	--inset-text-color: #efd9bd;
	--link-color: #893A55;
	--link-hover-color: #AF4A6D;
	--heading-color: #f99a34;
	--secondary-heading-color: #af2f4d;
	--copy-text-color: #2b1103;
	--sans-font: 'Inter', sans-serif;
	--serif-font: 'PT Serif', serif;
}

/* resets */
html, body {
	padding: 0;
	margin: 0;
	border: 0;
}
* {
	box-sizing: border-box;
}

/* overall styles */
body {
	background-color: var(--background-color);
	color: var(--copy-text-color);
	font-size: 16px;
	line-height: 1.75;
	font-family: var(--serif-font);
}

/* general text stuff */
h1, h2, h3 {
	margin-bottom: 0;
	margin-top: 1em;
	color: var(--heading-color);
	font-family: var(--sans-font);
	font-weight: 800;
	clear: both;
	line-height: 1.25em;
}
h1 {
	font-size: 4rem;
}
h2 {
	font-size: 3rem;
	border-bottom: 5px dashed var(--inset-highlight-color);
}

a {
	text-decoration: none;
	color: var(--link-color);
}
a:hover {
	text-decoration: underline;
	color: var(--link-hover-color);
}

.inset {
	font-family: var(--sans-font);
	background-color: var(--inset-background-color);
	color: var(--inset-text-color);
}
.inset a {
	color: var(--inset-highlight-color);
}

/* header */
header {
	padding: 1rem;
	padding-bottom: 0.5rem;
	margin: 0;
}

header h1 {
	margin: 0;
	display: inline-block;
}

header > * {
	display: inline-block;
}

a.left-nav {
	text-decoration: none;
}
.logo {
	height: 3rem;
}

/* header > .right-nav */
.right-nav {
	display: inline-block;
	float: right;
}

.right-nav a {
	color: var(--inset-text-color);
	font-size: 1.25rem;
}

.right-nav li {
	display: inline-block;
	margin-right: 2rem;
}

/* footer */
footer {
	text-align: center;
	padding: 2rem;
}

/* layout */
.container {
	width: 100%;
	display: grid;
	grid-template-areas:
		"hero hero"
		"side action";
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 60vh 1fr;
}
.full-hero {
	grid-area: hero;
	width: 100%;
	object-fit: cover;
	height: 100%;
}
.boring-area {
	grid-area: side;
}

/* CTA button */
.call-to-action {
	grid-area: action;
	background-color: var(--heading-color);
	color: white;
	margin: 1rem;
	text-align: center;
	font-family: var(--sans-font);
	border-radius: 4rem;
	font-size: 4rem;
	padding-top: 3.5rem;
}


/* mobile */
@media screen and (max-width: calc(100ch)) {
}