@charset "UTF-8";

/* ============================================================================
   Православный календарь — визуальная система.

   Наследует систему antontarasov.pro: бумага и чёрный, одна синяя волосяная,
   три шрифта, ноль скруглений, ноль теней, ноль пиктограмм. Дороговизна
   берётся из воздуха и масштаба, не из эффектов.

   Расширений против исходной системы ровно два, и оба вынужденные:

   1. ГРЕЧЕСКИЙ ШРИФТ. Prata, Golos и PT Mono греческих начертаний не имеют,
      а половина текста здесь по-гречески, причём политоническому (ἐν ἀρχῇ).
      Без своего начертания текст свалился бы в системный шрифт.

   2. КИНОВАРЬ В ТЁМНОЙ ТЕМЕ. Второй цвет системой запрещён, но здесь он не
      украшение: в служебниках заглавия печатаются киноварью со времён
      рукописей. Красным красятся только заглавия и служебный слой —
      корпусный текст остаётся бежевым.

   Mobile-first: если приём не работает на 390px, его здесь нет.
   ========================================================================= */

/* ── Шрифты, self-hosted ─────────────────────────────────────────────── */

@font-face { font-family: 'Prata'; src: url('/assets/fonts/prata-cyrillic.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Prata'; src: url('/assets/fonts/prata-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; }

@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-400-cyrillic.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-400-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-500-cyrillic.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-500-latin.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; }

@font-face { font-family: 'PT Mono'; src: url('/assets/fonts/pt-mono-cyrillic.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'PT Mono'; src: url('/assets/fonts/pt-mono-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; }

/* Греческий — GFS Didot, греческая дидона от Greek Font Society. Выбрана как
   прямой родственник Prata: тот же высокий контраст штриха и та же книжная
   интонация, поэтому два алфавита на одной странице не спорят.

   Диапазоны: U+0370-03FF монотоника И U+1F00-1FFF политоника. Второй
   обязателен: богослужебный греческий политоничен (ἐν ἀρχῇ ἦν ὁ Λόγος), и
   без этого диапазона придыхания и облечённые ударения выпали бы в квадраты. */
@font-face { font-family: 'GFS Didot'; src: url('/assets/fonts/gfs-didot-greek.woff2') format('woff2');
  font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF, U+2000-206F; }

/* Церковнославянский — Ponomar, шрифт проекта Ponomar под SIL OFL. Взят
   целиком, а не подмножеством с Google Fonts: в тех подмножествах нет ни
   варии, ни каморы, ни ерка, а без них надстрочные знаки рассыплются.

   Диапазона не объявляем намеренно. Церковнославянский набор идёт вперемешку
   с обычной кириллицей (У+0400—045F), с расширенной (У+0460—052F), с
   надстрочными (У+0483—0489, У+2DE0—2DFF) и с латинской пунктуацией; вырезать
   из этого диапазон значит однажды промахнуться. Шрифт ставится только там,
   где стоит класс `cu`, и потому лишним весом на прочих экранах не ложится. */
@font-face { font-family: 'Ponomar'; src: url('/assets/fonts/ponomar-cu.woff') format('woff');
  font-weight: 400; font-display: swap; }

/* ── Токены ───────────────────────────────────────────────────────────── */

:root {
  /* Светлая тема — каноническая бумага системы, без изменений. */
  --paper:      #F2F0EC;
  --paper-deep: #E6E3DC;
  --ink:        #1A1815;
  /* Темнее, чем в исходной системе (#77716A, 4.24:1). Там этим тоном набраны
     подписи, здесь — русский подстрочник Евангелия, то есть текст, который
     читают на службе в полутьме. 4.24 для этого мало, взято 4.84:1.     */
  --ink-soft:   #6E6861;
  /* Тон невыбранной метки переключателя. Отдельно от приглушённого:
     тот набран для чтения и потому светлее, а метка — это выбор, и
     читаться она обязана. */
  --ink-switch: #4A443E;
  --rubric:     #8E2B24;   /* киноварь на бумаге — темнее, чем на чёрном */
  --hairline:        rgba(26, 24, 21, .18);
  --hairline-aegean: rgba(44, 110, 155, .30);
  --aegean:     #2C6E9B;

  /* Три слоя текста. Prata начертание единственное: ни курсива, ни жирного
     у неё нет, и подделывать их нельзя.                                  */
  --display: 'Prata', Georgia, 'Times New Roman', serif;
  --speech:  'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --doc:     'PT Mono', ui-monospace, 'SFMono-Regular', monospace;
  --greek:   'GFS Didot', 'Times New Roman', serif;
  --slavonic:'Ponomar', 'Times New Roman', serif;

  /* ШКАЛА КЕГЛЯ. Семь ступеней, множитель на корне — регулировка действует
     разом на все экраны. Требование чтения на службе: телефон может быть
     на вытянутой руке, и «чуть крупнее» здесь не хватает.               */
  --scale: 1;

  --h-day:    calc(clamp(30px, 5.5vw, 52px) * var(--scale));  /* заглавие дня */
  --h-screen: calc(clamp(26px, 4.2vw, 40px) * var(--scale));  /* заглавие экрана */
  --t-lead:   calc(clamp(19px, 1.5vw, 24px) * var(--scale));
  --t-body:   calc(clamp(17px, 1.2vw, 20px) * var(--scale));
  --t-small:  calc(clamp(15px, 1.1vw, 17px) * var(--scale));

  /* Документный слой — три роли, как в исходной системе. */
  --doc-folio:   calc(13px * var(--scale)); --doc-folio-ls:   .16em;
  --doc-caption: calc(13px * var(--scale)); --doc-caption-ls: .02em;
  --doc-service: calc(12px * var(--scale)); --doc-service-ls: .10em;

  --pad:      clamp(18px, 4vw, 54px);
  --measure:  60ch;
  --section:  clamp(40px, 7vh, 84px);
  --top-line: clamp(24px, 4vh, 48px);
}

/* ТЁМНАЯ ТЕМА — РЕЖИМ ХРАМА. Не инверсия для любителей тёмного, а рабочее
   состояние: человек стоит на службе в полутьме, экран не должен слепить
   ни его, ни соседей.

   Киноварь взята заметно светлее книжной: красный на чёрном при низкой
   яркости экрана уходит в грязь, и книжный тон там просто не читается. */
/* Только корень. Без `:root` этот селектор цеплял и саму кнопку
   переключателя тем — у неё `data-theme="church"` стоит как данные, —
   и тёмная палитра применялась к одному слову внутри светлой темы:
   «В храме» набиралось светло-кремовым по светлой бумаге и пропадало. */
:root[data-theme="church"] {
  --paper:      #0C0B0A;
  --paper-deep: #000000;
  --ink:        #E8E0D0;
  --ink-soft:   rgba(232, 224, 208, .58);
  --ink-switch: rgba(232, 224, 208, .78);
  --rubric:     #C4483C;
  --hairline:        rgba(232, 224, 208, .16);
  --hairline-aegean: rgba(111, 176, 217, .28);
  --aegean:     #6FB0D9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]) {
    --paper: #0C0B0A; --paper-deep: #000000;
    --ink: #E8E0D0; --ink-soft: rgba(232, 224, 208, .58);
    --ink-switch: rgba(232, 224, 208, .78);
    --rubric: #C4483C;
    --hairline: rgba(232, 224, 208, .16);
    --hairline-aegean: rgba(111, 176, 217, .28);
    --aegean: #6FB0D9;
  }
}

/* ── Сброс ────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--pad) var(--section);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--speech);
  font-size: var(--t-body);
  line-height: 1.62;
  /* Тема меняется мгновенно: плавный переход цвета на весь экран читается
     как подвисание, а не как отклик.                                     */
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline-aegean);
  text-underline-offset: .2em;
}

/* ── Документный слой ─────────────────────────────────────────────────── */

.doc {
  font-family: var(--doc);
  font-size: var(--doc-caption);
  letter-spacing: var(--doc-caption-ls);
  line-height: 1.5;
}
.folio {
  font-family: var(--doc);
  font-size: var(--doc-folio);
  letter-spacing: var(--doc-folio-ls);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Верхняя строка экрана дня — плотнее общей разрядки. Она длиннее всех
   прочих колонтитулов: день недели, число, месяц и год через точки, — и
   при общей разрядке .16em ломалась надвое ровно над заглавием. Здесь
   разрядка втрое меньше, а вокруг разделителя стоят узкие пробелы.

   Переносить строке не запрещаем: на крупных ступенях кегля она всё равно
   не поместится, и пусть тогда переносится, а не вылезает за поле. */
.folio--day {
  letter-spacing: .05em;
}

.service {
  font-family: var(--doc);
  font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls);
  text-transform: uppercase;
}

.soft   { color: var(--ink-soft); }
.rubric { color: var(--rubric); }

.gr { font-family: var(--greek); }

/* Церковнославянский набирается плотнее обычного: надстрочные знаки берут
   высоту, и обычный интерлиньяж прижимает камору к строке сверху.       */
.cu {
  font-family: var(--slavonic);
  line-height: 1.75;
}

/* ── Верхняя линия издания ────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: var(--top-line);
  flex-wrap: wrap;
}
.top__rule {
  height: 1px;
  background: var(--hairline-aegean);
  margin: 12px 0 var(--section);
}

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

.switch { display: flex; gap: 18px; align-items: baseline; }

.switch button {
  position: relative;
  border: 0; padding: 0; margin: 0;
  background: none; cursor: pointer;
  /* Невыбранная метка — не подпись, а второй вариант выбора, и читаться
     она должна как выбор. Приглушённым тоном набран текст для чтения,
     он светлее, и на светлой теме «В храме» на нём почти пропадало. */
  color: var(--ink-switch);
  font-family: var(--doc);
  font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls);
  text-transform: uppercase;
}
.switch button[aria-current="true"] { color: var(--ink); }
.switch button[aria-current="true"]::before {
  content: '';
  position: absolute; left: 0; top: -7px;
  width: 14px; height: 1px;
  background: var(--aegean);
}
/* Палец должен попадать, но воздух между метками добавлять нельзя —
   расширяем зону касания, а не сам элемент.                            */
.switch button::after {
  content: '';
  position: absolute; left: -6px; right: -6px; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ── Экран дня ────────────────────────────────────────────────────────── */

.day__title {
  font-family: var(--display);
  font-size: var(--h-day);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 20ch;
  color: var(--rubric);
}
.day__subtitle {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: var(--t-lead);
  line-height: 1.35;
}

/* Строка поста. Одна строка, документным шрифтом — это справка, а не довод. */
.fast {
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  max-width: 52ch;
}
.fast__note { margin-top: 6px; color: var(--ink-soft); }

/* Список переходов. Волосяные ТОЛЬКО между пунктами: у n пунктов n−1 линий,
   иначе список превращается в таблицу.                                   */
.links { margin-top: clamp(30px, 5vh, 52px); }
.links li + li { border-top: 1px solid var(--hairline); }
.links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  text-decoration: none;
}
.links__label { font-size: var(--t-body); }
.links__meta  { color: var(--ink-soft); flex: none; }

/* Строка второй Церкви. Это не сноска и не примечание — это вторая половина
   смысла приложения, поэтому она стоит на своей волосяной и своим кеглем. */
.other {
  margin-top: clamp(34px, 6vh, 60px);
  padding-top: 16px;
  border-top: 1px solid var(--hairline-aegean);
}
.other__label { color: var(--ink-soft); }
.other__title { margin-top: 8px; max-width: 44ch; }

/* Икона — в конце, во всю ширину полосы набора. */
.icon-plate { margin-top: var(--section); }
.icon-plate img { display: block; width: 100%; height: auto; }
.icon-plate figcaption { margin-top: 10px; color: var(--ink-soft); }

/* ── Параллельный текст: греческий и русский ──────────────────────────
   Не две колонки: на 390px колонки нечитаемы. Чередование блоков, где
   различение идёт размером и весом, а не цветом и не рамкой.           */

.verse { padding: clamp(14px, 2.4vh, 22px) 0; max-width: 46ch; }
.verse + .verse { border-top: 1px solid var(--hairline); }
.verse__n {
  font-family: var(--doc); font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls);
  color: var(--rubric);
}
/* Ведущий язык и второй. Названы по роли, а не по языку: наверху стоит
   то греческий, то русский — смотря какую выдачу выбрал человек. Шрифт
   при этом идёт отдельным классом `gr`, потому что он свойство языка,
   а не роли.                                                          */
.verse__lead {
  margin-top: 6px;
  font-size: calc(var(--t-body) * 1.12);
  line-height: 1.5;
}
.verse__second {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* ── Служебное ────────────────────────────────────────────────────────── */

.screen { max-width: 68ch; }
.screen[hidden] { display: none; }

.section-title {
  font-family: var(--display);
  font-size: var(--h-screen);
  line-height: 1.1;
  color: var(--rubric);
  margin-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Происхождение чтения — вторая строка в документном слое. Рядовое чтение
   подвижного круга и чтение Минеи в один день выглядят одинаково, и без
   этой пометки не понять, которое из них читается сегодня в храме.      */
.links a { align-items: flex-start; }
.links__origin { display: block; margin-top: 2px; }

/* ── Экран чтения ─────────────────────────────────────────────────────── */

.back {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--ink-soft);
  text-decoration: none;
}
.reading__ref { margin: -8px 0 20px; }
/* Снап по стихам, чтобы палец не терял место при прокрутке в храме.
   proximity, а не mandatory: жёсткий снап мешает читать длинные стихи. */
.reading { scroll-snap-type: y proximity; }
.reading .verse { scroll-snap-align: start; }
.reading__note { margin-top: var(--section); max-width: 46ch; }
/* Смена книги внутри чтения — только в составных чтениях Страстной. */
/* Третий язык идёт последним и тем же тоном, что и русский: он такой же
   подстрочник, а не то, что читают в храме.                            */
.verse__cu {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.6;
}
.verse__cu.cu { line-height: 1.75; }

/* Переключатель языков и следующее за ним имя книги нельзя ставить
   вплотную: иначе «ОТ ЛУКИ» читается как ещё одна кнопка.             */
.reading__script { margin: 14px 0 0; }
.reading { margin-top: clamp(20px, 3vh, 30px); }

.verse__book { margin: var(--section) 0 4px; }
.reading .verse__book:first-child { margin-top: 0; }

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

.saints { margin-top: clamp(20px, 3vh, 30px); }
.saints__head { padding-bottom: 4px; }
.saints__list { margin-top: 6px; max-width: 46ch; }
.saints__list li + li { margin-top: 4px; }
.other__saints { margin-top: 8px; max-width: 46ch; color: var(--ink-soft); }
.other__saints li + li { margin-top: 3px; }

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

/* Переключатель письма стоит на самом экране, а не в верхней строке
   издания: он нужен одним тропарям. Отбивка снизу больше, чем сверху, —
   он относится к тому, что под ним.                                    */
.hymns__script { margin: 18px 0 0; }

.hymns__group { margin-top: var(--section); }
.hymns__group:first-of-type { margin-top: clamp(24px, 4vh, 40px); }
.hymns__head { padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.hymns__note { margin-top: 6px; }

.hymn { padding: clamp(14px, 2.4vh, 22px) 0; max-width: 46ch; }
.hymn + .hymn { border-top: 1px solid var(--hairline); }
.hymn__label { text-transform: none; letter-spacing: 0; }
/* Тот же строй, что и в чтении: греческий крупнее и основным тоном,
   второй язык мельче и приглушённым. Различение размером, не цветом. */
.hymn__gr {
  margin-top: 8px;
  font-family: var(--greek);
  font-size: calc(var(--t-body) * 1.12);
  line-height: 1.5;
}
.hymn__cu {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: var(--t-small);
}
/* В славянской книге, стоящей своим разделом, второго языка рядом нет:
   там церковнославянский — основной текст, а не подстрочник.           */
.hymn__cu-main {
  margin-top: 8px;
  font-size: calc(var(--t-body) * 1.08);
}

/* ── Месячная сетка ───────────────────────────────────────────────────
   Ни рамок, ни заливок, ни скруглений: числа документным шрифтом,
   волосяные только между неделями.                                     */

.month__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 26px;
}
.month__name {
  font-family: var(--display);
  font-size: var(--h-screen);
  line-height: 1.1;
  color: var(--rubric);
}
.month__step {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--doc-folio);
}
/* Невидимая зона касания в 44px — воздух между стрелками добавлять нельзя. */
.month__step::after {
  content: ''; position: absolute; inset: -14px -16px;
}

.grid__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.grid__week + .grid__week { border-top: 1px solid var(--hairline); }
.grid__week--head { border-top: 0; padding-bottom: 8px; }
.grid__week--head .grid__day { padding: 0 0 4px; color: var(--ink-soft); }

.grid__day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;                       /* палец, а не курсор */
  padding: 10px 0;
  font-family: var(--doc);
  font-size: var(--doc-caption);
  color: var(--ink);
  text-decoration: none;
}
.grid__day.is-outside  { color: var(--ink-soft); opacity: .45; }
.grid__day.is-fast     { color: var(--ink-soft); }
.grid__day.is-great    { color: var(--rubric); }
.grid__day.is-twelve   { color: var(--rubric); font-weight: 700; }

/* «Вы здесь» — тот же эгейский штрих, что и в переключателях. */
.grid__day.is-today::before {
  content: ''; position: absolute; top: 4px; left: 50%;
  width: 14px; height: 1px; margin-left: -7px;
  background: var(--aegean);
}
/* Избранное — волосяная под числом. */
.grid__day.is-favorite::after {
  content: ''; position: absolute; bottom: 6px; left: 50%;
  width: 10px; height: 1px; margin-left: -5px;
  background: var(--ink);
}

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.legend__item { position: relative; }
.legend__item.is-twelve { color: var(--rubric); }
.legend__item.is-great  { color: var(--rubric); opacity: .75; }
.legend__item.is-favorite::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--ink);
}

/* ── Поиск ────────────────────────────────────────────────────────────── */

.search__input {
  width: 100%;
  margin-bottom: 6px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0;                        /* Safari скругляет search по своей воле */
  background: none;
  color: var(--ink);
  font-family: var(--speech);
  font-size: var(--t-lead);
  -webkit-appearance: none;
}
.search__input:focus { outline: none; border-bottom-color: var(--aegean); }
.search__year { margin-bottom: var(--section); }

/* ── Общее ────────────────────────────────────────────────────────────── */

.section-sub { margin: var(--section) 0 6px; color: var(--ink-soft); }
.screen > .section-sub:first-of-type { margin-top: clamp(24px, 4vh, 40px); }

/* Верхняя навигация — документный слой, не панель. */
.nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.nav a { position: relative; color: var(--ink-soft); text-decoration: none;
         font-family: var(--doc); font-size: var(--doc-service);
         letter-spacing: var(--doc-service-ls); text-transform: uppercase; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a::after { content: ''; position: absolute; left: -6px; right: -6px;
                top: 50%; height: 44px; transform: translateY(-50%); }

/* Отметка «в избранном» на экране дня — документная помета, не пиктограмма. */
.mark-favorite {
  display: inline-block; margin-top: 20px;
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--doc); font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls); text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--hairline-aegean);
  text-underline-offset: .3em;
}
.mark-favorite[aria-pressed="true"] { color: var(--ink); }

/* Переход к соседнему дню. */
.day-step { display: flex; justify-content: space-between; gap: 16px;
            margin-top: var(--section); padding-top: 16px;
            border-top: 1px solid var(--hairline); }
.day-step a { color: var(--ink-soft); text-decoration: none;
              font-family: var(--doc); font-size: var(--doc-caption); }

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

.memorials {
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: 14px;
  border-top: 1px solid var(--hairline-aegean);
  max-width: 52ch;
}
.memorials__head { margin-bottom: 14px; }
.memorial + .memorial { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.memorial__title { font-size: var(--t-lead); line-height: 1.35; }
.memorial__alt   { margin-top: 4px; }
.memorial__place { margin-top: 6px; }
.memorial__note  { margin-top: 10px; color: var(--ink-soft); max-width: 46ch; }

/* В сетке особая память помечена эгейской волосяной под числом —
   в отличие от избранного, у которого волосяная чернильная. */
.grid__day.is-special::after {
  content: ''; position: absolute; bottom: 6px; left: 50%;
  width: 10px; height: 1px; margin-left: -5px;
  background: var(--aegean);
}
.legend__item.is-special::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--aegean);
}
/* Пометка о том, что дата уточнена по сети на этот год. */
.memorial__refined { margin-top: 8px; color: var(--rubric); }

/* Пронумерованные шаги — мононумерация на полях, волосяные между пунктами. */
.steps { display: grid; gap: 0; margin-top: 8px; counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 0 12px;
  padding: 14px 0; border-top: 1px solid var(--hairline);
  max-width: 52ch;
}
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--doc); font-size: var(--doc-service);
  color: var(--ink-soft); padding-top: .35em;
}

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

.rite__section { margin-top: var(--section); }
.rite__head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}

.rite__step { padding: clamp(10px, 1.8vh, 16px) 0; max-width: 46ch; }
.rite__step + .rite__step { border-top: 1px solid var(--hairline); }

/* Кто произносит — документным шрифтом киноварью, как колонтитул. */
.rite__who {
  font-size: var(--doc-service);
  letter-spacing: var(--doc-service-ls);
  text-transform: uppercase;
}

.rite__gr {
  margin-top: 6px;
  font-family: var(--greek);
  font-size: calc(var(--t-body) * 1.12);
  line-height: 1.5;
}
.rite__cu {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.5;
}
.rite__cu.cu { line-height: 1.75; }

/* Там, где греческой пары нет, славянский — не подстрочник, а сам текст,
   и набирается наравне с греческим. Иначе одинокая строка читалась бы
   как половина пары, у которой вторая половина не загрузилась.          */
.rite__cu-main {
  margin-top: 6px;
  font-size: calc(var(--t-body) * 1.08);
  line-height: 1.5;
}
.rite__cu-main.cu { line-height: 1.75; }

/* Шаг, у которого греческой стороны нет вовсе, отмечен втяжкой с
   волосяной: видно, что это добавление славянской книги, а не пропуск. */
.rite__step--cu {
  padding-left: 14px;
  border-left: 1px solid var(--hairline);
}

.rite__rubric { margin: 14px 0 4px; }
.rite__changed { margin-top: 6px; }

/* Тайные молитвы свёрнуты: в храме их не слышно. */
.rite__secret { margin: 10px 0; }
.rite__secret > summary {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--doc-service-ls);
  font-size: var(--doc-service);
}
.rite__secret[open] > summary { margin-bottom: 6px; }

/* Гнёзда изменяемых частей — тем же строем, что и ссылки на экране дня. */
.rite__slot { margin: 12px 0; }
.rite__slot a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 10px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.rite__slot-meta { color: var(--ink-soft); }
.rite__slot--wide { margin: 16px 0; }
.rite__proper + .rite__proper { margin-top: 10px; }
.rite__proper-label { text-transform: none; letter-spacing: 0; }

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

/* Строка одна и переносов не знает: разделов осталось три, «Избранное»
   ушло в меню. Второй ряд наверху съедал экран у самого текста. */
.top {
  display: flex; align-items: center; gap: 12px;
}
.top .nav { display: flex; gap: 14px; white-space: nowrap; margin-top: 0; flex-wrap: nowrap; }

/* Переключатель юрисдикции — одно слово. На нём написано не то, где мы
   сейчас, а то, куда попадёшь: надпись и есть обещание.                */
.top__jur {
  flex: none;
  font-family: var(--doc); font-size: var(--doc-folio);
  letter-spacing: var(--doc-folio-ls); text-transform: uppercase;
  color: var(--rubric); background: none; border: 0; padding: 6px 0;
  cursor: pointer;
}

.top .nav { flex: 1; min-width: 0; }

/* Три полоски. Рисуются разметкой, а не картинкой: иконок в проекте нет,
   а три линии — не иконка, а ровно три линии.                          */
.top__menu {
  flex: none; width: 30px; height: 30px; padding: 7px 4px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
}
.top__menu span {
  display: block; height: 1px; background: var(--ink);
}
.top__menu[aria-expanded="true"] span { background: var(--rubric); }

/* Снизу своей линейки у меню нет: её уже рисует общая линейка издания,
   и вторая рядом читалась бы как пустая строка. */
.menu {
  margin-top: 10px; padding: 14px 0 4px;
  border-top: 1px solid var(--hairline);
}
.menu[hidden] { display: none; }
.menu__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 8px 0;
}
.menu__label { color: var(--ink-soft); }
.menu__item {
  display: block; padding: 10px 0;
  border-top: 1px solid var(--hairline);
}

/* ── Именины ──────────────────────────────────────────────────────────
   Две стороны порознь и подписаны: русская выведена из святцев правилом
   и может быть неполна, греческая взята готовым списком.               */

.names { margin-top: var(--section); }
.names__head { padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.names__side { margin: 10px 0 4px; }
.names__list {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  list-style: none; padding: 0; margin: 0;
}

/* ── Нижний блок второй Церкви — теперь кнопка ────────────────────────
   Выглядит по-прежнему: ни рамки, ни заливки. Отличие одно — нажатие
   переводит выдачу, а не выделяет слово и не зовёт поиск.              */

/* Кнопка, а не блок, — но выглядеть обязана прежним блоком.
   `color` и `font` наследуются принудительно: браузер даёт кнопке свои
   собственные, и в тёмной теме это был чёрный текст на чёрном фоне —
   греческая строка второй Церкви пропадала целиком. */
.other {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--hairline);
  padding: var(--section) 0 0; cursor: pointer;
  color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.other__hint { margin-top: 8px; color: var(--rubric); }

/* Списки на странице «Как пользоваться»: без маркеров, волосяные между. */
.guide { list-style: none; padding: 0; margin: 10px 0 0; }
.guide li { padding: 10px 0; max-width: 46ch; }
.guide li + li { border-top: 1px solid var(--hairline); }

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

.note { margin-top: var(--section); }
.note > summary {
  cursor: pointer; padding: 8px 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::after { content: ' →'; color: var(--ink-soft); }
.note[open] > summary::after { content: ' ↓'; }
.note__body { max-width: 46ch; padding-bottom: 12px; }

/* Длинный список имён: первые видны, остальные по нажатию — тут же,
   вниз по странице, без ухода на другой экран. */
.names__more { margin-top: 6px; }
.names__more > summary {
  cursor: pointer; padding: 6px 0; list-style: none;
  color: var(--rubric);
}
.names__more > summary::-webkit-details-marker { display: none; }
.names__more > summary::after { content: ' ↓'; }
.names__more[open] > summary::after { content: ' ↑'; }

/* Возврат в конце чтения. Тот же вид, что и наверху, но с отбивкой сверху:
   он завершает текст, а не открывает его. */
.back--end { display: inline-block; margin-top: var(--section); }

/* Помета об источнике строки: сказано, когда славянский взят не из
   Служебника. Мельче самого текста и приглушённым — это сноска. */
.rite__src { margin-top: 4px; }

/* Чтения второй Церкви — одной строкой, приглушённо: это справка, а не
   то, за чем идут на службу. */
.other__readings { margin-top: 8px; color: var(--ink-soft); }