/* ============================================================
   МУЗЕЙ РУССКИХ ДУШЕГУБОВ
   Вёрстка 1:1 по макету Figma (базовая ширина макета 122.2rem).
   --u: масштабная единица = 0.1rem при >=1222, меньше — пропорционально.
   ============================================================ */

:root {
  --maxw: 114rem;
  --gutter: 4rem;
  --u: 0.1rem;
  --font-main: 'Golos Text', system-ui, sans-serif;
  --font-accent: 'Oswald', 'Golos Text', sans-serif;
}

html[data-theme="light"] {
  --bg: #e7e2d5;
  --bg-soft: #ddd6c5;
  --ink: #000000;
  --ink-strong: #1a1007;
  --hero-title: #1a1007;
  --ink-dim: #655951;
  --ink-faint: #8c8a85;
  --accent: #dd9516;
  --accent-deep: #c79235;
  --date: #cb9438;
  --red: #db3c23;
  --title-red: #e23b26;
  --line: #cbc4b2;
  --panel: rgba(158, 158, 158, 0.05);
  --panel-border: rgba(255, 255, 255, 0.14);
  --surface: #efeadb;
  --header-bg: #ddd6c5;
  --sel-ink: #f3eee1;
  --pill-idle: #8b8275;
  --atmos-label: #000;
  --modal-bg: #ddd6c5;
  --modal-border: #655951;
  --input-line: #655951;
  --chip-border: #655951;
  --chip-ink: #1a1007;
  --cal-bg: #efeadb;
  --cal-ink: #1a1007;
}

html[data-theme="dark"] {
  --bg: #160c0b; /* Fill страницы из Figma */
  --bg-soft: #191110;
  --ink: #ede8dc;
  --ink-strong: #ede8dc;
  --hero-title: #e23b26;
  --ink-dim: #a89f90;
  --ink-faint: #6b655a;
  --accent: #dd9516;
  --accent-deep: #c79235;
  --date: #cb9438;
  --red: #e23b26;
  --title-red: #e23b26;
  --line: #33291f;
  --panel: rgba(158, 158, 158, 0.07);
  --panel-border: rgba(255, 255, 255, 0.14);
  --surface: #161210;
  --header-bg: #17100e;
  --sel-ink: #1a1007;
  --pill-idle: #6b655a;
  --atmos-label: #dd9516;
  --modal-bg: radial-gradient(130% 90% at 18% 0%, #38130f 0%, #23100d 45%, #150d0b 100%);
  --modal-border: #655951;
  --input-line: #655951;
  --chip-border: #655951;
  --chip-ink: #ede8dc;
  --cal-bg: #0f0b09;
  --cal-ink: #ede8dc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* масштаб макета: дизайн 192rem, 1rem = 1.5712rem при 1920, линейно вниз.
   Выше 1920 размер фиксируется (как на 1920), контент центрируется. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: clamp(8px, calc(100vw / 122.2), 15.712px);
}

body {
  position: relative; /* для плёнки body::after */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.7s ease, color 0.7s ease;
}

/* тёмная тема: фоновая текстура (opacity 70% запечена на #160C0B; макет 1920 = 122.2rem) */
html[data-theme="dark"] body {
  background-color: #1d1616; /* цвет нижнего края картинки — заливка ниже неё */
  background-image: url("../assets/img/bg-night-page.webp");
  background-repeat: no-repeat;
  background-position: top center;
  /* шире 1920 фон тянется на всю ширину экрана */
  background-size: max(100vw, 122.2rem) auto;
}

::selection { background: var(--accent); color: var(--sel-ink); }

img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* картинки под конкретную тему */
html[data-theme="light"] .dark-only { display: none !important; }
html[data-theme="dark"] .light-only { display: none !important; }

/* ---------- плёночное зерно (шум как в Figma) ---------- */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSdncmFpbi1maWx0ZXInPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2dyYWluLWZpbHRlciknLz48L3N2Zz4=");
  background-size: 220px 220px;
  animation: grain 7s steps(6) infinite;
  will-change: transform;
}
html[data-theme="light"] .grain { opacity: 0.03; mix-blend-mode: multiply; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1.4rem, 0.8rem); }
  40%  { transform: translate(1rem, -1.2rem); }
  60%  { transform: translate(-0.8rem, -0.6rem); }
  80%  { transform: translate(1.2rem, 1rem); }
  100% { transform: translate(0, 0); }
}

/* ---------- красные круги тёмной темы ----------
   геометрия и профиль затухания сняты с Frame 110 макета (цвет #A41907, пик 60%),
   привязаны к секциям, чтобы совпадать с макетом при любой высоте страницы */
.glow {
  position: absolute;
  z-index: -1; /* под контентом секции, но над фоном body */
  pointer-events: none;
  display: none;
  background: radial-gradient(closest-side,
    rgba(164, 25, 7, 0.60) 0%,
    rgba(164, 25, 7, 0.60) 22%,
    rgba(164, 25, 7, 0.58) 29%,
    rgba(164, 25, 7, 0.51) 44%,
    rgba(164, 25, 7, 0.37) 59%,
    rgba(164, 25, 7, 0.19) 74%,
    rgba(164, 25, 7, 0.07) 88%,
    rgba(164, 25, 7, 0) 100%);
}
html[data-theme="dark"] .glow { display: block; }
/* нулевой круг — зона шапки/hero, привязан к body (низ проступает из-под маски фото) */
.glow--hero  { left: 50%; margin-left: calc(-59 * var(--u)); top: calc(-112 * var(--u)); width: calc(922 * var(--u)); height: calc(922 * var(--u)); }
/* центр — середина фразы «Каждое преступление становится» */
.glow--about { left: calc(-112 * var(--u)); top: calc(-201 * var(--u)); width: calc(853 * var(--u));  height: calc(891 * var(--u)); }
/* центр — левый верхний угол карточки ферзя */
.glow--tours { left: calc(346 * var(--u));  top: calc(-457 * var(--u)); width: calc(866 * var(--u));  height: calc(866 * var(--u)); }
/* центр — слово «информация» в лейбле секции */
.glow--info  { left: calc(-310 * var(--u)); top: calc(-469 * var(--u)); width: calc(1007 * var(--u)); height: calc(1007 * var(--u)); }
.glow--final { left: calc(377 * var(--u));  top: calc(-385 * var(--u)); width: calc(1111 * var(--u)); height: calc(1111 * var(--u)); }

/* ---------- каркас ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.28rem;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- header ---------- */
header.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  background: var(--header-bg);
  transition: background 0.7s ease, box-shadow 0.4s ease;
}
header.topbar.docked { box-shadow: 0 0.1rem 0 var(--line); }
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.8rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.mark {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.224rem;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--accent); }

nav.mainnav { display: flex; gap: 3rem; }
nav.mainnav a {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.033rem;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.3s ease;
}
nav.mainnav a:hover { color: var(--accent); }

.btn {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.168rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  background: none;
  border: 0.1rem solid var(--accent);
  border-radius: 0.4rem;
  padding: 1.3rem 2.6rem;
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.45s cubic-bezier(.2,.7,.2,1), color 0.45s ease;
}
.btn:hover { background: var(--accent); color: #161310; }
.btn--fill {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  padding: 1.8rem 3.6rem;
  font-size: 1.6rem;
  letter-spacing: 0.196rem;
}
.btn--fill:hover { background: var(--accent-deep); color: #000; }

/* burger — только мобильный; обведённая скруглённая кнопка как в макете (40×40, radius 10) */
.burger {
  display: none;
  background: none; cursor: pointer;
  width: 40px; height: 40px;
  border: 1px solid rgba(158, 155, 146, 0.6);
  border-radius: 10px;
  position: relative;
  z-index: 9600;
  transition: border-color 0.3s ease;
}
.burger span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--ink);
  transition: transform 0.35s ease, opacity 0.3s ease, top 0.35s ease;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* мобильное меню — фон в цвет текущей темы (в тёмной — красное свечение сверху справа) */
.mobmenu {
  position: fixed; inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  /* горизонтальный отступ = шапке, чтобы крестик встал ровно на место бургера */
  padding: 30px var(--gutter) 24px;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease, background 0.7s ease;
}
html[data-theme="dark"] .mobmenu {
  background:
    radial-gradient(130% 65% at 100% 0%, rgba(164, 25, 7, 0.45), transparent 60%),
    #140b0a;
}
.mobmenu.open { opacity: 1; visibility: visible; }
.mobmenu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
/* крестик закрытия — идентичен бургеру (40×40, radius 10, та же рамка) */
.mobmenu__close {
  flex: none;
  position: relative;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid rgba(158, 155, 146, 0.6);
  border-radius: 10px;
  cursor: pointer;
}
.mobmenu__close span {
  position: absolute; left: 9px; right: 9px; top: 50%; height: 2px;
  background: var(--ink);
}
.mobmenu__close span:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
.mobmenu__close span:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }
.mobmenu nav { display: flex; flex-direction: column; gap: clamp(56px, 10vh, 96px); margin-top: clamp(90px, 20vh, 190px); }
.mobmenu nav a {
  font-size: clamp(30px, 8.5vw, 34px);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transform: translateX(-1.4rem);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.5s ease, color 0.3s ease;
}
.mobmenu.open nav a { transform: none; opacity: 1; }
.mobmenu.open nav a:nth-child(1) { transition-delay: 0.08s; }
.mobmenu.open nav a:nth-child(2) { transition-delay: 0.16s; }
.mobmenu.open nav a:nth-child(3) { transition-delay: 0.24s; }
.mobmenu nav a:active, .mobmenu nav a:hover { color: var(--accent); }
.mobmenu__foot { margin-top: auto; display: flex; flex-direction: column; }
.mobmenu__foot .btn { width: 100%; padding: 18px 10px; font-size: 13px; white-space: nowrap; }

/* ---------- переключатель атмосферы ---------- */
.atmos {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 9.6rem var(--gutter) 2.2rem;
}
.atmos__label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.192rem;
  text-transform: uppercase;
  color: var(--atmos-label);
  transition: color 0.7s ease;
}
.themer {
  display: flex;
  padding: 0.7rem;
  border: 0.1rem solid var(--accent);
  border-radius: 99.9rem;
  background: var(--bg-soft);
  position: relative;
  width: 30rem;
  max-width: 100%;
  transition: background 0.7s ease;
}
html[data-theme="dark"] .atmos .themer { background: rgba(0, 0, 0, 0.25); }
.themer__thumb {
  position: absolute;
  top: 0.6rem; bottom: 0.6rem;
  left: 0.6rem;
  width: calc(50% - 0.8rem);
  border-radius: 99.9rem;
  background: var(--accent);
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.3);
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="dark"] .themer__thumb { transform: translateX(calc(100% + 0.4rem)); }
.tpill {
  flex: 1;
  position: relative; z-index: 2;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.156rem;
  text-transform: uppercase;
  color: var(--pill-idle);
  background: none; border: none;
  border-radius: 99.9rem;
  padding: 1.3rem 0.8rem;
  cursor: pointer;
  transition: color 0.35s ease;
}
html[data-theme="light"] .tpill[data-theme-set="light"] { color: var(--sel-ink); }
html[data-theme="dark"] .tpill[data-theme-set="dark"] { color: #1a1007; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: calc(24 * var(--u));
  padding-bottom: 1.5rem;
}
.hero__photo {
  position: absolute;
  left: 50%; top: calc(-120 * var(--u));
  transform: translateX(-50%);
  width: 100vw;
  height: calc(760 * var(--u));
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4.8rem;
  flex-wrap: wrap;
  padding-top: calc(24 * var(--u));
}
.hero h1 {
  font-weight: 700;
  line-height: calc(77 / 84);
  text-transform: uppercase;
  font-size: calc(84 * var(--u));
  color: var(--hero-title);
  transition: color 0.7s ease;
}
.hero__sub {
  margin-top: 2.6rem;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--ink);
}
html[data-theme="dark"] .hero__sub { color: #ede8dc; }
.hero__age {
  margin-top: 1.2rem;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.14rem;
  color: var(--ink-dim);
}

/* ---------- секции ---------- */
/* обрезаем горизонтальный вылет нитей здесь, а не на html/body —
   иначе Chrome на Windows переключает документный скроллбар на overlay-режим.
   clip не создаёт вложенный scroll-контейнер (в отличие от hidden). */
main { display: block; overflow-x: clip; }
section.sec { margin-top: calc(190 * var(--u)); position: relative; }
.sec__label { margin-bottom: 3.9rem; }
.sec h2 {
  font-size: 3.4rem;
  font-weight: 600;
  line-height: calc(41.5 / 34);
  color: var(--ink);
}

/* О выставке */
.concept__body { max-width: 67.1rem; display: flex; flex-direction: column; gap: 3.9rem; }
.concept__body h2 { max-width: 51rem; }
.concept__text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 43.4rem;
}
.concept__pull {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: calc(37 / 26);
  color: var(--accent);
  max-width: 67.1rem; /* на всю ширину секции — как в макете, 2 строки */
}

/* ---------- экспозиция ---------- */
/* секция Экспозиция выше секции Экскурсии, чтобы нить-3 (плёнка→ферзь)
   проходила поверх карточки ферзя, которая живёт в следующей секции */
.sec.epochs { z-index: 3; }
.epochs__inner {
  max-width: 69.1rem;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  position: relative;
  z-index: 2;
}
.epochs__head { display: flex; flex-direction: column; gap: 3.8rem; }
.epochs__head .sec__label { margin-bottom: 0; }
.epochs__head h2 { font-size: 3rem; font-weight: 600; }

.epochs__tabs { display: flex; }
.etab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 0.2rem solid var(--ink);
  padding: 1.4rem 2rem 1.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.4;
  transition: color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
  white-space: nowrap;
}
.etab:hover { opacity: 0.7; }
.etab.active {
  opacity: 1;
  font-weight: 600;
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

.epoch-panel { display: none; }
.epoch-panel.active { display: flex; flex-direction: column; gap: 2rem; animation: panelIn 0.6s cubic-bezier(.2,.7,.2,1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}

.epoch__title {
  display: flex;
  align-items: baseline;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.epoch__name {
  font-size: 4.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  line-height: calc(44 / 42);
}
.epoch__date {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.153rem;
  color: var(--date);
}
.epoch__intro {
  font-size: 1.9rem;
  line-height: calc(29.5 / 19);
  color: var(--ink);
}
.figures { display: flex; flex-direction: column; gap: 2rem; }
.figure { display: flex; gap: 5.2rem; align-items: center; }
.figure h4 {
  flex: 0 0 23.3rem;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: calc(27.3 / 21);
}
.figure p {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 40.6rem;
}
.figures__div { height: 0.1rem; background: var(--line); }

/* ---------- экскурсии ---------- */
.tours__inner { max-width: 68.8rem; display: flex; flex-direction: column; gap: 4rem; position: relative; z-index: 2; }
.tours__inner .sec__label { margin-bottom: 0; }
.tours h2 {
  max-width: 54.6rem;
  font-size: 3rem;
  font-weight: 600;
  line-height: calc(39 / 30);
  text-transform: uppercase;
}

.offers { display: flex; gap: 3.5rem; }
.offers__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.offer { display: flex; gap: 1.7rem; align-items: center; }
.offer .o-num {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.13rem;
  color: var(--ink-dim);
  flex: none;
}
.offer p {
  font-size: 1.6rem;
  line-height: calc(24.8 / 16);
  color: var(--ink);
}
.offers__div { height: 0.1rem; background: var(--line); }
/* формат экскурсий: вступление и одноколоночный список пунктов */
.tours__lead { font-size: 1.9rem; line-height: 1.55; color: var(--ink); max-width: 62rem; }
.tours__lead2 { font-size: 1.6rem; line-height: 1.6; color: var(--ink-dim); max-width: 62rem; margin-top: -2.4rem; }
.offers--list { flex-direction: column; gap: 2.6rem; max-width: 62rem; }

.tours__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  margin-top: 0.8rem;
}
.tours__limit {
  font-size: 1.5rem;
  line-height: calc(23.3 / 15);
  color: var(--ink-dim);
  max-width: 42rem;
}

/* ---------- важная информация ---------- */
.warning__top { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
.warning__age {
  font-size: 8.8rem;
  font-weight: 700;
  color: var(--red);
  line-height: 0.8;
}
.warning__info { display: flex; flex-direction: column; gap: 1.3rem; }
.warning__info h3 { font-size: 2.2rem; font-weight: 600; color: var(--ink); }
.warning__info p { font-size: 1.6rem; line-height: 1.6; color: var(--ink-dim); }
.legal { max-width: 100.5rem; padding-top: 4.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.legal h3 { font-size: 2rem; font-weight: 600; color: var(--ink); }
.legal p { font-size: 1.5rem; line-height: 1.6; color: var(--ink-dim); }

/* ---------- финал ---------- */
section.sec.final { margin-top: calc(64 * var(--u)); }
.final {
  text-align: center;
  padding-top: calc(64 * var(--u));
  padding-bottom: calc(25 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}
.final h2 {
  font-size: calc(135 * var(--u));
  font-weight: 700;
  line-height: calc(129 / 135);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--title-red);
  transition: color 0.7s ease;
}

/* ---------- footer ---------- */
footer {
  position: relative; z-index: 1;
  background: var(--bg-soft);
  margin-top: calc(57 * var(--u));
  transition: background 0.7s ease;
}
html[data-theme="dark"] footer { background: rgba(0, 0, 0, 0.22); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5.6rem var(--gutter) 4.2rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
.footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
}
.fm__item { display: flex; flex-direction: column; gap: 0.7rem; }
/* десктоп: Адрес слева, Формат по центру, Возраст справа (было инлайн-стилями) */
.footer__meta .fm__item:nth-child(1) { flex: 0 1 33.9rem; }
.footer__meta .fm__item:nth-child(2) { flex: 0 1 38rem; align-items: center; text-align: center; }
.footer__meta .fm__item:nth-child(3) { flex: 0 1 25.3rem; align-items: flex-end; text-align: right; }
.fm__item .fm__label {
  font-size: 2rem;
  line-height: calc(31.7 / 20);
  letter-spacing: -0.016rem;
  color: var(--ink-faint);
}
.fm__item .fm__val {
  font-size: 2.5rem;
  line-height: calc(48 / 25);
  letter-spacing: -0.077rem;
  color: var(--ink);
}
.footer__meta .fm__item:nth-child(1) .fm__val,
.footer__meta .fm__item:nth-child(3) .fm__val {
  line-height: calc(35 / 25);
}
.fm__item .fm__note {
  font-size: 1.6rem;
  line-height: calc(38 / 25);
  letter-spacing: -0.016rem;
  color: var(--ink-faint);
  max-width: none;
  margin-top: 0;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.footer__brand .footer__by {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.096rem;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.footer__brand img { width: calc(165 * var(--u)); height: auto; }
html[data-theme="dark"] .footer__brand img { filter: invert(0.88) sepia(0.12); }
.footer__copy {
  font-size: 1.2rem;
  letter-spacing: 0.096rem;
  color: var(--ink-dim);
  text-align: right;
}

/* ============================================================
   ФОТОКАРТОЧКИ-УЛИКИ + КРАСНАЯ НИТЬ (координаты Figma, замеры)
   ============================================================ */
.evidence {
  position: absolute;
  z-index: 40;
  pointer-events: none;
}
.evidence--candle {
  width: calc(316 * var(--u));
  left: calc(704 * var(--u));
  top: calc(-50 * var(--u));
}
.evidence--reel {
  width: calc(306 * var(--u));
  left: calc(27 * var(--u));
  top: calc(31 * var(--u));
  z-index: 41; /* её нить идёт поверх карточки ферзя */
}
.evidence--chess {
  width: calc(309 * var(--u));
  left: calc(779 * var(--u));
  top: calc(-24 * var(--u));
}

/* булавка: координаты центра из макета (не по центру карточки!) */
.evidence__tack {
  position: absolute;
  left: 50%; top: 0; /* булавка — по горизонтальному центру карточки (точка поворота) */
  width: 2.6rem; height: 2.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ff6f6f 0%, #de5757 18%, #be3f3f 36%, #9d2626 54%, #8c1a1a 63%, #7c0e0e 72%);
  box-shadow:
    0 0 0 0.44rem rgba(189, 23, 23, 0.14),
    0 0 1.9rem 0.22rem rgba(189, 23, 23, 0.5),
    0 0.5rem 1rem rgba(0, 0, 0, 0.6);
  z-index: 6;
}
/* накладная булавка ферзя — поверх нити-3, которая приходит из другой секции.
   позиционируется JS (document-координаты центра булавки карточки ферзя) */
.pin-overlay {
  position: absolute;
  width: 2.6rem; height: 2.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ff6f6f 0%, #de5757 18%, #be3f3f 36%, #9d2626 54%, #8c1a1a 63%, #7c0e0e 72%);
  box-shadow:
    0 0 0 0.44rem rgba(189, 23, 23, 0.14),
    0 0 1.9rem 0.22rem rgba(189, 23, 23, 0.5),
    0 0.5rem 1rem rgba(0, 0, 0, 0.6);
  z-index: 50;
  pointer-events: none;
  display: none;
}
.pin-overlay.on { display: block; }


.evidence__bob {
  transform-origin: top center;
  animation: sway 11s ease-in-out infinite;
  rotate: -9.97deg;
}
.evidence--reel .evidence__bob { animation-duration: 13.5s; animation-direction: reverse; }
@keyframes sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.4deg); }
}
.evidence__frame {
  position: relative;
  margin: 0 calc(17.4 * var(--u));
  aspect-ratio: 290 / 408;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.45); /* белая обводка карточки как в макете */
  background: url("../assets/img/frame-light.png") center / 100% 100% no-repeat;
  -webkit-backdrop-filter: blur(0.3rem);
  backdrop-filter: blur(0.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* тёмная тема: царапанная пластина как фон рамки; blur убран — размывал карточку.
   белая обводка не нужна — она уже есть на самой пластине */
html[data-theme="dark"] .evidence__frame {
  background-image: url("../assets/img/frame-night.webp");
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.evidence__frame > img.evidence__obj {
  position: relative;
  width: 152%;
  max-width: none;
  height: auto;
  flex: none;
}
.evidence--reel .evidence__frame > img.evidence__obj { width: 127%; }
/* ночные версии предметов: другая компоновка исходников —
   ширина и сдвиг подобраны так, чтобы предмет был той же видимой величины */
.evidence__frame > img.evidence__obj.dark-only { width: 180%; transform: translateY(-3.7%); }
.evidence--reel .evidence__frame > img.evidence__obj.dark-only { width: 140%; transform: translate(4.3%, 2.7%); }
.evidence--chess .evidence__frame > img.evidence__obj.dark-only { width: 155%; transform: translate(1.7%, 4.5%); }

/* сегменты красной нити — кривые из Figma, поверх карточек */
.thread {
  position: absolute;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
}
.thread path.tline {
  fill: none;
  stroke: #bd1717;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 0.4rem rgba(189, 23, 23, 0.45));
}
html[data-theme="dark"] .thread path.tline {
  filter: drop-shadow(0 0 0.5rem rgba(255, 40, 40, 0.5));
}
.thread path.tpulse {
  fill: none;
  stroke: #ff4d4d;
  stroke-width: 2.6;
  stroke-dasharray: 0.7 99.3;
  filter: drop-shadow(0 0 0.7rem rgba(255, 40, 40, 0.9));
  animation: tpulse 6s linear infinite;
}
.thread circle.tdot { fill: #ff4d4d; }
@keyframes tpulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

.thread--1 {
  left: calc(157 * var(--u));
  top: 0;
  width: calc(730 * var(--u));
  height: calc(432 * var(--u));
}
.thread--2 {
  left: calc(-484 * var(--u));
  top: calc(-319 * var(--u));
  width: calc(638 * var(--u));
  height: calc(359 * var(--u));
}
.thread--2 path.tpulse { animation-delay: -3s; }
.thread--3 {
  left: calc(67 * var(--u));
  top: calc(-2 * var(--u));
  width: calc(794 * var(--u));
  height: calc(700 * var(--u));
}
.thread--3 path.tpulse { animation-duration: 9s; }
.thread--4 {
  left: calc(154 * var(--u));
  top: 0;
  width: calc(668 * var(--u));
  height: calc(316 * var(--u));
}
.thread--4 path.tpulse { animation-delay: -1.5s; }
/* мобильные нити (выходящая у плёнки, приходящая у ферзя) — только мобильная версия */
.thread--mreel, .thread--mchess { display: none; }

/* На экранах шире макета (1920) размер фиксируется, контент центрируется,
   а свободные концы линий не достают до краёв экрана — плавно растворяем их,
   чтобы не выглядели обрезанными. Тэк-концы (у булавок) остаются целыми. */
@media (min-width: 1921px) {
  .thread--1 { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 92%); mask-image: linear-gradient(to right, #000 55%, transparent 92%); }
  .thread--2 { -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 92%); mask-image: linear-gradient(to left, #000 55%, transparent 92%); }
  .thread--4 { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 92%); mask-image: linear-gradient(to right, #000 55%, transparent 92%); }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal:not(.in) { opacity: 0; transform: translateY(2.4rem); }
html.js .reveal.committed { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }

/* ============================================================
   МОДАЛКА ЗАПИСИ (дизайн Figma)
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8, 6, 4, 0.82);
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
  opacity: 0;
  transition: opacity 0.4s ease;
}
html[data-theme="light"] .modal { background: rgba(90, 82, 66, 0.55); }
.modal.open { display: flex; opacity: 1; }
.modal__box {
  width: min(58.3rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 0.1rem solid var(--modal-border);
  border-radius: 0;
  padding: clamp(2.8rem, 5vw, 5.4rem);
  transform: translateY(1.6rem);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.modal.open .modal__box { transform: none; }
.modal__box--wide { width: min(76rem, 100%); }
.modal__brand { display: none; } /* шапка с логотипом — только мобильная версия */
.modal__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.modal__top h3 {
  font-size: 4rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.12rem;
  color: var(--ink);
}
.modal__close {
  background: none; border: none;
  color: var(--ink-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem 0 0.4rem 1.6rem;
  transition: color 0.3s ease;
}
.modal__close:hover { color: var(--accent); }

/* плашка 21+ — цвета из макета (маруновый #6b1a1a на полупрозрачной подложке) */
.age-banner {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 2rem 3rem;
  border: 0.1rem solid rgba(107, 26, 26, 0.35);
  background: rgba(107, 26, 26, 0.12);
  margin-bottom: 2.6rem;
}
.age-banner b {
  font-size: 2.83rem;
  font-weight: 600;
  color: #6b1a1a;
  flex: none;
}
.age-banner span {
  font-size: 1.3rem;
  line-height: calc(29.6 / 20.4);
  color: #655951;
}

.field { margin-bottom: 2.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
.lbl {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2rem;
}

/* чипы дат + иконка календаря */
.dates-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; position: relative; }
.chip {
  font-family: inherit;
  font-size: 1.3rem;
  color: var(--chip-ink);
  background: none;
  border: 0.1rem solid var(--chip-border);
  border-radius: 0.2rem;
  padding: 1.1rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1007;
  font-weight: 600;
}
.cal-toggle {
  width: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0.1rem solid var(--chip-border);
  border-radius: 0.2rem;
  cursor: pointer;
  color: var(--chip-ink);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cal-toggle:hover { border-color: var(--ink); }
.cal-toggle.active { background: var(--accent); border-color: var(--accent); color: #1a1007; }
.cal-toggle svg { width: 1.8rem; height: 1.8rem; }

/* календарь */
.calendar {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 20;
  width: 29.2rem;
  background: var(--cal-bg);
  color: var(--cal-ink);
  border: 0.1rem solid var(--line);
  border-radius: 0.5rem;
  padding: 1.6rem;
  box-shadow: 0 2.4rem 5rem -2rem rgba(0, 0, 0, 0.55);
  display: none;
}
.calendar.open { display: block; animation: panelIn 0.3s ease; }
.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.calendar__head .cnav {
  width: 3.2rem; height: 3.2rem;
  background: none;
  border: 0.1rem solid var(--line);
  border-radius: 0.3rem;
  color: var(--cal-ink);
  font-size: 1.5rem;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.calendar__head .cnav:hover { border-color: var(--accent); }
.calendar__head .cmonth {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
}
.calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.4rem;
}
.calendar__week span {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.4rem 0;
}
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cday {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0.3rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cal-ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.cday:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cday.dim { color: var(--ink-faint); opacity: 0.55; }
.cday.off { opacity: 0.25; cursor: default; pointer-events: none; }
.cday.sel { background: var(--accent); color: #1a1007; font-weight: 700; }

/* подчёркнутые инпуты */
.input {
  width: 100%;
  font-family: inherit;
  font-size: 1.7rem;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 0.1rem solid var(--input-line);
  border-radius: 0;
  padding: 0.8rem 0 1rem;
  transition: border-color 0.3s ease;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; border-bottom-color: var(--accent); }
.input.err { border-bottom-color: var(--red); }

/* степпер количества */
.stepper {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 0.1rem solid var(--chip-border);
  border-radius: 0.2rem;
}
.stepper button {
  background: none;
  border: none;
  width: 5.2rem; height: 5.2rem;
  font-size: 2rem;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.stepper button:hover { color: var(--accent); }
.stepper .qty {
  min-width: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  border-left: 0.1rem solid var(--chip-border);
  border-right: 0.1rem solid var(--chip-border);
}

/* итого */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0 2.2rem;
}
.price-row .p-left .lbl { margin-bottom: 0.4rem; }
.price-row .p-desc { font-size: 1.3rem; color: var(--ink-faint); }
.price-row .p-sum {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* чекбоксы */
.checkline {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
  cursor: pointer;
}
.checkline input { position: absolute; opacity: 0; pointer-events: none; }
.checkline .box {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  margin-top: 0.1rem;
  border: 0.1rem solid var(--chip-border);
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.checkline .box::after {
  content: "";
  width: 1.1rem; height: 0.6rem;
  border-left: 0.2rem solid #1a1007;
  border-bottom: 0.2rem solid #1a1007;
  transform: rotate(-45deg) translate(0.1rem, -0.1rem);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.checkline input:checked + .box { background: var(--accent); border-color: var(--accent); }
.checkline input:checked + .box::after { opacity: 1; }
.checkline.err .box { border-color: var(--red); }
.checkline span.txt {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.checkline span.txt b { color: var(--ink); font-weight: 600; }

.form-error {
  display: none;
  margin: 0 0 1.8rem;
  padding: 1.2rem 1.6rem;
  border-left: 0.3rem solid var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  font-size: 1.4rem;
  color: var(--ink);
}
.form-error.show { display: block; }

/* оранжевая рамочная кнопка */
.btn--book {
  width: 100%;
  background: none;
  border: 0.16rem solid var(--accent);
  border-radius: 0;
  color: var(--ink); /* макет: текст чёрный в светлой, светлый в тёмной */
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  padding: 1.9rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.4s ease, color 0.4s ease;
}
.btn--book:hover { background: var(--accent); color: #1a1007; }
.btn--book:disabled { opacity: 0.6; cursor: wait; }

.modal__legal {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}
.modal__legal a {
  font-size: 1.2rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
.modal__legal a:hover { color: var(--accent); }

/* тестовая оплата */
.paybox { text-align: center; padding: 0.8rem 0; }
.paybox__badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: #1a1007;
  background: var(--accent);
  border-radius: 99.9rem;
  padding: 0.7rem 1.6rem;
  margin-bottom: 2.2rem;
}
.paybox__sum { font-size: 4.2rem; font-weight: 700; color: var(--ink); }
.paybox__desc { margin-top: 0.8rem; font-size: 1.5rem; color: var(--ink-dim); }
.paybox__card {
  margin: 2.6rem auto;
  max-width: 36rem;
  border: 0.1rem dashed var(--chip-border);
  padding: 2.2rem;
  text-align: left;
}
.paybox__cardnum {
  font-family: var(--font-accent);
  font-size: 1.9rem;
  letter-spacing: 0.26rem;
  color: var(--ink);
}
.paybox__hint { margin-top: 1.6rem; font-size: 1.2rem; color: var(--ink-faint); }

/* успех */
.donebox { text-align: center; padding: 1rem 0 0.6rem; }
.donebox .tick {
  width: 6.4rem; height: 6.4rem;
  margin: 0 auto 2.2rem;
  border-radius: 50%;
  border: 0.2rem solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 2.6rem;
  animation: tickIn 0.6s cubic-bezier(.2,.7,.2,1);
}
@keyframes tickIn { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.donebox p { font-size: 1.5rem; line-height: 1.55; color: var(--ink-dim); max-width: 38ch; margin: 0 auto 1rem; }
.donebox b { color: var(--ink); }
.donebox .code {
  display: inline-block;
  margin: 1.4rem 0 2.4rem;
  font-family: var(--font-accent);
  font-size: 2.1rem;
  letter-spacing: 0.32rem;
  color: var(--accent);
  border: 0.1rem dashed var(--accent);
  padding: 1rem 2.2rem;
}

/* документы */
.doc { font-size: 1.4rem; line-height: 1.65; color: var(--ink-dim); }
.doc h4 { margin: 2.2rem 0 0.8rem; font-size: 1.6rem; color: var(--ink); }
.doc p { margin-bottom: 1rem; }
.doc ul { margin: 0 0 1rem 2rem; }
.doc li { margin-bottom: 0.6rem; }
.doc b { color: var(--ink); }

/* ============================================================
   COOKIE (дизайн Figma: Frame 59/60)
   ============================================================ */
.cookie {
  position: fixed;
  left: 24px; right: 24px;
  bottom: 24px;
  z-index: 8800;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 24px 34px 24px 38px;
  background: var(--bg-soft);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease, background 0.7s ease;
}
html[data-theme="dark"] .cookie { background: #0d0a08; }
.cookie::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: #bd1717;
}
.cookie.show { transform: translateY(0); opacity: 1; }
.cookie__tag {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.cookie__txt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
}
html[data-theme="dark"] .cookie__txt { color: #a89f90; }
.cookie__txt a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
html[data-theme="dark"] .cookie__txt a { color: #ede8dc; }
.cookie__txt a:hover { color: var(--accent); }
.cookie__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  min-width: 250px;
}
.cookie__accept {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1.6px solid var(--accent);
  border-radius: 14px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}
.cookie__accept:hover { background: var(--accent); color: #1a1007; }
.cookie__decline {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 1.4px solid var(--ink-faint);
  border-radius: 14px;
  padding: 14px 24px;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.cookie__decline:hover { color: var(--ink); border-color: var(--ink-dim); }

.d-br { display: inline; }
@media (max-width: 1000px) { .d-br { display: none; } }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1000px) {
  nav.mainnav { display: none; }
  .topbar__inner > .btn { display: none; }
  .burger { display: block; }
}

@media (max-width: 760px) {
  /* мобильный макет 402px: 1rem = 10px при 402, пропорционально уже/шире */
  html { font-size: clamp(8.5px, calc(100vw / 40.2), 13px); }
  :root { --gutter: 1.6rem; }

  /* шапка */
  .topbar__inner { padding: 3rem var(--gutter); }

  /* переключатель атмосферы — оверлей над фото (11.2rem = высота фикс. шапки + зазор) */
  .atmos { padding: 11.2rem var(--gutter) 0; gap: 1rem; }
  .atmos__label { font-size: 1.2rem; }
  .themer { width: 29.6rem; }
  .tpill { font-size: 1.2rem; padding: 1.1rem 0.6rem; }

  /* hero: фото крупное, заголовок внизу фото, кнопка одной строкой */
  .hero { padding-top: 0; }
  .hero__photo { top: -9.2rem; height: 59rem; }
  .hero__inner { padding-top: 28.3rem; flex-direction: column; align-items: stretch; gap: 0; }
  .hero h1 { font-size: 4.4rem; }
  .hero__sub { margin-top: 2rem; font-size: 1.8rem; }
  .hero__age { margin-top: 1.6rem; font-size: 1.7rem; }
  .hero .btn--fill { width: 100%; margin-top: 2rem; padding: 2rem 1rem; font-size: 1.4rem; white-space: nowrap; }

  /* секции */
  section.sec { margin-top: 8.8rem; display: flex; flex-direction: column; }
  .sec__label { margin-bottom: 3rem; }
  .eyebrow { font-size: 1.2rem; letter-spacing: 0.24rem; }
  .sec h2 { font-size: 2.8rem; }
  .concept__body { gap: 3rem; max-width: none; }
  /* все три заголовка секций одного размера (макет: 34px / lh 41.48) */
  .concept__body h2, .epochs__head h2, .tours h2 { max-width: none; font-size: 3.4rem; line-height: calc(41.48 / 34); }
  .concept__text { font-size: 1.5rem; max-width: none; }
  .concept__pull { font-size: 2.1rem; line-height: calc(25.6 / 21); }

  /* тёмная тема: красные пятна .glow огромны на мобильном (var(--u) не масштабируется
     как на 1920) — обрезаем их в пределах секции, чтобы не было гориз. прокрутки */
  section.sec { overflow-x: clip; }
  .glow--hero { display: none !important; }

  /* карточки-улики: в потоке, по центру, после контента секции */
  .evidence { position: relative; left: auto; top: auto; order: 99; margin: 3.5rem auto 0; }
  .evidence--candle { width: 22.3rem; left: auto; top: auto; }
  .evidence--reel   { width: 22.1rem; left: auto; top: auto; }
  /* ферзь опущен ниже — чтобы нить приходила сверху-справа, не задевая кнопку */
  .evidence--chess  { width: 21rem;   left: auto; top: auto; margin-top: 8.5rem; }
  .evidence__frame { margin: 0 1.2rem; }
  .evidence__tack { width: 1.8rem; height: 1.8rem; }
  /* булавки — по горизонтальному центру карточки (наследуют left:50%, top:0) */
  /* свеча: нить выходит из булавки вниз-вправо */
  .thread--1 { left: 11.1rem;  top: 0;        width: 32.8rem; height: 19.4rem; }
  /* плёнка: нить приходит слева в булавку */
  .thread--2 { left: -18.2rem; top: -14.7rem; width: 29.3rem; height: 16.5rem; }
  /* плёнка: карточка наклонена по часовой (на ПК — против), нить выходит вниз-вправо */
  .evidence--reel .evidence__bob { rotate: 8deg; }
  .thread--mreel { display: block; left: 11rem; top: 0; width: 28.9rem; height: 13.7rem; }
  /* ферзь: отдельная нить приходит сверху-справа в булавку, ниже кнопки (не наезжает) */
  .thread--4 { display: none; }
  .thread--mchess { display: block; left: 9.6rem; top: -6.3rem; width: 22rem; height: 7rem; }
  /* сквозная нить плёнка→ферзь и её накладная булавка — только десктоп */
  .thread--3, .pin-overlay, .pin-overlay.on { display: none; }

  /* экспозиция */
  .epochs__inner { max-width: none; gap: 3rem; }
  .epochs__head { gap: 2.4rem; }
  .epochs__tabs { margin: 0; padding: 0; }
  .etab { flex: 1 1 0; white-space: normal; font-size: 1.2rem; line-height: 1.25; padding: 0.8rem 0.4rem 1rem; }
  .epoch__title { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .epoch__name { font-size: 3.4rem; }
  .epoch__date { font-size: 1.2rem; }
  .epoch__intro { font-size: 1.6rem; }
  .figure { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .figure h4 { flex: none; font-size: 1.8rem; }
  .figure p { font-size: 1.5rem; }

  /* экскурсии */
  .tours__inner { max-width: none; gap: 3rem; }
  .offers { flex-direction: column; gap: 2.4rem; }
  .offers__col { gap: 2.4rem; }
  .offers__div { display: none; } /* сепараторы между пунктами убрать на мобильном */
  .offer p { font-size: 1.5rem; }
  .tours__limit { font-size: 1.2rem; }
  .tours__foot .btn { width: 100%; white-space: nowrap; font-size: 1.3rem; padding: 1.7rem 1rem; }

  /* важная информация */
  .warning__age { font-size: 6.4rem; }
  .warning__info h3 { font-size: 2rem; }
  .warning__info p, .legal p { font-size: 1.5rem; }
  .legal { max-width: none; }

  /* финал */
  .final { gap: 4rem; padding-top: 0; }
  .final h2 { font-size: 8rem; line-height: 1.08; white-space: normal; }
  .final .reveal { width: 100%; }
  .final .btn--fill { width: 100%; white-space: nowrap; font-size: 1.4rem; padding: 2rem 1rem; }

  /* футер — всё по центру */
  .footer__inner { padding: 4rem var(--gutter) 3rem; }
  .footer__meta { flex-direction: column; gap: 2rem; align-items: center; text-align: center; }
  /* усиленная специфичность — перебиваем десктопные nth-child выравнивания */
  .footer__meta .fm__item, .footer__meta .fm__item:nth-child(1), .footer__meta .fm__item:nth-child(2), .footer__meta .fm__item:nth-child(3) { flex: none; align-items: center; text-align: center; }
  .fm__item .fm__val { line-height: 1.4; }
  .footer__bottom { flex-direction: column; align-items: center; gap: 2.4rem; }
  .footer__brand { align-items: center; }
  .footer__brand img { width: 24rem; }
  .footer__copy { text-align: center; }

  .cookie { grid-template-columns: 1fr; gap: 18px; left: 14px; right: 14px; padding: 20px 22px 20px 26px; }
  .cookie__actions { flex-direction: row; min-width: 0; }
  .cookie__actions > * { flex: 1; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row > div { margin-bottom: 24px; }
  .calendar { right: auto; left: 0; }
  .price-row .p-sum { font-size: 24px; }

  /* модалка на мобильном: шапка с логотипом и крестиком (как в меню) */
  .modal__brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 2.4rem; min-height: 40px; }
  .modal__brand .mark { font-size: 1.4rem; letter-spacing: 0.224rem; }
  .modal__brand-close {
    flex: none; position: relative; width: 40px; height: 40px;
    background: none; border: 1px solid rgba(158, 155, 146, 0.6); border-radius: 10px; cursor: pointer;
  }
  .modal__brand-close span { position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: var(--ink); }
  .modal__brand-close span:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
  .modal__brand-close span:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }
  /* ✕ у заголовка на мобильном не нужен — крестик в шапке модалки */
  .modal__top .modal__close { display: none; }
  /* правовые ссылки — над кнопкой «Забронировать» */
  [data-step="form"] { display: flex; flex-direction: column; }
  [data-step="form"] .modal__legal { order: 90; margin-top: 0; margin-bottom: 2rem; }
  [data-step="form"] .btn--book { order: 91; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal:not(.in), .reveal { opacity: 1; transform: none; transition: none; }
  .grain { animation: none; }
  .evidence__bob { animation: none; }
  .thread path.tpulse { display: none; }
}