/* Вариант backstage-ad (03.11.2026): правки арт-директора + правки Дениса. Тексты без согласования не меняем.
   Подключается после egg.css. Сверху «Gratitude / A quarter century on stage», титры кадрами по сетке сайта,
   компьютеры — под титрами (веер / листалка / тихий ряд), муза — мелкой строкой в самом низу, копирайта нет. */

/* шапка блока: общий заголовок крупнее, надзаголовок по шкале сайта */
.v69-ad .v69egg-head .v69egg-title { font-size: 72px; letter-spacing: -.01em; }
.v69-ad .v69egg-kicker { font-size: 16px; }
.v69-ad .v69egg-thanks { margin-top: 40px; }
.v69-ad .v69egg-thanks .intro { grid-template-columns: 1fr; margin-bottom: 140px; }   /* фраза — подзаголовком под общим заголовком */
.v69-ad .v69egg-thanks .intro p { grid-column: 1; font-size: 24px; line-height: 1.35; }

/* титры: кадр = группы по колонкам сетки сайта; заголовок по центру своих колонок, шрифт как был (Regular 17, белый) */
.v69-ad .v69egg-thanks .frame { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; align-items: start; }
.v69-ad .v69egg-thanks .frame + .frame { margin-top: 66px; }   /* 03.11: внутренние отступы — 2/3 от внешних (100) */
.v69-ad .v69egg-thanks .grp + .grp { margin-top: 0; }
.v69-ad .v69egg-thanks .grp.span4 { grid-column: span 4; }
.v69-ad .v69egg-thanks .grp.span2 { grid-column: span 2; }
.v69-ad .v69egg-thanks .grp h3 { display: block; text-align: center; font-family: "PF DinText Regular", sans-serif; font-weight: 400;
  font-size: 17px; letter-spacing: .05em; opacity: 1; margin: 0 0 32px; }
.v69-ad .v69egg-thanks .grp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 24px; align-items: start; }
.v69-ad .v69egg-thanks .names { font-family: "PF DinText Light", sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .06em; }
.v69-ad .v69egg-thanks .names li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; padding-bottom: 10px; }
/* 04.11 (вечер, Денис): ось пробела всегда ровно по центру строки — у 1fr минимум auto, и длинная фамилия (MARTYNENKO, NIKOLAIENKO)
   на 960–1280 растягивала свой трек и сдвигала ось только в своей строке; теперь длинное имя вылезает влево, фамилия — вправо */
.v69-ad .v69egg-thanks .names .fn { display: flex; justify-content: flex-end; }
.v69-ad .v69egg-thanks .names .ln { display: flex; justify-content: flex-start; }
@media (max-width: 1340px) {   /* контейнер сайта 820: имена чуть мельче, чтобы вылеты были редкими */
  body.v69-ad .v69egg-thanks .names { font-size: 14px; letter-spacing: .04em; }
}

/* отступы между частями — 100 px, как вертикальные отступы блоков orangelabel.com (.section-content: padding 100px 0) */
.v69-ad .v69egg-thanks { margin-top: 100px; }
.v69-ad .v69egg-thanks .frame + .frame { margin-top: 66px; }   /* 03.11: внутренние отступы — 2/3 от внешних (100) */
.v69-ad .v69egg-thanks .muse-line { margin: 66px 0 0; padding-bottom: 100px;   /* 11.11.2026, Денис: снизу 100, как у секций сайта */ text-align: center; font-family: "PF DinText Light", sans-serif; font-weight: 300;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.v69-ad.v69-solo .v69egg-thanks { padding-bottom: 0; }

/* 800: превью v1–v4 — цветные, высотой чуть больше прописных надзаголовка, в его строке, без подписи */
.v69-ad .v69egg-kicker { display: flex; align-items: center; }
.v69-peek { display: inline-flex; gap: 6px; margin-left: 14px; }
.v69-peek a { display: block; height: 14px; aspect-ratio: 8 / 5; transition: transform .3s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 100%; }
.v69-peek img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.v69-peek a:hover { transform: scale(2.4); position: relative; z-index: 2; }

/* 800: без тени сверху */
.v69-ad .v69egg-frame::before { display: none; }

/* имена проявляются построчно, когда доходят до экрана */
/* 04.11 (вечер, Денис): построчного появления имён нет — имена видны сразу (скрипт REVEAL в build.py больше ничего не прячет) */

/* ── компьютеры под титрами ── */
.v69-hist { margin-top: 160px; text-align: center; }
.v69-hist-t { font-family: "PF DinText Regular", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 40px; }
.v69-hist .v69h-row { margin: 0; }
.v69-hist .v69h-dev::before { display: none; }          /* без пятен света */
.v69-hist .v69h-dev img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }

/* 1. веер: колода из четырёх компьютеров, при наведении раскрывается, нажатый — открывает сайт той эпохи */
.v69-hist--fan .v69-hist-stage { height: 250px; position: relative; }
.v69-hist--fan .v69h-row { display: block; position: absolute; left: 50%; bottom: 10px; width: 0; height: 0; }
.v69-hist--fan .v69h-ver { position: absolute; left: 0; bottom: 0; width: 230px; margin-left: -115px; transform-origin: 50% 160%;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .3s; }
.v69-hist--fan .v69h-dev { aspect-ratio: auto; height: 190px; }
.v69-hist--fan .v69h-ver:nth-child(1) { transform: rotate(-14deg) translateX(-30px); z-index: 1; }
.v69-hist--fan .v69h-ver:nth-child(2) { transform: rotate(-5deg) translateX(-10px); z-index: 2; }
.v69-hist--fan .v69h-ver:nth-child(3) { transform: rotate(5deg) translateX(10px); z-index: 3; }
.v69-hist--fan .v69h-ver:nth-child(4) { transform: rotate(14deg) translateX(30px); z-index: 4; }
.v69-hist--fan .v69-hist-stage:hover .v69h-ver:nth-child(1) { transform: rotate(-24deg) translateX(-170px); }
.v69-hist--fan .v69-hist-stage:hover .v69h-ver:nth-child(2) { transform: rotate(-8deg) translateX(-60px); }
.v69-hist--fan .v69-hist-stage:hover .v69h-ver:nth-child(3) { transform: rotate(8deg) translateX(60px); }
.v69-hist--fan .v69-hist-stage:hover .v69h-ver:nth-child(4) { transform: rotate(24deg) translateX(170px); }
.v69-hist--fan .v69-hist-stage:hover .v69h-ver { filter: brightness(.55); }
.v69-hist--fan .v69-hist-stage .v69h-ver:hover { filter: none; z-index: 9; }
.v69-hist--fan .v69h-yr { position: absolute; left: 0; right: 0; top: 100%; height: auto; margin: 10px 0 0; justify-content: center; opacity: 0; transition: opacity .3s; }
.v69-hist--fan .v69h-yr::before, .v69-hist--fan .v69h-yr::after { display: none; }
.v69-hist--fan .v69h-yr span { font-size: 15px; }
.v69-hist--fan .v69h-ver:hover .v69h-yr { opacity: .8; }

/* 2. листалка: лента вбок без кнопок — колесо/трекпад, палец или потянуть мышью; края гаснут */
.v69-hist--swipe .v69h-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  padding: 0 calc(50% - 150px); margin: 0 -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.v69-hist--swipe .v69h-row::-webkit-scrollbar { display: none; }
.v69-hist--swipe .v69h-row.drag { cursor: grabbing; scroll-snap-type: none; }
.v69-hist--swipe .v69h-ver { flex: 0 0 300px; scroll-snap-align: center; }
.v69-hist--swipe .v69h-dev { aspect-ratio: 1 / .72; }
.v69-hist--swipe .v69h-dev img { pointer-events: none; }
.v69-hist--swipe .v69h-yr span { font-size: 18px; }

/* 3. тихий ряд: маленькие, приглушённые; кто знает — наведёт и нажмёт */
.v69-hist--quiet { margin-top: 120px; }
.v69-hist--quiet .v69-hist-t { font-size: 12px; letter-spacing: .18em; opacity: .4; margin-bottom: 20px; }
.v69-hist--quiet .v69h-row { width: 420px; margin: 0 auto; column-gap: 12px; }
.v69-hist--quiet .v69h-ver { opacity: .32; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.v69-hist--quiet .v69h-ver:hover { opacity: 1; filter: none; }
.v69-hist--quiet .v69h-yr { height: 20px; margin-top: 8px; opacity: 0; transition: opacity .3s; }
.v69-hist--quiet .v69h-yr::before, .v69-hist--quiet .v69h-yr::after { display: none; }
.v69-hist--quiet .v69h-yr span { font-size: 11px; margin: 0 auto; }
.v69-hist--quiet .v69h-ver:hover .v69h-yr { opacity: 1; }

/* телефон */
@media (max-width: 900px) {
  .v69-ad .v69egg-head .v69egg-title { font-size: 36px; }
  .v69-ad .v69egg-thanks .intro { grid-template-columns: 1fr; margin-bottom: 64px; }
  .v69-ad .v69egg-thanks .intro p { grid-column: 1; font-size: 18px; }
  .v69-ad .v69egg-thanks .frame { grid-template-columns: 1fr; }
  .v69-ad .v69egg-thanks .grp.span4, .v69-ad .v69egg-thanks .grp.span2 { grid-column: auto; }
  .v69-ad .v69egg-thanks .frame .grp + .grp { margin-top: 64px; }
  .v69-ad .v69egg-thanks .frame + .frame { margin-top: 64px; }
  .v69-ad .v69egg-thanks .grp-cols { grid-auto-flow: row; }
  .v69-ad .v69egg-thanks .outro p br { display: none; }
  .v69-hist--fan .v69-hist-stage { height: 230px; }
  .v69-hist--fan .v69h-ver { width: 150px; margin-left: -75px; }
  .v69-hist--fan .v69h-dev { height: 125px; }
  .v69-hist--swipe .v69h-ver { flex-basis: 70vw; }
  .v69-hist--swipe .v69h-row { padding: 0 15vw; }
  .v69-hist--quiet .v69h-row { width: 100%; }
}

/* ── над сценой: второй блок сайта (About) как на orangelabel.com, без анимаций (03.11.2026) ── */
.v69-about { background: #FFFF92; color: #221603; }
.v69-about .section1 { background: #FFFF92; }
.v69-about .section-content--02 { padding-bottom: 120px; }
.v69-about .section-content { overflow: visible; }
.v69-ad .v69egg-head { padding-top: 100px; }   /* 11.11.2026, Денис: сверху 100, как у секций сайта */
/* отдельные страницы (About сверху): над жёлтым родная рамка сайта тёмная, как на сайте над светлыми секциями (классы ставит FRAMETONE) */
body.v69-solo.v69-top-light .header, body.v69-solo.v69-mid-light .location, body.v69-solo.v69-bot-light .footer { color: #221603; opacity: 1; }
.v69-top-light .v69egg-frame::before, .v69-bot-light .v69egg-frame::after { opacity: 0; }
.v69egg-frame::before, .v69egg-frame::after { transition: opacity .3s; }

/* ── варианты заголовка t1–t3 (03.11.2026): превью v1–v4 внутри заголовка, две строки со сдвигом ──
   превью высотой в прописную (72 px ExtraThin → ~52 px), 8:5, без увеличения при наведении */
.v69-tt { display: block; line-height: 1; }
.v69-tt .v69-l1, .v69-tt .v69-l2 { display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; width: max-content; }
.v69-tt .v69-l2 { margin-top: 14px; }
.v69-tt .v69-tw { display: block; flex: none; }
.v69-thumbs { display: flex; gap: 8px; flex: none; }
.v69-thumbs a { display: block; height: .72em; width: calc(.72em * 1.6); flex: none; }
.v69-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* t1: первая строка от края; вторая начинается с картинок, потом «on stage» */
.v69-tt--t1 .v69-l2 .v69-thumbs { margin-right: .3em; }
/* t2: «красная строка» — первая строка сдвинута ровно на ширину картинок, «on stage» встаёт под её начало */
.v69-tt--t2 { --tw: calc(4 * .72em * 1.6 + 3 * 8px + .3em); }
.v69-tt--t2 .v69-l1 { padding-left: var(--tw); }
.v69-tt--t2 .v69-l2 .v69-thumbs { margin-right: .3em; }
/* t3: картинки в конце первой строки; «on stage» сдвинута вправо и встаёт под «century» */
.v69-tt--t3 .v69-l1 .v69-thumbs { margin-left: .3em; }
.v69-tt--t3 .v69-l2 { padding-left: 4.35em; }
@media (max-width: 900px) {
  .v69-tt .v69-l1, .v69-tt .v69-l2 { white-space: normal; flex-wrap: wrap; }
  .v69-tt--t2 .v69-l1 { padding-left: 0; }
}

/* ── «больше артистизма» a1–a4 (03.11.2026): превью — отдельный объект в шве между двумя строками ── */
.v69-tt[class*="v69-tt--a"] { position: relative; }
.v69-tt[class*="v69-tt--a"] > .v69-thumbs a { pointer-events: auto; }

/* a1 — плёнка: четыре кадра на киноленте с перфорацией, лента чуть наклонена и лежит поперёк шва,
   «on stage» уходит вправо — как титр после склейки */
.v69-tt--a1 .v69-l2 { padding-left: 5.2em; margin-top: 34px; }
.v69-tt--a1 > .v69-thumbs { position: absolute; left: 0; top: 1.02em; z-index: 2; gap: 6px; padding: 14px 10px;
  background: #0b0b0b; transform: rotate(-3deg); transform-origin: 0 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  -webkit-mask: radial-gradient(circle 3px at 7px 7px, transparent 98%, #000) 0 0 / 14px 100% repeat-x,
                radial-gradient(circle 3px at 7px calc(100% - 7px), transparent 98%, #000) 0 0 / 14px 100% repeat-x;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.v69-tt--a1 > .v69-thumbs a { height: .5em; width: calc(.5em * 1.6); }

/* a2 — лестница лет: четыре экрана поднимаются ступенькой от 2000 к 2023, последний встаёт на линию «on stage» */
.v69-tt--a2 .v69-l2 { padding-left: 3.75em; margin-top: 14px; }
.v69-tt--a2 > .v69-thumbs { position: absolute; left: 0; bottom: 0; align-items: flex-end; gap: 10px; }
.v69-tt--a2 > .v69-thumbs a { height: .44em; width: calc(.44em * 1.6); }
.v69-tt--a2 > .v69-thumbs a:nth-child(1) { transform: translateY(0); }
.v69-tt--a2 > .v69-thumbs a:nth-child(2) { transform: translateY(-.16em); }
.v69-tt--a2 > .v69-thumbs a:nth-child(3) { transform: translateY(-.32em); }
.v69-tt--a2 > .v69-thumbs a:nth-child(4) { transform: translateY(-.48em); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 28px rgba(255,214,0,.35); }

/* a3 — колода: четыре экрана веером, как карты в руке, вклиниваются между строк над «on stage» */
.v69-tt--a3 .v69-l2 { padding-left: 2.6em; margin-top: 30px; }
.v69-tt--a3 > .v69-thumbs { position: absolute; left: .4em; top: 1.08em; z-index: 2; width: 2.4em; height: .6em; display: block; }
.v69-tt--a3 > .v69-thumbs a { position: absolute; left: 0; top: 0; height: .5em; width: calc(.5em * 1.6); transform-origin: 50% 140%;
  box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15); }
.v69-tt--a3 > .v69-thumbs a:nth-child(1) { transform: rotate(-18deg); }
.v69-tt--a3 > .v69-thumbs a:nth-child(2) { transform: rotate(-6deg) translateX(.12em); }
.v69-tt--a3 > .v69-thumbs a:nth-child(3) { transform: rotate(6deg) translateX(.24em); }
.v69-tt--a3 > .v69-thumbs a:nth-child(4) { transform: rotate(18deg) translateX(.36em); }

/* a4 — титр-подпись: тонкая линейка-«подстрочник» со шкалой лет, экраны стоят на ней, как на авансцене */
.v69-tt--a4 .v69-l2 { padding-left: 4.15em; margin-top: 14px; }
.v69-tt--a4 > .v69-thumbs { position: absolute; left: 0; top: 1.12em; gap: 14px; padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.35); }
.v69-tt--a4 > .v69-thumbs a { height: .4em; width: calc(.4em * 1.6); }
.v69-tt--a4 .v69-yrs { position: absolute; left: 0; bottom: 4px; display: flex; gap: 14px; font-family: "PF DinText Light", sans-serif;
  font-size: 11px; letter-spacing: .1em; line-height: 1; }
.v69-tt--a4 .v69-yrs i { font-style: normal; width: calc(72px * .4 * 1.6); opacity: .7; }

/* ── b1, b2 (03.11.2026): вторая строка начинается с четырёх превью, стоят на линии букв «on stage» ── */
.v69-tt--b1 .v69-l2, .v69-tt--b2 .v69-l2 { align-items: flex-end; margin-top: 16px; }
.v69-tt--b1 .v69-l2 .v69-tw, .v69-tt--b2 .v69-l2 .v69-tw { margin-left: .3em; line-height: .74; }
.v69-tt--b1 .v69-thumbs, .v69-tt--b2 .v69-thumbs { align-items: flex-end; gap: 10px; }
.v69-tt--b1 .v69-thumbs img, .v69-tt--b2 .v69-thumbs img { object-position: 50% 0; }
/* b1 — масштаб: крайние меньше, две средние крупнее (пропорции кадра те же 8:5) */
.v69-tt--b1 .v69-thumbs a:nth-child(1), .v69-tt--b1 .v69-thumbs a:nth-child(4) { height: .5em; width: calc(.5em * 1.6); }
.v69-tt--b1 .v69-thumbs a:nth-child(2), .v69-tt--b1 .v69-thumbs a:nth-child(3) { height: .72em; width: calc(.72em * 1.6); }
/* b2 — высота: ширина у всех одна, крайние низкие, две средние вытянуты вверх */
.v69-tt--b2 .v69-thumbs a { width: 1.05em; }
.v69-tt--b2 .v69-thumbs a:nth-child(1), .v69-tt--b2 .v69-thumbs a:nth-child(4) { height: .5em; }
.v69-tt--b2 .v69-thumbs a:nth-child(2), .v69-tt--b2 .v69-thumbs a:nth-child(3) { height: .92em; }

/* 03.11: без затемнения снизу у рамки — только у этой серии страниц */
.v69-ad .v69egg-frame::after { display: none; }


/* 03.11: логотип сайта внутри жёлтого About (на телефоне .logo-mobile) двоился с логотипом рамки — оставляем только рамку */
.v69-about .logo-mobile { visibility: hidden !important; }   /* место сохраняем — заголовок не подъезжает под рамку */

/* ── 04.11.2026: переносы и отступы (аудит layout.md, «Ошибки стенда»). Префикс body — чтобы перекрыть egg-ad2.css, он подключается позже ── */
/* 04.11 (вечер, Денис): затенения сверху и снизу у рамки нет — убрано */
/* заголовок: без одинокого слова на второй строке */
body.v69-ad .v69egg-head .v69egg-title { font-size: clamp(36px, 5.6vw, 72px); text-wrap: balance; }
/* имена не рвутся посередине (VAN / HAVERE); строка музы — без висячего «A» */
body.v69-ad .v69egg-thanks .names li > * { white-space: nowrap; }
body.v69-ad .v69egg-thanks .muse-line { text-wrap: balance; }
/* 600–900: имена в две колонки, а не одной длинной лентой */
@media (min-width: 600px) and (max-width: 900px) {
  body.v69-ad .v69egg-thanks .grp-cols { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
}
@media (min-width: 1201px) and (max-width: 1279px) {   /* здесь в рамке видны PDF слева и соцсети справа (≤1200 они скрыты, как на сайте) */
}
/* 04.11 (вечер, Денис): теней у текста нет — фон затемнён сам (cin-B2-dark.jpg) */

/* 11.11.2026 (вечер, Денис): флажки v1–v5 — под строкой Даниэллы, по центру, вдвое крупнее; ниже двойной отступ.
   Фраза «To everyone who doubted us…» и копирайт — в футере сайта, в блоке .copyright (на сайте его включает .feedback-section):
   вместо ссылок Privacy/Cookie — фраза тем же шрифтом без подчёркивания, под ней копирайт как есть. Проявляется, когда титры
   докручены до конца (body.v69-end ставит FRAMETONE). */
.v69-flagrow { display: flex; justify-content: center; padding: 0 0 290px; }
.v69-flags { display: inline-flex; gap: 11px; }   /* 11.11 (вечер, Денис): флажки в полтора раза, не вдвое */
.v69-flags a { display: block; line-height: 0; }
.v69-flags svg { display: block; height: 21px; width: auto; }
body.v69c-open .footer .copyright, body.v69-solo .footer .copyright { display: flex; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
body.v69c-open.v69-end .footer .copyright, body.v69-solo.v69-end .footer .copyright { opacity: 1; visibility: visible; }
body.v69c-open .footer .copyright-links, body.v69-solo .footer .copyright-links { display: none; }
.v69-endtext { display: none; text-transform: uppercase; font-family: "PF DinText Regular", sans-serif; white-space: nowrap; }   /* десктоп: одной строкой (шире колонки — заходит в пустую соседнюю) */
/* телефон: на сайте копирайта в футере нет (display none до 1200), у нас он нужен — мельче, чтобы каждая строка влезала в 362 px */
@media (max-width: 760px) { .v69-endtext { white-space: normal; } body.v69c-open .footer .v69-endtext, body.v69c-open .footer .copyright-text,
  body.v69-solo .footer .v69-endtext, body.v69-solo .footer .copyright-text { font-size: 13px; line-height: 1.3; } }
body.v69c-open .v69-endtext, body.v69-solo .v69-endtext { display: block; }

/* 12.11.2026 (Денис): низ сцены. Копирайта под титрами нет совсем (футер сайта с .copyright при открытой сцене скрыт),
   фраза «To everyone who doubted us…» — не серая строка в футере, появлявшаяся в самом конце, а обычный текст сцены сразу под флажками:
   шрифт заголовка «A quarter century on stage», чуть мельче его; поля сверху и снизу крупные. Десктоп и телефон. */
.v69-flagrow { padding-bottom: 0; }
.v69-final { margin: 112px auto 0; padding: 0 24px 220px; max-width: 1040px; text-align: center; color: #fff;
  font-family: "PF DinText Thin", sans-serif; font-weight: 100; text-transform: uppercase;   /* 12.11 (Денис): «кричит» — мельче и тоньше: Thin (между ExtraThin и Light) */
  font-size: clamp(17px, 1.9vw, 28px); line-height: 1.3; letter-spacing: .02em; letter-spacing: -.005em; text-wrap: balance; }
@media (max-width: 760px) { .v69-final { margin-top: 80px; padding-bottom: 160px; } }
body.v69c-open .footer .copyright, body.v69-solo .footer .copyright { display: none !important; }