/* 视觉随笔型 - 主题：砖红与砂岩白
   规则：无圆角、细分隔线、无阴影；系统字体；Grid/Flex；移动优先
*/
:root{
  --bg:#F5EFE6; /* 砂岩白 */
  --ink:#222;
  --muted:#6b6b6b;
  --line:#e3dfd7; /* 细灰线 */
  --accent:#8B2E2E; /* 砖红 */
  --container-width:1200px; /* 桌面宽度范围内选择 */
  --rail-width:84px;
  --sidebar-width:320px;
  --gap:18px;
  --compact-leading:1.35;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--compact-leading);
  font-size:15px;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.site-shell{display:flex;flex-direction:column;min-height:100vh}

/* 左侧刊头（侧边竖条） */
.side-rail{
  display:none; /* 移动端默认隐藏，桌面展示 */
}
.side-rail .rail-brand{
  display:inline-block;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  color:var(--accent);
  font-weight:700;
  letter-spacing:2px;
  padding:8px 0;
}

/* 头部：居中刊头与横线导航 */
.site-header{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.masthead{max-width:var(--container-width);margin:0 auto;padding:12px var(--gap);display:flex;align-items:center;justify-content:space-between}
.brand-inline{font-weight:700;color:var(--accent);letter-spacing:0.5px}

.main-nav{overflow:auto}
.main-nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.main-nav li{display:flex;align-items:center}
.main-nav a, .main-nav span{display:inline-block;padding:10px 12px;min-height:44px;line-height:24px;color:var(--muted)}
.main-nav a{color:var(--accent);font-weight:600}

/* 主体容器 */
.container{width:100%;padding:20px 12px;flex:1}
.layout{display:flex;flex-direction:column;gap:18px;max-width:960px;margin:0 auto}

/* 文章区 */
.content{background:transparent}
.article-header .eyebrow{color:var(--muted);font-size:12px;margin-bottom:6px}
.article-header h1{font-size:22px;margin:0 0 8px 0;font-weight:700}
.meta{color:var(--muted);font-size:13px;display:flex;gap:12px;margin-bottom:10px}

/* 摘要窄色带 */
.summary{display:flex;align-items:flex-start;gap:12px}
.summary .band{display:inline-block;width:4px;height:20px;background:var(--accent);margin-top:6px}
.summary p{margin:0;color:var(--muted);font-size:14px}

/* 正文样式：紧凑型，直接显示 */
.article-body{margin-top:16px;color:var(--ink)}
.article-body p{margin:0 0 12px 0}
.article-body ul, .article-body ol{margin:0 0 12px 24px}

/* 广告槽：独立、不可覆盖正文 */
.ad{border:1px dashed var(--line);padding:10px;color:var(--muted);background:transparent}
.ad-top{margin:12px auto;max-width:var(--container-width);padding:10px;text-align:center}
.ad-middle{margin:22px 0}
.ad-bottom{margin-top:18px}

/* FAQ：支持多种输入形式，桌面将呈现左问右答 */
.faq{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.faq h2, .faq h3{margin:0 0 8px 0}
/* 常见标记支持：dl dt/dd 和 .faq-item */
.faq dl{margin:0}
.faq dt{font-weight:600;margin:12px 0 4px 0;color:var(--accent)}
.faq dd{margin:0 0 12px 0;color:var(--muted)}
.faq .faq-item{display:block;margin:8px 0}
.faq .faq-item > .q{font-weight:600;color:var(--accent);margin-bottom:6px}
.faq .faq-item > .a{color:var(--muted)}

/* 侧栏（移动端在文章后） */
.sidebar{background:transparent}
.related h3{margin:0 0 8px 0;font-size:14px;color:var(--accent)}
.related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.related li{font-size:13px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:12px 0;margin-top:20px}
.footer-inner{max-width:var(--container-width);margin:0 auto;padding:0 var(--gap);color:var(--muted);font-size:13px}

/* ---------- 桌面专属规则（>=1024px） ---------- */
@media (min-width:1024px){
  /* 内容容器宽度控制（在1120-1440之间取值） */
  .container{padding:28px 16px}
  .masthead{max-width:var(--container-width)}

  /* 显示侧边纵向刊头 */
  .side-rail{display:block;position:fixed;left:20px;top:18px;width:var(--rail-width);height:40vh}
  .site-shell{padding-left:calc(var(--rail-width) + 24px)}

  /* 布局：宽主栏 + 窄侧栏（非对称） */
  .layout{max-width:var(--container-width);margin:0 auto;display:grid;grid-template-columns:1fr var(--sidebar-width);grid-column-gap:28px;align-items:start}
  .content{order:0}
  .sidebar{order:1}

  /* 标题尺寸与信息密度 */
  .article-header h1{font-size:28px;line-height:1.12}
  .eyebrow{font-size:12px}

  /* FAQ 表格式（左侧问题、右侧答案） */
  .faq dl{display:grid;grid-template-columns:240px 1fr;column-gap:20px}
  .faq dt{grid-column:1;padding:8px 0}
  .faq dd{grid-column:2;padding:8px 0}

  /* 侧栏内的相关阅读以关键词索引式列表为主 */
  .related ul{flex-direction:column;gap:8px}
}

/* ---------- 手机规则（<=767px） ---------- */
@media (max-width:767px){
  /* 页面不横向滚动 */
  html,body{overflow-x:hidden}

  /* 隐藏桌面侧边刊头，头部居中展示 */
  .side-rail{display:none}
  .site-shell{padding-left:0}

  /* 布局转为单列，侧栏移到正文后 */
  .layout{max-width:100%;margin:0 auto;display:flex;flex-direction:column}
  .content{order:0}
  .sidebar{order:1;margin-top:12px}

  /* 横向导航允许滚动或精简，触控区域不小于44px */
  .main-nav ul{gap:10px}
  .main-nav a, .main-nav span{padding:12px 16px;min-height:44px}

  /* 标题与摘要更紧凑 */
  .article-header h1{font-size:20px}
  .summary .band{height:16px}

  /* FAQ：堆叠显示，题目在上，答案在下 */
  .faq dl{display:block}
  .faq dt{padding:8px 0}
  .faq dd{padding:6px 0 12px 0}

  /* 相关阅读以水平、可滚动或紧凑列表为主 */
  .related ul{flex-direction:row;overflow:auto;padding-bottom:8px}
  .related li{white-space:nowrap}
}

/* 可访问性与微调 */
.meta time, .meta .now{display:inline-block}

/* 防止链接占位错误：站内链接由 {{related}} 提供，模板中未使用占位死链 */