/* ==========================================================================
   grid.css（homepage-v4 · 2026-10-19 晚起；2026-10-22 设计系统 v3）—— 首页网格 = 布局 C（Wanfang 16:45 手绘草图）。
   规则：
     · 卡片间距 --grid-gap（tokens.css：桌面 / 平板 24，手机 16），水平 / 垂直同值（R8）。1440：3 等栏；700–1023：2 栏；< 700：1 栏。
     · 行高（R4 / R9 / R9b）：第一行 = 「我」卡正面的内容高；第二行起 = 第一行 × ½（取 8 的倍数）。
       [10-22 晚] 不再取正反面较高者（原 R14），第一行也不再取 8 的倍数：背面全文更长就在卡内滚动，更短就留在正面高里 ——
       正面按钮离文字正好 16、不留空白，同一排的魔法笔不被撑高。
       两个值由 js/me-card.js 量好写进 --row-1 / --row-n（只在 ≥ 700）；没量到之前按内容排。卡片本身不设固定比例，高度 = 行高（R4）。
       手机（< 700）不设行高：「我」卡高 = 朝上那一面的内容高（--me-h，css/me-card.css §1）。
     · 每张卡的可见边界 = 格子边界（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; }

/* ---------------- ≥ 1024：三等栏 ----------------
   我（1）| 魔法笔（2）
   找故事（2）| 衣服的家（1）
   月光变身湾（1）| 美人鱼尾巴（2） */
@media (min-width: 1024px) {
  .narrative-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: var(--row-1, auto) repeat(2, var(--row-n, auto)); 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 / span 2; grid-row: 2; contain: size; }
  .narrative-grid > #home    { grid-column: 3;          grid-row: 2; }
  .narrative-grid > #bay     { grid-column: 1;          grid-row: 3; }
  .narrative-grid > #mermaid { grid-column: 2 / span 2; grid-row: 3; }
}

/* ---------------- 700–1023：两栏 ----------------
   我 | 魔法笔 ／ 找故事（2 栏）／ 衣服的家 | 月光湾 ／ 美人鱼尾巴（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) repeat(3, var(--row-n, auto)); align-items: stretch; }
  .narrative-grid > #about   { grid-column: 1;      grid-row: 1; }
  .narrative-grid > #pen     { grid-column: 2;      grid-row: 1; contain: size; }
  .narrative-grid > #finder  { grid-column: 1 / -1; grid-row: 2; contain: size; }
  .narrative-grid > #home    { grid-column: 1;      grid-row: 3; }
  .narrative-grid > #bay     { grid-column: 2;      grid-row: 3; }
  .narrative-grid > #mermaid { grid-column: 1 / -1; 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: 300px; min-height: 0; }
}