/*----------- TEXT ---------- */

/* Fonts */
:root {
	--bs-font-sans-serif: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--bs-font-serif: "Source Serif 4", "Source Serif Pro", serif;
}

/* Headers */
h2 {font-weight: 300; letter-spacing: -.5px; color: #265b87;}
h4 {font-weight: bold; margin-bottom: 1rem; color: #555;}
h5 {font-weight: bold;}

/* Paragraphs */
.homepage p {line-height: 1.35em;}
.caption {font-size: .85em; line-height: 1.3em; color: #888; margin: 10px 0 30px 0;}

/* Links */
a {color: steelblue; text-decoration: none; transition: .1s linear;}
a:hover, a:active {color: black; text-decoration: underline;}

/* Buttons */
.btn.btn-primary {background-color: steelblue; border-color: steelblue; color: white; font-weight: bold;}
.btn.btn-primary:hover {background-color: #265b87; border-color: #265b87; text-decoration: none;}
.btn.btn-light {font-size: .85em; color: #999; margin-right: 10px; padding: 0; border: 0; background: none;}
.btn.btn-light.active {color: #444; }
.btn.btn-light:hover {text-decoration: none; color: black;}
.btn.btn-light:focus {background: none; color: #999;}
.btn.btn-light.active:focus {color: #444;}
.btn.btn-light .bi {margin-right: 5px;}

/* Tooltips */
.tooltip {--bs-tooltip-color: #444; --bs-tooltip-opacity: .98; --bs-tooltip-max-width: 400px;}
.tooltip-inner {background: white; padding: 15px 20px; border-radius: 4px; border: 1px solid #ddd; text-align: left; font-size: 1.1em; line-height: 1.4em;}
.tooltip-inner .ref {margin: 0;}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {border-top-color: #bbb;}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {border-right-color: #bbb;}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {border-bottom-color: #bbb;}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {border-left-color: #bbb;}

/* Tables */
.table.tbl {font-size: .85em; line-height: 1.3em; color: #444;}

/* Icons */
#home .bi, #about .bi {margin-left: 7px;}


/*----------- LAYOUT ---------- */

/* Body */
.col-lg-12 {max-width: 900px;}

/* Header */
.blankbar {margin-top: 50px;}
header {display: flex}
header h1, nav h1, .navbar-brand {font-weight: bold; font-size: 22px; margin: 0; letter-spacing: 1px; text-transform: uppercase;}
.subtitle {font-size: 17px; padding-top: 0.7rem;}
.subtitle span {letter-spacing: 5px;}
.subtitle br {display: none;}

/* Nav */
.navbar {--bs-navbar-padding-y: 0; background: rgba(255,255,255,95%);}
.topbar1 {transition: .1s linear;}
.topbar2 {border-bottom: 1px solid #ddd; transition: .1s linear;}
.navbar .container {margin: 0 auto; max-width: 804px;}
.nav-link {padding: 8px 0; margin-left: 16px; font-weight: bold; text-transform: uppercase; color: steelblue; letter-spacing: 1px;}
.nav-link.active, .nav-link:hover {color: black; text-decoration: none;}
.navbar-toggler, .navbar-toggler:focus {border: 0; box-shadow: none; padding: 0;}
.navbar-expand-sm .navbar-nav .nav-link {padding-right: 0; padding-left: 0;}

/* Banner */
.banner {background: #f4f4f4; color: #444; padding-top: calc(var(--bs-gutter-y) * .5); padding-bottom: calc(var(--bs-gutter-y) * .5);}
.crumb {margin: 20px 0 10px 0; font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.banner h3 {font-weight: bold; font-size: 2rem; letter-spacing: -1px; margin-bottom: 15px;}
.banner .lead, .banner .lead * {font-family: var(--bs-font-serif); font-weight: 400; letter-spacing: -.3px; line-height: 1.35em;}
.banner .date {color: #888; font-size: .9em; line-height: 1.3em;}
.banner .date .bi {margin: 0 5px;}
.banner .date .bullet {padding: 0 5px;}

/* Content */
iframe {width: 100%; z-index: 1;}
.video {max-width: 100%; overflow-x: scroll; justify-content: center}
.container.boxed {margin-bottom: 20px;}
.container.boxed iframe {border: 1px solid #eee; border-radius: 4px; max-width: 1100px; padding: 5px 20px 0 20px; margin: 0 auto;}
.sunken-shadows iframe {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.shadow-top {height: 20px; margin-bottom: -20px; box-shadow: inset 0px 11px 8px -10px #ddd; z-index: 1000; position: relative;}
.shadow-bottom {height: 20px; margin-top: -27px; box-shadow: inset 0px -11px 8px -10px #ddd; z-index: 1000; position: relative;}

/* Footer */
.footer {background: #f7f7f7; color: #777; padding-top: calc(var(--bs-gutter-y) * .5); padding-bottom: calc(var(--bs-gutter-y) * .5);}
.footer span {letter-spacing: 5px;}
.homepage:not(.research) .footer:not(.summary .footer) {display: none;}


/*----------- SIDEBAR ---------- */

/* Sidebars */
.sidebar .key {position: -webkit-sticky; position: sticky; top: 80px;}
.headshot {max-width: 120px; border-radius: 50%; margin: 0 0 15px 15px; border: 6px solid #ddd;}
.research .headshot {border: 6px solid #ddd;}

/* Homepage sidebar */
.contact {float: none;}
.contact li {width: 100%;}
.contact li a {display: block; padding: 7px 10px; line-height: 1.2em; overflow: hidden;}
.contact li.name {color: #333333; font-weight: bold; padding: 7px 10px; line-height: 1.2em;}
.contact li a:hover {text-decoration: none;}
.contact li a:hover {background: #f5f5f5; border-bottom: 0;}
.footer .contact li a:hover {background: none;}
.contact i {padding-right: 5px; margin-bottom: -2px;}
.contact .bi {font-size: .9em;}
.contact-type {display: none;}

/* Research sidebar */
.key li {width: 100%;}
.key li a.btn.btn-primary, .key li a.btn.btn-light {display: block; padding: 7px 10px; line-height: 1.2em; overflow: hidden; text-align: left; font-size: 1rem;}
.key li a.btn.btn-primary {background: none; border: 0; color: #2D5373; font-weight: bold; border: 0; text-decoration: none;}
.key li a.btn.btn-primary:hover {background: #f5f5f5; border: 0; text-decoration: none;}
.key li a.btn.btn-light {background: none; color: #999; border: 0; text-decoration: none;}
.key li a.btn.btn-light:hover {background: #f5f5f5; color: #666;  border: 0; text-decoration: none;}
.key .bi {margin: 0 5px 0 0; font-size: 1em;}


/*----------- CARDS ---------- */

/* Top key for cards */
.top.key {display: block; margin-bottom: 2rem;}
.top.key .btn {display: inline; padding: 0; font-size: 15px; margin-right: 15px;}
.top.key .btn-primary {background: none; border: 0; color: #2D5373; font-weight: bold;}
.top.key .btn-primary:hover {background: none; border: 0; color: #666;}
.top.key .btn-light {background: none; font-weight: normal; border: 0; color: #999;}
.top.key .btn-light:hover {background: none; border: 0; color: #666;}

/* Cards */
.card {margin-bottom: 20px; transition: .1s linear;}
.card-img {width: 125px; float: right; margin: 0 0 15px 10px; transition: .1s linear;}
@media (max-width: 500px) {.card-img {width: 100px;}}
.card-title {font-size: 1em; color: #2D5373; transition: .1s linear;}
.card-text {font-size: .9em; margin-bottom: .5em;}
.card-text .bi {font-size: 1em; margin: 0 5px 0 0;}
.card-text span {margin: 0 5px;}
.card:hover {border: 1px solid rgba(0,0,0,.3); background: #fafafa;}
.card:hover .card-title {color: black;}
.cards .card-footer {padding: 1rem;}
.cards .card-footer .bi {font-size: 1em; margin: 0 0 0 5px;}
.card-body {padding: 16px;}
.card-body .caption {margin: 10px 0 0 0;}
.card a {color: var(--bs-card-color); text-decoration: none;}
.card a:hover {text-decoration: none;}
.abstract {padding: 1.5rem; background: rgba(0,0,0,.025); font-size: 15px; line-height: 1.4em;}
.iframe {width: 100%;}


/*----------- PAGES ---------- */

/* Blog */
.buttons .btn {font-size: .8em; padding: 5px 10px;}
.blog .col-lg-8 {max-width: 750px;}
.blog .body p, .blog .body p *, .blog-ul li, .blog-ul li * {font-family: var(--bs-font-serif); line-height: 1.4em; letter-spacing: -.2px;}
.blog .body p {font-size: 1.1em;}
.photo img {max-width: 1000px;}
.blog .body p:first-child:first-letter {float: left; font-size: 90px; line-height: 60px; padding-top: 15px; padding-right: 8px; padding-left: 3px;}
.blog-ul li {margin-bottom: 15px; font-size: 1.1em;}

/* Research summary */
.summary-header {background: #f8f8f8;}
.summary .h3s {margin: 40px 0 10px 0;}
.summary .h3s h3, #refs h3 {font-weight: bold; margin: 0; padding: 0; color: rgba(0,0,0,.65); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; transition: .1s linear;}
.summary .h3s h3:nth-of-type(2) {color: #999; font-weight: normal; font-size: .95em;}
.summary .h3s h3 .bi {margin: 0 5px; font-size: .9em; position: relative; top: -2px;}
.summary .h3s h3 a:hover {text-decoration: none;}
.bigidea {font-family: var(--bs-font-serif); letter-spacing: -.4px; font-weight: normal; font-size: 1.3em; color: #333; margin: 1rem 0 2rem 0; line-height: 1.3em; transition: .1s linear;}
.bigidea * {font-family: var(--bs-font-serif);}
.details .bigidea {margin: 1rem 0; font-size: 1.2em;}
.homepage:not(.research) #summary {overflow-y: hidden; transition: max-height 0.4s ease-in-out; max-height: 0;}
.ref {margin: 10px 0 17px 0;}
.ref.faded, .ref.faded a {color: #bbb;}
.ref .bi {margin: 0 5px 0 0;}
.ref p {margin-bottom: 0; line-height: 1.3em;}
.about-post {color: #777; line-height: 1.3em;}

@media (max-width: 992px) {
	.summary .bigidea {font-size: 1.2em;}
	.summary .h3s h3 {font-size: 17px;}
}

@media (max-width: 767px) {
	.summary .bigidea {font-size: 1.1em;}
	.summary .h3s h3 {font-size: 16px;}
	.summary .h3s h3 span {display: none;}
}



/*----------- RESPONSIVE STYLES ---------- */

/* Phones */
@media (max-width: 576px) {
	header {display: block;}
	.subtitle br {display: block;}
	.subtitle span {display: none;}
	.nav-link {margin-left: 0; margin-right: 16px;}
}

/* Tablets */
@media (max-width: 769px) {
	.homepage .sidebar {display: none;}
	.homepage:not(.research) .footer:not(.summary .footer) {display: flex;}
	.homepage .summary .footer {display: none;}
	.headshot {margin-right: 20px; margin-bottom: 0;}
	.contact {position: relative; bottom: 0; margin-top: 0;}
	.research .headshot {display: none;}
	.research .sidebar {display: none;}
	.research .top.key {display: block; margin-bottom: 2rem;}
	.key .btn {display: inline; margin: 2px 15px 2px 0;}
	
}

/* Mid-sized screens */
@media (max-width: 860px) and (min-width: 769px) {
	.contact-info {display: none;}
	.contact-type {display: inline;}
}

/* Tablets */
@media (max-width: 860px) {
	.video {justify-content: flex-start}
	.headshot {max-width: 100px; max-height: 100px;}
}