/* 页头、页脚和首页。 */

/* ---------- 页头 ---------- */
.site-head { position: sticky; top: 0; z-index: 10; background: var(--sheet); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.site-head .in {
  max-width: 92rem; margin: 0 auto; padding-block: .7rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: nowrap; align-items: center; gap: 1.25rem;
  /* 始终只占一行：屏幕放不下时，导航可以左右滑动，网站名固定在左边 */
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.site-head .in::-webkit-scrollbar { display: none; }
/* 网站名固定在左边，导航从它下面滑过；阴影盖住左边的留白和右侧一小段 */
.brand { position: sticky; left: 0; z-index: 1; flex: none; background: var(--sheet);
  padding: .25rem .5rem .25rem 0; margin-right: -.5rem;
  box-shadow: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0 0 0 var(--sheet);
  font-family: var(--f-lat); font-style: italic; font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav { display: flex; flex: none; gap: .15rem; }
.nav:first-of-type { margin-right: auto; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; padding: .3rem .6rem; border-radius: 5px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--paper); }
.nav a[aria-current="page"] { color: var(--sheet); background: var(--lapis); }
/* 导航放不下时（由 js/router.js 判断），右边缘淡出，提示还能往左滑 */
.site-head.scrolls::after { content: ""; position: absolute; top: env(safe-area-inset-top, 0px); right: 0; bottom: 0; width: 2.5rem; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--sheet)); }
.site-head.scrolls.at-end::after { display: none; }
@media (max-width: 560px) {
  .site-head .in { gap: .75rem; padding-block: .55rem; }
  .brand { font-size: 1.5rem; }
}

/* ---------- 页脚 ---------- */
.site-foot { border-top: 1px solid var(--rule); background: var(--sheet); margin-top: auto; }
.site-foot .in { max-width: 92rem; margin: 0 auto; padding-block: .9rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .82rem; color: var(--ink-soft); }
.foot-name { font-family: var(--f-lat); font-style: italic; font-size: 1.15rem; color: var(--seal); }

/* ---------- 首页大标题 ---------- */
.hero .lead { margin: .35rem 0 0; color: var(--ink-soft); max-width: 44rem; }
.hero .origin { margin: .5rem 0 0; font-size: .82rem; color: var(--ink-soft); max-width: 44rem; font-family: var(--f-zh); }
.wordmark { margin: 0; display: flex; align-items: center; gap: 1.1rem; font-family: var(--f-lat); font-style: italic; font-weight: 400; font-size: 4.4rem; letter-spacing: .01em; line-height: 1; }
/* 竖排的回鹘文印章：横写的字转 90°，自上而下读 */
.seal { position: relative; flex: none; width: 2.5rem; height: 5.6rem; background: var(--seal); border-radius: 4px; transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px var(--seal), inset 0 0 0 3.5px var(--sheet); }
.seal > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg) translateY(-.24em);
  font-family: var(--f-ug); font-style: normal; font-size: 1.95rem; line-height: 1; color: var(--sheet); white-space: nowrap; }

/* ---------- 名句条（首页深色那一条） ---------- */
.saying-band { position: relative; background: var(--scroll); color: var(--scroll-ink); border-radius: 6px; border-top: 3px solid var(--seal);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.saying-band .btn { background: transparent; color: var(--scroll-ink); border-color: var(--scroll-rule); }
.saying-band .btn:hover { border-color: var(--scroll-ink); }
.say-next { position: absolute; top: .8rem; right: .9rem; font-size: .8rem; padding: .25rem .6rem; }
.saying { display: flex; gap: 1.4rem 2rem; align-items: center; flex-wrap: wrap; min-height: 9rem; padding-right: 4.5rem; }
.say-sc { font-size: calc(2.1rem * var(--s, 1)); line-height: 1.7; min-width: 0; flex: 1 1 20rem; overflow-wrap: anywhere; }
.say-sc.vert { writing-mode: vertical-lr; flex: none; max-height: 15rem; font-size: calc(1.9rem * var(--s, 1)); }
/* 回鹘文式竖写：竖排后整体转 180°，字形左转、自上而下、行从左到右；各浏览器都支持 */
.say-sc.rot { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); flex: none; max-height: 16rem; font-size: calc(1.9rem * var(--s, 1)); line-height: 1.9; }
.say-text { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.say-lang { font-size: .75rem; letter-spacing: .15em; color: var(--scroll-soft); }
.say-lat { margin: 0; font-family: var(--f-lat); font-size: 1.2rem; font-style: italic; }
.say-small { margin: 0; font-family: var(--f-lat); font-size: .9rem; color: var(--scroll-soft); }
.say-zh { margin: .3rem 0 0; font-family: var(--f-zh); font-size: 1.15rem; letter-spacing: .04em; }
.say-src { margin: 0; font-size: .78rem; color: var(--scroll-soft); }
.say-src::before { content: "—— "; }

/* ---------- 首页卡片：查词、对照转写 ---------- */
/* 卡片一样高：左边是固定大小的格子（示例字或书本图标），右边只写名字 */
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.tool-card { display: flex; gap: 1rem; align-items: center; height: 6rem; padding: 0 1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; }
.tool-card:hover { border-color: var(--lapis); }
.tool-card .glyph { flex: none; width: 4rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1.2; color: var(--lapis); white-space: nowrap; }
.tool-card .glyph.v { writing-mode: vertical-lr; font-size: 1.4rem; }
.tool-card .glyph.rot { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); font-size: 1.5rem; }
.tool-card b { font-size: 1rem; line-height: 1.35; min-width: 0; }
/* 首页词典卡片的示例字：每种文字一段，竖排的竖写；两种文字并排时略小 */
.tool-card .dglyph { gap: .35rem; }
.tool-card .dglyph .g.v { writing-mode: vertical-lr; font-size: 1.4rem; }
.tool-card .dglyph .g.rot { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); }
.tool-card .dglyph .g:not(.v):not(.rot) { font-size: 1.15rem; white-space: nowrap; }
.tool-card .dglyph.pair .g.v { font-size: 1.2rem; }
@media (max-width: 640px) {
  /* 手机上卡片较矮，竖写的示例字缩小，免得上下被裁掉 */
  .tool-card .dglyph .g.v, .tool-card .dglyph.pair .g.v { font-size: 1rem; }
}
#home-texts { margin-top: .6rem; }

@media (max-width: 560px) {
  .wordmark { font-size: 3.4rem; }
  .saying { padding-right: 0; padding-top: 1.4rem; }
  /* 手机上转写卡片两列，左边格子收窄（察合台文较宽，可以撑开）；词典名长，排成一列 */
  .tool-card { gap: .7rem; padding: 0 .8rem; }
  .tool-card .glyph { width: auto; min-width: 2.75rem; }
  #home-dict-links { grid-template-columns: 1fr; }
  #home-dict-links .tool-card { height: 3.75rem; }
}