:root{
  --brick: #b33a2b; /* 砖红 */
  --sand: #f5efe6;  /* 砂岩白 */
  --text: #222222;
  --muted: #6a6a6a;
  --line: #ded6cd; /* 细线 */
  --max-read-width: 820px;
  --site-gutter: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* Reset-ish minimal */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--sand);color:var(--text)}
a{color:var(--brick);text-decoration:none}
.header-line{border-bottom:1px solid var(--line);background:transparent;padding:12px 16px}
.brand{font-weight:600;color:var(--brick);display:inline-block}

.page-wrap{padding:18px 12px}
.container{margin:18px auto;display:grid;grid-template-columns:1fr;gap:20px;align-items:start;max-width:1200px}

/* Article / aside baseline */
.article{background:transparent;border:0;padding:0}
.headline{display:block;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.title{font-size:1.6rem;margin:0 0 6px 0;line-height:1.12;font-weight:700}
.meta-side{font-size:0.85rem;color:var(--muted);display:block}
.meta-side .meta-line{margin:4px 0}
.summary h2,.body h2,.faq h2,.related h2{font-size:1rem;margin:8px 0;color:var(--brick);font-weight:600}
.summary-text{margin:8px 0 12px 0;color:var(--muted)}
.content{max-width:var(--max-read-width);color:var(--text)}
.content > *:first-child{margin-top:0}
.content p{margin:0 0 12px 0}

.ad-container{border:1px solid var(--line);background:transparent;padding:10px;margin:12px 0}
.ad-top,.ad-middle,.ad-bottom{background:transparent}

.faq-list{margin-top:8px}
.faq-list > *{padding:10px 0}
.faq-list > * + *{border-top:1px solid var(--line)}

.related-grid{display:flex;flex-direction:column;gap:8px}
.related-grid > *{padding:10px;border:1px solid var(--line);background:transparent;display:block}

.site-footer{border-top:1px solid var(--line);padding:12px;text-align:center;color:var(--muted);font-size:0.9rem}

/* Desktop: distinct two-column asymmetric layout, title with narrow meta column to the right */
@media (min-width: 1024px){
  .page-wrap{padding:28px 0}
  .container{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;justify-content:center; width: clamp(1120px, 72vw, 1440px);}

  /* headline becomes two-column: title and narrow meta */
  .headline{display:grid;grid-template-columns:1fr 240px;gap:18px;align-items:start;border-bottom:0;padding-bottom:0;margin-bottom:8px}
  .title{font-size:2.25rem;line-height:1.02}
  .meta-side{justify-self:end;text-align:right}
  .summary,.body{max-width:100%}

  /* Article occupies left column, aside on right already via grid */
  .article{grid-column:1 / 2}
  .related{grid-column:2 / 3}

  /* Content uses wider measure for comfortable reading */
  .content{max-width:900px}

  /* FAQ adopts alternating width feel: make answers use wider measure while the list header anchors */
  .faq-list{max-width:900px}

  /* Related pattern: three short cards stacked into a column on the right but visually compact - on desktop we keep a vertical list (editorial choice) */
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .related-grid > *{padding:10px}
}

/* Mobile: compact continuous stack, avoid first-screen blank, sidebars collapse under article */
@media (max-width: 767px){
  :root{font-size:15px}
  .container{padding:0 12px;grid-template-columns:1fr;gap:12px;margin:8px auto;width:100%}

  .header-line{padding:10px 12px}
  .headline{display:block;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .title{font-size:1.15rem}
  .meta-side{display:block;margin-top:6px;color:var(--muted);font-size:0.85rem}

  .summary,.body{padding:0}
  .content{font-size:0.98rem}

  /* Ensure related becomes a three-column grid only if space allows; else 2/1 */
  .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  @media (max-width:420px){
    .related-grid{grid-template-columns:1fr}
  }

  /* Ads are non-intrusive independent blocks */
  .ad-container{margin-left:0;margin-right:0}
}

/* Accessibility / readability tweaks */
h1,h2{margin:0}

/* Visual signature: all straight corners, thin lines only */
*{border-radius:0}