/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


@font-face {
	font-family: "Caveat-Bold";
	font-display: swap;
	src: url("/fonts/caveat-bold.woff2") format("woff2");
}

@font-face {
	font-family: "Hammersmith One";
	font-display: swap;
	src: url("/fonts/hammersmith_one.woff2") format("woff2");
}

@font-face {
	font-family: "Afacad";
	font-display: swap;
	src: url("/fonts/afacad.woff2") format("woff2");
}


/* Use sane border-box model for all boxes. Otherwise, e.g. section-body is larger than its parent (main). */
*, *:before, *:after {
	box-sizing: border-box;
}

:root {
	--main-width: min(94%, 756px);
	--main-offset: calc(50% - var(--main-width)/2);  /* the distance of the main text from the left border */
	--nav-bar-height: 38px;

	--h2-font-size: 3rem;
	--h3-font-size: 1.7rem;
	--h4-font-size: 1.5rem;
	--h5-font-size: 1.3rem;
	--h6-font-size: 1rem;

	--grey-8: #fcfbf8;
	--grey-7: #eeedeb;
	--grey-6: #e2e1dc;
	--grey-5: #918d87;
	--grey-4: #77746e;
	--grey-1: #424140;
	--grey-0: #333333;

	--beige-4: #e7dfd8;
	--beige-3: #b7a99e;
	--beige-2: #8b7d71;
	--beige-1: #654f3a;
	--beige-0: #281f15;

	--bright-yellow: #e5d9bd;
	--darker-yellow: #c7bca4;
	--bright-blue: #bed3e3;
	--darker-blue: #a6b9c7;
	--bright-red: #e3c4c3;
	--darker-red: #c7acab;

	--button-icon-height: 60px;
	--blue-button-off: #34445e;
	--blue-button-on: #2c3a50;
	--green-button-off: #345e57;
	--green-button-on: #2c4f49;

	--modal-backdrop: rgba(0,0,0,0.8);
}

html {
	scroll-behavior: smooth;
}

/* Note: Default root font size is 16px. */
body {
	min-height: 100vh;
	line-height: 1.7;
	font-family: Afacad, Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: var(--beige-0);
	background-color: var(--beige-4);
}


nav-bar {
	position: fixed;
	width: 100%;  /* Don't use 100vw as that would include the scrollbar if there is one. */
	height: var(--nav-bar-height);
	padding: .1rem 0 .1rem 0;
	text-align: center;
	/* color: var(--grey-8); */
	background-color: var(--grey-8);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-color: var(--grey-6);
	z-index: 2;
	font-family: "Hammersmith One", Georgia, Garamond, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 22px;
	font-variant: small-caps;

	a {
		text-decoration: none;
		margin: 0 8px 0 8px;
	}

	a:link, a:visited {
		color: var(--beige-0);
	}
}

scroll-anchor {
	display: inline;
	position: relative;
	top: calc(-18px - var(--nav-bar-height));
}

main {
	display: block;
	position: relative;
	width: 100%;
	min-height: 100vh;  /* same as <body> */
}

section {
	width: 100%;
	/* min-height: 100vh; */
	padding: calc(var(--nav-bar-height) + 18px) 0;

	&.yellow {
		background-color: var(--bright-yellow);
		background-image: linear-gradient(150deg in oklab, var(--bright-yellow), var(--darker-yellow));
	}

	&.red {
		background-color: var(--bright-red);
		background-image: linear-gradient(150deg in oklab, var(--bright-red), var(--darker-red));
	}

	&.blue {
		background-color: var(--bright-blue);
		background-image: linear-gradient(150deg in oklab, var(--bright-blue), var(--darker-blue));
	}

	&.dark {
		background-color: var(--grey-0);
	}

	&.footer {
		color: var(--grey-8);
		background-color: var(--grey-0);

		& a {
			color: var(--grey-5);
		}
	}
}

section-body {
	display: block;
	width: var(--main-width);
	margin: 0 auto;
	border-radius: 8px;
	background-color: var(--grey-8);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section-body {
	padding: 18px 24px 38px 24px;
}

@media (width >= 445px) {
	section-body {
		padding: 18px 56px 38px 56px;
	}
}

flow-block {  /* keeps content as a block and doesn't flow it around an image */
	display: table;
	width: fit-content;
}

section-body,
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

details {
	margin: 6px 0;
}

summary {
	/* We have some <summary> elements with floating spans inside (to have some text stick to the right). By default, this
	 * breaks on small screens, where the <summary> just overflows. Setting `contain: layout` solves the problem. Using
	 * `display: flow-root` would also work but seems to remove the small arrow marker from the summary.
	 *
	 * https://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside */
	contain: layout;
	cursor: pointer;
	font-size: 1.25rem;
	background-color: var(--grey-7);
	padding: 0 0 0 18px;
	border-radius: 8px;
	margin-bottom: 4px;

	* {
		display: inline;
	}
}

#banner {
	display: none;
	aspect-ratio: 765 / 283;
	height: var(--nav-bar-height);
	position: fixed;
	z-index: 2;
	right: 16px;
}

#logo {
	width: 120px;
	height: 120px;
	position: absolute;
	z-index: 1;
	top: calc(var(--nav-bar-height) + 8px);
	left: 8px;
}

@media (width >= 750px) {
	#logo {
		width: 160px;
		height: 160px;
		z-index: 3;
		top: calc(var(--nav-bar-height) / 2);
	}
}

@media (width >= 1040px) {
	#logo {
		width: 200px;
		height: 200px;
		left: calc(var(--main-offset) - 130px);
	}
}

/* ============ Headings & Paragraphs ============ */
p, .p {
	display: block;
	margin: 1rem 0;
}
details > p {
	margin: .5rem 0;
}
h2, h3, h4, h5, h6 {
	font-family: "Hammersmith One", Georgia, Garamond, "Times New Roman", Times, serif;
	margin: 18px 0 8px 0;
	font-weight: 600;
}
h2 {
	font-family: "Caveat-Bold", Georgia, Garamond, "Times New Roman", Times, serif;
	text-align: center;
	font-size: var(--h2-font-size);
	line-height: 1.2;
	margin: 18px 0 36px 0;
}
h3 {
	font-size: var(--h3-font-size);
	line-height: 1.2;
}
h4 {
	font-size: var(--h4-font-size);
	line-height: 1.3;
}
h5 {
	font-size: var(--h5-font-size);
	line-height: 1.3;
}
h6 {
	font-size: var(--h6-font-size);
	line-height: 1.4;
}


/* ============ Other ============ */
img {
	object-fit: cover;  /* preserve aspect ratio of images */
	height: auto;
}

button {
	padding: 0 0 0 0;
}

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--button-icon-height);
	padding: 0 0 0 0;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: var(--blue-button-off);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	font-variant: small-caps;
	text-align: center;
	text-decoration: none;

	&:hover {
		background-color: var(--blue-button-on);
	}

	&:active {
		background-color: var(--blue-button-on);
		top: 2px;
	}

	&.green {
		background-color: var(--green-button-off);
		&:hover {
			background-color: var(--green-button-on);
		}

		&:active {
			background-color: var(--green-button-on);
			top: 2px;
		}
	}

	&> .icon {
		width: 30px;
		padding: 15px 15px 15px 15px;
		flex: 0 0 var(--button-icon-height);
		background: rgba(0,0,0,0.15);
	}
}

.two-col {
	display: grid;
	grid-template-columns: max-content auto;
	column-gap: 1em;

	> l {
		justify-self: end;
	}
}


/* ============ Modals ============ */
modal {
	&> input {
		display: none;

		&:checked {
			&~ label > modal-backdrop {
				display: block;
			}
			&~ .modal-popup {
				display: block;
			}
		}
	}

	&> label > modal-backdrop {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 4;
		background: var(--modal-backdrop);
	}
}

dialog::backdrop {
	background: var(--modal-backdrop);
}

.modal-popup-style {
	max-width: 756px;
	padding: 38px 56px 38px 56px;
	border-radius: 8px;
	border-style: none;
	background-color: var(--grey-8);
}

.modal-close {
	cursor: pointer;
	line-height: 1;
	width: 1lh;
	height: 1lh;
	text-align: center;
	font-size: x-large;
	font-weight: bold;
	background-color: var(--blue-button-off);
	color: #fff;
	border-radius: 50%;
	border: none;

	position: absolute;
	left: 100%;
	top: 0%;
	transform: translate(calc(-100% - 24px), 24px);

	&:after {
		display: inline-block;
		content: "×";
		vertical-align: bottom;
		transform: translateY(-2.5px);
	}

	&:hover {
		background-color: var(--blue-button-on);
	}
}

.modal-popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}


/* ============ Hamburger Menu ============ */
#nav-links {
	background-color: inherit;
}

.menu-button {
	--menu-button-height: 24px;
	--menu-button-width: 32px;
	--menu-button-padding: calc((var(--nav-bar-height) - var(--menu-button-height)) / 2);

	display: none;  /* hide on desktop */
	position: fixed;  /* so open and close buttons can overlap */
	z-index: 3;
	flex: none;
	width: calc(var(--menu-button-width) + 2 * var(--menu-button-padding));
	height: var(--nav-bar-height);
	padding: var(--menu-button-padding);

	background-color: transparent;
	border: none;
	&:hover {
		background-color: rgba(255, 255, 255, .2);
	}
}

#menu-open {
	row-gap: 24%;
	&>span {
		background-color: var(--beige-0);
		border-radius: 20px;
		transition: transform 200ms ease-in-out;
	}

	&>#menu-top { transform-origin: 0% 0%; }
	&>#menu-bot { transform-origin: 0% 100%; }
}

@media (width <= 750px) {  /* switch to hamburger menu for mobile */
	nav-bar {
		&>#nav-links {
			display: flex;
			flex-direction: column;
			gap: .1lh;
			position: fixed;
			overflow: hidden;
			top: var(--nav-bar-height);
			width: 100%;
			height: 100%;
			transform: translateX(-100%);
			font-size: 28px;
			transition: transform 200ms ease-in;
		}
	}

	#menu-open {
		display: grid;

		&:focus {
			&>#menu-top { transform: translateX(7px) rotate(45deg) scale(.93); }
			&>#menu-mid { transform: scaleY(0); }
			&>#menu-bot { transform: translateX(7px) rotate(-45deg) scale(.93); }
			
			&~#menu-close { display: block; }
			&~#menu-backdrop { display: block; }

			&~nav-bar {
				z-index: 2;
				&>#nav-links {
					min-width: 10ch;
					transition: transform 200ms ease-out;
					transform: translateX(0);
				}
			}
		}
	}
}