/*
Theme Name: Астролябия
Theme URI: https://orakulum.ru/
Author: Оракул
Description: Тема для orakulum.ru. Тёмный нефтяной тон, оксидная медь, астролябия с реальным положением светил. Работает в паре с плагином «Оракул» (типы записей, таксономии, память).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: astrolabe
Tags: dark, custom-colors, custom-menu, featured-images, translation-ready
*/

/* Шрифт логотипа — старославянская вязь (Ruslan Display).
   Обрезан до латиницы, кириллицы и знаков препинания: 9,8 КБ вместо 55 КБ.
   Стоит только на слове «Оракул» в шапке и подвале, остальной текст не затронут. */
@font-face {
	font-family: 'Ruslan Display';
	src: url('assets/fonts/ruslan-display.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   0. ОБЩИЕ ТОКЕНЫ (перенесены из home.css)
   ============================================================
   Палитра, геометрия, шрифт и темп анимаций — одни на весь сайт:
   шапка, подвал и внутренние страницы берут те же переменные, что и главная.
   home.css подключается только на главной, поэтому раньше этих переменных
   на остальных страницах просто не существовало.
   ============================================================ */
:root {
	/* Фоны */
	--or-bg:            #010817;
	--or-bg-2:          #020d1b;
	--or-header:        #030e1c;
	--or-header-2:      #091428;
	--or-card:          #03101f;
	--or-banner:        #020e1c;
	--or-footer:        #041121;
	--or-tag:           #081a31;

	/* Линии */
	--or-line:          #222f47;
	--or-line-strong:   #1c2d4e;
	--or-line-soft:     #33415c;

	/* Акцент */
	--or-accent:        #5c5df5;
	--or-accent-2:      #8f77ee;
	--or-accent-3:      #c5bdfc;

	/* Текст */
	--or-text:          #f5f5f6;
	--or-text-strong:   #ffffff;
	--or-muted:         #8e9ab1;
	--or-muted-2:       #93a0b8;

	/* Геометрия */
	--or-radius:        16px;
	--or-radius-sm:     10px;
	--or-pill:          999px;
	--or-wrap:          1200px;
	--or-gap:           18px;

	/* Типографика: весь текст макета без засечек */
	--or-font: "Inter", "Onest", "Golos Text", -apple-system, BlinkMacSystemFont,
	           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Движение. Скорость одна на весь интерфейс, чтобы анимации не спорили */
	--or-motion:        0.45s;
	--or-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */
:root{
  /* Старые имена переназначены на новую палитру главной. Так 485 контентных
     страниц переезжают на общую тему без переписывания разметки: их правила
     используют эти переменные напрямую. */
  --ink:       var(--or-bg);         /* фон страницы   #010817 */
  --ink-2:     var(--or-bg-2);       /* фон блоков     #020d1b */
  --ink-3:     var(--or-card);       /* фон карточек   #03101f */
  --bone:      var(--or-text);       /* основной текст #f5f5f6 */
  --bone-dim:  var(--or-muted);      /* вторичный текст */
  --copper:    var(--or-accent-2);   /* акцент         #8f77ee */
  --copper-hi: var(--or-accent-3);   /* акцент светлый #c5bdfc */
  --verdigris: var(--or-accent);     /* акцент тёмный  #5c5df5 */
  --rule:      var(--or-line);       /* линии          #222f47 */
  --rule-lit:  var(--or-line-soft);  /* линии светлее  #33415c */
  --danger:    #e2674f;              /* предупреждение: оставлен тёплым */

  /* Эти имена я снёс вместе со старой палитрой, а на них держалась раскладка:
     --gut держит боковой отступ (на него опираются 16 правил), --wrap — ширину
     полосы. Без них отступ на внутренних страницах становился нулевым.
     Оба равны контейнеру главной, поэтому текст внутренних страниц начинается
     там же, где логотип в шапке. */
  --gut:   24px;
  --wrap:  var(--or-wrap);

  /* Мелочи, которые тоже жили в старом :root. */
  --accent: var(--or-accent-2);   /* старый акцент → акцент главной */
  --ease:   var(--or-ease);       /* темп анимаций — как на главной */
  --i:      0;                    /* счётчик в списках */
  --len:    1;                    /* сколько всего в списке */
  --lx:     30%;                  /* блик на карте: по умолчанию слева сверху */
  --ly:     20%;

  /* Типографика: в макете главной весь текст без засечек, поэтому старые
     имена шрифтов тоже ведут на общий. */
  --display: var(--or-font);
  --text:    var(--or-font);


*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); scroll-behavior:smooth; }

body{
  margin:0;
  /* Свечение прежней темы (бирюзовое) заменено на акцент главной. */
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(92, 93, 245, 0.12) 0%, transparent 58%),
    var(--ink);
  background-attachment:fixed;
  color:var(--bone);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

/* зерно поверх фона: убирает «пластик» */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9; opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ============================================================
   2. БАЗА
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--display); font-weight:600;
  letter-spacing:-0.02em; line-height:1.15;
  margin:0 0 .7em; text-wrap:balance;
}
h1{ font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:-0.03em; line-height:1.05; }
h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
h4{ font-size:1.15rem; }

p{ margin:0 0 1.2em; }
a{ color:var(--copper); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--copper-hi); }
strong,b{ font-weight:600; color:var(--bone); }
em,i{ font-style:italic; }
small{ font-size:.85rem; color:var(--bone-dim); }
hr{ border:0; border-top:1px solid var(--rule); margin:2.5rem 0; }

::selection{ background:var(--copper); color:oklch(0.18 0.03 248); }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px; }

img,svg,video{ max-width:100%; height:auto; }
figure{ margin:0 0 1.5rem; }
figcaption{ font-size:.85rem; color:var(--rule-lit); margin-top:.5rem; }

blockquote{
  margin:2rem 0; padding:0 0 0 1.5rem;
  border-left:1px solid var(--copper);
  font-family:var(--display); font-size:1.2rem; font-style:italic;
  color:var(--bone);
}
blockquote cite{ display:block; margin-top:.6rem; font-size:.85rem; font-style:normal; color:var(--bone-dim); }

code,kbd,pre{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.92em;
  background:var(--ink-2); color:var(--verdigris);
  border-radius:2px;
}
code{ padding:.12em .4em; }
pre{ padding:1.2rem; overflow:auto; border:1px solid var(--rule); }

table{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.95rem; }
caption{ text-align:left; font-size:.85rem; color:var(--rule-lit); padding-bottom:.5rem; }
th,td{ padding:.6rem .8rem; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
th{ color:var(--bone); font-weight:600; font-family:var(--display); }
tbody tr:hover{ background:rgba(92, 93, 245, .16); }

input,select,textarea,button{ font:inherit; color:inherit; }
input[type=text],input[type=email],input[type=search],input[type=url],input[type=password],textarea,select{
  width:100%; padding:.75rem 1rem;
  background:var(--ink-2); color:var(--bone);
  border:1px solid var(--rule); border-radius:2px;
  transition:border-color 140ms ease-out;
}
input:focus,textarea:focus,select:focus{ border-color:var(--copper); outline:none; }
::placeholder{ color:var(--rule-lit); }

/* ============================================================
   3. УТИЛИТЫ
   ============================================================ */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:fixed; top:1rem; left:1rem; z-index:100;
  width:auto; height:auto; clip:auto; padding:.8rem 1.2rem;
  background:var(--copper); color:oklch(0.18 0.03 248);
  font-weight:600; border-radius:2px;
}
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.tabnum{ font-variant-numeric:tabular-nums; }

.btn{
  display:inline-block; font-size:.98rem; font-weight:600;
  padding:.9rem 1.7rem;
  background:var(--copper); color:oklch(0.18 0.03 248);
  border:0; border-radius:2px; cursor:pointer; text-decoration:none;
  transition:transform 120ms ease-out, background-color 120ms ease-out;
}
.btn:hover{ background:var(--copper-hi); color:oklch(0.18 0.03 248); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.quiet{
  color:var(--bone-dim); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:color 140ms ease-out, border-color 140ms ease-out;
}
.quiet:hover{ color:var(--bone); border-color:var(--copper); }

.kicker{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--verdigris); margin:0 0 1.2rem;
}

.breadcrumbs{
  font-size:.82rem; letter-spacing:.06em; color:var(--rule-lit);
  padding:1.2rem 0; font-variant-numeric:tabular-nums;
}
.breadcrumbs a{ color:var(--bone-dim); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--copper); }
.breadcrumbs .sep{ opacity:.5; margin:0 .5rem; }

/* ============================================================
   4. ВЕРХНИЙ РЕЙЛ
   ============================================================ */
.rail{
  width:100%;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--gut);
  border-bottom:1px solid var(--rule);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim);
  position:sticky; top:0; z-index:40;
  background:oklch(0.22 0.045 248 / .86);
  backdrop-filter:blur(8px);
}
.rail .mark{
  font-family:var(--display); font-size:1.05rem; font-weight:600;
  letter-spacing:.34em; color:var(--bone); text-transform:uppercase;
  text-decoration:none; flex:none;
}
.rail .mark:hover{ color:var(--copper); }
.rail .sky{
  font-variant-numeric:tabular-nums; color:var(--verdigris);
  border-left:1px solid var(--rule);
  padding-left:clamp(.9rem,2vw,1.6rem);
  white-space:nowrap;
}
.rail-menu{ display:flex; gap:clamp(.9rem,2vw,1.6rem); margin-left:auto; }
.rail-menu ul{ display:flex; gap:clamp(.9rem,2vw,1.6rem); list-style:none; margin:0; padding:0; }
.rail-menu a{ color:var(--bone-dim); text-decoration:none; transition:color 140ms ease-out; }
.rail-menu a:hover,.rail-menu .current-menu-item > a{ color:var(--copper); }
.rail-menu .sub-menu{ display:none; }
.rail-toggle{ display:none; }

@media (max-width:900px){
  .rail-menu{ display:none; }
  .rail-toggle{
    display:block; margin-left:auto; background:none; border:0; cursor:pointer;
    color:var(--bone); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .rail-menu.open{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:oklch(0.22 0.045 248 / .98); border-bottom:1px solid var(--rule);
    padding:1rem var(--gut);
  }
  .rail-menu.open ul{ flex-direction:column; gap:1rem; }
}
@media (max-width:620px){ .rail .sky{ display:none; } }

/* ============================================================
   5. ГЕРОЙ
   ============================================================ */
.hero{
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
  min-height:min(88vh,900px);
  padding:clamp(3rem,7vh,6rem) 0 clamp(3rem,7vh,6rem) var(--gut);
  position:relative;
}
.hero-copy{ grid-column:1 / span 5; position:relative; z-index:3; max-width:34ch; }
.hero-copy h1{ font-size:clamp(2.6rem,6.4vw,5.4rem); line-height:1.02; letter-spacing:-0.03em; margin:0 0 1.5rem; }
.hero-copy h1 em{ font-style:italic; font-weight:400; color:var(--copper); }
.lede{ color:var(--bone-dim); font-size:1.125rem; margin:0 0 2.2rem; max-width:32ch; }
.actions{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; }

.instrument{
  grid-column:6 / span 7; justify-self:start;
  width:min(74vw,760px);
  margin-right:calc(-1 * var(--gut) - 4vw);
  position:relative;
}
.instrument svg{ width:100%; height:auto; display:block; overflow:visible; }
.instrument .ring{ fill:none; stroke:var(--rule); }
.instrument .ring-major{ stroke:oklch(0.46 0.04 248); }
.instrument .tick{ stroke:var(--rule); }
.instrument .tick-major{ stroke:oklch(0.5 0.04 248); }
.instrument .axis{ stroke:oklch(0.42 0.035 248); stroke-dasharray:3 7; }
.instrument text{
  font-family:var(--text); font-size:15px; letter-spacing:.16em;
  fill:var(--bone-dim); text-transform:uppercase;
}
.instrument .deg{ font-size:12px; fill:var(--rule-lit); letter-spacing:.06em; }
.instrument .sun{ fill:var(--copper); }
.instrument .moon{ fill:var(--bone); }
.instrument .marker-label{ fill:var(--bone); font-size:13px; letter-spacing:.02em; }
.instrument .rotor{ transform-origin:400px 400px; }
.readout{
  margin-top:1.5rem; display:flex; gap:2rem; flex-wrap:wrap;
  font-variant-numeric:tabular-nums; font-size:.85rem;
  color:var(--bone-dim); letter-spacing:.04em;
}
.readout b{ color:var(--bone); font-weight:500; }
.readout span{ display:flex; gap:.5rem; }

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-inline:var(--gut); gap:2.5rem; min-height:0; }
  .hero-copy{ grid-column:1; max-width:none; }
  .instrument{ grid-column:1; justify-self:center; width:min(92vw,560px); margin-right:0; }
}

/* ============================================================
   6. ПРАКТИКИ: список с гравированными линейками
   ============================================================ */
.practices{ padding:clamp(4rem,10vh,8rem) var(--gut); }
.practices h2{ margin:0 0 .8rem; max-width:22ch; }
.practices .sub{ color:var(--bone-dim); margin:0 0 3.5rem; max-width:56ch; }
.list{ border-top:1px solid var(--rule); }
.row{
  display:grid; grid-template-columns:3.5rem minmax(10rem,20rem) 1fr auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:baseline;
  padding:1.75rem 0; border-bottom:1px solid var(--rule);
  position:relative; text-decoration:none; color:inherit;
}
.row::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--copper); transform:scaleX(0); transform-origin:left;
  transition:transform 500ms var(--ease);
}
.row:hover::after{ transform:scaleX(1); }
.row .num{ font-family:var(--display); font-size:1rem; color:var(--verdigris); font-variant-numeric:tabular-nums; }
.row .name{ font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.9rem); letter-spacing:-0.015em; }
.row .desc{ color:var(--bone-dim); font-size:.98rem; max-width:52ch; }
.row .meta{ font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--rule-lit); white-space:nowrap; }
@media (max-width:860px){
  .row{ grid-template-columns:2.5rem 1fr; row-gap:.4rem; }
  .row .desc{ grid-column:2; }
  .row .meta{ grid-column:2; }
}

/* ============================================================
   7. КАРТА ДНЯ
   ============================================================ */
.cardday{
  padding:clamp(4rem,10vh,8rem) var(--gut) clamp(5rem,12vh,9rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.cardday h2{ margin:0 0 1rem; max-width:20ch; }
.cardday p{ color:var(--bone-dim); max-width:54ch; margin:0 0 1.2rem; }
.card-wrap{ perspective:1200px; justify-self:center; }
.card{
  width:min(78vw,340px); aspect-ratio:5/8;
  position:relative; transform-style:preserve-3d;
  transition:transform 420ms var(--ease);
  will-change:transform;
}
.card .face{
  position:absolute; inset:0; border-radius:3px;
  border:1px solid oklch(0.5 0.05 248);
  background:
    radial-gradient(70% 55% at var(--lx,30%) var(--ly,20%), oklch(0.42 0.06 248) 0%, transparent 65%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.4rem; overflow:hidden;
}
.card .face::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(38% 30% at var(--lx,30%) var(--ly,20%), oklch(1 0 248 / .16), transparent 70%);
  transition:opacity 260ms ease-out;
}
.card .corner{ font-family:var(--display); font-size:1.1rem; color:var(--copper); letter-spacing:.12em; }
.card .glyph{ flex:1; display:grid; place-items:center; }
.card .glyph svg{ width:56%; height:auto; opacity:.92; }
.card .title{ font-family:var(--display); font-size:1.15rem; letter-spacing:.05em; text-align:center; color:var(--bone); }
.card .flip{ font-size:.85rem; color:var(--rule-lit); text-align:center; margin-top:.4rem; }
.card-note{ margin-top:1.75rem; font-size:.88rem; color:var(--rule-lit); text-align:center; }
@media (max-width:860px){ .cardday{ grid-template-columns:1fr; } }

/* ============================================================
   8. СТАТЬИ И КОНТЕНТ
   ============================================================ */
.entry{ padding:clamp(2.5rem,6vh,5rem) var(--gut); }
.entry-header{ max-width:62ch; margin-bottom:2rem; }
.entry-header h1{ margin-bottom:.6rem; }
.entry-meta{
  font-size:.82rem; letter-spacing:.06em; color:var(--rule-lit);
  font-variant-numeric:tabular-nums; text-transform:uppercase;
}
.entry-content{ max-width:68ch; font-size:1.08rem; }
.entry-content > *{ margin-bottom:1.2em; }
.entry-content h2{ margin-top:1.2em; padding-top:.6em; margin-bottom:.6em; border-top:1px solid var(--rule); }
.entry-content h3{ margin-top:1.8em; color:var(--bone); }
.entry-content ul,.entry-content ol{ padding-left:1.4rem; }
.entry-content li{ margin-bottom:.5em; }
.entry-content li::marker{ color:var(--copper); }
.entry-content a{ color:var(--copper); }

.lede-large{ font-family:var(--display); font-size:1.25rem; color:var(--bone-dim); margin-bottom:2rem; }

/* ============================================================
   9. СТРАНИЦА КАРТЫ ТАРО
   ============================================================ */
.card-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px);
  gap:clamp(2rem,6vw,4.5rem); align-items:start;
  padding:clamp(2rem,5vh,4rem) var(--gut); border-bottom:1px solid var(--rule);
}
@media (max-width:860px){ .card-hero{ grid-template-columns:1fr; } }

.card-visual{
  perspective:1200px; justify-self:center;
}
.card-visual .card{ width:min(70vw,300px); }

.spec{
  border-top:1px solid var(--rule); margin:2rem 0 0; padding:0; list-style:none;
  font-size:.92rem;
}
.spec li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--rule);
}
.spec .k{ color:var(--rule-lit); letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.spec .v{ color:var(--bone); text-align:right; font-variant-numeric:tabular-nums; }

.kw-block{ margin:2.5rem 0; }
.kw-block h2{ font-size:1.2rem; margin-bottom:1rem; }
.kw-list{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; padding:0; margin:0; }
.kw-list li, .kw-list a{
  display:inline-block; padding:.4rem .9rem;
  border:1px solid var(--rule); border-radius:2px;
  font-size:.88rem; color:var(--bone-dim); text-decoration:none;
  transition:border-color 140ms ease-out, color 140ms ease-out;
}
.kw-list a:hover{ border-color:var(--copper); color:var(--bone); }
.kw-upright li{ border-color:oklch(0.45 0.06 248); color:oklch(0.78 0.05 248); }
.kw-reversed li{ border-color:oklch(0.45 0.05 248); color:oklch(0.76 0.05 248); }

/* ============================================================
   10. АРХИВ И СЕТКА КАРТ
   ============================================================ */
.archive-header{ padding:clamp(2.5rem,6vh,4.5rem) var(--gut) 0; max-width:70ch; }
.archive-header p{ color:var(--bone-dim); }

.card-grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border-top:1px solid var(--rule);
  margin-top:2.5rem;
}
.card-grid .item{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.4rem 1.2rem; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  position:relative; transition:background 200ms ease-out;
}
.card-grid .item:hover{ background:rgba(92, 93, 245, .16); }
.card-grid .num{
  font-family:var(--display); font-size:.8rem; letter-spacing:.16em;
  color:var(--verdigris); font-variant-numeric:tabular-nums;
}
.card-grid .name{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  letter-spacing:-0.01em; color:var(--bone);
}
.card-grid .hint{ font-size:.85rem; color:var(--rule-lit); margin-top:auto; }

.term-groups{ padding:0 var(--gut) clamp(3rem,8vh,6rem); }
.term-groups h2{ margin-top:3rem; }
.term-list{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0; }
.term-list a{
  display:inline-block; padding:.45rem 1rem; border:1px solid var(--rule);
  border-radius:2px; font-size:.9rem; color:var(--bone-dim); text-decoration:none;
  transition:border-color 140ms ease-out,color 140ms ease-out;
}
.term-list a:hover{ border-color:var(--copper); color:var(--bone); }
.term-list .count{ color:var(--rule-lit); font-size:.8rem; margin-left:.4rem; font-variant-numeric:tabular-nums; }

/* ============================================================
   11. ПАГИНАЦИЯ, ПОИСК, ОШИБКИ
   ============================================================ */
.pagination{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  padding:2.5rem var(--gut) 4rem; font-variant-numeric:tabular-nums;
}
.pagination .page-numbers{
  display:inline-block; min-width:2.4rem; text-align:center;
  padding:.5rem .7rem; border:1px solid var(--rule); border-radius:2px;
  color:var(--bone-dim); text-decoration:none; font-size:.92rem;
  transition:border-color 140ms ease-out,color 140ms ease-out;
}
.pagination .page-numbers:hover{ border-color:var(--copper); color:var(--bone); }
.pagination .page-numbers.current{ background:var(--copper); color:oklch(0.18 0.03 248); border-color:var(--copper); font-weight:600; }

.search-form{ display:flex; gap:.6rem; max-width:560px; margin:1.5rem 0 2.5rem; }
.search-form input[type=search]{ flex:1; }

.notfound{ padding:clamp(3rem,10vh,7rem) var(--gut); max-width:60ch; }
.notfound .digits{ font-family:var(--display); font-size:clamp(4rem,14vw,9rem); color:var(--rule); line-height:1; margin:0; }

/* ============================================================
   12. РУНЫ
   ============================================================ */
.rune-glyph{ font-size:3.5rem; line-height:1; }
.card-visual .glyph.rune-glyph{
  font-size:clamp(4rem,14vw,7rem); color:var(--copper);
  font-family:"Segoe UI Symbol","Noto Sans Runic",var(--display);
}
.card-visual .glyph.rune-glyph svg{ width:auto; }

/* Горизонтальный отступ именно `auto`, а не 0.
   Сетка рун и знаков зодиака — прямой ребёнок main, и её margin из этого
   правила перебивал `margin-inline:auto` из `body:not(.home) main > *`,
   поэтому сетка прижималась к левому краю. Причина — незакрытый `:root{`
   выше по файлу: правило попадает внутрь него (браузер показывает его как
   `& .rune-grid`) и получает лишний вес. Замер до правки: сетка слева 0,
   первая карточка от 24 вместо 144, тогда как заголовок стоит на 144.
   По той же причине здесь задан и нижний отступ: правило с
   `padding-bottom` (тоже не вложенное) перебивалось этим же `padding: 0`,
   и воздух под сеткой был нулевым. Воздух взят по образцу /taro/ — там под
   сеткой 88 px (5.5rem), видимый просвет до подвала 146 px с его отступом.
   Замер до правки: просвет 0 + 58 px подвала. */
.rune-grid{
  display:grid; gap:1px; list-style:none; padding:0; margin:2.5rem auto 5.5rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  border-top:1px solid var(--rule);
}
.rune-grid li{ margin:0; }
.rune-item{
  display:flex; flex-direction:column; gap:.35rem; height:100%;
  padding:1.6rem 1.2rem; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  transition:background 200ms ease-out;
}
.rune-item:hover{ background:rgba(92, 93, 245, .16); }
.rune-char{
  font-family:"Segoe UI Symbol","Noto Sans Runic",var(--display);
  font-size:2.6rem; line-height:1; color:var(--copper);
  margin-bottom:.3rem;
}
.rune-name{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--bone); letter-spacing:-0.01em;
}
.rune-short{ font-size:.85rem; color:var(--rule-lit); line-height:1.45; }

.sign-glyph{ display:block; height:4.4rem; margin-bottom:.3rem; }
.sign-glyph svg{ height:100%; width:auto; }

.combo-list{ margin:1.5rem 0; }
.combo-list dt{
  font-family:var(--display); font-weight:600; color:var(--bone);
  padding-top:1rem; border-top:1px solid var(--rule); font-size:1.05rem;
}
.combo-list dt:first-child{ border-top:0; padding-top:0; }
.combo-list dd{ margin:.35rem 0 0; color:var(--bone-dim); }

/* ============================================================
   12б. ЛУННЫЙ КАЛЕНДАРЬ
   ============================================================ */
.table-wrap{ overflow-x:auto; margin:0 0 1.5rem; -webkit-overflow-scrolling:touch; }
.lunar-table{ min-width:520px; font-variant-numeric:tabular-nums; }
.lunar-table th{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rule-lit); border-bottom:1px solid var(--rule);
}
.lunar-table td{ border-bottom:1px solid oklch(0.30 0.03 248); }
.lunar-table .num{ text-align:right; color:var(--bone); white-space:nowrap; }
.lunar-table .wd{ color:var(--bone-dim); font-size:.85rem; }
.lunar-table tr.row-new{ background:oklch(0.26 0.04 248 / .45); }
.lunar-table tr.row-new td{ border-bottom-color:oklch(0.42 0.05 248); }
.lunar-table tr.row-full{ background:oklch(0.28 0.045 248 / .35); }
.lunar-table tr.row-full td{ border-bottom-color:oklch(0.44 0.06 248); }
.lunar-table tr.row-quarter{ background:oklch(0.27 0.035 248 / .35); }

/* Блок «ближайшие дни» на странице календаря стрижек: карточка «сегодня» и таблица
   с освещённостью диска. Сама таблица — тот же .lunar-table, что на месячных
   страницах, поэтому её оформление наследуется, здесь только новое. */
.haircut-now{
  margin:0 0 1.6rem; padding:1.1rem 1.2rem 1.2rem;
  border:1px solid var(--rule); border-radius:2px;
  background:oklch(0.22 0.022 248 / .5);
}
.haircut-now__head{ margin:0 0 .7rem; font-size:1.05rem; }
.haircut-now__label{
  display:inline-block; margin-right:.5rem; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rule-lit);
}
.haircut-now__facts{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  margin:0 0 .7rem; padding:0; list-style:none; color:var(--bone-dim);
}
.haircut-now__why{ margin:0; color:var(--bone-dim); }
.haircut-table .haircut-illum{ white-space:nowrap; }
/* Шкала освещённости: у полосы своя дорожка фиксированной ширины, иначе процент
   считался бы от ширины ячейки и полосы разной длины не сравнивались бы между
   строками. */
.haircut-bar-track{
  display:inline-block; width:64px; height:6px; margin-right:.5rem;
  border-radius:3px; background:oklch(0.30 0.03 248 / .9);
  vertical-align:middle; overflow:hidden;
}
.haircut-bar{
  display:block; height:6px; border-radius:3px; background:var(--rule-lit);
}
.haircut-illum__num{ font-variant-numeric:tabular-nums; color:var(--bone-dim); }
.haircut-verdict{ white-space:nowrap; }
.haircut-verdict.is-otlichno{ color:oklch(0.84 0.10 152); }
.haircut-verdict.is-horosho{ color:oklch(0.82 0.08 195); }
.haircut-verdict.is-mozhno{ color:var(--bone); }
.haircut-verdict.is-neytralno{ color:var(--bone-dim); }
.haircut-verdict.is-ne-strich{ color:oklch(0.74 0.11 28); }
.haircut-note{ margin:1rem 0 0; color:var(--bone-dim); }

/* Блок «Проверить другую дату»: та же панель, что карточка «Сегодня», плюс строка
   с выбором даты. Поля берут общий вид через .date-pick, поэтому здесь только
   расположение. */
.haircut-pick{
  margin:0 0 1.6rem; padding:1.1rem 1.2rem 1.2rem;
  border:1px solid var(--rule); border-radius:2px;
  background:oklch(0.20 0.02 248 / .45);
}
.haircut-pick__lead{ margin:0 0 .9rem; color:var(--bone-dim); }
.haircut-pick__row{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:flex-end; }
.haircut-field{ display:block; flex:1 1 320px; max-width:420px; }
.haircut-field span{ display:block; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rule-lit); margin-bottom:.4rem; }
.haircut-pick .haircut-go{ flex:0 0 auto; white-space:nowrap; }
.haircut-pick-out:empty{ display:none; }
.haircut-pick-out{ margin-top:1.1rem; }
.haircut-pick__state{ margin:0; color:var(--bone-dim); }
.haircut-now--picked{ margin:0; background:oklch(0.24 0.025 248 / .55); }
@media (max-width:620px){
  .haircut-bar-track{ width:44px; }
  .haircut-now__facts{ gap:.3rem 1.1rem; }
}

/* Гороскоп на сегодня: список знаков */
.horoscope-list{ display:grid; gap:1.75rem; }
.horoscope-sign{
  border-left:2px solid var(--rule);
  padding:0 0 0 1.1rem;
}
.horoscope-sign h2{
  margin:.35rem 0 .6rem;
  font-size:1.15rem;
  letter-spacing:.02em;
}
.horoscope-sign p{ margin:.5rem 0; }
.horoscope-today{ margin-top:1.6rem; }
.horoscope-today h3{
  margin:1.5rem 0 .6rem;
  font-size:1rem;
  color:var(--rule-lit);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ============================================================
   12в. ГАДАНИЕ: КАРТЫ И РАСКЛАДЫ
   ============================================================ */
.gadanie{
  border:1px solid var(--rule);
  border-radius:2px;
  padding:1.5rem 1.35rem 1.2rem;
  background:oklch(0.22 0.022 248 / .5);
  margin:0 0 2rem;
}
.gadanie-hint{ margin:0 0 .9rem; color:var(--bone-dim); }
/* Блок расклада стоит первым в тексте, сразу под H1 — даём ему воздух сверху. */
.entry-content > .gadanie { margin-top: 1.4rem; }

.gadanie-q{ display:block; margin:0 0 1.1rem; }
.gadanie-q span{
  display:block; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rule-lit); margin-bottom:.4rem;
}
.gadanie-q em{ text-transform:none; letter-spacing:0; color:var(--bone-dim); font-style:normal; }
.gadanie-question{
  width:100%; padding:.6rem .7rem; font:inherit;
  color:var(--bone); background:oklch(0.19 0.02 248);
  border:1px solid var(--rule); border-radius:1px;
}
.gadanie-question:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.gadanie-go{ cursor:pointer; }
.gadanie-go[disabled]{ opacity:.55; cursor:progress; }

/* Кнопка стоит по центру под колодой: сама колода симметрична, и кнопка к
   ней. width:fit-content нужен, потому что блочный flex без ширины
   растянулся бы на всю полосу. Селектор из двух классов — чтобы перебить
   `display:inline-flex` из общего правила .btn ниже по файлу. */
.gadanie .gadanie-go{
  display:flex;
  width:fit-content;
  margin-inline:auto;
}

/* Колода между полем вопроса и кнопкой. Веер раскрывается и собирается —
   анимация чистым CSS, без скриптов. Рубашка взята из колоды РУС (та же,
   что у карт расклада), поэтому рамка и фон повторяют .tcard-back:
   1px #222f47, скругление 2px, подложка #0a1526.
   Размер карты тянется за шириной экрана: на телефоне 54px, на широком
   экране до 92px, шаг веера — 55% ширины карты (проверено в превью). */
.gadanie-deck{
  position:relative;
  --card-w:clamp(54px, 7vw, 92px);
  --card-h:calc(var(--card-w) * 5 / 3);
  --fan:calc(var(--card-w) * .55);
  --stack:calc(var(--card-w) * .022);
  height:calc(var(--card-h) + 46px);
  margin:22px 0 20px;
}
.gadanie-deck__glow{
  position:absolute; left:50%; bottom:0;
  width:calc(var(--card-w) * 3.4); height:calc(var(--card-h) * 1.05);
  margin-left:calc(var(--card-w) * -1.7);
  background:radial-gradient(ellipse at 50% 78%, rgba(92,93,245,.40), transparent 70%);
  filter:blur(5px);
}
.gadanie-deck i{
  position:absolute; left:50%; bottom:14px;
  width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2);
  border:1px solid var(--or-line, #222f47);
  /* Скругление вернули: в файле рубашки углы уже скруглены и прозрачны, и
     жёсткая рамка 2px их срезала. Радиус тянется за размером карты. */
  border-radius:calc(var(--card-w) * .09);
  background:#0a1526 url('assets/img/gadanie/deck-back.webp') center/cover no-repeat;
  box-shadow:0 10px 22px -14px #000;
  transform-origin:50% 100%;
  animation:or-deck-fan 4.4s cubic-bezier(.4,0,.2,1) infinite;
}
/* Именно nth-of-type: первым ребёнком идёт свечение, из-за nth-child верхняя
   карта оставалась без смещения --i и не двигалась (поймано замером). */
.gadanie-deck i:nth-of-type(1){ --i:0; z-index:1; }
.gadanie-deck i:nth-of-type(2){ --i:1; z-index:2; }
.gadanie-deck i:nth-of-type(3){ --i:2; z-index:3; }
.gadanie-deck i:nth-of-type(4){ --i:3; z-index:4; }
.gadanie-deck i:nth-of-type(5){ --i:4; z-index:5; }


@media (prefers-reduced-motion: reduce){
  .gadanie-deck i{ animation:none; }
}

.gadanie-stage{ margin-top:1.5rem; }
.gadanie-cards{
  display:flex; flex-wrap:wrap; gap:1rem;
  /* Карты встают по центру полосы, а не от левого края: колода и кнопка над
     ними уже симметричны, и расклад к ним. У «Кельтского креста» здесь
     display:grid со своими колонками (1129 из 1152) — там это же свойство
     центрирует сам крест. */
  justify-content:center;
  perspective:1100px; min-height:0;
}

/* Карта: 3D-переворот */
.tcard{
  /* 225px вместо 150px: на страницах раскладов просили карты на 50% крупнее. */
  flex:0 0 225px; width:225px;
  opacity:0; transform:translateY(14px) rotateY(0deg);
  transition:opacity .45s ease, transform .45s ease;
}
.tcard.is-dealt{ opacity:1; transform:translateY(0); }
.tcard-inner{
  position:relative; width:100%; aspect-ratio:2/3;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.75,.3,1);
}
.tcard.is-dealt .tcard-inner{ transform:rotateY(180deg); }
.tcard-face,
.tcard-back{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--rule-lit); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  padding:.6rem;
}
.tcard-back{
  background:
    repeating-linear-gradient(45deg,
      oklch(0.26 0.03 248 / .9) 0 6px,
      oklch(0.22 0.025 248 / .9) 6px 12px);
  color:var(--rule-lit); font-size:1.6rem;
}
.tcard-face{
  transform:rotateY(180deg);
  flex-direction:column; gap:.5rem; text-align:center;
  background:oklch(0.26 0.025 248);
}
.tcard.is-reversed .tcard-face{ transform:rotateY(180deg) rotate(180deg); }
.tcard-corner{
  position:absolute; top:.45rem; left:.55rem;
  font-size:.8rem; color:var(--rule-lit);
}
.tcard-name{
  font-size:.92rem; line-height:1.3; letter-spacing:.01em; color:var(--bone);
}
.tcard-mark{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:oklch(0.72 0.09 248);
}
.tcard-pos{
  margin:.55rem 0 0; font-size:.78rem; letter-spacing:.07em;
  text-transform:uppercase;
  /* was --rule-lit (#33415c): это цвет линий, для текста он давал 1,96:1 —
     подписи позиций почти не читались. --bone-dim даёт 6,8:1. */
  color:var(--bone-dim); text-align:center;
}

/* Результат */
.gadanie-result{ opacity:0; transition:opacity .5s ease; }
.gadanie-result.is-shown{ opacity:1; }
.gadanie-echo{ color:var(--bone-dim); margin:1.4rem 0 .8rem; }
.gadanie-answer{
  border-left:3px solid var(--rule-lit);
  padding:.9rem 0 .9rem 1.1rem; margin:1.4rem 0 1.2rem;
}
.gadanie-answer.is-yes{ border-left-color:oklch(0.68 0.12 248); }
.gadanie-answer.is-no{ border-left-color:oklch(0.62 0.14 248); }
.gadanie-answer-word{
  display:block; font-size:2rem; line-height:1; margin-bottom:.5rem;
  letter-spacing:.02em;
}
.gadanie-answer.is-yes .gadanie-answer-word{ color:oklch(0.75 0.11 248); }
.gadanie-answer.is-no .gadanie-answer-word{ color:oklch(0.68 0.13 248); }
.gadanie-answer-note{ margin:0; color:var(--bone-dim); }
.gadanie-lines{ margin:1.2rem 0; padding-left:1.2rem; }
.gadanie-lines li{ margin:.45rem 0; }
.gadanie-links{ margin:1.2rem 0; color:var(--bone-dim); }
.gadanie-kw{ margin-top:1.6rem; }
.gadanie-kw h3{ font-size:.95rem; margin:1.1rem 0 .5rem; color:var(--rule-lit); }
.gadanie-error{
  border-left:3px solid oklch(0.62 0.14 248);
  padding:.7rem 0 .7rem 1rem; color:var(--bone-dim);
}

@media (max-width:520px){
  .tcard{ flex:0 0 calc(50% - .5rem); width:calc(50% - .5rem); }
  .tcard-name{ font-size:.82rem; }
}

/* ============================================================
   12г. МАТРИЦА СУДЬБЫ
   ============================================================ */
.matrix-calc{
  border:1px solid var(--rule); border-radius:2px;
  padding:1.5rem 1.35rem 1.1rem;
  background:oklch(0.22 0.022 248 / .5);
  margin:0 0 2rem;
}
.matrix-field{ display:block; margin:0 0 1.1rem; }
.matrix-field span{
  display:block; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rule-lit); margin-bottom:.4rem;
}
.matrix-date{
  padding:.55rem .7rem; font:inherit; color:var(--bone);
  background:oklch(0.19 0.02 248); border:1px solid var(--rule);
  border-radius:1px;
}
.matrix-go{ cursor:pointer; }
.matrix-go[disabled]{ opacity:.55; cursor:progress; }
.matrix-out{ opacity:0; transition:opacity .45s ease; }
.matrix-out.is-shown{ opacity:1; }
.matrix-when{ margin:1.5rem 0 .4rem; color:var(--bone-dim); }
.matrix-formula{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem; color:var(--rule-lit);
  border-left:2px solid var(--rule); padding:.5rem 0 .5rem .9rem;
  margin:0 0 1.6rem; word-break:break-word;
}
.matrix-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.matrix-point{
  border:1px solid var(--rule); border-radius:2px;
  padding:1rem .95rem;
  background:oklch(0.24 0.022 248 / .55);
}
.matrix-point-head{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:.7rem; }
.matrix-num{
  flex:0 0 2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-lit); border-radius:50%;
  font-size:1.15rem; color:var(--bone);
}
.matrix-point-meta h3{ margin:0 0 .15rem; font-size:1.02rem; }
.matrix-arcana{ margin:0; font-size:.86rem; color:var(--accent); }
.matrix-about{ margin:.5rem 0; font-size:.94rem; }
.matrix-how{ margin:.5rem 0; font-size:.84rem; color:var(--bone-dim); }
.matrix-link{
  display:inline-block; margin-top:.6rem; font-size:.88rem;
  border-bottom:1px solid var(--rule-lit);
}
.matrix-tail{ margin:1.6rem 0 0; font-size:.86rem; color:var(--bone-dim); }
.matrix-error{
  border-left:3px solid oklch(0.62 0.14 248);
  padding:.7rem 0 .7rem 1rem; color:var(--bone-dim);
}
.arcana-list{ columns:2; column-gap:1.5rem; }
@media (max-width:560px){ .arcana-list{ columns:1; } }

/* ============================================================
   12д. НАТАЛЬНАЯ КАРТА (с колесом)
   ============================================================ */
/* Колесо натальной карты. Рисуется в SVG: знаки, дома, планеты и хорды
   аспектов. Asc слева, знаки против часовой — как в любой натальной карте.
   Контраст линий подобран под тёмную панель: прежние цвета давали 1.41:1,
   из-за чего сетка колеса не читалась и деления на 12 секторов пропадали. */
.natal-wheel{ width:100%; max-width:620px; margin:0 auto 1rem; }
.natal-wheel-svg{ display:block; width:100%; height:auto; }
.wheel-ring{ fill:none; stroke:oklch(0.50 0.05 255); stroke-width:1.2; }
.wheel-ring--out{ stroke:oklch(0.56 0.05 255); stroke-width:1.6; }
.wheel-ring--aspect{ stroke:oklch(0.46 0.04 255); stroke-width:1; stroke-dasharray:3 5; }
/* Деления и куспиды — 3.3:1 к фону: прежние 2.83:1 не читались, а линия 1-го
   дома была выбелена почти до белого и перетягивала внимание. */
.wheel-tick{ stroke:oklch(0.52 0.05 255); stroke-width:1.2; }
.wheel-cusp{ stroke:oklch(0.52 0.05 255); stroke-width:1.2; }
.wheel-cusp--asc{ stroke:oklch(0.74 0.07 85); stroke-width:1.6; }
.wheel-pltick{ stroke:oklch(0.54 0.04 255); stroke-width:1; }
.wheel-house{ fill:oklch(0.62 0.03 250); font-size:22px; text-anchor:middle; font-family:inherit; }
.wheel-degree{ fill:var(--bone); font-size:17px; text-anchor:middle; font-family:inherit; }
.wheel-sign-img,.wheel-planet-img{ opacity:.95; }
.wheel-aspect{ stroke-width:1.1; }
.wheel-aspect--tense{ stroke:oklch(0.66 0.16 28 / .9); stroke-width:1.5; }
.wheel-aspect--harm{ stroke:oklch(0.72 0.11 155 / .85); }
.wheel-aspect--join{ stroke:var(--bone-dim); stroke-dasharray:2 4; }
.wheel-aspect--minor{ stroke:oklch(0.52 0.04 255); }
.wheel-axis{ stroke:oklch(0.78 0.10 85 / .85); stroke-width:1.4; }
/* Подпись прижимается наружу: класс задаёт выключку, потому что CSS-свойство
   text-anchor перебивает одноимённый атрибут SVG. */
.wheel-axis-label{
  fill:oklch(0.82 0.09 85); font-size:19px; letter-spacing:.02em;
  text-anchor:middle; font-family:inherit;
}
.wheel-axis-label--end{ text-anchor:end; }
.wheel-axis-label--start{ text-anchor:start; }
.natal-wheel-note{ margin:.6rem 0 0; font-size:.86rem; color:var(--bone-dim); }

/* На телефоне колесо вписываем в ширину экрана: прежде оно было 520 px
   в контейнере 297 px, и правая половина карты просто пропадала.
   Подписи при этом увеличиваем — иначе на маленьком колесе не прочесть. */
/* На телефоне колесо ~300 px, поэтому подписи в единицах рисунка крупные:
   6-8 px на экране не читались. Минуты и название знака там скрыты — без них
   строка вдвое короче и не наезжает на соседей. */
@media (max-width:620px){
  .wheel-degree{ font-size:44px; }
  .wheel-degree-min{ display:none; }
  .wheel-house{ font-size:52px; }
  .wheel-axis-label{ font-size:29px; }
  .wheel-axis-sign{ display:none; }
}

/* ============================================================
   12д. НАТАЛЬНАЯ КАРТА
   ============================================================ */
.natal-calc{
  border:1px solid var(--rule); border-radius:2px;
  padding:1.5rem 1.35rem 1.1rem;
  background:oklch(0.22 0.022 248 / .5);
  margin:0 0 2rem;
}
/* Форма натальной карты — по шаблону разбора нумерологии: поля стоят в одну
   строку колонками, кнопка — такой же элемент строки, зазор 1.1rem как там.
   Раньше каждое поле занимало всю ширину блока (правило
   .natal-field-wide{ grid-column:1/-1 }), и поле времени выходило 1100 px. */
.natal-fields{
  display:grid; gap:1.1rem; align-items:start; margin-bottom:1.1rem;
  /* Пропорции подобраны по замеру: на 1280 px колонка даты выходит 361 px,
     внутри неё «Месяц» — 137 px, ровно как в форме разбора нумерологии.
     Более узкая колонка обрезает «сентябрь» стрелкой списка. */
  grid-template-columns:1.25fr .7fr 1.08fr auto;
}
.natal-field{ display:block; }
/* Подписи у кнопки нет — над ней пустая строка той же высоты, что и подписи
   полей, иначе кнопка встаёт выше строки ввода. */
.natal-field-go > span{ visibility:hidden; }
.natal-go{ justify-self:start; }
/* В строку из четырёх колонок форма помещается от 1240 px: ниже колонка даты
   сужается настолько, что стрелка списка начинает резать «сентябрь» и «День».
   В промежуточных ширинах — две колонки, а сам выбор даты ограничен по ширине,
   иначе три списка растягиваются на пол-экрана. */
@media (max-width:1239px){
  .natal-fields{ grid-template-columns:1.4fr .6fr; }
  .natal-field .date-pick{ max-width:420px; }
}
@media (max-width:620px){
  .natal-fields{ grid-template-columns:1fr; }
  .natal-go{ width:100%; }
}
.natal-field span{
  display:block; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rule-lit); margin-bottom:.4rem;
}
.natal-city-search,
.natal-date,
.natal-time,
.natal-city{
  width:100%; padding:.55rem .7rem; font:inherit;
  color:var(--bone); background:oklch(0.19 0.02 248);
  border:1px solid var(--rule); border-radius:1px;
}
/* Поиск города: поле стоит над списком, список остаётся выпадающим. */
.natal-city-search{ margin-bottom:.5rem; }
.natal-city-search::placeholder{ color:var(--rule-lit); }
.natal-city-search.is-empty{ border-color:oklch(0.62 0.14 28); }

/* Заключение Оракула под таблицами карты. Логика та же, что в разборах
   раскладов: числа считает код, текст формулирует модель. */
.natal-oracle{
  margin:1.8rem 0 0; padding:1.1rem 1.2rem 1.2rem;
  border:1px solid var(--rule-lit); border-radius:2px;
  background:oklch(0.22 0.022 248 / .55);
}
.natal-oracle__title{
  margin:0 0 .7rem; font-size:1rem; color:var(--rule-lit);
  letter-spacing:.06em; text-transform:uppercase;
}
.natal-oracle__par{ margin:0 0 .9rem; }
.natal-oracle__par:last-child{ margin-bottom:0; }
.natal-oracle__wait{ margin:0; color:var(--bone-dim); }

/* Поле города: подсказка под ним — мелкая и приглушённая. */
.natal-city-hint{ display:block; margin-top:.35rem; font-size:.78rem; color:var(--rule-lit); }

/* Выбор даты тремя списками (день, месяц, год). Стоит вместо нативного
   календаря: на телефоне тот не даёт выбрать год, и дату рождения приходится
   листать по месяцам. Скрытое поле хранит значение в формате YYYY-MM-DD. */
/* Селектор из двух классов: у натальной карты подписи полей — это span с
   display:block, и он перебивал бы одиночный класс .date-pick. */
.natal-field .date-pick,
.matrix-field .date-pick,
.num-field .date-pick,
.date-pick{
  /* Колонки с запасом: в «День» и «Месяц» надписи должны читаться целиком,
     а не обрезаться стрелкой списка. */
  display:grid; grid-template-columns:1.05fr 1.5fr 1.25fr; gap:.4rem;
  align-items:stretch;
}
.natal-field .date-pick,
.matrix-field .date-pick,
.num-field .date-pick{
  font-size:inherit; letter-spacing:normal; text-transform:none; color:inherit;
}
/* Единый формат полей ввода на всех страницах: дата, время, имя, город.
   Раньше у списков даты были свои отступы (.55/.7), скругление 1 px и фон
   oklch(0.19 0.02 248), а у текстовых полей — .75/1, скругление 2 px и фон
   var(--ink-2): поля расходились на 2 px по высоте и различались цветом
   подложки. Теперь на все поля одно правило. */
.date-pick select,
.natal-field input,
.natal-field select,
.num-field input,
.num-field select,
.matrix-field input,
.matrix-field select{
  /* Точная высота, а не минимум: у поля времени своя внутренняя высота
     строки, и оно вылезало на 2 px выше остальных. */
  width:100%; height:3.45rem; padding:.75rem 1rem; font:inherit;
  color:var(--bone); background:var(--ink-2); border:1px solid var(--rule);
  border-radius:2px; text-transform:none; letter-spacing:normal;
}

/* Нативные часы в тёмной теме. Значок выбора времени системой нарисован
   тёмным — на тёмной подложке он не виден (контраст около нуля), поэтому
   инвертируем. Маска «--:--» у пустого поля рисуется цветом текста, то есть
   светится как введённое значение: пустое поле даёт :invalid, заполненное —
   :valid, этим и разделяем два состояния, без скрипта. */
input[type=time]::-webkit-calendar-picker-indicator{
  opacity:.8; filter:invert(1); cursor:pointer;
}
input[type=time]:invalid::-webkit-datetime-edit{ color:var(--rule-lit); }
input[type=time]:valid::-webkit-datetime-edit{ color:var(--bone); }

.date-pick select:focus,
.natal-field input:focus,
.natal-field select:focus,
.num-field input:focus,
.num-field select:focus,
.matrix-field input:focus,
.matrix-field select:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* Кнопка стоит в одной строке с полями (в сетке выровнена по низу): без общей
   высоты она выходила 46 px против 55 и её верх проседал на 9 px. */
.natal-go,
.num-go,
.matrix-go{ height:3.45rem; }
.natal-go{ cursor:pointer; }
.natal-go[disabled]{ opacity:.55; cursor:progress; }
.natal-out{ opacity:0; transition:opacity .45s ease; }
.natal-out.is-shown{ opacity:1; }
.natal-when{ margin:1.5rem 0 .8rem; color:var(--bone-dim); }
.natal-angles{ display:flex; gap:.9rem; flex-wrap:wrap; margin:0 0 1rem; }
.natal-angle{
  flex:1 1 150px; border:1px solid var(--rule-lit); border-radius:2px;
  padding:.85rem .9rem; background:oklch(0.25 0.025 248 / .6);
}
.natal-angle-label{
  display:block; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rule-lit); margin-bottom:.3rem;
}
.natal-angle-value{ font-size:1.1rem; }
.natal-system{ margin:.2rem 0 1.4rem; font-size:.88rem; color:var(--accent); }
.natal-out h3{
  margin:1.6rem 0 .6rem; font-size:1rem; color:var(--rule-lit);
  letter-spacing:.06em; text-transform:uppercase;
}
.natal-tail{ margin:1.6rem 0 0; font-size:.86rem; color:var(--bone-dim); }
.natal-error{
  border-left:3px solid oklch(0.62 0.14 248);
  padding:.7rem 0 .7rem 1rem; color:var(--bone-dim);
}

/* ============================================================
   12е. ХИРОМАНТИЯ ПО ЛАДОНИ
   ============================================================ */
.palm-capture{
  border:1px solid var(--rule); border-radius:2px;
  padding:1.5rem 1.35rem 1.1rem;
  background:oklch(0.22 0.022 248 / .5);
  margin:0 0 2rem;
}
.palm-stage{
  position:relative; width:100%; max-width:520px;
  aspect-ratio:4/3; background:oklch(0.17 0.02 248);
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
}
.palm-video,
.palm-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.palm-video{ transform:scaleX(-1); }
.palm-canvas{ transform:scaleX(-1); }
/* Снимок из файла: свой холст, показывается вместо кадра камеры. Отражение
   здесь снимаем — оно нужно только зеркальному кадру камеры, иначе точки
   легли бы не на ту сторону ладони. */
.palm-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:none;
}
/* Две половины: слева живой кадр, справа снимок для разбора. На телефоне
   половины встают друг под друга. */
.palm-row{ display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; justify-content:center; }
/* Обе половины одной величины: одна основа роста (flex:1 1 300px) и один
   потолок (520 px), иначе кадр камеры и снимок выходили разного размера. */
.palm-row .palm-stage,
.palm-shot-panel{ flex:1 1 300px; max-width:520px; }
.palm-shot-panel{
  position:relative; flex:1 1 300px; aspect-ratio:4/3;
  background:oklch(0.17 0.02 248); border:1px dashed var(--rule);
  border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.palm-shot-panel.is-on{ border-style:solid; }
.palm-shot-panel.is-on .palm-shot-hint{ display:none; }
.palm-frame,
.palm-frame-marks{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:none;
}
.palm-shot-panel.is-on .palm-frame,
.palm-shot-panel.is-on .palm-frame-marks{ display:block; }
.palm-shot-hint{
  margin:0; padding:1rem; text-align:center;
  font-size:.86rem; color:var(--rule-lit);
}
.palm-file-wrap{
  display:inline-flex; align-items:center; padding:.5rem .9rem;
  border:1px solid var(--rule); border-radius:2px;
  font-size:.9rem; cursor:pointer;
}
.palm-file-wrap:hover{ border-color:var(--rule-lit); }
.palm-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* Кнопки лежат внутри ряда: на широком экране уезжают на отдельную строку под
   обеими половинами (order:3, ширина 100%), а на телефоне встают сразу под
   экраном камеры — иначе до кнопок приходится листать через снимок.
   На телефоне порядок нулевой, как у половин: тогда работает порядок разметки
   (камера → кнопки → снимок). С order:2 выходило наоборот — снимок выше кнопок. */
.palm-row .palm-controls{ flex:1 1 100%; order:3; }
@media (max-width:760px){
  .palm-row .palm-controls{ order:0; flex:1 1 100%; }
}
.palm-controls{ display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0 .8rem; }
.palm-controls .btn{ cursor:pointer; }
.palm-controls .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.palm-status{ margin:.4rem 0 1.2rem; color:var(--bone-dim); font-size:.92rem; }
.palm-status.is-ok{ color:oklch(0.75 0.11 248); }
.palm-status.is-err{ color:oklch(0.70 0.13 248); }
.palm-out{ opacity:0; transition:opacity .45s ease; }
.palm-out.is-shown{ opacity:1; }
.palm-out h3{ margin:1.4rem 0 .6rem; font-size:1.15rem; }
.palm-out h4{
  margin:1.1rem 0 .35rem; font-size:.84rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--rule-lit);
}
.palm-trait{ color:var(--accent); }
.palm-numbers{ font-size:.86rem; color:var(--bone-dim); }
.palm-limits{ font-size:.86rem; color:var(--bone-dim); }
/* Какую руку показывать: указание стоит выше кадра, до кнопки. */
.palm-hand-note{
  margin:0 0 .9rem; padding:.75rem 1rem; font-size:.92rem;
  border-left:3px solid var(--rule-lit); color:var(--bone-dim);
}
/* Второе указание в той же плашке, но тише первого: оно про съёмку, а не про
   выбор руки, и не должно спорить с ним по весу. */
.palm-hand-note--shot{ border-left-color:var(--rule); }

.palm-hand-pick{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:0 0 1rem; font-size:.92rem; color:var(--bone-dim);
}
.palm-hand-pick label{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
/* Окно Оракула в разборе ладони. Вид берётся у блока из гаданий
   (.gadanie-oracle): шапка со знаком, заголовок, текст. Здесь только
   плавное появление, чтобы блок не выскакивал после ответа модели. */
.palm-oracle{ opacity:0; transition:opacity .45s ease; }
.palm-oracle.is-shown{ opacity:1; }
.palm-error{
  border-left:3px solid oklch(0.62 0.14 248);
  padding:.7rem 0 .7rem 1rem; color:var(--bone-dim);
}

/* ============================================================
   13. ПОДВАЛ
   ============================================================ */
footer.site-foot{
  border-top:1px solid var(--rule);
  padding:2.5rem var(--gut) 3.5rem;
  color:var(--rule-lit); font-size:.85rem;
  font-variant-numeric:tabular-nums;
}
footer.site-foot a{ color:var(--bone-dim); text-decoration:none; }
footer.site-foot a:hover{ color:var(--copper); }

/* Блок «Разделы»: сквозная перелинковка со всех страниц сайта.
   Стоит на каждой странице намеренно — для программатик-разделов
   из сотен страниц это важнее любых ссылок внутри текстов. */
.foot-sections{ margin:0 0 2.2rem; }
.foot-sections h2{
  margin:0 0 1.1rem; font-size:.78rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--copper);
}
.foot-grid{
  display:grid; gap:1.1rem 1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  list-style:none; margin:0; padding:0;
}
.foot-grid li{ margin:0; }
.foot-grid a{
  display:block; color:var(--bone); font-size:.95rem;
  border-bottom:1px solid transparent;
}
.foot-grid a:hover{ border-bottom-color:var(--copper); }
.foot-note{
  display:block; margin-top:.22rem; font-size:.79rem;
  line-height:1.45; color:var(--rule-lit);
}

.foot-bottom{
  border-top:1px solid var(--rule); padding-top:1.4rem;
  display:flex; gap:1.2rem 1.5rem; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}
.foot-bottom nav ul{ display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }

/* ============================================================
   14. ВЫПАДАЮЩЕЕ МЕНЮ В ШАПКЕ
   ============================================================ */
.rail-menu .has-more{ position:relative; }
.rail-menu .sub-menu{
  position:absolute; top:100%; left:0; z-index:40;
  min-width:205px; margin:0; padding:.4rem 0;
  list-style:none;
  background:oklch(0.21 0.022 248);
  border:1px solid var(--rule-lit); border-radius:2px;
  box-shadow:0 12px 28px oklch(0.12 0.02 248 / .55);
  display:none;
}
.rail-menu .has-more.is-open .sub-menu,
.rail-menu .has-more:hover .sub-menu{ display:block; }
.rail-menu .sub-menu li{ margin:0; }
.rail-menu .sub-menu a{
  display:block; padding:.45rem .9rem; white-space:nowrap;
  color:var(--bone-dim);
}
.rail-menu .sub-menu a:hover{
  background:rgba(92, 93, 245, .16); color:var(--bone); text-decoration:none;
}
.rail-menu .more-toggle{ cursor:pointer; }
@media (max-width:900px){
  .rail-menu .sub-menu{
    position:static; border:0; box-shadow:none;
    background:transparent; padding:0 0 0 1rem; min-width:0;
  }
}

/* ============================================================
   13. РЕВИЛЫ И МОУШН
   ============================================================ */
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{ display:block; }

.js .line-mask > span{
  transform:translateY(105%);
  animation:rise 900ms var(--ease) forwards;
}
.js .line-mask:nth-of-type(2) > span{ animation-delay:110ms; }
.js .line-mask:nth-of-type(3) > span{ animation-delay:200ms; }
@keyframes rise{ to{ transform:translateY(0); } }

.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.on{ opacity:1; transform:none; transition:opacity 600ms ease-out, transform 600ms ease-out; }

.js .draw{ stroke-dasharray:var(--len,0); stroke-dashoffset:var(--len,0); }
.js .draw.on{ transition:stroke-dashoffset 900ms ease-out; stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .line-mask > span{ animation:none; transform:none; }
  .js .reveal{ opacity:1; transform:none; }
  .js .draw{ stroke-dashoffset:0; }
  .card{ transition:none; }
  .row::after{ transition:none; }
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ============================================================
   14. БЛОКИ WORDPRESS
   ============================================================ */
.alignwide{ max-width:calc(var(--wrap) - 2*var(--gut)); margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:.85rem; color:var(--rule-lit); }
.sticky .entry-header h2::after{ content:" • закреплено"; color:var(--copper); font-size:.7rem; letter-spacing:.1em; }
.wp-block-button__link{
  background:var(--copper); color:oklch(0.18 0.03 248); border-radius:2px;
  padding:.9rem 1.7rem; font-weight:600; text-decoration:none;
}
.wp-block-quote{ border-left:1px solid var(--copper); padding-left:1.5rem; }
.wp-block-separator{ border-color:var(--rule); }
.wp-block-table td,.wp-block-table th{ border-color:var(--rule); }

@media print{
  body{ background:#fff; color:#000; }
  body::after,.rail,.instrument,footer.site-foot{ display:none; }
  a{ color:#000; }
}

/* ============================================================
   Кнопка «наверх»
   ============================================================ */
.or-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid #33415c;
	background: rgba(6, 17, 34, 0.92);
	color: #c5bdfc;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	transition: translate 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.or-top:hover,
.or-top:focus-visible {
	translate: 0 -3px;
	border-color: rgba(143, 119, 238, 0.55);
	color: #fff;
}
.or-top[hidden] { display: none; }

@media (max-width: 680px) {
	.or-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* --- Страница одной карты: настоящая колода Райдера—Уайта—Смита -------
   Раньше здесь стоял знак, нарисованный кодом. Теперь показываем саму карту,
   а нарисованный знак остаётся подстраховкой для страниц без картинки
   (у рун свои знаки — они идут мимо этого блока через .rune-glyph). */
.card-visual .card:has(.face.has-art) { width: min(76vw, 340px); }

.card .face.has-art {
	padding: 0;
	border: 0;
	background: none;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(140, 150, 240, .20),
		0 22px 48px -20px rgba(0, 0, 0, .78);
}

.card .face.has-art::after { display: none; }

.card .face .art {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   ЕДИНАЯ ТЕМА ДЛЯ ВНУТРЕННИХ БЛОКОВ
   --------------------------------------------------------------------------
   Палитра и шрифт переехали на общую тему через переменные, но у внутренних
   блоков остались свои, «домашние» значения: радиусы 2-3 px. Здесь они
   приводятся к системе главной: поверхность #03101f, линия #222f47,
   радиус 14-16 px, кнопка — как «Начать сейчас» на главной.
   ========================================================================== */

/* --- Кнопки: та же кнопка, что на главной ------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--or-pill, 999px);
	background: linear-gradient(90deg, var(--or-accent, #5c5df5) 0%, var(--or-accent-2, #8f77ee) 100%);
	color: #fff;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(92, 93, 245, .32);
	transition: transform var(--or-motion, .16s) var(--or-ease, ease),
	            box-shadow var(--or-motion, .16s) var(--or-ease, ease),
	            background var(--or-motion, .16s) var(--or-ease, ease),
	            color var(--or-motion, .16s) var(--or-ease, ease);
}

.btn:hover {
	color: #101638;
	background: linear-gradient(90deg, #7b7cf8 0%, #a99cf5 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(92, 93, 245, .45);
}

/* --- Поверхности: плитки, списки, таблицы ------------------------------ */
.card-grid .item,
.cardday,
.kw-list li,
.kw-list a,
.table-wrap,
.wp-block-table {
	background: var(--or-card, #03101f);
	border: 1px solid var(--or-line, #222f47);
	border-radius: 14px;
}

.kw-list li,
.kw-list a { border-radius: 10px; padding: .5rem 1rem; }

.card-grid .item {
	padding: 1.1rem 1.2rem;
	transition: transform var(--or-motion, .16s) var(--or-ease, ease),
	            border-color var(--or-motion, .16s) var(--or-ease, ease),
	            box-shadow var(--or-motion, .16s) var(--or-ease, ease);
}

.card-grid .item:hover {
	transform: translateY(-4px);
	border-color: var(--or-accent-2, #8f77ee);
	box-shadow: 0 18px 40px -22px rgba(92, 93, 245, .55);
}

/* --- Ключевые слова: прямое и перевёрнутое значение --------------------- */
.kw-upright li {
	border-color: var(--or-line-soft, #33415c);
	color: var(--or-accent-3, #c5bdfc);
}

.kw-reversed li {
	border-color: rgba(226, 146, 122, .45);
	color: #efad96;
}

/* --- Списки характеристик и таблицы ------------------------------------ */
.spec { border: 0; background: none; }

.spec li { border-bottom: 1px solid var(--or-line, #222f47); }

.spec .k { color: var(--or-line-soft, #33415c); }

.table-wrap {
	background: var(--or-card, #03101f);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lunar-table th,
.lunar-table td { border-bottom: 1px solid var(--or-line, #222f47); }

.lunar-table th { color: var(--or-line-soft, #33415c); }

.lunar-table tr.row-new     { background: rgba(92, 93, 245, .16); }
.lunar-table tr.row-full    { background: rgba(197, 189, 252, .12); }
.lunar-table tr.row-quarter { background: rgba(143, 119, 238, .10); }

/* --- Ссылки в тексте --------------------------------------------------- */
.entry-content a { color: var(--or-accent-3, #c5bdfc); }
.entry-content a:hover { color: #fff; }
.entry-content li::marker { color: var(--or-accent-2, #8f77ee); }
.entry-content h2 { border-top-color: var(--or-line, #222f47); }

/* --- Рамка карты Таро: в цвет темы, а не старой бирюзы ------------------ */
.card .face { border-color: var(--or-line, #222f47); }


}

/* --------------------------------------------------------------------------
   Кикер над заголовком («Старший аркан» и подобные подписи)
   --------------------------------------------------------------------------
   Был набран тёмным акцентом главной в размере 12,5 px — замер давал 4,4:1
   при норме 4,5 для мелкого текста. Берём светлый акцент: 11,4:1.
   Тот же довод для мелких подписей в крошках навигации. */
.kicker,
.breadcrumbs a {
	color: var(--or-accent-3, #c5bdfc);
}

/* --------------------------------------------------------------------------
   Список карт Таро (/taro/ и такие же архивы)
   --------------------------------------------------------------------------
   1. Линия над плитками убрана: это был border-top самой сетки, оставшийся
      от прежнего вида «сплошного полотна». Плитки теперь отдельные, с рамкой
      и скруглением, и линия над ними читалась как обрыв заголовка.
   2. Под плитками добавлен воздух: раньше сетка была последним элементом
      страницы, и последний ряд упирался прямо в подвал. */
.card-grid {
	border-top: 0;
	padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

/* --------------------------------------------------------------------------
   Миниатюра карты в плитке списка (/taro/)
   --------------------------------------------------------------------------
   Картинка идёт во всю ширину плитки: отрицательные поля съедают её паддинг,
   поэтому верхние углы картинки совпадают с внутренними углами плитки.
   При наведении плитка поднимается (это было и раньше), а картинка мягко
   растёт — как у карточек на главной. */
.card-grid .item .shot {
	display: block;
	margin: -1.1rem -1.2rem .5rem;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
}

.card-grid .item .shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s var(--or-ease, ease);
}

.card-grid .item:hover .shot img { transform: scale(1.04); }

.card-grid .item .name { margin-top: 0; }

/* --------------------------------------------------------------------------
   Плитки рун — по шаблону карт Таро
   --------------------------------------------------------------------------
   Тот же вид: картинка во всю ширину плитки, под ней название и значение,
   при наведении плитка поднимается и картинка растёт. Линия над сеткой убрана
   и добавлен воздух под ней — как на /taro/.
   Сам символ руны (.rune-char) при наличии картинки скрывается: он и так
   нарисован на камне, а рунический блок есть не в каждой системе — вместо
   знака посетитель мог увидеть пустой прямоугольник. */
.rune-grid {
	border-top: 0;
	padding-bottom: clamp(3rem, 8vh, 5.5rem);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.rune-item {
	padding: 1.1rem 1.2rem;
	background: var(--or-card, #03101f);
	border: 1px solid var(--or-line, #222f47);
	border-radius: 14px;
	transition: transform var(--or-motion, .16s) var(--or-ease, ease),
	            border-color var(--or-motion, .16s) var(--or-ease, ease),
	            box-shadow var(--or-motion, .16s) var(--or-ease, ease);
}

.rune-item:hover {
	transform: translateY(-4px);
	border-color: var(--or-accent-2, #8f77ee);
	box-shadow: 0 18px 40px -22px rgba(92, 93, 245, .55);
}

.rune-item .shot {
	display: block;
	margin: -1.1rem -1.2rem .5rem;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
}

.rune-item .shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s var(--or-ease, ease);
}

.rune-item:hover .shot img { transform: scale(1.04); }

.rune-item:has(.shot) .rune-char { display: none; }

/* Кнопка поиска и другие .btn — тот же расчёт контраста, что у кнопок главной:
   тёмный текст по осветлённому градиенту даёт 5,09:1 и 7,34:1. */
.btn,
a.btn {
	background: linear-gradient(90deg, #7b7cf8 0%, #a99cf5 100%);
	color: #101638;
}

.btn:hover,
a.btn:hover {
	background: linear-gradient(90deg, #8f90fa 0%, #bcb1f8 100%);
	color: #0d1330;
}

/* ==========================================================================
   ПЕРЕВОРОТ КАРТЫ И РУНЫ ПРИ НАВЕДЕНИИ + ПОДТЯНУТЫЕ ОТСТУПЫ (2026-09-21)
   --------------------------------------------------------------------------
   Было: подпись обещала «карта наклонится», а наклона не существовало — ни
   правила :hover, ни скрипта. Теперь карта (и камень с руной) при наведении
   переворачиваются вниз головой: поворот на 180°, как перевёрнутое положение
   в раскладе. Работает и с клавиатуры — :focus-within.
   ========================================================================== */

.card-visual .card .face {
	transition: transform 420ms var(--or-ease, cubic-bezier(.22, .61, .36, 1));
}

.card-visual .card:hover .face,
.card-visual .card:focus-within .face {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Карта знака зодиака: переливающееся золото и лёгкое покачивание
   --------------------------------------------------------------------------
   Перевёртывание у знаков убрано. Поворот на 180° — приём расклада Таро: так
   показывают перевёрнутую карту. У знака нет перевёрнутого положения, и карта,
   встающая вверх ногами, читалась как поломка. Вместо отклика на курсор у
   знака своя жизнь: по карте проходит золотая полоса (как солнечный блик), а
   сама карта едва заметно покачивается. Движение медленное и негромкое —
   задача не привлечь внимание, а показать, что знак живой.
   Правило действует только на страницах знаков: у карт Таро и камней с рунами
   перевёртывание осталось. */
.card-visual--sign .card:hover .face,
.card-visual--sign .card:focus-within .face { transform: none; }

.card-visual--sign .card { animation: or-sign-sway 9s ease-in-out infinite; }

@keyframes or-sign-sway {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	35%      { transform: translateY(-5px) rotate(-.6deg); }
	70%      { transform: translateY(3px) rotate(.5deg); }
}

.card-visual--sign .card .face::before {
	content: ""; position: absolute; inset: -40% -60%;
	background: linear-gradient(105deg,
		transparent 38%,
		rgba(232, 193, 122, .14) 47%,
		rgba(255, 238, 196, .34) 51%,
		rgba(232, 193, 122, .14) 55%,
		transparent 64%);
	transform: translateX(-130%);
	animation: or-sign-glint 7.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes or-sign-glint {
	0%        { transform: translateX(-130%); }
	55%, 100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
	.card-visual .card .face { transition: none; }
	.card-visual--sign .card,
	.card-visual--sign .card .face::before { animation: none; }
}

/* --------------------------------------------------------------------------
   Отступы в тексте карты и руны
   --------------------------------------------------------------------------
   Они были заданы в em от кегля самого подзаголовка, а кегль подзаголовка —
   43 px. Отсюда 104 px сверху и 52 px внутреннего отступа: подзаголовок
   отделялся от текста почти на 160 px. Переводим в rem, чтобы зазор не зависел
   от кегля: 45 px вместо 156. Между абзацами — 14 px вместо 21. */
.entry-content h2 {
	margin-top: 2rem;
	padding-top: .8rem;
}

.entry-content h3 { margin-top: 1.4rem; }

.entry-content > * { margin-bottom: .9rem; }

.entry-content p { margin-bottom: .85rem; }

.entry-content li { margin-bottom: .3em; }

.lede-large { margin-bottom: 1.4rem; }

/* ==========================================================================
   РАСКЛАД: НАСТОЯЩАЯ КОЛОДА (2026-09-21)
   --------------------------------------------------------------------------
   Лицо карты было нарисовано кодом — буква, название и слово «перевёрнута».
   Теперь это картинка колоды Райдера—Уайта—Смита, та же, что на странице
   карты. Пропорция плитки приведена к пропорции файла (320×533 = 3/5):
   было 2/3, из-за чего картинку пришлось бы обрезать.
   Перевёрнутая карта не подменяется: она поворачивается на 180°.
   Рубашка тоже настоящая, из колоды.
   ========================================================================== */
.tcard-inner { aspect-ratio: 3 / 5; }

.tcard-face,
.tcard-back { padding: 0; overflow: hidden; }

/* Лицо без кадра: пустая рамка читалась бы как поломка, поэтому показываем
   знак темы — как на рубашке, когда её картинки нет. */
.tcard-face.is-empty::after{
  content:'✦'; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:1.6rem; color:var(--rule-lit);
}

.tcard-art,
.tcard-back-art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcard-back { border-color: var(--or-line, #222f47); background: #0a1526; }

.tcard-corner,
.tcard-name,
.tcard-mark { display: none; }

/* ==========================================================================
   ТРИ ЖИВЫХ РАСКЛАДА НА /gadanie/ (2026-09-21)
   --------------------------------------------------------------------------
   Расклад ставится сеткой, а не тремя длинными полосами подряд: на широком
   экране три колонки, на узком — столбик. Внутри плитки рамка самого блока
   снимается, иначе получалась бы коробка в коробке.
   Пояснение «Оракул тасует колоду…» одинаково во всех трёх, поэтому остаётся
   только в первом блоке — иначе одну и ту же фразу читаешь трижды.
   ========================================================================== */
.gadanie {
	border-color: var(--or-line, #222f47);
	border-radius: 14px;
	background: var(--or-card, #03101f);
}

.gadanie-question,
.gadanie-q input { border-radius: 10px; }

.gadanie-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	margin: 1.9rem 0 2.4rem;
	align-items: start;

	/* Сетка шире колонки текста: она стоит внутри статьи, а статья набрана
	   в 68 знаков, и три плитки в такую ширину не помещаются. Растягиваем
	   симметрично, не выходя за экран. */
	width: min(1120px, calc(100vw - 48px));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.gadanie-cell {
	background: var(--or-card, #03101f);
	border: 1px solid var(--or-line, #222f47);
	border-radius: 16px;
	padding: 1.35rem 1.45rem 1.5rem;
}

.gadanie-cell h3 {
	margin: 0 0 .7rem;
	font-size: 1.2rem;
	color: var(--or-text, #f5f5f6);
}

.gadanie-cell > p {
	font-size: .95rem;
	color: var(--bone-dim);
	margin-bottom: 1.2rem;
}

.gadanie-cell .gadanie {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	margin: 0;
}

.gadanie-cell .gadanie-note { margin-top: 1rem; }

.gadanie-cell + .gadanie-cell .gadanie-note { display: none; }

/* Внутри плитки карта мельче: три карты расклада должны встать в один ряд
   при ширине колонки около 350 px, иначе последняя уезжает на вторую строку. */
.gadanie-cell .tcard { flex: 0 0 86px; width: 86px; }
.gadanie-cell .tcard-pos { font-size: .72rem; }

@media (max-width: 420px) {
	.gadanie-cell { padding: 1.1rem 1rem 1.2rem; }
	.gadanie-cell .tcard { flex: 0 0 88px; width: 88px; }
}
/* --------------------------------------------------------------------------
   Полоса контента на внутренних страницах
   --------------------------------------------------------------------------
   Полосу задаём только верхним блокам страницы — прямым детям main. Так
   вложенные обёртки (.entry внутри статьи, .entry-header внутри .entry)
   не добавляют отступ второй раз: раньше из-за этого заголовок уезжал влево,
   а на соннике текст шёл во всю ширину экрана.
   Текст внутри полосы занимает её целиком — заказчик просил «по ширине».
   На главной правило не работает: там полосы уже заданы внутри секций,
   а их фоны должны идти во всю ширину экрана.
   -------------------------------------------------------------------------- */
/* Полоса: ширина и центрирование. Боковой отступ полосы добавляем только тем
   верхним блокам, у которых своего нет, — иначе он считался дважды и текст
   уезжал вправо (замер: 168 вместо 144). Блоки со своим отступом
   (.archive-header, .card-hero, .pagination) его сохраняют. */
body:not(.home) main > * {
	width: 100%;
	max-width: var(--or-wrap, 1200px);
	margin-inline: auto;
}

/* Первый экран «Личного Оракула» занимает всю ширину окна, как герой главной.
   Правило выше ограничивает прямых детей main полосой в 1200 px, а этому
   блоку нужна вся ширина. Селектор длиннее на один класс — вес выше, поэтому
   ограничение и боковой отступ снимаются. */
body:not(.home) main > .or-oracle-hero {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

body:not(.home) main > article,
body:not(.home) main > section,
body:not(.home) main > .card-grid,
body:not(.home) main > .rune-grid,
body:not(.home) main > .entry-content,
body:not(.home) main > .notfound,
body:not(.home) main > .term-groups {
	padding-inline: var(--gut, 24px);
}

/* Расклад на архиве карт («Кельтский крест») — тоже прямой ребёнок main.
   Мало унаследовать полосу от `main > *`: у самого блока есть правило
   `.gadanie{ margin:0 0 2rem }` из раздела «Гадание», и оно перебивало
   `margin-inline:auto` — блок прижимался к левому краю полосы (замер: слева 0
   вместо 120). Поэтому ширина, центрирование и боковой отступ заданы здесь явно. */
body:not(.home) main > .gadanie {
	width: 100%;
	max-width: var(--or-wrap, 1200px);
	margin-inline: auto;
	padding-inline: var(--gut, 24px);
}

/* Блоки, которые сами могут быть полосой (прямые дети main), держат ширину
   полосы и не добавляют свой боковой отступ — иначе текст уезжал вправо на
   второй отступ: замер показывал 168 вместо 144. */
body:not(.home) main > .archive-header,
body:not(.home) main > .card-hero,
body:not(.home) main > .breadcrumbs {
	max-width: var(--or-wrap, 1200px);
	margin-inline: auto;
}

/* Вложенные обёртки: ни отступа, ни ограничения по знакам — текст занимает
   полосу целиком, как просил заказчик. */
body:not(.home) .entry,
body:not(.home) .entry-content,
body:not(.home) .entry-header,
body:not(.home) .archive-header > *,
body:not(.home) .card-hero > * {
	max-width: none;
}

body:not(.home) .entry,
body:not(.home) .entry-content,
body:not(.home) .entry-header,
body:not(.home) .article .card-hero,
body:not(.home) article .card-hero {
	padding-inline: 0;
}

@media (max-width: 600px) {
	body:not(.home) main > * { padding-inline: 16px; }
	body:not(.home) .entry-content { max-width: none; }
}

/* ==========================================================================
   ВИТРИНА ПЯТИ РАСКЛАДОВ И ЗАПУСК ПО НАЖАТИЮ (2026-09-21)
   --------------------------------------------------------------------------
   Пять плиток над живыми раскладами. Плитка — ссылка на свой расклад ниже
   (#rasklad-day и т. д.), и скрипт доводит дело до конца: подводит к блоку и
   ставит курсор в поле вопроса, если оно у этого расклада есть. Так нажатие
   запускает расклад, а не просто листает страницу.
   Работает и без скрипта: ссылка всё равно приведёт к нужному блоку.
   ========================================================================== */
.gadanie-menu {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: .4rem 0 2.2rem;

	/* Как и сетку раскладов, витрину выпускаем шире текстовой колонки. */
	width: min(1120px, calc(100vw - 48px));
	margin-left: 50%;
	transform: translateX(-50%);
}

.gadanie-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	background: var(--or-card, #03101f);
	border: 1px solid var(--or-line, #222f47);
	border-radius: 14px;
	text-decoration: none;
	transition: transform var(--or-motion, .16s) var(--or-ease, ease),
	            border-color var(--or-motion, .16s) var(--or-ease, ease),
	            box-shadow var(--or-motion, .16s) var(--or-ease, ease);
}

.gadanie-tile:hover {
	transform: translateY(-4px);
	border-color: var(--or-accent-2, #8f77ee);
	box-shadow: 0 18px 40px -22px rgba(92, 93, 245, .55);
}

/* Карта занимает верх плитки во всю ширину — как у карточек разделов. */
/* Витрина перелинковки на страницах раскладов: четыре плитки вместо пяти —
   колонки шире, чтобы ряд не распадался на 4+пустое место. */
.gadanie-menu--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gadanie-tile__shot { display: block; background: #061020; }

/* Кадры чуть разной высоты — подпись держим у нижнего края плитки. */
.gadanie-tile { justify-content: space-between; }

.gadanie-tile__shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s var(--or-ease, ease);
}

.gadanie-tile:hover .gadanie-tile__shot img { transform: scale(1.04); }

.gadanie-tile__body {
	display: block;
	padding: .85rem 1rem 1.1rem;
}

.gadanie-tile__name {
	display: block;
	margin-bottom: .2rem;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--or-text, #f5f5f6);
}

.gadanie-tile__hint {
	display: block;
	font-size: .85rem;
	line-height: 1.4;
	color: var(--bone-dim);
	/* Пояснения занимают одну или две строки — держим под них постоянное
	   место, иначе подписи в плитках встают на разной высоте. */
	min-height: 2.4rem;
}

/* Подсветка блока, к которому пришли по нажатию на плитку. */
.gadanie-cell.is-target {
	border-color: var(--or-accent-2, #8f77ee);
	box-shadow: 0 0 0 3px rgba(92, 93, 245, .22);
}

/* Расстояние от заголовка страницы до вводного абзаца: просили две строки.
   Зазор набегал из трёх отступов сразу — нижнего паддинга шапки статьи (72 px),
   её margin (32 px) и верхнего паддинга блока текста (72 px). Оставляем один
   управляемый отступ в 2rem.
   Селекторы заданы явно и с привязкой к страницам: при равной специфичности
   правило из середины файла перебивало моё, и отступы оставались прежними. */
body.page .entry.entry-header { margin-bottom: 0; padding-bottom: 0; }
body.page .entry.entry-header h1 { margin-bottom: .15rem; }
body.page .entry-header + .entry { padding-top: 0; }
body.page .entry-content { padding-top: 0; }
body.page .entry-content > .lede-large { margin-top: 4.2rem; }

@media (max-width: 980px) {
	.gadanie-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.gadanie-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 420px) {
	.gadanie-menu { grid-template-columns: 1fr; }
}

/* Кельтский крест: классическая раскладка — крест слева, посох справа.
   Десять карт ставятся по своим местам через grid, а не подряд друг за другом.
   Столбец 368px — под карту, которая ложится поперёк центральной. */
.gadanie[data-spread="celtic"] .gadanie-cards {
  display: grid;
  grid-template-columns: 225px 368px 225px 30px 225px;
  align-items: start;
  gap: 14px;
  perspective: 1500px;
}

.gadanie[data-spread="celtic"] .tcard { width: 225px; justify-self: center; }
.gadanie[data-spread="celtic"] .tcard-pos { font-size: .8rem; font-weight: 600; letter-spacing: .04em; }

/* 1 — суть, в центре креста */
.gadanie[data-spread="celtic"] .tcard:nth-child(1) { grid-column: 2; grid-row: 2; }
/* 2 — пересечение: ложится поперёк первой карты */
.gadanie[data-spread="celtic"] .tcard:nth-child(2) { grid-column: 2; grid-row: 2; z-index: 3; }
.gadanie[data-spread="celtic"] .tcard:nth-child(2) .tcard-inner { transform: rotate(90deg); }
.gadanie[data-spread="celtic"] .tcard.is-dealt:nth-child(2) .tcard-inner { transform: rotate(90deg) rotateY(180deg); }
/* 5 — венец, над центром; 3 — основа, под центром */
.gadanie[data-spread="celtic"] .tcard:nth-child(5) { grid-column: 2; grid-row: 1; }
.gadanie[data-spread="celtic"] .tcard:nth-child(3) { grid-column: 2; grid-row: 3; }
/* 4 — что позади, слева; 6 — что впереди, справа */
.gadanie[data-spread="celtic"] .tcard:nth-child(4) { grid-column: 1; grid-row: 2; }
.gadanie[data-spread="celtic"] .tcard:nth-child(6) { grid-column: 3; grid-row: 2; }
/* 7–10 — посох справа, снизу вверх */
.gadanie[data-spread="celtic"] .tcard:nth-child(7)  { grid-column: 5; grid-row: 4; }
.gadanie[data-spread="celtic"] .tcard:nth-child(8)  { grid-column: 5; grid-row: 3; }
.gadanie[data-spread="celtic"] .tcard:nth-child(9)  { grid-column: 5; grid-row: 2; }
.gadanie[data-spread="celtic"] .tcard:nth-child(10) { grid-column: 5; grid-row: 1; }

/* На узком экране крест не помещается. Тогда — две колонки по порядку номеров,
   и карта «поперёк» больше не поворачивается: в потоке она налезла бы на соседнюю. */
@media (max-width: 1150px) {
  .gadanie[data-spread="celtic"] .gadanie-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    perspective: none;
  }
  .gadanie[data-spread="celtic"] .tcard { width: 100%; justify-self: stretch; }
  .gadanie[data-spread="celtic"] .tcard:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gadanie[data-spread="celtic"] .tcard:nth-child(2) .tcard-inner { transform: none; }
  .gadanie[data-spread="celtic"] .tcard.is-dealt:nth-child(2) .tcard-inner { transform: rotateY(180deg); }
}

@media (max-width: 640px) {
  .gadanie[data-spread="celtic"] .gadanie-cards { grid-template-columns: 1fr; }
}

/* Окно разбора от Оракула: отдельный блок под раскладом. Появляется позже
   карт — модель отвечает не сразу, и расклад её не ждёт. */
.gadanie-oracle {
  margin: 1.4rem 0 1.2rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--or-line, #222f47);
  border-left: 3px solid var(--or-accent-2, #8f77ee);
  border-radius: 14px;
  background: rgba(92, 93, 245, .07);
}

/* Шапка разбора: знак сайта в круглой плашке слева от заголовка,
   под шапкой — тонкая линия. Так знак читается, но не спорит с текстом. */
.gadanie-oracle__head {
  display: flex;
  align-items: center;
  /* Зазор до заголовка и воздух под плашкой: 8 px до заголовка оказалось
     тесно, а 8 px до линии — плашка «тонула» в ней. Мерено на живом блоке. */
  gap: .75rem;
  margin: 0 0 .7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--or-line, #222f47);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.gadanie-oracle__badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Штрих 2 px, а не 1: на круге в 40 px кольцо в 1 px рендерится с
     просветами («пунктирит») и по яркости выходит вдвое тише акцентной
     рамки карточки. Замер: контраст к фону был 2,75:1 против 5,43:1. */
  border: 2px solid rgba(159, 133, 255, .72);
  background: radial-gradient(circle at 50% 40%, rgba(92, 93, 245, .30), rgba(92, 93, 245, .06) 70%);
  box-shadow: 0 0 18px rgba(92, 93, 245, .28), inset 0 0 12px rgba(143, 119, 238, .18);
}

.gadanie-oracle__badge img {
  /* Знак детальный: в кадре 40 px рисунок в 26 px опознавался плохо.
     До кольца остаётся запас — 30 px читается заметно лучше. */
  width: 30px;
  height: 30px;
  display: block;
}

.gadanie-oracle p {
  margin: 0 0 .9rem;
  color: var(--bone);
}

.gadanie-oracle p:last-child { margin-bottom: 0; }

/* Пока модель думает, заголовок мягко пульсирует — не мигает и не крутится. */
@keyframes or-oracle-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.gadanie-oracle:not(.is-ready) .gadanie-oracle__head {
  animation: or-oracle-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .gadanie-oracle:not(.is-ready) .gadanie-oracle__head { animation: none; }
}

/* Разбор не пришёл: окно остаётся на месте и объясняет причину,
   иначе пропавший ответ выглядит как поломка сайта. */
.gadanie-oracle.is-error .gadanie-oracle__text p {
	color: #c8b6ff;
}

/* Кадры веера колоды объявлены ЗДЕСЬ, в конце файла, а не рядом с правилами
   колоды. Причина: выше по style.css есть незакрытый `:root{`, и правила
   попадают внутрь него. Вложенное правило браузер ещё применяет, а
   вложенный `@keyframes` — невалиден и отбрасывается: карте назначалось имя
   анимации `or-deck-fan`, но самих кадров в документе не было, и веер стоял
   на месте (проверено: в документе видны только or-oracle-pulse и
   or-ring-turn). В конце файла вложенности уже нет — or-oracle-pulse оттуда
   работает. */
@keyframes or-deck-fan{
  0%, 10%   { transform:translate(calc(var(--i) * var(--stack)), calc(var(--i) * var(--stack) * -1)) rotate(0deg); }
  /* В раскрытом кадре слагаемое --stack убрано: иначе веер уезжал вправо на
     ~8 px (замер по снимку: полуразмах 197,5 влево против 205,5 вправо).
     В собранном кадре оно остаётся — это и есть смещение карт в колоде. */
  36%, 64%  { transform:translate(calc((var(--i) - 2) * var(--fan)),
                                  calc(var(--i) * var(--stack) * -1 - var(--card-h) * .067))
                          rotate(calc((var(--i) - 2) * 12deg)); }
  90%, 100% { transform:translate(calc(var(--i) * var(--stack)), calc(var(--i) * var(--stack) * -1)) rotate(0deg); }
}

/* ── Первый экран «Личного Оракула» ─────────────────────────────────────
   Картинка владельца лежит ФОНОМ, заголовок и краткое описание стоят поверх
   неё слева — там картинка тёмная и текст читается. Затемнение и картинка —
   слои одного фона, а холст звёзд лежит выше них: под затемнением звёзды
   гасли бы. Канвас опознаётся скриптом по метке .or-stars — той же, что у
   полосы на главной, поэтому второго неба в скриптах нет.
   Правила стоят в конце файла намеренно: выше есть незакрытый `:root{`, и
   вложенные правила получают лишний вес. */
.or-oracle-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  /* Текст поднят к верху полосы: так он начинается сразу под шапкой, а не
     висит по центру, и вводный текст целиком помещается над нижним краем. */
  align-items:flex-start;
  /* Высота 700 — прежняя: при cover картинка на ширине 1440 даёт 809 px, и срез
     был 109 px. Сжатие до 590 увеличило срез до 219 — верх обрезался заметно.
     Чтобы сохранить и воздух под кнопкой (эталон главной 158 px), текст опущен:
     отступ сверху 217 вместо 104. Воздух = низ героя минус низ кнопки. */
  min-height:700px;
  margin:0 0 24px;
  padding:217px 0 84px;
  overflow:hidden;
}
.or-oracle-hero__media{
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:#02060f;
  background-image:
    /* Затемнение под текст: колонка кончается на 848 (59% ширины при окне 1440),
       поэтому первые 52% держим почти в чёрном, дальше плавно уходим в ноль —
       правый край с сюжетом остаётся виден. */
    /* Левая часть под текстом держится плотнее: колонка кончается на 848 (59%
       ширины), поэтому затемнение идёт до 60% и только потом уходит в ноль.
       Правая треть картинки не тронута — она светлая, как и просил владелец. */
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.95) 36%, rgba(1,8,23,.88) 50%, rgba(1,8,23,.70) 60%, rgba(1,8,23,.34) 74%, rgba(1,8,23,.10) 86%, rgba(1,8,23,0) 94%),
    /* Гаснет только нижняя кромка — последняя пятая часть. Верх и середина
       картинки остаются светлыми, как и просил владелец. */
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/oracle-hero.webp?v=2');
  background-repeat:no-repeat;
  /* 35% по вертикали: срез 109 px распределяется как 38 сверху и 71 снизу —
     верх картинки остаётся целым, а лишнее уходит в затемнённую нижнюю кромку. */
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
.or-oracle-hero__media canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
/* Текст стоит по полосе контента сайта — как заголовок героя на главной. */
.or-oracle-hero__inner{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:24px;
}
/* Ширину держат абзацы, а не обёртка: иначе ограничение родителя ломало
   заголовок на две строки. На компьютере колонка вдвое шире (704 px) — по
   просьбе владельца; затемнение под неё растянуто вместе с текстом, иначе
   подписи вшитых карточек снова оказались бы под буквами. */
.or-oracle-hero__copy{ max-width:720px; }
.or-oracle-hero .or-oracle-hero__title{
  /* Воздух под заголовком как на главной: там между H1 и текстом 32 px —
     замер эталона, а не на глаз. */
  margin:0 0 32px;
  /* Заголовок может быть шире колонки текста: «Личный Оракул» брендовым
     шрифтом при 352 px ломался на две строки. Картинка под ним всё равно
     чёрная до x=500. */
  max-width:520px;
  font-size:clamp(2rem, 4.4vw, 3.25rem);
  line-height:1.08;
  color:#fff;
}
.or-oracle-hero .or-oracle-hero__lede{
  margin:0 0 15px;
  max-width:704px;
  font-size:clamp(1rem, 1.35vw, 1.18rem);
  line-height:1.55;
  color:#dfe6f5;
}
/* Последнему абзацу нижний отступ не нужен — иначе он спорит с воздухом
   до нижнего края полосы. */
.or-oracle-hero .or-oracle-hero__lede:last-child{ margin-bottom:0; }
/* Тень: затемнение теперь мягче, а картинка светлее — тень держит читаемость
   там, где под буквами оказывается светлое пятно. */
.or-oracle-hero .or-oracle-hero__title,
.or-oracle-hero .or-oracle-hero__lede{ text-shadow:0 1px 2px rgba(1,8,23,.85), 0 2px 18px rgba(1,8,23,.75); }
@media (max-width:900px){
  .or-oracle-hero{ min-height:520px; padding:56px 0 64px; }
  /* На телефоне колонка занимает всю ширину — там всё устроило владельца. */
  .or-oracle-hero .or-oracle-hero__lede{ max-width:none; }
  /* На узком экране обрезка уводит сюжет вправо — оставляем ту часть
     картинки, где лежит тёмное поле под текст. */
  /* На телефоне текст идёт через всю ширину, поэтому затемнение держит весь
     кадр, а не только левый край: иначе подписи карточек проступают сквозь
     текст. Картинке оставлена та часть, где виден оракул с шаром. */
  .or-oracle-hero__media{
    background-image:
      /* На телефоне текст занимает всю ширину, поэтому картинка затемнена
         целиком: под текстом не должно остаться ни одной светлой подписи. */
      linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.96) 40%, rgba(1,8,23,.94) 70%, rgba(1,8,23,.88) 100%),
      linear-gradient(180deg, rgba(1,8,23,.35) 0%, rgba(1,8,23,.10) 16%, rgba(1,8,23,.10) 78%, rgba(1,8,23,.55) 90%, rgba(1,8,23,1) 100%),
      url('assets/img/gadanie/oracle-hero.webp?v=2');
    background-position:0 0, 0 0, 68% 45%;
  }
}

/* Под картинкой первого экрана воздух убран начисто — как на главной, где стык
   героя и следующей полосы нулевой (замер: низ героя 764, полоса начинается 764).
   У первого заголовка в тексте снимаем ещё и его разделительную линию с
   отступом (тема ставит h2 внутри текста margin 2.4em, padding 1.2em и
   border-top): картинка сама служит границей, и лишняя полоса под ней не нужна. */
body.page-id-97 .or-oracle-hero{ margin-bottom:0; }
body.page-id-97 .entry-content > h2:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
/* Обёртка .entry в теме держит внутренний отступ сверху 60 px — под картинкой
   он и оставался тем самым воздухом после снятия отступов заголовка. */
body.page-id-97 .entry{ padding-top:0; }
/* Кнопка под вводным текстом: тот же .btn, что на главной, воздух до текста
   как у абзацев между собой. */
/* Над кнопкой — та же мера, что на главной между её текстом и кнопками (30 px
   замера). Селектор из двух классов: одиночный проигрывал по весу, и кнопка
   стояла вплотную. Отступ абзаца схлопывается с отступом последнего абзаца
   текста (15 px), поэтому в браузере применяется больший — ровно 30. */
.or-oracle-hero .or-oracle-hero__cta{ margin:30px 0 0; }

/* Картинка первого экрана поднята к шапке вплотную. На главной герой начинается
   с 64 px — ровно там, где кончается шапка. Здесь между ними стояла полоса
   хлебных крошек высотой 61 px (внутренние отступы 19,2 сверху и снизу) — из-за
   неё и читался воздух. Крошки остаются на месте: они ложатся поверх тёмного
   верха картинки, поэтому им задан z-index выше героя. */
body.page-id-97 .or-oracle-hero{ margin-top:-61px; }
body.page-id-97 .breadcrumbs{ position:relative; z-index:2; }

/* ── Личный кабинет: вход, регистрация, сам профиль (shortcode [oracle_profile]) ── */
.or-profile__msg{ margin:0 0 22px; padding:14px 18px; border:1px solid var(--or-line,#222f47); border-radius:10px; font-size:.96rem; }
.or-profile__msg--ok{ border-color:rgba(106,92,175,.65); }
.or-profile__msg--bad{ border-color:rgba(190,105,105,.65); }
.or-profile__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.or-profile__col{ padding:26px 24px 28px; border:1px solid var(--or-line,#222f47); border-radius:14px; }
.or-profile__h{ margin:0 0 18px; font-size:1.3rem; }
.or-form__row{ display:block; margin:0 0 16px; }
.or-form__label{ display:block; margin:0 0 6px; font-size:.86rem; color:var(--bone-dim,#9aa6c0); }
.or-form__input{ width:100%; padding:12px 14px; border:1px solid var(--or-line,#222f47); border-radius:9px; background:#0a1224; color:#eaf0fb; font-size:1rem; }
.or-form__input:focus{ outline:2px solid rgba(106,92,175,.55); outline-offset:1px; }
.or-form__submit{ margin-top:6px; }
.or-form__note{ margin:14px 0 0; font-size:.82rem; color:var(--bone-dim,#9aa6c0); }
.or-profile__hello{ margin:0 0 18px; font-size:1.25rem; color:#fff; }
.or-profile__facts{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0 0 20px; }
.or-profile__facts dt{ color:var(--bone-dim,#9aa6c0); font-size:.9rem; }
.or-profile__facts dd{ margin:0; }
.or-profile__note{ color:var(--bone-dim,#9aa6c0); max-width:60ch; }
.or-profile__acts{ display:flex; align-items:center; gap:20px; margin-top:22px; }
.or-profile__out{ font-size:.92rem; }

/* Прогресс в личном кабинете: ранг, полоса опыта, серия дней. */
.or-profile__rank{ margin:0 0 22px; padding:18px 20px; border:1px solid var(--or-line,#222f47); border-radius:12px; }
.or-profile__rank-name{ margin:0 0 12px; font-size:1.1rem; color:#fff; letter-spacing:.01em; }
.or-profile__bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.or-profile__bar span{ display:block; height:100%; background:linear-gradient(90deg,#6a5caf,#8f7fd6); }
.or-profile__rank-xp{ margin:10px 0 0; font-size:.9rem; color:var(--bone-dim,#9aa6c0); }
.or-profile__rank-what{ margin:8px 0 0; font-size:.92rem; color:#dfe6f5; max-width:60ch; }
.or-profile__streak{ margin:10px 0 0; font-size:.88rem; color:var(--bone-dim,#9aa6c0); max-width:60ch; }

/* ── Спросить Оракула: поле вопроса между кнопкой героя и разделом «Как он это делает» ── */
.or-ask{ width:100%; max-width:1200px; margin:0 auto 34px; padding:0 24px; }
/* Блок Оракула первым элементом статьи (страница «Разборы»): он идёт сразу под
   полосой первого экрана, у которой низ растворяется в фоне, поэтому нужен
   отступ сверху — иначе панель стоит вплотную к картинке. */
.entry-content > .ask-slot:first-child{ margin-top:2.4rem; }
.or-ask__panel{ border:1px solid var(--or-line,#222f47); border-radius:14px; background:var(--or-bg-2,#020d1b); padding:22px 24px; }
.or-ask__lead{ margin:0 0 16px; color:#dfe6f5; max-width:70ch; }
.or-ask__form{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
/* Знак слева от поля: высота равна строке ввода. Картинка лежит в обёртке
   абсолютно, поэтому на высоту строки не влияет — иначе её натуральные 96 px
   растягивали и поле, и себя (проверено: поле вырастало до 96 px). Строку
   задаёт поле ввода, обёртка просто тянется по ней и держит квадрат. */
.or-ask__mark{ flex:0 0 auto; width:52px; height:52px; align-self:center; position:relative; }
.or-ask__mark img{ position:absolute; inset:0; width:100%; height:100%; }
.or-ask__input{ flex:1 1 180px; min-width:0; /* основа 180, а не 320: при 320 знак уезжал на отдельную строку */ padding:13px 16px; border:1px solid var(--or-line-soft,#33415c);
  border-radius:11px; background:var(--or-bg,#010817); color:#f5f5f6; font:inherit; }
.or-ask__input::placeholder{ color:var(--or-muted,#8e9ab1); }
.or-ask__input:focus{ outline:2px solid rgba(92,93,245,.55); outline-offset:1px; }
.or-ask__send{ flex:0 0 auto; }
.or-ask__chips{ display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 0; }
.or-ask__chip{ border:1px solid var(--or-line,#222f47); border-radius:999px; padding:8px 15px; font:inherit;
  font-size:13.5px; color:#f5f5f6; background:transparent; cursor:pointer; transition:border-color .15s, color .15s; }
.or-ask__chip:hover{ border-color:var(--or-accent-2,#8f77ee); color:var(--or-accent-3,#c5bdfc); }
.or-ask__out{ display:none; }
.or-ask__out.is-on, .or-ask__out.is-loading{ display:block; margin:18px 0 0; }
.or-ask__out.is-loading{ animation:or-ask-pulse 1.6s ease-in-out infinite; }
@keyframes or-ask-pulse{ 50%{ opacity:.55; } }
.or-ask__hint{ margin:0; color:var(--or-muted,#8e9ab1); }
.or-ask__error{ margin:0; color:#f0b3a4; }
.or-ask__note{ margin:0 0 14px; font-size:13.5px; color:var(--or-muted,#8e9ab1); }
.or-ask__said{ margin:0 0 14px; padding-left:14px; border-left:2px solid var(--or-accent-2,#8f77ee); color:#dfe6f5; }
.or-ask__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.or-ask__card{ display:block; border:1px solid var(--or-line,#222f47); border-radius:11px; padding:13px 15px;
  text-decoration:none; color:#f5f5f6; background:var(--or-card,#03101f); transition:border-color .15s, transform .15s; }
.or-ask__card:hover{ border-color:var(--or-accent-2,#8f77ee); transform:translateY(-1px); }
.or-ask__k{ display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--or-accent-2,#8f77ee); }
.or-ask__card b{ display:block; margin:4px 0; }
.or-ask__d{ display:block; font-size:13px; color:var(--or-muted,#8e9ab1); }
@media (max-width:640px){
  /* На телефоне в строке остаются знак и поле, кнопка уходит под них во всю ширину. */
  .or-ask__send{ flex:1 1 100%; }
}

/* Содержимое под чатом идёт той же колонкой, что и текст внутри чата. Панель
   чата имеет внутренний отступ 24 px, поэтому текст статьи сдвинут на столько
   же и ограничен по ширине: левый и правый края совпадают с краями текста в
   панели (169…1271 при окне 1440). */
body.page-id-97 article .entry-content{ max-width:1102px; margin-inline:auto; }

/* ── Рунные расклады ──────────────────────────────────────────────────────
   Руны — камни, а не карты: рубашки у них нет, поэтому вместо веера колоды
   показывается горсть камней. Раскладка зависит от типа: Иггдрасиль идёт
   девятью мирами, крест Одина — крестом, Норны — в строку. Селекторы взяты
   из двух классов: в этом файле есть незакрытый :root, который поднимает
   вес вложенных правил, и одиночный класс ему проигрывает. */
/* Чаша с камнями. Камни гремят, пока сервер тасует руны, а когда расклад
   пришёл — чаша наклоняется, и камни уходят в позиции: карты расклада
   «прилетают» из чаши (см. or-rune-land ниже). */
.gadanie--runes .gadanie-bowl{ position:relative; width:168px; height:104px; margin:0 auto 18px; }
.gadanie--runes .gadanie-bowl__body{ position:absolute; inset:12px 0 0; border-radius:12px 12px 50% 50%/8px 8px 86% 86%;
  background:linear-gradient(180deg,#4b3f33,#2a231c 60%,#1c1712); border:1px solid #63523f;
  box-shadow:inset 0 10px 18px rgba(255,255,255,.05), 0 20px 26px -18px rgba(0,0,0,.95); }
.gadanie--runes .gadanie-bowl__rim{ position:absolute; left:-4px; top:6px; width:176px; height:30px; border-radius:50%;
  background:linear-gradient(#3a3128,#231d17); border:1px solid #6b5a45; }
.gadanie--runes .gadanie-bowl__in{ position:absolute; left:10px; top:11px; width:148px; height:21px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(143,119,238,.30), rgba(0,0,0,.55)); }
.gadanie--runes .gadanie-bowl__stone{ position:absolute; width:24px; height:22px;
  border-radius:50% 50% 46% 54%/52% 48% 52% 48%;
  background:radial-gradient(circle at 35% 30%, #6a7690, #2b3446); }
.gadanie--runes .gadanie-bowl__stone:nth-of-type(1){ left:50px; top:13px; }
.gadanie--runes .gadanie-bowl__stone:nth-of-type(2){ left:74px; top:20px; }
.gadanie--runes .gadanie-bowl__stone:nth-of-type(3){ left:62px; top:27px; }
.gadanie--runes .gadanie-bowl__glow{ position:absolute; inset:auto 0 2px; height:12px; border-radius:50%;
  background:radial-gradient(50% 100% at 50% 50%, rgba(143,119,238,.35), transparent 70%); }

.gadanie--runes .gadanie-bowl{ transition:transform .42s cubic-bezier(.4,.1,.3,1); }
.gadanie--runes.is-rattling .gadanie-bowl{ animation:or-bowl-rattle .07s linear infinite; }
.gadanie--runes.is-rattling .gadanie-bowl__stone{ animation:or-pebble-rattle .07s linear infinite; }
@keyframes or-bowl-rattle{
  0%{ transform:translate(-3px,1px) rotate(-2.2deg); }
  50%{ transform:translate(3px,-2px) rotate(2.2deg); }
  100%{ transform:translate(-3px,1px) rotate(-2.2deg); }
}
@keyframes or-pebble-rattle{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(2px,-2px); }
  100%{ transform:translate(0,0); }
}
/* Расклад пришёл: чаша наклоняется, камни из неё уходят. */
.gadanie--runes.is-cast .gadanie-bowl{ transform:rotate(-30deg) translateY(-8px); }
.gadanie--runes.is-cast .gadanie-bowl__stone{ opacity:0; transition:opacity .34s ease .1s; }

/* Камни расклада прилетают из чаши: смещение считает скрипт, поэтому
   анимация не зависит ни от размера окна, ни от раскладки расклада. */
.gadanie--runes .gadanie-cards .rune{ animation:or-rune-land .62s cubic-bezier(.2,.7,.3,1) both; }
@keyframes or-rune-land{
  0%{ opacity:0; transform:translate(var(--fx,0px), var(--fy,0px)) rotate(-16deg) scale(.9); }
  100%{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .gadanie--runes.is-rattling .gadanie-bowl,
  .gadanie--runes.is-rattling .gadanie-bowl__stone,
  .gadanie--runes .gadanie-cards .rune{ animation:none; }
}

.gadanie--runes .gadanie-cards{ display:grid; gap:22px 24px; margin:0 0 18px; justify-content:center;
  --rune-w:178px; grid-template-columns:repeat(3, var(--rune-w)); }
.gadanie--runes .gadanie-cards[data-spread="norns"],
.gadanie--runes .gadanie-cards[data-spread="odin"],
.gadanie--runes .gadanie-cards[data-spread="yggdrasil"]{ grid-template-columns:repeat(3, var(--rune-w)); }

/* Крест Одина: суть в середине, препятствие сверху, помощь и совет по бокам,
   итог снизу — как ложатся камни в этом раскладе. */
.gadanie--runes .gadanie-cards[data-spread="odin"] .rune[data-position="Препятствие"]{ grid-area:1/2; }
.gadanie--runes .gadanie-cards[data-spread="odin"] .rune[data-position="Что помогает"]{ grid-area:2/1; }
.gadanie--runes .gadanie-cards[data-spread="odin"] .rune[data-position="Суть"]{ grid-area:2/2; }
.gadanie--runes .gadanie-cards[data-spread="odin"] .rune[data-position="Совет"]{ grid-area:2/3; }
.gadanie--runes .gadanie-cards[data-spread="odin"] .rune[data-position="Итог"]{ grid-area:3/2; }

/* Камень: у рун не карточки, а камни. Рамку и подложку убрали, силуэт округлили,
   а свечение руны проявляется на самом камне — кадр руны идёт поверх него в
   режиме screen, поэтому тёмный фон кадра исчезает, остаётся светящийся знак. */
.rune{ text-align:center; }
/* Камень: у рун не карточки, а камни. Светлый камень с мягкой подсветкой сверху —
   кадр руны проявляется на нём свечением (mix-blend-mode: screen). Рамки и
   подложки нет. */
.rune-stone{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  border-radius:46% 54% 50% 50%/24% 26% 28% 26%;
  background:radial-gradient(circle at 38% 30%, #4b5568, #2b3346 44%, #182031 76%, #0e1522);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.10), inset 0 -14px 24px rgba(0,0,0,.6),
    0 18px 28px -16px rgba(0,0,0,.95); }
.rune-art{ display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  mix-blend-mode:screen; opacity:.95; }
.rune.is-reversed .rune-stone .rune-art{ transform:rotate(180deg); }
.rune-pos{ display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#8e9ab1; margin:0 0 7px; min-height:32px; }

.rune-name{ display:inline-block; margin:8px 0 0; font-weight:600; color:#f5f5f6; text-decoration:none; }
.rune-name:hover{ color:#c5bdfc; }
.rune-rev{ display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#e2b28f; margin:2px 0 0; }

.rune-combos{ margin:0 0 16px; }
.rune-combos__title{ margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#c5bdfc; }
.rune-combo{ border:1px dashed #33415c; border-radius:11px; padding:12px 15px; margin:0 0 10px; background:#03101f; }
.rune-combo b{ color:#c5bdfc; }
.rune-combo span{ display:block; font-size:13.5px; color:#8e9ab1; margin:4px 0 0; }
.rune-combo__note{ display:block; font-size:12.5px; color:#e2b28f; margin:5px 0 0; font-style:normal; }

@media (max-width:640px){
  /* На телефоне камни уже были мелкими: половинить их некуда, поэтому держим
     ширину, при которой три камня ещё помещаются в полосу. */
  .gadanie--runes .gadanie-cards{ --rune-w:96px; gap:16px 14px; }
  .gadanie--runes .gadanie-cards[data-spread="odin"] .rune{ grid-area:auto !important; }
}

/* ── Расклады рун на странице /runy/ ──────────────────────────────────────
   Воздух перед списком рун и та же сетка, что у гаданий Таро. Селекторы из
   двух классов — в style.css есть незакрытый :root, поднимающий вес
   вложенных правил. */
.rune-spreads{ margin:0 0 34px; }
.rune-spreads h2{ margin:0 0 10px; }
.rune-spreads > p{ max-width:78ch; color:#8e9ab1; margin:0; }
/* Полоса уже, чем у пяти плиток гаданий: при пяти колонках на три плитки
   кадр вышел бы несоразмерно крупным. Число колонок дальше подстраивают те же
   медиазапросы, что и для витрины гаданий. */
/* Плиток бывает и три (на /runy/), и две (перелинковка под раскладом), поэтому
   раскладываем их флексом: он держит ряд по центру при любом числе. */
.gadanie-menu.gadanie-menu--three{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  width:min(880px, calc(100vw - 48px)); }
.gadanie-menu.gadanie-menu--three .gadanie-tile{ flex:0 0 284px; }

/* Свои пороги: правило выше перебивает общие медиазапросы витрины — у него два
   класса против одного. Без этих строк на телефоне оставались три колонки и
   плитки ужимались до сотни пикселей. Ширину колонки задаём диапазоном: на
   телефоне в полосу встают две плитки, на широком экране — три. */
@media (max-width:640px){
  /* min-width:0 обязателен: без него ширина картинки внутри плитки не даёт
     ей сжиматься, и плитки встают вразнобой — одна в полосу, другая уже. */
  .gadanie-menu.gadanie-menu--three .gadanie-tile{ flex:1 1 148px; min-width:0; }
}

/* Строка ожидания в окне разбора: пока модель думает, место не выглядит пустым. */
.gadanie--runes .gadanie-oracle__wait{ margin:.2rem 0 0; color:#8e9ab1; font-size:.92rem; }
.gadanie-oracle.is-ready .gadanie-oracle__wait{ color:#8e9ab1; }

/* ── Первый экран сонника ──────────────────────────────────────────────────
   Та же полоса, что у «Личного Оракула», но со своей картинкой: левая половина
   кадра чёрная, поэтому текст ложится на неё почти без затемнения, а сюжет
   справа остаётся видимым. Полоса поднята к шапке, как на Оракуле: крошки
   ложатся поверх тёмного верха, воздуза между шапкой и картинкой нет.
   Звёзды (data-sparks) расставлены только по тёмным местам кадра. */
body.post-type-archive-sonnik_symbol .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--sonnik .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.95) 34%, rgba(1,8,23,.86) 48%, rgba(1,8,23,.62) 58%, rgba(1,8,23,.26) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/sonnik-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
@media (max-width:900px){
  body.post-type-archive-sonnik_symbol .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
}

/* ── Первый экран «Хиромантии по ладони» ───────────────────────────────────
   Та же полоса, что у Оракула и сонника, но со своим кадром. Левая треть
   картинки почти чёрная (яркость 1–3 из 255), поэтому текст ложится на неё без
   плотного затемнения, а сюжет справа остаётся видимым: затемнение спадает уже
   к 58% ширины. Полоса поднята к шапке — крошки ложатся поверх тёмного верха.
   Звёзды (data-sparks) стоят только в тёмных местах и правее текстовой колонки. */
body.page-id-949 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--ladon .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/hiromantiya-hero.webp?v=2');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
/* ── Первый экран лунного календаря ─────────────────────────────────────
   Кадр у владельца светлее прежних, и ровной тьмы внизу слева нет: звёзды
   стоят только в верхней левой четверти, где яркость 2–25 из 255. */
/* ── Ссылки на лунные разделы внутри календаря ──────────────────────────
   Плитки того же вида, что на соннике и в таксономиях (.card-grid), но в две
   колонки: ссылок две, и они должны читаться как крупные, а не как мелочь. */
.or-extra-links{ padding:0 var(--gut); }
.or-extra-links h2{ margin:0; }
.or-extra-links .card-grid{ grid-template-columns:repeat(2, 1fr); margin-top:1.6rem; }
.or-extra-links .card-grid .item{ padding:1.5rem 1.4rem; }
.or-extra-links .card-grid .name{ font-size:1.3rem; }

@media (max-width:700px){
  .or-extra-links .card-grid{ grid-template-columns:1fr; }
}

body.post-type-archive-calendar_day .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--kalendar .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.95) 30%, rgba(1,8,23,.88) 44%, rgba(1,8,23,.66) 54%, rgba(1,8,23,.30) 68%, rgba(1,8,23,.08) 82%, rgba(1,8,23,0) 92%),
    linear-gradient(180deg, rgba(1,8,23,.34) 0%, rgba(1,8,23,.06) 14%, rgba(1,8,23,0) 78%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/kalendar-hero.webp?v=1');
  /* Кадр выровнен по лицу: женщина в правой половине, лицо — в середине этой
     половины. При `cover` ширина кадра в точности равна ширине полосы, и
     сдвинуть его было нечем, поэтому на широком экране кадр увеличен по ширине
     (118%) — тогда сдвиг по x работает, а по высоте запаса хватает с избытком
     (кадр 1699×957 против полосы 1440×660). На телефоне `cover` даёт свободу
     по ширине сам, там лицо просто ставится по центру экрана. */
  background-position:0 0, 0 0, 74% 40%;
  background-size:auto, auto, cover;
}
body.post-type-archive-calendar_day .term-groups{ margin-top:0; }

@media (min-width:901px){
  .or-oracle-hero--kalendar .or-oracle-hero__media{
    background-size:auto, auto, 118% auto;
    background-position:0 0, 0 0, 43% 15%;
  }
}

@media (max-width:900px){
  body.post-type-archive-calendar_day .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
}

/* ── Первый экран гороскопа и золотые знаки ─────────────────────────────
   Полоса устроена как на соннике: картинка владельца во всю ширину, текст
   поверх. Звёзды — тот же холст .or-stars, вспышки расставлены по тёмному
   левому краю кадра. */
body.post-type-archive-znak .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--goroskop .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.95) 30%, rgba(1,8,23,.88) 44%, rgba(1,8,23,.66) 54%, rgba(1,8,23,.30) 68%, rgba(1,8,23,.08) 82%, rgba(1,8,23,0) 92%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/goroskop-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
body.post-type-archive-znak .term-groups{ margin-top:0; }

/* Золотой знак в карте знака: кадр крупный, поэтому задаём только долю
   ширины — иначе знаки разной ширины поедут по высоте. */
.card .glyph img{ width:56%; height:auto; opacity:.98; }

/* Плитки знаков — по четыре в ряд на широком экране (просьба владельца).
   На телефоне оставляем авто-сетку: там по четыре плитки в ряд нечитаемы. */
body.post-type-archive-znak .rune-grid{ grid-template-columns:repeat(4, 1fr); }
body.post-type-archive-znak .rune-item .sign-glyph img{ height:4.4rem; width:auto; }

@media (max-width:900px){
  body.post-type-archive-znak .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  body.post-type-archive-znak .rune-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width:900px){
  body.page-id-949 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
}

/* ── Карта разделов нумерологии: четыре плитки в ряд с картинками ───────
   Тот же вид, что у рун и знаков зодиака: снимок сверху, под ним метка,
   название и пояснение. Картинки владельца нарезаны из одного листа по швам
   (content: 1460×487 → четыре кадра 360, 362, 368, 370 px). */
/* Значение чисел (id 1258): одиннадцать плиток — 4 в ряд, остаток по центру.
   Флекс, а не грид: грид прижимает неполный последний ряд влево, а нужно
   по центру. Ширина плитки 25% минус доля зазора — в строку влезает ровно 4. */
body.page-id-1258 .chislo-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
  margin:1.6rem 0 0; padding:0; list-style:none;
}
body.page-id-1258 .chislo-grid .chislo-card{
  flex:0 1 calc(25% - 14px); max-width:calc(25% - 14px);
  background:#00020e; border:1px solid var(--or-line, #222f47);
  border-radius:14px; overflow:hidden; text-decoration:none; display:block;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.page-id-1258 .chislo-grid .chislo-card:hover{
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 14px 30px -18px rgba(0, 0, 0, .85);
}
body.page-id-1258 .chislo-grid .chislo-card img{
  display:block; width:100%; height:auto; transition:transform .5s var(--or-ease, ease);
}
body.page-id-1258 .chislo-grid .chislo-card:hover img{ transform:scale(1.04); }

@media (max-width:900px){
  body.page-id-1258 .chislo-grid .chislo-card{ flex-basis:calc(50% - 9px); max-width:calc(50% - 9px); }
}
@media (max-width:560px){
  body.page-id-1258 .chislo-grid .chislo-card{ flex-basis:100%; max-width:100%; }
}

body.page-id-94 .entry-content .card-grid{ grid-template-columns:repeat(4, 1fr); margin-top:1.6rem; }
body.page-id-94 .entry-content .card-grid .item{ padding:.9rem 1rem; }
/* Снимок выводим ровно по краям плитки: отрицательные поля подогнаны под её
   отступы (были -1.1rem -1.2rem при отступах .9rem 1rem — картинка вылезала
   за край на 3 px с каждой стороны). */
body.page-id-94 .entry-content .card-grid .item .shot{ margin:-.9rem -1rem .45rem; }
body.page-id-94 .entry-content .card-grid .item .hint{ margin-top:.35rem; }

/* Четыре в ряд на всём десктопе, без промежуточного двухколоночного режима:
   владелец дважды видел две плитки вместо четырёх — сначала на границе 1100 px,
   потом ниже неё. Двухколоночного режима нет вовсе, одна колонка только на
   телефоне (до 620 px). */
@media (max-width:620px){
  body.page-id-94 .entry-content .card-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   12ж. НУМЕРОЛОГИЧЕСКИЙ РАЗБОР (форма, таблицы, заключение)
   ============================================================ */
.num-calc{
  border:1px solid var(--rule); border-radius:2px;
  padding:1.5rem 1.35rem 1.1rem;
  background:oklch(0.22 0.022 248 / .5);
  margin:0 0 2rem;
}
.num-intro{ margin:0 0 1.1rem; color:var(--bone-dim); }
.num-form{
  display:grid; gap:1.1rem; align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.num-field{ display:block; }
.num-label{
  display:block; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rule-lit); margin-bottom:.4rem;
}
.num-go{ justify-self:start; cursor:pointer; }
.num-go[disabled]{ opacity:.55; cursor:progress; }
.num-out{ opacity:0; transition:opacity .45s ease; }
.num-out.is-shown{ opacity:1; }
.num-when{ margin:1.5rem 0 1.4rem; color:var(--bone-dim); }
.num-head{ margin:0 0 1rem; font-size:1.06rem; letter-spacing:.02em; }
.num-part{ margin:0 0 2.2rem; }
.num-cards{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.num-card{
  border:1px solid var(--rule); border-radius:2px;
  padding:1rem .95rem;
  background:oklch(0.24 0.022 248 / .55);
}
.num-card-top{ display:flex; gap:.85rem; align-items:center; margin-bottom:.6rem; }
.num-value{
  flex:0 0 2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-lit); border-radius:50%;
  font-size:1.15rem; color:var(--bone);
}
.num-value-small{ flex:0 0 2rem; height:2rem; font-size:.95rem; }
.num-title{ font-size:1.02rem; }
.num-work{ margin:.4rem 0; font-size:.84rem; color:var(--bone-dim); word-break:break-word; }
.num-meaning{ margin:.5rem 0; font-size:.94rem; }
.num-link{ display:inline-block; margin-top:.5rem; font-size:.88rem; border-bottom:1px solid var(--rule-lit); }
.num-table{ width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.94rem; }
.num-table th,.num-table td{ text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--rule); }
.num-table thead th{
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rule-lit);
}
.num-table tr.is-current{ background:oklch(0.26 0.03 250 / .6); }
.num-table tr.is-current td:first-child{ color:var(--bone); }
.num-letters .num-letter{ text-align:center; font-size:1.02rem; }
.num-letters .num-letter-value{ text-align:center; color:var(--accent); }
.num-sum{ margin:.4rem 0 1.6rem; font-size:.92rem; color:var(--bone-dim); word-break:break-word; }
.num-formula{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem; color:var(--rule-lit);
  border-left:2px solid var(--rule); padding:.5rem 0 .5rem .9rem;
  margin:0 0 1.4rem; word-break:break-word;
}
.num-tail{ margin:1.4rem 0 0; font-size:.86rem; color:var(--bone-dim); }
.num-error,.num-oracle-error{
  border-left:3px solid oklch(0.62 0.14 248);
  padding:.7rem 0 .7rem 1rem; color:var(--bone-dim);
}
.num-part-oracle{ border-top:1px solid var(--rule); padding-top:1.7rem; }
.num-oracle-state{ color:var(--bone-dim); }
.num-oracle-text{ margin:0 0 1rem; }
.num-note{ margin:1.2rem 0 0; color:var(--bone-dim); }

/* Диаграмма матрицы: квадрат с диагоналями и восемью точками. Сторона
   квадрата равна высоте, поэтому подписи в процентах совпадают с местами
   точек в SVG. */
.num-map{
  position:relative; width:100%; max-width:420px; aspect-ratio:1 / 1;
  margin:0 auto 1.8rem;
}
.num-map-svg{ display:block; width:100%; height:100%; }
.num-map-lines{ fill:none; stroke:var(--rule); stroke-width:1.2; }
.num-map-point circle{ fill:oklch(0.24 0.022 248 / .88); stroke:var(--rule-lit); stroke-width:1.2; }
.num-map-point.is-corner circle{ stroke:var(--accent); stroke-width:1.8; }
.num-map-value{ fill:var(--bone); font-size:26px; text-anchor:middle; font-family:inherit; }
.num-map-point.is-edge .num-map-value{ font-size:22px; }
.num-map-cap{
  position:absolute; transform:translate(-50%, 0); white-space:nowrap;
  font-size:.8rem; letter-spacing:.04em; color:var(--rule-lit);
}
@media (max-width:620px){
  .num-map{ max-width:300px; }
  .num-map-cap{ font-size:.72rem; }
}

/* Длинное имя: таблица букв прокручивается, а не рвёт страницу по ширине. */
.num-letters{ display:block; overflow-x:auto; }

@media (max-width:620px){
  .num-calc{ padding:1.2rem 1rem .9rem; }
  .num-form{ grid-template-columns:1fr; }
.num-go{ width:100%; }
  .num-table{ font-size:.88rem; }
  .num-table th,.num-table td{ padding:.42rem .4rem; }
}

/* ── Первый экран нумерологии ────────────────────────────────────────────
   Та же полоса со своим кадром владельца: яркость под звёздами 0–5 из 255,
   то есть они стоят по ровной темноте левого края. Вводный абзац уехал в
   полосу (см. astrolabe_oracle_strip_intro), поэтому отступы статьи убраны. */
body.page-id-94 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--natal .or-oracle-hero__media{ background-image: linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%), linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%), url('assets/img/gadanie/natal-hero.webp?v=1'); background-position:0 0, 0 0, 50% 35%; background-size:auto, auto, cover; }

/* Натальная карта: та же полоса с картинкой и холстом звёзд, что у нумерологии
   и примет. Отрицательный отступ сверху поднимает её под шапку на всю ширину. */
body.page-id-947 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
body.page-id-947 .entry{ padding-top:0; }
body.page-id-947 .entry-content > h2:first-of-type{ margin-top:0; }

@media (max-width:900px){
  body.page-id-947 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* На телефоне видно 37% ширины кадра: сдвигаем к левому краю, где стоят вспышки. */
  .or-oracle-hero--natal .or-oracle-hero__media{ background-position:0 0, 0 0, 12% 35%; }
}

/* ── Первый экран матрицы судьбы ─────────────────────────────────────────────
   Та же полоса, что у нумерологии и натальной карты: картинка владельца во всю
   ширину, текст поверх, звёзды на холсте .or-stars. Вспышки стоят только в
   левой тёмной части кадра: яркость пятна ±13 px там 0–21 из 255, средний x
   вспышек 21 %. */
body.page-id-749 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
body.page-id-749 .entry{ padding-top:0; }
body.page-id-749 .entry-content > h2:first-of-type{ margin-top:0; }
.or-oracle-hero--matrica .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/matrica-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}

@media (max-width:900px){
  body.page-id-749 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* На телефоне видно ~42 % ширины кадра: сдвигаем к левому краю, где стоят вспышки. */
  .or-oracle-hero--matrica .or-oracle-hero__media{ background-position:0 0, 0 0, 12% 35%; }
}

/* ── Первый экран «Разборов» ─────────────────────────────────────────────────
   Та же полоса, что у нумерологии, натальной карты и матрицы: картинка
   владельца во всю ширину, текст поверх, звёзды на холсте .or-stars. Вспышки
   стоят только в левой тёмной части кадра: яркость пятна ±13 px там 0–23 из
   255, средний x вспышек 18 %. */
body.page-id-946 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
body.page-id-946 .entry{ padding-top:0; }
body.page-id-946 .entry-content > h2:first-of-type{ margin-top:0; }
.or-oracle-hero--razbory .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/razbory-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}

@media (max-width:900px){
  body.page-id-946 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* На телефоне видно ~42 % ширины кадра: сдвигаем к левому краю, где стоят вспышки. */
  .or-oracle-hero--razbory .or-oracle-hero__media{ background-position:0 0, 0 0, 12% 35%; }
}

.or-oracle-hero--numerologiya .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/numerologiya-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
body.page-id-94 .entry{ padding-top:0; }
body.page-id-94 .entry-content > h2:first-of-type{ margin-top:0; }

@media (max-width:900px){
  body.page-id-94 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* Телефон показывает только 37% ширины кадра. При центре в кадр попадала
     середина картинки, и вспышки (они стоят в левой чёрной полосе) оставались
     за краем — холст был пуст. Сдвиг 12% ставит в кадр левую полосу со звёздами
     и часть сюжета: контур стеллажа и начало дуги с золотыми цифрами. */
  .or-oracle-hero--numerologiya .or-oracle-hero__media{ background-position:0 0, 0 0, 12% 35%; }
}

/* ── Первый экран «Приметы и суеверия» ─────────────────────────────────────
   Та же полоса, что у хиромантии и сонника, со своим кадром. Левая треть
   картинки чёрная (яркость 0–3 из 255), поэтому текст ложится на неё без
   плотного затемнения, а сюжет справа остаётся видимым. Под картинкой полоса
   начинается сразу: отступ обёртки и поле первого заголовка снимаем. */
body.page-id-817 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
.or-oracle-hero--primety .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/primety-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}
body.page-id-817 .entry{ padding-top:0; }
body.page-id-817 .entry-content > h2:first-of-type{ margin-top:0; }
@media (max-width:900px){
  body.page-id-817 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
}
/* Под картинкой полоса начинается сразу: у обёртки статьи отступ сверху 72 px,
   а у первого заголовка — поле в 104 px, из-за них между картинкой и текстом
   повисала пустота в 175 px. Убираем и то и другое только на этой странице. */
body.page-id-949 .entry{ padding-top:0; }
body.page-id-949 .entry-content > h2:first-of-type{ margin-top:0; }

/* ---------------------------------------------------------------------
   Карта совместимости: две карты в одном расчёте — колесо на двух
   кольцах, таблица синастрии, ключевые аспекты, стихии и числа пары.
   Поля ввода здесь те же, что на натальной карте, поэтому их стили не
   повторяются: разметка использует классы natal-field и date-pick.
   --------------------------------------------------------------------- */

.syn-calc .syn-persons{ display:grid; gap:1.4rem; }
.syn-person__title{
  margin:0 0 .55rem; font-size:.86rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rule-lit);
}
.syn-calc .syn-fields{ grid-template-columns:1.25fr .7fr 1.08fr; }
.syn-go-row{ margin:1.2rem 0 .2rem; }
.syn-out{ margin-top:1.6rem; }
.syn-title{ margin:0 0 1.1rem; font-size:1.15rem; color:var(--bone); }
.syn-wait{ margin:0; color:var(--bone-dim); }
.syn-block{ margin:0 0 2rem; }
.syn-block__title{
  margin:0 0 .8rem; font-size:.95rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--rule-lit);
}
.syn-block__note{ margin:.75rem 0 0; font-size:.86rem; color:var(--bone-dim); }

/* Колесо: два кольца планет. Цвет подписей различает людей. */
.syn-ring-label{ fill:var(--bone-dim); font-size:20px; text-anchor:middle; font-family:inherit; }
.syn-planet-img--b{ opacity:.88; }
.syn-pltick--b{ stroke:oklch(0.64 0.09 250); }
.syn-degree--a{ fill:var(--bone); }
.syn-degree--b{ fill:oklch(0.74 0.09 250); }

/* Заголовок блока-ссылка: на страницах-хабах заголовок раздела ведёт на свою
   страницу. Вид заголовка сохраняем — цвет наследуется, подчёркивание только
   под курсором, иначе блок заголовков выглядит как список ссылок. */
/* !important здесь вынужденный: в теме цвет ссылок задан вложенными правилами
   палитры (& .entry-content a), и заголовок-ссылка без него становится сиреневым
   вместо цвета заголовка. Вид заголовка важнее — ссылку выдаёт подчёркивание
   под курсором. */
body .entry-content h2 a{ color:inherit !important; text-decoration:none; border-bottom:1px solid transparent; }
body .entry-content h2 a:hover,
body .entry-content h2 a:focus{ color:var(--or-accent-2) !important; border-bottom-color:currentColor; }

/* Хорды ключевых аспектов на колесе совместимости делаем заметнее: их всего
   восемь, и они должны читаться, в отличие от тринадцати хорд натальной карты. */
.syn-wheel .wheel-aspect{ stroke-width:1.9; }
.syn-wheel .wheel-aspect--harm{ stroke:oklch(0.78 0.13 155); }
.syn-wheel .wheel-aspect--tense{ stroke:oklch(0.74 0.16 28); }

/* Таблица синастрии */
.syn-table-wrap{ overflow-x:auto; }
.syn-table{ border-collapse:collapse; font-size:.84rem; min-width:660px; }
.syn-table th, .syn-table td{
  border:1px solid var(--or-line); padding:.35rem .45rem; text-align:center; white-space:nowrap;
}
.syn-table__corner, .syn-table__col, .syn-table__row{
  color:var(--bone-dim); font-weight:400; background:var(--or-card);
}
.syn-cell--harm{ background:oklch(0.34 0.07 155 / .5); color:var(--bone); }
.syn-cell--tense{ background:oklch(0.34 0.09 28 / .5); color:var(--bone); }
.syn-cell--join{ background:oklch(0.30 0.03 250 / .6); color:var(--bone); }
.syn-cell--none{ color:var(--or-line-soft); }
.syn-cell__name{ display:block; }
.syn-cell__orb{ display:block; font-size:.72rem; color:var(--bone-dim); }
.syn-legend{ margin:.7rem 0 0; display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.8rem; color:var(--bone-dim); }
.syn-legend__item::before{
  content:''; display:inline-block; width:.7rem; height:.7rem; margin-right:.35rem;
  border:1px solid var(--or-line); vertical-align:-1px;
}
.syn-legend__item--harm::before{ background:oklch(0.45 0.09 155); }
.syn-legend__item--tense::before{ background:oklch(0.45 0.09 28); }
.syn-legend__item--join::before{ background:oklch(0.30 0.03 250); }
.syn-legend__item--none::before{ background:transparent; }

/* Ключевые аспекты */
.syn-keys__suns{ margin:0 0 1rem; font-size:.9rem; color:var(--bone-dim); }
.syn-key{ border-left:2px solid var(--or-line); padding:.5rem .95rem; margin:0 0 .85rem; }
.syn-key--harm{ border-left-color:oklch(0.62 0.11 155); }
.syn-key--tense{ border-left-color:oklch(0.62 0.14 28); }
.syn-key--join{ border-left-color:var(--bone-dim); }
.syn-key__head{ color:var(--bone); }
.syn-key__body{ font-size:.86rem; color:var(--bone-dim); }
.syn-key__note{ margin:.35rem 0 0; font-size:.86rem; color:var(--bone-dim); }

/* Баланс стихий: две полосы на стихию — по одной на человека. */
.syn-el{ display:grid; grid-template-columns:5.5rem 1fr 1fr; gap:.6rem; align-items:center; margin:0 0 .5rem; }
.syn-el__name{ font-size:.86rem; color:var(--bone-dim); }
.syn-el__bar{ position:relative; height:1rem; background:oklch(0.24 0.02 248); border:1px solid var(--or-line); }
.syn-el__fill{ height:100%; background:oklch(0.55 0.08 250); }
.syn-el__bar--b .syn-el__fill{ background:oklch(0.66 0.10 85 / .85); }
.syn-el__val{ position:absolute; right:.3rem; top:-1px; font-size:.76rem; color:var(--bone); }
.syn-elements__pair{ margin:.9rem 0 0; font-size:.9rem; color:var(--bone-dim); }

/* Числа пары */
.syn-numbers{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.syn-number{ border:1px solid var(--or-line); background:var(--or-card); padding:.9rem 1rem; }
.syn-number__title{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rule-lit); }
.syn-number__val{ font-size:2rem; line-height:1.1; color:var(--bone); }
.syn-number__text{ margin:.5rem 0 0; font-size:.88rem; color:var(--bone-dim); }

/* Заключение Оракула — тот же вид, что под натальной картой. */
.syn-oracle{
  margin-bottom:0 !important; padding:1.1rem 1.2rem;
  border:1px solid var(--or-line-strong); background:oklch(0.22 0.022 248 / .55);
}
.syn-oracle__wait{ margin:0; color:var(--bone-dim); }
.syn-oracle__par{ margin:0 0 .9rem; }
.syn-oracle__par:last-child{ margin-bottom:0; }

@media (max-width:1240px){
  .syn-calc .syn-fields{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .syn-numbers{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .syn-calc .syn-fields{ grid-template-columns:1fr; }
  .syn-el{ grid-template-columns:4.5rem 1fr 1fr; }
}


/* ── Первый экран календаря стрижек ──────────────────────────────────────
   Полоса как у примет, хиромантии, нумерологии, натальной карты, матрицы
   судьбы и разборов: картинка владельца во всю ширину, текст поверх неё,
   вспышки — по тёмной левой части кадра, туда же ложится заголовок. */

body.page-id-873 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:190px 0 84px; }
body.page-id-873 .entry{ padding-top:0; }
body.page-id-873 .entry-content > h2:first-of-type{ margin-top:0; }

.or-oracle-hero--strizhki .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.58) 58%, rgba(1,8,23,.24) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/strizhki-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 35%;
  background-size:auto, auto, cover;
}

@media (max-width:900px){
  body.page-id-873 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* На телефоне видно около 42% ширины кадра: сдвигаем к левой части,
     где стоят вспышки и тёмный фон под заголовок. */
  .or-oracle-hero--strizhki .or-oracle-hero__media{ background-position:0 0, 0 0, 26% 30%; }
}


/* ── Балл совместимости под колесом ──────────────────────────────────────
   Число считает сервер, здесь только подача: крупная цифра, короткий
   вывод словом и пояснение, из чего число взялось. Оговорка обязательна —
   без неё страница противоречит собственному тексту про проценты. */

.syn-compat{ display:flex; gap:1.15rem; align-items:flex-start; margin:1.5rem 0 0; padding:1rem 1.15rem; border:1px solid var(--or-line); border-radius:3px; background:var(--ink-2); }
.syn-compat__num{ flex:0 0 auto; font-size:2.15rem; line-height:1; font-weight:600; color:var(--bone); letter-spacing:-.02em; }
.syn-compat__tone{ display:block; margin:0 0 .35rem; color:var(--bone); font-weight:600; }
.syn-compat__why{ margin:0; color:var(--bone-dim); font-size:.86rem; line-height:1.5; }
.syn-compat__note{ margin:.5rem 0 0; color:var(--bone-dim); opacity:.82; font-size:.79rem; line-height:1.5; }
@media (max-width:640px){
  .syn-compat{ flex-direction:column; gap:.5rem; padding:.9rem 1rem; }
  .syn-compat__num{ font-size:1.75rem; }
}

/* «Слияние» — третий характер связи, и серым его показывать нельзя: серым на
   странице помечено отсутствие аспекта. Фиолетовый — акцент сайта, он же
   стоит в клетках таблицы и на хорде колеса. */
.syn-legend__item--join::before{ background:oklch(0.55 0.11 295); }
.syn-cell--join{ background:oklch(0.36 0.09 295 / .55); }
.syn-wheel .wheel-aspect--join{ stroke:oklch(0.70 0.12 295); }


/* ── Первый экран «Карты совместимости» ──────────────────────────────────
   Полоса как у примет, хиромантии, нумерологии, натальной карты, матрицы,
   разборов и стрижек: картинка владельца во всю ширину, текст поверх неё,
   вспышки — по левой тёмной части кадра. */

/* Заголовок здесь длиннее, чем на соседних страницах, и занимает три строки:
   при общем отступе 190 px блок уезжал вниз. Поднимаем на 40 px. */
body.page-id-1337 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:150px 0 84px; }
body.page-id-1337 .entry{ padding-top:0; }
body.page-id-1337 .entry-content > h2:first-of-type{ margin-top:0; }

.or-oracle-hero--sovmestimosti .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.56) 58%, rgba(1,8,23,.22) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/sovmestimost-hero.webp?v=1');
  background-position:0 0, 0 0, 50% 38%;
  background-size:auto, auto, cover;
}

@media (max-width:900px){
  body.page-id-1337 .or-oracle-hero{ min-height:520px; padding:120px 0 64px; }
  /* На телефоне видно около 42% ширины кадра: сдвигаем к левой части, где
     тёмный фон и вспышки. */
  .or-oracle-hero--sovmestimosti .or-oracle-hero__media{ background-position:0 0, 0 0, 24% 30%; }
}


/* ── Крошки на страницах с полосой (фоновой картинкой) ───────────────────
   Строку перекрывал слой картинки, а тёмный цвет темы на тёмном фоне не
   читался: крошки были видны только на «Личном Оракуле», где правило
   position:relative; z-index:2 поставили вручную (page-id-97). Условие —
   по наличию полосы на странице, а не по списку адресов: новые страницы
   с картинкой получат то же поведение сразу. */
body:has(.or-oracle-hero) .breadcrumbs{ position:relative; z-index:2; color:var(--bone-dim); }
body:has(.or-oracle-hero) .breadcrumbs a{ color:var(--bone); }
body:has(.or-oracle-hero) .breadcrumbs a:hover{ color:var(--copper); }


/* ── Первый экран «Транзитов» ────────────────────────────────────────────
   Полоса как у соседних страниц: картинка владельца во всю ширину, текст
   поверх неё, вспышки — по левой тёмной части кадра. */

body.page-id-1345 .or-oracle-hero{ margin:-61px 0 0; min-height:660px; padding:170px 0 84px; }
body.page-id-1345 .entry{ padding-top:0; }
body.page-id-1345 .entry-content > h2:first-of-type{ margin-top:0; }

.or-oracle-hero--tranzity .or-oracle-hero__media{
  background-image:
    linear-gradient(90deg, rgba(1,8,23,.97) 0%, rgba(1,8,23,.94) 34%, rgba(1,8,23,.84) 48%, rgba(1,8,23,.56) 58%, rgba(1,8,23,.22) 72%, rgba(1,8,23,.06) 86%, rgba(1,8,23,0) 94%),
    linear-gradient(180deg, rgba(1,8,23,.30) 0%, rgba(1,8,23,0) 14%, rgba(1,8,23,0) 80%, rgba(1,8,23,.45) 90%, rgba(1,8,23,1) 100%),
    url('assets/img/gadanie/tranzity-hero.webp?v=1');
  background-position:0 0, 0 0, 52% 42%;
  background-size:auto, auto, cover;
}

@media (max-width:900px){
  body.page-id-1345 .or-oracle-hero{ min-height:520px; padding:110px 0 64px; }
  /* На телефоне видно около 42% ширины кадра: сдвигаем к левой части, где
     тёмный фон и вспышки. */
  .or-oracle-hero--tranzity .or-oracle-hero__media{ background-position:0 0, 0 0, 26% 34%; }
}


/* ── Внутренние страницы сонника: меньше воздуха ─────────────────────────
   У подзаголовка отступ сверху считался от его собственного кегля
   (margin-top:2.4em ≈ 104 px) плюс 52 px внутреннего отступа под линией — до
   текста набиралось около 156 px, и статья расползалась на пять экранов.
   Поджимаем только страницы символов сонника: остальные разделы не трогаем. */
body.single-sonnik_symbol .entry-content h2{
  margin-top:1.2em;
  padding-top:.6em;
  margin-bottom:.6em;
}
body.single-sonnik_symbol .entry-content > *{ margin-bottom:1em; }
body.single-sonnik_symbol .entry-content .lede-large{ margin-bottom:1em; }
body.single-sonnik_symbol .kw-block{ margin:1.8rem 0; }

/* Верх страницы символа сонника: шапка статьи имела padding 60 px сверху и
   снизу, отступ 32 px, а у обёртки контента был свой padding 60 px. Вместе
   между подзаголовком и первым абзацем набегало 168 px пустоты. */
.entry.entry-header{ padding:24px 0 20px; margin-bottom:8px; }
.entry:not(.entry-header){ padding:8px 0 40px; }



/* ── Дневник снов в профиле ─────────────────────────────────────────────
   Форма записи сна и список последних записей. Форма наследует стили
   .or-form, здесь — только то, чего у профиля не было. */
.or-dreams{ margin:34px 0 0; padding:26px 24px 28px; border:1px solid var(--or-line,#222f47); border-radius:14px; }
.or-dreams__h{ margin:0 0 18px; font-size:1.3rem; }
.or-dreams__text{ min-height:140px; resize:vertical; line-height:1.55; }
.or-dreams__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.or-dreams__row .or-form__row{ margin-bottom:16px; }
.or-dreams__list{ margin:26px 0 0; }
.or-dream{ padding:18px 0 20px; border-top:1px solid var(--or-line,#222f47); }
.or-dream:first-child{ border-top:0; padding-top:6px; }
.or-dream__when{ margin:0 0 8px; font-size:.84rem; color:var(--bone-dim,#9aa6c0); }
.or-dream__when a{ color:var(--or-accent-3,#c5bdfc); }
.or-dream__text{ margin:0; color:#e6ecf8; line-height:1.6; }
.or-dream__repeat{ margin:10px 0 0; padding:10px 14px; border-left:2px solid rgba(106,92,175,.7); background:rgba(106,92,175,.08); font-size:.9rem; color:var(--bone-dim,#9aa6c0); }


/* ── Примечания под формами расчётов ────────────────────────────────────
   Строки примечаний поджаты (межстрочный 1.7 → 1.5 — и в мобильной,
   и в десктопной версии), а на телефоне между кнопкой и примечанием
   добавлен воздух: было 18px, стало 32px. Классы у инструментов свои,
   поэтому перечислены все: натальная карта, совместимость, транзиты,
   нумерология, матрица, гадания. */
/* Селектор из двух классов — не украшение: вложенное правило темы вида
   `& p { margin: 0 0 1.2em }` (специфичность 0,1,1) перебивало одиночный
   класс и гасило отступ. */
.entry-content .natal-note,
.entry-content .num-note,
.entry-content .matrix-note,
.entry-content .gadanie-note { line-height: 1.5; }

@media (max-width: 720px) {
	/* Именно padding, не margin: отступ сверху схлопывался с отступом блока
	   полей (между ними лежит пустой контейнер результатов), и воздух не
	   появлялся. Внутренний отступ не схлопывается. */
	.entry-content .natal-note,
	.entry-content .matrix-note,
	.entry-content .gadanie-note { padding-top: 14px; }
}

/* Пометка о том, что расклад записан в дневник. Появляется под результатом
   и ведёт в профиль; текст — дословно тот, что выбрал владелец. */
.or-saved { margin: 22px 0 0; font-size: .86rem; line-height: 1.5; color: var(--bone-dim, #9aa6c0); }
.or-saved a { color: #c5bdfc; text-decoration: none; border-bottom: 1px solid rgba(197, 189, 252, .35); }
.or-saved a:hover { border-bottom-color: currentColor; }

/* ── Дневник раскладов: плитки, полосы, круг, столбцы, таблица отметок ────
   Ни картинок, ни внешних скриптов: полосы — на дивах, круг и столбцы —
   на SVG. Числа приходят из Oracle_Stats, поэтому диаграмма и таблица
   всегда совпадают. */
.or-stats-block{ margin:34px 0 0; }
.or-stats__empty{ margin:16px 0 0; color:var(--bone-dim,#9aa6c0); }
.or-stats__tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.or-stat{ padding:14px 16px; border:1px solid var(--or-line,#222f47); border-radius:12px; background:rgba(255,255,255,.02); }
.or-stat b{ display:block; font-size:1.6rem; line-height:1.1; color:#fff; }
.or-stat span{ font-size:.78rem; color:var(--bone-dim,#9aa6c0); }
.or-graph{ margin:24px 0 0; padding:22px 22px 24px; border:1px solid var(--or-line,#222f47); border-radius:14px; }
.or-graph__h{ margin:0 0 6px; font-size:1.1rem; }
.or-graph__sub{ margin:0 0 16px; font-size:.86rem; line-height:1.5; color:var(--bone-dim,#9aa6c0); }
.or-graph__split{ display:grid; grid-template-columns:minmax(210px,250px) 1fr; gap:46px; align-items:center; }

.or-bars{ margin:0; padding:0; list-style:none; }
.or-bar{ display:grid; grid-template-columns:minmax(104px,150px) 1fr auto; gap:12px; align-items:center; padding:5px 0; }
.or-bar__label{ font-size:.9rem; color:#e6ecf8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.or-bar__track{ display:block; height:9px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; }
.or-bar__fill{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#7b7cf8,#a99cf5); }
.or-bar__value{ font-size:.86rem; color:var(--bone-dim,#9aa6c0); white-space:nowrap; }
.or-bar__value i{ font-style:normal; opacity:.7; }

.or-donut{ display:flex; gap:16px; align-items:center; }
.or-donut svg{ width:148px; height:148px; flex:0 0 auto; }
.or-donut__num{ fill:#fff; font-size:22px; font-weight:600; }
.or-donut__cap{ fill:#9aa6c0; font-size:9px; letter-spacing:.08em; }
.or-legend{ margin:0; padding:0; list-style:none; font-size:.86rem; color:var(--bone-dim,#9aa6c0); }
.or-legend li{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.or-legend i{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.or-legend b{ margin-left:auto; color:#e6ecf8; }
.or-legend--row{ display:flex; flex-wrap:wrap; gap:14px; margin:12px 0 0; }
.or-legend--row li{ padding:0; }

.or-chart svg{ width:100%; height:190px; display:block; }
.or-chart__months{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:8px 0 0; padding:0; list-style:none; }
.or-chart__months li{ text-align:center; }
.or-chart__months b{ display:block; font-size:.84rem; color:#e6ecf8; }
.or-chart__months span{ font-size:.74rem; color:var(--bone-dim,#9aa6c0); }

.or-numbers{ margin:0 0 16px; }
.or-numbers__head{ margin:0 0 8px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim,#9aa6c0); }
.or-numbers__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:10px; }
.or-numbers__cell{ padding:10px 12px; border:1px solid var(--or-line,#222f47); border-radius:10px; }
.or-numbers__cell span{ display:block; font-size:.74rem; color:var(--bone-dim,#9aa6c0); }
.or-numbers__cell b{ font-size:1.2rem; color:#fff; }

.or-marks{ margin:0 0 18px; }
.or-marks__bar{ height:8px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
.or-marks__bar span{ display:block; height:100%; background:linear-gradient(90deg,#6fc49a,#a99cf5); }
.or-marks__text{ margin:10px 0 0; font-size:.86rem; color:var(--bone-dim,#9aa6c0); }
.or-marks__text b{ color:#e6ecf8; }

.or-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.or-table th{ text-align:left; font-weight:500; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim,#9aa6c0); padding:0 10px 8px 0; }
.or-table td{ padding:10px 10px 10px 0; border-top:1px solid var(--or-line,#222f47); vertical-align:middle; color:#e6ecf8; }
.or-table__kind{ display:block; font-size:.74rem; color:var(--bone-dim,#9aa6c0); }
.or-table__cards{ color:var(--bone-dim,#9aa6c0); }
.or-mark{ display:flex; gap:6px; }
.or-mark__btn{ padding:5px 10px; font-size:.76rem; border:1px solid var(--or-line,#222f47); border-radius:999px; background:transparent; color:var(--bone-dim,#9aa6c0); cursor:pointer; }
.or-mark__btn:hover{ border-color:#a99cf5; color:#fff; }
.or-mark__btn.is-on{ background:#a99cf5; border-color:#a99cf5; color:#101638; }

@media (max-width:760px){
	.or-graph__split{ grid-template-columns:1fr; gap:22px; }
	.or-bar{ grid-template-columns:minmax(84px,120px) 1fr auto; gap:8px; }
	.or-donut{ flex-wrap:wrap; }
	.or-table thead{ display:none; }
	.or-table tr{ display:block; padding:12px 0; border-top:1px solid var(--or-line,#222f47); }
	.or-table td{ display:block; padding:2px 0; border:0; }
	.or-chart svg{ height:150px; }
}