/* Стили справочника. Дополняют landing.css, не переопределяют его.

   Заголовки здесь на две ступени ниже, чем на лендинге: крупная типографика
   хороша для витрины из пяти страниц, а на справочнике шапки в 4rem съедают
   первый экран, и до содержания приходится скроллить. */

.hero-sm { padding: 3rem 0 2rem; }
.hero-sm h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; }
.hero-sm .lede { max-width: 46rem; }

.crumbs {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem 0;
  font-size: .82rem; opacity: .7;
}
.crumbs a { color: inherit; }

/* Сетка страницы: сайдбар — колонка на всю основную часть, а не блок внутри
   секции. Иначе он оказывается в середине страницы и визуально исчезает. */
.layout {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
.side { position: sticky; top: 1.5rem; }
.side summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.side-list { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; }
.side-list li { padding: .18rem 0; }
.side-list li.cur > a { font-weight: 700; text-decoration: none; }
.side-list a { color: inherit; opacity: .85; }
.side-list a:hover { opacity: 1; }

.col { min-width: 0; }
.col section { margin: 0 0 2.5rem; }
.col .sec-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 .75rem; }
.col p { line-height: 1.65; }
.big { font-size: 1.05rem; }

.quote {
  border-left: 3px solid currentColor; padding: .4rem 0 .4rem 1rem;
  margin: 1rem 0; opacity: .85; font-style: italic;
}

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.two ul, .reasons { margin: .5rem 0 0; padding-left: 1.1rem; line-height: 1.6; }
.reasons { list-style: none; padding: 0; margin-top: 1.25rem; }
.reasons li { padding: .35rem 0; opacity: .9; font-size: .93rem; }

a.lnk { text-decoration: none; color: inherit; display: block; }
a.lnk:hover { transform: translateY(-2px); transition: transform .15s; }

.ark-list { list-style: none; margin: 0; padding: 0; }
.ark-list li {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: baseline;
}
.ark-list a { text-decoration: none; color: inherit; }
.ark-list a strong { display: inline-block; min-width: 1.9rem; opacity: .6; }
.ark-list span { font-size: .88rem; opacity: .7; }

.note { font-size: .86rem; opacity: .65; line-height: 1.55; }

/* Подвал: колонки со всеми разделами */
.foot-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.foot-col h4 { margin: 0 0 .6rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.foot-col a { display: block; padding: .2rem 0; font-size: .9rem; color: inherit; opacity: .85; text-decoration: none; }
.foot-col a:hover { opacity: 1; text-decoration: underline; }

/* Кнопка канала. Подчёркнута рамкой, а не цветом фона: в подвале
   сплошная заливка перетягивает внимание с навигации, ради которой
   подвал и существует. */
.foot-tg {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  margin: .15rem 0 .5rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(227,192,138,.45);
  border-radius: .6rem;
  color: #E3C08A !important;
  opacity: 1 !important;
  font-weight: 600;
  text-decoration: none !important;
}
.foot-tg:hover { background: rgba(227,192,138,.1); }
.foot-tg svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.foot-tg-note { margin: 0; font-size: .82rem; line-height: 1.5; opacity: .6; }

/* Ниже 1000 px — одна колонка, навигация сворачивается в details */
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .side { position: static; }
  .side-list { columns: 2; column-gap: 1.5rem; }
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .side-list { columns: 1; }
  .ark-list li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* Раздел «числа на часах». Дополнение к seo.css. */

/* Само время — главный опознавательный знак страницы. Табличные цифры,
   чтобы 11:11 и 22:22 занимали одинаковую ширину и список не дёргался. */
.clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.clock.sm { font-size: 1.05rem; font-weight: 600; }

.calc-steps-box { padding: 1.1rem 1.25rem; }
.calc-steps-box .calc-steps { margin: .15rem 0; font-variant-numeric: tabular-nums; }
.calc-steps-box .calc-res {
  display: flex; align-items: center; gap: .9rem;
  margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

h3.grp {
  margin: 1.6rem 0 .6rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; opacity: .6;
}

.chas-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem .9rem;
}
.chas-list li {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
}
.chas-list a { text-decoration: none; color: inherit; }
.chas-list a:hover { text-decoration: underline; }
.chas-list span { font-size: .78rem; opacity: .6; }

/* Сайдбар раздела: 30 значений времени в один столбец слишком длинны,
   поэтому в две колонки уже на широких экранах. */
.side-list { columns: auto; }
.layout .side details + details { margin-top: .9rem; }

@media (min-width: 1001px) {
  .side .side-list.times { columns: 2; column-gap: 1rem; }
}

/* ---- Натальная карта ---- */

.natal-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .85rem; margin: 0 0 .9rem;
}
.natal-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.natal-form input {
  padding: .55rem .7rem; border-radius: .5rem; font: inherit;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: inherit;
}
/* Те же поля, но в блоке расчёта.

   Оформление полей было только у `.natal-form` и у `.layout .calc input`.
   А четыре калькулятора — число судьбы, квадрат Пифагора, камень по дате и
   китайский год — кладут <input> прямо в `.calc-row`, и стоят они в тёмном
   первом экране, а не на светлом листе `.layout`. Ни одно из двух правил до
   них не доставало, и браузер рисовал поле по умолчанию: белый прямоугольник
   с серой вдавленной рамкой и чёрным текстом посреди тёмной страницы.
   Выглядело это как незагрузившийся стиль, о чём и написал владелец.

   Правило безусловное, поэтому годится и для будущих расчётов, где бы их ни
   поставили. На светлом листе его перебивает `.layout .calc input` ниже —
   там специфичность выше, и порядок объявления роли не играет. */
.calc input,
.calc select,
.calc textarea {
  padding: .55rem .7rem; border-radius: .5rem; font: inherit;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: inherit;
}

.city-wrap { position: relative; }
.city-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  list-style: none; margin: .25rem 0 0; padding: .25rem;
  max-height: 15rem; overflow-y: auto;
  background: #0b0d16; border: 1px solid rgba(255,255,255,.18);
  border-radius: .5rem; box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.city-list li { padding: .45rem .6rem; border-radius: .35rem; cursor: pointer; }
.city-list li:hover { background: rgba(255,255,255,.08); }
.city-list strong { display: block; font-weight: 600; font-size: .92rem; }
/* Регион и страна — не украшение: без них «Свердловск» это два разных
   города в 1500 км друг от друга. */
.city-list span { display: block; font-size: .78rem; opacity: .6; }

.calc-err {
  margin: .6rem 0 0; padding: .55rem .8rem; border-radius: .5rem;
  background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.35);
  font-size: .9rem;
}
.calc-meta { font-size: .85rem; opacity: .7; line-height: 1.5; }

/* Число результата. Класс использовался в трёх местах, но правил у него
   не было вовсе — итог расчёта выглядел обычным текстом в потоке, и
   человеку приходилось искать глазами то, ради чего он и нажал кнопку. */
.calc-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem;
  border: 1px solid rgba(227,192,138,.4); border-radius: 50%;
  background: rgba(227,192,138,.1);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem; font-weight: 500; line-height: 1;
  color: var(--gold, #E3C08A);
  flex: 0 0 auto;
}
.calc-num.sm {
  min-width: 1.7rem; height: 1.7rem; font-size: 1.05rem;
  border-radius: 50%; margin-right: .35rem;
}
/* На листе-бумаге золото приглушено до читаемого на светлом. */
.layout:not(.night) .calc-num {
  color: var(--gold-ink, #8a6520);
  border-color: rgba(138,101,32,.35);
  background: rgba(138,101,32,.07);
}

.big3 { padding: .3rem 0; }
.big3 + .big3 { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); }
.big3 h3 { margin: 0 0 .15rem; }
.znak-meta { font-size: .8rem; opacity: .6; margin: 0 0 .35rem; }

/* Таблицы прокручиваются внутри себя: на 390 px шесть колонок не влезают,
   но горизонтальной прокрутки у страницы быть не должно. */
.tbl-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
.natal-tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }
.natal-tbl th, .natal-tbl td {
  padding: .4rem .7rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.natal-tbl th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.natal-tbl td:first-child { font-weight: 600; }

.znak-card dl, dl.defs { margin: .5rem 0 0; }
.znak-card dt, dl.defs dt { font-weight: 600; margin: .6rem 0 .15rem; font-size: .92rem; }
.znak-card dd, dl.defs dd { margin: 0; opacity: .9; line-height: 1.6; }
dl.defs dt { border-top: 1px solid rgba(255,255,255,.07); padding-top: .6rem; }
dl.defs dt:first-child { border-top: 0; }

/* ---- Шапка: сгруппированное меню ----

   Предыстория. Разделов стало восемь, и на 1000 px кнопка «Войти»
   выталкивалась за край: scrollWidth 1091 против окна 1000. Тогда меню
   заставили прокручиваться внутри себя, а ниже 900 px спрятали совсем.
   Оба решения оказались плохими: боковая прокрутка внутри шапки не видна
   и о ней не догадываются, а на телефоне меню просто не было.

   Теперь пунктов верхнего уровня четыре, разделы лежат внутри групп.
   Четыре влезают в любую ширину, и одиннадцатый раздел шапку не ломает.

   Раскрытие на десктопе — чистый CSS на :hover и :focus-within. Скрипт
   нужен только бургеру: меню обязано работать до загрузки JS. */
.hdr .wrap { flex-wrap: nowrap; }
.brand { flex: 0 0 auto; }

.nav {
  display: flex; align-items: center;
  gap: 4px; margin-left: auto;
  font-size: 14.5px; color: var(--muted); font-weight: 500;
  min-width: 0;
}
.nav-group { position: relative; display: flex; align-items: center; }

.nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 10px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-group:hover .nav-top,
.nav-group:focus-within .nav-top { color: var(--head); background: rgba(140,160,220,.09); }

/* Стрелка нужна только на телефоне: там раскрытием управляет кнопка.
   На десктопе группа открывается наведением, и кнопка была бы лишней. */
.nav-toggle { display: none; }

/* Метка-галочка после названия группы — чтобы было видно, что внутри
   есть ещё что-то. Рисуем псевдоэлементом, а не иконкой: одна строка
   вместо восьми и не грузится отдельным файлом. */
.nav-top::after {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: .55;
  transition: transform .2s, opacity .2s;
}
.nav-group:hover .nav-top::after,
.nav-group:focus-within .nav-top::after { opacity: 1; transform: rotate(225deg) translateY(-2px); }

/* Привязка к правому краю группы, а не по центру. Меню прижато вправо, и
   список, отцентрованный по последнему пункту, вылезал за край окна —
   а горизонтальной прокрутки у страницы быть не должно. Влево места
   заведомо хватает: слева весь остаток шапки. */
.nav-drop {
  position: absolute; top: 100%; right: 0; left: auto;
  transform: translateY(6px);
  padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-drop-inner {
  display: grid; grid-template-columns: repeat(2, minmax(178px, 1fr));
  gap: 2px; padding: 10px;
  /* Страховка на узких окнах между 980 и 1100 px: список не должен быть
     шире окна даже при двух колонках. */
  max-width: min(90vw, 460px);
  border: 1px solid var(--brd2); border-radius: 16px;
  background: rgba(7,11,22,.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 34px 80px -30px rgba(0,0,0,.95);
}
/* Одна колонка, если пунктов мало: две полупустые смотрятся как ошибка.
   Класс ставит шаблон по длине списка — см. site_header.html. */
.nav-drop-inner.narrow { grid-template-columns: minmax(206px, 1fr); }

.nav-drop-inner a {
  display: block; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--txt);
  transition: background .16s, color .16s;
}
.nav-drop-inner a:hover { background: rgba(140,160,220,.12); color: var(--head); }
.nav-drop-inner b {
  display: block; font-size: 14px; font-weight: 600; color: inherit;
  line-height: 1.35;
}
.nav-drop-inner span {
  display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px;
  line-height: 1.35;
}

/* Раньше кнопка была btn-ghost с текстом «Войти» — терялась среди пунктов
   меню того же приглушённого цвета. Теперь btn-gold, как основные CTA
   сайта («Построить матрицу» и т.п.): единственное золотое пятно в шапке,
   глаз цепляется само. Текст длиннее «Войти», поэтому явно запрещаем
   перенос — иначе на середине ширины кнопка ломается на две строки. */
.nav-login { margin-left: 10px; white-space: nowrap; }
.hdr .btn { padding: 11px 22px; font-size: 14px; flex: 0 0 auto; }

/* ---- Бургер и панель на узких экранах ---- */

.nav-burger {
  display: none; align-items: center; gap: 9px;
  margin-left: auto; padding: 9px 14px;
  border: 1px solid var(--brd2); border-radius: 999px;
  background: rgba(140,160,220,.07); color: var(--txt);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.nav-burger-lines { display: grid; gap: 3.5px; width: 16px; }
.nav-burger-lines i {
  display: block; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-burger[aria-expanded="true"] .nav-burger-lines i:nth-child(1) { transform: translateY(5.3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-lines i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-lines i:nth-child(3) { transform: translateY(-5.3px) rotate(-45deg); }

/* Подложка и шапка при открытом меню поднимаются выше баннера cookie.
   У баннера z-index 120 (см. partials/cookie_consent.html), у шапки 40 —
   без этого баннер накрывал открытую панель и прятал её нижние пункты
   вместе с кнопкой «Войти». Класс на <html> ставит menu.js. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 125;
  background: rgba(3,4,10,.72); backdrop-filter: blur(3px);
}
html.nav-open .hdr { z-index: 130; }

@media (max-width: 980px) {
  .nav-burger { display: inline-flex; }

  /* Ниже 380px у кнопки остаются только три полоски. Причина замерена в
     Safari на 320px: логотип с гербом занимает ~205px, кнопка со словом
     «Разделы» — ~115px, поля обёртки — 44px. Вместе 364 при экране 320,
     а строка шапки не переносится (`.hdr .wrap { flex-wrap: nowrap }`) —
     кнопка уезжала за правый край, и на узком iPhone меню было
     недостижимо: до него нельзя было ни дотянуться, ни доскроллить.
     Chrome это скрывал — его эмуляция телефона ужимает страницу под
     экран, и переполнение там просто не видно.

     Слово убираем, а не логотип: без подписи кнопка-гамбургер понятна,
     а сайт без названия — нет. Доступность не страдает, у кнопки есть
     aria-label «Меню разделов» (см. partials/site_header.html). */
  @media (max-width: 380px) {
    .nav-burger-text { display: none; }
    .nav-burger { padding: 10px 12px; }
  }

  /* Панель выезжает из-под шапки на всю ширину. Высота ограничена, а
     прокрутка — внутри панели: страница под ней не должна ездить. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 0; padding: 12px;
    max-height: calc(100vh - 72px); overflow-y: auto;
    border-bottom: 1px solid var(--brd2);
    background: rgba(5,8,16,.99);
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.95);
    z-index: 39;
  }
  .nav.open { display: flex; }

  .nav-group {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-bottom: 1px solid rgba(170,190,255,.08);
  }
  .nav-group:last-of-type { border-bottom: 0; }
  .nav-top { padding: 13px 10px; font-size: 16px; color: var(--head); }
  .nav-top::after { display: none; }

  .nav-toggle {
    display: grid; place-items: center;
    /* 44px, а не 38: это кнопка раскрытия подсписка, и мажут по ней чаще
       всего — она стоит вплотную к самой ссылке раздела, и промах ведёт
       на страницу вместо раскрытия списка. */
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--brd); border-radius: 10px;
    background: rgba(140,160,220,.07); color: var(--txt); cursor: pointer;
  }
  .nav-toggle svg { width: 17px; height: 17px; transition: transform .2s; }
  .nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* На телефоне список раскрывается по кнопке, а не наведением: hover
     на тач-экране срабатывает от первого касания и глотает переход. */
  .nav-drop {
    position: static; grid-column: 1 / -1;
    transform: none; padding: 0 0 8px;
    opacity: 1; visibility: hidden; pointer-events: none;
    display: none; transition: none;
  }
  .nav-group:hover .nav-drop,
  .nav-group:focus-within .nav-drop { transform: none; }
  .nav-drop.open {
    display: block; visibility: visible; pointer-events: auto;
  }
  .nav-drop-inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding: 4px; border-radius: 12px;
    background: rgba(140,160,220,.05);
    box-shadow: none; backdrop-filter: none;
  }
  .nav-drop-inner.narrow { grid-template-columns: minmax(0, 1fr); }

  /* Пункт списка — цель для пальца, а не для курсора. Замер на iPhone дал
     31px при рекомендованных 44: соседние пункты идут вплотную, и промах
     здесь означает уход не на ту страницу — а это главное меню сайта.
     Правило только для тач-панели: в выпадающем меню под мышью высота
     строки задаёт ритм списка, и трогать его незачем. */
  .nav-drop-inner a {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 44px;
  }

  /* На телефоне кнопка на всю ширину и без nowrap: панель меню уже узкая
     сама по себе, а с длинным текстом «Войти / Зарегистрироваться» и
     нельзя запрещать перенос — обрежется вместо переноса на 320-360 px. */
  .nav-login { margin: 10px 0 2px; width: 100%; white-space: normal; }
}

/* ---- Карточки хаба на главной ----
   Раньше здесь были карточки услуг с ценниками; теперь ссылки на
   калькуляторы и разделы справочника. Вся карточка — ссылка, чтобы
   попадать пальцем, а не в заголовок. */
a.hub-card { display: block; text-decoration: none; color: inherit; }
a.hub-card:hover { transform: translateY(-2px); transition: transform .15s; }
a.hub-card h3 { margin: .4rem 0 .3rem; }

/* ---- Сетка психоматрицы ----
   Три столбца в порядке метода: 1-4-7, 2-5-8, 3-6-9. Цифры повторяются
   столько раз, сколько их в матрице — так её и рисуют на бумаге. */
.pif-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem; margin: 1rem 0 1.5rem;
}
.pif-cell {
  border: 1px solid rgba(255,255,255,.14); border-radius: .6rem;
  padding: .7rem .6rem; text-align: center; min-height: 5rem;
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
}
.pif-cell b {
  font-size: 1.35rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  overflow-wrap: anywhere;
}
.pif-cell span { font-size: .72rem; opacity: .65; line-height: 1.25; }
.pif-cell.empty { opacity: .45; }
.pif-cell.empty b { font-weight: 400; }

@media (max-width: 420px) {
  .pif-cell { min-height: 4.2rem; padding: .5rem .35rem; }
  .pif-cell b { font-size: 1.1rem; }
  .pif-cell span { font-size: .66rem; }
}

/* ---- Сонник: разбор сна ---- */
.calc textarea {
  width: 100%; padding: .6rem .75rem; border-radius: .5rem; font: inherit;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: inherit; resize: vertical; min-height: 5rem; line-height: 1.5;
}
.calc textarea:focus { outline: 1px solid rgba(227,192,138,.6); }
/* Ответ модели приходит абзацами с номерами — сохраняем переносы строк,
   иначе всё слипается в один кусок. */
.dream-answer { white-space: pre-wrap; line-height: 1.65; margin: 0 0 .6rem; }
/* ============================================================
   ЛИСТ: поверхность для чтения
   ============================================================

   Зачем. Замер показал, что справочные страницы проваливают свою
   единственную работу — чтение: строки 96-128 символов при кегле 12,8-15px
   на сплошном тёмном фоне, и так на 5000-8000 пикселей высоты. Контраст при
   этом отличный (16:1), поэтому на глаз проблема читается не как «бледно»,
   а как «не хочу это читать».

   Решение не «осветлить сайт», а разделить по работе. Главная и
   калькуляторы — небо, это бренд и он работает. Статья справочника — другое
   занятие, и у него своя традиция: эфемериды, календари и сонники печатались
   на бумаге. Поэтому шапка, первый экран и подвал остаются ночью, а блок
   .layout становится листом, лежащим на ней.

   Бумага холодная, синевато-серая — родственная ночному небу. Тёплый
   кремовый сюда не берём: он тянет в «литературный журнал», которым эта
   тема не является, и им завалены все шаблоны.

   Главная правка — не цвет, а мера строки: 66 символов вместо 96-128.
   Именно длина строки, а не контраст, была причиной нечитаемости.
   ============================================================ */

.layout {
  --paper:        #edeef3;  /* холодный офсет, не кремовый */
  --paper-raised: #f8f9fc;  /* карточки и панели на листе */
  --ink:          #161a24;  /* основной текст, синеватый чёрный */
  --ink-soft:     #555c70;  /* вторичный: контраст 6,9:1 — хватает и мелкому */
  --rule:         #ced3e0;  /* волосяные линии */
  --rule-strong:  #b9c0d2;
  --gold-ink:     #8a6520;  /* золото бренда, затемнённое до 5,5:1 на бумаге */
  --measure:      66ch;     /* мера строки для сплошного текста */

  background: var(--paper);
  color: var(--ink);
  /* Лист лежит на небе: поля по краям и мягкая тень под ним */
  padding: 2.6rem 3rem 3rem;
  border-radius: 2px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9),
              0 1px 0 rgba(255, 255, 255, .06);
  margin-bottom: 3rem;
}

/* --- Мера строки. Ограничиваем сам текст, а не колонку: таблицам,
   карточкам и сеткам нужна вся ширина. --------------------------------- */
.layout .col > section > p,
.layout .col > section > ul,
.layout .col > section > ol,
.layout .col > p,
.layout .defs dd,
.layout .panel > p,
.layout details.panel > p {
  max-width: var(--measure);
}

/* --- Текст ------------------------------------------------------------ */
.layout .col p,
.layout .col li,
.layout .col dd {
  color: var(--ink);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.72;
}
.layout .col .big {
  font-size: 1.1875rem;   /* 19px — вводный абзац раздела */
  line-height: 1.66;
}
/* Вторичный текст был 12,8-15px. Ниже 15 не опускаемся: это подписи,
   которые всё равно читают. */
.layout .col .note,
.layout .col .znak-meta,
.layout .col .calc-hint,
.layout .col .calc-meta,
.layout .note,
.layout .znak-meta,
.layout .calc-hint,
.layout .calc-meta,
.layout .chas-list span,
.layout .ark-list span {
  color: var(--ink-soft);
  font-size: 1rem;        /* 16px: примечания читают, а не сканируют */
  line-height: 1.65;
  opacity: 1;             /* прозрачностью контраст больше не крадём */
}
.layout .col .note,
.layout .note { max-width: var(--measure); }

/* --- Заголовки. Cormorant на бумаге требует веса: тонкое начертание
   на светлом выглядит вылинявшим. --------------------------------------- */
.layout h2,
.layout h3,
.layout h4 {
  color: var(--ink);
  font-weight: 500;
}
.layout .sec-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .9rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule);
}
.layout .sec-head h2 em {
  font-style: italic;
  color: var(--gold-ink);
}
.layout h3 { font-size: 1.15rem; }
.layout h4 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin: 0 0 .3rem;
}

/* --- Полоса фактов: подпись под заголовком, набранная моноширинным.
   Это опознавательный знак справочника: в ней всегда настоящие данные
   статьи — положение в системе, стихия, расположение, — а не украшение.
   ---------------------------------------------------------------------- */
.layout .col .znak-meta,
.layout .znak-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8125rem;    /* 13px моноширинного = 14 наборного по ширине */
  letter-spacing: .02em;
  text-transform: lowercase;
  padding: .4rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: inline-block;
}

/* --- Панели и карточки ------------------------------------------------ */
.layout .panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
}
.layout .grid .card { box-shadow: none; }
.layout a.lnk:hover { background: var(--paper-raised); }

/* --- Списки определений: основа справочных страниц -------------------- */
.layout .defs dt {
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
  margin-top: .9rem;
}
.layout .defs dt:first-child { border-top: 0; margin-top: 0; }
.layout .defs dd { margin: .25rem 0 0; }

/* --- Цитата-симптом: набрана иначе, потому что это чужая речь ---------- */
.layout .quote {
  border-left: 2px solid var(--gold-ink);
  color: var(--ink-soft);
  font-style: italic;
  max-width: var(--measure);
}

/* --- Ссылки ----------------------------------------------------------- */
.layout .col a,
.layout .defs a {
  color: var(--gold-ink);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .18em;
}
.layout .col a:hover { text-decoration-color: var(--gold-ink); }
.layout .inline-lnk {
  display: inline-block;
  margin-top: .35rem;
  font-size: .9375rem;
}

/* --- Боковая навигация: поля листа ------------------------------------ */
.layout .side summary {
  color: var(--ink);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.layout .side-list a { color: var(--ink-soft); opacity: 1; }
.layout .side-list a:hover { color: var(--gold-ink); }
.layout .side-list li.cur > a { color: var(--ink); }

/* --- Раскрывающиеся вопросы ------------------------------------------- */
.layout details.panel summary {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
.layout details.panel { margin-bottom: .5rem; }

/* --- Таблицы: главный носитель фактов в справочнике -------------------- */
.layout .natal-tbl th {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
}
.layout .natal-tbl td { border-bottom: 1px solid var(--rule); }
.layout .natal-tbl tr:hover td { background: var(--paper-raised); }

/* --- Списки времени и арканов ----------------------------------------- */
.layout .chas-list li { border-color: var(--rule); }
.layout .chas-list li:hover { background: var(--paper-raised); }
.layout .ark-list li { border-bottom-color: var(--rule); }
.layout .pif-cell { border-color: var(--rule-strong); }
.layout .pif-cell.empty { opacity: .5; }

/* --- Формы расчёта внутри листа --------------------------------------- */
.layout .calc textarea,
.layout .calc input,
.layout .natal-form input {
  background: #fff;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.layout .calc textarea:focus,
.layout .natal-form input:focus {
  outline: 2px solid var(--gold-ink);
  outline-offset: 1px;
}
.layout .calc-err {
  background: #fdecec;
  border-color: #e6b3b3;
  color: #7d2222;
}
.layout .calc-steps-box .calc-res { border-top-color: var(--rule); }
.layout .big3 + .big3 { border-top-color: var(--rule); }
.layout .dream-answer { color: var(--ink); }

/* --- Кнопки на листе --------------------------------------------------- */
.layout .btn-ghost {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: transparent;
}
.layout .btn-ghost:hover {
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}

/* --- Хлебные крошки перед листом остаются на небе ---------------------- */
.crumbs { padding-bottom: .9rem; }

/* --- Узкие экраны: лист занимает всю ширину, поля уменьшаются ---------- */
@media (max-width: 1000px) {
  .layout {
    padding: 1.8rem 1.4rem 2.2rem;
    border-radius: 0;
    margin-bottom: 2rem;
  }
  /* На узком экране мера задаётся шириной экрана, ограничивать нечего */
  .layout .col > section > p,
  .layout .col > section > ul,
  .layout .col > section > ol,
  .layout .defs dd,
  .layout .note { max-width: none; }
}
@media (max-width: 560px) {
  .layout { padding: 1.4rem 1rem 1.8rem; }
  .layout .col p, .layout .col li, .layout .col dd { font-size: 1.0625rem; }
}


/* ============================================================
   Телефон: экран короткий, и всё лишнее на нём стоит трети первого
   экрана. Здесь три правки, каждая из замеров живой страницы.
   ============================================================ */
@media (max-width: 760px) {
  /* 1. Пустота. Первый экран справочника отдавал около 150 px воздуху между
     шапкой и заголовком: отступы крошек и первого экрана складывались, а
     рассчитаны они на десктоп, где места вдоволь. */
  .hero-sm { padding: 1.4rem 0 1.1rem; }
  .crumbs { padding-top: .7rem; padding-bottom: .5rem; }

  /* 2. Надстрочная подпись. При разрядке в .22em она переносилась на две
     строки посреди слова и читалась как сбой вёрстки. На узком экране
     разрядка меньше, а перенос запрещён. */
  .hero-sm .eyebrow,
  .layout .eyebrow {
    letter-spacing: .12em;
    font-size: 10px;
    line-height: 1.5;
  }

  /* 3. Цели касания. Ссылки в боковых списках и в крошках были высотой
     18–19 px — палец в такую не попадает, и человек жмёт соседнюю. Сорок
     четыре пикселя — общепринятый минимум, до него добираем отступами:
     менять кегль ради этого не нужно, читаются они хорошо. */
  .side-list a,
  .crumbs a,
  .layout .side summary {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 1.45;
  }
  .side-list li { padding: 0; }
  .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .crumbs a { padding: 8px 0; min-height: 40px; display: inline-flex; align-items: center; }

  /* Подписи мельче 12 px на телефоне почти нечитаемы: это не «мелкий
     шрифт для второстепенного», а текст, который просто не прочтут. */
  .layout .col .note,
  .layout .col .calc-hint,
  .side-list,
  .crumbs { font-size: .8125rem; }
}

/* Ночная палитра листа — значения в одном месте на оба случая ниже:
   системную тёмную тему и раздел, которому лист-бумага не подходит по
   существу. Разъезд этих двух наборов даёт справочник, где половина
   страниц светлее другой на один тон, и заметно это только рядом. */
:root {
  --paper-night:        #101422;
  --paper-raised-night: #161b2b;
  --ink-night:          #e2e7f5;
  --ink-soft-night:     #98a1bb;
  --rule-night:         #262d42;
  --rule-strong-night:  #354060;
  --gold-ink-night:     #e3c08a;
  --field-night:        #0b0e18;
}

/* Уважаем системную настройку: кому нужна тёмная тема, тот её и получит */
@media (prefers-color-scheme: dark) {
  .layout {
    --paper: var(--paper-night);
    --paper-raised: var(--paper-raised-night);
    --ink: var(--ink-night);
    --ink-soft: var(--ink-soft-night);
    --rule: var(--rule-night);
    --rule-strong: var(--rule-strong-night);
    --gold-ink: var(--gold-ink-night);
    box-shadow: none;
  }
  .layout .calc textarea,
  .layout .calc input,
  .layout .natal-form input { background: var(--field-night); }
  .layout .calc-err { background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.35); color: #ffb4b4; }
}

/* ============================================================
   .layout.night — лист, который остаётся ночью при любой системной теме.

   Лист-бумага придуман для чтения: справочная статья — это 5000-8000 px
   сплошного текста, и белая полоса под ним работает. Календари и гороскоп
   устроены иначе. Там не статья, а приборная панель: диск Луны, полосы
   процентов, сетка из двенадцати карточек, цветные шкалы стихий. Читать
   там нечего — там смотрят. Белый лист под этим не помогает чтению,
   а ломает вид сайта: лунный диск светится на ночном небе, а вокруг него
   офисная бумага.

   Поэтому разделы с ежедневным содержанием берут ночную палитру всегда,
   а справочные статьи остаются листом. Это не «две темы вразнобой» —
   это разделение по работе, то же самое, из-за которого шапка и подвал
   не побелели вместе с листом.
   ============================================================ */
.layout.night {
  --paper: var(--paper-night);
  --paper-raised: var(--paper-raised-night);
  --ink: var(--ink-night);
  --ink-soft: var(--ink-soft-night);
  --rule: var(--rule-night);
  --rule-strong: var(--rule-strong-night);
  --gold-ink: var(--gold-ink-night);
  /* Лист на небе держался тенью снизу. Ночному листу тень не нужна —
     он и так часть неба, — но край без неё теряется, поэтому вместо
     тени тонкая линия по периметру. */
  background: var(--paper-night);
  box-shadow: none;
  border: 1px solid var(--rule-night);
  border-radius: 14px;
}
.layout.night .calc textarea,
.layout.night .calc input,
.layout.night .natal-form input { background: var(--field-night); }
.layout.night .calc-err {
  background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.35); color: #ffb4b4;
}


/* Вводный абзац первого экрана: 82 символа в строке — многовато и на
   тёмном. Мера строки от цвета фона не зависит. */
.hero-sm .lede { max-width: 54ch; }


/* Первый экран главной: строки по 91 символу при 15px. Главная остаётся
   ночью — это бренд, — но мера строки от цвета фона не зависит. */
.sec-head p { max-width: 62ch; font-size: 1rem; }
.panel.card p { font-size: 1rem; line-height: 1.62; }


/* Секции внутри листа: с лендинга приходит padding 98px сверху и снизу —
   там секции идут полосами во всю ширину, и воздух уместен. В листе он даёт
   двести пикселей пустоты вокруг трёх строк текста. Ритм задаём отступом
   между секциями, а не набивкой внутри них. */
.layout .col > section {
  padding: 0;
  margin: 0 0 2.75rem;
}
.layout .col > section:last-of-type { margin-bottom: 0; }
/* Заголовок уже несёт линейку снизу — второй отступ от .sec-head лишний */
.layout .sec-head { margin-bottom: 0; max-width: none; }
/* Первая секция начинается сразу: верхнее поле даёт сам лист */
.layout .col > section:first-child { margin-top: 0; }


/* own-marker: свой указатель вместо служебного.
   Стандартный маркер details вылезал справа от подписи и читался как
   опечатка. Прячем его и рисуем треугольник, который поворачивается. */
.layout .side summary { list-style: none; position: relative; padding-right: 1.2rem; }
.layout .side summary::-webkit-details-marker { display: none; }
.layout .side summary::after {
  content: "";
  position: absolute; right: .15rem; top: 50%;
  width: .42rem; height: .42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: .5;
  transition: transform .18s ease;
}
.layout .side details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}


/* note-separated: примечание — другой голос, чем основной текст.
   Без отбивки оно читается как продолжение абзаца. */
.layout .col .note {
  margin-top: 1.15rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
}
/* Внутри панелей и карточек линия лишняя — там границы уже есть */
.layout .panel .note,
.layout .card .note {
  border-top: 0;
  padding-top: 0;
  margin-top: .7rem;
}


/* landing-type-pass: кегль на главной.
   Ответы в вопросах читают как обычный текст, а были 15px строками по
   88 символов. Тексты в виджете расчёта были 13px — ниже разумного порога
   для целых предложений. Перебиваем точностью селектора, не !important. */
details.panel > p {
  font-size: 1.03rem;
  line-height: 1.7;
  max-width: 62ch;
}
.panel.calc p,
.panel.calc .unlock p,
.panel.calc .calc-note {
  font-size: .9375rem;
  line-height: 1.62;
  max-width: 46ch;
}