/* ============================================================
   Weijue Bu — Academic Homepage (minimal, academicpages-style)
   Single light theme, no JS, no animation. Layout: slim top nav,
   left sidebar (avatar / name / contact / affiliation logo),
   right main column (bio, news, publications, awards).
   ============================================================ */

:root {
    --ink: #494e52;
    --ink-strong: #2b2f33;
    --muted: #8a8f94;
    --link: #2a6db1;
    --line: #e6e8ea;
    --badge-bg: #eef4fb;
    --badge-ink: #2a6db1;
    --bg: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

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

.wrap {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------- Top nav ---------------- */

.topnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.topnav a {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink);
}
.topnav a:hover { color: var(--link); text-decoration: none; }

/* ---------------- Layout ---------------- */

.layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 48px;
    padding: 38px 0 56px;
}

/* ---------------- Sidebar ---------------- */

.avatar {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 4px 0 20px;
}

.side-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-strong);
    margin: 0 0 8px;
    line-height: 1.25;
}

.side-role {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.side-focus {
    margin: 14px 0 0;
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
}

.side-links {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.side-links li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
}

.side-links svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--muted);
}

.affil-logo {
    display: block;
    margin-top: 24px;
    max-width: 100%;
}
.affil-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------- Main sections ---------------- */

.section { margin: 0 0 44px; }
.section:last-child { margin-bottom: 0; }

.section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-strong);
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin: 0 0 18px;
}

.bio p { margin: 0 0 14px; }
.bio p:last-child { margin-bottom: 0; }

/* News */

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

.news li {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    padding: 5px 0;
    font-size: .95rem;
}

.news time {
    color: var(--badge-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.news p { margin: 0; }
.news i { color: var(--ink); }

/* Publications */

.pub-sub {
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink-strong);
    margin: 24px 0 10px;
}
.pub-sub:first-of-type { margin-top: 0; }

.pub {
    margin: 0 0 16px;
    font-size: .95rem;
    line-height: 1.55;
}

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

.pub-authors { font-size: .92rem; }

.venue-chip {
    display: inline-block;
    background: var(--badge-bg);
    color: var(--badge-ink);
    border-radius: 4px;
    padding: 0 8px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.7;
    vertical-align: 1px;
}
.venue-plain {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--muted);
}

.pub-links { font-size: .9rem; }
.pub-links a { margin: 0 2px; }

.pub-note {
    font-size: .85rem;
    color: var(--muted);
    margin: 18px 0 0;
}

/* Awards */

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

.awards li {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    padding: 5px 0;
    font-size: .95rem;
}

.awards time {
    color: var(--badge-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.awards p { margin: 0; }

/* ---------------- Footer ---------------- */

.footer {
    border-top: 1px solid var(--line);
    padding: 18px 0 32px;
    font-size: .85rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

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

@media (max-width: 760px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding-top: 26px;
    }
    .avatar {
        width: 132px;
        height: 132px;
        margin: 0 0 16px;
    }
    .affil-logo { max-width: 340px; }
}

@media (max-width: 480px) {
    .news li, .awards li { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
    .topnav { gap: 4px 16px; }
    .topnav a { font-size: .82rem; }
}