html {
	box-sizing: border-box;
}

*:before, *:after {
	box-sizing: inherit;
}

body {
	--palette-yellow: #f6b618;
	--palette-orange: #f39e1e;
	--palette-fulvous: #dc8a10;
	--palette-green: #56711d;
	--palette-blue: #c8d8f1;
	--palette-brown-light: #583606;
	--palette-brown-dark: #372204;
	--palette-grey-dark: #272727;
	--palette-floral-white: #fef7ec;

	margin: 0;
	background-color: var(--palette-yellow);
	color: var(--palette-brown-dark);
	font-family: 'Mulish', sans-serif;
	font-size: 125%;
}

h1 {
	font-weight: 700;
	font-size: 2.5rem;
	color: var(--palette-brown-light);
	margin: 0;
}

@media screen and (min-width: 64rem) {
	h1 {
		font-size: 4rem;
	}
}

h2 {
	font-weight: 700;
	font-size: 2rem;
	color: var(--palette-brown-light);
	margin: 3rem 0 0;
}

@media screen and (min-width: 64rem) {
	h2 {
		font-size: 3rem;
	}
}

h3 {
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 4.5rem;
}

h2 + h3 {
	margin-top: 3rem;
}

h4 {
	font-weight: 700;
	font-size: 1.25rem;
	margin-top: 3.5rem;
}

a {
	color: var(--palette-brown-dark);
}

a:focus,
a:hover {
	color: var(--palette-yellow);
	background-color: var(--palette-brown-light);
}

p, ul, ol {
	line-height: 1.875rem;
}

* + p, * + ul, * + ol {
	margin-top: 1.875rem;
}

blockquote {
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.75rem;
	padding: 0 1.5rem;
	border-left: 4px solid var(--palette-brown-light);
	margin: 3rem auto 0;
	max-width: 64rem;
}
blockquote p {
	font-size: inherit;
	line-height: inherit;
}
blockquote footer {
	font-size: 1.25rem;
}
blockquote + blockquote {
	margin-top: 3rem;
}

@media screen and (min-width: 64rem) {
	blockquote {
		font-size: 1.5rem;
		line-height: 2.5rem;
		padding: 0 3rem;
		border-left: 0;
	}

	blockquote + blockquote {
		padding-top: 3rem;
		padding-bottom: 1.5rem;
		border-top: 1px solid var(--palette-fulvous);
	}
}

body > header {
	padding: 2rem 1.5rem;
	border-bottom: 0.25rem solid var(--palette-brown-light);
}

@media screen and (min-width: 64rem) {
	body > header {
		padding: 2rem 4rem;
	}
}

body > footer {
	padding: 2rem 4rem 4rem;
	border: 0.25rem solid var(--palette-brown-light);
	border-width: 0.25rem 0 3rem;
}


/* Header */

@media screen and (min-width: 1024px) {

	.branding {
		display: grid;
		/* grid-template-columns: 1fr auto 1fr; */
		padding: 4rem;
	}

	.branding .inner {
		display: grid;
		gap: 2rem 3rem;
		grid-template-columns: 120px minmax(auto, max-content);
	}

	.branding .header-logo {
		grid-row: 1 / span 3;
	}

	.branding .header-text {
		grid-row: 1;
		grid-column: 2;
	}

	.branding .header-nav {
		grid-row: 2;
		grid-column: 2;
	}

}

.header-text h2 {
	margin-top: 0.5rem;
}

.header-nav ul {
	display: flex;
	justify-content: flex-start;
	padding: 0;
}

@media screen and (max-width: 46rem) {
	nav ul {
		flex-direction: column;
	}
}

nav li {
	list-style: none;
}

@media screen and (min-width: 64rem) {
	nav li + li {
		margin-left: 1.5rem;
	}
}

/* Footer */

@media screen and (min-width: 64rem) {
	.contact {
		display: grid;
	}

	.contact .inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2rem;
	}
}

.contact .inner > * {
	align-self: center;
}

.contact-links ul {
	padding-left: 0;
}


/* Main content */

.layout {
	background-color: var(--palette-floral-white);
}

@media screen and (min-width: 64rem) {
	.layout {
		display: grid;
		grid-template-columns: 1fr minmax(min-content, 64rem) 1fr;
	}

	.layout main {
		grid-column: 2;
	}
}

main {
	padding: 2.5rem 1.5rem 5rem;
}

@media screen and (min-width: 64rem) {
	main {
		padding: 2.5rem 4rem 5rem;
	}	
}

main section {
	max-width: 80rem;
	margin: 0 auto;
}

main section + section {
	margin-top: 4rem;
}


/* Accessible colour combo -- Inch Worm // Midnight Blue */

.theme {
	color: #d2ed3b;
	background-color: #1d0235;
}

.theme-alt {
	color: #1d0235;
	background-color: #d2ed3b;
}