:root {
  --editorial-sage: #2f4b42;
  --editorial-sage-deep: #203a32;
  --editorial-ink: #31423a;
  --editorial-gold: #806039;
  --editorial-paper: #fffdf7;
}

body {
  background: var(--editorial-paper);
  color: var(--editorial-ink);
}

.editorial-shell {
  position: relative;
  isolation: isolate;
}

.envelope-intro {
  display: none;
}

.editorial-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: var(--editorial-paper);
}

.ambient-petals {
  display: none;
}

.js .ambient-petals {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: min(100%, 58rem);
  margin-inline: auto;
  overflow: hidden;
  pointer-events: none;
}

.ambient-petal {
  position: absolute;
  inset-block-start: -2rem;
  inset-inline-start: var(--inline);
  width: .48rem;
  height: .82rem;
  border-radius: 90% 12% 90% 12%;
  background: #c7a98a;
  opacity: 0;
  animation: petal-drift var(--duration) linear var(--delay) infinite;
}

.editorial-hero,
.editorial-section {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100% - 2rem, 34rem);
  min-height: 100svh;
  margin-inline: auto;
  align-content: center;
  justify-items: center;
  padding-block: max(4rem, env(safe-area-inset-top)) max(4rem, env(safe-area-inset-bottom));
  background: transparent;
  text-align: center;
}

.editorial-eyebrow,
.editorial-hero h1,
.editorial-hero time,
.scroll-hint,
.editorial-section h2,
.editorial-section p,
.editorial-section address {
  margin: 0;
  text-shadow: 0 1px 0 rgb(255 253 247 / 92%), 0 0 1.2rem rgb(255 253 247 / 88%);
}

.editorial-eyebrow {
  color: var(--editorial-gold);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.editorial-intro-copy {
  max-width: 20rem;
  color: var(--editorial-sage);
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0;
  text-wrap: balance;
}

.editorial-hero::before,
.editorial-section::before {
  width: 4rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: color-mix(in srgb, var(--editorial-gold), transparent 40%);
  content: "";
  transform-origin: center;
}

html.js .editorial-hero::before,
[data-reveal-ready] .editorial-section[data-reveal]::before {
  transform: scaleX(0);
}

.js [data-state="opened"] .editorial-hero::before,
[data-reveal-ready] .editorial-section[data-reveal][data-visible="true"]::before {
  animation: divider-grow 650ms cubic-bezier(.22, .75, .2, 1) both;
}

.js [data-state="opened"] .editorial-hero > [data-reveal] {
  animation: hero-rise 520ms cubic-bezier(.22, .75, .2, 1) both;
}

.js [data-state="opened"] .editorial-hero > [data-reveal]:nth-child(1) {
  animation-delay: 20ms;
}

.js [data-state="opened"] .editorial-hero > [data-reveal]:nth-child(2) {
  animation-delay: 80ms;
}

.js [data-state="opened"] .editorial-hero > [data-reveal]:nth-child(3) {
  animation-delay: 130ms;
}

.js [data-state="opened"] .editorial-hero > [data-reveal]:nth-child(4) {
  animation-delay: 180ms;
}

.editorial-hero h1 {
  margin-top: 1rem;
  color: var(--editorial-sage-deep);
  font-size: clamp(3.3rem, 17vw, 5.8rem);
  line-height: 1;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.editorial-hero time,
.editorial-section h2 {
  margin-top: 1.2rem;
  color: var(--editorial-sage);
  font-size: clamp(1.7rem, 8vw, 2.65rem);
  font-weight: 700;
  line-height: 1.25;
}

.scroll-hint {
  margin-top: 2.4rem;
  color: #5d6d65;
  font-size: .9rem;
}

.scroll-hint::after {
  display: block;
  width: 1px;
  height: 2.75rem;
  margin: .8rem auto 0;
  background: var(--editorial-gold);
  content: "";
}

.venue-watercolor {
  position: fixed;
  z-index: 0;
  inset-block-end: 0;
  inset-inline: 0;
  width: min(100%, 58rem);
  height: min(58svh, 34rem);
  margin-inline: auto;
  background: linear-gradient(to bottom, var(--editorial-paper) 0%, transparent 28%), url("../assets/media/editorial-couple.jpg") center bottom / cover no-repeat;
  filter: saturate(.72) contrast(.9) brightness(1.08);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 100%);
  opacity: .68;
  pointer-events: none;
}

.editorial-section {
  padding-inline: 1rem;
}

.latin-venue {
  margin-top: 1rem !important;
  color: #5a675f;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: .08em;
}

.editorial-location address,
.editorial-closing > p:not(.editorial-eyebrow) {
  max-width: 26rem;
  margin-top: 1.2rem;
  color: #506158;
  font-size: 1.08rem;
  font-style: normal;
  line-height: 2;
}

.map-button,
.gallery-button {
  min-width: 44px;
  min-height: 44px;
  margin-top: 2rem;
  padding: .7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--editorial-sage), transparent 30%);
  background: rgb(255 253 247 / 72%);
  color: var(--editorial-sage-deep);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.map-button:hover,
.map-button:focus-visible,
.gallery-button:hover,
.gallery-button:focus-visible {
  background: #e8eee5;
  color: #182f28;
  transform: translateY(-2px);
}

.map-button:active,
.gallery-button:active {
  transform: translateY(1px);
}

.editorial-closing {
  background: transparent;
}

.editorial-closing h2 {
  max-width: 20rem;
}

.js .envelope-intro {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: grid;
  min-height: 100svh;
  place-items: center;
  align-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: clip;
  background:
    radial-gradient(ellipse at 18% 18%, rgb(255 255 255 / 12%) 0 1px, transparent 2px),
    radial-gradient(ellipse at 80% 74%, rgb(255 255 255 / 9%) 0 1px, transparent 2px),
    linear-gradient(118deg, rgb(255 255 255 / 7%), transparent 44%),
    linear-gradient(145deg, var(--editorial-sage), var(--editorial-sage-deep));
}

.envelope-intro > p {
  position: relative;
  z-index: 2;
  margin: 1.35rem 0 0;
  color: #fff8d8;
  font-size: .95rem;
  font-weight: 700;
}

.botanical-linework {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(1px 1px 0 rgb(11 37 28 / 30%));
  animation: botanical-breathe 7s ease-in-out infinite alternate;
}

.botanical-sprig {
  position: absolute;
  width: clamp(9rem, 34vw, 17rem);
  height: clamp(15rem, 50vh, 28rem);
  opacity: .82;
}

.botanical-sprig-one {
  inset-block-end: -3rem;
  inset-inline-start: -2rem;
  transform: rotate(-24deg);
}

.botanical-sprig-two {
  inset-block-start: -5rem;
  inset-inline-end: -2rem;
  transform: scaleX(-1) rotate(-28deg);
}

.botanical-stem {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 48%;
  height: 100%;
  border-inline-start: 1px solid rgb(239 242 218 / 46%);
  border-radius: 55% 0 0 0;
  transform: skewX(-17deg);
  transform-origin: bottom;
}

.botanical-leaf {
  position: absolute;
  width: clamp(.9rem, 4vw, 1.45rem);
  aspect-ratio: .62;
  border: 1px solid rgb(239 242 218 / 42%);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgb(239 242 218 / 16%), transparent 68%);
}

.botanical-leaf::after {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgb(239 242 218 / 40%);
  content: "";
  transform: rotate(-45deg);
  transform-origin: center;
}

.botanical-leaf:nth-of-type(2) {
  inset-block-end: 23%;
  inset-inline-start: 31%;
  transform: rotate(22deg);
}

.botanical-leaf:nth-of-type(3) {
  inset-block-end: 39%;
  inset-inline-start: 54%;
  transform: scaleX(-1) rotate(18deg);
}

.botanical-leaf:nth-of-type(4) {
  inset-block-end: 56%;
  inset-inline-start: 38%;
  transform: rotate(35deg);
}

.botanical-leaf:nth-of-type(5) {
  inset-block-end: 70%;
  inset-inline-start: 61%;
  transform: scaleX(-1) rotate(29deg);
}

.botanical-flower {
  position: absolute;
  inset-block-start: 7%;
  inset-inline-start: 61%;
  width: clamp(1.25rem, 5vw, 2rem);
  aspect-ratio: 1;
  border: 1px solid rgb(239 242 218 / 47%);
  border-radius: 50%;
  box-shadow: 0 -1.05rem 0 -0.48rem rgb(239 242 218 / 35%), 1.05rem 0 0 -0.48rem rgb(239 242 218 / 35%), 0 1.05rem 0 -0.48rem rgb(239 242 218 / 35%), -1.05rem 0 0 -0.48rem rgb(239 242 218 / 35%);
}

.botanical-flower::after {
  position: absolute;
  inset: 42%;
  border: 1px solid rgb(239 242 218 / 55%);
  border-radius: 50%;
  content: "";
}

.envelope-intro::before,
.envelope-intro::after {
  position: absolute;
  z-index: -1;
  width: clamp(17rem, 70vmin, 38rem);
  aspect-ratio: 1;
  border: 1px solid rgb(236 239 216 / 22%);
  border-radius: 48% 52% 44% 56%;
  content: "";
}

.envelope-intro::before {
  inset-block-start: -10%;
  inset-inline-start: -18%;
  box-shadow: 1.1rem 2.5rem 0 -1.05rem rgb(236 239 216 / 16%), 2.8rem 1.4rem 0 -2.65rem rgb(236 239 216 / 24%);
  transform: rotate(-35deg);
}

.envelope-intro::after {
  inset-block-end: -15%;
  inset-inline-end: -18%;
  box-shadow: -1.5rem -2.4rem 0 -1.35rem rgb(236 239 216 / 15%), -3.4rem -1.5rem 0 -3.2rem rgb(236 239 216 / 20%);
  transform: rotate(39deg);
}

.paper-envelope {
  position: relative;
  z-index: 1;
  width: min(84vw, 31rem);
  aspect-ratio: 1.5;
  border: 1px solid rgb(252 248 227 / 28%);
  background: linear-gradient(145deg, rgb(255 255 255 / 9%), transparent 50%), linear-gradient(35deg, rgb(16 43 35 / 28%), transparent 48%);
  box-shadow: 0 2rem 4rem rgb(4 25 18 / 28%);
  overflow: hidden;
}

.paper-envelope::before,
.paper-envelope::after {
  position: absolute;
  inset: 0;
  border: inherit;
  content: "";
}

.paper-envelope::before {
  clip-path: polygon(0 100%, 50% 45%, 100% 100%);
  background: linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 60%);
}

.paper-envelope::after {
  background:
    linear-gradient(105deg, transparent 28%, rgb(255 255 255 / 11%) 48%, transparent 68%),
    repeating-linear-gradient(118deg, transparent 0 1.25rem, rgb(255 255 255 / 3%) 1.3rem 1.35rem);
  opacity: .28;
  animation: paper-shimmer 5.5s ease-in-out infinite;
}

.envelope-flap {
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 63%);
  transform-origin: 50% 0;
  background: linear-gradient(155deg, rgb(255 255 255 / 17%), rgb(18 48 38 / 14%));
  backface-visibility: hidden;
  transition: transform 700ms cubic-bezier(.22, .75, .2, 1);
}

.wax-seal {
  position: relative;
  z-index: 2;
  display: grid;
  width: 5.75rem;
  min-width: 72px;
  min-height: 72px;
  aspect-ratio: 1;
  place-items: center;
  margin-top: calc(min(84vw, 31rem) * -.17);
  border: 1px solid rgb(104 71 37 / 55%);
  border-radius: 50%;
  background: radial-gradient(circle at 37% 28%, #fffdf3 0 4%, #e9dfbc 42%, #c9b47c 100%);
  box-shadow: inset .2rem .2rem .35rem rgb(255 255 255 / 75%), inset -.3rem -.35rem .5rem rgb(86 61 28 / 26%), 0 .7rem 1.4rem rgb(10 36 26 / 38%);
  color: #72552f;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.js [data-state="sealed"] .wax-seal {
  animation: seal-breathe 2.8s ease-in-out infinite;
}

.js [data-state="sealed"] .wax-seal:hover,
.js [data-state="sealed"] .wax-seal:focus-visible,
.js [data-state="sealed"] .wax-seal:active {
  animation: none;
}

.wax-seal:hover {
  transform: translateY(-2px);
}

.wax-seal:active,
.wax-seal[aria-pressed="true"] {
  transform: translateY(2px) scale(.96);
  box-shadow: inset .3rem .35rem .55rem rgb(86 61 28 / 30%), 0 .25rem .6rem rgb(10 36 26 / 30%);
}

.wax-seal:focus-visible {
  outline: 3px solid #fff8d8;
  outline-offset: 5px;
}

.wax-seal:disabled {
  cursor: wait;
  opacity: .78;
}

.opening-petals {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.opening-petal {
  position: absolute;
  inset-block-start: calc(50% + 6.5rem);
  inset-inline-start: 50%;
  width: .78rem;
  height: 1.2rem;
  border-radius: 90% 10% 90% 10%;
  background: linear-gradient(145deg, #ffe7e4, #c98086);
  box-shadow: 0 .1rem .35rem rgb(67 45 37 / 18%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.opening-petal:nth-child(3n) {
  background: linear-gradient(145deg, #edf3df, #91aa80);
}

.opening-petal:nth-child(3n + 1) {
  background: linear-gradient(145deg, #fff2c9, #c69b55);
}

.js [data-state="opening"] .opening-petal {
  animation: petal-release 850ms cubic-bezier(.18, .76, .3, 1) var(--delay) both;
}

.ivory-bloom {
  position: absolute;
  z-index: 3;
  width: 9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--editorial-paper);
  pointer-events: none;
  transform: scale(0);
  transition: transform 1050ms cubic-bezier(.66, 0, .34, 1);
}

.js [data-state="sealed"] .editorial-page,
.js [data-state="opening"] .editorial-page {
  visibility: hidden;
}

.js [data-state="opening"] .envelope-flap,
.js [data-state="opened"] .envelope-flap {
  transform: rotateX(166deg);
}

.js [data-state="opening"] .ivory-bloom {
  transform: scale(24);
}

.js [data-state="opened"] .envelope-intro {
  pointer-events: none;
  visibility: hidden;
}

html.js[data-editorial-state="sealed"],
html.js[data-editorial-state="opening"] {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

@keyframes paper-shimmer {
  0%,
  18% {
    opacity: .16;
    transform: translateX(-72%);
  }

  58%,
  100% {
    opacity: .32;
    transform: translateX(72%);
  }
}

@keyframes botanical-breathe {
  from {
    transform: translate3d(0, 0, 0) rotate(-.5deg);
  }

  to {
    transform: translate3d(4px, -3px, 0) rotate(1deg);
  }
}

@keyframes seal-breathe {
  0%,
  100% {
    box-shadow: inset .2rem .2rem .35rem rgb(255 255 255 / 75%), inset -.3rem -.35rem .5rem rgb(86 61 28 / 26%), 0 .7rem 1.4rem rgb(10 36 26 / 38%);
    transform: scale(1);
  }

  50% {
    box-shadow: inset .2rem .2rem .35rem rgb(255 255 255 / 82%), inset -.3rem -.35rem .5rem rgb(86 61 28 / 22%), 0 .8rem 1.75rem rgb(227 208 151 / 28%);
    transform: scale(1.02);
  }
}

@keyframes petal-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, -5vh, 0) rotate(0deg);
  }

  12%,
  82% {
    opacity: .16;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 110vh, 0) rotate(var(--rotation));
  }
}

@keyframes petal-release {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
  }

  18% {
    opacity: .92;
  }

  72% {
    opacity: .78;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rotation)) scale(var(--scale));
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(.85rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes divider-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (min-width: 48rem) {
  body {
    background: linear-gradient(135deg, var(--editorial-sage-deep), #9daf9f 42%, var(--editorial-paper));
    background-attachment: fixed;
  }

  .editorial-page {
    width: min(100%, 58rem);
    margin-inline: auto;
    border-inline: 1px solid rgb(46 76 65 / 14%);
    box-shadow: 0 0 0 1px rgb(46 76 65 / 8%), 0 2rem 5rem rgb(24 57 44 / 22%);
  }

  .editorial-hero,
  .editorial-section {
    width: min(100% - 4rem, 34rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .ambient-petals,
  .opening-petals {
    display: none !important;
  }

  .paper-envelope::after,
  .botanical-linework,
  .wax-seal,
  .ambient-petal,
  .opening-petal,
  .editorial-hero::before,
  .editorial-section::before,
  .editorial-hero > [data-reveal],
  .map-button,
  .gallery-button {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal-ready] [data-reveal],
  .js [data-state="opened"] .editorial-hero > [data-reveal] {
    opacity: 1;
    transform: none;
  }

  html.js .editorial-hero::before,
  [data-reveal-ready] .editorial-section[data-reveal]::before {
    transform: none;
  }

  .envelope-flap,
  .wax-seal,
  .ivory-bloom {
    transition: none;
  }

  .wax-seal:hover,
  .wax-seal:active,
  .wax-seal[aria-pressed="true"],
  .map-button:hover,
  .map-button:focus-visible,
  .map-button:active,
  .gallery-button:hover,
  .gallery-button:focus-visible,
  .gallery-button:active {
    transform: none;
  }
}