:root{--bg:#fffaf0;--ink:#2b2133;--muted:#6b6170;--accent:#3b2f49;--border:rgba(43,33,51,0.08);--radius:2px;--gap:20px;--max-width:1200px;--container-padding:28px;font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--ink);background:var(--bg);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.site-header{padding:16px 20px;border-bottom:1px solid var(--border);background:transparent}
.brand-wrap{display:flex;align-items:center}
.brand-home{color:var(--accent);text-decoration:none;font-weight:700;font-size:1.05rem}
.page-ad{padding:12px 20px}
.page-frame{display:flex;justify-content:center;padding:var(--gap) 12px}
.container{display:grid;gap:32px;align-items:start;width:100%;padding:0 12px}
.left-rail{order:0}
.article-rail{order:1}
/* Article base styles */
.article-head{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:transparent}
.title{margin:0 0 12px 0;font-size:clamp(1.6rem, 2.6vw, 2.4rem);line-height:1.08;letter-spacing:-0.01em;font-weight:700;color:var(--accent)}
.meta-inline{display:flex;gap:12px;align-items:center;font-size:0.9rem;color:var(--muted);margin-bottom:12px}
.summary{margin:0;padding:8px 0;color:var(--muted);border-top:1px dashed var(--border);padding-top:12px}
.content{padding:18px;border:1px solid var(--border);border-radius:var(--radius);margin-top:18px;background:transparent;line-height:1.75;font-size:1rem}
.faq-wrap{padding:14px;border:1px solid var(--border);border-radius:var(--radius);margin-top:18px;background:transparent}
.related{margin-top:18px}
.related-title{font-size:1rem;margin:0 0 10px 0;color:var(--accent)}
.related-grid{display:grid;gap:12px}
.related-grid > *{padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;overflow:hidden}
.ad{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;margin-top:18px}
.site-footer{padding:18px 20px;border-top:1px solid var(--border);color:var(--muted);font-size:0.9rem}
/* Visual signature: meta-rail vertical on desktop */
.meta-rail{display:flex;align-items:flex-start;height:100%}
.meta-vertical{writing-mode:vertical-rl;text-orientation:upright;transform:rotate(0deg);color:var(--muted);font-size:0.82rem;display:flex;flex-direction:column;align-items:center;gap:6px}
.meta-item{padding:4px 6px}
.meta-divider{height:6px;width:1px;background:var(--border);margin:6px 0}
/* Density - spacious */
article,aside{padding:0}
/* Desktop layout - must be applied at min-width:1024px */
@media (min-width:1024px){
  .container{max-width:var(--max-width);display:grid;grid-template-columns:1fr 3fr;gap:32px;align-items:start;width:var(--max-width)}
  /* left rail occupies 3/12 (1fr) and article 9/12 (3fr) as required */
  .left-rail{min-width:0}
  .article-rail{min-width:0}
  /* Make vertical meta align to left edge visually */
  .meta-rail{padding-left:6px}
  /* Title composition: super large but kept within two lines visually by responsive sizing */
  .title{font-size:2.4rem}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  /* Ensure left meta is visually on edge: place meta-rail flush left within its column */
  .left-rail{display:flex;align-items:flex-start}
}
/* Mobile layout - max-width:767px - independent reflow */
@media (max-width:767px){
  .container{display:block;max-width:100%;padding:0}
  .left-rail{order:0}
  .article-rail{order:1}
  /* Hide vertical meta-rail and present compact info band after title */
  .meta-rail{display:none}
  .meta-inline{flex-direction:column;align-items:flex-start;font-size:0.92rem}
  .article-head{border:none;padding:0}
  .summary{border-top:none;padding-top:8px}
  .content{border:none;padding:12px 0}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{display:block}
  .ad{margin-top:12px}
  .title{font-size:1.6rem}
  /* Mobile-specific compact info band inserted visually beneath title using CSS only: replicate meta-inline styles */
  .article-head .compact-info{display:block}
}
/* Mid-range screens between 768px and 1023px - keep comfortable spacing */
@media (min-width:768px) and (max-width:1023px){
  .container{padding:0 18px}
  .title{font-size:1.9rem}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
/* Styling for direct children of related and faq so supplied HTML structures (ul, ol, divs) flow into grid */
.related-grid > * {background-clip:padding-box}
.faq-wrap > *{margin:0 0 10px 0}