/* Palette & system typography */
:root{
  --navy: #0b2740; /* 海军蓝 */
  --mist: #f3f6f8;  /* 浅雾灰 */
  --text: #111214;
  --muted: #6b7280;
  --divider: #d9e0e6;
  --max-page: 1280px; /* 在 1120-1440 之间，选中间值 */
  --content-width: 860px; /* 正文宽度合同约定 */
  --gap: 24px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft Yahei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%;background:linear-gradient(to bottom, #fff, var(--mist));color:var(--text);margin:0}
a{color:inherit;text-decoration:none}

.masthead{background:var(--mist);border-bottom:1px solid var(--divider);}
.masthead-inner{max-width:var(--max-page);margin:0 auto;padding:10px 18px}
.topnav{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.site-home{font-weight:700;color:var(--navy);font-size:18px}
.nav-line{flex:1;height:0}
.double-header{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.header-band.thin{height:3px;background:var(--navy);width:100px}
.header-band.thick{height:6px;background:var(--mist);border-top:1px solid var(--divider)}

.page{max-width:var(--max-page);margin:18px auto;padding:0 20px}
.article{display:block}

/* Title composition: left-aligned with thick/thin bars */
.title-wrap{width:100%;border-top:3px solid var(--navy);border-bottom:1px solid var(--divider);padding:18px 0 12px}
.title-wrap h1{margin:0;font-weight:800;letter-spacing:-0.02em;font-size:28px;color:var(--navy)}

.meta{margin-top:10px;color:var(--muted);font-size:13px}
.meta .published{font-weight:600;color:var(--navy)}
.summary{margin-top:14px;color:var(--text);line-height:1.6;font-size:16px;padding-bottom:8px;border-bottom:1px solid var(--divider)}

/* Content container separate width from title */
.content-wrap{display:flex;justify-content:center;padding-top:20px}
.article-body{width:100%;max-width:var(--content-width);background:transparent;padding:0 8px;color:var(--text);line-height:1.8;font-size:17px}
.article-body p{margin:0 0 16px}
.article-body h2{font-size:20px;margin:18px 0 10px}

/* Ads are simple static blocks, not overlapping */
.ad{max-width:var(--max-page);margin:18px auto;padding:8px 20px;color:var(--muted);font-size:13px;border-top:1px dashed var(--divider);border-bottom:1px dashed var(--divider);background:transparent}
.ad-top{margin-top:12px}

.section-title{font-size:15px;color:var(--navy);font-weight:700;margin:26px 0 10px}

/* FAQ pattern: desktop table-like, mobile stacked */
.faq-list{border-top:1px solid var(--divider);padding-top:12px}
.faq-item{display:flex;flex-wrap:nowrap;padding:10px 0;border-bottom:1px solid var(--divider)}
.faq-item .q{flex:0 0 260px;color:var(--navy);font-weight:700}
.faq-item .a{flex:1;color:var(--text)}

/* Related pattern: list with dates and separators */
.related-list{display:grid;grid-template-columns:1fr;gap:10px;border-top:1px solid var(--divider);padding-top:12px}
.related-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--divider)}
.related-item .r-title{color:var(--text)}
.related-item .r-date{color:var(--muted);font-size:13px}

/* Footer: wide-screen index-style layout (visual_signature) */
.site-footer{border-top:1px solid var(--divider);background:var(--mist);padding:20px 0;margin-top:30px}
.footer-grid{max-width:var(--max-page);margin:0 auto;display:grid;grid-template-columns:220px 1fr 200px;gap:20px;padding:0 20px}
.footer-col{color:var(--muted)}
.footer-home{font-weight:800;color:var(--navy);font-size:16px}
.index-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.index-item{font-size:13px;color:var(--muted);padding-right:8px}

/* Accessibility helpers */
.section-title + *{margin-top:4px}

/* Desktop-specific rules: distinct layout established for >=1024px */
@media (min-width:1024px){
  body{background: #fff}
  .page{padding:0 28px}
  /* Ensure page container uses the contract width range */
  .masthead-inner,.page,.site-footer .footer-grid{max-width:1280px}

  /* Title stays wider than content, with title left-justified visual shift */
  .title-wrap{max-width:1100px;padding-left:40px}
  .article-body{max-width:var(--content-width);padding-left:0;padding-right:0}

  /* FAQ rendered as two-column table-like rows (left question, right answer) */
  .faq-list{display:flex;flex-direction:column}
  .faq-item{padding:12px 0}
  .faq-item .q{flex:0 0 280px;padding-right:18px}

  /* Related bottom: three columns as required */
  .related-list{grid-template-columns:repeat(3,1fr);gap:18px}
  .related-item{display:block;border-bottom:none;padding:6px 0}
  .related-item + .related-item{border-top:1px solid var(--divider)}

  /* Footer index style more pronounced */
  .footer-grid{grid-template-columns:260px 1fr 260px}
}

/* Mobile-specific rules: independent reflow for <=767px */
@media (max-width:767px){
  :root{--gap:14px}
  .masthead-inner{padding:10px}
  .title-wrap{border-top-width:2px;padding:12px 0}
  .title-wrap h1{font-size:20px}
  .meta{font-size:12px}
  .summary{font-size:15px}

  /* Page padding reduced; content becomes full-width minus safe gutters */
  .page{padding:0 14px}
  .content-wrap{padding-top:14px}
  .article-body{max-width:100%;padding:0}

  /* FAQ stacked: question above answer */
  .faq-list{display:block}
  .faq-item{display:block;padding:10px 0}
  .faq-item .q{display:block;padding-bottom:8px}
  .faq-item .a{display:block}

  /* Related: single column */
  .related-list{grid-template-columns:1fr}
  .related-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--divider)}

  /* Footer stacks into single column */
  .footer-grid{grid-template-columns:1fr;gap:10px;padding:12px}
  .index-list{gap:8px}
}

/* Prohibitions enforced by design: no rounded corners, no heavy shadows, thin separators */
*{border-radius:0!important;box-shadow:none!important}