/* Шрифты — self-hosted, внешних зависимостей нет. */
@font-face{font-family:'Forma DJR';src:url('../fonts/FormaDJRCyrillicDisplay-Regular-Testing.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'CoFo Sans';src:url('../fonts/CoFoSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'CoFo Sans';src:url('../fonts/CoFoSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'CoFo Sans';src:url('../fonts/CoFoSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'CoFo Sans';src:url('../fonts/CoFoSans-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'CoFo Robert';src:url('../fonts/CoFoRobert-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --f-display:'Forma DJR',system-ui,sans-serif;
  --f-text:'CoFo Sans',system-ui,sans-serif;
  --f-italic:'CoFo Robert',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-forest);color:var(--c-white);
  font-family:var(--f-text);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--f-display);font-weight:400;line-height:var(--lh-heading)}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,picture,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--c-lime);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip-link{
  position:absolute;top:var(--s-3);left:var(--s-3);z-index:var(--z-overlay);
  padding:var(--s-3) var(--s-5);background:var(--c-lime);color:var(--c-black);
  border-radius:var(--r-sm);font-weight:700;transform:translateY(-200%);
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

/* Рабочая ширина контента из макета плюс поля, тянущиеся с вьюпортом. */
.container{
  width:100%;max-width:calc(var(--w-content) + var(--gutter)*2);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* Заголовок секции: белая строка + фраза на наклонённой лаймовой плашке.
   Наклоняется вся плашка вместе с текстом.
   В макете бокс заголовка обнимает содержимое, а строки внутри центрируются
   друг относительно друга (все TEXT-узлы — center). Сам бокс где-то по центру
   полотна, где-то у левого края колонки — за это отвечает модификатор. */
.section-heading{
  font-family:var(--f-display);font-size:var(--t-h2);line-height:var(--lh-tight);
  color:var(--c-white);margin:0;width:fit-content;
  /* Свес плашки вправо за правый край строки. В макете он у каждого заголовка
     свой (79, 288, 106, 145, 174 px), поэтому задаётся переменной секции.
     Отступ здесь + отрицательный у плашки дают вместе: бокс = строка + свес,
     а правая кромка плашки = правый край строки + свес. */
  padding-inline-end:var(--accent-hang,0px);
}

/* Заголовок по центру полотна: «Уезжать далеко», «Живые фото». */
.section-heading--center{margin-inline:auto}

/* Лаймовая плашка — вторая строка заголовка. Значения из макета:
   pad 15, gap 15, radius 15px 0 15px 0, тень -2px -3px 7px rgba(0,0,0,.15).
   Плашка прижата к правому краю бокса: в макете у всех заголовков расстояние
   от её правой кромки до края контейнера — 0.
   По вертикали промежутка нет: контейнер 190 = строка 80 + плашка 110.
   Отрицательный отступ гасит межстрочный интервал (line-height 1.05). */
.section-heading__accent{
  display:flex;align-items:center;justify-content:center;gap:.214em;
  width:fit-content;
  margin-inline-start:auto;margin-inline-end:calc(-1 * var(--accent-hang,0px));
  /* Вплотную к строке, но без слипания: в макете верх плашки заходит на низ
     строки примерно на 5px. Минус гасит межстрочный интервал 1.05 и наклон. */
  margin-block-start:-.14em;
  color:var(--c-black);font-size:var(--t-h2-sub);
  /* Макет: pad 15 по кругу, строка внутри 80 → плашка 110. */
  line-height:1.14;padding:.214em;
  background:var(--c-lime);border-radius:var(--r-md) 0 var(--r-md) 0;
  box-shadow:-2px -3px 7px rgb(0 0 0 / .15);transform:rotate(-2.4deg);
}

/* «Забронировать дом» — единственный заголовок, где по макету плашка стоит
   рядом со строкой, а не под ней (бокс 667x122 — одна строка). */
/* Плашка стоит вплотную к строке: на живом сайте «дом» заходит на хвост
   «Забронировать», поэтому отступ отрицательный, а не .14em как было. */
.section-heading__accent--inline{
  display:inline-flex;margin:0 0 0 -.08em;vertical-align:baseline;
}

/* «не нужно» — внутри плашки кегль 80, как у самой строки, а не 70.
   При кегле 80 макетные 15px паддинга — это .1875em. */
.section-heading__accent--lg{font-size:var(--t-h2);line-height:1;padding:.1875em}

/* Сдвиг первой строки вправо. Нужен там, где плашка шире строки: в макете
   «Часто» вдвинуто на 38px от левого края бокса (строка 138, плашка 100).
   position:relative — чтобы поехала только строка, а плашка осталась. */
.section-heading__lead{position:relative;left:var(--lead-shift,0px)}

/* Свес плашки по секциям — значения из макета (правый край плашки минус
   правый край строки). Только на десктопе: мобильный кадр свой. */
@media (min-width:64em){
  .faq .section-heading{--lead-shift:.48em}  /* 38px */

  .nearby .section-heading{--accent-hang:.99em}        /* 79px  */
  .photo-gallery .section-heading{--accent-hang:3.6em} /* 288px */
  .audience .section-heading{--accent-hang:1.33em}     /* 106px */
  .reviews .section-heading{--accent-hang:1.81em}      /* 145px */
  .faq .section-heading{--accent-hang:2.18em}          /* 174px */

  /* «Забронировать дом» — плашка стоит рядом, перенос запрещён. */
  .booking .section-heading{white-space:nowrap}
}

/* Декоративный шеврон между секциями. */
.divider{display:flex;justify-content:center;padding-block:var(--s-section)}
.divider__icon{width:1.625rem;height:1.75rem;opacity:.5}

/* Дивайдеры после секций прибиты к нижней кромке своей секции — не крадут
   высоту у следующей секции ни в одной зоне. */
.comparison__divider,
.audience__divider,
.booking__divider,
.reviews__divider,
.faq__divider {
  position: absolute;
  inset-inline: 0;
  bottom: -2rem;
  padding-block: var(--s-4);
}

.comparison__divider .divider__icon,
.audience__divider .divider__icon,
.booking__divider .divider__icon,
.reviews__divider .divider__icon,
.faq__divider .divider__icon {
  transform: rotate(90deg);
}

/* Сквозной фон ниже первого экрана. */
.page-body{position:relative;isolation:isolate}
.page-body > *:not(.page-backdrop){position:relative;z-index:1}
.page-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.page-backdrop__img{width:100%;height:100%;object-fit:cover;object-position:center top}
.page-backdrop__veil{position:absolute;inset:0;background:var(--c-veil-50)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Скроллбар в тон странице: системный светлый бегунок спорит с тёмным фоном.
   Дорожка прозрачная, бегунок — полупрозрачный белый, поджат border-box'ом,
   чтобы вокруг него оставался воздух. */
html{scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / .3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgb(255 255 255 / .3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgb(255 255 255 / .5);background-clip:content-box}

/* ============================================================
   1024–1279px: компактная полоса.
   Все токены (rem) сжимаются автоматически на ~6% за счёт корневого
   масштаба. Пиксельные значения в отдельных файлах (футер и т.д.)
   остаются как есть — они уже настроены для этого диапазона.
   ============================================================ */
@media (min-width: 64em) and (max-width: 79.9375em) {
  html { font-size: 93.75%; /* 15px вместо 16 */ }
}

@media (max-width: 79.9375em) {
  .section-heading {
    font-size: calc(var(--t-h2) * 0.85);
  }

  .section-heading__accent {
    font-size: calc(var(--t-h2-sub) * 0.85);
  }

  .section-heading__accent--lg {
    font-size: calc(var(--t-h2) * 0.85);
  }
}

/* ============================================================
   Телефоны (≤640px): заголовки компактнее.
   clamp уже тянет кегль вниз, но на телефоне добавляем ещё один
   коэффициент, чтобы строки не выглядели плакатными.
   ============================================================ */
@media (max-width: 40em) {
  .section-heading {
    font-size: calc(var(--t-h2) * 0.8);
  }

  .section-heading__accent {
    font-size: calc(var(--t-h2-sub) * 0.8);
  }

  .section-heading__accent--lg {
    font-size: calc(var(--t-h2) * 0.8);
  }

  /* «Забронировать дом»: строка переносится, и плашка «дом» уходит
     на вторую строку. Делаем её блочной строкой и прижимаем к правому
     краю бокса заголовка, а не оставляем слева. */
  .section-heading__accent--inline {
    display: flex;
    margin: -0.14em 0 0 auto;
  }
}