/* Palette & base tokens */
:root{
  --bg:#f6efe6; /* 奶油白 */
  --ink:#3b2b20; /* 深棕 */
  --muted:#7a6658;
  --accent:#b98b6d; /* narrow band */
  --max-width:1280px; /* within 1120-1440 */
  --gutter:28px;
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* Reset lightweight */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-system);-webkit-font-smoothing:antialiased}

.layout-root{display:flex;min-height:100vh}

/* Left vertical masthead (only visual nav, compact) */
.masthead{width:180px;min-width:160px;padding:28px 18px;border-right:1px solid rgba(0,0,0,0.04);background:transparent;display:flex;flex-direction:column;gap:18px}
.masthead .brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:18px}
.side-nav ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:14px}
.side-nav li{padding:6px 0}

/* Center wrap houses header, main, footer and constrains width */
.center-wrap{flex:1;display:flex;flex-direction:column;align-items:center}
.page-header{width:100%;max-width:var(--max-width);padding:18px var(--gutter);box-sizing:border-box}
.brand-line{display:flex;align-items:center;gap:12px}
.brand-short{font-weight:600;color:var(--muted);font-size:13px}

.page-main{width:100%;max-width:var(--max-width);padding:0 var(--gutter) 44px;box-sizing:border-box}

/* Ads are inline blocks, non-floating */
.ad{width:100%;padding:12px 0;color:var(--muted);font-size:13px}
.ad-top{margin-bottom:6px}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:18px}

/* Article grid: desktop will become 10/2 via inner grid */
.article{padding:6px 0 0}
.article-grid{display:grid;grid-template-columns:1fr;gap:20px}

.title{font-size:28px;line-height:1.18;margin:6px 0 10px;color:var(--ink);font-weight:700}
.eyebrow{font-size:13px;color:var(--muted);margin:0 0 6px}
.meta{display:flex;gap:12px;font-size:13px;color:var(--muted);align-items:center;margin-bottom:8px}
.summary-band{height:6px;width:68px;background:var(--accent);margin:8px 0;border-radius:2px}
.summary{margin:6px 0 18px;color:var(--ink);font-size:15px;max-width:70%}

.content{color:var(--ink);line-height:1.7;font-size:16px}
.content :where(p,ul,ol,blockquote){margin:0 0 1em}

.section-title{font-size:16px;margin:12px 0 10px;color:var(--ink);font-weight:600}

/* Edge note (side column) */
.edge-note{display:flex;flex-direction:column;gap:16px;padding-left:18px}
.edge-title{font-size:13px;color:var(--muted);margin:0 0 6px}
.edge-text{font-size:14px;margin:0;color:var(--ink)}
.edge-text.small{font-size:13px;color:var(--muted)}

/* FAQ: will render faq HTML provided; set table-like grid for desktop */
.faq-grid{display:block}

/* Related: bottom three-column short cards pattern (no shadow) */
.related{margin-top:22px}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}

.page-footer{width:100%;max-width:var(--max-width);padding:18px var(--gutter);box-sizing:border-box;color:var(--muted);font-size:13px}

/* --- Desktop layout (>=1024px) --- */
@media (min-width:1024px){
  :root{--gutter:32px}
  .center-wrap{align-items:stretch}
  .page-main{padding-top:8px}

  /* The central region: establish the 10/2 grid inside article-grid */
  .article-grid{grid-template-columns:1fr;}
  .article .article-grid{grid-template-columns:1fr}

  .article-grid{
    display:grid;
    grid-template-columns:1fr;
  }

  .article .article-grid{ /* inner grid: main article + edge note */
    display:grid;
    grid-template-columns: 10fr 2fr; /* 10/2网格 */
    gap:28px;
    align-items:start;
  }

  .article-main{min-width:0}
  .edge-note{padding-left:0}

  /* Title composition: compact with eyebrow */
  .title{font-size:34px}
  .summary{max-width:80%}

  /* FAQ rendered as left question / right answer rows: expect {{faq}} to supply pairs
     We provide a simple table-like CSS that will make two-column rows for pairs of direct children. */
  .faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .faq-grid > *{display:grid;grid-template-columns: 1fr 2fr;gap:12px;padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}
  .faq-grid > *:first-child{border-top:0}
  .faq-grid h4{margin:0;font-size:14px;color:var(--muted);align-self:start}
  .faq-grid p{margin:0;font-size:15px;color:var(--ink)}

  /* Related: three columns short cards without shadow */
  .related-grid{grid-template-columns:repeat(3,1fr);display:grid;gap:12px}
  .related-grid > *{padding:10px 12px;border-left:3px solid transparent;border-radius:2px}
}

/* --- Mobile layout (<=767px) --- */
@media (max-width:767px){
  .layout-root{flex-direction:column}
  .masthead{display:flex;flex-direction:row;gap:12px;width:100%;padding:12px 16px;border-right:0;border-bottom:1px solid rgba(0,0,0,0.04)}
  .masthead .side-nav{display:none}
  .center-wrap{width:100%}
  .page-main{padding:12px 16px}

  /* collapse grid to single column; edge-note merges under title per mobile_contract */
  .article .article-grid{grid-template-columns:1fr;gap:14px}
  .edge-note{order:2;padding:0}
  .summary{max-width:100%}

  /* typography adjustments for small screens */
  .title{font-size:20px}
  .eyebrow{font-size:12px}
  .meta{flex-direction:column;align-items:flex-start;gap:6px}

  /* FAQ stacked */
  .faq-grid{display:block}
  .faq-grid > *{display:block;padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}
  .faq-grid h4{margin:0 0 6px;font-size:14px;color:var(--muted)}
  .faq-grid p{margin:0;font-size:15px}

  /* Related becomes single column on mobile */
  .related-grid{grid-template-columns:1fr}

  /* ensure no horizontal scroll at 320px */
  body{word-break:break-word}
}

/* Accessibility and focus */
a:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Avoid heavy shadows, large radii as forbidden; keep surfaces flat */