:root{
  --paper:oklch(96.2% .018 85);
  --paper-deep:oklch(92.5% .026 82);
  --ink:oklch(24% .018 60);
  --ink-soft:oklch(45% .02 65);
  --ink-faint:oklch(62% .02 70);
  --rule:oklch(84% .025 75);
  --seal:oklch(50% .17 30);
  --u:8px;
  --serif:"Noto Serif TC","Songti TC","PMingLiU","MingLiU",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.75 var(--serif)}
a{color:inherit}

/* ---- cover ---- */
.cover{position:relative;min-height:min(90vh,800px);display:grid;
  grid-template-columns:auto minmax(0,24em) 1fr;grid-template-rows:1fr auto;gap:0 calc(var(--u)*4);
  padding:calc(var(--u)*8) max(calc(var(--u)*3),env(safe-area-inset-right)) calc(var(--u)*7) max(calc(var(--u)*6),env(safe-area-inset-left));
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(90deg,oklch(95.5% .02 85 / .92) 0%,oklch(95.5% .02 85 / .55) 30%,transparent 52%),
    url(/assets/cover.webp) right bottom/cover no-repeat,
    var(--paper-deep)}
.cover__title{grid-column:1;grid-row:1 / 3;align-self:start;writing-mode:vertical-rl;margin:0;font-weight:900;
  font-size:clamp(64px,11vw,136px);line-height:1;letter-spacing:.12em;color:var(--ink)}
.cover__sub{grid-column:2;grid-row:1;align-self:start;writing-mode:vertical-rl;font-size:16px;letter-spacing:.5em;color:var(--ink-soft)}
.cover__lede{grid-column:2;grid-row:2;align-self:end}
.cover__lede p{margin:0 0 calc(var(--u)*2);color:var(--ink);font-size:17px;text-wrap:pretty}
.cover__count{display:flex;gap:calc(var(--u)*3);margin:0;padding:0;list-style:none;font-size:15px;color:var(--ink-soft)}
.cover__count b{display:block;font-size:30px;font-weight:900;color:var(--ink);line-height:1.2}
.seal{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-top:.35em;border-radius:6px;
  background:var(--seal);color:oklch(97% .01 80);font-size:.36em;letter-spacing:0;line-height:1;
  box-shadow:inset 0 0 0 3px oklch(97% .01 80 / .35)}

/* ---- catalogue ---- */
main{max-width:1120px;margin:0 auto;padding:calc(var(--u)*6) max(calc(var(--u)*2),env(safe-area-inset-left)) calc(var(--u)*10)}
.bu{display:grid;grid-template-columns:150px 1fr;gap:calc(var(--u)*4);padding:calc(var(--u)*6) 0;border-top:1px solid var(--rule)}
.bu:first-of-type{border-top:0}
.bu__head h2{margin:0;font-size:44px;font-weight:900;line-height:1.1;letter-spacing:.08em}
.bu__head p{margin:calc(var(--u)*1.5) 0 0;font-size:14px;line-height:1.7;color:var(--ink-faint);text-wrap:pretty}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 calc(var(--u)*4);margin:0;padding:0;list-style:none}
.book a{display:block;padding:calc(var(--u)*2) 0 calc(var(--u)*2.5);border-bottom:1px solid var(--rule);text-decoration:none}
.book__name{display:flex;align-items:baseline;justify-content:space-between;gap:var(--u);font-size:26px;font-weight:900;line-height:1.3;letter-spacing:.06em}
.book__name::after{content:"→";font-size:16px;font-weight:400;color:var(--ink-faint);transition:transform .2s,color .2s}
.book__meta{display:block;margin-top:2px;font-size:13px;letter-spacing:.06em;color:var(--seal)}
.book__line{display:block;margin-top:calc(var(--u)*.75);font-size:15px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
.book a:hover .book__name::after,.book a:focus-visible .book__name::after{transform:translateX(4px);color:var(--seal)}
.book a:hover .book__name{color:var(--seal)}
.book a:focus-visible{outline:2px solid var(--seal);outline-offset:4px;border-radius:2px}

footer{max-width:1120px;margin:0 auto;padding:calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*8);border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-faint);text-align:center}
footer p{margin:0}

@media (max-width:760px){
  body{font-size:16px}
  .cover{min-height:auto;display:flex;flex-direction:column;gap:calc(var(--u)*2);
    padding:calc(56.25vw + var(--u)*1) max(calc(var(--u)*2.5),env(safe-area-inset-right)) calc(var(--u)*5) max(calc(var(--u)*2.5),env(safe-area-inset-left));
    background:
      linear-gradient(180deg,transparent calc(56.25vw - 70px),var(--paper) 56.25vw),
      url(/assets/cover-sm.webp) top center/100% auto no-repeat,
      var(--paper)}
  .cover__title{order:-1;writing-mode:horizontal-tb;font-size:clamp(56px,17vw,96px);letter-spacing:.06em;display:flex;align-items:center;gap:.25em}
  .cover__sub{writing-mode:horizontal-tb;order:-2;letter-spacing:.3em;font-size:14px}
  .seal{margin-top:0}
  .bu{grid-template-columns:1fr;gap:calc(var(--u)*2);padding:calc(var(--u)*5) 0}
  .bu__head{display:flex;align-items:baseline;gap:calc(var(--u)*2);flex-wrap:wrap}
  .bu__head h2{font-size:34px}
  .bu__head p{margin:0}
  .books{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.book__name::after{transition:none}}

/* ---- language switch, English page ---- */
.lang{position:absolute;top:calc(var(--u)*2.5);right:max(calc(var(--u)*3),env(safe-area-inset-right));z-index:2;
  padding:6px 14px;border:1px solid var(--rule);border-radius:999px;background:oklch(97% .015 85 / .85);
  font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
.lang:hover,.lang:focus-visible{border-color:var(--seal);color:var(--seal)}
.lang:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
html[lang="en"]{--latin:"EB Garamond","Noto Serif TC",Georgia,serif}
html[lang="en"] body{font-family:var(--latin);font-size:19px;line-height:1.6}
.cover--en{grid-template-columns:minmax(0,36em) 1fr;grid-template-rows:auto 1fr auto}
.cover--en .cover__sub{grid-column:1;grid-row:1;writing-mode:horizontal-tb;letter-spacing:.18em;font-size:15px;text-transform:uppercase}
.cover--en .cover__title{grid-column:1;grid-row:2;align-self:center;writing-mode:horizontal-tb;letter-spacing:0;
  font-size:clamp(52px,6.6vw,92px);line-height:1.02;font-weight:600}
.cover--en .cover__title small{display:block;margin-top:.35em;font:900 .34em/1.2 var(--serif);letter-spacing:.3em;color:var(--seal)}
.cover--en .cover__lede{grid-column:1;grid-row:3;max-width:32em}
.cover--en .cover__lede p{font-size:19px}
html[lang="en"] .bu__head h2{font-size:38px;font-weight:600;letter-spacing:0}
html[lang="en"] .bu__head h2 span{display:block;font:900 20px/1.4 var(--serif);letter-spacing:.2em;color:var(--seal)}
html[lang="en"] .book__name{font-size:24px;font-weight:600;letter-spacing:0}
html[lang="en"] .book__meta{font-size:14px;letter-spacing:.02em}
html[lang="en"] .book__meta b{font:900 15px/1 var(--serif);letter-spacing:.08em;margin-right:.4em}
html[lang="en"] .book__line{font-size:17px}
.guide{max-width:1120px;margin:0 auto;padding:calc(var(--u)*6) max(calc(var(--u)*2),env(safe-area-inset-left)) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:calc(var(--u)*5)}
.guide h2{margin:0 0 calc(var(--u)*1.5);font-size:28px;font-weight:600}
.guide p,.guide li{font-size:18px;color:var(--ink-soft);text-wrap:pretty}
.guide ol{margin:0;padding-left:1.2em}
.guide li{margin-bottom:calc(var(--u)*.75)}
.guide li a{color:var(--ink);text-decoration-color:var(--seal);text-underline-offset:3px}
@media (max-width:760px){
  .lang{top:calc(var(--u)*1.5);right:calc(var(--u)*1.5)}
  .cover--en .cover__title{order:-1;font-size:clamp(44px,12vw,64px)}
  .cover--en .cover__sub{order:-2}
  html[lang="en"] body{font-size:18px}
}

/* ---- people network ---- */
.netsec{max-width:1200px;margin:0 auto;padding:calc(var(--u)*7) max(calc(var(--u)*2),env(safe-area-inset-left)) calc(var(--u)*2)}
.netsec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--u) calc(var(--u)*4)}
.netsec h2{margin:0;font-size:36px;font-weight:900;letter-spacing:.06em}
html[lang="en"] .netsec h2{font-weight:600;letter-spacing:0}
.netsec__lede{margin:var(--u) 0 0;max-width:46em;font-size:16px;color:var(--ink-soft);text-wrap:pretty}
html[lang="en"] .netsec__lede{font-size:18px}
.netsec{--c-zhou:oklch(42% .05 60);--c-ru:oklch(50% .17 30);--c-dao:oklch(50% .09 190);--c-mo:oklch(58% .13 75);
  --c-fa:oklch(44% .08 265);--c-za:oklch(52% .1 140);--c-shi:oklch(45% .07 45);--c-wen:oklch(46% .12 330);
  --l-teach:oklch(28% .02 60);--l-family:oklch(50% .17 30);--l-influence:oklch(50% .09 190);--l-critique:oklch(60% .16 45);
  --l-text:oklch(52% .1 140);--l-source:oklch(48% .07 45);--l-records:oklch(60% .02 70);--l-met:oklch(55% .02 70)}
.net{position:relative;margin-top:calc(var(--u)*3)}
.net__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:6px;background:oklch(97.5% .012 85)}
.net svg{display:block;width:100%;min-width:900px;height:auto;font-family:var(--serif)}
.net-era{fill:transparent}.net-era--alt{fill:oklch(93.5% .02 82 / .55)}
.net-era__label{font-size:15px;fill:var(--ink-faint);letter-spacing:.2em}
html[lang="en"] .net-era__label{font-family:var(--latin);letter-spacing:.04em}
.net-link__hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.net-link__line{fill:none;stroke-width:1.6;pointer-events:none;transition:opacity .15s}
.net-link--teach .net-link__line{stroke:var(--l-teach);stroke-width:2.2}
.net-link--family .net-link__line{stroke:var(--l-family);stroke-width:2.2;stroke-dasharray:1 0}
.net-link--influence .net-link__line{stroke:var(--l-influence)}
.net-link--critique .net-link__line{stroke:var(--l-critique);stroke-dasharray:6 4}
.net-link--text .net-link__line{stroke:var(--l-text)}
.net-link--source .net-link__line{stroke:var(--l-source);stroke-dasharray:10 3 2 3}
.net-link--records .net-link__line{stroke:var(--l-records);stroke-dasharray:1.5 3.5;stroke-width:1.4}
.net-link--met .net-link__line{stroke:var(--l-met);stroke-dasharray:4 3}
.net-arrow--teach{fill:var(--l-teach)}.net-arrow--influence{fill:var(--l-influence)}.net-arrow--critique{fill:var(--l-critique)}
.net-arrow--text{fill:var(--l-text)}.net-arrow--source{fill:var(--l-source)}.net-arrow--records{fill:var(--l-records)}
.net-node{cursor:pointer;outline:none}
.net-node__hit{fill:transparent}
.net-node__dot{stroke:oklch(98% .01 85);stroke-width:2.5;transition:r .15s}
.net-node--zhou .net-node__dot{fill:var(--c-zhou)}.net-node--ru .net-node__dot{fill:var(--c-ru)}.net-node--dao .net-node__dot{fill:var(--c-dao)}
.net-node--mo .net-node__dot{fill:var(--c-mo)}.net-node--fa .net-node__dot{fill:var(--c-fa)}.net-node--za .net-node__dot{fill:var(--c-za)}
.net-node--shi .net-node__dot{fill:var(--c-shi)}.net-node--wen .net-node__dot{fill:var(--c-wen)}
.net-node__name{font-size:15px;font-weight:900;fill:var(--ink);paint-order:stroke;stroke:oklch(97.5% .012 85);stroke-width:4px;stroke-linejoin:round}
html[lang="en"] .net-node__name{font-family:var(--latin);font-weight:600;font-size:15px}
.net-node__sub{font-size:11px;fill:var(--ink-faint);paint-order:stroke;stroke:oklch(97.5% .012 85);stroke-width:3px}
.net-node:hover .net-node__dot,.net-node:focus-visible .net-node__dot,.net-node.is-on .net-node__dot{r:11}
.net-node:focus-visible .net-node__dot{stroke:var(--ink);stroke-width:2}
.net.is-focus .net-node:not(.is-on),.net.is-focus .net-link:not(.is-on){opacity:.13}
.net.is-focus .net-link.is-on .net-link__line{stroke-width:2.8}
.net-card{position:absolute;z-index:5;width:min(360px,calc(100% - 16px));max-height:min(70vh,520px);overflow:auto;
  padding:calc(var(--u)*2) calc(var(--u)*2.5);border:1px solid var(--rule);border-radius:8px;background:oklch(98.5% .01 85);
  box-shadow:0 8px 28px oklch(25% .02 60 / .18);font-size:14px;line-height:1.65;color:var(--ink-soft)}
html[lang="en"] .net-card{font-size:16px;line-height:1.5}
.net-card h3{margin:0 24px 2px 0;font-size:22px;font-weight:900;color:var(--ink);line-height:1.3}
html[lang="en"] .net-card h3{font-weight:600}
.net-card h3 span{font-size:15px;font-weight:400;color:var(--ink-faint)}
.net-card h3 .net-card__arrow{color:var(--seal)}
.net-card p{margin:0 0 var(--u)}
.net-card__meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--seal)}
.net-card__books a{color:var(--ink);text-decoration-color:var(--seal);text-underline-offset:3px}
.net-card__rel{margin:var(--u) 0 0;padding:var(--u) 0 0;border-top:1px solid var(--rule);list-style:none}
.net-card__rel li{position:relative;margin:0 0 6px;padding-left:22px}
.net-card__rel li .net-sw{position:absolute;left:0;top:.7em}
.net-card__rel b{color:var(--ink);font-weight:600;margin-right:.25em}
.net-card__rel span{display:block;font-size:.92em}
.net-card__x{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;background:none;font-size:22px;line-height:1;color:var(--ink-faint);cursor:pointer}
.net-card__x:hover,.net-card__x:focus-visible{color:var(--seal)}
.net-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.net-dot--zhou{background:var(--c-zhou)}.net-dot--ru{background:var(--c-ru)}.net-dot--dao{background:var(--c-dao)}.net-dot--mo{background:var(--c-mo)}
.net-dot--fa{background:var(--c-fa)}.net-dot--za{background:var(--c-za)}.net-dot--shi{background:var(--c-shi)}.net-dot--wen{background:var(--c-wen)}
.net-sw{display:inline-block;width:18px;height:0;border-top:2px solid;flex:none;vertical-align:middle}
.net-sw--teach{border-color:var(--l-teach)}.net-sw--family{border-color:var(--l-family)}.net-sw--influence{border-color:var(--l-influence)}
.net-sw--critique{border-top-style:dashed;border-color:var(--l-critique)}.net-sw--text{border-color:var(--l-text)}
.net-sw--source{border-top-style:dashed;border-color:var(--l-source)}.net-sw--records{border-top-style:dotted;border-color:var(--l-records)}
.net-sw--met{border-top-style:dashed;border-color:var(--l-met)}
.net-legend{display:flex;flex-wrap:wrap;gap:6px calc(var(--u)*2.5);margin:calc(var(--u)*1.5) 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink-soft)}
html[lang="en"] .net-legend{font-size:15px}
.net-legend li{display:inline-flex;align-items:center;gap:6px}
.net-hint{margin:var(--u) 0 0;font-size:13px;color:var(--ink-faint)}
html[lang="en"] .net-hint{font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){
  .netsec h2{font-size:30px}
  .net-card{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;max-height:60vh}
}