/* 首页改版（2026-11-06）：主推横条、最近更新、怪盗档案、全部功能大字目录、字体统一、人物按头部定位。
   覆盖在原有样式之后加载，原样式不动。内容来自 js/home-config.js，交互在 js/home-features.js。
   界面文字统一用与两个测试共用的 VN 宋体 / VN Latin（apps/persona-quiz/fonts，子集由 scripts/build-quiz-fonts.py 生成）。
   整页不使用文字或 CSS 画的箭头。 */

@font-face { font-family: "VN Serif"; font-weight: 400; font-display: swap; src: url("../apps/persona-quiz/fonts/vn-serif-400.woff") format("woff"); }
@font-face { font-family: "VN Serif"; font-weight: 600; font-display: swap; src: url("../apps/persona-quiz/fonts/vn-serif-600.woff") format("woff"); }
@font-face { font-family: "VN Serif"; font-weight: 900; font-display: swap; src: url("../apps/persona-quiz/fonts/vn-serif-900.woff") format("woff"); }
@font-face { font-family: "VN Latin"; font-weight: 300 700; font-display: swap; src: url("../apps/persona-quiz/fonts/vn-latin.woff") format("woff"); }

:root {
  --hr-serif: "VN Serif", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --hr-latin: "VN Latin", "Cormorant Garamond", "Times New Roman", serif;
  --hr-rose: #ff3851;
  --hr-violet: #b48cff;
  --hr-line: linear-gradient(90deg, transparent, rgba(175, 79, 255, .55) 12%, rgba(255, 38, 68, .5) 50%, rgba(175, 79, 255, .55) 88%, transparent);
  --hr-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8 11.2 6 6 11.2 .8 6Z' fill='none' stroke='%23a652ff' stroke-width='1.35'/%3E%3C/svg%3E");
  --hr-diamond-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8 11.2 6 6 11.2 .8 6Z' fill='%23ff3851' stroke='%23ff3851' stroke-width='1.35'/%3E%3C/svg%3E");
}

/* ======================= 字体统一（电脑端） ======================= */
.kv-stage .home-site-nav__label { font-family: var(--hr-serif); font-weight: 900; }
.kv-stage .home-site-nav a small,
.kv-stage .home-brand__copy span { font-family: var(--hr-latin); letter-spacing: .26em; }
.kv-stage .home-hero-line { font-family: var(--hr-serif); font-weight: 600; letter-spacing: .14em; }

/* ======================= 本期推荐：菱形横条本身就是入口 ======================= */
.kv-stage a.home-title-frame { color: var(--home-ui-white, #fff8ef); text-decoration: none; pointer-events: auto; cursor: pointer; }
.kv-stage .home-title-frame b { margin-left: 0; font-family: var(--hr-serif); font-weight: 600; letter-spacing: .16em; }
.kv-stage .home-title-frame b::before { content: none; }
.kv-stage .home-title-frame b em { margin-right: .2em; color: var(--hr-rose); font-style: normal; }
.kv-stage .home-title-frame b span { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 180ms ease, text-shadow 180ms ease; }
.kv-stage .home-title-frame::after { transition: filter 180ms ease; }
.kv-stage a.home-title-frame:hover b span,
.kv-stage a.home-title-frame:focus-visible b span { border-bottom-color: var(--hr-rose); text-shadow: 0 0 14px rgba(255, 56, 81, .55); }
.kv-stage a.home-title-frame:hover::after,
.kv-stage a.home-title-frame:focus-visible::after { filter: drop-shadow(0 0 10px rgba(255, 56, 81, .95)) brightness(1.6); }
.kv-stage a.home-title-frame:focus-visible { outline: 1px solid rgba(255, 248, 239, .6); outline-offset: 4px; }

/* ======================= 底栏：左下最近更新，右下站名与版权说明 ======================= */
.kv-stage a.home-updates { color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; }
.kv-stage .home-updates b { font-family: var(--hr-serif); font-weight: 600; font-size: 1.04rem; letter-spacing: .16em; }
.kv-stage .home-updates b small { margin-left: .9em; font-family: var(--hr-latin); font-size: .78rem; letter-spacing: .24em; color: rgba(255, 56, 81, .8); }
.kv-stage .home-updates > span { width: fit-content; padding-bottom: 2px; border-bottom: 1px solid transparent; font-family: var(--hr-serif); letter-spacing: .06em; color: rgba(255, 248, 239, .82); transition: border-color 180ms ease, color 180ms ease; }
.kv-stage a.home-updates:hover > span,
.kv-stage a.home-updates:focus-visible > span { color: #fff; border-bottom-color: var(--hr-rose); }
.kv-stage .home-site-info { gap: 8px; justify-items: end; font-family: var(--hr-serif); }
.kv-stage .home-site-info span { font-size: .8rem; letter-spacing: .14em; color: rgba(255, 248, 239, .62); }
.kv-stage .home-site-info a { pointer-events: auto; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 248, 239, .3); font-size: .82rem; letter-spacing: .16em; color: rgba(255, 248, 239, .76); text-decoration: none; }
.kv-stage .home-site-info a:hover, .kv-stage .home-site-info a:focus-visible { color: #fff; border-bottom-color: var(--hr-rose); }

/* ======================= 怪盗档案 ======================= */
.home-profile { --profile-accent: #d7263d; display: inline-flex; align-items: center; gap: 14px; color: #fff8ef; text-decoration: none; pointer-events: auto; }
.kv-stage .home-profile { padding: 6px 0 6px 18px; border-left: 1px solid rgba(255, 248, 239, .2); }
.home-profile__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.home-profile__icon::before { content: ""; position: absolute; inset: 5px; transform: rotate(45deg); border: 1px solid var(--profile-accent);
  background: rgba(20, 8, 26, .72); box-shadow: 0 0 14px color-mix(in srgb, var(--profile-accent) 55%, transparent); transition: box-shadow 180ms ease; }
.home-profile__icon img { position: relative; width: 24px; height: 24px; object-fit: contain; }
.home-profile__text { display: grid; gap: 6px; white-space: nowrap; font-family: var(--hr-serif); }
.home-profile__text small { font: 400 10px/1 var(--hr-latin); letter-spacing: .3em; color: rgba(255, 248, 239, .55); }
.home-profile__text b { font-weight: 900; font-size: 16px; line-height: 1; letter-spacing: .14em; }
.home-profile__text b span { margin-left: .35em; font: 600 15px/1 var(--hr-latin); letter-spacing: .12em; color: var(--profile-accent); }
.home-profile__text i { font-style: normal; font-size: 11px; line-height: 1; letter-spacing: .16em; color: rgba(255, 248, 239, .62); }
.home-profile:hover .home-profile__icon::before,
.home-profile:focus-visible .home-profile__icon::before { box-shadow: 0 0 22px var(--profile-accent); }
.home-profile:focus-visible { outline: 1px solid rgba(255, 248, 239, .6); outline-offset: 4px; }
.home-profile.is-empty .home-profile__icon::before { border-style: dashed; border-color: rgba(255, 248, 239, .5); box-shadow: none; }
.home-profile.is-empty .home-profile__icon img { opacity: .35; filter: grayscale(1); }
.home-profile.is-empty .home-profile__text b { font-size: 15px; color: rgba(255, 248, 239, .9); }
.home-profile.is-empty .home-profile__text i { justify-self: start; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 56, 81, .6); color: var(--hr-rose); }
.home-profile.is-empty:hover .home-profile__text i { border-bottom-color: var(--hr-rose); color: #fff; }

/* ======================= 人物构图：以头部为基准（电脑端） ======================= */
/* 宽度随屏幕高度（不超过 88vw）；人物头部在原图约 13% 高度处，固定落在屏幕 38% 高度。
   原图 1788×2160，高宽比 1.208。16:9、16:10 与更方的屏幕看起来一致。 */
@media (min-width: 901px) and (min-height: 501px), (min-width: 1001px) {
  .kv-hero .kv-character {
    --kv-w: min(134svh, 88vw);
    width: var(--kv-w);
    min-width: 0;
    top: calc(38svh - var(--kv-w) * 1.208 * .13);
    bottom: auto;
  }
}

/* ======================= 全部功能：整页压暗的大字目录 ======================= */
.home-directory { position: fixed; inset: 0; z-index: 2000; color: #fff8ef; font-family: var(--hr-serif); }
.home-directory[hidden] { display: none; }
.home-directory__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 3, 14, .94) 0%, rgba(8, 3, 14, .88) 48%, rgba(8, 3, 14, .55) 78%, rgba(8, 3, 14, .35));
  opacity: 0; transition: opacity 260ms ease; }
.home-directory.is-open .home-directory__scrim { opacity: 1; }
.home-directory__body { position: absolute; left: 7.2%; top: 18%; width: min(680px, 86vw); max-height: 74svh; overflow-y: auto;
  opacity: 0; transform: translateY(14px); transition: opacity 260ms ease, transform 260ms ease; scrollbar-width: thin; scrollbar-color: rgba(180, 140, 255, .4) transparent; }
.home-directory.is-open .home-directory__body { opacity: 1; transform: none; }
.home-directory__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.home-directory__head p { margin: 0; font-size: 14px; letter-spacing: .3em; color: rgba(244, 236, 248, .85); }
.home-directory__head p span { margin-right: 14px; font: 400 12px/1 var(--hr-latin); letter-spacing: .4em; color: rgba(180, 140, 255, .9); }
.home-directory__close { padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(244, 236, 248, .35); background: none; color: rgba(244, 236, 248, .8);
  font: 600 14px/1 var(--hr-serif); letter-spacing: .22em; cursor: pointer; }
.home-directory__close:hover, .home-directory__close:focus-visible { color: #fff; border-bottom-color: var(--hr-rose); outline: none; }
.home-directory__list { margin: 0; padding: 0; list-style: none; }
.home-directory__list li + li { background: linear-gradient(90deg, rgba(175, 79, 255, .5), rgba(255, 38, 68, .35) 40%, transparent 85%) top / 100% 1px no-repeat; }
.home-directory__item { position: relative; display: grid; gap: 12px; padding: 22px 0 22px 34px; color: inherit; text-decoration: none; outline: none; }
.home-directory__item::before { content: ""; position: absolute; left: 0; top: 37px; width: 12px; height: 12px; background: var(--hr-diamond) center / 12px no-repeat; opacity: .6; transition: opacity 160ms ease, filter 160ms ease; }
.home-directory__item:hover::before, .home-directory__item:focus-visible::before { background-image: var(--hr-diamond-on); opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 56, 81, .9)); }
.home-directory__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-weight: 900; font-size: 44px; line-height: 1.05; letter-spacing: .12em; transition: text-shadow 160ms ease; }
.home-directory__item:hover .home-directory__name, .home-directory__item:focus-visible .home-directory__name { text-shadow: 0 0 24px rgba(255, 56, 81, .45); }
.home-directory__name small { font: 400 12px/1 var(--hr-latin); letter-spacing: .34em; color: rgba(180, 140, 255, .85); }
.home-directory__name em { font: 600 11px/1 var(--hr-latin); font-style: normal; letter-spacing: .26em; color: var(--hr-rose); }
.home-directory__hook { font-size: 15px; line-height: 1.5; letter-spacing: .08em; color: rgba(244, 236, 248, .66); }
.home-directory__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 13px; letter-spacing: .16em; color: rgba(244, 236, 248, .45); }
.home-directory__foot a { color: rgba(244, 236, 248, .7); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(244, 236, 248, .25); }
.home-directory__foot a:hover, .home-directory__foot a:focus-visible { color: #fff; border-bottom-color: var(--hr-rose); outline: none; }
html.home-directory-open { overflow: hidden; }
/* 目录占用左侧原本放标题的位置，标题区与底栏暂时隐去 */
html.home-directory-open .kv-stage .home-hero-copy,
html.home-directory-open .kv-stage .home-bottom-band__left { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .home-directory__scrim, .home-directory__body { transition: none; }
}

/* ======================= 手机端 ======================= */
@media (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {
  .home-directory__scrim { background: rgba(8, 3, 14, .9); }
  .home-directory__body { left: 24px; right: 24px; top: max(84px, calc(env(safe-area-inset-top) + 64px)); width: auto; max-height: calc(100svh - 120px); }
  .home-directory__item { gap: 8px; padding: 18px 0 18px 26px; }
  .home-directory__item::before { top: 27px; width: 10px; height: 10px; background-size: 10px; }
  .home-directory__name { gap: 4px 12px; font-size: 28px; letter-spacing: .1em; }
  .home-directory__name small { font-size: 10px; letter-spacing: .26em; }
  .home-directory__name em { font-size: 10px; }
  .home-directory__hook { font-size: 13px; }
}
.home-mobile-shell .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-mobile-shell .home-profile { gap: 8px; }
.home-mobile-shell .home-profile__icon { width: 38px; height: 38px; }
.home-mobile-shell .home-profile__icon img { width: 20px; height: 20px; }
.home-mobile-shell .home-profile__text b { font-size: 13px; letter-spacing: .1em; }
.home-mobile-shell .home-profile__text b span { margin-left: 0; font-size: 14px; }
.home-mobile-shell .home-profile.is-empty .home-profile__text b { font-size: 12px; color: rgba(255, 248, 239, .75); }
.home-mobile-shell .hero-line { font-family: var(--hr-serif); font-weight: 600; letter-spacing: .1em; }
.home-mobile-shell .hero-feature { display: inline-block; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 56, 81, .5);
  font: 600 13px/1.4 var(--hr-serif); letter-spacing: .14em; color: rgba(255, 248, 239, .92); text-decoration: none; }
.home-mobile-shell .hero-feature em { font-style: normal; color: var(--hr-rose); }
.home-mobile-shell .dock .primary-link > img { width: 34px; height: 34px; object-fit: contain; }