@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant SC";
  src: url("/fonts/cormorant-sc.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("/fonts/onest.woff2") format("woff2");
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-caps: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --font-sans: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --size-base: 17px;
  --size-base-wide: 18px;
  --size-xs: 0.8rem;
  --size-sm: 0.9rem;
  --size-md: 1rem;
  --size-lg: 1.18rem;
  --size-xl: 1.5rem;
  --size-xxl: clamp(1.85rem, 1.45rem + 1.6vw, 2.6rem);
  --size-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --size-hero: clamp(2.5rem, 1.45rem + 4.2vw, 4.6rem);
  --size-line: 1.62;
  --size-line-snug: 1.3;
  --size-line-tight: 1.06;
  --size-caps-track: 0.14em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --space-10: 144px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --layout-text: 720px;
  --layout-wide: 1120px;
  --layout-page: 1240px;
  --layout-gutter: 16px;
  --layout-gutter-wide: 32px;
  --fx-frame: 26px;
  --fx-frame-slice: 32;
  --fx-gramota: 40px;
  --fx-gramota-sm: 22px;
  --fx-frame-sm: 18px;
  --fx-gramota-slice: 48;
  --fx-wheel: 620px;
  --fx-wheel-min: 280px;
  --fx-portrait: 232px;
  --fx-portrait-sm: 148px;
  --fx-sign: 168px;
  --fx-sign-lg: 300px;
  --fx-page-art: 240px;
  --fx-page-art-wide: 360px;
  --fx-icon: 28px;
  --fx-icon-sm: 20px;
  --fx-glow: 28px;
  --fx-glow-sm: 12px;
  --fx-lift: -3px;
  --fx-sky: 920px;
  --fx-horizon: 520px;
  --fx-sun: 360px;
  --fx-divider-w: 240px;
  --fx-divider-h: 24px;
  --fx-band: 76px;
  --fx-stars: 480px;
  --fx-stars-fine: 300px;
  --fx-underline: 0.08em;
  --motion-fast: 0.2s;
  --motion-mid: 0.45s;
  --motion-slow: 1.2s;
  --motion-breathe: 9s;
  --motion-halo: 240s;
  --motion-sidereal: 86164s;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --gradient-horizon: linear-gradient(180deg, #121633 0%, #19204d 12%, #26316b 26%, #45568f 42%, #7d8fbf 56%, #b9c3df 68%, #e6cfca 80%, #f5e7dc 90%, #faf6ec 100%);
  --gradient-sun: radial-gradient(circle, rgba(255, 236, 196, .95) 0, rgba(246, 196, 160, .55) 28%, rgba(240, 190, 170, 0) 68%);
}

:root, [data-theme="neya"] {
  --c-bg: #121633;
  --c-bg-2: #1b2150;
  --c-bg-3: #262d66;
  --c-night: #090b20;
  --c-surface: #161b44;
  --c-surface-2: #1d2456;
  --c-surface-border: rgba(217, 180, 90, .28);
  --c-hairline: rgba(236, 230, 216, .14);
  --c-text: #ece6d8;
  --c-muted: #b9b2a3;
  --c-heading: #f0dca0;
  --c-accent: #d9b45a;
  --c-accent-soft: #f0dca0;
  --c-link: #f0dca0;
  --c-cta-bg: #d9b45a;
  --c-cta-text: #121633;
  --c-cta-hover: #f0dca0;
  --c-ornament: #b3262e;
  --c-ornament-bg: #f7f1e6;
  --c-input-bg: #0c0f2a;
  --c-input-text: #ece6d8;
  --c-input-border: rgba(217, 180, 90, .45);
  --c-focus: #f0dca0;
  --c-danger: #ff9a8f;
  --c-glow: rgba(240, 220, 160, .30);
  --c-shade: rgba(3, 4, 16, .55);
  --c-header-bg: rgba(9, 11, 32, .78);
  --c-frame: url("/img/orn/frame-neya.svg");
  --c-gramota: url("/img/orn/gramota-neya.svg");
  --c-divider: url("/img/orn/divider-neya.svg");
  --c-sky: url("/img/orn/stars.svg"), url("/img/orn/stars-fine.svg"), radial-gradient(ellipse 70% 55% at 78% 8%, rgba(58, 70, 150, .55) 0, rgba(18, 22, 51, 0) 70%), linear-gradient(180deg, #090b20 0%, #121633 100%);
  --c-wheel-trop: #c7d2ec;
  --c-wheel-trop-line: rgba(199, 210, 236, .38);
  --c-wheel-sid: #e2bf66;
  --c-wheel-sid-band: rgba(217, 180, 90, .10);
  --c-wheel-sid-band-alt: rgba(217, 180, 90, .2);
  --c-wheel-planet: #fbf3dc;
  --c-wheel-earth: rgba(3, 4, 16, .42);
  --c-wheel-core: #0b0e2a;
  --c-moon-dark: #252c63;
  --c-moon-lit: #f5ead0;
  --c-band-day: rgba(240, 220, 160, .16);
  --c-band-rahu: #e0675c;
  --c-band-yama: #a397e0;
  --c-band-gulika: #72b3ad;
  --c-band-abhijit: #f0cf72;
  --c-band-now: #fbf3dc;
  --c-el-fire: #f09a7a;
  --c-el-earth: #c5c48a;
  --c-el-air: #a9c4ef;
  --c-el-water: #86c3d6;
}

[data-theme="vega"] {
  --c-bg: #faf6ec;
  --c-bg-2: #f3eee0;
  --c-bg-3: #dee7f2;
  --c-night: #dfe7f3;
  --c-surface: #fdfbf5;
  --c-surface-2: #f6f1e4;
  --c-surface-border: rgba(46, 86, 148, .22);
  --c-hairline: rgba(29, 32, 51, .12);
  --c-text: #1d2033;
  --c-muted: #4f5470;
  --c-heading: #2e5694;
  --c-accent: #8a6116;
  --c-accent-soft: #ceb074;
  --c-link: #2e5694;
  --c-cta-bg: #2e5694;
  --c-cta-text: #ffffff;
  --c-cta-hover: #23457a;
  --c-ornament: #7f9bb8;
  --c-ornament-bg: #dee7f2;
  --c-input-bg: #ffffff;
  --c-input-text: #1d2033;
  --c-input-border: rgba(46, 86, 148, .38);
  --c-focus: #2e5694;
  --c-danger: #a3322a;
  --c-glow: rgba(127, 155, 184, .34);
  --c-shade: rgba(46, 86, 148, .10);
  --c-header-bg: rgba(250, 246, 236, .86);
  --c-frame: url("/img/orn/frame-vega.svg");
  --c-gramota: url("/img/orn/frame-vega.svg");
  --c-divider: url("/img/orn/divider-vega.svg");
  --c-sky: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(243, 214, 204, .9) 0, rgba(250, 246, 236, 0) 70%), radial-gradient(ellipse 60% 50% at 88% 12%, rgba(190, 210, 236, .8) 0, rgba(250, 246, 236, 0) 70%), linear-gradient(180deg, #e3eaf5 0%, #faf6ec 100%);
  --c-wheel-trop: #2e5694;
  --c-wheel-trop-line: rgba(46, 86, 148, .35);
  --c-wheel-sid: #8a6116;
  --c-wheel-sid-band: rgba(206, 176, 116, .14);
  --c-wheel-sid-band-alt: rgba(206, 176, 116, .26);
  --c-wheel-planet: #1d2033;
  --c-wheel-earth: rgba(46, 86, 148, .08);
  --c-wheel-core: #f3eee0;
  --c-moon-dark: #dee7f2;
  --c-moon-lit: #8a6116;
  --c-band-day: rgba(206, 176, 116, .2);
  --c-band-rahu: #b8483f;
  --c-band-yama: #6c5fb0;
  --c-band-gulika: #3d7f79;
  --c-band-abhijit: #a57a18;
  --c-band-now: #1d2033;
  --c-el-fire: #a8452e;
  --c-el-earth: #5f6a2c;
  --c-el-air: #3d64a3;
  --c-el-water: #246a80;
}

/* Общие компоненты сайта. Только var(--…) из config/design.yaml:
   цвет, размер шрифта или отступ числом здесь — ошибка (tests/test_web.py).
   Допустимы 0, 1–2px-рамки, проценты, доли и безразмерные коэффициенты.
   Мобильный первый: базовые правила — для телефона, @media — шире.

   Сюжет: ночь Нэи (индиго, золото, миниатюра) и рассвет Веги (слоновая
   кость, пыльно-голубой, гравюра). Тема — data-theme на <html> или на блоке. */

*, *::before, *::after { box-sizing: border-box; }
/* Ширина рамки-миниатюры: на телефоне тоньше. */
:root { --frame-w: var(--fx-frame-sm); }
@media (min-width: 600px) { :root { --frame-w: var(--fx-frame); } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: var(--size-base); }

body {
  position: relative; isolation: isolate;
  margin: 0; min-height: 100vh;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-sans); font-size: var(--size-md); line-height: var(--size-line);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  /* Страховка: украшения (свечения, солнце) не должны давать сдвиг вбок. */
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--c-link); text-underline-offset: 0.18em; text-decoration-thickness: var(--fx-underline); }
a:hover { color: var(--c-accent); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
::selection { background: var(--c-accent); color: var(--c-bg); }

h1, h2, h3, h4 {
  font-family: var(--font-serif); color: var(--c-heading);
  line-height: var(--size-line-tight); font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--size-display); margin: var(--space-5) 0 var(--space-4); letter-spacing: -0.01em; }
h2 { font-size: var(--size-xxl); margin: var(--space-7) 0 var(--space-4); }
h3 { font-size: var(--size-xl); margin: var(--space-5) 0 var(--space-2); line-height: var(--size-line-snug); }
h4 { font-size: var(--size-lg); margin: 0 0 var(--space-2); line-height: var(--size-line-snug); }
p { margin: 0 0 var(--space-4); }
ul, ol { padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }

.muted, .hint { color: var(--c-muted); font-size: var(--size-sm); }
.lead { font-size: var(--size-lg); line-height: var(--size-line); }
.eyebrow {
  font-family: var(--font-caps); font-weight: 600; font-size: var(--size-lg);
  letter-spacing: var(--size-caps-track); color: var(--c-accent);
  line-height: var(--size-line-snug); margin: 0 0 var(--space-2);
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.02em; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 30; background: var(--c-surface); padding: var(--space-2) var(--space-3); }

/* --- Небо страницы: звёзды Нэи или рассвет Веги над шапкой ----------------------- */
.sky {
  position: absolute; z-index: -1; inset: 0 0 auto 0; height: var(--fx-sky);
  background: var(--c-sky);
  -webkit-mask-image: linear-gradient(180deg, black 45%, transparent);
  mask-image: linear-gradient(180deg, black 45%, transparent);
  pointer-events: none;
}

/* Вышитая лента: крестик по льну у Нэи, голубая нить у Веги. */
.ornament {
  height: var(--space-3);
  background-color: var(--c-ornament-bg);
  background-image:
    linear-gradient(45deg, transparent 42%, var(--c-ornament) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--c-ornament) 42% 58%, transparent 58%);
  background-size: var(--space-3) var(--space-3);
}
/* Разделитель: линия с лотосом (Нэя) или розой ветров (Вега). */
.divider {
  height: var(--fx-divider-h); margin: var(--space-6) auto;
  background: var(--c-divider) center / var(--fx-divider-w) var(--fx-divider-h) no-repeat;
}

/* --- Шапка ---------------------------------------------------------------- */
.top {
  position: relative; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--layout-gutter) var(--space-2);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-hairline);
  transition: background-color var(--motion-mid) ease, border-color var(--motion-mid) ease;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-serif); font-size: var(--size-xl); font-weight: 700; line-height: 1;
  color: var(--c-heading); text-decoration: none;
}
.brand svg { width: var(--fx-icon-sm); height: var(--fx-icon-sm); fill: var(--c-accent); }
.brand small { font-family: var(--font-caps); font-size: var(--size-sm); font-weight: 600; letter-spacing: var(--size-caps-track); color: var(--c-muted); }
.nav {
  order: 3; width: 100%;
  display: flex; gap: var(--space-5);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  padding: var(--space-1) 0;
  font-family: var(--font-caps); font-weight: 600; font-size: var(--size-lg); letter-spacing: 0.03em;
  -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
  mask-image: linear-gradient(90deg, black 88%, transparent);
}
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--c-text); text-decoration: none; }
.nav a:hover { color: var(--c-accent); }
.nav a[aria-current="page"] { color: var(--c-heading); text-decoration: underline; text-decoration-color: var(--c-accent); }
.top-cta {
  margin-left: auto; font-size: var(--size-sm); font-weight: 600; text-decoration: none;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--c-surface-border); border-radius: var(--radius-pill);
}
.top-cta:hover { border-color: var(--c-accent); }

/* --- Колонки ---------------------------------------------------------------- */
main { display: block; padding: 0 var(--layout-gutter) var(--space-8); }
main > *, .crumbs { max-width: var(--layout-text); margin-left: auto; margin-right: auto; }
main > .block, main > .hero, main > .sisters, main > .wide { max-width: var(--layout-wide); }

.crumbs { padding: var(--space-3) var(--layout-gutter) 0; font-size: var(--size-sm); color: var(--c-muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--space-1); color: var(--c-accent); }
.crumbs a { color: var(--c-muted); }

/* Зона — полоса во всю ширину окна со своим небом (главная, мост). */
main > .zone {
  max-width: none;
  margin-left: calc(-1 * var(--layout-gutter)); margin-right: calc(-1 * var(--layout-gutter));
  padding-left: var(--layout-gutter); padding-right: var(--layout-gutter);
  position: relative; overflow: clip; display: flow-root;
}
.zone-inner { max-width: var(--layout-page); margin: 0 auto; }
.zone-night { background: var(--c-sky); background-color: var(--c-bg); padding-bottom: var(--space-8); }
.zone-dawn { background: var(--c-bg); color: var(--c-text); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.zone + .zone { margin-top: 0; }
main:has(> .zone:last-child) { padding-bottom: 0; }

/* Строка-дисклеймер под текстом (Page.show_disclaimer) — тихая, одна. */
main > .disclaimer {
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid var(--c-surface-border); color: var(--c-muted); font-size: var(--size-sm);
}
main > .disclaimer a { color: var(--c-muted); }

.section-head { max-width: var(--layout-text); margin-bottom: var(--space-5); }
.section-head h2 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.section-head p { color: var(--c-muted); margin: 0; }
.zone-dawn .zone-inner > section:first-child .section-head h2 { margin-top: var(--space-4); }

.hero { padding: var(--space-6) 0 var(--space-4); }
.hero h1 { font-size: var(--size-display); }
.hero-buttons, .bot-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }

/* --- Кнопки ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer; min-height: var(--space-7);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--c-cta-bg); border-radius: var(--radius-pill);
  background: var(--c-cta-bg); color: var(--c-cta-text);
  font: inherit; font-weight: 600; line-height: var(--size-line-snug); text-decoration: none; text-align: center;
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-mid) ease, transform var(--motion-fast) ease;
}
.btn:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-cta-text); box-shadow: 0 0 var(--fx-glow) var(--c-glow); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--c-link); border-color: var(--c-surface-border); }
.btn-ghost:hover { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }

/* --- Плитки-миниатюры: рамка с угловыми розетками, картинка, свечение ------ */
/* Плитки — flex с переносом: неполный последний ряд встаёт по центру, а не висит слева. */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.tiles > li { flex: 0 1 100%; min-width: 0; margin: 0; }
.tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  color: var(--c-text); text-decoration: none;
  background: var(--c-surface); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
  transition: transform var(--motion-mid) var(--motion-ease), filter var(--motion-mid) ease;
}
.tile:hover, .tile:focus-visible { color: var(--c-text); transform: translateY(var(--fx-lift)); filter: drop-shadow(0 0 var(--fx-glow-sm) var(--c-glow)); }
.tile-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-bg-2); }
.tile-art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--motion-ease); }
.tile:hover .tile-art img { transform: scale(1.04); }
.tile-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); flex: 1; }
.tile-kicker { font-family: var(--font-caps); font-weight: 600; font-size: var(--size-md); letter-spacing: var(--size-caps-track); color: var(--c-accent); }
.tile h3 { margin: 0; font-size: var(--size-xl); }
.tile p { margin: 0; color: var(--c-muted); }
.tile-go { margin-top: auto; padding-top: var(--space-2); font-weight: 600; color: var(--c-link); }
.tile-go::after { content: " →"; transition: margin var(--motion-fast) ease; }
.tile:hover .tile-go::after { margin-left: var(--space-1); }

/* Обычные карточки (цены, справки). */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.card {
  background: var(--c-surface); border: 1px solid var(--c-surface-border);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
}
.card p { margin: var(--space-2) 0 0; }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--c-accent); color: inherit; }
.card-link h3 { margin-top: 0; }
.card .short { color: var(--c-accent); font-weight: 600; }
.card .price { font-family: var(--font-serif); font-size: var(--size-xl); font-weight: 700; color: var(--c-heading); font-variant-numeric: lining-nums tabular-nums; }
.group { margin-top: var(--space-6); font-family: var(--font-caps); letter-spacing: var(--size-caps-track); color: var(--c-accent); font-size: var(--size-xl); }

/* Картинка в шапке статьи (art.page_art): своя у каждой страницы группы.
   На телефоне — по центру над заголовком, на широком — справа, текст обтекает. */
.page-art {
  margin: var(--space-4) auto var(--space-5);
  width: 70%; max-width: var(--fx-page-art);
  background: var(--c-surface); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
}
.page-art-wide { width: 100%; max-width: var(--fx-page-art-wide); }
.page-art img { display: block; width: 100%; height: auto; }
@media (min-width: 720px) {
  .page-art { float: right; width: var(--fx-page-art); margin: var(--space-2) 0 var(--space-4) var(--space-5); }
  .page-art-wide { width: var(--fx-page-art-wide); }
  :has(> .page-art) { display: flow-root; }
}

/* Рамки результата: миниатюра и «грамота». */
.framed {
  background: var(--c-surface); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
  padding: var(--space-4);
}
.gramota {
  background: var(--c-surface); background-clip: padding-box;
  border: var(--fx-gramota) solid transparent;
  border-image: var(--c-gramota) var(--fx-gramota-slice) / var(--fx-gramota) stretch;
  padding: var(--space-4) var(--space-3);
}

/* --- Знаки зодиака: карточки-гравюры ---------------------------------------------- */
.signs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; padding: 0; list-style: none; }
.signs-grid li { margin: 0; }
.sign-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; color: var(--c-text); text-decoration: none; }
.sign-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--c-surface-border); padding: var(--space-1); background: var(--c-surface);
  transition: transform var(--motion-mid) var(--motion-ease), box-shadow var(--motion-mid) ease;
}
.sign-card:hover img { transform: translateY(var(--fx-lift)); box-shadow: 0 0 var(--fx-glow) var(--c-glow); }
.sign-card:hover { color: var(--c-text); }
.sign-card-text { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.sign-teaser { font-size: var(--size-sm); color: var(--c-text); line-height: var(--size-line-snug); }
.signs-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.signs-rows li { margin: 0; }
.signs-rows .sign-card {
  flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-4);
  padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-surface-border); border-radius: var(--radius-sm);
  height: 100%;
}
.signs-rows .sign-card:hover { border-color: var(--c-accent); }
.signs-rows .sign-card img { width: var(--space-9); flex: none; }
.signs-rows .sign-card-text { align-items: flex-start; }
.sign-card strong { font-family: var(--font-serif); font-size: var(--size-lg); color: var(--c-heading); line-height: var(--size-line-snug); }
.sign-card small { font-size: var(--size-xs); color: var(--c-muted); line-height: var(--size-line-snug); }
.sign-card p { margin: 0; font-size: var(--size-sm); color: var(--c-text); text-align: left; }
.sign-card[aria-current="page"] img { border-color: var(--c-accent); outline: 1px solid var(--c-accent); }

/* Значок стихии. */
.el { display: inline-flex; align-items: center; gap: var(--space-1); }
.el svg { width: var(--fx-icon-sm); height: var(--fx-icon-sm); fill: none; stroke-width: 2; }
.el-fire svg { stroke: var(--c-el-fire); }
.el-earth svg { stroke: var(--c-el-earth); }
.el-air svg { stroke: var(--c-el-air); }
.el-water svg { stroke: var(--c-el-water); }

/* --- Колесо неба -------------------------------------------------------------------------- */
.sky-figure { margin: 0; display: grid; justify-items: center; gap: var(--space-4); }
.sky-link { display: block; width: 100%; max-width: var(--fx-wheel); color: inherit; border-radius: 50%; }
.sky-link:focus-visible { outline-offset: var(--space-2); }
.sky-wheel { display: block; width: 100%; height: auto; overflow: visible; }
.sky-halo { fill: none; stroke: var(--c-wheel-sid); stroke-width: 1; stroke-dasharray: 1 7; opacity: 0.7; }
.sky-earth { fill: var(--c-wheel-earth); }
.sky-trop-ring { fill: none; stroke: var(--c-wheel-trop-line); stroke-width: 1; }
.sky-trop-line { stroke: var(--c-wheel-trop-line); stroke-width: 1; }
.sky-trop-glyph { fill: var(--c-wheel-trop); }
.sky-tick { stroke: var(--c-wheel-trop-line); stroke-width: 1; }
.sky-sid-band { fill: var(--c-wheel-sid-band); }
.sky-sid-band-alt { fill: var(--c-wheel-sid-band-alt); }
.sky-sid-ring, .sky-sid-line { fill: none; stroke: var(--c-wheel-sid); stroke-width: 1; opacity: 0.8; }
.sky-sid-glyph { fill: var(--c-wheel-sid); }
.sky-ayan { fill: none; stroke: var(--c-ornament); stroke-width: 3; stroke-linecap: round; }
.sky-lead { fill: none; stroke: var(--c-wheel-trop-line); stroke-width: 1; }
.sky-dot { fill: var(--c-wheel-sid); }
.sky-planet { fill: var(--c-wheel-planet); }
.sky-body-sun .sky-planet, .sky-body-moon .sky-planet { fill: var(--c-accent-soft); }
.sky-retro { fill: var(--c-muted); font-family: var(--font-sans); font-size: var(--size-sm); font-weight: 600; }
.sky-horizon { stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 6 5; opacity: 0.75; }
.sky-side { fill: var(--c-muted); font-family: var(--font-caps); font-size: var(--size-lg); font-weight: 600; letter-spacing: 0.12em; }
.sky-core { fill: var(--c-wheel-core); stroke: var(--c-wheel-sid); stroke-width: 1; }
.sky-moon-dark { fill: var(--c-moon-dark); }
.sky-moon-lit { fill: var(--c-moon-lit); }
.sky-turn, .sky-halo { transform-box: view-box; transform-origin: 50% 50%; }
.sky-caption { width: 100%; max-width: var(--layout-text); text-align: center; }
.sky-caption .eyebrow { margin: 0; }
.sky-when { display: block; font-family: var(--font-mono); color: var(--c-heading); font-size: var(--size-lg); margin: var(--space-1) 0 var(--space-2); }
.sky-moon-line { margin: 0 auto var(--space-3); max-width: var(--layout-text); }
.sky-legend { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--size-sm); color: var(--c-muted); }
.sky-legend li { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.sky-legend i { display: inline-block; width: var(--space-5); height: 0; border-top: 2px solid var(--c-wheel-trop); }
.sky-legend .sid i { border-top-color: var(--c-wheel-sid); border-top-width: 2px; border-top-style: double; }
.sky-legend .ayan i { border-top-color: var(--c-ornament); border-top-width: 2px; }

/* --- Главная: герой, горизонт, рассвет ---------------------------------------------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) 0 var(--space-6); align-items: center; }
.home-hero h1 { font-size: var(--size-hero); margin: var(--space-3) 0 var(--space-4); }
.home-hero h1 span { display: block; }
.home-hero h1 .h1-sub { font-size: 0.5em; font-weight: 500; line-height: var(--size-line-snug); color: var(--c-text); margin-top: var(--space-3); letter-spacing: 0; }
.home-hero .lead { color: var(--c-text); }

.horizon {
  background: var(--gradient-horizon);
  padding-top: var(--space-8); padding-bottom: var(--space-8);
  color: var(--c-text);
}
.horizon h2 { text-align: center; margin: 0 auto var(--space-3); max-width: var(--layout-text); }
.horizon .section-lead { text-align: center; margin: 0 auto var(--space-7); max-width: var(--layout-text); color: var(--c-muted); }
.sun {
  position: absolute; z-index: 0; left: 50%; bottom: calc(-0.5 * var(--fx-sun));
  width: var(--fx-sun); height: var(--fx-sun); margin-left: calc(-0.5 * var(--fx-sun));
  border-radius: 50%; background: var(--gradient-sun); pointer-events: none;
}
.horizon .zone-inner { position: relative; z-index: 1; }

.sisters-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-width: var(--layout-wide); margin: 0 auto; }
.sister {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--c-surface); color: var(--c-text); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
  padding: var(--space-5) var(--space-4) var(--space-5);
}
.portrait {
  width: var(--fx-portrait-sm); max-width: 70%; aspect-ratio: 1; margin: 0 0 var(--space-4);
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 42% 42% var(--radius-sm) var(--radius-sm);
  overflow: hidden; padding: var(--space-1);
  border: 1px solid var(--c-accent); outline: 1px solid var(--c-surface-border); outline-offset: var(--space-1);
  background: var(--c-bg-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sister .eyebrow { margin: 0; }
.sister h3 { margin: var(--space-1) 0 var(--space-3); font-size: var(--size-xxl); }
.sister p { max-width: var(--layout-text); }
.sister .bot-cta-buttons { justify-content: center; margin-bottom: 0; }

.bridge-banner {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-4);
  max-width: var(--layout-wide); margin: var(--space-7) auto 0;
  color: var(--c-text); text-decoration: none;
}
.bridge-banner:hover { color: var(--c-text); filter: drop-shadow(0 0 var(--fx-glow-sm) var(--c-glow)); }
.bridge-banner h3 { margin: 0 0 var(--space-2); }
.bridge-banner p { margin: 0; color: var(--c-muted); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); counter-reset: step; }
.steps li { margin: 0; counter-increment: step; padding-top: var(--space-4); border-top: 1px solid var(--c-surface-border); }
.steps li::before {
  content: counter(step); display: block;
  font-family: var(--font-serif); font-weight: 600; font-size: var(--size-display); line-height: 1; color: var(--c-accent);
  font-variant-numeric: lining-nums; margin-bottom: var(--space-2);
}
.steps strong { display: block; font-family: var(--font-serif); font-size: var(--size-xl); color: var(--c-heading); line-height: var(--size-line-snug); margin-bottom: var(--space-1); }

.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.notes > section { border-top: 1px solid var(--c-surface-border); }
.notes h2 { font-size: var(--size-xl); margin-top: var(--space-4); }

/* --- Сёстры (старый блок) ------------------------------------------------------------- */
.sister-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* --- Переход в бот --------------------------------------------------------------------- */
.bot-cta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center;
  background: var(--c-surface); color: var(--c-text); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
  padding: var(--space-5) var(--space-4); margin-top: var(--space-7);
}
.bot-cta h2 { margin: 0 0 var(--space-2); font-size: var(--size-xl); }
.bot-cta p { margin: 0; }
.bot-cta-face { width: var(--space-9); height: var(--space-9); border-radius: 50%; overflow: hidden; border: 1px solid var(--c-accent); padding: var(--space-1); background: var(--c-bg-2); }
.bot-cta-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bot-cta-buttons { margin-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------------ */
.faq details { border-bottom: 1px solid var(--c-surface-border); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--space-4) var(--space-7) var(--space-4) 0;
  font-weight: 600; font-size: var(--size-lg); line-height: var(--size-line-snug);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  font-family: var(--font-serif); font-size: var(--size-xxl); line-height: 1; color: var(--c-accent);
  transition: transform var(--motion-fast) ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 var(--space-4); color: var(--c-text); max-width: var(--layout-text); }

/* --- Форма калькулятора ------------------------------------------------------- */
.calc-card {
  background: var(--c-surface); color: var(--c-text); background-clip: padding-box;
  border: var(--frame-w) solid transparent;
  border-image: var(--c-frame) var(--fx-frame-slice) / var(--frame-w) stretch;
  padding: var(--space-5) var(--space-4); margin-top: var(--space-6);
}
.calc-card > h2 { margin-top: 0; }
fieldset { min-width: 0; }
.birth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.birth-form > *, .field { min-width: 0; }
.field label { display: block; font-weight: 600; font-size: var(--size-sm); letter-spacing: 0.01em; margin-bottom: var(--space-2); }
.field input[type="date"], .field input[type="time"], .field input[type="text"], .field select {
  display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--space-7);
  padding: var(--space-3) var(--space-4); font: inherit; line-height: var(--size-line-snug);
  background: var(--c-input-bg); color: var(--c-input-text);
  border: 1px solid var(--c-input-border); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
/* Safari на iPhone: поле даты с appearance:none теряет высоту и выравнивание. */
.field input::-webkit-date-and-time-value { text-align: left; }
.field input::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }
[data-theme="neya"] .field input::-webkit-calendar-picker-indicator, :root:not([data-theme="vega"]) .field input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
[data-theme="vega"] .field input::-webkit-calendar-picker-indicator { filter: none; }
.field input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-glow); }
.field input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.field input::placeholder { color: var(--c-muted); opacity: 1; }
.field .check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--size-md); margin-top: var(--space-3); cursor: pointer; }
.field .check input { width: var(--space-5); height: var(--space-5); accent-color: var(--c-accent); margin: 0; }
.field .hint { margin: var(--space-2) 0 0; }
.has-error input { border-color: var(--c-danger); }
.error { color: var(--c-danger); font-size: var(--size-sm); margin: var(--space-2) 0 0; }
.birth-form > .btn { justify-self: start; min-width: 60%; }
.birth-form > .hint { margin: 0; }
.city-field { position: relative; }
.city-list {
  position: absolute; left: 0; right: 0; z-index: 12; margin: var(--space-1) 0 0; padding: var(--space-1) 0; list-style: none;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-accent); border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-3) var(--space-6) var(--c-shade);
  max-height: 60vh; overflow-y: auto;
}
.city-list li { margin: 0; padding: var(--space-3) var(--space-4); cursor: pointer; border-left: 2px solid transparent; line-height: var(--size-line-snug); }
.city-list li + li { border-top: 1px solid var(--c-hairline); }
.city-list li span { color: var(--c-muted); font-size: var(--size-sm); }
.city-list li[aria-selected="true"], .city-list li:hover { background: var(--c-bg-2); border-left-color: var(--c-accent); }

/* --- Таблицы: широкие прокручиваются внутри себя, страница — нет ------------------- */
table { font-variant-numeric: tabular-nums; }

/* --- Юридические тексты ------------------------------------------------------- */
.legal { padding-top: var(--space-4); }
.legal .table { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--size-sm); }
.legal th, .legal td { border: 1px solid var(--c-surface-border); padding: var(--space-2); text-align: left; vertical-align: top; }
.legal blockquote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--c-accent); }
.draft { color: var(--c-danger); font-weight: 600; }

/* --- Подвал ------------------------------------------------------------------ */
.foot { font-size: var(--size-sm); background: var(--c-bg); color: var(--c-text); border-top: 1px solid var(--c-hairline); }
.foot .divider { margin: 0 auto; transform: translateY(-50%); background-color: var(--c-bg); width: calc(var(--fx-divider-w) + var(--space-5)); }
.foot-inner { max-width: var(--layout-wide); margin: 0 auto; padding: var(--space-4) var(--layout-gutter) var(--space-7); }
.foot-brand { font-family: var(--font-serif); font-size: var(--size-xl); color: var(--c-heading); font-weight: 700; margin-bottom: var(--space-3); }
.foot-links a { color: var(--c-text); }
.foot .muted { font-size: var(--size-xs); }

/* --- Баннер cookie --------------------------------------------------------------- */
.consent {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 20;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-surface-border); border-radius: var(--radius-md);
  box-shadow: 0 var(--space-3) var(--space-6) var(--c-shade);
  padding: var(--space-4); font-size: var(--size-sm);
}
.consent p { margin: 0 0 var(--space-3); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent[hidden] { display: none; }

/* --- Движение: только если человек его не выключил ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .sky-turn { animation: sky-turn var(--motion-sidereal) linear infinite; }
  .sky-halo { animation: sky-halo var(--motion-halo) linear infinite; }
  .sky-planet { animation: sky-breathe var(--motion-breathe) ease-in-out infinite; }
  .sky-body:nth-child(2n) .sky-planet { animation-delay: calc(-0.5 * var(--motion-breathe)); }
  .sky-moon-lit { animation: sky-breathe var(--motion-breathe) ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .sun { animation: sun-rise linear both; animation-timeline: view(); animation-range: entry 10% exit 20%; }
    .zone-night .sky-figure { animation: sky-sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes sky-turn { to { transform: rotate(360deg); } }
@keyframes sky-halo { to { transform: rotate(-360deg); } }
@keyframes sky-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes sun-rise {
  from { transform: translateY(35%) scale(0.8); opacity: 0.25; }
  to { transform: translateY(-30%) scale(1.15); opacity: 1; }
}
@keyframes sky-sink { to { opacity: 0.35; transform: translateY(8%) scale(0.96); } }

@media (min-width: 600px) {
  .tiles > li { flex-basis: calc(50% - var(--space-5) / 2); }
  .signs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .signs-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-cta { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-5) var(--space-6); }
  .bot-cta-buttons { grid-column: 2; }
  .calc-card { padding: var(--space-6); }
  .gramota { padding: var(--space-5); }
  .framed { padding: var(--space-5); }
}
@media (min-width: 720px) {
  .nav { order: 0; width: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  .top-cta { margin-left: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sister-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent { left: auto; max-width: var(--layout-text); }
  .sisters-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait { width: var(--fx-portrait); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .bridge-banner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .foot-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 var(--space-7); }
  .foot-inner > * { grid-column: 2; }
  .foot-inner > .foot-brand { grid-column: 1; grid-row: 1 / span 5; }
}
@media (min-width: 1000px) {
  html { font-size: var(--size-base-wide); }
  main { padding-left: var(--layout-gutter-wide); padding-right: var(--layout-gutter-wide); }
  main > .zone { margin-left: calc(-1 * var(--layout-gutter-wide)); margin-right: calc(-1 * var(--layout-gutter-wide)); padding-left: var(--layout-gutter-wide); padding-right: var(--layout-gutter-wide); }
  .top { position: sticky; top: 0; padding: var(--space-3) var(--layout-gutter-wide); background: var(--c-header-bg); -webkit-backdrop-filter: blur(var(--space-3)); backdrop-filter: blur(var(--space-3)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles > li { flex-basis: calc(25% - var(--space-5) * 3 / 4); }
  .tiles-3 > li { flex-basis: calc(33.333% - var(--space-5) * 2 / 3); }
  .signs-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .signs-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "top fig" "rest fig";
    gap: 0 var(--space-7); padding: var(--space-6) 0 var(--space-8); align-content: center;
  }
  .hero-top { grid-area: top; align-self: end; }
  .hero-rest { grid-area: rest; align-self: start; }
  .home-hero .sky-figure { grid-area: fig; }
}

/* Якорь ответа калькулятора (#result): страница открывается на нём после
   отправки формы — с отступом, чтобы заголовок не лип к краю. */
#result { scroll-margin-top: var(--space-5); }