/* 第二批学术小传：叶秀山（戏台漆色）、张卜天（校样）、蒋澈（标本台纸）、刘铮（肌肤与屏幕）。
   同一套版式：左边目录，右边一张长纸；四种皮肤只换颜色、字体和几处小记号。 */

:root {
  --bar: 54px;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
.dp--jc {
  --bg: #d5dcd2; --sheet: #f8f8f3; --ink: #1f1c17; --ink-2: #504c44; --ink-3: #847f74; --rule: rgba(31, 28, 23, .16);
  --acc: #2b675f; --acc-2: rgba(43, 103, 95, .12); --mark: #b0261c; --hl: rgba(195, 140, 39, .22);
  --head: "ZCOOL XiaoWei", "Noto Serif SC", serif; --head-w: 400; --num: "IM Fell English", "Noto Serif SC", serif;
  --dot: radial-gradient(circle, rgba(31, 28, 23, .085) 1px, transparent 1.6px) 0 0 / 22px 22px;
}
.dp--zh {
  --bg: #cdd0d1; --sheet: #fbfaf6; --ink: #161616; --ink-2: #4f4f4a; --ink-3: #85857d; --rule: rgba(22, 22, 22, .16);
  --acc: #161616; --acc-2: rgba(225, 35, 26, .08); --mark: #e1231a; --hl: rgba(255, 225, 0, .4);
  --head: "Noto Serif SC", serif; --head-w: 900; --num: "EB Garamond", "Noto Serif SC", serif;
  --dot: none;
}
.dp--ye {
  --bg: #16100d; --sheet: #1d1511; --ink: #efe6d6; --ink-2: #cbbfa9; --ink-3: #998c78; --rule: rgba(239, 230, 214, .16);
  --acc: #d2a24a; --acc-2: rgba(210, 162, 74, .12); --mark: #d2a24a; --hl: rgba(184, 50, 42, .35);
  --head: "Noto Serif SC", serif; --head-w: 900; --num: "Noto Serif SC", serif;
  --dot: radial-gradient(ellipse at 50% 0%, rgba(184, 50, 42, .14), transparent 60%);
}
.dp--li {
  --bg: #120e1b; --sheet: #1a1526; --ink: #ece7f1; --ink-2: #b7aec6; --ink-3: #867d97; --rule: rgba(236, 231, 241, .14);
  --acc: #f99a1e; --acc-2: rgba(249, 154, 30, .12); --mark: #ef5b2b; --hl: rgba(194, 47, 107, .35);
  --head: "Noto Sans SC", sans-serif; --head-w: 900; --num: "Bricolage Grotesque", "Noto Sans SC", sans-serif;
  --dot: none; --body: "Noto Sans SC", "PingFang SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.dp { margin: 0; background: var(--bg) var(--dot); color: var(--ink); font-family: var(--body, var(--serif)); font-size: 18px; line-height: 1.95; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.dp--ye { background-attachment: fixed; }
a { color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--acc); }
.dp--ye a, .dp--li a { color: var(--acc); }
.dp--ye a:hover, .dp--li a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
::selection { background: var(--hl); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 6px 12px; }
.skip:focus { top: 12px; }

/* ---------- 顶栏 ---------- */
.dbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: var(--bar); padding: 0 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dbar__logo { display: grid; place-items: center; width: 30px; height: 32px; color: var(--ink); }
.dbar__logo svg { width: 18px; height: 20px; }
.dbar__t { margin: 0; font-size: 15px; line-height: 1.3; }
.dbar__t a { color: var(--ink); text-decoration: none; font-weight: 700; }
.dbar__t span { color: var(--ink-3); margin-left: 10px; }
.dbar__nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.dbar__nav a { text-decoration: none; color: var(--ink-2); }
.dbar__nav a:hover { color: var(--acc); }
.dbar__toc { display: none; margin-left: auto; font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 1px solid var(--ink); padding: 3px 12px; cursor: pointer; }
.dbar__toc[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.dbar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mark); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- 版式 ---------- */
.dlay { display: grid; grid-template-columns: 230px minmax(0, 860px); justify-content: center; gap: 52px; max-width: 1300px; margin: 0 auto; padding: 0 32px; }
.dtoc { position: sticky; top: var(--bar); align-self: start; max-height: calc(100vh - var(--bar)); overflow: auto; padding: 40px 4px 40px 0; scrollbar-width: thin; }
.dtoc__h { margin: 0 0 12px; font-size: 14px; letter-spacing: .1em; color: var(--ink-3); }
.dtoc ol { list-style: none; margin: 0; padding: 0; }
.dtoc a { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; padding: 6px 8px 6px 0; text-decoration: none; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; border-left: 2px solid transparent; padding-left: 10px; }
.dtoc a i { font-style: normal; font-family: var(--num); font-size: 14px; color: var(--ink-3); }
.dtoc a:hover { color: var(--ink); }
.dtoc a[aria-current="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--mark); background: var(--acc-2); }
.dtoc a[aria-current="true"] i { color: var(--mark); }

.dmain { min-width: 0; margin: 32px 0 80px; padding: 8px 64px 64px; background: var(--sheet); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 20px 46px -30px rgba(0, 0, 0, .5); }
.dp--ye .dmain { background: transparent; box-shadow: none; padding: 8px 0 64px; }
.dhero { padding: 52px 0 30px; border-bottom: 1px solid var(--ink); }
.dhero__who { margin: 0 0 14px; font-size: 15px; color: var(--ink-3); }
.dhero__who span { margin-left: 10px; font-family: var(--num); font-style: italic; }
.dhero h1 { margin: 0; font-family: var(--head); font-weight: var(--head-w); font-size: clamp(42px, 5.6vw, 78px); line-height: 1.12; letter-spacing: .02em; text-wrap: balance; }
.dhero__sub { margin: 16px 0 10px; font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--ink-2); }
.dhero__m { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-3); }
.lead { max-width: 36em; margin: 34px 0 0; }
.lead p { font-size: 19.5px; line-height: 1.95; margin: 0 0 1em; }

.dsec { max-width: 36em; margin-top: 80px; }
.dsec--list { max-width: 46em; }
.dsec__h { margin: 0 0 20px; padding-top: 18px; border-top: 1px solid var(--ink); }
.dsec__k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 14px; color: var(--ink-3); }
.dsec__n { font-family: var(--head); font-weight: var(--head-w); font-size: 34px; line-height: 1; color: var(--mark); }
.dsec h2 { margin: 6px 0 8px; font-family: var(--head); font-weight: var(--head-w); font-size: clamp(27px, 2.8vw, 36px); line-height: 1.35; letter-spacing: .01em; }
.dsec__card { font-size: 14.5px; }
.dsec__b p { margin: 0 0 1.15em; }
.ap { font-family: var(--num); }
.dsec__b .notes .nb { margin: 0; text-align: left; }
/* 师承一节末尾：师门里另外五位的学术名片 */
.dsec__b .dkin { margin: 1.6em 0 0; padding: .9em 0 0; border-top: 1px solid var(--rule); font-size: 15.5px; line-height: 1.9; color: var(--ink-2); text-align: left; }
.dkin b { display: block; font-size: 13.5px; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.dkin a { color: var(--acc); font-weight: 600; }
.dsec h3 { margin: 30px 0 10px; padding-bottom: 6px; font-size: 18px; line-height: 1.5; font-weight: 700; border-bottom: 1px solid var(--rule); }

/* 皮肤的小记号 */
.dp--jc .dsec__k span { padding: 0 6px; border: 1px solid var(--ink-3); font-size: 12.5px; line-height: 1.6; }
.dp--jc .dsec__n { font-family: var(--num); font-size: 30px; }
.dp--zh .dsec h2::before { content: "‸"; margin-right: 6px; font-family: var(--num); font-weight: 400; color: var(--mark); }
.dp--zh .dhero { border-bottom: 3px double var(--ink); }
.dp--ye .dhero { border-bottom-color: var(--acc); }
.dp--ye .dsec__h { border-top-color: var(--rule); }
.dp--ye .dsec__h::before { content: ""; display: block; width: 44px; height: 3px; margin: -20px 0 16px; background: var(--acc); }
.dp--li .dsec__n { font-family: var(--num); font-weight: 300; font-size: 38px; color: var(--acc); }
.dp--li .dmain { background: transparent; box-shadow: none; padding: 8px 0 64px; }
.dp--li .dhero { border-bottom: 0; background: linear-gradient(90deg, #0b0820, #2b1572 20%, #7a1f8f 38%, #c22f6b 52%, #ef5b2b 66%, #f99a1e 78%, #fdd34a 90%, #fff6d8) left bottom / 100% 4px no-repeat; }
.dp--li .fnpop { background: #241c34; }

/* 注释引用 */
.fnr { font-size: 13px; line-height: 0; vertical-align: 9px; margin: 0 1px 0 2px; }
a.fn { font-family: var(--num); color: var(--mark); text-decoration: none; padding: 0 2px; border-bottom: 1px solid currentColor; }
a.fn:hover, a.fn:focus-visible, a.fn.is-on { background: var(--mark); color: var(--sheet); border-color: var(--mark); outline: none; }
.dp--ye a.fn:hover, .dp--ye a.fn:focus-visible, .dp--ye a.fn.is-on, .dp--li a.fn:hover, .dp--li a.fn:focus-visible, .dp--li a.fn.is-on { color: var(--bg); }

/* 清单与参考资料 */
.dlist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.dlist li { position: relative; padding-left: 22px; margin: 0 0 .55em; font-size: 16.5px; line-height: 1.8; }
.dlist li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--mark); }
.notes { list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.8; }
.notes li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); }
.notes li:target { background: var(--hl); }
.notes .nn { font-family: var(--num); font-size: 17px; line-height: 1.5; color: var(--mark); text-align: right; }
.notes .nb { margin: 0; text-align: left; overflow-wrap: anywhere; }
.notes .back { margin-left: 10px; font-size: 13px; white-space: nowrap; }

.fine { margin-top: 80px; max-width: 46em; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 14px; line-height: 1.85; color: var(--ink-3); }
.fine p { margin: 0 0 10px; }
.fine__go { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px !important; font-size: 15px; }

/* 弹出注释 */
.fnpop { position: fixed; z-index: 80; left: 0; top: 0; width: min(440px, calc(100vw - 24px)); max-height: 50vh; overflow: auto; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .25); padding: 12px 16px 14px; font-size: 14.5px; line-height: 1.8; }
.dp--ye .fnpop { background: #2a1f19; }
.fnpop__n { display: block; font-family: var(--num); font-weight: 400; font-size: 15px; color: var(--mark); margin-bottom: 4px; }
.fnpop__t { overflow-wrap: anywhere; }
.fnpop__go { display: inline-block; margin-top: 6px; font-size: 13.5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1040px) {
  .dlay { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  .dbar__toc { display: inline-block; }
  .dbar__nav { margin-left: 0; }
  .dtoc { display: none; position: fixed; z-index: 45; top: var(--bar); left: 0; right: 0; max-height: min(72vh, calc(100vh - var(--bar))); padding: 18px 24px 22px; background: var(--bg); border-bottom: 1px solid var(--ink); box-shadow: 0 18px 30px rgba(0, 0, 0, .16); }
  body.toc-open .dtoc { display: block; }
  .dmain { padding: 8px 40px 56px; }
}
@media (max-width: 640px) {
  :root { --bar: 52px; }
  body.dp { font-size: 17px; }
  .dbar { padding: 0 14px; gap: 10px; }
  .dbar__t span { display: none; }
  .dbar__nav { gap: 14px; font-size: 14px; }
  .dbar__nav .hide-s { display: none; }
  .dlay { padding: 0 10px; }
  .dmain { margin-top: 12px; padding: 4px 16px 40px; }
  .dp--ye .dmain, .dp--li .dmain { padding: 4px 6px 40px; }
  .dhero { padding: 34px 0 24px; }
  .dhero__sub { font-size: 19px; }
  .lead p { font-size: 17.5px; text-align: left; }
  .dsec { margin-top: 64px; }
  .dsec__b p { text-align: left; }
}
@media print {
  .dbar, .dtoc, .fnpop, .skip, .dsec__card { display: none !important; }
  body.dp, html { background: #fff; color: #000; }
  .dlay { display: block; padding: 0; }
  .dmain { box-shadow: none; padding: 0; margin: 0; background: #fff; }
}

/* 海德格尔：林中路。雾色底，云杉墨绿；红色只给注释号 */
.dp--he {
  --bg: #e1e6df; --sheet: #f6f7f2; --ink: #17201b; --ink-2: #47534c; --ink-3: #727e77; --rule: rgba(23, 32, 27, .16);
  --acc: #2c4636; --acc-2: rgba(44, 70, 54, .1); --mark: #2c4636; --hl: rgba(138, 154, 121, .3);
  --head: "Noto Serif SC", serif; --head-w: 900; --num: "Alegreya", "Noto Serif SC", serif;
  --dot: none;
}
.dp--he .dsec__n { font-family: var(--num); font-weight: 500; font-size: 36px; font-variant-numeric: oldstyle-nums; color: var(--acc); }
.dp--he .dhero__who span { font-family: var(--num); }
.dp--he .dsec__h { border-top-color: var(--rule); }
.dp--he .dsec__h::before { content: ""; display: block; width: 52px; height: 2px; margin: -19px 0 16px; background: repeating-linear-gradient(90deg, var(--acc) 0 4px, transparent 4px 9px); }
.dp--he #rector .dsec__n, .dp--he #rector .dsec__h::before { color: #b0281f; }
.dp--he #rector .dsec__h::before { background: repeating-linear-gradient(90deg, #b0281f 0 4px, transparent 4px 9px); }