/* 吴国盛 · 学术名片 · 蓝晒天穹
   一张天空的蓝晒照片：从封闭世界到无限宇宙，再回到大地。
   普鲁士蓝打底，白线是“晒”出来的；黄绿是没曝光的铁盐药水，只在显影和高亮时出现；结尾用茶水调色，蓝变成土色。 */

:root {
  --pb: #0b2858;
  --pb-2: #12346f;
  --cy: #1d4f9c;
  --cy-2: #2f63b0;
  --wt: #f2efe6;
  --wt-2: rgba(242, 239, 230, .74);
  --wt-3: rgba(242, 239, 230, .44);
  --line: rgba(242, 239, 230, .22);
  --iron: #d6cf74;
  --tea: #5a3f2c;
  --tea-2: #8a6748;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --didot: "GFS Didot", "Didot", "Bodoni 72", "Noto Serif SC", serif;
  --tone: 0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.wu {
  margin: 0; min-height: 100vh;
  background: var(--pb);
  color: var(--wt);
  font-family: var(--serif);
  font-size: 18px; line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wt); text-decoration-color: var(--wt-3); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--iron); }
:focus-visible { outline: 2px solid var(--iron); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--wt); color: var(--pb); padding: 6px 12px; }
.skip:focus { top: 12px; }
.lat { font-family: var(--didot); }

/* ---------- 天穹：固定在背后的画布 ---------- */
.sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("../img/wu/grain.png"); opacity: .55; mix-blend-mode: screen; }
.tone { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(90, 63, 44, 0) 0%, rgba(90, 63, 44, .9) 100%); opacity: var(--tone); mix-blend-mode: color; }

/* ---------- 顶栏 ---------- */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 28px; background: linear-gradient(180deg, rgba(11, 40, 88, .92), rgba(11, 40, 88, 0)); }
.bar__logo { display: grid; place-items: center; width: 30px; height: 32px; color: var(--wt); }
.bar__logo svg { width: 18px; height: 20px; }
.bar__t { font-size: 15px; line-height: 1.3; letter-spacing: .04em; }
.bar__t b { font-weight: 700; }
.bar__t span { color: var(--wt-2); margin-left: 10px; }
.bar nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--wt-2); }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--wt); }

/* ---------- 年轮：右侧的黄道刻度 ---------- */
.orbit { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 0; }
.orbit::before { content: ""; position: absolute; right: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.orbit a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 30px; padding-right: 0; text-decoration: none; color: var(--wt-3); font-family: var(--didot); font-size: 14px; letter-spacing: .04em; }
.orbit a::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--wt-3); background: var(--pb); flex: none; transition: background .3s, border-color .3s; }
.orbit a span { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; }
.orbit:hover a span, .orbit a:focus-visible span, .orbit a.is-on span { opacity: 1; transform: none; }
.orbit a.is-on { color: var(--wt); }
.orbit a.is-on::after { background: var(--iron); border-color: var(--iron); box-shadow: 0 0 0 5px rgba(214, 207, 116, .16); }
@media (prefers-reduced-motion: reduce) { .orbit a::after, .orbit a span { transition: none; } }

/* ---------- 版式 ---------- */
.scr { position: relative; min-height: 100vh; min-height: 100svh; padding: 112px 92px 96px 7vw; display: grid; align-content: center; }
.inner { width: min(1200px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.scr:nth-of-type(even) .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.scr:nth-of-type(even) .plate { order: -1; }
.txt { max-width: 34em; }
.yr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; color: var(--wt-2); }
.yr b { font-family: var(--didot); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.01em; color: var(--wt); font-variant-numeric: lining-nums; }
.yr span { font-size: 15px; letter-spacing: .06em; }
.txt h2 { font-weight: 900; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.25; margin: 0 0 24px; letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere; }
.txt p { margin: 0 0 18px; }
.txt .lede { color: var(--wt); }
.say { margin: 30px 0 26px; padding: 0 0 0 26px; border-left: 2px solid var(--iron); }
.say p { margin: 0; font-size: 23px; line-height: 1.7; font-weight: 600; }
.say cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: var(--wt-2); }
.stars { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--wt-2); }
.stars li::before { content: "✦"; color: var(--iron); margin-right: 6px; font-size: 12px; position: relative; top: -1px; }
.works { margin: 0 0 22px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 4px; font-size: 15.5px; line-height: 1.75; }
.works a { text-decoration: none; }
.works a:hover { text-decoration: underline; text-decoration-color: var(--iron); }
.works small { color: var(--wt-2); font-size: 14px; margin-left: 6px; }
.ask { display: grid; gap: 10px; margin: 0 0 24px; }
.ask a { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; text-decoration: none; padding: 10px 14px 10px 10px; border: 1px solid var(--line); background: rgba(11, 40, 88, .45); transition: border-color .2s, background .2s; }
.ask a:hover, .ask a:focus-visible { border-color: var(--iron); background: rgba(11, 40, 88, .75); }
.ask a i { font-style: normal; color: var(--iron); font-size: 15px; line-height: 1.9; }
.ask a b { font-weight: 600; font-size: 17px; line-height: 1.6; }
.ask a small { grid-column: 2; color: var(--wt-2); font-size: 13.5px; line-height: 1.6; }
.ask__h { margin: 0 0 8px; font-size: 14px; letter-spacing: .12em; color: var(--wt-2); }
.go { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--wt-2); color: var(--wt); text-decoration: none; font-size: 15px; line-height: 1.5; background: transparent; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--wt); color: var(--pb); }
.btn--solid { background: var(--wt); color: var(--pb); border-color: var(--wt); }
.btn--solid:hover { background: var(--iron); border-color: var(--iron); }

/* ---------- 晒图：蓝晒版画 ---------- */
.plate { margin: 0; justify-self: center; width: 100%; max-width: 560px; }
.print { position: relative; background: var(--iron); overflow: hidden; -webkit-mask: url("../img/wu/deckle.png") center / 100% 100% no-repeat; mask: url("../img/wu/deckle.png") center / 100% 100% no-repeat; transition: background-color 1.8s ease-out; padding: 6.5%; }
.print img { display: block; width: 100%; height: auto; mix-blend-mode: screen; opacity: .35; filter: blur(.6px); transition: opacity 1.8s ease-out, filter 1.8s ease-out; }
.plate.dev .print { background: var(--cy); }
.plate.dev .print img { opacity: 1; filter: none; }
.print::after { content: ""; position: absolute; inset: 0; background: url("../img/wu/grain.png"); mix-blend-mode: screen; opacity: .6; pointer-events: none; }
.label { margin: 16px 6% 0; font-size: 13.5px; line-height: 1.75; color: var(--wt-2); }
.label b { color: var(--wt); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .print, .print img { transition: none; } }

/* ---------- 首屏 ---------- */
.hero .inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; }
.hero h1 { margin: 0; font-weight: 900; font-size: clamp(76px, 10vw, 150px); line-height: .98; letter-spacing: .02em; }
.hero .en { display: block; margin: 14px 0 26px; font-family: var(--didot); font-style: italic; font-size: 24px; letter-spacing: .02em; color: var(--wt-2); }
.hero .who { margin: 0 0 6px; font-size: 22px; line-height: 1.7; font-weight: 600; }
.hero .facts { margin: 0 0 22px; font-size: 16px; line-height: 1.85; color: var(--wt-2); max-width: 36em; }
.feats { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 16px; line-height: 1.7; }
.feats li { display: grid; grid-template-columns: 22px 1fr; }
.feats li::before { content: "✦"; color: var(--iron); font-size: 13px; line-height: 2.1; }
.shelf { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.shelf a { display: grid; grid-template-rows: auto auto; width: 82px; text-decoration: none; }
.shelf .cov { height: 132px; border: 1px solid var(--wt-3); display: grid; place-items: center; padding: 8px 0; background: rgba(29, 79, 156, .55); writing-mode: vertical-rl; font-weight: 700; font-size: 14px; letter-spacing: .08em; transition: background .2s, border-color .2s; }
.shelf a:hover .cov, .shelf a:focus-visible .cov { background: var(--wt); color: var(--pb); border-color: var(--wt); }
.shelf small { margin-top: 6px; text-align: center; font-family: var(--didot); font-size: 14px; color: var(--wt-2); }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font-size: 15px; }
/* 师门的学术名片：老师一位、学生四位，名字直接是链接 */
.kin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.7; }
.kin b { font-weight: 600; color: var(--wt-2); font-size: 14px; letter-spacing: .06em; margin-right: 4px; }
.kin span { color: var(--wt-3); font-size: 13.5px; }
.kin span + a { margin-left: -8px; }
.kin a { text-decoration-color: var(--iron); }
.net .kin { margin: 4px 0 20px; }
.note { font-size: 13.5px; line-height: 1.75; color: var(--wt-3); max-width: 38em; margin: 0; }
.sphere { position: relative; justify-self: center; width: min(520px, 100%); aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.sphere:active { cursor: grabbing; }
.sphere svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sphere .r { fill: none; stroke: var(--wt); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sphere .r--thin { stroke-width: .8; stroke-opacity: .55; }
.sphere .r--band { stroke-width: 7; stroke-opacity: .25; }
.sphere .r--fix { stroke-width: 2.2; }
.sphere .tick { stroke: var(--wt); stroke-width: 1; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
.sphere .earth { fill: var(--pb); stroke: var(--wt); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sphere .ax { stroke: var(--iron); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sphere__hint { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-size: 13px; color: var(--wt-3); }
.cue { position: absolute; left: 7vw; bottom: 34px; font-size: 14px; color: var(--wt-2); letter-spacing: .06em; }

/* ---------- 师承星图 ---------- */
.net .inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.constel { width: 100%; }
.constel svg { width: 100%; height: auto; display: block; overflow: visible; }
.constel .ln { stroke: var(--wt); stroke-opacity: .28; stroke-width: 1; vector-effect: non-scaling-stroke; }
.constel .ln.on { stroke: var(--iron); stroke-opacity: .9; }
.constel .st { cursor: pointer; }
.constel .st circle { fill: var(--wt); transition: r .2s; }
.constel .st text { fill: var(--wt); font-family: var(--serif); font-size: 15px; }
.constel .st .k { fill: var(--wt-2); font-size: 12px; }
.constel .st.g-src text { fill: var(--wt-2); }
.constel .st:hover circle, .constel .st:focus-visible circle, .constel .st.on circle { fill: var(--iron); }
.constel .st:focus { outline: none; }
.constel .st.me circle { fill: var(--iron); }
.constel .st.me text { font-size: 20px; font-weight: 900; }
.constel__cap { margin: 12px 0 0; min-height: 3.4em; font-size: 15.5px; line-height: 1.75; color: var(--wt-2); border-top: 1px solid var(--line); padding-top: 12px; }
.constel__cap b { color: var(--wt); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--wt-3); margin: 10px 0 0; padding: 0; list-style: none; }

/* ---------- 结尾：安居大地 ---------- */
/* 结尾一屏是单栏居中；它排在偶数位，要压过 .scr:nth-of-type(even) .inner 的两栏 */
.earth .inner, .scr.earth:nth-of-type(even) .inner { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.earth .txt { max-width: 40em; }
.earth h2 { font-size: clamp(40px, 4.6vw, 66px); }
.earth .say { border-left: 0; padding: 0; }
.earth .say p { font-size: 26px; }
.earth .go { justify-content: center; }
.earth .ask { width: min(34em, 100%); margin: 0 auto 28px; text-align: left; }
.earth .fine { margin: 46px auto 0; max-width: 46em; text-align: left; font-size: 13.5px; line-height: 1.8; color: var(--wt-2); border-top: 1px solid var(--line); padding-top: 18px; }
.earth .fine p { margin: 0 0 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .scr { padding: 104px 64px 80px 5vw; }
  .inner, .hero .inner, .net .inner, .scr:nth-of-type(even) .inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .scr:nth-of-type(even) .plate { order: 0; }
  .plate { max-width: 520px; justify-self: start; }
  .sphere { width: min(420px, 100%); justify-self: start; }
}
@media (max-width: 720px) {
  body.wu { font-size: 17px; }
  .bar { padding: 0 14px; gap: 10px; height: 52px; }
  .bar__t span { display: none; }
  .bar nav { gap: 14px; font-size: 14px; }
  .bar nav .hide-s { display: none; }
  .orbit { display: none; }
  .scr { padding: 88px 18px 64px; min-height: auto; }
  .hero { min-height: 100vh; min-height: 100svh; }
  .yr b { font-size: 48px; }
  .say p { font-size: 20px; }
  .shelf a { width: 64px; }
  .shelf .cov { height: 118px; font-size: 13px; letter-spacing: .05em; }
  .cue { display: none; }
}
.constel .st[data-href] circle { stroke: var(--iron); stroke-width: 2.5; stroke-opacity: .9; }
/* 追问署名里的关系标签：老师、学生、前辈…… */
.ask .rel { display: inline-block; margin-right: 7px; padding: 0 6px; border: 1px solid var(--iron); color: var(--iron); font-size: 12px; line-height: 1.6; letter-spacing: .08em; vertical-align: 1px; }

/* ---------- 群聊（对话录）：追问下面的入口，点开是多人群聊窗口（窗口在 dlg.css，这里只配色） ---------- */
/* 入口是一枚枚晒在蓝图上的圆章：头像叠放，后面是议题和人数 */
.wu .av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--av-bg); color: var(--av-fg);
  font: 700 11px/1 var(--serif); font-style: normal; letter-spacing: 0; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset; }
.wu .talks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.wu .talk { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; max-width: 100%;
  padding: 7px 18px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11, 40, 88, .45); color: var(--wt); text-decoration: none;
  transition: border-color .2s, background .2s; }
.wu .talk:hover, .wu .talk:focus-visible { border-color: var(--iron); background: rgba(11, 40, 88, .75); }
.wu .talk__av { grid-row: 1 / span 2; display: flex; align-items: center; }
.wu .talk__av .av { width: 28px; height: 28px; font-size: 10.5px; margin-left: -9px; box-shadow: 0 0 0 2px var(--pb); }
.wu .talk__av .av:first-child { margin-left: 0; }
.wu .talk__av b { margin-left: 5px; font-size: 12px; font-weight: 600; color: var(--wt-2); }
.wu .talk__t { font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.wu .talk__n { font-size: 12.5px; line-height: 1.45; color: var(--wt-2); }
.wu .talk__n::before { content: "✦"; margin-right: 6px; color: var(--iron); font-size: 11px; }
.wu .earth .talks { justify-content: center; }
.wu .net .kin--wm { margin-top: -10px; padding-top: 0; border-top: 0; }
/* 群聊窗口：普鲁士蓝的纸，铁盐黄绿作强调 */
body.wu .dlg { --dlg-bg: #0b2858; --dlg-paper: #163a78; --dlg-ink: #f2efe6; --dlg-ink-2: #cfd5e1; --dlg-ink-3: #b8c2d6; --dlg-rule: rgba(242, 239, 230, .2);
  --dlg-me: #d6cf74; --dlg-me-ink: #0b2858; --dlg-acc: #d6cf74; --dlg-mod: rgba(242, 239, 230, .09); --dlg-font: var(--serif); }

/* 首屏师门行末尾的“全部学生与博士后”入口；师承一屏列全名单 */
.kin .kin__all { font-size: 13.5px; color: var(--wt-2); text-decoration-style: dotted; text-underline-offset: 4px; }
.kin .kin__all::after { content: " ↓"; color: var(--wt-3); }
.kin--full { gap: 4px 12px; font-size: 15px; }