/* «Шёлковый путь ароматов»: светлая гравюра глобуса стоит на месте, остановки — музейные таблички с римскими номерами */
.silk { background: var(--paper); padding-block: var(--sec-pad); }
.silk__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.silk__stage {
  grid-column: 1 / span 6; position: sticky; top: calc(var(--hdr-h) + 16px);
  display: grid; justify-items: center; gap: 16px; min-width: 0;
}
.silk__ball { position: relative; width: min(100%, 560px, calc(100vh - var(--hdr-h) - 110px)); aspect-ratio: 1; }
.silk__globe { position: relative; z-index: 1; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.silk__globe.is-grab { cursor: grabbing; }
/* пока грузится карта — ровный диск камня с волосяным контуром */
.silk__ball::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: var(--paper-2); box-shadow: 0 0 0 .75px var(--line-2); transition: opacity .8s;
}
.silk__ball.is-live::before { opacity: 0; }
.silk.is-flat .silk__ball { display: none; }
.silk__now { color: var(--mute); text-align: center; min-height: 1.2em; font-variant-numeric: lining-nums; }

.silk__stops { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; min-width: 0; }
/* табличка: высокая, чтобы при прокрутке на экране была одна остановка */
.silk__stop {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 18px;
  min-height: 72vh; padding: 34px 0 48px; border-top: 1px solid var(--line-2);
  opacity: .32; transition: opacity .7s var(--ease);
}
.silk__stop:first-child { border-top-color: var(--ink); }
.silk__stop.is-on { opacity: 1; }
.silk__num { font: italic 200 clamp(2.4rem, 3.4vw, 3.4rem)/.9 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.silk__body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.silk__place { color: var(--ink); }
.silk__date { margin-top: -6px; font: 400 .9375rem/1.4 var(--f-text); color: var(--mute); font-variant-numeric: lining-nums; }
.silk__title { margin-top: 6px; font: italic 300 clamp(1.7rem, 2.4vw, 2.4rem)/1.08 var(--f-display); letter-spacing: -.014em; text-wrap: balance; }
.silk__text { max-width: 34rem; font-size: 1.0313rem; line-height: 1.72; color: var(--ink-3); text-wrap: pretty; }
/* честная справка о ноте (мускус в наших флаконах — синтетический) */
.silk__fact { max-width: 34rem; padding-left: 16px; border-left: 1px solid var(--ink); font: italic 300 1.0625rem/1.5 var(--f-display); color: var(--ink); }
.silk__shelf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.silk__shelf .caps { flex: 1 1 100%; color: var(--mute); }
.silk__p {
  padding: 2px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink);
  font: 400 1rem/1.3 var(--f-display); transition: border-color .3s;
}
.silk__p:hover { border-color: var(--ink); font-style: italic; }
.silk__note { font-size: 1rem; line-height: 1.6; color: var(--ink-3); }
.silk__label {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px 13px 14px; background: var(--ink); color: var(--white);
}
.silk__label .ico { width: 14px; height: 14px; }
.silk__links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.silk__src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: .875rem; line-height: 1.5; color: var(--mute); }
.silk__src .caps { margin-right: 4px; font-size: .6875rem; color: var(--mute); }
.silk__src a { color: var(--ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.silk__src a:hover { text-decoration-color: currentColor; }

@media (max-width: 1100px) {
  .silk__stage { grid-column: 1 / span 5; }
  .silk__stops { grid-column: 6 / -1; }
}
/* телефон: глобус прилипает сверху, таблички проходят под ним */
@media (max-width: 860px) {
  .silk__grid { grid-template-columns: minmax(0, 1fr); }
  .silk__stage {
    grid-column: 1 / -1; z-index: 2; top: calc(var(--hdr-h) - 8px);
    padding: 10px 0 8px; margin-inline: calc(var(--gutter) * -1); background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  /* шапка сайта уезжает вверх при прокрутке — глобус поднимается за ней, иначе над ним просвечивает текст */
  .silk__stage { transition: top .45s var(--ease); }
  .hdr.is-hidden ~ main .silk__stage { top: 0; }
  .silk__ball { width: min(64vw, 38vh); }
  .silk__now { font-size: .6875rem; }
  .silk__stops { grid-column: 1 / -1; }
  .silk__stop { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 12px; min-height: 62vh; padding: 26px 0 40px; opacity: .4; }
  .silk__num { font-size: 2rem; }
  .silk__text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .silk__stop { opacity: 1; }
}