/* read.css: the face pages as readings (v3). One reading layout for every face, built for legibility:
   a single measured column of sans-serif text at 18px, a contents column that follows the reader,
   a lineage map as an advance organiser, and nothing set vertically or squeezed into narrow cards.
   Faces differ in palette, display type and pictures only. */

[data-face] {
  --f-read: "Hanken Grotesk", "LXGW WenKai", var(--sys-zh);
  --f-h2: var(--f-disp); --f-h3: var(--f-disp);
  --t0: var(--acc); --t1: var(--acc2); --t2: var(--dim); --t3: var(--fg);
}
html[lang="zh-CN"] [data-face] { --f-read: "LXGW WenKai", "Hanken Grotesk", var(--sys-zh); }
/* v3: every face reads in the same legible pair (Hanken Grotesk / LXGW WenKai) in body text and small labels;
   the faces keep their own display type for headings, marks and quotations */
[data-face="one"], [data-face="cn"], [data-face="jp"], [data-face="west"], [data-face="film"] { --f-body: var(--f-read); --f-ui: "Hanken Grotesk", "LXGW WenKai", var(--sys-zh); --fs: 18px; --lh: 1.7; }
html[lang="zh-CN"] [data-face="one"], html[lang="zh-CN"] [data-face="cn"], html[lang="zh-CN"] [data-face="jp"], html[lang="zh-CN"] [data-face="west"], html[lang="zh-CN"] [data-face="film"] { --f-ui: "LXGW WenKai", "Hanken Grotesk", var(--sys-zh); --lh: 1.85; }
[data-face="cn"] { --f-h2: "Alegreya", "Ma Shan Zheng", serif; --f-h3: "Alegreya", "LXGW WenKai", serif; --t0: #2F5D7C; --t1: #4E8A72; --t2: #A0673A; --t3: #8E2B21; }
html[lang="zh-CN"] [data-face="cn"] { --f-h2: "Ma Shan Zheng", "LXGW WenKai", serif; --f-h3: "LXGW WenKai", serif; }
[data-face="jp"] { --f-h2: "Zen Old Mincho", "Noto Serif SC", serif; --f-h3: "Zen Old Mincho", "Noto Serif SC", serif; --t0: #1F4E8C; --t1: #B83A5B; --t2: #6B7A3A; --t3: #A8842F; }
html[lang="zh-CN"] [data-face="jp"] { --f-h2: "Noto Serif SC", serif; --f-h3: "Noto Serif SC", serif; }
[data-face="west"] { --f-h2: "Cinzel", "Noto Serif SC", serif; --f-h3: "Libre Caslon Text", "Noto Serif SC", serif; --t0: #1E56A0; --t1: #D13A26; --t2: #A87B12; --t3: #111111; }
html[lang="zh-CN"] [data-face="west"] { --f-h2: "Noto Serif SC", serif; --f-h3: "Noto Serif SC", serif; }
[data-face="film"] { --f-h2: "Jost", var(--sys-zh); --f-h3: "Jost", var(--sys-zh); --t0: #C4661C; --t1: #2A8C9C; --t2: #CC2E2E; --t3: #555A58; }
[data-theme="dark"] [data-face="cn"], [data-theme="dark"][data-face="cn"] { --t0: #6F95B2; --t1: #79AE95; --t2: #C08A5C; --t3: #C24A3A; }
[data-theme="dark"] [data-face="jp"], [data-theme="dark"][data-face="jp"] { --t0: #7C9BD0; --t1: #D0607A; --t2: #9AAA68; --t3: #D2AE57; }
[data-theme="dark"] [data-face="west"], [data-theme="dark"][data-face="west"] { --t0: #7FA6E4; --t1: #E3735C; --t2: #E9C25A; --t3: #E9E4D2; }
[data-theme="dark"] [data-face="film"], [data-theme="dark"][data-face="film"] { --t0: #E9A23B; --t1: #4FB3C2; --t2: #E04848; --t3: #A6A6A2; }

/* ---------------------------------------------------------------- hero */
.rd { --col: 720px; --toc: 232px; --gap: 72px; }
.rd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: calc(var(--toc) + var(--gap) + var(--col)); margin: 0 auto; padding: clamp(36px, 6vh, 72px) 24px clamp(40px, 7vh, 80px); }
.rd-face { display: flex; align-items: baseline; gap: 10px; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 16px; color: var(--dim); margin: 0 0 18px; }
.rd-face .fm { font-size: 30px; color: var(--fg); }
.rd-hero h1 { font-family: var(--f-h2); font-size: clamp(34px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -.005em; margin: 0 0 14px; }
.rd-sub { font-family: var(--f-read); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: var(--fg); margin: 0 0 18px; max-width: 30em; }
.rd-meta { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; color: var(--dim); margin: 0; }
.rd-hero-p .plate { width: 100%; aspect-ratio: 4 / 3; max-height: 58vh; }
@media (max-width: 860px) {
  .rd-hero { grid-template-columns: 1fr; padding-top: 28px; }
  .rd-hero-p { order: -1; }
  .rd-hero-p .plate { aspect-ratio: 16 / 10; max-height: 42vh; }
}

/* ---------------------------------------------------------------- columns */
.rd-cols { display: grid; grid-template-columns: var(--toc) minmax(0, var(--col)); gap: var(--gap); justify-content: center; padding: 0 24px 40px; }
.rd-main { min-width: 0; }
.rd-toc { position: sticky; top: calc(var(--bar-h) + 28px); align-self: start; max-height: calc(100vh - var(--bar-h) - 56px); overflow-y: auto; scrollbar-width: thin;
  font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; line-height: 1.4; padding-bottom: 20px; }
html[lang="zh-CN"] .rd-toc { font-family: "LXGW WenKai", var(--sys-zh); font-size: 15px; }
.toc-h { font-size: 13px; color: var(--dim); margin: 0 0 12px; }
.rd-toc ol { list-style: none; margin: 0; padding: 0; }
.rd-toc li { margin: 0; }
.rd-toc a { display: block; padding: 5px 0; color: var(--dim); text-decoration: none; }
.rd-toc a:hover { color: var(--fg); }
.toc-ch > a { display: grid; grid-template-columns: 24px 1fr; color: var(--fg); padding: 7px 0; }
.toc-ch .tn { color: var(--dim); font-variant-numeric: tabular-nums; }
.toc-ch > ol { display: none; padding: 0 0 8px 24px; border-left: 1px solid var(--rule); margin-left: 6px; }
.toc-ch > ol a { padding: 4px 0 4px 14px; font-size: 13.5px; }
html[lang="zh-CN"] .toc-ch > ol a { font-size: 14px; }
.toc-ch.on > ol { display: block; }
.toc-ch.on > a { font-weight: 600; }
.toc-ch a.cur { color: var(--fg); box-shadow: inset 2px 0 0 var(--acc); }
.toc-btn { display: none; }

@media (max-width: 1180px) {
  .rd-cols { grid-template-columns: minmax(0, var(--col)); }
  .rd-toc { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; top: auto; max-height: none; overflow: visible; padding: 0; pointer-events: none; }
  .toc-in { display: none; pointer-events: auto; position: absolute; left: 12px; right: 12px; bottom: 64px; max-width: 440px; max-height: 66vh; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }
  body.toc-open .toc-in { display: block; }
  .toc-in .toc-ch > ol { display: block; }
  .toc-btn { pointer-events: auto; display: flex; gap: 10px; align-items: baseline; position: absolute; left: 12px; bottom: 12px; max-width: calc(100vw - 24px);
    padding: 10px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 6px 22px rgba(0, 0, 0, .12); font-size: 14px; white-space: nowrap; }
  .toc-btn .tb-l { color: var(--dim); }
  .toc-btn .tb-c { overflow: hidden; text-overflow: ellipsis; }
  body.dw-open .rd-toc { display: none; }
}

/* ---------------------------------------------------------------- type */
.rd-main { font-family: var(--f-read); }
.rd-prose p, .rd-index, .rd-note { font-family: var(--f-read); }
.rd-prose p { font-size: 18px; line-height: 1.72; margin: 0 0 1.05em; max-width: 38em; }
html[lang="zh-CN"] .rd-prose p { font-size: 18px; line-height: 1.95; letter-spacing: .02em; max-width: 36em; }
.rd-prose strong.kp { font-weight: 600; }
html[lang="zh-CN"] .rd-prose strong.kp { font-weight: 700; }
.rd-main h2 { font-family: var(--f-h2); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; margin: 0 0 18px; }
.rd-main h3 { font-family: var(--f-h3); font-size: clamp(22px, 2.1vw, 27px); line-height: 1.28; margin: 0 0 10px; font-weight: 600; }
html[lang="zh-CN"] .rd-main h3 { font-weight: 700; }
[data-face="film"] .rd-main h2 { font-weight: 300; }
[data-face="film"] .rd-main h3 { font-weight: 500; }
[data-face="jp"] .rd-main h3 { font-weight: 700; }
html[lang="zh-CN"] [data-face="west"] .rd-main h2, html[lang="zh-CN"] [data-face="west"] .rd-hero h1 { font-weight: 900; }
html[lang="zh-CN"] [data-face="jp"] .rd-main h2, html[lang="zh-CN"] [data-face="jp"] .rd-hero h1 { font-weight: 700; }
.rd-note { font-size: 16px; color: var(--dim); max-width: 40em; margin: 0 0 20px; }
.rd-k { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; color: var(--dim); margin: 0 0 10px; }
html[lang="zh-CN"] .rd-k { font-family: "LXGW WenKai", var(--sys-zh); font-size: 15px; }

/* inline links to people, texts and terms */
.xl { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; cursor: pointer; display: inline; text-align: inherit; }
.xl:hover { text-decoration-color: var(--acc); color: var(--acc); }
.rd-prose strong .xl { font-weight: inherit; }

/* ---------------------------------------------------------------- spine and books */
.rd-spine { padding: 8px 0 40px; }
.rd-books { margin-top: 22px; padding: 18px 22px; border: 1px solid var(--rule); border-radius: 6px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.rd-books ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rd-books li { display: grid; gap: 2px; }
.rd-books b { font-weight: 600; font-size: 17px; line-height: 1.4; }
.rd-books span { color: var(--dim); font-size: 15px; }

/* ---------------------------------------------------------------- lineage map */
.rd-map { padding: 40px 0 56px; border-top: 1px solid var(--rule); }
.lm-ths { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; margin: 0 0 18px; }
.lm-ths div { border-left: 3px solid var(--t0); padding: 2px 0 2px 12px; }
.lm-ths div:nth-child(2) { border-color: var(--t1); } .lm-ths div:nth-child(3) { border-color: var(--t2); } .lm-ths div:nth-child(4) { border-color: var(--t3); }
.lm-ths dt { font-weight: 600; font-size: 16px; }
.lm-ths dd { margin: 2px 0 0; color: var(--dim); font-size: 15px; line-height: 1.5; }
.lm-key { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 14px; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 13.5px; color: var(--dim); }
.lm-key li { display: inline-flex; align-items: center; gap: 7px; }
.lm-key svg { width: 34px; height: 8px; }
.lm-key line { stroke: var(--fg); stroke-width: 1.4; }
.lm { position: relative; display: grid; grid-template-columns: minmax(96px, 128px) repeat(var(--lanes), minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.lm-head, .lm-row { display: contents; }
.lm-head > span { padding: 0 6px 10px; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 13.5px; font-weight: 600; text-align: center; color: var(--fg); }
html[lang="zh-CN"] .lm-head > span { font-family: "LXGW WenKai", var(--sys-zh); font-size: 14.5px; }
.lm-head .lm-th { border-bottom: 3px solid var(--t0); }
.lm-head .lm-th:nth-child(3) { border-color: var(--t1); } .lm-head .lm-th:nth-child(4) { border-color: var(--t2); } .lm-head .lm-th:nth-child(5) { border-color: var(--t3); }
.lm-ch { display: grid; grid-template-columns: 20px 1fr; align-content: start; padding: 12px 8px 12px 0; border-top: 1px solid var(--rule); font-family: "Hanken Grotesk", var(--sys-zh); font-size: 13px; line-height: 1.35; color: var(--dim); text-align: left; }
html[lang="zh-CN"] .lm-ch { font-family: "LXGW WenKai", var(--sys-zh); font-size: 14px; }
.lm-ch:hover { color: var(--fg); }
.lm-ch .tn { font-variant-numeric: tabular-nums; }
.lm-cell { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 6px 14px; border-top: 1px solid var(--rule); min-height: 52px; }
.lm-n { position: relative; display: block; max-width: 100%; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg);
  font-family: "Hanken Grotesk", var(--sys-zh); font-size: 13.5px; line-height: 1.3; text-align: center; color: var(--fg); transition: background-color .2s, color .2s, opacity .2s, border-color .2s; }
html[lang="zh-CN"] .lm-n { font-family: "LXGW WenKai", var(--sys-zh); font-size: 14.5px; }
.lm-n:hover, .lm-n.hot { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lm-n.rel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.lm.focus .lm-n:not(.hot):not(.rel) { opacity: .4; }
.lm-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lm-svg .e { fill: none; stroke: var(--fg); stroke-width: 1.15; opacity: .32; transition: opacity .2s, stroke .2s; }
.lm-svg .ed { fill: var(--fg); opacity: .4; }
.k-answers line, .lm-svg .e.k-answers { stroke-dasharray: 6 4; }
.k-transmits line, .lm-svg .e.k-transmits { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.k-names line, .lm-svg .e.k-names { stroke-dasharray: 10 3 2 3; }
.lm.focus .lm-svg .e { opacity: .08; }
.lm.focus .lm-svg .ed { opacity: .08; }
.lm.focus .lm-svg .e.on { opacity: 1; stroke: var(--acc); stroke-width: 1.9; }
.lm.focus .lm-svg .ed.on { opacity: 1; fill: var(--acc); }
.lm-info { min-height: 3.2em; margin: 12px 0 0; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14.5px; line-height: 1.5; color: var(--dim); }
html[lang="zh-CN"] .lm-info { font-family: "LXGW WenKai", var(--sys-zh); }
.lm-info b { color: var(--fg); margin-right: 8px; }
.lm-info span { display: inline-block; margin-right: 14px; }
.lm-list { display: none; }
@media (max-width: 700px) {
  .lm, .lm-key, .lm-info { display: none; }
  .lm-list { display: grid; gap: 22px; }
  .ll-th h3 { font-family: var(--f-read); font-size: 18px; font-weight: 600; margin: 0 0 4px; }
  .ll-th p { font-size: 15px; color: var(--dim); margin: 0 0 8px; }
  .ll-th ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--t0); }
  .ll-th:nth-child(2) ol { border-color: var(--t1); } .ll-th:nth-child(3) ol { border-color: var(--t2); } .ll-th:nth-child(4) ol { border-color: var(--t3); }
  .ll-th li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; padding: 5px 0; }
  .ll-c { width: 100%; font-size: 13px; color: var(--dim); }
  .ll-n { padding: 3px 9px; border: 1px solid var(--rule); border-radius: 4px; font-size: 15px; }
}

/* ---------------------------------------------------------------- chapters and sections */
.rd-ch { padding: 56px 0 8px; border-top: 1px solid var(--rule); }
.rd-chh { margin: 0 0 22px; }
.rd-chn { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14.5px; color: var(--dim); margin: 0 0 8px; }
html[lang="zh-CN"] .rd-chn { font-family: "LXGW WenKai", var(--sys-zh); font-size: 15.5px; }
.rd-chn span { color: var(--dim); }
.rd-chplate { margin: 0 0 28px; }
.rd-chplate .plate { width: 100%; aspect-ratio: 16 / 7; border-radius: 2px; }
.rd-lead p { font-size: 19.5px; line-height: 1.66; }
html[lang="zh-CN"] .rd-lead p { font-size: 19px; line-height: 1.95; }
.rd-sec { margin: 48px 0 0; }
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 16px; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 13.5px; }
html[lang="zh-CN"] .rd-tags { font-family: "LXGW WenKai", var(--sys-zh); font-size: 14px; }
.tg { padding: 2px 9px; border-radius: 999px; color: var(--t0); border: 1px solid color-mix(in srgb, var(--t0) 45%, transparent); }
.tg1 { color: var(--t1); border-color: color-mix(in srgb, var(--t1) 45%, transparent); }
.tg2 { color: var(--t2); border-color: color-mix(in srgb, var(--t2) 45%, transparent); }
.tg3 { color: var(--t3); border-color: color-mix(in srgb, var(--t3) 45%, transparent); }
.whos { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 6px; color: var(--dim); }
.who { color: var(--dim); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.who:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* quotation from a primary text */
.rd-q { margin: 26px 0 30px; padding: 2px 0 2px 22px; border-left: 3px solid var(--acc); max-width: 36em; }
.rd-q blockquote { margin: 0; }
.rd-q .q-o { font-family: var(--f-h3); font-size: 22px; line-height: 1.6; margin: 0 0 8px; }
html[lang="zh-CN"] [data-face="cn"] .rd-q .q-o { font-family: "LXGW WenKai", serif; font-size: 22px; }
.rd-q .q-o[lang="ja"] { font-family: "Zen Old Mincho", "Noto Serif SC", serif; }
.rd-q .q-o.lat { font-size: 19px; }
.rd-q .q-t { font-size: 17px; line-height: 1.65; color: var(--fg); margin: 0 0 8px; }
.rd-q .q-o + .q-t { color: var(--dim); }
.rd-q figcaption { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; color: var(--dim); }
html[lang="zh-CN"] .rd-q figcaption { font-family: "LXGW WenKai", var(--sys-zh); }
.rq { margin: 22px 0; padding-left: 20px; border-left: 2px solid var(--rule); }
.rq p { color: var(--fg); }
.rq cite { display: block; font-style: normal; font-size: 14px; color: var(--dim); margin-top: -6px; }

/* figures: real works, shown whole */
.rd-fig { margin: 28px 0 30px; }
.rd-fig img { max-height: 72vh; width: auto; max-width: 100%; margin: 0; border-radius: 1px; }
.rd-fig figcaption { display: grid; gap: 2px; margin-top: 10px; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; line-height: 1.45; color: var(--dim); max-width: 40em; }
html[lang="zh-CN"] .rd-fig figcaption { font-family: "LXGW WenKai", var(--sys-zh); }
.rd-fig .ct { color: var(--fg); }
.rd-fig .cl, .rd-fig .plink { color: var(--dim); }
.rd-chfig img { max-height: 60vh; }

.rd-src { margin: 16px 0 0; font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; color: var(--dim); }
html[lang="zh-CN"] .rd-src { font-family: "LXGW WenKai", var(--sys-zh); }
.rd-src summary { cursor: pointer; display: inline-block; padding: 2px 0; list-style: none; }
.rd-src summary::-webkit-details-marker { display: none; }
.rd-src summary::before { content: "+ "; }
.rd-src[open] summary::before { content: "− "; }
.rd-src ul { margin: 8px 0 0; padding: 0 0 0 16px; line-height: 1.55; }
.rd-src li { margin: 0 0 4px; }

.rd-bridge { margin: 44px 0 0; padding: 20px 24px 22px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 4.5%, transparent); }
.rd-bridge .rd-prose p { margin: 0 0 12px; }
.rd-next { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 15px; color: var(--acc); }
html[lang="zh-CN"] .rd-next { font-family: "LXGW WenKai", var(--sys-zh); }
.rd-next::after { content: " ↓"; }
.rd-next:hover { text-decoration: underline; text-underline-offset: .2em; }

/* labs inside the reading keep to the column */
.rd .lab.rd-lab { margin: 32px 0 8px; padding: 0; max-width: none; }

/* ---------------------------------------------------------------- index */
.rd-index { padding: 64px 0 24px; border-top: 1px solid var(--rule); margin-top: 64px; }
.rd-index h3 { font-family: var(--f-read); font-size: 19px; font-weight: 600; margin: 36px 0 12px; }
.ix { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 32px; }
.ix li { break-inside: avoid; }
.ix button { display: grid; width: 100%; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); text-align: left; }
.ix b { font-weight: 500; font-size: 16px; line-height: 1.35; }
.ix span { color: var(--dim); font-size: 14px; }
.ix button:hover b { text-decoration: underline; text-underline-offset: .2em; }
.ix-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-terms button { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 15px; }
.ix-terms b { font-weight: 600; }
.ix-terms span { color: var(--dim); }
.ix-terms button:hover { border-color: var(--fg); }

@media (max-width: 600px) {
  .rd-cols { padding: 0 18px 32px; }
  .rd-hero { padding-left: 18px; padding-right: 18px; }
  .rd-prose p, html[lang="zh-CN"] .rd-prose p { font-size: 17.5px; }
  .rd-lead p, html[lang="zh-CN"] .rd-lead p { font-size: 18.5px; }
  .rd-chplate .plate { aspect-ratio: 16 / 9; }
  .rd-bridge { padding: 16px 18px; }
}

/* ---------------------------------------------------------------- drawer (v3) */
.drawer { width: min(100vw, max(400px, 42vw)); max-width: 640px; }
@media (max-width: 760px) { .drawer { width: 100vw; max-width: none; } }
.dw-head { margin-bottom: 14px; }
.drawer .dw-title { font-size: clamp(30px, 3.4vw, 44px); }
.drawer .dw-key { font-weight: 500; }
.dw-in-reading, .dw-lineage { margin-top: 26px; }
.dw-go { display: grid; gap: 2px; width: 100%; padding: 10px 14px; margin: 0 0 8px; border: 1px solid var(--rule); border-radius: 6px; text-align: left; }
.dw-go span { font-size: 13.5px; color: var(--dim); }
.dw-go b { font-weight: 600; font-size: 16px; }
.dw-go:hover { border-color: var(--fg); }
.dw-go b::after { content: " →"; color: var(--acc); }
.ln-row { display: grid; grid-template-columns: auto minmax(8em, 1fr) minmax(0, max-content); gap: 2px 10px; align-items: baseline; width: 100%; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); text-align: left; }
.ln-k { font-size: 13.5px; color: var(--acc); white-space: nowrap; }
.ln-row b { font-weight: 600; }
.ln-w { font-size: 13.5px; color: var(--dim); text-align: right; }
.ln-note { grid-column: 1 / -1; font-size: 15px; color: var(--dim); line-height: 1.5; }
.ln-row:hover b { text-decoration: underline; text-underline-offset: .2em; }

/* ---------------------------------------------------------------- labs inside the reading column
   The labs were built for a full-width page; in the 720px column every two-column lab stacks,
   and nothing is set vertically (names, marks and poems read left to right). */
.rd .lab { padding: 28px 0 0; margin: 40px 0 0; border-top: 1px solid var(--rule); }
.rd .lab .lh { grid-template-columns: minmax(0, 1fr); margin-bottom: 26px; }
.rd .lab .lh-mark { display: none; }
.rd .lab .lh h2 { font-family: var(--f-h3); font-size: clamp(24px, 2.4vw, 30px); }
html[lang="zh-CN"] .rd .lab .lh h2 { font-family: var(--f-h3); }
.rd .lab .lh-k { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 14px; }
html[lang="zh-CN"] .rd .lab .lh-k { font-family: "LXGW WenKai", var(--sys-zh); }
.rd .lab .lh-p, .rd .lab .lb-txt, .rd .lab .law-out p, .rd .lab dl { font-family: var(--f-read); }
.rd .lab .lb-west, .rd .lab .lb-cn, .rd .lab .lb-film.scl, .rd .lab .lb-film.mt, .rd .lab .lb-film.tvc, .rd .lab .lb-film.asl, .rd .lab .lb-jp.wb, .rd .lab .lb-jp.ik,
.rd .lab .dist-stage, .rd .lab .realms, .rd .lab .self-out, .rd .lab .persp, .rd .lab .ik-mo, .rd .lab .hk-stage, .rd .lab .ry-lower, .rd .lab .lv-open { grid-template-columns: minmax(0, 1fr); }
.rd .lab .lb-leaf { max-width: 420px; }
.rd .lab .wb-sheet { max-width: 480px; }
.rd .lab .sc-out { grid-column: 1; grid-row: auto; }
.rd .lab .moments { grid-template-columns: 1fr 1fr; }
.rd .lab .mo { padding-left: 0 !important; border-right: 0; }
.rd .lab .kj-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd .lab .ik-mo article { border-right: 0; margin-right: 0; }
/* the six laws: names read across */
.rd .lab .laws ol { grid-template-columns: repeat(3, minmax(0, 1fr)); direction: ltr; }
.rd .lab .laws li { border-left: 0; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.rd .lab .laws li:nth-child(3n) { border-right: 0; }
.rd .lab .laws li:nth-child(-n+3) { border-top: 0; }
.rd .lab .laws li button { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; }
.rd .lab .lw-o { writing-mode: horizontal-tb; font-size: 22px; min-height: 0; letter-spacing: .04em; }
.rd .lab .lw-n { font-family: "Hanken Grotesk", var(--sys-zh); font-size: 12.5px; }
.rd .lab .lw-e, .rd .lab .laws .lw-e { display: block; font-size: 14px; line-height: 1.35; text-align: left; min-height: 0; }
/* the haiku: read across, the cut is a widening space */
.rd .lab .hk-poem { writing-mode: horizontal-tb; white-space: normal; font-size: clamp(24px, 3vw, 30px); letter-spacing: .06em; justify-self: start; height: auto; }
.rd .lab .hk-ma { inline-size: calc(var(--gap) * 4em); vertical-align: baseline; }
.rd .lab .hk-ma::after { left: 50%; top: -.2em; bottom: auto; height: 1.1em; }
.rd .lab .hk-stage { padding: 28px clamp(16px, 3vw, 32px); min-height: 0; gap: 26px; }
@media (max-width: 600px) { .rd .lab .laws ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd .lab .laws li { border-right: 1px solid var(--rule) !important; border-top: 1px solid var(--rule) !important; } .rd .lab .laws li:nth-child(2n) { border-right: 0 !important; } .rd .lab .laws li:nth-child(-n+2) { border-top: 0 !important; } .rd .lab .moments, .rd .lab .kj-opts { grid-template-columns: 1fr; } }
/* drawer rows: never squeeze a name beside its city */
.drawer .place-row, .place-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.place-row .why { grid-column: 1 / -1; }
.drawer .place-row > span:not(.why) { color: var(--dim); font-size: 14px; }

/* ---------------------------------------------------------------- sync & backup (learn-sync panel, shared with the other two sites) */
.sync-scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--fg) 26%, transparent); }
.sync-sheet { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 10px; padding: 28px 28px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); outline: none; font-family: var(--f-read); font-size: 16px; }
.sync-sheet h2 { margin: 0 0 14px; font-family: var(--f-h2, var(--f-disp)); font-size: 26px; font-weight: 400; line-height: 1.2; }
.sync-close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--dim); }
.sync-close:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ls-panel p { margin: 0 0 12px; line-height: 1.65; }
.ls-panel .ls-muted { color: var(--dim); font-size: 14.5px; }
.ls-panel .ls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.ls-btn { font: 600 14.5px/1.2 var(--f-ui); padding: 9px 16px; border: 1px solid var(--rule); border-radius: 999px; color: var(--fg); }
.ls-btn:hover { border-color: var(--fg); }
.ls-btn.ls-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ls-btn.ls-primary:hover { background: color-mix(in srgb, var(--fg) 85%, var(--acc)); }
.ls-btn.ls-quiet { border-color: transparent; color: var(--dim); font-weight: 400; }
.ls-btn.ls-quiet:hover { color: var(--fg); }
.ls-btn:disabled { opacity: .5; cursor: default; }
.ls-input { font: 16px/1.3 var(--f-mono, monospace); letter-spacing: .06em; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: color-mix(in srgb, var(--fg) 3%, var(--bg)); color: var(--fg); min-width: 0; flex: 1 1 180px; }
.ls-panel .ls-code { font: 600 20px/1.3 var(--f-mono, monospace); letter-spacing: .08em; }
.ls-panel .ls-status[data-state=error], .ls-panel .ls-msg[data-kind=error] { color: var(--acc); }
@media (max-width: 760px) { .tb.sy span { font-size: 12.5px; } .sync-sheet { padding: 24px 18px 18px; } }