/* Урилгын загвар. Бүх дүрэм .inv дотор хязгаарлагдана — хост хуудас руу алдагдахгүй.
   Өнгө/фонт нь root дээрх CSS хувьсагчаар ирнэ (renderer.js → applyTheme).
   Байршлын шилжилт @container (inv) ашиглана — preview/thumb хүрээ өөрийн өргөнөөр зохицоно. */

.inv {
  --radius: 16px;
  /* 1cqi-ийн нөөц: container query нэгжийг дэмждэггүй хөтөч (iOS/Safari 15) cqi-тэй мөрийг бүхэлд нь хаядаг
     тул cqi мөр бүрийн өмнө calc(var(--cq1) * N) нөөц мөр байна. Нийтийн хуудас бүтэн өргөнтэй → 1vw. */
  --cq1: 1vw;
  position: relative;
  display: block;
  color: var(--c-text, #222);
  background: var(--c-bg, #fff);
  font-family: var(--f-body, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: lining-nums;
  line-height: 1.7;
  text-align: center;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.inv *, .inv *::before, .inv *::after { box-sizing: border-box; }
.inv :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ol, ul, li, fieldset, legend, form, dl, dd) {
  margin: 0; padding: 0; border: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; background: none;
}
.inv :where(ol, ul) { list-style: none; }
.inv :where(img, svg, iframe, video) { display: block; max-width: 100%; }
.inv :where(img) { height: auto; border: 0; }
.inv :where(a) { color: inherit; }
.inv :where(button) {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: none; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; min-width: 0; width: auto; height: auto;
}
.inv :where(input, textarea, select) { margin: 0; font: inherit; letter-spacing: normal; color: inherit; }
.inv [hidden] { display: none !important; }

.inv-page {
  position: relative;
  z-index: 0;
  container: inv / inline-size;
  overflow-x: clip;
}
.inv--pattern .inv-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--c-accent);
  opacity: .07;
  -webkit-mask: var(--pat) 0 0 / 150px repeat;
  mask: var(--pat) 0 0 / 150px repeat;
}

.inv-orn { color: var(--c-accent); line-height: 0; }
.inv-orn svg { width: 100%; height: auto; overflow: visible; }
.inv-font-script { font-family: var(--f-script); font-weight: 400; }
.inv-font-display { font-family: var(--f-display); font-weight: 600; letter-spacing: .005em; }
.inv-ico { width: 22px; height: 22px; flex: none; }
.inv-ico--sm { width: 15px; height: 15px; }

/* ================================================================ HERO */
.inv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--c-hero-text);
  background: var(--hero-bg);
}
.inv--preview .inv-hero { min-height: var(--inv-vh, 760px); }
.inv--thumb .inv-hero { min-height: 100%; height: 100%; }

.inv-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--hero-bg); }
.inv-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.inv-hero__shade { position: absolute; inset: 0; z-index: -1; background: var(--c-hero-overlay); pointer-events: none; }
.inv-hero__art { position: absolute; inset: 0; overflow: hidden; }
.inv-hero__pat {
  position: absolute; inset: 0; background: var(--c-hero-text); opacity: .075;
  -webkit-mask: var(--pat) center / 140px repeat; mask: var(--pat) center / 140px repeat;
}
.inv-hero__big {
  position: absolute; left: 50%; top: 50%; width: min(calc(var(--cq1) * 150), 1100px); width: min(150cqi, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%); color: var(--c-hero-text); opacity: .055;
}
.inv-hero__big svg { width: 100%; height: 100%; }

.inv-hero__inner { position: relative; width: 100%; max-width: 680px; margin: auto; padding: 76px 24px 100px; }
.inv-hero__text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.inv-hero--centered.has-photo .inv-hero__text, .inv-hero--fullbleed.has-photo .inv-hero__text { text-shadow: 0 1px 16px var(--c-hero-overlay); }
.inv-hero__motif { width: 62px; margin-bottom: 20px; }
.inv-hero__tagline {
  font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; line-height: 1.5;
  opacity: .92; margin-bottom: 12px; max-width: 30em; text-wrap: balance;
}
/* Засварлагч: скрипт гарчгийн үсгийн дээд хэсэг энэ мөрийг хучиж, товшилт «Гарчиг» руу очдог байсан */
.inv--preview .inv-hero__tagline { position: relative; }
.inv-hero__title {
  font-size: clamp(46px, calc(var(--cq1) * 15), 96px); font-size: clamp(46px, 15cqi, 96px); line-height: 1.12; text-wrap: balance; max-width: 100%;
}
.inv-hero__title.inv-font-display { font-size: clamp(40px, calc(var(--cq1) * 12.5), 84px); font-size: clamp(40px, 12.5cqi, 84px); line-height: 1.04; }
.inv-hero__divider { width: min(230px, calc(var(--cq1) * 62)); width: min(230px, 62cqi); margin: 16px auto 14px; }
.inv-hero__names {
  font-family: var(--f-display); font-size: clamp(30px, calc(var(--cq1) * 9.5), 58px); font-size: clamp(30px, 9.5cqi, 58px); font-weight: 500; line-height: 1.12;
  letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere;
}
.inv--title-display .inv-hero__names {
  font-family: var(--f-script); font-weight: 400; font-size: clamp(36px, calc(var(--cq1) * 11.5), 66px); font-size: clamp(36px, 11.5cqi, 66px); letter-spacing: 0;
}

/* Огнооны блок: гараг | өдөр | цаг */
.inv-dateblock {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  width: min(320px, 100%); margin-top: 26px;
}
.inv-dateblock__side {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 8px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
}
.inv-dateblock__side small { font-size: 10px; font-weight: 500; letter-spacing: .22em; opacity: .82; }
.inv-dateblock__mid { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.inv-dateblock__month, .inv-dateblock__year { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.inv-dateblock__day {
  font-family: var(--f-display); font-size: 54px; font-weight: 600; line-height: .95; margin: 5px 0 4px;
  font-variant-numeric: lining-nums;
}
.inv-dateblock--line { display: block; width: auto; font-size: 15px; letter-spacing: .03em; font-weight: 500; }

.inv-hero__dateline { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--c-accent); }
.inv-hero__date-big { font-family: var(--f-display); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: .06em; font-variant-numeric: lining-nums; }
.inv-hero__date-small { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .92; }
.inv-sep { color: var(--c-accent); font-weight: 400; }

.inv-hero__cue {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: inherit; opacity: .85;
}
.inv-hero__cue svg { width: 26px; height: 26px; }

/* ---- split */
.inv-hero--split { background: var(--c-bg); color: var(--c-text); }
.inv-hero--split .inv-hero__media { position: relative; inset: auto; z-index: 0; flex: none; height: 50vh; height: 50svh; min-height: 260px; }
.inv--preview .inv-hero--split .inv-hero__media { height: calc(var(--inv-vh, 760px) * .5); }
.inv--thumb .inv-hero--split .inv-hero__media { height: 50%; min-height: 0; }
.inv-hero__panel {
  position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  margin-top: -30px; padding: 40px 22px 46px; background: var(--c-bg); border-radius: 30px 30px 0 0;
}
.inv-hero__panel::before {
  content: ''; position: absolute; left: 50%; top: 12px; width: 44px; height: 3px; border-radius: 3px;
  transform: translateX(-50%); background: var(--c-line-soft);
}
.inv--thumb .inv-hero__panel { padding: 30px 20px 26px; }
@container inv (min-width: 760px) {
  .inv-hero--split { flex-direction: row; }
  .inv-hero--split .inv-hero__media { height: auto; min-height: 0; width: 52%; }
  .inv-hero--split .inv-hero__panel { margin: 0; border-radius: 0; padding: 72px 48px; min-width: 0; /* урт үг самбарыг тэлэхгүй */ }
  .inv-hero--split .inv-hero__panel::before { display: none; }
}

/* Зураггүй үеийн монограм (split, arch) */
.inv-mono {
  position: absolute; left: 50%; top: 50%; width: min(76%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: var(--c-hero-text);
}
.inv-mono::before, .inv-mono::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.inv-mono::before { inset: 0; border: 1px solid var(--c-line); }
.inv-mono::after { inset: 9px; border: 1px solid var(--c-hero-a25); }
.inv-mono__orn { position: absolute; inset: 24%; color: var(--c-accent); }
.inv-mono.has-letters .inv-mono__orn { inset: auto; top: 12%; left: 50%; width: 17%; transform: translateX(-50%); }
.inv-mono__letters {
  position: relative; display: flex; align-items: baseline; justify-content: center; gap: .1em;
  font-family: var(--f-script); font-size: clamp(64px, calc(var(--cq1) * 24), 120px); font-size: clamp(64px, 24cqi, 120px); line-height: 1; margin-top: 8%;
}
.inv-mono__amp { font-size: .5em; color: var(--c-accent); }
/* хуудас/карт дээрх (хүндэтгэгдэгчийн хэсэг) монограммын «&» — AA тодролтой accent */
.inv-person .inv-mono__amp { color: var(--c-accent-ink); }
.inv-arch .inv-mono__letters { font-size: clamp(56px, calc(var(--cq1) * 20), 104px); font-size: clamp(56px, 20cqi, 104px); }

/* ---- arch */
.inv-hero--arch { background: var(--c-bg); color: var(--c-text); justify-content: center; }
.inv-hero--arch .inv-hero__inner { padding: 58px 24px 64px; }
.inv--thumb .inv-hero--arch .inv-hero__inner { padding: 44px 22px 30px; }
.inv-arch { position: relative; width: min(calc(var(--cq1) * 68), 320px, 36vh); width: min(68cqi, 320px, 36svh); aspect-ratio: 3 / 4; margin: 0 auto 34px; }
.inv--preview .inv-arch { width: min(calc(var(--cq1) * 68), 320px, calc(var(--inv-vh, 760px) * .36)); width: min(68cqi, 320px, calc(var(--inv-vh, 760px) * .36)); }
.inv--thumb .inv-arch { width: calc(var(--cq1) * 50); width: 50cqi; margin-bottom: 30px; }
.inv--thumb .inv-hero--arch { justify-content: flex-start; }
.inv-arch__frame {
  position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg);
  border-radius: 50% 50% 16px 16px / 37.5% 37.5% 16px 16px;
  box-shadow: 0 28px 50px -26px var(--c-shadow);
}
.inv-arch__frame .inv-hero__media { z-index: 0; }
.inv-arch::before {
  content: ''; position: absolute; inset: -10px; pointer-events: none; border: 1px solid var(--c-line);
  border-radius: 50% 50% 22px 22px / 38% 38% 22px 22px;
}
.inv-arch__seal {
  position: absolute; left: 50%; bottom: -24px; width: 48px; height: 48px; padding: 9px; transform: translateX(-50%);
  border-radius: 50%; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line), 0 6px 14px -6px var(--c-shadow);
}
.inv-arch__seal svg { width: 100%; height: 100%; }
@container inv (min-width: 860px) {
  .inv-hero--arch .inv-hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; max-width: 960px; }
  .inv-hero--arch .inv-arch { width: 340px; margin: 0; }
}

/* ---- framed */
.inv-hero--framed { justify-content: center; align-items: center; padding: 34px 16px; }
.inv--thumb .inv-hero--framed { padding: 24px 16px; }
.inv-frame {
  position: relative; width: 100%; max-width: 440px; margin: auto; padding: 60px 28px 52px;
  background: var(--c-surface); color: var(--c-text); border-radius: 3px;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .45);
}
.inv-hero--framed.has-photo .inv-frame { background: var(--c-surface-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.inv-frame::before, .inv-frame::after { content: ''; position: absolute; pointer-events: none; }
.inv-frame::before { inset: 9px; border: 1px solid var(--c-line); }
.inv-frame::after { inset: 14px; border: 1px solid var(--c-line-soft); }
.inv-frame__corner { position: absolute; z-index: 1; width: 58px; }
.inv-frame__corner--tl { top: 6px; left: 6px; }
.inv-frame__corner--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.inv-frame__corner--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.inv-frame__corner--br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
.inv-frame .inv-hero__motif { width: 54px; margin-bottom: 16px; }
.inv-frame .inv-hero__title { font-size: clamp(42px, calc(var(--cq1) * 13), 76px); font-size: clamp(42px, 13cqi, 76px); }
.inv-frame .inv-hero__title.inv-font-display { font-size: clamp(36px, calc(var(--cq1) * 11), 64px); font-size: clamp(36px, 11cqi, 64px); }
.inv-frame .inv-hero__names { font-size: clamp(28px, calc(var(--cq1) * 8.4), 46px); font-size: clamp(28px, 8.4cqi, 46px); }
.inv--thumb .inv-frame { padding: 50px 24px 44px; }

/* Цайвар дэвсгэр дээрх текст (split, arch, framed) */
.inv-hero--split .inv-hero__tagline, .inv-hero--arch .inv-hero__tagline, .inv-frame .inv-hero__tagline { color: var(--c-accent-ink); opacity: 1; }
.inv-hero--split .inv-hero__title, .inv-hero--arch .inv-hero__title, .inv-frame .inv-hero__title { color: var(--c-primary); }
.inv-hero--split .inv-dateblock, .inv-hero--arch .inv-dateblock, .inv-frame .inv-dateblock { color: var(--c-primary); }
@container inv (min-width: 860px) {
  .inv-hero--arch .inv-hero__text { align-items: flex-start; text-align: left; }
  .inv-hero--arch .inv-hero__divider { margin-left: 0; }
}

/* ---- fullbleed */
.inv-hero--fullbleed { justify-content: flex-end; }
.inv-hero--fullbleed .inv-hero__inner {
  margin: auto auto 0; max-width: 1000px; text-align: left;
  padding: 120px 26px calc(62px + env(safe-area-inset-bottom));
}
.inv--thumb .inv-hero--fullbleed .inv-hero__inner { padding-bottom: 40px; }
.inv-hero--fullbleed .inv-hero__text { align-items: flex-start; }
.inv-hero--fullbleed .inv-hero__title { font-size: clamp(54px, calc(var(--cq1) * 17), 124px); font-size: clamp(54px, 17cqi, 124px); line-height: 1.02; }
.inv-hero--fullbleed .inv-hero__title.inv-font-display { font-size: clamp(46px, calc(var(--cq1) * 14), 108px); font-size: clamp(46px, 14cqi, 108px); }
.inv-hero--fullbleed .inv-hero__divider { width: min(200px, calc(var(--cq1) * 52)); width: min(200px, 52cqi); margin: 16px 0 12px -8px; }
.inv-hero--fullbleed .inv-hero__names { font-size: clamp(32px, calc(var(--cq1) * 10), 64px); font-size: clamp(32px, 10cqi, 64px); }
.inv-hero--fullbleed .inv-hero__shade {
  background:
    linear-gradient(to top, var(--c-hero-overlay) 0%, var(--c-hero-overlay) 25%, transparent 78%),
    linear-gradient(to top, var(--c-hero-overlay) 0%, transparent 62%);
}
/* Текстийн блокийн ард нэмэлт сүүдэр: гарчиг/нэр 2 мөр болж текст дээш тэлсэн ч тод зураг дээр уншигдана */
.inv-hero--fullbleed.has-photo .inv-hero__inner::before {
  content: ''; position: absolute; z-index: -1; top: 56px; bottom: 0; left: -100vw; right: -100vw; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-hero-overlay) 64px);
}
.inv-hero--fullbleed .inv-hero__big { left: auto; top: -8%; right: calc(var(--cq1) * -38); right: -38cqi; width: min(calc(var(--cq1) * 115), 900px); width: min(115cqi, 900px); transform: none; opacity: .08; }
/* Хээтэй (pattern) загварт том тэмдэг хээтэй давхцаж хэт тод харагддаг — жижиг, бүдэг болгоно (хээ нь нарийн бүтэц хэвээр) */
.inv--pattern .inv-hero__big { width: min(calc(var(--cq1) * 92), 560px); width: min(92cqi, 560px); opacity: .035; }
.inv--pattern .inv-hero--fullbleed .inv-hero__big { top: 4%; right: calc(var(--cq1) * -22); right: -22cqi; width: min(calc(var(--cq1) * 72), 480px); width: min(72cqi, 480px); opacity: .035; }
.inv-hero__pat { -webkit-mask-size: 120px; mask-size: 120px; }
@container inv (min-width: 860px) {
  .inv-hero--fullbleed .inv-hero__big { right: -12%; }
}

/* ================================================================ Шинэ нүүрүүд (UPGRADE-2026-10)
   --hero-vh: нүүрний харагдах өндөр (live: дэлгэц, preview: --inv-vh, thumb: 680px) — зургийн хэмжээг дэлгэцэнд багтаана */
.inv { --hero-vh: 100vh; }
@supports (height: 100svh) { .inv { --hero-vh: 100svh; } }
.inv.inv--preview { --hero-vh: var(--inv-vh, 760px); }
.inv.inv--thumb { --hero-vh: 680px; }

.inv-hero--light { background: var(--c-bg); color: var(--c-text); justify-content: center; }
.inv-hero--light .inv-hero__tagline { color: var(--c-accent-ink); opacity: 1; }
.inv-hero--light .inv-hero__title, .inv-hero--light .inv-dateblock { color: var(--c-primary); }
.inv-hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.inv-hero--light .inv-hero__deco {
  background:
    radial-gradient(ellipse 85% 46% at 50% 0%, var(--c-accent-soft), var(--c-accent-a0) 72%),
    radial-gradient(ellipse 70% 40% at 50% 104%, var(--c-primary-soft), transparent 70%);
}
.inv-hero--light .inv-hero__deco .inv-hero__pat { background: var(--c-accent); opacity: .07; }
.inv-hero--polaroid .inv-hero__inner, .inv-hero--heart .inv-hero__inner, .inv-hero--circle .inv-hero__inner,
.inv-hero--collage .inv-hero__inner { padding: 44px 24px 72px; }
.inv--thumb .inv-hero--polaroid .inv-hero__inner, .inv--thumb .inv-hero--heart .inv-hero__inner,
.inv--thumb .inv-hero--circle .inv-hero__inner, .inv--thumb .inv-hero--collage .inv-hero__inner { padding: 40px 22px 26px; }
.inv--thumb .inv-hero--polaroid, .inv--thumb .inv-hero--heart, .inv--thumb .inv-hero--circle,
.inv--thumb .inv-hero--collage, .inv--thumb .inv-hero--editorial { justify-content: flex-start; }
.inv-hero--light .inv-hero__cue { color: var(--c-accent-ink); }

/* ---- polaroid */
.inv-pola {
  position: relative; width: min(calc(var(--cq1) * 62), 300px, calc(var(--hero-vh) * .3)); width: min(62cqi, 300px, calc(var(--hero-vh) * .3));
  margin: 4px auto 40px;
}
.inv--thumb .inv-pola { width: calc(var(--cq1) * 56); width: 56cqi; margin-bottom: 30px; }
.inv-pola__card {
  position: relative; z-index: 1; margin: 0; padding: 5.5% 5.5% 0; background: #fffefb; color: #34302b; border-radius: 2px;
  transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 24px 44px -20px rgba(0, 0, 0, .42);
}
.inv-pola__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hero-bg); }
.inv-pola__photo .inv-hero__media { z-index: 0; }
.inv-pola__photo .inv-mono { width: 84%; }
.inv-pola__photo .inv-mono__letters, .inv-circle__photo .inv-mono__letters, .inv-heart__mask .inv-mono__letters {
  font-size: clamp(40px, calc(var(--cq1) * 15), 92px); font-size: clamp(40px, 15cqi, 92px);
}
.inv-pola__cap {
  display: flex; align-items: center; justify-content: center; min-height: 2.5em; padding: .3em .2em .4em;
  font-family: var(--f-script); font-weight: 400; line-height: 1.12; text-align: center; color: #34302b;
  font-size: clamp(22px, calc(var(--cq1) * 6.4), 30px); font-size: clamp(22px, 6.4cqi, 30px); text-wrap: balance; overflow-wrap: anywhere;
}
.inv-pola__back {
  position: absolute; inset: 3% -3% 1% 5%; z-index: 0; border-radius: 2px; background: var(--c-surface-3);
  transform: rotate(4.5deg); box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .35);
}
.inv-pola__tape {
  position: absolute; z-index: 2; left: 50%; top: -11px; width: 36%; height: 24px; transform: translateX(-50%) rotate(2.5deg);
  background: var(--c-accent); opacity: .5; border-radius: 1px;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
  mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}

/* ---- heart */
.inv-heart {
  position: relative; width: min(calc(var(--cq1) * 70), 340px, calc(var(--hero-vh) * .37)); width: min(70cqi, 340px, calc(var(--hero-vh) * .37));
  aspect-ratio: 100 / 92; margin: 10px auto 34px;
}
.inv--thumb .inv-heart { width: calc(var(--cq1) * 62); width: 62cqi; margin-bottom: 26px; }
.inv-heart__mask {
  position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 92C42 84 0 60 0 28C0 12 12 0 27 0C38 0 46 6 50 14C54 6 62 0 73 0C88 0 100 12 100 28C100 60 58 84 50 92Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 92C42 84 0 60 0 28C0 12 12 0 27 0C38 0 46 6 50 14C54 6 62 0 73 0C88 0 100 12 100 28C100 60 58 84 50 92Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.inv-heart__mask .inv-hero__media { z-index: 0; }
.inv-heart__mask .inv-mono { top: 44%; width: 70%; }
.inv-heart__mask .inv-mono::before, .inv-heart__mask .inv-mono::after { display: none; }
.inv-heart__ring { position: absolute; inset: -9.8% -9% -10.9% -9%; color: var(--c-accent); transform: rotate(-4deg); pointer-events: none; }
.inv-heart__ring svg { width: 100%; height: 100%; }
.inv-heart__orn {
  position: absolute; right: -6%; top: -4%; width: 22%; aspect-ratio: 1; padding: 4%; border-radius: 50%;
  background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line), 0 8px 18px -10px var(--c-shadow);
}
.inv-heart__orn svg { width: 100%; height: 100%; }

/* ---- circle (дэвсгэр: heroBackground, текст: heroText) */
.inv-hero--circle { justify-content: center; }
.inv-hero--circle .inv-hero__deco .inv-hero__pat { background: var(--c-hero-text); opacity: .07; }
.inv-circle {
  position: relative; width: min(calc(var(--cq1) * 62), 300px, calc(var(--hero-vh) * .33)); width: min(62cqi, 300px, calc(var(--hero-vh) * .33));
  aspect-ratio: 1; margin: 22px auto 48px;
}
.inv--thumb .inv-circle { width: calc(var(--cq1) * 54); width: 54cqi; margin: 18px auto 42px; }
.inv-circle__photo {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--c-hero-a10);
  box-shadow: 0 0 0 1px var(--c-hero-a25), 0 26px 50px -24px rgba(0, 0, 0, .45);
}
.inv-circle__photo .inv-hero__media { z-index: 0; background: var(--c-hero-a10); }
.inv-circle__photo .inv-mono { width: 84%; }
.inv-circle__ring { position: absolute; inset: -11%; color: var(--c-accent); pointer-events: none; }
.inv-circle__ring svg { width: 100%; height: 100%; overflow: visible; }
.inv-circle__seal {
  position: absolute; left: 50%; bottom: -16%; width: 50px; height: 50px; padding: 10px; transform: translateX(-50%);
  border-radius: 50%; color: var(--c-on-accent);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--c-accent);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
.inv-circle__seal svg { width: 100%; height: 100%; }
.inv-hero--circle.has-photo .inv-hero__text { text-shadow: none; }

/* ---- collage */
.inv-collage {
  position: relative; width: min(calc(var(--cq1) * 84), 420px, calc(var(--hero-vh) * .46)); width: min(84cqi, 420px, calc(var(--hero-vh) * .46));
  aspect-ratio: 1 / .9; margin: 6px auto 34px;
}
.inv--thumb .inv-collage { width: calc(var(--cq1) * 76); width: 76cqi; margin-bottom: 26px; }
.inv-collage__tile {
  position: absolute; padding: 2.6%; background: #fffefb; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 20px 36px -20px rgba(0, 0, 0, .45);
}
.inv-collage__tile--a { left: 1%; top: 6%; width: 57%; height: 86%; z-index: 2; transform: rotate(-4deg); }
.inv-collage__tile--b { right: 2%; top: 0; width: 43%; height: 47%; z-index: 1; transform: rotate(5deg); }
.inv-collage__tile--c { right: 5%; bottom: 1%; width: 45%; height: 50%; z-index: 3; transform: rotate(-1.5deg); }
.inv-collage__in { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--hero-bg); color: var(--c-hero-text); }
.inv-collage__img { width: 100%; height: 100%; object-fit: cover; }
.inv-collage__in .inv-mono { width: 92%; }
.inv-collage__in .inv-mono__letters { font-size: clamp(44px, calc(var(--cq1) * 14), 76px); font-size: clamp(44px, 14cqi, 76px); }
.inv-collage__decor { position: absolute; inset: 0; display: grid; place-items: center; }
.inv-collage__decor--2 { background: var(--c-surface-2); color: var(--c-accent); }
.inv-collage__motif { width: 46%; }
.inv-collage__decor--1 .inv-collage__motif { color: var(--c-hero-text); opacity: .8; }
.inv-collage__tape {
  position: absolute; z-index: 4; left: 46%; top: 2%; width: 22%; height: 7%; transform: rotate(-14deg);
  background: var(--c-accent); opacity: .45;
}

/* ---- editorial */
.inv-hero--editorial { justify-content: center; }
.inv-hero--editorial .inv-hero__inner { max-width: 760px; padding: 40px 22px 64px; }
.inv--thumb .inv-hero--editorial .inv-hero__inner { padding: 30px 22px 24px; }
.inv-ed { align-items: stretch; text-align: left; }
.inv-ed__mast {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0 8px;
  border-top: 2px solid var(--c-primary); border-bottom: 1px solid var(--c-line);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
}
.inv-ed__kicker { min-width: 0; color: var(--c-accent-ink); }
.inv-ed__issue { flex: none; color: var(--c-primary); letter-spacing: .12em; font-variant-numeric: lining-nums tabular-nums; }
.inv-hero--editorial .inv-hero__title {
  margin: 20px 0 16px; text-align: left; line-height: .98; letter-spacing: -.01em;
  font-size: clamp(56px, calc(var(--cq1) * 18), 128px); font-size: clamp(56px, 18cqi, 128px);
}
.inv-hero--editorial .inv-hero__title.inv-font-display {
  font-size: clamp(48px, calc(var(--cq1) * 15.5), 112px); font-size: clamp(48px, 15.5cqi, 112px); font-weight: 600; line-height: .95;
}
.inv-ed__rule { height: 1px; background: var(--c-line); }
.inv-ed__strip {
  display: grid; grid-template-columns: 1fr; gap: 6px; margin: 16px 0 14px;
  height: min(calc(var(--cq1) * 50), 340px, calc(var(--hero-vh) * .3)); height: min(50cqi, 340px, calc(var(--hero-vh) * .3));
}
.inv--thumb .inv-ed__strip { height: calc(var(--cq1) * 44); height: 44cqi; }
.inv-ed__strip--n2 { grid-template-columns: 1.6fr 1fr; }
.inv-ed__strip--n3 { grid-template-columns: 1.7fr 1fr 1fr; }
.inv-ed__cell { position: relative; min-width: 0; overflow: hidden; background: var(--c-surface-2); }
.inv-ed__img { width: 100%; height: 100%; object-fit: cover; }
.inv-ed__art { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--c-hero-text); }
.inv-ed__art .inv-hero__big { width: 120%; opacity: .08; }
.inv-ed__art .inv-mono { width: auto; height: 84%; }
.inv-ed__art .inv-mono__letters { font-size: clamp(48px, calc(var(--cq1) * 15), 96px); font-size: clamp(48px, 15cqi, 96px); }
.inv-ed__byline { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 4px; }
.inv-ed__orn { flex: none; width: 34px; }
.inv-ed__byline .inv-hero__names { min-width: 0; text-align: left; }
.inv-ed__foot {
  display: flex; margin-top: 16px;
  border-top: 1px solid var(--c-line); border-bottom: 2px solid var(--c-primary);
}
.inv-ed__fact { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; padding: 10px 10px 9px; }
.inv-ed__fact:first-child { flex-grow: 1.7; padding-left: 0; }
.inv-ed__fact + .inv-ed__fact { border-left: 1px solid var(--c-line-soft); }
.inv-ed__label { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
.inv-ed__value {
  font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--c-primary);
  font-variant-numeric: lining-nums; overflow-wrap: anywhere;
}
.inv--thumb .inv-ed__fact { padding: 8px 8px 7px; }

/* Өргөн дэлгэц: зураг | текст хоёр багана (polaroid, heart, circle, collage) */
@container inv (min-width: 860px) {
  .inv-hero--polaroid .inv-hero__inner, .inv-hero--heart .inv-hero__inner, .inv-hero--circle .inv-hero__inner,
  .inv-hero--collage .inv-hero__inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; max-width: 980px;
  }
  .inv-hero--polaroid .inv-pola { width: 320px; margin: 0; }
  .inv-hero--heart .inv-heart { width: 360px; margin: 0; }
  .inv-hero--circle .inv-circle { width: 320px; margin: 0 0 30px; }
  .inv-hero--collage .inv-collage { width: 440px; margin: 0; }
  .inv-hero--polaroid .inv-hero__text, .inv-hero--heart .inv-hero__text, .inv-hero--circle .inv-hero__text,
  .inv-hero--collage .inv-hero__text { align-items: flex-start; text-align: left; }
  .inv-hero--polaroid .inv-hero__divider, .inv-hero--heart .inv-hero__divider, .inv-hero--circle .inv-hero__divider,
  .inv-hero--collage .inv-hero__divider { margin-left: 0; }
}

/* ================================================================ Хуудасны арын зураг (photos.background) */
.inv-bg {
  position: -webkit-sticky; position: sticky; top: 0; z-index: -1; display: block; height: 100vh; margin-bottom: -100vh;
  overflow: hidden; pointer-events: none;
}
.inv--preview .inv-bg { height: var(--inv-vh, 760px); margin-bottom: calc(var(--inv-vh, 760px) * -1); }
.inv-bg__img { width: 100%; height: 100%; object-fit: cover; }
.inv-bg__veil { position: absolute; inset: 0; background: var(--c-bg); opacity: .7; }
/* Арын зурагтай үед дэвсгэргүй секцүүдийн текст уншигдахуйц байлгах зөөлөн сүүдэр */
.inv--has-bg .inv-sec:not(.inv-hero):not(.inv-band) .inv-head { text-shadow: 0 0 18px var(--c-bg); }

/* ================================================================ Бидний түүх */
.inv-story { position: relative; max-width: 620px; margin: 0 auto; padding-left: 30px; text-align: left; }
.inv-story::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--c-line); }
.inv-story__item { position: relative; padding-bottom: 22px; }
.inv-story__item:last-child { padding-bottom: 0; }
.inv-story__dot {
  position: absolute; left: -28px; top: 20px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--c-accent); box-shadow: 0 0 0 4px var(--c-bg);
}
.inv-story__card { overflow: hidden; }
.inv-story__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2); }
.inv-story__img { width: 100%; height: 100%; object-fit: cover; }
.inv-story__body { padding: 16px 18px 18px; }
.inv-story__year {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c-accent-soft);
  color: var(--c-accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; font-variant-numeric: lining-nums;
}
.inv-story__title { font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--c-primary); text-wrap: balance; }
.inv-story__text { margin-top: 6px; font-size: 15.5px; line-height: 1.75; white-space: pre-line; color: var(--c-text); }
@container inv (min-width: 760px) {
  .inv-story { max-width: 900px; padding-left: 0; }
  .inv-story::before { left: 50%; }
  .inv-story__item { width: 50%; padding: 0 44px 34px 0; }
  .inv-story__item:nth-child(even) { margin-left: 50%; padding: 0 0 34px 44px; }
  .inv-story__dot { left: auto; right: -7.5px; }
  .inv-story__item:nth-child(even) .inv-story__dot { right: auto; left: -7.5px; }
  .inv-story__item:nth-child(odd) .inv-story__body { text-align: right; }
}

/* ================================================================ Чөлөөт зургийн блок */
.inv-sec.inv-sec--photo { padding-top: clamp(30px, calc(var(--cq1) * 8), 60px); padding-top: clamp(30px, 8cqi, 60px); padding-bottom: clamp(30px, calc(var(--cq1) * 8), 60px); padding-bottom: clamp(30px, 8cqi, 60px); }
.inv-sec.inv-sec--photo-full { padding-left: 0; padding-right: 0; }
.inv-pblock { position: relative; margin: 0 auto; }
.inv-pblock__frame { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; line-height: 0; background: var(--c-surface-2); }
.inv button.inv-pblock__frame { cursor: zoom-in; }
.inv-pblock__frame:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.inv-pblock__img { width: 100%; height: auto; }
.inv-pblock__cap {
  max-width: 30em; margin: 14px auto 0; padding: 0 20px; font-family: var(--f-script); line-height: 1.3; color: var(--c-accent-ink);
  font-size: clamp(22px, calc(var(--cq1) * 6.2), 30px); font-size: clamp(22px, 6.2cqi, 30px); text-wrap: balance; white-space: pre-line;
}
.inv-pblock--full { max-width: 960px; }
.inv-pblock--framed { max-width: 560px; padding: 12px; background: var(--c-surface); border-radius: 3px; box-shadow: 0 1px 2px var(--c-shadow), 0 22px 44px -22px var(--c-shadow); }
.inv-pblock--framed::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--c-line-soft); pointer-events: none; }
.inv-pblock--framed .inv-pblock__frame { box-shadow: 0 0 0 1px var(--c-line-soft); }
.inv-pblock--framed .inv-pblock__cap { padding: 0 6px 4px; }
.inv-pblock--polaroid {
  width: min(calc(var(--cq1) * 82), 420px); width: min(82cqi, 420px); padding: 12px 12px 0; background: #fffefb; border-radius: 2px;
  transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 24px 44px -20px rgba(0, 0, 0, .42);
}
.inv-pblock--polaroid .inv-pblock__cap { margin: 0; padding: 12px 6px 16px; color: #34302b; }
.inv-pblock--polaroid:not(:has(.inv-pblock__cap)) { padding-bottom: 46px; }
.inv-pblock--circle, .inv-pblock--arch { width: min(calc(var(--cq1) * 72), 360px); width: min(72cqi, 360px); }
.inv-pblock--circle .inv-pblock__frame { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 26px 50px -26px var(--c-shadow); }
.inv-pblock--arch .inv-pblock__frame {
  aspect-ratio: 3 / 4; border-radius: 50% 50% var(--radius) var(--radius) / 37.5% 37.5% var(--radius) var(--radius);
  box-shadow: 0 26px 50px -26px var(--c-shadow);
}
.inv-pblock--circle .inv-pblock__img, .inv-pblock--arch .inv-pblock__img { height: 100%; object-fit: cover; }
.inv-pblock--circle::before, .inv-pblock--arch::before { content: ''; position: absolute; left: -10px; right: -10px; top: -10px; aspect-ratio: 1; border: 1px solid var(--c-line); border-radius: 50%; pointer-events: none; }
.inv-pblock--arch::before { aspect-ratio: auto; height: calc(min(calc(var(--cq1) * 72), 360px) * 4 / 3 + 20px); height: calc(min(72cqi, 360px) * 4 / 3 + 20px); border-radius: 50% 50% calc(var(--radius) + 8px) calc(var(--radius) + 8px) / 38% 38% calc(var(--radius) + 8px) calc(var(--radius) + 8px); }
.inv-pblock__seal {
  position: relative; z-index: 1; width: 44px; height: 44px; margin: -22px auto 0; padding: 9px; border-radius: 50%;
  background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line);
}
.inv-pblock__seal svg { width: 100%; height: 100%; }

/* ================================================================ Гадаргуугийн бүтэц (template.texture) — зөвхөн CSS */
.inv[class*='inv--tex-'] .inv-page::after, .inv[class*='inv--tex-'] .inv-hero--light .inv-hero__deco::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.inv--tex-paper .inv-page::after, .inv--tex-paper .inv-hero--light .inv-hero__deco::after {
  opacity: .85; mix-blend-mode: multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 100, 70, .07));
}
.inv--tex-grain .inv-page::after, .inv--tex-grain .inv-hero--light .inv-hero__deco::after {
  opacity: .75; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.inv--tex-linen .inv-page::after, .inv--tex-linen .inv-hero--light .inv-hero__deco::after {
  background:
    repeating-linear-gradient(0deg, rgba(90, 80, 60, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 80, 60, .055) 0 1px, transparent 1px 4px);
}
.inv--tex-dots .inv-page::after, .inv--tex-dots .inv-hero--light .inv-hero__deco::after {
  background: radial-gradient(circle, var(--c-line-soft) 1.1px, transparent 1.4px) 0 0 / 18px 18px;
  opacity: .6;
}
.inv--dark-bg.inv--tex-paper .inv-page::after, .inv--dark-bg.inv--tex-grain .inv-page::after, .inv--tex-grain .inv-hero--light .inv-hero__deco::after { mix-blend-mode: screen; opacity: .35; }
.inv--dark-bg.inv--tex-linen .inv-page::after, .inv--tex-linen .inv-hero--light .inv-hero__deco::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px);
}

/* ================================================================ Секцүүд */
.inv-sec { position: relative; padding: clamp(72px, calc(var(--cq1) * 18), 120px) 22px; padding: clamp(72px, 18cqi, 120px) 22px; }
.inv-sec.inv-hero { padding: 0; }
.inv-sec.inv-hero--framed { padding: 34px 16px; }
.inv--thumb .inv-sec.inv-hero--framed { padding: 24px 16px; }
.inv-wrap { position: relative; max-width: 620px; margin: 0 auto; }
.inv-wrap--wide { max-width: 960px; }
.inv-wrap--form { max-width: 520px; }
.inv-head { margin: 0 auto clamp(32px, calc(var(--cq1) * 9), 52px); margin: 0 auto clamp(32px, 9cqi, 52px); }
.inv-h2 {
  font-family: var(--f-display); font-size: clamp(31px, calc(var(--cq1) * 8.8), 48px); font-size: clamp(31px, 8.8cqi, 48px); font-weight: 600; line-height: 1.12;
  color: var(--c-primary); text-wrap: balance;
}
.inv-head__orn { width: min(170px, calc(var(--cq1) * 48)); width: min(170px, 48cqi); margin: 14px auto 0; }

.inv-band { background: var(--hero-bg); color: var(--c-hero-text); overflow: hidden; isolation: isolate; }
.inv-band .inv-h2 { color: var(--c-hero-text); }
.inv-band__pat {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--c-hero-text); opacity: .06;
  -webkit-mask: var(--pat) center / 140px repeat; mask: var(--pat) center / 140px repeat;
}

/* ---- карт */
.inv-card { position: relative; background: var(--c-surface); border-radius: var(--radius); }
.inv--cards-shadow .inv-card { border: 1px solid var(--c-hair); box-shadow: 0 1px 2px var(--c-shadow-soft), 0 16px 36px -14px var(--c-shadow); }
.inv--cards-outline .inv-card { border: 1px solid var(--c-line); box-shadow: inset 0 0 0 5px var(--c-surface), inset 0 0 0 6px var(--c-line-soft); }
.inv--cards-flat .inv-card { background: var(--c-surface-2); }
.inv--cards-glass .inv-card {
  background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 16px 40px -20px var(--c-shadow);
}
.inv--dark-bg.inv--cards-glass .inv-card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }

/* ---- товч */
.inv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 26px;
  border-radius: 999px; border: 1px solid transparent; background: var(--c-primary); color: var(--c-on-primary);
  font-family: var(--f-body); font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-decoration: none;
  cursor: pointer; box-shadow: 0 12px 26px -14px var(--c-shadow); transition: transform .2s, box-shadow .2s, background-color .2s, opacity .2s;
}
@media (hover: hover) { .inv-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px var(--c-shadow); } }
.inv-btn:active { transform: translateY(0); }
.inv-btn:focus-visible, .inv-link:focus-visible, .inv-music:focus-visible, .inv-gallery__item:focus-visible,
.inv-lightbox__btn:focus-visible, .inv-stepper__btn:focus-visible, .inv-hero__cue:focus-visible,
.inv-gift-card__qr-frame:focus-visible, .inv-gift-card__save:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 3px;
}
.inv-btn svg { width: 20px; height: 20px; flex: none; }
.inv-btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-line); box-shadow: none; }
@media (hover: hover) { .inv-btn--ghost:not(:disabled):hover { background: var(--c-accent-soft); box-shadow: 0 10px 22px -16px var(--c-shadow); } }
.inv-btn--accent { background: var(--c-accent); color: var(--c-on-accent); }
.inv-btn--block { display: flex; width: 100%; }
.inv-btn:disabled { opacity: .55; cursor: default; transform: none; }
.inv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.inv-link {
  display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--c-accent-ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---- урилгын үг */
.inv-message__motif { width: 56px; margin: 0 auto 22px; }
.inv-greeting {
  font-family: var(--f-script); font-size: clamp(30px, calc(var(--cq1) * 9), 46px); font-size: clamp(30px, 9cqi, 46px); line-height: 1.25; color: var(--c-accent-ink);
  margin-bottom: 20px; text-wrap: balance;
}
.inv-message { max-width: 34em; margin: 0 auto; font-size: 16.5px; line-height: 1.85; white-space: pre-line; color: var(--c-text); text-wrap: pretty; }
.inv-hosts { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 34px; }
.inv-hosts__label { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--c-muted); }
.inv-hosts__names { font-family: var(--f-display); font-size: 23px; font-weight: 600; line-height: 1.3; color: var(--c-primary); text-wrap: balance; }

/* ---- хүндэтгэгдэгч */
.inv-person { display: grid; justify-items: center; gap: 44px; }
.inv-portrait { position: relative; width: min(calc(var(--cq1) * 70), 320px); width: min(70cqi, 320px); }
.inv-portrait__frame {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-2);
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  box-shadow: 0 30px 50px -28px var(--c-shadow);
}
.inv-portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.inv-portrait::before {
  content: ''; position: absolute; inset: -10px; border: 1px solid var(--c-line); pointer-events: none;
  border-radius: 50% 50% calc(var(--radius) + 8px) calc(var(--radius) + 8px) / 40.5% 40.5% calc(var(--radius) + 8px) calc(var(--radius) + 8px);
}
.inv-portrait__seal {
  position: absolute; left: 50%; bottom: -24px; width: 48px; height: 48px; padding: 9px; transform: translateX(-50%);
  border-radius: 50%; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line);
}
.inv-portrait__seal svg { width: 100%; height: 100%; }
.inv-person__text { min-width: 0; }
.inv-person__name {
  font-family: var(--f-script); font-size: clamp(40px, calc(var(--cq1) * 12.5), 62px); font-size: clamp(40px, 12.5cqi, 62px); line-height: 1.15; color: var(--c-primary);
  text-wrap: balance; overflow-wrap: anywhere;
}
.inv-person__orn { width: 150px; margin: 12px auto 18px; }
.inv-person__about { max-width: 32em; margin: 0 auto; line-height: 1.85; white-space: pre-line; text-wrap: pretty; }
@container inv (min-width: 720px) {
  .inv-person.has-photo { grid-template-columns: auto 1fr; gap: 72px; align-items: center; text-align: left; justify-items: stretch; }
  .inv-person.has-photo .inv-portrait { width: 330px; }
  .inv-person.has-photo .inv-person__orn { margin-left: 0; }
  .inv-person.has-photo .inv-person__about { margin: 0; }
}

/* ---- тоолуур */
.inv-sec--countdown { padding-left: 14px; padding-right: 14px; }
.inv-count {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, calc(var(--cq1) * 2.4), 16px); gap: clamp(6px, 2.4cqi, 16px);
  max-width: 560px; margin: 0 auto;
}
.inv-count__box {
  display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 16px 2px 13px;
  border-radius: calc(var(--radius) * .75); background: var(--c-hero-a10); border: 1px solid var(--c-hero-a25);
}
.inv-count__num {
  font-family: var(--f-display); font-size: clamp(28px, calc(var(--cq1) * 9.6), 54px); font-size: clamp(28px, 9.6cqi, 54px); font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.inv-count__lbl {
  margin-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-hero-a60); line-height: 1.2; max-width: 100%;
}
.inv-count__date { margin-top: 28px; font-size: 13.5px; letter-spacing: .08em; color: var(--c-hero-a60); text-wrap: balance; }
.inv-count__done { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
@container inv (min-width: 520px) { .inv-count__lbl { font-size: 11.5px; letter-spacing: .16em; } }

/* ---- цаг, газар */
.inv-cards { display: grid; gap: 14px; }
.inv-info { display: flex; align-items: center; gap: 16px; padding: 18px 18px; text-align: left; }
.inv-info__icon {
  flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.inv-info__icon svg { width: 24px; height: 24px; }
.inv-info__body { min-width: 0; }
.inv-nowrap { white-space: nowrap; }
.inv-info__label { font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 2px; }
.inv-info__value {
  font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--c-primary);
  font-variant-numeric: lining-nums;
}
.inv-info__sub { margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--c-text); }
@container inv (min-width: 680px) {
  .inv-cards[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .inv-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .inv-info { flex-direction: column; text-align: center; padding: 30px 22px 28px; gap: 14px; }
  .inv-info__label { margin-bottom: 6px; }
}

/* ---- хөтөлбөр */
.inv-timeline-card { padding: 26px 20px 24px; text-align: left; }
.inv-timeline { position: relative; }
.inv-timeline::before {
  content: ''; position: absolute; top: 24px; bottom: 24px; left: 81px; width: 1px; background: var(--c-line-soft);
}
.inv-timeline__item { position: relative; display: grid; grid-template-columns: 70px 24px minmax(0, 1fr); align-items: start; padding: 9px 0; }
.inv-timeline__time {
  font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--c-primary);
  text-align: right; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere;
}
.inv-timeline__dot {
  position: relative; z-index: 1; justify-self: center; width: 11px; height: 11px; margin-top: 9px; border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--c-accent); box-shadow: 0 0 0 4px var(--c-surface);
}
.inv--cards-flat .inv-timeline__dot { background: var(--c-surface-2); box-shadow: 0 0 0 4px var(--c-surface-2); }
.inv-timeline__text { padding: 3px 0 0 8px; line-height: 1.65; }
@container inv (min-width: 560px) { .inv-timeline-card { padding: 34px 40px 30px; } }

/* ---- зургийн цомог */
.inv-gallery { columns: 2; column-gap: 10px; }
.inv-gallery--n1 { columns: 1; max-width: 560px; margin: 0 auto; }
@container inv (min-width: 700px) {
  .inv-gallery { columns: 3; column-gap: 14px; }
  .inv-gallery--n2 { columns: 2; }
  .inv-gallery--n1 { columns: 1; }
}
.inv-gallery__item {
  display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; break-inside: avoid; overflow: hidden;
  border-radius: calc(var(--radius) * .6); background: var(--c-surface-2); cursor: zoom-in; line-height: 0;
}
.inv div.inv-gallery__item { cursor: default; }
@container inv (min-width: 700px) { .inv-gallery__item { margin-bottom: 14px; } }
.inv-gallery__item img { width: 100%; height: auto; min-height: 60px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .inv button.inv-gallery__item:hover img { transform: scale(1.04); } }

/* ---- газрын зураг */
.inv-map { overflow: hidden; padding: 0; }
.inv--cards-outline .inv-map { box-shadow: none; }
.inv-map__frame { width: 100%; height: 300px; border: 0; }
.inv-map__ph {
  height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--c-muted); font-size: 14px;
  background:
    linear-gradient(var(--c-primary-soft) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--c-primary-soft) 1px, transparent 1px) 0 0 / 28px 28px, var(--c-surface-2);
}
.inv-map__pin { width: 40px; height: 40px; color: var(--c-accent-ink); }
.inv-map__addr { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.inv-map__addr strong { font-family: var(--f-display); font-size: 21px; font-weight: 600; color: var(--c-primary); }

/* ---- ирэх эсэх */
.inv-rsvp__note { margin: -18px auto 24px; font-size: 14.5px; color: var(--c-muted); text-wrap: balance; }
.inv-rsvp { padding: 28px 22px 26px; text-align: left; }
@container inv (min-width: 520px) { .inv-rsvp { padding: 34px 32px 30px; } }
.inv-field { display: grid; gap: 8px; margin: 0 0 18px; min-width: 0; }
.inv-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.inv-input {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; font-family: var(--f-body); font-size: 16px; line-height: 1.4;
  color: var(--c-text); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 12px;
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.inv-input::placeholder { color: var(--c-muted); opacity: .75; }
.inv-input:focus { border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.inv-input:disabled { opacity: .7; }
.inv-textarea { min-height: 100px; resize: vertical; }
.inv-choice { display: grid; gap: 8px; }
.inv-choice legend { padding: 0; margin-bottom: 8px; }
.inv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-seg__opt { position: relative; display: block; }
.inv-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inv-seg__opt span {
  display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface-2); font-size: 15px; font-weight: 600; color: var(--c-text);
  transition: background-color .2s, color .2s, border-color .2s;
}
.inv-seg__opt input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.inv-seg__opt input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.inv-seg__opt input:disabled { cursor: default; }
.inv-stepper { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 8px; }
.inv-stepper__btn {
  display: grid; place-items: center; min-height: 50px; border-radius: 12px; border: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-primary);
}
.inv-stepper__btn svg { width: 20px; height: 20px; }
.inv-stepper__btn:disabled { opacity: .6; cursor: default; }
.inv-stepper__input { text-align: center; font-weight: 600; -moz-appearance: textfield; }
.inv-stepper__input::-webkit-inner-spin-button, .inv-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inv-hint { font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.inv-hint--center { text-align: center; margin-top: 12px; }
.inv-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.inv-form__error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fef3f2; color: #b42318; font-size: 14px; line-height: 1.45; }
.inv-rsvp__done, .inv-rsvp__closed { text-align: center; padding: 10px 0 4px; }
.inv-rsvp__check, .inv-rsvp__big-ico {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.inv-rsvp__check svg { width: 30px; height: 30px; }
.inv-rsvp__big-ico { padding: 16px; }
.inv-rsvp__done-text, .inv-rsvp__closed p {
  font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--c-primary); text-wrap: balance;
}

/* ---- бэлэг илгээх (данс, QR) */
.inv-gift__msg {
  max-width: 34em; margin: -10px auto 30px; font-size: 16px; line-height: 1.8; white-space: pre-line; color: var(--c-text); text-wrap: pretty;
}
.inv-gift__cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.inv-gift-card {
  display: flex; flex-direction: column; align-items: center; flex: 1 1 260px; min-width: 0; max-width: 390px;
  padding: 26px 20px 22px; text-align: center;
}
/* QR-гүй карт QR-тай картын хажууд (ижил өндөр) агуулгаа босоо тэнхлэгт төвлөрүүлнэ */
.inv-gift-card--noqr { justify-content: center; }
.inv-gift-card__icon {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.inv-gift-card__icon svg { width: 26px; height: 26px; }
.inv-gift-card__label {
  max-width: 100%; margin-bottom: 16px; font-family: var(--f-display); font-weight: 600; line-height: 1.25; color: var(--c-primary);
  font-size: clamp(20px, calc(var(--cq1) * 5.8), 24px); font-size: clamp(20px, 5.8cqi, 24px); text-wrap: balance;
}
.inv-gift-card__icon + .inv-gift-card__label { margin-bottom: 12px; }
.inv-gift-card__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inv-gift-card__qr-frame {
  position: relative; display: block; width: 184px; max-width: 100%; aspect-ratio: 1; padding: 8px;
  border-radius: min(var(--radius), 14px); background: #fff; line-height: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 26px -16px var(--c-shadow);
}
.inv button.inv-gift-card__qr-frame { cursor: zoom-in; }
.inv-gift-card__qr-frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.inv-gift-card__zoom {
  position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
  transition: transform .2s;
}
.inv-gift-card__zoom svg { width: 19px; height: 19px; }
@media (hover: hover) { .inv button.inv-gift-card__qr-frame:hover .inv-gift-card__zoom { transform: scale(1.08); } }
.inv-gift-card__save {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin-top: 4px; padding: 8px 14px;
  border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--c-accent-ink); text-decoration: none;
  transition: background-color .2s;
}
.inv-gift-card__save svg { width: 18px; height: 18px; }
.inv-gift-card__save:hover { background: var(--c-accent-soft); }
.inv-gift-card__acct { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.inv-gift-card__qr ~ .inv-gift-card__acct { margin-top: 12px; padding-top: 18px; border-top: 1px dashed var(--c-line); }
.inv-gift-card__bank { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--c-muted); }
.inv-gift-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: 100%; }
.inv-gift-card__num {
  min-width: 0; max-width: 100%; font-family: var(--f-display); font-weight: 600; line-height: 1.25; color: var(--c-primary);
  font-size: clamp(21px, calc(var(--cq1) * 6.6), 27px); font-size: clamp(21px, 6.6cqi, 27px);
  letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.inv-gift-card__num.is-long { font-size: clamp(17px, calc(var(--cq1) * 5), 21px); font-size: clamp(17px, 5cqi, 21px); letter-spacing: .02em; }
.inv-gift-card__holder { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--c-text); text-wrap: balance; }
.inv-gift-card__holder-label { color: var(--c-muted); }
.inv-gift-card__holder-name { font-weight: 600; }
.inv-btn--sm { min-height: 40px; padding: 8px 16px; gap: 7px; font-size: 14px; }
.inv-btn--sm svg { width: 17px; height: 17px; }
.inv-gift-card__copy.is-done { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.inv-gift__hint { max-width: 30em; margin: 24px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--c-muted); text-wrap: balance; }

/* ---- төгсгөл */
.inv-sec--footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.inv-footer__motif { width: 64px; margin: 0 auto 20px; }
.inv-footer__script { font-family: var(--f-script); font-size: clamp(36px, calc(var(--cq1) * 10.5), 54px); font-size: clamp(36px, 10.5cqi, 54px); line-height: 1.2; }
.inv-footer__names { margin-top: 12px; font-family: var(--f-display); font-size: 25px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.inv-footer__date { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--c-hero-a60); font-variant-numeric: lining-nums; }
.inv-footer__credit { max-width: 34em; margin: 38px auto 0; font-size: 11.5px; line-height: 1.55; color: var(--c-hero-a60); text-wrap: balance; }
/* «Ирээрэй-ээр бүтээв» — нийтлэгдсэн урилгын хамгийн доор (renderer.js buildMadeWith) */
.inv-made-wrap { display: flex; justify-content: center; padding: 22px 16px calc(84px + env(safe-area-inset-bottom)); background: var(--c-bg); }
.inv-made {
  display: inline-flex; align-items: center; gap: 12px; max-width: 360px; padding: 10px 18px 10px 10px; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text); text-decoration: none;
  box-shadow: 0 6px 18px -12px var(--c-shadow); font-family: var(--f-body, inherit); text-align: left;
  transition: transform .2s, box-shadow .2s;
}
.inv-made:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--c-shadow); }
.inv-made__mark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1d2a44; color: #d4af37; }
.inv-made__mark svg { width: 22px; height: 22px; }
.inv-made__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-made__by { font-size: 12px; line-height: 1.3; color: var(--c-muted); }
.inv-made__cta { font-size: 13.5px; line-height: 1.3; font-weight: 600; color: var(--c-text); }

/* ================================================================ Хөгжмийн товч */
.inv-music {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-line);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4);
}
.inv-music--fixed { position: fixed; z-index: 40; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
.inv-music__ico { width: 22px; height: 22px; }
.inv-music__slash {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; border-radius: 2px; background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 0 2px var(--c-surface);
}
.inv-music.is-playing .inv-music__slash { display: none; }
.inv-music.is-playing::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--c-accent); pointer-events: none;
}
.inv-sticky { position: sticky; top: 10px; z-index: 30; height: 0; display: flex; justify-content: flex-end; padding-right: 10px; }
.inv--live.is-locked .inv-music--fixed { opacity: 0; pointer-events: none; }

/* ================================================================ Нүүр хуудас (дугтуй) */
.inv-cover {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow-x: hidden; overflow-y: auto;
  padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--hero-bg); color: var(--c-hero-text);
  overscroll-behavior: contain;
}
.inv-cover__pat {
  position: absolute; inset: 0; pointer-events: none; background: var(--c-hero-text); opacity: .07;
  -webkit-mask: var(--pat) center / 140px repeat; mask: var(--pat) center / 140px repeat;
}
.inv-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; }
.inv-cover__greet { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; opacity: .9; text-wrap: balance; }
.inv-cover__title { margin: 8px 0 4px; max-width: 100%; font-size: clamp(44px, 14vw, 72px); line-height: 1.12; text-wrap: balance; }
.inv-cover__title.inv-font-display { font-size: clamp(38px, 11vw, 60px); }
.inv-cover__btn { margin-top: 6px; min-width: 210px; font-size: 16px; }
.inv-cover__hint { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; opacity: .8; }

.inv-env { position: relative; width: min(300px, 78vw); aspect-ratio: 10 / 7; margin: 26px 0 38px; perspective: 1000px; }
.inv-env > * { position: absolute; }
.inv-env__back { inset: 0; border-radius: 10px; background: var(--c-surface-3); box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .45); }
.inv-env__letter {
  z-index: 1; left: 7%; right: 7%; top: 6%; height: 86%; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding-top: 11%; border-radius: 6px; background: var(--c-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.inv-env__letter-orn { width: 58%; }
.inv-env__letter-line { display: block; width: 58%; height: 3px; border-radius: 3px; background: var(--c-primary-soft); }
.inv-env__letter-line--short { width: 38%; }
.inv-env__side {
  z-index: 2; inset: 0; border-radius: 10px; background: var(--c-surface-2);
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}
.inv-env__pocket {
  z-index: 3; inset: 0; border-radius: 0 0 10px 10px; background: var(--c-surface);
  clip-path: polygon(0 100%, 0 96%, 50% 40%, 100% 96%, 100% 100%);
}
.inv-env__names {
  z-index: 4; left: 0; right: 0; bottom: 7%; margin: 0 auto;
  font-family: var(--f-script); font-size: clamp(21px, 6.6vw, 27px); line-height: 1.12; color: var(--c-primary);
  max-width: 80%; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.inv-env__names.is-long { font-size: clamp(18px, 5.4vw, 22px); }
.inv-env__names.is-xlong { font-size: clamp(15px, 4.6vw, 18px); max-width: 88%;
}
.inv-env__flap {
  z-index: 5; left: 0; right: 0; top: 0; height: 50%; transform-origin: 50% 0;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)) drop-shadow(0 6px 10px rgba(0, 0, 0, .08));
  transition: transform .65s cubic-bezier(.45, .05, .3, 1), z-index 0s linear .32s;
}
.inv-env__flap::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.inv-env__seal {
  z-index: 6; left: 50%; top: 50%; width: 54px; height: 54px; padding: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 6px 14px -4px rgba(0, 0, 0, .4);
  transition: opacity .3s, transform .35s;
}
.inv-env__seal svg { width: 100%; height: 100%; }
.inv-cover.is-opening .inv-env__flap { transform: rotateX(180deg); z-index: 0; }
.inv-cover.is-opening .inv-env__seal { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.inv-cover.is-opening .inv-env__letter { transform: translateY(-46%); transition: transform .75s cubic-bezier(.2, .7, .2, 1) .42s; }
.inv-cover.is-opening { opacity: 0; visibility: hidden; transition: opacity .75s ease 1.05s, visibility 0s linear 1.85s; }
.inv-cover.is-opening .inv-cover__btn, .inv-cover.is-opening .inv-cover__hint { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: no-preference) {
  .inv-cover__btn { animation: inv-glow 2.6s ease-in-out 1s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-cover.is-opening { transition: opacity .25s ease, visibility 0s linear .3s; }
  .inv-cover * { transition: none !important; animation: none !important; }
}

/* ================================================================ Туслах давхаргууд */
.inv-banner {
  position: fixed; z-index: 55; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 24px); padding: 8px 16px; border-radius: 999px; background: #1f2430; color: #fff;
  font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.inv-toast {
  position: fixed; z-index: 65; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 22px; background: rgba(22, 24, 30, .94); color: #fff;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.inv-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* preview: root-ийн төгсгөлд наалддаг өндөргүй хост → toast гүйлгэх хүрээний доод хэсэгт, root дотроо */
.inv-toast-host { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 65; height: 0; pointer-events: none; }
.inv-toast-host .inv-toast { position: absolute; bottom: 22px; max-width: calc(100% - 32px); }

.inv-lightbox {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 60px 12px;
  background: rgba(8, 10, 14, .95); opacity: 0; transition: opacity .25s;
}
.inv-lightbox.is-open { opacity: 1; }
.inv-lightbox__img {
  max-width: calc(100vw - 24px); max-height: calc(100vh - 130px); max-height: calc(100svh - 130px);
  width: auto; height: auto; object-fit: contain; border-radius: 6px; -webkit-user-select: none; user-select: none;
}
.inv-lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.inv-lightbox__btn svg { width: 24px; height: 24px; }
.inv-lightbox__close { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
.inv-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.inv-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.inv-lightbox__count {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-family: var(--f-body); font-size: 13px; letter-spacing: .12em;
}
/* Бэлгийн QR томруулах: цагаан дэвсгэртэй QR + тайлбар + «QR хадгалах» */
.inv-lightbox--qr { padding: calc(64px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; }
.inv-lightbox__qr {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(400px, 100%); margin: auto;
  color: #fff; text-align: center; font-family: var(--f-body);
}
.inv-lightbox--qr .inv-lightbox__img {
  /* дөрвөлжин QR: дэлгэцийн өндөрт багтах хэмжээтэй (хэвтээ утсан дээр ч 180px-ээс багагүй, илүү бол гүйлгэнэ) */
  width: min(400px, 100%, max(180px, calc(100vh - 250px))); width: min(400px, 100%, max(180px, calc(100svh - 250px)));
  max-width: 100%; height: auto; max-height: none; padding: 14px; border-radius: 16px; background: #fff;
}
.inv-lightbox__cap { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; text-wrap: balance; }
.inv-lightbox__save { min-height: 48px; }
.inv-lightbox__hint { max-width: 26em; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); text-wrap: balance; }
.inv-fatal { padding: 80px 24px; text-align: center; font-family: system-ui, sans-serif; color: #444; }

/* ================================================================ Карт (thumb) */
.inv--thumb { overflow: hidden; aspect-ratio: 390 / 680; --cq1: 3.9px; /* тайз үргэлж 390px */ }
.inv-stage { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; }
.inv--thumb .inv-page { height: 100%; }
.inv--thumb *, .inv--thumb *::before, .inv--thumb *::after { animation: none !important; transition: none !important; }

/* ================================================================ Хөдөлгөөн */
@keyframes inv-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes inv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inv-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes inv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes inv-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
@keyframes inv-glow {
  0%, 100% { box-shadow: 0 12px 26px -14px var(--c-shadow), 0 0 0 0 var(--c-line-soft); }
  60% { box-shadow: 0 12px 26px -14px var(--c-shadow), 0 0 0 14px var(--c-accent-a0); }
}

@media (prefers-reduced-motion: no-preference) {
  .inv--live .inv-hero__text > *, .inv--live .inv-arch, .inv--live .inv-pola, .inv--live .inv-heart, .inv--live .inv-circle,
  .inv--live .inv-collage { opacity: 0; }
  .inv--live.is-opened .inv-hero__text > *, .inv--live.is-opened .inv-arch, .inv--live.is-opened .inv-pola,
  .inv--live.is-opened .inv-heart, .inv--live.is-opened .inv-circle, .inv--live.is-opened .inv-collage { animation: inv-up 1s cubic-bezier(.2, .7, .2, 1) both; }
  .inv--live.is-opened .inv-arch, .inv--live.is-opened .inv-heart, .inv--live.is-opened .inv-circle { animation-name: inv-fade; animation-duration: 1.2s; }
  .inv--live.is-opened .inv-hero__img, .inv--live.is-opened .inv-collage__img, .inv--live.is-opened .inv-ed__img { animation: inv-zoom 9s ease-out both; }
  .inv--live.is-opened .inv-hero__text > :nth-child(2) { animation-delay: .1s; }
  .inv--live.is-opened .inv-hero__text > :nth-child(3) { animation-delay: .2s; }
  .inv--live.is-opened .inv-hero__text > :nth-child(4) { animation-delay: .32s; }
  .inv--live.is-opened .inv-hero__text > :nth-child(5) { animation-delay: .44s; }
  .inv--live.is-opened .inv-hero__text > :nth-child(6) { animation-delay: .56s; }
  .inv--live.is-opened .inv-hero__text > :nth-child(7) { animation-delay: .68s; }
  .inv--live.is-opened .inv-hero__img { animation: inv-zoom 9s ease-out both; }
  .inv--live.is-opened .inv-hero__cue svg { animation: inv-bob 2.2s ease-in-out 1.6s infinite; }
  .inv--live .inv-music.is-playing::before { animation: inv-pulse 2.2s ease-out infinite; }

  .inv--live .inv-rv { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .inv--live .inv-rv.is-in { opacity: 1; transform: none; }
  .inv--live .inv-cards > .inv-rv:nth-child(2), .inv--live .inv-gallery > .inv-rv:nth-child(3n+2),
  .inv--live .inv-gift__cards > .inv-rv:nth-child(2) { transition-delay: .1s; }
  .inv--live .inv-cards > .inv-rv:nth-child(3), .inv--live .inv-gallery > .inv-rv:nth-child(3n),
  .inv--live .inv-gift__cards > .inv-rv:nth-child(3) { transition-delay: .2s; }
}

@media print {
  .inv-cover, .inv-music, .inv-toast, .inv-banner, .inv-lightbox, .inv-hero__cue { display: none !important; }
  .inv .inv-rv, .inv .inv-hero__text > *, .inv .inv-pola, .inv .inv-heart, .inv .inv-circle, .inv .inv-collage { opacity: 1 !important; transform: none !important; }
  .inv-bg { display: none !important; }
}

/* ================================================================ 2026-10 R2 (T1): кодоор зурсан дэвсгэр (template.scene)
   Давхарга бүр .sl--<slot>; өнгө нь .k* анги → --sc-* (renderer.js sceneVarsFor). SVG бүгд currentColor. */
.inv {
  --sc-band: min(calc(var(--cq1) * 46), calc(var(--hero-vh) * .3)); --sc-band: min(46cqi, calc(var(--hero-vh) * .3));
  --sc-top: min(calc(var(--cq1) * 34), calc(var(--hero-vh) * .24)); --sc-top: min(34cqi, calc(var(--hero-vh) * .24));
}
.inv-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; line-height: 0; color: var(--sc-i); }
.inv-scene .sl { position: absolute; display: block; }
.inv-scene .sl > svg { display: block; width: 100%; height: 100%; }
.inv-scene .kf { color: var(--sc-f); } .inv-scene .km { color: var(--sc-m); } .inv-scene .kn { color: var(--sc-n); }
.inv-scene .ki { color: var(--sc-i); } .inv-scene .ks { color: var(--sc-s); } .inv-scene .kl { color: var(--sc-l); }
.inv-scene .kg { color: var(--sc-g); } .inv-scene .kh { color: var(--sc-h); } .inv-scene .kp { color: var(--sc-p); }
.inv-scene .kc { color: var(--sc-c); } .inv-scene .kz { color: var(--sc-z); } .inv-scene .kd { color: var(--sc-d); }
.inv-scene .kt { color: var(--sc-t); } .inv-scene .kb { color: var(--sc-b); }
.inv-mg__wreath .kf { color: var(--sc-f); } .inv-mg__wreath .km { color: var(--sc-m); } .inv-mg__wreath .kg { color: var(--sc-g); }
.inv-mg__wreath .ks { color: var(--sc-s); } .inv-mg__wreath .kc { color: var(--sc-c); } .inv-mg__wreath .kh { color: var(--sc-h); }

.sl--band { left: 0; right: 0; bottom: 0; height: var(--sc-band); }
.sl--band.sl--low { height: calc(var(--sc-band) * .72); }
.sl--band.sl--hi { height: calc(var(--sc-band) * 1.2); }
.sl--top { left: 0; right: 0; top: 0; height: var(--sc-top); }
.sl--top.sl--thin { height: calc(var(--sc-top) * .5); }
.sl--top.sl--lights { height: calc(var(--sc-top) * 1.05); }
.sl--sky, .sl--port, .sl--land { inset: 0; }
.sl--land { display: none; }
@container inv (min-width: 760px) { .sl--land { display: block; } .sl--port { display: none; } }
.sl--tl, .sl--tr, .sl--bl, .sl--br { width: var(--w, 50%); max-width: var(--max, 480px); }
.sl--tl > svg, .sl--tr > svg, .sl--bl > svg, .sl--br > svg { height: auto; }
.sl--tl { left: 0; top: 0; } .sl--tr { right: 0; top: 0; } .sl--bl { left: 0; bottom: 0; } .sl--br { right: 0; bottom: 0; }
.sl--left, .sl--right { top: 0; bottom: 0; width: var(--w, 36%); max-width: var(--max, 300px); }
.sl--left { left: 0; } .sl--right { right: 0; }
.sl--tr.sl--down, .sl--right.sl--down { top: 7%; }
.sl--flip-x { transform: scaleX(-1); } .sl--flip-y { transform: scaleY(-1); } .sl--flip-xy { transform: scale(-1, -1); }
.sl--rocket { left: 3%; top: 6%; }
.sl--bokeh { filter: blur(3px); }
.sl--soft { opacity: .75; }
/* Монгол хээтэй хүрээ (khee): зурвас нь маскаар давтагдана */
.sl--khee { inset: 16px; color: var(--sc-g); }
.kx { position: absolute; background: currentColor; opacity: .8; }
.kx--t, .kx--b { left: 30px; right: 30px; height: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M0 1.5H20M0 22.5H20M2 22.5V6H18V18H6V10H14V14H10' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") 0 0 / 10px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M0 1.5H20M0 22.5H20M2 22.5V6H18V18H6V10H14V14H10' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") 0 0 / 10px 12px repeat-x; }
.kx--t { top: 0; } .kx--b { bottom: 0; transform: scaleY(-1); }
.kx--l, .kx--r { top: 30px; bottom: 30px; width: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1.5 0V20M22.5 0V20M22.5 2H6V18H18V6H10V14H14V10' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") 0 0 / 12px 10px repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1.5 0V20M22.5 0V20M22.5 2H6V18H18V6H10V14H14V10' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") 0 0 / 12px 10px repeat-y; }
.kx--l { left: 0; } .kx--r { right: 0; transform: scaleX(-1); }
.sl--kc-tl, .sl--kc-tr, .sl--kc-bl, .sl--kc-br { width: 46px; height: 46px; }
.sl--kc-tl { left: 9px; top: 9px; } .sl--kc-tr { right: 9px; top: 9px; } .sl--kc-bl { left: 9px; bottom: 9px; } .sl--kc-br { right: 9px; bottom: 9px; }
.sl--kc-top { top: 30px; left: 50%; width: min(42%, 220px); transform: translateX(-50%); }
.sl--kc-top > svg { height: auto; }

/* ---- хэрэглээний орчин */
.inv-scene--deco { opacity: .92; }
.inv-scene--frame .sl--band { height: 40%; }
.inv-scene--frame .sl--top { height: 28%; }
.inv-scene--frame .sl--tl, .inv-scene--frame .sl--tr, .inv-scene--frame .sl--bl, .inv-scene--frame .sl--br {
  width: min(calc(var(--w, 50%) * 1.3), 82%); max-width: none;
}
.inv-scene--frame .sl--left, .inv-scene--frame .sl--right { width: calc(var(--w, 36%) * 1.3); max-width: none; }
.inv-scene--frame .sl--khee { inset: 7px; }
.inv-scene--frame .kx--t, .inv-scene--frame .kx--b { left: 18px; right: 18px; height: 8px; -webkit-mask-size: 6.7px 8px; mask-size: 6.7px 8px; }
.inv-scene--frame .kx--l, .inv-scene--frame .kx--r { top: 18px; bottom: 18px; width: 8px; -webkit-mask-size: 8px 6.7px; mask-size: 8px 6.7px; }
.inv-scene--frame .sl--kc-tl, .inv-scene--frame .sl--kc-tr, .inv-scene--frame .sl--kc-bl, .inv-scene--frame .sl--kc-br { width: 28px; height: 28px; }
.inv-scene--frame .sl--kc-top { top: 18px; }
.inv-scene--footer { z-index: -1; --sc-band: min(calc(var(--cq1) * 30), 150px); --sc-band: min(30cqi, 150px); --sc-top: 90px; }
.inv-scene--footer .sl--tl, .inv-scene--footer .sl--tr, .inv-scene--footer .sl--bl, .inv-scene--footer .sl--br {
  width: calc(var(--w, 50%) * .5); max-width: calc(var(--max, 480px) * .55);
}
.inv-scene--footer .sl--left, .inv-scene--footer .sl--right { width: calc(var(--w, 36%) * .55); }
.inv-scene--footer .sl--sky { opacity: .8; }
.inv-scene--footer .sl--port, .inv-scene--footer .sl--land { opacity: .55; }
.inv-sec--footer.has-band { padding-bottom: calc(min(calc(var(--cq1) * 30), 150px) + 34px + env(safe-area-inset-bottom)); padding-bottom: calc(min(30cqi, 150px) + 34px + env(safe-area-inset-bottom)); }
.inv-scene--corner { z-index: -1; opacity: .5; }
.inv-scene--corner .sl { width: calc(var(--w, 50%) * .6); max-width: calc(var(--max, 400px) * .6); }
.inv-scene--corner .sl--left, .inv-scene--corner .sl--right { width: calc(var(--w, 36%) * .55); }
.inv-scene--corner .sl--kc-tr { width: 40px; height: 40px; right: 12px; top: 12px; }

/* Нүүр: дэвсгэртэй үед текстийн ард зөөлөн бүрхүүл (AA тодрол), доод туузтай үед текстийг дээш */
.inv-hero.has-scene .inv-hero__text { position: relative; isolation: isolate; }
.inv-hero.has-scene .inv-hero__text::before {
  content: ''; position: absolute; z-index: -1; inset: -16% -12%; pointer-events: none;
  background: radial-gradient(closest-side, var(--sc-veil), var(--sc-veil) 46%, var(--sc-veil0));
}
.inv-hero.has-scene .inv-frame .inv-hero__text::before, .inv-hero.has-scene .inv-ed::before,
.inv-hero.has-scene .inv-letter .inv-hero__text::before { display: none; }
.inv-hero.has-band .inv-hero__inner { padding-bottom: calc(var(--sc-band) * .82 + 24px); }
.inv--thumb .inv-hero.has-band .inv-hero__inner { padding-bottom: calc(var(--sc-band) * .55 + 16px); }
.inv-hero--fullbleed.has-band .inv-hero__inner { padding-bottom: calc(var(--sc-band) + 26px + env(safe-area-inset-bottom)); }
.inv--thumb .inv-hero--fullbleed.has-band .inv-hero__inner { padding-bottom: calc(var(--sc-band) * .8 + 12px); }
.inv-hero.has-scene .inv-hero__cue { color: inherit; }
.inv-mono--veil { border-radius: 50%; background: radial-gradient(closest-side, var(--sc-veil), var(--sc-veil) 58%, var(--sc-veil0)); }
.inv-mono--veil::before { border-color: var(--c-hero-a25); }

/* AI зураг (template.art) */
.inv-art { position: absolute; inset: 0; overflow: hidden; }
.inv-art__img { width: 100%; height: 100%; object-fit: cover; }
.inv-art__tint { position: absolute; inset: 0; }

/* ================================================================ Шинэ нүүрүүд: window, monogram, letter */
/* ---- Нуман цонх */
.inv-hero--window { justify-content: center; }
.inv-hero--window .inv-hero__inner { padding: 48px 24px 76px; }
.inv--thumb .inv-hero--window { justify-content: flex-start; }
.inv--thumb .inv-hero--window .inv-hero__inner { padding: 40px 22px 26px; }
.inv-hero--window .inv-hero__deco .inv-hero__pat { background: var(--c-hero-text); opacity: .07; }
.inv-hero--window .inv-hero__deco {
  background: radial-gradient(ellipse 70% 50% at 50% 40%, var(--c-hero-a10), transparent 70%);
}
.inv-win {
  position: relative; width: min(calc(var(--cq1) * 60), 290px, calc(var(--hero-vh) * .3)); width: min(60cqi, 290px, calc(var(--hero-vh) * .3));
  aspect-ratio: 300 / 420; margin: 6px auto 44px;
}
.inv--thumb .inv-win { width: calc(var(--cq1) * 48); width: 48cqi; margin-bottom: 34px; }
.inv-win__view {
  position: absolute; inset: 2% 2% 0; overflow: hidden; background: var(--hero-bg);
  border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
.inv-win__view .inv-hero__media { z-index: 0; }
.inv-win__view .inv-hero__img { object-position: center 40%; }
.inv-win__frame { position: absolute; inset: 0; color: var(--c-surface); pointer-events: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .28)); }
.inv-win__frame svg { width: 100%; height: 100%; }
.inv-win__sill {
  position: absolute; left: -8%; right: -8%; bottom: -4%; height: 5%; border-radius: 3px; background: var(--c-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 20px -12px rgba(0, 0, 0, .45);
}
.inv-hero--window .inv-mono { width: 70%; }
@container inv (min-width: 860px) {
  .inv-hero--window .inv-hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 76px; align-items: center; max-width: 960px; }
  .inv-hero--window .inv-win { width: 320px; margin: 0; }
  .inv-hero--window .inv-hero__text { align-items: flex-start; text-align: left; }
  .inv-hero--window .inv-hero__divider { margin-left: 0; }
}

/* ---- Монограм */
.inv-hero--monogram .inv-hero__inner { padding: 46px 24px 74px; }
.inv--thumb .inv-hero--monogram { justify-content: flex-start; }
.inv--thumb .inv-hero--monogram .inv-hero__inner { padding: 36px 22px 24px; }
.inv-mg {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 0 auto 22px;
  width: min(calc(var(--cq1) * 72), 330px, calc(var(--hero-vh) * .36)); width: min(72cqi, 330px, calc(var(--hero-vh) * .36));
}
.inv--thumb .inv-mg { width: calc(var(--cq1) * 64); width: 64cqi; margin-bottom: 14px; }
.inv-mg__wreath { position: absolute; inset: 0; }
.inv-mg__wreath svg { width: 100%; height: 100%; }
.inv-mg__letters {
  position: relative; display: flex; align-items: baseline; justify-content: center; gap: .04em; margin-top: 2%;
  font-family: var(--f-script); font-weight: 400; line-height: 1; color: var(--c-primary);
  font-size: clamp(66px, calc(var(--cq1) * 23), 124px); font-size: clamp(66px, 23cqi, 124px);
}
.inv-mg__letters.is-pair { font-size: clamp(56px, calc(var(--cq1) * 19), 104px); font-size: clamp(56px, 19cqi, 104px); }
.inv-mg__amp { font-size: .42em; color: var(--c-accent-ink); margin: 0 .06em; align-self: center; }
.inv-mg__big { width: 34%; color: var(--c-accent); }
.inv-mg__orn { position: absolute; top: 6%; left: 50%; width: 13%; transform: translateX(-50%); }
.inv-mg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .13; filter: saturate(.6); }
.inv-hero--monogram .inv-hero__title { margin-top: 2px; }
@container inv (min-width: 860px) {
  .inv-hero--monogram .inv-mg { width: 340px; }
}

/* ---- Захидал */
.inv-hero--letter { justify-content: center; }
.inv-hero--letter .inv-hero__inner { max-width: 600px; padding: 44px 18px 70px; }
.inv--thumb .inv-hero--letter .inv-hero__inner { padding: 30px 16px 20px; }
.inv-letter { position: relative; transform: rotate(-1.4deg); }
.inv-letter__paper {
  position: relative; padding: 26px 24px 30px; border-radius: 3px; background: var(--c-surface); color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 32px 60px -26px rgba(0, 0, 0, .5);
  background-image: linear-gradient(180deg, transparent 0 34%, rgba(0, 0, 0, .035) 34% calc(34% + 1px), rgba(255, 255, 255, .5) calc(34% + 1px) calc(34% + 2px), transparent calc(34% + 2px));
}
.inv-letter__paper::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--c-line-soft); border-radius: 2px; pointer-events: none; }
.inv-letter__stamp {
  position: absolute; z-index: 1; top: 18px; right: 18px; width: 70px; height: 84px; padding: 4px;
  border: 5px dotted #fffdf8; background: #fffdf8 padding-box; transform: rotate(4deg);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .28));
}
.inv-letter__stamp-in { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--hero-bg); color: var(--c-hero-text); }
.inv-letter__stamp-img { width: 100%; height: 100%; object-fit: cover; }
.inv-letter__stamp-art { position: absolute; inset: 0; }
.inv-letter__stamp-art .inv-hero__art { position: absolute; inset: 0; }
.inv-letter__stamp-orn { position: absolute; left: 22%; right: 22%; top: 24%; color: var(--c-hero-text); opacity: .9; }
.inv-letter__postmark { position: absolute; z-index: 2; top: 30px; right: 66px; width: 104px; color: var(--c-accent-ink); opacity: .5; transform: rotate(-12deg); pointer-events: none; }
.inv-letter__postmark svg { width: 100%; height: auto; }
.inv-letter__postmark-date {
  position: absolute; left: 0; top: 0; width: 58.8%; height: 100%; display: grid; place-items: center;
  font: 700 13px/1 var(--f-body); letter-spacing: .08em; font-variant-numeric: lining-nums tabular-nums;
}
.inv-letter .inv-hero__text { position: relative; }
.inv-hero__greet {
  align-self: stretch; min-height: 92px; padding: 6px 96px 0 2px; margin-bottom: 8px; text-align: left;
  font-family: var(--f-script); font-weight: 400; line-height: 1.2; color: var(--c-accent-ink);
  font-size: clamp(24px, calc(var(--cq1) * 7), 34px); font-size: clamp(24px, 7cqi, 34px); text-wrap: balance;
}
.inv-letter .inv-hero__tagline { color: var(--c-accent-ink); opacity: 1; }
.inv-letter .inv-hero__title, .inv-letter .inv-dateblock { color: var(--c-primary); }
.inv-letter .inv-hero__names { color: var(--c-text); }
.inv-letter .inv-dateblock { margin-top: 22px; }
.inv--thumb .inv-hero__greet { min-height: 84px; }
@container inv (min-width: 600px) {
  .inv-letter__paper { padding: 34px 48px 40px; }
}

/* ================================================================ Зураггүй хүрээний орлуулга (хөрөг, зургийн блок) */
.inv-portrait__frame { position: relative; }
.inv-portrait__ph { position: absolute; inset: 0; }
.inv-portrait__ph .inv-hero__art, .inv-pblock .inv-hero__art { position: absolute; inset: 0; background: var(--hero-bg); color: var(--c-hero-text); }
.inv-portrait.is-placeholder .inv-mono { width: 74%; }
.inv-pblock.is-placeholder .inv-pblock__frame { position: relative; aspect-ratio: 4 / 3; }
.inv-pblock--polaroid.is-placeholder .inv-pblock__frame { aspect-ratio: 4 / 5; }
.inv-pblock--circle.is-placeholder .inv-pblock__frame { aspect-ratio: 1; }
.inv-pblock--arch.is-placeholder .inv-pblock__frame { aspect-ratio: 3 / 4; }
.inv-pblock.is-placeholder .inv-mono { width: min(64%, 260px); }

/* ================================================================ «Цаг, газар»: хуанли, тасалбар, товчнууд */
.inv-wrap--narrow { max-width: 500px; }
.inv-details__actions { margin-top: 26px; }
.inv-details__actions .inv-actions { margin-top: 0; }
.inv-calbtn.is-open { background: var(--c-accent-soft); }
.inv-calmenu { display: grid; gap: 10px; width: min(100%, 420px); margin: 14px auto 0; }
.inv-calmenu__item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 58px;
  padding: 10px 18px; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-primary); text-decoration: none; text-align: left; box-shadow: 0 8px 20px -14px var(--c-shadow);
}
.inv-calmenu__item svg { grid-row: 1 / 3; width: 24px; height: 24px; color: var(--c-accent-ink); }
.inv-calmenu__label { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.inv-calmenu__hint { font-size: 12.5px; line-height: 1.3; color: var(--c-muted); }
.inv-calmenu__item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.inv-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- хуанли */
.inv-cal { padding: 22px 16px 22px; text-align: center; }
.inv-cal__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line-soft);
}
.inv-cal__month { font-family: var(--f-display); font-size: 27px; font-weight: 600; line-height: 1.1; color: var(--c-primary); }
.inv-cal__year { font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--c-muted); font-variant-numeric: lining-nums; }
.inv-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; padding: 0 2px; }
.inv-cal__wd { padding: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); }
.inv-cal__wd.is-we { color: var(--c-accent-ink); }
.inv-cal__d {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 52px; margin: 0 auto; width: 100%;
  font-size: 15.5px; line-height: 1; color: var(--c-text); font-variant-numeric: lining-nums tabular-nums;
}
.inv-cal__d.is-we { color: var(--c-accent-ink); }
.inv-cal__n { position: relative; z-index: 1; }
.inv-cal__d.is-event .inv-cal__n { font-family: var(--f-display); font-size: 21px; font-weight: 700; color: var(--c-primary); }
.inv-cal__ring { position: absolute; left: 50%; top: 50%; width: 132%; aspect-ratio: 1; max-width: 66px; transform: translate(-50%, -50%) rotate(-8deg); color: var(--c-accent); }
.inv-cal__ring svg { width: 100%; height: 100%; }
.inv-cal__heart { position: absolute; z-index: 2; right: -14%; top: -20%; width: 46%; max-width: 24px; color: var(--c-accent); }
.inv-cal__heart svg { width: 100%; height: auto; }
.inv-cal__foot { display: grid; gap: 12px; margin-top: 14px; padding: 16px 8px 0; border-top: 1px dashed var(--c-line); }
.inv-cal__when {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--c-primary);
}
.inv-cal__dot { color: var(--c-accent); }
.inv-cal__where { display: flex; align-items: flex-start; justify-content: center; gap: 10px; text-align: left; }
.inv-cal__pin { margin-top: 2px; color: var(--c-accent-ink); }
.inv-cal__venue { font-weight: 600; line-height: 1.4; color: var(--c-text); }
.inv-cal__addr { font-size: 14.5px; line-height: 1.6; color: var(--c-muted); }
@container inv (min-width: 520px) { .inv-cal { padding: 28px 26px 26px; } .inv-cal__d { font-size: 16.5px; } }

/* ---- тасалбар */
.inv-ticket {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; background: var(--c-surface);
  border-radius: calc(var(--radius) * .8 + 6px); box-shadow: 0 1px 2px var(--c-shadow), 0 20px 44px -20px var(--c-shadow);
}
.inv--cards-outline .inv-ticket { border: 1px solid var(--c-line); }
.inv--cards-glass .inv-ticket { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.inv--dark-bg.inv--cards-glass .inv-ticket { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.inv-ticket__main { min-width: 0; padding: 20px 22px 22px; }
.inv-ticket__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line-soft); }
.inv-ticket__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent-ink); }
.inv-ticket__orn { flex: none; width: 28px; }
.inv-ticket__title {
  margin-top: 14px; font-family: var(--f-display); font-weight: 600; line-height: 1.08; color: var(--c-primary);
  font-size: clamp(26px, calc(var(--cq1) * 7.6), 34px); font-size: clamp(26px, 7.6cqi, 34px); text-wrap: balance;
}
.inv-ticket__names { margin-top: 4px; font-family: var(--f-script); font-size: clamp(22px, calc(var(--cq1) * 6.6), 30px); font-size: clamp(22px, 6.6cqi, 30px); line-height: 1.2; color: var(--c-accent-ink); text-wrap: balance; }
.inv-ticket__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.inv-ticket__f { min-width: 0; }
.inv-ticket__f.is-wide { grid-column: 1 / -1; }
.inv-ticket__l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); line-height: 1.5; }
.inv-ticket__v {
  display: block; font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--c-primary);
  font-variant-numeric: lining-nums; overflow-wrap: anywhere;
}
.inv-ticket__addr { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--c-text); }
.inv-ticket__stub {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'l l code' 'day mon code' 'mono mono code';
  align-items: center; gap: 2px 10px; padding: 18px 22px 20px; border-top: 2px dashed var(--c-line);
}
.inv-ticket__stub::before, .inv-ticket__stub::after {
  content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-line-soft);
}
.inv-ticket__stub::before { left: -12px; } .inv-ticket__stub::after { right: -12px; }
.inv-ticket__stub > .inv-ticket__l { grid-area: l; }
.inv-ticket__day { grid-area: day; font-family: var(--f-display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--c-primary); font-variant-numeric: lining-nums; }
.inv-ticket__mon { grid-area: mon; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.inv-ticket__mono { grid-area: mono; font-family: var(--f-script); font-size: 24px; line-height: 1.3; color: var(--c-accent-ink); }
.inv-ticket__code {
  grid-area: code; justify-self: end; width: 74px; height: 58px; border-radius: 2px; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--c-text) 0 2px, transparent 2px 4px, var(--c-text) 4px 5px, transparent 5px 8px, var(--c-text) 8px 11px, transparent 11px 12px, var(--c-text) 12px 13px, transparent 13px 15px);
}
@container inv (min-width: 600px) {
  .inv-ticket { grid-template-columns: minmax(0, 1fr) 176px; }
  .inv-ticket__main { padding: 26px 30px 26px; }
  .inv-ticket__stub {
    grid-template-columns: 1fr; grid-template-areas: 'l' 'day' 'mon' 'mono' 'code'; justify-items: center; align-content: center; text-align: center;
    gap: 4px; padding: 22px 16px; border-top: 0; border-left: 2px dashed var(--c-line);
  }
  .inv-ticket__stub::before { top: -12px; left: -13px; } .inv-ticket__stub::after { top: auto; bottom: -12px; right: auto; left: -13px; }
  .inv-ticket__code { justify-self: center; width: 110px; height: 36px; margin-top: 8px; }
}

/* ================================================================ Нээлтийн нүүрүүд (envelope) */
.inv-cover > .inv-scene, .inv-cover > .inv-art { z-index: 0; }
.inv-cover > .inv-scene ~ .inv-cover__inner::before {
  content: ''; position: absolute; z-index: -1; inset: -12% -10%; pointer-events: none;
  background: radial-gradient(closest-side, var(--sc-veil), var(--sc-veil) 50%, var(--sc-veil0));
}
.inv-cover__inner { z-index: 1; }
.inv-cover__names {
  max-width: 100%; margin: 6px 0 2px; font-family: var(--f-script); font-size: clamp(30px, 9vw, 44px); line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere;
}
.inv-cover__names.is-long { font-size: clamp(26px, 7.4vw, 36px); }
.inv-cover__names.is-xlong { font-size: clamp(22px, 6vw, 30px); }
.inv-cover__names--big { font-size: clamp(46px, 13vw, 80px); }
.inv-cover__names--big.is-long { font-size: clamp(38px, 10.5vw, 64px); }
.inv-cover__names--big.is-xlong { font-size: clamp(30px, 8vw, 48px); }

/* ---- лацтай дугтуй */
.inv-env--wax .inv-env__back { background: var(--c-env-3); }
.inv-env--wax .inv-env__side { background: var(--c-env); }
.inv-env--wax .inv-env__pocket { background: var(--c-env-2); }
.inv-env--wax .inv-env__flap::before { background: linear-gradient(180deg, var(--c-env-2) 0%, var(--c-env) 100%); }
.inv-env--wax .inv-env__names { color: var(--c-on-env); }
.inv-wax { position: absolute; z-index: 6; left: 50%; top: 50%; width: 78px; height: 78px; transform: translate(-50%, -50%); }
.inv-wax__half { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.3, .6, .3, 1), opacity .6s ease .1s; }
.inv-wax__half--l { -webkit-clip-path: polygon(0 0, 53% 0, 46% 32%, 55% 56%, 47% 100%, 0 100%); clip-path: polygon(0 0, 53% 0, 46% 32%, 55% 56%, 47% 100%, 0 100%); }
.inv-wax__half--r { -webkit-clip-path: polygon(53% 0, 100% 0, 100% 100%, 47% 100%, 55% 56%, 46% 32%); clip-path: polygon(53% 0, 100% 0, 100% 100%, 47% 100%, 55% 56%, 46% 32%); }
.inv-wax__face { position: absolute; inset: 0; color: var(--c-accent); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.inv-wax__face > svg { width: 100%; height: 100%; }
.inv-wax__letters {
  position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2px;
  font-family: var(--f-script); font-size: 32px; line-height: 1; color: var(--c-accent-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3), 0 -1px 0 rgba(0, 0, 0, .28);
}
.inv-wax__letters.is-pair { font-size: 25px; letter-spacing: -.02em; }
.inv-wax__orn { position: absolute; inset: 27%; color: var(--c-accent-deep); }
.inv-wax__orn svg { width: 100%; height: 100%; }
.inv-cover--wax .inv-env__flap { transition: transform .65s cubic-bezier(.45, .05, .3, 1) .34s, z-index 0s linear .66s; }
.inv-cover--wax.is-opening .inv-wax__half--l { transform: translate(-34%, 46%) rotate(-30deg); opacity: 0; }
.inv-cover--wax.is-opening .inv-wax__half--r { transform: translate(34%, 46%) rotate(28deg); opacity: 0; }
.inv-cover--wax.is-opening .inv-env__letter { transition-delay: .8s; }
.inv-cover--wax.is-opening { transition: opacity .7s ease 1.3s, visibility 0s linear 2.05s; }

/* ---- нугалсан карт (хоёр хаалга) */
.inv-cover--card { background: transparent; padding: 0; perspective: 1800px; overflow: hidden; }
.inv-door {
  position: absolute; top: 0; bottom: 0; width: 50.3%; overflow: hidden; background: var(--hero-bg);
  transition: transform 1.05s cubic-bezier(.6, .04, .3, 1) .22s, opacity .5s ease .85s;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.inv-door--l { left: 0; transform-origin: 0 50%; box-shadow: inset -18px 0 28px -22px rgba(0, 0, 0, .45); }
.inv-door--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 18px 0 28px -22px rgba(0, 0, 0, .45); }
.inv-door__art { position: absolute; top: 0; bottom: 0; width: 198.8%; background: var(--hero-bg); }
.inv-door--l .inv-door__art { left: 0; } .inv-door--r .inv-door__art { right: 0; }
.inv-door__art > .inv-cover__pat { position: absolute; inset: 0; }
.inv-door__edge { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-accent); opacity: .75; }
.inv-door--l .inv-door__edge { right: 0; } .inv-door--r .inv-door__edge { left: 0; }
.inv-cover--card .inv-cover__inner {
  max-width: 340px; width: calc(100% - 44px); padding: 30px 24px 26px; border-radius: 22px; background: var(--c-surface); color: var(--c-text);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55), 0 0 0 1px var(--c-line-soft);
  transition: opacity .35s ease, transform .45s cubic-bezier(.4, 0, .2, 1);
}
.inv-cover--card .inv-cover__inner::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--c-line-soft); border-radius: 16px; pointer-events: none; }
.inv-cover--card .inv-cover__greet { color: var(--c-accent-ink); opacity: 1; }
.inv-cover--card .inv-cover__title { color: var(--c-primary); font-size: clamp(38px, 11vw, 56px); }
.inv-cover--card .inv-cover__title.inv-font-display { font-size: clamp(32px, 9vw, 46px); }
.inv-cover--card .inv-cover__names { color: var(--c-text); }
.inv-door__seal {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 14px auto 6px; border-radius: 50%; color: var(--c-on-accent);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%), var(--c-accent);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 8px 18px -6px rgba(0, 0, 0, .4);
}
.inv-door__seal svg { width: 60%; height: 60%; }
.inv-door__letters { font-family: var(--f-script); font-size: 24px; line-height: 1; }
.inv-cover--card .inv-cover__btn { margin-top: 18px; }
.inv-cover--card .inv-cover__hint { color: var(--c-muted); opacity: 1; }
.inv-cover--card.is-opening { opacity: 1; visibility: visible; transition: none; }
.inv-cover--card.is-opening .inv-cover__inner { opacity: 0; transform: scale(.94); }
.inv-cover--card.is-opening .inv-door--l { transform: rotateY(-104deg); opacity: 0; }
.inv-cover--card.is-opening .inv-door--r { transform: rotateY(104deg); opacity: 0; }

/* ---- энгийн (minimal) */
.inv-cover--minimal .inv-cover__inner { gap: 2px; }
.inv-cover__divider { width: min(200px, 56vw); margin: 14px auto 2px; }
.inv-cover__date { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .92; font-variant-numeric: lining-nums; }
.inv-ring-btn {
  position: relative; display: grid; place-items: center; width: 98px; height: 98px; margin-top: 34px; border-radius: 50%;
  color: var(--c-hero-text); background: var(--c-hero-a10); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.inv-ring-btn__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: .9; }
.inv-ring-btn__ring::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: .45; }
.inv-ring-btn__label { position: relative; padding-left: .24em; font-size: 14px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.inv-ring-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.inv-cover--minimal .inv-cover__inner { transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.inv-cover--minimal.is-opening .inv-cover__inner { opacity: 0; transform: translateY(-26px); }
.inv-cover--minimal.is-opening { transition: opacity .6s ease .32s, visibility 0s linear 1s; }
@media (prefers-reduced-motion: no-preference) {
  .inv-cover--minimal .inv-cover__btn { animation: none; }
  .inv-ring-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; animation: inv-pulse 2.6s ease-out 1s infinite; }
  /* дэвсгэрийн хөдөлгөөн → «2026-10 R3: хөдөлгөөн» (data.motion, дэлгэцээс гарвал зогсоно) */
}
@media (prefers-reduced-motion: reduce) {
  .inv-cover--card.is-opening .inv-door { transition: opacity .25s ease; transform: none; }
}
@keyframes inv-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes inv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* ================================================================ Ерөнхий өнгөлгөө (2026-10 R2) */
.inv-link { display: inline-flex; align-items: center; min-height: 44px; }
.inv-btn--sm { min-height: 44px; }
.inv-gift-card__save { min-height: 44px; }
.inv-info__label { font-size: 11.5px; }
.inv-count__lbl { font-size: 11px; }
.inv-seg__opt span { min-height: 54px; gap: 8px; font-size: 16px; }
.inv-seg__opt span svg { width: 20px; height: 20px; }
.inv-rsvp__submit { min-height: 54px; font-size: 16px; }
.inv-head { position: relative; }
.inv-h2 { letter-spacing: -.005em; }
@media print { .inv-scene--footer, .inv-scene--corner { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .inv-cover--wax.is-opening, .inv-cover--minimal.is-opening { transition: opacity .25s ease, visibility 0s linear .3s; }
}
.inv-seg__t { font-weight: inherit; }
/* цонх: хүрээний өнгө (renderer → --c-win) */
.inv-win__frame, .inv-win__sill { color: var(--c-win, var(--c-surface)); }
.inv-win__sill { background: var(--c-win, var(--c-surface)); }
/* fullbleed: текст зүүн доод буланд — тэр булангийн чимэглэлийг нууна */
.inv-hero--fullbleed .inv-scene--hero .sl--bl, .inv-hero--fullbleed .inv-scene--hero .sl--left { display: none; }
/* сэтгүүл: дээд тууз (гэрэл) нь толгойн мөртэй давхцахгүй, чимэглэл зөөлөн */
.inv-hero--editorial .inv-scene--deco { opacity: .6; }
.inv-hero--editorial .inv-scene--deco .sl--top { display: none; }
.inv-hero--editorial .inv-scene--deco .sl--khee { inset: 7px; }
/* тасалбар: огноо/гараг/цаг нэг мөрөнд, тасрахгүй */
.inv-ticket__grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
.inv-ticket__f:not(.is-wide) .inv-ticket__v { white-space: nowrap; overflow-wrap: normal; }
.inv-ring-btn.inv-cover__btn { min-width: 0; font-size: inherit; }
.inv-scene .kq { color: var(--sc-q); }
/* захидал: шуудангийн тамга маркны доод хэсэгт давхцана (мэндчилгээний бичвэрт хүрэхгүй) */
.inv-letter__postmark { top: 74px; right: 28px; width: 96px; }
.inv-hero__greet { padding-right: 112px; }
/* thumb: хүрээ багассан үед монограмын үсэг ч мөн адил (fitThumbHero → --fitk) */
[data-inv-fit] .inv-mono__letters, [data-inv-fit] .inv-mg__letters { transform: scale(var(--fitk, 1)); }
@container inv (min-width: 860px) {
  .inv-hero--monogram .inv-hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 64px; align-items: center; max-width: 980px; }
  .inv-hero--monogram .inv-mg { width: 340px; margin: 0; }
  .inv-hero--monogram .inv-hero__text { align-items: flex-start; text-align: left; }
  .inv-hero--monogram .inv-hero__divider { margin-left: 0; }
}
.inv-scene .sl--port.sl--only { display: block; }
.inv-wax__face { color: var(--c-wax, var(--c-accent)); }
.inv-wax__letters, .inv-wax__orn { color: var(--c-wax-ink, var(--c-accent-deep)); }
/* шинэ нүүрүүдийн гарч ирэх хөдөлгөөн (live) */
@media (prefers-reduced-motion: no-preference) {
  .inv--live .inv-win, .inv--live .inv-mg, .inv--live .inv-letter { opacity: 0; }
  .inv--live.is-opened .inv-win, .inv--live.is-opened .inv-mg { animation: inv-fade 1.2s cubic-bezier(.2, .7, .2, 1) both; }
  .inv--live.is-opened .inv-letter { animation: inv-up 1s cubic-bezier(.2, .7, .2, 1) both; }
}
@media print {
  .inv .inv-win, .inv .inv-mg, .inv .inv-letter { opacity: 1 !important; transform: none !important; }
}
/* Гарчгийн эхний тоо («18», «30», «10 жилийн ой»): тоо ~2 дахин том, display фонтоор */
.inv-title-num {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 2.05em; line-height: .88; letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.inv-title-rest { display: block; }
.has-num .inv-title-rest { margin-top: .08em; }
.inv-hero--editorial .inv-title-num { font-size: 1.6em; }
.inv-cover__title .inv-title-num { font-size: 1.8em; }

/* Зураггүй хүрээний монограм: хүрээний өргөн/өндөрт багтана (container query); үсэг нь монограмын өргөнөөс */
@supports (width: 1cqw) {
  .inv-hero__art { container-type: size; }
  .inv-hero__art > .inv-mono { width: min(76cqw, 300px, 84cqh); }
  .inv-pola__photo .inv-hero__art > .inv-mono, .inv-circle__photo .inv-hero__art > .inv-mono { width: min(84cqw, 84cqh); }
  .inv-heart__mask .inv-hero__art > .inv-mono { width: min(70cqw, 68cqh); }
  .inv-collage__in .inv-hero__art > .inv-mono { width: min(92cqw, 92cqh); }
  .inv-ed__art .inv-hero__art > .inv-mono { width: min(90cqw, 84cqh); height: auto; }
  .inv-hero--window .inv-hero__art > .inv-mono { width: min(70cqw, 60cqh); }
  .inv-portrait.is-placeholder .inv-hero__art > .inv-mono { width: min(74cqw, 74cqh); }
  .inv-pblock.is-placeholder .inv-hero__art > .inv-mono { width: min(64cqw, 260px, 80cqh); }
  .inv-letter__stamp-art .inv-hero__art > .inv-mono { width: min(80cqw, 80cqh); }
  .inv-mono { container-type: inline-size; }
  .inv-mono .inv-mono__letters { font-size: 40cqi; margin-top: 7%; }
  .inv-mono.is-pair .inv-mono__letters { font-size: 28cqi; }
  [data-inv-fit] .inv-mono__letters { transform: none; }
}

/* байгалийн навч (kv/ke), дулаан цэцгийн гол/нар (ky) */
.inv-scene .kv, .inv-mg__wreath .kv { color: var(--sc-v); }
.inv-scene .ke, .inv-mg__wreath .ke { color: var(--sc-e); }
.inv-scene .ky, .inv-mg__wreath .ky { color: var(--sc-y); }
/* цонх: зураггүй үед дотор нь тэнгэр (дэвсгэрийн өнгөөр) — хоосон цагаан цонх биш */
.inv-win__view .inv-hero__media { background: linear-gradient(180deg, var(--sc-l) 0%, var(--sc-b) 78%); }
.inv-win__hills { z-index: 0; }
/* тасалбар: талбарууд багтахгүй бол дараагийн мөрт шилжинэ (хоорондоо наалдахгүй) */
.inv-ticket__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; }
.inv-ticket__f.is-wide { flex: 1 1 100%; }
/* Карт: дотоод багтаалт (fit) зөвхөн картын дотор layout хийнэ — хост хуудсыг дахин тооцоолохгүй.
   overflow:hidden-тэй адил тайрна, тул харагдац өөрчлөгдөхгүй. */
.inv--thumb { contain: layout paint; }

/* ================================================================ 2026-10 R3: OG зураг (demo.html?og=1) — 1200×630, UI-гүй */
.inv.inv--og {
  width: 1200px; height: 630px; overflow: hidden; --cq1: 12px; --hero-vh: 630px; --sc-band: 150px; --sc-top: 140px;
  color: var(--c-hero-text); background: var(--hero-bg);
}
.inv-og { height: 100%; }
.inv-og__bg { position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg); }
/* дэвсгэр зураглалгүй (минимал) загвар: том тэмдэг маш бүдэг, жижиг */
.inv-og__bg .inv-hero__big { width: 380px; opacity: .035; }
.inv-og__bg .inv-hero__pat { opacity: .045; }
.inv-og__frame { position: absolute; inset: 24px; border: 1px solid var(--c-hero-a25); pointer-events: none; }
.inv-og__frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid var(--c-hero-a10); }
.inv-og__text {
  position: absolute; left: 50%; top: 46%; width: 980px; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; isolation: isolate;
}
.inv-og__text::before {
  content: ''; position: absolute; z-index: -1; inset: -24% -8%; pointer-events: none;
  background: radial-gradient(closest-side, var(--sc-veil), var(--sc-veil) 52%, var(--sc-veil0));
}
.inv-og__motif { width: 84px; margin-bottom: 20px; }
.inv-og__title { max-width: 100%; font-size: 100px; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.inv-og__title.inv-font-display { font-size: 84px; line-height: 1.06; }
.inv-og.has-band .inv-og__text { top: 42%; }
.inv-og--khee .inv-og__frame { display: none; } /* хээтэй дэвсгэр өөрийн хүрээтэй */
.inv-og__divider { width: 320px; margin-top: 22px; }

/* ================================================================ 2026-10 R3: ирэх эсэхийн хурдан сонголт */
.inv-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inv-pick { position: relative; display: block; min-width: 0; }
.inv-pick input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inv-pick input:disabled { cursor: default; }
.inv-pick__face {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 88px; padding: 14px 8px 12px; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-text); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.inv-pick__t { font-weight: inherit; }
.inv-pick__ico { width: 28px; height: 28px; color: var(--c-accent-ink); transition: color .2s; }
.inv-pick__tick {
  position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-on-primary); color: var(--c-primary); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s;
}
.inv-pick__tick svg { width: 14px; height: 14px; stroke-width: 2.6; }
.inv-pick input:checked + .inv-pick__face {
  background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 12px 24px -16px var(--c-shadow);
}
.inv-pick input:checked + .inv-pick__face .inv-pick__ico { color: currentColor; }
.inv-pick input:checked + .inv-pick__face .inv-pick__tick { opacity: 1; transform: none; }
.inv-pick input:focus-visible + .inv-pick__face { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.inv-pick input:disabled + .inv-pick__face { opacity: .72; }
@media (hover: hover) {
  .inv-pick input:not(:disabled):not(:checked):hover + .inv-pick__face { border-color: var(--c-line); transform: translateY(-1px); }
}
.inv-count-field { margin-top: -4px; }
.inv-wish-field .inv-hint { margin-top: -1px; }
.inv-rsvp__done-note { max-width: 26em; margin: 10px auto 0; font-size: 14.5px; line-height: 1.65; color: var(--c-muted); text-wrap: balance; }
.inv .inv-link--inline { display: inline; min-height: 0; margin: 0; }

/* ================================================================ 2026-10 R3: Ерөөлийн хана */
.inv-wishes__lead { max-width: 30em; margin: -14px auto 34px; font-size: 15px; line-height: 1.7; color: var(--c-muted); text-wrap: balance; }
.inv-wishes__list { columns: 1; column-gap: 18px; }
@container inv (min-width: 620px) { .inv-wishes__list { columns: 2; } }
@container inv (min-width: 920px) { .inv-wishes__list { columns: 3; } }
.inv-wish { position: relative; display: block; break-inside: avoid; margin: 0 0 18px; padding: 30px 24px 20px; text-align: left; }
.inv-wish__q {
  position: absolute; left: 18px; top: 2px; font-family: var(--f-display); font-size: 66px; font-weight: 600; line-height: 1;
  color: var(--c-accent); opacity: .42; pointer-events: none;
}
.inv-wish__tag {
  position: absolute; right: 14px; top: 14px; padding: 3px 9px 2px; border-radius: 999px; border: 1px solid var(--c-line-soft);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--c-muted);
}
.inv-wish__text {
  position: relative; margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--c-text);
  white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty;
}
.inv-wish__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.inv-wish__more {
  display: inline-flex; align-items: center; min-height: 40px; font-size: 13.5px; font-weight: 600; color: var(--c-accent-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.inv-wish__by { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); }
.inv-wish__av {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-accent-soft);
  color: var(--c-accent-ink); font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1;
}
.inv-wish__av svg { width: 18px; height: 18px; }
.inv-wish__who { display: flex; flex-direction: column; min-width: 0; }
.inv-wish__name { font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--c-primary); overflow-wrap: anywhere; }
.inv-wish__at { margin-top: 1px; font-size: 12px; letter-spacing: .06em; line-height: 1.4; color: var(--c-muted); font-variant-numeric: lining-nums; }
.inv-wish.is-fresh { box-shadow: 0 0 0 2px var(--c-line-soft), 0 18px 40px -18px var(--c-shadow); }
.inv-wish:focus { outline: none; }
.inv-wish:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.inv-wishes__foot { display: flex; justify-content: center; }
.inv-wishes__foot:empty { display: none; }
.inv-wishes__all { margin-top: 10px; }
.inv-wishes__all svg { width: 18px; height: 18px; }
.inv-wishes__loading { padding: 26px 0; font-size: 14px; color: var(--c-muted); }
.inv-wishes__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto; padding: 36px 24px 32px; }
.inv-wishes__empty-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-ink); }
.inv-wishes__empty-ico svg { width: 28px; height: 28px; }
.inv-wishes__empty-title { font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--c-primary); text-wrap: balance; }
.inv-wishes__empty-text { max-width: 26em; margin-bottom: 8px; font-size: 15px; line-height: 1.7; color: var(--c-muted); text-wrap: balance; }

/* ================================================================ 2026-10 R3: хөдөлгөөн (motion.js; live + data.motion, reduced-motion биш)
   Зөвхөн transform/opacity. Анхдагчаар зогссон; дэлгэцэд харагдаж буй дэвсгэр (.inv-scene.is-run) л хөдөлнө,
   дугтуй нээгдэх хүртэл ард талын хуудас, таб нуугдсан үед бүгд зогсоно. */
.inv .mo { animation-play-state: paused; }
.inv--motion .inv-scene.is-run .mo { animation-play-state: running; }
/* зогсоох дүрмүүд нь «is-run»-аас дараа, ижил жинтэй (0,4,0): дугтуй хаалттай · таб нуугдсан · зочин зогсоосон */
.inv--motion.is-locked .inv-page .mo, .inv--motion.inv--mo-paused .inv-scene .mo,
.inv--motion.inv--mo-user-paused .inv-scene .mo { animation-play-state: paused; }
.inv-mo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.inv-mo .mo { position: absolute; display: block; }
/* давхаргын хөдөлгөөн (svg) */
.mo-sway { animation: mo-sway 8s ease-in-out infinite; }
.sl--right > .mo-sway, .sl--br > .mo-sway { animation-delay: -4s; }
.sl--tr > .mo-sway { animation-delay: -2s; }
.mo-breathe { transform-origin: 59% 39%; animation: mo-breathe 7s ease-in-out infinite; }
.mo-swell { transform-origin: 50% 100%; animation: mo-swell 10s ease-in-out infinite alternate; }
.mo-drift { transform-origin: 50% 0; animation: mo-drift 16s ease-in-out infinite alternate; }
.mo-bob { animation: mo-bob 9s ease-in-out infinite; }
.sl--tr > .mo-bob, .sl--br > .mo-bob { animation-delay: -4.5s; }
.sl--sky > .mo-bob { animation-duration: 14s; }
.mo-rocket { animation: mo-rocket 6s ease-in-out infinite; }
.mo-glow { opacity: .5; animation: mo-glow 3.4s ease-in-out infinite alternate; }
.mo-glow--b { animation-delay: -1.7s; }
@keyframes mo-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1.3deg); } }
@keyframes mo-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes mo-swell { from { transform: translateX(-1.1%) scale(1.035); } to { transform: translateX(1.1%) scale(1.035); } }
@keyframes mo-drift { from { transform: translateX(-2%) scale(1.05); } to { transform: translateX(2%) scale(1.05); } }
@keyframes mo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mo-rocket { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4px, -9px) rotate(-2deg); } }
@keyframes mo-glow { from { opacity: .1; } to { opacity: .95; } }
/* бөөмс: од/гялбаа, сүүлт од, дэлбээ, конфетти, цас, үүл, манан */
.mo-tw {
  width: calc(14px * var(--s, 1)); height: calc(14px * var(--s, 1)); margin: calc(-7px * var(--s, 1)) 0 0 calc(-7px * var(--s, 1));
  background: var(--sc-h); opacity: .15; animation: mo-twinkle 3.6s ease-in-out infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 -10C1.2 -3 3 -1.2 10 0C3 1.2 1.2 3 0 10C-1.2 3 -3 1.2 -10 0C-3 -1.2 -1.2 -3 0 -10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 -10C1.2 -3 3 -1.2 10 0C3 1.2 1.2 3 0 10C-1.2 3 -3 1.2 -10 0C-3 -1.2 -1.2 -3 0 -10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mo-tw--glint { background: var(--sc-g); }
.inv-mo--glints .mo-tw { background: var(--sc-p); }
@keyframes mo-twinkle { 0%, 100% { opacity: .12; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(30deg); } }
.mo-shoot {
  left: 10%; top: 12%; width: 150px; height: 2px; border-radius: 2px; transform-origin: 100% 50%; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--sc-h)); animation: mo-shoot 11s ease-out 3s infinite;
}
@keyframes mo-shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(20deg) scaleX(.3); }
  2% { opacity: .95; }
  8%, 100% { opacity: 0; transform: translate(260px, 95px) rotate(20deg) scaleX(1); }
}
.mo-fall { top: -5%; width: var(--w, 10px); height: var(--w, 10px); opacity: 0; animation: mo-fall 14s ease-in-out infinite; }
.mo-petals { height: calc(var(--w, 10px) * .62); border-radius: 100% 0 100% 0 / 100% 0 100% 0; }
.mo-petals.mo-c0 { background: var(--sc-s); } .mo-petals.mo-c1 { background: var(--sc-h); } .mo-petals.mo-c2 { background: var(--sc-l); }
.mo-confetti.mo-sh0 { height: calc(var(--w, 10px) * .45); border-radius: 1px; }
.mo-confetti.mo-sh1 { width: calc(var(--w, 10px) * .7); height: calc(var(--w, 10px) * .7); border-radius: 50%; }
.mo-confetti.mo-sh2 { width: calc(var(--w, 10px) * .75); height: calc(var(--w, 10px) * .75); border-radius: 2px; }
.mo-confetti.mo-c0 { background: var(--sc-i); } .mo-confetti.mo-c1 { background: var(--sc-s); }
.mo-confetti.mo-c2 { background: var(--sc-g); } .mo-confetti.mo-c3 { background: var(--sc-m); }
.mo-snow { border-radius: 50%; background: var(--sc-z); }
@keyframes mo-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  7% { opacity: var(--o, .8); }
  25% { transform: translate3d(calc(var(--dx, 6vw) * .55), 27vh, 0) rotate(calc(var(--r, 300deg) * .25)); }
  50% { transform: translate3d(calc(var(--dx, 6vw) * .1), 54vh, 0) rotate(calc(var(--r, 300deg) * .5)); }
  75% { transform: translate3d(calc(var(--dx, 6vw) * .9), 81vh, 0) rotate(calc(var(--r, 300deg) * .75)); }
  86% { opacity: var(--o, .8); }
  100% { opacity: 0; transform: translate3d(calc(var(--dx, 6vw) * .5), 106vh, 0) rotate(var(--r, 300deg)); }
}
.mo-cloud {
  left: 0; width: var(--w, 30vw); aspect-ratio: 3 / 1; background: var(--sc-c); opacity: var(--o, .5); animation: mo-cloud 90s linear infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E%3Crect x='8' y='54' width='284' height='44' rx='22'/%3E%3Ccircle cx='92' cy='56' r='38'/%3E%3Ccircle cx='160' cy='46' r='46'/%3E%3Ccircle cx='226' cy='64' r='30'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E%3Crect x='8' y='54' width='284' height='44' rx='22'/%3E%3Ccircle cx='92' cy='56' r='38'/%3E%3Ccircle cx='160' cy='46' r='46'/%3E%3Ccircle cx='226' cy='64' r='30'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes mo-cloud { from { transform: translateX(-42vw); } to { transform: translateX(108vw); } }
.mo-mist {
  left: -15%; right: -15%; bottom: calc(var(--sc-band) * .56); height: calc(var(--sc-band) * .36); opacity: .42;
  background: radial-gradient(closest-side, var(--sc-c), transparent); animation: mo-mist 24s ease-in-out infinite alternate;
}
@keyframes mo-mist { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
@media (prefers-reduced-motion: reduce) {
  .inv .mo { animation: none !important; }
  .inv .inv-mo { display: none; }
}

/* ================================================================ 2026-10 R3: нүүрний видео */
.inv-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.inv--live.is-opened .inv-hero__video { animation: none; }
.inv-vbtn {
  position: absolute; z-index: 6; top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-primary);
  background: var(--c-surface-glass); border: 1px solid var(--c-line); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.inv-vbtn svg { width: 18px; height: 18px; }
.inv-vbtn .inv-vbtn__pause, .inv-vbtn.is-playing .inv-vbtn__play { display: none; }
.inv-vbtn.is-playing .inv-vbtn__pause { display: block; }
.inv-vbtn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media print { .inv-vbtn { display: none !important; } }

/* ================================================================ 2026-10 R3: загварын сонголтот хэв маяг (opt-in)
   ampersand:'accent-italic' · cardStyle:'soft' · heroCard:'soft' (эсвэл cardStyle 'soft') · bodyWeight:300 */
/* нэрсийн «&»: налуу display фонт, accent өнгө (AA: хуудас/карт дээр --c-accent-ink, нүүрний дэвсгэр дээр --c-amp-hero) */
.inv-amp { padding: 0 .05em; font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--c-accent-ink); }
.inv-hero--centered .inv-amp, .inv-hero--fullbleed .inv-amp, .inv-hero--circle .inv-amp, .inv-hero--window .inv-amp,
.inv-band .inv-amp, .inv-cover--minimal .inv-amp { color: var(--c-amp-hero); }
.inv-hero.has-photo:not(.inv-hero--light):not(.inv-hero--framed) .inv-amp, .inv-env--wax .inv-amp { color: inherit; }
/* cardStyle 'soft': нимгэн дулаан хүрээ шугам + маш зөөлөн сүүдэр, загварын radius */
.inv--cards-soft .inv-card { border: 1px solid var(--c-hair); box-shadow: 0 15px 35px var(--c-shadow-soft), 0 1px 2px var(--c-shadow-soft); }
.inv--cards-soft .inv-ticket { border: 1px solid var(--c-hair); box-shadow: 0 15px 35px var(--c-shadow-soft), 0 1px 2px var(--c-shadow-soft); }
/* framed / letter нүүрний карт: загварын radius + зөөлөн сүүдэр + нимгэн хүрээ */
.inv--herocard-soft .inv-frame {
  border-radius: var(--radius); border: 1px solid var(--c-hair);
  box-shadow: 0 15px 35px var(--c-shadow-soft), 0 2px 6px var(--c-shadow-soft);
}
.inv--herocard-soft .inv-frame::before { border-radius: max(2px, calc(var(--radius) - 8px)); border-color: var(--c-hair); }
.inv--herocard-soft .inv-frame::after { display: none; }
.inv--herocard-soft .inv-letter__paper {
  border-radius: var(--radius); border: 1px solid var(--c-hair);
  box-shadow: 0 15px 35px var(--c-shadow-soft), 0 2px 6px var(--c-shadow-soft);
}
.inv--herocard-soft .inv-letter__paper::before { border-radius: max(2px, calc(var(--radius) - 8px)); border-color: var(--c-hair); }
/* bodyWeight 300: урт бичвэр нимгэн (≥ 16px), жижиг текст хэвээр */
.inv--body-light .inv-message, .inv--body-light .inv-person__about, .inv--body-light .inv-story__text,
.inv--body-light .inv-wish__text, .inv--body-light .inv-gift__msg, .inv--body-light .inv-timeline__text { font-weight: 300; }
.inv--body-light .inv-message { font-size: 17px; }
.inv--body-light .inv-story__text, .inv--body-light .inv-gift__msg, .inv--body-light .inv-timeline__text { font-size: 16px; }

/* ================================================================ 2026-10 R3: QA — урт ганц үг (60–80 тэмдэгт, зайгүй)
   Нээлтийн нүүр/дугтуйн бичвэр тайрагдахгүй: эхлээд багасна (fitWords), сүүлчийн арга нь үгийг таслах. */
.inv-cover__greet, .inv-cover__title, .inv-cover__names, .inv-cover__date, .inv-cover__hint { max-width: 100%; overflow-wrap: anywhere; }
.inv-hero__tagline { max-width: min(30em, 100%); overflow-wrap: anywhere; }
.inv-hero__greet, .inv-ed__kicker { overflow-wrap: anywhere; }

/* Зочны «Хөдөлгөөнийг зогсоох / үргэлжлүүлэх» товч (WCAG 2.2.2) — ♪ товчтой ижил хэмжээ, хэлбэр; ♪ байвал түүний дээр,
   дугтуй хаалттай үед (♪ нуугдсан) доод буланд, дугтуйн дээр харагдана */
.inv-motion-btn { z-index: 52; }
.inv-music--fixed ~ .inv-motion-btn { bottom: calc(70px + env(safe-area-inset-bottom)); }
.inv--live.is-locked .inv-motion-btn { opacity: 1; pointer-events: auto; bottom: calc(14px + env(safe-area-inset-bottom)); }
.inv-motion-btn .inv-music__slash { display: none; }
.inv-motion-btn.is-off .inv-music__slash { display: block; }
.inv-motion-btn.is-off .inv-music__ico { opacity: .7; }