/* Live typography aligned with the selected 1086 x 1448 invitation artwork.
   Tinos (Apache 2.0) has the same metrics as Times New Roman, so the layout holds on Android, which lacks it. */
@font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/tinos-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/tinos-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
.invitation-body { background: #f4efe6; color: #0e2f52; }
.invitation-body .invitation-shell { width: min(100%, 820px); padding: 0 0 28px; }
.invitation-body .matched-card { --u: 1cqw; container-type: inline-size; position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 0; background: #fcf8ed; box-shadow: 0 8px 45px #48305412; overflow: hidden; }
@supports not (width: 1cqw) { .invitation-body .matched-card { --u: min(1vw, 8.2px); } }
.matched-card .gold-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 0; opacity: 1; object-fit: fill; pointer-events: none; }
.matched-card .art-layers { position: absolute; inset: 0; pointer-events: none; }
.matched-card .art-layer { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; }
.matched-card .art-top { left: 0; top: 0; width: 44%; transform-origin: 0 0; }
.matched-card .art-bottom { right: 0; bottom: 0; width: 43%; transform-origin: 100% 100%; }
.matched-card .art-center { left: 25%; top: 31.7%; width: 50%; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .animated.revealed .matched-card .art-top { animation: floral-top-sway 7.5s ease-in-out infinite; }
  .animated.revealed .matched-card .art-bottom { animation: floral-bottom-sway 8.5s ease-in-out infinite; }
  .animated.revealed .matched-card .art-center { animation: floral-center-breathe 6.5s ease-in-out infinite; }
  .animated .matched-card .print-groom, .animated .matched-card .print-bride { animation: name-gloss 6.5s ease-in-out infinite; }
  .animated .matched-card .print-bride { animation-delay: .8s; }
}
@keyframes name-gloss { 0%, 20% { background-position: 0 0; } 46%, 100% { background-position: 100% 0; } }
@keyframes floral-top-sway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-3.6deg) translate(-1.4%, -1.8%); } }
@keyframes floral-bottom-sway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(3.2deg) translate(1.4%, 1.6%); } }
@keyframes floral-center-breathe { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(-2deg); } }
.matched-card .print-text { position: absolute; margin: 0; padding: 0; border: 0; color: #0e2f52; text-align: center; font-family: 'Tinos', 'Times New Roman', Times, serif; font-weight: 400; line-height: 1.15; }
.matched-card .print-opening { top: 11.7%; left: 30%; width: 40%; height: 5.4%; display: grid; place-items: center; font: 400 calc(4.4 * var(--u))/1.4 'Amiri', serif; }
.matched-card .print-event { top: 21.15%; left: 25%; width: 50%; font-size: calc(4.6 * var(--u)); letter-spacing: calc(1.2 * var(--u)); text-indent: calc(1.2 * var(--u)); text-transform: uppercase; color: #483054; }
.matched-card .print-couple { margin: 0; }
.matched-card .print-name { left: 27%; width: 46%; height: 11%; display: flex; align-items: center; justify-content: center; font-size: calc(14.1 * var(--u)); line-height: 1; letter-spacing: calc(-.5 * var(--u)); }
.matched-card .print-groom { top: 24.8%; }
.matched-card .print-bride { top: 39.4%; font-size: calc(13.5 * var(--u)); }
.matched-card .print-groom, .matched-card .print-bride { background: linear-gradient(105deg, #0e2f52 0 42%, #5f84ad 50%, #0e2f52 58% 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.matched-card .print-family { top: 49.6%; left: 20%; width: 60%; height: 13.6%; display: flex; flex-direction: column; justify-content: space-between; font-size: calc(3.05 * var(--u)); line-height: 1.13; }
.matched-card .print-family p { margin: 0; }
.matched-card .print-family .parent-names, .matched-card .print-family .family-amp { color: #483054; }
.matched-card .print-family .family-amp { font: inherit; }
.matched-card .print-greeting { top: 66.6%; left: 18%; width: 60%; height: 4.9%; display: flex; align-items: center; justify-content: center; color: #483054; font-size: calc(5.2 * var(--u)); overflow-wrap: anywhere; }
.matched-card .print-greeting span { display: block; max-width: 100%; }
.matched-card .print-particulars { position: absolute; inset: 74.3% 20% auto 29.5%; list-style: none; margin: 0; padding: 0; color: #0e2f52; font: 400 calc(3.05 * var(--u))/1.25 'Tinos', 'Times New Roman', Times, serif; }
.matched-card .print-particulars li { display: flex; align-items: flex-start; gap: calc(2.2 * var(--u)); margin: 0 0 calc(1 * var(--u)); padding: 0; }
.matched-card .print-particulars li:nth-child(n+2) { margin-left: calc(5.7 * var(--u)); }
.matched-card .print-particulars svg { width: calc(3.1 * var(--u)); height: calc(3.1 * var(--u)); flex: 0 0 calc(3.1 * var(--u)); margin-top: calc(.15 * var(--u)); }
.matched-card .print-particulars strong { display: block; font-weight: 400; }
.matched-card .print-particulars .address { display: block; font-size: calc(2.85 * var(--u)); margin-top: 0; }
.matched-card .print-presence { top: 90%; left: 24%; width: 51%; font-size: calc(2.9 * var(--u)); }
.matched-card .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invitation-tools { padding: 24px 20px 0; text-align: center; }
.invitation-tools .countdown { margin: 0 auto 22px; }
.invitation-tools .countdown[hidden] { display: none; }
.invitation-tools .location { margin: 0 auto; }
.invitation-body .rsvp-section { background: #fcf8ed; border-color: #c5a38366; border-radius: 4px; margin: 26px auto 0; color: #0e2f52; }
.invitation-body .invitation-footer { padding-top: 25px; }
.js:not(.skip-intro) .intro-stage { background: radial-gradient(ellipse 60% 42% at 50% 55%, #fcf8ed, transparent 70%); }
/* Before opening, only the intro is visible; the card then grows out of the doorway and the rest follows. */
.js .animated.has-intro:not(.revealed) .matched-card { opacity: 0; transform: scale(.9); }
.js .animated.has-intro:not(.revealed) :is(.invitation-tools, .rsvp-section, .invitation-footer) { opacity: 0; transition: none; }
.invitation-tools { transition: opacity .8s ease; }
.js .animated.has-intro.door-opening .matched-card { opacity: 1; transform: none; transition: opacity .8s ease 1.35s, transform 1.4s cubic-bezier(.2,.7,.2,1) 1.2s; }
@media (min-width: 850px) { .invitation-body .invitation-shell { padding-top: 28px; } }
@media (max-width: 550px) { .invitation-body .rsvp-section { margin-inline: 14px; padding: 28px 22px; } }
@media (prefers-reduced-motion: reduce) { .matched-card, .matched-card .art-layer { animation: none; transform: none; } }
/* Card text stays above the floral layers; the last line is kept clear of the corner bouquet. */
.matched-card .print-text, .matched-card .print-particulars { z-index: 2; }
.matched-card .print-presence { left: 21%; width: 52%; font-size: calc(2.8 * var(--u)); }
.matched-card .print-family.no-parents { justify-content: center; }
.invitation-tools .tool-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.invitation-tools .tool-actions .button { margin: 0; min-width: 0; }
.invitation-body .reply-cue { animation: none; }
@media (prefers-reduced-motion: no-preference) { .invitation-body .reply-cue span { display: inline-block; animation: nudge-down 1.8s ease-in-out infinite; } }
@keyframes nudge-down { 50% { transform: translateY(3px); } }