/* THE DIVINE INDEX — типографика прежде интерфейса.
   Никаких панелей, теней и рамок: только бумага, чернила и волосяные линии. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --verse-size: .9375rem;
  --verse-lh: 1.92rem;    /* общий шаг стиха и маргинального номера */
  --measure: 34rem;       /* книжная колонка, а не вся ширина экрана */
  --hair: color-mix(in srgb, var(--ink) 18%, transparent);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100dvh;
  display: grid;
  /* Четыре к одному — текст, указатель. В fr, а не в процентах: доли
     считаются от площади самих панелей, без волосяной линии и нижней
     строки. При перетаскивании --top подменяется на пиксели. */
  grid-template-rows: var(--top, 4fr) 1px minmax(0, 1fr) auto;

  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;   /* иначе колонки чисел «дышат» */
  font-feature-settings: "tnum" 1;
  overflow: hidden;
}

.pane {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;         /* панели прокручиваются независимо */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}

/* ─── разделитель: волосяная линия, которую можно тянуть ──────────────────── */

#divider {
  position: relative;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  cursor: row-resize;
}
#divider::after {                        /* зона захвата шире самой линии */
  content: "";
  position: absolute;
  inset: -6px 0;
}
#divider:focus-visible { outline: none; background: var(--crimson); }
body.dragging { cursor: row-resize; user-select: none; }

/* ─── верхняя панель: произведение ────────────────────────────────────────── */

/* position задаёт систему координат: волна ищет видимые строки по offsetTop,
   и он должен отсчитываться от самой панели, а не от body. */
#text {
  position: relative;
  padding: 2rem clamp(1.25rem, 6vw, 6rem) 4rem;
}

/* стих держится книжной колонки; указатель, наоборот, занимает всю ширину */
#text > * { max-width: var(--measure); margin-inline: auto; }

/* Слов на странице не осталось: заглавие, кантика, песнь и подзаголовок —
   такие же номера, как стих. Иерархию держит только кегль и разрядка,
   поэтому ступени заданы явно и убывают сверху вниз. */
.work {
  margin: 0 0 1.75rem;
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;
  text-align: center;
}

.cantica {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-indent: .38em;
  text-align: center;
  color: var(--crimson);
}

.canto {
  margin: 0 0 .4rem;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-indent: .28em;
  text-align: center;
}

.argument {
  margin: 0 0 1.75rem;
  font-size: .8125rem;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 55%, var(--ground));
}

.terzina {
  display: grid;
  grid-template-columns: 3ch 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: 1.9rem;
}

.tnum {
  grid-column: 1;
  text-align: right;
  font-size: .6875rem;
  line-height: var(--verse-lh);          /* тот же шаг — номер садится на стих */
  color: var(--flesh);
}

.lines { grid-column: 2; }

.line {
  margin: 0;
  font-size: var(--verse-size);
  line-height: var(--verse-lh);
  white-space: pre-wrap;                 /* пунктуация хранится буквально */
  padding-left: 1.6em;                   /* висячий отступ: продолжение */
  text-indent: -1.6em;                   /* стиха не путается с новой строкой */
}

/* Номер под курсором. Красится диапазоном символов, а не элементом:
   элементов на слова больше нет, их было 80 739 на текст. */
::highlight(lit) { color: var(--crimson); }

.nums { cursor: default; }

/* сноска: звёздочка без скобок — скобки принадлежат только указателю */
.note {
  font-size: .625em;
  vertical-align: .55em;
  color: var(--crimson);
}

/* Гравюра встаёт в ту же колонку, что и стих: та же сетка, что у терцины,
   поэтому её левый край всегда совпадает с левым краем строк. */
figure.plate {
  display: grid;
  grid-template-columns: 3ch 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  margin: 2.75rem 0;
}

figure.plate img {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  max-height: 24rem;
  image-rendering: pixelated;
}

/* ─── нижняя панель: указатель ────────────────────────────────────────────── */

/* Виртуальный список: .sizer держит высоту прокрутки за все 20 106 статей,
   .viewport несёт только видимую полосу и сдвигается трансформацией. */
#index { position: relative; }

#index .sizer { width: 1px; }

#index .viewport {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  align-content: start;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  will-change: transform;
}

.e {
  display: flex;
  gap: .6ch;
  align-items: baseline;
  line-height: 2.05;
  font-size: .8125rem;
  cursor: pointer;
  transition: color .18s ease;
}

.e i { font-style: normal; }             /* <i> здесь — разметка, не курсив */

.e .n {
  flex: none;
  min-width: 4ch;
  text-align: right;
  font-size: .6875rem;
  color: var(--laurel);
  opacity: .55;
  transition: opacity .18s ease;
}

.e .s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e.lit { color: var(--crimson); }
.e.lit .n { opacity: 1; color: var(--crimson); }

#index .empty {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 2.05;
  font-size: .8125rem;
  font-style: italic;
  color: var(--flesh);
}

/* ─── нижняя строка ───────────────────────────────────────────────────────── */

#bar {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem);
  padding: .55rem clamp(1.25rem, 6vw, 6rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: .6875rem;
}

#bar .title {
  flex: none;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, var(--ground));
}

#search {
  flex: none;
  width: 11rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
#search::placeholder { color: color-mix(in srgb, var(--ink) 28%, var(--ground)); }
#search:focus {
  outline: none;
  border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
#search::-webkit-search-cancel-button { display: none; }

#status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--deep);
}
#status .sep { color: var(--flesh); padding: 0 .5ch; }

#mode {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, var(--ground));
  cursor: pointer;
  transition: color .18s ease;
}
#mode:hover { color: var(--crimson); }

/* back to the rest of the projects */
#home {
  flex: none;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 45%, var(--ground));
  transition: color .18s ease;
}
#home:hover { color: var(--crimson); }
#mode .off { display: none; }

/* ─── режим чтения ────────────────────────────────────────────────────────── */

body.reading #mode .on  { display: none; }
body.reading #mode .off { display: inline; }

/* гравюра подчиняется тому же правилу, что и слово: поле или подлинник */
body.reading figure.plate img { image-rendering: auto; }

/* ─── мобильный ───────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  #text { padding-top: 1.5rem; }
  .work { font-size: 1.5rem; }
  #bar { flex-wrap: wrap; row-gap: .4rem; }
  #search { width: 8rem; }
  #status { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}