/* =============================================================================
   LABA Website - Redesign
   Loaded AFTER assets_laba/css/main.css. Text and section order are unchanged.

   The hero graphic is drawn by hero-field.js. <html data-hero="dark|light"> is the
   theme of the whole site; theme-toggle.js sets it from the sun / moon button.
   ============================================================================= */

:root {
  --ink: #12202b;                 /* headings / strong text */
  --ink-soft: #435565;            /* body text */
  --ink-mute: #7a8997;            /* secondary text */
  --line: #e2e9ed;                /* hairlines, card borders */
  --tint: #f4f8f9;                /* alternating section background */
  --surface: #ffffff;             /* page background */
  --card: #ffffff;                /* cards, badges */
  --card-end: #f1f9f8;            /* far corner of the card gradient */
  --rail: #d5e0e5;                /* timeline line */
  --rail-dot: #a9b7c2;            /* finished-project dot */
  --photo-top: #f2f7f8;           /* backdrop behind the member photos */
  --photo-bottom: #e6eff1;
  --night: #0d0f10;               /* footer */
  --teal: #009FAE;
  --teal-dark: #007d8a;
  --green: #2bb673;
  --teal-wash: rgba(0, 159, 174, 0.08);
  --grad: linear-gradient(90deg, #009FAE 0%, #2bb673 100%);
  --content-width: 1040px;        /* reading width for list sections */
  --radius: 16px;
}

/* Dark theme (the default; <html data-hero="light"> switches to the values above).
   Neutral graphite rather than navy, so the teal is the only colour on the page. */
html:not([data-hero="light"]) {
  color-scheme: dark;
  --ink: #f3f5f5;
  --ink-soft: #b4babb;
  --ink-mute: #7d8486;
  --line: rgba(255, 255, 255, 0.085);
  --tint: #111213;
  --surface: #0b0c0d;
  --card: #161718;
  --card-end: #161c1b;
  --rail: rgba(255, 255, 255, 0.13);
  --rail-dot: #5c6264;
  --night: #070808;
  --photo-top: rgba(255, 255, 255, 0.30);
  --photo-bottom: rgba(255, 255, 255, 0.17);
  --teal-dark: #63dbe0;            /* accent text has to be lighter on dark */
  --teal-wash: rgba(53, 208, 220, 0.11);
}

/* =============================================================================
   BASE TYPOGRAPHY
   ============================================================================= */

html, body {
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p {
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.7;
}

a:hover { color: var(--teal-dark); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(0, 159, 174, 0.22); }

/* =============================================================================
   SECTIONS & SECTION HEADERS
   ============================================================================= */

section { padding: 104px 0; }

#Projects,
#Courses { background: var(--tint); }

.team { background: var(--surface); }

#preloader { background: var(--surface); }

.section-header { padding-bottom: 52px; }

.section-header h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0;
}

.section-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: var(--grad);
}

/* =============================================================================
   HEADER & NAVIGATION  (clear over the hero, frosted once scrolled)
   ============================================================================= */

.header {
  --nav-color: var(--ink);
  --nav-divider: rgba(18, 32, 43, 0.18);
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.header.sticked {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(18, 32, 43, 0.06);
}

/* dark theme: white menu text and dark glass on every section, a little clearer
   while still over the hero (hero-field.js sets .over-hero) */
html:not([data-hero="light"]) .header {
  --nav-color: rgba(255, 255, 255, 0.88);
  --nav-divider: rgba(255, 255, 255, 0.24);
}

html:not([data-hero="light"]) .header.sticked {
  background: rgba(10, 11, 12, 0.66);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html:not([data-hero="light"]) .header.sticked.over-hero { background: rgba(10, 11, 12, 0.4); }

.header .container-fluid { padding: 0 clamp(14px, 3vw, 48px); }

.header .logo img {
  max-height: 40px;
  margin: 14px 0;
}

@media (min-width: 992px) {
  .navbar a,
  .navbar a:focus {
    padding: 25px 15px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--nav-color);
  }

  .navbar .active,
  .navbar .active:focus,
  .navbar .active:hover {
    color: var(--nav-color) !important;
  }

  .navbar a:hover,
  .navbar li:hover > a,
  .navbar .active:hover { color: var(--teal) !important; }

  .navbar > ul > li > a:before {
    bottom: 16px;
    left: 15px;
    width: calc(100% - 30px);
    background: var(--grad);
    transform-origin: left center;
  }

  .navbar a:hover:before,
  .navbar li:hover > a:before { transform: scaleX(1); }

  .nav-divider {
    border-left-color: var(--nav-divider);
    height: 22px;
    margin: 0 8px;
  }
}

@media (max-width: 991px) {
  .header .logo img {
    max-height: 34px;
    margin: 11px 0;
  }

  .mobile-nav-toggle { color: var(--nav-color); }

  /* ---- mobile menu: a drawer from the right over a dimmed page -------- */

  /* the full-screen layer only holds the dimmer; it is inert until opened */
  .navbar {
    left: 0;
    height: 100vh;
    height: 100dvh;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.4s;
  }

  .mobile-nav-active .navbar {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* the toggle lives inside .navbar, so it must opt back in while that is hidden */
  .navbar .mobile-nav-toggle {
    visibility: visible;
    pointer-events: auto;
  }

  .navbar:before,
  .mobile-nav-active .navbar:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9996;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .mobile-nav-active .navbar:before { opacity: 1; }

  /* the drawer itself */
  .navbar ul {
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    padding: 84px 14px 32px;
    background: rgba(15, 16, 17, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px 0 0 24px;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
    transform: translateX(104%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-nav-active .navbar ul { transform: none; }

  /* links drift in one after another */
  .navbar li {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .mobile-nav-active .navbar li {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-nav-active .navbar li:nth-child(1) { transition-delay: 0.08s; }
  .mobile-nav-active .navbar li:nth-child(2) { transition-delay: 0.12s; }
  .mobile-nav-active .navbar li:nth-child(3) { transition-delay: 0.16s; }
  .mobile-nav-active .navbar li:nth-child(4) { transition-delay: 0.20s; }
  .mobile-nav-active .navbar li:nth-child(5) { transition-delay: 0.24s; }
  .mobile-nav-active .navbar li:nth-child(6) { transition-delay: 0.28s; }
  .mobile-nav-active .navbar li:nth-child(n+7) { transition-delay: 0.32s; }

  .navbar a,
  .navbar a:focus {
    padding: 15px 16px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    border-radius: 12px;
    border-bottom: 0;
  }

  .navbar a:hover,
  .navbar li:hover > a {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.07);
  }

  /* Github sits apart, as it does on desktop */
  .navbar li:last-child {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* =============================================================================
   HERO  (generated graphic: hero-field.js draws the canvas)
   Colours come from the --hero-* variables so dark/light is one switch.
   ============================================================================= */

.hero-fullscreen-laba {
  --hero-base: 8, 10, 11;
  --hero-title: #ffffff;
  --hero-text: rgba(255, 255, 255, 0.74);
  --hero-eyebrow: #6fdfe4;
  --hero-grad: linear-gradient(90deg, #35d0dc 0%, #7be8ab 100%);

  padding: 150px 0 110px;
  background:
    radial-gradient(1100px 560px at 78% 42%, rgba(0, 159, 174, 0.27), transparent 62%),
    radial-gradient(820px 520px at 12% 105%, rgba(43, 182, 115, 0.13), transparent 62%),
    rgb(var(--hero-base));
  background-attachment: scroll;
}

html[data-hero="light"] .hero-fullscreen-laba {
  --hero-base: 244, 250, 250;
  --hero-title: var(--ink);
  --hero-text: var(--ink-soft);
  --hero-eyebrow: var(--teal-dark);
  --hero-grad: var(--grad);

  background:
    radial-gradient(1100px 560px at 78% 42%, rgba(0, 159, 174, 0.16), transparent 62%),
    radial-gradient(820px 520px at 12% 105%, rgba(43, 182, 115, 0.14), transparent 62%),
    rgb(var(--hero-base));
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                                 /* height is set by hero-field.js */
  z-index: 0;
  pointer-events: none;
}

.hero-canvas {
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* "Learn more" is open (learnmore.js adds .expanded): push the field back so the
   long text reads cleanly */
.hero-fullscreen-laba.expanded .hero-canvas {
  opacity: 0.45;
  filter: blur(2.5px);
}

/* keeps the text side calm; the field shows through on the right */
.hero-fullscreen-laba:before {
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(var(--hero-base), 0.82) 0%,
    rgba(var(--hero-base), 0.5) 30%,
    rgba(var(--hero-base), 0) 58%);
}

.hero-fullscreen-laba > .container {
  align-items: flex-start !important;
}

/* the old illustration is replaced by the generated graphic */
/* !important: the element carries Bootstrap's .d-flex, which is itself !important */
#hero-animated-mainimg { display: none !important; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-size: clamp(12px, 1vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--hero-eyebrow);
}

.hero-eyebrow-part { display: inline-block; }    /* wraps as one piece */

.hero-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--hero-grad);
}

.hero-fullscreen-laba h2 {
  max-width: 14em;
  margin: 0 0 34px;
  font-size: clamp(34px, 4.8vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.07;
  color: var(--hero-title);
  text-align: left;
  text-wrap: balance;
}

.hero-fullscreen-laba h2 span {
  color: var(--hero-eyebrow);                  /* fallback */
  background: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-fullscreen-laba p {
  max-width: 640px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--hero-text);
  text-align: left;
}

#hiddenContent.show {
  max-height: 1600px;
  padding: 0 0 36px;
}

/* the introduction: four short paragraphs, key phrases picked out */
#hiddenContent { max-width: 680px; }

#hiddenContent p { margin-bottom: 18px; }

#hiddenContent p:last-child { margin-bottom: 0; }

#hiddenContent strong {
  font-weight: 600;
  color: var(--hero-title);
  transition: color 0.25s ease;
}

#hiddenContent strong:hover { color: var(--hero-eyebrow); }

.hero-fullscreen-laba .btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  color: var(--color-white);
  background: var(--grad);
  box-shadow: 0 12px 30px rgba(0, 159, 174, 0.35);
}

.hero-fullscreen-laba .btn-get-started::after {
  content: "\2192";                            /* → */
  transition: transform 0.25s ease;
}

.hero-fullscreen-laba .btn-get-started:hover {
  color: var(--color-white);
  background: var(--grad);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 159, 174, 0.45);
}

.hero-fullscreen-laba .btn-get-started:hover::after { transform: translateX(4px); }

/* =============================================================================
   RESEARCH INTERESTS (cards: icon tile, faint number, dotted corner)
   ============================================================================= */

#research-interests {
  padding: 104px 0 !important;
  background: var(--surface);
}

#research-interests .tab-content {
  max-width: var(--content-width);
  margin: 0 auto;
}

#research-interests .tab-pane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  counter-reset: interest;
}

#research-interests .project-item {
  counter-increment: interest;
  position: relative;
  overflow: hidden;
  align-items: stretch !important;
  margin-top: 0 !important;
  padding: 30px 28px 32px;
  background: linear-gradient(160deg, var(--card) 55%, var(--card-end) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* big faint number in the corner */
#research-interests .project-item::before {
  content: counter(interest, decimal-leading-zero);
  position: absolute;
  right: 24px;
  top: 18px;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--teal);                          /* fallback */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.16;
  transition: opacity 0.3s ease;
}

/* dotted field fading out from the bottom-right corner, echoing the hero */
#research-interests .project-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 78%;
  background-image: radial-gradient(circle, rgba(0, 159, 174, 0.55) 1.1px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, transparent 68%);
  opacity: 0.45;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

html.can-hover #research-interests .project-item:hover {
  border-color: rgba(0, 159, 174, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(18, 32, 43, 0.10);
}

html.can-hover #research-interests .project-item:hover::before { opacity: 0.3; }

/* the faint numbers need more presence on dark cards */
html:not([data-hero="light"]) #research-interests .project-item::before { opacity: 0.34; }
html:not([data-hero="light"]) #research-interests .project-item:hover::before { opacity: 0.55; }
html.can-hover #research-interests .project-item:hover::after  { opacity: 1; }

#research-interests .project-item h5 {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
}

#research-interests .project-text { text-wrap: pretty; }

#research-interests .project-text strong {
  font-weight: 700;
  color: var(--ink);
}

/* the old bullet slot becomes an icon tile */
#research-interests .project-icon {
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 15px;
  color: var(--color-white);
  background: linear-gradient(135deg, #009FAE 0%, #2bb673 100%);
  box-shadow: 0 10px 22px rgba(0, 159, 174, 0.26);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html.can-hover #research-interests .project-item:hover .project-icon { transform: scale(1.07) rotate(-4deg); }

#research-interests .project-bullet { display: none; }

#research-interests .project-icon::before {
  font-family: "bootstrap-icons";
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  content: "\f589";                            /* stars: default for any extra card */
}

/* Icons are matched to the cards by position (the text comes from data.json):
   1 machine learning, 2 cross-industry integration, 3 foundation models, 4 agriculture */
#research-interests .project-item:nth-child(1) .project-icon::before { content: "\f2d6"; }  /* cpu */
#research-interests .project-item:nth-child(2) .project-icon::before { content: "\f2ee"; }  /* diagram-3 */
#research-interests .project-item:nth-child(3) .project-icon::before { content: "\f45b"; }  /* layers */
#research-interests .project-item:nth-child(4) .project-icon::before { content: "\f3cd"; }  /* flower1 */


/* ---- illustrations (research-graphics.js draws one SVG at the top of each card) */

/* picture across the top; under it the number sits in its own column beside the text */
#research-interests .project-item {
  display: grid !important;                 /* the markup carries Bootstrap's d-flex */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
}

#research-interests .project-item .ri-graphic { grid-column: 1 / -1; }
#research-interests .project-item h5 { grid-column: 2; }

/* the illustration takes over from the icon tile */
#research-interests .project-icon { display: none; }

#research-interests .project-item h5 { gap: 0; }

#research-interests .project-item::before {
  position: static;
  grid-column: 1;
  grid-row: 2;
  font-size: 38px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;     /* every number as wide, so the text lines up */
  letter-spacing: -0.04em;
  line-height: 0.9;
  opacity: 1 !important;
}

/* a soft light that follows the pointer across the card (the old dotted corner
   pseudo-element is reused for it; research-graphics.js sets --mx / --my) */
#research-interests .project-item::after {
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 30%), rgba(53, 208, 220, 0.13), transparent 70%);
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#research-interests .project-item.is-active::after,
html.can-hover #research-interests .project-item:hover::after { opacity: 1; }

/* the picture leans a little toward the pointer (--tx / --ty run -0.5..0.5) */
.ri-graphic {
  transform: perspective(800px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

html.can-hover #research-interests .project-item:hover .ri-graphic {
  transition-duration: 0.15s;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

#research-interests .project-item.is-active { border-color: rgba(0, 159, 174, 0.4); }

.ri-graphic {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--g-panel);
  overflow: hidden;                   /* furrows and rings stop at the panel edge */
  --g-panel: linear-gradient(160deg, #f2f8f8 0%, #e9f4f2 100%);
  --g-faint: rgba(0, 120, 135, 0.22);
  --g-mid: rgba(0, 120, 135, 0.38);
  --g-strong: #0b8f9c;
}

html:not([data-hero="light"]) .ri-graphic {
  --g-panel: linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, rgba(53, 208, 220, 0.05) 100%);
  --g-faint: rgba(150, 230, 235, 0.16);
  --g-mid: rgba(150, 230, 235, 0.32);
  --g-strong: #63dbe0;
}

.ri-graphic .g-stop-a { stop-color: #10b3c2; }
.ri-graphic .g-stop-b { stop-color: #34c983; }

.ri-graphic .g-faint,
.ri-graphic .g-lattice { fill: var(--g-faint); }
.ri-graphic .g-lattice-top,
.ri-graphic .g-node { fill: var(--g-mid); }
.ri-graphic .g-node-lead { fill: var(--g-strong); }

.ri-graphic .g-edge,
.ri-graphic .g-furrow,
.ri-graphic .g-link,
.ri-graphic .g-plane {
  fill: none;
  stroke: var(--g-faint);
  stroke-width: 1;
}

.ri-graphic .g-plane.is-top { stroke: var(--g-mid); }
.ri-graphic .g-link { stroke-dasharray: 2 4; }
.ri-graphic .g-furrow { stroke-dasharray: 1 6; stroke-width: 2; stroke-linecap: round; stroke: var(--g-mid); }

.ri-graphic .g-band { opacity: 0.12; }

.ri-graphic .g-curve,
.ri-graphic .g-flow,
.ri-graphic .g-ring,
.ri-graphic .g-ping,
.ri-graphic .g-scan-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* motion: slow and quiet; the page around it stays still */
.ri-graphic * { transform-box: fill-box; transform-origin: center; }

.ri-graphic .g-curve {
  stroke-dasharray: 1;
  animation: g-draw 5s ease-in-out infinite;
}

@keyframes g-draw {
  0%       { stroke-dashoffset: 1; }
  45%, 80% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -1; }
}

.ri-graphic .g-pulse { animation: g-pulse 2.8s ease-in-out infinite; }

@keyframes g-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.75; }
}

.ri-graphic .g-flow {
  stroke-width: 1.6;
  stroke-dasharray: 3 7;
  animation: g-flow 1.6s linear infinite;
}

@keyframes g-flow { to { stroke-dashoffset: -20; } }

.ri-graphic .g-ring,
.ri-graphic .g-ping { animation: g-ring 2.6s ease-out infinite; }

@keyframes g-ring {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

.ri-graphic .g-layer { animation: g-float 4.5s ease-in-out infinite alternate; }

@keyframes g-float {
  from { transform: translateY(2.5px); }
  to   { transform: translateY(-2.5px); }
}

.ri-graphic .g-scan {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: g-scan 5.5s ease-in-out infinite alternate;
}

.ri-graphic .g-scan-glow { opacity: 0.14; }

@keyframes g-scan {
  from { transform: translateY(132px); }
  to   { transform: translateY(46px); }
}

/* signals climbing the links between the stacked layers */
.ri-graphic .g-rise {
  opacity: 0;
  animation: g-rise 3.6s ease-in infinite;
}

@keyframes g-rise {
  0%   { transform: translateY(0);     opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-56px); opacity: 0; }
}

/* ---- pointing at a card: each picture answers in its own way ------------- */
.ri-graphic .g-band,
.ri-graphic .g-point,
.ri-graphic .g-cluster,
.ri-graphic .g-hub,
.ri-graphic .g-spread,
.ri-graphic .g-link,
.ri-graphic .g-node,
.ri-graphic .g-node-lead {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, fill 0.4s ease, stroke 0.4s ease;
}

/* 1: more evidence, less doubt: the uncertainty band fades, the fit firms up */
.ri-graphic .g-curve { transition: stroke-width 0.4s ease; }
#research-interests .project-item.is-active .g-band,
html.can-hover #research-interests .project-item:hover .g-band { opacity: 0.03; }
#research-interests .project-item.is-active .g-curve,
html.can-hover #research-interests .project-item:hover .g-curve { stroke-width: 3; }
#research-interests .project-item.is-active .g-point,
html.can-hover #research-interests .project-item:hover .g-point { r: 5; }

/* 2: the clusters move in toward the shared node, which grows */
.ri-graphic .g-cluster { transform-box: view-box; transform-origin: 0 0; }
#research-interests .project-item.is-active .g-cluster-0,
html.can-hover #research-interests .project-item:hover .g-cluster-0 { transform: translate(8px, 0); }
#research-interests .project-item.is-active .g-cluster-1,
html.can-hover #research-interests .project-item:hover .g-cluster-1 { transform: translate(-7px, 4px); }
#research-interests .project-item.is-active .g-cluster-2,
html.can-hover #research-interests .project-item:hover .g-cluster-2 { transform: translate(-7px, -4px); }
#research-interests .project-item.is-active .g-node,
html.can-hover #research-interests .project-item:hover .g-node { fill: var(--g-strong); }
#research-interests .project-item.is-active .g-hub,
html.can-hover #research-interests .project-item:hover .g-hub { transform: scale(1.3); }
#research-interests .project-item.is-active .g-flow,
html.can-hover #research-interests .project-item:hover .g-flow { animation-duration: 0.7s; }

/* 3: the layers open up and the signals speed up */
.ri-graphic .g-spread { transform-box: view-box; transform-origin: 0 0; }
#research-interests .project-item.is-active .g-spread-0,
html.can-hover #research-interests .project-item:hover .g-spread-0 { transform: translateY(10px); }
#research-interests .project-item.is-active .g-spread-2,
html.can-hover #research-interests .project-item:hover .g-spread-2 { transform: translateY(-10px); }
#research-interests .project-item.is-active .g-link,
html.can-hover #research-interests .project-item:hover .g-link { stroke: var(--g-mid); }
#research-interests .project-item.is-active .g-rise,
html.can-hover #research-interests .project-item:hover .g-rise { animation-duration: 1.3s; }

/* 4: the scan sweeps faster and the sensors answer more often */
#research-interests .project-item.is-active .g-scan,
html.can-hover #research-interests .project-item:hover .g-scan { animation-duration: 2.2s; }
#research-interests .project-item.is-active .g-ping,
html.can-hover #research-interests .project-item:hover .g-ping { animation-duration: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .ri-graphic * { animation: none !important; }
  .ri-graphic { transform: none !important; }
  .ri-graphic .g-curve { stroke-dashoffset: 0; }
  .ri-graphic .g-scan { transform: translateY(90px); }
}

/* =============================================================================
   PROJECTS (timeline)
   ============================================================================= */

#Projects .tab-content {
  max-width: var(--content-width);
  margin: 0 auto;
}

.project-item h5 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--ink);
}

#Projects .project-item {
  position: relative;
  margin-top: 0 !important;
  padding: 17px 0;
}

/* the vertical rail; trimmed so it starts and ends on a dot */
#Projects .project-item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rail);
}

#Projects .project-item:first-child::before { top: 30px; }
#Projects .project-item:last-child::before  { bottom: calc(100% - 30px); }

#Projects .project-item h5 {
  align-items: flex-start;
  width: 100%;
}

#Projects .project-icon {
  position: relative;
  width: 28px;
  height: 1.55em;                              /* one text line: dot sits on line one */
  margin-right: 18px;
}

#Projects .project-bullet {
  position: relative;
  width: 10px;
  height: 10px;
  margin-right: 0;
  background: var(--teal);
  box-shadow: 0 0 0 5px var(--tint);           /* cuts the rail behind the dot */
}

/* ongoing: pulsing ring */
.open-project .project-bullet::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0%        { transform: scale(1);   opacity: 0.7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* period on the left like a timeline label, title, then the funder on the right */
#Projects .project-text {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
}

#Projects .project-period { grid-column: 1; }

#Projects .project-title {
  grid-column: 2;
  transition: color 0.25s ease;
}

#Projects .project-item:hover .project-title { color: var(--teal-dark); }

#Projects .project-meta {
  grid-column: 3;
  display: inline-flex;
  gap: 6px;
}

#Projects .project-period .project-badge {
  display: block;
  text-align: center;
}

.project-badge {
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
}

.project-badge-funder {
  color: var(--teal-dark);
  background: var(--teal-wash);
  border-color: rgba(0, 159, 174, 0.18);
}

.project-badge-period {
  color: var(--ink-soft);
  background: var(--card);
  border-color: var(--line);
  font-variant-numeric: tabular-nums;
}

.faded-project .project-badge {
  color: var(--ink-mute);
  background: transparent;
  border-color: var(--line);
}

.open-project .project-text { color: var(--ink); }

/* finished: hollow dot, muted text (no opacity, keeps contrast) */
.faded-project .project-bullet {
  background: var(--tint) !important;
  border: 2px solid var(--rail-dot);
  opacity: 1;
}

.faded-project .project-text {
  color: var(--ink-mute);
  opacity: 1;
}

/* =============================================================================
   PUBLICATIONS
   ============================================================================= */

#publications { padding-bottom: 104px; }

#publications .container > .project-item,
#publications .container > p {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

#publications .container > .project-item {
  margin-top: 0 !important;
  padding-top: 26px;
}

#publications .project-item h5 {
  font-size: clamp(17.5px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.018em;
}

#publications .d-flex.align-items-center h5 i { display: none; }

#publications a {
  color: var(--ink);
  font-weight: 600;
  transition: color 0.25s ease;
}

#publications a::after {
  content: "\2197";                            /* ↗ */
  display: inline-block;
  margin-left: 7px;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--teal);
  transition: transform 0.25s ease;
}

#publications a:hover { color: var(--teal-dark); }

#publications a:hover::after { transform: translate(3px, -3px); }

/* authors / venue line */
#publications .container > p {
  margin-top: 8px;
  margin-bottom: 0;
  padding-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}

#publications .container > p:last-child { border-bottom: 0; }

#publications .pub-authors { display: block; }

#publications .pub-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* venue names can be long, so this badge may wrap: soft corners, not a pill */
.pub-badge {
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* =============================================================================
   COURSES (one plain column per level: Undergraduate / Graduate)
   ============================================================================= */

.course-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px 56px;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* No box. Pointing anywhere in a level tints that whole level (heading and every
   course) so it reads as one group. */
.course-group { text-align: center; }

.course-group-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.course-group-icon {
  font-size: 19px;
  line-height: 1;
  color: var(--teal);
}

.course-group-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.25s ease;
}

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

.course-list li {
  padding: 16px 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s ease;
}

.course-list li:last-child { border-bottom: 0; }

.course-group:hover h3,
.course-group:hover .course-list li { color: var(--teal-dark); }

/* =============================================================================
   TEAM
   ============================================================================= */

.team .row { --bs-gutter-x: 22px; }

.team .row > [class*="col-"] { margin-bottom: 22px !important; }

.team .team-member {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* the card lifts and the photo grows */
.team .team-member:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 159, 174, 0.35);
  box-shadow: 0 22px 44px rgba(18, 32, 43, 0.12);
}

.team .member-img {
  height: auto;
  aspect-ratio: 19 / 18;                       /* photos are 570x540 */
  border-radius: 0;
  background: linear-gradient(180deg, var(--photo-top) 0%, var(--photo-bottom) 100%);
}

.team .member-img img {
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.team .team-member:hover .member-img img { transform: scale(1.1); }

.team .member-info { padding: 22px 16px 20px; }

.team .member-info h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

.team .member-description {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* role on the first line reads stronger than the affiliation under it */
.team .member-description::first-line {
  color: var(--teal-dark);
  font-weight: 600;
}

/* round icon buttons: mail (a click copies the address), then LinkedIn / CV for
   the members who have them */
.member-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.member-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.member-link:hover,
.member-link.is-copied {
  color: var(--teal-dark);
  background: var(--teal-wash);
  border-color: rgba(0, 159, 174, 0.35);
}

/* =============================================================================
   FOOTER & SCROLL TOP
   ============================================================================= */

.footer {
  position: relative;
  background: var(--night);
  padding: 52px 0;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad);
}

.footer .copyright {
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.62);
}

.footer .copyright strong { color: #4fd6dc; }

.scroll-top {
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 10px 24px rgba(0, 159, 174, 0.32);
}

.scroll-top:hover { background: var(--grad); transform: translateY(-2px); }

/* =============================================================================
   THEME TOGGLE (sun / moon button at the end of the menu)
   ============================================================================= */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--nav-color);
  background: transparent;
  border: 1px solid var(--nav-divider);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle:hover {
  color: var(--teal);
  border-color: var(--teal);
  transform: rotate(40deg);
}

@media (min-width: 992px) {
  .navbar {
    display: flex;
    align-items: center;
  }

  .theme-toggle { margin-left: 10px; }
}

/* small screens: sits beside the menu button (it lives inside the hidden drawer
   layer, so like that button it has to opt back in) */
@media (max-width: 991px) {
  .navbar .theme-toggle {
    position: fixed;
    top: 11px;
    right: 62px;
    z-index: 9995;
    width: 36px;
    height: 36px;
    font-size: 16px;
    visibility: visible;
    pointer-events: auto;
  }

  /* drawer open: the dimmer covers the page, the button steps back */
  .mobile-nav-active .navbar .theme-toggle {
    opacity: 0;
    pointer-events: none;
  }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 991px) {
  /* text spans the full width here, so calm the whole field behind it */
  .hero-fullscreen-laba:before {
    background: linear-gradient(180deg,
      rgba(var(--hero-base), 0.80) 0%,
      rgba(var(--hero-base), 0.55) 100%);
  }
}

@media (max-width: 768px) {
  section { padding: 64px 0; }
  #research-interests { padding: 64px 0 !important; }
  #publications { padding-bottom: 64px; }
  .section-header { padding-bottom: 36px; }

  .hero-fullscreen-laba {
    padding: 104px 0 64px;
    min-height: 88vh;
  }

  .hero-fullscreen-laba h2 { margin-bottom: 26px; }

  .hero-fullscreen-laba .btn-get-started {
    gap: 8px;
    padding: 11px 22px;
    font-size: 14.5px;
    box-shadow: 0 8px 20px rgba(0, 159, 174, 0.3);
  }

  .hero-fullscreen-laba p {
    font-size: 15px;
    padding: 0;
  }

  #research-interests .tab-pane,
  .course-groups { grid-template-columns: 1fr; gap: 36px; }

  #research-interests .project-item { padding: 22px 20px 24px; }
  #research-interests .project-item::before { font-size: 30px; }
  #research-interests .project-item { column-gap: 14px; }
  #research-interests .project-item h5 { gap: 16px; }
  #research-interests .project-icon { width: 46px; height: 46px; border-radius: 13px; }
  #research-interests .project-icon::before { font-size: 21px; }

  .course-list li { font-size: 15.5px; padding: 15px 0; }

  #Projects .project-icon { margin-right: 12px; }

  /* phones: badges share the first line, the title gets the full width under them */
  #Projects .project-text {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 6px;
  }
  #Projects .project-period { grid-column: 1; grid-row: 1; }
  #Projects .project-meta   { grid-column: 2; grid-row: 1; justify-self: start; }
  #Projects .project-title  { grid-column: 1 / -1; grid-row: 2; }
  #Projects .project-icon   { height: 27px; }       /* dot lines up with the badges */
  #Projects .project-item { padding: 14px 0; }
  #Projects .project-item:first-child::before { top: 26px; }
  #Projects .project-item:last-child::before  { bottom: calc(100% - 26px); }

  .project-item h5 { font-size: 15.5px; }
  #publications .container > p { font-size: 13.5px; }
}

@media (max-width: 575px) {
  /* header: the logo and the two buttons use the same 28px inset as the hero text
     below them, are the same 36px size, and are centred on one line
     (main.css sets the menu button with !important, hence the same here) */
  .header .container-fluid { padding: 0 28px; }

  .header .logo img { display: block; }

  .navbar .mobile-nav-toggle,
  .navbar .theme-toggle {
    top: 10px !important;
    width: 36px;
    height: 36px;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center;
    line-height: 1;
  }

  /* the icon glyphs carry a little empty space of their own; these offsets put
     their visible ink on the 28px inset and on the logo's centre line */
  .navbar .mobile-nav-toggle {
    right: 24px;
    justify-content: flex-end;
    font-size: 28px !important;
  }

  .navbar .mobile-nav-toggle::before,
  .navbar .theme-toggle .bi::before { vertical-align: 0; }

  .navbar .theme-toggle .bi { transform: translateY(1px); }

  .navbar .theme-toggle {
    right: 68px;
    justify-content: center;
    border-color: transparent;
    font-size: 18px;
  }

  /* hero text sits a little further in than the page gutter */
  .hero-fullscreen-laba > .container {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* small phones: keep "Agricultural Evolution" on one line */
  .hero-fullscreen-laba h2 { font-size: clamp(28px, 8.5vw, 34px); }

  .container { padding-left: 18px; padding-right: 18px; }

  /* two members per row on phones instead of one tall card each */
  .team .row { --bs-gutter-x: 12px; }
  .team .row > [class*="col-"] { width: 50%; margin-bottom: 12px !important; }
  .team .member-img { height: auto; }
  .team .member-info { padding: 14px 8px; }
  .team .member-info h4 { font-size: 14.5px; }
  .team .member-description { font-size: 11.5px; margin-bottom: 10px; }
  .member-links { gap: 6px; }
  .member-link { width: 32px; height: 32px; font-size: 14px; }

}

@media (prefers-reduced-motion: reduce) {
  .open-project .project-bullet::after { animation: none !important; }

  .navbar ul,
  .navbar li,
  .team .team-member,
  .team .member-img img,
  #research-interests .project-item,
  #research-interests .project-icon { transition: none; }
}