/* ───────────────────────────────────────────────────────────
   Кругосветка · Александр Кроу — публичный лендинг
   Тёмная редакторская база + один акцент (tweakable) + нейтрали
─────────────────────────────────────────────────────────── */
:root{
  --ink:#15130E;
  /* Поверхности-карточки заметно светлее фона, чтобы читались как панели,
     а не как контуры на том же поле (раньше ink-2/ink-3 были почти как фон). */
  --ink-2:#221E16;
  --ink-3:#2B261C;
  --paper:#ECE7DB;
  --paper-2:#CAC3B4;
  --paper-dim:#A39C8C;
  --paper-faint:#6E685B;
  --line:rgba(236,231,219,.14);
  --line-2:rgba(236,231,219,.24);
  --accent:#D9A441;
  --accent-ink:#15130E;
  --ok:#3FAE7A;

  --font-display:'Oswald', system-ui, sans-serif;
  --display-tight:0;
  --font-body:'Golos Text', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --rail:8px;
  --maxw:1240px;
  --pad:clamp(20px,5vw,72px);
  --nav-h:62px;
}
html[data-headline="antiqua"]{ --font-display:'Cormorant Garamond', Georgia, serif; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
html,body{margin:0}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Декоративная карта-текстура за шапкой — все публичные страницы (один файл =
   один фирменный приём, после главной берётся из кэша). Якорится к верху документа
   (за прозрачным стики-хедером), плотный угол картинки совпадает с логотипом.
   z-index:-1 — над фоном body, под контентом. Сила — через --hero-map-op. */
body.page-home,body.page-partners,body.page-support{position:relative;--hero-map-op:.6}
body.page-home::before,body.page-partners::before,body.page-support::before{
  content:"";position:absolute;z-index:-1;top:0;left:0;width:min(720px,54%);aspect-ratio:1/1;
  background:url("/images/hero-map-87e094fbdcd17b6a4e25c52145cf99bf.webp?vsn=d") top left / contain no-repeat;opacity:var(--hero-map-op);pointer-events:none}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.ph{color:var(--paper);border-bottom:1px dashed color-mix(in srgb,var(--accent) 70%,var(--paper-faint));padding-bottom:.05em;white-space:nowrap}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:13px;letter-spacing:.04em;padding:14px 22px;border:1px solid var(--accent);border-radius:5px;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;background:transparent;color:var(--paper)}
.btn .ar{font-size:1.05em;transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 78%,#fff)}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.btn-sm{padding:9px 15px;font-size:12px}

/* ── Slots / placeholders ────────────────────────────────── */
.slot{position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg, rgba(236,231,219,.045) 0 11px, rgba(236,231,219,0) 11px 22px), var(--ink-2);
  border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:flex-start}
.slot .slot-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.4;
  color:var(--paper-dim);text-transform:uppercase;padding:10px 12px;background:rgba(21,19,14,.72);
  border-top:1px solid var(--line);width:100%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.slot .slot-corner{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--paper-faint);white-space:nowrap}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  /* воздух над лого = боковому отступу (--pad) → лого равноудалено от верхнего и
     левого края (вычитаем ~18px — половину центрирования лого в полосе 62px).
     При .nav-stuck → 0. */
  padding-top:calc(var(--pad) - 18px);
  transition:transform .3s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,backdrop-filter .12s ease,padding-top .25s ease}
/* Скрыт (уезжает вверх) — пока листаем сквозь геро на главной */
.nav.nav-hidden{transform:translateY(-110%)}
/* «Прилип»: компактная плашка — после геро (главная) или при скролле (внутр. страницы) */
.nav.nav-stuck{background:color-mix(in srgb,var(--ink-3) 90%,transparent);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-2);box-shadow:0 12px 34px rgba(0,0,0,.45);padding-top:0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:var(--nav-h)}
/* Бренд — две строки, вертикально центрированы в полосе хедера (--nav-h не меняем).
   Дефолт (фоллбэк без JS, внутр. страницы, прилипшее состояние) — компактный двухстрочный. */
.nav .brand{display:flex;flex-direction:column;justify-content:center;gap:2px;font-family:var(--mono);color:var(--paper);min-width:0;white-space:nowrap;overflow:hidden;line-height:1}
.nav .brand .brand-name{font-size:16px;font-weight:600;letter-spacing:.112em;word-spacing:-.12em;text-transform:uppercase;transition:font-size .25s ease}
.nav .brand .brand-sub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis;max-height:1.4em;opacity:1;transition:opacity .2s ease,max-height .25s ease}
/* Геро-логотип: крупный логотип без подписи — только на главной у самого верха (не прилип),
   при скролле сжимается. На внутр. страницах hero нет → компактная шапка сразу, скролл
   добавляет только фон-плашку (см. .nav:not(.nav-hero) ниже). */
.nav.nav-hero:not(.nav-stuck) .brand{gap:0}
.nav.nav-hero:not(.nav-stuck) .brand .brand-name{font-size:27px}
.nav.nav-hero:not(.nav-stuck) .brand .brand-sub{max-height:0;opacity:0}
/* Внутр. страницы: компактный бар от самого верха (как в прилипшем виде, но без фона) —
   воздух даёт высота полосы --nav-h; при скролле меняется только фон, ничего не «прыгает». */
.nav:not(.nav-hero){padding-top:0}
.nav .links{display:flex;gap:26px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-dim)}
.nav .links a{transition:color .15s}
.nav .links a:hover{color:var(--paper)}
.nav .nav-cta{display:flex;gap:10px;align-items:center;flex:none}
.nav-cta-actions{display:flex;gap:10px;align-items:center}
/* На главной у верха (геро-хедер) прячем дублирующие кнопки; видны в прилипшем баре и на внутр. страницах */
.nav.nav-hero:not(.nav-stuck) .nav-cta-actions{display:none}

/* ── Language switcher ───────────────────────────────────── */
.lang{position:relative;font-family:var(--mono)}
.lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);
  padding:9px 12px;border:1px solid var(--line-2);border-radius:5px;transition:color .15s,border-color .15s;user-select:none}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::after{content:"▾";font-size:9px;opacity:.75}
.lang>summary:hover{color:var(--paper)}
.lang[open]>summary{color:var(--paper);border-color:var(--accent)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;margin:0;padding:4px;
  list-style:none;background:var(--ink-3);border:1px solid var(--line-2);border-radius:5px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:60}
.lang-menu li{margin:0}
.lang-menu a{display:block;padding:8px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper-dim);transition:color .15s,background .15s}
.lang-menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--paper)}
.lang-menu a.active{color:var(--accent)}

/* ── Section scaffold + route spine ──────────────────────── */
.section{padding:clamp(28px,4.5vw,64px) 0}
.section.tight{padding-top:0}
/* Консистентные отступы между блоками: гасим дефолтный нижний margin
   последнего элемента (у <p>-хвостов вроде .lead-tx/.map-note он ~1em),
   чтобы межсекционный разрыв задавался только паддингами секций. */
.block .body > :last-child{margin-bottom:0}
.block{display:grid;grid-template-columns:var(--rail) 1fr;gap:clamp(16px,1.8vw,22px);align-items:start}
.rail{position:relative;align-self:stretch}
html[data-motif="off"] .rail{display:none}
html[data-motif="off"] .block{grid-template-columns:1fr}
.rail::before{content:"";position:absolute;top:.4em;bottom:-1px;left:5px;border-left:1px dashed var(--line-2)}
.rail .node{position:absolute;top:.5em;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px var(--ink),0 0 0 6px var(--line)}
html[data-motif="bold"] .rail::before{border-left-style:solid;border-left-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.body{min-width:0}

.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim);margin:2px 0 clamp(20px,2.6vw,30px)}
.sec-title{font-family:var(--font-display);font-weight:600;letter-spacing:0;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.22;margin:0 0 .8em;text-wrap:pretty}
html[data-headline="antiqua"] .sec-title{font-weight:600;letter-spacing:0}
.lead-tx{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--paper-dim);max-width:60ch}
.lead-tx b{color:var(--paper);font-weight:600}

/* ── HERO ────────────────────────────────────────────────── */
.hero{padding-top:clamp(22px,3.4vw,48px);padding-bottom:clamp(20px,3vw,40px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,68px);align-items:start}
.hero-grid > *{min-width:0}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(14px,1.8vw,20px);display:flex;align-items:center;gap:14px}
.eyebrow .ln{height:1px;flex:1;background:var(--line-2);max-width:120px}
/* Геро-копи: H1 → лид-панч «так не делал никто» → плашка Гиннеса → интро
   «Давайте знакомиться. Я Саша…». Лид и интро — один стиль. margin-bottom:0 у лида,
   чтобы на мобиле (flex) его UA-отступ не складывался с отступом плашки. */
.hero-grid .lead-tx{margin-bottom:0}
.hero-intro{margin:clamp(14px,1.8vw,20px) 0 0;font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--paper-2)}
.hero-intro b{color:var(--paper);font-weight:600}
a.intro-link{color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 65%,transparent);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-color .15s}
a.intro-link:hover,a.intro-link:focus-visible{color:var(--accent);text-decoration-color:var(--accent);outline:none}
/* Атрибуция-источник: курсивная сноска, имя издания — ссылка (ярче) */
.intro-cite{font-style:italic;color:var(--paper-dim);white-space:nowrap}
.intro-cite .intro-link{color:var(--paper)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;letter-spacing:0;margin:0;text-wrap:balance}
html[data-headline="antiqua"] .hero h1{font-weight:700;letter-spacing:0;line-height:1.06}
.hero h1 .em{color:var(--accent)}
.hero .badge{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--accent);color:var(--paper);
  padding:11px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 10%,transparent);margin-top:clamp(24px,3vw,34px)}
.hero .badge b{color:var(--accent);font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(14px,1.8vw,20px)}
.hero-meta{display:flex;align-items:center;gap:16px;margin-top:clamp(16px,2vw,22px);color:var(--paper-dim);font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.hero-photo{aspect-ratio:4/5;min-height:320px;margin-top:calc(20px + clamp(22px,3vw,32px))}

/* ── Hero photo stack: интерактивная стопка (логика iMessage) ── */
.hero-fan{position:relative;
  /* min-height = высоте активной карточки (ширина×5/4 + паддинги 2×11),
     чтобы центрирование (top:50%) не добавляло пустот сверху/снизу. */
  min-height:calc(clamp(296px,34vw,430px) * 1.25 - 5.5px);margin-top:0;
  /* вариант C: фото — правая колонка-картинка; стопка центрируется в колонке */
  transform:none}
.pframe{position:absolute;left:50%;top:50%;margin:0;width:clamp(296px,34vw,430px);
  background:var(--paper);padding:11px;border-radius:8px;cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.34),0 2px 5px rgba(0,0,0,.3);
  transform-origin:center center;will-change:transform,filter;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .35s,box-shadow .35s}
.pframe .pf-img{display:block;width:100%;aspect-ratio:4/5;border-radius:3px;
  background:repeating-linear-gradient(135deg,rgba(21,19,14,.12) 0 9px,rgba(21,19,14,0) 9px 18px),#d6cebd;
  background-size:cover;background-position:center}
/* активная (slot 0) — спереди по центру; ±1 и ±2 уходят «вдаль» СИММЕТРИЧНО
   (вправо — непросмотренные, влево — просмотренные). data-slot выставляет JS. */
.pframe[data-slot="0"]{transform:translate(-50%,-50%) scale(1) rotate(0deg);z-index:30}
.pframe[data-slot="1"]{transform:translate(calc(-50% + 46px),-50%) scale(.9) rotate(3deg);z-index:20;filter:brightness(.9)}
.pframe[data-slot="-1"]{transform:translate(calc(-50% - 46px),-50%) scale(.9) rotate(-3deg);z-index:20;filter:brightness(.9)}
.pframe[data-slot="2"]{transform:translate(calc(-50% + 84px),-50%) scale(.81) rotate(6deg);z-index:10;filter:brightness(.8)}
.pframe[data-slot="-2"]{transform:translate(calc(-50% - 84px),-50%) scale(.81) rotate(-6deg);z-index:10;filter:brightness(.8)}
.pframe:hover{box-shadow:0 14px 30px rgba(0,0,0,.4),0 3px 7px rgba(0,0,0,.32)}

/* ── Hero viewfinder composition ─────────────────────────── */
.hero-visual{position:relative}
.hero-visual > image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:repeating-linear-gradient(135deg,rgba(236,231,219,.05) 0 11px,rgba(236,231,219,0) 11px 22px),var(--ink-2);
  border:1px solid var(--line)}
.hero-vf{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.hero-vf .grid{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hero-vf .grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-vf .grid .route{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:5 6;opacity:.65}
.hero-vf .cnr{position:absolute;width:24px;height:24px;border:1.5px solid var(--accent)}
.hero-vf .cnr.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.hero-vf .cnr.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.hero-vf .cnr.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.hero-vf .cnr.br{bottom:12px;right:12px;border-left:0;border-top:0}
.hero-vf .top{position:absolute;top:22px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-dim)}
.hero-vf .rec{display:flex;align-items:center;gap:8px;color:var(--paper)}
.hero-vf .rec .d{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.hero-vf .ruler{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.hero-vf .ruler i{height:1px;width:8px;background:var(--line-2);display:block}
.hero-vf .ruler i.lg{width:18px;background:var(--paper-dim)}
.hero-vf .reticle{position:absolute;left:31%;top:63%;transform:translate(-50%,-50%);color:var(--accent)}
.hero-vf .reticle .ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.9}
.hero-vf .reticle .tick{stroke:currentColor;stroke-width:1.2}
.hero-vf .reticle .ctr{fill:currentColor}
.hero-vf .cap{position:absolute;left:1px;right:1px;bottom:1px;display:flex;justify-content:space-between;gap:12px;
  padding:30px 13px 11px;font-family:var(--mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--paper-dim);
  background:linear-gradient(to top,rgba(21,19,14,.82),transparent)}
.hero-vf .cap span{white-space:nowrap}
@keyframes recblink{0%,52%{opacity:1}66%,100%{opacity:.22}}
@media (prefers-reduced-motion:no-preference){.hero-vf .rec .d{animation:recblink 1.9s steps(1,end) infinite}}

/* ── HOW: steps ──────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:clamp(4px,1.5vw,12px) 0 clamp(22px,2.6vw,30px)}
.step{background:var(--ink-2);padding:clamp(20px,2.2vw,28px)}
.step .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px}
.step h4{font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.12;margin:0 0 8px}
.step p{margin:0;color:var(--paper-dim);font-size:.98rem;line-height:1.45}

/* ── MAP ─────────────────────────────────────────────────── */
.map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.map-legend{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--paper-dim)}
.map-legend .lg{display:flex;align-items:center;gap:9px}
/* «?» у легенды: тултип с пояснением статусов (прогрессивное раскрытие).
   :focus (а не только :focus-visible) → срабатывает и по тапу на мобиле. */
.lg-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:-10px;border-radius:50%;border:1px solid var(--line-2);color:var(--paper-dim);font-size:11px;line-height:1;cursor:help;transition:color .15s,border-color .15s}
.lg-help:hover,.lg-help:focus,.lg-help:focus-visible{color:var(--paper);border-color:var(--accent);outline:none}
.lg-tip{position:absolute;top:calc(100% + 9px);right:0;width:min(236px,68vw);background:var(--ink-3);border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;font-family:var(--font-body);font-size:13px;line-height:1.45;letter-spacing:normal;text-transform:none;color:var(--paper-2);text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.45);white-space:normal;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:30}
.lg-tip b{color:var(--paper);font-weight:600}
.lg-help:hover .lg-tip,.lg-help:focus .lg-tip,.lg-help:focus-visible .lg-tip{opacity:1;visibility:visible;transform:none}
.lg .dot{width:12px;height:12px;border-radius:50%}
.lg .dot.confirmed{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.lg .dot.filmed{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.lg .dot.talks{background:transparent;border:1.5px dashed var(--paper-dim)}

.map-stage{position:relative}
.map-frame{position:relative;width:100%;aspect-ratio:20/9;min-height:340px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:5px;overflow:hidden}

/* ── MapLibre map ───────────────────────────────────────── */
.map-frame .maplibregl-canvas{outline:none}
.maplibregl-ctrl-group{background:var(--ink-3);border:1px solid var(--line-2);border-radius:0;box-shadow:none;overflow:hidden}
.maplibregl-ctrl-group button{background:transparent;width:30px;height:30px}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) opacity(.65)}
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon{filter:invert(1) opacity(.95)}
.maplibregl-ctrl-attrib{background:rgba(21,19,14,.55);color:var(--paper-faint);font-family:var(--mono);font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--paper-dim)}

/* Avatar markers */
/* position:absolute — НЕ relative: maplibre сам позиционирует маркер через transform
   из своего .maplibregl-marker{position:absolute}; если переопределить на relative,
   маркер уходит в поток и накапливает сдвиг (виден как смещение метки на низком зуме). */
.hero-marker{position:absolute;width:34px;height:34px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-marker .hm-avatar{display:block;width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;
  background-image:repeating-linear-gradient(135deg,rgba(236,231,219,.08) 0 6px,rgba(236,231,219,0) 6px 12px);
  background-color:var(--ink-3);transition:transform .15s}
.hero-marker.confirmed .hm-avatar{border:2px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.hero-marker.filmed .hm-avatar{border:2px solid var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent),0 0 14px color-mix(in srgb,var(--ok) 40%,transparent)}
.hero-marker.talks .hm-avatar{border:2px dashed var(--paper-dim)}
.hero-marker:hover .hm-avatar,.hero-marker:focus-visible .hm-avatar{transform:scale(1.7)}
.hero-marker:hover,.hero-marker:focus-visible{z-index:5}
.hero-marker:focus-visible{outline:none}
/* Название места — комикс-«облако» (пилюля с фоном) над аватаром, с двумя
   уменьшающимися кружками-связью к нему. Фон → читается поверх соседних аватарок;
   поднято выше увеличенного (×1.7, ~29px от центра) аватара, чтобы тот не перекрывал. */
.hero-marker .hm-city{position:absolute;left:50%;bottom:calc(100% + 34px);transform:translateX(-50%);
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper);
  white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.5);opacity:0;transition:opacity .15s;pointer-events:none;z-index:2}
/* кружки-связь: сплошной цвет статуса + тёмный ореол → видны на карте И поверх свечения аватара */
.hero-marker .hm-city::after,.hero-marker .hm-city::before{content:"";position:absolute;left:50%;border-radius:50%;
  background:var(--paper-dim);box-shadow:0 0 0 2px var(--ink)}
.hero-marker .hm-city::after{width:7px;height:7px;margin-left:-3.5px;top:calc(100% + 5px)}
.hero-marker .hm-city::before{width:5px;height:5px;margin-left:-2.5px;top:calc(100% + 15px)}
/* цвет пилюли и кружков = окантовке аватара (по статусу) — связь читается */
.hero-marker.confirmed .hm-city{border-color:var(--accent)}
.hero-marker.confirmed .hm-city::after,.hero-marker.confirmed .hm-city::before{background:var(--accent)}
.hero-marker.filmed .hm-city{border-color:var(--ok)}
.hero-marker.filmed .hm-city::after,.hero-marker.filmed .hm-city::before{background:var(--ok)}
.hero-marker:hover .hm-city,.hero-marker:focus-visible .hm-city{opacity:1}

/* Кластер пинов: главный кружок с числом + «диски» позади (намёк на скрытые) */
.hero-cluster{position:absolute;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer}
.hero-cluster .hc-disc{position:absolute;inset:0;border-radius:50%;background:var(--ink-3);border:1px solid var(--line-2);transition:transform .15s}
.hero-cluster .hc-disc.b1{transform:translate(5px,-3px)}
.hero-cluster .hc-disc.b2{transform:translate(-5px,-2px);opacity:.6}
.hero-cluster .hc-main{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:13px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,var(--ink-3));border:2px solid var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),0 0 14px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .15s}
.hero-cluster:hover .hc-main{transform:scale(1.08)}
.hero-cluster:hover .hc-disc.b1{transform:translate(7px,-4px)}
.hero-cluster:hover .hc-disc.b2{transform:translate(-7px,-3px)}
.hero-cluster:focus-visible{outline:none}
/* появление «лепестков» одуванчика */
@keyframes legIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.hero-marker.leg .hm-avatar{animation:legIn .18s ease both}

/* Hero popup — кастомная карточка поверх .map-stage (не обрезается рамкой) */
.hero-pop-card{position:absolute;z-index:30;width:200px;transform:translate(-50%,-100%);
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s}
.hero-pop-card.show{opacity:1;visibility:visible;pointer-events:auto}
.hero-pop-card.below{transform:translate(-50%,0)}
.hp-vid{aspect-ratio:9/16;max-height:200px;background:
    repeating-linear-gradient(135deg,rgba(236,231,219,.05) 0 10px,rgba(236,231,219,0) 10px 20px),#0f0d09;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.hp-play{width:42px;height:42px;border-radius:50%;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.hp-meta{padding:13px 14px}
.hp-nm{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.1}
.hp-who{color:var(--paper-dim);font-size:.86rem;margin-top:3px}
.hp-loc{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-faint);margin-top:9px}
.hp-st{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;color:var(--paper-dim);margin-top:11px}
.hp-st.confirmed{border-color:var(--accent);color:var(--accent)}
.hp-st.filmed{border-color:var(--ok);color:var(--ok)}
.map-note{margin-top:clamp(16px,2vw,22px);color:var(--paper-dim);max-width:58ch}

/* Visually hidden (kept in DOM for SEO / a11y) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── REACH: stats ────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(24px,4vw,56px);margin:0 0 clamp(26px,3vw,36px);align-items:start}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.8rem,6.4vw,4.8rem);line-height:1;letter-spacing:0;display:flex;align-items:baseline}
.stat .num .u{color:var(--accent)}
.stat .num .approx{color:var(--paper-dim);font-weight:600}
.stat .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-dim);margin-top:12px;max-width:18ch}
.platforms{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.platforms .pf{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;color:var(--paper);transition:color .15s,border-color .15s,background .15s}
a.pf:hover,a.pf:focus-visible{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);outline:none}
.reach-note{margin:clamp(18px,2.2vw,24px) 0 0;color:var(--paper-dim);max-width:54ch}
.reach-note b{color:var(--paper);font-weight:600}

/* ── PARTNER door (B2B) ──────────────────────────────────── */
.door-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:18px}
.door-tag::before{content:"";width:28px;height:1px;background:var(--accent)}
.matrix{border-top:1px solid var(--line);margin-top:clamp(6px,1.4vw,12px)}
.mrow{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--line)}
.mrow .cat{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.15;letter-spacing:-.005em}
.mrow .ar{color:var(--accent);font-family:var(--mono);font-size:1.1rem}
.mrow .ben{color:var(--paper-dim);font-size:clamp(1rem,1.4vw,1.12rem)}
.mrow .ben b{color:var(--paper);font-weight:600}
.partner-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}
.anchor-co{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-dim)}
.anchor-co .co{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.01em;color:var(--accent);text-transform:none}

/* ── SUPPORT door (individuals) — distinct zone ──────────── */
.support{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.progress-wrap{margin:clamp(8px,1.6vw,16px) 0 clamp(30px,4vw,46px)}
.progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.progress-top .raised{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.02em;line-height:1}
.progress-top .raised span{color:var(--paper-dim);font-size:.42em;font-weight:600;letter-spacing:0}
.progress-top .unit{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-faint)}
.bar{position:relative;height:14px;background:var(--ink-3);border:1px solid var(--line)}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.bar .mark{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--paper-dim)}
.bar-labels{position:relative;margin-top:12px;height:34px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--paper-dim)}
.bar-labels .bl{position:absolute;transform:translateX(-50%);text-align:center;text-transform:uppercase;line-height:1.3}
.bar-labels .bl b{display:block;color:var(--paper);font-weight:600}
.bar-labels .bl.start{color:var(--accent)}
.bar-labels .bl.start b{color:var(--accent)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.tiers.two{grid-template-columns:repeat(2,1fr)}
.tier{background:var(--ink-2);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;min-height:210px}
.tier .lvl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-faint)}
.tier h4{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;margin:0;letter-spacing:-.01em}
.tier p{margin:0;color:var(--paper-dim);font-size:.98rem;line-height:1.45}
.tier .amt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--paper);margin-top:auto}
.tier.feature{background:color-mix(in srgb,var(--accent) 9%,var(--ink-2));outline:1px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-1px}
.tier.feature h4{color:var(--accent)}

.wall{margin-top:clamp(30px,4vw,46px)}
.wall-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.wall-head .t{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim)}
/* Единый блок с перегородками: фон-линия проступает в 1px-зазорах между ячейками.
   flex-grow растягивает ячейки на всю ширину ряда — нет «серого» хвоста справа. */
.wall-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;align-items:stretch}
.backer{flex:1 1 150px;background:var(--ink-2);padding:20px 14px;display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center;justify-content:flex-start}
.backer .face{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-2);flex:none;display:block;object-fit:cover}
/* плейсхолдер без фото — диагональная штриховка */
.backer span.face{background:
    repeating-linear-gradient(135deg, rgba(236,231,219,.08) 0 6px, rgba(236,231,219,0) 6px 12px), var(--ink-3);
  background-size:cover;background-position:center}
a.backer{transition:background .15s}
a.backer:hover{background:var(--ink-3)}
.backer.empty{gap:12px}
.backer .bn{font-size:.95rem;color:var(--paper);line-height:1.25}
.backer .br{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
.backer.empty{justify-content:center;color:var(--paper-faint);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-align:center;min-height:124px}

.why{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.why .q{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.18;letter-spacing:-.01em;margin:0;text-wrap:balance}
html[data-headline="antiqua"] .why .q{font-weight:500;letter-spacing:0}
.why .why-more{margin-top:clamp(16px,2vw,22px);max-width:48ch;color:var(--paper-2);font-size:1rem;line-height:1.6}
.why .why-more b{color:var(--paper);font-weight:600}
.why .traction{display:grid;gap:14px}
.why .tr-head{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 16px}
.why .tr{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:13px}
.why .tr .k{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);white-space:nowrap;min-width:96px}
.why .tr .v{color:var(--paper-dim);font-size:.98rem}
.why .tr .v b{color:var(--paper);font-weight:600}

/* ── TRUST strip ─────────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.trust{background:var(--ink-2);padding:clamp(20px,2.2vw,26px);min-height:128px;display:flex;flex-direction:column;gap:14px}
.trust .role{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-faint)}
.trust .logo{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.01em}
.trust .logo.partner{color:var(--accent)}
.trust .co-logo{height:30px;width:auto;display:block;margin-top:11px}
.book-link{color:inherit;transition:color .15s;cursor:pointer}
.book-link:hover,.book-link:focus-visible{color:var(--accent);outline:none}
.trust .sub{font-size:.92rem;color:var(--paper-dim);margin-top:4px}
.trust .logo-slot{height:30px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--paper-faint);letter-spacing:.04em;text-transform:uppercase}
.trust .logo-slot .box{width:34px;height:24px;border:1px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(236,231,219,.05) 0 7px,transparent 7px 14px)}

/* ── CONTACT / footer ────────────────────────────────────── */
.contact{border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,64px);align-items:end}
.contact h3{font-family:var(--font-display);font-weight:700;letter-spacing:0;font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.08;margin:0 0 .5em}
html[data-headline="antiqua"] .contact h3{font-weight:700;letter-spacing:0}
.contact .sub{color:var(--paper-dim);max-width:42ch}
.contact .hero-cta{margin-top:clamp(22px,3vw,30px)}
.links{display:grid;gap:14px}
.lk{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:13px}
.lk .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-faint)}
.lk .v{font-size:1.05rem;color:var(--paper)}
.lk .v.acc{color:var(--accent)}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-faint)}

/* ── Page hero (partners / support) ──────────────────────── */
.page-hero{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(10px,2vw,22px)}
.page-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.06;letter-spacing:0;margin:0;text-wrap:balance}
html[data-headline="antiqua"] .page-hero h1{font-weight:700}
.page-hero .lead{margin-top:clamp(20px,2.6vw,30px);max-width:56ch;color:var(--paper-dim);font-size:clamp(1.05rem,1.5vw,1.28rem)}
.page-hero .lead b{color:var(--paper);font-weight:600}
/* /partners: тихая строка про личную ставку (аутентичность, не мольба) */
.partner-stake{margin-top:clamp(14px,1.8vw,20px);max-width:60ch;color:var(--paper-dim);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.55}
.partner-stake b{color:var(--paper);font-weight:600}

/* record hook strip — present on all surfaces */
/* строка-credential (не кнопка): без рамки/фона, акцентный моно-текст */
.record-strip{display:inline-flex;align-items:center;gap:9px;color:var(--accent);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:0}
.record-strip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.record-strip b{color:var(--accent);font-weight:500}

/* ── Fork (hub) ──────────────────────────────────────────── */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.fork-door{background:var(--ink-2);padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;gap:16px;min-height:244px;transition:background .18s}
.fork-door:hover{background:var(--ink-3)}
.fork-door .ft{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}
.fork-door h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.18;margin:0;letter-spacing:0}
.fork-door p{margin:0;color:var(--paper-dim);max-width:36ch}
.fork-door .go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent)}
.fork-door .go .ar{transition:transform .18s}
.fork-door:hover .go .ar{transform:translateX(4px)}

/* ── Logo wall (partners) ────────────────────────────────── */
.wall-cap{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.logo-cell{background:var(--ink-2);min-height:108px;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.logo-cell.anchor{grid-column:span 2;grid-row:span 2}
.logo-cell .co{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--accent);letter-spacing:0;text-align:center}
.logo-cell .co small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-faint);margin-top:8px}
.logo-cell.anchor .co-logo{height:46px;width:auto;display:block;margin:0 auto}
.logo-cell.anchor .co-logo + small{display:block;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-faint);margin-top:14px}
.logo-cell .ph-logo{width:74px;height:30px;border:1px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(236,231,219,.05) 0 7px,transparent 7px 14px)}
.logo-cell .tier-tag{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-faint)}

/* ── Segmented pledge bar (support) ──────────────────────── */
.seg-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.seg-top .raised{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:0;line-height:1.05;white-space:nowrap}
.seg-top .raised .u{color:var(--paper-dim);font-size:.4em;font-weight:500}
.seg-top .raised span.lbl{color:var(--paper-dim);font-size:.34em;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-left:8px}
.seg-top .unit{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-faint);text-align:right}
.segbar{position:relative;height:18px;background:var(--ink-3);border:1px solid var(--line)}
.segbar .seg{position:absolute;top:0;bottom:0;left:0;width:0}
.segbar .seg-fill{background:var(--accent);z-index:2}
.segbar .seg-pledge{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 6px,transparent 6px 12px);
  border-right:1px solid color-mix(in srgb,var(--accent) 70%,transparent);z-index:1}
.segbar .mark{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--paper-dim);z-index:3}
.seg-legend{display:flex;gap:22px;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--paper-dim);flex-wrap:wrap}
.seg-legend .lg{display:flex;align-items:center;gap:9px}
.seg-legend .sw{width:18px;height:12px;flex:none}
.seg-legend .sw.fill{background:var(--accent)}
.seg-legend .sw.pledge{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 4px,transparent 4px 8px);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.seg-marklabels{position:relative;margin-top:14px;height:34px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--paper-dim)}
.seg-cash{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--paper-dim)}
.seg-cash b{color:var(--paper);font-weight:600}
.seg-marklabels .ml{position:absolute;transform:translateX(-50%);text-align:center;text-transform:uppercase;line-height:1.3}
.seg-marklabels .ml b{display:block;color:var(--paper);font-weight:600}
.seg-marklabels .ml.start{color:var(--accent)}
.seg-marklabels .ml.start b{color:var(--accent)}

/* ── Читаемость прозы ────────────────────────────────────────
   Основные абзацы — чуть светлее (--paper-2). Моно-метки/кикеры/
   легенды остаются приглушёнными (--paper-dim/-faint): иерархия. */
.lead-tx,.page-hero .lead,.reach-note,.map-note,.fork-door p,.step p,.tier p,
.mrow .ben,.trust .sub,.contact .sub,.why .tr .v{color:var(--paper-2)}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  /* мобайл: левую колонку «растворяем» через display:contents (только её —
     фото теперь прямой ребёнок сетки), элементы переупорядочиваем по одному.
     Порядок: H1 → лид-панч → «Я Саша…» → фото → плашка Гиннеса → CTA → мета.
     gap:0 — иначе унаследованный от десктопной сетки gap (~28px) добавлялся бы
     между всеми элементами поверх их margin («дыры в заборе»). */
  /* мобайл: та же карта-текстура (той же силы — исходник сам по себе приглушён),
     но из лёгкого файла 640px (28 КБ против 152; media query грузит только его) */
  body.page-home::before,body.page-partners::before,body.page-support::before{
    width:min(420px,92vw);background-image:url("/images/hero-map-640-496551fb1048a73b5a04c0b5ba722e4b.webp?vsn=d")}
  /* hero снизу = паддингу секции, иначе разрыв hero→«Почему сейчас» уже прочих */
  .hero{padding-bottom:clamp(28px,4.5vw,64px)}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-grid > div:first-child{display:contents}
  .hero-grid .eyebrow{order:1}
  .hero-grid h1{order:2}
  .hero-grid .lead-tx{order:3}
  .hero-grid .hero-intro{order:4}
  .hero-grid .hero-fan{order:5}
  .hero-grid .record-strip{order:6}
  .hero-grid .hero-cta{order:7}
  .hero-grid .hero-meta{order:8}
  .hero-photo{aspect-ratio:16/10;min-height:260px;margin-top:0;width:100%}
  /* мобайл: стопка iMessage; высоту поджимаем под карточку, смещения теснее */
  .hero-fan{width:auto;min-height:clamp(264px,72vw,312px);margin:clamp(14px,4vw,18px) 0 0;transform:none}
  .pframe{width:min(64%,240px);padding:11px}
  .pframe[data-slot="1"]{transform:translate(calc(-50% + 34px),-50%) scale(.9) rotate(3deg)}
  .pframe[data-slot="-1"]{transform:translate(calc(-50% - 34px),-50%) scale(.9) rotate(-3deg)}
  .pframe[data-slot="2"]{transform:translate(calc(-50% + 60px),-50%) scale(.81) rotate(6deg)}
  .pframe[data-slot="-2"]{transform:translate(calc(-50% - 60px),-50%) scale(.81) rotate(-6deg)}
  .contact-grid,.why{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .nav .links{display:none}
  .fork{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  :root{--rail:0px}
  .block{display:block}
  .rail{display:none}
  .kicker{padding-left:0}
  /* верхний воздух page-hero (40px) на телефоне раздувал зазор лого→контент
     (~57px) против hero→первой секции (~30px); приводим верх к нижнему ритму */
  .page-hero{padding-top:16px}
  .logo-cell.anchor{grid-column:span 2}
  .steps,.tiers{grid-template-columns:1fr}
  .mrow{grid-template-columns:1fr;gap:8px;align-items:start}
  .mrow .ar{transform:rotate(90deg);justify-self:start}
  .map-frame{aspect-ratio:4/5;min-height:440px}
  /* мобайл: легенда (+«?») и подсказка — ПОД картой; карта поднимается сразу под
     заголовок, справочный слой собирается внизу. display:contents «растворяет»
     .map-head → её дети (заголовок, легенда) переупорядочиваются вместе с картой. */
  #map .body{display:flex;flex-direction:column;gap:clamp(16px,4.5vw,22px)}
  #map .map-head{display:contents}
  #map .map-head > div:first-child{order:1}
  #map .map-stage{order:2}
  #map .map-legend{order:3}
  #map .map-note{order:4;margin-top:0}
  #map .lg-tip{top:auto;bottom:calc(100% + 9px)} /* тултип вверх — над легендой (под картой) */
  .stats{grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.4vw,16px)}
  .nav .nav-cta .btn-ghost{display:none}
  /* на странице поддержки в мобильной шапке — кросс-кнопка «Партнёрство» вместо «Поддержать».
     Единственная кнопка шапки = главное действие контекста → выглядит как primary
     (контурная в одиночку смотрится «пустой проволокой») */
  .page-support .nav .nav-cta .btn-ghost{display:inline-flex;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .page-support .nav .nav-cta .btn-ghost:hover{background:color-mix(in srgb,var(--accent) 78%,#fff)}
  .page-support .nav .nav-cta .btn-primary{display:none}
  .map-pop{width:180px}
}
@media print{
  .nav{position:static}
  body{background:#fff;color:#111}
}
@media (max-width:420px){
  .nav .wrap{gap:12px}
  .nav .brand .brand-name{font-size:15px;letter-spacing:.088em}
  .nav .brand .brand-sub{font-size:9px;letter-spacing:.06em}
}

/* ── Страница ошибки (404) ───────────────────────────────── */
.err{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:var(--pad);gap:0}
.err-mid{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(22px,3vw,32px)}
.err-msg{margin:0;max-width:16ch;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;
  font-size:clamp(28px,5vw,48px)}
.err-code{font-family:var(--mono);font-weight:500;line-height:.9;letter-spacing:.04em;
  font-size:clamp(56px,13vw,128px);color:var(--paper-faint);opacity:.5;
  padding-bottom:clamp(18px,4vw,40px);user-select:none}
