:root{
  --bg:#f6efe6; /* 奶油白 */
  --ink:#3e2f24; /* 深棕 */
  --muted:#7a6b61;
  --sep:rgba(62,47,36,0.08);
  --max-width: clamp(1120px,80vw,1440px);
  --gap:16px;
  --dense-gap:12px;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* Site container */
.site{display:flex;flex-direction:column;align-items:center;padding:12px;}
.site-inner{
  width:var(--max-width);
  display:grid;
  grid-template-columns:220px 1fr 360px;
  gap:24px;
  align-items:start;
}

/* Left vertical navigation */
.left-nav{
  border-right:1px solid var(--sep);
  padding-right:16px;
}
.left-nav .brand{font-weight:700;margin-bottom:12px}
.left-nav .brand a{color:var(--ink);text-decoration:none}
.left-nav .nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.left-nav .nav-list li{padding:4px 0}

/* Main content */
.content-area{background:transparent;padding:0}
.top-strip{display:flex;flex-direction:column;gap:12px}
.site-breadcrumb{color:var(--muted);font-size:13px}
.site-breadcrumb a{color:var(--ink);text-decoration:none}

.article{background:transparent}
.article-header{padding:6px 0 12px;border-bottom:1px solid var(--sep);margin-bottom:12px}
.title-grid{display:grid;grid-template-columns:7fr 5fr;gap:16px;align-items:start}
.title-col h1{margin:0;font-size:28px;line-height:1.15;font-weight:700;color:var(--ink)}
.title-col .summary{margin:12px 0 0;color:var(--muted)}
.meta-col{padding-left:12px;border-left:1px solid transparent}
.meta-block{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.meta-row{background:transparent}
.meta-row .kw{color:var(--ink)}

.article-body{color:var(--ink);font-size:16px;word-wrap:break-word}
.article-body p{margin:0 0 12px}

.ad{padding:12px;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);background:transparent;color:var(--muted);font-size:13px}
.ad-top{border-top:none}
.ad-bottom{width:100%;max-width:var(--max-width);margin-top:18px}

/* Related */
.related-block{margin-top:18px;padding-top:12px;border-top:1px solid var(--sep)}
.related-block .section-title{font-size:16px;margin:0 0 10px}
.related-list{display:block;border-top:1px solid var(--sep);padding-top:10px}
.related-list > *{display:block;padding:10px 0;border-bottom:1px dashed var(--sep);color:var(--muted)}

/* Right aside */
.right-aside{padding-left:12px;border-left:1px solid var(--sep)}
.aside-stacked{display:flex;flex-direction:column;gap:16px}
.aside-title{font-size:14px;margin:0 0 8px}
.meta-card dl{margin:0;font-size:14px;color:var(--muted)}
.meta-card dt{font-weight:600;color:var(--ink);margin-top:8px}
.meta-card dd{margin:4px 0 0}
.faq-card .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.faq-card .faq-list > *{padding:8px;border-top:1px solid var(--sep);font-size:14px;color:var(--muted)}

/* Footer visual signature：宽屏索引式排版 */
.site-footer{width:100%;margin-top:28px;padding:18px 0;border-top:1px solid var(--sep)}
.footer-inner{width:var(--max-width);display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.footer-index h4{margin:0 0 8px;color:var(--ink)}
.footer-index ul{margin:0;padding:0;list-style:none;color:var(--muted)}
.footer-note{color:var(--muted);font-size:13px}

/* Density: 紧凑 */
.title-col h1{margin-bottom:6px}
.article-body p{margin-bottom:10px}

/* 禁止圆角、阴影 */
*{border-radius:0}

/* Desktop rules (>=1024px) 必须包含 */
@media (min-width:1024px){
  /* 强调非对称杂志网格；正文主列偏左，右侧元信息和FAQ错位排列 */
  .site-inner{grid-template-columns:220px 1fr 360px}
  .title-grid{grid-template-columns:7fr 5fr}
  .article-body{column-width:380px;column-gap:36px;}
  .faq-card .faq-list{grid-template-columns:1fr 1fr}
  /* 使右侧与正文错位：缩小右侧顶部间距 */
  .right-aside{transform:translateY(28px)}
  /* footer 展示为多列索引 */
  .footer-inner{display:flex}
}

/* Mobile rules (<=767px) 必须包含 */
@media (max-width:767px){
  .site-inner{
    width:100%;
    display:flex;flex-direction:column;gap:12px;padding:0 12px;
  }
  /* 将导航改为顶部横向索引以恢复自然文档顺序 */
  .left-nav{order:0;display:flex;flex-direction:row;align-items:center;gap:12px;padding:8px 0;border-right:none;border-bottom:1px solid var(--sep)}
  .left-nav .nav-list{flex-direction:row;gap:10px;overflow:auto}
  .left-nav .nav-list li{white-space:nowrap}

  .content-area{order:1}
  .right-aside{order:2;padding-left:0;border-left:none;border-top:1px solid var(--sep);transform:none}
  .title-grid{grid-template-columns:1fr;gap:8px}
  .title-col h1{font-size:20px}
  .title-col .summary{order:2}
  .article-body{column-count:1;column-width:none;font-size:15px}
  .faq-card .faq-list{grid-template-columns:1fr} /* FAQ 两列在手机端改为单列 */
  .related-block{order:3}
  .ad{font-size:13px;padding:10px}
  .footer-inner{flex-direction:column;align-items:flex-start;padding-top:12px}
  /* 确保在最窄320px时无横向滚动 */
  html,body{overflow-x:hidden}
  .left-nav .brand a{font-size:14px}
}

/* Accessibility & utility */
a{color:var(--ink)}
h1,h2,h3,h4{color:var(--ink)}