/* =========================================================
   1. 全局变量：日常调风格时，优先只改这一块
   ========================================================= */
@font-face {
    font-family: "Beleren2016";
    src: url("../fonts/Beleren2016-Bold.woff") format("woff");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    /* 颜色：页面正文、卡片、链接、强调色都集中在这里 */
    --color-ink: #102030;
    --color-body: #224466;
    --color-muted: #607080;
    --color-page: #f7f9fb;
    --color-panel: #ffffff;
    --color-white: #ffffff;
    --color-soft: #edf2f6;
    --color-primary: #0369cf;
    --color-primary-strong: #0248ab;
    --color-accent: #028a46;

    /* 颜色：状态、边框、浅色底，只在组件中复用 */
    --color-header-bg: rgba(255, 255, 255, 0.9);
    --color-focus: rgba(25, 122, 99, 0.28);
    --color-border: rgba(100, 112, 132, 0.16);
    --color-border-strong: rgba(100, 112, 132, 0.28);
    --color-timeline-line: rgba(25, 122, 99, 0.22);
    --color-tag-text: #20415c;
    --color-tag-bg: #e6eef6;
    --color-tag-border: rgba(16, 89, 168, 0.12);
    --color-outputs-index-bg: #e7f3ee;
    --color-shadow-panel: rgba(24, 32, 40, 0.1);

    /* 间距：以 m 为基准，向左变小，向右变大 */
    --space-sss: 4px;
    --space-ss: 6px;
    --space-s: 8px;
    --space-m: 12px;
    --space-l: 16px;
    --space-ll: 24px;
    --space-lll: 32px;
    --space-llll: 48px;

    /* 字号：普通正文用 m，辅助信息用 s/ss，标题单独用 heading */
    --text-sss: 10px;
    --text-ss: 12px;
    --text-s: 14px;
    --text-m: 16px;
    --text-l: 18px;
    --text-ll: 20px;
    --heading-m: clamp(24px, 4vw, 36px);
    --heading-l: clamp(32px, 8vw, 48px);

    /* 字重与行高：避免各处手写 600、800、1.5 */
    --font-weight-b: 600;
    --font-weight-bb: 800;
    --line-tight: 1.15;
    --line-base: 1.5;
    --line-button: 1;
    --line-card-title: 1.35;

    /* 圆角、边框、阴影、动效 */
    --radius-m: 8px;
    --border-width: 1px;
    --focus-width: 3px;
    --shadow-panel: 0 18px 45px var(--color-shadow-panel);
    --transition-m: 0.18s ease;

    /* 页面主要尺寸 */
    --content-width: 1080px;
    --copy-width: 720px;
    --profile-card-width: 240px;
    --profile-card-mobile-width: 50%;
    --profile-photo-mobile-height: 320px;

    /* 顶栏与响应式断点：默认是电脑横屏；小于此宽度按手机竖屏处理。 */
    --header-height: 72px;
    --header-height-compact: 64px;

    /* 小装饰尺寸：时间轴和链接下划线 */
    --timeline-marker-size: 26px;
    --timeline-marker-border: 7px;
    --timeline-line-width: 2px;
    --link-underline-width: 0.08em;
    --link-underline-offset: 0.24em;
    --nav-blur: 16px;

    --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    --font-serif-cn: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    --font-academic: "Times New Roman", Times, serif;
    --font-display-en: "Beleren2016", var(--font-sans);
    --font-display: var(--font-serif-cn);
}

/* 中文模式用宋体系；英文模式用 Beleren。JS 切换 documentElement.lang 后自动生效。 */
html[lang^="zh"] {
    --font-display: var(--font-serif-cn);
}

html[lang="en"] {
    --font-display: var(--font-display-en);
}

/* =========================================================
   2. 全局基底：通常不用改，负责浏览器默认样式归一
   ========================================================= */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-ink);
    background: var(--color-page);
    font-family: var(--font-sans);
    font-size: var(--text-m);
    line-height: var(--line-base);
}

a {
    color: var(--color-primary);
    text-decoration-thickness: var(--link-underline-width);
    text-underline-offset: var(--link-underline-offset);
}

a:hover {
    color: var(--color-primary-strong);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-width);
}

/* =========================================================
   3. 通用排版：标题、正文、章节小标题
   ========================================================= */
h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1 {
    margin: var(--space-s) 0 0;
    font-size: var(--heading-l);
    font-weight: var(--font-weight-bb);
    line-height: var(--line-tight);
}

h2 {
    margin: var(--space-ss) 0 0;
    font-family: var(--font-display);
    font-size: var(--heading-m);
    line-height: var(--line-tight);
}

h3 {
    margin: 0;
    font-size: var(--text-ll);
    line-height: var(--line-card-title);
}

.item-type {
    margin: 0;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-ss);
    font-weight: var(--font-weight-bb);
}

.lead,
.body-copy {
    color: var(--color-body);
    font-size: var(--text-l);
}

.lead {
    max-width: var(--copy-width);
    margin: var(--space-l) 0 0;
}

.body-copy p {
    margin: 0 0 var(--space-m);
}

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

/* =========================================================
   4. 页面骨架：容器宽度与章节距离
   ========================================================= */
main,
.site-footer {
    width: min(var(--content-width), calc(100% - var(--space-lll)));
    margin: 0 auto;
}

.section {
    padding: var(--space-lll);
    border-top: var(--border-width) solid var(--color-border);
    scroll-margin-top: calc(var(--header-height) + var(--space-l));
}

.section-heading {
    max-width: var(--copy-width);
    margin-bottom: var(--space-ll);
}

.section-copy {
    max-width: var(--copy-width);
    margin: var(--space-m) 0 0;
    color: var(--color-body);
    font-size: var(--text-l);
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
}

/* =========================================================
   5. 通用组件：按钮、标签、列表、卡片
   ========================================================= */
.text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space-l) + var(--space-m));
    padding: 0 var(--space-s);
    color: var(--color-ink);
    background: transparent;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-m);
    cursor: pointer;
    font: inherit;
    font-family: var(--font-display);
    font-size: var(--text-s);
    font-weight: var(--font-weight-b);
    line-height: var(--line-button);
    transition:
        background-color var(--transition-m),
        border-color var(--transition-m),
        color var(--transition-m);
}

.text-button:hover {
    background: var(--color-soft);
}

.text-button.primary {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.text-button.primary:hover {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--space-l) + var(--space-ss));
    padding: var(--space-sss) var(--space-s);
    border-radius: var(--radius-m);
    font-size: var(--text-ss);
    font-weight: var(--font-weight-b);
}

.tag {
    color: var(--color-tag-text);
    background: var(--color-tag-bg);
    border: var(--border-width) solid var(--color-tag-border);
}

.meta-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-ss);
    color: var(--color-muted);
    font-size: var(--text-s);
    line-height: var(--line-base);
}

.meta-list a {
    color: inherit;
    text-decoration-color: var(--color-border-strong);
    transition: color var(--transition-m);
}

.meta-list a:hover {
    color: var(--color-primary-strong);
}

/* 白底卡片的共用底座：新增卡片时优先复用这组视觉 */
.projects-item,
.timeline-body,
.outputs-list li,
.profile-card,
.honor-item,
.research-focus-item {
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-m);
}

.projects-item,
.timeline-body {
    padding: var(--space-l);
}

.projects-list,
.timeline {
    display: grid;
    gap: var(--space-l);
}

.projects-item p,
.timeline-body p,
.outputs-main p {
    margin: 0;
}

/* =========================================================
   6. 顶部导航：只负责定位、导航项和语言/CV按钮
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-l);
    min-height: var(--header-height);
    padding: 0 var(--space-ll);
    background: var(--color-header-bg);
    border-bottom: var(--border-width) solid var(--color-border);
    backdrop-filter: blur(var(--nav-blur));
}

.brand {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-ll);
    font-weight: var(--font-weight-b);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-ss);
}

.site-nav a {
    padding: var(--space-ss) var(--space-s);
    color: var(--color-muted);
    border-radius: var(--radius-m);
    font-family: var(--font-display);
    font-size: var(--text-s);
    font-weight: var(--font-weight-b);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--transition-m),
        color var(--transition-m);
}

.site-nav a:hover {
    color: var(--color-ink);
    background: var(--color-soft);
}

.site-nav a[aria-current="page"] {
    color: var(--color-ink);
    background: var(--color-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-ss);
}

/* =========================================================
   7. 首屏：姓名、简介、个人信息、头像
   ========================================================= */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--profile-card-width);
    gap: var(--space-lll);
    align-items: center;
    min-height: calc(100svh - var(--header-height));
    padding: var(--space-llll) var(--space-lll);
}

.hero-copy {
    max-width: var(--copy-width);
}

.identity-meta {
    margin-top: var(--space-l);
}

.profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-ss);
    margin-top: var(--space-l);
}

.profile-links a {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--space-l) + var(--space-s));
    padding: 0 var(--space-s);
    color: var(--color-primary);
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
    font-weight: var(--font-weight-b);
    line-height: var(--line-button);
    text-decoration: none;
    transition:
        background-color var(--transition-m),
        border-color var(--transition-m),
        color var(--transition-m);
}

.profile-links a:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.profile-card {
    align-self: center;
    overflow: hidden;
    box-shadow: var(--shadow-panel);
}

.profile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--color-soft);
}

/* =========================================================
   8. 科研与项目经历
   ========================================================= */
.research-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
}

.research-focus-item {
    display: grid;
    gap: var(--space-m);
    align-content: start;
    padding: var(--space-l);
}

.research-focus-description {
    margin: 0;
    color: var(--color-body);
}

.projects-item-header {
    margin-bottom: var(--space-m);
}

.projects-item > p {
    color: var(--color-body);
}

/* =========================================================
   9. 教育与工作经历时间轴
   ========================================================= */
.timeline {
    position: relative;
}

.timeline::before {
    position: absolute;
    top: var(--space-s);
    bottom: var(--space-s);
    left: var(--space-m);
    width: var(--timeline-line-width);
    background: var(--color-timeline-line);
    content: "";
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--timeline-marker-size) minmax(0, 1fr);
    gap: var(--space-l);
}

.timeline-marker {
    position: relative;
    z-index: 1;
    width: var(--timeline-marker-size);
    height: var(--timeline-marker-size);
    margin-top: var(--space-l);
    background: var(--color-page);
    border: var(--timeline-marker-border) solid var(--color-accent);
    border-radius: 50%;
}

.timeline-marker.job {
    border-color: var(--color-primary);
}

.timeline-body {
    position: relative;
}

.timeline-body text {
    margin-right: var(--space-l);
    font-size: var(--text-m);
}

.timeline-body > p:last-child {
    margin-top: var(--space-s);
    color: var(--color-muted);
}

.timeline-time {
    position: absolute;
    top: var(--space-l);
    right: var(--space-l);
    color: var(--color-accent);
    font-size: var(--text-s);
    font-weight: var(--font-weight-b);
}

/* =========================================================
   10. 学术成果列表
   ========================================================= */
.publications-section {
    border-top: 0;
}

.outputs-block {
    margin-top: var(--space-ll);
}

.outputs-list {
    display: grid;
    gap: var(--space-s);
    margin: var(--space-m) 0 0;
    padding: 0;
    font-family: var(--font-academic);
    font-size: var(--text-m);
    line-height: var(--line-card-title);
    list-style: none;
    counter-reset: outputs;
}

.outputs-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
    padding: var(--space-l);
    counter-increment: outputs;
}

.outputs-list li::before {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: var(--timeline-marker-size);
    padding: 0 var(--space-ss);
    color: var(--color-accent);
    background: var(--color-outputs-index-bg);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
    font-weight: var(--font-weight-bb);
    line-height: var(--line-button);
    content: "[" counter(outputs) "]";
}

.outputs-main {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    gap: var(--space-sss);
}

.outputs-authors {
    color: var(--color-body);
}

.outputs-title {
    font-weight: var(--font-weight-b);
}

.outputs-venue {
    color: var(--color-muted);
}

.outputs-meta {
    white-space: nowrap;
}

.outputs-meta a {
    margin-left: var(--space-ss);
}

.inline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-ss);
}

.inline-tag {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--space-l) + var(--space-sss));
    padding: 0 var(--space-s);
    color: var(--color-tag-text);
    background: var(--color-tag-bg);
    border: var(--border-width) solid var(--color-tag-border);
    border-radius: var(--radius-m);
    font-size: var(--text-ss);
    font-weight: var(--font-weight-b);
    line-height: var(--line-button);
}

/* =========================================================
   11. 荣誉、联系、页脚
   ========================================================= */
.honor-list {
    display: grid;
    gap: var(--space-s);
}

.honor-item {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-m) var(--space-l);
}

.honor-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 72px;
    margin: 0;
    padding: var(--space-sss) var(--space-s);
    color: var(--color-accent);
    background: var(--color-outputs-index-bg);
    border-radius: var(--radius-m);
    font-family: var(--font-display);
    font-size: var(--text-s);
    font-weight: var(--font-weight-bb);
    line-height: var(--line-card-title);
    white-space: nowrap;
}

.honor-description {
    margin: 0;
    color: var(--color-body);
}

.site-footer {
    padding: var(--space-ll) 0 var(--space-lll);
    color: var(--color-muted);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-s);
}

/* =========================================================
   12. 响应式：默认电脑横屏；这里统一处理手机竖屏
   ========================================================= */
@media (max-width: 720px) {
    :root {
        --header-height: var(--header-height-compact);
    }

    body {
        font-size: var(--text-s);
    }

    main,
    .site-footer {
        width: min(100% - var(--space-l), var(--content-width));
    }

    .site-header {
        grid-template-columns: 1fr auto;
        gap: var(--space-s);
        padding: var(--space-s) var(--space-l);
    }

    .brand {
        font-size: var(--text-l);
    }

    .site-nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 3;
        overflow-x: auto;
        padding-bottom: var(--space-sss);
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .text-button {
        min-height: calc(var(--space-l) + var(--space-s));
    }

    h1 {
        font-size: var(--heading-m);
    }

    .lead,
    .body-copy,
    .section-copy {
        font-size: var(--text-m);
    }

    .section {
        padding: var(--space-lll) 0;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: var(--space-l);
        min-height: 0;
        padding: var(--space-lll) 0;
    }

    .profile-card {
        justify-self: center;
        order: -1;
        width: min(var(--profile-card-width), var(--profile-card-mobile-width));
    }

    .projects-item,
    .timeline-body,
    .outputs-list li,
    .honor-item,
    .research-focus-item {
        padding: var(--space-m);
    }

    .timeline-time {
        position: static;
        margin-top: var(--space-ss);
    }

    .outputs-list li {
        gap: var(--space-s);
    }

    .outputs-list {
        font-size: var(--text-s);
    }

    .research-focus-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo {
        max-height: var(--profile-photo-mobile-height);
    }
}