/* v69 (05.11.2026, Денис) — правки сайта под стенд: форма связи на телефоне и свёрнутые подробности проектов */

br.v69-m { display: none; }

/* ── форма связи на телефоне: весь блок влезает в экран айфона (390×664 с панелями Safari), пропорции сайта те же ── */
@media all and (max-width: 680px) {
  .section-content--feedback { gap: 14px; }                      /* форма ближе к логотипу (было 32px) */
  .feedback-form__left { padding: 18px 24px 16px; }
  .feedback-form-description h3 { font-size: 34px; line-height: 1; margin-bottom: 8px; }
  .feedback-form-description p { font-size: 20px; line-height: 1.1; }
  br.v69-m { display: inline; }
  .feedback-form__right { padding-top: 12px; padding-bottom: 18px; }
  .form-label { font-size: 16px; }
  .form-input input { padding-top: 13px; padding-bottom: 13px; }
  .form-input--textarea textarea { padding-top: 13px; padding-bottom: 8px; height: 88px; }
  .form-submit { margin-top: 16px; }
  .button--submit { font-size: 20px; }
  .feedback-form__links { margin-top: 8px; }
}

/* ── проекты: подробности свёрнуты, разворачиваются кнопкой без перезагрузки ── */
.v69-more-btn, .v69-less-btn {
  display: inline-flex; align-items: center; gap: 10px; align-self: center;       /* 08.11 (Денис): кнопка по центру, вокруг пустота */
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 20px/1.2 "PF DinText Light", sans-serif; text-transform: uppercase;   /* 11.11.2026 (Денис): тоньше, ближе к текстам сайта (было Regular) */
  -webkit-tap-highlight-color: transparent;
}
/* 11.11.2026, Денис: «отступы между блоками внутри проекта больше, чем от верха блока до заголовка; поджать, но системой на весь сайт».
   Шкала из четырёх шагов, один набор переменных на все страницы (главная, титры, закулисье), на узких экранах шаги меньше:
     s4 — поле секции сверху и снизу (как у титров и «A round of applause»): 100 → 100 → 80
     s3 — между крупными блоками проекта (заголовок → картинки → описание → подробности → кнопка): 64 → 48 → 40
     s2 — внутри блока (описание → теги и цифры; заголовок фичи → текст): 40 → 32 → 24
     s1 — мелкое (надзаголовок → заголовок, ряд тегов): 24 → 16 → 12
   Раньше было 100/100/48/24 на десктопе и 60/12/8 на узких — межблочный шаг равнялся полю секции, а у кнопки был свой +40. */
:root { --v69-s1: 24px; --v69-s2: 40px; --v69-s3: 64px; --v69-s4: 100px; }
@media all and (max-width: 1200px) { :root { --v69-s1: 16px; --v69-s2: 32px; --v69-s3: 48px; --v69-s4: 100px; } }
@media all and (max-width: 680px)  { :root { --v69-s1: 12px; --v69-s2: 24px; --v69-s3: 40px; --v69-s4: 80px; } }
.section-content[class*="project--"] { padding-top: var(--v69-s4); padding-bottom: var(--v69-s4); }
.project { gap: var(--v69-s3); }
.project-main-info, .project-intro, .project-feature { gap: var(--v69-s2); }
.project-header { gap: var(--v69-s1); }
.project-description, .project-feature__description { margin-bottom: 0; }
.v69-more-btn, .v69-less-btn { margin-top: 0; }
/* 11.11.2026 (симулятор iPhone): тап по «Show details» у нижнего края не доходил до кнопки — его ловил прозрачный разделитель
   секций (.section--divider, 100 px). GSAP закрепляет и разделители, и закреплённый разделитель лежит поверх нижней части
   предыдущего проекта. В разделителях нет ничего кликабельного (только подсказка «scroll down»). Так же и на orangelabel.com. */
.section--divider { pointer-events: none; }
.v69-more-btn span, .v69-less-btn span { text-decoration: underline; text-underline-offset: 3px; }
.v69-more-btn:hover span, .v69-less-btn:hover span { text-decoration: none; }
.v69-more-btn i, .v69-less-btn i { display: inline-block; font-size: 16px; line-height: 1; margin-top: -5px;   /* 11.11.2026 (Денис): стрелка на 2px выше — верх по заглавным, низ по базовой линии */ transition: transform .25s ease; }   /* 08.11: стрелка ростом с заглавных букв, по их оси (глиф в шрифте сидит низко) */
.v69-more-btn[aria-expanded="false"] i { transform: rotate(180deg); }      /* icon-arrow смотрит вверх — свёрнуто: вниз */
.v69-more { display: flex; flex-direction: column; gap: inherit; }
.v69-more[hidden] { display: none; }
.v69-more:not([hidden]) { animation: v69-more-in .35s ease both; }
@keyframes v69-more-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .v69-more:not([hidden]) { animation: none; } }
@media all and (max-width: 680px) {
  .v69-more-btn, .v69-less-btn { font-size: 16px; }
  .v69-more-btn i, .v69-less-btn i { font-size: 13px; margin-top: -4px; }
  /* 12.11.2026 (Денис): теги проекта на телефоне — одной строкой с горизонтальной прокруткой, как ряды About, клиенты и картинки:
     лента выходит за поля секции (−16 px) до краёв экрана, полоса прокрутки скрыта, теги не переносятся и не сжимаются. */
  .project-tags { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-left: -16px; margin-right: -16px; padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .project-tags::-webkit-scrollbar { display: none; }
  .project-tag, .project-tag-img { white-space: nowrap; flex-shrink: 0; }
}

/* 11.11.2026, Денис: фиксированные шапка (118 px) и футер (168 px) сайта растянуты на всю ширину и перехватывали клики по всему,
   что оказывалось под ними у верхнего и нижнего края окна (ссылка проекта, кнопка «Show details», меню). Так и на orangelabel.com.
   Сами полосы кликов не ловят, ловят только их ссылки и кнопки. */
.header, .footer { pointer-events: none; }
.header a, .header button, .header .mobile-nav__opener, .footer a, .footer button { pointer-events: auto; }

/* 11.11.2026, Денис: копирайт в футере — на одной вертикали со слоганом в шапке: колонки футера как у .header (1fr 460px 460px 1fr),
   на всех экранах сайта, включая форму связи. */
.footer { grid-template-columns: 1fr 460px 460px 1fr; }

/* 11.11.2026 (Денис, iPhone): по бокам секций и в рамках Safari просвечивал бледно-жёлтый фон (#FFFF92 — закреплённый About под остальными секциями).
   На iOS overflow-x: hidden у html/body не мешает странице расти вширь из-за элементов за правым краем — выдвижное меню .mobile-nav__wrapper
   стоит на right:-80%, форма до появления сдвинута на 1500 px, — и Safari даёт панорамировать, показывая то, что за секциями.
   clip, в отличие от hidden, запрещает и это. Отскок за концом страницы (overscroll) выключен: он показывал сцену титров как «дыру». */
html, body { overflow-x: clip; }
html { overscroll-behavior-y: none; }

/* 11.11.2026 (Денис, iPhone, симулятор iPhone 17 Pro Max / iOS 26.5): откуда Safari 26 берёт цвет своих рамок (строка состояния и адресная
   панель). meta theme-color он не читает. Берёт первый закреплённый (position: fixed) элемент с непрозрачным background-color — так он
   подстраивается под фиксированные шапки сайтов; если такого нет — фон элемента html. На сайте GSAP закрепляет ВСЕ секции (pin), и первой
   с собственным фоном идёт About (.section1, #FFFF92) — потому рамки всегда были бледно-жёлтыми, на какой бы секции ни стоял экран.
   Лечение: у самой секции About фон прозрачный, её жёлтый рисует ::before (внутри своего контекста наложения, чтобы не уйти под первый
   экран); Safari доходит до фона html, а его по текущей секции меняет blocks/v69-bars.js. Стартовый фон html — цвет первого экрана,
   на страницах закулисья — чёрный. Проверка: _ios-test/*.html (A–K) в симуляторе. */
html { background-color: #ffd50e; }
html:has(body.v69-solo) { background-color: #111111; }
body { background-color: transparent; }   /* init.css красит body белым; Safari берёт фон body раньше html — пусть виден html */
/* Полоски-метки для Safari (ставит v69-bars.js): 12 px у края, прозрачность .12 — на сплошном фоне не видны, на фото едва заметный
   оттенок, а Safari читает их background-color как сплошной цвет рамки (прозрачность элемента он не учитывает). Пробу Safari ставит
   на 4–8 px от края, поэтому полоска целиком в экране (у 4,5 px видимых пробу иногда не ловила). Выше всех слоёв сайта, иначе Safari
   попадёт в шапку, футер или плашку cookies. */
.v69-edge { position: fixed; left: 0; right: 0; height: 12px; z-index: 2147483000; opacity: .12; pointer-events: none; background-color: #ffd50e; }
.v69-edge--top { top: 0; }
.v69-edge--bottom { bottom: 0; }
body.v69-solo .v69-edge { background-color: #111111; }
/* (Пробовали прятать фон About и обёртки первого экрана — не помогло: Safari запоминает цвет закреплённого слоя один раз
   и смену не подхватывает; полоски ниже решают это целиком, остальные правки сняты.) */

/* 12.11.2026 (Денис, выбор на scroll-down-variants.html): подсказка «листайте вниз» — «Нить · комета» (3a): бледная линия 1 px, по ней
   сверху вниз бежит тёмный отрезок 34 px с бледным хвостом, 1,4 с. Прежняя мигающая точка убрана. Только transform — без перерасчёта макета. */
.scroll-down__dot { background-color: rgba(34, 22, 3, .28); overflow: hidden; }
.scroll-down__dot:before { display: none; }
.scroll-down__dot:after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(34, 22, 3, 0), #221603);
  animation: v69-thread 1.4s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes v69-thread { 0% { transform: translateY(-34px); } 100% { transform: translateY(50px); } }
@media (prefers-reduced-motion: reduce) { .scroll-down__dot:after { animation-duration: 4s; } }

/* 12.11.2026 (Денис): на телефоне логотип первого экрана (шапка, поле 24) стоял правее текстов секций (.container, 16).
   Шапка на узких экранах — те же 16 px по бокам, сверху как было (24). Десктоп не трогаем. */
@media all and (max-width: 1200px) { .header { padding-left: 16px; padding-right: 16px; } }

/* 12.11.2026 (Денис): телефон лёжа (iPhone 844×390 и похожие) — медиазапрос «телефон» (≤680) не срабатывает, работала планшетная
   вёрстка: сетка шапки 1fr 460px 460px 1fr шире экрана (бургер за правым краем, колонка логотипа схлопнута в 0 — логотипа не видно),
   флажок «Prague» поверх текста. Здесь: шапка в четыре равные колонки, как на телефоне стоя; флажок скрыт; логотип шапки — только
   на первом экране, дальше логотип внутри секций About и формы связи (как стоя); меню на всю высоту с прокруткой. */
@media all and (max-width: 1200px) and (max-height: 520px) {
  .header { grid-template-columns: repeat(4, 1fr); }
  .location { display: none; }
  .logo-mobile { opacity: 1; visibility: visible; margin-left: 16px; }
  .mobile .logo, .mobile .location { opacity: 0; visibility: hidden; }
  .mobile.feedback-section .logo.logo-feedback-section { opacity: 1; visibility: visible; }
  .section-content--02 .logo-mobile { position: static; margin-left: 16px; }
  .mobile-nav__wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .mobile-nav { height: auto; min-height: 100%; gap: 24px; }
  .mobile-nav__wrapper .header-contacts { margin-top: 24px; }
}

/* 12.11.2026 (Денис, iPhone стоя): плашка cookies лежала вплотную к нижнему краю и уходила под полупрозрачную панель Safari — белая
   кайма над панелью. Теперь карточка с полями 16 px, как на десктопе (там она у правого нижнего угла). */
@media all and (max-width: 680px) { .cookies__wrapper { left: 16px; right: 16px; bottom: 16px; } }

/* 12.11.2026 (Денис, iPhone): по кнопкам и лентам тяжело попадать пальцем. На сенсорных экранах — область нажатия больше,
   вёрстка не двигается: поля добавлены внутрь и тут же сняты отрицательными отступами.
   Show/Hide details — 44 px в высоту и шире текста; ленты логотипов и абзацев About, теги проектов — +14 px сверху и снизу. */
@media (pointer: coarse) {
  .v69-more-btn, .v69-less-btn { padding: 14px 24px; margin: -14px -24px; }
  .project-tags { padding-top: 14px; padding-bottom: 14px; margin-top: -14px; margin-bottom: -14px; }
  .clients-list__wrapper .clients-list { top: -14px; padding-top: 14px; padding-bottom: 14px; }
  .project-description a, .project-feature__description a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}

/* 12.11.2026 (Денис, iPhone): About на телефоне — верхний абзац (24 px) и два нижних (18 px) были разного кегля почти без смысла.
   Один размер — 20/30. Нижняя лента была высотой 90 px и обрезала четвёртую строку первого абзаца; теперь высота по содержимому,
   лента по-прежнему едет пальцем до краёв экрана. */
@media all and (max-width: 680px) {
  .about-description p, .about-description__row p { font-size: 20px; line-height: 1.5; }
  .about-description__wrapper { height: auto; }
  .about-description__wrapper .about-description__rows { position: relative; left: auto; right: auto; margin: 0 -16px;
    grid-auto-flow: column; padding-top: 14px; padding-bottom: 14px; margin-top: -14px; margin-bottom: -14px; }
  .about-description__wrapper .about-description__row { width: 300px; }
}

/* 12.11.2026 (Денис, iPhone лёжа): логотип у формы связи висел посередине высоты секции (align-items: center) — ставим к верху, на линию формы. */
@media all and (max-width: 1200px) and (max-height: 520px) {
  .section-content--feedback .logo-mobile { align-self: flex-start; }
}

/* 12.11.2026 (Денис, iPhone лёжа): титры. Кинозал был картинкой «по высоте экрана» (правило телефона ≤760) — по бокам оставались
   бирюзовые поля фона сцены; лёжа картинка на всю ширину, фон сцены чёрный, колонки имён с полями. */
@media (orientation: landscape) {
  .v69-ad2 #v69-egg { background-color: #111111; }
  .v69-ad2 #v69-egg::before { background-size: cover; background-position: 50% 100%; }
}
@media all and (max-width: 1200px) and (max-height: 520px) {
  .v69-ad2 #v69-egg { padding-left: 24px; padding-right: 24px; }
}
/* Боковые поля Safari лёжа (вырез камеры и симметрично справа) Safari красит по закреплённым элементам у края — там стояли
   синий и фиолетовый закреплённого последнего проекта. Боковые полоски-метки того же цвета, что верх (ставит v69-bars.js). */
.v69-edge--left, .v69-edge--right { top: 0; bottom: 0; left: auto; right: auto; width: 12px; height: auto; display: none; }
.v69-edge--left { left: 0; }
.v69-edge--right { right: 0; }
@media (orientation: landscape) and (max-height: 520px) { .v69-edge--left, .v69-edge--right { display: block; } }

/* 12.11.2026 (Денис): логотипы клиентов в About — на одну линию букв. Сдвиги из about-v3/v4 (05.11, замер по буквам),
   на главную тогда не перенесли: у Sourcewell кружок над словом опускал буквы, acct стоял ниже линии на 3 px, pixelfy выше на 0.5. */
.clients-item img[alt="sourcewell"] { transform: translateY(-1.5px); }
.clients-item img[alt="acct"] { transform: translateY(-3px); }
.clients-item img[alt="pixelfy"] { transform: translateY(0.5px); }

/* 12.11.2026 (Денис): «Show details» внизу проекта не нажималась — над ней лежала прозрачная обёртка закрепления (.pin-spacer, её ставит GSAP)
   следующей секции, ещё до того, как сама секция наехала. Обёртка кликов не ловит, ловит только её содержимое. */
.pin-spacer { pointer-events: none; }
.pin-spacer > * { pointer-events: auto; }
.pin-spacer > .section--divider { pointer-events: none; }