:root{
  --bg-cream:#F4EEE6; /* 奶油白 */
  --deep-brown:#4B2E2A; /* 深棕 */
  --paper:#FFFFFF; /* 正文纯白 */
  --muted:#7a6b66;
  --accent:var(--deep-brown);
  --max-desktop-width:1200px; /* 在 1120-1440 区间内选择中段 */
  --gutter:28px;
  --safe-padding:16px;
  --rule:#E6DDD6;
  box-sizing: border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;color:#2b2b2b;background:var(--bg-cream);}
a{color:inherit;text-decoration:none}
/* Header */
.site-header{background:var(--deep-brown);color:var(--paper);padding:18px var(--safe-padding) 0;border-bottom:4px solid rgba(0,0,0,0.06)}
.header-top{display:flex;align-items:center;justify-content:flex-start;gap:18px}
.brand{font-weight:700;letter-spacing:0.6px;color:var(--paper);font-size:18px}
.mini-nav{margin-left:auto;font-size:13px}
.mini-nav a{color:rgba(255,255,255,0.92)}
.header-slim{height:6px;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));margin-top:10px}

/* Ads simple neutral blocks */
.ad-container{max-width:var(--max-desktop-width);margin:18px auto;padding:8px;display:block;color:#666;font-size:13px}
.ad-container > *{display:inline}

/* Page shell and sheet */
.page-shell{padding:30px 16px 60px}
.page-container{max-width:var(--max-desktop-width);margin:0 auto}
.sheet{background:var(--paper);display:block;padding:28px;box-sizing:border-box;border:1px solid var(--rule)}
.article-header{margin-bottom:10px}

/* Title composition: 超大但受宽度约束；桌面越界，手机内收回 */
h1{font-size:clamp(22px,4.6vw,44px);line-height:1.05;margin:0 0 12px 0;font-weight:700;color:#1f1413;letter-spacing:-0.02em;max-width:100%;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin:10px 0}
.meta time{background:transparent}
.keyword-block{padding:6px 8px;border:1px solid var(--rule);background:#fff;font-size:12px}

/* 摘要窄色带：视觉签名 */
.summary-band{display:block;background:var(--accent);color:var(--paper);padding:10px 12px;font-size:15px;margin:6px 0 18px;border-left:4px solid rgba(0,0,0,0.04);max-width:100%}

.article-body .content{color:#222;line-height:1.75;font-size:16px}
.article-body .content p{margin:0 0 1em}

/* FAQ pattern: 桌面左右表格，手机堆叠 */
.faq{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.faq h2{font-size:18px;margin:0 0 12px}
.faq-list{display:block}
.faq-list dl, .faq-list .faq-item{margin:0}
/* styles for common structures (dl or custom pairs) */
.faq-list dl{display:grid;grid-template-columns:1fr;gap:12px}
.faq-list dt{font-weight:600}
.faq-list dd{margin:0 0 12px 0;color:#333}

.related{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.related h3{font-size:15px;margin:0 0 10px}
.related-list{list-style:none;padding:0;margin:0;border-top:0}
.related-list li{padding:12px 0;border-bottom:1px dashed var(--rule);display:flex;justify-content:space-between;gap:12px}
.related-list li time{color:var(--muted);font-size:13px}

.site-footer{padding:22px 0;text-align:center;color:var(--muted);font-size:13px}

/* Desktop specific: 非对称网格、纸张偏移、标题越界、右侧窄边注 */
@media (min-width:1024px){
  .page-shell{padding:60px 20px}
  .page-container{max-width:var(--max-desktop-width);}
  /* use a two-column layout where article main column is wider and a narrow side column exists visually on the right */
  .sheet{display:grid;grid-template-columns:1fr 280px;gap:28px;padding:36px;align-items:start}
  /* make the left 'paper' appear offset (title向左越出正文基线) */
  .sheet{position:relative}
  .sheet::before{content:"";position:absolute;inset:auto -28px auto auto;width:28px}
  /* Title offset: move left outside the left column baseline */
  .article-header h1{transform:translateX(-56px);}
  /* Right narrow aside styling (square info blocks) */
  .sheet > aside.related{background:transparent;padding:0;margin:0;border:0}
  .sheet > aside.related .related-list li{display:flex;flex-direction:row;align-items:center}

  /* Make FAQ into two-column table-like layout when dl present */
  .faq-list dl{grid-template-columns:220px 1fr;align-items:start}
  .faq-list dt{padding-right:12px;border-right:1px solid var(--rule);margin-bottom:6px}
  .faq-list dd{padding-left:12px}
}

/* Mobile specific: 320px safe layout,取消偏移*/
@media (max-width:767px){
  .site-header{padding:12px 14px 0}
  .header-slim{display:none}
  .page-shell{padding:14px 12px 40px}
  .page-container{padding:0}
  .sheet{display:block;padding:16px;border:0}
  .article-header h1{transform:none;font-size:20px;line-height:1.12}
  .summary-band{margin:10px 0;padding:10px;font-size:14px}
  .meta{flex-direction:column;align-items:flex-start}
  .article-body .content{font-size:16px}
  .faq-list dl{grid-template-columns:1fr}
  .faq-list dt{border-right:0;padding-right:0}
  .faq-list dd{padding-left:0}
  .related-list li{flex-direction:column;align-items:flex-start}
  /* ensure no horizontal overflow at 320px */
  body,html{overflow-x:hidden;-webkit-text-size-adjust:100%}
}

/* Accessibility and density tweaks */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Small utility */
.clearfix::after{content:"";display:table;clear:both}