/* ==========================================================================
   VOIR AI — about.css
   --------------------------------------------------------------------------
   Стили страницы «О платформе» (/ru/about.html, /en/about.html).
   Надстройка над design-system.css. Никаких хардкод-цветов: только токены
   дизайн-системы и их альфа-варианты (тот же принцип, что в home.css и
   pricing.css).

   ВИЗУАЛЬНАЯ ИДЕЯ СТРАНИЦЫ: «БОРТОВОЙ ЖУРНАЛ» (FLIGHT LOG)
   ---------------------------------------------------------------------------
   У каждой страницы сайта своя метафора формы, и она всегда содержательная:
   главная — обсерватория приборов (радиальные схемы, canvas);
   AI OS — архитектурный разрез (стратиграфия слоёв);
   AI CEO — радар-локатор командного контура;
   Тарифы — бухгалтерская кассовая книга и чек.

   Эта страница — БОРТОВОЙ ЖУРНАЛ экспедиции, которая ещё летит. Причина
   та же, что и у кассовой книги: форма подачи обязана повторять суть.
   «О платформе» рассказывает историю, миссию и состав — а история проекта,
   который честно говорит «не реализовано», читается как вахтенный журнал:
   дата, запись, статус, что осталось впереди. Отсюда:
     - колонка-гуттер с моноширинной датой слева у каждой записи журнала;
     - вертикальный рельс маршрута с узлами-вехами и бегущим маркером
       «вы здесь» (скролл-позиция, а не выдуманная анимация);
     - штампы-печати (пунктирная рамка, mono, uppercase) для статус-полей
       досье миссии — то, что в журнале пишется от руки и заверяется;
     - разлинованные строки принципов вместо карточек: правила не «продаются»,
       они перечислены, как пункты полётного задания;
     - траектория полёта в hero — пунктирная дуга, которая рисуется сама;
     - состав ролей — «экипаж»: слоты под должности, а не выдуманные лица.

   Что здесь сознательно НЕ используется: canvas-частицы, 3D-наклон карточек
   отделов, «оживающие» маркетинговые цифры. Единственные счётчики на странице
   — факты, которые можно перепроверить (число исследованных платформ, языков,
   страниц в карте сайта), и у каждого есть подпись-уточнение.

   Правила страницы (те же, что во всём проекте):
     - mobile-first;
     - никакого горизонтального переполнения: декоративные слои всегда
       inset:0 внутри контейнера с overflow:hidden, поэтому их bounding rect
       физически не может выйти за вьюпорт;
     - всё анимированное имеет статичное состояние при reduced-motion;
     - контент присутствует в серверном HTML: JavaScript двигает маркер
       маршрута и ничего не «дорисовывает» в текст;
     - всё нереализованное помечено бейджем «Целевая архитектура».
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Локальные переменные страницы (только производные от токенов)
   -------------------------------------------------------------------------- */
.about-page {
  /* Линии «журнальной» разлиновки */
  --log-rule: rgb(223 230 242 / 0.08);
  --log-rule-strong: rgb(223 230 242 / 0.18);
  /* Рельс бортового журнала — заметно сильнее разлиновки, чтобы «нить»
     между вехами читалась (замечания vision-QC 01.11: линия «растворялась») */
  --log-rail-line: rgb(245 176 62 / 0.42);
  /* Отступ колонки дат */
  --log-gutter: clamp(5.5rem, 13vw, 9.5rem);
  /* Позиция рельса журнала — СПРАВА от колонки дат, чтобы узел-веха
     не наезжал на текст даты (дефект, пойманный vision-QC 01.11).
     Даты занимают [0, gutter−2.2rem], рельс — в gutter−1.1rem,
     то есть между датой и текстом записи остаётся по ~1.1rem воздуха. */
  --log-rail: calc(var(--log-gutter) - 1.1rem);
  /* Ширина штампа-печати */
  --stamp-w: clamp(7.5rem, 26vw, 11rem);
}

/* Все даты и числа страницы — табличные, чтобы колонка дат не «плясала» */
.about-page .mono-num,
.about-page .stamp__value,
.about-page .log__date,
.about-page .crew__code,
.about-page .rule__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   1. Хлебные крошки (журнальная цепочка, а не навигационная)
   -------------------------------------------------------------------------- */
.crumbs-log {
  padding-block: var(--sp-md) 0;
}

.crumbs-log__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.crumbs-log__link {
  color: var(--text-faint);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.crumbs-log__link:hover {
  color: var(--accent);
  border-block-end-color: currentColor;
}

.crumbs-log__link:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Разделитель — aria-hidden, но это всё равно видимый глиф, поэтому берём
   token, проходящий AA (--light-500 в дизайн-системе помечен «НЕ текст») */
.crumbs-log__sep {
  color: var(--text-faint);
}

.crumbs-log__current {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   2. HERO — досье миссии
   -------------------------------------------------------------------------- */
.log-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 6vw, 4.5rem) var(--section-y-sm);
  background:
    radial-gradient(120% 80% at 12% 0%, rgb(245 176 62 / 0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}

/* Декоративная сетка журнала: inset внутри overflow:hidden — не вылезает */
.log-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--log-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--log-rule) 1px, transparent 1px);
  background-size: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  mask-image: radial-gradient(90% 70% at 50% 10%, #000 0%, transparent 78%);
}

/* Траектория полёта: пунктирная дуга, рисуется сама при загрузке */
.log-hero__path {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.log-hero__path svg {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-end: -6%;
  inline-size: min(58%, 38rem);
  block-size: auto;
  opacity: 0.5;
  /* Угасание к левому (текстовому) краю — дуга остаётся в правой части
     hero и не читается как шум внутри набора текста (vision-QC 01.11) */
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}

.log-hero__path .fp-route {
  fill: none;
  stroke: var(--amber-500);
  stroke-opacity: 0.5;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  animation: fp-draw 3.4s var(--ease-out) 0.4s both;
}

.log-hero__path .fp-horizon {
  fill: none;
  stroke: var(--cyan-500);
  stroke-opacity: 0.34;
  stroke-width: 1.2;
  stroke-dasharray: 2 8;
}

.log-hero__path .fp-node {
  fill: var(--bg);
  stroke: var(--amber-400);
  stroke-width: 1.6;
}

.log-hero__path .fp-node--live {
  fill: var(--amber-400);
  stroke: none;
}

@keyframes fp-draw {
  from { stroke-dashoffset: 340; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

.log-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.log-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  margin: 0 0 var(--sp-lg);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

.log-hero__kicker li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.log-hero__kicker li::before {
  content: '';
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

.log-hero__title {
  margin: 0;
}

.log-hero__accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Кегль H1 через КОНТЕЙНЕРНУЮ единицу — тот же приём, что в premium.css для
   остальных hero сайта (защита от разрыва длинного слова при первом рендере
   fallback-шрифтом и от «лесенки» гигантского кегля на мобильном).

   Калибровка — ЗАМЕР на РЕАЛЬНОМ Unbounded (файлы woff2 отданы браузеру
   локально, document.fonts.ready, 01.11.2026), а не оценка «на глаз»:
     RU «как бортовой журнал.» при fs 38.3px = 528.1px в колонке 660.9px
        → ratio 13.79 → ёмкость 7.25cqw → берём 6.5cqw (запас 10%)
     EN «runs in the open,»   при fs 48.9px = 471.5px в колонке 660.9px
        → ratio 9.64  → ёмкость 10.38cqw → берём 9.2cqw (запас 11%)
   Запас нужен под DPR/округление и под swap шрифта: fallback УЖЕ Unbounded,
   поэтому до подгрузки строки тем более помещаются — числа строк не меняется
   и CLS не возникает. Проверено переносов=0 на 320/360/375/390/414/768/
   1024/1280/1440/1920. Минимум RU 1.28rem подобран под самый узкий вьюпорт:
   при 320px колонка 292px, строка «как бортовой журнал.» = 13.79×fs →
   fs≤21.2px, берём 20.5px (запас 9px).
   -------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  .log-hero__copy {
    container-type: inline-size;
  }

  .log-hero h1 {
    font-size: clamp(1.28rem, 6.5cqw, 4.9rem);
    max-inline-size: none;
  }

  :lang(en) .log-hero h1 {
    font-size: clamp(1.4rem, 9.2cqw, 6rem);
  }
}

@supports not (container-type: inline-size) {
  /* Graceful fallback (браузеры до 2022): флюидный кегль + языковые переносы —
     строка может перенестись по слогам с дефисом, но не порвётся посреди слова.
     Кегль подобран под ту же ширину строки, что и cqw-ветка (RU ≈43px@1280). */
  .log-hero h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .log-hero h1 .line {
    overflow-wrap: break-word;
  }

  @media (min-width: 56.25rem) {
    .log-hero h1 {
      font-size: clamp(2rem, 1.1rem + 2.6vw, 2.8rem);
    }
  }

  @media (max-width: 56.24rem) {
    .log-hero h1 {
      font-size: clamp(1.5rem, 0.9rem + 3.4vw, 2.2rem);
    }
  }
}

.log-hero__lead {
  margin-block: var(--sp-lg) 0;
  max-inline-size: 46em;
}

.log-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xl);
}

/* --------------------------------------------------------------------------
   3. Досье миссии — карточка со штампами
   -------------------------------------------------------------------------- */
.dossier {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgb(243 246 251 / 0.035) 0%, transparent 40%),
    var(--bg-raised);
  box-shadow: var(--sh-2);
}

.dossier__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs) var(--sp-md);
  padding: var(--sp-sm) var(--sp-lg);
  border-block-end: 1px solid var(--border);
  background-color: rgb(5 7 12 / 0.42);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

.dossier__bar-mode {
  color: var(--data);
}

.dossier__body {
  padding: var(--sp-lg);
}

.dossier__rows {
  display: grid;
  gap: 0;
  margin: 0;
}

.dossier__row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.85fr) minmax(0, 1.6fr);
  gap: var(--sp-xs) var(--sp-md);
  align-items: baseline;
  padding-block: var(--sp-sm);
  border-block-end: 1px dashed var(--log-rule-strong);
}

.dossier__row:last-child {
  border-block-end: 0;
}

.dossier__key {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.dossier__val {
  font-size: var(--step-0);
  color: var(--text);
}

.dossier__val strong {
  color: var(--text-strong);
  font-weight: 600;
}

.dossier__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
}

/* Штамп-печать: пунктирная рамка, лёгкий поворот, моноширинные значения */
.stamp {
  inline-size: var(--stamp-w);
  flex: 1 1 var(--stamp-w);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px dashed rgb(245 176 62 / 0.45);
  border-radius: var(--r-sm);
  background-color: rgb(245 176 62 / 0.045);
  transform: rotate(-0.6deg);
}

.stamp:nth-child(2n) {
  border-color: rgb(88 205 223 / 0.4);
  background-color: rgb(88 205 223 / 0.045);
  transform: rotate(0.5deg);
}

.stamp__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.stamp__value {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--step-3);
  line-height: 1.1;
  font-weight: 600;
  color: var(--accent);
}

.stamp:nth-child(2n) .stamp__value {
  color: var(--data);
}

.stamp__note {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--text-faint);
}

/* Честная приписка под досье */
.dossier__note {
  margin: 0;
  padding: var(--sp-md) var(--sp-lg);
  border-block-start: 1px solid var(--border);
  background-color: rgb(5 7 12 / 0.3);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. Общие блоки секций
   -------------------------------------------------------------------------- */
.about-prose {
  max-inline-size: 62ch;
}

.about-prose p {
  margin-block: 0 var(--sp-md);
  line-height: var(--leading-relaxed);
}

.about-prose p:last-child {
  margin-block-end: 0;
}

/* Манифест: две колонки «строим / не делаем» */
.manifest {
  display: grid;
  gap: var(--sp-lg);
  margin-block-start: var(--sp-xl);
}

.manifest__col {
  padding: var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--bg-raised);
}

.manifest__col--build {
  border-block-start: 2px solid var(--accent);
}

.manifest__col--refuse {
  border-block-start: 2px solid var(--danger);
}

.manifest__title {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.manifest__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-sm);
}

.manifest__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text);
}

.manifest__list li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 1px;
}

.manifest__col--build .manifest__list li::before {
  background-color: var(--accent);
}

.manifest__col--refuse .manifest__list li::before {
  background-color: var(--danger);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   5. Принципы — разлинованные строки полётного задания (не карточки)
   -------------------------------------------------------------------------- */
.rules {
  margin: var(--sp-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  border-block-start: 1px solid var(--log-rule-strong);
}

.rule {
  display: grid;
  grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr);
  gap: var(--sp-xs) var(--sp-lg);
  padding: var(--sp-lg) 0;
  border-block-end: 1px solid var(--log-rule);
  transition: background-color var(--dur-3) var(--ease-out);
}

.rule:hover {
  background-color: rgb(243 246 251 / 0.028);
}

.rule__num {
  grid-row: span 3;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}

.rule__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.rule__text {
  margin: var(--sp-xs) 0 0;
  max-inline-size: 68ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.rule__proof {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.rule__proof b {
  color: var(--data);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Целевая архитектура — три слоя как «отсеки» журнала
   -------------------------------------------------------------------------- */
.bays {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-xl);
}

.bay {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-xs) var(--sp-lg);
  padding: var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--bg-raised);
}

.bay__tag {
  grid-row: span 4;
  align-self: start;
  padding: var(--sp-2xs) var(--sp-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.bay__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.bay__text {
  margin: var(--sp-xs) 0 0;
  max-inline-size: 70ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.bay__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-md);
  margin-block-start: var(--sp-sm);
}

.bay__link {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Экипаж — слоты ролей (без выдуманных лиц)
   -------------------------------------------------------------------------- */
.crew {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-xl);
}

.crew__slot {
  display: grid;
  grid-template-columns: minmax(0, 3.75rem) minmax(0, 1fr);
  gap: var(--sp-sm) var(--sp-lg);
  align-items: stretch;
  padding: var(--sp-lg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background-color: rgb(13 18 32 / 0.5);
}

/* Содержимое слота — колонка, чтобы футер с бейджем всегда прижимался к низу
   карточки: в ряду одинаковой высоты бейджи не «разъезжаются» (vision-QC 01.11) */
.crew__slot > div {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.crew__code {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-block-size: 3.25rem;
  padding: var(--sp-xs) var(--sp-2xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--ink-900);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  /* Код роли — короткое слово-метка: перенос посреди слова («LEA/D»)
     недопустим, поэтому жёстко запрещаем разрыв */
  white-space: nowrap;
}

.crew__slot[data-tone='data'] .crew__code {
  color: var(--data);
}

.crew__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.crew__role {
  margin: var(--sp-2xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.crew__text {
  margin: var(--sp-sm) 0 0;
  max-inline-size: 72ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.crew__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  align-items: center;
  /* auto-отступ сверху прижимает футер к низу карточки в ряду равной высоты */
  margin-block-start: auto;
  padding-block-start: var(--sp-md);
}

.crew__real {
  border-style: solid;
  border-color: var(--border);
  background-color: var(--surface);
}

/* --------------------------------------------------------------------------
   8. Бортовой журнал — рельс маршрута с бегущим маркером
   -------------------------------------------------------------------------- */
.logwrap {
  position: relative;
  margin-block-start: var(--sp-xl);
}

/* Рельс: вертикальная линия слева от записей */
.log {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--log-gutter);
  list-style: none;
}

.log::before {
  content: '';
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: var(--log-rail);
  inline-size: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--log-rail-line) 4%,
    var(--log-rail-line) 88%,
    var(--log-rule-strong) 94%,
    transparent 100%
  );
}

.log__entry {
  position: relative;
  padding-block: var(--sp-lg);
  border-block-end: 1px solid var(--log-rule);
}

.log__entry:last-child {
  border-block-end: 0;
}

/* Узел вехи на рельсе */
.log__entry::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--sp-lg) + 0.42rem);
  inset-inline-start: calc(-1 * var(--log-gutter) + var(--log-rail) - 0.26rem);
  inline-size: 0.52rem;
  block-size: 0.52rem;
  border-radius: 50%;
  background-color: var(--bg);
  border: 1px solid var(--light-500);
  transition: box-shadow var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}

.log__entry[data-state='done']::before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.log__entry[data-state='now']::before {
  background-color: var(--data);
  border-color: var(--data);
  box-shadow: 0 0 0 3px rgb(88 205 223 / 0.16);
}

/* Маркер «вы здесь» — JavaScript ставит data-here на запись, мимо которой
   сейчас проходит линия чтения. Свечение добавляется к тому же узлу-вехе,
   поэтому оно ВСЕГДА совпадает с точкой на рельсе (никакой отдельной
   геометрии и никаких вычислений смещения). Без JS просто не подсвечивается. */
.js .log__entry[data-here='true']::before {
  transform: scale(1.5);
  box-shadow: 0 0 0 5px rgb(245 176 62 / 0.16), 0 0 20px rgb(245 176 62 / 0.6);
}

.js .log__entry[data-here='true'] {
  background-image: linear-gradient(90deg, rgb(245 176 62 / 0.045), transparent 60%);
}

/* Дата в гуттере слева — на узких экранах уходит над записью */
.log__date {
  position: absolute;
  inset-block-start: var(--sp-lg);
  inset-inline-start: calc(-1 * var(--log-gutter));
  inline-size: calc(var(--log-gutter) - 2.2rem);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: end;
}

.log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-md);
}

.log__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.log__text {
  margin: var(--sp-sm) 0 0;
  max-inline-size: 74ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.log__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  align-items: center;
  margin-block-start: var(--sp-md);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

/* Фаза маршрута — липкая подпись «где мы сейчас» (только с JS) */
.logphase {
  display: none;
}

.js .logphase {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-block-end: var(--sp-md);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

.logphase__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--data);
  flex: none;
}

.logphase__text {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Дорожная карта — волны
   -------------------------------------------------------------------------- */
.waves {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-xl);
}

.wave {
  position: relative;
  overflow: hidden;
  padding: var(--sp-lg);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
}

.wave[data-tone='next'] {
  border-inline-start-color: var(--data);
}

.wave[data-tone='later'] {
  border-inline-start-color: var(--light-500);
}

.wave__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-xs) var(--sp-md);
}

.wave__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.wave__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.wave__text {
  margin: var(--sp-sm) 0 0;
  max-inline-size: 74ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.wave__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin: var(--sp-md) 0 0;
  padding: 0;
  list-style: none;
}

.wave__list li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.wave__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  align-items: center;
  margin-block-start: var(--sp-md);
}

/* --------------------------------------------------------------------------
   10. FAQ — раскрывающиеся записи журнала
   -------------------------------------------------------------------------- */
.qa {
  display: grid;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xl);
}

.qa__item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  overflow: hidden;
}

.qa__item[open] {
  border-color: var(--border-strong);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-block-size: var(--tap-min);
  padding: var(--sp-md) var(--sp-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.qa__q::-webkit-details-marker {
  display: none;
}

.qa__q:hover {
  color: var(--accent);
}

.qa__q:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: -2px;
}

.qa__sign {
  position: relative;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex: none;
}

.qa__sign::before,
.qa__sign::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-color: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}

.qa__sign::after {
  transform: rotate(90deg);
}

.qa__item[open] .qa__sign::after {
  transform: rotate(0deg);
}

.qa__a {
  padding: 0 var(--sp-lg) var(--sp-lg);
  max-inline-size: 78ch;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.qa__a a {
  color: var(--data);
}

/* --------------------------------------------------------------------------
   11. Ссылки-переходы между разделами сайта
   -------------------------------------------------------------------------- */
.crosslinks {
  display: grid;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xl);
}

.crosslink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-sm) var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.crosslink:hover {
  border-color: var(--amber-500);
  transform: translateX(2px);
}

.crosslink:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 2px;
}

.crosslink__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

.crosslink__title {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.crosslink__hint {
  margin: 0.25rem 0 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.crosslink__arrow {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  color: var(--accent);
  flex: none;
}

.crosslink__arrow svg {
  inline-size: 100%;
  block-size: 100%;
  transition: transform var(--dur-2) var(--ease-out);
}

.crosslink:hover .crosslink__arrow svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   12. Финальный призыв
   -------------------------------------------------------------------------- */
.log-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 5vw, 3.25rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(88 205 223 / 0.09) 0%, transparent 62%),
    var(--bg-raised);
}

.log-cta__title {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
  color: var(--text-strong);
}

.log-cta__text {
  margin: var(--sp-md) 0 0;
  max-inline-size: 66ch;
  font-size: var(--step-1);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.log-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xl);
}

/* --------------------------------------------------------------------------
   13. Навигация при отключённом JavaScript
   -------------------------------------------------------------------------- */
.noscript-bar {
  padding-block: var(--sp-md);
  border-block-end: 1px solid var(--border);
  background-color: var(--ink-850);
}

.noscript-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.noscript-bar__links a {
  color: var(--text-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

.noscript-bar__links a:hover {
  color: var(--accent);
  border-block-end-color: currentColor;
}

.noscript-bar__links a:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.noscript-note {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   14. Адаптив
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
  .manifest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crosslinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56.25rem) {
  .log-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 4vw, 4rem);
  }

  .bay {
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
    gap: var(--sp-sm) var(--sp-xl);
  }

  .waves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 75rem) {
  .crew {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crew__slot--wide {
    grid-column: span 3;
  }
}

/* Узкие экраны: дата журнала уходит в строку над записью, гуттер убирается */
@media (max-width: 47.99rem) {
  .about-page {
    --log-gutter: 1.75rem;
    /* Рельс — у самого левого края, текст записей отступает от него */
    --log-rail: 0.26rem;
  }

  .log__entry::before {
    inset-inline-start: calc(-1 * var(--log-gutter) + var(--log-rail) - 0.26rem);
    inset-block-start: calc(var(--sp-lg) + 0.9rem);
  }

  .log__date {
    position: static;
    inline-size: auto;
    text-align: start;
    margin-block-end: var(--sp-2xs);
  }

  .log__entry {
    padding-block-start: var(--sp-lg);
  }

  .rule {
    grid-template-columns: minmax(2rem, auto) minmax(0, 1fr);
    gap: var(--sp-xs) var(--sp-md);
  }

  .bay {
    grid-template-columns: minmax(0, 1fr);
  }

  .bay__tag {
    grid-row: auto;
    justify-self: start;
  }

  .crew__slot {
    grid-template-columns: minmax(0, 1fr);
  }

  .crew__code {
    justify-self: start;
    min-inline-size: 3.25rem;
  }

  .dossier__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .crosslink {
    grid-template-columns: minmax(0, 1fr);
  }

  .crosslink__arrow {
    display: none;
  }
}

/* Очень узкие экраны (<= 360px): уплотняем, но размеры шрифтов не режем */
@media (max-width: 22.5rem) {
  .about-page {
    --log-gutter: 1.4rem;
  }

  .stamp {
    flex: 1 1 100%;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   15. PREFERS-REDUCED-MOTION
   Траектория не рисуется, а показана сразу; маркер маршрута перемещается
   без плавности. Контент полностью доступен в обоих режимах.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .log-hero__path .fp-route {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .js .log__marker {
    transition: none;
  }

  .rule,
  .crosslink,
  .crosslink:hover,
  .crosslink__arrow svg {
    transition: none;
  }

  .crosslink:hover {
    transform: none;
  }

  .qa__sign::before,
  .qa__sign::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   16. Печать
   -------------------------------------------------------------------------- */
@media print {
  .log-hero__grid,
  .log-hero__path,
  .log__marker,
  .logphase {
    display: none !important;
  }

  .dossier,
  .bay,
  .crew__slot,
  .wave,
  .qa__item {
    break-inside: avoid;
  }

  .qa__item .qa__a {
    display: block;
  }
}