/* =====================================================================
   Waykeeper · site-v1 · общий фундамент (система дизайна v3)
   Один файл стилей на все страницы. Подключение — в _template.html.
   Правила: два шрифта (Spectral + Onest), пять размеров (--s1…--s5),
   цвет только там, где он что-то значит, стекло без градиентов внутри.
   Имена переменных и базовых классов совпадают со скетчем v3 —
   на них опираются modules/* и content/*: не переименовывать.
   ===================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  /* цвета (имена из скетча v3 — не менять) */
  --page:#FCFDFF;              /* фон страницы */
  --cool:#EEF3FA;              /* холодная дымка фона */
  --ink:#0F1722;               /* текст, 18:1 */
  --ink-2:rgba(15,23,34,.78);  /* второй текст, 8,8:1 */
  --ink-3:rgba(15,23,34,.62);  /* подписи, 5,1:1 */
  --line:rgba(15,23,34,.10);
  --line-2:rgba(15,23,34,.20);
  --accent:#EA5F22;            /* огонёк: точка «ты здесь», найденное, новая связь */
  --accent-text:#C2410C;       /* огонёк, если это текст: 5,2:1 */
  --warm:#FFB27F;              /* тёплое окно (следующий сезон) */
  --sky:#A9C1EE;               /* холодное окно (прошлый сезон) */
  --glass:rgba(255,255,255,.56);

  /* шрифты: только эти два */
  --f-head:'Spectral',Georgia,serif;
  --f-text:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* пять размеров на весь сайт */
  --s1:64px;  /* H1 */
  --s2:34px;  /* H2, цитата */
  --s3:21px;  /* названия, лид */
  --s4:16px;  /* текст, кнопки, меню */
  --s5:13px;  /* подписи, время, подсказки */

  /* отступы */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:120px;
  --section:var(--sp-9);       /* воздух между блоками */

  /* ритм: одни величины на весь сайт. Страницы их НЕ переопределяют (см. README, «Ритм») */
  --head-h:78px;                         /* высота шапки; site.js ставит точное значение */
  --hero-top:clamp(48px, 10vh, 96px);    /* от шапки до верха H1 — одинаково на всех страницах */
  --hero-min:clamp(520px, 74svh, 700px); /* высота первого экрана */
  --hero-bottom:var(--sp-8);             /* воздух под текстом первого экрана */
  --h2-gap:var(--sp-5);                  /* H2 → текст (абзац, список, prose) */
  --head-gap:var(--sp-6);                /* H2 → сетка, карточки, модуль */

  /* сетка */
  --wrap:1200px;               /* ширина контейнера */
  --gutter:24px;               /* поле по краям */
  --gap:20px;                  /* промежуток в сетках */
  --measure:35rem;             /* колонка длинного чтения: 60–70 знаков */

  /* формы */
  --r-s:12px; --r-m:16px; --r-l:20px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:760px){
  :root{ --s1:40px; --s2:27px; --s3:19px; --gutter:20px; --section:84px; --gap:14px;
    --head-h:68px; --hero-top:var(--sp-6); --hero-min:0px; --hero-bottom:var(--sp-5); }
}

/* ---------- 2. База и фон страницы ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Фон живёт на html, а не на body: тогда холст поля (z-index:-1) лежит между фоном и текстом. */
html{
  background-color:var(--page);
  background-image:
    radial-gradient(110% 60% at 0% 0%, var(--cool) 0%, rgba(238,243,250,0) 60%),
    radial-gradient(80% 50% at 100% 100%, #F0F4FA 0%, rgba(240,244,250,0) 60%);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;             /* ничто не расширяет страницу вбок (iPhone не «отъезжает») */
}
body{
  margin:0; background:transparent; color:var(--ink);
  font:400 var(--s4)/1.6 var(--f-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1 0 auto; display:block}
img,svg{max-width:100%}
img{display:block; height:auto}
a{color:inherit}
p,ul,ol,dl,figure,blockquote{margin:0}
::selection{background:rgba(234,95,34,.18)}
[hidden]{display:none !important}

/* Холст поля: создаётся field.js, лежит за всем контентом. */
.field-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; transition:opacity .5s}

/* Фокус с клавиатуры — заметный, тонкий */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:var(--gutter); top:-60px; z-index:100; padding:10px 16px; border-radius:var(--r-pill); background:var(--ink); color:#fff; text-decoration:none; font-size:var(--s5)}
.skip:focus-visible{top:12px}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- 3. Типографика: пять размеров ---------- */
h1,h2,h3,h4{margin:0; font-weight:300; color:var(--ink); text-wrap:balance}
h1,.h1{font:300 var(--s1)/1.04 var(--f-head); letter-spacing:-.015em}
h2,.h2{font:300 var(--s2)/1.15 var(--f-head); letter-spacing:-.01em}
h3,.t3{font:400 var(--s3)/1.3 var(--f-head)}
h4{font:500 var(--s4)/1.45 var(--f-text)}
.lead{font:400 var(--s3)/1.5 var(--f-text); color:var(--ink-2); margin:0}
.small{font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.accent-text{color:var(--accent-text)}
/* Надзаголовок: есть, но по умолчанию НЕ используется. Только имя на «О себе» и подобные редкие случаи. */
.eyebrow{display:block; font:500 var(--s5)/1 var(--f-text); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
em,i{font-style:italic}
strong,b{font-weight:500}

/* ---------- 4. Сетка и контейнеры ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.sec{padding-top:var(--section)}
.sec:last-child{padding-bottom:var(--section)}
/* секция с линией атмосферы: линия ложится посередине воздуха между блоками, а не впритык к тексту (как .alive-rule) */
.sec[data-atmo-rule]{margin-top:calc(var(--section) * .5); padding-top:calc(var(--section) * .5)}
.sec-head{max-width:46rem; margin-bottom:var(--h2-gap)}
.sec-head:has(+ :is(.grid-2,.grid-3,.cards,.split,.glass,[data-module])){margin-bottom:var(--head-gap)}
.sec-head h2{max-width:20em}
.sec h2 + :is(p,ul,ol,dl,.prose,.lead,.folds){margin-top:var(--h2-gap)}
.sec-head .lead,.sec-head .sub,.sec-head h2 + :is(.lead,.sub){margin-top:var(--sp-3)}
.sec-head .sub{color:var(--ink-3)}
.stack > * + *{margin-top:var(--sp-4)}
.stack-l > * + *{margin-top:var(--sp-6)}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.split{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-8); align-items:start}
.rule{height:1px; background:var(--line); border:0; margin:0}
.center{text-align:center}
@media (max-width:960px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} .split{grid-template-columns:1fr; gap:var(--sp-7)} }
/* «Заголовок слева — текст справа» (как на «Разговоре»), по желанию страницы:
   <div class="wrap split-head"><h2>…</h2><div>…текст…</div></div>  (слева можно и .sec-head).
   На ноутбуке H2 прилипает слева, пока читаешь раздел; до 960 px — одна колонка. */
.split-head{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--sp-8); align-items:start}
.split-head > h2,.split-head > .sec-head{position:sticky; top:calc(var(--head-h) + var(--sp-5)); margin:0}
.split-head > h2{max-width:9em}
.split-head > :last-child{max-width:var(--measure); margin-top:0}
.split-head > :last-child:is(.grid-2,.grid-3,.cards){max-width:none}
@media (max-width:960px){
  .split-head{grid-template-columns:1fr; gap:var(--h2-gap)}
  .split-head > h2,.split-head > .sec-head{position:static}
  .split-head > h2{max-width:none}
}
@media (max-width:760px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* ---------- 5. Текстовая колонка для длинного чтения ---------- */
.prose{max-width:var(--measure); color:var(--ink)}
.prose > * + *{margin-top:1em}
.prose h2{margin-top:var(--sp-7)}
.prose h3{margin-top:var(--sp-6)}
.prose h2 + *{margin-top:var(--h2-gap)}
.prose h3 + *{margin-top:var(--sp-3)}
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--line-2)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose .lead{max-width:none}

/* ---------- 6. Списки ---------- */
.list{list-style:none; padding:0; margin:0}
.list > li{position:relative; padding-left:22px}
.list > li + li{margin-top:var(--sp-2)}
.list > li::before{content:""; position:absolute; left:0; top:.8em; width:10px; height:1px; background:var(--ink-3)}
ol.list{counter-reset:li}
ol.list > li{padding-left:30px}
ol.list > li::before{counter-increment:li; content:counter(li); width:auto; height:auto; top:0; background:none; color:var(--ink-3); font-size:var(--s5); line-height:2.1}
.prose ul:not([class]),.prose ol:not([class]){padding-left:1.2em}
.prose li + li{margin-top:var(--sp-2)}

/* Список-ссылки (строка → стрелка), напр. «Что ближе к тебе сейчас?» */
.link-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.link-list a{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-5); padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:color .2s, padding .3s var(--ease)}
.link-list a::after{content:"→"; color:var(--ink-3); transition:transform .3s var(--ease), color .2s}
.link-list a:hover{padding-left:6px}
.link-list a:hover::after{transform:translateX(4px); color:var(--ink)}

/* ---------- 7. Стекло ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(15,23,34,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,34,.03), 0 16px 36px -28px rgba(15,23,34,.18);
}
.panel-glass{padding:var(--sp-6); border-radius:var(--r-l)}
@media (max-width:760px){ .panel-glass{padding:var(--sp-5)} }

/* ---------- 8. Кнопки и ссылки ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font:500 var(--s4)/1 var(--f-text); text-decoration:none; white-space:nowrap;
  padding:15px 22px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; color:var(--ink); background:none;
  transition:background .2s, border-color .2s, color .2s, transform .2s}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{background:#243040}
.btn.quiet{color:var(--ink)}
.btn.quiet:not(.glass){border-color:var(--line-2)}
.btn.quiet:hover{background:rgba(255,255,255,.8)}
/* Вторая кнопка — настоящее стекло: видимая подложка и граница, одинаковая на всех страницах.
   Стоит ПОСЛЕ .btn, поэтому .btn{background:none} её не перебивает. */
.btn.glass{background:rgba(255,255,255,.72); border-color:rgba(15,23,34,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(15,23,34,.04), 0 10px 22px -16px rgba(15,23,34,.30)}
.btn.glass:hover{background:#fff; border-color:var(--line-2)}
.btn.sm{padding:11px 16px; font-size:var(--s4)}
.btn:active{transform:translateY(1px)}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-6)}
.actions + .small,.actions + .note{margin-top:var(--sp-4)}
/* Текстовая ссылка: «Как проходит разговор →» */
.link{display:inline; padding:0; border:0; background:none; font:inherit; color:var(--ink); cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--line-2); transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ink)}
/* зона нажатия ≥ 44 px у ссылок-кнопок без сдвига вёрстки: невидимый слой вокруг текста */
.link,.site-foot a{position:relative}
.link::before,.site-foot a::before{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:44px; transform:translateY(-50%)}
.link.small{color:var(--ink-3)}
.link.small:hover{color:var(--ink)}
@media (max-width:760px){
  .actions .btn{width:100%}
}

/* ---------- 9. Шапка ---------- */
.site-head{position:relative; z-index:50}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); padding-top:16px; padding-bottom:16px}
.wordmark{font:400 var(--s3)/1 var(--f-head); text-decoration:none; color:var(--ink); letter-spacing:.005em}
.site-nav{display:flex; align-items:center; gap:28px}
.site-nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
.site-nav a:not(.btn){position:relative; display:inline-block; color:var(--ink-2); text-decoration:none; padding:10px 0}
.site-nav a:not(.btn):hover{color:var(--ink)}
/* текущий пункт — тонкая тёплая черта (как в «почерке») */
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1.5px; border-radius:2px; background:var(--accent)}
.menu-btn{display:none}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .site-nav{position:fixed; z-index:80; left:10px; right:10px; top:10px; flex-direction:column; align-items:stretch; gap:0;
    padding:72px 24px 24px; border-radius:var(--r-l);
    background:rgba(252,253,255,.97); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);   /* плотнее: крупный заголовок страницы не просвечивает грязным пятном */
    border:1px solid rgba(15,23,34,.07); box-shadow:0 30px 60px -30px rgba(15,23,34,.35);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .35s var(--ease), visibility 0s .35s}
  .site-head.is-open .site-nav{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--ease)}
  .site-nav ul{flex-direction:column; gap:0}
  .site-nav li + li{border-top:1px solid var(--line)}
  .site-nav a:not(.btn){display:block; padding:14px 0; font:400 var(--s3)/1.3 var(--f-head); color:var(--ink)}
  .site-nav a[aria-current="page"]::after{left:-12px; right:auto; top:18px; bottom:18px; width:2px; height:auto}
  .site-nav .btn,.site-nav .btn.quiet.glass{margin-top:var(--sp-5); width:100%; background:var(--ink); color:#fff; border-color:transparent; box-shadow:none}
  .site-head.is-open .menu-btn{position:relative; z-index:90}
  .menu-scrim{position:fixed; inset:0; z-index:70; background:rgba(252,253,255,.75); opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s}
  .site-head.is-open .menu-scrim{opacity:1; visibility:visible; transition:opacity .25s}
}
@media (min-width:981px){ .menu-scrim{display:none} }

/* ---------- 10. Первый экран ---------- */
/* H1 стоит на одной высоте на всех страницах (--hero-top), первый экран одной высоты (--hero-min).
   Страницы не задают свои отступы .hero / .hero-text и не центрируют H1 по вертикали. */
.hero{position:relative; display:block; min-height:var(--hero-min); padding-top:var(--hero-top)}
.hero > .wrap{width:100%}
.hero-text{position:relative; width:min(640px, 54%); padding:0 0 var(--hero-bottom)}
.hero-text h1{margin-bottom:var(--sp-5)}
.hero-text .lead{max-width:34em}
.hero-text .rows{margin-top:var(--sp-6)}
.hero--text .hero-text{width:min(760px,100%)}
@media (max-width:760px){
  .hero-text{width:auto}
}

/* ---------- 11. Строки «подпись · значение» (цена, условия, факты) ---------- */
.rows{margin:0; border-top:1px solid var(--line)}
.rows > div{display:grid; grid-template-columns:minmax(9rem, 13rem) minmax(0,1fr); column-gap:var(--sp-6); align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line)}
.rows dt{font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.rows dd{margin:0; color:var(--ink)}
/* компактные факты на первом экране: «Формат · один на один, онлайн» */
.rows.facts{border:0; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:var(--sp-4); row-gap:4px}
.rows.facts > div{display:contents}
.rows.facts dt{line-height:1.97}
@media (max-width:760px){
  .rows:not(.facts) > div{grid-template-columns:1fr; row-gap:2px}
}

/* ---------- 12. Раскрывающиеся блоки (недели, вопросы) ---------- */
.folds{border-top:1px solid var(--line)}
.fold{border-bottom:1px solid var(--line)}
.fold > summary{list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto 20px; align-items:baseline; gap:var(--sp-4);
  padding:20px 0; cursor:pointer; color:var(--ink)}
.fold > summary::-webkit-details-marker{display:none}
.fold-title{font:500 var(--s4)/1.45 var(--f-text)}
.fold--week .fold-title{font:400 var(--s3)/1.3 var(--f-head)}
.fold-meta{font-size:var(--s5); line-height:1.45; color:var(--ink-3); white-space:nowrap}
/* тонкий плюс, превращается в минус */
.fold > summary::after{content:""; justify-self:end; align-self:center; width:13px; height:13px;
  background:linear-gradient(var(--ink),var(--ink)) center/13px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1px 13px no-repeat;
  opacity:.55; transition:transform .35s var(--ease), background-size .35s var(--ease)}
.fold[open] > summary::after{background-size:13px 1px, 1px 0}
.fold > summary:hover .fold-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--line-2)}
.fold-body{padding:0 44px 26px 0; max-width:calc(var(--measure) + 44px); color:var(--ink-2)}
.fold-body > * + *{margin-top:.8em}
.fold[open] .fold-body{animation:fold-in .35s var(--ease)}
@keyframes fold-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
/* недели: текущая/выбранная — тёплая черта слева */
.fold--week.is-current > summary{box-shadow:inset 2px 0 0 var(--accent); padding-left:16px}
@media (max-width:760px){
  .fold > summary{grid-template-columns:minmax(0,1fr) 20px; row-gap:2px}
  .fold-meta{grid-column:1; grid-row:2}
  .fold > summary::after{grid-column:2; grid-row:1}
  .fold-body{padding-right:0}
}

/* ---------- 13. Карточки практик ---------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.card{position:relative; display:flex; flex-direction:column; min-height:290px; padding:30px 30px 26px; border-radius:var(--r-l);
  text-decoration:none; color:var(--ink); transition:transform .3s var(--ease), background .3s}
a.card:hover,a.card:focus-visible,.card:has(a:hover){transform:translateY(-2px); background:rgba(255,255,255,.72)}
.card > svg,.card > img.card-art{width:72px; height:72px; color:var(--ink); opacity:.82; margin-bottom:auto}
.card .t3{margin-top:40px}
.card p{margin-top:8px; color:var(--ink-2)}
.card .small{margin-top:18px}
@media (max-width:960px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0; padding:24px; display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:18px; align-items:start}
  .card > svg,.card > img.card-art{width:56px; height:56px; grid-row:span 3; margin:0}
  .card .t3{margin-top:0}
  .card .small{margin-top:10px}
}

/* ---------- 14. Цитата, подсказка, заметка ---------- */
.quote{margin:var(--sp-7) 0; padding:0; font:300 italic var(--s2)/1.25 var(--f-head); color:var(--ink); max-width:22em}
.quote footer,.quote cite{display:block; margin-top:var(--sp-3); font:400 var(--s5)/1.45 var(--f-text); font-style:normal; color:var(--ink-3)}
/* тихая подсказка: мелкая строка без рамок */
.note{font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.note a{color:inherit}
/* рамка для шаблона текста (напр. «Первое сообщение») — спокойный текст, без моноширинного */
.textbox{padding:var(--sp-5) var(--sp-6); border-radius:var(--r-m); max-width:var(--measure)}
.textbox p + p{margin-top:.8em}

/* ---------- 15. Фото и заглушки ---------- */
.photo{position:relative; margin:0; border-radius:var(--r-m); overflow:hidden}
.photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.85)}
.photo figcaption{margin-top:var(--sp-2); font-size:var(--s5); color:var(--ink-3)}
/* Место под фото Саши: <figure class="photo" data-photo-placeholder="что здесь будет">.
   Тихое светлое пятно с тонкой рамкой: поле за ним размывается в дымку. Без сетки точек и без
   видимой подписи — текст атрибута уходит только в aria-label (ставит site.js). */
[data-photo-placeholder]{position:relative; display:grid; place-items:center; aspect-ratio:var(--ratio, 4/5); min-height:180px; border-radius:var(--r-m); overflow:hidden;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line)}
[data-photo-placeholder]::before,[data-photo-placeholder]::after{content:none}
[data-photo-placeholder] > *{position:relative; z-index:1}

/* ---------- 16. Хранилище отметок: кнопка «стереть» ---------- */
[data-marks-clear]{font-size:var(--s5)}

/* ---------- 17. Подвал ---------- */
.site-foot{margin-top:0; padding:var(--sp-8) 0 var(--sp-7); border-top:1px solid var(--line)}
.site-foot .foot-care{max-width:var(--measure); font-size:var(--s4); color:var(--ink)}
.site-foot .foot-care + .foot-care{margin-top:var(--sp-2)}
.site-foot .foot-bounds{max-width:var(--measure); margin-top:var(--sp-5); color:var(--ink-2)}
.site-foot .foot-links{margin-top:var(--sp-7); display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); align-items:baseline}
.site-foot .foot-open{margin-top:var(--sp-7)}
.site-foot .foot-open .small{margin-right:var(--sp-2)}
.site-foot a{color:var(--ink-2); text-decoration:none}
.site-foot a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.site-foot .dot{color:var(--ink-3); margin:0 6px}
.site-foot .foot-sign{margin-top:var(--sp-5)}
@media (max-width:760px){ .site-foot{padding-top:var(--sp-7)} }

/* =====================================================================
   18. ПОЛЕ: пул «омут → поверхность → связи» (логика — field.js)
   ===================================================================== */
.pool{position:absolute; z-index:2; top:0; bottom:0; right:0; left:46%; cursor:none; touch-action:manipulation;
  -webkit-user-select:none; user-select:none}
.pool .links{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.links line{stroke:rgba(15,23,34,.38); stroke-width:1; vector-effect:non-scaling-stroke}
.links line.new{stroke:var(--accent)}
.links line.fut{stroke:rgba(15,23,34,.30); stroke-dasharray:2 5}
.links line.fut.far{stroke:rgba(15,23,34,.16)}
.frag{position:absolute; transform:translate(-50%,-50%); --r:0; border:1px solid transparent; background:none; padding:8px 14px; margin:0;
  font:300 italic var(--s3)/1.2 var(--f-head); color:var(--ink); white-space:nowrap; cursor:none; border-radius:var(--r-pill);
  opacity:calc(.26 + .74 * var(--r)); filter:blur(calc((1 - var(--r)) * 1.4px));
  transition:background .35s, box-shadow .35s, border-color .35s, opacity .45s}
.frag.up{opacity:1; filter:none; background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-color:rgba(15,23,34,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 36px -24px rgba(15,23,34,.28)}
.frag.photo{padding:0; width:clamp(200px,19vw,280px); aspect-ratio:3/2; opacity:1; filter:none; border-radius:var(--r-s)}
.frag.photo img{display:block; width:100%; height:100%; object-fit:cover; border-radius:10px;
  opacity:calc(var(--r) * var(--r) * .95);
  filter:grayscale(1) contrast(1.05) blur(calc((1 - var(--r)) * 7px));
  -webkit-mask-image:radial-gradient(closest-side, #000 calc(35% + var(--r) * 50%), transparent 100%);
  mask-image:radial-gradient(closest-side, #000 calc(35% + var(--r) * 50%), transparent 100%)}
.frag.photo figcaption{display:none}
.frag.photo.up{padding:8px 8px 10px; width:clamp(190px,16vw,236px); aspect-ratio:auto; border-radius:14px; text-align:left}
.frag.photo.up img{opacity:1; filter:saturate(.8); -webkit-mask-image:none; mask-image:none; aspect-ratio:3/2; height:auto}
.frag.photo.up figcaption{display:block; margin:8px 4px 0; font:400 var(--s5)/1.3 var(--f-text); font-style:normal; color:var(--ink-3)}
.mark{position:absolute; width:0; height:0}
.mark i{position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px; border-radius:50%; border:1px solid var(--ink); background:var(--page)}
.mark.mine i{background:var(--accent); border-color:var(--accent)}
.mark span,.mark input{position:absolute; left:14px; top:-10px; font:400 var(--s5)/1.4 var(--f-text); color:var(--ink-2); white-space:nowrap}
.mark input{width:170px; padding:4px 10px; top:-14px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:rgba(255,255,255,.85); color:var(--ink); outline:none}
.mark input:focus{border-color:var(--ink)}
.mark.l span,.mark.l input{left:auto; right:14px}
.cross{position:absolute; width:15px; height:15px; margin:-7px 0 0 -7px; pointer-events:none; opacity:0; transition:opacity .2s}
.cross::before,.cross::after{content:""; position:absolute; background:var(--ink)}
.cross::before{left:7px; top:0; width:1px; height:15px}
.cross::after{top:7px; left:0; height:1px; width:15px}
.pool-hint{position:absolute; pointer-events:none; opacity:0; transition:opacity .25s; white-space:nowrap; font-size:var(--s5); color:var(--ink-3)}
/* будущее: координаты без картинки */
.coord{position:absolute; width:0; height:0}
.coord i{position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; border:1px solid rgba(15,23,34,.55)}
.coord i::before,.coord i::after{content:""; position:absolute; background:rgba(15,23,34,.55)}
.coord i::before{left:6px; top:-6px; width:1px; height:24px}
.coord i::after{top:6px; left:-6px; height:1px; width:24px}
.coord span{position:absolute; left:20px; top:-10px; white-space:nowrap; font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.coord.l span{left:auto; right:20px}
.coord.far{opacity:.45}
.pool-foot{position:absolute; left:0; right:var(--gutter); bottom:26px; z-index:4; display:flex; justify-content:flex-end; gap:var(--sp-5); flex-wrap:wrap; cursor:auto}
@media (max-width:760px){
  .pool{position:relative; left:auto; top:auto; bottom:auto; height:440px; margin:0 calc(var(--gutter) * -1)}
  .pool > [style*="--ml"]{left:var(--ml) !important; top:var(--mt) !important}
  .pool-foot{left:var(--gutter); right:var(--gutter); bottom:12px; justify-content:space-between}
}

/* =====================================================================
   19. (опционально) «Остановиться и увидеть»: [data-stop] — тихая версия.
   По умолчанию нигде не включён. Снимок остаётся на месте и в цвете,
   мир вокруг чуть бледнеет, проступают точки силы; подпись — по наведению.
   ===================================================================== */
.stop-btn{border:0; background:none; padding:6px 0; cursor:pointer; font:400 var(--s5)/1.45 var(--f-text); color:var(--ink-3); text-align:left}
.stop-btn:hover,.stop-btn[aria-pressed="true"]{color:var(--ink)}
[data-stop]{position:relative}
.stop-layer{position:absolute; inset:0; pointer-events:none; z-index:2}
.frag.photo.up .stop-layer{inset:8px 8px auto 8px; aspect-ratio:3/2}
.stop-rays{position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; transition:opacity .4s}
.stop-rays line{stroke:rgba(255,255,255,.75); stroke-width:1; vector-effect:non-scaling-stroke}
.stop-rays line.on{stroke:var(--accent)}
.pt{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border:0; background:none; padding:0; cursor:pointer; opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .35s, transform .45s var(--ease)}
.pt i{position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px; border-radius:50%; border:1px solid #fff; background:rgba(255,255,255,.25); box-shadow:0 0 0 .5px rgba(15,23,34,.3); transition:all .25s}
.pt span{position:absolute; left:28px; top:4px; white-space:nowrap; font:400 var(--s5)/1.4 var(--f-text); color:var(--ink); padding:2px 9px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.85); opacity:0; transition:opacity .25s; pointer-events:none}
.pt.l span{left:auto; right:28px}
.pt:hover span,.pt:focus-visible span{opacity:1}
.pt.on i{background:var(--accent); border-color:var(--accent)}
/* в обычном виде найденное остаётся маленькими тёплыми точками */
[data-stop]:not(.scan) .pt.on{opacity:1; transform:none; pointer-events:none}
[data-stop]:not(.scan) .pt.on span{display:none}
[data-stop]:not(.scan) .pt.on i{width:6px; height:6px; margin:-3px; border:0; box-shadow:none}
[data-stop].scan{z-index:61}
[data-stop].scan .stop-rays{opacity:.6}
[data-stop].scan .pt.show{opacity:1; transform:none; pointer-events:auto}
.stop-veil{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; transition:opacity .5s; background:rgba(252,253,255,.5)}
body.is-scan .stop-veil{opacity:1; pointer-events:auto}
body.is-scan .field-canvas{opacity:.35}
.pool.scan-host{z-index:61}
.pool.scan-host .frag:not(.scan){opacity:.15 !important}
.pool.scan-host .links,.pool.scan-host .coord,.pool.scan-host .mark{opacity:.2; transition:opacity .45s}
.pool .frag.photo.scan img{opacity:1 !important; filter:saturate(.85) !important; -webkit-mask-image:none !important; mask-image:none !important}
/* кольцо удержания (пробел / палец) */
.stop-hold{position:fixed; z-index:70; width:40px; height:40px; margin:-20px 0 0 -20px; pointer-events:none; opacity:0; transition:opacity .15s}
.stop-hold svg{width:40px; height:40px; transform:rotate(-90deg)}
.stop-hold circle{fill:none; stroke-width:1.2}
.stop-hold .tr{stroke:rgba(15,23,34,.12)}
.stop-hold .pg{stroke:var(--ink); stroke-dasharray:100.6; stroke-dashoffset:100.6}

/* =====================================================================
   19а. Фоновые фрагменты [data-ghost] — без интеракции.
   Кладутся в .ghosts (слой внутри секции с data-field="dense").
   Поле само по очереди проявляет их знаками; сама картинка видна едва-едва.
   ===================================================================== */
.ghosts{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.ghost{position:absolute; transform:translate(-50%,-50%); margin:0; pointer-events:none; --r:0;
  opacity:calc(var(--r) * var(--r) * var(--r) * .6); filter:blur(calc((1 - var(--r)) * 5px)); transition:none}
.ghost img{display:block; width:clamp(200px,20vw,300px); aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-s);
  filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 100%); mask-image:radial-gradient(closest-side, #000 40%, transparent 100%)}
.ghost:not(:has(img)){font:300 italic var(--s3)/1.2 var(--f-head); color:var(--ink); white-space:nowrap}
@media (max-width:760px){
  .ghosts{position:relative; inset:auto; height:300px; margin:0 calc(var(--gutter) * -1)}
  .ghost[style*="--ml"]{left:var(--ml) !important; top:var(--mt) !important}
}

/* ---------- 20. Меньше движения ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* Кнопка Telegram в шапке: только в листе меню на телефоне (решение 25.10) */
@media (min-width:981px){ .site-nav > .btn{display:none} }

/* Шапка при прокрутке (сценарий 2): прозрачная наверху; после 80 px — стекло;
   вниз — уезжает, вверх — возвращается. Стекло — на ::before, чтобы не ломать
   фиксированный лист меню на телефоне (backdrop-filter/transform у родителя). */
.site-head{position:sticky; top:0; transition:transform .35s var(--ease)}
.site-head::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .25s;
  background:rgba(252,253,255,.93); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid var(--line)}
/* фон плотнее, чем у .glass: модуль passage даёт шапке view-transition-name, и размытие под ней может не сработать */
.site-head.is-glass::before{opacity:1}
/* стекло ниже на 16 px; margin-bottom возвращает эти 16 px, чтобы страница под шапкой не прыгала */
.site-head.is-glass .wrap{padding-top:8px; padding-bottom:8px}
.site-head.is-glass{margin-bottom:16px}
@media (max-width:980px){
  .site-head .wrap,.site-head.is-glass .wrap{padding-top:12px; padding-bottom:12px}
  .site-head.is-glass{margin-bottom:0}
}
.site-head.is-hidden:not(.is-open){transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){ .site-head{transition:none} }

/* split-head: правая колонка начинается вровень с H2 */
.split-head > h2 + *{margin-top:0}