/* ==========================================================================
   sections.css —— 页面板块布局层
   依据：docs/design-spec.md § 7.1 首页线框 + § 6.1 断点布局明细
   基调分工（§ 1）：
     A 深夜蓝黑 + 朱红 + 青蓝（默认，~75%）
     B 夕烧黄昏橙紫 + 胶片颗粒（出场作品 / 名台词 / 年表，~15%）
     C 久远寺宅邸暖灯 + 书页纸感（人物关系 / 有珠，~10%）
   节奏硬性规则：A 连续不超过 2 个整屏区块，第 3 个必须切 B 或 C。
   ========================================================================== */

/* ==========================================================================
   基调 B · 夕烧（§ 7.1 区块 3 / 6）
   ========================================================================== */
.mood-dusk {
  position: relative;
  background: var(--dusk-grad);
  color: var(--dusk-text);
  isolation: isolate;
}
/* 胶片颗粒：SVG feTurbulence，opacity 0.035，pointer-events:none */
.mood-dusk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mood-dusk > * { position: relative; z-index: 1; }

.mood-dusk h2,
.mood-dusk h3,
.mood-dusk h4 { color: var(--dusk-text); }
.mood-dusk p { color: var(--dusk-text); }
.mood-dusk .t-caption,
.mood-dusk .t-micro { color: var(--dusk-text-mut); }
.mood-dusk .t-label { color: var(--dusk-text-mut); }
.mood-dusk a { color: var(--dusk-num); }

/* 夕烧卡片：毛玻璃 + 1px --dusk-line */
.dusk-card {
  background-color: var(--dusk-card);
  border: 1px solid var(--dusk-border);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dusk-card__title { color: var(--dusk-text); margin-bottom: var(--sp-2); }
.dusk-card__text { color: var(--dusk-text-mut); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.dusk-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--dusk-num);
}
a.dusk-card { display: block; text-decoration: none; transition: border-color 200ms var(--ease-std), transform 200ms var(--ease-std), background-color 200ms var(--ease-std); }
a.dusk-card:hover { border-color: var(--dusk-border-hi); background-color: var(--dusk-card-hover); transform: translateY(-2px); }
a.dusk-card:hover .dusk-card__title { color: var(--dusk-num); }

/* 夕烧时间轴（横向条，桌面）/ 纵向（移动） */
.dusk-axis {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.dusk-axis__line {
  position: relative;
  height: 32px;
  display: none;
}
.dusk-axis__line::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--dusk-border-hi);
}
.dusk-axis__tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: var(--r-full);
  background: var(--dusk-num);
  box-shadow: 0 0 0 3px rgba(26, 16, 48, 1), 0 0 14px rgba(255, 164, 92, 0.6);
}
.dusk-axis__tick--milestone {
  width: 12px; height: 12px;
  border-radius: 1px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px rgba(26, 16, 48, 1), 0 0 14px rgba(255, 106, 106, 0.6);
}
.dusk-axis__label {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--dusk-num);
  white-space: nowrap;
}
@media (min-width: 1024px) { .dusk-axis__line { display: block; } }

/* ==========================================================================
   基调 C · 书页纸底（§ 7.1 区块 7 / § 7.2）
   ========================================================================== */
.on-paper {
  background-color: var(--paper);
  color: var(--ink);
  position: relative;
}
/* 纸底上沿收口线（§ 7.1「上沿 1px --paper-line 撕边」） */
.on-paper--top-line::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--paper-line);
}
/* 暗 → 纸 的过渡带（56px 渐变，避免硬切，§ 7.2） */
.paper-transition {
  height: 56px;
  background: linear-gradient(to bottom, var(--neutral-000) 0%, var(--paper) 100%);
}
/* 纸 → 暗：可硬切，但需 1px --paper-line 边线收口 */
.paper-transition--out {
  height: 1px;
  background: var(--paper-line);
}
.on-paper h2, .on-paper h3, .on-paper h4 { color: var(--ink); }
.on-paper p { color: var(--ink); }
.on-paper .t-lead, .on-paper .t-body-l { color: var(--ink); }
/* 纸上链接一律铜色系（§ 8.1-5，--primary 在纸底仅 2.04:1） */
.on-paper a { color: var(--paper-link); text-decoration-color: var(--paper-line); }
.on-paper a:hover { color: var(--ink); }
.on-paper strong, .on-paper b { color: var(--ink); }
.on-paper mark { color: var(--paper-link); background: transparent; }
.on-paper .t-caption, .on-paper .t-micro { color: var(--ink-2); }
.on-paper .t-label { color: var(--ink-2); }
/* 纸上禁止暗色轨的青蓝（除图标/焦点环） */
.on-paper .t-num { color: var(--ink); }
.on-paper .tag { background: var(--paper-tag-bg); color: var(--ink-2); border-color: var(--paper-line); }
.on-paper .tag--gold { background: var(--paper-tag-gold-bg); color: var(--paper-tag-gold-fg); border-color: var(--copper); }
.on-paper .tag--red { background: var(--paper-tag-red-bg); color: var(--paper-tag-red-fg); border-color: var(--accent-deep); }
.on-paper .chip {
  background: var(--paper-chip-bg);
  color: var(--ink-2);
  border-color: var(--paper-line);
}
.on-paper .chip[aria-pressed="true"] { background: rgba(122, 74, 34, 0.16); color: var(--paper-link); border-color: var(--copper); }
.on-paper .btn--secondary { color: var(--paper-link); border-color: var(--copper); }
.on-paper .btn--secondary:hover { background: rgba(122, 74, 34, 0.1); border-color: var(--paper-link); color: var(--paper-link); }
.on-paper .btn--primary { border-color: var(--copper); }
.on-paper .table th { background: var(--paper-deep); color: var(--ink); border-bottom-color: var(--paper-line); }
.on-paper .table td { color: var(--ink); border-bottom-color: var(--paper-line); }
.on-paper .table tbody tr:nth-child(even) { background: var(--paper-deep); }
.on-paper .table tbody tr:hover { background: rgba(216, 203, 178, 0.5); }
.on-paper .table-scroll { border-color: var(--paper-line); }
.on-paper .table .num, .on-paper .table td.num { color: var(--ink); }
.on-paper .datacard { background: var(--paper-deep); border-left-color: var(--copper); }
.on-paper .datacard__key { color: var(--ink-2); }
.on-paper .datacard__val { color: var(--ink); }
.on-paper .datacard__row { border-bottom-color: var(--paper-line); }

/* ==========================================================================
   区块 1：HERO —— 四季轮换剧场（§ 7.1）
   高度 100vh（移动 88vh）；四季色盘只在这里生效
   ========================================================================== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 四季色盘：背景色跟随 --season-bg，800ms 交叉淡入 */
  background-color: var(--season-bg);
  transition: background-color var(--season-transition) var(--season-ease);
  isolation: isolate;
}
@media (min-width: 1024px) { .hero { min-height: 100vh; } }

/* 背景层：季节光晕（径向，中心偏右上 30%/35%，半径 60%）+ 暗角 */
.hero__glow,
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__glow {
  background: radial-gradient(
    circle 60% at 70% 35%,
    color-mix(in srgb, var(--season-glow) 26%, transparent) 0%,
    transparent 70%
  );
  transition: background var(--season-transition) var(--season-ease),
              opacity var(--season-transition) var(--season-ease);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
.hero__vignette {
  background: radial-gradient(circle at 50% 45%, transparent 45%, rgba(4, 6, 12, 0.72) 100%);
}
/* 降级：不支持 color-mix 时用固定低透明渐变 */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero__glow {
    background: radial-gradient(circle 60% at 70% 35%, rgba(127, 196, 255, 0.2) 0%, transparent 70%);
  }
}

/* 季节 motif 粒子层（canvas 或 CSS） */
.hero__motif {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__motif canvas { display: block; width: 100%; height: 100%; }

/* 季节光带（底部环境光） */
.hero__band {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 220px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--season-accent) 12%, transparent), transparent);
  transition: background var(--season-transition) var(--season-ease);
}

/* Hero 内容层
   [修复 P0] .hero 在 <1024px 变为纵向 flex（立绘在上、文字在下）；
   1024px+ 回归水平居中，立绘用绝对定位落在右侧列，文字列靠左。 */
.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--safe-x);
  padding-block: var(--sp-8) var(--sp-9);
}
.hero__content { max-width: 640px; min-width: 0; }

/* --------------------------------------------------------------------------
   [修复 P0 · 第二轮] 首屏青子立绘 —— 从「有图」升级到「一眼就是青子」
   ──────────────────────────────────────────────────────────────────────────
   第一轮遗留的三个问题（1440 实测）：
     1 立绘只占视口宽 21.7%（312px），右半屏仍是大片空场 → 不像主视觉。
     2 立绘底图 #070B14 与季节底色（s1 #150F1E / s2 #060B1C …）不同色。
       `mix-blend-mode: lighten` 下 max(#070B14, s1 #150F1E) = #150F1E，
       矩形内部确实被底色填满 → 不露方块；
       但底部 mask 渐隐处图片 alpha 回落，混合结果按 alpha 线性退回到底图
       #070B14，而它比 s1-bg 更暗 → 底部出现一条**弧形暗边**（截图可见）。
       弧形边界 = #070B14 矩形 ∩ 立绘减淡 alpha，正是这个 bug 的形状。
     3 mask 底部停在 88%，而人物脚部到图片 95% 处才结束 → 削掉鞋尖。

   本轮解法（三层，互不依赖）：
     a) 尺寸：桌面立绘高度取「首屏可见高度 − 上下呼吸空间」，
        宽度由 676×1600 的固有比例反推，整幅立绘（含鞋）完整落在首屏内。
     b) 底部融合：新增 `.hero-portrait__fade` —— 一层**不参与混合**的
        「底色 → 透明」线性遮罩（用 --season-bg），把图片底边压回底色。
        它与 mask 的双重渐隐让暗边看不出来，且随四季换色自动匹配。
     c) 顶部：人物头顶在图片 y≈2%（y=32/1600），故顶部羽化只留 1.5%，
        不再削掉呆毛；底部渐隐起点下移到 93%（脚 1517/1600 = 94.8%）。

   ⚠ 仍然必须遵守的两条约束（第一轮踩过的坑，写在这里防回归）：
     · `.hero-portrait` 的 z-index 必须是 auto。写成具体数值会让它成为
       独立层叠上下文，img 的 mix-blend-mode 只在盒内找背景 → 混色失效。
     · 垂直居中不能用 transform: translateY(-50%) —— transform 同样创建
       层叠上下文。用 inset-block:0 + margin-block:auto 代替。
   -------------------------------------------------------------------------- */
.hero-portrait {
  --hero-portrait-w: 560px;   /* 立绘可用最大宽度，断点里升档 */
  position: relative;
  /* ⚠ z-index 必须为 auto，见上方说明 —— 不要改成具体数值 */
  z-index: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  pointer-events: none;   /* 纯装饰，不拦截点击 */
}
/* 青蓝魔法光晕（跟随当季光色呼吸）—— 角色背后的柔光。
   ⚠ 踩坑记录：早期写 `radial-gradient(circle at 50% 46%, …)` 不给半径，
     浏览器按 farthest-corner 解算；在「高 1137px × 宽 605px」的竖长容器里，
     这个"圆"会退化成一个被拉长的**椭圆**，边缘可见，在角色腿侧形成一圈
     明显的弧形色差（1440 实拍可见）。改为显式半径 + 多点衰减：
     半径以图片宽度（--hero-portrait-w）为基准，形状稳定为正圆，
     且 0% → 30% → 58% → 82% 四段衰减把边界彻底抹平。 */
.hero-portrait__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 0;
  width: calc(var(--hero-portrait-w) * 2.4);
  height: calc(var(--hero-portrait-w) * 2.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--season-glow) 30%, transparent) 0%,
    color-mix(in srgb, var(--season-glow) 17%, transparent) 30%,
    color-mix(in srgb, var(--season-glow) 6%, transparent) 58%,
    transparent 82%
  );
  filter: blur(28px);
  transition: background var(--season-transition) var(--season-ease);
  animation: breathe 9s ease-in-out infinite;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero-portrait__glow {
    background: radial-gradient(circle closest-side, rgba(127, 196, 255, 0.26) 0%, rgba(127, 196, 255, 0.15) 30%, rgba(127, 196, 255, 0.05) 58%, transparent 82%);
  }
}
.hero-portrait__img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  /* 高度优先：先给一个确定的高度上限，再由比例反推宽度，
     保证「整幅立绘完整可见」（不裁头顶、不裁鞋尖）。 */
  height: auto;
  max-width: 100%;
  /* 竖幅比例由 width/height 属性 + auto 保持，绝不裁成方块 */
  object-fit: contain;
  /* 与页面底色混合去底图；max() 保证角色亮部完整 */
  mix-blend-mode: lighten;
  /* 顶部 1.5% 极轻羽化（保留呆毛）、底部 93% 起渐隐（脚在 94.8%） */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 1.5%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 1.5%, #000 93%, transparent 100%);
}
/* 底部融入底色：不参与 blend 的一层「季节底色 → 透明」渐变。
   它叠在 img 之上，把 mask 渐隐区残留的、比底色更暗的底图 #070B14 压回底色，
   彻底消除弧形暗边。放在 img 上方的兄弟层，避免和 lighten 混合互相干扰。 */
.hero-portrait__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--season-bg) 0%,
    color-mix(in srgb, var(--season-bg) 82%, transparent) 26%,
    color-mix(in srgb, var(--season-bg) 40%, transparent) 58%,
    transparent 100%
  );
  transition: background var(--season-transition) var(--season-ease);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero-portrait__fade {
    background: linear-gradient(to top, var(--season-bg) 0%, transparent 100%);
  }
}

/* ---------------- 平板 & 移动（< 1024px）：图上文中 ----------------
   .hero 改为纵向 flex；立绘常规流置于文字上方（DOM 顺序已在前）。
   [修复 P0-移动] 立绘高度必须让位给 H1：首屏是"图 + 名字"，
   不能只要图不要名字。高度按「能让 H1 落在第一屏」反推。 */
@media (max-width: 1023px) {
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    padding-block: 0;
  }
  .hero-portrait {
    flex: 0 0 auto;
    width: 100%;
    padding-inline: var(--safe-x);
    margin-bottom: var(--sp-4);
  }
  .hero__inner { padding-block: 0 var(--sp-7); }
  /* 移动端立绘底的暗边更难藏（背景是 88vh 的短区块），fade 加高一点 */
  .hero-portrait__fade { height: 26%; }
}
/* 平板 640–1023 */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-portrait { --hero-portrait-w: 300px; }
  .hero-portrait__img { max-height: min(40vh, 340px); }
  .hero { padding-block: var(--sp-6) 0; }
}
/* 移动 <640：立绘高度按「H1 + 副标题仍落在第一屏」反推。
   390×844 实测：nav 56 + 立绘 268 + 间距 + kicker/日英副题 ≈ 470，
   H1 落在 y≈478、副标题 534..597，均在首屏内（手机底栏约在 780 起）。 */
@media (max-width: 639px) {
  .hero { padding-block: var(--sp-3) 0; }
  .hero-portrait { --hero-portrait-w: 260px; }
  .hero-portrait__img { max-height: min(36vh, 300px); }
  .hero__inner { padding-block: 0 var(--sp-6); }
}
@media (max-width: 400px) {
  .hero-portrait { --hero-portrait-w: 248px; }
  .hero-portrait__img { max-height: min(34vh, 278px); }
}

/* ---------------- 桌面 1024px+：文字左 / 立绘右（§6.1 6列 + 6列） ----------------
   立绘绝对定位在右列，不干扰 .hero__inner 的流式排版。

   ⚠ 竖向刻意用 `top:0; height: calc(100vh - var(--nav-h))`，而不是 `inset-block:0`：
     ① .hero 的实际高度由文字内容决定（1440×900 实测 1137px > 100vh），
        若让立绘容器铺满 hero 全高再居中，立绘会被推到首屏之外（脚落到 y=1026）。
     ② .site-nav 是 position: sticky，会占掉 72px 的文档流高度，
        所以 .hero 的「首屏可见区」是 100vh − nav-h，而不是 100vh。
        容器必须按这个高度取值，立绘才会真正落在首屏正中。

   ⚠ 垂直居中刻意不用 transform: translateY(-50%) —— transform 会创建层叠上下文，
      使 img 的 mix-blend-mode 失效并重新露出暗矩形。改用 flex 的 align-items: center。 */
@media (min-width: 1024px) {
  .hero-portrait {
    position: absolute;
    top: 0;
    height: calc(100vh - var(--nav-h));
    right: var(--safe-x);
    width: 46%;
    max-width: 720px;
    --hero-portrait-w: 460px;
    margin-block: 0;
    align-items: center;
  }
  /* 立绘 676×1600（比例 0.4225）。高度上限 = 首屏可见高度 − 上下呼吸空间，
     1440×900 下 = (900 − 72) − 2×32 = 764px 高 → 宽 323px，全幅含鞋完整可见。
     用 max-width 封顶避免超宽屏把立绘拉得过大；
     用 min-height 兜底，防止不定高图片被 flex 回退解算压成 0。 */
  .hero-portrait__img {
    min-height: calc(100vh - var(--nav-h) - 2 * var(--sp-6));
    max-height: calc(100vh - var(--nav-h) - 2 * var(--sp-6));
    max-width: min(100%, var(--hero-portrait-w));
  }
  /* 文字列靠左并预留右侧立绘空间，避免正文压到立绘上 */
  .hero__inner { padding-right: 36%; }
}
/* ≥1280px Wide：立绘略放大、文字列再让出一点 */
@media (min-width: 1280px) {
  .hero-portrait { width: 42%; max-width: 720px; --hero-portrait-w: 500px; }
  .hero-portrait__img {
    min-height: calc(100vh - var(--nav-h) - 2 * var(--sp-6));
    max-height: calc(100vh - var(--nav-h) - 2 * var(--sp-6));
  }
  .hero__inner { padding-right: 36%; }
}
/* 宽屏但矮（如 1440×720 笔记本）：再收一点，避免立绘顶到顶栏 */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero-portrait__img {
    min-height: calc(100vh - var(--nav-h) - 2 * var(--sp-5));
    max-height: calc(100vh - var(--nav-h) - 2 * var(--sp-5));
  }
}

.hero__kicker { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.hero__kicker .tag {
  background: rgba(7, 11, 20, 0.55);
  border-color: color-mix(in srgb, var(--season-glow) 45%, transparent);
  color: var(--season-text);
  letter-spacing: 0.12em;
}

/* 日文装饰主标题「青の魔法使い」 */
.hero__jp {
  display: block;
  font-family: var(--font-serif-ja);
  font-size: 20px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.32em;
  line-height: 1.5;
  color: var(--season-accent);
  margin-bottom: var(--sp-3);
  transition: color var(--season-transition) var(--season-ease);
}
/* 英文副题（装饰） */
.hero__en {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--season-text-mut);
  margin-bottom: var(--sp-5);
  transition: color var(--season-transition) var(--season-ease);
}
/* 视觉主标题 —— Display 档 */
.hero__display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
  color: var(--season-text);
  margin-bottom: var(--sp-3);
  transition: color var(--season-transition) var(--season-ease);
}
/* H2 视觉主标题（§ 7.1：在坡道尽头的那栋洋馆里，住着两个魔女） */
.hero__h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.45;
  font-weight: var(--fw-semibold);
  color: var(--season-text);
  margin-bottom: var(--sp-5);
  transition: color var(--season-transition) var(--ease-std);
}
.hero__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0.01em;
  color: var(--season-text);
  margin-bottom: var(--sp-5);
  transition: color var(--season-transition) var(--season-ease);
}
.hero__body p {
  color: var(--season-text);
  font-size: var(--fs-body);
  line-height: 1.9;
  margin-bottom: var(--sp-4);
  max-width: var(--measure);
  transition: color var(--season-transition) var(--season-ease);
}
.hero__body .hero__body-em {
  color: var(--season-accent);
  font-weight: var(--fw-semibold);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 640px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { width: auto; }
}
/* 移动端按钮 width:100%（§ 6.1-1） */
@media (max-width: 639px) {
  .hero__cta .btn { width: 100%; }
}

/* 信任条：4 个 mono 数值 */
.trust {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.trust__text {
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  line-height: 1.75;
  color: var(--season-text-mut);
  margin: 0;
}
.trust__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.trust__item { display: flex; flex-direction: column; gap: 2px; }
.trust__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--season-accent);
}
.trust__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--season-text-mut);
}

/* Hero 控制区：季节指示器 + 暂停按钮 + 发动第五魔法 */
.hero__controls {
  position: relative;
  z-index: 4;
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.season-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(7, 11, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-full);
}
.season-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                             /* 命中区 44px */
  height: 44px;
  padding: 0;
  margin: -8px -6px;
  background: none;
  border: none;
  cursor: pointer;
}
.season-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.42;
  transition: opacity 200ms var(--ease-std), transform 200ms var(--ease-std);
}
.season-dot:hover::before { opacity: 0.8; }
.season-dot[aria-pressed="true"]::before { opacity: 1; transform: scale(1.5); box-shadow: 0 0 10px currentColor; }
.season-dot[data-season-btn="s1"] { color: var(--s1-glow); }
.season-dot[data-season-btn="s2"] { color: var(--s2-glow); }
.season-dot[data-season-btn="s3"] { color: var(--s3-glow); }
.season-dot[data-season-btn="s4"] { color: var(--s4-glow); }

.season-indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(7, 11, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-full);
}
.season-indicator__name {
  font-family: var(--font-serif-ja);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  color: var(--season-accent);
  min-width: 4.5em;
  text-align: center;
  transition: color var(--season-transition) var(--ease-std);
}

/* 向下滚动指示（1px 竖线 24px，淡出循环） */
.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 4;
  width: 1px;
  height: 24px;
  background: var(--season-text-mut);
  animation: hint-fade 2.4s ease-in-out infinite;
}
@keyframes hint-fade {
  0%, 100% { opacity: 0.2; transform: translateX(-50%) scaleY(0.6); }
  50%      { opacity: 0.85; transform: translateX(-50%) scaleY(1); }
}

/* 季节主题容器：覆写 --season-* 指针（§ 2.4） */
[data-season="s1"] { --season-bg: var(--s1-bg); --season-glow: var(--s1-glow); --season-accent: var(--s1-accent); --season-text: var(--s1-text); --season-text-mut: var(--s1-text-mut); }
[data-season="s2"] { --season-bg: var(--s2-bg); --season-glow: var(--s2-glow); --season-accent: var(--s2-accent); --season-text: var(--s2-text); --season-text-mut: var(--s2-text-mut); }
[data-season="s3"] { --season-bg: var(--s3-bg); --season-glow: var(--s3-glow); --season-accent: var(--s3-accent); --season-text: var(--s3-text); --season-text-mut: var(--s3-text-mut); }
[data-season="s4"] { --season-bg: var(--s4-bg); --season-glow: var(--s4-glow); --season-accent: var(--s4-accent); --season-text: var(--s4-text); --season-text-mut: var(--s4-text-mut); }

/* 夏 · 雷雨闪白：仅 ≤120ms 单帧（由 JS 控制次数，1s 内 ≤1 次） */
.hero__flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--s2-flash);
  opacity: 0;
  pointer-events: none;
}
.hero__flash.is-flash { animation: flash 110ms steps(1, end) 2; }
@keyframes flash {
  0%   { opacity: 0.85; }
  50%  { opacity: 0.06; }
  100% { opacity: 0.6; }
}

/* ==========================================================================
   区块 2：三十秒速览（横向滑动四张卡）
   ========================================================================== */
.overview { padding-block: var(--section-y); position: relative; }
.overview__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--safe-x);
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) transparent;
  -webkit-overflow-scrolling: touch;
}
.overview__rail::-webkit-scrollbar { height: 4px; }
.overview__rail::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: 2px; }
.overview__card { scroll-snap-align: start; }

@media (min-width: 640px) {
  .overview__rail { grid-auto-columns: 46%; }
}
@media (min-width: 1024px) {
  .overview__rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    padding-inline: 0;
  }
}
/* 卡内编号 + 标题 + 正文 */
.ovcard { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.ovcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ovcard__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--primary-light);
}
.ovcard__title { margin: 0; font-size: var(--fs-h4); line-height: 1.5; }
.ovcard__text { margin: 0; font-size: var(--fs-body); line-height: 1.85; color: var(--neutral-100); }
.ovcard__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--neutral-700);
  border: 1px solid var(--neutral-400);
}
.ovcard__media img { width: 100%; height: 100%; object-fit: cover; }

/* 移动端滚动提示 */
.rail-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-inline: var(--safe-x);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--neutral-200);
}
@media (min-width: 1024px) { .rail-hint { display: none; } }

/* ==========================================================================
   区块 3：九宫格导览（§ 7.1 区块内「这一页会告诉你什么」）
   ========================================================================== */
.guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  counter-reset: guide;
}
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--card-pad);
  background: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  color: var(--neutral-100);
  text-decoration: none;
  transition: background-color 200ms var(--ease-std), border-color 200ms var(--ease-std),
              box-shadow 200ms var(--ease-std), transform 200ms var(--ease-std);
}
.guide-card:hover {
  background: var(--neutral-550);
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--neutral-100);
}
.guide-card:hover .guide-card__title { color: var(--primary-light); }
.guide-card__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--primary-light);
}
.guide-card__title { margin: 0; font-size: var(--fs-h4); line-height: 1.45; color: var(--neutral-050); transition: color 200ms var(--ease-std); }
.guide-card__text { margin: 0; font-size: var(--fs-caption); line-height: 1.7; color: var(--neutral-200); }
.guide-card__arrow {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--primary-light);
}

/* ==========================================================================
   区块：人物速写（首页区块 2 / 立绘 + 长文）
   ========================================================================== */
.sketch {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .sketch { grid-template-columns: 5fr 7fr; gap: var(--sp-7); }
}
.figure-frame {
  position: relative;
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--neutral-700);
  box-shadow: 0 0 48px rgba(90, 169, 255, 0.14);  /* 微弱青蓝光晕 */
}
.figure-frame img { width: 100%; height: auto; display: block; }
.figure-frame--34 { aspect-ratio: 3 / 4; }
.figure-frame--34 img { height: 100%; object-fit: cover; }
.figure-frame__cap {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--neutral-400);
  background: var(--neutral-600);
}

/* ==========================================================================
   区块：档案（profile）
   ========================================================================== */
.profile-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .profile-grid { grid-template-columns: 7fr 5fr; gap: var(--sp-7); }
}
.profile-side { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .profile-side { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
}

/* 三件小事 / 位置：编号小标题列表 */
.mini-list { display: grid; gap: var(--sp-5); }
.mini-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.mini-item__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--primary-light);
  padding-top: 4px;
}
.mini-item__title { margin-bottom: var(--sp-2); }

/* ==========================================================================
   区块：能力设定（ability）—— 全站最重一节
   ========================================================================== */
/* 术语三步（魔术 / 魔法 / 魔法使） */
.terms { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .terms { grid-template-columns: repeat(3, 1fr); } }
.term-card {
  padding: var(--card-pad);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-400);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-sm);
}
.term-card__word {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--neutral-050);
  margin: 0 0 var(--sp-1);
}
.term-card__ja {
  font-family: var(--font-serif-ja);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--neutral-200);
  display: block;
  margin-bottom: var(--sp-3);
}
.term-card__text { margin: 0; font-size: var(--fs-body); line-height: 1.85; color: var(--neutral-100); }

/* 第五魔法色盘对照表（4 列小色块卡） */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 1024px) { .palette-grid { grid-template-columns: repeat(4, 1fr); } }
.palette-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--neutral-400);
  background: var(--neutral-700);
}
.palette-card__swatch {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.palette-card__name { display: flex; align-items: baseline; gap: var(--sp-2); }
.palette-card__ja {
  font-family: var(--font-serif-ja);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--neutral-050);
  letter-spacing: 0.1em;
}
.palette-card__hex {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--neutral-150);
}
.palette-card__desc { margin: 0; font-size: var(--fs-caption); line-height: 1.7; color: var(--neutral-200); }

/* 咏唱区（§ 7.1 全站视觉重点；日文在上、中译在下、逐行渐入） */
.chant {
  position: relative;
  padding-block: var(--sp-6);
}
.chant__block {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-400);
  border-left: 1px solid var(--primary);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.chant__block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 70% at 20% 0%, rgba(90, 169, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.chant__list { position: relative; display: grid; gap: var(--sp-5); }
/* 默认可见（无 JS 时文字依然可见 —— content-plan § 8） */
.chant__line {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--neutral-400);
}
.chant__line:last-child { border-bottom: none; padding-bottom: 0; }
/* 逐行渐入：仅在 JS 接管后才加 .is-anim，且 reduce-motion 下不加 */
.js-ready .chant__line.is-anim { opacity: 0; transform: translateY(12px); }
.js-ready .chant__line.is-anim.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-std), transform 600ms var(--ease-std);
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .chant__line.is-anim { opacity: 1 !important; transform: none !important; }
}
.chant__ja {
  display: block;
  font-family: var(--font-serif-ja);
  font-size: 22px;
  line-height: 1.7;
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  color: var(--neutral-050);
}
@media (min-width: 1024px) {
  .chant__ja { font-size: 30px; line-height: 1.65; }
}
.chant__zh {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--neutral-150);
}
.chant__index {
  display: inline-block;
  margin-right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--primary-light);
  vertical-align: middle;
}
.chant__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--neutral-400);
}

/* Magic Gunner：三步招式图解 */
.gunner-steps { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .gunner-steps { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  padding: var(--card-pad);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-sm);
}
.step-card__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--primary-light);
  display: block;
  margin-bottom: var(--sp-2);
}
.step-card__title { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.step-card__text { margin: 0; font-size: var(--fs-caption); line-height: 1.75; color: var(--neutral-100); }
.step-card__figure {
  margin-top: var(--sp-3);
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--neutral-600);
  border: 1px solid var(--neutral-400);
}
.step-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.step-card__note {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--neutral-200);
}

/* 数值条（4 吨 / 20 吨 / 30 发） */
.stat-rows { display: grid; gap: var(--sp-3); }
.stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--neutral-400);
}
.stat-row:last-child { border-bottom: none; }
.stat-row__key { font-size: var(--fs-body); color: var(--neutral-100); }
.stat-row__val {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--primary-light);
  white-space: nowrap;
}

/* 能力树降级：移动端纵向序号列表（§ 6.1-4） */
.ability-tree { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .ability-tree { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }

/* 「发动第五魔法」区块内的按钮组 */
.magic-trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  margin-top: var(--sp-6);
}

/* ==========================================================================
   区块：人物关系（relations，基调 A + 关系图 + C 基调有珠长文）
   ========================================================================== */
/* 关系图：桌面 SVG 放射图；移动降级为纵向卡片列表 */
.relations-figure { margin: 0 0 var(--sp-6); }
.relations-svg { width: 100%; height: auto; display: none; }
@media (min-width: 640px) { .relations-svg { display: block; } }
.relations-list { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .relations-list { display: none; } }

.rel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
}
.rel-card__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rel-card__name { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--neutral-050); margin: 0; }
.rel-card__text { margin: 0; font-size: var(--fs-caption); line-height: 1.7; color: var(--neutral-150); }

/* SVG 关系图内部样式（用 currentColor 便于统一） */
.relations-svg .rel-node circle,
.relations-svg .rel-node rect { stroke: var(--neutral-000); stroke-width: 3; }
.relations-svg .rel-node--aoko circle { fill: var(--accent); }
.relations-svg .rel-node--yuzu circle { fill: var(--copper); }
.relations-svg .rel-node--soujuurou circle { fill: var(--primary); }
.relations-svg .rel-node--toko circle { fill: var(--violet); }
.relations-svg .rel-node--ritsuka circle { fill: var(--gold); }
.relations-svg .rel-link { stroke: var(--neutral-350); stroke-width: 1; fill: none; }
.relations-svg .rel-link--broken { stroke-dasharray: 6 5; }
.relations-svg .rel-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--neutral-150);
  letter-spacing: 0.02em;
}
.relations-svg .rel-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  fill: var(--neutral-050);
}
.relations-svg .rel-role {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--neutral-200);
}
.relations-svg a:hover .rel-name { fill: var(--primary-light); }
.relations-svg a:hover circle { stroke: var(--primary-glow); stroke-width: 2; }
.relations-svg a:focus-visible circle { stroke: var(--primary-glow); stroke-width: 2; }
.relations-svg a:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: 2px; }

/* 有珠长文（C 基调，桌面三栏：目录 + 正文 + 留白） */
.article-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr);
    gap: var(--sp-6);
  }
  .article-grid__toc { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
}
/* 平板：侧栏折叠为顶部横向目录条（§ 6.1） */
@media (min-width: 640px) and (max-width: 1023px) {
  .article-grid__toc {
    position: sticky;
    top: var(--nav-h);
    z-index: 55;
    background: var(--paper);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--paper-line);
    overflow-x: auto;
    white-space: nowrap;
  }
  .article-grid__toc .toc__list { display: flex; gap: var(--sp-2); }
  .article-grid__toc .toc__link { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); }
  .article-grid__toc .toc__link.is-current { border-left-color: transparent; border-bottom-color: var(--copper); }
}

/* PLOY 卡片网格 */
.ploy-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .ploy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ploy-grid { grid-template-columns: repeat(3, 1fr); } }
.ploy-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
}
.ploy-card__name { margin: 0; font-size: var(--fs-h4); color: var(--neutral-050); }
.ploy-card__src {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--neutral-200);
}
.ploy-card__text { margin: 0; font-size: var(--fs-caption); line-height: 1.75; color: var(--neutral-100); }
.ploy-card__weak {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--neutral-400);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--accent-bright);
}

/* 长引文（作品节录 / 访谈） */
.inset-quote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--gold);
  background: var(--neutral-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.on-paper .inset-quote { background: var(--paper-deep); border-left-color: var(--copper); }
.inset-quote p { margin: 0; font-size: var(--fs-body-l); line-height: 1.85; color: var(--neutral-050); }
.on-paper .inset-quote p { color: var(--ink); }
.inset-quote cite {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: var(--neutral-200);
}
.on-paper .inset-quote cite { color: var(--ink-2); }

/* 人物小节（草十郎 / 橙子 / 律架） */
.persona { padding-block: var(--sp-7); border-top: 1px solid var(--neutral-400); }
.persona:first-of-type { border-top: none; }
.persona__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.persona__name { margin: 0; }
.persona__cv {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--neutral-200);
}
.persona-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1024px) { .persona-grid { grid-template-columns: 4fr 8fr; } }

/* ==========================================================================
   区块：年表（timeline，基调 B）
   ========================================================================== */
/* 双时间线容器：窄屏单列、桌面双列。
   注意 min-width:0 —— grid 子项默认 min-width:auto，
   会被内部最长内容（年表卡片里不换行的年份/长标题）撑到 562px，
   在 375px 视口下造成整页横向溢出（实测 207px）。 */
.timeline-pair {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: minmax(0, 1fr);
}
.timeline-pair > * { min-width: 0; }
@media (min-width: 1024px) { .timeline-pair { gap: var(--sp-9); } }

/* ==========================================================================
   区块：画廊（gallery，基调 A）
   ========================================================================== */
.gallery-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.gallery-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--neutral-150);
}

/* ==========================================================================
   区块：名台词（quotes，基调 B，全站视觉重音）
   ========================================================================== */
.quotes-list { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .quotes-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .quotes-list > .quote:first-child { grid-column: 1 / -1; }
}
.quotes-list .quote { max-width: none; }

/* ==========================================================================
   区块：相关人物图鉴（characters）
   ========================================================================== */
.char-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .char-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .char-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.char-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  color: var(--neutral-100);
  text-decoration: none;
  transition: background-color 200ms var(--ease-std), border-color 200ms var(--ease-std), transform 200ms var(--ease-std);
}
a.char-card:hover {
  background: var(--neutral-550);
  border-color: var(--neutral-300);
  transform: translateY(-2px);
  color: var(--neutral-100);
}
a.char-card:hover .char-card__name { color: var(--primary-light); }
.char-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--neutral-550);
  border: 1px solid var(--neutral-400);
}
.char-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.char-card__avatar--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--neutral-200);
  background: var(--neutral-550);
}
.char-card__name { margin: 0 0 var(--sp-1); font-size: var(--fs-h4); color: var(--neutral-050); transition: color 200ms var(--ease-std); }
.char-card__cv {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--neutral-200);
  display: block;
  margin-bottom: var(--sp-2);
}
.char-card__text { margin: 0; font-size: var(--fs-caption); line-height: 1.7; color: var(--neutral-100); }
/* 图鉴区块内的纸上卡片网格 */
.paper-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .paper-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .paper-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   区块：页脚（基调 A 回归）
   ========================================================================== */
.site-footer {
  background: var(--neutral-000);
  border-top: 1px solid var(--neutral-400);
  padding-block: var(--sp-8) var(--sp-7);
}
.footer-cols { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }

/* 移动端页脚：分栏改为 <details> 手风琴折叠组（§ 6.1-10） */
.footer-acc { display: contents; }
.footer-col__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); color: var(--neutral-050); }
.footer-col__list { display: grid; gap: var(--sp-2); }
.footer-col__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-caption);
  color: var(--neutral-150);
  text-decoration: none;
}
.footer-col__list a:hover { color: var(--primary-light); text-decoration: underline; }
.footer-col__text { font-size: var(--fs-caption); line-height: 1.75; color: var(--neutral-200); margin: 0 0 var(--sp-3); }

@media (max-width: 639px) {
  /* 手风琴：details/summary 作为折叠组 */
  .footer-cols { gap: var(--sp-4); }
  .footer-acc { display: block; border-bottom: 1px solid var(--neutral-400); }
  .footer-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding-block: var(--sp-3);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--neutral-050);
    list-style: none;
  }
  .footer-acc > summary::-webkit-details-marker { display: none; }
  .footer-acc > summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: var(--fs-h4);
    color: var(--primary-light);
  }
  .footer-acc[open] > summary::after { content: "−"; }
  .footer-acc > div { padding-bottom: var(--sp-4); }
  .footer-col__title { display: none; }
}
@media (min-width: 640px) {
  .footer-acc > summary { display: none; }
  .footer-acc > div { display: block !important; }
}

.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--neutral-400);
  display: grid;
  gap: var(--sp-3);
}
.footer-legal {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--neutral-200);
  margin: 0;
}
.footer-legal strong { color: var(--neutral-150); }

/* ==========================================================================
   第五魔法 · 全屏必杀演出（§ 2.4 演出 B）
   ========================================================================== */
.magic {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--neutral-000);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-std), visibility 500ms;
}
.magic.is-open { opacity: 1; visibility: visible; }
.magic[hidden] { display: none; }

/* 四季轮转的底光层 */
.magic__wash {
  position: absolute;
  inset: -20%;
  z-index: 0;
  transition: opacity var(--season-transition) var(--season-ease);
  background: radial-gradient(
    circle 50% at 50% 50%,
    color-mix(in srgb, var(--season-glow) 40%, transparent) 0%,
    transparent 65%
  );
  opacity: 0.5;
}
.magic__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--flash-white);
  opacity: 0;
  pointer-events: none;
}
.magic.is-burst .magic__flash { animation: magic-burst 900ms var(--ease-out) both; }
@keyframes magic-burst {
  0%   { opacity: 0; }
  8%   { opacity: 0.92; }
  22%  { opacity: 0.18; }
  34%  { opacity: 0.72; }
  100% { opacity: 0; }
}
/* 青蓝光爆发：中心扩散环 */
.magic__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 12vmax; height: 12vmax;
  margin: -6vmax 0 0 -6vmax;
  border-radius: var(--r-full);
  border: 2px solid var(--primary-glow);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.magic.is-burst .magic__ring { animation: ring-out 1400ms var(--ease-out) both; }
@keyframes ring-out {
  0%   { transform: scale(0.2); opacity: 1; border-width: 6px; }
  100% { transform: scale(14); opacity: 0; border-width: 1px; }
}
/* 粒子画布 */
.magic__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
/* 咏唱文字逐行浮现 */
.magic__stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--content);
  padding-inline: var(--safe-x);
  text-align: center;
}
.magic__label {
  font-family: var(--font-serif-ja);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.4em;
  color: var(--s2-flash);
  margin-bottom: var(--sp-6);
  opacity: 0;
}
.magic.is-open .magic__label { animation: rise-in 700ms var(--ease-out) 100ms both; }
.magic__verse { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.magic__line {
  font-family: var(--font-serif-ja);
  font-size: 17px;
  line-height: 1.8;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--neutral-050);
  text-shadow: 0 0 24px rgba(90, 169, 255, 0.55);
  opacity: 0;
}
@media (min-width: 640px) { .magic__line { font-size: 22px; } }
@media (min-width: 1024px) { .magic__line { font-size: 26px; } }
.magic__line-zh {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--neutral-150);
  text-shadow: none;
}
.magic.is-open .magic__line { animation: rise-in 620ms var(--ease-out) both; }
/* 逐行延迟 */
.magic.is-open .magic__line:nth-child(1) { animation-delay: 500ms; }
.magic.is-open .magic__line:nth-child(2) { animation-delay: 900ms; }
.magic.is-open .magic__line:nth-child(3) { animation-delay: 1300ms; }
.magic.is-open .magic__line:nth-child(4) { animation-delay: 1700ms; }
.magic.is-open .magic__line:nth-child(5) { animation-delay: 2100ms; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.magic__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--s4-glow);
  opacity: 0;
}
.magic.is-open .magic__title { animation: rise-in 800ms var(--ease-out) 2600ms both; }
.magic__sub {
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--neutral-150);
  opacity: 0;
}
.magic.is-open .magic__sub { animation: rise-in 800ms var(--ease-out) 3000ms both; }

.magic__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 6;
}
.magic__hint {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--neutral-200);
  opacity: 0;
}
.magic.is-open .magic__hint { animation: rise-in 600ms var(--ease-out) 3200ms both; }

/* reduce-motion：取消位移/模糊/环扩散，只保留淡入 */
@media (prefers-reduced-motion: reduce) {
  .magic__line,
  .magic__title,
  .magic__sub,
  .magic__label,
  .magic__hint { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .magic__ring { display: none; }
  .magic.is-burst .magic__flash { animation: none; }
}

/* ==========================================================================
   顶部五日四季光带（§ 11 决策 2 的折中：不改内容区背景）
   ========================================================================== */
.kicker {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 120px;
  z-index: 85;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-std);
  overflow: hidden;
  mix-blend-mode: screen;
}
.kicker.is-on { opacity: 1; }
.kicker__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--season-glow) 34%, transparent), transparent);
  transition: background var(--season-transition) var(--season-ease);
}
.kicker__particles { position: absolute; inset: 0; }

/* ==========================================================================
   Muse：滚动浮现（IntersectionObserver 加 .is-inview）
   reduce-motion 下由 base.css 全局降级为瞬显
   ========================================================================== */
.js-ready .reveal { opacity: 0; transform: translateY(16px); }
.js-ready .reveal.is-inview { opacity: 1; transform: none; transition: opacity 500ms var(--ease-std), transform 500ms var(--ease-std); }
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* 锚点滚动余量（§ 8.2-6）
   [修复 P2] 统一为「顶栏高度 + 16px 呼吸空间」，与 --nav-h 令牌联动，
   避免硬编码（原为 96/80，与 72/56 的顶栏对不齐）。
   只作用于真正的锚点目标（:target 与带 id 的 section / main），
   不再用 [id] 通配到所有带 id 的元素 —— 那会给每个 id 元素都加偏移，
   且会误伤 JS 里动态加 id 的节点。 */
:target { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
section[id],
main[id],
[id][data-anchor] { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
/* 页面顶部锚点 (#top) 不应有额外偏移 */
#top { scroll-margin-top: 0; }