/* 主题变量（深棕与奶油白） */
:root{
  --brown-900:#3f2a23;
  --brown-700:#5a3f36;
  --cream:#fff7ec;
  --muted:#7a6b63;
  --border: #e6d7cc;
  --max-read-width: 1140px;
  --baseline: 24px; /* 用于双层基线网格 */
  --content-gap: 24px;
  --masthead-width: 220px;
  --type-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基本重置和可访问性 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-sans);
  color:var(--brown-900);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}
a{color:var(--brown-700);text-decoration:none}
a:hover{text-decoration:underline}
.page-root{min-height:100vh;display:grid;grid-template-columns:1fr;}

/* Masthead */
.masthead{background:transparent;border-right:1px solid var(--border);}
.masthead-inner{display:flex;flex-direction:column;align-items:center;padding:20px 12px;}
.site-home{font-weight:700;color:var(--brown-900);font-size:18px}
.masthead-line{width:100%;height:1px;background:linear-gradient(90deg,var(--border),transparent);margin-top:12px;margin-bottom:12px}
.masthead-mini{font-size:13px;color:var(--muted)}
.masthead-mini .home-link{display:inline-block}

/* Article area */
.article-area{padding:20px;}
.article{max-width:var(--max-read-width);margin:0 auto}
.article-header{margin-bottom:16px}
.title-split{display:block}
.title{font-size:22px;margin:0;color:var(--brown-900);line-height:1.15}
.summary{margin:8px 0 0;color:var(--muted);font-size:15px}
.meta-row{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);margin-top:10px}
.meta-row time{white-space:nowrap}

/* Ads: independent blocks, non-floating */
.ad-slot{border:1px dashed var(--border);background:transparent;color:var(--muted);padding:10px;margin:18px 0}

/* Article grid: main content + side column (9/3 grid) */
.article-grid{display:block}
.content-column{order:1}
.side-column{order:2}
.content-surface{background:linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0% );
  padding:0;margin:0}

/* 双层基线网格视觉签名：细微规则刻度线，不用于信息分级，仅作排版参考 */
.content-column .content-surface{
  padding: calc(var(--content-gap));
  border:1px solid var(--border);
  background:linear-gradient(transparent calc(var(--baseline) - 1px), rgba(0,0,0,0.02) calc(var(--baseline) - 1px), rgba(0,0,0,0.02) var(--baseline), transparent var(--baseline));
  background-color:rgba(255,247,236,0.8);
  background-size:100% var(--baseline);
}

.content-surface p, .content-surface h2, .content-surface h3, .content-surface ul, .content-surface ol{margin-top:0;margin-bottom:1rem}

/* FAQ 横线问答列表 */
.faq-section h2{font-size:18px;margin:18px 0}
.faq-list > *{padding:12px 0;border-top:1px solid var(--border)}
.faq-list > *:first-child{border-top:0}
.faq-list dt{font-weight:600}
.faq-list dd{margin:8px 0 0;color:var(--muted)}

/* 相关阅读：底部三列短卡但不用阴影 */
.related-section{margin-top:22px}
.related-section h3{font-size:16px;margin-bottom:12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{border:1px solid var(--border);padding:10px;background:#fff;border-radius:2px;font-size:14px}

/* 侧栏小块 */
.side-column{padding-left:18px}
.side-block{border:1px solid var(--border);padding:12px;margin-bottom:12px;background:#fff}
.side-title{font-size:13px;margin:0 0 8px 0}
.side-text{font-size:14px;color:var(--muted)}

/* Footer */
.site-footer{margin-top:28px;padding:18px 0;color:var(--muted);font-size:13px;text-align:center}

/* Desktop 专用布局（>=1024px）-- 左侧纵向刊头约220px贯穿页面；文章区内正文与边注 9/3 网格；标题与摘要左右分置 */
@media (min-width:1024px){
  .page-root{grid-template-columns:var(--masthead-width) 1fr}
  .masthead{position:sticky;top:0;height:100vh;align-self:stretch;display:flex}
  .article-area{padding:40px}
  .article{margin-left:0}

  /* 标题与摘要左右分置：标题左、摘要右 */
  .title-split{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
  .title{font-size:28px}
  .summary{margin:0;color:var(--muted);font-size:15px}

  /* 9/3 网格：正文占9份、边注占3份 */
  .article-grid{display:grid;grid-template-columns:3fr 1fr;gap:24px;margin-top:18px}
  .content-column{min-width:0}
  .side-column{width:100%}

  /* 相关阅读三列卡片保持 */
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 手机专用布局（<=767px）-- 纵向刊头还原为顶部横条，正文、边注、FAQ和推荐依次单列 */
@media (max-width:767px){
  :root{--content-gap:16px}
  .page-root{grid-template-columns:1fr}
  .masthead{border-right:0;border-bottom:1px solid var(--border)}
  .masthead-inner{flex-direction:row;justify-content:space-between;width:100%;padding:12px 16px}
  .site-home{font-size:16px}

  .article-area{padding:12px}
  .article{width:100%}

  .title-split{display:block}
  .title{font-size:20px}
  .summary{font-size:14px}

  .article-grid{display:block}
  .content-column{order:1}
  .side-column{order:2;padding-left:0}
  .side-column .side-block{margin-top:12px}

  .related-grid{grid-template-columns:repeat(1,1fr)}

  /* 保证在 320px 不横向滚动 */
  .content-surface{padding:12px;overflow-wrap:break-word}
  .related-grid > *{font-size:14px}
}

/* 中等宽度避开极端折叠（768px - 1023px） */
@media (min-width:768px) and (max-width:1023px){
  .page-root{grid-template-columns:1fr}
  .masthead{border-bottom:1px solid var(--border)}
  .masthead-inner{flex-direction:row;justify-content:space-between;padding:16px}
  .title-split{display:block}
  .article-grid{display:block}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

/* 可访问性微调 */
.title, .summary{word-break:break-word}