:root{
  --bg: #f7f3ea;         /* 米白 */
  --paper: #fffdf8;
  --accent: #234034;     /* 墨绿 */
  --muted: #6b6b66;
  --border: rgba(35,64,52,0.12);
  --radius: 2px;        /* 2px 小圆角，契合 surface */
  --content-max: 760px; /* 方便阅读的宽度 */
  --line-base: 24px;    /* 基线高度 */
  --line-grid-2: 48px;  /* 双层网格间距 */
  font-synthesis: none;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#1b1b1b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans SC", Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

.layout-root{display:flex;min-height:100vh}

/* 左侧极简纵向刊头 */
.side-head{
  width:180px;
  padding:20px 16px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(35,64,52,0.02), transparent);
  color:var(--accent);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.side-head .site-link{font-weight:600;text-decoration:none;color:var(--accent);font-size:14px}
.side-head .site-path{font-size:12px;color:var(--muted)}

/* 页面主容器：在桌面限定宽度 */
.page-wrap{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px}

.ad{width:100%;padding:8px 0;text-align:center;color:var(--muted);font-size:13px}

/* 编辑部式非对称网格 */
.editor-grid{
  display:grid;
  grid-template-columns: 1fr; /* mobile fallback */
  gap:28px;
  width:100%;
}

article.article{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-decoration-break:clone;
}

.article-head .title{margin:0 0 8px 0;font-size:28px;color:var(--accent);line-height:1.12;font-weight:700}
.article-head .meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.article-head .summary{margin:0 0 18px 0;color:#333;font-size:15px}

/* 正文区的视觉签名：双层基线网格 */
.content{
  color:#222;
  font-size:16px;
  line-height:var(--line-base);
  max-width:var(--content-max);
  padding:12px 0;
  background-image:
    linear-gradient(rgba(35,64,52,0.02) 1px, transparent 1px),
    linear-gradient(rgba(35,64,52,0.01) 1px, transparent 1px);
  background-size: 100% var(--line-base), 100% var(--line-grid-2);
  background-position: left top, left top;
}
.content p{margin:0 0 14px 0}
.content ul{margin:0 0 14px 20px}

.faq{margin-top:18px}
.faq-list{border-top:1px solid var(--border);margin-top:8px}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--border)}

.related{margin-top:20px}
.related-title{font-size:15px;color:var(--muted);margin:0 0 12px 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:var(--paper);border:1px solid var(--border);padding:10px;border-radius:var(--radius);font-size:14px}

.info-bar{display:none} /* mobile first: info cards appear inline; desktop will show aside */
.info-card{background:var(--paper);border:1px solid var(--border);padding:12px;border-radius:var(--radius);margin-bottom:12px}
.info-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.keywords{color:var(--accent);font-weight:600}

.site-foot{width:100%;max-width:1100px;display:flex;justify-content:space-between;padding:18px 0;color:var(--muted);font-size:13px}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 桌面专属布局（必须包含且仅在 >=1024 生效） */
@media (min-width:1024px){
  .side-head{width:220px;padding:28px 18px}
  .page-wrap{padding:28px}
  .editor-grid{
    grid-template-columns: 1fr minmax(0,1fr) 320px; /* 左占位（用于内容跨栏），中心主区，右侧信息栏 */
    width:clamp(1120px, 90vw, 1280px); /* 在 1120-1280 范围内摆放 */
    gap:28px;
  }
  /* 文章跨中列占据中间和左列的视觉优势区域 */
  article.article{grid-column:1 / 3;padding:28px}
  .info-bar{display:block;grid-column:3 / 4}

  /* 主阅读区把正文限制在舒适宽度，FAQ 在信息栏也有展示（横线问答） */
  .content{max-width:760px;padding-right:18px}
  .faq{display:none} /* 桌面时偏好将 FAQ 放在侧栏（信息栏中已有重复展现） */

  .info-card.faq-side .faq-side-list{border-top:1px solid var(--border);margin-top:8px}
  .info-card.faq-side .faq-side-list > *{padding:10px 0;border-bottom:1px solid var(--border)}

  .related-grid{grid-column:1 / 3} /* 相关阅读跨栏，底部三列仍成立 */
}

/* 手机端规则（必须包含且仅在 <=767 生效） */
@media (max-width:767px){
  .layout-root{flex-direction:column}
  .side-head{width:100%;display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border)}
  .side-head .site-link{font-size:15px}
  .side-head .site-path{display:none}

  .page-wrap{padding:12px}
  .editor-grid{grid-template-columns:1fr}

  article.article{padding:14px}
  .article-head .title{font-size:20px}
  .article-head .summary{font-size:14px}
  .content{padding:6px 0;background-image:none;line-height:1.6}

  .info-bar{display:block;margin-top:12px}
  .info-card{padding:10px}

  .related-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .related-grid > *{font-size:13px;padding:8px}

  .site-foot{max-width:100%;padding:12px;border-top:1px solid var(--border)}
}

/* 兼容性与细节 */
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}