/* ============================================================
   Glaciora — общая дизайн-система для вторичных страниц
   Источник истины: canonical/visual_identity.md §4, §5
   ============================================================ */

/* Self-hosted шрифты (woff2, subset latin+cyrillic). РКН-устойчиво, не render-blocking. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300.47552fca1484.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400.3984c2dcff02.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500.6e4dd2580e7c.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-600.ab8fb94cf2d3.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic.3513a2b929f4.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-sc-400.9554694fa9d6.woff2") format('woff2');
}
@font-face {
  font-family: "Cormorant SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-sc-500.a1d4ff65393b.woff2") format('woff2');
}

:root {
  /* Глациальная семья — основной фон, вторичные surface'ы */
  --glacier-50:  #F2F5F8;
  --glacier-100: #E8EDF1;
  --glacier-200: #DBE1E6;   /* основной body background */
  --glacier-300: #CBD3D9;
  --glacier-400: #AFB8BF;

  /* Чернильная семья — текст, плотные состояния */
  --ink-900: #14171B;
  --ink-800: #232730;
  --ink-700: #353945;
  --ink-500: #525763;
  --ink-400: #6E737E;

  /* Каменная семья — бордеры, тихие разделители */
  --stone-100: #C5CCD2;
  --stone-200: #B8C0C6;
  --stone-300: #A6AEB6;

  /* Акцент — единственный, для focus / current / underline */
  --accent: #3F5D78;
  --accent-deep: #2F4A62;

  /* Бумажная семья — paper card, главный визуальный носитель Глациоры */
  --paper: #F2EFE6;
  --paper-edge: #D6CFB9;
  --paper-shadow: rgba(40, 36, 28, 0.08);
  --ink: #1E1B16;          /* текст НА paper (тёплее общего ink-900) */
  --ink-soft: #5A5446;     /* italic-метки на paper */
  --margin-note: #8B7F66;  /* corner labels, marginalia */

  /* Система карточек — тона из утверждённого макета card_system_mockup.html.
     Хайрлайны карточки темнее общего --paper-edge: «гравюрная таблица»
     требует более определённой линии, чем paper-card. */
  --card-fill: #EFEADD;        /* заливка карточки — чуть глубже paper */
  --card-edge: #C9C0A6;        /* основной хайрлайн: рамка, рубрики, засечка */
  --card-edge-soft: #D9D2BC;   /* внутренняя рамка «Таблицы» */
  --card-edge-faint: #DDD6C2;  /* нижний контактный край (box-shadow) */

  /* Тёмный passe-partout для соц-плитки (card_system §4.6, v1.1).
     Палитра выровнена с постером Таро (#2A2823) — все карточки в коллаже
     сидят в одном регистре «матированных гравюр». */
  --card-dark-fill:      #2A2823;
  --card-dark-edge:      #6F6757;
  --card-dark-edge-soft: #8C846C;
  --card-dark-label:     #DCD3BC;
  --card-dark-name:      #F1ECDD;
  --card-dark-sub:       #C8C0AA;

  /* Шрифт */
  --serif: "Cormorant Garamond", "Old Standard TT", Georgia, serif;
  --display-tracking: 0.24em;

  /* Контейнеры и пространство */
  --measure: 36rem;
  --measure-wide: 52rem;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--glacier-200);
  color: var(--ink-800);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink-800); color: var(--glacier-100); }

a {
  color: var(--ink-800);
  text-decoration: underline;
  text-decoration-color: var(--stone-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 240ms ease, color 240ms ease;
}
a:hover { text-decoration-color: var(--accent); color: var(--accent); }
p { margin: 0 0 1em; }

.shell {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.measure { max-width: var(--measure); margin-inline: auto; }
.measure-wide { max-width: var(--measure-wide); margin-inline: auto; }

/* ============================================================
   Nav — sticky pill, фиксированная сверху во всех вторичных
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.85rem 0;
  background: rgba(219, 225, 230, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone-200);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
}
.nav__menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu a {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--stone-300);
  transition: color 200ms ease;
}
.nav__menu a:hover,
.nav__menu a.is-current { color: var(--ink-700); }
.nav__cta {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--ink-700);
  color: var(--ink-700);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  transition: background 200ms ease, color 200ms ease;
}
.nav__cta:hover { background: var(--ink-800); color: var(--glacier-100); border-color: var(--ink-800); }
@media (max-width: 760px) {
  .nav__inner { flex-wrap: wrap; gap: 0.6rem 1rem; row-gap: 0.4rem; }
  .nav__brand { order: 1; }
  .nav__cta { order: 2; font-size: 0.72rem; padding: 0.3rem 0.7rem; letter-spacing: 0.06em; }
  .nav__menu-wrap { order: 3; width: 100%; }
  .nav__menu {
    justify-content: center;
    gap: 0.9rem; padding: 0.25rem 0 0;
  }
  .nav__menu a { font-size: 0.74rem; letter-spacing: 0.06em; }
}

/* ============================================================
   Page header (mini hero для вторичных)
   ============================================================ */
.page-head {
  padding: 6rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid var(--stone-200);
}
.page-head__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 1.25rem;
}
.page-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}
.page-head__lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 36rem;
  margin: 0 auto;
}

/* ============================================================
   Контентные секции
   ============================================================ */
section.block { padding: 5rem 0; }
section.block + section.block { border-top: 1px solid var(--stone-200); }
.block--alt { background: var(--glacier-100); }
.block__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.block__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  margin: 0 0 2rem;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  text-wrap: balance;
}

/* ============================================================
   Кнопки
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  background: transparent;
  color: var(--ink-800);
  border: 1px solid var(--ink-800);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 240ms ease, color 240ms ease;
  cursor: pointer;
}
.btn:hover {
  background: var(--ink-800);
  color: var(--glacier-100);
  text-decoration: none;
}

.cta-strip {
  background: var(--glacier-100);
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  padding: 5rem var(--gutter);
  text-align: center;
}
.cta-strip__text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink-900);
  font-style: italic;
  margin: 0 auto 2rem;
  max-width: 28rem;
}

/* ============================================================
   Глифы (см. visual_identity §6)
   ============================================================ */
.glyph {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--stone-300);
  line-height: 1;
  /* Принудительный text-rendering для опасных Unicode-глифов (♀ ♂ ♈-♓ ♃-♇).
     По visual_identity §6.2.1. Без этого macOS/iOS рендерит цветными эмодзи.
     Дополнительно в python const используется VS-15 (U+FE0E) — двойная защита. */
  font-variant-emoji: text;
}
.glyph--hex { font-size: 1.25em; }
.glyph--moon { font-size: 1.1em; }
.glyph--planet { font-size: 1.1em; }

/* Inline SVG-глифы (Glaciora-серия в `static/svg/glyphs/`, ТЗ svg_glyphs_tz.md).
   Размер привязан к font-size родителя.
   ВАЖНО: fill НЕ задаём на корневом svg.glyph — каждый SVG сам объявляет
   свои fill'ы через presentation attributes (`fill="none"` на корне +
   `fill="currentColor"` на заливных элементах). CSS-правило `fill` здесь
   перебило бы `fill="none"` и залило бы все кольца (баг 17.05.26). */
svg.glyph {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
/* SVG-глифы в окне карточки фигуры (.fig-card__figure) — currentColor
   наследуется от .fig-card__figure (var(--ink)). Размер задаётся
   контекстно в блоке системы карточек §6.2. */

svg.glyph--suit {
  width: 14px; height: 14px;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--glacier-200);
  padding: 0 0 3rem;
  font-size: 0.95rem;
  margin-top: 6rem;
}
.footer__rule {
  border: 0;
  border-top: 1px solid var(--stone-200);
  margin: 0 0 3rem;
}
.footer__col {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}
.footer__disclaimer {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0 auto 2.6rem;
  max-width: 38rem;
  text-wrap: pretty;
}
.footer__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}
.footer__channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  transition: color 200ms ease;
  text-decoration: none;
}
.footer__channel:hover { color: var(--accent); }
.footer__channel__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.footer__channel__icon--mask {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.footer__channel__icon--max {
  -webkit-mask-image: url("../icons/max-mask.d3f69404a3b6.png");
          mask-image: url("../icons/max-mask.d3f69404a3b6.png");
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1rem;
  font-size: 0.86rem;
  color: var(--stone-300);
  margin-bottom: 1.6rem;
  line-height: 1.9;
}
.footer__legal a {
  color: var(--stone-300);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer__legal a:hover { color: var(--accent); }
.footer__legal .sep { color: var(--stone-300); user-select: none; }
.footer__imprint {
  font-family: var(--serif);
  font-size: 0.72rem;
  color: var(--stone-300);
  margin: 0;
}
@media (max-width: 540px) {
  .footer__channels { gap: 1.2rem; }
  .footer__legal .sep:nth-of-type(even) { display: none; }
}

/* ============================================================
   Архивные карточки
   ============================================================ */
.archive-list {
  display: flex;
  flex-direction: column;
}
.archive-card {
  display: block;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--stone-200);
  text-decoration: none;
  color: inherit;
}
.archive-card:first-child { padding-top: 0; }
.archive-card__meta {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.archive-card__glyphs {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--stone-300);
  letter-spacing: 0;
  text-transform: none;
}
.archive-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.22;
  margin: 0 0 0.7rem;
  color: var(--ink-900);
  text-wrap: balance;
}
.archive-card__excerpt {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  max-width: 42rem;
}
.archive-card:hover .archive-card__title { color: var(--accent); }
.archive-card:hover { text-decoration: none; }

/* Архив — chrome списка (Sprint 5): заголовок тома, фильтр, пагинация,
   пустое состояние. Регистр «летописный том», не «лента» (visual §8.3). */
.archive-head {
  margin-bottom: 1.6rem;
}
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding-bottom: 1.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--stone-200);
}
.archive-filter a {
  color: var(--ink-400);
  text-decoration: none;
}
.archive-filter a:hover { color: var(--accent); }
.archive-filter a.is-current {
  color: var(--ink-900);
}
.archive-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--stone-200);
  color: var(--ink-400);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.archive-tabs a {
  color: var(--ink-400);
  text-decoration: none;
}
.archive-tabs a:hover { color: var(--accent); }
.archive-tabs a.is-current {
  color: var(--ink-900);
}
.archive-pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--stone-200);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.archive-pager a { color: var(--accent); text-decoration: none; }
.archive-pager a:hover { text-decoration: underline; }
.archive-pager .is-disabled { color: var(--stone-300); }
.archive-pager__count {
  color: var(--ink-400);
  letter-spacing: 0.14em;
}
.archive-empty {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink-700);
  margin: 2.6rem 0 0.8rem;
}
.archive-empty__link {
  font-size: 1.02rem;
  margin: 0;
}

/* ============================================================
   Long-form / публикация
   ============================================================ */
.longform {
  max-width: 36rem;
  margin: 0 auto;
}
.longform p {
  font-size: 1.18rem;
  line-height: 1.75;
  margin: 0 0 1.2em;
  color: var(--ink-800);
}
.longform p.lead {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink-900);
  margin-bottom: 1.6em;
}
.longform h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 2.5em 0 0.8em;
  color: var(--ink-900);
}
.longform em { font-style: italic; }
.longform .figure-name { font-style: italic; color: var(--ink-900); }
.longform hr.lit {
  border: 0;
  width: 3rem;
  border-top: 1px solid var(--stone-300);
  margin: 3rem auto;
}
.longform blockquote {
  border-left: 2px solid var(--stone-300);
  padding-left: 1.2rem;
  margin: 1.6em 0;
  color: var(--ink-700);
  font-style: italic;
}
.longform a {
  color: var(--ink-800);
  text-decoration: underline;
  text-decoration-color: var(--stone-300);
}
.longform a:hover { color: var(--accent); }

/* ============================================================
   Список тире
   ============================================================ */
.list-dashed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-dashed li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.85em;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-800);
}
.list-dashed li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--stone-300);
}

/* ============================================================
   App-surface'ы — auth, онбординг (Sprint 2/4/7 CSS-долг)
   Регистр: «страница, открытая на столе», не «форма входа».
   visual_identity §1.2 (холод, дистанция, воздух), §4 (палитра),
   §5 (антиква, увеличенный межстрочный). Функциональный минимум.
   ============================================================ */
.auth-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 0 6rem;
}
.auth-box {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}
.auth__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.auth__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.auth__lede {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 2rem;
}
/* Строка персоны на смешанных surface'ах (онбординг §3): курсив,
   чуть теплее по весу — голос §1, не голос продукта. */
.auth__lede--persona {
  font-style: italic;
  color: var(--ink-800);
}
.auth__below {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-500);
  margin: 2rem 0 0;
}

/* Форма — поля набираются той же антиквой, без «модерн»-инпутов */
.auth-form {
  margin: 0 0 1.5rem;
}
.auth-form__label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 1.4rem 0 0.5rem;
}
.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="date"],
.auth-form textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--glacier-100);
  border: 1px solid var(--stone-200);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.4rem;
}
.auth-form input:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-form textarea {
  resize: vertical;
  min-height: 7rem;
}
.auth-form button[type="submit"],
.auth-skip button[type="submit"] {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.75rem 1.8rem;
  background: transparent;
  color: var(--ink-800);
  border: 1px solid var(--ink-800);
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease;
}
.auth-form button[type="submit"]:hover,
.auth-skip button[type="submit"]:hover {
  background: var(--ink-800);
  color: var(--glacier-100);
}
.auth-form__error {
  font-size: 0.95rem;
  color: var(--accent-deep);
  margin: 0.4rem 0 0;
}
.auth-form__hint {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-400);
  margin: 0.5rem 0 0;
}
.auth-form__consent {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-400);
  margin: 1.2rem 0 0;
}
.auth-form__consent a { color: var(--ink-500); }

/* «Пропустить» в онбординге — тихая текстовая ссылка, не вторая
   кнопка-конкурент. Дистанция, не настойчивость (§1.2 п.7). */
.auth-skip {
  margin: 0;
}
.auth__skip {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--stone-300);
  text-decoration: underline;
  text-decoration-color: var(--stone-300);
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 200ms ease;
}
.auth__skip:hover { color: var(--accent); }

/* ============================================================
   Подписка — таблица тарифов (Sprint 6 CSS-долг)
   Нейтральная сравнительная таблица, не «pricing cards» с
   подсветкой «популярного». visual §9.1 (не tech-startup).
   ============================================================ */
.tier-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0 0;
  font-size: 1.02rem;
}
.tier-table th,
.tier-table td {
  text-align: left;
  vertical-align: top;
  padding: 1.2rem 1rem;
  border-top: 1px solid var(--stone-200);
}
.tier-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 500;
  border-top: 0;
}
.tier-table tbody th {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink-900);
  white-space: nowrap;
}
.tier-table tr.is-current th,
.tier-table tr.is-current td {
  background: var(--glacier-100);
}
.tier-table__mark {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 400;
}
.tier-table__features {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}
.tier-table__features li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.4em;
  line-height: 1.5;
  color: var(--ink-700);
}
.tier-table__features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--stone-300);
}

/* Mock-checkout — выбор тестового исхода (Sprint 6 CSS-долг) */
.checkout-outcomes {
  border: 1px solid var(--stone-200);
  padding: 1.2rem 1.3rem;
  margin: 1.6rem 0 0;
}
.checkout-outcomes legend {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0 0.5rem;
}
.checkout-outcomes__option {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 1.05rem;
  color: var(--ink-800);
}

/* Строка фигур в чтении — inline-перечисление под мета-строкой */
.list-dashed-inline {
  font-size: 1.05rem;
  color: var(--ink-700);
  margin: 0.4rem 0 0;
}

/* ============================================================
   Moon — единый SVG-набор фаз (определения в base.html)
   ============================================================ */
.moon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
  overflow: visible;
}

/* ============================================================
   App v2_4 — единый light-only слой для app.glaciora.com
   Namespace .app-* изолирует приложение от публичного сайта.
   ============================================================ */
.app-modal-open { overflow: hidden; }

/* App shell — flex column, чтобы mobile bottom-tabs работали как часть layout
   (а не floating). На desktop chrome просто sticky сверху. */
.app-surface {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--glacier-200);
  color: var(--ink-800);
}

.app-container {
  width: min(100% - 2rem, 84rem);
  margin-inline: auto;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(2.4rem, 5vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.app-main--center {
  display: grid;
  align-items: center;
  padding: 3rem 0;
}

.app-main--desk .app-container,
.app-main--reading .app-container {
  width: min(100% - 2rem, 48rem);
}

/* App v2_4 surface'ы (стол / чтение / архив / наблюдения) сами держат
   max-width — освобождаем .app-container от узкого ограничения. */
.app-main--surface .app-container {
  width: min(100% - 1.5rem, 100rem);
}

/* ============================================================
   APP CHROME — desktop top sticky (≥ 760px)
   Источник: /tmp/Glaciora_v2_desktop_clean.html .chrome
   ============================================================ */
.chrome {
  display: none; /* mobile-first: показываем только в media (min-width: 760px) */
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--glacier-200) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone-200);
  padding: 0.95rem 0;
}
.chrome__inner {
  max-width: 84rem; margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 2rem;
}
.chrome__brand {
  font-family: var(--serif); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ink-700); text-decoration: none;
  justify-self: start;
}
.chrome__nav {
  display: flex; align-items: center; gap: 0;
  justify-self: center;
}
.chrome__tab {
  background: transparent; border: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--stone-300);
  padding: 0.5rem 1.6rem;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.42rem;
  text-decoration: none;
  transition: color 200ms ease;
}
.chrome__tab:hover { color: var(--ink-700); }
.chrome__tab__marker {
  width: 4px; height: 4px; border-radius: 50%;
  background: transparent;
  position: absolute; top: -0.05rem; left: 50%; transform: translateX(-50%);
}
.chrome__tab.is-on,
.chrome__tab[aria-current="page"] { color: var(--ink-900); }
.chrome__tab.is-on .chrome__tab__marker,
.chrome__tab[aria-current="page"] .chrome__tab__marker { background: var(--ink-900); }
.chrome__sep {
  font-family: var(--serif); color: var(--stone-300);
  font-size: 0.6rem; user-select: none;
  align-self: center;
}
.chrome__meta {
  display: flex; align-items: center; gap: 1.2rem;
  justify-self: end;
  font-family: var(--serif);
}
.chrome__phase {
  background: transparent; border: 0;
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--margin-note); cursor: pointer;
  font-family: var(--serif);
}
.chrome__phase .glyph { font-size: 0.95rem; color: var(--ink-700); line-height: 1; }
.chrome__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--stone-300); background: var(--glacier-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 0.88rem; color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
}

/* ============================================================
   APP CHROME — mobile split pattern (< 760px)
   .lunar-strip (top) + .ga-tabs (bottom)
   Источник: /tmp/Glaciora_v2_4_mobile_clean.html
   ============================================================ */
.app-mobile-nav {
  display: contents; /* lunar-strip и ga-tabs прыгают на уровень .app-surface */
}

.lunar-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 1.1rem 0.55rem;
  background: transparent;
  flex-shrink: 0;
  font-family: var(--serif);
}
.lunar-strip__phase {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--margin-note);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.2rem 0;
  font-family: var(--serif);
}
.lunar-strip__phase .glyph { font-size: 0.92rem; color: var(--ink-700); line-height: 1; }
.lunar-strip__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--stone-300); background: var(--glacier-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 0.78rem; color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
}

.ga-tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(232, 237, 241, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--stone-200);
  display: flex; justify-content: center; gap: 0;
  padding: 0.7rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom));
}
.ga-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  padding: 0.55rem 1.4rem 0.45rem;
  border: 0; background: transparent;
  color: var(--stone-300); font-family: var(--serif);
  cursor: pointer; min-width: 0;
  position: relative;
  transition: color 200ms ease;
  flex: 0 0 auto;
  text-decoration: none;
}
.ga-tab__marker {
  width: 4px; height: 4px; border-radius: 50%;
  background: transparent;
  margin-bottom: 0.42rem;
  transition: background 200ms ease, transform 200ms ease;
}
.ga-tab__label {
  font-family: var(--serif); font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 200ms ease;
}
.ga-tab.is-on,
.ga-tab[aria-current="page"] { color: var(--ink-900); }
.ga-tab.is-on .ga-tab__marker,
.ga-tab[aria-current="page"] .ga-tab__marker { background: var(--ink-900); }
.ga-tab.is-on .ga-tab__label,
.ga-tab[aria-current="page"] .ga-tab__label { color: var(--ink-900); font-weight: 500; }
.ga-tab__sep {
  align-self: center;
  font-family: var(--serif); color: var(--stone-300);
  font-size: 0.55rem; letter-spacing: 0;
  padding: 0 0.1rem;
  user-select: none;
  margin-top: 0.42rem; /* align with label baseline (marker height + gap) */
}

.app-panel,
.app-auth,
.app-reading {
  background: rgba(232, 237, 241, 0.82);
  border: 1px solid rgba(184, 192, 198, 0.82);
  box-shadow: 0 18px 50px rgba(24, 27, 31, 0.07);
}

.app-auth,
.app-panel {
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.app-panel--manuscript,
.app-reading {
  background:
    linear-gradient(180deg, rgba(244, 246, 247, 0.92), rgba(232, 237, 241, 0.88));
}

.app-panel--narrow { max-width: 34rem; }
.app-panel--urgent { border-color: rgba(47, 74, 98, 0.36); }

.app-section { max-width: 64rem; margin-inline: auto; }
.app-section__head { margin-bottom: 1.4rem; }

.app-kicker,
.app-meta {
  margin: 0 0 0.85rem;
  color: var(--ink-400);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
}

.app-title {
  margin: 0 0 1.15rem;
  color: var(--ink-900);
  font-weight: 400;
  font-size: clamp(2.15rem, 5vw, 3.45rem);
  line-height: 1.08;
  text-wrap: balance;
}

.app-title--section {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.app-lede {
  max-width: 38rem;
  margin: 0 0 1.75rem;
  color: var(--ink-700);
  font-size: clamp(1.08rem, 2vw, 1.24rem);
  line-height: 1.62;
}

.app-lede--persona {
  color: var(--ink-800);
  font-style: italic;
}

.app-note,
.app-consent,
.app-muted,
.app-field__hint {
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.58;
}

.app-form {
  display: grid;
  gap: 0.9rem;
  margin: 1.4rem 0 0;
}

.app-field,
.app-question-form {
  display: grid;
  gap: 0.55rem;
}

.app-field__label {
  color: var(--ink-400);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-form input[type="email"],
.app-form input[type="text"],
.app-form input[type="date"],
.app-form textarea,
.app-textarea {
  width: 100%;
  border: 1px solid var(--stone-200);
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.55;
  padding: 0.82rem 0.95rem;
  border-radius: 0;
}

.app-form textarea,
.app-textarea {
  min-height: 10.5rem;
  resize: vertical;
}

.app-form input:focus,
.app-form textarea:focus,
.app-textarea:focus,
.app-button:focus-visible,
.app-text-link:focus-visible,
.app-link-button:focus-visible,
.chrome__tab:focus-visible,
.chrome__phase:focus-visible,
.chrome__avatar:focus-visible,
.lunar-strip__phase:focus-visible,
.lunar-strip__avatar:focus-visible,
.ga-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.app-form input:disabled,
.app-form textarea:disabled,
.app-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.app-field__error,
.app-alert--error {
  color: var(--accent-deep);
  font-size: 0.95rem;
  line-height: 1.5;
}

.app-alert {
  border-left: 2px solid var(--accent);
  padding: 0.55rem 0 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.32);
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 2.8rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--ink-800);
  background: transparent;
  color: var(--ink-800);
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.app-button:hover {
  background: var(--ink-800);
  color: var(--glacier-100);
  text-decoration: none;
}

.app-button--quiet {
  border-color: var(--stone-300);
  color: var(--ink-700);
}

.app-text-link {
  color: var(--accent-deep);
  text-decoration-color: rgba(63, 93, 120, 0.45);
}

.app-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-family: var(--serif);
  font-size: 0.96rem;
  text-decoration: underline;
  text-decoration-color: var(--stone-300);
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.app-rule {
  border: 0;
  border-top: 1px solid rgba(184, 192, 198, 0.82);
  margin: 2rem 0;
}

.app-figures {
  margin: -0.2rem 0 0;
  color: var(--ink-700);
  font-size: 1.08rem;
}

.app-reading {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.2rem);
}

.app-reading__body p {
  margin: 0 0 1.15em;
  color: var(--ink-800);
  font-size: clamp(1.12rem, 2vw, 1.28rem);
  line-height: 1.74;
}

.app-crisis-body {
  white-space: pre-line;
  color: var(--ink-900);
  font-size: clamp(1.14rem, 2.4vw, 1.38rem);
  line-height: 1.72;
}

.app-card {
  border: 1px solid rgba(184, 192, 198, 0.82);
  background: rgba(232, 237, 241, 0.74);
  padding: 1.25rem;
}

.reading-card__title,
.observation-card__title,
.app-tier-card__title,
.app-empty__title,
.app-modal__title {
  margin: 0 0 0.7rem;
  color: var(--ink-900);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.18;
}

.app-modal__moon {
  margin: 0 0 0.85rem;
  color: var(--accent-deep);
  font-size: 3.6rem;
  line-height: 1;
}

.reading-card__excerpt,
.observation-card__subtitle,
.app-empty__body {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.55;
}

.app-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.app-account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2rem;
}

.app-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
}

.app-tier-card.is-current {
  background: rgba(255, 255, 255, 0.46);
  border-color: rgba(63, 93, 120, 0.42);
}

.app-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.app-list li {
  position: relative;
  margin: 0 0 0.45rem;
  padding-left: 1.25em;
  color: var(--ink-700);
  line-height: 1.45;
}

.app-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--stone-300);
}

.app-choice-set {
  border: 1px solid var(--stone-200);
  margin: 0;
  padding: 1rem 1.1rem;
}

.app-choice-set legend {
  padding: 0 0.4rem;
  color: var(--ink-400);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-choice-set__option {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  color: var(--ink-800);
}

.app-empty {
  max-width: 34rem;
  margin-inline: auto;
  padding: 2rem;
  border: 1px dashed var(--stone-300);
  background: rgba(232, 237, 241, 0.52);
}

.app-modal[hidden] { display: none; }

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(24, 27, 31, 0.24);
}

.app-modal__card {
  position: relative;
  width: min(100%, 28rem);
  padding: 2rem;
  border: 1px solid rgba(184, 192, 198, 0.92);
  background: var(--glacier-100);
  box-shadow: 0 24px 70px rgba(24, 27, 31, 0.18);
}

.app-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--stone-200);
  background: transparent;
  color: var(--ink-700);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   APP v2_4 — Sprint B/C/D: Стол / Чтение / Архив / Наблюдения
   Источник: /tmp/Glaciora_v2_desktop_clean.html §197-717.
   Имена классов 1:1 с макетом. Все цвета через токены §3.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----- §6.1 СТОЛ (.stol-*) ----- */
.stol-page {
  min-height: calc(100vh - 4.5rem);
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center;
  padding: clamp(2.5rem, 9vh, 6rem) 1.5rem 5rem;
  gap: 2rem;
}
.stol-eyebrow {
  text-align: center; font-family: var(--serif);
  font-size: 0.68rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--margin-note); line-height: 1.6; margin: 0;
}
.stol-eyebrow .dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--stone-300); margin: 0 0.7em; vertical-align: 0.28em;
}
.stol-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 0 var(--paper-edge), 0 24px 60px -20px var(--paper-shadow);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 3.5vw, 2.5rem);
  width: 100%; max-width: 42rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.stol-card__corner {
  position: absolute; font-family: var(--serif);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--margin-note); margin: 0;
}
.stol-card__corner--tl { top: 1.1rem; left: 1.5rem; }
.stol-card__corner--tr {
  top: 1.1rem; right: 1.5rem;
  display: inline-flex; align-items: baseline; gap: 0.45em;
}
.stol-card__corner--tr .glyph { font-size: 0.92em; color: var(--margin-note); }
.stol-card__inscription {
  text-align: center; font-family: var(--serif); font-style: italic;
  font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft);
  margin: 0.4rem 0 0.5rem;
}
.stol-card__field {
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  padding: 1.6rem 0;
}
.stol-card__field textarea {
  width: 100%; border: 0; background: transparent;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.45; color: var(--ink); resize: none; outline: none; padding: 0;
  min-height: 4.5rem; max-height: 40vh; overflow-y: auto; caret-color: var(--accent);
}
.stol-card__field textarea::placeholder {
  color: color-mix(in oklab, var(--margin-note) 65%, transparent);
  font-style: italic;
}
.stol-card__field {
  transition: border-color 200ms;
}
.stol-card__field:focus-within {
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}
.stol-card__below {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap;
}
.stol-card__hint {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; margin: 0;
}
.stol-card__hint b { font-style: normal; font-weight: 500; color: var(--ink); }
.stol-card__bring {
  background: var(--ink); border: 1px solid var(--ink); color: var(--paper);
  font-family: var(--serif); font-size: 0.86rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.78rem 1.8rem; cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.stol-card__bring:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
/* Пока вопрос не набран — призрачная рамка; при вводе (≥6 знаков, снятие
   disabled через JS) кнопка наливается чернилами — явный сигнал готовности. */
.stol-card__bring:disabled {
  background: transparent; border-color: var(--paper-edge);
  color: var(--margin-note); cursor: not-allowed;
}
.stol-card__disclaimer {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5;
  text-align: center; margin: 0; padding-top: 0.4rem;
}
@media (max-width: 720px) {
  .stol-card { padding: 2.6rem 1.2rem 1.4rem; gap: 1.1rem; }
  .stol-card__corner { font-size: 0.58rem; letter-spacing: 0.2em; }
  .stol-card__corner--tl { top: 0.9rem; left: 1.1rem; }
  .stol-card__corner--tr { top: 0.9rem; right: 1.1rem; }
  .stol-card__inscription { font-size: 0.84rem; line-height: 1.5; }
  .stol-card__field { padding: 1.2rem 0; }
  .stol-card__field textarea { font-size: 1.02rem; min-height: 3.8rem; }
  .stol-card__hint { font-size: 0.78rem; text-align: center; }
  .stol-card__bring { width: 100%; font-size: 0.8rem; padding: 0.78rem 1rem; }
  .stol-card__below { justify-content: center; gap: 1rem; }
  .stol-card__disclaimer { font-size: 0.72rem; }
}
.stol-quota {
  text-align: center; font-family: var(--serif); font-style: italic;
  font-size: 0.86rem; color: var(--margin-note); margin: 0;
}
.stol-alert {
  text-align: center; font-family: var(--serif); font-style: italic;
  color: var(--accent-deep); font-size: 0.94rem; margin: 0;
}
.is-writing-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in oklab, var(--glacier-200) 88%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; color: var(--ink-soft);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease;
}
.is-writing-overlay.is-on { opacity: 1; pointer-events: auto; }

/* ----- §6.2 ЧТЕНИЕ (.reading-*, .page, .figs, .fig-card, .margin-note) ----- */
.reading-page { padding: 3rem 0 5rem; }
.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 46rem) minmax(0, 13rem);
  gap: 0 2rem;
  max-width: 76rem; margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.reading-lmargin {
  padding-top: 6rem; text-align: right;
  color: var(--margin-note); font-family: var(--serif);
  font-size: 0.82rem; letter-spacing: 0.14em;
}
.reading-lmargin time {
  display: block; text-transform: uppercase; margin-bottom: 0.4em;
}
.reading-lmargin .idx {
  font-style: italic; font-size: 0.96rem; letter-spacing: 0.02em;
  text-transform: none;
}

.page {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 0 var(--paper-edge), 0 30px 80px -30px var(--paper-shadow);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2.4rem, 4vw, 4rem) clamp(3rem, 4vw, 3.5rem);
  color: var(--ink);
}
.page__corner {
  position: absolute; font-family: var(--serif);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--margin-note); margin: 0;
}
.page__corner--tl {
  top: 1.4rem; left: 1.6rem;
  display: inline-flex; align-items: baseline; gap: 0.5em;
}
.page__corner--tl .glyph { font-size: 0.95em; color: var(--margin-note); }
.page__corner--tr {
  top: 1.4rem; right: 1.6rem; text-align: right; line-height: 1.6;
}
.page__corner--tr .pid {
  display: block; font-style: italic; text-transform: none; letter-spacing: 0.02em;
  font-size: 0.74rem;
}
/* Эпиграф над .page — sibling .reading-lmargin/.page. По умолчанию
   display:none (на широком viewport эпиграф виден только в .reading-rmargin).
   На узком (≤960px) показывается тут — в gray-зоне над paper-card; в
   rmargin тогда скрыт. */
.page__epigraph {
  display: none;
  max-width: 24rem; margin: 1.5rem auto 2rem;
  text-align: center; font-family: var(--serif);
  color: var(--margin-note);
}
.page__epigraph-head {
  display: block; font-style: normal;
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
  margin: 0 0 0.8rem;
}
.page__epigraph-body {
  font-style: italic; font-size: 0.98rem; line-height: 1.55;
  color: var(--ink-soft);
}
/* На мобиле sticky-навбар отъедает верх, а 3rem + эпиграф-margin
   оставляют большой «провал» над контентом — поджимаем. */
@media (max-width: 760px) {
  .notes-page .reading-page { padding-top: 1.25rem; }
  .notes-page .page__epigraph { margin-top: 0.25rem; }
}

.page__brought { margin-top: 1.5rem; margin-bottom: 2rem; text-align: center; }
.page__label {
  font-family: var(--serif); font-size: 0.72rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--margin-note); margin: 0 0 0.8rem;
}
.page__q {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45;
  color: var(--ink); max-width: 32rem; margin: 0 auto;
}
/* `.page--<kind>` на article — hook для per-type типографики (финальный
   design-gate решает интенсивность; сейчас единый сдержанный регистр). */
.page__rule { border: 0; border-top: 1px solid var(--paper-edge); margin: 2rem 0; }

/* Related-by-type — продолжение серии того же типа под публикацией. */
.notes-related {
  max-width: 34rem; margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--paper-edge);
}
.notes-related__head {
  font-family: var(--serif); font-size: 0.72rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--margin-note); margin: 0 0 1rem;
  text-align: center;
}
.notes-related__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.9rem; }
.notes-related__link {
  display: block; text-decoration: none; color: var(--ink);
  border-bottom: 1px dotted transparent; transition: border-color 0.15s;
}
.notes-related__link:hover { border-bottom-color: var(--paper-edge); }
.notes-related__title {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.35;
}
.notes-related__sub {
  display: block; font-size: 0.8rem; color: var(--margin-note);
  margin-top: 0.15rem;
}
.page__rule--narrow { width: 3rem; margin: 2rem auto; opacity: 0.5; }

/* ====================================================================
   СИСТЕМА КАРТОЧЕК v1.0 — компонент фигуры. Регистр «Таблица».
   Стандарт: ops/card_system.md · Референс: ops/card_system_mockup.html
   Архитектура «рамка + окно», три уровня (Полная / Врезка / Маркер).
   ==================================================================== */
.figs {
  display: flex;
  gap: 1rem; margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}

/* ---- §6.2.M multi-figure layouts (multi_system_synthesis ТЗ §2.9) ----
   1: одиночная карточка по центру.
   2: 2 карточки в ряд (desktop), стек на mobile.
   3: ведущая сверху на всю ширину; 2 резонансные снизу в ряд.
   4: 2×2 grid (Premium synthesis 4-fig).
   На mobile (<720px) все layouts — вертикальный стек, ведущая первой. */
.figs--n1 {
  justify-content: center;
}
.figs--n1 .fig-card--full {
  max-width: min(280px, 60%);
}
.figs--n2 .fig-card--full {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 200px;
}
.figs--n3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lead lead"
    "res1 res2";
}
.figs--n3 .fig-card--full:nth-child(1) { grid-area: lead; max-width: 60%; justify-self: center; }
.figs--n3 .fig-card--full:nth-child(2) { grid-area: res1; }
.figs--n3 .fig-card--full:nth-child(3) { grid-area: res2; }
.figs--n4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  /* mobile: всегда вертикальный стек, ведущая первой по DOM-порядку */
  .figs--n2, .figs--n3, .figs--n4 {
    display: flex;
    flex-direction: column;
  }
  .figs--n1 .fig-card--full,
  .figs--n3 .fig-card--full:nth-child(1) {
    max-width: 100%;
  }
}

/* ---- §6.2.L маркер ведущей фигуры (только в synthesis-режиме) ----
   Тонкая accent-полоса под carcrim ведущей. НЕ масштабирует карточку —
   не сбивает aspect-ratio постера и не ломает других тестов. */
.fig-card--leading {
  outline: 1px solid var(--card-edge);
  outline-offset: 2px;
}
.fig-card--leading::after {
  content: "ведущая";
  position: absolute;
  top: -0.6em; left: 50%;
  transform: translateX(-50%);
  background: var(--card-fill);
  padding: 0 0.4em;
  font-family: var(--serif);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink));
  z-index: 1;
  pointer-events: none;
}

/* --- Рамка: общий стиль, регистр «Таблица» --- */
.fig-card {
  position: relative;
  box-sizing: border-box;          /* aspect-ratio от border-box: одинаковая
                                      outer-высота при разном padding (postер vs interim) */
  flex: 1 1 0; min-width: 0;
  background: var(--card-fill);
  border: 1px solid var(--card-edge);
  border-radius: 5px;              /* малый радиус — природа карты, §8 */
  padding: 13px 12px;
  display: flex; flex-direction: column;
  font-family: var(--serif);
  color: var(--ink);
  cursor: default;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 0 var(--card-edge-faint);
}
/* двойная хайрлайн-рамка — признак «гравюрной таблицы» */
.fig-card::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid var(--card-edge-soft);
  border-radius: 3px;
  pointer-events: none;
}
/* Пропорция «Полной» — портретная ≈1:1.7 (стандарт §5), задаётся
   соотношением, не фиксированной высотой: карточка остаётся в макетной
   пропорции при любой ширине ячейки сетки. og-холст переопределяет
   явной высотой (card_image.html) — там aspect-ratio не действует. */
.fig-card--full { aspect-ratio: 188 / 312; }

/* --- Заголовок: ruled-полоска, система слева + номер справа --- */
.fig-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--card-edge);
  padding-bottom: 7px;
}
.fig-card__label {
  font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--margin-note);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fig-card__ord {
  font-size: 0.82rem; color: var(--ink-soft); font-style: italic;
  flex: 0 0 auto; padding-left: 8px;
}

/* --- Окно: фигура / диаграмма / пипы --- */
.fig-card__window {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
/* базовая засечка под фигурой — признак уровня «Полная» (стандарт §3/§4) */
.fig-card--full .fig-card__window::after {
  content: ""; width: 26px; height: 1px;
  background: var(--card-edge); margin-top: 14px;
}
.fig-card__figure {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 56px; line-height: 1;
}
.fig-card__figure svg.glyph { width: 1em; height: 1em; }
/* Существо знака зодиака (card_system v1.3) — крупнее символа-глифа: размер по
   высоте окна, ширина по пропорции рисунка; fill=currentColor → var(--ink). */
.fig-card__figure svg.zodiac-fig {
  width: auto; height: 1.18em; max-width: 1.7em;
}
/* Глиф в окне / маркере наследует цвет контекста — ink в окне, включая
   глиф аспекта сборной карты (карточка двухтональная по card_system v1.1
   §9: ни одного остров акцента внутри окна). Класс .glyph по умолчанию
   форсит общий --stone-300 (для marginalia); в карточке это перебивало бы
   регистр «Таблицы». */
.fig-card__figure .glyph,
.fig-marker .glyph { color: inherit; }
.fig-card__roman {
  font-size: 2.95rem; color: var(--ink); letter-spacing: 0.04em;
}

/* пипы Младшего аркана — набор символов масти */
.fig-card__pips {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 2px; max-width: 130px;
}
.fig-card__pips svg.glyph { width: 0.42em; height: 0.42em; }
.fig-card__pips[data-n="1"] svg.glyph,
.fig-card__pips[data-n="2"] svg.glyph,
.fig-card__pips[data-n="3"] svg.glyph { width: 0.6em; height: 0.6em; }
/* придворная карта — масть + знак ранга */
.fig-card__court {
  display: inline-flex; align-items: baseline; gap: 0.1em;
}
.fig-card__court svg.glyph { width: 0.8em; height: 0.8em; }
.fig-card__rank {
  font-size: 0.42em; color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* --- Подпись: имя + курсивный подзаголовок, ruled сверху --- */
.fig-card__caption {
  flex: 0 0 auto; text-align: center;
  border-top: 1px solid var(--card-edge);
  padding-top: 9px;
}
/* Имя/подпись селектируются через __caption — врезка лежит в потоке body,
   и `.page__body p` (0,1,1) иначе перебивал бы margin компонента. */
.fig-card__caption .fig-card__name {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.06rem; line-height: 1.2; color: var(--ink); margin: 0;
}
.fig-card__caption .fig-card__sub {
  font-family: var(--serif); font-style: italic; font-size: 0.78rem;
  color: var(--margin-note); margin: 0.2rem 0 0; line-height: 1.3;
}

/* --- Сборная карта — рисованная диаграмма (§6) --- */
.fig-comp { display: flex; align-items: center; }
.fig-comp__pt { font-size: 30px; display: inline-flex; }
.fig-comp__pt svg.glyph { width: 1em; height: 1em; }
.fig-comp__aspect {
  font-size: 21px; display: inline-flex;
  /* color наследуется от .fig-card__figure → var(--ink); карточка двухтональная
     по card_system v1.1 §9 — внутри окна нет «единственного акцента» */
}
.fig-comp__aspect svg.glyph { width: 1em; height: 1em; }
.fig-comp__line { width: 20px; height: 1px; background: var(--card-edge); }
.fig-card--full .fig-comp__pt { font-size: 38px; }

/* --- Уровень Врезка: float внутри абзаца, легче и теснее --- */
.fig-card--inline {
  float: right; flex: none;
  width: 138px;
  margin: 4px 0 12px 24px;
  padding: 10px 9px;
}
.fig-card--inline .fig-card__head { padding-bottom: 5px; }
.fig-card--inline .fig-card__label { font-size: 0.5rem; }
.fig-card--inline .fig-card__figure { font-size: 32px; }
.fig-card--inline .fig-card__roman { font-size: 1.8rem; }
.fig-card--inline .fig-card__caption { padding-top: 6px; }
.fig-card--inline .fig-card__name { font-size: 0.86rem; }
.fig-card--inline .fig-card__sub { font-size: 0.66rem; }
.fig-card--inline .fig-comp__pt { font-size: 23px; }
.fig-card--inline .fig-comp__line { width: 13px; }
.fig-card--inline .fig-comp__aspect { font-size: 14px; }
@media (max-width: 760px) {
  .fig-card--inline {
    float: none; width: auto; max-width: 240px; margin: 1rem auto;
  }
}

/* --- Тёмный passe-partout: для соц-плитки (card_image_row / _grid).
   Регистр «матированных гравюр» — рамка темнее постера Таро, окно
   остаётся paper-светлым (passe-partout). Применяется только в
   card_image.html через chrome='dark' (партиал fig_card.html).
   Стандарт — card_system.md §4.6 (v1.1, 2026-05-25). */
.fig-card--dark {
  background: var(--card-dark-fill);
  border-color: var(--card-dark-edge);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  color: var(--card-dark-name);
}
.fig-card--dark::before {
  border-color: var(--card-dark-edge-soft);
}
.fig-card--dark .fig-card__head {
  border-bottom-color: var(--card-dark-edge);
}
.fig-card--dark .fig-card__label { color: var(--card-dark-label); }
.fig-card--dark .fig-card__ord   { color: var(--card-dark-sub); }
.fig-card--dark .fig-card__caption {
  border-top-color: var(--card-dark-edge);
}
.fig-card--dark .fig-card__caption .fig-card__name { color: var(--card-dark-name); }
.fig-card--dark .fig-card__caption .fig-card__sub  { color: var(--card-dark-sub); }
/* Окно — paper-светлое (passe-partout) поверх тёмного хрома */
.fig-card--dark .fig-card__window {
  background: var(--card-fill);
  border-radius: 2px;
}
/* засечка под фигурой — светлее, на фоне paper-окна */
.fig-card--dark.fig-card--full .fig-card__window::after { background: var(--card-edge); }
/* SVG-глиф в окне читается ink на paper, как в светлой карточке */
.fig-card--dark .fig-card__figure { color: var(--ink); }
.fig-card--dark .fig-card__roman  { color: var(--ink); }

/* --- Карточка-ссылка --- */
a.fig-card,
a.fig-card:hover,
a.fig-card:visited,
a.fig-card--link,
a.fig-card--link:hover,
a.fig-card--link:visited {
  text-decoration: none; color: inherit; cursor: pointer;
}
a.fig-card:hover,
a.fig-card--link:hover,
button.fig-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--card-edge) 55%, var(--ink));
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.18);
}
a.fig-card:focus-visible,
a.fig-card--link:focus-visible,
button.fig-card:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}
button.fig-card { background: var(--card-fill); width: 100%; }

/* --- Уровень Маркер — знак в минимальной скруглённой рамке (§10) --- */
.fig-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.62em; height: 1.62em;
  border: 1px solid var(--card-edge); border-radius: 4px;
  background: var(--card-fill);
  vertical-align: -0.42em; margin: 0 0.08em;
  color: var(--ink); text-decoration: none;
}
a.fig-marker:hover {
  border-color: color-mix(in oklab, var(--card-edge) 55%, var(--ink));
}
a.fig-marker:focus-visible {
  outline: 2px solid var(--accent, currentColor); outline-offset: 2px;
}
.fig-marker svg.glyph { width: 0.92em; height: 0.92em; }
.fig-marker--comp { width: auto; padding: 0 0.32em; gap: 0.12em; }
.fig-marker--comp svg.glyph { width: 0.82em; height: 0.82em; }
.fig-marker__roman { font-size: 0.7em; letter-spacing: 0.04em; }

/* --- Карта Таро — формат-постер Б (§12). Образ на всю карту, текст
   поверх образа на скриме. Делит внешний .fig-card с карточкой (рамка,
   радиус, пропорция, размер ячейки сетки) — отличается наполнением. --- */
.fig-card--tarot {
  padding: 0;
  overflow: hidden;
  background: #2a2620;
  /* У постера нет потокового содержимого (образ и текст — absolute);
     пропорция задаётся явно на любом уровне, включая Врезку. */
  aspect-ratio: 188 / 312;
}
/* двойная рамка поверх образа — светлая, чтобы читалась на тёмной живописи */
.fig-card--tarot::before {
  border-color: rgba(232, 227, 210, 0.42);
  z-index: 3;
}
.fig-card__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  z-index: 0;
}
.fig-card__scrim {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
.fig-card__scrim--t {
  top: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(16,14,10,0.66), rgba(16,14,10,0));
}
.fig-card__scrim--b {
  bottom: 0; height: 44%;
  background: linear-gradient(to top, rgba(16,14,10,0.85), rgba(16,14,10,0));
}
.fig-card__ov-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5em; padding: 11px 13px;
}
.fig-card__ov-label {
  font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #E8E3D2; line-height: 1.3;
  /* перенос по слову — «МЛАДШИЙ АРКАН» в узкой ячейке ложится в две строки,
     а не обрезается; ord держится по baseline первой строки */
}
.fig-card__ov-ord {
  font-size: 0.78rem; font-style: italic; color: #A6BACB; flex: 0 0 auto;
}
.fig-card__ov-cap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  text-align: center; padding: 0 12px 13px;
}
.fig-card__ov-rule {
  display: block; width: 22px; height: 1px;
  background: rgba(232, 227, 210, 0.5); margin: 0 auto 0.36rem;
}
/* Через __ov-cap — постер-врезка в потоке body, иначе `.page__body p`
   (0,1,1) перебил бы margin подписи. */
.fig-card__ov-cap .fig-card__ov-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 1rem; line-height: 1.2; color: #F4F0E4; margin: 0;
}
.fig-card__ov-cap .fig-card__ov-sub {
  font-family: var(--serif); font-style: italic; font-size: 0.72rem;
  color: #C8C0AB; margin: 0.16rem 0 0; line-height: 1.3;
}
/* Врезка — постер у́же: подпись и рубрика мельче */
.fig-card--tarot.fig-card--inline .fig-card__ov-name { font-size: 0.82rem; }
.fig-card--tarot.fig-card--inline .fig-card__ov-sub { font-size: 0.62rem; }
.fig-card--tarot.fig-card--inline .fig-card__ov-label { font-size: 0.46rem; }

/* Глоссарий — карточка фигуры уровня «Полная» в заголовочной зоне (§11).
   Карточка той же анатомии, что в Наблюдениях; центрируется, портретная
   пропорция. Расширенные атрибуты (триграммы, astro-grid) остаются
   отдельными блоками страницы ниже. */
.term-head__card {
  display: flex; justify-content: center;
  margin: 0 auto 1.6rem;
  max-width: 200px;
}
.term-head__card .fig-card { flex: 1 1 auto; }

.page__body {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.78;
  color: var(--ink);
}
.page__body p { margin: 0 0 1.15em; }
.page__body p.lead { font-size: 1.3rem; line-height: 1.55; margin-bottom: 1.4em; }
.page__body em { font-style: italic; }
.page__body h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  line-height: 1.3; margin: 2.4em 0 0.6em; color: var(--ink);
}
.page__close {
  margin-top: 2rem; text-align: center; font-family: var(--serif);
  font-style: italic; color: var(--margin-note);
}
.page__pagenum {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.32em;
  color: var(--margin-note);
}

.reading-rmargin { padding-top: 6rem; }
.margin-note {
  font-family: var(--serif); font-style: italic;
  font-size: 0.92rem; line-height: 1.5; color: var(--margin-note);
  border-left: 1px solid var(--paper-edge);
  padding: 0.4rem 0 0.4rem 1rem;
  margin-bottom: 2rem;
}
.margin-note__head {
  font-style: normal; font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--margin-note);
  display: block; margin-bottom: 0.4rem; font-weight: 500;
}
.margin-note a { color: var(--margin-note); text-decoration-color: var(--paper-edge); cursor: pointer; }
.margin-note a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.reading-actions {
  max-width: 46rem; margin: 2.5rem auto 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.reading-actions__saved {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-500); font-size: 0.96rem; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.reading-actions__saved::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%; opacity: 0.8;
}
.reading-actions__new {
  background: transparent; border: 0;
  font-family: var(--serif); font-size: 0.84rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-700);
  border-bottom: 1px solid var(--stone-300); padding-bottom: 0.2em;
  cursor: pointer; text-decoration: none;
}
.reading-actions__new:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }

/* ----- §6.3 АРХИВ (.arch-*) ----- */
.arch-page { padding: 3rem 0 5rem; }
.arch-shell { max-width: 64rem; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }

.arch-letterhead { text-align: center; margin-bottom: 2.5rem; }
.arch-letterhead__sigil {
  font-family: var(--serif); font-size: 1.4rem; color: var(--stone-300);
  letter-spacing: 0.32em; margin: 0 0 0.9rem;
}
.arch-letterhead__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 3.4rem); line-height: 1.1;
  color: var(--ink-900); margin: 0 0 0.6rem;
}
.arch-letterhead__sub {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--ink-500); margin: 0;
}

.arch-tabs {
  display: flex; gap: 2rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--stone-200); margin-bottom: 1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.arch-tabs::-webkit-scrollbar { display: none; }
.arch-tab {
  font-family: var(--serif); font-size: 1rem;
  background: transparent; border: 0; color: var(--ink-500);
  padding: 0.6rem 0; white-space: nowrap;
  cursor: pointer; border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.arch-tab:hover { color: var(--ink-700); }
.arch-tab.is-on { color: var(--ink-900); border-bottom-color: var(--ink-900); }

.arch-list { padding: 0; }
.arch-entry {
  display: grid; grid-template-columns: 5rem 1fr auto;
  gap: 1.5rem; padding: 1.6rem 0;
  border-bottom: 1px solid var(--stone-200);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; cursor: pointer; font-family: var(--serif);
  transition: background 200ms;
  text-decoration: none; color: inherit;
}
.arch-entry:hover { background: var(--glacier-100); }
.arch-entry__date { padding-top: 0.15rem; }
.arch-entry__date .day {
  font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  color: var(--ink-900); display: block; line-height: 1;
}
.arch-entry__date .month {
  display: block; margin-top: 0.3rem;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-500);
}
.arch-entry__date .moon {
  display: block; font-size: 1rem; color: var(--stone-300); margin-top: 0.4rem;
}
.arch-entry__body { min-width: 0; }
.arch-entry__type {
  font-family: var(--serif); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-400, var(--ink-500)); margin: 0 0 0.3rem;
}
.arch-entry__title {
  font-family: var(--serif); font-weight: 500; font-size: 1.22rem;
  line-height: 1.22; color: var(--ink-900); margin: 0 0 0.4rem;
}
.arch-entry:hover .arch-entry__title { color: var(--accent); }
.arch-entry__excerpt {
  font-family: var(--serif); font-style: italic; font-size: 0.96rem;
  color: var(--ink-500); line-height: 1.5; margin: 0; max-width: 42rem;
}
.arch-entry__glyphs {
  font-family: var(--serif); color: var(--stone-300);
  font-size: 1rem; letter-spacing: 0.2em; padding-top: 0.4rem;
  text-align: right;
}
.arch-entry__return {
  display: inline-block; margin-top: 0.4rem;
  font-family: var(--serif); font-style: italic; font-size: 0.78rem;
  color: var(--margin-note); border-left: 1px solid var(--paper-edge);
  padding-left: 0.6rem;
}
.arch-figs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.arch-fig {
  position: relative;
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 1.6rem 0.8rem 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  cursor: pointer; transition: transform 200ms;
  font-family: var(--serif);
  text-decoration: none; color: inherit;
}
.arch-fig:hover { transform: translateY(-2px); }
.arch-fig__count {
  position: absolute; top: 0.5rem; right: 0.7rem;
  font-size: 0.68rem; color: var(--ink-soft); font-style: italic;
}
.arch-fig__art {
  width: 100%; aspect-ratio: 5/7;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); margin-bottom: 0.55rem;
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
}
.arch-fig__art svg.glyph { width: 1.4em; height: 1.4em; }
.arch-fig__name {
  font-family: var(--serif); font-weight: 500; font-size: 0.96rem;
  color: var(--ink); margin: 0;
}
.arch-fig__last {
  font-family: var(--serif); font-style: italic; font-size: 0.72rem;
  color: var(--margin-note); margin: 0.2rem 0 0;
}
.arch-themes { padding: 0; }
.arch-theme {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.2rem 0; border-bottom: 1px solid var(--stone-200);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; cursor: pointer; font-family: var(--serif);
  text-decoration: none; color: inherit;
}
.arch-theme:hover { background: var(--glacier-100); }
.arch-theme__name { font-size: 1.2rem; color: var(--ink-900); }
.arch-theme__count { font-style: italic; font-size: 0.92rem; color: var(--ink-500); }
.arch-empty {
  text-align: center; font-family: var(--serif); font-style: italic;
  color: var(--ink-500); padding: 2rem 0;
}

/* ----- §6.4 НАБЛЮДЕНИЯ (.feed-*) ----- */
.feed-page { padding: 3rem 0 5rem; }
.feed-shell { max-width: 64rem; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }

.feed-head { text-align: center; margin-bottom: 2.5rem; }
.feed-head__sigil {
  font-family: var(--serif); font-size: 1.4rem; color: var(--stone-300);
  letter-spacing: 0.32em; margin: 0 0 0.9rem;
}
.feed-head__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 3.4rem); line-height: 1.1;
  color: var(--ink-900); margin: 0 0 0.6rem;
}
.feed-head__sub {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--ink-500); margin: 0 auto; max-width: 30rem; line-height: 1.5;
}

/* Та же геометрия, что .reading-layout — чтобы featured-card на /notes/
   и paper-card на /notes/<slug>/ имели одинаковую ширину (визуальная
   непрерывность при переходе). */
.feed-featured-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 46rem) minmax(0, 13rem);
  gap: 0 2rem;
  max-width: 76rem; margin: 0 auto 2.5rem;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.feed-featured-lmargin {
  padding-top: 1.5rem; text-align: right;
  color: var(--margin-note); font-family: var(--serif);
  font-size: 0.82rem; letter-spacing: 0.14em;
}
.feed-featured-lmargin time {
  display: block; text-transform: uppercase; margin-bottom: 0.4em;
}
.feed-featured-lmargin .idx {
  font-style: italic; font-size: 0.96rem; letter-spacing: 0.02em;
  text-transform: none;
}
.feed-featured-rmargin { padding-top: 1.5rem; }
.feed-featured-rmargin:empty { display: none; }
@media (max-width: 880px) {
  .feed-featured-row { grid-template-columns: 1fr; gap: 1rem; }
  /* min-width: 0 — иначе grid-трек растягивается под min-content карточки
     (нескладывающиеся фигуры-маркеры) и распирает строку за вьюпорт. */
  .feed-featured-row > * { min-width: 0; }
  /* Дата/№ дублируют дату в eyebrow карточки — на мобиле прячем. */
  .feed-featured-lmargin { display: none; }
  .feed-featured-rmargin { padding-top: 0; }
}

.feed-featured {
  display: block; width: 100%;
  background: var(--paper); border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 0 var(--paper-edge), 0 18px 44px -16px var(--paper-shadow);
  padding: 2.2rem 2.4rem 2rem; cursor: pointer; text-align: left;
  font-family: var(--serif);
  text-decoration: none; color: inherit;
}
.feed-featured__eyebrow {
  display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--margin-note); margin: 0 0 1rem;
}
.feed-featured__eyebrow .glyph { font-size: 0.92em; }
.feed-featured__kind {
  color: var(--ink-700); font-weight: 500;
}
.feed-featured__time {
  font-style: italic; letter-spacing: 0; text-transform: none;
  font-size: 0.96em;
}
.feed-featured__title {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.7rem, 2.4vw, 2rem); line-height: 1.18;
  color: var(--ink); margin: 0 0 0.5rem;
}
.feed-featured__sub {
  font-family: var(--serif); font-size: 1rem; line-height: 1.5;
  color: var(--margin-note); margin: 0 0 1.1rem;
}
.feed-featured__glyphs {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: flex-start;
  font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: var(--ink); margin: 0.6rem 0 1.1rem;
}
.feed-featured__glyph { display: inline-flex; align-items: center; }
.feed-featured__excerpt {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0; max-width: 36rem;
}
.feed-featured__more {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  color: var(--ink-700); letter-spacing: 0.02em;
}
.feed-featured:hover .feed-featured__more { color: var(--ink-900); }
.feed-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.1rem 0 0; }
.feed-tag {
  font-family: var(--serif); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--margin-note); padding: 0.22rem 0.65rem;
  border: 1px solid var(--paper-edge); background: transparent;
  white-space: nowrap;
}
.feed-entry .feed-tag { border-color: var(--stone-200); color: var(--ink-500); }

.feed-filters {
  display: flex; gap: 1.2rem;
  padding: 0.8rem 0 0.6rem;
  border-bottom: 1px solid var(--stone-200);
  margin-bottom: 0.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.feed-filters::-webkit-scrollbar { display: none; }
.feed-filter {
  background: transparent; border: 0;
  font-family: var(--serif); font-size: 0.95rem;
  color: var(--ink-500); padding: 0.5rem 0;
  display: inline-flex; align-items: baseline; gap: 0.4em;
  cursor: pointer; border-bottom: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.feed-filter:hover { color: var(--ink-700); }
.feed-filter__n { font-style: italic; font-size: 0.78em; color: var(--margin-note); }
.feed-filter.is-on { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.feed-filter.is-empty {
  color: var(--stone-300); cursor: default; pointer-events: none;
}
.feed-filter.is-empty .feed-filter__n { color: var(--stone-300); }

.feed-list { padding: 0; }
.feed-entry {
  display: grid; grid-template-columns: 5rem 1fr;
  gap: 1.5rem; padding: 1.8rem 0;
  border-bottom: 1px solid var(--stone-200);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; cursor: pointer; font-family: var(--serif);
  text-decoration: none; color: inherit;
}
.feed-entry:hover { background: var(--glacier-100); }
.feed-entry__date { padding-top: 0.15rem; }
.feed-entry__day {
  font-family: var(--serif); font-size: 1rem; color: var(--ink-900);
  display: block; letter-spacing: 0.02em; line-height: 1;
}
.feed-entry__moon {
  display: block; font-family: var(--serif);
  font-size: 1.1rem; color: var(--stone-300); margin-top: 0.5rem;
}
.feed-entry__type {
  font-family: var(--serif); font-size: 0.68rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-400, var(--ink-500)); margin: 0 0 0.4rem;
}
.feed-entry__time {
  font-style: italic; letter-spacing: 0; text-transform: none;
  font-size: 1.05em; color: var(--margin-note);
}
.feed-entry__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.32rem; line-height: 1.2; color: var(--ink-900); margin: 0 0 0.5rem;
}
.feed-entry__excerpt {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--ink-500); line-height: 1.5; margin: 0; max-width: 42rem;
}
.feed-foot {
  text-align: center; margin-top: 2rem;
  font-family: var(--serif); font-style: italic; font-size: 0.94rem;
  color: var(--margin-note);
}

/* Responsive — single col на mobile */
@media (max-width: 960px) {
  .reading-layout { grid-template-columns: 1fr; gap: 0; }
  /* Дата/№ дублируют угол карточки (.page__corner--tr) — на мобиле прячем,
     чтобы не отъедать пол-экрана серым полем над paper-card. */
  .reading-lmargin { display: none; }
  .reading-rmargin { padding-top: 0; }
  .margin-note { margin-top: 2rem; }
  /* На узком rmargin схлопывается вниз — эпиграф уходит туда же и
     теряет смысл «перед текстом». Поэтому в rmargin прячем, а внутри
     .page показываем выше .page__brought. */
  .page__epigraph { display: block; }
  .reading-rmargin .margin-note--epigraph { display: none; }
}

@media (max-width: 720px) {
  .arch-entry { grid-template-columns: 3.6rem 1fr; gap: 1rem; }
  .arch-entry__glyphs { grid-column: 2; text-align: left; padding-top: 0.4rem; }
  /* Узкая дата-колонка + min-width:0, иначе текстовая колонка не сжимается
     ниже своего min-content и распирает строку на узких экранах (<385px). */
  .feed-entry { grid-template-columns: 3.4rem 1fr; gap: 1rem; }
  .feed-entry > * { min-width: 0; }
  /* Карточки фигур: на узком — 2-col flex-wrap. Реверс сетки десктоп↔
     мобайл (4 кол → 2×2) — один уровень, перестраивается только сетка. */
  .figs { gap: 0.5rem; }
  .fig-card {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
  /* Пропорция держится aspect-ratio с базового правила — высоту не фиксируем. */
  .fig-card__figure { font-size: 44px; }
  .fig-card__roman { font-size: 2.2rem; }
}

/* Safety-net против горизонтального overflow на узких viewport — если
   какой-то длинный элемент попытается распереть страницу, скроем
   горизонтальный скролл. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ============================================================
   Chrome viewport switch — оба блока всегда в DOM, переключение через media
   ============================================================ */
@media (min-width: 760px) {
  .chrome { display: block; }
  .lunar-strip,
  .ga-tabs { display: none; }
}

/* Узкая desktop-полоса 760–919px: desktop-chrome уже включён, но при
   полных gap/padding/letter-spacing его min-content шире вьюпорта и
   meta (фаза/аватар/«Войти») уезжает за край. Компактим только chrome,
   не трогая архитектурный mobile-breakpoint (760). */
@media (min-width: 760px) and (max-width: 919.98px) {
  .chrome { padding: 0.7rem 0; }
  .chrome__inner { gap: 0.8rem; padding: 0 1rem; }
  .chrome__brand { font-size: 0.7rem; letter-spacing: 0.18em; }
  .chrome__tab { padding: 0.5rem 0.7rem; font-size: 0.66rem; letter-spacing: 0.12em; }
  .chrome__phase { font-size: 0.64rem; letter-spacing: 0.08em; gap: 0.3em; }
  .chrome__meta { gap: 0.6rem; }
}

@media (max-width: 759.98px) {
  .app-container {
    width: min(100% - 1.1rem, 42rem);
  }

  .app-main {
    padding: 0.4rem 0 calc(4.4rem + env(safe-area-inset-bottom));
  }

  .app-main--center {
    align-items: start;
    padding-top: 2rem;
  }

  .app-tier-grid {
    grid-template-columns: 1fr;
  }

  .app-auth,
  .app-panel,
  .app-reading {
    padding: 1.25rem;
  }

  .app-title {
    font-size: clamp(2rem, 11vw, 2.7rem);
  }

  .app-button {
    width: 100%;
  }
}


/* ============================================================
   Sprint E+F+G — auth / onboarding / crisis / refusal / paywall / modals
   §6.5–§6.9 + §10 ТЗ app_v2_4_redesign_tz.md
   ============================================================ */

/* --- Wax seal monogram (переиспользуется в auth-frame, profile, paywall) --- */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--seal-size, 2.6rem); height: var(--seal-size, 2.6rem);
  border-radius: 50%; background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--serif); font-weight: 400;
  font-size: calc(var(--seal-size, 2.6rem) * 0.42);
  color: var(--ink); position: relative; flex-shrink: 0;
  box-shadow: 0 2px 6px -1px var(--paper-shadow);
}
.seal::after {
  content: ""; position: absolute;
  inset: calc(var(--seal-size, 2.6rem) * 0.1);
  border: 1px solid var(--ink-soft); border-radius: 50%; opacity: 0.4;
  pointer-events: none;
}
.seal--sm { --seal-size: 1.8rem; }
.seal--md { --seal-size: 2.6rem; }
.seal--lg { --seal-size: 3.4rem; }

/* --- §6.5 Auth frame (signup / login / sent / invalid) --- */
.auth-frame {
  max-width: 38rem; width: 100%;
  margin: 0 auto;
  padding: 2rem 1.4rem 2.4rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  text-align: left;
}
.auth-frame__sigil {
  display: flex; justify-content: center;
  margin-bottom: 0.4rem;
}
.auth-frame__eyebrow {
  font-family: var(--serif); font-size: 0.7rem;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--stone-300); margin: 0;
  text-align: center;
}
.auth-frame__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1.15; color: var(--ink-900);
  margin: 0; text-align: center;
}
.auth-frame__lede {
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; line-height: 1.55;
  color: var(--ink-500); margin: 0 auto;
  max-width: 32rem; text-align: center;
}
.auth-frame__form {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: 0.6rem;
  padding: 1.4rem 0; border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
}
.auth-frame__field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-frame__label {
  font-family: var(--serif); font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-400);
}
.auth-frame__form input[type="email"],
.auth-frame__form input[type="text"] {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--stone-300);
  background: transparent; padding: 0.6rem 0;
  font-family: var(--serif); font-size: 1.18rem;
  color: var(--ink-900); border-radius: 0;
}
.auth-frame__form input[type="email"]:focus,
.auth-frame__form input[type="text"]:focus {
  outline: none; border-bottom-color: var(--ink-800);
}
.auth-frame__error {
  margin: 0; font-family: var(--serif); font-style: italic;
  color: var(--accent-deep); font-size: 0.92rem;
}
.auth-frame__submit {
  align-self: flex-start;
  background: transparent; border: 1px solid var(--ink-800);
  color: var(--ink-800); font-family: var(--serif);
  font-size: 0.9rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.75rem 1.8rem;
  cursor: pointer;
}
.auth-frame__submit:hover { background: var(--ink-800); color: var(--glacier-100); }
.auth-frame__submit:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.auth-frame__consent {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 0.82rem; color: var(--margin-note); line-height: 1.5;
}
.auth-frame__consent a { color: var(--ink-700); }
.auth-frame__note {
  font-family: var(--serif); font-style: italic;
  font-size: 0.92rem; color: var(--ink-500);
  text-align: center; margin: 0.6rem 0 0;
}
.auth-frame__textlink {
  font-family: var(--serif); font-size: 0.9rem;
  color: var(--ink-700);
  border-bottom: 1px solid var(--stone-300);
  padding-bottom: 0.1rem;
}
.auth-frame__textlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- §6.6 Onboarding (3 шага, full-screen takeover) --- */
.onb-stage {
  position: fixed; inset: 0; z-index: 90;
  background: var(--glacier-200);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.2rem;
  overflow-y: auto;
}
.onb-frame {
  max-width: 38rem; width: 100%;
  display: flex; flex-direction: column; gap: 1.4rem;
  margin: auto;
}
.onb-steps {
  display: flex; justify-content: center; gap: 0.8rem;
}
.onb-step {
  width: 26px; height: 1px; background: var(--stone-300);
  display: inline-block;
}
.onb-step.is-on { background: var(--ink-800); }
.onb-head { text-align: center; }
.onb-eyebrow {
  font-family: var(--serif); font-size: 0.7rem;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--stone-300); margin: 0 0 1.1rem;
}
.onb-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.15;
  color: var(--ink-900); margin: 0 auto 1rem;
  max-width: 26rem;
}
.onb-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: var(--ink-500);
  max-width: 30rem; margin: 0 auto; line-height: 1.55;
}
.onb-rules {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.85rem;
  counter-reset: rule;
}
.onb-rules li {
  font-family: var(--serif); font-size: 1.02rem;
  color: var(--ink-800); padding-left: 2.4rem;
  position: relative; line-height: 1.5;
}
.onb-rules li::before {
  counter-increment: rule;
  content: counter(rule, decimal-leading-zero);
  position: absolute; left: 0; top: 0.18rem;
  font-family: var(--serif); font-size: 0.74rem;
  letter-spacing: 0.18em; color: var(--stone-300);
}
.onb-sample {
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 2rem 2rem 1.6rem; position: relative;
  box-shadow: 0 14px 32px -12px var(--paper-shadow);
  font-family: var(--serif);
}
.onb-sample__card {
  display: flex; justify-content: center;
  margin: 0.2rem 0 1.2rem;
}
.onb-sample__card .fig-card {
  flex: 0 0 auto; width: clamp(9rem, 42%, 11.5rem);
}
.onb-sample__label {
  position: absolute; top: -0.55rem; left: 1.4rem;
  background: var(--glacier-200);
  font-size: 0.6rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--margin-note);
  padding: 0 0.5rem;
}
.onb-sample p { margin: 0 0 0.7em; color: var(--ink); line-height: 1.6; }
.onb-sample p:last-child { margin-bottom: 0; }
.onb-sample p.lead {
  font-size: 1.1rem; font-style: italic; color: var(--ink-soft);
}
.onb-sample em { font-style: italic; }
.onb-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 0.4rem;
}
.onb-nav form { margin: 0; }
.onb-skip {
  background: transparent; border: 0;
  font-family: var(--serif); font-size: 0.82rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-500); cursor: pointer;
  border-bottom: 1px solid var(--stone-300);
  padding: 0 0 0.15rem;
}
.onb-skip:hover { color: var(--ink-800); }
.onb-next {
  background: transparent; border: 1px solid var(--ink-800);
  color: var(--ink-800); font-family: var(--serif);
  font-size: 0.9rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.75rem 1.8rem;
  cursor: pointer;
}
.onb-next:hover { background: var(--ink-800); color: var(--glacier-100); }

/* --- §6.7 Crisis surface --- */
.crisis {
  max-width: 36rem; margin: 1rem auto;
  font-family: var(--serif);
}
.crisis__held {
  text-align: center; font-style: italic; color: var(--ink-500);
  font-size: 0.98rem; line-height: 1.55;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--stone-200);
  margin: 0 0 2rem;
}
.crisis__lede {
  text-align: center; font-size: 1.18rem; line-height: 1.55;
  color: var(--ink-900); margin: 0 auto 2rem; max-width: 28rem;
}
.crisis__phones { display: grid; gap: 0.9rem; }
.phone {
  border: 1px solid var(--stone-200); background: var(--glacier-100);
  padding: 1rem 1.2rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: baseline;
}
.phone__label {
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 0.2rem;
}
.phone__sub {
  font-style: italic; color: var(--ink-500);
  font-size: 0.82rem; margin: 0;
}
.phone__num {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
  color: var(--ink-900); text-decoration: none;
  white-space: nowrap; letter-spacing: 0.01em;
  position: relative;
}
.phone__num:hover { color: var(--accent); }
.phone__canonical {
  /* Канонический формат с дефисами — для accessibility и operational
     проверок (search-engines / health-checks). Скрываем визуально. */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.crisis__close {
  text-align: center; margin: 2.4rem 0 0;
  font-style: italic; font-size: 0.92rem;
  color: var(--ink-500); line-height: 1.5;
}
.crisis__close a {
  color: var(--ink-700);
  border-bottom: 1px solid var(--stone-300);
  padding-bottom: 0.05rem;
}
.crisis__close a:hover { color: var(--accent); border-color: var(--accent); }

/* --- §6.8 Refusal sealed paper card --- */
.refusal {
  max-width: 34rem; margin: 1rem auto;
  font-family: var(--serif);
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 2.4rem 2rem 2rem;
  position: relative;
  box-shadow: 0 14px 32px -12px var(--paper-shadow);
}
.refusal__corner {
  position: absolute; top: 0.95rem; left: 1.3rem;
  font-family: var(--serif); font-size: 0.6rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--margin-note);
}
.refusal__code {
  position: absolute; top: 0.95rem; right: 1.3rem;
  font-family: var(--serif); font-size: 0.66rem;
  font-style: italic; color: var(--margin-note);
}
.refusal__body {
  font-size: 1.08rem; line-height: 1.65; color: var(--ink);
  margin: 1rem 0 1.4rem;
}
.refusal__body p { margin: 0 0 0.8em; }
.refusal__body p:last-child { margin-bottom: 0; }
.refusal__path {
  padding-top: 1.2rem; border-top: 1px solid var(--paper-edge);
  font-style: italic; font-size: 0.92rem; color: var(--ink-soft);
  margin: 0;
}
.refusal__back {
  display: inline-block; margin-top: 1.4rem;
  background: transparent; border: 0;
  font-family: var(--serif); font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-700); border-bottom: 1px solid var(--stone-300);
  padding: 0 0 0.15rem; cursor: pointer;
  text-decoration: none;
}
.refusal__back:hover { color: var(--accent); border-color: var(--accent); }

/* --- §6.9 Paywall sealed page --- */
.paywall {
  text-align: center;
  max-width: 38rem; margin: 1rem auto;
  font-family: var(--serif);
}
.paywall__stage { max-width: 30rem; margin: 0 auto 2rem; position: relative; }
.paywall-page {
  position: relative;
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 2.2rem 1.6rem 1.8rem;
  box-shadow: 0 20px 40px -16px var(--paper-shadow);
}
.paywall-page__postmark, .paywall-page__stamp {
  position: absolute; top: 0.9rem;
  font-family: var(--serif); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--margin-note);
}
.paywall-page__postmark { left: 1.1rem; }
.paywall-page__stamp { right: 1.1rem; }
.paywall-page__inner {
  margin-top: 0.8rem;
  filter: blur(2.5px) saturate(0.6); opacity: 0.55;
  font-family: var(--serif); color: var(--ink);
  user-select: none; pointer-events: none; text-align: left;
}
.paywall-page__inner p { margin: 0 0 0.5em; line-height: 1.45; }
.paywall-page__seal {
  position: absolute; bottom: -1.2rem; right: 1.4rem;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink);
}
.paywall-page__seal::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--ink-soft); border-radius: 50%; opacity: 0.4;
}
.paywall__eyebrow {
  font-family: var(--serif); font-size: 0.66rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-400); margin: 2.4rem 0 0.9rem;
}
.paywall__copy {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.55;
  color: var(--ink-800); max-width: 30rem; margin: 0 auto 0.9em;
}
.paywall__copy em { font-style: italic; }
.paywall__choice {
  margin-top: 1.6rem; display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  align-items: center;
}
.paywall__primary, .paywall__quiet {
  font-family: var(--serif); font-size: 0.9rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; background: transparent;
  text-decoration: none; display: inline-flex; align-items: center;
}
.paywall__primary {
  border: 1px solid var(--ink-800); color: var(--ink-800);
  padding: 0.85rem 1.8rem;
}
.paywall__primary:hover { background: var(--ink-800); color: var(--glacier-100); }
.paywall__quiet {
  border: 0; color: var(--ink-500);
  border-bottom: 1px solid var(--stone-300);
  padding: 0.85rem 0;
}
.paywall__quiet:hover { color: var(--ink-800); border-color: var(--ink-800); }
.paywall__note {
  font-family: var(--serif); font-style: italic; font-size: 0.84rem;
  color: var(--margin-note); margin: 1.5rem 0 0;
}

.plans {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; max-width: 36rem; margin: 2rem auto 0;
  text-align: left;
}
.plan {
  position: relative;
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 1.4rem 1.2rem 1.2rem;
  font-family: var(--serif);
}
.plan--current::before {
  content: "Текущий"; position: absolute; top: -0.55rem; left: 1rem;
  background: var(--glacier-200); padding: 0 0.5rem;
  font-family: var(--serif); font-size: 0.6rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--margin-note);
}
.plan__name {
  font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
  color: var(--ink-900); margin: 0 0 0.3rem;
}
.plan__price {
  font-family: var(--serif); font-size: 0.92rem; font-style: italic;
  color: var(--ink-soft); margin: 0 0 0.9rem;
}
.plan__quota {
  font-family: var(--serif); font-size: 0.88rem; line-height: 1.4;
  color: var(--ink-800); margin: 0; padding-top: 0.8rem;
  border-top: 1px solid var(--paper-edge);
}
.plan__quota em { font-style: italic; color: var(--ink-soft); }

/* --- §10 Modals (figure / profile / lunar) — universal shell --- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 23, 27, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
.modal-backdrop.is-on { opacity: 1; pointer-events: auto; }
.modal-backdrop[hidden] { display: none; }

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  z-index: 95; max-width: 36rem; width: calc(100% - 2rem);
  max-height: calc(100vh - 4rem); overflow-y: auto;
  background: var(--glacier-100);
  border: 1px solid var(--stone-200);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.3);
  padding: 1.2rem 1.8rem 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}
.modal.is-on {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.modal[hidden] { display: none; }
.modal__close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: transparent; border: 0;
  color: var(--ink-500); font-size: 1.3rem; cursor: pointer;
  padding: 0.4rem 0.6rem; font-family: var(--serif);
  line-height: 1;
}
.modal__close:hover { color: var(--ink-900); }
.modal__close:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

html.app-modal-open { overflow: hidden; }

.modal--sky { max-width: 34rem; }
.modal--profile { max-width: 32rem; }
.modal--figure { max-width: 36rem; }

/* --- §10.1 Figure detail card — система карточек v1.0, уровень «Полная».
   .figdet-card теперь несёт классы .fig-card.fig-card--full; здесь —
   только modal-специфичные размеры (карточка крупнее, центрирована). --- */
.figdet-card {
  max-width: 16rem;
  margin: 0.5rem auto 1.4rem;
}
.figdet-card .fig-card__figure { font-size: 64px; }
.figdet-card .fig-card__roman { font-size: 3.4rem; }
.figdet-card .fig-card__name { font-size: 1.4rem; }
.figdet-body {
  padding: 0 0.4rem;
  font-family: var(--serif); font-size: 1.08rem;
  line-height: 1.7; color: var(--ink-800);
}
.figdet-body p { margin: 0 0 1em; }
.figdet-body em { font-style: italic; }
.figdet-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem; margin: 1.4rem 0;
}
.figdet-meta__item {
  background: transparent; border: 1px solid var(--stone-200);
  padding: 0.8rem 1rem; font-family: var(--serif);
}
.figdet-meta__label {
  font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-400);
  margin: 0 0 0.3rem;
}
.figdet-meta__val {
  font-size: 1rem; color: var(--ink-900);
  font-style: italic; margin: 0;
}
.figdet-occurrences {
  margin-top: 1.2rem; padding-top: 1.3rem;
  border-top: 1px solid var(--stone-200);
}
.figdet-occurrences__label {
  font-family: var(--serif); font-size: 0.62rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-400); margin: 0 0 0.8rem;
}
.figdet-occurrences__row {
  display: grid; grid-template-columns: 5rem 1fr; gap: 0.8rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--stone-200);
  font-family: var(--serif);
}
.figdet-occurrences__row:last-child { border-bottom: 0; }
.figdet-occurrences__date {
  font-size: 0.8rem; color: var(--ink-500); font-style: italic;
}
.figdet-occurrences__title {
  font-size: 0.98rem; color: var(--ink-900);
}

/* --- §10.2 Profile modal --- */
.prof-head {
  text-align: center; padding: 0.5rem 1rem 1.6rem;
  border-bottom: 1px solid var(--stone-200); margin-bottom: 1.4rem;
}
.prof-head__sigil {
  font-family: var(--serif); font-size: 1rem;
  color: var(--stone-300); letter-spacing: 0.32em;
  margin-bottom: 1rem;
}
.prof-head__name {
  font-family: var(--serif); font-weight: 400; font-size: 1.8rem;
  color: var(--ink-900); margin: 0 0 0.4rem; word-break: break-word;
}
.prof-head__since {
  font-family: var(--serif); font-style: italic; font-size: 0.92rem;
  color: var(--ink-500); margin: 0;
}
.prof-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  margin: 0 0 1.6rem;
}
.prof-stat {
  text-align: center; padding: 1rem 0.6rem;
  border-right: 1px solid var(--stone-200);
  font-family: var(--serif);
}
.prof-stat:last-child { border-right: 0; }
.prof-stat__num {
  font-family: var(--serif); font-size: 1.8rem;
  color: var(--ink-900); line-height: 1;
  display: block; margin-bottom: 0.4rem;
}
.prof-stat__label {
  font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-400);
}
.prof-sub-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 2.4rem 1.4rem 1.4rem; margin: 0 0 1.6rem;
  box-shadow: 0 8px 22px -10px var(--paper-shadow);
}
.prof-sub-card__seal {
  position: absolute; top: -1rem; right: 1.2rem;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
}
.prof-sub-card__seal::after {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid var(--ink-soft); border-radius: 50%; opacity: 0.4;
}
.prof-sub-card__eyebrow {
  font-family: var(--serif); font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--margin-note); margin: 0 0 0.6rem;
}
.prof-sub-card__title {
  font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
  color: var(--ink); margin: 0 0 0.5rem;
}
.prof-sub-card__detail {
  font-family: var(--serif); font-style: italic; font-size: 0.92rem;
  color: var(--ink-soft); margin: 0; line-height: 1.5;
}

.prof-form { margin: 0; display: contents; }
.prof-section {
  font-family: var(--serif); font-size: 0.6rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-400);
  padding: 0.6rem 0 0.4rem; margin: 0;
}
.prof-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.9rem 0; border-top: 1px solid var(--stone-200);
  font-family: var(--serif); font-size: 1rem; color: var(--ink-800);
  background: transparent; width: 100%; gap: 0.8rem;
}
.prof-row:last-of-type { border-bottom: 1px solid var(--stone-200); }
.prof-row > span:first-child {
  flex: 1; min-width: 0;
}
.prof-row__meta {
  font-family: var(--serif); font-style: italic;
  font-size: 0.88rem; color: var(--ink-500);
  display: inline-flex; align-items: baseline; gap: 0.5em;
  text-decoration: none;
}
a.prof-row__meta:hover { color: var(--ink-800); }
.prof-row__meta .chev { color: var(--stone-300); font-size: 1rem; font-style: normal; }
.prof-row__input {
  border: 0; border-bottom: 1px dotted var(--stone-300);
  background: transparent; padding: 0.2rem 0;
  font-family: var(--serif); font-size: 1rem;
  color: var(--ink-900); text-align: right;
  min-width: 8rem; max-width: 14rem;
}
.prof-row__input:focus {
  outline: none; border-bottom-color: var(--ink-800);
  border-bottom-style: solid;
}
.prof-row--field { align-items: center; }
.prof-form__actions {
  display: flex; justify-content: flex-end;
  padding-top: 1.2rem;
}
.prof-form__submit {
  font-family: var(--serif); font-size: 0.86rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--ink-800);
  color: var(--ink-800); padding: 0.6rem 1.4rem; cursor: pointer;
}
.prof-form__submit:hover { background: var(--ink-800); color: var(--glacier-100); }
.prof-actions { padding-top: 1.2rem; }
.prof-actions .prof-form__submit {
  display: block; text-align: center; text-decoration: none; margin-bottom: 0.8rem;
}
.prof-foot {
  text-align: center; padding: 1.6rem 1rem 0.4rem;
  font-family: var(--serif); font-style: italic;
  font-size: 0.86rem; color: var(--margin-note);
  margin: 0;
}

/* --- §10.3 Sky/lunar modal --- */
.sky-modal { padding: 0.5rem 1rem 1rem; }
.sky-phase {
  text-align: center; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--stone-200);
}
.sky-phase__glyph {
  font-family: var(--serif); font-size: 4.6rem; line-height: 1;
  color: var(--ink-800); display: block; margin-bottom: 0.7rem;
}
.sky-phase__name {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 400;
  margin: 0 0 0.35rem; color: var(--ink-900);
}
.sky-phase__day {
  font-family: var(--serif); font-style: italic; font-size: 0.92rem;
  color: var(--ink-500); margin: 0 0 1.1rem;
}
.sky-phase__text {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.6;
  color: var(--ink-800); max-width: 26rem; margin: 0 auto;
}
.sky-phase__next {
  margin: 1rem 0 0;
  font-family: var(--serif); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--margin-note);
}
.sky-phase__next strong {
  color: var(--ink-700); font-weight: 500;
  font-style: italic; letter-spacing: 0;
}
.sky-section {
  font-family: var(--serif); font-size: 0.62rem;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--margin-note); text-align: center;
  padding: 1.5rem 0 1rem; margin: 0;
}
.sky-transits { display: flex; flex-direction: column; gap: 0; }
.sky-transit {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  gap: 0.9rem; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--stone-200);
  font-family: var(--serif);
}
.sky-transit:last-child { border-bottom: 0; }
.sky-transit__glyph {
  font-family: var(--serif); font-size: 1.5rem;
  color: var(--ink-800); line-height: 1; text-align: center;
  display: inline-flex; align-items: baseline; gap: 0.1em;
  justify-content: center;
}
.sky-transit__retro {
  font-size: 0.78rem; font-style: italic; color: var(--ink-soft);
}
.sky-transit__body { min-width: 0; }
.sky-transit__name {
  font-family: var(--serif); font-weight: 500; font-size: 1rem;
  color: var(--ink-900); margin: 0 0 0.15rem; line-height: 1.2;
}
.sky-transit__detail {
  font-family: var(--serif); font-style: italic; font-size: 0.82rem;
  color: var(--ink-500); margin: 0;
}
.sky-transit__until {
  font-family: var(--serif); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--margin-note); text-align: right;
  align-self: center; white-space: nowrap;
}

.sky-svod {
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: 1.1rem 1.2rem 1rem; margin-top: 0.6rem;
  font-family: var(--serif); cursor: pointer;
  text-align: left; width: 100%; display: block;
  text-decoration: none;
  box-shadow: 0 4px 14px -6px var(--paper-shadow);
}
.sky-svod:hover { box-shadow: 0 6px 18px -6px var(--paper-shadow); }
.sky-svod__eyebrow {
  font-family: var(--serif); font-size: 0.58rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--margin-note); margin: 0 0 0.5rem;
}
.sky-svod__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.08rem; line-height: 1.2;
  color: var(--ink); margin: 0 0 0.4rem;
}
.sky-svod__excerpt {
  font-family: var(--serif); font-style: italic; font-size: 0.86rem;
  color: var(--ink-soft); line-height: 1.45; margin: 0;
}

/* --- Mobile adjustments for Sprint E+F+G surfaces --- */
@media (max-width: 759.98px) {
  .auth-frame { padding: 1.4rem 1rem 2rem; gap: 1rem; }
  .auth-frame__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .auth-frame__lede { font-size: 1rem; }
  .auth-frame__submit { width: auto; min-width: 16rem; }

  .onb-stage { padding: 1.4rem 1rem; }
  .onb-frame { gap: 1.1rem; }
  .onb-title { font-size: clamp(1.6rem, 8vw, 2.2rem); margin-bottom: 0.7rem; }
  .onb-lede { font-size: 1rem; }
  .onb-rules li { font-size: 0.96rem; padding-left: 2.2rem; }
  .onb-sample { padding: 1.6rem 1.2rem 1.2rem; }
  .onb-nav { gap: 0.6rem; }
  .onb-next { padding: 0.7rem 1.2rem; font-size: 0.84rem; }

  .crisis { margin: 0.6rem auto; padding: 0 0.4rem; }
  .crisis__held { font-size: 0.94rem; }
  .crisis__lede { font-size: 1.08rem; }
  .phone {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .phone__num { font-size: 1.3rem; }

  .refusal { padding: 2.2rem 1.4rem 1.6rem; margin: 0.6rem auto; }
  .refusal__body { font-size: 1rem; }

  .paywall__copy { font-size: 1.04rem; }
  .plans { grid-template-columns: 1fr; }

  .modal { padding: 1rem 1.2rem 1.4rem; max-height: calc(100vh - 2rem); }
  .figdet-card { max-width: 13rem; }
  .figdet-card .fig-card__figure { font-size: 52px; }
  .figdet-meta { grid-template-columns: 1fr; }
  .prof-row__input { max-width: 9rem; min-width: 6rem; }
}

/* ============================================================
   §H Cookie banner — paper-style pill, не чёрная плашка
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 0.85rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 2px 0 var(--paper-edge), 0 14px 32px -12px var(--paper-shadow);
  font-family: var(--serif);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink);
  z-index: 100;
}
.cookie-banner.is-visible { display: inline-flex; }
.cookie-banner__text {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
}
.cookie-banner__text a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--margin-note);
  text-underline-offset: 0.18em;
  font-style: normal;
}
.cookie-banner__text a:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }
.cookie-banner__actions {
  display: inline-flex;
  gap: 0.3rem;
  border-left: 1px solid var(--paper-edge);
  padding-left: 0.75rem;
}
.cookie-banner__btn {
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: color 200ms ease;
}
.cookie-banner__btn:hover { color: var(--ink); }
.cookie-banner__btn--primary { color: var(--ink); }
.cookie-banner__btn--primary:hover { color: var(--accent-deep); }

/* На mobile bottom tabs занимают ~4rem + safe-area. Cookie banner — выше них. */
@media (max-width: 759.98px) {
  .cookie-banner {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
  }
  .cookie-banner__text { white-space: normal; text-align: center; }
  .cookie-banner__actions {
    border-left: 0;
    border-top: 1px solid var(--paper-edge);
    padding-left: 0;
    padding-top: 0.5rem;
    justify-content: center;
  }
  .cookie-banner__btn { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
}

/* ----- §6.5 NOTES figure-cards — public publication variant (увеличенные глифы) ----- */
/* Базовый .figs / .fig-card задан в §6.2 (reading-flow). Здесь — модификатор для
   публичной публикации /notes/<slug>/: крупные глифы (по образцу Glaciora · Публикация
   макета), увеличенные отступы, более выраженная типографика карточек. */

.figs--public {
  /* Grid: на десктопе сетка под число карточек (до 4 колонок), на
     mobile (≤640px) — реверс на 2×2. Уровень один — меняется сетка. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 2.5rem;
}
.figs--public .fig-card { min-width: 0; }

@media (max-width: 640px) {
  .figs--public {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
}