/* ==========================================================================
   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 · C7 等宽两列：左列 魔法笔 → 月光湾 → 美人鱼尾巴，右列 衣服的家 → 飞飞鱼（取自 v3 content-hierarchy.css + js/column-stack.js）；About / 关注也等宽。
         10-19：栏宽 / 栏距写成 --cols / --col-gap，header 两栏（§1）、卡片网格、About / 关注三处共用；≥ 1024 也等宽（取代 desktop-wide.css 的 65 : 35）
     4 · 卡片里的字：content 的 ** 在标题里不再加粗一档；衣服的家背面两张图（取自 v3 content-hierarchy.css 的 object-gallery）
     5 · 美人鱼尾巴卡（单面，只倾斜不翻面）
     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); text-wrap: pretty; }
.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); }
.narrative-grid { grid-template-columns: var(--cols); column-gap: var(--col-gap); }
.narrative-grid > #pen { grid-column: 1; grid-row: 1; }
.narrative-grid > #home { grid-column: 2; grid-row: 1; }
.narrative-grid > #bay { grid-column: 1; grid-row: 2; margin-top: var(--left-stack-offset, 0px); }
.narrative-grid > #fish { grid-column: 2; grid-row: 2; margin-top: var(--right-stack-offset, 0px); }
.narrative-grid > #mermaid { grid-column: 1; grid-row: 3; margin-top: var(--mermaid-stack-offset, 0px); }
.stay-section { grid-template-columns: var(--cols); column-gap: var(--col-gap); }
@media (max-width: 699.98px) {
  .narrative-grid { grid-template-columns: minmax(0, 1fr); }
  .narrative-grid > #pen, .narrative-grid > #home, .narrative-grid > #bay, .narrative-grid > #fish, .narrative-grid > #mermaid { grid-column: 1; grid-row: auto; margin-top: 0; }
  .stay-section { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 4 · 卡片里的字 ---------------- */
.narrative-title strong, .about-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 .object-gallery { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; margin-top: 16px; }
.object-gallery img { display: block; width: 100%; height: 220px; object-fit: contain; }
.narrative-card .face.back .card-deck { margin-top: 14px; font-size: 15px; line-height: 1.8; }
.narrative-card .card-actions { gap: 12px 22px; }
@media (max-width: 699.98px) { .object-gallery img { height: 180px; } }

/* ---------------- 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)); }
.mermaid-card .bay-placeholder { margin-top: 12px; }
.mermaid-card .narrative-title { font-size: clamp(20px, 1.7vw, 24px); }   /* 版式在 css/mermaid-card.css；描述 = .card-desc（v3 · R43） */
@media (prefers-reduced-motion: reduce) { .tilt-tile .flip { transform: none !important; } }

/* ---------------- 6 · About 摘要、跟着看下一个、页尾 ---------------- */
.about-title, .letter-invite h2 { font-weight: 500; font-size: 26px; line-height: 1.5; margin: 0 0 16px; color: var(--ink); }
.about-summary-body p + p, .follow-body p + p { margin-top: 12px; }
.about-summary-body { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.about-more { margin-top: 20px; }
.follow-body { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.follow-primary { margin-top: 22px; }
.news-secondary { margin-top: 30px; padding-top: 20px; border-top: .5px solid var(--hair-2); }
.news-title { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.news-title strong { font-weight: 500; color: var(--ink); }
.letter-invite .news-secondary .news-form { margin-top: 12px; }
html[data-lang="en"] .news-secondary { margin-top: 8px; padding-top: 0; border-top: 0; }
:root.paper-dark[data-theme="night"] .news-secondary { border-top-color: rgb(var(--dk-ink-rgb, var(--night-ink-rgb)) / .16); }
.footer-tagline { font: 14px/1.7 var(--font-text); color: var(--ink-2); margin-top: 10px; }
.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; }