: font-size/line-height задаёт правило
.journey .content p:not(.eyebrow) выше (специфичность 0,0,4,0 > 0,0,3,0),
поэтому quote-специфичные font-size/line-height из обоих старых файлов
были мёртвым кодом (в step1-final quote рендерился размером абзаца, 17px).
Живёт только margin-top. */
.journey .content .quote{margin-top:13px!important}
/* .next font-size: конфликт shell(8px) ⇄ overrides(14px) → overrides */
.journey .next,.philosophy .next{position:fixed!important;right:16px!important;bottom:16px!important;z-index:25!important;width:auto!important;min-width:132px!important;margin:0!important;padding:11px 13px!important;border:1px solid rgba(74,59,47,.26)!important;border-radius:999px!important;background:rgba(246,237,226,.88)!important;backdrop-filter:blur(8px)!important;font-size:14px!important}
.booking-screen .actions{width:100%!important;gap:8px!important;margin-top:18px!important}
.booking-screen .actions a{padding:9px 11px!important}
/* actions span: конфликт shell(14px) ⇄ overrides(16px) → overrides */
.booking-screen .actions span{font-size:16px!important}
.booking-screen .facts{display:grid!important;gap:13px!important;margin-top:18px!important}
.contacts .facts{margin-top:18px!important}
/* .contacts .booking — реальный элемент (a.booking «ЗАПИСАТЬСЯ»); + font-size:14px из overrides */
.contacts .booking{margin-top:18px!important;font-size:14px!important}
/* из responsive-overrides.css — в @media(max-width:900) shell аналога не было */
.booking-screen .facts small,.contacts .facts span{font-size:15px!important}
.sharedPanel a span{font-size:21px!important;line-height:1.2!important}
.sharedPanel a{min-height:52px!important;padding:11px 4px!important}
/* ═══ ШАГ 6 — ЕДИНЫЙ «Назад» (mobile) ═══
Один вид на всех страницах: тихий текст, без пилюли/рамки/фона/blur.
Здесь — ВЕСЬ визуал (цвет, размер, стрелка, сброс пилюли) + нейтральная
позиция в потоке. Позиционирование под конкретную (замороженную Шагами
3–5) раскладку — короткими delta-правилами ниже (.works/.color-screen/
.form-screen — absolute-хук; .work>.content и тип А — поток колонны).
Прежние 5 расходящихся наборов (.back-пилюля, .works .back,
.color/.form .back, .work>.content .back, .about…/.contacts .back)
сведены к этому одному описанию вида. */
.back{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:1!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--soft)!important;font-size:11px!important;letter-spacing:.22em!important;white-space:normal!important}
.back span{font-size:20px!important;font-weight:200!important}
/* absolute-хук: «Назад» прижат под шапкой. works — сразу под Ti/МЕНЮ;
color/form/movement — ниже строки section-nav (ЦВЕТ·ФОРМА·ДВИЖЕНИЕ),
которая на mobile идёт отдельной строкой под шапкой (см. ниже). */
.works .back{position:absolute!important;top:64px!important;left:24px!important;z-index:6!important}
.color-screen .back,.form-screen .back{position:absolute!important;top:104px!important;left:24px!important;z-index:6!important}
.state,.pause,.note,.progress{display:none!important}
.works>.intro,.color-screen>.intro,.form-screen>.intro{position:relative!important;top:auto!important;left:auto!important;width:auto!important;transform:none!important;padding:104px 24px 20px!important}
.works>.intro h1,.color-screen>.intro h1,.form-screen>.intro h1{font-size:34px!important}
/* .works>.directions / .works .direction — раскладку задаёт WORKS-блок ниже.
.color-screen/.form-screen (+ movement = .form-screen) — свой блок «тип Б»
ниже (ЕДИНАЯ витрина), после WORKS. Старый вертикальный grid-стек снят. */
.work>.content{position:relative!important;top:auto!important;left:auto!important;width:auto!important;transform:none!important;padding:104px 24px 24px!important}
/* «Назад» на mobile-странице работы: вид — из единого `.back` (ШАГ 6).
Здесь только раскладочный delta: отступ снизу до заголовка колонны. */
.work>.content .back{margin:0 0 30px!important}
.work>.content h1{font-size:36px!important}
.work>.details{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;margin:0 24px!important;padding:0 0 92px!important}
/* «Записаться» — контурная кнопка вместо тёмной заливки: единый CTA-стиль
с about («ПОСЛЕ ВСТРЕЧИ →») и contacts («ЗАПИСАТЬСЯ →»). */
.work>.details .booking{padding:16px 22px!important;border:1px solid rgba(58,48,40,.32)!important;border-radius:0!important;background:none!important;color:var(--ink)!important;font:400 11px var(--font-sans)!important;letter-spacing:.24em!important;text-transform:uppercase!important}
.work>.details .booking b{font-size:18px!important;font-weight:200!important;color:var(--ink)!important}
.work>.counter{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;margin:0 24px 18px!important}
.work>.work-nav{position:relative!important;inset:auto!important;display:flex!important;margin:0 24px 82px!important}
/* WORKS (works-selection-preview.html) — ШАГ 4: воспроизведение «58.44»
(photo_2026-08-30_09-58-44) 1:1, целиком.
── ВЕРХ ──
• «Назад» — вид из единого `.back` (ШАГ 6); absolute-хук
(top:64px;left:24px) — в общем правиле `.works .back,.color-screen
.back,.form-screen .back` выше;
• фон-сцена сдвинут (object-position 40%): вместо оливковой ветви слева —
стена со светом + край панели + начало фигуры, как в 58.44;
• H1 в 2 строки, подзаголовок в 1 строку: жёсткие
гасятся
(в HTML вокруг них добавлены пробелы, чтобы слова не слипались);
размер H1 = дефолтные 34px → «Ваш образ начинается» ложится в строку,
«с тишины.» переносится (как в 58.44).
── НИЗ ──
• 3 РАВНЫЕ карточки в ряд из works-selection-panel-{color,form,motion}
-mobile.png; карточка выше (aspect 113/262) и cover кропает только по
бокам → у всех показана вся высота ассета: голова целиком + вода +
отражение, линия воды (≈63% ассета) выравнивается по ряду сама;
• зазоры 3px, общий верх и низ; подписей нет (в кадре 58.44 их нет);
• пер-карточные ПИКСЕЛЬНЫЕ кропы 16:9 (было background-position:-219px …)
сняты. */
/* .works .back / span — вид и absolute-хук заданы выше единым правилом. */
/* фон верхней половины — исходный (как в 58.34): оливковая тень слева на
стене. object-position:7% center и вуаль-фейд берутся из CSS страницы —
свои переопределения (opacity/сдвиг/световая вуаль) сняты. */
main.works>.intro{padding-top:110px!important}/* спецификация выше group-правила 128px ниже */
/* 58.44: H1 в 2 строки — гасим ТОЛЬКО первый
(после «образ»), второй
(после «начинается») оставляем принудительным; H1 30px, чтобы «Ваш образ
начинается» уместилось в строку; подзаголовок — 1 строка. */
main.works>.intro h1{font-size:30px!important}
.works>.intro h1 br:first-of-type,.works>.intro>p:last-child br{display:none!important}
/* position:relative;inset:auto;pointer-events:auto — раньше приходили из
группового правила shell (.works>.directions,.color-screen>.cards,…);
при разделении групп добавлены сюда. */
/* ЕДИНАЯ витрина: одно изображение всей сцены (works-selection-showcase-v2.png,
нарезано из works-selection-background-v1-16x9.png) в ОДНОЙ скруглённой
рамке — как на десктопе. Никаких per-card картинок и внутренних рамок →
линия воды одна, головы как скомпонованы, ничего не подгоняем поштучно.
3 ссылки Цвет/Форма/Движение — подписи строкой под изображением. */
.works>.directions{position:relative!important;inset:auto!important;pointer-events:auto!important;display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:center!important;gap:0!important;margin:14px 12px 24px!important;padding:0!important}
.works>.directions::before{content:""!important;order:-1!important;flex:0 0 100%!important;width:100%!important;aspect-ratio:980 / 658!important;background:url("/works-selection-showcase-v2.png") 50% 0% / cover no-repeat!important;border-radius:14px!important}
.works .direction{position:relative!important;inset:auto!important;left:auto!important;bottom:auto!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;padding:11px 4px 0!important;border-radius:0!important;background:none!important;color:var(--ink)!important;text-align:center!important;text-shadow:none!important}
.works .direction::before{content:none!important;display:none!important}
/* подписи Цвет/Форма/Движение — строкой под изображением */
.works .direction span{display:block!important;margin-top:0!important;font-size:18px!important}
.works .direction small{display:block!important;margin-top:4px!important;font-size:8px!important;letter-spacing:.2em!important;opacity:.72!important}
.works .direction b{display:block!important;margin-top:5px!important;font-size:15px!important;font-weight:200!important}
.works .direction:hover b{transform:none!important}
/* ═══ COLOR / FORM / MOVEMENT — mobile-паттерн «тип Б» ═══
(movement =
гасятся (текст переносится сам, обрезки нет), тело 15px.
Scoped на 5 корней — общие .background/.content на прочих страницах
не затрагиваются. */
/* NB: для .about/.philosophy/.journey/.booking-screen/.contacts правила
Шага 2 выше (в этом же @media): padding `.journey>.content,…` (~стр. 88),
тело 13px `… p:not(.eyebrow)` (~стр. 101), `.quote` margin (~стр. 107),
padding-top:128px (~стр. 181) — ПОЛНОСТЬЮ перекрыты блоком Шага 3 ниже
(позже в файле, равная/выше специфичность, !important). Оставлены как
есть: они по-прежнему нужны для work-/selection-страниц в тех же
групповых селекторах; вычищать их только для типа А = трогать
замороженный Шаг 2. */
.about,.philosophy,.journey,.booking-screen,.contacts{
display:flex!important;flex-direction:column!important;
width:100%!important;max-width:100vw!important;
min-height:100dvh!important;padding-bottom:0!important}
.about>*,.philosophy>*,.journey>*,.booking-screen>*,.contacts>*{
min-width:0!important;max-width:100%!important}
/* фон — сцена целиком на весь экран, неподвижна при прокрутке */
.about .about__background,
.philosophy .background,.journey .background,
.booking-screen .background,.contacts .background{
position:fixed!important;inset:0!important;z-index:-2!important;
width:100%!important;height:100dvh!important;object-fit:cover!important}
/* невидимый градиент читаемости — полоса под текстом; верх и НИЗ сцены
чисты (вода/свет/атмосфера видны). Тон: свет сцены / тень (contacts). */
/* about / journey / contacts — есть человек / предметная сцена: нужна
полоса-вуаль под текстом (fixed, верх и низ сцены чисты). */
.about::after,.journey::after,.contacts::after{
content:""!important;position:fixed!important;inset:0!important;z-index:-1!important;
display:block!important;pointer-events:none!important}
.about::after,.journey::after{
background:linear-gradient(to bottom,
rgba(248,244,237,0) 0%,rgba(248,244,237,.34) 20%,rgba(248,244,237,.78) 42%,
rgba(248,244,237,.82) 68%,rgba(248,244,237,.42) 88%,rgba(248,244,237,0) 100%)!important}
.contacts::after{background:linear-gradient(to bottom,
rgba(24,18,14,0) 0%,rgba(24,18,14,.36) 20%,rgba(24,18,14,.70) 42%,
rgba(24,18,14,.74) 68%,rgba(24,18,14,.40) 88%,rgba(24,18,14,0) 100%)!important}
/* philosophy / booking — «живая» рассветная сцена: НИКАКОЙ доп. вуали,
родной лёгкий :after страницы сохраняется, картинка яркая как в baseline. */
/* живая вода/свет — в неподвижной сцене */
.about .about__light{position:fixed!important;inset:0!important;height:100dvh!important}
.about .about__water{position:fixed!important;left:0!important;right:0!important;
top:auto!important;bottom:0!important;height:20dvh!important}
.philosophy .waterRipple,.journey .waterRipple,.booking-screen .waterRipple{
position:fixed!important;inset:auto!important;left:0!important;right:0!important;
top:auto!important;bottom:0!important;z-index:-1!important}
/* «Назад» на тип-А: вид — из единого `.back` (ШАГ 6). Здесь только
раскладочный delta: первый элемент flex-колонны, свой верхний отступ. */
.about .back,.philosophy .back,.journey .back,
.booking-screen .back,.contacts .back{
order:-1!important;align-self:flex-start!important;
margin:92px 0 0!important;padding:0 24px!important}
/* текст — одна колонна поверх сцены; начинается ниже hero-вида */
.about .about__content,
.philosophy>.content,.journey>.content,
.booking-screen>.content,.contacts>.content{
order:0!important;position:relative!important;z-index:1!important;inset:auto!important;
top:auto!important;left:auto!important;width:auto!important;max-width:none!important;
transform:none!important;margin:0!important;padding:28vh 24px 92px!important;
background:none!important}
/* жёсткие
desktop-длины строки — гасим, перенос естественный */
.about .about__content h1 br,.about .about__lead br,.about .about__copy br,
.philosophy>.content h1 br,.philosophy>.content p br,
.journey>.content h1 br,.journey>.content p br,
.booking-screen>.content h1 br,.booking-screen>.content p br,
.contacts>.content h1 br,.contacts>.content p br{display:none!important}
/* тело текста — 15px (снята заплатка Шага 2: 13px) */
.about .about__lead,.about .about__copy{font-size:15px!important;line-height:1.6!important}
.about .about__copy{color:rgba(var(--ink-rgb),.92)!important}
.philosophy .content p:not(.eyebrow),.journey .content p:not(.eyebrow),
.booking-screen .content p:not(.eyebrow),.contacts .content p:not(.eyebrow){
font-size:15px!important;line-height:1.6!important;opacity:.9!important;margin-bottom:14px!important}
/* .next — тихая инлайн-ссылка в потоке (была fixed-pill) */
.philosophy .next,.journey .next{
position:static!important;right:auto!important;bottom:auto!important;z-index:auto!important;
display:flex!important;width:210px!important;max-width:100%!important;min-width:0!important;
justify-content:space-between!important;margin:26px 0 0!important;padding:12px 0!important;
border:0!important;border-bottom:1px solid rgba(var(--ink-rgb),.55)!important;
border-radius:0!important;background:none!important;backdrop-filter:none!important;
font-size:11px!important;letter-spacing:.22em!important}
/* contacts: кнопка «Записаться» во всю ширину колонны */
.contacts .content .booking{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}