.about-page {
  --bg-accent: #f5e9d2;
}

.about-page section.accent-bg {
  border-top-color: #e8dabd;
  border-bottom-color: #e8dabd;
}

.about-page section.about-methodology,
.about-page section.about-path-section {
  background:
    radial-gradient(120% 130% at 15% 10%, rgba(184, 146, 74, .12), transparent 46%),
    linear-gradient(135deg, #f8f2e6, #f2ecdf);
  border-top-color: #e7e0d0;
  border-bottom-color: #f2ecdf; }

.about-page .about-methodology .method-marker {
  border-color: #f6f0e3;
}

.about-page .about-author-photo-frame {
  background: #eaeae6;
}

.about-page section.about-cta-section {
  background: #f6f4ef;
  border-top-color: #ece7dd;
  border-bottom-color: #ece7dd;
}

/* ============ Типографика ============ */

.about-page .about-hero-text p,
.about-page .about-hero-text p:first-child {
  font-size: 18px;
  line-height: 1.7;
}

.about-page .method-content p {
  font-size: 18px;
}

.about-page .work-principles p {
  font-size: 17px;
}

.about-page .text-toggle {
  min-height: 44px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.about-page .text-toggle:hover {
  box-shadow: 0 1px 2px rgba(60, 42, 14, .06), 0 12px 24px -18px rgba(60, 42, 14, .5);
}

/* ============ Объём карточек ============ */

.about-page .method-content,
.about-page .about-author-card,
.about-page .authors-note,
.about-page .about-hero-aside .hero-quote {
  box-shadow: 0 1px 2px rgba(60, 42, 14, .06), 0 14px 30px -22px rgba(60, 42, 14, .5);
}

.about-page .method-content {
  border-color: #e6ddc9;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-page .about-hero-aside .hero-quote p,
.about-page .path-stop p {
  font-size: 15px;
}

.about-page .about-hero-photo img {
  box-shadow: 0 1px 2px rgba(60, 42, 14, .06), 0 18px 36px -24px rgba(60, 42, 14, .5);
}

.about-page .about-hero-credit {
  margin: -8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.about-page .hero-quote .about-hero-credit {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-weight: 700;
}

.about-page .about-author-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============ Карта пути ============ */

.about-page .path-map::before {
  background: linear-gradient(90deg, rgba(122, 90, 26, 0.22), rgba(122, 90, 26, 0.52));
}
.about-page .path-map::after {
  border-left-color: rgba(122, 90, 26, 0.7);
}

.about-page .path-stop__point {
  background: #fffdf8;
  border: 2px solid rgba(122, 90, 26, 0.55);
  box-shadow: 0 3px 10px rgba(122, 90, 26, 0.12);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.about-page .path-stop:hover .path-stop__point {
  background: linear-gradient(135deg, #8a6620, #b8924a);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(122, 90, 26, 0.24);
}

/* ============ Проявление при прокрутке ============ */

.about-page .method-level,
.about-page .about-author-card,
.about-page .authors-note,
.about-page .path-stop,
.about-page .work-principles article,
.about-page .about-cta {
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-page .method-content {
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-page .about-author-card {
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-page .method-level.is-hidden,
.about-page .about-author-card.is-hidden,
.about-page .authors-note.is-hidden,
.about-page .path-stop.is-hidden,
.about-page .work-principles article.is-hidden,
.about-page .about-cta.is-hidden {
  opacity: 0;
  transform: translateY(12px);
}

/* ============ Планшет 901–1040 ============ */

@media (max-width: 1040px) {
  .about-page .method-products {
    gap: 22px;
  }

  .about-page .method-products a {
    position: relative;
    min-height: 0;
    padding: 0 0 3px;
  }

  .about-page .method-products a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .about-page .about-hero .hero-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
  }

  .about-page .about-hero-aside {
    top: 84px;
  }

  .about-page .method-content {
    padding: 26px 26px;
  }

  .about-page .path-map {
    gap: 14px;
  }

  .about-page .path-map::before {
    left: 7%;
    right: 7%;
  }

  .about-page .path-map::after {
    right: 6.4%;
  }

  .about-page .path-stop h3 {
    font-size: 16px;
  }

  .about-page .work-principles {
    gap: 26px;
  }
}

/* ============ Планшет 761–900 ============ */

@media (min-width: 761px) and (max-width: 900px) {
  .about-page .about-hero .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .about-page .about-hero .hero-main,
  .about-page .about-hero-text {
    max-width: 100%;
  }

  .about-page .about-hero-aside {
    position: static;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }

  .about-page .about-hero-photo img {
    aspect-ratio: 4 / 4.3;
  }

  .about-page .about-hero-text {
    max-height: 420px;
  }

  .about-page .about-hero-text.is-expanded {
    max-height: none;
  }

  .about-page .about-hero-text {
    max-width: 680px;
  }

  .about-page .method-content {
    padding: 24px 24px;
  }

  .about-page .method-content h3 {
    font-size: 23px;
  }

  .about-page .about-author-card {
    padding: 24px 22px 26px;
  }

  .about-page .about-author-card h3 {
    font-size: 19px;
  }

  .about-page .work-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .about-page .work-principles h3 {
    font-size: 19px;
  }

  .about-page .work-principles p {
    font-size: 16px;
  }

  .about-page .path-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    max-width: 760px;
    margin-top: 32px;
    padding-top: 0;
  }

  .about-page .path-map::before,
  .about-page .path-map::after {
    display: none;
  }

  .about-page .path-stop {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    text-align: left;
  }

  .about-page .path-stop__point {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 46px;
    height: 46px;
    margin: 0;
    font-size: 13px;
  }

  .about-page .path-stop__label {
    grid-column: 2;
    font-size: 12px;
  }

  .about-page .path-stop h3 {
    grid-column: 2;
    font-size: 20px;
  }

  .about-page .path-stop p {
    grid-column: 2;
    font-size: 16px;
  }

  .about-page .about-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .about-page .about-cta .cta-row {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .about-page .path-map::before {
    background: rgba(122, 90, 26, 0.4);
  }
  .about-page .path-map::after {
    border-top-color: rgba(122, 90, 26, 0.55);
    border-left-color: transparent;
  }

  .about-page .about-hero-text p,
  .about-page .about-hero-text p:first-child { font-size: 18px; line-height: 1.66; }
  .about-page .lead { font-size: 18px; }
  .about-page .method-content p { font-size: 18px; }
  .about-page .about-author-card p { font-size: 18px; }
  .about-page .authors-note p { font-size: 18px; }
  .about-page .work-principles p { font-size: 18px; }

  .about-page .method-content .method-products-title { font-size: 14px; }
  .about-page .method-products a {
    position: relative;
    min-height: 0;
    padding: 0 0 3px;
    font-size: 15px;
    line-height: 1.4;
  }
  .about-page .method-products a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  .about-page .method-products {
    gap: 22px;
  }
  .about-page .about-author-card h3 { font-size: 20px; }
  .about-page .about-author-role { font-size: 14px; }
  .about-page .path-stop__label { font-size: 13px; }
  .about-page .path-stop p { font-size: 15px; }

  .about-page .method-content,
  .about-page .about-author-card,
  .about-page .authors-note,
  .about-page .about-hero-aside .hero-quote {
    box-shadow: 0 1px 2px rgba(60, 42, 14, .06), 0 10px 22px -18px rgba(60, 42, 14, .5);
  }
}