/* Whole-person portraits sit in the paper collage as single cutouts. */
.hero-collage {
  isolation: isolate;
  width: 100%;
  height: 580px;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(90deg,
    #d3e3f6 0 25px,
    #fff8e7 25px 47px,
    #a9c9ed 47px 63px,
    #fff8e7 63px 86px);
  box-shadow: none;
  transform: none;
}
.hero-collage:before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(50,27,26,.35);
  pointer-events: none;
}
.hero-collage > .person-cutout,
.about-collage > .person-cutout {
  position: absolute;
  z-index: 2;
  inset: 2% 0 0;
  display: block;
  width: 100%;
  height: 98%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
  box-shadow: none;
  clip-path: none;
}
.hero-collage figcaption {
  position: absolute;
  z-index: 4;
  left: 20px;
  bottom: 15px;
  right: 20px;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font-size: .64rem;
}
.hero-collage .photo-stamp {
  z-index: 5;
  left: 0;
  bottom: 84px;
  transform: rotate(9deg);
}
.collage-ticket {
  position: absolute;
  z-index: 3;
  top: 17px;
  right: -15px;
  padding: 14px 18px 16px;
  background: var(--cream);
  color: var(--wine);
  border: 1px solid var(--ink);
  font: italic 1.3rem/.95 Georgia,serif;
  transform: rotate(-8deg);
  box-shadow: 4px 6px 0 rgba(50,27,26,.14);
}
.collage-tape {
  position: absolute;
  z-index: 4;
  width: 98px;
  height: 28px;
  top: 95px;
  right: 7%;
  transform: rotate(21deg);
  background: rgba(255,248,231,.75);
  border-left: 1px dashed rgba(50,27,26,.2);
  border-right: 1px dashed rgba(50,27,26,.2);
}
.collage-tag {
  position: absolute;
  z-index: 4;
  right: -18px;
  bottom: 91px;
  padding: 9px 12px;
  border-radius: 100px;
  border: 1px solid var(--wine);
  background: var(--cream);
  color: var(--wine);
  font: 500 .7rem 'DM Mono',monospace;
  transform: rotate(-7deg);
}
.hero-photo { animation-name: collage-enter; }
@keyframes collage-enter {
  from { opacity: 0; transform: translateY(22px) rotate(2deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.about-collage {
  isolation: isolate;
  max-width: none;
  height: 560px;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(90deg, #e8eff8 0 27px, #fff8e7 27px 53px);
  box-shadow: 10px 12px 0 var(--blue);
  transform: none;
}
.about-collage:before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(50,27,26,.25);
}
.about-paper {
  position: absolute;
  z-index: 3;
  right: -17px;
  top: 17px;
  padding: 14px 17px;
  background: var(--cream);
  border: 1px solid var(--ink);
  font: .75rem/1.5 'DM Mono',monospace;
  color: var(--wine);
  transform: rotate(7deg);
}
.about-collage .about-label {
  z-index: 4;
  right: -30px;
  bottom: 58px;
  transform: rotate(-5deg);
}
.about-sticker {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  text-align: center;
  font: 600 .72rem/1.15 Unbounded,sans-serif;
  transform: rotate(12deg);
}
@media (max-width: 900px) {
  .hero-collage { height: 510px; }
  .about-collage { height: 510px; }
}
@media (max-width: 720px) {
  .hero-collage {
    width: min(92%, 460px);
    height: 445px;
    margin: 18px auto 30px;
  }
  .collage-ticket { right: -10px; font-size: 1.1rem; }
  .about-collage {
    width: min(88%, 420px);
    height: 490px;
    margin: 0 auto 28px;
  }
}
@media (max-width: 440px) {
  .hero-collage { width: 93%; height: 405px; padding: 0; }
  .hero-collage .photo-stamp { bottom: 68px; left: -10px; }
  .collage-ticket { top: 15px; padding: 10px 12px; font-size: .98rem; }
  .collage-tag { bottom: 64px; right: -9px; font-size: .61rem; }
  .about-collage { width: 90%; height: 440px; }
  .about-paper { top: 15px; right: -18px; padding: 11px 12px; font-size: .64rem; }
  .about-collage .about-label { right: -13px; bottom: 50px; }
  .about-sticker { width: 82px; height: 82px; font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
}