/* css styles */

/* 平滑滚动到页面内的导航位置 */
html {
    scroll-behavior: smooth;
}

/* 页面总体排版 */
body {
    background-color: var(--site-side-background);
    line-height: 1.65;
}

/* Quarto 外层保持透明，使 body 的灰色可以露出来 */
#quarto-content {
    background-color: transparent;
}

/* 每一个单页区域 */
.page-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
    scroll-margin-top: 0.5rem;
    border-bottom: 1px solid var(--site-border);
}

/* 最后一页取消分隔符 */
.page-section:last-child {
    border-bottom: none;
}

/*Home Page*/
#home {
    min-height: auto;
    display: block;

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

/* 限制正文宽度，防止在宽屏上过度拉伸 */
main.content {
    width: calc(100% - 3rem);
    max-width: 960px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 4rem;
    padding-right: 4rem;

    box-sizing: border-box;

    background-color: var(--site-content-background);
    min-height: 100vh;

    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}

/* 一级标题 */
.page-section h1 {
    margin-bottom: 1.5rem;
}

/* 研究项目标题 */
#research h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* 手机上减少上下留白 */
@media (max-width: 768px) {
    main.content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .page-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    #home {
        min-height: auto;
        padding-top: 6rem;
    }

    .quarto-title-banner {
        width: 100%;
        min-height: 280px;
        padding: 2rem 1.25rem;

        background-position: center;
    }

    .quarto-title-banner h1.title {
        font-size: 34pt;
    }

    .quarto-title-banner .subtitle {
        margin-top: 1rem;
        font-size: 17pt;
    }

    #home {
        padding-top: 2rem;
    }

    .home-profile {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }

    .profile-photo-column {
        width: min(260px, 80%);
        margin-left: auto;
        margin-right: auto;
    }

    .profile-content>h1 {
        margin-bottom: 1.75rem;
    }

    .profile-row {
        grid-template-columns: 1fr;
        row-gap: 0.2rem;
        margin-bottom: 1.25rem;
    }

    .profile-label {
        white-space: normal;
    }
}

/* ==================================================
   Typography
   ================================================== */

:root {
    --font-reading:
        "EB Garamond",
        "STKaiti",
        "Kaiti SC",
        "KaiTi",
        "楷体",
        serif;

    --font-interface:
        Arial,
        "STKaiti",
        "Kaiti SC",
        "KaiTi",
        "楷体",
        sans-serif;
}

/* 普通正文：EB Garamond Regular */
html,
body {
    font-family: var(--font-reading);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.25;
}

/* 正文区域适用Old Style Number */
main.content,
.page-section,
.profile-value,
.research-details {
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: "onum" 1;
}

/* 正文区域项目符号颜色 */
main.content li::marker,
.page-section li::marker {
    color: var(--site-primary);
    font-size: 0.9em;
}

/* 标题：EB Garamond Medium */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.quarto-title,
.research-title {
    font-family: var(--font-reading);
    font-weight: 500;
}

/* 普通粗体：EB Garamond Medium */
strong,
b {
    font-family: var(--font-reading);
    font-weight: 500;
}

/* 覆盖 Bootstrap 的粗体工具类 */
.fw-bold,
.fw-semibold {
    font-family: var(--font-reading);
    font-weight: 500 !important;
}

/* 所有链接：Arial */
a {
    font-family: var(--font-interface);
}

/* 导航栏：Arial */
.navbar,
.navbar-brand,
.navbar-nav,
.navbar-nav .nav-link,
.navbar-toggler,
.dropdown-menu,
.dropdown-item {
    font-family: var(--font-interface);
}

/* 普通导航项目 */
.navbar-nav .nav-link {
    font-weight: 400;
    font-size: 14pt;
}

/* 网站名称 */
.navbar-brand {
    font-weight: 700;
    font-size: 14pt
}

/* 按钮等界面元素 */
.btn,
button {
    font-family: var(--font-interface);
}

/* 链接中的粗体仍然使用 Arial */
a strong,
a b {
    font-family: var(--font-interface);
}

/* ==================================================
   Basic typography
   ================================================== */

/* 正文：16pt，EB Garamond Regular */
body {
    font-family: var(--font-reading);
    font-size: 16pt;
    font-weight: 400;
    line-height: 1.25;
}

/* 一级标题：28pt，EB Garamond Medium，小型大写 */
h1,
.page-section h1 {
    font-family: var(--font-reading);
    font-size: 24pt;
    font-weight: 500;

    font-variant-caps: small-caps;
    letter-spacing: 0.010em;

    line-height: 1.1;

    color: var(--site-navy);
}

/* 二级标题 */
h2,
.page-section h2 {
    font-family: var(--font-reading);
    font-weight: 500;
    font-size: 18pt;

    /* 取消标题下方横线 */
    border-bottom: none;
    padding-bottom: 0;
}

/* Research listing */

.research-list {
    margin-top: 0rem;
}

.research-item {
    padding: 0rem 0;
    border-bottom: 0px solid var(--site-border);
}

.research-item:first-child {
    padding-top: 0;
}

.research-item:last-child {
    border-bottom: none;
}

/* 主标题位于左边框之外 */
.research-title {
    font-size: 18pt;
    margin-top: 0;
    margin-bottom: 0.0rem;
    color: var(--site-navy);
    line-height: 1.25;
}

/* 副标题没有标签 */
.research-subtitle {
    margin-bottom: 0.7rem;
    line-height: 1.25;
    color: var(--site-text);
}

/* 标题以下的统一左边框 */
.research-details {
    margin-left: 0.15rem;
    padding-left: 0.85rem;
    border-left: 1.5px solid var(--site-muted);
}

/* Authors、Status、Journal、Year 每项一行 */
.research-field {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.0rem;
    line-height: 1.25;
}

/* 标签 */
.research-label {
    flex: 0 0 auto;
    min-width: 4.8rem;
    font-weight: 500;
    color: var(--site-muted);
}

/* 实际内容 */
.research-value {
    color: var(--site-muted);
}

/* PDF 链接 */
.research-links {
    font-size: 14pt;
    margin-top: 0.0rem;
}

.research-links a {
    display: inline-block;
    color: var(--site-primary);
    font-weight: 500;
    text-decoration: none;
}

.research-links a:hover {
    color: var(--site-primary-hover);
    text-decoration: underline;
}




/* ==================================================
   Homepage title banner
   ================================================== */

.quarto-title-banner {
    min-height: 420px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3rem 2rem;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 横幅中的标题容器 */
.quarto-title-banner .quarto-title {
    width: calc(100% - 3rem);
    max-width: 960px;

    margin-left: auto;
    margin-right: auto;
    text-align: center;

    box-sizing: border-box;
}

/* 横幅主标题 */
.quarto-title-banner h1.title {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-reading);
    font-size: 48pt;
    font-weight: 500;

    font-variant-caps: small-caps;
    letter-spacing: 0;

    line-height: 1.1;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 横幅副标题 */
.quarto-title-banner .subtitle {
    margin-top: 1.4rem;
    margin-bottom: 0;

    color: #ffffff;

    font-family: var(--font-reading);
    font-size: 22pt;
    font-weight: 500;

    line-height: 1.3;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}




/* ==================================================
   Home information layout
   ================================================== */

.home-profile {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: center;

    width: 100%;
}

/* 照片区域 */

.profile-photo-column {
    width: 100%;
    padding-top: 0.25rem;
}

.profile-photo {
    display: block;

    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;

    border: None;
    box-shadow: 0 6px 18px rgba(20, 33, 61, 0.16);
}

/* 右侧信息区域 */

.profile-content {
    min-width: 0;
}

/*
Information 仍然使用全站 h1 样式。
这里只调整它在首页中的位置和间距。
*/

.profile-content>h1 {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

/* 信息表格 */

.profile-fields {
    width: 100%;
}

.profile-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 0.5rem;

    align-items: baseline;

    margin-bottom: 0.1rem;
}

.profile-label {
    font-family: var(--font-reading);
    font-weight: 500;
    white-space: nowrap;
}

.profile-label strong {
    font-weight: 500;
}

.profile-value {
    min-width: 0;

    font-family: var(--font-reading);
    font-weight: 400;
    line-height: 1.15;
}

/* 教育经历中的第二行 */

/* 邮件链接使用 Email */

.profile-value a {
    font-family: var(--font-reading);
}

/* Banner 下方不要额外留白 */
.quarto-title-banner {
    margin-bottom: 0 !important;
}

/* 减少 Banner 与中央白色页面之间的距离 */
#quarto-content,
#quarto-content.page-columns,
main.content {
    margin-top: 0 !important;
}

/* 减少首页白色区域内部的顶部留白 */
#home.page-section {
    padding-top: 1.5rem;
}