/* InviteNoma — база: сброс, типографика, служебные слои */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* пока конверт не открыт — страница не скроллится (класс на html) */
}
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; touch-action: none; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-head);
  margin: 0;
  letter-spacing: -.01em;
}
p { margin: 0; }

::selection { background: var(--c-gold-soft); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-gold-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Каркас ---------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--content-w));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 760px); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tint { background: var(--c-cream-2); }
.section--ink  { background: var(--c-ink); color: var(--c-cream); }

/* ---------- Микротипографика ---------- */
.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: clamp(18px, 6vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--c-gold), transparent); }

.section-title {
  font-size: var(--fs-h2);
  margin-top: var(--sp-4);
  text-wrap: balance;
}
.section-lead {
  max-width: var(--measure);
  margin-top: var(--sp-4);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.center { text-align: center; }
.center .section-lead { margin-inline: auto; }
.script {
  font-family: var(--f-script);
  font-style: italic;
  color: var(--c-gold-deep);
}
.amp { font-family: var(--f-display); font-style: italic; color: var(--c-gold-deep); }

/* ---------- Разделители ---------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--c-gold);
  margin-block: var(--sp-6);
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 140px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}
.divider svg { width: 22px; height: 22px; opacity: .85; }

/* ---------- Кнопки ---------- */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }
.btn:active { transform: translateY(0); }
/* Белым по золоту выходило 2.4:1 — не читалось. Цвет текста считается
   под каждую тему отдельно: где акцент светлый, берутся чернила, где
   тёмный — бумага. Слепо ставить тёмный нельзя, часть тем ломается. */
.btn--gold  { --btn-bg: var(--c-gold); --btn-fg: var(--c-on-gold); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Карточка ---------- */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
}

/* ---------- Доступность ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: 200;
  background: var(--c-ink); color: var(--c-cream);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Печать: бумажная версия для тех, кто без смартфона ---------- */
@media print {
  .no-print, .envelope-scene, .loader, .site-ui, canvas { display: none !important; }
  html.is-locked, html.is-locked body { overflow: visible; height: auto; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: 12mm; break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}