/*
 * Сказкин — Design System CSS Variables
 * Version 2.2 «Экслибрис» · 2026-07-20 — синий+латунь на бумаге, Cygre ExtraBold 800 + Golos Text (Playfair снят 14.09.2026).
 * Version 1.0 · 2026-05-25 (архив: коралл+золото, Playfair+Montserrat).
 * Source: skazkin.me
 *
 * Имена токенов --skz-* сохранены для обратной совместимости; изменены только значения.
 * Шрифты — свои, файлы в public/fonts/ (перенесены с Google: scripts/fetch-fonts.mjs).
 * @font-face стоит прямо здесь, а не отдельным файлом: theme.css грузится на всех
 * страницах, поэтому объявления достаются даром — без лишнего запроса и без
 * @import-цепочки, из-за которой текст ждал бы второй круг загрузки.
 */

/* ⚠️ @import обязан стоять ВЫШЕ любых правил, включая @font-face: по стандарту
   всё, что идёт после первого правила, браузер молча выбрасывает. Импорт уже
   один раз уехал вниз (20.08.2026, вместе с переносом шрифтов) — и файл
   дизайн-системы три дня не грузился вовсе: токены --ds-* пропали, поля
   контейнера на телефоне свалились на запасные 48px вместо 20px. Ошибку не
   видно ни в консоли, ни в диффе. Сторож — тест в scripts/design-layout.test.mjs. */
@import url("/static/ds.generated.css");

/* fonts:start — СГЕНЕРИРОВАНО scripts/fetch-fonts.mjs, руками не править */
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/GolosText-v7-latin.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;
}
/* ── Cygre — заголовочная гарнитура (канон 14.09.2026) ─────────────────────
   Пришла на смену Playfair Display: владелец искал мягкую округлую форму с
   характером, ориентир — Parkinsans у WonderWraps. Отбор шёл по каталогу
   «Шрифтотеки» (1732 гарнитуры), Cygre выбран из финальной тройки.

   Формат .ttf, а не woff2: лицензия RandomMaerks (файл лежит рядом со
   шрифтом) запрещает менять расширение файла — п. 3.2. Модификацию она
   разрешает прямо (п. 3.1), поэтому набор символов подрезан до кириллицы с
   латиницей: 52 КБ → 30 КБ на начертание, по сети со сжатием около 15 КБ.

   unicode-range не указан намеренно: файл уже подрезан, а деление на
   подмножества (как у Playfair и Golos) для одного файла лишнее. */
@font-face {
  font-family: 'Cygre';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-ExtraBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Cygre';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-ExtraBoldIt.ttf) format('truetype');
}
@font-face {
  font-family: 'Cygre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Cygre';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-BoldIt.ttf) format('truetype');
}
@font-face {
  font-family: 'Cygre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Cygre';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/cygre/Cygre-RegularIt.ttf) format('truetype');
}
/* fonts:end */

/* ТОЛЬКО СВЕТЛАЯ ТЕМА — и браузер не смеет её перекрашивать (решение владельца
   27.09.2026). Заказ W2CJD9: у клиентки на Android включён «тёмный режим для
   сайтов», и браузер сам затемнил фон, шапку и выноски, а слои «эффекта книги»
   легли на иллюстрации молочной пеленой. Сайт при этом никак не объявлял свою
   тему — браузер решал за дизайнера.
   Именно «only light», а не «light»: проба в Chrome с принудительным
   затемнением (27.09.2026) — при «light» фон #FBF9F5 всё равно уходит в
   rgb(33,31,29), при «only light» остаётся светлым. Дублируется мета-тегом в
   <head> каждой страницы: он срабатывает до загрузки стилей. Сторож —
   server/lib/lightOnly.test.mjs. */
:root { color-scheme: only light; }

:root {
  /* ============ COLOUR — BRAND (Экслибрис) ============ */
  --skz-coral:        #2B55C8;   /* CTA / основной акцент — синий blue-core (имя legacy) */
  --skz-coral-hover:  #2447A8;   /* Наведение на CTA — blue-press */
  /* Нажатие CTA — blue-deep. Третий оттенок понадобился 13.09.2026, когда
     владелец решил обозначать ВСЕ состояния кнопок только цветом: до этого
     наведение и нажатие делили один тон, а нажатие дополнительно показывалось
     сжатием кнопки (transform) — то есть «физикой», а не цветом. */
  --skz-coral-active: #1D3A8A;   /* Нажатие CTA — blue-deep */
  --skz-gold:         #F4C451;   /* Латунь: декор, искра, фольга (НЕ текст на светлом) */
  --skz-gold-hover:   #2B55C8;   /* Текст-золото / нажатие латунной кнопки — brass-text (AA 6.4:1) */

  /* ============ COLOUR — NEUTRALS ============ */
  --skz-chocolate:    #232E47;   /* Основной текст — чернила (ink) */
  --skz-indigo:       #232E47;   /* Тёмная поверхность — «ночь» (тот же ink) */
  --skz-gray-warm:    #545D70;   /* Приглушённый текст, caption — ink-soft (AA) */
  --skz-light-tan:    #F7DFA0;   /* Описания на тёмном — brass-soft */

  /* ============ COLOUR — SURFACES ============ */
  --skz-bg:           #FBF9F5;   /* Фон-бумага (paper). Белый вместо неё — нельзя */
  --skz-surface:      #FFFFFF;   /* Карточки, поднятые блоки (card) */
  /* Чистый белый — ТОЛЬКО полки каталога (решение владельца 25.08.2026).
     Отдельный токен, а не литерал #fff по месту: так видно, где именно бренд
     отступает от бумажной палитры, и белый не расползётся по остальным
     секциям. Фоном страницы, карточек и вставок остаётся бумага. */
  --skz-shelf:        #FFFFFF;   /* Фон секции-полки каталога (shelf) */
  --skz-sand:         #EDF4F8;   /* Отзывы, альт-секции — форзац (endpaper) */

  /* ============ COLOUR — LINES ============ */
  --skz-line:         #E4E2DD;   /* Тонкие разделители/рамки */
  --skz-line-deep:    #CFCCC5;   /* Контрастная линия */
  --skz-line-control: #8B8578;   /* Рамка интерактивного контрола: 3,3:1 и выше на всех наших фонах */

  /* ============ COLOUR — TEXT ============ */
  --skz-text-light:        var(--skz-chocolate);
  --skz-text-light-muted:  var(--skz-gray-warm);
  --skz-text-dark:         #FBF9F5;       /* На чернильном фоне — бумага */
  --skz-text-dark-muted:   var(--skz-light-tan);
  --skz-text-on-primary:   #FFFFFF;       /* На синей CTA — кремовый */

  /* ============ COLOUR — STATE ============ */
  --skz-success:      #2E6B4A;   /* Приглушённый зелёный под палитру */
  --skz-warning:      #B4402B;   /* Ошибка — тёплый терракот (не сливается с синим CTA) */

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --skz-font-serif:   'Cygre', 'Golos Text', sans-serif;
  --skz-font-sans:    'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ============ TYPOGRAPHY — WEIGHTS ============ */
  --skz-weight-regular:   400;
  --skz-weight-medium:    500;
  --skz-weight-semibold:  600;
  --skz-weight-bold:      700;
  --skz-weight-serif:     800;
  --skz-weight-black:     900;

  /* ============ TYPOGRAPHY — SIZES (шкала ДС «Экслибрис» 16.07.2026:
     заголовки текут clamp'ом, отдельные мобильные ступени не нужны) ============ */
  --skz-text-h1:           clamp(29px, 3.1vw, 40px);
  --skz-text-h2:           clamp(26px, 2.6vw, 32px);
  --skz-text-h3:           22px;
  --skz-text-epigraph:     22px;
  --skz-text-body:         16px;
  --skz-text-button:       16px;
  --skz-text-price:        30px;
  --skz-text-descriptor:   13px;
  --skz-text-caption:      14px;

  /* ============ TYPOGRAPHY — LINE HEIGHT ============ */
  --skz-leading-tight:    1.1;
  --skz-leading-snug:     1.15;
  --skz-leading-normal:   1.2;
  --skz-leading-relaxed:  1.4;
  --skz-leading-loose:    1.6;

  /* ============ TYPOGRAPHY — LETTER SPACING ============ */
  --skz-tracking-tight:   -0.01em;
  --skz-tracking-normal:  0;
  --skz-tracking-wide:    0.04em;
  --skz-tracking-wider:   0.08em;   /* Descriptor caps */

  /* ============ SPACING (шкала ДС: 4 8 12 16 24 32 48 64 96) ============ */
  --skz-space-1:   4px;
  --skz-space-2:   8px;     /* base unit */
  --skz-space-3:   12px;
  --skz-space-4:   16px;
  --skz-space-5:   20px;    /* ЛЕГАСИ вне шкалы — в новом коде не использовать */
  --skz-space-6:   24px;
  --skz-space-8:   32px;
  --skz-space-10:  40px;    /* ЛЕГАСИ вне шкалы — в новом коде не использовать */
  --skz-space-12:  48px;    /* section gap mobile */
  --skz-space-16:  64px;
  --skz-space-20:  80px;    /* ЛЕГАСИ вне шкалы — в новом коде не использовать */
  --skz-space-24:  96px;    /* section gap desktop */

  /* ============ BORDER RADIUS (шкала ДС 16.07.2026: 0/2/6/8, больше 8 — нет;
     легаси-имена сохранены, значения сведены к канону) ============ */
  /* ============ ОТБИВКА БЛОКА (вертикальные отступы секции) ============
     Четыре ступени вместо жёсткой пары «96 на десктопе / 48 на телефоне».
     У блока две независимые настройки — сверху и снизу (классы .skz-pt-* и
     .skz-pb-* в layout.css), мобильное значение подставляется само.
     Приём взят у конструкторов (Тильда, Shopify): список ступеней, а не
     произвольные числа — иначе за полгода на сайте заводится сорок разных
     отступов. Значения — из шкалы §3, ничего нового не вводится. */
  --skz-block-0:       0;
  --skz-block-xs:      24px;   /* служебная шапка: каталог и подобные */
  --skz-block-s:       48px;    /* тесная пара блоков */
  --skz-block-m:       64px;    /* обычная отбивка, по умолчанию */
  --skz-block-l:       96px;    /* крупный смысловой раздел */

  --skz-radius-none:   0;
  --skz-radius-sm:     8px;     /* карточки, панели */
  --skz-radius-md:     8px;     /* карточки, модалки (было 16) */
  --skz-radius-lg:     8px;     /* крупные панели (было 20) */
  --skz-radius-xl:     6px;     /* кнопки, поля (было 24 pillow) */
  --skz-radius-full:   9999px;  /* только круглые счётчики/точки */

  /* ============ SHADOWS ============ */
  --skz-shadow-card:        0 4px 24px rgba(35, 46, 71, 0.07);
  --skz-shadow-card-hover:  0 10px 32px rgba(35, 46, 71, 0.12);
  --skz-shadow-cta:         0 4px 16px rgba(43,85,200, 0.22);  /* ЛЕГАСИ: тень наружу против ДС (кнопкам — кромка inset); живёт до переверстки чекаута */
  --skz-shadow-divider:     0 1px 0 rgba(207,204,197, 0.55);
  /* Тень обложки-МИНИАТЮРЫ: корзина (132px), сводка оплаты (104), состав
     заказа (96), список кабинета (88). Книга лежит на бумаге, а не приклеена
     к карточке; направление вправо-вниз задаёт свет слева сверху и показывает
     толщину книги.

     Размер пересчитан от ширины обложки (решение владельца 10.10.2026,
     вариант «B» из показанных на стенде). Прежние 6/6/6 при чёрном 50%
     подбирались 25.08.2026 на карточке КАТАЛОГА, где обложка 350px: там
     смещение — 1,7% ширины. На миниатюре 132px та же тень даёт уже 4,5%, то
     есть относительно книги она была в два с половиной раза крупнее
     задуманного, и книга выглядела висящей над плашкой. Теперь смещение 3px
     (2,3%), размытие 4px — чуть больше смещения, чтобы край не читался
     жёсткой полосой, — и чернота легче: 40% вместо 50%, иначе на мелком
     объекте тень выглядит грязью.

     ⚠️ Каталог на главной живёт по своим параметрам (home.css, drop-shadow
     6/6/6 при 50%): там обложка втрое крупнее, и пересчёт ей не нужен. */
  --skz-shadow-cover:       3px 3px 4px rgba(0, 0, 0, 0.4);

  /* ============ LAYOUT ============ */
  --skz-container-max:        1200px;
  --skz-container-pad-mobile: 20px;
  --skz-container-pad-desk:   48px;
  --skz-button-min-height:    48px;

  /* ============ BREAKPOINTS ============ */
  /* Use in media queries: */
  /* @media (max-width: 480px)  { ... mobile ... } */
  /* @media (max-width: 960px)  { ... tablet ... } */
  /* @media (min-width: 1200px) { ... desktop ... } */
}

/* ============ MOBILE-SCALED TYPOGRAPHY ============
   Заголовки и цена текут clamp'ом — мобильные ступени только у мелких стилей */
@media (max-width: 480px) {
  :root {
    --skz-text-h3:         20px;
    --skz-text-epigraph:   18px;
    --skz-text-body:       15px;
    --skz-text-descriptor: 11px;
    --skz-text-caption:    12px;
  }
}

/* ============ BASE STYLES ============ */
body {
  font-family: var(--skz-font-sans);
  font-weight: var(--skz-weight-regular);
  font-size: var(--skz-text-body);
  line-height: var(--skz-leading-loose);
  color: var(--skz-text-light);
  background: var(--skz-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--skz-font-serif);
  font-weight: var(--skz-weight-serif);
  color: var(--skz-chocolate);
  text-transform: none; /* заголовочная Cygre — без капса */
}

h1 { font-size: var(--skz-text-h1); line-height: var(--skz-leading-tight); }
h2 { font-size: var(--skz-text-h2); line-height: var(--skz-leading-snug); }
h3 { font-size: var(--skz-text-h3); line-height: var(--skz-leading-normal); }

em, .italic-editorial {
  font-family: var(--skz-font-serif);
  font-style: italic;
  font-weight: var(--skz-weight-serif);
}

.descriptor {
  font-family: var(--skz-font-sans);
  font-weight: var(--skz-weight-medium);
  font-size: var(--skz-text-descriptor);
  letter-spacing: var(--skz-tracking-wider);
  text-transform: uppercase;
  color: var(--skz-gray-warm);
}

/* ============ BUTTON UTILITIES ============ */
.btn-skz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--skz-button-min-height);
  padding: 14px 32px;
  border-radius: var(--skz-radius-xl);
  font-family: var(--skz-font-sans);
  font-weight: var(--skz-weight-semibold);
  font-size: var(--skz-text-button);
  letter-spacing: var(--skz-tracking-wide);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out,
    color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.btn-skz--primary {
  background: var(--skz-coral);
  color: var(--skz-text-on-primary);
}
.btn-skz--primary:hover {
  background: var(--skz-coral-hover);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
}

/* --secondary (шоколадная заливка) и --gold (латунь+чернила ~3,6:1) удалены
   16.07.2026 — против ДС; админская --gold живёт переопределением в admin.css */

.btn-skz--ghost {
  background: transparent;
  color: var(--skz-chocolate);
  border-color: var(--skz-line-deep);
}
.btn-skz--ghost:hover {
  background: var(--skz-surface);
  border-color: var(--blue-core);
  color: var(--skz-chocolate);
}

/* ============ CONTAINER ============ */
.container-skz {
  max-width: var(--skz-container-max);
  margin: 0 auto;
  padding: 0 var(--skz-container-pad-mobile);
}
@media (min-width: 768px) {
  .container-skz { padding: 0 var(--skz-container-pad-desk); }
}

/* ============ CARD UTILITY ============ */
.card-skz {
  background: var(--skz-surface);
  border-radius: var(--skz-radius-md);
  padding: var(--skz-space-8);
  box-shadow: var(--skz-shadow-card);
  transition: box-shadow 0.2s ease-out;
}
/* hover не двигает макет (канон motion ДС) — только тень */
.card-skz:hover {
  box-shadow: var(--skz-shadow-card-hover);
}

/* ============ SECTION UTILITY ============ */
.section-skz {
  padding: var(--skz-space-24) 0;
}
@media (max-width: 480px) {
  .section-skz { padding: var(--skz-space-12) 0; }
}

.section-skz--dark {
  background: var(--skz-indigo);
  color: var(--skz-text-dark);
}
.section-skz--dark h1,
.section-skz--dark h2,
.section-skz--dark h3 {
  color: var(--skz-text-dark);
}

.section-skz--cream { background: var(--skz-surface); }
.section-skz--sand  { background: var(--skz-sand); }
/* Ночной остров (канон §«Рецепты секций»): тёмное поле обрывает светлую
   простыню страницы и даёт секции вес. Текст — крем и форзац, действие —
   btn-cream. Два тёмных острова подряд не ставим. */
.section-skz--night {
  background-color: var(--skz-indigo);
  background-image: none;
  color: var(--skz-sand);
}
.section-skz--night .section-title { color: #FFFFFF; }
.section-skz--night .section-sub { color: var(--skz-sand); }

.section-skz--endpat {
  background-color: var(--skz-sand);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 24 24 0 48 24 24 48Z" fill="none" stroke="%23F4C451" stroke-opacity=".08"/><circle cx="24" cy="0" r="1.5" fill="%23F4C451" fill-opacity=".09"/><circle cx="0" cy="24" r="1.5" fill="%23F4C451" fill-opacity=".09"/><circle cx="48" cy="24" r="1.5" fill="%23F4C451" fill-opacity=".09"/><circle cx="24" cy="48" r="1.5" fill="%23F4C451" fill-opacity=".09"/></svg>');
}


/* Телефон: те же ступени отбивки, но плотнее — блоки не разгоняют страницу. */
@media (max-width: 640px) {
  :root {
    --skz-block-xs: 16px;
    --skz-block-s: 32px;
    --skz-block-m: 40px;
    --skz-block-l: 48px;
  }
}