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

/* «Тёмный архив»: ровно два цвета — почти-чёрный фон и кремовый текст.
   Третьего нет: единственный цвет в кадре даёт еда на фотографиях.
   --dim/--rule — не новые цвета, а тот же кремовый, приглушённый до
   второстепенного текста и до линеек каталожной карточки. --glow —
   не элемент палитры, а свет самой еды (тёплое свечение под банкой). */
:root{
  /* Два цвета. Третьего нет — единственный цвет в кадре даёт еда на фото. */
  --paper:#E8DCC8;        /* кремовый: текст, светлые плоскости */
  --dark:#0B0906;         /* почти-чёрный: фон архива */
  --dark-2:#12100B;       /* на тон светлее — слоистая глубина, не плоский чёрный */
  --dim:#A79B87;          /* приглушённый кремовый: подписи, мета. 7.5:1 к фону —
                             прежние #8B8070 давали 5.13:1 и на 11px читались как грязь */
  --rule:#3A3227;         /* линейки и рамки каталожной карточки */
  --glow:#C98A3C;         /* свет самой еды: только свечение, не заливка */

  --accent:var(--paper);
  --cta:var(--paper);
  --support:var(--dim);
  --on-cta:var(--dark);

  --role-consumer:#C98A3C;
  --role-farmer:#8FA36B;
  --role-workshop:#D2765A;
  --role-warehouse:#A08A6A;
  --role-logistics:#B06A6A;

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

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

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

body{
  margin:0;
  background:var(--dark);
  color:var(--paper);
  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); font-weight:900; margin:0; letter-spacing:0.005em; }

/* ---------- зерно поверх всего: даёт архивной плёнке фактуру и,
   что важнее, разбивает бандинг градиентов на почти-чёрном фоне ---------- */
#grain{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  opacity:0.04;
  background-image:url("data:image/png;base64,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");
  background-size:96px 96px;
  background-repeat:repeat;
}
/* Зерно только на десктопе. На телефоне оно (а) почти не видно на маленьком
   экране, (б) в некоторых мобильных браузерах opacity на fixed-слое даёт
   артефакт композитинга. Выключаем — потеря нулевая, риск нулевой. */
@media (max-width:767px){ #grain{ display:none; } }
/* hero остаётся светлым — зерно его не касается (см. z-index hero-контента) */

/* ---------- архивные метки: моно-подписи каталожной карточки ---------- */
.archive-mark{
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--dim);
}

.archive-rule{
  display:flex; align-items:center; gap:16px;
  margin:0 0 40px;
  color:var(--dim);
}
.archive-rule::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
.archive-rule > span{ white-space:nowrap; }

/* ---------- 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(--dark), var(--accent) 55%, var(--cta)) !important;
}

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

.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(--dark);
  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(--dark);
  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){
  /* высота hero-wrap на мобиле — в hero-блоке (200svh под pin-раскрытие) */
}

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

.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(--paper);
}

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

.hero-content .hud-line{
  /* Фикс контраста (было 2.04:1 на десктопе): вместо голого текста поверх
     видео/фото — непрозрачная тёмная плашка + кремовый (var(--paper)) текст.
     Плашка держит контраст независимо от того, что происходит в кадре видео
     под ней (проверено на светлом небе и на тёмных участках) — см. отчёт. */
  display:inline-block;
  color:var(--paper);
  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(--paper);
  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(--paper);
  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(--paper); }

.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(--paper);
  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(--dark);
}

.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(--paper);
}

.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(--paper);
  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(--paper);
}

.cows-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(32px,5.8vw,64px);
  line-height:1.06;
  color:var(--paper);
  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(--paper);
  opacity:0.88;
  text-shadow:0 2px 12px rgba(16,11,6,.55);
}

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

/* ==========================================================================
   3. РЕЕСТР — вращающаяся банка (canvas-скраб) на почти-чёрном.
   Секция не пинится GSAP-ом: сцена «прилипает» чистым position:sticky (тот же
   приём, что в hero), поэтому нет pin-spacer'ов и, соответственно, нет CLS.
   Свечение под банкой — это «еда светит»: единственный источник цвета в кадре.
   ========================================================================== */
.chapter-registry-wrap{
  position:relative;
  height:220vh;
  background:var(--dark);
}

.chapter-registry{
  position:sticky; top:0;
  height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}

.registry-head{
  position:absolute; top:0; left:0; right:0;
  padding:32px clamp(20px,5vw,64px) 0;
  display:flex; justify-content:space-between; gap:16px;
  z-index:3;
}

.registry-title{
  position:relative; z-index:3;
  font-size:clamp(30px,6.5vw,84px);
  line-height:0.98;
  text-align:center;
  text-wrap:balance;
  margin-bottom:8px;
  pointer-events:none;
}

/* Подпись уводим к нижней кромке: над стеклом банки мелкий текст нечитаем. */
.registry-sub{
  position:absolute; z-index:3;
  left:50%; bottom:38px;
  transform:translateX(-50%);
  max-width:52ch;
  text-align:center;
  margin:0;
  padding:0 20px;
  pointer-events:none;
}

/* Банка поверх заголовка: она и есть герой кадра, текст расступается вокруг. */
.jar-orbit{
  position:absolute; inset:0;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

.jar-canvas{
  width:auto;
  height:min(78vh, 620px);
  max-width:90vw;
}

/* Свет самой еды — тёплое пятно под банкой, а не подсветка интерфейса. */
.jar-glow{
  position:absolute; z-index:1;
  left:50%; top:50%;
  width:min(70vh,560px); height:min(70vh,560px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklch, var(--glow) 30%, transparent) 0%, transparent 62%);
}

/* Подписи по краям — как на каталожной карточке, без выносных линий. */
.registry-side{
  position:absolute; z-index:3;
  top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl;
}
.registry-side-l{ left:clamp(12px,3vw,40px); }

@media (max-width:767px){
  .chapter-registry-wrap{ height:180vh; }
  .jar-canvas{ height:min(58vh,420px); }
  .registry-side{ display:none; }
  .registry-title{ font-size:clamp(26px,9vw,44px); }
}

/* ==========================================================================
   4. ГОРИЗОНТАЛЬНАЯ ГАЛЕРЕЯ РЕЦЕПТОВ — семь банок едут вбок по вертикальному
   скроллу. Липкий слой держит кадр, лента внутри двигается по X (GSAP scrub).
   Активная карточка — та, чей центр ближе к центру экрана: она в полном
   размере и светится, соседние притушены и уменьшены.
   На мобиле лента распадается в вертикальный список (см. @media ниже).
   ========================================================================== */
.chapter-gallery-wrap{
  position:relative;
  height:440vh;
  background:var(--dark);
}

.chapter-gallery{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  display:flex; flex-direction:column;
}

.gallery-head{
  flex:none;
  padding:28px clamp(20px,5vw,64px) 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}

.gallery-head h2{
  font-size:clamp(22px,3.4vw,42px);
  line-height:1;
}

.gallery-viewport{
  flex:1;
  display:flex; align-items:center;
  min-height:0;
}

.gallery-track{
  display:flex;
  align-items:center;
  gap:clamp(40px,9vw,140px);
  padding:0 max(20px, calc(50vw - 280px));
  will-change:transform;
}

.recipe-card{
  flex:none;
  width:min(560px, 84vw);
  text-align:center;
  /* Соседние банки раньше гасли до 0.4 — с учётом того, что текст под ними
     и так приглушён, эффективный контраст падал до ~1.9:1: буквально «не
     видно». Теперь соседи остаются различимыми (0.62), а нечитаемую кашу
     убирает не прозрачность, а то, что подписи показывает ТОЛЬКО активная. */
  opacity:0.62;
  transform:scale(0.84);
  transition:opacity 0.4s ease;
}

.recipe-card.is-active{ opacity:1; }

/* У неактивных остаётся только банка и её номер — как корешки в архиве. */
.recipe-card .recipe-name,
.recipe-card .recipe-gost,
.recipe-card .recipe-desc{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.recipe-card.is-active .recipe-name,
.recipe-card.is-active .recipe-gost,
.recipe-card.is-active .recipe-desc{
  opacity:1;
  transform:none;
}

.recipe-card-figure{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:min(62vh, 580px);
  margin-bottom:26px;
}

/* Свечение — только под активной банкой, поэтому в кадре светится ровно одна. */
.recipe-card-figure::before{
  content:"";
  position:absolute; left:50%; top:52%;
  width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch, var(--glow) 42%, transparent) 0%, transparent 66%);
  opacity:0;
  transition:opacity 0.45s ease;
}
.recipe-card.is-active .recipe-card-figure::before{ opacity:1; }

/* Банки вырезаны из фона (hyperframes remove-background, альфа по стеклу).
   Раньше это были прямоугольные фото на своём тёмном фоне, и я гасил их края
   маской — но маска либо оставляла видимую плашку, либо выедала саму банку.
   Настоящая альфа снимает вопрос: банка парит, свечение под ней просвечивает
   сквозь стекло, никаких краёв нет. */
.recipe-card-figure img{
  position:relative;
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,0.6));
}

/* Жидкое искажение — включается на 0.5с на карточке, которая только что стала
   активной; фильтр висит ровно на одном элементе за раз (см. initRecipeGallery). */
.recipe-card.is-morphing .recipe-card-figure img{ filter:url(#liquid); }

.recipe-num{
  display:block;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.16em;
  color:var(--dim);
  margin-bottom:10px;
}

.recipe-name{
  font-size:clamp(19px,2.1vw,27px);
  line-height:1.1;
  margin-bottom:10px;
  text-wrap:balance;
}

.recipe-gost{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:0.14em;
  color:var(--dim);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:4px 9px;
  margin-bottom:12px;
}

.recipe-desc{
  font-size:14.5px;
  line-height:1.55;
  color:var(--dim);
  max-width:34ch;
  margin:0 auto;
}

/* Прогресс ленты: сколько банок реестра уже проехало. */
.gallery-progress{
  flex:none;
  display:flex; align-items:center; gap:16px;
  padding:0 clamp(20px,5vw,64px) 30px;
}
.gallery-progress-track{
  flex:1; height:1px; background:var(--rule);
  position:relative;
}
.gallery-progress-fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background:var(--dark);
}

.gallery-disclaimer{
  padding:0 clamp(20px,5vw,64px) 64px;
  color:var(--dim);
  font-size:13.5px;
  max-width:60ch;
  background:var(--dark);
}

/* Мобила: горизонтальная лента ОСТАЁТСЯ (раньше она тут разваливалась в
   вертикальный список — владелец справедливо сказал, что «нет sticky-скроллов»).
   Секция липнет, банки едут вбок по вертикальному скроллу — ровно как на
   десктопе, только карточки уже и радиус меньше. */
@media (max-width:767px){
  .chapter-gallery-wrap{ height:380vh; }
  .gallery-track{
    gap:14vw;
    padding:0 max(16px, calc(50vw - 39vw));
  }
  .recipe-card{ width:78vw; }
  .recipe-card-figure{ height:44vh; margin-bottom:18px; }
  .recipe-name{ font-size:20px; }
  .recipe-desc{ font-size:14px; max-width:30ch; }
  .gallery-head{ padding:20px 20px 0; }
  .gallery-head h2{ font-size:20px; }
  .gallery-progress{ padding:0 20px 22px; }
}

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

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

.chapter-manifesto{ background:linear-gradient(160deg, var(--dark) 0%, var(--dark-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(--paper);
  margin:0;
  opacity:0;
  transform:translateY(30px);
  will-change:opacity, transform;
}

/* ==========================================================================
   5. ЗАЯВКА
   ========================================================================== */
.chapter-preorder{
  position:relative;
  overflow:hidden;
  background:var(--dark);
  color:var(--paper);
  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(--paper);
  opacity:0.75;
  margin:8px 0 0;
}

.preorder-counter-unit{
  font-size:clamp(13px,1.6vw,17px);
  letter-spacing:0.06em;
  color:var(--paper);
  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(--paper);
  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(--dark);
  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(--dark);
}

.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(--dark);
  opacity:0.85;
  cursor:pointer;
  text-align:left;
}

/* Глава 5 (заявка) теперь на тёмном фото-фоне (см. .preorder-bg/.preorder-scrim
   выше) — тот же .consent-row переиспользуется и в главе 7 (пайщики, светлый
   фон), поэтому светлый текст только здесь, скоуп через родителя. */
.chapter-preorder .consent-row{
  color:var(--paper);
  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(--dark) 0%, var(--dark-2) 85%);
  color:var(--paper);
}

.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(--paper);
  max-width:18ch;
  margin-bottom:28px;
}

.mission-copy{
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.45;
  max-width:60ch;
  color:var(--paper);
  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(--paper);
  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(--dark);
  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(--dark);
  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(--dark) 0%, var(--dark-2) 100%);
  color:var(--paper);
  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
   ========================================================================== */
/* ВНИМАНИЕ: раньше здесь под reduced-motion сбрасывались height и position:static
   у .chapter-pin / manifesto / dishes — это убивало sticky и scrub. Убрано.
   Теперь scroll-driven сцены (банка, галерея, манифест, hero-фон) работают и под
   reduced-motion: ими управляет палец пользователя, а не таймер. Гасятся ниже
   только самопроизвольные вещи — hero-видео, автоспин, reveal, пинг на карте. */

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

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(--paper); }

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

/* ==========================================================================
   ТЁМНЫЙ АРХИВ — добивка. Здесь только те правила, где старый код держал
   светлое значение хардкодом (#fff, rgba(16,11,6,...)) и переименование
   переменных до них не дотянулось. Всё остальное перекрасилось само.
   ========================================================================== */

/* Шкала слева: линия и точка были посчитаны под кремовый фон. */
.scale-track{ background:var(--rule); }
.scale-dot{ background:var(--paper); box-shadow:0 0 0 4px color-mix(in oklch, var(--paper) 18%, transparent); }
.scale-mark.active .scale-mark-label{ color:var(--paper); }

/* Номер главы — служебная метка, а не акцент: приглушаем до цвета подписей. */
.chapter-eyebrow{ color:var(--dim); }

/* Карточка «Кооператив» была тёмной плашкой на кремовом фоне — на чёрном она
   растворилась. Держим её рамкой каталожной карточки, а не заливкой. */
.circle-card-coop{
  background:var(--dark-2);
  border:1px solid var(--rule);
}
.circle-card-coop h3{ color:var(--paper); }

.circle-proof{
  border-left:1px solid var(--rule);
  background:transparent;
  color:var(--dim);
}

/* Поля формы: были белыми с тёмной обводкой. */
.reserve-form input[type="text"],
.reserve-form input[type="email"],
.reserve-form input[type="tel"]{
  background:var(--dark-2);
  border:1px solid var(--rule);
  color:var(--paper);
}
.reserve-form input::placeholder{ color:var(--dim); }
.reserve-form input:focus{ outline:none; border-color:var(--paper); }

.role-chip{
  background:var(--dark-2);
  border:1px solid var(--rule);
  color:var(--dim);
}
.role-chip:has(input:checked){
  background:var(--paper);
  border-color:var(--paper);
  color:var(--dark);
}
.role-select-label{ color:var(--dim); opacity:1; }

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

/* Кнопки: кремовая заливка на чёрном — самый контрастный элемент страницы,
   поэтому CTA не нуждается в цвете. Призрачная — обводкой. */
.btn-primary{ background:var(--paper); color:var(--dark); border-color:var(--paper); }
.btn-primary:disabled{ opacity:0.35; cursor:not-allowed; transform:none; }
.btn-ghost{ color:var(--paper); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--paper); }

/* Приглашения ролям и карточка пайщиков — каталожные карточки, не плашки. */
.invite-card,
.members-card{
  background:var(--dark-2);
  border:1px solid var(--rule);
}
.invite-link{ color:var(--paper); background:transparent; border:0; cursor:pointer; padding:0; }

.map-outline{ fill:var(--dark-2); stroke:var(--rule); }
.map-caption, .map-total, .map-legend{ color:var(--dim); }

.site-footer{ border-top:1px solid var(--rule); color:var(--dim); }
.footer-link{ color:var(--paper); }

/* ==========================================================================
   НАТИВНЫЙ SCROLL-TIMELINE: reveal без единой строки JS.
   Работает на компоситоре, поэтому не грузит главный поток при скролле.
   GSAP-фолбэк (ScrollTrigger.batch в initReveal) остаётся для браузеров без
   поддержки — он же продолжает обслуживать элементы .reveal.
   ========================================================================== */
/* Нативный scroll-timeline для вертикального списка карточек убран: списка
   больше нет, лента горизонтальная на всех экранах. */

@keyframes archive-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .recipe-card{ animation:none; opacity:1; transform:none; }
  #grain{ display:none; }
}

.manifesto-mark{
  position:absolute; top:32px; left:clamp(20px,5vw,64px);
  margin:0;
}

/* Шкала прослеживаемости привязана к главе «Круг» и физически налезает на
   ленту галереи — прячем её на время горизонтальной сцены (класс ставит
   ScrollTrigger.onToggle в initRecipeGallery). */
body.hide-scale #scale{ opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
#scale{ transition:opacity 0.3s ease; }

/* Банка занимает почти всю высоту кадра, и подпись у нижней кромки ложилась
   прямо на стекло. Подкладываем под неё спуск в фон — заодно он «ставит»
   банку на темноту, а не подвешивает в пустоте. */
.chapter-registry::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:22vh;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--dark) 78%);
}

/* Переход из светлого hero в тёмный архив — спуск, а не стык. */
.chapter-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:18vh;
  z-index:1;             /* под .hero-content и .scroll-hint (оба z-index:2) */
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--dark) 100%);
}

/* Выключенная кнопка не должна выглядеть как активная тусклая заливка. */
.btn-primary:disabled{
  background:transparent;
  color:var(--dim);
  border-color:var(--rule);
  opacity:1;
}

/* ==========================================================================
   ГАЛЕРЕЯ: шкала реестра вместо безликой полосы прогресса — семь засечек,
   пройденные заливаются. Читается как корешки картотеки, а не как загрузка.
   ========================================================================== */
.gallery-ticks{
  display:flex; gap:6px; flex:1;
}
.gallery-tick{
  flex:1; height:2px;
  background:var(--rule);
  transition:background 0.3s ease;
}
.gallery-tick.is-done{ background:var(--paper); }

/* Крупный номер активной позиции — якорь для глаза в центре кадра. */
.gallery-head h2{ letter-spacing:-0.01em; }
#gallery-counter{ font-size:13px; }

/* ==========================================================================
   ТАЧ-ЦЕЛИ. Аудит на матрице устройств (375–430px) показал: чекбокс согласия
   был 16×16 px при норме 44×44 — а без него форма вообще не отправляется.
   Это была прямая потеря конверсии на телефоне, а не косметика.
   ========================================================================== */
/* Селектор с той же специфичностью, что и старое правило на ~1185 строке
   (.consent-row input[type="checkbox"]) — иначе оно перебивало размер обратно
   на 16px, что аудит и показал. */
.consent-row input[type="checkbox"].consent-checkbox{
  width:24px; height:24px;
  min-width:24px; min-height:24px;
  flex:none;
  accent-color:var(--paper);
  cursor:pointer;
}

.consent-row{
  display:flex; align-items:flex-start; gap:12px;
  /* вертикальные поля добирают тач-зону всей строки до 44px */
  padding:11px 0;
  cursor:pointer;
  line-height:1.5;
}

.consent-row span{ padding-top:1px; }

/* Ссылки внутри согласия и футера: подчёркивание + запас по высоте,
   чтобы попасть пальцем, не промахнувшись в соседнюю. */
.consent-row a,
.footer-link{
  display:inline-block;
  padding:3px 0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.invite-link{
  display:inline-flex; align-items:center;
  min-height:44px;
  padding:0 2px;
}

/* Кнопки формы и CTA — комфортная высота на телефоне. */
@media (max-width:767px){
  .btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
  .reserve-form input[type="text"],
  .reserve-form input[type="tel"],
  .reserve-form input[type="email"]{ min-height:48px; font-size:16px; } /* 16px — iOS иначе зумит поле при фокусе */
  .role-chip{ min-height:44px; }
}

/* ==========================================================================
   ОРБИТА — глава «Заявка».
   Раньше фоном тут стояло тёмное фото банки: на почти-чёрной странице оно
   читалось как пустое пятно, а форма поверх него требовала такого затемнения,
   что от кадра всё равно ничего не оставалось. Поэтому сцена и форма больше
   не борются за одно место: форма слева, живая сцена справа.

   Механика орбиты: кольцо .orbit-ring вращается вокруг оси Y. Каждый кусок
   стоит на своём угле --a и выносится наружу на радиус. Внутренняя картинка
   контрвращается, чтобы кусок не переворачивался вверх ногами. Половина круга
   проходит ЗА банкой, половина — перед ней: отсюда настоящая глубина, без WebGL.
   ========================================================================== */
.chapter-preorder{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:clamp(24px,4vw,64px);
}

.preorder-inner{
  position:relative; z-index:3;
  flex:1 1 560px;
  max-width:640px;
  margin:0;
}

/* Затемнение больше не заливает весь экран — только мягко подкладывается
   под колонку с формой, чтобы текст читался, если сцена подойдёт близко. */
.preorder-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,9,6,.92) 0%, rgba(11,9,6,.72) 46%, rgba(11,9,6,0) 72%);
}

.orbit-scene{
  position:relative; z-index:2;
  flex:1 1 460px;
  align-self:stretch;
  min-height:min(74vh,700px);
  display:flex; align-items:center; justify-content:center;
  perspective:1100px;
  pointer-events:none;
}

.orbit-glow{
  position:absolute;
  width:min(64vh,600px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch, var(--glow) 30%, transparent) 0%, transparent 64%);
}

.orbit-jar{
  position:relative; z-index:2;
  height:min(56vh,500px);
  width:min(42vh,380px);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
@media (max-width:900px){ .orbit-jar{ height:min(38vh,320px); width:min(30vh,250px); } }

/* Кольцу нужен ЯВНЫЙ центр: position:absolute без координат оставляет его в
   статической позиции flex-потока (у левого края), и все куски улетали за кадр. */
.orbit-ring{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
  z-index:2;
}

.orbit-item{
  position:absolute;
  transform-style:preserve-3d;
  /* --y разбрасывает куски по высоте: без него кольцо читается как плоская
     карусель, а нам нужна левитация. */
  transform:translateY(var(--y, 0px)) rotateY(var(--a)) translateZ(var(--radius, 250px));
}

.orbit-item img{
  display:block;
  /* Глобальное правило img{max-width:100%} считает 100% от контейнера, а
     контейнер тут — кольцо шириной 0. Из-за этого все куски схлопывались в
     нулевой размер и были невидимы. */
  max-width:none;
  width:calc(var(--s) * var(--bit, 62px));
  height:auto;
  /* Контрвращаем на СВОЙ угол И на живой поворот кольца (--spin ставит JS).
     Без второго слагаемого куски вставали боком, как только кольцо начинало
     крутиться, и выглядели сплющенными. */
  transform:rotateY(calc(-1 * (var(--a) + var(--spin, 0deg)))) rotate(var(--tilt, 0deg));
  /* drop-shadow тут НЕ ставим: он пересчитывается на каждом кадре для каждого
     из восьми кусков, и посекционный замер показал просадку главы «Заявка» до
     41 fps при 60 у всех остальных. Куски и так лежат на почти-чёрном фоне —
     тень им ничего не добавляет. */
}

@media (min-width:1200px){
  .orbit-item{ --radius:330px; }
  .orbit-item img{ --bit:86px; }
}

@media (max-width:900px){
  .chapter-preorder{ flex-direction:column-reverse; }
  .preorder-inner{ max-width:none; flex:none; width:100%; }
  .orbit-scene{ flex:none; width:100%; min-height:46vh; }
  .preorder-scrim{ background:linear-gradient(180deg, rgba(11,9,6,0) 0%, rgba(11,9,6,.55) 46%, rgba(11,9,6,.9) 100%); }
  .orbit-item{ --radius:160px; }
  .orbit-item img{ --bit:46px; }
  .orbit-jar{ height:min(38vh,320px); }
  /* Прореживаем орбиту на мобиле, но НЕ через :nth-child(even): элементы идут
     чередованием перец/капля, и «чётные» — это ровно все капли. Из-за этого на
     телефоне вокруг банки летал один перец. Убираем каждый третий — оба вида
     остаются. */
  .orbit-item:nth-child(3n){ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .orbit-ring{ transform:translate(-50%,-50%) rotateY(-18deg) !important; }
}

/* ==========================================================================
   ГЛАВА «КТО В ДЕЛЕ» — карточки участников.
   Название «Круг, а не цепочка» убрано (решение владельца). Добавлены СКЛАД и
   ЛОГИСТИКА: эти роли были в форме, но в главе не упоминались, и человек не
   понимал, кого мы вообще зовём.
   ========================================================================== */

/* Карточка без фото — рамка каталожной карточки, а не тёмная плашка. */
.circle-card-flat{
  background:var(--dark-2);
  border:1px solid var(--rule);
}
.circle-card-flat h3{ color:var(--paper); }

/* perspective на сетке убран: он держал 3D-контекст для шести карточек с
   фоновыми фото и стоил дороже, чем давал. Наклон карточек оставлен, GSAP
   применит его через собственный transformPerspective. */

/* will-change тут НЕ ставим. Проверено замером: постоянный will-change на
   полноэкранном фото коров держит тяжёлый GPU-слой всю жизнь страницы и делает
   хуже, а не лучше. GSAP и так поднимает элемент на слой на время твина. */

/* Орбита теперь из перца и капель бульона, а не из кусков мяса и моркови:
   в исходном кадре те куски перекрывают друг друга, и любой вырез тащил за
   собой обрывки соседей — владелец справедливо назвал их «хуёвыми кусками».
   Перец и капли стояли на чистом небе и вырезались начисто.
   Разные базовые размеры: горошина мелкая, капля покрупнее. */
.orbit-item.orbit-pepper img{ --bit:18px; }
.orbit-item.orbit-drop img{ --bit:34px; }
@media (min-width:1200px){
  .orbit-item.orbit-pepper img{ --bit:22px; }
  .orbit-item.orbit-drop img{ --bit:42px; }
}
@media (max-width:900px){
  .orbit-item.orbit-pepper img{ --bit:14px; }
  .orbit-item.orbit-drop img{ --bit:26px; }
}

/* ==========================================================================
   МОБИЛЬНАЯ ДОВОДКА — по результатам детального аудита на 390×844.
   Перекрытий текста не нашлось, горизонтального скролла нет, FPS 59.
   Ниже — то, что аудит и осмотр экранов реально выявили.
   ========================================================================== */

/* 1. Заголовок реестра лежит прямо на банке. На десктопе банка меньше и темнее,
      на телефоне она во весь экран, и белые буквы тонули в моркови. Даём тексту
      собственную опору — мягкую тёмную подложку и тень. */
@media (max-width:767px){
  .registry-title{
    font-size:clamp(30px,8.5vw,44px);
    text-shadow:0 4px 28px rgba(11,9,6,.95), 0 2px 8px rgba(11,9,6,.9);
  }
  .chapter-registry::before{
    content:"";
    position:absolute; left:0; right:0;
    top:34%; height:26%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg, transparent 0%, rgba(11,9,6,.62) 35%, rgba(11,9,6,.62) 65%, transparent 100%);
  }
}

/* 2. Подпись реестра рассыпалась на пять строк «лесенкой»: моно 11px с широким
      трекингом в узкой колонке. Сжимаем трекинг и даём ей ширину. */
@media (max-width:767px){
  .registry-sub{
    bottom:22px;
    max-width:none; width:calc(100% - 32px);
    letter-spacing:0.06em;
    font-size:12px;
    line-height:1.6;
  }
}

/* 3. Служебный моно-текст 11px на телефоне слишком мелкий (аудит нашёл 8 мест).
      Поднимаем до 12px — это минимум, при котором заглавные с трекингом ещё
      читаются на маленьком экране. */
@media (max-width:767px){
  .archive-mark, .scroll-hint .mono, .cows-sub, .map-caption{ font-size:12px; }
}

/* 4. Выключенная кнопка выглядела как простой серый текст: человек не понимал,
      что это кнопка и почему она не работает. Возвращаем ей форму кнопки и
      подсказываем, чего не хватает. */
.btn-primary:disabled{
  background:transparent;
  color:var(--dim);
  border:1px dashed var(--rule);
  opacity:1;
  cursor:not-allowed;
}
.reserve-form:has(input[name="consent"]:not(:checked)) .btn-primary::after{
  content:" — поставьте галочку согласия";
  font-weight:400;
  font-size:13px;
  opacity:.8;
}
/* Базовое правило объявлено ДО медиазапроса: раньше оно шло после и перебивало
   его — подсказка не показывалась на телефоне вообще (поймал проверкой
   computed style, а не глазами). */
.consent-hint{
  display:none;
  margin:10px 0 0;
  color:var(--dim);
  font-size:13px;
  text-align:center;
}
@media (max-width:520px){
  /* На узком экране приписка внутри кнопки не помещается — выносим её отдельной
     строкой под кнопкой. */
  .reserve-form:has(input[name="consent"]:not(:checked)) .btn-primary::after{ content:""; }
  .reserve-form:has(input[name="consent"]:not(:checked)) .consent-hint{ display:block; }
}

/* 5. Свечение орбиты вылезало за пределы экрана (нашёл аудит). Прижимаем. */
.orbit-glow{ max-width:92vw; max-height:92vw; }

/* ==========================================================================
   HERO НА ТЕЛЕФОНЕ — кинематографичное появление по скроллу.
   Сценарий (запрос владельца): сначала полноэкранный луп девушки, чисто. По
   мере скролла появляется «Баночка / Кооператив честной еды», затем параллаксом
   выезжают кнопки. Раскрытием управляет JS (scrub, см. initHeroReveal) — здесь
   только стартовые/финальные состояния и раскладка.

   Секция pin: высота-обёртка даёт запас скролла, .chapter-hero прилипает
   (sticky) на весь экран, видео заполняет его целиком. Текст и кнопки — в
   нижней трети на плотном градиенте, чтобы не спорить с лицом.
   ========================================================================== */
@media (max-width:767px){
  .chapter-hero-wrap{ height:200svh; }        /* запас под pin-раскрытие */

  .hero-content{
    position:absolute;
    left:0; right:0; bottom:0;
    top:auto; height:auto; max-width:none;
    display:block;
    padding:0 22px calc(30px + env(safe-area-inset-bottom));
    z-index:2;
  }
  .hero-title{ max-width:none; font-size:clamp(38px,12vw,60px); margin-bottom:10px; }
  .hero-sub{ font-size:17px; max-width:30ch; margin-bottom:22px; }
  .hero-cta{ width:100%; gap:10px; }
  .hero-cta .btn{ flex:1 1 0; padding:15px 10px; font-size:14px; white-space:nowrap; }

  /* Плотный градиент снизу — опора под текст поверх видео. */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(11,9,6,0) 0%, rgba(11,9,6,0) 34%,
      rgba(11,9,6,.35) 58%, rgba(11,9,6,.82) 82%, rgba(11,9,6,.97) 100%);
  }

  .scroll-hint{ bottom:calc(20px + env(safe-area-inset-bottom)); }
}

/* Кадры логистики и кооператива: интересное — в центре-низу (руки, банки),
   а не сверху (окно/фон). Смещаем точку показа вниз. */
.circle-card[data-stage="coop"]{ background-position:center 62% !important; }
.circle-card[data-stage="logistics"]{ background-position:center 55% !important; }