/* ============================================================
   TaroAbs. Общая основа: токены, каркас, шапка, подвал
   и блоки, которые есть на каждом типе страниц.

   Собрано из восьми согласованных прототипов в design/.
   Правится здесь и меняется сразу на всём портале.
   ============================================================ */

/* ---------- ТОКЕНЫ ---------- */
:root{
  --bg-deep:#080a10; --bg-base:#0e1219; --bg-raised:#151a24; --bg-pale:#1b2130;
  --surface:#1a2030; --surface-deep:#12161f; --line:#242c3b;
  --text-hi:#eef0f5; --text-mid:#aab2c2; --text-low:#858ea3;
  --gold:#d4a24c; --gold-soft:rgba(212,162,76,.13); --gold-line:rgba(212,162,76,.34);
  --tg:#2aabee; --tg-deep:#1c93d2;
  --r-card:14px; --r-small:8px; --r-pill:999px;
  --wrap:1240px; --read:74ch; --step:clamp(1.7rem,2.9vw,2.6rem);
  /* Вуаль поверх обложки в шапке. Цвет обязан идти за палитрой:
     тёмная плашка под тёмным текстом светлой темы делает шапку
     нечитаемой справа - на это указал заказчик 24.08.2026. */
  --hero-veil-1:rgba(14,18,25,.72); --hero-veil-2:rgba(14,18,25,.4);
  --font-display:"Cormorant",Georgia,"Times New Roman",serif;
  --font-text:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* Светлая тема обязательна: портал живёт длинным чтением. */
@media (prefers-color-scheme: light){
  :root{
    --bg-deep:#171b22; --bg-base:#fbfaf7; --bg-raised:#f3f0e9; --bg-pale:#ffffff;
    --surface:#ffffff; --surface-deep:#20252f; --line:#e5dfd3;
    --text-hi:#191c23; --text-mid:#4b5261; --text-low:#5c6374;
    --gold:#8a5f16; --gold-soft:rgba(138,95,22,.09); --gold-line:rgba(138,95,22,.30);
    --hero-veil-1:rgba(251,250,247,.88); --hero-veil-2:rgba(251,250,247,.62);
  }
}

/* ---------- СБРОС И БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg-base);color:var(--text-hi);
  font-family:var(--font-text);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.15rem,3.8vw,3rem);line-height:1.12}
h2{font-size:clamp(1.95rem,3.2vw,2.65rem);line-height:1.18}
h3{font-family:var(--font-text);font-weight:600;font-size:26px;line-height:1.35}
/* Шкала кеглей от 19.08.2026: основной текст 18px, ступени заголовков 18 - 22 - 26 - h2 - h1.
   h4 своего правила не имел и наследовал кегль текста, поэтому заголовки карточек
   отличались от текста только жирностью и иерархия не читалась. */
h4{font-size:22px;line-height:1.3}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* Cormorant по умолчанию даёт старостильные цифры, и в плашках они скачут
   выше и ниже центра. Везде, где число стоит в блоке, нужен этот класс. */
.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---------- ТОНАЛЬНЫЕ СЕКЦИИ ---------- */
.band{padding:var(--step) 0}
.band-base{background:var(--bg-base)}
.band-raised{background:var(--bg-raised)}
.band-pale{background:var(--bg-pale)}
/* Тёмная секция остаётся тёмной в обеих темах, поэтому переопределяет ВСЕ
   токены, а не только акцент. Иначе в светлой теме любой элемент,
   унаследовавший --text-mid, окажется тёмным на тёмном фоне. */
.band-deep{
  background:var(--bg-deep);color:#eef0f5;
  --gold:#d4a24c; --gold-line:rgba(212,162,76,.34); --gold-soft:rgba(212,162,76,.13);
  --line:#242c3b; --surface:#12161f; --bg-raised:#151a24;
  --text-hi:#eef0f5; --text-mid:#b3bccc; --text-low:#8f99ab;
}
.band-deep h2,.band-deep h3{color:#f2f3f7}
.band-deep p{color:#b3bccc}

/* ---------- СТРОКА СИМВОЛИКИ ---------- */
/* Полоса всегда тёмная, поэтому держит свои цвета. В светлой теме
   переменная --gold становится тёмно-коричневой (#8a5f16), и на тёмном
   фоне надпись про лунный день была практически нечитаема - контраст
   1,8:1. Найдено 19.08.2026. */
.strip{background:#171b22;color:#9aa3b5;font-size:.8rem;border-bottom:1px solid #242c3b;
  --gold:#d4a24c;--line:#242c3b}
.strip-in{display:flex;align-items:center;gap:18px;height:40px;flex-wrap:nowrap;overflow:hidden}
/* Золотом выделяется только карта дня справа - это ссылка и акцент.
   В лунной строке цветным был лишь кусок фразы, а запятая после него
   оставалась серой, и надпись выглядела сломанной. */
.strip .strip-right b{color:var(--gold);font-weight:500}
.strip .moon b{color:#c7cedb;font-weight:500}
.strip .sep{width:1px;height:14px;background:var(--line);flex:none}
.strip-right{margin-left:auto;white-space:nowrap;transition:color .2s}
.strip-right:hover{color:var(--gold)}
.moon{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.moon svg{flex:none;color:var(--gold)}

/* ---------- ШАПКА ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--bg-base);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:26px;min-height:74px}
.brand{display:flex;flex-direction:column;line-height:1.15;flex:none}
.brand .logo{font-family:var(--font-display);font-size:1.55rem;white-space:nowrap}
.brand .logo b{color:var(--gold);font-weight:500}
.brand small{font-size:.7rem;color:var(--text-low);line-height:1.34;max-width:24ch;margin-top:2px}

.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav-item{position:relative}
.nav-link{display:block;padding:9px 12px;border-radius:var(--r-pill);font-size:.93rem;
  color:var(--text-mid);transition:color .2s,background .2s;white-space:nowrap}
.nav-link:hover,.nav-item:hover>.nav-link{color:var(--text-hi);background:var(--bg-raised)}
.nav-link[aria-current]{color:var(--gold)}

/* Ширина по содержимому, а не фиксированные 720 пикселей: подпункты
   отбираются по готовности разделов, и на панели остаётся одна колонка -
   в фиксированной ширине она выглядела пустой коробкой. */
.mega{
  position:absolute;left:-16px;top:calc(100% + 12px);
  width:max-content;min-width:240px;max-width:min(720px,86vw);
  background:var(--bg-pale);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
  box-shadow:0 28px 64px rgba(0,0,0,.4);
}
.mega-right{left:auto;right:-16px}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega h4{margin:0 0 10px;font-family:var(--font-text);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-low)}
.mega a{display:block;padding:5px 0;color:var(--text-mid);font-size:.94rem;transition:color .18s}
.mega a:hover{color:var(--gold)}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-raised);
  color:var(--text-mid);cursor:pointer;flex:none;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--gold-line);color:var(--gold)}

/* Мобильное меню и поиск на чекбоксах: работают без JS */
.mob-toggle,.search-toggle{position:absolute;opacity:0;pointer-events:none}
.mob-btn{display:none}
.mob-panel{display:none}
.search-panel{
  position:absolute;left:0;right:0;top:100%;z-index:39;
  background:var(--bg-pale);border-bottom:1px solid var(--line);
  padding:16px 0;display:none;box-shadow:0 22px 44px rgba(0,0,0,.32);
}
.search-toggle:checked ~ .search-panel{display:block}
.search-form{display:flex;gap:10px;align-items:center}
.search-form input{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg-base);color:var(--text-hi);font:inherit;font-size:18px;outline:none;
  transition:border-color .2s}
.search-form input::placeholder{color:var(--text-low)}
.search-form input:focus{border-color:var(--gold-line)}
.search-hint{margin-top:11px;font-size:.85rem;color:var(--text-low)}
.search-hint a{color:var(--gold);border-bottom:1px solid var(--gold-line)}

/* ---------- ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{padding:18px 0 0;font-size:.85rem;color:var(--text-low)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line)}
.crumbs li:last-child::after{display:none}
.crumbs a{color:var(--text-mid);transition:color .18s}
.crumbs a:hover{color:var(--gold)}

/* ---------- ТЕКСТ ---------- */
.prose{max-width:var(--read)}
.prose p{margin-bottom:18px;color:var(--text-mid)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text-hi);font-weight:600}
.prose a{color:var(--gold);border-bottom:1px solid var(--gold-line)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--text-mid)}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--gold)}
.prose h2{margin:38px 0 16px;scroll-margin-top:100px}
.prose h3{margin:26px 0 10px}
.sec-head{margin-bottom:26px;max-width:70ch}
.sec-head p{color:var(--text-mid);margin-top:9px}

/* Определение первым абзацем: этот фрагмент забирает нейроответ */
.definition{
  font-size:21px;line-height:1.62;color:var(--text-hi);max-width:62ch;
  padding:20px 24px;border-left:3px solid var(--gold);
  border-radius:0 var(--r-small) var(--r-small) 0;
  background:var(--gold-soft);margin-bottom:24px;
}
.meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--text-low);
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.meta-author{display:flex;align-items:center;gap:10px}
.meta-author img{width:38px;height:38px;border-radius:50%;object-fit:cover}
/* Монограмма вместо фотографии автора: настоящего снимка пока нет,
   а битая картинка рядом с именем эксперта работает против E-E-A-T. */
.author-mono{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;background:var(--surface);
  border:1px solid var(--gold-line);color:var(--gold);
  font-size:.78rem;letter-spacing:.06em;font-weight:500}
.author-mono-lg{width:160px;height:160px;font-size:2.2rem;letter-spacing:.08em}
.meta-author b{color:var(--text-hi);font-weight:500;font-size:.9rem}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}

/* ---------- ОГЛАВЛЕНИЕ ---------- */
.toc{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:22px 26px;margin:0 0 var(--step)}
.toc h2{font-family:var(--font-text);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-low);margin-bottom:14px}
/* Оглавление правлено 24.08.2026 по трём замечаниям заказчика:
   цифры были убраны (list-style:none), размер 15px читался мелким,
   а подчёркивание снималось отдельным правилом ниже - и пункты
   не читались как ссылки вовсе. */
.toc ol{list-style:decimal;margin:0;padding:0 0 0 1.4em;columns:2;column-gap:34px}
.toc li{margin-bottom:11px;break-inside:avoid;padding-left:4px}
.toc li::marker{color:var(--text-low);font-size:.9em}
.toc a{color:var(--text-mid);font-size:18px;transition:color .18s,border-color .18s;
  border-bottom:1px solid var(--gold-line);padding-bottom:1px}
.toc a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.toc-narrow ol{columns:1}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);font-size:17px;font-weight:500;
  white-space:nowrap;cursor:pointer;border:1px solid transparent;font-family:inherit;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
/* Белая подпись читается на золоте, только если само золото достаточно тёмное.
   Отсюда бронзовый градиент со светлой верхней кромкой. */
.btn-primary{background:linear-gradient(170deg,#b8862f,#9c6a1a);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{background:linear-gradient(170deg,#c99537,#a97620)}
.btn-ghost{border-color:var(--line);color:var(--text-hi);background:var(--bg-raised)}
.btn-ghost:hover{border-color:var(--gold-line)}

/* ---------- ССЫЛКИ ВНУТРИ ТЕКСТА ----------
   Глобально у ссылок снят цвет и подчёркивание (`a{color:inherit}`), поэтому
   ссылка внутри абзаца, списка или таблицы ничем не отличалась от обычного текста:
   на странице карты таких было пять, на разрезе - пять, на сфере - одна.
   Найдено 20.08.2026 замером по замечанию заказчика.

   Признак содержательной ссылки - отсутствие класса: у навигационных и служебных
   ссылок класс есть всегда (.btn, .rel, .go, .link-more и прочие). Оглавление
   и хлебные крошки возвращаются к своему виду правилами ниже. */
main :is(p, li, td) a:not([class]){
  color:var(--gold);border-bottom:1px solid var(--gold-line);padding-bottom:1px;
  transition:color .18s,border-color .18s}
main :is(p, li, td) a:not([class]):hover{border-bottom-color:var(--gold);color:var(--gold)}
main :is(p, li, td) a:not([class]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Хлебные крошки остаются без подчёркивания: они и так читаются
   как навигация по своему месту на странице. Оглавление отсюда убрано
   24.08.2026 - там подчёркивание нужно, см. блок .toc выше. */
main .crumbs a:not([class]){color:var(--text-mid);border-bottom:0;padding-bottom:0}
main .crumbs a:not([class]):hover{color:var(--gold)}

/* Название карты в таблицах сочетаний - тоже ссылка, но их на странице десятки,
   и красить все в золото было бы шумно. Постоянная подсказка - тонкая линия под
   названием, на наведении и фокусе линия и текст становятся золотыми. */
a.combo-card b{border-bottom:1px solid var(--gold-line);padding-bottom:1px;
  transition:color .18s,border-color .18s}
a.combo-card:hover b{color:var(--gold);border-bottom-color:var(--gold)}
a.combo-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Раздел «о чём хаб» с обложкой: текст слева, иллюстрация справа.
   Добавлено 20.08.2026 - без картинки блок в конце страницы выглядел недоделанным. */
.about-split{display:grid;grid-template-columns:1fr 420px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.about-split-pic{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card);
  border:1px solid var(--line)}
@media (max-width:900px){
  .about-split{grid-template-columns:1fr;gap:26px}
  .about-split-pic{order:-1}
}

/* ---------- ТЕГИ ---------- */
.kw{padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--bg-raised);font-size:.83rem;color:var(--text-mid)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--read)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 44px 20px 0;cursor:pointer;list-style:none;position:relative;
  font-size:20px;font-weight:500;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
/* Браузер рисует вокруг раскрытого summary свою чёрную рамку, и блок
   выглядит сломанным. Убираем её при клике мышью и оставляем аккуратный
   контур для клавиатуры: доступность важнее вида, но вид тоже важен.
   Найдено заказчиком 24.08.2026 на странице автора. */
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 20px;color:var(--text-mid)}

/* ---------- СМЕЖНЫЕ ВОПРОСЫ ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);font-size:18px;transition:border-color .2s,transform .2s}
.rel:hover{border-color:var(--gold-line);transform:translateX(3px)}
.rel svg{flex:none;color:var(--gold)}

/* ---------- ПАРТНЁРСКИЙ БЛОК ---------- */
.offer{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:28px 32px}
.offer h3{font-size:22px;margin-bottom:7px}
.offer p{color:var(--text-mid);font-size:18px}

/* ---------- БЛОК АВТОРА ---------- */
.author{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:26px 30px}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.author h3{margin-bottom:6px}
.author .role{color:var(--gold);font-size:.87rem;margin-bottom:10px}
.author p{color:var(--text-mid);font-size:18px;margin-bottom:12px}
.author a{color:var(--gold);font-size:18px;border-bottom:1px solid var(--gold-line);padding-bottom:1px}

/* ---------- ПЕРЕХОД К СОСЕДНИМ МАТЕРИАЛАМ ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Блок постраничной навигации живёт в base.css, а не в page-feed.css:
   его подключают и лента статей, и хаб сочетаний, а по правилам
   check-classes.py класс обязан быть описан в файле, который страница
   действительно грузит. Стили перенесены сюда 04.09.2026 без изменений. */
/* ПАГИНАЦИЯ: обычные ссылки, каждая страница доступна поисковику */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:38px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-small);
  border:1px solid var(--line);background:var(--surface);font-size:.95rem;color:var(--text-mid);
  transition:border-color .2s,color .2s}
.pagination a:hover{border-color:var(--gold-line);color:var(--gold)}
.pagination [aria-current]{background:var(--gold-soft);border-color:var(--gold-line);
  color:var(--gold);font-weight:600}
.pagination .gap{border:0;background:none;color:var(--text-low);min-width:20px;padding:0}
/* Шаги назад и вперёд шире номеров: это основной способ листать раздел,
   номера нужны тому, кто прыгает через страницу. */
.pagination .nav-next,.pagination .nav-prev{padding:0 20px;gap:8px}

.pg{display:block;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);transition:border-color .2s}
.pg:hover{border-color:var(--gold-line)}
.pg small{display:block;color:var(--text-low);font-size:.8rem;margin-bottom:4px}
.pg b{font-weight:500;font-size:18px}
.pg-next{text-align:right}

/* ---------- ПОДВАЛ ---------- */
.foot{background:var(--bg-deep);color:#c3cad8;padding:50px 0 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.foot h4{font-family:var(--font-text);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7d879a;margin:0 0 13px}
.foot a{display:block;padding:5px 0;color:#b3bccc;font-size:.91rem;transition:color .18s}
.foot a:hover{color:var(--gold)}
.foot .brand .logo{color:#f2f3f7}
.foot-about{color:#98a2b3;font-size:.89rem;margin-top:12px;max-width:32ch}
.foot-note{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);color:#7d879a;
  font-size:.81rem;line-height:1.6;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-note p{max-width:76ch;color:#7d879a}

/* Сквозной блок бота: одинаковый на всех страницах, включается флагом */
.foot-cta{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;
  padding:28px 32px;margin-bottom:46px;border:1px solid var(--gold-line);border-radius:var(--r-card);
  background:linear-gradient(115deg,rgba(212,162,76,.13),rgba(212,162,76,.04) 58%,transparent);
}
.foot-cta-mark{width:52px;height:52px;border-radius:var(--r-pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-line);background:rgba(212,162,76,.12);color:var(--gold)}
.foot-cta h3{font-family:var(--font-display);font-weight:500;font-size:22px;color:#f2f3f7;margin-bottom:4px}
.foot-cta p{color:#a9b2c2;font-size:.92rem}
.foot-cta .btn{flex:none;padding:15px 30px;font-size:17px}

/* Врезка бота внутри материала. Отличается от подвального блока
   тем, что стоит в потоке текста: поэтому без иконки, скромнее фон
   и кнопка не растягивает строку на узком экране. */
.inline-cta{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;
  padding:26px 30px;border:1px solid var(--gold-line);border-radius:var(--r-card);
  background:linear-gradient(115deg,rgba(212,162,76,.10),rgba(212,162,76,.03) 60%,transparent);
}
.inline-cta h3{font-family:var(--font-display);font-weight:500;font-size:22px;margin-bottom:6px}
.inline-cta p{color:var(--text-mid);font-size:18px;max-width:62ch;margin:0}
.inline-cta .btn{flex:none;white-space:nowrap}
/* На узком экране длинная надпись на кнопке не должна распирать страницу:
   при кегле 17px и nowrap блок партнёра уезжал за правый край на 113px.
   Найдено замером 19.08.2026. */
@media (max-width:560px){
  a.btn,button.btn{white-space:normal;text-align:center;max-width:100%}
}
@media (max-width:720px){
  .inline-cta{grid-template-columns:1fr;gap:18px;padding:22px}
  .inline-cta .btn{width:100%;text-align:center}
}

/* ---------- ПОЯВЛЕНИЕ СЕКЦИЙ ----------
   Анимация мотивированная: помогает считывать длинную страницу порциями.
   Отключается системной настройкой. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .band{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
    @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

/* ---------- АДАПТИВ ---------- */
@media (max-width:1100px){
  .related{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .brand small{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .mob-btn{display:inline-flex;margin-left:auto}
  .strip-in{gap:14px;font-size:.76rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-cta{grid-template-columns:auto 1fr;gap:18px}
  .foot-cta .btn{grid-column:1/-1;width:100%}
  /* Раскрывающееся меню на чекбоксе: без JS */
  .mob-toggle:checked ~ .mob-panel{display:block}
  .mob-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg-pale);
    border-bottom:1px solid var(--line);padding:18px 24px 26px;
    max-height:74vh;overflow-y:auto;box-shadow:0 26px 50px rgba(0,0,0,.35)}
  /* Строка раздела: слева ссылка на сам раздел, справа раскрытие подразделов.
     Оба действия доступны отдельно, ссылка не перехватывается раскрытием. */
  .mob-row{display:flex;align-items:center;flex-wrap:wrap;position:relative;
    border-bottom:1px solid var(--line)}
  .mob-row>a{flex:1;display:block;padding:13px 0;color:var(--text-hi);font-size:1.02rem}
  .mob-row details{width:100%;order:2}
  .mob-row summary{list-style:none;cursor:pointer;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:0}
  .mob-row summary::-webkit-details-marker{display:none}
  .mob-row summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--gold);
    border-bottom:2px solid var(--gold);transform:translateY(-2px) rotate(45deg);transition:transform .22s}
  .mob-row details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .mob-sub{padding:2px 0 12px 14px;border-left:2px solid var(--gold-line);margin:0 0 10px}
  .mob-sub a{display:block;padding:8px 0;color:var(--text-mid);font-size:.95rem}
  .mob-sub a:hover{color:var(--gold)}
}
@media (max-width:820px){
  .toc ol{columns:1}
  .offer{grid-template-columns:1fr}
  .author{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pg-next{text-align:left}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  /* В строку символики на узком экране помещается только два элемента.
     Дата уходит первой: она наименее полезна, а лунный день и карта дня
     дают и смысл, и переход вглубь сайта. */
  .strip-date{display:none}
  .related{grid-template-columns:1fr}
  .btn{width:100%}
  .definition{padding:16px 18px;font-size:21px}
  .foot-note{flex-direction:column;gap:12px}
}

/* ============================================================
   ОБЩИЕ КОМПОНЕНТЫ НЕСКОЛЬКИХ ТИПОВ СТРАНИЦ.
   Лежат здесь, а не в файле одного типа: пока таблица позиций
   расклада была описана только в page-card-aspect.css, на странице
   карты она выводилась без оформления. Найдено 19.08.2026
   скриптом tools/check-classes.py.
   ============================================================ */
/* Значение в позициях расклада: связка с типом «расклад».
   Такой контент нельзя получить копированием страницы карты. */
.slots{width:100%;border-collapse:collapse;font-size:18px}
.slots caption{text-align:left;color:var(--text-low);font-size:.86rem;padding-bottom:12px}
.slots th{text-align:left;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-low);padding:0 16px 12px 0;border-bottom:1px solid var(--line)}
.slots td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--text-mid);vertical-align:top}
.slots tr:last-child td{border-bottom:0}
.slots td:first-child{width:230px;color:var(--text-hi)}

/* Шапка страницы разреза и страницы сочетаний. */
.aspect-hero{padding:26px 0 var(--step)}

/* --- Иллюстрация в шапке страницы ------------------------------------------
   Шапки разных типов называются по-разному (.aspect-hero, .hub-hero,
   .spread-hero, .sphere-hero), но ведут себя одинаково: фон из переменной
   --hero-img, поверх - затемнение, текст выше обоих слоёв.
   Переменную ставит шаблон, и только если файл иллюстрации существует:
   нет файла - нет переменной, шапка выглядит как раньше.

   Затемнение то же, что у раскладов: слева, под текстом, плотно, справа
   кадр читается. Настройку проверять на самой светлой обложке раздела. */
.aspect-hero, .hub-hero{position:relative;overflow:hidden}
.aspect-hero::before, .hub-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img, none);background-size:cover;background-position:center}
.aspect-hero::after, .hub-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--bg-base) 52%,var(--hero-veil-1) 78%,var(--hero-veil-2))}
.aspect-hero > *, .hub-hero > *{position:relative;z-index:2}

/* Обложка сверху для шаблонов без секции-шапки: раздел Ленормана,
   служебные страницы, уроки. Там текст начинается сразу, фон подложить
   некуда - картинка ставится обычным блоком.

   Высота ограничена 24.08.2026. Было `height:auto`, и кадр 1280x720
   разворачивался на всю ширину колонки - около 670 пикселей высотой.
   Первый экран занимала одна картинка, а заголовок раздела уходил
   за сгиб: человек попадал на страницу и не видел, куда попал.
   Найдено заказчиком на хабе Ленормана; те же три шаблона - уроки
   и служебные страницы - вели себя так же.

   Пропорция 21:9 выбрана не на глаз: шапки остальных типов вместе
   с заголовком и вводкой занимают 240-300 пикселей, и обложка должна
   быть им соразмерна, а не втрое выше. */
/* Врезка с ситуацией примера. Жила в page-spread.css, пока пример
   с живой ситуацией был только у раскладов; 25.08.2026 такой же появился
   у карт, а их шаблон page-spread.css не подключает. Второе определение
   того же класса разошлось бы с первым при первой правке. */
.story{border-left:3px solid var(--gold);background:var(--gold-soft);
  border-radius:0 var(--r-small) var(--r-small) 0;padding:22px 26px;max-width:var(--read);margin-bottom:26px}
.story p{color:var(--text-hi)}

.hero-pic{display:block;width:100%;aspect-ratio:21/9;max-height:340px;object-fit:cover;
  border-radius:var(--r-card);margin:0}
@media (max-width:760px){
  /* На телефоне широкая полоса вырождается в щель: пропорция мягче. */
  .hero-pic{aspect-ratio:16/9;max-height:none}
}

/* Границы метода: постоянная строка под материалом.
   Тише основного текста, но не мельче читаемого - правило портала
   требует границы проговаривать, а не прятать. Полоса слева такая же,
   как у оговорки о неназначенном итоге: это один и тот же вид сноски. */
.granica-band{padding-top:26px;padding-bottom:26px}
.granica-note{max-width:var(--read);margin:0 auto;
  border-left:2px solid var(--gold-line);padding:2px 0 2px 16px;
  color:var(--text-mid);font-size:.94rem;line-height:1.5}