/* ============================================================
   DOWNTOWN TBILISI — theme
   Palette + type per Brash "Downtown Tbilisi Brand Expression".
   Headlines are GT America Extended (substituted by Archivo at
   wide width until the GT America webfont licence is in place).
   ============================================================ */
@font-face{font-family:'Altesse';src:url('assets/fonts/altesse-std.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
/* Georgian: BPG LE Studio 02, self-hosted. One Light face in two cuts, the
   regular cut for running text and the Caps cut wherever the design sets type
   in capitals. Both files are subset to the 33 Georgian letters and scoped by
   unicode-range, so English and Russian pages never download them, and Latin
   words and figures inside Georgian text stay in Archivo.

   The Caps file also maps Mtavruli (U+1C90-1CB0) onto its capital glyphs.
   text-transform:uppercase leaves Georgian untouched in Chromium but converts
   it to Mtavruli in WebKit, and neither BPG cut draws Mtavruli, so without the
   extra mapping every capitalised Georgian label in Safari fell back to a
   system font. With it, both engines draw the same glyphs.

   The face has one weight. It is declared as 300 only, so 400-500 requests
   use it as drawn and nothing is synthesised below bold. */
@font-face{font-family:'BPG LE Studio 02';src:url('assets/fonts/bpg-le-studio-02-georgian.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+10D0-10FF}
@font-face{font-family:'BPG LE Studio 02 Caps';src:url('assets/fonts/bpg-le-studio-02-caps-georgian.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+10D0-10FF,U+1C90-1CBF}
:root{
  --ink:#16170F;
  --ink-2:#1B1C18;
  --sunk:#24251F;
  --stone:#DCD8D4;
  --stone-2:#F0EBE7;
  --greige:#B5ADA3;
  --clay:#857A70;
  --accent:#8D765E;       /* bronze */
  --accent-ink:#6E5B45;   /* bronze, darkened for small text on light ground */
  --accent-2:#C4B49B;
  --deep:#4A433A;
  --fg:#1B1C18;
  --muted:#635D54;
  --onmedia:#F0EBE7;
  --hair:rgba(27,28,24,.16);
  --navbg:rgba(22,23,15,.95);
  --pagebg:#F0EBE7;
  --stroke:#4A433A;
  --sans:'Archivo','GT America','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Archivo','GT America Extended','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wide:'wdth' 118;
  --mid:'wdth' 108;
}
body{background:var(--stone-2);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.02vw,15.5px);line-height:1.8;letter-spacing:.004em}
/* Weight 300 throughout Georgian: the face is Light, and Latin words inside a
   Georgian line (brand names, figures) are set in Archivo at the same weight
   so the line reads as one colour rather than Georgian plus bold English. */
body.lang-ka,body.lang-ka .body{font-family:'BPG LE Studio 02',var(--sans);font-weight:300}
/* Every rule that sets text-transform:uppercase, across this file,
   base.css, motion.css and masterplan.css, plus inline uppercase styles. A new
   capitalised style needs adding here; qa/i18n-qa.js fails on any Georgian
   capitals left in the regular cut. A plain list, not :is() — :is() takes its
   most specific argument for every match, which would outrank the
   .hab figcaption reset below. */
body.lang-ka .display,body.lang-ka .hero-h,body.lang-ka .hero-tag,body.lang-ka .pull,
body.lang-ka .twr .n,body.lang-ka .twr .m,body.lang-ka .hab figcaption b,
body.lang-ka .eyebrow,body.lang-ka figcaption,body.lang-ka .btn,body.lang-ka .link-u,
body.lang-ka .nav-links a,body.lang-ka .scroll-cue,body.lang-ka .stat .l,body.lang-ka .mq-t span,
body.lang-ka .field label,body.lang-ka .foot h4,
body.lang-ka #dots a b,body.lang-ka .ph-art .ph-tag,body.lang-ka .ph-art .ph-name,
body.lang-ka .gal-title,body.lang-ka .gs-t,body.lang-ka .gal-hint,body.lang-ka .caps-line,
body.lang-ka .mp-i .n,body.lang-ka .mp-card .k,body.lang-ka .mp-card h2,body.lang-ka .mp-card .m,body.lang-ka .mp-card .go,
body.lang-ka [style*="uppercase"]{font-family:'BPG LE Studio 02 Caps',var(--sans);font-weight:300}
body.lang-ka .hab figcaption{font-family:'BPG LE Studio 02',var(--sans);font-weight:300}
body.lang-ka .display,body.lang-ka .hero-h,body.lang-ka .pull,body.lang-ka .twr .n{letter-spacing:0}

/* dark inverted blocks */
.dark{--fg:var(--stone-2);--muted:#9A968E;--hair:rgba(240,235,231,.17);--sunk:#24251F;
  background:var(--ink-2);color:var(--stone-2)}
.dark .btn{border-color:var(--accent-2);color:var(--accent-2)}
.dark .btn::after{background:var(--accent-2)}
.dark .btn:hover{color:var(--ink-2)}
.dark .btn-solid{background:var(--accent-2);color:var(--ink-2)}
.dark .btn-solid::after{background:var(--ink-2)}
.dark .btn-solid:hover{color:var(--accent-2)}
.stonebg{background:var(--stone)}

/* ---------- vertical-line graphic device (Brand: Structural Grid) ---------- */
.vgrid{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px var(--vg,12.5%));
  opacity:.10;color:var(--fg)}
.vgrid-w{color:var(--stone-2);opacity:.16}
.sec > .wrap,.sec > .wrap-narrow{position:relative;z-index:2}

/* ---------- lockup ----------
   The logo is one <symbol id="dt-logo"> at the top of each page, drawn into
   every slot with <use>, so it takes the slot's text colour. --lk is the size
   token the text lockup was set in; the mark is sized off it, so every
   existing --lk (nav, hero, footer, preloader, curtain, masterplan bar) keeps
   working. 7.2 x --lk keeps the footprint of the old wordmark. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.lockup{display:inline-flex;flex-direction:column;line-height:0}
.lockup svg{display:block;width:calc(var(--lk,17px)*7.2);height:auto;aspect-ratio:1314/465;fill:currentColor}
.nav .lockup{--lk:15px}
.hero .lockup{--lk:clamp(26px,4.2vw,58px);align-items:flex-end}
@media(max-width:860px){.hero .lockup{align-items:flex-start}}
.foot .lockup{--lk:21px}

/* ---------- type ---------- */
.display{font-family:var(--display);font-variation-settings:var(--wide);font-weight:400;line-height:1.02;letter-spacing:-.012em;text-transform:uppercase}
.d1{font-size:clamp(36px,6.6vw,104px)}
.d2{font-size:clamp(28px,4.6vw,70px)}
.d3{font-size:clamp(21px,2.5vw,40px);line-height:1.1}
.d4{font-size:clamp(17px,1.7vw,25px);line-height:1.2}
.lede{font-size:clamp(16px,1.4vw,20px);line-height:1.75;font-weight:300;max-width:60ch}
.body{color:var(--muted);max-width:64ch;font-weight:400}
.body + .body{margin-top:1.4em}
.eyebrow{color:var(--accent-ink)}
.eyebrow::before{background:var(--accent)}
.dark .eyebrow{color:var(--accent-2)}

/* ---------- hero ---------- */
.hero{color:var(--onmedia);background:var(--ink)}
.hero-bg::after{background:linear-gradient(180deg,rgba(20,21,16,.55) 0%,rgba(20,21,16,.12) 34%,rgba(20,21,16,.55) 72%,rgba(20,21,16,.94) 100%)}
.hero-in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:end}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;align-items:start}}
.hero-h{font-family:var(--display);font-variation-settings:var(--wide);font-weight:400;text-transform:uppercase;font-size:clamp(30px,5.6vw,86px);line-height:.98;letter-spacing:-.015em}
.hero-tag{margin-top:clamp(18px,2vw,28px);font-size:clamp(11px,1vw,13px);letter-spacing:.24em;text-transform:uppercase;color:rgba(240,235,231,.82)}

/* ---------- section head ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:start}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:22px}}

/* ---------- towers ---------- */
.twr{position:relative;border-top:1px solid var(--hair);padding:clamp(22px,2.4vw,34px) 0;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,48px);align-items:baseline;transition:padding-left .6s cubic-bezier(.16,1,.3,1),color .5s}
.twr:last-child{border-bottom:1px solid var(--hair)}
a.twr:hover{padding-left:14px;color:var(--accent)}
.twr .i{font-size:11px;letter-spacing:.2em;opacity:.5;font-variant-numeric:tabular-nums}
.twr .n{font-family:var(--display);font-variation-settings:var(--mid);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2.3vw,34px);letter-spacing:-.01em}
.twr .m{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:right}
.twr.lead .n{color:var(--accent-2)}
.dark a.twr:hover{color:var(--accent-2)}

/* ---------- habitat cards ---------- */
.hab{position:relative;overflow:hidden}
.hab figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:clamp(20px,2.4vw,34px);background:linear-gradient(0deg,rgba(20,21,16,.93) 0%,rgba(20,21,16,.74) 58%,rgba(20,21,16,0) 100%);color:var(--stone-2);text-transform:none;letter-spacing:0;font-size:13px}
.hab figcaption b{display:block;font-family:var(--display);font-variation-settings:var(--mid);font-weight:400;text-transform:uppercase;font-size:clamp(15px,1.5vw,21px);letter-spacing:.01em;margin-bottom:7px}

/* ---------- number band ---------- */
.stat .n{font-family:var(--display);font-variation-settings:var(--wide);font-weight:300;letter-spacing:-.03em}
.stat .l{color:var(--muted)}

/* ---------- pull quote / giant marquee text ---------- */
.pull{font-family:var(--display);font-variation-settings:var(--wide);font-weight:300;text-transform:uppercase;font-size:clamp(26px,4.6vw,74px);line-height:1;letter-spacing:-.02em}

/* ---------- amenity columns ---------- */
.cols{columns:3;column-gap:clamp(24px,4vw,72px)}
@media(max-width:960px){.cols{columns:2}}
@media(max-width:620px){.cols{columns:1}}
.cols li{break-inside:avoid;padding:13px 0 13px 24px;border-bottom:1px solid var(--hair);position:relative;font-size:13px}
.cols li::before{content:"";position:absolute;left:0;top:21px;width:1px;height:11px;background:var(--accent)}

/* ---------- cross link ---------- */
.cross{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:clamp(34px,5vw,72px);border:1px solid var(--hair);transition:border-color .6s,background .6s,opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.cross:hover{border-color:var(--accent);background:rgba(141,118,94,.05)}
@media(max-width:760px){.cross{grid-template-columns:1fr}}

/* ---------- form ---------- */
.enq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px)}
@media(max-width:900px){.enq{grid-template-columns:1fr}}
.note{margin-top:22px;padding:16px 20px;border:1px solid var(--accent);background:rgba(141,118,94,.08);font-size:12px;letter-spacing:.05em;color:var(--accent-ink)}

/* ---------- nav on this site ---------- */
.nav.dark{background:transparent;color:var(--stone-2)}
.nav.dark.stuck{background:var(--navbg)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--stone-2);--muted:#9A968E;--hair:rgba(240,235,231,.15)}
.foot li a:hover{color:var(--accent-2)}
.pre{background:var(--ink)}

/* ---------- editorial collage colors ---------- */
.collage .script-line{color:var(--clay)}
.collage .caps-line{font-family:var(--display);font-variation-settings:var(--wide);font-weight:400;letter-spacing:-.015em;color:var(--fg)}
.collage .cg-copy{color:var(--muted)}
.dark.collage .script-line{color:var(--accent-2)}
.dark.collage .cg-copy{color:#9A968E}
/* BPG sets Georgian about 18% wider than Noto Sans Georgian did (its x-height
   already matches Archivo, so shrinking it is not the fix). At 900px and below
   the dining copy wraps to extra lines and, hung from top:80-84% of a
   fixed-height stage, ran up to 18px out of the bottom, plus up to 9px of
   scroll drift (qa/collage-qa.js). Lifted 2.5rem it clears the stage and still
   sits 30px+ below the nearest picture at every tested width. Anchoring it to
   the bottom was tried and rejected: drift pushes it back out, and on tall
   portrait screens it dropped copy that already fitted. */
@media (max-width:900px){body.lang-ka #dining .cg-copy{margin-top:-2.5rem}}

/* Georgian display type that no longer fits its line. .split .ln clips, so a
   word wider than its column is cut rather than wrapped, and Georgian capitals
   run far wider than Archivo's. Measured per word against its line at ten
   widths, 360-1920px:

   - .d2 in the two-column layout (above 900px) is a fixed share of the
     viewport, so the fit is the same at every width: "დაარეგისტრირეთ"
     (Enquire) needs 77% of the English size, "ცენტრალური" 85%, "საცხოვრისი."
     89%. Every Georgian .d2 is set at 74%, not just those three, so the
     hierarchy stays one size. Single-column phones already fit and keep the
     full size.
   - The dining collage title is capped at 57% of the stage for the desktop
     composition, and on portrait phones that cap still applies, which fits
     "DINING" but not "გასტრონომია" (292px in 205px). Portrait phones get the
     92vw every other collage title gets. On wider screens the line is 6%
     smaller, which is what the 57% cap leaves room for. */
@media (min-width:901px){body.lang-ka .d2{font-size:clamp(28px,3.4vw,52px)}}
body.lang-ka #dining .caps-line{font-size:clamp(34px,5.8vw,104px)}
@media (max-width:900px) and (max-aspect-ratio:1/1){body.lang-ka #dining .cg-title,html[lang="ru"] #dining .cg-title{max-width:92vw}}
/* Russian had the same fault, milder, measured the same way: "Зарегистрируйте"
   needs 92% and "Центральным" 93%, so Russian .d2 is 88%; "Гастрономия" on a
   portrait phone takes the 92vw title width above. */
@media (min-width:901px){html[lang="ru"] .d2{font-size:clamp(28px,4.05vw,62px)}}

/* The tower list slides each row in from 26px right as it scrolls into view.
   On a phone the rows are full width, so for that moment they stood past the
   right edge and the page became wider than the screen. body{overflow-x:hidden}
   does not stop iOS Safari panning sideways, so the page wobbled mid-scroll.
   Clipped at the full-width section, not at the list: the list's edge is the
   text column, so clipping there cut the end of every right-aligned label while
   its row slid in, on desktop too. At the section edge only what passes the
   screen is cut. clip, not hidden: no scroll container, vertical untouched. */
#towers{overflow-x:clip}