:root {
	--_font-sans: 'Montserrat', sans-serif;
	--font-body: var(--_font-sans);
	--font-heading: var(--_font-sans);
	--_color-blue: #00a0dd;/*rgb(0,160,221)*/
	--_color-navy: #002d5c;/*rgb(10,45,92)*/
	--_color-navy-light-2-5: #003266;
	--_color-navy-light-5: #003770;
	--_color-gold: #ffb819;/*rgb(255,184,25)*/
	--color-dark: var(--_color-navy);
	--color-dark-light-1: var(--_color-navy-light-2-5);
	--color-light: #fff;
	--color-brand:var(--_color-blue);
	--color-accent:var(--_color-gold);
	--container-width: 50rem;
	--back-to-top-size: 2em;
	--main-padding-inline-start: .75em;
	--main-padding-inline-end: calc(var(--main-padding-inline-start) + var(--back-to-top-size));
	--spacing-base: 1em;
	--spacing-section: 3rem;
	--list-indent: 1.2em;
	--scroll-margin: calc((((1.4 + (.25 * 2)) * 5) + (.5 * 2)) * .8rem );
}




/* ==========================================================================
## Base
========================================================================== */
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	min-height: 100dvh;
}
html {
	/*16 -> 20 @720*/
	font-size: clamp(1rem, 1vw + .8rem, 1.25rem);
	
}
body {
	font-family: var(--font-body);
	line-height: 1.4;
	background: var(--color-dark);
	color: var(--color-light);
	overflow-x: clip;
}

.page-header,.page-footer {
	padding-block: 1.5em;
	padding-inline: var(--main-padding-inline-start);
}
main {
	padding-inline: var(--main-padding-inline-start) var(--main-padding-inline-end);
}


h1,h2,h3,h4,h5 {
	font-family: var(--font-heading);
	color: var(--color-light);
	margin: 0;
	line-height: 1.125;
	text-wrap: balance;
}
/* Scale: 1.333 */
h1 {font-size: 3.157em;}
h2 {font-size: 2.369em;}
h3 {font-size: 1.777em;}
h4 {font-size: 1.333em;}
/* Scale: 1.2 */
h1 {font-size: 2.074em;}
h2 {font-size: 1.728em;}
h3 {font-size: 1.44em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1em;}

h1 {
	text-align: center;
}
p,ul,ol {
	margin: 0;
}
ul,ol {
	padding-inline-start: var(--list-indent);
}

li + li {
	margin-top: .5em;
}

section {
	scroll-margin-top: var(--scroll-margin); /* magic number for sticky nav */
	padding-block: var(--spacing-section);
}

p + h2 {
	margin-top: 1em;
}

a:any-link {
	color: var(--color-accent);
}
:is(a,summary):focus-visible {
	outline: 0.15em solid;
	outline-offset: 0.05em;
	text-decoration: none;
	border-radius: 0.1em;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

figcaption {
	margin-block-start: 0.2em;
}
summary {
	color: var(--color-accent);
	cursor: pointer;
}

/* :target > h2 {
		position: relative;
		display: flex;
		align-items: center;
}
:target > h2::before {
		content: ">";
		position: absolute;
		right: 100%;
		color: var(--color-accent);
		font-size: 0.75em;
		margin-right: 0.25em;
} */





/* ==========================================================================
	 ## General
========================================================================== */
main :is(h1, h2, h3, h4, h5, p, ul, ol) + :is(h1, h2, h3, h4, h5, p, ul, ol) {
	margin-top: var(--spacing-base);
}
main :is(h1, h2, h3, h4, h5) + :is(h1, h2, h3, h4, h5) {
	margin-top: 1.333rem;
}
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.back-to-top {
	position: sticky;
	bottom: 1em;
	margin-inline: auto calc(-1 * ((var(--main-padding-inline-start) / 2) + var(--back-to-top-size)));
	display: grid;
	place-items: center;
	width: var(--back-to-top-size);
	border-radius: 100%;
	background-color: var(--color-dark);
}
.back-to-top svg {
	width: 100%;
	fill: currentColor;
}
.container {
	max-width: var(--container-width);
	margin-inline: auto;
}
.full-width {
	--full-width-diff: calc((100vw - min(var(--container-width),100vw)) / -2);
	margin-inline-start: calc(var(--full-width-diff) - var(--main-padding-inline-start));
	margin-inline-end: calc(var(--full-width-diff) - var(--main-padding-inline-end));
}
.color-brand {
	color: var(--color-brand);
}
.pdf {
	font-size: .75em;
	font-style: italic;
}



/* ==========================================================================
	 ## Header
========================================================================== */
.logo-wrap {
	background: var(--color-light);
	padding-block: .25em;
	display: flex;
	justify-content: center;
}
.logo-wrap img {
	width: 6em;
}

.page-nav {
	position: sticky;
	top: 0;
	background: var(--color-dark-light-1);
	font-size: .8em;
	display: flex;
	justify-content: center;
	border-block: .1em solid var(--color-brand);
	z-index: 1;
	padding-block: .5em;
}
.nav-list {
	margin: 0; padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}
.nav-item {
	flex: 1 1 auto;
	margin-top: 0;
	padding-block: .25em;
	display: grid;
	place-items: center;
	text-align: center;
	position: relative;
}








/* ==========================================================================
	 ## Footer
========================================================================== */
.copyright {
	text-align: center;
}







/* ==========================================================================
	 ## Main
========================================================================== */
.trail-render {
	margin-block-start: var(--spacing-base);
}
.trail-render img {
	height: max(10em,25vw);
	object-fit: cover;
}

hr {
	--size: .5em;
	height: hypot(var(--size),var(--size));
	border: 0;
	display: grid;
	place-items: center;
	margin: 0;
	margin-inline-end: calc(-1 * var(--back-to-top-size));
}
hr::before {
	content: ""; display: block;
	--offset: calc(1.75 * var(--size));
	--negOffset: calc(-1 * var(--offset));
	height: var(--size);
	width: var(--size);
	color: var(--color-accent);
	background-color: currentColor;
	box-shadow: 
		var(--negOffset) var(--offset) 0 0,
		var(--offset) var(--negOffset) 0 0;
	transform-origin: center;
	transform: rotate(45deg);
}

.outreach_image {
	max-width: 30em;
	margin-block: var(--spacing-base);
}

.timeline {
	margin-inline: 0;
}
.timeline img{
	max-width: 20rem;
}
#timeline-text {
	list-style: disc;
}


/* ### FAQ
-------------------------------------------------------------------------- */
.faq-list {
	padding-inline-start: calc(var(--list-indent) + (var(--main-padding-inline-start))/2);
}
.faq-item::marker {
	font-family: inherit;
	font-weight: 700;
	color: var(--color-brand);
}
.faq-item + .faq-item {
	margin-top: calc(2 * var(--spacing-base));
}

.faq-question {
	font-weight: 700;
	color: var(--color-brand);
}



/* ### Section specific
-------------------------------------------------------------------------- */
#overview {
	scroll-margin-top: var(--scroll-margin);
	padding-block-start: var(--spacing-section);
}



/* ==========================================================================
	 ## Media Queries
========================================================================== */
@media (min-width: 32em) {
	.timeline {
		margin-inline: .5em;
	}
}
@media (min-width: 45em) {
	:root {
		--main-padding-inline-start: 1.5rem;
		--list-indent: 1.5em;
		--scroll-margin: calc((1.4 + .25 + .5) * 2 * .8rem );
	}
	.nav-list {
		flex-direction: row;
	}
	.nav-item {
		padding-inline: 1.5em;
	}
	.nav-item + .nav-item::before {
		--thickness: 0.1em;
		content: "";
		display: block;
		background: var(--color-brand);
		width: var(--thickness);
		height: 2em;
		position: absolute;
		left: calc(var(--thickness) * -.5);
	}
	.timeline {
		margin-inline: 1em;
	}
}