/* A red wedding opening followed by street, garden, interior and white portraits. */
#hero-carousel {
  background: #8c1006;
}

#hero-carousel .hero-slide {
  background: #8c1006;
}

#hero-carousel .hero-slide-clean { background:#dddcd7; }
#hero-carousel .hero-slide-clean .greeting-bubble:before { inset:-9px 0; }
#invite #hero-carousel .hero-slide-clean .hero-photo-shade {
  background:linear-gradient(180deg,#18221e59 0%,transparent 24%,transparent 70%,#18221e55 100%);
}

/* Close portraits need real headroom beneath the printed masthead. */
#invite #hero-carousel .hero-slide .hero-photo {
  inset: var(--red-photo-shift, 0%) 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  animation: none;
}

#hero-carousel .hero-heading {
  top: calc(62px + env(safe-area-inset-top));
}

#hero-carousel .wedding-countdown {
  min-height: 24px;
  gap: 6px;
  text-shadow: 0 1px 8px #63100980;
}

#hero-carousel .wedding-countdown > span {
  font-size: 11px;
}

#hero-carousel .wedding-countdown > strong {
  font-size: 21px;
}

#hero-carousel .hero-daylight {
  display: none;
}

#hero-carousel .hero-photo-shade {
  background: linear-gradient(180deg, #6c0f1033 0%, transparent 22%, transparent 68%, #4e0b142e 78%, #4e0b14a8 100%);
}

#hero-carousel .hero-carousel-controls {
  bottom: 11.5%;
  filter: drop-shadow(0 1px 4px #500c12b3);
}

#invite #hero-carousel .greeting-bubble {
  color: #292724;
}

#hero-carousel .hero-slide-dark-trace .bubble-trace {
  color: #393934;
}

#hero-carousel [data-slide="white-embrace"] .bubble-trace path:first-child {
  stroke: #fffaf0;
}

#hero-carousel .bubble-paper {
  fill: #fff4e4;
  filter: drop-shadow(0 2px 1px #6b15151a);
}

#hero-carousel .greeting-bubble:active .bubble-paper {
  fill: #ffe1cb;
}

#hero-carousel .person-name {
  color: #fff4e4;
  text-shadow: 0 1px 4px #5d12143d;
}

/* On the close portraits, the bride's annotations sit over the white dress. */
#hero-carousel .hero-slide-body-notes .person-bride {
  color: #8b222d;
  text-shadow: 0 1px 3px #fff4e466;
}

#hero-carousel .hero-slide-body-notes :is(.bubble-trace, .name-trace) path:nth-child(2) {
  stroke: #8b222d;
}

@media (max-width: 360px) {
  #hero-carousel .hero-heading {
    top: calc(56px + env(safe-area-inset-top));
  }

  #hero-carousel .wedding-countdown > strong {
    font-size: 19px;
  }
}