/* ============================================================
   gua.css — 卦页专属排版
   依赖 iching.css(需先于本文件引入)。
   Hero / 六爻栏 / 卦象线 / 卦辞·大象·六爻 / 五行点睛与 .wxw /
   中英衬线修正 / 卦页响应式。
   ============================================================ */
.gua-page{max-width:100%;position:relative;}
.crumb{display:inline-flex;align-items:center;gap:8px;margin:36px 0 0;
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:500;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink3);text-decoration:none;transition:color .15s;}
.crumb a{color:inherit;text-decoration:none;}
.crumb:hover,.crumb a:hover{color:var(--red2);}
.gua-hero{position:relative;padding:28px 0 52px;margin-bottom:var(--s-6);border-bottom:1px solid var(--ink3);overflow:hidden;}
.gua-hero__watermark{position:absolute;right:-0.04em;top:50%;transform:translateY(-52%);
  font-family:var(--font-serif);font-size:clamp(170px,24vw,320px);font-weight:600;
  line-height:0.7;color:var(--ink);opacity:0.05;pointer-events:none;user-select:none;z-index:0;
  font-variant-numeric:tabular-nums;letter-spacing:-0.04em;}
/* Hero height is driven by the title; a single-line title (all zh names, and short
   en names like "Contention") makes a short hero that clipped the big watermark
   top/bottom. Sized down so it fits a one-line hero in any language. */
.gua-hero__inner{position:relative;z-index:1;}
.gua-hero__eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink3);}
.gua-hero__eyebrow .idx{color:var(--ink2);font-variant-numeric:tabular-nums;}
.gua-hero__eyebrow .bar{width:28px;height:1px;background:var(--border-strong);}
.gua-title{font-family:var(--font-cjk);font-size:clamp(60px,9.5vw,132px);font-weight:500;
  line-height:0.92;letter-spacing:0.02em;color:var(--ink);}
.gua-title-en{display:block;font-family:var(--font-serif);font-weight:500;
  font-size:clamp(20px,2.4vw,30px);line-height:1.2;letter-spacing:0.01em;
  color:var(--ink2);margin-top:18px;}
/* English mode: Chinese compound hidden, English name becomes the heading */
[data-lang="en"] .gua-title-en{font-size:clamp(40px,6vw,82px);font-weight:500;
  line-height:1.02;color:var(--ink);margin-top:0;}
.gua-sub{font-family:var(--font-serif);font-size:clamp(18px,1.9vw,24px);font-weight:500;
  color:var(--ink2);margin-top:22px;letter-spacing:0.01em;}
.gua-sub .dot{color:var(--ink3);margin:0 10px;}
.gua-body{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);
  gap:clamp(48px,7vw,116px);align-items:start;}
.gua-rail{position:sticky;top:36px;display:flex;flex-direction:column;gap:var(--s-3);}
.gua-glyph{display:flex;flex-direction:column;gap:13px;width:168px;}
.gx-line{display:flex;align-items:center;gap:13px;height:15px;width:100%;
  background:none;border:none;padding:0;position:relative;transition:transform var(--dur-fast);}
.gx-tag{position:absolute;left:-30px;width:24px;text-align:center;font-family:var(--font-cjk);
  font-size:12px;color:var(--ink3);opacity:0;transition:opacity var(--dur-fast),color var(--dur-fast);}
.gx-seg{height:15px;background:var(--ink);border-radius:1px;flex:1;transition:background var(--dur-fast);}
.gx-yin .gx-gap{width:26px;flex:none;}
.gx-line:hover{transform:translateX(5px);}
.gx-line:hover .gx-seg,.gx-line.is-active .gx-seg{background:var(--red2);}
.gx-line:hover .gx-tag,.gx-line.is-active .gx-tag{opacity:1;color:var(--red2);}
.gua-rail__meta{display:flex;flex-direction:column;gap:6px;padding-top:4px;}
.rail-trigram{font-family:var(--font-sans);font-size:var(--text-micro);letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink3);line-height:1.7;}
.rail-trigram b{color:var(--ink2);font-weight:600;}
.rail-hint{font-size:var(--text-caption);color:var(--ink3);line-height:1.5;margin-top:8px;max-width:22ch;}
.rail-hint::before{content:"↑ ";color:var(--red2);}
.gua-content{min-width:0;}
.sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 var(--s-3);font-size:inherit;font-weight:inherit;line-height:1.2;}
.sec-head__lbl{font-family:var(--font-cjk);font-size:var(--text-lead);font-weight:500;
  color:var(--ink);letter-spacing:0.08em;flex:none;}
.sec-head__en{font-size:var(--text-micro);font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink3);flex:none;}
/* English mode: Chinese label hidden, so the English label carries the heading on its own */
[data-lang="en"] .sec-head__en{font-size:var(--text-caption);color:var(--ink2);letter-spacing:0.2em;}
.sec-head__rule{flex:1;height:1px;background:var(--border-strong);}
.judg{position:relative;padding-left:30px;margin-bottom:56px;}
.judg::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--ink3);border-radius:2px;}
.judg__text{font-family:var(--font-cjk);font-size:clamp(30px,3.6vw,46px);font-weight:500;
  line-height:1.15;color:var(--ink);letter-spacing:0.04em;}
.insight{margin-top:var(--s-3);max-width:64ch;}
.insight p{font-size:clamp(15px,1.1vw,16px);line-height:1.6;color:var(--ink2);}
.daxiang{margin-bottom:var(--s-6);}
.daxiang__text{font-family:var(--font-cjk);font-size:clamp(20px,2vw,26px);font-weight:400;
  line-height:1.7;color:var(--ink);letter-spacing:0.04em;max-width:38em;}
.liuyao{margin-left:clamp(0px,4vw,64px);}
.myao{display:grid;grid-template-columns:64px 1fr;gap:clamp(20px,3vw,40px);
  padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:110px;
  transition:background var(--dur-base),border-color var(--dur-base);position:relative;}
.myao:first-child{border-top:none;padding-top:8px;}
.myao-idx{font-family:var(--font-serif);font-size:clamp(40px,4vw,54px);font-weight:500;
  line-height:0.85;color:var(--ink3);opacity:0.5;font-variant-numeric:tabular-nums;
  transition:color var(--dur-base),opacity var(--dur-base);}
.myao-body{min-width:0;max-width:620px;}
.myao-pos{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;}
.myao-ci{font-family:var(--font-cjk);font-size:clamp(20px,2vw,25px);font-weight:400;
  line-height:1.7;color:var(--ink);letter-spacing:0.04em;margin-bottom:18px;}
.myao .insight{margin-top:0;}
.myao.peek .myao-idx{color:var(--ink2);opacity:0.85;}
.myao.is-active .myao-idx{color:var(--red2);opacity:1;}
.myao.is-active{box-shadow:inset 2px 0 0 var(--red2);padding-left:24px;margin-left:-24px;}
@keyframes yaoFlash{0%{background:color-mix(in srgb,var(--red2) 7%,transparent);}100%{background:transparent;}}
.myao.flash{animation:yaoFlash 1.2s ease-out;}
@media (prefers-reduced-motion: reduce){
  .myao.flash{animation:none;}
}
@media (max-width:900px){
  .gua-body{grid-template-columns:1fr;gap:40px;}
  .gua-rail{position:static;flex-direction:row;align-items:flex-start;gap:32px;flex-wrap:wrap;}
  .liuyao{margin-left:0;}
  .myao{grid-template-columns:48px 1fr;}
}
@media (max-width:720px){
  .gua-hero__watermark{font-size:clamp(160px,46vw,260px);}
}
@media (max-width:480px){
  .myao{grid-template-columns:1fr;gap:8px;}
  .myao-idx{font-size:32px;}
}
.judg__text .lang-en{font-family:var(--font-serif);font-weight:500;line-height:1.05;
  font-size:0.82em;letter-spacing:0;color:var(--ink2);}
.daxiang__text .lang-en,
.myao-ci .lang-en{font-family:var(--font-serif);font-weight:500;line-height:1.08;
  font-size:0.82em;letter-spacing:0;color:var(--ink2);}
/* The .lang-en is an inline span, but line spacing is set by the parent block's
   strut (its CJK line-height 1.7 × big CJK font-size), which overrides the span.
   So set it on the parent in English mode. The judgement parent uses 1.15, so match
   that here to keep Image/Lines visually consistent with the judgement above. */
[data-lang="en"] .daxiang__text,
[data-lang="en"] .myao-ci{line-height:1.15;}
:root.wx-off .wxw{display:none;}
.wx-switch-row{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:-28px 0 26px;}
@media (max-width:900px){
  .wx-switch-row{margin:-12px 0 24px;}
}

/* 卦序导航：上一卦 / 下一卦（文王卦序，首尾循环） */
.gua-seq{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:64px;padding-top:28px;border-top:1px solid var(--border);}
.gua-seq__link{display:flex;flex-direction:column;gap:6px;max-width:48%;
  text-decoration:none;color:var(--ink);transition:color .15s;}
.gua-seq__next{text-align:right;align-items:flex-end;}
.gua-seq__dir{font-family:var(--font-sans);font-size:var(--text-micro);font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink3);transition:color .15s;}
.gua-seq__name{font-family:var(--font-cjk);font-size:var(--text-lead);font-weight:500;
  letter-spacing:0.04em;line-height:1.2;}
[data-lang="en"] .gua-seq__name{font-family:var(--font-serif);letter-spacing:0;}
.gua-seq__link:hover{color:var(--red2);}
.gua-seq__link:hover .gua-seq__dir{color:var(--red2);}
@media (max-width:560px){
  .gua-seq__link{max-width:none;flex:1 1 100%;}
  .gua-seq__next{text-align:left;align-items:flex-start;}
}