/* ==========================================================================
   Real estate (sections/realestate.php, assets/js/realestate.js, assets/js/estate-gl.js). Dawn: the first light
   after the hero's moonrise, a peach-lavender mist over a white clay Tbilisi. Brand ink for text, the same ochre as
   the student section for what is for sale (the projects, their pins, the towns' rings), brand green for actions.
   The sheet rises tilted over the hero's last frame and straightens (ch_sec3); then it holds while the marriage
   section rises over it. Modes: the map (JS + WebGL), flat (no WebGL, no JS: the projects as cards).
   ========================================================================== */
.re {
  --mist: #EFE8E4; --mist-hi: #F6EEE9; --dawn-0: #C9C6DE; --dawn-1: #E7D2D0;
  --r-ink: #1F2230; --r-ink-2: #555A68; --ochre: #C98A1E; --ochre-ink: #7A4D0B; --r-line: rgb(31 34 48 / .12);
  --card: rgb(253 251 248 / .94);
  position: relative; z-index: 7; color: var(--r-ink);
}
.re__track { position: relative; }
.re__stage {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; overflow: clip;
  border-radius: 28px 28px 0 0; transform-origin: 50% 0;
  background: linear-gradient(to bottom, var(--dawn-0), var(--dawn-1) 30%, var(--mist) 62%);
  box-shadow: 0 -24px 70px -26px rgb(8 14 30 / .6);
}
/* it comes in over the hero's held last frame, then holds while the next section rises over it */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero + .re { margin-top: -100vh; }
  html.js .re:not(.is-flat) .re__track { height: calc(100vh + 100vh); height: calc(max(560px, 100svh) + 100svh); }
  html.js .re:not(.is-flat) .re__stage { position: sticky; top: 0; will-change: transform; }
}
.re__cover { position: absolute; z-index: 30; inset: 0; background: #1E1418; opacity: 0; pointer-events: none; will-change: opacity; }

/* ---------- the map ---------- */
.re-map { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-io); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.re.is-ready .re-map { opacity: 1; }
.re-map__gl { display: block; width: 100%; height: 100%; }
.re-map__labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.re:not(.is-ready) .re-map__labels { visibility: hidden; }
/* mist over the far edge (where the heading is read) and round the sides */
.re__mist {
  position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(239 232 228 / .9), rgb(239 232 228 / .45) 20%, rgb(239 232 228 / 0) 36%),
    linear-gradient(to top, rgb(239 232 228 / .6), rgb(239 232 228 / 0) 22%),
    radial-gradient(150% 110% at 50% 58%, rgb(239 232 228 / 0) 72%, rgb(239 232 228 / .35));
}

/* pins over the projects (from afar, over the towns) and the landmarks' names, placed by realestate.js */
.re-pin {
  position: absolute; left: 0; top: 0; translate: -50% -100%; display: none; align-items: center; gap: 0;
  padding: 5px 6px 5px 6px; border-radius: 999px; background: var(--ochre); color: #fff;
  font-size: 13px; font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer; pointer-events: auto;
  box-shadow: 0 8px 18px -8px rgb(90 50 0 / .65); transition: background-color .25s;
}
.re-pin.is-on { display: inline-flex; }
.re-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px; background: linear-gradient(var(--ochre), rgb(201 138 30 / 0)); }
.re-pin b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: rgb(255 255 255 / .22); font-weight: 800; }
.re-pin i { max-width: 0; overflow: hidden; font-style: normal; font-weight: 650; transition: max-width .4s var(--ease-out), padding .4s var(--ease-out); }
.re-pin:hover { background: #B57610; }
.re-pin:hover i, .re-pin--town i { max-width: 240px; padding-inline: 7px 4px; }
.re-pin--town { background: var(--r-ink); box-shadow: 0 8px 18px -8px rgb(10 10 30 / .6); }
.re-pin--town::after { background: linear-gradient(var(--r-ink), rgb(31 34 48 / 0)); }
.re-pin--town b { background: var(--ochre); }
.re-mark {
  position: absolute; left: 0; top: 0; translate: -50% -100%; display: none;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: #6A6672; white-space: nowrap;
  text-shadow: 0 0 6px var(--mist-hi), 0 0 2px var(--mist-hi);
}
.re-mark.is-on { display: block; }

/* the words by the pointer */
.re-tip {
  position: absolute; z-index: 6; left: 0; top: 0; display: grid; gap: 2px; max-width: 300px; margin: 0;
  padding: 9px 14px 10px; border-radius: 12px; background: rgb(24 26 36 / .92); color: #fff;
  box-shadow: 0 14px 30px -14px rgb(10 10 30 / .7); pointer-events: none; opacity: 0; transition: opacity .18s;
}
.re-tip.is-on { opacity: 1; }
.re-tip b { font-size: 14.5px; font-weight: 750; }
.re-tip span { font-size: 12.5px; color: rgb(255 255 255 / .78); }
.re-tip [lang="ka"] { color: #F1C77E; }

/* ---------- the heading (over the mist, top inline-start, out of the quick nav's lane) ---------- */
.re__head { position: absolute; z-index: 3; top: calc(var(--header-h) + 22px); inset-inline-start: var(--qnav-clear); width: min(36em, 46vw); pointer-events: none; }
.re__chap { font-size: 14px; font-weight: 700; color: var(--ochre-ink); }
html[lang="en"] .re__chap { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.re__chap > span:last-child { display: inline-flex; align-items: center; gap: 12px; }
.re__chap > span:last-child::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.re__title { margin-top: 10px; font-size: clamp(28px, 2.8vw, 48px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html[lang="en"] .re__title { font-family: var(--font-serif); font-weight: 560; line-height: 1.08; letter-spacing: -.02em; }
.re__lead { margin-top: 12px; max-width: 44ch; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.9; color: var(--r-ink-2); text-wrap: pretty; }
.re__hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgb(255 255 255 / .72); box-shadow: 0 0 0 1px var(--r-line); font-size: 13px; font-weight: 650; color: var(--r-ink);
  transition: opacity .6s;
}
.re__hint-drag { width: 30px; height: 18px; color: var(--ochre); animation: re-drag 2.2s var(--ease-io) infinite; }
@keyframes re-drag { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.re.is-turned .re__hint-drag { animation: none; }
.re__hint-touch, .re.is-touch .re__hint-fine { display: none; }
.re.is-touch .re__hint-touch { display: inline; }
.re:not(.is-ready) .re__hint { opacity: 0; }

/* ---------- zoom and the whole map (inline-end, middle) ----------
   Dark on the pale map so it is found at once: a magnifier and the word, big + and −, between them how far in you
   are, then the whole map. Beside it, toward the middle, a word on how to zoom (.re-say). */
.re-ctrl {
  position: absolute; z-index: 4; inset-inline-end: var(--gutter); top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 4px; margin: 0; padding: 10px 7px 7px; border-radius: 32px;
  background: var(--r-ink); color: #fff; transition: opacity .6s;
  box-shadow: 0 22px 44px -18px rgb(20 16 40 / .75), inset 0 0 0 1px rgb(255 255 255 / .08);
}
.re-ctrl__cap { display: grid; justify-items: center; gap: 3px; margin: 0 0 4px; font-size: 12px; font-weight: 750; line-height: 1; color: rgb(255 255 255 / .85); }
html[lang="en"] .re-ctrl__cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.re-ctrl__cap svg { width: 19px; height: 19px; color: #F1C77E; }
.re-ctrl__b { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; transition: background-color .2s, color .2s, transform .2s var(--ease-out); }
.re-ctrl__b svg { width: 22px; height: 22px; }
.re-ctrl__b:hover { background: var(--ochre); color: var(--r-ink); }
.re-ctrl__b:active { transform: scale(.92); }
.re-ctrl__b:focus-visible { outline: 2px solid #F1C77E; outline-offset: 2px; }
.re-ctrl__lvl { position: relative; width: 4px; height: 40px; margin: 4px 0; border-radius: 4px; overflow: hidden; background: rgb(255 255 255 / .18); }
.re-ctrl__lvl i { position: absolute; inset: 0; border-radius: inherit; background: #F1C77E; transform: scaleY(var(--z, 0)); transform-origin: 50% 100%; transition: transform .25s var(--ease-out); }
.re-ctrl__sep { width: 26px; height: 1px; margin: 4px 0; background: rgb(255 255 255 / .18); }
.re-ctrl__home { width: 42px; height: 42px; background: none; }
.re-ctrl__home svg { color: #F1C77E; }
.re:not(.is-ready) .re-ctrl { opacity: 0; pointer-events: none; }
/* it calls you: a ring goes out from it three times */
.re-ctrl::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--ochre); opacity: 0; pointer-events: none; }
.re-ctrl.is-ping::after { animation: re-ping 1.3s var(--ease-out) 3; }
@keyframes re-ping { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.32, 1.12); } }

.re-say {
  position: absolute; z-index: 5; inset-inline-end: calc(var(--gutter) + 62px + 16px); top: 50%;
  display: grid; gap: 4px; width: max-content; max-width: min(320px, 60vw); margin: 0; padding: 12px 16px 13px; border-radius: 16px;
  background: var(--r-ink); color: #fff; box-shadow: 0 18px 40px -18px rgb(20 16 40 / .7);
  opacity: 0; visibility: hidden; translate: calc(var(--sx, 1) * -10px) -50%; pointer-events: none;
  transition: opacity .35s, translate .5s var(--ease-out), visibility 0s .5s;
}
[dir="rtl"] .re-say { --sx: -1; }
.re-say::after { content: ""; position: absolute; inset-inline-end: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: inherit; rotate: 45deg; border-radius: 2px; }
.re-say.is-on { opacity: 1; visibility: visible; translate: 0 -50%; transition: opacity .35s, translate .5s var(--ease-out), visibility 0s; }
.re-say b { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; line-height: 1.5; }
.re-say b::before { content: "+\2009\2212"; flex: none; padding: 1px 7px 0; border-radius: 6px; background: #F1C77E; color: var(--r-ink); font-family: var(--font-latin); font-size: 14px; direction: ltr; unicode-bidi: isolate; }
.re-say span { font-size: 13px; line-height: 1.6; color: rgb(255 255 255 / .8); }
.re-say span:empty { display: none; }

/* ---------- the towns, the key, the links (along the foot) ---------- */
.re-dock {
  position: absolute; z-index: 4; inset-inline: var(--qnav-clear) var(--gutter); bottom: clamp(16px, 3.2vh, 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "towns side"; align-items: end; gap: 10px 24px;
  pointer-events: none;
}
.re-dock > * { pointer-events: auto; }
.re-dock__title { grid-area: title; justify-self: start; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--r-ink-2); }
.re-towns { grid-area: towns; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.re-town { min-width: 230px; max-width: 320px; border-radius: 18px; background: var(--card); box-shadow: 0 16px 34px -20px rgb(30 20 40 / .55), 0 0 0 1px var(--r-line); }
.re-town__go {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ka name n"; align-items: center; gap: 4px 12px;
  width: 100%; padding: 12px 16px 10px; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; border-radius: 18px 18px 0 0;
}
.re-town__ka { grid-area: ka; font-family: var(--font-ka); font-size: 24px; line-height: 1; color: var(--ochre); }
.re-town__name { grid-area: name; display: grid; font-size: 16px; font-weight: 800; line-height: 1.35; }
.re-town__name small { font-size: 12px; font-weight: 600; color: var(--r-ink-2); }
.re-town__n { grid-area: n; padding: 4px 10px; border-radius: 999px; background: rgb(201 138 30 / .14); color: var(--ochre-ink); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.re-town__go:hover .re-town__name { color: var(--ochre-ink); }
.re-town__go:focus-visible, .re-town__cx button:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }
.re-town__cx { display: grid; margin: 0; padding: 0 8px 8px; list-style: none; border-top: 1px solid var(--r-line); }
.re-town__cx button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 8px; border: 0; border-radius: 10px;
  background: none; color: var(--r-ink); font-family: var(--font-serif); font-size: 14.5px; font-weight: 560; text-align: start; cursor: pointer;
}
.re-town__cx button b { font-family: var(--font-body); font-size: 12.5px; color: var(--ochre-ink); }
.re-town__cx button:hover { background: rgb(201 138 30 / .1); }
.re-dock__side { grid-area: side; display: grid; gap: 10px; justify-items: end; }
.re-legend { display: grid; gap: 6px; margin: 0; padding: 10px 14px; border-radius: 14px; list-style: none; background: rgb(253 251 248 / .8); box-shadow: 0 0 0 1px var(--r-line); font-size: 12.5px; font-weight: 600; color: var(--r-ink-2); }
.re-legend li { display: flex; align-items: center; gap: 10px; }
.re-legend__i { flex: none; width: 22px; height: 18px; }
.re-legend__i--towers { background: linear-gradient(#F0D2A9, #E4BE8E) 3px 0 / 7px 18px no-repeat, linear-gradient(#F0D2A9, #E4BE8E) 12px 3px / 7px 15px no-repeat; }
.re-legend__i--terrace { background: linear-gradient(#F0D2A9, #E4BE8E) 0 10px / 8px 8px no-repeat, linear-gradient(#F0D2A9, #E4BE8E) 7px 6px / 8px 12px no-repeat, linear-gradient(#F0D2A9, #E4BE8E) 14px 2px / 8px 16px no-repeat; }
.re-legend__i--house { background: linear-gradient(#F0D2A9, #E4BE8E) 4px 8px / 14px 10px no-repeat, conic-gradient(from 135deg at 50% 0, #E4BE8E 0 90deg, transparent 0) 4px 1px / 14px 7px no-repeat; }
.re-legend__i--crane { background: linear-gradient(var(--ochre), var(--ochre)) 6px 2px / 2px 16px no-repeat, linear-gradient(var(--ochre), var(--ochre)) 0 2px / 22px 2px no-repeat; }
.re-dock__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin: 0; }
.re-dock__all { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--r-ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -12px rgb(10 10 30 / .7); }
.re-dock__all:hover { background: #33374A; }
.re-dock__visa { font-size: 13.5px; font-weight: 700; color: var(--r-ink); text-decoration: none; border-bottom: 1.5px solid var(--ochre); padding-bottom: 1px; background: rgb(253 251 248 / .6); }
.re-dock__all:focus-visible, .re-dock__visa:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* ---------- a project's units (the 3D building, a pin or its name under the map opens it) ---------- */
.re-dialog { position: absolute; z-index: 20; inset: 0; visibility: hidden; pointer-events: none; }
.re-dialog.is-open { visibility: visible; pointer-events: auto; }
.re-dialog:focus { outline: none; }
.re-dialog__shade { position: absolute; inset: 0; background: rgb(40 30 40 / .32); opacity: 0; transition: opacity .45s; }
.re-dialog.is-open .re-dialog__shade { opacity: 1; }
.re-dialog__card {
  position: absolute; left: 50%; top: 50%; width: min(1140px, 92vw); height: min(700px, 84svh);
  translate: -50% -46%; scale: .97; opacity: 0; overflow: hidden; border-radius: 24px;
  background: #FCFAF7; box-shadow: 0 50px 110px -40px rgb(30 15 30 / .7), 0 0 0 1px var(--r-line);
  transition: opacity .4s var(--ease-out), translate .7s var(--ease-out), scale .7s var(--ease-out);
}
.re-dialog.is-open .re-dialog__card { opacity: 1; translate: -50% -50%; scale: 1; }
.re-dialog__close {
  position: absolute; z-index: 3; inset-inline-end: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); box-shadow: 0 4px 14px -6px rgb(20 20 30 / .4), 0 0 0 1px var(--r-line); color: var(--r-ink); cursor: pointer; transition: background-color .25s, transform .45s var(--ease-out);
}
.re-dialog__close svg { width: 20px; height: 20px; }
.re-dialog__close:hover { background: rgb(201 138 30 / .2); transform: rotate(90deg); }
.re-dialog__close:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

.re-cx { display: none; height: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); grid-template-areas: "body plan"; }
.re-cx.is-on { display: grid; }
.re-cx__plan { grid-area: plan; display: grid; place-items: center; min-height: 0; margin: 0; padding: 28px; overflow: hidden; background: #fff; border-inline-start: 1px solid var(--r-line); }
.re-cx__plan img { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.re-cx__body { grid-area: body; display: flex; flex-direction: column; min-height: 0; padding: 30px clamp(22px, 2.6vw, 38px) 26px; }
.re-cx__where { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-inline-end: 50px; font-size: 13.5px; font-weight: 650; color: var(--r-ink-2); }
.re-cx__where span { font-family: var(--font-ka); font-size: 19px; color: var(--ochre); }
.re-cx__name { margin-top: 6px; font-family: var(--font-serif); font-size: clamp(26px, 2.4vw, 38px); font-weight: 560; line-height: 1.1; letter-spacing: -.015em; }
.re-cx__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.re-tag { padding: 4px 11px; border-radius: 999px; background: rgb(31 34 48 / .06); font-size: 12.5px; font-weight: 650; color: var(--r-ink-2); }
.re-tag--3 { background: rgb(201 138 30 / .16); color: var(--ochre-ink); }
.re-tag--2 { background: rgb(47 106 102 / .14); color: #1F504C; }
.re-cx__from { margin: 14px 0 10px; font-size: 15px; font-weight: 750; }
.re-units { flex: 1; min-height: 0; margin: 0 -10px; padding: 0 10px; overflow: auto; overscroll-behavior: contain; list-style: none; border-top: 1px solid var(--r-line); }
.re-unit {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-areas: "thumb name price decor" "thumb facts price decor";
  align-items: center; gap: 0 14px; padding: 10px 10px; border-bottom: 1px solid var(--r-line); border-radius: 12px; transition: background-color .2s;
}
.re-unit.is-on { background: rgb(201 138 30 / .1); }
.re-unit__thumb { grid-area: thumb; width: 64px; height: 44px; border-radius: 8px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--r-line); }
.re-unit__name { grid-area: name; font-size: 15px; font-weight: 750; color: inherit; text-decoration: none; }
.re-unit__name::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.re-unit__name:focus-visible { outline: none; }
.re-unit:focus-within { box-shadow: inset 0 0 0 2px var(--ochre); }
.re-unit__facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--r-ink-2); }
.re-unit__price { grid-area: price; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--ochre-ink); }
.re-cx__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 18px 0 0; }
.re-cx__ask { font-size: 14px; font-weight: 700; color: var(--r-ink); text-decoration: none; border-bottom: 1.5px solid var(--ochre); padding-bottom: 1px; }
/* each flat: its interior, in the interior design section (decor.js); over the row's own link */
.re-unit__decor { grid-area: decor; position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ochre-ink); box-shadow: inset 0 0 0 1px var(--r-line); transition: background-color .2s, color .2s; }
.re-unit__decor svg { width: 19px; height: 19px; }
.re-unit__decor:hover { background: var(--ochre); color: #fff; }
.re-unit__decor:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .re__head { top: calc(var(--header-h) + 8px); inset-inline: var(--gutter); width: auto; }
  .re__title { font-size: clamp(23px, 6.4vw, 30px); }
  .re__lead { display: none; }   /* (the map needs the room; the words are in the page all the same) */
  .re__hint { margin-top: 10px; font-size: 12px; }
  .re-ctrl { top: calc(var(--header-h) + 150px); translate: none; padding: 8px 5px 5px; }
  .re-ctrl__b { width: 42px; height: 42px; }
  .re-ctrl__home { width: 38px; height: 38px; }
  .re-ctrl__lvl { height: 28px; }
  .re-say { top: calc(var(--header-h) + 150px + 60px); inset-inline-end: calc(var(--gutter) + 52px + 14px); max-width: min(260px, 62vw); }
  .re-dock { inset-inline: 0; bottom: calc(14px + 74px + 8px);   /* (over the quick nav in the corner) */ grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "towns"; gap: 8px; }
  .re-dock__title { padding-inline: var(--gutter); font-size: 12.5px; }
  .re-towns { flex-wrap: nowrap; overflow-x: auto; padding: 2px var(--gutter) 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .re-towns::-webkit-scrollbar { display: none; }
  .re-town { flex: none; min-width: 0; width: min(78vw, 300px); scroll-snap-align: start; }
  .re-town__cx button { padding: 6px 8px; font-size: 13.5px; }
  .re-dock__side { display: none; }
  .re-pin i { display: none; }
  .re-dialog__card { left: 0; top: auto; bottom: 0; width: 100%; height: 90svh; translate: 0 6%; border-radius: 22px 22px 0 0; }
  .re-dialog.is-open .re-dialog__card { translate: 0 0; }
  .re-cx { grid-template-columns: minmax(0, 1fr); grid-template-rows: 34% minmax(0, 1fr); grid-template-areas: "plan" "body"; }
  .re-cx__plan { padding: 14px; border: 0; border-bottom: 1px solid var(--r-line); }
  .re-cx__body { padding: 18px var(--gutter) 18px; }
  .re-cx__name { font-size: 24px; }
}
@media (max-width: 767px) and (max-height: 700px) { .re__hint { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .re-map, .re-dialog__card, .re-dialog__shade, .re-pin i, .re-say, .re-ctrl__lvl i { transition: none; }
  .re__hint-drag, .re-ctrl.is-ping::after { animation: none; }
}

/* ==========================================================================
   Flat: no WebGL, or no JS. The heading, the towns, then every project as a card with its units.
   ========================================================================== */
:is(.re.is-flat, html:not(.js) .re) .re__stage { height: auto; min-height: 0; overflow: visible; padding: calc(var(--header-h) + 40px) var(--gutter) 64px; background: linear-gradient(to bottom, var(--dawn-0), var(--dawn-1) 240px, var(--mist) 520px); }
:is(.re.is-flat, html:not(.js) .re) :is(.re-map, .re__mist, .re-ctrl, .re-say, .re-tip, .re__hint, .re-dialog__shade, .re-dialog__close, .re-legend) { display: none; }
:is(.re.is-flat, html:not(.js) .re) .re-dock__side { justify-items: start; }
:is(.re.is-flat, html:not(.js) .re) .re__head { position: static; width: auto; max-width: 46em; pointer-events: auto; }
:is(.re.is-flat, html:not(.js) .re) .re-dock { position: static; margin-top: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "towns" "side"; }
:is(.re.is-flat, html:not(.js) .re) .re-town__go { cursor: default; }
:is(.re.is-flat, html:not(.js) .re) .re-dialog { position: static; visibility: visible; pointer-events: auto; margin-top: 32px; }
:is(.re.is-flat, html:not(.js) .re) .re-dialog__card { position: static; width: auto; height: auto; translate: none; scale: none; opacity: 1; overflow: visible; background: none; box-shadow: none; display: grid; gap: 24px; }
:is(.re.is-flat, html:not(.js) .re) .re-cx { display: grid; height: auto; border-radius: 22px; overflow: hidden; background: #FCFAF7; box-shadow: 0 0 0 1px var(--r-line); }
:is(.re.is-flat, html:not(.js) .re) .re-units { max-height: 340px; }
@media (max-width: 767px) { :is(.re.is-flat, html:not(.js) .re) .re-cx { grid-template-rows: 220px auto; } }