:root{
  --deep-brown:#3B2F26;
  --brown-medium:#5C4A3A;
  --brown-light:#7D6B59;
  --brown-faint:#9E8E7D;
  --gold:#D6AD60;--gold-ink:#8A6524;
  --gold-faint:rgba(214,173,96,0.12);
  --cream:#EFE4C8;
  --cream-light:#F5EED8;
  --warm-white:#FDFAF3;
  --border:rgba(168,149,122,0.3);
  --shadow-soft:rgba(59,47,38,0.06);
  --shadow-med:rgba(59,47,38,0.12);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--deep-brown);
  background:var(--warm-white);
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brown-medium);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--brown-faint);transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* ── Article ── */
.article{
  max-width:720px;
  margin:0 auto;
  padding:48px 24px 80px;
}
@media (min-width:760px){
  .article{padding:72px 24px 100px}
}

.breadcrumbs{
  font-size:13px;
  color:var(--brown-faint);
  letter-spacing:.04em;
  margin-bottom:28px;
  text-transform:uppercase;
}
.breadcrumbs a{color:var(--brown-light);text-decoration:none}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs__sep{margin:0 8px;opacity:.5}

.top-cta{margin:-12px 0 28px;padding:14px 18px;background:linear-gradient(90deg,var(--cream-light) 0%,var(--cream) 100%);border:1px solid var(--border);border-radius:6px;font-size:14.5px}
.top-cta a{color:var(--deep-brown);text-decoration:none;font-weight:600;letter-spacing:.01em}
.top-cta a:hover{color:var(--gold)}

.article__hero{margin:0 0 28px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--cream-light)}
.article__hero svg{display:block;width:100%;height:auto}

.article__kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:600;
  margin-bottom:14px;
}

.article__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem,1.4rem+2.5vw,3.25rem);
  line-height:1.15;
  color:var(--deep-brown);
  margin:0 0 8px;
  letter-spacing:-.005em;
}
.article__title .zh{
  display:block;
  font-size:.55em;
  color:var(--gold-ink);
  font-weight:500;
  margin-top:6px;
  letter-spacing:.02em;
}

.article__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 16px;
}
.article__meta span{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:99px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--brown-medium);
  background:var(--cream-light);
}

.article__byline{
  font-size:13px;
  color:var(--brown-faint);
  margin:0 0 32px;
  letter-spacing:.02em;
}
.article__byline a{color:var(--brown-light);text-decoration:none}
.article__byline a:hover{color:var(--gold)}
.article__byline time{color:var(--brown-light)}

.article__lede{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.25rem,1.05rem+.7vw,1.55rem);
  line-height:1.45;
  color:var(--brown-medium);
  margin:0 0 40px;
  font-style:italic;
}

.article__divider{
  border:none;
  height:1px;
  background:var(--border);
  margin:48px 0;
}

.article__scope-note{font-size:14px;line-height:1.6;padding:12px 18px;margin:0 0 32px;background:transparent;border:1px dashed var(--brown-faint);border-radius:2px;color:var(--brown-light);font-style:italic}
.article__scope-note strong{color:var(--brown-medium);font-style:normal;font-weight:600}
.article__scope-note em{font-style:normal;color:var(--deep-brown);font-weight:500}
.article__scope-note a{color:var(--brown-medium);text-decoration:underline;text-decoration-color:var(--brown-faint);font-style:normal}
.article__scope-note a:hover{color:var(--gold);text-decoration-color:var(--gold)}

.article__body{
  font-size:18px;
  line-height:1.75;
}
.article__body p{margin:0 0 1.25em}
.article__body p:last-child{margin-bottom:0}

/* ── Section H2 headings ── */
.article__h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.4rem,1.15rem+1vw,1.85rem);
  line-height:1.25;
  color:var(--deep-brown);
  margin:48px 0 16px;
  letter-spacing:-.005em;
}
.article__h2:first-of-type{margin-top:32px}

/* ── Quick facts callout ── */
.quick-facts{
  margin:0 0 32px;
  padding:18px 22px;
  background:var(--cream-light);
  border-inline-start:3px solid var(--gold);
  border-radius:2px;
  font-size:15px;
}
.quick-facts__grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 18px;
  margin:0;
}
.quick-facts__grid dt{
  font-weight:600;
  color:var(--brown-medium);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  align-self:center;
}
.quick-facts__grid dd{
  margin:0;
  color:var(--deep-brown);
  font-weight:500;
}
.quick-facts__grid dd .zh-inline{
  font-family:var(--serif);
  color:var(--gold-ink);
  font-weight:600;
  margin-inline-end:6px;
}

/* ── FAQ accordion ── */
.article__faq details{
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px 20px;
  margin-bottom:12px;
  background:var(--warm-white);
  transition:border-color .15s;
}
.article__faq details[open]{border-color:var(--gold-ink)}
.article__faq summary{
  cursor:pointer;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:var(--deep-brown);
  list-style:none;
  position:relative;
  padding-inline-end:28px;
}
.article__faq summary::-webkit-details-marker{display:none}
.article__faq summary::after{
  content:'+';
  position:absolute;
  right:0;
  top:0;
  font-size:22px;
  font-weight:400;
  color:var(--gold);
  line-height:1;
  transition:transform .15s;
}
.article__faq details[open] summary::after{content:'\2212'}
.article__faq .faq-answer{
  margin:14px 0 4px;
  font-size:16px;
  line-height:1.65;
  color:var(--brown-medium);
}
.article__faq .faq-answer p{margin:0 0 .75em}
.article__faq .faq-answer p:last-child{margin-bottom:0}
.article__faq .faq-answer a{color:var(--brown-medium);text-decoration:underline;text-decoration-color:var(--brown-faint)}
.article__faq .faq-answer a:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* Formula tables (auxiliary stars) */
.formula-block{
  margin:28px 0;
  padding:20px 24px;
  background:var(--cream-light);
  border-inline-start:3px solid var(--gold);
  border-radius:2px;
}
.formula-block__label{
  font-family:var(--serif);
  font-weight:600;
  font-size:15px;
  color:var(--deep-brown);
  margin-bottom:14px;
  letter-spacing:.01em;
}
.formula-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.formula-table th,
.formula-table td{
  padding:9px 14px;
  text-align:start;
  border-bottom:1px solid var(--border);
}
.formula-table th{
  font-family:var(--sans);
  font-weight:600;
  color:var(--brown-medium);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:transparent;
}
.formula-table td{font-weight:500}
.formula-table tr:last-child td{border-bottom:none}
.classical-text{
  font-family:var(--serif);
  font-size:15px;
  color:var(--brown-medium);
  letter-spacing:.02em;
}

.further-reading{margin-top:48px;padding:24px 26px;background:var(--warm-white);border:1px solid var(--border);border-radius:6px}
.further-reading__intro{font-size:15px;color:var(--brown-medium);margin:0 0 14px;line-height:1.55}
.further-reading__list{margin:0;padding-inline-start:22px;font-size:15.5px;line-height:1.7}
.further-reading__list li{margin-bottom:8px}
.further-reading__list a{color:var(--brown-medium);text-decoration:underline;text-decoration-color:var(--brown-faint)}
.further-reading__list a:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* ── CTAs ── */
.cta-block{
  margin:56px 0 0;
  padding:36px 32px;
  background:linear-gradient(180deg,var(--cream-light) 0%,var(--cream) 100%);
  border-radius:6px;
  border:1px solid var(--border);
}
.cta-block__eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:700;
  margin-bottom:10px;
}
.cta-block__title{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  line-height:1.25;
  color:var(--deep-brown);
  margin:0 0 12px;
}
.cta-block__body{
  font-size:16px;
  line-height:1.6;
  color:var(--brown-medium);
  margin:0 0 22px;
}
.cta-button{
  display:inline-block;
  padding:13px 26px;
  background:var(--deep-brown);
  color:var(--warm-white);
  text-decoration:none;
  border-radius:3px;
  font-weight:500;
  font-size:15px;
  letter-spacing:.02em;
  transition:background .15s;
}
.cta-button:hover{
  background:#2A211A;
  color:var(--warm-white);
}
.cta-button--outline{
  background:transparent;
  color:var(--deep-brown);
  border:1px solid var(--deep-brown);
}
.cta-button--outline:hover{
  background:var(--deep-brown);
  color:var(--warm-white);
}
.cta-block + .cta-block{margin-top:14px}

/* ── Author bio ── */
.author-bio{
  margin:56px 0 0;
  padding:28px 32px;
  background:var(--warm-white);
  border:1px solid var(--border);
  border-radius:6px;
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.author-bio__avatar{
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--cream-light);
}
.author-bio__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-bio__content{flex:1;min-width:0}
.author-bio__name{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:var(--deep-brown);
  margin:0 0 4px;
  letter-spacing:.005em;
}
.author-bio__role{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:600;
  margin:0 0 12px;
}
.author-bio__text{
  font-size:14.5px;
  line-height:1.65;
  color:var(--brown-medium);
  margin:0;
}
.author-bio__text a{color:var(--brown-medium);text-decoration:underline;text-decoration-color:var(--brown-faint)}
.author-bio__text a:hover{color:var(--gold);text-decoration-color:var(--gold)}
@media (max-width:520px){
  .author-bio{flex-direction:column;gap:14px;padding:24px}
  .author-bio__avatar{width:56px;height:56px}
}

/* ── Related ── */
.related{
  margin-top:72px;
  padding-top:40px;
  border-top:1px solid var(--border);
}
.related__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:13px;
  color:var(--brown-light);
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:0 0 24px;
}
.related__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){
  .related__grid{grid-template-columns:repeat(3,1fr)}
}
.related__card{
  display:block;
  padding:18px 20px;
  background:var(--warm-white);
  border:1px solid var(--border);
  border-radius:4px;
  text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.related__card:hover{
  border-color:var(--gold);
  box-shadow:0 4px 18px var(--shadow-soft);
  transform:translateY(-1px);
}
.related__card-zh{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  color:var(--gold-ink);
  margin-bottom:6px;
  line-height:1;
}
.related__card-en{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  color:var(--deep-brown);
  line-height:1.25;
}

/* ── All-of-type chip cloud ── */
.all-of-type{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.all-of-type__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.all-of-type__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:var(--warm-white);
  border:1px solid var(--border);
  border-radius:99px;
  text-decoration:none;
  font-size:14px;
  color:var(--brown-medium);
  transition:border-color .15s,background .15s,color .15s;
}
.all-of-type__chip:hover{
  border-color:var(--gold);
  background:var(--cream-light);
  color:var(--deep-brown);
}
.all-of-type__chip--current{
  border-color:var(--gold-ink);
  background:var(--gold-faint);
  color:var(--deep-brown);
  font-weight:500;
}
.all-of-type__chip-zh{
  font-family:var(--serif);
  color:var(--gold-ink);
  font-weight:600;
}

/* ── Footer ── */
.site-footer{
  margin-top:80px;
  padding:36px 24px 28px;
  border-top:1px solid var(--border);
  background:var(--cream-light);
  text-align:center;
  font-size:13px;
  color:var(--brown-light);
}
.site-footer a{color:var(--brown-medium);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.site-footer__nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:14px;
}
.site-footer__copy{margin:0;letter-spacing:.02em}