/* ==========================================================================
   content-wiring.css（homepage-v4 · 2026-10-18 · 文案接线 + 从 v3 搬内容交互模块）
   最后加载（在 mobile-skin.css 之后），只管下面这几件事；材质、光影、黄金时刻、滑杆、拼句子的样式一律不动。
     1 · header = spike 09 E3a（10-19 合入，Wanfang 10-18 22:47 选定；取代原来的 C2 右栏 statement + 三句钩子 + 物件）：
         桌面左栏只有 PLIK，右栏「霹雳啪啦实验室」+ 一段正文；手机 PLIK → 中文名 → 一段正文
     2 · C3 右上角 ↻：图标常驻，hover / 键盘聚焦才出提示字；没有 hover 的设备默认显示（取自 v3 content-hierarchy.css）。底部翻面按钮已从 HTML 删掉
     3 · 栏宽 / 栏距 --cols / --col-gap（header 两栏 §1 用）；卡片网格不在这里（css/grid.css）
     4 · 卡片里的字：content 的 ** 在标题里不再加粗一档；衣服的家背面两张图（取自 v3 content-hierarchy.css 的 object-gallery）
     5 · 美人鱼尾巴卡（单面，只倾斜不翻面；版式在 css/mermaid-card.css）
     6 · About 摘要、跟着看下一个（中文小红书主入口 + 订阅次级；英文订阅主入口）、页尾
   ========================================================================== */

/* ---------------- 1 · header = spike 09 E3a ---------------- */
/* 左栏的 PLIK 模块：中文名（页面唯一的 h1「PLIK Lab · 霹雳啪啦实验室」）任何宽度都视觉隐藏，读屏照读；英文 tagline 不显示（挪到页尾，V2 已定） */
.mh-brand .plik-hd__name { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mh-brand .plik-hd__slogan-en { display: none; }
.mh-brand .plik-hd__text { padding-bottom: 0; }
.mh-say { position: relative; min-width: 0; padding: 0; }
/* 右栏的中文名：视觉上的字标（aria-hidden），得意黑斜体，和模块原来的中文名同一套字 */
.mh-title { margin: 0; font-family: "PLIK Smiley", "Smiley Sans Oblique", "Smiley Sans", var(--font-brand-zh); font-weight: 400; font-size: 40px; line-height: 1.12; letter-spacing: .03em; color: var(--ink); }
/* 一段正文 = 身份句 + 立场句（每句一个 .mh-sent，js/copy.js 的 identity / sentences 渲染器切好） */
.mh-body { margin: 10px 0 0; font-family: var(--font-text); font-size: 20px; font-weight: 400; line-height: 1.7; letter-spacing: 0; color: var(--ink-2); }
.mh-identity .mh-clause { display: inline-block; }   /* 窄栏只在逗号处换行 */
html[data-lang="en"] .mh-body .mh-sent { margin-right: .28em; }   /* 英文句子之间的空格（行尾多出来的看不见） */
html[data-lang="en"] .mh-identity .mh-clause { display: inline; }   /* 英文身份句不在逗号处硬断（否则「A mother of two,」会单独一行） */
/* 「两个孩子的妈妈」：很轻的下划线，链到 #about；不加任何提示（D39）。hover 深一档 */
.mh-id-link {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--ink-rgb) / .26); text-underline-offset: .3em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.mh-id-link:hover { color: var(--ink); text-decoration-color: rgb(var(--ink-rgb) / .6); }
.mh-id-link:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .55); outline-offset: 3px; border-radius: 2px; color: var(--ink); }

/* 两栏（≥ 900）：栏线 = 卡片网格的栏线；右栏顶 = PLIK 字母顶（--hd-top）、正文最后一行底 = 字母底（--hd-gap），都由 js/header-align.js 量 */
@media (min-width: 900px) {
  .mh-grid { grid-template-columns: var(--cols); column-gap: var(--col-gap); align-items: start; }
  .mh-say { margin-top: var(--hd-top, 20px); }
  .mh-body { margin-top: var(--hd-gap, 10px); }
  .mh-body .mh-sent, .mh-stance { display: block; }   /* 身份句一行、立场句两行（句号处换行） */
  html[data-lang="en"] .mh-body { margin-top: 0; }    /* 英文页没有中文名：撑开的是身份句和立场句之间 */
  html[data-lang="en"] .mh-stance { margin-top: var(--hd-gap, 10px); }
}
/* 单栏（600–899）：PLIK → 中文名 → 正文，每句一行；字号在桌面和手机之间 */
@media (max-width: 899.98px) {
  .mh-say { margin-top: 6px; max-width: 760px; }
  .mh-title { font-size: 30px; }
  .mh-body { margin-top: 8px; font-size: 18px; }
  .mh-body .mh-sent, .mh-stance { display: block; }
}
/* 手机（< 600）= spike 09 E2 手机：PLIK → 霹雳啪啦实验室（22px）→ 一段 15px / 400 / --ink 正文；每句是不拆开的单元，行尾总落在句号上 */
@media (max-width: 599.98px) {
  .mh-say { margin-top: 0; }
  .mh-title { font-size: 22px; }
  .mh-body { margin-top: 4px; font-size: 15px; line-height: 1.75; color: var(--ink); }
  .mh-stance { display: inline; }
  .mh-body .mh-sent { display: inline-block; }
  /* 「两个孩子的妈妈」的点击区域 ≥ 44 高（上下 padding 不改排版） */
  .mh-id-link { padding: 12px 0; margin: -12px 0; -webkit-tap-highlight-color: rgb(var(--ink-rgb) / .08); }
}

/* ---------------- 2 · 右上角 ↻（C3）---------------- */
/* 桌面（有鼠标）：mobile-skin 原来把它藏了，这里打开；尺寸照 v3 content-hierarchy.css。触屏的尺寸 / 常显仍由 mobile-skin §3 管 */
@media (hover: hover) and (pointer: fine) {
  .flip-tile .corner-turn { display: inline-flex; align-items: center; width: auto; min-width: 38px; height: 38px; gap: 6px; padding: 0 8px; justify-content: flex-end; font-family: var(--font-text); font-size: 12px; }
  .narrative-card .face-body > .cap:first-of-type, .narrative-card .card-heading > .cap { margin-right: 148px; }
}
/* peek.css 末尾（原 hero-objects.css）把按钮锁成 38 × 38，提示字会被挤掉：宽度跟内容走（触屏的高度 / 内边距仍由 mobile-skin §3 管） */
.narrative-card .corner-turn { width: auto; white-space: nowrap; }
.narrative-card .corner-turn .fb-t { opacity: 0; transition: opacity .2s; }
.narrative-card:hover .corner-turn .fb-t, .narrative-card:focus-within .corner-turn .fb-t { opacity: 1; }
@media (hover: none), (pointer: coarse) { .narrative-card .corner-turn .fb-t { opacity: 1; } }
/* 手机首屏：魔法笔卡的眉题现在只有一个（content 的 card.pen.front.cap），mobile-skin 原来只给 .m-cap 显示，这里让它也显示 */
@media (max-width: 599.98px) { .narrative-card[data-tile="pen"] .front .card-heading > .cap.cap:not(.m-cap) { display: block; } }

/* ---------------- 3 · 等宽两列（C7）---------------- */
body { --cols: minmax(0, 1fr) minmax(0, 1fr); --col-gap: var(--narrative-gap, 30px); }
/* 首页卡片网格（栏、行、每张卡的位置）只在 css/grid.css 里写（2026-10-26 IA 5a：这里原来的 C7 两列位置规则已被 grid.css 取代，删掉） */

/* ---------------- 4 · 卡片里的字 ---------------- */
.narrative-title strong, .letter-invite h2 strong { font-weight: inherit; }
.story-part { display: contents; }
.story .story-quote { color: var(--ink); }
.narrative-card .story p { margin: 0; }
.narrative-card .card-actions { gap: 12px 22px; }

/* ---------------- 5 · 美人鱼尾巴卡：单面，只倾斜 ---------------- */
.tilt-tile { --tilty: 0; --tiltx: 0; --pz: 0; --obj-z: calc(var(--z-rest) * var(--z-k) + var(--zh) + var(--zf) + var(--pz)); }
.tilt-tile .flip { transform: translateZ(calc(var(--pz) * 1px)) rotateX(calc(var(--tiltx) * 1deg)) rotateY(calc(var(--tilty) * 1deg)); }
@media (prefers-reduced-motion: reduce) { .tilt-tile .flip { transform: none !important; } }

/* ---------------- 6 · About 摘要、跟着看下一个、页尾 ---------------- */
.letter-invite h2 { font-weight: 500; font-size: 26px; line-height: 1.5; margin: 0 0 16px; color: var(--ink); }
.footer-tagline { font: 14px/1.7 var(--font-text); color: var(--ink-2); }
.wallfoot .wf-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.wallfoot .wf-links a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.wallfoot .wf-links a:hover { text-decoration-color: currentColor; }