/* 主页：古画横幅 + 书名 + 两扇门（論典 / 人機問答）+ 五分与例题 */
body.home { min-height: 100vh; display: flex; flex-direction: column; }
.hm-banner { position: absolute; left: 0; right: 0; top: 0; height: 360px; z-index: 0;
  background: url("/static/banner-xishan.jpg") center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  opacity: .75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm-banner { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; opacity: .35; }
}
.hm-top { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 16px 20px 0; }

main.hm { display: block; position: relative; z-index: 1; flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 0 16px; }
.hm-title { text-align: center; padding: 215px 0 40px; }
.hm-title h1 { font-family: var(--font-scripture); font-weight: 700; font-size: 46px; letter-spacing: .35em;
  margin: 0 0 0 .35em; color: var(--ink); }
.hm-by { font-family: var(--font-scripture); color: var(--muted); font-size: 15px; letter-spacing: .12em; margin: 10px 0 0; }
.hm-by span { white-space: nowrap; }

/* 两册线装书：深色纸面书皮、左上题签、右侧四眼订线与包角、左下露出书页 */
.hm-doors { display: flex; justify-content: center; gap: clamp(22px, 7vw, 64px); padding-top: 6px; }
.book { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
/* 书随屏幕宽度等比缩放；题签里的字按书宽（cqw）缩放，窄屏也不出格 */
.book-cover { position: relative; display: block; width: clamp(112px, 37vw, 214px); aspect-ratio: 214 / 300; container-type: inline-size; border-radius: 2px 3px 3px 2px;
  /* 做旧：斑驳的光影、四角磨暗 */
  background: radial-gradient(ellipse at 30% 20%, rgba(255,240,210,.10), transparent 60%),
    radial-gradient(ellipse at 80% 85%, rgba(0,0,0,.28), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(0,0,0,.18), transparent 30%),
    linear-gradient(100deg, rgba(255,255,255,.04), rgba(0,0,0,.14)), var(--cover);
  box-shadow: -3px 3px 0 #e9dfc6, -5px 5px 0 #d8caa9, -7px 7px 0 #e3d6b8, -8px 8px 0 #cdbd99,
    -10px 16px 26px -10px rgba(40,30,20,.55), inset 0 0 26px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease; }
/* 纸纹：一层暖色细噪，叠在书皮上 */
.book-cover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .5; mix-blend-mode: overlay;
  pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.book-qing { --cover: #3a4656; --thread: #d9ccb0; }
.book-he { --cover: #5d4b38; --thread: #ddcfb2; }
.book:hover .book-cover { transform: translateY(-6px) rotate(-1deg);
  box-shadow: -3px 3px 0 #efe8d8, -5px 5px 0 #e0d7c3, -7px 7px 0 #ece4d1, -8px 8px 0 #d6ccb6,
    -14px 26px 34px -12px rgba(40,30,20,.6), inset 0 0 26px rgba(0,0,0,.35); }
/* 题签：米色纸条，细双线框，楷书竖题 */
.book-slip { position: absolute; top: 8.4cqw; left: 8.4cqw; width: 27cqw; height: 91.6cqw; display: block;
  box-sizing: border-box; overflow: hidden; background: #ece0c2; border: 1px solid #bfae88;
  box-shadow: inset 0 0 0 3px #ece0c2, inset 0 0 0 4px #8e7d5e, inset 0 0 14px rgba(120,90,40,.25), 1px 1px 2px rgba(0,0,0,.3); }
/* 题签只题书名，居中竖写（固定定位，不用弹性排版：iPhone 浏览器会把竖排列宽算错，把字推出框） */
.slip-title { position: absolute; top: 7cqw; left: 50%; width: 1em; margin-left: -.5em; writing-mode: vertical-rl;
  line-height: 1; white-space: nowrap; font-family: "Cactus Classical Serif", "Noto Serif TC", serif; font-size: 12.1cqw;
  letter-spacing: .08em; color: #2b2620; }
/* 装订 */
.book-bind { position: absolute; top: 0; right: 0; width: 40px; height: 100%; }
.book-bind .crease { stroke: rgba(0,0,0,.28); stroke-width: 1; }
.book-bind .thread line { stroke: var(--thread); stroke-width: 1.3; opacity: .85; }
.book-bind .hole circle { fill: rgba(0,0,0,.45); }
.book-bind .corner { fill: rgba(0,0,0,.22); }
.book-cap { font-family: var(--font-answer); font-size: 13.5px; color: var(--muted); letter-spacing: .06em; text-align: center;
  max-width: clamp(120px, 40vw, 230px); line-height: 1.7; transition: color .25s; }
.book:hover .book-cap { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .book-cover { box-shadow: -3px 3px 0 #4a443b, -5px 5px 0 #3b362f, -7px 7px 0 #48423a,
    -10px 16px 26px -10px rgba(0,0,0,.7); }
}

.hm-more { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0 50px; }
.hm-col { padding: 0 6px; }
.hm-label { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); letter-spacing: .15em;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
#parts, #examples { list-style: none; margin: 0; padding: 0; }
#parts a, #examples a { display: flex; align-items: baseline; gap: 12px; padding: 7px 2px; text-decoration: none;
  color: var(--ink); border-bottom: 1px dashed var(--line); font-family: var(--font-scripture); font-size: 16px; }
#parts a:hover, #examples a:hover { color: var(--accent); }
#parts .pn { min-width: 5.5em; }
#parts .pr { font-family: var(--font-ui); font-size: 12px; color: var(--muted); white-space: nowrap; }
#parts .pg { font-family: var(--font-answer); font-size: 13.5px; color: var(--muted); flex: 1; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 接著讀：放在「瑜伽師地論」书的说明下面一行；右边书下留同高空位，保持对齐 */
.door { display: flex; flex-direction: column; align-items: center; }
.book-cont { display: block; margin-top: 6px; max-width: clamp(120px, 40vw, 230px); font-family: var(--font-scripture);
  font-size: 13.5px; line-height: 1.7; color: var(--accent); text-decoration: none; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-cont[hidden] { display: none; }
.book-cont:hover { text-decoration: underline; text-underline-offset: 3px; }
.book-cont .ct-k { color: var(--muted); font-size: 12.5px; }
.book-cont-pad { visibility: hidden; }

/* 教材出自漢修學苑：左上角，与右侧登录、繁简按钮同一行；印章 + 名称，点开 hanhsiu.org */
.hm-credit { margin-right: auto; display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px;
  color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); }
.hm-credit img { width: 36px; height: 36px; opacity: .85; transition: opacity .2s; }
.hm-credit .hc-text { display: flex; flex-direction: column; line-height: 1.35; }
.hm-credit .hc-k { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .05em; }
.hm-credit .hc-name { font-family: var(--font-scripture); font-size: 15px; letter-spacing: .15em; color: var(--ink); }
.hm-credit:hover { border-color: var(--accent); } .hm-credit:hover img { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-credit img { filter: invert(1); } }   /* 黑印在深色底上反白 */
.hm-foot { position: relative; z-index: 1; text-align: center; padding: 16px; font-family: var(--font-ui); font-size: 12.5px; }
.hm-foot a { color: var(--muted); text-decoration: none; }
.hm-foot a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .hm-banner { height: 220px; }
  .hm-title { padding: 140px 0 28px; }
  .hm-title h1 { font-size: 34px; letter-spacing: .25em; margin-left: .25em; }
  .hm-by { font-size: 13px; letter-spacing: .05em; }
  .hm-more { grid-template-columns: 1fr; }
  .book-cap { font-size: 12px; }
  .hm-by { font-size: clamp(11px, 3.3vw, 13px); letter-spacing: .02em; line-height: 1.8; }
  #parts .pg { display: none; }
}

/* 两尾水墨鱼：满屏游动，在云烟之上、正文之下，只作点缀，不接收点击 */
.ink-fish { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink-fish { opacity: .35; } }

/* 云的微动：上方山腰一层薄雾缓缓飘过；下方云烟极慢地左右飘、轻轻起伏 */
.hm-mist { position: absolute; left: 0; right: 0; top: 0; height: 360px; z-index: 0; overflow: hidden; pointer-events: none; }
.hm-mist svg { position: absolute; top: 0; left: -30%; width: 160%; height: 100%; opacity: .9;
  animation: mist-drift 36s ease-in-out infinite alternate; will-change: transform; }
@keyframes mist-drift { from { transform: translateX(-14%); } to { transform: translateX(14%); } }
.home .ink-clouds { left: -25%; right: auto; width: 150%; transform-origin: 50% 100%;
  animation: cloud-drift 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes cloud-drift {
  0% { transform: translateX(10%) scaleY(1); }
  50% { transform: translateX(0) scaleY(1.12); }
  100% { transform: translateX(-10%) scaleY(1); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-mist { display: none; } }
@media (max-width: 760px) { .hm-mist { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .hm-mist svg, .home .ink-clouds { animation: none; } }

/* 首页一分为二：两本书正中一道淡墨竖线，贯穿到下方，把五分（读经）与例题（问答）分开 */
.hm-split { position: relative; }
.hm-split::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 24%, transparent) 8%,
    color-mix(in srgb, var(--ink) 24%, transparent) 92%, transparent); }
@media (max-width: 760px) { .hm-split::before { bottom: auto; height: clamp(180px, 60vw, 330px); } }

/* 手机上「接著讀」只显示卷号，科目名放不下 */
@media (max-width: 760px) { .book-cont .ct-sec { display: none; } }