/* Шрифт береться з адмінки (Дизайн → Body/Heading font) через --body-font,
   як на решті сайту. Раніше тут був закріплений Google Sans повз налаштування
   і чотири @font-face лише для цієї сторінки. */
/* Site chrome and the lead workflow remain owned by the shared templates. */
#about-page {
  --site-header-height: 88px;
  position: relative;
  width: 100%;
  font-family: var(--body-font, 'Roboto'), sans-serif;
  font-weight: 400;
  text-align: left;
}
#about-page h1,
#about-page h2,
#about-page h3,
#about-page button {
  font-family: inherit;
  letter-spacing: 0;
}
#about-page section[id] {
  scroll-margin-top: calc(var(--site-header-height) + 20px);
}
#about-page .people-cover-title h1 {
  color: #fff;
}
#about-page .people-cover > img {
  filter: none;
}
#about-page.illustrated-page .people-cover--wide > img {
  object-position: 0% 12%;
}
#about-page .people-cover--wide .people-cover-title {
  left: 62%;
  right: 56px;
  bottom: 80px;
}
#about-page.illustrated-page .people-cover--wide .people-cover-title h1 {
  font-size: 112px;
}
@media (min-width: 651px) and (max-width: 1200px) {
  #about-page .people-cover--wide .people-cover-title {
    left: 52%;
    right: 28px;
    bottom: 54px;
  }
  #about-page.illustrated-page .people-cover--wide .people-cover-title h1 {
    font-size: 80px;
  }
}
#about-page .people-overline p,
#about-page .people-overline span {
  margin: 0;
}
#about-page .skip-link {
  z-index: 1040;
}
@media (max-width: 650px) {
  #about-page.illustrated-page .people-cover--wide > img {
    object-position: 8% 50%;
  }
  #about-page .people-cover--wide .people-cover-title {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }
  #about-page.illustrated-page .people-cover--wide .people-cover-title h1 {
    font-size: 78px;
  }
}
@media (max-width: 360px) {
  #about-page.illustrated-page .people-cover--wide .people-cover-title h1 {
    font-size: 68px;
  }
}

/* ── Нічна тема ──────────────────────────────────────────────────────
   design.css задає color-scheme:light і не має жодного правила для
   body[data-theme="dark"]: шапка сайту темнішала, а сторінка лишалась
   білою. Змінні --ink/--white тут перевантажені (і колір тексту, і фон
   темних панелей), тому їх не міняємо — темні секції (герой, футер,
   .dark-section) і помаранчеві блоки лишаються як є. Перекриваємо лише
   світлі поверхні, текст на них і рамки. Селектор із body[data-theme]
   перебиває #about-page.illustrated-page за специфічністю. */
body[data-theme="dark"] #about-page.illustrated-page{
  --paper:#141A22; --line:#2E3846; --muted:#9AA4B5;
  background:#0B0E14; color:#EAEFF7; color-scheme:dark;
}
body[data-theme="dark"] #about-page .note-number,
body[data-theme="dark"] #about-page .section .orange-text,
body[data-theme="dark"] #about-page .interview-index{color:#FF8733}
body[data-theme="dark"] #about-page .story-copy .lead,
body[data-theme="dark"] #about-page .check-result,
body[data-theme="dark"] #about-page .inspection-bottom strong,
body[data-theme="dark"] #about-page .evidence-list strong,
body[data-theme="dark"] #about-page .dialog-contact a{color:#EAEFF7}
body[data-theme="dark"] #about-page .route-art-caption{color:#EAEFF7 !important}
body[data-theme="dark"] #about-page .evidence-list > div > span,
body[data-theme="dark"] #about-page .evidence-list p,
body[data-theme="dark"] #about-page .art-corner,
body[data-theme="dark"] #about-page .crew-list li > span,
body[data-theme="dark"] #about-page .crew-list p{color:#9AA4B5}
body[data-theme="dark"] #about-page .inspection-checks > .eyebrow,
body[data-theme="dark"] #about-page .text-link,
body[data-theme="dark"] #about-page .faq-list,
body[data-theme="dark"] #about-page .faq-list details,
body[data-theme="dark"] #about-page .evidence-list > div,
body[data-theme="dark"] #about-page .dossier-art figcaption,
body[data-theme="dark"] #about-page .crew-list li{border-color:#2E3846}
body[data-theme="dark"] #about-page .dossier-art figcaption b,
body[data-theme="dark"] #about-page .key-frame{border-color:#4A5568}
body[data-theme="dark"] #about-page .route-dashes{border-top-color:#4A5568}
body[data-theme="dark"] #about-page .route-dashes::after{background:#EAEFF7}
body[data-theme="dark"] #about-page .journey-pin{background:#141A22}
body[data-theme="dark"] #about-page .road-track{background:#141A22}
body[data-theme="dark"] #about-page .road-lines i{background:#3A4556}
body[data-theme="dark"] #about-page .dossier-rule,
body[data-theme="dark"] #about-page .dossier-rule::after{background:#3A4556}
body[data-theme="dark"] #about-page dialog{background:#141A22;color:#EAEFF7}
body[data-theme="dark"] #about-page textarea,
body[data-theme="dark"] #about-page select{background:#141A22;color:#EAEFF7;border-color:#3A4556}
body[data-theme="dark"] #about-page .button-orange:focus-visible{box-shadow:0 0 0 8px #0B0E14}

/* ── FAQ: макет мав .faq-section/.faq-list, але без правил для details ── */
#about-page .faq-list details{border-bottom:1px solid var(--line)}
#about-page .faq-list summary{display:flex;align-items:center;gap:18px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;font-weight:500;line-height:1.35}
#about-page .faq-list summary::-webkit-details-marker{display:none}
#about-page .faq-list summary::after{content:"+";margin-left:auto;font-size:26px;font-weight:300;color:var(--orange);line-height:1;transition:transform .25s ease}
#about-page .faq-list details[open] summary::after{transform:rotate(45deg)}
#about-page .faq-list .faq-num{flex:0 0 auto;font-size:12px;letter-spacing:.08em;color:var(--orange);font-weight:600}
#about-page .faq-list p{margin:0 0 22px 38px;color:var(--muted)}
#about-page .faq-grid > div > p:not(.eyebrow){color:var(--muted);max-width:40ch}
body[data-theme="dark"] #about-page .faq-list summary{color:#EAEFF7}

/* ── Фото команди: коло з помаранчевою підводкою ─────────────────────
   Єдине м'яке коло на сторінці — свідомо: секція про людей. Зазор між
   фото і кільцем береться з --crew-gap, у нічній темі він темний. */
#about-page .crew-list .crew-avatar{width:108px;height:108px;margin:0 0 22px}
#about-page .crew-list .crew-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 3px var(--crew-gap,#fff),0 0 0 5px var(--orange)}
@media (max-width:650px){#about-page .crew-list .crew-avatar{width:88px;height:88px;margin-bottom:16px}}
body[data-theme="dark"] #about-page .crew-list{--crew-gap:#0B0E14}

/* Команда тепер із 6 осіб (додано засновника): на десктопі один ряд із 6,
   нижче 900px діють правила design.css — 3 і 2 колонки без сироти. */
@media (min-width:901px){#about-page .crew-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
#about-page .crew-list strong{font-size:22px}}