/* «Хронология» и «Ровесник»: тёмная лента времени, волосяные оси, 1995 — единственная сплошная черта */
.chrono { background: var(--ink); color: var(--white); padding-block: var(--sec-pad); overflow: hidden; }
.chrono .sec-head { margin-bottom: clamp(36px, 4vw, 64px); }

.chr__view {
  position: relative; overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-block: 1px solid var(--line-inv);
}
.chr__view::-webkit-scrollbar { display: none; }
.chr__view.is-drag { cursor: grabbing; user-select: none; }
.chr__view:focus-visible { outline: 1.5px solid var(--white); outline-offset: -6px; }
.chr__track { position: relative; margin-block: 28px 18px; }
.chr__axis { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-inv-2); }


.chr__tick { position: absolute; width: 0; }
.chr__tick i { position: absolute; left: 0; top: -4px; width: 1px; height: 8px; background: var(--line-inv-2); }
.chr__tick.is-major i { top: -7px; height: 14px; background: var(--mute-inv); }
/* год на шкале стоит «табличкой» поверх линий к флаконам */
.chr__tick b {
  position: absolute; z-index: 1; left: 0; top: 12px; padding: 1px 4px; transform: translateX(-50%); white-space: nowrap; background: var(--ink);
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .14em; color: var(--mute-inv); font-variant-numeric: tabular-nums lining-nums;
}

/* веха: подпись справа от волосяной «ножки», которая спускается к оси.
   Фон непрозрачный: «ножка» верхнего яруса проходит позади подписи нижнего, а не сквозь текст */
.chr__m { position: absolute; width: 196px; padding: 0 0 6px 12px; display: grid; gap: 4px; align-content: start; background: var(--ink); }
.chr__stem { position: absolute; left: 0; top: 2px; width: 1px; background: var(--line-inv-2); }
.chr__y { font: 200 1.625rem/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; color: var(--white); }
.chr__m.is-approx .chr__y { font-style: italic; }
.chr__t { font: italic 300 1rem/1.2 var(--f-display); color: var(--white); text-wrap: balance; }
.chr__d { font-size: .875rem; line-height: 1.45; color: var(--mute-inv); text-wrap: pretty; }
.chr__d .caps { display: block; margin-top: 4px; font-size: .6875rem; color: var(--white); }
.chr__m.is-shop .chr__stem { width: 2px; left: -1px; background: var(--white); }
/* подпись слева от «ножки»: так она не пересекает черту 1995 года */
.chr__m.is-left { padding: 0 12px 0 0; text-align: right; transform: translateX(-100%); }
.chr__m.is-left .chr__stem { left: auto; right: 0; }
.chr__m.is-shop .chr__y, .chr__m.is-shop .chr__t { color: var(--white); }
.chr__m.is-shop .chr__t { font-style: normal; font-weight: 400; }

/* флаконы магазина стоят одним рядом, к году выхода каждый ведёт волосяная линия */
.chr__leads { position: absolute; left: 0; overflow: visible; pointer-events: none; }
.chr__leads path { fill: none; stroke: var(--line-inv-2); stroke-width: 1; }
.chr__p {
  position: absolute; width: 92px; margin-left: -46px; padding: 0; border: 0; background: none; color: var(--white);
  display: grid; justify-items: center; gap: 4px; text-align: center;
}
.chr__p .thumb { width: 62px; margin-bottom: 4px; transition: transform .6s var(--ease); }
.chr__p:hover .thumb, .chr__p:focus-visible .thumb { transform: translateY(-3px); }
.chr__pn { font: 400 .875rem/1.15 var(--f-display); text-wrap: balance; }
.chr__p:hover .chr__pn { font-style: italic; }
.chr__py { font: 500 .6875rem/1 var(--f-text); letter-spacing: .16em; color: var(--mute-inv); }

.chr__nav { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.chr__btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-inv-2); background: none; color: var(--white); transition: background-color .3s, color .3s;
}
.chr__btn:hover { background: var(--white); color: var(--ink); }
.chr__btn[data-chr="-1"] .ico { transform: scaleX(-1); }
.chr__btn .ico { width: 18px; height: 18px; }
.chr__drag { margin-left: 12px; color: var(--mute-inv); }

.chr__src { margin-top: clamp(40px, 4vw, 64px); color: var(--mute-inv); }
.chr__src summary { cursor: pointer; list-style: none; color: var(--mute-inv); }
.chr__src summary::-webkit-details-marker { display: none; }
.chr__src summary::after { content: " +"; }
.chr__src[open] summary::after { content: " −"; }
.chr__src ol { margin: 16px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: .875rem; line-height: 1.5; }
.chr__src a { color: var(--white); text-decoration: underline; text-decoration-color: var(--line-inv-2); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .chr__y { font-size: 1.375rem; }
  .chr__drag { display: none; }
}

/* ---------- «Ровесник»: линейка лет вместо поля ввода ---------- */
/* Крупная цифра года над иглой; под иглой едет линейка, высота риски — сколько ароматов вышло в тот год */
.ry { --cell: 24px; --base: 30px; margin-top: clamp(84px, 9vw, 150px); }
.ry__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px;
  padding-top: clamp(28px, 3vw, 42px); border-top: 1px solid var(--line-inv-2);
}
.ry__head .eyebrow { grid-column: 1 / span 3; padding-top: .9em; }
.ry__title { grid-column: 4 / -1; font: 300 clamp(2.2rem, 4vw, 4rem)/1.02 var(--f-display); letter-spacing: -.022em; }
.ry__title em { font-style: italic; font-weight: 250; }
.ry__lead { grid-column: 4 / span 6; max-width: 34rem; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute-inv); }

.ry__stage { position: relative; margin-top: clamp(36px, 4.6vw, 70px); }
.ry__read { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 64px); }
.ry__big { display: grid; justify-items: center; gap: 12px; margin: 0; }
.ry__num {
  font: 200 clamp(5.4rem, 13vw, 12.5rem)/.84 var(--f-display); letter-spacing: -.05em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--white);
}
.ry__ago { color: var(--mute-inv); white-space: nowrap; }
.ry__step { flex: none; }
.ry__step[data-ry="-1"] .ico { transform: scaleX(-1); }

.ry__ruler {
  position: relative; margin-top: clamp(22px, 2.6vw, 34px);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.ry__ruler::-webkit-scrollbar { display: none; }
.ry__ruler.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* линия-основание под рисками */
.ry__track {
  display: flex; width: max-content; height: 138px;
  padding-inline: calc(50% - var(--cell) / 2);
  background: linear-gradient(var(--line-inv-2), var(--line-inv-2)) 0 calc(100% - var(--base)) / 100% 1px no-repeat;
}
.ry__y { position: relative; flex: none; width: var(--cell); height: 100%; scroll-snap-align: center; cursor: pointer; }
.ry__y i {
  position: absolute; left: 50%; bottom: var(--base); width: 1px; transform: translateX(-50%);
  height: calc(8px + var(--n) * 78px); background: var(--line-inv-2); transition: background-color .3s, width .3s;
}
.ry__y.is-five i { height: calc(14px + var(--n) * 78px); }
.ry__y.is-dec i { height: calc(20px + var(--n) * 78px); background: var(--mute-inv); }
.ry__y.is-empty i { opacity: .5; }
.ry__y b {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .14em; color: var(--mute-inv); font-variant-numeric: tabular-nums lining-nums;
}
/* 1995 — год магазина: сплошная белая черта, как на ленте выше */
.ry__y.is-shop i { width: 2px; height: calc(100% - var(--base)); background: var(--white); opacity: 1; }
.ry__y.is-shop em {
  position: absolute; left: calc(50% + 7px); top: 0; white-space: nowrap; font-style: normal;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}
.ry__y:hover i, .ry__y.is-on i { background: var(--white); opacity: 1; }
.ry__y.is-on i { width: 2px; }
.ry__y.is-on b { color: var(--white); }
/* игла: от цифры года до основания линейки */
.ry__needle {
  position: absolute; left: 50%; bottom: var(--base); width: 1px; height: calc(138px - var(--base) + clamp(22px, 2.6vw, 34px));
  margin-left: -.5px; background: var(--white); pointer-events: none;
}
.ry__ruler:focus-visible + .ry__needle { width: 3px; margin-left: -1.5px; }

/* Под линейкой — ароматы выбранного года */
.ry__res { margin-top: clamp(40px, 4.6vw, 68px); min-height: 330px; }
.ry__out { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 34px; animation: amRise .6s var(--ease) both; }
.ry__match { grid-column: 1 / span 8; min-width: 0; }
.ry__side { grid-column: 9 / -1; display: grid; gap: 26px; align-content: start; min-width: 0; }
.ry__k { margin-bottom: 20px; color: var(--mute-inv); }
.ry__out.is-near .ry__k { font: italic 300 1.1875rem/1.4 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--white); text-wrap: balance; }
.ry__shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 16px; }
.ry__p { width: 100%; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--white); text-align: left; }
.ry__p .thumb { margin-bottom: 10px; transition: transform .6s var(--ease); }
.ry__p:hover .thumb { transform: translateY(-4px); }
.ry__pb { font: 500 .6875rem/1.45 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-inv); overflow-wrap: anywhere; }
.ry__pn { font: 400 1rem/1.2 var(--f-display); text-wrap: balance; }
.ry__p:hover .ry__pn { font-style: italic; }
.ry__pp { font-size: .8125rem; color: var(--mute-inv); font-variant-numeric: tabular-nums lining-nums; }
.ry__pp small { font-size: inherit; color: inherit; }
.ry__more { margin-top: 22px; color: var(--white); }
.ry__blk { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-inv); }
.ry__blk > .caps { color: var(--mute-inv); }
.ry__ms { font-size: 1rem; line-height: 1.55; color: var(--mute-inv); text-wrap: pretty; }
.ry__ms em { font: italic 300 1.0625rem/1.3 var(--f-display); color: var(--white); }
.ry__also { font-size: .875rem; line-height: 1.7; color: var(--mute-inv); }
.ry__also em { font: italic 300 1.0625rem/1.3 var(--f-display); color: var(--white); }
.ry__sep { color: var(--mute-inv); }
.ry__ask { font: 500 .6875rem/1.6 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-inv); }

@media (max-width: 1100px) {
  .ry__shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ry__match { grid-column: 1 / span 7; }
  .ry__side { grid-column: 8 / -1; }
}
@media (max-width: 760px) {
  .ry { --cell: 20px; --base: 28px; }
  .ry__head { grid-template-columns: minmax(0, 1fr); }
  .ry__head .eyebrow, .ry__title, .ry__lead { grid-column: 1; }
  .ry__head .eyebrow { padding-top: 0; }
  .ry__num { font-size: clamp(4.6rem, 25vw, 6.4rem); }
  .ry__read { gap: 14px; }
  .ry__track { height: 120px; }
  .ry__needle { height: calc(120px - var(--base) + 22px); }
  .ry__match, .ry__side { grid-column: 1 / -1; }
  .ry__shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .ry__res { min-height: 0; }
}