:root {
  --cream: #F3EFE6;
  --light: #FAF7F2;
  --paper: #FEFCF8;
  --forest: #1B4332;
  --forest-deep: #10291F;
  --mint: #40916C;
  --leaf: #52B788;
  --lime: #ECFDF5;
  --ink: #141414;
  --ink-70: rgba(20,20,20,.70);
  --ink-52: rgba(20,20,20,.52);
  --ink-34: rgba(20,20,20,.34);
  --border: rgba(20,20,20,.11);
  --serif: 'Fraunces','Noto Serif SC',Georgia,serif;
  --sans: 'Outfit','Noto Sans SC',system-ui,sans-serif;
  --max: 1280px;
  --px: 52px;
  --header: 64px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(100%,var(--max)); margin: auto; padding-inline: var(--px); }
.grain {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--px);
  background: rgba(27,67,50,.94);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.back { width: max-content; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 13px; }
.back:hover { color: #fff; }
.back i { font-style: normal; font-size: 20px; }
.header-title { color: rgba(255,255,255,.48); font-family: var(--serif); font-size: 13px; }
.lang-toggle { justify-self: end; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); }
.lang-btn { border: 0; border-radius: 999px; padding: 4px 11px; background: transparent; color: rgba(255,255,255,.56); font-size: 11px; font-weight: 600; cursor: pointer; }
.lang-btn.active { background: rgba(255,255,255,.16); color: #D8F3DC; }

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header) + 34px) 0 54px;
  background: var(--forest);
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,#000,transparent 88%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--leaf); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
h1 { margin-top: 15px; max-width: 640px; font-family: var(--serif); font-size: clamp(48px,6vw,82px); line-height: .96; letter-spacing: 0; text-wrap: balance; }
.hero-sub { max-width: 590px; margin-top: 22px; color: rgba(255,255,255,.78); font-size: clamp(19px,2.1vw,28px); line-height: 1.3; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-meta>span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 6px; color: rgba(255,255,255,.68); font-size: 11px; }
.hero-visual { width: 100%; max-width: 560px; justify-self: end; padding: 14px; border: 1px solid rgba(255,255,255,.16); background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.hero-visual img { width: 100%; aspect-ratio: 1.4; object-fit: contain; }
.hero-visual.wide img { aspect-ratio: 1.95; }

.section { padding: 104px 0; }
.light { background: var(--light); }
.lime { background: var(--lime); }
.dark { background: var(--forest); color: #fff; }
.section-head { display: grid; grid-template-columns: 180px 1fr; gap: 32px; margin-bottom: 48px; }
.index { color: var(--mint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dark .index { color: var(--leaf); }
.section-head h2,.overview h2 { max-width: 940px; font-family: var(--serif); font-size: clamp(38px,5vw,62px); line-height: 1.04; letter-spacing: 0; text-wrap: balance; }
.section-head p { max-width: 820px; margin-top: 18px; color: var(--ink-52); font-size: 15px; line-height: 1.78; }
.dark .section-head p { color: rgba(255,255,255,.6); }

.overview { display: grid; grid-template-columns: 1.18fr .82fr; gap: 72px; }
.overview h2 { font-size: clamp(34px,4vw,52px); }
.overview-copy p { margin-top: 20px; color: var(--ink-52); font-size: 15px; line-height: 1.82; }
.facts { border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.fact b { color: var(--mint); font-size: 10px; text-transform: uppercase; }
.fact span { color: var(--ink-70); font-size: 13px; }

.three-grid,.four-grid,.metric-strip { display: grid; border-block: 1px solid var(--border); }
.three-grid { grid-template-columns: repeat(3,1fr); margin-top: 58px; }
.four-grid { grid-template-columns: repeat(4,1fr); }
.metric-strip { grid-template-columns: repeat(3,1fr); margin-top: 52px; }
.item,.step,.metric { padding: 27px; }
.item+.item,.step+.step,.metric+.metric { border-left: 1px solid var(--border); }
.item em,.step em { font-family: var(--serif); font-size: 30px; color: var(--mint); font-style: normal; }
.item h3,.step h3 { margin-top: 12px; font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.item p,.step p { margin-top: 8px; color: var(--ink-52); font-size: 12.5px; }
.dark .four-grid { border-color: rgba(255,255,255,.18); }
.dark .step+.step { border-color: rgba(255,255,255,.18); }
.dark .step em { color: var(--leaf); }
.dark .step p { color: rgba(255,255,255,.56); }
.metric strong { display: block; color: var(--forest); font-family: var(--serif); font-size: clamp(38px,5vw,58px); line-height: 1; }
.metric span { display: block; max-width: 260px; margin-top: 9px; color: var(--ink-52); font-size: 12px; }

.callout { margin-top: 46px; padding: 28px; border-left: 3px solid var(--mint); background: var(--lime); display: grid; grid-template-columns: 190px 1fr; gap: 28px; }
.callout b { color: var(--forest); font-family: var(--serif); font-size: 21px; }
.callout p { color: var(--ink-52); font-size: 13px; }
.dark .callout { background: rgba(255,255,255,.06); border-color: var(--leaf); }
.dark .callout b { color: #D8F3DC; }
.dark .callout p { color: rgba(255,255,255,.58); }

.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 54px; align-items: start; }
.split.reverse { grid-template-columns: 1.18fr .82fr; }
.copy-block h3 { font-family: var(--serif); font-size: clamp(29px,4vw,46px); line-height: 1.08; letter-spacing: 0; }
.copy-block p { margin-top: 17px; color: var(--ink-52); font-size: 14px; }
.dark .copy-block p { color: rgba(255,255,255,.58); }
.detail-list { margin-top: 25px; list-style: none; border-top: 1px solid var(--border); }
.detail-list li { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--ink-52); font-size: 12px; }
.detail-list b { color: var(--forest); font-size: 11px; }
.dark .detail-list { border-color: rgba(255,255,255,.18); }
.dark .detail-list li { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.56); }
.dark .detail-list b { color: #D8F3DC; }

figure.media { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); box-shadow: 0 18px 48px rgba(27,67,50,.08); }
figure.media a { display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; }
figure.media img { width: 100%; height: auto; border-radius: 4px; }
figcaption { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 15px 17px; border-top: 1px solid var(--border); color: var(--ink-52); font-size: 11px; }
figcaption b { color: var(--forest); font-size: 10px; text-transform: uppercase; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-three { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-two figcaption,.grid-three figcaption { grid-template-columns: 1fr; gap: 4px; }
.media-row { margin-top: 18px; }
.bounded a { max-height: 650px; overflow: auto; align-items: flex-start!important; }
.dark figure.media { background: var(--forest-deep); border-color: rgba(255,255,255,.14); box-shadow: none; }
.dark figcaption { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.55); }
.dark figcaption b { color: #D8F3DC; }
.dark figure.media a { background: #fff; }

.story-rail { display: grid; grid-template-columns: repeat(5,1fr); margin: 44px 0 18px; border-block: 1px solid var(--border); }
.story-node { position: relative; padding: 25px 18px; }
.story-node+.story-node { border-left: 1px solid var(--border); }
.story-node span { display: block; color: var(--mint); font-family: var(--serif); font-size: 24px; }
.story-node h3 { margin-top: 10px; font-family: var(--serif); font-size: 17px; }
.story-node p { margin-top: 6px; color: var(--ink-52); font-size: 11.5px; }

.outcome-note { max-width: 970px; margin-top: 58px; padding-top: 30px; border-top: 1px solid var(--border); }
.outcome-note blockquote { color: var(--forest); font-family: var(--serif); font-size: clamp(28px,4vw,46px); line-height: 1.18; }
.outcome-note p { margin-top: 18px; color: var(--ink-52); font-size: 14px; }
.related { margin-top: 46px; padding: 23px 0; border-block: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.related span { color: var(--ink-52); font-size: 12px; }
.related a { color: var(--forest); font-family: var(--serif); font-size: 18px; }

footer { padding: 42px 0; background: var(--forest); color: rgba(255,255,255,.56); }
.footer-row { display: flex; justify-content: space-between; gap: 24px; font-size: 12px; }
.footer-row a { color: #D8F3DC; }
.zh-t,.zh-b { display: none; }
.lang-zh .en-t,.lang-zh .en-b { display: none; }
.lang-zh .zh-t { display: inline; }
.lang-zh .zh-b { display: block; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }

@media (max-width: 900px) {
  :root { --px: 28px; }
  .hero-inner,.overview,.split,.split.reverse { grid-template-columns: 1fr; }
  .hero-visual { justify-self: start; max-width: 720px; }
  .section-head { grid-template-columns: 1fr; gap: 10px; }
  .three-grid,.metric-strip { grid-template-columns: 1fr; }
  .item+.item,.metric+.metric { border-left: 0; border-top: 1px solid var(--border); }
  .four-grid { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .step:nth-child(4) { border-top: 1px solid var(--border); }
  .story-rail { grid-template-columns: 1fr 1fr; }
  .story-node:nth-child(odd) { border-left: 0; }
  .story-node:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  :root { --px: 18px; }
  header { grid-template-columns: 1fr auto; }
  .header-title { display: none; }
  .hero { padding-top: calc(var(--header) + 24px); }
  .hero-inner { gap: 34px; }
  .hero-visual { padding: 8px; }
  .section { padding: 80px 0; }
  .grid-two,.grid-three { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; gap: 12px; }
  .four-grid { grid-template-columns: 1fr; }
  .step+.step,.step:nth-child(3),.step:nth-child(4) { border-left: 0; border-top: 1px solid var(--border); }
  .story-rail { grid-template-columns: 1fr; }
  .story-node+.story-node { border-left: 0; border-top: 1px solid var(--border); }
  figcaption { grid-template-columns: 1fr; gap: 4px; }
  .related { align-items: flex-start; flex-direction: column; }
  .footer-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}