/* ---------- Ариша с гитарой: правый верхний угол первого экрана ----------
   Отдельный файл, чтобы не пересекаться с остальными стилями и анимациями.
   Рисунок и вся его анимация (покачивание, бросок гитары раз в 10 секунд)
   живут внутри assets/girl/girl.svg, поэтому имена анимаций ни с чем не спорят. */
.girl {
  --gw: clamp(56px, 6.8vw, 100px);            /* ширина самой девочки */
  position: absolute; z-index: -1; pointer-events: none;
  /* сверху оставляем место, куда взлетает гитара, чтобы она не заходила на меню */
  top: calc(var(--gw) * .8 + .5rem);
  right: calc(var(--gut, 16px) + .25rem);
  width: var(--gw);
  aspect-ratio: 526 / 1346;
}
/* картинка больше рамки: запас сверху и по бокам, чтобы гитара в полёте не обрезалась */
.girl img {
  position: absolute; display: block; max-width: none; height: auto;
  left: -51.33%; top: -30.46%; width: 205.32%;
}
/* на телефоне девочка крупная (в 3 раза больше прежнего) и стоит справа от подзаголовка,
   под заголовком; подзаголовок сужается, афиша начинается под её ногами */
@media (max-width: 600px) {
  .hero:has(> .girl) {
    --girl-w: min(120px, 31vw);
    --title-h: max(112.8px, 25.11vw);          /* две строки заголовка */
  }
  .girl {
    --gw: var(--girl-w); right: 8px;
    top: calc(2rem + var(--title-h) + 4px);
  }
  .hero:has(> .girl) .hero__lead {
    max-width: min(15em, calc(100% - var(--girl-w) - .75rem));
    /* высота строки = рост девочки, текст по центру рядом с ней */
    min-height: calc(var(--girl-w) * 2.559 - 1.1rem - 1.5rem);
    display: flex; align-items: center;
  }
  /* звёздочка отодвигается от девочки: встаёт слева от её головы */
  .hero:has(> .girl) .doodle--star {
    top: calc(2rem + var(--title-h) + 1.5rem);
    right: calc(8px + var(--girl-w) + .75rem);
  }
}
@media print { .girl { display: none; } }