/* ============================================================
   SPINE 脊柱 — 全站不变量：字体系统、双语规则、向导、线。
   章节只换配色与材质（见 ch-*.css），不改这里的结构。
   ============================================================ */

:root {
  /* 手账章色板 */
  --kraft: #efe6d4;
  --kraft-deep: #dfcfae;
  --paper: #fffdf7;
  --ink-warm: #4a3826;
  --marker: #2b241c;
  --straw: #e8737f;
  /* 星夜章色板 */
  --night-0: #0f1b33;
  --night-1: #1d3054;
  --night-glow: #ffe9bd;
  --night-text: #e9e4f2;
  --night-sub: #9fa8c9;
  /* 字体 */
  --f-hand-es: "Caveat", cursive;
  --f-hand-zh: "Long Cang", cursive;
  --f-serif-es: "Cormorant Garamond", serif;
  --f-serif-zh: "Noto Serif SC", serif;
  --f-mono: "IBM Plex Mono", monospace;
  --f-ui: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-ui); background: var(--kraft); color: var(--ink-warm); overflow-x: clip; }
/* 锁定态：position:fixed 是 iOS/安卓上唯一可靠的滚动锁（overflow:hidden 会被触摸滚动无视） */
body.locked { position: fixed; inset: 0; width: 100%; overflow: hidden; }

/* —— 双语规则：西语主、中文副（全站唯一层级） —— */
.bi { display: grid; gap: 6px; margin: 22px 0; }
.bi .es { font-size: 19px; line-height: 1.6; }
.bi .zh { font-size: 14px; line-height: 1.9; opacity: .72; letter-spacing: .08em; }
.bi.remate .es { font-size: 24px; }
.eyebrow { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.mono { font-family: var(--f-mono); }
.hand-es { font-family: var(--f-hand-es); }
.hand-zh { font-family: var(--f-hand-zh); }
.serif-es { font-family: var(--f-serif-es); }
.serif-zh { font-family: var(--f-serif-zh); }

/* —— 场景骨架 —— */
.scene { min-height: 100vh; position: relative; display: grid; align-items: center; overflow: hidden; padding: 12vh 6vw; }

/* —— 向导 LittleMax（她画的火柴人=日常思念） —— */
.guide {
  position: fixed; bottom: 18px; left: 0; z-index: 40;
  width: 58px; pointer-events: none;
  transform: translateX(6vw);
  transition: transform .3s ease-out, filter .6s;
  opacity: 0;
}
body.open .guide { opacity: 1; }
/* huochairen 参考画风：粗圆笔触、大圆脸、竖线眼、腮红、大红心 */
.stickman { width: 100%; fill: none; stroke: #3a2e24; stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round; }
.stickman .ojos { stroke-width: 5; }
.stickman .sonrisa { stroke-width: 4.5; }
.stickman .rubor { stroke: #e0504f; stroke-width: 4; opacity: .85; }
.stickman .corazon { fill: #e0403f; stroke: #fff; stroke-width: 2.5;
  transform-origin: 64px 36px; animation: latido 1.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(120,20,20,.3)); }
.stickman .spark { fill: #f5c518; stroke: none; animation: chispa 2.4s ease-in-out infinite; }
@keyframes latido { 0%,100% { transform: scale(1); } 12% { transform: scale(1.2); } 24% { transform: scale(1); } }
@keyframes chispa { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.guide.night .stickman { stroke: #fff2df; }
.guide.night .stickman .corazon { fill: #ff7d94; }
.guide.night .stickman { stroke: var(--night-glow); filter: drop-shadow(0 0 6px rgba(255,233,189,.55)); }
.guide-say {
  position: absolute; left: 110%; bottom: 60%;
  font-family: var(--f-hand-es); font-size: 17px; white-space: nowrap;
  background: var(--paper); border: 1.5px solid var(--marker); border-radius: 12px 12px 12px 2px;
  padding: 3px 10px; opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s;
}
.guide.talk .guide-say { opacity: 1; transform: none; }
.guide.night .guide-say { background: rgba(15,27,51,.85); border-color: var(--night-glow); color: var(--night-glow); }
@keyframes walk-a { 0%,100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes walk-b { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
body.walking .guide .leg-a { animation: walk-a .45s infinite; transform-origin: 41px 55px; }
body.walking .guide .leg-b { animation: walk-b .45s infinite; transform-origin: 41px 55px; }

/* —— 线（章内 SVG，滚动渐次绘制） —— */
.line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.line-path, .arc-path { fill: none; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }

/* —— reveal —— */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.on { opacity: 1; transform: none; }

/* —— 页脚：满宽填色；顶部加高到能整个罩住页底的小火柴人（头顶留余量），
      文字位置不变（仍贴近底部） —— */
.fin { background: var(--night-0); color: var(--night-sub); text-align: center;
  width: 100%; padding: 72px 18px 22px; font-size: 12px; letter-spacing: .2em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .line-path, .arc-path { stroke-dashoffset: 0 !important; }
  body.walking .guide .leg-a, body.walking .guide .leg-b { animation: none; }
  .guide { transition: none; }
}