/* System typography and quiet, content-first academic layout. */
:root { --ink: #000; --muted: #000; --line: #e5e5e5; --link: #1765a7; --banner-orange: #e97800; --banner-amber: #fff4df; }
body { background: #fff; color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; }
#quarto-content { width: 100%; }
/* Span Quarto's outer grid so its default article width does not constrain us. */
#quarto-content > main.content {
  grid-column: screen-start / screen-end;
  max-width: 1300px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}
/* The header itself is the top banner, so navigation sits on the image. */
body { padding-top: 0 !important; overflow-x: clip; }
#quarto-header {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  background: #222 url("images/top-banner.jpg") center top / cover no-repeat;
  border: 0;
}
.navbar {
  max-width: none;
  min-height: clamp(120px, 8vw, 150px);
  margin: 0;
  padding: 1rem 2rem 0;
  background-color: rgba(0, 0, 0, .1) !important;
  --bs-navbar-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}
.navbar-brand, .navbar .navbar-brand:hover { color: #fff; }
.navbar .navbar-brand, .navbar .navbar-brand:hover { text-decoration: none; cursor: default; }
.navbar-collapse { justify-content: flex-end; }
.navbar-toggler { border-color: rgba(255, 255, 255, .65); }
.navbar-toggler-icon { filter: none; }
/* Lab identity lives in the banner; allow the tagline to wrap on narrow screens. */
.navbar > .navbar-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none !important;
}
/* Center the lab identity above the navigation, as in the banner reference. */
.navbar .navbar-brand-container {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  margin: .75rem 0 0 !important;
}
.navbar .navbar-collapse { grid-column: 1; grid-row: 2; margin-top: .2rem; justify-content: flex-end; }
.navbar .navbar-title { display: block; width: 100%; text-align: center; }
.navbar-brand-container { order: 2; flex: 0 0 100%; min-width: 0; text-align: center; margin: .75rem 0 0 !important; }
.navbar-toggler { order: 0; margin-left: auto; }
.navbar-collapse { order: 1; flex-basis: 100%; width: 100%; }
.navbar-brand { display: block; width: 100%; white-space: normal; margin-right: 0; font-weight: 600; }
.banner-lab-name { display: block; font-size: clamp(2rem, 2.8vw, 3rem); line-height: 1.15; }
.banner-tagline { display: block; margin-top: .3rem; font-size: clamp(.8rem, 1vw, 1rem); font-weight: 400; line-height: 1.5; }
.navbar-collapse { flex-grow: 0; }
.introduction > section:first-child > h2 { margin-top: 0; }
.navbar-nav { gap: 1rem; }
.navbar .nav-link, .navbar .nav-link:hover { color: #fff; }
.navbar .nav-link.active { color: #a9d7ff; text-decoration: underline; text-underline-offset: .45em; }
.navbar a:focus-visible, .navbar button:focus-visible { outline-color: #fff; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.3; }
h1 { font-size: 2rem; margin-bottom: 1rem; }
h2 { font-size: 1.45rem; border: 0; margin-top: 2.2rem; padding: 0; }
h3 { font-size: 1.1rem; }
p { margin-bottom: 1.1rem; }
.site-banner {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.site-banner img { width: 100%; height: clamp(100px, 13vw, 180px); object-fit: cover; display: block; }
.banner-bottom { margin-top: 1rem; }
/* Keep the lower portion visible when the bottom banner is cropped. */
.banner-bottom img { object-position: center bottom; }
.intro-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 3rem; }
.profile-photo { width: 180px; height: auto; border: 1px solid var(--line); }
.profile p { font-size: .94rem; color: var(--muted); }
.profile h3 { margin-top: 1.2rem; }
.profile p.name-pronunciation { font-size: .8rem; font-weight: 400; margin-top: -.35rem; margin-bottom: .65rem; }
.social-links { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: -.35rem 0 0; font-size: 10px; }
.social-links a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.social-links .bi { font-size: .75rem; }
.profile .social-links + p { margin-top: 0; }

.application-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1.25rem;
}
.application-option {
  padding: 1.35rem 1.5rem 1.1rem;
  border: 1px solid #f2c27d;
  border-top: 4px solid var(--banner-orange);
  background: var(--banner-amber);
}
.application-option h3 { margin-top: 0; margin-bottom: .7rem; }
.application-option h3, .application-option a { color: #c65300; }
.application-option p:last-child, .application-option ul:last-child { margin-bottom: 0; }
.application-option ul { padding-left: 1.25rem; }
.application-note {
  margin: 1.25rem 0 1.5rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--banner-orange);
  background: #fffaf1;
  color: var(--muted);
}
.application-note p { margin: 0; }

.research-tagline { color: var(--muted); font-size: .95rem; }
.content-note { color: var(--muted); font-size: .92rem; margin: 1.8rem 0; }
.quarto-figure { margin: 1.8rem 0 2.5rem; text-align: left; }
.quarto-figure img { max-width: 760px; width: 100%; }
figcaption { color: var(--muted); font-size: .86rem; text-align: left; }
.publication { margin: 1.8rem 0; }
.publication p { margin: .25rem 0; }
.publication .authors, .publication .venue { color: var(--muted); font-size: .94rem; }
footer.footer { margin-top: 0; padding-top: 0; }
.nav-footer { color: var(--muted); font-size: .85rem; min-height: 0; padding: 0 1.3rem .4rem; }
.nav-footer-center, .nav-footer-center p { margin-top: 0; margin-bottom: 0; }
.nav-footer-center { padding-top: 0; }
.nav-footer-center p { line-height: 1.2; }
/* Keep long news archives scrollable without extending the whole page. */
.news-panel { max-height: 280px; overflow-y: auto; padding-right: .75rem; scrollbar-width: thin; }
.news-panel li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; margin-bottom: .65rem; }
.news-panel li > p { display: contents; }
.news-panel .news-date { white-space: nowrap; }
.news-panel ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.news-panel:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
@media (max-width: 767px) {
 .news-panel { max-height: 220px; }
 .news-panel li { grid-template-columns: 5rem minmax(0, 1fr); gap: .6rem; }
 #quarto-content > main.content { padding: 1.8rem 1.2rem 2rem; }
 .intro-grid { grid-template-columns: 1fr; gap: 1.8rem; }
 .application-options { grid-template-columns: 1fr; }
 .profile-photo { width: 150px; }
 .navbar { padding: 1rem 1.2rem 0; }
 .navbar .navbar-brand-container { width: 100%; margin: .75rem 0 0 !important; }
 .navbar .navbar-title { text-align: center; }
 .navbar .navbar-toggler { grid-column: 1; grid-row: 2; justify-self: end; }
 .navbar .navbar-collapse { grid-row: 3; }
 .banner-lab-name { font-size: 1.5rem; }
 .banner-tagline { font-size: .75rem; }
 .navbar-collapse { width: 100%; }
 .navbar-nav { gap: .25rem; }
 .navbar-collapse { margin-top: 1rem; }
 .navbar .nav-link { padding: .6rem 0; }
 h1 { font-size: 1.8rem; }
}