/* The invitation is a single composition: envelope, flap copy, then card. */
.message-flower { opacity: .48; }
.hero-flower { opacity: .62; }
.invitation {
  min-height: 0;
  padding: 16px 12px 32px;
}
.envelope {
  container-type: inline-size;
  display: grid;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  background: none;
}
.envelope-art {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  max-width: none;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.hero-intro {
  grid-area: 1 / 1;
  align-self: start;
  width: 60%;
  justify-self: center;
  margin-top: calc(43% + 24px);
  color: var(--rust);
}
.hero-intro .italic { margin: 0; font-size: clamp(17px, 4.5cqw, 24px); line-height: 1.25; }
.hero-intro > p:last-child { margin: 2px 0 0; font-size: clamp(13px, 3.6cqw, 19px); line-height: 1.3; }
.invitation-card {
  grid-area: 1 / 1;
  align-self: start;
  margin: calc(56% + 72px) 11% 8%;
  padding: 34px 12px 22px;
  border: 10px solid var(--burgundy);
  outline: none;
  color: var(--burgundy);
  font-family: 'Libre Baskerville', Georgia, serif;
  /* Concave corners echo the printed card in the reference. */
  background:
    radial-gradient(circle at top left, var(--burgundy) 13px, transparent 14px),
    radial-gradient(circle at top right, var(--burgundy) 13px, transparent 14px),
    radial-gradient(circle at bottom left, var(--burgundy) 13px, transparent 14px),
    radial-gradient(circle at bottom right, var(--burgundy) 13px, transparent 14px),
    var(--cream);
}
.seal { width: 72px; height: 72px; top: -43px; }
.celebration-label {
  margin: 0 0 2px;
  color: var(--rust);
  font-size: clamp(11px, 2.8cqw, 15px);
  line-height: 1.2;
}
.invitation-card h1 {
  font-size: clamp(35px, 11.5cqw, 60px);
  line-height: 1.12;
  margin: 0 0 3px;
  white-space: nowrap;
}
.birthday { flex-direction: column; gap: 2px; }
.age { font-size: clamp(62px, 17cqw, 88px); font-style: italic; line-height: 1; letter-spacing: -5px; }
.age sup { display: inline-block; margin-left: 10px; font-size: clamp(25px, 6.5cqw, 34px); letter-spacing: -1px; top: 1px; }
.birthday p { font-size: clamp(13px, 3.5cqw, 18px); line-height: 1.25; text-align: center; color: var(--rust); }
.date-block {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 6px auto 0;
  padding-top: 6px;
  border: 0;
  display: grid;
  grid-template-columns: 1fr .65fr 1fr;
}
.date-block::before { content: ''; position: absolute; top: 0; left: 20%; width: 60%; height: 1px; background: var(--burgundy); }
.date-block p { font-size: clamp(11px, 3.05cqw, 16px); line-height: 1.25; white-space: nowrap; }
.date-block small { font-size: clamp(9px, 2.05cqw, 11px); }
.date-block .day { font-size: clamp(52px, 13.5cqw, 70px); line-height: 1; }
.month {
  width: 60%;
  max-width: none;
  margin: 0 auto 9px;
  padding: 3px 0 7px;
  font-size: clamp(11px, 2.8cqw, 15px);
  letter-spacing: 0;
  color: var(--rust);
}
.venue { color: var(--rust); }
.map-link { display: flex; flex-direction: column; align-items: center; gap: 5px; width: fit-content; min-height: 44px; margin: 0 auto 6px; text-decoration: none; }
.map-link > span { font-size: clamp(10px, 2.3cqw, 12px); text-decoration: underline; text-underline-offset: 4px; }
.map-link:hover { color: var(--burgundy); }
.location-details { justify-content: center; margin: 2px auto 0; }
#guest-count { width: 100%; min-height: 48px; border: 1px solid #e4cfbb; border-radius: 9px; background: #fffdf9; padding: 12px 14px; color: var(--ink); font: inherit; cursor: pointer; }
#guest-count option { font: inherit; }
.rsvp-content .submit { font: 600 19px/1.3 'Cormorant Garamond', Georgia, serif; }
.header nav { align-items: center; }
.header nav a { display: flex; align-items: center; justify-content: center; line-height: 1.3; }
.music-toggle { position: fixed; z-index: 12; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9bda4; border-radius: 999px; padding: 9px 13px; background: rgba(255,253,249,.92); color: var(--burgundy); box-shadow: 0 6px 18px #633b2e1c; font: 12px 'Libre Baskerville', Georgia, serif; }
.music-toggle > span:first-child { font-size: 18px; line-height: 1; }
.music-toggle.is-playing { background: var(--burgundy); color: var(--cream); }
.music-toggle:hover { transform: translateY(-1px); }
.rsvp-photo .script { font-size: clamp(30px, 5vw, 42px); line-height: 1.2; margin: 0 0 14px; }
.rsvp-photo .quote-line { display: block; }
.rsvp-photo .quote-line > span { display: inline-block; }
.rsvp-photo .quote-line > span + span { margin-left: .13em; }
#guest-count:focus-visible { outline: 3px solid var(--olive); outline-offset: 5px; }
.venue .pin { width: 28px; height: 40px; object-fit: contain; margin: 0 auto; }
.venue h2 { font-size: clamp(10px, 2.65cqw, 14px); font-weight: 700; line-height: 1.25; margin: 0; }
.venue p { font-size: clamp(9px, 2.25cqw, 12px); line-height: 1.25; margin: 2px 0; }
.venue .address { font-size: clamp(9px, 2.15cqw, 11px); line-height: 1.2; margin: 11px 0 0; }
.invitation-card .text-link { font-size: 10px; padding: 5px 0 2px; }
.invitation > .scroll-cue { position: relative; margin: -16px auto 0; }

/* The floral artwork occupies its own flow row below all countdown content. */
.dresscode { padding: 65px 0 0; min-height: 0; }
.section-content { padding: 0 20px; }
.dresscode h2.formal { font-size: clamp(18px, 3.4vw, 24px); margin: 0 0 8px; letter-spacing: 1.4px; }
.dresscode .translation { margin: 10px 0 0; }
.palette { margin: 28px 0 30px; }
.countdown-wrap { max-width: 420px; padding: 30px 0 24px; background: var(--cream); }
.countdown { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 5px; }
.countdown div { min-width: 0; }
.countdown span { font-size: clamp(40px, 8.2vw, 62px); }
.countdown b { font-size: clamp(27px, 5vw, 40px); }
.countdown small { letter-spacing: 1px; }
.botanical-bg {
  position: relative;
  inset: auto;
  width: 100%;
  height: clamp(210px, 55vw, 370px);
  background-position: center bottom;
  background-size: 100% auto;
  opacity: 1;
}
.message { min-height: calc(100vh - 78px); min-height: calc(100svh - 78px); min-height: calc(100dvh - 78px); padding: 32px 24px; }
.message-content { width: 100%; max-width: 440px; }
.message-portrait { width: clamp(195px, 56vw, 280px); height: auto; margin: 0 auto; object-fit: contain; }
.message h2 { font-size: clamp(38px, 8.5vw, 56px); line-height: 1.1; margin: 0 0 5px; text-shadow: 0 2px 3px #441a2580, 0 5px 12px #441a253d; }
.message-content > .eyebrow { font-size: 10px; line-height: 1.3; letter-spacing: 1.4px; margin: 0 0 16px; }
.message-content > p:not(.eyebrow) { font-size: 16px; line-height: 1.22; margin: 15px auto 0; max-width: 390px; }
.message .english-message { margin-top: 0; }
.message .verse { font-size: 16px !important; margin-top: 19px; }
.message .scroll-cue { margin-top: 16px; font-size: 13px; }
.message .scroll-cue span { font-size: 19px; margin-top: 2px; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.3,1); }
.reveal.is-visible, .reveal:focus-within { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .message { min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); min-height: calc(100dvh - 62px); padding: 24px 22px; }
  .message-content > p:not(.eyebrow) { font-size: 15px; }
  .message .verse { font-size: 15px !important; }
  .seal { width: 62px; height: 62px; top: -36px; }
  .hero-intro { margin-top: calc(47% + 24px); }
  .invitation-card { margin-top: calc(62% + 72px); border-width: 9px; padding: 32px 10px 20px; }
  .dresscode { padding-top: 50px; }
  .palette { gap: clamp(9px, 3vw, 18px); }
  .countdown-wrap { padding-top: 26px; }
  .countdown-wrap .eyebrow { letter-spacing: 1.5px; }
  .music-toggle { right: 12px; bottom: 12px; padding: 8px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}