:root{
  --brick:#9b322b; /* 砖红 */
  --sand:#f7efe6; /* 砂岩白 */
  --text:#222;
  --muted:#666;
  --accent:var(--brick);
  --max-width:1280px; /* 在1120-1440之间，取中间值 */
  --gutter:24px;
  --content-line:24px; /* 基线高度 */
}
/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color:var(--text);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  padding:0 8px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header */
.site-header{background:transparent;padding:12px 0 8px}
.header-row{display:flex;align-items:center;gap:16px;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.brand{flex:0 0 auto}
.brand-link{font-weight:700;color:var(--brick);font-family: "Times New Roman", Georgia, "宋体", serif;font-size:1.05rem}
.index-bar{margin-left:auto}
.index-bar ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center}
.index-bar a{font-size:0.95rem}
.index-bar span{color:var(--muted);font-size:0.95rem}

/* Page frame and inner grid - default mobile-first stack */
.page-frame{width:100%;}
.inner{max-width:var(--max-width);margin:0 auto;display:block;padding:0 var(--gutter)}
.article{background:transparent;padding:6px 0}
.article-header{margin-bottom:8px}

/* Title composition: serif title, large but responsive to avoid overflowing more than two lines on normal widths */
.title{
  margin:4px 0 8px 0;
  font-family: "Times New Roman", Georgia, "Songti SC", serif;
  color:var(--brick);
  font-weight:700;
  line-height:1.05;
  /* fluid size: won't grow beyond two lines usually */
  font-size:clamp(1.4rem, 5vw, 2.6rem);
  letter-spacing:0.2px;
  margin-bottom:6px;
}
.meta{display:flex;gap:12px;flex-wrap:wrap;font-size:0.9rem;color:var(--muted);margin-bottom:8px}
.summary{margin:0 0 12px 0;color:var(--muted);font-size:1rem}

/* Content area with dual baseline grid visual signature */
.content{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background-image: 
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent var(--content-line)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.01) 0.5px, transparent 0.5px, transparent calc(var(--content-line)/2));
  background-position: left top;
  background-repeat:repeat-x;
  padding:18px 8px;
  line-height:1.55;
  font-size:1rem;
  border-top:1px solid rgba(0,0,0,0.06);
}
.content > *:first-child{margin-top:0}
.content p{margin:0 0 12px 0}
.content h2,.content h3{margin:18px 0 8px 0}
.content ul, .content ol{margin:0 0 12px 24px}

/* FAQ (details list style as required) */
.faq-list details{border-top:1px solid rgba(0,0,0,0.06);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--accent);outline:none}
.faq-list details[open] summary{color:var(--brick)}
.faq-list details p{margin:8px 0 0 0;color:var(--muted)}

/* Related grid (bottom) - three column on wide, stacked on mobile */
.related-section{margin-top:18px}
.related-title{font-size:1rem;color:var(--muted);margin:0 0 8px 0}
.related-grid{display:grid;grid-template-columns:1fr;gap:10px}
.related-grid a{display:block;padding:10px;background:transparent;border:1px solid rgba(0,0,0,0.04);text-decoration:none;color:var(--text);font-size:0.95rem}
.related-grid a h4{margin:0 0 4px 0;font-size:0.95rem}

/* Side area (mobile: below header flow) */
.side{margin-top:18px}
.side-inner{background:transparent;padding:0}
.side-block{padding:8px 0;border-top:1px solid rgba(0,0,0,0.04)}
.side-block h4{margin:0 0 6px 0;font-size:0.95rem;color:var(--muted)}
.side .kw{margin:0;color:var(--text);font-size:0.95rem}
.side .note{margin:0;color:var(--muted);font-size:0.88rem}

/* Ads - kept independent and non-intrusive */
.ad{max-width:var(--max-width);margin:14px auto;padding:8px var(--gutter);color:var(--muted);font-size:0.95rem}
.ad-top{margin-top:6px}
.ad-bottom{margin-bottom:18px}
.ad-middle{margin:18px 0}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:14px 0;margin-top:18px}
.foot-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);color:var(--muted);font-size:0.9rem}

/* DESKTOP layout - distinct structure per blueprint: 10/2 grid, no card, narrow header, wide title, edge side-note */
@media (min-width:1024px){
  body{padding:0}
  .header-row{padding:0 24px}
  .inner{display:grid;grid-template-columns:10fr 2fr;gap:28px;align-items:start;padding:0 24px}
  .article{padding:18px 0}
  .article .content{padding:22px 30px;background-color:transparent}
  /* ensure main container uses specified width range */
  .inner{max-width:var(--max-width);}
  /* place aside visually as a narrow edge column (2fr) */
  .side{position:relative;top:8px}
  .side-inner{padding-left:12px}
  /* related: three columns short cards without shadow */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .related-grid a{padding:12px;border-left:4px solid transparent}
  /* Increase title scale on desktop but keep two-line intent via clamp */
  .title{font-size:clamp(1.8rem,3.2vw,3.2rem);}
  /* tighten density */
  .content{line-height:1.6;padding:26px 28px}
}

/* MOBILE layout rules - independent reflow, side note folded under title */
@media (max-width:767px){
  .inner{display:block;padding:0 14px}
  .title{font-size:1.6rem}
  .meta{font-size:0.85rem}
  .content{padding:14px 6px;background-image: 
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 18px),
    none}
  .side{margin-top:8px}
  .related-grid{grid-template-columns:1fr}
  .index-bar ul{gap:10px}
  /* ensure no horizontal scroll at narrow widths */
  body,html{overflow-x:hidden}
}

/* Accessibility and focus */
a:focus, button:focus, summary:focus{outline:2px dashed var(--accent);outline-offset:2px}