:root {

  --bg: #fbfbf9;
  --paper: #ffffff;

  --text: #171717;
  --muted: #686864;
  --line: #e7e7e1;
  --soft: #f1f1ec;

  --accent: #1f4d3a;

  --max: 1120px;
  --media: 340px;

  --sans:
    -apple-system,
    BlinkMacSystemFont,
    "Roboto",
    "Segoe UI",
    "Helvetica Neue",
    "Lucida Grande",
    Arial,
    sans-serif;
}



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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;

  background: var(--bg);
}


body {

  margin: 0;

  color: var(--text);

  background:
    radial-gradient(
      circle at 15% -10%,
      rgba(31, 77, 58, 0.045),
      transparent 28rem
    ),
    var(--bg);

  font-family: var(--sans);

  font-size: 16px;
  font-weight: 400;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


a {

  color: inherit;

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

}



/* ========================================
   TOP NAVIGATION
   ======================================== */

.topbar {

  position: sticky;

  top: 0;

  z-index: 20;

  border-bottom:
    1px solid rgba(233, 232, 226, 0.9);

  background:
    rgba(251, 251, 249, 0.92);

  backdrop-filter: blur(16px);

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

}


.topbar-inner {

  max-width: var(--max);

  height: 62px;

  margin: 0 auto;

  padding:
    0
    28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.brand {

  font-family: var(--sans);

  font-size: 16px;

  font-weight: 600;

  text-decoration: none;

}


.brand:hover {

  color: var(--accent);

}


nav {

  display: flex;

  align-items: center;

  gap: 25px;

}


nav a {
  color: var(--muted);

  font-size: 15px;
  font-weight: 500;

  text-decoration: none;
}


nav a:hover {

  color: var(--text);

}



/* ========================================
   PAGE
   ======================================== */

.page {

  max-width: var(--max);

  margin: 0 auto;

  padding:
    74px
    28px
    70px;

}



/* ========================================
   ABOUT LAYOUT
   ======================================== */

.hero {

  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr);

  gap: 58px;

  align-items: start;

  padding-bottom: 84px;

}



/* ========================================
   LEFT AUTHOR SIDEBAR
   ======================================== */

.author-sidebar {

  position: sticky;

  top: 92px;

  align-self: start;

  width: 220px;

}



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

.portrait-wrap {

  position: relative;

  width: 220px;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: var(--soft);

  border:
    1px solid var(--line);

  border-radius: 4px;

}


.profile-photo,
.portrait-placeholder {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

}


.profile-photo {

  display: block;

  object-fit: cover;

  object-position: center center;

}


.portrait-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: var(--accent);

  background:
    linear-gradient(
      145deg,
      rgba(31, 77, 58, 0.08),
      transparent 55%
    ),
    #efefe9;

}


.portrait-placeholder span {

  font-size: 42px;

  font-weight: 500;

  line-height: 1;

}


.portrait-placeholder small {

  margin-top: 18px;

  color: #87877f;

  font-size: 10px;

  line-height: 1.5;

  text-align: center;

  text-transform: uppercase;

}



/* ========================================
   AUTHOR INFORMATION
   ======================================== */

.author-content {

  margin-top: 13px;

}



/*
   Hongxiang Fan's sidebar name uses:

   font-size: 1em

   Their root size is:
   mobile:      16px
   >= 768px:    18px
   >= 1024px:   20px
   >= 1380px:   22px

   We reproduce that below.
*/

.author-name {

  margin:
    0
    0
    8px;

  font-family: var(--sans);

  font-size: 16px;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: normal;

}



/* ========================================
   SIDEBAR CONTACT
   ======================================== */

.sidebar-meta {
  margin-top: 16px;
  margin-bottom: 18px;

  color: #555550;

  font-size: 13px;
  line-height: 1.65;
}

.meta-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 8px;
}

.meta-icon {
  width: 16px;
  flex: 0 0 16px;

  margin-top: 2px;

  color: #70706a;
  font-size: 13px;
  text-align: center;
}

.meta-label {
  color: #666661;
  font-weight: 500;
}

.meta-value {
  color: #444440;
  font-weight: 400;
}

.email-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.email-links a {
  color: #444440;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
}

.email-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.email-separator {
  margin: 0 4px;
  color: #8a8a84;
}



/* ========================================
   RIGHT CONTENT
   ======================================== */

.intro {

  min-width: 0;

}



/* ========================================
   ABOUT ME
   ======================================== */

/*
   Hongxiang Fan's About Me uses:

   h1 = 1.563em

   exact equivalent:

   mobile      25.008px
   >=768       28.134px
   >=1024      31.260px
   >=1380      34.386px
*/

.about-title {

  margin:
    0
    0
    26px;

  color: var(--text);

  font-family: var(--sans);

  font-size: 25.008px;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: normal;

}



/* ========================================
   BIO
   ======================================== */

.bio {

  max-width: 760px;

}


.bio p {

  margin:
    0
    0
    18px;

  color: #3e3e3a;

  font-family: var(--sans);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.6;

}


.bio a {

  color: var(--accent);

}


.bio a:hover {

  text-decoration: underline;

}



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

.publications-section {

  padding-top: 53px;

  border-top:
    1px solid var(--line);

}



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

.section-heading {

  margin-bottom: 48px;

}


.section-heading h2 {

  margin: 0;

  font-family: var(--sans);

  font-size: 31.26px;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: normal;

}



/* ========================================
   PUBLICATION
   ======================================== */

.publication {
  display: grid;

  grid-template-columns:
    var(--media)
    minmax(0, 1fr);

  column-gap: 32px;

  align-items: center;

  margin-bottom: 64px;
}

.publication:last-child {
  margin-bottom: 0;
}


/* ========================================
   PUBLICATION MEDIA
   ======================================== */

.pub-media {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #ecece6;

  border:
    1px solid var(--line);

  border-radius: 4px;

}


.pub-media video,
.pub-media img {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

}


.pub-media img {

  z-index: 1;

}


.pub-media video {

  z-index: 2;

  background: #ecece6;

}


.pub-media.is-fallback video {

  display: none;

}



/* ========================================
   PUBLICATION INFO
   ======================================== */

.pub-info {

  min-width: 0;

}



/* ========================================
   BADGES
   ======================================== */

.pub-topline {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  align-items: center;

  margin-bottom: 10px;

}


.badge {

  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding:
    4px
    9px;

  border:
    1px solid #dcdcd5;

  border-radius: 100px;

  color: #707069;

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

  font-size: 11px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.045em;

  text-transform: uppercase;

}


.badge.award {

  color: #75590e;

  border-color: #dfd2ac;

  background: #faf5e7;

}



/* ========================================
   PAPER TITLE
   ======================================== */

.pub-title {

  margin: 0;

  color: var(--text);

  font-family: var(--sans);

  font-size: 20px;

  font-weight: 700;

  line-height: 1.4;

}



/* ========================================
   AUTHORS
   ======================================== */

.pub-authors {

  margin:
    10px
    0
    0;

  color: #4f4f4a;

  font-size: 14.5px;

  line-height: 1.65;

}


.pub-authors strong {

  color: var(--text);

  font-weight: 700;

}



/* ========================================
   VENUE
   ======================================== */

.pub-venue {

  margin:
    7px
    0
    0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;

  font-style: italic;

}



/* ========================================
   PAPER LINKS
   ======================================== */

.pub-links {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 13px;

}


.pub-links a {

  color: var(--accent);

  font-size: 13.5px;

  font-weight: 600;

  text-decoration: none;

}


.pub-links a::after {

  content: " ↗";

  font-weight: 400;

}


.pub-links a:hover {

  text-decoration: underline;

}



/* ========================================
   FOOTER
   ======================================== */

footer {

  max-width: var(--max);

  margin: 0 auto;

  padding:
    0
    28px
    42px;

  color: #8c8c84;

  font-size: 11px;

}



/* ========================================
   EXACT HONGXIANG RESPONSIVE TYPE SCALE
   ======================================== */

/* >= 768px */

@media (min-width: 768px) {

  .author-name {
    font-size: 18px;
  }

  .about-title {
    font-size: 28.134px;
  }

}



/* >= 1024px */

@media (min-width: 1024px) {

  .author-name {
    font-size: 20px;
  }

  .about-title {
    font-size: 31.26px;
  }

}



/* >= 1380px */

@media (min-width: 1380px) {

  .author-name {
    font-size: 22px;
  }

  .about-title {
 
    font-size: 34.386px;
  }

}



/* ========================================
   TABLET
   ======================================== */

@media (max-width: 900px) {

  :root {
    --media: 270px;
  }


  .hero {

    grid-template-columns:
      170px
      minmax(0, 1fr);

    gap: 38px;

  }


  .author-sidebar {

    width: 170px;

  }


  .portrait-wrap {

    width: 170px;

  }


  .publication {

    gap: 22px;

  }

}



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

@media (max-width: 720px) {


  .topbar-inner {

    padding:
      0
      20px;

  }


  .page {

    padding:
      50px
      20px
      58px;

  }



  /* Sidebar becomes normal top block */

  .hero {

    display: block;

    padding-bottom: 64px;

  }


  .author-sidebar {

    position: relative;

    top: auto;

    width: 100%;

    margin-bottom: 48px;

  }


  .portrait-wrap {

    width: 150px;

  }


  .author-content {

    max-width: 350px;

  }

  .sidebar-meta {
    font-size: 12px;
  }



  /* About */

  .about-title {

    margin-bottom: 22px;

  }


  .bio p {

    font-size: 16px;

    line-height: 1.65;

  }



  /* Publications */

  .section-heading {

    margin-bottom: 40px;

  }


  .section-heading h2 {

    font-size: 28px;

  }


  .year-group {

    display: block;

    margin-bottom: 58px;

  }


  .year-label {

    position: relative;

    top: auto;

    margin-bottom: 23px;

  }


  .publication {

    grid-template-columns: 1fr;

    gap: 16px;

  }


  .pub-media {

    max-width: 520px;

  }


  .pub-title {

    font-size: 19px;

  }

}



/* ========================================
   SMALL PHONE
   ======================================== */

@media (max-width: 430px) {


  nav {

    gap: 17px;

  }


  nav a {

    font-size: 13px;

  }


  .portrait-wrap {

    width: 140px;

  }


  .section-heading h2 {

    font-size: 26px;

  }

}
/* Academic / social icons */

.academic-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
}

.academic-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #777770;
  text-decoration: none;
}

.academic-links .ai {
  font-size: 22px;
}

.academic-links .fa-linkedin,
.academic-links .fa-linkedin-in {
  font-size: 20px;
}

.academic-links a:hover {
  color: var(--accent);
}



/* ========================================
   ACCESSIBILITY
   ======================================== */

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

  html {

    scroll-behavior: auto;

  }


  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

  }

}