:root{
  --bg:#f7f5ef; /* 纸白基底 */
  --nav-bg:#10243a; /* 藏蓝 */
  --text:#172133;
  --muted:#5b6470;
  --accent:#b85b46; /* 克制强调色，用于标题首字 */
  --card-bg:#ffffff;
  --max-width:1280px; /* 在1120-1440范围内选择 */
  --gap:24px;
  --radius:6px; /* 方形信息块，微圆角 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, "Noto Sans CJK SC", Arial, "PingFang SC", sans-serif;
}

/* Basic page */
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:18px auto;padding:0 20px;display:grid;grid-template-columns:1fr;gap:var(--gap)}

/* Header / toolbar (深色报头) */
.site-header{background:var(--nav-bg);color:#fff;padding:10px 0}
.toolbar{max-width:var(--max-width);margin:0 auto;padding:6px 20px;display:flex;align-items:center;gap:16px}
.toolbar .home{font-weight:700;color:#fff}
.toolbar .breadcrumb{opacity:0.9;margin-left:6px;font-size:13px}
.toolbar .topnav{margin-left:auto;display:flex;gap:12px;align-items:center}
.toolbar .nav-item{font-size:13px;color:rgba(255,255,255,0.9)}

/* Ads are independent blocks, no floating */
.ad{max-width:var(--max-width);margin:12px auto;padding:10px;background:transparent}
.ad div, .ad span{display:block}

/* Left rail and content: desktop defined later */
.left-rail{display:flex;flex-direction:column;gap:var(--gap)}
.rail-card{background:var(--card-bg);padding:14px;border-radius:var(--radius);box-sizing:border-box;border:1px solid rgba(16,36,58,0.06)}
.meta-row{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.related-list{font-size:14px;color:var(--text)}
.related-list > *{display:block;padding:10px 0;border-bottom:1px solid #e8e6e2}
.related-list time{float:right;color:var(--muted);font-size:12px}
.rail-heading{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
.ad-wrap{background:transparent;padding:0;border:0}

/* Article */
.content{background:transparent}
.article-header{background:var(--card-bg);padding:20px;border-radius:var(--radius);border:1px solid rgba(16,36,58,0.06);margin-bottom:var(--gap)}
.title{margin:4px 0 10px 0;font-size:28px;line-height:1.2;font-weight:700;text-align:left;position:relative;padding-left:6px}
.title::first-letter{color:var(--accent)}
/* 标题横线构图：粗细横线 */
.title::before,.title::after{content:"";position:absolute;left:0;height:3px;background:var(--nav-bg);top:100%;transform:translateY(10px)}
.title::after{height:1px;background:var(--muted);transform:translateY(16px)}
.article-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{margin:0 0 18px 0;color:var(--muted);font-size:15px}
.article-body{background:var(--card-bg);padding:18px;border-radius:var(--radius);border:1px solid rgba(16,36,58,0.06);line-height:1.8;color:var(--text)}
.article-body p{margin:0 0 12px 0}

.faq-section{margin-top:18px}
.faq-section h2{font-size:16px;margin:0 0 10px 0}
.faq-list details{margin-bottom:8px;border-top:1px dashed #e7e3dd;padding-top:8px}
.faq-list summary{cursor:pointer;font-weight:600}

.site-footer{max-width:var(--max-width);margin:28px auto;padding:18px 20px;color:var(--muted);font-size:13px}

/* Mobile compact info blocks */
.mobile-info{display:none}
.mini-meta,.mini-key{font-size:13px;color:var(--muted)}

/* Desktop specific layout - reverse-rail:正文在右侧8列，左侧4列承载站名、面包屑、元信息和相关推荐 */
@media (min-width:1024px){
  .container{grid-template-columns:360px 1fr;gap:32px;padding:24px}
  .left-rail{order:0}
  .content{order:1}
  /* ensure left column ~4/12 and right ~8/12 within max-width */
  .title{font-size:34px}
  .article-header{padding:26px}
  .article-body{padding:22px}
  /* increase density moderately */
  .related-list > *{padding:12px 0}
}

/* Mobile layout: single column; left-side info splits before and after title */
@media (max-width:767px){
  .container{grid-template-columns:1fr;padding:12px;gap:12px}
  .left-rail{display:none} /* 左侧信息拆为标题前后的紧凑区块 */
  .mobile-info{display:block;margin-bottom:10px}
  .article-header{padding:14px}
  .title{font-size:20px}
  .article-meta{font-size:12px}
  .summary{font-size:14px}
  .article-body{padding:16px}
  .ad{margin-left:12px;margin-right:12px}
}

/* Accessibility & stable visuals */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}