/* прогон 33 — слой поверх leaf32 */

/* S33 · главная сессия: подвал на телефоне без дубля контактов текстом (Роман 02.11: «у нас есть кнопки, зачем нам дублировать ссылки текстом… дублируем то, что на сайте, просто аккуратно, без лишнего»).
   Остаются круглые кнопки, часы, разделы и документы — как на ПК. */
@media (max-width:1023.98px){ #contacts .ft-list:has(a[href^="https://t.me/Cross_Eng"]){display:none!important} }

/* S33 · глобус Nano Banana 2 (приложение Gemini, 02.11) на стыке «Отзывы → Обучение» — пункт пульта «Глобус» (Роман: «как один из вариантов в пульт, и я сравню»).
   Полоса 9,6:1 одним куском; фон бумаги снят (цвет не трогали). Тот же «вес», что у семьи p32: площадь ≈ 32 000 u², на телефоне ≈ 13 000. */
html[data-rh="p32"][data-gb="nb"] [data-sec="how"]{--p-rh:url(img33/p32-rh-nb.webp);--p-rw:554;--p-rhh:58}
@media (max-width:1023.98px){ html[data-rh="p32"][data-gb="nb"] [data-sec="how"]{--p-rw:353;--p-rhh:37} }

/* ══ H33: шапка (дизайнер H, прогон 33) ════════════════════════════════════════════════════════════════════════════════
   Роман 02.11 по шапке: (1) «облака под ангелом гуще – там, где у ангела продолжение тела, не должно быть видно ничего» (скрин 0-hero-clouds);
   (2) «когда опускаем, ангел с облаками вверх уходят» – новое значение h33 пункта hm; (3) «шапка на телефоне – в один экран» – пункт «Шапка на телефоне» (ht).
   Действует на шапки с небом (.v-sky28: Фавор, светлое небо m32d, Мон-Сен-Мишель, ярь); «голая» angel18 не меняется. Ангел не двигается. */

/* H33 · (1) облака под ангелом гуще – пункт «Облака под ангелом» (html[data-hc]): h33 (по умолчанию) / as – как было.
   Было: гряда облаков гасла маской на 40–64 % своей высоты – плотная середина рисунка облака исчезала, сквозь неё проступали холмы; подол ангела гас ещё выше.
   Стало: гряда не гаснет к днищу – плотная середина облака стоит до нижней кромки коробки (кромка её и срезает, как раму); подол уходит в плотную часть облака;
   к боковым краям гряда тает своим краем рисунка. Свои рисунки не добавлены – тот же слой облаков img/angel-clouds. */
@media (min-width:1024px){
  html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .cl-bed.b1{-webkit-mask-image:none;mask-image:none}
  html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{-webkit-mask-image:none;mask-image:none;opacity:1}
  html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 71%,transparent 78%);mask-image:linear-gradient(180deg,#000 0,#000 71%,transparent 78%)}
}

/* H33 · (2) пункт hm, новое значение h33 «отстаёт только небо» (Роман 02.11: «когда опускаем, ангел с облаками вверх уходят»).
   Было (m32): небо k 0,55 и гора k 0,3 отставали – гора уезжала вниз из-под облаков, ангел с облаками «взлетал» с неё.
   Стало: гора, холмы и туман у подножия едут вместе с коробкой, ангелом и облаками (земля под ангелом не уходит); отстаёт только небо – оно дальше всего.
   Углы, чёткая кромка, запас неба – как m32 (правила M32 повторены для h33). Только transform, от 1024 px; reduced-motion и «Остановить анимацию» – стоит. */
html[data-hm="h33"] [data-sec="hero"] .v-sky28{--m-R:120vh;--m-ks:.5;--m-kl:0}
html[data-hm="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * max(.711px, calc(100vw / 1440))))!important;
  -webkit-mask-image:none!important;mask-image:none!important;overflow:hidden;overflow:clip;isolation:isolate}
html[data-hm="h33"] [data-sec="hero"] .v-sky28 > :is(.sky28,.land28,.m32-mist){border-radius:inherit}
@media (max-width:1023.98px){
  html[data-hm="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * clamp(.8px, calc(100vw / 390), 1.35px)))!important}
}
@media (min-width:1024px){
  html[data-hm="h33"] [data-sec="hero"] .v-sky28 .sky28{overflow:visible}
  html[data-hm="h33"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{top:-14%;height:128%}
  html[data-hm="h33"] [data-sec="hero"] .v-sky28.sky28-yar .sky28 img{top:-24%!important;height:125%!important}
  html[data-hm="h33"] [data-sec="hero"] .m32-mist{display:block;position:absolute;z-index:-1;left:0;right:0;bottom:0;height:58%;pointer-events:none;
    background:radial-gradient(64% 78% at 20% 100%, rgba(251,248,241,.8) 0, rgba(251,248,241,.58) 42%, rgba(251,248,241,0) 76%)}
}
@supports (animation-timeline: scroll()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    html[data-hm="h33"]:not(.still):not([data-theatre="off"]) [data-sec="hero"] .v-sky28 .sky28 img{--m-k:var(--m-ks);animation:m32-par linear both;animation-timeline:scroll(root);animation-range:0 var(--m-R);will-change:transform}
  }
}

/* H33 · (3) шапка на телефоне – в один экран вместе с верхней панелью сайта (Роман 02.11: «слишком вытянутая… нужно, чтобы помещалась в один телефонный экран…
   ангела можно уменьшить или поменять его расположение»). Пункт пульта «Шапка на телефоне» (html[data-ht]): h33a / h33b / h33c / as – как было (1040 px).
   Общее: высота коробки = экран минус панель (58 px) и 12 px воздуха – по svh, поэтому и в окне артефакта в приложении Claude (≈ 393×723), и в Safari с его панелями
   шапка целиком на экране; на 390×844 – ровно макет (u = 1). Всё внутри – в единице шапки u = min(ширина/390, высота/макет 772): на низком экране композиция
   уменьшается целиком. Текст не мельче 16 px, поэтому на низком экране он выше макета на --exk (надзаголовок) и --exb (подзаголовок, кнопка) – на столько же
   сдвигаются ангел и облака (или укорачивается картина), чтобы ничего не наехало. Ангел не двигается; текст и кнопка не лежат на рисунке; облака под ангелом плотные. ПК не меняется. */
@media (max-width:1023.98px){
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{--hd:772;--pu:clamp(.8px, calc(100vw / 390), 1.35px);--avh:100vh;
    --u:max(.66px, min(var(--pu), calc((var(--avh) - 58 * var(--pu) - 12px) / var(--hd))));
    --exk:max(0px, 41.6px - 41.6 * var(--u));
    --exb:calc(2.6 * max(0px, 16px - 19 * var(--u)) + max(0px, 44px - 52 * var(--u)));
    --sh0:0px;--Ph:calc(var(--hd) * var(--u));
    height:calc(var(--hd) * var(--u))!important;margin-top:0!important}
  /* поля текста – в единице страницы (не шапки): на низком экране кегль заголовка уменьшается, а строка остаётся во всю ширину – надзаголовок и подзаголовок не добавляют строк */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .copy{left:calc(14 * var(--pu));right:calc(14 * var(--pu));top:calc(18 * var(--u));width:auto!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 h1{font-size:calc(56 * var(--u))!important;line-height:.88;margin:calc(12 * var(--u)) 0 calc(14 * var(--u))!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .lede{font-size:max(16px, calc(19 * var(--u)))!important;line-height:1.3;max-width:none}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .acts{margin-top:calc(18 * var(--u))!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .acts .btn{min-height:max(44px, calc(52 * var(--u)))!important;font-size:max(16px, calc(18 * var(--u)))}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel{width:calc(var(--aw) * var(--u))!important;left:calc(50% - var(--aw) * var(--u) / 2)!important;top:calc(var(--ay) * var(--u) + var(--sh0))!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important;mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed.b1{width:calc(var(--c1w) * var(--u))!important;left:calc(50% - var(--c1w) * var(--u) / 2)!important;top:calc(var(--c1y) * var(--u) + var(--sh0))!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed.b2{width:calc(var(--c2w) * var(--u))!important;left:calc(50% + var(--c2x) * var(--u))!important;top:calc(var(--c2y) * var(--u) + var(--sh0))!important}
  /* свиток: поле надписи – по бумаге свитка (шире и ниже, чем было); кегль от ширины ангела (не мельче 11,5 px); стих виден, пока ангел шире 225 px (раньше уже при 280 px оставалась одна ссылка «Prov. 9:10» – свиток смотрелся пустым) */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .sheet{left:49.8%!important;width:31.6%!important;height:18.6%!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv{font-size:max(11.5px, 4.9cqw)!important;line-height:1.12}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv .t{display:inline!important}
  /* Prov 4:7 на телефонном свитке не помещается (на 10 px ниже листа) – на телефоне свиток меняет только 9:10, 15:1, 18:21 (длинные и так скрыты) */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv[data-ref="Proverbs 4:7"]{display:none!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv cite{font-size:max(11.5px, 4.3cqw)!important;margin-top:.45em!important;line-height:1.1!important}
  /* стрелка M32 на телефоне не помещается между кнопкой и ангелом (легла бы на нимб) – на телефоне её нет; шапка и так в один экран, ниже сразу следующий раздел */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .m32-chev{display:none!important}
  /* небо: только верх акварели Гэнди (лучи и облака) – берег с руинами и деревьями уходит ниже облаков, за ангелом спокойное небо без «пятен» */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .sky28{top:0;bottom:auto;height:calc(var(--sh) * var(--u))}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{object-position:50% 0}
  /* гора (Фавор, Мон-Сен-Мишель) на телефоне была бы закрыта облаками и торчала обрывками по краям – на телефоне её нет: небо, ангел, облака */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .land28{display:none!important}
}
@supports (height:100svh){ @media (max-width:1023.98px){ html[data-ht^="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{--avh:100svh} } }

/* h33a «Ангел под текстом»: текст на небе сверху, как сейчас; ангел меньше (280 u вместо 344) и встаёт сразу под кнопкой, подол уходит в плотную гряду облаков у днища */
@media (max-width:1023.98px){
  html[data-ht="h33a"] [data-sec="hero"] .v-sky28{--aw:280;--ay:336;--fm0:70%;--fm1:76%;--c1w:420;--c1y:680;--c2w:470;--c2x:-235;--c2y:580;--sh:1100}
  html[data-ht="h33a"] [data-sec="hero"] .v-sky28.v-angel17.hero{--sh0:calc(var(--exk) + var(--exb))}
  /* светлая вуаль неба – за текстом (вверху слева), а не за ангелом */
  html[data-ht="h33a"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28::after{background:radial-gradient(90% 34% at 28% 15%, rgba(251,248,241,.72) 0, rgba(251,248,241,.42) 55%, rgba(251,248,241,0) 100%)}
}

/* h33b и h33c – картина-коробка (небо, ангел, облака) и текст на листе страницы. Картина: чёткие края, скруглённые углы; облака у её днища плотные, срезаны кромкой.
   Облака – во всю ширину коробки, чтобы срез по днищу шёл по её скруглённым углам. Высота картины --Ph; ангел и облака срезаются по ней (clip-path). */
@media (max-width:1023.98px){
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .sky28{height:var(--Ph)!important;border-radius:var(--box-r);overflow:hidden}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .sky28 picture{height:calc(var(--sh) * var(--u))}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .angel{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--ay) * var(--u) + var(--sh0)) 0)}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed:is(.b1,.b2){width:100%!important;left:0!important}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b1{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--c1y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) var(--box-r))}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--c2y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) var(--box-r))}
  /* на «Яри» текст под картиной – на листе: тушью и лазурью, как у остальных шапок, кнопка – обычная */
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28.sky28-yar .copy .lede{color:#3b3a36!important;text-shadow:none!important}
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28.sky28-yar .copy .hero-cta{background:transparent!important;color:var(--azure,#29466f)!important;border-color:var(--azure,#29466f)!important}
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy h1{color:var(--ink,#24262b)!important;text-shadow:none!important}
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy h1 em{color:var(--lang,#29466f)!important}
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy .kick{color:var(--gold-d,#8a6a1f)!important}
}

/* h33b «Ангел сверху»: картина с ангелом наверху (как карточки «Направлений» на телефоне), под ней на листе – надзаголовок, «Решаем языковой вопрос»,
   подзаголовок и кнопка. Ангел крупнее (300 u), свиток читается. На низком экране картина короче на рост текста (--exk + --exb). */
@media (max-width:1023.98px){
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28{--P:404;--aw:300;--ay:-16;--fm0:70%;--fm1:76%;--c1w:390;--c1y:318;--c2w:430;--c2x:-215;--c2y:256;--sh:600}
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28.v-angel17.hero{--Ph:calc(var(--P) * var(--u) - var(--exk) - var(--exb))}
  /* текст привязан к днищу шапки: кнопка никогда не срезается кромкой, даже на самом низком экране */
  html[data-ht="h33b"] [data-sec="hero"] .v-sky28 .copy{top:auto!important;bottom:calc(14 * var(--u))}
}

/* h33c «Заголовок на небе, кнопка под картиной»: надзаголовок и «Решаем языковой вопрос» на небе, под ними ангел в облаках – одна картина;
   подзаголовок и кнопка – под картиной, на листе, у большого пальца. */
@media (max-width:1023.98px){
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28{--P:624;--aw:280;--ay:206;--fm0:70%;--fm1:76%;--c1w:420;--c1y:524;--c2w:460;--c2x:-230;--c2y:482;--sh:860}
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28.v-angel17.hero{--sh0:var(--exk);--Ph:calc(var(--P) * var(--u) - var(--exb))}
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .copy{top:calc(18 * var(--u));bottom:calc(14 * var(--u));display:flex;flex-direction:column;pointer-events:none}
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .copy > *{pointer-events:auto}
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .lede{margin-top:auto!important}
}
/* очень низкий экран (ангел уже 225 px, Safari с панелями): стих на свитке не помещается – на свитке только ссылка, по середине листа */
@container (max-width:224px){
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv .t{display:none!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .sheet{align-items:center!important;padding-top:0!important}
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv cite{margin-top:0!important;font-size:max(12px, 6cqw)!important}
}
@media (max-width:389.98px){
  /* на 360–389 px надзаголовок «Онлайн-школа английского» не помещался в строку (третья строка) – разрядка чуть меньше */
  html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .kick{letter-spacing:.085em!important}
}
@media (max-width:1023.98px){
  /* h33c: светлая вуаль неба – за заголовком (вверху слева) */
  html[data-ht="h33c"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28::after{background:radial-gradient(95% 30% at 28% 13%, rgba(251,248,241,.72) 0, rgba(251,248,241,.42) 55%, rgba(251,248,241,0) 100%)}
}

/* H33 · пульт: пункт «Шапка на телефоне» на ПК ничего не меняет – виден только на телефоне; «Облака под ангелом» меняет только ПК – виден только на ПК
   (строку ищем по кнопке значения: h33b есть только у «Шапки на телефоне»; у облаков – по названию группы) */
@media (min-width:1024px){ #pult .pu-row:has(> .pu-seg > button[data-k="h33b"]){display:none!important} }
@media (max-width:1023.98px){ #pult .pu-row:has(> .pu-seg[aria-label="Шапка: облака под ангелом"]){display:none!important} }

/* S33 · smoke 390: ссылки в мелком тексте («Или сразу в Telegram», «заявка на сайте», «политика конфиденциальности») были 43 px —
   цель касания 44 считалась до zoom .9; считаем с запасом под масштаб (строка не растёт: у строчной ссылки отступы на высоту строки не влияют) */
@media (pointer:coarse){ main p a:not([class]), main li a:not([class]), main dd a:not([class]), .q-note a, .z-note a, footer p a:not([class]) { padding-block:max(.7em, calc((48px - 1.25em) / 2)); } }

/* S33 · на 1024–1199 подвал выходил вбок на 17 px (нашёл C: нижняя строка ссылок не помещалась) — строка переносится, документы уходят к правому краю */
@media (min-width:1024px) and (max-width:1199.98px){ .v-ft23b1a .ft-small{flex-wrap:wrap;row-gap:calc(6*var(--u))} .v-ft23b1a .ft-small nav.r{margin-left:auto} }

/* S33 · рецензент 33: при «Тесты = x30k» весы улетали в шапку — position:relative разделу ставит скрипт только тому варианту, у которого при загрузке id
   (вариант по умолчанию). Предметы P32 стоят от своего раздела во всех вариантах — раздел с предметом всегда точка отсчёта */
main.wrap > [data-sec] > section:has(> .p32-obj){position:relative}

/* ══ C33: цветные плиты, прогон 33 (дизайнер C, пункт пульта zp) ══════════════════════════════════════════════════════════════════
   Роман 02.11: «Отзывы» – «мне нравится… в этом ярьном оформлении – единственное, фон там не в тему – нужны ассоциации с учениками говорящими
   и отзывами / свитками»; «Запись» – «пастельный… зелёный мел, бирюзовый мел фон… мне не нравится… попробовать то же, что у отзывов – приятная ярь
   с рисунком на фоне… или голубую лазурь… другие цвета из разрешённых»; «Между уроками» – «пастельный серо-буро-поцарапанный… цвет фона не нравится».
   Гравюры – куратор 02.11 (cur/PICKS.md): «Отзывы» – Б. Франко «Христос среди учителей» (Рейксмузеум RP-P-OB-36.152, PD): мальчик отвечает учёным с книгами;
   «Запись» – Я. ван де Велде «Зерцало письма», 1605, лист росчерков (Мет 28.106.26, CC0): прошение, почерк; три коробки канала – В. Холлар
   «Пьяцца в Ковент-Гардене», ок. 1647 (Мет 17.3.1166-383, CC0): гуляющие на площади – «между уроками».
   Плит не больше трёх, цвет только ярь #2c5a4e и лазурь #29466f (густые, как «Отзывы»), под краской – гравюра; пастели нет. Значения:
   c33a – «Запись» ярью, три коробки лазурью; c33b – «Запись» лазурью, три коробки ярью; c33c – две плиты, обе ярью («Отзывы», «Запись»), три коробки на листе страницы
   (порядок такой, чтобы каждый следующий щелчок пульта менял «Запись» – пункт стоит у неё).
   «Отзывы» во всех – густая ярь с Франко; yar/az/mix (прежние) тоже получают Франко вместо потолка Бодлианской библиотеки. */

/* (1) «Отзывы»: Франко вместо Бодлианской – при всех плитах */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{background:url(img33/zp33-franco-2000.webp) 50% 0 / cover no-repeat}
@media (max-width:1023.98px){ html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{background-size:auto 100%;background-position:30% 0} }

/* (2) новые значения: «Отзывы» – как yar (густая ярь 88 %, текст кость, акцент и номер золото, окошки кость), гравюра Франко */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]){--zp-deep:rgba(44,90,78,.88);--zp-acc:#e6c77a;--c33-yar:rgba(44,90,78,.88);--c33-az:rgba(41,70,111,.9)}
html[data-zp="c33a"]{--c33-za:var(--c33-yar);--c33-ch:var(--c33-az)}
html[data-zp="c33b"]{--c33-za:var(--c33-az);--c33-ch:var(--c33-yar)}
html[data-zp="c33c"]{--c33-za:var(--c33-yar)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section{position:relative;isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));
  top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));background:url(img33/zp33-franco-2000.webp) 50% 0 / cover no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));
  background:var(--zp-deep);box-shadow:0 0 0 100vmax var(--zp-deep);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric h2{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric h2 em{color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric :is(.num,.fol,.fol::before){color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric .rubric-sub{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-cnt{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar{color:#fbf8f1!important;border-color:rgba(251,248,241,.7)!important;background:transparent!important}
@media (hover:hover){ html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar:hover:not([aria-disabled="true"]){background:#fbf8f1!important;color:#24262b!important} }
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar:focus-visible{outline-color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-card{background:#fffdf8!important;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 24px rgba(10,24,20,.16)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .p32-o-quill{display:none!important}
/* роза на верхней кромке плиты «Отзывов» (S32, «бомбезный цветочек») – и при новых значениях */
html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]{position:relative}
html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
  content:"";position:absolute;z-index:4;left:50%;top:calc(-84 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
  margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
  filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
  html[data-mo="m32"][data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
    --m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (max-width:1023.98px){
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-44px;bottom:-40px;
    -webkit-mask-image:none;mask-image:none;background-size:auto 100%;background-position:30% 0}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::after{top:-44px;bottom:-40px}
  html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{top:-44px;width:64px;height:64px;margin:-32px 0 0 -32px}
}

/* (3) «Запись»: густая плита (c33a/c33c – ярь, c33b – лазурь), под краской росчерки ван де Велде. Заголовок – на плите, текстом кости, как «Отзывы»;
   форма и пара – на одном листе кости («прошение»: текст слева, миниатюра справа), лист – событие на плите. Буква «Ч» – киноварь, как выбрано (y32c). */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section{position:relative;isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::before{content:"";position:absolute;z-index:-3;left:calc(-36 * var(--u));right:calc(-36 * var(--u));
  top:calc(-48 * var(--u));bottom:calc(-48 * var(--u));background:url(img33/zp33-velde-2000.webp) 50% 50% / cover no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::after{content:"";position:absolute;z-index:-2;left:0;right:0;top:calc(-48 * var(--u));bottom:calc(-48 * var(--u));
  background:var(--c33-za);box-shadow:0 0 0 100vmax var(--c33-za);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-kick{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-kick span{color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] :is(.zd1-h,.zd1-sub){color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-h em{color:var(--zp-acc)!important}
/* лист: от верха формы до низа строки, через обе колонки (форма + пара); у формы свой фон и кайма сняты – лист один */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main{position:relative}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-form{background:transparent!important;box-shadow:none!important}
@media (min-width:1024px){
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;
    top:calc(26 * var(--u));right:calc(-456 * var(--u));background:#fffdf8;border-radius:var(--box-r,calc(10 * var(--u)));
    box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px rgba(10,20,30,.2);pointer-events:none}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art{margin:0 calc(30 * var(--u)) calc(22 * var(--u)) 0}
}
@media (max-width:1023.98px){
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-28px;bottom:-28px;
    -webkit-mask-image:none;mask-image:none;background-size:cover;background-position:40% 0}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::after{top:-28px;bottom:-28px}
  /* телефон: форма и пара – тот же лист, одним куском (форма сверху, пара внизу листа) */
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d{row-gap:0!important}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main{margin-top:calc(16 * var(--u))}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-form{background:#fffdf8!important;border-radius:var(--box-r) var(--box-r) 0 0!important}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art{width:auto!important;justify-self:stretch!important;margin:0!important;
    padding:calc(4 * var(--u)) 0 calc(18 * var(--u));background:#fffdf8;border-radius:0 0 var(--box-r) var(--box-r);display:flex;justify-content:center}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art img{width:calc(250 * var(--u))}
  html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art::after{left:calc(50% - 110 * var(--u));right:auto;width:calc(220 * var(--u));bottom:calc(14 * var(--u))}
}

/* (4) три коробки «Между уроками» (второй экран): c33a – густая лазурь, c33b – густая ярь, под краской Холлар; c33c – без плиты, коробки на листе страницы */
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri{isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
  background:url(img33/zp33-covent-2000.webp) 50% 58% / cover no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
  background:var(--c33-ch);box-shadow:0 0 0 100vmax var(--c33-ch);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-box{box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px rgba(10,18,36,.22)}
@media (max-width:1023.98px){
  html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-32px;bottom:-32px;
    -webkit-mask-image:none;mask-image:none;background-size:cover;background-position:50% 0}
  html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::after{top:-32px;bottom:-32px}
}

/* S33 · рецензент 33: под розой на кромке плиты «Отзывов» стояла статуя в нише (кромка резала её по шею, роза вставала вместо головы) —
   гравюра Франко крупнее и сдвинута вправо: под розой колонна, сцена «мальчик и учёные» остаётся над карточками */
@media (min-width:1024px){
  html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"],[data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{background-size:125% auto;background-position:100% 0}
}

/* S33 · рецензент 33: в h33b/h33c у правого края днища между облаками и кромкой проступала земля — правая гряда (b2, зеркальная) сдвинута вправо
   и срезана по кромке картины; плотная часть закрывает угол */
@media (max-width:1023.98px){
  html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{left:14%!important;clip-path:inset(0 14% calc(100% - var(--Ph) + var(--c2y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) 0)}
}