/* COAST VIEW 3D — light studio: white glass plates, ink text, deep-gold accents
   (owner's call 2026-09-20: no dark chrome). The dark version is kept at
   terrain/coast_dark_theme.css.bak. */
:root{
  --gold:#c9a25b; --gold-lt:#9c7a33; --gold-hi:#d4af6e;
  --ink:#16233a; --pearl:#16233a; --glass:rgba(255,255,255,.86);
  --line:rgba(185,142,63,.32);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(120% 90% at 50% 12%,#ffffff,#f4f1e9 55%,#e7e3d9);
  font-family:"Inter","Helvetica Neue",system-ui,sans-serif;color:var(--pearl);
  -webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;cursor:grab}
#stage.grabbing{cursor:grabbing}
#stage.pickable{cursor:pointer}

/* ---------- chrome ---------- */
.plate{background:var(--glass);backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.85);border-radius:14px;
  box-shadow:0 10px 34px rgba(42,52,65,.16),inset 0 0 0 1px rgba(185,142,63,.16)}

#brand{position:fixed;left:22px;top:20px;padding:12px 20px;z-index:6}
#brand h1{margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:30px;letter-spacing:.24em;
  background:linear-gradient(100deg,#8a6a2c,#c9a25b 45%,#9c7a33);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#brand .sub{margin-top:3px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(22,35,58,.72)}

#hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  padding:9px 18px;font-size:12px;letter-spacing:.06em;z-index:6;
  color:rgba(22,35,58,.86);white-space:nowrap;transition:opacity .5s}
#hint.fade{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s}

/* ---------- floor rail ---------- */
#rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;padding:12px;z-index:6}
#rail .rail-cap{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(22,35,58,.5);text-align:center;margin-bottom:2px}
#rail .rail-cap:not(:first-child){margin-top:9px}
.floor-btn{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:1px solid transparent;border-radius:9px;
  padding:8px 12px;color:var(--pearl);font:inherit;font-size:12.5px;
  letter-spacing:.05em;cursor:pointer;transition:.22s}
.floor-btn:hover{background:rgba(230,211,168,.1);border-color:var(--line)}
.floor-btn.on{background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14));
  border-color:rgba(230,211,168,.5)}
.floor-btn .lvl{font-family:"Cormorant Garamond",Georgia,serif;font-size:15.5px;
  letter-spacing:.05em;color:var(--gold-lt);min-width:26px;text-align:center}

#reset{position:fixed;right:20px;bottom:22px;padding:9px 16px;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pearl);
  cursor:pointer;z-index:6;border:1px solid var(--line);border-radius:11px;
  background:var(--glass);backdrop-filter:blur(14px)}
#reset:hover{border-color:rgba(230,211,168,.55)}

/* ---------- info card ---------- */
#card{position:fixed;left:22px;bottom:22px;width:310px;max-width:calc(100vw - 44px);
  padding:20px 22px;z-index:7;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:.4s cubic-bezier(.22,.9,.3,1)}
#card.show{opacity:1;transform:none;pointer-events:auto}
#card{max-height:calc(100vh - 90px);overflow-y:auto}
#card .kicker{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:6px}
#card h2{margin:0 0 12px;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:27px;letter-spacing:.03em;color:#16233a}
#card .row{display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-top:1px solid rgba(230,211,168,.15);font-size:12.5px}
#card .row span:first-child{color:rgba(22,35,58,.62)}
#card .note{margin-top:13px;font-size:11.5px;line-height:1.55;
  color:rgba(22,35,58,.6)}
/* 24x24 was a mouse-sized target; the pressable area grows, the glyph does not */
#card .close{position:absolute;right:6px;top:5px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:rgba(22,35,58,.55);font-size:19px;
  cursor:pointer;line-height:1}
#card .close:hover{color:var(--gold-lt)}

/* ---------- tooltip ---------- */
#tip{position:fixed;z-index:8;padding:5px 11px;font-size:11.5px;
  letter-spacing:.05em;pointer-events:none;opacity:0;transition:opacity .16s;
  white-space:nowrap;transform:translate(-50%,-140%)}
#tip.show{opacity:1}

/* ---------- loader / fallback ---------- */
#load{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 90% at 50% 40%,#ffffff,#f4f1e9);
  transition:opacity .7s}
#load.gone{opacity:0;pointer-events:none}
#load .mark{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:40px;letter-spacing:.3em;
  background:linear-gradient(100deg,#8a6a2c,#c9a25b 50%,#9c7a33);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#load .track{width:190px;height:2px;background:rgba(230,211,168,.18);
  border-radius:2px;overflow:hidden}
#load .fill{height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),#fbf6e7);transition:width .3s}
#load .pct{font-size:10.5px;letter-spacing:.2em;color:rgba(22,35,58,.55)}

#nogl{position:fixed;inset:0;z-index:30;display:none;
  background:#f4f1e9 center/cover no-repeat}
#nogl.on{display:flex;align-items:flex-end}
#nogl .msg{width:100%;padding:30px 26px;font-size:13px;line-height:1.6;
  background:linear-gradient(0deg,rgba(244,241,233,.96),transparent)}
#nogl .msg b{color:var(--gold-lt);font-weight:500}

@media (max-width:760px){
  #brand{left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));padding:9px 15px}
  #brand h1{font-size:22px}
  /* phone: the rail becomes a compact bottom bar of block+level tags
     (A1..AR, B1..BR, G) */
  /* width:max-content — a fixed element at left:50% otherwise shrinks to the
     half-screen it has on its right and wraps the nine tags into a 3x3 block */
  #rail{top:auto;right:auto;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translateX(-50%);flex-direction:row;flex-wrap:wrap;width:max-content;
    justify-content:center;max-width:calc(100vw - 20px);padding:5px 6px;gap:3px}
  #rail .rail-cap{display:none}
  /* width:100% from the desktop rail would make each tag a full-width row
     and turn the bottom bar back into a tall stack covering the model. */
  /* A finger needs ~44px. These tags were 34x33, which is why picking a floor
     on a phone felt like aiming rather than tapping. */
  .floor-btn{width:auto;flex:0 0 auto;font-size:11px;padding:0 10px;gap:0;
    min-width:46px;min-height:46px;justify-content:center}
  .floor-btn span:last-child{display:none}
  .floor-btn .lvl{min-width:20px;font-size:15.5px}
  #card{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));width:auto;padding:16px 18px;max-height:56vh}
  #card h2{font-size:22px}
  #reset{display:none}
  /* below the Back-to-tour button (top 66px, ~40px tall) — they used to overlap */
  #hint{bottom:auto;top:calc(112px + env(safe-area-inset-top));font-size:11px}
}

#hint .narrow{display:none}
@media (max-width:760px){
  #hint .wide{display:none}
  #hint .narrow{display:inline}
}

/* ================= cinematic intro ================= */
#intro{position:fixed;inset:0;z-index:40;background:#0b1118;transition:opacity .9s ease}
#intro.gone{opacity:0;pointer-events:none}
#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#intro-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,17,24,.28),rgba(11,17,24,.05) 40%,rgba(11,17,24,.72) 88%)}
#intro-content{position:absolute;left:0;right:0;bottom:9vh;text-align:center;padding:0 20px}
.intro-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,242,234,.85)}
.intro-mark{margin:10px 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:64px;letter-spacing:.3em;line-height:1;
  background:linear-gradient(100deg,var(--gold),#fbf6e7 50%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.intro-sub{font-size:13px;letter-spacing:.08em;color:rgba(246,242,234,.8);margin-bottom:26px}
#intro-btn{font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#16233a;background:rgba(255,255,255,.8);border:1px solid var(--gold);
  border-radius:99px;padding:13px 34px;cursor:pointer;backdrop-filter:blur(10px);
  transition:.25s}
#intro-btn:hover,#intro-btn:focus-visible{background:#fff}
@media (max-width:760px){.intro-mark{font-size:42px}}

/* ================= status ================= */
#card-status{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.badge{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 12px;border-radius:99px}
.badge.s-av{color:#2f8f57;background:rgba(47,143,87,.12);border:1px solid rgba(47,143,87,.4)}
.badge.s-rs{color:#b07d1e;background:rgba(176,125,30,.12);border:1px solid rgba(176,125,30,.4)}
/* "Price on request" — gold serif, the owner's standing rule */
#card-status .price{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15.5px;color:var(--gold-lt);letter-spacing:.05em}

/* ================= unit chips (floor card) ================= */
#card-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
#card-chips:empty{display:none}
.unit-chip{font:inherit;display:flex;justify-content:space-between;align-items:center;
  gap:8px;background:rgba(230,211,168,.06);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;color:var(--pearl);cursor:pointer;transition:.2s}
.unit-chip:hover,.unit-chip:focus-visible{border-color:var(--gold)}
.unit-chip b{font-weight:600;font-size:13.5px;letter-spacing:.05em}
.unit-chip span{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.unit-chip.s-av span{color:#2f8f57}
.unit-chip.s-rs{opacity:.75}
.unit-chip.s-rs span{color:#b07d1e}

/* ================= unit mini floor plan (in the card) ================= */
#card-plan{margin-top:13px}
#card-plan:empty{display:none}
.mini-plan{position:relative;display:block;width:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  cursor:pointer;transition:border-color .2s}
.mini-plan:hover,.mini-plan:focus-visible{border-color:var(--gold)}
.mini-plan img{display:block;width:100%;height:auto}
.zone-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zone-svg polygon{fill:rgba(212,175,110,.32);stroke:var(--gold-hi);
  stroke-width:2;vector-effect:non-scaling-stroke}

/* ================= card actions ================= */
#card-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
#card-actions:empty{display:none}
.act{flex:1 1 45%;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;text-decoration:none;color:var(--pearl);
  background:rgba(230,211,168,.08);border:1px solid var(--line);border-radius:10px;
  padding:11px 8px;cursor:pointer;transition:.2s}
.act:hover,.act:focus-visible{border-color:var(--gold)}
/* The 360 link carries longer copy ("sample apartment") — give it the full
   row so the label never wraps to three lines inside a 45% pill. */
.act-360{flex:1 1 100%;background:rgba(230,211,168,.13)}
.act-wa{flex:1 1 100%;
  background:linear-gradient(100deg,rgba(201,162,91,.32),rgba(212,175,110,.16));
  border-color:rgba(230,211,168,.5);font-weight:500}

/* ================= plan modal ================= */
#plan-modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;
  justify-content:center;background:rgba(231,227,217,.82);backdrop-filter:blur(8px);padding:18px}
#plan-modal.on{display:flex}
#plan-card{width:min(1040px,96vw);max-height:92vh;display:flex;flex-direction:column;
  padding:0;overflow:hidden}
#plan-head{display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--line)}
#plan-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;flex:1;
  color:#16233a;letter-spacing:.03em}
#plan-toggle{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
#plan-toggle button{font:inherit;font-size:11.5px;letter-spacing:.1em;padding:6px 16px;
  background:none;border:0;color:rgba(22,35,58,.55);cursor:pointer}
#plan-toggle button.on{background:rgba(201,162,91,.25);color:var(--pearl)}
#plan-close{font-size:22px;background:none;border:0;color:rgba(22,35,58,.6);
  cursor:pointer;line-height:1;padding:2px 6px}
#plan-close:hover{color:var(--gold-lt)}
#plan-box{overflow:auto;background:#fff;display:flex;align-items:flex-start;justify-content:center}
#plan-wrap{position:relative;display:inline-block;max-width:100%}
#plan-img{display:block;max-width:100%;height:auto}

/* ================= no-WebGL picker ================= */
#pick{position:fixed;inset:0;z-index:5;display:none;background:#f4f1e9}
#pick.on{display:block}
#pick-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#pick-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pick-spots{position:absolute;inset:0}
.spot{position:absolute;transform:translate(-50%,-50%);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.8);border:1px solid rgba(230,211,168,.55);
  border-radius:12px;padding:8px 14px;color:var(--pearl);backdrop-filter:blur(6px);
  transition:.2s;box-shadow:0 6px 22px rgba(42,52,65,.22)}
.spot:hover,.spot:focus-visible{border-color:var(--gold);background:rgba(255,255,255,.95)}
.spot b{font-weight:600;font-size:13px;letter-spacing:.06em}
.spot span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,35,58,.75)}
.spot-unit.s-av span{color:#2f8f57}
.spot-unit.s-rs{opacity:.8}
.spot-unit.s-rs span{color:#b07d1e}
.spot-block b{font-size:15px}
#pick-top{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:6;
  display:flex;align-items:center;gap:14px;padding:10px 18px;font-size:12.5px;
  letter-spacing:.06em}
#pick-back{font:inherit;font-size:12px;background:none;border:0;color:var(--gold-lt);
  cursor:pointer;letter-spacing:.06em;padding:0}
/* facade chip positions not measured yet → floor-grouped list keeps every
   unit reachable in the no-WebGL path */
.pick-list{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);max-height:70vh;overflow-y:auto;padding:18px 20px}
.pick-list .pick-cap{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lt);margin:12px 0 7px}
.pick-list .pick-cap:first-child{margin-top:0}
.pick-list .pick-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.nogl #rail,body.nogl #reset,body.nogl #hint{display:none}
@media (max-width:760px){
  .spot{padding:6px 10px}
  .spot b{font-size:11.5px}
  .spot span{font-size:8.5px}
}

@media (prefers-reduced-motion: reduce){
  #intro,#card,.spot,.act,.unit-chip{transition:none}
}

/* Picker mode: the card sits over a bright busy photo — glass at 55% is
   unreadable there, so go near-opaque and push the chips back. */
body.nogl #card{background:rgba(255,255,255,.96)}
body.card-open .spot{opacity:.22;pointer-events:none;transition:opacity .25s}
body.card-open .pick-list{opacity:.22;pointer-events:none;transition:opacity .25s}
body.card-open #pick-top{opacity:.25}

/* ================= back-to-tour link ================= */
/* Sits under the brand plate; the 3D lives at /3d/ on the main site, so this
   is how a visitor gets back to the tour they came from. */
#back-site{position:fixed;z-index:12;display:inline-flex;align-items:center;gap:7px;
  left:calc(20px + env(safe-area-inset-left));top:calc(96px + env(safe-area-inset-top));
  padding:8px 13px;border-radius:10px;text-decoration:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pearl);
  transition:.2s}
#back-site:hover,#back-site:focus-visible{border-color:var(--gold);color:#fff}
@media (max-width:760px){
  #back-site{left:calc(12px + env(safe-area-inset-left));top:calc(78px + env(safe-area-inset-top));
    padding:11px 14px;font-size:10px;min-height:44px}
}
body.card-open #back-site{opacity:0;pointer-events:none}

/* ================= apartment tooltip ================= */
/* Deliberately small: the owner asked for an apartment tag on hover, not an
   information panel. The status dot carries the availability colour. */
#tip.apt{display:flex;flex-direction:column;gap:2px;padding:9px 13px;
  transform:translate(-50%,-125%);min-width:104px;text-align:left}
#tip .tip-id{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;
  font-weight:400;letter-spacing:.08em;color:#16233a;line-height:1.05}
#tip .tip-sub{font-size:10.5px;letter-spacing:.09em;color:rgba(22,35,58,.72)}
#tip .tip-st{margin-top:3px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;display:flex;align-items:center;gap:6px}
#tip .tip-st::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 8px currentColor}
#tip .tip-av{color:#2f8f57}
#tip .tip-rs{color:#b07d1e}
#tip .tip-sold{color:#c9442e}

/* ================= availability legend ================= */
#legend{position:fixed;left:22px;bottom:22px;z-index:6;display:flex;gap:16px;
  padding:9px 15px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(22,35,58,.8)}
#legend span{display:flex;align-items:center;gap:7px}
#legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
#legend .lg-av i{background:#2f8f57;box-shadow:0 0 0 2px rgba(47,143,87,.2)}
#legend .lg-rs i{background:#d99a2b;box-shadow:0 0 0 2px rgba(217,154,43,.2)}
#legend .lg-sd i{background:#d4472f;box-shadow:0 0 0 2px rgba(212,71,47,.2)}
body.card-open #legend{opacity:0;pointer-events:none}
@media (max-width:760px){
  #legend{left:50%;transform:translateX(-50%);bottom:auto;
    top:calc(64px + env(safe-area-inset-top));gap:11px;padding:7px 11px;font-size:9px}
}

/* ================= entering the 360 ================= */
#entering{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;background:radial-gradient(120% 90% at 50% 45%,#ffffff,#e7e3d9);
  opacity:0;pointer-events:none;transition:opacity .55s ease}
body.entering #entering{opacity:1;pointer-events:auto}
.ent-inner{text-align:center}
.ent-mark{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:34px;letter-spacing:.3em;
  background:linear-gradient(100deg,#8a6a2c,#c9a25b 50%,#9c7a33);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#enter-label{margin-top:10px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(22,35,58,.7)}
.ent-bar{margin:18px auto 0;width:150px;height:2px;border-radius:2px;
  background:rgba(230,211,168,.18);overflow:hidden}
.ent-bar span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),#fbf6e7);animation:entfill 1.35s ease forwards}
@keyframes entfill{to{width:100%}}
/* the whole hand-off is ~1.4s; respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .ent-bar span{animation-duration:.2s}
}

/* ================= 360 inside the 3D ================= */
/* The building scene is never torn down — this layer sits over it, so
   "Back to building" is instant and the camera is exactly where it was. */
#tour360{position:fixed;inset:0;z-index:70;display:none;background:#e7e3d9}
#tour360.on{display:block}
#t360-frame{position:absolute;inset:0;top:0}
#t360-frame iframe{width:100%;height:100%;border:0;display:block}
#t360-bar{position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:center;gap:14px;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  background:linear-gradient(180deg,rgba(10,16,23,.82),rgba(10,16,23,0));
  pointer-events:none}
#t360-bar > *{pointer-events:auto}
#t360-back{display:inline-flex;align-items:center;gap:7px;font:inherit;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  color:var(--pearl);background:var(--glass);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;backdrop-filter:blur(14px);transition:.2s}
#t360-back:hover,#t360-back:focus-visible{border-color:var(--gold);color:#16233a}
#t360-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;
  letter-spacing:.14em;color:#fbf6e7;text-shadow:0 2px 14px rgba(0,0,0,.6)}
/* Sits beside the title, not hard right: the tour page has its own ENQUIRE
   pill in the top-right corner and the two used to overlap. */
#t360-open{margin-left:2px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(246,242,234,.75);text-decoration:none;
  border-bottom:1px solid rgba(230,211,168,.35);padding-bottom:2px}
#t360-open:hover{color:var(--gold-lt)}
@media (max-width:760px){
  #t360-title{font-size:15px}
  #t360-back span{display:none}
  #t360-back{padding:9px 11px}
  #t360-open{font-size:9px}
}

/* ================= 360 availability cues ================= */
/* The tooltip says whether the apartment can be walked before the click, so a
   click never lands on a dead end. */
#tip .tip-360{margin-top:5px;padding-top:5px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-lt);
  border-top:1px solid rgba(230,211,168,.22)}
#tip .tip-360.tip-soon{color:rgba(22,35,58,.45)}

/* "in production" state — looks like an action but is plainly not one */
.act-soon{flex:1 1 100%;text-align:center;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(22,35,58,.45);
  border:1px dashed rgba(230,211,168,.25);border-radius:10px;padding:11px 8px;
  cursor:default}
.soon-360{display:block;margin-bottom:7px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-lt)}

/* ================= warmed tour frame =================
   The 360 is loaded off-screen ahead of time so pressing an apartment shows
   something already running. Zero size (not display:none) because a hidden
   iframe is not guaranteed to keep rendering. */
#t360-frame iframe.warm{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;border:0}

/* ================= walk-in state ================= */
.ready-360{display:block;margin-bottom:7px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#2f8f57}
/* The 360 button is the point of the panel — give it the full row and weight */
#card-actions .act-360{flex:1 1 100%;font-weight:500;
  background:linear-gradient(100deg,rgba(201,162,91,.34),rgba(212,175,110,.18));
  border-color:rgba(230,211,168,.55);color:#16233a}
#card-actions .act-360:hover{border-color:var(--gold);
  background:linear-gradient(100deg,rgba(201,162,91,.46),rgba(212,175,110,.26))}
/* During the move into the apartment nothing should compete with it */
body.diving #rail,body.diving #legend,body.diving #reset,
body.diving #brand,body.diving #back-site,body.diving #hint{
  opacity:0;transition:opacity .4s ease;pointer-events:none}
body.diving #stage{cursor:default}
/* the overlay's opacity is driven frame-by-frame during the dive */
#tour360{transition:none}

/* ================= no-WebGL picker on a phone =================
   Portrait screens get the whole facade rather than a cover-crop, so every
   apartment chip stays on screen. Paired with the `contain` class set in
   coast.js so the chip maths and the image agree. */
#pick.contain #pick-img{object-fit:contain}

/* ================= mobile chrome stacking =================
   Brand, back-link and legend were all pinned near the top and overlapped
   each other on a phone. Give them their own rows. */
@media (max-width:760px){
  #brand{padding:7px 12px}
  #brand h1{font-size:19px}
  #brand .sub{font-size:8.5px;letter-spacing:.14em}
  #back-site{top:calc(66px + env(safe-area-inset-top))}
  /* legend moves clear of the brand block entirely */
  #legend{top:auto;bottom:calc(62px + env(safe-area-inset-bottom));
    left:50%;transform:translateX(-50%)}
  body.nogl #legend{bottom:calc(14px + env(safe-area-inset-bottom))}
  /* the picker's own label must not collide with the legend */
  body.nogl #pick-label{bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* On a portrait phone the facade is letterboxed, leaving the prompt and the
   legend fighting for the same strip at the bottom. Move the prompt up under
   the header where there is room. */
@media (max-width:760px){
  /* #pick-label and #pick-back are static children of the fixed #pick-top bar,
     so the BAR is what has to move - styling the children does nothing. */
  body.nogl #pick-top{top:calc(112px + env(safe-area-inset-top));bottom:auto}
}

/* ================= 360 bar on a phone =================
   The embedded tour draws its own centred header, so a full-width bar on top
   of it collides. Shrink ours to a round back button in the corner and drop
   the apartment name to its own line underneath — it still has to be shown,
   because the tour inside is A201's and the visitor may have come from A204. */
@media (max-width:760px){
  #t360-bar{display:block;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:linear-gradient(180deg,rgba(10,16,23,.75),rgba(10,16,23,0))}
  #t360-back{position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top));
    width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}
  #t360-back span{display:none}
  #t360-title{position:absolute;left:60px;right:12px;
    top:calc(50px + env(safe-area-inset-top));
    font-size:13px;letter-spacing:.1em;text-align:left;
    text-shadow:0 2px 10px rgba(0,0,0,.85)}
  #t360-open{display:none}
}

/* ================= "3D not supported" notice ================= */
/* Reads as part of the brand, not a browser error. Sits low so it never
   covers the building photo the visitor is meant to be looking at. */
/* Visible from the first frame — no fade-in to depend on. An important
   message must never be hostage to a transition that a throttled or
   background-suspended browser may never run. Only the slide is animated. */
#nogl-note{position:fixed;z-index:40;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);width:min(420px,calc(100vw - 28px));
  padding:18px 20px 16px;opacity:1;
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,.9,.3,1)}
#nogl-note.in{transform:translate(-50%,0)}
#nogl-note.gone{opacity:0;transform:translate(-50%,10px)}
#nogl-note .nn-h{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;
  letter-spacing:.04em;color:#16233a;margin-bottom:7px;padding-right:22px}
#nogl-note .nn-b{margin:0;font-size:13px;line-height:1.6;color:rgba(22,35,58,.82)}
#nogl-note .nn-b b{color:var(--gold-lt);font-weight:500}
#nogl-note .nn-s{margin:9px 0 0;font-size:11.5px;line-height:1.55;
  color:rgba(22,35,58,.55)}
#nogl-note .nn-x{position:absolute;right:12px;top:10px;width:26px;height:26px;
  border:0;background:none;color:rgba(22,35,58,.55);font-size:20px;
  line-height:1;cursor:pointer}
#nogl-note .nn-x:hover{color:var(--gold-lt)}
#nogl-note .nn-go{margin-top:14px;width:100%;font:inherit;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#16233a;cursor:pointer;
  padding:11px;border-radius:10px;border:1px solid rgba(230,211,168,.5);
  background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14))}
#nogl-note .nn-go:hover{border-color:var(--gold)}
@media (max-width:760px){
  #nogl-note{bottom:calc(16px + env(safe-area-inset-bottom));padding:15px 16px 13px}
  #nogl-note .nn-h{font-size:17px}
  #nogl-note .nn-b{font-size:12.5px}
}

/* The notice is a message to READ, so it gets a solid ground rather than the
   translucent plate used for floating chrome — over a dark render the glass
   version left the text barely legible. */
/* No backdrop-filter here on purpose: the background is already 94% opaque so
   the blur buys nothing, it composites unreliably (it renders near-black in
   off-screen captures), and it is a real cost on the phones this notice is
   mostly shown to. */
#nogl-note{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(230,211,168,.34);box-shadow:0 18px 50px rgba(42,52,65,.30)}
/* The availability key would otherwise sit on top of the notice's own button. */
body.has-note #legend{opacity:0;pointer-events:none}

/* ?debug only — never shown to a visitor */
#dbg{position:fixed;left:0;right:0;bottom:0;z-index:99;max-height:42vh;overflow:auto;
  margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  color:#9ff5c0;background:rgba(0,0,0,.86);border-top:1px solid rgba(159,245,192,.3)}

/* ---------- sunlight study ---------- */
#sun-btn{position:fixed;right:20px;bottom:66px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;font:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pearl);cursor:pointer;border-radius:11px;min-height:40px}
#sun-btn svg{color:var(--gold-lt)}
#sun-btn:hover,#sun-btn.on{border-color:rgba(230,211,168,.55)}
#sun-btn.on{background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14)),var(--glass)}
#compass{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:4px;padding:5px 9px 5px 6px;border-radius:999px;
  font-size:10px;letter-spacing:.18em;color:rgba(22,35,58,.75)}
#compass svg{transition:transform .08s linear}
#sun-panel{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:7;
  width:min(560px,calc(100vw - 44px));padding:14px 18px 12px;opacity:0;pointer-events:none;
  transition:.35s cubic-bezier(.22,.9,.3,1)}
#sun-panel.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body.card-open #sun-panel{left:calc(22px + 310px + 18px);transform:translate(0,14px);
  width:min(560px,calc(100vw - 22px - 310px - 18px - 22px))}
body.card-open #sun-panel.on{transform:none}
body.sun-open #hint{display:none}
#sun-panel .sp-row{display:flex;align-items:center;gap:10px}
#sun-panel .sp-head{justify-content:space-between;margin-bottom:8px}
#sun-panel .sp-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.08em;color:var(--gold-lt)}
#sp-date{font-size:12px;letter-spacing:.06em;color:var(--pearl)}
#sun-panel .sp-close{background:none;border:0;color:rgba(22,35,58,.6);font-size:22px;line-height:1;
  width:36px;height:36px;margin:-8px -10px -8px 0;cursor:pointer;border-radius:8px}
#sun-panel .sp-close:hover{color:var(--gold-lt)}
#sun-panel .sp-seasons{gap:6px;flex-wrap:wrap;margin-bottom:8px}
#sun-panel .sp-seasons button{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pearl);background:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;min-height:30px}
#sun-panel .sp-seasons button.on,#sun-panel .sp-seasons button:hover{border-color:rgba(230,211,168,.6);
  background:rgba(230,211,168,.12)}
#sun-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0;cursor:pointer}
#sun-panel input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(230,211,168,.28)}
#sun-panel input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(230,211,168,.28)}
#sun-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7.5px;
  border-radius:50%;background:linear-gradient(140deg,#fbf6e7,var(--gold));border:1px solid rgba(20,33,46,.5);box-shadow:0 2px 8px rgba(42,52,65,.22)}
#sun-panel input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(140deg,#fbf6e7,var(--gold));border:1px solid rgba(20,33,46,.5)}
#sp-day{margin-bottom:6px}
#sun-panel .sp-time span{font-size:11px;letter-spacing:.04em;color:rgba(22,35,58,.6);min-width:38px;text-align:center}
#sp-play{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid var(--line);background:rgba(230,211,168,.12);
  color:var(--gold-lt);font-size:12px;cursor:pointer;padding:0}
#sp-play:hover{border-color:var(--gold)}
#sun-panel .sp-read{justify-content:space-between;margin-top:4px}
#sp-clock{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;letter-spacing:.06em;color:var(--gold-lt);line-height:1}
#sp-sun{font-size:11.5px;color:rgba(22,35,58,.78);text-align:right}
#sun-panel .sp-note{margin-top:8px;font-size:10px;line-height:1.5;color:rgba(22,35,58,.5)}
/* the apartment card's sunlight section */
#card-sun:empty{display:none}
#card-sun{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.5}
#card-sun .sun-cap{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:5px}
#card-sun .sun-cap span{color:rgba(22,35,58,.6);letter-spacing:.08em;text-transform:none;font-size:11px}
#card-sun b{color:#16233a;font-weight:500}
#card-sun .sun-sides{margin-top:5px;display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:rgba(22,35,58,.8)}
#card-sun .sun-note{margin-top:6px;font-size:10px;line-height:1.5;color:rgba(22,35,58,.5)}
#card-sun .sun-note a{color:var(--gold-lt)}
#card-sun .sun-year-cap{margin-top:9px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(22,35,58,.6)}
#card-sun .sun-year-cap span{display:block;letter-spacing:.04em;text-transform:none;font-size:10px;color:rgba(22,35,58,.45)}
#card-sun .sun-bars{display:flex;align-items:flex-end;gap:3px;height:54px;margin-top:6px}
#card-sun .sun-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;
  background:none;border:0;padding:0;cursor:pointer;color:rgba(22,35,58,.5);font:inherit;font-size:9px}
#card-sun .sun-bar i{display:block;width:100%;border-radius:2px 2px 0 0;background:rgba(185,142,63,.3);transition:height .3s}
#card-sun .sun-bar.on i,#card-sun .sun-bar:hover i{background:linear-gradient(180deg,#d4af6e,#9c7a33)}
#card-sun .sun-bar.on{color:var(--gold-lt)}
@media (max-width:760px){
  /* the brand plate spans most of a phone's width: the sun button becomes a round icon beside it */
  #sun-btn{right:calc(12px + env(safe-area-inset-right));bottom:auto;top:calc(14px + env(safe-area-inset-top));
    width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  #sun-btn span{display:none}
  #compass{left:auto;right:calc(12px + env(safe-area-inset-right));top:calc(66px + env(safe-area-inset-top));transform:none;padding:4px 8px 4px 5px}
  #compass svg{width:24px;height:24px}
  #sun-panel,body.card-open #sun-panel{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));
    width:auto;bottom:auto;top:calc(140px + env(safe-area-inset-top));transform:translateY(-10px);padding:11px 13px 9px}
  #sun-panel.on,body.card-open #sun-panel.on{transform:none}
  body.sun-open.card-open #card{max-height:38vh}
  #sp-clock{font-size:22px}
  #sun-panel .sp-note{display:none}
}

#map-credit{position:fixed;left:22px;bottom:64px;z-index:5;font-size:9.5px;letter-spacing:.02em;color:rgba(22,35,58,.45);
  max-width:330px;line-height:1.4;display:none}
#map-credit a{color:rgba(22,35,58,.6)}
body.has-map #map-credit{display:block}
@media (max-width:760px){#map-credit{left:calc(12px + env(safe-area-inset-left));bottom:auto;top:calc(150px + env(safe-area-inset-top));max-width:60vw;font-size:8.5px}
  body.sun-open #map-credit{display:none}}

@media (max-width:760px){#legend{left:calc(12px + env(safe-area-inset-left));transform:none;bottom:calc(126px + env(safe-area-inset-bottom));padding:6px 11px;font-size:9px}
  body.card-open #legend{display:none}}

/* ================= around: pins, street names, panel ================= */
#pins{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
body:not(.has-places) #around-btn{display:none}
body.tour-open #pins,body.diving #pins,body.nogl #pins,body.nogl #around-btn,body.nogl #home-btn{display:none}
.pin{position:absolute;left:0;top:0;margin:-13px 0 0 -13px;transform:translate(-9999px,-9999px);pointer-events:auto;z-index:1;
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;
  background:rgba(255,255,255,.9);border:1px solid rgba(22,35,58,.16);
  color:var(--pearl);font:inherit;font-size:10.5px;letter-spacing:.03em;white-space:nowrap;cursor:pointer;
  transition:opacity .25s,border-color .2s,background .2s}
/* will-change promotes an element to its own compositor layer for good. With
   67 pins on the map that is 67 layers held in video memory on a phone, most
   of them hidden most of the time. Only the ones actually on screen get one. */
.pin:not(.off){will-change:transform}
.pin i,.ap-item i{display:block;width:10px;height:10px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 1px 3px rgba(42,52,65,.25)}
.pin .pl-d{color:rgba(22,35,58,.6);font-size:9.5px}
.pin.far{border-style:dashed}
.pin:hover,.pin.on{border-color:var(--gold);background:linear-gradient(100deg,rgba(201,162,91,.34),rgba(212,175,110,.16)),rgba(255,255,255,.92);z-index:2}
.pin.off,.street.off,.ringlabel.off{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.cat-beach i{background:#5fa8d3}.cat-shop i{background:#e0a458}.cat-education i{background:#8fb36a}.cat-health i{background:#e07a7a}
.cat-food i{background:#d8b45a}.cat-transport i{background:#9aa7b8}.cat-leisure i{background:#7cc27a}.cat-services i{background:#b8a0d8}.cat-landmark i{background:#e6d3a8}
/* Map lettering.
   These labels were drawn for the old dark viewer, where dark text needed a
   dark glow to sit on a dark render. On the white map that glow is a grey
   smudge around every letter and the names read as low quality. A printed map
   does the opposite: dark ink, thin WHITE outline, so the letters stay crisp
   over roofs, roads and trees alike. */
.street,.ringlabel{position:absolute;left:0;top:0;width:0;height:0;display:flex;align-items:center;justify-content:center;
  transform:translate(-9999px,-9999px);transform-origin:0 0;white-space:nowrap;pointer-events:none;
  color:#1b2a3d;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,
              1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,
              0 0 4px rgba(255,255,255,.9);
  transition:opacity .3s;will-change:transform}
.street.cls-0,.street.cls-1{font-size:9.5px;letter-spacing:.1em;color:#33475e}
.street span{display:block}
body.has-map .street{color:#1b2a3d}
body.has-map .street.cls-0,body.has-map .street.cls-1{color:#33475e}
.pin.mini .pl-name,.pin.mini .pl-d{display:none}
.pin.mini{padding:3px 4px}
.pin.here{border-color:var(--gold);
  background:linear-gradient(100deg,rgba(201,162,91,.30),rgba(212,175,110,.18)),rgba(255,255,255,.94);
  color:#4a3512;font-weight:600;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 2px 10px rgba(42,52,65,.18)}
.pin.here i{background:var(--gold-lt);box-shadow:0 0 0 3px rgba(201,162,91,.35)}
.ringlabel{color:#7a5a20;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,
              1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,
              0 0 5px rgba(255,255,255,.95)}
#around-btn{position:fixed;right:155px;bottom:66px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;font:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pearl);cursor:pointer;border-radius:11px;min-height:40px}
#around-btn svg{color:var(--gold-lt)}
#around-btn:hover,#around-btn.on{border-color:rgba(230,211,168,.55)}
#around-btn.on{background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14)),var(--glass)}
#home-btn{position:fixed;left:50%;top:64px;transform:translate(-50%,-8px);z-index:6;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px 8px 11px;font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pearl);
  cursor:pointer;border-radius:999px;opacity:0;pointer-events:none;transition:.3s}
#home-btn.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#home-btn svg{color:var(--gold-lt)}
body.away #hint{display:none}
#around-panel{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:7;
  width:min(560px,calc(100vw - 44px));padding:14px 18px 14px;opacity:0;pointer-events:none;
  transition:.35s cubic-bezier(.22,.9,.3,1)}
#around-panel.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body.card-open #around-panel{left:calc(22px + 310px + 18px);transform:translate(0,14px);
  width:min(560px,calc(100vw - 22px - 310px - 18px - 22px))}
body.card-open #around-panel.on{transform:none}
body.around-open #hint{display:none}
.ap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ap-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.08em;color:var(--gold-lt)}
.ap-close,.ap-back{background:none;border:0;color:rgba(22,35,58,.6);font:inherit;cursor:pointer;padding:0}
.ap-close{font-size:22px;line-height:1}
.ap-close:hover,.ap-back:hover{color:var(--gold-lt)}
.ap-sub{font-size:10px;letter-spacing:.05em;color:rgba(22,35,58,.55);margin-bottom:9px}
.ap-cats{display:flex;flex-wrap:wrap;gap:5px}
.ap-cats button{font:inherit;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,35,58,.8);
  background:rgba(22,35,58,.06);border:1px solid rgba(22,35,58,.14);border-radius:999px;padding:5px 10px;cursor:pointer}
.ap-cats button:hover,.ap-cats button.on{border-color:var(--gold);color:#16233a;background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14))}
.ap-list[hidden],.ap-detail[hidden]{display:none}
.ap-list{display:grid;gap:4px;margin-top:9px;max-height:min(38vh,330px);overflow:auto;padding-right:2px;scrollbar-width:thin}
.ap-item{display:grid;grid-template-columns:14px 1fr auto;grid-template-areas:"dot name dist" "dot kind dist";align-items:center;column-gap:10px;
  padding:7px 11px;border-radius:9px;background:rgba(22,35,58,.05);border:1px solid transparent;color:var(--pearl);font:inherit;text-align:left;cursor:pointer}
.ap-item i{grid-area:dot}
.ap-item .ap-name{grid-area:name;font-size:12.5px}
.ap-item .ap-kind{grid-area:kind;font-size:9.5px;color:rgba(22,35,58,.55);letter-spacing:.06em;text-transform:uppercase}
.ap-item .ap-dist{grid-area:dist;font-size:11px;color:var(--gold-lt);white-space:nowrap;text-align:right}
.ap-item:hover,.ap-item.on{border-color:rgba(230,211,168,.45);background:rgba(22,35,58,.08)}
.ap-empty{font-size:12px;color:rgba(22,35,58,.6);padding:8px 2px}
.ap-detail{margin-top:6px}
.ap-back{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.ap-dname{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:#16233a;margin-top:6px;line-height:1.15}
.ap-dkind{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,35,58,.55);margin-top:2px}
.ap-ddist{font-size:12px;color:var(--gold-lt);margin-top:6px}
.ap-dnote{font-size:12px;line-height:1.5;color:rgba(22,35,58,.8);margin-top:6px}
.ap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* Releasing a place is as important as choosing one: quieter than the
   primary action, but always visible while something is selected. */
.ap-actions .ap-clear{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(22,35,58,.62);background:none;border:1px solid rgba(22,35,58,.18);
  border-radius:3px;padding:7px 12px;cursor:pointer}
.ap-actions .ap-clear:hover{color:var(--ink);border-color:rgba(22,35,58,.42)}
.ap-actions .ap-fly{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pearl);
  background:rgba(22,35,58,.06);border:1px solid rgba(22,35,58,.2);border-radius:999px;padding:8px 14px;cursor:pointer}
.ap-actions .ap-fly:hover{border-color:var(--gold)}
.ap-actions .ap-dir{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  background:linear-gradient(100deg,var(--gold),#fbf6e7 50%,var(--gold-hi));border-radius:999px;padding:9px 15px;font-weight:600}
@media (max-width:760px){
  #around-btn{right:calc(12px + env(safe-area-inset-right));bottom:auto;top:calc(118px + env(safe-area-inset-top));
    width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  #around-btn span{display:none}
  #home-btn{top:calc(118px + env(safe-area-inset-top))}
  #hint{top:calc(112px + env(safe-area-inset-top))}
  #map-credit{top:calc(178px + env(safe-area-inset-top))}
  body.around-open #map-credit{display:none}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));
    width:auto;bottom:auto;top:calc(170px + env(safe-area-inset-top));transform:translate(0,14px);padding:12px 14px}
  #around-panel.on,body.card-open #around-panel.on{transform:none}
  .ap-list{max-height:34vh}
  .ap-sub{display:none}
  .pin{font-size:10px;padding:3px 8px 3px 4px}
  .street{font-size:9px}
}

/* ---- review round 2026-09-20 ---- */
.pin::before{content:"";position:absolute;inset:-10px;border-radius:999px}          /* 44px finger target */
.pin.flip{flex-direction:row-reverse;padding:3px 4px 3px 9px}
.pin.edge{border-style:dashed}
.street,.ringlabel{z-index:0}
.ap-close{width:44px;height:44px;margin:-11px -14px -11px 0;display:flex;align-items:center;justify-content:center}
.ap-list{mask-image:linear-gradient(#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);padding-bottom:6px}
#around-panel{visibility:hidden;transition:opacity .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1),visibility 0s linear .35s}
#around-panel.on{visibility:visible;transition:opacity .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1),visibility 0s}
#home-btn{visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s .3s}
#home-btn.show{visibility:visible;transition:opacity .3s,transform .3s,visibility 0s}
#map-credit{pointer-events:none}
#map-credit a{pointer-events:auto}
body.has-map #map-credit{color:rgba(22,35,58,.72);text-shadow:0 0 3px rgba(246,242,234,.95),0 0 6px rgba(246,242,234,.9)}
body.has-map #map-credit a{color:rgba(22,35,58,.85)}
body.diving #around-btn,body.diving #home-btn,body.diving #around-panel,body.diving #map-credit,body.diving #sun-btn,body.diving #compass,body.diving #sun-panel{opacity:0;transition:opacity .4s ease;pointer-events:none}
body.away #legend{opacity:0;pointer-events:none}
@media (min-width:761px){body.away #reset{display:none}}
@media (min-width:761px) and (max-width:960px){
  #around-panel,#sun-panel{left:22px;transform:translate(0,14px);width:min(560px,calc(100vw - 22px - 240px))}
  #around-panel.on,#sun-panel.on{transform:none}
}

/* desktop: the back link sat 2 px under the brand plate; tablets: compass off the brand, shorter hint */
@media (min-width:761px){#back-site{top:calc(106px + env(safe-area-inset-top))}}
@media (min-width:761px) and (max-width:960px){
  /* the compass stays top-centre: the tool row owns the top-right corner */
  #hint .wide{display:none}
  #hint .narrow{display:inline}
}

/* ================= Mario's voice guide ================= */
#guide-btn{position:fixed;right:20px;bottom:110px;z-index:6;display:none;align-items:center;gap:8px;
  padding:9px 15px;font:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pearl);cursor:pointer;border-radius:11px;min-height:40px}
body.has-guide #guide-btn{display:inline-flex}
#guide-btn svg{color:var(--gold-lt)}
#guide-btn:hover,#guide-btn.on{border-color:rgba(230,211,168,.55)}
#guide-btn.on{background:linear-gradient(100deg,rgba(201,162,91,.3),rgba(212,175,110,.14)),var(--glass)}
#guide-panel{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:7;
  width:min(460px,calc(100vw - 44px));padding:14px 18px 14px;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1),visibility 0s linear .35s}
#guide-panel.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;
  transition:opacity .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1),visibility 0s}
body.card-open #guide-panel{left:calc(22px + 310px + 18px);transform:translate(0,14px);width:min(460px,calc(100vw - 22px - 310px - 18px - 22px))}
body.card-open #guide-panel.on{transform:none}
body.guide-open #hint{display:none}
.gd-head{display:flex;align-items:center;justify-content:space-between}
.gd-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.08em;color:var(--gold-lt)}
.gd-close{width:44px;height:44px;margin:-11px -14px -11px 0;display:flex;align-items:center;justify-content:center;background:none;border:0;color:rgba(22,35,58,.55);font:inherit;font-size:22px;cursor:pointer}
.gd-close:hover{color:var(--gold-lt)}
.gd-sub{font-size:11px;line-height:1.5;color:rgba(22,35,58,.6);margin:2px 0 10px}
.gd-list{display:grid;gap:4px}
.gd-item{display:grid;grid-template-columns:26px 18px 1fr auto;align-items:center;column-gap:10px;padding:7px 11px;border-radius:9px;
  background:rgba(22,35,58,.04);border:1px solid transparent;color:var(--pearl);font:inherit;text-align:left;cursor:pointer}
.gd-item:hover,.gd-item.on{border-color:rgba(230,211,168,.6);background:linear-gradient(100deg,rgba(201,162,91,.22),rgba(212,175,110,.08))}
.gd-play{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#fbf6e7,var(--gold));position:relative;box-shadow:0 1px 4px rgba(42,52,65,.25)}
.gd-play::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid #16233a;border-top:6px solid transparent;border-bottom:6px solid transparent}
.gd-item.on .gd-play::after{border:0;left:8px;top:8px;width:10px;height:10px;background:#16233a;border-radius:2px}
.gd-num{font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;color:var(--gold-lt)}
.gd-item .gd-title{font-family:inherit;font-size:12.5px;letter-spacing:.02em;color:var(--pearl)}
.gd-dur{font-size:10px;color:rgba(22,35,58,.5);letter-spacing:.06em}
.gd-text{font-size:11.5px;line-height:1.55;color:rgba(22,35,58,.75);margin-top:10px;max-height:90px;overflow:auto}
.gd-text:empty{display:none}
.gd-actions{display:flex;gap:8px;margin-top:10px}
.gd-all{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;border:0;border-radius:999px;padding:9px 16px;font-weight:600;
  background:linear-gradient(100deg,var(--gold),#fbf6e7 50%,var(--gold-hi))}
#guide-chip{position:fixed;left:50%;top:64px;transform:translate(-50%,-8px);z-index:8;display:inline-flex;align-items:center;gap:9px;
  padding:6px 8px 6px 12px;border-radius:999px;font-size:11px;letter-spacing:.06em;color:var(--pearl);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s,transform .3s,visibility 0s .3s}
#guide-chip.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;transition:opacity .3s,transform .3s,visibility 0s}
#guide-chip i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,91,.25);animation:gcpulse 1.2s ease-in-out infinite}
#guide-chip.ask i{animation:none}
@keyframes gcpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
#guide-chip button{font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(185,142,63,.4);background:rgba(255,255,255,.7);color:var(--pearl);border-radius:999px;padding:5px 10px;min-height:28px}
#guide-chip .gc-ask{display:none;background:linear-gradient(100deg,var(--gold),#fbf6e7 50%,var(--gold-hi));border:0;font-weight:600;color:var(--ink)}
#guide-chip.ask .gc-ask{display:inline-block}
#guide-chip.ask .gc-stop,#guide-chip.ask .gc-open{display:none}
body.away #guide-chip{top:104px}
@media (max-width:760px){
  #guide-btn{right:calc(12px + env(safe-area-inset-right));bottom:auto;top:calc(170px + env(safe-area-inset-top));width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  #guide-btn span{display:none}
  #guide-panel,body.card-open #guide-panel{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto;bottom:auto;top:calc(222px + env(safe-area-inset-top));transform:translate(0,14px);padding:12px 14px}
  #guide-panel.on,body.card-open #guide-panel.on{transform:none}
  #guide-chip{top:calc(118px + env(safe-area-inset-top));max-width:calc(100vw - 130px)}
  #guide-chip .gc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.away #guide-chip{top:calc(160px + env(safe-area-inset-top))}
  #map-credit{top:calc(224px + env(safe-area-inset-top))}
  body.guide-open #map-credit{display:none}
  .gd-sub{display:none}
  .gd-text{max-height:70px}
}

/* ---- iPad/iPhone: the page itself must never zoom; only the 3D zooms ---- */
html,body{touch-action:pan-x pan-y}
#stage,#stage canvas,#pins,.pin,.street,.ringlabel,#guide-chip,#home-btn,#compass{touch-action:none}
@media (hover:none){.pin{pointer-events:none}}          /* taps reach the canvas; Places.tapAt picks the pin */

/* ================= languages ================= */
#lang-btn{position:fixed;z-index:12;display:inline-flex;align-items:center;gap:6px;left:calc(168px + env(safe-area-inset-left));top:calc(106px + env(safe-area-inset-top));
  padding:7px 11px;border-radius:10px;font:inherit;font-size:11px;letter-spacing:.12em;color:var(--pearl);cursor:pointer;min-height:36px}
#lang-btn .lf{font-size:15px;line-height:1}
#lang-btn:hover{border-color:var(--gold)}
#lang-menu{position:fixed;z-index:13;left:calc(168px + env(safe-area-inset-left));top:calc(148px + env(safe-area-inset-top));display:none;flex-direction:column;gap:2px;padding:6px;min-width:170px}
#lang-menu.open{display:flex}
#lang-menu button{display:flex;align-items:center;gap:9px;font:inherit;font-size:12px;color:var(--pearl);background:none;border:1px solid transparent;border-radius:8px;padding:7px 10px;cursor:pointer;text-align:left;min-height:34px}
#lang-menu button:hover,#lang-menu button.on{border-color:rgba(230,211,168,.6);background:linear-gradient(100deg,rgba(201,162,91,.22),rgba(212,175,110,.08))}
#lang-menu .lf{font-size:15px}
body.card-open #lang-btn,body.card-open #lang-menu,body.diving #lang-btn,body.diving #lang-menu{opacity:0;pointer-events:none}
html[lang=en] .gd-lang{display:none}
.gd-lang{font-size:10.5px;color:var(--gold-lt);letter-spacing:.06em;margin:-4px 0 8px}
/* right-to-left languages: text flips, positions stay */
body.rtl #card,body.rtl #around-panel,body.rtl #sun-panel,body.rtl #guide-panel,body.rtl #tip,body.rtl #hint,body.rtl #nogl-note,body.rtl .pin{direction:rtl}
body.rtl .ap-item,body.rtl .gd-item,body.rtl #card .row span:first-child,body.rtl .ap-dnote,body.rtl .gd-text,body.rtl #card .note{text-align:right}
body.rtl .ap-item .ap-dist{text-align:left}
body.rtl #lang-menu button{text-align:right}
@media (max-width:760px){
  #lang-btn{left:calc(160px + env(safe-area-inset-left));top:calc(66px + env(safe-area-inset-top));min-height:44px;padding:0 12px}
  #lang-menu{left:calc(160px + env(safe-area-inset-left));top:calc(116px + env(safe-area-inset-top))}
}
@media (min-width:761px) and (max-width:960px){#lang-btn{top:calc(106px + env(safe-area-inset-top))}}

/* ================= layout round 3 (visitor research, 2026-09-20) ================= */
/* desktop: the card must never climb under the brand plate; the credit line hides behind nothing */
@media (min-width:761px){
  #card{max-height:calc(100vh - 130px)}
  body.card-open #map-credit,body.around-open #map-credit,body.sun-open #map-credit,body.guide-open #map-credit{display:none}
}
/* phones: one row of floor tags, so the apartment card and its buttons sit above the bar */
@media (max-width:760px){
  #rail{width:calc(100vw - 20px);max-width:none;flex-wrap:nowrap;padding:5px 4px;gap:2px}
  .floor-btn{flex:1 1 0;min-width:0;padding:0 2px;font-size:10.5px;min-height:44px}
  .floor-btn .lvl{min-width:0;font-size:14px}
  #card{bottom:calc(72px + env(safe-area-inset-bottom))}
  #legend{bottom:calc(74px + env(safe-area-inset-bottom))}
  /* the floating attribution is gone on phones; it lives inside the Around panel instead */
  #map-credit,body.has-map #map-credit{display:none}
  .ap-credit{display:block}
  /* panels start under the four round buttons (sun 14, compass 66, around 118, Mario 170) */
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{top:calc(222px + env(safe-area-inset-top))}
  .ap-list{max-height:30vh}
  body.sun-open.card-open #card,body.around-open.card-open #card,body.guide-open.card-open #card{max-height:34vh}
}
.ap-credit{display:none;font-size:9px;line-height:1.4;color:rgba(22,35,58,.55);margin-top:9px}
.ap-credit a{color:inherit}
/* landscape phones (wide but very short): the desktop rail is taller than the screen */
@media (max-height:520px) and (min-width:761px){
  #brand{padding:7px 12px}
  #brand h1{font-size:19px}
  #brand .sub{font-size:8.5px}
  #back-site{top:calc(62px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));padding:8px 12px;min-height:40px}
  #lang-btn{top:calc(62px + env(safe-area-inset-top));left:calc(150px + env(safe-area-inset-left))}
  #lang-menu{top:calc(104px + env(safe-area-inset-top));left:calc(150px + env(safe-area-inset-left))}
  #hint{top:calc(108px + env(safe-area-inset-top));bottom:auto;font-size:10px}
  #rail{top:auto;right:auto;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);
    flex-direction:row;flex-wrap:nowrap;width:min(560px,calc(100vw - 260px));padding:4px;gap:2px}
  #rail .rail-cap{display:none}
  .floor-btn{flex:1 1 0;min-width:0;width:auto;padding:0 2px;font-size:10.5px;min-height:40px;justify-content:center;gap:0}
  .floor-btn span:last-child{display:none}
  .floor-btn .lvl{min-width:0;font-size:14px}
  #reset{display:none}
  #sun-btn,#around-btn,#guide-btn{right:calc(12px + env(safe-area-inset-right));bottom:auto;width:40px;height:40px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  #sun-btn{top:calc(12px + env(safe-area-inset-top))}
  #around-btn{top:calc(60px + env(safe-area-inset-top))}
  #guide-btn{top:calc(108px + env(safe-area-inset-top))}
  #sun-btn span,#around-btn span,#guide-btn span{display:none}
  #compass{left:auto;right:calc(60px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));transform:none}
  #home-btn{top:calc(12px + env(safe-area-inset-top));left:50%}
  #guide-chip{top:calc(12px + env(safe-area-inset-top))}
  #card{left:calc(12px + env(safe-area-inset-left));bottom:calc(62px + env(safe-area-inset-bottom));width:300px;max-height:calc(100vh - 76px);padding:14px 16px}
  #card h2{font-size:20px}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{
    left:auto;right:calc(62px + env(safe-area-inset-right));bottom:calc(62px + env(safe-area-inset-bottom));top:auto;transform:translate(0,14px);
    width:min(430px,calc(100vw - 340px));padding:10px 14px;max-height:calc(100vh - 76px);overflow:auto}
  #around-panel.on,#sun-panel.on,#guide-panel.on,body.card-open #around-panel.on,body.card-open #sun-panel.on,body.card-open #guide-panel.on{transform:none}
  .ap-list{max-height:26vh}
  .ap-sub,.gd-sub,#sun-panel .sp-note{display:none}
  #legend{left:calc(12px + env(safe-area-inset-left));bottom:calc(62px + env(safe-area-inset-bottom));transform:none;padding:5px 9px;font-size:8.5px}
  #map-credit,body.has-map #map-credit{display:none}
  .ap-credit{display:block}
  body.card-open #legend{display:none}
}

/* landscape phones: keep the card, the panels and the chip clear of the brand plate and the compass */
@media (max-height:520px) and (min-width:761px){
  #back-site{top:calc(66px + env(safe-area-inset-top))}
  #lang-btn{top:calc(66px + env(safe-area-inset-top));left:calc(168px + env(safe-area-inset-left))}
  #lang-menu{top:calc(108px + env(safe-area-inset-top));left:calc(168px + env(safe-area-inset-left))}
  #card{max-height:calc(100vh - 134px)}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{max-height:calc(100vh - 134px)}
  #guide-chip,body.away #guide-chip{top:calc(66px + env(safe-area-inset-top));max-width:calc(100vw - 420px)}
  #guide-chip .gc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #home-btn{top:calc(66px + env(safe-area-inset-top))}
}
/* very narrow phones: the brand plate must leave room for the round buttons on the right */
@media (max-width:380px){
  #brand{max-width:calc(100vw - 78px)}
  #brand h1{font-size:17px;letter-spacing:.18em}
  #brand .sub{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (max-height:520px) and (min-width:761px){
  #back-site,#lang-btn{top:calc(74px + env(safe-area-inset-top))}
  #lang-menu{top:calc(116px + env(safe-area-inset-top))}
  #hint{top:calc(118px + env(safe-area-inset-top))}
  #guide-chip,body.away #guide-chip{top:auto;bottom:calc(66px + env(safe-area-inset-bottom));left:50%;max-width:min(360px,calc(100vw - 340px))}
  body.card-open #guide-chip,body.around-open #guide-chip,body.sun-open #guide-chip,body.guide-open #guide-chip{display:none}
}
body.chip-on #hint{display:none}

/* ================= tool buttons: one row/column, never overlapping ================= */
/* Fixed right-offsets broke as soon as a translation made a label longer (German
   SONNENLICHT / UMGEBUNG overlapped). A flex stack sizes itself in every language. */
#tools{position:fixed;right:20px;bottom:66px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#tools > button{position:static;right:auto;bottom:auto;top:auto;left:auto}
#sun-btn,#around-btn,#guide-btn{position:static;white-space:nowrap}
body.diving #tools,body.nogl #tools{opacity:0;pointer-events:none;transition:opacity .4s}
body.nogl #tools{display:none}
@media (max-width:760px){
  #tools{right:calc(12px + env(safe-area-inset-right));bottom:auto;top:calc(14px + env(safe-area-inset-top));gap:6px}
  #tools > button,#sun-btn,#around-btn,#guide-btn{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  #sun-btn span,#around-btn span,#guide-btn span{display:none}
  #compass{top:calc(14px + env(safe-area-inset-top));right:calc(64px + env(safe-area-inset-right))}
  #hint{top:calc(112px + env(safe-area-inset-top))}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{top:calc(168px + env(safe-area-inset-top))}
  #guide-chip{top:calc(118px + env(safe-area-inset-top))}
  body.away #guide-chip{top:calc(160px + env(safe-area-inset-top))}
}
@media (max-height:520px) and (min-width:761px){
  #tools{right:calc(12px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));bottom:auto;gap:6px}
  #tools > button,#sun-btn,#around-btn,#guide-btn{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%}
  #compass{top:calc(12px + env(safe-area-inset-top));right:calc(60px + env(safe-area-inset-right))}
}

/* ================= the card's actions stay in view ================= */
/* A tall card scrolls; its 360 and enquiry buttons used to sit below the fold with
   no sign that anything was there, so visitors never saw the two things that sell. */
#card{scroll-padding-bottom:70px}
#card-actions:not(:empty){position:sticky;bottom:-20px;margin-bottom:-20px;padding:12px 0 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--glass) 22%,var(--glass));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
#card .kicker{padding-right:46px}
#card h2{padding-right:38px}

/* ================= control groups (2026-09-20) =================
   Every fixed offset that assumed an English label broke in German or Greek.
   Two flex groups size themselves instead: the tool row bottom-right and the
   back-link + language row under the brand. */
#tools{flex-direction:row;align-items:center;bottom:22px;gap:9px}
#tools #reset{position:static;order:-1}
#topbar{position:fixed;z-index:12;display:flex;align-items:center;gap:8px;
  left:calc(20px + env(safe-area-inset-left));top:calc(96px + env(safe-area-inset-top))}
#back-site,#lang-btn{position:static;left:auto;top:auto}
#lang-menu{left:calc(20px + env(safe-area-inset-left));top:calc(140px + env(safe-area-inset-top))}
body.card-open #topbar{opacity:0;pointer-events:none}
body.diving #topbar{opacity:0;pointer-events:none;transition:opacity .4s}
/* the card is tall: keep its top under the back-link row */
@media (min-width:761px){#card{max-height:calc(100vh - 172px)}}
@media (max-width:760px){
  #tools{flex-direction:column;align-items:flex-end;top:calc(14px + env(safe-area-inset-top));bottom:auto;gap:6px}
  #tools #reset{display:none}
  #topbar{left:calc(12px + env(safe-area-inset-left));top:calc(66px + env(safe-area-inset-top))}
  #lang-menu{left:calc(12px + env(safe-area-inset-left));top:calc(116px + env(safe-area-inset-top))}
  #compass{left:auto;right:calc(12px + env(safe-area-inset-right));top:calc(164px + env(safe-area-inset-top));transform:none}
  /* a centred nowrap hint ran under the tool column: anchor it left and let it wrap */
  #hint{left:calc(12px + env(safe-area-inset-left));right:auto;transform:none;text-align:left;
    top:calc(118px + env(safe-area-inset-top));max-width:calc(100vw - 84px);white-space:normal;line-height:1.35}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{top:calc(202px + env(safe-area-inset-top))}
  #guide-chip{top:calc(118px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));transform:none;max-width:calc(100vw - 84px)}
  body.away #guide-chip{top:calc(118px + env(safe-area-inset-top))}
  body.chip-on #hint{display:none}
}
@media (max-height:520px) and (min-width:761px){
  #tools{flex-direction:column;align-items:flex-end;top:calc(12px + env(safe-area-inset-top));bottom:auto}
  #tools #reset{display:none}
  #topbar{top:calc(66px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
  #lang-menu{top:calc(108px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
  #compass{right:calc(12px + env(safe-area-inset-right));top:calc(154px + env(safe-area-inset-top));left:auto;transform:none}
}

/* ================= measured placement (2026-09-20) =================
   Numbers below come from measuring the real boxes in de/el/en at 1366, 1280,
   844x390 and 390x844 — not from guesses about label width. */
@media (min-width:761px){
  #topbar{top:calc(106px + env(safe-area-inset-top))}          /* brand plate ends at y=99 */
  #lang-menu{top:calc(150px + env(safe-area-inset-top))}
  /* the tool row moves to the top-right: the bottom belongs to the card, the
     hint and the panels, and any of them used to run under it */
  #tools{top:calc(20px + env(safe-area-inset-top));bottom:auto;right:20px}
  #tools #reset{position:fixed;right:20px;bottom:22px;order:0}
  #card{max-height:calc(100vh - 182px)}
}
/* under 1000px the labels would reach the compass: icons only */
@media (min-width:761px) and (max-width:999px){
  #tools > button:not(#reset){width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  #sun-btn span,#around-btn span,#guide-btn span{display:none}
}
@media (max-height:520px) and (min-width:761px){
  #topbar{top:calc(80px + env(safe-area-inset-top))}
  #lang-menu{top:calc(122px + env(safe-area-inset-top))}
  #around-panel,body.card-open #around-panel,#sun-panel,body.card-open #sun-panel,#guide-panel,body.card-open #guide-panel{
    right:calc(78px + env(safe-area-inset-right))}
}
@media (max-width:760px){
  /* #guide-chip.on re-applied the centring transform over the phone rule */
  #guide-chip.on{transform:none}
}

/* final placement pass: tablets, landscape, and the guide chip */
@media (min-width:761px) and (max-width:1000px){
  #brand{padding:8px 14px}
  #brand h1{font-size:22px}
  #brand .sub{font-size:9px;letter-spacing:.16em}
}
@media (max-width:1100px){
  body.sun-open #legend,body.around-open #legend,body.guide-open #legend{opacity:0;pointer-events:none}
}
@media (min-width:761px){
  #guide-chip{top:calc(112px + env(safe-area-inset-top))}     /* clear of the brand plate */
  body.away #guide-chip{top:calc(112px + env(safe-area-inset-top))}
  body.away #home-btn{top:calc(20px + env(safe-area-inset-top))}
}
@media (max-height:520px) and (min-width:761px){
  #tools{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));bottom:auto;gap:6px}
  #tools #reset{display:none}
  #compass{top:calc(176px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));left:auto;transform:none}
  #guide-chip,body.away #guide-chip{top:auto;bottom:calc(66px + env(safe-area-inset-bottom))}
  #home-btn,body.away #home-btn{top:calc(12px + env(safe-area-inset-top))}
}

@media (min-width:761px){
  #guide-chip{max-width:min(520px,calc(100vw - 620px))}
  #guide-chip .gc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ================= the finger belongs to the model =================
   Every plate used to swallow touches, so large parts of the screen did not
   rotate the building. Only real controls take the finger now; the plates that
   are just text let it through to the canvas. */
#brand,#hint,#legend,#map-credit,#compass,#guide-chip .gc-title{pointer-events:none}
#map-credit a{pointer-events:auto}
#guide-chip{pointer-events:none}
#guide-chip button{pointer-events:auto}

/* the hint sat on the legend on a short-wide laptop */
@media (min-width:761px) and (max-width:1100px){#hint{bottom:auto;top:calc(150px + env(safe-area-inset-top))}}

/* ================= panels must not own the middle of a phone =================
   Anchored at top:202px with no cap, the Around panel grew down through the
   centre of the screen — 53 % of a 393x852 phone — and every drag that started
   there was swallowed, which read as "the model stopped responding".
   They now sit at the bottom, above the floor bar, and the whole upper half of
   the screen stays live canvas where a thumb actually drags. */
@media (max-width:760px){
  #around-panel,body.card-open #around-panel,
  #sun-panel,body.card-open #sun-panel,
  #guide-panel,body.card-open #guide-panel{
    top:auto;bottom:calc(78px + env(safe-area-inset-bottom));
    max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ap-list{max-height:26vh}
  .ap-detail{max-height:34vh;overflow-y:auto}
  .gd-list{max-height:30vh;overflow-y:auto}
  body.around-open #legend,body.sun-open #legend,body.guide-open #legend{opacity:0;pointer-events:none}
}

/* ---------- the developer's own projects on the map ----------
   Their other developments, so a visitor can see the track record
   without leaving the page. Gold for what is still selling, a quiet slate for
   what is finished: sold out is a credential, not an offer, so it must not
   shout louder than the apartments that are actually for sale. */
.pin.cat-ours i,.ap-item.cat-ours i{background:var(--gold)}
.pin.st-sold i,.ap-item.st-sold i{background:#8d96a3}
.pin.cat-ours{border-color:rgba(201,162,91,.55)}
.pin.st-sold{border-color:rgba(22,35,58,.18)}
.ap-item.cat-ours .ap-kind{color:var(--gold);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:9px}
.ap-item.st-sold .ap-kind{color:#78818d}
.ap-link{display:inline-block}

/* A slow pulse on the developer's own dots: the eye finds this complex and
   their other projects without anything shouting. Sold-out ones stay still —
   they are history, not an offer — and anyone who asked their phone for less
   motion gets none at all. */
@keyframes cv-pulse{
  0%   {box-shadow:0 0 0 0 rgba(201,162,91,.55),0 0 0 2px rgba(255,255,255,.9)}
  65%  {box-shadow:0 0 0 8px rgba(201,162,91,0),0 0 0 2px rgba(255,255,255,.9)}
  100% {box-shadow:0 0 0 0 rgba(201,162,91,0),0 0 0 2px rgba(255,255,255,.9)}
}
@keyframes cv-pulse-here{
  0%   {box-shadow:0 0 0 3px rgba(201,162,91,.40)}
  65%  {box-shadow:0 0 0 12px rgba(201,162,91,0)}
  100% {box-shadow:0 0 0 3px rgba(201,162,91,0)}
}
.pin.cat-ours:not(.st-sold) i{animation:cv-pulse 2.8s cubic-bezier(.3,.7,.4,1) infinite}
.pin.here i{animation:cv-pulse-here 3.4s cubic-bezier(.3,.7,.4,1) infinite}
@media (prefers-reduced-motion:reduce){
  .pin.cat-ours i,.pin.here i{animation:none}
}

/* ---------- the minimap ----------
   An overhead plan of the same neighbourhood, north up, with the view cone
   showing which way the camera looks. It is a read-only orientation aid, so it
   never takes a pointer: a finger that lands on it still turns the building. */
#minimap{position:fixed;z-index:6;left:22px;top:154px;width:96px;height:96px;
  border-radius:15px;overflow:hidden;background:#efede1;
  border:1px solid rgba(22,35,58,.12);box-shadow:0 8px 22px rgba(42,52,65,.16);
  pointer-events:none;opacity:0;transition:opacity .5s ease}
#minimap.on{opacity:1}
#minimap canvas{display:block;width:100%;height:100%}
#minimap .mm-n{position:absolute;top:3px;left:50%;transform:translateX(-50%);
  font-size:6.5px;font-weight:700;letter-spacing:.22em;color:rgba(22,35,58,.42)}
@media (max-width:760px){
  #minimap{left:auto;right:calc(12px + env(safe-area-inset-right));
    top:calc(206px + env(safe-area-inset-top));width:84px;height:84px;border-radius:13px}
  /* a phone cannot show a panel and the plan at once without clutter */
  body.around-open #minimap,body.sun-open #minimap,body.card-open #minimap{opacity:0}
}


/* The one action on the panel that leaves for a sibling project's 3D. Styled like
   the primary action, not like the plain website link beside it. */
.ap-actions .ap-3d{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;padding:7px 12px;cursor:pointer}
.ap-actions .ap-3d{color:var(--gold);border:1px solid var(--gold-lt)}
.ap-actions .ap-3d:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.ap-actions .ap-3d[hidden]{display:none !important}