/* v34: как выглядит цитата с вопросом
   ==================================================================
   Прежний вид (версия 33) уже был опрятен: знак цитаты слева, источник
   под текстом, тёмная подложка поверх коллажа. Здесь добавлено то, чего
   в данных прежде не было и о чём просил владелец, — ВОПРОС ИНТЕРВЬЮЕРА.

   Как подан вопрос и почему именно так:

   ВЫШЕ ОТВЕТА И МЕЛЬЧЕ. Вопрос служебный: он нужен, чтобы понять ответ,
   но читают ради ответа. Поэтому он меньше, глуше и отделён линией.

   БЕЗ КАВЫЧЕК. Знак цитаты стоит у ответа, а не у вопроса: цитируется
   Летов, а спрашивающий лишь задаёт рамку.

   ИМЯ СПРАШИВАЮЩЕГО впереди, если известно. В «Оффлайне» это живые люди
   с городами — «Денис (Санкт-Петербург)», «Максим Слюсарев (Донецк)», —
   и это придаёт беседе лицо.

   НАЙДЕННОЕ ИМЯ ПОДСВЕЧЕНО. В отрывке на шесть строк читатель иначе
   ищет глазами, при чём тут этот исполнитель.
*/

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

.q34 {
  position: relative;
  margin: 0 0 16px;
  padding: 15px 20px 13px 30px;
  max-width: 70ch;
  border-left: 2px solid rgba(201, 162, 39, .3);
  border-radius: 0 6px 6px 0;
  /* Подложка. На пёстром коллаже обложек текст без неё не читается —
     это выяснилось на снимке страницы в версии 33. */
  background: linear-gradient(180deg,
    rgba(14, 12, 20, .84), rgba(14, 12, 20, .76));
  backdrop-filter: blur(3px) saturate(.85);
  -webkit-backdrop-filter: blur(3px) saturate(.85);
}

/* Прямая речь Летова — линия отчётливее, подложка теплее. */
.q34.q34-egor {
  border-left-color: rgba(201, 162, 39, .72);
  background: linear-gradient(180deg,
    rgba(23, 18, 12, .88), rgba(18, 15, 12, .81));
}
.q34.q34-other { border-left-color: rgba(150, 170, 210, .36); }
.q34.q34-ask { border-left-color: rgba(150, 170, 210, .24); }
.q34.q34-text { border-left-color: rgba(170, 165, 185, .26); }

/* ---------- вопрос интервьюера ---------- */

.q34-ask {
  margin: 0 0 11px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .9375rem;
  line-height: 1.5;
  color: #a9a2bb;
}
.q34-by {
  display: block;
  margin-bottom: 3px;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7d7690;
}
.q34-ask-t {
  font-style: italic;
}
/* Тире перед вопросом — так в русском наборе подают реплику. */
.q34-ask-t::before {
  content: '— ';
  opacity: .6;
  font-style: normal;
}

/* ---------- текст цитаты ---------- */

.q34-t {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #e9e4f2;
  /* Переносы отключены: браузер рвал «как слы-шится», и в узкой колонке
     такие разрывы читаются как опечатки. */
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: pretty;
}
.q34.q34-egor .q34-t {
  font-size: 1.125rem;
  color: #f5f1fb;
}

/* Открывающая ёлочка как знак прямой речи — у ОТВЕТА, не у вопроса. */
.q34-t::before {
  content: '«';
  position: absolute;
  left: 8px;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 32px;
  line-height: 1;
  margin-top: -4px;
  color: rgba(201, 162, 39, .34);
  pointer-events: none;
}
.q34.q34-egor .q34-t::before { color: rgba(201, 162, 39, .56); }

/* Отрывок из длинной беседы: отточие спереди и сзади показывает, что
   речь шла и до, и после. Без этого отрывок выглядит оборванным. */
.q34-cut::after { content: '\00a0…'; opacity: .45; }

/* Подсветка найденного имени. Не цветом, а лёгкой подложкой: цвет в
   тексте цитаты выглядел бы как чужая правка. */
.q34-hit {
  background: rgba(201, 162, 39, .17);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: 0 1px 0 rgba(201, 162, 39, .35);
}

/* ---------- источник ---------- */

.q34-src {
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #9a93ab;
  letter-spacing: .01em;
}
.q34-who { color: #c9a227; font-weight: 600; }
.q34.q34-other .q34-who,
.q34.q34-ask .q34-who { color: #9db2d8; }
.q34-ch { font-style: italic; opacity: .85; }
.q34-sep { opacity: .45; margin: 0 6px; }

.q34-src a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 147, 171, .4);
}
.q34-src a:hover { color: #d8d2e6; }

.q34-also {
  margin-top: 3px;
  font-size: .78125rem;
  color: #7d7690;
}

/* ---------- список ---------- */

.q34-list { margin: 14px 0 4px; }
.q34-list .q34-extra { display: none; }
.q34-list.q34-open .q34-extra { display: block; }

.q34-more {
  margin-top: 4px;
  padding: 7px 14px;
  border: 1px solid rgba(159, 200, 255, .3);
  border-radius: 5px;
  background: rgba(159, 200, 255, .06);
  color: #9fc8ff;
  font-size: .875rem;
  font-family: inherit;
  cursor: pointer;
}
.q34-more:hover {
  background: rgba(159, 200, 255, .13);
  color: #cfe2ff;
}

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