/* Фотослой (6 октября 2026): больше снимков, меньше текста.
   Вступление — коллаж из настоящих кадров, которые плывут с разной скоростью; семейства — «гармошка» из натюрмортов;
   «Аромат под погоду» — кадр семейства под температуру; в витрине — крупные кадры-вставки; у домов — снимок самой стены;
   сервис, праздники и Шёлковый путь — в фотографиях; у Telegram — вертикальные ролики.
   Правила прежние: цвет дают только снимки, подписи на фото — белым поверх нейтральной тени, без цветных плашек и точек.
   Подключается после всех стилей и модулей: переопределяет только то, что меняет. Параллакс и «гармошка» — assets/photo.js */

/* ---------- Параллакс: кадр внутри рамки сдвигается медленнее страницы ---------- */
.js [data-par] { will-change: transform; }

/* ---------- Вступление: коллаж из одной съёмки ----------
   Пять кадров в одном свете (media/collage, сгенерировал владелец): прилавок — главный и самый крупный, рядом заголовок,
   ниже витрина, базар, улица и портрет. Сцена держит пропорцию, поэтому композиция одинакова на любой ширине от 1101px */
.collage { padding-block: clamp(80px, 9vw, 140px) clamp(70px, 8vw, 120px); overflow: clip; }
.collage__stage { position: relative; max-width: 1640px; margin-inline: auto; aspect-ratio: 1440 / 1070; }
.cl {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.cl__ph { position: relative; display: block; overflow: hidden; background: var(--paper-3); }
.cl__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.cl:hover .cl__ph img { transform: scale(1.04); }
.cl__cap { display: block; margin-top: 12px; color: var(--mute); white-space: nowrap; transition: color .4s; }
.cl:hover .cl__cap { color: var(--ink); }
.cl:focus-visible { outline-offset: 6px; }
.cl--a { left: 3%; top: 0; width: 46%; }
.cl--a .cl__ph { aspect-ratio: 3 / 2; }
.cl--b { left: 78%; top: 4%; width: 18.5%; }
.cl--b .cl__ph { aspect-ratio: 3 / 4; }
.cl--c { left: 8%; top: 52%; width: 17%; }
.cl--c .cl__ph { aspect-ratio: 4 / 5; }
.cl--d { left: 31%; top: 62%; width: 35%; }
.cl--d .cl__ph { aspect-ratio: 3 / 2; }
.cl--e { left: 73%; top: 48%; width: 18.5%; }
.cl--e .cl__ph { aspect-ratio: 4 / 5; }
.cl--e .cl__ph img { object-position: 50% 30%; }
.collage__text {
  position: absolute; left: 52%; top: 6%; width: 24%;
  display: grid; justify-items: start; gap: clamp(18px, 1.8vw, 26px); z-index: 2;
}
.collage__title { font: 300 clamp(2.3rem, 3.5vw, 4.1rem)/.98 var(--f-display); letter-spacing: -.024em; text-wrap: balance; }
.collage__title em { display: block; font-style: italic; font-weight: 250; letter-spacing: -.016em; }
.collage__lead { max-width: 26rem; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); text-wrap: pretty; }
.collage__text .link { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js .cl .cl__ph { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease-io) var(--d, 0s); }
  .js .cl .cl__ph img { transform: scale(1.16); transition: transform 2.2s var(--ease) var(--d, 0s); }
  .js .cl .cl__cap { opacity: 0; transition: opacity 1s var(--ease) calc(var(--d, 0s) + .5s), color .4s; }
  .js .cl.is-in .cl__ph { clip-path: inset(0); }
  .js .cl.is-in .cl__ph img { transform: none; }
  .js .cl.is-in:hover .cl__ph img { transform: scale(1.04); transition-delay: 0s; transition-duration: 1.8s; }
  .js .cl.is-in .cl__cap { opacity: 1; }
}
/* планшет и телефон: сначала текст, ниже кадры сеткой в две колонки, ступенькой; прилавок и улица — во всю ширину */
@media (max-width: 1100px) {
  .collage { padding-block: clamp(80px, 11vw, 120px) clamp(64px, 9vw, 100px); }
  .collage__stage {
    aspect-ratio: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 48px) clamp(14px, 2.4vw, 24px); align-items: start;
  }
  .collage__text { position: static; width: auto; grid-column: 1 / -1; order: -1; margin-bottom: 10px; max-width: 36rem; }
  .collage__title { font-size: clamp(2.5rem, 7.4vw, 4rem); }
  .collage__title em { padding-left: .4em; }
  .cl { position: relative; inset: auto; width: auto; }
  .cl--a, .cl--d { grid-column: 1 / -1; }
  .cl--c { margin-top: clamp(40px, 9vw, 80px); }
  .cl--e { grid-column: 1 / -1; width: 62%; justify-self: end; }
  .cl__cap { margin-top: 10px; white-space: normal; }
}
@media (max-width: 760px) {
  .cl__cap { font-size: .6875rem; }
}

/* ---------- Карта домов: вступление короче ---------- */
.world .sec-head__lead { max-width: 30rem; }

/* ---------- Семейства: «гармошка» из восьми натюрмортов ---------- */
.fam-wrap { max-width: calc(var(--max) + 240px); margin-inline: auto; padding-inline: var(--gutter); }
.families .fam { position: relative; overflow: hidden; isolation: isolate; color: var(--white); background: var(--ink-2); text-align: left; }
.families .fam__field { position: absolute; inset: 0; z-index: -2; margin: 0; aspect-ratio: auto; background: var(--ink-2); }
.families .fam__img { transform: scale(1.06); transition: transform 2.4s var(--ease), filter 1.2s var(--ease); }
.families .fam::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 12, .1) 0%, rgba(13, 13, 12, 0) 34%, rgba(13, 13, 12, .3) 62%, rgba(13, 13, 12, .74) 100%);
}
.families .fam__count { color: rgba(250, 248, 244, .8); }
.families .fam__notes { color: rgba(250, 248, 244, .86); }
.families .fam__go { color: var(--white); }
.fam__tab { display: none; }

@media (min-width: 1101px) {
  .families .fam-grid { display: flex; gap: 8px; height: clamp(540px, 78vh, 820px); }
  .families .fam {
    flex: 1 1 0; min-width: 0; display: grid; align-content: end; justify-items: start; gap: 12px;
    padding: clamp(26px, 2.4vw, 40px);
    transition: flex-grow 1.1s var(--ease);
  }
  .families .fam.is-on { flex-grow: 5.2; }
  .families .fam__img { filter: brightness(.78) saturate(.8); }
  .families .fam.is-on .fam__img { transform: none; filter: none; }
  /* узкая полоса: номер и название снизу вверх */
  .fam__tab {
    position: absolute; left: 50%; bottom: clamp(26px, 2.4vw, 40px); z-index: 1;
    display: flex; align-items: center; gap: 16px;
    writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
    font: 500 .75rem/1 var(--f-text); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
    transition: opacity .5s var(--ease);
  }
  .fam__no { font: italic 300 1.05rem/1 var(--f-display); letter-spacing: 0; text-transform: none; opacity: .8; }
  .families .fam.is-on .fam__tab { opacity: 0; }
  /* раскрытая полоса: название крупно, ноты, «Смотреть» — ширина постоянная, чтобы текст не переливался при движении */
  .families .fam__head, .families .fam__notes, .families .fam__go {
    width: min(28rem, 34vw); opacity: 0; transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .8s var(--ease);
  }
  .families .fam.is-on .fam__head, .families .fam.is-on .fam__notes, .families .fam.is-on .fam__go {
    opacity: 1; transform: none; transition-delay: .32s, .32s;
  }
  .families .fam__head { align-items: baseline; }
  .families .fam__name { font-size: clamp(2.4rem, 3.4vw, 3.6rem); line-height: .98; letter-spacing: -.022em; }
  .families .fam__notes { font-size: 1rem; }
  .families .fam__go { margin-top: 8px; }
}
/* планшет и телефон: высокие карточки листаются вбок */
@media (max-width: 1100px) {
  .fam-wrap { padding-inline: 0; }
  .families .fam-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(250px, 40vw, 340px);
    gap: 12px; margin: 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .families .fam-grid::-webkit-scrollbar { display: none; }
  .families .fam { aspect-ratio: 3 / 4.3; display: grid; align-content: end; justify-items: start; gap: 10px; padding: 22px; scroll-snap-align: start; }
  .families .fam__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .families .fam__name { font-size: clamp(1.9rem, 6vw, 2.4rem); }
  .families .fam__notes { font-size: .9375rem; }
}
@media (max-width: 760px) {
  .families .fam-grid { grid-auto-columns: 74%; }
}

/* ---------- Аромат под погоду: кадр семейства под эту погоду ---------- */
.today__card {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  display: grid; justify-items: start; align-content: end;
  aspect-ratio: 4 / 5; max-height: 80vh; padding: clamp(24px, 2.8vw, 42px);
  background: var(--ink-2); color: var(--white);
}
.today__bg { position: absolute; inset: 0; z-index: -1; }
.today__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity 1.2s var(--ease), transform 2.6s var(--ease);
}
.today__bg img.is-on { opacity: 1; transform: none; }
.today__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 12, .5) 0%, rgba(13, 13, 12, .08) 26%, rgba(13, 13, 12, .12) 52%, rgba(13, 13, 12, .74) 100%);
}
.today__card .eyebrow { position: absolute; left: clamp(24px, 2.8vw, 42px); top: clamp(22px, 2.6vw, 38px); right: 24px; color: rgba(250, 248, 244, .88); }
.today__card .today__deg { margin-top: 0; color: var(--white); }
.today__card .today__sky, .today.is-night .today__card .today__sky { color: rgba(250, 248, 244, .92); }
.today__cap { margin-top: 18px; color: rgba(250, 248, 244, .8); font-size: .6875rem; line-height: 1.6; text-wrap: balance; }
.today__cap:empty { display: none; }
.today .therm { margin-top: clamp(30px, 3vw, 44px); }
@media (max-width: 860px) {
  .today__card { aspect-ratio: 4 / 4.6; max-height: none; }
}

/* ---------- Витрина: крупные кадры-вставки ---------- */
.grid > .tile { grid-column: span 2; grid-row: span 2; position: relative; margin: 0; min-width: 0; }
.tile__in {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  width: 100%; height: 100%; min-height: 480px; padding: 0; border: 0;
  background: var(--ink-2); color: var(--white); text-align: left; text-decoration: none; cursor: pointer;
}
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.tile__in:hover .tile__img { transform: scale(1.04); }
.tile__in::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0) 40%, rgba(13, 13, 12, .3) 64%, rgba(13, 13, 12, .74) 100%);
}
.tile__body {
  position: absolute; left: clamp(22px, 2.6vw, 44px); right: clamp(22px, 2.6vw, 44px); bottom: clamp(22px, 2.6vw, 44px);
  display: grid; justify-items: start; gap: 14px;
}
.tile__kicker { color: rgba(250, 248, 244, .84); }
.tile__t { font: 300 clamp(2.1rem, 3.3vw, 3.6rem)/1 var(--f-display); letter-spacing: -.022em; max-width: 12em; text-wrap: balance; }
.tile__t em { font-style: italic; font-weight: 250; letter-spacing: -.016em; }
.tile__go { margin-top: 6px; color: var(--white); }
.tile__go .ico { transition: transform .6s var(--ease); }
.tile__in:hover .tile__go::after { transform: scaleX(.25); }
.tile__in:hover .tile__go .ico { transform: translateX(6px); }
.tile__in:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
/* справочные ароматы без фото: рисунок флакона везде — тёплый монохром, цвет на сайте дают только снимки */
svg.bottle { filter: grayscale(1) sepia(.22) brightness(1.03) contrast(.96); }
/* справочный аромат в витрине: фрагмент натюрморта его семейства, подпись семейства внизу */
.card__media.has-mood { background: var(--ink-2); }
.card__mood {
  position: absolute; inset: 0; z-index: 0;
  background-position: var(--fx, 50%) var(--fy, 50%); background-size: var(--fz, 180%); background-repeat: no-repeat;
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
  filter: saturate(.92);
}
.card__media.has-mood::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0) 55%, rgba(13, 13, 12, .55) 100%);
}
.card__media.has-mood:hover .card__mood { transform: scale(1.06); filter: none; }
.card__fam { position: absolute; left: 14px; bottom: 13px; z-index: 2; color: rgba(250, 248, 244, .92); font-size: .6875rem; }
.card__media.has-mood .card__tags { z-index: 3; }
/* сердце и весы поверх тёмного кадра — белые */
.card:has(.has-mood) .card__fav, .card:has(.has-mood) .card__cmp:not([aria-pressed="true"]) { color: var(--white); }
.card:has(.has-mood) .card__cmp:not([aria-pressed="true"]) { opacity: .8; }
@media (max-width: 860px) {
  .grid > .tile { grid-row: auto; }
  .tile__in { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .tile__t { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
}

/* ---------- Дома: снимок той самой стены ---------- */
.wall { margin: 0 0 clamp(56px, 6vw, 96px); display: grid; gap: 14px; }
.wall__ph { position: relative; overflow: hidden; aspect-ratio: 21 / 8; background: var(--ink-2); }
.wall__ph img { position: absolute; left: 0; top: -16%; width: 100%; height: 132%; object-fit: cover; object-position: 50% 45%; filter: brightness(.9); }
.wall figcaption { color: var(--mute-inv); }
@media (max-width: 760px) {
  .wall__ph { aspect-ratio: 4 / 3; }
}

/* ---------- Сервис: четыре шага в кадрах, ступенькой ---------- */
.steps--ph { border-top: 0; column-gap: var(--col-gap); align-items: start; }
.steps--ph .step, .steps--ph .step + .step { display: block; padding: 0; margin: 0; border: 0; }
.steps--ph .step:nth-child(2n) { margin-top: clamp(48px, 6vw, 112px); }
.step__ph { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-3); }
.step__ph img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.steps--ph .step__n {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: 12px 18px 11px; background: var(--ink); color: var(--white);
  font: italic 300 1.25rem/1 var(--f-display);
}
.steps--ph .step__t { margin-top: 22px; }
.steps--ph .step p { margin-top: 10px; max-width: 22rem; }
@media (max-width: 1100px) {
  .steps--ph { row-gap: 56px; }
  .steps--ph .step:nth-child(n + 3) { border-top: 0; margin-top: 0; }
  .steps--ph .step:nth-child(2n) { margin-top: clamp(48px, 6vw, 112px); }
  .steps--ph .step:nth-child(4) { margin-top: 0; }
}
/* телефон: шаги листаются вбок */
@media (max-width: 760px) {
  .steps--ph {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; gap: 14px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .steps--ph::-webkit-scrollbar { display: none; }
  .steps--ph .step, .steps--ph .step + .step, .steps--ph .step:nth-child(2n), .steps--ph .step:nth-child(n + 3) { margin: 0; border: 0; padding: 0; scroll-snap-align: start; }
  .steps--ph .step__t { margin-top: 18px; }
}

/* ---------- Поводы: кадр праздника ---------- */
.pv-labs { grid-template-rows: repeat(8, auto); }
.pv-lab { grid-row: span 8; }
.pv-lab__ph { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: clamp(18px, 2vw, 28px); background: var(--paper-3); }
.pv-lab__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.4s var(--ease); }
.js .pv-lab:not(.is-in) .pv-lab__ph img { transform: scale(1.1); }
.pv-lab:hover .pv-lab__ph img { transform: scale(1.03); }
.pv-row__btn { grid-template-columns: 96px 10.5rem minmax(0, 1fr) auto 20px; align-items: center; }
.pv-row__ph { display: block; width: 96px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.pv-row__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pv-row__btn:hover .pv-row__ph img { transform: scale(1.08); }
.pv-row__body { grid-template-columns: calc(96px + 10.5rem + 24px) minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 1100px) {
  .pv-lab__ph { max-width: 40rem; }
}
@media (max-width: 860px) {
  .pv-row__btn { grid-template-columns: 84px 8.5rem minmax(0, 1fr) auto 18px; }
  .pv-row__ph { width: 84px; }
  .pv-row__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pv-row__btn { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 14px; }
  .pv-row__ph { grid-column: 1; grid-row: 1 / span 3; width: 76px; align-self: center; }
  .pv-row__date, .pv-row__name, .pv-row__left { grid-column: 2; }
  .pv-row__ico { grid-column: 3; }
}

/* ---------- Шёлковый путь: кадр над каждой остановкой, длинный список ароматов свёрнут ---------- */
.silk__ph { margin: 0 0 8px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-3); }
.silk__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.silk__stop.is-on .silk__ph img { transform: none; }
.silk__p.is-extra { display: none; }
.silk__shelf.is-all .silk__p.is-extra { display: inline-block; }
.silk__more {
  padding: 2px 0; border: 0; background: none; color: var(--mute);
  font: italic 300 1rem/1.3 var(--f-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.silk__more:hover { color: var(--ink); }

/* ---------- Telegram: вертикальные ролики рядом с текстом ---------- */
.club .grid12 { align-items: center; }
.club .club__in { grid-column: 4 / span 5; }
.reels { grid-column: 9 / -1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; min-width: 0; }
.reel { position: relative; margin: 0; width: min(100%, 300px); aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink-2); }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__cap { position: absolute; left: 0; bottom: 0; padding: 12px 16px 11px; background: var(--ink); color: var(--white); font-size: .6875rem; }
@media (max-width: 1100px) {
  .club .club__in { grid-column: 1 / span 7; }
  .reels { grid-column: 8 / -1; }
}
@media (max-width: 760px) {
  .club .club__in, .reels { grid-column: 1 / -1; }
  .reels { justify-content: flex-start; margin-top: 44px; }
  .reel { width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .families .fam { transition: none; }
}