/* v6.4.1 — working brand identity + semantic colour system */
:root{
  --infra:#68d9ff;--infra-deep:#359ee8;
  --research:#a78bfa;--research-deep:#7f63d9;
  --energy:#7fe0c2;--energy-deep:#39b994;
  --signal-positive:#5bd18f;
}
/* Brand: the mark is deliberately literal 中 at the centre; network lines remain partial. */
.sitebar{border-bottom:1px solid transparent;border-image:linear-gradient(90deg,var(--infra),var(--energy),var(--research)) 1}
.sitebar .brand{display:flex;align-items:center;gap:10px;line-height:1.05}.sitebar .brand::before{content:"";width:32px;height:32px;flex:0 0 32px;background:url('brand-mark.svg') center/contain no-repeat}.sitebar .brand span{display:block}
.home-hero.editorial-hero{position:relative}
.hero-brandmark{position:absolute;right:clamp(34px,5vw,92px);top:clamp(34px,4vw,66px);width:clamp(190px,17vw,285px);height:auto;opacity:.96;filter:drop-shadow(0 0 30px rgba(104,217,255,.10));pointer-events:none}
.home-hero .hero-heading{padding-right:clamp(230px,22vw,350px)}
.brand-caption{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#91a9b8;text-align:center;margin-top:4px}
/* Semantic palette: cyan=digital, mint=energy/resources, purple=research/change. */
.experience-strip{border-bottom:1px solid rgba(127,224,194,.20)}
.experience-inner a strong,.page-intro .eyebrow{color:var(--infra)}
.hero-returning{border-color:rgba(167,139,250,.65)!important;box-shadow:inset 3px 0 0 var(--research)}
.hero-returning .eyebrow,.hero-returning .return-primary{color:#c4b5fd!important}
.brand-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#b5c6d2}.brand-legend span{display:inline-flex;align-items:center;gap:7px}.brand-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%}.brand-legend .infra::before{background:var(--infra)}.brand-legend .energy::before{background:var(--energy)}.brand-legend .research::before{background:var(--research)}
.connected-system{border-top:2px solid transparent!important;border-image:linear-gradient(90deg,var(--infra),var(--energy),var(--research)) 1!important}
.connected-system .eyebrow,.system-intro .eyebrow{color:var(--infra)!important}
/* Energy is a category, not a positive status. */
.energy-semantic,.visual-cue.energy-loop{border-color:rgba(127,224,194,.48)!important;background:linear-gradient(145deg,rgba(127,224,194,.10),rgba(255,255,255,.02))!important;box-shadow:inset 3px 0 0 rgba(127,224,194,.78)}
.energy-semantic small,.energy-semantic .eyebrow,.visual-cue.energy-loop figcaption small{color:var(--energy)!important}.energy-semantic h1,.energy-semantic h2,.energy-semantic h3{color:#e3fff7}.energy-semantic a{color:#a9f2dc!important}
.energy-chip{border:1px solid rgba(127,224,194,.48)!important;background:rgba(127,224,194,.08)!important}.energy-chip strong{color:var(--energy)!important}
a[href*="power-energy"]{text-decoration-color:rgba(127,224,194,.65)}
a[href*="power-energy"]:hover{color:var(--energy)!important}
/* Research/change keeps purple; latest evidence is visually distinct from architecture colour. */
.research-digest,.latest-research,.thesis-disclosures{--section-accent:var(--research)}
.research-digest .eyebrow,.thesis-change small{color:#c4b5fd!important}
/* Light touches that make the palette visible without recolouring the editorial surface. */
.intent-router{border-top:1px solid rgba(104,217,255,.18)}
.intent-router .eyebrow{color:var(--infra)!important}
.publication-footer{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(104,217,255,.55),rgba(127,224,194,.55),rgba(167,139,250,.55)) 1}
.publication-footer::before{content:"";display:block;width:54px;height:54px;margin:0 auto 14px;background:url('brand-mark.svg') center/contain no-repeat;opacity:.90}
@media(max-width:1050px){.hero-brandmark{width:180px;right:26px;top:32px}.home-hero .hero-heading{padding-right:215px}}
@media(max-width:760px){.hero-brandmark{position:relative;display:block;right:auto;top:auto;width:132px;margin:0 0 18px auto;opacity:.90}.home-hero .hero-heading{padding-right:0}.sitebar .brand::before{width:28px;height:28px;flex-basis:28px}.brand-legend{display:grid;gap:7px}}
@media(max-width:480px){.hero-brandmark{width:112px;margin-bottom:12px}}

/* v6.4.2 — identity refinement: preserve 中 as an intact calligraphic character. */
.hero-brandmark{width:clamp(280px,24vw,420px);right:clamp(24px,3vw,58px);top:clamp(28px,3vw,48px);filter:drop-shadow(0 0 34px rgba(104,217,255,.09))}
.home-hero .hero-heading{padding-right:clamp(330px,30vw,500px)}
/* Make the semantic palette visible in navigation/content without turning it decorative. */
.route-grid .route-card:nth-child(3n+1),.intent-router .route-card:nth-child(3n+1){border-top:2px solid rgba(104,217,255,.70)}
.route-grid .route-card:nth-child(3n+2),.intent-router .route-card:nth-child(3n+2){border-top:2px solid rgba(127,224,194,.68)}
.route-grid .route-card:nth-child(3n),.intent-router .route-card:nth-child(3n){border-top:2px solid rgba(167,139,250,.70)}
.brand-legend{padding:10px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
@media(max-width:1100px){.hero-brandmark{width:245px;right:20px}.home-hero .hero-heading{padding-right:285px}}
@media(max-width:760px){.hero-brandmark{position:relative;display:block;width:190px;right:auto;top:auto;margin:0 auto 18px}.home-hero .hero-heading{padding-right:0}}
@media(max-width:480px){.hero-brandmark{width:160px}}

/* v6.4.3 — approved brand artwork. Do not redraw or distort 中. */
.home-hero .hero-brandmark{width:clamp(330px,29vw,500px);height:auto;object-fit:contain;border-radius:12px;filter:none;opacity:1;right:clamp(24px,3vw,58px);top:clamp(28px,3vw,48px)}
.home-hero .hero-heading{padding-right:clamp(390px,34vw,570px)}
@media(max-width:1100px){.home-hero .hero-brandmark{width:300px;right:20px}.home-hero .hero-heading{padding-right:345px}}
@media(max-width:760px){.home-hero .hero-brandmark{position:relative;display:block;width:min(76vw,340px);right:auto;top:auto;margin:0 auto 22px}.home-hero .hero-heading{padding-right:0}}
@media(max-width:480px){.home-hero .hero-brandmark{width:min(84vw,310px)}}

/* v6.4.4 — integrate approved artwork into the hero rather than displaying it as a pasted rectangle. */
.home-hero.editorial-hero{overflow:hidden}
.home-hero .hero-brandmark{
  width:clamp(360px,31vw,540px);
  right:clamp(28px,4.2vw,78px);
  top:clamp(54px,5.5vw,88px);
  border-radius:0;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.14));
  opacity:.98;
}
.home-hero .hero-heading{padding-right:clamp(420px,36vw,610px)}
@media(max-width:1180px){
  .home-hero .hero-brandmark{width:310px;right:24px;top:58px}
  .home-hero .hero-heading{padding-right:360px}
}
@media(max-width:860px){
  .home-hero .hero-brandmark{position:relative;display:block;width:min(64vw,330px);right:auto;top:auto;margin:4px auto 26px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.12))}
  .home-hero .hero-heading{padding-right:0}
}
@media(max-width:480px){.home-hero .hero-brandmark{width:min(76vw,290px);margin-bottom:20px}}


/* v6.4.5 — native web identity + brighter semantic energy palette.
   The hero uses the vector mark itself: no image panel, no pasted background. */
:root{
  --infra:#61d7ff;
  --infra-deep:#2fa8e8;
  --energy:#72f0c4;
  --energy-deep:#3bd7a3;
  --research:#a98cff;
  --research-deep:#8064e3;
}
.home-hero.editorial-hero{
  background:
    radial-gradient(circle at 84% 19%,rgba(114,240,196,.075),transparent 18%),
    radial-gradient(circle at 75% 10%,rgba(97,215,255,.075),transparent 26%),
    linear-gradient(180deg,rgba(31,57,82,.94),rgba(28,50,72,.96));
}
.home-hero .hero-brandmark{
  content:url('brand-mark.svg');
  width:clamp(390px,33vw,570px);
  right:clamp(22px,3.5vw,66px);
  top:clamp(30px,3vw,50px);
  opacity:1;
  filter:drop-shadow(0 0 24px rgba(97,215,255,.09));
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  mix-blend-mode:normal;
}
.home-hero .hero-heading{padding-right:clamp(450px,38vw,640px)}
.home-hero .hero-heading:after{
  content:"";display:block;width:92px;height:2px;margin-top:24px;
  background:linear-gradient(90deg,var(--infra),var(--energy),var(--research));
  border-radius:2px;
}
.brand-legend .energy::before{background:var(--energy);box-shadow:0 0 10px rgba(114,240,196,.32)}
.brand-legend .infra::before{background:var(--infra)}
.brand-legend .research::before{background:var(--research)}
/* Mint is an energy category, not a generic success colour. */
.layer-table tbody tr:last-child th{box-shadow:inset 3px 0 0 rgba(114,240,196,.72)}
.layer-table tbody tr:last-child th a{color:#a9f8df}
a[href*="power-energy"]{text-decoration-color:rgba(114,240,196,.78)!important}
.energy-semantic,.visual-cue.energy-loop{border-color:rgba(114,240,196,.58)!important;background:linear-gradient(145deg,rgba(114,240,196,.12),rgba(255,255,255,.02))!important;box-shadow:inset 3px 0 0 rgba(114,240,196,.86)}
.energy-semantic small,.energy-semantic .eyebrow,.visual-cue.energy-loop figcaption small{color:var(--energy)!important}
/* Route cards keep their meaning; colour is no longer assigned by arbitrary position. */
.route-grid .route-card:nth-child(n),.intent-router .route-card:nth-child(n){border-top-color:rgba(97,215,255,.36)}
.route-grid a[href*="companies"]{border-top-color:rgba(169,140,255,.58)}
.route-grid a[href*="dashboard"],.intent-router a[href*="methodology"]{border-top-color:rgba(169,140,255,.58)}
.intent-router .featured,.intent-router .full-thesis{border-top-color:rgba(97,215,255,.68)}
@media(max-width:1180px){
 .home-hero .hero-brandmark{width:330px;right:18px;top:42px}
 .home-hero .hero-heading{padding-right:380px}
}
@media(max-width:860px){
 .home-hero .hero-brandmark{position:relative;display:block;width:min(68vw,360px);right:auto;top:auto;margin:0 auto 20px;filter:drop-shadow(0 0 20px rgba(97,215,255,.08))}
 .home-hero .hero-heading{padding-right:0}
}
@media(max-width:480px){.home-hero .hero-brandmark{width:min(80vw,310px)}}

/* v6.4.6 — homepage typography and spatial refinement.
   Use the available desktop width; improve legibility without changing the information hierarchy. */
@media (min-width:1181px){
  .home-hero.editorial-hero{padding-left:clamp(30px,3.4vw,68px)!important;padding-right:clamp(30px,3.4vw,68px)!important}
  .home-hero .hero-heading{max-width:none;padding-right:clamp(500px,39vw,690px)}
  .home-hero .hero-heading h1{max-width:1040px}
  .home-hero .hero-heading .hero-deck{max-width:1040px;font-size:clamp(20px,1.65vw,27px);line-height:1.55}
  .home-hero .hero-lower{grid-template-columns:minmax(0,2.55fr) minmax(390px,.95fr);gap:44px}
  .home-hero .hero-lower .hero-primary{padding-right:8px}
  .page-intro.editorial-hero .hero-thesis p{max-width:1100px;font-size:18px;line-height:1.72}
  .page-intro.editorial-hero .edition-note{font-size:14px}
  .brand-legend{font-size:14px;gap:20px}
  .hero-returning{padding:26px 28px}
  .hero-returning h2{font-size:30px}
  .hero-returning time{font-size:14px}
  .hero-returning p{font-size:16px;line-height:1.65}
  .hero-returning .return-qualifier{font-size:14px;line-height:1.6}
  .return-links a{font-size:13px}
}
/* Primary navigation should remain readable on large screens. */
@media (min-width:1100px){
  .sitebar-inner{max-width:1500px;padding-left:28px;padding-right:28px}
  .site-menu{gap:8px}
  .site-menu summary{font-size:15px;padding:12px 14px}
  .brand{font-size:15px;max-width:190px}
}
/* Preserve comfortable reading sizes when the hero stacks. */
@media (max-width:900px){
  .hero-returning p{font-size:16px}
  .hero-returning .return-qualifier{font-size:14px}
  .return-links a{font-size:14px}
}

/* v6.4.7 — hero composition + research-flow cleanup */
@media (min-width:1181px){
  .home-hero .hero-brandmark{width:clamp(330px,27vw,455px);right:clamp(34px,4vw,76px);top:clamp(34px,3.2vw,54px)}
  .home-hero .hero-heading{padding-right:clamp(420px,34vw,570px)}
  .home-hero .hero-lower{display:block;margin-top:28px}
  .home-hero .hero-lower .hero-primary{padding-right:0}
  .page-intro.editorial-hero .hero-thesis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;max-width:1280px}
  .page-intro.editorial-hero .hero-thesis p{max-width:none;margin:0;font-size:18px;line-height:1.72}
  .home-hero .hero-lower .hero-returning{margin-top:28px;width:100%;display:grid;grid-template-columns:minmax(210px,.62fr) minmax(0,1.65fr) minmax(240px,.8fr);column-gap:30px;align-items:start;padding:22px 26px}
  .hero-returning .eyebrow,.hero-returning h2,.hero-returning time{grid-column:1}
  .hero-returning h2{margin-bottom:4px}
  .hero-returning > p:not(.return-qualifier){grid-column:2;grid-row:1 / span 4;margin:0}
  .hero-returning .return-qualifier{grid-column:3;grid-row:1 / span 2;margin:0;padding-top:0;border-top:0}
  .hero-returning .return-primary{grid-column:3;grid-row:3;margin-top:12px}
  .hero-returning .return-links{grid-column:3;grid-row:4;margin-top:12px;padding-top:10px}
}


/* v6.4.8 — connected-system identity refinement.
   The network implies a sphere through varied routes; it is not a decorative ring. */
.home-hero .hero-brandmark{filter:drop-shadow(0 0 28px rgba(97,215,255,.08))}
@media (min-width:1181px){.home-hero .hero-brandmark{width:clamp(335px,27.5vw,465px)}}

/* v6.8 — signature mint reintegration.
   Mint is part of the China AI Evolution identity as well as the energy semantic.
   Use it for restrained wayfinding and editorial emphasis; cyan remains compute/digital,
   purple remains research/change, and amber remains caution/uncertainty. */
:root{
  --brand-mint:#72f0c4;
  --brand-mint-soft:#a9f8df;
  --brand-mint-line:rgba(114,240,196,.42);
  --brand-mint-wash:rgba(114,240,196,.075);
}
/* Persistent identity cues */
.sitebar .brand{color:#eefcf7}
.sitebar .brand::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--brand-mint);box-shadow:0 0 12px rgba(114,240,196,.35);margin-left:2px}
.site-menu summary:hover,.site-menu a:hover{color:var(--brand-mint-soft)}
.site-menu details[open] > summary{color:var(--brand-mint-soft)}
/* Editorial wayfinding: mint becomes the signature accent without recolouring semantic states. */
main > section:not(.research-digest):not(.latest-research):not(.thesis-disclosures) > .eyebrow,
main > section:not(.research-digest):not(.latest-research):not(.thesis-disclosures) > .section-kicker,
.page-intro:not(.research-digest) .eyebrow{color:var(--brand-mint-soft)}
main > section > h2::after{content:"";display:block;width:46px;height:2px;margin-top:13px;background:linear-gradient(90deg,var(--brand-mint),rgba(114,240,196,0));border-radius:2px}
/* Links and controls get a quiet mint interaction cue. */
main a:not(.button):not(.btn):not(.route-card):not(.gateway):hover{color:var(--brand-mint-soft)}
button:hover,[role="button"]:hover{border-color:var(--brand-mint-line)}
/* Cards retain their category colours, with mint as the common brand edge. */
.card,.panel,.callout,.gateway,.route-card{transition:border-color .18s ease,transform .18s ease,background-color .18s ease}
.card:hover,.panel:hover,.gateway:hover,.route-card:hover{border-color:var(--brand-mint-line)}
/* Homepage: make the signature colour visible in the story without turning it into an energy page. */
.home-hero.editorial-hero{background:
 radial-gradient(circle at 84% 19%,rgba(114,240,196,.105),transparent 20%),
 radial-gradient(circle at 75% 10%,rgba(97,215,255,.06),transparent 28%),
 linear-gradient(180deg,rgba(31,57,82,.94),rgba(28,50,72,.96))}
.home-hero .hero-heading:after{background:linear-gradient(90deg,var(--brand-mint),var(--infra),var(--research))}
.home-hero .hero-deck strong{color:#f2fffb}
/* Preserve semantic meaning: research stays purple, uncertainty/caution styles remain amber,
   energy can still use the same mint more strongly when it is genuinely about energy. */
.research-digest .eyebrow,.latest-research .eyebrow,.thesis-disclosures .eyebrow,.thesis-change small{color:#c4b5fd!important}
.energy-semantic .eyebrow,.energy-semantic small,.visual-cue.energy-loop figcaption small{color:var(--energy)!important}
/* Footer closes every page with the brand rather than a generic rule. */
.publication-footer{border-image:linear-gradient(90deg,rgba(114,240,196,.7),rgba(97,215,255,.42),rgba(169,140,255,.42)) 1}
@media(max-width:760px){
 .sitebar .brand::after{display:none}
 main > section > h2::after{width:38px;margin-top:10px}
}