:root{
  --bg: #fffaf2; /* 象牙白 */
  --ink: #1f1b20; /* 深色文字，深紫灰感 */
  --muted: #6b6770;
  --accent: #5b4f66; /* 单一强调色（深紫灰系） */
  --max-width: 1280px; /* 在1120-1440之间，可被容器限制 */
  --nav-width: 160px;
  --gutter: 28px;
  --line: rgba(31,27,32,0.08);
}

/* 基础布局 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", Times, serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8; /* 人文杂志宽松型 */
}

.page-outer{
  display:grid;
  grid-template-columns: var(--nav-width) 1fr;
  min-height:100vh;
}

/* 左侧纵向刊头 */
.site-nav{
  padding:36px 18px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  background:transparent;
}
.site-nav .brand{
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  font-size:18px;
}
.site-nav .nav-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}
.site-nav .nav-list span{opacity:0.95}
.site-nav .nav-sign{
  margin-top:auto;
  font-size:11px;
  color:var(--muted);
}

/* 中央容器限制宽度，桌面端在1120-1440之间 */
.page-center{
  display:flex;
  justify-content:center;
}

.article-shell{
  width:100%;
  max-width:var(--max-width);
  padding:42px var(--gutter);
}

.ad-block{font-size:13px;color:var(--muted);padding:14px;border:1px dashed var(--line);background:transparent;margin-bottom:18px}

/* 文章头部 */
.article-head .eyebrow{
  display:inline-block;
  color:var(--accent);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  margin-bottom:8px;
}

.article-head h1{
  margin:0 0 8px 0;
  font-size:36px; /* 桌面较大但不遮挡首屏 */
  line-height:1.06;
  font-weight:700;
}

.meta-row{display:flex;gap:12px;font-size:13px;color:var(--muted);align-items:center}
.meta-row .published{color:var(--muted)}

.summary{margin:16px 0 18px 0;color:var(--muted);max-width:80%;}
.section-rule{border:none;border-top:1px solid var(--line);margin:20px 0}

/* 双栏正文布局：8/4 分栏 */
.article-body{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:28px;
  align-items:start;
}

.content-column .content-text{white-space:pre-wrap}
.content-text p{margin:0 0 1em 0}

.side-column{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.side-box{padding:12px 6px}
.side-title{margin:0 0 8px 0;font-size:15px;color:var(--accent)}
.side-note{margin:0;color:var(--muted);font-size:13px}

/* 视觉签名：元信息沿桌面端边缘纵向排列 */
.meta-vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  align-self:flex-start;
  color:var(--muted);
  font-size:13px;
  letter-spacing:0.06em;
  padding:6px 0;
  border-left:1px solid transparent; /* reserved spacing */
}
.meta-vertical .mv-item{display:block;padding:6px 0}

.related-list{padding-left:18px;margin:0;color:var(--muted)}
.related-list li{margin:10px 0}

.faq{margin-top:18px}
.faq h2{font-size:18px;margin:0 0 12px 0;color:var(--ink)}
.faq-content{color:var(--muted)}

.post-area{margin-top:22px}

.page-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* 禁止使用阴影作为层级（遵守 forbid）——因此无阴影样式 */

/* 响应式：桌面规则（必须包含） */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .site-nav{padding:48px 20px}
  .article-head h1{font-size:48px}
  .summary{font-size:15px}
  .article-shell{padding:56px var(--gutter)}
  .meta-vertical{display:block}
}

/* 手机端规则（必须包含） */
@media (max-width:767px){
  .page-outer{grid-template-columns:1fr}
  .site-nav{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .site-nav .nav-list{display:none}
  .site-nav .nav-sign{display:none}

  .article-shell{padding:18px;max-width:100%}
  .article-head h1{font-size:20px;line-height:1.15;margin-top:2px}
  .meta-row{flex-direction:row;gap:10px;font-size:12px}
  .summary{margin-top:8px;font-size:14px}

  /* 手机改为单列：侧栏下移为普通区块 */
  .article-body{display:block}
  .side-column{order:2;width:100%;padding-top:14px}
  .meta-vertical{writing-mode:horizontal-tb;display:block;font-size:13px;padding:0;margin-bottom:6px}
  .meta-vertical .mv-item{display:inline-block;margin-right:12px}

  .content-column{order:1}
  .ad-block{font-size:12px;padding:10px}
}

/* 中间宽度（768-1023）做适度调整 */
@media (min-width:768) and (max-width:1023px){
  :root{--max-width:960px}
  .site-nav{padding:20px}
  .article-head h1{font-size:34px}
  .article-body{grid-template-columns:1fr;gap:20px}
  .meta-vertical{writing-mode:horizontal-tb;display:block;margin-bottom:8px}
}

/* 无复杂动画、无远程资源，保持轻量 */