:root {
  --crp-ink: #09090c;
  --crp-card: #14141a;
  --crp-line: rgba(255, 255, 255, .09);
  --crp-gold: #f0a51e;
  --crp-gold-soft: rgba(240, 165, 30, .12);
  --crp-red: #d42b1e;
}

body.crp-page {
  background: var(--crp-ink);
  color: var(--text-bright, #f7f7fa);
}

.crp-page .skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--crp-gold);
  color: #09090c;
  border-radius: 8px;
  font-weight: 800;
}

.crp-page .skip-link:focus { top: 12px; }
.crp-nav { background: rgba(9, 9, 12, .86); backdrop-filter: blur(18px); }
.crp-nav .nav__links a[aria-current="page"] { color: var(--crp-gold); }
.crp-nav .nav__theme { min-width: auto; }

.crp-kicker,
.crp-eyebrow {
  color: var(--crp-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.crp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(240, 165, 30, .3);
  background: rgba(240, 165, 30, .07);
  border-radius: 999px;
  padding: 8px 13px;
}

.crp-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crp-gold);
  box-shadow: 0 0 16px var(--crp-gold);
}

.crp-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h, 72px) + 84px) 0 96px;
  background:
    radial-gradient(circle at 76% 43%, rgba(240, 165, 30, .13), transparent 28%),
    radial-gradient(circle at 12% 10%, rgba(212, 43, 30, .12), transparent 28%),
    linear-gradient(135deg, #09090c 0%, #101016 100%);
}

.crp-hero::before,
.crp-detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.crp-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 72px;
  align-items: center;
}

.crp-hero h1,
.crp-detail-hero h1 {
  max-width: 830px;
  margin: 22px 0;
  color: #fff;
  font-size: clamp(40px, 6.3vw, 76px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.crp-hero p,
.crp-detail-hero p {
  max-width: 720px;
  color: rgba(235, 235, 244, .7);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.75;
}

.crp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.crp-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(360px, 86vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(240, 165, 30, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 165, 30, .12), transparent 64%);
  box-shadow: inset 0 0 80px rgba(240, 165, 30, .05), 0 0 90px rgba(0, 0, 0, .35);
}

.crp-orbit::before,
.crp-orbit::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}

.crp-orbit::before { inset: 13%; }
.crp-orbit::after { inset: 30%; border-color: rgba(240, 165, 30, .26); }
.crp-orbit span { font-size: clamp(72px, 10vw, 112px); font-weight: 800; line-height: .8; color: #fff; }
.crp-orbit strong { position: absolute; top: 62%; width: 160px; text-align: center; color: rgba(255, 255, 255, .65); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.crp-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--crp-gold); box-shadow: 0 0 18px var(--crp-gold); }
.crp-orbit i:nth-of-type(1) { top: 11%; left: 48%; }
.crp-orbit i:nth-of-type(2) { top: 62%; right: 7%; }
.crp-orbit i:nth-of-type(3) { bottom: 11%; left: 24%; }

.crp-map-section { padding: 104px 0; background: #0c0c11; }
.crp-map-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); gap: 36px; align-items: stretch; }
.crp-map-layout h2,
.crp-section-head h2,
.crp-gate h2,
.crp-detail-body h2,
.crp-related h2 { margin: 10px 0 14px; color: #fff; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.035em; }
.crp-map-layout > div > p,
.crp-section-head p { max-width: 720px; color: rgba(235, 235, 244, .62); line-height: 1.75; }

.crp-map {
  position: relative;
  min-height: 480px;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--crp-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 65% 46%, rgba(240, 165, 30, .09), transparent 40%),
    linear-gradient(150deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}

.crp-map svg { display: block; width: 100%; height: 100%; padding: 18px; color: rgba(255, 255, 255, .1); }
/* China, drawn from coordinates rather than sketched.
   Two earlier versions failed for the same underlying reason: neither was
   built from real geography. The first was an arbitrary polygon; the second
   replaced it with coast-and-contour bands, which encoded something true but
   still was not the country.
   This outline is a 64-vertex simplification of China's border, projected
   equirectangularly (lon 71-137, lat 17-55) into the 520x390 viewBox, with
   Hainan as a second path. The nine markers are placed by their real
   coordinates through the same projection — Shenzhen at 113.3E 23.0N, Tianjin
   at 117.2E 39.1N, and so on — so their positions follow from the data rather
   than from eyeballing percentages. All nine verify as inside the polygon. */
.crp-map__land {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(240, 165, 30, .3);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* Markers live inside the SVG, in viewBox units.
   They used to be absolutely positioned <a> elements at percentages of the
   .crp-map container, while the landmass was an inset, letterboxed SVG that
   painted at only 267x192 inside a 356x330 box. The two never shared a
   coordinate system, so every marker was pushed outward relative to the shape
   it was supposed to sit on — the first one rendered at 90.7% / 86.6% of the
   landmass, jammed into its bottom-right corner. In viewBox units the marker
   and the coastline scale together and cannot drift apart. */
.crp-node { cursor: pointer; }
.crp-node__halo {
  fill: rgba(240, 165, 30, .10);
  stroke: rgba(240, 165, 30, .28);
  stroke-width: 1;
  transition: fill .2s ease, stroke .2s ease, r .2s ease;
}
.crp-node__dot {
  fill: rgba(9, 9, 12, .94);
  stroke: rgba(240, 165, 30, .62);
  stroke-width: 1.6;
  transition: fill .2s ease, stroke .2s ease;
}
.crp-node__code {
  fill: var(--crp-gold);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: fill .2s ease;
}
.crp-node__num { fill: rgba(255, 255, 255, .40); font-size: 8.5px; font-weight: 700; }

.crp-node:hover .crp-node__halo,
.crp-node:focus-visible .crp-node__halo { fill: rgba(240, 165, 30, .20); stroke: rgba(240, 165, 30, .55); r: 20; }
.crp-node:hover .crp-node__dot,
.crp-node:focus-visible .crp-node__dot { fill: var(--crp-gold); stroke: var(--crp-gold); }
.crp-node:hover .crp-node__code,
.crp-node:focus-visible .crp-node__code { fill: #09090c; }
.crp-node:focus-visible { outline: none; }
.crp-node:focus-visible .crp-node__halo { stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .crp-node__halo, .crp-node__dot, .crp-node__code { transition: none; }
}

.crp-map-caption {
  margin: 14px 0 0;
  color: rgba(235, 235, 244, .52);
  font-size: 12.5px;
  line-height: 1.6;
}

.crp-method,
.crp-private {
  border: 1px solid rgba(240, 165, 30, .22);
  border-radius: 24px;
  padding: 30px;
  background: linear-gradient(155deg, rgba(240, 165, 30, .08), rgba(255, 255, 255, .02));
}

.crp-method { align-self: end; }
.crp-method__signal,
.crp-private__badge { display: inline-block; margin-bottom: 18px; color: var(--crp-gold); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.crp-method h3,
.crp-private h2 { margin: 0 0 12px; color: #fff; font-size: 23px; line-height: 1.25; }
.crp-method ul,
.crp-private ul { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
.crp-method li,
.crp-private li { position: relative; padding-left: 22px; color: rgba(235, 235, 244, .68); font-size: 13px; line-height: 1.6; }
.crp-method li::before,
.crp-private li::before { content: '◇'; position: absolute; left: 0; color: var(--crp-gold); }

.crp-regions { padding: 104px 0; background: #111117; }
.crp-section-head { max-width: 760px; margin-bottom: 46px; }
.crp-cluster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.crp-cluster-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--crp-line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.crp-cluster-card::after { content: ''; position: absolute; width: 140px; height: 140px; right: -80px; bottom: -80px; border: 1px solid rgba(240, 165, 30, .2); border-radius: 50%; }
.crp-cluster-card:hover,
.crp-cluster-card:focus-visible { transform: translateY(-4px); border-color: rgba(240, 165, 30, .42); background: linear-gradient(145deg, rgba(240, 165, 30, .07), rgba(255, 255, 255, .02)); outline: none; }
.crp-cluster-card__number { color: rgba(255, 255, 255, .25); font-size: 11px; font-weight: 800; }
.crp-cluster-card h2 { margin: 8px 0 12px; color: #fff; font-size: 21px; letter-spacing: -.025em; }
.crp-cluster-card p { color: rgba(235, 235, 244, .6); font-size: 13px; line-height: 1.65; }
.crp-arrow { color: var(--crp-gold); font-size: 17px; }

.crp-gate { padding: 92px 0; background: #09090c; }
.crp-gate__inner { display: grid; grid-template-columns: 1.2fr .8fr auto; gap: 42px; align-items: center; padding: 44px; border: 1px solid rgba(240, 165, 30, .2); border-radius: 24px; background: radial-gradient(circle at 78% 0%, rgba(240, 165, 30, .12), transparent 32%), #101015; }
.crp-gate p { max-width: 690px; color: rgba(235, 235, 244, .63); line-height: 1.7; }
.crp-gate__list { display: grid; gap: 10px; }
.crp-gate__list span { color: rgba(255, 255, 255, .73); font-size: 13px; }
.crp-gate__list span::before { content: '✓'; color: var(--crp-gold); margin-right: 9px; }

.crp-detail-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h, 72px) + 48px) 0 72px; background: radial-gradient(circle at 85% 30%, rgba(240, 165, 30, .12), transparent 30%), #0c0c11; }
.crp-breadcrumb { position: relative; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 48px; color: rgba(255, 255, 255, .42); font-size: 12px; }
.crp-breadcrumb a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.crp-detail-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .5fr); gap: 64px; align-items: end; }
.crp-detail-hero h1 { max-width: 900px; font-size: clamp(38px, 5.6vw, 68px); }
.crp-tags,
.crp-city-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.crp-tags span,
.crp-city-row span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: rgba(255, 255, 255, .65); font-size: 11px; }
.crp-fact-panel { display: grid; gap: 7px; padding: 26px; border: 1px solid rgba(240, 165, 30, .2); border-radius: 20px; background: rgba(255, 255, 255, .025); }
.crp-fact-panel span { color: rgba(255, 255, 255, .42); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.crp-fact-panel strong { color: #fff; font-size: 42px; line-height: 1; }
.crp-fact-panel small { color: rgba(255, 255, 255, .55); }
.crp-fact-panel hr { width: 100%; margin: 14px 0; border: 0; border-top: 1px solid var(--crp-line); }
.crp-fact-panel b { color: var(--crp-gold); font-size: 16px; }

.crp-detail-body { padding: 96px 0; background: #f7f5f1; color: #23232a; }
.crp-detail-body__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .65fr); gap: 64px; align-items: start; }
.crp-detail-body h2 { color: #15151a; }
.crp-detail-body article > p { color: #575764; font-size: 17px; line-height: 1.8; }
.crp-detail-body h3 { margin: 48px 0 18px; color: #1b1b22; font-size: 22px; }
.crp-strength-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.crp-strength-grid div { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid #dedbe0; border-radius: 12px; background: #fff; }
.crp-strength-grid span { color: var(--crp-gold); }
.crp-strength-grid strong { font-size: 13px; }
.crp-city-row span { border-color: #d9d5dc; color: #50505b; background: #fff; }
.crp-logistics { padding: 22px; border-left: 3px solid var(--crp-gold); background: #fff; box-shadow: 0 8px 30px rgba(31, 28, 24, .05); }
.crp-logistics strong { display: block; margin-bottom: 7px; color: #1d1d23; }
.crp-logistics p { margin: 0; color: #5a5a64; line-height: 1.75; }
.crp-source-list { display: grid; gap: 10px; }
.crp-source-list a { display: flex; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid #dedbe0; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.crp-source-list span { display: grid; gap: 4px; }
.crp-source-list strong { font-size: 13px; }
.crp-source-list small { color: #72727e; font-size: 11px; }
.crp-source-list em { max-width: 240px; color: #8b5d05; font-size: 11px; font-style: normal; text-align: right; }
.crp-review-note { margin-top: 16px; color: #77737b !important; font-size: 12px !important; font-style: italic; }
.crp-private { position: sticky; top: 94px; background: #111117; color: #fff; box-shadow: 0 24px 70px rgba(20, 18, 16, .15); }
.crp-private p { color: rgba(255, 255, 255, .6); line-height: 1.65; }
.crp-private .btn { width: 100%; margin-top: 12px; text-align: center; }

.crp-related { padding: 86px 0; background: #111117; }
.crp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.crp-related-grid a { display: grid; gap: 9px; padding: 23px; border: 1px solid var(--crp-line); border-radius: 15px; background: rgba(255, 255, 255, .025); color: inherit; text-decoration: none; }
.crp-related-grid strong { color: #fff; }
.crp-related-grid span { min-height: 38px; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.6; }
.crp-related-grid em,
.crp-back-link { color: var(--crp-gold); font-size: 12px; font-style: normal; }
.crp-back-link { display: inline-block; margin-top: 26px; text-decoration: none; }
.crp-footer { background: #09090c; }

html.light-mode .crp-page { background: #f6f3ee; }
html.light-mode .crp-nav { background: rgba(255, 255, 255, .9); }
html.light-mode .crp-hero,
html.light-mode .crp-detail-hero { background: radial-gradient(circle at 80% 35%, rgba(240, 165, 30, .13), transparent 30%), #f6f3ee; }
html.light-mode .crp-hero h1,
html.light-mode .crp-detail-hero h1 { color: #18181d; }
html.light-mode .crp-hero p,
html.light-mode .crp-detail-hero p { color: #62606a; }
html.light-mode .crp-map-section,
html.light-mode .crp-regions,
html.light-mode .crp-related { background: #fff; }
html.light-mode .crp-map-layout h2,
html.light-mode .crp-section-head h2,
html.light-mode .crp-related h2,
html.light-mode .crp-cluster-card h2,
html.light-mode .crp-related-grid strong { color: #1b1b21; }
html.light-mode .crp-map-layout > div > p,
html.light-mode .crp-section-head p,
html.light-mode .crp-cluster-card p,
html.light-mode .crp-related-grid span { color: #65626d; }
html.light-mode .crp-map,
html.light-mode .crp-cluster-card,
html.light-mode .crp-related-grid a { border-color: #dfdbe1; background: #fbfaf8; }
html.light-mode .crp-map svg > path:first-child { fill: rgba(44, 40, 35, .04); stroke: rgba(44, 40, 35, .16); }
html.light-mode .crp-method { background: #fffbf3; color: #1c1c22; }
html.light-mode .crp-method h3 { color: #1c1c22; }
html.light-mode .crp-method li { color: #615e67; }
html.light-mode .crp-gate { background: #f6f3ee; }

@media (max-width: 1000px) {
  .crp-cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crp-gate__inner { grid-template-columns: 1fr 1fr; }
  .crp-gate__inner > .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 800px) {
  .crp-hero { padding-top: calc(var(--nav-h, 72px) + 54px); }
  .crp-hero__grid,
  .crp-map-layout,
  .crp-detail-hero__grid,
  .crp-detail-body__grid { grid-template-columns: 1fr; }
  .crp-orbit { max-width: 300px; }
  .crp-map { min-height: 400px; }
  .crp-method { align-self: auto; }
  .crp-private { position: static; }
  .crp-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .crp-hero,
  .crp-map-section,
  .crp-regions,
  .crp-gate,
  .crp-detail-body,
  .crp-related { padding-block: 68px; }
  .crp-cluster-grid { grid-template-columns: 1fr; }
  .crp-cluster-card { min-height: 190px; }
  .crp-gate__inner { grid-template-columns: 1fr; padding: 28px; }
  .crp-gate__inner > .btn { grid-column: auto; width: 100%; }
  .crp-strength-grid { grid-template-columns: 1fr; }
  .crp-source-list a { flex-direction: column; }
  .crp-source-list em { max-width: none; text-align: left; }
  /* No per-breakpoint marker sizing needed: the markers are in viewBox units
     and scale with the map itself. */
  .crp-map { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .crp-cluster-card { transition: none; }
}

/* Two labelled facts instead of one run-on string.
   The meta read "127.80m · 2024 · Ports + air" — three values with no keys, so
   the reader had to guess that the first was population and the last was
   freight. Same data, now named, with the trailing zero dropped from figures
   that were carrying false precision. */
.crp-cluster-card__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.crp-cluster-card__meta > span { display: grid; gap: 2px; }
.crp-cluster-card__meta em {
  color: rgba(235, 235, 244, .42);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crp-cluster-card__meta b { color: rgba(255, 255, 255, .86); font-size: 13px; font-weight: 700; }
.crp-cluster-card__meta i { color: rgba(235, 235, 244, .38); font-style: normal; font-size: 10.5px; }