/* Narrative revision — 2026-10-17. Existing materials, light and flip clock remain. */
:root { --narrative-gap: 30px; --story-size: 15px; --story-leading: 1.9; --card-padding: 28px; }
/* [10-19 · E3a] header 两栏的对齐 / 间距改由 content-wiring.css §1 + js/header-align.js 管，这里原来的 .mh-grid 居中、.mh-say 上内边距删掉 */
.mh-lede { max-width: none; margin-top: 13px; font-size: 14.5px; }
.intro-who { color: var(--ink); margin-top: 20px; }
.intro-close { color: var(--ink-3); }
.inline-object { position: relative; text-decoration-color: var(--hair-2); text-underline-offset: 4px; }
.inline-object > span:not(.inline-peek) { display: inline-block; margin-left: 3px; }
.inline-house { color: #b68b57; font-size: 21px; line-height: .7; }
.inline-gem { color: #c1709c; text-shadow: 1px 1px 0 #f7d788; transition: transform .25s; }
.gem-link:hover .inline-gem, .gem-link:focus .inline-gem { transform: rotate(35deg) scale(1.25); }
.inline-bubbles { color: #5b9fc1; letter-spacing: -3px; transition: translate .3s; }
.sea-link:hover .inline-bubbles, .sea-link:focus .inline-bubbles { translate: 0 -4px; }
.inline-peek { display: none; position: absolute; z-index: 20; top: calc(100% + 12px); left: 0; width: 158px; padding: 6px; background: var(--card); border: 1px solid var(--edge); border-radius: 3px; box-shadow: 0 10px 24px rgb(30 36 48 / .14); pointer-events: none; }
.inline-peek img { display: block; width: 100%; height: auto; }
.letters-peek { width: 240px; left: auto; right: 0; }
@media (hover: hover) { .inline-object:hover .inline-peek { display: block; } }
.inline-object:focus-visible .inline-peek { display: block; }
.narrative-page { padding-top: 48px; padding-bottom: 0; }   /* 卡底 → 页脚的距离只由 .wallfoot 决定（css/chrome.css · v3 · R37） */
.narrative-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px var(--narrative-gap); align-items: start; }
.narrative-card .face-body { padding: var(--card-padding); overflow: visible; }
.narrative-card .face.back .face-body { overflow: visible; }
.narrative-card .narrative-body { gap: 0; }
.narrative-card .cap { margin: 0 38px 10px 0; font-size: 10px; }
.narrative-title { font-size: clamp(22px, 2vw, 28px); font-weight: 550; line-height: 1.5; letter-spacing: -.02em; }
.card-deck { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.narrative-card .story { font-size: var(--story-size); line-height: var(--story-leading); gap: 12px; margin-top: 18px; }
.narrative-card .tile-text { font-size: 14px; margin-top: 14px; }
.card-actions { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.face-turn { text-decoration-style: dotted; font-size: 13px; }
.face-turn span { margin-left: 4px; }
.narrative-card[data-tile="pen"] .front .narrative-body { min-height: 560px; }
.narrative-card .pen-stage { min-height: 270px; margin: 20px 0 0; }
.narrative-card .pen-stage::before { content: ''; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgb(239 201 62 / .07), transparent 70%); top: 30%; left: 38%; pointer-events: none; }
.m-paper .card-deck, .m-paper .tile-text { color: rgb(30 36 48 / .78); }
.m-paper .narrative-title { color: #1e2430; }
.m-paper .face-turn { color: rgb(30 36 48 / .78); }
.narrative-card .home-art { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.clothes-photo { width: 100%; height: auto; display: block; border-radius: 2px; }
.home-art .home-game { aspect-ratio: 3 / 4; }
.hg-status { min-height: 1.6em; margin-top: 8px; }
.sea-figure { margin: 20px 0 0; position: relative; }
.sea-figure img, .sea-figure video { display: block; width: 100%; height: auto; aspect-ratio: 760 / 400; object-fit: cover; border-radius: 2px; }
.sea-motion { position: absolute; top: 0; left: 0; height: auto; opacity: 0; transition: opacity .3s; pointer-events: none; }
/* [perf] 动画由 js/sea-motion.js 在 hover（桌面）/ 点一下（手机）时才加载；真的播起来才淡入 */
.sea-figure.is-playing .sea-motion { opacity: 1; }
.sea-play { display: none; }
@media (hover: none) {
 .sea-play { display: block; position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .sea-play span { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; padding-left: 2px; color: #1e2430; background: rgb(255 255 255 / .82); box-shadow: 0 1px 4px rgb(30 36 48 / .25); }
 .sea-figure.is-playing .sea-play span { opacity: 0; }
}
.sea-figure figcaption, .bay-placeholder figcaption { margin-top: 8px; font: 10px/1.7 var(--font-mono); color: var(--ink-3); }
.bay-placeholder { margin: 18px 0 0; }
.bay-placeholder img { display: block; width: 100%; max-height: 170px; object-fit: contain; border-radius: 2px; background: var(--win); }
.m-film .story { color: var(--ink); }
.m-film .front .narrative-body { min-height: 600px; }
/* A story's length sets the card height; no card-internal scrolling or line clamping. */
.stay-section { margin-top: 80px; padding-top: 36px; border-top: .5px solid var(--hair-2); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.maker-intro { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.maker-intro p + p { margin-top: 12px; }
.maker-intro .cap, .letter-invite .cap { margin: 0 0 16px; }
.maker-intro .cap + p { margin-top: 0; color: var(--ink); }
.letter-invite h2 { font-weight: 500; font-size: 26px; line-height: 1.5; margin-bottom: 16px; }
.letter-invite > p:not(.cap):not(.proto-note) { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.letter-invite .news-form { flex-wrap: wrap; margin-top: 24px; gap: 16px; }
.letter-invite .news-form input { min-width: 130px; flex-basis: 100%; font-size: 15px; padding-bottom: 10px; }
.letter-invite .proto-note { font-size: 12px; margin-top: 14px; color: var(--ink-3); }
.preview-note { display: block; margin-top: 4px; }
@media (max-width: 999.98px) {
 .narrative-grid { grid-template-columns: 1fr 1fr; }
 .narrative-card .face-body { padding: 24px; }
 .stay-section { gap: 36px; }
}
@media (max-width: 699.98px) {
 :root { --story-size: 15px; --card-padding: 22px; --narrative-gap: 28px; }
 .mh-lede { font-size: 14.5px; line-height: 1.85; }
 .narrative-page { padding-top: 34px; }
 .narrative-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .narrative-title { font-size: 23px; }
 .narrative-card .face-body { padding: 22px; }
 .narrative-card[data-tile="pen"] .front .narrative-body { min-height: 500px; }
 .narrative-card .pen-stage { min-height: 240px; }
 .m-film .front .narrative-body { min-height: 0; }
 .card-actions { gap: 16px; padding-top: 22px; }
 .stay-section { margin-top: 48px; padding-top: 28px; grid-template-columns: minmax(0, 1fr); gap: 36px; }
 .letter-invite h2 { font-size: 24px; }
 .letters-peek { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .sea-motion, .sea-play { display: none !important; }
 .inline-gem, .inline-bubbles { transition: none; }
}