/* Palette and basic tokens */
:root{
  --brand: #0e5f60; /* 墨绿色 */
  --bg: #f7f3eb;    /* 米白 */
  --text: #222222;
  --muted: #6b6b6b;
  --line: #cfc9be;  /* 细线 */
  --max-width: 1320px; /* 桌面容器宽度(处于1120-1440范围) */
  --gap: 24px;
  --radius: 2px; /* 直角微调，但保留接近直角 */
  --brand-strong: #073d3d;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color-scheme: light;
}

/* Reset basics */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}
a{color:var(--brand);text-decoration:none}
a:focus{outline:2px solid var(--line)}

/* Masthead: 一行文字刊头，左右分置 */
.masthead{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.masthead-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.masthead-brand{
  font-weight:700;
  color:var(--brand-strong);
  letter-spacing:0.2px;
}
.masthead-meta{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center}
.masthead-flag{padding:4px 6px;border:1px solid var(--line);background:#fff}

/* Page ad blocks (must not float or overlap) */
.page-ad{max-width:var(--max-width);margin:18px auto;padding:6px 12px;border:1px dashed var(--line);background:#fff}
.page-ad .ad-slot{display:block}

/* Main container */
.container{max-width:var(--max-width);margin:0 auto;padding:28px 20px}
.grid{display:grid;gap:var(--gap)}

/* Title block spans full width in ledger-grid */
.title-block{grid-column:1/-1;padding:6px 0 12px}
.title{margin:0 0 10px 0;font-size:28px;line-height:1.12;font-weight:700;color:var(--brand-strong);text-align:left}
.title-decor{height:0;margin-top:-6px;border-top:3px solid var(--brand);border-bottom:1px solid var(--line);width:160px}

/* Article and side areas share grid in desktop (see media query) */
.article{background:transparent;padding:6px 0}
.article-meta{margin:6px 0 16px;color:var(--muted);font-size:14px}
.article-meta .summary{margin-top:8px;padding:10px;border-top:1px solid var(--line);background:#fff}

.content{background:#fff;padding:18px;border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
.content *:first-child{margin-top:0}
.content p{margin:0 0 1em}

.ad{margin:20px 0;padding:10px;border:1px dashed var(--line);background:transparent}

/* FAQ: horizontal line Q&A list */
.faq{padding:6px 0}
.aside-title{font-size:16px;margin:0 0 10px 0;color:var(--brand)}
.faq-list{background:#fff;border:1px solid var(--line);padding:10px}
.faq-list > *{padding:12px 8px;border-top:1px solid var(--line)}
.faq-list > *:first-child{border-top:none}
.faq-list .question{font-weight:600;color:var(--brand-strong);margin-bottom:6px}
.faq-list .answer{color:var(--text)}

/* Meta track: 2 column info rail with straight boxes */
.meta-track{padding:6px 0}
.meta-box{background:#fff;border:1px solid var(--line);padding:12px}
.meta-row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid transparent}
.meta-row strong{font-weight:600;color:var(--muted);font-size:13px}

/* Related: two-column summary list on desktop */
.related-section{margin-top:28px}
.related-title{font-size:15px;margin:0 0 10px 0;color:var(--brand)}
.related-list{display:grid;gap:12px}
.related-list a{display:block;padding:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.related-list a h3{margin:0;font-size:14px}
.related-list a p{margin:6px 0 0;font-size:13px;color:var(--muted)}

.site-footer{border-top:1px solid var(--line);margin-top:36px;padding:18px 20px;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;color:var(--muted)}

/* Desktop layout: ledger-grid, 12-column skeleton with specific span allocations */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(12, 1fr);align-items:start}
  .title-block{grid-column:1/13}
  .article{grid-column:1/span 7}
  .faq{grid-column:8/span 3}
  .meta-track{grid-column:11/span 2}

  /* Density and type scaling */
  .title{font-size:34px}
  .content{font-size:16px}

  /* Related appears as two-column summaries */
  .related-list{grid-template-columns:repeat(2,1fr)}
}

/* Mobile layout: grid解除，线框只保留为段落顶部细线，侧栏下移 */
@media (max-width:767px){
  .container{padding:16px 14px}
  .grid{display:block}
  .title{font-size:20px}
  .title-decor{width:120px;border-top:2px solid var(--brand);border-bottom:1px solid var(--line)}
  .article{order:0}
  .faq{order:3}
  .meta-track{order:2;margin-top:12px}
  .meta-box{border:0;padding:0;background:transparent}
  .article-meta .summary{border-top:1px solid var(--line);background:transparent;padding:10px 0}
  .content{border:0;padding:0;background:transparent}
  .content > *{padding-top:12px;border-top:1px solid var(--line)}
  .faq-list{border:0;padding:0}
  .faq-list > *{padding:12px 0;border-top:1px solid var(--line)}
  .related-list{display:grid;grid-template-columns:1fr;gap:12px}
  .page-ad{margin:14px}
}

/* Accessibility and focus */
a:focus{outline-offset:2px}

/* Enforce straight corners */
*,*::before,*::after{border-radius:0}