@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,500&display=swap');

.tropical-paradise {
  --paper: #faf1da;
  --ink: #173d2e;
  --line: #a7ad81;
  --orchid: #943954;
  --edge: clamp(18px,7vw,110px);
  --headline: 'Playfair Display',Georgia,serif;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.tropical-paradise .occasion-nav { text-transform: uppercase; padding-inline: var(--edge); }
.tropical-paradise :is(h1,h2) { font-family: var(--headline); }
.tropical-paradise .overline { text-transform: uppercase; letter-spacing: .16em; }
.tp-cover { display: grid; grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr); background: #143c2d; color: #f9eed5; align-items: center; }
.tp-cover img { height: auto; aspect-ratio: 4/4.65; object-position: center 48%; }
.tp-title { padding: clamp(25px,5vw,76px) clamp(20px,6vw,98px); }
.tp-title .overline { margin: 0; }
.tp-title h1 { font-size: clamp(49px,8.6vw,130px); letter-spacing: -.075em; line-height: .87; margin: 19px 0 23px; }
.tp-title h1 :is(span,i) { display: block; }
.tp-title h1 i { font-size: .45em; color: #f0a2ad; margin: .16em 0 .17em .2em; }
.tp-title .cover-date { margin: 0; letter-spacing: .11em; }
.tp-title a { display: inline-block; margin-top: 15px; padding-block: 5px; border-bottom: 1px solid #f0a2ad; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.tp-welcome { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.62fr); gap: clamp(15px,7vw,102px); align-items: center; padding: clamp(45px,9vw,125px) var(--edge); }
.tp-welcome .welcome { max-width: none; text-align: left; padding: 0; margin: 0; }
.tp-welcome h2 { font-size: clamp(41px,7.5vw,105px); line-height: .96; }
.tp-welcome h2 i,.tp-welcome .sign { color: var(--orchid); }
.tp-welcome .welcome > p:not(.overline),.tp-dress > p:not(.overline) { white-space: pre-line; margin-inline: 0; }
.tp-welcome img { height: auto; aspect-ratio: 4/5; object-position: center 57%; }
.tp-calendar { background: #ecc1ab; padding: clamp(28px,5vw,65px) var(--edge); }
.tp-calendar .ni-date { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; }
.tp-calendar .overline { margin: 0 0 9px; }
.tp-calendar h2 { grid-column: 1; font-size: clamp(34px,5.4vw,75px); }
.tp-calendar .digits { display: grid; grid-template-columns: repeat(4,minmax(0,72px)); grid-column: 2; grid-row: 1/3; text-align: center; margin: 0; gap: 8px; }
.tp-calendar .digits b { min-width: 0; font-size: clamp(28px,5vw,60px); }
.tp-calendar .digits span { letter-spacing: .055em; }
.tp-details { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(24px,8vw,110px); padding: clamp(47px,9vw,124px) var(--edge); }
.tp-venue { border-top: 1px solid var(--line); background: url('/art/tropical-leaf.svg') right bottom / min(39%,170px) auto no-repeat; }
.tp-venue .location-copy { padding: 0 0 75px; }
.tp-venue h2 { font-size: clamp(36px,5vw,64px); }
.tp-details .schedule { display: block; width: 100%; padding: 0; }
.tp-details .section-title h2 { margin: 10px 0 22px; }
.tp-details .schedule li { display: grid; grid-template-columns: 51px minmax(0,1fr); gap: 12px; padding-block: 15px; }
.tp-details .schedule li p { font-size: 13px; }
.tp-details .event-number { display: none; }
.tp-dress.dress { background: #e7dfac; padding: clamp(35px,7vw,85px) var(--edge); text-align: left; }
.tropical-paradise .response { width: calc(100% - 2 * var(--edge)); border: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(24px,6vw,85px); padding-inline: 0; }
.tropical-paradise .response button { min-height: 44px; }
.tp-footer { background: #143c2d; color: #f9eed5; padding: clamp(56px,10vw,140px) 20px; }
.tp-footer > span { font: clamp(41px,8vw,105px)/1 var(--headline); }
.tp-opening[hidden] { display: none; }
.tp-opening { --opening-ready: 1; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: #153b2c; color: #f9eed5; }
.tp-opening[open] { display: grid; }
.tp-opening::backdrop { background: transparent; }
.tp-leaves { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.tp-leaves i { position: absolute; bottom: -19%; width: 62%; height: 122%; background: url('/art/tropical-leaf.svg') center / contain no-repeat; transform-origin: bottom center; }
.tp-leaves i:first-child { left: -11%; transform: rotate(-14deg); }
.tp-leaves i:last-child { right: -12%; transform: scaleX(-1) rotate(-14deg); }
.tp-opening-copy { position: relative; width: min(85%,730px); margin: auto; padding: 19px; text-align: center; background: #143c2deb; }
.tp-opening-copy h2 { font-size: clamp(39px,8vw,100px); }
.tp-opening-copy p { margin-top: 10px; }
.tp-opening-copy button { min-height: 44px; background: transparent; border: 0; color: inherit; padding: 8px 15px; }
.tp-opening-copy [data-open] { border: 1px solid #f0a2ad; margin-top: 11px; }
.tp-opening-copy form button { text-decoration: underline; text-underline-offset: .3em; }
.tp-opening.is-opening .tp-leaves i { animation: tp-part 1.6s cubic-bezier(.4,.03,.25,1) both; }
.tp-opening.is-opening .tp-leaves i:last-child { animation-name: tp-part-right; animation-delay: .09s; }
@keyframes tp-part { 21% { transform: translateX(-6%) rotate(-10deg); } to { transform: translateX(-79%) rotate(-36deg); } }
@keyframes tp-part-right { 21% { transform: translateX(6%) scaleX(-1) rotate(-10deg); } to { transform: translateX(79%) scaleX(-1) rotate(-36deg); } }
@media(max-width:700px) {
  .tp-cover,.tp-welcome,.tp-calendar .ni-date,.tp-details,.tropical-paradise .response { grid-template-columns: minmax(0,1fr); }
  .tp-title { grid-row: 1; }
  .tp-title h1 { font-size: clamp(56px,15vw,95px); }
  .tp-cover img { aspect-ratio: 5/4; }
  .tp-welcome img { aspect-ratio: 5/3; }
  .tp-calendar .digits { grid-column: 1; grid-row: auto; text-align: left; justify-content: start; margin-top: 15px; }
  .tp-venue { background-size: 110px auto; }
}
@media(prefers-reduced-motion:reduce) { .tp-opening * { animation: none !important; } }

.tp-opening {
  background: radial-gradient(ellipse at 50% 27%,#45644a,#1d4634 44%,#102e23 79%);
}
.tp-leaves i {
  bottom: -24%;
  width: min(67vw,790px);
  height: 138%;
  background-image: url('/art/tropical-frond.svg');
  filter: drop-shadow(0 14px 24px #081d17a6);
}
.tp-leaves i:first-child { left: -10%; transform: rotate(-19deg); }
.tp-leaves i:last-child { right: -10%; transform: scaleX(-1) rotate(-19deg); }
.tp-opening-copy {
  width: min(86%,590px);
  padding: clamp(22px,5vw,56px) clamp(12px,4vw,42px);
  color: #233f32;
  background: #f4e9d0 url('/art/print-grain.svg');
  border: 4px double #a59463;
  box-shadow: 0 18px 45px #0b241b80;
}
.tp-opening-copy h2 { font-size: clamp(33px,7vw,76px); overflow-wrap: anywhere; }
.tp-opening-copy [data-open] { border-color: #6d805a; }
.tp-opening.is-opening .tp-opening-copy { animation: tp-card-away 1.1s .34s cubic-bezier(.22,.68,.18,1) both; }
@keyframes tp-card-away { 40% { transform: translateY(-13px); } to { transform: translateY(-36px) scale(1.055); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tp-opening.is-opening .tp-opening-copy { animation: none; }
}