:root{
  --navy:#0b2340; /* 海军蓝 */
  --mist:#f3f6f8; /* 浅雾灰 */
  --text:#0b2333;
  --muted:#6b7680;
  --accent:var(--navy);
  --content-max-width: clamp(1120px,90vw,1440px);
  --gap:24px;
  --rule:1px solid #e6eaee;
  --ff: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--text);
  background:linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header: 一行文字刊头 */
.site-header{border-bottom:var(--rule);background:var(--mist)}
.header-inner{max-width:var(--content-max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px}
.brand{font-weight:700;color:var(--navy);letter-spacing:0.2px}
.top-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.top-nav li{font-size:14px;color:var(--muted)}
.top-nav a{color:var(--navy)}

/* Ad slot simple block (not floating) */
.ad-slot{max-width:var(--content-max-width);margin:18px auto;padding:10px;border-top:var(--rule);border-bottom:var(--rule);background:transparent;color:var(--muted);font-size:13px}

/* Main container and grid (desktop reverse-rail) */
.container{max-width:var(--content-max-width);margin:0 auto;padding:18px}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}

/* Rail (left) */
.rail{border-right:none;padding-right:12px}
.site-card{padding:8px 0;border-bottom:var(--rule);margin-bottom:12px}
.site-title{font-weight:700;color:var(--navy);font-size:18px}
.breadcrumb{font-size:13px;color:var(--muted);margin-top:6px}
.meta-block{font-size:13px;color:var(--muted);line-height:1.6}
.meta-block time{display:block;color:var(--muted)}

/* Article */
.article{padding-left:12px}
.article-header{margin-bottom:12px}
.title{font-size:28px;line-height:1.2;margin:6px 0 10px 0;font-weight:700;position:relative;padding-left:0}
/* 标题压左并用粗细横线构图 */
.title::before{content:"";display:block;height:6px;width:6px;background:var(--accent);position:absolute;left:-14px;top:12px}
.title::after{content:"";display:block;height:1px;background:#dbe4ea;width:40%;position:absolute;left:0;bottom:-8px}
.summary{color:var(--muted);margin:0 0 14px 0;font-size:15px}

.article-body{font-size:16px;line-height:1.75;color:var(--text)}
.article-body p{margin:0 0 1em}

/* FAQ: 使用 details 折叠（模板渲染应提供 details 列表或服务端生成） */
.faq h3{margin-top:22px}
.faq-list details{border-top:var(--rule);padding:12px 0}
.faq-list summary{cursor:pointer;font-weight:600}
.faq-list p{margin:8px 0 0;color:var(--muted)}

/* Related bottom pattern: 三列短卡但不用阴影 */
.related-bottom{margin-top:26px;padding-top:16px;border-top:var(--rule)}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{padding:10px;border:var(--rule);background:#fff}
.related-list{font-size:14px;color:var(--muted)}

/* Footer visual signature: 宽屏索引式排版 */
.site-footer{margin-top:34px;background:var(--mist);border-top:var(--rule)}
.footer-inner{max-width:var(--content-max-width);margin:0 auto;padding:22px}
.footer-index{display:flex;gap:24px}
.footer-index .col{flex:1}
.footer-index h4{margin:0 0 8px 0;font-size:14px;color:var(--navy)}
.footer-index ul{list-style:none;padding:0;margin:0}
.footer-index li{font-size:13px;color:var(--muted);margin-bottom:6px}

/* Mobile specific compact blocks */
.mobile-meta{border-top:var(--rule);border-bottom:var(--rule);padding:10px 0;margin-bottom:12px}
.mobile-meta-row{display:flex;gap:8px;justify-content:space-between;font-size:13px;color:var(--muted)}
.mobile-keywords{font-size:13px;color:var(--muted);margin-top:8px}
.mobile-related h4{margin:8px 0;font-size:14px}

/* Visibility helpers */
.desktop-only{display:none}
.mobile-only{display:block}

/* Surface: 无圆角、细分隔线、无阴影 */
*{border-radius:0}

/* Typography & density 调整 */
body{font-feature-settings:"tnum";}

/* Responsive rules required by contract */
@media (min-width:1024px){
  /* Desktop: establish reverse-rail 4/8 columns */
  .grid{grid-template-columns:repeat(12,1fr);gap:32px;align-items:start}
  .rail{grid-column:1 / span 4;border-right:var(--rule);padding-right:28px}
  .article{grid-column:5 / span 8;padding-left:28px}

  .container{padding:28px}

  .title{font-size:34px}
  .summary{font-size:15px}

  /* Related bottom as three columns short cards */
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .related-grid > *{height:72px;overflow:hidden}

  /* Footer wide screen index style */
  .footer-index{display:flex}

  .desktop-only{display:block}
  .mobile-only{display:none}
}

@media (max-width:767px){
  /* Mobile: single column, no horizontal scroll; left rail info拆为标题前后的紧凑区块 */
  .container{padding:12px}
  .grid{grid-template-columns:1fr}
  .rail{display:none}
  .article{padding:0}

  .title{font-size:20px}
  .summary{font-size:14px}

  .related-grid{grid-template-columns:1fr}
  .footer-index{display:block}

  /* Ensure no horizontal scroll at 320px */
  html,body{min-width:0}
}

/* Accessibility / small tweaks */
.time, time{font-size:13px;color:var(--muted)}