/* ══════════════════════════════════════════════════════
   KING STUDIO — база: токены, типографика, сквозные элементы

   Палитра снята с их же ремонта 2026: айвори стен и молдингов,
   крем мягкой мебели, грейж барельефа и фрески, почти-эспрессо
   вертикальных реек, тёплое золото бра и люстры.

   Типографика здесь намеренно тихая. У фотостудии продукт —
   интерьер в кадре, и заголовок не должен с ним соревноваться:
   одна гарнитура, малые веса, работа разрядкой, а не жиром.
   ══════════════════════════════════════════════════════ */

:root {
  --ivory:    #F4EFE6;
  --cream:    #E8DFD1;
  --greige:   #A89680;
  --espresso: #2E2620;
  --gold:     #C0A068;
  --oak:      #C9A57E;

  /* активная тема секции — переопределяется на .sec--* */
  --bg:   var(--ivory);
  --fg:   var(--espresso);
  /* .70, а не «на глаз»: на айвори это 5.2:1, на креме 4.9:1.
     На .58 приглушённый текст давал 3.7:1 и не проходил порог. */
  --dim:  rgba(46, 38, 32, .70);
  --hair: rgba(46, 38, 32, .16);
  --acc:  var(--espresso);

  --ff: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad:   clamp(20px, 5vw, 88px);
  --micro: clamp(10px, .72vw, 12px);
  --hdr-h: 64px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--ff);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* заголовки лёгкие и разрежённые — вес несёт не жир, а трекинг */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }

::selection { background: var(--espresso); color: var(--ivory); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--espresso); color: var(--ivory); padding: 12px 18px;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }


/* ══ ТЕМЫ СЕКЦИЙ ══ */

.sec--ivory { --bg: var(--ivory); --fg: var(--espresso); --acc: var(--espresso);
              --dim: rgba(46,38,32,.70); --hair: rgba(46,38,32,.16); }

.sec--cream { --bg: var(--cream); --fg: var(--espresso); --acc: var(--espresso);
              --dim: rgba(46,38,32,.70); --hair: rgba(46,38,32,.20); }

/* тёмная тема — цвет их вертикальных реек в классическом зале;
   на ней золото наконец читается как акцент, а не как бежевое пятно */
.sec--dark  { --bg: var(--espresso); --fg: var(--ivory); --acc: var(--gold);
              --dim: rgba(244,239,230,.62); --hair: rgba(244,239,230,.22); }


/* ══ КАРКАС СЕКЦИЙ ══ */

.sec {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(64px, 9vw, 132px) var(--pad);
}

.sec__num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(24px, 4vw, 48px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}

.sec__title {
  font-size: clamp(30px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.sec__lead {
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--dim);
  max-width: 62ch;
}


/* ══ КНОПКИ ══ */

.btn {
  display: inline-block;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.btn--sm { padding: 11px 22px; font-size: 12px; }

.btn--solid { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--acc); }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--hair); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }


/* ══ ЗАГЛУШКИ ПОД ФОТО ══
   Пока файлов нет, .ph — плашка крема с тонкой рамкой: страница
   выглядит собранной, а не сломанной. Когда фото появятся, сюда
   встаёт <img class="ph is-set">, разметку менять не придётся. */

.ph {
  position: relative;
  display: block;
  width: 100%;
  background: var(--cream) center/cover no-repeat;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.ph--wide { aspect-ratio: 3 / 2; }
.ph--43   { aspect-ratio: 4 / 3; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--sq   { aspect-ratio: 1 / 1; }

.ph::after {
  content: attr(data-img);
  position: absolute; left: 12px; bottom: 10px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}

/* height:auto — не декоративная мелочь. img несёт HTML-атрибуты
   width/height (для intrinsic-размера и защиты от сдвига макета), и когда
   CSS ограничивает только width, браузер по умолчанию берёт пиксельное
   значение атрибута height, а не считает его через aspect-ratio. Для
   круглого аватара это превращало квадратный кадр в вытянутую каплю;
   для высокого кадра зоны — раздувало блок до сотен лишних пикселей. */
.ph.is-set { object-fit: cover; object-position: center; height: auto; }
.ph.is-set::after { content: none; }


/* ══ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ══ */

/* Прятать контент имеет право только работающий скрипт: класс .has-rv
   ставит main.js на <html> первой же строкой. Если скрипт не загрузился,
   упал или IntersectionObserver не отработал — правила ниже просто не
   применяются, и страница видна целиком. Анимация появления не стоит
   риска отдать пользователю пустой экран. */

.has-rv .rv { opacity: 0; transform: translateY(18px); }
.has-rv .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* каскад: строки списков появляются друг за другом, --i проставляет
   main.js по индексу. Зоны сюда не входят: каждая из них — сама по себе
   .rv-блок, и прятать их ещё и через контейнер значило бы ждать класса,
   который на .zones больше никто не вешает. */
.has-rv .kit__list > li,
.has-rv .price__row {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.has-rv .kit__list.is-in > li,
.has-rv .price.is-in .price__row,
.has-rv .mate__price.is-in .price__row {
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-rv .rv, .has-rv .rv.is-in { opacity: 1; transform: none; transition: none; }
  .has-rv .kit__list > li,
  .has-rv .price__row { opacity: 1; transform: none; transition: none; }
}

/* страховка разом на всё остальное движение по сайту — hover-зумы
   кадров, подъём карточек, каскад, лайтбокс, мобильное меню */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}