/* ============================================================
   ИХ ГУРЭНТ · Ger Camp — Өвөрхангай
   Нэг нүүр хуудас: дроны бичлэг → гэр дээр дарж дотогш орно.
   "Warm steppe minimalism" — Cormorant Garamond + Manrope.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#F4EFE6;
  --paper-2:#EBE3D4;
  --paper-3:#E3D9C6;
  --ink:#23201B;
  --ink-soft:#3B362D;
  --muted:#8A8170;
  --hair:#CBC0AC;
  --hair-soft:#DBD2C0;
  --accent:#9C5A33;
  --accent-deep:#824327;
  --olive:#5A4A32;
  --gold:#C39A5E;

  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);

  --pad:clamp(1.25rem,5vw,4.5rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---------- Type primitives ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.85em;
  font-size:.7rem; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); flex:none; }
.eyebrow--bare::before{ display:none; }

h1,h2,h3,.serif{ font-family:var(--serif); font-weight:500; line-height:1.04; }
.tnum{ font-variant-numeric:tabular-nums; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2.2em; border-radius:2px; transition:all .35s var(--ease); white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn--solid{ background:var(--accent); color:var(--paper); }
.btn--solid:hover{ background:var(--accent-deep); }
.btn--full{ width:100%; }

/* ---------- glow / shine on interactive elements ---------- */
.btn, .iv-menu-btn, .iv-intro__skip{ position:relative; overflow:hidden; }
.btn::after, .iv-menu-btn::after, .iv-intro__skip::after{ content:""; position:absolute; top:0; bottom:0; left:-145%;
  width:55%; pointer-events:none; transform:skewX(-20deg); transition:left .7s var(--ease);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); }
.btn:hover::after, .iv-menu-btn:hover::after, .iv-intro__skip:hover::after{ left:155%; }
.btn--solid, .iv-menu-btn{ animation:ctaGlow 3.6s ease-in-out infinite; }
.btn--solid:hover{ box-shadow:0 10px 30px -10px rgba(156,90,51,.6); }
@keyframes ctaGlow{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(156,90,51,0)); } 50%{ filter:drop-shadow(0 3px 12px rgba(156,90,51,.45)); } }

/* language toggle */
.lang{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.12em; }
.lang button{ padding:.3em .35em; opacity:.5; transition:opacity .3s; color:inherit; }
.lang button.on{ opacity:1; }
.lang span{ opacity:.35; margin:0 .15em; }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:100; overflow:hidden; background:var(--ink);
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; }
/* КОМПЬЮТЕР / өргөн дэлгэц: бичлэг бүтэн дэлгэцийг ДҮҮРГЭНЭ (энгийн, full-screen) */
.loader__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* брэнд бичиг зөвхөн гар утсан дээр (доорх @media) — desktop дээр энгийн бичлэг */
.loader__mark{ display:none; }
.loader__brand{ font-family:var(--serif); font-weight:500; letter-spacing:.06em; line-height:1;
  font-size:clamp(2rem,9vw,3.1rem);
  background:linear-gradient(100deg,#D3B070,#FCF3DA 50%,#CFAA64);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 10px rgba(255,245,216,.25)); }
.loader__sub{ font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(244,239,230,.6); }
@keyframes loadMark{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* ============================================================
   LANDING STAGE
   ============================================================ */
.stage{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  color:var(--paper); display:grid; justify-items:center; align-items:start; isolation:isolate;
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
body.interior-open .stage{ transform:scale(1.05); filter:brightness(.5); }
.bg-video,.bg-still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.06) contrast(1.02); }
.bg-video{ animation:kb 32s ease-out both; }
@keyframes kb{ from{ transform:scale(1.08) } to{ transform:scale(1) } }
.bg-still{ display:none; }

.frames__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.34) 0%, rgba(20,17,13,0) 20%, rgba(20,17,13,0) 66%, rgba(20,17,13,.58) 100%); }
.frames__grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* top bar: logo + lang */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.5vw,1.9rem) var(--pad); }
.topmark{ height:clamp(58px,8vw,104px); width:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.5)); }
.topbar__right{ display:flex; align-items:center; gap:clamp(.7rem,2.5vw,1.3rem); }
.topbook{ display:inline-flex; align-items:center; font-size:.66rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); padding:.72em 1.25em; border-radius:2px;
  border:1px solid rgba(244,239,230,.55); background:rgba(20,17,13,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  text-shadow:0 1px 10px rgba(20,17,13,.6); transition:all .35s var(--ease); }
.topbook:hover{ background:var(--accent); border-color:var(--accent); }
@media (max-width:480px){ .topbook{ padding:.6em 1em; letter-spacing:.14em; } }

/* brand — нүүрний дээд хэсэгт */
.brand{ position:relative; z-index:10; text-align:center; padding-inline:var(--pad);
  margin-top:clamp(4rem,18vh,12rem);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.brand.in{ opacity:1; transform:none; }
/* дээд талын үүлэн хээ — гарчгийг тэгш хүрээлнэ */
.brand::before{ content:""; display:block; width:158px; height:34px; margin:0 auto 1.4rem;
  background:var(--gold); opacity:.95; transform:scaleY(-1);
  -webkit-mask:var(--orn-cloud) center/contain no-repeat; mask:var(--orn-cloud) center/contain no-repeat;
  filter:drop-shadow(0 1px 12px rgba(20,17,13,.55)); }
.brand .eyebrow{ color:rgba(244,239,230,.95); text-shadow:0 1px 16px rgba(20,17,13,.7); }
.brand .eyebrow::before{ background:var(--gold); box-shadow:0 0 10px rgba(20,17,13,.5); }
.brand__title{ font-family:var(--serif); font-weight:500; letter-spacing:.04em;
  font-size:clamp(3.4rem,13vw,11.5rem); line-height:.9; margin:.16em 0 .04em;
  position:relative; isolation:isolate;
  background:linear-gradient(100deg, #D3B070 0%, #ECD49C 26%, #FCF3DA 46%, #FFFFFF 50%, #FCF3DA 54%, #ECD49C 74%, #CFAA64 100%);
  background-size:230% 100%; background-position:135% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(20,17,13,.42)) drop-shadow(0 0 20px rgba(255,245,216,.45));
  animation:shine 2.8s ease-in-out .25s infinite; }
/* (текстийн ард байсан бор/алтан radial толбыг хассан — цэвэр, гэгээлэг харагдана) */
.brand__title::after{ content:none; }
@keyframes shine{ 0%{ background-position:135% 0 } 55%,100%{ background-position:-45% 0 } }
@keyframes glowpulse{ 0%,100%{ opacity:.6 } 50%{ opacity:.95 } }
.brand__script{ font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2.6rem); color:var(--gold); letter-spacing:.04em;
  text-shadow:0 1px 18px rgba(20,17,13,.65); }
.brand__tag{ font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,2vw,1.55rem); color:rgba(244,239,230,.96);
  max-width:32ch; margin-top:1rem; line-height:1.45; text-shadow:0 1px 16px rgba(20,17,13,.7); }
.brand__hint{ margin-top:1.8rem; display:inline-flex; align-items:center; gap:.7rem;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,239,230,.92);
  text-shadow:0 1px 14px rgba(20,17,13,.75); }
.brand__hint i{ width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(195,154,94,.25); animation:hintpulse 2.2s var(--ease) infinite; }
@keyframes hintpulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(195,154,94,.25) } 50%{ box-shadow:0 0 0 9px rgba(195,154,94,0) } }

/* meta contact bar */
.meta{ position:absolute; left:0; right:0; bottom:0; z-index:15;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.4rem;
  padding:1.2rem var(--pad) clamp(1.2rem,3vh,1.9rem);
  opacity:0; transition:opacity 1.1s var(--ease) .25s; }
.meta.in{ opacity:1; }
.meta__place{ font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,239,230,.78); display:inline-flex; align-items:center; gap:.7em; }
.meta__place::before{ content:""; width:22px; height:1px; background:var(--gold); }
.meta__contact{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.meta__contact a{ position:relative; font-size:.74rem; letter-spacing:.1em; color:rgba(244,239,230,.85); }
.meta__contact a::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.meta__contact a:hover::after{ transform:scaleX(1); }

/* replay */
.replay{ position:absolute; top:auto; bottom:clamp(4.4rem,10vh,6rem); right:var(--pad); z-index:16;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(244,239,230,.4);
  display:grid; place-items:center; color:var(--paper); transition:all .35s var(--ease); }
.replay:hover{ background:rgba(244,239,230,.14); transform:rotate(-40deg); }
.replay svg{ width:18px; height:18px; }

/* hotspots over the gers */
.hotspots{ position:absolute; inset:0; z-index:12; pointer-events:none; }
.hotspot{ position:absolute; transform:translate(-50%,-50%); width:44px; height:44px;
  display:grid; place-items:center; pointer-events:auto; opacity:0; }
.hotspots.show .hotspot{ animation:hsIn .7s var(--ease) forwards; }
.hotspot__dot{ position:relative; z-index:2; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--accent);
  box-shadow:0 0 0 6px rgba(20,17,13,.18), 0 4px 14px rgba(0,0,0,.55);
  transition:transform .4s var(--ease), border-color .4s var(--ease); }
.hotspot:hover .hotspot__dot{ border-color:var(--gold); }
.hotspot__ring{ position:absolute; inset:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  border:2px solid var(--paper); opacity:.9; }
.hotspots.show .hotspot__ring{ animation:hsPulse 2.8s var(--ease) infinite; }
.hotspot__label{ position:absolute; left:50%; top:calc(100% - 2px); transform:translateX(-50%);
  white-space:nowrap; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:rgba(20,17,13,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.42em .8em; border-radius:2px; opacity:0; transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none; }
.hotspot:hover .hotspot__dot{ transform:scale(1.3); }
.hotspot:hover .hotspot__label{ opacity:1; transform:translateX(-50%) translateY(3px); }
@keyframes hsPulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(3); opacity:0 } }
@keyframes hsIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.5) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }

/* scroll / enter cue */
.enter-cue{ position:absolute; left:50%; bottom:clamp(3.4rem,8vh,5rem); transform:translateX(-50%);
  z-index:14; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(244,239,230,.82);
  opacity:0; transition:opacity 1s var(--ease) .35s; cursor:pointer; }
.enter-cue.in{ opacity:1; }
.enter-cue span{ font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.enter-cue svg{ width:22px; height:22px; animation:cuebounce 1.9s var(--ease) infinite; }
.enter-cue:hover svg{ color:var(--gold); }
@keyframes cuebounce{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(7px); opacity:1 } }

/* ============================================================
   INTERIOR OVERLAY (гэрийн дотор)
   ============================================================ */
.interior{ position:fixed; inset:0; z-index:90; background:var(--paper); color:var(--ink);
  visibility:hidden; opacity:0; transition:opacity .85s var(--ease), visibility .85s; }
body.interior-open .interior{ visibility:visible; opacity:1; }
.interior__close{ position:fixed; top:1.4rem; right:1.4rem; z-index:96; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--hair); background:rgba(244,239,230,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; transition:all .35s var(--ease); }
.interior__close:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.interior__close svg{ width:18px; height:18px; }

/* lang toggle inside interior (top-left) */
.iv-lang{ position:fixed; top:1.5rem; left:1.5rem; z-index:96; color:var(--ink); }

/* intro video — explore зураг руу зөөлөн уусна */
.iv-intro{ position:absolute; inset:0; z-index:2; background:var(--ink); overflow:hidden;
  transition:opacity 1.1s var(--ease), visibility 1.1s, transform 1.1s var(--ease); }
.iv-intro.hide{ opacity:0; visibility:hidden; transform:scale(1.07); }
.iv-intro__video{ width:100%; height:100%; object-fit:cover; }
.iv-intro__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.iv-intro.img-mode .iv-intro__video{ display:none; }
.iv-intro.img-mode .iv-intro__img{ opacity:1; animation:introkb 6s ease-out both; }
@keyframes introkb{ from{ transform:scale(1.12) } to{ transform:scale(1) } }
.iv-intro__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.5),rgba(20,17,13,0) 30%,rgba(20,17,13,.1) 60%,rgba(20,17,13,.8)); }
.iv-intro__cap{ position:absolute; left:clamp(1.5rem,6vw,5rem); bottom:clamp(5rem,12vh,8rem); z-index:2; color:var(--paper); }
.iv-intro__cap .eyebrow{ color:rgba(244,239,230,.8); }
.iv-intro__cap .eyebrow::before{ background:var(--gold); }
.iv-intro__cap h2{ font-size:clamp(2.4rem,6vw,5rem); margin-top:.5rem; max-width:14ch; }
.iv-intro__skip{ position:absolute; right:clamp(1.5rem,6vw,5rem); bottom:clamp(2rem,6vh,4rem); z-index:3;
  color:var(--paper); display:inline-flex; align-items:center; gap:.7em;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(244,239,230,.45); padding:.95em 1.7em; border-radius:2px; transition:all .35s var(--ease); }
.iv-intro__skip:hover{ background:var(--paper); color:var(--ink); }
.iv-intro__skip span{ transition:transform .4s var(--ease); }
.iv-intro__skip:hover span{ transform:translateX(5px); }

/* explore: 3 columns */
.iv-explore{ position:absolute; inset:0; z-index:1; display:grid;
  grid-template-columns:clamp(100px,12vw,156px) 1fr clamp(330px,30vw,470px); background:var(--paper); }
@media (max-width:1024px){ .iv-explore{ grid-template-columns:88px 1fr; } }
@media (max-width:680px){ .iv-explore{ grid-template-columns:1fr; grid-template-rows:auto minmax(34svh,42svh) 1fr; } }

/* LEFT switcher */
.iv-switch{ border-right:1px solid var(--hair); display:flex; flex-direction:column;
  padding:5rem 0 1.5rem; gap:.4rem; overflow-y:auto; }
@media (max-width:680px){ .iv-switch{ flex-direction:row; border-right:0; border-bottom:1px solid var(--hair);
  padding:1rem; overflow-x:auto; } }
.iv-tab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:.8rem .4rem; opacity:.5; transition:opacity .4s var(--ease); }
.iv-tab.on{ opacity:1; }
.iv-tab__thumb{ width:clamp(56px,5vw,78px); aspect-ratio:1; object-fit:cover; border-radius:3px;
  border:1px solid var(--hair); transition:border-color .4s, transform .5s var(--ease); background:var(--paper-3); }
.iv-tab.on .iv-tab__thumb{ border-color:var(--accent); }
.iv-tab:hover .iv-tab__thumb{ transform:translateY(-3px); }
.iv-tab__n{ font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; text-align:center; max-width:10ch; line-height:1.3; }

/* MIDDLE gallery */
.iv-main{ position:relative; overflow:hidden; background:var(--paper-2); }
.iv-gallery{ position:absolute; inset:0; }
.iv-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.3s var(--ease); will-change:opacity, transform; }
.iv-photo.show{ opacity:1; animation:ivkb 9s ease-out both; }
@keyframes ivkb{ from{ transform:scale(1.09) } to{ transform:scale(1) } }
@keyframes ivFade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.iv-gallery__sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,13,.16),transparent 22%,transparent 68%,rgba(20,17,13,.34)); }
.iv-gnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px;
  border-radius:50%; background:rgba(244,239,230,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--ink); transition:all .35s var(--ease); }
.iv-gnav:hover{ background:var(--paper); }
.iv-gnav svg{ width:20px; height:20px; }
.iv-gnav--prev{ left:1.4rem; } .iv-gnav--next{ right:1.4rem; }
.iv-gnav--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.iv-gnav--next:hover{ transform:translateY(-50%) translateX(3px); }
.iv-angles{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; }
.iv-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--paper); background:transparent;
  transition:background .3s, transform .3s; cursor:pointer; }
.iv-dot.on{ background:var(--paper); transform:scale(1.25); }
.iv-count{ position:absolute; right:1.6rem; bottom:1.5rem; z-index:3; color:var(--paper);
  font-size:.72rem; letter-spacing:.2em; text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* TOP: гэрнүүдийг солих */
.iv-gerbar{ position:absolute; top:1.2rem; left:50%; transform:translateX(-50%); z-index:7;
  display:flex; gap:.2rem; padding:.32rem; border-radius:4px; max-width:calc(100% - 2.4rem);
  background:rgba(244,239,230,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 14px 36px -20px rgba(35,32,27,.6); overflow-x:auto; scrollbar-width:none;
  border:1px solid var(--hair-soft); }
.iv-gerbar::-webkit-scrollbar{ display:none; }
.iv-gertab{ flex:none; padding:.55em 1.05em; border-radius:2px; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease); }
.iv-gertab.on{ color:var(--paper); background:var(--accent); }
.iv-gertab:not(.on):hover{ color:var(--ink); background:rgba(35,32,27,.06); }
@media (max-width:680px){ .iv-gerbar{ top:.8rem; max-width:calc(100% - 1rem); } }

/* RIGHT info + booking */
.iv-side{ border-left:1px solid var(--hair); display:flex; flex-direction:column;
  padding:4.8rem clamp(1.4rem,2.2vw,2.4rem) 1.6rem; overflow-y:auto; overscroll-behavior:contain; }
@media (max-width:1024px){ .iv-side{ position:absolute; top:0; right:0; height:100%; width:min(450px,88vw);
  background:var(--paper); box-shadow:-30px 0 80px -50px rgba(35,32,27,.6); transform:translateX(100%);
  transition:transform .55s var(--ease); z-index:5; } body.iv-side-open .iv-side{ transform:none; } }
@media (max-width:680px){ .iv-side{ position:relative; width:100%; transform:none; box-shadow:none;
  border-left:0; border-top:1px solid var(--hair); padding:1.4rem 1.4rem 1.6rem; min-height:0; } }
.iv-side__head{ padding-bottom:1.5rem; border-bottom:1px solid var(--hair); }
.iv-side__head .eyebrow::before{ background:var(--accent); }
.iv-side__brand{ font-size:clamp(1.9rem,3vw,2.7rem); margin-top:.5rem; }
.iv-info{ padding-block:1.7rem; flex:1; }
.iv-info__sub{ font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.iv-info__title{ font-size:clamp(1.7rem,2.6vw,2.4rem); margin:.5rem 0 1rem; }
.iv-info__desc{ color:var(--ink-soft); line-height:1.8; margin-bottom:1.7rem; }
.iv-info__lbl{ font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:1rem; }
.iv-adv{ list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.iv-adv li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.iv-adv li::before{ content:""; flex:none; width:7px; height:7px; margin-top:.55em; border-radius:50%; border:1.5px solid var(--accent); }

/* booking */
.iv-book{ border-top:1px solid var(--hair); padding-top:1.4rem; }
.iv-book__price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:1rem; }
.iv-book__price b{ font-family:var(--serif); font-size:1.8rem; color:var(--accent); }
.iv-book__price span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.iv-book__rows{ display:grid; grid-template-columns:1fr 1fr; border:1px solid transparent;
  border-radius:3px; overflow:hidden; max-height:0; opacity:0; margin:0;
  transition:max-height .55s var(--ease), opacity .45s var(--ease), margin .45s var(--ease), border-color .45s var(--ease); }
.iv-book.open .iv-book__rows{ max-height:230px; opacity:1; margin-bottom:1rem; border-color:var(--hair); }
.iv-bk{ display:flex; flex-direction:column; gap:.35rem; padding:.8rem 1rem; }
.iv-bk + .iv-bk{ border-left:1px solid var(--hair); }
.iv-bk--wide{ grid-column:1 / -1; border-top:1px solid var(--hair); }
.iv-bk > span{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.iv-bk input,.iv-bk select{ font-family:var(--serif); font-size:1.05rem; color:var(--ink);
  background:transparent; border:0; outline:none; width:100%; -webkit-appearance:none; appearance:none; }
.iv-bk input::-webkit-calendar-picker-indicator{ filter:invert(.4) sepia(1) saturate(3) hue-rotate(340deg); opacity:.55; cursor:pointer; }
.iv-book__hint{ font-size:.78rem; color:var(--muted); margin-top:.8rem; text-align:center; }
.iv-book__hint.ok{ color:var(--accent); }

/* open-menu button (bar gers) */
.iv-menu-btn{ display:flex; align-items:center; justify-content:space-between; gap:.7em; width:100%;
  margin-top:1.3rem; padding:.95em 1.2em; border:1px solid var(--accent); border-radius:3px;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  transition:background .35s var(--ease), color .35s var(--ease); }
.iv-menu-btn:hover{ background:var(--accent); color:var(--paper); }
.iv-menu-btn svg{ width:16px; height:16px; flex:none; transition:transform .4s var(--ease); }
.iv-menu-btn:hover svg{ transform:translateX(4px); }
.iv-menu-btn[hidden]{ display:none !important; }

/* ============================================================
   DIGITAL BAR MENU
   ============================================================ */
.menu{ position:absolute; inset:0; z-index:8; display:grid; grid-template-columns:42% 1fr;
  background:var(--paper); visibility:hidden; opacity:0; transform:scale(1.015);
  transition:opacity .6s var(--ease), visibility .6s, transform .6s var(--ease); }
.menu.open{ visibility:visible; opacity:1; transform:none; }
@media (max-width:860px){ .menu{ grid-template-columns:1fr; grid-template-rows:28vh 1fr; } }

.menu__media{ position:relative; overflow:hidden; min-width:0; background:var(--paper-3); }
.menu__media img{ width:100%; height:100%; object-fit:cover; animation:introkb 20s ease-out both; }
.menu__media-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,.38), rgba(20,17,13,0) 34%, rgba(20,17,13,.74)); }
.menu__media-cap{ position:absolute; left:clamp(1.4rem,3vw,2.6rem); bottom:clamp(1.6rem,4vh,2.6rem); z-index:2; color:var(--paper); }
.menu__media-cap .eyebrow{ color:rgba(244,239,230,.88); }
.menu__media-cap .eyebrow::before{ background:var(--gold); }
.menu__title{ font-size:clamp(2.2rem,4vw,3.4rem); margin-top:.4rem; color:var(--paper); }
.menu__note{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:rgba(244,239,230,.85); margin-top:.5rem; max-width:24ch; }

.menu__panel{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0;
  padding:clamp(1.6rem,3vw,2.8rem) clamp(1.4rem,3vw,2.6rem) 0; }
.menu__close{ position:absolute; top:1.3rem; right:1.3rem; z-index:3; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--hair); background:var(--paper); display:grid; place-items:center;
  transition:all .35s var(--ease); }
.menu__close:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.menu__close svg{ width:17px; height:17px; }

.menu__cats{ display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; padding-bottom:1.1rem;
  border-bottom:1px solid var(--hair); margin-right:3.4rem; }
.menu__cats::-webkit-scrollbar{ display:none; }
.menu__cat{ flex:none; padding:.5em .9em; border-radius:2px; font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease); }
.menu__cat.on{ color:var(--paper); background:var(--accent); }
.menu__cat:not(.on):hover{ color:var(--ink); background:rgba(35,32,27,.05); }

.menu__scroll{ flex:1; overflow-y:auto; min-height:0; min-width:0; padding:.9rem 0 1.8rem; }
.menu__list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(178px,1fr)); gap:1.1rem; min-width:0; }
.menu__card{ position:relative; border-radius:5px; overflow:hidden; background:var(--paper);
  border:1px solid var(--hair); animation:ivFade .55s var(--ease) both;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.menu__card:hover{ transform:translateY(-5px); box-shadow:0 24px 48px -28px rgba(35,32,27,.55); }
.menu__card__art{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-3); }
.menu__card__art img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.menu__card:hover .menu__card__art img{ transform:scale(1.07); }
.menu__card__art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,17,13,0) 50%, rgba(20,17,13,.66)); }
.menu__card__price{ position:absolute; left:.75rem; bottom:.55rem; z-index:2; color:var(--paper);
  font-family:var(--serif); font-size:1.2rem; font-variant-numeric:tabular-nums; text-shadow:0 1px 8px rgba(0,0,0,.65); }
.menu__card__body{ padding:.85rem .95rem 1rem; }
.menu__card__name{ font-family:var(--serif); font-size:1.18rem; line-height:1.12; color:var(--ink); }
.menu__card__desc{ font-size:.76rem; color:var(--muted); margin-top:.3rem; line-height:1.45; }

/* mobile: open side panel */
.iv-side-toggle{ display:none; position:absolute; right:1.2rem; bottom:1.3rem; z-index:6; }
@media (max-width:1024px){ .iv-side-toggle{ display:inline-flex; } }
@media (max-width:680px){ .iv-side-toggle{ display:none; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg-video{ display:none; animation:none; }
  .bg-still{ display:block; }
  .brand{ opacity:1; transform:none; transition:none; }
  .meta{ opacity:1; transition:none; }
  .hotspots.show .hotspot{ animation:none; opacity:1; }
  .hotspots.show .hotspot__ring,.brand__hint i{ animation:none; }
  .loader__logo{ animation:none; }
  .brand__title{ animation:none; background-position:0 0; }
  .brand__title::before,.brand__title::after{ animation:none; }
  .enter-cue svg{ animation:none; }
  .btn--solid,.iv-menu-btn{ animation:none; }
  .btn::after,.iv-menu-btn::after,.iv-intro__skip::after{ display:none; }
  .iv-photo{ transition:opacity .2s linear; }
}

/* ============================================================
   МОНГОЛ ХЭЭ УГАЛЗ — өлзий · эвэр угалз · алхан хээ
   ============================================================ */
:root{
  --orn-cloud:url("../assets/hee/cloud.png");   /* эвэр/үүлэн угалз — flourish, divider */
  --orn-ulzii:url("../assets/hee/ulzii.png");    /* өлзий — watermark */
  --orn-frame:url("../assets/hee/frame.png");    /* дугуй хүрээ — medallion */
  --orn-corner:url("../assets/hee/ulzii-corner.png"); /* булангийн угалз */
}
/* нүүрний brand доор — үүлэн хээ (хар дэвсгэрт алтаар) */
.brand__orn{ display:block; width:132px; height:34px; margin:1.05rem auto .1rem;
  background:var(--gold); opacity:.95;
  -webkit-mask:var(--orn-cloud) center/contain no-repeat; mask:var(--orn-cloud) center/contain no-repeat;
  filter:drop-shadow(0 1px 10px rgba(20,17,13,.5)); }

/* гэрийн дотор · мэдээллийн самбар — өлзий watermark + үүлэн хээ хуваагч */
.iv-side{ position:relative; isolation:isolate; }
/* цулгай самбарыг битүү өлзий хээ-текстайлаар дүүргэв */
.iv-side::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--gold); opacity:.18;
  -webkit-mask:var(--orn-ulzii) top left/64px auto repeat; mask:var(--orn-ulzii) top left/64px auto repeat; }
.iv-side::after{ content:""; position:absolute; right:8px; bottom:16px; width:184px; height:184px; z-index:-1;
  background:var(--gold); opacity:.17; pointer-events:none;
  -webkit-mask:var(--orn-ulzii) center/contain no-repeat; mask:var(--orn-ulzii) center/contain no-repeat; }
.iv-side__head{ position:relative; border-bottom:0; }
.iv-side__head::after{ content:""; display:block; height:30px; margin-top:1.1rem;
  background:var(--gold); opacity:.82;
  -webkit-mask:var(--orn-cloud) center/contain no-repeat; mask:var(--orn-cloud) center/contain no-repeat; }

/* барны цэс — өлзий watermark */
.menu__panel{ position:relative; isolation:isolate; }
.menu__panel::after{ content:""; position:absolute; right:16px; bottom:16px; width:200px; height:200px; z-index:-1;
  background:var(--gold); opacity:.16; pointer-events:none;
  -webkit-mask:var(--orn-ulzii) center/contain no-repeat; mask:var(--orn-ulzii) center/contain no-repeat; }

@media (prefers-reduced-motion:reduce){ .brand__orn{ filter:none; } }

/* ============================================================
   ГАР УТАСНЫ VIEWPORT ЗАСВАР — svh ашиглаж, хөтчийн самбар
   нуугдахад гэрийн дотор / барны цэс доороо тасрахгүй болгов.
   ============================================================ */
.interior{ height:100vh; height:100svh; bottom:auto; }
/* grid/flex доторх агуулга viewport-оос хэтрэн "blowout" хийхгүй */
.iv-explore > *{ min-width:0; }

@media (max-width:860px){
  /* барны цэс — багтаамжтай, доод аюулгүй зайтай */
  .menu{ grid-template-rows:24svh 1fr; }
  .menu__panel{ min-height:0; padding-bottom:0; }
  .menu__scroll{ padding-bottom:calc(2.2rem + env(safe-area-inset-bottom,0px)); }
}

/* ============================================================
   ★ ГАР УТАС (≤680px) — гол хэвлэл. Энэ сайт утсаар л ажиллана.
   ============================================================ */
@media (max-width:680px){

  /* ---------- LOADER (зөвхөн утас): хэвтээ бичлэгийг тайралгүй БҮТНЭЭР ----------
     Утасны босоо дэлгэцэд full-screen cover хийвэл гол хэсэг нь л харагдана.
     Тиймээс бичлэгийг бүтэн 16:9 хавтан болгож төвд тавьж, доор брэнд бичиг гаргана.
     (Компьютер дээр энэ хамаарахгүй — дээрх үндсэн дүрмээр full-screen тоглоно.) */
  .loader{ display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(1.3rem,4.5vh,2.4rem); padding:var(--pad);
    background:radial-gradient(125% 82% at 50% 36%, #2e2920 0%, var(--ink) 64%); }
  .loader__video{ position:static; inset:auto; width:100%; max-width:92vw; aspect-ratio:16/9; height:auto;
    object-fit:cover; background:#15120e; border-radius:6px; border:1px solid rgba(195,154,94,.22);
    box-shadow:0 36px 90px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.45); }
  .loader__mark{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
    animation:loadMark 1s var(--ease) .12s both; }

  /* ---------- НҮҮР: доод хэсгийн давхцал бүрэн арилгав ---------- */
  /* Доод "Дотогш орох" cue-г утсан дээр нуув — брэнд доорх "Гэр дээр дарж
     дотогшоо орно" зөвлөмж + дэлгэц даран орох нь хангалттай. Ингэснээр
     холбоо барих самбартай ямар ч өргөнд давхцахгүй, доод хэсэг цэвэрхэн. */
  .enter-cue{ display:none; }
  /* нүүрэнд hero бичлэг нэмбэл л replay харагдана — холбоо барихаас дээш */
  .replay{ bottom:calc(7.2rem + env(safe-area-inset-bottom,0px)); width:38px; height:38px; }
  .replay svg{ width:16px; height:16px; }
  /* брэнд доорх "орох" зөвлөмжийг арай тодруулж, дарагдах мэдрэмж өгөв */
  .brand__hint{ font-size:.62rem; }

  /* холбоо барих — цэвэр, төвлөрсөн, уншихад тод (өөрийн scrim-тэй) */
  .meta{ flex-direction:column; align-items:center; text-align:center; gap:.5rem;
    padding:1.2rem var(--pad) calc(1rem + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg, rgba(20,17,13,0) 0%, rgba(20,17,13,.5) 55%, rgba(20,17,13,.72) 100%); }
  .meta__place{ font-size:.58rem; letter-spacing:.2em; color:rgba(244,239,230,.82); }
  .meta__place::before{ display:none; }
  .meta__contact{ justify-content:center; gap:.45rem 1.15rem; }
  .meta__contact a{ font-size:.78rem; letter-spacing:.03em; color:rgba(244,239,230,.9); }

  /* брэнд — доод хэсэгт зай гаргахын тулд бага зэрэг дээш */
  .brand{ margin-top:clamp(3.2rem,12vh,7rem); }
  .brand__tag{ font-size:1.02rem; max-width:26ch; margin-top:.85rem; }
  .brand__hint{ margin-top:1.4rem; }

  /* ---------- ГЭРИЙН ДОТОР: галерей + удирдлага цэгцлэв ---------- */
  /* галерейд илүү өндөр, мэдээлэлд гүйх зай */
  .iv-explore{ grid-template-rows:auto minmax(40svh,46svh) 1fr; }

  /* секц табууд (thumbnails) — нягт; баруун дээд × товчинд зай үлдээв */
  .iv-switch{ padding:.85rem 3.9rem .85rem .9rem; gap:.45rem; }
  .iv-tab{ padding:.3rem .2rem; gap:.35rem; }
  .iv-tab__thumb{ width:50px; }
  .iv-tab__n{ font-size:.53rem; max-width:9ch; }

  /* гэр солих самбар — товчхон, тод */
  .iv-gertab{ padding:.5em .85em; font-size:.62rem; }

  /* галерейн сум — жижиг, нарийхан, зургийг бага халхална */
  .iv-gnav{ width:38px; height:38px; background:rgba(244,239,230,.62);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .iv-gnav svg{ width:16px; height:16px; }
  .iv-gnav--prev{ left:.6rem; } .iv-gnav--next{ right:.6rem; }
  .iv-count{ right:.9rem; bottom:.9rem; font-size:.64rem; letter-spacing:.14em; }
  .iv-angles{ bottom:.9rem; gap:.4rem; }
  .iv-dot{ width:7px; height:7px; }

  /* мэдээллийн самбар — нягт, доод аюулгүй зай */
  .iv-side{ padding:1.3rem 1.25rem calc(1.8rem + env(safe-area-inset-bottom,0px)); }
  .iv-side__brand{ font-size:1.85rem; }
  .iv-info{ padding-block:1.3rem; }
  .iv-info__title{ font-size:1.55rem; }
  .iv-adv li{ font-size:.9rem; }

  /* ---------- БАРНЫ ЦЭС: картууд жижиг, 2 багана, хэтрэлтгүй ---------- */
  .menu{ grid-template-rows:21svh 1fr; }
  .menu__panel{ padding-left:1.15rem; padding-right:1.15rem; }
  .menu__cats{ margin-right:3rem; }
  .menu__cat{ font-size:.66rem; padding:.5em .8em; }
  .menu__list{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; }
  .menu__card__price{ font-size:1rem; left:.6rem; bottom:.45rem; }
  .menu__card__body{ padding:.6rem .68rem .75rem; }
  .menu__card__name{ font-size:.94rem; line-height:1.1; }
  .menu__card__desc{ font-size:.68rem; margin-top:.22rem; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ---------- Маш жижиг утас (≤380px) ---------- */
@media (max-width:380px){
  /* "ИХ ГҮРЭНТ" нэг мөрөнд цэвэрхэн багтана (хоёр мөр болж тасрахгүй) */
  .brand__title{ font-size:clamp(2.9rem,12.6vw,3.3rem); }
  .menu__list{ gap:.55rem; }
  .menu__card__name{ font-size:.88rem; }
  .menu__card__desc{ -webkit-line-clamp:2; }
  .meta__contact a{ font-size:.74rem; }
  .iv-tab__thumb{ width:46px; }
}