/* Страница о команде продолжает Air: шрифт, палитра, навигация, кнопки
   и подвал приходят из site.css. Здесь только редакционная композиция.
   Не используем фон hero главной – он отвлекает от портретов основателей. */
.about-page :where(section, figure) { scroll-margin-top: 110px; }
.about-skip {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  background: var(--design-surface);
  border-radius: 8px;
  padding: 14px;
}
.about-skip:focus { transform: none; }
.about-intro { padding-block: 126px 56px; }
.about-label {
  margin: 0 0 20px;
  color: var(--design-blue-deep);
  font-weight: 650;
  font-size: 1rem;
}
.about-intro__copy { display: grid; gap: 28px; }
.about-intro h1 {
  margin: 0;
  font-size: clamp(2.65rem, 8.3vw, 5.5rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.about-intro h1 span { color: var(--design-blue-deep); }
.about-intro__lead { display: grid; gap: 16px; max-width: 470px; }
.about-intro__lead p {
  margin: 0;
  color: var(--design-soft-ink);
  font-size: 1.1rem;
  line-height: 1.6;
}
.about-intro__lead p + p { color: var(--design-muted); font-size: 1rem; }
.about-founders { margin: 32px 0 0; }
.about-founders img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  background: #eee8dd;
}
.about-founders figcaption { padding-top: 20px; }
.about-founders__label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--design-muted);
  font-size: 0.9rem;
}
.about-founders__names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-founders__names li { font-size: 1.05rem; line-height: 1.5; }
.about-founders__names strong { display: block; font-weight: 650; }
.about-founders__role {
  /* Роль остаётся под своим именем в той же ячейке сетки. Естественные
     переносы сохраняют весь согласованный текст и две колонки на телефоне. */
  display: block;
  margin-top: 8px;
  color: var(--design-soft-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
.about-section { padding-block: 56px; }
.about-page .about-section .design-section-head {
  /* У главной heading содержит заголовок и декоративную линию в двух
     колонках. Здесь он уже стоит в редакционной колонке: вложенная сетка
     искусственно сужает текст до 260px и создаёт лишние переносы. */
  display: block;
  margin-bottom: 24px;
}
.about-page .about-section .design-section-head::after { display: none; }
.about-section .design-section-head h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.about-editorial { display: grid; gap: 8px; }
.about-prose { display: grid; gap: 20px; }
.about-prose p, .about-diary__intro, .about-invite p {
  margin: 0;
  color: var(--design-soft-ink);
  font-size: 1.1rem;
  line-height: 1.7;
}
.about-idea, .about-people { background: var(--design-surface); }
/* История читается как обычная редакционная секция Air, без отдельной
   карточки или большого портрета. Фото ниже текста; непрозрачная часть
   градиента сохраняет контраст и плавно возвращает белый фон. На телефоне
   ограничиваем только декоративный слой, поэтому длинный рассказ не кропится. */
.about-idea { position: relative; isolation: isolate; }
.about-idea__photo {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto auto;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: 60% 46%;
  opacity: 0.38;
  filter: saturate(0.65);
}
.about-idea::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0, var(--design-surface) 430px),
    linear-gradient(90deg, var(--design-surface) 0%, rgb(255 255 255 / 88%) 40%, rgb(255 255 255 / 25%) 100%);
}
.about-idea__inner { position: relative; }
.about-idea .design-section-head { max-width: 680px; }
.about-story { max-width: 680px; margin: 0; }
.about-story__quote { margin: 0; }
/* Все абзацы наследуют одну типографику about-prose. Только декоративные
   кавычки крупнее: они занимают собственные строки в потоке, поэтому не
   перекрывают текст ни на узком экране, ни при увеличении browser zoom. */
.about-story__mark {
  display: block;
  width: fit-content;
  height: 48px;
  color: var(--design-blue-deep);
  font-size: 5rem;
  font-weight: 650;
  line-height: 1;
  opacity: 0.65;
}
.about-story__mark--closing { justify-self: end; }
.about-story__author { display: grid; gap: 4px; margin-top: 28px; }
.about-story__author strong { color: var(--design-ink); font-size: 1rem; font-weight: 650; }
.about-story__author span { color: var(--design-muted); font-size: 0.95rem; }
.about-principles { display: grid; margin-top: 28px; }
.about-principles article {
  border-top: 1px solid var(--design-line);
  padding-block: 28px;
}
.about-principles__number { color: var(--design-blue-deep); font-size: 1rem; font-weight: 650; }
.about-principles h3 {
  margin: 18px 0 12px;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
}
.about-principles p { margin: 0; color: var(--design-soft-ink); line-height: 1.65; }
.about-text-link {
  /* Внутренний переход обозначаем самим подчёркнутым текстом: отдельная
     стрелка во flex-элементе разбивала линию на два несвязанных фрагмента.
     Минимальная высота сохраняет удобную область нажатия на телефоне. */
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 48px;
  color: var(--design-blue-deep) !important;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.about-text-link:hover { color: var(--design-ink) !important; }
.about-diary__intro { max-width: 460px; margin-bottom: 28px; }
.about-diary .design-button { gap: 14px; margin-bottom: 28px; line-height: 1.4; }
.about-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.about-timeline li { border-top: 1px solid var(--design-line); padding-block: 24px; }
.about-timeline :is(time, span) { color: var(--design-blue-deep); font-size: 0.95rem; font-weight: 650; }
.about-timeline h3 { margin: 12px 0 8px; font-size: 1.3rem; font-weight: 700; }
.about-timeline p { margin: 0; color: var(--design-soft-ink); line-height: 1.65; }
.about-invite { background: var(--design-surface); }
.about-invite p { max-width: 540px; }
.about-invite .design-actions { align-items: center; margin-top: 28px; }

/* Контакты остаются читаемым текстом, который можно выделить и скопировать.
   Офис и реквизиты – отдельные блоки: адрес офиса не является адресом ИП. */
.about-contact-block { min-width: 0; }
.about-contact-block h3 { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; }
.about-contact-block :is(address, p) {
  margin: 0;
  color: var(--design-soft-ink);
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: normal;
}
.about-contacts .about-editorial { row-gap: 32px; }
.about-requisites { display: grid; gap: 8px; margin: 20px 0 0; }
.about-requisites div { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.about-requisites dt { min-width: 80px; color: var(--design-muted); }
.about-requisites dd { margin: 0; color: var(--design-soft-ink); }

@media (min-width: 640px) {
  .about-founders__names { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .about-founders img { border-radius: 20px; }
  .about-intro { padding-block: 138px 76px; }
  .about-section { padding-block: 80px; }
}
@media (min-width: 980px) {
  /* Две короткие строки рядом с вводным текстом: более крупный display-size
     главной здесь ломает каждую фразу пополам и отодвигает команду за экран. */
  .about-intro h1 { font-size: clamp(3rem, 5.3vw, 4.2rem); }
  .about-intro__copy { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 70px; }
  .about-founders { margin-top: 48px; }
  .about-editorial { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
  .about-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .about-principles article { padding-top: 32px; }
  .about-section { padding-block: 100px; }
  /* На широком экране исходный вертикальный кадр занимает правую часть
     секции. Область основного текста остаётся почти непрозрачной: лицо
     заметно сбоку, но не спорит с прямой речью. */
  .about-idea__photo { height: 100%; width: 56%; object-position: 60% 50%; opacity: 0.5; }
  .about-idea::before {
    background: linear-gradient(90deg, var(--design-surface) 0%, var(--design-surface) 40%, rgb(255 255 255 / 90%) 54%, rgb(255 255 255 / 30%) 80%, rgb(255 255 255 / 15%) 100%);
  }
  .about-story { max-width: min(680px, 62%); }
  .about-timeline li:first-child { padding-top: 0; border-top: 0; }
}