/* styles.css */
/*Could design a genetics motif*/
/*Issues*/
/*For skill heatmap, will want to put skills on y-axis on right */
/*Need to add selected publications, grants/awards section*/
/*Add links in publication section */
/* possibly add https://n2c2.dbmi.hms.harvard.edu/ as talk given in 2019. */
/* layout for plot needs to be tighter*/
/*layout for talks may need to be tighter*/
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif; /* Change to Roboto font */
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Cap the content width on large monitors. Bootstrap used to supply this via its
   own .container rule (max-width: 1320px); it is set explicitly here so the layout
   does not depend on a third-party stylesheet. Without it, the research paragraph
   runs to ~200 characters per line on a 2560px display. */
.container,
.cv-section,
.projects-section,
.lab-section {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.container {
    width: 95%;
    margin: 0 auto;
    padding: 40px 10px 20px 30px; /* Add top padding to create space below the nav bar */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    gap: 20px; /* Adjust space between sections */
    position: relative;
}

.left-column, .middle-column, .right-column {
    display: none; /* Hide the columns */
}

.headshot {
    display: block;
    margin: 0 auto; /* Center headshot horizontally on the page */
    width: 120px; /* Set a fixed width */
    height: 120px; /* Set a fixed height */
    border-radius: 50%; /* Make the image circular */
    object-fit: cover; /* Ensure the image covers the container without distortion */
    object-position: center; /* Center the image within the container */
    margin-top: 5px; /* Add top margin to create space above the headshot */
}

h1 {
    font-size: 2.5em;
    font-weight: 700; /* Change to Roboto Bold */
    margin: 0;
    text-align: left;
}

p {
    font-size: 1.2em;
    font-weight: 400; /* Change to Roboto Regular */
    margin: 10px 0;
}

.column {
    padding: 10px;
}

.left {
    width: 100%;
    text-align: left;
    margin-left: 0px; /* Decrease margin on the left */
}

.right {
    width: 100%;
}

section {
    margin-bottom: 0px;
}

/* Reduce bottom margin for contact section */
#contact {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#contact h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#contact p {
    font-size: 1.2em;
}

#contact a {
    color: #007BFF;
    text-decoration: none;
}

#contact a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

h2 {
    font-size: 2em;
    margin: 0; /* Remove margin */
    text-align: center; /* Center text */
}

/* The page's single h1 (the name in the hero). Matches the previous h2 styling
   so promoting it for SEO/accessibility doesn't change how it looks. */
#about h1 {
    font-size: 2em;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    margin-bottom: 10px;
}

ul li a {
    color: #007BFF;
    text-decoration: none;
}

/* Footer Styles */
footer {
    width: 100%; /* Ensure footer spans full width */
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    margin-top: auto; /* Push footer to the bottom */
}

.footer-container {
    width: 95%; /* Match the main container's width */
    margin: 0 auto; /* Center the container */
    text-align: center; /* Center the footer text */
    /* Remove grid layout properties */
    display: block;
}

footer .container {
    width: 95%; /* Match the main container's width */
    margin: 0 auto; /* Center the container */
    display: flex;
    justify-content: center; /* Center footer content */
    align-items: center;
}

footer p {
    margin: 0;
    text-align: center;
    font-size: 1em;
}

.social-media {
    display: flex;
    justify-content: center;
    margin-top: 0; /* Remove margin above the social media icons */
    margin-bottom: 10px; /* Reduce margin below the social media icons */
}

#projects {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout by default */
    gap: 20px; /* Adjust space between sections */
    max-width: 100%; /* Ensure responsiveness */
    padding: 0 10px; /* Optional: Add horizontal padding for better readability on small screens */
}

@media (min-width: 768px) {
    #projects {
        grid-template-columns: 1fr 1fr; /* Two-column layout for larger screens */
    }
}

#projects p {
    max-width: 575px; /* Match the iframe's width */
    /* margin: 0 auto 20px auto; /* Center paragraphs and add bottom margin */
    text-align: left; /* Change text alignment to left */
}

/* Projects Section Link Styles */
#projects a {
    text-decoration: none; /* Remove underline from links */
    color: #007BFF; /* Set initial link color to match existing styles */
    transition: color 0.3s; /* Smooth transition for color change */
}

#projects a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

.project-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social-media li {
    margin: 0 10px;
}

.social-media li a {
    color: #121540;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 1.5em; /* Increase icon size */
    transition: transform 0.3s, color 0.3s; /* Smooth transition for transform and color */
}

.social-media li a:hover {
    color: #06A09F; /* Change hover color to R:6 G:160 B:159 */
    transform: scale(1.2); /* Enlarge icon on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

.bluesky-icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* Increase space between paragraphs in About Me section */
#about p {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Set links in About Me to dark blue */
#about a {
    color: #121540; /* Dark blue color like the nav bar */
    transition: color 0.3s; /* Smooth transition for color change */
}

/* Change link color to turquoise on hover */
#about a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

/* Style links within the secondary-text class */
.secondary-text a {
    color: grey; /* Set link color to grey */
    transition: color 0.3s; /* Smooth transition for color change */
}

.secondary-text a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

/* Style links within the secondary-text class with higher specificity */
#about .secondary-text a {
    text-decoration: none; /* Remove underline from links */
    color: grey; /* Set link color to grey */
    transition: color 0.3s; /* Smooth transition for color change */
}

#about .secondary-text a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

/* Banner Styles */
.banner {
    width: 575px; /* Match the iframe's width */
    height: 150px; /* Set a fixed height */
   /* background-color: #f2f2f2; /* Optional: in case the image has transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid #ddd;
    border-radius: 10px;
    margin: 60px 0 20px 0; /* Top margin similar to headshot's margin-top:60px */
    padding: 0; /* Remove padding to align with fixed height */
}

.banner-image {
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Match banner's border radius */
    object-fit: cover; /* Ensure the image covers the container without distortion */
    opacity: 0; /* Increase transparency */
}

.banner h3 {
    font-size: 1.5em;
    color: #121540; /* Dark blue color */
}

/* Hero row: research text beside the figure, so the figure lands above the fold.
   The figure takes the larger share since its legibility scales with width. */
/* Hero row: the figure floats right and the research text wraps around it,
   so the text fills the space beside AND below the figure instead of leaving
   a centred figure stranded in whitespace. */
.hero-split {
    display: block;
    width: 100%;
    margin-top: 5px;
}

.hero-split::after { /* clearfix so the float doesn't escape the row */
    content: "";
    display: table;
    clear: both;
}

.research-intro {
    width: auto; /* Let the text flow around the floated figure */
}

/* Phecoder full-width figure: HTML title + legend keep their text crisp at any size,
   so only the panels themselves are raster. */
.phecoder-figure {
    float: right;
    width: 58%; /* Leave the text a comfortable measure so the figure doesn't dominate */
    max-width: 820px;
    min-width: 0;
    margin: 0 0 16px 40px; /* Gap between the figure and the wrapping text */
    padding: 0;
}

.phecoder-scroll {
    max-width: 100%;
    min-width: 0;
}

.phecoder-title {
    font-size: 1em;
    font-weight: 600;
    color: #121540;
    text-align: center;
    margin: 0 0 12px 0;
}

.phecoder-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 40px;
    margin-bottom: 14px;
}

.legend-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.legend-heading {
    font-weight: 700;
    font-size: .8em;
    color: #121540;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8em;
    color: #444;
    white-space: nowrap;
}

.swatch {
    width: 22px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 2px;
}

.swatch-included     { background: #a0b0d0; }
.swatch-not-included { background: #f0f0f0; border: 1px solid #ddd; }
.swatch-relevant     { background: #e8c090; }
.swatch-possibly     { background: #98c0a8; }
.swatch-not-relevant { background: #d08080; }
.swatch-complete {
    height: 0;
    border-radius: 0;
    border-top: 3px dashed #282828;
}

.phecoder-panels {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    transition: opacity 0.2s;
}

.phecoder-panels:hover {
    opacity: 0.9; /* Subtle affordance that the figure is clickable */
}

.phecoder-caption {
    display: block;
    max-width: 1000px;
    margin: 10px auto 0 auto;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    color: grey;
    font-size: .8em;
}

.phecoder-hint {
    font-style: italic;
}

/* Full-figure lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    /* Pin to the viewport explicitly: elsewhere on the page a too-wide element
       stretches the layout viewport, which a plain inset:0 would inherit. */
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    background: rgba(18, 21, 64, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 60px 30px 30px 30px;
    cursor: zoom-out; /* Signals that clicking the backdrop dismisses */
}

.lightbox.open {
    display: flex;
}

.lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 12px;
    right: 24px;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: #06A09F;
}

.lightbox-hint {
    color: rgba(255, 255, 255, 0.85);
    font-size: .8em;
    margin: 14px 0 0 0;
    text-align: center;
}

@media (max-width: 768px) {
    .lightbox {
        padding: 56px 12px 20px 12px;
    }
    .lightbox-img {
        max-height: 70vh;
    }
}

.mobile-hint { display: none; }
.desktop-hint { display: inline; }

@media (max-width: 900px) {
    /* Too narrow to wrap text around the figure — stack them instead.
       The figure sits first in the DOM (required for the float to wrap the text),
       so re-order here to keep the text leading when stacked. */
    .hero-split {
        display: flex;
        flex-direction: column;
    }
    .research-intro {
        order: 1;
    }
    .phecoder-figure {
        order: 2;
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 16px auto 0 auto;
    }
}

@media (max-width: 768px) {
    .phecoder-legend {
        gap: 8px 20px;
    }
    .phecoder-caption {
        text-align: left;
    }
    /* Fitting the panels to phone width crushes the labels to ~4px. Instead let the
       figure keep a legible intrinsic size and scroll horizontally within its own box. */
    .phecoder-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .phecoder-panels {
        min-width: 860px;
    }
    .mobile-hint { display: inline; }
    .desktop-hint { display: none; }
}

/* Project Iframe Styles */
iframe {
    width: 575px !important; /* Ensure iframe takes full width of the container */
    height: 450px !important; /* Match iframe height to banner */
    border: none; /* Remove default iframe border */
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
    align-self: center; /* Center iframe */
}

/* Shared styling for the two interactive plots in the CV section.
   Sized to fit the column so the plots' baked-in titles aren't clipped. */
.cv-figure {
    margin: 24px 0 0 0;
    padding: 0;
    max-width: 100%;
}

.cv-plot {
    width: 590px !important;
    height: 460px !important;
    max-width: 100%;
    border: none;
    display: block;
    margin: 0;
}

/* Plot titles live in HTML rather than baked into the plotly export, so they
   stay crisp, wrap properly, and can't be clipped by the iframe width. */
.cv-figure-title {
    width: 590px;
    max-width: 100%;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.35;
    color: #121540;
    margin: 0 0 2px 0;
    text-align: center;
}

.cv-figure-subtitle {
    width: 590px;
    max-width: 100%;
    font-size: .8em;
    line-height: 1.35;
    color: #727475;
    margin: 0 0 8px 0;
    text-align: center;
}

.cv-figure-caption {
    display: block;
    width: 590px;
    max-width: 100%;
    margin: 8px 0 0 0;
    color: grey;
    font-size: .8em;
    line-height: 1.5;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


.main-text {
    font-size: 24px; /* Set font size to 18px */
    text-align: justify; /* Justify text */
    hyphens: auto;
    -webkit-hyphens: auto; /* Safari support */
    line-height: 160%; /*Adjust line height and font size to achieve desired look*/
}

.main-text a{
    color: darkblue
}

/* Style for the second paragraph in the About Me section */
.secondary-text {
    color: grey;
    display: block; /* Make it a block-level element */
    max-width: 575px; /* Match the iframe's width */
    margin: 0 auto 0; /* Remove top margin */
    text-align: center; /* Center text */
    font-size: 16px;
    margin-top: 5px; /* Reduce top margin */
}

.secondary-text.justified {
    text-align: justify; /* Justify text */
    hyphens: auto;
    -webkit-hyphens: auto; /* Safari support */
}

nav {
    background-color: #121540; /* Softer color for nav */
    padding: 10px 0;  /* Increase padding to add more space */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between; /* Space between name and links */
    align-items: center; /* Align items vertically */
    padding: 0 20px; /* Adjust padding to align with the container */
}

.nav-name {
    font-size: 1.5em;
    font-weight: 600; /* Change to Roboto Bold */
    color: #fff; /* Set font color to white */
    margin-left: 0; /* Fix typo */
    line-height: 1; /* Ensure consistent line height */
    padding-left: 10px;
    white-space: nowrap; /* Prevent line breaks */
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end; /* Align links to the right */
}

.nav-links li {
    margin: 0 10px; /* Adjusted margin */
}

.nav-links li a {
    color: #fff;
    text-decoration: none; /* Remove default underline */
    font-size: 1em; /* Adjust font size */
    display: block;
    position: relative; /* Required for the hover effect */
    line-height: 1; /* Ensure consistent line height */
}

.nav-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Move the underline closer to the text */
    width: 100%;
    height: 2px;
    background-color: #007BFF; /* Hover cover color */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-links li a:hover::after {
    transform: scaleX(1);
}

header {
    padding-top: 0px; /* Adjust for reduced nav height */
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0px;
}
/* */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  border-radius: 50%; /* Round shape */
  width: 50px;
  height: 50px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}

.carousel-control-prev {
    left: 0; /* Adjust the value as needed */
  }

  .carousel-control-next {
    right: 0; /* Adjust the value as needed */
  }

  .carousel {
  position: relative;
}

.cv-section {
    margin-top: 40px;
    width: 100%;            /* Ensure full width */
    align-self: flex-start; /* Align to the left */
    text-align: left;       /* Align text to the left */
    background-color: #ffffff;  /* Light gray background #f9f9f9 */
    --cv-icon-width: 48px;
    --cv-icon-gap: 24px;
    --cv-left-edge: 30px;
    --cv-text-indent: calc(var(--cv-left-edge) + var(--cv-icon-width) + var(--cv-icon-gap));
  }



  .cv-section h3 {
    font-size: 1.5em;
    margin-top: 20px;
  }

  .cv-section ul {
    list-style-type: none;
    padding: 0;
  }

  .cv-section ul li {
    font-size: 1.2em;
    margin-bottom: 10px;
    margin-left: 0;
  }
  .cv-lead {
    font-size: 2em;
    margin-bottom: 20px;
    margin-left: var(--cv-left-edge);
    padding-left: 0;
    padding-top: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--cv-icon-gap);
  }
  .cv-lead i {
    flex: 0 0 var(--cv-icon-width);
    width: var(--cv-icon-width);
    text-align: center;
  }
  .cv-primary {
    font-size: 1.3rem; /* Sized so the longest role keeps its year on the same line */
    line-height: 1.3;
    margin: 16px 0 2px 0; /* Space above the role, tight to the org line below */
    margin-left: var(--cv-text-indent);
    padding-top: 0;
  }


  .cv-talk-primary {
    font-size: 1.2rem;
    margin-bottom: 2px;
    margin-left: var(--cv-text-indent);
    padding-top: -10px;
  }

  .cv-secondary {
    font-size: 1.2rem;
    line-height: 1.35; /* Was .9, i.e. tighter than the font size, which squashed the line */
    margin: 0 0 8px 0; /* Sits with its role above, clear of the bullets below */
    margin-left: var(--cv-text-indent);
    padding-bottom: 0;
    padding-top: 0;
  }

  .cv-pos-year {
    font-size: .9rem;
    padding-top: 5px;
    color: #8c8989;
    margin-left: 10px;
    white-space: nowrap; /* Keep "(2024 - Present)" intact instead of orphaning "Present)" */
  }

  .cv-year {
    font-size: .9rem;
  padding-top: 0px;
   color: #8c8989;
   margin-left: var(--cv-text-indent);
  }


  .cv-detail {
    font-size: 0.9rem; /* Smaller font for supporting lines */
    color: #555;      /* Optional: softer color for details */
    margin-top: 5px;
    margin-left: var(--cv-text-indent);
    margin-bottom: 20px;
  }

  .job-summary ul li {
    margin-left: var(--cv-text-indent);
    font-size: 0.9rem; /* Adjust font size */
    line-height: 1.45;
    margin-bottom: 4px;
  }

  .accent {
    margin-left: 0;
    display: inline-block;
    border-bottom: 2px solid #007BFF; /* Change the color to your preferred accent color */
    padding-bottom: 2px;
  }

  .accent_work {
    margin-left: 0;
    display: inline-block;
    border-bottom: 2px solid #007BFF; /* Change the color to your preferred accent color */
    padding-bottom: 2px;
  }
  .cv-container {
    display: flex;
    justify-content: space-between;
    margin: 0 70px; /* Adjust as needed */
  }

  .cv-column {
    flex: 1;
    margin: 0 10px; /* Adjust spacing between columns */
  }

.cv-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust gap between columns */
}

.cv-column {
    flex: 1;
    min-width: 300px; /* Ensure columns don't get too narrow */
}

  .cv-section .secondary-text{
    padding-left: 200px;
    padding-right: 50px;
    font-size: .7em;
    margin-top: -5px;
  }

  .cv-section .secondary-textv2 {
    padding-left: 200px;
    font-size: .7em;
    margin-top: -15px;
}

/* Explicit margins here: these previously used margin-top:-15px to pull the lines
   up under a one-line title, which collided once a title wrapped to two lines. */
.cv-paper-primary {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 16px 0 3px 0;
    margin-left: var(--cv-text-indent);
}

.cv-publication-group {
    margin: 18px 0 0 var(--cv-text-indent) !important;
    font-size: .75rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #727475;
    text-transform: uppercase;
}

.cv-paper-authors {
    font-size: .8rem;
    line-height: 1.4;
    margin: 0 0 2px 0;
    margin-left: var(--cv-text-indent);
}

.cv-paper-journal {
    font-size: .8rem;
    line-height: 1.4;
    margin: 0;
    margin-left: var(--cv-text-indent);
}

/* Paper titles link out to PubMed / the preprint DOI */
.cv-paper-primary a {
    color: #121540;
    text-decoration: none;
    transition: color 0.3s;
}

.cv-paper-primary a:hover {
    color: #06A09F;
    text-decoration: underline;
}

.cv-scholar-link {
    font-size: .8rem;
    margin: 10px 0 0 0;
    margin-left: var(--cv-text-indent);
}

.cv-scholar-link a {
    color: #727475;
    text-decoration: none;
    transition: color 0.3s;
}

.cv-scholar-link a:hover {
    color: #06A09F;
}

.projects-section {
    width: 95%;
    margin: 40px auto; /* Add top margin to create space below the CV section */
    text-align: center;
    padding-bottom: 20px; /* Add padding below the title */
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    padding: 0 40px;
}

.project-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20px;
    min-height: 500px;
}

.project-card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-title {
    font-size: 1.5em;
    line-height: 1.25;
    margin: 0 0 10px 0;
    color: #333;
    text-align: left;
}

.project-description {
    font-size: 1em;
    color: #666;
    line-height: 1.45;
    padding: 0;
    text-align: left;
}

.project-description a {
    color: #121540;
    font-weight: 600;
    text-decoration: none;
}

.project-description a:hover {
    color: #06A09F;
    text-decoration: underline;
}

.project-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 14px 0;
}

/* Specific styling for each project image */
.project-image.project1 {
    width: 100%;
}

.project-image.project2 {
    width: 100%;
}

.project-image.project3 {
    width: 100%;
}

.project-image.project4 {
    width: 100%;
}

.lab-section {
    width: 95%;
    margin: 40px auto;
    padding: 0 40px 20px 40px;
    text-align: center;
}

.lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.lab-group {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    text-align: left;
}

.lab-group h3 {
    color: #121540;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.lab-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lab-person {
    margin: 0;
}

.lab-person + .lab-person {
    border-top: 1px solid #e8e8e8;
    margin-top: 16px;
    padding-top: 16px;
}

.lab-name {
    color: #333;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 2px 0;
}

.lab-role,
.lab-next,
.lab-links {
    color: #666;
    font-size: .95rem;
    line-height: 1.45;
    margin: 0 0 6px 0;
}

.lab-next a,
.lab-links a {
    color: #121540;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.lab-next a:hover,
.lab-links a:hover {
    color: #06A09F;
    text-decoration: underline;
}

.cv-link {
    display: block;
    margin: 10px auto; /* Reduce margin */
    font-size: 1.2em;
    color: #5f9ea0; /* Faded turquoise color */
    text-decoration: none;
    text-align: center; /* Center the text */
}

.cv-link:hover {
    color: #4682b4; /* Slightly darker turquoise color on hover */
}

#contact {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#contact h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#contact p {
    font-size: 1.2em;
}

#contact a {
    color: #007BFF;
    text-decoration: none;
}

#contact a:hover {
    color: #06A09F; /* Turquoise color on hover */
}

@media (max-width: 768px) {
    nav {
        padding: 8px 0;
    }

    .nav-container {
        flex-direction: column;
        gap: 8px;
        padding: 0 12px;
    }

    .nav-name {
        font-size: 1.15em;
        padding-left: 0;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links li a {
        font-size: .9em;
    }

    .container {
        padding-top: 94px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .projects-section,
    .lab-section {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .project-card {
        min-height: 0;
    }

    .lab-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact and footer stay full-bleed for their backgrounds, but their text is
   capped so it doesn't stretch across a wide monitor. */
#contact p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.footer-container {
    max-width: 1320px;
}