:root{
  --paper:#f7f3ec; /* 纸白 */
  --navy:#0f2b44;  /* 藏蓝 */
  --muted:#7b8790;
  --line:rgba(15,43,68,0.08);
  --accent:var(--navy);
  --title-serif: Georgia, "Times New Roman", Times, serif;
  --ui-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft Yahei", sans-serif;
  --max-desktop: 1400px;
}

/* Global reset tuned for magazine feel */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:#111;
  font-family:var(--ui-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Toolbar: 报刊双层报头 -> compact, thin separators */
.site-toolbar{
  background:linear-gradient(180deg, rgba(15,43,68,0.02), transparent);
  border-bottom:1px solid var(--line);
}
.toolbar-inner{
  max-width:clamp(1120px, 88vw, var(--max-desktop));
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-id{font-weight:700; color:var(--navy); letter-spacing:0.02em}
.breadcrumb{font-size:13px; color:var(--muted)}

/* Page shell uses grid to create left-related / right-article diagonal balance on desktop */
.page-shell{padding:18px 0 40px}
.layout-grid{
  max-width:clamp(1120px, 88vw, var(--max-desktop));
  margin:18px auto;
  display:grid;
  gap:24px;
  /* Default mobile-first single column (article then related) */
  grid-template-columns:1fr;
  align-items:start;
  padding:0 18px;
}

/* Article styling: Title composition (标题与摘要左右分置) */
.article{
  background:transparent;
  color:inherit;
  border-top:0;
}
.article-head{margin-bottom:14px}
.title-band{
  display:flex;
  gap:18px;
  align-items:start;
}
.article-title{
  font-family:var(--title-serif);
  font-size:clamp(20px, 3.2vw, 36px);
  margin:0;
  line-height:1.08;
  color:var(--navy);
  flex:1 1 auto;
  /* No extra decoration, no big shadows */
}
.summary-band{
  font-size:14px;
  color:white;
  background:var(--accent);
  align-self:flex-start;
  padding:8px 14px;
  line-height:1.4;
  white-space:normal;
  /* visual_signature: 窄色带 */
}

.meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
  color:var(--muted);
  font-size:13px;
}
.published, .now{display:inline-block}

.content{
  margin-top:18px;
  color:#1a1a1a;
  font-size:16px;
  line-height:1.8;
  font-family:var(--ui-sans);
}
.content > *:first-child{margin-top:0}
.content p{margin:0 0 1em}
.content h2, .content h3{margin:1.2em 0 .6em; color:var(--navy); font-family:var(--title-serif)}

/* Ads: independent containers, no overlays */
.page-ad{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; color:var(--muted); font-size:13px; margin:18px 0}

/* FAQ pattern: 编号式问答但不虚构步骤 */
.faq{margin-top:22px}
.faq h2{font-size:16px; margin:0 0 8px; color:var(--navy); font-family:var(--title-serif)}
.faq-list{padding-left:18px; margin:0; color:#222}
.faq-list > li{margin:0 0 12px}

/* Related pattern: 带日期的分隔线列表 */
.related{
  border-left:0; /* visual separation handled by grid gap */
}
.related h2{font-size:14px; color:var(--navy); margin:0 0 10px; font-family:var(--title-serif)}
.related-list{display:block;}
/* Expect related items to be provided; style common structures */
.related-list > *{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px}
.related-list a{color:var(--navy); text-decoration:none}
.related-list time{color:var(--muted); font-size:13px}

.site-footer{border-top:1px solid var(--line); color:var(--muted); padding:16px 0;}
.footer-inner{max-width:clamp(1120px, 88vw, var(--max-desktop)); margin:0 auto; padding:0 18px}

/* Desktop layout: use non-symmetric grid,正文偏右，推荐偏左; 标题与摘要左右分置 maintained */
@media (min-width: 1024px){
  .layout-grid{
    grid-template-columns:320px 1fr; /* related narrow left, article wider right */
    align-items:start;
    gap:40px;
  }
  /* Place article in second column (右侧)，related在左侧 (左侧) */
  .layout-grid > article{grid-column:2}
  .layout-grid > aside{grid-column:1}

  /* Make the main container breathe within 1120-1440 constraint */
  .layout-grid{max-width:clamp(1120px, 78vw, 1440px)}

  /* Title composition refined on desktop: larger left title and narrow summary band to the right */
  .title-band{align-items:flex-start}
  .article-title{font-size:40px}
  .summary-band{width:260px; flex:0 0 260px; text-align:left}

  /* Ensure content block has more horizontal measure (正文偏右) */
  .content{padding-left:24px; border-left:1px solid var(--line)}

  /* Related look: emphasize separators and date to create editorial list */
  .related-list > *{padding:12px 0;}
}

/* Mobile rules: single-column natural order: 标题、摘要、正文、FAQ、推荐 */
@media (max-width: 767px){
  .toolbar-inner{padding:10px}
  .layout-grid{grid-template-columns:1fr; padding:0 12px}

  /* Stack - article first, related after article (FAQ sits inside article) */
  .layout-grid > article{order:0}
  .layout-grid > aside{order:1; margin-top:18px}

  /* Title composition stacks */
  .title-band{flex-direction:column; gap:8px}
  .summary-band{width:100%; order:1; padding:8px 10px}
  .article-title{order:0}

  /* Content full width, no left border */
  .content{padding-left:0; border-left:0}

  .related-list > *{padding:10px 0}

  /* Ensure no horizontal scroll at 320px */
  .summary-band, .toolbar-inner, .layout-grid{min-width:0}
}

/* Accessibility: focus outlines for keyboard navigation */
a:focus{outline:2px dashed var(--navy); outline-offset:3px}
button:focus{outline:2px dashed var(--navy)}

/* Surface rules: 无圆角、细分隔线、无阴影 */
*{border-radius:0}
img{max-width:100%;height:auto}