/* ART HOUSE. Тема одна, тёмная: prefers-color-scheme не обрабатываем,
   но фон и цвета красим явно. Вёрстка мобильная, десктоп — вторичен. */

:root{
  --gold:#CAB696;
  --gold-hi:#F5E2C3;
  --gold-lo:#A8926F;
  --burgundy:#7A2333;
  --burgundy-deep:#170C0C;
  --graphite:#1C1C1F;
  --anthracite:#121213;
  --ink:#F2ECE3;
  --ink-dim:rgba(242,236,227,.62);


  --pad:24px;
  --bar:46px;              /* высота сквозной золотой строки */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--anthracite);
  color:var(--ink);
  font:400 16px/1.55 "Golos Text",system-ui,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ---------- общая типографика ---------- */

.kicker{
  margin:0 0 14px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
}
.title{
  margin:0 0 14px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(36px,11.5vw,58px);
  line-height:1.02;
  letter-spacing:-.01em;
}
.title--sm{font-size:clamp(30px,9vw,44px)}
/* Все заголовки — капсом и строго в одну строку. Кегль здесь верхний предел:
   fitTitles() в main.js ужимает каждый заголовок ровно настолько, насколько
   нужно, чтобы он влез. Общий фиксированный размер не годится — «НАМ ДОВЕРЯЮТ»
   и «РАССЧИТАТЬ СТОИМОСТЬ РЕМОНТА» отличаются больше чем вдвое по длине. */
.title--line{
  text-transform:uppercase;
  white-space:nowrap;
  font-size:clamp(24px,9.4vw,42px);
  letter-spacing:.02em;
}
.lead{
  margin:0 0 24px;
  max-width:24ch;
  color:var(--ink-dim);
  font-size:15px;
  line-height:1.5;
}
.lead--wide{max-width:34ch}

/* Счётчики на экране «Нам доверяют» */
.stats{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;gap:10px;
}
.stats li{display:flex;align-items:baseline;gap:11px}
.stats .num{
  min-width:4.2ch;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;font-size:30px;line-height:1;
  letter-spacing:-.01em;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.stats span{font-size:13px;color:var(--ink-dim)}

/* Списки преимуществ на экранах 3–4 */
.marks{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;gap:10px;
  max-width:27ch;
}
.marks li{
  position:relative;padding-left:18px;
  font-size:14px;line-height:1.45;color:var(--ink-dim);
}
.marks li::before{
  content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}

/* Золото матовое, сатинированное: перепад внутри градиента минимальный,
   бликов нет — иначе спорит с металлом на логотипе. */
.pill{
  display:inline-block;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 46%,var(--gold-lo));
  color:#1A1512;
  font:500 13px/1 "Golos Text",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.pill--ghost{
  background:none;
  border:1px solid rgba(202,182,150,.4);
  color:var(--gold);
}
.pill--wide{width:100%;text-align:center;padding:16px 28px;font-size:14px}

/* ---------- сквозная строка контакта ---------- */

/* Держится поверх всей страницы от первого экрана до подвала. Золото матовое
   сатинированное: перепад внутри градиента минимальный, бликов нет. */
.topline{
  position:fixed;z-index:50;top:0;left:0;right:0;
  height:calc(var(--bar) + var(--safe-t));
  padding:var(--safe-t) 14px 0 14px;
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(168deg,var(--gold-hi),var(--gold) 48%,var(--gold-lo));
}
/* Знак-домик — отдельный файл arthouse-mark.png: домик вырезан из общего
   логотипа по измеренной рамке (x 301–900, y 18–518 в 1200×945) и перекрашен
   в чёрный. Пересобрать можно через tools/mark.html. */
.topline__mark{
  flex:none;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(26,21,18,.24);
  background:rgba(26,21,18,.07);
}
.topline__mark img{width:19px}
.topline__tel{
  color:#1A1512;text-decoration:none;
  font:500 15px/1 "Golos Text",sans-serif;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.topline__cta{
  flex:none;margin-left:auto;
  padding:9px 18px;border-radius:999px;
  background:var(--graphite);color:var(--gold-hi);
  font:500 12px/1 "Golos Text",sans-serif;letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ---------- лоадер ---------- */

.loader{
  position:fixed;inset:0;z-index:60;
  display:grid;place-content:center;gap:22px;justify-items:center;
  background:var(--anthracite);
  transition:opacity .5s ease,visibility .5s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__logo{width:min(46vw,190px)}
.loader__bar{display:block;width:120px;height:1px;background:rgba(202,182,150,.2);overflow:hidden}
.loader__bar i{display:block;width:40%;height:100%;background:var(--gold);animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------- шапка ---------- */

/* Логотип живёт внутри сцены, а не фиксирован на странице: ниже секвенции он
   налезал бы на карточки, а в подвале есть свой. Прижат вправо — верхний правый
   угол на всех четырёх экранах пустует, текст идёт слева. */
.topbar{
  position:absolute;z-index:6;
  top:calc(var(--safe-t) + var(--bar) + 20px);right:20px;   /* отступы равные */
  pointer-events:none;
}
.topbar__logo{width:108px;opacity:.92}

/* ---------- секвенция ---------- */

.story{
  position:relative;
  height:615svh;           /* запасное значение; точную ставит story.js из весов */
  background:var(--anthracite);
}
.story__stage{
  position:sticky;top:0;
  height:100svh;            /* svh, не vh: адресная панель мобильного ломает vh */
  overflow:hidden;
}
/* Низ сцены сводится к базовому тону страницы, и следующая секция начинается
   с него же — стык секвенции и тарифов перестаёт быть заметен. Полоса лежит
   ниже комнаты (её низ около 84% высоты экрана), поэтому кадр не страдает. */
.story__stage::after{
  content:"";position:absolute;z-index:4;
  left:0;right:0;bottom:0;height:12%;
  background:linear-gradient(180deg,rgba(18,18,19,0),var(--anthracite));
  pointer-events:none;
}
.stage{position:absolute;inset:0;width:100%;height:100%}
/* Запас в 12% с каждой стороны заложен в сам холст (BM в story.js):
   масштабировать подложку нельзя — сдвиг относительно квадрата даёт шов. */
.backdrop{
  position:absolute;
  left:-12%;top:-12%;width:124%;height:124%;
  filter:blur(34px) saturate(1.12);
}

/* Скрим под текстом: кадр в середине светлый, без него подпись не читается. */
.panels{position:absolute;inset:0;pointer-events:none}
.panels::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,6,7,.88) 0%,
    rgba(10,6,7,.74) 24%,
    rgba(10,6,7,.30) 41%,
    rgba(10,6,7,0) 55%,
    rgba(10,6,7,.52) 100%);
}
.panel{
  position:absolute;
  top:calc(var(--safe-t) + var(--bar) + 114px);
  left:var(--pad);
  right:var(--pad);
  text-align:left;         /* блок слева, не по центру — как в референсе */
  will-change:opacity,transform;
}
.panel .pill{pointer-events:auto}

/* ---------- подсказка «листай вниз» ---------- */

.hint{
  position:absolute;z-index:5;
  left:0;right:0;bottom:calc(var(--safe-b) + 22px);
  margin:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-dim);
  pointer-events:none;
}
.hint__line{width:1px;height:30px;background:linear-gradient(var(--gold),transparent);animation:drop 1.7s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.4}50%{transform:scaleY(1);transform-origin:top;opacity:1}}

/* ---------- обычные секции ---------- */

.section{
  position:relative;
  scroll-margin-top:calc(var(--bar) + var(--safe-t));
  padding:88px var(--pad) calc(88px + var(--safe-b));
  /* Верхний слой гасит свечение у самой кромки: секция начинается ровно тем же
     тоном, что и предыдущая, и разгорается уже внутри себя. Радиальный градиент
     от края даёт видимую границу между экранами. */
  background:
    linear-gradient(180deg,var(--anthracite) 0%,rgba(18,18,19,0) 28%),
    radial-gradient(135% 72% at 50% 30%,rgba(122,35,51,.5) 0%,rgba(122,35,51,0) 72%),
    var(--anthracite);
}

.cards{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px}
.card{
  position:relative;
  padding:28px 24px;
  border:1px solid rgba(202,182,150,.16);
  border-radius:18px;
  background:linear-gradient(170deg,rgba(40,34,36,.92),rgba(18,18,19,.92));
}
.card--lead{border-color:rgba(202,182,150,.45)}
.card__flag{
  position:absolute;top:-9px;left:24px;
  padding:3px 12px;border-radius:999px;
  background:var(--gold);color:#1A1512;
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.card__name{margin:0 0 10px;font:500 15px/1.2 "Golos Text",sans-serif;letter-spacing:.04em;color:var(--ink)}
.card__price{margin:0 0 18px;font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;color:var(--gold)}
.card__price b{
  font-size:40px;font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.card__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px;font-size:14px;color:var(--ink-dim)}
.card__list li{padding-left:16px;position:relative}
.card__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--gold)}

/* ---------- заявка ---------- */

.contact__logo{width:132px;margin:0 auto 30px}
.form{margin:32px 0 0;display:grid;gap:16px}
.field{display:grid;gap:7px}
.field span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.field input{
  width:100%;padding:14px 16px;
  border:1px solid rgba(202,182,150,.22);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--ink);
  font:400 16px/1.2 "Golos Text",sans-serif;
}
.field input:focus{outline:none;border-color:var(--gold)}
.form__note{margin:0;min-height:20px;font-size:13px;color:var(--gold)}

.contacts{list-style:none;margin:46px 0 0;padding:26px 0 0;border-top:1px solid rgba(202,182,150,.14);display:grid;gap:16px}
.contacts li{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
.contacts__label{display:inline-flex;align-items:center;gap:11px;color:var(--ink-dim)}
.ico{width:19px;height:19px;flex:none;display:block}
.contacts a{color:var(--gold);text-decoration:none}
.note{margin:22px 0 0;font-size:13px;color:rgba(242,236,227,.45)}
.legal{margin:34px 0 0;font-size:12px;color:rgba(242,236,227,.38)}

/* ---------- запасная раскладка ---------- */

.stills{display:none}
.reduced .story{height:auto}
.reduced .story__stage{display:none}
.reduced .stills{display:grid;gap:34px;padding:88px var(--pad)}
.reduced .stills figcaption{
  margin-top:14px;font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;color:var(--gold);
}
.reduced .hint,.reduced .loader__bar{display:none}

/* ---------- десктоп: кадр квадратный, поле шире — держим колонку ---------- */

@media (min-width:768px){
  :root{--pad:48px}
  .panel{max-width:480px;top:calc(var(--safe-t) + var(--bar) + 112px)}
  .cards{grid-template-columns:repeat(3,1fr);align-items:start;max-width:1040px}
  .form,.contacts{max-width:520px}
}