/* ============================================================================
   Yue Xu · personal academic site
   Shared stylesheet for index.html and meeting.html.

   Design brief: a contemporary mathematical journal rather than a product
   dashboard. Warm paper, dark ink, one scholarly teal, and a restrained
   violet signal for the newest material. Motion is quiet and optional.
   ========================================================================= */

/* ------------------------------------------------------------ 1. tokens */
:root {
    color-scheme: light;

    --bg:            #ebe7df;
    --surface:       #fbfaf6;
    --surface-raised:#fffefa;
    --surface-2:     #f2efe7;
    --border:        #d4d0c7;
    --border-soft:   #e5e1d9;
    --rule-strong:   #25302d;
    --text:          #2a2f2d;
    --text-muted:    #69716d;
    --heading:       #17201d;
    --accent:        #175b5e;
    --accent-strong: #0e4548;
    --accent-soft:   rgba(23, 91, 94, 0.095);
    --signal:        #6858b3;
    --signal-soft:   rgba(104, 88, 179, 0.085);
    --nav-bg:        rgba(251, 250, 246, 0.88);
    --ambient:       rgba(23, 91, 94, 0.075);
    --paper-shadow:  0 20px 58px rgba(36, 42, 39, 0.085),
                     0 2px 10px rgba(36, 42, 39, 0.035);

    --tip-bg:        #202825;
    --tip-fg:        #f7f4ec;

    /* random-matrix backdrop */
    --matrix-rgb:        58, 83, 80;
    --matrix-accent-rgb: 104, 88, 179;
    --matrix-alpha:      0.105;

    --font-sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC",
                  SimSun, serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
                 Consolas, "Courier New", monospace;

    --nav-h: 58px;
    --maxw:  1080px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:            #0d1210;
        --surface:       #131916;
        --surface-raised:#171e1a;
        --surface-2:     #1a211e;
        --border:        #303a35;
        --border-soft:   #242d29;
        --rule-strong:   #aab6b0;
        --text:          #d9ded9;
        --text-muted:    #929c96;
        --heading:       #f2f2e9;
        --accent:        #78c5c1;
        --accent-strong: #9edbd7;
        --accent-soft:   rgba(120, 197, 193, 0.13);
        --signal:        #aa9be3;
        --signal-soft:   rgba(170, 155, 227, 0.12);
        --nav-bg:        rgba(19, 25, 22, 0.86);
        --ambient:       rgba(120, 197, 193, 0.06);
        --paper-shadow:  0 22px 66px rgba(0, 0, 0, 0.25),
                         0 2px 12px rgba(0, 0, 0, 0.14);
        --tip-bg:        #e7ebe6;
        --tip-fg:        #121714;
        --matrix-rgb:        120, 197, 193;
        --matrix-accent-rgb: 170, 155, 227;
        --matrix-alpha:      0.115;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #0d1210;
    --surface:       #131916;
    --surface-raised:#171e1a;
    --surface-2:     #1a211e;
    --border:        #303a35;
    --border-soft:   #242d29;
    --rule-strong:   #aab6b0;
    --text:          #d9ded9;
    --text-muted:    #929c96;
    --heading:       #f2f2e9;
    --accent:        #78c5c1;
    --accent-strong: #9edbd7;
    --accent-soft:   rgba(120, 197, 193, 0.13);
    --signal:        #aa9be3;
    --signal-soft:   rgba(170, 155, 227, 0.12);
    --nav-bg:        rgba(19, 25, 22, 0.86);
    --ambient:       rgba(120, 197, 193, 0.06);
    --paper-shadow:  0 22px 66px rgba(0, 0, 0, 0.25),
                     0 2px 12px rgba(0, 0, 0, 0.14);
    --tip-bg:        #e7ebe6;
    --tip-fg:        #121714;
    --matrix-rgb:        120, 197, 193;
    --matrix-accent-rgb: 170, 155, 227;
    --matrix-alpha:      0.115;
}

/* -------------------------------------------------------------- 2. base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 8% -10%, var(--ambient), transparent 34rem),
        var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16.75px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    color: var(--heading);
    line-height: 1.24;
    margin: 0;
    font-weight: 600;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .3rem; }

a { color: var(--accent); text-decoration: none; transition: color .15s linear; }
a:hover { color: var(--accent-strong); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.ico {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.13em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }

#matrix-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .82;
}

/* --------------------------------------------------------- 3. top nav */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    height: var(--nav-h);
    padding: 0 3.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
}
.nav-brand:hover { color: var(--accent); }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: linear-gradient(145deg, var(--accent) 0 58%, var(--signal) 100%);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .04em;
    box-shadow: 0 5px 15px var(--accent-soft);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
    font-size: .85rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding: .25rem 0;
    border-bottom: 1px solid transparent;
    transition: color .15s linear, border-color .15s linear;
}
.nav-links a:hover { color: var(--heading); border-bottom-color: var(--accent); }

.nav-tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: 1.3rem;
    margin-left: .35rem;
    border-left: 1px solid var(--border-soft);
}

.tool-btn {
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 25px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.tool-btn:hover { color: var(--heading); background: var(--accent-soft); }
.tool-btn .ico {
    grid-area: 1 / 1;
    transition: opacity .22s ease, transform .42s cubic-bezier(.2, .75, .25, 1);
}

.lang-switch {
    position: relative;
    display: inline-flex;
    border: 1px solid var(--border);
    background: var(--surface-2);
    isolation: isolate;
}
.lang-switch::before {
    content: "";
    position: absolute;
    inset: 2px auto 2px 2px;
    z-index: 0;
    width: calc(50% - 2px);
    background: var(--rule-strong);
    transition: transform .28s cubic-bezier(.2, .75, .25, 1);
}
html[lang^="zh"] .lang-switch::before { transform: translateX(100%); }
.lang-switch button {
    position: relative;
    z-index: 1;
    min-width: 31px;
    padding: .1rem .42rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .04em;
    line-height: 21px;
    cursor: pointer;
    /* colour only: the active class is applied on load, and a background
       transition would animate in from transparent on first paint */
    transition: color .15s linear;
}
.lang-switch button:hover { color: var(--heading); }
.lang-switch button.active { background: transparent; color: var(--surface); }

[data-effective="dark"] .ico-moon,
[data-effective="light"] .ico-sun {
    opacity: 0;
    transform: rotate(-70deg) scale(.58);
}
[data-effective="dark"] .ico-sun,
[data-effective="light"] .ico-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* --------------------------------------------- 4. the document column */
.page {
    position: relative;
    z-index: 1;
    counter-reset: sec;
    max-width: var(--maxw);
    margin: 0 auto;
    background: var(--surface);
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    box-shadow: var(--paper-shadow);
}

/* the only structural rule: one hairline between sections */
.card {
    position: relative;
    padding: 3.7rem 4.25rem;
    border-top: 1px solid var(--border-soft);
    scroll-margin-top: var(--nav-h);
}
.card:first-child { border-top: 0; }

.prose {
    width: 100%;
    max-width: 56rem;
    overflow-wrap: break-word;
}

/* A quiet book-style section sign, with the title kept in serif. */
.section-title {
    display: flex;
    align-items: baseline;
    gap: .72rem;
    font-size: 1.42rem;
    font-weight: 600;
    margin: 0 0 1.45rem;
}
.section-title::before {
    content: "§";
    width: 1.25rem;
    height: auto;
    flex: none;
    background: none;
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    opacity: .72;
    transform: translateY(-.02em);
}

.subhead {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 .6rem;
}

/* --------------------------------------------------------- 5. hero */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 4.25rem;
    align-items: center;
    min-height: 440px;
    padding-top: 4.7rem;
    padding-bottom: 4.7rem;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: -13rem;
    right: -11rem;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 46%, var(--signal-soft), transparent 46%),
        radial-gradient(circle at 58% 55%, var(--accent-soft), transparent 62%);
    pointer-events: none;
}
.hero-text, .hero-photo { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.8rem, 6vw, 4rem);
    letter-spacing: -0.035em;
    margin-bottom: .55rem;
}

.hero-role {
    color: var(--text-muted);
    max-width: 42rem;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1.7rem;
    font-size: .89rem;
    color: var(--text-muted);
}
.hero-meta > span { display: flex; align-items: flex-start; gap: .55rem; }
.hero-meta .ico { margin-top: .35em; color: var(--text-muted); }
.email { font-family: var(--font-mono); font-size: .83rem; }

.profile-photo {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
    filter: saturate(.82) contrast(1.025);
    box-shadow: 0 18px 45px rgba(24, 34, 30, .16);
    transition: filter .35s ease, transform .45s cubic-bezier(.2, .75, .25, 1), box-shadow .35s ease;
}
.hero-photo::before {
    content: "";
    position: absolute;
    inset: .75rem -.75rem -.75rem .75rem;
    z-index: -1;
    border: 1px solid var(--accent);
    opacity: .42;
}
.hero-photo::after {
    content: "";
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    width: 3.2rem;
    height: 3.2rem;
    z-index: -1;
    background: var(--signal-soft);
}
.hero-photo:hover .profile-photo {
    filter: saturate(.98) contrast(1.02);
    transform: translate(-2px, -2px);
    box-shadow: 0 22px 52px rgba(24, 34, 30, .2);
}

/* ------------------------------------------- 6. keyword tags + tips */
.kw-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kw {
    position: relative;
    margin: 0;
    padding: .08rem 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: .88rem;
    line-height: 1.6;
    cursor: help;
    transition: color .15s linear, background-color .15s linear;
}
.kw:not(:last-child)::after {
    content: "·";
    display: inline-block;
    margin: 0 .65rem;
    color: var(--border);
}
.kw:hover, .kw:focus-visible {
    background: transparent;
    color: var(--accent-strong);
}

.kw-tip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: -.55rem;
    z-index: 30;
    width: max-content;
    max-width: min(300px, 72vw);
    padding: .55rem .72rem;
    background: var(--tip-bg);
    color: var(--tip-fg);
    font-size: .75rem;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity .15s ease, visibility .15s, transform .15s ease;
}
.kw:hover .kw-tip,
.kw:focus-visible .kw-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ------------------------------------- 7. education — spacing, no rules */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0 1.2rem;
    margin: 0;
    padding: .42rem 0;
    border: 0;
}
.timeline li::before { content: none; }

.tl-when {
    display: block;
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--text-muted);
    letter-spacing: .03em;
    padding-top: .3em;
}

/* ------------------------------- 8. publications — spacing, no rules */
.pub-list { list-style: none; margin: 0; padding: 0; }

.pub {
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    gap: 0 1.2rem;
    margin: 0;
    padding: 0 0 1.55rem;
    border: 0;
}
.pub:last-child { padding-bottom: 0; }

.pub:first-child {
    position: relative;
    margin: .1rem -.9rem 1.55rem;
    padding: 1rem .9rem 1rem 1.15rem;
    border-left: 2px solid var(--signal);
    background: linear-gradient(100deg, var(--signal-soft), transparent 78%);
}

.pub-year {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding-top: .45em;
}

.pub-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.09rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: .1rem;
}
.pub-venue { font-style: italic; color: var(--text-muted); }
.pub-meta { display: block; font-size: .87rem; color: var(--text-muted); }

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .35rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .69rem;
    letter-spacing: .07em;
    white-space: nowrap;
    padding: .04rem .18rem;
    border-bottom: 1px solid var(--border);
    transition: color .15s linear, border-color .15s linear;
}
.pdf-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ----------------------------------------------------- 9. boxes, links */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.15rem;
    border: 0;
}

.mini-card {
    padding: .85rem 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
}
.mini-card .subhead { color: var(--text-muted); }
.mini-card ul { margin: .35rem 0 0; padding-left: 1.05rem; }
.mini-card li { font-size: .9rem; margin-bottom: 0; }

.conference-list {
    border: 0;
}
.conference-item {
    position: relative;
    display: grid;
    grid-template-columns: 10.75rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem 0 .55rem 1.3rem;
    border: 0;
}
.conference-item::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: 1.05rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.conference-date {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .02em;
    color: var(--text-muted);
}
.conference-title {
    min-width: 0;
    font-family: var(--font-serif);
    font-size: .98rem;
    font-weight: 600;
    color: var(--heading);
}
.conference-action {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}
.conference-action:hover { border-bottom-color: var(--accent); }

.link-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.25rem;
}
.link-group { min-width: 0; }
.link-group .subhead { margin-bottom: .55rem; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 0; border: 0; }

.link-row {
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    align-items: start;
    gap: .72rem;
    padding: .42rem 0;
    color: var(--text);
}
.link-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .12rem .65rem;
    min-width: 0;
}
.link-row .ico { color: var(--text-muted); margin-top: .16rem; }
.link-mark {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.15rem;
    margin-top: .08rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .53rem;
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.link-row strong { font-weight: 600; font-size: .95rem; }
.link-row .link-note { color: var(--text-muted); font-size: .85rem; }
.link-row:hover { color: var(--text); }
.link-row:hover strong { color: var(--accent); }
.link-row:hover .ico { color: var(--signal); transform: translateX(2px); }
.link-row:hover .link-mark { color: var(--signal); border-color: var(--signal); transform: translateX(2px); }
.link-row .ico { transition: color .18s ease, transform .18s ease; }

/* -------------------------------------------------------- 10. portals */
.portal-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.portal-list li { margin: 0; }
.portal-list a {
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .92rem;
    border-bottom: 1px solid transparent;
    transition: color .15s linear, border-color .15s linear, transform .18s ease;
}
.portal-list a:hover { color: var(--accent); border-bottom-color: var(--accent); transform: translateY(-1px); }

/* -------------------------------------- 11. footer reasoning trajectory */
.site-footer {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2rem 4.25rem 2.7rem;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--paper-shadow);
    text-align: center;
    color: var(--text-muted);
    font-size: .8rem;
}

.footer-rule { display: none; }

.reasoning-path {
    display: block;
    width: min(100%, 720px);
    height: 86px;
    margin: 0 auto 1rem;
}

/* ------------------------------------------------- 12. meeting.html */
.meeting-header { margin-bottom: .3rem; }
.meeting-header h1 { font-size: 1.95rem; letter-spacing: -0.012em; }

.meeting-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.8rem;
    margin-top: .85rem;
    color: var(--text-muted);
    font-size: .88rem;
}
.meeting-facts span { display: inline-flex; align-items: center; gap: .45rem; }
.meeting-facts .ico { color: var(--text-muted); }

.table-wrap { overflow-x: auto; }

/* booktabs: heavy top and bottom rules, one rule under the header,
   and no vertical rules or row striping at all */
.schedule {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .89rem;
    border-top: 2px solid var(--rule-strong);
    border-bottom: 2px solid var(--rule-strong);
}
.schedule th, .schedule td {
    border: 0;
    padding: .6rem .85rem;
    vertical-align: top;
}
.schedule thead th {
    border-bottom: 1px solid var(--border);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .73rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding-bottom: .5rem;
}
.schedule td:nth-child(1) {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.schedule .break-row td {
    color: var(--text-muted);
    font-size: .8rem;
    font-style: italic;
    padding-top: .8rem;
}

.abstract {
    width: 100%;
    font-size: .92rem;
    line-height: 1.75;
    margin-bottom: 1.6rem;
    padding: 0;
    border: 0;
    max-width: 58rem;
    overflow-wrap: anywhere;
}
.speaker { font-weight: 600; color: var(--heading); }
.abstract-title {
    display: inline;
    padding: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 600;
}

.meeting-info {
    margin-top: 1.6rem;
    padding: .9rem 1.1rem;
    border: 0;
    border-left: 2px solid var(--accent);
    background: var(--surface-2);
    font-size: .89rem;
    line-height: 1.85;
}
.info-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: .6rem;
}

.back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .87rem; }

/* ------------------------------------------------------ 13. responsive */
@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr 170px; gap: 2.4rem; min-height: 390px; }
    .nav-inner { padding: 0 1.5rem; }
    .card { padding: 2.8rem 2.2rem; }
    .site-footer { padding: 1.8rem 2.2rem 2.2rem; }
    .nav-links { gap: 1rem; }
    .nav-links a:nth-child(n+4) { display: none; }
    .prose, .abstract { max-width: none; }
    .link-groups { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 620px) {
    .page, .site-footer { border-left: 0; border-right: 0; }
    .card { padding: 2.25rem 1.25rem; }
    .site-footer { padding: 1.4rem 1.15rem 1.9rem; }
    .nav-inner { padding: 0 1.05rem; gap: .7rem; }
    .nav-brand .brand-label { display: none; }
    .nav-links { gap: .85rem; }
    .nav-links a { font-size: .8rem; }
    .nav-tools { padding-left: .85rem; }

    .hero { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding-top: 3rem; padding-bottom: 3rem; }
    .hero-photo { max-width: 150px; margin-left: .75rem; }
    .hero h1 { font-size: 2.65rem; }
    .hero::before { width: 25rem; height: 25rem; right: -13rem; top: -8rem; }

    .timeline li, .pub { grid-template-columns: 1fr; gap: .1rem; }
    .tl-when, .pub-year { padding-top: 0; }
    .timeline li { padding: .5rem 0; }

    .grid-2 { grid-template-columns: 1fr; gap: .8rem; }
    .portal-list { gap: .35rem 1.3rem; }

    .kw-tip { max-width: 78vw; }
    .reasoning-path { height: 72px; margin-bottom: .85rem; }
    .pub:first-child { margin-left: -.6rem; margin-right: -.6rem; padding-left: .8rem; }
    .conference-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .25rem .8rem;
    }
    .conference-date { grid-column: 1 / -1; }
    .conference-title { grid-column: 1; }
    .conference-action { grid-column: 2; }
}

@media (max-width: 470px) {
    .nav-links a:nth-child(3) { display: none; }
    .nav-tools { padding-left: .55rem; margin-left: .1rem; gap: .25rem; }
    .hero h1 { font-size: 2.35rem; }
    .hero-role { font-size: .92rem; }
    .kw:not(:last-child)::after { margin: 0 .45rem; }
}

/* Theme and language changes are animated only after an explicit action, so
   the first paint stays crisp and free of colour flashes. */
html.is-theme-changing *,
html.is-theme-changing *::before,
html.is-theme-changing *::after {
    transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-duration: .36s;
    transition-timing-function: ease;
}

:where([data-zh][data-en]) { transition: opacity .14s ease; }
html.is-lang-changing :where([data-zh][data-en]) { opacity: 0; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .44s;
    animation-timing-function: cubic-bezier(.2, .72, .24, 1);
}

@keyframes sectionReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .card:not(.hero) {
            animation: sectionReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 24%;
        }
    }
}

/* --------------------------------------------------- 14. motion + print */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero-photo:hover .profile-photo,
    .portal-list a:hover { transform: none; }
}

@media print {
    #matrix-bg, .site-nav, .reasoning-path { display: none; }
    body { background: #fff; }
    .page, .site-footer { border: 0; max-width: none; box-shadow: none; }
    .card { padding: 0 0 1rem; }
}