@import url("/tokens.css");
:root{--accent:#a9855d;--accent-rgb:169,133,93;--bg:#d8cbbb;/* подобрано под тон фото */--fs-h1:clamp(51px,4.5vw,75px);--lh-h1:1}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0;background:var(--bg);color:var(--ink)}body{overflow:hidden;font-family:var(--font-sans)}a{color:inherit;text-decoration:none}.color-screen{position:relative;width:100vw;height:100vh;min-height:640px;overflow:hidden;isolation:isolate}.background{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}.color-screen:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(249,244,237,.2),transparent 40%)}.header{position:absolute;top:clamp(27px,5vh,55px);left:clamp(34px,4.2vw,70px);right:clamp(34px,4.2vw,70px);display:flex;align-items:flex-start;justify-content:space-between}.brand{display:flex;width:48px;flex-direction:column;align-items:center;font:400 clamp(38px,3.2vw,56px)/.86 var(--font-serif);letter-spacing:-.08em}.brand i{width:4px;height:4px;margin-top:16px;border-radius:50%;background:currentColor}.section-nav{position:absolute;left:50%;display:flex;gap:62px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em}.section-nav a{padding:8px 0 12px;border-bottom:1px solid transparent}.section-nav .active{border-color:rgba(var(--ink-rgb),.64)}.menu{display:flex;align-items:center;gap:22px;padding:0;border:0;background:none;color:inherit;font:13px var(--font-sans);letter-spacing:.3em}.menu>i{width:4px;height:4px;border-radius:50%;background:currentColor}.menu>b{display:grid;width:43px;gap:7px}.menu em{height:1px;background:currentColor}.intro{position:absolute;top:50%;left:clamp(55px,7.2vw,120px);width:280px;transform:translateY(-48%)}.eyebrow{margin:0 0 23px}h1{margin:0 0 17px}.lead{margin:0;font:400 clamp(21px,1.7vw,28px)/1.42 var(--font-serif)}.rule{display:block;width:32px;height:1px;margin:27px 0 23px;background:var(--accent)}.copy{margin:0;color:rgba(var(--ink-rgb),.76);font-size:14px;line-height:1.65}.cards{position:absolute;inset:0;pointer-events:none}.card{position:absolute;bottom:17.2%;display:flex;width:15.7%;min-width:190px;flex-direction:column;align-items:center;padding:65px 10px 18px;color:rgba(255,250,244,.97);text-align:center;text-shadow:0 1px 12px rgba(32,24,19,.42);pointer-events:auto}.card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent,rgba(35,27,22,.56));opacity:.74;transition:opacity .25s}.card:hover:before{opacity:.94}.card span{font:400 clamp(21px,1.7vw,29px)/1.1 var(--font-serif)}.card small{margin-top:12px;font-size:9px;letter-spacing:.2em}.card b{margin-top:17px;font-size:21px;font-weight:200;transition:transform .25s}.card:hover b{transform:translateX(6px)}.card--warm{left:37.1%}.card--cool{left:57.1%}.card--brown{left:77%}.back{position:absolute;left:clamp(34px,4.2vw,70px);bottom:clamp(27px,4vh,45px);display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.21em}.back span{font-size:22px}.progress{position:absolute;right:clamp(34px,4.2vw,70px);bottom:clamp(29px,4vh,47px);display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.14em}.progress b{font-weight:500}.progress i{width:82px;height:1px;background:linear-gradient(90deg,var(--accent) 33%,rgba(255,255,255,.8) 33%)}.progress span{opacity:.65}@media(max-width:900px){body{overflow:auto}.color-screen{min-height:760px}.background{object-position:19% center;filter:blur(14px) brightness(1.04) saturate(.92);transform:scale(1.12)}.intro{left:5vw;top:42%}
/* Шаг 4 (2026-09-01): mobile-паттерн «тип Б» — 3 отдельные панели-портрета,
   как форма/движение. Раскладку/section-nav/рамку/тихий «Назад» задаёт
   общий блок COLOR/FORM/MOVEMENT в responsive-shell.css.
   Нарезки color-panel-{warm,cool,brown}.png — по РУЧНОМУ замеру исходника
   (сетка 100px):
   • центр кропа X = центр СТЕКЛЯННОЙ КОЛОННЫ, не лица (фигуры сидят у левого
     края своих колонн; центрирование по колонне держит края кропа ВНУТРИ
     стекла → без шва). Колонны: col1 620–895 / col2 925–1210 / col3 1285–1560;
   • верх кропа = верх ГОЛОВЫ каждой фигуры (y 314/283/313) − 15 → головы
     на одной высоте во всех панелях; верх кропа при этом ниже верха
     колонны → нет светлой полосы-зазора сверху;
   • Wc=223 / Hc=415 — единые (пропорция 0.537 = как форма/движение 336/624);
     низ кропа (714/683/713) ВЫШЕ линии воды (~731) у всех → полоски воды
     нет ни у одной (как форма/движение — обрезка по пояс, без воды).
   Фон на mobile размыт (blur 14px) — колонна из фонового фото не «торчит»
   справа под витриной. */
.color-screen>.cards>.card--warm::before{background-image:url("/color-panel-warm.png")!important}
.color-screen>.cards>.card--cool::before{background-image:url("/color-panel-cool.png")!important}
.color-screen>.cards>.card--brown::before{background-image:url("/color-panel-brown.png")!important}
}