/* ═══════════════════════════════════════════════════════════════════
   /about/ — «Две хроники». Перенесено из _dev/preview-about-d.html,
   утверждено Daniil 2026-08-03. Работает поверх home-redesign.css:
   оттуда берутся шкала кеглей, палитра, карта и финальный CTA.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Концепт D — «Две хроники»

   Слева личная история, справа история компании, посередине год. Форма
   сама несёт мысль: Krepko вырос не из бизнес-плана, а из чужой — точнее,
   собственной — проблемы, и обе колонки идут рядом, потому что иначе
   и не было.
   ═══════════════════════════════════════════════════════════════════════ */

/* home-redesign.css ставит body { overflow-x: clip } — это нужно главной,
   чтобы её full-bleed блоки не давали горизонтальной прокрутки. Но clip
   на предке отключает position: sticky у всех потомков, и колонка годов
   срывалась вниз. На этой странице full-bleed нет, поэтому снимаем. */
body:has(.tw) { overflow-x: visible; }

.tw {
  --ink: #1A2B3C;
  /* Одна высота для узла оси и перемычки: середина первой строки заголовка.
     До этого они считались по-разному и расходились на 10–15px. */
  --row-pad: clamp(40px, 6vh, 96px);
  --node-y: calc(var(--row-pad) + 14px);
  --hair: rgba(26, 43, 60, .13);
  --pad: clamp(24px, 4.5vw, 88px);
  --air: var(--sec-pad);
}

/* Маска обрезает строку по её боксу, а хвосты «р», «у», «д» у антиквы
   выходят за него — при плотном интерлиньяже их срезало. Даём маске запас
   снизу и тут же снимаем его отрицательным полем, чтобы ритм не поехал. */
.mask { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1.05s cubic-bezier(.16,1,.3,1); }
.is-on .mask > span { transform: translateY(0); }
.is-on .mask:nth-child(2) > span { transition-delay: .09s; }

/* ═══ Титул ═══
   Одна фраза во весь разворот: подводку сняли, держать композицию должен
   сам заголовок, поэтому кегль крупнее шкалы и много воздуха под ним. */
.tw-open {
  padding: clamp(48px, 6vw, 116px) var(--pad) clamp(40px, 5vw, 96px);
  text-align: center;
}
.tw-open__h1 {
  margin: 0 auto; max-width: 16ch;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(38px, calc(3.4vw + 22px), 96px); line-height: 1.02;
  letter-spacing: -.02em; color: var(--ink);
}

/* ═══ Хроники ═══ */
.tw-chron {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 72px);
  padding: 0 var(--pad) var(--air);
}
@media (min-width: 1040px) {
  .tw-chron { grid-template-columns: minmax(150px, .42fr) minmax(0, 3fr); }
}

/* Колонка годов: список прилипает и ведёт по хронике — активный год тёмный,
   остальные приглушены. top учитывает высоту шапки сайта, иначе список
   уезжает под неё и год становится не виден. */
.tw-years { align-self: start; }
@media (min-width: 1040px) { .tw-years { position: sticky; top: clamp(112px, 15vh, 168px); } }
.tw-years__k {
  margin: 0 0 clamp(16px, 1.6vw, 26px);
  font-family: 'Manrope', sans-serif; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--text-muted);
}
.tw-years ul { list-style: none; margin: 0; padding: 0; }
.tw-years li { margin: 0; }
.tw-years button {
  position: relative;
  appearance: none; background: none; border: 0; cursor: pointer;
  display: block; width: 100%; text-align: left;
  padding: clamp(9px, .9vw, 14px) 0 clamp(9px, .9vw, 14px) clamp(12px, 1.1vw, 18px);
  border-left: 2px solid transparent;
  /* приглушаем цветом, а не прозрачностью: при opacity .38 контраст падал
     до 2.6:1, а это кликабельная навигация — её должно быть видно */
  transition: border-color .4s ease, color .3s ease;
}
/* Метка активного года: заливка выезжает слева, поэтому переход между
   годами читается как движение, а не как мгновенная перекраска. */
.tw-years button::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(199, 91, 57, .10), transparent 82%);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
  pointer-events: none;
}
.tw-years button.is-live::before { transform: scaleX(1); opacity: 1; }
.tw-years button span {
  display: block; position: relative;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(22px, 1.8vw, 32px); line-height: 1.1; color: var(--text-muted);
  /* активный год вырастает — увеличиваем сам кегль, а не масштаб:
     масштабирование замылило бы засечки антиквы */
  transition: color .35s ease, font-size .45s cubic-bezier(.16, 1, .3, 1), letter-spacing .45s ease;
}
.tw-years button em {
  display: block; margin-top: 3px; font-style: normal;
  font-family: 'Manrope', sans-serif; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  opacity: .75; transition: opacity .3s ease, color .3s ease;
}
.tw-years button:hover span { color: var(--gold-2); }
.tw-years button.is-live { border-left-color: var(--gold); }
.tw-years button.is-live span {
  color: var(--ink);
  font-size: clamp(30px, 2.6vw, 46px);   /* на ступень крупнее остальных */
  letter-spacing: -.015em;
}
.tw-years button.is-live em { color: var(--gold-2); opacity: 1; }
/* точка у активного года — тот же знак, что и на оси хроники */
.tw-years button.is-live::after {
  content: ''; position: absolute; left: -6px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--gold);
  animation: yearDot .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes yearDot {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.tw-years button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tw-row {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 28px);
  padding: var(--row-pad) 0;
  border-top: 1px solid var(--hair);
  opacity: .34; transition: opacity .7s ease;
}
.tw-row.is-live { opacity: 1; }
@media (min-width: 940px) {
  .tw-row { grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 2.6vw, 56px); align-items: start; }
}
.tw-me h2, .tw-co h2 { margin: 0 0 12px; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: var(--fs-subtitle); line-height: 1.24; color: var(--ink); }
.tw-me p, .tw-co p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-sub); }
@media (min-width: 940px) { .tw-me { text-align: right; } .tw-me h2 { margin-left: auto; } }

/* правая колонка — голос компании, поэтому на терракотовой линии */
.tw-co { padding-left: clamp(14px, 1.2vw, 22px); border-left: 2px solid var(--gold); }
.tw-co strong { color: var(--ink); font-weight: 600; }
.tw-co--empty p { color: var(--text-muted); font-style: normal; }

/* перемычка между колонками: чертится, когда строка становится активной */
.tw-link { display: none; }
@media (min-width: 940px) {
  .tw-link {
    display: block; align-self: start; width: clamp(74px, 8vw, 128px); height: 1px;
    margin-top: calc(var(--node-y) - var(--row-pad) - 0.5px); background: var(--hair);
    position: relative; overflow: hidden;
  }
  .tw-link::after {
    content: ''; position: absolute; inset: 0; background: var(--gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
  }
  .tw-row.is-live .tw-link::after { transform: scaleX(1); }
}

.tw-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); margin: clamp(20px, 2vw, 32px) 0 0; }
.tw-nums div { border-top: 1px solid var(--gold); padding-top: clamp(10px, 1vw, 16px); }
.tw-nums dt { font-family: 'Manrope', sans-serif; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.tw-nums dd { margin: 6px 0 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.2vw, 38px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ═══ Прямая речь ═══
   Единственный блок страницы на заливке: после длинной хроники нужен
   выдох и смена материала. Цитата набирается по мере прокрутки — слово
   за словом, как её и произносят. */
.tw-voice {
  padding: clamp(72px, 9vw, 152px) var(--pad);
  background: var(--surface-sunk);
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
.tw-voice__in {
  position: relative; max-width: 1420px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 80px);
}
@media (min-width: 940px) {
  .tw-voice__in { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: center; }
}

/* Кавычка стоит над первой строкой и левым краем совпадает с текстом:
   это знак прямой речи, поэтому она держит начало реплики, а не висит
   поверх неё. */
.tw-voice__mark {
  position: absolute; left: -.04em; top: -.66em; z-index: 0;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(70px, 9vw, 168px); line-height: 1;
  color: var(--gold); opacity: .2; pointer-events: none; user-select: none;
}

.tw-voice__media { position: relative; z-index: 1; margin: 0; }
/* смещённая рамка: кадр «лежит» на терракотовом контуре, а не висит в пустоте */
.tw-voice__media::before {
  content: ''; position: absolute; inset: 0;
  transform: translate(clamp(10px, 1.1vw, 20px), clamp(10px, 1.1vw, 20px));
  border: 1px solid var(--gold); opacity: .5; pointer-events: none;
}
.tw-voice__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: var(--surface); }
.tw-voice__frame img {
  display: block; width: 100%; height: 112%; object-fit: cover; object-position: center 16%;
  transform: translate3d(0, calc(var(--par, 0) * 1px), 0);
}
.tw-voice__media figcaption {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: clamp(18px, 1.6vw, 28px); padding-top: clamp(12px, 1.2vw, 18px);
  border-top: 1px solid var(--gold);
}
.tw-voice__media .k { font-family: 'Playfair Display', Georgia, serif; font-size: var(--fs-subtitle); line-height: 1.2; color: var(--ink); }
.tw-voice__media .v { font-family: 'Manrope', sans-serif; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }

.tw-voice__quote { position: relative; z-index: 1; margin: 0; }
.tw-voice__quote p {
  position: relative; z-index: 1;
  margin: 0; max-width: 25ch;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(26px, calc(1.5vw + 18px), 52px); line-height: 1.22;
  letter-spacing: -.01em; color: var(--ink);
}
/* слово гаснет до бледного и загорается, когда до него доходит прокрутка */
.tw-voice__quote .w { color: rgba(26, 43, 60, .2); transition: color .5s ease; }
.tw-voice__quote .w.on { color: var(--ink); }
.tw-voice__quote .hi { font-style: normal; color: inherit; transition: color .5s ease; }
.tw-voice__quote .w.on .hi { color: var(--gold-2); }

/* ═══ Что не изменилось ═══
   Не сетка карточек, а манифест: заголовок держится слева, правила идут
   строками во всю ширину — так их читают как перечень обещаний. */
.tw-keep {
  display: grid; grid-template-columns: 1fr; gap: clamp(32px, 3.4vw, 72px);
  padding: var(--air) var(--pad); border-top: 1px solid var(--hair);
}
@media (min-width: 1040px) {
  .tw-keep { grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); gap: clamp(40px, 5vw, 110px); }
  .tw-keep__head { position: sticky; top: clamp(112px, 15vh, 168px); align-self: start; }
}
.tw-keep__h {
  margin: 0; max-width: 13ch;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: var(--fs-title); line-height: 1.08; letter-spacing: -.01em; color: var(--ink);
}
.tw-keep__sub {
  margin: clamp(18px, 1.8vw, 30px) 0 0; max-width: 34ch;
  font-size: var(--fs-small); line-height: 1.75; color: var(--text-sub);
}
.tw-keep__h .mask:nth-child(2) > span { transition-delay: .08s; }
.tw-keep__h .mask:nth-child(3) > span { transition-delay: .16s; }

.tw-keep__list { list-style: none; margin: 0; padding: 0; }
.tw-keep__i {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 40px); align-items: start;
  padding: clamp(26px, 2.8vw, 48px) 0;
  border-top: 1px solid var(--hair);
}
.tw-keep__i:last-child { border-bottom: 1px solid var(--hair); }
/* заливка выезжает из-под строки при наведении — реакция без рамок и теней */
.tw-keep__i::before {
  content: ''; position: absolute;
  left: calc(var(--pad) * -.32); right: calc(var(--pad) * -.32); top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(199, 91, 57, .07), transparent 78%);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .tw-keep__i:hover::before { opacity: 1; transform: none; }
  .tw-keep__i:hover .tw-keep__n { color: var(--gold); }
  .tw-keep__i:hover .tw-keep__b { transform: translateX(8px); }
}
.tw-keep__n {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(30px, 2.8vw, 52px); line-height: .95;
  color: rgba(26, 43, 60, .26); font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.tw-keep__b { position: relative; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.tw-keep__i h3 {
  margin: 0 0 clamp(8px, .9vw, 14px);
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: var(--fs-subtitle); line-height: 1.2; color: var(--ink);
}
.tw-keep__i p { margin: 0; max-width: 52ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-sub); }

/* ═══ География и финал ═══ */
.tw-geo { padding: var(--air) var(--pad); border-top: 1px solid var(--hair); }
.tw-geo__head { max-width: 46ch; margin-bottom: var(--gap-head-content); }
.tw-geo__head h2 { margin: 0 0 var(--gap-title-dek); font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: var(--fs-title); line-height: 1.15; color: var(--ink); }
.tw-geo__head p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-sub); }
.tw-geo__map { overflow-x: clip; }        /* карта шире окна на мобильных */
.tw-geo__map .map-head { display: none; }
.tw-geo__map .map-wrap { margin-top: 0; }

/* Финал взят с главной один в один (.final-cta). Он full-bleed на 100vw,
   а на этой странице снят overflow-x: clip у body — без обёртки полоса
   давала бы горизонтальную прокрутку. Обёртка режет только её: sticky
   внутри неё нет. */
.tw-endwrap { overflow-x: clip; }

.tw-voice__media, .tw-voice__quote, .tw-keep__i, .tw-keep__sub, .tw-geo__head, .tw-ua {
  opacity: 0; transform: translateY(24px);
  transition: opacity .85s ease, transform .95s cubic-bezier(.16,1,.3,1);
}
.is-on.tw-voice__media, .is-on.tw-voice__quote, .is-on.tw-keep__i, .tw-keep.is-on .tw-keep__sub,
.tw-geo.is-on .tw-geo__head, .tw-geo.is-on .tw-ua { opacity: 1; transform: none; }
.tw-keep__i:nth-child(2) { transition-delay: .1s; }
.tw-keep__i:nth-child(3) { transition-delay: .2s; }
.tw-keep__i:nth-child(4) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .mask > span, .tw-voice__media, .tw-voice__quote, .tw-keep__i, .tw-keep__sub,
  .tw-geo__head, .tw-ua { opacity: 1 !important; transform: none !important; }
  .tw-voice__quote .w { color: var(--ink) !important; }
  .tw-keep__head { position: static; }
  .tw-row { opacity: 1; }
  @media (min-width: 940px) { .tw-years { position: static; } }
  .tw-years button::before, .tw-years button.is-live::after { transition: none; animation: none; }
  .tw-years button span { transition: none; }
  .tw-link::after { transform: scaleX(1); }
  .tw-voice__frame img { transform: none !important; }
}


/* ═══════════ Интерактив хроники ═══════════ */

/* Ось хроники: тянется через все строки и наливается по мере чтения */
.tw-rows { position: relative; }
/* до 940px колонки идут друг под другом — оси между ними нет */
.tw-axis { display: none; }
@media (min-width: 940px) {
  .tw-axis { display: block; }
  .tw-axis {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    transform: translateX(-50%); background: var(--hair);
  }
  .tw-axis i {
    position: absolute; inset: 0; display: block; background: var(--gold);
    transform: scaleY(var(--ax, 0)); transform-origin: top center;
  }
  /* Перекрёсток: место, где перемычка встречает ось. В покое — тихая
     засечка; вспыхивает в момент, когда через него проходит бегунок. */
  .tw-row::before {
    content: ''; position: absolute; left: 50%; top: var(--node-y);
    width: 7px; height: 7px; margin: 0; border-radius: 50%;
    transform: translate(-50%, -50%);          /* центр ровно на линии перемычки */
    background: var(--bg); border: 1.5px solid var(--hair); z-index: 2;
    transition: border-color .5s ease, background .5s ease;
  }
  .tw-row.is-live::before { border-color: var(--gold); }
  /* вспышка — расходящееся кольцо, живёт ровно один проход */
  .tw-row::after {
    content: ''; position: absolute; left: 50%; top: var(--node-y);
    width: 7px; height: 7px; margin: 0; border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--gold); opacity: 0; z-index: 1; pointer-events: none;
  }
  .tw-row.is-flash::before { background: var(--gold); border-color: var(--gold); }
  .tw-row.is-flash::after { animation: nodeFlash .9s cubic-bezier(.2, .7, .3, 1) forwards; }
  @keyframes nodeFlash {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(5.2); opacity: 0; }
  }

  /* Бегунок: скользит по оси вместе с прокруткой — это и есть индикатор
     прогресса хроники. Позицию задаёт JS в пикселях от верха оси. */
  .tw-axis b {
    position: absolute; left: 50%; top: 0;
    width: 11px; height: 11px; margin: 0; border-radius: 50%;
    background: var(--gold); z-index: 3;
    transform: translate(-50%, -50%) translateY(calc(var(--dot, 0) * 1px));
    box-shadow: 0 0 0 5px rgba(199, 91, 57, .12);
  }
  .tw-axis b::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: radial-gradient(circle, rgba(199, 91, 57, .28), transparent 70%);
  }
}

/* Раскрытие детали */
.tw-more {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  /* зона нажатия не меньше 44px по высоте — палец и мышь не должны
     промахиваться по строке в 20px */
  margin-top: clamp(8px, 1vw, 16px); padding: 12px 0;
  font-family: 'Manrope', sans-serif; font-size: var(--fs-small); font-weight: 600;
  color: var(--gold-2); text-align: left;
  transition: color .25s ease;
}
.tw-more:hover { color: var(--gold); }
.tw-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.tw-more__t { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.tw-more:hover .tw-more__t { border-bottom-color: currentColor; }
/* знак «+», превращающийся в «−» */
.tw-more__i { position: relative; width: 11px; height: 11px; flex: 0 0 auto; }
.tw-more__i::before, .tw-more__i::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 11px; height: 1.5px;
  background: currentColor; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.tw-more__i::after { transform: rotate(90deg); }
.tw-more[aria-expanded="true"] .tw-more__i::after { transform: rotate(0deg); }

.tw-detail { overflow: hidden; }
.tw-detail p {
  margin: clamp(12px, 1.2vw, 18px) 0 0; padding-left: clamp(12px, 1vw, 18px);
  border-left: 1px solid var(--hair);
  font-size: var(--fs-small); line-height: 1.75; color: var(--text-sub);
}

/* Наведение на строку: колонка чуть выступает — реакция без подсветки */
@media (hover: hover) and (min-width: 940px) {
  .tw-row .tw-me, .tw-row .tw-co { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .tw-row:hover .tw-me { transform: translateX(-6px); }
  .tw-row:hover .tw-co { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-row.is-flash::after { animation: none; }
  .tw-axis b { display: none; }
  .tw-axis i { transform: scaleY(1); }
  .tw-row:hover .tw-me, .tw-row:hover .tw-co { transform: none; }
}


/* Клавиатурный фокус: у ссылок, оформленных как текст, обводка по умолчанию
   почти не читается на кремовом фоне. */
.tw-more:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px;
}

/* Ссылка карточки города приходит со стилями главной, где она стоит в плотной
   раскладке. Здесь у неё есть место — доводим до полноценной зоны нажатия. */
.tw-geo__map .city__link {
  display: inline-flex; align-items: center; min-height: 44px;
  /* на главной ссылка прижата к низу ленты (margin-top: auto) — у коротких
     городов между текстом и ней оставалось 140px пустоты. Здесь она идёт
     сразу за абзацем, на одном отступе для каждого города. */
  margin-top: 0;
}
.tw-geo__map .city__lead { margin-bottom: clamp(10px, 1vw, 16px); }


/* ═══ Ссылки без подчёркиваний ═══
   Активность показывается цветом: боевой глобальный a:hover { underline }
   и собственные border-bottom давали на этой странице по две черты
   на одну ссылку. */
.tw a, .tw a:hover, .tw a:focus,
.tw-endwrap a, .tw-endwrap a:hover { text-decoration: none; }
.tw-more__t, .tw-more:hover .tw-more__t { border-bottom: 0; }
.tw-geo__map .city__link, .tw-geo__map .city__link:hover { border-bottom: 0; text-decoration: none; }

/* ═══ Украина ═══
   Был надзаголовок с абзацем и ссылкой — на фоне карты это читалось как
   сноска. Теперь блок объясняет услугу тремя шагами: что происходит с
   документом, пока клиент остаётся в Испании. */
.tw-ua {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 64px);
  margin-top: clamp(48px, 5vw, 96px); padding-top: clamp(28px, 3vw, 52px);
  border-top: 1px solid var(--hair);
}
@media (min-width: 940px) {
  .tw-ua { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: start; }
}
.tw-ua__h {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: var(--fs-title); line-height: 1.08; color: var(--ink);
}
.tw-ua__t { margin: 0; max-width: 42ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-sub); }

.tw-ua__steps { list-style: none; margin: 0; padding: 0; }
.tw-ua__steps li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.4vw, 24px);
  padding: clamp(14px, 1.4vw, 22px) 0; border-top: 1px solid var(--hair);
}
.tw-ua__steps li:first-child { border-top: 0; padding-top: 0; }
.tw-ua__steps .n {
  grid-row: 1 / 3; align-self: start;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-micro);
  letter-spacing: .1em; color: var(--gold); padding-top: .35em;
}
.tw-ua__steps b { font-family: 'Manrope', sans-serif; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.tw-ua__steps i { font-style: normal; margin-top: 5px; font-size: var(--fs-small); line-height: 1.7; color: var(--text-sub); }


/* «бесплатно» — единственное слово в финале, которое стоит акцентировать:
   курсив здесь не нужен, работает цвет */
.tw-endwrap .final-cta__bonus em { font-style: normal; font-weight: 600; color: var(--gold); }


/* ═══════════ Мобильная полировка (2026-08-04) ═══════════ */
@media (max-width: 939px) {
  /* Титул: на 375px кегль из общей шкалы ломал «Сначала это была»
     вторым переносом внутри маски — строки рвались посреди фразы */
  .tw-open__h1 { font-size: clamp(30px, 9vw, 44px); max-width: none; }

  /* Хронология-навигация занимала целый экран перед контентом.
     На мобилке это горизонтальная лента чипов — тот же приём, что
     и лента городов: листается пальцем, активный год подсвечен. */
  /* лента чипов с отрицательными полями распирала grid-колонку:
     у grid-элементов min-width: auto, и вся хроника уезжала за экран */
  .tw-chron > * { min-width: 0; max-width: 100%; }
  /* Лента годов прилипает под шапкой и ведёт по всей хронике: активный
     чип переключается со скроллом (JS уже синхронизирует), тап скроллит
     к году. Подложка и нижняя линия отделяют её от проезжающего текста. */
  .tw-years {
    /* шапка сайта тоже липкая (65px) — лента встаёт сразу под ней */
    position: sticky; top: 64px; z-index: 5;
    /* Во всю ширину экрана. Отрицательных полей в --pad здесь мало: лента
       лежит в grid-элементе, у которого сверху стоит max-width: 100%
       (страховка от вылета хроники), и её обрезало до колонки — правый
       чип упирался в пустое поле, а растушёвка «листай дальше» вставала
       посреди экрана. Full-bleed через 50% − 50vw не зависит ни от полей
       предков, ни от ширины колонки. */
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Поля по бокам держит сама лента (ul) — если задать их здесь, скролл
       обрывается за 24px до края экрана: последний чип упирается в пустую
       полосу и лента читается как недотянутая до края. */
    padding: 10px 0 8px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hair);
  }
  .tw-years__k { display: none; }
  .tw-years ul {
    display: flex; gap: 6px;
    overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain; -ms-overflow-style: none; scrollbar-width: none;
    /* Поля внутри прокручиваемой ленты: первый чип отступает от края как
       весь остальной текст, а листается лента от края до края. */
    margin: 0; padding: 0 var(--pad) 4px;
    /* последний чип не должен прилипать к обрезу — иначе непонятно,
       кончились годы или их просто не видно */
    scroll-padding-inline: var(--pad);
  }
  .tw-years ul::-webkit-scrollbar { display: none; }
  .tw-years li { flex: 0 0 auto; }
  .tw-years button {
    border-left: 0; border: 1px solid var(--hair);
    padding: 12px 15px; border-radius: 999px;   /* тап-зона ≥44px */
    display: inline-flex; align-items: baseline; gap: 7px;
  }
  .tw-years button::before { border-radius: 999px; }
  .tw-years button span { font-size: 19px; }
  .tw-years button.is-live { border-color: var(--gold); }
  .tw-years button.is-live span { font-size: 19px; letter-spacing: 0; }
  .tw-years button.is-live::after { display: none; }
  .tw-years button em { margin-top: 0; font-size: 10px; letter-spacing: .08em; }
  /* Правый обрез ленты обрывал чип без намёка, что дальше есть ещё годы —
     растушёвка поверх набегающих чипов подсказывает: тут можно листать.
     Сидит на самой .tw-years (не на ul), поэтому не едет вместе со скроллом. */
  .tw-years::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--bg) 94%, transparent) 60%);
    pointer-events: none;
  }

  /* Строки хроники: приглушение .34 на десктопе работает, потому что
     рядом всегда есть активная строка. На мобилке в кадре одна строка —
     бледный текст читался как «неработающая» страница. */
  .tw-row { opacity: .55; }
  .tw-row.is-live { opacity: 1; }
  /* и вертикальный ритм короче — пустоты между годами были в полэкрана */
  .tw { --row-pad: clamp(28px, 4.5vh, 48px); }

  /* Цитата: кавычка над текстом упиралась в портрет */
  .tw-voice__mark { left: -.05em; top: -.5em; opacity: .14; }
}