/* Страницы для чтения — план, модель угроз, страницы разработчикам.
 *
 * Сцены здесь нет: длинный документ не повод держать видеокарту занятой.
 * Позади лежит её кадр под плотным затемнением — то же место, только
 * тише. Общее у этих страниц — шапка документа, оглавление слева и
 * колонка текста; своё у каждой — в plan.css и docs.css.
 */

.read-page .dim {
  opacity: 0.88;
}

/* The still frame carries the panes' writing, and under a long document
   that writing is noise. Blurred, the panes become soft light and the
   sphere stays; scaled so the blur has no hard edge. */
.read-page .backdrop {
  filter: blur(28px);
  transform: scale(1.08);
}

.read-hero {
  padding: 132px var(--gutter) 0;
}

.read-hero h1 {
  margin: 0 0 16px;
}

.read-lead {
  margin: 0 0 12px;
  max-width: 52ch;
  font-size: 19px;
  line-height: 1.55;
}

.built {
  margin: 0 0 40px;
  max-width: 72ch;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.built a {
  color: var(--ink-soft);
  text-decoration-color: rgb(185 168 255 / 0.5);
  text-underline-offset: 3px;
}

.built code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgb(236 234 246 / 0.07);
  font: 400 13.5px/1.5 var(--mono);
  color: var(--ink);
}

/* --- тело: оглавление и текст ------------------------------------------ */

.read-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  padding: 72px var(--gutter) 0;
}

.rail {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.rail ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail > ul > li {
  margin-bottom: 14px;
}

.rail > ul > li > a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.rail li li a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.rail li li a:hover {
  color: var(--ink-soft);
}

.rail a[aria-current] {
  color: var(--ink);
  border-left-color: var(--lavender);
}

.read-main {
  min-width: 0;
}

@media (max-width: 1040px) {
  .read-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Оглавление уходит: у каждой страницы наверху есть короткий путь
     туда же — сводка рубежей у плана, список разделов у документов. */
  .rail {
    display: none;
  }
}

@media (max-width: 760px) {
  .read-hero {
    padding-top: 104px;
  }

  .read-lead {
    font-size: 17px;
  }

  .read-body {
    padding-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail li li a {
    transition: none;
  }
}