/* ============================================================
   Global Demographics — site stylesheet
   Palette: navy / cream / gold  ·  Type: Playfair Display,
   Source Serif 4, Inter  ·  Editorial register
   ============================================================ */

:root{
  --navy:#10294A;
  --navy-deep:#0B1F38;
  --cream:#F7F3EA;
  --card:#FBF8F1;
  --ink:#1B2733;
  --muted:#5E6B78;
  --gold:#B4892B;
  --gold-bright:#C9A03A;
  --rule:#E5DCC9;
  --display:'Playfair Display',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0 0 1rem}
img{max-width:100%}

.eyebrow{
  font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem;display:block;
}

/* buttons */
.btn{
  font-family:var(--ui);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;
  border-radius:2px;text-decoration:none;
  transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;border:1.5px solid transparent;
}
.btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}
.section--dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.section--dark .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.arrow-link{
  font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--navy);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
}
.arrow-link .a{transition:transform .18s ease;color:var(--gold)}
.arrow-link:hover .a{transform:translateX(4px)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(247,243,234,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule);
  /* backdrop-filter makes this the containing block for the fixed off-canvas
     nav parked off the right edge, which would otherwise stretch the page's
     horizontal scroll width. Clip on x only — hidden would clip the dropdowns. */
  overflow-x:clip;overflow-y:visible;
}
.navrow{display:flex;align-items:center;justify-content:space-between;height:132px;gap:1rem}
.brand{display:flex;align-items:center;text-decoration:none}
.brand svg{display:block;height:99px;width:auto}
nav.main{display:flex;align-items:center;gap:1.5rem}
.navitem{position:relative}
nav.main a.link{
  font-family:var(--ui);font-weight:500;font-size:.8rem;color:var(--ink);
  text-decoration:none;padding:.55rem 0;position:relative;display:inline-flex;align-items:center;gap:.3rem;
  background:none;border:0;cursor:pointer;
}
nav.main a.link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .22s ease}
nav.main a.link:hover::after,nav.main .navitem:focus-within a.link::after{right:0}
nav.main a.link .caret{font-size:.6rem;color:var(--gold);transform:translateY(1px)}
.drop{
  position:absolute;top:100%;left:-14px;min-width:250px;background:#fff;
  border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:0 0 4px 4px;
  box-shadow:0 18px 40px -20px rgba(16,41,74,.4);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  padding:.5rem 0;z-index:60;
}
.navitem:hover .drop,.navitem:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{
  display:block;font-family:var(--ui);font-size:.86rem;color:var(--ink);
  text-decoration:none;padding:.55rem 1.1rem;
}
.drop a:hover{background:var(--cream);color:var(--navy)}
.drop a.featured{font-weight:600;color:var(--navy)}
.drop a.featured small{display:block;font-weight:400;font-size:.72rem;color:var(--muted);margin-top:.15rem}
.drop hr{border:0;border-top:1px solid var(--rule);margin:.4rem 0}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:.4rem;z-index:70}
.menu-btn span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.25s}

/* secondary nav — sibling pages of the current section, injected by shared.js.
   Lives inside header.site so it sticks with the main menu. Scrolls sideways
   rather than wrapping, so the bar stays one line at every width. */
.subnav{
  border-top:1px solid var(--rule);background:rgba(251,248,241,.9);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
}
.subnav::-webkit-scrollbar{height:3px}
.subnav::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.subnav-row{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;gap:1.6rem;white-space:nowrap;
}
.subnav-row a{
  font-family:var(--ui);font-size:.78rem;color:var(--muted);text-decoration:none;
  padding:.7rem 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.subnav-row a:hover{color:var(--navy);border-bottom-color:var(--rule)}
.subnav-row a.on{color:var(--navy);font-weight:600;border-bottom-color:var(--gold)}

/* ---------- shared page furniture ---------- */
.pagehead{padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.pagehead h1{font-size:2.8rem;color:var(--navy);max-width:22ch}
.pagehead .stand{font-size:1.12rem;color:var(--muted);max-width:58ch;margin-top:1rem}
section.block{padding:72px 0}
section.block.tight{padding:48px 0}
.sec-head{max-width:62ch;margin-bottom:2.4rem}
.sec-head h2{font-size:2.1rem;color:var(--navy)}
.sec-head p{color:var(--muted);font-size:1.06rem;margin-top:.8rem}
.thesis{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:32px 30px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(16,41,74,.5);border-color:#d9cdb2}
.card h3{font-size:1.4rem;color:var(--navy);margin-bottom:.7rem}
.card p{color:var(--muted);font-size:.98rem;flex:1}
.card p.soon-lead,.card p.soon-head{flex:0 0 auto}
.card p.soon-head{
  margin-top:1rem;margin-bottom:.5rem;font-family:var(--ui);font-size:.74rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.card .soon-list{
  margin:0;padding-left:1.15rem;flex:1;
  color:var(--muted);font-size:.98rem;
}
.card .soon-list li{margin-bottom:.35rem}
.card .arrow-link{margin-top:1rem}
.card .card-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;
  margin-top:1.3rem;flex:0 0 auto;
}
.card .card-actions .arrow-link{margin-top:0}
.btn-sm{padding:.62rem 1.1rem;font-size:.84rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:.5rem}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{border-top:2px solid var(--gold);padding-top:1.1rem}
.step .num{font-family:var(--display);font-size:1rem;color:var(--gold);letter-spacing:.05em;font-weight:600}
.step h3{font-size:1.25rem;color:var(--navy);margin:.5rem 0 .5rem}
.step p{color:var(--muted);font-size:.95rem;margin:0}

/* pull quote */
.pullquote{
  font-family:var(--display);font-style:italic;font-size:1.8rem;line-height:1.3;
  color:var(--navy);border-left:3px solid var(--gold);padding-left:1.3rem;
}
.pullquote small{display:block;font-family:var(--ui);font-style:normal;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}

/* pull quote / lead lines inside a card */
.card .pullquote{font-size:1.08rem;line-height:1.4;border-left-width:2px;padding-left:1rem;margin:0 0 .2rem;flex:0 0 auto}
.card .pullquote small{font-size:.68rem;margin-top:.55rem}
.card p.card-lead{
  flex:0 0 auto;margin-top:1rem;font-family:var(--display);font-style:italic;
  font-size:1.08rem;line-height:1.4;color:var(--navy);
}
.card p.card-note{flex:0 0 auto;margin-top:.5rem}

/* pricing */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.price-card{
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:34px 30px;text-align:center;display:flex;flex-direction:column;position:relative;
}
.price-card.hot{border-color:var(--gold);border-width:2px;box-shadow:0 20px 46px -28px rgba(180,137,43,.5)}
.price-card .tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#fff;font-family:var(--ui);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .9rem;border-radius:2px;white-space:nowrap;
}
.price-card h3{font-size:1.15rem;color:var(--navy)}
.price-card .amount{font-family:var(--display);font-size:2.5rem;color:var(--navy);margin:.9rem 0 .1rem}
.price-card .per{font-family:var(--ui);font-size:.8rem;color:var(--muted);margin-bottom:1.1rem}
.price-card p{color:var(--muted);font-size:.92rem;flex:1}
.price-card .btn{justify-content:center;margin-top:1.2rem}

table.pricing{
  width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--rule);font-size:.95rem;
}
table.pricing caption{
  caption-side:top;text-align:left;font-family:var(--ui);font-size:.78rem;
  letter-spacing:.06em;color:var(--muted);padding-bottom:.7rem;
}
table.pricing th{
  font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--navy);text-align:left;padding:.85rem 1.1rem;
}
table.pricing td{padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.pricing tr:last-child td{border-bottom:0}
table.pricing td.price{font-family:var(--ui);font-weight:600;color:var(--navy);white-space:nowrap}
table.pricing td .pkg{font-weight:600;color:var(--navy);display:block;font-family:var(--ui);font-size:.92rem}
table.pricing td .pkgnote{color:var(--muted);font-size:.88rem}
table.pricing a{color:var(--gold);font-weight:600;text-decoration:none;font-family:var(--ui);font-size:.85rem}
table.pricing a:hover{text-decoration:underline}

/* data lists / country columns */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.region h3{font-size:1.15rem;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.5rem;margin-bottom:.8rem}
.region ul{list-style:none;margin:0;padding:0;font-family:var(--ui);font-size:.88rem;color:var(--muted);columns:1}
.region li{padding:.22rem 0}

/* view tabs (coverage page: countries / China in depth) */
.view-tabs-wrap{border-bottom:1px solid var(--rule);background:var(--card)}
.view-tabs{display:flex;gap:2.2rem}
.view-tab{
  font-family:var(--ui);font-weight:600;font-size:.85rem;letter-spacing:.02em;
  color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;
  padding:1.15rem 0;cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.view-tab:hover{color:var(--navy)}
.view-tab.is-active{color:var(--navy);border-bottom-color:var(--gold)}
[hidden]{display:none!important}

/* itemised data table (China provinces, etc.) */
table.itemised{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);font-size:.9rem}
table.itemised th{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy);text-align:left;padding:.8rem 1rem}
table.itemised td{padding:.75rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.itemised tr:last-child td{border-bottom:0}
table.itemised tr:nth-child(even){background:rgba(180,137,43,.05)}
table.itemised td:first-child{font-family:var(--ui);font-weight:600;color:var(--navy);white-space:nowrap}
table.itemised td:nth-child(2){color:var(--ink);white-space:nowrap}
table.itemised td:last-child{color:var(--muted)}
table.itemised .none{font-style:italic;color:var(--muted)}

/* dark CTA band */
.section--dark{background:var(--navy);color:#eef2f7}
.cta-band{padding:76px 0;text-align:center}
.cta-band h2{font-size:2.2rem;color:#fff;max-width:22ch;margin:0 auto 1rem}
.cta-band p{color:#b7c4d2;max-width:48ch;margin:0 auto 2rem;font-size:1.06rem}
.cta-band .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* did-you-know strip */
.dyk{background:var(--navy);color:#eaf0f6}
.dyk-inner{display:flex;align-items:center;gap:1.4rem;padding:20px 0;flex-wrap:wrap}
.dyk-label{font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);white-space:nowrap;border-right:1px solid rgba(255,255,255,.2);padding-right:1.4rem}
.dyk-fact{flex:1;min-width:260px;font-family:var(--display);font-size:1.12rem;line-height:1.4;color:#fff;min-height:3em;display:flex;align-items:center}
.dyk-fact span{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.dyk-fact span.show{opacity:1;transform:none}
.dyk a.go{font-family:var(--ui);font-size:.85rem;font-weight:600;color:var(--gold-bright);text-decoration:none;white-space:nowrap}
.dyk a.go:hover{text-decoration:underline}
.dyk-dots{display:flex;gap:.45rem;padding:0 0 14px}
.dyk-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:background .3s}
.dyk-dots i.on{background:var(--gold-bright)}

/* footer */
footer.site{background:var(--navy-deep);color:#c3cedb;font-family:var(--ui);padding:56px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
footer.site .flogo svg{height:46px;width:auto;display:block}
footer.site .ftag{font-size:.86rem;color:#93a3b5;margin-top:.9rem;max-width:36ch;line-height:1.55}
footer.site h4{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 1rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.6rem}
footer.site a{color:#c3cedb;text-decoration:none;font-size:.9rem}
footer.site a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.78rem;color:#8496a9}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* two-column feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.align-top{align-items:start}

/* dark data panel (hero chart etc.) */
.panel{
  background:var(--navy);border-radius:6px;padding:26px 26px 20px;
  box-shadow:0 24px 60px -30px rgba(11,31,56,.7);color:#eaf0f6;
}
.panel .plabel{font-family:var(--ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:.35rem}
.panel .ptitle{font-family:var(--display);font-size:1.1rem;color:#fff;margin-bottom:1rem}
.panel svg{width:100%;height:auto;display:block}
.panel .legend{display:flex;gap:1.2rem;font-family:var(--ui);font-size:.72rem;color:#b7c4d2;margin-top:.7rem;flex-wrap:wrap}
.panel .legend i{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:.4rem}

/* stat strip */
.strip{background:var(--navy-deep);color:#eef2f7}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:22px 28px}
.stat{font-family:var(--ui);text-align:center;flex:1 1 auto;min-width:120px}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:1.65rem;color:#fff;line-height:1}
.stat span{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#9fb0c2;margin-top:.4rem}

/* book cover mock */
.bookcover{
  aspect-ratio:2/3;max-width:280px;background:var(--navy);border-radius:3px;
  box-shadow:14px 14px 0 -4px var(--gold),0 26px 50px -24px rgba(11,31,56,.7);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:34px 26px;color:#fff;margin:0 auto;
}
.bookcover .btop{font-family:var(--ui);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright)}
.bookcover .btitle{font-family:var(--display);font-size:1.7rem;line-height:1.15}
.bookcover .bauth{font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#b7c4d2}
.bookcover .brule{width:44px;height:3px;background:var(--gold);margin:.9rem 0}

/* real book cover image */
.bookcover-img{
  display:block;width:100%;max-width:400px;height:auto;aspect-ratio:2/3;object-fit:cover;
  border:1px solid var(--rule);border-radius:3px;margin:0 auto;
  box-shadow:14px 14px 0 -4px var(--gold),0 26px 50px -24px rgba(11,31,56,.7);
}

/* forms */
.form{display:grid;gap:1rem;max-width:560px}
.form label{font-family:var(--ui);font-size:.8rem;font-weight:600;color:var(--navy);display:block;margin-bottom:.35rem}
.form input,.form textarea{
  width:100%;padding:.8rem .95rem;font-family:var(--ui);font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:3px;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold-bright);border-color:var(--gold)}

/* prose blocks */
.prose{max-width:68ch}
.prose h2{font-size:1.7rem;color:var(--navy);margin:2.2rem 0 .8rem}
.prose h3{font-size:1.25rem;color:var(--navy);margin:1.8rem 0 .6rem}
.prose ul{margin:0 0 1rem;padding-left:1.2rem}
.prose li{margin-bottom:.4rem}

.note-muted{font-family:var(--ui);font-size:.82rem;color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .price-cards{grid-template-columns:1fr}
  .region-grid{grid-template-columns:repeat(2,1fr)}
  .steps.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1240px){
  .navrow{height:117px}
  .brand svg{height:72px}
  nav.main{
    position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--cream);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:96px 32px;gap:.6rem;transform:translateX(100%);transition:transform .28s ease;
    box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);overflow-y:auto;
  }
  nav.main.open{transform:none}
  nav.main .btn{width:100%;justify-content:center;margin-top:.8rem}
  .navitem{width:100%}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--gold);border-radius:0;background:transparent;
    min-width:0;padding:.2rem 0 .2rem .9rem;margin:.2rem 0 .6rem;
  }
  .menu-btn{display:block}
  body.nav-open{overflow:hidden}
}
@media(max-width:900px){
  .split,.split.wide-left{grid-template-columns:1fr;gap:38px}
  .cards,.cards.three,.steps{grid-template-columns:1fr}
  .pagehead h1{font-size:2.2rem}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:560px){
  .navrow{height:92px}
  .brand svg{height:54px}
  .subnav-row{padding:0 18px;gap:1.1rem}
  .subnav-row a{font-size:.74rem}
  .region-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .strip .stat{min-width:44%}
  table.pricing{font-size:.85rem}
  table.pricing th,table.pricing td{padding:.65rem .7rem}
  table.itemised{font-size:.82rem}
  table.itemised th,table.itemised td{padding:.6rem .7rem}
}
@media(max-width:380px){
  .navrow{height:80px}
  .brand svg{height:44px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}