/* Castalia — главная страница.
   Подключается ПОСЛЕ tokens.css и base.css. Ни один токен здесь не переопределяется:
   всё берётся через var(). Скруглений нет. Отступы — только ступени --s1…--s11.

   Уровни интенсивности по STYLE.md:
     .hero      — 5 (зерно, вылет, параллакс, заголовок в пол-экрана)
     .seam      — 4 (орнаментальный разделитель, прорисовка по скроллу)
     .emblems   — 4 (словарь эмблем, крупная антиква, золото)
     .seek      — 3 (тонкие правила, капс, микротекст)
     .ledger    — 3 (карточки: линейки, small caps, микротекст)

   Правило двух плюс один соблюдается поблочно:
     тёмные блоки  → ночь + бумага + ЗОЛОТО
     светлые блоки → бумага + текст + КИНОВАРЬ
     карточка      → бумага + текст + один акцент из данных статьи
   Золото и киноварь нигде не встречаются в одном блоке. */


/* ══ оболочка ══════════════════════════════════════════════════════════ */

.home {
  overflow-x: clip;                 /* страница по горизонтали не скроллится никогда */
}

@media (min-width: 48rem) {
  .home .pad { padding-inline: var(--s7); }
}
@media (min-width: 78rem) {
  .home .pad { padding-inline: var(--s8); }
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--paper);
  color: var(--text);
  padding: var(--s2) var(--s4);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* марка издания */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.wordmark__i { color: var(--gold); font-style: normal; }
.wordmark--foot { font-size: clamp(1.75rem, 4vw, 2.75rem); }


/* ══ УРОВЕНЬ 5 · геройская секция ══════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  isolation: isolate;
  overflow: hidden;                 /* вылет сцены за края не рвёт страницу */

  --accent: var(--gold);            /* акцент блока: перебивается полем accent статьи */
}

/* Шапка красится тем же акцентом, что и карточка этой же статьи в ленте:
   иначе одна работа подписана наверху золотом, а ниже киноварью.
   Киноварь задумана для бумаги — по чернилам она даёт 2.4:1 и для набора
   непригодна, поэтому на тёмном берётся её осветлённый вариант. Это не
   переопределение токена, а производная от него: ровно так же для бумаги
   существует --gold-text. Правило «двух плюс один» цело: золото и киноварь
   в блоке по-прежнему не встречаются, весь акцент идёт через --accent. */
.hero[data-accent="vermilion"] {
  --accent: color-mix(in oklab, var(--vermilion) 52%, var(--paper));
}
.hero .wordmark__i { color: var(--accent); }

/* сюда монтируется готовая параллакс-сцена; пока пусто — только атмосфера */
.cover-mount {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  overflow: hidden;
  box-shadow: inset 0 0 var(--s11) var(--s9) var(--ink);   /* виньетка, тень только в сцене */
}
.cover-mount:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--accent);
  opacity: .13;
  background: radial-gradient(ellipse 62% 46% at 50% 34%, currentColor, transparent 68%);
}

/* скрим: буквы читаются поверх любой обложки */
/* зерно живёт над скримом, но под текстом */
.hero.grain::after { z-index: calc(var(--z-scene) + 2); }

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-scene) + 1);
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--ink), transparent 26%),
    linear-gradient(to top,    var(--ink), transparent 46%);
  opacity: .92;
}

.hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s6);
  width: 100%;
  padding: var(--s5);
  will-change: transform, opacity;
}
@media (min-width: 48rem) { .hero__grid { padding: var(--s7); } }
@media (min-width: 78rem) { .hero__grid { padding: var(--s8); } }

/* ── шапка ── */
.hero__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.hero__nav { display: flex; gap: var(--s5); order: 3; width: 100%; }
@media (min-width: 48rem) { .hero__nav { order: 0; width: auto; } }

.hero__nav a {
  position: relative;
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  text-decoration: none;
  color: var(--text);
  padding-bottom: var(--s1);
}
.hero__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.hero__nav a:hover::after,
.hero__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero__issue {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── ведущая статья ── */
.hero__lede { align-self: end; }

.hero__rubric {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .74rem;
  color: var(--accent);
  margin-bottom: var(--s3);
}
/* пустая рубрика не должна оставлять после себя ступень отступа */
.hero__rubric:empty { display: none; }

.hero__title {
  font-size: clamp(2.75rem, 11.5vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  margin-bottom: var(--s4);
  max-width: 13ch;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.hero__title .word { display: inline-block; }

.hero__dek {
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  line-height: 1.45;
  max-width: 36ch;
  color: var(--text);
  margin-bottom: var(--s5);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.75rem;              /* 44px, палец попадает */
  padding: var(--s2) var(--s5);
  border: 1px solid var(--accent);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.hero__cta svg { width: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}
.hero__cta:active { transform: translateY(0) scale(.985); }

/* строка состояния шапки: чем занята страница, если ведущей статьи ещё нет */
.hero__note {
  margin-top: var(--s4);
  max-width: 44ch;
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  line-height: 1.6;
  color: var(--text);
  opacity: .72;
}

/* ── подвал обложки ── */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.hero__emblem {
  width: 2rem; height: 2rem;
  fill: none; stroke: var(--accent); stroke-width: 1.25;
}
.hero__figure {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--accent);
}
.hero__stamp {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
}
@media (min-width: 48rem) { .hero__figure + .hero__stamp { margin-left: auto; } }

/* ── состояния шапки ──────────────────────────────────────────────────────
   static  — сценарий не работал: заголовок издания, описание и вход в поиск.
   loading — данные в пути: видна только строка состояния.
   ready   — ведущая статья на месте: строка состояния лишняя.
   empty   — печатать пока нечего: обещать статью нельзя, и кнопки нет.
   error   — индекс недоступен: остаётся титул, объяснение и путь в поиск.
   Выходные данные обложки (фигура, дата, номер) существуют только у статьи,
   поэтому во всех состояниях, кроме ready, подвала обложки нет. */
.hero:not([data-state="ready"]) .hero__foot { display: none; }
.hero[data-state="ready"] .hero__note { display: none; }
.hero[data-state="loading"] .hero__lede > :not(.hero__note) { visibility: visible; }
.hero[data-state="empty"] .hero__cta { display: none; }

/* без сценария словаря эмблем в документе нет: спрайт вживляет schema.js.
   Пустая рамка марки вместо рисунка — хуже, чем её отсутствие. */
.no-js .hero__emblem,
.no-js .emblem__mark { display: none; }


/* ══ УРОВЕНЬ 3 · поиск ═════════════════════════════════════════════════ */

.seek {
  padding-block: var(--s9);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) { .seek { padding-block: var(--s10); } }

.seek__kicker {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: var(--s4);
}

.seek__h {
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 var(--s6);
}

.seek__form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s4);
  padding-bottom: var(--s4);
}

.seek__input {
  flex: 1 1 20rem;              /* на узком поле кнопка уходит на свою строку, а не режет подсказку */
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--s2) 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text);
}
.seek__input::placeholder {
  color: var(--slate);
  font-style: italic;
  opacity: 1;
}
/* мышью — только линейка наливается; с клавиатуры остаётся кольцо фокуса из base.css */
.seek__input:focus:not(:focus-visible) { outline: none; }
.seek__input::-webkit-search-cancel-button { appearance: none; }

.seek__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--vermilion);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  color: var(--vermilion);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.seek__go svg { width: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.seek__go:hover,
.seek__go:focus-visible {
  background: var(--vermilion);
  color: var(--paper);
  transform: translateY(-2px);
}
.seek__go:active { transform: translateY(0) scale(.985); }

/* линейка поля: тонкая в покое, наливается киноварью в фокусе */
.seek__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule);
}
.seek__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.seek__form:focus-within .seek__rule::after,
.seek__form:hover .seek__rule::after { transform: scaleX(1); }

.seek__note {
  margin: var(--s5) 0 0;
  max-width: var(--measure);
  font-size: .95rem;
  color: var(--slate);
}

.seek__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin: var(--s5) 0 0;
}
.seek__tag { margin: 0; }
.seek__tag a {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .66rem;
  text-decoration: none;
  color: var(--slate);
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.seek__tag a:hover,
.seek__tag a:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
  background: var(--paper-2);
}


/* ══ УРОВЕНЬ 4 · разделитель ═══════════════════════════════════════════ */

.seam { padding-block: var(--s7); }
.seam .divider { margin-block: 0; height: var(--s7); }   /* орнамент целиком в кадре, без обреза */


/* ══ УРОВЕНЬ 3 · лента ═════════════════════════════════════════════════ */

.ledger { padding-block: var(--s7) var(--s10); }

.ledger__head {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s5);
  margin-bottom: var(--s8);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .ledger__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.ledger__h {
  margin: 0;
  font-size: clamp(1.75rem, 4.4vw, 3rem);
}

.ledger__stats { display: flex; gap: var(--s6); margin: 0; }
.stat { display: grid; gap: var(--s1); }
.stat__k {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .62rem;
  color: var(--slate);
}
.stat__v {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--text);
}

.feed__state {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  color: var(--slate);
  margin: 0;
}

/* Отказ индекса — не то же самое, что пустой архив: у отказа есть причина,
   действие и обходной путь, и все три он обязан показать. */
.feed__fail {
  display: grid;
  justify-items: start;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--vermilion);
}
.feed__fail .feed__state { color: var(--vermilion); }
.feed__retry {
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: .68rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feed__retry:hover,
.feed__retry:focus-visible { background: var(--text); color: var(--paper); }
.feed__aside {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--mute);
}

/* Счётчики описывают ленту. Пока ленты нет — им нечего описывать, а нули
   на месте неизвестного читаются как «архив пуст». */
.ledger:not([data-state="ready"]) .ledger__stats { display: none; }

.feed__row { display: grid; gap: var(--s7); }
.feed__row + .feed__row { margin-top: var(--s8); }
.feed__row--index { gap: 0; }

@media (min-width: 48rem) {
  .feed__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
  .feed__row--tri  { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); }
}


/* ── карточка: одна разметка, пять композиций ──────────────────────────── */

.card { position: relative; }

.card__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "rule   rule"
    "rubric emblem"
    "title  title"
    "dek    dek"
    "meta   meta";
  column-gap: var(--s4);
  row-gap: var(--s3);
  align-items: start;
  padding: var(--s4) var(--s4) var(--s5);
  margin-inline: calc(var(--s4) * -1);
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color var(--dur) var(--ease);
}
.card__link:hover { background: var(--paper-2); color: inherit; }

.card__rule {
  grid-area: rule;
  position: relative;
  display: block;
  height: 1px;
  background: var(--rule);
  margin-bottom: var(--s3);
}
.card__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.card__link:hover .card__rule::after,
.card__link:focus-visible .card__rule::after { transform: scaleX(1); }

.card__emblem {
  grid-area: emblem;
  width: 2.25rem; height: 2.25rem;
  fill: none;
  stroke: var(--slate);              /* эмблема читается на бумаге, акцент — на наведении */
  stroke-width: 1.25;
  transition: transform var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.card__link:hover .card__emblem { transform: translateY(-2px); }

.card__rubric {
  grid-area: rubric;
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .7rem;
  line-height: 1.6;
}

.card__title {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.06;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .14em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.card__link:hover .card__title,
.card__link:focus-visible .card__title { text-decoration-color: currentColor; }

.card__dek {
  grid-area: dek;
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}

.card__meta {
  grid-area: meta;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .64rem;
  color: var(--slate);
}
.card__sep { color: var(--slate); }

/* акцент карточки: ровно один цвет на блок */
.card[data-accent="vermilion"] .card__rule,
.card[data-accent="vermilion"] .card__rubric,
.card[data-accent="vermilion"] .card__link:hover .card__title { color: var(--vermilion); }
.card[data-accent="vermilion"] .card__link:hover .card__emblem { stroke: var(--vermilion); }
.card[data-accent="gold"] .card__rule { color: var(--gold); }
.card[data-accent="gold"] .card__rubric { color: var(--slate); }
.card[data-accent="gold"] .card__link:hover .card__emblem { stroke: var(--gold); }

/* ведущая */
.card--lead .card__title { font-size: clamp(2rem, 5.4vw, 3.75rem); line-height: .98; letter-spacing: -.02em; }
.card--lead .card__dek   { font-size: 1.0625rem; }
.card--lead .card__emblem { width: 3rem; height: 3rem; }

@media (min-width: 48rem) {
  .card--lead .card__link {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    grid-template-areas:
      "rule   rule"
      "rubric emblem"
      "title  dek"
      "title  meta";
    column-gap: var(--s8);
    row-gap: var(--s5);
  }
  .card--lead .card__emblem { width: 4rem; height: 4rem; justify-self: end; }
  .card--lead .card__meta { align-self: start; }
}

/* пара и тройка */
.card--pair .card__title { font-size: clamp(1.375rem, 2.9vw, 2.125rem); }
.card--tri  .card__title { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
.card--tri  .card__dek   { font-size: .92rem; }
.card--tri  .card__emblem { width: 2rem; height: 2rem; }

/* полоса */
.card--band .card__title { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }

@media (min-width: 48rem) {
  .card--band .card__link {
    grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "rule   rule   rule"
      "emblem rubric meta"
      "emblem title  dek";
    column-gap: var(--s7);
    row-gap: var(--s4);
  }
  .card--band .card__emblem { width: 4.5rem; height: 4.5rem; align-self: start; }
  .card--band .card__meta { justify-content: flex-end; }
  .card--band .card__dek { align-self: start; }
}

/* указатель */
.feed__row--index .card__link {
  padding-block: var(--s4);
  row-gap: var(--s2);
}
.card--index .card__rule { margin-bottom: var(--s2); }
.card--index .card__title { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.card--index .card__dek { font-size: .92rem; }
.card--index .card__emblem { width: 1.75rem; height: 1.75rem; }

@media (min-width: 48rem) {
  .card--index .card__link {
    grid-template-columns: 2.5rem minmax(0, 9rem) minmax(0, 1.15fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "rule   rule   rule  rule rule"
      "emblem rubric title dek  meta";
    column-gap: var(--s5);
    align-items: center;
  }
  .card--index .card__dek { max-width: none; }
}


/* ══ УРОВЕНЬ 4 · словарь эмблем ════════════════════════════════════════ */

.emblems { padding-block: var(--s9) var(--s10); }

.emblems__head {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s8);
}
@media (min-width: 48rem) {
  .emblems__head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--s8); align-items: end; }
}
.emblems__h { margin: 0; font-size: clamp(2rem, 5.4vw, 3.5rem); }
.emblems__lede {
  margin: 0;
  max-width: var(--measure);
  font-size: 1.0625rem;
  color: var(--text);
}

/* сетка на волосяных линейках: линейка живёт на самой ячейке,
   поэтому незанятые клетки последнего ряда остаются пустой ночью */
.emblems__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.emblem {
  margin: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.emblem__link {
  display: grid;
  gap: var(--s2);
  padding: var(--s5);
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color var(--dur) var(--ease);
}
.emblem__link:hover,
.emblem__link:focus-visible { background: var(--ink-2); color: inherit; }

.emblem__mark {
  width: 3rem; height: 3rem;
  margin-bottom: var(--s3);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  clip-path: inset(0 0 0 0);
  transition: transform var(--dur) var(--ease);
}
.emblem__link:hover .emblem__mark { transform: translateY(-3px); }

.emblem__field {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: .16em;
  overflow-wrap: break-word;
  font-size: .64rem;
  color: var(--text);
  opacity: .8;
}
.emblem__figure {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--gold);
}
.emblem__attr {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text);
  opacity: .78;
}
.emblem__count {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.emblem[data-stocked="no"] .emblem__count { color: var(--text); opacity: .62; }
.emblem[data-stocked="no"] .emblem__mark { opacity: .5; }

/* Плитка без работ перестаёт быть ссылкой (её место занимает div), и вести
   себя как ссылка она тоже не должна: ни отклика на наведение, ни курсора. */
.emblem[data-stocked="no"] .emblem__link { cursor: default; }
.emblem[data-stocked="no"] .emblem__link:hover { background: transparent; }
.emblem[data-stocked="no"] .emblem__link:hover .emblem__mark { transform: none; }


/* ══ выходные данные ═══════════════════════════════════════════════════ */

.colophon {
  padding-block: var(--s8) var(--s7);
  border-top: 1px solid var(--rule);
}

.colophon__top {
  display: grid;
  gap: var(--s4);
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .colophon__top { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s8); align-items: baseline; }
}
.colophon__line {
  margin: 0;
  max-width: var(--measure);
  font-size: .98rem;
  color: var(--text);
  opacity: .82;
}

.colophon__grid {
  display: grid;
  gap: var(--s5);
  margin: 0 0 var(--s7);
}
@media (min-width: 48rem) { .colophon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } }
@media (min-width: 78rem) { .colophon__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.colophon__cell { display: grid; gap: var(--s2); }
.colophon__k {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.colophon__v {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text);
}
.colophon__v a { text-decoration-color: var(--gold); }
.colophon a:hover { color: var(--gold); }

.colophon__foot {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .7;
}


/* ══ движение ══════════════════════════════════════════════════════════
   Только transform, opacity и filter. Ниже третьего уровня движения нет.
   Всё гасится в prefers-reduced-motion в самом низу файла. */

/* вход обложки: очередь по стагтеру, разбег 60 мс */
.js .hero [data-enter] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .hero .hero__title .word { transition-duration: var(--dur-slow); }
.js .hero.is-live [data-enter] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* прорисовка по скроллу */
.js [data-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),
    clip-path var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* эмблема выписывается слева направо, как перо по бумаге */
.js .emblem[data-reveal] .emblem__mark { clip-path: none; }
.js .emblem[data-reveal].is-in .emblem__mark {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease) calc(var(--i, 0) * 70ms + 120ms),
              transform var(--dur) var(--ease);
}

/* базовый глушитель в base.css сводит длительности к нулю; здесь снимаем
   ещё и стартовые смещения, чтобы при reduce ничто не «прыгало» */
@media (prefers-reduced-motion: reduce) {
  .js .hero [data-enter],
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .js .emblem[data-reveal] .emblem__mark,
  .js .emblem[data-reveal].is-in .emblem__mark { clip-path: none; transition: none; }
  .hero__grid { transform: none !important; opacity: 1 !important; }
  .card__rule::after,
  .seek__rule::after { transition: none; }
}

/* The issue begins with a finished essay and an editor's note. */
.home .hero__title { font-size: clamp(2.75rem, 7.5vw, 7rem); max-width: 15ch; }
.home .hero__nav a, .home .hero__cta, .home .seek__go,
.home .seek__tag a, .home .feed__retry {
  font-family: var(--font-meta); font-size: var(--control-font);
  text-transform: none; letter-spacing: .02em; min-height: var(--control-min);
  display: inline-flex; align-items: center;
}
.home .hero__nav { gap: var(--s5); }
.home .hero__note { font-family: var(--font-body); font-size: var(--control-font-small); text-transform: none; letter-spacing: normal; }
.editors-note { padding-block: var(--s8); }
.editors-note h2 { font-size: clamp(2rem, 4vw, 3rem); margin-block: var(--s3) var(--s5); }
.editors-note__text { max-width: 68ch; }
.editors-note__text p + p { margin-top: var(--s4); }
.editors-note > a { display: inline-block; margin-top: var(--s5); }
.home .seek { padding-block: var(--s7); }
.home .seek__kicker { display: none; }
.home .seek__note { font-family: var(--font-body); font-size: var(--control-font-small); text-transform: none; letter-spacing: normal; }
.home .seek__input { min-width: 0; }
.home .seek__form:focus-within .seek__rule::after { background: var(--focus); }
.home .ledger { padding-block: var(--s7); }
.home .ledger__stats { display: none; }
.topics { padding-block: var(--s8); }
.topics h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--s5); }
.topics__lede { max-width: 60ch; }
.topics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s8); margin-block: var(--s7); }
.topics dt { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--s2); }
.topics dd { margin: 0; max-width: 36ch; color: var(--mute); }
.home .colophon { padding-block: var(--s6); }
@media (max-width: 47.999rem) {
  .home .hero { min-height: 42rem; }
  .home .hero__grid { min-height: 42rem; }
  .home .hero__foot { gap: var(--s3); }
  .home .hero__stamp:last-child { display: none; }
  .editors-note, .topics { padding-block: var(--s7); }
  .topics__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}