/* ============================================================================
   site.css — РЕДАКЦИОННЫЙ СЛОЙ БРЕНДА smartnutrition
   ============================================================================
   Слой поверх broadsheet.css. Здесь:
     1) переопределяется палитра/скругления под бренд (крем / зелёный / голубой);
     2) описаны ВСЕ компоненты страниц (шапка, hero, карточки, сетки, футер …);
     3) добавлены современные эффекты — стеклоформизм, градиентные CTA,
        псевдоэлементы, ховеры, кастомные keyframe-анимации и scroll-reveal.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ (важно!): broadsheet.css → site.css.
   site.css перекрывает токены базового слоя, поэтому идёт вторым.

   СТРУКТУРА ФАЙЛА (ищите по маркерам «── … ──»):
     · Токены и бренд-палитра
     · Фон: амбиентные блобы + зерно
     · Базовая типографика и утилиты
     · Кастомные keyframes (анимации)
     · Scroll-reveal (появление секций при прокрутке)
     · Шапка / навигация / мега-меню
     · Мобильное меню (drawer) + бургер
     · Hero «обложка журнала»
     · Секции, карточки, сетки (рецепты, планы, книги, блог, CTA …)
     · Тёмный newsletter-блок, футер, хлебные крошки
     · Состояния форм (валидация/успех/ошибка)
     · Кнопка «наверх», скип-линк
     · Адаптив (медиа-запросы)
     · Печатные стили (кнопка «Print Recipe»)
   Каждая анимация уважает prefers-reduced-motion (см. блок в конце).
   ============================================================================ */

/* ── Токены и бренд-палитра ──────────────────────────────────────────────── */
:root {
  --edge: clamp(20px, 5vw, 84px);   /* горизонтальные поля контейнера .wrap */
  --maxw: 1280px;                    /* максимальная ширина контента */
  --ink: var(--color-text);
  --rule: color-mix(in srgb, var(--color-text) 86%, transparent);  /* жирная линейка */
  --hair: color-mix(in srgb, var(--color-text) 13%, transparent);  /* тонкая линия */
  --muted: color-mix(in srgb, var(--color-text) 66%, transparent);
  --faint: color-mix(in srgb, var(--color-text) 50%, transparent);
  --spot: var(--color-accent-2-700);  /* акцент-«споты» (надзаголовки) */
  --link: var(--color-accent-700);    /* цвет ссылок, читаемый на креме */

  /* Смягчённые скругления — переопределяем токены DS, чтобы КАЖДЫЙ скруглённый
     элемент (в т. ч. инлайновые var(--radius-*) по всем страницам) стал мягче */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --r-pill: 999px;   /* «таблетка» */
  --r-xl: 34px;      /* крупные карточки/hero */

  /* Градиенты бренда: используются в кнопках, номерах секций, подчёркиваниях */
  --grad: linear-gradient(120deg, var(--color-accent-600), var(--color-accent-2-600) 92%);
  --grad-soft: linear-gradient(120deg, var(--color-accent), var(--color-accent-2));

  /* Фоновые «пятна» бренд-цветов — общий рецепт для статичного слоя (body::before)
     и подвижного слоя параллакса (.sn-ambient), чтобы они не расходились. */
  --sn-blobs:
    radial-gradient(38vw 38vw at 10% 6%, color-mix(in srgb, var(--color-accent) 46%, transparent), transparent 60%),
    radial-gradient(34vw 34vw at 90% 0%, color-mix(in srgb, var(--color-accent-2) 40%, transparent), transparent 60%),
    radial-gradient(46vw 42vw at 82% 88%, color-mix(in srgb, var(--color-process-yellow) 30%, transparent), transparent 62%),
    radial-gradient(40vw 40vw at 2% 96%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 62%);

  /* Стеклоформизм (glass) — плавающая «хромовая» поверхность.
     Непрозрачность высокая (94%): панели мега-меню/дровера и чипы не должны
     просвечивать контент, иначе текст на них теряется. «Морозность» даёт blur. */
  --glass-bg: color-mix(in srgb, var(--color-bg) 94%, transparent);
  --glass-brd: color-mix(in srgb, #ffffff 62%, transparent);
  --glass-blur: saturate(1.35) blur(12px);   /* blur уменьшен (12px) — дешевле для GPU слабых устройств */

  /* Бренд-палитра smartnutrition — крем / белый / чёрный + зелёный и голубой
     акценты (оранжевый оставлен только для звёзд рейтинга, эхо дольки апельсина
     на логотипе). Переопределение ramp'ов перекрашивает все компоненты. */
  --color-bg: #f6f1e6;        /* крем */
  --color-surface: #ffffff;   /* белый */
  --color-text: #1c1d16;      /* почти чёрный */
  --color-divider: color-mix(in srgb, #1c1d16 15%, transparent);

  /* primary = листовой зелёный (из логотипа) */
  --color-accent: #6a9a30;
  --color-accent-100: #eef4e1;
  --color-accent-200: #dcebc2;
  --color-accent-300: #c0da95;
  --color-accent-400: #9dc562;
  --color-accent-500: #7fae3f;
  --color-accent-600: #5f8f2c;
  --color-accent-700: #4a7222;  /* ссылка — читаемо на креме */
  --color-accent-800: #38571a;
  --color-accent-900: #2a4116;  /* лес, совпадает с начертанием слова */

  /* secondary = свежий голубой */
  --color-accent-2: #1f9ec4;
  --color-accent-2-100: #e3f4fa;
  --color-accent-2-200: #bfe7f3;
  --color-accent-2-300: #8ed4e9;
  --color-accent-2-400: #54bce0;
  --color-accent-2-500: #22a3cf;
  --color-accent-2-600: #1487b1;
  --color-accent-2-700: #106a8c;  /* спот — читаемо на креме */
  --color-accent-2-800: #0d4f68;
  --color-accent-2-900: #0b3646;

  /* тёплый спот только для звёзд рейтинга */
  --color-process-yellow: #e08a2b;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; -webkit-font-smoothing: antialiased;
  font-feature-settings: "onum" 1, "kern" 1; position: relative;
  /* Жёсткий стоп горизонтального переполнения: что бы ни попыталось вылезти вбок,
     страница НЕ прокручивается по горизонтали и layout-viewport не раздувается
     (иначе ломались бы @media-брейкпоинты). clip (в отличие от hidden) не создаёт
     скролл-контейнер — sticky-шапка продолжает работать. */
  overflow-x: clip; }

/* ── Фон: амбиентные блобы + зерно (на каждой странице, позади контента) ──── */
/* Мягкие радиальные градиентные «пятна» бренд-цветов + едва заметное зерно.
   Статичны (анимация отключена ради производительности — см. ниже). */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--sn-blobs); opacity: .42; filter: blur(26px); }
/* Амбиентный параллакс. Когда JS его включает (initAmbientParallax), он добавляет
   слой .sn-ambient и двигает его ВНУТРЕННИЙ элемент .sn-ambient > i (а статичный
   дубль body::before прячется). Сам .sn-ambient — СТРОГО размером во вьюпорт с
   overflow:hidden: fixed-слой шире экрана ломал вёрстку на мобильных (iOS Safari
   расширял layout-viewport, контент уезжал вбок). Увеличенный внутренний слой
   свободно смещается параллаксом, а рамка его обрезает — за экран ничего не вылезает. */
.sn-ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.sn-ambient > i { position: absolute; inset: -15%; display: block;
  background: var(--sn-blobs); opacity: .42; filter: blur(26px); transition: transform .3s ease-out; }
html.js-ambient body::before { display: none; }
  /* Анимация фоновых блобов ОТКЛЮЧЕНА: непрерывная перерисовка размытого слоя
     во весь экран тяжела для слабых GPU. Блобы остаются статичными. */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--edge); position: relative; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-inline: var(--edge); position: relative; }
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; }  /* табличные цифры */
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-md); }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s ease; }
a:hover { color: var(--spot); }

/* Градиентные primary-кнопки + форма «таблетки». :active чуть притемняет. */
.btn { border-radius: var(--r-pill); transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn-primary { background: var(--grad); color: #fff; border: 0;
  text-shadow: 0 1px 2px color-mix(in srgb, #000 36%, transparent);   /* тёмный ореол — белый текст читаем и в движении (magnetic) */
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-accent-2) 24%, transparent); }
/* Ховер НЕ осветляет градиент (раньше brightness «выцвечивал» белый текст) —
   вместо этого усиливаем насыщенность и тень: контраст текста сохраняется. */
.btn-primary:hover { filter: saturate(1.14); background: var(--grad); transform: translateY(-1px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-accent-2) 36%, transparent); }
.btn-primary:active { filter: saturate(1.02); transform: translateY(0); }
/* Вторичная кнопка: на ховере заметная, но КОНТРАСТНАЯ заливка — текст не теряется
   (базовый слой давал едва заметный оттенок, из-за чего подпись «плавала»). */
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
  color: var(--ink); border-color: color-mix(in srgb, var(--color-text) 34%, transparent); }
.btn-onlight:hover { color: var(--color-bg); }   /* фиксируем читаемый цвет подписи на инверсной кнопке */

/* ══ Кастомные keyframes ════════════════════════════════════════════════════
   Набор переиспользуемых анимаций. Классы-хуки ниже (.reveal, .to-top …) и
   main.js навешивают их на элементы. Все обёрнуты в prefers-reduced-motion. */

/* Появление снизу вверх с растворением — основа scroll-reveal */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* Медленный дрейф фоновых блобов */
@keyframes blobDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1.5%, 1%, 0) scale(1.02); }
}
/* Лёгкое вертикальное «парение» (декоративные элементы) */
@keyframes floatY { from { transform: translateY(0); } to { transform: translateY(-8px); } }
/* Бегущий блик по градиенту (например, номер секции при ховере) */
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
/* Пульсирующее кольцо (кнопка play на видео) */
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Вращение спиннера (кнопки форм в состоянии загрузки) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ Scroll-reveal ══════════════════════════════════════════════════════════
   main.js добавляет класс .reveal элементам, а при попадании во вьюпорт —
   .is-visible (через IntersectionObserver). До появления элемент скрыт и
   смещён; .is-visible анимирует его к нормальному положению. Переменная
   --reveal-delay задаёт «шахматную» задержку внутри группы (карточки в сетке). */
.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms); }
/* will-change сознательно НЕ задаём в состоянии покоя: иначе каждый показанный
   блок навсегда держал бы промотированный слой композитинга (лишний расход GPU
   на длинных сетках). Трансформа/opacity анимируются и без него. */
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Ритм секций ─────────────────────────────────────────────────────────── */
.section { padding-block: clamp(46px, 6vw, 100px); }
.section-tight { padding-block: clamp(26px, 4vw, 44px); }
.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: var(--space-4); margin-bottom: clamp(28px, 4vw, 48px); padding-top: 22px;
  border-top: 2px solid var(--rule); }
/* Номер/подпись секции из data-num — градиентный текст */
.section-head::before { content: attr(data-num); grid-column: 1 / -1;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: .12em;
  margin-bottom: 10px; font-feature-settings: "tnum" 1;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text;
  color: transparent; width: fit-content; }
.section-head:not([data-num])::before { content: none; }
.kicker { display: block; font-family: var(--font-heading); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--spot); margin-bottom: var(--space-2); }
.kicker::before { content: ""; display: inline-block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--grad-soft); vertical-align: middle; margin-right: 11px; transform: translateY(-3px); }
.section-title { font-size: clamp(30px, 4vw, 54px); line-height: 1.02; letter-spacing: -0.028em; margin: 0; }
.section-title em { font-style: italic;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-sub { font-size: 17px; line-height: 1.6; max-width: 54ch; margin: var(--space-3) 0 0; color: var(--muted); }
/* Ссылка «Смотреть все →» — стрелка уезжает вправо при ховере */
.see-all { font-size: 13px; font-family: var(--font-heading); white-space: nowrap; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--hair); color: var(--ink); transition: all .2s; }
.see-all:hover { border-color: transparent; background: var(--ink); color: var(--color-bg); }
.see-all::after { content: "→"; transition: transform .2s ease; }
.see-all:hover::after { transform: translateX(3px); }

.rule-tt { border: 0; height: 4px; margin: 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rule-hair { border: 0; height: 1px; background: var(--hair); margin: 0; }
/* Буквица — крупная градиентная первая буква абзаца */
.dropcap::first-letter { font-family: var(--font-heading); font-weight: 600; float: left;
  font-size: 4.4em; line-height: .78; padding: 6px 12px 0 0;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Шапка / навигация (стекло) ──────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow .25s ease, background .25s ease; }
/* Состояние при прокрутке (навешивает main.js): усиливаем тень и подложку */
.site-header.is-scrolled { box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--color-bg) 95%, transparent); }
.topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: 8px; border-bottom: 1px solid var(--hair); font-family: var(--font-heading);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-feature-settings: "tnum" 1; }
.topline .dateline { display: flex; gap: 20px; flex-wrap: wrap; }
.masthead { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-logo { height: 56px; width: auto; display: block; transition: transform .3s ease; }
.brand:hover .brand-logo { transform: scale(1.03); }
@media (max-width: 560px) { .brand-logo { height: 46px; } }
.brand-mark { font-family: var(--font-heading); font-weight: 600; font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.035em; line-height: 1; }
.brand-mark em { font-style: italic;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-tag { font-family: var(--font-heading); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); align-self: center; }
.utility { display: flex; align-items: center; gap: var(--space-3); }
.lang { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-pill); overflow: hidden;
  font-family: var(--font-heading); font-size: 12px; }
.lang a { padding: 5px 11px; color: var(--faint); text-decoration: none; transition: background .18s, color .18s; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--color-bg); }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--hair);
  border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer; transition: all .18s; }
.icon-btn:hover { border-color: transparent; background: var(--ink); color: var(--color-bg); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

.mainnav { border-top: 1px solid var(--hair); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 40px); flex-wrap: wrap; }
.menu > li { position: relative; }
.menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 15px 0;
  font-family: var(--font-heading); font-size: 16px; color: var(--ink); text-decoration: none;
  letter-spacing: -0.01em; position: relative; transition: color .18s; }
/* Подчёркивание, «выезжающее» слева направо при ховере/активности */
.menu > li > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 2px;
  border-radius: 2px; background: var(--grad-soft); transition: right .25s ease; }
.menu > li:hover > a::after, .menu > li > a[aria-current="page"]::after { right: 0; }
.menu > li:hover > a { color: var(--link); }
.caret { width: 12px; height: 12px; opacity: .45; transition: transform .2s ease; }
.menu > li:hover .caret { transform: rotate(180deg); }

/* Мега-меню (десктоп) — стеклянная панель, разворачивается при ховере/фокусе */
.mega { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 640px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg);
  padding: var(--space-6); display: none; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-6); }
/* Невидимый «мост» через 6px-зазор между пунктом меню и панелью: панель —
   потомок <li>, поэтому наведение на мост сохраняет :hover у <li>, и меню не
   схлопывается, пока курсор идёт к панели (иначе была бы «мёртвая зона»). */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.menu > li:hover .mega, .menu > li:focus-within .mega { display: grid; animation: fadeUp .22s ease both; }
.mega-col h4 { font-family: var(--font-heading); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--spot); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega-col a { font-size: 16px; color: var(--ink); text-decoration: none; transition: color .16s, padding-left .16s; }
.mega-col a:hover { color: var(--link); padding-left: 4px; }
.mega-wide { min-width: 840px; }

/* На десктопе бургер скрыт; на планшете/мобиле прячем меню, показываем бургер */
.burger { display: none; }
@media (max-width: 920px) { .menu { display: none; } .burger { display: inline-grid; } }

/* ── Мобильное меню (drawer) ─────────────────────────────────────────────────
   Выезжающая справа панель со всей навигацией. Внутренние разделы (мега-меню)
   превращаются в аккордеоны <details>. Управляется site-chrome.js (открытие/
   закрытие, блокировка прокрутки body, Esc, клик по фону). */
.nav-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.nav-drawer.is-open { display: block; }
.nav-drawer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #0d0e08 46%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(400px, 88vw);
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-brd); box-shadow: var(--shadow-lg);
  padding: 20px 22px 40px; overflow-y: auto; transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.nav-drawer.is-open .nav-drawer__panel { transform: none; }
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.nav-drawer__top .brand-logo { height: 44px; }
.nav-drawer nav ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer > .nav-drawer__panel nav > ul > li { border-bottom: 1px solid var(--hair); }
.nav-drawer a { display: block; text-decoration: none; color: var(--ink);
  font-family: var(--font-heading); font-size: 19px; padding: 13px 2px; transition: color .16s, padding-left .16s; }
.nav-drawer a:hover { color: var(--link); padding-left: 6px; }
/* Аккордеон подкатегорий внутри drawer */
.nav-drawer details > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; font-family: var(--font-heading); font-size: 19px; padding: 13px 2px; }
.nav-drawer details > summary::-webkit-details-marker { display: none; }
.nav-drawer details > summary::after { content: "+"; font-size: 22px; color: var(--link); transition: transform .2s; }
.nav-drawer details[open] > summary::after { content: "–"; }
.nav-drawer details ul { padding: 0 0 10px 12px; }
.nav-drawer details h4 { font-family: var(--font-heading); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--spot); margin: 12px 0 2px; }
.nav-drawer details a { font-size: 16px; padding: 8px 2px; }
/* Бургер в «крестик» при открытом меню */
.burger.is-active svg { transform: rotate(90deg); }
.burger svg { transition: transform .25s ease; }

/* ── Hero «обложка журнала» (блобы + стекло) ─────────────────────────────── */
.cover { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 72px); align-items: center; padding-block: clamp(32px, 4vw, 72px); }
.cover-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 22px; padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); font-feature-settings: "tnum" 1; }
.cover-kicker .star { color: var(--color-process-yellow); }
.cover h1 { font-size: clamp(46px, 7.4vw, 108px); line-height: 0.92; letter-spacing: -0.04em; margin: 0 0 26px; }
.cover h1 em { font-style: italic;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 28px; }
.cover-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.cover-figure { position: relative; }
/* Мягкое цветное свечение-«капля» позади фото обложки (псевдоэлемент) */
.cover-figure::before { content: ""; position: absolute; inset: -14% -10% -10% -12%; z-index: -1;
  background: var(--grad-soft); opacity: .5; filter: blur(46px);
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; }
.cover-figure .frame { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); }
.cover-figure .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cover-figure:hover .frame img { transform: scale(1.04); }
.cover-figure .tag-float { position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); color: var(--ink); font-family: var(--font-heading); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 15px; border-radius: var(--r-pill); }
.cover-figure figcaption { font-style: italic; font-size: 13px; color: var(--faint); margin-top: 12px; padding-left: 4px; }

/* Рейка-«дата-строка» со статистикой (стекло) */
.railwrap { padding-block: 0 clamp(20px, 3vw, 36px); }
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: 20px;
  border-radius: var(--radius-lg); background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); }
.rail .cell { padding: 4px 12px; border-left: 1px solid var(--hair); }
.rail .cell:first-child { border-left: 0; }
.rail .n { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.02em;
  line-height: 1; font-feature-settings: "tnum" 1; }
.rail .n.spot { background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail .l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 9px; }

.btn-lg { font-size: 15px; padding: 13px 28px; letter-spacing: .01em; }
.btn-onlight { background: var(--ink); color: var(--color-bg); border: 0; }
.btn-onlight:hover { background: var(--color-neutral-800); }
.link-arrow { font-family: var(--font-heading); font-size: 15px; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; }
.link-arrow::after { content: "→"; color: var(--link); transition: transform .2s; }
.link-arrow:hover { color: var(--link); } .link-arrow:hover::after { transform: translateX(3px); }

/* ── Чипы ────────────────────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-heading);
  font-size: 14px; color: var(--ink); padding: 9px 17px; border-radius: var(--r-pill);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); transition: all .18s ease; }
.chip:hover { border-color: transparent; background: var(--grad); color: #fff; transform: translateY(-2px); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-2-500); }
.chip:hover .dot { background: #fff; }

/* ── Плитки категорий (нумерованные, стеклянная подпись) ─────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-4); }
.tile { position: relative; display: block; text-decoration: none; color: var(--ink); }
.tile .ph { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tile:hover .ph img { transform: scale(1.07); }
.tile .num { position: absolute; top: 12px; left: 12px; z-index: 2; color: var(--ink);
  font-family: var(--font-heading); font-size: 13px; letter-spacing: .04em; font-feature-settings: "tnum" 1;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); padding: 4px 10px; border-radius: var(--r-pill); }
.tile .cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 4px 0; }
.tile .t { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
.tile:hover .t { color: var(--link); }
.tile .c { font-size: 13px; color: var(--faint); white-space: nowrap; font-feature-settings: "tnum" 1; }

/* ── Карточки рецептов ───────────────────────────────────────────────────── */
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 52px) var(--space-6); }
.recipe-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Элементы сеток должны уметь сжиматься ниже своего min-content: иначе длинные
   слова/картинки в карточках распирали бы 1fr-дорожки и всю сетку вправо
   (горизонтальное переполнение на узких экранах). */
.recipe-grid > *, .tile-grid > *, .blog-grid > *, .plan-grid > *, .shop-grid > *, .cta-grid > * { min-width: 0; }
.rcard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.rcard-media { position: relative; aspect-ratio: 5/4; overflow: hidden; margin-bottom: var(--space-3);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.rcard:hover .rcard-media img { transform: scale(1.06); }
.rcard-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-heading);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); color: var(--ink); }
.rcard-eyebrow { font-family: var(--font-heading); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spot); margin-bottom: 7px; }
.rcard-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 12px; }
.rcard:hover .rcard-title { color: var(--link); }
.rcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px;
  color: var(--faint); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font-feature-settings: "tnum" 1; }
.rcard-meta .m { display: inline-flex; align-items: center; gap: 6px; }
.rcard-meta svg { width: 15px; height: 15px; opacity: .65; }
.rating { color: var(--color-process-yellow); letter-spacing: 1px; }

/* ── Фича (крупный + список) ─────────────────────────────────────────────── */
.feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.feature-list { display: grid; gap: 0; }
.mini { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); text-decoration: none;
  color: var(--ink); align-items: center; padding: 18px 0; border-top: 1px solid var(--hair); }
.mini:first-child { border-top: 0; padding-top: 0; }
.mini img { width: 112px; height: 84px; object-fit: cover; border-radius: var(--radius-md); transition: transform .4s ease; }
.mini:hover img { transform: scale(1.05); }
.mini .t { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; }
.mini:hover .t { color: var(--link); }
.mini .m { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }

/* ── Карточки книг / товаров ─────────────────────────────────────────────── */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8) var(--space-6); }
.book { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.book-cover { aspect-ratio: 3/4; overflow: hidden; margin-bottom: var(--space-3); background: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: box-shadow .25s, transform .25s; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book:hover .book-cover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.book .t { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.16; letter-spacing: -0.01em; }
.book:hover .t { color: var(--link); }
.book .a { font-size: 13px; font-style: italic; color: var(--muted); margin-top: 4px; }
.book .price { font-family: var(--font-heading); font-size: 16px; margin-top: 8px; font-feature-settings: "tnum" 1; }
.product .book-cover { aspect-ratio: 1/1; }

/* ── Карточки meal-планов (стеклянная панель) ────────────────────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,3vw,44px) var(--space-6); }
.plan { position: relative; text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-media { aspect-ratio: 16/11; overflow: hidden; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.plan:hover .plan-media img { transform: scale(1.05); }
.plan-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan .len { font-family: var(--font-heading); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--spot); }
.plan .t { font-family: var(--font-heading); font-weight: 600; font-size: 23px; line-height: 1.06; letter-spacing: -0.02em; }
.plan:hover .t { color: var(--link); }
.plan .d { font-size: 14px; line-height: 1.5; color: var(--muted); }
.plan .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint); padding-top: 12px; border-top: 1px solid var(--hair); }

/* ── Карточки блога / статей ─────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 52px) var(--space-6); }
.acard { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.acard-media { aspect-ratio: 3/2; overflow: hidden; margin-bottom: var(--space-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.acard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.acard:hover .acard-media img { transform: scale(1.05); }
.acard .cat { font-family: var(--font-heading); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spot); margin-bottom: 8px; }
.acard .t { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
.acard:hover .t { color: var(--link); }
.acard .by { font-size: 13px; font-style: italic; color: var(--faint); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair); }

/* ── CTA-карточки (стекло, градиентный номер) ────────────────────────────── */
.cta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cta { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
  padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd);
  transition: transform .22s, box-shadow .22s; }
.cta:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cta .cn { font-family: var(--font-heading); font-size: 26px; letter-spacing: -.02em; font-feature-settings: "tnum" 1;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta .t { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.cta .d { font-size: 13px; line-height: 1.5; color: var(--muted); }
.cta .go { margin-top: auto; font-family: var(--font-heading); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--link); }
.cta .go::after { content: " →"; transition: all .2s; }
.cta:hover .go::after { margin-left: 4px; }

/* ── Тёмный фиче-блок (акцентный «момент 2026») ──────────────────────────── */
.band { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #171311; color: #fff;
  padding: clamp(36px, 5vw, 72px); }
.band::before { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(30vw 30vw at 15% 10%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 60%),
    radial-gradient(30vw 30vw at 90% 90%, color-mix(in srgb, var(--color-accent-2) 75%, transparent), transparent 60%);
  opacity: .55; filter: blur(30px); animation: blobDrift 22s ease-in-out infinite alternate; }
.band > * { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band .glasscard { background: color-mix(in srgb, #ffffff 12%, transparent); border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radius-lg); padding: var(--space-4); }
.band .input { background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 26%, transparent); color: #fff; }
.band .input::placeholder { color: color-mix(in srgb, #fff 60%, transparent); }
/* Двухколоночная раскладка баннера-подписки (текст | карточка-форма). min-width:0 —
   чтобы колонки могли ужиматься и не распирали контейнер вправо; на узких экранах
   складываем в одну колонку (иначе форма вылезала за экран → горизонтальная прокрутка). */
.band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.band-grid > * { min-width: 0; }
@media (max-width: 720px) { .band-grid { grid-template-columns: 1fr; } }

/* ── Страница «О нас»: многоколоночные блоки складываются на мобильных ──────────
   Раньше сетки были заданы инлайн без media-query и на телефоне распирали экран. */
.about-founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-story { columns: 2; column-gap: 48px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.about-founder > *, .about-stats > *, .about-values > * { min-width: 0; }
@media (max-width: 820px) {
  .about-founder { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-story { columns: 1; }
}

/* Форс-перерисовка при переключении темы. theme.js на пару кадров вешает
   .theme-switching на <html>, чтобы сбросить залипшие слои backdrop-filter
   (iOS Safari не обновлял шапку/стекло при смене темы — цвета оставались от
   прежней темы). На эти ~2 кадра стекло просто без блюра — почти незаметно,
   зато после переключения тема применяется корректно без перезагрузки. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */
.crumbs { font-family: var(--font-heading); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.crumbs .sep { opacity: .5; }

/* ── Футер ───────────────────────────────────────────────────────────────── */
.site-footer { position: relative; border-top: 1px solid var(--hair); margin-top: clamp(44px, 6vw, 100px);
  padding-block: clamp(44px, 5vw, 72px); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: var(--space-6) var(--space-4); }
.footer-grid h5 { font-family: var(--font-heading); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--space-3); padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { font-size: 15px; color: var(--ink); text-decoration: none; transition: color .16s, padding-left .16s; }
.footer-grid a:hover { color: var(--link); padding-left: 3px; }
.footer-brand .brand-mark { font-size: 34px; }
.footer-brand p { font-size: 15px; line-height: 1.6; max-width: 36ch; margin: var(--space-3) 0 var(--space-4); color: var(--muted); }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--hair); font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }

/* ── Заголовок страницы (внутренние страницы) ────────────────────────────── */
.page-head { padding-block: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.page-title { font-size: clamp(42px, 6.5vw, 88px); line-height: 0.96; letter-spacing: -0.038em; margin: var(--space-3) 0 0; }
.page-title em { font-style: italic; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-lede { font-size: 19px; line-height: 1.55; max-width: 58ch; margin: var(--space-4) 0 0; color: var(--muted); }

/* ── Утилиты ─────────────────────────────────────────────────────────────── */
.stack-sm { display: grid; gap: var(--space-2); }
.divider { height: 1px; background: var(--hair); border: 0; margin: 0; }
.pill-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill-tab { font-family: var(--font-heading); font-size: 14px; padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur); color: var(--ink); text-decoration: none; cursor: pointer; transition: all .18s; }
/* Активная вкладка. Поддерживаем 3 корректных ARIA-состояния: aria-selected
   (устаревшая разметка), aria-pressed (кнопки-фильтры) и aria-current (якорные
   вкладки marketplace) — см. initPillTabs()/initAnchorTabs() в main.js. */
.pill-tab[aria-selected="true"], .pill-tab[aria-pressed="true"], .pill-tab[aria-current="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.pill-tab:not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-current="true"]):hover { border-color: var(--ink); }

/* ══ Состояния форм ══════════════════════════════════════════════════════════
   Классы, которые навешивает feedback.js: подсветка ошибок, блок-уведомление,
   спиннер на кнопке отправки. */
.input.is-invalid { border-color: var(--color-accent-2-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-2-600) 18%, transparent); }
.field-error { color: var(--color-accent-2-700); font-size: 12.5px; margin-top: 6px; display: none; }
.field-error.is-shown { display: block; animation: fadeUp .3s ease both; }
.form-note { border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; margin-top: 16px;
  display: none; animation: fadeUp .35s ease both; }
.form-note.is-shown { display: block; }
.form-note.is-success { background: var(--color-accent-100); color: var(--color-accent-900);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); }
.form-note.is-error { background: var(--color-accent-2-100); color: var(--color-accent-2-900);
  border: 1px solid color-mix(in srgb, var(--color-accent-2) 30%, transparent); }
/* Спиннер: у кнопки во время отправки добавляется .is-loading */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 55%, transparent); border-top-color: #fff;
  animation: spin .7s linear infinite; }

/* ══ Кнопка «наверх» ═════════════════════════════════════════════════════════
   Появляется после прокрутки (main.js добавляет .is-shown). */
.to-top { position: fixed; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 45;
  width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill); background: var(--glass-bg); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .18s, color .18s; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--color-bg); }
.to-top svg { width: 20px; height: 20px; }

/* ══ Скип-линк (доступность) ═════════════════════════════════════════════════
   Скрыт до фокуса; по Tab первым делом появляется «Перейти к содержимому». */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-160%);
  background: var(--ink); color: var(--color-bg); padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--font-heading); font-size: 14px; text-decoration: none; transition: transform .2s ease; }
.skip-link:focus-visible { transform: none; color: var(--color-bg); }

/* Кнопка play на видео — пульсирующее кольцо */
.video .play span { animation: pulseRing 2.6s ease-out infinite; }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .tile-grid, .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .recipe-grid, .recipe-grid.cols-4, .blog-grid, .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .feature { grid-template-columns: 1fr; }
  .cover { grid-template-columns: 1fr; }
  .cover-figure { order: -1; max-width: 480px; }
}
@media (max-width: 720px) {
  .tile-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid, .recipe-grid.cols-4, .blog-grid, .plan-grid, .cta-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rail { grid-template-columns: 1fr 1fr; gap: var(--space-4) 0; }
  .rail .cell:nth-child(3) { border-left: 0; }
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tile-grid, .shop-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .utility .lang { display: none; }
  .topline .dateline span:nth-child(n+3) { display: none; }
}

/* ══ Уважение к prefers-reduced-motion ═══════════════════════════════════════
   Полностью отключаем декоративное движение для пользователей, которые
   попросили меньше анимаций (доступность / вестибулярные нарушения). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ══ Печатные стили (кнопка «Print Recipe» на странице рецепта) ══════════════
   Убираем «хром», фон и декор — на бумагу идёт только контент рецепта. */
@media print {
  body::before, body::after { display: none !important; }
  .site-header, .site-footer, .nav-drawer, .to-top, .skip-link,
  .actions, .serv-adjust, .video, .band, .see-all, .pill-tabs { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  .wrap, .wrap-narrow { max-width: 100%; }
  .ing-panel, .plan, .cta, .chip, .glass { background: #fff !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid #ccc; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ══ МИКРО-ИНТЕРАКЦИИ (поведение — в main.js: initMagnetic / initTactile /
   initTiltCards / initAmbientParallax) ═══════════════════════════════════════
   «Оживление» интерфейса одинаково на ПК и на тач-устройствах. Здесь только
   оформление; вся логика и защита по типу указателя — в JS. Всё глушится при
   prefers-reduced-motion (блок в самом низу секции). */

/* Ripple-волна от точки касания/клика. main.js вставляет <span class="ripple">
   в точку указателя. isolation:isolate + z-index:-1 держат волну НАД фоном
   кнопки, но ПОД её подписью (текст остаётся читаемым). box-shadow-свечение
   overflow'ом не обрезается. */
.btn, .icon-btn, .burger { position: relative; }
.btn, .icon-btn, .burger, .to-top { overflow: hidden; isolation: isolate; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, color-mix(in srgb, currentColor 40%, transparent), transparent 70%); }
.ripple.is-animating { animation: rippleOut .55s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rippleOut {
  from { transform: translate(-50%, -50%) scale(0); opacity: .6; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Наклон карточек к указателю/пальцу — transform задаёт main.js инлайн; здесь
   лишь will-change на время взаимодействия и «приближение» картинки при касании
   (на ПК её увеличивает :hover, а на тач-устройствах ховера нет — заменяем классом). */
.is-tilting { will-change: transform; }
.rcard.is-touch-active .rcard-media img,
.tile.is-touch-active .ph img { transform: scale(1.06); }

/* Тактильный отклик на тач-устройствах: нажатие слегка «вдавливает» кнопку. */
@media (hover: none) {
  .btn:active, .icon-btn:active, .burger:active { transform: scale(.95); }
}

/* «Меньше движения» — выключаем ripple (параллакс-слой .sn-ambient при reduced-motion
   вообще не создаётся: см. ранний выход в initAmbientParallax). */
@media (prefers-reduced-motion: reduce) {
  .ripple { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА
   ══════════════════════════════════════════════════════════════════════════
   Включается атрибутом <html data-theme="dark"> (ставит theme.js / инлайновый
   скрип в <head>). Весь сайт читает цвета из переменных, поэтому достаточно
   переопределить токены — компоненты перекрашиваются сами. Ниже:
     1) ядро (фон/поверхность/текст/разделители);
     2) РЕВЕРС светлых/тёмных ступеней рамп: 100–300 становятся тёмными
        подложками, 700–900 — светлыми (для текста/ссылок на тёмном);
     3) стекло, тени, нейтральные;
     4) точечные правки отдельных компонентов.
   Базовые --color-accent/--color-accent-2 (средней яркости) НЕ трогаем —
   они одинаково читаемы как градиентный текст на светлом и тёмном.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* 1) ядро */
  --color-bg: #15160f;        /* глубокий тёплый почти-чёрный */
  --color-surface: #1f2018;   /* приподнятая поверхность */
  --color-text: #ece7d8;      /* тёплый почти-белый */
  --color-divider: color-mix(in srgb, #ece7d8 16%, transparent);

  /* 2) реверс зелёной рампы */
  --color-accent-100: #24331b; --color-accent-200: #2f4522; --color-accent-300: #3c5a2b;
  --color-accent-700: #a7cf6f; --color-accent-800: #c0dd93; --color-accent-900: #d6e9b3;
  /* реверс голубой рампы */
  --color-accent-2-100: #10323f; --color-accent-2-200: #164658; --color-accent-2-300: #1d5c73;
  --color-accent-2-700: #7fd0e8; --color-accent-2-800: #a6e0f0; --color-accent-2-900: #c8ecf6;

  /* ссылки/споты — светлые ступени (через реверс выше resolve'ятся сами, но задаём явно) */
  --link: var(--color-accent-700);
  --spot: var(--color-accent-2-700);

  /* 3) стекло в тёмной теме — ПЛОТНЫЙ тёмный тон (а НЕ светлая еле заметная
     плёнка): панели мега-меню, карточек и чипов должны оставаться читаемыми, а
     не просвечивать контент за собой. Едва заметная прозрачность (~4%) +
     backdrop-blur сохраняют «морозный» стеклянный эффект, но текст читается. */
  --glass-bg: color-mix(in srgb, #23241a 96%, transparent);
  --glass-brd: color-mix(in srgb, #ffffff 16%, transparent);

  /* тени — глубокий чёрный (тонкие ink-тени базы на тёмном не видны) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);

  /* нейтральные: тёмные подложки, светлые тексты, средний серый для пустых звёзд */
  --color-neutral-100: #232419; --color-neutral-200: #2c2d22; --color-neutral-300: #5c5d50;
  --color-neutral-800: #d8d6c8; --color-neutral-900: #ece7d8;
}

/* Плавный переход цветов при смене темы (кроме тех, кто уже анимируется) */
:root[data-theme] body,
:root[data-theme] .site-header,
:root[data-theme] .glass,
:root[data-theme] .rcard-media,
:root[data-theme] .book-cover { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

/* 4) Точечные правки компонентов в тёмной теме ---------------------------- */

/* Амбиентные блобы приглушаем — на тёмном они светятся сильнее */
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] .sn-ambient > i { opacity: .28; }
:root[data-theme="dark"] body::after { mix-blend-mode: soft-light; opacity: .06; }

/* Тёмный newsletter-блок и без того тёмный — добавим тонкую рамку, чтобы он
   не сливался с тёмным фоном страницы */
:root[data-theme="dark"] .band { border: 1px solid color-mix(in srgb, #ffffff 10%, transparent); }

/* Теги на странице рецепта: подложка — тёмный тинт, текст — светлый */
:root[data-theme="dark"] .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
:root[data-theme="dark"] .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
:root[data-theme="dark"] .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
:root[data-theme="dark"] .tag-outline { border-color: var(--color-accent-700); color: var(--color-accent-700); }

/* Подсветка поиска: тёмный текст на оранжевом маркере остаётся читаемым */
:root[data-theme="dark"] mark { color: #1a1305; }

/* Обложки книг/товаров: чуть светлее фона, чтобы карточка читалась */
:root[data-theme="dark"] .book-cover { background: var(--color-surface); }

/* Инпуты: явная поверхность + светлый плейсхолдер */
:root[data-theme="dark"] .input { background: color-mix(in srgb, #ffffff 5%, transparent); }

/* Скролл-бар в тёмной теме (webkit) */
:root[data-theme="dark"] { color-scheme: dark; }

/* ══════════════════════════════════════════════════════════════════════════
   ПРОИЗВОДИТЕЛЬНОСТЬ
   ══════════════════════════════════════════════════════════════════════════
   content-visibility: auto — браузер НЕ рендерит сетку карточек, пока она вне
   экрана (существенно ускоряет первую отрисовку и прокрутку длинных страниц,
   особенно на слабых устройствах). contain-intrinsic-size резервирует высоту,
   чтобы не было скачков скролла; ключевое слово auto запоминает реальный размер
   после первого показа. IntersectionObserver (scroll-reveal) продолжает работать. */
.recipe-grid, .tile-grid, .shop-grid, .blog-grid, .plan-grid, .cta-grid, .feature-list {
  content-visibility: auto;
  /* Резервируем ТОЛЬКО высоту (против скачков скролла). Ширину НЕ фиксируем:
     contain-intrinsic-size: auto 600px раньше задавал и ширину 600px, из-за чего
     вне экрана блоки распирало до 600px и на мобильных появлялась горизонтальная
     прокрутка. contain-intrinsic-height оставляет ширину адаптивной. */
  contain-intrinsic-height: auto 600px;
}
/* Футер тоже за пределами экрана почти всегда — пропускаем его рендер (только высота) */
.site-footer { content-visibility: auto; contain-intrinsic-height: auto 480px; }