/* ============================================================
   MILA KOBA — стили сайта
   Повторяют вид тильдовского оригинала: тот же почти чёрный фон,
   логотип по центру, огромные разрежённые заголовки секций,
   овальные кнопки, вертикальная плашка с именем слева.

   Внутри — обычная адаптивная сетка. На Тильде каждый элемент
   позиционирован абсолютно и продублирован под пять ширин экрана;
   повторять это нельзя, иначе унаследуем ровно ту поломку,
   из-за которой сайт и переезжает.
   ============================================================ */

:root{
  --bg:#131312;
  --bg-soft:#1a1a18;
  --ink:#ffffff;
  --ink-dim:#b8b4ad;
  --ink-mute:#7d7972;
  --gold:#c9a227;
  --line:#33322e;
  --rail:52px;          /* ширина вертикальной плашки слева */
  --wrap:1240px;
  --head:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ------------------------------------------------------------
   КАДРИРОВАНИЕ ФОТО — правило, нарушение которого стоило голов
   на первом показе вёрстки.

   Все её снимки вертикальные, 2:3. Если положить такой кадр в
   блок другой пропорции, браузер обрежет лишнее ОТ ЦЕНТРА, поровну
   сверху и снизу. На портретной съёмке лицо в верхней трети — его
   и срезает.

   Отсюда два правила:
   1. Где можно — держать родные 2:3 и не резать вовсе.
   2. Где нельзя — кадрировать от верха, а не от центра.
   ------------------------------------------------------------ */
.pair img,.yr img,.folio img,.good img{object-position:50% 18%}

/* Первому экрану нужна своя точка кадрирования. Там вертикальный
   снимок 2:3 лежит в широком контейнере 16:9, и от него остаётся
   узкая полоса: при 18% в неё попадают только поднятые руки, а лицо
   уходит вниз за край. 42% ставит в центр экрана лицо. */
.slide img{object-position:50% 42%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 Arial,Helvetica,sans-serif;
  padding-left:var(--rail);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* Текст для поисковика и для программ чтения с экрана: в разметке
   есть, глазом не виден. Не display:none — то, что скрыто так,
   не читается ни теми, ни другими. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Ячейка grid по умолчанию не сжимается уже своего содержимого
   (min-width:auto). Из-за этого колонка с длинным текстом раздувает
   сетку шире экрана, и на телефоне строки уезжают за правый край. */
.about>*,.years>*,.goods>*,.contacts>*,.anons>*,.folio>*,.pair>*{min-width:0}
p,h1,h2,h3,li,a,span{overflow-wrap:anywhere}

/* Заголовок секции: у Милы они набраны крупно и в разрядку.
   clamp вместо пяти копий под разные экраны. */
.sec-title{
  font-size:clamp(38px,7.4vw,104px);
  line-height:1;letter-spacing:.02em;font-weight:400;
  margin:0 0 clamp(28px,4vw,54px);text-transform:uppercase;
}

/* ---------- вертикальная плашка с именем ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  background:var(--bg);border-right:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;
}
.rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  letter-spacing:.24em;font-size:13px;color:var(--ink-dim);text-transform:uppercase;
}

/* ---------- шапка ---------- */
.head{
  position:fixed;top:0;left:var(--rail);right:0;z-index:55;height:var(--head);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(19,19,18,.92),rgba(19,19,18,.55) 70%,transparent);
  transition:background .3s;
}
.head.solid{background:rgba(19,19,18,.97);border-bottom:1px solid var(--line)}
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
}
.menu{display:flex;gap:clamp(18px,3vw,48px);list-style:none;margin:0;padding:0}
.menu.right{justify-content:flex-end}
.menu a{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  transition:color .2s;white-space:nowrap;
}
.menu a:hover{color:var(--ink)}
.logo{
  display:flex;align-items:center;gap:clamp(6px,1.2vw,16px);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2.2vw,30px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.logo img{height:clamp(48px,5.4vw,74px);width:auto}

.burger{
  display:none;position:fixed;left:calc(var(--rail) / 2 - 11px);top:22px;z-index:70;
  width:22px;height:16px;background:none;border:0;padding:0;
}
.burger i{display:block;height:1px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}

@media(max-width:1000px){
  :root{--rail:40px;--head:70px}
  .menu{display:none}
  .burger{display:block}
  .logo img{height:46px}
  .head-in{grid-template-columns:1fr;justify-items:center}
}

/* выдвижное меню для узких экранов */
.drawer{
  position:fixed;inset:0 0 0 0;z-index:65;background:rgba(19,19,18,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer.open{opacity:1;pointer-events:auto}
.drawer a{font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.drawer a:hover{color:var(--gold)}

/* ---------- первый экран: карусель ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
.slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,19,18,.55),rgba(19,19,18,0) 38%,rgba(19,19,18,.75));
}
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(19,19,18,.25);color:#fff;display:grid;place-items:center;
  transition:background .25s,border-color .25s;
}
.hero-nav:hover{background:rgba(255,255,255,.9);color:#131312;border-color:transparent}
.hero-nav.prev{left:22px}
.hero-nav.next{right:22px}
.dots{
  position:absolute;left:0;right:0;bottom:26px;z-index:3;
  display:flex;gap:10px;justify-content:center;
}
.dots button{
  width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;
}
.dots button[aria-current="true"]{background:#fff}

/* ---------- секции ---------- */
.sec{padding:clamp(64px,9vw,132px) 0}
.sec-soft{background:var(--bg-soft)}

/* о бренде */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.about p{color:var(--ink-dim);margin:0 0 18px;max-width:60ch}
.about .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about .pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* достижения — хронология */
.years{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px)}
.yr b{
  display:block;font-size:clamp(34px,4.6vw,62px);font-weight:400;
  color:var(--ink-mute);line-height:1;margin-bottom:14px;
}
.yr p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.65}
.yr img{width:100%;aspect-ratio:2/3;object-fit:cover;margin-bottom:18px}
@media(max-width:760px){.years{grid-template-columns:1fr}}

/* портфолио — коллаж */
.folio{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.folio a{overflow:hidden;display:block;background:var(--bg-soft)}
.folio img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.folio a:hover img{transform:scale(1.05)}
/* Плитки держат пропорцию, близкую к родной 2:3, — так с кадров
   не срезается ни голова, ни подол. Широкая плитка 16:10, стоявшая
   здесь раньше, отрезала лицам верх. */
.f-1{grid-column:span 3;aspect-ratio:3/4}
.f-2{grid-column:span 3;aspect-ratio:3/4}
.f-3{grid-column:span 2;aspect-ratio:2/3}
.f-4{grid-column:span 2;aspect-ratio:2/3}
.f-5{grid-column:span 2;aspect-ratio:2/3}
@media(max-width:860px){
  .folio{grid-template-columns:repeat(2,1fr)}
  .f-1,.f-2{grid-column:span 2;aspect-ratio:4/3}
  .f-3,.f-4,.f-5{grid-column:span 1;aspect-ratio:2/3}
}

/* видео показа */
.reel{position:relative;margin-top:14px;background:#000;aspect-ratio:16/9;overflow:hidden}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .play{
  position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;
}
.reel .play i{
  width:74px;height:74px;border-radius:50%;background:rgba(19,19,18,.55);
  border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:background .25s;
}
.reel .play i::before{
  content:"";border-left:15px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:5px;
}
.reel .play:hover i{background:rgba(255,255,255,.9)}
.reel .play:hover i::before{border-left-color:#131312}

/* каталог */
.goods{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.good img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:opacity .3s}
.good:hover img{opacity:.86}
.good h3{font-size:clamp(17px,1.9vw,22px);font-weight:400;margin:20px 0 6px;line-height:1.35}
.good p{margin:0 0 18px;color:var(--ink-mute);font-size:14px}
@media(max-width:700px){.goods{grid-template-columns:1fr}}

.btn-oval{
  display:inline-block;padding:13px 34px;border:1px solid var(--ink-mute);border-radius:999px;
  font-size:13px;letter-spacing:.1em;color:var(--ink-dim);
  transition:border-color .25s,color .25s,background .25s;
}
.btn-oval:hover{border-color:var(--gold);color:#131312;background:var(--gold)}

/* анонсы */
.anons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)}
.an{border:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.an .date{color:var(--gold);font-size:13px;letter-spacing:.14em}
.an h3{font-size:19px;font-weight:400;margin:0;line-height:1.35;text-transform:uppercase;letter-spacing:.04em}
.an .city{color:var(--ink-mute);font-size:14px;margin:0}
.an p.txt{color:var(--ink-dim);font-size:14px;margin:0;flex:1}
@media(max-width:860px){.anons{grid-template-columns:1fr}}

/* контакты */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.contacts .tel{font-size:clamp(26px,3.4vw,42px);display:inline-block;margin:10px 0 22px}
.contacts .tel:hover{color:var(--gold)}
.ways{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.contacts{grid-template-columns:1fr}}

/* форма заявки */
.form{display:grid;gap:12px;max-width:440px}
.form input,.form textarea{
  width:100%;background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:14px 16px;font:inherit;border-radius:0;
}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--gold)}
.form textarea{min-height:110px;resize:vertical}
.form button{
  background:var(--gold);border:0;color:#131312;padding:15px 34px;border-radius:999px;
  font-size:13px;letter-spacing:.1em;justify-self:start;transition:opacity .25s;
}
.form button:hover{opacity:.85}
.form .note{color:var(--ink-mute);font-size:13px;margin:0}

/* подвал */
.foot{border-top:1px solid var(--line);padding:32px 0;color:var(--ink-mute);font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a:hover{color:var(--ink-dim)}

/* модальное окно изделия */
.modal{
  position:fixed;inset:0;z-index:80;background:rgba(10,10,9,.92);
  display:none;overflow-y:auto;padding:40px 20px;
}
.modal.open{display:block}
.modal-in{
  max-width:1000px;margin:0 auto;background:var(--bg);border:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;
}
.modal-in img{width:100%;height:100%;object-fit:cover;max-height:82vh}
.modal-body{padding:clamp(26px,4vw,48px)}
.modal-body h3{font-size:26px;font-weight:400;margin:0 0 10px}
.modal-body p{color:var(--ink-dim);margin:0 0 22px}
.modal-close{
  position:absolute;right:26px;top:22px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--ink-mute);background:transparent;color:var(--ink);font-size:20px;line-height:1;
}
@media(max-width:760px){.modal-in{grid-template-columns:1fr}}

/* появление блоков при прокрутке — у Милы это есть, повторяем,
   но без затемнения, из-за которого её кадры висят серыми */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rise.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Телефон. Блок стоит в конце файла намеренно: при равной
   специфичности побеждает последнее правило, и переопределения,
   написанные выше основных, просто не сработают.
   ============================================================ */
@media(max-width:700px){
  .wrap{padding:0 18px}
  .about .pair{grid-template-columns:1fr;gap:12px}
  .about .pair img{aspect-ratio:4/5}
  .sec{padding:52px 0}
  .yr img{aspect-ratio:3/2}
}

/* съёмка страницы целиком headless-браузером */
@media (min-height:2000px){
  .hero{height:760px}
  .rise{opacity:1;transform:none}
}