/* Palette and core variables */
:root{
  --bg-cream:#FBF6EF;
  --ink-deep:#3B2A24; /* 深棕 */
  --muted:#6b5a52;
  --accent:#8c6b57;
  --max-desktop-width:1200px;
  --page-padding:24px;
  --line:1.45;
}

/* Reset-ish minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-cream);
  color:var(--ink-deep);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line);
  font-size:16px;
}

a{color:var(--ink-deep);text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header: 两层报头，第二层极窄 */
.site-header{padding-top:16px;padding-bottom:8px;text-align:center}
.header-row-top{font-weight:700;color:var(--ink-deep);font-family: Georgia, 'Times New Roman', Times, serif}
.site-name{font-size:18px}
.header-row-nav{margin-top:8px;border-top:1px solid rgba(59,42,36,0.08);padding-top:8px}
.nav-line{font-size:13px;color:var(--muted);letter-spacing:0.02em}
.nav-path{padding:2px 6px}

/* Page container - responsive; desktop constrained between 1120 and 1440 per contract */
.page-wrap{width:100%;margin:0 auto;padding:12px var(--page-padding) 48px}

/* Article grid: desktop dual-column editorial layout */
.article-grid{display:block;max-width:100%;margin:0 auto}
.article-head{margin-bottom:10px}

.title{
  margin:6px 0 8px 0;
  color:var(--ink-deep);
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight:700;
  line-height:1.05;
  font-size:28px; /* larger, but responsive in media queries */
  letter-spacing:-0.01em;
}

.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.summary{margin:0 0 14px 0;color:var(--muted);font-size:15px}

/* Main column and side (FAQ) */
.article-grid{display:grid;grid-template-columns:1fr;grid-gap:28px;align-items:start}
.main-col{grid-column:1/2}
.side-col{grid-column:1/2}

.content{color:var(--ink-deep);font-size:16px;line-height:1.68}
.content p{margin:0 0 1em 0}

/* Visual signature: first paragraph first-letter subtle emphasis */
.content p:first-of-type::first-letter{
  color:var(--accent);
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size:1.18em;
  font-weight:600;
  padding-right:4px;
  float:left;
  line-height:1;
}

/* Related list: separated lines, date area styling left to provided content */
.related{margin-top:22px;border-top:1px solid rgba(59,42,36,0.06);padding-top:14px}
.related-list>*{display:block;padding:10px 0;border-bottom:1px solid rgba(59,42,36,0.04)}
.related-list>*:last-child{border-bottom:0}
.related-list a{display:block;color:var(--ink-deep)}
.related-list .meta{color:var(--muted);font-size:13px}

/* FAQ pattern: horizontal rule like Q/A list */
.faq h2{font-size:16px;margin:0 0 10px 0;color:var(--ink-deep)}
.faq-list > *{padding:12px 0;border-top:1px solid rgba(59,42,36,0.06)}
.faq-list > *:first-child{border-top:0}
.faq-list strong{display:block;color:var(--ink-deep)}
.faq-list p{margin:6px 0 0 0;color:var(--muted)}

/* Ad slots as neutral blocks, never floating */
.ad-slot{background:transparent;border:1px dashed rgba(59,42,36,0.06);padding:10px;margin:18px 0;color:var(--muted);font-size:13px}
.ad-top{margin:8px auto 18px}
.ad-middle{margin:18px 0}
.ad-bottom{margin:28px 0}

/* Footer */
.site-footer{border-top:1px solid rgba(59,42,36,0.06);padding:14px 12px;text-align:center;color:var(--muted);font-size:13px}

/* Desktop rules */
@media (min-width:1024px){
  .page-wrap{padding:20px;}
  .article-grid{grid-template-columns: minmax(0,1fr) 320px;grid-gap:32px;align-items:start;width:clamp(1120px,80vw,1400px);}

  .title{font-size:40px;max-height:calc(2 * 1.05em * 40px / 28px); /* encourage two-line visual */}
  .summary{font-size:16px}
  .content{font-size:17px;line-height:1.7}

  /* Place FAQ in side column (宽窄交替布局) */
  .side-col{padding-left:8px}
  .faq{position:relative}
  .related{grid-column:1/3}
  .ad-top{max-width:var(--max-desktop-width);margin-left:auto;margin-right:auto}
}

/* Mobile rules */
@media (max-width:767px){
  :root{--page-padding:12px}
  .page-wrap{padding:8px 14px 28px}
  .header-row-top{font-size:16px}
  .header-row-nav{display:block}
  .title{font-size:20px;line-height:1.08;margin-top:6px}
  .meta{font-size:12px}
  .summary{font-size:14px;margin-bottom:10px}

  /* Stack: single column flow, FAQ flows under content */
  .article-grid{grid-template-columns:1fr;grid-gap:14px}
  .side-col{order:3}
  .related{order:4}

  .content{font-size:15px}
  .ad-top,.ad-middle,.ad-bottom{font-size:13px;padding:8px}
  .site-footer{font-size:12px;padding:12px}

  /* Ensure no horizontal scroll at narrow widths */
  img,table,iframe,pre{max-width:100%;overflow:auto}
}

/* Density and surface: avoid card containers; subtle separators */
.article-head, .content, .faq, .related{background:transparent}

/* Forbidden-pattern guard: avoid capsule tags style by default */
.badge, .tag{display:inline-block;padding:0;border-radius:0;background:transparent}

/* Accessibility small touches */
.title{word-break:break-word}
.content p, .summary{orphans:2;widows:2}