/* Patjhad: roots, a changing season, photographs held in light.
   The hero retains its design; its leaf layer is contained within that scene. */
#invitation-page #home { overflow: clip; }
#invitation-page #home #falling-leaves { position: absolute; z-index: 1; }
#invitation-page #home .hero-copy { z-index: 2; }
#invitation-page :is(#invitation,#events,#story,#gallery,#travel,#countdown,#rsvp,#closing) {
  --grove: #182a22;
  --grove-moss: #33452f;
  --grove-copper: #a7764d;
  --grove-honey: #d9bd7b;
  --grove-ivory: #f3e7cc;
  --grove-muted: #c2b795;
  --grove-ease: cubic-bezier(.22,.7,.2,1);
  color: var(--grove-ivory);
  scroll-margin-top: 0;
}
#invitation-page :is(#invitation,#events,#story,#gallery,#travel,#countdown,#rsvp,#closing) h2 {
  color: var(--grove-ivory); font-weight: 400; letter-spacing: -.035em; text-wrap: balance;
}
#invitation-page :is(#invitation,#events,#story,#gallery,#travel,#countdown,#rsvp,#closing) :is(a,button):focus-visible {
  outline: 2px solid #d9bd7b; outline-offset: 6px;
}

/* A physical autumn letter, held in the quiet of the family grove. */
#invitation-page #invitation {
  position: relative; isolation: isolate; overflow: clip; padding: 0 24px 5rem;
  background: #223429; text-align: center;
}
#invitation-page #invitation .roots-art { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
#invitation-page #invitation .roots-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
#invitation-page #invitation::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#2c3024, rgb(25 42 32/.24) 16%, rgb(16 33 24/.48) 60%, #182a22);
}
#invitation-page #invitation .section-intro { padding: 5rem 0 2.4rem; max-width: 680px; margin: auto; }
#invitation-page #invitation .section-intro h2 { font-size: clamp(2.65rem,9vw,4rem); line-height: 1.12; text-shadow: 0 3px 20px rgb(12 27 18/.6); }
#invitation-page #invitation .section-intro>p { color: #dac9a2; font-size: .85rem; font-style: italic; margin: .85rem auto 0; }
#invitation-page #family-letter { position: relative; width: 100%; max-width: 440px; margin: auto; perspective: 1600px; filter: none; background: none; box-shadow: none; border: 0; isolation: auto; }
#invitation-page #family-letter::before,#invitation-page #family-letter::after { display: none; }
#invitation-page #family-letter .invitation-turn { position: relative; transform-style: preserve-3d; transform-origin: 50% 52%; }
#invitation-page #family-letter :is(.letter-content,.invitation-back) {
  background: #eadbc1 url('assets/letter.webp') center/100% 100% no-repeat;
  border: 0; border-radius: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 25px 48px -16px rgb(3 15 9/.5),0 2px 4px rgb(3 15 9/.15);
}
#invitation-page #family-letter .letter-content { position: relative; z-index: 2; min-height: 0; padding: 3.9rem 1.65rem 4rem; color: #4b4835; transform: translateZ(1px); text-shadow: none; }
#invitation-page #family-letter .letter-content::before,#invitation-page #family-letter .letter-content::after { display: none; }
#invitation-page #family-letter .invitation-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #654b32; }
#invitation-page #family-letter .invitation-back img { width: 45%; height: auto; filter: saturate(.6); }
#invitation-page #family-letter .invitation-back span { font-family: var(--font-display); font-size: 2.2rem; font-style: italic; margin-top: .8rem; }
#invitation-page #family-letter .letter-content>p { font-size: .81rem; line-height: 1.8; }
#invitation-page #family-letter .letter-blessing { color: #6c5c42; font-style: italic; max-width: 17rem; margin: 0 auto 1.6rem; }
#invitation-page #family-letter .root-families { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: .3rem; }
#invitation-page #family-letter .letter-person { min-width: 0; }
#invitation-page #family-letter .letter-person h3 { color: #65412d; font-size: clamp(2.6rem,10.5vw,3.6rem); line-height: 1.16; letter-spacing: -.035em; overflow-wrap: anywhere; }
#invitation-page #family-letter .parent-line { color: #56533c; font-size: .77rem; line-height: 1.85; max-width: 20rem; margin: .6rem auto .1rem; overflow-wrap: anywhere; }
#invitation-page #family-letter .letter-and { display: block; color: #91703e; font-size: 1.8rem; line-height: 1.25; margin: .6rem 0; }
#invitation-page #family-letter .letter-invite { color: #56533c; margin: 1.8rem auto 1.4rem; }
#invitation-page #family-letter .letter-date { color: #65412d; font-size: .94rem; font-weight: 400; letter-spacing: .01em; }
#invitation-page #family-letter .letter-location { color: #6c5c42; font-style: italic; margin-top: .35rem; }
#invitation-page #unfold-letter { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; filter: none; transform: none; z-index: 4; }
#invitation-page #unfold-letter svg { display: none; }
#invitation-page #family-letter.is-open #unfold-letter { opacity: 0; visibility: hidden; pointer-events: none; }
#invitation-page #invitation .letter-footnote { color: #c7ba9a; font-size: .78rem; font-style: italic; margin: 2rem auto 0; }

/* A botanical dial chooses the hour of the celebration, within one living scene. */
#invitation-page #events { background: #182a22; padding: 0; overflow: clip; }
#invitation-page #events>.section-intro { padding: 3.8rem 1.5rem 1rem; }
#invitation-page #events>.section-intro h2 { font-size: clamp(2.8rem,9.5vw,4.9rem); line-height: 1.08; }
#invitation-page #events>.section-intro p { color: #c7b999; font-size: .88rem; line-height: 1.85; max-width: 28rem; margin: 1.2rem auto 0; }
#invitation-page #events .chapter-leaf { width: 48px; margin: 0 auto 1.3rem; filter: saturate(.7); }
#invitation-page #events .season-dial {
  --season-radius: clamp(108px,31vw,137px);
  position: relative; width: min(100%,365px); height: 322px; margin: .25rem auto 1.35rem;
  color: #cbb894; isolation: isolate;
}
#invitation-page #events .season-dial::before {
  content: ''; position: absolute; width: 53%; aspect-ratio: 1; left: 23.5%; top: 50%; transform: translateY(-50%);
  background: url('assets/season-dial-v19.webp') center/contain no-repeat; z-index: -1;
  filter: drop-shadow(0 9px 10px rgb(0 12 6/.25)); pointer-events: none;
}
#invitation-page #events .season-dial-center { position: absolute; left: 50%; top: 50%; width: 120px; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
#invitation-page #events .season-index { display: block; color: #ead39b; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; text-shadow: 0 1px 7px #1c2b1e; }
#invitation-page #events .season-current-date { display: block; max-width: 110px; margin: .45rem auto 0; color: #e0c997; font-size: .62rem; line-height: 1.5; text-shadow: 0 1px 6px #1c2b1e; }
#invitation-page #events .season-stop {
  position: absolute; top: 50%; left: 50%; width: 96px; min-height: 78px; padding: .2rem .15rem;
  transform: translate(-50%,-50%) rotate(var(--season-angle,0deg)) translateY(calc(-1 * var(--season-radius))) rotate(calc(-1 * var(--season-angle,0deg)));
  display: flex; flex-direction: column; align-items: center; gap: .22rem; border: 0; background: none; color: #d4c39f;
  line-height: 1.45; text-align: center; transition: color .45s ease;
}
#invitation-page #events .season-stop-leaf { display: block; flex-shrink: 0; width: 43px; height: 34px; background: url('assets/entry-maple-russet-v3.webp') center/contain no-repeat; filter: saturate(.72) brightness(1.02) drop-shadow(0 2px 3px rgb(0 12 5/.22)); transform: rotate(-18deg); transition: transform .65s var(--grove-ease),filter .65s ease; }
#invitation-page #events .season-stop-name { font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
#invitation-page #events .season-stop[aria-selected='true'] { color: #f2dfb5; }
#invitation-page #events .season-stop[aria-selected='true'] .season-stop-leaf { filter: saturate(.82) brightness(1.12) drop-shadow(0 0 8px rgb(195 144 62/.24)); transform: rotate(-3deg) translateY(-2px); }
#invitation-page #events .season-dial-many { height: auto; min-height: 170px; padding: 170px 21px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem 1.25rem; width: min(100%,550px); }
#invitation-page #events .season-dial-many::before { width: 155px; height: 155px; left: calc(50% - 77.5px); top: 0; transform: none; }
#invitation-page #events .season-dial-many .season-dial-center { top: 77px; }
#invitation-page #events .season-dial-many .season-stop { position: relative; top: auto; left: auto; transform: none; width: 100%; min-height: 72px; flex-direction: row; gap: .6rem; text-align: left; }
#invitation-page #events .season-dial-many .season-stop-leaf { flex: 0 0 38px; }
#invitation-page #events .season-dial-many .season-stop-name { font-size: .75rem; }
#invitation-page #events-list { display: block; background: #182a22; }
#invitation-page #events-list .ceremony {
  --scene-ground: #182a22; position: relative; display: block; padding: 0; min-height: 0;
  background: #182a22!important; overflow: clip; isolation: isolate;
}
#invitation-page #events-list.has-season-dial .ceremony { min-height: 820px; }
#invitation-page #events-list .ceremony[hidden] { display: none!important; }
#invitation-page #events-list .ceremony::after { display: none; }
#invitation-page #events-list .ceremony-art {
  position: relative; inset: auto; z-index: 0; height: 470px; min-height: 0; max-height: none; width: 100%; margin: 0; overflow: hidden;
}
#invitation-page #events-list .ceremony-art>img,#invitation-page #events-list .ceremony-art>.scene-film { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: saturate(.9); transform: none; }
#invitation-page #events-list .ceremony-art img { animation: none; }
#invitation-page #events-list .ceremony-art>img { animation: grove-scene-breathe 22s ease-in-out infinite alternate; animation-play-state: paused; }
#invitation-page #events-list .ceremony.is-chapter-active .ceremony-art>img { animation-play-state: running; }
#invitation-page #events-list .ceremony .ceremony-art:has(.scene-film.is-ready)>img { animation-play-state: paused; }
#invitation-page #events-list .ceremony-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(#182a22,transparent 8%,transparent 64%,#182a22); }
#invitation-page #events-list .ceremony-copy {
  position: relative; z-index: 3; padding: 0 1.7rem 3.7rem; width: 100%; max-width: 620px;
  min-height: 350px; margin: -2.5rem auto 0!important; background: none; filter: none; text-align: center; color: #e9dfc8;
}
#invitation-page #events-list .ceremony-copy::after { display: none; }
#invitation-page #events-list .ceremony-date { font-size: .77rem; color: #cfb177; line-height: 1.8; letter-spacing: .015em; margin: 0 0 .95rem; }
#invitation-page #events-list .ceremony h3 { color: #f2e5c9; font-size: clamp(2.6rem,9.5vw,4.7rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
#invitation-page #events-list .ceremony-venue { color: #d4be94; font-size: 1.03rem; line-height: 1.6; margin-top: 1.15rem; }
#invitation-page #events-list .ceremony-description { color: #d0c5ab; max-width: 31rem; margin: 1.1rem auto 1.3rem; font-size: .91rem; line-height: 1.95; }
#invitation-page #events-list .ceremony-attire { color: #bcac88; max-width: 30rem; margin: auto; font-size: .82rem; line-height: 1.85; }
#invitation-page #events-list .ceremony-attire .label { display: block; color: #d8c294; font-size: .76rem; font-style: italic; margin: 0 0 .2rem; }
#invitation-page #events-list .ceremony-map { color: #d9bd7b; font-size: .78rem; min-height: 46px; padding: .75rem .1rem; margin-top: .8rem; text-underline-offset: 5px; }
#invitation-page #events-list .chapter-atmosphere { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#invitation-page #events-list .chapter-atmosphere img { position: absolute; height: auto; max-width: none; object-fit: contain; filter: saturate(.65); }
#invitation-page #events-list .chapter-leaf-sweep { top: 15%; left: 20%; width: 58px; opacity: 0; }
#invitation-page #events-list .is-chapter-ready .chapter-leaf-sweep { animation: grove-passing-leaf 11s ease-in-out both; animation-play-state: paused; }
#invitation-page #events-list .chapter-bough { width: 44%; top: -15%; opacity: .4; }
#invitation-page #events-list .chapter-bough--left { left: -18%; transform: rotate(-30deg); }
#invitation-page #events-list .chapter-bough--right { right: -20%; transform: scaleX(-1) rotate(-25deg); }
#invitation-page #events-list :is(.chapter-lantern-glow,.chapter-candle-glow) { position: absolute; width: 40%; height: 25%; left: 3%; top: 45%; opacity: .15; background: radial-gradient(ellipse,rgb(229 176 70/.25),transparent 67%); mix-blend-mode: screen; }
#invitation-page #events-list .chapter-candle-glow { left: 15%; top: 37%; width: 70%; }
#invitation-page #events-list .is-chapter-ready :is(.chapter-lantern-glow,.chapter-candle-glow) { animation: grove-lantern-breathe 7s ease-in-out infinite; animation-play-state: paused; }
#invitation-page #events-list .is-chapter-active .chapter-atmosphere :is(.chapter-leaf-sweep,.chapter-lantern-glow,.chapter-candle-glow) { animation-play-state: running; }

/* Their actual photograph, with no frame, paper mount or invented scenery. */
#invitation-page #story { display: block; position: relative; isolation: isolate; overflow: clip; padding: 5.2rem 23px 5.7rem; background: #26392b; }
#invitation-page #story::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#182a22,transparent 16%,transparent 82%,#1b2d23); pointer-events: none; }
#invitation-page #story .portrait-keepsake { position: relative; width: 100%; max-width: 510px; margin: auto; perspective: none; isolation: isolate; transform: perspective(1400px) rotateX(var(--portrait-tilt-x,0deg)) rotateY(var(--portrait-tilt-y,0deg)); transition: transform 1s var(--grove-ease); }
#invitation-page #story .portrait-thread { display: none; }
#invitation-page #story .story-portrait { position: relative; z-index: 2; width: 100%; max-width: none; padding: 0; margin: 0; background: none; box-shadow: none; filter: none; transform: none!important; }
#invitation-page #story .story-portrait::after { display: none; }
#invitation-page #story .story-portrait img { width: 100%; height: auto; aspect-ratio: 4/5; max-height: 650px; object-fit: contain; object-position: center; background: none; border: 0; box-shadow: none; }
#invitation-page #story .story-portrait figcaption { color: #bdaf8d; font-size: .74rem; font-style: italic; line-height: 1.8; padding: 1rem .5rem 0; }
#invitation-page #story .keepsake-bough { position: absolute; width: 61%; max-width: 340px; height: auto; top: -12%; right: -24%; z-index: 0; opacity: .75; transform: rotate(8deg); transform-origin: 85% 10%; pointer-events: none; animation: grove-bough-breathe 13s ease-in-out infinite; animation-play-state: paused; }
#invitation-page #story.is-in-view .keepsake-bough { animation-play-state: running; }
#invitation-page #story .canopy-names { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .2rem .8rem; color: #e7c78a; font-family: var(--font-display); font-size: clamp(2.45rem,9vw,4rem); line-height: 1.2; padding-top: 1.5rem; }
#invitation-page #story .canopy-names :is(span,b) { font-weight: 400; max-width: 100%; overflow-wrap: anywhere; }
#invitation-page #story .canopy-names em { font-size: .55em; color: #a88853; }
#invitation-page #story .story-copy { width: 100%; max-width: 590px; margin: auto; padding: 3.3rem 0 0; background: none; filter: none; transform: none!important; }
#invitation-page #story .story-copy>.chapter-note { color: #bdaa7e; font-size: .78rem; margin-bottom: 1.2rem; }
#invitation-page #story .story-copy h2 { color: #ecdec0; font-size: clamp(2.8rem,9.5vw,4.7rem); line-height: 1.09; margin-bottom: 1.65rem; }
#invitation-page #story .story-copy>p[data-bind] { color: #d1c7ac; font-size: .96rem; line-height: 2; }
#invitation-page #story .story-tags { color: #aa946b; font-size: .76rem; line-height: 1.8; gap: .6rem 1.1rem; margin-top: 1.8rem; }
#invitation-page #story .story-signoff { color: #bca67e; font-size: .8rem; margin-top: 1.8rem; }
#invitation-page #story .story-signoff>span { color: #d3b67d; font-size: 1.8rem; }

/* A real optical lantern holds the memories in light, without picture frames. */
#invitation-page #gallery { position: relative; isolation: isolate; padding: 0 0 4.8rem; background: #17271f; color: #eadabd; overflow: clip; }
#invitation-page #gallery::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 75% 51%,rgb(105 106 66/.13),transparent 60%),linear-gradient(#1b2d23,#17271f 22%,#17271f 76%,#1c2d22); }
#invitation-page #gallery .section-intro { padding: 4.5rem 1.6rem 2.6rem; }
#invitation-page #gallery h2 { font-size: clamp(2.9rem,10vw,4.9rem); line-height: 1.07; }
#invitation-page #gallery .section-intro>p { color: #b8aa8d; font-size: .86rem; margin-top: 1.2rem; }
#invitation-page #gallery .memory-projection { position: relative; isolation: isolate; width: 100%; max-width: 1040px; padding: 0 0 105px; margin: auto; background: none; box-shadow: none; border: 0; border-radius: 0; }
#invitation-page #gallery .memory-projection::before,#invitation-page #gallery .memory-projection::after,#invitation-page #gallery .album-spine,#invitation-page #gallery .album-pressed-leaf { display: none; }
#invitation-page #gallery #gallery-list { --memory-width: 100%; --memory-inset: 24px; --memory-gap: 48px; position: relative; z-index: 2; display: flex; align-items: stretch; gap: var(--memory-gap); padding: 0 var(--memory-inset); overflow-x: auto; overflow-y: hidden; scroll-padding-inline: var(--memory-inset); scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; }
#invitation-page #gallery #gallery-list::-webkit-scrollbar { display: none; }
#invitation-page #gallery .memory,#invitation-page #gallery .memory:nth-child(even) { display: flex; flex-direction: column; position: relative; flex: 0 0 100%; width: 100%; min-width: 0; align-self: stretch; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; transform: none!important; color: #cbb994; }
#invitation-page #gallery .memory::before,#invitation-page #gallery .memory::after { display: none; }
#invitation-page #gallery .memory img { width: 100%; height: clamp(280px,91vw,530px); aspect-ratio: auto; object-fit: contain; object-position: center; padding: 0; border: 0; background: none; box-shadow: none; filter: none; }
#invitation-page #gallery .memory-caption { display: block; min-height: 48px; padding: 1.1rem .5rem 0; margin: 0; color: #c4b28d; font-size: .8rem; line-height: 1.8; font-style: italic; text-align: center; }
#invitation-page #gallery .projection-lamp { position: absolute; z-index: 3; left: 5%; bottom: 0; width: clamp(120px,36vw,210px); pointer-events: none; }
#invitation-page #gallery .projection-lamp img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 9px 10px rgb(0 10 3/.32)); }
#invitation-page #gallery .projection-beam { position: absolute; z-index: 0; width: 85%; height: 70%; left: 9%; bottom: 55px; pointer-events: none; opacity: .22; background: linear-gradient(25deg,rgb(224 210 153/.28),rgb(224 210 153/.04) 72%,transparent); clip-path: polygon(0 100%,84% 0,100% 66%); transform-origin: 0 100%; }
#invitation-page #gallery .memory-projection.is-projecting .projection-beam { animation: grove-projection-shutter .85s ease both; }
#invitation-page #gallery .gallery-controls { position: relative; z-index: 4; gap: 1.4rem; margin: .6rem 24px 0; color: #cdb381; font-size: .75rem; }
#invitation-page #gallery .gallery-controls button { border: 0; background: none; color: #d9bd7b; padding: .5rem; min-width: 48px; min-height: 48px; font-size: 1.6rem; }
#invitation-page #gallery .album-help { color: #b9a580; font-size: .75rem; margin: 1.1rem 1.5rem 0; line-height: 1.8; }

/* The estate's wooden wayfinders hold practical answers. */
#invitation-page #travel { position: relative; isolation: isolate; overflow: clip; display: block; background: #223529; padding: 0; }
#invitation-page #travel .travel-stilllife { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; z-index: -2; overflow: hidden; pointer-events: none; }
#invitation-page #travel .travel-stilllife img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .33; filter: saturate(.6); }
#invitation-page #travel .travel-stilllife::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#1c2d22,rgb(28 45 33/.4) 20%,rgb(25 42 31/.68) 76%,#192b21); }
#invitation-page #travel .travel-content { position: relative; max-width: 1050px; margin: 0 auto; padding: 5rem 24px 5.6rem; }
#invitation-page #travel .travel-content header { max-width: 640px; text-align: center; margin: auto; }
#invitation-page #travel .chapter-note { color: #bca67a; font-size: .78rem; margin-bottom: 1.2rem; }
#invitation-page #travel .travel-content h2 { color: #ecdec0; font-size: clamp(2.8rem,9.5vw,4.8rem); line-height: 1.08; }
#invitation-page #travel .travel-content header>p[data-bind='travel.intro'] { color: #c9bd9e; font-size: .93rem; line-height: 1.95; margin: 1.5rem auto 1.2rem; }
#invitation-page #travel .travel-address { color: #d0b887; font-size: .88rem; line-height: 1.8; margin: auto; }
#invitation-page #travel .text-link { color: #dfc38a; font-size: .82rem; min-height: 48px; padding: .85rem .3rem; }
#invitation-page #travel #guest-guide { display: flex; flex-direction: column; gap: 1rem; max-width: 740px; margin: 2.5rem auto 0; }
#invitation-page #travel .guest-note { position: relative; display: block; width: 95%; max-width: 510px; margin: 0; padding: 0; border: 0; align-self: flex-start; }
#invitation-page #travel .guest-note:nth-child(even) { align-self: flex-end; }
#invitation-page #travel .guest-note:last-child { padding: 0; }
#invitation-page #travel .guest-note-number,#invitation-page #travel .guest-illustration { display: none; }
#invitation-page #travel .guest-note-copy { display: block; }
#invitation-page #travel .guest-note-copy h3 { margin: 0; font-size: 1.65rem; line-height: 1.18; color: #f0dfb9; }
#invitation-page #travel .guest-note-toggle { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 88px; width: 100%; padding: 1rem 2.5rem 1rem 2rem; border: 0; background: none; color: #f0dfb9; text-align: left; font: inherit; line-height: inherit; text-shadow: 0 1px 5px rgb(36 24 10/.5); }
#invitation-page #travel .guest-note-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/wayfinder-sign-v19.webp') center/100% 100% no-repeat; pointer-events: none; }
#invitation-page #travel .guest-note:nth-child(even) .guest-note-toggle::before { transform: scaleX(-1); }
#invitation-page #travel .guest-note-toggle::after { content: '+'; flex: 0 0 18px; width: 18px; font-family: var(--font-body); font-size: 1.15rem; line-height: 1; color: #e3c68e; transition: transform .4s ease; }
#invitation-page #travel .guest-note-toggle[aria-expanded='true']::after { transform: rotate(45deg); }
#invitation-page #travel .guest-note-panel { padding: .75rem 1.2rem 1.25rem; }
#invitation-page #travel .guest-note-panel[hidden] { display: none!important; }
#invitation-page #travel .guest-note-panel p,#invitation-page #travel .guest-note-copy>p { font-size: .89rem; line-height: 1.95; color: #cec1a3; max-width: none; margin: 0; }

/* Days take the leading role; the remaining time stays quiet underneath. */
#invitation-page #countdown { position: relative; isolation: isolate; overflow: clip; padding: 3.5rem 24px 4.8rem; background: #192b21; color: #e5d7b6; }
#invitation-page #countdown::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 42%,rgb(102 107 59/.16),transparent 65%); pointer-events: none; }
#invitation-page #countdown .countdown-art,#invitation-page #countdown .countdown-leaf { display: none; }
#invitation-page #countdown h2 { font-size: clamp(2.5rem,8.6vw,4.4rem); line-height: 1.1; }
#invitation-page #countdown .countdown-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem .8rem; max-width: 450px; margin: 1.7rem auto 2rem; }
#invitation-page #countdown .countdown-values>div { display: flex; flex-direction: column; align-items: center; gap: .45rem; border: 0; background: none; padding: 0; }
#invitation-page #countdown .countdown-values>div:first-child { grid-column: 1/-1; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: .7rem; }
#invitation-page #countdown .countdown-values span { font-family: var(--font-display); color: #d9bd7b; font-size: 2.7rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
#invitation-page #countdown .countdown-values>div:first-child span { font-size: clamp(6.8rem,27vw,10.5rem); }
#invitation-page #countdown .countdown-values small { color: #b3a17b; font-size: .74rem; margin: 0; }
#invitation-page #countdown .countdown-values>div:first-child small { font-size: 1rem; font-style: italic; }
#invitation-page #countdown>p { color: #d1bf98; font-size: .91rem; }
#invitation-page #countdown .calendar-actions { margin-top: 1.2rem; gap: .4rem 1.4rem; font-size: .76rem; }
#invitation-page #countdown .calendar-actions a { color: #c6a978; min-height: 46px; padding: .7rem .1rem; }
#invitation-page #countdown .gif-detail { width: 190px; max-width: 60%; margin: 0 auto 1.5rem; overflow: hidden; border: 0; border-radius: 48% 48% 42% 42%; mask-image: radial-gradient(ellipse,#000 44%,transparent 72%); }
#invitation-page #countdown .gif-detail img { display: block; width: 100%; height: auto; object-fit: cover; }

/* The reply returns to the family grove, not another dinner table. */
#invitation-page #rsvp { position: relative; isolation: isolate; overflow: clip; min-height: 860px; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: #182a22; }
#invitation-page #rsvp .rsvp-art { position: absolute; inset: 0; z-index: -2; filter: saturate(.8) brightness(.83); overflow: hidden; pointer-events: none; }
#invitation-page #rsvp .rsvp-art :is(img,.scene-film) { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: none; }
#invitation-page #rsvp::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#192b21,transparent 16%,rgb(23 42 29/.06) 35%,rgb(19 38 26/.85) 68%,#13251b); }
#invitation-page #rsvp .wish-branch { position: absolute; width: 68%; max-width: 640px; top: 2%; right: -10%; height: auto; z-index: 0; opacity: .8; pointer-events: none; }
#invitation-page #rsvp .rsvp-copy { position: relative; z-index: 2; width: 100%; max-width: 640px; padding: 25rem 1.8rem 4.7rem; color: #eadcbc; text-shadow: 0 2px 14px rgb(4 24 12/.45); }
#invitation-page #rsvp .rsvp-copy>.chapter-note { color: #c1aa7c; font-size: .78rem; line-height: 1.8; max-width: 22rem; margin: 0 auto 1.2rem; }
#invitation-page #rsvp .rsvp-copy h2 { color: #f1e0b9; font-size: clamp(3.1rem,10.5vw,5.3rem); line-height: 1.07; }
#invitation-page #rsvp .rsvp-copy>p[data-bind] { color: #d5c8a9; font-size: .94rem; line-height: 1.95; max-width: 28rem; margin: 1.5rem auto 1.8rem; }
#invitation-page #rsvp .button { min-height: 55px; padding: .95rem 2rem; font-size: .86rem; color: #243526; background: #d8bc81; border: 1px solid #ecd5a7; box-shadow: 0 6px 20px rgb(2 19 9/.22); transition: background .3s ease; }
#invitation-page #rsvp .button:hover { background: #e6cc94; }
#invitation-page #rsvp #rsvp-note { font-size: .77rem; line-height: 1.8; color: #beae8d; margin-top: 1.1rem; }
#invitation-page #rsvp .gif-detail { width: 72px; margin: 0 auto .75rem; opacity: .87; pointer-events: none; }
#invitation-page #rsvp .gif-detail img { width: 100%; height: auto; object-fit: contain; }
#invitation-page #closing { position: relative; background: #13251b; padding: 1.7rem 1.5rem 6.6rem; text-align: center; }
#invitation-page #closing .gif-lantern {
  width: clamp(128px,36vw,168px); aspect-ratio: 4/5; margin: -.8rem auto 1.15rem;
  overflow: hidden; opacity: .92; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 43%,#000 29%,#000 43%,transparent 73%);
  mask-image: radial-gradient(ellipse at 50% 43%,#000 29%,#000 43%,transparent 73%);
}
#invitation-page #closing .gif-lantern img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#invitation-page #closing>img { width: 45px; margin: 0 auto 1.4rem; filter: saturate(.55) brightness(.82); }
#invitation-page #closing>p[data-bind] { color: #b5a782; font-size: .8rem; line-height: 1.9; }
#invitation-page #closing .closing-names { color: #dbc18c; font-size: clamp(2.5rem,9vw,4rem); line-height: 1.25; gap: .4rem .7rem; margin: 1rem auto; }
#invitation-page #closing .closing-names em { color: #a48349; }
#invitation-page #closing .closing-hashtag { color: #a38f68; font-size: .74rem; }
#invitation-page #closing>button { color: #c8ad78; min-height: 48px; margin-top: 1.5rem; padding: .7rem .2rem; font-size: .77rem; background: none; border: 0; border-bottom: 1px solid rgb(184 152 89/.32); }

@keyframes grove-scene-breathe { from { transform: scale(1.025); } to { transform: scale(1.065) translateY(-.35%); } }
@keyframes grove-passing-leaf { 0% { opacity: 0; transform: translate3d(-15px,-25px,0) rotate(-20deg); } 20% { opacity: .5; } 60% { opacity: .5; transform: translate3d(35px,140px,0) rotate(28deg); } 100% { opacity: 0; transform: translate3d(10px,300px,0) rotate(65deg); } }
@keyframes grove-lantern-breathe { 0%,100% { opacity: .13; } 47% { opacity: .4; } 63% { opacity: .27; } }
@keyframes grove-bough-breathe { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(9.5deg) translateY(2px); } }
@keyframes grove-projection-shutter { 0% { opacity: .22; } 28% { opacity: .03; } 51% { opacity: .29; } 100% { opacity: .22; } }
.is-backgrounded #invitation-page #events-list .ceremony.is-chapter-active .ceremony-art>img,
.is-backgrounded #invitation-page #events-list .is-chapter-active .chapter-atmosphere :is(.chapter-leaf-sweep,.chapter-lantern-glow,.chapter-candle-glow),
.is-backgrounded #invitation-page #story .keepsake-bough,
.is-backgrounded #invitation-page #gallery .memory-projection.is-projecting .projection-beam { animation-play-state: paused; }

@media(min-width:760px) {
  #invitation-page #invitation { padding-inline: 5vw; padding-bottom: 5.5rem; }
  #invitation-page #invitation .roots-art img { object-position: center 38%; }
  #invitation-page #invitation .section-intro { padding-top: 6rem; padding-bottom: 2.6rem; }
  #invitation-page #events>.section-intro { padding-top: 4.4rem; }
  #invitation-page #events .season-dial { width: 420px; height: 335px; --season-radius: 140px; margin-bottom: .5rem; }
  #invitation-page #events .season-dial::before { width: 46%; left: 27%; }
  #invitation-page #events .season-stop { width: 120px; }
  #invitation-page #events .season-stop-name { font-size: .76rem; }
  #invitation-page #events .season-dial-many { width: min(100%,750px); height: auto; grid-template-columns: repeat(3,minmax(0,1fr)); padding-top: 180px; }
  #invitation-page #events .season-dial-many::before { width: 155px; height: 155px; left: calc(50% - 77.5px); }
  #invitation-page #events-list .ceremony,#invitation-page #events-list .ceremony:nth-child(even) { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; padding: 0 5vw 0 0; min-height: 740px; }
  #invitation-page #events-list .ceremony-art,#invitation-page #events-list .ceremony:nth-child(even) .ceremony-art { height: 760px; order: 0!important; }
  #invitation-page #events-list .ceremony-art::after,#invitation-page #events-list .ceremony:nth-child(even) .ceremony-art::after { background: linear-gradient(90deg,transparent 62%,#182a22),linear-gradient(#182a22,transparent 8%,transparent 87%,#182a22); }
  #invitation-page #events-list .ceremony-copy,#invitation-page #events-list .ceremony:nth-child(even) .ceremony-copy { width: 100%; max-width: 560px; min-height: 0; margin: 0!important; padding: 3rem 1rem 3rem 2.7rem; text-align: left; }
  #invitation-page #events-list .ceremony h3 { font-size: clamp(3rem,4.5vw,4.9rem); }
  #invitation-page #events-list .ceremony-description { font-size: .98rem; margin-inline: 0; }
  #invitation-page #events-list .ceremony-venue { font-size: 1.16rem; }
  #invitation-page #events-list .ceremony-attire { margin-inline: 0; font-size: .88rem; }
  #invitation-page #story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 7vw; padding: 7rem 7vw 6.7rem; }
  #invitation-page #story .story-copy { padding: 0; margin: 0; }
  #invitation-page #story .story-copy h2 { font-size: clamp(3rem,4.5vw,4.8rem); }
  #invitation-page #story .story-copy>p[data-bind] { font-size: 1rem; }
  #invitation-page #gallery .section-intro { padding-top: 5rem; padding-bottom: 3rem; }
  #invitation-page #gallery .memory-projection { width: min(94%,1040px); padding-bottom: 140px; }
  #invitation-page #gallery #gallery-list { --memory-inset: 80px; --memory-gap: 160px; }
  #invitation-page #gallery .memory img { height: 550px; }
  #invitation-page #gallery .memory-caption { font-size: .88rem; padding-top: 1.5rem; }
  #invitation-page #gallery .projection-lamp { width: 230px; left: 3%; }
  #invitation-page #gallery .projection-beam { left: 8%; bottom: 90px; }
  #invitation-page #travel .travel-content { padding: 6rem 6vw; }
  #invitation-page #travel #guest-guide { margin-top: 3rem; max-width: 800px; }
  #invitation-page #travel .guest-note { width: 75%; max-width: 530px; }
  #invitation-page #travel .guest-note-toggle { min-height: 96px; padding-inline: 2.5rem 3.1rem; }
  #invitation-page #travel .guest-note-copy h3 { font-size: 1.9rem; }
  #invitation-page #travel .guest-note-panel { padding: .8rem 2rem 1.4rem; }
  #invitation-page #travel .guest-note-panel p { font-size: .96rem; }
  #invitation-page #countdown { padding: 4rem 2rem 5.4rem; }
  #invitation-page #countdown .gif-detail { width: 230px; }
  #invitation-page #countdown .countdown-values { max-width: 500px; }
  #invitation-page #countdown .countdown-values span { font-size: 3.15rem; }
  #invitation-page #countdown .countdown-values>div:first-child span { font-size: 10.5rem; }
  #invitation-page #rsvp { min-height: 940px; }
  #invitation-page #rsvp .rsvp-art :is(img,.scene-film) { object-position: center 46%; }
  #invitation-page #rsvp .rsvp-copy { padding: 29rem 2rem 5.4rem; }
}
@media(min-width:1300px) {
  #invitation-page #story { padding-inline: max(8vw,calc((100vw - 1280px)/2)); }
  #invitation-page #events-list .ceremony,#invitation-page #events-list .ceremony:nth-child(even) { padding-right: max(7vw,calc((100vw - 1460px)/2)); }
}
@media(max-width:359px) {
  #invitation-page #invitation { padding-inline: 16px; }
  #invitation-page #events .season-stop { width: 92px; }
  #invitation-page #events .season-stop-name { font-size: .75rem; }
  #invitation-page #events-list .ceremony-art { height: 430px; }
  #invitation-page #events-list .ceremony-copy { padding-inline: 1.4rem; }
  #invitation-page #events-list .ceremony h3 { font-size: 2.5rem; }
  #invitation-page #events-list .ceremony-description { font-size: .88rem; }
  #invitation-page #story { padding-inline: 20px; }
  #invitation-page #story .story-copy>p[data-bind] { font-size: .92rem; }
  #invitation-page #gallery #gallery-list { --memory-inset: 18px; --memory-gap: 36px; }
  #invitation-page #gallery .memory img { height: 280px; }
  #invitation-page #travel .travel-content { padding-inline: 18px; }
  #invitation-page #travel .guest-note-toggle { padding-inline: 1.7rem 2.1rem; min-height: 83px; }
  #invitation-page #travel .guest-note-copy h3 { font-size: 1.5rem; }
  #invitation-page #rsvp .rsvp-copy { padding-inline: 1.45rem; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page #unfold-letter { display: none; }
  #invitation-page #story .portrait-keepsake { transform: none; }
  #invitation-page #story .keepsake-bough,#invitation-page #events-list .ceremony-art img,#invitation-page #events-list .chapter-atmosphere span,#invitation-page #gallery .projection-beam { animation: none!important; }
  #invitation-page #events-list .ceremony-art>img { transform: none; }
}