/* =====================================================================
   МАРИЯ ЩЕДРИНА — TILDA CUSTOM CSS
   Подключать: Настройки сайта → Ещё → Custom CSS
   -----------------------------------------------------------------------
   Что здесь:
   · CSS-переменные (цвета, типографика, отступы, анимации)
   · Оранжевый акцент #fe634e на ссылки и кнопки
   · Утилитарные классы (.ms-label, .ms-index и др.)
   · Анимации (brush-wipe reveals)

   Чего здесь НЕТ (заменено нативными настройками Тильды):
   · @font-face / @import шрифтов — шрифты загружены через интерфейс
   · Сброс * { margin: 0 } — конфликтует с Тильдой
   · body, h1–h6, a, img — настроены нативно в Стилях сайта
   ===================================================================== */


/* =====================================================================
   1. ЦВЕТА
   ===================================================================== */

:root {
  /* Монохромная шкала: бумага → тушь */
  --paper:        #ffffff;
  --paper-soft:   #f4f3ef;
  --paper-deep:   #ecebe5;

  --ash:          #e3e2dc;
  --mist:         #cbcac4;
  --stone:        #9b9a94;
  --slate:        #5d5c58;
  --char:         #2a2a27;
  --ink:          #111110;
  --sumi:         #000000;

  /* Семантические поверхности */
  --bg:              var(--paper);
  --surface:         var(--paper);
  --surface-soft:    var(--paper-soft);
  --surface-deep:    var(--paper-deep);
  --bg-inverse:      var(--ink);
  --surface-inverse: #161614;

  /* Семантический текст */
  --text-primary:    var(--ink);
  --text-secondary:  var(--slate);
  --text-muted:      var(--stone);
  --text-faint:      var(--mist);
  --text-on-ink:     var(--paper);
  --text-on-ink-dim: #b8b7b1;

  /* Линии */
  --line:          var(--ash);
  --line-strong:   var(--ink);
  --line-mid:      var(--mist);
  --line-on-ink:   rgba(255, 255, 255, 0.18);

  /* Акцент — оранжевый */
  --accent:        #fe634e;
  --accent-press:  #e8452f;   /* чуть темнее для :active / hover */

  /* Выделение текста */
  --select-bg:     var(--ink);
  --select-fg:     var(--paper);

  /* Вуали (для overlays) */
  --veil-ink:      rgba(17, 17, 16, 0.62);
  --veil-paper:    rgba(255, 255, 255, 0.72);
}

::selection {
  background: var(--select-bg);
  color: var(--select-fg);
}


/* =====================================================================
   2. ТИПОГРАФИКА (переменные)
   ===================================================================== */

:root {
  /* Семейства */
  --font-display: "Literata", "Georgia", serif;
  --font-sans:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-sans);

  /* Веса */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-black:    900;

  /* Дисплейная шкала — Bodoni Moda */
  --t-hero: clamp(3.5rem, 9vw, 8.5rem);
  --t-d1:   clamp(2.75rem, 6vw, 5rem);
  --t-d2:   clamp(2rem, 4vw, 3.25rem);
  --t-d3:   clamp(1.5rem, 2.4vw, 2.1rem);

  /* Текстовая шкала — Hanken Grotesk */
  --t-lead:  1.375rem;
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-label: 0.6875rem;

  /* Межстрочные интервалы */
  --lh-tight: 1.02;
  --lh-snug:  1.14;
  --lh-text:  1.62;
  --lh-loose: 1.78;

  /* Трекинг */
  --track-tight:  -0.02em;
  --track-snug:   -0.01em;
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-label:   0.22em;
}


/* =====================================================================
   3. ОТСТУПЫ И СЕТКА
   ===================================================================== */

:root {
  /* Шаг-сетка (4px base) */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Дыхание между секциями */
  --ma-sm: 64px;
  --ma-md: 120px;
  --ma-lg: 180px;
  --ma-xl: 260px;

  /* Лейаут */
  --measure:        66ch;
  --measure-narrow: 46ch;
  --page-max:       1440px;
  --page-wide:      1680px;
  --gutter:         clamp(24px, 5vw, 88px);

  /* Скругления — острые углы как правило */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-pill: 999px;

  /* Толщина линий */
  --border-hair:  1px;
  --border-rule:  2px;
  --border-heavy: 3px;

  /* Тени — бумага плоская, тени почти отсутствуют */
  --shadow-none:  none;
  --shadow-lift:  0 1px 0 rgba(17,17,16,0.06);
  --shadow-float: 0 24px 60px -28px rgba(17,17,16,0.28);
}


/* =====================================================================
   4. АНИМАЦИИ
   ===================================================================== */

:root {
  --ease-brush:  cubic-bezier(0.76, 0, 0.18, 1);
  --ease-ink:    cubic-bezier(0.85, 0, 0.12, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;

  --dur-instant: 90ms;
  --dur-quick:   180ms;
  --dur-base:    320ms;
  --dur-slow:    560ms;
  --dur-wipe:    640ms;
}

@keyframes ms-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes ms-wipe-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes ms-ink-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ms-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.ms-wipe    { animation: ms-wipe-in  var(--dur-wipe) var(--ease-brush) both; }
.ms-wipe-up { animation: ms-wipe-up  var(--dur-wipe) var(--ease-brush) both; }
.ms-ink     { animation: ms-ink-in   var(--dur-base) var(--ease-out)   both; }
.ms-rule    { transform-origin: left center; animation: ms-rule-draw var(--dur-slow) var(--ease-brush) both; }

@media (prefers-reduced-motion: reduce) {
  .ms-wipe, .ms-wipe-up, .ms-ink, .ms-rule {
    animation: none; clip-path: none; opacity: 1; transform: none;
  }
}


/* =====================================================================
   5. АКЦЕНТ — ссылки и кнопки Тильды
   ===================================================================== */

/* Ссылки */
.t-text a,
.t-body a,
.t-redactor a {
  color: var(--accent);
  transition: color var(--dur-quick) var(--ease-brush);
}
.t-text a:hover,
.t-body a:hover,
.t-redactor a:hover {
  color: var(--accent-press);
}

/* Кнопки — чёрные в покое, оранжевые при наведении */
.t-btn {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  border-width: 1px !important;
  color: var(--paper) !important;
  transition: background-color 200ms ease,
              border-color 200ms ease !important;
}
.t-btn:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--paper) !important;
}
.t-btn:active {
  background-color: var(--accent-press) !important;
  border-color: var(--accent-press) !important;
}

/* Кнопки в шапке — «Каталог работ» и подобные */
.t-btn_smp {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
  transition: background-color 200ms ease,
              border-color 200ms ease !important;
}
.t-btn_smp:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--paper) !important;
}


/* =====================================================================
   6. ПРИНУДИТЕЛЬНЫЙ MANROPE — текст, меню, магазин
   -----------------------------------------------------------------------
   Тильда T-Store и навигация не наследуют глобальный шрифт текста,
   поэтому назначаем Manrope явно на все не-заголовочные элементы.
   ===================================================================== */

/* Всё тело страницы — базовый шрифт */
body,
.t-body,
.t-text,
.t-redactor {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}

/* Заголовки — Literata, явно */
h1, h2, h3,
.t-title,
.t-name {
  font-family: "Literata", "Georgia", serif !important;
}

/* Навигация и меню */
.t-menu__link-item,
.t-menusub__link-item,
.t-menusub__list,
.t-menusub__content,
.t1261__list-item a,
.t-name-x_xs,
.t396__elem .tn-atom,
nav a, nav span {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}

/* T-Store: карточки товаров */
.t-store__col,
.t-store__prod-title,
.t-store__prod-price,
.t-store__prod-descr,
.t-store__filter,
.t-store__filter-item,
.t-store__prod-popup-title,
.t-store__prod-popup-descr,
.t-store__prod-popup-price,
.t-store__prod-popup__text,
.t-store__prod-details,
.t-store__cart,
.t-store__cart-item,
.t-store-prod-all-charcs,
.js-store-prod-all-charcs {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}

/* Классы типографики Тильды — именно они несут Literata в описания */
.t-descr,
.t-descr_xxs,
.t-descr_xs,
.t-descr_sm,
.t-descr_md,
.t-descr_lg,
.t-descr_xl,
.t-typography__descr,
.t-typography__text,
.t-text {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}

/* Названия работ в карточке — Literata */
.t-store__prod-title {
  font-family: "Literata", "Georgia", serif !important;
}

/* Кнопки — шрифт тоже Manrope */
.t-btn {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.04em;
}


/* =====================================================================
   7. УТИЛИТАРНЫЕ КЛАССЫ
   ===================================================================== */

/* Верхний регистр, трекинг — для подписей, меток */
.ms-label {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Крупный номер / индекс в Literata */
.ms-index {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-variant-numeric: lining-nums;
  letter-spacing: var(--track-tight);
}

/* Вертикальный текст — для подписей на торце */
.ms-vert {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Горизонтальная линейка */
.ms-rule-line {
  border: 0;
  border-top: var(--border-hair) solid var(--line-strong);
  width: 100%;
}

/* Контейнер с отступами */
.ms-container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ширина чтения */
.ms-measure        { max-width: var(--measure); }
.ms-measure-narrow { max-width: var(--measure-narrow); }