body {
  background: #fffaf0;
}

.site-back {
  position: fixed;
  z-index: 30;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-start: max(1rem, env(safe-area-inset-right));
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid rgb(76 112 79 / 24%);
  border-radius: 999px;
  background: rgb(255 250 240 / 94%);
  box-shadow: 0 .65rem 2rem rgb(45 75 52 / 12%);
  color: #386443;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(.75rem);
}

.garden-atmosphere {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.light-bloom {
  position: absolute;
  width: clamp(17rem, 34vw, 36rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 194 162 / 38%) 0, rgb(255 217 223 / 22%) 38%, transparent 70%);
  animation: garden-breathe 14s ease-in-out infinite alternate;
}

.bloom-one {
  inset-block-start: 8%;
  inset-inline-start: -9%;
}

.bloom-two {
  inset-block-start: 44%;
  inset-inline-end: -12%;
  background: radial-gradient(circle, rgb(141 189 156 / 25%) 0, rgb(128 185 216 / 12%) 42%, transparent 70%);
  animation-delay: -5s;
  animation-duration: 18s;
}

.bloom-three {
  inset-block-end: 2%;
  inset-inline-start: 16%;
  animation-delay: -9s;
  animation-duration: 20s;
}

@keyframes garden-breathe {
  from { transform: translate3d(-1.5rem, 1rem, 0) scale(.92); }
  to { transform: translate3d(1.5rem, -1rem, 0) scale(1.08); }
}

.garden-journey {
  position: relative;
  z-index: 1;
}

.garden-opening {
  display: grid;
  grid-template-columns: minmax(20rem, 1.08fr) minmax(19rem, .92fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  width: min(100% - 3rem, 82rem);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(7rem, 12vh, 10rem) clamp(5rem, 10vh, 8rem);
}

.garden-layer {
  --garden-y: 0px;
  transform: translate3d(0, var(--garden-y), 0);
  will-change: transform;
}

.garden-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garden-layer-opening {
  position: relative;
  min-height: clamp(33rem, 70vh, 48rem);
  border: .7rem solid white;
  border-radius: 12rem 12rem 2rem 2rem;
  box-shadow: 0 2.2rem 5rem rgb(41 77 48 / 17%);
  overflow: hidden;
}

.garden-layer-opening img,
.garden-layer-venue img {
  position: absolute;
  inset: 0;
}

.garden-layer-opening img {
  object-position: 50% 50%;
}

.opening-copy {
  max-width: 32rem;
  padding-inline: clamp(.25rem, 2vw, 2rem);
}

.blessing,
.opening-copy h1,
.opening-lead,
.stop-number,
.stop-copy h2,
.stop-copy p,
.names-line,
.finale-label,
.finale-copy h2,
.finale-copy address,
.finale-date {
  margin: 0;
}

.blessing {
  color: #527c58;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
}

.opening-copy h1 {
  margin-top: .7rem;
  color: #562b45;
  font-size: clamp(4rem, 8vw, 7.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.opening-lead {
  max-width: 27rem;
  margin-top: 1.6rem;
  color: #724b5f;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.9;
}

.path-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .65rem;
  margin-top: 2rem;
  padding: .72rem 1.15rem;
  border-bottom: 1px solid #527c58;
  color: #386443;
  font-size: .96rem;
  font-weight: 700;
  text-decoration: none;
}

.path-link svg {
  flex: 0 0 auto;
}

.garden-path {
  position: relative;
  width: min(100% - 3rem, 76rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 8vw, 7rem) 0;
}

.path-stem {
  position: absolute;
  z-index: -1;
  inset-block: 3rem 25rem;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, #80a77d 5%, #80a77d 91%, transparent);
  transform: translateX(-50%);
}

.garden-stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  align-items: center;
  min-height: clamp(35rem, 78vh, 49rem);
  scroll-margin-top: 4rem;
}

.garden-stop:nth-of-type(odd) .stop-copy {
  grid-column: 1;
}

.garden-stop:nth-of-type(even) .stop-copy {
  grid-column: 3;
}

.stop-marker {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  border: 1px solid rgb(82 124 88 / 48%);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 0 .75rem rgb(255 250 240 / 80%);
}

.stop-marker span {
  width: .8rem;
  aspect-ratio: 1;
  border-radius: 50% 50% 45% 55%;
  background: var(--coral);
  box-shadow: -.55rem -.18rem 0 -.15rem var(--peach), .52rem -.22rem 0 -.16rem var(--sage);
  transform: rotate(24deg);
}

.stop-copy {
  grid-row: 1;
  max-width: 29rem;
  padding: clamp(1rem, 4vw, 3rem);
}

.garden-stop:nth-of-type(odd) .stop-copy {
  justify-self: end;
  text-align: left;
}

.garden-stop:nth-of-type(even) .stop-copy {
  justify-self: start;
  text-align: right;
}

.stop-number,
.finale-label {
  color: #527c58;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.stop-copy h2 {
  margin-top: .65rem;
  color: #562b45;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.08;
  text-wrap: balance;
}

.stop-copy p:not(.stop-number):not(.names-line) {
  margin-top: 1.35rem;
  color: #724b5f;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.95;
}

.names-line {
  margin-top: 1.2rem;
  color: var(--coral-text);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
}

.names-line span {
  padding-inline: .4rem;
  color: #527c58;
  font-family: Georgia, serif;
  font-weight: 400;
}

.stop-date time {
  display: block;
  margin-top: 1.3rem;
  color: var(--berry);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
}

.stop-date time span {
  display: block;
  color: var(--coral-text);
}

.garden-layer-arch {
  position: relative;
  z-index: 2;
  width: min(100%, 67rem);
  aspect-ratio: 16 / 8.5;
  margin: clamp(2rem, 4vw, 4rem) auto clamp(5rem, 10vw, 9rem);
  border: .65rem solid white;
  border-radius: 2rem 11rem 2rem 11rem;
  box-shadow: 0 2.2rem 5rem rgb(41 77 48 / 16%);
  overflow: hidden;
}

.garden-layer-arch img {
  object-position: center 48%;
}

.garden-finale {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, 1.1fr) minmax(19rem, .9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: clamp(5rem, 10vw, 10rem);
  padding-block: clamp(6rem, 10vh, 9rem);
}

.garden-layer-venue {
  position: relative;
  min-height: clamp(31rem, 66vh, 44rem);
  border: .7rem solid white;
  border-radius: 3rem 13rem 3rem 3rem;
  box-shadow: 0 2.4rem 5.5rem rgb(41 77 48 / 18%);
  overflow: hidden;
}

.garden-layer-venue img {
  object-position: center;
}

.finale-copy {
  padding-inline: clamp(.25rem, 2vw, 2rem);
}

.finale-copy h2 {
  margin-top: .6rem;
  color: #562b45;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.3rem, 6vw, 6.2rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
}

.finale-copy address {
  max-width: 26rem;
  margin-top: 1.5rem;
  color: #65465a;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-style: normal;
  line-height: 1.85;
}

.finale-date {
  margin-top: .65rem;
  color: var(--coral-text);
  font-size: 1.12rem;
  font-weight: 700;
}

.finale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.finale-actions .map-button,
.gallery-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.2rem;
  border: 1px solid #386443;
  border-radius: 999px;
  font-size: .91rem;
  font-weight: 700;
  text-decoration: none;
}

.finale-actions .map-button {
  background: #386443;
  color: white;
}

.gallery-button {
  background: #fffaf0;
  color: #386443;
}

.site-back,
.path-link,
.map-button,
.gallery-button {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

@media (hover: hover) {
  .site-back:hover,
  .path-link:hover,
  .map-button:hover,
  .gallery-button:hover {
    transform: translateY(-2px);
  }

  .map-button:hover {
    box-shadow: 0 .7rem 1.8rem rgb(56 100 67 / 22%);
  }

  .gallery-button:hover,
  .site-back:hover {
    background: white;
  }
}

@media (max-width: 48rem) {
  .site-back {
    inset-inline-start: max(.75rem, env(safe-area-inset-right));
    max-width: calc(100vw - 1.5rem);
    font-size: .8rem;
  }

  .garden-opening,
  .garden-finale {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 39rem);
  }

  .garden-opening {
    gap: 2.5rem;
    padding-block: 6rem 4rem;
  }

  .garden-layer-opening {
    min-height: 26rem;
    border-width: .45rem;
    border-radius: 8rem 8rem 1.4rem 1.4rem;
  }

  .opening-copy {
    max-width: none;
    text-align: center;
  }

  .opening-lead {
    margin-inline: auto;
  }

  .garden-path {
    width: min(100% - 2rem, 39rem);
    padding-block-start: 2rem;
  }

  .path-stem {
    inset-inline-start: 1.55rem;
    inset-inline-end: auto;
    left: auto;
    transform: none;
  }

  .garden-stop {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    min-height: 34rem;
  }

  .garden-stop .stop-marker {
    grid-column: 1;
    width: 2.8rem;
  }

  .garden-stop:nth-of-type(odd) .stop-copy,
  .garden-stop:nth-of-type(even) .stop-copy {
    grid-column: 2;
    justify-self: stretch;
    padding: 1.5rem 1.15rem 1.5rem 0;
    text-align: right;
  }

  .stop-copy h2 {
    font-size: clamp(2.25rem, 12vw, 3.7rem);
  }

  .garden-layer-arch {
    aspect-ratio: 4 / 5;
    margin-block: 2rem 5rem;
    border-width: .45rem;
    border-radius: 1.5rem 7rem 1.5rem 7rem;
  }

  .garden-layer-arch img {
    object-position: center;
  }

  .garden-finale {
    gap: 2.75rem;
    margin-top: 5rem;
    padding-block: 5rem 6rem;
  }

  .garden-layer-venue {
    min-height: 27rem;
    border-width: .45rem;
    border-radius: 2rem 8rem 2rem 2rem;
  }

  .finale-copy {
    text-align: center;
  }

  .finale-copy address {
    margin-inline: auto;
  }

  .finale-actions {
    justify-content: center;
  }
}

@media (max-width: 25rem) {
  .garden-opening,
  .garden-path,
  .garden-finale {
    width: min(100% - 1.25rem, 39rem);
  }

  .opening-copy h1 {
    font-size: 3.4rem;
  }

  .garden-layer-opening,
  .garden-layer-venue {
    min-height: 23rem;
  }

  .finale-actions {
    flex-direction: column;
  }

  .finale-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .garden-layer {
    --garden-y: 0px !important;
    transform: none !important;
    will-change: auto;
  }

  .light-bloom {
    animation: none;
    transform: none;
  }

  .site-back,
  .path-link,
  .map-button,
  .gallery-button {
    transition: none;
  }
}