/* Literata — вариативный файл: один и тот же ресурс покрывает весь диапазон
   насыщенности, поэтому объявляем диапазоном, а не двумя начертаниями.
   Кириллический субсет НЕ содержит латиницы и цифр — нужны оба, иначе «ASC»
   и числа уедут на подменный шрифт и разъедутся по высоте. */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/golostext-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/golostext-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122; }

:root {
  --ark-paper:   #EDEEEA;
  --ark-surface: #FFFFFF;
  --ark-ink:     #1C1E22;
  --ark-ink2:    #52565E;
  --ark-ink3:    #838791;
  --ark-line:    #D7D8D2;
  --ark-indigo:  #2A3356;
  --ark-brass:   #A97C3F;
  --ark-ui: 'Golos Text', 'PT Sans', system-ui, sans-serif;
}

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Literata объявлена диапазоном 400–600. По умолчанию <strong> просит 700 —
   за пределами диапазона браузер либо синтезирует уродливый псевдожир, либо
   не меняет начертание вовсе. Приводим к верхней границе диапазона явно. */
strong, b, th { font-weight: 600; }

/* ── Заголовки. Линейка над h2 — приём печатного справочника: раздел
      отделяется чертой во всю ширину колонки, а не отступом. Ромб слева —
      единственный орнамент на сайте; он отмечает начало раздела так же, как
      это делали в старых альманахах, и не притворяется магией. */
.entry-content h2, .wp-block-post-content h2 {
  margin-top: 2.6em; padding-top: .85em; border-top: 1px solid var(--ark-indigo);
  position: relative;
}
.entry-content h2::before, .wp-block-post-content h2::before {
  content: ''; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--ark-brass); transform: rotate(45deg);
}
.entry-content h3, .wp-block-post-content h3 { margin-top: 1.9em; }
h1 { margin-bottom: .45em; }

/* Подзаголовок под h1 — вводный абзац крупнее и спокойнее остального текста */
.entry-content > p:first-of-type, .wp-block-post-content > p:first-of-type {
  font-size: 1.13em; line-height: 1.6; color: var(--ark-ink2);
}

/* ── Таблицы: линейки разделяют, рамки не запирают. Цифры табличные —
      в справочнике колонки чисел должны совпадать по вертикали. */
.entry-content table, .wp-block-post-content table, .ark-table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0;
  font-size: .95em; background: none; border: 0;
  border-top: 1px solid var(--ark-indigo); border-bottom: 1px solid var(--ark-indigo);
}
.ark-table th, .entry-content table th, .wp-block-post-content table th {
  font-family: var(--ark-ui); font-weight: 500; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ark-ink3);
  text-align: left; padding: .62rem .9rem .62rem 0;
  border-bottom: 1px solid var(--ark-line); vertical-align: bottom;
}
.ark-table td, .entry-content table td, .wp-block-post-content table td {
  padding: .58rem .9rem .58rem 0; border-bottom: 1px solid var(--ark-line);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
.ark-table tr:last-child td { border-bottom: 0; }
.ark-table th:last-child, .ark-table td:last-child { padding-right: 0; }

/* ── Ссылки: тонкая линия с отбивкой, а не жирное подчёркивание */
.entry-content a, .wp-block-post-content a {
  color: var(--ark-brass); text-decoration-thickness: 1px;
  text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--ark-brass) 45%, transparent);
}
.entry-content a:hover, .wp-block-post-content a:hover {
  color: var(--ark-indigo); text-decoration-color: currentColor;
}

/* ── Списки: маркер латунный, текст не съезжает */
.entry-content ul, .wp-block-post-content ul { list-style: none; padding-left: 1.15em; }
.entry-content ul > li, .wp-block-post-content ul > li { position: relative; margin: .35em 0; }
.entry-content ul > li::before, .wp-block-post-content ul > li::before {
  content: '—'; position: absolute; left: -1.15em; color: var(--ark-brass);
}
.entry-content ol, .wp-block-post-content ol { padding-left: 1.3em; }
.entry-content ol > li, .wp-block-post-content ol > li { margin: .35em 0; }
.entry-content ol > li::marker, .wp-block-post-content ol > li::marker {
  color: var(--ark-brass); font-family: var(--ark-ui); font-size: .88em;
}

/* ── Ход расчёта: нумерованные шаги — то, чем сайт отличается от конкурентов,
      поэтому им отдельное оформление, а не общий список */
.ark-steps { list-style: none; padding: 0; counter-reset: s; }
.ark-steps li {
  counter-increment: s; position: relative; padding-left: 2.2rem; margin: .75rem 0;
}
.ark-steps li::before {
  content: counter(s); position: absolute; left: 0; top: .12em;
  font-family: var(--ark-ui); font-size: .72rem; letter-spacing: .04em;
  width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center;
  color: var(--ark-surface); background: var(--ark-indigo);
}
.ark-steps li::marker { content: none; }

/* ── Формы калькуляторов ─────────────────────────────────────────────
   Единая система на все шесть: калькуляторы писались по одному и каждый
   обзавёлся своей вёрсткой поля. У таро подпись стояла в строку перед
   выпадающим списком и налезала на него в Safari, у натальной карты подпись
   оборачивала поле сверху. Здесь оба способа приводятся к одному виду.       */

.ark-form {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .9rem 1.15rem; margin: 1.7rem 0;
}
/* Поле — колонка «подпись сверху, ввод снизу», как бы его ни обернули в разметке */
.ark-field,
.ark-form > label:has(input),
.ark-form > label:has(select) {
  display: flex; flex-direction: column; gap: .3rem; margin: 0;
}
.ark-form label {
  font-family: var(--ark-ui); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ark-ink3);
  line-height: 1.3;
}
.ark-form input[type=date], .ark-form input[type=time], .ark-form input[type=text],
.ark-form input[type=number], .ark-form input[type=search], .ark-form select {
  font-family: var(--ark-ui); font-size: .97rem; line-height: 1.3;
  height: 2.6rem; padding: 0 .75rem; box-sizing: border-box;
  border: 1px solid var(--ark-line); border-radius: 0;
  background: var(--ark-surface); color: var(--ark-ink);
  -webkit-appearance: none; appearance: none;
}
/* У выпадающего списка своя стрелка: родная рисуется по-разному в каждом
   браузере и в Safari занимает место внутри поля, ломая высоту строки. */
.ark-form select {
  padding-right: 2.2rem; min-width: 12rem; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A97C3F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.ark-form input[type=date], .ark-form input[type=time] { min-width: 9.5rem; }
.ark-form input:focus, .ark-form select:focus {
  outline: 2px solid var(--ark-indigo); outline-offset: 1px; border-color: var(--ark-indigo);
}
.ark-form input::placeholder { color: var(--ark-ink3); }

/* Флажок остаётся строкой: подпись у него справа, а не сверху */
.ark-form label:has(input[type=checkbox]),
.ark-form__check {
  flex-direction: row; align-items: center; gap: .45rem;
  height: 2.6rem; text-transform: none; letter-spacing: 0;
  font-size: .85rem; color: var(--ark-ink2);
}
.ark-form input[type=checkbox] {
  width: 1.05rem; height: 1.05rem; accent-color: var(--ark-brass); cursor: pointer;
}

.ark-form button, .ark-btn {
  font-family: var(--ark-ui); font-weight: 500; font-size: .93rem; line-height: 1;
  height: 2.6rem; padding: 0 1.5rem; box-sizing: border-box;
  border: 1px solid var(--ark-brass); border-radius: 0; cursor: pointer;
  background: var(--ark-brass); color: var(--ark-surface);
  transition: background .15s, border-color .15s; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.ark-form button:hover, .ark-btn:hover {
  background: var(--ark-indigo); border-color: var(--ark-indigo); color: var(--ark-surface);
}
.ark-form button:focus-visible, .ark-btn:focus-visible {
  outline: 2px solid var(--ark-indigo); outline-offset: 2px;
}
/* Второстепенная кнопка: тот же размер, но не тянет на себя внимание */
.ark-btn--ghost {
  background: transparent; color: var(--ark-indigo); border-color: var(--ark-line);
}
.ark-btn--ghost:hover { background: var(--ark-indigo); border-color: var(--ark-indigo); }

@media (max-width: 560px) {
  .ark-form { gap: .8rem; }
  .ark-form > label, .ark-field { width: 100%; }
  .ark-form select, .ark-form input { width: 100%; }
  .ark-form button { width: 100%; }
}

/* ── Результат расчёта — на белом полотне, чтобы отделялся от бумаги страницы */
.ark-result {
  background: var(--ark-surface); border: 1px solid var(--ark-line);
  padding: 1.5rem 1.6rem; margin: 1.8rem 0;
}
.ark-result > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ark-result > h2:first-child::before { display: none; }

/* ── Служебные блоки */
.ark-disclaimer, .ark-updated {
  font-family: var(--ark-ui); font-size: .8rem; color: var(--ark-ink3);
  border-left: 2px solid var(--ark-brass); padding-left: .9rem; margin-top: 2rem;
}
.ark-updated { border-left-color: var(--ark-line); }
.ark-hint { font-size: .93em; color: var(--ark-ink2); }
.ark-byline { font-family: var(--ark-ui); font-size: .82rem; }
.ark-related { font-size: .93em; }

/* ── Карточки разделов на главной */
.ark-services {
  border: 1px solid var(--ark-line); background: var(--ark-paper); gap: 0;
}
/* Линии рисуем на карточках, а не подложкой: при нечётном числе карточек
   подложка просвечивала пустой ячейкой и выглядела как дырка в вёрстке. */
.ark-service {
  background: var(--ark-surface); padding: 1.15rem 1.25rem;
  border-right: 1px solid var(--ark-line); border-bottom: 1px solid var(--ark-line);
}
.ark-service:hover, .ark-service:focus { background: #F7F7F4; }
.ark-service__title { font-weight: 600; color: var(--ark-indigo); }
.ark-service__desc { font-size: .88rem; color: var(--ark-ink2); }

/* ── Шапка и подвал */
header.wp-block-group .wp-block-site-title a {
  font-family: var(--ark-ui); font-weight: 500; font-size: 1.05rem;
  letter-spacing: .01em; color: var(--ark-ink); text-decoration: none;
}
header .wp-block-navigation, footer .wp-block-navigation {
  font-family: var(--ark-ui); font-size: .88rem;
}
header .wp-block-navigation a { color: var(--ark-ink2); text-decoration: none; }
header .wp-block-navigation a:hover { color: var(--ark-brass); }
footer.wp-block-group { border-top-color: var(--ark-line) !important; }
footer h3 { font-family: var(--ark-ui); font-size: .74rem !important; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ark-ink3); font-weight: 500; }
footer .wp-block-navigation a { color: var(--ark-ink2); text-decoration: none; font-size: .88rem; }
footer .wp-block-navigation a:hover { color: var(--ark-brass); }
footer p { font-size: .82rem; color: var(--ark-ink3); font-family: var(--ark-ui); }

@media (max-width: 640px) {
  .entry-content h2, .wp-block-post-content h2 { margin-top: 2em; }
  .ark-result { padding: 1.1rem 1rem; }
}

.wp-site-blocks > * + * { margin-block-start: 1.6rem; }
.wp-block-post-title { margin-top: 0; }
main > .wp-block-group[style*="padding-top"],
.wp-block-group.alignfull[style*="padding-top"] {
  padding-top: 1.9rem !important; padding-bottom: 1.9rem !important;
}
header.wp-block-group { padding-top: 1.3rem !important; padding-bottom: 1.3rem !important;
  border-bottom: 1px solid var(--ark-line); margin-bottom: 0; }
header.wp-block-group > .wp-block-group { gap: 1.6rem; }
footer.wp-block-group { margin-top: 4rem !important; padding-top: 2.6rem !important; }
.wp-block-post-content > *:first-child { margin-top: 0; }
/* ── Хлебные крошки. Служебная строка, а не элемент оформления: мелкий
      гротеск, разрядка, приглушённый цвет. Разделитель — латунный «›», тот же
      акцент, что у ромба над разделом и у маркеров списка. Строка идёт над h1
      и не имеет ни фона, ни рамки: в справочнике её задача — сказать, где вы,
      и уйти с глаз. */
.ark-crumbs { font-family: var(--ark-ui); font-size: .74rem; letter-spacing: .045em;
  color: var(--ark-ink3); margin: 0 0 .85rem; line-height: 1.5; }
.ark-crumbs ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .1rem; }
.ark-crumbs li { display: inline-flex; align-items: baseline; }
.ark-crumbs li + li::before { content: '›'; color: var(--ark-brass);
  margin: 0 .45em; font-size: .95em; }
.ark-crumbs a { color: var(--ark-ink3); text-decoration: none;
  border-bottom: 1px solid transparent; }
.ark-crumbs a:hover { color: var(--ark-indigo); border-bottom-color: var(--ark-line); }
.ark-crumbs [aria-current] { color: var(--ark-ink2); }

/* ── Оглавление. Две волосяные линейки сверху и снизу, как у таблицы, и ни
      одной рамки: в печатном справочнике содержание отбивают линейкой, а не
      коробкой. Номера латунные и табличные, чтобы двузначные не сдвигали текст.
      На широком экране в две колонки — восемь разделов одной колонкой уводят
      первый абзац статьи ниже сгиба. */
.ark-toc { margin: 2.4rem 0 2.2rem; padding: .9rem 0 1rem;
  border-top: 1px solid var(--ark-line); border-bottom: 1px solid var(--ark-line); }
.ark-toc__cap { display: block; font-family: var(--ark-ui); font-size: .7rem;
  font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ark-ink3); margin-bottom: .7rem; }
.ark-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc;
  columns: 2; column-gap: 2.2rem; font-family: var(--ark-ui); font-size: .88rem; }
.ark-toc li { counter-increment: toc; break-inside: avoid;
  padding: .22rem 0 .22rem 1.7rem; position: relative; line-height: 1.45; }
.ark-toc li::before { content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .3rem; font-size: .7rem;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--ark-brass); }
.ark-toc a { color: var(--ark-ink2); text-decoration: none; }
.ark-toc a:hover { color: var(--ark-indigo); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-color: var(--ark-line); }

/* Якорь не должен упираться в верхнюю кромку окна: заголовок раздела
   прижимается к ней вплотную и читается как обрезанный. */
.entry-content h2[id], .wp-block-post-content h2[id] { scroll-margin-top: 1.2rem; }

@media (max-width: 640px) {
  .ark-toc ol { columns: 1; }
  .ark-crumbs { font-size: .7rem; }
}