/* ============================================================
 * hexagram-extra.css — 64 卦文章页扩写章节样式（四域指引 + 时与行）
 * 全站共用；类名前缀 dx- 避免与页面内联样式冲突。
 * 硬约束：这里绝不写 opacity:0 —— 初始态由 hexagram-motion.js 现场设，
 * 无 JS / GSAP 挂掉 / reduced-motion 时内容必须完整可见。
 * ============================================================ */

/* ---- 四域指引 ---- */
.hex-domains { border-top: 1px solid var(--line); padding: 6.5vh 0 1vh; }
.dx-label {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 2.2rem;
}
.dx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.dx-card {
  border: 1px solid var(--line); background: var(--paper);
  padding: 1.7rem 1.7rem 1.5rem; position: relative;
}
.dx-card h4 {
  margin: 0 0 .9rem; font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.dx-card h4 .dx-no { color: rgba(244, 242, 236, .32); margin-right: .7rem; font-size: 10px; }
.dx-card p {
  margin: 0; font-size: 1.12rem; color: var(--muted);
  max-width: 34rem; line-height: 1.6;
}

/* ---- 时与行 ---- */
.hex-timing { border-top: 1px solid var(--line); padding: 5vh 0 8vh; }
.dx-timing { margin: 0; font-size: 1.25rem; color: var(--muted); max-width: 46rem; line-height: 1.65; }

/* ---- 阅读进度条（由 JS 创建；transform 驱动，不触发 layout）---- */
.dx-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  z-index: 300; pointer-events: none;
}
.dx-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, rgba(201,185,154,.55), #e6d9bd);
  transform: scaleX(0); transform-origin: 0 50%;
}

@media (max-width: 720px) {
  .dx-grid { grid-template-columns: 1fr; gap: 1rem; }
  .dx-card { padding: 1.4rem 1.3rem 1.3rem; }
  .dx-card p, .dx-timing { font-size: 1.05rem; }
}