/* Start:/local/templates/frk/css/breadcrumbs.css?17906096411350*/
/*
 * Хлебные крошки.
 *
 * Сквозной элемент для внутренних страниц. Последний пункт — текущая
 * страница — не ссылка и набран цветом текста, остальные приглушены,
 * пока на них не наводят.
 */

.frk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frk-space-2xs);
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);

  /*
   * Фиксированные 14px, а не --frk-size-ui-md: тот токен растёт до 16px
   * к 1920, а в макете (2056:46146) крошки набраны ролью Description/Light
   * 14px на всех ширинах — это не масштабируемый заголовочный кегль, а
   * мелкая служебная подпись, она не растёт вместе с полотном.
   */
  font-size: 14px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-breadcrumb__link {
  color: inherit;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-breadcrumb__link:hover {
  color: var(--frk-color-gold);
}

.frk-breadcrumb__current {
  color: var(--frk-color-ink);
}

/* End */


/* Start:/local/templates/frk/css/about.css?179206217318960*/
/*
 * Страница «О бренде» (ТЗ 7.2, макет node 2147:4946, 1920).
 *
 * Узел 1060:19699 из ТЗ устарел, приоритет у 2147:4946. Кадров на 768 и 360
 * в макете нет: раскладка ниже 1920 собрана по общему паттерну проекта
 * (кегли и отступы внутренних страниц — catalog.css, product.css).
 */

/*
 * Отступ от шапки до хлебных крошек — фиксированные 16px, как на каталоге
 * и карточке товара: под крошками нет высокого героя, секционный ритм
 * здесь не нужен.
 */
.frk-about {
  padding-top: var(--frk-space-sm);
}

/* --- Заголовок и главное фото (2147:5445, 2147:5449) --------------------- */

/* Крошки → заголовок: 16px по макету (2147:4962 → 2147:5446) */
.frk-about-intro__title {
  margin-top: calc(var(--frk-space-sm) - var(--frk-title-leading-trim));
  margin-bottom: calc(-1 * var(--frk-title-leading-trim));
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-page-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * Крупное утверждение: в макете Source Serif 4 Light, в проекте —
 * Roboto Serif ExtraLight (fonts.css). Ширина 1392px по макету (2147:5445).
 */
.frk-about-intro__lead {
  max-width: 1392px;
  margin-top: var(--frk-space-sm);
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * Подзаголовок → фото: на 1920 в макете 47px (2147:5445 кончается на 398,
 * фото начинается на 445), на мобильном — общий для проекта шаг 24px.
 * Фото центрируется по умолчанию: экспорт Figma совпадает с центральной
 * обрезкой исходника 16:9.
 */
.frk-about-intro__media {
  margin-top: var(--frk-space-md);
  overflow: hidden;
  border-radius: var(--frk-radius);
  aspect-ratio: 335 / 400;
}

.frk-about-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  /*
   * В макете 48px, но Roboto Serif шире Source Serif 4: при 45px и выше
   * строки кончаются на «Россия», и «разделяет» вместо «созданный» и «к»
   * как в макете. Переносы макета держатся до 44.5px по замеру на 1920,
   * берём 44px с запасом. Прямая проходит через 24px на 768 и 44px на 1920.
   */
  .frk-about-intro__lead {
    font-size: clamp(24px, 10.67px + 1.736vw, 44px);
  }

  .frk-about-intro__media {
    margin-top: clamp(24px, 8.67px + 2vw, 47px);
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1024px) {
  .frk-about-intro__lead {
    margin-top: var(--frk-space-md);
  }

  /* Высота 833px по макету; ширина макета 1907 — это полотно 1904 плюс 3px нахлёста */
  .frk-about-intro__media {
    aspect-ratio: 1904 / 833;
  }
}

/* --- Ценности (2147:5453 / 2147:5466 / 2147:5479) ------------------------ */

/* Фото → первый ряд 8px по макету (1278 → 1286), ряд → ряд 4px — шаг сетки */
.frk-about-values {
  display: grid;
  gap: var(--frk-layout-gap);
  margin-top: var(--frk-space-xs);
}

/* 6px на мобильном и планшете, как у карточек .frk-product-story */
.frk-about-value {
  display: flex;
  flex-direction: column;
  padding: var(--frk-plate-padding);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

.frk-about-value__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  padding-bottom: var(--frk-space-sm);
  border-bottom: 1px solid rgb(19 18 18 / 20%);

  /* Линия в макете нулевой высоты (2147:5459), поэтому 16 − 1 */
  margin-bottom: 15px;
}

.frk-about-value__num {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-lg);

  /* Рамка номера в макете 31px при кегле 48 (2147:5457): глиф центрован и выходит за неё */
  line-height: 0.646;
  letter-spacing: var(--frk-tracking-serif);
  color: var(--frk-color-gold);
}

/* В макете Inter ExtraLight; в fonts.css у Inter 300–500, поэтому вес 200 браузер прижимает к 300 */
.frk-about-value__label {
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-ui-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
  white-space: nowrap;
}

.frk-about-value__body {
  display: grid;
  gap: var(--frk-space-sm);
}

/* По верху ряда, а не на всю его высоту: по низу заголовка скрипт считает высоту свёрнутой карточки */
.frk-about-value__title {
  margin-block: calc(-1 * var(--frk-title-leading-trim));
  align-self: start;
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-section-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-about-value__text {
  display: grid;
  gap: 12px;
  align-content: start;
}

.frk-about-value__lead {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

.frk-about-value__note {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-about-value__media {
  margin-top: var(--frk-space-md);
  overflow: hidden;
  border-radius: var(--frk-radius);
  aspect-ratio: 3 / 2;
}

.frk-about-value__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  /*
   * 24px между колонками на планшете, а не 4px сетки: при 4px заголовок
   * «Культурный контекст» на 768 встаёт в одну строку вплотную к правому
   * абзацу (зазор 10px) и читается с ним как одна фраза.
   */
  .frk-about-value__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--frk-space-md);
  }

  /*
   * В макете 48px, но Roboto Serif шире: все три абзаца держат переносы макета
   * на колонке 926px только в диапазоне 41.25–42.75px (замер на 1920), берём 42.
   * Прямая проходит через 24px на 768 и 42px на 1920, как у лида в product.css.
   */
  .frk-about-value__lead {
    font-size: clamp(24px, 12px + 1.5625vw, 42px);
  }

  .frk-about-value__media {
    aspect-ratio: 3 / 1;
  }
}

@media (min-width: 1024px) {
  /*
   * Колонки 930 и 926 с зазором 4px (2147:5460); правая кончается на 14px
   * раньше края полотна — 12px от внутренней ширины проекта (1872 против 1874).
   */
  .frk-about-value__body {
    grid-template-columns: minmax(0, 930fr) minmax(0, 926fr);
    column-gap: var(--frk-layout-gap);
    padding-right: 12px;
  }

  .frk-about-value__text {
    gap: 15px;
  }

  /*
   * У мелкого текста в макете своя ширина в каждом ряду: 822, 740 и 678px
   * (2147:5464 / 5477 / 5490), от неё зависят переносы. Inter в браузере
   * получается шире, чем в макете (font-optical-sizing: auto в base.css),
   * поэтому ширины подобраны замером на 1920 так, чтобы переносы совпали:
   * 782–792, 704–716 и 646–658px, взяты середины диапазонов в долях колонки 926.
   */
  .frk-about-value:nth-child(1) .frk-about-value__note {
    max-width: 85%;
  }

  .frk-about-value:nth-child(2) .frk-about-value__note {
    max-width: 76.7%;
  }

  .frk-about-value:nth-child(3) .frk-about-value__note {
    max-width: 70.4%;
  }

  /*
   * Фото на всю ширину карточки, 1874×800 на 1920 (2858:44121): карточка
   * раскрывается на крупный кадр, высота ряда — текст плюс фото (новый макет
   * 2858:43600, решение заказчика 2026-10-15; раньше полоса 1872×405 в ряду 900px).
   * 48px от текста — отступом фото, чтобы без фото у карточки не было пустого низа.
   */
  .frk-about-value__media {
    margin-top: var(--frk-space-xl);
    aspect-ratio: 1874 / 800;
  }
}

/* --- О Национальном центре (2147:5448) ------------------------------------ */

/*
 * Отступы «ценности → блок» и «блок → материалы» в макете одинаковы, 100px
 * на 1920, а ниже 1024 в макете данных нет — берём общий для страницы низ
 * 80px (как у --frk-rhythm) и растим до 100 линейно между 1024 и 1920,
 * тем же приёмом, что и токены секционного ритма в tokens.css.
 */
.frk-about-center {
  padding-top: var(--frk-rhythm);
}

.frk-about-center__text {
  max-width: 1572px;
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

@media (min-width: 1024px) {
  .frk-about-center {
    padding-top: clamp(80px, 2.232vw + 57.14px, 100px);
  }

  /*
   * В макете 48px; переносы строк («её» / «и» / «одежды,» / «Национального» /
   * «которые» / «центра.») у Roboto Serif на колонке 1572px держатся только
   * в диапазоне 42.2–42.9px (замер на 1920) — уже, чем у остальных абзацев
   * страницы, потому что колонка здесь шире. Прямая проходит через 24px
   * на 768 и 42.5px на 1920.
   */
  .frk-about-center__text {
    font-size: clamp(24px, 11.67px + 1.606vw, 42.5px);
  }
}

/* --- Материалы и производство (2147:5492) --------------------------------- */

.frk-about-materials {
  display: grid;
  gap: var(--frk-layout-gap);
  padding-top: var(--frk-rhythm);
}

.frk-about-materials__item {
  display: flex;
  flex-direction: column;
  padding: var(--frk-plate-padding);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

.frk-about-materials__text {
  display: grid;
  gap: 4px;
}

.frk-about-materials__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-lg);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-about-materials__note {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-about-materials__media {
  margin-top: var(--frk-space-lg);
  overflow: hidden;
  border-radius: var(--frk-radius);
  aspect-ratio: 3 / 2;
}

.frk-about-materials__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .frk-about-materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Карточки в ряду одной высоты, фото прижато к низу: при разном объёме
   * текста снимки стоят на одной линии (баг-лист 2, строка 25). От текста
   * до фото не меньше 32px.
   */
  .frk-about-materials__item {
    row-gap: var(--frk-space-lg);
  }

  .frk-about-materials__media {
    margin-top: auto;
    aspect-ratio: 3 / 1;
  }
}

@media (min-width: 1024px) {
  .frk-about-materials {
    gap: 5px;
    padding-top: clamp(80px, 2.232vw + 57.14px, 100px);
  }

  .frk-about-materials__text {
    gap: var(--frk-space-2xs);
  }

  /*
   * В макете колонка «Материалы» 681px, «Производство» — по контенту в той
   * же ширине (2147:5492). Inter в браузере шире (opsz auto, см. «Ценности»
   * выше), поэтому ширины подобраны замером переносов на 1920: подпункт
   * держит переносы макета («деталям» / «изделия,» / «и» / «работы.» и
   * «производителями,» / «это» / «проектов,» / «страны.») в диапазоне
   * 645–713px и 670–739px от содержимого карточки 917,5px, взяты середины.
   */
  .frk-about-materials__item:nth-child(1) .frk-about-materials__note {
    max-width: 74%;
  }

  .frk-about-materials__item:nth-child(2) .frk-about-materials__note {
    max-width: 76.8%;
  }

  .frk-about-materials__media {
    aspect-ratio: 919 / 480;
  }
}

/* --- Заключительный блок: «Больше, чем сувенир» (2147:5452/5505/5450) ----- */

.frk-about-final {
  padding-top: var(--frk-rhythm);
}

/*
 * Огромный заголовок: Roboto Serif заметно шире Source Serif 4 (225,89px
 * в макете на всю ширину полотна 1905px), и готового кадра для 360/768/1024
 * нет. Кегль подобран отдельным замером в браузере — тем же методом, что
 * и у заголовка героя (tokens.css, --frk-size-display-2xl), но с собственной
 * калибровкой и с ограничением не только по горизонтальному переполнению,
 * но и по числу строк: на мобильном и планшете заказчик попросил не больше
 * двух строк (на кегле, подобранном только под ширину, ниже 700px получалось
 * три). Свипом нашёл на каждой ширине максимальный кегль, при котором фраза
 * ещё умещается в две строки без переполнения (60px на 353, 62px на 360,
 * 130px на 767), и взял значения с запасом от этого потолка.
 */
.frk-about-final__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: clamp(58px, 3.29px + 15.196vw, 120px);
  line-height: 0.8;
  letter-spacing: var(--frk-tracking-serif);
}

.frk-about-final__media {
  margin-top: var(--frk-space-md);
  overflow: hidden;
  border-radius: var(--frk-radius);
  aspect-ratio: 335 / 400;
}

.frk-about-final__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frk-about-final__text {
  max-width: 1652px;
  margin-top: var(--frk-space-lg);
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

@media (min-width: 768px) {
  /* Продолжение той же логики: с 120px на 768 до 190px (одна строка) на 1920 */
  .frk-about-final__title {
    font-size: clamp(120px, 73.34px + 6.076vw, 190px);
  }

  .frk-about-final__media {
    aspect-ratio: 3 / 2;
  }

  /*
   * Тот же диапазон, что у центрального абзаца (42.2–42.9px на 1920) —
   * переносы строк («из-за» / «аксессуары» / «продолжали» / «важные» /
   * «оставаясь» / «вещах.») держатся в 42.25–43.1px на колонке 1652px.
   */
  .frk-about-final__text {
    font-size: clamp(24px, 11.67px + 1.606vw, 42.5px);
  }
}

@media (min-width: 1024px) {
  .frk-about-final {
    padding-top: clamp(80px, 0.67vw + 73.14px, 86px);
    container-type: inline-size;
  }

  /*
   * Фраза всегда во всю ширину фото (баг-лист 2, строка 26): она занимает
   * 9.30–9.33 своих кегля (с кеглем меняется оптический размер шрифта),
   * поэтому кегль — ширина блока, делённая на 9.36, на любой ширине экрана.
   */
  .frk-about-final__title {
    font-size: calc(100cqw / 9.36);
  }

  .frk-about-final__media {
    margin-top: var(--frk-space-md);
    aspect-ratio: 1904 / 833;
  }

  .frk-about-final__text {
    margin-top: var(--frk-space-lg);
  }
}

/* --- Раскрытие карточек при прокрутке (about-unfold.js) ------------------- */

/*
 * Баг-лист 2, строки 27–28: сначала виден только заголовок, остальное
 * срезано по высоте и прозрачно; дойдя до линии, карточка вырастает,
 * текст и фото проявляются. Рост высоты — по прямой просьбе заказчика:
 * карточка раздвигает страницу, transform тут не подходит (как у «О товаре»).
 * Длительность и кривые — те же, что у «О товаре» (product-story.css).
 */
.frk-about-value.is-folded,
.frk-about-materials__item.is-folded,
.frk-about-value.is-unfolding,
.frk-about-materials__item.is-unfolding {
  overflow: hidden;
}

.frk-about-value.is-unfolding,
.frk-about-materials__item.is-unfolding {
  transition: height 900ms cubic-bezier(0.42, 0, 0.18, 1);
}

.frk-about-value__text,
.frk-about-value__media,
.frk-about-materials__note,
.frk-about-materials__media {
  transition: opacity 650ms cubic-bezier(0.5, 0, 0.5, 1) 250ms;
}

.is-folded .frk-about-value__text,
.is-folded .frk-about-value__media,
.is-folded .frk-about-materials__note,
.is-folded .frk-about-materials__media {
  opacity: 0;
  transition: none;
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/about.css?179206217318960 */