/* article.css — лист статьи. Подключается только страницами статей. */

:root {
  --sheet-paper: #d8ffcf;
  --sheet-ink: #000000;
  /* Линейки и приглушённый текст заданы прозрачным чёрным, а не своим цветом:
     так они остаются производными от бумаги и не спорят с ней при смене её
     оттенка. Нейтральный серый #d3d3d3 на этой бумаге давал 1.4:1 — линейка
     просто пропадала. */
  --sheet-rule: rgba(0, 0, 0, 0.22);
  /* 0.6, а не 0.5: ярлыки шапки набраны 12 пикселями, а мелкому тексту нужно
     4.5:1. На прежней светло-серой бумаге 0.5 проходило, на этой давало 3.9:1. */
  --sheet-muted: rgba(0, 0, 0, 0.6);
  /* Подложка страницы белая — как и фон самого сайта (--color-background
     в style.css). Лист отделяется от неё цветом бумаги и мягкой тенью,
     контраст фона для этого не нужен. */
  --sheet-backdrop: #ffffff;
  /* Зерно бумаги. Шум рисуется процедурно фильтром SVG прямо в data-URI:
     файла-картинки нет, значит нечего выкладывать и нечему пикселиться при
     увеличении. Плитка 180×180 со stitchTiles стыкуется без швов.

     Шум переведён в альфу над чёрным, то есть работает только на затемнение.
     Режимы смешивания здесь бесполезны: в #D8FFCF зелёный канал уже 255,
     осветлять его некуда, и overlay двигал только красный с синим — зерно
     читалось как смена насыщенности, а не яркости, и на светлой бумаге
     пропадало. Плата за видимость: средний тон садится примерно до #C9EDC1,
     потому что от упёртого в потолок канала можно идти только вниз.
     Сила — opacity внутри SVG. */
  --sheet-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  --sheet-max: 672px;
  /* Отступ листа от краёв экрана. Снизу не применяется намеренно: лист
     уходит за нижнюю границу окна, как в образце, — так он читается как
     продолжающийся документ, а не как карточка, положенная на подложку. */
  --sheet-inset: clamp(16px, 4vh, 56px);
  --sheet-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.article-body {
  margin: 0;
  min-height: 100vh;
  background: var(--sheet-backdrop);
}

.sheet {
  box-sizing: border-box;
  background-color: var(--sheet-paper);
  background-image: var(--sheet-grain);
  color: var(--sheet-ink);
  font-family: var(--sheet-mono);
  font-size: 18px;
  line-height: 1.75;
  padding: 40px clamp(20px, 5vw, 72px) 64px;
}

.sheet__head {
  margin-bottom: clamp(32px, 6vh, 64px);
  border-top: 1px solid var(--sheet-rule);
}

.sheet__row {
  /* Ярлык прижат к значению через тот же отступ, что и в нижней строке:
     во всей шапке одна конвенция — «пары ярлык-значение», а не таблица.
     Раньше здесь была фиксированная колонка под ярлык, и SUBJECT отбивался
     от значения заметно сильнее, чем DOC. NO. и UPDATE. Цена решения:
     если однажды появится LOCATION, его значение начнётся на один знак
     правее, чем у SUBJECT, — в парной вёрстке это ожидаемо и не читается
     как ошибка, в табличной читалось бы. */
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sheet-rule);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* DATE, DOC. NO. и UPDATE стоят в ряд одной строкой, а не столбиком:
   это служебные отметки, и вертикально они съедали половину шапки. */
.sheet__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 4vw, 48px);
  row-gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sheet-rule);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sheet__cell {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

/* Правая половина строки: содержимое прижато к правому краю листа. */
.sheet__cell--right {
  justify-content: flex-end;
  text-align: right;
}

.sheet__label { color: var(--sheet-muted); flex: none; }
.sheet__row .sheet__value { min-width: 0; }
.sheet__value { color: var(--sheet-ink); }

.sheet__title {
  margin: 0 0 clamp(24px, 4vh, 40px);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sheet__body { max-width: 74ch; }
.sheet__body h2 {
  margin: clamp(32px, 5vh, 52px) 0 12px;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sheet__body p { margin: 0 0 18px; }
/* text-decoration задаётся явно по той же причине: на главной действует
   `a { text-decoration: none }`, и в оверлее ссылки теряли подчёркивание. */
.sheet__body a { color: var(--sheet-ink); text-decoration: underline; text-underline-offset: 3px; }
.sheet__body img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
.sheet__body ul, .sheet__body ol { margin: 0 0 18px; padding-left: 24px; }
.sheet__body li { margin: 0 0 8px; }
.sheet__body blockquote {
  margin: 0 0 18px;
  padding: 12px 0 12px 12px;
  border-left: 2px solid var(--sheet-rule);
  color: var(--sheet-muted);
}
.sheet__body table {
  margin: 0 0 18px;
  border-collapse: collapse;
  width: 100%;
}
.sheet__body th, .sheet__body td {
  padding: 9px 12px;
  border: 1px solid var(--sheet-rule);
  text-align: left;
}
.sheet__body th { font-weight: 600; }
.sheet__body pre {
  margin: 0 0 18px;
  padding: 12px;
  /* Тонировка бумаги, а не цвет подложки страницы: серое пятно на зелёном
     листе читалось бы как чужеродное. */
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--sheet-rule);
  overflow-x: auto;
  font-size: 15px;
}
.sheet__body code { font-family: var(--sheet-mono); }

/* Лист вставляется в главную, где подключён style.css с правилами по голым
   тегам. Его `footer { background: белый; отрицательные поля }` накрывал
   подвал листа — и только в режиме оверлея, потому что на отдельной странице
   style.css не подключается. Гасим явно: лист обязан выглядеть одинаково,
   куда бы его ни вставили. */
.sheet__foot {
  margin: clamp(40px, 7vh, 72px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--sheet-rule);
  background: none;
}
.sheet__back {
  color: var(--sheet-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.sheet__back:hover { color: var(--sheet-ink); }

/* Режим страницы: холодный заход по прямой ссылке */
.sheet--page {
  max-width: var(--sheet-max);
  margin: var(--sheet-inset) auto 0;
  /* Короткая статья тоже должна доходить до низа экрана, иначе под листом
     проглядывает подложка и он опять превращается в карточку. */
  min-height: calc(100vh - var(--sheet-inset));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
  /* Кегль на узком экране не уменьшается: 18 читается и на телефоне,
     а разный размер между устройствами ломал бы ритм набора. */
  /* На телефоне лист занимает весь экран, поэтому подложка под ним — та же
     бумага: иначе за панелью Safari оставалась бы белая полоса, ведь панель
     красится под фон страницы у нижнего края. */
  .article-body {
    background-color: var(--sheet-paper);
    /* То же зерно, что на листе: без него подложка светлее самого листа
       на величину среднего затемнения, и в полосе под панелью Safari
       виден стык. */
    background-image: var(--sheet-grain);
  }

  /* Нижний отступ растёт на высоту панели: сам лист уходит под неё, а текст
     из-под неё выныривает. 100dvh, а не 100vh, — vh на iOS считается по
     самому большому положению панелей, и при развёрнутых низ листа
     оказывался бы ниже экрана. */
  .sheet { padding: 28px 18px calc(48px + env(safe-area-inset-bottom, 0px)); }
  .sheet--page { min-height: 100dvh; }
  .sheet__row { font-size: 11px; }
  .sheet__meta { grid-template-columns: 1fr; font-size: 11px; }
  .sheet__cell--right { justify-content: flex-start; text-align: left; }
  .sheet--page { margin: 0; min-height: 100vh; box-shadow: none; }
}