/* 变量与配色：深棕与奶油白 */
:root{
  --bg:#FAF5EE; /* 奶油白 */
  --surface:#FFFFFF;
  --accent:#3b2b23; /* 深棕 */
  --muted:#7a6b63;
  --line:#e6ded6;
  --max-width:1320px; /* 在1120-1440之间 */
  --gutter:28px;
  --base-size:18px;
  --content-line-height:1.75; /* 双层基线感的基础 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft Yahei", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--accent);margin:0}
a{color:var(--accent);text-decoration:none}

.site-header{border-bottom:1px solid var(--line);background:transparent}
.nav-bar{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);gap:12px}
.nav-left,.nav-right{font-size:0.95rem;color:var(--muted)}
.nav-center{font-weight:700;color:var(--accent);letter-spacing:0.6px}
.home-link{font-weight:600}
.top-ad{max-width:var(--max-width);margin:8px auto 0;padding:8px var(--gutter);font-size:0.875rem;color:var(--muted)}

.page-wrap{padding:22px 12px 40px}
.layout-shell{max-width:var(--max-width);margin:18px auto;display:grid;grid-template-columns:1fr;gap:32px}

/* side rail and main content baseline styles */
.side-rail{border:1px solid var(--line);background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:18px}
.side-block{padding:8px;border-radius:4px}
.site-id .site-name{font-weight:700;color:var(--accent);font-size:1rem}
.breadcrumb{font-size:0.9rem;color:var(--muted);margin-top:6px}
.meta .meta-row{font-size:0.9rem;color:var(--muted);line-height:1.4}
.related .block-title{font-weight:700;margin-bottom:8px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.related-grid > *{font-size:0.92rem;color:var(--accent);padding:6px;border:1px solid var(--line);background:transparent}

.content-area{background:var(--surface);padding:22px;border:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.article-head{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.article-title{margin:6px 0 0;text-align:center;font-size:1.75rem;line-height:1.1;color:var(--accent)}
.summary{text-align:left;color:var(--muted);font-size:1rem;margin:0;padding-top:6px}

.article-body{padding-top:6px}
.content-intro{color:var(--accent);font-size:var(--base-size);line-height:var(--content-line-height);white-space:pre-wrap}

/* 双层基线网格：通过节奏化的行高和细线背景提示阅读节奏（不使用渐变） */
.content-intro{background-image:linear-gradient(to bottom, transparent 0%, transparent calc(1.75em - 1px), rgba(0,0,0,0.02) calc(1.75em - 1px), rgba(0,0,0,0.02) 1.75em);
  background-size:100% 1.75em;padding:6px 4px 12px}

.mid-ad,.bottom-ad{padding:12px;background:transparent;color:var(--muted)}
.faq-section{border-top:1px solid var(--line);padding-top:12px}
.faq-title{font-weight:700;margin-bottom:10px}
.faq-list{display:block}

/* 默认： FAQ 列表渲染为流式（服务器将插入结构），桌面会用媒体查询改为表格式 */

.site-footer{border-top:1px solid var(--line);padding:14px 0;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);color:var(--muted);font-size:0.9rem}

/* ----------------- 桌面样式：reverse-rail 且容器在 1120-1440 范围 ----------------- */
@media (min-width: 1024px){
  :root{--gutter:32px}
  .layout-shell{grid-template-columns:repeat(12,1fr);gap:28px}
  .side-rail{grid-column:1 / span 4;min-width:260px}
  .content-area{grid-column:5 / span 8;padding:28px}

  /* Related pattern：四列紧凑标题网格（在侧栏中实现压缩四列） */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .related-grid > *{font-size:0.88rem;padding:8px;border-radius:2px}

  /* FAQ 桌面表格式：左列问题、右列答案 */
  .faq-list{display:grid;grid-template-columns:250px 1fr;gap:12px}
  .faq-list > *{padding:8px;border:1px solid var(--line);background:#fff}

  /* 标题构图：标题居中，摘要左对齐（在桌面更明显） */
  .article-head{align-items:stretch}
  .article-title{font-size:2.1rem}
  .summary{text-align:left;max-width:70%}

  /* 视觉密度舒展，留白更充足 */
  .content-area{gap:20px}
}

/* ----------------- 手机样式：独立重排 ----------------- */
@media (max-width: 767px){
  :root{--gutter:18px;--base-size:16px}
  .nav-bar{padding:10px 14px}
  .layout-shell{display:block;margin:8px auto}

  /* 将侧边信息拆分为标题前后紧凑区块：在手机上把 side-rail 隐藏并将部分信息放在文章上下 */
  .side-rail{display:none}

  .article-head{padding:8px}
  .article-title{font-size:1.25rem}
  .summary{font-size:0.95rem;margin-top:6px}

  /* 将 meta 信息放在标题前后的紧凑区块（只显示关键字段） */
  .content-area{padding:14px}
  .article-head::before{
    content:"发布：" attr(data-published);
    display:block;color:var(--muted);font-size:0.9rem;margin-bottom:6px}
  .article-head::after{
    content:"当前时间：" attr(data-now);
    display:block;color:var(--muted);font-size:0.85rem;margin-top:8px}

  /* 内容区域行高与基线保持阅读舒适 */
  .content-intro{font-size:var(--base-size);line-height:1.7;background-image:none}

  /* 相关阅读在正文下以四列紧凑网格改为横向两列或单列 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .related-grid > *{font-size:0.95rem}

  /* FAQ 在手机上恢复垂直流式，问题在上答案在下 */
  .faq-list{display:block}
  .faq-list > *{margin-bottom:10px;padding:10px;border:1px solid var(--line);background:var(--surface)}
}

/* Accessibility and print fallback */
@media print{body{background:#fff;color:#000}.layout-shell{max-width:100%}}