/* ============================================================
   ОКНО «ЗАБРОНИРОВАТЬ ЭКЗЕМПЛЯР» — общий файл, один на весь сайт.

   Это то же самое окно, что стояло внутри index.html, — вид, тексты
   и поведение перенесены один в один. Вынесено по той же причине, что
   и окно отрывка: на страницах фрагмента, автора и писем окна не было,
   и кнопка «Забронировать экземпляр» уводила человека на главную, в самый
   низ. Он нажимал кнопку и оказывался на другой странице — это читается
   как «ссылка ведёт не туда».

   Свои имена классов (.br-*), а не .fm-* лендинга: те обслуживают ещё
   и карточку «Первый тираж» внизу главной, и трогать их ради переезда
   нельзя. Значения при этом взяты те же.

   Своего :root здесь нет: файл подключается к страницам, где токены уже
   объявлены. Те ступени, которых на служебных страницах нет (--t-base,
   --h-card, --h-num и прочие из шкалы лендинга), подставляются запасным
   значением — новых своих кеглей и цветов файл не заводит.
   ============================================================ */
.br-overlay{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vh,28px);
  background:rgba(8,5,2,.74);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  /* visibility гасим отдельно и с задержкой: при переходе она переключается
     на середине, и в момент открытия окно ещё считалось невидимым —
     а невидимый элемент нельзя сфокусировать, фокус утекал на страницу */
  transition:opacity .28s var(--ease,cubic-bezier(.2,.7,.2,1)),visibility 0s .28s;
}
.br-overlay.open{opacity:1;visibility:visible;transition-delay:0s}

.br-modal{
  /* ступени шкалы и роли цвета — те же, что на лендинге; запасные значения
     нужны страницам, где шкала не объявлена (фрагмент, автор, письма) */
  --p:clamp(20px,3vw,36px);
  --f-micro:var(--t-micro,clamp(12px,.95vw,13px));
  --f-small:var(--t-small,clamp(13.5px,1.05vw,15px));
  --f-base:var(--t-base,clamp(16px,1.25vw,17.5px));
  --f-card:var(--h-card,clamp(21px,2.1vw,26px));
  --f-num:var(--h-num,clamp(56px,5.8vw,88px));
  --c-ink:var(--night-text,#f0e6d6);
  --c-mute:var(--night-mute,#cbb890);
  --c-hush:var(--hush,rgba(203,184,144,.74));
  --c-faint:var(--faint,rgba(203,184,144,.55));
  --c-brass:var(--night-brass,#e7c583);
  --c-err:var(--err,#f0c9b4);
  --c-err-line:var(--err-line,#c96a4f);
  --c-line:rgba(231,197,131,.16);
  /* поверхность на полтона светлее самой тёмной точки страницы; тон ровный,
     без градиента — под закреплённой шапкой от него появлялся тональный шов */
  --c-bg:#1e150c;
  position:relative;display:flex;flex-direction:column;
  width:min(560px,100%);overflow-y:auto;
  max-height:88vh;max-height:min(88dvh,920px);
  overscroll-behavior:contain;   /* докрутил окно — страница за ним не едет */
  color:var(--c-ink);background:var(--c-bg);
  border-radius:8px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),
             inset 0 0 0 1px rgba(231,197,131,.14);
  transform:translateY(12px);transition:transform .24s cubic-bezier(0,0,.2,1);
  scrollbar-width:thin;scrollbar-color:rgba(231,197,131,.32) transparent;
}
.br-overlay.open .br-modal{transform:none}
.br-modal:focus{outline:none}   /* фокус ставим на само окно, рамка тут ни к чему */

/* Шапка закреплена у верхнего края: прокручивается сам .br-modal, и без
   sticky крестик уезжал вверх вместе с текстом — на невысоком экране
   закрыть окно становилось нечем. Фон обязателен, иначе строки текста
   просвечивают под шапкой. */
.br-head{
  position:sticky;top:0;z-index:3;background:var(--c-bg);
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px var(--p) 14px;
}
.br-kicker{
  display:inline-flex;align-items:center;gap:12px;margin:0;
  font-family:var(--sans);font-size:var(--f-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-brass);
}
/* ромб-маркер берётся из общей переменной страницы, своего пути к файлу
   не заводим: 20px — ниже узор превращается в грязь */
.br-kicker::before{
  content:"";width:20px;height:20px;flex:none;
  background:var(--ribbon-diamond,url("ribbon-diamond.webp")) center/contain no-repeat;
  opacity:.92;
}
/* кикер меняется вместе с экраном: «Первый тираж» → «Записано» */
.br-head .br-done-kicker{display:none}
.br-modal.done .br-head .br-live-kicker{display:none}
.br-modal.done .br-head .br-done-kicker{display:inline-flex}
.br-close{
  flex:none;width:44px;height:44px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(231,197,131,.2);background:rgba(231,197,131,.07);
  color:var(--c-brass);font-size:var(--f-base);line-height:1;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.br-close:hover{background:rgba(231,197,131,.16);border-color:rgba(231,197,131,.6)}
.br-close:active{background:var(--c-brass);border-color:var(--c-brass);color:var(--earth-deep,#33210f)}

.br-body{display:grid;gap:26px;padding:22px var(--p) var(--p)}
.br-modal.done .br-body{display:none}
/* меры набора у заголовка нет намеренно: она ломает «Экземпляр с автографом
   автора» на обрубки по два слова, хотя фраза влезает в колонку целиком */
.br-title{
  margin:0;font-family:var(--serif);font-weight:500;font-size:var(--f-card);
  line-height:1.14;letter-spacing:-.018em;color:var(--c-ink);
}
/* вторая половина заголовка — курсивом латунью: она называет то, чего
   не будет в магазине, и должна читаться раньше остального */
.br-title em{font-style:italic;color:var(--c-brass)}
/* лид серифом, не сансом: окно — часть книги, а не панель настроек */
.br-lede{
  margin:0;font-family:var(--serif);font-size:var(--f-base);line-height:1.6;
  color:var(--c-mute);max-width:56ch;
}

/* ---------- счётчик: порядковый номер сильнее абсолютного числа ---------- */
.br-count{display:grid;grid-template-columns:1px minmax(0,1fr);gap:16px}
.br-count[hidden]{display:none}
.br-count::before{
  content:"";display:block;
  background:linear-gradient(var(--brass,#b3924f),rgba(179,146,79,.18));
}
.br-count > div{display:grid;gap:6px}
.br-count-main{
  margin:0;font-family:var(--serif);font-size:var(--t-lead,clamp(18px,1.55vw,21px));
  line-height:1.35;color:var(--c-ink);
}
.br-count-main b{color:var(--c-brass);font-weight:500}
.br-count-main[hidden]{display:none}
/* постоянная подпись под номером: «от руки» и «каждую книгу» делают обещание
   вещественным — они важнее самого слова «автограф». Живёт в разметке,
   а не в скрипте, и рисуется до похода на сервер: иначе при любом сбое API
   главное обещание предзаказа исчезало бы со страницы. */
.br-count-note{
  margin:0;font-family:var(--sans);font-size:var(--f-small);line-height:1.45;
  color:var(--c-hush);
}

/* ---------- поля ---------- */
.br-form{display:grid;gap:22px}
.br-fields{display:grid;gap:22px}
.br-field{display:grid;gap:6px}
.br-field label{
  font-family:var(--sans);font-size:var(--f-small);font-weight:400;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--c-hush);
}
.br-field input{
  font-family:var(--serif);font-size:var(--f-base);line-height:1.3;color:var(--c-ink);
  background:transparent;border:0;border-radius:0;
  /* 45 % латуни дают 3,2:1 — минимум для границ элементов управления */
  border-bottom:1px solid rgba(231,197,131,.45);
  padding:10px 0;min-height:48px;width:100%;outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.br-field input::placeholder{color:var(--c-faint)}
.br-field input:focus{border-bottom-color:var(--c-brass)}
.br-field input:focus-visible{box-shadow:0 1px 0 var(--c-brass)}
/* черта поля с ошибкой — 2px, чтобы её было видно раньше текста под полем */
.br-field input[aria-invalid="true"]{border-bottom:2px solid var(--c-err-line)}

/* ошибка живёт на поле, а не плашкой. display:flex сюда не ставить:
   ссылка внутри текста станет вторым флекс-элементом и улетит в колонку */
.br-err{
  display:none;margin:2px 0 0;font-family:var(--sans);font-size:var(--f-small);
  line-height:1.5;color:var(--c-err);
}
.br-err.on{display:block;padding-left:1.15em;text-indent:-1.15em}
.br-err.on::before{content:'\2191\00a0'}
.br-err a{color:var(--c-err)}

/* ---------- кнопка и две строки под ней ----------
   Кнопка — тот же стандарт, что на всём сайте: обычный регистр, вес 600,
   кегль основного текста. Капитель отменена решением от 08.08.2026 —
   в кириллице капс читается заметно медленнее. */
.br-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:52px;padding:15px 24px;
  font-family:var(--sans);font-size:var(--f-base);font-weight:600;
  line-height:1.35;letter-spacing:0;white-space:normal;text-align:center;
  text-decoration:none;cursor:pointer;border-radius:8px;
  background:var(--brass,#b3924f);border:1px solid var(--brass,#b3924f);
  color:var(--earth-deep,#33210f);
  transition:background-color .2s,border-color .2s,color .2s,opacity .2s;
}
.br-btn:hover{background:var(--brass-soft,#d3ba8a);border-color:var(--brass-soft,#d3ba8a)}
.br-btn:active{background:var(--brass-deep,#8a6d38);border-color:var(--brass-deep,#8a6d38);color:#f7efe0}
.br-btn[disabled]{cursor:progress;opacity:.72}
/* display:inline-flex сильнее атрибута hidden — без этой строки кнопка
   «прочитать фрагмент» оставалась на экране успеха у той самой страницы
   фрагмента, откуда человек и пришёл */
.br-btn[hidden]{display:none}
/* следующий шаг на экране успеха — контурная кнопка сайта */
.br-btn--ghost{
  min-height:48px;background:transparent;color:var(--c-brass);
  border-color:rgba(231,197,131,.55);
}
.br-btn--ghost:hover{background:rgba(231,197,131,.14);color:var(--c-brass);border-color:rgba(231,197,131,.55)}
/* спиннеров на сайте нет: дышащая точка и глагол */
.br-sending .br-fields{opacity:.5;pointer-events:none}
.br-wait{display:inline-flex;align-items:center;gap:12px}
.br-wait::before{
  content:'';flex:none;width:7px;height:7px;border-radius:50%;
  background:currentColor;animation:brPulse 1.1s ease-in-out infinite;
}
@keyframes brPulse{0%,100%{opacity:.35}50%{opacity:.8}}

.br-under{display:grid;gap:8px;justify-items:center;text-align:center}
/* ---------- строка о цене ----------
   Обведена рамкой, а не залита латунью: залитая стала бы вторым главным
   действием и заспорила с кнопкой брони. Геометрия та же, что у кнопки
   «Передать» (1px латунь 28 %, заливка 3 %, радиус 8) — на сайте это уже
   принятый вид «заметно, но не кнопка».
   Ссылка вынесена отдельной строкой, а не вшита в предложение: внутри
   текста её тач-цель выходила 17px вместо сорока четырёх. */
.br-price{
  width:100%;display:grid;gap:4px;justify-items:center;
  margin:2px 0 4px;padding:12px 16px 4px;
  border:1px solid rgba(231,197,131,.28);border-radius:8px;
  background:rgba(231,197,131,.03);
}
.br-price-main{
  margin:0;font-family:var(--sans);font-size:var(--f-base);line-height:1.4;
  color:var(--c-mute);
}
.br-price-main b{font-weight:600;color:var(--c-brass);white-space:nowrap}
.br-price-note{
  margin:0;font-family:var(--sans);font-size:var(--f-micro);line-height:1.45;
  color:var(--c-hush);text-wrap:balance;
}
.br-price-link{
  display:inline-block;padding-block:13px;
  font-family:var(--sans);font-size:var(--f-micro);color:var(--c-brass);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(231,197,131,.4);
}
.br-price-link:hover{text-decoration-color:currentColor}
/* условия — то, что человек ищет в момент решения; прятать их внутрь
   согласия нельзя. balance — иначе строка ломается как «…отказаться
   можно в / одном письме» и на второй строке висит хвост из двух слов. */
.br-terms{
  margin:0;font-family:var(--sans);font-size:var(--f-small);line-height:1.45;
  color:var(--c-hush);text-wrap:balance;
}
.br-dot{
  display:inline-block;vertical-align:middle;width:3px;height:3px;border-radius:50%;
  background:rgba(231,197,131,.6);margin:0 5px 2px;
}
.br-consent{
  margin:0;font-family:var(--sans);font-size:var(--f-micro);line-height:1.45;
  color:var(--c-hush);
}
/* ссылка на политику набрана 12px, тач-цель у неё выходила 15px — пальцем
   не попасть, а это единственный вход в документ, на который человек
   прямо сейчас соглашается. Отступами доводим до 44, как в подвале. */
.br-consent a{display:inline-block;padding-block:15px;color:var(--c-hush)}

/* ---------- экран успеха ----------
   align-content:start обязателен — у сетки со строками по содержимому
   лишняя высота окна раскидывается по строкам, и ссылка внизу вырастала
   до 208px на телефоне. */
.br-done{display:none;gap:26px;align-content:start;text-align:left;
  padding:22px var(--p) calc(var(--p) + env(safe-area-inset-bottom))}
.br-modal.done .br-done{display:grid}
.br-done:focus{outline:none}
.br-hero{display:grid;gap:16px;justify-items:center;text-align:center}
/* крупная цифра — это имя в родовой росписи; ради неё счётчик и существует.
   У номера своя ступень --h-num: --h-hero на телефоне сжимается до 38px,
   и цифра переставала быть героем экрана. */
.br-num{
  margin:0;font-family:var(--serif);font-weight:400;font-size:var(--f-num);line-height:.9;
  letter-spacing:-.03em;color:var(--c-brass);text-shadow:0 2px 34px rgba(0,0,0,.6);
}
.br-num[hidden]{display:none}
.br-hero-h{
  margin:0;font-family:var(--serif);font-weight:500;font-size:var(--f-card);line-height:1.2;
  color:var(--c-ink);max-width:22ch;text-wrap:balance;
}
/* строка, ради которой номер вообще что-то значит: он ставит человека
   в тот самый список имён, о котором вся книга. Латунью выделено только
   число — остальное тихое, иначе строка спорит с самой цифрой. */
.br-hero-rod{
  margin:0;font-family:var(--serif);font-size:var(--f-base);line-height:1.55;
  color:var(--c-mute);max-width:46ch;text-wrap:balance;
}
/* nowrap обязателен: числительное словами длинное, и без запрета перенос
   рвал его посреди («сто / шестьдесят четыре») — читается как две цифры */
.br-hero-rod b{font-weight:400;color:var(--c-brass);white-space:nowrap}
.br-hero-rod[hidden]{display:none}
.br-hero-sub{
  margin:0;font-family:var(--sans);font-size:var(--f-base);line-height:1.5;
  color:var(--c-hush);max-width:34ch;
}
/* лента-разделитель: flex:none обязателен — в колонке-флексе она схлопывалась.
   Окно в счёт «не больше пяти лент на страницу» не входит: это отдельная
   поверхность, видная только при открытии. */
.br-ribbon{
  display:block;flex:none;height:20px;
  background:var(--ribbon,url("ribbon-red.webp")) repeat-x center/auto 20px;
  opacity:var(--ribbon-opacity,.82);
}
/* лента и следующий шаг живут вместе: на самой странице фрагмента уходят
   оба разом, иначе окно кончается лентой в никуда */
.br-next{display:grid;gap:26px}
.br-next[hidden]{display:none}

/* ---------- появление экрана успеха двумя тактами ----------
   Номер и текст под ним приходят не разом: пауза в 0,45 с и делает момент. */
@keyframes brNumIn{
  from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes brLineIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.br-num{animation:brNumIn 1s var(--ease,cubic-bezier(.2,.7,.2,1)) .1s both}
.br-hero-h,.br-hero-rod,.br-hero-sub{animation:brLineIn .7s ease-out .55s both}
/* Повтор — справка, а не событие: номер тише латуни, появление без тактов. */
.br-done.povtor .br-num{color:var(--c-mute);animation:none}
.br-done.povtor .br-hero-h,
.br-done.povtor .br-hero-rod,
.br-done.povtor .br-hero-sub{animation:none}
@media(prefers-reduced-motion:reduce){
  .br-num,.br-hero-h,.br-hero-rod,.br-hero-sub,.br-wait::before{animation:none}
  .br-overlay,.br-modal{transition:none}
}

/* ---------- окно на телефоне ---------- */
@media(max-width:640px){
  /* поля вокруг окна ужимаем: на 390px по 33px с каждой стороны съедали
     шестую часть ширины, и текст ломался на обрубки */
  .br-overlay{padding:12px}
  .br-modal{--p:16px;max-height:calc(100svh - 24px);border-radius:6px}
  .br-head{padding-top:max(20px,calc(env(safe-area-inset-top) + 10px))}
  .br-body{padding-bottom:calc(var(--p) + env(safe-area-inset-bottom))}
  /* короткую колонку центрируем, длинную не обрезаем */
  .br-modal:not(.done)>.br-body,.br-modal.done>.br-done{margin-block:auto}
  /* «первого тиража» в подписи снимаем: на узкой колонке строка уходила
     в четыре строки и подпись начинала спорить с самим номером */
  .br-pc{display:none}
}

/* ---------- выбор количества экземпляров (15.08.2026) ----------
   Тихая строка, а не поле на виду. Форма сильна тем, что в ней два поля;
   девяти из десяти нужен один экземпляр, и платить за третье поле пришлось
   бы всем. Поэтому строка набрана мелко и цветом «тихого» текста, а не
   латунью: латунь на сайте — единственный акцент, и он занят кнопкой. */
.br-many-btn{
  /* ⚠️ Была тихая подчёркнутая строка — Дмитрий не нашёл её глазами (15.08).
     Геометрия взята у кнопки «Передать тем, кто важен и дорог»: рамка 1px
     латунью, лёгкая заливка, радиус 8px. Так это читается как кнопка,
     а не как ссылка в подвале. Латунью НЕ заливаем: залитая станет вторым
     главным действием и начнёт спорить с «Забронировать». */
  display:flex;align-items:center;gap:10px;width:100%;
  font-family:var(--sans);font-size:var(--f-small);line-height:1.3;
  color:var(--c-ink);background:rgba(231,197,131,.03);
  border:1px solid rgba(231,197,131,.28);border-radius:8px;
  padding:12px 14px;min-height:48px;text-align:left;cursor:pointer;
  transition:border-color .18s,background .18s;
}
.br-many-btn::before{
  /* тот же ромб, что у маркера кикера: берём из общей переменной,
     своего пути к файлу не заводим. Ниже 20px узор превращается в грязь */
  content:'';flex:0 0 auto;width:20px;height:20px;
  background:var(--ribbon-diamond) center/contain no-repeat;
}
.br-many-btn:hover,
.br-many-btn:focus-visible{
  border-color:var(--c-brass);background:rgba(231,197,131,.07);
}
/* ⚠️ Обязательно и ПОСЛЕ display:flex. Браузерное [hidden]{display:none}
   слабее любого авторского display, и без этой строки кнопка остаётся
   висеть над раскрытым списком — проверено снимком дважды. */
.br-many-btn[hidden]{display:none}
.br-many{display:grid;gap:14px}
/* ⚠️ Правило [hidden] обязательно и идёт ПОСЛЕ display:grid.
   Браузерное [hidden]{display:none} слабее любого авторского display,
   и без этой строки выбор количества виден всегда — проверено снимком. */
.br-many-box{display:grid;gap:6px}
.br-many-box[hidden]{display:none}
.br-many-box label{
  font-family:var(--sans);font-size:var(--f-small);font-weight:400;line-height:1.3;
  color:var(--c-hush);
}
/* тот же вид, что у полей ввода: подчёркивание, 48px, ввод серифом */
.br-many-box select{
  font-family:var(--serif);font-size:var(--f-base);line-height:1.3;color:var(--c-ink);
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(231,197,131,.45);
  padding:10px 0;min-height:48px;width:100%;outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.br-many-box select:focus{border-bottom-color:var(--c-brass)}
.br-many-box select:focus-visible{box-shadow:0 1px 0 var(--c-brass)}
/* список раскрывается системой, и на тёмном фоне он остаётся светлым —
   задаём цвет пунктам явно, иначе часть браузеров рисует белым по белому */
.br-many-box option{color:#1b1713;background:#f6f1e7}
/* ⚠️ --c-hush, а не --c-faint: у faint контраст 3,7 при кегле 12 — ниже
   нормы для читаемого текста. faint живёт для плейсхолдеров и угасания. */
.br-many-note{
  margin:0;font-family:var(--sans);font-size:var(--f-micro);line-height:1.45;
  color:var(--c-hush);
}