:root{
  --paper:#f7f3e8; /* 米白 */
  --ink:#073b35;   /* 墨绿 */
  --muted:#6b6b64;
  --accent:#0b4f47;
  --max-width:1280px; /* 在 1120-1440 的范围内选择中间值 */
  --side-width:300px;
  --masthead-width:120px;
  --gap:28px;
  --base-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全局基础 */
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--base-font);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

.page-root{display:flex;min-height:100vh;align-items:flex-start}

/* 左侧纵向刊头（桌面） */
.left-masthead{
  width:var(--masthead-width);
  padding:28px 12px;
  box-sizing:border-box;
  border-right:1px solid rgba(3,27,24,0.06);
  background:transparent;
  display:none; /* 默认移动端隐藏，桌面显示 */
}
.left-masthead .masthead-brand{
  font-weight:700;
  color:var(--accent);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  letter-spacing:2px;
  font-size:14px;
}
.left-masthead .masthead-nav{margin-top:18px}
.left-masthead .masthead-nav ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
.left-masthead .masthead-nav li{padding:8px 0}

/* 中心容器 */
.center-wrap{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px 20px;
}
.page-header{width:100%;max-width:var(--max-width);box-sizing:border-box;padding:6px 0 18px 0;display:flex;justify-content:space-between;align-items:center}
.header-line{color:var(--muted);font-size:13px}
.ad-slot-top{font-size:13px;color:var(--muted)}

/* 主体网格：文章 + 侧栏（桌面）或单列（移动） */
.main-layout{width:100%;box-sizing:border-box;display:block;max-width:var(--max-width)}

.feature-article{background:transparent;border:1px solid transparent;padding:0;margin:0}
.article-title{font-family:var(--base-font);font-weight:800;line-height:1.02;font-size:32px;margin:0 0 12px 0;color:var(--ink);max-width:100%}
.article-meta{color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:center;margin:8px 0}
.article-summary{margin:12px 0 18px 0;padding:12px;border-left:3px solid rgba(3,27,24,0.06);background:rgba(3,27,24,0.02);color:var(--ink);font-weight:500}
.article-body{color:var(--ink);font-size:16px;line-height:1.8}
.article-body p{margin:0 0 1em 0}

.ad-slot-middle{margin:20px 0;padding:12px;border:1px dashed rgba(3,27,24,0.06);background:transparent}

.article-faq{margin-top:28px;border-top:1px solid rgba(3,27,24,0.06);padding-top:18px}
.article-faq h2{font-size:18px;margin:0 0 12px 0;color:var(--accent)}
.faq-list{counter-reset:faq}
/* 兼容常见结构：若内部为 .faq-item 或 ol/li/dl，会应用编号样式 */
.faq-list > *{margin-bottom:12px}
.faq-list .faq-item{counter-increment:faq;padding-left:36px;position:relative}
.faq-list .faq-item:before{content:counter(faq) ".";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

/* 侧栏 */
.side-column{margin-top:22px}
.side-panel{border:1px solid rgba(3,27,24,0.06);padding:12px;background:transparent}
.side-note{font-size:14px;color:var(--muted)}

/* 相关阅读：视觉签名为反向色块标题栏 */
.related-block{margin-top:18px;border:1px solid rgba(3,27,24,0.06);background:#fff;padding:0}
.related-head{background:var(--ink);color:var(--paper);padding:10px 12px;font-weight:700}
.related-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:8px;padding:12px}
.related-grid > *{font-size:14px;color:var(--accent);line-height:1.4}

/* 页脚 */
.site-footer{width:100%;max-width:var(--max-width);padding:20px 0 60px 0;box-sizing:border-box;color:var(--muted);font-size:13px}
.site-footer .ad-slot-bottom{margin-bottom:12px}

/* ------------------ 桌面样式（1024px 及以上） ------------------ */
@media (min-width:1024px){
  .left-masthead{display:block}

  .center-wrap{padding:40px}
  .main-layout{display:grid;grid-template-columns:1fr var(--side-width);gap:var(--gap);align-items:start}

  /* 将文章设置为“偏移纸张”视觉：标题向左越出正文基线，但不使用阴影或大圆角 */
  .feature-article{padding:28px 36px 28px 48px;background:rgba(255,255,255,0.0);border-left:1px solid rgba(3,27,24,0.03)}
  .article-title{font-size:44px;margin-left:-6vw;max-width:calc(100% + 6vw)}

  .article-body{font-size:17px;max-width:900px}

  /* 相关阅读四列紧凑网格（桌面） */
  .related-grid{grid-template-columns:repeat(4,1fr)}
  .related-grid > *{padding:6px 4px;border-bottom:1px solid rgba(3,27,24,0.04)}

  /* 侧栏固定较窄并保持信息密度 */
  .side-column{position:relative}
  .side-panel{margin-bottom:18px}
}

/* ------------------ 手机端样式（最大宽度 767px） ------------------ */
@media (max-width:767px){
  .page-root{flex-direction:column}
  .left-masthead{display:none}
  .center-wrap{padding:14px}
  .page-header{padding-bottom:10px}
  .main-layout{display:block}

  /* 取消偏移和越界：所有元素回到安全边距 */
  .feature-article{padding:0;margin:0}
  .article-title{font-size:22px;margin-left:0}
  .article-summary{padding:10px;border-left:3px solid rgba(3,27,24,0.06);background:transparent}
  .article-body{font-size:15px;line-height:1.7}

  .side-column{margin-top:18px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid > *{padding:8px}

  .site-footer{padding:18px 0 40px}
}

/* 中等屏（768 - 1023）保持可读性为准 */
@media (min-width:768px) and (max-width:1023px){
  .left-masthead{display:none}
  .center-wrap{padding:22px}
  .main-layout{display:block}
  .article-title{font-size:28px;margin-left:0}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 可访问性与细节 */
a{color:var(--accent)}
button{font-family:var(--base-font)}

/* 确保广告容器不以任何方式覆盖或悬浮正文 */
.ad-slot-top,.ad-slot-middle,.ad-slot-bottom{background:transparent}