html {font-size: 22px;} /* 1rem = 22px */

@view-transition {
    navigation: auto;
}

body {
	background-color: #F6F5F1;
	font-family: serif;
	line-height: 1.45;
	color: #000;
	margin: 0;
	}
a {color:#336699;}
a:hover{color:#AD4C3B;}

main {
    margin-top: 4rem;
	margin-left: 10%;
	width: 80%;
	}

article {
	}

#body {
    display: flex;
    justify-content: space-between;
}

section {
    width: 70%;
}

aside {
    width: 25%;
}

h1, h2, h3, h4 {
	font-family: sans-serif;
	margin-bottom: 0;
    margin-top: 2em;
	}
h2, h3, h4, p, ol, ul { /* H1 is as wide as screen. Other elements use 30em (not rem) width column */
	max-width: 30em;
	}

/* TYPESCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
h1 { /* Standard page title */
	font-size: /* 2.25rem */ 3.375rem;
	line-height: 1em;
	margin-bottom: 2rem; } 
h1.hub { /* GIANT page title for hub screens */
	font-size: /* 3.375rem */ 5.063rem;
	line-height: 1em;
	}
h2 {font-size: 1.5rem;}
h3 {font-size: 1rem;}
h4 {font-size: 1rem; font-style: italic; }


p {	margin-top: 0;} /* Pushes Ps right after Hns */
p.lede {font-size: 1.5rem } /* Large size lead paragraph */
p.caption, p.date { /* .caption used in IMG divs. .date used for last updated lines on various screens */
	font-family: sans-serif; 
	font-size: 0.667rem;
	width: 100%;
	}
p.tagline { /* Used below the title on Method screens to summarize the Method */
	font-family: sans-serif;
	font-size: 1.5rem;
	font-weight: 200;
	width: 100%;
	}

dt {font-family: sans-serif; font-weight: bold;} /* not used anywhere right now */
dd {margin-bottom: 1rem;}

ul, ol {margin-bottom: 1rem;}
ol ol, ul ul {margin-bottom:0;}
ol ol {list-style-type: lower-alpha;}

/*
	SPECIAL HELPERS
*/
.category {text-transform: uppercase;}
.landing {border-top: 0.5rem solid #4C87BA;}
.method {border-top: 0.5rem solid #91B956;}
.note {border-top: 0.5rem solid #B769CA;}

/*
    COLORS
	Light maroon: #DE7D6C
	Maroon: #AD4C3B
	Pink: #E68DAC
	Mauve: #B65C7C
	Light reddish brown: #E6B063
	Reddish brown: #B57F33
	Light brown: #E9CA70
	Brown: #B89940
	Light tan: #EDE488
	Tan: #BDB359
	Light olive green: #CAD570
	Olive green: #99A43F
	Light green: #CAD570
	Green: #A5C574
	Dark green: #739443
	Blue: #7CB9E9
	Dark blue: #4C87BA
	Purple: #B769CA
	Dark purple: #85389A
*/

/*
	TABLE components
*/
div.table {overflow-x:auto;} /* Adds horizontal scrollbar to tables with content that's too wide */ 
table { /* By default, table width collapses to contents */
	border-collapse: collapse;
	margin: 1rem 0 2rem 0;
	}
th, td {
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px solid #ddd;
	}
thead th {
	border-bottom: 3px solid #ddd;
	padding-bottom: 0.25rem;
	}
tr:hover {background-color: #efefef;}

table.wide { /* Wide tables stretch to 100% when that makes content easier to consume */
	font-family: sans-serif;
	font-size: 0.667rem;
	width: 100%;
	}
caption { /* Table caption */
	font-family: sans-serif; 
	font-size: 1rem;
	padding: 0.5rem;
	}
	


/*
	IMAGE components
	Only difference between markup for both image components is class on the container div.
*/
div.image { /* container to sandbox stretched images */
	margin: 2rem 0;
	}
div.image img { /* By default, images stretched to 100% width */
	border: 1px solid #efefef;
	width: 100%;
	}
div.image p.caption {
	text-align: center;
	color: #666;
	max-width: 100%;
	}

div.image-small { /* "Small" images are stretched to 50% width */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin: 2rem 0;
	}
div.image-small img {
	border: 1px solid #efefef;
	width: 50%;
	}
div.image-small p.caption {
	/* font-size: 1rem; */
	color: #666;
	margin-left: 1rem;
	margin-bottom: 0;
	width: 50%;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% and stack image and caption */
	@media screen and (max-width: 50rem) {
		div.image-small {
			display: block;
	}
	div.image-small p.caption {
		margin-left: 0;
	}
}











/*
	HEADER and FOOTER
*/
header, footer {
	color: #666;
	font-family: sans-serif;
	font-size: 0.667rem;
	font-weight: 400;
	padding: 2rem 1rem;
	}
footer {
	background-color: #000;
	color: #777;
}
footer p {
	margin: auto;
	margin-bottom: 1rem;
	max-width: 80%;
	text-align: center;
}
footer p a {
	color: #4C87BA;
}

header a {color:#666;text-decoration: none;}
footer{margin-top:5rem;}

header nav { /* Global nav links */
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	}
header nav a {
	line-height: 0.725rem;
	margin: 0rem;
	padding: 0 1rem;
	}
header nav a strong {
	color:#336699;
}
header nav a:hover {
	color:#666;
}
header nav a:hover strong {
	color:#AD4C3B;
}
header img#logo {
	margin: 0;
}
/* If the screen size is 50rem wide or less, set the widths to 100% */
@media screen and (max-width: 50rem) {
	header {
		padding: 1rem 0;
		margin:0;
	}
	header nav {
		display: block;
		margin-left: 10%;
		}
	header nav a {
		padding: 0;
	}
	header nav a p:first-child {
		margin: 0;
	}
	span.sub {
		display:none;
	}
}







blockquote footer{ /* Blockquotes include footers for more info. These styles override the footer styles set above */
	background-color: white;
	border-top: 1px #666;
	margin-top: 0;
	padding: 0;
	}





/*
	BREADCRUMB
*/
nav.breadcrumb {font-family:sans-serif;font-size: 0.667rem;color:#666;}
nav.breadcrumb a {color:#666;text-decoration:none;}




/*
	ARTICLE IMAGE - if exists, float right
*/
img.article-image {width:100%;}
@media screen and (max-width: 50rem) {
	img.article-image {float:none;width:100%;margin:0;}
	}









/* 
	CALL TO ACTION container
	for links and file downloads
*/
.call-to-action {
	background-color: #fff;
	border: 1px solid #38A340;
	border-radius: 0.5em;
	font:1rem;
	margin-bottom: 1rem;
	padding: 0rem 1rem 0.5rem 1rem;
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 1rem;
	grid-column-gap: 2rem;
	align-items: center;
	max-width: 30em;
	}
a.cta-link { /*for downloads, a is around the div.call-to-action */
	color: #38A340;
	text-decoration: none;
	transition: all 0.23s ease-in-out 0s;
	}
a.cta-link:hover {color: #409444;}
.call-to-action div img {display:block;margin:auto;margin-top:0.5rem} /*center download icon */
.call-to-action div{font-family:sans-serif;font-size:0.667rem;text-align: center;} /* center text */
.call-to-action div:first-child{font-family:serif;text-align: left;} /* left align text on left */
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	.call-to-action {
		grid-template-columns: 1fr;
	}
	}







/* .resource: Thumbnail left, title and content right */
div.resource {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin: 2rem 0;
	}
div.resource img {
	border: 1px solid #efefef;
	margin-right: 1rem;
	width: 8rem;
	}
/* div.resource div.info {
	margin-left: 1rem;
	} */
div.resource h3 {
	margin-top: 0;
	}
div.resource p {
	color: #666;
	font-family: sans-serif;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div.resource {
		display: block;
		margin: 2rem 0;
		}
	div.resource div.info {
		margin-left: 0;
		}
	}





/*
	RESOURCE CARDS
	the little horizontally laid out cards in lists of articles
	they have the cool little color bar at the top
*/
div.resource-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	column-gap: 1rem;
	row-gap: 1rem;
	padding-top: 1rem;
}
div.resource-card {
	background-color: #fff;
	border-top-width: 0.25rem;
	color: #666;
	font-family: sans-serif;
	font-size: 0.667rem;
	padding: 0.5rem;
}





/*
	EMAIL SIGN UP FORM
*/
div#email-signup {
	margin-top: 5rem;
	text-align: center;
}
div#email-signup h3 {
	margin:auto;
	margin-top: 0;
}
div#email-signup input {
	border: 1px solid #38A340;
	box-sizing: border-box;
	border-radius: 0.125em;
	display: block;
	font-size: 1rem;
	padding: 0.25rem 0.5rem;
	margin: 0.5rem auto;
	width: 10rem;
}
div#email-signup input[type=submit] {
	background-color: #38A340;
	color:#fff;
	width: fit-content;
}
div#email-signup p {
	/* border-top: 1px solid #38A340; */
	font: 0.667rem sans-serif;
	margin: 1rem auto;
}




@media screen and (max-width: 50rem) {
	div#wrapper {
		margin-top: 0;
	}
}



/* If the screen size is 30rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 30rem) {
	
	/* SCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
	h1 {
		font-size: 2.25rem;
	}
	h1.hub {
		font-size: 2.25rem;
	}
	h2 {font-size: 1.5rem }
	h3 {font-size: 1rem }
	h4 {font-size: 1rem; font-style: italic; }
	
	p.lede {font-size: 1.25rem }
	p.caption, p.date {
		font-size: 0.667rem;
	}
	p.tagline {
		font-size: 1.25rem;
	}
	caption {
		font-size: 0.725rem;
	}
	p, h1, h2, h3, h4 {
		width: 100%;
	}
}



  :root {
    --toc-width: 100%;           /* fills whatever the right rail gives it */
    --toc-font-size: 0.667rem;
    --toc-line-height: 1.5;
    --toc-gap: 0.6rem;
    --toc-accent: #2563eb;       /* active item color */
    --toc-text: #374151;
    --toc-muted: #9ca3af;
    --toc-bg: #ffffff;
    --toc-border: #e5e7eb;
  }
 
  #essay-toc {
    position: sticky;
    top: 2rem;                   /* offset from top of viewport when stuck */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    box-sizing: border-box;
    scrollbar-width: thin;
    font-family: sans-serif;
  }
 
  #essay-toc-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--toc-muted);
    margin: 0 0 0.75rem;
  }
 
  #essay-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--toc-gap);
  }
 
  #essay-toc a {
    display: block;
    font-size: var(--toc-font-size);
    line-height: var(--toc-line-height);
    color: var(--toc-text);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    transition: color 0.15s, border-color 0.15s;
  }
 
  #essay-toc a:hover {
    color: var(--toc-accent);
  }
 
  #essay-toc a.toc-active {
    color: var(--toc-accent);
    border-left-color: var(--toc-accent);
    font-weight: 500;
  }