/* Сюжетные блоки для index2.html — «кто мы», «одинаковых компаний не бывает»,
«через наши руки прошли», «ради чего».
Отдельный файл, а не правки styles.css: обе версии страницы должны открываться
рядом и сравниваться, а базовые стили при этом остаются общими и нетронутыми. */
/* ---------- Кто мы ---------- */
.story { background: var(--card); }
.story-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 5vw; align-items: start; }
.story-copy h2 { margin-bottom: 26px; }
.story-lede { max-width: 580px; margin-bottom: 20px; color: #46524d; font-size: 19px; line-height: 1.62; }
.story-copy p:not(.eyebrow):not(.story-lede) { max-width: 580px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.story-marks { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.story-marks li { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line); }
.story-marks strong { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--green-2); }
.story-marks span { color: #46524d; font-size: 14px; line-height: 1.6; }
.story-aside { padding: 34px 32px; border: 1px solid rgba(21, 37, 31, .18); background: var(--paper); box-shadow: 18px 22px 0 rgba(18, 60, 50, .08); }
.story-aside-title { margin: 0 0 24px; color: var(--green-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-because { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.story-because li { padding-left: 20px; border-left: 2px solid var(--mint); }
.story-because b { display: block; margin-bottom: 7px; font-size: 15px; }
.story-because span { color: var(--muted); font-size: 14px; line-height: 1.62; }
/* ---------- Вариант блока «Кто мы» с картинкой (index3.html) ----------
Картинка вертикальная и тёмная, поэтому занимает отдельную колонку слева,
а карточка «что это меняет» уезжает под сетку и разворачивается в три колонки:
иначе блок распухает по высоте, а текст зажимается в узкую полосу. */
.story--photo .story-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 4.5vw; align-items: stretch; }
.story-photo { margin: 0; min-height: 560px; overflow: hidden; background: #2a2419; box-shadow: 18px 22px 0 rgba(18, 60, 50, .1); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 42%; }
.story--photo .story-lede,
.story--photo .story-copy p:not(.eyebrow):not(.story-lede) { max-width: 660px; }
.story-outcome { margin-top: 62px; padding-top: 36px; border-top: 1px solid var(--line); }
.story-because--row { grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* ---------- Иллюстрации ролей: показывать целиком ----------
Иллюстрации нарисованы горизонтальными (1600×~900), а колонка в .role-panel
высокая (min-height 600px). При object-fit: cover от картинки оставалась
середина: у «Собственнику» уезжал человек, ради которого вся сцена, у «Команде МП» —
окна площадок, которые слетаются в панель. Показываем целиком, фон подобран
под фон самих иллюстраций, чтобы не было заметных полей. */
.role-image { display: grid; place-items: center; padding: clamp(18px, 2.6vw, 34px); background: #e8e9df; }
.role-image img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
/* ---------- Одинаковых компаний не бывает ---------- */
.different { background: var(--paper-deep); }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; border: 1px solid var(--line); background: var(--line); }
.diff-grid article { padding: 32px 30px; background: var(--paper); }
.diff-grid article > span { display: block; margin-bottom: 15px; color: var(--gold); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.diff-grid strong { display: block; margin-bottom: 10px; font-size: 16px; }
.diff-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.layers-lead { max-width: 720px; margin: 62px 0 26px; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 29px); font-weight: 500; letter-spacing: -.035em; line-height: 1.25; }
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.layers article { padding: 36px 34px; border: 1px solid var(--line); background: var(--card); }
.layer-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--green-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.layer-kicker::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.layers h3 { margin-bottom: 12px; font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.035em; }
.layers p { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.layers ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.layers li { position: relative; padding-left: 20px; }
.layers li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.layers .is-custom { border-color: var(--green); background: var(--green); color: var(--white); }
.layers .is-custom .layer-kicker { color: #a8c8b9; }
.layers .is-custom p { color: #a6b9b1; }
/* ---------- Через наши руки прошли ---------- */
.scale { background: var(--card); }
.scale-band { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; margin-top: 52px; padding: 44px 40px; border: 1px solid var(--line); background: var(--paper); }
.scale-pole strong { display: block; margin-bottom: 9px; color: var(--green); font-family: var(--serif); font-size: clamp(28px, 3.1vw, 42px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.scale-pole span { color: var(--muted); font-size: 14px; line-height: 1.6; }
.scale-pole--right { text-align: right; }
.scale-line { position: relative; width: min(240px, 18vw); height: 1px; background: linear-gradient(90deg, var(--mint), var(--green)); }
.scale-line::before, .scale-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; }
.scale-line::before { left: 0; background: var(--mint); }
.scale-line::after { right: 0; background: var(--green); }
.scale-line em { position: absolute; inset: auto 0 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.scale-note { max-width: 780px; margin: 26px 0 0; color: #46524d; font-size: 16px; line-height: 1.7; }
.scale-note b { color: var(--ink); }
/* ---------- Ради чего ---------- */
.belief { background: var(--paper-deep); }
.belief .container { display: grid; justify-items: center; text-align: center; }
.belief .eyebrow { justify-content: center; }
.belief-quote { max-width: 940px; margin: 0 0 28px; font-family: var(--serif); font-size: clamp(30px, 4vw, 54px); font-weight: 500; letter-spacing: -.048em; line-height: 1.1; }
.belief-quote em { color: var(--green-2); font-weight: 400; }
.belief p { max-width: 660px; margin: 0 0 30px; color: var(--muted); font-size: 16px; line-height: 1.72; }
/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
.story-grid, .story--photo .story-grid { grid-template-columns: 1fr; gap: 42px; }
.story-photo { min-height: 420px; max-width: 700px; }
.story-because--row { grid-template-columns: 1fr; gap: 22px; }
.story-aside { max-width: 700px; box-shadow: 12px 15px 0 rgba(18, 60, 50, .08); }
.diff-grid { grid-template-columns: repeat(2, 1fr); }
.layers { grid-template-columns: 1fr; }
.scale-band { grid-template-columns: 1fr; gap: 26px; text-align: left; }
.scale-pole--right { text-align: left; }
.scale-line { width: 100%; height: 1px; background: linear-gradient(90deg, var(--mint), var(--green)); }
.scale-line em { position: static; display: block; padding-top: 14px; text-align: left; }
}
@media (max-width: 680px) {
.story-lede { font-size: 17px; }
.story-marks li { grid-template-columns: 1fr; gap: 6px; }
.story-aside { padding: 26px 22px; }
.diff-grid { grid-template-columns: 1fr; margin-top: 38px; }
.diff-grid article { padding: 26px 22px; }
.layers-lead { margin-top: 46px; }
.layers article { padding: 28px 24px; }
.scale-band { padding: 30px 24px; }
}