/* ============================================================
   SUKHAREVA JULIA — PORTFOLIO
   Desktop 1440 / Tablet 768 / Mobile 390
   ============================================================ */

:root{
  --bg:            #FFFFFF;
  --text:          #111111;
  --caption:       #BDBDBD;
  --footer-bg:     #D9D9D9;
  --on-grey:       #959595;
  --muted:         #959595;

  --btn:           #EDFF21;
  --btn-hover:     #E1F220;
  --btn-active:    #D2E408;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }

/* Canvas для следа курсора. Он поверх контента, но pointer-events: none
   сохраняет нормальные клики, hover и прокрутку сайта. */
.pencil-trail{
  position:fixed;
  inset:0;
  z-index:9999;
  width:100vw;
  height:100vh;
  pointer-events:none;
}
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .pencil-trail{ display:none; }
}

/* ---------- typography scale ---------- */
h1,.h1{ font-size:48px; line-height:56px; font-weight:500; margin:0; }
h2,.h2{ font-size:24px; line-height:32px; font-weight:500; margin:0; }
.body{ font-size:20px; line-height:28px; font-weight:400; }
.sign{ font-size:16px; line-height:24px; font-weight:400; }

/* ============================================================
   PAGE  (desktop 1440)
   ============================================================ */
.page{
  display:flex;
  width:1440px;
  max-width:100%;
  margin:0 auto;
  /* Desktop: ровно 40px от верхнего края до шапки. */
  padding-top:40px;
  flex-direction:column;
  align-items:flex-start;
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  display:flex;
  /* По горизонтали ровно 80px, вертикальный отступ задаёт .page. */
  padding:0 80px;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  align-self:stretch;
}

/* На десктопе шапка остаётся у верхнего края окна при прокрутке. */
@media (min-width:1024px){
  .header{
    position:sticky;
    top:0;
    z-index:100;
    padding-bottom:10px;
    background:#FFFFFF;
  }
}

.logo{ display:flex; flex-direction:column; }
.logo__name{
  font-size:16px; line-height:24px; font-weight:500;
  color:var(--text);
}
.logo__role{
  font-size:16px; line-height:24px; font-weight:400;
  color:var(--muted);
}

.nav{ display:flex; gap:56px; align-items:center; }
.nav__link{
  font-size:16px; line-height:24px; font-weight:400;
  color:#111111;
  transition:color .2s ease;
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link:active{ color:#B9B9B9; }

/* burger — hidden on desktop */
.burger{
  display:none;
  width:24px; height:24px;
  padding:0; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:24px; height:1.5px;
  background:var(--text); border-radius:2px;
}

/* ============================================================
   SECTIONS  (desktop paddings from spec)
   ============================================================ */
.section{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
}

.section--grain  { padding:120px 0 0 80px;  }
.section--urban  { padding:200px 0 0 296px; }
.section--lacto  { padding:200px 0 0 80px;  }
.section--apero  { padding:200px 80px 0 80px; align-items:flex-end; }
.section--dialog { padding:200px 0 0 80px; }
.section--poster { padding:200px 0 0 296px; }

.section--button{
  display:flex;
  /* 160px от нижнего края кнопки до серого фона футера. */
  padding:120px 0 160px 0;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
}

/* ---------- Grain idea ---------- */
.grain__row{
  display:flex;
  align-items:flex-start;
  gap:88px;
  align-self:stretch;
}
.grain__main{ margin:0; width:846px; flex:0 0 846px; }
.grain__main img{ width:100%; height:480px; object-fit:cover; }

.grain__side{ margin:0; width:196px; flex:0 0 196px; padding-top:84px; }
.grain__side img{ width:100%; height:264px; object-fit:cover; }

/* ---------- Urban ---------- */
.urban__media{ margin:0; width:846px; }
.urban__media video{ width:100%; height:480px; object-fit:cover; background:#1B4BF5; }

/* ---------- Lactobar ---------- */
.lacto__row{
  display:flex;
  align-items:flex-start;
  gap:88px;
  align-self:stretch;
}
.lacto__main{ margin:0; width:739px; flex:0 0 739px; }
.lacto__main img{ width:100%; height:480px; object-fit:cover; }

.lacto__award{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  /* Награда расположена выше, по центру относительно композиции на референсе. */
  padding-top:140px;
}
.lacto__award img{ width:210px; height:auto; }
.lacto__award-text{
  margin:0;
  font-size:16px; line-height:24px;
  color:var(--text);
  text-align:center;
}

/* ---------- Posters ---------- */
.poster__media{ margin:0; width:846px; }
.poster__media video{ width:100%; height:561px; object-fit:cover; background:#000; }

/* ---------- Apero ---------- */
.apero__media{ margin:0; width:846px; }
.apero__media video{ width:100%; height:480px; object-fit:cover; background:#34440D; }

/* ---------- Диалог ИТ ---------- */
.dialog__media{ margin:0; width:846px; }
.dialog__media img,
.dialog__media video{ width:100%; height:480px; object-fit:cover; background:#D9D9D9; }

/* ============================================================
   CAPTIONS
   ============================================================ */
/* Между изображением/видео и подписью проекта — 24px. */
.caption{ padding-top:24px; }
.caption--grain  { width:846px; }
.caption--urban  { width:846px; }
.caption--lacto  { width:739px; }
.caption--apero  { width:846px; }
.caption--dialog { width:846px; }
.caption--poster { width:846px; }

.caption__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
}
.caption__title{
  font-size:16px; line-height:24px; font-weight:500;
  color:var(--text);
}
.caption__title a,
.project-media-link{ display:block; color:inherit; }
.caption__title a:hover,
.caption__title a:focus-visible{ text-decoration:none; }
.project-media-link{ cursor:pointer; }
.caption__year{
  font-size:16px; line-height:24px; font-weight:400;
  color:var(--caption);
  /* Год не должен сжиматься или переноситься на узких экранах. */
  flex:0 0 auto;
  white-space:nowrap;
}
.caption__sub{
  margin:0;
  font-size:16px; line-height:24px; font-weight:400;
  color:var(--caption);
}

/* ============================================================
   BUTTON
   ============================================================ */
.button{
  display:flex;
  padding:8px 32px;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:49px;
  background:var(--btn);
  color:var(--text);
  font-size:16px; line-height:24px; font-weight:400;
  cursor:pointer;
  transition:background .2s ease;
}
.button:hover{ background:var(--btn-hover); }
.button:active{ background:var(--btn-active); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  display:flex;
  height:403px;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  align-self:stretch;
  background:var(--footer-bg);
}
.footer__inner{
  width:100%;
  /* 80px сверху и снизу; при высоте футера 403px внутренний контент
     распределяется между этими границами. */
  height:100%;
  padding:80px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.footer__label{
  margin:0;
  font-size:16px; line-height:24px;
  color:var(--on-grey);
}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.footer__contacts{
  display:flex;
  flex-direction:column;
}
.footer__mail,
.footer__phone{
  font-size:24px; line-height:32px;
  color:#111111;
  transition:color .2s ease;
}
.footer__mail:hover,
.footer__mail:focus-visible,
.footer__mail:active,
.footer__phone:hover,
.footer__phone:focus-visible,
.footer__phone:active{ color:#111111; }
.footer__social{ display:flex; gap:80px; align-items:baseline; }
.footer__link{
  font-size:24px; line-height:32px;
  color:var(--on-grey);
  transition:color .2s ease;
}
.footer__link:hover,
.footer__link:focus-visible,
.footer__link:active{ color:var(--text); }
.footer__link--last{ color:var(--on-grey); }

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.menu{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  width:100%;
  height:100%;
  flex-direction:column;
  align-items:flex-start;
  background:var(--bg);
}
.menu[hidden]{ display:none; }

.menu__header{
  display:flex;
  padding:24px 20px;
  justify-content:space-between;
  align-items:center;
  align-self:stretch;
}
.menu__close{
  padding:0; border:0; background:none; cursor:pointer;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
}

.menu__nav{
  display:flex;
  flex:1 1 auto;
  padding:64px 20px 0 20px;
  flex-direction:column;
  align-items:flex-start;
  gap:40px;
  align-self:stretch;
}
.menu__link{
  font-size:24px; line-height:32px; font-weight:400;
  color:#111111;
  transition:color .2s ease;
}
.menu__link:hover,
.menu__link:focus-visible,
.menu__link:active{ color:#B9B9B9; }

.menu__contacts{
  display:flex;
  flex-direction:column;
  padding:0 20px 48px 20px;
  align-self:stretch;
}
.menu__contacts a{
  font-size:16px; line-height:24px;
  color:var(--muted);
  transition:color .2s ease;
}
.menu__contacts a:hover,
.menu__contacts a:focus-visible,
.menu__contacts a:active{ color:var(--text); }

body.is-locked{ overflow:hidden; }

/* ============================================================
   TABLET — 768
   ============================================================ */
/* Планшетные правила включаются только до 1023px.
   Раньше граница 1439px принудительно делала сайт шириной 768px
   даже в обычном десктопном окне 1280–1439px. */
@media (min-width:768px) and (max-width:1023px){
  .page{
    width:768px;
    min-height:1024px;
    padding-top:0;
  }

  .header{
    padding:48px 40px 0 40px;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .nav{ gap:40px; }

  /* sections */
  .section--grain{
    display:flex;
    width:768px;
    padding:56px 40px 80px 40px;
    flex-direction:column;
    align-items:flex-start;
  }
  .section--urban,
  .section--lacto,
  .section--apero,
  .section--dialog,
  .section--poster{
    padding:0 40px 80px 40px;
  }

  .section--button{
    padding:0 0 120px 0;
  }

  /* grain */
  .grain__row{ gap:24px; }
  .grain__main{ width:100%; flex:1 1 auto; }
  .grain__main img{ height:360px; }
  .grain__side{ display:none; }

  /* Секции — флекс с align-items:flex-start, поэтому ссылка-обёртка вокруг
     медиа сжималась по содержимому и не доходила до края сетки.
     Растягиваем её: тогда правый край фото совпадает с годом в подписи. */
  .project-media-link{ align-self:stretch; width:100%; }

  /* urban */
  .urban__media{ width:100%; }
  .urban__media video{ height:400px; }

  /* lactobar: фото во всю ширину сетки, чтобы год в подписи совпал
     с его правым краем. Плашка с наградой на планшете не показывается. */
  .lacto__row{ flex-direction:column; align-items:stretch; gap:20px; }
  .lacto__main{ width:100%; flex:1 1 auto; }
  .lacto__main img{ height:360px; }
  .lacto__award{ display:none; }

  /* apero */
  .apero__media{ width:100%; }
  .apero__media video{ height:400px; }

  /* Диалог ИТ */
  .dialog__media{ width:100%; }
  .dialog__media img,
  .dialog__media video{ height:400px; }

  /* posters */
  .poster__media{ width:100%; }
  .poster__media video{ height:440px; }

  .caption--grain,
  .caption--urban,
  .caption--lacto,
  .caption--apero,
  .caption--dialog,
  .caption--poster{ width:100%; }

  .caption__title{ font-size:18px; line-height:24px; font-weight:600; }
  .caption__year,
  .caption__sub{ font-size:14px; line-height:20px; }

  /* footer */
  .footer{
    height:auto;
    padding:48px 40px;
    gap:48px;
    justify-content:flex-start;
  }
  .footer__inner{
    padding:0;
    gap:48px;
  }
  /* По референсу контакты и соцсети в одной строке, соцсети выровнены
     по нижней линии с почтой. */
  .footer__bottom{ flex-direction:row; align-items:flex-end; gap:32px; }
  /* В разметке почта идёт первой, в макете сверху телефон. */
  .footer__contacts{ flex-direction:column-reverse; }
  .footer__social{ gap:56px; align-items:baseline; }

  /* Тексты футера 16px, «пиши / звони» — 14px. */
  .footer__mail,
  .footer__phone,
  .footer__link{ font-size:16px; line-height:24px; }
  .footer__label{ font-size:14px; line-height:20px; }

  /* Текст кнопки 16px. */
  .button{ font-size:16px; line-height:24px; }
}

/* ============================================================
   MOBILE — 390
   ============================================================ */
@media (max-width:767px){
  .page{
    /* Макет нарисован в 390, но фиксировать ширину нельзя: на 412/430px
       экранах страница вставала по центру с белыми полями по бокам. */
    width:100%;
    min-height:0;
    padding-top:0;
  }

  .header{
    padding:24px 20px;
    justify-content:space-between;
    align-items:center;
  }
  .nav{ display:none; }
  .burger{ display:flex; }

  /* sections */
  .section--grain{
    width:100%;
    /* 32px + 24px нижнего паддинга шапки = 56px от логотипа до фото. */
    padding:32px 20px 32px 20px;
    gap:20px;
  }
  /* 2. Между проектами 64px: 32px снизу + 32px сверху у соседней секции. */
  .section--urban,
  .section--lacto,
  .section--apero,
  .section--dialog,
  .section--poster{
    padding:32px 20px;
    gap:20px;
  }

  .section--button{
    padding:40px 20px 80px 20px;
  }

  /* Секции — флекс с align-items:flex-start, поэтому ссылка-обёртка вокруг
     медиа сжималась по содержимому: до края сетки доходил только Grain
     (у него внутри свой .grain__row со stretch). Растягиваем обёртку —
     тогда все фото упираются в край сетки. */
  .project-media-link{ align-self:stretch; width:100%; }

  /* grain */
  .grain__row{ flex-direction:column; gap:0; align-self:stretch; }
  .grain__main{ width:100%; flex:1 1 auto; }
  .grain__main img{ height:210px; }
  .grain__side{ display:none; }

  /* urban */
  .urban__media{ width:100%; }
  .urban__media video{ height:200px; }

  /* lactobar */
  .lacto__row{ flex-direction:column; gap:24px; align-self:stretch; }
  .lacto__main{ width:100%; flex:1 1 auto; }
  .lacto__main img{ height:210px; }
  .lacto__award{ display:none; }

  /* apero */
  .apero__media{ width:100%; }
  .apero__media video{ height:210px; }

  /* Диалог ИТ */
  .dialog__media{ width:100%; }
  .dialog__media img,
  .dialog__media video{ height:210px; }

  /* posters */
  .poster__media{ width:100%; }
  .poster__media video{ height:220px; }

  /* Базовые ширины 846/739px не должны действовать на мобильной,
     иначе подписи последних проектов не доходят до края сетки. */
  .caption--grain,
  .caption--urban,
  .caption--lacto,
  .caption--apero,
  .caption--dialog,
  .caption--poster{ width:100%; }

  /* Фото → название проекта. Было 24px, поднято на 14px ближе к картинке:
     24 - 14 = 10px визуально, минус 3px полулидинга (14/20) = padding 7px. */
  .caption{ padding-top:7px; align-self:stretch; transform:translateY(-2px); }
  .caption__top{ gap:16px; }
  .caption__title{ font-size:14px; line-height:20px; font-weight:500; }
  .caption__year{ font-size:14px; line-height:20px; }
  /* Название → подпись: 4px. Снизу у названия 3px полулидинга и сверху
     у подписи 3px, поэтому -2px даёт ровно 4px. */
  .caption__sub{ margin:-2px 0 0 0; font-size:14px; line-height:20px; }

  /* Логотип в шапке и в меню. */
  .logo__name{ font-size:12px; line-height:16px; }
  .logo__role{ font-size:12px; line-height:16px; }

  .button{ border-radius:100px; }

  /* footer */
  .footer{
    height:auto;
    padding:24px 24px 32px 24px;
    gap:40px;
    justify-content:flex-start;
  }
  .footer__inner{ padding:0; gap:40px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:40px; }
  .footer__mail,
  .footer__phone{ font-size:16px; line-height:28px; }
  .footer__social{ flex-direction:column; align-items:flex-start; gap:8px; }
  /* Весь текст футера на мобильной — 16px. */
  .footer__label{ font-size:16px; line-height:24px; }
  .footer__link{ font-size:16px; line-height:28px; }
}
/* Выравнивание шапки по верхнему краю — только desktop/tablet.
   Раньше эти правила стояли в конце файла без медиазапроса и перебивали
   мобильные: .nav снова становился display:flex поверх display:none,
   а .header — flex-start вместо center. */
.logo { display:flex; flex-direction:column; align-items:flex-start; margin:0; padding:0; }
.logo__name{ margin:0; }
.logo__role{ margin:0; }
.nav__link{ margin:0; text-decoration:none; }
.caption__title a, .caption__title a:hover{ text-decoration:none; }

@media (min-width:768px){
  .header{ align-items:flex-start; }
  .nav{ display:flex; align-items:flex-start; margin:0; }
  .logo__name{ font-size:16px; line-height:24px; }
  .logo__role{ font-size:16px; line-height:24px; }
}

/* ============================================================
   HOVER ZOOM НА ПРЕВЬЮ ПРОЕКТОВ
   Кадр (figure) обрезает, увеличивается только медиа внутри.
   Размеры/object-fit намеренно не трогаем.
   ============================================================ */
.project-media-link figure{ overflow:hidden; }

.project-media-link img,
.project-media-link video{
  transition: transform .45s ease;
  transform-origin: center center;
  will-change: transform;
}

.project-media-link:hover img,
.project-media-link:hover video,
.project-media-link:focus-visible img,
.project-media-link:focus-visible video{
  transform: scale(1.05);
}

/* На тач-устройствах hover залипает — отключаем */
@media (hover: none){
  .project-media-link:hover img,
  .project-media-link:hover video{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .project-media-link img,
  .project-media-link video{ transition:none; transform:none !important; }
}