:root{--bg:#f6f3ef;--ink:#1b1b1b;--muted:#7a6f66;--accent:#2d2d2d;--rail:#e7e1db;--max-width:1320px;--gap:18px;--title-font: Georgia, 'Times New Roman', serif;--ui-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans SC',sans-serif}
/* 基础重置 - 轻量、稳定 */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--ui-font);background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
.layout-root{display:flex;min-height:100vh}
/* 左侧纵向刊头（navigation_mode） */
.side-head{width:160px;background:transparent;padding:20px 12px;border-right:1px solid rgba(0,0,0,0.04);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.side-head .brand a{font-weight:700;color:var(--accent);text-decoration:none}
.side-head .nav-list ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
.side-head .nav-list li{padding:6px 0}

/* 页面主容器 - 限宽（桌面规则会覆盖） */
.page-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px}
.page-container > *{width:100%;max-width:var(--max-width)}

/* 标题区 - 紧凑标题 + 关键词眉题（title_composition） */
.header-grid{display:grid;grid-template-columns:7fr 5fr;align-items:start;gap:var(--gap);padding:10px 0}
.title-block h1{font-family:var(--title-font);font-size:26px;margin:6px 0;color:var(--ink);line-height:1.18}
.eyebrow{font-size:13px;color:var(--muted);margin:0}
.meta-inline{color:var(--muted);font-size:13px;margin-top:6px}
.meta-inline .sep{opacity:0.6;margin:0 8px}
.summary{margin:12px 0 0;color:var(--muted);font-size:15px}

/* Header 侧栏信息简洁呈现（surface: 轻纸张底色、模块无容器） */
.header-side{padding-left:6px}
.header-side dl{margin:0;color:var(--muted);font-size:13px}
.header-side dt{font-weight:600}

/* 主内容区：非对称杂志网格（desktop_contract） */
.article-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;padding:18px 0}
.article-main{min-width:0}
.article-body .content{background:transparent;color:var(--ink);font-size:15px}
.article-body .content p{margin:0 0 12px}
.article-body .content h2{font-family:var(--title-font);font-size:18px;margin:18px 0 8px}

/* 元信息轨道（visual_signature: 元信息沿桌面端边缘纵向排列） */
.meta-rail{border-left:1px solid rgba(0,0,0,0.04);padding-left:18px;align-self:stretch}
.meta-rail-inner{position:sticky;top:100px;display:flex;flex-direction:column;gap:12px}
.meta-rail dl{margin:0;color:var(--muted);font-size:13px}
.meta-rail dt{font-weight:600}

/* FAQ（faq_pattern: 无卡片的details折叠列表） */
.faq-section{margin-top:18px}
.faq-list details{margin:8px 0;padding:6px 0}
.faq-list summary{cursor:pointer;font-weight:600}

/* 相关阅读：编号列表（related_pattern） */
.related-section{margin-top:18px}
.related-list{padding-left:20px;color:var(--muted)}
.related-list li{margin:6px 0}

/* 广告边界样式（不悬浮、不覆盖） */
.ad-zone{background:transparent;color:var(--muted);font-size:13px;padding:10px 0}
.ad-top,.ad-middle,.ad-bottom{width:100%}

/* 页脚 */
.page-footer{padding:22px 0 40px;color:var(--muted);font-size:13px;text-align:center}

/* 小屏行为（mobile_contract） - 恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐 */
@media (max-width:767px){
  .layout-root{flex-direction:column}
  .side-head{width:100%;display:flex;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid rgba(0,0,0,0.04);padding:12px}
  .side-head .nav-list{display:none}
  .page-container{padding:12px}
  .header-grid{display:block}
  .title-block h1{font-size:20px}
  /* 将桌面侧轨整体下移，按自然顺序呈现（mobile_contract） */
  .article-grid{display:block}
  .meta-rail{display:block;border-left:none;padding-left:0}
  .meta-rail-inner{position:static;flex-direction:row;gap:12px;flex-wrap:wrap}
  .meta-rail dl{display:none}
  /* 将 header-side 信息以内联方式显示在元信息条中 */
  .header-side{margin-top:8px}
  .header-side dl{display:block}
  /* 顺序：标题、元信息、摘要、正文、FAQ、相关阅读 */
  .title-block{order:0}
  .header-side{order:1}
  .summary{order:2}
  .article-main{order:3}
  .faq-section{order:4}
  .related-section{order:5}
  /* 保证 320px 时无横向滚动 */
  body{word-wrap:break-word;-webkit-text-size-adjust:100%}
}

/* 桌面专用规则（必须包含 @media (min-width: 1024px)） - 强调非对称杂志网格 */
@media (min-width:1024px){
  .page-container{padding:36px}
  :root{--max-width:1320px}
  .side-head{width:180px}
  .header-grid{grid-template-columns:7fr 5fr}
  /* 主体列偏左，右侧元信息和FAQ错位排列（desktop_contract） */
  .article-grid{grid-template-columns:1fr 340px;gap:40px}
  .article-main{order:0}
  .meta-rail{order:1}
  /* 使元信息沿边缘纵向排列——视觉签名 */
  .meta-rail-inner{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);gap:8px;font-size:13px;color:var(--muted)}
  .meta-rail dl{display:block}
  /* FAQ 放在主列下方，但与右侧元信息错位：在桌面上同时展示两处（非侵入） */
  .faq-section{margin-top:28px}
  .faq-list{max-width:780px}
}

/* 可访问性与微调 */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
a{color:inherit;text-decoration:none}
button{font-family:inherit}