/* 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 上内边距删掉 */
.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; }
.narrative-card .story { font-size: var(--story-size); line-height: var(--story-leading); gap: 12px; margin-top: 18px; }
.card-actions { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.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 .narrative-title { color: #1e2430; }
.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 { margin-top: 8px; font: 10px/1.7 var(--font-mono); color: var(--ink-3); }
.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. */
.letter-invite .cap { margin: 0 0 16px; }
.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); }
@media (max-width: 999.98px) {
 .narrative-grid { grid-template-columns: 1fr 1fr; }
 .narrative-card .face-body { padding: 24px; }
}
@media (max-width: 699.98px) {
 :root { --story-size: 15px; --card-padding: 22px; --narrative-gap: 28px; }
 .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; }
 .letter-invite h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .sea-motion, .sea-play { display: none !important; }
}