@font-face {
  font-family: 'Ink Song';
  src: url('/fonts/ink-song-400-t.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E1F, U+4E82, U+4E9E, U+4F86, U+4FC2, U+5009, U+500B, U+5011, U+5099, U+50B3, U+50BE, U+50C5, U+50F9, U+5132, U+5167, U+5169, U+518A, U+5225, U+522A, U+5247, U+525B, U+5275, U+5287, U+52D5, U+52D9, U+52E2, U+52F5, U+5340, U+5354, U+537B, U+53C3, U+54E1, U+5546, U+554F, U+555F, U+559A, U+55AA, U+55AE, U+55CE, U+570B, U+570D, U+5716, U+5831, U+593E, U+5B78, U+5BAE, U+5BEB, U+5BF5, U+5C07-5C08, U+5C0B, U+5C0D, U+5C64, U+5C6C, U+5E2B, U+5E36, U+5E6B, U+5E7E, U+5EAB, U+5F35, U+5F37, U+5F8C, U+5F9E, U+5FA9, U+60F1, U+611B, U+614B, U+61C9, U+61F8, U+6236, U+6368, U+6383, U+63DB, U+6416, U+64C7, U+64DA, U+64F2, U+64FA, U+64FE, U+6557, U+6578, U+65B7, U+65BC, U+6642, U+66AB, U+66C6, U+66C9, U+66F8, U+6703, U+6771, U+689D, U+696D, U+6A19, U+6A23, U+6A5F, U+6A94, U+6B0A, U+6B77-6B78, U+6C23, U+6C7A, U+6C92, U+6CC1, U+6E2C, U+6E96, U+700F, U+70BA, U+7121, U+7169, U+71D2, U+722D, U+72C0, U+734E, U+7368, U+73FE, U+7522, U+7576, U+767C, U+76E4, U+78BA, U+78BC, U+790E, U+7A2E, U+7A31, U+7A4D, U+7A69, U+7AC5, U+7B46, U+7BC0, U+7BC4, U+7BC9, U+7D0D, U+7D19, U+7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D61, U+7D66, U+7D71, U+7D93, U+7DAD, U+7DB2, U+7DE3, U+7DE8, U+7DF4, U+7E6B, U+7E7C, U+7E8C, U+7FA9, U+806F, U+8072, U+807D, U+8108, U+8207, U+83EF, U+8457, U+8523, U+85A6, U+8655, U+865F, U+8853, U+88DC-88DD, U+88E1, U+8907, U+8986, U+898B, U+898F, U+89AA, U+89BA, U+89BD, U+89C0, U+8A02, U+8A08, U+8A0A, U+8A13, U+8A17-8A18, U+8A1F, U+8A23, U+8A2A, U+8A2D, U+8A31, U+8A34, U+8A3A-8A3B, U+8A55, U+8A5E, U+8A66, U+8A71-8A73, U+8A8C-8A8D, U+8AAA, U+8AB0, U+8ABF, U+8ACB, U+8AD6, U+8AEE, U+8AF8, U+8B1B, U+8B49, U+8B58, U+8B6F-8B70, U+8B77, U+8B80, U+8B8A, U+8B93, U+8CA0-8CA1, U+8CAA, U+8CAC, U+8CBB, U+8CC7, U+8CE6, U+8CEA, U+8CEC, U+8DA8, U+8EDF, U+8F09, U+8F15, U+8F29, U+8F2F, U+8F38, U+8F3F, U+8F49, U+8FA6, U+8FA8, U+8FB2, U+9019, U+9031-9032, U+904B, U+904E, U+9054, U+9060, U+9069, U+9077-9078, U+9084, U+91AB, U+91CB, U+91DD, U+9285, U+92EA, U+9304, U+9322, U+9326, U+932F, U+9336, U+9375, U+9418, U+9577, U+9580, U+958B, U+9593, U+95B1, U+95DC, U+9673, U+967D, U+969B, U+96A8, U+96B1, U+96DC, U+96E3, U+9748, U+9801, U+9805-9806, U+982D, U+9846, U+984C, U+9858, U+985E, U+98A8, U+9918, U+99AC, U+9A57, U+9EBC, U+9EC3, U+9EDE, U+9F8D;
}

@font-face {
  font-family: 'Ink Song';
  src: url('/fonts/ink-song-600-t.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E1F, U+4E82, U+4E9E, U+4F86, U+4FC2, U+5009, U+500B, U+5011, U+5099, U+50B3, U+50BE, U+50C5, U+50F9, U+5132, U+5167, U+5169, U+518A, U+5225, U+522A, U+5247, U+525B, U+5275, U+5287, U+52D5, U+52D9, U+52E2, U+52F5, U+5340, U+5354, U+537B, U+53C3, U+54E1, U+5546, U+554F, U+555F, U+559A, U+55AA, U+55AE, U+55CE, U+570B, U+570D, U+5716, U+5831, U+593E, U+5B78, U+5BAE, U+5BEB, U+5BF5, U+5C07-5C08, U+5C0B, U+5C0D, U+5C64, U+5C6C, U+5E2B, U+5E36, U+5E6B, U+5E7E, U+5EAB, U+5F35, U+5F37, U+5F8C, U+5F9E, U+5FA9, U+60F1, U+611B, U+614B, U+61C9, U+61F8, U+6236, U+6368, U+6383, U+63DB, U+6416, U+64C7, U+64DA, U+64F2, U+64FA, U+64FE, U+6557, U+6578, U+65B7, U+65BC, U+6642, U+66AB, U+66C6, U+66C9, U+66F8, U+6703, U+6771, U+689D, U+696D, U+6A19, U+6A23, U+6A5F, U+6A94, U+6B0A, U+6B77-6B78, U+6C23, U+6C7A, U+6C92, U+6CC1, U+6E2C, U+6E96, U+700F, U+70BA, U+7121, U+7169, U+71D2, U+722D, U+72C0, U+734E, U+7368, U+73FE, U+7522, U+7576, U+767C, U+76E4, U+78BA, U+78BC, U+790E, U+7A2E, U+7A31, U+7A4D, U+7A69, U+7AC5, U+7B46, U+7BC0, U+7BC4, U+7BC9, U+7D0D, U+7D19, U+7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D61, U+7D66, U+7D71, U+7D93, U+7DAD, U+7DB2, U+7DE3, U+7DE8, U+7DF4, U+7E6B, U+7E7C, U+7E8C, U+7FA9, U+806F, U+8072, U+807D, U+8108, U+8207, U+83EF, U+8457, U+8523, U+85A6, U+8655, U+865F, U+8853, U+88DC-88DD, U+88E1, U+8907, U+8986, U+898B, U+898F, U+89AA, U+89BA, U+89BD, U+89C0, U+8A02, U+8A08, U+8A0A, U+8A13, U+8A17-8A18, U+8A1F, U+8A23, U+8A2A, U+8A2D, U+8A31, U+8A34, U+8A3A-8A3B, U+8A55, U+8A5E, U+8A66, U+8A71-8A73, U+8A8C-8A8D, U+8AAA, U+8AB0, U+8ABF, U+8ACB, U+8AD6, U+8AEE, U+8AF8, U+8B1B, U+8B49, U+8B58, U+8B6F-8B70, U+8B77, U+8B80, U+8B8A, U+8B93, U+8CA0-8CA1, U+8CAA, U+8CAC, U+8CBB, U+8CC7, U+8CE6, U+8CEA, U+8CEC, U+8DA8, U+8EDF, U+8F09, U+8F15, U+8F29, U+8F2F, U+8F38, U+8F3F, U+8F49, U+8FA6, U+8FA8, U+8FB2, U+9019, U+9031-9032, U+904B, U+904E, U+9054, U+9060, U+9069, U+9077-9078, U+9084, U+91AB, U+91CB, U+91DD, U+9285, U+92EA, U+9304, U+9322, U+9326, U+932F, U+9336, U+9375, U+9418, U+9577, U+9580, U+958B, U+9593, U+95B1, U+95DC, U+9673, U+967D, U+969B, U+96A8, U+96B1, U+96DC, U+96E3, U+9748, U+9801, U+9805-9806, U+982D, U+9846, U+984C, U+9858, U+985E, U+98A8, U+9918, U+99AC, U+9A57, U+9EBC, U+9EC3, U+9EDE, U+9F8D;
}

/*
 * 官网（墨版）的样式：首页只引这一份，内页另接 pages.css（见 build-legal-static.mjs 的 writeInkAssets）。
 * 规则都挂在 k- 前缀上；:root 上改的令牌（纸色）只在墨版各页生效，内容层（古籍、工具等）不引它。
 * 颜色、字、动效照 ui-zhongdao：
 * 宣纸 #faf9f5，墨 #17120d，泥金只写小字和细线，朱砂只在印上；宋体写名字和题句，黑体写正文。
 * 不铺底色、不加阴影和画框；只有观自在一节是墨夜。
 */

@font-face {
  font-family: 'Ink Song';
  src: url('/fonts/ink-song-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ink Song';
  src: url('/fonts/ink-song-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 提问钮印上的字单切一份（只有「问」「問」）：简繁以外的页别处不用这套宋体，不必为一个字下载整份子集。 */
@font-face {
  font-family: 'Ink Seal';
  src: url('/fonts/ink-seal-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 顶栏和页面同色：顶栏吃的是 --bg。 */
  --bg: #faf9f5;
  --k-paper: #faf9f5;
  --k-ink: #17120d;
  --k-text: #1f1a14;
  --k-text-2: #4a3f35;
  --k-muted: #8f6f4c;
  --k-gold: #a4865a;
  --k-rule: rgba(202, 180, 159, 0.55);
  --k-moon: #ece4d6;
  --k-night-muted: #a99273;
  --k-accent: #ec631f;
  --k-song: 'Ink Song', 'Source Han Serif SC', 'Noto Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'STSong', serif;
  --k-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC',
    'Noto Sans CJK SC', sans-serif;
  --k-brush: 'Hero CJK', var(--k-song);
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-write: cubic-bezier(0.55, 0.05, 0.25, 1);
  --k-maxw: 1200px;
  --k-gutter: 24px;
  --k-section: 112px;
}

/*
 * 繁体页：同一套宋体，繁体多出来的字另切一份（ink-song-*-t，按 unicode-range 声明，见 build-fonts.py），
 * 只有繁体页会去取；系统字栈换成繁体的。
 */
html:lang(zh-Hant) {
  --k-song: 'Ink Song', 'Source Han Serif TC', 'Noto Serif CJK TC', 'Noto Serif TC', 'Songti TC', 'STSongti-TC', serif;
  --k-sans: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans TC',
    'Noto Sans CJK TC', sans-serif;
}

/*
 * 日文页：排法同中文（竖排的名字、疏排的小字、逐字墨入），字用日文明朝体——这套宋体是简体字形，假名也没有。
 * 书法体子集同样没有假名，大标题跟着用明朝体，免得一句里汉字是书法、假名是明朝。
 */
html:lang(ja) {
  --k-song: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Source Han Serif', 'Noto Serif CJK JP', 'Noto Serif JP', serif;
  --k-sans: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo,
    'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  --k-brush: var(--k-song);
}

@media (min-width: 768px) {
  :root {
    --k-gutter: 48px;
    --k-section: 160px;
  }
}

@media (min-width: 1100px) {
  :root {
    --k-gutter: 80px;
    --k-section: 200px;
  }
}

body {
  background: var(--k-paper);
}

/* 一截话整块换行，见 kit.mjs 的 phrases。日文按文节断（auto-phrase），一个文节比一行还长时块不肯缩，宽度封顶一行，块里照常折。 */
.k-nb {
  display: inline-block;
  max-width: 100%;
}

/*
 * 日文一截里再按文节断（auto-phrase），不断成「ありま / せん」；不支持的浏览器照常逐字断，也不 balance（balance 会断在词中）。
 * 手机上标题收一点字号和字距，「高すぎず低すぎず、」这样九个假名的一个文节一行放得下。
 */
@supports (word-break: auto-phrase) {
  html:lang(ja) .k-nb {
    word-break: auto-phrase;
    text-wrap: balance;
  }
}

@media (max-width: 767px) {
  html:lang(ja) .k-title:not(.k-split-title) {
    font-size: 30px;
    letter-spacing: 0.12em;
  }
}

.k-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--k-maxw) + 2 * var(--k-gutter));
  margin: 0 auto;
  padding: 0 var(--k-gutter);
}

/* ── 写意墨 ─────────────────────────────────────────────────────────────
 * 没有脚本时是一张图；有脚本时先藏起来，滚到跟前在画布上晕开，画完换回原图。
 * 落在纸上的边用遮罩化开（data-fade 写图自己的哪几条边），贴屏幕边、墨夜边的不化，让边裁掉它。
 */
.k-art {
  position: relative;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.k-art img,
.k-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.k-art canvas {
  position: absolute;
  inset: 0;
}

.k-art picture {
  display: contents;
}

.k-art.is-flip {
  transform: scaleX(-1);
}

.k-art[data-fade] {
  --ft: 0%;
  --fr: 0%;
  --fb: 0%;
  --fl: 0%;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent),
    linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent),
    linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-composite: intersect;
}

.k-art[data-fade~='t'] {
  --ft: 26%;
}

.k-art[data-fade~='r'] {
  --fr: 20%;
}

.k-art[data-fade~='b'] {
  --fb: 26%;
}

.k-art[data-fade~='l'] {
  --fl: 20%;
}

.k-js .k-art img {
  opacity: 0;
}

.k-js .k-art.is-in img {
  opacity: 1;
}

/* 画布读不了像素时退回整图墨入。 */
.k-js .k-art.is-plain img {
  filter: blur(5px);
  transition:
    opacity 0.9s var(--k-ease),
    filter 0.9s var(--k-ease);
}

.k-js .k-art.is-plain.is-in img {
  filter: none;
}

/* ── 墨入 ───────────────────────────────────────────────────────────────
 * 透明加模糊到清晰，稍带一点上浮；--d 是同一节里的先后（错开 120ms），--delay 直接给时刻。
 */
.k-js [data-rise] {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(8px);
  transition:
    opacity 0.75s var(--k-ease),
    filter 0.75s var(--k-ease),
    transform 0.75s var(--k-ease);
  transition-delay: var(--delay, calc(var(--d, 0) * 120ms));
}

.k-js [data-rise].is-in {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ── 一方墨（主按钮）──────────────────────────────────────────────────
 * 同应用开通页 .ctaButton：墨底，右上一抹泥金光晕，内缩 3px 一道泥金细线，泥金宋体字，墨里一层极淡的颗粒。
 */
.k-ink-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 296px;
  background-color: var(--k-ink);
  background-image: radial-gradient(60% 150% at 90% 0%, rgba(201, 168, 111, 0.3), transparent 64%);
  color: #ecdcba;
  font-family: var(--k-song);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    scale 120ms ease,
    background-color 0.3s ease;
}

.k-ink-btn > span {
  padding-left: 0.24em;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.k-ink-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0 0.73 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  opacity: 0.07;
  pointer-events: none;
}

.k-ink-btn::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(201, 168, 111, 0.42);
  border-radius: inherit;
  pointer-events: none;
}

.k-ink-btn:hover {
  background-color: #2a2017;
  color: #f3e6c8;
  text-decoration: none;
}

.k-ink-btn:active {
  scale: 0.985;
}

.k-ink-btn:focus-visible {
  outline: 2px solid var(--k-gold);
  outline-offset: 3px;
}

/* ── 提问框：一行字，底下一笔墨，末尾一方「问」印 ───────────────────── */
.k-ask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: min(100%, 540px);
  margin: 0;
  padding-bottom: 12px;
}

.k-ask input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  color: var(--k-text);
  font-family: var(--k-sans);
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
}

.k-ask input::placeholder {
  color: rgba(31, 26, 20, 0.36);
}

.k-ask-line {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: calc(100% - 62px);
  height: 8px;
  fill: var(--k-ink);
  opacity: 0.78;
  transition: opacity 0.3s ease;
}

.k-ask:focus-within .k-ask-line {
  opacity: 1;
}

/* 一笔写出：从左往右写过去，等整框墨入之后再落笔。 */
.k-js .k-ask-line {
  clip-path: inset(0 100% 0 0);
}

.k-js .k-ask.is-in .k-ask-line {
  clip-path: inset(0);
  transition:
    clip-path 0.8s var(--k-write) calc(var(--delay, 0ms) + 160ms),
    opacity 0.3s ease;
}

/*
 * 印底是空白朱印（art/seal-ask.webp，边口和印泥深浅同「觀」印），字留纸色成白文。
 * 悬停印泥略沉一点，按下去像钤印那样往下一压。
 */
.k-ask-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  margin-right: 2px;
  padding: 0 0 1px;
  border: 0;
  border-radius: 6px;
  background: url('/art/ink/seal-ask.webp') center / 100% 100% no-repeat;
  color: var(--k-paper);
  font-family: 'Ink Seal', 'Source Han Serif SC', 'Noto Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'STSong', serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    scale 140ms ease,
    filter 0.25s ease;
}

.k-ask-send:hover {
  filter: brightness(0.93) saturate(1.08);
}

.k-ask-send:active {
  scale: 0.93;
}

.k-ask-send:focus-visible {
  outline: 2px solid var(--k-gold);
  outline-offset: 3px;
}

.k-ask-center {
  margin: 0 auto;
}

/* ── 首屏 ───────────────────────────────────────────────────────────── */
.k-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, calc(100svh - var(--header-h)), 980px);
  overflow: clip;
}

/* 远山原图越出右边：贴着屏幕右缘放，让屏幕边裁掉。 */
.k-hero-art {
  position: absolute;
  right: 0;
  top: 50%;
  width: min(74vw, 1240px);
  translate: 0 -48%;
}

.k-hero-in {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  padding-bottom: 48px;
}

/* 窄屏上最长那行放不下就缩字：--k-hero-em 是那行约几个字宽（见 home.mjs 的 renderHero），最小 24px。 */
.k-hero-title {
  margin: 0 0 clamp(36px, 6vh, 64px);
  color: var(--k-ink);
  font-family: var(--k-brush);
  font-size: max(24px, min(clamp(44px, 5.4vw, 92px), (100vw - 2 * var(--k-gutter)) / var(--k-hero-em, 1)));
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.02em;
}

.k-line {
  display: block;
  white-space: nowrap;
}

.k-line-2 {
  padding-left: 1.5em;
}

.k-line > span {
  display: inline-block;
}

/* 逐字墨入（拉丁文逐词，--k-step 拉长一点）。 */
.k-js .k-line > span {
  opacity: 0;
  filter: blur(6px);
  translate: 0 0.06em;
  animation: k-ink-in 1s var(--k-ease) forwards;
  animation-delay: calc(200ms + var(--i) * var(--k-step, 95ms));
}

@keyframes k-ink-in {
  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}

.k-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.k-hero-links a {
  color: var(--k-text-2);
  font-family: var(--k-sans);
  font-size: 15px;
  line-height: 1.7;
  text-decoration: none;
  transition: color 0.2s ease;
}

.k-hero-links a::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--k-gold);
}

.k-hero-links a:hover {
  color: var(--k-ink);
  text-decoration: none;
}

/* ── 观自在：墨夜 ───────────────────────────────────────────────────────
 * 荷是泥金墨，翻到左边贴着屏幕左缘和这一节的下沿，让墨夜的边裁掉它；字压在右边的留白里。
 */
.k-gzz {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(680px, 100svh, 1000px);
  overflow: clip;
  background-color: var(--k-ink);
  background-image: radial-gradient(70% 42% at 96% 0%, rgba(200, 165, 106, 0.12), transparent 70%);
  color: var(--k-moon);
}

.k-gzz-art {
  position: absolute;
  left: 0;
  bottom: 0;
  height: min(94%, 900px);
}

.k-gzz-in {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.k-gzz-copy {
  width: min(100%, 540px);
  padding: 120px 0;
}

.k-gzz-title {
  margin: 0 0 32px;
  color: var(--k-moon);
  font-family: var(--k-song);
  font-size: clamp(46px, 4.6vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.3em;
}

.k-gzz-line {
  margin: 0 0 48px;
  color: var(--k-moon);
  font-family: var(--k-song);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.k-gzz-act {
  margin: 0;
}

/* 墨夜里一屏一处朱橙，做成描边胶囊。 */
.k-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 30px 0 calc(30px + 0.2em);
  border: 1px solid var(--k-accent);
  border-radius: 296px;
  color: var(--k-accent);
  font-family: var(--k-song);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.k-pill:hover {
  background-color: rgba(236, 99, 31, 0.12);
  text-decoration: none;
}

.k-pill:focus-visible {
  outline: 2px solid var(--k-accent);
  outline-offset: 3px;
}

/* ── 我之书 ─────────────────────────────────────────────────────────────
 * 卷首竖排题签加一方「觀」印。从哪来的山挂在右上角，被墨夜的下沿和屏幕右缘裁掉；
 * 到哪去的路从屏幕左缘进来。两卷的字都贴着墨落：--k-side 是版心外的空边，
 * 字块离屏幕边的距离按墨在画里占的宽度（约一半）算，再空出 40px。
 */
.k-book {
  --k-from-w: clamp(280px, 40vw, 620px);
  --k-to-w: clamp(300px, 36vw, 540px);
  --k-side: max(0px, (100vw - var(--k-maxw) - 2 * var(--k-gutter)) / 2);
  position: relative;
  padding: var(--k-section) 0 calc(var(--k-section) * 0.8);
  overflow: clip;
}

.k-book-from {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--k-from-w);
}

.k-book-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 6vw, 96px);
}

.k-book-slip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.k-book-title {
  margin: 0;
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.26em;
  writing-mode: vertical-rl;
}

.k-seal {
  display: block;
  width: 40px;
  height: 40px;
}

.k-book-lede {
  margin: 0;
  padding-top: 0.15em;
  color: var(--k-text);
  font-family: var(--k-song);
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

.k-vol-from {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(8px, 2vw, 32px);
  padding-right: max(var(--k-gutter), calc(0.5 * var(--k-from-w) + 40px - var(--k-side)));
}

.k-vol-to {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(0.72 * var(--k-to-w));
  margin-top: clamp(48px, 7vw, 112px);
}

.k-vol-art {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--k-to-w);
}

.k-vol-in {
  position: relative;
  z-index: 1;
  padding-left: max(var(--k-gutter), calc(0.5 * var(--k-to-w) + 40px - var(--k-side)));
}

.k-vol-copy {
  width: min(100%, 420px);
}

/* 从哪来的字块收到字本身那么宽，右缘贴着山脚。 */
.k-vol-from .k-vol-copy {
  width: auto;
  max-width: 420px;
}

.k-vol-name {
  margin: 0 0 14px;
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
}

.k-vol-line {
  margin: 0;
  color: var(--k-text-2);
  font-family: var(--k-sans);
  font-size: 16px;
  line-height: 2;
}

/* 三页共用一套列（subgrid）：英文三个名字长短不一，后面那句照样对齐。 */
.k-pages {
  display: grid;
  grid-template-columns: 72px auto minmax(0, 1fr);
  gap: 14px 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.k-pages li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 72px auto minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 16px;
}

.k-tome {
  display: block;
  height: 14px;
  fill: var(--k-ink);
}

.k-js .k-pages .k-tome {
  clip-path: inset(0 100% 0 0);
}

.k-js .k-pages .is-in .k-tome {
  clip-path: inset(0);
  transition: clip-path 460ms var(--k-write) calc(var(--d, 0) * 120ms + 80ms);
}

.k-page-name {
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.k-page-line {
  color: var(--k-muted);
  font-family: var(--k-sans);
  font-size: 14px;
  line-height: 1.6;
}

.k-book-act {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 88px);
}

/* ── 立波详断 ───────────────────────────────────────────────────────── */
.k-title {
  margin: 0;
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
}

.k-detail {
  padding: calc(var(--k-section) * 0.6) 0 var(--k-section);
}

.k-detail .k-title {
  margin-bottom: clamp(40px, 6vw, 88px);
}

/* 三幅一步一低，像手卷往下走。 */
.k-detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4.5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-detail-item:nth-child(2) {
  margin-top: clamp(40px, 5vw, 80px);
}

.k-detail-item:nth-child(3) {
  margin-top: clamp(80px, 10vw, 160px);
}

.k-detail-item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.k-detail-art {
  width: 100%;
  margin: 0 0 12px;
}

.k-detail-art img {
  transition: transform 1.4s var(--k-ease);
}

.k-detail-item a:hover .k-detail-art img {
  transform: scale(1.03);
}

.k-detail-name {
  margin: 0 0 10px;
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
}

.k-detail-line {
  margin: 0;
  color: var(--k-text-2);
  font-family: var(--k-sans);
  font-size: 15px;
  line-height: 1.9;
}

/* ── 易学术数 ───────────────────────────────────────────────────────────
 * 一门一幅写意墨：墨从左边出画、被屏幕边裁掉，题目、九个名字和那一句落在右边的留白里，手机上画在上。
 * 九个名字竖排成一行，一列一门，滚到跟前一列一列墨入，像有人把九个名字写下来。没选的是淡墨，
 * 选中的浓墨，左侧一道专名线一笔从上往下写出；换一门时旧的那笔淡去，换上的那幅重新晕开。
 * 九幅画、九段字各自叠在同一格里，没选的只是看不见，换一门时版面不跳。
 */
.k-shu {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 46vw, 740px);
  overflow: clip;
}

/* 画的右边三分之一是空纸，可以垫到字底下去，墨离字近一些。 */
.k-shu-arts {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(440px, 64vw, 1040px);
  aspect-ratio: 3 / 2;
  translate: 0 -50%;
}

.k-shu-art {
  position: absolute;
  inset: 0;
}

.k-shu-art[hidden] {
  display: none;
}

.k-shu-in {
  position: relative;
  z-index: 1;
}

.k-shu-copy {
  width: min(100%, 520px, 44vw);
  margin-left: auto;
}

.k-shu .k-title {
  margin-bottom: clamp(36px, 4vw, 56px);
}

/* 名字在列里居中，字号是列宽的 0.48：第一列的专名线正好落在题目起笔的那条竖线上。 */
.k-shu-names {
  --k-col: min(57px, 4.85vw);
  --k-shu-hide: inset(0 0 100% 0);
  display: grid;
  grid-template-columns: repeat(9, var(--k-col));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--k-col) * 0.48);
}

.k-shu-tab {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0.4em 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: rgba(23, 18, 13, 0.44);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.5s var(--k-ease);
}

.k-shu-tab:hover {
  color: rgba(23, 18, 13, 0.7);
}

.k-shu-tab[aria-selected='true'] {
  color: var(--k-ink);
}

.k-shu-tab:focus-visible {
  outline: 1px solid var(--k-gold);
  outline-offset: 2px;
}

/* 一列之内字挨字，列与列之间空出一个多字：一眼看去是九列，不会横着读成一行一行。 */
.k-shu-name {
  position: relative;
  display: inline-block;
  font-family: var(--k-song);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
}

.k-shu-name > span {
  display: inline-block;
}

.k-shu-mark {
  position: absolute;
  top: 0.04em;
  right: calc(100% + 0.3em);
  width: 0.24em;
  height: calc(100% - 0.1em);
  fill: currentColor;
  opacity: 0;
  clip-path: var(--k-shu-hide);
  transition:
    opacity 0.3s ease,
    clip-path 0s linear 0.3s;
}

.k-shu-tab[aria-selected='true'] .k-shu-mark {
  opacity: 1;
  clip-path: inset(0);
  transition: clip-path 0.62s var(--k-write);
}

.k-js .k-shu-names:not(.is-marked) .k-shu-mark {
  opacity: 0;
  clip-path: var(--k-shu-hide);
  transition: none;
}

.k-js .k-shu-name > span {
  opacity: 0;
  filter: blur(6px);
}

.k-js .k-shu-names.is-in .k-shu-name > span {
  animation: k-ink-in 1s var(--k-ease) forwards;
  animation-delay: calc(var(--c) * 110ms + var(--i) * 70ms);
}

.k-shu-panels {
  display: grid;
  margin-top: clamp(32px, 3.4vw, 48px);
}

.k-shu-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 100%;
}

.k-shu-panel[hidden] {
  display: flex;
  visibility: hidden;
}

/* 九句长短不一：句子贴着名字往下排，入口压在格底，始终落在同一个地方。 */
.k-shu-line {
  margin: 0 0 auto;
  color: var(--k-text);
  font-family: var(--k-song);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

/* ── Libo Pet ───────────────────────────────────────────────────────── */
.k-pet {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 48vw, 760px);
  overflow: clip;
}

.k-pet-art {
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(360px, 46vw, 720px);
  translate: 0 -50%;
}

.k-pet-in {
  position: relative;
  z-index: 1;
}

.k-pet-copy {
  width: min(100%, 480px);
}

.k-pet-line {
  margin: 28px 0 40px;
  color: var(--k-text);
  font-family: var(--k-song);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.k-pet-act {
  margin: 0;
}

/* ── 康立波老师 ─────────────────────────────────────────────────────────
 * 手机上画像在上、字居中；768px 起画像在左、字在右，字靠左，头衔一列前一道竖的细界栏。
 */
.k-master {
  padding: var(--k-section) 0 calc(var(--k-section) * 0.7);
}

.k-master-in,
.k-master-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 画像下缘化进纸里，不留一刀平的肩线。 */
.k-portrait {
  width: clamp(200px, 19vw, 270px);
  margin: 0 0 36px;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent);
  mask-image: linear-gradient(180deg, #000 76%, transparent);
}

.k-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.k-master .k-title {
  margin-bottom: 18px;
  padding-left: 0.2em;
}

.k-master-since {
  max-width: 32em;
  margin: 0 0 28px;
  color: var(--k-text-2);
  font-family: var(--k-sans);
  font-size: 15px;
  line-height: 1.9;
}

.k-credits {
  display: grid;
  gap: 6px;
  margin: 0 0 52px;
  padding: 0;
  list-style: none;
  color: var(--k-muted);
  font-family: var(--k-sans);
  font-size: 14px;
  line-height: 1.8;
}

.k-oath {
  margin: 0;
  color: var(--k-ink);
  font-family: var(--k-brush);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .k-master-in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 104px);
    text-align: left;
  }

  .k-portrait {
    justify-self: end;
    width: clamp(260px, 27vw, 380px);
    margin: 0;
  }

  .k-master-copy {
    align-items: flex-start;
    text-align: left;
  }

  .k-master .k-title {
    margin-bottom: 22px;
    padding-left: 0;
  }

  .k-master-since {
    margin-bottom: 32px;
  }

  .k-credits {
    margin-bottom: 44px;
    padding-left: 20px;
    border-left: 1px solid var(--k-rule);
  }
}

/* ── 听听他们怎么说 ─────────────────────────────────────────────────────
 * 不做卡片：一段话一栏，栏与栏之间一道竖的细界栏，像手卷上的乌丝栏；两头化进纸里。
 * 跑马灯同现行首页 .voices-track：两份并排一起左移一整份，悬停或键盘走进去时停住。
 */
.k-voices {
  padding: calc(var(--k-section) * 0.3) 0 calc(var(--k-section) * 0.4);
}

.k-voices .k-title {
  margin-bottom: clamp(36px, 5vw, 72px);
}

.k-voices-rail {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.k-voices-track {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: k-roll 130s linear infinite;
}

@keyframes k-roll {
  to {
    transform: translateX(-100%);
  }
}

.k-voices-rail:hover .k-voices-track,
.k-voices-rail:focus-within .k-voices-track {
  animation-play-state: paused;
}

.k-voice {
  display: flex;
  flex: none;
  flex-direction: column;
  box-sizing: border-box;
  width: clamp(280px, 27vw, 400px);
  padding: 4px clamp(28px, 3vw, 48px);
  border-left: 1px solid var(--k-rule);
}

.k-voice blockquote {
  flex: 1 1 auto;
  margin: 0;
  color: var(--k-text);
  font-family: var(--k-song);
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.02em;
}

.k-voice-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 24px 0 0;
}

.k-voice-sign {
  flex: none;
  width: 26px;
  height: 7px;
  fill: var(--k-ink);
  opacity: 0.75;
}

.k-voice-name {
  color: var(--k-ink);
  font-family: var(--k-song);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.k-voice-meta {
  color: var(--k-muted);
  font-family: var(--k-sans);
  font-size: 13px;
}

/* ── 常见问题 ───────────────────────────────────────────────────────── */
.k-faq {
  padding: calc(var(--k-section) * 0.6) 0 calc(var(--k-section) * 0.3);
}

.k-faq-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: start;
}

.k-faq-list details {
  border-bottom: 1px solid var(--k-rule);
}

.k-faq-list details:first-child {
  border-top: 1px solid var(--k-rule);
}

.k-faq-list summary {
  position: relative;
  display: block;
  padding: 22px 44px 22px 0;
  color: var(--k-text);
  font-family: var(--k-song);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.k-faq-list summary:hover {
  color: var(--k-ink);
}

.k-faq-list summary::-webkit-details-marker {
  display: none;
}

/* 一横一竖，展开时竖的那笔收平；收起时一开始就立回去，不等高度收完。 */
.k-faq-list summary::before,
.k-faq-list summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 1px;
  background: var(--k-gold);
  transition: transform 0.45s var(--k-ease);
}

.k-faq-list summary::after {
  transform: rotate(90deg);
}

.k-faq-list details[open]:not(.is-closing) summary::after {
  transform: rotate(0deg);
}

/* 开合时高度在 .k-faq-body 上走，留白放在里层，收到 0 时才没有剩下的边。 */
.k-faq-list details.is-moving .k-faq-body {
  overflow: hidden;
}

.k-faq-text {
  padding: 0 0 26px;
  color: var(--k-text-2);
  font-family: var(--k-sans);
  font-size: 15px;
  line-height: 2;
}

.k-faq-text p {
  margin: 0 0 12px;
}

.k-faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.k-faq-links a {
  color: var(--k-ink);
  text-decoration: underline;
  text-decoration-color: var(--k-gold);
  text-underline-offset: 5px;
}

/* ── 收尾：远山与页脚沿用现行首页，只换掉那一方米色提问框 ───────────── */
.k-closing .closing-lede {
  color: var(--k-text);
  font-family: var(--k-song);
  font-style: normal;
  letter-spacing: 0.04em;
}

/* ── 平板与手机 ─────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .k-gzz {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 112px;
  }

  .k-gzz-in {
    justify-content: flex-start;
  }

  .k-gzz-copy {
    padding: 0;
  }

  .k-gzz-art {
    order: 1;
    position: relative;
    align-self: flex-start;
    width: min(76vw, 520px);
    height: auto;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .k-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: calc(100svh - var(--header-h));
  }

  .k-hero-in {
    padding-top: 52px;
    padding-bottom: 0;
  }

  .k-hero-art {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: 150vw;
    margin-top: auto;
    margin-bottom: -10vw;
    translate: none;
  }

  .k-hero-links {
    gap: 6px 22px;
  }

  .k-gzz-title {
    margin-bottom: 24px;
  }

  .k-book {
    --k-from-w: 64vw;
    padding-top: calc(0.8 * var(--k-from-w) + 24px);
  }

  .k-book-head {
    gap: 28px;
  }

  .k-book-lede {
    font-size: 22px;
  }

  .k-vol-from {
    justify-content: flex-start;
    margin-top: 40px;
    padding-right: var(--k-gutter);
  }

  .k-vol-to {
    display: block;
    min-height: 0;
    margin-top: 56px;
  }

  .k-vol-art {
    position: relative;
    width: 82vw;
  }

  .k-vol-in {
    margin-top: -8px;
    padding-left: var(--k-gutter);
  }

  .k-pages {
    grid-template-columns: 64px auto minmax(0, 1fr);
    column-gap: 12px;
  }

  .k-pages li {
    column-gap: 12px;
  }

  .k-detail-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }

  .k-detail-item:nth-child(n) {
    margin-top: 0;
  }

  .k-detail-art {
    width: 78%;
  }

  .k-detail-item:nth-child(2) .k-detail-art {
    margin-left: auto;
  }

  .k-shu {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: calc(var(--k-section) * 0.4);
  }

  /* 画放大一点，左边多出的一截出到屏幕外。 */
  .k-shu-arts {
    position: relative;
    top: auto;
    width: 112vw;
    margin-left: -12vw;
    translate: none;
  }

  .k-shu-copy {
    width: 100%;
  }

  .k-shu-names {
    --k-col: calc((100vw - 2 * var(--k-gutter)) / 9);
    font-size: calc(var(--k-col) * 0.5);
  }

  .k-shu-panel {
    gap: 24px;
  }

  .k-pet {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 40px;
  }

  .k-pet-art {
    order: 1;
    position: relative;
    top: auto;
    align-self: flex-end;
    width: 108vw;
    margin-top: 8px;
    translate: none;
  }

  .k-faq-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .k-faq-list summary {
    font-size: 17px;
  }

  .k-voice {
    width: 78vw;
    padding: 2px 24px;
  }

  .k-voice blockquote {
    font-size: 17px;
  }
}

/* ── 中日文以外的页（拉丁文各语种、越南文、韩文、泰文）──────────────────
 * 排法同旧版英文首页：名字和题句用 Cormorant Garamond（styles.css 的 Libo Display，带越南文那一片），
 * 大标题和老师那句用它的斜体，正文用系统无衬线。Cormorant 字身矮，同字号比宋体小一圈，各处放大一档；
 * 小写字母不疏排，中文那几处装饰字距都收掉，行高收到拉丁文的分寸；段落交给 text-wrap 防孤词。
 * 选择器写 html:not(:lang(zh), :lang(ja))，特指度和原先的 html:not(:lang(zh), :lang(ja)) 一样，层叠次序不变。
 */
html:not(:lang(zh), :lang(ja)) {
  --k-song: 'Libo Display', Georgia, 'Times New Roman', serif;
  --k-brush: var(--k-song);
  --k-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 韩文、泰文 Libo Display 没有，接着落到各自的字栈（同 styles.css；泰文的衬线体就是无衬线）。 */
html:lang(ko) {
  --k-song: 'Libo Display', 'Apple Myungjo', 'AppleMyungjo', Batang, 'Source Han Serif K', 'Noto Serif CJK KR', 'Noto Serif KR',
    Georgia, serif;
  --k-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR',
    'Noto Sans KR', sans-serif;
}

html:lang(th) {
  --k-song: 'Libo Display', 'Noto Sans Thai', 'Leelawadee UI', Thonburi, Tahoma, sans-serif;
  --k-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Leelawadee UI', Thonburi, Tahoma,
    sans-serif;
}

html:not(:lang(zh), :lang(ja)) .k-hero-title {
  --k-step: 150ms;
  font-size: max(24px, min(clamp(50px, 6.2vw, 108px), (100vw - 2 * var(--k-gutter)) / var(--k-hero-em, 1)));
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-line-2 {
  padding-left: 1.2em;
}

/* 字宽是估的：估窄了或缩到底还放不下，就在词间换行（汉字、假名一行不断）。 */
html:not(:lang(zh), :lang(ja)) .k-line {
  white-space: normal;
  text-wrap: balance;
}

html:not(:lang(zh), :lang(ja)) .k-ink-btn {
  font-size: 19px;
}

html:not(:lang(zh), :lang(ja)) .k-ink-btn > span {
  padding-left: 0;
  letter-spacing: 0.01em;
}

html:not(:lang(zh), :lang(ja)) .k-pill {
  padding: 0 30px;
  font-size: 18px;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-title {
  font-size: clamp(40px, 3.8vw, 58px);
  line-height: 1.1;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-master .k-title {
  padding-left: 0;
}

html:not(:lang(zh), :lang(ja)) .k-gzz-title {
  font-size: clamp(46px, 5vw, 78px);
  font-weight: 500;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-gzz-line {
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.4;
  letter-spacing: 0;
}

/* 「Book of Me」仍是竖的题签，西文横躺着从上往下读，像书脊。 */
html:not(:lang(zh), :lang(ja)) .k-book-title {
  font-size: clamp(40px, 3.8vw, 58px);
  letter-spacing: 0.02em;
}

html:not(:lang(zh), :lang(ja)) .k-book-lede {
  font-size: clamp(27px, 2.7vw, 42px);
  line-height: 1.3;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-vol-name {
  margin-bottom: 12px;
  font-size: clamp(31px, 2.7vw, 40px);
  line-height: 1.12;
  letter-spacing: 0;
}

/* 英文句子长，两卷的字块放宽一点，三页那句才排得进一行。 */
html:not(:lang(zh), :lang(ja)) .k-vol-copy {
  width: min(100%, 480px);
}

html:not(:lang(zh), :lang(ja)) .k-vol-from .k-vol-copy {
  width: auto;
  max-width: 480px;
}

html:not(:lang(zh), :lang(ja)) .k-vol-line {
  line-height: 1.7;
}

html:not(:lang(zh), :lang(ja)) .k-page-name {
  font-size: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

html:not(:lang(zh), :lang(ja)) .k-detail-name {
  font-size: 29px;
  line-height: 1.15;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-detail-line {
  line-height: 1.65;
}

/*
 * 英文的九门竖不起来，排成三行三列、靠左；专名线落到名字底下，从左往右写。
 * 一列至少放得下最长那个词（--k-shu-word，kit.mjs 估的），放不下就少排一列；最多三列（减半像素防取整挤掉一列）。
 */
html:not(:lang(zh), :lang(ja)) .k-shu-names {
  --k-shu-hide: inset(0 100% 0 0);
  --k-shu-gap: 28px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--k-shu-word, 0) * 1em, (100% - 2 * var(--k-shu-gap)) / 3 - 0.5px), 1fr)
  );
  gap: 6px var(--k-shu-gap);
  font-size: clamp(20px, 0.9rem + 0.45vw, 24px);
}

html:not(:lang(zh), :lang(ja)) .k-shu-tab {
  justify-content: flex-start;
  padding: 8px 0 16px;
  text-align: start;
}

/* 词是估的，估窄了就在格里折开，不压到邻格。 */
html:not(:lang(zh), :lang(ja)) .k-shu-name {
  min-width: 0;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  writing-mode: horizontal-tb;
}

html:not(:lang(zh), :lang(ja)) .k-shu-mark {
  top: auto;
  right: 0;
  bottom: -0.34em;
  left: 0;
  width: 100%;
  height: 0.2em;
}

html:not(:lang(zh), :lang(ja)) .k-shu-line {
  font-size: clamp(22px, 1rem + 0.5vw, 27px);
  line-height: 1.35;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-pet-line {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.32;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-master-since {
  line-height: 1.7;
}

html:not(:lang(zh), :lang(ja)) .k-credits {
  gap: 8px;
  line-height: 1.55;
}

html:not(:lang(zh), :lang(ja)) .k-oath {
  font-size: clamp(30px, 2.7vw, 42px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-voice blockquote {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-voice-name {
  font-size: 17px;
  letter-spacing: 0;
}

/* 英文的地方和职业长，一律另起一行，跟名字左缘对齐（让过前面那一短笔和间距）。 */
html:not(:lang(zh), :lang(ja)) .k-voice-meta {
  flex-basis: 100%;
  padding-left: 36px;
}

html:not(:lang(zh), :lang(ja)) .k-faq-list summary {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja)) .k-faq-text {
  line-height: 1.7;
}

html:not(:lang(zh), :lang(ja)) .k-closing .closing-lede {
  font-size: clamp(23px, 1.2rem + 0.9vw, 31px);
  line-height: 1.4;
  letter-spacing: 0;
}

html:not(:lang(zh), :lang(ja))
  :is(.k-gzz-line, .k-vol-line, .k-detail-line, .k-pet-line, .k-master-since, .k-oath, .k-voice blockquote, .k-faq-text p) {
  text-wrap: pretty;
}

@media (max-width: 767px) {
  html:not(:lang(zh), :lang(ja)) .k-book-lede {
    font-size: 26px;
  }

  html:not(:lang(zh), :lang(ja)) .k-shu-names {
    --k-shu-gap: 16px;
    row-gap: 2px;
    font-size: 19px;
  }

  html:not(:lang(zh), :lang(ja)) .k-shu-line {
    font-size: 22px;
  }

  /* 手机上那句排到页名底下。 */
  html:not(:lang(zh), :lang(ja)) .k-page-line {
    grid-column: 2 / -1;
  }

  html:not(:lang(zh), :lang(ja)) .k-faq-list summary {
    font-size: 20px;
  }

  html:not(:lang(zh), :lang(ja)) .k-voice blockquote {
    font-size: 20px;
  }
}

/* ── 减弱动效：墨入、上浮直接成形，晕开直接是原图，一笔写出不走过渡 ── */
@media (prefers-reduced-motion: reduce) {
  .k-js [data-rise],
  .k-js .k-line > span,
  .k-js .k-shu-name > span,
  .k-js .k-art img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  .k-js .k-ask-line,
  .k-js .k-pages .k-tome {
    clip-path: none !important;
    transition: none !important;
  }

  /* 专名线只跟着选中走，不写不淡。 */
  .k-shu-mark,
  .k-shu-tab {
    transition: none !important;
  }

  .k-voices-rail {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .k-voices-track {
    animation: none;
  }

  .k-voices-track[aria-hidden='true'] {
    display: none;
  }
}

/* 韩文、泰文没有斜体，浏览器硬斜过去很难看，那几处斜体改回正体（放在最后：特指度和上面那几条斜体一样，靠先后压住）。 */
html:is(:lang(ko), :lang(th)) :is(.k-hero-title, .k-oath) {
  font-style: normal;
}