:root{
  --bg:#f7fbfb; /* 青灰背景基调 */
  --panel:#ffffff; /* 局部底色 */
  --line:#d9e6e8; /* 细线 */
  --accent:#2f8fa6; /* 湖蓝 */
  --text:#0d1b1f;
  --muted:#6b7c80;
  --max-width:1320px; /* 在 1120-1440 范围内选中间值 */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif SC", serif;

  --rhythm:1.6; /* 行高节奏 */
}

/* 基础重置与布局 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:calc(1em * var(--rhythm));
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max-width);margin:0 auto;padding:20px 18px}

/* 报刊双层报头 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--accent)}
.site-brand .home-link{text-decoration:none;color:var(--accent)}
.header-mini{color:var(--muted);font-size:0.95rem}
.header-nav{display:flex;gap:14px;padding:8px 0;font-size:0.95rem;border-top:1px solid transparent}
.header-nav a, .header-nav .nav-item{color:var(--text);text-decoration:none}
.header-nav a.home-link{font-weight:600}

/* 文章框架 */
.article-shell{background:transparent;padding:12px 0}
.article-header{padding:14px 6px;border-left:2px solid var(--line);border-right:2px solid var(--line);background:transparent}
.eyebrow{font-family:var(--font-sans);color:var(--accent);font-size:0.9rem;font-weight:600;letter-spacing:0.02em}
.title{font-family:var(--font-serif);font-size:1.9rem;margin:8px 0 6px 0;color:var(--text);line-height:1.15}
.meta{color:var(--muted);font-size:0.9rem}
.meta .meta-sep{margin:0 8px;color:var(--line)}
.summary{margin-top:10px;color:var(--text);background:transparent;padding:6px 0}

/* content-grid: 在桌面使用 12 栏网格；在移动端降为流式 */
.content-grid{display:grid;gap:18px}

.article-body{color:var(--text);font-size:1rem;line-height:1.7;padding:6px 8px;background:var(--panel);border:1px solid var(--line)}
.article-body p{margin:0 0 1em 0}

.faq-section, .related-section{padding:6px 8px;background:transparent}
.section-title{font-family:var(--font-serif);font-size:1.05rem;color:var(--accent);margin:0 0 10px 0}
.faq-list details{border-top:1px solid var(--line);padding:10px 0}
.faq-list summary{cursor:pointer;outline:none}

/* 侧栏风格：直角与细线，全页只用直角 */
.right-rail{background:var(--panel);border:1px solid var(--line);padding:12px 10px}
.side-head{font-weight:700;color:var(--accent);margin-bottom:10px}
.side-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.side-list li{border-top:1px solid transparent;padding:6px 0}
.side-note{color:var(--muted);font-size:0.95rem;margin-bottom:8px}

/* 相关阅读：关键词索引式列表 */
.related-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.related-list li{padding:6px 0;border-top:1px dashed var(--line);color:var(--accent)}

/* 广告槽：独立容器，无悬浮，无覆盖 */
.ad-slot{padding:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:0.95rem}
.ad-slot:not(:empty){margin:8px 0}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:14px 18px;text-align:center;color:var(--muted);font-size:0.95rem}

/* 桌面强制规则：1024px 及以上 */
@media (min-width:1024px){
  .container{padding:28px;}
  .title{font-size:2.4rem}
  .content-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-auto-rows:min-content;
    gap:20px 28px;
    align-items:start;
  }
  /* 文章头部跨 8 栏（标题横跨文章列） */
  .article-header{grid-column:1 / span 8}
  /* 正文占 8 栏，位于第二行 */
  .article-body{grid-column:1 / span 8;grid-row:2}
  .ad-middle{grid-column:1 / span 8;grid-row:3}
  .faq-section{grid-column:1 / span 8;grid-row:4}
  .ad-bottom{grid-column:1 / span 8;grid-row:5}
  .related-section{grid-column:1 / span 8;grid-row:6}

  /* 侧栏占 4 栏，从摘要下方开始（即与正文同一行起点为第二行） */
  .right-rail{grid-column:9 / span 4;grid-row:2 / span 5}

  /* 视觉密度与留白调整（舒展） */
  .article-body{padding:18px}
  .right-rail{padding:16px}
}

/* 手机端规则：最大宽度 767px，单列流式，侧栏移到正文、FAQ 之后，相关阅读改为横向分隔列表 */
@media (max-width:767px){
  .container{padding:12px}
  .title{font-size:1.25rem}
  .article-header{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:10px}
  .content-grid{display:block}
  .article-body{margin-top:10px;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:12px}
  .ad-middle,.ad-bottom{margin:12px 0}
  .faq-section{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:10px}
  .right-rail{margin:14px 0;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:12px}

  /* 相关阅读改为横向分隔列表（简洁索引） */
  .related-list{display:flex;flex-wrap:nowrap;overflow:auto;gap:10px;padding:6px 0}
  .related-list li{flex:0 0 auto;border-top:none;border-left:1px solid var(--line);padding:8px 12px;background:var(--panel)}

  /* 防止横向滚动出界：容器内元素可横向滚动但页面整体无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间尺寸（768-1023）保持可读且兼容 */
@media (min-width:768px) and (max-width:1023px){
  .content-grid{display:block}
  .article-header{padding:12px}
  .article-body{padding:14px}
  .right-rail{margin-top:12px}
}

/* 无圆角、细线为识别特征；保证元素直角 */
*{border-radius:0}