/* =========================================================
   Pogadaem.net — «шатёр гадалки».

   Сайт устроен как вечерний шатёр: снаружи ночь, внутри свеча.
   Фон один на всё — прибит к окну и не прокручивается, поэтому
   при прокрутке страница едет мимо неподвижного огня, как если бы
   человек шёл вдоль стола.

   Слои снизу вверх:
     .tent-sky     — ночь и складки ткани
     .tent-stars   — пыль и звёзды, рисует js/atmosphere.js
     .tent-glow    — свеча: тёплое пятно, дышит
     .tent-smoke   — дым благовоний, три полосы разной длины
     .tent-drape   — бархат по краям окна
     .tent-vignette— затемнение углов
     .aura         — свет за курсором, будто свечу несут в руке

   Ни одного нового файла в site/img/: дерево, бархат, зерно и дым
   собраны из градиентов, а орнаменты — из inline-SVG в data:.
   Картинки там и не удержать — build-images.py стирает всё,
   чего нет в его списке.
   ========================================================= */

:root {
  /* ночь: от чёрно-фиолетового к сливовому */
  --night: #0c0710;
  --night-2: #150d1c;
  --night-3: #1d1226;

  /* бархат шатра */
  --velvet: #2a1330;
  --wine: #4d1629;

  /* свеча */
  --ember: #ff9c4a;

  /* латунь */
  --gold: #d9b169;
  --gold-soft: #f3e0b5;
  --gold-deep: #8d6a2f;

  /* бирюза — единственное, что взято из макета 2018 года без изменений */
  --teal: #63b7ac;
  --teal-glow: #8fe8da;
  --teal-dark: #2c6a62;
  --teal-pale: #e7f4f2;

  /* пергамент: на нём лежат толкования, статьи и формы */
  --paper: #faf3e6;
  --paper-2: #f0e5d0;
  --ink: #241a12;
  --ink-2: #4a3a2b;
  --muted: #736453;
  --line: #e4d8c2;

  /* текст на тёмном */
  --text: #ece1d4;
  --text-dim: rgba(236, 225, 212, .68);
  --text-faint: rgba(236, 225, 212, .52);

  /* стеклянные плашки поверх ночи */
  --panel-2: rgba(30, 17, 38, .72);
  --panel-line: rgba(217, 177, 105, .22);

  --shadow: 0 6px 18px rgba(0, 0, 0, .38), 0 18px 44px rgba(0, 0, 0, .32);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .46), 0 40px 80px rgba(0, 0, 0, .42);
  --glow-teal: 0 0 0 1px rgba(99, 183, 172, .4), 0 8px 34px rgba(99, 183, 172, .24);

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1200px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* зерно: одна фрактальная турбулентность, ложится поверх тёмных плоскостей */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* тёмное дерево стола: полосы вдоль волокна поверх тёплой основы */
  --wood:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(87deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, #2c1c14, #17100b 55%, #221610);

  /* бархат: вертикальные складки ткани */
  --velvet-fold:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .34) 0 6px,
      rgba(255, 255, 255, .03) 16px,
      rgba(0, 0, 0, .3) 30px,
      rgba(0, 0, 0, .34) 38px);
}

/* =========================================================
   Сброс и основа
   ========================================================= */

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

/* Свиток, печать и разборы расклада прячутся атрибутом hidden, а свой
   display у них есть. Без !important правило файла побеждает атрибут,
   и спрятанное видно. */
[hidden] { display: none !important; }

/* Фон отдан html, а не body: слои шатра лежат под содержимым
   с отрицательным z-index, и фон body закрыл бы их собой. */
html {
  scroll-behavior: smooth;
  background: var(--night);
}

/* Подвал прижат к низу окна: на короткой странице — статье из трёх абзацев
   или пустом поиске — иначе под ним оставалась пустая полоса. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.34rem; }

p { margin: 0 0 1em; }

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

/* <picture> — обёртка над картинкой ради запасного PNG для старых браузеров.
   Сама она инлайновая, поэтому там, где размеры заданы картинке, обёртка
   повторяет их за ней. */
picture { display: block; }
.tile picture, .card-face picture { width: 100%; height: 100%; }
.scroll-aside picture { width: 100%; }

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

::selection { background: rgba(217, 177, 105, .32); color: #fff; }

/* полоса прокрутки под латунь */
* { scrollbar-width: thin; scrollbar-color: rgba(217, 177, 105, .45) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(217, 177, 105, .55), rgba(141, 106, 47, .55));
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(217, 177, 105, .8); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* Слои шатра прибиты к окну, поэтому содержимое поднято над ними
   собственным слоем — иначе фон перекрыл бы текст. */
body > header, body > nav, body > section, body > main, body > footer {
  position: relative;
  z-index: 1;
}
main { flex: 1 0 auto; width: 100%; }
.site-head, .site-nav, .hero, .site-foot { flex: 0 0 auto; }

/* мелкая подпись капителью — повторяется в меню, метках и плитках */
.spread-meta, .search-section, .tagline, .site-nav a, .tile-label span, .card-rev,
.hero-kicker, .num-cell-title, .foot-cols b, .date-form label, .feedback-form label {
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =========================================================
   Шатёр: неподвижный фон под всей страницей
   ========================================================= */

.tent {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* Ночь за тканью и сама ткань: тёплое к середине, глухое по краям. */
.tent-sky {
  position: absolute;
  inset: -2%;
  background:
    radial-gradient(120% 78% at 50% -14%, rgba(122, 46, 96, .34), transparent 62%),
    radial-gradient(80% 55% at 50% 108%, rgba(77, 22, 41, .38), transparent 68%),
    radial-gradient(70% 34% at 50% 56%, rgba(74, 38, 82, .3), transparent 72%),
    radial-gradient(46% 40% at 12% 22%, rgba(43, 24, 74, .32), transparent 70%),
    radial-gradient(40% 36% at 88% 66%, rgba(28, 66, 66, .2), transparent 72%),
    linear-gradient(175deg, var(--night-2), var(--night) 46%, #0a0610);
}

/* Купол шатра: сходящиеся к вершине швы. Один конический градиент
   с чередующимися полосами — по краям экрана они расходятся веером. */
.tent-sky::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto;
  height: 130%;
  background: repeating-conic-gradient(from 200deg at 50% -6%,
    rgba(255, 255, 255, .014) 0deg 1.1deg,
    transparent 1.1deg 4.8deg);
  /* Швы гаснут книзу: во всю высоту окна они читались полосами поперёк
     содержимого, а нужны только там, где ткань сходится к вершине. */
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 42%, transparent 72%);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 42%, transparent 72%);
}
.tent-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .085;
}

/* Пыль и звёзды. Холст рисует js/atmosphere.js; без скрипта остаётся
   пустая прозрачная плоскость и ничего не ломается. */
.tent-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}

/* Свеча за кадром: тёплое пятно, которое дышит. Два слоя с разным ритмом,
   чтобы биение не читалось как ровный пульс. */
.tent-glow {
  position: absolute;
  left: 50%;
  top: -18vh;
  width: min(1500px, 150vw);
  height: min(1100px, 120vh);
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(255, 156, 74, .2), rgba(255, 156, 74, .07) 46%, transparent 72%),
    radial-gradient(closest-side, rgba(217, 177, 105, .16), transparent 62%);
  mix-blend-mode: screen;
  animation: candle 7.2s ease-in-out infinite;
}
/* Мерцание без сдвига: для тех слоёв, у которых свой transform. */
@keyframes flicker {
  0%, 100% { opacity: .82; }
  17% { opacity: 1; }
  38% { opacity: .74; }
  59% { opacity: .95; }
  81% { opacity: .8; }
}

@keyframes candle {
  0%, 100% { opacity: .82; transform: translateX(-50%) scale(1); }
  17% { opacity: 1; transform: translateX(-50.6%) scale(1.035); }
  38% { opacity: .74; transform: translateX(-49.5%) scale(.985); }
  59% { opacity: .95; transform: translateX(-50.3%) scale(1.02); }
  81% { opacity: .8; transform: translateX(-49.8%) scale(.995); }
}

/* Дым благовоний: три размытых столба, каждый идёт вверх со своим шагом. */
.tent-smoke { position: absolute; inset: 0; }
.tent-smoke i {
  position: absolute;
  bottom: -30vh;
  width: 40vmin;
  height: 78vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 196, 220, .075), transparent 70%);
  filter: blur(28px);
  animation: smoke 26s linear infinite;
}
.tent-smoke i:nth-child(1) { left: 6%;  animation-duration: 29s; }
.tent-smoke i:nth-child(2) { left: 46%; animation-duration: 36s; animation-delay: -12s; opacity: .7; }
.tent-smoke i:nth-child(3) { left: 79%; animation-duration: 32s; animation-delay: -22s; opacity: .8; }
@keyframes smoke {
  0%   { transform: translate(0, 0) scale(.8); opacity: 0; }
  14%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { transform: translate(4vw, -128vh) scale(1.5); opacity: 0; }
}

/* Бархат по краям окна: складки ткани, за которыми виден стол. */
.tent-drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 9vw, 168px);
  background:
    var(--velvet-fold),
    linear-gradient(90deg, var(--wine), var(--velvet) 62%, transparent);
  background-size: 44px 100%, 100% 100%;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, #000 26%, transparent);
  mask-image: linear-gradient(90deg, #000 26%, transparent);
}
.tent-drape-l { left: 0; }
.tent-drape-r { right: 0; transform: scaleX(-1); }

/* Затемнение углов: собирает взгляд к середине стола. */
.tent-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(126% 94% at 50% 34%, transparent 46%, rgba(6, 3, 9, .5) 92%);
}

/* Свет за курсором: будто свечу несут в руке. Координаты ставит
   js/atmosphere.js, до первого движения мыши пятно спрятано. */
.aura {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 96, .1), rgba(217, 177, 105, .045) 44%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
  will-change: transform;
}
.aura.is-on { opacity: 1; }

/* =========================================================
   Занавес входа
   ----------------------------------------------------------
   Две половины бархата разъезжаются один раз за посещение.
   Разводит их сама анимация, а не скрипт: если js не дойдёт
   до страницы, занавес всё равно откроется и не запрёт сайт.
   Показывается только тогда, когда <html> получил класс
   has-curtain — его ставит короткий скрипт в <head>.
   ========================================================= */

.curtain { display: none; }

.has-curtain .curtain {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.has-curtain .curtain-half {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 51%;
  background:
    var(--velvet-fold),
    linear-gradient(180deg, #5a1a30, var(--velvet) 55%, #1b0d20);
  background-size: 52px 100%, 100% 100%;
  box-shadow: 0 0 90px 30px rgba(0, 0, 0, .6);
  animation: curtain-open 1.5s .55s var(--ease-out) both;
}
.has-curtain .curtain-l { left: 0; transform-origin: left center; }
.has-curtain .curtain-r { right: 0; transform-origin: right center; animation-name: curtain-open-r; }

@keyframes curtain-open   { from { transform: none; } to { transform: translateX(-102%) skewX(4deg); } }
@keyframes curtain-open-r { from { transform: none; } to { transform: translateX(102%) skewX(-4deg); } }

/* Золотая нить по шву и вспышка свечи в тот миг, когда ткань разошлась. */
.has-curtain .curtain-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(243, 224, 181, .9) 22%, rgba(255, 156, 74, .8) 55%, transparent);
  filter: blur(.5px);
  animation: seam-flash 2.1s var(--ease-out) both;
}
@keyframes seam-flash {
  0%   { opacity: 0; transform: scaleX(1); }
  22%  { opacity: 1; }
  46%  { opacity: 1; transform: scaleX(26); }
  100% { opacity: 0; transform: scaleX(60); }
}

/* Занавес не перехватывает ни клики, ни прокрутку: две секунды ткани
   не должны запирать страницу, даже если анимация где-то не пойдёт. */

/* =========================================================
   Шапка
   ========================================================= */

/* Спрятано от глаза, но не от диктора: расклад проговаривает сюда, что
   легло на стол и что открылось ниже. Видимой строки для этого нет —
   на столе она была бы лишней. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому» лежит выше края окна и выходит на свет только
   по табу. Без неё до расклада с клавиатуры десять нажатий: логотип
   и девять пунктов меню, и так на каждой странице. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  padding: 12px 22px;
  border: 1px solid var(--gold);
  border-radius: 0 0 10px 10px;
  background: #150d1c;
  color: var(--gold);
  font-size: .84rem;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.site-head {
  position: relative;
  background:
    radial-gradient(70% 260% at 50% 0%, rgba(255, 156, 74, .14), transparent 66%),
    linear-gradient(180deg, rgba(58, 24, 56, .82), rgba(21, 13, 28, .6));
  border-bottom: 1px solid rgba(217, 177, 105, .16);
  color: #fff;
  isolation: isolate;
}
.site-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .12;
  pointer-events: none;
  z-index: -1;
}
/* тонкая латунная нить по нижнему краю, ярче к середине */
.site-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 177, 105, .75) 50%, transparent);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 84px;
}

/* Валькнут из макета 2018 года плюс рукописный логотип из фирменного стиля:
   геометрический знак слева уравновешивает росчерк справа. Леттеринг —
   вектор, поэтому размер задаётся высотой, а ширина считается сама. */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo img { filter: drop-shadow(0 0 12px rgba(217, 177, 105, .35)); transition: filter .3s; }
.logo:hover img { filter: drop-shadow(0 0 18px rgba(243, 224, 181, .6)); }
.logo .logo-mark {
  width: 38px;
  height: auto;
  animation: mark-breathe 12s ease-in-out infinite;
}
@keyframes mark-breathe {
  0%, 100% { opacity: .85; transform: rotate(0deg); }
  50% { opacity: 1; transform: rotate(120deg); }
}
.logo .logo-word { height: 34px; width: auto; }
.site-head .tagline {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 600;
  color: rgba(243, 224, 181, .72);
}

/* =========================================================
   Меню
   ========================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 8, 18, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(217, 177, 105, .18);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  position: relative;
  display: block;
  padding: 16px 15px 15px;
  color: rgba(236, 225, 212, .72);
  font-size: .705rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s, text-shadow .2s;
}
/* огонёк под разделом: разгорается от середины */
.site-nav a::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 8px rgba(217, 177, 105, .8);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current] {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 14px rgba(243, 224, 181, .55);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--gold-soft); }

/* «Поиск» — таблетка с лупой, нарисованной прямо в css */
.site-nav .nav-search a {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 8px 17px 8px 14px;
  border: 1px solid rgba(99, 183, 172, .4);
  border-radius: 999px;
  color: var(--teal);
  background: rgba(99, 183, 172, .07);
}
.site-nav .nav-search a::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M10.5 3.5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM15.6 15.6 21 21'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M10.5 3.5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM15.6 15.6 21 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.site-nav .nav-search a::after { display: none; }
.site-nav .nav-search a:hover {
  background: rgba(99, 183, 172, .18);
  border-color: var(--teal-glow);
  color: #fff;
  box-shadow: var(--glow-teal);
}

/* =========================================================
   Первый экран: стол со свечой и хрустальным шаром
   ========================================================= */

.hero {
  position: relative;
  padding: clamp(70px, 11vw, 138px) 0 clamp(120px, 13vw, 178px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Сцена: шар и кольца стоят позади текста и не мешают его читать. */
.hero-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(740px, 116vw);
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  pointer-events: none;
  z-index: -1;
}

/* Кольца зодиака: два круга знаков идут навстречу друг другу. */
.zodiac {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
.zodiac-ring { transform-origin: 50% 50%; }
.zodiac-outer { animation: spin 132s linear infinite; }
.zodiac-inner { animation: spin 88s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.zodiac circle { stroke: rgba(217, 177, 105, .3); stroke-width: .5; }
.zodiac .ring-dashed { stroke: rgba(217, 177, 105, .4); stroke-dasharray: 1.4 6; }
.zodiac .ring-faint { stroke: rgba(99, 183, 172, .22); }
.zodiac text {
  fill: rgba(243, 224, 181, .6);
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols', serif;
}
.zodiac .glyph-teal { fill: rgba(143, 232, 218, .48); }
.zodiac polygon {
  stroke: rgba(217, 177, 105, .2);
  stroke-width: .5;
}

/* Хрустальный шар: стекло, туман внутри и блик сверху. */
.orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: orb-float 9s ease-in-out infinite;
}
@keyframes orb-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -56%); }
}
.orb-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .58), rgba(255, 255, 255, .08) 21%, transparent 44%),
    radial-gradient(circle at 50% 62%, rgba(99, 183, 172, .34), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(146, 78, 154, .55), rgba(30, 15, 40, .74) 74%);
  box-shadow:
    inset 0 -22px 60px rgba(0, 0, 0, .55),
    inset 0 14px 48px rgba(255, 214, 163, .24),
    0 0 70px rgba(146, 78, 154, .45),
    0 0 150px rgba(255, 156, 74, .2);
}
/* туман внутри шара: три пятна ходят по кругу с разной скоростью */
.orb-mist {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  opacity: .85;
  background:
    radial-gradient(38% 30% at 32% 62%, rgba(143, 232, 218, .38), transparent 70%),
    radial-gradient(44% 34% at 70% 38%, rgba(243, 224, 181, .28), transparent 72%),
    radial-gradient(30% 46% at 54% 24%, rgba(197, 118, 196, .3), transparent 74%);
  filter: blur(10px);
  animation: mist 21s linear infinite;
}
@keyframes mist {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.14); }
  100% { transform: rotate(360deg) scale(1); }
}
/* искра внутри стекла: вспыхивает и гаснет, будто в шаре что-то мелькнуло */
.orb-spark {
  position: absolute;
  left: 46%;
  top: 44%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 214, 163, .4) 40%, transparent 70%);
  filter: blur(3px);
  animation: spark 5.5s ease-in-out infinite;
}
@keyframes spark {
  0%, 62%, 100% { opacity: .18; transform: scale(.7); }
  74% { opacity: .95; transform: scale(1.35); }
  86% { opacity: .3; transform: scale(.9); }
}
/* подставка: латунный отблеск под шаром */
.orb::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 62%;
  height: 9%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 177, 105, .4), transparent 72%);
  filter: blur(5px);
}

/* Текст поверх сцены. */
.hero-copy { position: relative; z-index: 2; }
.hero-kicker {
  margin: 0 0 20px;
  font-size: .66rem;
  font-weight: 800;
  color: var(--gold);
}
/* по бокам надписи — короткие латунные усы */
.hero-kicker span {
  position: relative;
  display: inline-block;
  padding: 0 18px;
}
.hero-kicker span::before,
.hero-kicker span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(28px, 7vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.hero-kicker span::before { right: 100%; }
.hero-kicker span::after { left: 100%; transform: scaleX(-1); }

.hero h1 {
  margin: 0;
  color: #fff;
  text-shadow: 0 0 44px rgba(255, 156, 74, .35), 0 4px 30px rgba(0, 0, 0, .6);
}
/* золотая линейка под заголовком */
.hero h1::after {
  content: '';
  display: block;
  width: min(280px, 62vw);
  height: 1px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, rgba(217, 177, 105, .85), transparent);
  box-shadow: 0 0 12px rgba(217, 177, 105, .5);
}
.hero p {
  max-width: 660px;
  margin: 24px auto 0;
  color: var(--text-dim);
  font-size: 1.08rem;
}
.hero .btn { margin-top: 32px; }

/* Свеча оплывает у нижнего края первого экрана: настоящего пламени нет —
   только то, что оно освещает. */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1000px, 120vw);
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 156, 74, .16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* плитки заезжают на первый экран — как витрина, выставленная вперёд */
.showcase { position: relative; z-index: 2; }
/* Подъём достаётся тому блоку, который идёт сразу за шатром: он заезжает
   в его нижнее поле, и стык выходит без пустой полосы. Раньше это всегда
   были плитки, теперь между ними и шатром стоят знаки дня — и подъём
   переехал к ним. Задан он соседством, а не именем блока: поставят между
   ними третий — подъём достанется третьему, а не уедет в пустоту. */
.hero + .showcase, .hero + .today-home { margin-top: clamp(-92px, -7vw, -64px); }

/* =========================================================
   Заголовок блока
   ========================================================= */

.block-head { margin: 0 0 26px; }
.block-head h2 { margin: 0 0 6px; }
.block-head p { margin: 0; max-width: 640px; color: var(--text-faint); font-size: .95rem; }

/* Ромбик перед заголовком раздела — единственный орнамент, который
   повторяется на всех страницах. */
.block-head h2::before,
.section:not(.article) > h2::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 13px;
  vertical-align: middle;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 10px rgba(217, 177, 105, .8);
}

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

.tiles {
  --tile-gap: 24px;
  --tile-cols: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tile-gap);
  perspective: 1400px;
}
.tiles > .tile {
  flex: 0 1 calc((100% - (var(--tile-cols) - 1) * var(--tile-gap)) / var(--tile-cols));
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(217, 177, 105, .18);
  box-shadow: var(--shadow);
  color: #fff;
  text-decoration: none;
  aspect-ratio: 4 / 3;
  background: var(--night-3);
  isolation: isolate;
  /* --rx / --ry ставит js/atmosphere.js по положению курсора: плитка
     слегка поворачивается вслед за рукой. Без скрипта углы нулевые. */
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease-out, box-shadow .4s, border-color .4s;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06) brightness(.72);
  transition: transform .8s var(--ease), filter .5s;
}
.tile:hover {
  text-decoration: none;
  border-color: rgba(217, 177, 105, .55);
  box-shadow: var(--shadow-lg), 0 0 44px rgba(217, 177, 105, .2);
}
.tile:hover img { transform: scale(1.07); filter: saturate(1) contrast(1.02) brightness(.92); }

/* Сумерки поверх снимка: снизу глухо, сверху сливовая дымка. */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 7, 16, .9), rgba(12, 7, 16, .3) 46%, transparent 72%),
    linear-gradient(200deg, rgba(77, 22, 41, .35), transparent 55%);
  pointer-events: none;
  transition: opacity .5s;
}
.tile:hover::after { opacity: .78; }

/* Блик, который проходит по стеклу при наведении. */
.tile::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -60%;
  left: -75%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 214, .16), transparent);
  transform: rotate(18deg);
  pointer-events: none;
  transition: left .75s var(--ease);
}
.tile:hover::before { left: 130%; }

/* Лента-подпись из макета: полоса поверх снимка. Правого края у неё нет —
   лента тянется ровно под текст и обрывается, как и было нарисовано. */
.tile-label {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: auto;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--gold);
  background: rgba(20, 11, 26, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #fff;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.tile:hover .tile-label {
  transform: translateY(-5px);
  border-left-color: var(--gold-soft);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .5), 0 0 26px rgba(217, 177, 105, .22);
}
.tile-label b {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.tile-label span {
  display: block;
  margin-top: 6px;
  font-size: .625rem;
  font-weight: 700;
  color: rgba(243, 224, 181, .68);
}

/* Латунный ярлык у разделов, где гадание работает прямо на странице.
   Раньше его рисовал ::before самой плитки, но псевдоэлемент занят бликом,
   поэтому ярлык стал отдельным span — его пишет tools/build-pages.js. */
.tile-flag {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, #b98f45);
  background-size: 220% 100%;
  color: #2b1c06;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 18px rgba(217, 177, 105, .35);
  animation: flag-shine 5s linear infinite;
}
@keyframes flag-shine {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* второй блок — разделы без движка, только статьи: полоса ниже и суше */
.tiles-compact { --tile-gap: 20px; }
.tiles-compact .tile { aspect-ratio: 16 / 10; }
.tiles-compact .tile-label { padding: 11px 15px; }
.tiles-compact .tile-label b { font-size: 1.1rem; }

.tiles-section { padding-bottom: 74px; }
.showcase + .tiles-section { padding-top: 68px; }

/* =========================================================
   Общие блоки и кнопки
   ========================================================= */

.section { padding: 52px 0; }
.lead { font-size: 1.12rem; color: var(--text-dim); max-width: 720px; }

.page-head { padding: 40px 0 10px; }
.page-head h1 { margin-bottom: .32em; }
.page-head h1::after {
  content: '';
  display: block;
  width: 120px;
  height: 1px;
  margin: 22px 0 0;
  background: linear-gradient(90deg, rgba(217, 177, 105, .9), transparent);
  box-shadow: 0 0 10px rgba(217, 177, 105, .4);
}

/* Кнопка — латунная пластина. При наведении по ней проходит свет. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d59a, var(--gold) 40%, #a97f3c);
  color: #2a1b06;
  font: inherit;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .73rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 0 26px rgba(217, 177, 105, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .22s var(--ease), box-shadow .22s, filter .22s;
}
.btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg);
  transition: left .6s var(--ease);
}
.btn:hover {
  color: #2a1b06;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 42px rgba(217, 177, 105, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(217, 177, 105, .06);
  color: var(--gold-soft);
  border: 1px solid rgba(217, 177, 105, .4);
  box-shadow: none;
  text-shadow: none;
}
.btn-ghost:hover {
  background: rgba(217, 177, 105, .16);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 26px rgba(217, 177, 105, .28);
}

/* Крошки размечены <nav>, а не абзацем: это навигация. Нижний отступ
   поэтому свой — у <nav> его нет, а у <p> он приходил от общего правила. */
.breadcrumbs { font-size: .78rem; color: var(--text-faint); padding: 22px 0 0; margin: 0 0 1em; }
.breadcrumbs a { color: var(--text-faint); }
.breadcrumbs a:hover { color: var(--gold); }

/* Возврат к списку статей стоит отдельно от текста — раньше отступ был
   прописан прямо в разметке, единственным инлайновым стилем на сайте. */
.article-back { margin-top: 2em; }

/* =========================================================
   Выбор расклада
   ----------------------------------------------------------
   Расклады лежат перед человеком стопкой карточек рубашкой вверх.
   На каждой — значок из точек, повторяющий ту фигуру, какой лягут
   знаки: дуга, столбец, квадрат, колесо. Форму видно до выбора.
   ========================================================= */

#choose h2 { margin-bottom: .6em; }
.spreads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 20px;
}

/* Карточка расклада — плашка тёмного бархата с латунными углами.
   Появляются они по очереди: --i задаёт очередь, её пишет js/app.js. */
.spread-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 24px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(217, 177, 105, .11), transparent 62%),
    linear-gradient(180deg, rgba(58, 24, 56, .5), rgba(21, 13, 28, .62));
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s, box-shadow .35s, transform .35s var(--ease), background .35s;
  animation: rise-in .55s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* латунная нить сверху проявляется при наведении */
.spread-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--teal), transparent);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
/* свет свечи, проходящий по бархату при наведении */
.spread-card::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 176, 96, .22), transparent 70%);
  opacity: 0;
  transform: translateY(30%);
  transition: opacity .4s, transform .5s var(--ease);
}
.spread-card:hover {
  border-color: rgba(217, 177, 105, .5);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(217, 177, 105, .18), transparent 62%),
    linear-gradient(180deg, rgba(74, 32, 70, .58), rgba(28, 17, 36, .68));
  box-shadow: var(--shadow), 0 0 44px rgba(217, 177, 105, .18);
  transform: translateY(-5px);
  text-decoration: none;
}
.spread-card:hover::before { transform: scaleX(1); }
.spread-card:hover::after { opacity: 1; transform: none; }
.spread-card h3 { margin-bottom: .35em; color: #fff; }
.spread-card p { margin: 0 0 18px; font-size: .93rem; color: var(--text-faint); flex: 1; }
.spread-meta {
  font-size: .64rem;
  font-weight: 800;
  color: var(--gold);
}

/* Значок расклада: те же места, что и на столе, только точками.
   При наведении точки загораются одна за другой — как будто знаки
   уже ложатся. */
.spread-figure {
  display: block;
  margin: 0 0 14px -3px;
}
.spread-icon { width: 116px; height: 46px; overflow: visible; }
.spread-icon rect {
  fill: rgba(217, 177, 105, .5);
  transition: fill .3s var(--ease);
  transition-delay: calc(var(--k, 0) * 42ms);
}
.spread-card:hover .spread-icon rect {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 5px rgba(217, 177, 105, .8));
}

/* =========================================================
   Стол гадалки
   ----------------------------------------------------------
   Тёмное дерево в латунной раме, над ним пятно от свечи, посередине —
   бархатная дорожка, на которую и ложатся знаки. Толкования на столе
   не читают: они выходят пергаментными свитками ниже.

   Сцены сменяют друг друга классом на самом #reading:
     .is-ritual — колода тасуется, стола со знаками ещё не видно
     .is-table  — знаки на столе, ритуал уезжает
     .is-form   — расклад сначала спрашивает дату или сигнификатор
   ========================================================= */

#reading:empty { display: none; }
/* липкое меню не должно наезжать на стол, когда движок к нему прокручивает */
#reading, [id] { scroll-margin-top: 74px; }

#reading:not(:empty) {
  position: relative;
  margin: 10px 0 54px;
  padding: clamp(30px, 4.4vw, 52px) clamp(18px, 3.4vw, 44px) clamp(34px, 4vw, 52px);
  border-radius: 18px;
  border: 1px solid rgba(217, 177, 105, .3);
  background: var(--wood);
  color: var(--text);
  /* латунная рама, врезанная в дерево: две нити с тёмным пазом между ними */
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 1px rgba(217, 177, 105, .2),
    inset 0 0 0 8px rgba(0, 0, 0, .3),
    inset 0 0 0 9px rgba(217, 177, 105, .13),
    inset 0 0 90px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 214, 163, .08);
  overflow: hidden;
  isolation: isolate;
  animation: table-in .6s var(--ease-out) both;
}
@keyframes table-in {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to { opacity: 1; transform: none; }
}
/* зерно дерева */
#reading::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .12;
  pointer-events: none;
  z-index: -1;
}
/* пятно свечи над столом: дышит вместе с той, что за кадром */
#reading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -34%;
  width: 120%;
  height: 92%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 176, 96, .22), rgba(255, 156, 74, .07) 52%, transparent 74%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  animation: candle 7.2s ease-in-out infinite;
}

#reading h2, #reading h3 { color: #fff; }
/* ...кроме тех заголовков, что стоят на пергаменте поверх стола */
#reading .scroll h3,
#reading .pairs h3,
#reading .date-form h3,
#reading .sig-form h3 { color: var(--ink); }
#reading .lead { color: rgba(240, 228, 214, .8); }
#reading a { color: var(--gold-soft); }

.reading-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-bottom: 6px;
}
.reading-head h2 { margin: 0; }
.reading-head h2::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 13px;
  vertical-align: middle;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 10px rgba(217, 177, 105, .8);
}
/* сколько знаков в раскладе — латунная метка рядом с названием */
.reading-count {
  padding: 4px 12px;
  border: 1px solid rgba(217, 177, 105, .34);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0, 0, 0, .28);
}

/* Что видно на какой сцене. Стол лежит в разметке с самого начала —
   знаки уже вытянуты, — но до конца тасовки его не показывают. */
#reading.is-ritual .table-scene,
#reading.is-ritual .progress,
#reading.is-ritual .scrolls,
#reading.is-ritual .verdict,
#reading.is-ritual .pairs,
#reading.is-ritual .seal,
#reading.is-ritual .reading-actions { display: none; }

/* =========================================================
   Ритуал: колода тасуется
   ========================================================= */

.ritual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 42vw, 400px);
  text-align: center;
  animation: ritual-in .5s var(--ease-out) both;
}
@keyframes ritual-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* уехавший ритуал не убирается из потока мгновенно: он гаснет и
   поднимается, пока на его место опускается стол */
#reading:not(.is-ritual) .ritual {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  animation: ritual-out .6s var(--ease) both;
  pointer-events: none;
}
@keyframes ritual-out {
  to { opacity: 0; transform: translateY(-24px) scale(.94); filter: blur(6px); }
}

/* Круг света под колодой: тёплое пятно и медленно идущее кольцо лучей. */
.ritual-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(430px, 84vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(217, 177, 105, .09) 0deg 3deg, transparent 3deg 11deg),
    radial-gradient(closest-side, rgba(255, 176, 96, .2), transparent 70%);
  border-radius: 50%;
  animation: halo-turn 56s linear infinite, flicker 5.4s ease-in-out infinite;
}
@keyframes halo-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Колода: шесть рубашек друг на друге. Верхние три перебираются —
   так тасуют, снимая половину и вкладывая обратно. */
.shuffle {
  position: relative;
  width: 132px;
  aspect-ratio: 160 / 310;
  cursor: pointer;
  transition: transform .3s var(--ease);
}
/* Стопка повторяет пропорции своей колоды: руна, кость и камень
   нарисованы не в размер карты Таро. */
.ritual.deck-runes .shuffle { width: 118px; aspect-ratio: 131 / 216; }
.ritual.deck-lenorman .shuffle { aspect-ratio: 185 / 305; }
.ritual.deck-cards .shuffle { aspect-ratio: 219 / 305; }
.ritual.deck-dice .shuffle { width: 150px; aspect-ratio: 145 / 157; }
.ritual.deck-stones .shuffle { width: 168px; aspect-ratio: 260 / 257; }
.shuffle:hover { transform: scale(1.05); }
.shuffle i {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(243, 224, 181, .05) 0deg 4deg, transparent 4deg 12deg),
    radial-gradient(circle at 50% 42%, rgba(99, 183, 172, .28), transparent 60%),
    linear-gradient(155deg, #3f2a1a, #1a1008);
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .38),
    inset 0 0 0 5px rgba(0, 0, 0, .3),
    inset 0 0 0 6px rgba(243, 224, 181, .18),
    0 10px 26px rgba(0, 0, 0, .5);
  animation: riffle 1.15s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -190ms);
}
.shuffle i:nth-child(1) { --n: 0; }
.shuffle i:nth-child(2) { --n: 1; }
.shuffle i:nth-child(3) { --n: 2; }
.shuffle i:nth-child(4) { --n: 3; }
.shuffle i:nth-child(5) { --n: 4; }
.shuffle i:nth-child(6) { --n: 5; }
@keyframes riffle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  28% { transform: translate3d(-34px, -13px, 0) rotate(-9deg); }
  56% { transform: translate3d(26px, -6px, 0) rotate(7deg); }
  80% { transform: translate3d(4px, 2px, 0) rotate(1deg); }
}

.ritual-say {
  margin: 34px 0 4px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.24rem, 2.6vw, 1.62rem);
  color: var(--gold-soft);
  text-shadow: 0 0 26px rgba(217, 177, 105, .45);
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .74; }
  50% { opacity: 1; }
}
.ritual-hint {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240, 228, 214, .4);
}

/* =========================================================
   Сегодня
   ----------------------------------------------------------
   Четыре знака на день одним экраном: карта Таро, руна, гексаграмма
   и число. Лежат они пергаментными карточками на тёмном столе — теми
   же, какими выходят свитки толкований, — и у каждой свой цвет колоды:
   класс колоды стоит на самой карточке, а не на <body>, потому что
   на этой странице колод четыре сразу.
   ========================================================= */

.day-date {
  margin: 0 0 20px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px 28px;
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 14%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.day-card h2 {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.day-card h2 a { color: inherit; }
.day-card .sign-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 152px;
  margin: 0;
}
.day-card .sign-figure:has(.sign) {
  width: 152px;
  height: 152px;
  aspect-ratio: auto;
}
.day-card img {
  width: auto;
  max-height: 152px;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
}
/* Кость домино и гексаграмма нарисованы вытянутыми — их подложке
   квадрат велик, а знаку в нём тесно. */
.day-card.deck-domino .sign-figure:has(.sign) { width: 76px; height: 152px; }

.day-name {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink);
}
.day-name a { color: inherit; text-decoration: none; }
.day-name a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.day-rev {
  display: block;
  font-family: var(--font-body, inherit);
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8f2d2d;
}
.day-card .sign-keys { justify-content: center; margin: 0; }
.day-meaning {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink);
}
/* Совет — та же курсивная строка, какой он выходит в свитке расклада. */
.day-advice {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(141, 106, 47, .22);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  color: var(--accent-dark);
}
/* Выкладка числа дня: цифры даты, сложенные до однозначного.
   Показана нарочно — в нумерологии случая нет, и проверить счёт
   должно быть можно. */
.day-sum {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
}
/* У числа знака нет — вместо снимка латунный оттиск с цифрой,
   такой же, каким число выходит в самой нумерологии. */
.day-digit {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: #2a1c0c;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .55), transparent 52%),
    linear-gradient(150deg, #e6c882, #b98f45 62%, #8d6a2f);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .35),
    inset 0 -6px 14px rgba(0, 0, 0, .22),
    0 10px 24px rgba(0, 0, 0, .4);
}

.day-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(217, 177, 105, .18);
  font-size: .78rem;
  letter-spacing: .06em;
}
.day-nav a { color: var(--gold-soft); }

/* Что на небе: полоса под четырьмя знаками — луна и Меркурий. Тот же
   пергамент, что у карточек, но лежит поперёк: это не пятый знак дня,
   а сводка, при каком небе эти четыре выпали. Рисунок луны собирает
   сборка по доле освещённого диска, а красится он здесь: тёмный диск,
   латунный свет и тонкий обод. */
.day-sky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 32px;
  margin-top: 18px;
  padding: 22px 26px 24px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 14%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.day-sky h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.sky-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 6px 18px;
  align-items: start;
}
.sky-icon {
  grid-row: 1 / span 4;
  display: block;
  width: 76px;
  height: 76px;
}
.sky-icon svg { display: block; width: 100%; height: 100%; }
.moon-dark { fill: #2a1c0c; }
.moon-lit { fill: var(--gold); }
.moon-rim { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-opacity: .55; }
.mercury { box-sizing: border-box; padding: 5px; color: var(--gold-deep); }
.sky-name {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
}
.sky-fact {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.sky-meaning {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}
.sky-next {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(141, 106, 47, .22);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--accent-dark);
}
@media (max-width: 560px) {
  .day-sky { padding: 18px 16px 20px; gap: 14px; }
  .sky-item { grid-template-columns: 56px 1fr; gap: 4px 14px; }
  .sky-icon { width: 56px; height: 56px; }
}

/* =========================================================
   Вопрос
   ----------------------------------------------------------
   Строка над столом, в которую можно ничего не писать. Она нарочно тихая:
   поле без рамки, подпись мелкая, — иначе оно читалось бы как обязательное
   и останавливало бы половину пришедших. Со столом оно не уезжает: вопрос
   вписывают и до ритуала, и после того, как знаки легли.
   ========================================================= */

.ask-form {
  margin: 18px 0 0;
  max-width: 620px;
}
.ask-label {
  display: block;
  margin-bottom: 7px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ask-opt {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(240, 228, 214, .42);
}
.ask-input {
  width: 100%;
  padding: 12px 0 11px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: var(--gold-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(217, 177, 105, .28);
  border-radius: 0;
}
.ask-input::placeholder { color: rgba(240, 228, 214, .28); font-style: italic; }
.ask-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}

/* Сначала вопрос. Пока его не задали (#reading.is-asking), колода
   лежит и не тасуется, а поле светится и дышит — на него и смотрят.
   Кнопка под полем есть только в это время: потом Enter и нажатие
   на колоду делают то же, что и раньше, — снимают её. */
.ask-go {
  display: none;
  margin-top: 16px;
}
#reading.is-asking .ask-go { display: inline-flex; }
#reading.is-asking .ask-label { animation: breathe 3.4s ease-in-out infinite; }
#reading.is-asking .ask-input {
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold), 0 14px 34px -18px rgba(217, 177, 105, .75);
}
#reading.is-asking .ask-input::placeholder { color: rgba(240, 228, 214, .5); }
#reading.is-asking .shuffle {
  opacity: .55;
  filter: saturate(.6);
  transition: opacity .4s var(--ease), filter .4s var(--ease), transform .3s var(--ease);
}
#reading.is-asking .shuffle > i,
#reading.is-asking .shuffle.cup,
#reading.is-asking .candle-drip,
#reading.is-asking .shuffle.coins * { animation-play-state: paused; }
#reading.is-asking .ritual-say { animation: none; opacity: .9; }

/* Вопрос на печати: тем же курсивом, что и «Расклад прочитан целиком»,
   строкой выше — сначала о чём спрашивали, потом что всё прочитано. */
.seal-question {
  margin: 0 0 4px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  color: rgba(240, 228, 214, .72);
}
.seal-body { min-width: 0; }

/* Запасной выход, когда буфер обмена браузер не дал: ссылка строкой,
   выделенная целиком. Показывается только в этом случае. */
.link-out {
  margin: 14px 0 0;
  max-width: 620px;
}
.link-out label {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 228, 214, .5);
}
.link-out-input {
  width: 100%;
  font-size: .84rem;
  color: var(--ink);
}

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

.table-scene {
  position: relative;
  margin: 26px 0 4px;
  padding: clamp(26px, 3.4vw, 44px) clamp(10px, 2.2vw, 26px);
}
/* Ткань шириной по фигуре расклада: строке нужна вся, столбцу и одному
   знаку — узкая полоса, иначе знаки плавают в пустом бархате. */
.scene-column .table-cloth,
.scene-solo .table-cloth {
  left: 50%;
  right: auto;
  width: min(680px, 100%);
  transform: translateX(-50%);
}
.scene-solo .table-cloth { width: min(440px, 100%); }
.table-cloth {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background:
    var(--velvet-fold),
    linear-gradient(170deg, #331330, #1e0e25 58%, #150a1a);
  box-shadow:
    inset 0 0 0 1px rgba(217, 177, 105, .3),
    inset 0 0 0 4px rgba(0, 0, 0, .22),
    inset 0 0 0 5px rgba(217, 177, 105, .14),
    inset 0 0 70px rgba(0, 0, 0, .55),
    0 18px 44px rgba(0, 0, 0, .4);
}
/* пятно свечи на ткани: дышит отдельно от самой ткани */
.table-cloth::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(72% 88% at 50% 0%, rgba(255, 176, 96, .16), transparent 70%);
  animation: flicker 9s ease-in-out infinite;
}

.deck {
  position: relative;
  /* Запасная ширина знака. Каждая раскладка считает свою: дуга делит
     строку между знаками, таблица — на колонки, колесо берёт от радиуса. */
  --card-w: 168px;
}

/* --- строка и дуга: тройка, пятёрка, подкова ------------- */
.layout-arc {
  /* Знаки делят строку поровну, но не крупнее 200px и не мельче 112px:
     ниже этого порога строка переносится, и дуга ложится в два ряда. */
  --gap: clamp(8px, 1.4vw, 20px);
  --card-w: clamp(112px, calc((100% - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3)), 200px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 26px var(--gap);
}
.layout-arc > .slot {
  width: var(--card-w);
  transform: translateY(var(--curve, 0px));
}

/* --- один знак: он и есть весь расклад ------------------- */
.layout-solo {
  display: flex;
  justify-content: center;
}
.layout-solo > .slot { width: clamp(210px, 30vw, 268px); }
.layout-solo .card-img { box-shadow: 0 0 70px rgba(217, 177, 105, .18); border-radius: 10px; }

/* --- столбец: чакры снизу вверх ---------------------------
   Семь центров нанизаны на общий позвоночник — вертикальную нить,
   которая идёт от красной опоры до фиолетовой макушки. Знак слева,
   название центра справа, бусина своего цвета на нити. */
.layout-column {
  --card-w: clamp(94px, 12vw, 124px);
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding-left: 30px;
}
.layout-column::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6%;
  bottom: 6%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    #9a63c4, #5b63c4, #4f9bd0, #5fae72, #dcc04a, #e2803a, #d9534f);
  opacity: .72;
  box-shadow: 0 0 14px rgba(255, 255, 255, .12);
}
.layout-column > .slot {
  display: grid;
  grid-template-columns: var(--card-w) 1fr;
  align-items: center;
  gap: 20px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--chakra, #d9b169) 13%, transparent), transparent 64%);
}
/* бусина на позвоночнике: цвет своего центра */
.layout-column > .slot::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--chakra, #d9b169);
  box-shadow: 0 0 12px var(--chakra, #d9b169), 0 0 0 3px rgba(0, 0, 0, .4);
}
.layout-column .slot-caption {
  order: 2;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
}
.layout-column .slot-no {
  background: var(--chakra, #d9b169);
  border-color: transparent;
  color: #16101b;
}
.layout-column .slot-title { color: var(--chakra, #d9b169); }
.layout-column .card-img { margin: 0; }

/* --- квадрат: таблица Хуанок из девяти камней -------------
   Число колонок задаёт js/app.js: у таблицы три яруса по три ячейки,
   и рассыпать её на пять с четырьмя нельзя — смысл в самой сетке. */
.layout-grid {
  --cols: 3;
  --gap: clamp(10px, 1.6vw, 24px);
  --card-w: clamp(60px, calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 176px);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--card-w));
  justify-content: center;
  gap: 26px var(--gap);
  align-items: stretch;
}

/* --- колесо: двенадцать месяцев по кругу ----------------- */
.layout-wheel {
  --r: clamp(272px, 32vw, 380px);
  --card-w: clamp(64px, 7.2vw, 88px);
  width: calc(var(--r) * 2 + var(--card-w) * 1.95);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}
.layout-wheel > .slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  transform:
    translate(-50%, -50%)
    rotate(var(--a, 0deg))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--a, 0deg)));
}
/* в колесе места подписаны только номером: «месяц третий» и так понятно,
   а полное название ждёт в свитке */
.layout-wheel .slot-title,
.layout-wheel .slot-hint { display: none; }
.layout-wheel .slot-caption { min-height: 0; margin-bottom: 7px; }
/* обод колеса: тонкое кольцо, по которому разложены месяцы */
.layout-wheel::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 1px dashed rgba(217, 177, 105, .34);
  border-radius: 50%;
  pointer-events: none;
  animation: spin 190s linear infinite;
}

/* Ступица колеса: карта года, посчитанная по дате рождения. */
.wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(150px, 20vw, 196px);
  transform: translate(-50%, -50%);
  text-align: center;
  animation: hub-in .8s var(--ease-out) .4s both;
}
@keyframes hub-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.hub-title,
.hub-name {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--gold-soft);
}
.hub-title { font-size: .92rem; opacity: .74; margin-bottom: 8px; }
.hub-name { font-size: 1.14rem; margin-top: 10px; }
.hub-card {
  display: block;
  width: clamp(90px, 12vw, 118px);
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(217, 177, 105, .5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 46px rgba(217, 177, 105, .3);
}

/* --- подпись места ---------------------------------------
   Название места и подсказке отведена постоянная высота: иначе
   двухстрочное «Справа — на что смотреть» опускает свой знак ниже
   соседних, и ряд встаёт лесенкой. */
.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* Подпись занимает всё, что осталось над знаком, и прижимается к его
   верхнему краю: тогда трёхстрочное «Карта спрашивающего — та, с которой
   начнётся строка» не опускает свой знак ниже соседних. */
.slot-caption {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 11px;
  min-height: 5.4em;
}
.slot-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border: 1px solid rgba(217, 177, 105, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  font-size: .68rem;
  font-weight: 800;
  color: var(--gold);
}
.slot-title {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.24;
  color: var(--gold-soft);
}
.slot-hint {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  line-height: 1.4;
  color: rgba(240, 228, 214, .48);
}

/* =========================================================
   Знак: рубашка, полёт и переворот
   ========================================================= */

.card-img {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 160 / 310;
  perspective: 1400px;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}
/* Знаки летят из середины стола — оттуда, где тасовалась колода.
   Смещение до места считает js/app.js: css заранее его не знает. */
.is-dealing .card-img {
  animation: deal-fly .68s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 105ms);
}
@keyframes deal-fly {
  0% {
    opacity: 0;
    transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--dz, -18deg)) scale(.52);
  }
  18% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
/* Закрытый знак чуть покачивается — стол не мёртвый. Отрицательная
   задержка сдвигает каждый знак по фазе, иначе весь ряд качается разом. */
.deck:not(.is-dealing) .card-img:not(.revealed) {
  animation: hover-idle 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -730ms);
}
@keyframes hover-idle {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-6px); }
}

.card-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform .9s cubic-bezier(.3, 1.2, .35, 1);
}
.card-img.revealed .card-flip { transform: rotateY(0deg); }
.card-img:not(.revealed):hover .card-flip { transform: rotateY(180deg) translateY(-9px) scale(1.04); }
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.card-face img { width: 100%; height: 100%; object-fit: cover; }
.card-img.is-reversed .card-front img { transform: rotate(180deg); }
.card-front {
  border: 1px solid rgba(217, 177, 105, .28);
  transition: border-color .4s, box-shadow .4s;
}
.card-img.revealed .card-front {
  border-color: rgba(217, 177, 105, .62);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .52), 0 0 30px rgba(217, 177, 105, .2);
}
.card-img.revealed:hover .card-front {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .58), 0 0 52px rgba(217, 177, 105, .38);
}
.card-img.revealed:hover .card-flip { transform: translateY(-6px) scale(1.03); }

/* Блик, который один раз проходит по лицу открытого знака: свеча
   скользнула по лаку. */
.card-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 244, 214, .5) 50%, transparent 66%);
  transform: translateX(-130%);
}
.card-img.just-revealed .card-sheen { animation: sheen 1s var(--ease-out) .42s both; }
@keyframes sheen {
  to { transform: translateX(130%); }
}

/* Рубашка: тёмное поле, двойная латунная рамка, лучи из середины
   и знак поверх. Всё нарисовано градиентами — картинки для рубашки нет. */
.card-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(243, 224, 181, .05) 0deg 4deg, transparent 4deg 12deg),
    repeating-linear-gradient(45deg, rgba(243, 224, 181, .05) 0 7px, transparent 7px 14px),
    radial-gradient(circle at 50% 42%, rgba(99, 183, 172, .3), transparent 60%),
    linear-gradient(155deg, #3f2a1a, #1a1008);
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .4),
    inset 0 0 0 6px rgba(0, 0, 0, .3),
    inset 0 0 0 7px rgba(243, 224, 181, .2),
    inset 0 0 40px rgba(0, 0, 0, .5),
    0 10px 28px rgba(0, 0, 0, .5);
  color: var(--gold-soft);
  transition: color .3s, box-shadow .3s;
}
.back-mark {
  position: relative;
  z-index: 1;
  font-size: 2.1rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(217, 177, 105, .8);
}
/* Два кольца поверх рубашки: сплошное и пунктирное, второе медленно идёт
   по кругу. */
.card-back::before,
.card-back::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.card-back::before {
  width: 58%;
  aspect-ratio: 1;
  margin: -29% 0 0 -29%;
  border: 1px solid rgba(243, 224, 181, .28);
  box-shadow: inset 0 0 22px rgba(217, 177, 105, .16);
}
.card-back::after {
  width: 76%;
  aspect-ratio: 1;
  margin: -38% 0 0 -38%;
  border: 1px dashed rgba(243, 224, 181, .22);
  animation: spin 46s linear infinite;
}
.card-img:not(.revealed):hover .card-back {
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .7),
    inset 0 0 0 6px rgba(0, 0, 0, .3),
    inset 0 0 0 7px rgba(243, 224, 181, .35),
    inset 0 0 40px rgba(0, 0, 0, .4),
    0 18px 40px rgba(0, 0, 0, .55),
    0 0 42px rgba(217, 177, 105, .35);
}

/* Вспышка в тот миг, когда знак открыли: кольцо расходится и гаснет.
   Класс just-revealed снимает js/app.js через секунду. */
.card-img.just-revealed::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid rgba(243, 224, 181, .9);
  pointer-events: none;
  animation: burst .9s var(--ease-out) .3s forwards;
}
@keyframes burst {
  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 177, 105, .55); }
  100% { opacity: 0; transform: scale(1.3); box-shadow: 0 0 44px 24px rgba(217, 177, 105, 0); }
}

/* Восемь искр разлетаются от знака в тот же миг: по кругу, каждая
   в свою сторону. Живут они только под классом just-revealed. */
.card-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.card-sparks i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px rgba(243, 224, 181, .9);
  opacity: 0;
}
.card-sparks i:nth-child(1) { --sa: 0deg; }
.card-sparks i:nth-child(2) { --sa: 45deg; }
.card-sparks i:nth-child(3) { --sa: 90deg; }
.card-sparks i:nth-child(4) { --sa: 135deg; }
.card-sparks i:nth-child(5) { --sa: 180deg; }
.card-sparks i:nth-child(6) { --sa: 225deg; }
.card-sparks i:nth-child(7) { --sa: 270deg; }
.card-sparks i:nth-child(8) { --sa: 315deg; }
.card-img.just-revealed .card-sparks i {
  animation: spark-fly .85s var(--ease-out) .32s both;
}
@keyframes spark-fly {
  0% { opacity: 1; transform: rotate(var(--sa)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--sa)) translateY(-116px) scale(.3); }
}

/* руны, Ленорман, карты, кости и камни нарисованы в других пропорциях */
.deck-runes .card-img { aspect-ratio: 131 / 216; }
.deck-lenorman .card-img { aspect-ratio: 185 / 305; }
.deck-cards .card-img { aspect-ratio: 219 / 305; }
.deck-dice .card-img { aspect-ratio: 145 / 157; }
.deck-stones .card-img { aspect-ratio: 260 / 257; }

/* =========================================================
   Ответ «да — нет» и полоса открытых знаков
   ========================================================= */

/* Пластина проявляется из темноты — и только когда знак уже открыт. */
.verdict { margin: 26px 0 0; }
.answer-badge {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
  padding: 15px 48px;
  background: linear-gradient(135deg, rgba(99, 183, 172, .95), rgba(44, 106, 98, .95));
  color: #fff;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1.1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 50px rgba(99, 183, 172, .3);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  animation: verdict .8s var(--ease-out) both;
}
@keyframes verdict {
  0% { opacity: 0; transform: scale(.86); filter: blur(9px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.answer-badge.no {
  background: linear-gradient(135deg, #c07a6d, #8d4f45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 50px rgba(180, 115, 106, .3);
}
.answer-badge.maybe {
  background: linear-gradient(135deg, #dcb96c, #a8853f);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 50px rgba(217, 177, 105, .32);
}
/* «без ответа» — пара единиц на костях: судьба молчит */
.answer-badge.silent {
  background: linear-gradient(135deg, #8a8279, #574f4a);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

/* Латунная рейка под столом: по ней наливается золотом нить —
   столько, сколько знаков уже открыто. */
.progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  font-size: .8rem;
  color: rgba(240, 228, 214, .58);
}
.progress-label { font-style: italic; }
.progress-thread {
  position: relative;
  flex: 1 1 60px;
  height: 2px;
  min-width: 40px;
  border-radius: 2px;
  background: rgba(217, 177, 105, .16);
  overflow: hidden;
}
.progress-thread i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow: 0 0 12px rgba(217, 177, 105, .7);
  transition: width .5s var(--ease);
}
.progress-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
}
.progress.is-done { color: var(--gold-soft); }
.progress.is-done .progress-thread { box-shadow: 0 0 18px rgba(217, 177, 105, .4); }

/* =========================================================
   Толкование: пергаментный свиток
   ----------------------------------------------------------
   На столе лежат только знаки: если положить туда же и текст, фигура
   расклада утонет. Толкования выходят ниже, каждое своим свитком, и
   ровно тогда, когда свой знак открыли.
   ========================================================= */

.scrolls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
}
.scroll {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(170deg, var(--paper), var(--paper-2));
  color: var(--ink);
  text-align: left;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform-origin: 50% 0;
  animation: unfurl .55s var(--ease-out) both;
}
/* Свиток раскатывается сверху вниз, как настоящий. */
@keyframes unfurl {
  0% { opacity: 0; transform: scaleY(.06) translateY(-14px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* Только что вышедший свиток обведён золотом — глаз находит его сам. */
.scroll.is-fresh { animation: unfurl .55s var(--ease-out) both, fresh 1.4s var(--ease) both; }
/* Возврат к уже открытому свитку: он только вспыхивает золотом, заново
   не раскатывается. */
.scroll.is-lit { animation: fresh 1.4s var(--ease) both; }
@keyframes fresh {
  0%, 40% { box-shadow: 0 12px 30px rgba(0, 0, 0, .4), 0 0 0 2px var(--gold), 0 0 40px rgba(217, 177, 105, .5); }
  100% { box-shadow: 0 12px 30px rgba(0, 0, 0, .4), 0 0 0 0 transparent, 0 0 0 transparent; }
}
/* карта года и карта личности: тот же свиток, но с бирюзовым корешком */
.scroll-birth {
  grid-column: 1 / -1;
  background: linear-gradient(170deg, #f6f1e3, var(--teal-pale));
}

.scroll-aside { flex: 0 0 auto; width: 86px; }
.scroll-aside picture,
.scroll-aside img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(36, 26, 18, .16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.scroll-aside img.is-reversed { transform: rotate(180deg); }
.scroll-main { min-width: 0; flex: 1; }
.scroll-pos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-pos b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--teal-dark);
  color: #fff;
  font-size: .68rem;
}
.card-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 2px;
}
.card-rev { font-size: .62rem; font-weight: 800; color: #a4655c; letter-spacing: .12em; text-transform: uppercase; }
.card-keys {
  font-size: .75rem;
  color: var(--muted);
  margin: 5px 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.card-text { font-size: .92rem; margin: 0; }
/* что знак значит именно на этом месте расклада */
.card-note {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-2);
  margin: 10px 0 0;
}
.card-advice {
  font-size: .88rem;
  color: var(--teal-dark);
  border-left: 2px solid var(--teal);
  padding-left: 12px;
  margin: 11px 0 0;
}

/* =========================================================
   Разборы под раскладом
   ========================================================= */

.pairs {
  margin: 22px 0 0;
  padding: 22px 26px;
  border-radius: var(--radius-sm);
  background: linear-gradient(170deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: unfurl .5s var(--ease-out) both;
  transform-origin: 50% 0;
}
.pairs h3 {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.28rem;
  margin: 0 0 13px;
  color: var(--ink);
}
.triples { background: linear-gradient(170deg, var(--paper-2), #e8dbc3); }
.nature { background: linear-gradient(170deg, #eaf5f3, var(--teal-pale)); }
.pairs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pairs li { font-size: .93rem; line-height: 1.5; }
.pairs b { color: var(--teal-dark); }
.pairs i { font-style: normal; font-size: .8em; color: var(--muted); }
/* разбор расклада камней по созидающим и воспринимающим */
.pairs p { font-size: .93rem; line-height: 1.5; margin: 0; }
.pairs .nature-count { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* =========================================================
   Печать: расклад дочитан
   ----------------------------------------------------------
   Последний знак открыт, разборы вышли — гадалка ставит на расклад
   сургучный оттиск. Дальше читать нечего.
   ========================================================= */

.seal {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 177, 105, .18);
}
.seal-wax {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .3), transparent 46%),
    radial-gradient(circle at 50% 50%, #a8323f, #611b2a 72%);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .22),
    inset 0 -6px 14px rgba(0, 0, 0, .35),
    0 10px 26px rgba(0, 0, 0, .5);
  animation: stamp .7s cubic-bezier(.2, 1.5, .4, 1) both;
}
.seal-wax span {
  font-size: 1.5rem;
  color: rgba(255, 226, 190, .82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* края сургуча неровные: тонкое рваное кольцо поверх диска */
.seal-wax::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed rgba(168, 50, 63, .45);
  animation: spin 90s linear infinite;
}
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.1) rotate(-22deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.seal-text {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.24rem;
  color: var(--gold-soft);
  animation: rise-in .6s var(--ease-out) .25s both;
}

/* =========================================================
   Нумерология
   ----------------------------------------------------------
   Единственный работающий раздел без колоды: вместо знаков — число,
   вместо расклада — квадрат Пифагора. Сам ответ — латунный оттиск с цифрой,
   и всё, что его касается, стоит ниже отдельным блоком: «Нумерология: круг
   счёта и печать числа».
   ========================================================= */

.num-square {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 28px;
}
.num-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 17px 19px;
  border-radius: var(--radius-sm);
  background: linear-gradient(170deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: rise-in .5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
/* пустая ячейка — тоже ответ, но приглушённый: цифры в ней не выпало */
.num-cell.is-empty { background: rgba(240, 229, 208, .55); box-shadow: none; }
.num-cell-title {
  font-size: .64rem;
  font-weight: 800;
  color: var(--muted);
}
.num-cell-digits {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--teal-dark);
}
.num-cell.is-empty .num-cell-digits { color: var(--muted); }
.num-cell-text { font-size: .88rem; line-height: 1.5; }
.num-steps li { font-variant-numeric: tabular-nums; }
.num-error { flex-basis: 100%; margin: 0; color: #d98a7c; font-size: .9rem; }

.reading-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* =========================================================
   Формы перед раскладом
   ========================================================= */

.date-form, .sig-form {
  margin: 22px 0 0;
  padding: 24px 26px;
  border-radius: var(--radius-sm);
  background: linear-gradient(170deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.date-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; }
.date-form label {
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.sig-form p { margin: 0 0 18px; }
.sig-form .btn + .btn { margin-left: 8px; }

input, textarea, select {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 177, 105, .25);
}
.date-form input { width: 98px; }

/* Дата рождения — одно поле вместо трёх числовых. Ширины хватает на
   «ДД.ММ.ГГГГ» и на календарную кнопку, которую браузер рисует справа;
   iOS без этого растягивает поле на всю строку. */
.date-form .date-input {
  width: auto;
  min-width: 178px;
  color-scheme: light;
}
.date-form .date-error {
  flex-basis: 100%;
  margin: 0;
  font-size: .86rem;
  color: #8f2d2d;
}

/* =========================================================
   Поиск по сайту
   ========================================================= */

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 28px;
}
.search-form input {
  flex: 1 1 300px;
  padding: 15px 22px;
  border-radius: 999px;
  background: rgba(20, 11, 26, .6);
  border: 1px solid rgba(217, 177, 105, .3);
  color: var(--text);
}
.search-form input::placeholder { color: rgba(236, 225, 212, .38); }
.search-form input:focus {
  border-color: var(--gold);
  background: rgba(30, 17, 38, .8);
  box-shadow: 0 0 0 3px rgba(217, 177, 105, .18), 0 0 30px rgba(217, 177, 105, .18);
}
.search-count { font-size: .85rem; color: var(--text-faint); }

.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.search-results li {
  padding: 17px 22px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease), background .25s;
}
.search-results li:hover {
  border-color: rgba(217, 177, 105, .5);
  background: rgba(44, 24, 50, .8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
  transform: translateX(5px);
}
.search-results a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.search-results a:hover { text-decoration: none; }
.search-results b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.24rem;
  font-weight: 700;
  color: #fff;
}
.search-section { font-size: .6rem; font-weight: 800; color: var(--gold); }
.search-results p { margin: 6px 0 0; font-size: .88rem; color: var(--text-faint); }

/* =========================================================
   Обратная связь
   ========================================================= */

.feedback-form { max-width: 580px; margin: 28px 0 0; }
.feedback-form p { margin: 0 0 18px; }
.feedback-form label {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 7px;
}
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
  width: 100%;
  resize: vertical;
  background: rgba(20, 11, 26, .6);
  border-color: rgba(217, 177, 105, .28);
  color: var(--text);
}
/* Поле-ловушка для роботов: человек его не видит и не заполняет.
   Убрано за край экрана, а не display:none — так его не пропустят
   те роботы, что заполняют вообще все поля формы. */
.feedback-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feedback-status { padding: 14px 17px; border-radius: var(--radius-sm); font-size: .9rem; }
.feedback-status.ok { background: rgba(99, 183, 172, .16); color: var(--teal-glow); }
.feedback-status.err { background: rgba(180, 115, 106, .18); color: #e4a99e; }
.feedback-mail { margin-top: 26px; font-size: .9rem; color: var(--text-faint); }

/* =========================================================
   Статьи
   ----------------------------------------------------------
   Длинный текст на ночном фоне читать тяжело, поэтому статья лежит
   на пергаменте — как раскрытая книга, вынесенная под свечу.
   ========================================================= */

.article {
  position: relative;
  max-width: 46rem;
  margin: 26px auto 40px;
  padding: clamp(28px, 4.5vw, 60px) clamp(22px, 4vw, 62px);
  border-radius: 6px 6px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 12%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* тень корешка вдоль левого края */
.article::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  border-radius: 6px 0 0 18px;
  background: linear-gradient(90deg, rgba(120, 92, 54, .16), transparent);
  pointer-events: none;
}
.article h1, .article h2, .article h3 { color: var(--ink); }
.article h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.article p { margin: 0 0 1.15em; font-size: 1.05rem; line-height: 1.78; }
.article > p:first-of-type {
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--ink-2);
}
/* буквица у первого абзаца — как в старой книге */
.article > p:first-of-type::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 3.6em;
  line-height: .82;
  margin: .06em .1em 0 0;
  color: var(--gold-deep);
}
.article h2 { margin-top: 1.8em; }
.article h2::before {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: .55em;
  background: linear-gradient(90deg, var(--gold-deep), rgba(141, 106, 47, 0));
}
.article .btn-ghost {
  /* Не var(--gold-deep): та же латунь, но на пергаменте и в 11,7px она даёт
     3,71:1 — ниже AA. Тот же тон, на шаг темнее, — 4,59:1. Сама переменная
     не тронута: её остальные семь мест — линии, рамка и ромбик, не текст. */
  color: #7d5c25;
  border-color: rgba(141, 106, 47, .45);
  background: rgba(141, 106, 47, .06);
}
.article .btn-ghost:hover {
  background: rgba(141, 106, 47, .14);
  color: #4a3a1a;
  border-color: var(--gold-deep);
  box-shadow: none;
}

.article-list { list-style: none; padding: 0; margin: 0; max-width: 56rem; display: grid; gap: 9px; }
.article-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease), color .25s, background .25s;
}
.article-list li a::after {
  content: '→';
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s, transform .25s;
}
.article-list li a:hover {
  border-color: rgba(217, 177, 105, .5);
  background: rgba(44, 24, 50, .8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
  transform: translateX(5px);
  color: #fff;
  text-decoration: none;
}
.article-list li a:hover::after { opacity: 1; transform: none; }

/* =========================================================
   Подвал
   ========================================================= */

.site-foot {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 17, 38, .5), rgba(8, 4, 12, .9));
  border-top: 1px solid rgba(217, 177, 105, .22);
  color: var(--text-faint);
  padding: 52px 0 34px;
  margin-top: 36px;
  font-size: .88rem;
  isolation: isolate;
}
.site-foot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .08;
  pointer-events: none;
  z-index: -1;
}
/* догорающая свеча под подвалом */
.site-foot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(760px, 90vw);
  height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 156, 74, .12), transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.site-foot a { color: rgba(236, 225, 212, .8); }
.site-foot a:hover { color: var(--gold-soft); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 32px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 7px; }
.foot-cols b {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: .64rem;
  font-weight: 800;
}
.copyright {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(217, 177, 105, .14);
  font-size: .8rem;
  opacity: .72;
}

/* =========================================================
   Появление при прокрутке
   ----------------------------------------------------------
   Класс .reveal вешает js/atmosphere.js — без скрипта всё видно сразу
   и ничего не прячется.

   Прячется оно и со скриптом: прозрачности здесь нет вовсе. Раньше блок
   ждал наблюдателя с opacity: 0, и на медленном телефоне — или в
   предпросмотре, где наблюдатель молчит, — заголовок с лидом оставались
   невидимыми до страховки через пять секунд. Теперь блок всё время
   читаем, а появление — это движение: он выезжает снизу на место.
   ========================================================= */

.reveal {
  transform: translateY(26px);
  transition: transform .7s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 55ms);
}
.reveal.is-in { transform: none; }

/* =========================================================
   Узкие экраны
   ---------------------------------------------------------
   Состояний три — телефон, планшет, широкий экран, — и границ
   у них ровно две: 640 и 900. Больше в файле нет ни одной, и
   заводить новую нельзя: сегодня их было пять — 640, 860, 861,
   900, 980, — и на трёх лишних числах сайт менял вид четырежды
   там, где по замыслу менял дважды. Ни одна из пяти не отвечала
   ни устройству, ни ширине содержимого: 860 и 980 появились
   каждая под свой случай и остались.

   Сводили их в сторону упрощения: шапка сжимается, колесо
   рассыпается в сетку, схема ладони встаёт в столбец — всё это
   теперь начинается на 900 вместо 860, то есть чуть раньше.
   Обратное направление опаснее: колесу из двенадцати месяцев
   нужен круг, и отдай ему полосу 861–900 — оно вылезет за край.

   Плитки главной — единственное, что от этого стало сложнее:
   между 901 и 980 они теперь стоят в три столбца, а не в два.
   Столбец там 265 px против 415 — снимок раздела 370 px шириной
   ложится в него без потерь.
   ========================================================= */

/* на широком экране «Поиск» отходит к правому краю меню; на узком
   он бы занял этим отдельную строку, поэтому там стоит в общем ряду */
@media (min-width: 901px) {
  .site-nav li.nav-search { margin-left: auto; }
}

@media (max-width: 900px) {
  .tiles { --tile-cols: 2; --tile-gap: 18px; }
  .hero-scene { width: min(620px, 128vw); }

  .tile-label {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20, 11, 26, .82);
  }
  .site-head .wrap { min-height: 68px; }
  .logo { gap: 10px; }
  .logo .logo-mark { width: 31px; }
  .logo .logo-word { height: 28px; }
  .site-head .tagline { display: none; }
  .site-nav { position: static; }
  .site-nav a { padding: 13px 12px 12px; font-size: .67rem; }
  /* На узком экране меню не сворачивается в три ряда, а едет вбок одной
     строкой: десять разделов иначе съедают треть экрана. */
  .site-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav li { flex: 0 0 auto; }
  .site-nav .nav-search a { padding: 7px 14px 7px 11px; }

  /* Намёк, что меню едет вбок. На 375 px из десяти разделов видно четыре,
     и о том, что за краем лежат «Ещё» и «Поиск», не говорило ничего:
     полосы прокрутки на телефоне нет. Теперь у края тает тёмная полоса
     со стрелкой — с той стороны, в которую есть куда ехать.
     Классы вешает js/atmosphere.js: сколько влезло, знает только браузер.
     Без скрипта полос нет, и врать про прокрутку они не будут. */
  .site-nav { position: relative; }
  .site-nav::before,
  .site-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--ease);
  }
  .site-nav::before {
    left: 0;
    background: linear-gradient(90deg, rgba(14, 8, 18, .96) 40%, rgba(14, 8, 18, 0));
  }
  .site-nav::after {
    right: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d9b169' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") right 8px center / 8px 14px no-repeat,
      linear-gradient(270deg, rgba(14, 8, 18, .96) 40%, rgba(14, 8, 18, 0));
  }
  .site-nav.can-left::before { opacity: 1; }
  .site-nav.can-right::after { opacity: 1; }
  .tent-drape { display: none; }
}

/* Колесу из двенадцати месяцев нужен круг метра в полтора: на планшете
   и телефоне оно рассыпается, и месяцы встают обычной сеткой. */
@media (max-width: 900px) {
  .layout-wheel {
    width: auto;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 132px));
    justify-content: center;
    gap: 22px 12px;
  }
  .layout-wheel::before { display: none; }
  .layout-wheel > .slot { position: static; width: auto; transform: none; }
  .layout-wheel .slot-title { display: block; }
  .wheel-hub {
    position: static;
    width: auto;
    grid-column: 1 / -1;
    transform: none;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero + .showcase, .hero + .today-home { margin-top: -76px; }
  .tiles { --tile-cols: 1; }
  .tiles .tile { aspect-ratio: 16 / 10; }
  .answer-badge { font-size: 1.7rem; padding: 13px 32px; }
  .num-square { grid-template-columns: 1fr; }
  .reading-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-scene { width: min(460px, 150vw); }
  .article { border-radius: 4px; }
  .article > p:first-of-type::first-letter { font-size: 3em; }

  /* На телефоне строка всё равно переносится, и дуга рассыпается: знаки
     ложатся ровно, только с лёгким разнобоем — как сданные рукой. */
  .layout-arc { gap: 20px 8px; }
  .layout-arc > .slot { transform: none; }
  .layout-arc > .slot:nth-child(odd) .card-img { --tilt: -3deg; }
  .layout-arc > .slot:nth-child(even) .card-img { --tilt: 3deg; }
  .layout-solo > .slot { width: min(228px, 68vw); }
  .layout-column > .slot { grid-template-columns: 84px 1fr; gap: 14px; padding: 10px 12px; }
  .layout-column { --card-w: 84px; padding-left: 24px; }
  .layout-column > .slot::before { left: -20px; }
  /* Девять ячеек таблицы на телефоне остаются девятью: три яруса по три,
     иначе от неё ничего не остаётся. Подпись под такую колонку мельче. */
  .layout-grid .slot-title { font-size: .92rem; }
  .slot-caption { min-height: 4.8em; }
  .slot-hint { display: none; }
  .layout-column .slot-hint { display: block; }
  .shuffle { width: 108px; height: 178px; }
  .ritual { min-height: 280px; }
  .scrolls { grid-template-columns: 1fr; }
  .scroll-aside { width: 68px; }
  .progress { flex-wrap: wrap; }
  .progress-label { flex: 1 0 100%; }
}

/* Курсорного света на сенсорном экране нет: свечу там некому нести. */
@media (hover: none), (pointer: coarse) {
  .aura { display: none; }
}

/* =========================================================
   Меньше движения
   ----------------------------------------------------------
   Всё, что двигается само, останавливается; остаётся только цвет.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .tent-smoke, .tent-stars, .aura { display: none; }
  .tent-glow { opacity: .85; }
  .reveal { transform: none; }
  .curtain { display: none !important; }
  /* Ритуал не играет: js/app.js сразу выкладывает знаки, а здесь снимаются
     остатки движения — искры, блик по лицу знака и вращение колец. */
  .ritual, .card-sparks, .card-sheen, .ritual-halo { display: none !important; }
  .card-img.just-revealed::after { display: none; }
  .layout-wheel::before, .seal-wax::after { animation: none; }
  .scroll, .pairs { transform: none !important; }
}

/* =========================================================
   Кофейная гуща: чашка вместо стола, рисунок вместо снимка
   ---------------------------------------------------------
   У гущи снимка нет и быть не может: она каждый раз ложится по-своему.
   Знак нарисован вектором в самих данных и приходит сюда как <svg
   class="sign"> — цвет, толщина линии и зерно задаются здесь, чтобы все
   сорок символов выглядели одной рукой. Лицо знака — не карта, а белый
   фарфор: круглое донце чашки с осадком по краю.
   ========================================================= */

/* Символы почти квадратные, как и грани костей. */
.deck-coffee { --card-w: 156px; }
.deck-coffee .card-img { aspect-ratio: 1; }
.deck-coffee .card-face { border-radius: 50%; }
/* Фарфор: тёплый белый с тенью по краю и осадком гущи у стенки. */
.deck-coffee .card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 177, 105, .3);
  background:
    radial-gradient(58% 58% at 38% 30%, #fffdf7, rgba(255, 253, 247, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(101, 58, 26, 0) 52%, rgba(101, 58, 26, .22) 78%, rgba(58, 30, 12, .5)),
    linear-gradient(158deg, #f6efe2, #e6d8c3);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, .5),
    inset 0 6px 22px rgba(120, 78, 42, .3),
    0 10px 28px rgba(0, 0, 0, .5);
}
/* Рубашка у гущи — не карта, а полная чашка: тёмный кофе с бликом. */
.deck-coffee .card-back {
  background:
    radial-gradient(38% 34% at 34% 26%, rgba(255, 231, 190, .3), transparent 70%),
    radial-gradient(circle at 50% 50%, #4a2a14, #24120a 74%, #150a05);
  box-shadow:
    inset 0 0 0 5px rgba(243, 224, 181, .34),
    inset 0 0 34px rgba(0, 0, 0, .6),
    0 10px 28px rgba(0, 0, 0, .5);
}
.deck-coffee .back-mark { font-size: 1.7rem; opacity: .8; }

/* Сам рисунок: гуща на фарфоре. Зерно собрано двумя точечными градиентами
   поверх знака — картинки для него нет, как и для всего остального
   оформления сайта. */
.sign {
  position: relative;
  width: 72%;
  height: 72%;
  color: #3a1d0b;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}
.sign.is-reversed { transform: rotate(180deg); }
.deck-coffee .card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(rgba(74, 42, 20, .5) 0.7px, transparent 0.9px) 0 0 / 5px 5px,
    radial-gradient(rgba(74, 42, 20, .35) 0.6px, transparent 0.8px) 2px 3px / 7px 7px;
}
/* В свитке знак стоит на том же фарфоре, только мельче. */
.scroll-aside:has(.sign) {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Без этого блок тянется на всю высоту свитка, и круг фарфора выходит
     овалом: у свитка align-items: stretch. */
  align-self: flex-start;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(158deg, #f6efe2, #e6d8c3);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .5), inset 0 4px 14px rgba(120, 78, 42, .28);
}

/* --- чашка: знаки от ободка ко дну ------------------------
   Первый знак лежит у самого края, последний — на дне: так чашку и читают.
   Координаты считает js/app.js и отдаёт числами --cx и --cy, здесь они
   умножаются на радиус. Дальний знак мельче: дно от глаза дальше края. */
.layout-cup {
  --cup-r: clamp(112px, 17vw, 196px);
  --card-w: clamp(88px, 11vw, 126px);
  position: relative;
  width: calc(var(--cup-r) * 2 + var(--card-w) * 1.15);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}
/* Сама чашка: круг фарфора с тенью от стенки и осадком по ободку. */
.layout-cup::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(70% 70% at 36% 26%, rgba(255, 253, 247, .22), transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(58, 29, 11, 0) 46%, rgba(58, 29, 11, .3) 82%, rgba(30, 14, 5, .58)),
    linear-gradient(158deg, rgba(246, 239, 226, .16), rgba(150, 120, 88, .1));
  box-shadow:
    inset 0 0 0 2px rgba(243, 224, 181, .28),
    inset 0 0 60px rgba(0, 0, 0, .5),
    0 20px 50px rgba(0, 0, 0, .45);
}
.layout-cup > .slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--cx, 0) * var(--cup-r)), calc(var(--cy, 0) * var(--cup-r)))
    scale(var(--depth, 1));
}
/* Место в чашке подписано коротко: полное название ждёт в свитке. */
.layout-cup .slot-hint { display: none; }
.layout-cup .slot-caption { min-height: 0; margin-bottom: 6px; }

/* --- ритуал: кофе варится, чашку опрокидывают -------------
   Тасовать здесь нечего. Статья «Гадание на кофейной гуще онлайн» описывает
   порядок: заварить, выпить, подумать о вопросе, покрутить чашку и
   перевернуть её на блюдце. Место то же, что у колоды, и нажимается так же. */
.shuffle.cup {
  position: relative;
  width: 148px;
  height: 148px;
  display: block;
  animation: cup-swirl 5s ease-in-out infinite;
}
.cup-body {
  position: absolute;
  left: 16px;
  top: 26px;
  width: 104px;
  height: 84px;
  border-radius: 10px 10px 46px 46px / 8px 8px 40px 40px;
  background: linear-gradient(160deg, #fdf8ee, #d9cbb4);
  box-shadow:
    inset 0 -14px 22px rgba(120, 78, 42, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 12px 26px rgba(0, 0, 0, .45);
}
.cup-brew {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(60% 70% at 38% 34%, #6b3c1b, #2b1608 76%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.cup-handle {
  position: absolute;
  left: 112px;
  top: 46px;
  width: 30px;
  height: 36px;
  border: 8px solid #e8dbc4;
  border-left-color: transparent;
  border-radius: 0 22px 22px 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.cup-saucer {
  position: absolute;
  left: 2px;
  top: 104px;
  width: 132px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3ecdd, #bfae92);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .55);
}
.cup-steam {
  position: absolute;
  left: 30px;
  top: -14px;
  width: 76px;
  height: 46px;
  pointer-events: none;
}
.cup-steam i {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 244, 222, 0), rgba(255, 244, 222, .5));
  filter: blur(3px);
  animation: cup-steam 3.4s ease-in-out infinite;
}
.cup-steam i:nth-child(1) { left: 8px; animation-delay: 0s; }
.cup-steam i:nth-child(2) { left: 34px; animation-delay: .9s; }
.cup-steam i:nth-child(3) { left: 58px; animation-delay: 1.7s; }
@keyframes cup-steam {
  0% { opacity: 0; transform: translateY(6px) scaleX(.7); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-28px) scaleX(1.5); }
}
/* Чашку крутят по часовой стрелке — так велит статья, прежде чем опрокинуть
   её на блюдце. */
@keyframes cup-swirl {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.shuffle.cup:hover { animation-play-state: paused; }

/* Значок расклада-чашки в списке: ободок и знаки по кругу. */
.spread-icon .icon-cup {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .45;
}

@media (max-width: 900px) {
  .deck-coffee { --card-w: 120px; }
}
@media (max-width: 640px) {
  /* В узкой колонке круг чашки съедает всю высоту, и знаки налезают друг на
     друга. Чашка расходится в обычную сетку, а места подписываются целиком —
     как и колесо месяцев на том же экране. */
  .layout-cup {
    /* position: relative остаётся от .deck: скатерть стола лежит абсолютом
       и без него закрывает собой подписи мест — они рисуются без позиции
       и уходят под неё. */
    width: auto;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 22px 12px;
  }
  .layout-cup::before { display: none; }
  .layout-cup > .slot { position: static; width: auto; transform: none; }
  .layout-cup .slot-hint { display: block; }
  .shuffle.cup { transform: scale(.86); }
}

/* =========================================================
   Хиромантия: схема ладони и вопросы о своей руке
   ---------------------------------------------------------
   Кисть собрана из скруглённых прямоугольников — так её и рисуют в
   учебниках. Обведённая по контуру фотография чужой руки читалась бы
   хуже: на ней видно кожу, а не линии. Линии и бугры — кнопки, и то,
   что выбрано, светится золотом.
   ========================================================= */

.palm-map {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  margin-top: 22px;
}
.palm-figure {
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(76% 60% at 50% 22%, rgba(255, 176, 96, .1), transparent 70%),
    linear-gradient(168deg, #2a1420, #190d16);
  box-shadow:
    inset 0 0 0 1px rgba(217, 177, 105, .26),
    inset 0 0 60px rgba(0, 0, 0, .5),
    0 16px 40px rgba(0, 0, 0, .4);
}
.palm { display: block; width: 100%; height: auto; }
/* Кожа ладони: тёплая, чуть подсвеченная сбоку, как рука у свечи. */
.palm-skin rect { fill: rgba(226, 186, 152, .17); stroke: rgba(233, 199, 166, .5); stroke-width: 2.5; }
.palm-wrist path { stroke: rgba(233, 199, 166, .32); stroke-width: 2.5; stroke-linecap: round; fill: none; }

.palm-line { cursor: pointer; }
.palm-hit { fill: none; stroke: transparent; stroke-width: 26; }
.palm-stroke {
  fill: none;
  stroke: rgba(243, 224, 181, .62);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke .25s, stroke-width .25s;
}
.palm-line text,
.palm-mount text {
  font: 600 12px/1 Manrope, system-ui, sans-serif;
  fill: rgba(236, 225, 212, .62);
  text-anchor: middle;
  pointer-events: none;
  transition: fill .25s;
}
.palm-line text { text-anchor: start; }
.palm-line:hover .palm-stroke,
.palm-line:focus-visible .palm-stroke { stroke: var(--gold-soft, #f3e0b5); stroke-width: 6; }
.palm-line.is-picked .palm-stroke {
  stroke: #f3e0b5;
  stroke-width: 6.5;
  filter: drop-shadow(0 0 7px rgba(217, 177, 105, .9));
}
.palm-line.is-picked text,
.palm-mount.is-picked text { fill: #f3e0b5; }

.palm-mount { cursor: pointer; }
.palm-mount circle {
  fill: rgba(99, 183, 172, .12);
  stroke: rgba(99, 183, 172, .42);
  stroke-width: 1.6;
  transition: fill .25s, stroke .25s;
}
.palm-mount:hover circle,
.palm-mount:focus-visible circle { fill: rgba(99, 183, 172, .26); stroke: rgba(99, 183, 172, .8); }
.palm-mount.is-picked circle {
  fill: rgba(217, 177, 105, .3);
  stroke: rgba(217, 177, 105, .85);
}
.palm-line:focus-visible,
.palm-mount:focus-visible { outline: none; }

/* Полка справа от схемы: что выбрано, то и рассказано. */
.palm-panel {
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 14px;
  background: linear-gradient(168deg, rgba(243, 236, 221, .96), rgba(228, 217, 196, .94));
  color: #2c1b12;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.palm-panel h3 {
  margin: 4px 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  color: #33200f;
}
.palm-panel p { margin: 0 0 10px; line-height: 1.62; }
.palm-panel p:last-child { margin-bottom: 0; }
.palm-panel-kind {
  display: inline-block;
  font: 700 .72rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7c5a33;
}
.palm-where { font-style: italic; color: #5d4630; }

/* --- вопросы о своей руке -------------------------------- */
.palm-form { margin-top: 22px; }
.palm-q {
  margin: 0 0 18px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(217, 177, 105, .24);
  border-radius: 14px;
  background: rgba(0, 0, 0, .2);
}
.palm-q legend {
  padding: 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  color: var(--gold-soft, #f3e0b5);
}
.palm-q legend b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(99, 183, 172, .22);
  border: 1px solid rgba(99, 183, 172, .5);
  font: 700 .78rem/1 Manrope, system-ui, sans-serif;
  color: #9fe0d6;
  vertical-align: 2px;
}
.palm-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.palm-opt { cursor: pointer; }
.palm-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.palm-opt span {
  display: block;
  padding: 9px 14px;
  border: 1px solid rgba(217, 177, 105, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--ink-soft, #ece1d4);
  font-size: .94rem;
  line-height: 1.35;
  transition: background .22s, border-color .22s, color .22s;
}
.palm-opt:hover span { border-color: rgba(217, 177, 105, .62); background: rgba(255, 255, 255, .08); }
.palm-opt input:checked + span {
  border-color: rgba(217, 177, 105, .85);
  background: rgba(217, 177, 105, .2);
  color: #fdf3dd;
}
/* Клавиатурой видно, на каком варианте стоишь: сама кнопка спрятана. */
.palm-opt input:focus-visible + span { outline: 2px solid rgba(99, 183, 172, .8); outline-offset: 2px; }

.palm-caution p { font-style: italic; }

@media (max-width: 900px) {
  /* Схема уходит наверх, полка — под неё: в две колонки на телефоне
     ладонь становится с ноготь, и линии в ней уже не разглядеть. */
  .palm-map { grid-template-columns: minmax(0, 1fr); }
  .palm-figure { max-width: 340px; margin: 0 auto; }
}

/* =========================================================
   Восковые фигуры: отливка вместо карты, свеча вместо колоды
   ---------------------------------------------------------
   Лицо знака — застывшая в воде капля воска: тёплый жёлтый, неровный
   край, свет изнутри. Сама фигура темнее и чуть просвечивает, как
   бывает у толстого слоя воска на свету.
   ========================================================= */

.deck-wax { --card-w: 152px; }
.deck-wax .card-img { aspect-ratio: 1; }
.deck-wax .card-face {
  /* Край у отливки неровный: воск в воде не застывает кругом. */
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
}
.deck-wax .card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 214, 140, .34);
  background:
    radial-gradient(54% 50% at 36% 28%, rgba(255, 250, 232, .95), rgba(255, 244, 214, 0) 70%),
    radial-gradient(circle at 50% 54%, #f6e2b4, #e6c98c 62%, #cfa960);
  box-shadow:
    inset 0 0 0 4px rgba(255, 249, 232, .48),
    inset 0 8px 26px rgba(150, 104, 40, .34),
    0 10px 28px rgba(0, 0, 0, .5),
    0 0 30px rgba(255, 190, 110, .12);
}
/* Рубашка — нетронутая свеча: столбик воска с тёплым бликом. */
.deck-wax .card-back {
  background:
    radial-gradient(40% 36% at 34% 24%, rgba(255, 238, 200, .34), transparent 70%),
    radial-gradient(circle at 50% 50%, #6c4a20, #3a2510 72%, #21140a);
  box-shadow:
    inset 0 0 0 4px rgba(255, 214, 140, .3),
    inset 0 0 34px rgba(0, 0, 0, .55),
    0 10px 28px rgba(0, 0, 0, .5);
}
.deck-wax .back-mark { font-size: 1.7rem; opacity: .82; }
/* Знак на воске темнее фона и с мягкой тенью: толстый слой на свету. */
.deck-wax .sign { color: #6a4212; filter: drop-shadow(0 1px 1px rgba(255, 249, 232, .6)); }
.deck-wax .card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .34;
  background: radial-gradient(38% 30% at 68% 76%, rgba(150, 104, 40, .5), transparent 70%);
}
/* В свитке отливка лежит на том же воске. */
body.deck-wax .scrolls .scroll-aside:has(.sign) { border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; }

/* --- ритуал: свеча горит, воск капает --------------------- */
.shuffle.candle {
  position: relative;
  width: 132px;
  height: 168px;
  display: block;
}
.candle-body {
  position: absolute;
  left: 46px;
  top: 46px;
  width: 40px;
  height: 78px;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(100deg, #fff6e0, #e8d3a8 58%, #c9ab78);
  box-shadow: inset -6px 0 12px rgba(120, 80, 30, .28), 0 10px 24px rgba(0, 0, 0, .45);
}
/* Оплывший бок: капля ползёт вниз и срывается. */
.candle-drip {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 9px;
  height: 15px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #fff8e8, #e2c896);
  animation: candle-drip 4.6s ease-in infinite;
}
@keyframes candle-drip {
  0%, 60% { transform: translateY(0); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}
.candle-flame {
  position: absolute;
  left: 56px;
  top: 8px;
  width: 20px;
  height: 40px;
}
.candle-flame::before,
.candle-flame i {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}
.candle-flame::before {
  width: 20px;
  height: 40px;
  background: radial-gradient(60% 70% at 50% 72%, #ffd98a, #ff9b34 62%, rgba(255, 120, 30, .1));
  filter: blur(.4px);
  animation: flame-dance 1.6s ease-in-out infinite;
}
.candle-flame i {
  width: 8px;
  height: 18px;
  background: radial-gradient(60% 70% at 50% 70%, #fffbe8, #ffd07a);
  animation: flame-dance 1.15s ease-in-out infinite reverse;
}
@keyframes flame-dance {
  0%, 100% { transform: translateX(-50%) scale(1) skewX(0deg); }
  30% { transform: translateX(-52%) scale(1.06, .95) skewX(-4deg); }
  65% { transform: translateX(-48%) scale(.95, 1.07) skewX(4deg); }
}
/* Чаша с холодной водой: в неё и льют воск. */
.candle-bowl {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 120px;
  height: 40px;
  border-radius: 0 0 60px 60px / 0 0 40px 40px;
  background: linear-gradient(180deg, rgba(99, 183, 172, .34), rgba(28, 62, 62, .8));
  box-shadow: inset 0 5px 0 rgba(180, 233, 226, .42), 0 10px 22px rgba(0, 0, 0, .45);
}
.shuffle.candle:hover .candle-flame::before { animation-duration: .7s; }

@media (max-width: 900px) {
  .deck-wax { --card-w: 118px; }
}
@media (max-width: 640px) {
  .shuffle.candle { transform: scale(.86); }
}

/* =========================================================
   Книга Судеб: разворот вместо стола
   ---------------------------------------------------------
   Здесь нечего переворачивать и нечего толковать: книга отвечает готовым
   текстом. Поэтому и сцена другая — не стол с картами, а раскрытый на
   загаданном месте разворот: слева вопрос, справа ответ.
   ========================================================= */

.book-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}
.book-numbers > div { display: flex; flex-direction: column; gap: 5px; }
.book-numbers label {
  font: 700 .72rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft, #f3e0b5);
}
.book-numbers input {
  width: 108px;
  padding: 9px 12px;
  border: 1px solid rgba(217, 177, 105, .38);
  border-radius: 9px;
  background: rgba(0, 0, 0, .3);
  color: var(--ink-soft, #ece1d4);
  font: 600 1.02rem/1.2 Manrope, system-ui, sans-serif;
}
.book-numbers input:focus-visible { outline: 2px solid rgba(99, 183, 172, .8); outline-offset: 2px; }
.book-hint {
  flex: 1 1 260px;
  margin: 0;
  font-size: .9rem;
  font-style: italic;
  color: rgba(236, 225, 212, .72);
}
.book-actions { margin-top: 18px; }

/* Разворот: две страницы и корешок между ними. Бумага нарисована
   градиентами, как и всё остальное на сайте. */
.book {
  display: grid;
  grid-template-columns: 1fr 26px 1fr;
  margin: 26px 0 8px;
  border-radius: 8px;
  color: #2c1b12;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
}
.book-page {
  position: relative;
  padding: clamp(20px, 3vw, 34px) clamp(18px, 2.6vw, 32px);
  background:
    repeating-linear-gradient(180deg, rgba(120, 90, 50, .07) 0 1px, transparent 1px 27px),
    linear-gradient(168deg, #f7f0dd, #e8dcc0);
}
.book-left { border-radius: 8px 0 0 8px; }
.book-right { border-radius: 0 8px 8px 0; }
/* Тень у корешка: страница уходит в сгиб. */
.book-left::after,
.book-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
}
.book-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(90, 62, 30, .26)); }
.book-right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(90, 62, 30, .26)); }
.book-spine {
  background: linear-gradient(90deg, #b39a6c, #6d5732 45%, #6d5732 55%, #b39a6c);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .45);
}
.book-kind {
  display: block;
  margin-bottom: 10px;
  font: 700 .72rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8a663a;
}
.book-question {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.35;
  color: #33200f;
}
.book-place {
  margin: 0;
  font-size: .92rem;
  font-style: italic;
  color: #7c5a33;
}
.book-answer {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.18rem, 2.5vw, 1.55rem);
  line-height: 1.5;
  color: #2a190d;
}
/* Первая буква ответа — буквица, как в настоящем фолианте. */
.book-answer::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  font-size: 3.1em;
  line-height: .78;
  color: #8a3b2e;
}
.book-repeat p { font-style: italic; }

@media (max-width: 640px) {
  /* На узком экране разворот складывается в одну колонку: две страницы
     по 160 px читать нельзя, а корешок между ними и вовсе не нужен. */
  .book { grid-template-columns: minmax(0, 1fr); }
  .book-spine { display: none; }
  .book-left { border-radius: 8px 8px 0 0; }
  .book-right { border-radius: 0 0 8px 8px; box-shadow: inset 0 1px 0 rgba(90, 62, 30, .3); }
  .book-left::after, .book-right::after { display: none; }
  .book-numbers input { width: 100%; }
}

/* =========================================================
   Домино и шар судьбы: раздел с двумя гаданиями на странице
   ---------------------------------------------------------
   Кость домино — костяная пластинка: тёплый белый, чёрная рамка, черта
   посередине и точки по сетке. Шар судьбы стоит ниже отдельным блоком:
   он не разбирает положение дел, а отвечает одной строкой в окошке.
   ========================================================= */

/* Кость домино — сама карточка, а не рисунок на ней. Настоящая костяшка
   светлая, вдвое выше, чем шире, и чёрного на ней ровно два: черта
   посередине и точки. Их и рисует svg; рамку рисовать нечем — рамка
   и есть край карточки. Пропорция 1:2 отсюда же, и поле знака у домино
   такое же (signBox в tools/build-pages.js), иначе кость сплющило бы
   в квадрат. */
.deck-domino { --card-w: 72px; }
.deck-domino .card-img { aspect-ratio: 1 / 2; }
.deck-domino .card-face { border-radius: 11px; }
.deck-domino .card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 177, 105, .3);
  background:
    radial-gradient(60% 46% at 34% 20%, #fffdf6, rgba(255, 253, 246, 0) 72%),
    linear-gradient(160deg, #f4efe2, #ddd3c0);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .55),
    inset 0 -8px 18px rgba(90, 74, 50, .22),
    0 10px 28px rgba(0, 0, 0, .5);
}
.deck-domino .sign { width: 100%; height: 100%; color: #241a12; filter: none; }
/* Рубашка кости — гладкая тёмная кость с латунной рамкой. */
.deck-domino .card-back {
  background:
    radial-gradient(40% 34% at 32% 22%, rgba(243, 224, 181, .22), transparent 70%),
    linear-gradient(160deg, #2f2118, #170f0a);
  box-shadow:
    inset 0 0 0 3px rgba(243, 224, 181, .3),
    inset 0 0 30px rgba(0, 0, 0, .6),
    0 10px 28px rgba(0, 0, 0, .5);
}
/* В свитке подложка знака — та же кость: пропорция 1:2 и то же
   скругление, что у карточки на столе. Правило именное, с телом раздела:
   без него оно накрывало бы и воск с гущей, у которых подложка своя. */
body.deck-domino .scrolls .scroll-aside:has(.sign) {
  width: 62px;
  aspect-ratio: 1 / 2;
  border-radius: 10px;
}

/* --- шар судьбы ------------------------------------------ */
.ball-section { margin-top: 8px; }
.ball-scene { display: grid; justify-items: center; gap: 14px; margin-top: 20px; }
.ball {
  position: relative;
  width: clamp(200px, 30vw, 268px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #4a4457, #17131e 62%, #0a070d);
  box-shadow:
    inset 0 0 0 2px rgba(243, 224, 181, .16),
    inset -18px -22px 50px rgba(0, 0, 0, .8),
    0 26px 54px rgba(0, 0, 0, .6),
    0 0 60px rgba(99, 183, 172, .14);
  transition: transform .3s var(--ease-out, ease);
}
.ball:hover { transform: translateY(-4px) scale(1.02); }
/* Блик на боку шара: одно пятно света сверху слева. */
.ball-gloss {
  position: absolute;
  left: 17%;
  top: 12%;
  width: 34%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent);
  filter: blur(2px);
  pointer-events: none;
}
/* Окошко, в котором всплывает ответ: тёмно-синяя жидкость и грань внутри. */
.ball-window {
  position: relative;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  padding: 8%;
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle at 42% 34%, #2b4f7a, #10203a 68%, #081327);
  box-shadow: inset 0 0 0 2px rgba(140, 190, 235, .22), inset 0 10px 26px rgba(0, 0, 0, .6);
}
.ball-window.no { background: radial-gradient(circle at 42% 34%, #6b2f3a, #2c1017 68%, #180509); }
.ball-window.maybe { background: radial-gradient(circle at 42% 34%, #6a5a2a, #2c2410 68%, #171205); }
.ball-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.02rem, 2.1vw, 1.3rem);
  line-height: 1.28;
  color: #f3ecdc;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.ball-hint {
  margin: 0;
  font-size: .92rem;
  font-style: italic;
  color: rgba(236, 225, 212, .74);
  text-align: center;
  max-width: 46ch;
}
/* Шар трясут — и он трясётся: короткая дрожь, пока ответ всплывает. */
.ball.is-shaking { animation: ball-shake .9s ease-in-out; }
@keyframes ball-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(-7px, 3px) rotate(-3deg); }
  28% { transform: translate(6px, -4px) rotate(3deg); }
  44% { transform: translate(-5px, -3px) rotate(-2deg); }
  62% { transform: translate(5px, 4px) rotate(2deg); }
  80% { transform: translate(-3px, 2px) rotate(-1deg); }
}
.ball.is-answered .ball-text { animation: ball-surface .8s var(--ease-out, ease) both; }
@keyframes ball-surface {
  from { opacity: 0; transform: scale(.72); filter: blur(4px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (max-width: 900px) {
  .deck-domino { --card-w: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .ball, .ball.is-shaking { animation: none; transition: none; }
}

/* =========================================================
   Рубашка своей колоды
   ----------------------------------------------------------
   Рубашка была одна на все разделы: тёмное поле с латунной розеткой.
   Из-за этого руна лежала на столе картой Таро, а камень — той же картой,
   только в размер камня. Теперь у каждой колоды свой оборот, и по нему
   видно, что перед тобой лежит, ещё до того, как знак открыли:
   у Таро лучи и розетка, у Ленорман решётка гравюры, у игральных карт
   гильош с мастями, у рун дощечка с выжженным знаком, у камней галька,
   у костей грань кубика, у домино кость с латунным штифтом.

   Слои приходят из js/app.js тремя пустыми <i> внутри .back-art; что на
   них нарисовано, решает класс колоды на <body>. Ниже — по блоку на
   колоду: поле, узор, кромка. Картинок нет ни одной, всё градиентами.
   ========================================================= */

.back-art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.back-art i { position: absolute; inset: 0; display: block; }

/* Блик, который проходит по рубашке при наведении: свеча скользнула
   по лаку — одинаково у всех колод, потому и вынесен сюда. */
.back-art i:nth-child(3) {
  background: linear-gradient(108deg, transparent 38%, rgba(255, 246, 222, .26) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
}
.card-img:not(.revealed):hover .back-art i:nth-child(3) { transform: translateX(120%); }

/* --- Таро: лучи, розетка и четыре угловых зерна ----------- */
.deck-taro .card-back {
  background:
    repeating-conic-gradient(from 0deg at 50% 44%,
      rgba(243, 224, 181, .05) 0deg 3deg, transparent 3deg 11deg),
    radial-gradient(1.4px 1.4px at 24% 16%, rgba(243, 224, 181, .5), transparent),
    radial-gradient(1.2px 1.2px at 76% 26%, rgba(243, 224, 181, .42), transparent),
    radial-gradient(1.3px 1.3px at 33% 78%, rgba(243, 224, 181, .45), transparent),
    radial-gradient(1.1px 1.1px at 70% 86%, rgba(243, 224, 181, .38), transparent),
    radial-gradient(64% 46% at 50% 44%, rgba(126, 96, 196, .4), transparent 68%),
    linear-gradient(155deg, #31205a, #150d24 58%, #291a42);
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .5),
    inset 0 0 0 6px rgba(0, 0, 0, .34),
    inset 0 0 0 7px rgba(243, 224, 181, .22),
    inset 0 0 46px rgba(0, 0, 0, .58),
    0 10px 28px rgba(0, 0, 0, .5);
}
/* Розетка: двадцать четыре тонких луча из середины, идут по кругу так
   медленно, что движение замечаешь, только если смотреть. */
.deck-taro .back-art i:nth-child(1) {
  inset: auto;
  left: 50%;
  top: 44%;
  width: 92%;
  aspect-ratio: 1;
  margin: -46% 0 0 -46%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(243, 224, 181, .22) 0deg 1.2deg, transparent 1.2deg 15deg),
    repeating-conic-gradient(from 7.5deg,
      rgba(243, 224, 181, .1) 0deg .8deg, transparent .8deg 15deg);
  animation: spin 150s linear infinite;
}
/* Четыре зерна по углам — тот же ромбик, что стоит перед заголовками. */
.deck-taro .back-art i:nth-child(2) {
  background-image:
    radial-gradient(circle, rgba(243, 224, 181, .6) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(243, 224, 181, .6) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(243, 224, 181, .6) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(243, 224, 181, .6) 0 1.6px, transparent 2.2px);
  background-repeat: no-repeat;
  background-position:
    13px 13px, calc(100% - 13px) 13px,
    13px calc(100% - 13px), calc(100% - 13px) calc(100% - 13px);
}

/* --- Ленорман: гравюрная карточка кремового картона -------
   Снимки колоды — белые карточки с чёрной рамкой и гравюрой внутри.
   Рубашка сделана из того же картона: винная решётка по кремовому,
   двойная рамка и ферон в овале. */
.deck-lenorman .card-back {
  background:
    repeating-linear-gradient(45deg, rgba(122, 30, 48, .16) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(122, 30, 48, .16) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(160deg, #f7ecd9, #e3cfb0);
  box-shadow:
    inset 0 0 0 1px rgba(26, 15, 10, .82),
    inset 0 0 0 4px #f6ebd8,
    inset 0 0 0 5px rgba(122, 30, 48, .55),
    inset 0 0 26px rgba(122, 30, 48, .14),
    0 10px 26px rgba(0, 0, 0, .5);
  color: #7a1e30;
}
.deck-lenorman .card-back::before {
  border-color: rgba(122, 30, 48, .35);
  box-shadow: inset 0 0 18px rgba(122, 30, 48, .12);
}
.deck-lenorman .card-back::after { border-color: rgba(122, 30, 48, .28); }
/* Овал под фероном: на нём решётка обрывается, как на настоящей рубашке. */
.deck-lenorman .back-art i:nth-child(1) {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 34%;
  margin: -17% 0 0 -25%;
  border-radius: 50%;
  background: linear-gradient(160deg, #fbf3e4, #f0e2c9);
  box-shadow: inset 0 0 0 1px rgba(122, 30, 48, .5), 0 1px 4px rgba(0, 0, 0, .12);
}
.deck-lenorman .back-mark {
  color: #7a1e30;
  font-size: 1.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.deck-lenorman .card-img:not(.revealed):hover .card-back {
  color: #96263c;
  box-shadow:
    inset 0 0 0 1px rgba(26, 15, 10, .82),
    inset 0 0 0 4px #fdf6e8,
    inset 0 0 0 5px rgba(122, 30, 48, .8),
    inset 0 0 26px rgba(122, 30, 48, .18),
    0 18px 40px rgba(0, 0, 0, .55),
    0 0 42px rgba(217, 177, 105, .3);
}

/* --- Игральные карты: белая кайма и красный гильош -------- */
.deck-cards .card-back {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255, 255, 255, .09) 0deg 2deg, transparent 2deg 8deg),
    repeating-linear-gradient(45deg, rgba(255, 240, 224, .12) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 8px),
    linear-gradient(150deg, #a92c38, #6d1420 70%, #4d0d17);
  box-shadow:
    inset 0 0 0 6px #f7f1e4,
    inset 0 0 0 7px rgba(0, 0, 0, .3),
    inset 0 0 34px rgba(0, 0, 0, .4),
    0 10px 26px rgba(0, 0, 0, .5);
  color: #a92c38;
}
.deck-cards .card-back::before { border-color: rgba(255, 240, 224, .4); }
.deck-cards .card-back::after { border-color: rgba(255, 240, 224, .3); }
/* Белый овал в середине, на нём — масть. */
.deck-cards .back-art i:nth-child(1) {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 30%;
  margin: -15% 0 0 -21%;
  border-radius: 50%;
  background: linear-gradient(160deg, #fdf8ec, #f1e6d2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(109, 20, 32, .45);
}
.deck-cards .back-mark {
  color: #6d1420;
  font-size: 1.35rem;
  text-shadow: none;
}

/* --- Руны: дощечка с выжженным знаком ---------------------
   Руны нарисованы тёмно-коричневым по светлому дереву. Рубашка — та же
   дощечка, только пустая: волокно, два сучка и знак, выжженный так же,
   как на лице. Уголёк в нём то тлеет, то гаснет. */
.deck-runes .card-back {
  background:
    repeating-linear-gradient(91deg, rgba(118, 78, 38, .17) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(89deg, rgba(118, 78, 38, .11) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90.6deg, rgba(255, 246, 226, .3) 0 1px, transparent 1px 17px),
    radial-gradient(130% 70% at 50% 16%, rgba(255, 243, 219, .45), transparent 62%),
    linear-gradient(165deg, #e6d0a8, #c5a479 72%, #ad8a57);
  box-shadow:
    inset 0 0 0 1px rgba(122, 84, 44, .6),
    inset 0 0 0 3px rgba(255, 246, 226, .45),
    inset 0 0 26px rgba(96, 62, 30, .32),
    0 10px 26px rgba(0, 0, 0, .5);
  color: #4a2c12;
}
/* Гебо — та самая руническая X, что режут на дереве ножом: две зарубки
   крест-накрест. Знак нарисован двумя псевдоэлементами, а не набран
   шрифтом: рунического блока в Manrope и Cormorant нет, и браузер
   подставлял бы под него что придётся. */
.deck-runes .card-back::before,
.deck-runes .card-back::after {
  width: 46%;
  height: 5px;
  aspect-ratio: auto;
  margin: -2.5px 0 0 -23%;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #6b4118, #3d2109);
  box-shadow:
    0 1px 0 rgba(255, 246, 226, .6),
    inset 0 1px 2px rgba(0, 0, 0, .5);
  animation: none;
}
.deck-runes .card-back::before { transform: rotate(33deg); }
.deck-runes .card-back::after { transform: rotate(-33deg); }
/* Два сучка на доске: у каждой дощечки они на своём месте. */
.deck-runes .back-art i:nth-child(1) {
  background-image:
    radial-gradient(13% 8% at 26% 21%, rgba(112, 72, 32, .5), transparent 68%),
    radial-gradient(7% 4% at 26% 21%, rgba(92, 56, 22, .55), transparent 70%),
    radial-gradient(11% 7% at 73% 75%, rgba(112, 72, 32, .42), transparent 68%),
    radial-gradient(6% 4% at 73% 75%, rgba(92, 56, 22, .45), transparent 70%);
}
/* Прожжённая кромка: к краям доска темнее, как от долгого хвата. */
.deck-runes .back-art i:nth-child(2) {
  background: radial-gradient(78% 62% at 50% 48%, transparent 52%, rgba(88, 54, 22, .34));
}
/* Уголёк в зарубке то тлеет, то гаснет — доску только что вынули
   из мешочка, а до того она лежала у огня. */
.deck-runes .card-back::before,
.deck-runes .card-back::after { animation: rune-ember 4.6s ease-in-out infinite; }
@keyframes rune-ember {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 246, 226, .6), inset 0 1px 2px rgba(0, 0, 0, .5); }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 246, 226, .6),
      inset 0 1px 2px rgba(0, 0, 0, .5),
      0 0 16px rgba(214, 108, 26, .55);
  }
}

/* --- Камни: галька из мешочка -----------------------------
   Камень не карта: у него нет ни рамки, ни угла. Форма неровная, бок
   мокро блестит, по всей поверхности крапины. */
.deck-stones .card-back {
  /* Форма неровная и у каждого камня своя: соседние берут её ниже,
     по чётности места. Круглый камень читался бы шаром. */
  border-radius: 61% 39% 52% 48% / 39% 58% 42% 61%;
  background:
    /* скол: плоская грань, отбитая с одного бока */
    linear-gradient(118deg, rgba(255, 252, 244, .14) 0 24%, rgba(0, 0, 0, .1) 25%, transparent 34%),
    radial-gradient(30% 23% at 34% 26%, rgba(255, 252, 244, .2), transparent 74%),
    radial-gradient(46% 38% at 74% 80%, rgba(0, 0, 0, .5), transparent 74%),
    linear-gradient(150deg, #9d8c74, #746653 48%, #453e32);
  box-shadow:
    inset 0 2px 6px rgba(255, 252, 244, .16),
    inset 0 -14px 26px rgba(0, 0, 0, .44),
    0 14px 28px rgba(0, 0, 0, .55);
}
.deck-stones .card-back::before,
.deck-stones .card-back::after { display: none; }
/* Крапины: две точечные сетки со сдвигом — камень не бывает гладким. */
.deck-stones .back-art i:nth-child(1) {
  opacity: .34;
  background:
    radial-gradient(rgba(255, 252, 244, .5) .9px, transparent 1.5px) 0 0 / 19px 19px,
    radial-gradient(rgba(0, 0, 0, .45) .8px, transparent 1.3px) 8px 11px / 26px 26px,
    radial-gradient(rgba(0, 0, 0, .3) 1.5px, transparent 2.2px) 15px 5px / 47px 47px;
}
/* Пятна на камне: светлые и тёмные, вразброс. Ровной жилы не бывает —
   от неё галька выглядела бы полированным диском. */
.deck-stones .back-art i:nth-child(2) {
  opacity: .7;
  background:
    radial-gradient(7% 5% at 21% 63%, rgba(240, 232, 214, .36), transparent 76%),
    radial-gradient(6% 4% at 75% 25%, rgba(44, 37, 28, .5), transparent 76%),
    radial-gradient(4% 6% at 57% 85%, rgba(240, 232, 214, .26), transparent 76%),
    radial-gradient(5% 4% at 44% 41%, rgba(44, 37, 28, .4), transparent 76%),
    radial-gradient(4% 5% at 62% 58%, rgba(240, 232, 214, .22), transparent 76%),
    radial-gradient(3% 4% at 33% 44%, rgba(44, 37, 28, .34), transparent 76%);
}
/* Камни в раскладе не одинаковые: соседние отбиты по-разному. */
.deck-stones .slot:nth-child(even) .card-back {
  border-radius: 44% 56% 39% 61% / 57% 41% 59% 43%;
}
.deck-stones .slot:nth-child(3n) .card-back {
  border-radius: 52% 48% 61% 39% / 44% 61% 39% 56%;
}
.deck-stones .back-art i:nth-child(3) {
  background: linear-gradient(108deg, transparent 42%, rgba(255, 250, 235, .2) 50%, transparent 58%);
}
.deck-stones .card-img:not(.revealed):hover .card-back {
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, .34),
    inset 0 -10px 22px rgba(0, 0, 0, .38),
    0 20px 38px rgba(0, 0, 0, .6),
    0 0 40px rgba(217, 177, 105, .26);
}

/* --- Кости: грань кубика ---------------------------------
   Кости на снимках голубые, с тёмными точками. Закрытая кость — та же
   грань, только точки на ней ещё не проступили. */
.deck-dice .card-back {
  border-radius: 22%;
  background:
    radial-gradient(58% 46% at 30% 22%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(155deg, #a8d8e6, #6a9fb2 62%, #47788c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    inset 0 10px 20px rgba(255, 255, 255, .22),
    inset 0 -12px 24px rgba(0, 0, 0, .3),
    0 12px 26px rgba(0, 0, 0, .5);
}
.deck-dice .card-back::before,
.deck-dice .card-back::after { display: none; }
/* Пять точек, едва проступивших: грань лежит, но её ещё не читали. */
.deck-dice .back-art i:nth-child(1) {
  opacity: .3;
  background-image:
    radial-gradient(circle, rgba(18, 40, 50, .9) 0 12%, transparent 14%),
    radial-gradient(circle, rgba(18, 40, 50, .9) 0 12%, transparent 14%),
    radial-gradient(circle, rgba(18, 40, 50, .9) 0 12%, transparent 14%),
    radial-gradient(circle, rgba(18, 40, 50, .9) 0 12%, transparent 14%),
    radial-gradient(circle, rgba(18, 40, 50, .9) 0 12%, transparent 14%);
  background-repeat: no-repeat;
  background-size: 26% 26%;
  background-position: 22% 22%, 78% 22%, 50% 50%, 22% 78%, 78% 78%;
}
.deck-dice .back-art i:nth-child(2) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 42%);
}
/* Закрытая кость покачивается не так, как карта: её только что тряхнули
   в ладонях, и она ещё не улеглась. */
body.deck-dice .deck:not(.is-dealing) .card-img:not(.revealed) {
  animation: dice-settle 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -610ms);
}
@keyframes dice-settle {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  32% { transform: rotate(calc(var(--tilt, 0deg) + 4deg)) translateY(-7px); }
  64% { transform: rotate(calc(var(--tilt, 0deg) - 3deg)) translateY(-2px); }
}

/* --- Домино: латунный штифт поперёк кости ----------------- */
.deck-domino .card-back::before,
.deck-domino .card-back::after { display: none; }
.deck-domino .back-art i:nth-child(1) {
  background:
    linear-gradient(to bottom, transparent calc(50% - 1px),
      rgba(243, 224, 181, .32) calc(50% - 1px), rgba(243, 224, 181, .32) calc(50% + 1px),
      transparent calc(50% + 1px));
}
.deck-domino .back-art i:nth-child(2) {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 15%;
  aspect-ratio: 1;
  margin: -7.5% 0 0 -7.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #f6e3ba, #8d6a2f 70%, #5a4119);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.deck-domino .back-mark { display: none; }

/* --- Гуща и воск: у них рубашка уже своя, ей нужен лишь блик --- */
.deck-coffee .back-art i:nth-child(1) {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 231, 190, .05) 0deg 6deg, transparent 6deg 22deg);
  animation: spin 90s linear infinite;
}
.deck-wax .back-art i:nth-child(1) {
  background: radial-gradient(50% 44% at 50% 52%, rgba(255, 196, 110, .3), transparent 72%);
  animation: flicker 5s ease-in-out infinite;
}

/* --- Стопка на ритуале: она из той же колоды -------------- */
body.deck-taro .shuffle i {
  background:
    repeating-conic-gradient(from 0deg at 50% 44%,
      rgba(243, 224, 181, .05) 0deg 3deg, transparent 3deg 11deg),
    radial-gradient(64% 46% at 50% 44%, rgba(126, 96, 196, .36), transparent 68%),
    linear-gradient(155deg, #2d1c4c, #150d24 58%, #26183a);
}
body.deck-lenorman .shuffle i {
  background:
    repeating-linear-gradient(45deg, rgba(122, 30, 48, .16) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(122, 30, 48, .16) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(160deg, #f7ecd9, #e3cfb0);
  box-shadow:
    inset 0 0 0 1px rgba(26, 15, 10, .8),
    inset 0 0 0 3px #f6ebd8,
    inset 0 0 0 4px rgba(122, 30, 48, .5),
    0 10px 26px rgba(0, 0, 0, .5);
}
body.deck-cards .shuffle i {
  background:
    repeating-linear-gradient(45deg, rgba(255, 240, 224, .12) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 8px),
    linear-gradient(150deg, #a92c38, #6d1420 70%, #4d0d17);
  box-shadow:
    inset 0 0 0 5px #f7f1e4,
    inset 0 0 0 6px rgba(0, 0, 0, .3),
    0 10px 26px rgba(0, 0, 0, .5);
}
body.deck-runes .shuffle i {
  background:
    repeating-linear-gradient(91deg, rgba(122, 84, 44, .1) 0 1px, transparent 1px 6px),
    radial-gradient(130% 70% at 50% 16%, rgba(255, 243, 219, .5), transparent 62%),
    linear-gradient(165deg, #e9d5b0, #c8a97e 72%, #b4915f);
  box-shadow:
    inset 0 0 0 1px rgba(122, 84, 44, .55),
    inset 0 0 0 3px rgba(255, 246, 226, .4),
    0 10px 26px rgba(0, 0, 0, .5);
}
/* Камни не тасуют — их перебирают в мешочке: галька разной формы,
   и каждая ходит по-своему. */
body.deck-stones .shuffle i {
  border-radius: 47% 53% 44% 56% / 52% 46% 54% 48%;
  background:
    radial-gradient(30% 23% at 31% 23%, rgba(255, 252, 244, .3), transparent 74%),
    linear-gradient(155deg, #a6957c, #7a6c58 52%, #4c4437);
  box-shadow: inset 0 3px 8px rgba(255, 252, 244, .18), 0 10px 24px rgba(0, 0, 0, .5);
}
body.deck-stones .shuffle i:nth-child(even) {
  border-radius: 54% 46% 57% 43% / 44% 56% 44% 56%;
}
body.deck-dice .shuffle i {
  border-radius: 22%;
  background:
    radial-gradient(58% 46% at 30% 22%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(155deg, #a8d8e6, #6a9fb2 62%, #47788c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .4),
    inset 0 -10px 20px rgba(0, 0, 0, .26),
    0 10px 24px rgba(0, 0, 0, .5);
}
body.deck-domino .shuffle i {
  border-radius: 12px;
  background: linear-gradient(160deg, #2f2118, #170f0a);
  box-shadow: inset 0 0 0 3px rgba(243, 224, 181, .28), 0 10px 24px rgba(0, 0, 0, .5);
}

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

   Сцены сменяет js/numerology.js, переписывая содержимое #reading:
   поля, круг счёта, разбор. Класс на #reading (is-form, is-counting)
   сцену только называет — своих правил у него здесь нет, как и на
   страницах с колодой.
   ========================================================= */

/* --- круг счёта ------------------------------------------ */
.num-ritual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 40vw, 380px);
  text-align: center;
  animation: ritual-in .45s var(--ease-out) both;
}
.num-ritual.is-done { animation: ritual-out .4s var(--ease) both; }
.num-orbit {
  --orbit: min(288px, 62vw);
  --r: calc(var(--orbit) / 2 - 25px);
  position: relative;
  width: var(--orbit);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Два обода: латунный идёт по часовой, бирюзовый пунктир — против.
   Между ними и стоят девять цифр. */
.num-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(217, 177, 105, .34);
  box-shadow: inset 0 0 46px rgba(217, 177, 105, .12);
  animation: spin 34s linear infinite;
}
.num-orbit-ring.is-inner {
  inset: 24%;
  border-style: dashed;
  border-color: rgba(99, 183, 172, .42);
  box-shadow: inset 0 0 30px rgba(99, 183, 172, .14);
  animation: spin 21s linear infinite reverse;
}
.num-orbit b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--gold-soft);
  opacity: .34;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  animation: num-tick 1.5s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * 165ms);
}
/* Цифры вспыхивают по кругу одна за другой — счёт идёт. */
@keyframes num-tick {
  0%, 68%, 100% { opacity: .28; text-shadow: none; }
  14% { opacity: 1; text-shadow: 0 0 20px rgba(243, 224, 181, .9); }
}
.num-orbit-core {
  position: relative;
  z-index: 1;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  color: var(--gold-soft);
  text-shadow: 0 0 34px rgba(217, 177, 105, .7);
  animation: breathe 2.2s ease-in-out infinite;
}

/* --- печать числа ----------------------------------------
   Ответ — не строка в плашке, а латунный оттиск: цифра врезана в металл,
   вокруг неё кольцо из девяти возможных, и та, что выпала, горит.
   Оттиск бьют по столу — отсюда и удар при появлении. */
.num-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
  margin: 30px 0 0;
  animation: rise-in .5s var(--ease-out) both;
}
.num-seal {
  --sw: clamp(158px, 27vw, 200px);
  --sr: calc(var(--sw) / 2 - 15px);
  position: relative;
  flex: 0 0 auto;
  width: var(--sw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: num-strike .78s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes num-strike {
  0% { opacity: 0; transform: scale(1.9) rotate(-16deg); filter: blur(7px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* Лучи из-под оттиска: расходятся и медленно идут по кругу. */
.num-seal-rays {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(217, 177, 105, .16) 0deg 1.4deg, transparent 1.4deg 13deg),
    radial-gradient(closest-side, rgba(255, 176, 96, .2), transparent 72%);
  animation: spin 80s linear infinite;
}
.num-seal-ring { position: absolute; inset: 0; }
.num-ring-d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: .96rem;
  font-weight: 700;
  color: rgba(243, 224, 181, .42);
  transform:
    rotate(var(--a))
    translateY(calc(var(--sr) * -1))
    rotate(calc(var(--a) * -1));
  /* Своё проявление, а не общее rise-in: то двигает transform, а здесь
     весь transform занят местом цифры на кольце. */
  animation: num-ring-in .4s var(--ease-out) both;
  animation-delay: calc(.35s + var(--k, 0) * 45ms);
}
@keyframes num-ring-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Выпавшая цифра горит: она и стоит в середине оттиска. */
.num-ring-d.is-lit {
  color: var(--gold-soft);
  font-size: 1.16rem;
  text-shadow: 0 0 18px rgba(243, 224, 181, .95);
}
/* Сам оттиск: латунный кружок, цифра в нём врезана, а не напечатана. */
.num-seal-core {
  position: relative;
  z-index: 1;
  width: 62%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fbeecb, rgba(251, 238, 203, 0) 52%),
    radial-gradient(circle at 50% 56%, #d5ac62, #a37c33 58%, #6d4d18);
  box-shadow:
    inset 0 2px 3px rgba(255, 249, 232, .7),
    inset 0 -10px 20px rgba(0, 0, 0, .42),
    inset 0 0 0 2px rgba(255, 249, 232, .28),
    0 14px 32px rgba(0, 0, 0, .55),
    0 0 58px rgba(217, 177, 105, .32);
}
/* Рант по краю кружка — как на монете. */
.num-seal-core::after {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px dashed rgba(60, 40, 12, .38);
}
.num-seal-value {
  position: relative;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.1rem, 8vw, 4.3rem);
  line-height: 1;
  color: #3a2708;
  text-shadow: 0 1px 0 rgba(255, 249, 232, .55), 0 -1px 1px rgba(0, 0, 0, .35);
}
/* Искры от удара — те же восемь, что разлетаются от открытого знака. */
.num-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.num-sparks i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px rgba(243, 224, 181, .9);
  animation: spark-fly .9s var(--ease-out) .38s both;
}
.num-sparks i:nth-child(1) { --sa: 0deg; }
.num-sparks i:nth-child(2) { --sa: 45deg; }
.num-sparks i:nth-child(3) { --sa: 90deg; }
.num-sparks i:nth-child(4) { --sa: 135deg; }
.num-sparks i:nth-child(5) { --sa: 180deg; }
.num-sparks i:nth-child(6) { --sa: 225deg; }
.num-sparks i:nth-child(7) { --sa: 270deg; }
.num-sparks i:nth-child(8) { --sa: 315deg; }

.num-caption {
  flex: 1 1 240px;
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.22rem, 2.6vw, 1.66rem);
  line-height: 1.3;
  color: var(--gold-soft);
  text-shadow: 0 0 26px rgba(217, 177, 105, .35);
  animation: rise-in .6s var(--ease-out) .3s both;
}

/* --- пластина: там, где ответ не одна цифра ---------------
   Ангельское число и четыре числа квадрата в кружок не влезают, да им
   там и не место: их читают целиком. Для них — латунная пластина
   с гравировкой, той же выделки, что и оттиск. */
.num-head-plate { align-items: center; }
.num-plate {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 42px 15px;
  border-radius: var(--radius);
  background:
    linear-gradient(168deg, rgba(255, 249, 232, .22), rgba(255, 249, 232, 0) 46%),
    linear-gradient(155deg, #c9a259, #8d6a2f 62%, #5f4418);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 232, .6),
    inset 0 -8px 18px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 249, 232, .26),
    0 14px 34px rgba(0, 0, 0, .5),
    0 0 52px rgba(217, 177, 105, .24);
  animation: num-strike .78s cubic-bezier(.2, 1.5, .4, 1) both;
}
.num-plate-value {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: .1em;
  color: #33220a;
  text-shadow: 0 1px 0 rgba(255, 249, 232, .5), 0 -1px 1px rgba(0, 0, 0, .3);
}
.num-plate-sum {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(46, 30, 8, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 249, 232, .84);
}
.num-plate-sum i {
  font-style: normal;
  font-size: 1.9em;
  font-weight: 700;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #fff6e0;
  text-shadow: 0 0 12px rgba(255, 226, 160, .8);
}

/* --- разбор выходит по частям, а не разом ----------------- */
.num-result > *:nth-child(2) { animation-delay: .16s; }
.num-result > *:nth-child(3) { animation-delay: .3s; }
.num-result > *:nth-child(4) { animation-delay: .44s; }
.num-result > *:nth-child(5) { animation-delay: .58s; }
.num-steps li {
  animation: rise-in .42s var(--ease-out) both;
  animation-delay: calc(.5s + var(--i, 0) * 65ms);
}
.num-seal-end { animation: rise-in .5s var(--ease-out) .7s both; }

/* --- квадрат Пифагора: доска, а не список ------------------
   Девять ячеек чертят на бумаге сеткой, и сетка тут не украшение:
   в ней весь смысл — что рядом с чем стоит. Поэтому ячейки лежат на
   общей доске в латунной раме, а не порознь. */
.num-square {
  padding: 14px;
  border-radius: var(--radius);
  background:
    var(--grain) repeat,
    linear-gradient(160deg, rgba(45, 27, 60, .74), rgba(18, 11, 26, .82));
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 0 0 1px rgba(217, 177, 105, .3),
    inset 0 0 50px rgba(0, 0, 0, .45),
    0 18px 42px rgba(0, 0, 0, .45);
}
.num-cell {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(141, 106, 47, .22);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.num-cell:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(141, 106, 47, .5);
}
/* Цифра выпала трижды и чаще — ячейка сильная: её и подсвечиваем. */
.num-cell.is-strong {
  background: linear-gradient(170deg, #fdf6e4, #f3e4c4);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 1px rgba(141, 106, 47, .45),
    0 0 26px rgba(217, 177, 105, .2);
}
.num-cell.is-strong .num-cell-digits {
  color: #8d5a1f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.num-cell-digits { font-size: 2.05rem; }
/* Пустая ячейка — тоже ответ, и читать её надо так же: клетка расчерчена
   штриховкой, но текст в ней не выцветает до нечитаемого. */
.num-cell.is-empty {
  background:
    repeating-linear-gradient(45deg,
      rgba(120, 100, 76, .11) 0 4px, transparent 4px 9px),
    linear-gradient(170deg, #e8ddc9, #dccdb2);
  box-shadow: inset 0 0 0 1px rgba(120, 100, 76, .26);
}
.num-cell.is-empty .num-cell-title { color: #6d5b45; }
.num-cell.is-empty .num-cell-text { color: #443627; }
.num-cell.is-empty .num-cell-digits { color: #8a7864; }

/* --- ошибка в форме -------------------------------------- */
.num-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(196, 106, 92, .12);
  border-left: 3px solid #c47a6c;
  color: #a4554a;
  animation: rise-in .32s var(--ease-out) both;
}

/* --- значок расчёта: цифры, а не карты -------------------- */
.num-icon rect, .num-icon circle {
  fill: none;
  stroke: rgba(217, 177, 105, .5);
  stroke-width: 1.4;
  transition: stroke .3s, fill .3s;
}
.spread-card:hover .num-icon rect,
.spread-card:hover .num-icon circle {
  fill: rgba(217, 177, 105, .22);
  stroke: var(--gold-soft);
  transition-delay: calc(var(--k, 0) * 34ms);
}

@media (max-width: 640px) {
  .num-head { gap: 12px 20px; }
  .num-seal { --sw: clamp(140px, 44vw, 176px); }
  .num-square { padding: 9px; gap: 9px; }
}

/* =========================================================
   Карточка ответа: пергамент со своим цветом
   ----------------------------------------------------------
   Толкования, разборы и формы лежали на одинаковых бежевых плашках:
   ровная заливка, ровный угол, бирюзовая черта у совета — одна и та же
   на всех двенадцати разделах. Рядом с рубашками, которые теперь у каждой
   колоды свои, это выглядело так, будто ответ печатали не здесь.

   Здесь пергамент становится пергаментом: волокно, тёплая кромка,
   поле с гербовой нитью по левому краю и ромбик перед заголовком —
   тот же, что стоит перед заголовками разделов. А цвет ответа берётся
   от колоды: у рун холодная сталь, у камней мох, у Ленорман вино,
   у гущи кофе. Задаётся он классом колоды на <body> — тем самым,
   которым выбрана рубашка.
   ========================================================= */

body {
  --accent: var(--teal);
  --accent-dark: var(--teal-dark);
  --accent-pale: var(--teal-pale);
}
body.deck-runes { --accent: #5b86a8; --accent-dark: #2f5471; --accent-pale: #e7eff6; }
body.deck-lenorman { --accent: #a1495e; --accent-dark: #78293c; --accent-pale: #f8e9ec; }
body.deck-cards { --accent: #a94049; --accent-dark: #7c2028; --accent-pale: #f8e8e6; }
body.deck-dice { --accent: #5a9cb5; --accent-dark: #2e6579; --accent-pale: #e7f1f5; }
body.deck-domino { --accent: #6a6773; --accent-dark: #3c3945; --accent-pale: #eeecf1; }
body.deck-stones { --accent: #6f8459; --accent-dark: #435431; --accent-pale: #edf1e6; }
body.deck-coffee { --accent: #9a6a42; --accent-dark: #67401f; --accent-pale: #f4e9dc; }
body.deck-wax { --accent: #b98a3c; --accent-dark: #7c5716; --accent-pale: #f7ecd6; }

/* --- сам пергамент --------------------------------------- */
.scroll, .pairs, .date-form, .sig-form {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(141, 106, 47, .28);
  background:
    radial-gradient(130% 66% at 50% -14%, rgba(255, 255, 255, .55), transparent 62%),
    linear-gradient(170deg, var(--paper), var(--paper-2));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 46px rgba(160, 118, 62, .13);
}
/* Волокно бумаги: то же зерно, что лежит на дереве стола, только слабее
   и в умножении — иначе поверх светлого оно белит, а не грязнит. */
.scroll::before,
.pairs::before,
.date-form::before,
.sig-form::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grain);
  opacity: .19;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Поле с нитью по левому краю: так расчерчена страница в старой книге,
   и по этой нити глаз находит, где начинается запись. */
.scroll { padding-left: 26px; }
.scroll::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(141, 106, 47, .38) 14%, rgba(141, 106, 47, .38) 86%, transparent);
}
.scroll {
  transition: transform .3s var(--ease), box-shadow .3s;
}
.scroll:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 46px rgba(160, 118, 62, .13),
    0 0 34px rgba(217, 177, 105, .18);
}
.scroll-birth { background: linear-gradient(170deg, #f8f2e5, var(--accent-pale)); }

/* --- заголовок разбора: ромбик и уходящая нить ------------ */
.pairs h3 {
  display: flex;
  align-items: center;
  gap: 11px;
}
.pairs h3::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(141, 106, 47, .13);
}
.pairs h3::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(141, 106, 47, .34), transparent);
}

/* --- знак в свитке: тот же снимок, только в раме ---------- */
.scroll-aside picture,
.scroll-aside img {
  border: 1px solid rgba(141, 106, 47, .35);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* --- место в раскладе: сургучная капля с номером ---------- */
.scroll-pos b {
  position: relative;
  width: 21px;
  height: 21px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .45), transparent 52%),
    var(--accent-dark);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .3),
    inset 0 -2px 5px rgba(0, 0, 0, .3);
}

/* --- имя знака, ключи, толкование ------------------------- */
.card-name { font-size: 1.38rem; }
.card-keys {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  border-bottom: 1px solid rgba(141, 106, 47, .24);
}
.card-text { font-size: .94rem; line-height: 1.62; }

/* Совет — не строка мелким шрифтом, а то, что гадалка говорит вслух
   напоследок: поэтому он набран тем же курсивом, что и её слова. */
.card-advice {
  position: relative;
  padding: 9px 13px 9px 15px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, rgba(141, 106, 47, .09), rgba(141, 106, 47, 0) 76%);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--accent-dark);
}
.pairs b { color: var(--accent-dark); }
.nature { background: linear-gradient(170deg, #f6f1e3, var(--accent-pale)); }

/* --- ответ «да — нет»: латунная пластина, а не заливка ----- */
.answer-badge {
  overflow: hidden;
  padding: 17px 52px;
}
.answer-badge::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid rgba(255, 255, 255, .26);
  pointer-events: none;
}
/* Свет проходит по пластине один раз — тот же блик, что по лицу знака. */
.answer-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 36%, rgba(255, 255, 255, .3) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: sheen 1.1s var(--ease-out) .75s both;
}

/* --- своя повадка у каждой колоды ------------------------
   Карту берут двумя пальцами и поднимают, дощечку с руной чуть
   поворачивают в руке, а гальку катят по столу. Это и есть вся разница
   при наведении — но её видно. */
body.deck-runes .card-img:not(.revealed):hover .card-flip {
  transform: rotateY(180deg) translateY(-7px) rotate(-3deg) scale(1.05);
}
body.deck-stones .card-img:not(.revealed):hover .card-flip {
  transform: rotateY(180deg) translateY(-5px) rotate(9deg) scale(1.06);
}
body.deck-dice .card-img:not(.revealed):hover .card-flip {
  transform: rotateY(180deg) translateY(-9px) rotate(-7deg) scale(1.06);
}

/* Меньше движения — и в нумерологии тоже: круг счёта js вообще не строит,
   а искры от удара печати снимаются здесь. */
@media (prefers-reduced-motion: reduce) {
  .num-ritual, .num-sparks { display: none !important; }
  .num-seal, .num-plate, .num-head { transform: none !important; }
}

/* Внутри разбора абзацы правит .pairs p — она же специфичнее .card-advice,
   и совет терял и отступ, и кегль. Здесь он их получает обратно. */
.pairs .card-advice {
  margin: 13px 0 0;
  font-size: 1.06rem;
  line-height: 1.45;
}

/* Круг счёта нажимается — значит, и выглядит нажимаемым. */
.num-ritual { cursor: pointer; }
.num-ritual:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
.num-ritual:hover .num-orbit-core { text-shadow: 0 0 44px rgba(243, 224, 181, .95); }

/* Cormorant набирает цифры минускульными: у него единица — вертикальная
   черта без плеча, и в оттиске она читается латинской «I», а тройка,
   четвёрка и девятка уходят под строку. Там, где цифра и есть ответ,
   нужны прописные — их даёт Playfair Display, а lnum просит их и
   у Cormorant, если он до страницы дошёл. */
.num-seal-value,
.num-ring-d,
.num-plate-value,
.num-orbit b,
.num-orbit-core,
.num-cell-digits {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

/* =========================================================
   Книга перемен
   ----------------------------------------------------------
   Четвёртая нарисованная колода: знак — шесть черт, сплошных и прерванных,
   и вектор ей собран по коду черт, а не нарисован по одной. Поэтому и
   оформление здесь простое: бумага, тушь и ничего сверх того.
   ========================================================= */
.deck-ching { --card-w: 132px; }
.deck-ching .card-img { aspect-ratio: 100 / 126; }
.deck-ching .card-face { border-radius: 8px; }

/* Лицо: рисовая бумага с волокном. Знак на ней стоит тушью и не отбрасывает
   тени — шесть черт написаны кистью, а не выдавлены. */
.deck-ching .card-front {
  background:
    repeating-linear-gradient(90deg, rgba(120, 92, 54, .05) 0 1px, transparent 1px 4px),
    linear-gradient(162deg, #f7f0e0, #e9dcc4);
  box-shadow:
    inset 0 0 0 1px rgba(60, 46, 28, .18),
    inset 0 0 0 5px rgba(255, 253, 246, .5),
    inset 0 0 26px rgba(120, 88, 44, .16),
    0 10px 26px rgba(0, 0, 0, .45);
}
.deck-ching .sign { width: 78%; height: 78%; color: #241c14; filter: none; }

/* Рубашка: китайская монета, та самая, какой и бросают. Кольцо и квадратное
   отверстие рисуют два пустых слоя из js/app.js; звёздочка посередине им
   мешала бы, поэтому её здесь нет. */
.deck-ching .card-back {
  background:
    radial-gradient(58% 44% at 50% 40%, rgba(79, 132, 113, .34), transparent 70%),
    linear-gradient(158deg, #1b2b28, #0e1614 60%, #1a2a26);
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .42),
    inset 0 0 0 6px rgba(0, 0, 0, .3),
    inset 0 0 0 7px rgba(243, 224, 181, .18),
    inset 0 0 40px rgba(0, 0, 0, .55),
    0 10px 28px rgba(0, 0, 0, .5);
}
.deck-ching .back-art i:nth-child(1),
.deck-ching .back-art i:nth-child(2) {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
}
.deck-ching .back-art i:nth-child(1) {
  width: 46%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(243, 224, 181, .34), inset 0 0 0 1px rgba(243, 224, 181, .16);
}
.deck-ching .back-art i:nth-child(2) {
  width: 15%;
  box-shadow: 0 0 0 2px rgba(243, 224, 181, .3);
}
.deck-ching .back-mark { display: none; }

/* Знак в свитке лежит на такой же бумаге, а не на круглом фарфоре, как
   у кофейной гущи: круг там от чашки, а здесь чашки нет. */
body.deck-ching .scroll-aside:has(.sign) {
  aspect-ratio: 100 / 118;
  border-radius: 6px;
  background: linear-gradient(162deg, #f7f0e0, #e9dcc4);
  box-shadow: inset 0 0 0 3px rgba(255, 253, 246, .5), inset 0 0 20px rgba(120, 88, 44, .18);
}

/* Подвижные черты: разбор перемены и вторая гексаграмма. Вторая лежит
   свитком внутри разбора — но пергамент поверх пергамента выглядел бы
   двойной подложкой, поэтому здесь у свитка ни тени, ни фона. */
.change { background: linear-gradient(170deg, var(--paper), #eef3f0); }
.change ul { margin-bottom: 4px; }
.change .scroll {
  margin-top: 16px;
  padding: 16px 0 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid rgba(60, 46, 28, .18);
  border-radius: 0;
  animation: none;
}
.change .scroll .card-name { margin-top: 0; }

/* --- ритуал: шесть бросков трёх монет ---------------------------
   Тасовать здесь нечего: гадание и есть бросок. Три монеты падают шесть
   раз, и черты ложатся снизу вверх — сперва первая, последней шестая.
   Какой стороной каждая монета села, решает не css, а app.js: он знает
   вытянутую гексаграмму и подбирает монеты под неё. */
.shuffle.coins {
  position: relative;
  width: 208px;
  height: 208px;
  display: block;
}
/* Место гексаграммы. В разметке черты идут сверху вниз, а кладутся снизу
   вверх, поэтому порядок в ней обратный счёту черт. */
.coins-hex {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Селектор длиннее нужного нарочно. Стопка карт выше ловит любую <i>
   внутри ритуала (.shuffle i) и раздаёт ей absolute, inset и тасовку;
   черта — тоже <i>, и без своего веса она уехала бы в общую кучу.
   Поэтому здесь и вес больше, и лишнее сбрасывается прямо на месте. */
.shuffle.coins .coins-hex i {
  position: static;
  display: block;
  height: 10px;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  animation: none;
  filter: drop-shadow(0 0 9px rgba(217, 177, 105, .45));
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
/* Сплошная — одной полосой, прерванная — двумя с разрывом посередине.
   Разрыв не закрашен, а пуст: свечение должно обходить его с обеих
   сторон, а не лежать поперёк. */
.shuffle.coins .coins-hex i.is-solid {
  background: linear-gradient(180deg, #f3e0b5, #cfa458);
}
.shuffle.coins .coins-hex i.is-broken {
  background:
    linear-gradient(180deg, #f3e0b5, #cfa458) 0 0 / 42% 100% no-repeat,
    linear-gradient(180deg, #f3e0b5, #cfa458) 100% 0 / 42% 100% no-repeat;
}
/* Черта ждёт своего броска: место под неё занято, но её самой ещё нет. */
.shuffle.coins .coins-hex i.is-wait {
  opacity: 0;
  transform: scaleX(.34);
}
/* Ритуал сняли раньше срока — недоброшенные черты показываются разом. */
.shuffle.coins .coins-hex.is-done i.is-wait {
  opacity: 1;
  transform: none;
}
/* Подвижная черта дышит: она и есть то, чем гексаграмма станет. */
.shuffle.coins .coins-hex i.is-moving {
  animation: line-move 1.5s ease-in-out infinite;
}
@keyframes line-move {
  0%, 100% { filter: drop-shadow(0 0 9px rgba(217, 177, 105, .45)); }
  50% { filter: drop-shadow(0 0 17px rgba(255, 214, 140, .95)) brightness(1.32); }
}

.coins-hand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 15px;
}
/* Пока не бросили — монеты подрагивают в ладонях. */
.coin {
  width: 48px;
  height: 48px;
  perspective: 300px;
  animation: coin-shake 1.3s ease-in-out infinite;
}
.coin:nth-child(2) { animation-delay: -.4s; }
.coin:nth-child(3) { animation-delay: -.8s; }
@keyframes coin-shake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
/* Бросок: монета взлетает и переворачивается. Куда она сядет, говорит
   --turn из app.js — оборот с лишним на каждый бросок и полоборота
   сверху, если этой монете выпала решка. */
.coins-hand.is-tossing .coin { animation: coin-jump .46s ease-out; }
.coins-hand.is-tossing .coin:nth-child(2) { animation-delay: .05s; }
.coins-hand.is-tossing .coin:nth-child(3) { animation-delay: .1s; }
@keyframes coin-jump {
  0% { transform: translateY(0); }
  46% { transform: translateY(-42px); }
  100% { transform: translateY(0); }
}
.coin-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--turn, 0deg));
  transition: transform .46s cubic-bezier(.24, .72, .3, 1);
}
.coin b,
.coin u {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .5),
    inset 0 0 0 4px rgba(0, 0, 0, .26),
    0 8px 16px rgba(0, 0, 0, .5);
}
/* Квадратное отверстие: монета та же, что нарисована на рубашке колоды. */
.coin b::before,
.coin u::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(8, 12, 11, .85);
  box-shadow: inset 0 0 0 1px rgba(243, 224, 181, .3);
}
/* Орёл светлый — он считается за три; решка тёмная — за два. */
.coin b {
  background:
    radial-gradient(58% 46% at 36% 30%, rgba(255, 246, 214, .6), transparent 68%),
    linear-gradient(152deg, #e2c489, #a37f3c);
}
.coin u {
  transform: rotateX(180deg);
  background:
    radial-gradient(58% 46% at 64% 32%, rgba(160, 214, 196, .34), transparent 68%),
    linear-gradient(152deg, #2c4540, #16221f);
}
/* Бросать нечего — остаются одни монеты в ладонях, и место под
   гексаграмму над ними не нужно. */
.shuffle.coins.no-hex { height: 66px; }
@media (max-width: 640px) {
  .shuffle.coins { transform: scale(.88); }
}

/* Плитка раздела без снимка: вместо фотографии — сама гексаграмма.
   Снимков разделов ровно двенадцать, все из старой вёрстки, и тринадцатому
   взяться неоткуда; знак же рисуется вектором и ничьих прав не занимает. */
.tile-emblem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(78% 62% at 50% 38%, rgba(79, 132, 113, .28), transparent 72%),
    linear-gradient(158deg, #241733, var(--night-3) 60%, #17101f);
}
.tile-emblem svg {
  width: 40%;
  height: 40%;
  color: var(--gold, #d9b169);
  opacity: .82;
  transition: transform .8s var(--ease), opacity .5s;
}
.tile:hover .tile-emblem svg { transform: scale(1.07); opacity: 1; }

body.deck-ching { --accent: #4f8471; --accent-dark: #2d5748; --accent-pale: #e6f1ec; }

/* =========================================================
   ЗНАК ПОШТУЧНО: указатель колоды и страница одного знака
   ---------------------------------------------------------
   364 знака до сих пор жили только внутри расклада: прочесть
   про руну, не вытянув её, было негде. Теперь у каждого свой
   адрес, разметку собирает tools/build-pages.js — здесь ей
   одежда. Пергамент и латунь общие с остальным сайтом, а тон
   приходит от колоды: --accent* стоят на body.deck-*.
   ========================================================= */

/* Класс sign носит и <svg> знака в раскладе, и <article> на его
   странице — по нему css красит знак под колоду. Но правило для
   svg задаёт 72% ширины и высоты, и статья по нему складывается
   в столбик; поэтому первым делом его приходится снимать. */
.sign.sign-page {
  width: auto;
  height: auto;
  color: var(--ink);
  filter: none;
}

/* --- лист знака ------------------------------------------
   Тот же пергамент, что у статьи. */
.sign-page {
  position: relative;
  max-width: 54rem;
  margin: 26px auto 34px;
  padding: clamp(26px, 4vw, 52px) clamp(20px, 3.6vw, 54px);
  border-radius: 6px 6px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 12%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.sign-page h1,
.sign-page h2,
.sign-page h3 { color: var(--ink); }

.sign-name {
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  margin-bottom: .3em;
}
/* Нить под именем — та же, что под заголовком раздела, только в
   цвете колоды: по ней и видно, что руна не карта Таро. */
.sign-name::after {
  content: '';
  display: block;
  width: 104px;
  height: 1px;
  margin-top: 15px;
  background: linear-gradient(90deg, var(--accent-dark), transparent);
}

/* Снимок знака — в той же раме, в какой он лежит в свитке. */
.sign-page .sign-figure {
  display: block;
  width: min(206px, 58vw);
  margin: 0 0 22px;
}
.sign-page .sign-figure img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(36, 26, 18, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* У четырёх колод знак не снят, а нарисован — гуща, воск, домино
   и гексаграммы. Рисунку нужна подложка: в раскладе он лежит на
   фарфоре, здесь на нём же, и форму каждая колода берёт свою. */
.sign-figure:has(.sign) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(158deg, #f6efe2, #e6d8c3);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .5), inset 0 4px 14px rgba(120, 78, 42, .28);
}
body.deck-wax .sign-figure:has(.sign) { border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; }
/* У домино подложка знака — сама кость: та же пропорция 1:2, что
   и у карточки в раскладе, и рисунок ложится на неё, а не в квадрат. */
body.deck-domino .sign-figure:has(.sign) { aspect-ratio: 1 / 2; border-radius: 11px; }
body.deck-domino .sign-page .sign-figure { width: min(124px, 34vw); }
body.deck-domino .sign-tile .sign-figure:has(.sign) { width: 64px; height: 128px; }
body.deck-ching .sign-figure:has(.sign) { border-radius: 8px; }

/* Ключевые слова: те же прописные, что над толкованием в свитке,
   но здесь их можно взять в оправу — места хватает. */
.sign-keys {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: 0 0 30px;
}
.sign-keys li {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(141, 106, 47, .3);
  background: rgba(141, 106, 47, .07);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* --- прямое и перевёрнутое ------------------------------- */
.sign-side + .sign-side {
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(141, 106, 47, .22);
}
.sign-side h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-bottom: .8em;
}
/* Ромбик перед заголовком — тот же, что у разбора в раскладе.
   У перевёрнутого положения он краснее: это единственная разница
   между двумя одинаковыми на вид половинами страницы. */
.sign-side h2::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(141, 106, 47, .13);
}
.sign-side h2::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(141, 106, 47, .34), transparent);
}
.sign-side-reversed h2::before { background: #a4655c; }

.sign-aspects {
  display: grid;
  gap: 16px 26px;
  margin: 0;
}
.sign-aspects dt {
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.sign-aspects dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink-2);
}
/* Совет стоит в списке последним и стоит всегда — он есть у всех
   457 сторон. Набран он тем же курсивом, что и в раскладе: это то,
   что гадалка говорит вслух напоследок. */
.sign-aspects dt:last-of-type { color: var(--accent-dark); }
.sign-aspects dd:last-of-type {
  padding: 2px 0 2px 15px;
  border-left: 2px solid var(--accent);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.45;
  color: var(--accent-dark);
}

/* --- что знак говорит на местах расклада ------------------
   Восемь коротких строк: не толкование, а подсказка на случай,
   когда знак выпал на определённом месте. Поэтому мельче и на
   своей подложке. */
.sign-notes {
  margin-top: 28px;
  padding: 20px clamp(16px, 2.4vw, 24px);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(141, 106, 47, .2);
  background: linear-gradient(170deg, rgba(255, 255, 255, .5), rgba(141, 106, 47, .06));
}
.sign-notes h3 {
  font-family: inherit;
  font-style: normal;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1em;
}
.sign-notes dl {
  display: grid;
  gap: 11px 22px;
  margin: 0;
}
.sign-notes dt {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 2px;
}
.sign-notes dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.58;
  color: var(--ink-2);
}

/* --- пред / указатель / след ------------------------------ */
.sign-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(141, 106, 47, .22);
}
.sign-nav a {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(141, 106, 47, .3);
  background: rgba(141, 106, 47, .05);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-dark);
  transition: background .2s, border-color .2s, color .2s;
}
.sign-nav a:hover {
  background: rgba(141, 106, 47, .14);
  border-color: var(--gold-deep);
  color: var(--ink);
  text-decoration: none;
}

/* Снимок уходит влево и стоит там, пока читают толкование: на
   длинной странице знак иначе теряется. Столбиком всё встаёт
   только на узком экране. */
@media (min-width: 641px) {
  .sign-page {
    display: grid;
    grid-template-columns: min(206px, 26%) 1fr;
    column-gap: clamp(24px, 3.4vw, 44px);
    align-items: start;
  }
  .sign-page .sign-figure {
    grid-column: 1;
    /* Строк у этой сетки нет — они заводятся по мере надобности, а -1
       в такой сетке означает первую же линию, и снимок остался бы
       в одной строке с именем. Поэтому размах взят с запасом: столбец
       со снимком идёт вдоль всего толкования, сколько бы сторон
       у знака ни было. */
    grid-row: 1 / span 99;
    position: sticky;
    top: 22px;
    width: 100%;
    margin: 6px 0 0;
  }
  .sign-name,
  .sign-keys,
  .sign-side,
  .sign-nav { grid-column: 2; }
}

/* Подпись аспекта уходит влево от текста только на широком экране.
   На планшете столбец с толкованием и так уже снимка на 206 px, и
   отдать из него ещё 168 под слова «любовь и отношения» значит
   оставить самому толкованию полосу в сорок знаков. */
@media (min-width: 901px) {
  .sign-aspects,
  .sign-notes dl { grid-template-columns: 10.5rem 1fr; }
  .sign-aspects dt,
  .sign-notes dt { margin-bottom: 0; }
}

/* --- указатель знаков колоды ------------------------------
   78 карт Таро или 28 костей домино в один взгляд: снимок, имя,
   ключевые слова. Плитки стоят на ночи, а не на пергаменте, —
   пергамент начинается на странице самого знака. */
.sign-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 16px;
}
.sign-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 15px 12px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-line);
  background: var(--panel-2);
  color: var(--text);
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.sign-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 177, 105, .5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .42);
  text-decoration: none;
}
.sign-tile .sign-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 128px;
}
.sign-tile .sign-figure:has(.sign) {
  width: 128px;
  height: 128px;
  aspect-ratio: auto;
}
.sign-tile img {
  width: auto;
  max-height: 128px;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.sign-tile b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--gold-soft);
}
.sign-tile span {
  font-size: .72rem;
  line-height: 1.42;
  color: var(--text-dim);
}

/* Машинное слово в тексте статьи — адрес службы, имя файла. Не терминал:
   кегль почти тот же, фон едва заметный, а моноширинный шрифт нужен затем,
   чтобы точки в «fonts.gstatic.com» не слипались с буквами. */
.article code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(23, 15, 9, .07);
}

/* Выход со свитка расклада на страницу знака. Стоит последней строкой,
   после совета: сначала человек дочитывает то, зачем пришёл. */
.scroll-more { margin: 11px 0 0; }
.scroll-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.scroll-more a::after {
  content: '→';
  transition: transform .2s var(--ease);
}
.scroll-more a:hover { color: var(--ink); text-decoration: none; }
.scroll-more a:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Страница одного расклада
   --------------------------------------------------------------------------
   Адрес /раздел/расклад/: текст сверху, тот же стол ниже, места расклада
   и вопросы — свитком под столом. Свиток набран тем же пергаментом, что
   и статья (.article), поэтому здесь только то, чего у статьи не бывает.
   ========================================================================== */

/* Что известно о раскладе ещё до броска: сколько знаков, бывают ли
   перевёрнутые, чем он отвечает. Строкой под лидом, точками между. */
.spread-facts {
  list-style: none;
  margin: 1.1em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3em .7em;
  font-size: .84rem;
  color: var(--text-faint);
}
/* Точка-разделитель — часть своего пункта, а не отдельная колонка: на узком
   экране список переносится, и висящая слева точка вылезала бы за поле. */
.spread-facts li + li::before { content: '·'; margin-right: .6em; opacity: .65; }

/* Буквица хороша в начале рассказа и нелепа посреди страницы: свиток под
   столом начинается заголовком, и первый его абзац — обычный. */
.spread-read > p:first-of-type {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink);
}
.spread-read > p:first-of-type::first-letter {
  float: none;
  font: inherit;
  margin: 0;
  color: inherit;
}

.places { margin: 0 0 1.5em; padding-left: 1.35em; }
.places li { margin-bottom: .5em; line-height: 1.68; color: var(--ink-2); }
.places b { color: var(--ink); }

.faq { margin: 0; }
.faq dt { margin-top: 1.3em; font-weight: 700; color: var(--ink); }
.faq dd { margin: .4em 0 0; line-height: 1.78; color: var(--ink-2); }

/* Вниз со страницы расклада ведут два хода: обратно в раздел и в указатель
   знаков. Стоят они на тёмном поле, поэтому кнопки здесь обычные. */
.spread-back { margin: 1.8em 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Главная: порядок блоков, «Сегодня» и вход по вопросу
   --------------------------------------------------------------------------
   На широком экране порядок обычный: шатёр, знаки дня, вопросы, плитки.
   На телефоне шатёр уезжает вниз — он занимает весь первый экран и ничего
   не решает, а решают знаки дня и пять вопросов. Разметка при этом одна:
   переставляет их flex.
   ========================================================================== */
/* Сетка в одну колонку, а не flex: у блоков внутри стоит «margin: 0 auto»
   с максимальной шириной, а флексовый ребёнок с автополями по поперечной оси
   перестаёт растягиваться и садится по содержимому — полоса в 1200 px вышла
   бы в 640. В сетке автополя выравнивают внутри дорожки, и ширина остаётся
   полной; порядок так же переставляется свойством order. */
.home { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Ширину блокам приходится назвать: у «.wrap» стоит «margin: 0 auto», а
   автополя в сетке отменяют растяжение по дорожке — блок садится по своему
   содержимому, и полоса в 1200 px выходит в 640. */
.home > * { width: 100%; }

/* «Сегодня» на главной — те же карточки, что в разделе, но короче: отсюда
   нужен повод открыть день, а не прочитать его целиком. Толкование, совет,
   выкладка числа и переходы по соседним дням остаются на самой странице. */
/* Боковые поля приходят от .wrap, поэтому здесь только вертикальные:
   сокращённое «padding» затёрло бы их и прижало карточки к краю экрана. */
.today-home, .asks-home { padding-block: 52px; }
.today-home .day-body { margin: 0; }
.today-home .day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.today-home .day-card { padding: 18px 14px 20px; gap: 9px; }
.today-home .day-card .sign-figure { height: 108px; }
.today-home .day-card .sign-figure:has(.sign) { width: 108px; height: 108px; }
.today-home .day-card.deck-domino .sign-figure:has(.sign) { width: 54px; height: 108px; }
.today-home .day-card img { max-height: 108px; }
.today-home .day-name { font-size: 1.2rem; }
.today-home .day-meaning,
.today-home .day-advice,
.today-home .day-sum,
.today-home .day-nav,
.today-home .day-card .sign-keys { display: none; }
.today-home .day-digit { width: 108px; height: 108px; font-size: 3.1rem; }
/* Небо на главной — строкой на каждого: рисунок, имя и факт; толкование
   остаётся на «Сегодня». */
.today-home .day-sky { margin-top: 14px; padding: 14px 18px 16px; gap: 8px 24px; }
.today-home .sky-item { grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; }
.today-home .sky-icon { grid-row: 1 / span 2; width: 44px; height: 44px; }
.today-home .sky-name { font-size: 1.2rem; }
.today-home .sky-meaning,
.today-home .sky-next { display: none; }
.today-home .block-head h2 a { color: inherit; }

/* Вход по вопросу: пять строк, у каждой вопрос крупно и расклад мелко. */
.asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.asks .ask {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(217, 177, 105, .22);
  border-radius: var(--radius-sm);
  background: linear-gradient(168deg, rgba(42, 19, 48, .55), rgba(12, 7, 16, .55));
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.asks .ask b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-soft);
}
.asks .ask span { font-size: .78rem; color: var(--text-faint); }
.asks .ask:hover { border-color: rgba(217, 177, 105, .55); transform: translateY(-2px); text-decoration: none; }

@media (max-width: 760px) {
  /* Порядок на телефоне: день, вопросы, плитки — и только потом шатёр. */
  .home .today-home { order: 1; }
  .home .asks-home { order: 2; }
  .home .showcase { order: 3; }
  .home .hero { order: 4; }
  .home .tiles-section { order: 5; }
  /* Два блока подряд, у каждого по полсотни пикселей воздуха сверху и
     снизу, — на телефоне это полтора пустых экрана между знаками дня
     и вопросами. Здесь они стоят теснее. */
  /* На телефоне шатёр уехал вниз, и подниматься знакам дня некуда:
     первый блок на экране заехал бы под меню. */
  .hero + .today-home { margin-top: 0; }
  .today-home, .asks-home { padding-block: 26px 10px; }
  .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .asks .ask { padding: 13px 14px; }
  .asks .ask b { font-size: 1.15rem; }
  .today-home .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-home .day-card { padding: 14px 10px 16px; }
  .today-home .day-card .sign-figure { height: 88px; }
  .today-home .day-card .sign-figure:has(.sign) { width: 88px; height: 88px; }
  .today-home .day-card.deck-domino .sign-figure:has(.sign) { width: 44px; height: 88px; }
  .today-home .day-card img { max-height: 88px; }
  .today-home .day-name { font-size: 1.05rem; }
  .today-home .day-digit { width: 88px; height: 88px; font-size: 2.5rem; }
  .today-home .day-sky { padding: 12px 14px 14px; gap: 10px; }
  .today-home .sky-name { font-size: 1.05rem; }
}

/* ==========================================================================
   Страница знака: плашки, сочетания, вопросы
   --------------------------------------------------------------------------
   Всё, что появилось на странице знака сверх толкования: короткие поля
   колоды под картинкой, ответ «да или нет», сочетания с соседями и вопросы
   с ответами. Блоков может не быть вовсе — у костей нет ответа «да или
   нет», у части рун нет перевёрнутого положения, — поэтому здесь только
   оформление, а появление задаёт сборка.
   ========================================================================== */

/* Плашки: подпись сверху мелко, значение под ней. Стоят строкой и
   переносятся; на узком экране ложатся в две колонки. */
.sign-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 2em;
  padding: 0;
}
.sign-facts div {
  flex: 0 1 auto;
  padding: 8px 14px 9px;
  border: 1px solid rgba(141, 106, 47, .22);
  border-radius: var(--radius-sm);
  background: rgba(141, 106, 47, .05);
}
.sign-facts dt {
  margin: 0 0 2px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.sign-facts dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--ink);
}

/* Блок под толкованием: тот же ромбик перед заголовком, что у сторон
   знака, — страница должна читаться одним куском, а не тремя. */
.sign-block { margin-top: 2.4em; }
.sign-block h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin-bottom: .7em;
}
.sign-block h2::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(141, 106, 47, .13);
}
.sign-block h2::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(141, 106, 47, .34), transparent);
}
.sign-block > p { margin: 0 0 1em; line-height: 1.75; color: var(--ink-2); }

/* Сочетания: имя соседа ссылкой, за ним собранная фраза. */
.pairs { list-style: none; margin: 0; padding: 0; }
.pairs li {
  padding: 9px 0;
  border-top: 1px solid rgba(141, 106, 47, .16);
  line-height: 1.6;
  color: var(--ink-2);
}
.pairs li:last-child { border-bottom: 1px solid rgba(141, 106, 47, .16); }
.pairs a { color: var(--ink); font-weight: 700; }
.pairs a:hover { color: #7d5c25; }

/* Ходы со страницы знака: вытянуть его же карту дня, разложить на любовь,
   вернуться к указателю. Кнопки здесь на пергаменте, а не на тёмном поле. */
.sign-actions { margin: 2.4em 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sign-page .sign-actions .btn-ghost {
  color: #7d5c25;
  border-color: rgba(141, 106, 47, .45);
  background: rgba(141, 106, 47, .06);
}
.sign-page .sign-actions .btn-ghost:hover {
  background: rgba(141, 106, 47, .14);
  color: #4a3a1a;
  border-color: var(--gold-deep);
  box-shadow: none;
}

/* ==========================================================================
   Большой расклад Ленорман: вся колода сеткой девять на четыре
   --------------------------------------------------------------------------
   Тридцать шесть карт на одном столе — единственная раскладка, где знак
   мельче ногтя. Подписи мест здесь не помещаются ни при каком кегле,
   поэтому от них остаётся один номер дома, а имя дома и его вопрос
   человек читает в свитке под столом. Строк всегда четыре: сетка не
   переносится и на узком экране — большой расклад тем и большой, что
   виден целиком.
   ========================================================================== */
.layout-tableau {
  --cols: 9;
  --gap: clamp(3px, .8vw, 12px);
  --card-w: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  justify-content: center;
  gap: var(--gap);
  align-items: start;
}
/* От подписи остаётся номер дома — и тот мельче обычного. */
.layout-tableau .slot-caption { min-height: 0; margin-bottom: 5px; }
.layout-tableau .slot-title,
.layout-tableau .slot-hint { display: none; }
.layout-tableau .slot-no {
  width: 17px;
  height: 17px;
  margin-bottom: 0;
  font-size: .55rem;
}
.layout-tableau .card-img { margin: 0; width: 100%; }

/* На тесном экране номер дома уже не читается — он и не нужен: место
   в сетке говорит само, а имя дома стоит в свитке. */
@media (max-width: 560px) {
  .layout-tableau .slot-caption { display: none; }
}

/* ==========================================================================
   Выбор карты-персоны с подсказкой
   --------------------------------------------------------------------------
   У линии Ленорман выбор из двух и подсказок не нужно — две кнопки в строку.
   У раскладов на короля и на даму выбирают масть, и у каждой масти своя
   примета: «светлый шатен», «человек при должности». Тогда кнопки встают
   столбцом, а примета — рядом с кнопкой, а не между ними.
   ========================================================================== */
.sig-form:has(.sig-hint) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 14px;
}
.sig-form:has(.sig-hint) p { grid-column: 1 / -1; margin: 0 0 6px; }
.sig-form:has(.sig-hint) .btn { width: 100%; justify-content: center; }
.sig-form:has(.sig-hint) .btn + .btn { margin-left: 0; }
.sig-hint { font-size: .88rem; line-height: 1.4; color: var(--muted); }

@media (max-width: 520px) {
  /* На узком экране примета не влезает рядом с кнопкой и уходит под неё. */
  .sig-form:has(.sig-hint) { grid-template-columns: 1fr; gap: 4px; }
  .sig-form:has(.sig-hint) .btn { margin-top: 10px; }
  .sig-form:has(.sig-hint) .btn:first-of-type { margin-top: 0; }
}

/* ==========================================================================
   «Мои расклады»
   --------------------------------------------------------------------------
   Список того, что человек уже разложил. Он приходит не с сервера, а из
   памяти браузера, поэтому до отработки скрипта на странице нет ни списка,
   ни пустого состояния — оба стоят скрытыми, и показывает их history.js.
   ========================================================================== */
.history-count { margin: 1.1em 0 0; font-size: .84rem; color: var(--text-faint); }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.history-item {
  padding: 15px 18px;
  border: 1px solid rgba(217, 177, 105, .2);
  border-radius: var(--radius-sm);
  background: linear-gradient(168deg, rgba(42, 19, 48, .5), rgba(12, 7, 16, .5));
}
.history-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  text-decoration: none;
}
.history-link b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold-soft);
}
.history-link:hover b { color: #fff; }
.history-deck {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.history-q { margin: .5em 0 0; font-size: .95rem; color: var(--text-dim); }
.history-when { margin: .35em 0 0; font-size: .78rem; color: var(--text-faint); }

.history-empty p { color: var(--text-dim); }
.history-empty p + p { margin-top: 1.2em; display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================
   Картинка на память
   ----------------------------------------------------------
   Лист выезжает под кнопками расклада: показывает готовый кадр,
   даёт выбрать размер, сохранить файл и отдать ссылку в сети.
   Рисует кадр js/share.js, здесь только оправа.
   ========================================================= */

.share {
  margin: 20px 0 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(217, 177, 105, .26);
  border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(42, 19, 48, .58), rgba(12, 7, 16, .58));
  box-shadow: var(--shadow);
}
.share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.share-head b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.share-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 177, 105, .3);
  border-radius: 50%;
  background: none;
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.share-close:hover {
  background: rgba(217, 177, 105, .16);
  border-color: var(--gold);
  color: #fff;
}

.share-body { display: flex; flex-wrap: wrap; gap: 24px; }
.share-side { flex: 1 1 320px; min-width: 0; }

/* Кадр показывается тем же, чем он и станет, — холстом. Ширина у двух
   размеров разная: вертикальный в 260 px выходит ростом с колонку,
   широкий в тех же 260 нечитаем. */
.share-shot { flex: 0 0 auto; }
.share-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.share-shot[data-fmt='story'] { width: 236px; }
.share-shot[data-fmt='wide'] { width: 100%; max-width: 420px; }

.share-fmts { display: flex; gap: 8px; margin-bottom: 12px; }
.share-fmt {
  padding: 8px 14px;
  border: 1px solid rgba(217, 177, 105, .32);
  border-radius: 999px;
  background: rgba(217, 177, 105, .05);
  color: var(--text-dim);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.share-fmt:hover { color: var(--gold-soft); border-color: var(--gold); }
.share-fmt.is-on {
  background: rgba(217, 177, 105, .2);
  border-color: var(--gold);
  color: var(--gold-soft);
}

.share-size { margin: 0 0 16px; font-size: .82rem; color: var(--text-faint); }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.share-nets { margin: 16px 0 0; font-size: .84rem; color: var(--text-faint); }
.share-nets a {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 5px 12px;
  border: 1px solid rgba(99, 183, 172, .34);
  border-radius: 999px;
  color: var(--teal-glow);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.share-nets a:hover { background: rgba(99, 183, 172, .14); border-color: var(--teal); }

.share-hint { margin: 12px 0 0; font-size: .78rem; color: var(--text-faint); }

@media (max-width: 560px) {
  .share { padding: 16px 14px 18px; }
  .share-body { gap: 18px; }
  .share-shot[data-fmt='story'] { width: 100%; max-width: 260px; margin: 0 auto; }
  .share-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================
   Врезка «попробуйте здесь»
   ----------------------------------------------------------
   Знак дня прямо в тексте статьи: та же карточка, что в разделе
   «Сегодня», — разметка одна, и разойтись им негде. Ставит её
   tools/build-pages.js по строке «Врезка» в самой статье.

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

.try {
  margin: 2.2em 0;
  padding: 20px 20px 24px;
  border: 1px solid rgba(141, 106, 47, .3);
  border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(141, 106, 47, .12), rgba(141, 106, 47, .05));
  text-align: center;
}
.try-kicker {
  margin: 0 0 14px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Та же латунь, что у кнопки-призрака в статье: на пергаменте
     var(--gold-deep) даёт ниже AA. */
  color: #7d5c25;
}
/* Карточка внутри врезки уже, чем на «Сегодня»: там их четыре в ряд,
   здесь она одна посреди колонки текста и в полную ширину выглядела бы
   не врезкой, а второй страницей. Тень мельче: лист лежит на листе,
   а не на ночном столе. */
.try .day-card {
  max-width: 400px;
  margin: 0 auto;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.try-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
}

@media (max-width: 560px) {
  .try { padding: 16px 12px 20px; }
  .try-more .btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================
   Ангельские числа
   ----------------------------------------------------------
   Страница числа устроена как статья на пергаменте, и добавляет
   к ней три вещи: само число крупно под заголовком, живую форму
   «а что у вас» и переход к соседним числам. Указатель — колонки
   ссылок по видам знака.
   ========================================================= */

/* Само число под заголовком: крупно, латунью, с разрядкой — так его
   видно первым, и так же оно выглядит на часах и на чеке. Не абзац, а
   div, и это нарочно: буквица в статье ложится на первый <p>, и число,
   стоящее абзацем, получило бы её на свою первую цифру. */
.angel-figure {
  margin: .2em 0 .6em;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(3.2rem, 12vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* Лид страницы числа. Общий .lead на пергаменте не годится: он написан
   для тёмного фона и светлым по светлому не читается. */
.angel-lead {
  font-size: 1.1rem;
  color: var(--ink-2);
}
/* Буквица тут не к месту: лид числа начинается с цифры, и «1» ростом
   в четыре строки превращает «1212» в «1» и «212». */
.article > .angel-lead::first-letter {
  float: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Форма приходит из разметки спрятанной и показывается скриптом: без него
   считать некому. Лежит она на том же тёплом листе, что и врезка со знаком
   дня, — оба блока на странице живые, и выглядеть должны заодно. */
.angel-check {
  margin: 2.2em 0;
  padding: 20px 22px 24px;
  border: 1px solid rgba(141, 106, 47, .3);
  border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(141, 106, 47, .12), rgba(141, 106, 47, .05));
}
.angel-check h2 { margin-top: 0; }
.angel-check label {
  display: block;
  margin: 1em 0 .4em;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d5c25;
}
.angel-check input {
  width: 100%;
  max-width: 260px;
  margin-bottom: 14px;
}
.angel-out:empty { display: none; }
.angel-out {
  margin: 1em 0 0;
  padding-top: 1em;
  border-top: 1px solid rgba(141, 106, 47, .25);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  color: var(--ink-2);
}

/* Соседние числа — тот же ряд, что под знаком колоды: назад, вверх, вперёд. */
.angel-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

/* Указатель: по колонке на вид знака. Ссылок много и они короткие —
   сетка из узких плашек читается быстрее, чем список в столбик. */
.angel-list {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.angel-list a {
  display: block;
  padding: 10px 6px;
  border: 1px solid rgba(217, 177, 105, .24);
  border-radius: var(--radius-sm);
  background: linear-gradient(168deg, rgba(42, 19, 48, .5), rgba(12, 7, 16, .5));
  color: var(--gold-soft);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.24rem;
  text-align: center;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.angel-list a:hover {
  background: rgba(217, 177, 105, .16);
  border-color: var(--gold);
  color: #fff;
}

/* Подпись под заголовком статьи: кто написал и когда. Появляется только
   у тех статей, что подписаны, — у восьмидесяти текстов 2018 года автора
   не спросишь, и подпись под ними была бы выдумкой. */
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: -.4em 0 1.6em;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.byline span { font-weight: 700; }
.byline time::before { content: '·'; margin-right: 14px; color: var(--line); }
@media (max-width: 480px) {
  .byline time::before { content: none; margin: 0; }
}

/* ==========================================================================
   Личные страницы: свеча, дневник и альбом знаков
   --------------------------------------------------------------------------
   Три страницы, содержимое которых приходит не с сервера, а из памяти
   браузера (site/js/vault.js). Общее у них одно: без скрипта на месте
   списка, календаря и сетки пусто, — поэтому заготовки в разметке стоят
   скрытыми, а текст вокруг них написан так, чтобы читаться и без них.

   Ничего здесь не прячется до прокрутки: прозрачности нет ни в одном
   правиле, а движение снимается общим блоком «меньше движения» в конце
   файла — свой отдельный есть и тут, для пламени свечи.
   ========================================================================== */

/* --- строка серии: главная и раздел «Сегодня» --- */

.streak-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1.1em 0 0;
  font-size: .9rem;
  color: var(--text-dim);
}
.streak-line a { color: var(--gold-soft); }
.streak-flame {
  flex: none;
  width: 9px;
  height: 14px;
  border-radius: 50% 50% 46% 54% / 62% 60% 40% 38%;
  background: radial-gradient(60% 55% at 50% 72%, #fff6d8, var(--ember) 55%, rgba(255, 120, 30, 0) 78%);
  box-shadow: 0 0 14px rgba(255, 156, 74, .7);
  animation: candle-lick 2.6s ease-in-out infinite;
}
@keyframes candle-lick {
  0%, 100% { transform: scaleY(1) rotate(-1.5deg); }
  50% { transform: scaleY(1.12) rotate(1.5deg); }
}

/* --- страница «Моя свеча» --- */

.candle-hero {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 26px 28px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
/* Свеча нарисована тремя блоками: пламя, столбик и лужица воска у
   основания. Картинки для неё нет — как и для рубашек, всё градиентами. */
.candle-figure {
  position: relative;
  flex: none;
  width: 54px;
  height: 128px;
}
.candle-flame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 30px;
  margin-left: -9px;
  border-radius: 50% 50% 46% 54% / 66% 64% 36% 34%;
  background: radial-gradient(58% 54% at 50% 74%, #fff8e2, #ffd07a 42%, var(--ember) 66%, rgba(255, 120, 30, 0) 82%);
  box-shadow: 0 0 34px rgba(255, 156, 74, .75);
  animation: candle-lick 2.6s ease-in-out infinite;
}
.candle-body {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 30px;
  height: 84px;
  margin-left: -15px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(96deg, #d8c7a4, #f6efdd 34%, #cbb794);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, .5), 0 8px 22px rgba(0, 0, 0, .4);
}
.candle-pool {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54px;
  height: 16px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(50% 60% at 50% 40%, rgba(246, 239, 221, .9), rgba(180, 160, 124, .5));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}
/* Свеча, которую сегодня не зажигали, стоит холодной: пламени нет,
   и об этом же говорит строка рядом. */
.candle-hero:not(.is-lit) .candle-flame { opacity: 0; animation: none; }

.candle-copy { min-width: 0; }
.candle-days {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--gold-soft);
}
.candle-days b {
  font-size: 2.9rem;
  line-height: 1;
  margin-right: 6px;
  color: #fff;
}
.candle-sub { margin: .5em 0 0; color: var(--text-dim); }
.candle-facts {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: .84rem;
  color: var(--text-faint);
}

.candle-cal { margin-top: 26px; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 430px;
  margin: 0 0 12px;
}
.cal-head b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--gold-soft);
}
.cal-step {
  width: 34px;
  height: 34px;
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  background: rgba(30, 17, 38, .6);
  color: var(--gold-soft);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cal-step:hover:not([disabled]) { border-color: var(--gold); color: #fff; }
.cal-step[disabled] { opacity: .3; cursor: default; }

.cal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 430px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-name {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
}
.cal-gap { visibility: hidden; }
.cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid rgba(217, 177, 105, .16);
  border-radius: var(--radius-sm);
  background: rgba(12, 7, 16, .45);
  font-size: .84rem;
  color: var(--text-faint);
}
.cal-day.is-later { opacity: .35; }
/* Огонёк на дне, когда приходили: тот же тёплый свет, что у свечи. */
.cal-day.is-lit {
  border-color: rgba(255, 156, 74, .5);
  background: radial-gradient(60% 60% at 50% 62%, rgba(255, 156, 74, .45), rgba(70, 30, 10, .3));
  color: #fff5e0;
  box-shadow: 0 0 16px rgba(255, 156, 74, .28);
}
/* День, на котором сгорел оберег: он не горит, но и не пуст — виден,
   что был прощён. */
.cal-day.is-shield {
  border-color: rgba(99, 183, 172, .45);
  border-style: dashed;
  color: var(--teal-glow);
}
.cal-day.is-shield::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
/* Сегодняшний день обведён поверх всего: он бывает и горящим, и пустым,
   и цвет рамки в обоих случаях уже занят. Поэтому обводка, а не рамка, —
   и стоит она ниже, чтобы не проиграть огоньку. */
.cal-day.is-today {
  outline: 1px solid var(--teal);
  outline-offset: 1px;
}
/* Подпись для диктора: экрану её видеть незачем — там всё сказано цветом
   и подсказкой title, — а вслух прочитать надо. */
.cal-said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--text-faint);
}
.cal-key {
  width: 13px;
  height: 13px;
  margin-right: -12px;
  border: 1px solid rgba(217, 177, 105, .16);
  border-radius: 4px;
}
.cal-key.is-lit { border-color: rgba(255, 156, 74, .5); background: rgba(255, 156, 74, .4); }
.cal-key.is-shield { border-color: rgba(99, 183, 172, .45); border-style: dashed; }
.cal-key.is-today { border-color: var(--teal); }

@media (max-width: 560px) {
  .candle-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cal-head, .cal-grid { max-width: none; }
}

/* --- дневник --- */

.diary { display: grid; gap: 14px; }
.diary-item {
  padding: 16px 18px 18px;
  border: 1px solid rgba(217, 177, 105, .2);
  border-radius: var(--radius-sm);
  background: linear-gradient(168deg, rgba(42, 19, 48, .5), rgba(12, 7, 16, .5));
}
.diary-signs {
  list-style: none;
  margin: .8em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diary-signs li {
  padding: 5px 11px;
  border: 1px solid rgba(217, 177, 105, .22);
  border-radius: 999px;
  background: rgba(12, 7, 16, .4);
  font-size: .82rem;
  color: var(--text-dim);
}
.diary-signs a { color: var(--gold-soft); text-decoration: none; }
.diary-signs a:hover { color: #fff; text-decoration: underline; }
.diary-signs i {
  margin-left: 5px;
  font-size: .72rem;
  font-style: normal;
  color: var(--teal);
}
.diary-nosigns { margin: .8em 0 0; font-size: .82rem; color: var(--text-faint); }

.diary-mark {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1em;
}
.diary-btn {
  padding: 8px 15px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(12, 7, 16, .45);
  color: var(--text-dim);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.diary-btn:hover { border-color: var(--gold); color: #fff; }
.diary-btn.is-on {
  border-color: var(--teal);
  background: rgba(99, 183, 172, .18);
  color: var(--teal-glow);
}

.diary-note { display: block; margin-top: 1em; }
.diary-note span {
  display: block;
  margin-bottom: 6px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.diary-note textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: rgba(12, 7, 16, .5);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  resize: vertical;
}
.diary-note textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.diary-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .88rem;
  color: var(--text-dim);
}
.diary-numbers b {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--gold-soft);
  margin-right: 4px;
}
.diary-span { margin: 1em 0 0; font-size: .84rem; color: var(--text-faint); }
.diary-span + h3 { margin-top: 1.6em; }
.diary-top {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.diary-top li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: rgba(12, 7, 16, .4);
  font-size: .92rem;
}
.diary-top a { color: var(--gold-soft); text-decoration: none; }
.diary-top a:hover { color: #fff; text-decoration: underline; }
.diary-top b { color: var(--teal-glow); }

.vault-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4em; }
.vault-note { margin: 1em 0 0; font-size: .84rem; color: var(--teal-glow); }

/* --- альбом знаков --- */

.album-deck + .album-deck { margin-top: 34px; }
.album-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 14px;
}
.album-head h2 { margin: 0; }
.album-score { margin: 0; font-size: .88rem; color: var(--text-dim); }
.album-score b { color: var(--gold-soft); font-size: 1.1rem; }
.album-bar {
  flex: 1 1 130px;
  height: 4px;
  border-radius: 999px;
  background: rgba(217, 177, 105, .16);
  overflow: hidden;
}
.album-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal-glow));
}
.album-done {
  flex: 1 0 100%;
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.album-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
}
.album-cell { min-width: 0; }
.album-cell a {
  display: block;
  text-decoration: none;
  color: var(--text-dim);
  text-align: center;
}
.album-cell a:hover { color: #fff; }
.album-cell b {
  display: block;
  margin-top: 6px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Открытый знак: снимок или вектор в общей рамке. Пропорции у знака
   свои, и он в неё вписывается, а не растягивается — иначе кость домино
   стала бы картой. */
.album-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(217, 177, 105, .28);
  border-radius: 6px;
  background: linear-gradient(158deg, #f6efe2, #e6d8c3);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.album-cell a:hover .album-art {
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.album-art img { width: 100%; height: 100%; object-fit: contain; }
.album-art .sign { width: 74%; height: 74%; }

/* Неоткрытый знак лежит рубашкой. Рубашку рисует та же .card-back, что
   в раскладе, — потому и разметка здесь та же: у неё девять обликов по
   классу колоды, и повторять их вторым набором правил было бы верным
   способом развести альбом со столом. В раскладе она перевёрнута
   к зрителю спиной (карта переворачивается), здесь переворачивать
   нечего. */
.album-shut {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
}
.album-shut .card-face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.album-shut .card-back {
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.album-shut .back-mark { font-size: 1.1rem; }

/* --- «впервые» на свитке --- */
/* Знак, которого человек ещё не видел, отмечается один раз — в том
   раскладе, где он выпал. Дальше он просто лежит в альбоме. */
.card-first {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #08201d;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- вторая рубашка за собранную колоду --- */
/* Колода, у которой открыты все знаки, ложится на стол другим оборотом.
   Новых картинок для этого нет ни одной — как и у первых девяти рубашек:
   поверх прежнего рисунка ложится тёмно-зелёный полог с латунной
   гранью, и по нему видно, что колода собрана. Класс deck-done ставит
   site/js/app.js, а в альбоме — site/js/album.js на своём разделе. */
.deck-done .card-back {
  box-shadow:
    inset 0 0 0 1px rgba(243, 224, 181, .68),
    inset 0 0 0 4px rgba(10, 32, 28, .55),
    inset 0 0 0 5px rgba(243, 224, 181, .5),
    inset 0 0 0 9px rgba(10, 32, 28, .5),
    inset 0 0 46px rgba(0, 0, 0, .55),
    0 10px 28px rgba(0, 0, 0, .5);
  color: #fff;
}
.deck-done .card-back::before {
  border-color: rgba(143, 232, 218, .55);
  box-shadow: inset 0 0 26px rgba(99, 183, 172, .3);
}
.deck-done .card-back::after {
  border-style: solid;
  border-color: rgba(143, 232, 218, .3);
}
/* Полог поверх рубашки: он же и отличает собранную колоду от несобранной
   у тех девяти, где своей розетки нет. */
.deck-done .back-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(99, 183, 172, .16) 0 4px, transparent 4px 11px),
    radial-gradient(circle at 50% 44%, rgba(99, 183, 172, .3), transparent 62%);
  pointer-events: none;
}
.deck-done .back-mark { text-shadow: 0 0 20px rgba(143, 232, 218, .9); }

@media (prefers-reduced-motion: reduce) {
  .streak-flame, .candle-flame { animation: none; }
}

/* =========================================================
   Печати-достижения, титул и паспорт
   ----------------------------------------------------------
   Печать здесь — не значок, а сургуч: неровный тёплый диск с оттиском.
   Оттиск нарисован вектором и приходит из data/pechati.json, диск
   собран градиентами; ни одной новой картинки — site/img/ чистит
   tools/build-images.py, и всё, чего нет в его списке, оттуда пропадает.

   Полученную от неполученной отличают не подписью, а цветом и рельефом:
   сургуч красный и выпуклый, пустое место — тёмный оттиск в раме, как
   след от печати, которую ещё не поставили.
   ========================================================= */

.pechat {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}
.pechat-wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* Сургуч кладут ложкой, а не циркулем: края у него разные. */
  border-radius: 47% 53% 51% 49% / 52% 48% 53% 47%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .26), transparent 48%),
    radial-gradient(circle at 50% 56%, #a8323f, #5c1926 74%);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .2),
    inset 0 -7px 16px rgba(0, 0, 0, .35),
    0 8px 20px rgba(0, 0, 0, .45);
  color: rgba(255, 226, 190, .92);
}
.pechat-wax svg {
  display: block;
  width: 58%;
  height: 58%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
/* Рваное кольцо по краю — тот же приём, что у печати под раскладом. */
.pechat-wax::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px dashed rgba(168, 50, 63, .4);
}

/* --- стена печатей в дневнике --- */

.seals-rank {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
}
.seals-rank-name {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--text-dim);
}
.seals-rank-name b { color: var(--gold-soft); }
.seals-rank-text { margin: 6px 0 0; color: var(--text-dim); }
.seals-rank-next {
  margin: 6px 0 0;
  font-size: .92rem;
  color: var(--text-faint);
}

.seals-grid {
  display: grid;
  /* 146 px, а не 180: на телефоне двенадцать печатей в один столбец —
     это экран с половиной, и до последней никто не долистает. Две
     помещаются и на 375 px. */
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pechat-cell {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 12px 14px;
  text-align: center;
  border-radius: var(--radius);
  background: rgba(21, 13, 28, .5);
  border: 1px solid rgba(217, 177, 105, .12);
}
.pechat-cell.is-got { border-color: rgba(217, 177, 105, .3); }
/* Неполученная печать: оттиска нет, есть только место под него. */
.pechat-cell:not(.is-got) .pechat-wax {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .05), transparent 48%),
    radial-gradient(circle at 50% 56%, #2b2233, #191220 74%);
  box-shadow:
    inset 0 0 0 2px rgba(217, 177, 105, .12),
    inset 0 6px 16px rgba(0, 0, 0, .5),
    0 4px 12px rgba(0, 0, 0, .3);
  color: rgba(236, 225, 212, .24);
}
.pechat-cell:not(.is-got) .pechat-wax::after { border-color: rgba(217, 177, 105, .14); }
.pechat-cell:not(.is-got) .pechat-wax svg { filter: none; }
.pechat-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.22rem;
  color: var(--gold-soft);
}
.pechat-cell:not(.is-got) .pechat-name { color: var(--text-dim); }
.pechat-for {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.pechat-when {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pechat-cell.is-got .pechat-when { color: var(--gold-deep); }

/* --- «печать ваша» --- */
/* Полоска внизу экрана: заметно и не поперёк дороги. Модальное окно
   посреди расклада было бы наглостью — человек пришёл гадать. */

.seal-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--panel-2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(217, 177, 105, .34);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: seal-come .6s var(--ease-out) both;
}
.seal-toast .pechat {
  width: 58px;
  height: 58px;
}
.seal-toast-copy { min-width: 0; }
.seal-toast-copy b {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--gold-soft);
}
.seal-toast-copy p {
  margin: 2px 0 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.seal-toast-x {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 6px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-faint);
  background: none;
  border: 0;
  cursor: pointer;
}
.seal-toast-x:hover { color: var(--gold-soft); }
@keyframes seal-come {
  from { opacity: 0; transform: translate(-50%, 26px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   Паспорт
   ----------------------------------------------------------
   Дата рождения и имя вводятся один раз и лежат в браузере. Страница
   показывает четыре вещи разом — знак зодиака, число жизненного пути,
   карту года Таро и карту личности Ленорман, — и потому разложена
   сеткой, а не столбиком: столбиком её пришлось бы прокручивать.
   ========================================================= */

.pass-card {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
}
.pass-head {
  padding-bottom: 16px;
  margin-bottom: 18px;
  text-align: center;
  border-bottom: 1px solid rgba(217, 177, 105, .18);
}
.pass-kicker {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pass-name {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  color: var(--gold-soft);
}
.pass-born {
  margin: 2px 0 0;
  color: var(--text-dim);
}
.pass-rank {
  margin: 8px 0 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold);
}
.pass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pass-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(12, 7, 16, .42);
  border: 1px solid rgba(217, 177, 105, .14);
}
.pass-label {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pass-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.pass-glyph {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--teal);
}
.pass-digit {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--night);
  background: radial-gradient(circle at 36% 30%, var(--gold-soft), var(--gold) 58%, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.pass-art {
  flex: 0 0 auto;
  width: 54px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.pass-art img { display: block; width: 100%; height: auto; }
.pass-sub {
  margin: 0;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--gold);
}
.pass-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.pass-advice {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--text);
  border-left: 2px solid rgba(217, 177, 105, .4);
  padding-left: 10px;
}
.pass-links {
  margin: auto 0 0;
  font-size: .88rem;
}
.pass-links a { margin-right: 12px; }
.pass-how {
  margin: 16px 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .seal-toast { animation: none; }
}

/* Полоска служебного потока: «сайт обновился» и «поставить на экран».
   Живёт внизу, как уведомление о данных, и в том же оформлении — их
   рисует разный код, но для человека это одно и то же место, и разводить
   два вида одинаковых по смыслу полосок было бы щегольством. Показывается
   по одной за раз: вторую ставит js, сняв первую. */
.pg-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 95;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(217, 177, 105, .22);
  background: rgba(20, 12, 26, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
  animation: pg-bar-come .5s var(--ease-out) both;
}
.pg-bar p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-dim); flex: 1 1 300px; }
.pg-bar .pg-bar-buttons { flex: 0 0 auto; display: flex; gap: 9px; }
.pg-bar .btn { padding: 9px 16px; font-size: .68rem; }

@keyframes pg-bar-come {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 640px) {
  .pg-bar { bottom: 10px; padding: 14px 16px; }
  .pg-bar .pg-bar-buttons { flex: 1 1 100%; }
  .pg-bar .btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-bar { animation: none; }
}

/* ---------- школа: тренажёр по картам ----------
   Карточка — тот же пергамент, что у свитка расклада и страницы знака:
   толкование на сайте всегда лежит на бумаге, и заводить тренажёру своё
   оформление значило бы объявить его чем-то другим. На широком экране
   рисунок слева, значение справа; на телефоне одним столбцом, и картинка
   не растёт выше трети экрана — иначе кнопки уезжают под сгиб, а нажимать
   их приходится каждые несколько секунд. */
.school-head {
  max-width: 54rem;
  margin: 0 auto 18px;
}
.school-count {
  margin: 0 0 8px;
  font-size: .84rem;
  color: var(--text-dim);
}
.school-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(236, 225, 212, .12);
  overflow: hidden;
}
.school-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width .4s var(--ease-out);
}

.school-card {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 6px 6px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 12%),
    linear-gradient(168deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.school-face { margin: 0; }
.school-face img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(36, 26, 18, .3);
}
.school-name {
  margin: 12px 0 2px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
}
.school-group {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.school-ask {
  margin: 0;
  align-self: center;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.school-back { min-width: 0; }
.school-back .sign-keys { margin-bottom: 14px; }
.school-mean {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.school-mean b { color: var(--ink); }
.school-advice {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(141, 106, 47, .4);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}
.school-tail {
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--muted);
}
.school-more { margin: 0; font-size: .88rem; }
.school-act {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}
/* «Не вспомнил» стоит на пергаменте, а призрачная кнопка сделана для
   тёмного: светлая латунь по светлой бумаге почти не читается. На карточке
   ей нужны чернила — рядом с «Вспомнил» она должна быть видна не хуже,
   иначе честный ответ окажется труднее лестного. */
.school-card .btn-ghost {
  background: rgba(36, 26, 18, .05);
  color: var(--ink-2);
  border-color: rgba(141, 106, 47, .45);
}
.school-card .btn-ghost:hover {
  background: rgba(36, 26, 18, .1);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: none;
}

.school-hint {
  max-width: 54rem;
  margin: 10px auto 0;
  font-size: .78rem;
  color: var(--text-faint);
}

.school-rest {
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  background: var(--panel-2);
}
.school-rest p { margin: 0 0 10px; color: var(--text-dim); }
.school-rest p:last-child { margin-bottom: 0; }
.school-done {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--gold-soft);
}
.school-rest .school-act { margin-top: 4px; }

.school-groups {
  max-width: 54rem;
  margin: 26px auto 0;
}
.school-groups h3 {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.school-groups ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 0;
}
.school-groups li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-line);
  background: rgba(30, 17, 38, .5);
  font-size: .84rem;
  color: var(--text-dim);
}
.school-groups b { color: var(--gold-soft); font-weight: 600; }

@media (max-width: 720px) {
  .school-card { grid-template-columns: 1fr; }
  /* Рисунок уходит влево, имя и группа встают рядом: карта во всю ширину
     телефона съедала бы экран целиком, а нажимать кнопки надо каждые
     несколько секунд. */
  .school-face {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
  }
  .school-face > picture,
  .school-face > img { grid-row: 1 / 3; }
  .school-face picture { display: block; }
  .school-name { margin-top: 0; align-self: end; }
  .school-group { align-self: start; }
  .school-act .btn { flex: 1 1 auto; text-align: center; }
}
/* =========================================================
   Матрица судьбы
   ---------------------------------------------------------
   Восьмиконечная схема из двух квадратов и разбор под ней. Ни одной
   новой картинки: звезда собрана из двух многоугольников и двух линий
   прямо в разметке, которую пишет js/matrix.js, — как и всё векторное
   на сайте, потому что site/img/ чистит build-images.py.

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

.mx-form { margin-bottom: 12px; }
.mx-keep {
  max-width: 46rem;
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.mx-card {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
}
.mx-head {
  padding-bottom: 16px;
  margin-bottom: 18px;
  text-align: center;
  border-bottom: 1px solid rgba(217, 177, 105, .18);
}
.mx-kicker {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mx-born {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  color: var(--gold-soft);
}
.mx-comet {
  margin: 2px 0 0;
  font-size: .95rem;
  color: var(--text-dim);
}

.mx-figure { display: flex; justify-content: center; }
.mx-star {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}
/* Оба квадрата и обе оси — одним слоем: обводка у них общая, и разводить
   её по толщине значило бы сказать, что одни точки важнее других. */
.mx-lines polygon, .mx-lines line {
  fill: none;
  stroke: rgba(217, 177, 105, .32);
  stroke-width: 1.4;
}
.mx-spot {
  fill: rgba(12, 7, 16, .92);
  stroke: var(--gold-deep);
  stroke-width: 1.4;
}
.mx-spot.is-centr {
  fill: var(--wine);
  stroke: var(--gold);
  stroke-width: 2;
}
.mx-spot-n {
  text-anchor: middle;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  fill: var(--gold-soft);
}
.mx-spot-n.is-centr { font-size: 27px; fill: #fff6e2; }

.mx-legend {
  max-width: 40rem;
  margin: 14px auto 0;
  text-align: center;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.mx-groups { margin-top: 26px; }
.mx-group + .mx-group { margin-top: 30px; }
.mx-group h3 {
  margin: 0 0 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.mx-group-about {
  max-width: 48rem;
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.mx-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(12, 7, 16, .42);
  border: 1px solid rgba(217, 177, 105, .14);
}
.mx-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mx-num {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(217, 177, 105, .3);
  text-align: center;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--gold-soft);
}
.mx-place { color: var(--text-faint); }
.mx-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.mx-art {
  flex: 0 0 auto;
  width: 48px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.mx-art img { display: block; width: 100%; height: auto; }
.mx-kw {
  margin: 0;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--gold);
}
/* Выкладка стоит у каждой точки своя: расчёт, который нельзя пересчитать
   на бумаге, ничем не отличается от гадания. Формула — моноширинной,
   чтобы «A + B + C» не расползалось и читалось как формула. */
.mx-how {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-faint);
}
.mx-how span {
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(217, 177, 105, .12);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .78rem;
  color: var(--gold);
}
.mx-about {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-faint);
  border-left: 2px solid rgba(217, 177, 105, .3);
  padding-left: 10px;
}
.mx-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.mx-links { margin: auto 0 0; font-size: .88rem; }

.matrix-steps { max-width: 46rem; line-height: 1.65; }
.matrix-steps li { margin-bottom: 8px; }

@media (max-width: 560px) {
  .mx-card { padding: 16px; }
  .mx-born { font-size: 1.6rem; }
  /* На узком экране круги мельчают вместе со схемой, и число в них
     становится нечитаемым раньше, чем сама звезда — незаметной. Поэтому
     схема не ужимается ниже трёхсот пикселей, а если и им негде встать,
     разбор ниже говорит то же самое словами. */
  .mx-star { min-width: 288px; }
  .mx-figure { overflow-x: auto; }
}

/* =========================================================
   Лунный календарь
   ----------------------------------------------------------
   Три вида страниц на одном пергаменте: день, месяц и календари
   стрижек и посадок. Своего у раздела четыре вещи — карточка луны,
   таблица дней, список фаз и ряд соседних дат; всё остальное берётся
   от статьи, на которой раздел и стоит.

   Рисунок луны здесь тот же, что в полосе «Что на небе»: .moon-dark,
   .moon-lit и .moon-rim покрашены выше, и повторять их незачем.
   ========================================================= */

/* Лид на пергаменте. Общий .lead написан для тёмного фона и светлым
   по светлому не читается — как и у ангельских чисел. */
.article > p.moon-lead {
  font-size: 1.1rem;
  color: var(--ink-2);
}
/* Буквица тут не к месту: лид дня начинается с числа лунных суток,
   и «2» ростом в четыре строки разбивает «26-е» на «2» и «6-е».
   Тип элемента и :first-of-type в селекторе не для красоты: без них
   правило легче того, что буквицу ставит, — «.article > p:first-of-type
   ::first-letter», — и отмена не срабатывает. */
.article > p.moon-lead:first-of-type::first-letter,
.article > p.moon-card-to:first-of-type::first-letter {
  float: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Карточка луны: рисунок диска и три строки фактов. Стоит на хабе и
   наверху страницы дня, и разметка у них одна — хаб подменяет её
   карточкой нужного дня, как «Сегодня» подменяет знаки дня. */
.moon-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 2px 22px;
  align-items: start;
  margin: 1.6em 0 2em;
  padding: 20px 24px 22px;
  border: 1px solid rgba(141, 106, 47, .3);
  border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(141, 106, 47, .12), rgba(141, 106, 47, .05));
}
.moon-icon {
  grid-row: 1 / span 4;
  display: block;
  width: 86px;
  height: 86px;
}
.moon-icon svg { display: block; width: 100%; height: 100%; }
.moon-kicker {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d5c25;
}
.moon-card .moon-phase {
  margin: .1em 0 .3em;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--ink);
}
.moon-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ink-2);
}
/* Ход в страницу дня. Лежит рядом с карточкой, а не внутри неё: внутри
   он на странице самого дня вёл бы саму на себя, а разметка карточки
   у хаба и у дня одна — её и переставляет скрипт. */
.article > p.moon-card-to {
  margin: -1.2em 0 2em;
  font-size: 1rem;
}

/* Строка сухих чисел под заголовком: во сколько луна вошла в знак,
   когда выйдет, что за стихия. Тише текста нарочно — это подпись
   к разделу, а не сам раздел. */
.article .moon-fact {
  margin: 0 0 1em;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Ближайшие фазы и фазы месяца — список без маркеров: даты в нём
   выровнены по левому краю и читаются столбцом. */
.moon-events {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.moon-events li {
  padding-left: 16px;
  border-left: 2px solid rgba(141, 106, 47, .3);
}
.moon-events b { color: var(--ink); }

/* Таблица дней месяца. Шире экрана телефона она быть не должна, но и
   ужимать пять столбцов до нечитаемого незачем: обёртка прокручивается
   вбок сама, а страница остаётся на месте. */
.moon-table-wrap {
  margin: 0 0 1.3em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.moon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.moon-table th {
  padding: 0 10px 8px 0;
  text-align: left;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7d5c25;
  border-bottom: 1px solid rgba(141, 106, 47, .35);
  white-space: nowrap;
}
.moon-table td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid rgba(141, 106, 47, .14);
  vertical-align: top;
}
.moon-table td:first-child { white-space: nowrap; font-weight: 700; color: var(--ink); }
.moon-table a { color: #7d5c25; }
.moon-table a:hover { color: var(--ink); }
/* День, на который пришлась сама фаза, — четыре строки в месяце.
   Ради них таблицу и открывают. */
.moon-row-event td { background: rgba(217, 177, 105, .13); }
.moon-row-event td:nth-child(3) { font-weight: 700; color: var(--ink); }
/* В календарях стрижек и посадок столбца три, и два из них — длинные
   перечисления чисел. Им нужна ширина, а не одна строка. */
.moon-table-cal td:not(:first-child) { min-width: 12rem; }

/* Месяцы на хабе: год жирным, месяцы через точку. Ссылок сорок с лишним,
   и список в столбик занял бы целый экран. */
.article .moon-year {
  margin: 0 0 .6em;
  font-size: 1rem;
  line-height: 1.9;
}
.moon-year b {
  display: inline-block;
  min-width: 3.4em;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .08em;
}

.article .moon-links { margin: 2em 0 0; }

/* Соседние дни и месяцы — тот же ряд, что под ангельским числом:
   назад, вверх, вперёд. */
.moon-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

/* Ход из полосы «Что на небе» в лунный календарь этого же дня. Полоса
   лежит на пергаменте, и латунь на нём для мелкого текста слишком
   светла — тот же тон на шаг темнее, что у кнопок в статье. */
.sky-to {
  /* Столбец назван прямо: рисунок луны занимает первый на четыре строки,
     а абзацев в блоке пять — пятый без этого уезжает под луну, в колонку
     шириной в семьдесят шесть пикселей. */
  grid-column: 2;
  margin: .5em 0 0;
  font-size: .88rem;
}
.sky-to a { color: #7d5c25; }
.sky-to a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .moon-card {
    grid-template-columns: 58px 1fr;
    gap: 2px 16px;
    padding: 16px 18px 18px;
  }
  .moon-icon { width: 58px; height: 58px; }
  .moon-card .moon-phase { font-size: 1.45rem; }
  /* Таблица уезжает вбок внутри своей обёртки, а не растягивает страницу;
     чтобы прокрутку было видно, ей оставлен край. */
  .moon-table { font-size: .88rem; }
  .moon-table th, .moon-table td { padding-right: 14px; }
  .moon-table-cal td:not(:first-child) { min-width: 9rem; }
}