/* Palette and basic tokens */
:root{
  --cream:#FBF6ED;
  --deep-brown:#3b2b24;
  --muted-brown:#6b5248;
  --accent:#8c6b5a;
  --line:rgba(59,43,36,0.12);
  --radius:4px;
  --max-width:1280px;
  --page-padding:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--sans);background:var(--cream);color:var(--deep-brown);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Page frame: thin border outline for desktop only (framed-feature) */
.page-frame{
  margin:18px auto;
  background:white;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  /* vertical borders shown on desktop via media query */
  padding:0;
  max-width:calc(var(--max-width) + 40px);
}

.site-header{padding:14px var(--page-padding);}
.brand-row{display:flex;align-items:center;gap:18px}
.brand{font-weight:700;color:var(--deep-brown);font-family:var(--serif);font-size:20px}

/* 紧凑左对齐品牌栏 + 栏目索引条（文字索引） */
.index-bar{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted-brown)}
.index-item{padding:6px 8px;border-top:2px solid transparent}

.site-inner{margin:0 auto;padding:18px var(--page-padding);}

/* Title composition: large title + narrow meta column */
.title-area{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:start;border-top:1px solid var(--line);padding-top:18px}
.page-title{margin:6px 0 6px 0;font-family:var(--serif);font-size:28px;line-height:1.08;color:var(--deep-brown)}
.title-meta{font-size:13px;color:var(--muted-brown)}
.title-meta .meta-row{display:flex;flex-direction:column;gap:6px}
.summary{margin-top:12px;color:var(--muted-brown);line-height:1.5}

/* Content grid: 12-column with 8/4 split */
.content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:18px}
.article{grid-column:1 / span 12}
.sidebar{grid-column:1 / span 12}

/* Panels in sidebar */
.panel{border-top:1px solid var(--line);padding:12px 0}
.panel-title{font-size:13px;color:var(--deep-brown);margin:0 0 8px 0;font-weight:600}
.panel-body{font-size:14px;color:var(--muted-brown)}

/* Article body styles */
.article-body{font-size:16px;line-height:1.75;color:var(--deep-brown)}
.article-body p{margin:0 0 16px 0}

/* visual_signature: 轻量首字强调但不改写内容 */
.article-body p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:1.35em;
  font-weight:600;
  color:var(--accent);
  padding-right:6px;
  float:left;
  line-height:1;
}

/* Supplements */
.supplement{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.supplement-title{font-family:var(--serif);font-size:18px;margin:0 0 12px 0;color:var(--deep-brown)}
.faq-list, .related-list{margin:0;padding-left:20px;color:var(--muted-brown)}
.faq-list li{margin:0 0 12px}
.faq-list li strong{display:block;color:var(--deep-brown);margin-bottom:6px}
.related-list li{margin:0 0 8px}

/* Ad slots: independent, non-floating */
.ad-slot{max-width:var(--max-width);margin:14px auto;padding:8px 12px;color:var(--muted-brown);font-size:14px;border:1px dashed var(--line);background:transparent}
.ad-top{margin-top:6px}

.site-footer{border-top:1px solid var(--line);padding:14px var(--page-padding);font-size:13px;color:var(--muted-brown)}

/* Desktop rules */
@media (min-width:1024px){
  .page-frame{border-left:1px solid var(--line);border-right:1px solid var(--line);}
  .site-inner{max-width:var(--max-width);padding:28px;margin:0 auto}
  /* enforce an editorial 12-column grid: article 8 cols, sidebar 4 cols */
  .content-grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .article{grid-column:1 / span 8}
  .sidebar{grid-column:9 / span 4}
  .page-title{font-size:36px}
  .title-area{grid-template-columns:1fr 260px}
  .panel{padding:14px;border-top:1px solid var(--line)}
  /* density moderate */
  .article-body{font-size:17px;line-height:1.8}
}

/* Mobile rules */
@media (max-width:767px){
  html,body{background:var(--cream)}
  .page-frame{border-left:none;border-right:none;margin:0}
  .site-header{padding:12px}
  .brand{font-size:18px}
  .index-bar{display:flex;gap:10px;font-size:12px}
  /* Title area stacks: remove two-column composition */
  .title-area{grid-template-columns:1fr;gap:8px}
  .title-meta{order:2}
  .page-title{font-size:20px}
  .site-inner{padding:14px}
  /* content becomes single column; sidebar moves below content */
  .content-grid{grid-template-columns:1fr;gap:12px}
  .article{grid-column:1 / -1}
  .sidebar{grid-column:1 / -1}
  .panel{padding:10px;border-top:1px solid var(--line)}
  .ad-slot{margin:10px 14px}
  /* ensure no horizontal scroll at 320px */
  body{min-width:0}
}

/* Accessibility tweaks */
h1,h2,h3{color:var(--deep-brown)}