/* Ink 墨 · China. Grey xuan paper, blue-black ink, mineral blue and green, red only in seals.
   A hanging scroll for the hero, a handscroll read right to left, album leaves, vertical titles. */
.page-cn { --silk: #C9D0CF; --wood: #3B2A20; }
[data-theme="dark"] .page-cn { --silk: #23282A; --wood: #6B4E3A; }
.page-cn h1, .page-cn h3, .page-cn .sh h2 { font-family: "Alegreya", "Ma Shan Zheng", serif; }
html[lang="zh-CN"] .page-cn h1, html[lang="zh-CN"] .page-cn h3, html[lang="zh-CN"] .page-cn .sh h2 { font-family: "Ma Shan Zheng", serif; }
.page-cn .face-no, .page-cn .era-no { font-size: 15px; color: var(--dim); margin: 0 0 6px; display: flex; gap: 14px; }

/* hero: a hanging scroll between a grand character and the text */
.hero-cn { min-height: calc(100vh - var(--bar-h)); max-width: 1280px; margin: 0 auto; padding: 4vh clamp(18px, 4vw, 56px) 6vh; display: grid; grid-template-columns: minmax(110px, 170px) minmax(280px, 400px) 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.hc-mark { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: 10px; position: relative; align-self: stretch; padding-top: 6vh; }
.hc-mark .big { font-family: "Zhi Mang Xing", "Ma Shan Zheng", serif; font-size: clamp(120px, 15vw, 210px); line-height: .9; writing-mode: vertical-rl; }
.hc-mark .vsub { font-family: "Ma Shan Zheng", serif; font-size: 26px; writing-mode: vertical-rl; letter-spacing: .3em; color: var(--dim); margin-top: 12px; }
.hc-seal { position: absolute; width: 58px; height: 58px; left: 8px; bottom: 16%; }
.hc-scroll { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .12)); }
.hc-scroll .rod { height: 16px; width: calc(100% + 34px); border-radius: 8px; background: linear-gradient(var(--wood), color-mix(in srgb, var(--wood) 60%, #000)); position: relative; }
.hc-scroll .rod.top { height: 11px; width: calc(100% + 8px); }
.hc-scroll .rod.bot::before, .hc-scroll .rod.bot::after { content: ""; position: absolute; top: -3px; width: 14px; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--wood) 70%, #000); }
.hc-scroll .rod.bot::before { left: -6px; } .hc-scroll .rod.bot::after { right: -6px; }
.hc-scroll .mount { width: 100%; padding: 46px 18px 58px; background: var(--silk); position: relative; }
.hc-scroll .mount::before, .hc-scroll .mount::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.hc-scroll .mount::before { top: 30px; } .hc-scroll .mount::after { bottom: 40px; }
.hc-paint { width: 100%; aspect-ratio: 9 / 16; max-height: 66vh; }
.hc-text h1 { font-size: clamp(70px, 9vw, 128px); line-height: .95; margin: 0 0 14px; }
.hc-text .deck { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.35; max-width: 22ch; margin-bottom: 30px; }
.hc-motto { display: grid; gap: 4px; color: var(--dim); font-size: 15px; max-width: 32ch; }
.hc-motto .han { font-family: "Ma Shan Zheng", serif; font-size: 34px; color: var(--fg); letter-spacing: .12em; }
@media (max-width: 900px) {
  .hero-cn { grid-template-columns: 90px 1fr; grid-template-areas: "m t" "s s"; }
  .hc-mark { grid-area: m; padding-top: 0; } .hc-text { grid-area: t; } .hc-scroll { grid-area: s; width: min(100%, 380px); justify-self: center; }
  .hc-mark .big { font-size: 96px; } .hc-mark .vsub { display: none; } .hc-seal { display: none; }
}

/* intro */
.intro-cn { padding: 70px clamp(18px, 4vw, 56px) 50px; }
.intro-cn .intro-in { max-width: 1100px; margin: 0 auto; padding-left: min(18vw, 230px); }
.intro-cn .lede p:first-child::first-line { letter-spacing: .01em; }
@media (max-width: 900px) { .intro-cn .intro-in { padding-left: 0; } }

/* the handscroll: right to left */
.tl-cn { padding: 60px 0 40px; }
.tl-cn .sh { padding: 0 clamp(18px, 4vw, 56px); max-width: calc(var(--measure) + 120px); margin-left: auto; margin-right: auto; }
.handscroll { direction: rtl; overflow-x: auto; overflow-y: hidden; cursor: grab; padding: 26px 0 30px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.handscroll.dragging { cursor: grabbing; }
.hs-in { display: flex; width: max-content; background: var(--silk); padding: 22px 0; box-shadow: 0 16px 40px rgba(0, 0, 0, .1); }
.hs-end { width: 34px; flex: 0 0 34px; background: linear-gradient(90deg, color-mix(in srgb, var(--wood) 70%, #000), var(--wood) 40%, color-mix(in srgb, var(--wood) 60%, #000)); margin: -22px 0; border-radius: 6px; }
.hs-era { position: relative; display: block; width: 900px; height: 300px; text-decoration: none; color: var(--fg); direction: ltr; border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.hs-paint { position: absolute; inset: 0; }
.hs-paint .plate { width: 100%; height: 100%; }
.hs-col { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: row-reverse; gap: 6px; align-items: flex-start; }
.hs-col b { font-family: "Ma Shan Zheng", serif; font-weight: 400; font-size: 30px; letter-spacing: .08em; }
.hs-col .yrs { font-size: 13px; color: var(--dim); text-orientation: mixed; letter-spacing: .04em; }
.hs-en { position: absolute; right: 22px; bottom: 14px; font-size: 14px; color: var(--dim); }
.hs-era:hover .hs-col b { color: var(--acc); }
@media (max-width: 760px) { .hs-era { width: 620px; height: 210px; } .hs-col b { font-size: 24px; } }

/* an era: an album leaf */
.era-cn { max-width: 1240px; margin: 0 auto; padding: 90px clamp(18px, 4vw, 56px) 30px; }
.leaf { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.leaf.flip { grid-template-columns: 1fr minmax(260px, 420px); }
.leaf.flip .leaf-pic { order: 2; }
.leaf-pic { padding: 16px; background: var(--silk); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.leaf-pic .era-plate { width: 100%; aspect-ratio: 4 / 5; }
.era-h { display: flex; gap: 22px; align-items: flex-start; margin: 10px 0 22px; }
.era-v { font-family: "Ma Shan Zheng", serif; font-weight: 400; font-size: clamp(42px, 5vw, 66px); line-height: 1; writing-mode: vertical-rl; letter-spacing: .06em; }
.era-cn h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.era-cn .era-sum { max-width: var(--measure); font-size: 1.05em; }
@media (max-width: 860px) { .leaf, .leaf.flip { grid-template-columns: 1fr; } .leaf.flip .leaf-pic { order: 0; } .leaf-pic { max-width: 420px; } }

/* nodes: vertical columns between ruled lines, like a manuscript with 界栏 */
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 46px; border-right: 1px solid var(--rule); }
.nc-cn { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 10px 8px; padding: 18px 16px 20px; border-left: 1px solid var(--rule); min-height: 300px; position: relative; transition: background-color .3s; }
.nc-cn:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.nc-cn .nc-v { grid-column: 2; grid-row: 1 / span 2; writing-mode: vertical-rl; font-family: "Ma Shan Zheng", serif; font-size: 30px; line-height: 1.05; letter-spacing: .06em; max-height: 7.4em; }
.nc-cn .nc-v.long { font-size: 24px; max-height: 9.4em; }
.nc-cn .mk { grid-column: 1; grid-row: 1; width: 46px; height: 46px; justify-self: start; }
.nc-cn .nc-body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.nc-cn .nc-en { font-weight: 700; font-size: 17px; line-height: 1.25; }
.nc-cn .nc-yr { font-size: 14px; color: var(--dim); }
.nc-cn .nc-k { font-size: 14.5px; line-height: 1.45; color: var(--dim); }
.nc-cn.seen::after { content: ""; position: absolute; top: 10px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc2); }

/* glossary: a copybook grid */
.gloss-cn, .gal-cn { max-width: 1240px; margin: 0 auto; padding: 90px clamp(18px, 4vw, 56px) 0; }
.terms-cn { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.tm-cn { display: grid; gap: 6px; padding: 20px 18px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color .3s; align-content: start; }
.tm-cn:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.tm-cn .tz { font-family: "Ma Shan Zheng", serif; font-size: 46px; line-height: 1.1; }
.tm-cn .tn { font-weight: 700; font-size: 16px; line-height: 1.3; }
.tm-cn .tg { font-size: 14px; color: var(--dim); line-height: 1.45; }

/* gallery: pictures mounted on silk */
.gal-cn .gimg { background: var(--silk); padding: 10px; height: 240px; }
.gal-cn .gimg img { object-fit: contain; }

/* drawer in ink */
.drawer[data-face="cn"] .dw-title { font-family: "Alegreya", "Ma Shan Zheng", serif; }
html[lang="zh-CN"] .drawer[data-face="cn"] .dw-title { font-family: "Ma Shan Zheng", serif; }
.drawer[data-face="cn"] .dw-term.han { font-family: "Ma Shan Zheng", serif; }
.drawer[data-face="cn"] .dw-mark .plate { width: 84px; height: 84px; }
.drawer[data-face="cn"] .q-orig { font-family: "Ma Shan Zheng", serif; font-size: 1.7em; }