/* ====================================================
   DESIGN TOKENS  — replicates donggong1.github.io
==================================================== */
:root {
    --theme:       #E64626;
    --theme-tint:  rgba(230,70,38,0.08);
    --text:        #1a1a1a;
    --text-light:  #828282;
    --border:      rgba(0,0,0,0.1);
    --bg:          #ffffff;
    --footer-bg:   #e8e8e8;
    --footer-text: #2a2a2a;

    --ccf-a-bg:       #fff1f2; --ccf-a-txt:       #be123c; --ccf-a-bdr:       #fecdd3;
    --ccf-b-bg:       #f0fdf4; --ccf-b-txt:       #166534; --ccf-b-bdr:       #bbf7d0;
    --core-astar-bg:  #fff7ed; --core-astar-txt:  #c2410c; --core-astar-bdr:  #fed7aa;
    --core-a-bg:      #ecfdf5; --core-a-txt:      #065f46; --core-a-bdr:      #a7f3d0;
    --if-bg:          #f1f5f9; --if-txt:          #475569; --if-bdr:          #cbd5e1;
    --hl-bg:          #fefce8; --hl-txt:          #854d0e; --hl-bdr:          #fde68a;
    --gold:       #d97706;
}

/* ====================================================
   RESET
==================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

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

/* ====================================================
   NAVIGATION  — white, fixed-top, right-aligned links
==================================================== */
nav {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 56px;
}

.nav-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.nav-brand {
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.1px;
}
.nav-brand:hover { text-decoration: none; color: var(--theme); }

.nav-links { display: flex; }

.nav-links a {
    color: var(--text-light);
    font-size: 0.88rem;
    font-weight: 400;
    padding: 0 0.75rem;
    line-height: 56px;
    display: block;
    transition: color 0.15s;
}
.nav-links a:hover { color: var(--theme); text-decoration: none; }
.nav-links a.active { color: var(--theme); font-weight: 600; }

/* ====================================================
   MAIN CONTAINER
==================================================== */
.site-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 5rem 1.5rem 3rem;
}

/* ====================================================
   ABOUT-INTRO  — text LEFT, photo RIGHT
==================================================== */
.about-intro {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.about-intro-text { flex: 1; }

.about-intro-photo {
    flex: 0 0 18%;
    max-width: 18%;
    position: relative;
    right: clamp(0rem, 3vw, 3rem);
}

.about-intro-photo img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    display: block;
}

/* ====================================================
   NAME + AFFILIATION
==================================================== */
.post-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.about-intro-info { margin-top: 0.5rem; }

.about-intro-info p {
    font-size: 0.93rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.55;
}
.about-intro-info a { color: var(--theme); }

/* ====================================================
   BIO TEXT
==================================================== */
.bio-text {
    font-size: 0.93rem;
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 0.9rem;
    max-width: 95%;
}
.bio-text strong { color: var(--text); }

/* ====================================================
   PUBLICATION FILTERS
==================================================== */
.pub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}
.pub-filter {
    padding: 0.35rem 0.95rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-light);
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.pub-filter:hover {
    border-color: var(--theme);
    color: var(--theme);
}
.pub-filter.active {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
    font-weight: 500;
}

/* ====================================================
   RESEARCH INTEREST CARDS
==================================================== */
.research-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 1.4rem;
}

.research-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.3rem 1.2rem 1.2rem;
    border-radius: 12px;
    background: linear-gradient(150deg, #fff 55%, rgba(230,70,38,0.04) 100%);
    border: 1px solid rgba(230,70,38,0.18);
    border-top: 3px solid var(--theme);
    box-shadow: 0 2px 10px rgba(230,70,38,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none !important;
}
.research-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(230,70,38,0.16);
    text-decoration: none;
}

.research-card-icon {
    flex-shrink: 0;
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #E64626, #f07050);
    font-size: 1.15rem;
    box-shadow: 0 3px 10px rgba(230,70,38,0.28);
}

.research-card-content h4 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    color: var(--theme);
    letter-spacing: 0.01em;
}
.research-card-content p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-light);
}

/* ====================================================
   ICON LINK BUTTONS  — round social icons
==================================================== */
.text-links {
    margin: -0.6rem 0 1.2rem;
    font-size: 0.95rem;
    line-height: 1.8;
}

.text-link {
    color: var(--theme);
    text-decoration: none;
    white-space: nowrap;
}
.text-link::before { content: '['; color: #555; }
.text-link::after  { content: ']'; color: #555; }
.text-link + .text-link { margin-left: 0.35rem; }
.text-link:hover { text-decoration: underline; }

/* ====================================================
   SECTION DIVIDER
==================================================== */
.section-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 0.9rem 0;
    opacity: 0.5;
}

/* ====================================================
   SECTION HEADINGS  — Courier New, theme color
==================================================== */
.section-heading {
    font-size: 1.3rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--theme);
    margin-bottom: 0.6rem;
    word-spacing: -0.25em;
}
.section-heading a { color: inherit; }
.section-heading a:hover { text-decoration: none; opacity: 0.8; }

/* ====================================================
   NEWS LIST
==================================================== */
.news-list { padding: 0; margin: 0; }

.news-list li {
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 0.3rem 0;
    color: var(--text);
    border-bottom: none;
    list-style: disc;
    margin-left: 1.2rem;
}

.news-date {
    color: var(--text-light);
    font-size: 0.88rem;
    margin-right: 0.2rem;
}

/* ====================================================
   PUBLICATIONS  (on homepage — compact card list)
==================================================== */
.pub-list {
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pub-item--compact {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pub-item--compact:last-child { border-bottom: none; }

.pub-thumb-wrap {
    flex-shrink: 0;
    position: relative;
    width: 120px;
}

.pub-thumb {
    width: 120px;
    height: 75px;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    display: block;
    background: #f5f5f5;
}
.pub-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5eef5, #ede0ed);
    color: rgba(230,70,38,0.45);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.pub-venue-tag {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(135deg, rgba(230,70,38,0.88), rgba(180,35,10,0.92));
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.22rem 0.5rem;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

.pub-body { flex: 1; min-width: 0; }

.pub-title {
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0.15rem;
    font-size: 0.91rem;
}

.pub-num {
    color: var(--text-light);
    font-size: 0.79rem;
    font-weight: 600;
    margin-right: 0.15rem;
}

.pub-authors {
    color: var(--text-light);
    font-size: 0.83rem;
    margin-bottom: 0.1rem;
}
.pub-authors strong { color: var(--text); font-weight: 700; }

.pub-venue,
.pub-venue-inline {
    font-style: italic;
    color: var(--text-light);
    font-size: 0.83rem;
}

.pub-links,
.pub-foot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

/* ====================================================
   PUBLICATION LIST (full page)
==================================================== */
.pub-details { margin-top: 1rem; }

.pub-details summary.pub-section-label {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    background: var(--theme-tint);
    border: 1px solid rgba(230,70,38,0.2);
    border-radius: 4px;
    color: var(--theme);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    transition: background 0.15s;
}
.pub-details summary.pub-section-label::-webkit-details-marker { display: none; }
.pub-details summary.pub-section-label::before {
    content: "▶";
    font-size: 0.52rem;
    transition: transform 0.2s;
}
.pub-details[open] summary.pub-section-label::before { transform: rotate(90deg); }
.pub-details summary.pub-section-label:hover { background: rgba(230,70,38,0.14); text-decoration: none; }

/* DEFAULT pub-item — co-authored section, no thumbnail */
.pub-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pub-item:last-child { border-bottom: none; }

/* See all link */
.see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--theme);
    margin-top: 0.75rem;
    padding: 0.28rem 0.85rem;
    border: 1px solid rgba(230,70,38,0.45);
    border-radius: 1.1rem;
    transition: background 0.15s, color 0.15s;
}
.see-all-link:hover { background: var(--theme); color: #fff; text-decoration: none; }

/* ====================================================
   BADGES
==================================================== */
.badge {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 3px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.badge-a         { background: var(--ccf-a-bg);      color: var(--ccf-a-txt);      border: 1px solid var(--ccf-a-bdr); }
.badge-b         { background: var(--ccf-b-bg);      color: var(--ccf-b-txt);      border: 1px solid var(--ccf-b-bdr); }
.badge-core-astar{ background: var(--core-astar-bg); color: var(--core-astar-txt); border: 1px solid var(--core-astar-bdr); }
.badge-core-a    { background: var(--core-a-bg);     color: var(--core-a-txt);     border: 1px solid var(--core-a-bdr); }
.badge-core-b    { background: #eff6ff;              color: #1d4ed8;               border: 1px solid #bfdbfe; }
.badge-if        { background: var(--if-bg);          color: var(--if-txt);          border: 1px solid var(--if-bdr); }
.badge-hl        { background: var(--hl-bg);          color: var(--hl-txt);          border: 1px solid var(--hl-bdr); }

/* ====================================================
   PAPER LINK BUTTONS
==================================================== */
.pub-link {
    color: var(--theme);
    font-size: 0.71rem;
    font-weight: 500;
    padding: 0.08rem 0.4rem;
    border: 1px solid rgba(230,70,38,0.45);
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
.pub-link:hover { background: var(--theme); color: #fff; border-color: var(--theme); text-decoration: none; }

/* ====================================================
   SERVICES (homepage + full page)
==================================================== */
.service-block { margin-bottom: 1.1rem; }
.service-block:last-child { margin-bottom: 0; }

.service-heading {
    font-weight: 700;
    color: var(--text);
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
}

.service-list { padding: 0; margin: 0; }
.service-list li {
    color: var(--text-light);
    font-size: 0.88rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    list-style: disc;
    margin-left: 1.1rem;
}
.service-list li:last-child { border-bottom: none; }

/* ====================================================
   EDUCATION  (full page)
==================================================== */
.edu-list { padding: 0; margin: 0; }
.edu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.edu-item:last-child { border-bottom: none; }
.edu-degree { font-weight: 700; color: var(--text); font-size: 0.93rem; }
.edu-inst   { color: var(--theme); font-weight: 600; font-size: 0.88rem; margin-top: 0.1rem; }
.edu-detail { color: var(--text-light); font-size: 0.83rem; margin-top: 0.1rem; }
.edu-period { color: var(--text-light); font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; padding-top: 0.1rem; }

/* ====================================================
   AWARDS
==================================================== */
.award-list { padding: 0; margin: 0; }
.award-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.award-item:last-child { border-bottom: none; }
.award-name { font-weight: 600; font-size: 0.92rem; }
.award-org  { color: var(--text-light); font-weight: 400; }
.award-date { color: var(--text-light); font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; }

/* ====================================================
   GRANTS
==================================================== */
.grant-list { padding: 0; margin: 0; }
.grant-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.grant-item:last-child { border-bottom: none; }
.grant-title   { font-weight: 700; color: var(--text); margin-bottom: 0.2rem; font-size: 0.93rem; }
.grant-details { color: var(--text-light); font-size: 0.85rem; }
.grant-funding { color: var(--gold); font-weight: 700; font-size: 0.88rem; margin-top: 0.2rem; }
.grant-year    { color: var(--text-light); font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; }

/* ====================================================
   TALKS
==================================================== */
.talk-list { padding: 0; margin: 0; }
.talk-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.talk-item:last-child { border-bottom: none; }
.talk-title { font-weight: 600; color: var(--text); margin-bottom: 0.1rem; font-size: 0.9rem; }
.talk-venue { color: var(--text-light); font-size: 0.84rem; font-style: italic; }
.talk-date  { color: var(--text-light); font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; }

/* ====================================================
   PAGE HERO  — light, minimal (inner pages)
==================================================== */
.page-hero {
    background: var(--footer-bg);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    margin-top: 56px;
}
.page-hero-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.page-hero h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Courier New', Courier, monospace;
}
.page-hero p {
    color: var(--text-light);
    font-size: 0.88rem;
    margin-top: 0.25rem;
}

/* Inner page body */
.page-body {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.section { margin-bottom: 2.5rem; }
.section:last-child { margin-bottom: 0; }

.section-title {
    font-size: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--theme);
    margin-bottom: 0.75rem;
    word-spacing: -0.25em;
}

/* ====================================================
   BACK TO TOP
==================================================== */
#back-top {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
    z-index: 100;
}
#back-top.visible { opacity: 1; }
#back-top:hover { transform: translateY(-2px); }

/* ====================================================
   FOOTER
==================================================== */
footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border);
    color: var(--footer-text);
    text-align: center;
    padding: 1.25rem;
    font-size: 0.82rem;
}
footer a { color: var(--footer-text); }
footer a:hover { color: var(--theme); }

/* ====================================================
   RESPONSIVE
==================================================== */
@media (max-width: 680px) {
    .about-intro { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
    .about-intro-photo { order: -1; flex: 0 0 55%; max-width: 55%; right: 0; }
    .about-intro-text { display: contents; }
.research-cards { grid-template-columns: 1fr; max-width: 100%; }
    .bio-text { max-width: 100%; }
    .nav-links a { padding: 0 0.5rem; font-size: 0.8rem; }
    .award-item, .talk-item, .edu-item { flex-direction: column; }
    .pub-item--compact { flex-direction: column; }
    .pub-thumb-wrap { width: 100%; }
    .pub-thumb { width: 100%; height: 110px; }
    .site-container { padding: 4.5rem 1.25rem 2rem; }
}

/* ====================================================
   PRINT
==================================================== */
@media print {
    nav, #back-top { display: none; }
    .site-container { padding-top: 0; }
    .page-hero { margin-top: 0; }
}