/* Homepage-specific theme and component styles. */

:root {
    --theme-ink: #16243d;
    --theme-muted: #64748b;
    --theme-blue: #2f6feb;
    --theme-blue-dark: #1e4fb8;
    --theme-teal: #149b96;
    --theme-gold: #d99a21;
    --theme-purple: #7457e8;
    --theme-line: #dce5f3;
    --theme-blue-soft: #eef5ff;
    --theme-teal-soft: #eefaf8;
  }

  body {
    color: var(--theme-ink);
    background: #ffffff;
  }

  #about a,
  #publications a,
  #service a,
  #contact a {
    color: var(--theme-blue);
    transition: color 0.2s ease;
  }

  #about a:hover,
  #publications a:hover,
  #service a:hover,
  #contact a:hover {
    color: var(--theme-teal);
  }

  /* About: warm, approachable introduction with restrained accents. */
  #about {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 8% 18%, rgba(47, 111, 235, 0.09), transparent 25%),
      radial-gradient(circle at 92% 82%, rgba(20, 155, 150, 0.08), transparent 28%),
      #ffffff;
  }

  #about .team-member {
    padding: 28px 22px 24px;
    border: 1px solid rgba(47, 111, 235, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 18px 46px rgba(29, 55, 99, 0.10);
  }

  #about .rounded-circle {
    border: 5px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.22), 0 14px 34px rgba(38, 58, 96, 0.16);
  }

  #about h1,
  #about h3,
  #about h4,
  #about h5,
  #about h6 {
    color: var(--theme-ink);
  }

  #about h1::after,
  #service .section-subheading:first-child::after {
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 12px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, var(--theme-blue), var(--theme-teal));
  }

  #about .text-muted {
    color: var(--theme-muted) !important;
  }

  #about .network-icon a {
    color: var(--theme-blue);
    border: 1px solid #d8e3f5;
    background: #f6f9ff;
  }

  #about .network-icon a:hover {
    color: #ffffff;
    border-color: var(--theme-blue);
    background: linear-gradient(135deg, var(--theme-blue), var(--theme-purple));
  }

  #about li::marker {
    color: var(--theme-teal);
  }

  #about font {
    color: #c97913 !important;
    font-weight: 700;
  }

  /* Publications: lively academic cards with clear information hierarchy. */
  #publications.bg-light {
    padding-top: 48px;
    padding-bottom: 78px;
    background:
      radial-gradient(circle at 94% 8%, rgba(116, 87, 232, 0.09), transparent 25%),
      radial-gradient(circle at 5% 62%, rgba(20, 155, 150, 0.08), transparent 27%),
      linear-gradient(180deg, #edf4ff 0%, #f6f9ff 50%, #eff9f7 100%) !important;
  }

  #publications h1.section-subheading {
    display: inline-block;
    margin: 0 !important;
    padding-bottom: 13px;
    color: var(--theme-ink);
    position: relative;
  }

  #publications h1.section-subheading::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 92px;
    height: 5px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, var(--theme-blue), var(--theme-teal), var(--theme-gold));
  }

  #publications > .container > .row > .col-md-12,
  #service > .container > .row > .col-md-12 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 24px;
  }

  #publications > .container > .row > .col-md-12 + .publication,
  #service > .container > .row > .col-md-12 + ul {
    margin-top: 0;
  }

  #publications .publication {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(32, 56, 98, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  #publications .publication:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 42px rgba(32, 56, 98, 0.13);
  }

  #publications .publication-left img {
    border: 1px solid #e0e7f2;
    border-radius: 11px;
    background: #f8faff;
  }

  #publications .pub-title,
  #publications .pub-title a,
  #publications .pub-title a:visited {
    color: #173a63;
    font-weight: 760;
  }

  #publications .pub-title a:hover,
  #publications .pub-title a:focus-visible,
  #publications .pub-title a:active {
    color: var(--theme-blue);
  }

  #publications .pub-authors {
    color: #66758a;
  }

  #publications .pub-authors b,
  #publications .pub-authors strong {
    color: #415674;
  }

  #publications .pub-authors + .pub-authors {
    margin-top: 4px;
    color: #2f7f7a;
  }

  /* Service: fresh teal tint separates it from Projects without becoming playful. */
  #service {
    padding-top: 48px;
    padding-bottom: 70px;
    background:
      radial-gradient(circle at 90% 22%, rgba(20, 155, 150, 0.08), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #f3faf9 100%);
  }

  #service h1 {
    margin: 0;
    color: var(--theme-ink);
  }

  #service b {
    color: var(--theme-ink);
  }

  #service > .container > .row {
    align-items: stretch;
  }

  #service > .container > .row > ul {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    margin: 12px 0;
    padding: 20px 24px 20px 28px;
    border: 1px solid #dcebe9;
    border-left: 4px solid var(--theme-teal);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 9px 25px rgba(29, 83, 79, 0.06);
  }

  #service li {
    color: #617086;
  }

  #service li::marker {
    color: var(--theme-teal);
  }

  /* Contact: a confident dark finish with blue and teal depth. */
  #contact {
    padding: 58px 0 64px;
    color: #dbe6f7;
    background:
      radial-gradient(circle at 85% 20%, rgba(47, 111, 235, 0.28), transparent 28%),
      radial-gradient(circle at 8% 100%, rgba(20, 155, 150, 0.22), transparent 30%),
      linear-gradient(135deg, #14223b 0%, #192d4d 58%, #173c49 100%);
  }

  #contact h2 {
    color: #ffffff;
  }

  #contact h2::after {
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 11px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, #6da4ff, #55d0c7, #f0bd59);
  }

  #contact .text-muted {
    color: #c7d4e7 !important;
  }

  #contact a,
  #contact a:hover {
    color: #86b6ff;
  }

  @media (max-width: 760px) {
    #about .team-member { padding: 22px 16px; }
    #publications.bg-light { padding-top: 36px; padding-bottom: 58px; }
    #publications .publication { border-radius: 14px; }
    #service { padding-top: 36px; padding-bottom: 54px; }
    #service > .container > .row > ul { padding: 17px 18px 17px 22px; }
    #contact { padding: 44px 0 48px; }
  }

/* Publication titles: black by default, blue when interacting. */
  #publications .pub-title a,
  #publications .pub-title a:visited {
    color: #173a63;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #publications .pub-title a:hover,
  #publications .pub-title a:focus-visible,
  #publications .pub-title a:active {
    color: var(--theme-blue);
    text-decoration: none;
  }

  #publications .pub-title a:focus-visible {
    outline: 2px solid rgba(47, 111, 235, 0.3);
    outline-offset: 3px;
    border-radius: 3px;
  }

  /* Keep author names readable but visually secondary to the title. */
  #publications .pub-authors {
    color: #66758a;
  }

  #publications .pub-authors b,
  #publications .pub-authors strong {
    color: #415674;
  }

  #publications .pub-authors + .pub-authors {
    color: #2f7f7a;
  }

#project.projects-showcase {
      position: relative;
      clear: both;
      overflow: hidden;
      padding: 48px 0 72px;
      border-top: 1px solid rgba(78, 111, 190, 0.12);
      border-bottom: 1px solid rgba(78, 111, 190, 0.14);
      background:
        radial-gradient(circle at 8% 8%, rgba(47, 151, 232, 0.14), transparent 30%),
        radial-gradient(circle at 92% 22%, rgba(126, 83, 244, 0.14), transparent 32%),
        linear-gradient(180deg, #eef6ff 0%, #f5f1ff 52%, #eef5ff 100%);
    }

    #project .projects-shell {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    #project .projects-heading {
      max-width: 780px;
      margin-bottom: 24px;
    }

    #project .projects-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: #5653d8;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    #project .projects-kicker::before {
      width: 28px;
      height: 2px;
      content: "";
      border-radius: 999px;
      background: linear-gradient(90deg, #279ce8, #8855ef);
    }

    #project .projects-title {
      position: relative;
      display: inline-block;
      margin: 0;
      padding-bottom: 13px;
      color: #172033;
      font-size: clamp(2.25rem, 5vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -0.045em;
    }

    #project .projects-title::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 72px;
      height: 5px;
      content: "";
      border-radius: 999px;
      background: linear-gradient(90deg, #2f6feb, #149b96, #d99a21);
    }

    #project .projects-intro {
      margin: 0;
      color: #667085;
      font-size: 1.05rem;
      line-height: 1.75;
    }

    #project .project-frame {
      margin-top: 30px;
      padding: 13px;
      border: 1px solid rgba(90, 105, 145, 0.18);
      border-radius: 25px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 24px 70px rgba(32, 48, 87, 0.10);
    }

    #project .projects-heading + .project-frame {
      margin-top: 0;
    }

    #project .project-frame-primary {
      border-color: rgba(92, 91, 225, 0.25);
      box-shadow: 0 25px 75px rgba(79, 88, 214, 0.15);
    }

    #project .project-visual {
      overflow: hidden;
      border-radius: 17px;
      background: #edf1fa;
    }

    #project .project-visual a {
      display: block;
    }

    #project .project-visual img {
      display: block;
      width: 100%;
      height: auto;
      transition: transform 0.35s ease;
    }

    #project .project-visual a:hover img {
      transform: scale(1.008);
    }

    #project .project-meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      padding: 28px 24px 18px;
    }

    #project .project-number {
      margin-bottom: 7px;
      color: #6764dc;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-align: center;
      text-transform: uppercase;
    }

    #project .project-name {
      margin: 0 0 8px;
      color: #172033;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 780;
      letter-spacing: -0.025em;
      text-align: center;
    }

    #project .project-description {
      width: min(100%, 920px);
      margin: 0 auto;
      color: #667085;
      line-height: 1.72;
      text-align: center;
    }

    #project .project-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
    }

    #project .project-tag {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 11px;
      border: 1px solid #dfe4f2;
      border-radius: 999px;
      color: #515c72;
      background: #f8f9fd;
      font-size: 0.78rem;
      font-weight: 650;
    }

    #project .project-action {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-self: center;
      justify-content: center;
      padding: 11px 18px;
      border-radius: 11px;
      color: #ffffff;
      background: linear-gradient(115deg, #2b95e6, #7958ed);
      font-size: 0.9rem;
      font-weight: 750;
      white-space: nowrap;
      box-shadow: 0 12px 28px rgba(89, 84, 222, 0.24);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #project .project-action:hover {
      color: #ffffff;
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: 0 15px 32px rgba(89, 84, 222, 0.32);
    }

    @media (max-width: 760px) {
      #project.projects-showcase { padding: 36px 0 56px; }
      #project .projects-shell { width: min(100% - 24px, 1180px); }
      #project .project-frame { padding: 8px; border-radius: 19px; }
      #project .project-visual { border-radius: 13px; }
      #project .project-meta { grid-template-columns: 1fr; gap: 18px; padding: 22px 14px 12px; }
      #project .project-action { width: 100%; }
    }
/* Classes replacing former inline presentation in the page and layout. */
#about > .container {
  padding-top: 48px;
}

#profile {
  padding-bottom: 72px;
}

.bio-column {
  float: right;
  text-align: justify;
}

.news-heading,
.section-heading-column,
.section-title-left {
  text-align: left;
}

.section-title-left {
  margin-left: -14px;
}

#publications,
#service {
  clear: both;
}

#publications .publication + .publication {
  margin-top: 24px;
}

.highlight-accent {
  color: #dc143c;
}

.site-navbar {
  background-color: #ffffff;
}

.site-nav-link {
  display: inline-block;
  margin-right: 1rem;
  color: #34495e;
}

.site-navbar-collapse {
  height: 0;
}

.site-content {
  padding-top: 48px;
}

.language-badge {
  position: fixed;
  right: 10px;
  bottom: 30px;
}

.site-footer {
  background-color: #373435;
}

.site-footer .copyright,
.site-footer p {
  color: #eeeeee;
}

.footer-license {
  float: left;
  margin-right: 15px;
  margin-bottom: 0;
  border-width: 1px;
}

#contact > .container {
  padding-top: 24px;
}