/* ============================================================
   黄色宇宙专属：横向谱系
   —— 关系图用纯 CSS Grid + 墨线连接（不用关系图库，docs/14 §8）
   —— 「为什么是黄色」横向滑动卡片，零 JS（scroll-snap）
   —— 三幻神卡带辨识性标准照（奶蛙=本库 MIT，牛来/袋鼠=带出处的引用小图）
   ============================================================ */
/* 关系图：三卡两线。卡片等高（stretch），连接线是 3px 墨线。
   移动端竖排，连接线转成竖线。 */
.trio{
  display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr;
  align-items:stretch; margin-top:clamp(32px,4vw,56px);
}
/* 关系图的连接线。**不能叫 .tlink** —— 共享层已有一个 .tlink（正文链接），
   同名会让点进去的链接在卡上横着划一道 3px 墨线。 */
.trio-link{ position:relative; }
.trio-link::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:3px; background:var(--ink);
}
.tcard{
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sd-3);
  padding:clamp(20px,2.4vw,30px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6em;
}
/* 三张标准照：定高、宽随画（横竖混排不做统一裁切），只作辨识 */
.tcard .pic{ height:clamp(110px,12vw,150px); width:100%; object-fit:contain; filter:drop-shadow(0 3px 0 rgba(26,22,18,.14)); }
.tcard .who{ font-family:var(--serif-display); font-size:var(--fs-xl); font-weight:900; letter-spacing:0; }
.tcard .aka{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.tcard .from{ font-size:var(--fs-sm); color:var(--text-2); line-height:1.7; }
/* 共性条：三卡之下一条通栏，四个特征用墨点分隔（不用 1px 发丝线） */
.char-traits{
  margin-top:clamp(28px,3.4vw,44px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6em 1.6em;
  background:var(--bg-2); border:var(--bw) solid var(--ink);
  border-radius:var(--r-md); box-shadow:var(--sd-2);
  padding:clamp(16px,2vw,24px) clamp(20px,2.6vw,34px);
}
.char-traits span{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:.6em; }
.char-traits span + span::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); }

/* 为什么是黄色：横向滑动，零 JS */
.why-y{
  display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--sp-2) 0 var(--sp-4); margin-top:clamp(28px,3.4vw,44px);
}
.why-y article{
  flex:0 0 208px; scroll-snap-align:start;
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:var(--r-md); box-shadow:var(--sd-2);
  padding:var(--sp-5) var(--sp-4); text-align:center;
}
.why-y .pic{
  display:block; height:96px; width:auto; max-width:100%; margin:0 auto var(--sp-4);
  object-fit:contain; filter:drop-shadow(0 3px 0 rgba(26,22,18,.14));
}
.why-y b{ display:block; font-size:var(--fs-lg); letter-spacing:0; font-weight:900; }
.why-y time{ display:block; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); margin-top:.3em; }
.why-y p{ margin:.8em 0 0; font-size:var(--fs-sm); color:var(--text-2); line-height:1.7; }
/* .scroll-note 已收进共享层（与搜索页同名同义） */

/* 角色卡：出身 / 走红 / 在哪遇见，键值对排布 */
.chars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap); margin-top:clamp(28px,3.4vw,44px); }
.char{
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sd-3);
  padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column;
}
.char-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.char-head b{ font-family:var(--serif-display); font-size:var(--fs-xl); font-weight:900; letter-spacing:0; }
.char-head i{ font-style:normal; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.char-tags{ display:flex; flex-wrap:wrap; gap:.45em; margin-top:var(--sp-4); }
.char-tags span{
  font-size:var(--fs-xs); font-weight:700; padding:.34em .8em;
  border:2px solid var(--ink); border-radius:var(--r-pill); background:var(--bg-2);
}
.char dl{ margin:var(--sp-5) 0 0; display:grid; gap:var(--sp-4); }
.char dt{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); margin-bottom:.3em; }
.char dd{ margin:0; font-size:var(--fs-sm); color:var(--text-2); line-height:1.85; }
.char dd b{ color:var(--ink); }
.char-foot{ margin-top:auto; padding-top:var(--sp-5); display:flex; gap:.7rem; flex-wrap:wrap; }

@media (max-width:860px){
  .trio{ grid-template-columns:1fr; }
  .trio-link{ height:44px; }
  .trio-link::before{ left:50%; right:auto; top:0; bottom:0; width:3px; height:auto; transform:translateX(-50%); }
}
/* 装饰坐标属于页面：放进样式表，避免 CSP 之外的 style 属性 */
.deco-r{ top:22%; right:7%; }