/* =========================================================================
   vladimirbalasanyan.com
   Перенос с Readymag. Канва оригинала — 1052 px.
   Все размеры записаны в «единицах канвы»: calc(N * var(--u)).

   --u — масштабная единица. Канва растягивается на всю ширину окна, ровно
   как на Readymag: на любом экране страница совпадает с оригиналом
   пиксель в пиксель, потолка нет.
   Вернуть потолок, если на очень большом мониторе покажется крупно:
   --u: min(calc(100vw / 1052), 1.45px)  — тогда рост встанет на 1525 px окна.
   ========================================================================= */

:root{
  --u: calc(100vw / 1052);   /* масштабная единица канвы */
  --bg:  #d5d5d5;
  --fg:  #000000;
  --dim: rgba(0,0,0,.42);   /* копирайт, hover ссылок, линии полей */
  --sel: #A2A2A2;           /* выделение текста */
  --fade: .6s;              /* длительность проявления */
  --canvas: 1052;
}
/* мобильная канва 320 px */
@media (max-width:900px){ :root{ --u: min(1.35px, calc(100vw / 320)) } }

/* ---------- сброс ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--sel) }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--dim) }
img{ display:block; max-width:100% }
button,input,textarea{ font:inherit; color:inherit }

/* ---------- типографика ---------- */
/* Логотип. Ось "opsz" закреплена, иначе DM Sans сам подбирает начертание под
   кегль: на десктопе кегль крупный, шрифт переключается на самое плотное
   начертание (opsz 40) и буквы слипаются, а на мобильной кегль мелкий и они
   стоят свободнее. С закреплённой осью десктоп выглядит так же, как мобильная.
   Плотнее — увеличить число (до 40), свободнее — уменьшить (до 9). */
.t-logo{
  font-size:calc(22*var(--u)); line-height:calc(22*var(--u));
  letter-spacing:calc(-1.5*var(--u));
  font-optical-sizing:none;
  font-variation-settings:"opsz" 28, "wght" 536;
}
/* Интерлиньяж 13 ед. канвы — снято с записи живого сайта: текст About
   набран почти вплотную, шаг строк 13,1 при кегле 14. */
.t-body{
  font-size:calc(14*var(--u)); line-height:calc(13*var(--u));
  letter-spacing:calc(-.5*var(--u)); font-variation-settings:"wght" 440;
}
.t-menu{
  font-size:calc(14*var(--u)); line-height:calc(14*var(--u));
  letter-spacing:calc(-.5*var(--u)); font-variation-settings:"wght" 421;
}
.t-caption{
  font-size:calc(10*var(--u)); line-height:calc(14*var(--u));
  letter-spacing:calc(-.5*var(--u)); font-variation-settings:"wght" 440;
}
.t-copy{
  font-size:calc(8*var(--u)); line-height:calc(16*var(--u));
  font-variation-settings:"wght" 440; color:var(--dim);
}

/* ---------- каркас страницы ---------- */
.shell,
main{
  position:relative;
  width:min(100%, calc(var(--canvas)*var(--u)));
  margin-inline:auto;
}

/* фиксированная рамка: логотип / меню / копирайт */
.frame{
  position:fixed; top:0; left:0; right:0; height:100%;
  width:min(100%, calc(var(--canvas)*var(--u)));
  margin-inline:auto;
  pointer-events:none; z-index:50;
}
.frame > *{ pointer-events:auto }

.logo{ position:absolute; left:calc(37*var(--u)); top:calc(33.6*var(--u)) }
.logo:hover{ color:var(--fg) }

.copyright{ position:absolute; right:calc(33*var(--u)); bottom:calc(27*var(--u)) }

/* кнопка меню */
.menu-btn{
  position:absolute; right:calc(37*var(--u)); top:calc(33.6*var(--u));
  width:calc(20*var(--u)); height:calc(15*var(--u));
  background:none; border:0; cursor:pointer; display:block;
}
.menu-btn span{
  position:absolute; left:0; width:100%; height:calc(1.4*var(--u));
  background:var(--fg);
  transition:transform .3s ease-in-out, opacity .2s ease-in-out;
}
.menu-btn span:nth-child(1){ top:calc(4*var(--u)) }
.menu-btn span:nth-child(2){ top:calc(10*var(--u)) }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(calc(3*var(--u))) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(calc(-3*var(--u))) rotate(-45deg) }

/* выпадающее меню — десктоп */
.menu{
  position:absolute; right:calc(37*var(--u));
  top:calc(115.6*var(--u));            /* 33.6 + 157, минус высота меню (75) */
  width:calc(122*var(--u));
  text-align:right;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease-in-out, visibility .35s;
}
.menu.is-open{ opacity:1; visibility:visible }
.menu a{
  display:block;
  white-space:nowrap;
  /* правый край пунктов совпадает с правым концом крестика: линии кнопки
     повёрнуты на 45°, поэтому видимый крестик уже кнопки на 3 ед. с каждой стороны */
  padding:calc(5*var(--u)) calc(3*var(--u)) calc(6*var(--u)) calc(16*var(--u));
}
.menu a[aria-current="page"]{ color:var(--fg) }
.menu a[aria-current="page"]:hover{ color:var(--dim) }

/* ---------- проявление ---------- */
.frame .logo, .frame .menu-btn, .frame .copyright{
  opacity:0; transition:opacity .5s ease-in-out;
}
body.is-loaded .frame .logo,
body.is-loaded .frame .menu-btn,
body.is-loaded .frame .copyright{ opacity:1 }

/* Логотип плавно исчезает, как только страницу тронули вниз, и так же
   возвращается наверху. Гамбургер и копирайт остаются — так на оригинале. */
body.is-loaded.is-scrolled .frame .logo{ opacity:0; pointer-events:none }

.reveal{ opacity:0; transition:opacity var(--fade) ease-in-out }
.reveal.is-in{ opacity:1 }

/* Содержимое, видимое сразу при открытии страницы, проявляется чуть позже
   рамки — так же мягко, как на оригинале. Работы ниже по странице ждут
   прокрутки и появляются без задержки. */
.reveal[data-reveal-now]{ transition-duration:.75s; transition-delay:.15s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
  .reveal{ opacity:1 }
}

/* =========================================================================
   ГЛАВНАЯ — слайдшоу
   ========================================================================= */
.home-stage{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(90*var(--u)) calc(37*var(--u)) calc(60*var(--u));
}
/* Слайдшоу показывает те же кадры, что и selected works, приведённые к одной
   высоте — 390 ед. канвы. Замерено по записи живого сайта: у всех работ на
   главной высота кадра совпадает, меняется только ширина. */
.slides{
  position:relative;
  width:min(calc(991*var(--u)), 100%);
  height:calc(390*var(--u));
  max-height:100%;
  cursor:pointer;
}
.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.3s ease-in-out;   /* длительность кроссфейда с оригинала */
  pointer-events:none;
}
.slide.is-active{ opacity:1 }
.slide picture{ position:absolute; inset:0; display:block }
.slide img{ width:100%; height:100%; object-fit:contain }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-stage{
  min-height:100vh;
  display:flex; align-items:center;
  padding:calc(110*var(--u)) calc(37*var(--u)) calc(80*var(--u));
}
.about-text{
  width:calc(423*var(--u));
  max-width:100%;
  text-align:justify;
  /* Без переносов: слова не разрываются дефисом, строка выключается пробелами. */
  -webkit-hyphens:none;
  hyphens:none;
}
.about-text p + p{ margin-top:calc(17*var(--u)) }
/* составные имена не рвутся по дефису: «Beaux-Arts», «Paris-Malaquais» */
.nb{ white-space:nowrap }

/* =========================================================================
   SELECTED WORKS
   ========================================================================= */
.works{
  position:relative;
  width:min(100%, calc(var(--canvas)*var(--u)));
  margin-inline:auto;
  padding:calc(96*var(--u)) 0 calc(57*var(--u));   /* как в брифе: канва 3981 */
}

/* Работа стоит в кадре тех же пропорций, что и на Readymag; подпись
   позиционируется внутри кадра — смещение от его верха в единицах канвы. */
.work-frame{
  position:relative;
  height:calc(var(--fh)*var(--u));
}
/* Пропуск до предыдущей работы — из брифа, у каждой пары свой (--gap). */
.work-frame + .work-frame{ margin-top:calc(var(--gap)*var(--u)) }

.work-frame img{
  position:absolute; top:0;
  left:calc(136*var(--u));
  width:calc(780*var(--u));
  height:auto;
  z-index:1;
}
.work-frame .cap{
  position:absolute;
  left:calc(37*var(--u));
  top:calc(var(--ct)*var(--u));
  width:calc(130*var(--u));
  z-index:2;
}
.works-mobile{ display:none }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-stage{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(110*var(--u)) calc(37*var(--u)) calc(80*var(--u));
}
.contact-intro{ max-width:100%; margin-bottom:calc(53*var(--u)) }
.contact-form{ width:calc(423*var(--u)); max-width:100% }

.field{
  display:block; width:100%;
  height:calc(20*var(--u));
  margin-bottom:calc(2*var(--u));
  background:transparent; border:0; border-radius:0;
  box-shadow:inset 0 -2px 0 -1px var(--dim);
  font-size:calc(14*var(--u)); letter-spacing:calc(-.5*var(--u));
  font-variation-settings:"wght" 440;
  color:var(--fg);
}
.field:focus{ outline:none; box-shadow:inset 0 -2px 0 -1px var(--fg) }
textarea.field{
  height:calc(100*var(--u)); resize:none; line-height:calc(16*var(--u));
  padding-top:calc(2*var(--u));
}
.field::placeholder{ color:rgba(0,0,0,.45); opacity:1 }

.send{
  display:block; width:100%;
  height:calc(20*var(--u)); margin-top:calc(18*var(--u));
  background:#000; color:#d5d5d5; border:0; border-radius:0;
  font-size:calc(14*var(--u)); letter-spacing:calc(-.5*var(--u));
  font-variation-settings:"wght" 440;
  text-align:center; cursor:pointer;
  transition:background .25s ease-in-out, color .25s ease-in-out;
}
.send:hover{ background:rgba(0,0,0,.42); color:rgba(213,213,213,.61) }

.contact-ig{ margin-top:calc(36*var(--u)) }

/* «спасибо» */
.thanks{ width:calc(443*var(--u)); max-width:100% }

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden }

/* =========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ  (канва 320)
   ========================================================================= */
@media (max-width:900px){

  .logo{ left:calc(20*var(--u)) }
  .menu-btn{ right:calc(20*var(--u)) }

  /* копирайт виден только на главной */
  body:not(.is-home) .copyright{ display:none }
  .copyright{ right:calc(20*var(--u)) }

  /* меню — горизонтальной строкой под логотипом */
  .menu{
    top:calc(82*var(--u));
    left:calc(20*var(--u)); right:calc(14*var(--u));
    width:auto;
    display:flex; justify-content:space-between; align-items:baseline;
    gap:calc(8*var(--u));
    text-align:left;
  }
  .menu a{ padding:0; white-space:nowrap }

  .home-stage{ padding:calc(100*var(--u)) calc(20*var(--u)) calc(60*var(--u)) }
  .slides{ width:100%; height:min(calc(430*var(--u)), 62vh) }

  .about-stage,
  .contact-stage{ padding:calc(120*var(--u)) calc(20*var(--u)) calc(70*var(--u)) }
  .about-text,
  .contact-intro,
  .contact-form,
  .thanks{ width:100% }

  /* selected works — поток вместо абсолютной сетки */
  .works{ display:none }
  .works-mobile{
    display:block;
    padding:calc(120*var(--u)) 0 calc(90*var(--u));
  }
  .works-mobile figure{ margin:0 }
  .works-mobile figure + figure{ margin-top:calc(190*var(--u)) }
  .works-mobile img{
    width:calc(230*var(--u));
    max-width:calc(100% - 40*var(--u));
    height:auto;
    margin-inline:auto;
  }
  .works-mobile figcaption{
    margin-top:calc(10*var(--u));
    padding-left:calc(20*var(--u));
  }
}