/* Розовый забег — прототип v4. Десктоп 1440. */

@font-face{
  font-family:"Pink Run Display";
  src:url("assets/PinkRunDisplay.ttf?v=9") format("truetype");
  font-weight:400 700;font-style:oblique 0deg 12deg;font-display:swap;
}
@font-face{
  font-family:"Oranienbaum";
  src:url("assets/Oranienbaum-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --fuchsia:#f4307a;
  --fuchsia-deep:#d9165f;
  --fuchsia-dark:#b80f4e;
  --fuchsia-text:#b80f4e; /* мелкий розовый текст: контраст 5,8:1 на бледном */
  --sky-top:#2b7bd0;
  --sky-mid:#4093e1;
  --sky-low:#7db6ee;
  --blue:#2b6fc4;
  --pale:#fbeef3;
  --white:#fffafc;
  --ink:#2a1a24;
  --muted:#7a6270;
  --rule:#e8cfda;

  --display:"Pink Run Display","Oranienbaum","Times New Roman",serif;
  --serif:"Oranienbaum","Times New Roman",serif;
  --text:"Golos Text",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --gutter:5.5vw;
  --p:0;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--text);
  color:var(--ink);
  background:var(--white);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}

/* ---------- типографика ---------- */
.display,.display-l,.display-m{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:.01em;
}
.display{font-size:clamp(88px,9.3vw,190px)}
.display-l{font-size:clamp(84px,8.4vw,172px)}
.display-m{font-size:clamp(56px,5.6vw,118px)}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;font-weight:500;
}
.lead{font-size:24px;line-height:1.4;max-width:34ch}
.note{font-size:13px;color:var(--muted);max-width:32ch;line-height:1.5}
.arrow{display:inline-block;transition:transform .25s ease}
a:hover .arrow{transform:translateX(5px)}

/* ---------- доступность ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fuchsia-dark);outline-offset:4px;border-radius:4px}
.stage a:focus-visible,.nav a:focus-visible{outline-color:#fff}
.nav.on-ground a:focus-visible{outline-color:var(--fuchsia-dark)}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:999px;padding:16px 28px;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn-solid{background:var(--fuchsia-deep);color:#fff;border:1.5px solid var(--fuchsia-deep)}
.btn-solid:hover{background:var(--fuchsia-dark);border-color:var(--fuchsia-dark)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.btn-ghost:hover{background:#fff;color:var(--sky-top);border-color:#fff}
.btn-lg{padding:22px 40px;font-size:15px}
.btn-outline{background:transparent;color:var(--fuchsia-text);border:1.5px solid var(--fuchsia-text)}
.btn-outline:hover{background:var(--fuchsia-text);color:#fff}
.text-link{
  display:inline-flex;gap:12px;align-items:center;
  font-family:var(--text);font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--fuchsia-text);border-bottom:1px solid transparent;padding-bottom:4px;
}
.text-link:hover{border-bottom-color:var(--fuchsia-text)}

/* ---------- навигация ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px var(--gutter);
  color:#fff;
  transition:color .35s ease;
}
.nav-mark{display:flex;align-items:center;gap:14px}
.nav-pill{display:block;height:35px;width:auto}
.nav-sep{width:1px;height:30px;background:currentColor;opacity:.6}
/* Над «Й» в вордмарке есть кратка, поэтому прописные сидят ниже центра файла на ~6 %: опускаем таблетку и линию к центру букв */
/* Safari сжимает картинки во flex-строке на узких экранах — запрещаем сжатие и держим пропорции таблетки */
.nav-pill,.nav-sep,.nav-word{flex-shrink:0}
.nw{white-space:nowrap}
/* Часы городка: каждая строка отдельно */
.town-hours span{display:block;white-space:nowrap}
.nav-pill{aspect-ratio:74/44}
/* Центр прописных совпадает с центром шапки и кнопки «Участвовать» */
.nav-mark{flex-shrink:0}
.nav.on-ground .nav-sep{background:var(--fuchsia);opacity:.5}
/* в файлах wordmark-*-nav.svg снизу добавлено место, равное месту над буквами под кратку «Й»:
   центр файла = центр прописных, поэтому обычное выравнивание по центру ставит всё на одну линию */
.nav-word{position:relative;display:block;width:157px;height:46px}
.nav-word img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease}
.nav-mark .mark-pink{opacity:0}
.nav-links{display:flex;gap:40px;margin-left:auto;margin-right:48px}
.nav-links a{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:500;
  opacity:.9;transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1}
.nav .btn-solid{padding:13px 24px;font-size:13px}
.nav.on-ground{color:var(--ink)}
.nav.on-ground .mark-white{opacity:0}
.nav.on-ground .mark-pink{opacity:1}

/* ---------- сцены (кино) ---------- */
.scene{position:relative;height:calc(var(--len) * 100vh);height:calc(var(--len) * 100svh)}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  isolation:isolate;
}
.ly{position:absolute;will-change:transform,opacity;pointer-events:none}
img.ly,.ly img{max-width:none}

/* Экран 1. Небо */
.sky-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(18,48,110,.34) 0%,rgba(18,48,110,.18) 38%,rgba(18,48,110,0) 60%),
    linear-gradient(180deg,rgba(18,48,110,.28) 0%,rgba(18,48,110,0) 18%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 100%);
}
.clouds-mid{
  right:-2vw;top:-2vh;width:34vw;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 60% 45%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 60% 60% at 60% 45%,#000 40%,transparent 100%);
  opacity:.9;
}
.billboard{
  width:min(68vw,137vh);height:auto;
  right:-7vw;bottom:0;top:auto;
  transform-origin:52.5% 28.3%;
  filter:drop-shadow(0 40px 80px rgba(20,40,90,.25));
}
.clouds-fg{height:auto}
/* левое — PNG с альфой Андрея, без масок и градиентов */
.clouds-fg-left{left:-6vw;bottom:-7vh;width:78vw;transform-origin:20% 100%}
/* правое — то же облако зеркально, меньше и ниже: одна семья облаков */
.clouds-fg-right{right:-12vw;bottom:-16vh;width:52vw;transform-origin:100% 100%;opacity:.92}
.clouds-fg-right img{display:block;width:100%;height:auto}
.hero-copy{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-52%);
  color:#fff;z-index:3;max-width:58vw;
}
.hero-copy .display{text-shadow:0 2px 40px rgba(20,50,110,.25)}
.hero-meta{
  display:flex;gap:0;margin:36px 0 14px;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
}
.hero-meta span+span::before{content:"·";margin:0 16px;opacity:.6}
.hero-sub{font-size:21px;line-height:1.45;margin-bottom:40px;max-width:44ch}
.scroll-hint{
  position:absolute;right:var(--gutter);bottom:34px;z-index:3;
  display:flex;align-items:center;gap:14px;color:#fff;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.8;
}
.scroll-hint span{display:block;width:64px;height:1px;background:#fff;transform-origin:left;animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:0}}
.veil{position:absolute;inset:0;background:var(--fuchsia);opacity:0;z-index:4;pointer-events:none}

/* Экраны 2–3. Внутри плаката (та же сцена) */
.inside-bg{
  inset:0;z-index:5;opacity:0;
  background:linear-gradient(180deg,#ee2b6f 0%,#e61f63 55%,#dd165a 100%);
}
.flamingo{
  z-index:6;opacity:0;
  left:50%;top:50%;width:112vw;height:auto;min-height:100vh;min-height:100svh;object-fit:cover;
  transform:translate(-50%,-50%) scale(1.12);
  transform-origin:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%);
}
.scene-film .copy{
  position:absolute;color:#fff;z-index:7;opacity:0;
  will-change:transform,opacity;
}
.scene-film .copy .eyebrow{color:rgba(255,255,255,.7)}
.copy-a{left:var(--gutter);top:17vh;max-width:40vw}
.copy-a .lead{font-family:var(--display);font-size:44px;line-height:1.08;max-width:20ch;font-weight:400}
.copy-b,.copy-c{right:var(--gutter);width:34vw}
.copy-b{top:18vh}
.copy-c{top:54vh}
.copy-b p,.copy-c p{font-size:17px;line-height:1.55;margin-top:18px;max-width:40ch;opacity:.95}
.copy-b .display-m,.copy-c .display-m{font-size:clamp(60px,6.2vw,92px)}

/* ---------- земля ---------- */
.ground{position:relative;z-index:6}
.wrap{padding:0 var(--gutter)}

.race{background:linear-gradient(180deg,transparent 0,transparent 18vh,var(--white) 18vh);padding:0 0 140px;overflow:visible}
.race .wrap{position:relative;z-index:2}
/* розовые облака на стыке кино и земли: верх прозрачный (сквозь него видна сцена), низ уходит в белый */
.landing-clouds{
  position:absolute;left:0;right:0;height:40.5vw;top:calc(18vh - 40.5vw);z-index:1;pointer-events:none;
  background:url("assets/clouds-pink2.webp") center bottom/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
}
.count{padding:calc(18vh + 80px) 0 90px;border-bottom:1px solid var(--rule)}
.count-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.count-row{display:flex;gap:6vw;align-items:baseline}
.count-unit{display:flex;flex-direction:column}
.count-unit b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(120px,12vw,240px);line-height:.85;color:var(--fuchsia);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.count-unit span{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.count-sec b{color:var(--ink);opacity:.35}

.race-head{padding:110px 0 70px}
.race-head .display-l{color:var(--fuchsia)}
.race-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:6px}
.count-static{font-size:22px;font-weight:500}

.facts{display:grid;grid-template-columns:1fr 1fr;column-gap:6vw}
.facts>div{
  display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--rule);
}
.facts dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:8px}
.facts dd{font-size:24px;line-height:1.25;font-weight:500}
.facts dd small{display:block;font-family:var(--text);font-size:13px;color:var(--muted);margin-top:6px}
.todo{color:var(--fuchsia-text)!important}

.come{background:var(--pale);padding:150px 0 140px;overflow:hidden}
.come .display-l{color:var(--ink);margin-bottom:70px}
.come .display-l em{font-style:normal;color:var(--fuchsia)}
.come-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;margin-bottom:70px}
.come-list{display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--display);font-size:clamp(40px,4.2vw,58px);text-transform:uppercase;line-height:1.05;color:var(--ink)}
.come-list li{white-space:nowrap;margin-right:.32em}
.come-list li::after{content:"•";color:var(--fuchsia);margin-left:.32em}
.come-list li:last-child{margin-right:0}
.come-list li:last-child::after{content:none}

.next{background:var(--white);padding:110px 0 120px;border-top:1px solid var(--rule)}
.next .display-m{margin-bottom:48px;color:var(--ink)}
.next-list{max-width:640px}
.next-list li{
  display:flex;gap:28px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:32px;text-transform:uppercase;
}
.next-list li span{font-family:var(--text);font-size:12px;letter-spacing:.2em;color:var(--fuchsia);font-weight:500;width:32px}
.next-list li i{font-family:var(--text);font-style:normal;font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-left:auto}

.foot{background:var(--ink);color:#fff;padding:60px 0}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:40px}
.foot-logos{display:flex;align-items:center;--lb:min(52px,4.1vw);gap:calc(.9 * var(--lb))}
.foot-logos a{display:block;transition:opacity .2s ease}
.foot-logos a:hover{opacity:.7}
.foot-logos img{display:block;height:auto;filter:brightness(0) invert(1);opacity:.9}
.foot-logos img.keep-color{filter:none;opacity:1}
.foot-note{font-size:12px;color:rgba(255,255,255,.55);max-width:44ch;line-height:1.5;text-align:right}
/* подпись авторов: ссылка на Telegram Андрея, пробегающая линия как у остальных текстовых ссылок */
.foot-credit-line{display:inline-block;color:rgba(255,255,255,.7)}
.foot-credit{position:relative;display:inline-block;color:rgba(255,255,255,.92);text-decoration:none;padding-bottom:2px}
.foot-credit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;transform-origin:right}
.foot-credit:hover{color:#fff}
.foot-credit:hover::after{animation:link-run 1s cubic-bezier(.65,0,.35,1)}

/* ---------- экраны 6–7: кино ---------- */
.steps-bg{position:absolute;inset:0;background:linear-gradient(180deg,#2a72cc 0%,#3f8fe0 45%,#7fb6ec 100%)}
.frame{
  left:50%;top:50%;width:100vw;height:100vh;height:100svh;object-fit:cover;object-position:62% 50%;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
}
.frame-a{
  left:auto;right:0;top:0;transform:none;width:auto;height:100vh;height:100svh;object-fit:cover;object-position:60% 0%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
  transform-origin:100% 100%;
}
.step{position:absolute;inset:0}
.step-b{z-index:2}
.frame-b{opacity:0}
.steps-shade{position:absolute;inset:0;z-index:2;pointer-events:none}
.shade-a{background:linear-gradient(90deg,rgba(18,48,110,.7) 0%,rgba(18,48,110,.45) 38%,rgba(18,48,110,0) 64%),linear-gradient(0deg,rgba(18,48,110,.45) 0%,rgba(18,48,110,0) 50%)}
.shade-b{background:linear-gradient(90deg,rgba(214,20,95,.72) 0%,rgba(214,20,95,.4) 38%,rgba(214,20,95,0) 60%);opacity:0}
.scene-steps .copy{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:44vw;color:#fff;z-index:3;opacity:0}
.copy-step{top:46%}
.scene-steps .copy .eyebrow{color:rgba(255,255,255,.75)}
.scene-steps .copy p:not(.eyebrow){font-size:18px;line-height:1.55;margin-top:26px;max-width:40ch;text-shadow:0 1px 20px rgba(20,50,110,.3)}
.scene-steps .display-l{text-shadow:0 2px 40px rgba(20,50,110,.3)}
.copy-step .display-l{font-size:clamp(96px,10vw,146px)}

/* ---------- экран 8: городок ---------- */
.town{background:var(--pale);padding:150px 0 140px}
.town-head{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:70px}
.town-head .display-l{color:var(--ink)}
.town-head .lead{padding-bottom:12px}
.town-list details{border-top:1px solid var(--rule)}
.town-list details:last-child{border-bottom:1px solid var(--rule)}
.town-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  padding:26px 0;
}
.town-list summary::-webkit-details-marker{display:none}
.t-name{font-family:var(--display);font-size:clamp(44px,4.6vw,64px);text-transform:uppercase;line-height:1;color:var(--ink);transition:color .2s}
.town-list summary:hover .t-name,.town-list details[open] .t-name{color:var(--fuchsia)}
.t-meta{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;position:relative;padding-right:34px}
.t-meta::after{content:"+";position:absolute;right:0;top:-6px;font-family:var(--serif);font-size:28px;color:var(--fuchsia);transition:transform .25s}
.town-list details[open] .t-meta::after{transform:rotate(45deg)}
.t-meta:has(.t-logo){display:flex;align-items:center;min-height:28px}
.t-logo{display:block;height:26px;width:auto}
.t-logo-word{height:18px}
.t-body{padding:0 0 34px;max-width:64ch;display:grid;gap:12px}
.t-body p{font-size:18px;line-height:1.5}
.t-with{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
em.todo{font-style:normal;color:var(--fuchsia-text)}

/* ---------- экран 9: программа ---------- */
.program{background:var(--white);padding:130px 0 120px}
.program-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;gap:40px}
.program-head .display-l{color:var(--fuchsia)}
.filters{display:flex;gap:10px;padding-bottom:14px}
.chip{
  font:500 13px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  padding:12px 20px;border-radius:999px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.chip:hover{border-color:var(--fuchsia)}
.chip.is-on,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:focus-visible,.town-list summary:focus-visible,.questions summary:focus-visible{outline:2px solid var(--fuchsia);outline-offset:4px}
.sched-wrap{overflow-x:auto}
.sched{width:100%;border-collapse:collapse}
.sched th{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:500;padding:0 24px 16px 0;border-bottom:1px solid var(--ink)}
.sched td{padding:22px 24px 22px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:17px;line-height:1.45}
.sched td:first-child{font-family:var(--display);font-size:32px;line-height:1;white-space:nowrap;color:var(--fuchsia);font-variant-numeric:tabular-nums;width:150px}
.sched td:nth-child(2){font-weight:500;width:28%}
.sched td:nth-child(3){color:var(--muted);width:22%}
.sched tr[hidden]{display:none}
.sched .todo{color:var(--fuchsia-text)}
.program .note{margin-top:28px}

/* ---------- экран 10: маршрут ---------- */
.route{background:var(--pale);padding:130px 0 130px}
.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.route-img{display:block;border-radius:24px;overflow:hidden;background:#fff}
.route-img img{display:block;width:100%;height:auto}
.route-img{position:relative}
.map-zoom{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--fuchsia-text);font:500 14px/1 var(--text);transition:background .2s ease,color .2s ease}
.route-img:hover .map-zoom{background:var(--fuchsia-text);color:#fff;border-color:var(--fuchsia-text)}
/* Текстовая ссылка: линия под текстом «пробегает» — уходит вправо и возвращается слева. Для всех текстовых ссылок сайта; текст в <span class="u">, стрелка вне его */
.map-link,.link{display:inline-block;margin-top:22px;color:var(--fuchsia-text);font:400 15px/1.4 var(--text);text-decoration:none}
.map-link .u,.link .u{position:relative;display:inline-block;padding-bottom:5px}
.map-link .u::after,.link .u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right}
.map-link:hover .u::after,.link:hover .u::after{animation:link-run 1s cubic-bezier(.65,0,.35,1)}
@keyframes link-run{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}55%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.map-link .ext,.link .ext{display:inline-block;margin-left:6px;vertical-align:1px}
.route-map .loop{fill:none;stroke:var(--fuchsia);stroke-width:14;stroke-linecap:round;opacity:.18}
.route-map .loop-dash{fill:none;stroke:var(--fuchsia);stroke-width:4;stroke-dasharray:14 12;stroke-linecap:round}
.route-map .mgu{fill:var(--ink);opacity:.85}
.route-map .mgu-label,.route-map .pt text{font:500 12px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;fill:var(--ink);text-anchor:middle}
.route-map .pt circle{fill:var(--white);stroke:var(--fuchsia);stroke-width:4}
.route-map .start circle{fill:var(--fuchsia)}
.route-map .water circle{stroke:var(--blue)}
.route-map .km{font:400 72px/1 var(--display);text-transform:uppercase;fill:var(--fuchsia);text-anchor:middle;opacity:.9}
.map-note{font-size:13px;color:var(--muted);margin-top:18px;max-width:52ch;line-height:1.5}
.route-info .display-l{color:var(--ink);margin-bottom:40px;font-size:max(64px,6.4vw)}
.facts-1{grid-template-columns:1fr}

/* ---------- экран 11: вопросы ---------- */
.faq{background:var(--white);padding:130px 0 140px}
.faq-grid{display:grid;grid-template-columns:37% 1fr;gap:6vw}
.faq-head .display-l{color:var(--fuchsia);margin-bottom:24px}
.faq-head p{font-size:16px;color:var(--muted);max-width:30ch}
.questions details{border-top:1px solid var(--rule)}
.questions details:last-child{border-bottom:1px solid var(--rule)}
.questions summary{list-style:none;cursor:pointer;font-size:22px;line-height:1.3;font-weight:500;padding:22px 48px 22px 0;position:relative}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:0;top:18px;font-size:32px;color:var(--fuchsia);transition:transform .25s}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions details>div{padding:0 0 26px;max-width:60ch}
.questions p{font-size:17px;line-height:1.5}

/* ---------- экран 12: старт ---------- */
.frame-start{
  left:50%;top:50%;width:100vw;height:100vh;height:100svh;object-fit:cover;object-position:60% 50%;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
}
.scene-final .stage{background:linear-gradient(180deg,#5b9de0 0%,#f2b9cd 60%,#e6a0bb 100%)}
.final-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,20,95,.55) 0%,rgba(214,20,95,.25) 40%,rgba(214,20,95,0) 65%)}
.copy-final{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);color:#fff;z-index:3;opacity:0}
.copy-final .display{font-size:clamp(84px,8.6vw,124px)}
.final-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:44px}
.text-link-light{color:#fff;font-size:15px}
.text-link-light:hover{border-bottom-color:#fff}

/* ---------- reduced motion ----------
   Сцены управляются скроллом, поэтому остаются; убираем только самопроизвольное движение. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-hint span{animation:none;transform:none;opacity:1}
}

/* =====================================================================
   Планшет 768–1023
   ===================================================================== */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  :root{--gutter:5vw}
  .hero-copy{max-width:66vw}
  .billboard{width:min(80vw,137vh);right:-14vw;bottom:0}
  .facts{grid-template-columns:1fr}
  .facts>div{grid-template-columns:160px 1fr}
  .route-grid,.faq-grid,.town-head,.come-grid{grid-template-columns:1fr}
  .copy-b,.copy-c{width:44vw}
  .scene-steps .copy{width:56vw}
}

/* =====================================================================
   Телефон до 767
   ===================================================================== */
@media (max-width:767px){
  :root{--gutter:20px}
  body{line-height:1.4}
  .display{font-size:clamp(46px,14.5vw,64px)}
  .display-l{font-size:clamp(40px,12.5vw,56px)}
  .display-m{font-size:clamp(34px,10vw,44px)}
  .lead{font-size:18px}
  .eyebrow{font-size:11px;margin-bottom:14px}
  .btn{padding:14px 22px;font-size:12px}
  .btn-lg{padding:18px 28px;font-size:13px}
  .text-link{font-size:13px}

  /* навигация: вордмарк + кнопка; на земле — подложка, чтобы не наезжать на текст */
  .nav{padding:14px var(--gutter);transition:color .35s ease,background .35s ease}
  .nav.on-ground{background:rgba(255,250,252,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  main > section{scroll-margin-top:60px}
  .nav-mark{gap:10px}
  .nav-pill{height:26px}
  .nav-sep{height:22px}
  .nav-word{width:118px;height:34.6px}
  .nav-links{display:none}
  .nav .btn-solid{padding:11px 16px;font-size:11px}

  /* первый экран */
  .hero-copy{left:var(--gutter);right:var(--gutter);top:14svh;transform:none;max-width:none;z-index:3}
  .hero-meta{margin:18px 0 10px;font-size:11px;letter-spacing:.22em}
  .hero-meta span+span::before{margin:0 10px}
  .hero-sub{font-size:17px;margin-bottom:22px;max-width:30ch}
  .hero-sub br{display:none}
  .billboard{width:150vw;right:auto;left:-25vw;bottom:0;top:auto}
  .clouds-mid{display:none}
  .clouds-fg-left{left:-40vw;bottom:-6svh;width:150vw}
  .clouds-fg-right{display:none}
  .scroll-hint{display:none}

  /* внутри плаката */
  .flamingo{width:150vw;height:auto;min-width:0;min-height:0;left:-4vw;top:10svh;transform:none;transform-origin:50% 0;-webkit-mask-image:none;mask-image:none}
  .copy-a{left:var(--gutter);right:var(--gutter);top:auto;bottom:10svh;max-width:none}
  .copy-a .lead{font-size:clamp(34px,10vw,42px);max-width:none}
  .copy-b,.copy-c{left:var(--gutter);right:var(--gutter);width:auto}
  .copy-b,.copy-c{top:auto;bottom:10svh}
  .copy-b p,.copy-c p{font-size:15px;margin-top:12px}
  .copy-b .display-m,.copy-c .display-m{font-size:clamp(36px,11vw,46px)}

  /* земля: всё о забеге */
  .race{background:linear-gradient(180deg,transparent 0,transparent 16svh,var(--white) 16svh);padding-bottom:80px}
  .landing-clouds{height:93vw;top:calc(16svh - 93vw);background-size:230% auto;background-position:62% bottom;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%)}
  .count{padding:calc(16svh + 56px) 0 48px}
  .count-grid{flex-direction:column;align-items:flex-start;gap:28px}
  .count-row{flex-wrap:wrap;gap:20px 28px}
  .count-unit b{font-size:clamp(64px,19vw,84px)}
  .count-unit span{font-size:11px;margin-top:8px}
  .race-head{padding:56px 0 28px}
  .facts{grid-template-columns:1fr;column-gap:0}
  .facts>div{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .facts dd{font-size:19px}

  /* всё равно приходи */
  .come{padding:80px 0 80px}
  .come .display-l{margin-bottom:36px}
  .come-grid{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
  .come-list{font-size:clamp(26px,8vw,34px);gap:6px 0}

  /* первый шаг / среди своих: без кино, два статичных экрана, текст внизу на градиенте */
  .scene-steps{height:auto!important}
  .scene-steps .stage{position:relative;height:auto;overflow:visible}
  .step{position:relative;height:100svh;overflow:hidden}
  .frame,.frame-a{left:50%;right:auto;top:50%;width:100vw;height:100svh;transform:translate(-50%,-50%)!important;object-position:64% 30%;-webkit-mask-image:none;mask-image:none;transform-origin:50% 50%;opacity:1!important}
  .frame-b{object-position:52% 40%}
  .steps-shade{opacity:1!important}
  .scene-steps .copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:8svh;width:auto;transform:none!important;opacity:1!important}
  .copy-step{top:auto}
  .scene-steps .copy p:not(.eyebrow){font-size:15px;margin-top:14px;max-width:none}
  .copy-step .display-l{font-size:clamp(44px,13vw,60px)}
  .shade-a{background:linear-gradient(0deg,rgba(18,48,110,.94) 0%,rgba(18,48,110,.7) 34%,rgba(18,48,110,0) 62%),linear-gradient(180deg,rgba(18,48,110,.45) 0%,rgba(18,48,110,0) 16%)}
  .shade-b{background:linear-gradient(0deg,rgba(150,10,70,.94) 0%,rgba(150,10,70,.7) 34%,rgba(150,10,70,0) 62%),linear-gradient(180deg,rgba(60,10,40,.45) 0%,rgba(60,10,40,0) 16%)}

  /* городок */
  .town{padding:80px 0 70px}
  .town-head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  .town-head .lead{padding-bottom:0}
  .town-list summary{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0}
  .t-name{font-size:clamp(28px,8.5vw,36px)}
  .t-meta{white-space:normal;font-size:11px;padding-right:34px}
  /* «+» у правого края строки, а не сразу после подписи — в каждой карточке на одном месте */
  .town-list summary{position:relative;padding-right:40px}
  .t-meta{position:static;padding-right:0}
  .t-meta::after{top:50%;right:0;transform:translateY(-50%)}
  .town-list details[open] .t-meta::after{transform:translateY(-50%) rotate(45deg)}
  .t-body{padding-bottom:22px}
  .t-body p{font-size:16px}

  /* программа: таблица как лента */
  .program{padding:70px 0 60px}
  .program-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:28px}
  .filters{flex-wrap:wrap;padding-bottom:0}
  .chip{padding:10px 14px;font-size:11px}
  .sched thead{display:none}
  .sched,.sched tbody,.sched tr,.sched td{display:block;width:auto}
  .sched tr{padding:16px 0;border-bottom:1px solid var(--rule)}
  .sched td{padding:0;border:0;width:auto!important}
  .sched td:first-child{font-size:28px;margin-bottom:8px}
  .sched td:nth-child(2){font-size:17px;margin-bottom:4px}
  .sched td:nth-child(3){font-size:13px;margin-bottom:6px}
  .sched td:nth-child(4){font-size:15px}
  .sched tr[hidden]{display:none}

  /* маршрут */
  .route{padding:70px 0 70px}
  .route-grid{grid-template-columns:1fr;gap:32px}
  .route-info .display-l{margin-bottom:24px}

  /* вопросы */
  .faq{padding:70px 0 80px}
  .faq-grid{grid-template-columns:1fr;gap:24px}
  .questions summary{font-size:18px;padding:16px 40px 16px 0}
  .questions summary::after{top:12px;font-size:26px}
  .questions p{font-size:15px}

  /* финал: без кино */
  .scene-final{height:auto!important}
  .scene-final .stage{position:relative;height:100svh}
  .frame-start{object-position:58% 50%;transform:translate(-50%,-50%)!important}
  .final-shade{background:linear-gradient(0deg,rgba(150,10,70,.94) 0%,rgba(150,10,70,.7) 36%,rgba(150,10,70,0) 66%),linear-gradient(180deg,rgba(60,10,40,.45) 0%,rgba(60,10,40,0) 16%)}
  .copy-final{left:var(--gutter);right:var(--gutter);top:auto;bottom:8svh;transform:none!important;opacity:1!important}
  .copy-final .display{font-size:clamp(44px,13vw,60px)}
  .final-actions{flex-direction:column;align-items:flex-start;gap:16px;margin-top:24px}

  /* подвал */
  .foot{padding:40px 0}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:44px}
  /* логотипы сеткой в две колонки: второй столбец начинается с одной линии */
  .foot-logos{display:grid;grid-template-columns:1fr 1fr;--lb:54px;gap:30px 24px;width:100%}
  .foot-note{text-align:left;max-width:none}
}

/* =====================================================================
   Низкие окна (широкий монитор, невысокое окно браузера)
   ===================================================================== */
@media (min-width:768px) and (max-height:760px){
  .display{font-size:clamp(64px,11vh,120px)}
  .hero-copy{top:54%}
  .hero-meta{margin:16px 0 8px}
  .hero-sub{margin-bottom:20px;font-size:18px}
  .nav{padding:18px var(--gutter)}
  .copy-a{top:15vh}
  .copy-b{top:14vh}.copy-c{top:52vh}
  .copy-b .display-m,.copy-c .display-m{font-size:clamp(44px,8vh,80px)}
  .scene-steps .display-l,.copy-final .display{font-size:clamp(56px,11vh,120px)}
}

/* =====================================================================
   Большие мониторы: всё масштабируется от ширины в пропорции макета 1440
   (1 px макета = 0.0694 vw). Потолок — 2600 px, дальше не растёт.
   ===================================================================== */
@media (min-width:1800px){
  :root{--u:min(0.0694vw,1.8px)} /* один «пиксель макета» */
  body{font-size:calc(16 * var(--u))}
  .display{font-size:calc(134 * var(--u))}
  .display-l{font-size:calc(122 * var(--u))}
  .display-m{font-size:calc(84 * var(--u))}
  .nav{padding:calc(28 * var(--u)) var(--gutter)}
  .nav-mark{gap:calc(14 * var(--u))}
  .nav-pill{height:calc(35 * var(--u))}
  .nav-sep{height:calc(30 * var(--u))}
  .nav-word{width:calc(157 * var(--u));height:calc(46 * var(--u))}
  .nav-links{gap:calc(40 * var(--u));margin-right:calc(48 * var(--u))}
  .nav-links a{font-size:calc(13 * var(--u))}
  .nav .btn-solid{font-size:calc(13 * var(--u));padding:calc(13 * var(--u)) calc(24 * var(--u))}
  .btn{font-size:calc(14 * var(--u));padding:calc(16 * var(--u)) calc(28 * var(--u));gap:calc(10 * var(--u))}
  .btn-lg{font-size:calc(15 * var(--u));padding:calc(22 * var(--u)) calc(40 * var(--u))}
  .eyebrow{font-size:calc(12 * var(--u));margin-bottom:calc(22 * var(--u))}
  .lead{font-size:calc(24 * var(--u))}
  .note{font-size:calc(13 * var(--u))}
  .hero-meta{font-size:calc(13 * var(--u));margin:calc(36 * var(--u)) 0 calc(14 * var(--u))}
  .hero-sub{font-size:calc(21 * var(--u));margin-bottom:calc(40 * var(--u))}
  .scroll-hint{font-size:calc(11 * var(--u))}
  .copy-a .lead{font-size:calc(44 * var(--u))}
  .copy-b p,.copy-c p{font-size:calc(17 * var(--u));margin-top:calc(18 * var(--u))}
  .copy-b .display-m,.copy-c .display-m{font-size:calc(92 * var(--u))}
  .count-unit b{font-size:calc(176 * var(--u))}
  .count-unit span{font-size:calc(13 * var(--u));margin-top:calc(16 * var(--u))}
  .facts dt{font-size:calc(12 * var(--u))}
  .facts dd{font-size:calc(24 * var(--u))}
  .facts dd small{font-size:calc(13 * var(--u))}
  .facts>div{grid-template-columns:calc(200 * var(--u)) 1fr;padding:calc(26 * var(--u)) 0}
  .come-list{font-size:calc(58 * var(--u))}
  .scene-steps .copy p:not(.eyebrow){font-size:calc(18 * var(--u));margin-top:calc(26 * var(--u))}
  .copy-step .display-l{font-size:calc(146 * var(--u))}
  .t-name{font-size:calc(64 * var(--u))}
  .t-meta,.t-with{font-size:calc(13 * var(--u))}
  .t-meta::after{font-size:calc(28 * var(--u))}
  .t-body p{font-size:calc(18 * var(--u))}
  .town-list summary{padding:calc(26 * var(--u)) 0}
  .chip{font-size:calc(13 * var(--u));padding:calc(12 * var(--u)) calc(20 * var(--u))}
  .sched th{font-size:calc(12 * var(--u))}
  .sched td{font-size:calc(17 * var(--u));padding:calc(22 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) 0}
  .sched td:first-child{font-size:calc(32 * var(--u));width:calc(150 * var(--u))}
  .map-note{font-size:calc(13 * var(--u))}
  .faq-head p{font-size:calc(16 * var(--u))}
  .questions summary{font-size:calc(22 * var(--u));padding:calc(22 * var(--u)) calc(48 * var(--u)) calc(22 * var(--u)) 0}
  .questions summary::after{font-size:calc(32 * var(--u))}
  .questions p{font-size:calc(17 * var(--u))}
  .copy-final .display{font-size:calc(124 * var(--u))}
  .foot-note{font-size:calc(12 * var(--u))}
  .foot-logos{--lb:calc(52 * var(--u))}
  .skip{font-size:calc(13 * var(--u))}
}

/* =====================================================================
   Телефон, правки 26.09: заголовки фирменным шрифтом в 2 раза крупнее,
   на розовом экране текст сверху, картинка снизу
   ===================================================================== */
@media (max-width:767px){
  .display{font-size:clamp(92px,29vw,128px)}
  .display-l,.route-info .display-l{font-size:clamp(80px,25vw,112px)}
  .display-m{font-size:clamp(68px,20vw,88px)}
  .copy-b .display-m,.copy-c .display-m{font-size:clamp(72px,22vw,92px)}
  .copy-step .display-l{font-size:clamp(88px,26vw,120px)}
  .copy-final .display{font-size:clamp(88px,26vw,120px)}

  .hero-copy .btn{display:none}
  /* низ ленты тоже растворяется: на стыке с таймером хвост ленты не обрывается резкой линией */
  .flamingo{width:190vw;top:auto;bottom:0;left:-45vw;transform-origin:23.7% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)}
  .copy-a,.copy-b,.copy-c{top:calc(68px + 4svh);bottom:auto}
  /* облака на стыке с таймером ниже, чтобы меньше закрывали ленту */
  /* стык розового экрана и таймера: розовый продолжается под облаками и уходит в белый,
     густая часть облаков лежит прямо на шве — линии обрыва не видно */
  .race{background:linear-gradient(180deg,#dd165a 0,#f4b8cd 16vw,var(--white) 30vw)}
  .landing-clouds{height:74vw;top:-42vw;background-size:175% auto;background-position:55% bottom}
  .count{padding-top:calc(30vw + 12px)}
  /* «Первый шаг»: на телефоне отдельная вертикальная картинка first-step-mobile.webp (1170×2532), комплект сверху */
  .frame-a{object-position:50% 0}
  /* финал: на телефоне своя вертикальная картинка final-mobile.webp — МГУ и бегуньи сверху, дорога под текстом */
  .frame-start{object-position:50% 0}
}
/* высокий телефон: на розовом экране текст по центру между шапкой и лентой, без пустоты посередине */
@media (max-width:767px) and (min-height:780px){
  .copy-a,.copy-b,.copy-c{bottom:88vw;display:flex;flex-direction:column;justify-content:center}
}
/* низкий телефон (Chrome с панелями): поднимаем вертикальное фото «Первого шага», чтобы заголовок не ложился на комплект */
@media (max-width:767px) and (max-height:720px){
  .frame-a{object-position:50% -20px}
}

/* =====================================================================
   Планшет и окно на пол-экрана (высокое узкое окно): первый экран как на телефоне —
   текст сверху, билборд под ним (опускает и поднимает script.js), меню без ссылок
   ===================================================================== */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  .nav-links{display:none}
}
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .hero-copy{top:calc(90px + 6svh);right:var(--gutter);max-width:none;transform:none}
  .billboard{width:90vw;left:5vw;right:auto;bottom:0}
  .clouds-mid{top:auto;bottom:18svh;right:-6vw;width:44vw}
  /* розовый экран: текст сверху, лента снизу, как на телефоне */
  .flamingo{width:112vw;height:auto;min-width:0;min-height:0;left:0;top:auto;bottom:0;transform-origin:0 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .copy-a,.copy-b,.copy-c{left:var(--gutter);right:var(--gutter);width:auto;max-width:none;top:calc(90px + 4svh);bottom:auto}
}

/* Баннер cookie */
.cookies{
  position:fixed;left:24px;bottom:24px;z-index:60;max-width:420px;
  background:var(--white);color:var(--ink);border:1px solid var(--rule);border-radius:20px;
  padding:20px 22px;box-shadow:0 12px 40px rgba(42,26,36,.18);font-size:15px;line-height:1.45;
}
.cookies[hidden]{display:none}
.cookies-btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.cookies .btn{padding:12px 20px;font-size:12px;cursor:pointer}
@media (max-width:767px){
  .cookies{left:16px;right:16px;bottom:16px;max-width:none;padding:16px 18px;font-size:14px}
  .cookies .btn{flex:1;justify-content:center}
}

/* ---------- v5: первый экран — ключевой визуал с девушкой вместо билборда ---------- */
.hero-bg,.hero-girl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;will-change:transform}
.hero-bg{transform-origin:60% 100%}
.hero-girl{transform-origin:70% 100%;pointer-events:none}
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){.hero-bg,.hero-girl{object-position:74% 50%}}
.hero-girl[hidden]{display:none!important}

/* ---------- v5: «Твой первый шаг» на светло-розовой подложке, тёмный текст ---------- */
.steps-bg{background:#fbe3ec}
.shade-a{background:linear-gradient(90deg,rgba(252,236,242,.92) 0%,rgba(252,236,242,.7) 36%,rgba(252,236,242,0) 60%)}
.copy-step,.copy-step .display-l{color:#a0104a;text-shadow:none}
.scene-steps .copy-step .eyebrow{color:#a0104a}
.scene-steps .copy-step p:not(.eyebrow){color:#3a1626;text-shadow:none}
@media (max-width:767px){
  .shade-a{background:linear-gradient(0deg,rgba(252,236,242,.97) 0%,rgba(252,236,242,.85) 36%,rgba(252,236,242,0) 64%)}
}

/* ---------- v5: логотипы организаторов над заголовком первого экрана (выбор заказчика) ---------- */
.hero-logos{display:flex;align-items:center;--lb:40px;gap:32px;margin-bottom:34px}
.hero-logos img{display:block;filter:brightness(0) invert(1)}
@media (max-width:767px){
  /* логотипы в одну строку, мельче */
  /* логотипы от края до края текстовой колонки */
  /* база подобрана так, чтобы пять логотипов с промежутками по 10px заняли ровно ширину колонки (сумма коэффициентов 9,9) */
  .hero-logos{--lb:calc((100vw - 2 * var(--gutter) - 40px) / 9.9);gap:0 10px;flex-wrap:nowrap;justify-content:space-between;margin-bottom:16px}
  /* заголовок меньше, текст выше — чтобы не ложился на девушку */
  .hero-copy{top:calc(76px + 2svh)}
  /* заголовок в одну строку на всю ширину: «Беги как чувствуешь» ≈ 5,44 em */
  .hero-copy .display{font-size:calc((100vw - 2 * var(--gutter)) / 5.5);white-space:nowrap}
  .hero-copy .display br{display:none}
  .hero-meta{margin:12px 0 8px}
  .hero-sub{font-size:15px;margin-bottom:0}
  .hero-girl{display:none!important}
  /* вертикальная картинка 1800×2532 с запасом неба по бокам: на коротких экранах закрывает экран целиком,
     на высоких бока обрезаются; девушка прижата к нижнему краю */
  .hero-bg{object-position:50% 100%}
}
/* высокие экраны телефона (iPhone 12–15, Plus, Pro Max без панелей): заголовок в две строки, крупнее */
@media (max-width:767px) and (min-height:800px){
  .hero-copy .display{font-size:calc((100vw - 2 * var(--gutter)) / 3.9);white-space:normal}
  .hero-copy .display br{display:inline}
}
/* очень короткие экраны телефона (iPhone SE в Safari с панелями): текст плотнее, чтобы не задевать голову */
@media (max-width:767px) and (max-height:600px){
  .hero-logos{margin-bottom:10px}
  .hero-copy{top:calc(68px + 1svh)}
  .hero-meta{margin:8px 0 6px}
  .hero-sub{font-size:14px;line-height:1.35}
}

/* =====================================================================
   v5: вертикальные планшеты 768–1366 (iPad mini … iPad Pro 13)
   Кино-сцены «Первый шаг», «Среди своих» и финал — статичные блоки: картинка сверху, текст под ней
   ===================================================================== */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  /* первый экран: вертикальная картинка, девушка у нижнего края */
  /* девушка крупно справа, обрез по колени, небо слева под текстом (набросок Андрея 29.09).
     Вертикальная картинка 1800×2532: голова на 48,7 %, колени ~76 % высоты */
  .hero-bg{inset:auto;top:-67vh;left:calc(79vw - 71.1vh);height:200vh;width:auto;max-width:none;object-fit:fill;transform-origin:50% 60%}
  .hero-copy{max-width:62vw}
  .hero-sub{max-width:30ch}
  .hero-sub br{display:none}
  .hero-logos{margin-bottom:24px}
  /* текст выше и заголовок чуть меньше: на iPad mini подпись не задевает голову */
  .hero-copy{top:calc(80px + 3svh)}
  .hero-copy .display{font-size:clamp(72px,10vw,120px)}

  /* «Первый шаг», «Среди своих», финал: картинка на весь экран, текст на ней снизу (как на телефоне, крупнее) */
  .scene-steps,.scene-final{height:auto!important}
  .scene-steps .stage{position:relative;height:auto;overflow:visible}
  .step{position:relative;height:100svh;overflow:hidden}
  .frame,.frame-a{left:50%;right:auto;top:50%;width:100vw;height:100svh;transform:translate(-50%,-50%)!important;-webkit-mask-image:none;mask-image:none;transform-origin:50% 50%;opacity:1!important}
  .frame-a{object-position:50% 12%}
  .frame-b{object-position:52% 40%}
  .steps-shade{opacity:1!important}
  .scene-steps .copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:7svh;width:auto;max-width:none;transform:none!important;opacity:1!important}
  .scene-steps .copy p:not(.eyebrow){font-size:20px;margin-top:18px;max-width:40ch}
  .scene-steps .display-l,.copy-step .display-l,.copy-final .display{font-size:clamp(80px,11vw,130px)}
  .shade-a{background:linear-gradient(0deg,rgba(252,236,242,.97) 0%,rgba(252,236,242,.88) 34%,rgba(252,236,242,0) 58%)}
  .shade-b{background:linear-gradient(0deg,rgba(150,10,70,.94) 0%,rgba(150,10,70,.7) 32%,rgba(150,10,70,0) 58%),linear-gradient(180deg,rgba(60,10,40,.45) 0%,rgba(60,10,40,0) 14%)}
  .scene-final .stage{position:relative;height:100svh}
  .frame-start{object-position:50% 0;transform:translate(-50%,-50%)!important}
  .final-shade{background:linear-gradient(0deg,rgba(150,10,70,.94) 0%,rgba(150,10,70,.7) 34%,rgba(150,10,70,0) 62%),linear-gradient(180deg,rgba(60,10,40,.45) 0%,rgba(60,10,40,0) 14%)}
  .copy-final{left:var(--gutter);right:var(--gutter);top:auto;bottom:7svh;transform:none!important;opacity:1!important}
  .final-actions{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:28px}

  /* розовый экран: лента крупнее, текст крупнее; низ ленты растворяется */
  .flamingo{width:150vw;left:-25vw;transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%)}
  .copy-a .lead{font-size:clamp(52px,6.8vw,80px);max-width:18ch}
  .copy-b p,.copy-c p{font-size:20px;max-width:40ch}
  .copy-b .display-m,.copy-c .display-m{font-size:clamp(80px,11vw,130px)}

  /* стык розового экрана и таймера: розовый уходит в белый под облаками, шва не видно */
  .race{background:linear-gradient(180deg,#dd165a 0,#f4b8cd 16vw,var(--white) 30vw)}
  .landing-clouds{height:74vw;top:-42vw;background-size:175% auto;background-position:55% bottom}
  .count{padding-top:calc(30vw + 12px)}
  /* таймер: кнопки под цифрами */
  /* таймер: цифры слева, кнопки справа, низ кнопок по низу подписей */
  .count-grid{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  .race-cta{align-items:stretch;padding-bottom:0}
  .race-cta .btn{justify-content:center}
}
}

/* =====================================================================
   v5: горизонтальные планшеты 4:3 (iPad 1024×768 … iPad Pro 13 1376×1032)
   Кадр почти квадратный — картинки заходят под текст. Под текстом мягкая подложка цвета экрана
   ===================================================================== */
@media (min-width:1024px) and (max-width:1380px) and (orientation:landscape) and (max-aspect-ratio:3/2){
  .hero-bg{object-position:80% 50%}
  /* экраны с лентой: розовое пятно под текстом, лента уходит под него */
  .copy-a::before,.copy-b::before,.copy-c::before{content:"";position:absolute;inset:-12vh -8vw;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,22,98,.94) 0%,rgba(226,22,98,.82) 55%,rgba(226,22,98,0) 100%)}
  /* «Первый шаг» и «Среди своих»: подложка шире и плотнее */
  .shade-a{background:linear-gradient(90deg,rgba(252,236,242,.96) 0%,rgba(252,236,242,.88) 42%,rgba(252,236,242,0) 72%)}
  .shade-b{background:linear-gradient(90deg,rgba(214,20,95,.9) 0%,rgba(214,20,95,.72) 42%,rgba(214,20,95,0) 72%)}
  /* финал */
  .copy-final::before{content:"";position:absolute;inset:-14vh -10vw;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(217,22,95,.9) 0%,rgba(217,22,95,.75) 55%,rgba(217,22,95,0) 100%)}
}

/* =====================================================================
   v5: вертикальные планшеты — третий проход (29.09): крупнее вся типографика,
   лента заполняет правую часть, «Бежать» и «Заботиться» одним кадром, таймер на всю ширину
   ===================================================================== */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  /* типографика */
  .display,.display-l{font-size:clamp(96px,12.5vw,170px)}
  .display-m{font-size:clamp(80px,10.5vw,140px)}
  .eyebrow{font-size:14px}
  .lead{font-size:clamp(24px,3vw,32px)}
  .hero-copy .display{font-size:clamp(92px,12vw,160px)}
  .hero-sub{font-size:clamp(22px,2.6vw,28px);max-width:26ch}
  .scene-steps .display-l,.copy-step .display-l,.copy-final .display{font-size:clamp(96px,13vw,170px)}
  .scene-steps .copy p:not(.eyebrow){font-size:clamp(22px,2.7vw,28px);max-width:34ch}
  .facts dd{font-size:26px}
  .t-body p{font-size:20px}
  .faq-head p{font-size:18px}
  .questions summary{font-size:26px}
  .questions p{font-size:19px}

  /* первый экран: девушка ниже, голова около 40 % высоты */
  .hero-bg{top:-72vh}

  /* розовый экран: крупный лид, тексты «Бежать» и «Заботиться о себе» одним кадром (второй встаёт под первым в script.js) */
  .copy-a .lead{font-size:clamp(56px,7.6vw,92px);max-width:15ch}
  .copy-b .display-m,.copy-c .display-m{font-size:clamp(80px,10.5vw,140px)}
  .copy-b p,.copy-c p{font-size:clamp(22px,2.7vw,28px);max-width:30ch}
  .copy-a,.copy-b,.copy-c{right:auto;max-width:60vw}
  /* лента крупная, поднята и сдвинута вправо: занимает правую часть кадра */
  .flamingo{width:190vw;left:-25vw;bottom:0;transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 70%,transparent 96%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 70%,transparent 96%)}
  /* «Заботиться о себе» под «Бежать»: высота заголовка + отступ + 6 строк текста */
  .copy-c{top:calc(164px + 4svh + 34.5vw)}
  /* мягкое розовое пятно под текстом: лента заходит под него, текст читается */
  .copy-a::before,.copy-b::before,.copy-c::before{content:"";position:absolute;inset:-6vh -6vw;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(226,22,98,.92) 0%,rgba(226,22,98,.8) 55%,rgba(226,22,98,0) 100%)}

  /* таймер: отступ от облака, цифры на всю ширину */
  .count{padding-top:calc(30vw + 72px)}
  .count-row{gap:0 4vw}
  .count-unit b{font-size:12.5vw}
  .count-unit span{font-size:14px}
  /* фильтры программы переносятся, а не вылезают за край */
  .filters{flex-wrap:wrap}
}

/* v5: одинаковые пары кнопок; «Увидимся 3 октября» в одну строку на вертикальном планшете */
.btn-lg{justify-content:center}
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .copy-final .display{font-size:calc((100vw - 2 * var(--gutter)) / 6.2);white-space:nowrap}
  .copy-final .display br{display:none}
}
/* v5: iPad mini и узкие вертикальные планшеты (до 900): лента правее и меньше — не заходит под текст;
   таймер: кнопкам справа тесно, они встают под цифры в одну строку */
@media (min-width:768px) and (max-width:999px) and (orientation:portrait){
  .flamingo{width:140vw;left:22vw}
  .count-grid{flex-direction:column;align-items:flex-start;gap:36px}
  .count-row{gap:0 5.5vw}
  .count-unit b{font-size:15vw}
  .race-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 16px}
  .race-cta .note{flex-basis:100%}
}
/* v5: iPad Pro и широкие вертикальные планшеты (901–1366): лента тоже правее, цифры таймера крупнее */
@media (min-width:1000px) and (max-width:1366px) and (orientation:portrait){
  .flamingo{width:150vw;left:18vw}
  .count-unit b{font-size:15vw}
  .count-row{gap:0 4.5vw}
}
/* лента сдвинута вправо — её левый край тоже растворяется, чтобы не было видно обреза картинки */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .flamingo{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to bottom,transparent 0,#000 18%,#000 70%,transparent 96%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to bottom,transparent 0,#000 18%,#000 70%,transparent 96%);
    mask-composite:intersect;
  }
}
/* v5: таймер в строку (планшет Pro, десктоп): верх первой кнопки по верху цифр, подпись на всю ширину кнопок */
.count-grid{align-items:flex-start}
.race-cta{padding-bottom:0}
.race-cta .note{max-width:none}
/* у цифр над буквой есть пустое поле (~6,5 % кегля) — опускаем кнопки на столько же, верх кнопки = верх цифр */
.race-cta{margin-top:clamp(7.8px,.78vw,15.6px)}
@media (min-width:1000px) and (max-width:1366px) and (orientation:portrait){.race-cta{margin-top:.98vw}}
@media (max-width:999px) and (orientation:portrait),(max-width:767px){.race-cta{margin-top:0}}
/* v5 29.09, пятый проход */
/* таймер: блок кнопок фиксированной ширины у правого края — не ездит при смене секунд */
.race-cta{flex:0 0 auto;width:clamp(300px,34vw,440px);margin-left:auto}
@media (max-width:999px) and (orientation:portrait),(max-width:767px){.race-cta{width:auto;margin-left:0}}
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  /* лента: на кадре «Что это» крупная (как было), к «Бежать» уменьшается к правому нижнему углу — в script.js */
  .flamingo{width:190vw;left:-25vw;transform-origin:100% 100%}
}
/* iPad Pro: девушка чуть меньше и левее — рука не обрезается краем */
@media (min-width:1000px) and (max-width:1366px) and (orientation:portrait){
  .hero-bg{top:-50vh;height:175vh;left:calc(71vw - 62.2vh)}
}
/* iPad mini: та же правка — девушка меньше, рука целиком */
@media (min-width:768px) and (max-width:999px) and (orientation:portrait){
  .hero-bg{top:-50vh;height:175vh;left:calc(73vw - 62.2vh)}
}
/* v5: девушка выше (голова ~25 % высоты), облако на стыке ленты и таймера левее */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .hero-bg{top:-61vh}
  .landing-clouds{background-position:85% bottom}
}
/* iPad mini: цифры таймера крупнее — ряд почти до правого поля, с запасом на смену секунд */
@media (min-width:768px) and (max-width:999px) and (orientation:portrait){
  .count-unit b{font-size:27vw}
  .count-row{gap:0 4.5vw}
}
/* кнопки таймера не переносят текст: ширина блока = ширине самой длинной кнопки (не зависит от секунд) */
.race-cta{width:auto}
.race-cta .btn{white-space:nowrap}
/* iPad Pro 13 вертикально: цифры чуть меньше, чтобы кнопки справа поместились без переноса */
@media (min-width:1000px) and (max-width:1366px) and (orientation:portrait){.count-unit b{font-size:13vw}}
/* горизонтальный iPad 4:3: цифры таймера меньше — кнопки справа помещаются в поле */
@media (min-width:1024px) and (max-width:1380px) and (orientation:landscape) and (max-aspect-ratio:3/2){.count-unit b{font-size:9.5vw}}
/* вертикальный планшет: лид «Что это» шире — колонка на ~2/3 экрана, как раньше */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .copy-a{max-width:68vw}
  .copy-a .lead{max-width:none}
}
@media (min-width:1024px) and (max-width:1380px) and (orientation:landscape) and (max-aspect-ratio:3/2){.race-cta .btn{padding-left:26px;padding-right:26px}}
/* подпись под кнопками не растягивает блок: ширина блока задаётся кнопками, подпись переносится по ней */
.race-cta .note{width:0;min-width:100%}
/* вертикальный планшет: лид «Что это» на всю ширину между полями, 4–5 строк (набросок Андрея 29.09) */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .copy-a{right:var(--gutter);max-width:none}
  .copy-a .lead{font-size:clamp(56px,8vw,104px);max-width:none}
}
/* лид «Что это»: колонка до ~56 % ширины экрана (линия обреза с наброска Андрея), кегль прежний */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  .copy-a{right:auto;width:calc(56vw - var(--gutter));max-width:none}
}
/* лента на кадре «Что это» чуть правее, чтобы не касаться текста: iPad mini и iPad Pro (на Surface Pro и так чисто) */
@media (min-width:768px) and (max-width:880px) and (orientation:portrait),(min-width:1000px) and (max-width:1366px) and (orientation:portrait){
  .flamingo{left:-18vw}
}

/* ---------- Размеры логотипов партнёров: одна формула на всех экранах ----------
   Ширина = база × (ширина ÷ высота)^0,525 (формула Дэна Пакетта: логотипы равны по площади, а не по высоте).
   Поправки на глаз: логотипы с мелким текстом чуть крупнее, плотная длинная «Онкологика» меньше.
   База --lb задаётся у строки логотипов для каждого размера экрана. */
.hero-logos img,.foot-logos img{width:calc(var(--k) * var(--lb));height:auto;max-width:none}
img[src*="logo-wb-fuchsia"]{--k:1.31}
img[src*="logo-vfla"]{--k:2.10}
img[src*="logo-bkd"]{--k:1.37}
img[src*="logo-onkologika"]{--k:2.66}
img[src*="logo-rsf"]{--k:1.52}
img[src*="logo-moya-stolica"]{--k:2.25}
@media (min-width:1800px){.hero-logos{--lb:calc(40 * var(--u));gap:calc(32 * var(--u));margin-bottom:calc(34 * var(--u))}}

/* Программа дня: строка-дата в программе лектория */
/* Строка-дата: «3 октября,» фуксией и «суббота» серым — фирменным шрифтом; место (в лектории) мелкой подписью ниже */
.sched tr.sched-day td{font-family:var(--display);font-size:56px;line-height:1;letter-spacing:0;text-transform:none;font-weight:400;color:var(--fuchsia);width:auto;white-space:normal;padding:48px 0 18px;border-bottom:1px solid var(--rule)}
.sched tr.sched-day .d-wd{color:var(--muted)}
.sched tr.sched-day .d-pl{display:block;margin-top:12px;font-family:var(--text);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:767px){
  .sched tr.sched-day{border-bottom:0;padding:0}
  .sched tr.sched-day td{font-size:40px;margin:0;padding:34px 0 14px;border-bottom:1px solid var(--rule)}
  .sched tr.sched-day .d-pl{font-size:11px;margin-top:10px}
}
.t-body .link{margin-top:4px;justify-self:start}
.sched.is-lecture th:nth-child(3),.sched.is-lecture td:nth-child(3){display:none}
@media (max-width:767px){.sched td:empty{display:none}}
.sched tbody tr.sched-day:first-child td{padding-top:30px}

/* Баннер cookie на планшете и компьютере: полоса снизу во всю ширину с отступами (вариант Андрея 08.10) */
@media (min-width:768px){
  .cookies{left:24px;right:24px;bottom:24px;max-width:none;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 28px;font-size:16px}
  .cookies[hidden]{display:none}
  .cookies-btns{margin-top:0;flex-wrap:nowrap;flex-shrink:0}
  .cookies .btn{padding:14px 28px;font-size:13px}
}