/* Scroll-controlled visual storytelling. Static layout remains the fallback. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;pointer-events:none}.reading-progress>span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.hero-stage{position:relative}.hero-image{animation:none!important;transform:translate3d(0,var(--hero-pan,0px),0) scale(var(--hero-zoom,1));will-change:transform}.hero-content{transform:translate3d(0,var(--hero-copy-y,0px),0);opacity:var(--hero-copy-opacity,1);will-change:transform,opacity}.hero-scene-note{position:absolute;left:max(48px,calc((100vw - var(--max))/2));bottom:112px;opacity:var(--scene-note-opacity,0);transform:translateY(var(--scene-note-y,30px));pointer-events:none}.hero-scene-note p{font-size:55px;line-height:1.06;letter-spacing:-.05em;font-weight:800;margin-top:17px}.scroll-ready .hero-stage{height:180svh;min-height:1100px}.scroll-ready .hero{position:sticky;top:0;height:100svh;min-height:680px}.scroll-ready .hero-shade{opacity:var(--hero-shade-opacity,1)}.hero h1{animation:title-arrive .8s cubic-bezier(.2,.7,.2,1) both}.hero-intro{animation:title-arrive .8s .14s cubic-bezier(.2,.7,.2,1) both}.hero-link{animation:title-arrive .8s .25s cubic-bezier(.2,.7,.2,1) both}@keyframes title-arrive{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.chapter-nav{position:sticky;top:0;z-index:16}.chapter-nav a{position:relative;height:100%;display:flex;align-items:center}.chapter-nav a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#363b8c;transform:scaleX(0);transform-origin:left;transition:transform .25s}.chapter-nav a[aria-current=location]::after{transform:scaleX(1)}
.city-scroll{position:relative}.city-sticky{position:relative}.city-frame{height:580px;aspect-ratio:auto;perspective:1200px}.city-world{position:absolute;inset:0;transform:translate3d(var(--camera-x,0%),var(--camera-y,0%),0) scale(var(--camera-zoom,1.03)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;z-index:-2}.city-pin-layer{position:absolute;inset:0}.city-frame .city-photo,.city-frame.perspective-on .city-photo{inset:0;transform:none;transition:none}.city-photo img{filter:saturate(.7) brightness(.9)}.city-photo-shade{background:linear-gradient(0deg,#171b47de,transparent 53%),linear-gradient(90deg,#171b4770,transparent 60%);z-index:-1;pointer-events:none}.city-frame .city-detail{position:absolute;left:30px;bottom:76px;width:min(365px,42%);display:block;background:#171b47e6;border:1px solid #bfc2df2b;padding:26px;color:var(--white);box-shadow:0 15px 35px #0002;transition:opacity .18s,transform .18s}.city-detail.is-changing{animation:story-arrive .4s ease}.city-frame .city-detail-number{font-size:9px;color:var(--orange);display:block;margin-bottom:15px}.city-frame .city-detail h3{font-size:27px;line-height:1.14;letter-spacing:-.04em;margin-bottom:15px}.city-frame .city-detail p{font-size:11px;line-height:1.8;color:#bfc2df}.city-frame .city-detail .text-link{color:var(--white);font-size:10px;margin-top:19px;border-color:#666a80}.city-frame .city-detail .text-link:hover{color:var(--orange);border-color:var(--orange)}.city-caption{left:30px;bottom:20px;right:30px}.city-caption>span>span{color:var(--orange);font-size:15px;padding-left:12px}.cross-two{display:none}.scene-timeline{position:absolute;right:30px;bottom:90px;display:flex;gap:11px}.scene-timeline button{padding:8px 0;min-width:40px;color:#bfc2df;font-size:9px;display:flex;flex-direction:column;gap:10px;text-align:left}.scene-timeline i{display:block;width:42px;height:2px;background:#666a8055;transform-origin:left}.scene-timeline button.is-active{color:var(--orange)}.scene-timeline button.is-active i{background:var(--orange)}.scroll-ready .city-scroll{height:310svh;min-height:1900px}.scroll-ready .city-sticky{position:sticky;top:85px;height:calc(100svh - 105px);min-height:480px;max-height:820px}.scroll-ready .city-frame{height:100%}.scroll-ready .city-section{padding-bottom:80px}
@keyframes story-arrive{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.scroll-ready [data-reveal]{opacity:0;transform:translate3d(0,38px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.scroll-ready [data-reveal].is-revealed{opacity:1;transform:translate3d(0,0,0)}.scroll-ready .research-card .article-art{overflow:hidden}.scroll-ready .research-card .article-art svg{transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.scroll-ready .research-card.is-revealed .article-art svg{transform:scale(1)}.scroll-ready .research-card .civic-lines,.scroll-ready .research-card .budget-lines,.scroll-ready .research-card .map-lines{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1) .2s}.scroll-ready .research-card.is-revealed .civic-lines,.scroll-ready .research-card.is-revealed .budget-lines,.scroll-ready .research-card.is-revealed .map-lines{stroke-dashoffset:0}.motion-paused .hero-content{opacity:1;transform:none}.motion-paused .hero-scene-note{display:none}.motion-paused .hero-image{transform:none}.motion-paused .city-world{transform:none}.motion-paused .city-detail{animation:none}.motion-paused [data-reveal]{opacity:1;transform:none;transition:none}
@media(max-width:1100px){.hero-scene-note{left:32px}.city-frame{height:530px}.city-frame .city-detail{max-width:335px}.city-frame .city-detail h3{font-size:25px}}
@media(max-width:760px){.scroll-ready .hero-stage{height:165svh;min-height:1100px}.scroll-ready .hero{height:100svh;min-height:710px}.hero-scene-note{left:20px;bottom:115px}.hero-scene-note p{font-size:43px}.hero-stage .hero-image{--hero-mobile-pan:0px}.city-frame{height:620px}.city-photo{inset:0!important}.city-photo img{object-position:48% 48%}.city-frame .city-detail{left:15px;right:15px;bottom:99px;width:auto;max-width:none;padding:20px;background:#171b47e8}.city-frame .city-detail-number{font-size:7px;margin-bottom:11px}.city-frame .city-detail h3{font-size:24px;max-width:290px;margin-bottom:11px}.city-frame .city-detail p{font-size:10px;max-width:290px;line-height:1.75;margin-bottom:0}.city-frame .city-detail .text-link{font-size:9px;margin-top:14px}.city-pin{font-size:7px}.pin-council{left:16%;top:35%}.pin-public{left:35%;top:57%}.pin-planning{left:54%;top:22%}.city-caption{left:15px;right:15px;bottom:16px;font-size:6px;gap:12px}.city-caption>span{max-width:180px}.city-caption>span>span{font-size:12px;padding-left:5px}.city-caption button{font-size:6px;padding:4px 7px}.scene-timeline{right:15px;bottom:58px;gap:12px;left:15px}.scene-timeline button{font-size:8px;gap:6px;padding:3px 0}.scene-timeline i{width:42px}.scroll-ready .city-scroll{height:270svh;min-height:1700px}.scroll-ready .city-sticky{top:73px;height:calc(100svh - 90px);min-height:560px}.scroll-ready .city-section{padding-bottom:58px}.scroll-ready [data-reveal]{transition-delay:0ms}.chapter-nav .wrap{height:58px}.city-world{transform-origin:center}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero-intro,.hero-link,.city-detail{animation:none!important}.hero-stage{height:auto!important;min-height:0!important}.hero{position:relative!important}.hero-scene-note{display:none}.city-scroll{height:auto!important;min-height:0!important}.city-sticky{position:relative!important;height:auto!important;min-height:0!important}.city-frame{height:580px!important}.hero-image,.hero-content,.city-world{transform:none!important;opacity:1!important;will-change:auto}[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.chapter-nav a::after{transition:none}.research-card .article-art svg{transform:none!important;transition:none!important}.research-card svg g{stroke-dashoffset:0!important;transition:none!important}}
.scroll-ready .city-pin:not(.is-active):not(:hover):not(:focus-visible){padding:9px;border-radius:50%;background:#171b4780;border-color:#bfc2df70}.scroll-ready .city-pin:not(.is-active):not(:hover):not(:focus-visible) span:last-child{display:none}.motion-paused .hero h1,.motion-paused .hero-intro,.motion-paused .hero-link{animation:none}
.scene-timeline button{min-height:44px}
@media(max-height:600px) and (min-width:761px){.scroll-ready .city-sticky{min-height:0;height:calc(100svh - 100px)}.city-frame .city-detail{padding:18px;max-width:360px;bottom:65px}.city-frame .city-detail h3{font-size:23px}.city-frame .city-detail p{font-size:10px}.city-frame .city-detail .text-link{margin-top:12px}.scene-timeline{bottom:76px}}