/* Блок 3 «Як змінюється тіло» — модуль «полоска».
   Токены берутся со страницы (style.css: --cream, --ink, --f-*, --fs-*, --pad).
   Свои переменные — с запасными значениями, чтобы модуль жил и отдельно.            */
.dl {
  --dl-bg: var(--demo-bg, var(--c-milk, #F5F4EF));   /* фон за телом в капсуле: молочный токен палитры (olive/sea) */
  /* секция белая: молочная капсула на молочном фоне пропадает (проверено скрином 14.09) */
  --dl-section-bg: var(--demo-section-bg, var(--c-white, #FFFFFF));
  --dl-ink: var(--demo-ink, var(--ink, #201B14));
  /* полоска: акцент палитры 75% (белая на молочном — 1.1:1, не читается).
     Расчёт к --c-milk: olive #3B4631 ≈ 4.6:1, sea #43302E ≈ 5.3:1; замер — test.mjs lineContrast */
  --dl-line: var(--demo-line, rgba(59, 70, 49, .75));
  --dl-top: var(--demo-top, 64px);                   /* высота фиксированной шапки страницы */
  --dl-runway: var(--demo-runway, 180lvh);           /* [exp-demo] путь линии сверху донизу = этот запас прокрутки */
  --dl-gap: 14px;
  position: relative;
  background: var(--dl-section-bg);
  color: var(--dl-ink);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .dl { --dl-line: var(--demo-line, color-mix(in srgb, var(--c-accent, var(--ink, #3B4631)) 75%, transparent)); }
}

/* трек: липкая сцена + запас. Внутри запаса сцена стоит у верха экрана */
.dl__track { position: relative; height: calc(100lvh + var(--dl-runway)); }
.dl__scene {
  position: sticky; top: 0;
  height: 100lvh;                                    /* с панелями iOS и без — фон сцены до низа */
  overflow: hidden;
  background: var(--dl-section-bg);
  z-index: 2;
}
.dl__scene.is-held { touch-action: none; }
.dl__frame {
  height: 100svh;                                    /* контент — в гарантированно видимой части */
  display: flex; flex-direction: column;
  max-width: 980px; margin: 0 auto;
  padding: calc(var(--dl-top) + env(safe-area-inset-top, 0px)) var(--pad, 20px) max(18px, env(safe-area-inset-bottom, 0px));
}

.dl__head { text-align: center; padding-bottom: 14px; }
/* [Nick 15.09 ночь] заголовок одной фразой: вторая часть — строкой ниже, текстовым шрифтом (как прежний подзаголовок) */
.dl__title-tail { display: block; margin-top: 8px; font-family: var(--f-body); font-weight: 300; font-size: var(--fs-body); line-height: 1.35;
  text-transform: none; letter-spacing: 0; text-wrap: balance; }   /* [Nick] цвет как у заголовка — без приглушения */

.dl__stage {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--dl-gap);
}

/* рамка-капсула: скругление сверху и снизу */
/* [Nick 16.09] без капсулы: вырезы (webp с прозрачностью) стоят прямо на стене. overflow виден — капсула больше не срезает грудь/ягодицы справа */
.dl__figure {
  position: relative; margin: 0;
  height: 100%;
  aspect-ratio: 320 / 1297;                          /* = CROP w/h в demo-line.js */
  overflow: visible;
  background: none;
}
.js .dl__figure { align-self: center; justify-self: start; }   /* размер ставит demo-line.js */
.dl__img {
  position: absolute; left: 0; top: 0;
  max-width: none; width: auto; height: auto;
  user-select: none; -webkit-user-select: none; pointer-events: none;
  -webkit-user-drag: none;
}
.dl__img--after { z-index: 1; }
/* полоска: тонкая, сходит на нет к краям; без свечения */
.dl__line {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 1.5px; margin-top: -.75px;
  background: linear-gradient(90deg, transparent 0%, var(--dl-line) 26%, var(--dl-line) 74%, transparent 100%);
  will-change: transform, opacity;
  pointer-events: none;
}

/* строки справа */
.dl__notes {
  position: relative; height: 100%;
  clip-path: inset(-10px -40px -60px -40px);         /* старейшая строка «уезжает за край» сверху */
}
.dl__note {
  position: absolute; left: 0; right: 0; top: 0;
  will-change: transform, opacity;
}
.js .dl__note { opacity: 0; visibility: hidden; }
.dl__note .dl__text { transition: opacity .45s var(--ease, ease); }
.dl__note.is-past .dl__text { opacity: .64; }
.dl__note .t-body { line-height: 1.4; }
.dl__num {
  font-family: var(--f-num, serif); font-size: var(--fs-label, 13.5px);
  letter-spacing: .06em; margin-right: .45em; vertical-align: .08em;
}
.dl__note[data-step]:not([data-step="0"])::before {  /* короткий штрих к фото — СНЯТ (контроль 14.09: у второй строки читался как опечатка «–»,
                                                        у первой — как второй маркер рядом с номером «01»; номер уже отмечает пункт) */
  display: none;
  content: ""; position: absolute; left: calc(-1 * var(--dl-gap) + 3px); top: calc(var(--fs-body, 16px) * .7);
  width: 7px; height: 1px; background: currentColor; opacity: .45;
}

/* [exp-demo] линия за прокруткой: все строки видны сразу, строку напротив линии увеличивает transform (demo-line.js) */
.dl--scrub .dl__notes { clip-path: none; }
.dl--scrub .dl__note {
  visibility: visible;
  right: auto; width: calc(100% / 1.06);            /* запас справа: увеличенная ×1.1 строка не упирается в край экрана */
  will-change: transform, opacity;
}
.dl--scrub .dl__note .dl__text { transition: none; }
/* [Nick 15.09 ночь] «Зверни увагу…» — внизу колонки, напротив ног (на месте убранной подсказки) */
.dl--scrub .dl__aside { position: absolute; left: 0; bottom: 0; width: calc(100% / 1.06); opacity: .68; line-height: 1.4; }
.dl--static .dl__aside, html:not(.js) .dl__aside { position: relative; }

/* текст после сцены — [Nick 15.09 ночь] первый абзац ушёл в сцену, остаток и кнопка ближе к ней */
.dl-after {
  max-width: 600px; margin: 0 auto;
  padding: 0 var(--pad, 20px) 6vh;   /* [Nick 15.09 ночь, раунд 2] ещё ближе к сцене; блок 4 выше */
  margin-top: -6px;
  display: grid; gap: 16px;
}
.dl-after .t-lead { margin-top: 6px; }
.dl-after .cta { margin-top: 22px; }

/* без движения / без JS: ровное тело и все пять строк списком */
.dl--static .dl__track, html:not(.js) .dl__track { height: auto; }
.dl--static .dl__scene, html:not(.js) .dl__scene { position: relative; height: auto; }
.dl--static .dl__frame, html:not(.js) .dl__frame { height: auto; }
.dl--static .dl__stage, html:not(.js) .dl__stage { height: min(74svh, 640px); flex: none; }
.dl--static .dl__notes, html:not(.js) .dl__notes { display: flex; flex-direction: column; justify-content: center; gap: 18px; clip-path: none; }
.dl--static .dl__note, html:not(.js) .dl__note { position: relative; opacity: 1; visibility: visible; transform: none !important; }
.dl--static .dl__line, html:not(.js) .dl__line,
.dl--static .dl__img--before, html:not(.js) .dl__img--before { display: none; }
.dl--static .dl__img--after, html:not(.js) .dl__img--after { clip-path: none !important; -webkit-clip-path: none !important; }
html:not(.js) .dl__img { height: 110.79%; top: -9.41%; left: -46.88%; }   /* без JS — тот же кадр по CROP: 1437/1297, -122/1297, -150/320 */

@media (min-width: 900px) {
  .dl__stage { grid-template-columns: auto minmax(0, 380px); justify-content: center; column-gap: 64px; }
  .dl { --dl-gap: 64px; }
  .dl__note[data-step]:not([data-step="0"])::before { left: -28px; width: 14px; }
}