/* ============================================================ alchemy-tune.css — РУЧНОЙ ФАЙЛ, 13 сент 2026. Это НЕ сгенерированный файл. home-alchemy.css, case-alchemy.css, design/system/skin-alchemy.css и design/system/type-6-manrope- oxanium.css собираются заново скриптом site/tools/split-alchemy-css.mjs из замороженного референса (research/alchemy-reference/) — любая ручная правка внутри них исчезает молча при следующем запуске сборки. Этот файл — тот самый предусмотренный «карман» для сознательных отступлений от референса: build.mjs подключает его последним, через слот extraCss в buildHome(), только на теме alchemy (см. THEMES.alchemy.tuneCss + ownCss/themedCss в build.mjs) — поэтому он никогда не попадает в dist/, dist-light/, dist-jelly/. Каждое правило ниже сопровождается комментарием, к какой правке Анны оно относится (нумерация — по списку правок в задаче 13.09.2026). Новую правку — дописывать новым блоком с новым комментарием, а не молча подмешивать в старый. ============================================================ */ /* ---- Правка 1: «цифры в одну строку, заголовки не нужны» ---- .intro-copy убран из разметки (home-alchemy.html, alchemy-only шаблон) — здесь только раскладка того, что осталось: одна колонка вместо grid 1fr/1.12fr, .stats на всю ширину в один ряд из четырёх колонок вместо репликации референсных трёх. */ .intro{grid-template-columns:1fr} .stats{grid-template-columns:repeat(4,1fr)} /* ниже 760px секция уже переходит в мобильную раскладку (frozen CSS схлопывает .intro в 1fr там же) — но .stats у референса никогда не меняет число колонок, только размер шрифта; на узких экранах четыре 60px-цифры физически не помещаются в ряд, поэтому раскладку .stats на этих ширинах определяем сами. Измерено Puppeteer: 2×2 не даёт горизонтального переполнения нигде между 390 и 760px (document.documentElement.scrollWidth === window.innerWidth на всех проверенных ширинах) — однoколоночный фолбэк ниже 430px не понадобился, добавлять его не стали, чтобы не резать раскладку без нужды. */ @media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} } /* ---- Правка 2: «много пустого места вокруг уробороса» ---- Замер на живой сборке (Puppeteer, до правки): .about-section 910px высотой при 1440. Левая колонка — эйброу+заголовок (кончается ~y432 от начала секции) и увеличенный уроборос (.silver-about, clamp(260px,26vw,360px), margin-top 30px) — он тянется до ~y867. Правая колонка (.about-copy) кончается ~y472. Разница держит секцию нижней третью пустой. Решение — уменьшить уроборос и подтянуть его к заголовку, плюс слегка сжать паддинги секции, чтобы левая колонка своей реальной высотой приблизилась к правой, а не свисала отдельным блоком. Только для ширин шире мобильного стека (≤760px секция и так уже переходит в одну колонку с собственными, меньшими значениями во frozen CSS — их не трогаем, чтобы не сломать вертикальную раскладку). 13.09.2026: .silver-about width/margin ниже разложены Правкой 5 (см. дальше в файле) под трёхколоночную вёрстку — это правило больше не действует (перебито более поздним блоком с той же специфичностью), padding остаётся в силе. */ @media(min-width:761px){ .about-section{padding-top:56px;padding-bottom:48px} .silver-about{width:clamp(150px,14vw,190px);margin:14px 0 0 25px} } /* ---- Правка 5: «уроборос между заголовком и текстом — три колонки, средняя меньше» (13.09.2026) ---- home-alchemy.html: .silver-orbit.silver-about вынесен из .about-heading и стал прямым ребёнком .about-section, между .about-heading и .about-copy — теперь это средний grid-item. .about-copy держит max-width:540px (frozen CSS) — значит его колонка не может быть уже 540px без того, чтобы текст начал переносится теснее и потянул высоту секции вверх; треть под уроборос поэтому берём из бывшего 12%-зазора и из заголовка (три строки headline короткие и не используют всю ширину колонки — сужение туда безопасно). align-items:center на самой секции — необходимое следствие: без него .about-copy (единственный грид-item без явной высоты) растягивался бы (stretch по умолчанию) на всю высоту ряда и тянул бы секцию под уроборос и заголовок даже когда его текста в ней меньше. С center каждая колонка берёт свою настоящую высоту. Проверено Puppeteer: высота секции при 1440 — 487.8px (было 652px), т.е. заведомо в потолке; .about-copy теперь самая высокая колонка и определяет высоту ряда. Уроборос увеличен (clamp 150–260px против прежних 150–190px) — ему больше не нужно втискиваться под заголовком — и центрирован и по горизонтали (justify-self), и по вертикали (align-self) в своей колонке, чтобы читаться центром композиции, а не блоком, прибитым к низу. Мобильный стек (≤760px) вынос из .about-heading не трогает — frozen CSS уже кладёт .silver-about в поток между заголовком и .about-copy своим порядком в DOM. Но там же нашёлся старый зазор-баг: .silver-about{margin:28px auto 0} (design/system/ skin-alchemy.css) не задаёт нижний отступ, из-за чего его box на ~20px залезает в box .about-copy (проверено getBoundingClientRect на 390px, было воспроизводимо и до этой правки — просто не бросалось в глаза, потому что видимая обводка кольца на 3% уже своего бокса, а перекрытие пряталось в этом прозрачном поле). Добавляем нижний отступ явно. */ @media(min-width:761px){ .about-section{grid-template-columns:minmax(0,1.05fr) minmax(0,.5fr) minmax(0,1.05fr);column-gap:4%;align-items:center} .silver-about{width:clamp(150px,100%,260px);margin:0;justify-self:center;align-self:center} } @media(max-width:760px){ .silver-about{margin-bottom:24px} } /* между 761 и 1099px контента слишком мало для полной 0.5fr средней колонки без того, чтобы .about-copy (max-width 540px, без ручных переносов строк) не начал переноситься теснее обычного и тянуть секцию вверх — на 768px это добавляло ~66px высоты. Сужаем среднюю колонку и уроборос, чтобы вернуть текстовым колонкам больше места; сама раскладка (три колонки, средняя уже) не меняется, меняется только пропорция. */ @media(min-width:761px) and (max-width:1099px){ .about-section{grid-template-columns:minmax(0,1.05fr) minmax(0,.32fr) minmax(0,1.05fr);column-gap:3%} .silver-about{width:clamp(70px,100%,165px)} } /* ---- Правка 3: «урбан россия и джуиш морокко волкс — убрать из рила» ---- ридится данными (home.json reelOrder) + build.mjs (alchemyReelProjects), в CSS правки не требует. */ /* ---- Правка 4: «карточки как в прошлой версии» ---- решается в build.mjs (alchemyProjectCard переиспользует wallKicker/wallMetaLine), в CSS правки не требует. */ /* ---- Правка 7: «скролл на герое должен с первого раза прокручивать страницу, а не крутить сначала слайдер риэла» (13.09.2026) ---- home-alchemy.css (сгенерирован, не трогаем) в медиа-блоке min-width:1000px and min-height:760px and prefers-reduced-motion: no-preference держит .hero-chapter{height:210svh;position:relative} и .hero-chapter>.studio-hero{position:sticky;top:0;...} — герой занимает 2.1 экрана, и первые ~1.1 экрана скролла уходят на scroll-jacking карусели (alchemy-reel.js слушает scroll и шлёт portfolio:scroll-frame), а не на обычную прокрутку страницы. Анне казалось, что скролл просто не работает. Возвращаем герою обычную высоту тем же медиа-условием — только height и position, остальные декларации блока (min-height:100svh на .studio-hero, паддинги, margin-top:16px на .hero-bottom, translateY-трансформы параллакса на .hero-content/.production-reel) не переопределяем, они держат композицию хедера, а не джекинг. Карусель остаётся живой: она крутится сама по таймеру (7600мс) — это ветка scrollDriven===false в alchemy-reel.js, от высоты .hero-chapter не зависит. Параллакс силуэтов ([data-parallax]) в том же render() тоже не зависит от enabled, продолжает работать. Соответствующая правка в alchemy-reel.js (JS-условие enabled должно совпадать с CSS, иначе прогресс-расчёт схлопывается) — см. шапку того файла. */ @media(min-width:1000px) and (min-height:760px) and (prefers-reduced-motion:no-preference){ .hero-chapter{height:auto} .hero-chapter>.studio-hero{position:static} } /* ---- Правка 8: «блок Portfolio for надо выделить чуть крупнее или болдом — короче должно быть видно» (13.09.2026) ---- Подпись .specialisms>span («Portfolio for») в home-alchemy.css держит font-size:10px, letter-spacing:.1em, без явного font-weight (наследует обычный текст body), и цвет через тёмный оверрайд того же файла — color:#a4b491, приглушённый зелёно-серый на треть темнее --ink (#edf0e7). На фоне четырёх ссылок-практик рядом (обычный текст 13px) подпись читалась мельче и тусклее того, что она подписывает. Правка — только кегль/жирность/цвет, разметку и раскладку (.specialisms flex, .specialisms>span{width:100%} на ≤1150px) не трогаем: обе ширины проверены Puppeteer (1440/1150/760/390) — подпись по-прежнему уходит на свою строку на ≤1150px и делит строку со ссылками на 1440px, переносов вкривь нет, ссылки не сдвинулись. Цвет — токен темы --ink (общий текст, тот же, что держат сами ссылки-практики через currentColor от .specialisms), а не сырой hex: это тот же принцип, что уже в мосте (design/system/_alchemy-bridge.css) — рецепт в переменной, а не в литерале, который через полгода разойдётся с темой. */ .specialisms > span { font-size: 12px; font-weight: 700; color: var(--ink); } /* ---- «джуиш марокко вок — чёрная полоса справа в карточке» (14 сент 2026) ---- Диагноз, не догадка: сам файл design/media/jmw-ws-01-main-visual.png (3016×1474, соотношение 2.046) нигде не несёт чёрной или прозрачной каймы — построчный разбор PNG (raw-пиксели, свой инфлейтор без зависимостей) показал непрерывный узор по всей ширине: тёмная навигация вверху (#111a2d-ish), фотография в середине, кремовая плашка внизу — одинаково слева, в центре и у истинного правого края (x=3010). Данные в projects.json тоже чисты: у media[0] нет fit, кроме focal:"left center" — на "fit":"contain" с тёмным bg (частая причина такой полосы у другого слага) тут можно не проверять, потому что theory 2 отпадает структурно. Рамка карточки держит aspect-ratio:1.72 (home-alchemy.css:99), объект cover, object-position:left center (focal из mediaTag() выставляет inline-стиль). При 2.046 против 1.72 cover обязан обрезать 16.4% ширины; left-anchor показывает исходные x∈[0,2536] и обрезает x∈[2536,3016]. Источник проблемы — где именно проходит эта линия: Puppeteer (getBoundingClientRect + drawImage-реконструкция того же кропа на canvas) нашёл, что синяя кнопка шапки сайта лежит в x∈[2470,2775] — т.е. частично ВНУТРИ видимого окна (2470<2536), и обрезается прямо посередине. Обрубленная кнопка встык с рамочным гартером карточки (.project-visual{background:#0c100a}, home-alchemy.css:343, ~11px паддинг .project-open) — оба тёмные, оба без текстуры — и читаются одним сплошным чёрным пятном на скриншоте с реальным диалогом .project-card, хотя технически это два разных слоя. У всех остальных 18 карточек (полный обход через show-all + Puppeteer, покадрово) такого нет — либо фокус по умолчанию (центр, обрезает симметрично), либо в кадре нет объектов интерфейса впритык к краю. Сдвинуть object-position ещё левее нельзя — 0% уже предел, и кнопка всё равно попадает в 2536-пиксельное окно шириной больше расстояния до её начала (2470px от левого края). Чиним лёгким кропом: transform:scale добавляет ~4% сверх cover, окно сужается до 2536/1.04≈2438px — на 32px раньше живой кнопки, край снова упирается в чистую тёмную шапку без обрезанных элементов. transform-origin:left center держит тот же left-anchor, что и focal. Ховер получает свой scale (1.08 — по счастливому совпадению та же цифра, что уже держит :hover в home-alchemy.css для всех карточек), чтобы карточка не потеряла интерактивный zoom-in — тем же приёмом, тем же left-anchor, с запасом до кнопки в 2536/1.08≈2348px. Правило только по data-slug — global-обработка (пере-скроить focal/fit у всего реестра) запрещена и не нужна: у остальных карточек такого дефекта нет. */ .project-card[data-slug="jewish-morocco-walks"] .project-visual img { transform: scale(1.04); transform-origin: left center; } .project-card[data-slug="jewish-morocco-walks"]:hover .project-visual img { transform: scale(1.08); transform-origin: left center; } /* Копирайт-ревью 14.09.2026: пункты строки работ набираются жирным — это якорь для сканирующего взгляда, не украшение. */ .service-tags strong, .offer__kw strong { font-weight: 700; color: var(--ink); }