/* Carousel image and text scaling for responsive layout */
.carousel-img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

/* Card 1 Main GIF */
.main-gif {
  width: 500px;
  height: 200px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 8px 32px rgba(27,124,75,0.2);
  margin: 1.5em auto 2em auto;
  display: block;
}

/* Card 1 GIF cropping controls - EDIT THESE VALUES TO ADJUST CARD 1 GIF CROPPING */
.card1-gif {
  /* Cropping behavior options:
     - cover: Crops the image to fill the container (default)
     - contain: Shows the full image without cropping (may add letterboxing)
     - fill: Stretches image to fit (may distort) */
  object-fit: cover;
  
  /* Cropping position options:
     - center center: Crops from center (default)
     - top center: Shows top of image, crops bottom
     - bottom center: Shows bottom of image, crops top
     - left center: Shows left side, crops right
     - right center: Shows right side, crops left
     - 25% 75%: Custom position (25% from left, 75% from top) */
  object-position: 0% 75%;
  
  /* Size controls for Card 1 GIF only */
  width: 500px;
  height: 300px;
}

/* Card 3 left GIF - make it larger */
.gif-img {
  max-width: 500px;
  max-height: 500px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Card 3 specific GIF - smaller size to stay within limits */
.card3-gif {
  max-width: 300px !important;
  max-height: 300px !important;
  width: 300px !important;
  height: 300px !important;
}

/* Video styling for Card 3 - Enhanced for Firefox compatibility */
video.card3-gif {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Firefox-specific fixes */
  width: 300px !important;
  height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  /* Ensure consistent aspect ratio across browsers */
  aspect-ratio: 1 / 1;
}

/* Card 2 side GIFs - keep them smaller */
.gif-img-small {
  max-width: 350px;
  max-height: 350px;
  width: 350px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cartoon-img {
  max-width: 400px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
}

/* Card 3 specific cartoon - larger size to fill available space */
.card3-cartoon {
  max-width: 500px !important;
  width: 500px !important;
  height: auto !important;
}

.abs-cartoon {
  position: absolute;
  left: 0;
  top: 150px; /* Moved down from 50px */
  z-index: 2;
  width: 300px;
  height: auto;
}

.abs-cartoon-right {
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 2;
  pointer-events: none;
  width: 600px;
  height: 600px;
  max-width: none;
  max-height: none;
}

.carousel-img-sec5-cartoon {
  max-width: 430px;
  width: 100%;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.carousel-heading {
  font-size: 3rem; /* restored size to match Card 4 */
  margin: 0 0 0.8em 0;
  text-align: center;
  width: 100%;
  color: #4eeaaf;
  text-shadow: 0 2px 12px #1b7c4b, 0 2px 12px #000;
  font-weight: 600;
}

.carousel-textbox {
  max-width: 820px;
  margin: 0.8em auto 0.6em auto;
  padding: 0;
  text-align: justify;
  font-size: 1.12rem; /* slightly larger than default */
  line-height: 1.6;
}

.card3-textbox {
  background: rgba(17,17,17,0.92);
  border-radius: 1em;
  padding: 1em 1.5em;
  line-height: 1.4;
  text-align: justify;
  font-size: 1.12rem;
  line-height: 1.6;
}

/* Normalize carousel media wrapper: remove white framed ::before and ensure media backgrounds are transparent */
.carousel-media {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 900px;
  height: auto; /* let media define height */
  background: transparent;
  padding: 0;
  overflow: visible;
  border-radius: 14px;
}

/* remove white frame entirely */
.carousel-media::before {
  display: none !important;
}

/* Put media above the (now frameless) container and ensure transparent backgrounds */
.carousel-media .carousel-media-item {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: none;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  background: transparent !important;
}

.carousel-media img.carousel-media-item,
.carousel-media video.carousel-media-item {
  background: transparent !important;
}

/* Keep card3 scale behavior */
.carousel-card.card3 .carousel-media .carousel-media-item {
  object-fit: cover; /* fill the box */
  width: 110%;
  height: 110%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
}

@media (max-width: 900px) {
  .carousel-media { height: auto; }
  .carousel-card.card3 .carousel-media .carousel-media-item { object-fit: contain; width: 100%; height: auto; }
}

/* Make video behave like images inside the same box */
.carousel-media video.carousel-media-item {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Specific adjustments so card 2 media doesn't get extra padding from old selectors */
.carousel-card.card2 .carousel-media .carousel-media-item {
  max-width: 720px;
}

/* Ensure vertical rhythm remains consistent */
.carousel-text .carousel-heading { margin-bottom: 0.8em; }
.carousel-media { margin-top: 0.6em; margin-bottom: 0.9em; }

/* Uniform vertical rhythm for carousel cards (title → media → text) */
.carousel-text .carousel-heading {
  margin-bottom: 0.8em; /* consistent gap below title */
}

.carousel-text .carousel-img.single-media,
.carousel-text video.single-media {
  margin-top: 0.6em;    /* small gap above media */
  margin-bottom: 0.9em; /* gap between media and text */
  display: block;
}

.carousel-text .carousel-textbox {
  margin-top: 0; /* text sits directly after media gap */
  padding-top: 0; /* spacing controlled by media margin-bottom */
}

/* Ensure card3 textbox uses same top spacing as others */
.card3-textbox {
  margin-top: 0; /* controlled by media's margin-bottom */
}

/* Keep responsive adjustments but preserve the same rhythm on small screens */
@media (max-width: 900px) {
  .carousel-text .carousel-heading { margin-bottom: 0.6em; }
  .carousel-text .carousel-img.single-media,
  .carousel-text video.single-media { margin-top: 0.5em; margin-bottom: 0.8em; }
  .carousel-text .carousel-textbox { margin-top: 0; }
  .carousel-heading { font-size: 2.2rem; }
}

@media (max-width: 600px) {
  .carousel-heading { font-size: 1.8rem; }
}

/* Ensure consistent vertical rhythm for all cards */
.carousel-text .carousel-heading + .carousel-img.single-media,
.carousel-text .carousel-heading + video.single-media {
  margin-top: 0.6em;
}

/* Small screen adjustments */
@media (max-width: 900px) {
  .carousel-heading { margin-bottom: 0.6em; }
  .carousel-textbox { margin: 0.6em auto; font-size: 1.05rem; }
  .card3-textbox { padding: 0.9em 1.1em; }
}

/* Responsive scaling for medium screens */
@media (max-width: 1200px) {
  .main-gif {
    max-width: 350px;
    height: 150px;
  }
  
  .gif-img {
    max-width: 400px;
    width: 400px;
    height: 350px;
  }
  
  /* Card 3 specific responsive sizing */
  .card3-gif {
    max-width: 700px !important;
    width: 700px !important;
    height: 700px !important;
  }
  
  .card3-cartoon {
    max-width: 700px !important;
    width: 700px !important;
  }
  
  .gif-img-small {
    max-width: 280px;
    width: 280px;
    height: 240px;
  }
  
  .cartoon-img {
    max-width: 320px;
  }
  
  .abs-cartoon {
    width: 240px;
  }
  
  .abs-cartoon-right {
    width: 480px;
    height: 480px;
  }
  
  .carousel-img-sec5-cartoon {
    max-width: 350px;
  }
  
  .carousel-textbox {
    max-width: 600px;
    font-size: 1.4rem !important;
  }
}

/* Hide side GIFs only in Cards 2 and 3 when they would wrap */
@media (max-width: 1100px) {
  /* Only hide the small side GIFs in Card 2, but keep the large GIF in Card 3 */
  .gif-img-small {
    display: none !important;
  }
  
  /* Hide the side containers in Card 2 */
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div:first-child,
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div:last-child {
    display: none !important;
  }
  
  /* Center the remaining content */
  .carousel-card .carousel-text > div[style*="flex-direction: row"] {
    justify-content: center !important;
  }
  
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Responsive scaling for smaller tablets */
@media (max-width: 900px) {
  .main-gif {
    max-width: 300px;
    height: 120px;
  }
  
  .gif-img {
    max-width: 350px;
    width: 350px;
    height: 300px;
  }
  
  /* Card 3 specific responsive sizing */
  .card3-gif {
    max-width: 600px !important;
    width: 600px !important;
    height: 600px !important;
  }
  
  .card3-cartoon {
    max-width: 600px !important;
    width: 600px !important;
  }
  
  .gif-img-small {
    max-width: 250px;
    width: 250px;
    height: 200px;
  }
  
  .carousel-textbox {
    font-size: 1.4rem;
    max-width: 500px;
  }
  
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div:nth-child(2) {
    max-width: 600px !important;
  }
}

/* Hide images on very small screens */
@media (max-width: 700px) {
  .carousel-img,
  .main-gif,
  .gif-img,
  .cartoon-img,
  .carousel-img-sec5-cartoon,
  .abs-cartoon,
  .abs-cartoon-right {
    display: none !important;
  }
  
  .carousel-textbox {
    max-width: 98vw;
    font-size: 1.4rem;
    margin: 0.5em auto;
  }
}

/* Flex row for carousel cards 2 and 3 - only for large screens */
@media (min-width: 1101px) {
  .carousel-card .carousel-text > div[style*="flex-direction: row"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 1em;
  }
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div {
    flex: 1 1 300px;
    min-width: 220px;
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-card .carousel-text > div[style*="flex-direction: row"] > div:nth-child(2) {
    flex: 2 1 400px;
    min-width: 220px;
    max-width: 700px;
    padding: 0 2em;
  }
}

/* Mobile responsive adjustments - only hide small side images */
@media (max-width: 700px) {
  .main-gif {
    max-width: 250px;
    width: 250px;
    height: 100px;
  }
  
  /* Only hide the smaller side GIFs, keep the main GIF */
  .gif-img-small {
    display: none !important;
  }
  
  /* Keep Card 3's large GIF but make it smaller */
  .gif-img {
    max-width: 280px;
    width: 280px;
    height: 240px;
  }
  
  /* Card 3 specific mobile sizing */
  .card3-gif {
    max-width: 500px !important;
    width: 500px !important;
    height: 500px !important;
  }
  
  .card3-cartoon {
    max-width: 500px !important;
    width: 500px !important;
  }
  
  .cartoon-img,
  .carousel-img-sec5-cartoon,
  .abs-cartoon,
  .abs-cartoon-right {
    display: none !important;
  }
  
  .carousel-textbox {
    max-width: 98vw;
    font-size: 1.4rem;
    margin: 0.5em auto;
  }
}

/* Ensure all carousel images and gifs scale responsively but do not stretch when wrapping */
.carousel-card img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Consistent sticky footer for all pages */
html, body {
  height: 100%;
  min-height: 100vh;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.scroll-container, .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
footer {
  width: 100vw;
  background: #111;
  color: #ffffef;
  text-align: center;
  padding: 1.2em 0;
  font-size: 1.1em;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  margin-top: 0;
}
footer a {
  color: #4eeaaf;
  text-decoration: underline;
}
/* Hero section for index page */
body.index-page .hero-index {
  width: 100vw;
  max-width: 100vw;
  margin: 4.5rem auto 2.5rem auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
body.index-page .hero-index h1 {
  width: 100vw;
  max-width: 100vw;
  text-align: center;
  margin: 0 auto;
  display: block;
  font-size: 6vw;
  font-weight: 900;
  margin: 0 0 0.5em 0;
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.index-page .hero-index p {
  font-size: 2vw;
  font-weight: 400;
  margin: 0 0 1em 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.index-page .content {
  margin-top: 0;
}
body.index-page .hero-index {
  padding-top: 50px;
}
/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #222;
  background: none !important;
  background-color: transparent !important;
}

/* Navigation (default for all pages except index.html) */
.navbar {
  background: #111;
  color: #ffffef;
  padding: 1.5em 2em 1em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar h1 {
  color: #ffffef;
  margin: 0;
  font-size: 2.2em;
  letter-spacing: 2px;
}
.navbar nav a {
  color: #ffffef;
  text-decoration: none;
  margin-left: 2em;
  font-weight: 500;
  font-size: 1.1em;
  transition: color 0.2s;
}
.navbar nav a:hover {
  color: #4eaaff;
}

/* Only for index.html: floating dropdown menu styles */
body.index-page .menu-container.floating-menu {
  position: fixed;
  top: 30px;
  right: 40px;
  z-index: 2000;
}
body.index-page .menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 8px;
  z-index: 1001;
}
body.index-page .hamburger-line {
  width: 32px;
  height: 4px;
  background: #fff;
  margin: 4px 0;
  transition: 0.3s;
  border-radius: 2px;
}
body.index-page .dropdown-menu {
  position: absolute;
  top: 120%;
  right: 0;
  background: #111;
  min-width: 220px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 10px 0;
  display: none;
  z-index: 1000;
  margin-top: 10px;
}
body.index-page .dropdown-menu.show {
  display: block;
}
body.index-page .dropdown-menu a {
  color: #ffffef;
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-weight: 500;
  font-size: 1.1em;
  transition: background-color 0.2s, color 0.2s;
}
body.index-page .dropdown-menu a:hover {
  background-color: #333;
  color: #4eaaff;
}

/* Hero Banner */
.hero {
  width: 95vw;
  margin: 0;
  padding: 4vw 0 4vw 0;
  background: none;
  text-align: center;
}
.hero h2 {
  color: #fff;
  font-size: 6vw;
  font-weight: 900;
  margin: 0 0 0 0;
  letter-spacing: 2px;
  line-height: 1.1;
}
.hero p {
  color: #fff;
  font-size: 2vw;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Sections */
.section {
  padding: 3rem 2rem;
  text-align: center;
}
.section.light {
  background: rgba(255, 255, 255, 0.7); /* white, mostly transparent */
  border-radius: 12px;
  padding: 1.5em;
  margin: 2em 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.section.dark {
  background: rgba(30, 64, 175, 0.7); /* blue, mostly transparent */
  color: #ffffef;
  border-radius: 12px;
  padding: 1.5em;
  margin: 2em 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.section h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.section p, .section ul {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
}
.section ul {
  list-style: none;
  padding: 0;
}
.section ul li {
  margin: 0.5rem 0;
}

/* Image Block */
.image-block img {
  max-width: 400px;
  width: 100%;
  margin: 2rem auto;
  display: block;
}
.caption {
  font-size: 0.9rem;
  color: #666;
}
/* Footer always at the bottom, consistent style */

footer a {
  color: #1b7c4b;
  text-decoration: underline;
}

footer a:hover {
  text-decoration: underline;
}

/* Background Video styling */
.background {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
}

.background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Background overlay */
.background-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* semi-transparent white */
  z-index: -1;
  pointer-events: none;
}

/* Ensures content appears above background */
.content {
  position: relative;
  z-index: 1;
}

/* Optional: Make sure .image-block stays transparent */
.section.image-block {
  background: none;
  box-shadow: none;
}

/* Welcome block */

/* Carousel section */
.carousel-section {
  width: 100vw;
  background: transparent;
  margin: 0.5em 0 0 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25em; /* Add space below carousel for scrolling past cards */
}

/* Notch */
.carousel-notch {
  width: 120px;
  height: 28px;
  background: #23272b;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: absolute;
}
.carousel-card.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Carousel text */
.carousel-text {
  position: relative;
  width: 100%;
  color: #ffffef;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.carousel-text h3 {
  margin: 0 0 0.5em 0;
  /* font-size intentionally removed so .carousel-heading sets size */
  font-weight: 700;
}
.carousel-text p {
  margin: 0;
  font-size: 1.1em;
}

/* Carousel dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.7em;
  margin-top: 2.5em;
  margin-bottom: 4em;
  z-index: 10;
  position: relative;
}
.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #23272b;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.carousel-dot.active {
  background: #1b7c4b;
  border-color: #1b7c4b;
}

/* Responsive */
@media (max-width: 900px) {
  .welcome-block {
    padding: 1.2em 0.5em 1em 0.5em;
    max-width: 98vw;
  }
  .carousel-card {
    padding: 2.2em 0 1.2em 0;
    min-height: 400px;
  }
  .carousel-notch {
    width: 70px;
    height: 16px;
    top: -16px;
  }
  .carousel-section {
    margin-top: 40px;
  }
  .hero {
    padding: 1em 0.5em;
    max-width: 95vw;
  }
  .person-card {
    flex-direction: column;
    max-width: 98vw;
    min-height: unset;
    align-items: center;
  }
  .person-photo {
    width: 120px;
    height: 150px;
    margin: 1em 0 0 0;
  }
  .person-info {
    padding: 1.2em 1em 1.2em 1em;
  }
}

/* Lock footer to bottom */
/* ...existing code... */

/* People page styles - image left, oval, soft blend */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  margin: 2em 0;
}

.person-card {
  display: flex;
  flex-direction: row; /* Image on left */
  align-items: center;
  background: #111;
  border-radius: 18px;
  box-shadow: 0 2px 16px #1b7c4b33, 0 1px 6px #000a;
  border-left: 4px solid #1b7c4b;
  border-right: 2px solid #1b7c4b;
  color: #ffffef;
  margin-bottom: 2em;
  padding: 1.5em;
  display: flex;
  gap: 2em;
}

.person-photo {
  width: 180px;
  height: 220px;
  object-fit: cover;
  background: #eee;
  border-radius: 50% / 45%; /* Oval shape */
  margin: 0 2.5em 0 1.5em; /* Increased left margin to move image right */
  box-shadow: 0 0 0 3px rgba(200,200,200,0.25), 0 4px 24px 0 rgba(80,80,80,0.08);
  border: 3px solid rgba(255,255,255,0.7);
  /* Soft blend with background */
  filter: drop-shadow(0 0 12px rgba(120,120,120,0.10));
  transition: box-shadow 0.2s;
  align-self: center;
}

.person-info {
  flex: 1;
  padding: 2em 2.5em 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.person-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.7em;
  gap: 0.2em;
}

.person-header h3 {
  margin: 0 0 0.2em 0;
  font-size: 1.5em;
  font-weight: 700;
  color: #ffffef;
  /* Ensure name is not cut off */
  word-break: break-word;
}

.person-email {
  color: #1e40af;
  font-size: 1em;
  text-decoration: none;
  margin-bottom: 0.2em;
  font-weight: 500;
  word-break: break-all;
}

.person-cv {
  color: #0077cc;
  font-size: 1em;
  text-decoration: underline;
  margin-bottom: 0.5em;
}

.person-cv-list {
  margin: 0 0 0.7em 1.2em;
  padding: 0;
  font-size: 1em;
}

.person-cv-list li {
  margin-bottom: 0.2em;
  list-style: disc;
}

.person-bio {
  margin-top: 0.5em;
  font-size: 1em;
  color: #ffffef;
  text-align: justify;
}

.person-links {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5em;
}

.person-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f3f3;
  color: #222;
  transition: background 0.2s, color 0.2s;
  font-size: 1.2em;
  border: 1px solid #e0e0e0;
  text-decoration: none;
}

.person-cv-icon, .person-orcid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.2em;
  border: 1px solid #e0e0e0;
  text-decoration: none;
  margin-left: 0.2em;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.person-cv-icon {
  background: #2563eb;
  color: #ffffef;
  border: 1px solid #2563eb;
}
.person-cv-icon:hover {
  background: #1742a0;
  border: 1px solid #1742a0;
}
.person-orcid {
  background: #A6CE39;
  color: #ffffef;
  border: 1px solid #A6CE39;
}
.person-orcid:hover {
  background: #7bb420;
  border: 1px solid #7bb420;
}

.person-links a:hover {
  background: #e0eaff;
  color: #0077b5;
}

@media (max-width: 900px) {
  .person-card {
    flex-direction: column;
    max-width: 98vw;
    min-height: unset;
    align-items: center;
  }
  .person-photo {
    width: 120px;
    height: 150px;
    margin: 1em 0 0 0;
  }
  .person-info {
    padding: 1.2em 1em 1.2em 1em;
  }
  .hero {
    padding: 1em 0.5em;
    max-width: 95vw;
  }
  .carousel-section {
    margin-top: 40px;
  }
}

/* Dark background for page */
body.publications-page, html.publications-page {
  background: #111 !important;
  color: #ffffef !important;
}

/* Overlay should be dark */
.background-overlay {
  background: rgba(17,17,17,0.7) !important;
}

/* Publication cards dark */
.publication {
  background: #111 !important;
  color: #ffffef !important;
  border-radius: 16px;
  box-shadow: 0 2px 16px #1b7c4b33, 0 1px 6px #000a;
  border-left: 4px solid #1b7c4b;
  border-right: 2px solid #1b7c4b;
}

/* Publication title and year green or white */
.pub-title {
  color: #ffffef !important;
}
.pub-year {
  color: #4eeaaf !important;
  border-bottom: 1px solid #1b7c4b !important;
}

/* Citation and other text white */
.pub-citation, .pub-info-block, .pub-doi {
  color: #ffffef !important;
}

/* Table of contents dark */
.pub-toc {
  background: #222 !important;
  color: #ffffef !important;
  border-left: 4px solid #1b7c4b;
  border-right: 2px solid #1b7c4b;
}
.pub-toc a {
  color: #ffffef !important;
}
.pub-toc h4 {
  color: #ffffef !important;
}

.pub-header-bar {
  color: #ffffef !important;
}

/* Search bar dark */
.pub-search-bar {
  background: #222 !important;
  box-shadow: 0 2px 12px #1b7c4b33;
}

.pub-search-bar label,
.pub-search-bar input,
.pub-search-bar select,
.pub-search-bar button {
  color: #ffffef !important;
}
.pub-search-bar input,
.pub-search-bar select {
  background: #111 !important;
  border: 1px solid #1b7c4b !important;
}
.pub-search-bar button {
  background: #000000 !important;
  color: #ffffef !important;
}

/* Publication number badge blue for contrast */
.pub-number {
  background: #1e40af !important;
  color: #ffffef !important;
}

/* Adjust links for visibility */
a {
  color: #4eeaaf !important;
}
a:hover {
  text-decoration: underline;
}

/* Make sure all text is readable */
.publication * {
  color: #ffffef !important;
}

/* Ensure menu does not affect layout - only apply on non-index pages */
body:not(.index-page) .menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 1000;
  pointer-events: auto;
}

/* Card 3 helpers (migrated from inline styles; no visual change) */
.card3-title {
  /* Make card3 title behave like other carousel headings (no absolute positioning) */
  position: static;
  left: auto;
  transform: none;
  text-align: center;
  width: 100%;
  margin: 0 0 0.8em 0;
  z-index: 10;
}

.card3-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  margin: 4em auto 0 auto;
  position: relative;
  z-index: 4;
  gap: 1em; /* REDUCED: from 2em to 1em - elements get closer */
  padding: 2em 0.5em; /* REDUCED: side padding from 1em to 0.5em */
  /* Firefox compatibility fixes */
  flex-wrap: nowrap;
  min-height: 0;
  box-sizing: border-box;
}
.card3-video-wrap {
  flex: 0 0 280px; /* REDUCED: from 300px to 280px */
  width: 280px; /* REDUCED: from 300px to 280px */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Firefox compatibility fixes */
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.card3-text-wrap {
  flex: 1;
  max-width: 800px; /* REDUCED: from 1000px to 800px */
  min-width: 400px !important; /* REDUCED: from 600px to 400px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5em; /* REDUCED: from 1em to 0.5em */
  /* Firefox compatibility fixes */
  flex-shrink: 1;
  box-sizing: border-box;
  min-width: 0; /* Important for Firefox text wrapping */
}
.card3-cartoon-wrap {
  flex: 0 0 450px; /* REDUCED: from 500px to 450px */
  width: 450px; /* REDUCED: from 500px to 450px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  /* Firefox compatibility fixes */
  flex-shrink: 0;
  box-sizing: border-box;
}
.card3-cartoon-img {
  width: 450px !important; /* REDUCED: from 500px to 450px */
  max-width: 450px !important; /* REDUCED: from 500px to 450px */
  height: auto;
  position: relative;
  pointer-events: none;
  /* Firefox compatibility fixes */
  display: block;
  box-sizing: border-box;
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  .card3-row {
    gap: 2em; /* Maintain consistent gap for Firefox */
  }
  
  video.card3-gif {
    /* Firefox video element fixes */
    width: 300px !important;
    height: 300px !important;
    object-fit: cover !important;
  }
}

/* Unified carousel card and media sizing for index page */
body.index-page .carousel-card {
  /* make all index carousel cards the same visual size */
  max-width: 1200px; /* match welcome block width */
  width: 100%;
  min-height: 520px; /* consistent card height to align content */
  padding: 2.5em 2em; /* consistent internal spacing */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Single central media used by Cards 1-3 */
.carousel-img.single-media,
video.single-media {
  width: 400px; /* default visual size */
  max-width: 90%;
  height: auto; /* scale proportionally */
  object-fit: contain; /* scale without cropping */
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.35);
  margin: 0.8em auto 1.2em auto; /* consistent spacing under heading */
  display: block;
}

/* Per-card overrides */
.carousel-card.card1 .carousel-img.single-media,
.carousel-card.card1 video.single-media {
  width: 360px;
}

.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  width: 500px; /* ~25% larger than 400px base */
}

.carousel-card.card3 .carousel-img.single-media,
.carousel-card.card3 video.single-media {
  width: 400px;
  border-radius: 60% / 40%;
  border: 3px solid #1b7c4b22;
  background: #e6f4ea;
  box-shadow: 0 4px 24px #1b7c4b22;
}

/* Tweak: scale up Card 2 media by ~15% and reduce padding for Cards 2 & 3 */
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  width: 575px; /* 500px * 1.15 ≈ 575px */
  max-width: 94%;
}

/* Card 2: reduce media container by ~15% and increase media element by ~10% */
.carousel-card.card2 .carousel-media {
  /* previously max-width: 900px on general .carousel-media; reduce for card2 */
  max-width: 765px; /* 900px * 0.85 = 765px */
}

.carousel-card.card2 .carousel-media .carousel-media-item.carousel-img.single-media,
.carousel-card.card2 .carousel-media .carousel-media-item.video.single-media,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  /* increase image size by ~10% from 575px -> ~633px */
  width: 633px !important;
  max-width: 92% !important; /* keep responsive cap */
  height: auto !important;
  object-fit: contain !important;
}

/* Further tweak: scale Card 2 container down another 20% and increase media element by ~10% */
.carousel-card.card2 .carousel-media {
  /* tighten container further from 765px to ~612px (765 * 0.8) */
  max-width: 612px; /* ~15%+20% cumulative reduction from original 900px */
}

.carousel-card.card2 .carousel-media .carousel-media-item.carousel-img.single-media,
.carousel-card.card2 .carousel-media .carousel-media-item.video.single-media,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  /* increase image size by ~10% from 633px -> ~696px */
  width: 696px !important;
  max-width: 94% !important; /* keep responsive cap */
  height: auto !important;
  object-fit: contain !important;
}

/* Make Card 2 image fill its container, then set the container to the image size */
.carousel-card.card2 .carousel-media {
  max-width: 696px; /* container matches desired image width */
  width: 100%;
}

/* Force the media element to fill the container (horizontal fill) and preserve aspect ratio */
.carousel-card.card2 .carousel-media .carousel-media-item,
.carousel-card.card2 .carousel-media img.carousel-media-item,
.carousel-card.card2 .carousel-media video.carousel-media-item,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  width: 100% !important; /* fill container width */
  height: auto !important;  /* keep intrinsic aspect ratio */
  object-fit: cover !important; /* crop if necessary to fill visually */
}

/* Card 2: ensure no letterboxing or visible background; force crop and focal point */
.carousel-card.card2 .carousel-media {
  /* keep the container size set previously but explicitly hide overflow so cropped media is clean */
  max-width: 696px;
  width: 100%;
  background: transparent !important; /* ensure container shows page background */
  overflow: hidden !important; /* clip any letterboxing or extra media area */
}



/* Responsive fallback: keep same behaviour but scale down */
@media (max-width: 900px) {
  .carousel-card.card2 .carousel-media { max-width: 92%; }
  .carousel-card.card2 .carousel-media .carousel-media-item { width: 92% !important; }
}

/* Responsive: reduce sizes on smaller viewports */
@media (max-width: 900px) {
  .carousel-img.single-media,
  video.single-media {
    width: 92%;
    margin: 0.8em auto 1.0em auto;
    border-radius: 12px;
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  }
  
  .carousel-card.card2 .carousel-img.single-media,
  .carousel-card.card2 video.single-media {
    width: 200%;
  }
}

@media (max-width: 700px) {
  /* On very small screens, keep media smaller and stacked */
  .carousel-img.single-media,
  video.single-media {
    width: 98%;
    height: auto;
    border-radius: 8px;
    box-shadow: none;
  }
  body.index-page .carousel-card {
    padding: 1em 0.8em;
  }
}

/* Tighter Card 2 sizing: scale image down ~10% and make its container fit snugly */
.carousel-card.card2 {
  /* reduce the card padding so the surrounding box doesn't add excess space */
  padding: 1.2em 1em !important; /* was larger; smaller for card2 only */
  box-sizing: border-box;
}

.carousel-card.card2 .carousel-media {
  /* scale container down ~10% from 696px -> ~627px so image appears 10% smaller */
  max-width: 627px !important;
  width: 200% !important; /* keeps responsive behavior */
  padding: 0 !important; /* remove internal container padding */
  margin: 0.6em auto 0.9em auto !important; /* preserve vertical rhythm but centered */
  overflow: hidden !important; /* clip any overflow cleanly */
  background: transparent !important;
}

.carousel-card.card2 .carousel-media .carousel-media-item,
.carousel-card.card2 .carousel-media img.carousel-media-item,
.carousel-card.card2 .carousel-media video.carousel-media-item,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  width: 150% !important; /* fill the (now smaller) container */
  height: 150% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}

@media (max-width: 900px) {
  .carousel-card.card2 { padding: 1em 0.6em !important; }
  .carousel-card.card2 .carousel-media { max-width: 200% !important; }
  .carousel-card.card2 .carousel-media .carousel-media-item { width: 200% !important; }
}

/* Make Card 2 behave like Card 1: same media size, fit, and padding */
.carousel-card.card2 {
  /* match the default index-page card padding so box doesn't feel tight or loose */
  padding: 2.5em 2em !important; /* same as body.index-page .carousel-card */
  box-sizing: border-box;
}

.carousel-card.card2 .carousel-media {
  /* reset container sizing so media defines the visual size */
  max-width: 900px !important; /* restore general carousel-media max */
  width: auto !important;
  padding: 0 !important;
  margin: 0.6em auto 0.6em auto !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Make the media itself match Card 1's dimensions and behaviour */
.carousel-card.card2 .carousel-media .carousel-media-item,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  width: 360px !important; /* same visual size as card1 */
  max-width: 90% !important;
  height: auto !important;
  object-fit: contain !important; /* do not crop */
  object-position: center center !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.35) !important;
  margin: 0.8em auto 1.2em auto !important;
  display: block !important;
}

@media (max-width: 900px) {
  .carousel-card.card2 .carousel-media .carousel-media-item,
  .carousel-card.card2 .carousel-img.single-media,
  .carousel-card.card2 video.single-media {
    width: 200% !important;
    max-width: 250% !important;
  }
}

/* Final: make Card 2 media match Card 1/3 size and crop to the inner focal area (zoomed in more) */
.carousel-card.card2 .carousel-media {
  position: relative !important;
  overflow: hidden !important; /* clip excess so inner area is visible */
  max-width: 360px !important; /* match Card 1 visual width */
  width: 200% !important;
  margin: 0.8em auto 1.0em auto !important;
  height: auto !important;
  background: transparent !important;
}

.carousel-card.card2 .carousel-media .carousel-media-item,
.carousel-card.card2 .carousel-media img.carousel-media-item,
.carousel-card.card2 .carousel-media video.carousel-media-item,
.carousel-card.card2 .carousel-img.single-media,
.carousel-card.card2 video.single-media {
  position: relative !important;
  left: -0% !important; /* shift left so expanded image centers visually */
  top: 0 !important;
  width: 250% !important;   /* enlarge so ~20% is cropped each side (zoom in more) */
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important; /* crop while preserving center */
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  /* Added transform to scale the media by 1.25 and keep the focal point centered */
  transform: scale(1.25) !important;
  transform-origin: center center !important;
}

/* On medium screens use a gentler crop */
@media (max-width: 900px) {
  .carousel-card.card2 .carousel-media { max-width: 92% !important; }
  .carousel-card.card2 .carousel-media .carousel-media-item,
  .carousel-card.card2 .carousel-media img.carousel-media-item,
  .carousel-card.card2 .carousel-media video.carousel-media-item,
  .carousel-card.card2 .carousel-img.single-media,
  .carousel-card.card2 video.single-media {
    left: -12% !important;
    width: 200% !important;
  }
}

/* On small screens reduce crop to avoid cutting important content */
@media (max-width: 700px) {
  .carousel-card.card2 .carousel-media { max-width: 98% !important; }
  .carousel-card.card2 .carousel-media .carousel-media-item,
  .carousel-card.card2 .carousel-media img.carousel-media-item,
  .carousel-card.card2 .carousel-media video.carousel-media-item,
  .carousel-card.card2 .carousel-img.single-media,
  .carousel-card.card2 video.single-media {
    left: -6% !important;
    width: 112% !important;
  }
}