/* v33: как выглядит цитата
   ==================================================================
   Прежде цитата была строкой текста с крикливой плашкой сверху:

       🎤 Говорит Егор
       И вот тогда и возникла “Гражданская оборона”, когда я Кузю…

   Плашка врала (её ставили всем подряд), текст обрывался на 160-м
   знаке, кавычки были вперемешку, названия групп кричали прописными.

   Что здесь сделано и почему именно так:

   ЗНАК ЦИТАТЫ вместо плашки. Крупная открывающая ёлочка слева —
   привычный типографский знак прямой речи. Он говорит «это цитата»
   молча, не занимая строки и не требуя слов.

   ИСТОЧНИК ПОД ТЕКСТОМ, не над. Сперва читают речь, потом смотрят,
   откуда она. Обратный порядок заставляет читать служебное раньше
   главного.

   ЛЕВАЯ ЛИНИЯ разной густоты вместо ярлыка: у прямой речи Летова она
   отчётливая и тёплая, у текста из книги — приглушённая. Разница видна
   мгновенно и без чтения подписи.

   РАЗМЕР. Цитата набрана крупнее окружающего текста и с большим
   межстрочным расстоянием: это не подпись, это главное на странице.

   МЕРА СТРОКИ. Ширина ограничена 62 знаками — при большей строке глаз
   теряет начало следующей.
*/

/* ---------- сама цитата ---------- */

.q33 {
  position: relative;
  margin: 0 0 14px;
  padding: 16px 20px 14px 30px;
  border-left: 2px solid rgba(201, 162, 39, .3);
  border-radius: 0 6px 6px 0;
  /* Подложка по ширине текста, а не по всей колонке: иначе справа
     остаётся широкая пустая полоса, и блок выглядит незаконченным.
     68 знаков — 62 на текст плюс отступы. */
  max-width: 68ch;

  /* ПОДЛОЖКА. Это оказалось важнее всей типографики. На снимке
     страницы видно, что цитата лежала прямо на пёстром коллаже
     обложек: сквозь текст просвечивали лица, цветы, узоры. Читать
     трудно, и именно от этого набор кажется неопрятным, сколько ни
     подбирай шрифт.

     Подложка тёмная и полупрозрачная: она отделяет текст от фона, но
     не прячет картину целиком — коллаж остаётся частью страницы. */
  background: linear-gradient(180deg,
    rgba(14, 12, 20, .82), rgba(14, 12, 20, .74));
  backdrop-filter: blur(3px) saturate(.85);
  -webkit-backdrop-filter: blur(3px) saturate(.85);
}

/* Открывающая ёлочка как знак прямой речи. Крупная, но глухая по
   цвету: она должна читаться как типографский знак, а не как картинка. */
.q33::before {
  content: '«';
  position: absolute;
  left: 8px;
  top: 6px;
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: 34px;
  line-height: 1;
  color: rgba(201, 162, 39, .34);
  pointer-events: none;
}

/* Прямая речь Летова — линия отчётливее и теплее. */
.q33.q33-egor {
  border-left-color: rgba(201, 162, 39, .7);
  /* Прямая речь Летова — подложка чуть теплее и плотнее: её читают
     внимательнее всего. */
  background: linear-gradient(180deg,
    rgba(22, 17, 12, .87), rgba(18, 15, 12, .8));
}
.q33.q33-egor::before { color: rgba(201, 162, 39, .58); }

/* Слова собеседника — линия холодная, чтобы не путать с речью Летова. */
.q33.q33-other { border-left-color: rgba(150, 170, 210, .34); }
.q33.q33-other::before { color: rgba(150, 170, 210, .3); }

/* Вопрос, заданный Летову. Показываем узнаваемо: это не высказывание,
   а обращение к нему. */
.q33.q33-ask {
  border-left-color: rgba(150, 170, 210, .24);
  /* Вопрос — приглушённее остального: это не высказывание. */
  background: linear-gradient(180deg,
    rgba(12, 13, 20, .7), rgba(12, 13, 20, .64));
}
.q33.q33-ask::before { content: '?'; font-size: 27px; left: 9px; top: -2px; }

.q33-t {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #e9e4f2;
  max-width: 62ch;
  text-wrap: pretty;
  /* ПЕРЕНОСЫ ОТКЛЮЧЕНЫ. С hyphens:auto браузер разорвал «как слышится»
     на «как слы-шится» — в узкой колонке такие разрывы встречаются
     часто и читаются как опечатки. Без переносов правый край рваный,
     но текст целый; для цитаты это важнее ровного края. */
  hyphens: none;
  -webkit-hyphens: none;
}

/* Речь Летова набрана чуть светлее и крупнее: она здесь главная. */
.q33.q33-egor .q33-t {
  font-size: 1.125rem;
  color: #f4f0fb;
}

/* Пометка «начало отрезано»: цитата начинается не с начала фразы.
   Показываем отточием перед текстом, а не словами, — так принято в
   наборе, и это не отвлекает. */
.q33-part::before {
  content: '…\00a0';
  opacity: .5;
}

/* ---------- источник под цитатой ---------- */

.q33-src {
  margin-top: 7px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #9a93ab;
  letter-spacing: .01em;
  max-width: 62ch;
}
.q33-who {
  color: #c9a227;
  font-weight: 600;
}
.q33.q33-other .q33-who,
.q33.q33-ask .q33-who { color: #9db2d8; }

.q33-sep { opacity: .45; margin: 0 6px; }

.q33-src a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 147, 171, .38);
}
.q33-src a:hover { color: #d8d2e6; border-bottom-color: rgba(216, 210, 230, .6); }

/* ---------- продолжение ---------- */

/* Вместо обрезки многоточием — раскрытие. Кнопка неприметная: она
   нужна лишь тем, кому цитаты мало. */
.q33-more {
  margin-top: 6px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: #9fc8ff;
  font-size: .8125rem;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 1px dashed rgba(159, 200, 255, .4);
}
.q33-more:hover { color: #cfe2ff; }

.q33-tail { display: none; }
.q33.q33-open .q33-tail { display: inline; }

/* ---------- перечень цитат ---------- */

.q33-list {
  margin: 14px 0 4px;
  /* Разделителей между цитатами нет намеренно: левые линии сами
     разграничивают, а лишние черты дробят страницу. */
}

/* Первая цитата отделена от заголовка чуть больше остальных. */
.q33-list > .q33:first-child { margin-top: 4px; }

@media (max-width: 700px) {
  .q33 { padding: 13px 14px 12px 24px; margin-bottom: 11px; }
  .q33::before { font-size: 27px; left: 5px; top: 5px; }
  .q33-t { font-size: 1rem; }
  .q33.q33-egor .q33-t { font-size: 1.0625rem; }
  .q33-src { font-size: .78125rem; }
}