@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ============================================================
   redesign.css — новая визуальная система сайта, 17.08.2026

   МЕТОД. Всё делается переопределением токенов дизайн-системы.
   Разметка страниц не тронута ни на строку. Откат = убрать одну
   ссылку на этот файл из <head>.

   ГРАНИЦА, КОТОРУЮ НЕЛЬЗЯ ПЕРЕХОДИТЬ. Видеодвижок читает цвета
   из сгенерированного brand.json, а его пиксельный эталон
   заморожен. Поэтому новая палитра живёт ЗДЕСЬ, в токенах сайта,
   и НЕ вносится в BRANDBOOK/brand_spec.json → colors. Иначе
   перегенерация brand.json сломает ворота видеодвижка.
   Решение Aleksandra 17.08: движок не трогаем.

   ШРИФТЫ (решение 17.08)
     Instrument Serif — заголовки. Только для крупного кегля,
       длинных начертаний у него нет.
     IBM Plex Mono   — служебный слой: надзаголовки, подписи,
       навигация, кнопки. Читается как «данные», а не «журнал».
     Inter           — основной текст. Остаётся, потому что
       заголовочная антиква для чтения абзацев не годится.
   ============================================================ */

:root{
  --font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* --font-sans (Inter) наследуется из базовых токенов */

  /* --- ПАЛИТРА ------------------------------------------------
     Монохром. Акцентного цвета нет совсем: выделение делается
     весом, размером и пустотой вокруг, а не краской.            */

  --paper:#FBFBFA;
  --paper-soft:#F2F2F0;
  --near-black:#121110;
  --near-black-hover:#000000;
  --line:#E3E3E0;
  --line-soft:#EDEDEA;
  --muted:#6E6C68;

  --ink:var(--near-black);
  --ink-hover:var(--near-black-hover);
  --canvas:var(--paper);
  --surface-page:var(--paper);
  --surface-card:var(--paper);
  --surface-soft:var(--paper-soft);
  --surface-soft-hover:#E9E9E6;

  --inverse-canvas:var(--near-black);
  --inverse-ink:var(--paper);
  --on-inverse-soft:var(--paper);
  --on-primary:var(--paper);

  /* Цветные блоки-истории убраны: четыре разных прямоугольника
     читались как украшение. Осталась одна нейтральная подложка. */
  --block-cream:var(--paper-soft);
  --block-sage:var(--paper-soft);
  --block-sage-soft:var(--paper-soft);
  --block-taupe:var(--paper-soft);
  --block-taupe-soft:var(--paper-soft);
  --block-blush:var(--paper-soft);
  --block-blush-soft:var(--paper-soft);
  --block-graphite:var(--near-black);
  --block-terracotta:var(--paper-soft);
  --block-terracotta-soft:var(--paper-soft);

  --hairline:var(--line);
  --hairline-soft:var(--line-soft);
  --hairline-inverse:rgba(251,251,250,.24);

  --action-primary:var(--near-black);
  --action-primary-hover:var(--near-black-hover);
  --action-primary-label:var(--paper);
  --action-secondary:var(--paper);
  --action-secondary-hover:var(--paper-soft);
  --accent-cta:var(--near-black);
  --accent-cta-hover:var(--near-black-hover);

  --text-display:var(--ink);
  --text-body:var(--ink);
  --text-caption:var(--muted);
  --text-inverse:var(--paper);
  --text-link:var(--ink);
  --focus-ring:var(--near-black);
  --overlay-scrim:rgba(18,17,16,.6);

  /* --- ВОЗДУХ ------------------------------------------------ */
  --space-section:150px;
  --space-xxl:60px;
  --space-xl:42px;
  --space-lg:28px;
  --content-max:1080px;
  --gutter-desktop:72px;
  --pad-block:60px;
  --pad-card:32px;
  --nav-height:70px;

  /* --- ТИПОГРАФИКА -------------------------------------------
     Instrument Serif — светлая антиква с крупным контрастом.
     Её надо ставить крупно и с плотным трекингом, иначе она
     выглядит вялой. Вес всегда 400: других у неё нет.           */

  --type-display-xl:400 92px/1.0 var(--font-display);
  --type-display-xl-tracking:-1.8px;
  --type-display-xl-mobile:400 46px/1.05 var(--font-display);

  --type-display-lg:400 62px/1.06 var(--font-display);
  --type-display-lg-tracking:-1.2px;

  --type-headline:400 34px/1.22 var(--font-display);
  --type-headline-tracking:-0.5px;

  --type-subhead:400 21px/1.55 var(--font-sans);
  --type-card-title:400 26px/1.25 var(--font-display);

  --type-body-lg:400 18px/1.62 var(--font-sans);
  --type-body:400 16px/1.65 var(--font-sans);
  --type-body-sm:400 14px/1.6 var(--font-sans);

  --type-eyebrow:400 11px/1.3 var(--font-mono);
  --type-eyebrow-tracking:2.4px;
  --type-caption:400 11px/1.3 var(--font-mono);
  --type-caption-tracking:1.6px;

  /* --- ФОРМА -------------------------------------------------- */
  --radius-card:3px;
  --radius-block:3px;
  --radius-hero:3px;
  --radius-button:2px;
  --radius-input:2px;
  --radius-tag:2px;
}

/* ============================================================
   ПОДЛОЖКА — тонкая сетка диагональных линий, медленно плывущая.

   Отдельным слоем под содержимым: только так её можно двигать,
   не таская за собой страницу. Полный цикл больше двух минут —
   это не должно читаться как анимация, только как то, что
   страница живая. Уважает системную настройку «меньше движения».
   ============================================================ */
:root{
  --grid-line:rgba(18,17,16,.05);
  --grid-step:120px;
}
body{background-color:var(--paper)}
body::before{
  content:"";
  position:fixed; inset:-30vmax; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(  62deg, transparent 0 calc(var(--grid-step) - 1px), var(--grid-line) calc(var(--grid-step) - 1px) var(--grid-step)),
    repeating-linear-gradient(-62deg, transparent 0 calc(var(--grid-step) - 1px), var(--grid-line) calc(var(--grid-step) - 1px) var(--grid-step));
  animation:grid-drift 150s linear infinite;
  will-change:transform;
}
@keyframes grid-drift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(var(--grid-step),var(--grid-step),0)}
}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

/* ============================================================
   ПОЛОСЫ — исправление контраста.

   Класс .band.deep задавал тёмный фон через токен --block-taupe
   и белый текст. Токен переведён в светло-серый ради минимализма,
   а цвет текста остался белым — получилось белым по светлому,
   текст пропадал. То же с наложениями у .band.photo: они были
   рассчитаны на тёплую палитру.

   Правило: тёмная полоса — по-настоящему тёмная. Полутонов нет.
   ============================================================ */
/* ВАЖНО: красим только текстовые элементы. Правило `*` красило и надписи
   на кнопках — на тёмной секции белая кнопка получала белый текст, и
   кнопка исчезала. Именно это Aleksandra видела как «не видно кнопку». */
.band.deep{background:var(--near-black) !important}
.band.deep .wrap,
.band.deep h1,.band.deep h2,.band.deep h3,.band.deep h4,
.band.deep p,.band.deep li,.band.deep span:not([class*="btn"]),
.band.deep em,.band.deep strong,.band.deep .script{color:var(--paper) !important}

.band.photo{background:var(--paper-soft)}
.band.photo::after{background:rgba(251,251,250,.62)}
.band.photo.dark::after{background:rgba(18,17,16,.86)}
.band.photo.dark .wrap,
.band.photo.dark h1,.band.photo.dark h2,.band.photo.dark h3,
.band.photo.dark p,.band.photo.dark li,.band.photo.dark .script{color:var(--paper) !important}

/* Кнопки на тёмных секциях: возвращаем им собственные цвета обратно,
   с запасом по специфичности, что бы ни делали правила выше. */
.band.deep button,.band.deep a,.band.deep [data-ds="Button"],
.band.photo.dark button,.band.photo.dark a,.band.photo.dark [data-ds="Button"]{
  color:var(--near-black) !important;
}
.band.deep [data-ds="Button"] *,
.band.photo.dark [data-ds="Button"] *{color:inherit !important}

/* Секции, которые должны читаться как лист поверх бумаги, закрывают сетку. */
.card,.panel,table.plain,.matrix span,.layered__panel{background-color:var(--paper)}

/* Служебный слой моноширинным капслоком. */
.eyebrow,.cap{font-family:var(--font-mono);text-transform:uppercase}

#site-nav a,#site-nav .link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.btn,button,a.btn,.cta,input[type="submit"]{
  font-family:var(--font-mono);
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:12px;
}

summary{font-family:var(--font-sans);font-weight:400}

/* Рукописный шрифт убран. Он не грузился и падал в системный
   курсив, а кроме того противоречит самому направлению. */
.script{
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  letter-spacing:2.4px !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  margin-bottom:var(--space-sm) !important;
}
.script.sm{font-size:11px !important}
.script.on-dark,.script.on-image{color:rgba(251,251,250,.72) !important}

/* ============================================================
   ГЕРОЙ ГЛАВНОЙ — одна схема вместо коллажа из трёх.

   Было: три картинки встык и заголовок белым поверх них, на
   полупрозрачной затемняющей подложке. При светлых схемах текст
   почти пропадал, а три рисунка рядом читались как нагромождение.

   Стало: текст слева, одна схема справа, никаких наложений.
   Заголовок чёрным по бумаге. Каждая схема хороша по отдельности —
   значит показываем по одной.
   ============================================================ */
.hero-single{
  min-height:auto !important;
  grid-template-columns:1.05fr .95fr !important;
  align-items:center;
  gap:var(--space-xxl);
  padding:var(--space-xxl) var(--gutter-desktop);
  max-width:var(--content-max);
  margin:0 auto;
  overflow:visible !important;
}
.hero-single > figure{background:transparent !important;overflow:visible !important}
.hero-single > figure img{object-fit:contain !important;height:auto !important;max-height:520px}
.hero-single .hero-collage__text{
  position:static !important;
  inset:auto !important;
  background:none !important;
  align-items:flex-start !important;
  text-align:left !important;
  padding:0 !important;
}
.hero-single .hero-collage__text .d-xl,
.hero-single .hero-collage__text .lede,
.hero-single .hero-collage__text *:not([data-ds="Button"]):not([data-ds="Button"] *){
  color:var(--ink) !important;
  text-shadow:none !important;
}
.hero-single .hero-collage__text .lede{color:var(--muted) !important}
@media(max-width:900px){
  .hero-single{grid-template-columns:1fr !important;padding:var(--space-xl) var(--gutter-mobile)}
  .hero-single > figure{order:2}
  .hero-single .hero-collage__text{order:1}
}

/* ============================================================
   СПИСОК ТЕМ 101 — формат, который Aleksandra отметила у Co-Star:
   пронумерованные строки в одной рамке, каждая раскрывается.

   Смысл формата: сверху видно всю картину целиком за пять секунд,
   а глубина открывается по требованию. Это лучше и для чтения,
   и для поиска — на странице оказывается весь текст сразу.
   ============================================================ */
.topics{border:1px solid var(--line);background:var(--paper);max-width:920px;margin:0 auto}
.topics details{border:none;border-top:1px solid var(--line)}
.topics details:first-child{border-top:none}

.topics summary{
  display:grid;
  grid-template-columns:56px 1fr 28px;
  align-items:start;
  gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl);
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.topics summary::after{content:"";}
.topics .num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;
  color:var(--muted);padding-top:6px;
}
.topics .t-title{
  font-family:var(--font-display);font-size:24px;line-height:1.2;
  letter-spacing:-0.4px;color:var(--ink);margin:0 0 6px;
}
.topics .t-lede{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--muted);margin:0;max-width:62ch}
.topics .arrow{
  font-family:var(--font-mono);font-size:16px;color:var(--muted);
  justify-self:end;padding-top:6px;transition:transform .18s ease;
}
.topics details[open] .arrow{transform:rotate(90deg)}

/* Наведение и раскрытая строка — инверсия, как у образца. */
.topics summary:hover{background:var(--near-black)}
.topics summary:hover .t-title,
.topics summary:hover .t-lede,
.topics summary:hover .num,
.topics summary:hover .arrow{color:var(--paper)}
.topics details[open] > summary{background:var(--near-black)}
.topics details[open] > summary .t-title,
.topics details[open] > summary .t-lede,
.topics details[open] > summary .num,
.topics details[open] > summary .arrow{color:var(--paper)}

.topics .t-body{
  display:grid;grid-template-columns:1fr .85fr;gap:var(--space-xxl);
  padding:var(--space-xl) var(--space-xl) var(--space-xxl);
  align-items:start;
}
.topics .t-body p{font-family:var(--font-sans);font-size:15px;line-height:1.7;margin:0 0 var(--space-md);max-width:60ch}
.topics .t-body figure{margin:0}
.topics .t-body img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.topics .t-body figcaption{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
@media(max-width:820px){
  .topics summary{grid-template-columns:38px 1fr 20px;padding:var(--space-md) var(--space-lg)}
  .topics .t-body{grid-template-columns:1fr;padding:var(--space-lg)}
  .topics .t-title{font-size:20px}
}

/* ============================================================
   КАРТИНКИ — схемы нельзя кадрировать.

   Вёрстка была написана под фотографии: везде object-fit: cover,
   то есть картинка растягивается и обрезается по краям. Для фото
   это правильно, для схемы — нет: у схемы обрезанный край означает
   потерянную подпись или половину графика. Именно это Aleksandra
   видела как «обрезанная картинка» в шести разных секциях.

   Меняем на contain и убираем принудительную высоту: схема
   показывается целиком и настолько крупно, насколько влезает.
   ============================================================ */
.layered > figure img,
.img-row img,
.device-row img,
.hero-collage > figure img,
.cards img,
.card img,
figure img{
  object-fit:contain !important;
  height:auto !important;
  width:100% !important;
  display:block;
}

/* Four live products: keep the desktop catalogue on one balanced row. */
.cards.cards-four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cards.cards-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards.cards-four{grid-template-columns:1fr}}

/* Five-product catalogue: three cards, then a centered pair. */
.cards.cards-five{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards.cards-five>div>*{grid-column:span 2}
.cards.cards-five>div:nth-child(4)>*{grid-column:2/span 2}
.cards.cards-five>div:nth-child(5)>*{grid-column:4/span 2}
@media(max-width:1100px){
  .cards.cards-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.cards-five>div>*{grid-column:auto}
  .cards.cards-five>div:nth-child(4)>*,.cards.cards-five>div:nth-child(5)>*{grid-column:auto}
}
@media(max-width:620px){.cards.cards-five{grid-template-columns:1fr}}
.layered > figure,
.img-row > *,
.device-row > *{background:transparent !important;overflow:visible !important;aspect-ratio:auto !important}

/* Схемы должны быть крупными — на мелких ничего не разобрать. */
.layered > figure img{max-height:none}
.wrap figure img{max-width:100%}
.g2 figure img{min-height:260px}

/* Круглая вставка — единственное место, где обрезка уместна. */
.accent-round img{object-fit:cover !important;height:100% !important}

/* ============================================================
   ДИСКЛЕЙМЕР — убран из поля зрения, но не удалён.

   Aleksandra: «убери её с глаз моих». Согласна, что серая плашка
   посреди страницы выглядит как ошибка вёрстки. Но удалять текст
   целиком нельзя: обещание «не терапия, никаких предсказаний,
   результат не гарантируется» дано покупателю ДО оплаты, и
   сегодня мы полдня чинили ровно этот класс несоответствий.

   Решение: рамка, фон и иконка убраны, текст остаётся мелкой
   тихой сноской внизу секции. Присутствует — не мешает.
   ============================================================ */
[data-ds="DisclaimerBanner"]{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:var(--space-xl) !important;
  font-family:var(--font-mono) !important;
  font-size:10px !important;
  line-height:1.6 !important;
  letter-spacing:.8px !important;
  color:var(--muted) !important;
  opacity:.7;
  max-width:70ch;
}
[data-ds="DisclaimerBanner"] svg,
[data-ds="DisclaimerBanner"] img{display:none !important}

/* ============================================================
   ГЕРОЙ — схему крупнее. На маленькой ничего не разобрать,
   а колесо карты это главный аргумент товара.
   ============================================================ */
.hero-single{grid-template-columns:1.15fr .85fr !important;gap:var(--space-xl)}
.hero-single > figure img{max-height:none !important;width:100% !important}
.hero-single > figure{margin:0}

/* ============================================================
   ПАРА «ЭКРАН ИЛИ ПЕЧАТЬ» — две страницы рядом читались как
   пустое место. Даём им рамку листа и подпись, чтобы это
   выглядело как разворот, а не как две картинки подряд.
   ============================================================ */
.device-row{gap:var(--space-xl) !important}
.device-row > *{
  border:1px solid var(--line);
  background:var(--paper) !important;
  padding:var(--space-md);
}

/* ============================================================
   НАСТОЯЩАЯ ПРИЧИНА «ОБРЕЗАННЫХ КАРТИНОК»

   Дело было не в object-fit. В блоке .layered панель с текстом
   специально наезжает на изображение отрицательным отступом −12%,
   а сама рамка картинки имеет жёсткую пропорцию 4:3 с обрезкой.
   Для фотографии это приём — наезжающая карточка выглядит живо.
   Для схемы это значит, что треть рисунка просто закрыта.

   Убираем наезд, снимаем пропорцию и обрезку, ставим воздух.
   ============================================================ */
.layered{gap:var(--space-xxl) !important;align-items:center}
.layered > figure{
  aspect-ratio:auto !important;
  overflow:visible !important;
  border-radius:0 !important;
  background:transparent !important;
}
.layered > .layered__panel,
.layered.flip > .layered__panel{
  margin-left:0 !important;
  margin-right:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

/* ============================================================
   РАМКИ УБРАНЫ, ВМЕСТО НИХ ОБЪЁМ

   Aleksandra: «пускай все картинки будут без рамок, как будто
   объёмные». Рамка вокруг схемы читается как рамка для фото —
   лишняя деталь в минималистичной системе. Вместо неё мягкая
   тень: рисунок как будто лежит на бумаге, а не вставлен в багет.
   ============================================================ */
figure img,.cards img,.card img,.topics .t-body img{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  filter:drop-shadow(0 18px 34px rgba(18,17,16,.10)) drop-shadow(0 3px 8px rgba(18,17,16,.05));
}
.topics .t-body figure{padding:0}

/* ============================================================
   КНОПКА В ГЕРОЕ — вторая, настоящая причина.

   Этого правила не должно было остаться: оно красило кнопку в
   color:inherit, а наследовать ей было нечего кроме near-black —
   тот самый обходной путь, которым бага возвращалась после
   исправления wildcard-селектора выше. Кнопку вообще не трогаем:
   её цвет уже верно задан инлайново в самом компоненте
   (--action-primary-label для primary, --ink для secondary).
   ============================================================ */
.hero-single .hero-collage__text h1,
.hero-single .hero-collage__text h2,
.hero-single .hero-collage__text p,
.hero-single .hero-collage__text .script,
.hero-single .hero-collage__text .eyebrow{color:var(--ink) !important;text-shadow:none !important}
.hero-single .hero-collage__text .lede{color:var(--muted) !important}

/* ============================================================
   ДИСКЛЕЙМЕР — компонент рисует свою плашку инлайновыми стилями,
   поэтому внешний селектор по обёртке до неё не доставал.
   Бьём по вложенному узлу.
   ============================================================ */
[data-ds="DisclaimerBanner"],
[data-ds="DisclaimerBanner"] > *{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  font-family:var(--font-mono) !important;
  font-size:10px !important;
  line-height:1.7 !important;
  letter-spacing:.7px !important;
  color:var(--muted) !important;
  opacity:.6;
  max-width:72ch;
  gap:0 !important;
}
[data-ds="DisclaimerBanner"] svg{display:none !important}

/* ============================================================
   КОЛЕСО В ГЕРОЕ — назад к плоской версии.
   Сначала было вращение, не понравилось. Потом статичный наклон
   в перспективе — тоже не то, вернули как было: ровно, крупно,
   тень как у всех остальных схем на сайте, никаких трюков.
   ============================================================ */
.hero-single{grid-template-columns:1.15fr .85fr !important;gap:var(--space-xl)}
.hero-single > figure img{max-height:none !important;width:100% !important}
.hero-single > figure{margin:0}

/* ============================================================
   .panel — та самая «дурацкая рамка».

   Это блок с цветной заливкой, скруглением 40 px и жёсткой
   пропорцией 4:5, внутрь которого картинка вставлена инлайновым
   стилем object-fit: cover. То есть схема обрезается дважды:
   пропорцией и заливкой вокруг. Использовался на страницах
   About и Birth Chart Reading — там, где Aleksandra и увидела
   рамку и обрезку.

   Панель обнуляется полностью: остаётся только рисунок с тенью.
   Инлайновые стили перебиваются !important — иначе не достать.
   ============================================================ */
.panel,.panel.sage,.panel.cream,.panel.blush,.panel.short{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  display:block !important;
  overflow:visible !important;
}
.panel img{
  object-fit:contain !important;
  height:auto !important;
  width:100% !important;
  border-radius:0 !important;
  filter:drop-shadow(0 20px 38px rgba(18,17,16,.11)) drop-shadow(0 3px 8px rgba(18,17,16,.05));
}

.cap,.sm{color:var(--muted)}
.prose a,a.link{text-underline-offset:5px;text-decoration-thickness:1px}

/* ============================================================
   КАРТИНКА BIG THREE — минимум в 2 раза крупнее по прямому
   запросу. Секция находится по img[src*="big-three"], чтобы не
   трогать размер схем в остальных .layered блоках.
   ============================================================ */
.layered:has(img[src*="big-three"]){
  grid-template-columns:1.7fr 1fr !important;
  gap:var(--space-xl) !important;
}
.layered:has(img[src*="big-three"]) > figure img{
  width:100% !important;
  max-width:none !important;
}
@media(max-width:900px){
  .layered:has(img[src*="big-three"]){grid-template-columns:1fr !important}
}
@import url("site/site-shell-v3.css");