/* Palette and system typography */
:root{
  --bg-ivory:#f7f3ea; /* light paper */
  --deep-gray:#2f2b33; /* deep purple-gray */
  --muted:#6b6570;
  --accent:#3b3650;
  --text:#222;
  --max-site-width:1280px; /* between 1120 and 1440 */
  --gutter:24px;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-ivory) 0%, #fbfaf8 200%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  font-size:16px;
}

.site-inner{max-width:var(--max-site-width);margin:0 auto;padding:0 20px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-link{color:var(--deep-gray);font-weight:700;text-decoration:none}
.top-nav{display:flex;gap:14px;align-items:center}
.top-nav a, .top-nav .nav-item{color:var(--muted);font-size:0.95rem;text-decoration:none}
.nav-home{font-weight:600;color:var(--deep-gray)}

/* Layout grid: desktop will show left index column and right bands column */
.layout-grid{display:flex;gap:0;align-items:flex-start}
.index-column{display:none;flex:0 0 220px;padding-right:20px}
.index-list{position:sticky;top:20px;padding:18px 0}
.index-link{display:block;color:var(--muted);padding:6px 0;text-decoration:none}
.index-link:first-child{font-weight:600;color:var(--deep-gray)}

.bands-column{flex:1 1 auto}
.band{padding:28px 0;border-top:1px solid rgba(0,0,0,0.03)}
.band-inner{padding:0 var(--gutter)}

/* Intro band style */
.band--intro{background:linear-gradient(90deg, rgba(247,243,234,0.6), rgba(255,255,255,0.2));}
.article-title{font-size:1.6rem;margin:2px 0 10px 0;line-height:1.18;color:var(--deep-gray);font-weight:700;position:relative;padding-right:18px;text-align:left}
/* title composition: left-aligned with thin horizontal line to right */
.article-title::after{content:'';display:inline-block;height:2px;background:var(--accent);width:36%;margin-left:12px;vertical-align:middle;opacity:0.12}
.meta-row{display:flex;gap:12px;color:var(--muted);font-size:0.92rem;margin-bottom:12px}
.summary{margin:0;color:var(--muted);max-width:1100px}

/* Content band: maintain comfortable reading width */
.band--content{background:transparent}
.band-content-inner{max-width:900px;margin:0 auto;padding:0 var(--gutter)}
.content-body{color:var(--text);font-size:1rem}
.content-body p{margin:0 0 1em}
.content-body h2, .content-body h3{color:var(--deep-gray);margin:1.4em 0 0.6em}

/* FAQ band */
.band--faq{background:rgba(59,54,80,0.03)}
.section-title{font-size:1rem;margin:0 0 12px;display:flex;align-items:center;gap:12px;color:var(--deep-gray);font-weight:700}
.sig-num{display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:var(--deep-gray);color:#fff;font-size:0.78rem;padding:2px 8px;flex:0 0 auto}
.faq-list{color:var(--muted);font-size:0.98rem}
.faq-list ol{margin:0 0 0 1.1rem;padding:0}
.faq-list li{margin:0 0 0.85rem}

/* Related grid: three columns on desktop, no shadows */
.band--related{background:transparent}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{background:transparent;padding:10px;border-top:1px solid rgba(0,0,0,0.03)}
.related-grid a{color:var(--deep-gray);text-decoration:none;font-weight:600}
.related-grid p{margin:0;color:var(--muted);font-size:0.95rem}

/* Ad containers are independent blocks and non-intrusive */
.ad-container{padding:18px 0;text-align:center;color:var(--muted);font-size:0.92rem}
.ad-container > *{display:inline-block}

.site-footer{border-top:1px solid rgba(0,0,0,0.04);padding:18px 0;margin-top:30px}
.footer-inner{display:flex;justify-content:center;color:var(--muted);font-size:0.92rem}

/* Density - tighter lists and spacing */
.band{padding-top:20px;padding-bottom:20px}

/* Desktop-specific rules - must exist for min-width:1024px */
@media (min-width:1024px){
  body{font-size:16px}
  .site-inner{padding:0 32px}
  .index-column{display:block}
  .layout-grid{align-items:flex-start}
  .band{padding:36px 0}
  .article-title{font-size:2rem}
  /* desktop-only structural difference: index column visible and related grid becomes three columns */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .related-grid > *{padding:12px}
  /* make some bands narrower to create band-width variance */
  .band--intro .band-inner{max-width:1200px;margin:0 auto}
  .band--content .band-inner{max-width:960px}
  .band--faq .band-inner{max-width:820px}
  .band--related .band-inner{max-width:1200px}
}

/* Mobile-specific rules - max-width:767px, all bands collapse to single column, lighter padding */
@media (max-width:767px){
  .site-inner{padding:0 14px}
  .header-inner{padding:12px 0}
  .top-nav{gap:10px}
  .index-column{display:none}
  .bands-column{width:100%}
  .band{padding:18px 0}
  .band-inner{padding:0}
  .band-content-inner{padding:0}
  .article-title{font-size:1.2rem}
  .meta-row{flex-direction:row;gap:10px;flex-wrap:wrap}
  .summary{font-size:0.98rem}
  .related-grid{grid-template-columns:1fr}
  .sig-num{font-size:0.75rem;padding:2px 6px}
}

/* Ensure no horizontal overflow at 320px */
@media (max-width:320px){
  body{font-size:15px}
  .site-inner{padding:0 10px}
}

/* Accessibility and subtle focus */
a:focus{outline:2px solid rgba(59,54,80,0.12);outline-offset:2px}