/* Palette & base */
:root{
  --bg:#f7f2ea; /* 象牙白 */
  --surface:#fbf8f4;
  --text:#2b2430; /* 深紫灰风格 */
  --muted:#6b6370;
  --accent:#3b3340;
  --max-width-clamp: clamp(1120px,70vw,1440px);
  --container-padding:20px;
  --title-scale: min(56px, calc(28px + 2.8vw));
  --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--system-font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.page{display:flex;justify-content:center;padding:18px 12px 40px}
.center-container{width:var(--max-width-clamp);padding:12px;max-width:100%;}
.toolbar{background:transparent;padding:10px 0}
.toolbar-inner{display:flex;align-items:center;justify-content:space-between;padding:6px  var(--container-padding)}
.brand{font-weight:700;color:var(--accent);font-size:18px}
.breadcrumbs{font-size:13px;color:var(--muted);margin-left:12px}
.center-grid{display:grid;gap:28px;align-items:start}
.article{background:transparent}
.title{
  margin:0 0 10px 0;
  font-weight:800;
  color:var(--accent);
  font-size:var(--title-scale);
  line-height:1.02;
  letter-spacing:-0.01em;
  word-break:break-word;
}
.meta-inline{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{margin:0 0 18px 0;color:var(--muted);line-height:1.5}
.content{color:var(--text);line-height:1.7;font-size:16px}
.content p{margin:0 0 1em}
.side-annot{display:none}
.ad-slot{margin:18px 0;padding:8px;background:transparent;border-radius:4px;color:var(--muted);font-size:13px}
.section-title{margin:18px 0 8px 0;font-size:18px;color:var(--accent);font-weight:700}
.section-title.small{font-size:15px}
.faq-list details{margin:6px 0;padding:6px 0}
.related-list{display:flex;flex-wrap:wrap;gap:10px;font-size:14px}
.related-list a{color:var(--accent);border-bottom:1px dashed rgba(59,51,64,0.08);padding-bottom:2px}
.site-footer{padding:18px 12px;color:var(--muted);font-size:13px}

/* Desktop: 两栏、注释栏沿中轴向侧置并纵向视觉签名 */
@media (min-width:1024px){
  .center-grid{grid-template-columns:1fr 220px;align-items:start}
  .center-container{padding:24px;}
  .article{max-width:760px;margin:0 auto 0 0}
  .side-annot{display:block;}
  .side-vertical{position:sticky;top:24px;align-self:start}
  /* 元信息沿边缘纵向排列（视觉识别）*/
  .side-vertical{writing-mode:vertical-rl;text-orientation:mixed;color:var(--muted);font-size:14px}
  .side-block{display:flex;flex-direction:column;align-items:center;gap:8px}
  .side-label{font-weight:700;color:var(--accent);margin-bottom:6px}
  .side-value{transform:rotate(180deg);max-width:180px;white-space:normal;word-break:break-word}
  .title{max-width:760px}
  /* 标题构图：超大但克制，保持条理 */
  .title{font-size:var(--title-scale);}
  .meta-inline{justify-content:flex-start}
  .ad-slot.top{margin-bottom:22px}
  .ad-slot.middle{margin:30px 0}
}

/* Mobile: 单列左对齐，侧栏下移且避免窄正文 */
@media (max-width:767px){
  .center-container{padding:12px}
  .center-grid{grid-template-columns:1fr;gap:14px}
  .article{width:100%}
  .title{font-size:26px;line-height:1.08;margin-bottom:8px}
  .meta-inline{flex-direction:column;gap:6px;font-size:12px}
  .summary{font-size:14px}
  .side-annot{display:block;margin-top:12px}
  .side-vertical{writing-mode:horizontal-tb;transform:none}
  .side-value{transform:none}
  .ad-slot{font-size:13px}
  .related-list{gap:8px}
  body{overflow-x:hidden}
}

/* 中等宽度保护，避免正文被限制在手机窄列 */
@media (min-width:768px) and (max-width:1023px){
  .center-grid{grid-template-columns:1fr;gap:18px}
  .title{font-size:34px}
  .side-annot{display:block}
  .side-vertical{writing-mode:horizontal-tb}
}

/* Accessibility and small adjustments */
.content :where(h2,h3,h4){color:var(--accent)}
.faq-list details summary{cursor:pointer;outline:none}