@charset "UTF-8";
/* ============================================================================
   Бестиарий — глава 8 книги и конструктор сущностей.
   Подключается на bestiary.html (оглавление раздела) и на страницах глав
   bestiary-*.html; порядок слоёв объявлен в main.css.

   Глава — отдельная страница: слева главы и разделы текущей (на телефоне —
   свёрнуто), справа текст книги, внизу переход к соседним главам. Абзацы держат меру строки, а таблицы, характеристики
   и конструктор занимают всю колонку. Иллюстрации — оттиски в раме (§9).
   Карточка сущности набрана машинописью, как «Личный листок»: это тоже
   документ, но тёмный — бумага на сайте только у листа персонажа (§10).
   ========================================================================== */

@layer sections {
  /* — шапка: быстрые переходы ————————————————————————————————— */

  .pagehead__jumps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
  }

  /* — раскладка ——————————————————————————————————————————————— */

  .bestiary-sec {
    padding-block-start: var(--s6);
  }

  .bestiary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  @media (min-width: 64rem) {
    .bestiary {
      grid-template-columns: 14.5rem minmax(0, 1fr);
      gap: var(--s8);
      align-items: start;
    }
  }

  /* — оглавление —————————————————————————————————————————————— */

  .btoc__box {
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    background: var(--ink-0);
  }

  .btoc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 var(--s4);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    cursor: pointer;
    list-style: none;
  }

  .btoc__title::-webkit-details-marker {
    display: none;
  }

  .btoc__title::after {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 1px solid var(--gold);
    border-block-end: 1px solid var(--gold);
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate var(--dur-2) var(--ease);
  }

  .btoc__box[open] > .btoc__title::after {
    rotate: 225deg;
    translate: 0 2px;
  }

  .btoc__list {
    display: grid;
    gap: var(--s4);
    margin: 0;
    padding: 0 var(--s4) var(--s5);
    list-style: none;
  }

  .btoc__list ol {
    display: grid;
    gap: 2px;
    margin: var(--s2) 0 0;
    padding: 0;
    list-style: none;
    border-inline-start: 1px solid var(--red-ink);
  }

  .btoc__list a {
    display: block;
    text-decoration: none;
    line-height: 1.3;
  }

  .btoc__list > li > a {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bone);
  }

  .btoc__list ol a {
    margin-inline-start: -1px;
    padding: 0.28rem 0 0.28rem var(--s3);
    border-inline-start: 1px solid transparent;
    font-size: var(--fs-sm);
    color: var(--bone-dim);
  }

  .btoc__list a:hover {
    color: var(--gold-lt);
  }

  .btoc__list a[aria-current="true"] {
    color: var(--gold-lt);
    border-inline-start-color: var(--gold);
  }

  /* текущая глава: заголовок золотом, под ним её разделы */
  .btoc__list > .is-current > a {
    color: var(--gold-lt);
  }

  .btoc__list > li:not(.is-current) > a {
    color: var(--bone-dim);
    font-weight: 500;
  }

  .btoc__list > li:not(.is-current) > a:hover {
    color: var(--gold-lt);
  }

  /* ### — третий уровень, мельче и с отступом */
  .btoc__list ol ol {
    margin: 0 0 var(--s2) var(--s3);
    border-inline-start-color: var(--ink-3);
  }

  .btoc__list ol ol a {
    padding-block: 0.2rem;
    font-size: var(--fs-xs);
    color: var(--ash);
  }

  .btoc__list .btoc__accent {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }

  @media (min-width: 64rem) {
    .btoc {
      position: sticky;
      top: calc(var(--header-h) + var(--s5));
      max-height: calc(100vh - var(--header-h) - var(--s7));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .btoc__box {
      border: 0;
      background: none;
    }

    .btoc__title {
      min-height: 0;
      padding: 0 0 var(--s4);
      cursor: default;
    }

    .btoc__title::after {
      display: none;
    }

    .btoc__list {
      padding: 0;
    }
  }

  /* — текст книги ————————————————————————————————————————————— */

  .bestiary__body {
    min-width: 0;
  }

  .bchapter > * + * {
    margin-block-start: var(--s4);
  }

  .bchapter p {
    max-width: 68ch;
  }

  .bh {
    scroll-margin-top: calc(var(--header-h) + var(--s5));
  }

  /* ## — раздел */
  .bchapter > .bh--2 {
    margin-block-start: var(--s8);
    font-size: var(--fs-h2);
  }

  /* ### — подраздел: тот же гарнитурный голос, мельче */
  .bchapter > .bh--3 {
    margin-block-start: var(--s7);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--bone);
  }

  /* #### — рубрика: «Особенности», примеры */
  .bchapter > .bh--4 {
    margin-block-start: var(--s6);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .bchapter > .bh:first-child {
    margin-block-start: 0;
  }

  .bchapter > .bh + * {
    margin-block-start: var(--s3);
  }

  /* абзац-особенность: «**Термин:** текст» */
  .feat strong:first-child {
    color: var(--bone);
  }

  /* — справка у типа сущности ———————————————————————————————— */

  .btypes {
    display: grid;
    gap: var(--s2);
    max-width: 68ch;
    margin: 0;
    padding: var(--s4) var(--s5);
    border-inline-start: 2px solid var(--red-deep);
    background: var(--ink-0);
  }

  .btypes dt {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .btypes dd {
    margin: 0 0 var(--s2);
    color: var(--bone);
  }

  /* — таблицы правил ————————————————————————————————————————— */

  .btable-wrap {
    max-width: 44rem;
    overflow-x: auto;
  }

  .btable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }

  .btable--narrow {
    max-width: 24rem;
  }

  .btable caption {
    padding-block-end: var(--s3);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
    text-align: start;
  }

  .btable th,
  .btable td {
    padding: 0.55rem var(--s3);
    border-block-end: 1px solid var(--red-ink);
    text-align: start;
    vertical-align: baseline;
  }

  .btable thead th {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    border-block-end-color: var(--red-deep);
  }

  .btable tbody th {
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--gold);
    white-space: nowrap;
  }

  /* — цитата ————————————————————————————————————————————————— */

  .bquote {
    max-width: 62ch;
    margin: var(--s5) 0;
    padding: var(--s2) 0 var(--s2) var(--s5);
    border-inline-start: 2px solid var(--red);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--bone);
  }

  .bquote p {
    font-style: italic;
  }

  /* — иллюстрации ——————————————————————————————————————————— */

  /* центр — по мере текста, а не по всей колонке: иначе лист съезжает вправо */
  .bchapter > .bart {
    max-width: 68ch;
    margin-block: var(--s7);
  }

  .bart {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    margin: 0;
  }

  .bart__frame {
    display: block;
    width: fit-content;
    max-width: min(100%, 26rem);
    cursor: zoom-in;
    transition: translate var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
  }

  .bart--wide .bart__frame {
    max-width: min(100%, 36rem);
  }

  .bart__frame.art--print > picture > img {
    width: auto;
    max-width: 100%;
    max-height: 78vh;
  }

  .bart__frame:hover {
    translate: 0 -4px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent),
      0 26px 50px -24px color-mix(in oklab, var(--red) 70%, transparent);
  }

  .bart__caption {
    font-size: var(--fs-sm);
    color: var(--ash);
  }

  /* — характеристики ————————————————————————————————————————— */

  .statblock {
    margin-inline: 0;
    border: 1px solid var(--ink-3);
    border-block-start: 2px solid var(--red-deep);
    background: var(--ink-0);
  }

  .statblock__title {
    padding: var(--s3) var(--s4);
    border-block-end: 1px solid var(--ink-3);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .statblock__rows {
    margin: 0;
  }

  .statblock__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1) var(--s4);
    padding: var(--s3) var(--s4);
    border-block-end: 1px solid var(--ink-2);
  }

  .statblock__rows:last-child .statblock__row:last-child {
    border-block-end: 0;
  }

  @media (min-width: 40rem) {
    .statblock__row {
      grid-template-columns: 6.5rem minmax(0, 1fr);
    }
  }

  .statblock__row dt {
    padding-block-start: 0.2em;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .statblock__row dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .statblock__hint {
    display: block;
    margin-block-end: var(--s2);
    font-size: var(--fs-xs);
    color: var(--ash);
  }

  .statblock__vals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .statblock__vals li {
    white-space: nowrap;
    color: var(--bone-dim);
  }

  .statblock__vals b {
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--gold-lt);
  }

  .statblock__note {
    padding: var(--s3) var(--s4);
    border-block-end: 1px solid var(--ink-2);
    font-size: var(--fs-sm);
    color: var(--bone-dim);
  }

  /* короткие характеристики мертвяков и зверей */
  .mini {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--s1) var(--s4);
    max-width: 44rem;
    margin: 0;
    padding: var(--s3) var(--s4);
    border-inline-start: 2px solid var(--red-deep);
    background: var(--ink-0);
    font-size: var(--fs-sm);
  }

  .mini > div {
    display: contents;
  }

  .mini dt {
    padding-block-start: 0.2em;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .mini dd {
    margin: 0;
    color: var(--bone);
  }

  /* ==========================================================================
     КОНСТРУКТОР СУЩНОСТИ
     Чёрный лист с красным светом снизу: инструмент Рассказчика внутри главы.
     ====================================================================== */

  .gen {
    container: gen / inline-size;
    position: relative;
    margin-block: var(--s8);
    padding: clamp(var(--s4), 3vw, var(--s7));
    border: 1px solid var(--red-ink);
    border-radius: var(--r-sharp);
    background: var(--ink-0);
    box-shadow: 0 40px 90px -50px color-mix(in oklab, var(--red) 75%, transparent);
    scroll-margin-top: calc(var(--header-h) + var(--s4));
  }

  .gen__head {
    display: grid;
    gap: var(--s3);
    max-width: 62ch;
  }

  .gen__kicker {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* заголовки конструктора — h4/h5 по месту в главе, но голос у них свой */
  .gen__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--bone);
  }

  .gen__title--sm {
    font-size: var(--fs-h3);
  }

  .gen__lead {
    color: var(--bone-dim);
  }

  .gen__nojs {
    font-size: var(--fs-sm);
    color: var(--ash);
  }

  .gen__tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-block-start: var(--s2);
  }

  .gen__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    margin-block-start: var(--s6);
  }

  @container gen (min-width: 46rem) {
    .gen__grid {
      grid-template-columns: minmax(0, 1fr) 16.5rem;
      align-items: start;
    }

    .gen__aside {
      position: sticky;
      top: calc(var(--header-h) + var(--s4));
    }

  }

  /* — шаги формы ———————————————————————————————————————————— */

  .gen__form {
    display: grid;
    gap: var(--s7);
    min-width: 0;
  }

  .gen__step {
    display: grid;
    gap: var(--s4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gen__legend {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    margin-block-end: var(--s4);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--bone);
  }

  .gen__num {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    align-self: center;
    border: 1px solid var(--red-deep);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--gold);
  }

  .gen__legend-note {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .gen__hint {
    font-size: var(--fs-sm);
    color: var(--ash);
  }

  .gen__row {
    display: grid;
    gap: var(--s2);
  }

  .gen__row--two {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  @container gen (min-width: 34rem) {
    .gen__row--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .gen__pick {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
  }

  .gen__pick > :first-child {
    flex: 1;
    min-width: 0;
  }

  /* сегменты: радиокнопки, похожие на ярлыки */
  .seg,
  .gen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .seg__opt,
  .chip {
    position: relative;
    display: inline-flex;
  }

  .seg__opt input,
  .chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .seg__opt span,
  .chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s4);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    letter-spacing: 0.03em;
    color: var(--bone-dim);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
      color var(--dur-1) var(--ease);
  }

  .seg__opt--num span {
    justify-content: center;
    min-width: 44px;
    padding: 0;
  }

  .seg__opt:hover span,
  .chip:hover span {
    border-color: var(--red-deep);
    color: var(--bone);
  }

  .seg__opt input:checked + span,
  .chip input:checked + span {
    background: var(--red-field);
    border-color: var(--red-field);
    color: var(--bone);
  }

  .seg__opt input:focus-visible + span,
  .chip input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* кубик d10 */
  .die {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
    border-radius: var(--r-sharp);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--gold);
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }

  .die:hover {
    background: var(--gold);
    color: var(--ink-0);
  }

  .die.is-rolling {
    animation: die-roll 480ms var(--ease);
    font-size: 1.05rem;
  }

  @keyframes die-roll {
    0% {
      rotate: -180deg;
      scale: 0.7;
    }
    100% {
      rotate: 0deg;
      scale: 1;
    }
  }

  .gen__pick input {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
  }

  .gen .field input {
    min-height: 44px;
    background: var(--ink-1);
  }

  .gen__pick input:focus {
    border-color: var(--gold);
  }

  .gen__link {
    justify-self: start;
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent);
    text-underline-offset: 0.22em;
  }

  .gen__link:hover {
    color: var(--gold-lt);
  }

  /* — списки свойств и условий ——————————————————————————————— */

  .gen__groups,
  .gen__items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gen__groups {
    gap: var(--s5);
  }

  .gen__items {
    gap: var(--s2);
  }

  .gen__group {
    min-width: 0;
  }

  .gen__group-title {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-block-end: var(--s3);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .gen__group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--red-ink);
  }

  .opt {
    padding: var(--s3) var(--s4);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    background: var(--ink-1);
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  }

  .opt.is-on {
    border-color: var(--red-deep);
    background: color-mix(in oklab, var(--red-ink) 40%, var(--ink-1));
  }

  .opt.is-inherent {
    border-style: dashed;
  }

  .opt.is-locked {
    opacity: 0.55;
  }

  .opt__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
  }

  /* свой чекбокс: системный белый квадрат на чёрном режет глаз */
  .opt__check {
    display: grid;
    place-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--ash);
    border-radius: var(--r-sharp);
    background: var(--ink-0);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }

  .opt__check:hover {
    border-color: var(--bone-dim);
  }

  .opt__check:checked {
    background: var(--red-field);
    border-color: var(--red);
  }

  .opt__check:checked::after {
    content: "";
    width: 10px;
    height: 5px;
    border-inline-start: 2px solid var(--bone);
    border-block-end: 2px solid var(--bone);
    rotate: -45deg;
    translate: 0 -1px;
  }

  .opt__check:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .opt__check:disabled {
    cursor: not-allowed;
  }

  .opt__name {
    flex: 1;
    min-width: 8rem;
    font-weight: 600;
    color: var(--bone);
    cursor: pointer;
  }

  .opt__flag {
    padding: 0.18em 0.6em;
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
  }

  .opt__flag--gold {
    border-color: color-mix(in oklab, var(--gold) 45%, transparent);
    color: var(--gold);
  }

  .opt__flag--muted {
    color: var(--ash);
  }

  .opt__cost {
    min-width: 2.6rem;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    text-align: end;
  }

  .opt__cost--plus {
    color: var(--bone);
  }

  .opt__text {
    margin-block-start: var(--s2);
    padding-inline-start: calc(20px + var(--s3));
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--bone-dim);
  }

  .opt__stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-block-start: var(--s3);
    padding-inline-start: calc(20px + var(--s3));
  }

  .opt__stepper .qty-btn {
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
  }

  .opt__stepper .qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .opt__value {
    min-width: 2ch;
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--bone);
    text-align: center;
  }

  .opt__effect {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    letter-spacing: 0.03em;
    color: var(--gold);
  }

  .opt__param {
    display: block;
    margin-block-start: var(--s3);
    padding-inline-start: calc(20px + var(--s3));
  }

  .opt__param input {
    width: 100%;
    min-height: 42px;
    padding: 0.5rem 0.8rem;
    background: var(--ink-0);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
  }

  .opt__param input:focus {
    border-color: var(--gold);
  }

  /* — итог ——————————————————————————————————————————————————— */

  .gen__panel {
    display: grid;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    background: var(--ink-1);
  }

  .gen__panel-title {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .gen__total {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bone);
  }

  .gen[data-state="bad"] .gen__total output {
    color: var(--gold-lt);
  }

  .gen__range {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ash);
  }

  .meter {
    margin-block: calc(var(--s2) * -1) 0;
  }

  .meter__svg {
    display: block;
    width: 100%;
    height: 14px;
  }

  .meter__track {
    fill: var(--ink-3);
  }

  .meter__band {
    fill: color-mix(in oklab, var(--gold) 38%, transparent);
  }

  .meter__mark {
    fill: var(--bone);
  }

  .gen[data-state="bad"] .meter__mark {
    fill: var(--red);
  }

  .gen__sums,
  .gen__stats {
    display: grid;
    gap: var(--s1);
    margin: 0;
    font-size: var(--fs-sm);
  }

  .gen__sums > div,
  .gen__stats > div {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
  }

  .gen__sums dt,
  .gen__stats dt {
    color: var(--bone-dim);
  }

  .gen__sums dd,
  .gen__stats dd {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--bone);
    text-align: end;
  }

  .gen__stats {
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--ink-3);
  }

  .gen__stats dd {
    color: var(--gold-lt);
  }

  .gen__checks {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .check {
    position: relative;
    padding-inline-start: 1.5rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--bone-dim);
  }

  .check::before {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 1.1rem;
    font-family: var(--font-ui);
    font-weight: 600;
    text-align: center;
  }

  .check--ok::before {
    content: "✓";
    color: var(--ok);
  }

  .check--bad {
    color: var(--bone);
  }

  .check--bad::before {
    content: "✕";
    color: var(--red);
  }

  .check--warn::before {
    content: "!";
    color: var(--warn);
  }

  /* плашка итога внизу экрана, пока конструктор на телефоне в поле зрения */
  .gen__bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s5) calc(clamp(var(--s4), 3vw, var(--s7)) * -1) calc(clamp(var(--s4), 3vw, var(--s7)) * -1);
    padding: var(--s3) var(--s4);
    border-block-start: 1px solid var(--red-deep);
    background: color-mix(in oklab, var(--ink-0) 92%, transparent);
    backdrop-filter: blur(10px);
  }

  .gen__bar-total {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
  }

  .gen__bar-total span {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ash);
  }

  .gen__bar-state {
    flex: 1;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ok);
  }

  .gen[data-state="bad"] .gen__bar-state {
    color: var(--gold-lt);
  }

  .gen__bar-link {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* итог стоит сбоку — плашка не нужна (правило после .gen__bar, иначе проиграет) */
  @container gen (min-width: 46rem) {
    .gen__bar {
      display: none;
    }
  }

  /* — карточка сущности: машинопись на чёрном ————————————————— */

  .gen__result {
    display: grid;
    gap: var(--s5);
    margin-block-start: var(--s8);
    scroll-margin-top: calc(var(--header-h) + var(--s4));
  }

  .gen__aside {
    scroll-margin-top: calc(var(--header-h) + var(--s4));
  }

  .ecard {
    position: relative;
    display: grid;
    gap: var(--s4);
    padding: clamp(var(--s5), 3vw, var(--s7));
    border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
    background: var(--ink-1);
    font-family: var(--font-type);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--bone-dim);
  }

  .ecard__head {
    display: grid;
    gap: var(--s2);
    padding-block-end: var(--s4);
    border-block-end: 1px dashed var(--ink-3);
  }

  .ecard__org {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .ecard__name {
    font-family: var(--font-type);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
  }

  /* штамп: наискосок, как в канцелярии */
  .ecard__stamp {
    position: absolute;
    top: clamp(var(--s4), 3vw, var(--s6));
    right: clamp(var(--s4), 3vw, var(--s6));
    padding: 0.2em 0.6em;
    border: 2px solid currentColor;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    rotate: -6deg;
    opacity: 0.9;
  }

  .ecard__stamp--ok {
    color: var(--ok);
  }

  /* чистый --red на чёрном даёт 2.6:1 — штамп светлее, как выцветшая краска */
  .ecard__stamp--bad {
    color: color-mix(in oklab, var(--red) 55%, var(--bone));
  }

  .ecard__meta,
  .ecard__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin: 0;
  }

  .ecard__meta dt,
  .ecard__stats dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ash);
  }

  .ecard__meta dd,
  .ecard__stats dd {
    margin: 0;
    color: var(--bone);
  }

  .ecard__stats dd {
    font-size: 1.25rem;
    color: var(--gold-lt);
  }

  .ecard__h {
    margin-block-start: var(--s3);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .ecard__list {
    display: grid;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ecard__item b {
    font-weight: 400;
    color: var(--bone);
  }

  .ecard__note {
    color: var(--ash);
  }

  .ecard__text {
    font-size: var(--fs-xs);
    line-height: 1.55;
  }

  .ecard__empty {
    color: var(--ash);
  }

  .ecard__sum {
    padding-block-start: var(--s4);
    border-block-start: 1px dashed var(--ink-3);
    color: var(--bone);
  }

  .ecard__problems {
    color: var(--gold-lt);
  }

  .gen__copied {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    color: var(--ok);
  }

  /* ==========================================================================
     ОГЛАВЛЕНИЕ РАЗДЕЛА (bestiary.html)
     Как оглавление книги: номер, глава, её разделы. Справа — фронтиспис.
     ====================================================================== */

  .bindex {
    display: grid;
    gap: var(--s7);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 64rem) {
    .bindex {
      grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
      gap: var(--s8);
      align-items: start;
    }

    .bindex__art {
      position: sticky;
      top: calc(var(--header-h) + var(--s5));
    }
  }

  .bindex__main {
    display: grid;
    gap: var(--s6);
    min-width: 0;
  }

  .bindex__title {
    margin-block-start: var(--s4);
    padding-block-end: var(--s3);
    border-block-end: 1px solid var(--red-deep);
    font-size: var(--fs-h2);
  }

  /* конструктор — главный инструмент раздела: отдельная плашка со светом */
  .bfeature {
    position: relative;
    display: grid;
    gap: var(--s3);
    padding: clamp(var(--s5), 3vw, var(--s7));
    border: 1px solid var(--red-ink);
    border-radius: var(--r-sharp);
    background: var(--ink-0);
    box-shadow: 0 40px 90px -50px color-mix(in oklab, var(--red) 75%, transparent);
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
  }

  .bfeature:hover {
    border-color: var(--red-deep);
    box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--red) 90%, transparent);
  }

  .bfeature__kicker {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .bfeature__title {
    font-size: var(--fs-h2);
  }

  .bfeature__title a {
    text-decoration: none;
  }

  /* вся плашка — одна ссылка */
  .bfeature__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .bfeature__text {
    max-width: 56ch;
    color: var(--bone-dim);
  }

  .bfeature__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    justify-self: start;
    margin-block-start: var(--s2);
    padding: 0.7rem var(--s5);
    background: var(--red-field);
    border-radius: var(--r-sharp);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone);
    transition: background-color var(--dur-1) var(--ease);
  }

  .bfeature__cta::after {
    content: "→";
  }

  .bfeature:hover .bfeature__cta {
    background: var(--red);
  }

  .bchapters {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bchap {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s1) var(--s4);
    padding: var(--s4) var(--s2) var(--s4) 0;
    border-block-end: 1px solid var(--ink-3);
    transition: background-color var(--dur-1) var(--ease);
  }

  .bchap:hover {
    background: color-mix(in oklab, var(--red-ink) 30%, transparent);
  }

  .bchap__num {
    grid-row: span 2;
    padding-block-start: 0.3em;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gold);
    text-align: end;
  }

  .bchap__title {
    font-size: var(--fs-h3);
  }

  .bchap__title a {
    text-decoration: none;
  }

  .bchap__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .bchap:hover .bchap__title a {
    color: var(--gold-lt);
  }

  .bchap__sub {
    font-size: var(--fs-sm);
    color: var(--bone-dim);
  }

  .bindex__art .bart__frame {
    max-width: 100%;
  }

  @media (max-width: 63.99rem) {
    .bindex__art .bart__frame {
      max-width: min(100%, 22rem);
    }
  }

  /* — соседние главы ————————————————————————————————————————— */

  .bpager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    max-width: 68ch;
    margin-block-start: var(--s9);
    padding-block-start: var(--s5);
    border-block-start: 1px solid var(--red-deep);
  }

  @media (min-width: 40rem) {
    .bpager {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .bpager__link {
    display: grid;
    gap: var(--s1);
    padding: var(--s4);
    border: 1px solid var(--ink-3);
    border-radius: var(--r-sharp);
    text-decoration: none;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  }

  .bpager__link:hover {
    border-color: var(--red-deep);
    background: color-mix(in oklab, var(--red-ink) 30%, transparent);
  }

  .bpager__link--next {
    text-align: end;
  }

  .bpager__dir {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .bpager__link--prev .bpager__dir::before {
    content: "← ";
  }

  .bpager__link--next .bpager__dir::after {
    content: " →";
  }

  .bpager__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bone);
  }
}

/* — печать ————————————————————————————————————————————————————————————
   Кнопка «Распечатать карточку» ставит на <html> data-print="entity":
   на бумагу уходит только карточка, чёрным по белому. Обычная печать
   страницы выводит текст главы без интерфейса. */

@media print {
  .btoc,
  .pagehead__jumps,
  .gen__tools,
  .gen__bar,
  .die,
  .gen__result .cluster {
    display: none !important;
  }

  :root[data-print="entity"] body * {
    visibility: hidden;
  }

  :root[data-print="entity"] .ecard,
  :root[data-print="entity"] .ecard * {
    visibility: visible;
  }

  :root[data-print="entity"] .ecard {
    position: absolute;
    inset: 0 0 auto 0;
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  :root[data-print="entity"] .ecard * {
    color: #000 !important;
  }

  :root[data-print="entity"] .ecard__stamp {
    border-color: #000;
  }
}