/* Decor only. Keep the invitation's typography, layout and interactions in style.css.
   Four complementary tones: deep olive, ivory, natural sage and soft champagne. */
:root {
  --olive: #4f5b43;
  --olive-deep: #3d4734;
  --ivory: #faf6ec;
  --sage: #8b947e;
  --champagne: #cbbd9e;
  --wine: var(--olive);
  --wine-deep: var(--olive-deep);
  --cream: var(--ivory);
  --paper: var(--ivory);
  --muted: rgba(250, 246, 236, .84);
  --gold: var(--champagne);
}

body, .invitation-shell {
  background: var(--ivory);
  color: var(--olive);
}
.paper-grain::before { opacity: .085; }
.cover-castle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: .045;
}
.cover-kicker, .cover-kicker-script, .cover-kicker-title,
.cover.is-opening .cover-kicker-after, .cover.is-open .cover-kicker-after {
  color: var(--olive);
}
.envelope-art {
  background: var(--olive);
  box-shadow: 0 14px 30px rgba(61, 71, 52, .16);
}
.envelope-closed-body {
  background-color: var(--olive);
  box-shadow: 0 0 0 1px rgba(61, 71, 52, .12);
}
/* Tone only the envelope artwork; the wedding photographs retain their colors. */
.envelope-bg, .envelope-cover-art, .envelope-closed-body, .envelope-flap {
  filter: saturate(.46) contrast(.94) brightness(1.06);
}
.envelope-open:hover { filter: drop-shadow(0 8px 12px rgba(61, 71, 52, .16)); }
.envelope-open.is-tapped { filter: drop-shadow(0 12px 16px rgba(61, 71, 52, .2)); }
.envelope-art::after {
  border-color: rgba(203, 189, 158, .32);
  box-shadow: 0 0 0 5px rgba(203, 189, 158, .08);
  animation: none;
}
.cover .envelope-flower, .envelope-closed-body::after {
  filter: saturate(.64) contrast(.96) brightness(1.03);
}

/* Matte olive cards and a fine champagne edge, with an open center for the copy. */
#site .burgundy-panel, #site .wedding-countdown {
  background: var(--olive);
  color: var(--ivory);
  border: 1px solid rgba(203, 189, 158, .58);
  box-shadow: 0 8px 24px rgba(61, 71, 52, .1),
              inset 0 0 0 5px rgba(250, 246, 236, .025);
}
.invitation-panel::before, .reception-panel::before, .timeline-panel::before,
.timeline-paper { opacity: .1; }
.family-divider, .date-divider { background: rgba(203, 189, 158, .48); }
#site .section-title, #site .guestbook-content, #site .footer { color: var(--olive); }
#site .wedding-countdown h2, #site .countdown-unit strong { color: var(--ivory); }
#site .countdown-date, #site .countdown-unit span { color: rgba(250, 246, 236, .86); }
#site .countdown-unit {
  border-color: rgba(203, 189, 158, .26);
  background: rgba(250, 246, 236, .075);
}
.timeline-dot::before { background: rgba(203, 189, 158, .48); }
.timeline-dot::after {
  border-color: var(--champagne);
  background: var(--ivory);
  box-shadow: 0 0 0 3px rgba(250, 246, 236, .06);
}

/* Use the existing botanical cutouts at their natural proportions. */
#site .floral-decor, #site .panel-flower,
#site .timeline-flower, #site .guestbook-flower {
  position: absolute;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  animation: none;
  filter: saturate(.64) contrast(.96) brightness(1.035);
  opacity: .96;
}
#site .invitation-panel > .panel-flower-left {
  top: -44px;
  left: -84px;
  right: auto;
  bottom: auto;
  width: clamp(130px, 25vw, 170px);
  transform: rotate(-6deg);
}
#site .invitation-panel > .ceremony-floral-bottom {
  top: auto;
  right: -38px;
  bottom: -22px;
  left: auto;
  width: clamp(170px, 32vw, 240px);
  transform: scaleX(-1);
}
#site .album-floral-left, #site .album-floral-right {
  z-index: 0;
  bottom: 18px;
  width: clamp(160px, 32vw, 270px);
  opacity: .9;
}
#site .album-floral-left { left: -22px; transform: none; }
#site .album-floral-right { right: -22px; transform: scaleX(-1); }
.album-section > .section-title, .album-viewer, .album-thumbs {
  position: relative;
  z-index: 2;
}
#site .reception-panel > .panel-flower-reception {
  top: auto;
  right: auto;
  bottom: -24px;
  left: -62px;
  width: clamp(150px, 28vw, 210px);
  transform: rotate(-8deg);
}
#site .timeline-panel > .timeline-flower {
  top: auto;
  right: -36px;
  bottom: -30px;
  left: auto;
  width: clamp(145px, 27vw, 195px);
  transform: scaleX(-1);
}
#site .wedding-countdown > .countdown-floral,
#site .wedding-countdown > .countdown-petal,
#site .wedding-countdown > .countdown-leaf,
#site .wedding-countdown > .countdown-sprig {
  filter: saturate(.64) contrast(.96) brightness(1.035);
}
#site .wedding-countdown > .countdown-floral { opacity: .96; }
#site .wedding-countdown > .countdown-petal { opacity: .8; }
#site .invitation-panel > .panel-flower-left,
#site .invitation-panel > .ceremony-floral-bottom,
#site .album-floral-left, #site .album-floral-right,
#site .reception-panel > .panel-flower-reception,
#site .timeline-panel > .timeline-flower,
#site .guestbook-flower, #site .gift-floral {
  filter: saturate(.64) contrast(.96) brightness(1.035);
}
#site .timeline li time > img { filter: saturate(.5) contrast(.96); }

/* A flexible paper border keeps the complete guestbook inside its decoration. */
.guestbook-paper { display: none; }
.guestbook-section::before {
  position: absolute;
  z-index: 0;
  inset: 88px max(12px, calc((100% - 560px) / 2)) 26px;
  border: 1px solid rgba(203, 189, 158, .7);
  border-radius: 18px;
  background: var(--ivory);
  box-shadow: 0 4px 18px rgba(61, 71, 52, .045),
              inset 0 0 0 4px rgba(203, 189, 158, .06);
  content: "";
  pointer-events: none;
}
#site .guestbook-flower {
  top: auto;
  right: -18px;
  bottom: 24px;
  left: auto;
  width: clamp(125px, 26vw, 180px);
  transform: scaleX(-1) rotate(-5deg);
}
#site .wish-form input, #site .wish-form textarea {
  background: rgba(255, 254, 250, .94);
  border-color: rgba(139, 148, 126, .54);
  color: var(--olive-deep);
}
#site .wish-form input::placeholder, #site .wish-form textarea::placeholder {
  color: #7b8271;
}
#site .magic-button { background: #ece6d7; color: var(--olive); }
#site .wish-submit { background: var(--olive); color: var(--ivory); }
#site .wish-list article, #site .wish-suggestion {
  background: #fffdf7;
  color: var(--olive-deep);
  border-color: rgba(139, 148, 126, .35);
  box-shadow: none;
}
#site .wish-list time { color: #747d68; }
#site .wish-suggestion:hover, #site .wish-suggestion:focus-visible { background: #eeecdf; }
#site .rsvp-link {
  background: #e6dbc2;
  color: var(--olive-deep);
  box-shadow: inset 0 0 0 1px rgba(250, 246, 236, .3);
}

/* Keep the gift button clear; its circular olive setting is a decorative layer. */
#site .gift-teaser .gift-envelope-button { background: transparent; color: var(--olive); }
.gift-envelopes::after {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: min(100%, 290px);
  aspect-ratio: 1;
  border: 1px solid rgba(203, 189, 158, .35);
  border-radius: 50%;
  background: var(--olive);
  transform: translate(-50%, -50%);
  content: "";
  pointer-events: none;
}
.gift-envelopes::before { background: rgba(61, 71, 52, .12); }
#site .gift-envelopes > img { filter: saturate(.55) contrast(.95) brightness(1.04); }
#site .gift-floral {
  right: calc(50% - 162px);
  bottom: 26px;
  width: clamp(145px, 29vw, 190px);
  transform: scaleX(-1);
}
.gift-tap-hint { color: var(--olive); }

/* Continue the same palette through the existing dialogs and controls. */
.album-card {
  border-color: #fffdf7;
  box-shadow: 0 12px 28px rgba(61, 71, 52, .16);
}
.album-card.is-active {
  box-shadow: 0 16px 32px rgba(61, 71, 52, .22), 0 0 0 3px #fffdf7;
}
.album-thumbs button.active { box-shadow: 0 0 0 3px rgba(79, 91, 67, .09); }
.album-arrow, .album-dialog-close, .album-dialog-arrow {
  background: var(--ivory);
  color: var(--olive);
  box-shadow: 0 3px 12px rgba(61, 71, 52, .1);
}
.album-arrow:hover { background: #eee8d9; box-shadow: 0 5px 16px rgba(61, 71, 52, .15); }
.album-dialog, .site-dialog { background: var(--ivory); color: var(--olive); }
.album-dialog::backdrop, .site-dialog::backdrop { background: rgba(35, 42, 30, .78); }
.site-dialog > header { background: var(--olive); color: var(--ivory); }
.site-dialog > header h2 { color: var(--ivory); }
.rsvp-form input, .rsvp-form select { border-color: rgba(139, 148, 126, .55); }
.gift-accounts button { background: #eae4d5; color: var(--olive); }
.music-toggle {
  background: rgba(250, 246, 236, .96);
  color: var(--olive);
  border-color: rgba(139, 148, 126, .48);
  box-shadow: 0 4px 14px rgba(61, 71, 52, .12);
}
.music-toggle.is-playing { background: var(--olive); color: var(--ivory); border-color: var(--sage); }

@media (max-width: 650px) {
  #site .invitation-panel > .panel-flower-left { top: -38px; left: -62px; width: 120px; }
  #site .invitation-panel > .ceremony-floral-bottom { right: -36px; bottom: -21px; width: 165px; }
  #site .album-floral-left, #site .album-floral-right { bottom: 18px; width: 155px; }
  #site .reception-panel > .panel-flower-reception { left: -46px; bottom: -22px; width: 145px; }
  #site .timeline-panel > .timeline-flower { right: -32px; bottom: -25px; width: 132px; }
  #site .guestbook-flower { right: -20px; bottom: 27px; width: 128px; }
  #site .gift-floral { right: calc(50% - 143px); bottom: 30px; width: 150px; }
  .guestbook-section::before { top: 82px; }
  .gift-envelopes::after { width: 265px; max-width: 100%; }
}