/* Белый фон, шоколадные чернила, ягодный акцент. Светлая тема одна:
   кондитерская — про дневной свет, и переключать её в тёмную незачем.
   Карточки и рамки держим чуть тёплее белого, иначе на белом фоне они
   пропадают и страница рассыпается. */

:root{
  color-scheme: light;   /* запрещаем браузеру перекрашивать страницу */
  --cream:#E7C3C4;      /* фон страницы: приглушённая пыльная роза */
  --cream-2:#FFF6F4;    /* карточки и плашки — светлее фона, чтобы выступали */
  --choco:#2E211B;
  --choco-2:#5A4739;
  --muted:#8C7866;
  --hair:#D9AEB0;
  --accent:#8E2F3C;
  --shadow:0 1px 2px rgba(46,33,27,.05), 0 14px 40px rgba(46,33,27,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--choco);
  /* Фон не ровная заливка, а несколько размытых пятен — так страница
     выглядит как мягкое фото, а не как крашеная стена. Пятна закреплены
     за экраном: при прокрутке они не уезжают и не повторяются. */
  /* Пятна нарочно далеко разведены по тону: кремовое, пыльная роза,
     приглушённая сирень. Если брать оттенки близко к фону, глаз разницы
     не замечает и видит ровную заливку — так и вышло с первого раза. */
  background:
    radial-gradient(80% 60% at 12% 4%,   #F7DCD4 0%, rgba(247,220,212,0) 58%),
    radial-gradient(70% 55% at 92% 10%,  #C98F98 0%, rgba(201,143,152,0) 60%),
    radial-gradient(85% 70% at 78% 92%,  #B98394 0%, rgba(185,131,148,0) 62%),
    radial-gradient(75% 60% at 4% 86%,   #EFD0C6 0%, rgba(239,208,198,0) 60%),
    radial-gradient(55% 45% at 50% 48%,  #F4DFD9 0%, rgba(244,223,217,0) 70%),
    var(--cream);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font-family:"Golos Text",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,5.6vw,62px);line-height:1.04;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,50px);line-height:1.1;margin-bottom:14px;text-wrap:balance}
h3{font-size:26px;line-height:1.25}
p{margin:0 0 12px}
a{color:inherit}

.btn{
  display:inline-block;font:inherit;font-weight:500;font-size:20px;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:15px 28px;border-radius:999px;text-decoration:none;
  transition:filter .18s,transform .18s;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--accent)}
.btn.ghost:hover{background:rgba(142,47,60,.07)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.tiny{font-size:13.5px;color:var(--muted);margin:0}
.lead{font-size:22.5px;color:var(--choco-2);max-width:56ch}
.note{font-size:19px;color:var(--muted);max-width:60ch}

/* ── шапка ── */
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:26px;
  padding:14px clamp(16px,4vw,52px);
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);
}
/* Слоган под именем и прижат к его правому краю: так он читается как
   подпись, поставленная под росчерком, а не как отдельная строка. */
/* Весь логотип считается от одного числа — кегля имени. Слоган и его
   отступ заданы долями от него, поэтому на любой ширине пропорции те же,
   что на большом экране: слоган вчетверо мельче имени и уже его. Раньше
   размеры правились порознь, и на телефоне слоган выходил шире имени. */
.brand{--n:64px;
       text-decoration:none;display:flex;flex-direction:column;align-items:flex-end;
       line-height:1.1;gap:0}
/* Название — прописью: у кондитерской имя пишут от руки, а не набирают.
   Parisienne мягкая и тонкая, поэтому кегль берём с запасом — мелким
   рукописный шрифт превращается в неразборчивую вязь. */
.brand span{
  font-family:"Great Vibes",cursive;font-size:var(--n);font-weight:400;
  line-height:1;padding-top:2px;white-space:nowrap;
}
.brand em{font-style:normal;font-size:calc(var(--n)*.25);letter-spacing:.11em;
          text-transform:uppercase;color:var(--muted);white-space:nowrap;
          margin-top:calc(var(--n)*-.094);padding-right:calc(var(--n)*.0625)}
.top nav{display:flex;gap:10px;margin-left:auto;align-items:center}
/* Пункты меню в такой же рамке, какая была у кнопки помощника: она из шапки
   ушла, а её вид остался узнаваемым и теперь держит всё меню. */
.top nav a{
  font-size:19.5px;text-decoration:none;color:var(--choco-2);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:9px 18px;border-radius:999px;
  transition:color .18s,background .18s,border-color .18s;
}
.top nav a:hover{color:var(--accent);background:rgba(142,47,60,.07)}
.ask-top{
  font:inherit;font-size:14.5px;cursor:pointer;white-space:nowrap;
  background:none;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:9px 16px;border-radius:999px;
}
.ask-top:hover{background:rgba(142,47,60,.07)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
        width:42px;height:36px;padding:9px 6px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--choco);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none;flex-direction:column;gap:2px;padding:6px 18px 16px;
        background:var(--cream-2);border-bottom:1px solid var(--hair);position:sticky;top:64px;z-index:29}
.drawer a{padding:11px 4px;text-decoration:none;font-size:17px;border-bottom:1px solid var(--hair)}
.drawer[hidden]{display:none}

/* ── заглушка вместо фотографии ── */
.ph{margin:0;position:relative;overflow:hidden;border-radius:18px;background:var(--cream-2);
    border:1px solid var(--hair)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.noimg img{display:none}
.ph.noimg::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;
  align-items:flex-end;padding:16px;font-family:"Cormorant Garamond",serif;
  font-size:19px;color:var(--muted);
  background:
    radial-gradient(120% 90% at 20% 0%, #FBF4EA 0%, #F2E6D6 45%, #E7D6C0 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 2px, transparent 2px 9px);
}

/* ── полоса-приглашение под шапкой ──
   Лёгкий ягодный фон: заметно, но не спорит с фотографиями ниже.
   Стоит первой, потому что гостю надо сразу понять, куда он попал
   и чего от него ждут. */
.demoband{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;
  /* Отступ сверху отделяет полосу от шапки: вплотную она читалась её
     продолжением, а это отдельное обращение к гостю. */
  max-width:1280px;margin:clamp(18px,2.6vw,34px) auto 0;
  padding:clamp(18px,2.4vw,26px) clamp(16px,4vw,52px);
  background:linear-gradient(180deg,
             color-mix(in srgb,var(--accent) 7%,#fff),
             color-mix(in srgb,var(--accent) 4%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:18px;
}
.demoband > div{max-width:74ch}
/* Полоса — наше обращение к гостю, а не голос кондитерской, поэтому набрана
   тем же гротеском, что и весь текст: рукописная антиква оставлена бренду.
   Размеры идут явной лестницей — метка, заголовок, текст, подпись. Раньше
   заголовок антиквой был всего на пять пунктов крупнее абзаца, и при мелком
   очке антиквы они сливались в одно серое пятно. */
/* Через .demoband, а не просто .db-eyebrow: метка — тоже абзац, и правило
   для абзацев полосы её перебивало, набирая в размер основного текста. */
.demoband .db-eyebrow{
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);margin:0 0 9px;
}
.demoband h2{
  font-family:"Golos Text",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(21px,2.1vw,27px);font-weight:600;line-height:1.3;
  letter-spacing:-.005em;margin:0 0 10px;
}
.demoband p{font-size:clamp(15.5px,1.35vw,18px);line-height:1.6;color:var(--choco-2);margin:0}
.db-note{margin-top:10px !important;color:var(--muted) !important;
         font-size:clamp(14px,1.15vw,16px) !important}
.demoband .btn{flex:none;white-space:nowrap}

@media(max-width:860px){
  /* Сверху столько же, сколько по бокам: с нулевым отступом полоса
     упиралась в шапку и читалась её продолжением. Обе величины считаются
     от одного clamp, поэтому рамка вокруг неё остаётся равномерной. */
  .demoband{margin:clamp(16px,4vw,52px) clamp(16px,4vw,52px) 0;border-radius:16px}
  .demoband .btn{width:100%;text-align:center}
}

/* ── первый экран ── */
.hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(34px,6vw,86px) clamp(16px,4vw,52px) clamp(28px,4vw,60px);
  max-width:1280px;margin:0 auto;
}
.hero-ph{aspect-ratio:4/5}
.hero .sub{font-size:19px;color:var(--choco-2);max-width:44ch;margin-top:16px}

/* ── секции ── */
.band{background:transparent;max-width:1280px;margin:0 auto;padding:clamp(40px,6vw,84px) clamp(16px,4vw,52px);border-top:1px solid var(--hair)}
.band.narrow{max-width:900px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:center}
.wed{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(22px,4vw,56px);align-items:center}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,2vw,26px);margin:26px 0 20px}
.card .ph{aspect-ratio:1/1;margin-bottom:12px}
.card h3{margin-bottom:5px}
.card p{font-size:18.5px;color:var(--muted);margin-bottom:8px;line-height:1.45}
.card b{font-size:21.5px;color:var(--accent);font-weight:600}

.facts{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0}
.facts dt{font-family:"Cormorant Garamond",serif;font-size:35px;color:var(--accent)}
.facts dd{margin:0;font-size:17.5px;color:var(--muted)}
.choose{font-size:19.5px;color:var(--choco-2)}
.choose span{color:var(--muted)}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio .ph{aspect-ratio:1/1}
.trio .ph:first-child{grid-column:1/-1;aspect-ratio:16/10}
.wed-ph{aspect-ratio:4/5}
.cafe-ph{aspect-ratio:5/4}

.tags{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:16px 0}
.tags li{font-size:18px;color:var(--choco-2);background:var(--cream-2);
         border:1px solid var(--hair);border-radius:999px;padding:8px 17px}
.hours{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0 6px}
.hours dt{font-size:17px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.hours dd{margin:2px 0 0;font-family:"Cormorant Garamond",serif;font-size:31px}
.addr{font-size:21.5px;color:var(--choco-2)}
.demo{font-size:13px;color:var(--muted);border-left:2px solid var(--hair);padding-left:11px;margin-top:18px}

/* ── призыв к помощнику ── */
.askblock{
  max-width:1280px;margin:0 auto;padding:clamp(44px,7vw,92px) clamp(16px,4vw,52px);
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.askblock .lead{margin:0 0 26px;max-width:52ch}
.examples{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
/* Карточка с кодом презентации — в цветах самой презентации NH-1:
   сливовый фон, мятный акцент, светлые заголовки, шрифт Unbounded. */
.askqr{
  width:clamp(260px,24vw,304px);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  text-decoration:none;color:#F4FAFB;
  background:linear-gradient(160deg,#261C35,#1C1428);
  border:1px solid #3A2E4B;border-radius:26px;
  padding:26px 24px 24px;box-shadow:0 2px 4px rgba(28,20,40,.10),0 16px 40px rgba(28,20,40,.22);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.askqr:hover{transform:translateY(-3px);border-color:#9FE0D2;
  box-shadow:0 2px 4px rgba(28,20,40,.12),0 22px 48px rgba(28,20,40,.34)}
.askqr-name{font-family:Unbounded,Onest,"Golos Text",sans-serif;font-weight:400;font-size:46px;
  line-height:1;letter-spacing:.01em;color:#9FE0D2}
.askqr-title{font-family:Unbounded,Onest,"Golos Text",sans-serif;font-weight:400;font-size:15.5px;
  line-height:1.35;color:#F4FAFB;margin-bottom:4px}
.askqr-code{
  display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;
}
.askqr-hint{font-family:Unbounded,Onest,"Golos Text",sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:.08em;color:#9FE0D2}

.chip{
  font:inherit;font-size:15px;cursor:pointer;background:var(--cream-2);color:var(--choco);
  border:1px solid var(--hair);border-radius:999px;padding:10px 18px;transition:border-color .18s,color .18s;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── подвал ── */
footer{
  background:var(--choco);color:#EFE6DA;margin-top:10px;
  padding:clamp(34px,5vw,60px) clamp(16px,4vw,52px);
  display:grid;grid-template-columns:1fr;gap:22px;
}
footer b{font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:600}
footer p{margin:6px 0 0;font-size:14.5px;color:#C4B4A2}
footer a{color:#EFE6DA}
.fcontacts{display:flex;flex-direction:column;align-items:flex-start}
.links{display:flex;gap:18px;font-size:15px;margin-top:12px}
.fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;
      font-size:12.5px;color:#A4907C;line-height:1.6}

@media(max-width:900px){
  .hero,.split,.wed{grid-template-columns:1fr}
  .wed figure{order:2}
  .askblock{grid-template-columns:1fr;justify-items:start}
  .askqr{justify-self:center;width:min(100%,320px)}
}
@media(max-width:760px){
  .top nav,.ask-top{display:none}
  .burger{display:flex}
  .drawer:not([hidden]){display:flex}
  .hero-ph{aspect-ratio:3/2}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.chip{transition:none}
}

/* ── фон-фотография и переключатель ────────────────────────────────────
   Снимок лежит отдельным закреплённым слоем под всем содержимым, а не в
   background у body: так его можно менять с переходом и не трогать
   размытые пятна, которые остаются фоном по умолчанию.

   Поверх снимка — вуаль цвета страницы. Без неё тёмное фото съедает
   текст: шоколадные буквы на коричневом дереве не читаются. Вуаль
   оставляет от снимка настроение и возвращает контраст.               */
#bgphoto{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  /* Снимок шире экрана по высоте: по ширине он подогнан вплотную, а всё,
     что не поместилось сверху и снизу, показывается по мере прокрутки.
     Вертикальное положение задаёт bg.js — от 0 в начале страницы до 100
     в конце, так что за одну прокрутку гость видит фотографию целиком. */
  background-position:center calc(var(--bgy,0) * 1%);
  background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity .45s ease;
}
/* Снимок приглушён на 30%: в полную силу оригиналы слишком лезут вперёд
   и спорят с содержанием. Недостающее проступает фоном страницы, поэтому
   фотография ложится в её тон, а не висит над ней отдельным слоем. */
body.hasbg #bgphoto{opacity:var(--bg-strength,.7)}
/* Приглушение — 42% для всех кадров. Отдельному снимку можно задать своё
   число в config.js, но по умолчанию действует общее: так и новые фоны
   сразу попадают в тот же тон, без правок здесь. */
#bgphoto::after{
  content:"";position:absolute;inset:0;
  background:color-mix(in srgb,var(--cream) calc(var(--veil,42) * 1%),transparent);
}

/* Когда фон — снимок, плашки чуть прозрачнее: иначе фотографию видно
   только в щелях между карточками и смысла в ней нет. */
body.hasbg .ph,
body.hasbg .tags li,
body.hasbg .btn.ghost{background:color-mix(in srgb,var(--cream-2) 76%,transparent)}
body.hasbg .top{background:color-mix(in srgb,var(--cream) 72%,transparent)}

/* кружки выбора */
/* Инструменты справа: глобус и кнопка фона стоят рядом, список языков
   падает из-под глобуса, а не из края страницы. */
/* Размер кружка один на всех — и на языке, и на фоне. Задан здесь
   переменной: пока он стоял числом в двух местах, правки расходились
   и на телефоне кружок языка оказывался крупнее кружка фона. */
.tools{--chip:38px;
       display:flex;align-items:center;gap:10px;margin-left:auto;position:relative}
.bgpick{display:flex;align-items:center;gap:8px}
.bgchip{
  width:var(--chip);height:var(--chip);border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--hair);background-color:var(--cream-2);
  background-size:cover;background-position:center;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.bgchip:hover{transform:scale(1.12)}
.bgchip[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);
}
/* «без фотографии» — перечёркнутый кружок, понятно без подписи */
.bgchip.none{position:relative;overflow:hidden}
.bgchip.none::after{
  content:"";position:absolute;left:-2px;right:-2px;top:17px;height:1px;
  background:var(--muted);transform:rotate(-45deg);
}

/* На узком экране кружки уезжают под шапку отдельной строкой:
   в самой шапке им тесно рядом с бургером. */
@media (max-width:860px){
  /* Раньше кружки уходили отдельной строкой под шапку — их было четыре
     и в строку они не помещались. Теперь кружок один, и они спокойно
     встают рядом с бургером. */
  /* Кружки ближе к бургеру: на телефоне между ними и краем оставался
     провал, а имя при этом жалось. */
  .top{flex-wrap:nowrap;gap:8px}
  .tools{--chip:36px;gap:7px;margin-left:auto}
  .burger{margin-left:2px}
  /* Рукописное имя на телефоне мельче: при прежнем кегле оно занимало
     всю ширину и выталкивало кнопки на вторую строку. Слоган подтянется
     сам — он посчитан долей от этого числа. */
  .brand{--n:46px}
}
@media (max-width:420px){
  .brand{--n:38px}
  .tools{--chip:33px}
  .top{padding-left:14px;padding-right:14px;gap:8px}
}

/* Текст поверх фотографии.

   Сам снимок не трогаем — он должен выглядеть как оригинал. Вместо
   общего затемнения даём буквам мягкое свечение цвета страницы: на
   светлых кадрах его не видно вовсе, а на пёстрых оно отделяет текст
   от фона. Плашки и кнопки со своим фоном свечение выключают — там
   оно только мылит края. */
body.hasbg main{
  text-shadow:0 0 10px var(--cream), 0 0 26px var(--cream), 0 1px 2px var(--cream);
}
body.hasbg .btn,
body.hasbg footer,
body.hasbg footer *,
body.hasbg .demoband,
body.hasbg .askqr,
body.hasbg .askqr *,
body.hasbg .ph,
body.hasbg .tags li,
body.hasbg .ph *{text-shadow:none}

/* Подвал при фотофоне становится полупрозрачным: иначе снимок обрывается
   за треть экрана до конца страницы, а прокрутка обещала показать его весь.
   Тёмного в нём остаётся достаточно, чтобы светлый текст читался. */
body.hasbg footer{background:color-mix(in srgb,var(--choco) 82%,transparent)}

/* ── выбор языка ──────────────────────────────────────────────────────
   Глобус слева от кнопки фона, список падает из-под него. Флаги рисуем,
   а не берём эмодзи: на Windows флаговые эмодзи показываются парой букв. */

/* ── выбор языка кружками ─────────────────────────────────────────────
   Виден один кружок с кодом текущего языка. Нажатие раскрывает соседние,
   выбор снова оставляет один. Раскрываются влево: группа прижата к правому
   краю, и места у неё только с этой стороны. */
.langpick{display:flex;align-items:center;gap:8px;position:relative}
.langmenu{display:flex;align-items:center;gap:8px}
.lang{
  width:var(--chip);height:var(--chip);flex:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--choco-2);background:var(--cream-2);
  border:1px solid var(--hair);
  transition:transform .16s,box-shadow .16s,border-color .16s,color .16s;
}
.lang:hover{transform:scale(1.12);color:var(--accent);border-color:var(--accent)}
.lang.now{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.langpick.open .lang.now{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);
}
/* Свёрнутые соседи не просто прозрачны, а не занимают места: иначе
   в шапке зияла бы дыра там, где их не видно. */
.lang.extra{
  width:0;padding:0;margin:0;opacity:0;pointer-events:none;
  border-width:0;overflow:hidden;
  transition:width .22s cubic-bezier(.22,.8,.3,1),opacity .18s,margin .22s;
}
.langpick.open .lang.extra{
  width:var(--chip);opacity:1;pointer-events:auto;border-width:1px;
}
/* На телефоне список падает столбиком вниз, а не разъезжается вбок.
   Вбок ему деваться некуда: он отжимал имя, и то на глазах меняло
   кегль. Отдельный слой поверх страницы — шапку он больше не двигает. */
@media (max-width:860px){
  .langmenu{
    position:absolute;top:calc(100% + 9px);right:0;z-index:40;
    flex-direction:column;gap:7px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s,transform .18s,visibility .18s;
  }
  .langpick.open .langmenu{opacity:1;visibility:visible;transform:none}
  /* Внутри столбика кружки всегда полного размера: схлопывание по ширине
     нужно было только горизонтальному варианту. */
  .lang.extra,.langpick.open .lang.extra{
    width:var(--chip);padding:0;margin:0;border-width:1px;overflow:visible;
    opacity:1;pointer-events:auto;transition:transform .16s,color .16s,border-color .16s;
  }
  .langmenu .lang.extra{
    box-shadow:0 6px 18px color-mix(in srgb,var(--choco-2) 18%,transparent);
  }
}

/* Кнопка «Как устроен NH-1» под карточкой с кодом презентации */
.askside{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:clamp(260px,24vw,304px)}
.askside .askqr{width:100%}
.askhow{display:block;text-align:center;text-decoration:none;font-family:Unbounded,Onest,"Golos Text",sans-serif;
  font-size:14px;letter-spacing:.02em;color:#1C1428;padding:13px 18px;border-radius:999px;
  background:linear-gradient(100deg,#9FE0D2 0%,#EFE4D6 50%,#D8C2E2 100%);
  box-shadow:0 2px 4px rgba(28,20,40,.10),0 10px 26px rgba(28,20,40,.16);transition:transform .18s,box-shadow .18s}
.askhow:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(28,20,40,.12),0 14px 32px rgba(28,20,40,.24)}
.askhow::after{content:" →"}
/* «Как устроен NH-1» сверху, компактно (~30%); карточка с кодом под ней, крупно (~70%) */
.askside .askhow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:16px 18px;font-size:clamp(15px,1.5vw,17px)}
.askside .askhow{min-height:170px;font-size:clamp(20px,2vw,24px);line-height:1.25;border-radius:26px;padding:22px 20px}
@media (max-width:760px){.askside .askhow{min-height:130px}}
/* оба блока пропорционально на 40% меньше */
.askside{zoom:.6}


/* NH-1 editorial design. Append-only overrides; bakery styles stay scoped. */
.askside{zoom:1;width:clamp(260px,25vw,320px);gap:14px}
.askside .askhow{min-height:104px;font-size:18px;line-height:1.45;border-radius:22px;padding:24px;text-align:left;justify-content:space-between;gap:16px;background:linear-gradient(120deg,#9FE0D2,#EFE4D6 65%,#D8C2E2);box-shadow:0 8px 28px #1c142812}
.askside .askhow::after{font-size:24px;flex:none}
.askside .askqr{border-radius:24px;padding:28px;gap:16px;box-shadow:0 14px 36px #1c142820}
.askside .askqr-name{font-size:38px}
.askside .askqr-title{font-size:14px;line-height:1.5}
.askside .askqr-code{width:180px;max-width:100%;border:8px solid #fff;background:#fff;border-radius:12px}
.askside .askqr-hint{font-size:12px;letter-spacing:.03em;line-height:1.5}
.askside a:focus-visible{outline:3px solid #328674;outline-offset:5px}
@media(max-width:900px){.askside{width:min(100%,360px);justify-self:center}}
@media(prefers-reduced-motion:reduce){.askside a{transition:none}.askside a:hover{transform:none}}

body.how-page{--bg:#F7F3EF;--card:#FFFCF9;--ink:#1C1428;--soft:#665C70;--hair:#DED5E3;--mint:#287D6C;--mint-bg:#E1F2EC;--warn:#755620;--warn-bg:#F2EADB;color-scheme:light;background:var(--bg);color:var(--ink);font:17px/1.7 "Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;background-attachment:scroll}
.how-page .wrap{max-width:1080px;padding-inline:32px}
.how-page header.top{position:relative;display:block;padding:28px 0 76px;backdrop-filter:none;border:0;background:radial-gradient(ellipse at 95% 0%,#d8c2e21a,transparent 55%),linear-gradient(145deg,#261C35,#1C1428);color:#EFE4D6}
.how-page .bar{margin-bottom:68px}
.how-page .bar a.back{font-size:14px;color:#EFE4D6}
.how-page .langs{padding:4px;border:1px solid #d8c2e22e;border-radius:999px;gap:2px}
.how-page .langs button{min-height:38px;min-width:44px;border:0;letter-spacing:.02em;padding:6px 12px}
.how-page .langs button[aria-pressed="true"]{background:#9FE0D2;color:#1C1428}
.how-page .eyebrow{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.16em;color:#9FE0D2;margin-bottom:20px}
.how-page h1{font-family:system-ui,sans-serif;font-weight:500;letter-spacing:-.04em;font-size:clamp(34px,4.5vw,58px);line-height:1.12;max-width:900px;text-wrap:balance;margin-bottom:24px}
.how-page .sub{font-size:clamp(17px,2vw,21px);color:#D8C2E2;line-height:1.65;max-width:60ch}
.how-page main{padding-block:0 72px}
.how-page .how-nav{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0;border-bottom:1px solid var(--hair)}
.how-page .how-nav a{font-size:13px;text-decoration:none;line-height:1.4;color:var(--soft);padding:10px 14px;border:1px solid var(--hair);border-radius:999px;background:var(--card)}
.how-page .how-nav a:hover{color:var(--mint);border-color:var(--mint)}
.how-page section{margin:0;padding:56px 0;border-bottom:1px solid var(--hair);scroll-margin-top:24px;transition:opacity .5s ease,transform .5s ease}
.how-page section.reveal-pending{opacity:0;transform:translateY(18px)}
.how-page section:last-child{border-bottom:0;padding-bottom:0}
.how-page h2{font-family:system-ui,sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.025em;line-height:1.25;margin-bottom:24px;color:var(--ink)}
.how-page h3{font-family:inherit;letter-spacing:-.01em;font-weight:600}
.how-page section>p{max-width:76ch;color:var(--soft)}
.how-page .intro .lead{font-size:clamp(19px,2.2vw,24px);line-height:1.6;color:var(--ink);max-width:68ch}
.how-page .flow{gap:12px;margin:0 0 24px}
.how-page .flow div{flex:1 1 140px;padding:20px 14px;border-radius:18px;font-size:14px;text-align:left;line-height:1.5}
.how-page .flow div b{font-size:12px;width:28px;height:28px;display:grid;place-items:center;background:var(--mint-bg);border-radius:50%;margin-bottom:14px}
.how-page .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.how-page .card{border:1px solid var(--hair);background:var(--card);border-radius:20px;padding:26px;box-shadow:0 4px 18px #1c142804}
.how-page .card h3{font-size:18px;line-height:1.4;margin-bottom:10px}
.how-page .card p{font-size:15px;line-height:1.7;color:var(--soft);margin:0}
.how-page .tag{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 10px;margin-bottom:16px}
.how-page .tag.plan{color:var(--soft);background:var(--bg)}
.how-page h3.sm{font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);margin:36px 0 16px;padding-left:14px;border-left:3px solid var(--mint)}
.how-page .rules{border-spacing:0;border-collapse:separate;border-radius:18px;font-size:15px;background:var(--card)}
.how-page .rules th,.how-page .rules td{width:50%;padding:20px 24px;line-height:1.65;overflow-wrap:anywhere}
.how-page .rules th{font-size:11px;letter-spacing:.06em;background:var(--mint-bg);color:var(--mint)}
.how-page .rules td:first-child{font-weight:500}
.how-page .rules td:last-child{color:var(--soft)}
.how-page ul.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:12px 24px}
.how-page ul.ticks li{padding:16px 0 16px 24px;font-size:15px;line-height:1.6}
.how-page ul.ticks li::before{width:7px;height:7px;left:0;top:25px}
.how-page .try{padding:32px;border:1px solid #D8C2E233;border-radius:24px;background:linear-gradient(140deg,#261C35,#1C1428)}
.how-page .try p{max-width:70ch;color:#EFE4D6}
.how-page .btn{font:600 15px/1.5 system-ui,sans-serif;padding:14px 24px;color:#1C1428;background:linear-gradient(100deg,#9FE0D2,#EFE4D6 70%,#D8C2E2);border:0;margin-top:16px}
.how-page .limits{padding:24px;border:1px solid var(--hair);background:var(--warn-bg);border-radius:18px}
.how-page footer{display:block;margin:0;background:var(--bg);color:var(--soft);padding:24px 0 40px;border-top:1px solid var(--hair);font-size:13px}
.how-page a:focus-visible,.how-page button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
@media(prefers-color-scheme:dark){body.how-page{--bg:#1C1428;--card:#261C35;--ink:#EFE4D6;--soft:#C4B5CF;--hair:#44364F;--mint:#9FE0D2;--mint-bg:#253B3B;--warn:#EFE4D6;--warn-bg:#30263A;color-scheme:dark}}
@media(max-width:600px){.how-page .wrap{padding-inline:20px}.how-page header.top{padding:20px 0 44px}.how-page .bar{margin-bottom:40px}.how-page .eyebrow{font-size:10px}.how-page section{padding:36px 0}.how-page .grid{grid-template-columns:1fr}.how-page .card{padding:22px}.how-page ul.ticks{grid-template-columns:1fr;padding:8px 20px}.how-page .flow div{flex-basis:calc(50% - 12px)}.how-page .flow div:last-child{flex-basis:100%}.how-page .rules th,.how-page .rules td{padding:14px 12px;font-size:13px}.how-page .rules th{font-size:10px}.how-page .try{padding:24px}.how-page .how-nav{gap:6px}.how-page .how-nav a{font-size:12px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.how-page{scroll-behavior:auto}.how-page section{transition:none}.how-page section.reveal-pending{opacity:1;transform:none}.how-page .btn:hover{transform:none}}

/* Compact, non-sticky explanation header; never overlap reading content. */
.how-page header.top{position:static;top:auto;z-index:auto;padding:24px 0 40px}
.how-page .bar{margin-bottom:32px}
.how-page h1{font-size:clamp(30px,3.6vw,46px);line-height:1.18;margin-bottom:18px;overflow-wrap:break-word}
.how-page .sub{font-size:18px}
@media(max-width:600px){.how-page header.top{padding:16px 0 28px}.how-page .bar{margin-bottom:24px}.how-page .sub{font-size:16px}}

/* Tool availability is shown once per block, not on every card. */
.how-page .tool-block{margin-top:28px;padding:24px;border:1px solid var(--hair);border-radius:24px}
.how-page .tool-live{border-top:3px solid var(--mint)}
.how-page .tool-optional{border-top:3px solid #B49AC4}
.how-page .tool-heading{font-size:22px;line-height:1.4;margin:0 0 22px}
.how-page h4.sm{font-size:17px;line-height:1.4;margin:28px 0 16px;font-weight:600;color:var(--soft)}
.how-page .card h4{font:600 18px/1.4 inherit;font-family:inherit;font-size:18px;font-weight:600;line-height:1.4;margin:0 0 10px;letter-spacing:-.01em}
@media(max-width:600px){.how-page .tool-block{padding:16px}.how-page .tool-block .card{padding:18px}}

/* Optional integrations: compact readable rows, with all descriptions retained. */
.how-page .tool-optional .grid{gap:0 24px}
.how-page .tool-optional .card{padding:14px 0;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;box-shadow:none}
.how-page .tool-optional .card h4{font-size:16px;line-height:1.4;margin-bottom:4px}
.how-page .tool-optional .card p{font-size:14px;line-height:1.55}
.how-page .tool-optional h4.sm{margin:24px 0 4px;font-size:15px;color:var(--mint)}
.how-page .tool-optional .tool-heading{margin-bottom:12px}
@media(min-width:960px){.how-page .tool-optional .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.how-page .tool-optional .card{padding:12px 0}.how-page .tool-optional h4.sm{margin-top:20px}}

/* Soft brand tones separate reading sections and integration categories. */
body.how-page{--tone-mint:#E9F4EF;--tone-lavender:#F0E9F5;--tone-pearl:#F3EBE1}
.how-page main>section{margin:24px 0;padding:32px;border:1px solid var(--hair);border-radius:24px;background:var(--tone-pearl)}
.how-page main>section:nth-of-type(3n+1){background:var(--tone-mint)}
.how-page main>section:nth-of-type(3n+2){background:var(--tone-lavender)}
.how-page main>section:last-child{padding-bottom:32px}
.how-page main>section>h2{padding-left:16px;border-left:4px solid var(--mint)}
.how-page main>section:nth-of-type(3n+2)>h2{border-left-color:#A584B8}
.how-page main>section:nth-of-type(3n)>h2{border-left-color:#B39777}
.how-page .tool-block{background:var(--card)}
.how-page .integration-group{margin-top:14px;padding:18px 20px;border:1px solid var(--hair);border-left:3px solid var(--mint);border-radius:16px;background:var(--tone-mint)}
.how-page .integration-group:nth-of-type(3n+2){background:var(--tone-lavender);border-left-color:#A584B8}
.how-page .integration-group:nth-of-type(3n){background:var(--tone-pearl);border-left-color:#B39777}
.how-page .tool-optional .integration-group h4.sm{margin:0 0 6px;color:var(--ink);font-size:16px}
.how-page .tool-optional .integration-group .card{border-bottom:0;padding:10px 0}
@media(prefers-color-scheme:dark){body.how-page{--tone-mint:#203332;--tone-lavender:#30233D;--tone-pearl:#332B30}}
@media(max-width:600px){.how-page main>section{padding:22px 16px;margin:18px 0;border-radius:20px}.how-page main>section:last-child{padding-bottom:22px}.how-page .tool-block{padding:14px}.how-page .integration-group{padding:14px}.how-page main>section>h2{padding-left:12px}.how-page .tool-optional .integration-group .card+.card{border-top:1px solid var(--hair)}}

/* Quiet editorial treatment: neutral surfaces and restrained mint accents. */
.how-page main>section,
.how-page main>section:nth-of-type(3n+1),
.how-page main>section:nth-of-type(3n+2){background:var(--card)}
.how-page main>section>h2,
.how-page main>section:nth-of-type(3n+2)>h2,
.how-page main>section:nth-of-type(3n)>h2{border-left:0;padding-left:0}
.how-page .tool-block{border:0;border-radius:0;padding:0;background:transparent}
.how-page .tool-optional{margin-top:36px;padding-top:28px;border-top:1px solid var(--hair)}
.how-page .tool-heading{font-size:20px}
.how-page .integration-group,
.how-page .integration-group:nth-of-type(3n+2),
.how-page .integration-group:nth-of-type(3n){background:var(--bg);border:1px solid var(--hair);border-radius:12px;padding:16px 20px}
.how-page .tool-optional .integration-group h4.sm{color:var(--mint);font-size:15px}
.how-page .card{box-shadow:none}
@media(max-width:600px){.how-page .tool-block{padding:0}.how-page .tool-optional{padding-top:24px}.how-page .integration-group{padding:14px}}

/* блок «Как устроен NH-1» + QR: на 40% меньше, как просил владелец */
.askside{zoom:.6}