/* Palette and variables */
:root{
  --brick:#b23a2f; /* 砖红 */
  --sand:#f5efe6;  /* 砂岩白 */
  --muted:#7a6b63;
  --text:#222;
  --accent:var(--brick);
  --content-width:820px; /* 目标正文宽度 */
  --gutter:28px;
  --base-font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --serif-stack: Georgia, "Times New Roman", serif;
}

/* Base resets */
*{box-sizing:border-box}
html,body{height:100%;background:var(--sand);color:var(--text);font-family:var(--base-font-stack);margin:0}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto}

.site-shell{max-width:1280px;margin:18px auto;border:1px solid rgba(0,0,0,0.06);background:transparent;padding:0 12px}

/* Header: 左右分置的编辑部报头 */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px 8px;border-bottom:1px solid rgba(0,0,0,0.06);gap:12px}
.mast-left{display:flex;flex-direction:column;align-items:flex-start}
.home-link{font-family:var(--serif-stack);font-size:20px;font-weight:700;color:var(--brick)}
.mast-note{font-size:12px;color:var(--muted);margin-top:6px}
.mast-right{display:flex;flex-direction:column;align-items:flex-end}
.site-id{font-size:12px;color:var(--muted)}
.mini-nav a{font-size:13px;color:var(--muted)}

/* Layout: 左侧纵向刊头 + 主区 */
.layout{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 8px}

.chapter-track{border-right:1px solid rgba(0,0,0,0.06);padding-right:18px}
.track-title{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif-stack);color:var(--accent);font-weight:700;letter-spacing:1px}
.track-body{margin-top:10px;color:var(--muted);font-size:13px}

.content-area{padding-left:12px}

/* Title composition: 标题居中, 摘要左对齐 */
.article-header h1{font-family:var(--serif-stack);font-size:30px;line-height:1.12;margin:8px 0 12px;text-align:center;color:var(--text)}
.article-header .meta-row{display:flex;gap:12px;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.article-header .summary{max-width:var(--content-width);margin:0 auto 18px;text-align:left;padding:12px;border:1px solid rgba(0,0,0,0.04);background:#fff;font-size:15px}

/* Article body: 正文区使用双层基线网格感 */
.article-body{max-width:var(--content-width);margin:0 auto;padding:18px 12px}
.content-frame{background:transparent;padding:6px 0;color:var(--text);font-size:17px;line-height:1.9;letter-spacing:0.2px}

/* 双层基线网格：两层细线更接近纸张感，保持轻量 */
.content-frame{
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0 0.5px, transparent 0.5px 48px);
  background-position: left top;
}

/* Ensure paragraphs are readable and spacious (人文杂志宽松型) */
.content-frame p{margin:0 0 1.1rem}
.content-frame h2, .content-frame h3{margin:1.2rem 0 0.5rem;font-family:var(--serif-stack);color:var(--brick)}
.content-frame ul, .content-frame ol{margin:0 0 1rem 1.2rem}

/* Ad containers: 保持独立，不覆盖内容 */
.top-ad, .ad-middle, .ad-bottom{background:rgba(178,58,47,0.06);border:1px dashed rgba(178,58,47,0.12);color:var(--muted);padding:10px;margin:12px 0;border-radius:2px;font-size:13px}
.top-ad{margin-bottom:0}

/* FAQ pattern: 无卡片的details折叠列表 */
.faq{max-width:var(--content-width);margin:18px auto;padding:6px}
.faq .section-title{font-size:18px;color:var(--brick);margin:6px 0}
.faq-list details{border-top:1px solid rgba(0,0,0,0.04);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;list-style:none;outline:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list details[open] summary{color:var(--brick)}
.faq-list details p{margin:8px 0 0;color:var(--muted)}

/* Related: 四列紧凑标题网格 */
.related{max-width:var(--content-width);margin:18px auto;padding:6px}
.related .section-title{font-size:18px;color:var(--brick);margin:6px 0}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.related-grid > *{font-size:14px;padding:8px;border:1px solid rgba(0,0,0,0.04);background:#fff}

/* Footer */
.site-footer{padding:14px;border-top:1px solid rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center}
.footer-meta{font-size:13px;color:var(--muted)}

/* Typography density: 舒展 */
body{font-size:16px}

/* --- Desktop rules (min-width:1024px) --- */
@media (min-width:1024px){
  .site-shell{max-width:1360px}
  .layout{grid-template-columns:200px calc(100% - 200px);padding:28px}
  .chapter-track{padding-right:22px}
  /* 主体侧右起排，正文约820px */
  .content-area{display:block}
  .article-body{max-width:var(--content-width);}
  /* FAQ 与 推荐跨越主内容宽度：在桌面上，faq和related扩展到主区宽度（已设置为content-width并居中） */
  .related-grid{grid-template-columns:repeat(4,1fr)}
}

/* --- Mobile rules (max-width:767px) --- */
@media (max-width:767px){
  .site-shell{margin:8px}
  .layout{grid-template-columns:1fr;gap:12px;padding:12px}
  .chapter-track{order:2;border-right:0;border-top:1px solid rgba(0,0,0,0.06);padding:10px 0}
  /* 章节轨道变成标题下方横线 */
  .chapter-track .track-title{writing-mode:horizontal-tb;text-orientation:initial;font-size:13px}
  .track-body{display:flex;flex-wrap:wrap;gap:8px}
  .content-area{order:3;padding-left:0}
  .article-header h1{text-align:center;font-size:22px}
  .article-header .summary{max-width:100%;margin:8px 0;padding:10px}
  .article-body{max-width:100%;padding:8px}
  .content-frame{font-size:16px;line-height:1.8}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .related-grid > *{padding:10px}
  .faq, .related{padding:6px}
  .mast-left, .mast-right{align-items:flex-start}
  .meta-row{flex-direction:column;align-items:center}
}

/* Ensure no horizontal overflow at narrowest widths */
@media (max-width:320px){
  .site-shell{padding:6px}
  .article-header .summary{padding:8px}
  .content-frame{padding-right:6px;padding-left:6px}
}