/* ==========================================================================
   СРЕДА — прототип · один дизайн-код на все страницы
   Грамматика: Augen Pro (вес не выше 400, акцент обводкой, hairline 0.5,
   радиусы 54/26/10/9999, ритм 94, контейнер 1200, без теней)
   Цвет: паспорта брендбука СРЕДЫ · 10 глубина · 20 база · 30 сигнал · 40 свет
   ========================================================================== */

/* SONGER — локально, лежит в assets рядом */

/* ---------- токены ---------- */
:root{
  color-scheme:dark;
  --an-10:#0F1935; --an-20:#184083; --an-30:#3771C7; --an-40:#84B3EE;
  --pr-10:#451E0D; --pr-20:#7B3B13; --pr-30:#D57530; --pr-40:#F6E6BB;
  --ex-10:#1A0C0D; --ex-20:#481113; --ex-30:#7B2225; --ex-40:#8C5252;
  --fn-10:#080808; --fn-20:#2E2D2F; --fn-30:#7A797B; --fn-40:#D6D4D2;
  --sr-10:#282829; --sr-20:#474B59; --sr-30:#969696; --sr-40:#D4D4D4;

  --maxw:1200px; --pad:clamp(22px,5vw,50px); --gap:clamp(62px,8vw,94px);
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
  --r-nav:10px; --r-btn:26px; --r-card:54px; --r-pill:9999px;
  --fast:140ms; --base:260ms;
  /* Пружины Apple, посчитанные из spring(response, dampingFraction).
     Без них 18 переходов ниже были недействительны и срабатывали мгновенно. */
  --t-snappy:380ms;
  --e-snappy:linear(0,.0812,.2506,.436,.602,.7353,.8345,.9037,.9493,.9774,.9936,1.0019,1.0055,1.0063,1.0058,1.0047,1.0035,1.0025,1.0017,1.001,1.0006,1.0003,1.0001,1,1,1,1);
  --t-smooth:460ms;
  --e-smooth:linear(0,.0295,.1015,.1976,.3046,.4128,.5152,.6076,.6877,.7551,.8104,.8549,.8902,.9178,.9391,.9554,.9677,.9769,.9836,.9885,.992,.9945,.9962,.9974,.9983,.9989,.9993,.9995,.9997,.9998,.9999,1); --slow:520ms; --scene:900ms;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.22,1.02,.36,1);
  --f-ui:"Helvetica Neue",Helvetica,Arial,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-d:'SONGER',"Helvetica Neue",Helvetica,Arial,sans-serif;

  --canvas:var(--sr-10);
  --plate:rgba(71,75,89,.24); --plate-hi:rgba(71,75,89,.40);
  --panel:rgba(48,50,56,.50);
  --ink:#D4D4D4; --ink-hi:#FFFFFF; --muted:#A9A9AB; --ash:#969696;
  --sig:#969696; --sig-hi:#D4D4D4;
  --hair:rgba(212,212,212,.16); --hair-2:rgba(212,212,212,.085);
  --an:#84B3EE; --pr:#F6E6BB; --ex:#B98282; --fn:#D6D4D2;
  --an-l:#3771C7; --pr-l:#D57530; --ex-l:#7B2225; --fn-l:#7A797B;
  --lvl:var(--sr-30); --lvl-t:var(--sr-40); --lvl-deep:var(--sr-20);
}
:root[data-theme="light"]{
  color-scheme:light;
  --canvas:#f2f2f4; --plate:#fdfdfd; --plate-hi:#ffffff; --panel:rgba(253,253,253,.70);
  --ink:#0f1012; --ink-hi:#020201; --muted:#5e5e5e; --ash:#8f8f8f;
  --sig:#0071e3; --sig-hi:#0071e3;
  --hair:rgba(0,0,0,.09); --hair-2:rgba(0,0,0,.05);
  --an:#3771C7; --pr:#7B3B13; --ex:#7B2225; --fn:#2E2D2F;
  --an-l:#1E4E96; --pr-l:#8A4A18; --ex-l:#6A1D20; --fn-l:#4A494B;
}
/* без уровня и без акцента светлая страница берёт графит:
   белёсый акцент на светлом фоне нечитаем */
:root[data-theme="light"]:not([data-accent]):not([data-level]){
  --lvl:var(--sr-20); --lvl-t:#3F4350; --lvl-deep:var(--sr-30);
}
/* уровневая тема страницы */
[data-level="an"]{--lvl:var(--an-l);--lvl-t:var(--an);--lvl-deep:var(--an-10)}
[data-level="pr"]{--lvl:var(--pr-l);--lvl-t:var(--pr);--lvl-deep:var(--pr-10)}
[data-level="ex"]{--lvl:var(--ex-l);--lvl-t:var(--ex);--lvl-deep:var(--ex-10)}
[data-level="fn"]{--lvl:var(--fn-l);--lvl-t:var(--fn);--lvl-deep:var(--fn-10)}

/* ---------- база ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:148px}
body{background:var(--canvas);color:var(--ink);font-family:var(--f-ui);font-weight:350;
  font-size:16px;line-height:1.2;letter-spacing:-.02em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background var(--slow) var(--ease),color var(--slow) var(--ease)}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:1.5px solid var(--sig);outline-offset:4px;border-radius:3px}
::selection{background:var(--lvl);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- материнское поле ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field .glow{position:absolute;inset:-25%;
  background:
    radial-gradient(54% 42% at 18% 6%, rgba(212,212,212,.12) 0%, transparent 62%),
    radial-gradient(44% 34% at 86% 2%, rgba(150,150,150,.09) 0%, transparent 58%),
    radial-gradient(70% 54% at 50% 104%, rgba(71,75,89,.40) 0%, transparent 66%)}
.field .tint{position:absolute;inset:-25%;opacity:0;transition:opacity var(--scene) var(--ease)}
.field::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,40,41,.14) 0%,rgba(40,40,41,.44) 52%,rgba(40,40,41,.86) 100%)}
:root[data-theme="light"] .field .glow{background:
    radial-gradient(60% 46% at 20% 4%, rgba(0,0,0,.028) 0%, transparent 64%),
    radial-gradient(60% 46% at 80% 100%, rgba(0,0,0,.035) 0%, transparent 64%)}
:root[data-theme="light"] .field::after{background:none}

/* iOS Safari: fixed-слой может оставаться статичным, но его реальные края
   нельзя оставлять у границ viewport — тогда Safari использует его как
   отдельную непрозрачную подложку для browser chrome. Холст и сам контейнер
   прозрачны для sampling; визуальный базовый цвет рисуется background-image. */
@media (max-width:900px){
  html{background-color:transparent}
  body{background-color:transparent;
    background-image:linear-gradient(var(--canvas),var(--canvas));
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:scroll}
  .field{display:block;position:fixed;inset:-12vmax;isolation:isolate;
    background-color:transparent}
}

/* ---------- прогресс: линия среды в шапке ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.prog i{display:block;height:100%;width:100%;background:var(--lvl);opacity:.9;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  /* масштаб вместо ширины: полоса обновляется на каждом кадре прокрутки,
     и анимация ширины заставляла браузер пересчитывать макет всю дорогу */
  transition:transform 90ms linear,background var(--scene) var(--ease)}

/* ---------- навигация ---------- */
/* ================= ОСТРОВ =================
   Пилюля и выдвижная полоса — один контейнер и одна геометрия.
   Правило Apple: стекло не семплирует стекло, поэтому размытые части
   НИКОГДА не перекрываются — в свёрнутом виде полоса полностью
   спрятана за пилюлей и погашена, в раскрытом стоит под ней.
   Пружина раскрытия — .snappy (response .3 / damping .85), та же,
   что у Dynamic Island. */
.island{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:35;
  display:flex;flex-direction:column;align-items:center;
  max-width:calc(100vw - 24px);pointer-events:none;
  transition:transform var(--t-snappy) var(--e-snappy),opacity 200ms linear}
.island>*{pointer-events:auto;max-width:100%}
.island.hide{transform:translateX(-50%) translateY(-190%);opacity:0}

.nav{position:relative;z-index:2;
  display:flex;align-items:center;gap:4px;
  background:var(--panel);border:.5px solid var(--hair);border-radius:var(--r-nav);
  padding:6px 6px 6px 15px;
  backdrop-filter:blur(34px) saturate(165%);-webkit-backdrop-filter:blur(34px) saturate(165%)}
.nav .mark{display:inline-flex;align-items:center;gap:11px;margin-right:12px;color:var(--ink-hi)}
.nav .mark svg{width:18px;height:auto;flex:none}
.nav .mark b{font-family:var(--f-d);font-weight:400;font-size:12px;letter-spacing:.52em;margin-right:-.52em}
.nav .item{position:relative;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:7px;
  min-height:36px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:none;border:0;font-family:inherit;font-weight:350;cursor:pointer;
  transition:color var(--base) var(--ease)}
.nav .item::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--ease)}
.nav .item:hover,.nav .item[aria-expanded="true"]{color:var(--ink-hi)}
.nav .item:hover::after{transform:scaleX(1)}
.nav .item.on{color:var(--lvl-t)}
.nav .item.on::after{transform:scaleX(1);opacity:.45}
.nav .item .chev{display:inline-block;font-size:9px;opacity:.6;
  transition:transform var(--base) var(--ease)}
.nav .item[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav .sep{width:.5px;height:20px;background:var(--hair);margin:0 5px;flex:none}
.nav .enter{display:inline-flex;align-items:center;gap:8px;border:.5px solid var(--sig);
  color:var(--ink-hi);border-radius:var(--r-pill);padding:8px 15px;font-size:13px;min-height:36px;
  white-space:nowrap;transition:border-color var(--base),background var(--base)}
.nav .enter:hover{border-color:var(--lvl-t);background:var(--plate-hi)}
.nav .theme{border:.5px solid var(--hair);border-radius:var(--r-pill);background:none;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);transition:border-color var(--base),color var(--base)}
.nav .theme:hover{border-color:var(--sig);color:var(--ink-hi)}
.nav .theme svg{width:14px;height:14px}
.nav .burger{display:none}

/* ---------- мега-меню уровней ---------- */
.mega{position:fixed;top:78px;left:50%;transform:translateX(-50%) translateY(-14px) scale(.94);z-index:34;
  width:min(var(--maxw),calc(100vw - 24px));background:var(--panel);
  border:.5px solid var(--hair);border-radius:26px;padding:22px;
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 0;
  transition:opacity 170ms linear,transform var(--t-snappy) var(--e-snappy),
             visibility 0s linear var(--t-snappy)}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity 200ms linear,transform var(--t-snappy) var(--e-snappy),visibility 0s}
.mega .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mega .m{position:relative;display:flex;flex-direction:column;gap:7px;
  padding:20px 20px 18px;border-radius:22px;border:.5px solid var(--hair-2);
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease)}
.mega .m:hover{background:var(--plate-hi);border-color:var(--mc)}
.mega .m .k{font-size:10.5px;color:var(--ash);padding-right:36px}
.mega .m .n{font-family:var(--f-d);font-weight:400;font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mt);width:fit-content}
/* градиент уровня по буквам; тёмный конец подмешан к светлому,
   иначе у Экспоненты хвост уходит в нечитаемое на тёмном фоне */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .mega .m .n{
    background-image:linear-gradient(100deg,var(--mt) 8%,
      color-mix(in srgb,var(--mc) 62%,var(--mt)) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
}
.mega .m .q{font-size:13px;color:var(--muted);line-height:1.35;margin-top:1px}
.mega .m svg{width:100%;height:22px;overflow:visible}
/* знак уровня залит, а не обведён: сплошная форма читается крупнее контура */
.mega .m svg path{fill:currentColor;stroke:none}
.mega .m .th{font-size:11.5px;color:var(--ash);margin-top:auto;padding-top:14px}
.mega .foot{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;padding-top:14px;
  border-top:.5px solid var(--hair-2);font-size:13px;color:var(--muted)}
.mega .foot a{display:inline-flex;align-items:center;gap:7px}
.mega .foot a:hover{color:var(--ink-hi)}
@media (max-width:900px){.mega .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- мобильный лист ---------- */
@media (max-width:860px){
  .nav .item[data-desk]{display:none}
  .nav .burger{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border:.5px solid var(--hair);border-radius:var(--r-pill);
    background:none;color:var(--ink);cursor:pointer}
  .nav .enter span{display:none}
  .nav .enter{padding:8px 12px}
}
.sheet{display:none;position:fixed;inset:0;min-height:100dvh;z-index:50;background:var(--canvas);
  padding:calc(88px + var(--safe-t)) calc(var(--pad) + var(--safe-r))
    calc(40px + var(--safe-b)) calc(var(--pad) + var(--safe-l));overflow-y:auto}
.sheet.open{display:block}
.sheet .close{position:fixed;top:max(26px,calc(var(--safe-t) + 10px));
  right:calc(var(--pad) + var(--safe-r));width:40px;height:40px;
  border:.5px solid var(--hair);border-radius:var(--r-pill);background:var(--panel);
  color:var(--ink);cursor:pointer;font-size:18px;line-height:1}
.sheet h5{font-size:11px;color:var(--ash);font-weight:350;margin:26px 0 10px}
.sheet a{display:block;padding:11px 0;font-size:19px;color:var(--ink);
  border-bottom:.5px solid var(--hair-2)}
.sheet a.lv{display:flex;align-items:baseline;gap:12px}
.sheet a.lv i{font-style:normal;font-size:11px;color:var(--ash)}

/* ---------- типографика ---------- */
.kicker{font-size:12px;color:var(--ash)}
h1{font-family:var(--f-d);font-weight:400;font-size:clamp(28px,4.2vw,42px);
  letter-spacing:.52em;margin-right:-.52em;color:var(--ink-hi);line-height:1.14}
:root[data-theme="light"] h1.plain{letter-spacing:-.025em}
h2{font-family:var(--f-d);font-weight:400;font-size:clamp(22px,2.7vw,29px);
  letter-spacing:.01em;line-height:1.22;max-width:24ch;color:var(--ink-hi)}
h3{font-size:16px;font-weight:400;color:var(--ink-hi);line-height:1.3}
p{font-size:16px;line-height:1.45;color:var(--muted);max-width:58ch}
p.lead{font-size:18px;color:var(--ink);max-width:46ch}
p.small{font-size:13px;color:var(--ash);max-width:54ch;line-height:1.48}
strong{font-weight:400;color:var(--ink-hi)}
.num{font-variant-numeric:tabular-nums}

/* ---------- кнопки ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;
  padding:12px 21px;border-radius:var(--r-btn);border:.5px solid var(--hair);
  color:var(--ink);font-size:14px;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:400;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--base) var(--ease),color var(--base) var(--ease),
             transform var(--fast) var(--ease)}
.btn>*{position:relative;z-index:1}
.btn::before{content:'';position:absolute;inset:0;z-index:0;background:var(--plate-hi);
  opacity:0;transition:opacity var(--base) var(--ease)}
.btn .ar{display:inline-block;transition:transform var(--base) var(--spring)}
.btn:hover{border-color:var(--lvl-t);color:var(--ink-hi)}
.btn:hover::before{opacity:.6}
.btn:hover .ar{transform:translateX(5px)}
.btn:active{transform:scale(.985)}
.btn.primary{border-color:var(--lvl-t)}
.btn.primary .ar{color:var(--lvl-t)}
.link{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--lvl-t);
  font-size:14px;min-height:34px}
.link::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--base) var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link .ar{transition:transform var(--base) var(--spring)}
.link:hover .ar{transform:translateX(4px)}
.tag{display:inline-flex;align-items:center;border:.5px solid var(--hair);border-radius:var(--r-pill);
  padding:5px 13px;font-size:12px;color:var(--muted);white-space:nowrap;
  transition:border-color var(--base),color var(--base)}
.tag.sig{border-color:var(--lvl-t);color:var(--lvl-t)}

/* ---------- секции ---------- */
section{padding:var(--gap) 0;position:relative;z-index:1}
/* линия между разделами убрана: она разрезала композицию.
   Разделы теперь разводит только воздух. */

/* Второй слой чтения: полезные до решения ответы остаются в основном потоке,
   методика, архив и внутренние регламенты открываются только по запросу. */
section[data-consumer-fold]{padding:clamp(10px,1.6vw,18px) 0}
.consumer-fold{position:relative;border-top:.5px solid var(--hair);border-bottom:.5px solid var(--hair)}
.consumer-fold__summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;
  align-items:center;gap:clamp(12px,2vw,24px);min-height:86px;padding:22px 0;
  color:var(--ink-hi);cursor:pointer;transition:color var(--base) var(--ease)}
.consumer-fold__summary::-webkit-details-marker{display:none}
.consumer-fold__summary:hover{color:var(--lvl-t)}
.consumer-fold__label{font-family:var(--f-d);font-size:clamp(15px,1.5vw,19px);
  font-weight:400;letter-spacing:.045em;text-transform:uppercase;line-height:1.25}
.consumer-fold__action{font-size:12px;color:var(--ash);white-space:nowrap}
.consumer-fold__plus{position:relative;width:28px;height:28px;border:.5px solid var(--hair);
  border-radius:50%;transition:border-color var(--base) var(--ease),transform var(--t-snappy) var(--e-snappy)}
.consumer-fold__plus::before,.consumer-fold__plus::after{content:'';position:absolute;left:8px;right:8px;top:13px;
  height:.5px;background:currentColor}
.consumer-fold__plus::after{transform:rotate(90deg);transition:transform var(--base) var(--ease)}
.consumer-fold[open] .consumer-fold__plus{border-color:var(--lvl-t);transform:rotate(180deg)}
.consumer-fold[open] .consumer-fold__plus::after{transform:rotate(0)}
.consumer-fold__body{padding:clamp(20px,3vw,34px) 0 var(--gap)}
.consumer-fold__body>.pair:first-child{margin-top:0}
@media(max-width:620px){
  .consumer-fold__summary{grid-template-columns:minmax(0,1fr) 28px;min-height:76px;padding:18px 0}
  .consumer-fold__action{display:none}
  .consumer-fold__label{font-size:14px;letter-spacing:.04em}
}

.pair{display:grid;grid-template-columns:136px minmax(0,1fr);gap:clamp(18px,3vw,30px);align-items:start}
.pair .k{font-size:12px;color:var(--ash);padding-top:5px}
@media (max-width:760px){.pair{grid-template-columns:1fr;gap:12px}}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,50px);margin-top:32px}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:22px}}

/* ---------- герой ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(120px,16vh,170px);padding-bottom:clamp(36px,6vh,64px);border-top:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}

/* ---------- линия среды ---------- */
.env{margin-top:clamp(36px,5vh,64px);border-top:.5px solid var(--hair);padding-top:22px}
@media (max-width:720px){}

/* ---------- диагностика уровня ---------- */
.diag{border:.5px solid var(--hair);border-radius:var(--r-card);background:var(--plate);
  padding:clamp(26px,3.6vw,50px);margin-top:34px}
/* состояния идут лестницей сверху вниз: под первым уровнем второй.
   В две колонки под первым оказывался третий и порядок уровней ломался. */
.diag .qs{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.qbtn{position:relative;text-align:left;padding:18px 20px;border-radius:22px;
  border:.5px solid var(--hair-2);background:transparent;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:350;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;
  transition:border-color var(--base) var(--ease),background var(--base) var(--ease),
             color var(--base) var(--ease)}
.qbtn:hover{border-color:var(--qc);background:var(--plate-hi);color:var(--ink-hi)}
.qbtn[aria-pressed="true"]{border-color:var(--qc);background:var(--plate-hi);color:var(--ink-hi)}
.qbtn i{font-style:normal;font-size:11px;color:var(--ash);transition:color var(--base)}
.qbtn[aria-pressed="true"] i{color:var(--qc)}
.diag .res{margin-top:22px;padding-top:20px;border-top:.5px solid var(--hair-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  opacity:0;transform:translateY(8px);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.diag .res.on{opacity:1;transform:none}
.diag .res .rl{font-family:var(--f-d);font-weight:400;font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rc)}

/* ---------- карточки уровней ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:clamp(28px,4vw,46px)}
.card{position:relative;display:flex;flex-direction:column;min-height:248px;
  padding:clamp(26px,3.4vw,46px);border-radius:var(--r-card);
  border:.5px solid var(--hair-2);background:var(--plate);
  transition:background var(--base) var(--ease),transform var(--base) var(--ease)}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:.5px solid var(--lc);opacity:0;transition:opacity var(--base) var(--ease)}
.card:hover,.card:focus-visible{background:var(--plate-hi);transform:translateY(-2px)}
.card:hover::after,.card:focus-visible::after{opacity:.6}
.card .cn{font-size:10.5px;color:var(--ash)}
.card .nm{font-family:var(--f-d);font-weight:400;font-size:clamp(22px,2.6vw,27px);letter-spacing:.06em;
  text-transform:uppercase;margin-top:18px;color:var(--lt)}
.card .q{font-size:16px;color:var(--muted);margin-top:10px}
.card .dsc{font-size:13px;color:var(--ash);margin-top:10px;max-width:34ch;line-height:1.42}
.card .sg{margin-top:auto;padding-top:26px}
.card .sg svg{display:block;width:100%;height:32px;overflow:visible}
.card .sg path{fill:none;stroke:var(--lc);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.card .ft{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.card .go{font-size:12.5px;color:var(--lt);display:inline-flex;align-items:center;gap:7px}
.card .go i{font-style:normal;display:inline-block;transition:transform var(--base) var(--spring)}
.card:hover .go i{transform:translateX(5px)}
@media (max-width:820px){.cards{grid-template-columns:1fr}.card{border-radius:34px;min-height:0}}

/* ---------- строки ---------- */
.rows{margin-top:30px;border-top:.5px solid var(--hair)}
.row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(14px,2.6vw,32px);padding:19px 0;border-bottom:.5px solid var(--hair-2);
  align-items:start;transition:background var(--base) var(--ease)}
.row:hover{background:var(--plate)}
.row .n{font-size:11.5px;color:var(--ash);padding-top:3px}
.row .t{font-size:15px;color:var(--ink-hi)}
.row .d{font-size:13.5px;color:var(--ash);line-height:1.48;max-width:54ch}
@media (max-width:820px){.row{grid-template-columns:36px minmax(0,1fr)}.row .d{grid-column:2}}

/* ---------- лента контента ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.fbtn{border:.5px solid var(--hair-2);border-radius:var(--r-pill);padding:7px 15px;
  font-size:13px;color:var(--muted);background:none;cursor:pointer;font-family:inherit;font-weight:350;
  min-height:36px;transition:border-color var(--base),color var(--base),background var(--base)}
.fbtn:hover{border-color:var(--sig);color:var(--ink-hi)}
.fbtn[aria-pressed="true"]{border-color:var(--lvl-t);color:var(--ink-hi);background:var(--plate)}
.feed{margin-top:24px;border-top:.5px solid var(--hair)}
.it{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:clamp(14px,2.4vw,26px);
  align-items:center;padding:15px 0;border-bottom:.5px solid var(--hair-2);
  transition:background var(--base) var(--ease)}
.it:hover{background:var(--plate)}
.it .cv{width:104px;height:62px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--c1),var(--c2));display:flex;align-items:flex-end;padding:8px}
.it .cv span{display:block}
.it .tt{display:block;font-size:15.5px;color:var(--ink-hi);line-height:1.3}
.it .mt{display:block;font-size:12.5px;color:var(--ash);margin-top:5px}
.it .rt{font-size:12px;color:var(--ash);white-space:nowrap}
.it.locked .tt{color:var(--muted)}
@media (max-width:720px){.it{grid-template-columns:72px minmax(0,1fr);row-gap:8px}
  .it .cv{width:72px;height:46px}.it .rt{grid-column:2}}

/* ---------- цифры ---------- */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);
  margin-top:30px;border-top:.5px solid var(--hair);padding-top:26px}
.figs .v{font-family:var(--f-d);font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1;
  color:var(--ink-hi);letter-spacing:.01em}
.figs .l{margin-top:10px;font-size:13px;color:var(--ash);max-width:26ch;line-height:1.42}
@media (max-width:820px){.figs{grid-template-columns:1fr;gap:22px}}

/* ---------- вход ---------- */
.entry{margin-top:30px;border-top:.5px solid var(--hair)}
.e{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) auto;
  gap:clamp(14px,2.6vw,30px);align-items:center;padding:17px 0;
  border-bottom:.5px solid var(--hair-2);transition:background var(--base) var(--ease)}
.e:hover{background:var(--plate)}
.e .nm{font-size:15px;color:var(--el)}
.e .hw{font-size:13.5px;color:var(--ash);line-height:1.45;max-width:54ch}
@media (max-width:720px){.e{grid-template-columns:1fr;gap:8px}.e .tag{justify-self:start}}

/* ---------- лифт между уровнями ---------- */
.lift{margin-top:clamp(44px,6vw,80px);padding-top:22px;border-top:.5px solid var(--hair);
  display:flex;justify-content:space-between;gap:22px;align-items:flex-start}
.lift a{display:inline-flex;flex-direction:column;gap:8px;padding:12px 0;min-height:56px;justify-content:center}
.lift a.next{align-items:flex-end;text-align:right}
.lift .r{display:block;width:58px;height:1px;background:var(--c);opacity:.75;
  transform:scaleX(.586);transform-origin:0 50%;
  transition:transform var(--base) var(--spring),opacity var(--base)}
.lift a.next .r{transform-origin:100% 50%}
.lift a:hover .r{transform:scaleX(1);opacity:1}
.lift .k{font-size:11px;color:var(--ash);white-space:nowrap}
.lift .n{font-family:var(--f-d);font-weight:400;font-size:15px;letter-spacing:.3em;color:var(--muted);
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;transition:color var(--base)}
.lift a:hover .n{color:var(--ink-hi)}
.lift .n i{font-style:normal;letter-spacing:0;color:var(--c);
  transition:transform var(--base) var(--spring)}
.lift a.prev:hover .n i{transform:translateX(-5px)}
.lift a.next:hover .n i{transform:translateX(5px)}

/* ---------- подвал: три яруса ---------- */
footer{position:relative;z-index:1;border-top:.5px solid var(--hair);margin-top:var(--gap)}
.f-act{padding:clamp(34px,4vw,52px) 0;border-bottom:.5px solid var(--hair-2)}
.f-act .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,50px);align-items:center}
@media (max-width:820px){.f-act .in{grid-template-columns:1fr;gap:24px}}
.sub{display:flex;gap:8px;flex-wrap:wrap}
.sub input{flex:1;min-width:200px;min-height:46px;padding:12px 18px;border-radius:var(--r-btn);
  border:.5px solid var(--hair);background:transparent;color:var(--ink);font-family:inherit;
  font-size:14px;font-weight:350;transition:border-color var(--base)}
.sub input::placeholder{color:var(--ash)}
.sub input:focus{outline:none;border-color:var(--lvl-t)}
.f-map{padding:clamp(34px,4vw,54px) 0 clamp(26px,3vw,38px)}
.fg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.5vw,28px)}
.fg h4{font-size:11px;color:var(--ash);font-weight:350}
.fg ul{list-style:none;margin-top:13px;display:flex;flex-direction:column;gap:8px}
.fg a{font-size:13.5px;color:var(--muted);display:inline-flex;min-height:24px;align-items:center;
  transition:color var(--base) var(--ease)}
.fg a:hover{color:var(--ink-hi)}
@media (max-width:900px){.fg{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
@media (max-width:600px){.fg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-legal{border-top:.5px solid var(--hair-2);
  padding:22px 0 calc(clamp(28px,3.5vw,42px) + var(--safe-b))}
.f-legal .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:820px){.f-legal .in{grid-template-columns:1fr}}
.f-legal p{font-size:11.5px;color:var(--ash);line-height:1.6;max-width:64ch}
.f-legal .links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end}
.f-legal .links a{font-size:11.5px;color:var(--ash)}
.f-legal .links a:hover{color:var(--ink)}
@media (max-width:820px){.f-legal .links{justify-content:flex-start}}
.f-mark{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--ash)}
.f-mark b{font-family:var(--f-d);font-weight:400;font-size:12px;letter-spacing:.52em;margin-right:-.52em}

/* ---------- появление ---------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity 720ms var(--ease),transform 720ms var(--ease)}
.rv.in{opacity:1;transform:none}
.rvl{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease)}
.rvl.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rvl{opacity:1;transform:none;clip-path:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}

/* ---------- хлебные крошки ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12px;color:var(--ash)}
.crumbs a{color:var(--ash);transition:color var(--base)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.5}

/* ---------- под-навигация уровня ---------- */
.subnav{position:relative;z-index:1;margin-top:8px;
  border:.5px solid var(--hair);border-radius:var(--r-nav);
  background:var(--panel);
  backdrop-filter:blur(34px) saturate(165%);-webkit-backdrop-filter:blur(34px) saturate(165%);
  padding:4px 7px;transform-origin:50% 0;
  /* свёрнуто: убрано за пилюлю и сжато */
  transform:translateY(calc(-100% - 8px)) scale(.82);opacity:0;visibility:hidden;
  transition:transform var(--t-snappy) var(--e-snappy),opacity 160ms linear,
             visibility 0s linear var(--t-snappy)}
.subnav.out{transform:translateY(0) scale(1);opacity:1;visibility:visible;
  transition:transform var(--t-snappy) var(--e-snappy),opacity 200ms linear,visibility 0s}
@media(prefers-reduced-motion:reduce){
  .subnav,.subnav.out{transition:opacity 160ms linear;transform:none}}
.subnav ul{list-style:none;display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:9px 0;
  scrollbar-width:none;-ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{font-size:13px;color:var(--muted);padding:7px 13px;border-radius:var(--r-pill);
  white-space:nowrap;min-height:34px;display:inline-flex;align-items:center;
  border:.5px solid transparent;transition:color var(--base),border-color var(--base)}
.subnav a:hover{color:var(--ink-hi)}
.subnav a.on{color:var(--lvl-t);border-color:var(--hair)}

/* ================================================================
   РИТМ И ТЕКСТОВЫЕ АКЦЕНТЫ
   Блок восстановлен: правила были потеряны вместе с хвостом файла.
   ================================================================ */
.path{margin-top:clamp(24px,3vw,32px);padding-top:24px;border-top:.5px solid var(--hair)}
@media (max-width:900px){}
@media (max-width:560px){}

/* ключевое слово в абзаце: подчёркивание доезжает по мере прокрутки */
.mark-key{color:var(--ink-hi);position:relative;white-space:nowrap}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes mkline{to{transform:scaleX(1)}}}}
@supports not (animation-timeline: view()){}

/* врезка с главной мыслью раздела */
.pull{margin:clamp(32px,4vw,64px) 0;padding-left:24px;
  border-left:2px solid var(--lvl-t);max-width:46ch}

/* ---------- герой уровня ---------- */
.lvhero{min-height:88svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(116px,15vh,160px);padding-bottom:clamp(30px,5vh,54px);border-top:0}
.lvhero .meta{display:flex;align-items:center;gap:13px;font-size:12px;color:var(--ash)}
.lvhero .meta i{display:block;width:30px;height:.5px;background:var(--lvl-t);font-style:normal}
.lvhero .thr{margin-top:30px;padding-top:18px;border-top:.5px solid var(--hair);max-width:52ch}

/* ---------- предел уровня ---------- */
.limit{margin-top:clamp(26px,3.4vw,40px);padding-top:clamp(22px,3vw,32px);border-top:.5px solid var(--hair)}
.limit .big{font-family:var(--f-d);font-weight:400;color:var(--ink-hi);line-height:1.02;
  font-size:clamp(38px,8.4vw,104px);letter-spacing:.01em}
.limit .big::after{content:'';display:block;height:1.5px;width:clamp(60px,11vw,130px);
  margin-top:clamp(16px,2.2vw,26px);background:linear-gradient(90deg,var(--lvl-t),transparent)}
.limit .two{margin-top:clamp(20px,2.6vw,32px)}

/* ---------- узлы на линии среды ---------- */
.env .nd{cursor:pointer;outline:none}

/* ==========================================================================
   СЛОЙ 2 — атмосфера уровня, знаки, интерактив, движение по горизонтали
   ========================================================================== */

/* ---------- атмосфера: градиент уровня ---------- */
.atm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.atm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;will-change:transform;transform:scale(1.08)}
.atm::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,var(--canvas) 100%)}
.atm::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--canvas) 0%,rgba(0,0,0,.10) 46%,rgba(0,0,0,0) 100%)}
[data-theme="light"] .atm img{opacity:.34}

/* знак уровня как водяной знак */
.wm{position:absolute;pointer-events:none;z-index:0;color:var(--lvl-t);opacity:.10;
  will-change:transform}
.wm svg{display:block;width:100%;height:auto}
[data-theme="light"] .wm{opacity:.14}

/* ================================================================
   РИТМ И ТЕКСТОВЫЕ АКЦЕНТЫ
   Блок восстановлен: правила были потеряны вместе с хвостом файла.
   ================================================================ */
.path{margin-top:clamp(24px,3vw,32px);padding-top:24px;border-top:.5px solid var(--hair)}
.path .track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1.2vw,16px);align-items:stretch}
.path .st{display:flex;flex-direction:column;
  padding:clamp(16px,1.8vw,24px);border-radius:var(--r-btn);
  border:.5px solid var(--hair-2);background:rgba(212,212,212,.03);
  transition:border-color var(--t-smooth) var(--e-smooth),
             background var(--t-smooth) var(--e-smooth),
             transform var(--t-smooth) var(--e-smooth)}
.path .st:hover{border-color:color-mix(in srgb,var(--lvl-t) 42%,transparent);
  background:rgba(212,212,212,.055);transform:translateY(-2px)}
.path .st .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.2}
.path .st .v{margin-top:12px;font-family:var(--f-d);font-weight:400;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.02em;line-height:1.15;color:var(--ink-hi)}
.path .st .s{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ash);text-wrap:pretty}
@media (max-width:900px){.path .track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.path .track{grid-template-columns:minmax(0,1fr)}}

/* ключевое слово в абзаце: подчёркивание доезжает по мере прокрутки */
.mark-key{color:var(--ink-hi);position:relative;white-space:nowrap}
.mark-key::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--lvl-t);transform:scaleX(0);transform-origin:left}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .mark-key::after{animation:mkline linear both;animation-timeline:view();
      animation-range:entry 20% cover 34%}
    @keyframes mkline{to{transform:scaleX(1)}}}}
@supports not (animation-timeline: view()){.mark-key::after{transform:scaleX(1)}}

/* врезка с главной мыслью раздела */
.pull{margin:clamp(32px,4vw,64px) 0;padding-left:24px;
  border-left:2px solid var(--lvl-t);max-width:46ch}
.pull .lead{color:var(--ink-hi)}

/* ---------- герой уровня ---------- */
.lvhero{position:relative;padding-top:clamp(122px,15vh,168px);padding-bottom:clamp(40px,6vh,72px);
  min-height:min(94svh,860px);display:flex;flex-direction:row;align-items:flex-end;
  justify-content:flex-start;overflow:hidden}
.lvhero .wrap{width:100%}
.lvhero .wm{right:-6%;top:6%;width:min(46vw,540px)}
.lvgrid>div:first-child{container-type:inline-size}
.lvgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.68fr);
  gap:clamp(24px,5vw,64px);align-items:end}
@media(max-width:900px){.lvgrid{grid-template-columns:1fr;gap:26px}.lvhero .wm{width:64vw;right:-14%;top:auto;bottom:8%}}
.lvnum{color:var(--lvl-t);opacity:.95;container-type:inline-size}
/* текстовый логотип уровня: наш шрифт, разрядка 52%.
   --k задан для каждого слова по замеру его ширины в SONGER,
   поэтому все четыре занимают одну ширину колонки. */
.lvnum .lvword{display:block;font-family:var(--f-d);font-weight:400;
  /* Множитель .68 уводит логотип на второй план: все четыре по-прежнему
     занимают одну ширину, но громче него теперь суть уровня в h1. */
  font-size:min(clamp(20px,5vw,72px), calc(100cqw * var(--k) * .68));
  letter-spacing:.52em;margin-right:-.52em;line-height:1.06;
  text-transform:uppercase;white-space:nowrap}
.diag .res .rd{font-size:14px;line-height:1.45;color:var(--muted);max-width:44ch}
.lvnum small{display:block;font-family:var(--f-t);font-size:11px;letter-spacing:.16em;
  color:var(--ash);margin-top:14px;opacity:1}
/* Кегль считается от ширины колонки через --hk: множитель подобран по
   фактической ширине самого длинного слова в SONGER, поэтому оно всегда
   помещается целиком. Раньше «МАСШТАБИРОВАНИЕ» вылезало из колонки
   на 443px и обрезалось контейнером. */
h1.plain{font-family:var(--f-d);font-weight:400;letter-spacing:.02em;line-height:1.02;
  font-size:min(clamp(30px,6.6vw,92px), calc(100cqw * var(--hk,.086)));
  text-transform:uppercase;text-wrap:balance}
.thr{margin-top:26px;padding-top:18px;border-top:.5px solid var(--hair);max-width:56ch}

/* ---------- бегущая строка ---------- */
.marq{position:relative;overflow:hidden;border-top:.5px solid var(--hair);
  border-bottom:.5px solid var(--hair);padding:clamp(14px,2vw,22px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq .tk{display:flex;width:max-content;will-change:transform;animation:mv 42s linear infinite}
.marq.slow .tk{animation-duration:78s}
.marq .tk>span{display:inline-flex;align-items:center;gap:clamp(28px,5vw,64px);
  padding-right:clamp(28px,5vw,64px);font-family:var(--f-d);font-weight:400;
  font-size:clamp(20px,3.4vw,44px);letter-spacing:.52em;color:var(--ink-hi);
  text-transform:uppercase;white-space:nowrap}
.marq .tk i{font-style:normal;color:var(--lvl-t);opacity:.7;font-size:.42em;letter-spacing:0}
.marq:hover .tk{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq .tk{animation:none}}

/* ---------- горизонтальная сцена (движение вбок при скролле) ---------- */

/* ---------- лента-рельс (горизонтальная прокрутка) ---------- */
.rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding-bottom:16px;margin-top:26px;scrollbar-width:thin;
  scrollbar-color:var(--hair-2) transparent}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:9999px}
.rail>*{scroll-snap-align:start;flex:none}
.rail .rc{width:min(78vw,286px);min-height:158px;border:.5px solid var(--hair);border-radius:28px;
  padding:20px;background:var(--plate);display:flex;flex-direction:column;gap:9px;
  transition:border-color var(--base) var(--ease),background var(--base) var(--ease),
             transform var(--base) var(--spring)}
.rail .rc:hover{border-color:var(--lvl-t);background:var(--plate-hi);transform:translateY(-3px)}
.rail .rc .dt{font-size:11px;color:var(--lvl-t);letter-spacing:.1em}
.rail .rc .tt{font-size:16px;color:var(--ink-hi);line-height:1.28}
.rail .rc .ds{font-size:13px;color:var(--ash);line-height:1.45}
.rail .rc .mt{margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--ash);
  border-top:.5px solid var(--hair-2)}

/* ---------- витрина: одна крупная карточка + три ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:10px;margin-top:26px}
@media(max-width:900px){.feat{grid-template-columns:1fr}}
.fbig{position:relative;min-height:clamp(300px,42vw,430px);border:.5px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;padding:clamp(22px,3vw,36px);
  display:flex;flex-direction:column;justify-content:flex-end;background:var(--plate);isolation:isolate}
.fbig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  opacity:.55;transition:transform 800ms var(--ease),opacity var(--slow) var(--ease)}
.fbig::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 20%,var(--canvas) 98%)}
.fbig:hover img{transform:scale(1.04);opacity:.7}
.fbig .tag{align-self:flex-start;margin-bottom:auto}
.fbig h3{font-size:clamp(21px,2.5vw,31px);line-height:1.14;color:var(--ink-hi);letter-spacing:-.02em}
.fbig p{font-size:14.5px;color:var(--muted);margin-top:12px;max-width:44ch}
.fbig .mt{margin-top:18px;font-size:11.5px;color:var(--ash);display:flex;gap:16px}
.fside{display:grid;gap:10px;grid-template-rows:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.fside{grid-template-rows:none}}
.fs{position:relative;border:.5px solid var(--hair);border-radius:28px;padding:19px 20px;
  background:var(--plate);display:grid;grid-template-columns:44px minmax(0,1fr);gap:15px;
  align-items:center;transition:border-color var(--base),background var(--base),transform var(--base) var(--spring)}
.fs:hover{border-color:var(--lvl-t);background:var(--plate-hi);transform:translateX(4px)}
.fs .th{width:44px;height:44px;border-radius:14px;overflow:hidden;position:relative}
.fs .th img{width:100%;height:100%;object-fit:cover;opacity:.85}
.fs .tt{font-size:15px;color:var(--ink-hi);line-height:1.26;display:block}
.fs .mt{font-size:11.5px;color:var(--ash);display:block;margin-top:5px}

/* ---------- вкладки ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;padding:5px;
  border:.5px solid var(--hair);border-radius:var(--r-pill);width:max-content;max-width:100%}
.tab{font-size:13px;color:var(--muted);padding:9px 17px;border-radius:var(--r-pill);
  background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color var(--base) var(--ease),background var(--base) var(--ease)}
.tab:hover{color:var(--ink-hi)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--canvas)}
[data-theme="light"] .tab[aria-selected="true"]{background:var(--ink);color:#fff}
.panes{margin-top:22px}
.pane{display:none}
.pane.on{display:block;animation:pin var(--slow) var(--ease) both}
@keyframes pin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pane.on{animation:none}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
.pc{position:relative;border:.5px solid var(--hair);border-radius:28px;padding:22px;
  background:var(--plate);min-height:206px;display:flex;flex-direction:column;
  transition:border-color var(--base),background var(--base),transform var(--base) var(--spring)}
.pc:hover{border-color:var(--lvl-t);background:var(--plate-hi);transform:translateY(-3px)}
.pc .h{font-size:18px;color:var(--ink-hi);line-height:1.2}
.pc .b{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.pc .f{margin-top:auto;padding-top:16px;font-size:11px;color:var(--ash);
  border-top:.5px solid var(--hair-2)}

/* ---------- аккордеон ---------- */
/* ---------- компактное раскрытие: одна строка, деталь по запросу ----------
   Для обоснований и оговорок, которые не должны встречать глаз первыми. */
.fold{border-top:.5px solid var(--hair-2);border-bottom:.5px solid var(--hair-2)}
.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 0;
  font-size:13px;letter-spacing:.02em;color:var(--ash);
  transition:color var(--base) var(--ease)}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{color:var(--ink-hi)}
.fold summary .pl{position:relative;width:11px;height:11px;flex:none}
.fold summary .pl::before,.fold summary .pl::after{content:'';position:absolute;
  background:currentColor;transition:transform var(--base) var(--ease)}
.fold summary .pl::before{left:0;right:0;top:5px;height:1px}
.fold summary .pl::after{top:0;bottom:0;left:5px;width:1px}
.fold[open] summary .pl::after{transform:scaleY(0)}
.fold[open] summary{color:var(--ink-hi)}
.fold .bd{padding:0 0 18px;max-width:62ch;color:var(--ash);line-height:1.55}
@media(prefers-reduced-motion:no-preference){
  .fold[open] .bd{animation:foldIn 320ms var(--e-smooth) both}
  @keyframes foldIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

.acc{margin-top:26px;border-top:.5px solid var(--hair)}
.acc details{border-bottom:.5px solid var(--hair)}
.acc summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:38px minmax(0,1fr) 22px;gap:16px;align-items:baseline;
  padding:22px 0;transition:color var(--base) var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--ink-hi)}
.acc summary .n{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums}
.acc summary .t{font-size:clamp(17px,2vw,21px);color:var(--ink);line-height:1.24}
.acc summary .pl{position:relative;width:12px;height:12px;justify-self:end;align-self:center}
.acc summary .pl::before,.acc summary .pl::after{content:'';position:absolute;background:var(--muted);
  transition:transform var(--base) var(--spring),background var(--base)}
.acc summary .pl::before{left:0;right:0;top:50%;height:.5px;margin-top:-.25px}
.acc summary .pl::after{top:0;bottom:0;left:50%;width:.5px;margin-left:-.25px}
.acc details[open] summary{color:var(--ink-hi)}
.acc details[open] summary .pl::after{transform:scaleY(0)}
.acc details[open] summary .pl::before{background:var(--lvl-t)}
.acc .bd{padding:0 0 26px 54px;max-width:70ch;font-size:15px;color:var(--muted);line-height:1.62}
@media(max-width:640px){.acc .bd{padding-left:0}}
.acc details[open] .bd{animation:pin var(--base) var(--ease) both}

/* ---------- панель на градиенте ---------- */
.gpanel{position:relative;overflow:hidden;border-radius:var(--r-card);
  border:.5px solid var(--hair);margin-top:clamp(28px,4vw,44px);
  min-height:clamp(260px,34vw,380px);display:flex;align-items:center;
  padding:clamp(26px,4vw,54px);isolation:isolate}
.gpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.6}
.gpanel::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--canvas) 4%,rgba(0,0,0,.30) 52%,rgba(0,0,0,0) 100%)}
[data-theme="light"] .gpanel::after{background:linear-gradient(100deg,var(--canvas) 4%,rgba(255,255,255,.45) 52%,rgba(255,255,255,0) 100%)}
.gpanel .in{max-width:52ch}
.gpanel .big{font-family:var(--f-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);letter-spacing:.05em;line-height:1;color:var(--ink-hi)}
.gpanel p{margin-top:16px;font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- плитки со знаком ---------- */
/* ================================================================
   ЛЮДИ УРОВНЕЙ И ПОЛОСА ПОД ФОТОГРАФИИ
   Карточки заполняются реальными людьми и снимками;
   пока внутри отмеченные места, вёрстка от этого не меняется.
   ================================================================ */
.ppl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,44px)}
.ppl .p{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:.5px solid var(--hair);border-radius:28px;background:var(--plate);
  transition:border-color var(--base) var(--ease),transform var(--base) var(--spring)}
.ppl .p:hover{border-color:color-mix(in srgb,var(--lc,var(--lvl-t)) 45%,transparent);
  transform:translateY(-3px)}
.ppl .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--plate-hi)}
.ppl .ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
.ppl .ph .slot{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);pointer-events:none}
.ppl .b{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.ppl .lv{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lc,var(--lvl-t))}
.ppl .nm{margin-top:9px;font-family:var(--f-d);font-weight:400;font-size:17px;
  letter-spacing:.02em;color:var(--ink-hi);line-height:1.15}
.ppl .bz{margin-top:7px;font-size:13px;line-height:1.45;color:var(--ash)}
.ppl .fx{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--ash);
  border-top:.5px solid var(--hair-2)}
@media(max-width:900px){.ppl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ppl{grid-template-columns:minmax(0,1fr)}}

.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,44px)}
.band .sh{position:relative;aspect-ratio:3/2;overflow:hidden;isolation:isolate;
  border:.5px solid var(--hair);border-radius:28px;background:var(--plate)}
.band .sh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.68}
.band .sh::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.band .cp{position:absolute;left:18px;right:18px;bottom:16px;font-size:13px;color:var(--ink-hi)}
.band .cp i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-bottom:6px}
@media(max-width:820px){.band{grid-template-columns:minmax(0,1fr)}}

.mktiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:26px}
.mkt{position:relative;border:.5px solid var(--hair);border-radius:28px;overflow:hidden;
  aspect-ratio:4/3;display:flex;align-items:flex-end;padding:20px;isolation:isolate;
  transition:border-color var(--base),transform var(--base) var(--spring)}
.mkt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  opacity:.62;transition:transform 700ms var(--ease),opacity var(--base)}
.mkt::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.42) 68%,var(--canvas) 100%)}
.mkt:hover{border-color:var(--mc,var(--lvl-t));transform:translateY(-3px)}
.mkt:hover img{transform:scale(1.06);opacity:.78}
.mkt .sg{position:absolute;top:16px;right:16px;width:34px;z-index:2;
  color:var(--mc,var(--lvl-t));opacity:.85}
.mkt .sg svg{display:block;width:100%;height:auto}
.mkt .cap{font-size:12.5px;color:var(--ink-hi);line-height:1.4;position:relative;z-index:1;
  /* общая высота подписи держит названия карточек на одной линии,
     даже когда описания разной длины */
  min-height:calc(17px * 1.2 + 6px + 12.5px * 1.4 * 2)}
.mkt .cap b{display:block;font-family:var(--f-d);font-weight:400;font-size:17px;
  line-height:1.2;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}

/* ---------- появление вбок ---------- */
.rvx{opacity:0;transform:translateX(-26px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rvx.r{transform:translateX(26px)}
.rvx.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rvx{opacity:1;transform:none;transition:none}}

/* ---------- заголовок по словам ---------- */
.wsplit>span{display:inline-block;overflow:hidden;vertical-align:bottom}
.wsplit>span>i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform 760ms cubic-bezier(.2,.8,.2,1)}
.wsplit.in>span>i{transform:none}
@media(prefers-reduced-motion:reduce){.wsplit>span>i{transform:none}}

/* ---------- курсорная подсветка карточек ---------- */
.glow-c{position:relative}
.glow-c::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--base) var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--lvl-t) 16%,transparent),transparent 62%)}
.glow-c:hover::before{opacity:1}

/* ---------- подсказка о прокрутке ---------- */
.cue{display:inline-flex;align-items:center;gap:10px;font-size:11px;color:var(--ash);
  letter-spacing:.12em;margin-top:clamp(26px,4vh,44px)}
.cue i{display:block;width:26px;height:.5px;background:currentColor;
  transform-origin:left;animation:cu 2.2s var(--ease) infinite}
@keyframes cu{0%{transform:scaleX(.2)}55%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
@media(prefers-reduced-motion:reduce){.cue i{animation:none}}

/* ---------- знаки через use ---------- */
.mk{display:block;width:100%;height:auto;fill:currentColor}
.mk-an{aspect-ratio:2411/2348}.mk-pr{aspect-ratio:1104/1200}
.mk-ex{aspect-ratio:2331/2369}.mk-fn{aspect-ratio:1128/1320}
.mega .m .sg{position:absolute;top:17px;right:17px;width:22px;margin:0;
  color:var(--ink-hi);opacity:.92;
  transition:opacity var(--base) var(--ease),transform var(--base) var(--spring)}
.mega .m:hover .sg{opacity:1;transform:translateY(-1px)}

/* ---------- герой главной ---------- */
.hero-main{position:relative;overflow:hidden;min-height:100svh;
  padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(40px,7vh,80px);
  display:flex;flex-direction:column;justify-content:center}
/* заголовок главной — настоящий логотип, а не набранное слово:
   разрядка и пропорции зашиты в контур, их нельзя случайно сбить */
h1.wm-name{margin:0;color:var(--ink-hi);line-height:0}
.wm-name__svg{display:block;width:100%;max-width:min(92vw,1180px);height:auto}
.herogrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,64px);align-items:end;margin-top:clamp(26px,4vh,48px);
  padding-top:clamp(22px,3vh,34px);border-top:.5px solid var(--hair)}
@media(max-width:820px){.herogrid{grid-template-columns:1fr;gap:26px}}
.hstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hstat b{display:block;font-family:var(--f-d);font-weight:400;font-size:clamp(19px,2.5vw,31px);
  letter-spacing:.02em;color:var(--ink-hi);line-height:1;white-space:nowrap}
.hstat span{display:block;font-size:11.5px;color:var(--ash);margin-top:8px;line-height:1.4}

/* ---------- поправки ---------- */
.two>.rvx{min-width:0}
.rows .row.rvx{transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease),
  border-color var(--base) var(--ease),background var(--base) var(--ease)}
.hstage .rail-hint i{font-style:normal;font-size:13px;color:var(--lvl-t)}
/* появление вбок не должно раздвигать страницу.
   Режем на уровне контейнера: липкие блоки (.subnav, .hstage .stick) лежат вне .wrap */
.wrap{overflow-x:clip}
@media(max-width:620px){.wm-name__svg{max-width:100%}}
@media(max-width:700px){.hstage .rail-hint{position:static;padding:12px var(--pad) 0}}

/* ==========================================================================
   СЛОЙ 3 — остров, кнопки, текстовые акценты
   Один источник правды для этих трёх систем. Всё, что выше по файлу
   и спорит с этим слоем, переопределяется здесь намеренно.
   ========================================================================== */

:root{
  /* пружина острова: трогается сразу, долго доезжает — как у Dynamic Island */
  --e-isl:cubic-bezier(.32,.72,0,1);
  --t-isl:660ms; --t-isl-out:560ms;
  /* наведение — отдельный, заметно более длинный выкат */
  --t-isl-hover:940ms;
  --e-fade:cubic-bezier(.4,0,.2,1);
  /* шаг вертикального ритма: всё кратно 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px;
  --r-isl:22px;
}

/* ---------------- ОСТРОВ ---------------- */
.island{position:fixed;top:max(18px,calc(var(--safe-t) + 10px));left:50%;
  transform:translateX(-50%);z-index:40;
  max-width:calc(100vw - 20px);pointer-events:none;
  transition:transform var(--t-isl-out) var(--e-isl),opacity 200ms linear}
.island.hide{transform:translateX(-50%) translateY(-190%);opacity:0}

/* оболочка — единственная поверхность, которая меняет размер */
.isl-shell{position:relative;pointer-events:auto;overflow:hidden;isolation:isolate;
  background:var(--panel);border:.5px solid var(--hair);border-radius:var(--r-isl);
  backdrop-filter:blur(34px) saturate(165%);-webkit-backdrop-filter:blur(34px) saturate(165%);
  transition:width var(--t-isl) var(--e-isl),height var(--t-isl) var(--e-isl),
             border-radius var(--t-isl) var(--e-isl);
  will-change:width,height;contain:paint}
.isl-shell::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.07)}
/* переход, вызванный наведением, идёт медленнее прокрутки: глаз успевает */
.island[data-anim="hover"] .isl-shell{transition-duration:var(--t-isl-hover)}

/* слои: только один виден, остальные растворены */
.island .isl-rest,.island .isl-compact,.island .mega{
  position:absolute;top:0;left:0;
  transition:opacity 210ms var(--e-fade),transform 640ms var(--e-isl),
             filter 240ms var(--e-fade)}
/* входящий слой появляется позже и дольше: сначала едет оболочка, потом текст */
.island[data-state="rest"]    .isl-rest,
.island[data-state="compact"] .isl-compact,
.island[data-state="open"]    .mega,
.island[data-state="open"]    .isl-rest{
  transition:opacity 420ms var(--e-fade) 180ms,transform 700ms var(--e-isl),
             filter 380ms var(--e-fade) 150ms}
.island[data-anim="hover"] .isl-rest,
.island[data-anim="hover"] .isl-compact,
.island[data-anim="hover"] .mega{transition-duration:280ms,760ms,300ms}
.island[data-anim="hover"][data-state="rest"]    .isl-rest,
.island[data-anim="hover"][data-state="compact"] .isl-compact,
.island[data-anim="hover"][data-state="open"]    .mega,
.island[data-anim="hover"][data-state="open"]    .isl-rest{
  transition-duration:520ms,820ms,460ms;
  transition-delay:260ms,0ms,220ms}
.island .nav{background:none;border:0;border-radius:0;backdrop-filter:none;
  -webkit-backdrop-filter:none;padding:6px 6px 6px 15px}

.island[data-state="rest"]   .isl-rest{opacity:1;transform:none;filter:none;pointer-events:auto}
.island[data-state="rest"]   .isl-compact,
.island[data-state="rest"]   .mega{opacity:0;pointer-events:none}
.island[data-state="rest"]   .isl-compact{transform:scale(.982);filter:blur(2px)}
.island[data-state="rest"]   .mega{transform:translateY(-7px) scale(.985);filter:blur(4px)}

.island[data-state="compact"] .isl-rest,
.island[data-state="compact"] .mega{opacity:0;pointer-events:none}
.island[data-state="compact"] .isl-rest{transform:scale(1.008);filter:blur(2px)}
.island[data-state="compact"] .mega{transform:translateY(-7px) scale(.985);filter:blur(4px)}
.island[data-state="compact"] .isl-compact{opacity:1;transform:none;filter:none;pointer-events:auto}

.island[data-state="open"] .isl-rest{opacity:1;transform:none;filter:none;pointer-events:auto}
.island[data-state="open"] .isl-compact{opacity:0;pointer-events:none;transform:scale(.982);filter:blur(2px)}
.island[data-state="open"] .mega{opacity:1;transform:none;filter:none;pointer-events:auto;
  transition-delay:60ms}
.island[data-state="open"] .isl-shell{border-radius:26px}

/* компактное состояние: знак, уровень, текущий раздел */
.isl-compact{display:flex;align-items:center;gap:12px;height:44px;padding:0 18px;white-space:nowrap}
.isl-compact .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--lvl-t);box-shadow:0 0 0 0 color-mix(in srgb,var(--lvl-t) 55%,transparent);
  animation:pulse 4.6s var(--e-fade) infinite}
@keyframes pulse{0%,72%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lvl-t) 50%,transparent)}
                 36%{box-shadow:0 0 0 6px transparent}}
.isl-compact .lv{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-d);
  font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-hi)}
.isl-compact .sep-c{width:.5px;height:15px;background:var(--hair);flex:none}
.isl-compact .sec{font-size:13px;color:var(--muted);max-width:26ch;overflow:hidden;
  text-overflow:ellipsis}
.island[data-state="compact"] .isl-compact .sec{animation:secin 560ms var(--e-isl) both}
@keyframes secin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* мега внутри острова: обычный поток, без своей подложки */
.island .mega{position:absolute;background:none;border:0;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  padding:14px;width:min(1040px,calc(100vw - 28px));visibility:visible}
.island .mega .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}

@media(prefers-reduced-motion:reduce){
  .isl-shell,.island .isl-rest,.island .isl-compact,.island .mega{transition:none}
  .isl-compact .dot{animation:none}
  .island[data-state="compact"] .isl-compact .sec{animation:none}
}
@media(max-width:900px){
  .island .mega{display:none}
  .isl-compact{height:40px;padding:0 14px;gap:9px}
  .isl-compact .sec{max-width:14ch}
}

/* ---------------- КНОПКИ ---------------- */
/* Три размера, три роли. В одной паре все элементы одной высоты —
   иначе строка кнопок читается как ошибка вёрстки. */
.btn,.link{
  --h:46px; --px:24px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;height:var(--h);min-height:var(--h);padding:0 var(--px);
  font-family:inherit;font-size:14.5px;font-weight:350;line-height:1;
  border-radius:var(--r-pill);border:.5px solid transparent;background:none;
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:color var(--base) var(--ease),border-color var(--base) var(--ease),
             background var(--base) var(--ease),transform var(--fast) var(--ease)}
.btn.sm,.link.sm{--h:38px;--px:18px;font-size:13.5px}
.btn.lg,.link.lg{--h:54px;--px:30px;font-size:15.5px}

.btn{color:var(--ink);border-color:var(--hair)}
.btn::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:var(--plate-hi);opacity:0;transition:opacity var(--base) var(--ease)}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--ink-hi);border-color:var(--lvl-t)}
.btn:hover::before{opacity:.55}
.btn:active{transform:scale(.985)}
.btn.primary{color:var(--ink-hi);border-color:var(--lvl-t)}
.btn.primary::before{opacity:.28}
.btn.primary:hover::before{opacity:.7}
.btn.primary .ar{color:var(--lvl-t)}
.btn .ar{display:inline-block;transition:transform var(--base) var(--spring)}
.btn:hover .ar{transform:translateX(5px)}

/* текстовая кнопка: та же высота, чтобы стояла на одной линии с пилюлей */
.link{color:var(--lvl-t);padding:0 2px}
.link::after{content:'';position:absolute;left:2px;right:2px;bottom:calc(50% - .7em);
  height:.5px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link .ar{transition:transform var(--base) var(--spring)}
.link:hover .ar{transform:translateX(4px)}

/* фокус с клавиатуры виден всегда и одинаково */
.btn:focus-visible,.link:focus-visible,.tab:focus-visible,.qbtn:focus-visible,
.nav .item:focus-visible,.nav .enter:focus-visible,.acc summary:focus-visible{
  outline:2px solid var(--lvl-t);outline-offset:3px;border-radius:var(--r-pill)}
.acc summary:focus-visible{border-radius:6px;outline-offset:1px}

/* строка действий: один шаг, одна базовая линия */
.acts{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-3) var(--s-4);margin-top:var(--s-6)}
.acts.tight{margin-top:var(--s-5)}
.acts+.acts{margin-top:var(--s-4)}
@media(max-width:560px){
  .acts{gap:var(--s-2) var(--s-3)}
  .acts .btn,.acts .link{width:100%;justify-content:space-between;--px:20px}
  .acts .link{justify-content:flex-start;gap:10px}
}

/* ---------------- ТЕКСТОВЫЕ АКЦЕНТЫ ---------------- */
/* Четыре уровня чтения: утверждение, тело, термин, сноска.
   Читатель должен понимать иерархию, не читая. */
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.42;color:var(--ink-hi);
  font-weight:350;letter-spacing:-.012em;text-wrap:pretty;max-width:46ch}
p{color:var(--muted);line-height:1.62;text-wrap:pretty}
.small,.note{font-size:13px;line-height:1.55;color:var(--ash)}
.note{padding-left:14px;border-left:.5px solid var(--hair);max-width:56ch}

/* термин среды: вводится один раз, дальше пишется обычным текстом */
.term{color:var(--ink-hi);font-weight:400;
  border-bottom:.5px solid color-mix(in srgb,var(--lvl-t) 55%,transparent);
  padding-bottom:1px;transition:border-color var(--base) var(--ease)}
.term:hover{border-bottom-color:var(--lvl-t)}

/* цифра внутри строки: набирается заголовочным шрифтом, чтобы цепляла глаз */
.fig{font-family:var(--f-d);font-weight:400;color:var(--ink-hi);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;font-size:1.08em}

/* выносная мысль: одна на раздел, не больше */
.pull{margin:var(--s-6) 0 0;padding-left:clamp(18px,2.2vw,28px);
  border-left:1px solid var(--lvl-t);max-width:52ch}
.pull p{color:var(--ink-hi);font-size:clamp(16px,1.35vw,18.5px);line-height:1.48;
  letter-spacing:-.01em}
.pull cite{display:block;margin-top:10px;font-style:normal;font-size:12px;color:var(--ash)}

/* строчный акцент без подчёркивания — для второго по важности слова */
strong,.key{color:var(--ink-hi);font-weight:400}

/* ---------------- РИТМ СЕКЦИЙ ---------------- */
section{padding-block:var(--gap)}
section+section{padding-top:0}
.pair{display:grid;grid-template-columns:clamp(112px,12vw,168px) minmax(0,1fr);
  gap:clamp(18px,3vw,34px);align-items:start}
.pair .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);padding-top:7px}
.pair>div:last-child>*+*{margin-top:var(--s-4)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,4vw,54px);margin-top:var(--s-7)}
@media(max-width:760px){
  .pair{grid-template-columns:1fr;gap:var(--s-3)}
  .two{grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-6)}
}

/* обёртка состояния покоя: навигация и, на уровнях, под-навигация */
.isl-rest{display:flex;flex-direction:column;width:max-content;max-width:calc(100vw - 24px)}
.island .nav{position:static;opacity:1;transform:none;filter:none;transition:none}
.island .subnav{position:static;top:auto;margin:0;border-radius:0;
  border-top:.5px solid var(--hair-2);background:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;padding:0}
.island .subnav ul{padding:7px 12px}
.island[data-state="compact"] .subnav,
.island[data-state="open"] .subnav{opacity:.45}
.island .subnav{transition:opacity var(--base) var(--ease)}

/* смена раздела: пилюля коротко подсвечивается */
.isl-compact.beat{animation:beat 2.4s var(--e-fade) both}
@keyframes beat{
  0%{box-shadow:inset 0 0 0 40px transparent}
  22%{box-shadow:inset 0 0 0 40px color-mix(in srgb,var(--lvl-t) 7%,transparent)}
  62%{box-shadow:inset 0 0 0 40px color-mix(in srgb,var(--lvl-t) 5%,transparent)}
  100%{box-shadow:inset 0 0 0 40px transparent}}
@media(prefers-reduced-motion:reduce){.isl-compact.beat{animation:none}}

/* --- остров: под-навигация уровня как второй ряд, только когда она нужна --- */
.island .subnav{display:none;position:static;transform:none;opacity:1;visibility:visible;
  margin:0;border:0;border-top:.5px solid var(--hair-2);border-radius:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
  transition:none}
.island[data-deep="1"][data-state="rest"] .subnav{display:block}
.island .subnav ul{padding:6px 10px;gap:2px}
.island .subnav a{font-size:12.5px;padding:6px 11px}

/* --- открытая панель уровней встаёт под строкой навигации --- */
.island .mega{top:var(--nav-h,52px)}
.island[data-state="open"] .isl-rest{height:var(--nav-h,52px);overflow:hidden}

/* бургер только там, где нет полной строки навигации */
.nav .burger{display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border:.5px solid var(--hair);border-radius:var(--r-pill);
  background:none;color:var(--muted);cursor:pointer;flex:none;margin-left:6px;
  transition:color var(--base) var(--ease),border-color var(--base) var(--ease)}
.nav .burger:hover{color:var(--ink-hi);border-color:var(--lvl-t)}
@media(max-width:900px){
  .nav .burger{display:inline-flex}
  .nav .item[data-desk],.nav .sep{display:none}
}

/* ---------------- ВОРОНКА ПРИЁМА ---------------- */
/* Четыре шага одного процесса. Сужение слева направо показано
   толщиной полосы: к концу отбора остаётся меньше кандидатов. */
.funnel{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin-top:var(--s-7);padding:0;counter-reset:none}
.funnel li{position:relative;padding:var(--s-5) clamp(16px,1.8vw,24px) var(--s-5) 0;
  display:flex;flex-direction:column;gap:var(--s-2)}
.funnel li::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--lvl-t);transform-origin:left;transform:scaleY(var(--k,1))}
.funnel li:nth-child(1){--k:1}
.funnel li:nth-child(2){--k:.72}
.funnel li:nth-child(3){--k:.46}
.funnel li:nth-child(4){--k:.26}
.funnel li::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--lvl-t);opacity:.18}
.funnel .n{font-size:11px;letter-spacing:.16em;color:var(--ash);
  font-variant-numeric:tabular-nums;padding-top:var(--s-2)}
.funnel .h{font-family:var(--f-d);font-weight:400;font-size:clamp(17px,1.7vw,21px);
  letter-spacing:.045em;text-transform:uppercase;color:var(--ink-hi)}
.funnel .d{font-size:14px;line-height:1.56;color:var(--muted);text-wrap:pretty}
.funnel .t{margin-top:auto;padding-top:var(--s-3);font-size:11.5px;color:var(--ash)}
@media(max-width:860px){
  .funnel{grid-template-columns:1fr;gap:0}
  .funnel li{padding:var(--s-4) 0}
  .funnel li::before,.funnel li::after{height:1px}
}

/* ---------------- СПИСОК КРИТЕРИЕВ ---------------- */
.crit{list-style:none;padding:0;margin:var(--s-4) 0 0;
  border-top:.5px solid var(--hair)}
.crit li{padding:var(--s-4) 0;border-bottom:.5px solid var(--hair-2);
  font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.crit li:last-child{border-bottom:0}
.crit .fig{margin-right:6px}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}

/* ---------------- ШРИФТОВАЯ ПАРА ---------------- */
/* SONGER — только заголовки, цифры и знаки. Гельветика — весь текст.
   Пара одна в обеих темах: подменять заголовочный шрифт в светлом режиме
   значит иметь два бренда вместо одного. */
h1,h2,h3.d,.figs .v,.card .nm,.mega .m .n,.limit .big,.lift .n,.f-mark b,
.nav .mark b,.diag .res .rl,.funnel .h,.path .st .v,.fig,.hstat b,.lvnum,
.gpanel .big,.marq .tk>span,h1.wm-name{font-family:var(--f-d);font-weight:400}
body,p,li,input,button,select,textarea,.small,.note,.lead,.kicker,
.crit li,.funnel .d,.path .st .s{font-family:var(--f-ui)}

/* ---------------- ГЕРОЙ ГЛАВНОЙ: ЗНАК НАБОРОМ ---------------- */
/* Логотип — живой SONGER с межбуквенным 0.52em, а не обведённый контур:
   так он читается в обеих темах и масштабируется без потерь. */
h1.wm-name{font-family:var(--f-d);font-weight:400;line-height:.94;
  font-size:clamp(44px,14.5vw,196px);letter-spacing:.52em;margin-right:-.52em;
  color:var(--ink-hi);text-transform:uppercase;white-space:nowrap}
/* обведённый контур в разметке остаётся, но не показывается:
   вместо него читается живой набор из того же span */
h1.wm-name svg,h1.wm-name .wm-name__svg{display:none}
h1.wm-name .sr{position:static;width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;white-space:nowrap}
@media(max-width:620px){h1.wm-name{font-size:min(11.5vw,56px)}}

/* цифры героя: колонки не должны склеиваться */
.hstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.6vw,36px)}
.hstat>div{min-width:0}
.hstat b{display:block;font-family:var(--f-d);font-weight:400;
  font-size:clamp(18px,2.3vw,30px);letter-spacing:.01em;color:var(--ink-hi);
  line-height:1;white-space:nowrap}
.hstat span{display:block;font-size:11.5px;color:var(--ash);margin-top:8px;line-height:1.4}

/* ---------------- ПОДЗАГОЛОВОК ВНУТРИ СЕКЦИИ ---------------- */
/* Третий уровень: секция → блок → текст. Без него длинная секция
   читается как одна сплошная простыня. */
.sub-h{display:flex;align-items:baseline;gap:14px;margin-top:var(--s-8);
  padding-top:var(--s-4);border-top:.5px solid var(--hair)}
.sub-h b{font-family:var(--f-d);font-weight:400;font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-hi);flex:none}
.sub-h span{font-size:13.5px;color:var(--ash);line-height:1.5;max-width:60ch}
h3:not(.d){font-family:var(--f-d);font-weight:400;font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-hi)}

/* ---------------- СПИСОК-ТАБЛИЦА ---------------- */
/* Номер, короткое имя, объяснение. Имя не должно тонуть в пустой колонке. */
.rows{margin-top:var(--s-6);border-top:.5px solid var(--hair)}
.rows .row{display:grid;grid-template-columns:44px minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px);align-items:baseline;
  padding:var(--s-5) 0;border-bottom:.5px solid var(--hair-2)}
.rows .row:last-child{border-bottom:0}
.rows .row .n{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums;
  letter-spacing:.1em}
.rows .row .t{font-size:clamp(15px,1.4vw,17px);color:var(--ink-hi);line-height:1.32;
  text-wrap:balance}
.rows .row .d{font-size:14px;color:var(--muted);line-height:1.56;max-width:58ch}
@media(max-width:760px){
  .rows .row{grid-template-columns:34px minmax(0,1fr);gap:var(--s-2) var(--s-3)}
  .rows .row .d{grid-column:2}
}

/* ---------------- КОМПОЗИЦИОННЫЕ ВАРИАНТЫ СЕКЦИЙ ---------------- */
/* Одна сетка на десять секций подряд читается как таблица.
   Три типа: обычная пара, полноширинное утверждение, смещённый блок. */
section.wide .pair{grid-template-columns:1fr}
section.wide .pair .k{padding-top:0;margin-bottom:var(--s-3)}
section.wide h2{font-size:clamp(26px,4.6vw,52px);max-width:18ch}
section.wide .lead{font-size:clamp(18px,1.8vw,23px);max-width:52ch}

section.offset .wrap{max-width:calc(var(--maxw) - 40px)}
/* Метка идёт первой по разметке, поэтому узкая дорожка должна быть первой:
   иначе метка забирала 1fr, а заголовок с лидом сжимались до 280px.
   direction:rtl разворачивает дорожки, и метка встаёт справа. */
section.offset .pair{grid-template-columns:clamp(150px,20vw,280px) minmax(0,1fr);
  direction:rtl}
section.offset .pair>*{direction:ltr}
section.offset .pair .k{padding-top:9px;text-align:right}
@media(max-width:760px){
  section.offset .pair{grid-template-columns:1fr;direction:ltr}
  section.offset .pair .k{text-align:left}
}

blockquote.pull{margin:var(--s-6) 0 0;padding-left:clamp(18px,2.2vw,28px);
  border-left:1px solid var(--lvl-t);max-width:52ch}
blockquote.pull p{color:var(--ink-hi);font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.48;letter-spacing:-.01em}
blockquote.pull cite{display:block;margin-top:10px;font-style:normal;font-size:12px;color:var(--ash)}

/* цель нажатия не меньше 40 px даже у мелких по виду ссылок */
.nav .mark{min-height:40px}
.mega .foot a{min-height:40px;display:inline-flex;align-items:center}


/* ==========================================================================
   ФОН УРОВНЯ КАК ПОДЛОЖКА
   Картинка сверху даёт параллакс, но не отвечает за то, есть ли фон вообще:
   базовый слой — встроенный фон уровня из assets.css.
   Крупные поверхности берут исходный bg, мелкие плашки — облегчённый gr.
   ========================================================================== */
:root{--bg:var(--bg-sr);--gr:var(--gr-sr)}
[data-level="an"],[data-accent="an"]{--bg:var(--bg-an);--gr:var(--gr-an)}
[data-level="pr"],[data-accent="pr"]{--bg:var(--bg-pr);--gr:var(--gr-pr)}
[data-level="ex"],[data-accent="ex"]{--bg:var(--bg-ex);--gr:var(--gr-ex)}
[data-level="fn"],[data-accent="fn"]{--bg:var(--bg-fn);--gr:var(--gr-fn)}

.atm,.gpanel,.fbig,.hstage .pan{background-image:var(--bg)}
.mkt,.fs .th{background-image:var(--gr)}
.atm,.gpanel,.fbig,.hstage .pan,.mkt,.fs .th{
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hstage .pan[data-lvl="an"]{--bg:var(--bg-an)}
.hstage .pan[data-lvl="pr"]{--bg:var(--bg-pr)}
.hstage .pan[data-lvl="ex"]{--bg:var(--bg-ex)}
.hstage .pan[data-lvl="fn"]{--bg:var(--bg-fn)}
.atm::after,.gpanel::after,.fbig::after,.mkt::after,.hstage .pan::after{z-index:0}
.atm img,.gpanel img,.fbig img,.mkt img,.hstage .pan img,.fs .th img{position:absolute;z-index:0}
.gpanel .in,.fbig>*,.mkt .cap,.hstage .pan>*{position:relative;z-index:1}
/* герой главной берёт фон СРЕДЫ, даже когда акцент уровневый */
.hero-main .atm{--bg:var(--bg-sr)}

/* ==========================================================================
   ЦВЕТ В КНОПКАХ
   Акцент страницы — цвет уровня. Главная ведёт в десятку, а десятка живёт
   на Аномалии, поэтому её синий и работает акцентом здесь.
   Заливка цветом запрещена паспортом, поэтому цвет держат обводка,
   стрелка и тонкая подложка — не плашка.
   ========================================================================== */
.btn{color:var(--ink);
  border-color:color-mix(in srgb,var(--lvl-t) 34%,transparent)}
.btn::before{background:var(--lvl-t);opacity:0}
.btn:hover{color:var(--ink-hi);border-color:var(--lvl-t)}
.btn:hover::before{opacity:.10}
.btn:active{transform:scale(.985)}

.btn.primary{color:var(--ink-hi);
  border-color:color-mix(in srgb,var(--lvl-t) 72%,transparent)}
.btn.primary::before{opacity:.10}
.btn.primary:hover{border-color:var(--lvl-t)}
.btn.primary:hover::before{opacity:.18}
.btn.primary .ar,.btn .ar{color:var(--lvl-t)}

.link{color:var(--lvl-t)}
.tag{border-color:color-mix(in srgb,var(--lvl-t) 30%,transparent)}
.tag.sig{border-color:var(--lvl-t);color:var(--lvl-t)}
.nav .enter{border-color:color-mix(in srgb,var(--lvl-t) 55%,transparent);color:var(--ink-hi)}
.nav .enter:hover{border-color:var(--lvl-t);background:color-mix(in srgb,var(--lvl-t) 12%,transparent)}
:root[data-theme="light"] .btn::before{background:var(--lvl-t)}
:root[data-theme="light"] .btn.primary::before{opacity:.08}
:root[data-theme="light"] .btn.primary:hover::before{opacity:.14}

/* акцент главной: цвет Аномалии, но фон и подложки остаются графитом среды */
[data-accent="an"]{--lvl:var(--an-l);--lvl-t:var(--an);--lvl-deep:var(--an-10)}
[data-accent="pr"]{--lvl:var(--pr-l);--lvl-t:var(--pr);--lvl-deep:var(--pr-10)}
[data-accent="ex"]{--lvl:var(--ex-l);--lvl-t:var(--ex);--lvl-deep:var(--ex-10)}
[data-accent="fn"]{--lvl:var(--fn-l);--lvl-t:var(--fn);--lvl-deep:var(--fn-10)}

/* ==========================================================================
   ДИАГНОСТИКА: карточка растёт при ответе, а не держит место заранее
   До нажатия строки результата нет — ни высоты, ни разделителя.
   ========================================================================== */
.diag .res{display:grid;grid-template-rows:0fr;
  margin-top:0;padding-top:0;border-top:0 solid transparent;
  opacity:0;transform:none;
  transition:grid-template-rows 640ms var(--e-isl),
             margin-top 640ms var(--e-isl),
             padding-top 640ms var(--e-isl),
             border-top-width 200ms var(--e-fade),
             opacity 320ms var(--e-fade) 120ms}
.diag .res>.in{overflow:hidden;min-height:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.diag .res.on{grid-template-rows:1fr;opacity:1;
  margin-top:22px;padding-top:20px;border-top:.5px solid var(--hair-2)}
@media(prefers-reduced-motion:reduce){.diag .res{transition:opacity 200ms linear}}

/* ==========================================================================
   АТМОСФЕРА СЕКЦИИ
   Секция уровня получает свой фон и свою пластику линий. Под текстом
   лежит завеса из цвета полотна — она и держит читаемость.
   ========================================================================== */
section[data-atm]{position:relative;isolation:isolate}
section[data-atm]>.wrap{position:relative;z-index:2}
section[data-atm]::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--bg);background-size:cover;background-position:center;
  opacity:var(--atm-o,.34)}
section[data-atm]::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--canvas) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,var(--canvas) 100%),
    linear-gradient(90deg,var(--canvas) 0%,color-mix(in srgb,var(--canvas) 55%,transparent) 46%,
                    color-mix(in srgb,var(--canvas) 20%,transparent) 100%)}
:root[data-theme="light"] section[data-atm]::before{opacity:calc(var(--atm-o,.34) * .55)}

/* линии уровня поверх фона, но под завесой */
.lnx{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:var(--ln);mask-image:var(--ln);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:var(--lvl-t);opacity:var(--ln-o,.26)}
:root[data-theme="light"] .lnx{opacity:calc(var(--ln-o,.26) * .8)}
[data-atm="an"]{--bg:var(--bg-an);--ln:var(--ln-an);--lvl-t:var(--an);--lvl:var(--an-l)}
[data-atm="pr"]{--bg:var(--bg-pr);--ln:var(--ln-pr);--lvl-t:var(--pr);--lvl:var(--pr-l)}
[data-atm="ex"]{--bg:var(--bg-ex);--ln:var(--ln-ex);--lvl-t:var(--ex);--lvl:var(--ex-l)}
[data-atm="fn"]{--bg:var(--bg-fn);--lvl-t:var(--fn);--lvl:var(--fn-l)}
/* у Феноменов роста нет, и линии для него не рисуются */
[data-atm="fn"] .lnx{display:none}
[data-atm="sr"]{--bg:var(--bg-sr);--lvl-t:var(--sr-40)}
@media(prefers-reduced-motion:no-preference){
  .lnx{transition:opacity 900ms var(--e-fade)}
}

/* ---------------- БЕГУЩАЯ СТРОКА ТОНЬШЕ ---------------- */
.marq{padding:clamp(9px,1.1vw,14px) 0;border-top:.5px solid var(--hair-2);
  border-bottom:.5px solid var(--hair-2)}
.marq .tk>span{font-size:clamp(11px,1.15vw,15px);letter-spacing:.42em;
  gap:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px);
  color:var(--muted);font-weight:400}
.marq .tk i{font-size:.7em;letter-spacing:0;color:var(--lvl-t);opacity:.8}
.marq{animation:none}
.marq .tk{animation-duration:64s}
.marq.slow .tk{animation-duration:110s}

/* ---------------- ВЕС SONGER КАК ИЕРАРХИЯ ---------------- */
/* 400 — крупные заголовки, 500 — средние и цифры, 700 — одно слово в строке,
   которое несёт смысл. Больше трёх весов на странице не появляется. */
h1,h1.wm-name,section.wide h2{font-weight:400}
h2{font-weight:500}
h2 .hv{font-weight:700}
h3:not(.d),.sub-h b,.funnel .h,.path .st .v,.card .nm,.mega .m .n{font-weight:500}
.figs .v,.hstat b,.lvnum,.fig{font-weight:500}
.gpanel .big,.limit .big{font-weight:700}

/* ---------------- АКЦЕНТНЫЙ ПУНКТ ОСТРОВА ---------------- */
/* Одна кнопка в навигации несёт цвет: она ведёт к тому, ради чего сюда идут. */
.nav .item.lead-item{color:var(--lvl-t);font-weight:400;
  border:.5px solid color-mix(in srgb,var(--lvl-t) 40%,transparent);
  border-radius:var(--r-pill);padding:8px 15px;margin:0 3px}
.nav .item.lead-item::after{display:none}
.nav .item.lead-item:hover{color:var(--ink-hi);border-color:var(--lvl-t);
  background:color-mix(in srgb,var(--lvl-t) 12%,transparent)}
.nav .item.lead-item.on{background:color-mix(in srgb,var(--lvl-t) 16%,transparent);
  border-color:var(--lvl-t);color:var(--ink-hi)}

/* экспонента и феномены темнее по природе — им нужно больше атмосферы */
[data-atm="ex"]{--atm-o:.52}
[data-atm="fn"]{--atm-o:.44}
[data-atm="pr"]{--atm-o:.38}
[data-atm="an"]{--atm-o:.40}

/* длинный заголовок уровня не должен залезать в правую колонку */
h1.plain.long{font-size:clamp(24px,3.8vw,46px)}

/* элемент грид-колонки по умолчанию не сжимается ниже содержимого:
   длинное слово в заголовке из-за этого вылезает за колонку */
.lvgrid>div,.herogrid>div,.pair>div,.two>div{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
.wsplit>span{max-width:100%}

/* ==========================================================================
   ГОРИЗОНТАЛЬНАЯ ЛЕНТА
   Прокруткой управляет пользователь: колесо, трекпад, перетаскивание,
   свайп, клавиши и стрелки. Полоса снизу показывает, где он находится.
   ========================================================================== */
.hstage{position:relative;margin-top:clamp(28px,4vw,46px)}
.hstage .stick{position:static;height:auto;overflow:visible;display:block}
.hstage .track{display:flex;gap:clamp(14px,2vw,22px);
  padding:2px var(--pad) 18px;margin:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
  -webkit-overflow-scrolling:touch;transform:none!important;
  scrollbar-width:none;cursor:grab;outline:none}
.hstage .track::-webkit-scrollbar{display:none}
.hstage .track.grab{cursor:grabbing;scroll-snap-type:none}
/* во время жеста колесом снап тоже выключен, но курсор не меняется */
.hstage .track.gliding{scroll-snap-type:none}
.hstage .track:focus-visible{outline:2px solid var(--lvl-t);outline-offset:6px;
  border-radius:var(--r-card)}
.hstage .pan{position:relative;flex:none;scroll-snap-align:start;
  width:min(78vw,430px);height:min(58svh,440px);
  border:.5px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,3vw,34px);background:var(--plate);isolation:isolate;
  transition:border-color var(--base) var(--ease)}
.hstage .pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.62;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease)}
.hstage .pan::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,var(--canvas) 96%)}
.hstage .pan>*{position:relative;z-index:1}
.hstage .pan:hover{border-color:color-mix(in srgb,var(--pc) 55%,transparent)}
.hstage .pan:hover img{transform:scale(1.045);opacity:.78}
.hstage .pan .k{font-size:11px;color:var(--ash);letter-spacing:.14em}
.hstage .pan .n{font-family:var(--f-d);font-weight:500;font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-hi);margin-top:10px}
.hstage .pan .q{font-size:14.5px;color:var(--muted);margin-top:9px;max-width:26ch}
.hstage .pan .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13px;color:var(--ink-hi)}
.hstage .pan .go .ar{color:var(--pc);transition:transform var(--base) var(--spring)}
.hstage .pan:hover .go .ar{transform:translateX(5px)}
.hstage .rail-hint{display:none}

.rail-nav{display:flex;align-items:center;gap:14px;margin-top:8px;padding:0 var(--pad)}
.rail-nav button{width:38px;height:38px;flex:none;border-radius:var(--r-pill);
  border:.5px solid var(--hair);background:none;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  font-family:inherit;
  transition:color var(--base) var(--ease),border-color var(--base) var(--ease),opacity var(--base)}
.rail-nav button:hover:not(:disabled){color:var(--ink-hi);border-color:var(--lvl-t)}
.rail-nav button:disabled{opacity:.3;cursor:default}
.rail-nav .bar{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.rail-nav .bar::after{content:'';position:absolute;top:0;bottom:0;left:0;width:26%;
  background:var(--lvl-t);
  /* сдвиг вместо left: ширина указателя 26%, ход 74%, значит 74/26 = 284.6% своей ширины */
  transform:translateX(calc(var(--rail-p,0) * 284.6%));
  transition:transform 160ms linear}
.rail-nav .hint{font-size:11px;color:var(--ash);letter-spacing:.12em;white-space:nowrap}
@media(max-width:700px){
  .hstage .pan{width:82vw;height:58svh}
  .rail-nav .hint{display:none}
}
@media(prefers-reduced-motion:reduce){.rail-nav .bar::after{transition:none}}

/* фон среды: раздел не про один уровень, а про все четыре */
[data-atm="sr"]{--atm-o:.34}
[data-atm="sr"] .lnx{display:none}

/* ==========================================================================
   ВРЕМЕННЫЙ РЕЖИМ «ТОЛЬКО АНОМАЛИЯ» — 2026-09-09
   Прорыв, Экспонента, Феномены, Десятка и главная сняты с публикации в CMS
   (cms_page_routes.visible=0). Разметка островка/футера фиксирована в шаблоне,
   поэтому мёртвые ссылки скрываются здесь по адресу назначения, а не удаляются
   из шаблона: перекомпиляция шаблонов запрещена без миграции id полей.
   ВЕРНУТЬ СРЕДУ: удалить этот блок целиком + `node cms/anomaliya-only.mjs --restore`.
   ========================================================================== */

/* островок: пункты на скрытые страницы */
.nav .item[href^="index.html"],
.nav #megaBtn,
.mega{display:none !important}

/* мобильное меню: уровни, кроме Аномалии + разделы Десятки и Среды */
.sheet .lv[href^="proryv.html"],
.sheet .lv[href^="exponenta.html"],
.sheet .lv[href^="fenomeny.html"],
.sheet a[href^="index.html"],
.sheet h5:has(+ a[href^="index.html"]){display:none !important}

/* тело страницы: хлебные крошки, кнопки-действия и нижний переход по уровням */
.crumbs a[href^="index.html"],
.acts a[href^="index.html"],
.lift{display:none !important}

/* подвал: пункты карты сайта, ведущие на снятые страницы */
.f-map li:has(> a[href^="proryv.html"]),
.f-map li:has(> a[href^="exponenta.html"]),
.f-map li:has(> a[href^="fenomeny.html"]),
.f-map li:has(> a[href^="index.html"]){display:none !important}

/* бренд: пока на сайте один уровень, шапка/подвал называются АНОМАЛИЯ (значения
   полей в CMS, скрипт `cms/anomaliya-only-brand.mjs`). Здесь убираются остатки
   навигации по СРЕДЕ, которые нельзя переименовать осмысленно. */

/* хлебные крошки: ссылки «СРЕДА» и «Уровни» плюс разделители — остаётся «Аномалия» */
.crumbs a,
.crumbs i{display:none !important}

/* журнал CMS: на временном сайте пустой */
.cms-journal-link{display:none !important}

/* подвал: колонка «Среда» — манифест, как устроено, исследование, люди среды.
   Её ссылки ведут на снятую главную либо на заглушку «#». Колонка вторая в
   `.f-map .fg`; порядок задан шаблоном и не меняется без перекомпиляции. */
.f-map .fg > .rv:nth-child(2){display:none !important}

/* островок: знак прежнего бренда рядом с надписью. Текст «АНОМАЛИЯ» остаётся,
   сам знак скрываем. Базовое правило — style.css:137. Подвал (.f-mark) — тем же правилом. */
.nav .mark svg,
.f-mark svg{display:none !important}