:root{
  --brick:#a43b2f; /* 砖红 */
  --sand:#f5efe6; /* 砂岩白 */
  --text:#212121;
  --muted:#6b6b6b;
  --line:rgba(164,59,47,0.95);
  --max-w: clamp(1120px, 85vw, 1440px);
  --gutter:20px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

/* 基础重置与布局 */
html,body{height:100%;margin:0;background:var(--sand);color:var(--text);font-family:var(--font-stack);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 16px}

.site-header{background:transparent;padding:18px 0 6px}
.top-nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto;padding:0 16px}
.top-nav .nav-left,.top-nav .nav-right{display:flex;gap:12px;color:var(--muted);font-size:14px}
.top-nav .nav-center{position:relative;text-align:center;flex:1}
.site-name{font-weight:700;color:var(--brick);font-size:20px}
.nav-rule{border:0;border-top:1px solid rgba(0,0,0,0.06);margin:12px 0}

.content-wrap{position:relative;max-width:var(--max-w);margin:18px auto;padding:18px var(--gutter);box-sizing:border-box}
/* 贯穿页面的1px主题竖线（视觉识别） */
.content-wrap::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);left:42%;opacity:0.9;pointer-events:none}

/* 广告容器样式（独立且不干扰内容流） */
.ad-container{max-width:var(--max-w);margin:10px auto;padding:8px 12px;color:var(--muted);font-size:14px;background:transparent}

/* 标题区：7/5 分栏 */
.title-area{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start;margin-bottom:18px}
.title-block h1{margin:0;font-size:28px;font-weight:700;text-align:center;line-height:1.15}
.summary{margin:12px 0 0;text-align:left;color:var(--muted);font-size:15px}
.meta-block{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;justify-content:flex-end}
.meta-row{background:transparent;padding-left:12px}
.meta-item{margin-bottom:8px}
.meta-item strong{color:var(--brick)}
.kw{color:var(--text)}

/* 主体非对称网格 */
.article-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:28px;align-items:start}
.main-article{background:transparent}
.article-body{color:var(--text);font-size:16px;line-height:1.7}
.side-info{position:relative}
.side-block{padding-left:14px}
.side-heading{font-size:16px;margin:0 0 8px;color:var(--brick)}
.faq-list details{border-top:1px solid rgba(0,0,0,0.06);padding:10px 0}
.faq-list summary{cursor:pointer;list-style:none;outline:none}

/* 相关阅读 列表（带日期的分隔线列表） */
.related-section{margin-top:20px}
.related-heading{font-size:15px;color:var(--brick);margin:0 0 8px}
.related-list{list-style:none;padding:0;margin:0;border-top:1px solid rgba(0,0,0,0.06)}
.related-list > *{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04);color:var(--muted);font-size:15px}
.related-list a{color:inherit}
.related-list time{color:var(--muted);font-size:13px}

.site-footer{max-width:var(--max-w);margin:30px auto 60px;padding:0 16px;color:var(--muted);font-size:13px}

/* 小屏到中屏的可读性调整 */
@media (max-width:767px){
  .content-wrap::before{left:8px;opacity:0.6}
  .title-area{grid-template-columns:1fr;gap:10px;padding-bottom:8px}
  .title-block h1{text-align:left;font-size:20px}
  .summary{order:2}
  .meta-block{order:1;display:block;margin-top:0;padding-left:0}
  .meta-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
  .article-grid{display:block}
  .side-info{margin-top:18px;padding-left:0}
  .side-block{padding-left:0}
  .ad-container{padding:6px 10px}
  .related-list > *{padding:8px 0}
  .site-name{font-size:18px}
}

/* 桌面规则：在 1024px 及以上生效，形成明确的非对称杂志网格与错位 FAQ */
@media (min-width:1024px){
  .content-wrap{padding:28px 36px}
  .title-block h1{font-size:34px}
  .article-body{font-size:17px;line-height:1.78}
  /* 右侧信息区出现错位：下移以形成杂志式错列 */
  .side-info{padding-top:36px}
  /* 将正文主列偏左（利用 content-wrap::before 的竖线） */
  .main-article{padding-right:18px}
  /* 增强页内视觉识别：靠近竖线的细微强调 */
  .article-body p{max-width:none}
}

/* 保障 768-1023 中间断点的可读性（平板） */
@media (min-width:768px) and (max-width:1023px){
  .title-area{grid-template-columns:1fr 1fr}
  .content-wrap::before{left:44%}
  .article-grid{grid-template-columns:1.6fr 1fr}
}

/* 无大圆角、无浮动广告、无头像卡片：遵守视觉与可访问性契约 */