:root{
  --navy:#0b2946; /* 海军蓝 */
  --fog:#f4f6f8;  /* 浅雾灰 */
  --text:#1a1a1a;
  --muted:#6b7280;
  --accent:var(--navy);
  --line:rgba(11,41,70,0.12);
  --max-width:1280px; /* 在1120-1440之间 */
  --gap:28px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-sans);
  background:linear-gradient(180deg,var(--fog),#fff 1200px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Visual signature: 1px 竖线贯穿 */
.site-frame{position:relative}
.site-frame::before{
  content:"";
  position:fixed;
  left:48px; /* 靠左的竖线作为视觉识别 */
  top:0; bottom:0;
  width:1px; background:var(--accent);
  opacity:0.12;
  pointer-events:none;
}

/* Header: 居中刊头与双层窄导航 */
.site-header{padding:20px 20px 6px; text-align:center}
.masthead .site-logo{font-weight:700; color:var(--navy); text-decoration:none; font-size:20px}
.thin-nav{border-top:1px solid var(--line); margin-top:10px; padding-top:8px}
.thin-nav ul{display:flex; gap:18px; justify-content:center; list-style:none; padding:0; margin:0}
.thin-nav li span{font-size:13px; color:var(--muted)}

/* Page container limited width to satisfy desktop contract */
.page-container{max-width:var(--max-width); margin:28px auto; padding:0 20px}
.article{background:transparent}
.article-header h1{
  margin:0 0 8px 0;
  font-size:28px; /* 超大但控制行数 */
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.02em;
}
.meta{color:var(--muted); font-size:13px; margin-bottom:12px}
.summary{margin:0 0 22px 0; color:var(--muted); font-size:15px}

/* Layout grid: desktop will override */
.layout-grid{display:block}
.content-column{width:100%}
.side-column{display:block}
.side-block{padding:18px 0; border-top:1px solid var(--line)}
.side-block h3{margin:0 0 8px 0; font-size:15px}
.muted{color:var(--muted); font-size:13px}

/* Article body: no folding, clear paragraphs, horizontal rules as chapter separators */
.article-body p{line-height:1.75; margin:0 0 16px 0; font-size:16px}
.article-body h2, .article-body h3{margin:20px 0 8px; font-weight:600}
.article-body hr{border:none; border-top:1px solid var(--line); margin:22px 0}

/* FAQ pattern: 横线问答列表 */
.faq h2, .related h2{font-size:16px; margin-top:28px; margin-bottom:12px}
.faq-list > * + *{border-top:1px solid var(--line); padding-top:12px; margin-top:12px}
.faq-list .question{font-weight:600}
.faq-list .answer{margin-top:6px; color:var(--muted)}

/* Related pattern: 带日期的分隔线列表 */
.related-list > *{padding:10px 0; border-top:1px dashed var(--line)}
.related-list time{display:inline-block; color:var(--muted); font-size:13px; margin-left:8px}

/* Ads: independent containers, non-floating */
.ad{max-width:var(--max-width); margin:18px auto; padding:8px 20px; color:var(--muted); font-size:13px}
.ad-top, .ad-middle, .ad-bottom{background:transparent}

/* Footer */
.site-footer{padding:18px 20px; color:var(--muted); font-size:13px}

/* Desktop rules - must include @media (min-width: 1024px) */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .page-container{max-width:1280px; margin-top:36px}

  /* Create an editorial/dashboard style non-symmetric grid */
  .layout-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--gap); align-items:start}

  /* Title is full-width */
  .article-header{grid-column: 1 / -1}
  .article-body{grid-column: 1 / 9} /* 正文 8 列 */
  .content-column{grid-column: 1 / 9}

  .side-column{grid-column:9 / 13; display:flex; flex-direction:column; gap:18px}
  .side-top{flex:1; padding-left:18px; border-left:1px solid var(--line)}
  .side-bottom{flex:1; padding-left:18px; border-left:1px solid var(--line)}

  /* Bottom related: 四列 */
  .related .related-list{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .related .related-list > *{border-top:none; border-left:1px solid var(--line); padding-left:12px}

  /* Denser typography for headings (报刊式紧凑标题) */
  .article-header h1{font-size:36px; line-height:1.06; max-height:5.2em; overflow:hidden}
  .article-body p{font-size:17px}

  /* Keep the vertical signature visible but subtle on desktop */
  .site-frame::before{left:40px; opacity:0.14}
}

/* Mobile rules - must include @media (max-width: 767px) */
@media (max-width:767px){
  :root{--max-width:720px}
  .page-container{padding:12px}

  /* Mobile stacked reading order: 标题 -> meta -> 摘要 -> 正文 -> 信息区两段列表 -> 相关阅读单列 */
  .layout-grid{display:block}
  .article-header h1{font-size:20px; line-height:1.15}
  .article-body{margin-top:8px}

  .side-column{display:block; margin-top:18px}
  .side-block{border-top:1px solid var(--line); padding:12px 0}

  /* Related becomes single column */
  .related .related-list{display:block}
  .related .related-list > *{border-top:1px dashed var(--line); padding:12px 0}

  /* Ensure no horizontal scroll at 320px */
  body{font-size:16px}
  .site-frame::before{left:14px}
  .page-container{margin:0}
}

/* Accessibility and focus */
a:focus{outline:2px dashed var(--accent); outline-offset:3px}

/* Avoid rounded cards and heavy shadows (forbidden_pattern) */
*{border-radius:0}