/* A map-led fourth scene. Geographic paths are shared with the original map. */
.v4-body .v4-home .v4-home-impact {
  --v4-map-gutter:clamp(24px,5vw,96px); --v4-map-title-inset:30px;
  display:flex!important; flex-direction:column; align-items:stretch; gap:12px;
  width:100%; max-width:none; margin:0; overflow:clip;
  padding:calc(var(--v4-header-height,72px) + 18px) var(--v4-map-gutter) 24px;
  background:linear-gradient(135deg,#fff4f0ba,#fffaf800 70%);
}
.v4-body .v4-home-impact>.v4-home-map {
  flex:1; display:flex; flex-direction:column; gap:10px; position:relative;
  width:100%; max-width:none; min-height:0; margin:0; grid-column:1/-1;
}
.v4-body .v4-home-impact>.v4-impact-side { flex:none; width:100%; max-width:none; margin:0; padding:0; display:block; grid-column:1/-1; }
.v4-body .v4-home-impact .v4-impact-metrics { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 32px; margin:0; font-family:var(--v4-ui-font); }
.v4-body .v4-home-impact .v4-impact-metrics p { font-size:var(--module-body-size,13px); color:#88706f; }
.v4-body .v4-home-impact .v4-impact-metrics strong { font-size:23px; font-weight:600; margin-left:5px; }
.v4-map-heading { position:absolute; z-index:2; top:8px; left:calc(-1 * var(--v4-map-gutter)); max-width:calc(52% + var(--v4-map-gutter)); pointer-events:none; }
.v4-body .v4-map-heading h2 { position:relative; display:inline-block; padding:16px var(--v4-map-title-inset); padding-left:calc(var(--v4-map-gutter) + var(--v4-map-title-inset)); border-radius:0 48px 48px 0; background:var(--red); color:#fff; font:400 var(--module-title-size,clamp(24px,2.1vw,36px))/1.4 var(--v4-font-family); letter-spacing:1px; text-wrap:balance; }
.v4-map-heading h2::before { content:""; position:absolute; inset:0 100% 0 auto; width:24px; background:inherit; }
.v4-map-heading p { margin:12px 0 0 calc(var(--v4-map-gutter) + 4px); color:#ab7977; font-size:13px; letter-spacing:1px; }
.v4-map-viewport { flex:1; min-height:0; height:72svh; overflow:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#e4aca5 transparent; }
.is-zoomed>.v4-map-viewport { overscroll-behavior:contain; }
.v4-map-canvas { width:calc(100% * var(--v4-map-zoom,1)); height:calc(100% * var(--v4-map-zoom,1)); }
.v4-body .v4-home-impact .v4-map-canvas>.v4-china-map { display:block; width:100%; height:100%; max-width:none; }
.v4-map-toolbar { flex:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 4px; }
.v4-map-legend { display:flex; gap:8px; align-items:center; color:#a17b78; font-size:12px; }
.v4-map-legend i { width:64px; height:7px; border-radius:4px; background:linear-gradient(90deg,#fff2ed,#f1b6af); }
.v4-map-controls { display:flex; gap:6px; align-items:center; }
.v4-map-controls select,.v4-map-controls button { font:13px/1.4 var(--v4-ui-font); min-height:36px; border:1px solid #eedad7; background:#fffaf8; color:#a73945; border-radius:7px; }
.v4-map-controls select { width:170px; max-width:100%; padding:6px 10px; }
.v4-map-controls button { min-width:36px; padding:6px 10px; }
.v4-map-controls button:hover:not(:disabled) { background:#fce6e1; }
.v4-map-controls button:disabled { opacity:.35; cursor:default; }
.v4-body .v4-home-impact .v4-map-detail { flex:none; min-height:24px; padding:0 4px; text-align:left; font:13px/1.8 var(--v4-ui-font); color:#aa6a69; overflow-wrap:anywhere; }

/* Flat pink fills and thin coral boundaries replace the red/white contrast. */
.v4-body .v4-home-map .v4-china-map>path[data-province] { fill:#f4c5bf; stroke:#df8c84; stroke-width:.85; vector-effect:non-scaling-stroke; transition:fill .2s,stroke .2s; }
.v4-body .v4-home-map .v4-china-map>path[data-coverage-count="0"] { fill:#fff2ed; }
.v4-body .v4-home-map .v4-china-map>path[data-coverage-count="1"] { fill:#fde5df; }
.v4-body .v4-home-map .v4-china-map>path[data-coverage-count="2"] { fill:#f9d6cf; }
.v4-body .v4-home-map .v4-china-map>path[data-province]:is(:hover,:focus-visible,.active) { fill:#f3b2ac; stroke:var(--red); stroke-width:1.3; }
.v4-body .v4-home-map .v4-map-province-name { font-family:var(--v4-ui-font); font-size:12px; font-weight:500; fill:#d82345; stroke:#fff7; stroke-width:.8; paint-order:stroke fill; }
.v4-map-province-count { font-size:10px; font-weight:400; }
.v4-body .v4-home-map .v4-map-label-leader { fill:none; stroke:#d9928c; stroke-width:.8; vector-effect:non-scaling-stroke; }
.v4-body .v4-home-map .v4-map-inset-frame { fill:#fff8f5; stroke:#df8c84; stroke-width:1.5; }
.v4-body .v4-home-map .v4-map-inset path { fill:#e2948d; stroke:#e2948d; stroke-width:.7; }
.v4-body .v4-home-map .v4-map-inset-label { fill:#c96b67; stroke:none; font:12px var(--v4-ui-font); letter-spacing:0; }
.v4-body .v4-home-map .v4-map-city { visibility:hidden; }
.v4-body .v4-home-map .v4-map-city.is-in-selected-province { visibility:visible; }
.v4-body .v4-home-map .v4-map-city-ring { display:none; animation:none; }
.v4-body .v4-home-map .v4-map-city-dot { fill:#e50036; stroke:#fff; stroke-width:1; filter:none; }
.v4-body .v4-home-map .v4-map-city.is-in-selected-province .v4-map-city-dot { r:3; fill:#e50036; stroke:#fff; stroke-width:1; }
.v4-body .v4-home-map .v4-map-city-label { font-family:var(--v4-ui-font); font-size:11px; font-weight:400; fill:#a8213a; stroke-width:1.2; }

@media (max-width:1199px), (pointer:coarse) {
  .v4-body .v4-home .v4-home-impact { --v4-map-gutter:clamp(16px,4vw,40px); --v4-map-title-inset:24px; padding:calc(var(--v4-header-height,72px) + 24px) var(--v4-map-gutter) calc(80px + env(safe-area-inset-bottom,0px)); justify-content:center; gap:20px; }
  .v4-body .v4-home-impact>.v4-home-map { flex:none; gap:18px; }
  .v4-map-heading { position:static; max-width:none; margin-left:calc(-1 * var(--v4-map-gutter)); }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,26px); padding-block:14px; }
  .v4-map-heading p { font-size:12px; margin-top:12px; }
  .v4-map-viewport { flex:none; height:auto; aspect-ratio:890/650; }
  .v4-map-toolbar { flex-wrap:wrap; gap:16px; padding:0; }
  .v4-map-controls { margin-left:auto; }
  .v4-body .v4-home-impact .v4-map-detail { padding:0; }
  .v4-body .v4-home-impact .v4-impact-metrics { justify-content:flex-start; gap:10px 20px; padding-top:16px; border-top:1px solid #f0dfda; }
}
@media (max-width:600px) {
  .v4-body .v4-home .v4-home-impact { --v4-map-title-inset:20px; }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,24px); padding-block:13px; }
  .v4-map-legend { font-size:11px; }
  .v4-map-toolbar { gap:12px; }
  .v4-map-controls { width:100%; margin:0; }
  .v4-map-controls>label { flex:1; min-width:0; }
  .v4-map-controls select { width:100%; }
  .v4-map-controls select,.v4-map-controls button { min-height:40px; }
  .v4-body .v4-home-impact .v4-impact-metrics p { font-size:12px; }
  .v4-body .v4-home-impact .v4-impact-metrics strong { font-size:20px; }
}
@media (max-width:600px) and (max-height:740px) {
  .v4-body .v4-home .v4-home-impact { --v4-map-title-inset:18px; padding-top:calc(var(--v4-header-height,72px) + 20px); padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); gap:12px; }
  .v4-body .v4-home-impact>.v4-home-map { gap:10px; }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,22px); padding-block:10px; }
  .v4-map-heading p { margin-top:8px; }
}

/* Replay on scene entry using the existing scene observer. Keep the wrapper
   still so its old vertical reveal does not move the title's left edge. */
@media (prefers-reduced-motion:no-preference) {
  .v4-motion-ready .v4-home-impact>.v4-home-map.v4-reveal { opacity:1; transform:none; transition:none; }
  .v4-motion-ready .v4-home-impact:not(.is-in-view) .v4-map-heading { opacity:0; transform:translateX(calc(-100% - 32px)); }
  .v4-motion-ready .v4-home-impact.is-in-view .v4-map-heading { animation:v4-map-title-enter .85s cubic-bezier(.22,.8,.3,1) both; }
  .v4-motion-ready .v4-home-impact:not(.is-in-view) :is(.v4-map-viewport,.v4-map-toolbar,.v4-map-detail) { opacity:0; }
  .v4-motion-ready .v4-home-impact.is-in-view .v4-map-viewport { animation:v4-map-enter .75s cubic-bezier(.16,1,.3,1) .12s both; }
  .v4-motion-ready .v4-home-impact.is-in-view :is(.v4-map-toolbar,.v4-map-detail) { animation:v4-map-caption-enter .5s ease-out .3s both; }
}
@keyframes v4-map-title-enter {
  0% { opacity:0; transform:translateX(calc(-100% - 32px)); }
  68% { opacity:1; transform:translateX(10px); }
  84% { opacity:1; transform:translateX(-3px); }
  100% { opacity:1; transform:translateX(0); }
}
@keyframes v4-map-enter {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}
@keyframes v4-map-caption-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}