/* Chemdu Information hub — editorial "Mystari" style: Fraunces + Manrope, lavender + indigo, purple & gold accents */
:root{
  --bg:#f6f4fb;
  --ink:#1b1740;
  --ink-soft:#3c3766;
  --mut:#6f6c8f;
  --purple:#6c5ce7;
  --purple-d:#5546c9;
  --gold:#b0812b;
  --gold-l:#cba13f;
  --card:#ffffff;
  --line:#e8e4f4;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.info-body{ background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
.info-body .container{ max-width:1080px; margin:0 auto; padding:0 1.25rem; }
.info-body section{ padding:4rem 0; }
.info-body h1,.info-body h2,.info-body h3,.info-body h4{ font-family:var(--serif); font-weight:500; color:var(--ink); letter-spacing:-.01em; }
.info-body h2{ font-size:clamp(1.7rem,3.6vw,2.55rem); margin:0 0 .6rem; }
.info-body h3{ font-weight:600; font-size:1.18rem; }
.info-body p{ line-height:1.75; color:var(--ink-soft); }
.info-body .lede{ font-size:1.14rem; color:var(--mut); max-width:64ch; }
.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--gold); font-weight:700; margin:0 0 .85rem; }
.gold-italic{ font-style:italic; color:var(--gold); }

/* Header — clean, light, glassy */
.info-body .site-header{ background:rgba(246,244,251,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.info-body .brand span{ font-family:var(--serif); font-weight:600; color:var(--ink); }
.info-body .brand small{ font-family:var(--sans); color:var(--mut); font-weight:500; }
.info-body .nav-links a{ font-family:var(--sans); color:var(--ink-soft); font-weight:600; }
.info-body .nav-links a:hover{ color:var(--purple); }
.info-body .nav-links a.nav-research{ background:var(--purple)!important; color:#fff!important; border-radius:999px; padding:.45rem 1.15rem!important; box-shadow:0 10px 22px -9px rgba(108,92,231,.65); }
.info-body .nav-links a.nav-research:hover{ background:var(--purple-d)!important; }

/* Buttons — pill */
.btn{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-weight:700; font-size:1rem; padding:.9rem 1.9rem; border-radius:999px; text-decoration:none; transition:transform .12s, box-shadow .2s; cursor:pointer; }
.btn-primary{ background:linear-gradient(180deg,var(--purple),var(--purple-d)); color:#fff; box-shadow:0 14px 30px -10px rgba(108,92,231,.7); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-outline{ border:1.5px solid var(--line); color:var(--ink); background:#fff; }
.btn-outline:hover{ border-color:var(--purple); color:var(--purple); }

/* Hero — centered, editorial */
.info-hero{ background:radial-gradient(130% 80% at 50% -20%,#ece6fb 0%,var(--bg) 58%); text-align:center; padding:4.6rem 0 3.8rem; position:relative; }
.hero-mol{ position:absolute; top:50%; transform:translateY(-50%); width:165px; margin:0; text-align:center; pointer-events:none; }
.hero-mol.left{ left:max(1.5rem,3.5vw); }
.hero-mol.right{ right:max(1.5rem,3.5vw); }
.hero-mol img{ width:100%; height:auto; display:block; opacity:.95; }
.mol-cap{ margin-top:.55rem; font-family:var(--sans); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mut); font-weight:700; }
@media(max-width:1150px){ .hero-mol{ display:none; } }
.info-hero .eyebrow{ color:var(--gold); }
.info-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.5rem,6.2vw,4.2rem); line-height:1.05; margin:0 auto 1.15rem; max-width:20ch; color:var(--ink); letter-spacing:-.02em; }
.info-hero .sub{ font-size:1.18rem; color:var(--mut); max-width:58ch; margin:0 auto; line-height:1.65; }
.hero-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }
.hero-badges{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:2.4rem; margin-top:2.6rem; background:#fff; border:1px solid var(--line); border-radius:24px; padding:1.5rem 2.4rem; box-shadow:0 26px 50px -34px rgba(27,23,64,.5); }
.hero-badges span{ font-size:.84rem; color:var(--mut); }
.hero-badges b{ display:block; font-family:var(--serif); color:var(--purple); font-size:1.6rem; font-weight:600; }

/* Research showcase — dark indigo band */
.research-showcase{ background:var(--ink); color:#fff; }
.research-showcase h2{ color:#fff; }
.research-showcase .lede{ color:#c9c5e6; max-width:70ch; }
.research-showcase .eyebrow{ color:var(--gold-l); }
.rs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem; margin:1.7rem 0 1.7rem; }
.rs-link{ display:block; padding:1.1rem 1.2rem; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.05); color:#fff; text-decoration:none; transition:background .15s, border-color .15s, transform .1s; }
.rs-link:hover{ background:rgba(255,255,255,.11); border-color:var(--gold-l); transform:translateY(-2px); }
.rs-link b{ display:block; font-family:var(--serif); font-weight:600; font-size:1.04rem; }
.rs-link span{ font-size:.82rem; color:#a8a3ce; }

/* Category cards */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:1.9rem; }
.cat-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:1.7rem; text-decoration:none; color:inherit; box-shadow:0 20px 44px -34px rgba(27,23,64,.45); transition:transform .14s, box-shadow .2s; }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -30px rgba(108,92,231,.5); }
.cat-card .emoji{ font-size:2.1rem; }
.cat-card h3{ margin:.75rem 0 .4rem; font-family:var(--serif); font-weight:600; font-size:1.3rem; }
.cat-card p{ margin:0; font-size:.95rem; color:var(--mut); }
.cat-card .tag{ display:inline-block; margin-top:.75rem; font-family:var(--sans); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; padding:.24rem .65rem; border-radius:999px; }
.tag.legal{ background:#eaf7ee; color:#1f7a44; }
.tag.rx{ background:#eef0fe; color:#4a43c8; }
.tag.grey{ background:#f6efe2; color:#946417; }

/* Alternating white section */
.soft{ background:#fff; }

/* Stats */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-top:1.7rem; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.4rem; box-shadow:0 16px 38px -34px rgba(27,23,64,.5); }
.stat b{ display:block; font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--purple); }
.stat span{ font-size:.85rem; color:var(--mut); }

/* Two-column */
.two-col{ display:grid; grid-template-columns:1.15fr 1fr; gap:2.6rem; align-items:start; }
.two-col h3{ margin-top:0; }

/* Callout */
.callout{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.6rem 1.8rem; margin-top:1.4rem; box-shadow:0 16px 38px -34px rgba(27,23,64,.45); }
.callout h3{ font-family:var(--serif); font-weight:600; margin:0 0 .45rem; color:var(--ink); }
.callout p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:.98rem; }
.callout ul{ margin:.7rem 0 0; padding-left:1.15rem; color:var(--ink-soft); font-size:.97rem; line-height:1.75; }

/* FAQ */
.faq{ margin-top:1.7rem; max-width:780px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:.85rem; padding:0 1.5rem; box-shadow:0 14px 34px -32px rgba(27,23,64,.5); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink); padding:1.2rem 2rem 1.2rem 0; position:relative; }
.faq-q:after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--purple); font-family:var(--sans); }
.faq-item.open .faq-q:after{ content:"–"; }
.faq-a{ display:none; padding:0 0 1.25rem; color:var(--ink-soft); line-height:1.75; }
.faq-item.open .faq-a{ display:block; }

.disclaimer{ font-size:.86rem; color:var(--mut); background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.35rem; margin-top:1.3rem; }

/* Footer — indigo */
.info-body .site-footer{ background:var(--ink); color:#c9c5e6; }
.info-body .site-footer .brand span{ color:#fff; font-family:var(--serif); font-weight:600; }
.info-body .site-footer .brand small{ color:#a8a3ce; }
.info-body .site-footer h4{ color:#fff; font-family:var(--serif); font-weight:600; }
.info-body .site-footer a{ color:#c9c5e6; }
.info-body .site-footer a:hover{ color:#fff; }
.info-body .site-footer .footer-bottom{ color:#a8a3ce; }

/* Inner category / article pages */
.crumb{ font-family:var(--sans); font-size:.85rem; color:var(--mut); margin-bottom:.4rem; }
.crumb a{ color:var(--mut); text-decoration:none; }
.crumb a:hover{ color:var(--purple); }
.article-hero{ background:radial-gradient(130% 90% at 50% -30%,#ece6fb 0%,var(--bg) 60%); padding:3rem 0 2.2rem; }
.article-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.08; margin:.7rem 0 .8rem; max-width:22ch; color:var(--ink); letter-spacing:-.02em; }
.article-hero .lede{ font-size:1.15rem; max-width:62ch; }
.prose{ max-width:760px; margin:0 auto; }
.prose h2{ margin-top:2.4rem; }
.prose h3{ margin-top:1.6rem; margin-bottom:.2rem; }
.prose p{ margin:.65rem 0; }
.prose a{ color:var(--purple); text-decoration:underline; text-underline-offset:2px; }
.prose a.buy-card, .prose a.buy-card *, .prose .cross a{ text-decoration:none; }
.prose ul,.prose ol{ padding-left:1.2rem; line-height:1.8; color:var(--ink-soft); }
.prose li{ margin:.35rem 0; }
.examples{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.5rem 0; }
.ex-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.2rem 1.3rem; box-shadow:0 14px 34px -32px rgba(27,23,64,.5); }
.ex-card b{ font-family:var(--serif); font-weight:600; color:var(--ink); display:block; margin-bottom:.15rem; font-size:1.05rem; }
.ex-card span{ font-size:.92rem; color:var(--mut); }
.cross{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; margin-top:1.4rem; }
.cross a{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:.95rem 1.15rem; text-decoration:none; color:var(--ink); font-weight:700; font-family:var(--sans); box-shadow:0 12px 30px -30px rgba(27,23,64,.5); transition:border-color .15s, color .15s; }
.cross a:hover{ border-color:var(--purple); color:var(--purple); }
/* Affiliate product cards */
.buy-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.4rem 0; }
.buy-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.35rem; text-decoration:none; color:inherit; box-shadow:0 14px 34px -32px rgba(27,23,64,.5); transition:transform .12s, box-shadow .2s, border-color .15s; }
.buy-card:hover{ transform:translateY(-3px); border-color:var(--purple); box-shadow:0 22px 44px -28px rgba(108,92,231,.5); }
.buy-card b{ font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--ink); }
.buy-card span{ font-size:.92rem; color:var(--mut); margin:.4rem 0 .9rem; flex:1; line-height:1.55; }
.buy-card em{ font-family:var(--sans); font-style:normal; font-weight:700; color:var(--purple); font-size:.92rem; }
/* sub-category (shop-by-type) blocks */
.subcat{ margin:1.8rem 0; padding-top:1.7rem; border-top:1px solid var(--line); }
.subcat:first-of-type{ border-top:0; padding-top:0; }
.subcat h3{ font-size:1.4rem; margin:0 0 .35rem; }
.subcat > p{ margin:.3rem 0 .2rem; max-width:66ch; }
.browse{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.7rem; font-family:var(--sans); font-weight:700; color:var(--purple); text-decoration:none!important; font-size:.95rem; }
.browse:hover{ gap:.5rem; }
.subcat-nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; margin:1.4rem 0 .5rem; }
.subcat-nav a{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:.85rem 1.05rem; text-decoration:none!important; color:var(--ink); font-weight:700; font-family:var(--sans); font-size:.95rem; box-shadow:0 12px 30px -30px rgba(27,23,64,.5); transition:border-color .15s,color .15s; }
.subcat-nav a:hover{ border-color:var(--purple); color:var(--purple); }

@media(max-width:760px){
  .two-col{ grid-template-columns:1fr; }
  .info-body section{ padding:2.8rem 0; }
  .hero-badges{ gap:1.5rem; padding:1.2rem 1.5rem; }
}