/* Patjhad / four physical scales: the estate, a guest folio, an heirloom,
   and a candlelit writing desk. All living layers use Finale's visibility clock. */
#invitation-page :is(#travel,#countdown,#rsvp,#closing) {
  --finale-forest: #24372d;
  --finale-paper: #e3e6d4;
  --finale-honey: #b79b6b;
  --finale-ink: #344536;
  --finale-play: paused;
}
#invitation-page :is(#travel,#countdown,#rsvp,#closing).finale-running { --finale-play: running; }

/* An actual approach to the estate, under a near maple branch. */
#invitation-page #travel.finale-scene {
  position: relative;
  display: block;
  padding: 0;
  isolation: isolate;
  background: #24372d;
}
#invitation-page #travel.finale-scene .travel-stilllife {
  height: 690px;
  min-height: 0;
  overflow: hidden;
}
#invitation-page #travel.finale-scene .travel-stilllife img,
#invitation-page #travel.finale-scene .travel-stilllife.finale-arriving img {
  object-position: 59% 42%;
  filter: saturate(.73) brightness(.88);
  animation: finale51-estate-light 19s ease-in-out infinite alternate;
  animation-play-state: var(--finale-play);
  transform-origin: 67% 42%;
}
#invitation-page #travel.finale-scene .travel-stilllife::after {
  background: linear-gradient(180deg,#24372d 0%,rgb(36 55 45/.04) 15%,rgb(36 55 45/.03) 41%,rgb(36 55 45/.82) 76%,#24372d 100%);
}
#invitation-page #travel.finale-scene .travel-stilllife.finale-arriving {
  animation: finale-path-arrive 3.6s ease-out both;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .arrival-maple {
  display: block;
  position: absolute;
  z-index: 1;
  top: 27px;
  right: -34px;
  width: clamp(144px,42vw,230px);
  pointer-events: none;
  transform-origin: 100% 0;
  animation: finale51-maple-breeze 7.7s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .arrival-maple img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-22deg);
  filter: saturate(.68) brightness(.78) drop-shadow(-4px 9px 8px rgb(18 30 19/.24));
}
#invitation-page #travel.finale-scene .travel-content {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 360px 22px 70px;
}
#invitation-page #travel.finale-scene .travel-content header { max-width: 430px; }
#invitation-page #travel.finale-scene .travel-content h2 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(2.7rem,10.2vw,4rem);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -.025em;
  color: #f4ead3;
}
#invitation-page #travel.finale-scene .travel-content header>p[data-bind='travel.intro'] {
  margin: 1.05rem auto .8rem;
  max-width: 350px;
  color: #e1dfc8;
  font-size: .87rem;
  line-height: 1.9;
}
#invitation-page #travel.finale-scene .travel-address {
  margin-inline: auto;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 1.13rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: #d6c49c;
}
#invitation-page #travel.finale-scene #venue-map {
  min-height: 48px;
  margin: .7rem auto 0;
  padding: .65rem 1.05rem;
  border: 1px solid rgb(222 206 166/.42);
  border-radius: 1px;
  color: #f0e2c1;
  text-decoration: none;
  font-size: .78rem;
  background: rgb(31 49 38/.43);
  transition: background .25s ease,border-color .25s ease;
}
#invitation-page #travel.finale-scene #venue-map:hover { background: #344c3b; border-color: #ceba8f; }
#invitation-page #travel.finale-scene #venue-map:focus-visible { outline: 2px solid #f2dfb4; outline-offset: 5px; }

/* The folio is one open keepsake. Useful objects illustrate its content instead
   of enclosing every line of information in an identical box. */
#invitation-page #travel.finale-scene .guest-folio {
  position: relative;
  max-width: 580px;
  margin: 2.35rem auto 0;
  padding: 2rem 22px 1.1rem;
  isolation: isolate;
  background: linear-gradient(rgb(224 230 211/.84),rgb(224 230 211/.9)),url('assets/letter.webp') center/100% 100%;
  border-radius: 45% 45% 2px 2px / 16px 16px 2px 2px;
  box-shadow: 0 2px 0 #bfbea6,0 6px 0 -2px #c6c9b6,0 17px 38px rgb(9 21 14/.2);
}
#invitation-page #travel.finale-scene .guest-folio::before {
  content: '';
  position: absolute;
  inset: 18px 12px 16px;
  z-index: -1;
  border-inline: 1px solid rgb(120 126 89/.22);
  pointer-events: none;
}
#invitation-page #travel.finale-scene .guest-folio-title {
  margin: 0 0 .9rem;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.2;
  color: #506044;
  text-align: center;
}
#invitation-page #travel.finale-scene #guest-guide {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#invitation-page #travel.finale-scene .guest-note,
#invitation-page #travel.finale-scene .guest-note:nth-child(even) {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: start;
  gap: 0 11px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid rgb(93 107 75/.2);
}
#invitation-page #travel.finale-scene .guest-note:last-child { padding-bottom: .25rem; border-bottom: 0; }
#invitation-page #travel.finale-scene .guest-note-number { display: none; }
#invitation-page #travel.finale-scene .guest-illustration {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 64px;
  max-height: 78px;
  margin: 7px 0 0;
  align-self: start;
  filter: saturate(.66) drop-shadow(0 3px 2px rgb(49 57 32/.1));
  background-image: url('assets/guest-vignettes-small-v18.webp');
  transform-origin: 50% 90%;
  transition: transform .6s cubic-bezier(.2,.6,.2,1),filter .6s ease;
}
#invitation-page #travel.finale-scene .guest-illustration--leaf {
  background-image: url('assets/entry-maple-russet-v3.webp');
  background-size: contain;
  transform: rotate(-14deg);
}
#invitation-page #travel.finale-scene .guest-note:has(.guest-note-toggle[aria-expanded='true']) .guest-illustration {
  transform: rotate(-3deg) translateY(-2px);
  filter: saturate(.86) drop-shadow(1px 5px 3px rgb(49 57 32/.16));
}
#invitation-page #travel.finale-scene .guest-note-copy { display: block; grid-column: 2; min-width: 0; }
#invitation-page #travel.finale-scene .guest-note-copy h3 {
  margin: 0;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 1.52rem;
  font-weight: 600;
  line-height: 1.2;
  color: #344b3b;
}
#invitation-page #travel.finale-scene .guest-note-toggle,
#invitation-page #travel.finale-scene .guest-note:nth-child(even) .guest-note-toggle {
  min-height: 66px;
  padding: .7rem 0;
  gap: 7px;
  color: #344b3b;
  text-shadow: none;
  font: inherit;
}
#invitation-page #travel.finale-scene .guest-note-toggle::after { color: #896a45; font-size: 1.05rem; }
#invitation-page #travel.finale-scene .guest-note-toggle:hover { color: #7d603d; }
#invitation-page #travel.finale-scene .guest-note-toggle:focus-visible { outline: 2px solid #61764c; outline-offset: 3px; }
#invitation-page #travel.finale-scene .guest-note-panel { padding: 0 0 .9rem; }
#invitation-page #travel.finale-scene .guest-note-panel p,
#invitation-page #travel.finale-scene .guest-note-copy>p {
  font-size: .78rem;
  line-height: 1.9;
  color: #4a5845;
  overflow-wrap: anywhere;
}
#invitation-page #travel.finale-scene .arrival-lamplight { top: 210px; left: 65%; width: 24%; height: 100px; }

/* A glass vessel, still numbers, and one leaf resting at its foot. */
#invitation-page #countdown.finale-scene {
  position: relative;
  grid-template-columns: minmax(102px,146px) minmax(0,185px);
  column-gap: 1.05rem;
  padding: 1.5rem 23px 4.2rem;
  background: #24372d;
  isolation: isolate;
}
#invitation-page #countdown.finale-scene::before {
  inset: 18% 0 16%;
  background: radial-gradient(ellipse at 38% 57%,rgb(181 151 85/.105),transparent 56%);
}
#invitation-page #countdown.finale-scene>h2 {
  margin: 0 0 1.65rem;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(2.55rem,9vw,3.8rem);
  font-weight: 500;
  line-height: 1.06;
  color: #eee5cb;
}
#invitation-page #countdown.finale-scene .autumn-hourglass {
  width: 100%;
  max-width: 150px;
  margin: 0;
  align-self: center;
}
#invitation-page #countdown.finale-scene .hourglass-portrait {
  filter: saturate(.8) brightness(1.03) drop-shadow(7px 12px 9px rgb(7 24 14/.38));
}
#invitation-page #countdown.finale-scene .countdown-values {
  gap: 1.1rem .6rem;
  margin: 0;
  max-width: 185px;
}
#invitation-page #countdown.finale-scene .countdown-values span {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 500;
  font-size: 2rem;
  color: #e3d9bf;
  font-variant-numeric: tabular-nums lining-nums;
}
#invitation-page #countdown.finale-scene .countdown-values>div:first-child span {
  font-size: clamp(4.2rem,18vw,6.1rem);
  line-height: .91;
  color: #ead9ac;
}
#invitation-page #countdown.finale-scene .countdown-values small { font-size: .62rem; color: #c6c9b0; }
#invitation-page #countdown.finale-scene .countdown-values>div:first-child small { color: #c6c9b0; font-size: .76rem; }
#invitation-page #countdown.finale-scene .clock-keepsake {
  grid-column: 1;
  grid-row: 2;
  z-index: 3;
  align-self: end;
  justify-self: end;
  width: 56px;
  margin: 0 -8px -12px 0;
  pointer-events: none;
  transform: rotate(-28deg);
}
#invitation-page #countdown.finale-scene .clock-keepsake img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.63) brightness(.82) drop-shadow(2px 4px 2px rgb(5 20 11/.28));
}
#invitation-page #countdown.finale-scene>p[data-date] {
  margin-top: 2rem;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: #dacba9;
}
#invitation-page #countdown.finale-scene .calendar-actions {
  margin-top: .4rem;
  column-gap: 1.35rem;
  font-size: .69rem;
}
#invitation-page #countdown.finale-scene .calendar-actions a { color: #d2d2b7; padding: .6rem .15rem; }
#invitation-page #countdown.finale-scene .calendar-actions a:focus-visible { outline: 2px solid #dcc28f; outline-offset: 3px; }

/* The film is already alive. Let its candlelight reach the physical stationery,
   without floating the reply itself or placing copy inside an asset. */
#invitation-page #rsvp.finale-scene {
  display: flex;
  align-items: flex-end;
  min-height: 790px;
  background: #1b2a22;
}
#invitation-page #rsvp.finale-scene .rsvp-art { filter: saturate(.76) brightness(1.03); }
#invitation-page #rsvp.finale-scene .rsvp-art :is(img,.scene-film),
#invitation-page #rsvp.finale-scene:has(.wish-lantern-near.finale-arriving) .rsvp-art :is(img,.scene-film) {
  object-position: 50% 40%;
  transform: none;
  animation: none;
}
#invitation-page #rsvp.finale-scene::after {
  background: linear-gradient(180deg,#24372d 0%,rgb(36 55 45/.07) 13%,rgb(27 42 34/.06) 29%,rgb(27 42 34/.75) 48%,#1b2a22 72%);
}
#invitation-page #rsvp.finale-scene .rsvp-copy {
  position: relative;
  width: 100%;
  max-width: 580px;
  padding: 320px 25px 3.6rem;
  text-shadow: 0 2px 14px rgb(13 25 17/.22);
}
#invitation-page #rsvp.finale-scene .rsvp-copy h2 {
  max-width: 460px;
  margin-inline: auto;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 500;
  font-size: clamp(2.9rem,10.7vw,4.3rem);
  line-height: 1.03;
  letter-spacing: -.028em;
  color: #f1e5ca;
}
#invitation-page #rsvp.finale-scene .rsvp-copy>p[data-bind] {
  max-width: 350px;
  margin: 1.1rem auto .15rem;
  color: #dbd9c3;
  font-size: .86rem;
  line-height: 1.9;
}
#invitation-page #rsvp.finale-scene .rsvp-stationery {
  width: min(80%,290px);
  aspect-ratio: 3/2;
  margin: .4rem auto -.3rem;
  pointer-events: none;
}
#invitation-page #rsvp.finale-scene .rsvp-stationery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.84) drop-shadow(2px 8px 7px rgb(5 20 11/.28));
  animation: finale51-writing-light 8.3s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #rsvp.finale-scene .rsvp-copy .button {
  min-height: 52px;
  padding: .85rem 2rem;
  border: 1px solid #c4ae7c;
  border-radius: 2px;
  background: #dbdac0;
  color: #304635;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 500;
  box-shadow: 0 4px 18px rgb(5 18 10/.18);
  transition: background .25s ease,box-shadow .25s ease;
}
#invitation-page #rsvp.finale-scene .rsvp-copy .button:hover { background: #eeead2; box-shadow: 0 4px 23px rgb(190 161 90/.13); }
#invitation-page #rsvp.finale-scene .rsvp-copy #rsvp-note { margin-top: 1rem; color: #c1c4ab; font-size: .74rem; }

/* One real flame, a resting branch, and the couple's editable signature. */
#invitation-page #closing.finale-scene {
  position: relative;
  padding: 1rem 26px 6rem;
  background: #1b2a22;
  color: #d4c7a9;
  isolation: isolate;
}
#invitation-page #closing.finale-scene .gif-lantern {
  width: 172px;
  margin: -1.1rem auto .15rem;
  opacity: .95;
}
#invitation-page #closing.finale-scene .closing-hearth {
  inset: -4% 0 25%;
  background: radial-gradient(ellipse at 50% 28%,rgb(172 123 51/.12),transparent 58%);
}
#invitation-page #closing.finale-scene>p[data-bind='closing.line'] {
  max-width: 280px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: #cccdb4;
}
#invitation-page #closing.finale-scene .closing-names {
  position: relative;
  max-width: 600px;
  margin: 1.2rem auto .8rem;
  gap: .2rem .85rem;
  color: #ede2c7;
  font-family: 'Pinyon Script',Georgia,serif;
  font-size: clamp(3rem,11vw,4.6rem);
  line-height: 1.2;
}
#invitation-page #closing.finale-scene .closing-names em {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-style: italic;
  font-size: .49em;
  color: #bda276;
}
#invitation-page #closing.finale-scene .closing-hashtag { color: #abbba1; font-size: .72rem; overflow-wrap: anywhere; }
#invitation-page #closing.finale-scene .closing-bough {
  position: absolute;
  display: block;
  right: -53px;
  bottom: -8px;
  z-index: -1;
  width: min(47vw,245px);
  pointer-events: none;
  transform-origin: 100% 100%;
  animation: finale51-closing-breeze 9.8s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #closing.finale-scene .closing-bough img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .58;
  transform: rotate(47deg);
  filter: saturate(.42) brightness(.58);
}
#invitation-page #closing.finale-scene>button {
  position: relative;
  min-height: 48px;
  margin-top: 1.4rem;
  color: #d5c49d;
  border-bottom-color: rgb(203 188 148/.34);
  font-size: .74rem;
}
#invitation-page #closing.finale-scene>button:focus-visible { outline: 2px solid #d9c399; outline-offset: 5px; }

@keyframes finale51-estate-light {
  from { transform: scale(1.025) translate3d(-.2%,.15%,0); }
  to { transform: scale(1.065) translate3d(.3%,-.3%,0); }
}
@keyframes finale51-maple-breeze {
  0%,100% { transform: rotate(-2.3deg) translate3d(0,0,0); }
  47% { transform: rotate(2.9deg) translate3d(-3px,4px,0); }
}
@keyframes finale51-writing-light {
  0%,100% { filter: saturate(.84) brightness(.96) drop-shadow(2px 8px 7px rgb(5 20 11/.28)); }
  37% { filter: saturate(.84) brightness(1.065) drop-shadow(2px 8px 7px rgb(5 20 11/.28)); }
  63% { filter: saturate(.84) brightness(1.005) drop-shadow(2px 8px 7px rgb(5 20 11/.28)); }
}
@keyframes finale51-closing-breeze {
  0%,100% { transform: rotate(-1.5deg); }
  52% { transform: rotate(1.8deg); }
}

@media(min-width:760px) {
  #invitation-page #travel.finale-scene .travel-stilllife { width: 100%; height: 840px; }
  #invitation-page #travel.finale-scene .travel-stilllife img { object-position: 53% 36%; }
  #invitation-page #travel.finale-scene .travel-stilllife::after {
    background: linear-gradient(180deg,#24372d 0%,rgb(36 55 45/.06) 13%,rgb(36 55 45/.16) 47%,#24372d 100%),linear-gradient(90deg,transparent 30%,rgb(36 55 45/.5));
  }
  #invitation-page #travel.finale-scene .arrival-maple { right: calc(50% - 520px); width: 225px; top: 22px; }
  #invitation-page #travel.finale-scene .travel-content {
    display: grid;
    grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr);
    align-items: center;
    gap: 50px;
    padding: 200px 42px 95px;
    min-height: 830px;
  }
  #invitation-page #travel.finale-scene .travel-content header { margin: 80px 0 0; }
  #invitation-page #travel.finale-scene .travel-content h2 { font-size: 4.2rem; }
  #invitation-page #travel.finale-scene .travel-content header>p[data-bind='travel.intro'] { font-size: .91rem; }
  #invitation-page #travel.finale-scene .guest-folio { width: 100%; margin: 0; padding: 2.2rem 29px 1.3rem; }
  #invitation-page #travel.finale-scene .guest-folio-title { font-size: 1.9rem; margin-bottom: 1rem; }
  #invitation-page #travel.finale-scene .guest-note,
  #invitation-page #travel.finale-scene .guest-note:nth-child(even) { grid-template-columns: 70px minmax(0,1fr); gap: 0 15px; }
  #invitation-page #travel.finale-scene .guest-illustration { width: 70px; max-height: 82px; }
  #invitation-page #travel.finale-scene .guest-note-copy h3 { font-size: 1.75rem; }
  #invitation-page #travel.finale-scene .guest-note-panel p { font-size: .83rem; }
  #invitation-page #countdown.finale-scene { grid-template-columns: 177px 220px; gap: 0 34px; padding: 1.4rem 25px 5rem; }
  #invitation-page #countdown.finale-scene>h2 { margin-bottom: 2rem; font-size: 4rem; }
  #invitation-page #countdown.finale-scene .autumn-hourglass { max-width: 177px; }
  #invitation-page #countdown.finale-scene .countdown-values { max-width: 220px; }
  #invitation-page #countdown.finale-scene .countdown-values span { font-size: 2.5rem; }
  #invitation-page #countdown.finale-scene .countdown-values>div:first-child span { font-size: 7rem; }
  #invitation-page #countdown.finale-scene .countdown-values small { font-size: .68rem; }
  #invitation-page #countdown.finale-scene .clock-keepsake { width: 64px; }
  #invitation-page #rsvp.finale-scene { min-height: 890px; }
  #invitation-page #rsvp.finale-scene .rsvp-art :is(img,.scene-film) { object-position: 50% 47%; }
  #invitation-page #rsvp.finale-scene .rsvp-copy { padding: 370px 30px 4rem; }
  #invitation-page #rsvp.finale-scene .rsvp-copy h2 { max-width: 500px; font-size: 4.55rem; }
  #invitation-page #rsvp.finale-scene .rsvp-copy>p[data-bind] { max-width: 380px; font-size: .92rem; }
  #invitation-page #rsvp.finale-scene .rsvp-stationery { width: 275px; }
  #invitation-page #closing.finale-scene { padding-top: .3rem; padding-bottom: 6rem; }
  #invitation-page #closing.finale-scene .closing-bough { right: max(-40px,calc(50% - 530px)); }
}
@media(max-width:359px) {
  #invitation-page #travel.finale-scene .travel-content { padding-inline: 17px; }
  #invitation-page #travel.finale-scene .guest-folio { padding-inline: 18px; }
  #invitation-page #travel.finale-scene .guest-note,
  #invitation-page #travel.finale-scene .guest-note:nth-child(even) { grid-template-columns: 54px minmax(0,1fr); gap: 0 9px; }
  #invitation-page #travel.finale-scene .guest-illustration { width: 54px; }
  #invitation-page #travel.finale-scene .guest-note-copy h3 { font-size: 1.4rem; }
  #invitation-page #travel.finale-scene .guest-note-panel p { font-size: .75rem; }
  #invitation-page #countdown.finale-scene { grid-template-columns: 105px minmax(0,151px); column-gap: 13px; padding-inline: 18px; }
  #invitation-page #countdown.finale-scene .countdown-values { column-gap: .35rem; }
  #invitation-page #rsvp.finale-scene .rsvp-copy { padding-inline: 21px; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *,
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *::before,
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *::after { animation: none!important; transition: none!important; }
  #invitation-page #travel.finale-scene .travel-stilllife,
  #invitation-page #countdown.finale-scene .hourglass-glass,
  #invitation-page #closing.finale-scene .gif-lantern { opacity: 1!important; filter: none!important; transform: none!important; }
}
body.card-preview #invitation-page :is(#travel,#countdown,#rsvp,#closing) * { animation: none!important; }