:root {
  --paper: #edf1ee;
  --ink: #1e2528;
  --muted: #6e7773;
  --brand: #064b6a;
  --brand-deep: #073e4a;
  --line: #cdd2c9;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { outline-offset: 5px; }
button:focus-visible, a:focus-visible { outline: 3px solid #6fb6cc; }
.wrap { width: min(1320px, calc(100% - 112px)); margin: auto; }
.skip { position: fixed; left: 12px; top: -70px; background: #fff; padding: 12px 16px; z-index: 100; }
.skip:focus { top: 10px; }

.nav-shell { position: sticky; top: 0; z-index: 30; background: rgba(6, 75, 106, .97); border-bottom: 1px solid rgba(255,255,255,.12); }
nav { height: 80px; width: min(1440px, calc(100% - 100px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { display: block; width: 186px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 27px; position: relative; }
.nav-links a { color: rgba(255,255,255,.72); font-size: clamp(15px, 1.04vw, 17px); font-weight: 500; white-space: nowrap; line-height: 44px; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"] { box-shadow: none; }
.nav-follow-indicator { position: absolute; left: 0; bottom: 1px; width: var(--indicator-w, 0); height: 2px; border-radius: 99px; background: rgba(255,255,255,.96); opacity: 0; pointer-events: none; transform: translateX(var(--indicator-x, 0)); transition: transform .48s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.nav-follow-indicator.is-visible { opacity: 1; }
.nav-follow-indicator.is-instant { transition: none; }
.nav-cta:after { content: " ↗"; }
.menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 23px; }

.articles-main { padding: 44px 0 112px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f3f4f0 0%, #e8eeeb 100%); }
.articles-main .wrap { position: relative; z-index: 1; }
.insights-intro { min-height: 286px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr; align-items: end; gap: 8%; margin-bottom: 42px; padding: 52px 56px 44px; color: #15363f; background: #dfe8e7; isolation: isolate; }
.insights-intro:before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("insights-hero-bg.jpg") center 48% / cover no-repeat; opacity: .22; filter: saturate(.7) contrast(.85); }
.insights-intro:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(241,244,240,.9) 0%, rgba(236,241,238,.74) 48%, rgba(232,239,237,.56) 100%); }
.insights-title p { margin: 0 0 12px; color: #4d7375; font-size: 12px; letter-spacing: .16em; }
.insights-title h1 { margin: 0; color: rgba(6,75,106,.17); font-size: clamp(76px, 9.2vw, 138px); line-height: .82; font-weight: 500; letter-spacing: -.075em; }
.insights-copy { padding-bottom: 3px; }
.insights-copy strong { display: block; font-size: clamp(20px, 1.65vw, 26px); line-height: 1.45; font-weight: 500; letter-spacing: -.025em; }
.insights-copy p { margin: 10px 0 0; color: #506b69; font-size: 16px; line-height: 1.7; }
.insights-copy small { display: block; margin-top: 20px; color: #728783; font-size: 11px; letter-spacing: .05em; }
.articles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 46px; }
.filters { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; min-height: 44px; padding: 0; color: #747a75; cursor: pointer; }
.filters button[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
.article-count { color: #89908b; font-size: 12px; white-space: nowrap; }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 30px; align-items: stretch; }
.article-card { min-width: 0; position: relative; opacity: 0; transform: translate3d(0,38px,0); transition: opacity .72s ease var(--delay), transform .86s cubic-bezier(.16,1,.3,1) var(--delay); will-change: opacity, transform; }
.article-card.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.article-surface { height: 100%; overflow: hidden; background: rgba(255,255,255,.92); clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 28px); filter: drop-shadow(0 14px 26px rgba(23,49,48,.07)); transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease; transform: translateZ(0); backface-visibility: hidden; }
.article-card:hover .article-surface, .article-card:focus-within .article-surface { transform: translate3d(0,-6px,0); filter: drop-shadow(0 22px 34px rgba(23,49,48,.12)); }
.article-cover { display: block; aspect-ratio: 2.34; position: relative; overflow: hidden; background: #dfe4df; }
.article-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.article-card:hover .article-cover > img, .article-card:hover .article-crop img { transform: scale(1.035); }
.article-poster { position: absolute; inset: 0; padding: 25px 27px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #f6f4ed; background: #0a5263; }
.article-poster:before, .article-poster:after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.article-poster:before { width: 64%; aspect-ratio: 1; right: -19%; top: -43%; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 24px rgba(255,255,255,.045), 0 0 0 48px rgba(255,255,255,.025); }
.article-poster:after { width: 33%; aspect-ratio: 1; left: -8%; bottom: -35%; border: 1px solid rgba(255,255,255,.16); }
.article-poster small, .article-poster strong { position: relative; z-index: 1; }
.article-poster small { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.66); }
.article-poster strong { max-width: 90%; font-size: clamp(18px, 1.62vw, 25px); line-height: 1.42; font-weight: 500; letter-spacing: -.02em; }
.article-poster.tone-coral { background: #a25145; }
.article-poster.tone-sand { background: #947b59; }
.article-poster.tone-blue { background: #285e80; }
.article-poster.tone-slate { background: #394f58; }
.article-poster.tone-plum { background: #674e65; }
.article-poster.tone-moss { background: #4e6858; }
.article-body { padding: 26px 30px 34px; }
.article-meta { margin: 0; display: flex; justify-content: space-between; gap: 18px; color: #7b827d; font-size: 12px; letter-spacing: .035em; }
.article-meta span { color: var(--brand); }
.article-card h2 { margin: 16px 0 0; font-size: 25px; line-height: 1.42; font-weight: 500; letter-spacing: -.026em; text-wrap: pretty; }
.article-card h2 a { background: linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s; }
.article-card:hover h2 a { background-size: 100% 1px; }
.article-card p { margin: 13px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
.article-read { display: inline-flex; gap: 9px; align-items: center; margin-top: 18px; color: var(--brand); font-size: 13px; }
.article-read:after { content: ""; width: 28px; height: 1px; background: currentColor; transform-origin: left; transition: transform .35s ease; }
.article-read:hover:after { transform: scaleX(1.45); }

.article-crop { position: absolute; inset: 0; overflow: hidden; display: block; }
.article-crop img { position: absolute; max-width: none; height: auto; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-origin: center; }
.article-crop.jun-jul img { width: 127.297%; }
.article-crop.crop-jun-26 img { left: -14.595%; top: -38.854%; }
.article-crop.crop-jul-03 img { left: -14.595%; top: -229.206%; }
.article-crop.crop-jul-10 img { left: -14.595%; top: -433.121%; }
.article-crop.may-jun img { width: 129.459%; left: -19.730%; }
.article-crop.crop-sourcing img { top: -14.187%; }
.article-crop.crop-jun-12 img { top: -189.841%; }
.article-crop.crop-jun-18 img { top: -383.067%; }
.article-crop.apr-may img { width: 126.216%; left: -11.081%; }
.article-crop.crop-finance img { top: -7.619%; }
.article-crop.crop-apr-30 img { top: -225.962%; }
.article-crop.crop-may-09 img { top: -396.815%; }

.wechat-note { margin-top: 82px; padding: 48px 52px; display: grid; grid-template-columns: 1fr auto; gap: 54px; align-items: center; background: rgba(220,231,224,.88); clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 28px); }
.wechat-note h2 { margin: 0; font-size: 36px; font-weight: 400; letter-spacing: -.035em; }
.wechat-note p { margin: 16px 0 0; color: #61716b; font-size: 16px; line-height: 1.75; }
.wechat-note img { width: 136px; height: 136px; object-fit: cover; background: #fff; padding: 7px; }

footer { background: #dfe7df; padding: 0 0 28px; color: #556760; }
.foot-inner { border-top: 1px solid #b9c7bb; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 28px; font-size: 12px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--brand); }

@media (max-width: 1150px) {
  .wrap { width: calc(100% - 64px); }
  nav { width: calc(100% - 48px); }
  .menu { display: block; }
  .nav-links { display: none; position: absolute; top: 80px; left: 0; right: 0; padding: 16px 28px 25px; background: #064b6a; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav-links.open { display: flex; align-items: stretch; flex-direction: column; gap: 0; }
  .nav-links a { font-size: 16px; line-height: 44px; }
  .nav-follow-indicator { display: none; }
}

@media (max-width: 680px) {
  .wrap { width: calc(100% - 36px); }
  nav { height: 65px; width: calc(100% - 36px); }
  .brand img { width: 151px; }
  .nav-links { top: 65px; padding: 12px 24px 25px; }
  .articles-main { padding: 46px 0 78px; }
  .insights-intro { min-height: 278px; grid-template-columns: 1fr; align-content: end; gap: 28px; margin-bottom: 34px; padding: 35px 26px 32px; }
  .insights-title h1 { font-size: clamp(61px, 21vw, 84px); }
  .insights-copy strong { font-size: 20px; }
  .insights-copy p { font-size: 15px; }
  .articles-toolbar { align-items: flex-end; margin-bottom: 34px; }
  .filters { gap: 20px; }
  .article-grid { grid-template-columns: 1fr; gap: 54px; }
  .article-surface { clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 22px); }
  .article-body { padding: 23px 23px 30px; }
  .article-card h2 { font-size: 24px; }
  .wechat-note { margin-top: 68px; padding: 34px 28px; grid-template-columns: 1fr; gap: 28px; }
  .wechat-note h2 { font-size: 30px; }
  .wechat-note img { width: 122px; height: 122px; }
  .foot-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .article-card { opacity: 1; transform: none; transition: none; }
  .article-cover > img, .article-crop img, .article-surface, .nav-follow-indicator { transition: none; }
}

/* An editorial rhythm drawn from the homepage: warm paper, blue ink and sage. */
.insights-page { --paper: #f3f1ea; --ink: #223033; --muted: #697570; --line: #c8d2cc; background: var(--paper); }
.insights-page .articles-main { background: var(--paper); padding-block: clamp(42px, 4.5vw, 78px) clamp(60px, 6vw, 100px); }
.insights-page .insights-intro { background: transparent; min-height: 0; padding: 0 0 clamp(34px, 3.5vw, 60px); margin: 0; grid-template-columns: 1.05fr .95fr; gap: 8%; align-items: end; overflow: visible; }
.insights-page .insights-intro::before, .insights-page .insights-intro::after { display: none; }
.insights-page .insights-title { container-type: normal; }
.insights-page .insights-title > p { font-size: 14px; letter-spacing: .06em; margin-bottom: 25px; color: var(--brand); }
.insights-page .insights-title > p span { margin-left: 18px; font-size: 10px; letter-spacing: .16em; color: #647d7d; }
.insights-page .insights-title h1 { color: var(--ink); font-size: clamp(36px, 3.5vw, 62px); line-height: 1.3; font-weight: 400; letter-spacing: .015em; text-wrap: balance; }
.insights-page .insights-copy { position: relative; isolation: isolate; padding: 32px 0 14px 30px; min-width: 0; }
.insights-page .insights-copy::before { content: ''; position: absolute; inset: -34px -16px -16px 0; z-index: -2; background: linear-gradient(90deg, var(--paper), #f3f1ea85), url('insights-hero-bg.jpg') center / cover; opacity: .23; mask-image: linear-gradient(0deg, transparent, black 28%, black 70%, transparent); }
.insights-page .insights-watermark { position: absolute; top: -12px; left: 26px; color: #064b6a0e; font-size: clamp(42px, 5.5vw, 96px); font-weight: 400; letter-spacing: -.035em; line-height: 1; z-index: -1; }
.insights-page .insights-copy p { font-size: clamp(17px, 1.28vw, 22px); line-height: 1.9; color: #64716c; margin: 28px 0 0; }
.insights-page .insights-copy small { margin-top: 18px; font-size: 11px; letter-spacing: .09em; color: #75817c; }
.insights-page .articles-toolbar { margin-bottom: 30px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.insights-page .filters { gap: clamp(22px, 2.8vw, 44px); }
.insights-page .filters button { font-size: 14px; }
.insights-page .article-count { font-variant-numeric: tabular-nums; color: #64716c; }
.insights-page .article-grid { gap: clamp(24px, 2.5vw, 40px); grid-auto-rows: 1fr; }
.insights-page .article-surface { display: flex; flex-direction: column; background: #fdfcf9; clip-path: polygon(20px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 20px); filter: none; transition: transform .35s ease, background .35s ease; }
.insights-page .article-card:hover .article-surface, .insights-page .article-card:focus-within .article-surface { transform: translateY(-4px); filter: none; background: #fff; }
.insights-page .article-cover { flex: 0 0 auto; aspect-ratio: 2.34; }
.insights-page .article-body { flex: 1; display: flex; flex-direction: column; padding: clamp(21px, 1.85vw, 30px); padding-bottom: 28px; }
.insights-page .article-meta { font-size: 11px; letter-spacing: .04em; }
.insights-page .article-card h2 { font-size: clamp(20px, 1.4vw, 25px); line-height: 1.6; font-weight: 500; letter-spacing: .01em; margin-top: 17px; text-wrap: pretty; }
.insights-page .article-card p { font-size: 14px; line-height: 1.85; margin-top: 12px; margin-bottom: 26px; }
.insights-page .article-read { align-self: flex-start; margin-top: auto; font-size: 12px; padding-top: 13px; border-top: 1px solid #cdd8d0; width: 100%; justify-content: space-between; }
.insights-page .article-read::after { width: 26px; }
.insights-page .article-poster { padding: clamp(20px, 1.7vw, 28px); background: #0b4958; }
.insights-page .article-poster strong { color: #f6f4ed; font-size: clamp(25px, 2.4vw, 40px); line-height: 1.2; letter-spacing: .08em; font-weight: 400; }
.insights-page .article-poster small { font-size: 9px; }
.insights-page .poster-caption { position: relative; font-size: 10px; letter-spacing: .08em; color: #dae4dfb3; }
.insights-page .article-poster.tone-coral, .insights-page .article-poster.tone-plum { background: #376665; }
.insights-page .article-poster.tone-sand, .insights-page .article-poster.tone-moss { background: #728b80; }
.insights-page .article-poster.tone-blue, .insights-page .article-poster.tone-slate { background: #245269; }
.insights-page .wechat-note { margin-top: clamp(55px, 6vw, 100px); background: #dfe8e0; clip-path: none; border-top: 1px solid #b7c9bd; padding: clamp(28px, 4vw, 64px); gap: 40px; }
.insights-page .reading-label { display: block; margin-bottom: 24px; font-size: 11px; color: #496e71; letter-spacing: .1em; }
.insights-page .wechat-note h2 { font-size: clamp(28px, 2.8vw, 46px); line-height: 1.4; letter-spacing: .01em; }
.insights-page .wechat-note p { font-size: 15px; }
.insights-page .wechat-note img { width: 144px; height: 144px; padding: 10px; }
.insights-page footer { background: #dfe8e0; padding-top: 42px; padding-bottom: 32px; }
.insights-page .insights-footer-brand { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 35px; }
.insights-page .insights-footer-brand img { display: block; width: 186px; height: auto; }
.insights-page .insights-footer-brand p { font-size: clamp(17px, 1.5vw, 24px); color: #45626a; margin: 0; }
.insights-page .insights-footer-brand strong { color: var(--brand); font-weight: 500; }
@media (max-width: 1000px) {
  .insights-page .insights-intro { gap: 5%; grid-template-columns: 1fr 1fr; }
  .insights-page .insights-copy { padding-left: 0; }
  .insights-page .insights-copy p br { display: none; }
}
@media (max-width: 760px) {
  .insights-page .insights-intro { grid-template-columns: 1fr; gap: 25px; padding-bottom: 30px; }
  .insights-page .insights-title h1 { font-size: clamp(34px, 8.5vw, 48px); }
  .insights-page .insights-title > p { margin-bottom: 18px; }
  .insights-page .insights-copy { padding: 10px 0 0; }
  .insights-page .insights-watermark { top: 0; left: 0; font-size: 58px; }
  .insights-page .insights-copy p { margin-top: 0; font-size: 16px; }
  .insights-page .insights-copy small { margin-top: 10px; }
  .insights-page .articles-toolbar { gap: 6px; padding: 10px 0; }
  .insights-page .filters { width: 100%; gap: 22px; }
  .insights-page .filters button { font-size: 13px; }
  .insights-page .article-grid { grid-auto-rows: auto; gap: 28px; }
  .insights-page .article-card h2 { font-size: 21px; }
  .insights-page .article-poster strong { font-size: 32px; }
  .insights-page .wechat-note { grid-template-columns: 1fr; gap: 24px; }
  .insights-page .insights-footer-brand { align-items: flex-start; flex-direction: column; gap: 20px; }
}