/* map-lab (10/22): the whole-screen footprint (B). The map's own look (land, dots, rings) is v4's home.css. */

/* ---------- the stage: names at the left, the map filling the rest ---------- */
html body .fp-stage{position:relative;display:grid;grid-template-columns:minmax(380px,36%) 1fr;min-height:100vh;background:var(--v4-ground,#111e28);overflow:clip}
html body .fp-stage__copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:120px 32px 72px max(6vw,calc((100vw - 1380px) / 2))}
html body .fp-stage__copy>.eyebrow{margin:0 0 14px}
html body .fp-stage__title{margin:0 0 40px;font:400 20px/1.5 var(--sans);letter-spacing:.02em;color:#aeb7c2}
.fp-stage__list{position:relative;display:flex;flex-direction:column;align-items:flex-start;border-bottom:1px solid rgba(239,181,46,.28);padding-bottom:28px}
.fp-stage__bar{position:absolute;left:0;top:0;width:2px;height:0;background:var(--gold);transition:transform .6s var(--ucs-entry-ease,ease),height .6s var(--ucs-entry-ease,ease)}
html body .fp-pick{display:block;margin:0;padding:6px 0 6px 28px;border:0;background:none;text-align:left;font:400 clamp(34px,3.1vw,50px)/1.32 var(--serif);font-family:var(--serif)!important;letter-spacing:.01em;color:rgba(246,245,239,.32);cursor:pointer;transition:color .45s ease}
html body .fp-pick span{font-family:inherit!important} /* brand-type.css sets every span to the sans */
html body .fp-pick:hover{color:rgba(246,245,239,.62)}
html body .fp-pick.is-on{color:#f5f4ef}
html body .fp-pick:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.fp-stage__detail{position:relative;min-height:112px;margin-top:28px}
.fp-info{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.fp-info.is-on{position:relative;opacity:1;visibility:visible;transition:opacity .45s ease .1s}
html body .fp-info .eyebrow{margin:0 0 16px;color:var(--gold)}
.fp-info__meta{display:flex;flex-wrap:wrap;align-items:center}
.fp-info__meta>span{display:inline-flex;align-items:center;gap:10px;padding-right:20px;font-size:16px;line-height:1.6;color:#d6dbe0}
.fp-info__meta>span+span{padding-left:20px;border-left:1px solid rgba(239,181,46,.28)}
html body .fp-info .ucs-icon{flex:none;width:20px;height:20px;margin:0;color:var(--gold)}
html body .fp-stage__copy>.text-link{align-self:flex-start;margin-top:36px}

/* ---------- the map: v4's tilted plane, steeper, feathered into the page ---------- */
html body .fp-stage__map{position:relative;min-height:100vh;cursor:default}
html body .fp-stage .footprint__map{position:absolute;inset:0 0 0 -6%;border-radius:0;background:none;perspective:1400px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
/* the pin rests at 58% down the pane (BOXES in build.py); tilting about that line keeps it there */
html body .fp-stage .footprint__plane{inset:-60% -32% -14%;transform:rotateX(46deg);transform-origin:50% 67.8%}
/* the rings stay on the plane, unseen, as the pins' positions (stage.js) */
html body .fp-stage .footprint .landmark{opacity:0!important;pointer-events:none}
html body .fp-stage .footprint.has-spot .dot{opacity:.7}

/* ---------- pins: upright over the map, a dot on a short stem with the name under it ---------- */
.fp-pins{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
html body .fp-pin{position:absolute;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;will-change:transform}
.fp-pin::before{content:"";position:absolute;left:-22px;top:-40px;width:44px;height:64px} /* a finger-sized target over dot, stem and name */
.fp-pin i{position:absolute;left:-7px;top:-29px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(239,181,46,.16);transition:background-color .4s ease,box-shadow .4s ease,scale .4s ease}
.fp-pin i::after{content:"";position:absolute;left:6.5px;top:14px;width:1px;height:15px;background:rgba(239,181,46,.75)}
html body .fp-pin span{position:absolute;left:0;top:8px;translate:-50% 0;font:500 13px/1.35 var(--sans);letter-spacing:.06em;color:#e9e4d8;white-space:nowrap;text-shadow:0 1px 10px #0b151d,0 0 3px #0b151d;transition:color .4s ease}
html body .fp-pin:hover span{color:#fff}
.fp-pin.is-on i{background:#f5f4ef;box-shadow:0 0 0 5px rgba(239,181,46,.45);scale:1.15}
html body .fp-pin.is-on span{color:var(--gold)}

/* ---------- the photo over the current pin ---------- */
.fp-photo{position:absolute;left:0;top:0;z-index:3;width:0;height:0;pointer-events:none;will-change:transform}
/* stage.js sets the card's translate: above the pin, or beside or below it when above would cover another pin */
.fp-photo__card{position:absolute;left:0;top:0;width:264px;aspect-ratio:3/2;margin:0;overflow:hidden;border-radius:14px;background:#0d1821;
  box-shadow:0 0 0 1px rgba(246,245,239,.14),0 24px 50px rgba(3,8,11,.55);opacity:0;transform:translateY(10px) scale(.94);
  transition:translate .5s var(--ucs-entry-ease,ease)}
.fp-photo:not(.is-in) .fp-photo__card{transition:none}
.fp-photo.is-in .fp-photo__card{opacity:1;transform:none;transition:translate .5s var(--ucs-entry-ease,ease),opacity .45s ease,transform .6s var(--ucs-entry-ease,ease)}
.fp-photo__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.fp-photo__card img.is-on{opacity:1}

/* ---------- phones and narrow windows: the map above, the names under it ---------- */
@media(max-width:999px){
  html body .fp-stage{display:flex;flex-direction:column;min-height:0;padding:56px 0 64px}
  html body .fp-stage__copy{display:contents}
  html body .fp-stage__copy>.eyebrow,html body .fp-stage__title{margin-left:24px;margin-right:24px}
  html body .fp-stage__copy>.eyebrow{order:1}
  html body .fp-stage__title{order:2;margin-bottom:8px;font-size:18px}
  /* the map stays under the header while the names scroll up beneath it (as v4 does on phones) */
  html body .fp-stage__map{order:3;position:sticky;top:68px;z-index:3;min-height:0;height:min(48vh,440px);background:var(--v4-ground,#111e28)}
  html body .fp-stage .footprint__map{position:relative;inset:auto;height:100%;margin:0}
  .fp-stage__list{order:4;margin:8px 24px 0;padding-bottom:20px}
  html body .fp-pick{padding:4px 0 4px 20px;font-size:30px}
  .fp-stage__detail{order:5;margin:20px 24px 0;min-height:96px}
  html body .fp-stage__copy>.text-link{order:6;margin:24px 24px 0}
  .fp-photo__card{width:188px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .fp-stage__bar,.fp-info,.fp-photo__card,.fp-photo__card img{transition:none!important}
  .fp-photo__card{transform:none}
}

/* ---------- C: B refined ---------- */
/* names: not current is still plainly a name to press; each carries its district on the same line, gold when current */
html body .fp-stage--refined .fp-stage__title{color:#c2c9d0}
html body .fp-stage--refined .fp-stage__list{align-items:stretch;padding-bottom:0;border-bottom:0}
html body .fp-stage--refined .fp-pick{display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;padding:12px 0 12px 28px;
  border-top:1px solid rgba(246,245,239,.09);font-size:clamp(30px,2.7vw,42px);color:rgba(246,245,239,.5)}
html body .fp-stage--refined .fp-pick:last-of-type{border-bottom:1px solid rgba(246,245,239,.09)}
html body .fp-stage--refined .fp-pick:hover{color:rgba(246,245,239,.8)}
html body .fp-stage--refined .fp-pick.is-on{color:#f5f4ef}
.fp-pick__name{flex:1 1 auto;min-width:0}
html body .fp-stage--refined .fp-pick__place{flex:0 1 auto;max-width:11em;text-align:right;font:500 13px/1.4 var(--sans);font-family:var(--sans)!important;letter-spacing:.08em;color:rgba(246,245,239,.42);transition:color .45s ease}
/* English names are longer: a size at which each stays on one line beside its district */
html[lang=en] body .fp-stage--refined .fp-pick{font-size:clamp(24px,2.15vw,32px)}
html body .fp-stage--refined .fp-pick.is-on .fp-pick__place{color:var(--gold)}

/* the map: no extruded edges (at this tilt they read as black walls), a fine gold coast, the dots still */
html body .fp-stage--refined .footprint .map-depth{display:none}
html body .fp-stage--refined .footprint .map-land{fill:#172b37;stroke:rgba(239,181,46,.4);stroke-width:.7}
html body .fp-stage--refined .footprint .dot-halo{animation:none;opacity:.3}
html body .fp-stage--refined .footprint .dot-core{opacity:.7}
html body .fp-stage--refined .footprint.has-spot .dot{opacity:1}

/* pins: the current one leads in gold; the others are small ivory rings */
html body .fp-stage--refined .fp-pin i{left:-5px;top:-25px;width:10px;height:10px;background:#111e28;box-shadow:inset 0 0 0 1.5px #e9e4d8;scale:1;
  transition:left .4s ease,top .4s ease,width .4s ease,height .4s ease,background-color .4s ease,box-shadow .4s ease}
html body .fp-stage--refined .fp-pin i::after{left:4.5px;top:10px;height:15px;background:rgba(233,228,216,.45);transition:left .4s ease,top .4s ease}
html body .fp-stage--refined .fp-pin span{font-size:12px;color:rgba(233,228,216,.75)}
html body .fp-stage--refined .fp-pin:hover span{color:#fff}
html body .fp-stage--refined .fp-pin.is-on i{left:-8px;top:-31px;width:16px;height:16px;background:var(--gold);box-shadow:0 0 0 6px rgba(239,181,46,.2)}
html body .fp-stage--refined .fp-pin.is-on i::after{left:7.5px;top:16px;background:var(--gold)}
html body .fp-stage--refined .fp-pin.is-on span{font-size:13px;color:var(--gold)}

/* the photo: the site's card corner, and its kind on it */
html body .fp-stage--refined .fp-photo__card{border-radius:12px}
.fp-photo__tag{position:absolute;left:12px;top:12px;z-index:1;padding:7px 11px;border-radius:999px;background:rgba(10,18,25,.74);
  font:500 11px/1 var(--sans);letter-spacing:.12em;color:var(--gold);opacity:0;transition:opacity .45s ease}
.fp-photo__tag.is-on{opacity:1}
@media(max-width:999px){
  html body .fp-stage--refined .fp-pick{padding:9px 0 9px 20px;font-size:26px}
  html body .fp-stage--refined .fp-pick__place{font-size:12px}
}

/* ---------- comparison bar (as hero-lab) ---------- */
.lab-bar{position:fixed;left:50%;bottom:16px;translate:-50% 0;z-index:200;display:flex;gap:2px;padding:4px;border:1px solid #ffffff26;border-radius:999px;background:#0a1219c4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12px/1 var(--sans);letter-spacing:.04em;white-space:nowrap}
.lab-bar a{padding:9px 13px;border-radius:999px;color:#cfd6dd;text-decoration:none}
.lab-bar a:hover{color:#fff;background:#ffffff14}
.lab-bar a[aria-current]{background:#efb52e;color:#14181d}

/* ---------- D: C again, after comparing it with belgradearbor (10/22) ---------- */
/* the heading: v4's section heading, sized as the homepage's other sections (home.css .section-head h2) */
html body .fp-stage__heading{margin:0 0 44px;font-size:clamp(34px,3.4vw,50px);line-height:1.3}
/* English is wider: "Over fifty residences" needs about 9.1 times the font size, so it keeps to one line in the column */
html[lang=en] body .fp-stage__heading{font-size:clamp(30px,calc(3.2vw - 4px),42px)}
/* names: smaller, the district on the same line */
html body .fp-stage--d .fp-pick{padding:14px 0 14px 24px;font-size:clamp(22px,1.8vw,28px);line-height:1.25}
html[lang=en] body .fp-stage--d .fp-pick{font-size:clamp(20px,1.6vw,25px)}
/* a narrow column: the district goes under the name, so a long name keeps to one line */
@media(min-width:1000px) and (max-width:1199px){
  html body .fp-stage--d .fp-pick{flex-direction:column;align-items:flex-start;gap:4px}
  html body .fp-stage--d .fp-pick__place{max-width:none;text-align:left}
}

/* pins: a point of light with the name beside it; no stem, no ring. The current one glows gold. */
.fp-stage--d{--fp-glow:radial-gradient(circle,rgba(255,206,102,.5) 0,rgba(239,181,46,.2) 22%,rgba(239,181,46,.06) 45%,transparent 70%)}
html body .fp-stage--d .fp-pin::before{left:-22px;top:-22px;width:44px;height:44px}
html body .fp-stage--d .fp-pin i{left:-3px;top:-3px;width:6px;height:6px;background:#efe9da;box-shadow:0 0 6px 1px rgba(239,233,218,.4);scale:1;
  transition:left .5s ease,top .5s ease,width .5s ease,height .5s ease,background-color .5s ease,box-shadow .5s ease}
html body .fp-stage--d .fp-pin i::after{left:50%;top:50%;width:84px;height:84px;translate:-50% -50%;border-radius:50%;background:var(--fp-glow);
  opacity:0;scale:.3;transition:opacity .6s ease,scale .8s var(--ucs-entry-ease,ease)}
html body .fp-stage--d .fp-pin span{left:14px;top:0;translate:0 -50%;font-size:12px;color:rgba(233,228,216,.72);transition:color .4s ease,left .5s ease}
/* the zh/en spans inside the name stay in its flow, so the name has a width to keep the photo off */
html body .fp-stage--d .fp-pin span span{position:static;translate:none;font-size:inherit;color:inherit;transition:none}
html body .fp-stage--d .fp-pin.is-on i{left:-5px;top:-5px;width:10px;height:10px;background:#fff4d6;
  box-shadow:0 0 6px 2px rgba(255,220,140,.95),0 0 18px 6px rgba(239,181,46,.6),0 0 40px 14px rgba(239,181,46,.22)}
html body .fp-stage--d .fp-pin.is-on i::after{left:50%;top:50%;background:var(--fp-glow);opacity:1;scale:1}
html body .fp-stage--d .fp-pin.is-on span{left:20px;font-size:13px;color:var(--gold)}

/* the photo: larger */
html body .fp-stage--d .fp-photo__card{width:clamp(260px,27vw,420px)} /* 389px at 1440; at 1024 small enough to stand beside its pin */

@media(max-width:999px){
  html body .fp-stage__heading{order:2;margin:0 24px 12px}
  html[lang=en] body .fp-stage__heading{font-size:32px}
  html body .fp-stage--d .fp-pick{padding:12px 0 12px 20px;font-size:24px}
  html[lang=en] body .fp-stage--d .fp-pick{font-size:22px}
  html body .fp-stage--d .fp-pick__place{font-size:14px}
  html body .fp-stage--d .fp-photo__card{width:224px}
}
@media(prefers-reduced-motion:reduce){
  .fp-stage--d .fp-pin i,.fp-stage--d .fp-pin i::after,.fp-stage--d .fp-pin span{transition:none!important}
}