/* 03.1 О нас (графитовая карточка) и 03.2 «Кому помогаем» */

.story {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: 56px;
  align-items: end;
  margin-top: 130px;
  padding: 48px;
  border-radius: 30px;
  background: var(--ink);
  color: var(--on-ink);
  position: relative;
  overflow: hidden;
}

/* у карточки нет верхнего отступа — по якорю она встаёт на 120px ниже края, под капсулой навигации */
#about {
  scroll-margin-top: calc(120px - var(--sp));
}

.story::after {
  content: "10Q";
  content: "10Q" / "";
  position: absolute;
  right: -.06em;
  top: -.2em;
  font: 900 min(360px,30vw)/1 var(--f-x);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,107,31,.32);
  pointer-events: none;
}

.story-q {
  font: 800 clamp(34px,3.6vw,56px)/.98 var(--f-x);
  text-transform: uppercase;
  position: relative;
}

.story-q em {
  font-style: normal;
  color: var(--acc);
}

.story p.t {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-ink88);
  position: relative;
}

.story p.t + p.t {
  margin-top: 14px;
}

.founder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  position: relative;
}

.founder-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--ink);
  display: grid;
  place-items: center;
  font: 900 22px/1 var(--f-x);
  flex: none;
}

.founder b {
  display: block;
  font-size: 16px;
}

.founder span span {
  font-size: 14px;
  color: rgba(242,236,225,.72);
}

.aud {
  display: grid;
  grid-template-columns: auto minmax(40px,1fr) auto minmax(40px,1fr) auto;
  margin-top: 44px;
  font-size: calc(9.75cqw - 12px);
}

.aud-w {
  font-weight: 900;
  font-size: 1em;
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  cursor: default;
}

.aud-w .ri {
  transition: color .4s;
}

@media (hover:hover) and (pointer:fine) {
  .aud-w:hover .ri {
    color: var(--acc-t);
  }
}

.aud-sl {
  justify-self: center;
  font-weight: 800;
  line-height: .86;
  color: var(--acc-t);
}

.aud-p {
  contain: inline-size;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(27,23,20,.84);
}

@media (max-width:1180px) {
  .story {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
    padding: 36px;
  }
}

@media (max-width:900px) {
  .aud {
    grid-template-columns: minmax(0,1fr);
    font-size: clamp(56px,17cqw,120px);
  }
  .aud-sl {
    display: none;
  }
  .aud > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .aud-p {
    margin: 12px 0 36px;
  }
}

@media (max-width:640px) {
  .story {
    padding: 28px 22px;
    border-radius: 24px;
  }
}

@media (max-width:640px), (max-height:500px) and (orientation:landscape) {
  .story {
    margin-top: 80px;
  }
}

.story .lbl {
  color: var(--acc);
}

.story-q {
  margin-top: 20px;
}

/* место слов и описаний в сетке «Кому помогаем» (на ≤900px всё в одну колонку — см. адаптив выше) */
.aud > .col-1 {
  grid-column: 1;
}

.aud > .col-2 {
  grid-column: 2;
}

.aud > .col-3 {
  grid-column: 3;
}

.aud > .col-4 {
  grid-column: 4;
}

.aud > .col-5 {
  grid-column: 5;
}

.aud > .row-1 {
  grid-row: 1;
}

.aud > .row-2 {
  grid-row: 2;
}