/* ==========================================================================
   ЗАМЕТКА ОТ РАЗРАБОТЧИКА НА ЭТИКЕТКЕ
   Рукописный листок, приколотый к музейной табличке: не описание работы,
   а слово того, кто её делал. Отличается от остальной этикетки нарочно —
   человек должен видеть, что это говорит живой человек, а не музей.
   ========================================================================== */

/* Листок бумаги, приколотый к табличке: тонкая рамка по всему периметру,
   мягкая тень под ним и лёгкий наклон, будто прикололи от руки.

   Раньше здесь была толстая полоска слева — самый узнаваемый приём
   «нейросетевой» вёрстки, и в этом проекте он к тому же встречался уже
   в третьем месте. Наклон и тень делают ту же работу — отделяют голос
   человека от служебного текста музея, — но выглядят как предмет, а не
   как рамка из шаблона. */
.mynote {
  position: relative;
  margin-top: 18px;
  padding: 14px 16px 15px;
  background:
    linear-gradient(180deg, rgba(255, 215, 160, .085), rgba(255, 215, 160, .025)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 1px, transparent 1px 3px);
  border: 1px solid rgba(255, 206, 152, .22);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 235, 196, .1);
  transform: rotate(-.45deg);
  transform-origin: top center;
}

.mynote__cap {
  color: rgba(255, 206, 152, .82);
  margin-bottom: 6px;
}

.mynote__text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.58;
  font-style: italic;
  color: rgba(239, 227, 210, .82);
}

/* канцелярская кнопка, которой листок приколот */
.mynote::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #f3d9a8, #8a734a 70%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

@media (max-width: 767px) {
  .mynote { margin-top: 13px; padding: 11px 13px 12px 14px; }
  .mynote__text { font-size: 13.5px; }
}