/* ============================================================
   Кросс-платформенные поправки. Загружается последней.
   Дизайн не меняется: правятся только те места, где разные ОС,
   браузеры и плотности экрана рисуют одно и то же по-разному.
   Файл можно отключить одной строкой — всё вернётся как было.
   ============================================================ */

/* ---- 1. Сглаживание шрифта ------------------------------------------------
   -webkit-font-smoothing:antialiased работает ТОЛЬКО на macOS и делает текст
   тоньше — на Windows и Android такого режима нет вовсе. Пока он включён,
   один и тот же вес физически выглядит по-разному на разных устройствах.
   Отключаем его везде: браузер рисует текст своим обычным способом, и
   macOS, Windows и Android получают одинаковую толщину штриха. */
html{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-rendering:optimizeLegibility}

/* Мобильные браузеры сами увеличивают шрифт при повороте экрана — это ломает
   заданную иерархию. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---- 2. Единые веса и контраст --------------------------------------------
   Одни и те же значения на всех устройствах — без разветвления по плотности
   экрана. Веса подняты ровно настолько, чтобы штрих оставался видимым и на
   96 dpi, и на Retina; рисунок шрифта, размеры, композиция и фирменные цвета
   не меняются. */
:root{
  --ink-soft:#5e6367;      /* было #6a6f73 */
  --sea-soft:#70757b;      /* было #7c8086 */
  --line:rgba(35,38,42,.2);/* было .14 — на 1x линия в .14 почти исчезает */
  --pg-muted:#5e6367;
  --pg-soft:#7b8085;
  --pg-line:#dcdcdc;
}
body{font-weight:330}
p{font-weight:330}
h1,h2,h3,h4{font-weight:330}
.hero__title,.pg--home .hero__title,.hero__stats strong{font-weight:250}
.section__head p,.about__text p,.pg-head p{font-weight:330}
/* Мелкий разряженный uppercase: вес не трогаем, возвращаем контраст. */
.eyebrow{color:#7d6535}
.eyebrow--light{color:#cdb488}
.hero__stats span,.search__field label{color:rgba(255,255,255,.82)}
#header .nav>a,#header .nav summary{font-weight:500}
body.pg{font-weight:400}
.pg h1,.pg h2,.pg h3,.pg h4{font-weight:430}
body.pg p,.pg-head p,.pg-step p{font-weight:430}
body.pg .t-sub{color:#5e6367}
/* footer links must read as active: light graphite, not the disabled grey */
body.pg .pg-footer__grid a{color:#d9dbde}
body.pg .pg-footer__grid a:hover{color:#fff}
body.pg .pg-btn,.btn{font-weight:500}

/* ---- 3. Полоса прокрутки ---------------------------------------------------
   На macOS она наложенная и не занимает места, на Windows — 17 пикселей,
   которые сдвигают всю сетку и выглядят грубо. Резервируем место всегда и
   делаем полосу тонкой. */
html{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(35,38,42,.28) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(35,38,42,.24);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(35,38,42,.38);background-clip:content-box}

/* ---- 4. Единицы высоты -----------------------------------------------------
   Браузеры без поддержки svh игнорируют правило целиком и остаются вообще
   без высоты — даём обычный vh как запасной вариант. */
.hero{min-height:100vh;min-height:100svh}
.pg--home .hero{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px)}
@media(max-width:700px){
  .pg--home .hero{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
}

/* ---- 5. Размытие стекла ----------------------------------------------------
   Там, где backdrop-filter не поддерживается, полупрозрачный фон превращает
   шапку и поиск в блёклое пятно. Делаем их плотнее. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .header.scrolled{background:rgba(246,242,234,.97)}
  body.pg #header{background:rgba(255,255,255,.99)}
  .search{background:rgba(255,255,255,.24)}
}

/* ---- 6. Горизонтальная прокрутка ------------------------------------------
   100vw на Windows шире видимой области ровно на ширину полосы прокрутки. */
.pd-lightbox img{max-width:100%}

/* ---- 7. Картинки -----------------------------------------------------------
   Одинаковая интерполяция при масштабировании и отсутствие «рывка» у
   фоновой фотографии героя на слабых GPU Windows. */
img{image-rendering:auto}
.hero::before{will-change:transform;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){.hero::before{will-change:auto}}