/* Palette and base tokens */
:root{
  --navy:#0b2340; /* 海军蓝 */
  --mist:#f4f6f8; /* 浅雾灰 */
  --text:#111214;
  --muted:#586069;
  --accent:#153961;
  --line: #dfe6ea;
  --max-width: 1280px; /* 容器在1120-1440之间，采用1280为默认 */
  --min-width: 1120px;
  --desktop-break:1024px;
  --mobile-break:767px;

  --base-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --title-size: 28px;
  --lead-size: 15px;
  --body-size: 15px;
  --tight-line: 1.45; /* 紧凑 */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--mist);color:var(--text);font-family:var(--base-font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Site header: 左侧纵向刊头 + 编辑部左右分置 */
.site-header{
  max-width:var(--max-width);
  margin:18px auto 12px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:0 18px;
}

/* Masthead: 左侧竖排样式（桌面突出），移动时变为行内 */
.masthead{display:flex;flex-direction:column;align-items:flex-start;font-weight:700;color:var(--navy);line-height:1}
.masthead .site-link{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:2px;font-size:14px}
.masthead .mastyear{font-size:12px;color:var(--muted);margin-top:6px}

/* 编辑部信息：左右分置（文本简洁克制） */
.editorial{flex:1;display:flex;justify-content:flex-end;gap:12px;align-items:flex-start;color:var(--accent);font-size:13px}
.editorial .ed-left{opacity:0.95}
.editorial .ed-right{opacity:0.6}

/* 主布局容器 */
.layout{display:block;padding:0 12px 40px}
.container{max-width:var(--max-width);margin:0 auto;background:transparent}

/* 中轴网格：桌面为中轴主列+注释栏，手机重排为单列左对齐 */
.centerline-grid{
  display:grid;
  gap:28px;
  align-items:start;
}

/* Article 主体样式 */
.article{background:transparent;border-top:1px solid transparent}
.article-head{padding:6px 0 10px}
.title{font-size:var(--title-size);margin:6px 0 8px;text-align:center;font-weight:700;color:var(--navy);line-height:1.12}

.meta{display:flex;gap:8px;justify-content:center;align-items:center;color:var(--muted);font-size:13px}
.meta .published{color:var(--muted)}
.summary{font-size:var(--lead-size);line-height:var(--tight-line);margin:14px 0 18px;text-align:left;color:var(--text)}

.content{font-size:var(--body-size);line-height:var(--tight-line);color:var(--text);word-break:break-word}
.content p{margin:0 0 12px}

/* FAQ（使用 details 折叠样式，保持无卡片视觉） */
.faq{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.faq h2{font-size:16px;margin:0 0 10px;color:var(--navy)}
.faq details{border:0;padding:8px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--accent);outline:none}
.faq details p{margin:8px 0 0;color:var(--text)}

/* 侧栏注释与相关阅读（编号列表视觉） */
.notes{border-left:1px solid var(--line);padding-left:18px}
.related h3{font-size:14px;margin:0 0 10px;color:var(--navy)}
.related-list{counter-reset:rl;list-style:none;margin:0;padding:0}
.related-list > *{counter-increment:rl;padding:6px 0;color:var(--muted)}
.related-list > *:before{content:counter(rl)".";display:inline-block;width:28px;color:var(--accent);font-weight:600}

/* 广告位：独立容器，不悬浮、不遮挡 */
.ad{background:transparent;border-top:1px solid var(--line);padding:12px 0;margin:16px 0;color:var(--muted);font-size:13px}
.ad-top{margin-top:6px}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:16px 0;text-align:center;color:var(--muted);font-size:13px}

/* Visual signature：页头与正文对齐基线明显不同（页头使用竖排/左侧基线，正文以中轴为基线） */
/* 实现在 .masthead writing-mode 与 .title text-align:center 的对比 */

/* 禁用常见被禁止的视觉元素（如发光按钮、渐变、圆角、重阴影） */
button,input,select,textarea{border-radius:0;box-shadow:none}

/* 响应式规则：桌面（>=1024px）与手机（<=767px）必须分别成型 */
@media (min-width: 1024px){
  .container{min-width:var(--min-width)}
  .centerline-grid{grid-template-columns:80px minmax(620px, 1fr) 320px}
  /* 左侧竖排刊头可见并固定样式 */
  .masthead{display:flex}
  .masthead .site-link{font-size:13px}
  .editorial{align-items:flex-start}
  .title{font-size:32px}
  .summary{max-width:740px}
  .notes{padding-left:24px}
}

@media (max-width: 767px){
  /* 手机：中轴解除，全部左对齐单列 */
  .site-header{margin:12px 10px}
  .masthead{flex-direction:row;gap:10px;align-items:center}
  .masthead .site-link{writing-mode:horizontal-tb;transform:none;font-size:16px}
  .masthead .mastyear{display:none}
  .editorial{display:none}

  .centerline-grid{grid-template-columns:1fr}
  .container{padding:0 10px}
  .title{text-align:left;font-size:20px}
  .meta{justify-content:flex-start;padding-bottom:6px}
  .summary{text-align:left;font-size:14px}
  .notes{border-left:0;padding-left:0;margin-top:10px}
  .related-list>*:before{width:22px}

  /* 禁止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 兼容最窄320px显示 */
@media (max-width: 320px){
  .title{font-size:18px}
  .summary{font-size:13px}
  .content{font-size:14px}
  .container{padding:0 8px}
}

/* 可访问性与打印优化 */
@media print{
  .ad, .masthead, .editorial, .site-footer{display:none}
  .title{page-break-after:avoid}
}