@charset "utf-8";
/* ============================================================
   gigolaev.com — таблица стилей
   Рефакторинг: 15.08.2026

   Cascade layers по возрастанию силы:
   tokens → reset → base → components → pages → states

   Принцип: базовые стили не зависят от страниц; компоненты переиспользуемы;
   page-композиции отделены от компонентов; состояния и responsive-правила
   находятся в последнем слое и переопределяют систему предсказуемо.
   ============================================================ */

@layer tokens, reset, base, components, pages, states;

@layer tokens{
:root{
  --paper:#EAE6DC;
  --sand:#DFD8C6; --sand-hi:#E8E2D3;
  --lift:#F6F4ED; --lift-hi:#FCFBF7;
  --ink:#1D1A16; --ink-soft:#4E4A44;
  --accent:#A13E23; --accent-hi:#BB5334; --accent-deep:#7C2F19; --accent-warm:#E8A585;
  --tint:rgba(168,69,42,.09);
  --dark:#221E19; --dark-hi:#312B24; --on-dark:#F0EBE1; --on-dark-soft:#C0B8AA;
  --on-accent:#FDF9F3; --on-accent-soft:#FAECE2;
  --rule:#8B826C;
  --glow:rgba(232,165,133,.22);

  /* Семантика: правило берёт роль, а не материал. */
  --text:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-accent:var(--accent);
  --text-inverse:var(--on-dark);
  --text-inverse-secondary:var(--on-dark-soft);
  --text-on-accent:var(--on-accent);
  --bg:var(--paper);
  --bg-card:var(--lift);
  --bg-band:var(--sand);
  --bg-dark:var(--dark);
  --border:var(--rule);
  --serif:"Literata","Literata Fallback",Georgia,serif;
  --sans:"Golos Text","Golos Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav:66px;
  color-scheme:light;

  /* Отступы по ролям. Значения из шкалы, роль важнее места. */
  --sp-секция:clamp(56px, 36px + 5vw, 96px);    /* обычный раздел */
  --sp-глава:clamp(64px, 42px + 5.6vw, 112px);  /* крупная глава */
  --sp-пауза:clamp(48px, 30px + 4.4vw, 80px);   /* короткая пауза */
  --sp-заголовок:48px;                          /* от заголовка блока к содержимому */
  --sp-строка:28px;                             /* поля строки в ленте */
  --sp-внутри:12px;                             /* от заголовка строки к описанию */
  --sp-карточка:28px;                           /* поля светлой карточки */
  --sp-карточка-тёмная:40px;                    /* поля тёмной карточки */
  --sp-действие:28px;                           /* перед кнопкой */
  --sp-примечание:20px;                         /* перед примечанием */
  --sp-абзац:20px;                              /* между абзацами */
  --sp-часть:28px;                              /* между частями блока: текст, список, плашка */
  --sp-сетка:32px;                              /* просвет сетки */
  --sp-колонки:72px;                            /* между колонками блока */
  --sp-подчёркивание:.25em;                     /* от базовой линии до подчёркивания
                                                   ссылки. Единственный отступ в em,
                                                   и намеренно: должен расти с кеглем,
                                                   иначе линия задевает хвосты «р» и «у» */

  /* Скругления: три ступени, четвёртой нет. */
  --r-sm:12px; --r-md:18px; --r-lg:24px;

  /* Линии: три роли. */
  --line:1px; --line-акцент:2px; --line-цитата:3px;

  /* Движение: три ступени шкалы, шаг каскада и одна кривая.
     Медленная ступень .6s — появление блоков и раскрытие ответов. Пробовали
     .38s ради «не успевает при быстрой прокрутке»: вышло суетливо, вернули. */
  --t-быстро:.18s; --t-обычно:.25s; --t-медленно:.6s; --t-шаг:.06s;
  --e:cubic-bezier(.2,.7,.2,1);

  /* Размах сноса светового пятна за проход блока через экран. Отсюда его
     читает скрипт в partial-scripts.html — менять величину только здесь.
     Пройденные значения: 22/14 — почти незаметно, 150/100 — нарочито крупно,
     ставились ради наглядности. Нынешние 60/40 приняты как рабочие. */
  --glow-amp-x:60px;
  --glow-amp-y:40px;

  --focus:0 0 0 3px rgba(168,69,42,.2);
  --surface-shadow:0 1px 2px rgba(58,40,26,.04),inset 0 1px 0 rgba(255,255,255,.8);
  --overlay-shadow:0 28px 80px rgba(29,26,22,.28);
  --dark-shadow:0 24px 55px rgba(58,40,26,.18),inset 0 1px 0 rgba(255,255,255,.1);
  --media-shadow:0 4px 12px rgba(58,40,26,.07),0 24px 58px rgba(58,40,26,.13),inset 0 1px 0 rgba(255,255,255,.7);
  --action-shadow:0 2px 4px rgba(58,40,26,.06),0 9px 20px rgba(168,69,42,.2),inset 0 1px 0 rgba(255,255,255,.2);

  /* Размеры по ролям. Границы — ступени шкалы, между ними линейный рост. */
  --fs-страница:clamp(2.188rem, 1.138rem + 4.3vw, 4.312rem);
  --fs-блок:clamp(1.75rem, 1.256rem + 2.03vw, 2.75rem);
  --fs-плакат:clamp(2.188rem, 1.57rem + 2.53vw, 3.438rem);
  --fs-указатель:clamp(1.375rem, 0.974rem + 1.65vw, 2.188rem);
  --fs-фраза:clamp(1.375rem, 1.19rem + 0.76vw, 1.75rem);
  --fs-ведущий:1.375rem;                        /* 22px, ступень +1: лид на ступень
                                                   выше тела на любой ширине. Был
                                                   clamp 18→22, но на телефоне нижний
                                                   конец совпадал с телом. Двадцати
                                                   в шкале размеров нет. */
  --fs-подзаголовок-крупный:1.75rem;
  --fs-подзаголовок:1.375rem;
  --fs-тело:1.125rem;
  --fs-вторичный:1rem;
  --fs-служебный:0.875rem;
  --fs-метка:0.75rem;

  /* Межстрочное: шесть ступеней, чем крупнее — тем плотнее. */
  --lh-цифра:1;
  --lh-плакат:1.02;
  --lh-заголовок:1.09;
  --lh-подзаголовок:1.2;
  --lh-фраза:1.36;
  --lh-служебный:1.45;
  --lh-текст:1.55;
  /* Разрядка. Положительная — прописные мелким кеглем, там она нужна для
     читаемости. Отрицательная — оптическая компенсация: чем крупнее кегль,
     тем плотнее набор, как в шкале межстрочного. */
  --tr-метка:.16em;           /* надзаголовок, рубрика, заголовок рубрики */
  --tr-метка-узкая:.19em;     /* тот же надзаголовок на экранах ≤620: кегль там
                                 12px вместо 14, и просвет держим не меньше
                                 широкого экрана — .19em×12px = 2.28px против 2.24px */
  --tr-подпись:.14em;         /* подписи на плашках, даты в карточках */
  --tr-единица:.05em;         /* единица после числа: «мин», «сессий» */
  --tr-плакат:-.035em;        /* h1 */
  --tr-плакат-узкий:-.03em;   /* h1 на экранах ≤620 */
  --tr-заголовок:-.026em;     /* h2, крупная фраза .saying */
  --tr-число:-.025em;         /* крупные цифры: факт, цена */
  --tr-фраза:-.014em;         /* .mid — крупный абзац серифом */
  --tr-подзаголовок:-.012em;  /* h3, summary, заголовки карточки места */

  /* Мера строки. Единица ch намеренно: она держит длину строки, а не
     ширину. Один и тот же токен при кеглях 14, 16 и 18 даёт 58, 61 и 64
     знака — в пикселях расходится, в знаках почти нет.
     Имена — по ролям. У каждой роли своя мера, даже когда число совпадает
     с соседней: одинаковое значение сегодня не значит одну роль. */
  --m-заголовок:13ch;      /* h1 */
  --m-плакат:23ch;         /* .saying — крупная фраза на тёмной полосе */
  --m-фраза:40ch;          /* .mid вне разворота, цитаты */
  --m-лид:40ch;            /* .lede — лид страницы рядом с портретом */
  --m-ремарка:40ch;        /* .saying-note — подпись при крупной фразе */
  --m-ведущий:52ch;        /* ведущий абзац блока: .sub и абзацы внутри */
  --m-вступление:52ch;     /* .mid в развороте «обо мне»: серифом, крупно */
  --m-лид-широкий:52ch;    /* .lede на 404 — рядом нет второй колонки */
  --m-пояснение:52ch;      /* .compact-row p — описание под строкой списка */
  --m-примечание:52ch;     /* .docs .note — примечание в раскрывающемся блоке */
  --m-тело:62ch;           /* сплошной текст страницы */
  --m-сноска:62ch;         /* .crisis — сноска в подвале */
  --m-статья:42rem;                             /* колонка страницы статьи: заголовок,
                                                   лид, дата и текст одной ширины.
                                                   Не в ch: ch зависит от шрифта элемента,
                                                   а в колонке четыре разных кегля. */

  /* Пропорции медиа. */
  --ar-портрет:4/5;
  --ar-кадр:4/3;
  --ar-квадрат:1/1;
  --ar-широкий:16/11;
}
}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,picture,canvas{display:block;max-width:100%;height:auto}
  img,video{object-fit:cover}
  button,input,select,textarea{font:inherit;color:inherit;margin:0}
  button{background:none;border:0}
  button:not(:disabled){cursor:pointer}
  button:disabled{cursor:not-allowed}
  ul,ol{margin:0;padding:0;list-style:none}
  table{border-collapse:collapse;width:100%}
  th,td{text-align:left;padding:0}
  h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
}

@layer base{
@font-face{font-family:"Literata Fallback";src:local("Georgia"),local("Times New Roman");
  size-adjust:106%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Golos Fallback";src:local("Helvetica Neue"),local("Arial");
  size-adjust:98%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
h1,h2,h3{hyphens:manual}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:var(--sans);font-size:var(--fs-тело);line-height:var(--lh-текст);
  background:
    radial-gradient(920px 620px at 8% -400px,rgba(255,253,247,.98),rgba(255,253,247,0) 68%),
    radial-gradient(720px 520px at 94% 1000px,rgba(232,165,133,.16),rgba(232,165,133,0) 68%),
    var(--bg);
  background-repeat:no-repeat,no-repeat,repeat;
  background-attachment:scroll;overflow-wrap:anywhere;hyphens:auto;
  /* Без ограничения браузер рвёт слово из пяти букв и оставляет одну на
     строке: «врем-я», «Можн-о», «жизн-и». Минимум восемь букв в слове,
     четыре до переноса и четыре после. Замер 27.08: переносов на главной
     при 390px стало 19 вместо 55, неудачных 7 вместо 40, лесенка дефисов
     на политике — 3 строки подряд вместо 10. */
  hyphenate-limit-chars:8 4 4}
::selection{background:var(--tint);color:var(--accent-deep)}
a{color:inherit;text-decoration:none}
/* text-wrap:balance стоит у ролей, чьи строки реально переносятся: h1 (32
   многострочных замера из 36), h2 (136 из 240), h3 (12 двухстрочных из 192),
   крупная фраза .mid/.saying (8 из 8, до 4 строк) и лид .lede/.article-lede
   (24 из 24, до 5 строк). Надзаголовку не нужен: он двухстрочный только
   на 390px и только в трёх местах из 164, да и .eyebrow — флекс-контейнер.
   Описанию блока .sub не ставим: там до 7 строк, за пределом, который
   браузеры вообще балансируют. Тела текста свойство не касается. */
h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-страница);line-height:var(--lh-плакат);
  letter-spacing:var(--tr-плакат);margin:0 0 24px;max-width:var(--m-заголовок);text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-блок);line-height:var(--lh-заголовок);
  letter-spacing:var(--tr-заголовок);margin:0 0 16px;text-wrap:balance}
h3{font-family:var(--serif);font-weight:400;letter-spacing:var(--tr-подзаголовок);line-height:var(--lh-подзаголовок);text-wrap:balance}
section{padding:var(--sp-секция) 0;position:relative}
section[id]{scroll-margin-top:calc(var(--nav) + 14px)}
/* Колонка контактов в подвале — цель ссылок #contacts, когда JavaScript
   выключен. Шапка липкая, поэтому отступ тот же, что у секций. */
#contacts{scroll-margin-top:calc(var(--nav) + 14px)}
h2 em{font-style:italic;color:inherit}
}

@layer components{
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.nav{position:sticky;top:0;z-index:70;background:rgba(234,230,220,.82);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:var(--line) solid transparent;transition:border-color var(--t-обычно),box-shadow var(--t-обычно)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav)}
.brand{font-family:var(--serif);font-size:var(--fs-тело);display:flex;align-items:center;gap:8px}
.brand i{width:10px;height:10px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%, var(--accent-hi), var(--accent-deep))}
.links{display:flex;gap:24px;font-size:var(--fs-служебный);color:var(--text-secondary)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:8px}
.cta-short{display:none}
.burger span{display:block;height:1.5px;background:var(--text);margin:4px 0;transition:transform var(--t-обычно),opacity var(--t-обычно)}
.drawer{display:none;border-top:var(--line) solid var(--border);padding:12px 0 24px}
.drawer a{display:flex;align-items:center;min-height:44px;padding:12px 0;font-size:var(--fs-тело);font-family:var(--serif);border-bottom:var(--line) solid var(--border)}
.btn{display:inline-block;color:var(--text-on-accent);padding:12px 24px;border-radius:99px;
  font-size:var(--fs-вторичный);font-weight:500;white-space:nowrap;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:var(--action-shadow);
  transition:transform var(--t-быстро),box-shadow var(--t-быстро),filter var(--t-быстро)}
.btn-lg{padding:16px 32px;font-size:var(--fs-вторичный)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
  color:var(--accent);border:var(--line) solid rgba(168,69,42,.42);
  box-shadow:var(--surface-shadow)}
.btn-light{background:linear-gradient(180deg,#FFFDF8,var(--text-inverse));color:var(--dark);
  box-shadow:var(--action-shadow)}
.btn-dark{background:linear-gradient(180deg,var(--dark-hi),var(--dark));color:var(--text-inverse);
  box-shadow:var(--dark-shadow)}
.eyebrow{font-size:var(--fs-служебный);letter-spacing:var(--tr-метка);text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:8px;line-height:var(--lh-цифра)}
h1>.eyebrow,h2>.eyebrow{font-family:var(--sans)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%, var(--accent-hi), var(--accent-deep));position:relative;top:-0.5px}
.mid{font-family:var(--serif);font-size:var(--fs-фраза);line-height:var(--lh-фраза);
  letter-spacing:var(--tr-фраза);margin:0 0 20px;max-width:var(--m-фраза);text-wrap:balance}
.sub{font-size:var(--fs-тело);color:var(--text-secondary);margin:0;max-width:var(--m-ведущий)}
.head{max-width:var(--m-тело);margin:0 0 var(--sp-заголовок)}
.hero{position:relative;display:grid;
  grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;padding:40px 0 72px}
.hero>*{position:relative;z-index:1}
.lede{font-size:var(--fs-ведущий);line-height:var(--lh-текст);color:var(--text-secondary);max-width:var(--m-лид);margin:0 0 32px;text-wrap:balance}
.hero-cta{display:flex;gap:var(--sp-действие);flex-wrap:wrap;align-items:center}
/* Подчёркивание — text-decoration, а не border-bottom: рамка рисуется по
   низу коробки, а у ссылок с целью нажатия коробка высотой 44px, и линия
   уезжала на 23px от базовой линии. Смещение --sp-подчёркивание — ниже хвостов
   «р» и «у»: при кегле 16 они опускаются на 3.20 и 3.36px, линия начинается
   с 4.0px. Тот же токен у ссылок внутри статьи: подчёркивание на сайте одно.
   padding-bottom:3px — ровно то место, что занимали прежние 2px отступа
   и 1px границы. Держит высоту коробки прежней: без него ссылка в карточке
   места и в крошках статьи садилась на 3px и поднимала всё, что ниже. */
.textlink{color:var(--text-accent);font-size:var(--fs-вторичный);padding-bottom:3px;  /* вне шкалы: 3px держат высоту коробки от прежней рамки, см. пояснение выше */
  text-decoration:underline;text-decoration-thickness:var(--line);
  text-decoration-color:rgba(161,62,35,.75);text-underline-offset:var(--sp-подчёркивание);
  transition:text-decoration-color var(--t-обычно)}
/* Стрелка нарисована по центру прописных, а строка набрана строчными:
   замер дал середину стрелки на 0.096em (.textlink), 0.107em (шапка)
   и 0.101em (окно записи) выше середины строчных — в трёх местах и двух
   шрифтах одинаково. Опускаем на 0.1em. position:relative, а не
   vertical-align: сдвиг не входит в расчёт высоты строки и ничего не двигает.
   Перед .arrow в разметке стоит  , а не обычный пробел: .hero-cta и
   .place-card — флекс-контейнеры, и хвостовой пробел текстового узла перед
   соседним элементом там срезается — 28 ссылок теряли по 4px просвета.
   Неразрывный заодно не даёт стрелке уехать на строку одной. */
/* inline-block делает стрелку атомарной строчной коробкой, и подчёркивание
   ссылки сквозь неё не рисуется: линия кончается на тексте. Без этого
   она шла под стрелкой, а сама стрелка сидела на 1.6px ниже линии. */
/* Сдвиг задан vertical-align, а не position:relative, намеренно:
   vertical-align действует только на строчные коробки и молча игнорируется,
   когда стрелка оказывается флекс-элементом. А во флекс-ссылке сдвиг вреден —
   подчёркивание там рисуется и под стрелкой, и сдвинутая стрелка давала
   ступеньку в 1.5–1.75px. Одно правило вместо перечисления родителей:
   новая флекс-ссылка получит верное поведение сама. */
.arrow{display:inline-block;vertical-align:-.1em}
.hero-note{font-size:var(--fs-вторичный);color:var(--text-secondary);margin:var(--sp-примечание) 0 0}
.shot{position:relative}
.frame{border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:16px;
  background:linear-gradient(155deg,var(--sand-hi),var(--sand));
  box-shadow:var(--media-shadow)}
.frame span{font-size:var(--fs-метка);letter-spacing:var(--tr-подпись);text-transform:uppercase;color:var(--text-secondary)}
.hero .frame{aspect-ratio:var(--ar-портрет);border-radius:var(--r-lg)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);  /* вне шкалы: 1px — волосяная линия, просвет сетки показывает фон */
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--surface-shadow)}
.fact{padding:28px 24px;background:linear-gradient(170deg,var(--lift-hi),var(--lift))}
.fact b{display:block;font-family:var(--serif);font-weight:400;
  font-size:var(--fs-блок);line-height:var(--lh-цифра);
  margin-bottom:8px;letter-spacing:var(--tr-число)}
.fact u{font-family:var(--sans);font-size:var(--fs-вторичный);text-decoration:none;color:var(--text-secondary);
  letter-spacing:var(--tr-единица);margin-left:4px;vertical-align:3px}
.fact span{font-size:var(--fs-вторичный);color:var(--text-secondary);line-height:var(--lh-служебный);display:block}
.band{background:linear-gradient(180deg,var(--sand-hi),var(--bg-band))}
.band-dark{color:var(--text-inverse);
  background:linear-gradient(165deg,var(--dark-hi),var(--bg-dark) 55%)}
.band-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 78% 18%, rgba(232,165,133,.13), rgba(0,0,0,0) 70%)}
.band-dark>*{position:relative;z-index:1}
.band-dark .sub,.band-dark p{color:var(--text-inverse-secondary)}
.band-dark .mid,.band-dark h2,.band-dark h3{color:var(--text-inverse)}
.band-dark .eyebrow,.place-card .eyebrow{color:var(--accent-warm)}
.band-dark .eyebrow::before,.place-card .eyebrow::before{background:var(--accent-warm)}
/* тёмная карточка: акцент и обводка фокуса — тёплые, тёмно-красный на ней даёт 2,4 при норме 4,5 */
.place-card .textlink{color:var(--accent-warm);text-decoration-color:rgba(232,165,133,.75)}
.place-card :focus-visible{outline-color:var(--accent-warm)}
.band-accent{color:var(--text-on-accent);
  background:linear-gradient(160deg,var(--accent),var(--accent-deep) 88%)}
.band-accent::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 400px at 84% 12%, rgba(255,232,214,.16), rgba(0,0,0,0) 70%)}
.band-accent>*{position:relative;z-index:1}
.band-accent .sub,.band-accent p{color:var(--on-accent-soft)}
.band-accent .mid,.band-accent h2,.band-accent h3{color:var(--text-on-accent)}
.band-accent .eyebrow{color:var(--on-accent-soft)}
.band-accent .eyebrow::before{background:var(--on-accent-soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border-radius:var(--r-md);padding:var(--sp-карточка);
  background:linear-gradient(168deg,var(--lift-hi),var(--bg-card));
  box-shadow:var(--surface-shadow);transition:box-shadow var(--t-обычно)}
.card.wide{display:flex;flex-direction:column;justify-content:flex-start;min-height:224px}
.card h3{font-size:var(--fs-подзаголовок);margin:0 0 8px}
.card.wide h3{font-size:var(--fs-подзаголовок-крупный);margin-bottom:12px}
.card p{margin:0;font-size:var(--fs-тело);line-height:var(--lh-текст);color:var(--text)}
.card.wide p{font-size:var(--fs-тело);max-width:var(--m-ведущий);color:var(--text)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-сетка)}
.step{padding-top:24px;border-top:var(--line) solid var(--border)}
.step .n{font-family:var(--serif);font-size:var(--fs-указатель);line-height:var(--lh-цифра);color:var(--accent);
  letter-spacing:-.03em;margin-bottom:16px;opacity:.92}
.step h3{font-size:var(--fs-подзаголовок);margin:0 0 8px}
.step p{margin:0;color:var(--text-secondary);font-size:var(--fs-тело);line-height:var(--lh-текст)}
.plain{list-style:none;margin:28px 0 0;padding:0;max-width:var(--m-ведущий)}
.plain li{padding:16px 0 16px 28px;font-size:var(--fs-вторичный);color:var(--text-secondary);position:relative;
  border-top:var(--line) solid var(--border)}
.plain li:first-child{border-top:0;padding-top:0}
.plain li::before{content:"";position:absolute;left:0;top:28px;width:14px;height:2px;background:var(--accent)}
.plain li:first-child::before{top:10px}
.band-accent .plain li{color:var(--on-accent-soft);border-top-color:rgba(253,249,243,.24)}
.band-accent .plain li::before{background:var(--text-on-accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev>.shot{order:-1}
.split.about{grid-template-columns:.72fr 1fr;gap:56px}
.split.about .frame{aspect-ratio:var(--ar-портрет)}
.split .frame{aspect-ratio:var(--ar-квадрат)}
.frame-43{aspect-ratio:var(--ar-кадр)}
.split p{color:var(--text-secondary);max-width:var(--m-ведущий)}
.split .mid{max-width:var(--m-вступление)}
blockquote{margin:28px 0 0;padding-left:20px;border-left:var(--line-цитата) solid var(--accent);
  font-family:var(--serif);font-size:var(--fs-фраза);line-height:var(--lh-фраза);color:var(--text);max-width:var(--m-фраза)}
.bleed{position:relative;height:min(58svh,520px);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--dark-hi),var(--bg-dark))}
.bleed::after{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 460px at 30% 40%, rgba(232,165,133,.12), rgba(0,0,0,0) 72%)}
.bleed>span{position:relative;z-index:1;font-size:var(--fs-метка);letter-spacing:var(--tr-метка);text-transform:uppercase;color:var(--text-inverse-secondary)}
.price{border-radius:var(--r-md);padding:var(--sp-карточка);display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--lift-hi),var(--bg-card));
  box-shadow:var(--surface-shadow)}
.price.hi{color:var(--text-inverse);padding:var(--sp-карточка-тёмная);border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--dark-hi),var(--bg-dark));
  box-shadow:var(--dark-shadow)}
.price h3{font-size:var(--fs-подзаголовок);margin:0 0 4px}
.price .amt{font-family:var(--serif);font-size:var(--fs-блок);line-height:var(--lh-цифра);margin:16px 0 8px;letter-spacing:var(--tr-число)}
.price.hi .amt{color:var(--accent-warm)}
.price p{font-size:var(--fs-вторичный);color:var(--text-secondary);margin:0 0 24px}
.price.hi p{color:var(--text-inverse-secondary)}
.price .btn,.price .btn-ghost{margin-top:auto;text-align:center}
.tag{font-size:var(--fs-метка);letter-spacing:var(--tr-подпись);text-transform:uppercase;color:var(--accent)}
.price.hi .tag{color:var(--accent-warm)}
.place{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.place dl{margin:24px 0 0;display:grid;grid-template-columns:auto 1fr;gap:12px 24px;font-size:var(--fs-вторичный)}
.place dt{color:var(--text-secondary);font-size:var(--fs-метка);letter-spacing:.1em;text-transform:uppercase;padding-top:4px}
.place dd{margin:0}
.place .frame{aspect-ratio:var(--ar-широкий)}
.saying{max-width:var(--m-плакат);margin:0;font-family:var(--serif);
  font-size:var(--fs-плакат);line-height:var(--lh-заголовок);letter-spacing:var(--tr-заголовок);color:var(--text-inverse);text-wrap:balance}
.saying-note{color:var(--text-inverse-secondary);margin:0;max-width:var(--m-ремарка);font-size:var(--fs-тело);padding-bottom:12px}
.rows{border-top:var(--line) solid var(--border)}
.row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-сетка);align-items:baseline;
  padding:32px 0;border-bottom:var(--line) solid var(--border);transition:padding-left var(--t-обычно)}
.row h3{font-size:var(--fs-подзаголовок);margin:0 0 8px;transition:color var(--t-обычно)}
.row p{margin:0;color:var(--text-secondary);font-size:var(--fs-тело);max-width:var(--m-тело)}
.row .go{color:var(--accent);font-size:var(--fs-вторичный);white-space:nowrap}
details{border-top:var(--line) solid var(--border);padding:var(--sp-строка) 0;transition:background-color var(--t-обычно) ease;border-radius:var(--r-sm)}
details:last-of-type{border-bottom:var(--line) solid var(--border)}
summary{cursor:pointer;list-style:none;min-height:44px;font-family:var(--serif);font-size:var(--fs-подзаголовок);display:flex;
  justify-content:space-between;gap:20px;align-items:baseline;letter-spacing:var(--tr-подзаголовок)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:var(--fs-подзаголовок);line-height:var(--lh-цифра);flex:none;transition:transform var(--t-обычно) ease,color var(--t-обычно) ease}
details p{margin:16px 0 0;color:var(--text);max-width:var(--m-ведущий)}
.feature{display:block;border-radius:var(--r-lg);padding:var(--sp-карточка-тёмная);margin-bottom:16px;
  background:linear-gradient(168deg,var(--lift-hi),var(--bg-card));
  box-shadow:var(--surface-shadow);transition:transform var(--t-обычно),box-shadow var(--t-обычно)}
.feature .date{font-size:var(--fs-метка);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
  display:block;margin-bottom:16px}
.feature h3{font-size:var(--fs-подзаголовок-крупный);line-height:var(--lh-подзаголовок);margin:0 0 16px;max-width:var(--m-плакат);transition:color var(--t-обычно)}
.feature p{margin:0;color:var(--text-secondary);max-width:var(--m-ведущий);font-size:var(--fs-тело)}
.post-rows{border-top:var(--line) solid var(--border)}
.post-row{display:flex;justify-content:space-between;align-items:baseline;gap:28px;
  padding:20px 0;border-bottom:var(--line) solid var(--border);transition:padding-left var(--t-обычно)}
.post-row h3{font-size:var(--fs-подзаголовок);margin:0;transition:color var(--t-обычно)}
.post-row span{font-size:var(--fs-метка);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.final{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-сетка);align-items:center}
.final .frame{aspect-ratio:var(--ar-кадр);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  box-shadow:var(--media-shadow)}
.final .frame span{color:var(--text-inverse-secondary)}
footer{color:var(--text-inverse-secondary);padding:56px 0 64px;position:relative;background:linear-gradient(180deg,var(--dark),#191510);padding-bottom:calc(var(--sp-секция) + env(safe-area-inset-bottom,0px))}
.foot{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.foot ul{list-style:none;margin:0;padding:0}
/* Высота строки живёт на li, а не на ссылке: 44px цели нажатия задавались
   у .foot a, и строки без адреса — «Читательский клуб», «Sensa», адрес —
   выходили 27.9px вместо 44 и сбивали ритм колонки. */
.foot li{margin-bottom:2px;min-height:44px;display:flex;align-items:center}  /* вне шкалы: 2px — ритм строк подвала при цели нажатия 44px */
.foot a{display:inline-flex;align-items:center;min-height:44px}
.crisis{margin-top:var(--sp-строка);font-size:var(--fs-служебный);max-width:var(--m-сноска);padding:16px 20px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:var(--line) solid rgba(255,255,255,.09)}
.legal{margin-top:24px;font-size:var(--fs-служебный);color:var(--text-inverse-secondary)}
.rise{opacity:0;transform:translateY(20px);transition:opacity var(--t-медленно) var(--e),transform var(--t-медленно) var(--e)}
:root{}
.about-copy{max-width:none}
.credentials{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:28px 0 0;border-top:var(--line) solid var(--border)}
.credential{padding:16px 0;border-bottom:var(--line) solid var(--border);font-size:var(--fs-вторичный);color:var(--text-secondary)}
.credential b{display:block;color:var(--text);font-weight:500;margin-bottom:4px}
.safety-note{margin-top:var(--sp-строка);padding:var(--sp-карточка);border-radius:var(--r-sm);background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(255,255,255,.22));box-shadow:var(--surface-shadow)}
.safety-note p{margin:0;color:var(--text-secondary);font-size:var(--fs-тело)}
/* Зачины абзацев: у Golos Text на сайте два файла, 400 и 500. По умолчанию
   strong просит 700 — такого начертания нет, и браузер утолщает контуры сам.
   Ставим 500: единственный вес выделения, описанный в дизайн-системе. */
.safety-note strong{font-weight:500}
.scroll-progress{position:absolute;left:0;right:auto;bottom:-1px;width:0;height:2px;z-index:2;background:linear-gradient(90deg,var(--accent-deep),var(--accent-hi));box-shadow:none;will-change:width;display:block}
.faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--t-медленно) var(--e),opacity var(--t-медленно) ease}
.faq-answer-inner{overflow:hidden}
.band-dark p,.band-dark .sub,.band-dark li,.band-dark dd{color:var(--text-inverse-secondary)}
.band-dark h2,.band-dark h3,.band-dark .mid,.band-dark blockquote{color:var(--text-inverse)}
.band-accent p,.band-accent .sub,.band-accent li,.band-accent dd{color:var(--on-accent-soft)}
.band-accent h2,.band-accent h3,.band-accent .mid,.band-accent blockquote{color:var(--text-on-accent)}
.band-accent blockquote{border-left-color:var(--text-on-accent)}
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}  /* вне шкалы: -1px — приём скрытия ссылки от глаз, но не от скринридера */
.lede em{font-family:var(--serif);font-style:italic;color:var(--text)}
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.booking-dialog{width:min(1080px,calc(100vw - 36px));height:min(780px,calc(100dvh - 36px));padding:0;
  border:var(--line) solid rgba(107,90,70,.2);border-radius:var(--r-lg);color:var(--text);background:var(--bg);
  box-shadow:var(--overlay-shadow);overflow:hidden}
.booking-dialog::backdrop{background:rgba(29,26,22,.62);backdrop-filter:blur(7px)}
.booking-shell{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(150deg,#F8F5EE,#EEE8DB)}
.booking-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;
  border-bottom:var(--line) solid var(--border);background:rgba(253,249,243,.86)}
.booking-title{font-family:var(--serif);font-size:var(--fs-подзаголовок);line-height:var(--lh-подзаголовок)}
.booking-close{width:44px;height:44px;border:var(--line) solid var(--border);border-radius:50%;background:rgba(255,255,255,.46);
  color:var(--text);font-size:var(--fs-подзаголовок-крупный);line-height:var(--lh-цифра);cursor:pointer}
.booking-stage{position:relative;min-height:0;background:#F8F5EE}
.booking-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#F8F5EE}
.booking-loader{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-secondary);font-size:var(--fs-служебный);
  background:linear-gradient(150deg,#F8F5EE,#EEE8DB);transition:opacity var(--t-обычно);z-index:1}
.booking-help{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 20px;
  border-top:var(--line) solid var(--border);font-size:var(--fs-служебный);color:var(--text-secondary);background:rgba(253,249,243,.9)}
.booking-help a{color:var(--accent);border-bottom:var(--line) solid rgba(168,69,42,.3)}
.privacy-dialog{width:min(680px,calc(100vw - 36px));padding:0;border:var(--line) solid rgba(107,90,70,.2);border-radius:var(--r-lg);background:var(--bg);color:var(--text);box-shadow:var(--overlay-shadow);max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain}
.privacy-dialog::backdrop{background:rgba(29,26,22,.55);backdrop-filter:blur(6px)}
.privacy-copy{padding:28px}
.privacy-copy h2{font-size:var(--fs-подзаголовок-крупный)}
.privacy-copy .booking-title{color:var(--text);font-size:var(--fs-подзаголовок-крупный);margin:0 0 16px}
.privacy-copy p{color:var(--text-secondary)}
.privacy-copy .booking-close{position:absolute;right:18px;top:18px}
.safety-note p + p{margin-top:12px}
.hero-note .textlink{font-size:inherit}
.cards>.card{grid-column:span 4}
.cards>.card.wide,.cards>.note-card{grid-column:span 8}
.article{max-width:var(--m-тело)}
.article h2{margin:var(--sp-глава) 0 var(--sp-часть)}
.article h3{font-size:var(--fs-подзаголовок);margin:var(--sp-часть) 0 var(--sp-внутри)}
.article p{margin:0;color:var(--text)}
.article ul,.article ol{margin:0;padding-left:24px;color:var(--text)}
.article li + li{margin-top:var(--sp-внутри)}
.article blockquote{margin:0;padding-left:20px;border-left:var(--line-цитата) solid var(--accent);
  font-family:var(--serif);font-size:var(--fs-фраза);line-height:var(--lh-фраза);
  color:var(--text);max-width:var(--m-фраза)}
.article figure{margin:0}
.article figure img{width:100%;border-radius:var(--r-lg);box-shadow:var(--media-shadow)}
.article figcaption{margin-top:var(--sp-внутри);font-size:var(--fs-служебный);color:var(--text-secondary)}
.article table{width:100%;border-collapse:collapse;font-size:var(--fs-вторичный)}
.article th{text-align:left;font-weight:500;color:var(--text);
  padding:var(--sp-внутри) 0;border-bottom:var(--line-акцент) solid var(--border)}
.article td{padding:var(--sp-внутри) 0;border-bottom:var(--line) solid var(--border);color:var(--text-secondary)}
.article .footnote{font-size:var(--fs-служебный);color:var(--text-secondary);
  padding-top:var(--sp-часть);border-top:var(--line) solid var(--border)}
a,button,summary{-webkit-tap-highlight-color:rgba(168,69,42,.12)}
h1,h2,h3,.saying,.mid{overflow-wrap:break-word}
.booking-dialog,.privacy-dialog{padding-bottom:env(safe-area-inset-bottom,0px)}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article a:not([class]){color:var(--text-accent);text-decoration:underline;text-decoration-thickness:var(--line);text-underline-offset:var(--sp-подчёркивание)}
}

.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:520px;margin:0 auto;
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 20px;border-radius:var(--r-md);
  background:linear-gradient(168deg,var(--lift-hi),var(--lift));
  box-shadow:0 28px 80px rgba(29,26,22,.28);border:var(--line) solid var(--border)}
.cookie-note p{margin:0;font-size:var(--fs-служебный);color:var(--text-secondary);line-height:var(--lh-текст);flex:1 1 240px}
.cookie-note a{color:var(--text-accent);border-bottom:var(--line) solid rgba(161,62,35,.75)}
.cookie-note button{flex:none;padding:12px 24px;border-radius:99px;font-size:1rem;font-weight:500;
  color:var(--text-on-accent);background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:0 2px 4px rgba(58,40,26,.06),0 9px 20px rgba(168,69,42,.2);min-height:44px}
.cookie-note[hidden]{display:none}

.art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-сетка);margin-top:var(--sp-часть)}
/* Витрина схлопывается на общей границе 620, а не на своей: третья
   граница противоречила дизайн-системе. Правило лежит здесь же —
   .art-grid объявлен вне слоёв и перебил бы правило внутри слоя. */
@media (max-width:620px){.art-grid{grid-template-columns:1fr}}
/* Карточка витрины — светлая карточка сайта: тот же фон, тень, радиус и поля,
   что у .card, .price, .feature и .featured-note. Своих цветов, рамок и теней нет. */
.art-card{display:block;text-decoration:none;border-radius:var(--r-md);
  padding:var(--sp-карточка);
  background:linear-gradient(168deg,var(--lift-hi),var(--bg-card));
  box-shadow:var(--surface-shadow)}
.art-card:hover h2{color:var(--accent)}
.art-card .art-cat{font-size:var(--fs-метка);letter-spacing:var(--tr-метка);text-transform:uppercase;
  color:var(--accent);line-height:var(--lh-цифра)}
.art-card h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-подзаголовок);
  line-height:var(--lh-подзаголовок);margin:var(--sp-внутри) 0;color:var(--text);
  transition:color var(--t-обычно) ease}
.art-card p{font-size:var(--fs-вторичный);line-height:var(--lh-текст);
  color:var(--text-secondary);margin:0 0 var(--sp-внутри)}
.art-card .art-date{font-size:var(--fs-метка);color:var(--text-secondary);line-height:var(--lh-цифра)}
/* Рубрики — строки ленты: поля строки, нижняя граница, заголовок в акценте при наведении. */
.art-archive{margin-top:var(--sp-внутри)}
.art-group{margin-bottom:var(--sp-часть)}
.art-group-title{font-size:var(--fs-служебный);letter-spacing:var(--tr-метка);text-transform:uppercase;
  color:var(--accent);font-weight:500;line-height:var(--lh-цифра);margin:0 0 var(--sp-внутри)}
.art-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-сетка);
  text-decoration:none;padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border)}
.art-row:hover h3{color:var(--accent)}
.art-row h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-подзаголовок);
  margin:0;color:var(--text);line-height:var(--lh-подзаголовок);transition:color var(--t-обычно) ease}
.art-row .art-date{font-size:var(--fs-метка);color:var(--text-secondary);flex:none}
.article{max-width:var(--m-тело,680px);margin:24px auto 0}
.article h1{margin:0 0 12px}
.article-date{font-size:var(--fs-служебный);color:var(--text-secondary);margin:0}
.article-body p{font-size:var(--fs-тело);line-height:1.7;color:var(--text);margin:0 0 var(--sp-абзац)}
/* ── страница статьи на линиях сетки ──────────────────────────────
   Шапка и финал — девять колонок (1/10). Тело — восемь, со сдвигом
   вправо на одну колонку (2/10): это 82 знака в строке, а сдвиг
   выравнивает правый край тела с шапкой и финалом.
   На широких ширину задают только линии: никаких max-width, иначе
   мера порежет колонки обратно — 42rem это 672px, меньше девяти
   колонок, а базовый --m-заголовок:13ch порезал бы h1 до 538.
   Просвет только по горизонтали: вертикальные отступы задают сами блоки.
   Ниже 1000px сетка схлопывается, сдвиг не применяется,
   а ширину держит --m-статья. */
.article-head .wrap,.article-text .wrap,
.article-final .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 var(--sp-сетка);align-content:start}
.article-head .wrap>*,.article-final .wrap>*{grid-column:1 / 10}
.article-text .wrap>*{grid-column:2 / 10}
.article-head .wrap>*,.article-text .wrap>*,
.article-final .wrap>*{max-width:none}
.article-final .btn{justify-self:start}              /* кнопка по содержимому, а не во всю колонку */

/* ── лента /articles/ на линиях сетки ────────────────────────────
   Шапка, витрина, рубрики и финал — девять колонок (1/10), как
   на странице статьи. max-width снят: 42rem это 672px, меньше
   девяти колонок, мера порезала бы линии обратно. */
.article-list-head .wrap,.article-list-groups .wrap,
.article-list-final .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 var(--sp-сетка);align-content:start}
.article-list-head .wrap>*,.article-list-groups .wrap>*,
.article-list-final .wrap>*{grid-column:1 / 10;max-width:none}
.article-list-final .btn{justify-self:start}
@media (max-width:1000px){
  .article-list-head .wrap,.article-list-groups .wrap,
  .article-list-final .wrap{display:block}
}
@media (max-width:1000px){
  .article-head .wrap,.article-text .wrap,.article-final .wrap{display:block}
  .article-head .wrap>*,.article-text .wrap>*,
  .article-final .wrap>*{max-width:var(--m-статья)}
}
.article-head{padding-bottom:0}
.article-text{padding-top:var(--sp-заголовок)}
.article-text .article{margin:0}   /* у .article свой margin:auto — он бы центрировал тело, пока шапка прижата влево */
/* крошки одной строкой в виде надзаголовка: ● СТАТЬИ · РУБРИКА.
   Кружок, капс и разрядку даёт .eyebrow, здесь только отступ и ссылка.
   Выравнивание по базовой линии, а не по центру: у ссылки есть
   padding-bottom:3px под подчёркивание, её коробка на 3px выше соседнего
   текста, и при align-items:center базовые линии расходились на 1.5px.
   Кружок ::before текста не имеет — базовой линией ему служит низ коробки,
   поэтому он остаётся по центру отдельным правилом. */
.article-crumbs{margin:0 0 var(--sp-примечание);align-items:baseline}
.article-crumbs::before{align-self:center}
.article-crumbs .textlink{font-size:inherit;letter-spacing:inherit;color:inherit}
.article-final .btn,.article-list-final .btn{margin-top:var(--sp-действие)}
/* /privacy/ на линиях сетки. Документ длинный, поэтому без
   сдвига вправо: и шапка, и текст идут от левой линии на восемь колонок.
   Мера снята намеренно — восемь колонок это 738px, а --m-тело 692px
   порезал бы линии. Семь колонок пробовали: 642px давали 64 знака
   и растили документ на 645px. Ниже 1000px сетка схлопывается
   и ширину снова держит мера: без этого дети растянулись бы во всю колонку. */
.legal-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 var(--sp-сетка);align-content:start}
.legal-wrap>*{grid-column:1 / 9;max-width:none}
/* h1 живёт внутри .legal-page, до него правило выше не достаёт, а базовый
   --m-заголовок 13ch резал его до 538px внутри колонки в 738px. */
.legal-wrap h1{max-width:none}
@media (max-width:1000px){
  .legal-wrap{display:block}
  .legal-wrap>*{grid-column:auto;max-width:var(--m-тело)}
  .legal-wrap h1{max-width:var(--m-заголовок)}
}
.article-lede{font-family:var(--serif);font-style:italic;font-size:var(--fs-ведущий);
  line-height:var(--lh-фраза);color:var(--accent-deep);margin:0 0 var(--sp-часть);text-wrap:balance}

@layer pages{
.site-nav .links{gap:28px}
.hero-block h1{max-width:var(--m-заголовок)}
.portrait-frame,.room-frame,.detail-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    radial-gradient(500px 380px at 22% 8%,rgba(255,255,255,.85),rgba(255,255,255,0) 58%),
    linear-gradient(145deg,#E9DFCF 0%,#D6C6AE 50%,#B99A7D 100%);
  box-shadow:var(--media-shadow);}
.portrait-frame{aspect-ratio:var(--ar-портрет)}
.portrait-frame::after,.room-frame::after,.detail-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(34,30,25,.08));}
.photo-label{position:absolute;left:22px;bottom:18px;z-index:1;font-size:var(--fs-метка);letter-spacing:var(--tr-подпись);text-transform:uppercase;color:var(--text-secondary)}
.themes-block{overflow:hidden}
.themes-block::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-260px;top:-290px;background:radial-gradient(circle,rgba(255,255,255,.44),rgba(255,255,255,0) 68%)}
.theme-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--sp-колонки);
  border-top:var(--line) solid var(--border)}
.theme-row{grid-column:span 6;display:grid;grid-template-columns:64px 1fr;gap:0 24px;
  padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);
  align-items:baseline;align-content:start}
.theme-row .index{grid-column:1 / 2;font-family:var(--serif);
  font-size:var(--fs-указатель);
  line-height:var(--lh-цифра);color:var(--accent)}
.theme-row h3{grid-column:2 / 3;font-size:var(--fs-фраза);
  margin:0 0 var(--sp-внутри)}
.theme-row p{grid-column:2 / 3;margin:0;color:var(--text);font-size:var(--fs-тело);max-width:var(--m-тело)}
.theme-row-note{grid-column:1 / -1}
.theme-row-note .index{visibility:hidden}
.about-block{padding:112px 0}
.aside-intro p{max-width:var(--m-ведущий);margin:0 0 var(--sp-часть);color:var(--text-secondary);font-size:var(--fs-тело);line-height:var(--lh-текст)}
.aside-intro p.rules-more{margin-bottom:0}
.credentials.one-col{grid-template-columns:1fr}
.supervision{margin:var(--sp-часть) 0 0;font-size:var(--fs-тело)}
.pary-section{overflow:clip;isolation:isolate}
.pary-grid{display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(56px,6.2vw,var(--sp-колонки));align-items:start}
.pary-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  position:sticky;top:calc(var(--nav) + 34px)}
.pary-main>.sub{margin-bottom:24px}
.pary-position{max-width:var(--m-фраза);margin:0;padding:4px 0 4px 20px;border-left:var(--line-акцент) solid var(--accent);
  color:var(--text-secondary);font-family:var(--serif);font-size:var(--fs-фраза);line-height:var(--lh-фраза);letter-spacing:-.006em}
.pary-cta{margin-top:24px}
.pary-situations{padding-top:8px}
.pary-list{list-style:none;margin:0;padding:0;border-top:var(--line) solid var(--border)}
.pary-list li{padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);
  transition:padding-left var(--t-обычно) ease}
.pary-list h3{margin:0 0 var(--sp-внутри);font-size:var(--fs-подзаголовок)}
.pary-list p{max-width:var(--m-ведущий);margin:0;color:var(--text);font-size:var(--fs-тело);line-height:var(--lh-текст)}
.about-block .split{grid-template-columns:.82fr 1.18fr;gap:var(--sp-колонки)}
.position-band{padding:var(--sp-пауза) 0;overflow:hidden;position:relative}
.position-band::before{content:"";position:absolute;inset:auto -120px -240px auto;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,var(--glow),rgba(232,165,133,0) 67%)}
.position-grid .saying{max-width:var(--m-плакат)}
.process-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-колонки);align-items:start}
.process-intro{position:sticky;top:calc(var(--nav) + 34px)}
.process-steps{border-top:var(--line) solid var(--border);position:relative;--process-progress:0}
.process-step{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);position:relative;z-index:1}
.process-step .n{font-family:var(--serif);font-size:var(--fs-указатель);line-height:var(--lh-цифра);color:var(--accent);width:68px;text-align:left;text-shadow:0 0 14px var(--paper),0 0 14px var(--paper)}
.process-step h3{font-size:var(--fs-подзаголовок);margin:0 0 var(--sp-внутри)}
.process-step p{margin:0;color:var(--text);font-size:var(--fs-тело)}
.formats-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:var(--sp-колонки);align-items:stretch}
.format-list{border-top:var(--line) solid var(--border)}
.format-row{display:grid;grid-template-columns:1fr auto;gap:24px;padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);align-items:baseline}
.format-row h3{font-size:var(--fs-подзаголовок);margin:0 0 var(--sp-внутри)}
.format-row p{font-size:var(--fs-вторичный);margin:0;color:var(--text-secondary)}
.format-row .amt{font-family:var(--serif);font-size:var(--fs-фраза);white-space:nowrap;color:var(--accent-deep)}
.place-card{padding:var(--sp-карточка-тёмная);border-radius:var(--r-lg);color:var(--text-inverse);background:radial-gradient(430px 300px at 100% 0%,rgba(232,165,133,.18),rgba(232,165,133,0) 66%),
  linear-gradient(155deg,var(--dark-hi),var(--bg-dark));box-shadow:var(--dark-shadow);display:flex;flex-direction:column}
.place-card h2,.place-card h3{font-size:var(--fs-подзаголовок-крупный);margin:0 0 16px;letter-spacing:var(--tr-подзаголовок);line-height:var(--lh-подзаголовок)}
.place-card p{color:var(--text-inverse-secondary);font-size:var(--fs-вторичный)}
.place-card dl{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;margin:24px 0 28px;font-size:var(--fs-вторичный);margin-bottom:0}
.place-card dt{color:var(--accent-warm)}
.place-card dd{margin:0;color:var(--text-inverse)}
.format-action{display:flex;gap:24px;align-items:center;margin-top:var(--sp-действие);flex-wrap:wrap}
.room-frame{height:min(56svh,520px);border-radius:0;box-shadow:none;background:
  radial-gradient(640px 380px at 22% 18%,rgba(255,255,255,.7),rgba(255,255,255,0) 56%),
  linear-gradient(118deg,#D7C7B2,#B28F72 58%,#775C49)}
/* Полоса кабинета меняет пропорцию от почти квадрата на телефоне до 4:1
   на широком мониторе: на телефоне срезаются бока, на мониторе верх и низ.
   Точка кадрирования сдвинута левее и выше середины, чтобы в обоих случаях
   в кадре оставались оба кресла и столик между ними. */
.room-frame>img{object-position:40% 45%}
.room-frame .photo-label{color:var(--text-inverse-secondary)}
.work-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
/* Поле вынесено в переменную не ради красоты: стрелка позиционируется
   от края карточки и должна следовать за полем. Числом это не связать —
   при 620px поле падает до 20px, и стрелка съезжала относительно текста. */
.featured-note{--поле-карточки:var(--sp-карточка);
  display:block;border-radius:var(--r-lg);padding:var(--поле-карточки);background:radial-gradient(360px 240px at 100% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 64%),
  linear-gradient(150deg,var(--lift-hi),var(--bg-card));box-shadow:var(--surface-shadow);position:relative;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit}
.featured-note .date{font-size:var(--fs-метка);letter-spacing:var(--tr-подпись);text-transform:uppercase;color:var(--accent)}
.featured-note h3{font-size:var(--fs-подзаголовок-крупный);line-height:var(--lh-подзаголовок);margin:16px 0 12px;transition:color var(--t-обычно) ease}
.featured-note p{font-size:var(--fs-вторичный);color:var(--text-secondary);margin:0}
.compact-rows{border-top:var(--line) solid var(--border)}
.compact-row{display:block;padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);transition:padding-left var(--t-обычно) ease}
.compact-row h3{font-size:var(--fs-подзаголовок);margin:0 0 var(--sp-внутри);transition:color var(--t-обычно) ease}
.compact-row p{font-size:var(--fs-вторичный);line-height:var(--lh-текст);color:var(--text-secondary);margin:0;max-width:var(--m-пояснение)}
.final-block{overflow:hidden}
.final-block::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;right:-260px;top:-340px;background:radial-gradient(circle,rgba(255,238,225,.22),rgba(255,238,225,0) 68%)}
.detail-frame{aspect-ratio:var(--ar-кадр);background:
  radial-gradient(360px 260px at 24% 10%,rgba(255,255,255,.36),rgba(255,255,255,0) 60%),
  linear-gradient(140deg,#D7B69C,#9B674C 60%,#693B2A);box-shadow:var(--media-shadow)}
.detail-frame .photo-label{color:var(--text-inverse-secondary)}
.facts-row .fact b{color:var(--text)}
.facts-row .fact{background:linear-gradient(170deg,#FCFBF7,#F6F4ED)}
.theme-cards .card{box-shadow:var(--surface-shadow);position:relative;overflow:hidden;transition:box-shadow var(--t-обычно) ease}
.final-soft{color:var(--text);overflow:hidden;background:
  radial-gradient(660px 440px at 86% 10%,rgba(232,165,133,.14),rgba(232,165,133,0) 68%),
  linear-gradient(160deg,var(--sand-hi),var(--sand))}
.final-soft::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 340px at 4% 100%,rgba(255,255,255,.36),rgba(255,255,255,0) 72%)}
.final-soft>*{position:relative;z-index:1}
.final-soft .eyebrow{color:var(--accent)}
.final-soft .eyebrow::before{background:radial-gradient(circle at 32% 30%,var(--accent-hi),var(--accent-deep))}
.final-soft h2,.final-soft .mid{color:var(--text)}
.final-soft .detail-frame{background:
  radial-gradient(360px 260px at 24% 10%,rgba(255,255,255,.58),rgba(255,255,255,0) 60%),
  linear-gradient(140deg,#E8D8C8,#C8AA91 60%,#9C745D);
  box-shadow:var(--media-shadow)}
.final-soft .detail-frame .photo-label{color:var(--text-secondary)}
.facts-row{box-shadow:var(--surface-shadow)}
.site-nav .nav-in>.btn{box-shadow:var(--action-shadow);min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.site-nav .links a{position:relative;padding:20px 0 20px}
.site-nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:14px;height:1px;
  background:var(--accent);transition:right var(--t-обычно) ease}
.light-motion{overflow:clip;isolation:isolate}
.light-motion>.wrap{position:relative;z-index:2}
/* Свечение сносит вбок и вверх по мере прохода блока через экран.
   Размах задают --glow-amp-x и --glow-amp-y выше, конкретный сдвиг кадра
   ставит скрипт в partial-scripts.html из общего цикла прокрутки;
   без скрипта переменные пусты и пятно стоит неподвижно, как раньше.
   Ниже 1000px и при prefers-reduced-motion сдвиг гасится ниже по файлу. */
.moving-glow{position:absolute;z-index:0;width:min(64vw,820px);height:min(46vw,590px);left:var(--glow-left,52%);top:var(--glow-top,-18%);
  border-radius:50%;pointer-events:none;
  transform:translate3d(var(--glow-shift-x,0px),var(--glow-shift-y,0px),0);
  background:radial-gradient(ellipse at center,rgba(255,253,247,.76) 0%,rgba(255,252,245,.34) 39%,rgba(255,252,245,0) 72%);
  opacity:.5}
.glow-soft .moving-glow{opacity:.4}
.glow-warm .moving-glow{opacity:.48;background:radial-gradient(ellipse at center,rgba(255,253,247,.68) 0%,rgba(238,192,165,.11) 44%,rgba(255,252,245,0) 73%)}
.themes-block.light-motion::before{opacity:.28}
.final-soft.light-motion::after{opacity:.38}
.parallax-media{position:relative}
.parallax-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.stagger.rise{opacity:1;transform:none}
.stagger.rise>*{opacity:0;transform:translateY(14px);transition:opacity var(--t-медленно) var(--e),transform var(--t-медленно) var(--e)}
.process-steps::before,.process-steps::after{content:"";position:absolute;left:84px;top:30px;width:1px;height:calc(100% - 60px);pointer-events:none}
.process-steps::before{background:rgba(205,198,179,.85)}
.process-steps::after{background:linear-gradient(180deg,var(--accent),rgba(168,69,42,.35));
  transform:scaleY(var(--process-progress,0));transform-origin:top;transition:transform var(--t-быстро) linear}
.theme-cards .card::after{content:"";position:absolute;width:240px;height:180px;right:-120px;top:-100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.68),rgba(255,255,255,0) 70%);opacity:0;transform:translate(14px,-8px);
  transition:opacity var(--t-обычно) ease,transform var(--t-медленно) ease}
.theme-cards .card h3{position:relative;z-index:1;transition:color var(--t-обычно) ease}
.theme-cards .note-card{grid-column:span 2;min-height:0;justify-content:center;
  background:radial-gradient(360px 220px at 100% 0%,rgba(255,255,255,.72),rgba(255,255,255,0) 68%),
  linear-gradient(155deg,#F4EFE5,#ECE3D4)}
.theme-cards .note-card h3{font-size:var(--fs-подзаголовок)}
.theme-cards .note-card p{font-size:var(--fs-тело);max-width:var(--m-ведущий)}
/* bottom:24px, а не 28: при 28 коробка стрелки садилась ровно на нижний
   край последнего абзаца, но ink глифа «→» стоит высоко внутри своей
   строки, и стрелка читалась приподнятой. Опущена на 4px. */
a.featured-note::after{content:"→";position:absolute;
  right:calc(var(--поле-карточки) + 4px);bottom:calc(var(--поле-карточки) - 4px);color:var(--accent);font-size:var(--fs-подзаголовок);
  opacity:.4;transform:translateX(0);transition:transform var(--t-обычно) ease,opacity var(--t-обычно) ease}
#temy>.moving-glow{display:block;left:auto;right:-22%;top:-31%;
  background:radial-gradient(ellipse at center,
    rgba(255,253,247,.7) 0%,rgba(255,253,247,.24) 40%,
    rgba(232,165,133,.07) 66%,rgba(255,253,247,0) 82%)}
#kak>.moving-glow{display:block;left:-27%;right:auto;top:-18%;
  background:radial-gradient(ellipse at center,
    rgba(255,253,247,.62) 0%,rgba(255,253,247,.18) 41%,
    rgba(232,165,133,.06) 67%,rgba(255,253,247,0) 83%)}
#pary>.moving-glow{display:block;left:auto;right:-28%;top:-24%;
  background:radial-gradient(ellipse at center,
    rgba(255,253,247,.62) 0%,rgba(255,253,247,.18) 41%,
    rgba(232,165,133,.06) 67%,rgba(255,253,247,0) 83%)}
#formaty>.moving-glow{display:block;left:auto;right:-18%;top:-29%;
  background:radial-gradient(ellipse at center,
    rgba(255,253,247,.68) 0%,rgba(255,253,247,.22) 40%,
    rgba(232,165,133,.07) 66%,rgba(255,253,247,0) 82%)}
#zapis>.moving-glow{display:block;left:auto;right:-22%;top:-34%;
  background:radial-gradient(ellipse at center,
    rgba(255,253,247,.66) 0%,rgba(255,253,247,.2) 39%,
    rgba(232,165,133,.07) 66%,rgba(255,253,247,0) 82%)}
#teksty>.moving-glow{display:none}
#temy>.moving-glow,
#kak>.moving-glow,
#pary>.moving-glow,
#formaty>.moving-glow,
#zapis>.moving-glow{width:900px;height:650px;opacity:.42}
.facts-row,.theme-cards .card{box-shadow:var(--surface-shadow)}
.portrait-frame,.detail-frame{box-shadow:var(--media-shadow)}
.btn,.site-nav .nav-in>.btn{box-shadow:var(--action-shadow)}
.content-preview{cursor:pointer}
.contacts-list{list-style:none;margin:20px 0 0;padding:0;border-top:var(--line) solid var(--border)}
.contacts-list li{border-bottom:var(--line) solid var(--border)}
.contacts-list a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;transition:padding-left var(--t-обычно) ease}
.contacts-list span{font-family:var(--serif);font-size:var(--fs-тело);transition:color var(--t-обычно) ease}
.contacts-list em{font-style:normal;font-size:var(--fs-вторичный);color:var(--text-secondary)}
.contacts-note{margin-top:var(--sp-примечание);font-size:var(--fs-служебный);color:var(--text-secondary)}
.formats-col{display:flex;flex-direction:column}
.formats-col .format-action{margin-top:auto;padding-top:28px}
.place-card>.textlink{margin-top:auto;padding-top:28px;align-self:flex-start}
#faq details p{max-width:none;padding-right:40px}
a.compact-row{display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative}
/* Стрелка — как у карточки Sensa на /about/: акцентная, приглушённая в покое
   и яркая со сдвигом при наведении. Только у a.compact-row: строки без адреса
   ссылками не собираются, и стрелка у них обещала бы переход, которого нет.
   Стрелка стоит у нижнего края строки, как у карточки на /about/:
   она помечает конец блока. Заголовку место резервировать не нужно —
   на его уровне стрелки нет. */
a.compact-row::after{content:"→";position:absolute;right:0;
  bottom:calc(var(--sp-строка) - 4px);
  color:var(--accent);font-size:var(--fs-подзаголовок);line-height:var(--lh-подзаголовок);
  opacity:.4;transform:translateX(0);
  transition:transform var(--t-обычно) ease,opacity var(--t-обычно) ease}
#teksty .head{display:block;max-width:var(--m-тело)}
#teksty .head .eyebrow{margin-top:0}
#zapis .hero-note .textlink{font-size:inherit}
.track{border-top:var(--line) solid var(--border);position:relative;--track-progress:0}
.track::before,.track::after{content:"";position:absolute;left:144px;top:30px;width:1px;
  height:calc(100% - 60px);pointer-events:none}
.track::before{background:rgba(205,198,179,.85)}
.track::after{background:linear-gradient(180deg,var(--accent),rgba(168,69,42,.35));
  transform:scaleY(var(--track-progress,0));transform-origin:top;transition:transform var(--t-быстро) linear}
.track-step{position:relative;z-index:1;display:grid;grid-template-columns:132px 1fr;gap:24px;padding:var(--sp-строка) 0;border-bottom:var(--line) solid var(--border);align-items:baseline}
.track-when{font-family:var(--serif);font-size:var(--fs-ведущий);
  line-height:var(--lh-подзаголовок);color:var(--accent)}
.track-step h3{font-size:var(--fs-подзаголовок);margin:0 0 var(--sp-внутри)}
.track-step p{margin:0;color:var(--text);font-size:var(--fs-тело)}
.aside-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-колонки);align-items:start}
.aside-intro{position:sticky;top:calc(var(--nav) + 34px)}
.aside-intro .place-card{margin-top:32px}
.rules p{max-width:var(--m-тело);color:var(--text-secondary)}
.rules p + p{margin-top:20px}
.rules .safety-note p{margin-top:0}
.rules-more{margin-top:var(--sp-действие)}
/* /contract/: блок стоит на развороте .aside-grid — шапка слева на линиях
   1/6, текст справа на 6/13. Липкость левой колонки снята: у двух блоков
   из шести правая выше левой меньше чем на сто пикселей, и эффект вышел бы
   неоднородным. Мера текста нужна только ниже 1000px, где колонки схлопнуты:
   выше её перекрывает ширина семи колонок. Цвет не задаём намеренно — на
   тёмной полосе его ставит .band-dark p. */
.contract-block .aside-intro{position:static}
.contract-text{max-width:var(--m-тело)}
.contract-text p + p{margin-top:var(--sp-абзац)}
.aside-intro .safety-note{margin-top:32px}

.prep-title{font-size:var(--fs-подзаголовок);margin:0 0 4px}
.place-card .card-split{height:1px;background:rgba(255,255,255,.14);margin:32px 0 28px}
.place-card .card-split+.eyebrow{margin-bottom:16px}
.prep-list{list-style:none;margin:0;padding:0}
.prep-list li{padding:16px 0;border-top:var(--line) solid var(--border);
  color:var(--text-secondary);font-size:var(--fs-вторичный);line-height:var(--lh-текст)}
.hero-block,.formats-layout,.aside-grid,
.about-block .split,.process-grid,.pary-grid,.work-grid,.position-grid,.cards,
.prep-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-сетка);align-items:start}
.cards,.formats-layout{align-items:stretch}
.position-grid{align-items:end;min-height:220px}
.position-grid>.saying{align-self:start}
.aside-grid .aside-intro,.process-intro,.pary-main{grid-column:1 / 6}
.aside-grid .aside-body,.process-grid>.rise:not(.process-intro),
.pary-situations{grid-column:6 / 13}
.about-block .split>.portrait-frame,.work-grid>.featured-note{grid-column:1 / 6}
.about-block .split>.about-copy,.work-grid>.compact-rows{grid-column:6 / 13}
.hero-block>div:first-child{grid-column:1 / 8;align-self:center}
.final>div:first-child{grid-column:1 / 8}
.final>.detail-frame{grid-column:8 / 13}
.prep-cols>*{grid-column:span 6}
/* Элементы сетки и flex по умолчанию не сжимаются меньше содержимого:
   min-width у них auto. При увеличении шрифта колонка раздувалась
   шире экрана и появлялась горизонтальная прокрутка (WCAG 1.4.4). */
.hero-block>*,.formats-layout>*,.aside-grid>*,.about-block .split>*,
.process-grid>*,.pary-grid>*,.work-grid>*,.position-grid>*,.cards>*,
.prep-cols>*,.final>*,.split>*,.place>*,.hero-cta>*,.foot>*,
.row>*,.theme-row>*,.format-row>*,.track-step>*,.process-step>*,
.facts>*,.steps>*,.credentials>*,.art-grid>*{min-width:0}
.error-block>div:first-child{grid-column:1 / 9}

/* сетка документов об образовании */
details.docs{border-top:var(--line) solid var(--border);border-bottom:var(--line) solid var(--border);
  padding:var(--sp-строка) 0;margin-top:var(--sp-часть)}
details.docs summary{cursor:pointer;font-size:var(--fs-тело);color:var(--text);list-style:none}
details.docs summary::-webkit-details-marker{display:none}
details.docs summary::after{content:"+";float:right;color:var(--accent)}
details.docs[open] summary::after{content:"−"}
.doc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-сетка);margin-top:var(--sp-часть)}
.doc{margin:0}
.doc-label{display:flex;align-items:center;justify-content:center;aspect-ratio:var(--ar-кадр);
  background:var(--bg-card);border:var(--line) solid var(--border);border-radius:var(--r-sm);
  color:var(--text-secondary);font-size:var(--fs-служебный);letter-spacing:var(--tr-подпись);text-transform:uppercase}
/* Документ вписывается целиком: обрезать его нельзя, поэтому contain,
   а не cover. Вертикальный лист в рамке 4:3 получает поля по бокам. */
.doc-label>img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.doc figcaption{margin-top:var(--sp-внутри);font-size:var(--fs-служебный);color:var(--text-secondary);line-height:var(--lh-текст)}
/* Скан открывается крупно: плашка — кнопка, поэтому сбрасываем её вид. */
.doc-open{padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:zoom-in}
.doc-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.doc-dialog{position:relative;width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 24px);
  padding:var(--sp-внутри);border:var(--line) solid rgba(107,90,70,.2);border-radius:var(--r-lg);
  background:var(--bg);color:var(--text);box-shadow:var(--overlay-shadow);overflow:auto;overscroll-behavior:contain}
.doc-dialog::backdrop{background:rgba(29,26,22,.72);backdrop-filter:blur(6px)}
/* Сцена: окно просмотра, внутри которого снимок можно увеличить и двигать.
   touch-action:none — жесты забирает скрипт, иначе телефон начнёт листать
   страницу под окном вместо перемещения снимка. */
.doc-stage{position:relative;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center}
.doc-dialog img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:calc(100dvh - 110px);
  border-radius:var(--r-sm);background:var(--bg-card);cursor:zoom-in;
  transform-origin:center center;transition:transform var(--t-обычно) var(--e)}
.doc-dialog img.увеличен{cursor:grab;transition:none}
.doc-dialog img.двигаем{cursor:grabbing;transition:none}
.doc-reset{position:absolute;left:18px;top:18px;z-index:1;min-height:44px;padding:0 var(--sp-примечание);
  border:var(--line) solid var(--border);border-radius:var(--r-sm);background:rgba(255,255,255,.46);
  color:var(--text);font-size:var(--fs-служебный);cursor:pointer}
.doc-reset[hidden]{display:none}
.doc-dialog .booking-close{position:absolute;right:18px;top:18px;z-index:1}
.doc-dialog-note{margin:var(--sp-внутри) 0 0;font-size:var(--fs-служебный);color:var(--text-secondary);text-align:center}
.docs .note{margin-top:var(--sp-часть);font-size:var(--fs-служебный);color:var(--text-secondary);max-width:var(--m-примечание)}
.error-block h1{max-width:none}
.error-block .lede{max-width:var(--m-лид-широкий)}
.hero-block .portrait-frame{grid-column:8 / 13;align-self:center}
.formats-layout .formats-col{grid-column:1 / 8}
.formats-layout .place-card{grid-column:8 / 13}
.position-grid>.saying{grid-column:1 / 9}
.position-grid>.saying-note{grid-column:10 / 13}
.format-action .textlink,.rules-more .textlink,.place-card .textlink,
.pary-cta .textlink,.hero .textlink{display:inline-flex;align-items:center;min-height:44px}
#kto,#kak{padding:var(--sp-глава) 0}
#faq,#podgotovka{padding:var(--sp-пауза) 0}
.hero-block{padding:var(--sp-пауза) 0 var(--sp-секция)}
.theme-list,.theme-row,.format-list,.format-row{border-color:var(--border)}
.rules p + p,.about-copy p + p,.safety-note p + p,.article p + p,
.faq-answer-inner p + p{margin-top:var(--sp-абзац)}
.rules p + .safety-note,.article p + ul,.article p + ol,.article ul + p,.article ol + p,
.article p + blockquote,.article blockquote + p,.article p + figure,.article figure + p{margin-top:var(--sp-часть)}
.format-action,.rules-more,.pary-cta{margin-top:var(--sp-действие)}}

@layer states{
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav.stuck{box-shadow:var(--surface-shadow)}
.nav.open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav.open .drawer{display:block}
/* Отклик на нажатие: подтверждение, что нажатие услышано, до того как
   откроется окно записи. Длительность — базовые .18s самой быстрой ступени:
   между ступенями шкала значений не допускает. */
.btn:active{transform:scale(.97)}
.rise.in{opacity:1;transform:none}
.site-nav .links a.active{color:var(--accent-deep)}
.stagger.rise.in>*{opacity:1;transform:none}
.stagger.rise.in>*:nth-child(2){transition-delay:calc(var(--t-шаг) * 1)}
.stagger.rise.in>*:nth-child(3){transition-delay:calc(var(--t-шаг) * 2)}
.stagger.rise.in>*:nth-child(4){transition-delay:calc(var(--t-шаг) * 3)}
.stagger.rise.in>*:nth-child(5){transition-delay:calc(var(--t-шаг) * 4)}
.stagger.rise.in>*:nth-child(6){transition-delay:calc(var(--t-шаг) * 5)}
.stagger.rise.in>*:nth-child(7){transition-delay:calc(var(--t-шаг) * 6)}
details.is-open .faq-answer{grid-template-rows:1fr;opacity:1}
details.is-open{background:rgba(255,255,255,.22)}
details[open] summary::after{content:"+"}
details.is-open summary::after{content:"+";transform:rotate(45deg);color:var(--accent-deep)}
.skip-link:focus{position:fixed;left:18px;top:12px;z-index:1000;width:auto;height:auto;
  padding:8px 16px;margin:0;overflow:visible;clip-path:none;border-radius:var(--r-sm);
  background:var(--lift-hi);color:var(--text);box-shadow:var(--overlay-shadow)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;box-shadow:var(--focus)}
.booking-dialog.is-ready .booking-loader{opacity:0;pointer-events:none}
html:not(.js) .rise,html:not(.js) .stagger.rise>*{opacity:1!important;transform:none!important}
a.compact-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#faq details.is-open{padding-left:20px;padding-right:20px;
  margin-left:-20px;margin-right:-20px}
.band-dark :focus-visible,.place-card :focus-visible,.band-accent :focus-visible{outline-color:var(--text-inverse);box-shadow:none}
a.featured-note:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@supports (-webkit-touch-callout:none){.nav{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--bg);
    padding-top:env(safe-area-inset-top,0px);
  }
  .nav::after{
    content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:141px;
    background:var(--bg);pointer-events:none;
  }
  .nav.stuck::after{box-shadow:none}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rise{opacity:1;transform:none;transition:none}
.btn:hover,.card:hover{transform:none}
.btn{transition:none}   /* сдвиг снимает правило выше, но filter и тень
                            анимировались дальше: гасим сам переход */
.nav{transition:none}                  /* тень и граница шапки при прокрутке */
.site-nav .links a::after{transition:none}  /* подчёркивание выезжало слева направо */
summary::after{transition:color var(--t-обычно) ease}  /* поворот плюса гасим,
                                          смену цвета оставляем: цвет не движение */
.moving-glow{transform:none!important}
.parallax-media>img{transform:none!important}
.stagger.rise>*{opacity:1;transform:none;transition:none}
.process-steps::after,.track::after{transition:none}
.faq-answer{transition:none}
.featured-note::after,.compact-row h3{transition:none}
body::after{display:none}
.booking-loader{transition:none}
.featured-note h3,.featured-note::after{transition:none}
.featured-note:hover::after{transform:none}
.compact-row{transition:none}
.compact-row:hover{padding-left:0}
a.compact-row::after{transition:none}
a.compact-row:hover::after{transform:none}
.contacts-list a{transition:none}
.contacts-list a:hover{padding-left:0}
}
@media (max-width:1000px){
.hero,.split,.place,.final{grid-template-columns:1fr;gap:40px}
.hero{min-height:0;padding:28px 0 56px}
.split.rev>.shot{order:0}
.steps{grid-template-columns:1fr 1fr}
.card.wide{grid-column:span 2}
.facts{grid-template-columns:1fr 1fr}
.links{display:none}
.burger{display:block}
section{padding:72px 0}
.bleed{height:44svh}
.split.about{grid-template-columns:1fr}
.row{grid-template-columns:1fr;gap:12px}
.row .go{display:none}
.feature{padding:28px}
.pary-aside{padding-top:8px}
.pary-main{position:static}
.pary-position{max-width:var(--m-ведущий)}
.pary-cta{margin-top:0}
.moving-glow{width:780px;height:520px;opacity:.24;transform:none!important}
.parallax-media>img{inset:0;width:100%;height:100%;transform:none!important}
.process-steps::before,.process-steps::after{display:none}
.process-step .n{text-shadow:none}
.site-nav .links a{padding:0}
.site-nav .links a::after{display:none}
.hero-block{padding-top:32px}
.hero-block .portrait-frame{max-width:640px;aspect-ratio:var(--ar-квадрат)}
/* Квадрат режет у снимка 4:5 пятую часть высоты. object-position держит кадр
   выше середины: при 50% от головы до края осталось бы 2,5% высоты снимка,
   при 20% — 8,5%, и срез уходит вниз, ниже рук. */
.hero-block .portrait-frame>img{object-position:50% 20%}
/* На /booking/ снимок другой: человек сидит ниже, над головой 18% высоты.
   При общих 20% лицо уходит из верхней трети — этой странице центр. */
.hero-booking .portrait-frame>img{object-position:50% 50%}
/* На /contract/ в рамке кабинет, а не человек: главное — два кресла со
   столиком, они стоят в нижней половине кадра. Квадрат при общих 20%
   срезал бы им ножки, поэтому кадр смещён вниз. */
.hero-contract .portrait-frame>img{object-position:50% 80%}
/* Портрет «Обо мне» ниже 1000px тоже квадрат: два портрета на одной странице
   не должны быть разной формы. Кадр прижат к верху — над головой на этом
   снимке всего 7,3% высоты, при 20% как у первого экрана осталось бы 3,3%. */
.about-block .portrait-frame{aspect-ratio:var(--ar-квадрат)}
.about-block .portrait-frame>img{object-position:50% 0}
.about-block{padding:80px 0}
.process-intro{position:static}
.position-grid{gap:24px;min-height:0}
.doc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.place-card{padding:32px}
.final-block .final{grid-template-columns:1fr;gap:var(--sp-сетка)}
.final-block .detail-frame{aspect-ratio:var(--ar-кадр);width:100%}
.formats-col .format-action{margin-top:0;padding-top:24px}
.place-card>.textlink{margin-top:0;padding-top:24px}
.aside-intro{position:static}
.track::before,.track::after{display:none}
.hero-block,.formats-layout,.aside-grid,
  .about-block .split,.process-grid,.pary-grid,.work-grid,.position-grid,.cards,
  .prep-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.hero-block>div:first-child,.hero-block .portrait-frame,
  .formats-layout .formats-col,.formats-layout .place-card,
  .aside-grid .aside-intro,.aside-grid .aside-body,
  .process-intro,.process-grid>.rise:not(.process-intro),.pary-main,.pary-situations,
  .about-block .split>.portrait-frame,.about-block .split>.about-copy,
  .work-grid>.featured-note,.work-grid>.compact-rows,
  .position-grid>.saying,.position-grid>.saying-note,
  .final>*{grid-column:1 / -1}
.prep-cols>*{grid-column:span 1}
.cards>.card{grid-column:span 1}
.cards>.card.wide,.cards>.note-card{grid-column:span 2}
.theme-list{grid-template-columns:1fr}
.theme-row,.theme-row-note{grid-column:1 / -1;grid-template-columns:52px 1fr;gap:0 16px}
}
@media (max-width:620px){
/* Шапка на телефоне: кнопка записи стоит рядом с бургером, а не прячется.
   inline-flex с min-height:44px — цель нажатия по нормативу; высоту прежние
   паддинги не гарантировали. margin-left:auto держит кнопку и бургер вместе
   справа: без него justify-content:space-between развёл бы их по полосе.
   flex:none — иначе при нехватке места флекс сжимал бургер (замер на 320px
   давал ему 38.8px вместо 44). Зазор 4px и паддинг 12px вместо 8 и 16:
   на 320px иначе не остаётся ни пикселя запаса. */
.nav-in{gap:4px}
.nav-in>.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:var(--fs-служебный);margin-left:auto;flex:none}
.burger{flex:none}
.cta-long{display:none}
.cta-short{display:inline}
/* Стрелка у строк с адресом на узких экранах не помещается: замер на 390px
   дал последней строке абзаца просвет справа 0.1px — стрелка наехала бы
   на текст. Наведения на телефоне всё равно нет. */
a.compact-row::after{display:none}
.eyebrow{font-size:var(--fs-метка);line-height:1.3;letter-spacing:var(--tr-метка-узкая);margin-bottom:24px}
.eyebrow::before{width:8px;height:8px}
h1{font-size:clamp(2.188rem,10.5vw,2.75rem);line-height:1.04;letter-spacing:var(--tr-плакат-узкий);margin-bottom:24px}
.lede{max-width:100%;line-height:1.5}
.wrap{padding:0 20px}
.card.wide{grid-column:span 1}
.post-row{flex-direction:column;gap:4px}
.pary-grid{gap:var(--sp-сетка)}
.pary-list li{padding:16px 0 16px}
.doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pary-cta{width:100%;padding-top:24px}
.pary-cta .btn{width:100%;text-align:center}
.theme-cards .note-card{grid-column:span 1;min-height:0}
section{padding:56px 0}
.hero-block{gap:28px;padding:28px 0 40px}
.hero-block .portrait-frame{border-radius:var(--r-lg)}
.about-block{padding:64px 0}
.credentials{grid-template-columns:1fr}
.safety-note{padding:20px}
.format-row{grid-template-columns:1fr;gap:8px}
.place-card dl{grid-template-columns:1fr;gap:4px}
.place-card dd{margin-bottom:8px}
.room-frame{height:42svh;min-height:310px}
.final-block .final{gap:var(--sp-сетка)}
.booking-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0}
.booking-help{align-items:flex-start;flex-direction:column;padding:12px 16px;gap:4px}
#faq details p{padding-right:8px}
.prep-cols{grid-template-columns:1fr;gap:var(--sp-сетка)}
#faq details.is-open{padding-left:12px;padding-right:12px;
  margin-left:-12px;margin-right:-12px}
.hero-block,.formats-layout,.aside-grid,
  .about-block .split,.process-grid,.pary-grid,.work-grid,.position-grid,.cards{grid-template-columns:1fr}
.cards>.card,.cards>.card.wide,.cards>.note-card{grid-column:1 / -1}
.theme-row,.theme-row-note{grid-template-columns:1fr;gap:var(--sp-внутри) 0;padding:var(--sp-строка) 0}
.theme-row .index,.theme-row h3,.theme-row p{grid-column:1}
.theme-row .index{margin-bottom:var(--sp-внутри)}
.process-step .n{grid-column:1}
.card,.safety-note{padding:20px}
.featured-note{--поле-карточки:20px}
.privacy-copy{padding:20px}
.steps{grid-template-columns:1fr}
.facts{grid-template-columns:1fr 1fr}
.fact{padding:16px 12px;min-width:0;min-height:120px}
.process-step{grid-template-columns:1fr;gap:var(--sp-внутри) 0;padding:24px 0}
.track-step{grid-template-columns:1fr;gap:var(--sp-внутри) 0;padding:24px 0}
.place-card{padding:24px}
}
@media (hover:hover) and (pointer:fine){
.links a:hover{color:var(--accent)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:var(--action-shadow)}
.btn-ghost:hover{color:var(--accent-deep);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34))}
.textlink:hover{text-decoration-color:var(--accent)}
.card:hover{transform:translateY(-3px);box-shadow:var(--surface-shadow)}
.foot a:hover{color:var(--accent-warm)}
a.compact-row:hover h3{color:var(--accent-deep);transform:none}
.site-nav .nav-in>.btn:hover{transform:translateY(-1px);box-shadow:var(--action-shadow)}
.site-nav .links a:hover::after,.site-nav .links a.active::after{right:0}
.theme-cards .card:hover::after{opacity:.72;transform:none}
.theme-cards .card:hover h3{color:var(--accent-deep)}
.theme-cards .card:hover{transform:none;box-shadow:var(--surface-shadow)}
a.featured-note:hover h3{color:var(--accent-deep)}
a.featured-note:hover{box-shadow:var(--surface-shadow)}
a.featured-note:hover::after{opacity:.85;transform:translateX(4px)}
a.compact-row:hover{padding-left:12px}
a.compact-row:hover::after{opacity:.85;transform:translateX(4px)}
.contacts-list a:hover{padding-left:12px}
.contacts-list a:hover span{color:var(--accent-deep)}
}
}