@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #004d99;
    --accent-blue: #0066cc;
    --light-blue: #f0f7ff;
    --text-color: #1a1a1a;
    --heading-color: #1f2937;
    --muted-text: #4b5563;
    --background-color: #ffffff;
    --surface-color: rgba(255, 255, 255, 0.95);
    --surface-soft: #fcfcfc;
    --surface-raised: #f3f4f6;
    --surface-border: #f0f0f0;
    --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --header-background: transparent;
    --footer-shadow: none;
    --nav-bg: #eef4fb;
    --nav-shadow: drop-shadow(0 2px 8px rgba(0, 77, 153, 0.12));
    --nav-glow: rgba(86, 130, 184, 0.5);
    --nav-border: rgba(0, 102, 204, 0.45);
    --nav-divider: rgba(0, 77, 153, 0.16);
    /* ---- Type scale ---- */
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-display: 2.75rem;

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --hero-overlay-top: rgba(255, 255, 255, 0.85);
    --hero-overlay-mid: rgba(255, 255, 255, 0.7);
    --hero-overlay-bottom: rgba(255, 255, 255, 1);
    --badge-gradient-start: rgba(0, 77, 153, 0.08);
    --badge-gradient-end: rgba(0, 102, 204, 0.12);
    --badge-border: rgba(0, 77, 153, 0.15);
    --social-chip-bg: rgba(0, 77, 153, 0.06);
    --social-chip-bg-hover: rgba(0, 77, 153, 0.12);
    --page-transition-bg: #ffffff;
    --toggle-text-color: #0f2e57;
    --toggle-chip-bg: rgba(0, 77, 153, 0.09);
    --toggle-chip-hover-bg: rgba(0, 77, 153, 0.17);
    --button-shadow: none;
    --button-shadow-hover: 0 2px 6px rgba(0, 77, 153, 0.12);
    --container-width: 86%;
    --max-width: 1200px;
    --code-bg: #f5f5f5;
    --code-color: #333333;
    --code-border: #e2e2e2;
}

html[data-theme="dark"] {
    --primary-blue: #4fa8f9;
    --accent-blue: #007acc;
    --light-blue: #2c2c2c;
    --text-color: #e3e3e3;
    --heading-color: #ffffff;
    --muted-text: #c6cbd4;
    --background-color: #222222;
    --surface-color: rgba(35, 38, 38, 0.95);
    --surface-soft: #2c2c2c;
    --surface-raised: #2b2d31;
    --surface-border: rgba(255, 255, 255, 0.1);
    --header-background: transparent;
    --footer-shadow: none;
    --nav-bg: #2a2d39;
    --nav-shadow: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    --nav-glow: rgba(140, 171, 214, 0.5);
    --nav-border: rgba(79, 168, 249, 0.5);
    --nav-divider: rgba(255, 255, 255, 0.12);
    --hero-overlay-top: rgba(34, 34, 34, 0.75);
    --hero-overlay-mid: rgba(34, 34, 34, 0.75);
    --hero-overlay-bottom: rgba(34, 34, 34, 1);
    --badge-gradient-start: rgba(79, 168, 249, 0.15);
    --badge-gradient-end: rgba(0, 122, 204, 0.1);
    --badge-border: rgba(79, 168, 249, 0.3);
    --social-chip-bg: rgba(255, 255, 255, 0.05);
    --social-chip-bg-hover: rgba(255, 255, 255, 0.08);
    --page-transition-bg: #222222;
    --toggle-text-color: #e3e3e3;
    --toggle-chip-bg: rgba(255, 255, 255, 0.1);
    --toggle-chip-hover-bg: rgba(255, 255, 255, 0.18);
    --button-shadow: none;
    --button-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.25);
    --code-bg: #2c2c2c;
    --code-color: #e3e3e3;
    --code-border: #404040;
}

.container {
    width: var(--container-width);
    max-width: var(--max-width);
    margin: 0 auto;
}

p {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

h3 {
    font-weight: 500;
    margin-bottom: 1rem;
}

code {
    background: var(--code-bg);
    color: var(--code-color);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    border: 1px solid var(--code-border);
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-color);
    background: var(--background-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    transition: background-color 0.35s ease, color 0.35s ease;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.65rem max(1.1rem, calc((100% - var(--max-width)) / 2));
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.9rem;
    background: var(--header-background);
    box-shadow: none;
    transition: background-color 0.4s ease;
    z-index: 1000;
}

header.scrolled {
    background: var(--header-background);
}

/* The header itself stays transparent so the nav keeps floating. Instead each
   cluster carries its own surface — this one borrows the nav pill's identity
   so the logo stays legible over whatever scrolls beneath it. */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: auto;
    z-index: 2;
    padding: 0.2rem 0.35rem 0.2rem 0.25rem;
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    /* Matches .nav-blob's radius so the island reads as part of the nav set. */
    border-radius: 14px;
    filter: var(--nav-shadow);
}

.logo {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--heading-color);
}

.logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .logo-img {
        width: 26px;
        height: 26px;
    }
}

/* ---------- Connected-pill navigation (Floema-style) ---------- */
nav {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    isolation: isolate;
}

nav a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Horizontal padding is the whole span between two labels, so it alone sets
       how close the pills sit. The pinch geometry lives in .nav-blob's radius
       and the bridge height, neither of which reads this — so tightening here
       pulls the nav together and leaves the dip's shape untouched. */
    padding: 0.5rem 0.75rem;
    color: var(--heading-color);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    /* letter-spacing: 0.085em; */
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.45, 0.52, 1);
}

nav a:hover {
    color: var(--accent-blue);
}

/* Outline traced around the merged goo shape (see #nav-goo filter) */
.nav-goo-flood {
    flood-color: var(--nav-border);
}

/* White merged-bump background layer (blobs built in JS) */
.nav-blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: url(#nav-goo) var(--nav-shadow);
    pointer-events: none;
    opacity: 1;
}

.nav-blob {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--nav-bg);
    border-radius: 14px;
    /* No backdrop-filter: --nav-bg is opaque so it was a visual no-op, but a
       backdrop-filter element inside an SVG filter (url(#nav-goo)) parent fails
       to composite in Firefox — it dropped the pill backgrounds and split the
       strip on hover. Removing it is identical in Chrome and fixes Gecko. */
    transition: left 0.45s cubic-bezier(0.34, 1.45, 0.52, 1),
        width 0.45s cubic-bezier(0.34, 1.45, 0.52, 1);
}

.nav-bridge {
    position: absolute;
    background: var(--nav-bg);
    height: 8px;
    top: calc(50% - 4px);
    border-radius: var(--radius-pill);
    /* backdrop-filter removed — see .nav-blob note (Firefox compositing fix). */
    transition: left 0.45s cubic-bezier(0.34, 1.45, 0.52, 1),
        width 0.45s cubic-bezier(0.34, 1.45, 0.52, 1),
        height 0.45s cubic-bezier(0.34, 1.45, 0.52, 1),
        top 0.45s cubic-bezier(0.34, 1.45, 0.52, 1);
    z-index: 0;
    pointer-events: none;
}

/* Soft blue glow that rises behind the hovered item */
.nav-glow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 80px;
    height: 112%;
    transform: translateY(-50%);
    border-radius: var(--radius-lg);
    background: radial-gradient(ellipse closest-side, var(--nav-glow), transparent 72%);
    filter: blur(5px);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Active-page indicator dot */
.nav-dot {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-blue);
    transform: translateX(-50%);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: left 0.45s cubic-bezier(0.34, 1.45, 0.52, 1), opacity 0.3s ease;
}

.theme-toggle {
    /* Lives inside .logo-container rather than floating on its own, so it
       inherits that island's surface and border — one shape, not two. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    margin-left: 0.15rem;
    padding: 0;
    /* The chip fill is permanent, not a hover affordance — it gives the glyph
       its own footprint inside the island so it reads as a control rather than
       as part of the wordmark. Hover only deepens it. */
    background: var(--toggle-chip-bg);
    color: var(--toggle-text-color);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.theme-toggle:hover {
    background: var(--toggle-chip-hover-bg);
    color: var(--accent-blue);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Two stacked glyphs that cross-fade, rather than one mask that snaps. Each
   shows the theme you are switching TO: moon while light, sun while dark. */
.theme-toggle-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.theme-toggle-icon::before,
.theme-toggle-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.34, 1.45, 0.52, 1);
}

/* Sun */
.theme-toggle-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

/* Moon */
.theme-toggle-icon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .theme-toggle-icon::before {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .theme-toggle-icon::after {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

.hero {
    position: relative;
    padding: 8.5rem 0 2.5rem;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

/* Background image embedded in HTML for faster mobile loading */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* GPU acceleration to prevent scroll stutter on mobile */
    will-change: transform;
    transform: translateZ(0);
}

/* Gradient overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--hero-overlay-top) 0%, var(--hero-overlay-mid) 42%, var(--hero-overlay-bottom) 100%);
    z-index: -1;
}

html[data-theme="dark"] body {
    background: var(--background-color);
}

html[data-theme="dark"] .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent 0%, rgba(34, 34, 34, 0.9) 60%, rgba(34, 34, 34, 1) 100%);
    z-index: -1;
    pointer-events: none;
}

html[data-theme="dark"] header {
    background: var(--header-background);
}

html[data-theme="dark"] .bg-light {
    background-color: var(--surface-soft);
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
}

html[data-theme="dark"] .member-profile-panel,
html[data-theme="dark"] footer {
    background: var(--surface-color);
    border-color: var(--surface-border);
    /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); */
}




.hero-label {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 2rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero h1 {
    /* Fluid from the mobile step up to --fs-display; replaces the old
       fixed 2.5rem + 1.6rem breakpoint override. */
    font-size: clamp(1.75rem, 1rem + 2.6vw, var(--fs-display));
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 2rem;
    color: var(--heading-color);
    letter-spacing: -0.02em;
}

.hero h1 .highlight {
    color: var(--primary-blue);
    font-weight: 500;
}

.hero-description {
    font-size: var(--fs-sm);
    line-height: 1.7;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--muted-text);
    margin-bottom: 2.5rem;
    letter-spacing: 0.01em;
    font-weight: 400;
}

.hero h1 em {
    font-style: normal;
    color: var(--primary-blue);
    position: relative;
}

/* Lab Name Badge Styles */




.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2.5rem;
}







.home-section {
    padding: 5rem 0;
}

.bg-light {
    background-color: var(--surface-soft);
    width: 100%;
    max-width: none;
    padding: 1.5rem 0;
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
}

.section-title {
    font-size: var(--fs-xl);
    font-weight: 500;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    color: var(--text-color);
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Short accent bar rather than a full-width rule under the text — reads
   cleaner and stays a fixed size regardless of heading length. */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: var(--radius-pill);
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.highlight-card {
    text-align: left;
    padding: 1.4rem;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    border: none;
    overflow: hidden;
    box-shadow: none;
}


.highlights-section {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.events-section {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.events-card-shell {
    padding: 1.4rem;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
    box-shadow: none;
}


.events-list {
    display: flex;
    flex-direction: column;
}

.event-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
    align-items: start;
}

.event-row:first-child {
    padding-top: 0;
}

.event-row:last-child {
    padding-bottom: 0;
}

.event-row + .event-row {
    border-top: 1px solid rgba(0, 77, 153, 0.08);
}

html[data-theme="dark"] .event-row + .event-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.event-date-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.1rem;
}

.event-date,
.event-time,
.event-dot {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--heading-color);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.event-dot {
    display: none;
}

.event-body {
    min-width: 0;
    flex: 1;
}

.event-body h3 {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.45;
    font-weight: 600;
    color: var(--primary-blue);
}

.event-body p {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--muted-text);
}

/* ── Highlight card image ── */
.highlight-card-image {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.highlight-card-image img {
    width: 100%;
    height: 168px;
    display: block;
    object-fit: cover;
}

/* ── Highlight card text ── */
.highlight-card-text {
    font-size: var(--fs-sm);
    color: var(--muted-text);
    line-height: 1.6;
    margin: 1rem 0 0;
    padding: 0;
}

/* ── Learn more link (no pill) ── */
.highlight-learn-more {
    display: inline-block;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.4rem;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.highlight-learn-more .arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight-learn-more:hover .arrow {
    transform: translateX(4px);
}

/* ── Kept for backwards compat on other pages ── */
.text-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-link:hover {
    transform: translateX(3px);
    gap: 0.5rem;
}



.center-button {
    text-align: center;
    margin-top: 1.25rem;
}

.lab-life-layout {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;
}

/* ---------- Stacked-photo carousel ---------- */
.lab-life-carousel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carousel-viewport {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.carousel-stack {
    position: relative;
    flex: 1;
    height: 300px;
    perspective: 1200px;
    margin-bottom: 2.5rem;
}

.carousel-card {
    position: absolute;
    inset: 0;
    margin: 0;
    transform-origin: center bottom;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}

.life-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition: opacity 0.5s ease-in;
}

.life-caption {
    margin-top: 0;
    font-size: var(--fs-sm);
    color: var(--muted-text);
    font-style: italic;
    text-align: center;
}

.carousel-caption {
    min-height: 1.4em;
    margin: 0;
    transition: opacity 0.3s ease;
}

.carousel-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surface-border);
    border-radius: 50%;
    background: var(--surface-color);
    color: var(--heading-color);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}

.carousel-arrow span {
    margin-top: -3px;
}

.carousel-arrow:hover {
    background: var(--primary-blue);
    color: #fff;
    transform: scale(1.08);
}

.lab-life-text {
    flex: 1 1 50%;
    min-width: 0;
    color: var(--muted-text);
    font-size: var(--fs-base);
    line-height: 1.8;
    text-align: left;
}

.lab-life-text p {
    margin: 0 0 1.1rem;
}

.lab-life-text p:last-child {
    margin-bottom: 0;
}

/* Former lab names, kept visible but de-emphasised after the SIMBIOS rename. */
.lab-life-text p.lab-life-note {
    font-size: var(--fs-sm);
    opacity: 0.75;
}

.hero p {
    font-size: var(--fs-md);
    color: var(--muted-text);
    margin-bottom: 2rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.hero p span {
    color: var(--primary-blue);
    font-weight: bold;
    margin: 0 0.5rem;
}

.button {
    display: inline-block;
    padding: 0.65rem 1.35rem;
    background: var(--accent-blue);
    color: #fff;
    text-decoration: none;
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--button-shadow);
    transition: background-color 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: var(--button-shadow-hover);
}

.button:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Secondary action — same metrics, no fill, so paired CTAs don't compete. */
.button.button-ghost {
    background: transparent;
    color: var(--primary-blue);
    border-color: var(--nav-border);
    box-shadow: none;
}

.button.button-ghost:hover {
    background: var(--social-chip-bg);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: none;
}

@media (max-width: 600px) {
    .event-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .event-date-col {
        flex-direction: row;
        gap: 0.4rem;
        align-items: baseline;
    }

    .event-dot {
        display: inline;
    }
}

.content {
    margin: 0 auto;
    padding: 8rem 0 2rem;
    min-height: 120px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}

.pi-area .team-lead {
    float: right;
    width: 320px;
    margin-left: 2.5rem;
    margin-bottom: 1.5rem;
}

.team-lead {
    height: auto;
    text-align: center;
    padding: 0;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    box-shadow: none;
    overflow: hidden;
}


/* Styling is handled via .team-member-img-wrapper below */

.pi-info {
    padding: 0.5rem;
    width: 100%;
}

.pi-info h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--heading-color);
    margin: 0.4rem 0 0.2rem 0;
}

.pi-info .member-role {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--primary-blue);
    background: var(--social-chip-bg);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.team-member {
    height: auto;
    text-align: center;
    padding: 0;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.member-profile-card {
    cursor: pointer;
}

.member-profile-card:focus-visible,
.member-profile-close:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
}


/* ── Image wrapper for flat cards with overflow hidden ── */
.team-member-img-wrapper {
    width: calc(100% - 2rem);
    margin: 1rem 1rem 0 1rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    transform: translateZ(0); /* Force GPU layer to prevent subpixel layout shifting */
}

.team-member .team-member-img-wrapper {
    aspect-ratio: 1;
}

.team-lead .team-member-img-wrapper {
    aspect-ratio: 0.8;
}

.team-member-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.001); /* Start at a tiny transform to avoid rasterizer switch jitter */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.22s ease-out;
}

.member-profile-card:hover .team-member-img-wrapper img {
    transform: scale(1.03); /* extremely subtle inner zoom */
}

.member-info {
    padding: 1rem;
    width: 100%;
}

.member-info h3 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 0.4rem;
}

.member-info .member-role {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--primary-blue);
    background: var(--social-chip-bg);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.member-info .member-research {
    font-size: var(--fs-sm);
    color: var(--muted-text);
    line-height: 1.4;
    margin: 0;
    font-style: italic;
    opacity: 0.85;
}

.member-info p {
    margin: 0.25rem 0;
}

body.profile-modal-open {
    overflow: hidden;
}

.member-profile-modal {
    width: min(920px, calc(100% - 2rem));
    max-width: 920px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-color);
    overflow: visible;
}

.member-profile-modal[open] {
    position: fixed;
    inset: 50% auto auto 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

.member-profile-modal::backdrop {
    background: rgba(8, 24, 40, 0.42);
    backdrop-filter: blur(8px);
    animation: profileBackdropIn 0.24s ease both;
}

html[data-theme="dark"] .member-profile-modal::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.member-profile-panel {
    position: relative;
    max-height: min(84vh, 760px);
    overflow: auto;
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .member-profile-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.member-profile-modal[open] .member-profile-panel {
    animation: profileDialogIn 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.member-profile-modal[open].is-closing::backdrop {
    animation: profileBackdropOut 0.2s ease both;
}

.member-profile-modal[open].is-closing .member-profile-panel {
    animation: profileDialogOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.member-profile-layout {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.25rem;
}

.member-profile-identity {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.75rem 0 0;
    border-right: 1px solid var(--surface-border);
}

.member-profile-identity img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.member-profile-identity h2 {
    color: var(--heading-color);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.member-profile-identity .member-role {
    display: inline-block;
    color: var(--primary-blue);
    background: var(--social-chip-bg);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.25rem 0.6rem;
}

.member-profile-focus {
    margin: 0.8rem 0 0;
    color: var(--muted-text);
    font-size: var(--fs-sm);
    font-style: italic;
    line-height: 1.45;
}

.member-profile-copy {
    display: grid;
    gap: 0;
    padding: 0.3rem 2.4rem 0.3rem 0;
}

.member-profile-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--surface-border);
}

.member-profile-section:first-child {
    padding-top: 0.2rem;
}

.member-profile-section:last-child {
    padding-bottom: 0.2rem;
    border-bottom: 0;
}

.member-profile-section h3 {
    margin: 0 0 0.55rem;
    color: var(--primary-blue);
    font-size: var(--fs-base);
    font-weight: 650;
    line-height: 1.35;
}

.member-profile-section p {
    margin: 0 0 0.75rem;
    color: var(--muted-text);
    font-size: var(--fs-base);
    line-height: 1.65;
}

.member-profile-section p:last-child {
    margin-bottom: 0;
}

.member-profile-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--surface-border);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted-text);
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.member-profile-close::before,
.member-profile-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.95rem;
    height: 1.5px;
    background: currentColor;
    border-radius: var(--radius-pill);
}

.member-profile-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.member-profile-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.member-profile-close:hover {
    color: var(--primary-blue);
    background: var(--social-chip-bg-hover);
}

@keyframes profileDialogIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profileDialogOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
}

@keyframes profileBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes profileBackdropOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.publications-container {
    width: 100%;
    padding: 0;
}



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

.publication-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--surface-border);
    align-items: start;
}

.publication-item:last-child {
    border-bottom: none;
}

.publication-year-badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary-blue);
    padding: 0.2rem 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-top: 0.1rem;
    white-space: nowrap;
}


.publication-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.publication-title {
    color: var(--heading-color);
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: 1.5;
    display: block;
}

.publication-authors {
    color: var(--muted-text);
    font-size: var(--fs-sm);
}

.publication-journal {
    font-style: italic;
    color: var(--primary-blue);
    font-size: var(--fs-sm);
}

.publication-journal a {
    color: inherit;
    text-decoration: none;
}

.publication-journal a:hover {
    text-decoration: underline;
}


.tools-container {
    width: 100%;
}

.tools-intro {
    max-width: 780px;
    margin: 0 auto 2rem;
    color: var(--muted-text);
    text-align: center;
    font-size: var(--fs-base);
}

.tools-grid {
    display: flex;
    flex-direction: column;
}

.tool-card {
    display: grid;
    grid-template-columns: minmax(320px, 48%) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: stretch;
    padding: 1.65rem 0;
    border-bottom: 1px solid var(--surface-border);
}

.tool-card:first-child {
    border-top: 1px solid var(--surface-border);
}

.tool-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 48%);
}

.tool-card:nth-child(even) .tool-figure {
    grid-column: 2;
    grid-row: 1;
}

.tool-card:nth-child(even) .tool-content {
    grid-column: 1;
    grid-row: 1;
}

.tool-figure {
    align-self: stretch;
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tool-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: none;
}

.tool-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.tool-card-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.tool-type,
.tool-status,
.tool-link {
    border-radius: var(--radius-sm);
}

.tool-type,
.tool-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.25rem 0.65rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.tool-type {
    color: var(--primary-blue);
    background: var(--social-chip-bg);
    border: none;
}

.tool-status {
    color: var(--muted-text);
    background: var(--social-chip-bg);
    border: none;
}

.tool-card h3 {
    margin: 0;
    color: var(--heading-color);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.35;
}

.tool-card p {
    max-width: 760px;
    margin: 0;
    color: var(--muted-text);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.tool-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 760px;
}

.tool-details li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    color: var(--muted-text);
    font-size: var(--fs-sm);
}

.tool-details strong {
    color: var(--primary-blue);
    font-weight: 600;
}

.tool-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tool-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    color: var(--primary-blue);
    background: var(--badge-gradient-start);
    border: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}


/* Two-column topic layout: 45% for the title stacked over its image, 55% for
   the body. The body spans both rows so it starts level with the title and is
   free to run past the bottom of the image. fr units rather than percentages so
   the column gap comes out of the track sizes instead of overflowing the row.
   Odd topics put the title/image pair on the left, even topics mirror it — see
   the min-width:769px block below. */
.research-area {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--surface-border);
    display: grid;
    grid-template-columns: 45fr 55fr;
    grid-template-rows: auto auto;
    column-gap: 2.5rem;
    row-gap: 1.25rem;
    align-content: start;
}

.research-area:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.research-area h3 {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--heading-color);
    /* Trimmed from the body's 1.65 so the title's half-leading matches the
       body's first line box — that is what makes the two tops line up. */
    line-height: 1.35;
    margin-bottom: 0;
    padding-left: 0;
    position: relative;
}

.research-container {
    width: 100%;
}

.research-header {
    grid-column: 1;
    grid-row: 1;
    /* Equal box tops still leave the larger title's caps ~3px high, since cap
       height scales with font size. Nudge it down so the two first lines read
       as sitting on the same optical top. */
    padding-top: 3px;
    margin-bottom: 0;
}

/* Runs at the head of the title on a faint fill borrowed from
   .publication-year-badge. Sized in em so the box tracks the title's text
   height while the digits themselves stay smaller; every em below resolves
   against this element's own 0.78em font-size, so 1.5em ≈ one title
   font-size-worth of box. vertical-align centres it on the title's text
   without letting the box grow the line box. */
.research-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.667em;
    min-width: 2.1em;
    padding: 0 0.4em;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary-blue);
    background: var(--surface-raised);
    border-radius: var(--radius-sm);
    vertical-align: 0.066em;
    margin-right: 0.5rem;
}

.pi-area {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 1rem;
    display: flow-root;
}

/* Pass-through wrapper: lets .research-image and .research-text place
   themselves on .research-area's grid without restructuring the markup. */
.research-content {
    display: contents;
}


.research-image {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0;
}

.research-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.research-text {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
}

.research-text p {
    margin-bottom: 1rem;
    line-height: 1.65;
    color: var(--muted-text);
    font-size: var(--fs-base);
    text-align: left;
}

/* Mirror every second topic so the title/image pair alternates sides down the
   page. Scoped to the two-column range: below it everything stacks, and leaving
   these rules out of that range keeps the stacked layout from having to
   out-specify :nth-of-type. The tracks flip too, so the image column stays 45%
   whichever side it lands on. */
@media (min-width: 769px) {
    .research-area:nth-of-type(even) {
        grid-template-columns: 55fr 45fr;
    }

    .research-area:nth-of-type(even) .research-header,
    .research-area:nth-of-type(even) .research-image {
        grid-column: 2;
    }

    .research-area:nth-of-type(even) .research-text {
        grid-column: 1;
    }
}


@media (max-width: 768px) {
    /* Collapse the split to a single column: title, image, then body,
       which is already the DOM order — so hand the items back to auto flow. */
    .research-area {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 1.5rem;
    }

    .research-header,
    .research-image,
    .research-text {
        grid-column: 1;
        grid-row: auto;
    }

    .research-header h3 {
        font-size: var(--fs-md);
    }

    .research-content p {
        font-size: var(--fs-sm);
    }

    .pi-area {
        padding: 0rem;
    }

    .section-title {
        font-size: var(--fs-md);
    }

    .content {
        margin: 0 auto;
        padding: 4rem 0 0rem;
    }

}

.research-text .button {
    margin-top: 1rem;
    display: inline-block;
}

footer {
    margin: 4rem auto 1rem auto;
    padding: 0.5rem 0.8rem;
    max-width: 1200px;
    width: 85%;
    text-align: center;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--footer-shadow);
    backdrop-filter: blur(5px);
}

footer .container {
    display: flex;
    justify-content: center;
}

.copyright {
    color: var(--muted-text);
    font-size: var(--fs-base);
    line-height: 1.3;
}

.content:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    padding: 0;
}

.contact-info-card {
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: none;
    box-shadow: none;
}



.contact-info-card h2 {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.contact-details {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--muted-text);
}

/* Targets the <p> directly, not just .contact-details: the global `p` rule sets
   --fs-md on the element itself, so a font-size inherited from the container
   would never reach these paragraphs. */
.contact-details p {
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.former-name {
    font-size: var(--fs-xs);
    font-style: italic;
    opacity: 0.75;
}

.contact-details strong {
    color: var(--primary-blue);
    font-weight: 500;
    display: inline-block;
    min-width: 80px;
}

.map-container {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
    margin-top: 3rem;
    border: none;
}

.social-links {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--muted-text);
    font-size: var(--fs-sm);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--social-chip-bg);
    transition: 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
    background: var(--social-chip-bg-hover);
    color: var(--primary-blue);
}

@media (max-width: 1300px) {

    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (max-width: 1024px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lab-life-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .lab-life-carousel,
    .lab-life-text {
        flex: 1 1 100%;
        width: 100%;
    }
    .lab-life-text p {
        margin-bottom: 1rem;
        line-height: 1.65;
        color: var(--muted-text);
        font-size: var(--fs-base);
        text-align: left;
    }
}

@media (max-width: 1080px) and (min-width: 769px) {
    nav {
        gap: 1.15rem;
    }

    nav a {
        font-size: var(--fs-xs);
    }
}

@media (max-width: 768px) {
    .events-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .events-section>.container>.section-title {
        margin-bottom: 1.3rem;
        font-size: var(--fs-md);
    }

    .events-card-shell {
        padding: 1.1rem;
    }

    .event-row {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem 0;
    }


    .event-body h3 {
        font-size: var(--fs-base);
    }

    .event-date,
    .event-time,
    .event-dot {
        font-size: var(--fs-xs);
    }

    .event-body p {
        font-size: var(--fs-sm);
    }

    .hero {
        padding: 0rem 0rem 2rem;
        padding-top: 5.5rem;
    }

    .hero h1 {
        margin-bottom: 1.5rem;
    }




    .hero-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }



    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .highlight-card {
        padding: 1.1rem;
    }

    .highlight-card-image img {
        height: 120px;
    }

    .highlight-card-text {
        font-size: var(--fs-sm);
        margin-top: 0.75rem;
    }

    .home-section {
        /* width: 95%; */
        padding: 3rem 0;
    }

    .bg-light {
        padding: 1.5rem 1rem;
    }

    .carousel-viewport {
        position: relative;
    }

    .carousel-stack {
        height: 210px;
        margin-bottom: 2rem;
    }

    .life-img {
        height: 210px;
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 36px;
        height: 36px;
        font-size: var(--fs-lg);
    }

    .carousel-prev {
        left: -0.3rem;
    }

    .carousel-next {
        right: -0.3rem;
    }

    .carousel-arrow:hover {
        transform: translateY(-50%) scale(1.08);
    }

    header {
        height: 3.5rem;
        padding: 0 1.1rem;
    }

    .theme-toggle {
        width: 22px;
        height: 22px;
    }

    .theme-toggle-icon {
        width: 13px;
        height: 13px;
    }

    .content {
        padding: 6rem 0 2rem;
    }

    nav {
        display: none;
    }

    footer {
        width: 85%;
    }

    .logo {
        font-size: var(--fs-base);
        white-space: nowrap;
    }

    .logo-container {
        height: 34px;
        box-sizing: border-box;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.25rem 0.55rem;
        background: var(--nav-bg);
        border: 1px solid var(--nav-border);
        border-radius: 14px;
        filter: var(--nav-shadow);
        box-sizing: border-box;
        /* Same height as .logo-container so the two islands read as a pair. */
        height: 34px;
        z-index: 2;
        transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
    }

    /* The bar stack has to clear the 34px box: 3 x (2px bar + 5px of margin) =
       21px inside the 24px left by the padding and border. Bar centres land 7px
       apart, which is what the open-state translate matches.
       Qualified with `header` on purpose: the base .hamburger div rule is later
       in the file at equal specificity, so an unqualified selector here loses
       and the bars keep the desktop 4px margins — a 30px stack that flexbox
       then shrinks to zero height inside the fixed-height box. */
    header .hamburger div {
        width: 22px;
        margin: 2.5px 0;
    }

    .dropdown {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 3.8rem;
        right: 1.1rem;
        width: 100%;
        /* Borrow the desktop nav identity: pill bg, traced border, soft shadow */
        background-color: var(--nav-bg);
        box-shadow: none;
        filter: var(--nav-shadow);
        border: 1px solid var(--nav-border);
        z-index: 1000;
        border-radius: var(--radius-lg);
        max-width: 160px;
        overflow: hidden;
    }

    .dropdown a {
        padding: 0.4rem 0.6rem;
        text-align: center;
        border-bottom: 1px solid var(--nav-divider);
        text-decoration: none;
        font-size: var(--fs-base);
        position: relative;
        color: var(--text-color);
    }

    .dropdown a.active {
        background: var(--light-blue);
        color: var(--primary-blue);
        font-weight: 500;
    }

    /* Active-page indicator dot — mirrors the desktop nav-dot */
    .dropdown a.active::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--primary-blue);
        transform: translateY(-50%);
    }

    .dropdown a:hover {
        background: var(--light-blue);
        color: var(--primary-blue);
        transition: background 0.2s ease;
    }

    .dropdown a:last-child {
        border-bottom: none;
    }

    .pi-area .team-lead {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 1.5rem auto;
    }

    .team-grid {
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }

    .member-profile-modal {
        width: calc(100% - 1rem);
    }

    .member-profile-panel {
        max-height: 88vh;
    }

    .member-profile-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .member-profile-identity {
        position: relative;
        top: auto;
        flex-direction: row;
        align-items: center;
        padding: 0 3rem 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--surface-border);
    }

    .member-profile-identity img {
        width: 96px;
        flex-shrink: 0;
    }

    .member-profile-copy {
        padding: 0;
    }

    .member-profile-section h3 {
        font-size: var(--fs-sm);
    }

    .member-profile-section p {
        font-size: var(--fs-sm);
    }

    .member-profile-close {
        top: 0.65rem;
        right: 0.65rem;
    }

    .team-lead {
        padding: 0;
        width: 100%;
    }

    .team-lead img {
        max-width: none;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info-card {
        padding: 1rem;
    }

    .contact-info-card h2 {
        font-size: var(--fs-md);
        margin-bottom: 1rem;
    }

    .map-container {
        height: 300px;
        margin-top: 1.5rem;
    }

    .social-links {
        margin-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .social-links a {
        margin-right: 0;
    }

    .publication-item {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .tools-intro {
        margin-bottom: 1.5rem;
        text-align: left;
        font-size: var(--fs-sm);
    }

    .tools-grid {
        display: flex;
    }

    .tool-card {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .tool-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .tool-card:nth-child(even) .tool-figure,
    .tool-card:nth-child(even) .tool-content {
        grid-column: auto;
        grid-row: auto;
    }

    .tool-card-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .tool-figure {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }

    .tool-content {
        min-height: 0;
    }

    .tool-details {
        grid-template-columns: 1fr;
    }

    .tool-details li {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .publication-year-badge {
        font-size: var(--fs-xs);
        width: fit-content;
    }

    .hero p {
        font-size: var(--fs-base);
    }

    .button {
        padding: 0.6rem 1rem;
        font-size: var(--fs-sm);
    }


    .team-member {
        padding: 0.2rem;
        max-width: 290px;
        align-self: center;
    }

    .team-member-img-wrapper {
        margin: 1rem 0rem 0rem 0rem;
    }

    .publication-item {
        padding-left: 0.9rem;
        padding: 1.2rem 0rem;
    }

    .social-links a {
        font-size: var(--fs-sm);
    }

    .publication-title {
        font-size: var(--fs-sm);
    }

    .publication-authors {
        font-size: var(--fs-sm);
    }

    .publication-journal {
        font-size: var(--fs-sm);
    }

    .copyright {
        font-size: var(--fs-sm);
    }
}

@media (max-width: 480px) {
    .member-profile-identity {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 3rem 1rem 0;
    }

    .member-profile-identity img {
        width: min(100%, 170px);
    }
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 2px;
    /* The box has a fixed height, so without this the bars are flex items free
       to shrink — and they collapse to nothing the moment the stack matches the
       content box exactly. */
    flex-shrink: 0;
    background-color: var(--text-color);
    margin: 4px 0;
    /* Springy easing to match the desktop nav's character */
    transition: transform 0.4s cubic-bezier(0.34, 1.45, 0.52, 1),
        opacity 0.25s ease, background-color 0.3s ease;
}

/* Morph the three bars into an X when the menu is open */
.hamburger.open div {
    background-color: var(--primary-blue);
}

/* 7px is the bar-centre spacing, so the outer two land exactly on the middle
   one and the X closes cleanly. */
.hamburger.open div:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open div:nth-child(2) {
    opacity: 0;
}

.hamburger.open div:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}



main {
    position: relative;
    width: 100%;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.slide-left {
    opacity: 0;
    transform: translateX(-40px);
    pointer-events: none;
}

.slide-right {
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
}

.slide-in {
    animation: slideIn 0.4s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The fade-in depends on JS adding .loaded, so only hide images when
   scripting is actually available — otherwise every image stays invisible. */
@media (scripting: enabled) {
    img {
        opacity: 0;
        transition: opacity 0.5s ease-in;
    }
}

img.loaded {
    opacity: 1;
}


.page-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1500;
    background: var(--page-transition-bg);
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
    will-change: opacity, transform;
}

.page-transition.active {
    pointer-events: auto;
    opacity: 1;
}


/* Closed state — drops in/out from the top. Animated via visibility/opacity/
   transform (not display) so the CLOSE transition can run too. The visibility
   change is delayed by the transform duration so the panel stays visible while
   it retracts upward. */
.dropdown {
    transition: opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 0.34s;
    opacity: 0;
    transform: translateY(-16px);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;
}

.dropdown.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    /* Springy drop on open (matches the nav's character); visibility immediate */
    transition: opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.34, 1.45, 0.52, 1),
        visibility 0s;
}

@media (min-width: 769px) {
    .hamburger {
        display: none;
    }

    nav {
        display: flex !important;
    }

    /* Fully remove the mobile menu on desktop */
    .dropdown {
        display: none;
    }
}

/* ---------- Reduced motion ----------
   The site leans on animation (goo nav, 3D carousel, page transitions,
   image fades). Honour the OS-level preference to switch it all off. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* These start hidden/offset and are only revealed by a transition, so they
       need an explicit resting state once transitions are neutralised. */
    img {
        opacity: 1;
    }

    main,
    .slide-left,
    .slide-right {
        opacity: 1;
        transform: none;
    }

    .carousel-card {
        transition: none;
    }
}