:root{
  --brick:#b33b2e; /* 砖红 */
  --sand:#f6efe6;  /* 砂岩白 */
  --text:#222;
  --muted:#6b6b6b;
  --border:rgba(34,34,34,0.08);
  --radius:2px;
  --max-desktop:1320px;
  --gap:20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
}
*,:before,:after{box-sizing:inherit}
html,body{height:100%;margin:0;background:var(--sand);color:var(--text);-webkit-font-smoothing:antialiased}
.container{width:100%;padding:18px;max-width:calc(var(--max-desktop));margin:0 auto}
.header-inner, .footer-inner{display:flex;align-items:center;justify-content:center}
.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.site-title{font-weight:600;color:var(--text);letter-spacing:0.2px}
.site-title .home-link{color:var(--text);text-decoration:none}
.mini-nav{margin-left:12px;color:var(--muted);font-size:12px}
.ad-slot{max-width:var(--max-desktop);margin:14px auto;padding:10px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13px}
.main-content{padding-top:18px;padding-bottom:18px}
.article-surface{background:transparent;border-radius:var(--radius);border:1px solid var(--border);padding:14px}

/* Split headline */
.split-headline{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.eyebrow{font-size:13px;color:var(--muted);margin-bottom:6px}
h1{font-size:22px;line-height:1.18;margin:0;color:var(--text);font-weight:700}
/* visual_signature: 标题首字使用强调色 */
h1::first-letter{color:var(--brick);font-weight:800}
.meta{margin-top:8px;font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.headline-right .summary-title{margin:0 0 6px 0;font-size:14px;color:var(--muted)}
.summary{margin:0;color:var(--text);font-size:15px;line-height:1.6}

/* Content region grid (will become 7/5 on desktop) */
.content-region{margin-top:18px}
.grid-article{display:block}
.main-col{width:100%}
.content-body{color:var(--text);font-size:16px;line-height:1.78}
.content-body :first-child{margin-top:0}
.content-body p{margin:0 0 12px}

.side-col{margin-top:16px}
.side-col h3{margin:0 0 10px 0;font-size:15px;color:var(--muted)}

.faq-wrapper{border:1px solid var(--border);border-radius:var(--radius);padding:8px;background:transparent}
.faq-wrapper summary{font-weight:600;cursor:pointer;color:var(--text);margin:0}
.faq-list{margin-top:8px;color:var(--text);font-size:15px}
.related-grid{list-style:none;padding:0;margin:8px 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.related-grid li{font-size:14px;color:var(--muted)}
.related-title{margin:0 0 6px 0;font-size:14px;color:var(--muted)}

.site-footer{margin-top:20px;padding:18px 0;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}

/* Desktop specific (>=1024px): implement required split and 7/5 grid */
@media (min-width:1024px){
  .container{padding:28px;max-width:1200px}
  .split-headline{grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .headline-left{padding-right:10px}
  .headline-right{padding-left:10px;border-left:1px solid var(--border)}

  .grid-article{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
  .main-col{padding-right:6px}
  .side-col{padding-left:6px}

  .content-body{font-size:17px}
  .related-grid{grid-template-columns:1fr 1fr}
}

/* Mobile specific (<=767px): stack and ensure no horizontal scroll; increase density per contract */
@media (max-width:767px){
  :root{--gap:12px}
  .container{padding:12px}
  .split-headline{grid-template-columns:1fr;gap:8px}
  h1{font-size:18px}
  .eyebrow{font-size:12px}
  .headline-right{border-left:none;padding-left:0}
  .grid-article{display:block}
  .side-col{margin-top:12px}
  .related-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ad-slot{margin-left:0;margin-right:0}
}

/* Accessibility and density tweaks */
a{color:var(--brick)}
button,summary{outline-offset:3px}
summary{list-style:none}

/* Prevent overflow */
img,iframe,video{max-width:100%;height:auto}
body,html{word-break:break-word}
