.contacts{--U:min(calc(.95 * clamp(.8px, min(100vw / 1900, 100svh / 952), 1.7px)), calc(100vw / 2000));--m:min(calc(100vw / 390), calc(100svh / 560));
  color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased;background:transparent}
.contacts { position: relative; width: 100%; }
.contacts .frame { position: relative; margin: 0 auto; }

.contacts .t { position: absolute; white-space: nowrap; line-height: 1; text-transform: uppercase; font-weight: 400; }

/* подпись «для организаторов» — текстовый шрифт сайта */
.contacts .org {
  position: absolute; white-space: nowrap;
  font-family: "Source Code Variable", "Source Code Pro", ui-monospace, Menlo, monospace;
  font-weight: 400; line-height: 1; letter-spacing: .02em; opacity: .9;
}

/* ссылки — как разделы меню: пунктир, при наведении сплошная */
.contacts .lnk {
  color: inherit; text-decoration: none; cursor: pointer;
  background-image: linear-gradient(90deg, #fff 60%, transparent 60%);
  background-repeat: repeat-x; background-position: 0 100%;
}
.contacts .lnk:hover, .contacts .lnk:focus-visible { background-image: linear-gradient(90deg, #fff 100%, #fff 100%); outline: none; }
.contacts .lnk .ok { display: none; }
.contacts .lnk.copied .val { display: none; }
.contacts .lnk.copied .ok { display: inline; }

/* соцсети: белые плитки из макета, внутри — красные значки */
.contacts .soc { position: absolute; display: flex; }
.contacts .soc a {
  display: grid; place-items: center; flex: none; background: #fff; color: var(--red);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.contacts .soc a svg { width: 58%; height: 58%; display: block; fill: currentColor; }
@media (hover:hover) { .contacts .soc a:hover { box-shadow: 0 0 28px 3px rgba(255,255,255,.95), 0 0 80px 10px rgba(255,255,255,.45); } }
.contacts .soc a:focus-visible { box-shadow: 0 0 26px rgba(255,255,255,.8), 0 0 70px rgba(255,255,255,.35); outline: none; }
.contacts .soc a:active { transform: scale(.94); }

.contacts .rule { position: absolute; background: #fff; }

.contacts .credit {
  position: absolute; white-space: nowrap;
  font-family: "Source Code Variable", "Source Code Pro", ui-monospace, Menlo, monospace;
  font-weight: 400; letter-spacing: .01em; line-height: 1.3;
}

/* ================= ГОРИЗОНТАЛЬНЫЕ ЭКРАНЫ — по макету «деск 7» (2576 px = 2000 единиц) =================
   верх «для организаторов» стоит вровень с верхом «КОНТАКТЫ»; почта, tg, соцсети сдвинуты вниз на 28 */
@media (min-aspect-ratio: 1/1) {
  /* направляющие как у блока «Фильм» (линия над логотипом): 18,65 % кадра 16:9 от каждого края — слева и справа одинаково */
  .contacts { --u16: min(1vw, 1.7778vh); --g: calc(1000 * var(--U) - 31.35 * var(--u16)); }
  .contacts .frame { width: calc(2000 * var(--U)); height: calc(650 * var(--U)); margin-left: calc((100% - 2000 * var(--U)) / 2); }
  .contacts .h-contacts { left: calc(var(--g) - 3 * var(--U)); top: calc(119.9 * var(--U)); font-size: calc(112 * var(--U)); }
  .contacts .org  { right: var(--g); top: calc(122 * var(--U)); font-size: max(13px, calc(24 * var(--U))); text-align: right; }
  .contacts .info { right: var(--g); text-align: right; font-size: max(12px, calc(37.7 * var(--U))); }
  .contacts .l-mail { top: calc(181 * var(--U)); }
  .contacts .l-tg   { top: calc(224 * var(--U)); }
  .contacts .l-soc  { top: calc(314 * var(--U)); }
  .contacts .lnk { background-size: calc(9 * var(--U)) max(2px, calc(3.6 * var(--U))); padding-bottom: calc(3 * var(--U)); }
  .contacts .soc { --s: calc(66 * var(--U)); right: var(--g); top: calc(370 * var(--U)); gap: calc(26.4 * var(--U)); }
  .contacts .soc a { width: var(--s); height: var(--s); border-radius: calc(var(--s) * .12); }
  .contacts .rule { left: var(--g); right: var(--g); top: calc(510 * var(--U)); height: max(2px, calc(9.3 * var(--U))); }
  .contacts .credit { right: var(--g); top: calc(546 * var(--U)); font-size: max(13px, calc(22 * var(--U))); text-align: right; }
}

/* ================= ВЕРТИКАЛЬНЫЕ ЭКРАНЫ — по макету «моб 7» (1171 px = 390 m) ================= */
@media (max-aspect-ratio: 1/1) {
  .contacts .frame { width: calc(390 * var(--m)); height: calc(500 * var(--m)); }
  .contacts .t, .contacts .org { left: 0; right: 0; text-align: center; }
  .contacts .h-contacts { top: calc(72.1 * var(--m)); font-size: calc(52.2 * var(--m)); }
  .contacts .org  { top: calc(138 * var(--m)); font-size: max(11px, calc(12.5 * var(--m))); }
  .contacts .info { font-size: calc(25.8 * var(--m)); }
  .contacts .l-mail { top: calc(160.8 * var(--m)); }
  .contacts .l-tg   { top: calc(190.8 * var(--m)); }
  .contacts .l-soc  { top: calc(251.3 * var(--m)); font-size: calc(52.2 * var(--m)); }
  .contacts .lnk { background-size: calc(5 * var(--m)) max(2px, calc(2.2 * var(--m))); padding-bottom: calc(1.6 * var(--m)); }
  .contacts .soc { --s: calc(53.6 * var(--m)); left: calc(20.3 * var(--m)); right: calc(20.3 * var(--m)); top: calc(321.4 * var(--m)); justify-content: space-between; }
  .contacts .soc a { width: var(--s); height: var(--s); border-radius: calc(var(--s) * .12); }
  /* ДОБАВЛЕНО (в макете нет): линия как на десктопе и подпись */
  .contacts .rule { left: calc(20.3 * var(--m)); right: calc(20.3 * var(--m)); top: calc(424 * var(--m)); height: max(2px, calc(3.2 * var(--m))); }
  .contacts .credit { left: 0; right: 0; text-align: center; top: calc(442 * var(--m)); font-size: max(11px, calc(12 * var(--m))); }
}


@media (orientation: landscape) and (max-height: 500px) { .contacts { --u16: 1vw; } }
@media (prefers-reduced-motion: reduce) { .contacts .soc a { transition: none; } }
/* «Привезти Мувмент в свой город» (блок 3) — раздел «для организаторов» мягко подсвечивается */
.contacts.is-hl .org,.contacts.is-hl .l-mail,.contacts.is-hl .l-tg{animation:orgHl 2.6s ease-out 1}
@keyframes orgHl{0%,100%{text-shadow:none}25%,55%{text-shadow:0 0 14px rgba(255,255,255,.95),0 0 34px rgba(255,255,255,.6)}}
