:root{--blue:#002FA7;--bg:#F3F3F3;--pad:4.1vw;--serif:'Playfair Display',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--txt:clamp(11px,1.6vw,19px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--blue);font-family:var(--sans);font-size:var(--txt);line-height:1.2;padding-top:max(44px,4.2vw);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:max(44px,4.2vw);background:#fff}
.header .logo{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:block}
.header .logo img{display:block;width:max(70px,7.6vw);height:auto}
.nav a{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--txt);padding:3px 5px;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a:nth-child(1){left:50.4vw}
.nav a:nth-child(2){left:62.4vw}
.nav a:nth-child(3){left:73.6vw}
.nav a:nth-child(4){right:calc(var(--pad) - 5px)}

/* ---------- hero ---------- */
.strip{height:23.2vw;min-height:110px;background-image:url("img/first-photo.png");background-position:0 45%;background-size:100% auto;background-repeat:no-repeat}
.brand{position:relative;z-index:2;padding:0 var(--pad)}
.fit{display:inline-block;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;line-height:.9}
.brand .fit{font-size:30vw;letter-spacing:-.03em}
.brand h1{font-weight:400;margin-top:-.217em;font-size:30vw;line-height:0}
.brand h1 .fit{display:block;width:max-content}
.sub{display:grid;grid-template-columns:50.6% 1fr;margin-top:1.4vw;font-size:var(--txt);line-height:1.17;position:relative;z-index:3}
.pill{display:inline-block;border:1px solid var(--blue);border-radius:50%;padding:.12em .42em;margin-left:.1em;line-height:1.15}

/* ---------- about ---------- */
.about{position:relative;padding:0 var(--pad);margin-top:18.7vw}
.about h2{font-weight:400;line-height:0;font-size:31vw}
.about h2 .fit{letter-spacing:-.02em}
.about p{margin-top:1.6vw;padding-left:1.4vw;font-size:var(--txt);line-height:1.2}

/* ---------- frame ---------- */
.frame{position:relative;width:65.5vw;margin:0 auto;container-type:inline-size;aspect-ratio:1050/1385;padding-bottom:0}
.frame>img{position:absolute;display:block}
.plate{inset:0;width:100%;height:100%;z-index:1}
.stamp{left:6.7cqw;top:36.4cqw;width:85cqw;height:81cqw;transform:rotate(-3deg);z-index:2;filter:brightness(1.07) drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.28))}
.polaroid{left:34.6cqw;top:14.4cqw;width:52.9cqw;height:auto;z-index:3;filter:drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.28))}
.believe{position:absolute;z-index:4;left:22.4cqw;top:51.9cqw}
.believe h3{
  font-family: var(--serif);
  font-style: italic;font-weight:400;
  font-size: 11.3cqw;line-height:.76;
  letter-spacing: -.005em;
  white-space: nowrap
}
.believe h3 small {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--txt);
  letter-spacing: 0;
  margin-left: .5cqw;
}
.believe p {
  font-size: var(--txt);
  line-height: 1.2;
  white-space: nowrap;
  padding-left: 2.2cqw;
}
.believe p:first-of-type{
  margin-top: 3.1cqw
}
.believe p+p{margin-top:1.2em}


/* Чернильный курсор */
.ink-icon {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ink-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 99999;
  pointer-events: none;
  filter: url("#ink-goo");
  mix-blend-mode: difference;
}

.ink-cursor span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Отключаем эффект на сенсорных устройствах */
@media (hover: none), (pointer: coarse) {
  .ink-cursor {
    display: none;
  }
}

/* ===== КУРСОР: сейчас обычный системный =====
   Чернильный курсор выключен. Чтобы вернуть: раскомментируй блок ниже
   и верни скрипт в index.html (там он в комментарии).
@media (hover: hover) and (pointer: fine) {
  html, body, body * { cursor: none !important; }
}
*/
.ink-cursor,.ink-icon{display:none !important}


/* ================= БЕЙДЖ НА ЛЕНТЕ ================= */

/* Невидимая «подвеска»: просто задаёт, где бейдж висит на странице.
   top   — отступ сверху (сейчас сразу под шапкой, не менять)
   left  — где по горизонтали стоит бейдж (в % от ширины экрана)
   width — размер бейджа (в % от ширины экрана)
   --pivot-x — точка, за которую он подвешен: по горизонтали внутри картинки.
               0% = левый край, 50% = середина. Ставь туда, где лента упирается вверх. */
.badge{position:absolute;top:calc(max(44px,4.2vw) - var(--lift));left:23.4vw;width:23vw;z-index:20;pointer-events:none;
  --pivot-x:35%;  /* точка подвеса по горизонтали: где лента уходит вверх (0% = левый край картинки) */
  --lift:10vw;     /* НАСКОЛЬКО ВЫШЕ ПОДНЯТЬ: сколько ленты спрятано под шапкой. Больше = бейдж выше */
}

/* Сама картинка, она и качается. Начальное положение — спрятана выше экрана */
.badge-swing{display:block;width:100%;height:auto;transform-origin:var(--pivot-x) 0;transform:translateY(-150%);will-change:transform;
  filter:drop-shadow(0 .8vw 1.2vw rgba(0,0,0,.25))} /* тень; убери строку, если тень уже в картинке */

/* ================= СТИКЕРЫ ================= */

/* Обёртка вокруг зеркала. Стикеры позиционируются относительно неё */
.frame-wrap{position:relative}

/* Общие правила для всех стикеров (не трогать) */
.sticker{position:absolute;display:block;height:auto;z-index:5;pointer-events:none;will-change:transform}

/* ----- КОНЕЧНОЕ ПОЛОЖЕНИЕ КАЖДОГО СТИКЕРА (где он стоит, когда прилетел) -----
   width  — ширина в % от ширины экрана (vw)
   top    — отступ сверху в % от высоты блока с зеркалом
   left / right — отступ от края экрана. Минус = часть стикера обрезана краем
*/
.s-omg     {left:1vw;  top:10.5%; width:16vw}
.s-question{left:4vw;   top:40%;   width:15vw}
.s-heart   {left:-2vw;  top:64%;   width:14vw}

.s-cursor  {right:9.4vw;top:7%;    width:10.8vw}
.s-cool    {right:1vw; top:44.5%; width:13vw}
.s-flower  {right:3.2vw;top:75.7%; width:17.4vw}
.s-arrow   {right:2.4vw;top:.2vw;  width:10.5vw}   /* стрелка в блоке «связь» */


@media(max-width:700px){
  .nav a:nth-child(1){left:36vw}.nav a:nth-child(2){left:51vw}.nav a:nth-child(3){left:69vw}
  .frame{width:118vw;margin-left:-9vw}
  .sub{grid-template-columns:48% 1fr}
  .badge{left:6vw;width:42vw}   /* на телефоне бейдж крупнее */
}


/* ================= БЕГУЩАЯ СТРОКА (твои SVG) ================= */
.marquee{
  --mh:max(34px,4vw);               /* высота плашек. Больше = крупнее вся строка */
  --gap:calc(var(--mh)*14/62);      /* расстояние между плашками */
  overflow:hidden;
  margin-top:100px;                 /* отступ от последней картинки (блока с зеркалом) */
}
.marquee-track{
  display:flex;align-items:center;
  width:max-content;
  animation:marquee 35s linear infinite;   /* 35s — скорость: больше = медленнее */
}
.marquee-track:has(.marquee-cta:hover){animation-play-state:paused}   /* пока наводишь на кнопку — строка стоит */
.marquee-group{display:flex;align-items:center;flex:none;gap:var(--gap);padding-right:var(--gap)}
.marquee-group img{display:block;flex:none;height:var(--mh);width:auto;max-width:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* кнопка «давайте сотрудничать!»: две картинки друг над другом, при наведении проявляется синяя */
.marquee-cta{position:relative;display:block;flex:none;line-height:0}
.marquee-cta .cta-hover{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s}
.marquee-cta:hover .cta-hover,.marquee-cta:focus-visible .cta-hover{opacity:1}
.marquee-cta:focus-visible{outline:none}

@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ================= Я РАБОТАЛА С НИМИ ================= */
.works{
  padding:0 var(--pad);
  margin-top:11vw;
}
.works h2{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:7.4vw;line-height:1;letter-spacing:-.02em;
  margin-bottom:2.6vw;
}
.works-grid{
  display:grid;
  grid-template-columns:791fr 387fr;
  grid-template-rows:repeat(2,minmax(13.8vw,auto));
  gap:1.3vw;
}

/* плашка с местом работы: только обводка, без наведения */
.work{
  grid-column:1;
  display:grid;
  grid-template-columns:11.5vw 1fr;
  column-gap:3.1vw;
  align-items:center;
  padding:1.6vw 1.8vw;
  color:var(--blue);
  border:1px solid var(--blue);
  border-radius:.55vw;
}
.work img{display:block;width:var(--logo-w,11.5vw);height:auto}   /* ширина логотипа задаётся в HTML через --logo-w */
.work p{font-size:var(--txt);line-height:1.2}                     /* общий размер текста сайта */

/* высокая плашка справа */
.work--tall{
  grid-column:2;grid-row:1 / 3;
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;
  padding:3.4vw 2.1vw 3vw;
}

/* ================= ПЕЧАТЬ ТЕКСТА ПРИ СКРОЛЛЕ ================= */
/* каждая буква — отдельный span (его создаёт typewriter.js) */
.tc{position:relative;opacity:0;transition:opacity .22s ease}
.tc.on{opacity:1}
/* палочка-курсор у последней напечатанной буквы */
.tc.caret::after{
  content:"";position:absolute;left:100%;top:.08em;
  width:max(1px,.07em);height:1.05em;
  margin-left:.04em;background:currentColor;
}
/* овал вокруг «портфолио!» появляется вместе с текстом */
.tw .pill{border-color:transparent;transition:border-color .35s}
.tw .pill.show{border-color:var(--blue)}

/* ================= РАБОТЫ И АРХИВ: общее ================= */
/* Макет рисовался на экране шириной 1600px, поэтому всё считается в vw от него:
   --g    расстояние между колонками (6 колонок на всю ширину)
   --zoom на сколько картинка увеличивается при наведении (1.03 = на 3%) */
.projects,.archive{
  --g:1.22vw;
  --zoom:1.03;
  padding:0 var(--pad);
  scroll-margin-top:max(44px,4.2vw);
}

/* большие заголовки «Работы» и «Архив»: размер подгоняется скриптом под ширину страницы */
.sec-title{font-weight:400;line-height:.8}
.sec-title .fit{display:block;width:max-content;line-height:.8;letter-spacing:-.02em}
.sec-title--bold .fit{font-weight:400}          /* «Архив» жирнее, как в макете. 400 = обычный, 900 = самый жирный */

/* подпись над картинкой (в 1–2 строки), размер = общий размер текста */
.cap{display:block;margin-bottom:.5vw;font-size:var(--txt);line-height:1.2;color:var(--blue);text-align:left}
.cap>span{display:block}

/* рамка картинки/видео */
.media{
  position:relative;display:block;
  aspect-ratio:var(--ar,1);
  overflow:hidden;border-radius:.6vw;
  background:#e5e5e5;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}

/* ================= РАБОТЫ ================= */
.projects{margin-top:12vw}
.projects .sec-title{margin-bottom:5.2vw}
.proj-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:var(--g);
  row-gap:4.75vw;
}
.proj{display:block;min-width:0;color:var(--blue)}
.proj--a{grid-column:1 / 4}      /* два больших сверху */
.proj--b{grid-column:4 / 7}
.proj--c{grid-column:2 / 6}      /* широкий по центру */
.proj--d{grid-column:1 / 3}      /* три в ряд */
.proj--e{grid-column:3 / 5}
.proj--f{grid-column:5 / 7}
.proj .cap{display:flex;justify-content:space-between;gap:1em}
.proj .cap>span{display:block}
.proj:hover .media,.proj:focus-visible .media{transform:scale(var(--zoom))}
.proj:focus-visible{outline:none}

/* большая кнопка «давайте сотрудничать!» */
.cta-big{
  display:flex;align-items:center;justify-content:center;
  width:60.2vw;aspect-ratio:963/524;
  margin:12.2vw auto 0;
  border:1px solid var(--blue);border-radius:50%;
  color:var(--blue);text-align:center;
  font-family:var(--serif);font-style:italic;
  transition:background .3s,color .3s;
}
.cta-text{display:block;line-height:.85;transform:translateY(-.18em)}   /* поднимаем текст, чтобы он стоял ровно по центру овала */
.cta-text>span{display:block}
.cta-text .fit{display:block;width:max-content;margin:0 auto;line-height:.85;letter-spacing:0}
.cta-big:hover,.cta-big:focus-visible{background:var(--blue);color:#fff;outline:none}

/* ================= АРХИВ ================= */
.archive{margin-top:14.2vw;padding-bottom:8vw}
.archive .sec-title{padding-bottom:.24em;margin-bottom:2.6vw}   /* запас под «хвост» буквы р */
.archive__sub{font-size:var(--txt);line-height:1.2;margin-bottom:6.6vw}

/* сетка: 6 колонок, карточки стоят «лесенкой» как в макете.
   Высота блока = положение самой нижней карточки */
.arch-grid{position:relative;height:158vw}
.arch{
  position:absolute;
  left:calc(var(--c)*(100% + var(--g))/6);
  width:calc(var(--s)*(100% + var(--g))/6 - var(--g));
  top:var(--y);
  display:block;padding:0;border:0;background:none;
  font:inherit;color:var(--blue);text-align:left;cursor:pointer;
}
.arch .cap{position:absolute;left:0;bottom:100%;width:100%}   /* подпись стоит над картинкой */
.arch .more{display:none}
.arch:hover{z-index:5}

/* по умолчанию чёрно-белый, при наведении цветной и чуть больше */
.arch .media img,.arch .media video{filter:grayscale(1);transition:filter .35s ease}
.arch:hover .media,.arch:focus-visible .media{transform:scale(var(--zoom))}
.arch:hover .media img,.arch:hover .media video,
.arch:focus-visible .media img,.arch:focus-visible .media video{filter:none}
.arch:focus-visible{outline:none}
.arch:focus-visible .media{outline:1px solid var(--blue);outline-offset:3px}

/* ================= ПОП-АП АРХИВА ================= */
.pop{
  --pw:clamp(320px,50vw,740px);                     /* ширина окна */
  position:fixed;inset:0;z-index:500;
  display:flex;padding:3vw;overflow:auto;
  background:rgba(0,0,0,.42);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.pop.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}
.pop__panel{
  position:relative;margin:auto;
  width:var(--pw);
  padding:calc(var(--pw)*.037) calc(var(--pw)*.043) calc(var(--pw)*.041);
  background:#fff;color:var(--blue);
  border-radius:calc(var(--pw)*.012);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title close" "text text" "media media";
  align-items:start;
  transform:translateY(1.5vw) scale(.985);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.pop.is-open .pop__panel{transform:none}
.pop__title{
  grid-area:title;
  font-family:var(--sans);font-weight:400;
  font-size:calc(var(--txt)*1.4);line-height:1.2;     /* заголовок попапа чуть крупнее текста, как в макете */
  padding-right:1em;
}
.pop__close{
  grid-area:close;
  width:max(28px,calc(var(--pw)*.042));aspect-ratio:1;
  padding:0;border:0;background:none;color:var(--blue);cursor:pointer;
}
.pop__close svg{display:block;width:100%;height:100%}
.pop__text{
  grid-area:text;
  margin-top:calc(var(--txt)*3.4);
  font-size:var(--txt);line-height:1.2;
  white-space:pre-line;
}
.pop__media{grid-area:media;margin-top:calc(var(--txt)*.45);min-width:0}
.pop__media img,.pop__media video{
  display:block;width:100%;height:auto;max-height:62vh;
  object-fit:contain;border-radius:calc(var(--pw)*.012);
}
.pop__media.is-empty{background:#e5e5e5;border-radius:calc(var(--pw)*.012)}

/* вертикальные проекты: картинка слева, текст справа */
.pop__panel.is-portrait{
  --pw:clamp(340px,60vw,880px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"media title" "media text";
  column-gap:calc(var(--pw)*.043);
}
.pop__panel.is-portrait .pop__close{position:absolute;top:calc(var(--pw)*.037);right:calc(var(--pw)*.043)}
.pop__panel.is-portrait .pop__title{padding-right:calc(var(--pw)*.07)}
.pop__panel.is-portrait .pop__media{margin-top:0}
.pop__panel.is-portrait .pop__media img,.pop__panel.is-portrait .pop__media video{max-height:80vh}

/* ================= ШАПКА И ПОДВАЛ (на каждой странице) ================= */
site-header,site-footer{display:block}

/* подвал: синий блок с большой надписью, контактами и копирайтом */
.footer{position:relative;height:26.9vw;background:var(--blue);color:#fff}
.footer__mark{position:absolute;left:var(--pad);top:6.2vw}
.footer__mark span{display:inline-block;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;line-height:.8;letter-spacing:-.02em}
.footer__info{position:absolute;left:67.5vw;top:11.5vw;right:var(--pad)}
.footer__list{list-style:none}
.footer__list li{display:grid;grid-template-columns:14.1vw 1fr;line-height:max(1.25em,2vw)}
.footer a{color:#fff;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.footer a.plain{text-decoration:none}
.footer__copy{margin-top:3.6vw;line-height:1.2}

/* ================= СТРАНИЦА ПРОЕКТА ================= */
.case{
  --r:max(6px,.625vw);             /* скругление: верх первой и низ последней картинки (10px в макете) */
  --case-title:6.5vw;              /* размер названия проекта: больше = крупнее */
  padding:0 var(--pad);
}
/* ссылки-стрелки «← Все работы» и «← На главную» */
.back{display:inline-flex;align-items:center;gap:.4vw;margin-top:1.4vw;font-size:var(--txt);line-height:1.2;color:var(--blue)}
.back svg{display:block;width:max(22px,2.1vw);height:auto;flex:none}
.case__title{
  margin-top:4.6vw;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--case-title);line-height:1.05;letter-spacing:-.02em;
}
.case__sub{margin-top:1.1vw;font-size:var(--txt);line-height:1.2}

/* галерея: картинки и видео идут столбиком встык, ширина у всех одна, высота любая */
.case-gallery{margin-top:2.25vw}
.case-gallery>*{display:block;width:100%;height:auto}
.case-gallery>:first-child{border-radius:var(--r) var(--r) 0 0}
.case-gallery>:last-child{border-radius:0 0 var(--r) var(--r)}
.case-gallery>:only-child{border-radius:var(--r)}
.case-gallery .is-missing{min-height:30vw;background:#e5e5e5}   /* серая заглушка, пока файла нет */

/* кнопки внизу страницы */
.case-btn{
  display:flex;align-items:center;justify-content:center;
  width:20.4vw;aspect-ratio:327/98;margin:3vw auto 0;
  border:2px solid var(--blue);border-radius:50%;
  font-size:var(--txt);color:var(--blue);
  transition:background .3s,color .3s;
}
.case-btn:hover,.case-btn:focus-visible{background:var(--blue);color:#fff;outline:none}
.case-link{
  display:flex;align-items:center;gap:.4em;width:max-content;margin:2.4vw auto 0;
  font-size:var(--txt);color:var(--blue);
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
}
.case-link svg{display:block;width:.7em;height:.7em}
.back--bottom{margin-top:3.75vw;margin-bottom:6.3vw}

/* ================= СТРЕЛКА МЕЖДУ asyadefo И «ОБО МНЕ» ================= */
.scroll-arrow{
  position:absolute;left:50%;top:-14.45vw;
  width:9.06vw;height:auto;margin-left:-4.53vw;
  color:var(--blue);pointer-events:none;
  animation:arrow-bob 2.4s ease-in-out infinite;   /* 2.4s — скорость покачивания */
}
@keyframes arrow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.1vw)}}   /* 1.1vw — размах */
@media (prefers-reduced-motion:reduce){.scroll-arrow{animation:none}}

/* ================= СВЯЗЬ ================= */
.contact{
  --g:1.22vw;
  position:relative;
  padding:0 var(--pad) 17.75vw;
  margin-top:3vw;
  scroll-margin-top:max(44px,4.2vw);
}
.contact__title{font-weight:400;line-height:.9}
.contact__title .fit{display:block;width:max-content;font-style:normal;line-height:.9;letter-spacing:-.01em}
.contact__title .fit i{font-style:italic}
.contact__text{margin-top:.9vw;font-size:var(--txt);line-height:1.2}
.contact__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:5.9vw}
.contact__item{min-width:0}

/* карточка-ссылка: при наведении синяя, текст и стрелка белые */
.ccard{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:476/222;
  padding:.8vw .8vw .75vw;
  border:1.5px solid var(--blue);border-radius:.625vw;
  color:var(--blue);
  transition:background .3s,color .3s;
}
.ccard__title{font-weight:600;font-size:calc(var(--txt)*1.25);line-height:1.2}
.ccard__val{font-size:var(--txt);line-height:1.2}
.ccard__arrow{position:absolute;right:.8vw;top:.8vw;width:2.1vw;height:auto}
.ccard:hover,.ccard:focus-visible{background:var(--blue);color:#fff;outline:none}
.ccard__note{margin-top:1vw;font-size:var(--txt);line-height:1.2;color:rgba(0,47,167,.5)}

/* ================= ТЕЛЕФОН ================= */
@media(max-width:700px){
  .marquee{--mh:max(30px,9vw);margin-top:60px}
  .works{margin-top:16vw}
  .works h2{font-size:15vw;margin-bottom:6vw}
  .works-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:3vw}
  .work{grid-template-columns:24vw 1fr;column-gap:4vw;padding:5vw;border-radius:2vw}
  .work img{width:calc(var(--logo-w,11.5vw)*1.8)}
  .work--tall{grid-column:1;grid-row:auto;display:flex;gap:6vw}

  .projects,.archive{--g:3vw}
  .projects{margin-top:16vw}
  .projects .sec-title{margin-bottom:8vw}
  .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:7vw}
  .proj--a,.proj--b,.proj--d,.proj--e{grid-column:auto}
  .proj--c,.proj--f{grid-column:1 / -1}
  .proj .cap{margin-bottom:1.5vw;flex-wrap:wrap}
  .media{border-radius:1.6vw}
  .cta-big{width:88vw;margin-top:14vw}

  .archive{margin-top:18vw}
  .archive__sub{margin-bottom:9vw}
  .arch-grid{position:static;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12vw 3vw;align-items:start}
  .arch{position:static;width:auto}
  .arch--w{grid-column:1 / -1}
  .arch .cap{position:static;margin-bottom:1.5vw}

  .pop{--pw:92vw;padding:4vw}
  .pop__panel,.pop__panel.is-portrait{--pw:92vw;border-radius:2vw}
  .pop__panel.is-portrait{
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:none;
    grid-template-areas:"title close" "text text" "media media";column-gap:0;
  }
  .pop__panel.is-portrait .pop__close{position:static}
  .pop__panel.is-portrait .pop__title{padding-right:1em}
  .pop__panel.is-portrait .pop__media{margin-top:calc(var(--txt)*.45)}
  .pop__panel.is-portrait .pop__media img,.pop__panel.is-portrait .pop__media video{max-height:62vh}
  .pop__text{margin-top:calc(var(--txt)*2)}
}

@media(max-width:700px){
  .footer{height:auto;padding:12vw var(--pad) 8vw}
  .footer__mark,.footer__info{position:static}
  .footer__info{margin-top:9vw}
  .footer__list li{grid-template-columns:28vw 1fr;line-height:1.7}
  .footer__copy{margin-top:6vw}

  .case{--r:6px}
  .case__title{margin-top:10vw;font-size:18vw}
  .case__sub{margin-top:3vw}
  .case-gallery{margin-top:6vw}
  .case-btn{width:58vw;margin-top:9vw}
  .case-link{margin-top:6vw}
  .back{margin-top:5vw}
  .back--bottom{margin-top:10vw;margin-bottom:14vw}
}

@media(max-width:700px){
  .scroll-arrow{top:-12vw;width:14vw;margin-left:-7vw}
  .contact{margin-top:12vw;padding-bottom:20vw}
  .contact__grid{grid-template-columns:1fr;row-gap:6vw;margin-top:9vw}
  .ccard{aspect-ratio:auto;min-height:36vw;padding:4vw;border-radius:2vw}
  .ccard__arrow{right:4vw;top:4vw;width:7vw}
  .ccard__note{margin-top:2vw}
  .s-arrow{width:22vw;top:0}
}

/* =====================================================
   ПРАВКИ (октябрь): телефон-главная, бургер, бегущая строка, архив
   ===================================================== */

/* архив на телефоне: цветная, пока карточка в середине экрана (см. archive.js) */
.arch.is-seen .media img,.arch.is-seen .media video{filter:none}
.arch.is-seen .media{transform:scale(var(--zoom))}

/* бургер: на компьютере скрыт */
.burger{display:none}
.header{transition:background .3s}
.header .logo{z-index:3;transition:opacity .3s}
html.menu-open{overflow:hidden}

@media(max-width:700px){
  :root{--txt:max(13px,3.5vw)}          /* общий размер текста на телефоне */
  .dbr{display:none}                     /* переносы строк из десктопа на телефоне не нужны */

  /* ---------- шапка + бургер (как в макете: белый кружок с тремя линиями) ---------- */
  .burger{display:block;position:absolute;right:var(--pad);top:50%;width:max(40px,10.4vw);height:max(40px,10.4vw);margin-top:calc(max(40px,10.4vw)/-2);padding:0;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer;z-index:3;transition:background .3s}
  .burger span{position:absolute;left:27.5%;width:45%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s,opacity .3s}
  .burger span:nth-child(1){top:36%}
  .burger span:nth-child(2){top:50%}
  .burger span:nth-child(3){top:64%}
  .header.is-top{background:transparent}
  .header.is-top .logo{opacity:0;pointer-events:none}
  .header.is-top .burger{background:#fff}          /* над синим блоком: белый кружок */
  .header.is-open{background:#fff}
  .header.is-open .logo{opacity:1;pointer-events:auto}
  .header.is-open .burger{background:transparent}
  .header.is-open .burger span:nth-child(1){top:50%;transform:rotate(45deg)}
  .header.is-open .burger span:nth-child(2){opacity:0}
  .header.is-open .burger span:nth-child(3){top:50%;transform:rotate(-45deg)}

  /* меню: белый экран с крупными ссылками */
  .header .nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4vw;padding:0 var(--pad);background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
  .header.is-open .nav{opacity:1;visibility:visible;transition:opacity .3s}
  .header .nav a,.header .nav a:nth-child(n){position:relative;left:auto;right:auto;top:auto;transform:none;width:max-content;padding:0 0 .05em;font-family:var(--serif);font-style:italic;font-size:15vw;line-height:1.05}

  /* ---------- главная: синий блок вместо фото, белый текст, бейдж под ним ---------- */
  .home{padding-top:0}
  .hero{position:relative;z-index:25;display:flex;flex-direction:column;justify-content:flex-end;
    height:94.7vw;                       /* высота синего блока (из макета) */
    padding-bottom:2.8vw;background:var(--blue);color:var(--bg)}
  .hero .strip{display:none}             /* фото на телефоне заменено синим блоком */
  .hero .brand h1{margin-top:0;line-height:.95}
  .acc{display:none}                     /* на телефоне «asyadefo» без ударения, как в макете */
  .hero .sub{grid-template-columns:1fr;row-gap:7.5vw;margin-top:4vw;font-size:4.25vw;line-height:1.2}
  .hero .sub>div:last-child{text-align:right}
  .hero .pill{border-color:var(--bg)}
  .tw .hero .pill{border-color:transparent}
  .tw .hero .pill.show{border-color:var(--bg)}

  /* бейдж: лента выезжает из-под нижней кромки синего блока.
     Точные размеры и положение скрипт считает сам (см. index.html, «бейдж встаёт ровно как в макете»);
     значения ниже — запасные, если картинку не удалось прочитать. */
  .badge{
    --bw:46vw; --px:.5; --pivot-x:50%; --lift:10vw;
    top:calc(94.7vw - var(--lift));
    width:var(--bw);
    left:calc(50vw - var(--bw)*var(--px));
  }
  .badge-swing{pointer-events:auto;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  /* ниже бейджа — стрелка (195vw от верха, как в макете) и «обо мне» */
  .about{margin-top:112.3vw; margin-bottom:20.3vw}
  .scroll-arrow{top:-12vw;width:13.6vw;margin-left:-6.8vw}

  /* ---------- работы: по одной большой в строке ---------- */
  .proj-grid{grid-template-columns:1fr;row-gap:9vw}
  .proj-grid .proj{grid-column:1 / -1}

  /* ---------- «Есть идея? Обсудим.» крупно, в две строки ---------- */
  .contact__title .fit .l1,.contact__title .fit .l2{display:block}

  /* ---------- зеркало для телефона: img/plate-mobile.png (1387×1829) ---------- */
  .frame{width:100vw;margin-left:0;aspect-ratio:1387/1829}

  /* «я считаю…»: весь текст лежит в безопасной зоне белого листка. Зона измерена по plate-mobile.png:
     по ширине от 26,3 до 75,7 cqw, по высоте от 55,5 до 111,4 cqw (cqw = доля ширины зеркала).
     Размеры тоже в cqw, поэтому листок и текст масштабируются вместе. */
  .believe{left:26.5cqw;top:56cqw;width:49cqw}
  .believe h3{font-size:9cqw;line-height:.8;white-space:normal}
  .believe h3 small{display:inline-block;width:24cqw;white-space:normal;font-size:2.8cqw;line-height:1.15;margin-left:1cqw}
  .believe p{white-space:normal;font-size:2.8cqw;line-height:1.2;padding-left:0}
  .believe p:first-of-type{margin-top:2.6cqw}
  .believe p+p{margin-top:.9em}
}

/* ---------- сайт не должен ездить вправо ---------- */
html,body{overflow-x:hidden;max-width:100%}
main{overflow-x:clip}
.picture-fix{display:contents}
.frame picture{display:contents}
.plate{position:absolute;display:block}

/* «связь» на телефоне: стрелка справа от заголовка, не заходит на текст (по макету) */
@media(max-width:1500px){
  .s-arrow{right:2.4vw;top:2vw;width:20.7vw}
  .contact__text{margin-top:4.5vw}
}

/* стикеры на телефоне: положение */
@media (max-width:700px){
  .frame-wrap .s-omg     {left:1vw !important;  right:auto !important; top:-12% !important; width:30vw !important}
  .frame-wrap .s-question{left:2vw !important;  right:auto !important; top:15% !important;  width:20vw !important}
  .frame-wrap .s-heart   {left:3vw !important;  right:auto !important; top:82% !important;  width:20vw !important}

  .frame-wrap .s-cursor  {right:6vw !important; left:auto !important;  top:-15% !important; width:27vw !important}
  .frame-wrap .s-cool    {right:1vw !important; left:auto !important;  top:38% !important;  width:20vw !important}
  .frame-wrap .s-flower  {right:2vw !important; left:auto !important;  top:90% !important; width:30vw !important}
}

/* телефон: всё после стрелки ниже, стрелка остаётся на месте */
@media (max-width:700px){
  .about{padding-top:12vw}
}