:root {
  --text-light: #f5f2eb;
  --muted-light: rgba(245,242,235,0.78);
  --line-light: rgba(255,255,255,0.20);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", Arial, sans-serif;
  --content-width: min(1180px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-light);
  background: #0e0e10;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(9,10,12,0.40), rgba(9,10,12,0.40)),
    url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: opacity 0.25s ease;
}
.topbar.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.topbar__inner {
  width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--line-light);
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
}
.nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.78rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.nav a { opacity: 0.94; }

.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 34px;
}
.hero__content {
  max-width: 820px;
  padding-top: 22px;
}
.hero__eyebrow {
  margin: 0 0 8px;
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.hero__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3.8rem, 8vw, 6.2rem);
  line-height: 0.9;
  font-weight: 500;
}
.hero__links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn {
  border: 1px solid rgba(255,255,255,0.6);
  padding: 12px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: transparent;
}
.btn:hover { background: rgba(255,255,255,0.08); }

.hero__lower {
  margin-top: 138px;
  display: grid;
  grid-template-columns: minmax(0, 500px) 300px;
  justify-content: space-between;
  align-items: start;
  gap: 210px;
}
.intro-block {
  justify-self: start;
  text-align: left;
}
.intro-block p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.90);
}
.portrait-block {
  justify-self: end;
  width: 300px;
}
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.contact-line {
  margin-top: 34px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-line span {
  margin: 0 10px;
  opacity: 0.7;
}

.feature {
  min-height: 92vh;
  padding-top: 120px;
  padding-bottom: 28px;
}
.feature__headline h2 {
  margin: 0 0 36px;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 500;
}
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  gap: 84px;
  align-items: center;
}
.feature__copy h3 {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
}
.feature__copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.90);
}
.graph-card {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 20px;
  background: transparent;
}
.graph-card svg {
  width: 100%;
  height: auto;
}

.photo-end {
  min-height: 12vh;
  padding-top: 8px;
  padding-bottom: 18px;
}
.photo-end__inner {
  display: flex;
  align-items: end;
  min-height: 12vh;
}
.photo-caption {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.80);
}

/* Homepage: top bar morphs into vertical sidebars after first-row content is reached */
.home-page .topbar {
  transition: opacity 0.25s ease;
}
.home-page.sidebar-mode .topbar {
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: none;
}
.home-page.sidebar-mode .topbar__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: none;
  display: block;
}
.home-page.sidebar-mode .brand {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: auto;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  padding: 6px 2px;
}
.home-page.sidebar-mode .nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.home-page.sidebar-mode .nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 2px;
}

/* Photography page */
.photo-page {
  margin: 0;
  background: #000;
  color: #f5f2eb;
  font-family: var(--font-sans);
}
.photo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
}
.photo-header__inner {
  width: var(--content-width);
  margin: 0 auto;
  padding: 18px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.photo-hero,
.photo-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-hero__bg,
.photo-panel__bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
}
.photo-hero__bg {
  background-image:
    linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
    url("photo-1.jpg");
}
.photo-panel--1 .photo-panel__bg { background-image: url("photo-1.jpg"); }
.photo-panel--2 .photo-panel__bg { background-image: url("photo-2.jpg"); }
.photo-panel--3 .photo-panel__bg { background-image: url("photo-3.jpg"); }
.photo-panel--4 .photo-panel__bg { background-image: url("photo-4.jpg"); }
.photo-hero__content,
.photo-panel__content {
  position: relative;
  z-index: 2;
  width: var(--content-width);
}
.photo-hero__content { padding-top: 60px; }
.photo-hero__content h1 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
}
.photo-hero__content p {
  max-width: 640px;
  margin: 0;
  line-height: 1.9;
  color: rgba(245,242,235,0.90);
}
.photo-panel__content {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  padding-bottom: 24px;
}
.photo-panel__caption {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(245,242,235,0.82);
  background: transparent;
}

.simple-page {
  min-height: 100vh;
  background: #111;
  color: #f5f2eb;
}
.simple-page .container {
  padding-top: 120px;
  padding-bottom: 80px;
}
.simple-page h1 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
}
.simple-page p { max-width: 760px; line-height: 1.9; }

@media (max-width: 900px) {
  .topbar__inner {
    align-items: flex-start;
    gap: 14px;
    flex-direction: column;
  }
  .nav { gap: 14px; }
  .hero__lower,
  .feature__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero__lower {
    margin-top: 120px;
  }
  .portrait-block {
    justify-self: start;
  }
  .home-page.sidebar-mode .brand {
    left: 8px;
    font-size: 0.95rem;
  }
  .home-page.sidebar-mode .nav {
    right: 8px;
    gap: 10px;
    font-size: 0.56rem;
  }
}


/* Homepage-only blank placeholder in the upper-left bar.
   Replace this empty box with a small logo later if you want. */
.home-page .brand--home-placeholder {
  width: 40px;
  height: 18px;
  display: inline-block;
}

/* In sidebar mode, the placeholder becomes your vertical name. */
.home-page.sidebar-mode .brand--home-placeholder {
  width: auto;
  height: auto;
}
.home-page.sidebar-mode .brand--home-placeholder::after {
  content: "Mengqi Zhang";
}

/* Featured research figure carousel */
.figure-carousel {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
}
.figure-track {
  overflow: hidden;
  border: none;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.figure-slide {
  display: none;
  width: 100%;
  margin: 0;
  padding: 18px;
}
.figure-slide.is-active {
  display: block;
}
.figure-slide img {
  width: 100%;
  max-height: 310px;
  object-fit: contain;
}
.figure-slide figcaption {
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.74);
}
.figure-arrow {
  border: 1px solid rgba(255,255,255,0.38);
  background: transparent;
  color: rgba(255,255,255,0.88);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.figure-arrow:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.70);
}


/* Final homepage spacing refinements */
.home-page .hero {
  padding-top: 18px;
}

.home-page .hero__content {
  padding-top: 8px;
}

.home-page .hero__lower {
  margin-top: 96px;
  grid-template-columns: minmax(0, 500px) 320px;
  gap: 210px;
}

.home-page .portrait-block {
  width: 320px;
  transform: translateY(-54px); /* Lift portrait by roughly 1/6 of its visual height. */
}

/* CV preview module embedded into the homepage */
.cv-preview {
  min-height: 92vh;
  padding-top: 92px;
  padding-bottom: 70px;
}

.cv-preview__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.cv-preview__header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 500;
}

.cv-preview__header a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 4px;
}

.cv-frame {
  width: min(900px, 100%);
  height: 72vh;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.10);
}

.cv-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(255,255,255,0.92);
}

/* Fine print under carousel figures */
.figure-slide figcaption {
  min-height: 34px;
  line-height: 1.55;
  text-align: left;
}

/* Smoother sidebar transition */
.home-page .topbar__inner,
.home-page .brand,
.home-page .nav {
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    left 0.28s ease,
    right 0.28s ease,
    top 0.28s ease;
}

.home-page.nav-transitioning .topbar {
  opacity: 0;
}

@media (max-width: 900px) {
  .home-page .hero__lower {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-page .portrait-block {
    width: min(320px, 86vw);
    transform: translateY(0);
  }

  .cv-frame {
    height: 68vh;
  }
}


/* CV page: embedded PDF window on its own page */
.cv-page {
  background:
    linear-gradient(rgba(12,12,14,0.72), rgba(12,12,14,0.72)),
    url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.cv-page__main {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 54px 0 42px;
}

.cv-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.cv-page__header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
}

.cv-page__open {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 4px;
  white-space: nowrap;
}

.cv-page__viewer {
  width: min(1040px, 100%);
  height: calc(100vh - 210px);
  min-height: 560px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
}

.cv-page__viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

@media (max-width: 900px) {
  .cv-page__main {
    width: min(100% - 34px, 1180px);
    padding-top: 34px;
  }

  .cv-page__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cv-page__viewer {
    height: calc(100vh - 220px);
    min-height: 520px;
  }
}


/* CV page final fit-to-screen adjustment */
.cv-page {
  height: 100vh;
  overflow: hidden; /* The CV page itself should not scroll. */
}

.cv-page .topbar__inner {
  padding-top: 14px;
  padding-bottom: 10px;
}

.cv-page__main {
  height: calc(100vh - 58px);
  padding-top: 22px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.cv-page__header {
  position: relative;
  justify-content: center;
  margin-bottom: 12px;
}

.cv-page__header h1 {
  font-size: clamp(1.8rem, 3.75vw, 3rem);
  text-align: center;
}

.cv-page__open {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cv-page__viewer {
  flex: 1;
  width: min(1040px, 100%);
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 18px 58px rgba(0,0,0,0.20);
}

.cv-page__viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  background: #fff;
}

/* Try to ask browser PDF viewer to fit width and reduce visible grey margins. */
.cv-page__viewer iframe {
  object-fit: cover;
}

@media (max-width: 900px) {
  .cv-page {
    overflow: auto;
  }

  .cv-page__main {
    height: auto;
    min-height: calc(100vh - 72px);
    padding-top: 16px;
  }

  .cv-page__header {
    align-items: center;
  }

  .cv-page__open {
    position: static;
    transform: none;
  }

  .cv-page__viewer {
    height: 72vh;
    min-height: 0;
  }
}


/* Experimental CV page with floating PDF viewer */
.cv-float-page {
  margin: 0;
  min-height: 220vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--text-light);
  background: #0e0e10;
}

.cv-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(10,10,12,0.66), rgba(10,10,12,0.66)),
    url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.cv-float-page .cv-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.cv-float-page.cv-compact .cv-topbar {
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: none;
}

.cv-float-page.cv-compact .cv-topbar .topbar__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: none;
  display: block;
}

.cv-float-page.cv-compact .cv-topbar .brand {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: auto;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  padding: 6px 2px;
}

.cv-float-page.cv-compact .cv-topbar .nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.cv-float-page.cv-compact .cv-topbar .nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 2px;
}

.cv-scroll-stage {
  height: 220vh;
  position: relative;
}

.cv-sticky-shell {
  position: sticky;
  top: 0;
  height: 100vh;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 74px 0 28px;
  display: flex;
  flex-direction: column;
  transition: padding 0.35s ease;
}

.cv-title-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  margin-bottom: 14px;
  transition: opacity 0.28s ease, transform 0.28s ease, height 0.28s ease, margin 0.28s ease;
}

.cv-title-row h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 500;
  text-align: center;
}

.cv-title-row a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.46);
  padding-bottom: 4px;
}

.cv-floating-viewer {
  flex: 1;
  width: min(1060px, calc(100% - 96px));
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.22);
  background: white;
  box-shadow: 0 22px 72px rgba(0,0,0,0.28);
  transition: width 0.35s ease, height 0.35s ease, transform 0.35s ease, flex 0.35s ease;
  overflow: hidden;
}

.cv-floating-viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  background: white;
}

.cv-photo-caption {
  opacity: 0;
  margin: 12px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  transition: opacity 0.3s ease;
}

.cv-float-page.cv-compact .cv-sticky-shell {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cv-float-page.cv-compact .cv-title-row {
  opacity: 0;
  transform: translateY(-12px);
  height: 0;
  margin: 0;
  overflow: hidden;
}

.cv-float-page.cv-end .cv-floating-viewer {
  flex: 0 1 auto;
  height: calc(100vh - 128px);
}

.cv-float-page.cv-end .cv-photo-caption {
  opacity: 1;
}

/*
PDF grey-margin note:
The iframe uses #toolbar=0&navpanes=0&scrollbar=1&view=FitH to ask the browser PDF viewer
to fit the PDF horizontally and reduce internal grey margins. If grey remains inside the PDF
viewer, it is controlled by the browser's built-in PDF renderer, not normal page CSS.
The reliable way to remove it completely is PDF.js or converting CV pages to images.
*/

@media (max-width: 900px) {
  .cv-float-page {
    min-height: auto;
    overflow: auto;
  }

  .cv-scroll-stage {
    height: auto;
  }

  .cv-sticky-shell {
    position: relative;
    height: auto;
    min-height: 100vh;
    width: min(100% - 34px, 1180px);
    padding-top: 86px;
  }

  .cv-floating-viewer {
    width: 100%;
    height: 72vh;
    flex: none;
  }

  .cv-title-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cv-title-row a {
    position: static;
    transform: none;
  }
}


/* CV scroll-sync refinement */
.cv-float-page {
  scroll-behavior: smooth;
}

.cv-float-page .cv-topbar,
.cv-float-page .cv-title-row,
.cv-float-page .cv-floating-viewer,
.cv-float-page .cv-photo-caption {
  will-change: transform, opacity, height;
}

.cv-float-page.cv-compact .cv-sticky-shell {
  padding-top: 24px;
  padding-bottom: 34px;
}

.cv-float-page.cv-compact .cv-floating-viewer {
  transform: translateY(-6px);
}

/* Keep end-mode smooth when scrolling both down and back up */
.cv-float-page.cv-end .cv-floating-viewer {
  height: calc(100vh - 172px);
  transform: translateY(-8px);
}

.cv-float-page .cv-photo-caption {
  align-self: flex-start;
  margin-top: 30px;
  margin-bottom: 2px;
  max-width: 720px;
}

.cv-float-page.cv-end .cv-photo-caption {
  opacity: 1;
}

/* The caption is visually separated from the PDF window. */
.cv-float-page.cv-end .cv-sticky-shell {
  padding-bottom: 20px;
}

/* Better attempt at shrinking the native PDF viewer's internal grey area. */
.cv-floating-viewer {
  background: #fff !important;
}

.cv-floating-viewer iframe {
  background-color: #fff !important;
}


/* Native PDF viewer: move background-photo fine print farther down and left */
.cv-float-page .cv-photo-caption {
  align-self: flex-start;
  margin-top: 46px;
  margin-left: 0;
  margin-bottom: 0;
  max-width: 680px;
  position: relative;
  left: 0;
  bottom: -4px;
}


/* Research page */
.research-page {
  margin: 0;
  font-family: var(--font-sans);
  color: #151515;
  background: #fff;
}

.research-page .research-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  z-index: 40;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.research-page .research-topbar .topbar__inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.research-sidebar-mode .research-topbar {
  color: #111;
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.research-sidebar-mode .research-topbar .topbar__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: none;
  display: block;
}

.research-sidebar-mode .research-topbar .brand {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: auto;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  padding: 6px 2px;
}

.research-sidebar-mode .research-topbar .nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.research-sidebar-mode .research-topbar .nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 2px;
}

.research-hero {
  position: relative;
  height: 54vh;
  min-height: 390px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.research-hero__image {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,10,12,0.28), rgba(10,10,12,0.10)),
    url("research-background.jpg");
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

.research-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.10) 54%,
      rgba(255,255,255,0.70) 82%,
      #fff 100%
    );
}

.research-hero__content {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  padding-bottom: 74px;
}

.research-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight: 500;
  line-height: 0.9;
}

.research-content {
  position: relative;
  background: #fff;
  padding: 72px 0 110px;
}

.research-container {
  width: min(960px, calc(100% - 64px));
  margin: 0 auto;
}

.research-section {
  margin-bottom: 74px;
}

.research-section h2 {
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: #111;
}

.paper-item {
  border-top: 1px solid rgba(0,0,0,0.18);
  padding: 22px 0 18px;
}

.paper-item:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.18);
}

.paper-summary {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  align-items: start;
}

.paper-toggle {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 999px;
  background: transparent;
  color: #111;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  margin-top: 2px;
}

.paper-main h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 500;
  color: #111;
}

.paper-links {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.paper-links a {
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.30);
  padding: 7px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.paper-links a:hover,
.paper-toggle:hover {
  background: rgba(0,0,0,0.05);
}

.paper-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
  margin-left: 52px;
}

.paper-details > * {
  overflow: hidden;
}

.paper-item.is-open .paper-details {
  grid-template-rows: 1fr;
}

.paper-note {
  margin: 18px 0 8px;
  font-size: 0.78rem;
  line-height: 1.65;
  font-style: italic;
  color: rgba(0,0,0,0.62);
}

.paper-abstract {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(0,0,0,0.76);
}

.wip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.18);
}

.wip-list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.62rem);
  color: #111;
}

@media (max-width: 900px) {
  .research-sidebar-mode .research-topbar .brand {
    left: 8px;
    font-size: 0.95rem;
  }

  .research-sidebar-mode .research-topbar .nav {
    right: 8px;
    gap: 10px;
    font-size: 0.56rem;
  }

  .research-hero__content,
  .research-container {
    width: min(100% - 34px, 960px);
  }

  .paper-summary {
    grid-template-columns: 28px 1fr;
    gap: 12px;
  }

  .paper-details {
    margin-left: 40px;
  }
}


/* Research page refinements */
.research-hero {
  align-items: center;
}

.research-hero__content {
  padding-bottom: 0;
  transform: translateY(-25%);
}

.research-hero__caption {
  position: absolute;
  left: max(32px, calc((100vw - 1080px) / 2));
  bottom: 22px;
  z-index: 3;
  margin: 0;
  max-width: 680px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.62);
}

.paper-short {
  margin: 9px 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(0,0,0,0.64);
  transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.paper-item.is-open .paper-short {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* Teaching page */
.teaching-page {
  margin: 0;
  font-family: var(--font-sans);
  color: #151515;
  background: #fff;
}

.teaching-page .teaching-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: #f7f4ee;
  z-index: 40;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.teaching-page .teaching-topbar .topbar__inner {
  border-bottom: 1px solid rgba(255,255,255,0.28);
}

.teaching-sidebar-mode .teaching-topbar {
  color: #111;
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.teaching-sidebar-mode .teaching-topbar .topbar__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: none;
  display: block;
}

.teaching-sidebar-mode .teaching-topbar .brand {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: auto;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  padding: 6px 2px;
}

.teaching-sidebar-mode .teaching-topbar .nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.teaching-sidebar-mode .teaching-topbar .nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 2px;
}

.teaching-hero {
  position: relative;
  height: 54vh;
  min-height: 390px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.teaching-hero__image {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,10,12,0.28), rgba(10,10,12,0.10)),
    url("teaching-background.jpg");
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

.teaching-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.10) 54%,
      rgba(255,255,255,0.70) 82%,
      #fff 100%
    );
}

.teaching-hero__content {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  transform: translateY(-25%);
}

.teaching-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight: 500;
  line-height: 0.9;
}

.teaching-hero__caption {
  position: absolute;
  left: max(32px, calc((100vw - 1080px) / 2));
  bottom: 22px;
  z-index: 3;
  margin: 0;
  max-width: 680px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.62);
}

.teaching-content {
  position: relative;
  background: #fff;
  padding: 72px 0 110px;
}

.teaching-container {
  width: min(960px, calc(100% - 64px));
  margin: 0 auto;
}

.teaching-section {
  margin-bottom: 74px;
}

.teaching-section h2 {
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: #111;
}

.teaching-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.18);
}

.teaching-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.62rem);
  color: #111;
}

.teaching-list em {
  flex: none;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: rgba(0,0,0,0.58);
  font-style: italic;
}

@media (max-width: 900px) {
  .research-hero__content,
  .teaching-hero__content {
    transform: translateY(-15%);
  }

  .research-hero__caption,
  .teaching-hero__caption {
    left: 17px;
    right: 17px;
    bottom: 16px;
  }

  .teaching-sidebar-mode .teaching-topbar .brand {
    left: 8px;
    font-size: 0.95rem;
  }

  .teaching-sidebar-mode .teaching-topbar .nav {
    right: 8px;
    gap: 10px;
    font-size: 0.56rem;
  }

  .teaching-hero__content,
  .teaching-container {
    width: min(100% - 34px, 960px);
  }

  .teaching-list li {
    flex-direction: column;
    gap: 5px;
  }
}


/* Research/Teaching refined title position and right-aligned image captions */
.research-hero__content,
.teaching-hero__content {
  transform: translateY(-12.5%);
}

/* Align the right edge of the fine print with the right edge of the topbar/content area */
.research-hero__caption,
.teaching-hero__caption {
  left: auto;
  right: max(32px, calc((100vw - 1080px) / 2));
  text-align: right;
}

/* Make sure full dropdown details only appear after expansion */
.paper-details {
  overflow: hidden;
}

.paper-details > * {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.paper-item.is-open .paper-details > * {
  visibility: visible;
  opacity: 1;
}

/* Font adjustment reference block:
   Edit these rules if you want to tune Research/Teaching typography. */
.paper-main h3 {
  /* paper title font */
}

.paper-short {
  /* one-sentence paper intro before dropdown */
}

.paper-note {
  /* italic conference / publication fine print in dropdown */
}

.paper-abstract {
  /* full abstract in dropdown */
}

.research-section h2,
.teaching-section h2 {
  /* section subtitles: Working Papers / Work in Progress / Instructor / Teaching Assistant */
}

.wip-list li,
.teaching-list li {
  /* Work in Progress and Teaching item titles */
}

.research-hero__caption,
.teaching-hero__caption {
  /* background photo fine print */
}


/* Research/Teaching: final position, caption alignment, and dropdown spacing fixes */

/* Move titles down relative to the previous version.
   More negative = higher; closer to 0 = lower. */
.research-hero__content,
.teaching-hero__content {
  transform: translateY(12.5%);
}

/* Align fine-print right edge with the same page width used by the topbar.
   If it still looks too far left/right, adjust 1180px to match --content-width visual width
   or adjust the 32px fallback. */
.research-hero__caption,
.teaching-hero__caption {
  left: auto;
  right: max(32px, calc((100vw - 1180px) / 2));
  text-align: right;
}

/* Compact paper rows before dropdown */
.paper-item {
  padding: 14px 0 12px;
}

/* Keep title/button area close and clean */
.paper-main h3 {
  margin-bottom: 0;
}

.paper-short {
  margin: 7px 0 0;
}

/* Buttons: leave about 3/4 line of space before the next item when closed */
.paper-links {
  margin-top: 8px;
  margin-bottom: 0;
}

/* No fixed placeholder for dropdown content when closed */
.paper-details {
  display: block;
  max-height: 0;
  overflow: hidden;
  margin-left: 52px;
  opacity: 0;
  transition: max-height 0.34s ease, opacity 0.24s ease, margin-top 0.24s ease;
}

.paper-details > * {
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

/* Expand only when clicked */
.paper-item.is-open .paper-details {
  max-height: 900px;
  opacity: 1;
  margin-top: 14px;
}

/* When open, create room naturally for the actual content rather than reserving a blank area. */
.paper-item.is-open {
  padding-bottom: 22px;
}

.paper-note {
  margin: 0 0 8px;
}

.paper-abstract {
  margin: 0;
}

/* Make the one-line intro disappear only in the open state, without reserving space. */
.paper-item.is-open .paper-short {
  display: none;
}

/* Fine-tune section density */
.research-section {
  margin-bottom: 66px;
}


/* Fix dropdown expansion: hidden before click, visible after click, no blank placeholder */
.paper-details {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-left: 52px !important;
  transition: max-height 0.36s ease, opacity 0.24s ease, margin-top 0.24s ease !important;
}

/* Override the earlier rule that made dropdown children invisible */
.paper-details > * {
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* When clicked, the item expands naturally to show the conference note and abstract */
.paper-item.is-open .paper-details {
  max-height: 900px !important;
  opacity: 1 !important;
  margin-top: 14px !important;
}

/* Keep closed paper rows compact */
.paper-item:not(.is-open) .paper-details {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
}

.paper-item.is-open {
  padding-bottom: 22px !important;
}

.paper-item.is-open .paper-short {
  display: none !important;
}


/* Homepage featured research PDF button */
.feature-paper-links {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.feature-paper-links a {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.45);
  padding: 8px 13px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.feature-paper-links a:hover {
  background: rgba(255,255,255,0.08);
}

/* Teaching: hidden future course-material button.
   Remove .hidden-link from the HTML when you want it to show. */
.course-material {
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.30);
  padding: 7px 12px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
}

.hidden-link {
  display: none !important;
}

.teaching-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
}

/* Background image positioning controls.
   Change the second value to move the image up/down:
   center 35% = image focus higher; center 65% = image focus lower. */
.research-hero__image {
  background-position: center 45%;
}

.teaching-hero__image {
  background-position: center 40%;
}

/* Mobile responsiveness: GitHub Pages does not auto-generate mobile,
   but this CSS makes pages adapt to narrow screens. */
@media (max-width: 700px) {
  .hero__name,
  .research-hero h1,
  .teaching-hero h1 {
    font-size: clamp(2.7rem, 16vw, 4.2rem);
  }

  .hero__links,
  .feature-paper-links,
  .paper-links {
    gap: 8px;
  }

  .teaching-list li {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .course-material {
    width: fit-content;
  }
}


/* Featured Research: stack text above centered horizontal figure carousel */
.feature__grid {
  display: block;
  max-width: 980px;
  margin: 0 auto;
}

.feature__copy {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: left;
}

.feature__graph {
  width: min(100%, 920px);
  margin: 0 auto;
}

.figure-carousel {
  width: 100%;
  min-height: 420px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 16px;
}

.figure-track {
  min-height: 420px;
  border: 1px solid rgba(255,255,255,0.08); /* change to 'border: none;' to remove fully */
  background: transparent;
}

.figure-slide {
  padding: 10px;
  text-align: center;
}

.figure-slide img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  margin: 0 auto;
}

.figure-slide figcaption {
  text-align: justify;
  text-justify: inter-word;
  max-width: 760px;
  margin: 14px auto 0;
}

/* Optional: make arrows quieter with the centered figure layout */
.figure-arrow {
  background: transparent;
}

/* Mobile adjustment for stacked feature section */
@media (max-width: 700px) {
  .feature__copy {
    margin-bottom: 26px;
  }

  .feature__graph {
    width: 100%;
  }

  .figure-carousel {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 8px;
    min-height: 300px;
  }

  .figure-track {
    min-height: 300px;
  }

  .figure-slide img {
    max-height: 240px;
  }
}


/* CV page: native PDF viewer with final roll-up background reveal */
.cv-roll-page {
  margin: 0;
  min-height: 270vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--text-light);
  background: #0e0e10;
  scroll-behavior: smooth;
}

.cv-roll-page .cv-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(10,10,12,0.56), rgba(10,10,12,0.56)),
    url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.cv-roll-page .cv-roll-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Sidebar mode after the first transition */
.cv-roll-page.cv-compact .cv-roll-topbar {
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: none;
}

.cv-roll-page.cv-compact .cv-roll-topbar .topbar__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: none;
  display: block;
}

.cv-roll-page.cv-compact .cv-roll-topbar .brand {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: auto;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
  padding: 6px 2px;
}

.cv-roll-page.cv-compact .cv-roll-topbar .nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.cv-roll-page.cv-compact .cv-roll-topbar .nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 2px;
}

.cv-roll-stage {
  height: 270vh;
  position: relative;
}

.cv-roll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 74px 0 30px;
  display: flex;
  flex-direction: column;
  transition: padding 0.38s ease;
}

.cv-roll-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  margin-bottom: 14px;
  transition: opacity 0.28s ease, transform 0.28s ease, height 0.28s ease, margin 0.28s ease;
}

.cv-roll-title h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 500;
  text-align: center;
}

.cv-roll-title a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.46);
  padding-bottom: 4px;
}

.cv-roll-viewer {
  flex: 1;
  width: min(1060px, calc(100% - 96px));
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.22);
  background: white;
  box-shadow: 0 22px 72px rgba(0,0,0,0.28);
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
  transition:
    height 0.42s ease,
    transform 0.42s ease,
    flex 0.42s ease,
    opacity 0.42s ease;
}

.cv-roll-viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  background: white;
}

/* First outside-page scroll: title/topbar disappear and viewer expands upward.
   The viewer bottom remains visually anchored by the fixed-height sticky shell. */
.cv-roll-page.cv-expand .cv-roll-title {
  opacity: 0;
  transform: translateY(-12px);
  height: 0;
  margin: 0;
  overflow: hidden;
}

.cv-roll-page.cv-expand .cv-roll-sticky {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cv-roll-page.cv-expand .cv-roll-viewer {
  transform: translateY(-6px);
}

/* Final phase: the PDF window rolls/slides upward to reveal the background image. */
.cv-roll-page.cv-roll-away .cv-roll-viewer {
  flex: 0 1 auto;
  height: calc(100vh - 168px);
  transform: translateY(-34px);
}

/* End state: window moves farther upward, leaving the background picture visible.
   Sidebar and fine print remain. */
.cv-roll-page.cv-end .cv-roll-viewer {
  height: calc(100vh - 220px);
  transform: translateY(-148px);
  opacity: 0.90;
}

.cv-roll-caption {
  opacity: 0;
  position: fixed;
  left: max(24px, calc((100vw - 1180px) / 2));
  bottom: 24px;
  z-index: 35;
  margin: 0;
  max-width: 720px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.80);
  transition: opacity 0.3s ease;
}

/* Fine print appears as soon as the window starts rolling upward. */
.cv-roll-page.cv-roll-away .cv-roll-caption,
.cv-roll-page.cv-end .cv-roll-caption {
  opacity: 1;
}

@media (max-width: 900px) {
  .cv-roll-page {
    min-height: auto;
    overflow: auto;
  }

  .cv-roll-stage {
    height: auto;
  }

  .cv-roll-sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    width: min(100% - 34px, 1180px);
    padding-top: 86px;
  }

  .cv-roll-viewer,
  .cv-roll-page.cv-roll-away .cv-roll-viewer,
  .cv-roll-page.cv-end .cv-roll-viewer {
    width: 100%;
    height: 72vh;
    flex: none;
    transform: none;
    opacity: 1;
  }

  .cv-roll-title {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cv-roll-title a {
    position: static;
    transform: none;
  }

  .cv-roll-caption {
    position: static;
    margin-top: 24px;
    padding-bottom: 24px;
  }
}


/* CV roll-up v2 refinements */

/* Use an independent CV background image. Add cv-background.jpg to the folder. */
.cv-roll-page .cv-bg {
  background-image:
    linear-gradient(rgba(10,10,12,0.56), rgba(10,10,12,0.56)),
    url("cv-background.jpg");
}

/* Keep Open PDF visible at a fixed right-side position so it does not block the viewer. */
.cv-roll-open-fixed {
  position: fixed;
  right: 56px;
  top: 92px;
  z-index: 45;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.46);
  padding-bottom: 4px;
  color: rgba(255,255,255,0.92);
  transition: top 0.32s ease, right 0.32s ease, opacity 0.25s ease;
}

/* Once the navigation becomes sidebars, move Open PDF farther right and slightly lower. */
.cv-roll-page.cv-compact .cv-roll-open-fixed {
  right: 78px;
  top: 38px;
}

/* Hide horizontal topbar at exactly the same time the title disappears. */
.cv-roll-page.cv-expand:not(.cv-compact) .cv-roll-topbar {
  opacity: 0;
  pointer-events: none;
}

/* Prevent old title-row link styles from affecting the new fixed Open PDF link. */
.cv-roll-title a {
  position: static;
}

/* First transition: the viewer expands upward while the bottom stays visually anchored. */
.cv-roll-page.cv-expand .cv-roll-sticky {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Final phase: window starts lifting out of the screen. */
.cv-roll-page.cv-roll-away .cv-roll-viewer {
  flex: 0 1 auto;
  height: calc(100vh - 148px);
  transform: translateY(-72px);
  opacity: 0.96;
}

/* End state: window fully leaves the visible screen upward. */
.cv-roll-page.cv-end .cv-roll-viewer {
  height: calc(100vh - 180px);
  transform: translateY(-112vh);
  opacity: 0;
}

/* Keep sidebar and fine print displayed while the viewer leaves. */
.cv-roll-page.cv-roll-away .cv-roll-caption,
.cv-roll-page.cv-end .cv-roll-caption {
  opacity: 1;
}

/* Fine print remains near the lower-left of the full background image. */
.cv-roll-caption {
  bottom: 26px;
  left: max(24px, calc((100vw - 1180px) / 2));
}

/* If Open PDF feels too close to the right navigation sidebar, adjust right above. */
@media (max-width: 900px) {
  .cv-roll-open-fixed {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
  }
}


/* CV roll-up v3: smooth reversible scroll-driven movement.
   This overrides the discrete v2 roll-away/end classes to avoid layer-flip behavior. */
.cv-roll-page {
  --cv-expand-p: 0;
  --cv-roll-p: 0;
  --cv-title-opacity: 1;
  --cv-caption-opacity: 0;
}

/* Horizontal topbar and title fade out together during phase 1. */
.cv-roll-page .cv-roll-title {
  opacity: var(--cv-title-opacity) !important;
  transform: translateY(calc(-12px * var(--cv-expand-p))) !important;
  height: calc(44px * (1 - var(--cv-expand-p)));
  margin-bottom: calc(14px * (1 - var(--cv-expand-p)));
  overflow: hidden;
}

.cv-roll-page:not(.cv-compact) .cv-roll-topbar {
  opacity: var(--cv-title-opacity) !important;
  pointer-events: auto;
}

/* The sticky shell padding changes continuously instead of snapping. */
.cv-roll-page .cv-roll-sticky {
  padding-top: calc(74px - (44px * var(--cv-expand-p))) !important;
  padding-bottom: 30px !important;
}

/* The viewer first expands upward slightly, then later rolls fully out of the screen.
   Scrolling back reverses the same path smoothly. */
.cv-roll-page .cv-roll-viewer {
  flex: 1 1 auto !important;
  height: auto !important;
  opacity: 1 !important;
  transform:
    translateY(
      calc(
        (-8px * var(--cv-expand-p)) +
        (-125vh * var(--cv-roll-p))
      )
    ) !important;
  transition: none !important;
}

/* Disable the old class-based roll positions from v2. */
.cv-roll-page.cv-roll-away .cv-roll-viewer,
.cv-roll-page.cv-end .cv-roll-viewer {
  height: auto !important;
  opacity: 1 !important;
}

/* Fine print appears as soon as the roll-up begins and stays at the bottom-left. */
.cv-roll-caption {
  opacity: var(--cv-caption-opacity) !important;
  bottom: 26px !important;
  left: max(24px, calc((100vw - 1180px) / 2)) !important;
}

/* Keep sidebars stable once compact mode begins. */
.cv-roll-page.cv-compact .cv-roll-topbar {
  opacity: 1 !important;
}

.wip-coauthor {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  color: rgba(0,0,0,0.28);
  margin-left: 8px;
}

.wip-coauthor a {
  color: rgba(0,0,0,0.68);
  border-bottom: 1px solid rgba(0,0,0,0.28);
}

.wip-coauthor a:hover {
  color: #000;
  border-bottom-color: #000;
}

.feature-abstract {
  text-align: justify;
  text-justify: inter-word;
}

.math-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

/* Optional tuning:
   - To make the viewer leave the screen more slowly, reduce -125vh above to -105vh.
   - To make it leave farther, use -145vh.
   - To start the roll later, change the 0.70 in cv-roll.js.
   - To make the title/topbar fade later, change 0.05 and 0.17 in cv-roll.js.
*/

/* =========================================================
   Mobile-only CV page layout
   Applies only to cellphone-width screens
   ========================================================= */
@media (max-width: 640px) {

  body.cv-roll-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;

    --cv-expand-p: 1 !important;
    --cv-roll-p: 0 !important;
    --cv-title-opacity: 0 !important;
    --cv-caption-opacity: 1 !important;
  }

  body.cv-roll-page .cv-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
  }

  body.cv-roll-page .cv-roll-stage {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  /* Keep the existing topbar style, but prevent CV animation from hiding it */
  body.cv-roll-page #cvTopbar,
  body.cv-roll-page .topbar.cv-roll-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  body.cv-roll-page #cvTopbar .brand,
  body.cv-roll-page #cvTopbar .nav,
  body.cv-roll-page #cvTopbar .nav a {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    color: rgba(255, 255, 255, 0.96) !important;
  }

  /* Fixed mobile layout below topbar */
  body.cv-roll-page .cv-roll-sticky {
    position: relative !important;
    top: auto !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 126px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  body.cv-roll-page .cv-roll-title {
    display: none !important;
  }

  body.cv-roll-page .cv-roll-viewer {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100svh - 230px) !important;
    max-height: calc(100svh - 230px) !important;
    min-height: 0 !important;
    margin: 10px auto 8px !important;
    transform: none !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  body.cv-roll-page .cv-roll-viewer iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  body.cv-roll-page .cv-roll-open-fixed {
    position: static !important;
    display: block !important;
    align-self: flex-end !important;
    margin: 0 2px 6px auto !important;
    padding-bottom: 2px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
    letter-spacing: 0.13em !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
    z-index: auto !important;
  }

  body.cv-roll-page .cv-roll-caption {
    position: static !important;
    display: block !important;
    margin: 0 2px 0 auto !important;
    max-width: 78% !important;
    text-align: right !important;
    font-size: 0.52rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    opacity: 0.72 !important;
    color: #ffffff !important;
    transform: none !important;
  }
}