/* ==========================================================================
   БАНОЧКА — лендинг. Палитра, типографика, главы.
   ========================================================================== */

:root{
  --bg:#F5E4C7;
  --ink:#100B06;
  --ink-2:#1C1208;
  --accent:#C1651D;
  --cta:#D2451E;
  --support:#4A5D3A;
  --on-cta:#FFFFFF;

  --role-consumer:#C1651D;
  --role-farmer:#4A5D3A;
  --role-workshop:#D2451E;
  --role-warehouse:#8A6F4E;
  --role-logistics:#7C3535;

  --font-head:'Unbounded', system-ui, sans-serif;
  --font-body:'Onest', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

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

html{
  background:var(--bg);
  /* overflow:hidden делает элемент scroll-контейнером и обрывает поиск
     containing block для потомков с position:sticky — из-за этого все три
     .chapter-pin переставали "прилипать" и просто скроллились как обычный
     контент (см. коммит перф-редизайна v6). overflow:clip визуально даёт
     тот же обрез по X (никакого горизонтального скролла), но НЕ создаёт
     scroll-контейнер, поэтому sticky у потомков продолжает работать. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.4;
  overflow-x:clip;
  width:100%;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.mono{ font-family:var(--font-mono); letter-spacing:0.02em; }

h1,h2,h3{ font-family:var(--font-head); margin:0; }

/* ---------- generic asset background layer + fallback ---------- */
.bg-layer,[data-bg]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.asset-missing{
  background-image:linear-gradient(135deg, var(--ink), var(--accent) 55%, var(--cta)) !important;
}

/* ==========================================================================
   ПРЕЛОАДЕР
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  color:var(--bg);
}

.preloader-inner{
  text-align:center;
  padding:0 24px;
}

.preloader-mark{
  font-family:var(--font-head);
  font-size:clamp(28px,6vw,56px);
  font-weight:800;
  letter-spacing:0.08em;
  margin-bottom:18px;
}

.preloader-line{
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--accent);
  margin-bottom:16px;
}

.preloader-bar{
  width:min(320px,60vw);
  height:2px;
  background:rgba(245,228,199,0.2);
  margin:0 auto;
}

.preloader-bar-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width 0.15s linear;
}

.preloader-curtain{
  position:absolute; inset:0;
  background:var(--ink);
  pointer-events:none;
}

#preloader.is-done{
  pointer-events:none;
}

/* ==========================================================================
   ШКАЛА ПРОСЛЕЖИВАЕМОСТИ
   ========================================================================== */
#scale{
  position:fixed;
  right:36px;
  top:50%;
  transform:translateY(-50%);
  z-index:500;
  display:flex;
  align-items:center;
  gap:18px;
  height:44vh;
}

.scale-track{
  position:relative;
  width:1px;
  height:100%;
  background:rgba(16,11,6,0.18);
}

.scale-dot{
  position:absolute;
  left:50%;
  top:0;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(193,101,29,0.18);
  transform:translate(-50%,-50%);
}

.scale-marks{
  list-style:none;
  margin:0; padding:0;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.scale-mark{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0.4;
  transition:opacity 0.3s ease;
}

.scale-mark.active{ opacity:1; }

.scale-mark-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ink);
  transition:background 0.3s ease, transform 0.3s ease;
}

.scale-mark.active .scale-mark-dot{
  background:var(--accent);
  transform:scale(1.4);
}

.scale-mark-label{
  font-size:11px;
  letter-spacing:0.08em;
  white-space:nowrap;
}

.scale-mark.active .scale-mark-label{ color:var(--accent); }

@media (max-width:767px){
  #scale{ display:none; }
}

/* ==========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ ГЛАВ
   ========================================================================== */
.chapter-wrap{
  position:relative;
  width:100%;
}

.chapter-pin{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.chapter-section{
  position:relative;
  width:100%;
  padding:120px 24px;
  overflow:hidden;
}

.chapter-eyebrow{
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--cta);
  margin-bottom:18px;
}

.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:var(--cta);
  color:var(--on-cta);
}

.btn-ghost{
  border-color:currentColor;
  background:transparent;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.chapter-hero-wrap{ height:200vh; }

@media (max-width:767px){
  .chapter-hero-wrap{ height:150vh; }
}

.chapter-hero{
  background:var(--ink);
}

.chapter-hero .bg-layer{
  position:absolute; inset:0;
  will-change:transform;
}

.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  opacity:1;
  transition:opacity 0.4s ease;
}

.hero-video.hero-video-hidden{ opacity:0; }

.hero-scrim{
  position:absolute; inset:0;
  /* Верх (0–20%) почти чистый — небо не задушено. К зоне заголовка (~33–49%
     высоты hero) градиент уже даёт ~0.48–0.57 — этого достаточно для
     контраста ≥4.5:1 кремового текста даже поверх самых светлых участков
     видео (яркие облака). Проверено скриншотом + подсчётом контраста. */
  background:linear-gradient(180deg, rgba(16,11,6,.18) 0%, rgba(16,11,6,.5) 35%, rgba(16,11,6,.68) 70%, rgba(16,11,6,.8) 100%);
}

@media (max-width:767px){
  .hero-scrim{
    background:linear-gradient(180deg, rgba(16,11,6,.18) 0%, rgba(16,11,6,.55) 35%, rgba(16,11,6,.75) 70%, rgba(16,11,6,.88) 100%);
  }
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0 6vw;
  max-width:1100px;
  color:var(--bg);
}

.hud-line{
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--accent);
  margin-bottom:20px;
}

.hero-content .hud-line{
  /* Фикс контраста (было 2.04:1 на десктопе): вместо голого текста поверх
     видео/фото — непрозрачная тёмная плашка + кремовый (var(--bg)) текст.
     Плашка держит контраст независимо от того, что происходит в кадре видео
     под ней (проверено на светлом небе и на тёмных участках) — см. отчёт. */
  display:inline-block;
  color:var(--bg);
  background:rgba(16,11,6,0.72);
  padding:7px 16px;
  border-radius:999px;
  text-shadow:none;
}

.hero-title{
  font-size:clamp(32px,5.2vw,72px);
  font-weight:800;
  line-height:0.98;
  color:var(--bg);
  text-shadow:0 2px 24px rgba(16,11,6,.55);
  margin-bottom:24px;
  max-width:62%;
}

.hero-title .word{
  display:inline-block;
  white-space:nowrap;
  will-change:transform,opacity;
}

.hero-sub{
  font-size:clamp(16px,2vw,22px);
  max-width:560px;
  margin-bottom:36px;
  color:var(--bg);
  text-shadow:0 2px 24px rgba(16,11,6,.55);
  opacity:0.9;
}

.hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.hero-cta .btn-ghost{ color:var(--bg); }

.hero-cta .btn-ghost-stub{
  border-color:rgba(245,228,199,0.55);
  opacity:0.85;
}

.scroll-hint{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--bg);
  opacity:0.75;
}

.scroll-hint-arrow{
  width:1px; height:28px;
  background:currentColor;
  position:relative;
}

.scroll-hint-arrow::after{
  content:'';
  position:absolute;
  bottom:0; left:50%;
  width:6px; height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateX(-50%) rotate(45deg);
}

/* Мобила: заголовок не должен перекрывать лицо героини в фоне —
   уменьшаем и прижимаем блок текста к низу экрана. */
@media (max-width:767px){
  .hero-content{
    justify-content:flex-end;
    padding-bottom:96px;
  }
  .hero-title{
    font-size:clamp(28px,9vw,40px);
    max-width:100%;
  }
  .hero-sub{
    font-size:14px;
    max-width:100%;
  }
  .hero-cta{
    flex-wrap:wrap;
  }
  .hero-cta .btn{
    padding:12px 20px;
    font-size:14px;
    flex:1 1 auto;
    text-align:center;
  }
  .hero-cta .btn:only-child{
    flex:0 1 auto;
  }
}

@media (max-width:420px){
  .hero-cta{
    flex-direction:column;
  }
  .hero-cta .btn{
    width:100%;
  }
}

/* ==========================================================================
   2. КРУГ, А НЕ ЦЕПОЧКА
   (бывшая глава 2 «Банка» удалена целиком — решение владельца. Её
   canvas-вращение переехало в главу 3 «Что будет в банке», см. ниже.)
   ========================================================================== */
.chapter-circle{
  background:var(--bg);
}

.circle-inner{
  max-width:1200px;
  margin:0 auto;
}

.circle-title{
  font-size:clamp(30px,5vw,58px);
  font-weight:800;
  margin-bottom:16px;
  max-width:18ch;
}

.circle-sub{
  font-size:clamp(16px,2vw,20px);
  max-width:56ch;
  opacity:0.75;
  margin-bottom:48px;
}

.circle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-bottom:40px;
}

.circle-card{
  position:relative;
  overflow:hidden;
  min-height:320px;
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  color:var(--bg);
}

.circle-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,11,6,0.15) 0%, rgba(16,11,6,0.8) 100%);
  z-index:0;
}

.circle-card h3,
.circle-card p{
  position:relative;
  z-index:1;
  margin:0;
}

.circle-card h3{
  font-family:var(--font-head);
  font-size:20px;
  letter-spacing:0.04em;
  color:var(--bg);
  margin-bottom:4px;
}

.circle-card p{
  font-size:14px;
  line-height:1.5;
  color:rgba(245,228,199,0.92);
}

.circle-label{
  color:var(--accent);
  font-size:11px;
  letter-spacing:0.06em;
  display:block;
}

.circle-card-coop{
  background:linear-gradient(160deg, #100B06 0%, #1C1208 100%);
  justify-content:center;
}

.circle-card-coop h3{ color:var(--accent); }

.circle-proof{
  font-size:13px;
  line-height:1.6;
  max-width:640px;
  padding:16px 20px;
  border-left:2px solid var(--accent);
  background:rgba(16,11,6,0.04);
  opacity:0.85;
}

/* ==========================================================================
   ФЕРМЫ — ПОЛНОЭКРАННЫЙ СЛАЙД (сразу после «Круга, а не цепочки»)
   ========================================================================== */
.chapter-cows{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.cows-bg{
  position:absolute;
  inset:-6%;
  background-size:cover;
  background-position:center;
  will-change:transform;
}

.cows-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,11,6,.12) 0%, rgba(16,11,6,.32) 55%, rgba(16,11,6,.86) 100%);
}

.cows-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:0 6vw 96px;
  max-width:900px;
  color:var(--bg);
}

.cows-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(32px,5.8vw,64px);
  line-height:1.06;
  color:var(--bg);
  text-shadow:0 2px 24px rgba(16,11,6,.6);
  margin-bottom:16px;
  max-width:16ch;
}

.cows-sub{
  font-size:13px;
  letter-spacing:0.05em;
  color:var(--bg);
  opacity:0.88;
  text-shadow:0 2px 12px rgba(16,11,6,.55);
}

@media (max-width:767px){
  .cows-content{ padding:0 24px 64px; }
}

/* ==========================================================================
   3. ЧТО БУДЕТ В БАНКЕ — сердце сайта.
   Двухколоночная секция без GSAP-пина: правая колонка (.dishes-stage)
   "прилипает" чистым CSS position:sticky, пока левая колонка со списком
   блюд (.dishes-inner, естественная высота > 100vh) скроллится обычным
   образом — тот же приём, что и в hero (см. .chapter-pin), только здесь без
   отдельного sticky-класса на весь пин, т.к. пином нужна лишь половина
   экрана. Прогресс скролла всей секции 0→1 крутит canvas банки (main.js).
   ========================================================================== */
.chapter-dishes-wrap{
  position:relative;
  background:var(--bg);
}

.chapter-dishes{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
}

.dishes-stage{
  order:2;
  flex:1 1 50%;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.dishes-inner{
  order:1;
  flex:1 1 50%;
  min-height:200vh;
  padding:100px 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.dishes-title{
  font-size:clamp(28px,4.4vw,50px);
  font-weight:800;
  margin-bottom:32px;
  max-width:16ch;
}

.dishes-group{ margin-bottom:32px; }

.dishes-group-title{
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--cta);
  margin-bottom:14px;
}

.dishes-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dishes-list li{
  display:block;
}

.dishes-row-text{
  flex:1 1 auto;
  min-width:0;
  font-size:14.5px;
  line-height:1.5;
  opacity:0.82;
  transition:font-size 0.25s ease, opacity 0.25s ease;
}

.dishes-num{
  color:var(--accent);
  font-size:13px;
  flex:none;
  width:24px;
}

.dishes-list strong{
  font-family:var(--font-body);
  font-weight:700;
}

.dishes-disclaimer{
  font-size:11.5px;
  opacity:0.5;
  margin-top:8px;
  max-width:52ch;
}

@media (max-width:767px){
  .chapter-dishes{ flex-direction:column; }
  .dishes-stage{ order:-1; flex:none; width:100%; height:56vh; min-height:320px; }
  .dishes-inner{ min-height:0; padding:48px 20px; }
}

/* ---------- ВАУ-МОМЕНТ 1: canvas-банка, живущая тут (см. main.js JarCanvas) ---------- */
.jar-orbit{
  position:absolute; inset:0;
  z-index:1;
}

.jar-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ---------- ВАУ-МОМЕНТ 2: переключатель вкусов = смена содержимого банки ---------- */
.dishes-color-wash{
  position:absolute; inset:0;
  z-index:0;
  background-color:#8A3A1E;
  opacity:0.22;
  pointer-events:none;
}

/* Кросс-фейд фото блюда поверх вращающегося canvas: несколько наложенных
   <img>, у активного — opacity:1, у остальных — 0. Canvas продолжает
   крутиться независимо от того, что поверх него видно (DoD-проверка "c"
   читает пиксели именно canvas, не эту прослойку). */
.dishes-photo-layer{
  position:absolute; inset:0;
  z-index:2;
}

.dishes-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.45s ease;
}

.dishes-photo.is-active{ opacity:1; }

/* Блик по стеклу при смене блюда — короткая диагональная вспышка. */
.dishes-flash{
  position:absolute; inset:0;
  z-index:3;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.dishes-flash.is-flashing{
  animation:dishes-flash-sweep 0.6s ease forwards;
}

@keyframes dishes-flash-sweep{
  0%{ opacity:0; transform:translateX(-30%); }
  40%{ opacity:1; }
  100%{ opacity:0; transform:translateX(30%); }
}

.dishes-desc{
  position:absolute; left:0; right:0; bottom:0;
  z-index:4;
  padding:28px clamp(20px,4vw,48px);
  background:linear-gradient(0deg, rgba(16,11,6,0.78) 0%, rgba(16,11,6,0) 100%);
  color:var(--bg);
}

.dishes-desc-name{
  font-size:12px;
  letter-spacing:0.1em;
  opacity:0.8;
  margin:0 0 6px;
}

.dishes-desc-text{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(16px,2vw,22px);
  max-width:34ch;
  margin:0;
}

.dishes-row{
  all:unset;
  box-sizing:border-box;
  display:flex;
  gap:14px;
  align-items:baseline;
  width:100%;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  text-align:left;
  padding:8px 10px;
  margin:-8px -10px;
  border-radius:10px;
  border-left:2px solid transparent;
  transition:border-color 0.25s ease, background 0.25s ease;
}

.dishes-row:hover,
.dishes-row:focus-visible{
  border-left-color:var(--accent);
  background:rgba(16,11,6,0.05);
}

.dishes-row:focus-visible{ outline:2px solid var(--cta); outline-offset:2px; }

.dishes-row[aria-selected="true"]{
  border-left-color:var(--cta);
  background:rgba(16,11,6,0.06);
}

.dishes-row[aria-selected="true"] .dishes-num,
.dishes-row[aria-selected="true"] strong{
  color:var(--cta);
}

/* Активное блюдо показывается крупнее — требование ТЗ. */
.dishes-row[aria-selected="true"] .dishes-row-text{
  font-size:16.5px;
  opacity:1;
}

/* ==========================================================================
   4. МАНИФЕСТ
   ========================================================================== */
.chapter-manifesto-wrap{ height:300vh; }

@media (max-width:767px){
  .chapter-manifesto-wrap{ height:150vh; }
}

.chapter-manifesto{ background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); }

.manifesto-lines{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:0 6vw;
  text-align:center;
}

.manifesto-line{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(36px,6vw,88px);
  line-height:1.05;
  color:var(--bg);
  margin:0;
  opacity:0;
  transform:translateY(30px);
  will-change:opacity, transform;
}

/* ==========================================================================
   5. ЗАЯВКА
   ========================================================================== */
.chapter-preorder{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--bg);
  text-align:center;
}

/* Приглушённое атмосферное фото банки (jar-beef, уже подготовлено для главы
   3 — переиспользуем, лишнего веса это не добавляет: файл уже в кэше
   браузера к моменту, когда пользователь долистывает до формы). Сильное
   затемнение поверх — форма и текст не должны конкурировать с картинкой. */
.preorder-bg{
  position:absolute; inset:0;
  z-index:0;
  background-image:url('assets/dishes/jar-beef.webp');
  background-size:cover;
  background-position:center;
  opacity:0.4;
}

.preorder-scrim{
  position:absolute; inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(16,11,6,.88) 0%, rgba(16,11,6,.94) 100%);
}

.preorder-inner{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
}

.preorder-title{
  font-size:clamp(28px,4.4vw,50px);
  font-weight:800;
  margin-bottom:14px;
}

.preorder-sub{
  font-size:clamp(15px,1.8vw,18px);
  opacity:0.75;
  max-width:52ch;
  margin:0 auto 48px;
}

.preorder-counter{
  margin-bottom:20px;
}

.preorder-counter-headline{
  margin:0;
  text-align:center;
  white-space:nowrap;
}

.preorder-counter-label{
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--bg);
  opacity:0.75;
  margin:8px 0 0;
}

.preorder-counter-unit{
  font-size:clamp(13px,1.6vw,17px);
  letter-spacing:0.06em;
  color:var(--bg);
  opacity:0.75;
  margin-left:8px;
}

.preorder-counter-number{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(48px,9vw,120px);
  color:var(--cta);
  line-height:1;
}

.preorder-progress{
  width:min(480px,80vw);
  height:6px;
  border-radius:999px;
  background:rgba(245,228,199,0.2);
  margin:0 auto;
  overflow:hidden;
}

.preorder-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--cta));
  border-radius:999px;
  transition:width 1.2s cubic-bezier(0.16,1,0.3,1);
}

.preorder-progress-caption{
  font-size:12px;
  letter-spacing:0.04em;
  opacity:0.6;
  margin:14px 0 40px;
}

.reserve-form{
  max-width:520px;
  margin:0 auto;
}

/* ---------- Сегмент-переключатель роли («Кто вы?») ---------- */
.role-select{
  border:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.role-select-label{
  width:100%;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--bg);
  opacity:0.75;
  text-align:center;
  margin-bottom:6px;
  padding:0;
}

.role-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(16,11,6,0.18);
  background:#fff;
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.role-chip input{
  position:absolute;
  width:1px; height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.role-chip:has(input:checked){
  background:var(--cta);
  border-color:var(--cta);
  color:var(--on-cta);
  font-weight:600;
}

.role-chip:has(input:focus-visible){
  outline:2px solid var(--cta);
  outline-offset:2px;
}

.reserve-form-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.reserve-form input{
  flex:1 1 200px;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid rgba(16,11,6,0.18);
  font-family:var(--font-body);
  font-size:15px;
  background:#fff;
  color:var(--ink);
}

.reserve-form input:focus{
  outline:2px solid var(--cta);
  outline-offset:2px;
}

.reserve-form button{
  width:100%;
  border:none;
}

.reserve-form button:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none !important;
}

/* ---------- Honeypot: скрыт от людей, виден ботам, которые заполняют всё подряд ---------- */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- Согласие на обработку ПДн ---------- */
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
  opacity:0.85;
  cursor:pointer;
  text-align:left;
}

/* Глава 5 (заявка) теперь на тёмном фото-фоне (см. .preorder-bg/.preorder-scrim
   выше) — тот же .consent-row переиспользуется и в главе 7 (пайщики, светлый
   фон), поэтому светлый текст только здесь, скоуп через родителя. */
.chapter-preorder .consent-row{
  color:var(--bg);
  opacity:0.92;
}

.consent-row input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--cta);
  cursor:pointer;
}

.consent-row a{
  color:var(--cta);
  text-decoration:underline;
  text-underline-offset:2px;
}

.reserve-success{
  font-family:var(--font-body);
  font-size:17px;
  padding:20px;
  border-radius:14px;
  background:rgba(193,101,29,0.14);
  border:1px solid rgba(193,101,29,0.4);
}

/* ==========================================================================
   6. МИССИЯ + КАРТА ЗАЯВОК (обычный скролл, без пина)
   ========================================================================== */
.chapter-mission{
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 85%);
  color:var(--bg);
}

.mission-inner{
  max-width:1100px;
  margin:0 auto;
}

.reveal{ will-change:opacity, transform; }

.mission-title{
  font-size:clamp(30px,5vw,58px);
  font-weight:800;
  color:var(--bg);
  max-width:18ch;
  margin-bottom:28px;
}

.mission-copy{
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.45;
  max-width:60ch;
  color:var(--bg);
  margin-bottom:20px;
}

.mission-sub{
  font-size:16px;
  max-width:52ch;
  color:rgba(245,228,199,0.72);
  margin-bottom:56px;
}

.invite-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:72px;
}

.invite-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:rgba(245,228,199,0.05);
  border:1px solid rgba(245,228,199,0.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:18px;
  padding:28px 24px;
}

.invite-card h3{
  font-family:var(--font-head);
  font-size:18px;
  letter-spacing:0.04em;
  color:var(--accent);
}

.invite-card p{
  flex:1;
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:rgba(245,228,199,0.85);
}

.invite-link{
  align-self:flex-start;
  background:transparent;
  border:1px solid rgba(245,228,199,0.4);
  color:var(--bg);
  border-radius:999px;
  padding:10px 20px;
  font-size:13px;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.invite-link:hover{
  border-color:var(--accent);
  background:rgba(193,101,29,0.12);
  transform:translateY(-2px);
}

/* ---------- Карта заявок ---------- */
.map-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
  margin-bottom:24px;
}

.map-total{
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--accent);
}

.map-legend{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:0; padding:0;
}

.map-legend li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:0.04em;
  color:rgba(245,228,199,0.8);
}

.map-legend-swatch{
  width:9px; height:9px;
  border-radius:50%;
  display:inline-block;
  flex:none;
}

.map-svg-wrap{
  width:100%;
  max-width:760px;
  margin:0 auto;
}

.map-svg-wrap svg{
  display:block;
  width:100%;
  height:auto;
}

.map-outline{
  fill:var(--ink);
  stroke:rgba(245,228,199,0.18);
  stroke-width:2;
}

.map-dot-ping{
  transform-box:fill-box;
  transform-origin:center;
  animation:map-ping 2.5s ease-out infinite;
  animation-delay:var(--dot-delay,0s);
}

@keyframes map-ping{
  0%{ r:5; stroke-opacity:0.6; }
  100%{ r:22; stroke-opacity:0; }
}

.map-caption{
  margin-top:18px;
  text-align:center;
  font-size:11px;
  opacity:0.55;
}

@media (max-width:767px){
  .map-stats{ justify-content:flex-start; }
}

/* ==========================================================================
   7. ПАЙЩИКИ + ФУТЕР
   ========================================================================== */
.chapter-members{
  background:linear-gradient(180deg, #EBD9B4 0%, #F5E4C7 25%);
  color:var(--ink);
  text-align:center;
}

.members-inner{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto 72px;
}

.members-card h2{
  font-size:clamp(28px,4vw,44px);
  margin-bottom:16px;
}

.members-card p{
  font-size:16px;
  opacity:0.85;
  margin-bottom:32px;
}

/* ==========================================================================
   ФУТЕР
   ========================================================================== */
.site-footer{
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color:var(--bg);
  text-align:center;
  padding:40px 24px;
  font-size:13px;
}

.footer-hud{
  margin-top:10px;
  opacity:0.5;
  font-size:11px;
}

.footer-link{
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:0.85;
  transition:color 0.2s ease, opacity 0.2s ease;
}

.footer-link:hover{
  color:var(--accent);
  opacity:1;
}

/* ==========================================================================
   БЕЗОПАСНАЯ ПРАВАЯ ЗОНА ПОД ШКАЛУ ПРОСЛЕЖИВАЕМОСТИ (desktop ≥768px)
   Шкала #scale зафиксирована справа (right:36px, собственная ширина ~117px,
   т.е. её левый край лежит ~153px от правого края экрана) и лежит поверх
   контента всех глав. Резервируем контенту ~160px от правого края экрана —
   единообразно для всех 6 глав, не трогая полноэкранные фоны/картинки.
   ========================================================================== */
@media (min-width:768px){
  .hero-content{ padding-right:max(6vw,160px); }
  .manifesto-lines{ padding-right:max(6vw,160px); }
  .chapter-section{ padding-right:160px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
body.reduced-motion .chapter-hero-wrap,
body.reduced-motion .chapter-manifesto-wrap{
  height:auto;
}

body.reduced-motion .chapter-pin{
  height:auto;
  min-height:100vh;
  position:static;
}

/* Глава 3 (ассортимент) не использует .chapter-pin (сама придумывает sticky
   через .dishes-stage) — под reduced-motion сброс sticky/min-height нужен
   отдельно: без scrub искусственный 200vh запас скролла не нужен. */
body.reduced-motion .dishes-inner{ min-height:auto; }
body.reduced-motion .dishes-stage{ position:static; height:60vh; }

body.reduced-motion .hero-title .word{
  opacity:1 !important;
  transform:none !important;
}

body.reduced-motion .hero-video{ display:none; }

body.reduced-motion .manifesto-line{
  opacity:1 !important;
  transform:none !important;
}

body.reduced-motion .reveal{
  opacity:1 !important;
  transform:none !important;
}

body.reduced-motion .map-dot-ping{
  animation:none;
  opacity:0.35;
}

/* ==========================================================================
   УТИЛИТЫ
   ========================================================================== */
::selection{ background:var(--accent); color:var(--bg); }

@media (max-width:767px){
  .chapter-section{ padding:80px 20px; }
}