/* ===== Minimal academic home layout (Siyi-style) ===== */

/* overall width ~ 92% (max 1320px) — widened */
.page-columns .content{
  max-width: min(92vw, 1320px);
}

/* remove tiny Quarto title/breadcrumbs */
#title-block-header, .quarto-title-block, .quarto-title, .quarto-title-breadcrumbs,
.quarto-page-breadcrumbs, nav[aria-label="breadcrumb"], .breadcrumb{ display:none !important; }

/* navbar keep simple */
.navbar{ background:#fff !important; box-shadow:none; }
.navbar .nav-link{ color:#333 !important; }
.navbar .nav-link.active{ font-weight:600; }

/* ---------- HERO (left text + right portrait) ---------- */
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px; /* tighter gap to free width */
  margin-top:10px;
  margin-bottom:24px;
}

/* LEFT column wider (from 62% -> 70%) */
.hero-left{
  flex:1 1 70%;
  min-width: 520px; /* better line length */
}

/* RIGHT column: keep avatar at 320px */
.hero-right{
  flex:0 0 320px;
  display:flex;
  justify-content:flex-end;
}
.hero-right img{
  width:320px;
  height:320px;
  object-fit:cover;
  border-radius:50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Name line like a compact H2 */
.hero-name{
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 10px 0;
}

/* contact inline: "email | CV" */
.contact-inline{
  margin: 6px 0 14px 0;
  color:#444;
}
.contact-inline a{ text-decoration:none; }
.contact-inline a:hover{ text-decoration:underline; }
.contact-inline .sep{ margin: 0 10px; color:#aaa; }

/* body copy */
p{ margin: 0 0 12px 0; line-height:1.6; }

/* divider like sample */
.section-divider{
  border:none; height:1px;
  background: #e8e8e8;
  margin: 26px 0;
}

/* headings below divider */
h2{ font-size: 1.35rem; margin-top: 0; margin-bottom: 10px; }
ul{ margin-top: 6px; }

/* Large screens: give a little more canvas */
@media (min-width: 1400px){
  .page-columns .content{ max-width: 1360px; } /* optional extra widen */
  .hero-left{ flex-basis: 72%; }
}

/* mobile */
@media (max-width: 992px){
  .page-columns .content{ max-width: 92vw; }
  .hero{ flex-direction:column-reverse; gap:16px; align-items:center; }
  .hero-left{ min-width:auto; text-align:left; }
  .hero-right{ justify-content:center; }
  .hero-right img{ width:220px; height:220px; }
}