/* ============================================================
   FATE — 史书会怎么写你
   档案与卷轴：纸墨编辑设计。宣纸底、墨字、朱砂印。
   依赖 /assets/wx.css（本文件在其后加载，可安全覆盖）。
   ============================================================ */

:root {
  --bg: #F4F0E7;
  --bg-2: #ECE6D7;
  --paper-2: #FAF7EF;
  --ink: #1D1D1B;
  --ink-dim: rgba(29, 29, 27, 0.66);
  --ink-faint: rgba(29, 29, 27, 0.4);
  --line: rgba(29, 29, 27, 0.16);
  --accent: #B43A2F;
  --accent-ink: #F4F0E7;
  --gold: #8A6C32;

  --f-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "SF Mono", monospace;

  --radius: 0px;
}

/* ---------- base over paper ---------- */
body {
  background-color: var(--bg);
  /* 宣纸纤维 + 陈纸斑驳，均由内联 SVG feTurbulence 生成 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.21 0 0 0 0 0.16 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)'/%3E%3C/svg%3E");
}
.display-1, .display-2 { letter-spacing: 0.04em; text-transform: none; }
.h-serif { font-weight: 900; }
.kicker { color: var(--ink-dim); }
.lead { color: var(--ink-dim); }
.accent { color: var(--accent); }

/* 浅纸底：覆盖引擎的 difference 白字导航，保证可读 */
.nav {
  mix-blend-mode: normal;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { font-family: var(--f-serif); font-weight: 900; letter-spacing: 0.06em; }
.nav__brand .ic { color: var(--accent); }
.nav__links a { opacity: 0.8; }
.nav__links a:hover { opacity: 1; color: var(--accent); }
@media (max-width: 860px) {
  .nav__links.is-open { background: var(--bg); color: var(--ink); border-left: 1px solid var(--line); }
}

/* ---------- 01 卷首 ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.hero__ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(14px, 3vh, 40px));
}
.hero__stage {
  flex: 1;
  display: flex; align-items: flex-end;
  gap: clamp(28px, 6vw, 96px);
  padding-block: clamp(20px, 4vh, 48px) clamp(28px, 5vh, 60px);
  min-height: min(64vh, 700px);
}
.hero__left { max-width: 34em; margin-right: auto; padding-bottom: 8px; }
.hero__subline { font-size: clamp(19px, 2.2vw, 27px); line-height: 1.6; margin-bottom: 18px; }
.hero__desc { font-size: 15px; line-height: 2.05; color: var(--ink-dim); max-width: 30em; }
.hero__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero__chips .chip { color: var(--ink-dim); border-color: var(--line); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.hero__en {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.52em;
  color: var(--ink-faint);
  height: min(44vh, 400px);
}
.hero__title {
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(52px, 10.5vh, 116px);
  line-height: 1; letter-spacing: 0.14em;
  color: var(--ink);
}
.hero__title .tcol + .tcol { margin-block-start: 0.16em; padding-block-start: 1.35em; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-block: 20px;
}
.hero__meta { font-size: 11px; letter-spacing: 0.2em; color: var(--ink-faint); }
.hero__scroll { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.3em; color: var(--ink-dim); transition: color 0.3s; }
.hero__scroll .ic { color: var(--accent); animation: fate-bob 2.4s var(--e-in-out) infinite; }
.hero__scroll:hover { color: var(--accent); }
@keyframes fate-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero__marquee {
  position: relative; z-index: 1;
  border-block: 1px solid var(--line);
  padding-block: 13px;
  font-size: 11.5px; letter-spacing: 0.3em; color: var(--ink-dim);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.hero__marquee .ic { color: var(--accent); width: 11px; height: 11px; margin-inline: 14px; }

/* ---------- 章头 ---------- */
.chap {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.chap .display-2 { margin-top: 20px; }
.chap__no {
  flex: none;
  font-size: clamp(44px, 5vw, 84px); line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-faint);
}
.chap--center { text-align: left; }

/* ---------- 02 样题 ---------- */
.sample__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 96px); align-items: start; }
.sample__note { display: flex; flex-direction: column; gap: 28px; }
.sample__tip { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.12em; color: var(--ink-faint); border-left: 2px solid var(--accent); padding-left: 16px; }
.sample__tip .ic { color: var(--accent); width: 14px; height: 14px; }

.qcard {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: clamp(24px, 3vw, 44px);
}
.qcard::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line); pointer-events: none; }
.qcard__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px; margin-bottom: 26px;
}
.qcard__chip { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); color: var(--gold); background: transparent; }
.qcard__situ { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.65; margin-bottom: 30px; }
.qcard__opts { border-bottom: 1px solid var(--line); }
.opt {
  position: relative;
  display: flex; align-items: baseline; gap: 20px;
  padding: 20px 6px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.opt__l {
  flex: none; width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  align-self: center;
  border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim);
  transition: color 0.35s, border-color 0.35s, background 0.35s;
}
.opt__t { font-size: clamp(19px, 1.8vw, 23px); transition: color 0.35s; }
.opt__g { margin-left: auto; font-size: 13px; color: var(--ink-faint); transition: color 0.35s; }
/* 史官划朱砂线：hover 划去该选项 */
.opt::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0) rotate(-0.35deg); transform-origin: left center;
  transition: transform 0.5s var(--e-out);
}
.opt:hover::after { transform: scaleX(1) rotate(-0.35deg); }
.opt:hover .opt__t { color: var(--ink-faint); }
.opt:hover .opt__l { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .opt::after { transform: scaleX(1) rotate(-0.35deg); opacity: 0.35; } }
.qcard__foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 16px; margin-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint);
}
@media (max-width: 960px) { .sample__grid { grid-template-columns: 1fr; } .opt__g { display: none; } }

/* ---------- 03 一百零八格 ---------- */
.section--tint { background: color-mix(in srgb, var(--bg-2) 72%, var(--bg)); border-block: 1px solid var(--line); }
.trial__lead { margin-bottom: clamp(36px, 4vw, 60px); }
.cells {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  gap: 6px;
  align-items: end;
  height: clamp(70px, 11vh, 116px);
}
.cell {
  height: 56%;
  border: 1px solid var(--line);
  border-radius: 1px;
  opacity: 0.85;
  transition: background 0.3s, border-color 0.3s, height 0.4s var(--e-out);
}
.cell.is-lit { background: var(--ink); border-color: var(--ink); height: var(--hh, 82%); }
.cell.is-cap { background: var(--accent); border-color: var(--accent); }
.trial__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
}
.trial__count { font-size: clamp(22px, 3vw, 36px); letter-spacing: 0.04em; }
.trial__total { font-size: 0.55em; color: var(--ink-faint); letter-spacing: 0.12em; }
.trial__cap {
  font-weight: 600; font-size: clamp(14px, 1.5vw, 17px); color: var(--ink-dim);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.7s var(--e-out), transform 0.7s var(--e-out);
}
.trial__cap.is-on { opacity: 1; transform: none; }
.trial__cap::before { content: "朱批"; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); padding: 3px 8px; margin-right: 14px; vertical-align: 2px; }
.trial__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 44px); }
.tstat { display: flex; align-items: baseline; gap: 20px; }
.tstat__num { font-size: clamp(48px, 6vw, 104px); line-height: 0.9; }
.tstat__label { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim); }
.tstat__label i { font-style: normal; font-size: 9.5px; letter-spacing: 0.24em; color: var(--ink-faint); }
@media (max-width: 960px) { .cells { grid-template-columns: repeat(27, 1fr); } .trial__stats { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 560px) { .cells { grid-template-columns: repeat(18, 1fr); } }

/* ---------- 04 十二原型 ---------- */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wall__cell {
  position: relative;
  min-height: clamp(170px, 18vw, 220px);
  padding: clamp(20px, 2.2vw, 30px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  transition: background 0.4s var(--e-out);
}
.wall__cell:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.wall__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); }
.wall__top .ic { width: 18px; height: 18px; color: var(--ink-dim); transition: color 0.35s, transform 0.5s var(--e-out); }
.wall__cell:hover .wall__top .ic { color: var(--accent); transform: rotate(-8deg); }
.wall__name { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: 0.1em; }
.wall__phrase { font-size: 13.5px; color: var(--ink-dim); letter-spacing: 0.06em; }
.wall__note { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-faint); }
.wall__note .ic { color: var(--accent); width: 14px; height: 14px; }
@media (max-width: 960px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wall { grid-template-columns: 1fr; } .wall__cell { min-height: 0; gap: 12px; } }

/* ---------- 05 样例报告 ---------- */
.report__lead { margin-bottom: clamp(40px, 5vw, 72px); }
.report { max-width: 940px; margin-inline: auto; }
.report__paper {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: clamp(32px, 5.5vw, 76px);
}
.report__paper::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line); pointer-events: none; }
/* 盖印瞬间的纸面闪白 */
.report__paper::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; }
.report.is-stamped .report__paper::after { animation: fate-flash 0.55s var(--e-out) 0.12s; }
@keyframes fate-flash { 0% { opacity: 0; } 28% { opacity: 0.85; } 100% { opacity: 0; } }

.report__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px; margin-bottom: clamp(28px, 4vw, 48px);
}
.report__sample { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); padding: 4px 10px; letter-spacing: 0.24em; }
.report__kicker { font-size: 11px; letter-spacing: 0.4em; color: var(--ink-faint); }
.report__proto { font-size: clamp(58px, 9vw, 118px); line-height: 1.1; letter-spacing: 0.08em; margin: 8px 0 clamp(28px, 4vw, 44px); }
.report__lines { max-width: 34em; }
.report__line { font-weight: 600; font-size: clamp(16px, 1.6vw, 19.5px); line-height: 2.1; padding-block: 18px; border-top: 1px solid var(--line); }
.report__verdict { color: var(--ink); }
.report__verdictTag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.3em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); padding: 4px 9px; margin-right: 16px; vertical-align: 3px; }
.report__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }
.report__badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ink); padding: 10px 18px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em;
}
.report__badge .ic { color: var(--accent); width: 15px; height: 15px; }
.report__hint { font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-faint); }

/* 朱砂方印：滚动到此处盖下，仅一次 */
.seal {
  position: absolute; top: 32%; right: clamp(-6px, 2.5vw, 52px);
  width: clamp(104px, 15vw, 152px);
  opacity: 0;
  transform: scale(1.6) rotate(9deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}
.report.is-stamped .seal { animation: fate-stamp 0.6s cubic-bezier(0.2, 1.35, 0.4, 1) 0.1s forwards; }
@keyframes fate-stamp {
  0% { opacity: 0; transform: scale(1.6) rotate(9deg); }
  55% { opacity: 1; transform: scale(0.93) rotate(-3deg); }
  72% { transform: scale(1.04) rotate(1.4deg); }
  86% { transform: scale(0.985) rotate(-0.8deg); }
  100% { opacity: 0.94; transform: scale(1) rotate(-2deg); }
}
.seal__svg { width: 100%; height: auto; }
/* 盖印震起的纸面微尘 */
.dust {
  position: absolute; left: 70%; top: 58%;
  width: var(--ds, 3px); height: var(--ds, 3px);
  border-radius: 50%;
  background: var(--ink); opacity: 0;
  animation: fate-dust 0.85s var(--e-out) forwards;
  pointer-events: none;
}
.dust--accent { background: var(--accent); }
@keyframes fate-dust {
  0% { transform: translate(0, 0); opacity: 0.7; }
  100% { transform: translate(var(--dx, 20px), var(--dy, -20px)); opacity: 0; }
}

/* ---------- 06 入卷 ---------- */
.cta { text-align: center; }
.cta .chap { justify-content: space-between; }
.cta .display-2 { margin-inline: auto; }
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-bottom: clamp(48px, 6vw, 88px);
  text-align: left;
}
.step {
  padding: clamp(22px, 2.6vw, 34px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.4s var(--e-out);
}
.step:hover { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.step__no { font-size: 11px; letter-spacing: 0.24em; color: var(--ink-faint); }
.step .ic { width: 22px; height: 22px; color: var(--accent); }
.step h3 { font-family: var(--f-serif); font-weight: 900; font-size: 17px; letter-spacing: 0.04em; }
.step p { font-size: 13px; line-height: 1.9; color: var(--ink-dim); }
.cta__row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.btn--xl { padding: 22px 48px; font-size: 14px; letter-spacing: 0.28em; }
.cta__note { font-size: 11.5px; letter-spacing: 0.22em; color: var(--ink-faint); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--line); }
.footer__top { align-items: flex-start; }
.footer__brand { font-family: var(--f-serif); font-weight: 900; font-size: clamp(36px, 6.5vw, 104px); line-height: 1.05; letter-spacing: 0.04em; text-transform: none; }
.footer__v { font-size: 10px; letter-spacing: 0.5em; color: var(--ink-faint); }
.footer__about { font-size: 14px; line-height: 2; color: var(--ink-dim); }
.footer__compliance {
  border-top: 1px solid var(--line);
  padding-block: 18px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim);
}
.footer__sig { letter-spacing: 0.28em; }

/* ---------- reduced motion ---------- */
html.wx-reduced .hero__scroll .ic { animation: none; }
html.wx-reduced .trial__cap { opacity: 1; transform: none; }