/* mermaid-card.css（homepage-v4 · 10-18 起；2026-10-22 设计系统 v3）—— 只管 #mermaid（美人鱼尾巴）这一张卡。
   图文双栏卡（和找故事同一套规则 · R9 / R22 / R35 / R44）：
     · 横排（≥ 600）：左图右文，两栏间距 = --card-inset；图栏高 = 内容区（顶对文字、底对卡底内距线），照片 cover 填满；
       文字上对照片顶，「读完整故事 ↗」落在照片底边；字条行（小标签）占整行。平板和桌面同一套。
     · 竖排（< 600）：上图下文，图块水平居中（最宽 300），文字左对齐。
   卡仍是单面、只倾斜（js/tilt-single.js），点图或按钮去 stories/mermaid-tail.html（js/nav-target.js：手机同标签、桌面新标签）。 */
.mermaid-card .mermaid-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--card-inset);
  align-items: stretch; height: 100%; box-sizing: border-box; }
.mermaid-card .mermaid-body > .lb { grid-column: 1 / -1; margin: 0 0 12px; }
.mermaid-card .mermaid-photo { display: block; min-height: 0; border-radius: 3px; overflow: hidden; line-height: 0; }
.mermaid-card .mermaid-photo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.mermaid-card .mermaid-text { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mermaid-card .mermaid-text .narrative-title { margin: 0; }
.mermaid-card .mermaid-text .card-desc { margin-top: 8px; }
.mermaid-card .mermaid-text .card-actions { margin-top: auto; padding-top: 16px; }
:root[data-theme="night"] .mermaid-card .mermaid-photo img { box-shadow: 0 0 0 1px rgb(255 240 220 / .12) inset; }
:root.paper-dark[data-theme="night"] .mermaid-card .mermaid-photo { box-shadow: 0 0 0 1px rgb(255 240 220 / .16); }
@media (max-width: 899.98px) {
  .mermaid-card .mermaid-body { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .mermaid-card .mermaid-body { display: block; height: auto; }
  .mermaid-card .mermaid-photo { max-width: 300px; margin: 0 auto; }
  .mermaid-card .mermaid-photo img { height: auto; aspect-ratio: 694 / 868; }
  .mermaid-card .mermaid-text .narrative-title { margin-top: 16px; }
}