/* pp-base — типографічні ролі й контейнер. Завантажується СКРІЗЬ, тому
   не містить жодного глобального (елементного) селектора: на легасі-сторінці
   такий селектор поїхав би у стару верстку. */

.pp-title-50 { font: 600 50px/1.2 var(--pp-font); }
.pp-title-42 { font: 600 42px/1.2 var(--pp-font); }
.pp-title-34 { font: 600 34px/1.4 var(--pp-font); }
.pp-title-26 { font: 600 26px/1.4 var(--pp-font); }
.pp-title-20 { font: 600 20px/1.4 var(--pp-font); }
.pp-title-16 { font: 600 16px/1.4 var(--pp-font); }

.pp-body-18 { font: 400 18px/1.6 var(--pp-font); }
.pp-body-16 { font: 400 16px/1.6 var(--pp-font); }
.pp-body-14 { font: 400 14px/1.6 var(--pp-font); }
.pp-body-12 { font: 400 12px/1.6 var(--pp-font); }

.pp-btn-16 { font: 600 16px/1.2 var(--pp-font); }
.pp-btn-14 { font: 600 14px/1.2 var(--pp-font); }

.pp-caps-14 { font: 400 14px/1.4 var(--pp-font); letter-spacing: 4px; text-transform: uppercase; }



.pp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Єдиний контейнер публічної частини. max-width 1288 + padding 20 дає рівно
   ту колонку, що в макеті: 1248 на 1440 (візуально 96px по краях) і 335 на 375.
   Ті самі числа, що в легасі-.container теми, тож нові блоки стоять у створ
   зі старими сторінками, поки вони ще живі. */
.pp-container {
  width: 100%;
  max-width: calc(var(--pp-container) + var(--pp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}

/* Поява елемента, який щойно вставили в DOM або показали, знявши [hidden].
   Анімація (а не transition) саме тому, що стартового стану немає:
   програвається один раз у момент, коли елемент став відображатись. */
@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}