/* ============================================================================
   Главная — этап 3. Направление «Врата» + блоки макета с условием показа.
   Подключается ПОСЛЕ components.css (там обвязка и примитивы словаря).
   Файл в реестре scripts/tokenized-css.txt — Stop hook гоняет stylelint.

   Замысел (см. incoming/stage3-index-research.md):
   до этого вся главная была вторым экземпляром шапочной навигации —
   карусель врат повторяла пункты меню и больше не сообщала ничего.
   Теперь первый экран отвечает на «что это за место», а ниже идут блоки,
   каждый из которых показывается ТОЛЬКО при наличии содержимого. Пустая
   секция не рисуется вовсе: рама без содержимого — дефект, а не «вид».
   ============================================================================ */

/* ── Каркас ──
   Герой во всю ширину, блоки — в колонку чтения. Поэтому ширину держит
   не main, а .wrap внутри него. */
/* Полотно из components.css (`.wh-page`) даёт колонку 1240 px с полями —
   главной это не нужно: герой обязан идти во всю ширину, иначе арт зала
   читается картинкой ВНУТРИ страницы, а не самой страницей. */
.index-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 var(--s-20);
}
/* Ширину держат сами полосы: тёмная полоса обязана идти во всю ширину,
   иначе арт зала снова читается картинкой внутри страницы. */
.index-wrap { width: 100%; }
.index-wrap:empty { display: none; }

/* ── Врата: первый и главный экран ──
   Один сюжет, одно основное действие. Всё остальное на экране — тише его.
   Арт зала уже есть в репозитории, поэтому композиция не ждёт художника
   (ТЗ 0.4: экран обязан быть законченным на заглушках). */
.gate {
  position: relative;
  min-height: clamp(520px, 78vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.gate__art {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  /* Стойка архивариуса — тот самый экран, у которого игрок стоит в игре.
     Полотно уже приглушено самим художником, поэтому фильтр почти не нужен. */
  background-image: url(../assets/guild/hall/bg.webp);
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Свет повторяет лампу, которая на арте нарисована над стойкой, а не
   «подсвечивает композицию вообще». */
.gate__lamp {
  position: absolute;
  z-index: var(--z-base);
  left: 50%;
  top: -14%;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  height: 70%;
  pointer-events: none;
  background: radial-gradient(50% 46% at 50% 30%, rgba(252,245,234,0.2), transparent 68%);
}
.gate__veil,
.gate__vig {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
}
/* Текст никогда не лежит на «сыром» изображении (ТЗ §5.1): к низу полотно
   уходит в фон страницы, и стык героя с лентой не читается швом. */
.gate__veil {
  background-image:
    linear-gradient(90deg, rgba(24,17,31,0.86) 0%, rgba(24,17,31,0.5) 42%, transparent 70%),
    linear-gradient(180deg, rgba(24,17,31,0.7) 0%, transparent 26%, rgba(24,17,31,0.35) 74%, var(--wall) 100%);
}
.gate__vig { box-shadow: var(--sh-vignette); }

/* Угловые засечки — техническая рамка кадра, а не завиток.
   Мотив: страница показывает полотно как экспонат под стеклом. */
.gate__tick {
  position: absolute;
  z-index: var(--z-sticky);
  width: var(--s-5);
  height: var(--s-5);
  border-color: var(--line-strong);
  pointer-events: none;
}
.gate__tick--tl { top: var(--s-6); left: var(--s-6); border-top: 1px solid; border-left: 1px solid; }
.gate__tick--tr { top: var(--s-6); right: var(--s-6); border-top: 1px solid; border-right: 1px solid; }
.gate__tick--bl { bottom: var(--s-6); left: var(--s-6); border-bottom: 1px solid; border-left: 1px solid; }
.gate__tick--br { bottom: var(--s-6); right: var(--s-6); border-bottom: 1px solid; border-right: 1px solid; }

.gate__inner {
  position: relative;
  z-index: var(--z-sticky);
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: var(--s-14) var(--s-6) var(--s-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-10);
}

/* 46ch, а не 36: на 36 две кнопки не помещались в строку и вставали
   столбиком — «второстепенное» действие получало ту же вертикальную
   значимость, что и основное. */
.gate__promise { max-width: 46ch; }
.gate__kick {
  display: block;
  font-family: var(--font-label);
  font-size: var(--t--1);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-text);
}
.gate__title {
  margin: var(--s-3) 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--lamp);
}
.gate__lede {
  font-size: var(--t-1);
  line-height: var(--lh-body);
  color: var(--lamp-2);
}
.gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
/* Вторая кнопка — призрак, не второй главный. Одно основное действие на вью
   (словарь: .button--primary единственная). */
.gate__note {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--t--1);
  color: var(--lamp-4);
}

/* ── Датлайн: доказательство, что сайт живой ──
   Две строки настоящих данных вместо «4 записи · последняя 15 апреля» —
   декоративная статистика на главной ровно так же не нужна, как на Хрониках.
   Пустые значения не рисуются: строку ставит скрипт только при ответе API. */
/* Это листок, оставленный на стойке: наклон, контактная тень, фактура
   бумаги (класс .paper в разметке). Не «панель статистики». */
.gate__dateline {
  width: min(360px, 40vw);
  padding: var(--s-4) var(--s-5);
  transform: rotate(-0.6deg);
  background: linear-gradient(160deg, var(--leaf), var(--leaf-lo));
  box-shadow: var(--sh-slip);
}
.gate__dateline::before { background-size: 380px 380px, 700px 700px; opacity: 0.26; }
.gate__dateline:empty { display: none; }
.dateline-row {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--leaf-line);
}
.dateline-row:last-child { border-bottom: 0; }
.dateline-row__k {
  flex: 0 0 auto;
  min-width: 9ch;
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
  white-space: nowrap;
}
.dateline-row__v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t--1);
  color: var(--leaf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Числовая марка — тот же регистр, что датные марки реестра Хроник:
   моно, табличные цифры, без разрядки. Один язык чисел на весь сайт. */
.dateline-row__n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t--2);
  letter-spacing: 0;
  color: var(--leaf-ink-3);
}

/* Подсказка прокрутки. Ставится скриптом ТОЛЬКО если ниже есть хоть один
   блок: обещать продолжение, которого нет, — обман интерфейса. */
.gate__scroll {
  position: absolute;
  z-index: var(--z-sticky);
  left: 0;
  right: 0;
  bottom: var(--s-4);
  display: none;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--s-14);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--lamp-4);
}
.gate__scroll.is-shown { display: flex; }
.gate__scroll::before,
.gate__scroll::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-subtle);
}

/* ── Блок раздела ──
   Один сильный материал на раздел вместо колонки из трёх строк: при нашем
   объёме базы (см. исследование) три строки читаются как три пустых места,
   а один материал с настоящим заголовком — как выпуск. */
/* Отступы и разделение блоков держит ПОЛОСА (.band), а не сам блок:
   волосяная линейка между разделами была нужна, пока все они стояли на
   одном фоне. Теперь раздел отделён сменой материала. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: var(--s-10);
}
.feature--reverse > :last-child { order: -1; }

.section-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--t--1);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.feature__title {
  margin: var(--s-3) 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-4);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.feature__text {
  max-width: var(--measure);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.feature__meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t--1);
  letter-spacing: 0;
  color: var(--ink-4);
}
.feature__more {
  --link-ink: var(--accent-text);
  --link-ink-hover: var(--accent);
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--font-label);
  font-size: var(--t--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
  .feature__more:hover { border-bottom-color: var(--accent); }
}

/* Вклейка — то же паспарту, что у лида Хроник: рамка, подложка, хайрлайн.
   Один язык изображения на двух страницах. */
.feature__art {
  position: relative;
  margin: 0;
  padding: var(--s-2);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.feature__art > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Своей обложки нет — ставим стандартную обложку Гильдии: печать, номер
   записи и род. Ровно та же плашка, что в реестре Хроник; пустых рам нет. */
.feature__art--seal { display: grid; }
.feature__art--seal .feature__seal {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  color: var(--rank-founder);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--bg-hover), transparent 70%);
  background-color: var(--bg-inset);
  box-shadow: var(--sh-inset);
}
.feature__art--seal .feature__seal svg {
  width: clamp(84px, 26%, 152px);
  height: auto;
  fill: currentColor;
  opacity: 0.42;
}
.feature__art-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.feature__art-no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}


/* Реестр карт живёт в ЯЩИКЕ КАРТОТЕКИ (.cells/.cell в components.css):
   в игре карты лежат там, значит и на сайте это гнёзда, а не строки списка.
   Прежний `.feature__panel` со строками удалён вместе с ним. */

/* ── Полосы: чередование материала зала ──
   Ритм даёт не декор, а смена поверхности: тёмный зал → столешница стойки
   с листом регистра → ящик картотеки. Каждая полоса — предмет, который в
   игре уже есть, поэтому страница узнаётся как наша, а не как «сайт про
   игру». Чередование ведёт скрипт по чётности блока — порядок держится
   при любом наборе живых данных. */
.band { position: relative; overflow: hidden; }
/* ⚠️ z-index обязателен и выше псевдоэлементов полосы: ::before/::after —
   последние в дереве, при равном слое они рисуются ПОВЕРХ содержимого,
   и материал гасит собственный текст. */
.band__in {
  position: relative;
  z-index: var(--z-sticky);
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: var(--s-14) var(--s-6);
}

/* Столешница стойки. ⚠️ Дерево градиентом с полосками даёт красный пластик
   со штрих-кодом — живопись не подделывается. Нижняя треть bg.webp и ЕСТЬ
   столешница: берём её файлом, кадрируя мимо полок. */
.band--desk { background: var(--wood-deep); }
.band--desk::before,
.band--desk::after,
.band--drawer::before,
.band--drawer::after {
  content: "";
  position: absolute;
  z-index: var(--z-base);
  pointer-events: none;
}
.band--desk::before {
  inset: 0;
  background: url(../assets/guild/hall/bg.webp) center bottom / 190% no-repeat;
  filter: brightness(0.82) saturate(0.92);
}
.band--desk::after {
  inset: 0;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(252,245,234,0.16), transparent 62%),
    linear-gradient(180deg, var(--wall-deep) 0%, transparent 22%, transparent 78%, var(--wall-deep) 100%);
}

/* Ящик картотеки. Пурпур глубокий: свет ловят только верхняя кромка и
   латунь, светлая заливка во всю полосу давала фиолетовый пластик. */
.band--drawer {
  background-image:
    radial-gradient(70% 30% at 50% 0%, rgba(252,245,234,0.07), transparent 60%),
    linear-gradient(180deg, var(--plum-deep) 0%, #23032a 38%, #16011a 100%);
}
.band--drawer::before {
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}
/* Латунная кромка — та же деталь, что на арте по краю стойки и ящика. */
/* ⚠️ inset у ::after ящика задаётся отдельно: без него псевдоэлемент
   схлопывается в точку и латунной кромки у картотеки просто нет. */
.band--drawer::after { inset: 0; }
.band--desk::after,
.band--drawer::after { box-shadow: var(--sh-brass-rule); }

/* ⚠️ Свет лампы — только для ЯЩИКА. Полоса-столешница своего текста не
   несёт вовсе: на ней лежит лист, и чернила там бумажные. Правило вида
   `.band--desk .feature__text` (0,2,0) перебивало `.paper p` (0,1,1),
   и текст на бумаге выходил почти белым. */
.band--drawer .feature__title { color: var(--lamp); }
.band--drawer .feature__text { color: var(--lamp-2); }
.band--drawer .section-label,
.band--drawer .feature__meta { color: var(--lamp-3); }
.band--drawer .feature__more { --link-ink: var(--accent-text); color: var(--accent-text); }

/* ── Лист регистра ──
   Уже полосы: вокруг ОБЯЗАНА быть видна столешница, иначе лист снова
   читается вставленным прямоугольником, а не предметом на ней. */
.leaf {
  width: min(880px, 100%);
  margin-inline: auto;
  padding: var(--s-14) var(--s-8);
  transform: rotate(-0.35deg);
  clip-path: var(--clip-leaf);
  background:
    linear-gradient(118deg, transparent 20%, rgba(255,255,255,0.22) 33%, transparent 48%),
    radial-gradient(130% 100% at 12% -16%, var(--leaf-hi) 0%, rgba(246,236,211,0) 56%),
    linear-gradient(154deg, var(--leaf) 0%, #d3c4a0 54%, var(--leaf-lo) 100%);
  filter: var(--sh-leaf);
}
.leaf .feature { align-items: center; }
.leaf .feature__meta { color: var(--leaf-ink-3); }
.leaf .feature__more {
  --link-ink: var(--leaf-ink);
  --link-ink-hover: var(--leaf-ink);
  color: var(--leaf-ink);
  border-bottom-color: var(--leaf-line);
}
@media (hover: hover) {
  .leaf .feature__more:hover { border-bottom-color: var(--leaf-ink); }
}

/* Оттиск печати вместо «вклейки в паспарту»: у документа рамок не бывает.
   ⚠️ Файл иконки берётся ЦЕЛИКОМ — один path из неё даёт коричневую кляксу. */
.leaf .feature__art {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  transform: rotate(-6deg);
}
.leaf .feature__art > img {
  width: min(72%, 240px);
  height: auto;
  aspect-ratio: auto;
  opacity: 0.34;
  mix-blend-mode: multiply;
}
.leaf .feature__art--seal .feature__seal {
  aspect-ratio: 1;
  background: none;
  box-shadow: none;
  color: var(--wood);
}
.leaf .feature__art--seal .feature__seal svg {
  width: min(72%, 210px);
  opacity: 0.34;
  mix-blend-mode: multiply;
}
.leaf .feature__art-caption {
  justify-content: center;
  padding-top: var(--s-3);
  color: var(--leaf-ink-3);
  transform: rotate(6deg);
}

/* ── Гнёзда картотеки ── */
/* Гнёзда фиксированной ширины, а не доли контейнера: при одной карте ряд из
   четырёх долей растянул бы её на весь лист (3:4 от 880px — это метр высоты),
   а ряд из одного гнезда честно показывает, что карта пока одна. */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 200px));
  justify-content: start;
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.cell__tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-3) var(--s-3);
  background: linear-gradient(180deg, transparent, rgba(18,2,17,0.92) 58%);
}
.cell__rank {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  box-shadow: var(--sh-plate);
  font-family: var(--font-label);
  font-size: var(--t--2);
  color: var(--accent-ink);
  line-height: var(--lh-flat);
}
.cell__name {
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--lamp);
  line-height: var(--lh-flat);
}
.cell__no {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t--2);
  letter-spacing: 0;
  color: var(--lamp-4);
}

@media (max-width: 860px) {
  /* Врата: колонки схлопываются, листок с датлайном встаёт под обещание,
     наклон снимается — на узком экране он читается перекосом вёрстки. */
  .gate { min-height: 0; display: block; }
  .gate__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    padding: var(--s-10) var(--s-5) var(--s-8);
  }
  .gate__promise { max-width: none; }
  .gate__title { font-size: var(--t-5); }
  .gate__dateline { width: 100%; transform: none; }
  .gate__tick { display: none; }
  /* Подсказка прокрутки на мобильном лишняя: там и так очевидно, что ниже
     есть продолжение, а поверх кнопок она мешает. */
  .gate__scroll.is-shown { display: none; }

  /* Блок раздела в одну колонку. ⚠️ Без этого правила лист остаётся
     двухколоночным и текст выезжает за обрез бумаги. */
  .feature { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .leaf .feature__art { order: -1; }

  .band__in { padding: var(--s-10) var(--s-5); }
  .leaf { padding: var(--s-8) var(--s-5); transform: none; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}