/* ─────────────────────────────────────────────────────────────
   Typeface
   The brand's own fonts, taken from the live site's @font-face rules:
   TBC Contractica (text), TBC Contractica CAPS (display + UI) and
   BPG Mrgvlovani (Georgian accent). Paths are relative to this file, which
   sits at assets/css/, so they resolve wherever the theme is installed.
   woff2 first with the original ttf as the fallback.
   ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:'TBC Contractica';
  src:url('../fonts/tbc-contractica-regular.woff2') format('woff2'),
      url('../fonts/tbc-contractica-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TBC Contractica CAPS';
  src:url('../fonts/tbc-contractica-caps-regular.woff2') format('woff2'),
      url('../fonts/tbc-contractica-caps-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TBC Contractica CAPS';
  src:url('../fonts/tbc-contractica-caps-medium.woff2') format('woff2'),
      url('../fonts/tbc-contractica-caps-medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TBC Contractica CAPS';
  src:url('../fonts/tbc-contractica-caps-bold.woff2') format('woff2'),
      url('../fonts/tbc-contractica-caps-bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'BPG Mrgvlovani';
  src:url('../fonts/bpg-mrgvlovani.woff2') format('woff2'),
      url('../fonts/bpg-mrgvlovani.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#05121C;
  --paper:#F4F1EC;
  --paper-dim:rgba(244,241,236,.66);
  --paper-faint:rgba(244,241,236,.46);
  --leaf:#11AE4B;

  --font-display:'TBC Contractica CAPS','TBC Contractica',system-ui,sans-serif;
  --font-text:'TBC Contractica','TBC Contractica CAPS',system-ui,sans-serif;
  --font-geo:'BPG Mrgvlovani','TBC Contractica',system-ui,sans-serif;

  --gutter:clamp(20px, 4.2vw, 68px);
  --maxw:1620px;

  --header-h:108px;
  --header-h-sm:72px;

  --logo-h:34px;
  --logo-h-sm:28px;

  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-smooth:cubic-bezier(.22,1,.36,1);
  --e-quint:cubic-bezier(.83,0,.17,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

/* ─────────────────────────────────────────────────────────────
   Reset
   The static build leaned on Tailwind's CDN preflight for this. The CDN has
   no place in production, and measuring showed it was providing exactly one
   rule this design actually needed — figure margins — plus a few defaults
   already set further down. Those are restated here.
   ───────────────────────────────────────────────────────────── */
figure,
blockquote,
dl, dd,
h1, h2, h3, h4, h5, h6,
p, pre{margin:0}
ol[class], ul[class]{list-style:none;margin:0;padding:0}
hr{border:0;height:1px;background:currentColor;opacity:.12}
table{border-collapse:collapse}
input, select, textarea{font:inherit;color:inherit}


html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-text);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* ── Lenis smooth scroll (only when site.js activates it) ──────── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--leaf);color:var(--ink)}
:focus-visible{outline:1px solid var(--leaf);outline-offset:5px;border-radius:1px}

.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ─────────────────────────────────────────────────────────────
   Type primitives
   ───────────────────────────────────────────────────────────── */
.display{
  font-family:var(--font-display);
  font-weight:500;letter-spacing:-.026em;line-height:1.12;
}
html[data-lang="ka"] .display{
  font-family:var(--font-display);letter-spacing:-.012em;line-height:1.2;
}

/* line mask + per-word lift */
/* Pad both ends. TBC Contractica's ascenders sit above the line box, so a
   mask that only allowed for descenders decapitated every capital. The
   negative margins keep the visual rhythm identical to an unpadded box. */
.mask{
  display:block;overflow:hidden;
  padding-top:.20em;margin-top:-.20em;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.mask > span{display:block}
.mask .w{display:inline-block;will-change:transform}
.js .mask .w{transform:translate3d(0,115%,0)}
.js .fade-up{opacity:0;transform:translate3d(0,18px,0);will-change:transform,opacity}

/* ─────────────────────────────────────────────────────────────
   Veil
   ───────────────────────────────────────────────────────────── */
#veil{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .75s var(--e-smooth), visibility .75s;
}
#veil.gone{opacity:0;visibility:hidden;pointer-events:none}
#veil img{height:44px;width:auto;opacity:.92;transition:transform .75s var(--e-smooth),opacity .5s var(--e-smooth)}
#veil.gone img{transform:translateY(-12px) scale(.94);opacity:0}

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .5s var(--e-expo), background-color .5s var(--e-soft), backdrop-filter .5s var(--e-soft);
  will-change:transform;
}
.hdr::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,18,28,.58), rgba(5,18,28,0));
  transition:opacity .6s var(--e-soft);
}
.hdr.scrolled{
  background:rgba(5,18,28,.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.hdr.scrolled::before{opacity:0}
.hdr.hidden{transform:translate3d(0,-102%,0)}

.hdr__row{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  transition:height .45s var(--e-expo);
}
.hdr.scrolled .hdr__row{height:var(--header-h-sm)}

/* real brand logo */
.logo{display:block;flex:0 0 auto}
.logo img{
  height:var(--logo-h);width:auto;
  transition:height .45s var(--e-expo), opacity .5s var(--e-soft), transform .5s var(--e-expo);
  transform-origin:left center;
}
.hdr.scrolled .logo img{height:var(--logo-h-sm)}
.logo:hover img{opacity:.78;transform:scale(1.02)}

/* nav */
.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,44px)}
.navlink{
  position:relative;display:inline-block;overflow:hidden;line-height:1.35;
  font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);
}
html[data-lang="ka"] .navlink{font-size:13px;letter-spacing:.04em;text-transform:none}
.navlink b{display:block;font-weight:inherit;transition:transform .62s var(--e-expo),opacity .62s var(--e-expo)}
.navlink b:last-child{position:absolute;inset:0;transform:translate3d(0,105%,0);opacity:0}
.navlink:hover b:first-child{transform:translate3d(0,-105%,0);opacity:0}
.navlink:hover b:last-child{transform:translate3d(0,0,0);opacity:1}

.hdr__right{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}

.tel{
  font-size:11px;letter-spacing:.14em;color:var(--paper-dim);
  font-variant-numeric:tabular-nums;transition:color .5s var(--e-soft);
}
.tel:hover{color:var(--paper)}

/* language */
.lang{position:relative;display:flex;align-items:center;padding:3px;border-radius:999px;background:rgba(244,241,236,.07)}
.lang__pill{
  position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:999px;
  background:rgba(244,241,236,.14);pointer-events:none;
  transition:transform .68s var(--e-expo), width .68s var(--e-expo);
}
.lang button,
.lang a{
  position:relative;z-index:1;padding:6px 11px;border-radius:999px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);transition:color .5s var(--e-soft);
}
.lang button[data-set="ka"],
.lang a[data-set="ka"]{font-family:var(--font-geo);font-size:12px;letter-spacing:.02em;padding-block:4px}
.lang button[aria-pressed="true"],
.lang a[aria-pressed="true"]{color:var(--paper)}

/* primary action */
.cta{
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:13px 22px;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  overflow:hidden;will-change:transform;
}
html[data-lang="ka"] .cta{font-size:13px;letter-spacing:.02em;text-transform:none}
.cta::before{
  content:"";position:absolute;inset:0;background:var(--leaf);
  transform:scale(1.04) translate3d(0,101%,0);
  transition:transform .72s var(--e-expo);
}
.cta:hover::before{transform:scale(1.04) translate3d(0,0,0)}
.cta > *{position:relative;z-index:1}
.cta__arrow{transition:transform .62s var(--e-expo)}
.cta:hover .cta__arrow{transform:translateX(5px)}

/* burger */
.burger{display:none;width:40px;height:40px;margin-right:-8px;position:relative}
.burger i{
  position:absolute;left:9px;width:22px;height:1px;background:var(--paper);
  transition:transform .62s var(--e-expo),opacity .3s var(--e-soft);
}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px}
body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ─────────────────────────────────────────────────────────────
   Mobile sheet
   ───────────────────────────────────────────────────────────── */
.sheet{
  position:fixed;inset:0;z-index:90;background:var(--ink);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .92s var(--e-quint);
  display:flex;flex-direction:column;justify-content:center;
}
body.menu-open .sheet{clip-path:inset(0 0 0 0);visibility:visible}
.sheet__list{display:flex;flex-direction:column;gap:clamp(8px,2.2vh,20px)}
.sheet__list a{
  font-family:var(--font-display);
  font-size:clamp(34px,10vw,58px);line-height:1.16;letter-spacing:-.02em;
  display:block;overflow:hidden;
}
.sheet__list a span{display:block;transform:translate3d(0,110%,0);transition:transform .92s var(--e-expo)}
body.menu-open .sheet__list a span{transform:translate3d(0,0,0)}
.sheet__foot{
  margin-top:clamp(36px,7vh,72px);display:flex;flex-direction:column;gap:10px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;isolation:isolate;overflow:clip}

.hero__media{
  position:absolute;inset:0;z-index:-2;will-change:transform;
  background:radial-gradient(120% 90% at 70% 15%, #0d2f45 0%, #071825 46%, #04101a 100%);
}
.hero__zoom{position:absolute;inset:0;will-change:transform}
.js .hero__zoom{transform:scale(1.13)}
/* Opaque from the start: the poster is the first frame, so holding this at
   opacity 0 until the motion script runs would throw away the instant paint
   the poster exists to give. The entrance is carried by .hero__zoom instead. */
.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;opacity:1;
}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__grade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(4,16,25,.97) 0%, rgba(4,16,25,.84) 16%, rgba(4,16,25,.48) 38%, rgba(4,16,25,.07) 68%, rgba(4,16,25,.32) 100%),
    linear-gradient(to right, rgba(4,16,25,.88) 0%, rgba(4,16,25,.42) 46%, rgba(4,16,25,0) 82%);
}
.hero__grain{
  position:absolute;inset:-24%;z-index:-1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.85'/></svg>");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)}
  17%{transform:translate3d(-1.4%,.8%,0)}
  33%{transform:translate3d(.8%,-1.4%,0)}
  50%{transform:translate3d(-.8%,1.4%,0)}
  67%{transform:translate3d(1.4%,.8%,0)}
  83%{transform:translate3d(.8%,-.8%,0)}
}

.hero__content{
  position:relative;display:flex;flex-direction:column;
  min-height:100svh;
  padding-top:calc(var(--header-h) + 24px);
  padding-bottom:clamp(44px,8.5vh,112px);
  will-change:transform;
}
.hero__lede{margin-top:auto;max-width:min(1240px,100%)}

h1.hero__title{
  margin:0;
  font-size:clamp(52px, min(10.4vw, 17vh), 168px);
}
h1.hero__title .ln2{padding-left:clamp(0px,8vw,182px)}

.hero__sub{
  margin:clamp(26px,3.8vh,46px) 0 0;
  max-width:46ch;
  font-size:clamp(14.5px,1.12vw,17px);line-height:1.62;
  color:var(--paper-dim);
}

.hero__acts{
  display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);flex-wrap:wrap;
  margin-top:clamp(30px,4.4vh,52px);
}

.ghost{
  position:relative;display:inline-flex;align-items:baseline;gap:.6em;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-dim);padding-bottom:7px;
  transition:color .5s var(--e-soft);
}
html[data-lang="ka"] .ghost{font-size:13px;letter-spacing:.02em;text-transform:none}
.ghost::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .72s var(--e-expo);
}
.ghost:hover{color:var(--paper)}
.ghost:hover::after{transform:scaleX(1)}
.ghost .n{font-variant-numeric:tabular-nums;color:var(--leaf)}
.sec--paper .ghost{color:rgba(5,18,28,.58)}
.sec--paper .ghost:hover{color:var(--ink)}

/* ─────────────────────────────────────────────────────────────
   Sections — shared
   ───────────────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(88px,15vh,190px) 0}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--ink{background:var(--ink);color:var(--paper)}

.sec__label{
  margin:0;font-size:10.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;opacity:.44;
}
html[data-lang="ka"] .sec__label{font-size:12px;letter-spacing:.07em;text-transform:none}

/* scroll reveals */
.rv-mask{
  display:block;overflow:hidden;
  padding-top:.20em;margin-top:-.20em;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.js .rv{opacity:0;transform:translate3d(0,22px,0);will-change:transform,opacity}
.js .rv-mask > span{display:block;transform:translate3d(0,112%,0);will-change:transform}

/* ── 02 · statement ─────────────────────────────────────────── */
.stmt__h{
  margin:clamp(38px,6vh,74px) 0 0;
  max-width:19ch;
  font-size:clamp(30px, 4.6vw, 74px);
  line-height:1.16;letter-spacing:-.02em;
}
html[data-lang="ka"] .stmt__h{max-width:22ch;line-height:1.3}
.stmt__h .w{opacity:.17}   /* driven per-frame from scroll — no transition to fight it */
.stmt__foot{
  margin-top:clamp(46px,7vh,92px);
  display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,90px);
  max-width:860px;
}
.stmt__foot p{
  margin:0;flex:1 1 260px;max-width:40ch;
  font-size:15px;line-height:1.66;opacity:.62;
}

/* ── 03 · venues ────────────────────────────────────────────── */
.vgrid{
  margin-top:clamp(36px,6vh,72px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(16px,2.2vw,38px);row-gap:clamp(30px,4.4vw,72px);
  align-items:start;
}
/* middle column rides lower — the grid reads composed, not tabulated */
.vgrid > :nth-child(3n+2){padding-top:clamp(18px,3vw,58px)}

.vg{display:block}
.vg__f{position:relative;overflow:hidden;aspect-ratio:3/2;background:#0A1E2B}
.vg__f img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) brightness(.9);
  transition:transform 1.3s var(--e-expo), filter 1.1s var(--e-soft);
}
.vg:hover .vg__f img{transform:scale(1.045);filter:saturate(1) brightness(1)}

.vg__n{
  display:block;margin-top:clamp(13px,1.2vw,19px);
  font-size:clamp(19px,1.72vw,28px);line-height:1.18;
  color:var(--paper);
  transition:transform .85s var(--e-expo);
  transform-origin:left center;
}
.vg:hover .vg__n{transform:translateX(6px)}

.vg__ka{
  display:block;margin-top:7px;
  font-family:var(--font-geo);
  font-size:12.5px;line-height:1.3;letter-spacing:.015em;
  color:var(--paper-faint);
  transition:color .55s var(--e-soft), transform .85s var(--e-expo);
  transform-origin:left center;
}
.vg:hover .vg__ka{color:var(--paper-dim);transform:translateX(6px)}
html[data-lang="ka"] .vg__ka{
  font-family:var(--font-text);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
}

/* ── 04 · catering ──────────────────────────────────────────── */
.cat__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,5vw,80px);align-items:end}
.cat__h{
  margin:clamp(30px,4.6vh,54px) 0 0;
  font-size:clamp(42px,7.6vw,128px);line-height:1.08;letter-spacing:-.03em;
}
.cat__aside{display:flex;flex-direction:column;gap:22px;padding-bottom:clamp(4px,1vh,14px)}
.cat__aside p{margin:0;max-width:38ch;font-size:15px;line-height:1.66;opacity:.62}
/* The M Catering lockup in the cut that suits the ground: the colour one —
   blue mark, grey wordmark, as the original site used it — on paper, and the
   white one on ink. Both are printed; the section decides which shows. No
   filter on either: an invert turns the brand blue #0071B4 into orange. */
.cat__lockup{align-self:flex-start;display:inline-flex}
.cat__logo{height:34px;width:auto;display:block}
.cat__logo--ink{display:none}
.sec--ink .cat__logo--paper{display:none}
.sec--ink .cat__logo--ink{display:block}

.cat__grid{
  margin-top:clamp(48px,8vh,110px);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.8vw,30px);
}
.shot{position:relative;display:block;overflow:hidden;background:#E6E1DA;will-change:transform}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.25s var(--e-expo), filter 1.25s var(--e-expo);
}
.shot:hover img{transform:scale(1.045)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px clamp(14px,1.4vw,20px) 14px;
  background:linear-gradient(to top, rgba(4,16,25,.82), rgba(4,16,25,0));
  color:var(--paper);
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .6s var(--e-soft), transform .7s var(--e-expo);
}
.shot:hover figcaption{opacity:1;transform:none}
.shot figcaption b{display:block;font-family:var(--font-geo);font-weight:400;font-size:14px;line-height:1.35}
.shot figcaption i{display:block;margin-top:3px;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.66}

.shot--a{grid-column:1 / span 5;aspect-ratio:4/5}
.shot--b{grid-column:6 / span 4;aspect-ratio:1/1;align-self:end}
.shot--c{grid-column:10 / span 3;aspect-ratio:3/4}
.shot--d{grid-column:1 / span 3;aspect-ratio:1/1;margin-top:clamp(14px,1.8vw,30px)}
.shot--e{grid-column:4 / span 5;aspect-ratio:5/4;margin-top:clamp(14px,1.8vw,30px)}
.shot--f{grid-column:9 / span 4;aspect-ratio:4/5;margin-top:clamp(14px,1.8vw,30px)}

/* ── catering catalogue (the full printed book) ─────────────── */
.cxwrap{
  margin-top:clamp(40px,7vh,88px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(34px,5vw,90px);row-gap:clamp(38px,6vh,72px);
  align-items:start;
}
.cxcat{break-inside:avoid}
.cxcat__h{
  display:flex;align-items:baseline;gap:12px;
  margin:0 0 14px;padding-bottom:13px;border-bottom:1px solid currentColor;
}
.sec--paper .cxcat__h{border-color:rgba(5,18,28,.18)}
.sec--ink .cxcat__h{border-color:rgba(244,241,236,.16)}
.cxcat__h b{font-family:var(--font-geo);font-weight:400;font-size:clamp(16px,1.5vw,21px);line-height:1.1;letter-spacing:.01em}
.cxcat__h i{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.46}
.cxcat__c{margin-left:auto;font-size:11px;letter-spacing:.08em;color:var(--leaf);font-variant-numeric:tabular-nums}
.cxlist{list-style:none;margin:0;padding:0}
.cx{
  display:grid;grid-template-columns:32px minmax(0,1fr);
  column-gap:14px;align-items:baseline;padding:10px 0;
}
.cx + .cx{border-top:1px solid rgba(5,18,28,.07)}
.sec--ink .cx + .cx{border-top-color:rgba(244,241,236,.07)}
.cx__n{font-size:11px;letter-spacing:.06em;color:var(--leaf);font-variant-numeric:tabular-nums;padding-top:1px}
.cx__ka{font-family:var(--font-geo);font-size:14px;line-height:1.32}
.cx__en{grid-column:2;display:block;margin-top:2px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.44;line-height:1.4}
html[data-lang="ka"] .cx__en{letter-spacing:.06em}
@media (max-width:760px){ .cxwrap{grid-template-columns:1fr;row-gap:clamp(32px,5vh,52px)} }

/* ── 05 · news ──────────────────────────────────────────────── */
.news__list{margin-top:clamp(34px,5.5vh,64px)}
.nw{
  position:relative;display:grid;
  grid-template-columns:132px minmax(0,1fr) 40px;
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:clamp(20px,3vh,34px) 0;
}
.nw__d{font-size:11px;letter-spacing:.14em;color:var(--paper-faint);font-variant-numeric:tabular-nums}
.nw__t{
  font-family:var(--font-display);
  font-size:clamp(21px,2.5vw,40px);line-height:1.18;letter-spacing:-.018em;
  color:rgba(244,241,236,.82);
  transition:color .5s var(--e-soft), transform .8s var(--e-expo);
  transform-origin:left center;
}
.nw__a{justify-self:end;opacity:0;transform:translate3d(-8px,0,0);transition:opacity .5s var(--e-soft),transform .7s var(--e-expo)}
.nw::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.13;
}
.nw:first-child::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:currentColor;opacity:.13;
}
.nw:hover .nw__t{color:var(--paper);transform:translateX(clamp(3px,.6vw,12px))}
.nw:hover .nw__a{opacity:1;transform:none}

/* ── 05b · journal, front page ────────────────────────────────
   Three entries, image first. The index row above (.nw) stays for the
   "read next" strips at the foot of an article, where a compact line is
   the right form; here there are photographs and standfirsts to show,
   and a bare date-plus-title left most of the row empty. */
.jn__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(18px,3vw,40px);
}
.jn__all{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-faint);
  transition:color .5s var(--e-soft);
}
.jn__all:hover{color:var(--paper)}
.jn__allarrow{display:inline-block;transition:transform .7s var(--e-expo)}
.jn__all:hover .jn__allarrow{transform:translateX(6px)}
html[data-lang="ka"] .jn__all{font-size:12px;letter-spacing:.07em;text-transform:none}

.jn__grid{
  margin-top:clamp(34px,5.5vh,64px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(16px,2.2vw,38px);row-gap:clamp(30px,4.4vw,64px);
  align-items:start;
}
/* The middle column rides lower — the same device the venue grid uses, so the
   block reads as composed rather than tabulated. */
.jn__grid > :nth-child(3n+2){padding-top:clamp(18px,3vw,58px)}

.jn__e{position:relative;display:block;padding-bottom:clamp(18px,2.4vw,30px)}

.jn__f{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:#0A1E2B}
.jn__f img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Lighter than the venue frames. These are event posters with type burned
     into them, not photography, so they cannot be pushed as far down. */
  filter:saturate(.92) brightness(.9);
  transition:transform 1.3s var(--e-expo), filter 1.1s var(--e-soft);
}
.jn__e:hover .jn__f img{transform:scale(1.045);filter:saturate(1) brightness(1)}

.jn__meta{display:block;margin-top:clamp(13px,1.2vw,19px)}
.jn__d{
  font-size:11px;letter-spacing:.14em;
  color:var(--paper-faint);font-variant-numeric:tabular-nums;
  transition:color .5s var(--e-soft);
}
.jn__e:hover .jn__d{color:var(--leaf)}

.jn__t{
  display:block;margin-top:9px;
  font-size:clamp(19px,1.72vw,28px);line-height:1.18;letter-spacing:-.018em;
  color:rgba(244,241,236,.86);
  transition:color .5s var(--e-soft), transform .85s var(--e-expo);
  transform-origin:left center;
}
.jn__e:hover .jn__t{color:var(--paper);transform:translateX(6px)}

.jn__x{
  display:block;margin-top:11px;max-width:40ch;
  font-size:13.5px;line-height:1.62;
  color:rgba(244,241,236,.44);
  transition:color .5s var(--e-soft);
}
.jn__e:hover .jn__x{color:rgba(244,241,236,.62)}

/* The entry's own bottom edge, sweeping in — a table rule, not a border
   parked under a heading. */
.jn__rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(244,241,236,.13);overflow:hidden}
.jn__rule i{
  position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s var(--e-expo);
}
.jn__e:hover .jn__rule i,
.jn__e:focus-visible .jn__rule i{transform:scaleX(1)}

@media (max-width:1024px){
  .jn__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jn__grid > :nth-child(3n+2){padding-top:0}
  .jn__grid > :nth-child(2n){padding-top:clamp(18px,3vw,44px)}
}
@media (max-width:680px){
  .jn__grid{grid-template-columns:1fr;row-gap:clamp(26px,6vw,40px)}
  .jn__grid > *{padding-top:0!important}
  .jn__head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .jn__rule i{transform:scaleX(1)}
}

/* ── 05c · a place's media — the filmstrip ─────────────────────
   The row lives in the left column of the detail grid, opposite the hours
   and the address, rather than in a band of its own. So it is the width of
   a column, not of the page: the height below is derived from viewport
   width because the column is a fixed fraction of it, and if the height
   were free a wide frame would simply not fit between the column's edges.

   One row, one height, no grid. Every frame is as tall as every other and
   only as wide as its own picture says it should be — a portrait clip is a
   narrow column, a landscape photograph a long one — so the rhythm comes
   from the material rather than from a cell size imposed on it. The plate
   numbers along the top share one baseline, which is what holds mixed
   widths together and keeps the row reading as a contact sheet.

   The default is a native horizontal scroller: it works with no JavaScript
   at all, and it is what touch should get, since the platform's own
   momentum beats anything scripted. On a fine pointer the script takes the
   row over (.is-js) and drives a transform instead, which is the only way
   it glides and the only way it can be dragged. Either way the movement is
   sealed inside the column by overflow, and the type beside it never
   moves. */
.fsb{
  /* The chrome takes its colour from the section it finds itself in. This
     row was born on an ink field and now lives on a paper one, and a
     hairline in paper-white on paper is a hairline nobody can see. */
  --fs-fg:var(--paper);
  --fs-dim:var(--paper-faint);
  --fs-line:rgba(244,241,236,.16);
  --fs-hair:rgba(244,241,236,.22);
  --fs-hair-lit:rgba(244,241,236,.44);
  --fs-tint:rgba(244,241,236,.07);
  --fs-well:#0A1E2B;
}
.sec--paper .fsb{
  --fs-fg:var(--ink);
  --fs-dim:rgba(5,18,28,.44);
  --fs-line:rgba(5,18,28,.14);
  --fs-hair:rgba(5,18,28,.18);
  --fs-hair-lit:rgba(5,18,28,.4);
  --fs-tint:rgba(5,18,28,.05);
  --fs-well:#E6E1DA;              /* the same tone the catering frames sit on */
}

/* The column may be narrower than what is inside it — which is the whole
   premise of a row that scrolls. Without this a grid item is at least as wide
   as its content's minimum, and at the stacked breakpoint, where the track is
   a bare 1fr rather than minmax(0,1fr), the cell grew to the full width of the
   strip and put a horizontal scrollbar on the page. */
.ct__left{min-width:0}

/* Prose above, pictures below. Without prose the strip starts at the top of
   the column, level with the first label opposite it. */
.entry__body + .fsb{margin-top:clamp(34px,5vh,64px)}

/* Under the row, not beside the label: see filmstrip.php. */
.fs__meter{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);
  margin-top:clamp(15px,2.1vh,24px);
}
.fs__count{
  font-size:11px;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  color:var(--fs-dim);white-space:nowrap;
}
.fs__count b{font-weight:400;color:var(--fs-fg)}
.fs__count span{padding:0 .5em;opacity:.55}
.fs__count i{font-style:normal}

/* The same hairline meter the catering rail carries, so the two sliding
   things on this site report their position the same way. */
.fs__rule{flex:1;height:1px;background:var(--fs-line);position:relative;overflow:hidden}
.fs__rule i{
  position:absolute;inset:0;background:var(--fs-fg);
  transform:scaleX(0);transform-origin:left;will-change:transform;
}

.fs__nav{display:flex;gap:8px}
.fs__arrow{
  width:38px;height:38px;display:grid;place-items:center;border-radius:999px;
  color:var(--fs-fg);box-shadow:inset 0 0 0 1px var(--fs-hair);
  transition:background-color .5s var(--e-soft), box-shadow .5s var(--e-soft), opacity .5s var(--e-soft);
}
.fs__arrow:hover{background:var(--fs-tint);box-shadow:inset 0 0 0 1px var(--fs-hair-lit)}
.fs__arrow svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.25}
.fs__arrow[aria-disabled="true"]{opacity:.24;pointer-events:none}
/* Nothing drives the meter or the arrows when the script is absent. */
html:not(.js) .fs__meter{display:none}

.fs__wrap{margin-top:clamp(16px,2.4vh,30px)}

.fs{
  /* Off viewport width, not viewport height: the column this sits in is a
     fixed fraction of the page, so its width is what limits a frame. At the
     top of the range a 2.1 panorama still fits between the column's edges. */
  --fs-h:clamp(200px,24vw,370px);
  --fs-gap:clamp(8px,.9vw,18px);
  --fs-edge:0px;                  /* flush with the column, not with the page */
  position:relative;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  /* Frames come to rest on the column's own left edge, which is also where
     the arrow buttons put them. */
  scroll-snap-type:x proximity;scroll-padding-left:var(--fs-edge);
  scrollbar-width:none;
}
.fs::-webkit-scrollbar{display:none}
.fs:focus-visible{outline-offset:-2px}

/* Script driving. The browser's own scrolling has to be off or the two
   fight; touch-action keeps the page's vertical scroll native while
   horizontal movement comes here. */
.fs.is-js{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab}
.fs.is-js.is-drag{cursor:grabbing}
.fs.is-js.has-cur,.fs.is-js.has-cur *{cursor:none}

.fs__track{
  display:flex;width:max-content;align-items:flex-start;
  gap:var(--fs-gap);padding-inline:var(--fs-edge);
  will-change:transform;
}
.fs.is-drag .fs__track{user-select:none}

.fs__i{margin:0;flex:0 0 auto;width:calc(var(--fs-h) * var(--ar));scroll-snap-align:start}

.fs__cap{
  display:flex;align-items:baseline;gap:9px;
  padding-bottom:clamp(8px,1vh,13px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fs-dim);font-variant-numeric:tabular-nums;
}
.fs__kind{color:var(--leaf)}
html[data-lang="ka"] .fs__cap{font-size:11.5px;letter-spacing:.06em;text-transform:none}

.fs__f{position:relative;overflow:hidden;height:var(--fs-h);background:var(--fs-well)}
.fs__f img,.fs__f video{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;
}
/* No scale on hover here. The frame is already moving under the reader's
   hand, and a second transform on top of that reads as a wobble; the lift
   is light and tonal instead. */
.fs__f img{filter:saturate(.88) brightness(.9);transition:filter 1.1s var(--e-soft)}
.fs__i:hover .fs__f img{filter:saturate(1) brightness(1)}

/* Sound stays off until it is asked for — a clip that starts talking as it
   slides past is rude. Shown only once the script owns playback; before
   that the clip carries the browser's own controls instead. */
.fs__sound{
  display:none;position:absolute;left:12px;bottom:12px;z-index:2;
  align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(5,18,28,.44);backdrop-filter:blur(7px);
  color:var(--paper);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background-color .5s var(--e-soft);
}
.fs__i.is-live .fs__sound{display:inline-flex}
.fs__sound:hover{background:rgba(5,18,28,.7)}

/* The drag cursor. Fixed, below the header, and only ever visible while the
   pointer is inside the strip. */
.fs__cur{
  position:fixed;left:0;top:0;z-index:80;
  width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:999px;
  display:none;place-items:center;pointer-events:none;opacity:0;
  background:var(--fs-tint);
  box-shadow:inset 0 0 0 1px var(--fs-hair-lit);
  backdrop-filter:blur(2px);
}
.fsb.has-cur .fs__cur{display:grid}
.fs__cur span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fs-fg)}

/* Below the detail grid's own breakpoint the column becomes the full width
   of the page, so the row can be read at a proper size again. */
@media (max-width:1180px){
  .fs{--fs-h:clamp(220px,30vw,400px);--fs-gap:clamp(10px,1.4vw,24px)}
}
@media (max-width:560px){
  .fs{--fs-h:clamp(200px,52vw,320px)}
  .fs__nav{display:none}          /* a thumb drags; it does not need buttons */
}
@media (prefers-reduced-motion:reduce){
  .fs__rule i{transform:scaleX(1)}
}

/* ── a place at a glance — the facts line ────────────────────
   Under the banner and on its ink, so it reads as the last line of the
   title block rather than as a band of its own: a hairline, then the facts
   side by side, each parted from the next by a short upright rule, and the
   menu action closing the line on the right. A long value wraps at its
   spaces inside its own column, but no column is ever narrower than its
   longest word, and a number or an address to write to never breaks at all;
   the row itself never wraps on a wide screen, so the rules always stand
   between two facts. Below the detail breakpoint it becomes a
   sheet of two or three columns, each fact under its own hairline. */
.vbar{
  position:relative;background:var(--ink);color:var(--paper);
  padding:0 0 clamp(44px,7vh,84px);
}
.vbar__in{
  display:flex;align-items:center;gap:clamp(24px,3vw,56px);
  padding-top:clamp(26px,4vh,42px);
  border-top:1px solid rgba(244,241,236,.14);
}
.vbar__list{
  flex:1 1 auto;min-width:0;margin:0;
  display:flex;align-items:stretch;
}
.vbar__i{
  position:relative;flex:1 1 auto;
  padding:0 clamp(18px,2.2vw,40px);
}
.vbar__i:first-child{padding-left:0}
.vbar__i + .vbar__i::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;
  background:rgba(244,241,236,.14);
}
.vbar__k{
  margin:0 0 10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-faint);white-space:nowrap;
}
html[data-lang="ka"] .vbar__k{font-size:12px;letter-spacing:.06em;text-transform:none}
.vbar__v{
  margin:0;font-family:var(--font-display);
  font-size:clamp(15px,1.22vw,19px);line-height:1.38;letter-spacing:-.012em;
  text-wrap:balance;
}
.vbar__v a{white-space:nowrap;transition:opacity .45s var(--e-soft)}
.vbar__v a:hover{opacity:.62}
.vbar__act{flex:0 0 auto;margin-left:auto}

@media (max-width:1180px){
  .vbar__in{flex-direction:column;align-items:stretch;gap:clamp(28px,4.5vh,40px);border-top:0;padding-top:0}
  .vbar__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px clamp(18px,3vw,36px)}
  .vbar__i,
  .vbar__i:first-child{min-width:0;padding:16px 0 0;border-top:1px solid rgba(244,241,236,.14)}
  .vbar__v a{white-space:normal;overflow-wrap:anywhere}
  .vbar__i + .vbar__i::before{display:none}
  .vbar__act{margin-left:0}
}
@media (max-width:680px){
  .vbar__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .vbar__act .cta{width:100%;justify-content:center}
}

/* ── a place's films and photographs — the mosaic ────────────
   The layout the original site gave every place: three columns, a clip two
   rows tall on one side and four photographs in a square beside it, then the
   same mirrored, and on while there are photographs (template-parts/mosaic.php).

   Row height comes from the width of a column, measured off the mosaic itself
   (container units), so every small cell is 3:2 and the tall cell is exactly
   two of them plus the gap, whatever sits in it. Nothing in a cell sets its
   size: portrait clips, landscape clips and photographs of any shape all
   cover their cell, which is what keeps the grid square-edged.

   A block with fewer than four photographs gives them the room: three leave
   the first two rows tall, two stand tall side by side, one takes the whole
   square, and a lone tall cell spans the full width. On a phone the grid is
   two columns — the tall cell and two photographs beside it, two below. */
.vd{min-width:0}
.vd .entry__body{max-width:68ch}
.vd > [data-rv] + .mz{margin-top:clamp(34px,5vh,64px)}

.mz{
  --mz-gap:clamp(10px,1.1vw,20px);
  container-type:inline-size;
  display:grid;gap:var(--mz-gap);
}
.mz > [data-rv]:first-child{margin-bottom:clamp(6px,1.2vh,14px)}

.mz__b{
  display:grid;gap:var(--mz-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* Off the page's measure where container units are missing, then off the
     mosaic's own width where they are not. */
  grid-auto-rows:calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 2 * var(--mz-gap)) / 4.5);
  grid-auto-rows:calc((100cqw - 2 * var(--mz-gap)) / 4.5);
}
.mz__t{grid-column:1;grid-row:1 / span 2}
.mz__b--flip .mz__t{grid-column:3}

.mz__f{
  position:relative;margin:0;overflow:hidden;min-height:0;
  background:#E6E1DA;                 /* the paper well the filmstrip used */
}
.mz__f img,
.mz__f video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.mz__s img,
.mz__t img{transition:transform 1.2s var(--e-expo)}
.mz__f:hover img{transform:scale(1.035)}

@media (min-width:681px){
  .mz__b[data-n="3"] .mz__s:nth-child(2){grid-row:span 2}
  .mz__b[data-n="2"] .mz__s{grid-row:span 2}
  .mz__b[data-n="1"] .mz__s{grid-column:span 2;grid-row:span 2}
  .mz__b[data-n="0"] .mz__t{grid-column:1 / -1}
}
@media (max-width:680px){
  .mz__b{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:calc((100vw - 2 * var(--gutter) - var(--mz-gap)) / 3);
    grid-auto-rows:calc((100cqw - var(--mz-gap)) / 3);
  }
  .mz__b--flip .mz__t{grid-column:2}
  .mz__b[data-n="3"] .mz__s:nth-child(2),
  .mz__b[data-n="2"] .mz__s:nth-child(2),
  .mz__b[data-n="1"] .mz__s{grid-row:span 2}
  .mz__b[data-n="2"] .mz__s:nth-child(3){grid-column:1 / -1}
  .mz__b[data-n="0"] .mz__t{grid-column:1 / -1}
}

/* Sound stays off until asked for, one clip at a time — a speaker in the top
   corner of the clip. Muted, it carries a cross; with sound, two waves. The
   one draws out as the other draws in (each stroke is pathLength 1, so a
   dash of 1 offset by 1 is a stroke not yet drawn), and the waves follow one
   another outwards. Only with the script: without it the clip keeps its own
   controls. */
.mz__sound{
  position:absolute;top:12px;right:12px;z-index:1;
  display:none;place-items:center;width:40px;height:40px;border-radius:999px;
  background:rgba(5,18,28,.42);color:var(--paper);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(244,241,236,.18);
  transition:background-color .45s var(--e-soft), box-shadow .45s var(--e-soft), transform .6s var(--e-expo);
}
.mz__sound:hover{background:rgba(5,18,28,.66);box-shadow:inset 0 0 0 1px rgba(244,241,236,.36)}
.mz__sound:active{transform:scale(.92)}
.mz__sound[aria-pressed="true"]{background:rgba(5,18,28,.66)}
.mz.is-live .mz__sound{display:grid}

.mz__sound svg{
  width:20px;height:20px;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.mz__spk{transition:transform .6s var(--e-expo);transform-origin:8px 12px}
.mz__w1,.mz__w2,.mz__x1,.mz__x2{
  stroke-dasharray:1;
  transition:stroke-dashoffset .5s var(--e-expo), opacity .3s var(--e-soft);
}
/* Muted: the cross drawn, the waves not. */
.mz__w1,.mz__w2{stroke-dashoffset:1;opacity:0}
.mz__x1,.mz__x2{stroke-dashoffset:0;opacity:1;transition-delay:.12s}
.mz__x2{transition-delay:.2s}
/* Sound on: the cross withdraws first, then the waves go out, near one
   before far one; the speaker gives a small push as they leave it. */
.mz__sound[aria-pressed="true"] .mz__x1,
.mz__sound[aria-pressed="true"] .mz__x2{stroke-dashoffset:1;opacity:0;transition-delay:0s}
.mz__sound[aria-pressed="true"] .mz__w1,
.mz__sound[aria-pressed="true"] .mz__w2{stroke-dashoffset:0;opacity:1}
.mz__sound[aria-pressed="true"] .mz__w1{transition-delay:.12s}
.mz__sound[aria-pressed="true"] .mz__w2{transition-delay:.22s}
.mz__sound[aria-pressed="true"] .mz__spk{animation:mz-push .6s var(--e-expo)}
@keyframes mz-push{
  0%{transform:scale(1)}
  35%{transform:scale(.86)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .mz__f:hover img{transform:none}
  .mz__w1,.mz__w2,.mz__x1,.mz__x2{transition:none}
  .mz__sound[aria-pressed="true"] .mz__spk{animation:none}
}

/* ── a place's menu — the reader ─────────────────────────────
   The scanned pages, one under another at a readable width, the way a PDF
   reads. Its own scroller, smoothed by its own Lenis (see site.js) while
   the page's is stopped behind it; the page's instance ignores wheels that
   start in here because of data-lenis-prevent on the dialog.

   display:none until it is asked for, so none of its lazy pages is fetched
   by a visitor who never opens it; .is-on puts it in the flow and .is-open,
   one frame later, is what transitions. The chrome floats over the pages on
   a fade, and lets the wheel through to the scroller beneath it. */
.mlb{
  --mlb-top:calc(clamp(16px,2.6vh,28px) * 2 + 40px);
  position:fixed;inset:0;z-index:150;display:none;
  background:var(--ink);color:var(--paper);
  opacity:0;transition:opacity .5s var(--e-smooth);
}
.mlb.is-on{display:block}
.mlb.is-open{opacity:1}

.mlb__bar{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:clamp(16px,2vw,32px);
  padding:clamp(16px,2.6vh,28px) var(--gutter);
  background:linear-gradient(to bottom, rgba(5,18,28,.97) 0%, rgba(5,18,28,.84) 64%, rgba(5,18,28,0) 100%);
  pointer-events:none;
  opacity:0;transform:translate3d(0,-12px,0);
  transition:opacity .5s var(--e-smooth), transform .9s var(--e-expo);
}
.mlb.is-open .mlb__bar{opacity:1;transform:none;transition-delay:.1s}
.mlb__bar a{pointer-events:auto}

.mlb__t{margin:0;min-width:0;display:flex;align-items:baseline;gap:14px}
.mlb__k{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-faint);white-space:nowrap;
}
.mlb__n{
  font-family:var(--font-display);font-size:clamp(17px,1.5vw,22px);letter-spacing:-.018em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mlb__count{
  margin:0 0 0 auto;font-size:11px;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  color:var(--paper-faint);white-space:nowrap;
}
.mlb__count b{font-weight:400;color:var(--paper)}
.mlb__count span{padding:0 .5em;opacity:.55}
.mlb__count i{font-style:normal}

.mlb__x{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  height:40px;padding:0 16px 0 18px;border-radius:999px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(244,241,236,.22);
  transition:background-color .5s var(--e-soft), box-shadow .5s var(--e-soft);
}
.mlb__x:hover{background:rgba(244,241,236,.07);box-shadow:inset 0 0 0 1px rgba(244,241,236,.44)}
.mlb__x svg{width:11px;height:11px;display:block;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .6s var(--e-expo)}
.mlb__x:hover svg{transform:rotate(90deg)}
html[data-lang="ka"] .mlb__k,
html[data-lang="ka"] .mlb__x{font-size:12px;letter-spacing:.06em;text-transform:none}

.mlb__sc{
  position:absolute;inset:0;z-index:1;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;outline:none;
  padding:calc(var(--mlb-top) + clamp(10px,2vh,24px)) var(--gutter) clamp(64px,12vh,140px);
}
.mlb__sc::-webkit-scrollbar{display:none}

.mlb__in{
  width:100%;max-width:1240px;margin:0 auto;
  opacity:0;transform:translate3d(0,7vh,0);
  transition:opacity .7s var(--e-smooth), transform 1.15s var(--e-expo);
}
.mlb.is-open .mlb__in{opacity:1;transform:none;transition-delay:.05s}

/* A portrait page at the width of a page held open; a landscape sheet at
   the full width of the reader. */
.mlb__p{
  position:relative;margin:0 auto;max-width:880px;background:var(--paper);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.7);
}
.mlb__p--wide{max-width:none}
.mlb__p + .mlb__p{margin-top:clamp(14px,2.2vh,26px)}
.mlb__p img{display:block;width:100%;height:auto}
.mlb__img{opacity:0;transition:opacity .6s var(--e-smooth)}
.mlb__p.is-loaded .mlb__img{opacity:1}
/* No script: the <noscript> copy is the page, and the stand-in steps aside.
   The script clears data-src from any stand-in it fills itself. */
html:not(.js) .mlb__img[data-src]{display:none}

/* Until its page arrives, a sheet says so: a short hairline at its centre
   with a darker run travelling along it — the site's meter, at rest. */
.js .mlb__p::after{
  content:"";position:absolute;left:50%;top:50%;
  width:84px;height:1px;margin:0 0 0 -42px;
  background:linear-gradient(90deg, transparent, rgba(5,18,28,.55), transparent) no-repeat rgba(5,18,28,.1);
  background-size:40% 100%;
  animation:mlb-wait 1.2s var(--e-soft) infinite;
  transition:opacity .4s var(--e-smooth);
}
.js .mlb__p.is-loaded::after{opacity:0;animation:none}
@keyframes mlb-wait{
  from{background-position:-60% 0}
  to{background-position:160% 0}
}
/* A page that would not come, after its retries: one line, and a tap on
   the sheet tries again. */
.js .mlb__p.is-failed{cursor:pointer}
.js .mlb__p.is-failed::after{
  content:attr(data-note);left:12%;right:12%;width:auto;height:auto;margin:0;
  transform:translateY(-50%);background:none;animation:none;text-align:center;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.7;
  color:rgba(5,18,28,.5);
}
html[data-lang="ka"].js .mlb__p.is-failed::after{font-size:12px;letter-spacing:.04em;text-transform:none}

/* Plate numbers in the margin, level with each page's head — the same
   numbering the filmstrip carries. Only where there is a margin to put
   them in. */
.mlb__no{
  position:absolute;top:2px;right:calc(100% + clamp(14px,1.6vw,26px));
  font-size:10.5px;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  color:var(--paper-faint);
}

/* Where the reader is in the book: an upright version of the filmstrip's
   hairline meter, in the right margin. */
.mlb__rule{
  position:absolute;z-index:2;right:calc(var(--gutter) * .5);
  top:calc(var(--mlb-top) + 8px);bottom:clamp(28px,6vh,64px);
  width:1px;background:rgba(244,241,236,.14);overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .6s var(--e-smooth);
}
.mlb.is-open .mlb__rule{opacity:1;transition-delay:.25s}
.mlb__rule i{
  position:absolute;inset:0;background:var(--paper);
  transform:scaleY(0);transform-origin:top;will-change:transform;
}

/* No script: the action is a plain #mg-menu link, :target shows the reader
   with nothing left to animate in, and Close is a link back. */
html:not(.js) .mlb:target{display:block;opacity:1}
html:not(.js) .mlb:target .mlb__bar,
html:not(.js) .mlb:target .mlb__in{opacity:1;transform:none}
html:not(.js) .mlb__count,
html:not(.js) .mlb__rule{display:none}

@media (max-width:1040px){
  .mlb__no{display:none}
}
@media (max-width:560px){
  .mlb__k{display:none}
  .mlb__x{padding:0 14px}
  .mlb__x span{display:none}
  .mlb__rule{right:6px}
}
@media (prefers-reduced-motion:reduce){
  .mlb,.mlb__bar,.mlb__in,.mlb__rule,.mlb__img{transition:none}
  .js .mlb__p::after{animation:none}
}


/* ── 06 · footer · the houses, then the colophon ──────────────
   It opens on a row of every house's own mark — white, reversed out of each
   venue's colour artwork — each one the way into that place. Below, the
   colophon: the group, its pages, how to reach it, where to follow it, on a
   plain four-column grid in one size of type, labels above in the site's
   small tracked capitals. Then the rail. The M Group mark is the shipped
   white wordmark; no filter, ever. See .cat__lockup for the same
   rule. */
.ft{
  background:var(--ink);color:var(--paper);
  padding:clamp(64px,10vh,128px) 0 clamp(30px,4vh,46px);
}

/* ── the houses ─────────────────────────────────────────────── */
.ft__houses{margin:0 0 clamp(64px,10vh,120px)}
.ft__logos{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  border-top:1px solid rgba(244,241,236,.1);
  border-bottom:1px solid rgba(244,241,236,.1);
}
.ft__logos > li{position:relative}
/* Short upright rules between the marks, not full-height walls: the row
   should read as one line of names, not as nine boxes. */
.ft__logos > li + li::before{
  content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;
  background:rgba(244,241,236,.1);
}
.ft__logo{
  --lh:clamp(54px,5vw,86px);          /* the height a square mark stands at */
  display:grid;place-items:center;
  height:clamp(128px,11.5vw,178px);padding:0 10%;
}
.ft__logo img{
  display:block;width:auto;max-width:100%;
  height:calc(var(--lh) * var(--f, 1));object-fit:contain;
  opacity:.8;
  transition:opacity .55s var(--e-soft), transform .9s var(--e-expo);
}
.ft__logo--word span{
  font-family:var(--font-display);font-size:clamp(12px,.95vw,15px);
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:var(--paper);opacity:.8;
  transition:opacity .55s var(--e-soft);
}
.ft__logo:hover img,
.ft__logo:focus-visible img{opacity:1;transform:scale(1.06)}
.ft__logo:hover span,
.ft__logo:focus-visible span{opacity:1}
/* Siblings recede so the mark under the cursor is the only one lit. */
.ft__logos:hover > li:not(:hover) .ft__logo img,
.ft__logos:hover > li:not(:hover) .ft__logo span{opacity:.28}
.ft__logo:focus-visible{outline-offset:-6px}

/* ── the colophon ───────────────────────────────────────────── */
.ft__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
}
.ft__h{
  margin:0 0 clamp(18px,2vw,26px);
  font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,241,236,.38);
}
html[data-lang="ka"] .ft__h{font-size:12px;letter-spacing:.06em;text-transform:none}

.ft__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.05vw,14px)}

/* ── links: the line reveal ─────────────────────────────────── */
.ft__lk{
  position:relative;display:inline-block;
  font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.4;
  color:var(--paper-dim);
  transition:color .5s var(--e-soft);
}
.ft__lk::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--e-expo);
}
a:hover .ft__lk,
a:focus-visible .ft__lk{color:var(--paper)}
a:hover .ft__lk::after,
a:focus-visible .ft__lk::after{transform:scaleX(1)}

.ft__addr{
  display:block;max-width:24ch;
  font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.5;
  color:rgba(244,241,236,.4);
}

/* Out to another site: the arrow leaves the way the link goes. */
.ft__out{display:inline-flex;align-items:baseline;gap:8px}
.ft__arr{
  display:inline-block;font-size:13px;color:rgba(244,241,236,.38);
  transition:transform .7s var(--e-expo), color .5s var(--e-soft);
}
.ft__out:hover .ft__arr,
.ft__out:focus-visible .ft__arr{transform:translate(3px,-3px);color:var(--paper)}

/* ── brand ──────────────────────────────────────────────────── */
.ft__mark{display:inline-block}
.ft__mark img{height:34px;width:auto;display:block;transition:opacity .5s var(--e-soft)}
.ft__mark:hover img{opacity:.76}
.ft__blurb{
  margin:clamp(18px,2vw,26px) 0 0;max-width:34ch;
  font-size:13.5px;line-height:1.66;color:rgba(244,241,236,.4);
}

/* ── bottom rail ────────────────────────────────────────────── */
.ft__bot{
  margin-top:clamp(56px,9vh,112px);padding-top:clamp(18px,2vw,26px);
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);
  justify-content:space-between;align-items:center;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,241,236,.34);
  border-top:1px solid rgba(244,241,236,.1);
}
html[data-lang="ka"] .ft__bot{font-size:12px;letter-spacing:.05em;text-transform:none}
.ft__host{margin-right:auto}

.ft__up{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,241,236,.5);
  transition:color .5s var(--e-soft);
  will-change:transform;
}
.ft__up:hover{color:var(--paper)}
.ft__uparrow{display:inline-block;transition:transform .8s var(--e-expo)}
.ft__up:hover .ft__uparrow{transform:translateY(-5px)}
html[data-lang="ka"] .ft__up{font-size:12px;letter-spacing:.05em;text-transform:none}

/* Below the width where nine marks fit in a row, three to a row: rules
   between the marks in a row, and a hairline over every row after the
   first. */
@media (max-width:1100px){
  .ft__logos{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft__logos > li + li::before{display:block}
  .ft__logos > li:nth-child(3n+1)::before{display:none}
  .ft__logos > li:nth-child(n+4){border-top:1px solid rgba(244,241,236,.1)}
  .ft__logo{--lh:clamp(46px,7vw,66px);height:clamp(118px,17vw,150px)}

  .ft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .ft__col--brand{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(24px,4vw,56px)}
  .ft__blurb{margin:0;flex:1 1 280px}
}
@media (max-width:620px){
  .ft__logo{--lh:clamp(36px,11vw,52px);height:clamp(100px,28vw,124px);padding:0 9%}
  .ft__logo--word span{font-size:11px;letter-spacing:.18em}

  .ft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,8vw,48px) 20px}
  .ft__col--brand{flex-direction:column;align-items:flex-start}
  .ft__col--contact{grid-column:1 / -1;order:3}
  .ft__col--social{order:2}
  .ft__bot{flex-direction:column;align-items:flex-start;gap:10px}
  .ft__host{margin-right:0}
  .ft__up{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .ft__logo img,.ft__arr{transition:none}
  .ft__logo:hover img{transform:none}
}


/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .nav,.tel{display:none}
  .burger{display:block}
  .cat__head{grid-template-columns:1fr;gap:clamp(30px,5vh,52px)}
  .cat__aside{padding-bottom:0}
}
@media (max-width:900px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgrid > :nth-child(3n+2){padding-top:0}
  .vgrid > :nth-child(2n){padding-top:clamp(16px,4vw,42px)}
}
@media (max-width:760px){
  :root{--header-h:80px;--header-h-sm:64px;--logo-h:30px;--logo-h-sm:26px}
  .hdr .cta{display:none}
  h1.hero__title .ln2{padding-left:0}

  /* the source clip is 9:16 with burned-in captions low in frame —
     crop to the clean upper third rather than letting them through */
  .hero__media video{object-position:50% 15%;transform:scale(1.58);transform-origin:50% 15%}
  .hero__grade{background:
    linear-gradient(to top,
      rgba(4,16,25,1) 0%, rgba(4,16,25,1) 9%,
      rgba(4,16,25,.93) 24%, rgba(4,16,25,.64) 44%,
      rgba(4,16,25,.12) 76%, rgba(4,16,25,.38) 100%);}

  /* catering grid folds to two columns, keeping the offsets */
  .shot--a{grid-column:1 / span 7;aspect-ratio:4/5}
  .shot--b{grid-column:8 / span 5;aspect-ratio:1/1}
  .shot--c{grid-column:1 / span 5;aspect-ratio:3/4;margin-top:clamp(12px,3vw,24px)}
  .shot--d{grid-column:6 / span 7;aspect-ratio:5/4;margin-top:clamp(12px,3vw,24px)}
  .shot--e{grid-column:1 / span 7;aspect-ratio:5/4;margin-top:clamp(12px,3vw,24px)}
  .shot--f{grid-column:8 / span 5;aspect-ratio:4/5;margin-top:clamp(12px,3vw,24px)}

  .nw{grid-template-columns:86px minmax(0,1fr);gap:14px}
  .nw__a{display:none}
  /* The footer's own responsive rules live with the footer, in section 06. */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .mask .w{transform:none}
  .js .fade-up{opacity:1;transform:none}
  .js .hero__zoom{transform:none}
  .hero__media video{opacity:1}
  .js .rv{opacity:1;transform:none}
  .js .rv-mask > span{transform:none}
  .stmt__h .w{opacity:1}
  .shot{transform:none!important}
}

/* ═════════════════════════════════════════════════════════════
   Inner pages
   ═════════════════════════════════════════════════════════════ */

/* ── page banner ─────────────────────────────────────────────── */
.banner{
  position:relative;background:var(--ink);color:var(--paper);
  padding:calc(var(--header-h) + clamp(64px,12vh,148px)) 0 clamp(52px,9vh,118px);
  overflow:clip;isolation:isolate;
}
.banner__bg{position:absolute;inset:0;z-index:-2}
.banner__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.banner__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(4,16,25,.97) 0%, rgba(4,16,25,.72) 34%, rgba(4,16,25,.34) 74%, rgba(4,16,25,.62) 100%),
    linear-gradient(to right, rgba(4,16,25,.86) 0%, rgba(4,16,25,.38) 52%, rgba(4,16,25,.12) 100%);
}
.banner__k{
  margin:0 0 clamp(20px,3vh,30px);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-faint);
}
html[data-lang="ka"] .banner__k{font-size:12px;letter-spacing:.07em;text-transform:none}
.banner__t{margin:0;font-size:clamp(42px, min(8.4vw, 15vh), 132px)}
.banner__sub{
  margin:clamp(22px,3.2vh,38px) 0 0;max-width:50ch;
  font-size:clamp(14.5px,1.1vw,17px);line-height:1.62;color:var(--paper-dim);
}
.js .banner__sub{opacity:0;transform:translate3d(0,18px,0);will-change:transform,opacity}

/* A place's banner. The photograph is the point here, so it is shown as it
   was taken, with three light washes where type sits on it and nowhere else:
   a shade under the header, a little behind the title's corner, and a fall at
   the foot into the ink of the facts line, so banner and facts still read as
   one block. The type carries a soft shadow instead of a veil. */
.banner--place .banner__bg img{opacity:1}
.banner--place .banner__bg::after{
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(5,18,28,.62) 14%, rgba(5,18,28,0) 42%),
    linear-gradient(to bottom, rgba(5,18,28,.46) 0%, rgba(5,18,28,0) 26%),
    linear-gradient(to right, rgba(5,18,28,.34) 0%, rgba(5,18,28,0) 56%);
}
.banner--place .banner__t,
.banner--place .banner__k,
.banner--place .banner__sub{text-shadow:0 1px 24px rgba(5,18,28,.38)}
.banner--place .banner__k{color:var(--paper-dim)}

/* ── shared: measured prose ──────────────────────────────────── */
.prose{margin:0;max-width:62ch;font-size:clamp(14.5px,1.06vw,16.5px);line-height:1.74;opacity:.72}
.prose + .prose{margin-top:1.15em}

/* ── about ───────────────────────────────────────────────────── */
.facts{
  margin-top:clamp(42px,7vh,86px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(16px,2.4vw,44px);row-gap:clamp(32px,5vh,56px);
}
.fact__n{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(34px,4.2vw,66px);line-height:1.08;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.fact__l{
  display:block;margin-top:12px;max-width:22ch;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;line-height:1.55;
}
html[data-lang="ka"] .fact__l{font-size:12.5px;letter-spacing:.03em;text-transform:none}

.pillars{
  margin-top:clamp(52px,9vh,120px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,72px);
  align-items:start;
}
.pillar h3{
  margin:0 0 18px;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,2.5vw,38px);line-height:1.1;letter-spacing:-.022em;
}
.pillar p{margin:0;font-size:14.5px;line-height:1.72;opacity:.66}

.certs{margin-top:clamp(44px,7vh,92px);display:flex;flex-wrap:wrap;gap:12px}
.cert{
  padding:10px 16px;border-radius:999px;
  background:rgba(244,241,236,.07);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);
}
.sec--paper .cert{background:rgba(5,18,28,.06);color:rgba(5,18,28,.62)}
html[data-lang="ka"] .cert{font-size:12.5px;letter-spacing:.03em;text-transform:none}

/* ── places: venue card meta ─────────────────────────────────── */
.vg__meta{
  display:block;margin-top:11px;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(244,241,236,.4);line-height:1.75;
}
html[data-lang="ka"] .vg__meta{font-size:12px;letter-spacing:.03em;text-transform:none}
.sec--paper .vg__n{color:var(--ink)}
.sec--paper .vg__ka{color:rgba(5,18,28,.42)}
.sec--paper .vg:hover .vg__ka{color:rgba(5,18,28,.68)}
.sec--paper .vg__meta{color:rgba(5,18,28,.44)}

/* ── journal ─────────────────────────────────────────────────── */
.posts{display:flex;flex-direction:column;gap:clamp(44px,7vh,96px);margin-top:clamp(36px,6vh,72px)}
.post{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(22px,4vw,72px);align-items:center;
}
.post:nth-child(even) .post__f{order:2}
.post__f{position:relative;overflow:hidden;aspect-ratio:3/2;background:#0A1E2B}
.post__f img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) brightness(.94);
  transition:transform 1.3s var(--e-expo), filter 1.1s var(--e-soft);
}
.post:hover .post__f img{transform:scale(1.04);filter:none}
.post__d{font-size:11px;letter-spacing:.16em;color:var(--paper-faint);font-variant-numeric:tabular-nums}
.sec--paper .post__d{color:rgba(5,18,28,.44)}
.post__t{
  display:block;margin:16px 0 0;
  font-family:var(--font-display);
  font-size:clamp(25px,3vw,48px);line-height:1.1;letter-spacing:-.024em;
  transition:transform .85s var(--e-expo);transform-origin:left center;
}
.post:hover .post__t{transform:translateX(6px)}
.post__x{margin:18px 0 0;max-width:46ch;font-size:14.5px;line-height:1.7;opacity:.62}

/* ── contact ─────────────────────────────────────────────────── */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(34px,6vw,100px);align-items:start}
/* A place's spread carries a row of pictures on the left, so the weight is
   the other way round from the contact page: the gallery takes the larger
   half and the facts keep what they need. Declared here rather than in the
   breakpoint below, which collapses both to one column. */
.ct--media{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.ct__block + .ct__block{margin-top:clamp(30px,4.6vh,52px)}
.ct__k{margin:0 0 12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.44}
html[data-lang="ka"] .ct__k{font-size:12px;letter-spacing:.06em;text-transform:none}
.ct__v{
  margin:0;font-family:var(--font-display);
  font-size:clamp(19px,1.9vw,28px);line-height:1.34;letter-spacing:-.018em;
}
.ct__v a{transition:opacity .45s var(--e-soft)}
.ct__v a:hover{opacity:.62}

.dir{display:flex;flex-direction:column}
.dir__r{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:10px clamp(14px,2.4vw,40px);align-items:baseline;
  padding:clamp(15px,2.2vh,22px) 0;position:relative;
}
.dir__r::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.12}
.dir__r:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.12}
.dir__n{
  font-family:var(--font-display);
  font-size:clamp(17px,1.55vw,24px);line-height:1.2;letter-spacing:-.018em;
}
.dir__c{display:flex;flex-direction:column;gap:5px;text-align:right;font-size:12.5px;line-height:1.4;opacity:.6}
.dir__c a{transition:opacity .45s var(--e-soft)}
.dir__c a:hover{opacity:1}

/* ── inner-page responsive ───────────────────────────────────── */
@media (max-width:1180px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
  .ct{grid-template-columns:1fr}
}
@media (max-width:760px){
  .post{grid-template-columns:1fr;gap:18px}
  .post:nth-child(even) .post__f{order:0}
  .facts{gap:26px 18px}
  .dir__r{grid-template-columns:1fr;gap:6px}
  .dir__c{text-align:left}
  .banner__bg img{opacity:.42}
  .banner--place .banner__bg img{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .js .banner__sub{opacity:1;transform:none}
}


.vg__meta > span{display:block}

/* ── comments ────────────────────────────────────────────────── */
.cmts{list-style:none;margin:clamp(30px,5vh,56px) 0 0;padding:0}
.cmts ol{list-style:none;margin:0;padding:0 0 0 clamp(18px,3vw,46px)}
.cmt{position:relative;padding:clamp(20px,3vh,30px) 0}
.cmt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.12}
.cmt__meta{
  margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);
}
html[data-lang="ka"] .cmt__meta{font-size:12px;letter-spacing:.04em;text-transform:none}
.cmt__who{color:var(--paper)}
.cmt__body{max-width:62ch;font-size:14.5px;line-height:1.72;color:var(--paper-dim)}
.cmt__body p{margin:0}
.cmt__body p + p{margin-top:.9em}
.cmt__reply{
  display:inline-block;margin-top:12px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);
}
.cmt__reply a{transition:color .45s var(--e-soft)}
.cmt__reply a:hover{color:var(--paper)}

.cform{margin-top:clamp(34px,5vh,64px);max-width:640px}
.cform__row,.comment-form-author,.comment-form-email,.comment-form-url{margin:0 0 20px}
.cform label,.comment-form-author label,.comment-form-email label,.comment-form-url label{
  display:block;margin-bottom:8px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);
}
html[data-lang="ka"] .cform label{font-size:12px;letter-spacing:.04em;text-transform:none}
.cform input[type=text],.cform input[type=email],.cform input[type=url],.cform textarea{
  width:100%;padding:14px 16px;
  background:rgba(244,241,236,.06);border:0;border-radius:2px;
  color:var(--paper);font-family:var(--font-text);font-size:14.5px;line-height:1.6;
  transition:background-color .45s var(--e-soft);
}
.cform input:focus,.cform textarea:focus{background:rgba(244,241,236,.1);outline:none}
.cform textarea{resize:vertical;min-height:130px}
.cform .form-submit{margin:0}
.comment-form-cookies-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px}
.comment-form-cookies-consent input{width:auto;margin-top:3px}
.comment-form-cookies-consent label{letter-spacing:.02em;text-transform:none;font-size:12.5px}
.comment-reply-title{margin:0}
.comment-respond .cta{border:0;cursor:pointer}

/* ═════════════════════════════════════════════════════════════
   PLACES — the register
   Nine houses set as a table, not a grid. The photographs are not
   laid out at all: one panel follows the cursor and swaps frames,
   which is how nine pictures of nine different shapes sit together
   without any of them being cropped to suit a layout.
   ═════════════════════════════════════════════════════════════ */
.rg__list{margin-top:clamp(22px,3.4vh,44px)}

.rg__a{
  position:relative;display:grid;align-items:baseline;
  grid-template-columns:clamp(34px,3.4vw,54px) minmax(0,1.24fr) minmax(0,.9fr) minmax(0,.4fr) 26px;
  gap:clamp(14px,2.2vw,44px);
  padding-block:clamp(19px,2.15vw,33px);
}

/* The rule belongs to the row, the way a rule belongs to a table: it is the
   row's own top edge sweeping in, not a decoration parked beside a heading. */
.rg__rule{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(244,241,236,.13);overflow:hidden}
.rg__rule i{
  position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s var(--e-expo);
}
.rg__a:hover .rg__rule i,
.rg__a:focus-visible .rg__rule i{transform:scaleX(1)}

.rg__no{
  font-size:11px;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  color:var(--leaf);
  transform:translate3d(0,-.15em,0);       /* optical, against the display cap height */
}

.rg__id{display:block;min-width:0}
.rg__name{
  display:block;
  font-size:clamp(23px,2.5vw,42px);line-height:1.1;
  letter-spacing:-.008em;
  color:var(--paper-faint);
  transition:color .7s var(--e-soft), letter-spacing .9s var(--e-expo), transform .9s var(--e-expo);
  transform-origin:left center;
}
.rg__a:hover .rg__name,
.rg__a:focus-visible .rg__name{color:var(--paper);letter-spacing:-.03em;transform:translateX(9px)}

.rg__ka{
  display:block;margin-top:9px;
  font-family:var(--font-geo);
  font-size:12.5px;line-height:1.3;letter-spacing:.015em;
  color:rgba(244,241,236,.34);
  transition:color .7s var(--e-soft), transform .9s var(--e-expo);
  transform-origin:left center;
}
.rg__a:hover .rg__ka,
.rg__a:focus-visible .rg__ka{color:var(--paper-dim);transform:translateX(9px)}
html[data-lang="ka"] .rg__ka{
  font-family:var(--font-text);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
}

.rg__meta, .rg__hours{
  font-size:12px;line-height:1.5;letter-spacing:.015em;
  color:rgba(244,241,236,.42);
  transition:color .7s var(--e-soft);
}
.rg__hours{font-variant-numeric:tabular-nums;white-space:nowrap}
.rg__a:hover .rg__meta,
.rg__a:hover .rg__hours{color:var(--paper-dim)}

.rg__go{
  justify-self:end;font-size:15px;line-height:1;
  color:var(--paper);opacity:0;
  transform:translate3d(-9px,0,0);
  transition:opacity .55s var(--e-soft), transform .8s var(--e-expo);
}
.rg__a:hover .rg__go,
.rg__a:focus-visible .rg__go{opacity:1;transform:none}

/* Siblings recede so the row under the cursor is the only one being read. */
.rg__list.is-hot .rg__row{transition:opacity .6s var(--e-soft)}
.rg__list.is-hot .rg__row:not(:hover){opacity:.3}

/* The travelling panel. Fixed, so following the pointer is two numbers and no
   scroll arithmetic. Hidden until a row is entered, and never built at all
   where there is no pointer — see the touch block below. */
.rg__panel{
  --panel-w:clamp(300px,25vw,430px);

  /* One fixed place, every time. This used to be written to the pointer's
     coordinates, so the photograph landed somewhere different on every hover
     and the reader had to find it before they could look at it. The frame and
     everything in it are unchanged — only where it appears is different.

     Centred with left/top plus negative margins rather than a transform, so
     the script keeps transform for the reveal and the two never fight over the
     same property. Half the height is a third of the width, because the frame
     is 3:2. */
  position:fixed;left:50%;top:50%;z-index:3;
  width:var(--panel-w);aspect-ratio:3/2;
  margin:calc(var(--panel-w) / -3) 0 0 calc(var(--panel-w) / -2);
  pointer-events:none;opacity:0;
}
.rg__panel .rg__img{
  position:absolute;inset:0;margin:0;overflow:hidden;
  background:#0A1E2B;
}
.rg__panel .rg__img img{width:100%;height:100%;object-fit:cover;display:block}

/* Aspect ratios vary wildly between venues; the panel is a fixed 3:2 window and
   object-fit does the rest, so a square shot and a panorama both arrive framed
   rather than letterboxed. */
.rg__thumb{display:none}

@media (hover:hover) and (min-width:1025px){
  .rg__panel{display:block}
}
@media (hover:none), (max-width:1024px){
  /* No pointer to follow, so the photograph goes back into the row. */
  .rg__panel{display:none}
  .rg__a{
    grid-template-columns:clamp(30px,5vw,44px) minmax(0,1fr) clamp(88px,22vw,150px);
    grid-template-areas:
      "no  id    thumb"
      ".   meta  thumb"
      ".   hours thumb";
    gap:clamp(8px,2vw,18px) clamp(14px,3vw,26px);
    align-items:start;
  }
  .rg__no{grid-area:no}
  .rg__id{grid-area:id}
  .rg__meta{grid-area:meta}
  .rg__hours{grid-area:hours}
  .rg__go{display:none}
  .rg__thumb{
    grid-area:thumb;display:block;overflow:hidden;
    aspect-ratio:3/2;background:#0A1E2B;align-self:center;
  }
  .rg__thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .rg__list.is-hot .rg__row:not(:hover){opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .rg__panel{display:none}
  .rg__rule i{transform:scaleX(1)}
  .rg__name{color:var(--paper)}
}

/* ═════════════════════════════════════════════════════════════
   CATERING — the rail
   The page pins and the catalogue travels sideways, one cell per
   category: a featured photograph over the category's own detail.
   Individual plates are not scrolled here — six cells read as an
   index, two dozen read as a queue. Paper, like the rest of the
   catering material, with the colour lockup; see .cat__lockup.
   ═════════════════════════════════════════════════════════════ */
.cv1{
  /* One token for the cell width. Six cells rather than nineteen, so each one
     can be large enough for its photograph to be the thing you look at — but a
     pinned section has to fit the viewport, or its lower half animates where
     nobody can see it. Measured at 1440x900: a 4/5 frame at this width made the
     section 1102px against a 900px screen, so the frame is 5/4 instead. That is
     also closer to the source photography, which is near-square (1200x1092), so
     less of each plate is cropped away. */
  --cell-w:clamp(270px,27vw,400px);

  overflow:clip;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,5.6vh,68px);
}
.cv1__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,5vw,80px);align-items:start}
.cv1__h{margin:clamp(18px,2.4vh,30px) 0 0;font-size:clamp(32px,5vw,74px)}
.cv1__num{display:inline-block;font-variant-numeric:tabular-nums}

/* A pinned section taller than the screen animates its lower half where nobody
   can see it, so the aside is trimmed to keep the whole section inside 100svh. */
.cv1 .cat__aside{gap:16px;padding-bottom:0}
.cv1 .cat__aside p{font-size:14px;line-height:1.6;opacity:.6}
.cv1 .cat__logo{height:30px}

.cv1__stage{margin-top:clamp(16px,2.6vh,34px);overflow:hidden}
.cv1__track{
  display:flex;align-items:flex-start;
  gap:clamp(20px,2.6vw,46px);
  padding-inline:var(--gutter);
  will-change:transform;
}

/* ── one category ───────────────────────────────────────────── */
.cv1__cell{margin:0;flex:0 0 var(--cell-w)}
.cv1__cell.is-low{margin-top:clamp(14px,2.2vw,38px)}

.cv1__frame{
  display:block;position:relative;overflow:hidden;aspect-ratio:5/4;
  background:#E6E1DA;box-shadow:inset 0 0 0 1px rgba(5,18,28,.15);
}
.cv1__frame img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

.cv1__catbody{
  display:block;margin-top:clamp(12px,1.2vw,18px);
  padding-top:clamp(10px,1vw,14px);
  border-top:1px solid rgba(5,18,28,.32);
}
.cv1__cardrange{
  display:block;
  font-size:10.5px;letter-spacing:.16em;color:var(--leaf);
  font-variant-numeric:tabular-nums;
}
.cv1__carden{
  display:block;margin-top:clamp(7px,.75vw,11px);
  font-size:clamp(22px,2.15vw,34px);line-height:1.06;letter-spacing:-.024em;
  color:var(--ink);
}
.cv1__cardka{
  display:block;margin-top:8px;
  font-family:var(--font-geo);font-size:13px;line-height:1.3;
  color:rgba(5,18,28,.5);
}
html[data-lang="ka"] .cv1__cardka{
  font-family:var(--font-text);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
}
.cv1__cardn{
  display:block;margin-top:clamp(8px,.9vw,12px);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(5,18,28,.42);
}

/* ── foot readout ───────────────────────────────────────────── */
.cv1__foot{display:flex;align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(16px,2.4vh,30px)}
.cv1__now{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.cv1__now b{font-weight:400;font-size:12.5px;letter-spacing:.02em;color:var(--ink)}
.cv1__now i{font-style:normal;font-family:var(--font-geo);font-size:11.5px;color:rgba(5,18,28,.45)}
.cv1__rule{flex:1;height:1px;background:rgba(5,18,28,.16);position:relative;overflow:hidden}
.cv1__rule i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.cv1__count{
  font-size:11px;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  color:rgba(5,18,28,.44);white-space:nowrap;
}
.cv1__count b{font-weight:400;color:var(--ink)}

/* ── no pin below the desktop breakpoint ──────────────────────
   1180px, the same number the script tests before it builds the pin. They have
   to agree: an un-pinned rail inside overflow:hidden is a rail nobody can
   reach. Below this width it is a native snap-scroller instead, and the
   scrubbed readouts — which have nothing driving them once the pin is gone —
   are not shown. */
@media (max-width:1180px){
  .cv1{
    --cell-w:clamp(260px,38vw,420px);
    min-height:0;display:block;padding-block:clamp(88px,15vh,190px);
  }
  .cv1__head{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
  .cv1__h{font-size:clamp(42px,7.6vw,128px);margin-top:clamp(30px,4.6vh,54px)}
  .cv1 .cat__aside{gap:22px}
  .cv1 .cat__logo{height:34px}

  .cv1__stage{
    margin-top:clamp(36px,6vh,72px);
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .cv1__stage::-webkit-scrollbar{display:none}
  .cv1__track{transform:none!important;padding-right:var(--gutter)}
  .cv1__cell{scroll-snap-align:center}
  .cv1__foot{display:none}
}

@media (max-width:760px){
  /* One category to a screen, so its photograph is not read at thumbnail size. */
  .cv1{--cell-w:76vw}
  .cv1__cell.is-low{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .cv1__track{transform:none!important}
  .cv1__rule i{transform:scaleX(1)}
}