.hero { isolation: isolate; }
.hero-ornaments {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.celebration-ribbons {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
}
.hero-peony {
  position: absolute;
  width: clamp(340px, 30vw, 500px);
  height: auto;
  right: -35px;
  bottom: 5%;
  transform: rotate(-8deg);
  transform-origin: 60% 80%;
}
.hero-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #9a5439;
}
.hero-context .anniversary-year {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .03em;
  color: #a57d42;
}
.hero-context i { width: 28px; height: 1px; background: #c3a16a; opacity: .8; }
.hero h1 { text-shadow: 0 1px 0 #eac99b; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 {
    background: linear-gradient(135deg, #b51d2b 6%, #d83e32 45%, #bf2635 79%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}
.hero-subtitle { color: #8a5d43; }
.explore { color: #a72a32; }

@media (min-width: 1800px) {
  .hero-peony { right: 2%; bottom: 6%; }
}
@media (max-width: 1000px) {
  .hero-peony { width: 310px; right: -75px; bottom: 2%; }
  .golden-flourish { opacity: .55; }
}
@media (max-width: 600px) {
  .hero-peony { width: 280px; right: -104px; bottom: -25px; }
  .ribbon-upper, .golden-flourish, .golden-petals { display: none; }
  .ribbon-lower { opacity: .9; }
  .hero-context { gap: 9px; letter-spacing: .15em; }
  .hero-context .anniversary-year { font-size: 16px; }
  .hero-context i { width: 15px; }
  .bottom-rail::before { content: ''; position: absolute; inset: -17px -18px -20px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #fffdf800, #fffdf8 46%); }
}
@media (max-height: 650px) and (max-width: 600px) {
  .hero-peony { width: 210px; right: -100px; bottom: -40px; }
}
@media (max-height: 600px) {
  .hero-context { display: none; }
  .golden-flourish, .golden-petals { display: none; }
}
@media (forced-colors: active) {
  .hero h1 { color: CanvasText; background: none; text-shadow: none; }
  .hero-ornaments { display: none; }
}