:root{
  --ivory:#f8f4ef;
  --deep-purple-gray:#2e2340; /* 深紫灰 */
  --muted:#7a6a80;
  --accent:#45324a;
  --text:#222;
  --max-desktop-width:1280px; /* 在 1120—1440 之间 */
  --gutter:20px;
  --rail-width:28%; /* responsive base for grid; overridden in desktop grid */
  --radius:6px;
  --line-tight:1.45; /* 紧凑行高 */
}

/* 基础重置和排版：人文杂志宽松型但密度紧凑 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--ivory);color:var(--text);font-family: -apple-system,BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}

a{color:inherit;text-decoration:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 页眉：左对齐紧凑品牌栏 + 居中站名与左右文本链接（导航模式混合实现） */
.site-header{background:transparent;padding:12px var(--gutter);border-bottom:1px solid rgba(46,35,64,0.06)}
.header-inner{max-width:var(--max-desktop-width);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.brand-compact{font-weight:700;color:var(--deep-purple-gray);font-size:14px;letter-spacing:0.02em;text-align:left}
.top-nav{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
.top-nav .nav-left,.top-nav .nav-right{display:flex;gap:12px}
.top-nav .nav-item{opacity:.9}
.top-nav .nav-center{font-weight:700;color:var(--accent);font-size:16px}
.home-link{font-weight:700}

/* 页面主容器 */
.page-container{padding:18px 12px}
.layout-grid{max-width:var(--max-desktop-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}

/* 左侧窄索引与右侧文章分栏（桌面） */
.left-rail{background:transparent;border:1px solid rgba(46,35,64,0.06);padding:16px;border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}
.left-rail .rail-brand{font-weight:700;color:var(--deep-purple-gray)}
.left-rail .rail-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
.left-rail .meta-compact{margin-top:8px;font-size:13px;color:var(--muted)}

.article-area{background:transparent;padding:6px 8px}
.article-header{margin-bottom:12px}
.article-title{font-family: Georgia, 'Times New Roman', serif; font-size:28px;margin:0 0 8px 0;line-height:1.08;color:var(--deep-purple-gray);font-weight:700;text-align:left;position:relative;padding-left:0}
/* 标题构图：粗细横线 */
.title-decor{height:0;margin-top:-6px;margin-bottom:12px;border-top:4px solid var(--accent);border-bottom:1px solid rgba(46,35,64,0.08);width:60px}
.article-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.summary p{margin:0;color:var(--muted);line-height:var(--line-tight)}

.article-content{color:var(--text);font-family: 'Noto Serif SC', Georgia, serif;line-height:var(--line-tight);font-size:17px}
.article-content p{margin:0 0 12px 0}

.section-title{font-size:15px;color:var(--deep-purple-gray);margin:12px 0}

/* 广告容器样式——独立区块，不悬浮、不遮挡 */
.ad-slot{background:transparent;border:1px dashed rgba(46,35,64,0.06);padding:10px;border-radius:4px;margin:14px 0;color:var(--muted);font-size:13px}

/* FAQ 与相关阅读 */
.faq-section .faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-section .related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-section .related-grid > *{padding:10px;border:1px solid rgba(46,35,64,0.06);background:rgba(69,50,74,0.02);border-radius:4px;font-size:14px}

.site-footer{padding:18px 12px;border-top:1px solid rgba(46,35,64,0.05);color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-desktop-width);margin:0 auto}

/* ----------------- Desktop rules (>=1024px) ----------------- */
@media (min-width:1024px){
  .layout-grid{grid-template-columns:300px 1fr;gap:28px}
  /* 约束整体最大/最小宽度，保证内容容器在1120—1440之间 */
  :root{--max-desktop-width:1280px}

  /* 左侧占 3 列，右侧占 9 列 的视觉实现（相对比例） */
  .left-rail{width:300px;flex:0 0 300px}
  .article-area{min-width:760px}

  /* 站名与导航纵向排列：增强左栏的编辑刊物感 */
  .rail-brand{font-size:18px;margin-bottom:6px}
  .rail-sub{font-size:13px;color:var(--muted)}
  .rail-nav ul{gap:10px}

  /* 标题构图和对齐：标题压左并用粗细横线构图；正文与页头采用明显不同的对齐基线（visual_signature） */
  /* 页头元素左对齐基线 */
  .site-header{align-items:start}
  /* 文章区稍有内缩形成不同基线 */
  .article-area{padding-left:24px}

  /* FAQ 两列 */
  .faq-section .faq-grid{grid-template-columns:1fr 1fr}

  /* 相关阅读三列短卡，底部无阴影 */
  .related-section .related-grid{grid-template-columns:repeat(3,1fr);gap:12px}

  /* 更浓重的标题装饰 */
  .title-decor{width:100px;border-top-width:5px}
}

/* ----------------- Mobile rules (<=767px) ----------------- */
@media (max-width:767px){
  .layout-grid{grid-template-columns:1fr;padding:0 12px}
  .left-rail{order:2;display:block;background:transparent;border:0;padding:0;margin-top:10px}
  /* 左栏变成标题下方的紧凑信息带 */
  .left-rail .rail-brand{font-size:14px}
  .rail-nav ul{display:flex;gap:10px;font-size:13px}
  .rail-nav ul li{white-space:nowrap}
  .meta-compact{display:flex;gap:12px;font-size:13px;color:var(--muted)}

  /* 标题在上，左栏变为紧凑带 */
  .article-header{order:1}
  .article-area{padding:0}
  .article-title{font-size:20px}
  .title-decor{width:54px;margin-bottom:10px}

  /* FAQ 单列 */
  .faq-section .faq-grid{grid-template-columns:1fr}

  /* 相关阅读单列（自然重排） */
  .related-section .related-grid{grid-template-columns:1fr}

  /* 避免横向滚动：各区块宽度自适应 */
  .article-content{font-size:16px}
  .ad-slot{font-size:13px}

  /* header 导航压缩为更简洁行 */
  .top-nav{font-size:13px}
  .top-nav .nav-left,.top-nav .nav-right{display:none}
  .top-nav .nav-center{font-size:15px}
}

/* 辅助：确保无大面积纯色 Hero（forbidden_pattern） */
/* 不设置占满首屏的大图或纯色背景，整体以象牙白与细线构成页面 */

/* 可访问性与阅读舒适度小细节 */
.article-content img{max-width:100%;height:auto}
.article-content blockquote{margin:12px 0;padding-left:12px;border-left:3px solid rgba(69,50,74,0.1);color:var(--muted)}