/* ==========================================================================
   grid.css（homepage-v4 · 2026-10-19 晚起；2026-10-22 设计系统 v3；2026-10-26 IA 5a）—— 首页网格。
   规则：
     · 卡片间距 --grid-gap（tokens.css：桌面 / 平板 24，手机 16），水平 / 垂直同值（R8）。≥ 1024：3 等栏；700–1023：2 栏；< 700：1 栏。
     · 行高：高行 = 「我」卡正面的内容高 --row-1（js/me-card.js 量好写在 .narrative-grid 上，只在 ≥ 700；没量到之前按内容排）。
       矮行 --row-half = (高行 − 间距) ÷ 2：两张叠放的矮卡 + 一个间距正好 = 一张高卡，格子永远对齐、没有空洞（IA 5a）。
       背面全文更长就在卡内滚动，不撑高同一排的魔法笔。卡片本身不设固定比例，高度 = 行高（R4）。
     · 每张卡的可见边界 = 格子边界（TROFAST 盆由 js/tub.js 画到卡边）。魔法笔、找故事 contain: size：内容不撑行，只 stretch 到行高。
     · 手机顺序 = DOM 顺序（我 → 魔法笔 → 找故事 → 美人鱼尾巴 → 衣服的家 → 月光湾），读屏 / Tab 一致。
   ========================================================================== */
.narrative-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); align-items: start;
  --row-half: calc((var(--row-1, 665px) - var(--grid-gap)) / 2); }

/* ---------------- ≥ 1024：三等栏（IA 5a）----------------
   我（1）| 魔法笔（2）
   找故事（高）| 美人鱼尾巴（高）| 衣服的家（矮）
                                 | 月光变身湾（矮） */
@media (min-width: 1024px) {
  .narrative-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: var(--row-1, auto) var(--row-half) var(--row-half); align-items: stretch; }
  .narrative-grid > #about   { grid-column: 1;          grid-row: 1; }
  .narrative-grid > #pen     { grid-column: 2 / span 2; grid-row: 1; contain: size; }
  .narrative-grid > #finder  { grid-column: 1;          grid-row: 2 / span 2; contain: size; }
  .narrative-grid > #mermaid { grid-column: 2;          grid-row: 2 / span 2; }
  .narrative-grid > #home    { grid-column: 3;          grid-row: 2; }
  .narrative-grid > #bay     { grid-column: 3;          grid-row: 3; }
}

/* ---------------- 700–1023：两栏（IA 5a）----------------
   我 | 找故事 ／ 魔法笔（2 栏）／ 美人鱼尾巴（高）| 衣服的家（矮）
                                                  | 月光变身湾（矮） */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .narrative-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: var(--row-1, auto) var(--row-1, auto) var(--row-half) var(--row-half); align-items: stretch; }
  .narrative-grid > #about   { grid-column: 1;      grid-row: 1; }
  .narrative-grid > #finder  { grid-column: 2;      grid-row: 1; contain: size; }
  .narrative-grid > #pen     { grid-column: 1 / -1; grid-row: 2; contain: size; }
  .narrative-grid > #mermaid { grid-column: 1;      grid-row: 3 / span 2; }
  .narrative-grid > #home    { grid-column: 2;      grid-row: 3; }
  .narrative-grid > #bay     { grid-column: 2;      grid-row: 4; }
}
@media (min-width: 700px) {
  .narrative-grid > .narrative-card { align-self: stretch; margin-top: 0; }
  .narrative-card[data-tile="pen"] .pen-stage { flex: 1 1 0; height: auto; min-height: 0; }   /* 魔法笔纸面：吃掉行高剩下的部分 */
}

/* ---------------- < 700：单列；「我」卡占满列宽（Wanfang 10-21 21:02：和下面的卡等宽、左右对齐；相纸白边 = --card-inset） ---------------- */
@media (max-width: 699.98px) {
  .narrative-grid > .narrative-card { grid-column: 1; grid-row: auto; }
  .narrative-grid > #about { width: auto; justify-self: stretch; }
  .narrative-card[data-tile="pen"] .pen-stage { height: 352px; min-height: 0; }   /* 材质按钮 48 + 16 + 试写淡字 + 16 → 纸面从 96 开始，纸面高 256 */
}