/* ===========================================================================
   ASTASHKO v2 — ОБЩИЙ СЛОЙ.
   Едет на каждую страницу сайта: шрифты, токены, база, три голоса, органы
   управления, шапка, мобильное меню, подвал, cookie. CSS конкретной страницы
   живёт инлайном в её шаблоне и подключается ПОСЛЕ этого файла.

   Источник правды вёрстки — .business/brand/homepage-proto/style2.css
   (прототип, бордово-бирюзовая палитра, принята 14.11.2026). Правила
   перенесены дословно; где пришлось разрезать правило прототипа на
   «общее» и «страничное», стоит комментарий.

   Токены и правила — по .business/brand/astashko-identity-v1.md (v1.2),
   кроме раздела B (палитра) — он устарел и описывает снятый Electric Lime,
   цвета берём из style2.css. Остальное в силе: C.3/C.5 три голоса и шкала ·
   D.1 ПОЛЕ · D.2 СДВИГ · D.4 сетка, радиус 0, без теней и градиентов ·
   F.1–F.3 компоненты и состояния · G.1 громкий режим · H антидизайн.

   Файл отдаётся с хешем в имени и бессрочным кэшем — руками кэш не сбрасываем,
   имя меняет сборщик (tools/build-assets.sh). Править этот файл, не копию.
   =========================================================================== */

/* --- 0. Шрифты · свой хостинг -------------------------------------------- *
   Google Fonts с сайта ушёл полностью (решение Андрея 13.11.2026).
   Три гарнитуры под OFL 1.1, текст лицензий — рядом в assets/fonts/.
   Файлы вариативные: один файл на подмножество закрывает весь нужный
   диапазон веса. Подмножества ровно три — кириллица, латиница и latin-ext
   (в нём живёт знак ₽, U+20BD: без него цены свалятся на подменный шрифт).
   unicode-range оставлен гугловский: браузер скачает только то, что реально
   встретил на странице.                                                      */

@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/source-serif-4-v15-cyrillic-s1.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/source-serif-4-v15-latin-ext-s1.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/source-serif-4-v15-latin-s1.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Inter Tight';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-tight-v9-cyrillic-s1.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter Tight';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-tight-v9-latin-ext-s1.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter Tight';font-style:normal;font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-tight-v9-latin-s1.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Martian Mono';font-style:normal;font-weight:400 500;
  font-display:swap;
  src:url(../fonts/martian-mono-v6-cyrillic-s1.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Martian Mono';font-style:normal;font-weight:400 500;
  font-display:swap;
  src:url(../fonts/martian-mono-v6-latin-ext-s1.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Martian Mono';font-style:normal;font-weight:400 500;
  font-display:swap;
  src:url(../fonts/martian-mono-v6-latin-s1.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 1. Токены · бордово-бирюзовая палитра, 14.11.2026 -------------------- */
:root{
  /* структура */
  --ink:#4B100E;      /* самая глубокая плоскость: бордовый */
  --carbon:#1A0A09;   /* основной тёмный и основной текст на бумаге, 16.93 */
  --steel:#6B4A47;    /* вторичный текст на бумаге, AA 6.85 */
  --stone:#D9C9C2;    /* вторичный текст на бордовом, AA 9.48 */
  --mineral:#F4F0E8;  /* бумага по умолчанию */
  --chalk:#FBF8F2;    /* поднятая поверхность: лист, форма, таблица */
  /* состояние */
  --accent:#0CCBD5;        /* бирюзовый. Отметка изменившегося и финальная
                              плоскость. Никогда не текст на бумаге (1.76) */
  --accent-text:#8D1010;   /* тёмно-бордовый: ссылки, акценты, мелкие метки, 8.34 */
  --accent-veil:#FFD20A;   /* жёлтый: подложка маркера, Carbon на нём 13.26 */
  --accent-grid:#8A3A33;   /* линии и клетки поля на бордовом */
  --amber:#FF970B;         /* оранжевый: метки на тёмных полосах, 7.02. Не на бумаге */
  --alarm:#F20D13;         /* красный: только крупный кегль и декоративные рубежи */
  --dim:#CFC6BC;      /* метки поля до рубежа на светлом */
  /* сопротивление */
  /* вторичный текст на бирюзовом: Carbon при 0.72 даёт 5.70 — запас есть.
     Ниже 0.70 опускаться нельзя. */
  --on-lime-2:rgba(26,10,9,.72);
  --signal:#8D1010;        /* цена, отказ, предел — на бумаге и как грунт полосы отказа */
  --signal-bright:#FFD20A; /* то же на тёмном */
  /* голоса */
  --thought:"Source Serif 4",Georgia,"Times New Roman",serif;  /* МЫСЛЬ */
  --action:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif; /* ДЕЙСТВИЕ */
  --measure:"Martian Mono",ui-monospace,Menlo,Consolas,monospace; /* ИЗМЕРЕНИЕ */
  /* сетка */
  --maxw:1320px;
  --gut:56px;
  --nav-h:74px;
}

/* --- 2. База ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--mineral);color:var(--carbon);
  font-family:var(--action);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
ul{list-style:none}
blockquote{quotes:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
/* на тёмных плоскостях обводка фокуса бумажного цвета не видна — бирюза */
.band-method :focus-visible,.band-foot :focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--carbon);
  color:var(--mineral);padding:14px 20px;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* --- 3. Голоса и утилиты ------------------------------------------------- */
.thought{font-family:var(--thought);font-weight:600;letter-spacing:-0.022em;line-height:0.96}
.meas{font-family:var(--measure);font-variant-numeric:tabular-nums}
.tag{font-family:var(--measure);font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--steel);font-weight:400}
.tag--dark{color:var(--stone)}
.tag--onlime{color:var(--on-lime-2)}
.h2{font-family:var(--thought);font-weight:600;
  font-size:clamp(36px,4.4vw,62px);line-height:0.99;letter-spacing:-0.028em;margin-top:22px}
/* маркер — главный приём выделения, один на экран */
.mark{background:linear-gradient(var(--accent-veil),var(--accent-veil));
  background-size:100% .72em;background-position:0 78%;background-repeat:no-repeat}

/* --- 3bis. Микродрейф тона на метках -------------------------------------
   Решение Андрея 14.11.2026. Не свечение и не подсветка: цвет метки уходит
   в сторону бирюзы (на тёмном) или тёмно-бордового (на бумаге) и возвращается.
   Период 7 с, фазы у разных меток разведены — они не пульсируют хором,
   поэтому эффект читается не как анимация, а как сомнение в собственном
   зрении. Амплитуда задаётся одним числом: доля целевого цвета в подмешивании.
   Паинт идёт только у меток в кадре — за это отвечает класс .flick в app.js. */
/* Три амплитуды, потому что одна и та же доля цвета читается по-разному
   на разных грунтах. Число = сколько целевого цвета подмешано в верхней фазе. */
:root{
  --flick-amp:25%;        /* метки на тёмном: Stone → Accent */
  --flick-amp-paper:50%;  /* метки на бумаге: Steel → Accent Text. Тут контраст
                             только растёт, потолок около 70 %, ограничение — вкус */
  --flick-amp-logo:15%;   /* «АСТАШКО» в шапке: Carbon почти чёрный,
                             доля акцента здесь работает заметно сильнее */
}

@keyframes flick{ 0%,100%{ color:var(--flick-a) } 50%{ color:var(--flick-b) } }

/* На светлом грунте дрейф идёт в Accent Text (тёмно-бордовый): подмешивание
   яркой бирюзы в этой дозе даёт 1.76 при норме 4.5, метка становится
   нечитаемой. Accent Text — тёмная форма того же смысла, контраст держится. */
.tag.flick{
  --flick-a:var(--steel);
  --flick-b:color-mix(in srgb, var(--steel) calc(100% - var(--flick-amp-paper)), var(--accent-text));
  animation:flick 7s ease-in-out infinite;
}
/* На тёмном грунте, наоборот, тянем в яркую бирюзу */
.tag--dark.flick{
  --flick-a:var(--stone);
  --flick-b:color-mix(in srgb, var(--stone) calc(100% - var(--flick-amp)), var(--accent));
}
/* разводим фазы, чтобы метки не дышали в такт */
.tag.flick:nth-of-type(2n){ animation-delay:-2.3s }
.tag.flick:nth-of-type(3n){ animation-delay:-4.1s }
.band-method .tag.flick{ animation-delay:-1.2s }
.band-cases .tag.flick{ animation-delay:-5.4s }
.band-faq .tag.flick{ animation-delay:-3.7s }

/* «АСТАШКО» в шапке. Насечки под словом не трогаем — дрейфует имя,
   поле под ним стоит. Шапка липкая, так что это единственный элемент,
   который дышит всё время, пока открыта вкладка. */
.logo b.flick{
  --flick-a:var(--carbon);
  --flick-b:color-mix(in srgb, var(--carbon) calc(100% - var(--flick-amp-logo)), var(--accent));
  animation:flick 7s ease-in-out infinite;
  animation-delay:-6.1s;
}
.menu-top .logo b.flick, .foot-logo b.flick{ animation:none }

/* на цветных плоскостях дрейфа нет: там акцентный цвет уже израсходован,
   подмешивать его в текст — ронять контраст */
.tag--onlime.flick{ animation:none }

@media (prefers-reduced-motion:reduce){ .tag.flick{ animation:none } }

/* --- 4. Органы управления ------------------------------------------------ */
/* Акцентного (бирюзового) цвета в кнопках нет ни в каком состоянии,
   даже на бирюзовой полосе (B.3). */
.btn{display:inline-block;background:var(--carbon);color:var(--mineral);
  font-weight:600;font-size:16px;letter-spacing:-0.005em;
  padding:19px 34px;border-radius:0;text-decoration:none;
  transition:background .18s linear}
.btn:hover{background:var(--ink)}
.btn--sm{padding:13px 22px;font-size:14px}
.lnk{display:inline-block;font-weight:600;font-size:17px;text-decoration:none;
  color:var(--accent-text);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.lnk:hover{border-bottom-width:3px;padding-bottom:1.5px}
.lnk--dark{color:var(--mineral);border-color:rgba(244,240,232,.45)}
.lnk--dark:hover{border-color:var(--accent)}
.lnk--onlime{color:var(--carbon)}

/* --- 4b. Финальный призыв «Записаться на диагностику» -------------------- */
/* Переехал сюда из front-page.css фазой 3: раньше только главная кончалась
   этой полосой, теперь её собирает footer.php на любой странице (кроме тех,
   что ставят $GLOBALS['skip_diagnostika_cta'] = true и несут свой финал —
   так делает page-za-predelami-privychki.php). Единственная центрированная
   композиция на странице (G.1 п.2). */
.band-step{background:var(--accent);color:var(--carbon);padding:104px 0 110px;
  text-align:center;position:relative}
.step-h{font-family:var(--thought);font-weight:700;font-size:clamp(38px,6.4vw,92px);
  line-height:0.98;letter-spacing:-0.03em;margin:26px auto 0}
.step-sub{font-size:20px;color:var(--on-lime-2);margin:28px auto 44px;max-width:52ch}
.step-act{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.step-tel{font-family:var(--measure);font-size:15px;text-decoration:none;
  border-bottom:1.5px solid rgba(26,10,9,.4);padding-bottom:3px}

/* --- 5. Шапка ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:50;background:var(--mineral);
  border-bottom:1px solid transparent}
.nav.is-stuck{border-bottom-color:rgba(26,10,9,.14)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:40px}
.logo{display:block;text-decoration:none;color:var(--carbon)}
.logo b{font-weight:700;font-size:17px;letter-spacing:.2em;
  text-transform:uppercase;display:block;line-height:1}
.logo svg{margin-top:5px;display:block}
.nav-links{display:flex;gap:30px}
.nav-links a{font-family:var(--measure);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--steel);
  padding-bottom:7px;border-bottom:2px solid transparent}
/* активный пункт отмечен насечкой, не цветом текста и не плашкой (F.2) */
.nav-links a:hover{color:var(--carbon);border-bottom-color:var(--accent)}
/* то же для текущего пункта меню WordPress: в теме активный пункт приезжает
   классом li.current-menu-item, а не классом на ссылке */
.nav-links li.current-menu-item>a,
.nav-links li.current-menu-parent>a,
.nav-links li.current-page-ancestor>a{color:var(--carbon);border-bottom-color:var(--accent)}
/* меню рисует WordPress списком — снимаем с него список и раскладываем в ряд */
.nav-links ul{display:flex;gap:30px;margin:0;padding:0}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-tel{font-family:var(--measure);font-size:12.5px;text-decoration:none;
  display:inline-block;padding:4px 0}
.nav .btn{padding:13px 22px;font-size:14px}
.burger{display:none;padding:8px 0 8px 10px;color:var(--carbon)}

/* --- 6. Мобильное меню --------------------------------------------------- */
.menu{position:fixed;inset:0;z-index:120;background:var(--carbon);
  color:var(--mineral);overflow-y:auto}
.menu-top{position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;color:var(--mineral)}
.menu-top .logo,.menu-top .logo b{color:var(--mineral)}
.menu-close{color:var(--mineral);padding:10px;margin:-10px}
.menu-in{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:110px 22px 48px}
.menu-in>a,.menu-in li>a{font-family:var(--thought);font-weight:600;font-size:38px;
  letter-spacing:-0.02em;line-height:1.3;text-decoration:none;display:block;
  border-bottom:1px solid rgba(244,240,232,.16);padding:14px 0}
.menu-in ul{display:block}
.menu-foot{margin-top:34px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.menu-foot .btn{background:var(--mineral);color:var(--carbon);width:100%;text-align:center}
.menu-tel{font-family:var(--measure);font-size:15px;text-decoration:none;color:var(--stone)}

/* --- 7. Подвал · Ink ----------------------------------------------------- */
/* Нижняя строка подвала — Stone, а не Steel: Steel на Ink просаживает контраст. */
.band-foot{background:var(--ink);color:var(--stone);padding:72px 0 56px;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot-grid h3{font-family:var(--measure);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mineral);margin-bottom:18px;font-weight:400}
.foot-grid ul{display:grid;gap:11px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--mineral)}
.foot-logo{color:var(--stone)}
.foot-logo b{color:var(--mineral)}
.foot-about{max-width:34ch;margin-top:18px;line-height:1.5}
.foot-note{margin-top:56px;padding-top:24px;border-top:1px solid rgba(244,240,232,.14);
  font-family:var(--measure);font-size:11px;letter-spacing:.06em;color:var(--stone)}
.foot-note a{text-decoration:none;border-bottom:1px solid rgba(244,240,232,.2)}

/* --- 8. Cookie ----------------------------------------------------------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--carbon);color:var(--mineral);border-top:1px solid rgba(244,240,232,.16)}
.cookie-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:34px}
.cookie p{font-size:14px;color:var(--stone);line-height:1.5;max-width:86ch}
.cookie a{color:var(--mineral)}
.cookie .btn{background:var(--mineral);color:var(--carbon);flex:0 0 auto}
.cookie .btn:hover{background:#fff}
[hidden]{display:none!important}

/* --- 9. Планшет · 700–1024 px -------------------------------------------- */
/* Своя раскладка, а не мобильная (решение 13.11.2026). Здесь — только общий
   слой; раскладка полос главной лежит в CSS главной. */
@media (min-width:700px) and (max-width:1024px){
  :root{--gut:36px}

  /* пункты меню уходят в бургер, целевое действие и телефон остаются видимыми */
  .nav-links{display:none}
  .burger{display:block;padding:12px 0 12px 12px}
  .nav-right{gap:18px}
  .nav-tel{font-size:12px;display:inline-block;padding:13px 0}
  .nav .btn{padding:13px 18px;font-size:13.5px;white-space:nowrap}

  .foot-grid{grid-template-columns:1fr 1fr;gap:38px}

  .band-step{padding:80px 0 84px}
  .step-h{font-size:clamp(46px,6.8vw,64px)}
  .step-sub{font-size:18px}

  /* тач-цели: планшет — палец, а не курсор */
  .lnk{padding-top:12px;padding-bottom:12px}
  .lnk:hover{padding-bottom:10.5px}
  .menu-tel{padding-top:12px;padding-bottom:12px;display:inline-block}
  .foot-grid a{display:inline-block;padding:11px 0}
  .cookie a{display:inline-block;padding:4px 0}
}

/* --- 10. Телефон · до 699 px --------------------------------------------- */
/* Не уменьшенный десктоп: другие кегли, другие раскладки, цвет во всю ширину. */
@media (max-width:699px){
  :root{--gut:22px}
  body{font-size:17px}

  .nav-links,.nav-tel{display:none}
  .burger{display:block;padding:15px 0 15px 14px}
  .nav-in{padding:13px var(--gut);gap:14px}
  /* целевое действие остаётся в шапке и на телефоне, не прячется в меню */
  .nav .btn{padding:12px 16px;font-size:13px;white-space:nowrap}
  .logo{padding:7px 0}

  .lnk{padding-top:14px;padding-bottom:14px}
  .menu-tel{padding-top:12px;padding-bottom:12px;display:inline-block}

  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-grid a{display:inline-block;padding:10px 0}

  .band-step{padding:56px 0 60px}
  .step-h{font-size:clamp(30px,9.4vw,42px)}
  .step-sub{font-size:17px;margin:20px auto 32px}
  .step-act{flex-direction:column;align-items:stretch}
  .step-act .btn{text-align:center;width:100%}
  .cookie-in{flex-direction:column;align-items:flex-start;gap:16px;padding:16px var(--gut)}
  .cookie .btn{width:100%;text-align:center}
  .cookie a{display:inline-block;padding:4px 0}
}