/* Decorative, locally hosted pet art. Text labels carry the meaning. */
.pet-header { position: relative; }
.pet-intro { margin-top: 16px; text-align: center; }
.pet-intro h1 { margin-top: 0; }
.pet-copy { text-align: center; }
header img.pet-friends { position: absolute; top: 10px; width: 140px; height: auto; border-radius: 0; box-shadow: none; pointer-events: none; }
.pet-friends-left { left: 24px; }
.pet-friends-right { right: 24px; transform: scaleX(-1); }
.tag { display: flex; align-items: center; gap: 9px; }
.pet-icon { width: 38px; height: 38px; padding: 3px; box-sizing: border-box; background: #fffaed; border-radius: 12px; flex-shrink: 0; }
.paw-footer::before { content: ""; display: block; width: 114px; height: 38px; margin: 0 auto 18px; background: url('/static/pets/paw.svg') 0 0 / 38px 38px repeat-x; opacity: .32; transform: rotate(-9deg); pointer-events: none; }
@media (max-width: 600px) {
  header img.pet-friends { top: 24px; width: clamp(64px, 22vw, 100px); }
  .pet-friends-left { left: 0; }
  .pet-friends-right { right: 0; }
}

/* Side decorations only appear when the page has roomy outer margins. */
@media (min-width: 1000px) {
  .pet-section { position: relative; }
  .pet-section::before, .pet-section::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 84px;
    height: 84px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .pet-section::before { left: -128px; background-image: var(--pet-left); transform: translateY(-50%) rotate(-8deg); }
  .pet-section::after { right: -128px; background-image: var(--pet-right); transform: translateY(-50%) rotate(8deg); }
  .pet-section:nth-of-type(1) { --pet-left: url('/static/pets/dog.svg'); --pet-right: url('/static/pets/cat.svg'); }
  .pet-section:nth-of-type(2) { --pet-left: url('/static/pets/rabbit.svg'); --pet-right: url('/static/pets/bird.svg'); }
  .pet-section:nth-of-type(3) { --pet-left: url('/static/pets/fish.svg'); --pet-right: url('/static/pets/reptile.svg'); }
  .pet-section:nth-of-type(4) { --pet-left: url('/static/pets/hamster.svg'); --pet-right: url('/static/pets/dog.svg'); }
}