/* ==========================================================================
   site.css — Shunyu Wu, academic homepage.

   Layout: a sticky profile column on the left carries the portrait, name,
   appointment and profile links; the right column carries the prose. Body
   text is IBM Plex Sans, headings are IBM Plex Serif. Colour is reserved
   for the four research directions and for the figure, so the page reads
   as a document rather than as an interface.

   Contents
     1  Tokens
     2  Base elements
     3  Navbar and footer
     4  Secondary pages
     5  Home: sidebar shell
     6  Home: sections and research list
     7  Home: research logic figure
     8  News
     9  Publications
    10  Thinking notes
    11  Citation map
    12  Research projects page
    13  Responsive
    14  Print and reduced motion
   ========================================================================== */

/* -- 1  Tokens ------------------------------------------------------------ */

:root {
  --sans: "IBM Plex Sans", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --serif: "IBM Plex Serif", "Songti SC", Georgia, "Times New Roman", serif;

  --page: 1120px;       /* sidebar plus reading column */
  --measure: 780px;     /* prose column on secondary pages */
  --gutter: 1.35rem;

  --bg: #ffffff;
  --surface: #f5f6f7;
  --surface-2: #eceef0;

  --ink: #17202a;
  --text: #2f3944;
  --muted: #66717d;
  --rule: #e2e6ea;
  --rule-strong: #c8cfd6;

  --link: #31859A;
  --link-hover: #23606f;

  /* One hue per research direction, shared with the figure on the home page
     (top-conference figure library: CLIP variant purple, ControlNet trainable
     teal, MAE decoder coral) */
  --c-a: #9467BD;   /* A: physical systems in science and engineering */
  --c-b: #31859A;   /* B: solving the dynamics with neural networks */
  --c-c: #EA7F6F;   /* C: the model-to-decision gap */

  --bs-body-font-family: var(--sans);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-border-color: var(--rule);
}

/* -- 2  Base elements ----------------------------------------------------- */

html {
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-title {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
}

p {
  margin: 0 0 0.95rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--link);
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--rule);
  opacity: 1;
}

strong, b {
  font-weight: 600;
}

.label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.anchorjs-link,
a.external > .bi-box-arrow-up-right {
  display: none !important;
}

/* -- 3  Navbar and footer ------------------------------------------------- */

.navbar {
  min-height: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg) !important;
  box-shadow: none;
}

.navbar > .container-xxl,
.navbar > .container-fluid,
.nav-footer > .container-xxl,
.nav-footer > .container-fluid {
  max-width: var(--page);
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}

.navbar .navbar-brand-container {
  flex-shrink: 0;
}

.navbar .navbar-brand {
  padding: 0;
  margin-right: 1.4rem;
  white-space: nowrap;
}

.navbar .navbar-brand,
.navbar .navbar-title {
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.navbar .nav-link {
  padding: 0.25rem 0.5rem !important;
  color: var(--muted) !important;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
}

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

.navbar .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.42em;
  text-decoration-color: var(--link);
}

.navbar .quarto-navbar-tools .quarto-navigation-tool,
.navbar .aa-DetachedSearchButton,
.navbar .quarto-search-button {
  color: var(--muted) !important;
}

.navbar .aa-DetachedSearchButton {
  border-color: var(--rule) !important;
  background: var(--bg) !important;
}

.navbar-toggler,
.navbar-toggler:focus {
  border-color: var(--rule);
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: none;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
  }

  .navbar .nav-link {
    padding: 0.35rem 0 !important;
  }
}

.nav-footer {
  padding: 1.4rem 0;
  color: var(--muted);
  border-top: 1px solid var(--rule) !important;
  background: var(--bg);
  font-size: 0.85rem;
}

.nav-footer a {
  color: var(--muted);
}

/* -- 4  Secondary pages --------------------------------------------------- */

body:not(.home-page) #quarto-content main.content {
  max-width: var(--measure);
  padding-top: 2.4rem;
  padding-bottom: 4.5rem;
}

body:not(.home-page) #title-block-header {
  margin: 0 0 2rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--rule);
}

body:not(.home-page) .quarto-title .title {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
}

body:not(.home-page) .quarto-title .subtitle,
body:not(.home-page) .quarto-title-block .description {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.98rem;
}

body:not(.home-page) main h2 {
  margin: 2.5rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.3rem;
}

body:not(.home-page) main h2:first-child {
  margin-top: 0;
}

body:not(.home-page) main h3 {
  margin: 1.7rem 0 0.45rem;
  font-size: 1.08rem;
}

body:not(.home-page) main ul,
body:not(.home-page) main ol {
  padding-left: 1.25rem;
}

body:not(.home-page) main li {
  margin-bottom: 0.3rem;
}

#quarto-margin-sidebar {
  font-size: 0.88rem;
}

#TOC .toc-title {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#TOC .nav-link {
  color: var(--muted);
  font-size: 0.86rem;
}

#TOC .nav-link.active,
#TOC .nav-link:hover {
  color: var(--ink);
  border-left-color: var(--link);
}

main table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.93rem;
}

main table th,
main table td {
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

main table thead th {
  color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body:not(.home-page) main table.table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.page-navigation {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}

/* -- 5  Home: sidebar shell ----------------------------------------------- */

.home-page #title-block-header {
  display: none;
}

.home-page #quarto-content,
.home-page #quarto-content main,
.home-page #quarto-document-content,
.home-page .content {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home {
  display: grid;
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.75rem var(--gutter) 4.5rem;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 4rem;
  align-items: start;
}

.side {
  position: sticky;
  top: 5.25rem;
}

.side__portrait {
  margin: 0 0 1.15rem;
}

.side__portrait img {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 3px;
  object-fit: cover;
}

.side__name {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
}

.side__cn {
  margin: 0.15rem 0 0.85rem;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.side__role {
  margin: 0 0 0.2rem;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}

.side__affil {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.side__links {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: 0.9rem;
}

.side__links a {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.side__links a:hover {
  color: var(--link);
  text-decoration: underline;
}

.side__links svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--muted);
}

/* -- 6  Home: sections and research list ---------------------------------- */

.main > .home-section:first-child {
  padding-top: 0;
}

.home-section {
  padding-top: 2.5rem;
}

.section__title {
  margin: 0 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.28rem;
  font-weight: 500;
}

.section__more {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
}

.main p {
  max-width: 68ch;
}

.directions {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directions li {
  position: relative;
  max-width: 68ch;
  padding-left: 1.15rem;
}

.directions li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  content: "";
  border-radius: 1px;
  background: var(--dot, var(--link));
}

.directions .d-a { --dot: var(--c-a); }
.directions .d-b { --dot: var(--c-b); }
.directions .d-c { --dot: var(--c-c); }

.directions strong {
  color: var(--ink);
  font-weight: 600;
}

/* Research logic figure: an inline SVG chain, styled by the page */
.logic {
  margin: 0 0 1.4rem;
}

/* Keep the step text legible on phones: the drawing scrolls inside the figure instead of shrinking */
.logic__scroll {
  overflow-x: auto;
}

.logic svg {
  display: block;
  width: 100%;
  min-width: 520px;
  max-width: 640px;
  height: auto;
}

.lg-t {
  font: 15px var(--sans);
  fill: var(--ink);
}

.lg-s {
  font: 12px var(--sans);
  fill: var(--muted);
}

.lg-n {
  font: 700 12px var(--sans);
  fill: #fff;
}

.lg-r {
  font: 600 11.5px var(--sans);
  fill: #c9604f;
  letter-spacing: 0.03em;
}

.lg-a circle { fill: var(--c-a); }
.lg-b circle { fill: var(--c-b); }
.lg-c circle { fill: var(--c-c); }

.lg-rail {
  stroke: var(--rule-strong);
  stroke-width: 2;
}

.lg-tip path {
  fill: var(--rule-strong);
}

.lg-return {
  fill: none;
  stroke: var(--c-c);
  stroke-width: 2;
  stroke-linejoin: round;
}

.logic__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.82rem;
}

.logic__key li::before {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.4rem;
  content: "";
  border-radius: 50%;
  background: var(--dot);
  vertical-align: -0.05em;
}

.logic__key .k-a { --dot: var(--c-a); }
.logic__key .k-b { --dot: var(--c-b); }
.logic__key .k-c { --dot: var(--c-c); }

.logic figcaption {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* -- 8  News -------------------------------------------------------------- */

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

.news-list li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

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

.news-list time {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.news-list div {
  max-width: 62ch;
}

/* News page */
.news-timeline {
  border-top: 1px solid var(--rule);
}

.news-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.news-item time {
  padding-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.news-page .news-item h2 {
  margin: 0 0 0.3rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.35;
}

.news-item h2 a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

.news-item p {
  margin: 0;
  font-size: 0.96rem;
}

/* -- 9  Publications ------------------------------------------------------ */

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

.pub {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.pub:last-child {
  border-bottom: 0;
}

.pub__thumb,
.paper-visual {
  display: block;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 140ms ease;
}

.pub__thumb:hover,
.paper-visual:hover {
  border-color: var(--rule-strong);
}

.pub__thumb img,
.paper-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.pub__body p,
.paper-body p {
  margin: 0 0 0.2rem;
  max-width: none;
}

.pub__title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.pub__title a,
.paper-card h3 a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

.pub__title a:hover,
.paper-card h3 a:hover {
  color: var(--link);
}

.pub__authors,
.paper-authors {
  font-size: 0.93rem;
}

.pub__authors strong,
.author-self {
  color: var(--ink);
  font-weight: 600;
}

.pub__venue {
  color: var(--muted);
  font-size: 0.9rem;
}

.pub__note,
.paper-claim {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pub__links,
.paper-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: 0.3rem;
  font-size: 0.88rem;
}

.role {
  color: var(--role, var(--muted));
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.role--first,
.role--last { --role: var(--muted); }

/* Publications page */
.publication-intro p {
  margin-bottom: 0.55rem;
}

.publication-rule {
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.publication-section-label {
  margin: 2.5rem 0 0.25rem;
  padding-bottom: 0.4rem;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.publication-grid {
  display: grid;
  gap: 0;
}

.paper-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.author-role,
.author-role-last {
  color: var(--ink);
}

body:not(.home-page) .paper-card h3 {
  margin: 0.15rem 0 0.3rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* -- 10  Thinking notes --------------------------------------------------- */

.notes {
  display: grid;
  gap: 1.6rem;
}

.note {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.notes .note:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.note__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.notes .note__title,
.note__title {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--serif);
  font-size: 1.15rem !important;
  font-weight: 500;
  line-height: 1.35;
}

.note p:last-child {
  margin-bottom: 0;
}

.note p {
  max-width: 68ch;
}

/* -- 11  Citation map ----------------------------------------------------- */

.reach {
  margin: 0;
}

.reach img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
}

.reach figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.publication-branch-note {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.93rem;
}

/* Branch tag used in project and publication headings */
.branch {
  --tag: var(--c-a);
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05em 0.45em;
  color: var(--tag);
  border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.branch--b { --tag: var(--c-b); }
.branch--c { --tag: #c9604f; }

/* -- 12  Research projects page ------------------------------------------- */

.project-relation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 1.4rem 0 2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  list-style: none;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-relation li:not(:last-child)::after {
  margin-left: 0.5rem;
  color: var(--link);
  content: "\2192";
}

.project-study {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  margin: 0.5rem 0 2.2rem;
}

.project-study-visual {
  display: grid;
  gap: 0.6rem;
}

.project-study-visual a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
}

.project-study-visual img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.project-study-copy > :first-child {
  margin-top: 0;
}

.project-study-copy > :last-child {
  margin-bottom: 0;
}

/* -- 13  Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
  .home {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2rem;
  }

  .side {
    position: static;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0 1.4rem;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
  }

  .side__portrait {
    grid-row: 1 / span 4;
    margin: 0;
  }

  .side__portrait img {
    width: 132px;
    height: 132px;
  }

  .side__links {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin-top: 1.1rem;
  }

}

@media (max-width: 640px) {
  .side {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .side__portrait img {
    width: 104px;
    height: 104px;
  }

  .side__name {
    font-size: 1.42rem;
  }

  .news-list li,
  .news-item {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .pub,
  .paper-card {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .pub__thumb,
  .paper-visual {
    max-width: 220px;
  }

  .project-study {
    grid-template-columns: 1fr;
  }

  .project-study-visual {
    max-width: 340px;
  }

  .project-relation {
    flex-direction: column;
    gap: 0.25rem;
  }

  .project-relation li:not(:last-child)::after {
    content: "\2193";
  }
}

/* -- 14  Print and reduced motion ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media print {
  .navbar,
  .nav-footer,
  .page-navigation,
  #quarto-margin-sidebar {
    display: none !important;
  }

  .home {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 10.5pt;
  }
}