/* 吴门 · 雅典学院 与 对话录：共用的“希腊气质”（.wm 作用域）。
   大理石与羊皮纸的底，黑绘陶瓶的黑与赭红，一点赭金；版画是主角。
   希腊文用 GFS Didot，拉丁大写用 Cinzel，拉丁正文用 Cormorant Garamond，中文用 Noto Serif SC。 */
.wm {
  --marble: #f6f2ea; --marble-2: #ede5d7; --paper: #fbf8f2;
  --ink: #17110d; --ink-2: #463a30; --ink-3: #6b5e52;
  --terra: #b4532a; --terra-2: #93401e; --terra-3: #d27a45;
  --gold: #c8a04a; --gold-2: #8a6420; --gold-3: #e4cc8e;
  --night: #1b1410; --night-2: #261c16; --on-night: #efe5d3; --on-night-2: #c9b9a2;
  --rule: rgba(23, 17, 13, .16); --rule-2: rgba(23, 17, 13, .34);
  --gr: "GFS Didot", "Noto Serif", "Times New Roman", serif;
  --caps: "Cinzel", "GFS Didot", serif;
  --lat: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  --zh: "Noto Serif SC", "Songti SC", "STSong", serif;
  --gut: clamp(16px, 4vw, 56px);
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' width='32' height='28'%3E%3Cpath d='M2 26V2h24v16H10v-8h8M0 26h32' fill='none' stroke='%2317110d' stroke-width='3.2'/%3E%3C/svg%3E");
  --meander-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' width='32' height='28'%3E%3Cpath d='M2 26V2h24v16H10v-8h8M0 26h32' fill='none' stroke='%23c8a04a' stroke-width='3.2'/%3E%3C/svg%3E");
  /* c3.css 的变量 */
  --bg: var(--marble); --paper-c3: var(--paper); --acc: var(--terra); --acc-ink: #fff;
  --head: var(--zh); --body: var(--zh);
  --bar-bg: rgba(246, 242, 234, .94); --bar-ink: var(--ink);
  --chip-bg: rgba(255, 255, 255, .6); --chip-ring: var(--marble);
  color: var(--ink);
}
.wm :focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.wm .gr, .wm [lang="grc"] { font-family: var(--gr); }
.wm i[lang="la"], .wm i[lang="en"] { font-family: var(--lat); font-size: 1.12em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 页头：沿用名片的结构，换成大理石与回纹 ---------- */
.wm .c3bar { border-bottom: 0; font-family: var(--zh); }
.wm .c3bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: var(--meander) repeat-x left center / auto 6px; opacity: .55; }
.wm .c3bar__t a { letter-spacing: .06em; }
.wm .c3bar__t span::before { content: "·"; margin-right: 10px; opacity: .6; }
.wm .c3bar__prog { background: var(--gold); height: 2px; bottom: -8px; z-index: 1; }

/* ---------- 通用的节标题 ---------- */
.wm-h { max-width: 860px; margin: 0 auto; padding: 0 var(--gut); text-align: center; }
.wm-k { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font: 400 15px/1 var(--gr); letter-spacing: .42em; color: var(--terra-2); }
.wm-k::before, .wm-k::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .55; }
.wm-k::after { margin-left: -.42em; }
.wm-h h2 { margin: 12px 0 0; font: 900 clamp(34px, 4.6vw, 56px)/1.15 var(--zh); letter-spacing: .14em; padding-left: .14em; }
.wm-lede { margin: 16px auto 0; max-width: 40em; font-size: 16.5px; line-height: 1.9; color: var(--ink-2); text-align: left; }
.wm-h--dark .wm-k { color: var(--gold-3); }
.wm-h--dark h2 { color: var(--on-night); }
.wm-h--dark .wm-lede { color: var(--on-night-2); }
.wm-drag { display: none; }

/* ---------- 门楣 ---------- */
.wm-gate { position: relative; padding: calc(var(--bar) + 40px) var(--gut) 72px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #fbf8f2 0%, var(--marble) 55%, #efe8dc 100%); }
.wm-gate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--meander) repeat-x left center / auto 12px; opacity: .8; }
.wm-ped { display: block; width: min(1060px, 100%); height: auto; margin: 0 auto; color: var(--ink); overflow: visible; }
.wm-ped__rake { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: miter; }
.wm-ped__rake--in { fill: rgba(255, 255, 255, .55); stroke-width: 1; }
.wm-ped__ins path, .wm-ped__ins circle { fill: none; stroke: var(--ink); stroke-width: 6.2; stroke-linejoin: miter; }
.wm-ped__cor { fill: rgba(255, 255, 255, .5); stroke: var(--ink); stroke-width: 1.4; }
.wm-ped__dent rect { fill: var(--ink); }
.wm-ped__fri { fill: var(--terra); }
.wm-ped__arc { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.wm-ped__acro ellipse { fill: var(--ink); }
.wm-ped__acro path { stroke: var(--ink); stroke-width: 2; }
.wm-title { margin: 30px 0 0; display: flex; flex-direction: column; align-items: center; font-weight: 400; }
.wm-title__k { font: 600 15px/1 var(--zh); letter-spacing: .9em; padding-left: .9em; color: var(--terra-2); }
.wm-title__zh { margin-top: 18px; font: 900 clamp(88px, 13vw, 172px)/.95 var(--zh); letter-spacing: .16em; padding-left: .16em; }
.wm-title__sub { margin: 18px 0 0; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: .16em; color: var(--ink-2); }
.wm-gate__txt { position: relative; max-width: 1060px; margin: 56px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 72px; text-align: left;
  font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.wm-gate__txt::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: var(--rule-2); }
.wm-gate__col > p { margin: 0 0 14px; }
.wm-gate .gr { font-size: 1.12em; color: var(--ink); }
.wm-ins { margin: 18px 0 !important; padding: 16px 12px 14px; text-align: center; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)); }
.wm-ins .gr { display: block; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--ink); letter-spacing: .02em; }
.wm-ins__zh { display: block; margin-top: 6px; font-size: 14px; letter-spacing: .5em; padding-left: .5em; color: var(--ink-3); }
.wm-fine { font-size: 13.5px; line-height: 1.8; color: var(--ink-3); }
.wm-rule { margin: 22px 0 0 !important; padding: 14px 18px; background: var(--ink); color: var(--marble); font-size: 17px; line-height: 1.7; box-shadow: 0 0 0 4px var(--marble), 0 0 0 5px var(--ink); }
.wm-rule b { display: block; font-size: 12px; letter-spacing: .4em; color: var(--gold-3); font-weight: 600; margin-bottom: 2px; }
.wm-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.wm-jump a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 11px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--ink); background: rgba(255, 255, 255, .45); font-size: 15px; font-weight: 700; letter-spacing: .1em; transition: background .2s, color .2s; }
.wm-jump a span { font: 400 10px/1 var(--gr); letter-spacing: .14em; color: var(--terra-2); font-weight: 400; }
.wm-jump a:hover { background: var(--ink); color: var(--marble); }
.wm-jump a:hover span { color: var(--gold-3); }

/* ---------- 画中人：版画挂在暗色的展厅里 ---------- */
.wm-fig { position: relative; padding: 80px 0 0; background: var(--night); color: var(--on-night);
  background-image: radial-gradient(90% 60% at 50% 40%, #2b1f17 0%, var(--night) 70%); }
.wm-fig a { color: inherit; }
.wm-frame { --tb: 112px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1760px; margin: 28px auto 0; padding: 12px var(--gut) 18px; }
.wm-frame > * { min-width: 0; }
.wm-box { position: relative; width: 100%; max-width: calc((100svh - var(--bar) - var(--tb) - 28px) * 1.4302); margin: 0 auto; }
@media (min-width: 1200px) {
  .wm-frame { --tb: 0px; grid-template-columns: 180px minmax(0, 1fr); align-items: center; min-height: calc(100svh - var(--bar)); gap: 28px; }
}
.wm-stage { position: relative; aspect-ratio: 3870 / 2706; background: #3a2a1f center / cover no-repeat; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(228, 204, 142, .45), 0 0 0 7px var(--night-2), 0 0 0 8px rgba(228, 204, 142, .25), 0 30px 80px rgba(0, 0, 0, .6); }
.wm-stage picture, .wm-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-hot, .wm-lead { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-lead { pointer-events: none; overflow: visible; transition: opacity .25s; }
.wm-lead .l1 { stroke: rgba(23, 17, 13, .7); stroke-width: 2.6; }
.wm-lead .l2 { stroke: rgba(251, 244, 230, .92); stroke-width: 1; }
.wm-lead circle { fill: #fbf4e6; stroke: rgba(23, 17, 13, .75); stroke-width: 1; }
.wm-p polygon { fill: rgba(200, 160, 74, 0); stroke: rgba(228, 204, 142, 0); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  pointer-events: all; cursor: pointer; transition: fill .18s, stroke .18s; }
.wm-p:focus { outline: none; }
.wm-p:hover polygon, .wm-p:focus-visible polygon, .wm-p.is-on polygon { fill: rgba(228, 204, 142, .16); stroke: var(--gold); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
.wm-p:focus-visible polygon { stroke-width: 3.4; }
.wm-p--st polygon { cursor: help; }
.wm-p--st:hover polygon, .wm-p--st.is-on polygon { stroke-dasharray: 6 5; }
.wm-wash { fill: #120d0a; opacity: 0; pointer-events: none; transition: opacity .35s; }
.wm-stage:not([data-filter="all"]) .wm-wash { opacity: .66; }
.wm-stage:not([data-filter="all"]) .wm-p.is-in polygon { stroke: rgba(228, 204, 142, .75); stroke-dasharray: 5 4; }
.wm-stage:not([data-filter="all"]) .wm-p.is-in:hover polygon, .wm-stage:not([data-filter="all"]) .wm-p.is-in.is-on polygon { stroke: var(--gold); stroke-dasharray: none; }
.wm-p.is-ping polygon { animation: wm-ping 1.6s ease-out 2; }
@keyframes wm-ping { 0% { stroke: var(--gold); fill: rgba(228, 204, 142, .45); } 100% { stroke: var(--gold); fill: rgba(228, 204, 142, .08); } }

/* 名签 */
.wm-tags { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; overflow-anchor: none; }
.wm-tag { position: absolute; left: 0; top: 0; padding: 0 5px 1px; white-space: nowrap; pointer-events: auto; cursor: pointer;
  font: 600 12px/18px var(--zh); color: var(--ink); background: rgba(251, 245, 233, .95); border: 1px solid rgba(23, 17, 13, .6); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: opacity .25s, background .15s, color .15s; }
.wm-tag.is-m { border-style: dashed; }
.wm-tag.is-anon { font-weight: 400; color: var(--ink-3); background: rgba(251, 245, 233, .78); }
.wm-tag.is-st { font-style: normal; color: var(--terra-2); }
.wm-tag.is-on { background: var(--ink); color: var(--gold-3); border-color: var(--gold); z-index: 2; }
.wm-tag.is-out { opacity: .26; }
.wm-tag[hidden] { display: none; }
.wm-stage[data-mode="none"] .wm-tags, .wm-stage[data-mode="none"] .wm-lead { opacity: 0; visibility: hidden; }

/* 工具条：桌面在左边，窄屏在上面 */
.wm-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 26px; color: var(--on-night); }
.no-js .wm-tools { display: none; }
.no-js .wm-frame { grid-template-columns: minmax(0, 1fr); }
.wm-tools__grp { min-width: 0; }
.wm-tools__h { margin: 0 0 8px; font: 600 11.5px/1 var(--zh); letter-spacing: .4em; color: var(--gold-3); }
.wm-seg, .wm-filt { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-tools button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px;
  padding: 7px 12px; border: 1px solid rgba(239, 229, 211, .34); border-radius: 2px; background: rgba(255, 255, 255, .02); color: var(--on-night);
  font: 500 14px/1.2 var(--zh); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.wm-tools button:hover { border-color: var(--gold-3); }
.wm-tools button b { font: 600 12.5px/1 var(--lat); opacity: .8; }
.wm-tools button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.wm-tools button:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }
.wm-tools__legend { display: none; flex-wrap: wrap; align-items: center; margin: 0; gap: 8px; font-size: 12px; color: var(--on-night-2); }
.wm-lg--x { opacity: .9; }
.wm-frame[data-mode="then"] .wm-tools__legend { display: flex; }
.wm-lg { padding: 0 6px; border: 1px solid var(--on-night-2); border-radius: 2px; }
.wm-lg--m { border-style: dashed; }
.wm-tools__hint { margin: 0; flex-basis: 100%; font-size: 12.5px; line-height: 1.7; color: var(--on-night-2); }
.wm-hot:focus { outline: none; }
.wm-tools__hint .tap { display: none; }
@media (hover: none) { .wm-tools__hint .hov { display: none; } .wm-tools__hint .tap { display: inline; } }
@media (min-width: 1200px) {
  .wm-tools { flex-direction: column; flex-wrap: nowrap; gap: 26px; }
  .wm-tools__grp { width: 100%; }
  .wm-seg, .wm-filt { flex-direction: column; }
  .wm-tools button { width: 100%; }
  .wm-tools__legend { display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; margin-top: -12px; }
  .wm-frame[data-mode="then"] .wm-tools__legend { visibility: visible; }
}

/* 悬停卡片（桌面）与底部卡片（手机） */
.wm-card { position: absolute; left: 0; top: 0; z-index: 40; width: 304px; padding: 14px 16px 12px; pointer-events: none;
  background: var(--paper); color: var(--ink); border: 1px solid var(--gold); border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(251, 248, 242, .9), 0 0 0 5px rgba(23, 17, 13, .5), 0 24px 50px rgba(0, 0, 0, .55); font-size: 14px; line-height: 1.7;
  opacity: 0; transition: opacity .14s; }
.wm-card.is-on { opacity: 1; }
.wm-c__hd { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.wm-c__hd .av { width: 48px; height: 48px; font-size: 15px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.wm-c__n { margin: 0; font: 900 21px/1.25 var(--zh); letter-spacing: .04em; }
.wm-c__n span { display: block; margin-top: 1px; font: italic 500 14.5px/1.3 var(--lat); letter-spacing: 0; color: var(--ink-3); }
.wm-c__m { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.wm-c__rel { padding: 0 6px; border: 1px solid var(--terra-2); color: var(--terra-2); border-radius: 2px; line-height: 1.55; }
.wm-c__o { margin: 9px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.wm-c__o b { display: inline-block; margin-right: 6px; padding: 0 5px; background: var(--ink); color: var(--gold-3); font-size: 11px; font-weight: 600; letter-spacing: .1em; border-radius: 1px; }
.wm-c__w { margin: 8px 0 0; font-size: 14px; line-height: 1.75; }
.wm .wm-c__go { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--terra); color: #fff; font-size: 13.5px; font-weight: 600; border-radius: 2px; text-decoration: none; }
.wm .wm-card .wm-c__go { background: transparent; color: var(--terra-2); padding: 0; }
.wm-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; width: min(100%, 560px); margin: 0 auto; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink); border-top: 2px solid var(--gold); box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
  transform: translateY(105%); visibility: hidden; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
.wm-sheet.is-open { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.wm-sheet__in { position: relative; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 561px) { .wm-sheet { border: 1px solid var(--gold); border-bottom: 0; border-radius: 6px 6px 0 0; } }
.wm-sheet__in::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 2px; background: var(--rule-2); }
.wm-sheet__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; font: 24px/1 var(--zh); color: var(--ink-2); cursor: pointer; }
.wm-sheet .wm-c__hd { padding-right: 36px; }
.wm-skip { position: absolute; left: 8px; top: 8px; z-index: 50; padding: 8px 14px; background: var(--gold); color: var(--ink) !important; font-weight: 700; text-decoration: none; }
.wm-skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wm-cap { max-width: 1100px; margin: 10px auto 0; padding: 0 var(--gut) 56px; font-size: 13px; line-height: 1.85; color: var(--on-night-2); }
.wm-cap a { text-decoration-color: rgba(228, 204, 142, .5); }

/* 名单：像沃尔帕托的人物索引，印在纸上 */
.wm-names { position: relative; padding: 56px var(--gut) 64px; background: var(--marble-2); color: var(--ink); }
.wm-names::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--meander) repeat-x left center / auto 10px; opacity: .55; }
.wm-names__hd { max-width: 1240px; margin: 0 auto 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 22px; }
.wm-names__h { margin: 0; font: 900 28px/1.3 var(--zh); letter-spacing: .14em; }
.wm-names__la { margin: 0; font: 600 15px/1.3 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--terra-2); }
.wm-names__note { grid-column: 1 / -1; max-width: 50em; margin: 6px 0 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.wm-names__note i { font-size: 1.1em; }
.wm-names__cols { max-width: 1240px; margin: 0 auto; columns: 3 300px; column-gap: 44px; }
.wm-n__g { margin: 0 0 26px; }
.wm-n__g h3 { break-after: avoid; }
.wm-n__g li { break-inside: avoid; }
@media (min-width: 1100px) { .wm-n__g { break-inside: avoid; } }   /* 三栏时每组不拆开；两栏时允许拆开，左右才平衡 */
.wm-n__g h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 17px/1.3 var(--zh); letter-spacing: .1em; }
.wm-n__g h3 span { font: 400 19px/1 var(--gr); color: var(--terra-2); letter-spacing: 0; }
.wm-n__g h3 small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.wm-n__g ul { list-style: none; margin: 0; padding: 0; }
.wm-n__g li { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px dotted var(--rule-2); }
.wm-n__p { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: none; text-decoration: none; padding: 4px 0; }
.wm-n__p .av { width: 30px; height: 30px; font-size: 10.5px; }
.wm-n__p b { font-size: 15.5px; }
.wm-n__p small { font: 500 13px/1 var(--lat); color: var(--ink-3); }
.wm-n__p:hover b { color: var(--terra-2); text-decoration: underline; }
.wm .wm-n__loc { margin-left: auto; min-width: 0; text-align: right; text-decoration: none; font-size: 12px; line-height: 1.45; color: var(--ink-3); padding: 4px 0; }
.wm-n__loc span { display: block; }
.wm-n__loc i { font-style: normal; color: var(--terra-2); }
.wm .wm-n__loc:hover span { color: var(--ink); text-decoration: underline; }

/* ---------- 柱廊 ---------- */
.wm-stoa { padding: 88px 0 56px; background: var(--marble); }
.wm-stoa > .wm-h { margin-bottom: 56px; }
.wm-stoa__g { max-width: 1320px; margin: 0 auto 64px; padding: 0 var(--gut); }
.wm-ent { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px 13px; background: var(--marble-2);
  border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); }
.wm-ent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 7px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 15px); opacity: .85; }
.wm-ent__n { font: 400 30px/1 var(--gr); color: var(--terra); }
.wm-ent h3 { margin: 0; font: 900 26px/1.15 var(--zh); letter-spacing: .14em; }
.wm-ent__g { font: 400 15px/1 var(--gr); letter-spacing: .3em; color: var(--ink-3); }
.wm-ent__c { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.wm-cols { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 12px; }
.wm-col { flex: 0 0 160px; }
.wm-col { position: relative; display: flex; flex-direction: column; padding: 0 0 22px; isolation: isolate; }
.wm-col::before { content: ""; position: absolute; z-index: -1; left: 9%; right: 9%; top: 78px; bottom: 16px;
  background: repeating-linear-gradient(90deg, rgba(23, 17, 13, .075) 0 1px, rgba(255, 255, 255, .55) 1px 3px, transparent 3px 11px), linear-gradient(90deg, #ece4d6, #fbf8f2 35%, #fbf8f2 65%, #e6dccc);
  box-shadow: inset 1px 0 0 rgba(23, 17, 13, .22), inset -1px 0 0 rgba(23, 17, 13, .22); }
.wm-col::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; border-top: 1.5px solid var(--ink); border-bottom: 6px solid var(--ink);
  background: linear-gradient(var(--marble-2), var(--marble-2)) center 3px / 92% 1px no-repeat, #f4eee4; border-radius: 6px 6px 0 0 / 4px 4px 0 0; }
.wm-col__in { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; flex: 1 0 auto; padding: 0 12% 4px; }
.wm-col__cap { align-self: stretch; display: flex; flex-direction: column; align-items: center; margin: 0 -14%; }
.wm-col__cap .av { width: 58px; height: 58px; font-size: 17px; box-shadow: 0 0 0 3px var(--marble), 0 0 0 4.5px var(--ink); transition: box-shadow .2s, transform .2s; }
.wm-col__cap::after { content: ""; align-self: stretch; height: 9px; margin-top: 9px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: linear-gradient(90deg, transparent 6%, rgba(23, 17, 13, .12) 6% 7%, transparent 7% 93%, rgba(23, 17, 13, .12) 93% 94%, transparent 94%), #f1ebe1; }
.wm-col__n { margin-top: 12px; font: 700 18px/1.3 var(--zh); letter-spacing: .08em; text-align: center; }
.wm-col__rel { margin-top: 4px; padding: 0 6px; font-size: 11px; line-height: 1.6; color: var(--terra-2); border: 1px solid currentColor; border-radius: 2px; }
.wm-col__y { margin-top: 3px; font: 500 14px/1.3 var(--lat); letter-spacing: .05em; color: var(--ink-3); }
.wm-col__who { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); text-align: center; }
.wm .wm-col__q { position: relative; display: block; margin: 8px 12% 10px; padding: 9px 0 2px; border-top: 1px solid var(--rule-2); text-decoration: none; text-align: center;
  font-size: 13.5px; line-height: 1.6; font-weight: 600; color: var(--terra-2); }
.wm-col__q::before { content: "问"; display: block; margin: -19px auto 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--marble); border: 1px solid var(--rule-2);
  font: 600 10px/16px var(--zh); color: var(--ink-3); }
.wm .wm-col__q:hover { color: var(--ink); text-decoration: underline; }
.wm-col__in:hover .av, .wm-col__in:focus-visible .av { box-shadow: 0 0 0 3px var(--marble), 0 0 0 4.5px var(--gold); transform: translateY(-2px); }
.wm-col__in:hover .wm-col__n { color: var(--terra-2); }
.wm-step { height: 24px; margin: 6px -8px 0; background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: calc(100% - 28px) 1.5px, calc(100% - 14px) 1.5px, 100% 1.5px; background-position: center 3px, center 11px, center 19px; background-repeat: no-repeat; opacity: .8; }

/* ---------- 对话录目录 ---------- */
.wm-dia { padding: 88px 0 80px; background: var(--paper); border-top: 1px solid var(--rule); }
.wm-dia > .wm-h { margin-bottom: 40px; }
.wm-heard { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.wm-heard b { font: 600 18px/1 var(--lat); color: var(--terra-2); }
.wm-more { margin: 14px 0 0; }
.wm-more a, .wm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--marble);
  text-decoration: none; font-size: 14.5px; font-weight: 600; letter-spacing: .06em; border-radius: 2px; transition: background .15s, color .15s; }
.wm-more a:hover, .wm-btn:hover { background: var(--terra-2); border-color: var(--terra-2); }
.wm-toc { list-style: none; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); columns: 2 440px; column-gap: 60px; }
.wm-toc li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.wm-toc a { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "n t av" "n k av"; align-items: center; gap: 1px 12px;
  padding: 11px 2px; min-height: 64px; text-decoration: none; color: inherit; }
.wm-toc__n { grid-area: n; font: 400 22px/1 var(--gr); color: var(--terra); text-align: right; padding-right: 4px; }
.wm-toc__t { grid-area: t; font: 700 16px/1.45 var(--zh); }
.wm-toc__k { grid-area: k; font-size: 12px; color: var(--ink-3); }
.wm-toc__k.is-real { color: var(--terra-2); font-weight: 600; }
.wm-toc__av { grid-area: av; display: flex; align-items: center; padding-left: 8px; }
.wm-toc__av .av { width: 24px; height: 24px; font-size: 9px; margin-left: -7px; box-shadow: 0 0 0 2px var(--paper); }
.wm-toc__av .av:first-child { margin-left: 0; }
.wm-toc__av b { margin-left: 4px; font: 600 12px/1 var(--lat); color: var(--ink-3); }
.wm-toc__ok { display: none; grid-area: k; justify-self: end; font-size: 11px; color: var(--gold-2); }
.wm-toc li.is-heard .wm-toc__ok { display: inline; }
.wm-toc li.is-heard .wm-toc__n { color: var(--gold-2); }
.wm-toc a:hover .wm-toc__t, .wm-toc a:focus-visible .wm-toc__t { color: var(--terra-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 谱系：黑绘陶瓶 ---------- */
.wm-gen { padding: 88px 0 72px; background: var(--marble-2); }
.wm-gen > .wm-h { margin-bottom: 40px; }
.wm-vase { padding: 0 var(--gut) 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.wm-vase__band { min-width: 1080px; max-width: 1560px; margin: 0 auto; padding: 14px 0 12px; border-radius: 22px / 14px;
  background: linear-gradient(90deg, #c4652f 0%, #cc6f38 18%, #d57b44 50%, #cc6f38 82%, #c4652f 100%);
  box-shadow: inset 0 12px 16px -8px rgba(0, 0, 0, .35), inset 0 -12px 16px -8px rgba(0, 0, 0, .4), 0 18px 40px rgba(70, 30, 10, .28); }
.wm-vase__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-vase__svg .rule { stroke: #17110d; stroke-width: 3; fill: none; }
.wm-vase__svg .rays path { fill: #17110d; }
.wm-vase__svg .e { fill: none; stroke: #17110d; stroke-width: 2.4; stroke-linecap: round; transition: stroke .15s, stroke-width .15s; }
.wm-vase__svg .e--pd { stroke-dasharray: 7 6; stroke-linecap: butt; }
.wm-vase__svg .e.is-hl { stroke: #f4e7cf; stroke-width: 3.4; }
.wm-vase__svg .e-dot { fill: #17110d; }
.wm-vase__svg .e-dot.is-hl { fill: #f4e7cf; }
.wm-vase__svg .n__d { fill: #17110d; transition: fill .15s; }
.wm-vase__svg .n__r { fill: none; stroke: #e4955f; stroke-width: 1.1; }
.wm-vase__svg .n__a { fill: #eba16f; font-family: var(--zh); font-weight: 700; text-anchor: middle; }
.wm-vase__svg .n__t { fill: #17110d; font-family: var(--zh); font-weight: 700; }
.wm-vase__svg .n--wu .n__r, .wm-vase__svg .n--ye .n__r { stroke: #f4e7cf; stroke-width: 2.4; }
.wm-vase__svg .n--wu .n__a, .wm-vase__svg .n--ye .n__a { fill: #f4e7cf; }
.wm-vase__svg .n:focus { outline: none; }
.wm-vase__svg .n:hover .n__r, .wm-vase__svg .n:focus-visible .n__r, .wm-vase__svg .n.is-hl .n__r { stroke: #f4e7cf; stroke-width: 2.4; }
.wm-vase__svg .n:focus-visible .n__d { stroke: #f4e7cf; stroke-width: 3; }
.wm-vase__svg .n:hover .n__t, .wm-vase__svg .n:focus-visible .n__t { fill: #000; text-decoration: underline; }
.wm-vase__svg .ins { font: 700 15px var(--zh); fill: #17110d; letter-spacing: .5em; }
.wm-vase__svg .legend text { font: 600 13px var(--zh); fill: #17110d; }

/* ---------- 页脚：陶瓶的黑釉 ---------- */
.wm-foot { position: relative; padding: 64px var(--gut) 72px; background: var(--ink); color: var(--on-night-2); font-size: 13.5px; line-height: 1.9; }
.wm-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 10px; background: var(--meander-gold) repeat-x left center / auto 10px; opacity: .45; }
.wm-foot__in { max-width: 860px; margin: 0 auto; }
.wm-foot__mk { margin: 12px 0 18px; text-align: center; font: 400 15px/1 var(--gr); letter-spacing: .6em; color: var(--gold); }
.wm-foot p { margin: 0 0 12px; }
.wm-foot a { color: var(--gold-3); }
.wm-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.wm-foot__nav a { padding: 8px 16px; border: 1px solid rgba(228, 204, 142, .45); text-decoration: none; color: var(--on-night); font-size: 14px; border-radius: 2px; }
.wm-foot__nav a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ---------- 群聊窗口：在本页染成陶瓶色 ---------- */
.wm .dlg { --dlg-bg: #f3ece0; --dlg-paper: #fbf8f2; --dlg-ink: #17110d; --dlg-ink-2: #4a3e34; --dlg-ink-3: #66594d; --dlg-me: #17110d; --dlg-acc: #93401e; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1199px) {
  .wm-tools__hint { margin-top: -4px; }
}
@media (max-width: 860px) {
  .wm-gate__txt { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 40px; }
  .wm-gate__txt::before { display: none; }
  .wm-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-ent__c { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .wm-gate { padding-top: calc(var(--bar) + 26px); padding-bottom: 56px; }
  .wm-title { margin-top: 18px; }
  .wm-title__k { font-size: 13px; }
  .wm-fig { padding-top: 64px; }
  .wm-frame { --tb: 0px; padding-left: 0; padding-right: 0; gap: 14px; }
  .wm-tools { padding: 0 var(--gut); gap: 10px; }
  .wm-tools__grp { width: 100%; }
  .wm-filt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  .wm-filt::-webkit-scrollbar { display: none; }
  .wm-seg button { flex: 1; justify-content: center; }
  .wm-filt button { flex: none; }
  .wm-box { max-width: none; }
  .wm-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wm-scroll::-webkit-scrollbar { display: none; }
  .wm-stage { width: max(760px, 196vw); box-shadow: none; }
  .wm-card { display: none; }
  .wm-tag { font-size: 11px; line-height: 16px; padding: 0 4px; }
  .wm-drag { display: flex; justify-content: center; position: absolute; left: 0; right: 0; bottom: 12px; z-index: 5; pointer-events: none; transition: opacity .4s; }
  .wm-drag span { padding: 6px 14px; border-radius: 999px; background: rgba(23, 17, 13, .78); color: var(--on-night); font-size: 13px; letter-spacing: .1em; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
  .wm-drag span::before { content: "← "; } .wm-drag span::after { content: " →"; }
  .wm-drag.is-gone { opacity: 0; }
  .wm-drag--vase { position: static; margin: 10px 0 0; }
  .wm-drag--vase span { background: rgba(23, 17, 13, .7); }
  .wm-cap { padding-bottom: 44px; }
  .wm-names { padding-top: 44px; }
  .wm-n__loc { max-width: 52%; }
  /* 柱廊：每组一排，左右滑动 */
  .wm-cols { display: grid; justify-content: start; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); gap: 0 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); margin: 22px calc(-1 * var(--gut)) 0; padding: 8px var(--gut) 6px; scrollbar-width: none; }
  .wm-cols::-webkit-scrollbar { display: none; }
  .wm-col { scroll-snap-align: start; flex: none; }
  .wm-ent__c::after { content: " · 左右滑动"; }
  .wm-stoa__g[data-n="1"] .wm-ent__c::after, .wm-stoa__g[data-n="2"] .wm-ent__c::after { content: none; }
  .wm-toc a { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "n t t" "n k av"; }
  .wm-toc__av { padding: 0; }
  .wm-toc__av .av { width: 22px; height: 22px; font-size: 8.5px; margin-left: -8px; }
  .wm-toc__ok { grid-area: k; }
  .wm-rule { margin-left: 5px !important; margin-right: 5px !important; }
  .wm-stoa, .wm-dia, .wm-gen { padding-top: 64px; }
  .wm-vase__band { min-width: 980px; }
}
@media print { .wm-tools, .wm-tags, .wm-lead, .wm-card, .wm-sheet { display: none !important; } .wm-fig { background: none; color: inherit; } }