/* ============================================================
   ОБСУЖДЕНИЯ — архивы героинь
   ============================================================
   Разбор аналогов (HoYoLAB, MyAnimeList, Arknights, практика тегов на
   фанфик-архивах) дал один и тот же ответ: контейнера на персонажа нигде нет.
   Героиня — АДРЕС и заголовок, а не ящик, в который входят; единица раздела —
   работа. Отсюда устройство экрана:

   • полка корешков сверху — переключатель адреса, а не дверь: клик меняет
     разворот на месте, лишнего экрана нет;
   • разворот — слева плашка героини (кожа, золочёная врезка), справа регистр
     её работ на бумаге;
   • «Архивариус напомнил» — не листок, а сцена: тёмный зал, свет лампы и
     куратор, который к вам обратился. Листок был ещё одной бумажкой и молчал.

   Тёмное — помещение, светлое — предмет в руках. Латунь = интеракция.
   Зависит от tokens.css + components.css (.paper, .button, .filter-chip).
   ============================================================ */

.arch-page {
  padding-bottom: var(--s-20);
}

/* ── Колонтитул раздела ─────────────────────────────────────────────────────
   Это заголовок документа, а не панель сайта: ни липкости, ни лака. */
.arch-mast {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-14) 0 var(--s-8);
  text-align: center;
}
.arch-mast__seal {
  display: block;
  width: var(--s-10);
  height: var(--s-10);
  color: var(--brass);
  opacity: 0.75;
}
.arch-mast__seal svg { width: 100%; height: auto; display: block; fill: currentColor; }
.arch-mast__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-5);
  font-weight: var(--w-normal);
  line-height: var(--lh-tight);
}
.arch-mast__lede {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ── Архивариус напомнил ────────────────────────────────────────────────────
   Блок тёмный: куратор стоит в зале, а не на листке. Светится только лампа
   над ним — поэтому он читается человеком, который обратился к вам, а не
   баннером «рекомендуем». */

.curator {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: end;
  gap: var(--s-8);
  margin-bottom: var(--s-10);
  padding: var(--s-8) var(--s-10) 0;
  background:
    radial-gradient(46% 88% at 18% 8%, rgba(252,245,234,0.16), transparent 62%),
    linear-gradient(180deg, #1b1424 0%, #120d19 100%);
  box-shadow: var(--sh-brass-rule), var(--sh-3);
}
.curator[hidden] { display: none; }
.curator__figure { align-self: end; }
.curator__figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.7));
  /* Нижний край растворяется в полу — иначе фигура обрезана линейкой. */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
.curator__body { padding-bottom: var(--s-10); }
.curator__kick {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass-hi);
}
/* Реплика — его голос: антиква курсивом, светом лампы. */
.curator__say {
  margin: 0 0 var(--s-6);
  max-width: 52ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-3);
  line-height: var(--lh-snug);
  color: var(--lamp);
}
.curator__work {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.curator__title {
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: var(--lh-snug);
  color: var(--lamp-2);
}
.curator__kind {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass);
}
.curator__meta {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: var(--lamp-4);
}
.curator__cta { margin-top: var(--s-5); }

/* ── Полка-переключатель ────────────────────────────────────────────────── */

/* safe center: пока томов мало, ряд стоит по центру доски; когда их станет
   много и ряд поедет за край — прижимается к началу, а не обрезает левый том. */
.rack__row {
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: var(--s-1);
  padding: 0 var(--s-6);
  overflow-x: auto;
}
.rack__plank {
  height: 16px;
  background: linear-gradient(180deg, #6b3b2c 0%, #4b1d1f 40%, #2a1010 100%);
  box-shadow: var(--sh-plank);
}
.rack__hint {
  display: block;
  padding: var(--s-3) var(--s-6) 0;
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: var(--ink-4);
}

.sp {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--s-0);
  background: linear-gradient(90deg, #241c16, #3a2f27 35%, #241c16);
  box-shadow: var(--sh-spine);
  border: 0;
  border-radius: var(--r-1);
  cursor: pointer;
  font: inherit;
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .sp:hover { transform: translateY(-8px); }
}
.sp:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}
/* Золочёные линейки — то, чем корешок отличается от любого прямоугольника. */
.sp::before, .sp::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-top: 1px solid rgba(232,192,101,0.5);
  border-bottom: 1px solid rgba(232,192,101,0.3);
}
.sp::before { top: 16px; }
.sp::after { bottom: 16px; }
/* ⚠️ Вертикальный набор: max-height ограничивает ДЛИНУ строки (в vertical-rl
   это инлайн-ось), а overflow клипает обе. Горизонтальные поля дают глифам те
   2px, которые иначе срезаются по бокам. */
.sp__name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: var(--s-0) var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t--1);
  line-height: var(--lh-flat);
  letter-spacing: 0.04em;
  color: var(--rank-d);
  max-height: 104px;
  overflow: hidden;
}
/* Переплёт по редкости. Букв девять, кож — пять: девять оттенков в ряду
   корешков не различить глазом, а группы читаются. Границы те же, по которым
   свёрнута таблица шансов баннера (RANK_GROUPS): низ шкалы, середина, верх,
   S и отдельно SS. Базовая кожа (G/F/E) — на самом .sp. */
.sp--d, .sp--c { background: linear-gradient(90deg, #141d27, #22303f 35%, #141d27); }
.sp--b, .sp--a { background: linear-gradient(90deg, #221528, #35223f 35%, #221528); }
.sp--s { background: linear-gradient(90deg, #2a1512, #4a2622 35%, #2a1512); }
.sp--s .sp__name { color: var(--rank-s); }
/* SS не выдаётся Гильдией — это личное касание Заступника, поэтому у неё не
   кожа под металл, а свет (та же логика, что у --plate-ss в tokens.css). */
.sp--ss { background: linear-gradient(90deg, #241a2e, #56407a 35%, #241a2e); }
.sp--ss .sp__name { color: var(--rank-ss); }
/* Выбранный том вынут с полки — состояние читается позой, не подсветкой. */
.sp.is-active {
  height: 176px;
  transform: translateY(-10px);
  box-shadow: var(--sh-spine-out);
}
.sp--locked {
  height: 138px;
  background: linear-gradient(90deg, #0d0a10, #171320 40%, #0d0a10);
  cursor: default;
}
.sp--locked::before, .sp--locked::after { border-color: rgba(155,106,70,0.25); }
.sp--locked .sp__name { color: rgba(155,106,70,0.5); }
.sp--all {
  width: auto;
  height: 150px;
  padding: 0 var(--s-4);
  background-image: linear-gradient(180deg, #d8b184, #a97c4c 55%, #7d5a2c);
  box-shadow: var(--sh-brass);
}
.sp--all::before, .sp--all::after { border-color: rgba(0,0,0,0.25); }
.sp--all .sp__name {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ── Разворот ───────────────────────────────────────────────────────────── */

.spread {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-14);
  align-items: start;
}
.spread--wide { grid-template-columns: minmax(0, 1fr); }

/* Плашка героини: тот же переплёт, что у корешка, только лицом. Кожи те же
   пять групп, что у .sp-- выше; база — низ шкалы (G/F/E). */
.plate {
  position: relative;
  padding: var(--s-5) var(--s-5) var(--s-6) calc(var(--s-5) + 12px);
  background: linear-gradient(150deg, #3a2f27, #241c16);
  box-shadow: var(--sh-tome);
  border-radius: var(--r-1);
}
.plate[hidden] { display: none; }
.plate--d, .plate--c { background: linear-gradient(150deg, #22303f, #141d27); }
.plate--b, .plate--a { background: linear-gradient(150deg, #35223f, #221528); }
.plate--s { background: linear-gradient(150deg, #4a2622, #2a1512); }
.plate--ss { background: linear-gradient(150deg, #56407a, #241a2e); }
/* Блок страниц слева — то, что делает предмет книгой, а не карточкой. */
.plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 12px;
  background: repeating-linear-gradient(90deg, #d8cdb4 0 1px, #b7aa8c 1px 2px);
  box-shadow: var(--sh-pages);
  border-radius: var(--r-1);
}
/* Портрет — врезка в кожу под золочёной рамкой, а не картинка навылет:
   навылет получилась бы карточка коллекции. */
.plate__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #120211, #1c0620);
  box-shadow: var(--sh-gilt);
}
.plate__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}
.plate__name {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-3);
  line-height: var(--lh-snug);
  color: var(--rank-s);
}
.plate__sub {
  display: block;
  font-size: var(--t-0);
  line-height: var(--lh-snug);
  color: rgba(246,221,147,0.6);
}
.plate__facts {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(232,192,101,0.28);
}
.plate__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: rgba(232,192,101,0.72);
}
.plate__fact b { font-weight: var(--w-normal); color: var(--rank-s); }

/* ── Регистр работ ──────────────────────────────────────────────────────── */

.reg {
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-10);
  background: linear-gradient(170deg, var(--leaf) 0%, var(--leaf-lo) 100%);
  box-shadow: var(--sh-4);
  color: var(--leaf-ink);
}
/* ⚠️ Псевдоэлемент — последний в дереве: без явного z-index фактура рисуется
   поверх текста и выбеливает его. */
.reg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image: var(--fibre), var(--blots);
  background-size: 520px 520px, 900px 900px;
  mix-blend-mode: multiply;
  opacity: 0.3;
}
.reg > * { position: relative; z-index: var(--z-sticky); }
.reg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--leaf-line);
}
.reg__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-3);
  font-weight: var(--w-normal);
  line-height: var(--lh-snug);
  color: var(--leaf-ink);
}
.reg__tabs { display: flex; flex-wrap: wrap; gap: var(--s-5); }
/* Закладки читаются чернилами: латунь на светлом выцветает. */
.reg__tabs .filter-chip { color: var(--leaf-ink-3); }
.reg__tabs .filter-chip.is-active {
  color: var(--leaf-ink);
  border-bottom-color: var(--leaf-ink);
}
.reg__actions { margin-top: var(--s-6); }
.reg__empty {
  margin: var(--s-8) 0 0;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--leaf-ink-3);
}

/* ⚠️ Явный display перебивает [hidden] из UA-таблицы: без этих правил опись,
   чтение и форма подачи видны все сразу, стопкой. */
.reg__list[hidden],
.reg__read[hidden],
.reg__form[hidden] { display: none; }

.reg__list { display: grid; }

.entry {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--leaf-line);
  font: inherit;
  cursor: pointer;
}
.entry:hover { background: var(--leaf-hi); }
.entry:focus-visible {
  outline: 2px solid var(--leaf-ink);
  outline-offset: -2px;
}
.entry__no {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: var(--leaf-ink-3);
}
.entry__top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.entry__title {
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: var(--lh-snug);
  color: var(--leaf-ink);
}
.entry__kind {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
}
/* Отметка редакции — та же капитель, что и тип работы, но чернилами: разница
   в цвете, а не во второй породе набора. Глифа нет намеренно — лавры в 14px
   читались кляксой. */
.entry__pick {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink);
}
.entry__sum {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--leaf-ink-2);
}
.entry__meta {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: var(--leaf-ink-3);
}
.entry__who { color: var(--leaf-ink); }
/* Статус своей работы: автор должен видеть, где она застряла и почему. */
.entry__status {
  font-family: var(--font-mono);
  font-size: var(--t--2);
  color: var(--leaf-ink-2);
}

/* ── Чтение работы ──────────────────────────────────────────────────────── */

.reg__back { margin-bottom: var(--s-5); }
/* Полупрозрачная обводка рассчитана на тёмный фон — на листе её не видно. */
.reg__back.button--ghost {
  color: var(--leaf-ink-2);
  border-color: var(--leaf-line);
}
.reg__back.button--ghost:hover {
  color: var(--leaf-ink);
  background: var(--leaf-hi);
}
.read__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-3);
  font-weight: var(--w-normal);
  line-height: var(--lh-snug);
  color: var(--leaf-ink);
}
.read__meta {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  line-height: var(--lh-snug);
  color: var(--leaf-ink-3);
}
/* Строка во весь лист не читается: держим её в пределах книжного абзаца. */
.read__body {
  max-width: 68ch;
  margin: var(--s-6) 0 0;
  font-size: var(--t-1);
  line-height: var(--lh-loose);
  white-space: pre-wrap;
  color: var(--leaf-ink-2);
}
.read__pages {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.read__pages img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: var(--sh-2);
}

/* ── Подача работы ──────────────────────────────────────────────────────── */

.reg__form {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.reg__form label {
  display: grid;
  gap: var(--s-2);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
}
.reg__form input,
.reg__form select,
.reg__form textarea {
  width: 100%;
  padding: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--leaf-ink);
  background: var(--leaf-hi);
  border: 1px solid var(--leaf-line);
  border-radius: var(--r-2);
}
.reg__form textarea { min-height: 220px; resize: vertical; }
.reg__form select[multiple] { min-height: 96px; }
.reg__form input:focus-visible,
.reg__form select:focus-visible,
.reg__form textarea:focus-visible {
  outline: 2px solid var(--leaf-ink);
  outline-offset: 1px;
}
.reg__hint {
  margin: 0;
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--leaf-ink-3);
}
.reg__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

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

@media (max-width: 860px) {
  .arch-mast { padding: var(--s-10) 0 var(--s-6); }
  .curator,
  .curator--hand {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5) 0;
  }
  .curator__figure { width: 170px; justify-self: center; }
  .curator__body { padding-bottom: var(--s-8); }
  .curator__say { font-size: var(--t-2); }
  .spread { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* ⚠️ Автопоток раскладывает детей по строкам, и подзаголовок уезжает под
     портрет во вторую строку первой колонки. Портрет занимает колонку целиком,
     остальное идёт справа. */
  .plate {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
  }
  .plate__art { grid-column: 1; grid-row: 1 / -1; }
  .plate > :not(.plate__art) { grid-column: 2; }
  .plate__name { margin-top: var(--s-0); }
  .reg { padding: var(--s-6) var(--s-5) var(--s-8); }
  .entry { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .entry__no { padding-top: var(--s-0); }
}