:root{
  --bg:#f6fbfb; /* 青灰基底浅 */
  --panel:#ffffff; /* 白色方角面 */
  --line:#d9e8ea; /* 线条色 */
  --accent:#4aa3b8; /* 湖蓝 */
  --muted:#6b7b7d; /* 青灰文字 */
  --title:#0f3b3f;
  --max-width:1320px;

  --ff-sans: "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --ff-serif: Georgia, "Times New Roman", serif;
}

/* Reset and base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  background:var(--bg);
  color:#183233;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  font-size:16px;
}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header: 双层报头但第二层极窄 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:18px 12px 10px 12px;max-width:var(--max-width);margin:0 auto}
.brand .home-link{font-weight:700;color:var(--title);text-decoration:none;font-family:var(--ff-serif);font-size:20px}
.header-tools{color:var(--muted);font-size:13px}
.header-strip{border-top:1px solid var(--line);background:transparent;padding:6px 12px 6px 12px}
.index-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.index-nav li span{color:var(--muted);font-size:13px}

/* Page wrapper */
.page-ad{max-width:var(--max-width);margin:18px auto;padding:4px 12px}
.page-ad > *{display:block}

.page-wrap{max-width:var(--max-width);margin:0 auto;padding:18px 12px}
.layout-grid{display:grid;grid-template-columns:1fr;gap:18px}

/* Related column (keywords index) */
.related-column{order:2}
.related-surface{border:1px solid var(--line);background:var(--panel);padding:14px}
.related-title{font-weight:600;color:var(--accent);margin-bottom:8px}
.related-list{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.related-list > *{padding:6px 8px;border:1px solid var(--line);background:transparent}
.keywords{margin-top:12px;font-size:13px;color:var(--muted)}

/* Title and summary area */
.title-summary{order:1}
.article-header{padding:10px 6px}
#article-title{margin:0;color:var(--title);font-family:var(--ff-serif);font-size:28px;text-align:center;letter-spacing:0.4px}
.meta-row{margin-top:10px;display:flex;gap:18px;justify-content:center;color:var(--muted);font-size:13px}
.summary{margin-top:14px;color:#1e2f2f;background:transparent;padding:10px 6px;border-left:3px solid var(--line);text-align:left}

/* Content column */
.content-column{order:3}
.content-surface{border:1px solid var(--line);background:var(--panel);padding:16px}
.content-label{font-size:13px;color:var(--accent);margin-bottom:8px}
.content-body{color:#123232}
.faq-section{margin-top:18px}
.faq-section h3{margin:0 0 8px 0;font-size:16px;color:var(--title)}
.faq-list{border-top:1px solid var(--line)}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--line)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:18px 12px;text-align:center;color:var(--muted);font-size:13px}

/* Desktop: 对角视觉平衡，正文偏右，推荐偏左；元信息沿桌面端边缘纵向排列 */
@media (min-width:1024px){
  .page-wrap{padding:28px 20px}
  .layout-grid{grid-template-columns:280px 420px 1fr;align-items:start;gap:28px}

  /* 左侧相关在左列 */
  .related-column{order:1}
  .title-summary{order:2}
  .content-column{order:3}

  /* 标题区跨中两列以居中但偏窄，摘要区左对齐 */
  .title-summary{grid-column:2 / span 1}
  .title-summary #article-title{font-size:34px}
  .title-summary .summary{max-width:420px}

  /* 正文列视觉更宽并偏右 */
  .content-column{grid-column:3 / span 1}
  .content-surface{min-height:200px}

  /* 元信息沿边缘纵向排列（视觉签名） */
  .layout-grid{position:relative}
  .layout-grid::before{
    content:"";position:absolute;left:calc((100% - var(--max-width))/2 - 56px);top:0;width:56px;height:100%;display:block}
  .meta-edge{position:absolute;left:0;top:0}

  /* 将发布时间与当前时间沿容器左侧纵向展示（视觉签名） */
  .meta-vertical{position:absolute;left:-64px;top:36px;writing-mode:vertical-rl;text-orientation:mixed;color:var(--muted);font-size:13px}
  /* duplicate visible info inside meta-vertical */
  .meta-vertical span{display:block;padding:6px 0}

  /* place meta-vertical next to layout on desktop */
  .article-header{position:relative}
  .article-header::after{content:""}

  /* ensure related list flows as index grid */
  .related-list{display:grid;grid-template-columns:1fr;gap:8px}
}

/* Mobile: 320px 时无横向滚动，单列自然重排（标题、摘要、正文、FAQ、推荐） */
@media (max-width:767px){
  body{font-size:15px}
  .page-wrap{padding:12px}
  .layout-grid{grid-template-columns:1fr;gap:12px}

  /* 顺序：标题、摘要、正文、FAQ、相关阅读 */
  .title-summary{order:1}
  .content-column{order:2}
  .faq-section{order:3}
  .related-column{order:4}

  /* 取消错位视觉 */
  #article-title{text-align:left;font-size:20px}
  .summary{text-align:left;border-left:3px solid var(--line);padding-left:8px}
  .related-surface{border-top:1px solid var(--line)}

  /* Ensure no horizontal overflow */
  .related-list{overflow:auto}
  .related-list > *{white-space:nowrap}
  .page-ad{padding:8px}
}

/* Mid-range (768-1023) keep moderate density */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{grid-template-columns:1fr;gap:16px}
  .title-summary{order:1}
  .content-column{order:2}
  .related-column{order:3}
  #article-title{text-align:left;font-size:26px}
}

/* Small tweaks */
.content-body img{max-width:100%;height:auto}
a{color:var(--accent)}