/* The city sets the atmosphere; research themes and evidence live below it. */
[data-page=research]{overflow-x:clip}
[data-page=research] .research-opening{position:relative;display:block;width:100vw;margin-inline:calc(50% - 50vw);margin-top:-145px;min-height:820px;height:100svh;max-height:1080px;padding:0;isolation:isolate;overflow:hidden}
[data-page=research] .research-opening-copy{position:absolute;z-index:3;left:var(--gutter);top:clamp(145px,18vh,200px);width:min(32vw,460px);pointer-events:none}
[data-page=research] .research-opening h1{font-size:clamp(56px,5.9vw,85px);line-height:1.05;letter-spacing:-.035em;white-space:pre-line;margin:0;color:#35473f}
[data-page=research] .research-opening .editorial-deck{font-size:22px;line-height:1.5;max-width:29ch;margin-top:25px}
[data-page=research] .research-opening .opening-note:empty{display:none}
[data-page=research] .research-opening .editorial-link{pointer-events:auto;margin-top:26px;min-width:0;font-size:13px}
[data-page=research] .research-hero-image{position:absolute;inset:0;z-index:1;margin:0}
[data-page=research] .research-city-frame{position:absolute;inset:0;height:auto;margin:0;background:var(--paper);overflow:hidden}
[data-page=research] .research-city-frame:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper),#faf8f3f5 13%,#faf8f3c9 27%,#faf8f340 40%,transparent 52%),linear-gradient(0deg,var(--paper),#faf8f3c9 8%,transparent 24%,transparent calc(100% - 190px),#faf8f3ed calc(100% - 100px),var(--paper) calc(100% - 75px))}
[data-page=research] .research-city-frame canvas{width:100%;height:100%;display:block}
[data-page=research] .research-city-fallback{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
[data-page=research] .research-city-tools{position:absolute;z-index:4;right:var(--gutter);top:auto;bottom:36px;background:#faf8f3ed;padding:0 10px;gap:20px}
[lang=zh-CN] [data-page=research] .research-opening h1{font-size:clamp(49px,4.4vw,66px);line-height:1.25;letter-spacing:0}
[lang=zh-CN] [data-page=research] .research-opening .editorial-deck{font-size:21px;line-height:1.6;max-width:none}
@media(max-width:1100px) and (min-width:901px){
 [data-page=research] .research-opening-copy{width:36vw}
 [data-page=research] .research-opening h1{font-size:62px}
}
@media(max-width:900px){
 [data-page=research] .research-opening{margin-top:-145px;min-height:900px;height:100svh;max-height:none}
 [data-page=research] .research-opening-copy{left:24px;right:24px;top:115px;width:auto;pointer-events:none}
 [data-page=research] .research-opening h1,[lang=zh-CN] [data-page=research] .research-opening h1{font-size:46px;line-height:1.12;max-width:370px}
 [data-page=research] .research-opening .editorial-deck,[lang=zh-CN] [data-page=research] .research-opening .editorial-deck{font-size:17px;line-height:1.6;margin-top:19px}
 [data-page=research] .research-opening .editorial-link{position:absolute;top:720px;right:0;margin:0;font-size:12px}
 [data-page=research] .research-city-frame{inset:var(--research-scene-top,260px) 0 80px}
 [data-page=research] .research-city-frame:after{background:linear-gradient(180deg,var(--paper),#faf8f370 9%,transparent 26%,transparent 74%,#faf8f3aa 91%,var(--paper)),linear-gradient(90deg,#faf8f3bb,transparent 15%,transparent 86%,#faf8f399)}
 [data-page=research] .research-city-tools{top:auto;bottom:88px;right:24px;gap:12px;font-size:12px}
}
@media(max-width:740px){[data-page=research] .research-opening{margin-top:-120px}}
@media(max-width:360px){
 [data-page=research] .research-opening-copy{left:20px;right:20px}
 [data-page=research] .research-opening h1,[lang=zh-CN] [data-page=research] .research-opening h1{font-size:41px}
}
@media print{
 [data-page=research] .research-opening{width:auto;margin:0;height:450px;min-height:0}
 [data-page=research] .research-opening-copy{top:20px;left:0;width:40%}
 [data-page=research] .research-opening h1{font-size:38px}
 .research-city-tools{display:none!important}
}
/* Three model landmarks lead into the existing research themes. */
.city-play-markers,.city-platform-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.city-platform-links{z-index:2;overflow:hidden}
.city-platform-links path{fill:none;stroke:#a7755d;stroke-width:1.35;stroke-dasharray:4 6;stroke-linecap:round;opacity:0;animation:city-dash-flow 5s linear infinite}
.city-play-markers{z-index:3}
.city-topic-pin,.city-platform-phone{position:absolute;left:0;top:0;display:grid;place-items:center;border:1px solid #bfa48e;background:#faf8f3f5;color:#986452;border-radius:50%;opacity:0;box-shadow:0 5px 16px #51452d0c;transition:opacity .3s,background .3s,color .3s}
.city-topic-pin{width:44px;height:44px;pointer-events:none}
.city-topic-pin:after,.city-platform-phone:after{content:'';position:absolute;width:1px;height:17px;background:#b99b83;top:44px;left:21px;pointer-events:none}
.city-topic-pin>svg{width:25px;height:25px}
.city-topic-pin[data-play-theme=networks]{color:#627e6a;border-color:#a2b29e}
.city-topic-pin[data-play-theme=mobility]{color:#637f90;border-color:#a2b3ba}
.city-topic-pin:hover,.city-topic-pin:focus-visible,.city-topic-pin[aria-pressed=true]{color:var(--paper);background:#986452}
.city-topic-pin[data-play-theme=networks]:is(:hover,:focus-visible,[aria-pressed=true]){background:#627e6a}
.city-topic-pin[data-play-theme=mobility]:is(:hover,:focus-visible,[aria-pressed=true]){background:#637f90}
.city-pin-label{position:absolute;left:50%;top:-40px;font:12px/1.4 var(--sans);white-space:nowrap;background:var(--paper);color:var(--ink);padding:5px 8px;opacity:0;transition:opacity .2s;pointer-events:none}
.city-topic-pin:is(:hover,:focus-visible,[aria-pressed=true]) .city-pin-label{opacity:1}
.city-platform-phone{width:32px;height:32px}
.city-platform-phone>svg{width:23px;height:23px}
.city-platform-phone:after{top:32px;left:15px;height:17px}
.research-play-hint{position:absolute;left:var(--gutter);top:clamp(510px,60vh,610px);z-index:4;max-width:29ch;display:block;pointer-events:none;margin:0;padding:0;background:none;font-size:13px;color:var(--ink)}
.research-play-hint p{font:14px/1.7 var(--sans);margin:0 0 10px}
.research-play-hint>span{font:12px/1.5 var(--sans);color:var(--muted)}
.city-play-paused .city-platform-links path{animation-play-state:paused}
.city-unavailable .city-play-markers,.city-unavailable .city-platform-links,.city-unavailable .research-play-hint{display:none}
@keyframes city-dash-flow{to{stroke-dashoffset:-40}}
@media(max-width:900px){
 [data-page=research] .research-city-frame{bottom:155px}
 .research-play-hint{left:24px;right:128px;top:auto;bottom:90px;max-width:none}
 .research-play-hint p{font-size:12px;line-height:1.6;margin-bottom:6px}
 .research-play-hint>span{font-size:12px}
}
@media(max-width:360px){.research-play-hint{left:20px;right:120px}.city-pin-label{font-size:12px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.city-platform-links path{animation:none}.city-topic-pin,.city-platform-phone,.city-pin-label{transition:none}}
@media print{.city-play-markers,.city-platform-links,.research-play-hint{display:none!important}}

/* One compact daylight control; selecting time keeps the city interaction active. */
#research-city-time{display:flex;align-items:center;gap:7px;white-space:nowrap;font:inherit;color:var(--ink)}
#research-city-time svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round}
#research-city-time:hover{color:var(--accent)}
@media(max-width:900px){
 [data-page=research] .research-city-tools{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:0;padding:0;background:var(--paper);bottom:78px}
 #research-city-time{grid-column:1 / -1;justify-content:flex-end}
 .research-play-hint{right:172px;bottom:84px}
}
@media(max-width:360px){.research-play-hint{right:156px}}

/* A home reveals the everyday destinations connected to living there. */
.city-topic-pin[data-play-theme=opportunity]{color:#89724b;border-color:#b8a988}
.city-topic-pin[data-play-theme=opportunity]:is(:hover,:focus-visible,[aria-pressed=true]){color:var(--paper);background:#89724b}
.city-opportunity-place{position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border:1px solid #bfa48e;border-radius:50%;background:#faf8f3f5;color:#986452;opacity:0;pointer-events:none;transition:opacity .25s}
.city-opportunity-place>svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.city-opportunity-place:after{content:'';position:absolute;left:17px;top:36px;height:17px;width:1px;background:currentColor;opacity:.65}
.city-opportunity-place .city-pin-label{opacity:1}
.city-opportunity-place[data-destination=transit]{color:#637f90;border-color:#a2b3ba}
.city-opportunity-place[data-destination=school]{color:#89724b;border-color:#b8a988}
.city-opportunity-place[data-destination=park]{color:#627e6a;border-color:#a2b29e}
@media(prefers-reduced-motion:reduce){.city-opportunity-place{transition:none}}

/* Publications belong to buildings; the corner preview keeps the visitor in the city. */
.city-platform-phone.is-publication{width:44px;height:44px;cursor:pointer}
.city-platform-phone.is-publication:after{top:44px;left:21px}
.city-paper-indicator{display:none;position:absolute;right:-3px;bottom:1px;width:16px;height:18px;place-items:center;background:var(--paper);color:currentColor}
.city-paper-indicator svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}
.is-publication .city-paper-indicator{display:grid}
.city-paper-pin{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid #a2b29e;border-radius:50%;background:#faf8f3f5;color:#627e6a;opacity:0;pointer-events:none;transition:opacity .25s,background .2s,color .2s;cursor:pointer}
.city-paper-pin>svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.city-paper-pin:after{content:'';position:absolute;left:21px;top:44px;height:17px;width:1px;background:currentColor;opacity:.65}
.city-paper-count{position:absolute;right:-5px;top:-4px;font:12px/18px var(--sans);background:var(--paper);color:var(--ink);padding:0 3px}
.city-paper-count:empty{display:none}
[data-play-active=mobility] .city-paper-pin{color:#637f90;border-color:#a2b3ba}
[data-play-active=opportunity] .city-paper-pin{color:#89724b;border-color:#b8a988}
.city-paper-pin:is(:hover,[aria-pressed=true]),.city-platform-phone.is-publication:is(:hover,[aria-pressed=true]){background:#986452;color:var(--paper);border-color:#986452}
.city-paper-pin:focus-visible,.city-platform-phone.is-publication:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.city-publication-preview{display:grid;grid-template-rows:minmax(0,1fr) auto auto;position:absolute;z-index:5;left:var(--gutter);bottom:60px;width:min(34vw,420px);max-height:calc(100% - 450px);overflow:auto;background:#faf8f3f5;border-top:1px solid var(--line);padding:20px 22px 8px 0;color:var(--ink);text-align:left}
.city-publication-preview[hidden]{display:none}
.city-publication-preview h2{font:400 25px/1.2 var(--serif);letter-spacing:-.02em;margin:0;padding-right:25px;overflow-wrap:anywhere;min-height:0;overflow:auto;scrollbar-width:thin}
.city-publication-source{font:12px/1.65 var(--sans);margin:14px 0 8px;color:var(--muted)}
.city-publication-close{position:absolute;right:0;top:5px;display:grid;place-items:center;width:44px;height:44px;color:var(--muted)}
.city-publication-close svg,.city-publication-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.city-publication-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.city-publication-open{display:flex;align-items:center;gap:12px;min-height:44px;font:13px/1.5 var(--sans);color:var(--accent);text-decoration:none}
.city-publication-open:hover{text-decoration:underline;text-underline-offset:5px}
.city-publication-paging{display:flex;align-items:center;gap:4px;font:12px var(--sans)}
.city-publication-paging[hidden]{display:none}
.city-publication-paging button{display:grid;place-items:center;width:44px;height:44px}
.has-publication-preview .research-play-hint{visibility:hidden}
.city-unavailable .city-publication-preview{display:none}
[lang=zh-CN] .city-publication-preview h2{font-size:24px;line-height:1.4}
@media(max-width:900px){
 .city-publication-preview{left:24px;right:24px;bottom:148px;width:auto;max-height:260px;padding:18px 18px 10px;background:#faf8f3fa}
 .city-publication-preview h2,[lang=zh-CN] .city-publication-preview h2{font-size:21px;line-height:1.35;padding-right:30px}
 .city-publication-close{right:4px;top:4px}
}
@media(max-width:360px){.city-publication-preview{left:20px;right:20px;max-height:245px}}
@media(prefers-reduced-motion:reduce){.city-paper-pin{transition:none}}
@media print{.city-publication-preview,.city-paper-pin{display:none!important}}

/* Small screens read publications below the city instead of covering it. */
@media(max-width:900px){
 [data-page=research] .research-opening{min-height:calc(900px + var(--publication-space,0px));height:calc(100svh + var(--publication-space,0px))}
 [data-page=research] .research-city-frame{bottom:calc(155px + var(--publication-space,0px))}
 [data-page=research] .research-city-tools{bottom:calc(78px + var(--publication-space,0px))}
 .research-play-hint{bottom:calc(84px + var(--publication-space,0px))}
 .city-publication-preview{bottom:16px;max-height:none;padding:18px 0 10px;background:var(--paper);overflow:visible}
 .city-publication-preview h2{overflow:visible}
}
.city-platform-links path.city-marker-leader{stroke:#9c9e8f;stroke-width:1;stroke-dasharray:none;animation:none;pointer-events:none}