/* ====================================================================
 base.css · 基础样式（卡片最基础的显示）
 .card 骨架 + 通用排版 + 配图构图骨架（layout-*） + 图框结构。与风格/封面方案无关。
 加载顺序：style.css 之后、当前风格（kinfolk/editorial）之前。
 类名约定：封面=.cv，正文（含尾页）=.bd，尾页额外带 .role-end，正文区=.card-content。
 ==================================================================== */
.card {
 --card-bg: #f6f1e7;
 --card-bg-2: #f6f1e7;
 --card-ink: #1c1a16;
 --card-dim: #6c6354;
 --card-accent: #c8553d;
 --card-rule: rgba(28, 26, 22, 0.16);
 width: var(--card-w, 1080px);
 height: var(--card-h, 1440px);
 transform-origin: top left;
 background: var(--card-bg);
 color: var(--card-ink);
 position: relative;
 padding: 96px 88px 120px;
 display: flex;
 flex-direction: column;
 font-family: var(--font-cjk);
 overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 40px; border: 1px solid var(--card-rule); pointer-events: none; }

.card-eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 22px; letter-spacing: 4px; text-transform: uppercase; color: var(--card-accent); margin-bottom: 40px; }
.card-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--card-rule); }

/* 页眉栏：栏目 + 页码进度 */
.card-head { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; }
.card .card-head .card-eyebrow { flex: 1; margin-bottom: 0; line-height: 1; }
.card-progress { flex: none; display: flex; align-items: center; gap: 9px; line-height: 1; }
.card-progress .pg { color: var(--card-dim); opacity: 0.6; display: inline-flex; align-items: center; justify-content: center; }
.card-progress .pg.active { color: var(--card-accent); opacity: 1; }
.card-progress.kind-dots .pg { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.card-progress.kind-dots .pg.active { width: 11px; height: 11px; }
.card-progress.kind-dashes { gap: 7px; }
.card-progress.kind-dashes .pg { width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.card-progress.kind-dashes .pg.active { width: 32px; height: 4px; }
.card-progress.kind-bars { gap: 6px; }
.card-progress.kind-bars .pg { width: 16px; height: 10px; background: currentColor; }
.card-progress.kind-bars .pg.active { height: 20px; }
.card-progress.kind-numbers { gap: 14px; font-family: var(--font-serif); font-size: 24px; letter-spacing: 1px; }
.card-progress.kind-numbers .pg.active { font-size: 30px; font-weight: 700; }
.card-progress.kind-arrows { gap: 10px; font-size: 26px; font-weight: 700; }

.card-content { flex: 1; min-height: 0; overflow: hidden; }
.card-content > *:first-child { margin-top: 0; }
.card-content h1 { font-family: var(--font-serif); font-size: 92px; line-height: 1.06; font-weight: 700; letter-spacing: -0.5px; margin: 8px 0 36px; }
.card-content h2 { font-family: var(--font-serif); font-size: 60px; line-height: 1.15; font-weight: 600; margin: 40px 0 22px; }
.card-content h3 { font-size: 40px; font-weight: 700; margin: 32px 0 16px; color: var(--card-accent); }
.card-content h4 { font-size: 32px; font-weight: 600; margin: 26px 0 12px; }
.card-content p { font-size: 34px; line-height: 1.7; margin: 0 0 26px; color: var(--card-ink); }
.card-content strong { font-weight: 700; }
.card-content em { font-style: italic; }
.card-content mark { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--card-accent) 34%, transparent) 55%); color: inherit; padding: 0 2px; }
.card-content code { font-family: Menlo, Consolas, monospace; font-size: 0.82em; background: color-mix(in srgb, var(--card-ink) 8%, transparent); padding: 2px 8px; border-radius: 5px; }
.card-content a { color: var(--card-accent); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--card-accent) 40%, transparent); }
.card-content ul, .card-content ol { margin: 0 0 28px; padding-left: 8px; list-style: none; }
.card-content li { font-size: 33px; line-height: 1.6; margin-bottom: 16px; padding-left: 44px; position: relative; color: var(--card-ink); }
.card-content ul li::before { content: ''; position: absolute; left: 6px; top: 20px; width: 18px; height: 2px; background: var(--card-accent); }
.card-content ol { counter-reset: item; }
.card-content ol li { counter-increment: item; }
.card-content ol li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--font-serif); font-size: 28px; color: var(--card-accent); }
.card-content blockquote { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: 1.4; margin: 32px 0; padding-left: 32px; border-left: 4px solid var(--card-accent); color: var(--card-dim); }
.card-content ul:has(+ blockquote), .card-content ol:has(+ blockquote) { margin-bottom: 0; }
.card-content ul + blockquote, .card-content ol + blockquote { margin-top: 26px; }
.card-content figure { margin: 0 0 28px; }
.card-content img { width: 100%; border-radius: 8px; display: block; }
.card-foot { position: absolute; left: 88px; right: 88px; bottom: 64px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-sans); font-size: 22px; letter-spacing: 2px; color: var(--card-dim); border-top: 1px solid var(--card-rule); padding-top: 22px; }
.card-foot .card-brand { font-family: var(--font-sans); }
.card-foot .page-no { font-family: var(--font-serif); font-size: 26px; color: var(--card-ink); }

/* ====================================================================
 IMAGE LAYOUTS — 底层构图骨架（供各风格封面方案复用）
 ==================================================================== */
.card-media { overflow: hidden; background: #e9e6df; position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.card.has-img:not(.layout-module):not(.layout-frame)::before,
.card.has-img:not(.layout-module):not(.layout-frame)::after { display: none; }
.card.has-img.layout-top, .card.has-img.layout-bottom, .card.has-img.layout-split, .card.has-img.layout-bg { padding: 0; }
.li-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 84px 88px 72px; }
.has-img .li-content .card-content { flex: 1; }
.has-img .li-content .card-foot { position: static; left: auto; right: auto; bottom: auto; margin-top: 28px; }
.layout-top { display: flex; flex-direction: column; }
.layout-top .card-media { width: 100%; height: 46%; flex: none; }
.layout-bottom { display: flex; flex-direction: column; }
.layout-bottom .card-media { width: 100%; height: 46%; flex: none; order: 2; }
.layout-bottom .li-content { order: 1; }
.layout-split { display: flex; flex-direction: row; }
.layout-split .card-media { width: 45%; height: 100%; flex: none; }
.layout-split .li-content { flex: 1; padding: 96px 72px 72px; }
.layout-module .card-media { float: right; width: 340px; height: 340px; margin: 6px 0 24px 44px; }
.layout-frame .card-media { width: 100%; height: 520px; flex: none; margin-bottom: 48px; }
.layout-bg { position: relative; }
.layout-bg .card-media { position: absolute; inset: 0; z-index: 0; }
.layout-bg .card-media img { filter: brightness(0.72); }
.layout-bg .li-content { position: relative; z-index: 1; justify-content: flex-end; }
.layout-bg .li-panel { background: var(--card-accent); color: #fff; padding: 52px 52px 44px; }
.layout-bg .li-panel .card-eyebrow,
.layout-bg .li-panel .card-content h1,
.layout-bg .li-panel .card-content h2,
.layout-bg .li-panel .card-content h3,
.layout-bg .li-panel .card-content h4,
.layout-bg .li-panel .card-content p,
.layout-bg .li-panel .card-content li,
.layout-bg .li-panel .card-content blockquote { color: #fff; }
.layout-bg .li-panel .card-eyebrow::after { background: rgba(255,255,255,0.5); }
.layout-bg .li-panel .card-content ul li::before { background: #fff; }
.layout-bg .li-panel .card-content blockquote { border-left-color: rgba(255,255,255,0.7); }
.layout-bg .card-foot { color: rgba(255,255,255,0.92); border-top-color: rgba(255,255,255,0.4); }
.layout-bg .card-foot .page-no { color: #fff; }

/* ====================================================================
 正文配图（Markdown ![]() 通用结构，与风格无关）
 ==================================================================== */
.card-content figure.card-fig { margin: 36px 0; }
.card-content figure.card-fig img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); }
.card-content figure.fig-band { margin-left: -88px; margin-right: -88px; }
.card-content figure.fig-band img { border-radius: 0; box-shadow: none; }
.card-content p img { display: block; width: 100%; border-radius: 10px; margin: 6px 0; }

/* ====================================================================
 页结构（正文 / 尾页统一骨架）
 card-head = 页眉；card-foot = 页脚；card-content = 中部内容。
 card-content 固定包含 card-text（文字）与 card-img（图片），并与页眉、页脚各留 40px。
 ==================================================================== */
.card.bd .card-content {
 flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
 margin: 40px 0; overflow: hidden;
}
.card.bd:not(.role-end) .card-text { flex: 0 0 auto; min-height: 0; }
.card.bd .card-text > *:first-child { margin-top: 0; }
.card.bd .card-text > *:last-child { margin-bottom: 0; }
.card.bd .card-img {
 flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
 margin-top: 40px; border-radius: 8px; background: #e9e6df;
}
.card.bd .card-img.is-empty { box-shadow: inset 0 0 0 1px var(--card-rule); }
.card.bd .card-img img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
 border-radius: 0; box-shadow: none; transform-origin: center center; will-change: transform; cursor: grab;
}
.card.bd .card-img img:active { cursor: grabbing; }
.card.role-end .card-content { justify-content: center; align-items: center; text-align: center; }
.card.role-end .card-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.card.role-end .card-img { display: none; }
.card.role-end .card-eyebrow { justify-content: center; }
.card.role-end .card-foot { justify-content: space-between; }