/* -------------------------------------------
   Splash section spacing normalization
   ------------------------------------------- */

/* Consistent vertical rhythm across splash sections
section.about,
section.resume,
section.news,
section.community,
section.contact {
  padding: 20px 0;
}

/* Consistent spacing under section title blocks 
/* .section-title { 
  /* padding-bottom: 0px;    /* template uses padding-bottom for underline spacing */
  /* margin-bottom: 14px;     /* controls gap before content 
} */

/* .section-title h2::after {
   margin: 8px 0 12px 0; /* top | right | bottom | left 
} */ 

/* Avoid double-margin stacking: first heading after section title */
.section-title + h2,
.section-title + h3,
.section-title + h4,
.section-title + .row,
.section-title + .container {
  margin-top: 0;
  margin-bottom: 0;
}

/* Reduce vertical spacing above resume subsection headings */
.resume .resume-title {
  margin-top: -20px;
  margin-bottom: 20px;
}

/* Keep the very first resume title flush under the section title */
/* .resume .resume-title:first-of-type {
  margin-top: -20px;
} */

/* Resume items: keep readable but not airy */
/* .resume .resume-item {
  padding: 0 0 14px 18px;  /* template-like */
  /* margin-top: 10px;
} */ 

/* Job / degree title */
/* .resume .resume-item h4 {
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 4px;
} */

/* Dates */
/* .resume .resume-item h5 {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 6px;
} */

/* Institution / org line */
/* .resume .resume-item p {
  font-size: 16px;
  font-style: italic;
  font-weight: lighter;
} */


/* Institution / org line */
/* .resume .resume-item em {
  font-size: 14px;
  font-weight: bold;
} */

/* Bullet lists */
/* .resume .resume-item ul {
  font-size: 14px;
  margin-top: 6px;
} */

/* Lists in splash sections: reduce excessive bottom spacing */
section.about ul,
section.resume ul,
section.news ul,
section.community ul {
  margin-bottom: 0;
}

/* Optional: if Quarto still emits a title block anywhere you don't want */
body.home .quarto-title-block {
  display: none !important;
}


/* Reduce the big title-to-content gap across splash sections */
.section-title {
  padding-bottom: 12px !important;  /* was likely ~30px */
  margin-bottom: 16px !important;
}

/* Reduce the big title-to-content gap across splash sections */
.resume .section-title {
  padding-bottom: 0px !important;  /* was likely ~30px */
  margin-bottom: 10px !important;
}

/* If there's still space before the first row inside sections */
/* section .section-title + .row {
  margin-top: 0 !important;
} */

/* Sidebar grouped navigation labels and dropdowns */

/* #quarto-sidebar .sidebar-item-text,
#quarto-sidebar .sidebar-link,
#quarto-sidebar .sidebar-title,
#quarto-sidebar .menu-text {
  color: #e6e6e6 !important;
}

#quarto-sidebar .sidebar-item-toggle,
#quarto-sidebar .bi,
#quarto-sidebar .sidebar-tools-main a {
  color: #9aa0a6 !important;
} */


#header #navbar.nav-menu.navbar {
  display: block;
}

/* Buffer at the top of the fixed left sidebar (profile block sat
   flush against the viewport edge otherwise) and a lighter one at
   the bottom of the scrollable nav — enough that "Etc." clears
   browser chrome (notification prompts, mobile toolbars) without
   leaving a huge gap. */
#header {
  padding-top: 24px;
}

#header #navbar.nav-menu.navbar {
  padding-bottom: 24px;
}

/* Equal padding above and below each section's own items, so the gap
   between a section's last item and the divider below it matches the
   gap between that divider and the next section's first item. (Before
   this, the "gap above" also had to make room for an always-present —
   even when unlabeled — .nav-section-label <li>, worth more vertical
   space on its own than every other gap on the sidebar combined;
   build_sidebar_nav.py now only emits that <li> when there's a real
   label to show, so these two paddings are the whole story.) */
#header #navbar.nav-menu.navbar > ul {
  padding-bottom: 10px;
}

#header #navbar.nav-menu.navbar > ul + ul {
  border-top: 1px solid rgba(111, 113, 128, 0.45);
  padding-top: 10px;
  margin-top: 4px;
}

#navbar .nav-section-label {
  color: #6f7180;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 0;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* Top-level nav items — both the plain main-menu links and the
   satellite section's plain links/dropdown headers — a little tighter
   than the template's own defaults (12px/15px padding, 8px
   margin-bottom), which read as too airy for a list this long. */
#navbar.nav-menu.navbar > ul > li > a.nav-link {
  padding: 9px 15px;
  margin-bottom: 2px;
}

#navbar .nav-dropdown details {
  margin: 1px 0;
}

#navbar .nav-dropdown summary {
  align-items: center;
  color: #a8a9b4;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  list-style: none;
  padding: 9px 15px;
  white-space: nowrap;
}

#navbar .nav-dropdown summary::-webkit-details-marker {
  display: none;
}

#navbar .nav-dropdown summary i {
  font-size: 24px;
  padding-right: 8px;
}

#navbar .nav-dropdown summary:hover,
#navbar .nav-dropdown details[open] > summary {
  color: #149ddd;
}

#navbar .nav-dropdown ul {
  padding-left: 14px;
}

/* Tighter spacing for links nested inside a collapsible category
   (e.g. the items under "Science") — they inherit .nav-menu a's
   12px/15px padding + 8px margin otherwise, which is sized for
   top-level items and looks bulky once nested. */
#navbar .nav-dropdown ul a {
  padding: 6px 15px;
  margin-bottom: 0;
  font-size: 14px;
}

/* Tighten markdown lists rendered as <li><p>...</p></li> */
#main li > p {
  margin-bottom: 0;
}

/* Overview cards: clicking image area applies matching filter */
.portfolio .portfolio-wrap[data-filter-trigger] {
  cursor: pointer;
}

/* -------------------------------------------
   Right-side page TOC on inner pages
   theme: none means Quarto ships none of its own
   Bootstrap grid CSS, so <nav id="TOC"> (toc-location:
   right) renders as a plain sibling of the content instead
   of a real right column. A float can fake the column, but
   float + position:sticky diverge once you scroll past the
   float's original (short) height: the reserved column width
   ends there, so tall content beneath it snaps back to full
   width and runs underneath the still-pinned TOC.

   Real fix: assets/js/toc-sticky.js regroups <nav#TOC> and
   everything after it into a single flex row (.quarto-toc-row
   > nav#TOC + .quarto-inner-content) on page load, so the
   sticky TOC has a containing block that's genuinely as tall
   as the content column next to it.
   ------------------------------------------- */

.quarto-toc-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.quarto-toc-row > .quarto-inner-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0; /* let long code/tables shrink instead of overflowing the row */
}

.quarto-toc-row > nav#TOC {
  order: 2;
  flex: 0 0 260px;
  width: 260px;
  padding-left: 18px;
  border-left: 1px solid rgba(111, 113, 128, 0.25);
  font-size: 0.9rem;

  /* Stay parked in the viewport as the content beside it scrolls,
     rather than scrolling away with the rest of the page. */
  position: sticky;
  top: 30px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.quarto-toc-row > nav#TOC h2#toc-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6f7180;
  margin-bottom: 10px;
}

.quarto-toc-row > nav#TOC ul {
  list-style: none;
  padding-left: 0;
}

.quarto-toc-row > nav#TOC ul ul {
  padding-left: 14px;
}

.quarto-toc-row > nav#TOC a {
  display: inline-block;
  padding: 2px 0;
}

@media (max-width: 991px) {
  .quarto-toc-row {
    display: block;
  }

  .quarto-toc-row > nav#TOC {
    width: auto;
    padding-left: 0;
    border-left: none;
    border-bottom: 1px solid rgba(111, 113, 128, 0.25);
    padding-bottom: 12px;
    margin-bottom: 24px;

    /* On narrow viewports the TOC sits inline above the content
       instead of alongside it, so it shouldn't pin in place. */
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* -------------------------------------------
   Inner-page title = the section title
   On index.qmd, "section title" styling comes from hand-authored
   ::: {.section-title} ## Heading ::: blocks. Inner pages don't
   author their own H1 that way — Quarto generates it from the
   YAML `title:` field as <header class="quarto-title-block">
   <h1 class="title">. Give that auto-generated title the same
   visual weight .section-title h2 has, so the page's own title
   reads as the section title, the same way it does on the home
   page. Body-level ## headings underneath it (e.g. "PaleoBooks")
   should NOT also be wrapped in ::: {.section-title} — leave them
   as plain ## and they'll pick up the smaller "subsection" style
   below instead of competing with the page title.
   ------------------------------------------- */

.quarto-title-block .title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
  padding-bottom: 25px;
  position: relative;
  color: #173b6c;
}

.quarto-title-block .title::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #149ddd;
  bottom: 0;
  left: 0;
}

/* Collapse the empty duplicate <header id="title-block-header">
   Quarto emits alongside the real one. */
header#title-block-header:empty {
  display: none;
}

/* Subsection headings within inner-page article content.
   Scoped to .quarto-inner-content (built by toc-sticky.js) so this
   never touches index.qmd, where ## is still meant to read as a
   full section title via ::: {.section-title}. */
.quarto-inner-content h2 {
  font-size: 24px;
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #173b6c;
}

.quarto-inner-content h2 a {
  color: #173b6c;
  text-decoration: none;
}

.quarto-inner-content h2 a:hover {
  color: #37b3ed;
}

.quarto-inner-content h3 {
  font-size: 19px;
  font-weight: 600;
  color: #050d18;
  padding-top: 6px;
}

.quarto-inner-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #173b6c;
  padding-top: 4px;
  margin-bottom: 8px;
}

.quarto-inner-content h5 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f7180;
  margin-bottom: 6px;
}

.quarto-inner-content h6 {
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: #6f7180;
  margin-bottom: 6px;
}

/* -------------------------------------------
   Page-intro card: a little standalone context for a category page
   that doesn't have its own overview yet. Authored as the first
   block in the .qmd body:

     ::: {.page-intro}
     **Science**

     Mixing data science & earth science & nonlinear dynamics
     since 2022!
     :::

   toc-sticky.js moves it into <nav id="TOC">, above "On this page".
   ------------------------------------------- */

.quarto-toc-row > nav#TOC .page-intro {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(111, 113, 128, 0.25);
}

.quarto-toc-row > nav#TOC .page-intro strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #173b6c;
  margin-bottom: 6px;
}

.quarto-toc-row > nav#TOC .page-intro p {
  font-size: 13px;
  line-height: 1.5;
  color: #6f7180;
  margin: 0;
}

/* Optional image on a page-intro card — from a YAML category's
   "image" field (see build_sidebar_nav.py) or hand-authored directly
   in a manual ::: {.page-intro} block. Sized to the TOC column's own
   width so it never needs a per-use width guess. */
.quarto-toc-row > nav#TOC .page-intro img.page-intro-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------
   Breathing room around inner-page content, via two real elements
   (#content-topbar, #content-footer) rather than margin/padding guesses on
   the content itself — see before-body-inner.html and after-body.html.
   Both are empty today but are meant to hold real content later
   (breadcrumbs up top, copyright/links at the bottom); their height
   is what reserves the space in the meantime, so filling them in
   won't suddenly add extra gap on top of what's already there.
   ------------------------------------------- */

.content-topbar {
  min-height: 64px;
}

.quarto-title-block {
  margin-top: 16px;
}

#content-footer.content-footer {
  min-height: 96px;
  margin-left: 300px;
  padding: 24px 30px;
  border-top: 1px solid rgba(111, 113, 128, 0.15);
}

@media (max-width: 1199px) {
  #content-footer.content-footer {
    margin-left: 0;
  }
}

.quarto-toc-row {
  padding-bottom: 40px;
}

/* -------------------------------------------
   Favorite Figures gallery
   Thumbnails link straight to a full-size version via GLightbox
   (bound to .portfolio-lightbox in main.js) — no dependency on the
   filterable .portfolio-wrap/isotope machinery used on the overview
   cards, just a simple hover-lift on a Bootstrap grid.
   ------------------------------------------- */

.favorite-figure {
  margin-bottom: 30px;
}

.favorite-figure img {
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favorite-figure a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.favorite-figure p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #6f7180;
}

.figure-pdf-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #149ddd;
}

.figure-pdf-link:hover {
  color: #173b6c;
  text-decoration: underline;
}

/* -------------------------------------------
   Inline figure banner (e.g. in nonlin_causality.qmd, right under a
   section heading): a filmstrip of thumbnails all sharing one fixed
   height instead of a fixed-width grid, since aspect ratios vary
   widely (a 2x2 results grid vs. a tall PSD panel). Width is left to
   fall out of each image's own aspect ratio. Links to full-size via
   the same .portfolio-lightbox/GLightbox binding used elsewhere.
   ------------------------------------------- */

.figure-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 24px;
}

.figure-banner img.figure-banner-img {
  height: 110px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.figure-banner a:hover img.figure-banner-img {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

@media (max-width: 575px) {
  .figure-banner img.figure-banner-img {
    height: 80px;
  }
}

.figure-banner-more {
  display: inline-block;
  margin-top: -12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #6f7180;
}

.figure-banner-more:hover {
  color: #149ddd;
  text-decoration: underline;
}

/* -------------------------------------------
   Citation lists: References / Talks / Posters / Presentations
   trailers under a topic section, and the Articles/Conference
   Talks/Seminars/Posters lists on the Presentations & Publications
   page. Smaller and more muted than body text — the same "secondary
   text" treatment as .page-intro p — since these are dense reference
   entries meant to be scanned, not read as prose.
   ------------------------------------------- */

.citation-list {
  font-size: 13px;
  line-height: 1.6;
  color: #4a4c52;
}

.citation-list li {
  margin-bottom: 6px;
}

.citation-list strong {
  color: #173b6c;
}

.citation-list a {
  color: #149ddd;
}