/* 轻阅资讯信息港 — offset-sheet 设计样式表
   设计种子：03f2a74ff04c92b8
   约束：无外部字体/图片/脚本；桌面与手机为两套排版；深紫灰与象牙白色板式
*/
:root{
  --bg-deep:#2e2940; /* 深紫灰 */
  --ivory:#fffaf0;   /* 象牙白 */
  --muted:#6f6a78;
  --accent:#6b5b8a;
  --text:#222;
  --max-desktop-width:1240px; /* 在1120-1440之间 */
  --gutter:28px;
  --sheet-pad:40px;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-deep) 0%, #372f44 100%);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 页眉 — 居中刊头与极窄第二层导航 */
.site-header{background:var(--bg-deep);color:var(--ivory);padding:28px 16px 10px;text-align:center;border-bottom:1px solid rgba(255,250,240,0.06)}
.masthead{font-weight:700;letter-spacing:0.04em;font-size:20px}
.top-nav .nav-line{font-size:12px;color:rgba(255,250,240,0.85);margin-top:8px}

/* 广告占位均为独立容器，不能浮动或覆盖 */
.ad-slot{max-width:var(--max-desktop-width);margin:18px auto;background:transparent;padding:8px 12px;color:var(--muted);font-size:13px}
.ad-slot > *{display:block}

/* 舞台：在宽背景上放置偏移纸张感的刊页 */
.stage{padding:30px 16px 60px;display:flex;flex-direction:column;align-items:center}
.sheet-wrap{width:100%;max-width:calc(var(--max-desktop-width) + 320px);display:grid;grid-template-columns:1fr;gap:24px;align-items:start}

/* 正文纸张样式：纯白表面，方形信息块，禁止大圆角与阴影 */
.sheet{background:var(--ivory);padding:var(--sheet-pad);box-shadow:none;border-radius:2px;border:0}
.article-head{margin-bottom:12px}
.article-title{margin:0 0 8px;font-weight:800;line-height:1.05;color:var(--text);font-size:28px;letter-spacing:-0.01em}
.meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.keywords{margin-left:auto;color:var(--muted);font-size:13px}
.summary{margin:14px 0 18px;font-size:15px;color:rgba(34,34,34,0.95);background:#fff;padding:10px;border:1px solid rgba(34,34,34,0.04)}
.article-body .content{color:var(--text);font-size:16px;line-height:1.65}

/* 侧栏与边注 */
.side-col{display:none}
.side-block,.related-block{background:var(--ivory);padding:12px;border:1px solid rgba(34,34,34,0.04);margin-bottom:16px}
.side-title,.related-title{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
.related-list{font-size:14px;color:var(--muted)}

/* FAQ 区域 */
.faq-section{max-width:var(--max-desktop-width);width:100%;margin:26px auto 0;padding:0 12px}
.faq-grid{display:block}

/* 页脚 */
.site-footer{padding:22px 12px;color:rgba(255,250,240,0.8);text-align:center;font-size:13px}

/* ============ 桌面规则（至少 >=1024px） ============ */
@media (min-width:1024px){
  .stage{padding-top:46px}
  /* 布局：利用宽屏，形成偏移纸张与窄边注；宽度控制在1120-1440范围 */
  .sheet-wrap{max-width:1440px;grid-template-columns:1fr 320px;gap:32px;align-items:start}
  /* 文章纸张在左侧略向左偏移，产生“越出正文基线”的效果；禁止使用阴影和大圆角 */
  .sheet{max-width:calc(var(--max-desktop-width));margin-left:0;transform:translateX(-48px);padding:48px}
  .side-col{display:block}
  /* 标题向左越出正文基线：在容器 transform 的配合下再负边距，视觉出片 */
  .article-title{font-size:44px;max-height:calc(2 * 1.05em);line-height:1.05;margin-left:-40px}
  .summary{font-size:15px;padding:12px}
  .article-body .content{font-size:17px;line-height:1.7}

  /* 右侧边注：窄而固定，保持方形信息块 */
  .side-block,.related-block{background:transparent;border:0;padding:0;color:var(--ivory)}
  .side-block .side-body{background:var(--ivory);color:var(--text);padding:12px;border:1px solid rgba(34,34,34,0.04)}
  .related-block .related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* FAQ：左侧问题右侧答案的表格式 */
  .faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
  /* 假设 {{faq}} 输出为多组问答，使用通用两列视觉规则 */
  .faq-grid > *{display:grid;grid-template-columns:220px 1fr;gap:12px;align-items:start;padding:12px;background:var(--ivory);border:1px solid rgba(34,34,34,0.04)}
  .faq-grid > * > :first-child{font-weight:700;color:var(--accent)}
  .faq-grid > * > :last-child{color:var(--text)}
}

/* ============ 手机规则（最大 767px） ============ */
@media (max-width:767px){
  /* 取消偏移与越界：所有元素回到安全边距内 */
  html,body{background:var(--bg-deep)}
  .stage{padding:16px}
  .sheet-wrap{grid-template-columns:1fr;gap:12px}
  .sheet{transform:none;padding:18px;border-radius:2px}
  .article-title{font-size:20px;margin-left:0;line-height:1.15}
  .meta{font-size:12px}
  .summary{font-size:14px}
  .article-body .content{font-size:15px;line-height:1.7}

  /* 侧栏下移并合并为页面块，取消固定宽度 */
  .side-col{display:block;margin-top:6px}
  .side-block,.related-block{background:var(--ivory);border:1px solid rgba(34,34,34,0.04);padding:10px}
  .related-list{display:block}

  /* FAQ 改为垂直堆叠：问题在上，答案在下 */
  .faq-grid > *{display:block;padding:10px;background:var(--ivory);border:1px solid rgba(34,34,34,0.04);margin-bottom:10px}
  .faq-grid > * > :first-child{display:block;font-weight:700;margin-bottom:8px}
}

/* 中间断点照顾平板等（768px - 1023px） */
@media (min-width:768px) and (max-width:1023px){
  .sheet{transform:none;padding:28px}
  .article-title{font-size:28px;margin-left:0}
  .sheet-wrap{grid-template-columns:1fr 300px;gap:20px}
  .side-col{display:block}
}

/* 可视化节奏与可读性调整 */
.article-title, .article-body .content, .summary{word-break:break-word}
.keywords{font-size:12px}

/* 禁止出现被明令禁止的仪表盘式深色风格：侧重象牙白纸张与深色页眉 */
/* 视觉识别：大面积留白 + 紧凑字阶 已体现在布局/字号/间距 */