/* ══════════════════════════════════════════════════════════════════
   ПРАВКИ ПОВЕРХ СБОРКИ

   Этот файл не из билда. Сам билд минифицирован и исходников к нему
   на машине нет, поэтому всё, что мы меняем в дизайне, живёт здесь —
   одним читаемым списком, который потом переносится в репозиторий
   руками. Ничего в assets/ не трогаем.

   Подключён из index.html всех четырёх локалей последним, поэтому
   выигрывает по порядку, без !important, где это возможно.
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. Изолинии фона ──────────────────────────────────────────────
   Два скопления замкнутых колец — 7 вокруг точки 430,330 и 5 вокруг
   1180,720 — рисуются процедурно в JS и лежат фиксированным слоем
   под всей страницей (плюс копия внутри разворота в фильме).
   Читаются как контуры озера на топографической карте.

   Убираем оба. Слой остаётся в DOM (он aria-hidden, разметке не
   мешает) — если понадобится вернуть, достаточно убрать этот блок. */
.contours { display: none; }


/* ── 2. Failures: стеклянная лента вместо сетки ────────────────────

   Что было: шесть одинаковых карточек в сетке 3×2 на светлой бумаге.
   Ровно тот случай, который design-taste-frontend запрещает прямым
   текстом (§9.E, «NO 3-column equal feature cards»), и там же назван
   разрешённый выход: горизонтальная лента со snap для списков, где
   важна широта, а не сравнение (§4.5).

   ПОЧЕМУ ТЁМНАЯ ЗЕМЛЯ. Стекло — это то, что видно СКВОЗЬ него.
   На плоской бумаге #f9f5f0 прозрачная карточка неотличима от серого
   прямоугольника с рамкой, и никакого liquid glass не получится.
   Земля нужна. Она не выдумана: это токены .deep, которыми на сайте
   уже сделаны manifest, formats и финал, — тот же тёмно-синий #132230
   и тот же светло-голубой акцент #aac6e1. Синий, как и просил Максим:
   #55718c — это ровно та кнопка «message me» в светлой зоне.

   Про сам материал: apple-design §12 (яркая верхняя кромка, крупная
   поверхность читается толще, нельзя класть светлое стекло на светлое
   стекло) и design-taste-frontend §7 (1px внутренняя рамка + inset-блик
   для преломления кромки, обязательный непрозрачный запасной вариант).
   Настоящего Liquid Glass в вебе не существует — это приближение на
   backdrop-filter, так оно и подписано.
   ────────────────────────────────────────────────────────────────── */

#failures{
  /* Токены deep-зоны, слово в слово из билда: .deep{...} */
  --ink-1:#132230; --ink-0:#1c2c3b;
  --fg:#f5f0e8; --fg-2:#c3b8aa; --fg-3:#8d8983;
  --line:#f5f0e826; --line-2:#f5f0e847;
  --accent:#aac6e1;

  /* Стекло: один набор чисел на всю секцию, чтобы карточки, кнопки
     и колодец под картинкой были из одного материала. */
  --glass-top:#f5f0e81c;      /* верх плёнки, свет падает сверху */
  --glass-bot:#f5f0e80a;      /* низ, тени */
  --glass-edge:#f5f0e820;     /* 1px внутренняя рамка */
  --glass-lip:#f5f0e847;      /* блик на самой кромке */
  --well:#0a141d3d;           /* колодец под картинкой: вырез, не второе стекло */

  color:var(--fg);
  isolation:isolate;
  position:relative;
  padding-block:var(--s7) var(--s6);
  /* колонка нужна только затем, чтобы управление лентой встало ПОД
     ленту: скрипт дописывает его последним ребёнком секции, а порядок
     задаём здесь. Псевдоэлемент-фон абсолютный, флекс-элементом не
     становится. */
  display:flex; flex-direction:column;
}
#failures .hd         { order:1 }
#failures .fails__grid{ order:2 }
#failures .rail       { order:3 }

/* ── Что убрано ──────────────────────────────────────────────────────
   Надзаголовок «The price of not having one» и примечание про открытые
   источники. Оба — мелкий текст, который никто не читает, и оба
   попадают под EYEBROW RESTRAINT в design-taste-frontend. На
   apple.com/os/macos во всей странице ровно три размера (48 / 28 / 17)
   и ни одного надзаголовка; двенадцатый кегль там только в юридическом
   подвале. Узлы остаются в разметке — если понадобится вернуть,
   достаточно убрать эти две строки. */
#failures .hd>.tag   { display:none }
#failures .fails__note{ display:none }

/* Земля во всю ширину. body у сборки с overflow-x:hidden, поэтому
   100vw безопасен и полосу прокрутки не родит. */
#failures:before{
  content:"";
  position:absolute; inset:0 calc(50% - 50vw);
  z-index:0; pointer-events:none;
  background:
    radial-gradient(85% 55% at 14% 2%,    #2b4c6b7a 0%, #2b4c6b00 62%),
    radial-gradient(60% 45% at 52% 58%,   #55718c3d 0%, #55718c00 68%),
    radial-gradient(75% 60% at 94% 108%,  #55718c66 0%, #55718c00 64%),
    var(--ink-1);
}
#failures>*{ position:relative; z-index:1 }

/* Шапка: слева текст, справа — управление лентой.
   SPLIT-HEADER BAN снят собственной оговоркой скилла: в правой
   колонке живой элемент управления, а не абзац-наполнитель. */
#failures .hd>h2   { max-width:16ch }
#failures .hd>.lead{ color:#f5f0e8c7; max-width:54ch }

/* ── Лента ───────────────────────────────────────────────────────── */
#failures .fails__grid{
  display:flex;
  grid-template-columns:none;      /* гасим сетку из билда */
  grid-template-rows:none;
  gap:clamp(14px,1.5vw,22px);
  margin-top:var(--s5);
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* Вылет вправо за край контейнера: видно, что карточки не кончились */
  margin-inline:calc(var(--pad) * -1) calc(50% - 50vw);
  padding-inline:var(--pad);
  padding-block:6px 28px;
  scroll-padding-inline-start:var(--pad);
}
#failures .fails__grid::-webkit-scrollbar{ display:none }

/* ── Карточка ────────────────────────────────────────────────────── */
#failures .fail{
  flex:0 0 clamp(300px,30vw,420px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  padding:16px 16px 24px;
  border-radius:24px;
  background:linear-gradient(157deg,var(--glass-top) 0%,var(--glass-bot) 46%,var(--glass-top) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
  box-shadow:
    inset 0 1px 0 var(--glass-lip),
    inset 0 0 0 1px var(--glass-edge),
    0 26px 54px -30px #040b12e6;
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  #failures .fail:hover{
    transform:translateY(-4px);
    box-shadow:
      inset 0 1px 0 #f5f0e852,
      inset 0 0 0 1px #f5f0e82e,
      0 34px 64px -30px #040b12;
  }
}

/* Колодец под картинкой. Тёмный вырез, а не второе стекло поверх
   стекла (apple-design §12 запрещает светлое на светлом). */
#failures .fail__f{
  border-radius:14px;
  background:var(--well);
  box-shadow:inset 0 0 0 1px #f5f0e814;
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
}
#failures .fail__f img{ padding:10px }

/* Кружок «увеличить» в углу картинки. Это псевдоэлемент самой кнопки
   зума, а не декорация рядом с ней: подпись у кнопки уже есть. */
#failures .fail__zoom:after{
  content:"";
  position:absolute; right:10px; bottom:10px;
  width:32px; height:32px; border-radius:999px;
  background:#f5f0e814;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px #f5f0e82b, inset 0 1px 0 #f5f0e83d;
  opacity:0; transform:scale(.9);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#failures .fail__zoom:before{
  content:"";
  position:absolute; right:19px; bottom:19px;
  width:14px; height:14px; z-index:1;
  background:var(--fg);
  opacity:0; transform:scale(.9);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
  -webkit-mask:var(--i-zoom) center/contain no-repeat;
  mask:var(--i-zoom) center/contain no-repeat;
}
#failures .fail:hover .fail__zoom:after,
#failures .fail:hover .fail__zoom:before,
#failures .fail__zoom:focus-visible:after,
#failures .fail__zoom:focus-visible:before{ opacity:1; transform:none }
#failures .fail__zoom:active{ transform:scale(.985) }
#failures .fail__zoom:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }

/* ── Текст карточки ──────────────────────────────────────────────── */
#failures .fail__place{
  display:flex; align-items:center; gap:8px;
  margin-top:22px; padding-inline:6px;
  /* Было --fg-3 (#8d8983) капсом на 11px: 3,3:1 на стекле, ниже AA,
     Максим и увидел, что оно не читается. Стало 5,6:1 и нормальный
     кегль. На тёмном Apple тоже не серит текст, а ставит белый
     с прозрачностью. */
  color:#f5f0e8b8;
  font-size:.9375rem; font-weight:500; letter-spacing:-.005em;
}
#failures .fail__place:before{
  content:""; flex:0 0 auto; width:15px; height:15px;
  background:var(--accent);
  -webkit-mask:var(--i-pin) center/contain no-repeat;
  mask:var(--i-pin) center/contain no-repeat;
}
#failures .fail__t{
  margin-top:8px; padding-inline:6px;
  font-size:clamp(1.5rem,1.95vw,1.75rem);
  letter-spacing:-.026em; line-height:1.14;
  color:var(--fg);
}
#failures .fail__b{
  margin-top:14px; padding-inline:6px;
  color:#f5f0e8c4;
  font-size:1rem; line-height:1.6;
}
#failures .fail__m{
  display:flex; gap:11px;
  margin-top:auto; padding:20px 6px 0;
  border-top:1px solid var(--line);
  color:var(--fg); font-size:1.0625rem; line-height:1.5;
}
#failures .fail__m:before{
  content:""; flex:0 0 auto;
  width:17px; height:17px; margin-top:4px;
  background:var(--accent); opacity:.85;
  -webkit-mask:var(--i-warn) center/contain no-repeat;
  mask:var(--i-warn) center/contain no-repeat;
}

#failures .fails__note{
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  color:var(--fg-3);
}

/* ── Управление лентой (строится в enhance.js) ───────────────────── */
/* Полоса со стрелками под лентой, прижата вправо — ровно так это
   сделано на apple.com/br/os/macos: отдельный ряд под галереей,
   две круглые кнопки 36px у правого края, никаких счётчиков и
   полос прогресса. Счётчик «01 / 06» убран: листать умеют все, а
   нумерация — это ещё один мелкий текст, который нечего читать. */
#failures .rail{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:var(--s3);
}
#failures .rail__b{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(157deg,var(--glass-top),var(--glass-bot));
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-lip), inset 0 0 0 1px var(--glass-edge);
  transition:transform .14s var(--ease-out), box-shadow .2s var(--ease-out), opacity .2s ease;
}
#failures .rail__b i{
  width:18px; height:18px; background:var(--fg);
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
#failures .rail__b--prev i{ -webkit-mask-image:var(--i-left);  mask-image:var(--i-left) }
#failures .rail__b--next i{ -webkit-mask-image:var(--i-right); mask-image:var(--i-right) }
#failures .rail__b:hover{ box-shadow:inset 0 1px 0 #f5f0e852, inset 0 0 0 1px #f5f0e833 }
#failures .rail__b:active{ transform:scale(.94) }
#failures .rail__b:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
#failures .rail__b[disabled]{ opacity:.32; cursor:default }
#failures .rail__b[disabled]:active{ transform:none }

/* ── Иконки. Семейство lucide — то же, что уже стоит в сборке
      (design-taste-frontend §3.C: одно семейство на проект, своё
      рисовать нельзя). Глифы: map-pin, triangle-alert, maximize-2,
      arrow-left, arrow-right. ──────────────────────────────────── */
#failures{
  --i-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>");
  --i-warn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
  --i-zoom:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' x2='14' y1='3' y2='10'/><line x1='3' x2='10' y1='21' y2='14'/></svg>");
  --i-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>");
  --i-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
}

/* ── Узкие экраны ────────────────────────────────────────────────── */
@media (width <= 900px){
  #failures .hd{ grid-template-columns:minmax(0,1fr) }
  #failures .hd>h2{ max-width:none }
  #failures .rail__b{ width:38px; height:38px }
  #failures .fails__grid{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) }
  #failures .fail{ flex-basis:min(78vw,320px) }
}

/* ── Запасные варианты ───────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce){
  #failures .fail,
  #failures .rail__b,
  #failures .fail__zoom:after{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:#1e3145;
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #failures .fail, #failures .rail__b{ background:#1e3145 }
}
@media (prefers-reduced-motion: reduce){
  #failures .fail,
  #failures .rail__b,
  #failures .fail__zoom:after,
  #failures .fail__zoom:before{ transition:none }
  #failures .fail:hover{ transform:none }
}

/* .deep вешается скриптом (см. enhance.js) ради перекраски шапки.
   Класс тащит за собой overflow:hidden — он бы обрезал вылет ленты
   вправо и подсветку под карточками. Возвращаем. */
#failures.deep{ overflow:visible }


/* ── 3. Мелкий текст и лишние эффекты по всей странице ─────────────

   Разбор по замечаниям от 17.09.2026. Проверено по
   apple.com/br/os/macos: на 1440 там ровно три кегля — 48/52 крупный
   заголовок, 28/32 текст карточки, 17/20 основной, — и двенадцатый
   кегль только в юридическом подвале. Ни одного надзаголовка, ни
   одной нумерации разделов, ни одного мигающего слоя.
   ────────────────────────────────────────────────────────────────── */

/* ── 3.1 Надзаголовки ─────────────────────────────────────────────
   «Сколько стоит её отсутствие», «Как читали место», «Репозиция в
   одну строку» и прочие. Нужны были, чтобы заголовок не висел один,
   но читать их никто не начинает. design-taste-frontend: EYEBROW
   RESTRAINT, максимум один на три секции; у нас их было восемь.

   Класс .tag на этом сайте носят ещё и контакты с копирайтом в
   подвале и строка сроков в методе — это содержание, не надзаголовки,
   поэтому гасим точечно, а не по классу. */
.hd>.tag,
#work .tag,
#formats .after>.tag { display:none }

/* ── 3.2 Световой слой в тёмных зонах ─────────────────────────────
   .deep__lit — отдельный слой поверх тёмных секций: радиальное
   пятно, растянутое на 140% высоты, с бесконечной анимацией 38 с.
   Именно он даёт мутную светлую дымку по верхнему и нижнему краю
   блока с ценами. Плюс это ровно то, от чего предостерегает
   apple-design §14: медленные зацикленные колебания около 0,2 Гц.
   Слой остаётся в разметке. */
.deep__lit{ display:none }

/* ── 3.3 Нумерация находок 01 02 03 ───────────────────────────────
   Три строки в кейсе были пронумерованы, и те же цифры стояли на
   булавках акварельного плана. Нумерация разделов и списков —
   прямой запрет design-taste-frontend §9.F. Связь строки с булавкой
   никуда не делась: наведение по-прежнему подсвечивает нужную.
   Колонку под цифру убираем, иначе останется пустой отступ. */
.find{ grid-template-columns:minmax(0,1fr) }
.find__n{ display:none }
.geo__n { display:none }

/* Подстрочник находки был серым девятым кеглем со стрелкой-глифом
   вместо маркера. Стрелку убираем, кегль поднимаем до основного. */
.find__c:before{ content:none }
.find__c{ font-size:1rem; line-height:1.55; color:var(--fg-2) }
.find__t{ font-size:clamp(1.15rem,1.45vw,1.3rem) }

/* ── 3.4 Подписи на аэрофотоснимке ────────────────────────────────
   WATER / FOREST / MEADOW / LOTS были набраны капсом одиннадцатым
   кеглем с трекингом .14em, и к каждой подписи шла волосяная линия
   с точкой на конце. Капс с широким трекингом Максим забраковал ещё
   в августе, а волосяные линии-указатели design-taste-frontend
   называет декорацией, которая ничего не организует. Оставляем
   слова, снимаем украшения, поднимаем кегль. */
.fleg__k{ text-transform:none; letter-spacing:-.01em; font-size:1rem; font-weight:600 }
.fleg__k:before, .fleg__k:after{ display:none }
.fleg__v{ font-size:.9375rem; line-height:1.45; color:#f5f0e8d6; margin-top:3px }

/* ── 3.5 Светлые швы на границе тёмных зон ────────────────────────
   Два слоя одного приёма: цвет бумаги, залитый градиентом внутрь
   тёмного блока на 190 px сверху и снизу. Задумано как мягкий
   переход между светлой и тёмной зоной, читается как грязная серая
   дымка по краю — это и есть тот самый «shadow/light». Граница
   между зонами и без него понятна: она и есть граница. */
.formats:before{ display:none }   /* блок с ценами */
.oneframe:after { display:none }  /* верх кадра в кейсе */

/* ── 3.6 Кейс: заголовок и кадр ───────────────────────────────────

   ЗАГОЛОВОК. .hd--split ставит надзаголовок в левую колонку, а
   заголовок с лидом в правую. Надзаголовок убран (3.1), и левая
   колонка осталась пустой — половина ширины ни подо что. Собираем
   в одну колонку, как во всех остальных секциях. Заодно снимается
   SPLIT-HEADER BAN из design-taste-frontend. */
#work .hd--split{ grid-template-columns:minmax(0,1fr) }
#work .hd--split .tag,
#work .hd--split h2,
#work .hd--split .lead{ grid-column:1 }

/* КАДР. В рамку 16:9 подставлена hero-territory-1200.jpg — снимок
   ВЕРТИКАЛЬНЫЙ, 1200×1512. background-size:cover отрезает от него
   больше половины высоты, и вместо всей территории остаётся
   ломоть берега с парой крыш. Это и выглядело ужасно.

   В бандле лежит case01-aerial-1600.jpg — тот же посёлок, тот же
   час, но горизонтальный, 1600×893, ровно под рамку. Подставляем
   его. Адрес приходит инлайном из сборки, поэтому !important —
   единственный способ перебить, не трогая assets/. */
#work .oneframe__f{
  background-image:url(/images/case01-aerial-1600.jpg) !important;
}

/* Подпись под кадром: вторая строка была .8rem цветом #f8f3ee99,
   то есть 3:1 поверх фотографии. Поднимаем до читаемого. */
.oneframe__ttl b{ font-size:.9375rem; color:#f8f3eed6; letter-spacing:0; margin-top:6px }

/* ── 3.7 Цены: три заголовка на одной линии ───────────────────────
   .plan__k держит справа 132 px под плашку «Where most start», но
   плашка есть только у средней карточки. У левой из-за этого
   «Differentiation audit» ломается на две строки, и её цена уезжает
   вниз относительно двух соседних. Резерв оставляем только там, где
   плашка действительно есть. */
.formats .plan:not(.plan--pick) .plan__k{ padding-right:12px }

/* ── 3.8 Кейс: остатки мелкого текста и финальный абзац ────────────

   Подписи под акварелями и под планом шли тринадцатым кеглем серым.
   Поднимаем до читаемого — по тому же правилу, по которому убраны
   надзаголовки: либо текст нужен и его видно, либо он не нужен.

   Последний абзац кейса («A positioning the team can say out loud…»)
   после снятия надзаголовка остался висеть обычным текстом в левой
   половине. Это вывод всей секции, поэтому даём ему кегль между
   основным и заголовочным — так он читается как финал, а не как
   ещё один абзац. */
.survey__cap,
.verdict__draw figcaption{ font-size:.9375rem; color:var(--fg-2) }

#work .mt-s7>*:not(.tag){
  max-width:58ch;
  font-size:clamp(1.15rem,1.5vw,1.3125rem);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--fg);
}

/* Итоговая строка кейса («From escape the noise to recharge at full
   speed») стояла в левой колонке по центру относительно высокой
   правой — из-за этого висела в пустоте, оторванная и от линейки
   сверху, и от абзаца справа. Прижимаем к верху: строка, линейка и
   абзац читаются одним рядом. */
#work .verdict{ align-items:start }

/* ── 3.9 Первый экран ─────────────────────────────────────────────
   Слово «Situation» над заголовком фильма — такой же надзаголовок,
   как остальные восемь. Убираем ради одного правила на всю страницу:
   надзаголовков нет нигде. */
#film .hero__type>.tag{ display:none }


/* ══════════════════════════════════════════════════════════════════
   4. ЧИСТКА СБОРКИ, 18.09.2026

   Аудит по redesign-existing-projects, секция за секцией. Главный
   вывод: страница выглядела «без вкуса» не из-за палитры. Палитра
   спокойная и своя (бумага #f9f5f0, тёмно-синий #132230, один синий
   акцент), её не трогаем - Максим прямо просил ничего яркого.
   Страницу портили недоделки, которые уехали в прод вместе со
   сборкой: цветные плашки с именами файлов вместо картинок, битая
   картинка с alt-текстом поперёк экрана, пустой портрет, и секция,
   которая угоняет скролл на 4360 px ради одной ленты.
   ══════════════════════════════════════════════════════════════════ */


/* ── 4.1 Method: картинки вместо заглушек ─────────────────────────
   В колоде три шага, и у каждого вместо кадра стоит .step__stub:
   зелёная, синяя, бурая плашка с подписью «legend.png», «world.png».
   При этом нужные кадры лежат в бандле и просто не подключены:
   metod-legenda (акварель будущего дома), metod-mir (тот же дом,
   уже мир), metod-prodazhi (материалы на столе отдела продаж).
   Ровно три шага метода - нарратив, мир, продажи.

   Заглушка остаётся узлом React, мы кладём кадр ей в фон. Подпись
   с именем файла гасим. Инлайновый background у заглушки перебивается
   только через !important. */
.step:nth-child(1) .step__stub{ background:url(/images/metod-legenda-960.webp) center/cover no-repeat, #eee7dd !important }
.step:nth-child(2) .step__stub{ background:url(/images/metod-mir-960.webp)     center/cover no-repeat, #132230 !important }
.step:nth-child(3) .step__stub{ background:url(/images/metod-prodazhi-960.webp) center/cover no-repeat, #3a2a1e !important }
.step__stub{ border-radius:14px }
.step__stub-file{ display:none }
.step__plate{ aspect-ratio:16/9; max-height:42vh }

/* Номера шагов 01 02 03 и нумерация ходов внутри шага. Нумерация
   разделов - прямой запрет §9.F design-taste-frontend, и Максим её
   уже вычеркнул в кейсе. Порядок и так виден: карточки едут по одной. */
.step__n{ display:none }
.step__moves li{ padding-left:0; font-size:1.0625rem; line-height:1.5; color:var(--fg-2) }
.step__moves li:before{ content:none }
.step__moves{ gap:12px }

/* Надзаголовок «Method» - такой же, как восемь снятых в §3.1, только
   живёт в другой обёртке. Строка сроков - содержание, её не прячем,
   а поднимаем до основного кегля. */
.pin__side>.tag:first-child{ display:none }
.pin__side>.tag:last-child{ font-size:1.0625rem; font-weight:500; color:var(--fg-2); letter-spacing:-.01em }
.pin__side .note{ font-size:1.0625rem }


/* ── 4.2 Places ───────────────────────────────────────────────────
   Три вещи. Список типов мест шёл через серединные точки - «·» после
   каждого слова, 13 штук; design-taste-frontend §9.F держит её «на
   пайке», одна на строку максимум. Воздух между словами делает ту же
   работу без знака.
   Абзац .places__said - мелкий серый пересказ лида. */
.places__kind:not(:last-child):after{ content:none }
.places__kinds{ gap:6px clamp(22px,2.6vw,40px); max-width:none; color:var(--fg) }
.places__kind{ display:inline-block }
.places__said{ display:none }


/* ── 4.3 Range ────────────────────────────────────────────────────
   Три цветные коробки с подписями panama-tower.jpg, panama-facade.jpg,
   panama-waterfront.jpg и примечание «фото приедут позже, коробки
   держат место». Кадров в бандле нет. Показывать посетителю пустые
   места под будущие фото хуже, чем не показывать секцию: она не
   держит место, она сообщает, что сайт недоделан.
   Узел остаётся; когда кадры появятся, достаточно удалить эту строку. */
#range{ display:none }


/* ── 4.5 Formats: карточки из того же стекла, что в Failures ──────
   На тёмно-синей земле стояли три кремовые карточки-бумажки. Это
   третий материал на странице - бумага, тёмное стекло и теперь
   бумага на тёмном. design-taste-frontend: одна система поверхностей.
   Делаем их из того же тёмного стекла, что лента провалов выше, и
   цены сразу становятся главным в карточке: белые, крупные.

   Размытие фона не ставим: high-end-visual-design разрешает blur
   только на фиксированных элементах, а под карточками всё равно
   ровный тёмно-синий, размывать там нечего. */
.formats .plan{
  --fg:#f5f0e8; --fg-2:#f5f0e8c7; --fg-3:#f5f0e89e;
  --line:#f5f0e824; --line-2:#f5f0e840; --accent:#aac6e1;
  color:var(--fg);
  background:linear-gradient(157deg,#f5f0e817 0%,#f5f0e807 46%,#f5f0e812 100%);
  border:0; border-radius:24px;
  box-shadow:inset 0 1px 0 #f5f0e83d, inset 0 0 0 1px #f5f0e81f, 0 26px 54px -30px #040b12e6;
}
.formats .plan--pick{
  background:linear-gradient(157deg,#f5f0e826 0%,#f5f0e80d 46%,#f5f0e81c 100%);
  box-shadow:inset 0 1px 0 #f5f0e866, inset 0 0 0 1px #aac6e157, 0 34px 64px -28px #040b12;
}
.formats .plan--pick .plan__badge{ color:#f5f0e8d9; background:#f5f0e81a }
.formats .plan--pick .pill,
html[data-theme=light] .formats .plan--pick .pill{ background:#f5f0e8; color:#132230 }
.formats .plan .plan__p{ color:#f5f0e8; font-size:clamp(2.4rem,3.4vw,3rem) }
.formats .plan .plan__k{ font-size:1.1875rem }
.formats .plan .plan__t{ font-size:.9375rem; color:var(--fg-3) }
.formats .plan .plan__d{ font-size:1rem; color:var(--fg-2) }
.formats .plan .plan__h{ font-size:.9375rem; color:var(--fg) }
.formats .plan .plan__l li{ font-size:1rem; color:var(--fg-2) }
.formats .plan .plan__go{ color:var(--fg) }
.formats .plans__note{ font-size:.9375rem }


/* ── 4.6 Legend: подписи строк и «имя скрыто» ─────────────────────
   Подписи слева («Core idea», «The story») шли тринадцатым кеглем,
   а «имя скрыто» было обведено пунктирной пилюлей - это единственный
   пунктир на всём сайте, и он читается как поле формы. */
.doc-sheet__k{ font-size:1rem; font-weight:500; color:var(--fg-2); letter-spacing:-.01em }
.doc-sheet__held{ border:0 !important; padding:0 !important; background:none !important;
                  font-size:1.0625rem; color:var(--fg-2) }


/* Вторая сноска в Places (13px, «One practice, one method…») - мелкий
   текст, правило то же, что для надзаголовков. */
.places__note{ display:none }
/* Абзацы About шли шестнадцатым; основной кегль страницы семнадцатый. */
.about .main>p{ font-size:1.0625rem; line-height:1.6 }
/* Полоски прогресса Method прилипали к абзацу под ними: 16 px зазора. */
.pin__side .note{ margin-top:var(--s3) }


/* ══════════════════════════════════════════════════════════════════
   5. ПРАВКИ ПО ЗАМЕЧАНИЯМ 18.09.2026
   ══════════════════════════════════════════════════════════════════ */

/* ── 5.1 Кнопки: без переката текста и без магнита ────────────────
   У .pill два слоя подписи. На наведении первый уезжает вверх на
   110%, а копия выезжает снизу на его место - текст как будто
   переворачивается. Плюс кнопка ползёт за курсором (--mx/--my из JS).
   Максим: «анимация глупая», и одна и та же на «Message me» и
   «Take this one».

   emil-design-eng: кнопке нужен отклик на нажатие (scale .97), а не
   представление на наведении; наведение - то, что человек делает
   десятки раз, его «сократить или убрать». Оставляем тихую смену
   фона и нажатие. Копию подписи прячем, магнит гасим. */
.pill{ transform:none !important; transition:background-color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out) }
.pill .pill__l{ transform:none !important; transition:none }
.pill>.pill__l+.pill__l{ display:none }
.pill:active{ transform:scale(.97) !important }
@media (hover:hover) and (pointer:fine){
  .pill:hover{ filter:brightness(1.08) }
  .deep .pill:hover{ box-shadow:0 8px 24px -14px #f5f0e866 }
}


/* ── 5.2 Цены: кнопка в каждой карточке, и крупная ────────────────
   Было: у двух тарифов стрелка-ссылка «Start with the audit →»
   мелким текстом, у среднего пилюля высотой 24 px. Для решения на
   3 500-35 000 долларов это слишком мелкая цель. Делаем кнопку во
   всю ширину карточки, 52 px, у всех трёх, прижатую к низу - чтобы
   три кнопки стояли на одной линии. Средняя залита, крайние из того
   же стекла, что и карточка, только плотнее. Стрелка на наведении
   сдвигается на 3 px - это единственное движение. */
.formats .plan .plan__go{
  align-self:stretch; justify-self:stretch; width:100%;
  margin-top:auto; padding:0 22px;
  min-height:52px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:1rem; font-weight:550; letter-spacing:-.01em;
  text-decoration:none;
}
.formats .plan a.go.plan__go{
  color:#f5f0e8;
  background:#f5f0e814;
  box-shadow:inset 0 1px 0 #f5f0e833, inset 0 0 0 1px #f5f0e82e;
  transition:background-color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out);
}
.formats .plan a.go.plan__go svg{ transition:transform .2s var(--ease-out) }
.formats .plan a.go.plan__go:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){
  .formats .plan a.go.plan__go:hover{ background:#f5f0e824; box-shadow:inset 0 1px 0 #f5f0e847, inset 0 0 0 1px #f5f0e847 }
  .formats .plan a.go.plan__go:hover svg{ transform:translateX(3px) }
}
.formats .plan--pick .pill.plan__go{ font-size:1rem }
.formats .plan--pick .pill.plan__go .pill__l{ padding:0; font-size:1rem; font-weight:600 }
/* место под кнопку внизу: список не должен к ней прилипать */
.formats .plan .plan__l{ margin-bottom:var(--s4) }
.formats .plan{ display:flex; flex-direction:column }


/* ── 5.3 Плотность ────────────────────────────────────────────────
   Секции стояли на --s7 = 140 px сверху и снизу, плюс заголовочные
   отступы - между двумя соседними блоками выходило под 300 px пустой
   бумаги. На apple.com/os/macos между разделами порядка 100-120 px
   при таком же кегле. Сжимаем шкалу, а не каждую секцию руками:
   все отступы сборки пересчитаются вместе и останутся в пропорции. */
:root{ --s5:56px; --s6:80px; --s7:108px }


/* ── 5.4 Failures компактнее ──────────────────────────────────────
   Карточки были 420 px шириной и почти 760 px высотой: в экран
   влезало две с половиной, и лента читалась как стена. Ужимаем
   карточку до 340 px, текст до основного кегля, отступы внутри
   плотнее. В экран на 1440 теперь входят три целых и край четвёртой -
   сразу видно, что лента листается. */
#failures{ padding-block:var(--s6) var(--s5) }
#failures .fail{ flex-basis:clamp(280px,24vw,340px); padding:12px 12px 20px; border-radius:20px }
#failures .fail__f{ border-radius:12px }
#failures .fail__place{ margin-top:16px; font-size:.875rem }
#failures .fail__t{ margin-top:6px; font-size:clamp(1.25rem,1.5vw,1.4rem) }
#failures .fail__b{ margin-top:10px; font-size:1rem; line-height:1.55 }
#failures .fail__m{ padding-top:16px; margin-top:auto; font-size:1rem; gap:9px }
#failures .fail__m:before{ width:15px; height:15px; margin-top:3px }
#failures .fails__grid{ margin-top:var(--s4); padding-block:4px 20px }
#failures .rail{ margin-top:var(--s2) }
/* Сборка раскладывала карточку гридом и ставила детям align-self:end/start.
   В колонке-флексе align-self работает по горизонтали: цена уехала
   вправо, разделитель над «Includes» сжался до длины слова. Растягиваем
   всех детей по ширине; вниз кнопку прижимает margin-top:auto. */
.formats .plan>*{ align-self:stretch }


/* ══════════════════════════════════════════════════════════════════
   6. ПАЛИТРА (значения перекрашены в §9 «Орех»), 18.09.2026

   Разбор палитры делал отдельный агент, по design-taste-frontend §4.2
   и frontend-design. Что было не так:
   - бумага #f9f5f0 и песок #eee7dd - кремовые, это первый пункт в
     списке «так выглядит сгенерированный сайт» из frontend-design
     (тёплый крем около #F4F1EA) и сосед запрещённых #faf7f1/#efeae0;
   - чернила #0e161e и тёмные зоны #132230 холодные: тёплое и холодное
     вперемешку («Mixing warm and cool grays»);
   - тёмно-синего нет НИ НА ОДНОМ снимке: тени леса и досок на фото -
     графит #181a17…#2a2927, насыщенность 4-9 %. Синий #132230 с его
     43 % нарисован интерфейсом, поэтому тёмные блоки выглядели
     вставками с чужого сайта. Отсюда «странный цвет» у Failures;
   - восемь разных почти-чёрных и второй акцент: «sells» в первом
     экране подчёркнут глиной #be6a37.

   Решение: одна температура (205-210°). Один графит #221c17 - он же
   текст на бумаге и он же тёмная земля. Бумага нейтральная. Один
   акцент, сланцево-синий: #7a4e2d на бумаге (5.8:1), #d4b08c на
   тёмном (8.9:1). Цвет несут фотографии, интерфейс молчит.
   ══════════════════════════════════════════════════════════════════ */

html[data-theme=light]{
  --ink-1:#f5f0e8; --ink-0:#ebe3d7; --ink-d:#221c17;
  --fg:#221c17; --fg-2:#5c5249; --fg-3:#6b6055;
  --line:#221c1721; --line-2:#221c1742;
  --accent:#7a4e2d; --accent-d:#653f24; --surik:#7a4e2d;
}
html{ background:#221c17 }

.deep, #failures, .formats .plan{
  --ink-1:#221c17; --ink-0:#2d251f;
  --fg:#f5f0e8; --fg-2:#c9bdae; --fg-3:#a89a8a;
  --line:#f5f0e824; --line-2:#f5f0e847; --accent:#d4b08c;
}

/* Failures: ровная графитовая земля вместо трёх синих пятен */
#failures:before{ background:var(--ink-d) }
#failures{ --glass-top:#f5f0e810; --glass-bot:#f5f0e808; --glass-edge:#f5f0e81f; --glass-lip:#f5f0e833; --well:#120e0b3d }
#failures .hd>.lead, #failures .fail__b, #failures .fail__place{ color:var(--fg-2) }
@media (prefers-reduced-transparency: reduce){
  #failures .fail, #failures .rail__b, #failures .fail__zoom:after{ background:#2d251f }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #failures .fail, #failures .rail__b{ background:#2d251f }
}

/* Цены: та же земля, без вертикального градиента сборки */
.formats{ background:var(--ink-d) }
.formats .plan{ background:#f5f0e80d }
.formats .plan--pick{ background:#f5f0e817; box-shadow:inset 0 1px 0 #f5f0e833, inset 0 0 0 1px #d4b08c4d, 0 34px 64px -28px #0e0b09 }
.formats .plan--pick .pill,
html[data-theme=light] .formats .plan--pick .pill{ background:#f5f0e8; color:#221c17 }

/* Кнопки и шапка: две краски вместо пяти */
html[data-theme=light] .pill{ background:var(--fg); color:var(--ink-1) }
html[data-theme=light] .pill:hover{ background:var(--fg) }
html[data-theme=light] .nav[data-ground=deep] .pill{ background:#f5f0e8; color:#221c17 }
/* (было: крем #f5f0e8a8 на .nav.solid и градиент под шапкой - снято в
   §10.1: сборка держит шапку прозрачной, плавают только пилюли) */

/* «sells»: глина была вторым акцентом */
.ch .hi{ box-shadow:inset 0 -.14em #d4b08c }


/* ══════════════════════════════════════════════════════════════════
   7. НИКАКОЙ ТЕНИ ПРИ ПРОКРУТКЕ И НИКАКОГО ЗАТЕМНЕНИЯ ФОТО

   Этот «shadow» оказался тремя механизмами сразу (разбор - отдельный
   агент, по коду сборки):
   1. [data-depth] - 12 секций при уходе вверх гаснут до 38 % и уезжают
      на 26 px; --away считает motion-*.js на каждый кадр. Тёмный блок
      на бумаге на выходе становится грязно-серым;
   2. конец фильма: страница наплывает на видео, видео размывается;
   3. колода Method: шаги перетекают друг в друга с размытием, между
      ними виден двойной мутный кадр.
   ══════════════════════════════════════════════════════════════════ */

html [data-depth],
html[data-motion] [data-depth]{ opacity:1; transform:none; will-change:auto }

/* Выход из фильма - по порогу data-on, который ставит сам скрипт */
.film__page[data-on="0"]{ opacity:0 !important }
.film__page[data-on="1"]{ opacity:1 !important }
.film__page{ transition:opacity .28s var(--ease-out) }
.film__v{ filter:none !important }

/* Method: без размытия и сдвига. Какой шаг виден - решает enhance.js
   атрибутом data-active (шаг с наибольшей прозрачностью, которую пишет
   скрипт сборки). Смена - короткая перекрёстная, без двойного кадра. */
@media (width > 880px) and (prefers-reduced-motion: no-preference){
  html .step{ filter:none !important; transform:none !important; opacity:0 !important;
              transition:opacity .24s var(--ease-out) }
  html .step[data-active]{ opacity:1 !important }
  html[data-still] .step{ opacity:1 !important }
}
/* Попутно найденная ошибка сборки: при reduced-motion скрипт шаги не
   ведёт, а .step стоит на opacity:0 - колода на десктопе пустая. */
@media (width > 880px) and (prefers-reduced-motion: reduce){
  .pin{ height:auto }
  .pin__stage{ height:auto; position:static }
  .pin__deck{ gap:var(--s5) }
  .step{ grid-area:auto; opacity:1; filter:none; transform:none }
}

/* Цитата манифеста сразу белая, без «зажигания» слов по прокрутке */
[data-glow], .manifest blockquote [data-glow]{ color:var(--fg) }
.manifest blockquote{ text-shadow:none }

/* Зерно на тёмных зонах */
.plane:after{ display:none }


/* ══════════════════════════════════════════════════════════════════
   8. КАРТИНКИ: ЧТО ОСТАВЛЕНО, ЧТО ПРИГЛУШЕНО, ГДЕ ПЛАШКИ

   Аудит всех кадров делал отдельный агент: смотрел каждый файл и
   мерил насыщенность и подложку по пикселям. Правила Максима -
   одна территория, холодная приглушённая зелень, туман, тёплый свет
   только из окон; фото и акварель не делят секцию; ничего яркого;
   никаких тёмных градиентов под текстом на фото.

   ПЛАШКА - та же земля на ступень ниже, без текста и без нового цвета:
   на бумаге #f5f0e8 - #ebe3d7, на второй бумаге - #e2d9cb, в тёмных
   зонах - сам графит. Волосяная внутренняя линия, чтобы край был
   вырезанным, а не залитым.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --plate:#ebe3d7; --plate-2:#e2d9cb; --plate-line:#221c170f;
}

/* ── 8.1 Кейс #work: фото → плашка, легенда под кадр ───────────────
   Аэрофото: насыщенность 0.42, кислотная летняя трава, и оно стояло в
   одной секции с двумя акварелями. Под подписями Water/Forest/... был
   тёмный градиент на 86 % - тот самый «ужас». Кадр становится
   плашкой, подписи - строкой в четыре колонки под ней. */
#work .oneframe__f{ display:none }
#work .oneframe__ui{ display:none }
#work .oneframe{ background:var(--plate); box-shadow:inset 0 0 0 1px var(--plate-line); border-radius:14px; overflow:visible }
#work .fleg{
  position:static; inset:auto; width:auto; margin:0; transform:none;
  padding:var(--s3) 0 0; background:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3);
}
#work .fleg__k{ color:var(--fg) }
#work .fleg__v{ color:var(--fg-2) }
@media (width <= 760px){ #work .fleg{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ── 8.2 Акварели: бумага рисунка растворяется в странице ──────────
   Сборка красит бумагу всех .wc SVG-фильтром #wcPaper в зеленовато-
   серый, на странице выходит #f4f3ec - вокруг рисунков виден грязный
   прямоугольник. Дотягиваем белое до 255 и смешиваем multiply: белое
   исчезает, остаётся только рисунок. */
.survey__i.wc, .verdict__draw img.wc, .qa__sketch.wc{ filter:brightness(1.03) }
.survey{ mix-blend-mode:multiply }
.verdict__draw img.wc, .qa__sketch.wc{ mix-blend-mode:multiply }

/* ── 8.3 Method: шаги 1 и 3 → плашки, шаг 2 остаётся ───────────────
   Шаг 1 - акварель в секции с фото и белая карточка на бумаге.
   Шаг 3 - стоковый мокап с неоновым планшетом и фейковым логотипом.
   Шаг 2 (metod-mir) - эталон всей арт-дирекции, его не трогаем. */
.pin__deck .step:nth-child(1) .step__stub,
.pin__deck .step:nth-child(3) .step__stub{
  background:var(--plate) !important;
  box-shadow:inset 0 0 0 1px var(--plate-line);
}

/* ── 8.4 Places: панорама → плашка ─────────────────────────────────
   Коллаж с вулканом, лыжами, радугой над водопадом, небоскрёбами и
   бирюзовым пляжем: ярче всего на сайте и против всех трёх правил. */
.places__shot picture{ display:none }
.places__shot{ aspect-ratio:1915/821; background:var(--plate) }

/* ── 8.5 Bank: одна семья по цвету ─────────────────────────────────
   Кадр 4 - насыщенность 0.67, электрически-синее небо и вода:
   максимум на сайте → плашка. Остальные чуть приглушены; туман
   (кадр 1) - лучший кадр сайта, не трогаем. */
.bank__track .bank__f:nth-child(2) img{ filter:saturate(.68) brightness(.96) contrast(.97) }
.bank__track .bank__f:nth-child(3) img{ filter:saturate(.82) }
.bank__track .bank__f:nth-child(5) img{ filter:saturate(.72) brightness(.95) }

/* ── 8.6 Compare: пригасить закат у «после» ───────────────────────── */
.ba > img{ filter:saturate(.8) brightness(.97) }

/* ── 8.7 Первый разворот после фильма ──────────────────────────────
   Кислотная осень, ярко-синее небо, человек машет с крыши -
   насыщенность 0.52, дальше всех от эталона. */

/* ── 8.8 Манифест и финал: графит вместо фото ──────────────────────
   Силуэт на золотом закате и лучи сквозь лес с семьёй на мостках:
   оба клише, и оба читались только из-за градиента до 85 % поверх.
   Без фото текст стоит на ровной тёмной земле - ни тени, ни плашки
   под текстом не нужно. [style] поднимает специфичность над
   инлайновым фоном сборки. */
/* (§21) фото в манифесте и финале вернулись: правило, которое их прятало, снято */

/* 8.2 (дополнение). multiply смешивает рисунок с тем, что под ним
   В ЕГО СЛОЕ. Обёртки .reading__grid и .verdict до появления на экране
   анимируются opacity/transform и становятся отдельным слоем с
   прозрачным фоном - рисунок смешивался с пустотой, и белая бумага
   оставалась белой. Красим сами обёртки в бумагу страницы: теперь
   смешиваться есть с чем, в каком бы состоянии анимация ни была. */
#work .reading__grid, #work .verdict, #answers .qa__side{ background-color:var(--ink-1) }

/* Подписи под плашкой кейса и подстрочники находок шли тринадцатым
   кеглем. Правило одно на весь сайт: мелкого текста нет. */
#work .fleg__k{ font-size:1.0625rem }
#work .fleg__v{ font-size:1rem; line-height:1.5 }
#work .find__c{ font-size:1rem }
#work .verdict__note{ font-size:1.0625rem; line-height:1.55 }


/* ══════════════════════════════════════════════════════════════════
   9. ПАЛИТРА «ОРЕХ», ABOUT И FAQ В ДУХЕ APPLE, ЛЕНТА БЕЗ УГОНА СКРОЛЛА
   18.09.2026, по замечаниям Максима

   ПАЛИТРА. Максим попросил коричневый и тёплый крем, «но чтобы
   выглядело профессионально». taste-skill этот набор по умолчанию
   банит, но там же сказано: прямое слово брифа важнее. Значит,
   профессиональность делаем не цветом, а дисциплиной:
     - ОДИН акцент - орех #7a4e2d. Тёмный, не оранжевый (#c2763a
       Максим уже отверг). 6.3:1 на креме, кремовый текст на нём 6.3:1;
     - один тёплый почти-чёрный #221c17 и для текста, и для тёмных
       зон; на тёмном акцент - светлый загар #d4b08c (8.3:1);
     - бумага #f5f0e8, вторая бумага #ebe3d7; вторичный текст
       #5c5249 (6.7:1), третичный #6b6055;
     - никаких градиентов, свечений и второй краски.
   Значения §6 перекрашены в эти прямо на месте - структура одна.

   ЦВЕТ БРЕНДА ВИДНО. У референса фиолетовый - это кнопки, подсветка и
   фон. У нас орех - это главные кнопки, открытый вопрос, ссылки,
   ключевая фраза в About и коричнево-чёрная земля тёмных зон.
   ══════════════════════════════════════════════════════════════════ */

/* ── 9.1 Главные кнопки на светлом - ореховые ──────────────────────── */
html[data-theme=light] .pill{ background:var(--accent); color:#f5f0e8 }
html[data-theme=light] .pill:hover{ background:var(--accent-d) }
html[data-theme=light] .nav[data-over=film] .pill,
.nav[data-over=film] .pill{ background:#f5f0e8; color:#221c17 }
.ch .hi{ box-shadow:inset 0 -.14em #d4b08c }


/* ── 9.2 About ─────────────────────────────────────────────────────
   Было: узкий портрет, вертикальная волосяная линия, мелкие серые
   абзацы и цитата между двумя горизонтальными линейками. Три типа
   линий на один блок.
   Стало, как на страницах Apple о людях и продуктах: крупный
   портрет со скруглением, имя - крупный заголовок, текст основным
   кеглем 19 px, и одна фраза-вывод крупно, без рамок, с ключевыми
   словами в цвете бренда. */
#about{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 clamp(40px,6vw,104px); align-items:start;
        padding-block:var(--s7) }
#about .hair{ display:none }
#about .plate{ border-radius:24px; aspect-ratio:4/5; margin-top:0 !important }
#about .main h2{ font-size:clamp(2.6rem,4.8vw,4rem); letter-spacing:-.04em; line-height:1 }
#about .main>h2+p{ margin-top:var(--s4) }
#about .main>p{ font-size:clamp(1.0625rem,1.3vw,1.1875rem); line-height:1.6; color:var(--fg-2); max-width:36em }
#about .pull{ border:0; padding:0; margin:var(--s5) 0 0 }
#about .pull p{ font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.032em;
                font-weight:600; max-width:20ch; color:var(--fg) }
#about .pull b{ color:var(--accent); box-shadow:none }
@media (width <= 860px){ #about{ grid-template-columns:1fr; gap:var(--s4) } }


/* ── 9.3 FAQ ───────────────────────────────────────────────────────
   Было: список между волосяными линиями, вопросы 20 px, ответы серым
   пятнадцатым кеглем, плюс из двух волосков.
   Стало: каждый вопрос - отдельная карточка второй бумаги со
   скруглением 20 px. Открытая карточка светлеет и получает тёплую
   мягкую тень - видно, какая открыта, без единой линии. Плюс - в
   круге 32 px; у открытой круг ореховый. Ответ - основным кеглем,
   не серым. Порядок и поведение аккордеона - сборки, мы только
   одеваем его. */
#answers .acc{ border-top:0; display:grid; gap:12px }
#answers .acc__i{
  border:0; border-radius:20px; background:var(--ink-0);
  padding:0 clamp(20px,2.2vw,30px);
  transition:background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  #answers .acc__i[data-open="0"]:hover{ background:#e4dacb }
}
#answers .acc__i[data-open="1"]{ background:#fcf9f4; box-shadow:0 1px 0 #221c170a, 0 18px 40px -24px #3a261466 }
#answers .acc__q{ font-size:clamp(1.125rem,1.5vw,1.3125rem); font-weight:600; letter-spacing:-.02em;
                  padding:clamp(20px,2.2vw,26px) 0 }
#answers .acc__i[data-open="1"] .acc__q{ color:var(--fg) }
#answers .acc__s{ width:32px; height:32px; border-radius:999px; background:#221c1712;
                  transition:background-color .25s var(--ease-out) }
#answers .acc__s:before, #answers .acc__s:after{ inset:50% 10px auto; height:1.5px; background:var(--fg) }
#answers .acc__i[data-open="1"] .acc__s{ background:var(--accent) }
#answers .acc__i[data-open="1"] .acc__s:before,
#answers .acc__i[data-open="1"] .acc__s:after{ background:#f5f0e8 }
#answers .acc__q:active .acc__s{ transform:scale(.94) }
#answers .acc__a p{ font-size:1.0625rem; line-height:1.6; color:var(--fg-2); max-width:60ch;
                    padding-bottom:clamp(22px,2.4vw,28px) }
#answers .qa__side h2{ font-size:clamp(2.2rem,4vw,3.25rem); letter-spacing:-.035em; line-height:1.02 }


/* ── 9.4 Лента кадров без угона скролла ────────────────────────────
   «And then it exists at every hour of the year»: секция держала
   экран 4360 px, и вертикальная прокрутка двигала ленту вбок - в обе
   стороны. Максима бесило, что её приходится крутить и вниз, и вверх.
   Лента остаётся лентой (сетку он уже отверг), но становится обычной
   горизонтальной: листается пальцем, трекпадом и стрелками под ней,
   а страница просто проезжает мимо. JS сборки продолжает писать
   transform в ленту - !important его гасит. */
.bank__scroll{ height:auto !important }
.bank__stage{ position:static; height:auto; overflow:visible; display:block;
              padding:var(--s7) 0 var(--s6) }
.bank__bar{ display:none }
.bank__hd h2{ font-size:clamp(1.9rem,3.4vw,3rem) }
.bank__hd .lead{ color:var(--fg-2) }
.bank__track{
  transform:none !important; width:auto;
  margin-top:var(--s4);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  scroll-padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}
.bank__track::-webkit-scrollbar{ display:none }
.bank__f{ scroll-snap-align:start; border-radius:18px; height:min(62vh,600px) }
.bank .rail{ display:flex; justify-content:flex-end; gap:10px;
             max-width:var(--max); margin:var(--s3) auto 0; padding-inline:var(--pad) }
.bank .rail__b{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:0; border-radius:999px; cursor:pointer;
  background:#221c1712; color:var(--fg);
  transition:background-color .2s ease, transform .14s var(--ease-out), opacity .2s ease;
}
.bank .rail__b i{ width:18px; height:18px; background:currentColor;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat }
.bank .rail__b--prev i{ -webkit-mask-image:var(--i-left);  mask-image:var(--i-left) }
.bank .rail__b--next i{ -webkit-mask-image:var(--i-right); mask-image:var(--i-right) }
@media (hover:hover) and (pointer:fine){ .bank .rail__b:hover{ background:#221c171f } }
.bank .rail__b:active{ transform:scale(.94) }
.bank .rail__b:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.bank .rail__b[disabled]{ opacity:.35; cursor:default }
.bank{
  --i-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>");
  --i-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
}

/* ── 9.5 Цвет бренда в ценах ───────────────────────────────────────
   У референса цвет бренда виден прежде всего на главном действии.
   У нас главное действие страницы - выбрать тариф, поэтому кнопка
   рекомендованного становится светлым орехом (#d4b08c, тёмный текст
   8.3:1), и тем же тоном её плашка «Where most start». Одна точка
   цвета на тёмном блоке, остальное нейтрально. */
.formats .plan--pick .pill.plan__go,
html[data-theme=light] .formats .plan--pick .pill.plan__go{ background:#d4b08c; color:#221c17 }
@media (hover:hover) and (pointer:fine){
  .formats .plan--pick .pill.plan__go:hover{ background:#dcbb99; filter:none }
}
.formats .plan--pick .plan__badge{ background:#d4b08c29; color:#e6cdb2 }

/* ── 9.6 Мелочи About и FAQ ────────────────────────────────────────
   Портрет: параллакс сборки сдвигает и масштабирует фото внутри
   рамки, и на скруглении сверху открывалась щель. Со скруглением
   24 px параллакс не нужен - фото стоит ровно.
   Мостки: бумагу рисунка дотягиваем до белого сильнее, иначе после
   multiply на креме оставался бледный прямоугольник. */
#about .plate img{ transform:none !important; object-fit:cover; width:100%; height:100% }
#answers .qa__sketch.wc{ filter:brightness(1.07) contrast(1.02) !important; transform:none !important }


/* ══════════════════════════════════════════════════════════════════
   10. ШАПКА, 18.09.2026
   ══════════════════════════════════════════════════════════════════ */

/* ── 10.1 Баг: светлая полоса на прокрутке ─────────────────────────
   Моя же правка палитры (§6) перекрасила фон «прилипшей» шапки
   .nav.solid в полупрозрачный крем. А сборка специально делает её
   прозрачной: шапка - это отдельные плавающие пилюли. Правило стояло
   позже и победило, поверх фильма легла кремовая пелена во всю
   ширину, и тёмные пилюли с полупрозрачным светлым текстом стали
   серыми на сером. Возвращаем прозрачность. */
.nav.solid,
html[data-theme=light] .nav.solid,
html[data-theme=dark] .nav.solid{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0 }
.nav:after, .nav.solid:after{ display:none }

/* ── 10.2 Пилюли над фильмом и тёмными зонами ─────────────────────
   Сборка красила их холодным сине-чёрным #090d12 на 42 %, пункты меню -
   светлым на 70 %. Над ярким небом это читалось на грани. Делаем
   тёплым почти-чёрным палитры, плотнее, со стеклом, а текст ярче. */
.nav[data-over=film] .mark, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-over=film] .menu,
.nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{
  color:#f5f0e8; background:#221c179e;
  -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:inset 0 0 0 1px #f5f0e81f, inset 0 1px 0 #f5f0e81a;
}
.nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ color:#f5f0e8d9 }
.nav[data-over=film] .lang, .nav[data-over=film] .burger,
.nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{ color:#f5f0e8e6 }
.nav[data-over=film] .menu a:hover, .nav[data-ground=deep] .menu a:hover{ color:#f5f0e8; background:#f5f0e81f }
.nav[data-over=film] .menu a[data-current], .nav[data-ground=deep] .menu a[data-current]{ color:#221c17; background:#f5f0e8 }

/* На светлой земле пилюли - сплошной крем, текущий раздел - орех. */
.nav .mark, .nav .menu, .nav .lang, .nav .burger{ box-shadow:inset 0 0 0 1px var(--line), 0 6px 20px -12px #3a26144d }
.menu a{ font-size:.875rem }
.menu a[data-current]{ color:#f5f0e8; background:var(--accent) }

/* ── 10.3 «Message me» ────────────────────────────────────────────
   Первая попытка (стрелка в круге, 44 px) Максим забраковал: огромно и
   «ужаснее». И белая кнопка на закате спорит с небом.
   Теперь: прежний компактный размер, без стрелки, всегда орех - и на
   закате, и на тёмном, и на светлом. «Вкусность» не в размере, а в
   кромке, как у физической кнопки: светлый блик по верхнему краю,
   тёмная волосяная обводка, мягкая тёплая тень снизу. На наведении
   орех чуть светлеет, на нажатии кнопка утапливается. */
.nav .pill,
.nav[data-over=film] .pill, .nav[data-ground=deep] .pill,
html[data-theme=light] .nav .pill,
html[data-theme=light] .nav[data-over=film] .pill,
html[data-theme=light] .nav[data-ground=deep] .pill,
.nav[data-over=film][data-ground=deep] .pill{
  background:linear-gradient(180deg,#86583a 0%,#7a4e2d 100%);
  color:#f7f1e8;
  font-size:.8125rem; font-weight:550; letter-spacing:-.005em;
  box-shadow:
    inset 0 1px 0 #ffffff2e,          /* блик по верхней кромке */
    inset 0 0 0 1px #2a170b33,        /* волосяная обводка */
    0 1px 2px #2a170b33,              /* контакт с поверхностью */
    0 6px 16px -8px #2a170b80;        /* мягкая тёплая тень */
}
.nav .pill .pill__l{ padding:10px 16px }
@media (hover:hover) and (pointer:fine){
  .nav .pill:hover{ background:linear-gradient(180deg,#90623f 0%,#825433 100%); filter:none }
}


/* ══════════════════════════════════════════════════════════════════
   11. БЕЗ СРЕДНЕГО КОРИЧНЕВОГО, 18.09.2026

   Орех #7a4e2d (насыщенность 46 %, светлота 33 %) Максим прочитал
   как «цвет неожиданности». Он прав: дорогой коричневый бывает либо
   почти чёрным (эспрессо, как у Aesop), либо светлым песком. Середина
   - никогда.
   Поэтому акцент на светлом - тёплый почти-чёрный, а цвет бренда
   держат две вещи: эспрессо главных действий и песок #d4b08c как
   свет на тёмном и тонкое подчёркивание ключевых слов.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme=light]{ --accent:#2e2520; --accent-d:#1a1511; --surik:#2e2520 }

/* «Message me» и все главные кнопки на светлом: эспрессо с той же
   кромкой - блик сверху, волосяная обводка, тёплая тень. */
.nav .pill,
.nav[data-over=film] .pill, .nav[data-ground=deep] .pill,
html[data-theme=light] .nav .pill,
html[data-theme=light] .nav[data-over=film] .pill,
html[data-theme=light] .nav[data-ground=deep] .pill,
.nav[data-over=film][data-ground=deep] .pill,
html[data-theme=light] .pill{
  background:linear-gradient(180deg,#342a23 0%,#221c17 100%);
  color:#f7f1e8;
  box-shadow:
    inset 0 1px 0 #ffffff24,
    inset 0 0 0 1px #00000040,
    0 1px 2px #1a120b40,
    0 6px 16px -8px #1a120b99;
}
@media (hover:hover) and (pointer:fine){
  .nav .pill:hover, html[data-theme=light] .pill:hover{ background:linear-gradient(180deg,#3d322a 0%,#2a221c 100%); filter:none }
}

/* Ключевые слова: не цвет текста, а песочная черта под ним. */
#about .pull b{ color:var(--fg); box-shadow:inset 0 -.14em #d4b08c }

/* FAQ: открытый кружок - эспрессо, не орех. */
#answers .acc__i[data-open="1"] .acc__s{ background:#221c17 }

/* Текущий пункт меню на светлом - эспрессо. */
.menu a[data-current]{ color:#f5f0e8; background:#221c17 }

/* ── 11.1 FAQ: без белого ──────────────────────────────────────────
   Открытая карточка была почти белой #fcf9f4 с тенью - на тёплом
   креме это читалось как чужой холодный лист. Теперь все карточки
   одного тёплого тона, открытая - на полтона светлее, без тени. */
#answers .acc__i[data-open="1"]{ background:#f1ebe2; box-shadow:inset 0 0 0 1px #221c1714 }


/* ══════════════════════════════════════════════════════════════════
   12. ГЛАВНАЯ КНОПКА «СВЕТ ЛАМПЫ» И БАГ ТЕКУЩЕГО ПУНКТА, 18.09.2026

   Три субагента собрали три направления («Кофейня», «Дом вечером»,
   «Утро выходного»). Ближе всего Максиму оказался «Дом вечером».
   Из него берём главную кнопку: тёплый свет лампы сквозь льняной
   абажур - градиент #f7e8d8 → #f0cfb4 → #dcb79e, тёмный текст
   #2a1d17 (8.8-13:1), блик по верхней кромке, нижняя губа, волосяное
   кольцо и тёплый ореол. На закате она читается как горящее окно.

   Одна главная кнопка на весь сайт: «Message me» в шапке, «Take this
   one» в ценах и «Message on WhatsApp» в финале. Раньше это были три
   разных цвета (эспрессо, песок, крем) - отсюда «то тёмная, то
   светлая». Размер у «Message me» - 44 px, у кнопок в карточках
   прежние 52 px во всю ширину.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --lamp-top:#f7e8d8; --lamp:#f0cfb4; --lamp-bot:#dcb79e; --on-lamp:#2a1d17;
}
.nav .pill,
.nav[data-over=film] .pill, .nav[data-ground=deep] .pill,
html[data-theme=light] .nav .pill,
html[data-theme=light] .nav[data-over=film] .pill,
html[data-theme=light] .nav[data-ground=deep] .pill,
.nav[data-over=film][data-ground=deep] .pill,
.formats .plan--pick .pill.plan__go,
html[data-theme=light] .formats .plan--pick .pill.plan__go,
#talk .pill,
html[data-theme=light] #talk .pill,
.deep #talk .pill{
  position:relative; isolation:isolate;
  color:var(--on-lamp);
  background:linear-gradient(180deg,var(--lamp-top) 0%,var(--lamp) 48%,var(--lamp-bot) 100%);
  box-shadow:
    inset 0 1px 0 #fffaf4e6,        /* блик по верхней кромке */
    inset 0 -1px 0 #784e3438,       /* нижняя губа */
    0 0 0 1px #ffecda8c,            /* волосяное кольцо */
    0 1px 2px #140c0859,            /* контакт */
    0 10px 26px -10px #f0c4a08a;    /* тёплый ореол */
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
/* на светлой земле кольцо и ореол темнее, иначе кнопка тает в креме */
html[data-theme=light] .nav:not([data-over=film]):not([data-ground=deep]) .pill{
  box-shadow:
    inset 0 1px 0 #fffaf4e6, inset 0 -1px 0 #784e3438,
    0 0 0 1px #9c6f4f59, 0 1px 2px #140c0840, 0 10px 24px -10px #7a4e2d73;
}
.nav .pill{ font-size:.9375rem !important; font-weight:600; min-height:44px }
.nav .pill .pill__l{ padding:0 22px !important; min-height:44px; display:flex; align-items:center }
#talk .pill{ min-height:52px; font-size:1rem; font-weight:600 }
#talk .pill .pill__l{ padding:0 28px }

/* Наведение - «лампа разгорается»: сверху проступает мягкий свет,
   ореол чуть глубже. Без сдвига и без переката текста. 200 ms. */
.nav .pill:before, .formats .plan--pick .pill.plan__go:before, #talk .pill:before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0;
  background:radial-gradient(120% 140% at 50% 0%,#fff8eef2,#fff8ee00 62%);
  transition:opacity .2s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav .pill:hover:before, .formats .plan--pick .pill.plan__go:hover:before, #talk .pill:hover:before{ opacity:1 }
  .nav .pill:hover, .formats .plan--pick .pill.plan__go:hover, #talk .pill:hover{
    filter:none;
    background:linear-gradient(180deg,var(--lamp-top) 0%,var(--lamp) 48%,var(--lamp-bot) 100%);
    box-shadow:
      inset 0 1px 0 #fffcf8, inset 0 -1px 0 #784e3433,
      0 0 0 1px #fff0e2cc, 0 1px 2px #140c084d,
      0 16px 36px -8px #f0c4a085, 0 0 0 6px #f0cfb41a;
  }
}
.nav .pill:active, .formats .plan--pick .pill.plan__go:active, #talk .pill:active{ transform:scale(.97) !important }

/* ── Баг: текущий пункт меню - тёмная заливка и тёмный текст ───────
   Правило сборки html[data-theme=light] .nav.solid .menu a[data-current]
   {color:var(--fg)} сильнее моего по селектору, поэтому на тёмной
   заливке оставался тёмный текст. Держим цвет жёстко. */
html .nav .menu a[data-current],
html[data-theme=light] .nav .menu a[data-current],
html[data-theme=light] .nav.solid .menu a[data-current]{ color:#f5f0e8 !important; background:#221c17 }
.nav[data-over=film] .menu a[data-current],
.nav[data-ground=deep] .menu a[data-current]{ color:#221c17 !important; background:#f5f0e8 }

/* ── 12.1 Пилюли шапки над ярким небом ─────────────────────────────
   На 62 % непрозрачности розовое небо заката просвечивало сквозь
   тёмную пилюлю, и она становилась серо-сиреневой, а светлый текст
   на ней - «серым на сером». Плотнее (80 %), без усиления
   насыщенности фона, текст почти белый. */
.nav[data-over=film] .mark, .nav[data-over=film] .lang, .nav[data-over=film] .burger, .nav[data-over=film] .menu,
.nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{
  background:#221c17cc;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ color:#f5f0e8eb }


/* ══════════════════════════════════════════════════════════════════
   13. ШАПКА ОДНА НА ВСЕ СОСТОЯНИЯ И КНОПКА ТЕМНЕЕ, 18.09.2026

   Максим: текст в меню не должен сереть при прокрутке - «иначе
   текста не будет видно». Сборка перекрашивает пилюли в три разные
   схемы в зависимости от того, над чем шапка (фильм, светлая земля,
   тёмная земля), и на переходах текст проходит через серый. Решение:
   одна схема на все состояния - плотная тёплая тёмная пилюля с
   кремовым текстом. Она читается и на закате, и на креме, и на
   тёмном. Меняется только пункт под мышкой (светлеет) и текущий
   (кремовая заливка). Обводка толще - 1.5 px.
   ══════════════════════════════════════════════════════════════════ */
html .nav .mark, html .nav .menu, html .nav .lang, html .nav .burger,
html[data-theme=light] .nav .mark, html[data-theme=light] .nav .menu,
html[data-theme=light] .nav .lang, html[data-theme=light] .nav .burger,
.nav[data-over=film] .mark, .nav[data-over=film] .menu, .nav[data-over=film] .lang, .nav[data-over=film] .burger,
.nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{
  color:#f5f0e8 !important;
  background:#221c17e6 !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1.5px #f5f0e833, inset 0 1px 0 #f5f0e81f, 0 8px 22px -12px #140c0899 !important;
  transition:none;
}
html .nav .menu a,
html[data-theme=light] .nav .menu a,
html[data-theme=light] .nav.solid .menu a,
.nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{
  color:#f5f0e8 !important; background:transparent;
  transition:background-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  html .nav .menu a:hover,
  html[data-theme=light] .nav .menu a:hover,
  .nav[data-over=film] .menu a:hover, .nav[data-ground=deep] .menu a:hover{ color:#fff !important; background:#f5f0e81f }
  html .nav .lang:hover, html .nav .mark:hover{ background:#2e2620e6 !important }
}
html .nav .menu a[data-current],
html[data-theme=light] .nav .menu a[data-current],
html[data-theme=light] .nav.solid .menu a[data-current],
.nav[data-over=film] .menu a[data-current],
.nav[data-ground=deep] .menu a[data-current]{ color:#221c17 !important; background:#f5f0e8 !important }

/* ── Главная кнопка: мокко вместо света лампы ─────────────────────
   «Свет лампы» оказался слишком светлым. Темнее, но не средний
   рыжий орех (тот был «цветом неожиданности»): мокко, приглушённый
   кофе с молоком, насыщенность около 30 % против 46 % у ореха, и
   глянец сверху. Кремовый текст. Кромка та же: блик, губа, кольцо,
   тёплый ореол. */
:root{ --lamp-top:#9a7258; --lamp:#7d5a44; --lamp-bot:#654634; --on-lamp:#fbf3ea }
.nav .pill, .formats .plan--pick .pill.plan__go, #talk .pill,
html[data-theme=light] .nav .pill,
html[data-theme=light] .nav:not([data-over=film]):not([data-ground=deep]) .pill{
  box-shadow:
    inset 0 1px 0 #ffe8d45c, inset 0 -1px 0 #2a170b40,
    0 0 0 1px #2a170b59, 0 1px 2px #140c0859, 0 10px 26px -10px #654634b3 !important;
}
.nav .pill:before, .formats .plan--pick .pill.plan__go:before, #talk .pill:before{
  background:radial-gradient(120% 140% at 50% 0%,#ffe3cc59,#ffe3cc00 62%);
}
@media (hover:hover) and (pointer:fine){
  .nav .pill:hover, .formats .plan--pick .pill.plan__go:hover, #talk .pill:hover{
    box-shadow:
      inset 0 1px 0 #ffe8d480, inset 0 -1px 0 #2a170b40,
      0 0 0 1px #2a170b66, 0 1px 2px #140c084d, 0 16px 34px -10px #654634cc !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   14. СТЕКЛО В ШАПКЕ ВОЗВРАЩЕНО, ЦЕНЫ ПО ЦЕНТРУ, 18.09.2026

   ШАПКА. В §13 пилюли стали плотными на 90 %, и Максим сразу увидел:
   «ты вообще liquid glass убрал». Возвращаем стекло, но так, чтобы
   текст не серел:
     - цвет текста один и тот же всегда - крем;
     - меняется только ПЛОТНОСТЬ стекла под ним: над фото и тёмной
       землёй стекло прозрачное (52 %), сквозь него видно небо; над
       светлой землёй плотнее (84 %), иначе кремовый текст на
       кремовом фоне пропадает - именно это и было «серым на сером»;
     - плотность меняется плавно за 300 мс, текст при этом стоит;
     - кромка стекла: блик по верху, обводка 1.5 px, размытие с
       насыщением того, что под стеклом.
   ══════════════════════════════════════════════════════════════════ */
html .nav .mark, html .nav .menu, html .nav .lang, html .nav .burger,
html[data-theme=light] .nav .mark, html[data-theme=light] .nav .menu,
html[data-theme=light] .nav .lang, html[data-theme=light] .nav .burger,
.nav[data-over=film] .mark, .nav[data-over=film] .menu, .nav[data-over=film] .lang, .nav[data-over=film] .burger,
.nav[data-ground=deep] .mark, .nav[data-ground=deep] .menu, .nav[data-ground=deep] .lang, .nav[data-ground=deep] .burger{
  background:linear-gradient(180deg,#3a2f28a8 0%,#221c1785 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(170%) !important; backdrop-filter:blur(22px) saturate(170%) !important;
  box-shadow:
    inset 0 1px 0 #fff6ec40,          /* блик по верхней кромке */
    inset 0 0 0 1.5px #f5f0e838,      /* обводка */
    0 8px 24px -12px #140c0899 !important;
  transition:background .3s ease !important;
}
/* над светлой землёй стекло плотнее - текст остаётся тем же кремом */
html .nav[data-over=page][data-ground=paper] .mark,
html .nav[data-over=page][data-ground=paper] .menu,
html .nav[data-over=page][data-ground=paper] .lang,
html .nav[data-over=page][data-ground=paper] .burger{
  background:linear-gradient(180deg,#3a2f28e0 0%,#221c17d6 100%) !important;
}
/* текст - крем всегда, чуть плотнее за счёт веса */
html .nav .menu a, .nav[data-over=film] .menu a, .nav[data-ground=deep] .menu a{ font-weight:500 }


/* ── 14.1 Цены: заголовок и описание по центру ────────────────────
   Три карточки стоят симметрично, а шапка секции была прижата влево -
   блок читался перекошенным. Центрируем. Описание сокращено в
   enhance.js до двух строк: смысл тот же - три глубины, берите ту,
   что подходит проекту сейчас. */
.formats .hd{ display:grid; justify-items:center; text-align:center; margin-inline:auto; max-width:none }
.formats .hd h2{ max-width:none; margin-inline:auto }
.formats .hd .lead{ max-width:44ch; margin-inline:auto }


/* ══════════════════════════════════════════════════════════════════
   15. FAILURES: ЛЕНТА НЕ РЕЖЕТ КАРТОЧКИ, 18.09.2026

   Лента выходила за контейнер вправо до края экрана, а влево - только
   на ширину отступа. При листании карточки обрезались не по краю
   экрана, а по невидимой линии посреди отступа слева. Теперь лента
   во всю ширину экрана с обеих сторон, а первая карточка по-прежнему
   стоит на линии заголовка: отступ внутри ленты равен расстоянию от
   края экрана до текста.
   overflow-x:auto заставляет браузер резать и по вертикали, поэтому
   сверху и снизу даём место под подъём карточки на наведении и под
   тень, и забираем его обратно отрицательным отступом, чтобы ритм
   секции не поехал. */
#failures .fails__grid{
  margin-inline:calc(50% - 50vw) !important;
  padding-inline:max(var(--pad), calc(50vw - 50%)) !important;
  scroll-padding-inline:max(var(--pad), calc(50vw - 50%)) !important;
  padding-block:14px 48px !important;
  margin-block:calc(var(--s4) - 14px) -28px !important;
}
#failures .rail{ margin-top:var(--s2) }


/* ══════════════════════════════════════════════════════════════════
   §20. ТЕПЛО (копия site-warm, 19.09.2026)

   Максим: «сайт хочу красивым, семейным и тёплым»; «всё вокруг одного
   места, просто озеро, это самое бесячее»; тёмно-коричневый фон цен не
   понравился; «Three findings» с акварельным планом назван бредом.

   Новые кадры сделаны в Google Flow одной серией: плёночный Portra,
   низкий тёплый свет, живые семьи, дерево и камень. Лежат в
   /images/new/. Акварели там, где встали фото, уходят (одна фактура на
   секцию).
   ══════════════════════════════════════════════════════════════════ */

/* ── 20.1 Places: шесть разных мест вместо одной иллюстрации ────────── */
#places .places__shot, #places .places__note, #places .places__said{ display:none }
.pl-gal{ margin-top:var(--s5); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
.pl-gal::-webkit-scrollbar{ display:none }
.pl-card{ scroll-snap-align:start; display:grid; gap:12px; margin:0 }
.pl-card__f{ aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:var(--plate) }
.pl-card__f img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.23,1,.32,1) }
.pl-card figcaption b{ display:block; font-size:1.1875rem; font-weight:600; letter-spacing:-.01em; color:var(--fg) }
.pl-card figcaption span{ color:var(--fg-2); font-size:1rem }
@media (hover:hover) and (pointer:fine){ .pl-card:hover .pl-card__f img{ transform:scale(1.04) } }
.places__kind{ transition:color .2s ease, opacity .2s ease }
#places.pl-on .places__kind{ opacity:.45 } #places.pl-on .places__kind.pl-hit{ opacity:1 }
.pl-card{ transition:opacity .3s ease } #places.pl-on .pl-card{ opacity:.5 } #places.pl-on .pl-card.pl-hit{ opacity:1 }

/* ── 20.2 Work: в пустой плашке наконец сам посёлок ───────────────── */
#work .oneframe{ aspect-ratio:16/9; background:url(/images/new/work-aerial.jpg) center/cover no-repeat, var(--plate) !important; border-radius:20px }

/* ── 20.7 Поправки после первого просмотра ─────────────────────────── */
.pl-gal{ grid-auto-columns:minmax(300px, calc((100% - 32px) / 3.3)); margin-right:calc(-1 * var(--gut, 24px)); padding-right:var(--gut, 24px) }
@media (width <= 760px){ .pl-gal{ margin-right:0; padding-right:0; grid-auto-columns:78% } }

/* ── 20.8 Откат по просьбе Максима (19.09) ─────────────────────────
   Вернулись как было: Three findings, Formats (без картинок), финал,
   осенний кадр в Situation (.amb). Плюс вернулся 4-й кадр банка
   (inside · blue hour), который прятала старая правка §8. */

/* ── 20.9 The legend: не анкета, а один лист ─────────────────────────
   Было: таблица «ключ | значение» с волосяными линиями под каждой
   строкой, четыре подписи слева и три абзаца истории, то есть форма
   заявки. Стало: один лист бумаги, на нём главная фраза крупно, один
   абзац истории и четыре следствия. «Name: withheld» ничего не говорит,
   его нет. */
#legend .doc-sheet{ max-width:820px; margin:var(--s5) 0 0; padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px);
  background:#fbf8f3; border:0 !important; border-radius:22px;
  box-shadow:0 0 0 1px #221c170d, 0 2px 4px #3c28190a, 0 40px 80px -48px #3c2819a6 }
#legend .doc-sheet__row{ display:block; border:0 !important; padding:0 !important; margin:0 }
#legend .doc-sheet__k{ display:none }
#legend .doc-sheet__row:nth-child(2){ display:none }
#legend .doc-sheet__v--core{ font-size:clamp(2rem,3.6vw,3.25rem); line-height:1.04; font-weight:600; letter-spacing:-.035em; color:#221c17; max-width:15ch; margin:0 }
#legend .doc-sheet__v--story{ margin-top:28px }
#legend .doc-sheet__v--story p{ font-size:1.25rem; line-height:1.45; color:#5c5249; max-width:44ch; margin:0 }
#legend .doc-sheet__v--story p + p{ display:none }
#legend .doc-sheet__row:nth-child(4){ margin-top:36px; padding-top:28px !important; box-shadow:inset 0 1px 0 #221c171a }
#legend .doc-sheet__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px }
#legend .doc-sheet__l li{ position:relative; padding-left:22px; font-size:1.0625rem; line-height:1.4; color:#221c17 }
#legend .doc-sheet__l li::before{ content:""; position:absolute; left:0; top:.68em; width:12px; height:2px; border-radius:2px; background:#d4b08c }
@media (width <= 760px){ #legend .doc-sheet__l{ grid-template-columns:1fr } }


/* ══════════════════════════════════════════════════════════════════
   §21. ЧИЩЕ И ПОНЯТНЕЕ (site-warm, 19.09.2026)

   Референс Максима: тёмный продуктовый лендинг, где с первого экрана
   ясно, что это и как работает: заголовок в две строки, одна строка
   пояснения, одна светлая кнопка; заголовки секций по центру; никаких
   01/02/03, надзаголовков и мелких примечаний. «У нас куча мусора и
   текста».
   ══════════════════════════════════════════════════════════════════ */

/* ── 21.1 Кнопка: светлая, без свечения ────────────────────────────
   Мокко с ореолом при наведении - «отстойный цвет» и «ужас». Как в
   референсе: светлая капсула, тёмный текст, кромка волосяной линией,
   маленькая тень. Наведение - чуть светлее, нажатие - 0.97. */
.nav .pill, #talk .pill, .formats .plan--pick .pill.plan__go, .ch .pill,
html[data-theme=light] .nav .pill, html[data-theme=light] #talk .pill,
html[data-theme=light] .formats .plan--pick .pill.plan__go,
.nav[data-over=film] .pill, .nav[data-ground=deep] .pill, .deep #talk .pill{
  background:#fbf8f3 !important; color:#221c17 !important; filter:none !important;
  box-shadow:0 0 0 1px #221c171f, 0 1px 2px #221c1714, 0 8px 22px -12px #221c1766 !important;
  transition:background-color .18s ease, transform .14s cubic-bezier(.23,1,.32,1) !important }
.nav .pill:before, #talk .pill:before, .formats .plan--pick .pill.plan__go:before, .ch .pill:before,
.nav .pill:after, #talk .pill:after, .formats .plan--pick .pill.plan__go:after{ display:none !important }
.nav .pill .pill__l, #talk .pill .pill__l, .formats .plan--pick .pill .pill__l, .ch .pill .pill__l{ color:inherit !important }
@media (hover:hover) and (pointer:fine){
  .nav .pill:hover, #talk .pill:hover, .formats .plan--pick .pill.plan__go:hover, .ch .pill:hover{
    background:#ffffff !important; box-shadow:0 0 0 1px #221c1729, 0 1px 2px #221c171a, 0 10px 26px -12px #221c1780 !important }
}

/* ── 21.2 Первый экран: заголовок, строка, одна кнопка ─────────────── */
.scroll-hint{ display:none !important }
.ch h1, .film .ch h2{ font-size:clamp(2.75rem,5.6vw,5rem) !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:600 }
.ch p{ background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; border-radius:0 !important;
  color:#f5f0e8e6 !important; font-size:clamp(1.125rem,1.5vw,1.375rem) !important; max-width:40ch !important; text-shadow:0 1px 18px #0000008c }
.ch h1, .film .ch h2{ text-shadow:0 2px 30px #00000066 }
.ch-cta{ margin-top:10px }

/* ── 21.3 Method убран целиком (секция и пункт меню) ───────────────── */
#method{ display:none !important }
.nav .menu a[href="#method"]{ display:none }

/* ── 21.4 Заголовки секций по центру, без надзаголовков ────────────── */
.hd > p.tag, .hd--split > p.tag{ display:none !important }
#failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{
  text-align:center; margin-inline:auto !important; max-width:820px; justify-items:center; display:grid }
#failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #work .hd--split .lead{ margin-inline:auto; max-width:56ch }
#places .places__kinds{ justify-content:center }
#legend .doc-sheet{ margin-inline:auto !important }

/* ── 21.5 Меньше текста ─────────────────────────────────────────────
   Оставлено то, что держит мысль; убраны вторые и третьи пересказы. */
#situation .hero__type p:nth-of-type(3), #situation .hero__type p:nth-of-type(5){ display:none }
#failures .fail__b{ display:none }
#failures .fail__m{ font-size:1.0625rem; color:var(--fg) }
#work .fleg{ display:none !important }
#work .find__n, #work .survey .geo{ display:none !important }
#formats .plans__anchor, #formats .plans__note{ display:none }
#talk .wrap > p.tag{ display:none }
#situation .hero__acts a.go{ display:none }

/* ══════════════════════════════════════════════════════════════════
   §22 · TWO VOICES
   The headings get a display serif and one accented word in italic;
   everything the hand touches stays in the grotesque. One accent
   colour — a cold blue against the warm paper — and it is used for
   the italic, the underline and the live figures, nowhere else.
   ══════════════════════════════════════════════════════════════════ */
:root{ --acc:#3f6ea8; --acc-soft:#7ba4e0 }
h1, h2, .quote, .big, .pull, .core{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400; letter-spacing:-.012em; line-height:1.02;
}
h2{ line-height:1.04 }
/* the serif runs smaller than the grotesque at the same size: give the
   display back the scale it had */
#film .ch h1{ font-size:clamp(56px,7.8vw,124px) }
h2{ font-size:clamp(38px,4.6vw,68px) }
.quote, .big, .pull, .core{ line-height:1.12; letter-spacing:-.008em }
h1 .w i.ac, h2 .w i.ac, em.ac{ font-style:italic; color:var(--acc) }
#film .ch h1 .w i.ac, .hero__type .w i.ac{ color:var(--acc-soft) }
/* figures read as display too, so they carry weight without going bigger */
.count, .num, .stat b, .fig{ font-variant-numeric:tabular-nums }
.hi, .hi2{ color:var(--acc) }
/* long display lines need air: the serif sets tighter than the grotesque */
.quote, .big, .pull, .core{ line-height:1.16 }
.pull{ font-size:clamp(26px,2.5vw,36px) }
.hi2{ box-shadow:inset 0 -.08em 0 var(--acc-soft) }
.hi2::after, .pull .hi2::after{ background:var(--acc-soft) !important }

/* §23 · the plans lose their second voice: the label above the list and the
   repeated fourth line. What is left is a price, a promise, three lines. */
#formats .plan__h{ display:none }
#formats .plan__d{ font-size:1.0625rem; line-height:1.4 }
#formats .plan__l{ margin-top:1.1rem }
#formats .plan__l li[hidden]{ display:none }

/* ══════════════════════════════════════════════════════════════════
   §24 · OFF CENTRE
   Everything used to sit on the middle axis, which reads as a template.
   The heads hang on the left with the supporting line in a narrow
   column under them. Centred stays only where it earns it: the formats
   table and the closing invitation.
   ══════════════════════════════════════════════════════════════════ */
#failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{
  text-align:left; justify-items:start; margin-inline:0 !important; max-width:min(1180px, 92vw) }
#failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{
  max-width:17ch; margin-inline:0 }
#failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #work .hd--split .lead{
  margin-inline:0; max-width:48ch }
#places .places__kinds{ justify-content:flex-start }

/* the hero copy hangs on the left of the frame, low, the way it does on
   the house page */
#film .ch{ text-align:left; align-items:flex-start }
#film .ch > *{ margin-inline:0 }
#film .ch h1{ max-width:12ch }
#film .ch p, #film .ch .lead{ max-width:34ch; margin-inline:0 }
#film .ch .acts, #film .ch .hero__acts{ justify-content:flex-start }
@media (width <= 760px){
  #film .ch h1{ max-width:none }
  #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2{ max-width:none }
}

/* §24.1 · the head is a two-column block on wide screens: the sentence on
   the left, the line that explains it on the right, both sitting on the
   same baseline. Nothing is centred and nothing is left hanging. */
@media (width >= 1100px){
  #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{
    display:grid; grid-template-columns:1.05fr .95fr; align-items:end; column-gap:clamp(40px,5vw,90px); max-width:1180px }
  #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{
    grid-column:1; margin:0; max-width:15ch }
  #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{
    grid-column:2; margin:0 0 .35em; max-width:42ch }
}

/* §24.2 · the one sentence the whole document exists for is a display line,
   so it speaks in the display voice too */
#legend .doc-sheet__v--core{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.01em; line-height:1.06 }
#legend .doc-sheet__v--core{ max-width:19ch; font-size:clamp(32px,3.4vw,50px) }

/* §24.3 · the two columns were reading as two separate things: a short head
   in a wide column left a void in the middle and the eye had to jump it.
   Now the head takes exactly the width of its own line and the paragraph
   starts one gutter later, so the pair reads as one block. */
@media (width >= 1100px){
  #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{
    display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:clamp(36px,3.4vw,56px); row-gap:18px; max-width:1100px }
  #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{
    flex:0 1 auto; max-width:13ch; margin:0 }
  #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{
    flex:1 1 min(38ch, 100%); max-width:38ch; margin:0 0 .4em }
}
/* tops aligned, not bottoms: a short head next to a long paragraph looked
   like it had slipped down the page */
@media (width >= 1100px){
  #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{ align-items:flex-start }
  #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{ margin:.3em 0 0 }
}

/* §24.4 · the head and its line stack, the way a page is actually read:
   one column, left, the sentence and then the explanation under it. The
   two-column head from 24.1–24.3 is gone. */
@media (width >= 1100px){
  #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #bank .bank__hd, #compare .hd, #work .hd--split{
    display:block; max-width:min(1100px, 92vw) }
  #failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2, #bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{
    max-width:17ch; margin:0 }
  #failures > .hd .lead, #places > .hd .lead, #work > .hd .lead, #legend > .hd .lead, #bank .bank__hd .lead, #compare .hd .lead, #work .hd--split .lead{
    max-width:46ch; margin:1.1rem 0 0 }
}

/* ══════════════════════════════════════════════════════════════════
   §25 · THE FIGURES, HELD · a pinned screen, one number at a time
   ══════════════════════════════════════════════════════════════════ */
#work .figs{ position:relative; height:340vh; margin-top:clamp(40px,6vw,90px) }
#work .figs__stick{
  position:sticky; top:0; height:100dvh; display:grid; align-content:center; justify-items:start;
  gap:clamp(28px,4vh,56px) }
#work .figs__stage{ position:relative; display:grid; min-height:46vh; align-content:center; width:100% }
#work .fig{
  grid-area:1 / 1; display:grid; gap:clamp(10px,1.6vh,20px); justify-items:start; max-width:22ch;
  opacity:0; transform:translateY(22px); pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.23,1,.32,1) }
#work .fig.is-on{ opacity:1; transform:translateY(0) }
#work .fig__n{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; line-height:.86; letter-spacing:-.02em;
  font-size:clamp(110px,19vw,280px); font-variant-numeric:tabular-nums; color:var(--acc) }
#work .fig__t{ font-size:clamp(1.0625rem,1.5vw,1.375rem); line-height:1.3; color:#5c5249; max-width:20ch }
#work .figs__dots{ display:flex; gap:10px }
#work .figs__dot{
  width:26px; height:3px; border-radius:2px; background:rgb(34 28 23 / .16);
  transition:background-color .35s ease }
#work .figs__dot.is-on{ background:var(--acc) }
#work .figs.is-static{ height:auto }
#work .figs.is-static .figs__stick{ position:static; height:auto }
#work .figs.is-static .figs__stage{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; min-height:0 }
#work .figs.is-static .fig{ grid-area:auto; opacity:1; transform:none }
#work .figs.is-static .fig__n{ font-size:clamp(56px,7vw,96px) }
@media (width <= 760px){ #work .fig__n{ font-size:clamp(88px,26vw,150px) } }

/* §31 · the lean towards the cursor rides on top of the press and hover */
.pill, .chip, .plan__go, .ctas a, .rail__b{
  translate:var(--lean-x, 0px) var(--lean-y, 0px);
  transition:translate .45s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1),
             background-color .18s ease, color .18s ease, box-shadow .18s ease }

/* ══════════════════════════════════════════════════════════════════
   §26 · THE RIBBON · one continuous line, no fading of the neighbours
   ══════════════════════════════════════════════════════════════════ */
#places .places__kinds{
  display:flex; flex-wrap:nowrap; width:max-content; gap:clamp(22px,2.4vw,40px);
  animation:kinds-run 46s linear infinite; will-change:transform }
#places .places__kind{
  opacity:1 !important; filter:none !important; color:var(--fg) !important;
  white-space:nowrap; cursor:default !important; transition:none !important }
@keyframes kinds-run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (hover:hover) and (pointer:fine){ #places .places__kinds:hover{ animation-play-state:paused } }
@media (prefers-reduced-motion:reduce){
  #places .places__kinds{ animation:none; flex-wrap:wrap; width:auto }
  #places .places__kind.is-clone{ display:none } }

/* ══════════════════════════════════════════════════════════════════
   §27 · BUTTONS THAT ANSWER · a press is felt, a hover lifts a little
   ══════════════════════════════════════════════════════════════════ */
.pill, .chip, .go, .plan__go, .nav .pill, .ctas a{
  transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .18s ease }
@media (hover:hover) and (pointer:fine){
  .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover{ transform:translateY(-1px) scale(1.03) }
  .go:hover{ transform:translateX(2px) }
}
.pill:active, .chip:active, .go:active, .plan__go:active, .ctas a:active{ transform:scale(.97) }
@media (prefers-reduced-motion:reduce){
  .pill, .chip, .go, .plan__go, .ctas a{ transition:background-color .18s ease, color .18s ease }
  .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover, .go:hover{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════
   §28 · THE CLOSING LINE stays one colour — it is the ask, not a claim
   ══════════════════════════════════════════════════════════════════ */
#talk h2 .w i.ac{ font-style:normal !important; color:inherit !important }

/* ══════════════════════════════════════════════════════════════════
   §29 · THE LEGEND IS A STATEMENT, NOT A FORM
   The sheet was a card of labelled rows, which reads like paperwork.
   The card goes; what is left is the sentence the project runs on, a
   rule, the story in one column and what followed as three short lines.
   ══════════════════════════════════════════════════════════════════ */
#legend .doc-sheet{
  background:none !important; box-shadow:none !important; border:0 !important;
  padding:0 !important; max-width:1100px; margin-inline:0 !important; display:block }
#legend .doc-sheet__row{ display:block; margin:0 }
#legend .doc-sheet__v--core{
  font-size:clamp(38px,4.6vw,72px); line-height:1.04; max-width:20ch; margin:0 0 1.5rem;
  padding-bottom:1.5rem; border-bottom:1px solid rgb(34 28 23 / .14) }
#legend .doc-sheet__v--story{ max-width:46ch; margin:0 }
#legend .doc-sheet__v--story p{ margin:0 }

/* ══════════════════════════════════════════════════════════════════
   §30 · MOTION THAT ANSWERS THE SCROLL
   Until now everything only appeared. These are scroll-driven: the
   frames settle as they arrive, the cards rise, the heads drift a
   little slower than the page, and a hairline tracks the reading.
   Transform only — the site keeps its own opacity reveals — and all
   of it is dropped under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════ */
#read-prog{
  position:fixed; top:0; left:0; z-index:200; height:2px; width:100%; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--acc), var(--acc-soft)); transform:scaleX(0); pointer-events:none }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #read-prog{ animation:prog linear both; animation-timeline:scroll(root) }
    @keyframes prog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

    /* photographs settle: they arrive a touch large and come to rest */
    #failures .fail__f, #places .pl-card__f, #places .places__shot,
    #work .oneframe__f, #bank .bank__f{
      animation:settle linear both; animation-timeline:view(); animation-range:entry 0% cover 45% }
    @keyframes settle{ from{ transform:scale(1.07) } to{ transform:scale(1) } }

    /* cards rise into place, each one on its own arrival */
    #failures .fail, #places .pl-card, #work .fig{
      animation:rise linear both; animation-timeline:view(); animation-range:entry 5% cover 30% }
    @keyframes rise{ from{ transform:translateY(46px) } to{ transform:translateY(0) } }

    /* heads travel a little slower than the page under them */
    #failures > .hd, #places > .hd, #work > .hd, #legend > .hd, #compare .hd, #bank .bank__hd{
      animation:drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100% }
    @keyframes drift{ from{ transform:translateY(34px) } to{ transform:translateY(-26px) } }

    /* the sentence the project runs on opens as it is reached */
    #legend .doc-sheet__v--core{
      animation:openline linear both; animation-timeline:view(); animation-range:entry 10% cover 40% }
    @keyframes openline{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }

    /* the hero copy lifts away as the first screen leaves */
    #film .ch h1, #film .ch .lead, #film .ch p{
      animation:lift linear both; animation-timeline:scroll(root); animation-range:0 90vh }
    @keyframes lift{ from{ transform:translateY(0) } to{ transform:translateY(-54px) } }
  }
}
/* §25.1 · tighter: the caption belongs to the number, not to the page */
#work .figs{ height:300vh }
#work .figs__stick{ gap:clamp(20px,3vh,36px) }
#work .fig{ gap:6px; max-width:26ch }
#work .fig__t{ max-width:24ch }

/* ══════════════════════════════════════════════════════════════════
   §32 · SECOND THOUGHTS
   The pinned number screen asked for four screens of scrolling to read
   four facts — nobody does that. The figures go back to one row. The
   buttons stop chasing the cursor: a pill simply grows a little when
   you come near it, and nothing moves away from the hand.
   ══════════════════════════════════════════════════════════════════ */
#work .figs{
  position:static; height:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px clamp(24px,3vw,56px); max-width:1180px; margin:clamp(48px,6vw,84px) 0 0;
  padding-top:28px; border-top:1px solid rgb(34 28 23 / .12) }
#work .figs__stick, #work .figs__stage, #work .figs__dots{ display:contents }
#work .fig{
  position:static; grid-area:auto; display:grid; gap:8px; align-content:start; max-width:none;
  opacity:1; transform:none }
#work .fig__n{ font-size:clamp(52px,5.4vw,84px); line-height:.92 }
#work .fig__t{ font-size:1rem; max-width:22ch }
@media (width <= 900px){ #work .figs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* the pill grows towards the hand instead of leaning away from it */
.pill, .chip, .plan__go, .ctas a, .rail__b{
  translate:none; transform-origin:center;
  transition:transform .2s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .2s ease }
@media (hover:hover) and (pointer:fine){
  .pill:hover, .chip:hover, .plan__go:hover, .ctas a:hover{ transform:scale(1.06) }
}
.pill:active, .chip:active, .plan__go:active, .ctas a:active{ transform:scale(.98) }

/* ══════════════════════════════════════════════════════════════════
   §33 · THE FIRST SCREEN
   The one place a centred block earns it: a title, the line that
   explains it, and a single dark pill — sitting high enough that the
   settlement underneath is still a photograph and not a backdrop.
   ══════════════════════════════════════════════════════════════════ */
#film .chapters .ch:first-child{
  text-align:center; align-items:center; justify-items:center; align-content:start;
  padding-top:clamp(12vh,16vh,22vh) }
#film .chapters .ch:first-child > *{ margin-inline:auto }
#film .chapters .ch:first-child h1{
  max-width:16ch; font-size:clamp(54px,7.4vw,116px); line-height:.98; margin:0 }
#film .chapters .ch:first-child p,
#film .chapters .ch:first-child .lead{
  max-width:42ch; margin:1.1rem auto 0; font-size:clamp(1.0625rem,1.35vw,1.3125rem); line-height:1.4 }
#film .chapters .ch:first-child .acts,
#film .chapters .ch:first-child .hero__acts{ justify-content:center; margin-top:clamp(22px,3vh,36px) }
/* the call on the first screen is the dark one, the way it is on paper */
#film .chapters .ch:first-child .pill{
  background:#221c17; color:#f7f3ec; box-shadow:inset 0 1px 0 #ffffff1f, 0 10px 26px -12px #00000099;
  height:54px; padding:0 30px; font-size:1.0625rem }
#film .chapters .ch:first-child .pill:hover{ background:#352c25 }
/* §33.1 · higher on the screen, bigger, and the call in ink */
#film .chapters .ch:first-child{ justify-content:flex-start; padding-top:clamp(14vh,17vh,20vh) }
#film .chapters .ch:first-child h1{ max-width:13ch; font-size:clamp(58px,8.2vw,128px) }
#film .chapters .ch:first-child .pill{
  background:#221c17 !important; color:#f7f3ec !important;
  box-shadow:inset 0 1px 0 #ffffff1f, 0 12px 30px -14px #000000a6 !important }
#film .chapters .ch:first-child .pill:hover{ background:#352c25 !important }

/* ══════════════════════════════════════════════════════════════════
   §34 · THE FIRST LINE, IN THE SKY
   One line, set in ink, sitting in the light part of the frame where
   the sunset is, with the settlement left untouched underneath. The
   call goes back to paper — a dark pill on a dark forest was a bruise.
   ══════════════════════════════════════════════════════════════════ */
#film .chapters .ch:first-child{ padding-top:clamp(9vh,11vh,14vh) }
#film .chapters .ch:first-child h1{
  color:#1c1815; max-width:none; white-space:nowrap;
  font-size:clamp(34px,8.4vw,128px); line-height:1.02;
  text-shadow:0 1px 40px rgb(255 240 220 / .45) }
#film .chapters .ch:first-child h1 .w i.ac{ color:#2f5c96 }
#film .chapters .ch:first-child p,
#film .chapters .ch:first-child .lead{ color:#2b241d; margin-top:1rem }
#film .chapters .ch:first-child .pill{
  background:#fbf8f3 !important; color:#221c17 !important;
  box-shadow:inset 0 1px 0 #fff, 0 12px 30px -16px rgb(40 26 14 / .6) !important }
#film .chapters .ch:first-child .pill:hover{ background:#fff !important }
@media (width <= 820px){
  #film .chapters .ch:first-child h1{ white-space:normal; max-width:13ch; font-size:clamp(40px,11vw,68px) }
}

/* ══════════════════════════════════════════════════════════════════
   §34.1 · NO OVERLAP
   The serif sets tighter than the grotesque did, and the chapter copy
   was laid out for the old metrics: the italic descenders of the head
   ran straight into the line under it. Give every chapter head its own
   room and let the line that follows start below it.
   ══════════════════════════════════════════════════════════════════ */
#film .ch h1, #film .ch h2, .hero__type h2{ line-height:1.08; margin:0 0 .12em; padding-bottom:.08em }
#film .ch p, #film .ch .lead, .hero__type p, .hero__type .lead{ margin-top:1.1rem }
#film .ch h1 .w, #film .ch h2 .w, .hero__type h2 .w{ padding-bottom:.06em }
/* §34.2 · the block actually has to sit in the sky, not be padded towards it:
   the stage centres its chapters, so lift the whole copy instead */
#film .chapters .ch:first-child{ position:relative; top:-19vh; padding-top:0 }
/* §34.3 · the chapter box was narrower than the page, so a line set in one
   run overflowed it and drifted right of centre */
#film .chapters .ch:first-child{ width:100%; max-width:100%; flex:1 1 100% }
#film .chapters .ch:first-child h1{ text-shadow:none; width:100% }
/* §34.4 · the chapter is a flex item sharing the row, so a width of 100% is
   not the width of the window: take the window explicitly */
#film .chapters .ch:first-child{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); flex:0 0 auto }
/* §34.5 · the chapters sit in a flex row, so their centre is not the window's.
   Lift the first one out of the row and hang it over the stage: it keeps the
   site's own reveal (the .lit class still drives it) and lands dead centre. */
#film .chapters{ position:relative }
#film .chapters .ch:first-child{
  position:absolute; left:0; right:0; top:14vh; width:auto; max-width:none; margin:0; padding:0 var(--gut, 32px);
  display:flex; flex-direction:column; align-items:center }
/* a touch more air under a head whose italic drops below the line */
#film .ch p, #film .ch .lead{ margin-top:1.5rem }

/* ══════════════════════════════════════════════════════════════════
   §35 · THE FIRST SCREEN, SETTLED
   Ink lost against the forest, so the copy goes back to light on the
   photograph. The order is the one that works: the line, then a real
   sentence under it at reading size, then one modest pill.
   ══════════════════════════════════════════════════════════════════ */
#film .chapters{ position:relative; height:100%; min-height:100% }
#film .chapters .ch:first-child{ top:16vh }
#film .chapters .ch:first-child h1{
  color:#fdfbf7; text-shadow:0 2px 40px rgb(20 12 6 / .45), 0 1px 3px rgb(20 12 6 / .3) }
#film .chapters .ch:first-child h1 .w i.ac{ color:#a8c6ee }
#film .chapters .ch:first-child p,
#film .chapters .ch:first-child .lead{
  color:rgb(253 251 247 / .88); max-width:56ch; font-size:clamp(1rem,1.15vw,1.1875rem); line-height:1.5;
  text-shadow:0 1px 20px rgb(20 12 6 / .5) }
#film .chapters .ch:first-child .pill{
  height:46px; padding:0 24px; font-size:1rem;
  background:#fbf8f3 !important; color:#221c17 !important;
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px -14px rgb(20 12 6 / .7) !important }

/* the second chapter keeps the landing's own layout; it only needs to be
   centred in the stage again, since the first chapter left the flow */
#film .chapters .ch:nth-child(2){ margin-block:auto; align-self:center }

/* ══════════════════════════════════════════════════════════════════
   §36 · THE SKY MOVES · the loop sits under the scrim and the words
   ══════════════════════════════════════════════════════════════════ */
/* the stage stacks poster (1) then the streamed film (2); the loop goes
   above both, and the scrim and the words stay above the loop — dropping
   the scrim under the film is what washed the whole first screen out */
#film .film__stage .hero-loop{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3;
  pointer-events:none; transition:none; transform:translateZ(0); backface-visibility:hidden }
#film .film__stage .scrim{ z-index:4 }
#film .film__stage .chapters{ z-index:5 }

/* §36.1 · the accent on the first screen is the site's blue, like everywhere */
#film .chapters .ch:first-child h1 .w i.ac{ color:var(--acc-soft) }


/* the italic tail of the head still needs room before the line under it */
#film .chapters .ch:nth-child(2) h2{ padding-bottom:.14em }
/* §36.4 · the generated loop is graded brighter and warmer than the
   photograph it replaces — bring it back to the evening we had */
#film .film__stage .hero-loop{ filter:brightness(.92) saturate(.94) }

/* ══════════════════════════════════════════════════════════════════
   §37 · THE SECOND SCREEN SITS WHERE THE FIRST ONE DOES
   Same axis, same height: the eye does not have to travel between the
   two chapters of the film.
   ══════════════════════════════════════════════════════════════════ */
#film .chapters .ch:nth-child(2){
  position:absolute; left:0; right:0; top:16vh; margin:0; padding:0 var(--gut, 64px);
  width:auto; max-width:none; align-self:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center }
#film .chapters .ch:nth-child(2) > *{ margin-inline:auto }
#film .chapters .ch:nth-child(2) h2{ max-width:14ch; margin:0 auto; padding-bottom:.14em }
#film .chapters .ch:nth-child(2) p,
#film .chapters .ch:nth-child(2) .lead{
  max-width:46ch; margin:1.5rem auto 0; font-size:clamp(1rem,1.15vw,1.1875rem); line-height:1.5 }

/* the call on the first screen sits closer to the line it answers */
#film .chapters .ch:first-child .acts,
#film .chapters .ch:first-child .hero__acts{ margin-top:clamp(14px,1.8vh,22px) }

/* ══════════════════════════════════════════════════════════════════
   §38 · THE HOVER THAT NEVER FIRED
   An old rule of mine killed every pill transform with !important to
   stop the label-roll and the magnetic drift. It was also killing the
   one piece of motion we do want, so the growth is stated louder.
   ══════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .pill:hover, .chip:hover, .go:hover, .plan__go:hover, .ctas a:hover,
  .nav .pill:hover, #talk .pill:hover, .formats .plan--pick .pill.plan__go:hover{
    transform:scale(1.05) !important }
}
.pill:active, .chip:active, .plan__go:active, .ctas a:active,
.nav .pill:active, #talk .pill:active{ transform:scale(.97) !important }
.pill, .chip, .go, .plan__go, .ctas a{
  transition:transform .18s cubic-bezier(.23,1,.32,1), background-color .18s ease,
             color .18s ease, box-shadow .2s ease !important }
@media (prefers-reduced-motion:reduce){
  .pill:hover, .chip:hover, .go:hover, .plan__go:hover, .ctas a:hover,
  .nav .pill:hover, #talk .pill:hover{ transform:none !important }
}

/* ══════════════════════════════════════════════════════════════════
   §39 · CYRILLIC, AND MORE AIR BETWEEN THE LETTERS
   Instrument Serif has no Cyrillic, so the Russian page fell back to a
   system serif. Playfair Display carries the Cyrillic — the browser
   picks it up glyph by glyph, so the Latin stays as it is. And the
   whole display voice gets its tracking opened up: it was set tight
   for a grotesque, and a serif needs the opposite.
   ══════════════════════════════════════════════════════════════════ */
h1, h2, .quote, .big, .pull, .core, #legend .doc-sheet__v--core,
#film .ch h1, #film .ch h2, .hero__type h2{
  font-family:"Instrument Serif","Playfair Display",Georgia,"Times New Roman",serif;
  letter-spacing:.012em }
#work .fig__n{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; letter-spacing:.004em }
#film .chapters .ch:first-child h1{ letter-spacing:.014em }
#legend .doc-sheet__v--core{ letter-spacing:.01em }

/* Russian runs longer: the first line stops being one unbreakable run */
html[lang="ru"] #film .chapters .ch:first-child h1{
  white-space:normal; max-width:17ch; font-size:clamp(34px,6.2vw,100px) }
html[lang="ru"] h2{ font-size:clamp(34px,4.2vw,62px) }
/* §39.1 · the site sets its own tight tracking on the display classes with
   more weight than ours; say it once, louder, for the serif */
h1, h2, .quote, .big, .pull, #legend .doc-sheet__v--core,
#film .ch h1, #film .ch h2, .hero__type h2{ letter-spacing:.012em !important }
#work .fig__n{ letter-spacing:.004em !important }
/* §39.2 · the Russian line breaks in two, not three */
html[lang="ru"] #film .chapters .ch:first-child h1{ max-width:21ch; font-size:clamp(32px,5.8vw,94px) }

/* §40 · Instrument Serif runs narrow and needs more air than the Cyrillic
   serif does: open the tracking on the Latin pages only */
html:not([lang="ru"]) :is(h1, h2, .quote, .big, .pull, #legend .doc-sheet__v--core,
  #film .ch h1, #film .ch h2, .hero__type h2){ letter-spacing:.032em !important }
html:not([lang="ru"]) #work .fig__n{ letter-spacing:.018em !important }

/* §41 · THE ABOUT QUOTE
   The site asks this line for a semibold the display serif does not
   have, so the browser fattened every letter itself and they ran into
   each other. One real weight, open tracking, a line that breathes. */
#about .pull, #about .pull *{
  font-weight:400 !important; font-synthesis:none; letter-spacing:.028em !important }
#about .pull{
  font-size:clamp(30px,2.9vw,42px) !important; line-height:1.24 !important; max-width:23ch }
#about .pull .hi2{ box-shadow:inset 0 -.07em 0 var(--acc-soft); color:inherit }
html[lang="ru"] #about .pull, html[lang="ru"] #about .pull *{ letter-spacing:.01em !important }

/* §41.1 · the two film headings asked for 600 too. Latin gets the one real
   weight Instrument Serif has; Cyrillic gets Playfair's real 500, which is
   loaded, instead of a synthesised 600 that is not */
#film .ch h1, #film .ch h2, #film .ch h1 *, #film .ch h2 *{
  font-weight:400 !important; font-synthesis:none }
html[lang="ru"] #film .ch h1, html[lang="ru"] #film .ch h2,
html[lang="ru"] #film .ch h1 *, html[lang="ru"] #film .ch h2 *{ font-weight:500 !important }

/* ══════════════════════════════════════════════════════════════════
   §42 · WHERE A LINE BREAKS
   A line should end where the thought pauses, and no line should be
   left as a stub for the eye to fetch. Heads are balanced so their
   lines come out even; running text avoids a lone last word; the About
   quote is cut by hand at its commas and dashes, since it is one
   fixed sentence and a machine cannot know where it breathes.
   ══════════════════════════════════════════════════════════════════ */
h1, h2, .quote, .big, #legend .doc-sheet__v--core, #about .pull p{ text-wrap:balance }
p, .lead, li, .fig__t, .plan__d{ text-wrap:pretty }

/* the quote, line by line: each phrase is its own line on a wide screen,
   and on a phone the phrases simply run on */
#about .pull p{ max-width:none !important }
#about .pull p .ln{ display:inline }
@media (width >= 900px){
  #about .pull p[data-lines] .ln{ display:block }
  #about .pull p[data-lines]{ text-wrap:nowrap; font-size:clamp(28px,2.55vw,38px) !important }
}

/* the underline under the key words is the site's one blue, like the italic */
#about .pull b{ color:inherit !important; box-shadow:inset 0 -.09em 0 var(--acc-soft) !important }

/* ══════════════════════════════════════════════════════════════════
   §43 · FAILURES AS A 3×2 GRID
   The ribbon hid four of the six cards behind a swipe. Six projects
   read best all at once: three by two, no scroll, no arrows.
   ══════════════════════════════════════════════════════════════════ */
#failures .fails__grid{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(16px,1.6vw,24px) !important;
  overflow:visible !important; scroll-snap-type:none !important;
  margin-inline:0 !important; padding-inline:0 !important; padding-block:0 !important;
  max-width:1180px }
#failures .fail{ flex:none !important; width:auto !important; min-width:0; scroll-snap-align:none }
#failures .rail{ display:none !important }
@media (width <= 1000px){ #failures .fails__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } }
@media (width <= 640px){  #failures .fails__grid{ grid-template-columns:1fr !important } }

/* §42.1 · heads get room for three even lines instead of four ragged ones */
#failures > .hd h2, #places > .hd h2, #work > .hd h2, #legend > .hd h2,
#bank .bank__hd h2, #compare .hd h2, #work .hd--split h2{ max-width:22ch !important }

/* §42.2 · Russian runs wider: a smaller quote so its phrases stay in the column */
@media (width >= 900px){
  html[lang="ru"] #about .pull p[data-lines]{ font-size:clamp(24px,2.2vw,33px) !important }
}
/* §43.1 · in a row the cards share a height, and the text block was pushed
   to the bottom of each — so the rule under the name wandered. The rule
   now sits under the name in every card; the spare room goes below. */
#failures .fail__m{ margin-top:14px !important }

/* ══════════════════════════════════════════════════════════════════
   §44 · SIX PLACES, WHOLE
   The frames were a ribbon running off the edge of the screen, and the
   moving word line drove it on hover. Now: six frames in a 3×2 grid,
   each shown whole at its own 3:4, no zoom on arrival or on hover, and
   the word line runs on its own.
   ══════════════════════════════════════════════════════════════════ */
#places .pl-gal{
  display:grid !important; grid-auto-flow:row !important; grid-auto-columns:auto !important;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.2vw,32px) clamp(16px,1.6vw,24px);
  overflow:visible !important; scroll-snap-type:none; margin-right:0 !important; padding-right:0 !important;
  max-width:1180px }
#places .pl-card{ opacity:1 !important }
#places .pl-card__f{ aspect-ratio:3/4 }
#places .pl-card__f, #places .pl-card__f img{ animation:none !important; transform:none !important }
#places .pl-card figcaption{ display:grid; gap:2px }
#places .places__kinds, #places .places__kind{ pointer-events:none }
#places.pl-on .places__kind{ opacity:1 }
@media (width <= 1000px){ #places .pl-gal{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (width <= 560px){  #places .pl-gal{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════════
   §45 · THE KINDS, IN THREE CURRENTS
   ══════════════════════════════════════════════════════════════════ */
#places .places__kinds{ display:none !important }
#places .kinds-rows{
  display:grid; gap:clamp(10px,1.4vw,18px); margin-top:var(--s5);
  margin-inline:calc(50% - 50vw); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) }
#places .kr{ overflow:hidden }
#places .kr__t{ display:flex; width:max-content; gap:clamp(26px,2.8vw,48px); will-change:transform }
#places .kr__t span{ white-space:nowrap; line-height:1.15 }
#places .kr--a .kr__t, #places .kr--c .kr__t{
  font-size:clamp(22px,2.4vw,34px); font-weight:600; letter-spacing:-.02em; color:var(--fg) }
#places .kr--b .kr__t{
  font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(28px,3.1vw,46px); letter-spacing:.02em; color:var(--acc) }
#places .kr--c .kr__t{ color:var(--fg-2) }
#places .kr--l .kr__t{ animation:kr-l var(--kr-t,62s) linear infinite }
#places .kr--r .kr__t{ animation:kr-r var(--kr-t,74s) linear infinite }
#places .kr--c{ --kr-t:54s }
@keyframes kr-l{ from{ transform:translateX(0) }    to{ transform:translateX(-50%) } }
@keyframes kr-r{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
@media (prefers-reduced-motion:reduce){
  #places .kr__t{ animation:none !important }
  #places .kinds-rows{ margin-inline:0; -webkit-mask-image:none; mask-image:none }
  #places .kr--b, #places .kr--c{ display:none }
  #places .kr--a .kr__t{ flex-wrap:wrap; width:auto; row-gap:10px }
}

/* ══════════════════════════════════════════════════════════════════
   §46 · SIX PLACES, AS A RIBBON THAT STOPS ON WHOLE CARDS
   ══════════════════════════════════════════════════════════════════ */
#places .pl-gal{
  display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 2 * var(--pl-gap)) / 3) !important; --pl-gap:clamp(16px,1.6vw,24px);
  gap:var(--pl-gap) !important;
  overflow-x:auto !important; overflow-y:hidden; scroll-snap-type:x mandatory !important;
  scrollbar-width:none; overscroll-behavior-x:contain;
  margin-right:0 !important; padding-right:0 !important; max-width:1180px }
#places .pl-gal::-webkit-scrollbar{ display:none }
#places .pl-card{ scroll-snap-align:start; scroll-snap-stop:always }
@media (width <= 1000px){ #places .pl-gal{ grid-auto-columns:calc((100% - var(--pl-gap)) / 2) !important } }
@media (width <= 560px){  #places .pl-gal{ grid-auto-columns:100% !important } }

#places .pl-nav{ display:flex; gap:10px; justify-content:flex-end; max-width:1180px; margin-top:18px }
#places .pl-nav[hidden]{ display:none }
#places .pl-nav__b{
  width:44px; height:44px; border-radius:999px; border:0; cursor:pointer; display:grid; place-items:center;
  background:#fbf8f3; color:var(--fg);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(34 28 23 / .1), 0 8px 18px -12px rgb(60 40 25 / .5);
  transition:transform .18s cubic-bezier(.23,1,.32,1), opacity .2s ease }
#places .pl-nav__b i{ width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--i-right) center/contain no-repeat; mask:var(--i-right) center/contain no-repeat }
#places .pl-nav__b--prev i{ -webkit-mask-image:var(--i-left); mask-image:var(--i-left) }
@media (hover:hover) and (pointer:fine){ #places .pl-nav__b:hover{ transform:scale(1.06) } }
#places .pl-nav__b:active{ transform:scale(.96) }
#places .pl-nav__b[disabled]{ opacity:.35; cursor:default; transform:none }
#places .pl-nav__b:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }

/* §46.1 · the arrow glyphs were declared on #failures only */
#places{ --i-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>"); --i-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") }

/* ══════════════════════════════════════════════════════════════════
   §47 · ONE CURRENT, NO SEAM
   Back to a single line. And a real fix under it: the loop moves the
   track by exactly half its width, but a flex gap sits only BETWEEN
   words, so half the track was half a gap short and the line hitched
   on every lap. Spacing now lives inside each word, the two halves
   are identical, and the lap closes without a jump. Edge to edge, no
   fade at the sides.
   ══════════════════════════════════════════════════════════════════ */
#places .kr--b, #places .kr--c{ display:none !important }
#places .kinds-rows{ -webkit-mask-image:none !important; mask-image:none !important; gap:0 }
#places .kr--a .kr__t{ gap:0 !important; animation-duration:58s !important }
#places .kr--a .kr__t span{ padding-right:clamp(28px,3vw,52px) }

/* ══════════════════════════════════════════════════════════════════
   §48 · THE LEGEND AS THE DOCUMENT ITSELF
   The section promised "the document the client actually received,
   with the name withheld" — and then showed no document: three text
   blocks on the page, the core line bigger than the section's own
   head, a sand accent nobody else uses. Now it is an object: one
   sheet of paper, lighter than the page, near-square corners because
   paper is not a card, grain, a warm shadow. The withheld name is
   shown as what it is — a redaction bar that draws itself when the
   sheet arrives. Inside, one clear order: whose document, the idea,
   why, what followed.
   ══════════════════════════════════════════════════════════════════ */
#legend .doc-sheet{
  display:flex !important; flex-direction:column; max-width:780px !important;
  margin:clamp(40px,5vw,72px) 0 0 !important;
  padding:clamp(34px,4.6vw,64px) clamp(28px,5vw,72px) clamp(38px,5vw,68px) !important;
  border-radius:6px !important; position:relative;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    #fdfbf7 !important;
  box-shadow:
    0 1px 0 rgb(255 255 255 / .9) inset,
    0 0 0 1px rgb(60 40 25 / .06),
    0 2px 4px rgb(60 40 25 / .05),
    0 24px 48px -20px rgb(60 40 25 / .28),
    0 60px 90px -50px rgb(60 40 25 / .35) !important }

/* 1 · whose document: the name, withheld */
#legend .doc-sheet__row:nth-child(2){
  display:flex !important; order:-1; align-items:center; gap:14px;
  padding-bottom:22px !important; margin-bottom:clamp(28px,3.4vw,44px) !important;
  box-shadow:inset 0 -1px 0 rgb(34 28 23 / .1) }
#legend .doc-sheet__row:nth-child(2)::before{
  content:"Project"; font-size:1.0625rem; font-weight:500; color:var(--fg-2) }
html[lang="ru"] #legend .doc-sheet__row:nth-child(2)::before{ content:"Проект" }
html[lang="es"] #legend .doc-sheet__row:nth-child(2)::before{ content:"Proyecto" }
html[lang="pt"] #legend .doc-sheet__row:nth-child(2)::before{ content:"Projeto" }
#legend .doc-sheet__row:nth-child(2) .doc-sheet__v{ margin:0; line-height:0 }
#legend .doc-sheet__held{ font-size:0 !important; display:inline-block; line-height:0 }
#legend .doc-sheet__held::after{
  content:""; display:inline-block; width:min(220px,46vw); height:22px; border-radius:2px;
  background:#1c1815; transform-origin:0 50%; transform:scaleX(0);
  transition:transform .9s cubic-bezier(.77,0,.175,1) .15s }
#legend .doc-sheet.is-in .doc-sheet__held::after{ transform:scaleX(1) }

/* 2 · the idea — the one sentence the sheet exists for, a step below the
   section head so the two display lines no longer fight */
#legend .doc-sheet__v--core{
  font-size:clamp(34px,3.7vw,54px) !important; line-height:1.06 !important; max-width:18ch !important;
  margin:0 !important; padding:0 !important; border:0 !important; animation:none !important }

/* 3 · why */
#legend .doc-sheet__row:nth-child(3){ margin-top:clamp(22px,2.6vw,32px) !important }
#legend .doc-sheet__v--story p{ font-size:1.1875rem !important; line-height:1.5 !important; max-width:46ch !important }

/* 4 · what followed — the site's one blue, not a second accent */
#legend .doc-sheet__row:nth-child(4){
  margin-top:clamp(30px,3.6vw,44px) !important; padding-top:26px !important;
  box-shadow:inset 0 1px 0 rgb(34 28 23 / .1) !important }
#legend .doc-sheet__l li::before{ background:var(--acc) !important }

@media (prefers-reduced-motion:reduce){
  #legend .doc-sheet__held::after{ transition:none; transform:scaleX(1) }
}

/* ══════════════════════════════════════════════════════════════════
   §49 · WHAT FOLLOWS FROM THE SENTENCE
   The sheet holds whose document it is, the idea and why. The four
   outcomes hang from it as tiles on one branching line.
   ══════════════════════════════════════════════════════════════════ */
#legend .doc-sheet{ margin-inline:auto !important; max-width:760px !important }
#legend .doc-sheet__row:nth-child(4){ display:none !important }
#legend .doc-sheet__row:nth-child(3){ margin-top:clamp(22px,2.6vw,30px) !important }

#legend .lg-tree{
  --line:rgb(34 28 23 / .22); --drop:34px;
  position:relative; max-width:1180px; margin:0 auto; padding-top:calc(var(--drop) * 2);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px) }
/* one line down from the sheet, then a line across the four */
#legend .lg-tree__stem{ position:absolute; left:50%; top:0; width:1px; height:var(--drop); background:var(--line); transform-origin:50% 0 }
#legend .lg-tree__bus{ position:absolute; top:var(--drop); left:12.5%; right:12.5%; height:1px; background:var(--line); transform-origin:50% 50% }
/* and one short line down into each tile, ending in a blue point */
#legend .lg-tile{
  position:relative; padding:clamp(20px,1.9vw,26px) clamp(18px,1.7vw,24px);
  border-radius:6px; background:#fdfbf7;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(60 40 25 / .06), 0 14px 30px -18px rgb(60 40 25 / .35) }
#legend .lg-tile::before{
  content:""; position:absolute; left:50%; top:calc(var(--drop) * -1); width:1px; height:var(--drop);
  background:var(--line); transform-origin:50% 0 }
#legend .lg-tile::after{
  content:""; position:absolute; left:50%; top:-4px; width:8px; height:8px; margin-left:-3.5px;
  border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px #f5f0e8 }
#legend .lg-tile p{ margin:0; font-size:1.0625rem; line-height:1.45; color:var(--fg); text-wrap:pretty }

/* ── the handing-over, only once the script has armed it ── */
#legend.lg-armed .doc-sheet{
  transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .5s ease; transform-origin:50% 100% }
#legend.lg-armed .doc-sheet:not(.is-in){ transform:translate3d(0,64px,0) rotate(-2.6deg); opacity:0 }
#legend.lg-armed .lg-tree__stem{ transform:scaleY(0); transition:transform .35s cubic-bezier(.23,1,.32,1) .75s }
#legend.lg-armed .lg-tree__bus { transform:scaleX(0); transition:transform .5s cubic-bezier(.23,1,.32,1) 1.05s }
#legend.lg-armed .lg-tile::before{ transform:scaleY(0); transition:transform .3s cubic-bezier(.23,1,.32,1) calc(1.4s + var(--i) * .08s) }
#legend.lg-armed .lg-tile::after { transform:scale(0);  transition:transform .35s cubic-bezier(.34,1.56,.64,1) calc(1.6s + var(--i) * .08s) }
#legend.lg-armed .lg-tile{
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease calc(1.55s + var(--i) * .08s), transform .6s cubic-bezier(.23,1,.32,1) calc(1.55s + var(--i) * .08s) }
#legend.lg-armed .lg-tree.is-in .lg-tree__stem{ transform:scaleY(1) }
#legend.lg-armed .lg-tree.is-in .lg-tree__bus{ transform:scaleX(1) }
#legend.lg-armed .lg-tree.is-in .lg-tile::before{ transform:scaleY(1) }
#legend.lg-armed .lg-tree.is-in .lg-tile::after{ transform:scale(1) }
#legend.lg-armed .lg-tree.is-in .lg-tile{ opacity:1; transform:none }

/* phone: one column, the branch becomes a rail down the left */
@media (width <= 820px){
  #legend .lg-tree{ grid-template-columns:1fr; padding-top:var(--drop); padding-left:22px }
  #legend .lg-tree__stem{ left:4px; height:100%; transform-origin:50% 0 }
  #legend .lg-tree__bus, #legend .lg-tile::before{ display:none }
  #legend .lg-tile::after{ left:-22px; top:50%; margin:-4px 0 0 0 }
}
/* §49.1 · the bar across must end exactly on the first and last tile centres:
   with a gap between four tiles the centre of the first sits at
   (width − 3·gap) / 8, not at a flat 12.5% */
#legend .lg-tree{ --g:clamp(14px,1.6vw,22px); gap:var(--g) }
#legend .lg-tree__bus{ left:calc((100% - 3 * var(--g)) / 8); right:calc((100% - 3 * var(--g)) / 8) }

/* ══════════════════════════════════════════════════════════════════
   §50 · YOUR PROJECT, IN ONE ENVELOPE
   The legend section used to be a paper sheet with a redaction bar and a
   tree of four tiles. Now it answers "what do I get for the money": an
   envelope marked "Your Project" opens, six paper things come out and
   settle in a pile, and the section ends as ordinary page UI, a list of
   what is inside beside the pile. Hovering a row lifts its thing out of
   the pile; hovering a thing marks its row. Built in enhance.js §50;
   the site's own nodes in #legend are only hidden.
   ══════════════════════════════════════════════════════════════════ */
#legend.pk-on{ max-width:none; padding:0 }
#legend.pk-on > :not(.pk){ display:none !important }
.pk{ --pk-fg:#221c17; --pk-fg2:#5c5249; --pk-acc:#3f6ea8; --pk-bg:#f5f0e8;
  --e-out:cubic-bezier(.23,1,.32,1); position:relative; height:420vh; color:var(--pk-fg) }
.pk-pin{ position:sticky; top:0; height:100vh; overflow:hidden; perspective:2200px }
.pk-copy{ position:absolute; left:max(64px,calc(50vw - 546px)); top:12vh; width:470px; z-index:5 }
.pk-step{ position:absolute; inset:0 auto auto 0; width:100%; opacity:0; transform:translateY(16px); filter:blur(6px); pointer-events:none;
  transition:opacity .45s ease, transform .6s var(--e-out), filter .45s ease }
.pk-step.on{ opacity:1; transform:none; filter:none; pointer-events:auto }
.pk-step h2{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(52px,5vw,72px);
  line-height:.98; letter-spacing:-.01em; max-width:10ch; margin:0 }
.pk-step h2 em{ font-style:italic; color:var(--pk-acc) }
.pk-step > p{ font-size:20px; line-height:1.5; color:var(--pk-fg2); margin:20px 0 0; max-width:24ch }
.pk-list{ list-style:none; margin:30px 0 0; padding:0; border-top:1px solid #221c171a }
.pk-list li{ display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid #221c171a; cursor:default;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--e-out), color .25s ease }
.pk-step.on .pk-list li{ opacity:1; transform:none; transition-delay:calc(var(--i) * 60ms + 150ms) }
.pk-list b{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:24px; line-height:1.1; transition:color .25s ease }
.pk-list span{ font-size:16px; line-height:1.4; color:var(--pk-fg2); transition:color .25s ease }
.pk-list li.hot b{ color:var(--pk-acc) }
.pk-list.has-hot li:not(.hot){ color:#221c1780 }
.pk-list.has-hot li:not(.hot) span{ color:#5c524980 }
.pk-price{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px }
.pk-price p{ margin:0; font-size:17px; color:var(--pk-fg2) }
.pk-price p b{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:30px; color:var(--pk-fg) }
.pk-cta{ display:inline-flex; padding:13px 22px; border-radius:99px; background:#221c17; color:#f5f0e8 !important; font-size:16px; text-decoration:none; white-space:nowrap;
  transition:transform .16s ease }
.pk-cta:active{ transform:scale(.97) }
.pk-cta:focus-visible{ outline:2px solid var(--pk-acc); outline-offset:3px }
.pk-desk{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d }
.pk .o{ position:absolute; left:0; top:0; transform-style:preserve-3d }
.pk .sh{ border-radius:8px; background:#3a2a1a; filter:blur(14px); pointer-events:none }
.pk .ghost{ cursor:pointer; background:transparent }
.pk .ghost.off{ pointer-events:none }
.pk .it{ pointer-events:none }
/* envelope */
.pk .env{ width:560px; height:360px; margin:-180px 0 0 -280px }
.pk .env .back{ position:absolute; inset:0; border-radius:8px; background:#1d375e }
.pk .env .inside{ position:absolute; inset:10px 10px auto; height:170px; background:linear-gradient(#152a48,#1d375e); border-radius:4px }
.pk .env .fold{ position:absolute; left:1px; right:1px; top:-4px; height:9px; background:#1b3459; border-radius:3px; transform:translateZ(.3px) }
.pk .pocket{ width:560px; height:360px; margin:-180px 0 0 -280px; pointer-events:none }
.pk .pocket i{ position:absolute; inset:0; border-radius:8px }
.pk .pocket .l{ background:#2a4a7c; clip-path:polygon(0 0,52% 56%,0 100%) }
.pk .pocket .r{ background:#27467a; clip-path:polygon(100% 0,48% 56%,100% 100%) }
.pk .pocket .b{ background:linear-gradient(0deg,#2f5287,#2c4c80); clip-path:polygon(0 100%,50% 44%,100% 100%) }
.pk .pocket .t{ position:absolute; left:0; right:0; bottom:44px; text-align:center; color:#f5f0e8; font-family:"Instrument Serif",Georgia,serif; font-size:38px; line-height:1 }
.pk .pocket .t small{ display:block; font-family:Geist,sans-serif; font-size:14px; color:#f5f0e8a0; margin-top:10px }
.pk .flap{ width:0; height:0; pointer-events:none }
.pk .hinge{ position:absolute; left:-280px; top:-3px; width:560px; height:213px; transform-origin:50% 0; transform-style:preserve-3d }
.pk .hinge .f, .pk .hinge .fi{ position:absolute; inset:0; backface-visibility:hidden }
.pk .hinge .f{ clip-path:polygon(0 0,100% 0,50% 100%); background:linear-gradient(180deg,#2d4e84,#335a93) }
.pk .hinge .fi{ clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(180deg,#17304f,#1e3a63); transform:rotateX(180deg) }
.pk .seal{ position:absolute; left:50%; top:150px; width:58px; height:58px; margin-left:-29px; border-radius:50%; backface-visibility:hidden; transform:translateZ(1px);
  background:radial-gradient(circle at 35% 30%,#fbf3e4,#e2cfae 70%); box-shadow:0 2px 3px #0004, inset 0 -2px 3px #0002;
  display:grid; place-items:center; font-family:"Instrument Serif",serif; font-size:28px; color:#2c4c80 }
/* six paper things */
.pk .proof{ width:330px; height:226px; margin:-113px 0 0 -165px; background:#fdfdfb; box-shadow:0 0 0 1px #221c1712; padding:22px }
.pk .proof .pg{ position:relative; width:100%; height:100%; overflow:hidden; background:#0e1623 }
.pk .proof .pg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pk .proof .pg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b1220e0,#0b122000 72%) }
.pk .proof .pg b{ position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:1; font-family:"Instrument Serif",serif; font-weight:400; font-size:24px; line-height:1; color:#f5f0e8 }
.pk .proof .pg b em{ color:#9cbdea }
.pk .proof .pg u{ position:absolute; left:14px; top:9px; z-index:1; text-decoration:none; font-size:7px; color:#f5f0e8b0 }
.pk .proof .cm{ position:absolute; width:12px; height:12px; border-color:#221c1788; border-style:solid; border-width:0 }
.pk .proof .cm.a{ left:8px; top:8px; border-left-width:1px; border-top-width:1px }
.pk .proof .cm.b{ right:8px; top:8px; border-right-width:1px; border-top-width:1px }
.pk .proof .cm.c{ left:8px; bottom:8px; border-left-width:1px; border-bottom-width:1px }
.pk .proof .cm.d{ right:8px; bottom:8px; border-right-width:1px; border-bottom-width:1px }
.pk .proof .note{ position:absolute; right:26px; bottom:4px; font-size:8px; color:#b0503a }
.pk .prints{ width:210px; height:160px; margin:-80px 0 0 -105px }
.pk .prints .pr{ position:absolute; inset:0; background:#fdfbf7; padding:7px 7px 22px; box-shadow:0 0 0 1px #221c1712, 0 4px 8px -4px #3a2a1a50 }
.pk .prints img{ width:100%; height:100%; object-fit:cover; display:block }
.pk .board{ width:270px; height:180px; margin:-90px 0 0 -135px; background:#fdfbf7; padding:14px; display:grid; grid-template-columns:1.1fr 1fr; gap:12px; box-shadow:0 0 0 1px #221c1712, 0 2px 0 #e6ddcf }
.pk .chips{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.pk .chips div{ border-radius:3px; background:#fff; box-shadow:0 0 0 1px #221c1712; display:flex; flex-direction:column; overflow:hidden }
.pk .chips i{ flex:1 } .pk .chips span{ font-size:7px; padding:3px 4px; color:#5c5249 }
.pk .spec{ display:flex; flex-direction:column; justify-content:space-between }
.pk .spec .a{ font-family:"Instrument Serif",serif; font-size:60px; line-height:.85 } .pk .spec .a em{ color:#3f6ea8 }
.pk .spec .g{ font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1 }
.pk .book{ width:180px; height:236px; margin:-118px 0 0 -90px; border-radius:0 5px 5px 0;
  background:#223a62 repeating-linear-gradient(45deg,#ffffff06 0 2px,#00000008 2px 4px);
  box-shadow:inset 6px 0 0 #1a2e50, 0 0 0 1px #0f1f3a, 2px 2px 0 #efe8dc, 3px 3px 0 #d9d0c1;
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px 18px; color:#e9dcc3 }
.pk .book b{ font-family:"Instrument Serif",serif; font-weight:400; font-size:28px; line-height:.95; text-shadow:0 -1px 0 #0006, 0 1px 0 #ffffff1a }
.pk .book span{ font-size:8px; letter-spacing:.18em; text-transform:uppercase; margin-top:10px; color:#e9dcc3a0 }
.pk .script{ width:220px; height:146px; margin:-73px 0 0 -110px }
.pk .script .c{ position:absolute; inset:0; border-radius:3px; padding:12px 14px; background:#fdfbf7 repeating-linear-gradient(180deg,transparent 0 18px,#3f6ea81a 18px 19px); background-position:0 34px; box-shadow:0 0 0 1px #221c1712 }
.pk .script .c:first-child{ transform:translate(8px,6px) rotate(3deg); background-color:#f6f1e7 }
.pk .script small{ font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#b0503a }
.pk .script p{ font-size:11px; line-height:19px; margin:8px 0 0; color:#221c17 }
.pk .line{ width:240px; height:150px; margin:-75px 0 0 -120px; background:#efe8dc; border-radius:3px; padding:18px 20px; display:flex; align-items:flex-end; box-shadow:0 0 0 1px #221c1712, inset 0 -2px 0 #e1d7c6 }
.pk .line b{ font-family:"Instrument Serif",serif; font-weight:400; font-size:25px; line-height:1.02; color:#223a62; text-shadow:0 1px 0 #fff, 0 -1px 0 #0000001a }
.pk .line b em{ color:#3f6ea8 }

/* narrow screens and reduced motion: no pin, no envelope — the finished pile above the list */
.pk.done{ height:100vh }
.pk.done .pk-step{ transition:none }
.pk.flow{ height:auto }
.pk.flow .pk-pin{ position:relative; height:auto; overflow:visible; padding:56px 20px 80px; display:flex; flex-direction:column }
.pk.flow .pk-stage{ order:-1; position:relative; width:100%; height:min(78vw,420px); margin:0 auto 8px; max-width:640px; perspective:2200px }
.pk.flow .pk-copy{ position:static; width:auto; max-width:560px; margin:0 auto }
.pk.flow .pk-step{ position:static; opacity:1; transform:none; filter:none; pointer-events:auto }
.pk.flow .pk-step[data-s="0"]{ display:none }
.pk.flow .pk-list li{ opacity:1; transform:none; grid-template-columns:1fr; gap:4px; cursor:pointer }
.pk.flow .pk-price{ flex-wrap:wrap }
@media (max-width:600px){ .pk-step h2{ font-size:44px } }

/* §51 · the jetty was a 370px sketch next to a 480px list — a postage stamp.
   It now reaches from the page margin to the list, the way a watercolour
   bleeds off a sheet, and sits level with the last question. */
@media (min-width:1024px){
  #answers .qa__side{ display:flex; flex-direction:column; overflow:visible; align-self:stretch }
  #answers .qa__sketch.wc{ --bl:min(96px, 50vw - 520px); width:calc(100% + var(--bl) + 40px) !important; max-width:none !important; height:auto;
    margin:auto 0 -6px calc(-1 * var(--bl)) !important; align-self:flex-start }
}
/* §52 · the jetty now has a real transparent background (cut by hand from the
   watercolour), so it no longer needs multiply to hide white paper, and
   white paper no longer shows where it leaves the column */
#answers .qa__sketch.wc.cut{ mix-blend-mode:normal !important; filter:none !important }

/* §53 · the first screen's words are on screen from the first paint.
   The film module that fades the chapters loads late; until it writes its own
   inline opacity, the first chapter used to sit at the stylesheet's 0 — the
   headline and its line waited ~14 s on a phone (Lighthouse LCP). While the
   chapter has no style attribute it is simply visible; the module takes over
   the moment it runs, so the scroll fade is unchanged. */
#film .chapters .ch:first-child:not([style]){ opacity:1 !important; transform:none !important }

/* ══════════════════════════════════════════════════════════════════
   §60 · THE SELLING BRIEF (RU)
   "Инструкция_правки_сайта_Brainmade.md", priorities 1–8, Russian page
   only. Everything is keyed on html:has(.bm-flag): enhance.js §60 drops
   that marker into <main> on /ru/, so the same rules also hold in the
   prerendered HTML. Design system unchanged: cream, Instrument Serif for
   what the place says, Geist for the hand, one blue accent; "mono" labels
   use the system monospace (no new font file).
   ══════════════════════════════════════════════════════════════════ */
html:has(.bm-flag){ --bm-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --bm-moss:#3f4d39; --bm-moss-2:#56674e }
.bm-mono{ font-family:var(--bm-mono,ui-monospace,monospace); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; font-weight:500 }

/* order of the page: hero · place vs features · how I think · case · what is inside · formats · manifesto · about · FAQ · final CTA */
html:has(.bm-flag) main#top{ display:flex; flex-direction:column }
html:has(.bm-flag) main#top > *{ width:100%; box-sizing:border-box }
html:has(.bm-flag) main#top > #vs{ order:1 }
html:has(.bm-flag) main#top > #think{ order:2 }
html:has(.bm-flag) main#top > #work{ order:3 }
html:has(.bm-flag) main#top > #legend{ order:4 }
html:has(.bm-flag) main#top > #formats{ order:5 }
html:has(.bm-flag) main#top > .manifest{ order:6 }
html:has(.bm-flag) main#top > #about{ order:7 }
html:has(.bm-flag) main#top > #answers{ order:8 }
html:has(.bm-flag) main#top > #talk{ order:9 }
html:has(.bm-flag) main#top > .bm-flag{ order:10 }
/* not in the brief's order: kept in the page, only hidden (one line to bring any back) */
html:has(.bm-flag) main#top > #failures,
html:has(.bm-flag) main#top > #places,
html:has(.bm-flag) main#top > #method,
html:has(.bm-flag) main#top > #compare,
html:has(.bm-flag) main#top > #bank,
html:has(.bm-flag) main#top > #range{ display:none !important }
/* less air: section padding cut by ~37% */
html:has(.bm-flag) main#top > section.wrap{ padding-top:68px !important; padding-bottom:68px !important }
html:has(.bm-flag) main#top > section.deep > .wrap{ padding-top:68px !important; padding-bottom:68px !important }
html:has(.bm-flag) main#top > section.bm{ padding-top:68px; padding-bottom:68px }

/* shared section frame for the new blocks */
.bm{ max-width:1220px; margin:0 auto; padding-inline:64px; box-sizing:border-box; color:#221c17 }
.bm h2{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:48px; line-height:1.04; letter-spacing:-.01em; margin:14px 0 0; max-width:18ch; text-wrap:balance }
.bm h2 em{ font-style:italic; color:#3f6ea8 }
.bm .bm-lead{ font-size:20px; line-height:1.5; color:#5c5249; margin:18px 0 0; max-width:52ch }
.bm .bm-mono{ color:#5c5249 }
@media (max-width:760px){ .bm{ padding-inline:20px } .bm h2{ font-size:36px } }

/* P1 · first screen */
html:has(.bm-flag) #film .chapters .ch:first-child > :not(.bm-hero){ display:none !important }
.bm-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; color:#f5f0e8; width:min(1040px, 92vw) !important; max-width:none !important; margin:0 auto !important; justify-self:center }
.bm-hero .bm-mono{ color:#f5f0e8cc !important; max-width:60ch !important; font-size:12.5px !important; margin:0 auto !important; line-height:1.5 !important }
.bm-hero .bm-note{ font-size:11.5px !important; margin:0 !important }
.bm-hero h1{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(40px,4.7vw,78px) !important; line-height:1.02 !important; letter-spacing:-.015em !important;
  max-width:none !important; margin:18px auto 0 !important; text-shadow:0 2px 30px #00000066; text-wrap:balance }
.bm-hero h1 em{ font-style:italic; color:#9cbdea }
.bm-hero p.bm-sub{ font-size:clamp(17px,1.4vw,21px) !important; line-height:1.45 !important; margin:20px auto 0 !important; max-width:46ch !important; color:#f5f0e8e6; text-shadow:0 1px 14px #00000080 }
.bm-hero .bm-acts{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:28px }
.bm-hero .bm-note{ color:#f5f0e8b3; font-size:11.5px }
.bm-hero .bm-more{ color:#f5f0e8; font-size:16px; text-decoration:none; border-bottom:1px solid #f5f0e866; padding-bottom:2px; margin-top:10px }
.bm-hero .bm-more:hover{ border-bottom-color:#f5f0e8 }
.bm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; font-size:16px; font-weight:500;
  text-decoration:none; white-space:nowrap; transition:transform .16s ease, background-color .2s ease }
.bm-btn:active{ transform:scale(.97) }
.bm-btn:focus-visible{ outline:2px solid #3f6ea8; outline-offset:3px }
.bm-btn--light{ background:#fbf8f3; color:#221c17 !important; box-shadow:0 0 0 1px #221c1714, 0 10px 30px -12px #00000070 }
.bm-btn--dark{ background:#221c17; color:#f5f0e8 !important }
.bm-btn--ghost{ background:transparent; color:inherit !important; box-shadow:inset 0 0 0 1px currentColor; opacity:.85 }

/* P2 · features vs place */
.bm-vs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px }
.bm-vs__col{ border-radius:20px; padding:34px 36px 32px; display:flex; flex-direction:column }
.bm-vs__col--all{ background:#e9e3d9; color:#6b625a }
.bm-vs__col--place{ background:var(--bm-moss); color:#f3efe6 }
.bm-vs__col .bm-mono{ color:inherit; opacity:.8 }
.bm-vs__list{ list-style:none; margin:22px 0 0; padding:0 }
.bm-vs__list li{ font-size:20px; line-height:1.35; padding:11px 0; border-bottom:1px solid #221c1712 }
.bm-vs__list li:last-child{ border-bottom:0 }
.bm-vs__line{ font-family:"Instrument Serif",Georgia,serif; font-size:clamp(30px,2.8vw,40px); line-height:1.08; margin:22px 0 0; color:#fbf8f3 }
.bm-vs__why{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px }
.bm-vs__why li{ font-size:17px; line-height:1.45; color:#f3efe6d9 }
.bm-vs__why b{ color:#fbf8f3; font-weight:500 }
.bm-vs__cap{ margin:auto 0 0; padding-top:26px; font-size:17px; line-height:1.45 }
.bm-vs__col--all .bm-vs__cap{ color:#221c17 }
.bm-vs__col--place .bm-vs__cap{ color:#fbf8f3 }
@media (max-width:860px){ .bm-vs__grid{ grid-template-columns:1fr } }

/* P3 · how I think */
.bm-think__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px }
.bm-step{ background:#fbf8f3; border-radius:20px; box-shadow:0 0 0 1px #221c1710; padding:14px; display:flex; flex-direction:column }
.bm-step__art{ border-radius:12px; background:#efe9df; min-height:260px; padding:18px; box-sizing:border-box; overflow:hidden; position:relative }
.bm-step h3{ font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:30px; line-height:1.05; margin:20px 10px 0 }
.bm-step p{ font-size:17px; line-height:1.45; color:#5c5249; margin:8px 10px 10px }
/* artefact 1: the market table */
.bm-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px #221c1712 }
.bm-tbl th{ font-family:var(--bm-mono,monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8d8983; text-align:left; font-weight:500; padding:8px 10px; border-bottom:1px solid #221c1714 }
.bm-tbl td{ padding:8px 10px; border-bottom:1px solid #221c170d; color:#221c17; vertical-align:top }
.bm-tbl tr:last-child td{ border-bottom:0 }
.bm-tbl td:first-child{ color:#8d8983; white-space:nowrap }
.bm-tbl mark{ background:#3f6ea826; color:inherit; padding:0 2px; border-radius:2px }
/* artefact 2: persona card */
.bm-persona{ background:#fff; border-radius:10px; box-shadow:0 0 0 1px #221c1712; padding:16px 18px; display:grid; grid-template-columns:88px 1fr; gap:16px }
.bm-persona__ph{ width:88px; height:110px; border-radius:6px; object-fit:cover }
.bm-persona b{ font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:22px; display:block; line-height:1.1 }
.bm-persona dl{ margin:10px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 10px; font-size:12.5px; line-height:1.4 }
.bm-persona dt{ font-family:var(--bm-mono,monospace); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#8d8983; padding-top:2px }
.bm-persona dd{ margin:0; color:#221c17 }
/* artefact 3: the positioning page */
.bm-doc{ background:#fff; border-radius:4px; box-shadow:0 0 0 1px #221c1712, 0 18px 30px -20px #3a2a1a55; padding:18px 22px; transform:rotate(-1deg); max-width:92%; margin:0 auto }
.bm-doc .bm-mono{ font-size:10px; color:#8d8983 }
.bm-doc__promise{ font-family:"Instrument Serif",Georgia,serif; font-size:26px; line-height:1.05; margin:10px 0 12px; color:#223a62 }
.bm-doc__row{ display:grid; grid-template-columns:86px 1fr; gap:10px; font-size:12.5px; line-height:1.45; padding:6px 0; border-top:1px solid #221c170d }
.bm-doc__row span:first-child{ font-family:var(--bm-mono,monospace); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#8d8983; padding-top:2px }
/* artefact 4: six frames */
.bm-frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.bm-frames img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; display:block }
@media (max-width:860px){ .bm-think__grid{ grid-template-columns:1fr } }

/* P4 · the case, told as a decision */
html:has(.bm-flag) #work > :not(.bm-case){ display:none !important }
html:has(.bm-flag) #work{ max-width:none; padding-inline:0 }
.bm-case__steps{ margin-top:36px; display:grid; gap:14px }
.bm-case__row{ display:grid; grid-template-columns:220px 1fr; gap:32px; padding:24px 0; border-top:1px solid #221c171a }
.bm-case__row .bm-mono{ padding-top:6px }
.bm-case__row p{ margin:0; font-size:20px; line-height:1.5; color:#221c17; max-width:56ch }
.bm-case__turn{ font-family:"Instrument Serif",Georgia,serif; font-size:clamp(30px,3vw,44px); line-height:1.1; margin:0 }
.bm-case__turn s{ color:#221c1766; text-decoration-thickness:2px }
.bm-case__turn em{ color:#3f6ea8 }
.bm-case__frames{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.bm-case__frames img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block }
.bm-case__got{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px }
.bm-case__got li{ font-size:18px; line-height:1.4; padding-left:18px; position:relative }
.bm-case__got li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:2px; background:#3f6ea8 }
@media (max-width:860px){ .bm-case__row{ grid-template-columns:1fr; gap:10px } .bm-case__frames{ grid-template-columns:repeat(2,1fr) } .bm-case__got{ grid-template-columns:1fr } }

/* the envelope stands in front of the prices as "what is inside"; its own price line is not needed there */
html:has(.bm-flag) #legend .pk-price{ display:none }

/* P5 · formats: a list of what you get, not a description */
html:has(.bm-flag) #formats .plan__d, html:has(.bm-flag) #formats .after{ display:none !important }
.bm-first{ margin:14px 0 0; font-size:13.5px; line-height:1.45; color:var(--fg-2,#c3b8aa) }
.bm-pages{ display:flex; gap:6px; margin:18px 0 6px; height:92px }
.bm-pages i{ flex:1; border-radius:4px; background:#f5f0e8; position:relative; overflow:hidden; box-shadow:0 6px 14px -8px #0008 }
.bm-pages i::before{ content:""; position:absolute; left:10%; right:10%; top:14%; height:10%; background:#221c1733; border-radius:2px }
.bm-pages i::after{ content:""; position:absolute; left:10%; right:22%; top:34%; bottom:14%;
  background:repeating-linear-gradient(180deg,#221c1722 0 3px,transparent 3px 9px) }
.bm-pages i:nth-child(2)::before{ background:#3f6ea8aa }
.bm-pages-cap{ font-size:13.5px; line-height:1.45; color:var(--fg-2,#c3b8aa); margin:6px 0 0 }

/* P6 · about */
html:has(.bm-flag) #about .main > p{ display:none }
.bm-about__how{ font-family:"Instrument Serif",Georgia,serif; font-size:clamp(26px,2.4vw,34px); line-height:1.15; margin:16px 0 0; max-width:24ch; color:#221c17 }
.bm-facts{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; max-width:620px }
.bm-facts li{ border-top:1px solid #221c171a; padding-top:12px }
.bm-facts b{ display:block; font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:36px; line-height:1; color:#3f6ea8 }
.bm-facts span{ display:block; font-size:16px; line-height:1.4; color:#5c5249; margin-top:6px }
.bm-links{ display:flex; gap:18px; margin-top:24px; flex-wrap:wrap }
.bm-links a{ font-size:16px; color:#221c17; text-decoration:none; border-bottom:1px solid #221c1740; padding-bottom:2px }
.bm-links a:hover{ border-bottom-color:#221c17 }

/* P7 · objections, same accordion look as the site's */
html:has(.bm-flag) #answers .acc:not(.bm-acc){ display:none !important }
.bm-acc .acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.23,1,.32,1) }
.bm-acc .acc__i[data-open="1"] .acc__a{ grid-template-rows:1fr }
.bm-acc .acc__a > div{ overflow:hidden }
.bm-acc .acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit }

/* P8 · final call */
html:has(.bm-flag) #talk .hd, html:has(.bm-flag) #talk .acts-row{ display:none !important }
.bm-close{ text-align:center; display:flex; flex-direction:column; align-items:center }
.bm-close h2{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(40px,4.6vw,64px); line-height:1.02; margin:0; color:#f8f4ee; max-width:16ch }
.bm-close p{ font-size:20px; line-height:1.5; color:#f8f4eecc; margin:18px 0 0; max-width:46ch }
.bm-close .bm-acts{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; justify-content:center }
.bm-close .bm-mono{ color:#f8f4ee99; margin-top:18px }

/* manifesto: the old first-screen line moves here */
.bm-slogan{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(40px,4.4vw,64px); line-height:1.02; color:#f8f4ee; margin:0 0 26px; max-width:18ch }
.bm-slogan em{ font-style:italic; color:#9cbdea }

/* §60.1 · site-wide paragraph rules were winning over the new blocks */
.bm h2{ max-width:24ch }
.bm-vs__col--place .bm-vs__line{ color:#fbf8f3 !important; font-size:clamp(30px,2.8vw,40px) !important; line-height:1.08 !important }
.bm-case__row p.bm-case__turn{ font-family:"Instrument Serif","Playfair Display",Georgia,serif !important; font-size:clamp(30px,3vw,44px) !important; line-height:1.12 !important; color:#221c17 !important }
.bm-slogan{ color:#f8f4ee !important; opacity:1 !important; text-shadow:0 2px 24px #00000080; transform:none !important; clip-path:none !important }
#formats .plan__p{ white-space:nowrap }
html:has(.bm-flag) #formats .plan__go{ white-space:nowrap; width:auto; max-width:100%; gap:10px }
html:has(.bm-flag) #formats .plan__go .bm-lbl{ white-space:nowrap }
/* the longer call in the nav: keep the bar on one line down to 1024 */
@media (max-width:1180px){ html:has(.bm-flag) .nav .menu{ gap:0 } html:has(.bm-flag) .nav .menu a{ padding-inline:9px !important; font-size:13px !important; white-space:nowrap } }

/* ══════════════════════════════════════════════════════════════════
   §70 · SQUARE METRES OR NIGHTS, IN ORDER (24.09)
   One section, read top to bottom:
     1 the head: square metres or nights, the job is the same
     2 the panorama: every kind of place in one landscape (17.09 image)
     3 the running line right under it, naming what the picture holds
     4 the verdict, set large: a missing legend costs the same in every
       genre (the build's own closing note, split by enhance.js §71)
   Then the manifesto photograph. Between the two photographs there is
   now only type: the line and the verdict. The six-card gallery and the
   still list stay off.
   ══════════════════════════════════════════════════════════════════ */
#places{ display:flex !important; flex-direction:column }
#places > *{ order:9; min-width:0 }
/* the running line is wider than any screen by design: in a flex column it
   must be told its width, or it stretches the page sideways */
#places > .kinds-rows{ width:100vw; max-width:100vw; align-self:center; margin-inline:0 !important }
#places > .places__shot{ width:100vw !important; max-width:100vw; align-self:center; left:auto !important; right:auto !important;
  margin-left:0 !important; margin-right:0 !important }
#places > .hd{ order:1 }
#places > .places__shot{ order:3; display:block !important; aspect-ratio:auto; background:none;
  opacity:1 !important; clip-path:none !important; margin-top:clamp(32px,3.6vw,52px) !important; margin-bottom:0 !important }
#places .places__shot picture{ display:block !important }
#places > .kinds-rows{ order:2; display:grid !important; margin-top:clamp(36px,4vw,56px) !important }
#places > .pl-verdict{ display:none !important }
#places > .places__kinds, #places > .places__said, #places > .places__note,
#places > .pl-gal, #places > .pl-nav{ display:none !important }

#places .pl-verdict{ padding-block:clamp(72px,9vw,136px) clamp(16px,3vw,40px); max-width:1000px; margin-inline:auto; display:grid; gap:22px; justify-items:center; text-align:center }
#places .pl-verdict__k{ margin:0; max-width:62ch; color:var(--fg-2); font-size:clamp(17px,1.3vw,19px); line-height:1.55 }
#places .pl-verdict__v{ margin:0; font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(36px,5vw,72px); line-height:1.02; letter-spacing:-.01em; color:var(--fg); text-wrap:balance }
#places .pl-verdict__v em{ font-style:italic; color:var(--acc) }

/* on a phone the 2.3:1 panorama is a thin strip; crop it to the valley and the falls */
@media (max-width:760px){
  #places .places__shot img{ aspect-ratio:5/4; object-fit:cover; object-position:52% 50% }
}
/* the "settle" scale ran on the panorama's box, which is full width: at 1.07 it
   pushed the page sideways. The picture settles inside its own frame instead. */
#places > .places__shot{ animation:none !important; transform:none !important; overflow:hidden }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #places > .places__shot img{ animation:settle linear both; animation-timeline:view(); animation-range:entry 0% cover 45% }
  }
}

/* ══════════════════════════════════════════════════════════════════
   §72 · THE PANORAMA HANDS OVER TO THE CASE (24.09)
   Places now reads: head → running line → panorama, edge to edge, and
   the section ends on the picture. Straight after it comes the case
   (the work section), then the manifesto
   photograph — so two photographs never meet. Order only, via flex on
   main; the Russian page keeps its own order from §60 (.bm-flag).
   ══════════════════════════════════════════════════════════════════ */
#places{ padding-bottom:0 !important }
html:not(:has(.bm-flag)) main#top{ display:flex; flex-direction:column }
html:not(:has(.bm-flag)) main#top > *{ order:20; width:100%; box-sizing:border-box; min-width:0 }
html:not(:has(.bm-flag)) main#top > #failures{ order:1 }
html:not(:has(.bm-flag)) main#top > #places{ order:2 }
html:not(:has(.bm-flag)) main#top > #method{ order:3 }
html:not(:has(.bm-flag)) main#top > #work{ order:4 }
html:not(:has(.bm-flag)) main#top > .manifest{ order:5 }
html:not(:has(.bm-flag)) main#top > #legend{ order:6 }
html:not(:has(.bm-flag)) main#top > #compare{ order:7 }
html:not(:has(.bm-flag)) main#top > #bank{ order:8 }
html:not(:has(.bm-flag)) main#top > #range{ order:9 }
html:not(:has(.bm-flag)) main#top > #formats{ order:10 }
html:not(:has(.bm-flag)) main#top > #answers{ order:11 }
html:not(:has(.bm-flag)) main#top > #about{ order:12 }
html:not(:has(.bm-flag)) main#top > #talk{ order:13 }

/* the "settle" scale ran on the panorama's full-width box: at 1.07 it pushed
   the page sideways. The picture settles inside its own frame instead. */
#places > .places__shot{ animation:none !important; transform:none !important; overflow:hidden }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #places > .places__shot img{ animation:settle linear both; animation-timeline:view(); animation-range:entry 0% cover 45% }
  }
}

/* the envelope's sheets fly past the right edge on a phone; clip them (clip keeps sticky working) */
#legend{ overflow-x:clip }

/* ══════════════════════════════════════════════════════════════════
   §73 · PRICING, TALLER AND READABLE AT A GLANCE (24.09) · enhance.js §73
   Each card reads top to bottom: what it is and who it is for → the
   price → a shared ten-week scale (solid = sure, hatched = up to) →
   what is in your hands at the end → how it is paid, as dots. Support
   is its own wide card with six months marked. No photographs.
   ══════════════════════════════════════════════════════════════════ */
/* (24.09) the site's own plans are shown again; §73 / §75 blocks are not built */
#formats .px{ margin-top:clamp(40px,5vw,72px) }
#formats .px-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.8vw,24px); align-items:stretch }
#formats .px-plan{ display:flex; flex-direction:column; gap:14px; padding:clamp(28px,2.6vw,40px) clamp(24px,2.4vw,34px);
  border-radius:22px; background:linear-gradient(180deg,#f8f4ee12,#f8f4ee06); box-shadow:inset 0 0 0 1px #f8f4ee24, 0 30px 60px -40px #000c }
#formats .px-plan--mid{ background:linear-gradient(180deg,#aac6e11f,#aac6e10a); box-shadow:inset 0 0 0 1.5px #aac6e170, 0 30px 70px -40px #000e }
#formats .px-plan h3{ margin:0; font-size:clamp(21px,1.7vw,25px); line-height:1.2; font-weight:600; letter-spacing:-.015em; color:var(--fg) }
#formats .px-for{ margin:0; color:var(--fg-2); font-size:16px; line-height:1.55; min-height:4.65em }
#formats .px-price{ margin:6px 0 4px; display:flex; flex-direction:column; gap:2px }
#formats .px-price b{ font-weight:650; font-size:clamp(40px,3.6vw,56px); line-height:1; letter-spacing:-.03em; color:var(--fg); white-space:nowrap }
#formats .px-unit{ font-size:14.5px; color:var(--fg-2) }
#formats .px-per{ font-size:15px; color:var(--fg-2); margin-top:4px }
#formats .px-lab{ margin:10px 0 0; padding-top:14px; border-top:1px solid #f8f4ee1f; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2) }
#formats .px-lab span{ text-transform:none; letter-spacing:0; font-size:17px; color:var(--fg); font-weight:560 }
#formats .px-when .px-lab{ margin-top:4px }
#formats .px-wk{ margin-top:12px }
#formats .px-wk__bar{ display:flex; height:10px; border-radius:99px; background:#f8f4ee14; overflow:hidden }
#formats .px-wk__bar i{ display:block; height:100%; background:var(--acc, #aac6e1) }
#formats .px-wk__bar i.px-wk__upto{ background:repeating-linear-gradient(135deg,#aac6e1a6 0 4px,#aac6e133 4px 8px) }
#formats .px-wk__ticks{ display:flex; justify-content:space-between; margin-top:6px; font-size:12.5px; color:var(--fg-3, #8d8983); font-variant-numeric:tabular-nums }
#formats .px-list{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; flex:1 }
#formats .px-list li{ position:relative; padding-left:26px; font-size:16.5px; line-height:1.45; color:var(--fg) }
#formats .px-list li::before{ content:""; position:absolute; left:0; top:.58em; width:12px; height:1.5px; background:var(--acc, #aac6e1) }
#formats .px-st{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--fg); margin-top:4px }
#formats .px-st__dots{ display:flex; gap:6px; flex:none }
#formats .px-st__dots i{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #f8f4ee4d }
#formats .px-st__dots i.on{ background:var(--acc, #aac6e1); box-shadow:none }
#formats .px-keep{ margin:6px 0 0; padding:14px 16px; border-radius:14px; background:#f8f4ee0d; font-size:15px; line-height:1.5; color:var(--fg-2) }
#formats .px-cta{ margin-top:18px; display:flex; align-items:center; justify-content:center; min-height:52px; padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:16px; text-decoration:none; color:var(--fg); box-shadow:inset 0 0 0 1.5px #f8f4ee4d; transition:background .2s, box-shadow .2s }
#formats .px-cta:hover{ box-shadow:inset 0 0 0 1.5px #f8f4eecc }
#formats .px-cta--solid{ background:#f9f5f0; color:#0e161e; box-shadow:0 10px 26px -14px #000c }
#formats .px-cta--solid:hover{ background:#fff }
#formats .px-note{ margin:28px 0 0; max-width:70ch; color:var(--fg-2); font-size:15.5px; line-height:1.55 }
#formats .px-sup{ margin-top:clamp(28px,3vw,44px); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) auto; gap:clamp(24px,3.4vw,56px);
  align-items:center; padding:clamp(28px,3vw,44px); border-radius:22px; box-shadow:inset 0 0 0 1px #f8f4ee24; background:#f8f4ee08 }
#formats .px-sup h3{ margin:0 0 10px; font-size:clamp(21px,1.7vw,25px); font-weight:600; color:var(--fg) }
#formats .px-sup .px-for{ min-height:0 }
#formats .px-sup .px-cta{ margin-top:0; padding-inline:28px; white-space:nowrap }
#formats .px-mo{ display:flex; gap:8px; margin-top:18px }
#formats .px-mo i{ flex:1; height:34px; border-radius:10px; background:#aac6e133; box-shadow:inset 0 0 0 1px #aac6e166; display:grid; place-items:center;
  font-style:normal; font-size:13px; color:var(--fg); font-variant-numeric:tabular-nums }
#formats .px-mo i.px-mo__more{ background:none; box-shadow:inset 0 0 0 1px #f8f4ee33; color:var(--fg-2) }
#formats .px-sup .px-lab{ border-top:0; padding-top:0; margin-top:10px }
@media (max-width:1000px){
  #formats .px-plans{ grid-template-columns:1fr; max-width:620px; margin-inline:auto }
  #formats .px-for{ min-height:0 }
  #formats .px-sup{ grid-template-columns:1fr; max-width:620px; margin-inline:auto }
  #formats .px-sup .px-cta{ white-space:normal }
}

/* ══════════════════════════════════════════════════════════════════
   §74 · TEN QUESTIONS WORTH ASKING (24.09) · enhance.js §74
   Same accordion look; the site's own five questions are hidden.
   ══════════════════════════════════════════════════════════════════ */
html:not(:has(.bm-flag)) #answers .qa > .acc:not(.fq){ display:none !important }
#answers .acc.fq .acc__a p{ font-size:16px; max-width:60ch }
/* §73.1 · the lists sit at the top, prices line up across cards, no small caps */
#formats .px-list{ align-content:start }
#formats .px-plan h3{ min-height:2.4em }
#formats .px-lab{ font-size:15px; letter-spacing:0; text-transform:none; font-weight:560; color:var(--fg-2) }
#formats .px-wk__ticks{ display:none }
#formats .px-plan .px-lab:has(+ .px-st){ margin-top:auto }
#formats .px-cta{ text-align:center; line-height:1.3 }

/* ══════════════════════════════════════════════════════════════════
   §73.2 · PRICING, LIGHTER (24.09 · "очень набитым")
   A card says five things: name, price, how long, what you get, the
   button. Payment stages, the "you keep the plan" promise and the
   proposal caveat are one quiet paragraph under the three cards.
   ══════════════════════════════════════════════════════════════════ */
#formats .px-plan{ gap:0; padding:clamp(32px,3vw,44px) clamp(26px,2.6vw,38px) }
#formats .px-plan h3{ min-height:2.5em; margin-bottom:clamp(20px,2.2vw,30px) }
#formats .px-price{ margin:0 0 clamp(22px,2.4vw,32px) }
#formats .px-when .px-lab{ border-top:1px solid #f8f4ee1f; padding-top:18px; margin:0 }
#formats .px-wk{ margin:12px 0 clamp(24px,2.6vw,34px) }
#formats .px-list{ flex:1; gap:12px; margin:0; padding-top:clamp(22px,2.4vw,30px); border-top:1px solid #f8f4ee1f }
#formats .px-cta{ margin-top:clamp(28px,3vw,40px) }
#formats .px-note{ max-width:74ch; margin:clamp(26px,3vw,40px) auto 0; text-align:center; font-size:16px; line-height:1.6 }
#formats .px-sup{ grid-template-columns:auto minmax(0,1fr) auto; padding:clamp(24px,2.6vw,36px) clamp(26px,3vw,44px) }
#formats .px-sup h3{ margin-bottom:6px }
#formats .px-sup .px-price{ margin:0 }
#formats .px-sup .px-for{ font-size:17px; color:var(--fg) }
#formats .px-mo{ margin-top:14px; max-width:420px }
#formats .px-mo i{ height:28px }
#formats .px-cta{ text-align:center; line-height:1.3 }
@media (max-width:1000px){ #formats .px-plan h3{ min-height:0 } #formats .px-sup{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════════
   §74.1 · QUESTIONS IN TWO COLUMNS, THE JETTY OVER THE HEAD (24.09)
   Ten questions in one column read as a scroll. Now: the watercolour
   jetty and the head centred as the opening of the section, the
   questions in two independent columns of five underneath.
   ══════════════════════════════════════════════════════════════════ */
html:not(:has(.bm-flag)) #answers .qa{ display:flex !important; flex-direction:column; align-items:center; gap:clamp(32px,4vw,56px) }
html:not(:has(.bm-flag)) #answers .qa__side{ display:flex !important; flex-direction:column-reverse; align-items:center; text-align:center;
  position:static !important; background:none !important; align-self:center !important; overflow:visible; gap:clamp(8px,1.4vw,18px) }
html:not(:has(.bm-flag)) #answers .qa__sketch.wc{ display:block !important; width:min(340px,70vw) !important; max-width:none !important;
  margin:0 !important; align-self:center !important }
html:not(:has(.bm-flag)) #answers .qa__side h2{ margin:0 }
#answers .fq{ width:100%; max-width:1120px; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(16px,2vw,28px); align-items:start }
#answers .fq-col{ display:grid; gap:inherit; row-gap:10px }
@media (max-width:860px){ #answers .fq{ grid-template-columns:1fr } #answers .fq-col + .fq-col{ margin-top:10px } }

/* ══════════════════════════════════════════════════════════════════
   §75 · PRICING AS A PRICE LIST (24.09) · enhance.js §75
   Wide, low rows instead of tall narrow cards. Columns: name + one line
   | what you get | price + time | button. One hairline between rows,
   the middle package on a soft panel, support as the last row.
   ══════════════════════════════════════════════════════════════════ */
/* (24.09) the site's own plans are shown again; §73 / §75 blocks are not built */
#formats .plist{ margin-top:clamp(40px,5vw,72px); display:grid }
#formats .pl-row{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.9fr) auto; gap:clamp(20px,3vw,48px);
  align-items:center; padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,36px); border-top:1px solid #f8f4ee1f }
#formats .pl-row:first-child{ border-top:0 }
#formats .pl-row--narrative{ border-radius:22px; border-top-color:transparent;
  background:linear-gradient(180deg,#aac6e117,#aac6e10a); box-shadow:inset 0 0 0 1px #aac6e14d }
#formats .pl-row--narrative + .pl-row{ border-top-color:transparent }
#formats .pl-row--ongoing{ margin-top:clamp(16px,2vw,28px) }
#formats .pl-row__name h3{ margin:0 0 8px; font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(26px,2.2vw,34px); line-height:1.08; letter-spacing:-.01em; color:var(--fg) }
#formats .pl-row__name p{ margin:0; color:var(--fg-2); font-size:16.5px; line-height:1.5; max-width:34ch }
#formats .pl-row__get{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
#formats .pl-row__get li{ position:relative; padding-left:22px; font-size:16px; line-height:1.45; color:var(--fg) }
#formats .pl-row__get li::before{ content:""; position:absolute; left:0; top:.66em; width:10px; height:1.5px; background:#aac6e1 }
#formats .pl-row__p{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; white-space:nowrap;
  font-weight:650; font-size:clamp(34px,3vw,46px); line-height:1; letter-spacing:-.03em; color:var(--fg) }
#formats .pl-row__p span{ font-weight:450; font-size:16px; letter-spacing:0; color:var(--fg-2) }
#formats .pl-row__meta{ margin:10px 0 0; font-size:16px; color:var(--fg-2) }
#formats .pl-row__cta{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 24px; border-radius:999px;
  white-space:nowrap; font-weight:600; font-size:15.5px; text-decoration:none; color:var(--fg); box-shadow:inset 0 0 0 1.5px #f8f4ee4d;
  transition:box-shadow .2s, background .2s, transform .15s }
#formats .pl-row__cta:hover{ box-shadow:inset 0 0 0 1.5px #f8f4eecc }
#formats .pl-row__cta:active{ transform:scale(.98) }
#formats .pl-row--narrative .pl-row__cta{ background:#f9f5f0; color:#0e161e; box-shadow:0 10px 26px -14px #000c }
#formats .pl-row--narrative .pl-row__cta:hover{ background:#fff }
#formats .pl-sum{ margin:clamp(28px,3vw,44px) auto 0; max-width:72ch; text-align:center; color:var(--fg-2); font-size:16px; line-height:1.6 }
@media (max-width:1100px){
  #formats .pl-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name price" "get get" "cta cta"; row-gap:20px }
  #formats .pl-row__name{ grid-area:name } #formats .pl-row__price{ grid-area:price; text-align:right }
  #formats .pl-row__p{ justify-content:flex-end }
  #formats .pl-row__get{ grid-area:get } #formats .pl-row__cta{ grid-area:cta; justify-self:start }
  #formats .pl-row__get:empty{ display:none }
}
@media (max-width:640px){
  #formats .pl-row{ grid-template-columns:1fr; grid-template-areas:"name" "price" "get" "cta"; padding-inline:18px }
  #formats .pl-row__price{ text-align:left } #formats .pl-row__p{ justify-content:flex-start }
  #formats .pl-row__cta{ justify-self:stretch; white-space:normal; text-align:center }
}

/* §74.2 · the head first, the jetty under it, then the questions */
html:not(:has(.bm-flag)) #answers .qa__side{ flex-direction:column !important; gap:clamp(16px,2vw,28px) !important }
html:not(:has(.bm-flag)) #answers .qa__sketch.wc{ width:min(280px,60vw) !important }

/* §75.1 · the four columns line up across every row; the small word over the
   price (fixed fee / from) always sits on its own line */
#formats .pl-row{ grid-template-columns:minmax(0,1.2fr) minmax(0,1.25fr) minmax(0,.85fr) 236px }
#formats .pl-row__cta{ width:100% }
#formats .pl-row__p{ display:block }
#formats .pl-row__p span{ display:block; margin-bottom:8px }
@media (max-width:1100px){ #formats .pl-row{ grid-template-columns:minmax(0,1fr) auto } #formats .pl-row__cta{ width:auto } }
@media (max-width:640px){ #formats .pl-row{ grid-template-columns:1fr } #formats .pl-row__cta{ width:100% } }
#formats .pl-row{ grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,.8fr) 236px }
@media (max-width:1100px){ #formats .pl-row{ grid-template-columns:minmax(0,1fr) auto } }
@media (max-width:640px){ #formats .pl-row{ grid-template-columns:1fr } }
#formats .pl-row{ grid-template-columns:minmax(0,1.25fr) minmax(0,1.4fr) minmax(0,.8fr) 216px }
#formats .pl-row__name h3{ font-size:clamp(26px,2vw,31px) }
@media (max-width:1100px){ #formats .pl-row{ grid-template-columns:minmax(0,1fr) auto } }
@media (max-width:640px){ #formats .pl-row{ grid-template-columns:1fr } }

/* §76 (slide from below) removed 24.09: the film plays to its own end again */

/* ══════════════════════════════════════════════════════════════════
   §77 · THE THREE CARDS, FINISHED (24.09)
   Same cards, same words, same cursor tilt (the build's own rotateX/Y).
   What changes is the making: each card sits in a thin tray (a double
   bezel: outer ring + inner highlight), more air and a real hierarchy
   inside (serif name · big price · terms · line · list · button at the
   foot), the chosen card lit from above in the page's sand. The support
   row stops being a line under a hairline and becomes the fourth card,
   wide, under the three. Colours of buttons and badge are untouched.
   ══════════════════════════════════════════════════════════════════ */
html body #formats .plans{ gap:clamp(20px,2.2vw,32px); margin-top:clamp(48px,5vw,80px) }
html body #formats .plan{
  border:0; border-radius:28px; padding:clamp(34px,3vw,46px) clamp(28px,2.6vw,40px) clamp(28px,2.6vw,36px);
  min-height:clamp(560px,46vw,640px);
  background:linear-gradient(180deg,#f8f4ee12 0%,#f8f4ee06 55%,#f8f4ee03 100%);
  box-shadow:
    0 0 0 7px #f8f4ee07,              /* the tray */
    0 0 0 8px #f8f4ee14,              /* its edge */
    inset 0 1px 0 #f8f4ee30,          /* top light on the glass */
    inset 0 0 0 1px #f8f4ee17,
    0 50px 90px -50px #000000e0;
  transition:box-shadow .5s cubic-bezier(.32,.72,0,1), background .5s cubic-bezier(.32,.72,0,1) }
@media (hover:hover) and (pointer:fine){
  html body #formats .plan:hover{ box-shadow:0 0 0 7px #f8f4ee0b, 0 0 0 8px #f8f4ee24, inset 0 1px 0 #f8f4ee3d, inset 0 0 0 1px #f8f4ee24, 0 60px 100px -50px #000000f0 }
}
html body #formats .plan--pick{
  background:
    radial-gradient(120% 55% at 50% 0%, #d4b08c2e 0%, #d4b08c00 62%),
    linear-gradient(180deg,#f8f4ee16 0%,#f8f4ee07 60%,#f8f4ee04 100%);
  box-shadow:0 0 0 7px #d4b08c0d, 0 0 0 8px #d4b08c40, inset 0 1px 0 #f8f4ee3d, inset 0 0 0 1px #d4b08c33, 0 60px 110px -50px #000000f2 }

/* inside: one clear order */
html body #formats .plan .plan__k{
  font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(28px,2.3vw,34px);
  line-height:1.05; letter-spacing:-.01em; color:#f9f5f0; padding-right:0; margin:0 0 clamp(26px,2.6vw,36px); min-height:2.1em }
html body #formats .plan .plan__badge{ position:static; display:table; margin:0 0 12px; font-family:var(--font, "Geist", sans-serif);
  font-size:13px; letter-spacing:.02em; padding:5px 12px; border-radius:999px; text-align:left; max-width:none }
html body #formats .plan--pick .plan__k{ display:flex; flex-direction:column-reverse; align-items:flex-start }
html body #formats .plan .plan__p{ font-size:clamp(46px,4.2vw,64px); line-height:.95; letter-spacing:-.04em; font-weight:600; margin:0 }
html body #formats .plan .plan__t{ margin:12px 0 0; font-size:15.5px; color:#f8f4ee8c }
html body #formats .plan .plan__d{ margin:clamp(26px,2.6vw,34px) 0 0; padding-top:clamp(22px,2.2vw,28px); font-size:17px; line-height:1.5; color:#f8f4eed1;
  border-top:1px solid; border-image:linear-gradient(90deg,#f8f4ee33,#f8f4ee00) 1 }
html body #formats .plan .plan__l{ margin:22px 0 clamp(28px,3vw,40px); display:grid; gap:12px }
html body #formats .plan .plan__l li{ font-size:16px; line-height:1.45; color:#f8f4eeb8 }
html body #formats .plan .plan__go{ margin-top:auto; width:100%; min-height:54px; justify-content:center }

/* the support card: wide, under the three, same material */
html body #formats .after{
  margin-top:clamp(28px,3vw,44px); padding:clamp(30px,3vw,44px) clamp(28px,3.2vw,48px); border:0; border-radius:28px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(20px,4vw,72px); align-items:center;
  background:linear-gradient(90deg,#f8f4ee0e,#f8f4ee04);
  box-shadow:0 0 0 7px #f8f4ee07, 0 0 0 8px #f8f4ee14, inset 0 1px 0 #f8f4ee2a, inset 0 0 0 1px #f8f4ee14 }
html body #formats .after > .tag{ display:none }
html body #formats .after__row{ margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:14px }
html body #formats .after__k{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(28px,2.3vw,34px); line-height:1.05; letter-spacing:-.01em }
html body #formats .after__p{ flex-direction:column; align-items:flex-start; gap:8px; font-size:clamp(34px,3vw,44px); letter-spacing:-.035em }
html body #formats .after__p b{ font-weight:450; font-size:15.5px; letter-spacing:0; color:#f8f4ee8c }
html body #formats .after__d{ margin:0; font-size:17px; line-height:1.6; color:#f8f4eed1; max-width:52ch }

@media (max-width:900px){
  html body #formats .plan{ min-height:0 }
  html body #formats .plan .plan__k{ min-height:0 }
  html body #formats .after{ grid-template-columns:1fr }
}
/* §77.1 · the price never breaks and never spills (size set by enhance.js §77);
   on a phone the single column may not grow past the screen */
html body #formats .plan .plan__p{ white-space:nowrap; overflow:visible }
@media (max-width:900px){
  html body #formats .plans{ grid-template-columns:minmax(0,1fr) !important; padding-inline:8px }
}
html body #formats .plans.pp-wrap .plan .plan__p{ white-space:normal; line-height:1.02 }

/* ══════════════════════════════════════════════════════════════════
   §78 · THE CARDS, SECOND PASS (24.09)
   1 flicker: the tilt runs in preserve-3d, so the buttons were painted
     inside the 3D context and shimmered on hover. The card still tilts
     as one plate; its contents are flat.
   2 the chip over the name goes; the lit card says why (enhance.js §78).
   3 "Everything in the audit, and" / "Everything in the narrative, and"
     are shown again over the lists: the bigger plans include the smaller.
   ══════════════════════════════════════════════════════════════════ */
html body #formats .plan{ transform-style:flat !important; backface-visibility:hidden }
html body #formats .plan .plan__go, html body #formats .plan .plan__go *{ backface-visibility:hidden; -webkit-font-smoothing:antialiased }
html body #formats .plan:hover{ transition:none }

html body #formats .plan .plan__badge{ display:none !important }
html body #formats .plan--pick .plan__k{ display:block }
html body #formats .plan .pick-why{ margin:0 0 18px; padding:14px 16px; border-radius:16px; background:#d4b08c14;
  box-shadow:inset 0 0 0 1px #d4b08c33; font-size:15px; line-height:1.5; color:#f8f4eec7 }
html body #formats .plan .pick-why b{ font-weight:600; color:#e6cdb2 }
html body #formats .plan--pick .plan__l{ margin-bottom:22px }
html body #formats .plan--pick .pick-why{ margin-top:auto }

html:not(:has(.bm-flag)) #formats .plan:not(:first-child) .plan__h{
  display:flex !important; align-items:center; gap:10px; margin:22px 0 0; font-size:15.5px; font-weight:560; color:#e6cdb2 }
html:not(:has(.bm-flag)) #formats .plan:not(:first-child) .plan__h::before{
  content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:none;
  font-size:15px; line-height:1; color:#221c17; background:#d4b08c }
html:not(:has(.bm-flag)) #formats .plan:not(:first-child) .plan__l{ margin-top:14px }
html body #formats .plan .plan__h{ border:0 !important; padding-top:0 !important }

/* §78.1 · no plus marker before "Everything in the audit, and" */
html:not(:has(.bm-flag)) #formats .plan:not(:first-child) .plan__h::before{ content:none !important; display:none !important }

/* ══════════════════════════════════════════════════════════════════
   §79 · ONCE THE BOOK HAS OPENED, THE FILM IS BEHIND YOU (24.09)
   enhance.js §79 adds html.film-done: the film is one screen tall and
   holds only the "When developments sound the same" page.
   ══════════════════════════════════════════════════════════════════ */
html.film-done #film{ height:100dvh !important; clip-path:none !important }
html.film-done #film .film__stage{ position:relative !important }
html.film-done #film .chapters, html.film-done #film .film__v, html.film-done #film .film__poster,
html.film-done #film .hero-loop, html.film-done #film .scrim, html.film-done #film .scroll-hint{ visibility:hidden !important }
html.film-done #film #situation.film__page{ opacity:1 !important; transform:none !important }

/* §78.2 · the reason line in the middle card is gone too (24.09) */
html body #formats .plan .pick-why{ display:none !important }
html body #formats .plan--pick .plan__l{ margin-bottom:clamp(28px,3vw,40px) }

/* ══════════════════════════════════════════════════════════════════
   §80 · QUESTIONS: ONE COMPOSITION (24.09)
   The head on the left, the jetty on the right on the same line, both
   sitting on one baseline, and the two columns of questions under them
   at exactly the same width. Reading order stays: head, picture, list.
   ══════════════════════════════════════════════════════════════════ */
html:not(:has(.bm-flag)) #answers .qa{ align-items:stretch !important; max-width:1120px; margin-inline:auto; gap:clamp(28px,3.4vw,48px) !important }
html:not(:has(.bm-flag)) #answers .qa__side{ flex-direction:row !important; justify-content:space-between; align-items:flex-end !important;
  text-align:left !important; width:100%; gap:clamp(24px,4vw,64px) !important; align-self:stretch !important }
html:not(:has(.bm-flag)) #answers .qa__side h2{ font-size:clamp(40px,4.4vw,64px) !important; line-height:1 !important; max-width:12ch }
html:not(:has(.bm-flag)) #answers .qa__sketch.wc{ width:min(400px,36vw) !important; margin:0 0 -8px !important; flex:none }
html:not(:has(.bm-flag)) #answers .fq{ max-width:none }
@media (max-width:760px){
  html:not(:has(.bm-flag)) #answers .qa__side{ flex-direction:column !important; align-items:flex-start !important; gap:18px !important }
  html:not(:has(.bm-flag)) #answers .qa__sketch.wc{ width:min(300px,78vw) !important; align-self:flex-end !important }
}

/* §81 · support card: bright title and price like the plans, and a button */
html body #formats .after__k, html body #formats .after__p{ color:#f9f5f0 !important }
html body #formats .after{ grid-template-areas:"row d" "row go"; row-gap:22px }
html body #formats .after__row{ grid-area:row }
html body #formats .after__d{ grid-area:d; align-self:end }
html body #formats .after-go{ grid-area:go; justify-self:start; align-self:start; display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 28px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; color:#f9f5f0;
  background:#f5f0e814; box-shadow:inset 0 1px 0 #f5f0e82e, inset 0 0 0 1px #f5f0e833; transition:background .2s, box-shadow .2s }
html body #formats .after-go:hover{ background:#f5f0e824; box-shadow:inset 0 1px 0 #f5f0e847, inset 0 0 0 1px #f5f0e847 }
html body #formats .after-go:active{ transform:scale(.97) }
@media (max-width:900px){
  html body #formats .after{ grid-template-areas:"row" "d" "go" }
  html body #formats .after-go{ justify-self:stretch }
}
/* §80.1 · the head reads in two lines, as the site set it */
html:not(:has(.bm-flag)) #answers .qa__side h2{ max-width:none !important }
html body #formats .after__p{ line-height:1.02 }
html body #formats .after-go{ padding:12px 26px; text-align:center; line-height:1.3 }
@media (max-width:900px){ html body #formats .after__p{ font-size:clamp(30px,8.4vw,38px) } }

/* ══════════════════════════════════════════════════════════════════
   §82 · THREE FINDINGS AS TYPE (24.09)
   The case opens on a photograph; the watercolour plan and pavilion
   here put a second material into the same section and split it into
   loose halves. They go. The three findings become three columns of
   type across the full width (the finding set large, what it means
   under it), and the reposition line is set centred, large, as the
   one sentence the findings add up to. No numbers, no pins, no motion.
   ══════════════════════════════════════════════════════════════════ */
html body #work .reading__grid{ display:block !important; margin-top:clamp(40px,4.4vw,64px) }
html body #work .survey, html body #work .verdict__draw, html body #work .find__n{ display:none !important }
html body #work .finds{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px);
  border-top:1px solid var(--line, #0e161e24); max-width:none }
html body #work .find{ all:unset; display:flex !important; flex-direction:column; gap:14px; padding-top:clamp(24px,2.6vw,34px); cursor:default }
html body #work .find__t{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(26px,2.3vw,34px);
  line-height:1.1; letter-spacing:-.005em; color:var(--fg); text-wrap:balance }
html body #work .find__c{ font-size:17px; line-height:1.55; color:var(--fg-2); opacity:1 !important }

html body #work .verdict{ display:block !important; text-align:center; border:0 !important; padding:0 !important;
  margin:clamp(88px,10vw,152px) auto 0 !important; max-width:1000px; background:none !important }
html body #work .verdict > div{ display:block !important; padding:0 !important; border:0 !important; background:none !important }
html body #work .verdict .tag{ display:none !important }
html body #work .verdict__q{ margin:0 auto !important; max-width:20ch; font-family:"Instrument Serif","Playfair Display",Georgia,serif !important;
  font-weight:400 !important; font-size:clamp(42px,5.4vw,80px) !important; line-height:1.04 !important; letter-spacing:-.01em !important;
  color:var(--fg) !important; text-wrap:balance }
html body #work .verdict__q s{ color:var(--fg-3, #7b7c7b); text-decoration-thickness:2px; text-decoration-color:currentColor; font-weight:400 }
html body #work .verdict__q b{ font-weight:400; font-style:italic; color:var(--acc, #55718c) }
html body #work .verdict__note{ margin:clamp(24px,2.6vw,36px) auto 0 !important; max-width:58ch; font-size:18px !important; line-height:1.6 !important;
  color:var(--fg-2) !important; text-align:center }
html body #work .verdict__note b{ font-weight:600; color:var(--fg) }
@media (max-width:860px){
  html body #work .finds{ grid-template-columns:1fr; gap:0 }
  html body #work .find{ padding-block:22px; border-bottom:1px solid var(--line, #0e161e24) }
}
/* §82.1 · what the client left with follows the line, centred, not stranded on the left */
html body #work > .mt-s7{ margin:clamp(20px,2vw,28px) auto 0 !important; max-width:58ch; text-align:center }
html body #work > .mt-s7 p{ margin-inline:auto; font-size:18px; line-height:1.6; color:var(--fg-2) }
html body #work .verdict p.verdict__note, html body #work > .mt-s7 p{ font-size:17.5px !important; line-height:1.6 !important; color:var(--fg-2) !important }

/* ══════════════════════════════════════════════════════════════════
   §83 · THREE FINDINGS ADD UP TO ONE LINE (24.09) · enhance.js §83
   Replaces the layout of §82 (text columns + floating centred line).
   ══════════════════════════════════════════════════════════════════ */
html body #work .finds{ border-top:0 !important; gap:clamp(16px,1.8vw,24px) !important }
html body #work .find{ padding:clamp(26px,2.4vw,34px) clamp(24px,2.2vw,30px) !important; border-radius:22px;
  background:#fcf9f4; box-shadow:0 1px 0 #ffffff inset, 0 0 0 1px #0e161e14, 0 24px 48px -32px #3a26144d;
  justify-content:flex-start; min-height:clamp(200px,15vw,230px) }
html body #work .find__t{ font-size:clamp(25px,2.1vw,31px) !important }
html body #work .find__c{ margin-top:auto; padding-top:16px; border-top:1px solid #0e161e14 }

/* the three lines that meet */
html body #work .fx-join{ display:block; width:100%; height:clamp(80px,8vw,120px); overflow:visible }
html body #work .fx-join path{ fill:none; stroke:#55718c; stroke-width:1.5; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s cubic-bezier(.32,.72,0,1) }
html body #work .fx-join.in path{ stroke-dashoffset:0 }
html body #work .fx-join.in path:nth-child(2){ transition-delay:.12s }
html body #work .fx-join.in path:nth-child(3){ transition-delay:.06s }

/* where they meet: the reposition, as the one dark card */
html body #work .verdict{ margin:0 auto !important; max-width:none; padding:clamp(44px,5vw,76px) clamp(28px,5vw,88px) !important;
  border-radius:28px !important; background:#16202b !important;
  box-shadow:0 0 0 7px #16202b0f, 0 40px 80px -44px #0e161ecc !important; text-align:center }
html body #work .verdict__q{ color:#f8f4ee !important; max-width:22ch }
html body #work .verdict__q s{ color:#f8f4ee73 !important }
html body #work .verdict__q b{ color:#aac6e1 !important }
html body #work .verdict p.verdict__note{ color:#f8f4eebd !important; margin-top:clamp(20px,2.2vw,30px) !important }
html body #work .verdict__note b{ color:#f8f4ee !important }
html body #work > .mt-s7{ margin-top:clamp(36px,4vw,56px) !important }

@media (max-width:860px){
  html body #work .finds{ gap:12px !important }
  html body #work .find{ border-bottom:0 !important; min-height:0 }
  html body #work .fx-join{ height:56px }
  html body #work .fx-join path:nth-child(1), html body #work .fx-join path:nth-child(3){ display:none }
}
/* §83.1 · converging lines rejected (24.09) */
html body #work .fx-join{ display:none !important }

/* ══════════════════════════════════════════════════════════════════
   §84 · THREE FINDINGS AS A BENTO (24.09) · enhance.js §84
   Replaces §82/§83. Grid: the first finding tall on the left, the other
   two on the right, the reposition wide and dark under those two.
   ══════════════════════════════════════════════════════════════════ */
html:not(:has(.bm-flag)) #work .reading__grid, html:not(:has(.bm-flag)) #work .verdict{ display:none !important }
#work .fb{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto;
  gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,4.4vw,64px) }
#work .fb-c{ position:relative; display:flex; flex-direction:column; border-radius:26px; padding:clamp(26px,2.6vw,38px);
  background:#fcf9f4; box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #0e161e12, 0 26px 50px -34px #3a261452; overflow:hidden }
#work .fb-c--big{ grid-row:1 / span 2; justify-content:flex-end; min-height:clamp(420px,38vw,560px);
  background:linear-gradient(180deg,#f3ede4 0%,#fcf9f4 60%) }
#work .fb-c--line{ grid-column:2 / span 2; background:#16202b; box-shadow:0 30px 60px -36px #0e161ecc; justify-content:center }
#work .fb-a{ margin:0 0 auto; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; color:#55718c }
#work .fb-n{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(64px,6vw,96px); line-height:.9; letter-spacing:-.02em;
  color:#0e161e; font-variant-numeric:tabular-nums }
#work .fb-c--big .fb-n{ font-size:clamp(120px,13vw,200px); line-height:.82 }
#work .fb-u{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-style:italic; font-size:clamp(24px,2.2vw,32px); color:#55718c }
#work .fb-c--big .fb-a{ margin-bottom:auto }
#work .fb-t{ margin:clamp(22px,2.4vw,32px) 0 0; font-size:clamp(18px,1.4vw,20px); line-height:1.35; font-weight:560; color:#0e161e; max-width:30ch }
#work .fb-m{ margin:8px 0 0; font-size:16.5px; line-height:1.5; color:#4c5763; max-width:34ch }
#work .fb-q{ margin:0; font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(36px,3.6vw,56px); line-height:1.05;
  letter-spacing:-.01em; color:#f8f4ee; text-wrap:balance }
#work .fb-old{ position:relative; color:#f8f4ee8c; white-space:nowrap }
#work .fb-old::after{ content:""; position:absolute; left:-2px; right:-2px; top:55%; height:2px; background:#aac6e1; transform-origin:left center; transform:scaleX(1) }
#work .fb-new{ font-style:italic; color:#aac6e1 }
#work .fb-note{ margin:clamp(18px,2vw,26px) 0 0; font-size:16.5px; line-height:1.55; color:#f8f4eeb3; max-width:60ch }

/* motion: the blocks rise in turn, the old phrase is struck, the new one comes in */
@media (prefers-reduced-motion: no-preference){
  #work .fb:not(.in-done) .fb-c{ opacity:0; transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms), transform .9s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms) }
  #work .fb.in .fb-c{ opacity:1; transform:none }
  #work .fb:not(.in-done) .fb-old::after{ transform:scaleX(0); transition:transform .7s cubic-bezier(.65,0,.35,1) .95s }
  #work .fb.in .fb-old::after{ transform:scaleX(1) }
  #work .fb:not(.in-done) .fb-new, #work .fb:not(.in-done) .fb-note{ opacity:0; transform:translateY(8px); transition:opacity .7s ease 1.55s, transform .8s cubic-bezier(.32,.72,0,1) 1.55s }
  #work .fb.in .fb-new, #work .fb.in .fb-note{ opacity:1; transform:none }
  #work .fb-new{ display:inline-block }
}
@media (max-width:900px){
  #work .fb{ grid-template-columns:1fr 1fr }
  #work .fb-c--big{ grid-column:1 / span 2; grid-row:auto; min-height:0 }
  #work .fb-c--line{ grid-column:1 / span 2 }
  #work .fb-c--big .fb-a{ margin-bottom:24px }
}
@media (max-width:560px){
  #work .fb{ grid-template-columns:1fr }
  #work .fb-c--big, #work .fb-c--line{ grid-column:auto }
  #work .fb-c--big .fb-n{ font-size:120px }
}
/* §84.1 · anchors are words now, not numbers: italic serif in the site's blue, sized to fit */
#work .fb-n{ font-style:italic; color:#55718c; font-size:clamp(46px,4.2vw,64px); line-height:.95; letter-spacing:-.015em; font-variant-numeric:normal }
#work .fb-c--big .fb-n{ font-size:clamp(64px,6.4vw,96px); line-height:.92 }
@media (max-width:560px){ #work .fb-c--big .fb-n{ font-size:64px } }

/* ══════════════════════════════════════════════════════════════════
   §85 · THE FINDINGS OPEN UNDER THE CURSOR (24.09)
   Three findings in one row, gathered at rest (the word and the
   finding); the one under the cursor widens and shows what it means,
   the others narrow to their word. Fixed height, so nothing below moves.
   Keyboard focus does the same. Without hover (touch) all are open.
   ══════════════════════════════════════════════════════════════════ */
#work .fb{ display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:clamp(14px,1.6vw,22px) }
#work .fb-row{ display:flex; gap:clamp(14px,1.6vw,22px) }
#work .fb-row .fb-c{ flex:1 1 0; min-width:0; min-height:0; grid-row:auto !important; justify-content:flex-start;
  background:#fcf9f4; outline:none;
  transition:flex-grow .75s cubic-bezier(.32,.72,0,1), background-color .45s ease, box-shadow .45s ease, opacity .8s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms), transform .9s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms) }
#work .fb-row .fb-c--big{ background:#fcf9f4 }
#work .fb-row .fb-c .fb-n, #work .fb-row .fb-c--big .fb-n{ font-size:clamp(44px,4vw,60px); line-height:1; white-space:nowrap }
#work .fb-row .fb-c .fb-a{ margin:0 0 auto }
#work .fb-c--line{ grid-column:auto !important }
/* the text keeps its own width so it is revealed, not re-wrapped, as a panel grows */
#work .fb-row .fb-t, #work .fb-row .fb-m{ width:min(34ch, 100%) }

@media (hover:hover) and (pointer:fine) and (min-width:901px){
  #work .fb-row{ height:clamp(300px,25vw,360px) }
  #work .fb-row .fb-c{ overflow:hidden }
  #work .fb-row .fb-t, #work .fb-row .fb-m{ width:max(300px, min(34ch, 30vw)) }
  #work .fb-row .fb-m{ opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .5s cubic-bezier(.32,.72,0,1) }
  #work .fb-row:hover .fb-c, #work .fb-row:focus-within .fb-c{ flex-grow:.72 }
  #work .fb-row .fb-c:hover, #work .fb-row .fb-c:focus-visible{ flex-grow:2.3; background:#f3ece2;
    box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #55718c33, 0 30px 60px -34px #3a26145e }
  #work .fb-row .fb-c:hover .fb-m, #work .fb-row .fb-c:focus-visible .fb-m{ opacity:1; transform:none; transition-delay:.18s }
  #work .fb-row:hover .fb-c:not(:hover) .fb-t, #work .fb-row:hover .fb-c:not(:hover) .fb-m,
  #work .fb-row:focus-within .fb-c:not(:focus-visible):not(:hover) .fb-m{ opacity:0; transition:opacity .2s ease }
  #work .fb-row .fb-t{ transition:opacity .3s ease .12s }
}
@media (max-width:900px){
  #work .fb-row{ flex-direction:column }
  #work .fb-row .fb-c{ flex:none }
}
#work .fb{ grid-template-columns:minmax(0,1fr) !important }
#work .fb-row{ min-width:0; width:100% }
/* §85.1 · sizes that fit every state */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  #work .fb-row .fb-t, #work .fb-row .fb-m{ width:min(250px, 100%) !important }
  #work .fb-row .fb-c:hover .fb-t, #work .fb-row .fb-c:hover .fb-m,
  #work .fb-row .fb-c:focus-visible .fb-t, #work .fb-row .fb-c:focus-visible .fb-m{ width:min(360px, 100%) !important }
  #work .fb-row .fb-c .fb-n{ font-size:clamp(40px,3.5vw,52px) !important }
  #work .fb-row:hover .fb-c, #work .fb-row:focus-within .fb-c{ flex-grow:.85 }
  #work .fb-row .fb-c:hover, #work .fb-row .fb-c:focus-visible{ flex-grow:2 }
  /* a narrowed panel lets its word run under a soft edge instead of being cut */
  #work .fb-row:hover .fb-c:not(:hover) .fb-a{ -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent); mask-image:linear-gradient(90deg,#000 70%,transparent) }
  #work .fb-row .fb-a{ white-space:nowrap; overflow:hidden }
}
#work .fb-row .fb-a{ padding-bottom:.18em; line-height:1.1 }

/* ══════════════════════════════════════════════════════════════════
   §86 · "FROM" OVER THE PRICE (24.09) · enhance.js §86
   ══════════════════════════════════════════════════════════════════ */
html body #formats .plan .plan__p[data-pre]::before, html body #formats .after__p[data-pre]::before{
  content:attr(data-pre); display:block; margin-bottom:8px; font-size:15.5px; font-weight:450; letter-spacing:0; line-height:1.2; color:#f8f4ee8c }
html body #formats .plan .plan__p{ line-height:1 }
html body #formats .plans.pp-wrap .plan .plan__p{ white-space:nowrap }
html body #formats .plan .plan__go{ white-space:nowrap; font-size:15.5px; padding-inline:18px }
html body #formats .plan .plan__go .pill__l, html body #formats .plan a.go.plan__go{ white-space:nowrap }

/* §85.2 · the findings open slower and softer: less spread, longer ease, text later */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  #work .fb-row .fb-c{ transition:flex-grow 1.15s cubic-bezier(.22,1,.36,1), background-color .8s ease, box-shadow .8s ease,
    opacity .8s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms), transform .9s cubic-bezier(.32,.72,0,1) calc(var(--i) * 110ms) !important }
  #work .fb-row:hover .fb-c, #work .fb-row:focus-within .fb-c{ flex-grow:.9 !important }
  #work .fb-row .fb-c:hover, #work .fb-row .fb-c:focus-visible{ flex-grow:1.6 !important }
  #work .fb-row .fb-m{ transition:opacity .6s ease, transform .9s cubic-bezier(.22,1,.36,1) !important }
  #work .fb-row .fb-c:hover .fb-m, #work .fb-row .fb-c:focus-visible .fb-m{ transition-delay:.35s !important }
  #work .fb-row:hover .fb-c:not(:hover) .fb-t, #work .fb-row:hover .fb-c:not(:hover) .fb-m{ transition:opacity .45s ease !important }
}

/* §88 · held invisible while it opens mid-way (enhance.js §88), then a short fade */
html.bm-hold body{ opacity:0 !important }
html body{ transition:opacity .16s ease-out }

/* ══════════════════════════════════════════════════════════════════
   §89 · THE OUTSIDE REVIEW, 29.09 — pair to enhance.js §89
   Order: see below (second pass).
   ══════════════════════════════════════════════════════════════════ */
/* 29.09, fourth pass. Story: problem (end of the film) → the case answers it at once →
   manifesto (the principle the case proves) → legend (what arrives) → method (before/
   after, the bank) → failures (the cost of doing nothing) → places (does this apply to
   my kind of project; "why here, and not next door at the same price" leads into the
   price, and the light section keeps the two dark ones apart) → formats → about → FAQ
   → talk. */
html:not(:has(.bm-flag)) main#top > #work{ order:1 }
html:not(:has(.bm-flag)) main#top > .manifest{ order:2 }
html:not(:has(.bm-flag)) main#top > #legend{ order:3 }
html:not(:has(.bm-flag)) main#top > #compare{ order:4 }
html:not(:has(.bm-flag)) main#top > #bank{ order:5 }
html:not(:has(.bm-flag)) main#top > #failures{ order:6 }
html:not(:has(.bm-flag)) main#top > #places{ order:7 }
html:not(:has(.bm-flag)) main#top > #formats{ order:8 }
html:not(:has(.bm-flag)) main#top > #about{ order:9 }
html:not(:has(.bm-flag)) main#top > #answers{ order:10 }
html:not(:has(.bm-flag)) main#top > #talk{ order:11 }
/* the envelope named the top price three sections before the prices: gone */
#legend .pk-price{ display:none !important }
html:not(:has(.bm-flag)) main#top > #method,
html:not(:has(.bm-flag)) main#top > #range{ order:30 }

/* menu and places: items the review took out */
.menu a.bm-off, .lang__pop a.bm-off,
#places .bm-off, #formats .bm-off{ display:none !important }
.lang__pop:has(a[data-src]){ display:flex; flex-direction:column }

/* the failures stay as they were: all six, with the rail */

/* hero: the button in the centre, what it gets you right under it */
#film .ch-cta{ display:flex; flex-direction:column; align-items:center; gap:12px }
#film .ch-cta .bm-free{ font-size:16px; line-height:1.4; opacity:.72 }
/* the menu sits on the page's centre line, not between the logo and a button of changing width */
@media (min-width:900px){
  .nav__in{ position:relative }
  .nav__in > .menu{ position:absolute; left:50%; transform:translateX(-50%) }
}
/* formats: terms, one quiet line under the cards */
#formats .bm-terms{
  margin:clamp(22px,2.4vw,34px) auto 0; max-width:72ch; text-align:center;
  font-size:17px; line-height:1.5; opacity:.74; text-wrap:balance
}
/* over the film the hero has its own button: the bar's one steps back to glass, like the language chip */
.nav[data-over=film] .nav__end a.pill{
  background:#f5f0e81a !important; color:#f5f0e8 !important;
  box-shadow:inset 0 0 0 1px #f5f0e838 !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)
}
.nav[data-over=film] .nav__end a.pill:hover{ background:#f5f0e829 !important }

/* ══════════════════════════════════════════════════════════════════
   §90 · CARDS THAT ALWAYS TILT, AND ARRIVE ONCE — pair to enhance.js §90
   The tilt reads --bm-rx/--bm-ry (written by §90), not the build's
   --rx/--ry, which after a redraw pointed at cards no longer on the page.
   The arrival uses `translate`, which composes with the tilt's transform.
   ══════════════════════════════════════════════════════════════════ */
html body #formats .plans > .plan{
  transform:rotateX(var(--bm-rx,0deg)) rotateY(var(--bm-ry,0deg)) !important }
html body #formats .plans > .plan.plan--pick{
  transform:translateY(-8px) rotateX(var(--bm-rx,0deg)) rotateY(var(--bm-ry,0deg)) !important }
html body #formats .after{
  transform:perspective(1400px) rotateX(var(--bm-rx,0deg)) rotateY(var(--bm-ry,0deg)) !important }
#formats .plans{ perspective:1600px }

.bm-rv{
  opacity:0 !important; translate:0 32px;
  transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--bm-d,0s),
             translate 1.1s cubic-bezier(.22,1,.36,1) var(--bm-d,0s),
             box-shadow .5s cubic-bezier(.32,.72,0,1), background .5s cubic-bezier(.32,.72,0,1) !important }
.bm-rv.bm-in{ opacity:1 !important; translate:0 0 }
.bm-rv.bm-now{ transition:none !important }
/* after arriving, hover keeps its own instant shadow (the flicker fix in §78.1) */
html body #formats .plan.bm-in:hover{ transition:opacity .9s, translate 1.1s !important }
@media (prefers-reduced-motion: reduce){ .bm-rv{ opacity:1 !important; translate:none; transition:none !important } }

/* 29.09 · the FAQ sketch is the transparent drawing (wc-jetty-cut), whatever the build's
   <img> asks for and whether or not enhance.js §52 has run yet */
#answers .qa__sketch{ content:url(/images/wc-jetty-cut.webp) }

/* 29.09 · FAQ head: the transparent sketch is taller than the old flat one (1.81 vs 2.3),
   so the head row grew and the gap from "About" reached ~360px. The drawing keeps its size
   but rises into the section's top padding instead of pushing the heading down. */
@media (min-width:900px){
  html body main #about{ padding-bottom:24px !important }    /* same colour as the FAQ: their paddings added up */
  html body main #answers{ padding-top:56px !important }
  html body main #answers .qa__side{ margin-top:0 !important }
  html body main #answers .qa__sketch{ margin:-70px 0 -8px !important }
}

/* 29.09 · eight questions, not ten, as the review asked (enhance.js §89 marks the two that go).
   The failures stay all six — the owner's call. */
#answers .fq .acc__i.bm-off{ display:none !important }


/* ══════════════════════════════════════════════════════════════════
   §91 · THE ANONYMISED CASE + A CONCEPT STUDY (30.09)
   enhance.js §25, §84, §91. The case keeps its design; the figures row
   (numbers of the real project) now carries what the client got, in the
   same measures: four columns under one hairline, the site's blue serif.
   The withheld-details line and the study's flag are monospaced, in
   Geist Mono — the site's own family — sentence case, never capitals.
   The study is the last part of the case's section, made of the case's
   pieces: cream cards with an italic anchor (#work .fb-c), the dark
   one-line card (#work .fb-c--line), the four-item row, a centred line.
   ══════════════════════════════════════════════════════════════════ */
:root{ --bm-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace }
html body #work > .mt-s7, html body #work > .figs{ display:none !important }   /* the row below says it */

.bm-got{ margin-top:clamp(48px,6vw,84px) }
.bm-got__k{ margin:0 0 14px; font-size:1rem; line-height:1.4; color:#5c5249 }
.bm-got ul{ list-style:none; margin:0; padding:28px 0 0; display:grid; grid-template-columns:repeat(4,minmax(min-content,1fr));
  gap:22px clamp(20px,2.4vw,40px); border-top:1px solid rgb(34 28 23 / .12) }
.bm-got li{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(22px,1.9vw,28px); line-height:1.08; letter-spacing:.004em; color:var(--acc); text-wrap:balance }
.bm-nda{ margin:clamp(28px,3vw,40px) 0 0; font-family:var(--bm-mono); font-size:14px; line-height:1.6; letter-spacing:0; color:#6b6055 }

/* the study */
#work > #concept{ margin-top:clamp(120px,12vw,180px) }
#concept > .hd{ display:block; text-align:left; margin:0; max-width:none }
#concept > .hd h2{ max-width:24ch !important; margin:0 !important }
.bm-cs__flag{ margin:0 0 22px; font-family:var(--bm-mono); font-size:15px; line-height:1.4; font-weight:500; letter-spacing:0; color:var(--acc) !important }
.bm-cs__row{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,4.4vw,64px) }
.bm-cs__c{ margin:0; border-radius:26px; padding:clamp(26px,2.6vw,38px);
  background:#fcf9f4; box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #0e161e12, 0 26px 50px -34px #3a261452 }
.bm-cs__a{ margin:0; font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(40px,3.6vw,56px); line-height:1; letter-spacing:-.015em; color:#55718c }
.bm-cs__a span{ font-size:clamp(20px,1.8vw,26px); letter-spacing:0 }
.bm-cs__t{ margin:clamp(22px,2.4vw,32px) 0 0; font-size:clamp(18px,1.4vw,20px); line-height:1.4; font-weight:560; color:#0e161e; max-width:44ch }
.bm-cs__c--was .bm-cs__t{ color:#0e161e8c; text-decoration:line-through; text-decoration-color:#55718c; text-decoration-thickness:1.5px }
.bm-cs__line{ margin-top:clamp(14px,1.6vw,22px); border-radius:26px; padding:clamp(26px,2.6vw,38px);
  background:#16202b; box-shadow:0 30px 60px -36px #0e161ecc }
.bm-cs__q{ margin:0; font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(36px,3.6vw,56px); line-height:1.05; letter-spacing:-.01em; color:#aac6e1 !important; text-wrap:balance }
.bm-cs__n{ margin:clamp(18px,2vw,26px) 0 0; font-size:16.5px; line-height:1.55; color:#f8f4eeb3 !important }
.bm-cs__cap{ margin:clamp(48px,5vw,72px) auto 0; max-width:58ch; text-align:center;
  font-size:clamp(1.15rem,1.5vw,1.3125rem); line-height:1.5; letter-spacing:-.012em; color:var(--fg) }

@media (max-width:900px){
  .bm-got ul{ grid-template-columns:repeat(2,minmax(min-content,1fr)) }
  .bm-cs__row{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .bm-got ul{ grid-template-columns:1fr }
}

/* §91.1 (30.09) · the owner: "не всё красиво".
   - the study's flag must be seen: ink, 17px, and a hairline opens the study (the rule
     the site already draws over the four-item rows);
   - the withheld line is no footnote: 16px;
   - the case reads by the brief's fields: the old method paragraph under "Три находки"
     goes, the heading stays and announces the findings;
   - the discarded brochure line is set as a crossed-out headline, and fills its card;
   - the study ends on its thought, in the serif the About section uses for one;
   - the four items read at the size of a row, not of a caption. */
html body #work > #concept{ margin-top:clamp(96px,10vw,150px); padding-top:clamp(40px,4.4vw,64px); border-top:1px solid rgb(34 28 23 / .12) }
.bm-cs__flag{ font-size:17px; color:var(--fg) !important; margin-bottom:26px }
html body .bm-nda{ font-size:16px; line-height:1.55 }
html body #work > .hd--split .lead{ display:none !important }
.bm-cs__c--was .bm-cs__t{ font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(26px,2.3vw,34px); line-height:1.14; letter-spacing:.004em; color:#0e161e73; text-decoration-thickness:.05em }
.bm-cs__cap{ max-width:30ch; margin:clamp(56px,6vw,96px) auto 0; font-family:"Instrument Serif","Playfair Display",Georgia,serif;
  font-weight:400; font-size:clamp(28px,2.8vw,42px); line-height:1.14; letter-spacing:.004em; color:var(--fg) !important; text-wrap:balance }
.bm-got li{ font-size:clamp(24px,2.2vw,32px) }
@media (max-width:560px){ .bm-cs__cap{ font-size:clamp(24px,7vw,30px) } }