/* =========================================================
   VAISAKH RAJEEV — ACADEMIC WEBSITE
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;

  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

#quarto-content,
.page-columns,
.page-layout-article,
main.content {
  background: transparent !important;
}


/* =========================================================
   SUBTLE COSMIC BACKGROUND — ALL PAGES
   ========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  background-image: url("images/desi-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;

  z-index: -2;

  opacity: 0.07;
}

body::after {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: -1;

  transition: background 0.35s ease;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

.quarto-light body {
  background-color: #f7f9fc;
  color: #172033;
}

.quarto-light body::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.88),
      rgba(248,250,253,0.94)
    );
}

.quarto-light h1,
.quarto-light h2,
.quarto-light h3,
.quarto-light h4,
.quarto-light h5,
.quarto-light h6 {
  color: #101a2d;
}

.quarto-light p,
.quarto-light li {
  color: #334155;
}

.quarto-light a {
  color: #1769aa;
}

.quarto-light a:hover {
  color: #0b4f85;
}


/* =========================================================
   DARK MODE
   ========================================================= */

.quarto-dark body {
  background-color: #05080f;
  color: #e7edf5;
}

.quarto-dark body::after {
  background:
    linear-gradient(
      180deg,
      rgba(5,8,15,0.88),
      rgba(5,8,15,0.93)
    );
}

.quarto-dark h1,
.quarto-dark h2,
.quarto-dark h3,
.quarto-dark h4,
.quarto-dark h5,
.quarto-dark h6 {
  color: #f3f6fa;
}

.quarto-dark p,
.quarto-dark li {
  color: rgba(231,237,245,0.82);
}

.quarto-dark a {
  color: #61c3ff;
}

.quarto-dark a:hover {
  color: #9cddff;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  position: relative;
  z-index: 1000;

  transition:
    background-color 0.35s ease,
    border-color 0.35s ease;
}


/* Light navbar */

.quarto-light .navbar {
  background: rgba(255,255,255,0.78) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(20,35,55,0.10);
}

.quarto-light .navbar-brand,
.quarto-light .navbar-nav .nav-link {
  color: #172033 !important;
}

.quarto-light .navbar-nav .nav-link:hover {
  color: #1769aa !important;
}


/* Dark navbar */

.quarto-dark .navbar {
  background: rgba(5,8,15,0.72) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.quarto-dark .navbar-brand,
.quarto-dark .navbar-nav .nav-link {
  color: rgba(245,248,252,0.92) !important;
}

.quarto-dark .navbar-nav .nav-link:hover {
  color: #61c3ff !important;
}


/* =========================================================
   GENERAL PAGE HEADER
   ========================================================= */

.research-header {
  position: relative;

  max-width: 850px;

  padding-top: 5rem;
  padding-bottom: 4rem;
}

.research-header h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);

  line-height: 1.02;

  letter-spacing: -0.045em;

  margin-bottom: 2rem;
}

.research-header p {
  max-width: 760px;

  font-size: 1.12rem;

  line-height: 1.8;
}


/* =========================================================
   EYEBROW LABELS
   ========================================================= */

.eyebrow {
  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  margin-bottom: 1.25rem;
}

.quarto-light .eyebrow {
  color: #2477b7;
}

.quarto-dark .eyebrow {
  color: #61c3ff;
}


/* =========================================================
   RESEARCH PAGE SECTIONS
   ========================================================= */

main.content > h2 {
  margin-top: 4.5rem;
  margin-bottom: 1.2rem;

  font-size: 1.8rem;

  letter-spacing: -0.025em;
}

main.content > h2::after {
  content: "";

  display: block;

  width: 46px;
  height: 2px;

  margin-top: 0.8rem;
}

.quarto-light main.content > h2::after {
  background: #2477b7;
}

.quarto-dark main.content > h2::after {
  background: #61c3ff;
}


/* =========================================================
   RESEARCH INTERESTS
   ========================================================= */

.research-interests {
  max-width: 1200px;

  margin: 5rem auto;

  padding: 3rem 0;
}

.interest-list {
  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;
}

.interest-list span {
  display: inline-block;

  flex-shrink: 0;

  white-space: nowrap;

  padding: 0.65rem 1rem;

  border-radius: 999px;

  font-size: 0.9rem;

  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.quarto-light .interest-list span {
  background: rgba(255,255,255,0.72);

  border: 1px solid rgba(30,60,90,0.12);

  color: #26364d;
}

.quarto-dark .interest-list span {
  background: rgba(20,30,45,0.55);

  border: 1px solid rgba(255,255,255,0.12);

  color: #dce7f2;
}


/* =========================================================
   PIPELINE / RESEARCH FLOW
   ========================================================= */

.pipeline {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.8rem;

  margin: 3rem 0;

  padding: 1.5rem;

  border-radius: 10px;

  font-size: 0.95rem;
}

.quarto-light .pipeline {
  background: rgba(255,255,255,0.68);

  border: 1px solid rgba(30,60,90,0.12);
}

.quarto-dark .pipeline {
  background: rgba(15,25,40,0.62);

  border: 1px solid rgba(255,255,255,0.10);
}

.pipeline span {
  white-space: nowrap;
}


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

.publication-links {
  margin-top: 1.5rem;

  margin-bottom: 3rem;
}

.publication-links a {
  display: inline-block;

  padding: 0.65rem 1rem;

  border: 1px solid;

  border-radius: 6px;

  text-decoration: none;

  font-size: 0.9rem;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.quarto-light .publication-links a {
  border-color: rgba(30,70,110,0.25);

  color: #1769aa;

  background: rgba(255,255,255,0.60);
}

.quarto-light .publication-links a:hover {
  background: #1769aa;

  color: white;

  border-color: #1769aa;
}

.quarto-dark .publication-links a {
  border-color: rgba(97,195,255,0.35);

  color: #61c3ff;

  background: rgba(20,30,45,0.45);
}

.quarto-dark .publication-links a:hover {
  background: #61c3ff;

  color: #05080f;
}


/* Publication titles */

main.content h3 {
  margin-top: 2.5rem;

  line-height: 1.3;

  letter-spacing: -0.015em;
}

.quarto-light main.content h3 {
  color: #14233a;
}

.quarto-dark main.content h3 {
  color: #eaf2fa;
}


/* =========================================================
   HOMEPAGE — COMPACT ACADEMIC PROFILE
   ========================================================= */

.home-page {
  position: relative;

  width: 100vw;

  min-height: calc(100vh - 1px);

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  display: flex;

  justify-content: center;

  align-items: center;

  box-sizing: border-box;

  padding: 4.5rem 1.5rem 2.5rem;

  background-image:
    linear-gradient(
      rgba(5,8,15,0.56),
      rgba(5,8,15,0.68)
    ),
    url("images/desi-background.jpg");

  background-size: cover;

  background-position: center;
}


/* =========================================================
   HOMEPAGE — LIGHT MODE
   ========================================================= */

.quarto-light .home-page {
  background-image:
    linear-gradient(
      rgba(248,250,253,0.68),
      rgba(248,250,253,0.78)
    ),
    url("images/desi-background.jpg");
}


/* =========================================================
   HOMEPAGE — DARK MODE
   ========================================================= */

.quarto-dark .home-page {
  background-image:
    linear-gradient(
      rgba(5,8,15,0.56),
      rgba(5,8,15,0.68)
    ),
    url("images/desi-background.jpg");
}


/* =========================================================
   HOMEPAGE PROFILE CONTAINER
   ========================================================= */

.home-profile {
  width: min(900px, 100%);

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;
}


/* =========================================================
   PROFILE PHOTO
   ========================================================= */

.profile-photo {
  width: 225px;

  height: 225px;

  margin-bottom: 1.15rem;

  overflow: hidden;

  border-radius: 26px;

  border: 2px solid rgba(255,255,255,0.88);

  box-shadow:
    0 15px 45px rgba(0,0,0,0.28);
}

.profile-photo img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}


/* Light-mode photo */

.quarto-light .profile-photo {
  border-color: rgba(20,35,55,0.22);

  box-shadow:
    0 15px 40px rgba(20,35,55,0.15);
}


/* =========================================================
   HOMEPAGE EYEBROW
   ========================================================= */

.home-profile .eyebrow {
  margin-bottom: 0.5rem;

  font-size: 0.76rem;

  letter-spacing: 0.22em;

  font-weight: 600;
}

.quarto-dark .home-profile .eyebrow {
  color: #61c3ff;
}

.quarto-light .home-profile .eyebrow {
  color: #2477b7;
}


/* =========================================================
   NAME
   ========================================================= */

.home-profile h1 {
  margin: 0;

  font-size: clamp(3.1rem, 5.7vw, 5.2rem);

  line-height: 0.98;

  letter-spacing: -0.055em;

  font-weight: 500;
}

.quarto-dark .home-profile h1 {
  color: #ffffff !important;
}

.quarto-light .home-profile h1 {
  color: #101a2d !important;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.profile-subtitle {
  margin-top: 0.8rem;

  font-size: 1rem;

  letter-spacing: 0.025em;
}

.quarto-dark .profile-subtitle {
  color: rgba(245,248,252,0.82);
}

.quarto-light .profile-subtitle {
  color: rgba(23,32,51,0.76);
}


/* =========================================================
   DESI BUILDER
   ========================================================= */

.desi-builder {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 0.75rem;

  padding: 0.38rem 0.85rem;

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.quarto-dark .desi-builder {
  color: #06101a;

  background: #61c3ff;

  box-shadow:
    0 0 22px rgba(97,195,255,0.18);
}

.quarto-light .desi-builder {
  color: #ffffff;

  background: #1769aa;

  box-shadow:
    0 4px 15px rgba(23,105,170,0.16);
}


/* =========================================================
   PROFILE DIVIDER
   ========================================================= */

.profile-divider {
  width: 80px;

  height: 1px;

  margin: 1rem auto;
}

.quarto-dark .profile-divider {
  background: rgba(255,255,255,0.30);
}

.quarto-light .profile-divider {
  background: rgba(20,35,55,0.22);
}


/* =========================================================
   PROFILE DESCRIPTION
   ========================================================= */

.profile-description {
  max-width: 650px;

  margin: 0 auto;

  font-size: 0.98rem;

  line-height: 1.62;
}

.quarto-dark .profile-description {
  color: rgba(245,248,252,0.82) !important;
}

.quarto-light .profile-description {
  color: rgba(23,32,51,0.78) !important;
}


/* =========================================================
   SOCIAL LINKS
   ========================================================= */

.social-links {
  display: flex;

  justify-content: center;

  gap: 0.6rem;

  margin-top: 1.1rem;
}

.social-links a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 55px;

  padding: 0.38rem 0.75rem;

  border: 1px solid;

  border-radius: 999px;

  text-decoration: none;

  font-size: 0.8rem;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.quarto-dark .social-links a {
  color: #f5f7fa;

  border-color: rgba(255,255,255,0.38);

  background: rgba(5,8,15,0.18);
}

.quarto-dark .social-links a:hover {
  color: #06101a;

  background: #61c3ff;

  border-color: #61c3ff;
}

.quarto-light .social-links a {
  color: #172033;

  border-color: rgba(23,32,51,0.22);

  background: rgba(255,255,255,0.35);
}

.quarto-light .social-links a:hover {
  color: #ffffff;

  background: #1769aa;

  border-color: #1769aa;
}


/* =========================================================
   HOMEPAGE NAVIGATION BUTTONS
   ========================================================= */

.home-navigation {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 0.55rem;

  max-width: 800px;

  margin-top: 1.35rem;
}

.home-nav-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.56rem 1.05rem;

  border-radius: 999px;

  border: 1px solid;

  text-decoration: none !important;

  font-size: 0.86rem;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}

.home-nav-button:hover {
  transform: translateY(-1px);
}


/* Dark */

.quarto-dark .home-nav-button {
  color: #f5f7fa !important;

  background: rgba(5,8,15,0.20);

  border-color: rgba(255,255,255,0.42);
}

.quarto-dark .home-nav-button:hover {
  color: #06101a !important;

  background: #61c3ff;

  border-color: #61c3ff;
}


/* Light */

.quarto-light .home-nav-button {
  color: #172033 !important;

  background: rgba(255,255,255,0.45);

  border-color: rgba(23,32,51,0.20);
}

.quarto-light .home-nav-button:hover {
  color: #ffffff !important;

  background: #1769aa;

  border-color: #1769aa;
}


/* CV */

.quarto-dark .home-nav-cv {
  border-color: rgba(97,195,255,0.60);
}

.quarto-light .home-nav-cv {
  border-color: rgba(23,105,170,0.45);
}


/* =========================================================
   HOMEPAGE RESEARCH TAGS
   ========================================================= */

.home-interests {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 0.4rem;

  max-width: 850px;

  margin-top: 1.35rem;
}

.home-interests span {
  white-space: nowrap;

  padding: 0.32rem 0.65rem;

  font-size: 0.73rem;

  border-radius: 999px;
}

.quarto-dark .home-interests span {
  color: rgba(235,241,248,0.72);

  background: rgba(5,8,15,0.22);

  border: 1px solid rgba(255,255,255,0.12);
}

.quarto-light .home-interests span {
  color: rgba(23,32,51,0.70);

  background: rgba(255,255,255,0.35);

  border: 1px solid rgba(23,32,51,0.10);
}


/* =========================================================
   IMAGES
   ========================================================= */

img {
  max-width: 100%;

  height: auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .home-page {
    min-height: calc(100vh - 1px);

    padding:
      4.2rem
      1.2rem
      2.2rem;
  }

  .profile-photo {
    width: 165px;

    height: 165px;

    border-radius: 22px;
  }

  .home-profile h1 {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .profile-subtitle {
    font-size: 0.88rem;
  }

  .profile-description {
    font-size: 0.9rem;
  }

  .home-navigation {
    gap: 0.4rem;
  }

  .home-nav-button {
    padding: 0.52rem 0.82rem;

    font-size: 0.8rem;
  }

  .home-interests {
    margin-top: 1.1rem;
  }

  .research-header {
    padding-top: 3rem;
  }

  .research-header h1 {
    font-size: 2.8rem;
  }

  .research-interests {
    margin: 3rem auto;

    padding: 2rem 0;
  }

  .pipeline {
    gap: 0.5rem;
  }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;

    scroll-behavior: auto !important;
  }

}