:root { --sky-top:      #a9dcef; --sky-bottom:   #eef8fc; --maroon:       #9c1c1f; --maroon-deep:  #6f1013; --maroon-glow:  #c23a34; --gold:         #d9a635; --gold-light:   #f3d98a; --gold-pale:    #fbeecb; --cream:        #fdf6e6; --ink-green:    #2f5233; --font-heading: 'Cinzel', serif; --font-display: 'Playfair Display', serif; --font-body:    'EB Garamond', serif; --card-max: 440px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: var(--sky-bottom); color: var(--cream); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.sky { position: relative; overflow: hidden; width: 100%; padding: 56px 24px 32px; text-align: center; background: url('assets/bg-sky.jpg') center top / cover no-repeat; }
.card { position: relative; width: 100%; padding: 0 26px 48px; background: radial-gradient(120% 60% at 50% 0%, var(--maroon-glow) 0%, var(--maroon) 45%, var(--maroon-deep) 100%); text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35); }
.sky-inner,
.card-inner { max-width: clamp(360px, 92vw, 980px); margin: 0 auto; }
.invite-header { margin: 0 -26px 18px; width: calc(100% + 52px); }
.lantern { position: absolute; width: 100px; opacity: 0.9; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15)); animation: drift 7s ease-in-out infinite; }
.lantern--1 { top: 8%;  left: 10%; animation-delay: 0s; }
.lantern--2 { top: 4%;  left: 62%; width: 34px; animation-delay: 1.4s; }
.lantern--3 { top: 20%; left: 78%; width: 40px; animation-delay: 0.7s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
.monogram { width: clamp(90px, 10vw, 160px); margin: 0 auto 8px; }
.temple-hero { width: clamp(260px, 45vw, 640px); margin: 0 auto; }
.invocation { margin: 14px 0 6px; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--maroon-deep); }
.divider { width: clamp(200px, 40vw, 420px); margin: 10px auto; opacity: 0.85; }
.names { margin: 8px 0 26px; }
.names__badge { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(160px, 20vw, 260px); aspect-ratio: 1; justify-content: center; background: radial-gradient(circle at 50% 35%, var(--gold-light) 0%, var(--gold) 70%, #b9821f 100%); clip-path: polygon(100.00% 50.00%, 97.87% 53.59%, 93.51% 56.56%, 90.95% 59.35%, 92.05% 62.97%, 94.68% 67.54%, 95.05% 71.69%, 91.57% 74.00%, 86.35% 74.79%, 82.84% 76.19%, 82.25% 79.93%, 82.65% 85.19%, 81.17% 89.09%, 77.04% 89.66%, 72.00% 88.11%, 68.22% 87.84%, 66.08% 90.96%, 64.15% 95.87%, 61.13% 98.75%, 57.15% 97.46%, 53.29% 93.88%, 50.00% 92.00%, 46.71% 93.88%, 42.85% 97.46%, 38.87% 98.75%, 35.85% 95.87%, 33.92% 90.96%, 31.78% 87.84%, 28.00% 88.11%, 22.96% 89.66%, 18.83% 89.09%, 17.35% 85.19%, 17.75% 79.93%, 17.16% 76.19%, 13.65% 74.79%, 8.43% 74.00%, 4.95% 71.69%, 5.32% 67.54%, 7.95% 62.97%, 9.05% 59.35%, 6.49% 56.56%, 2.13% 53.59%, 0.00% 50.00%, 2.13% 46.41%, 6.49% 43.44%, 9.05% 40.65%, 7.95% 37.03%, 5.32% 32.46%, 4.95% 28.31%, 8.43% 26.00%, 13.65% 25.21%, 17.16% 23.81%, 17.75% 20.07%, 17.35% 14.81%, 18.83% 10.91%, 22.96% 10.34%, 28.00% 11.89%, 31.78% 12.16%, 33.92% 9.04%, 35.85% 4.13%, 38.87% 1.25%, 42.85% 2.54%, 46.71% 6.12%, 50.00% 8.00%, 53.29% 6.12%, 57.15% 2.54%, 61.13% 1.25%, 64.15% 4.13%, 66.08% 9.04%, 68.22% 12.16%, 72.00% 11.89%, 77.04% 10.34%, 81.17% 10.91%, 82.65% 14.81%, 82.25% 20.07%, 82.84% 23.81%, 86.35% 25.21%, 91.57% 26.00%, 95.05% 28.31%, 94.68% 32.46%, 92.05% 37.03%, 90.95% 40.65%, 93.51% 43.44%, 97.87% 46.41%); margin: 0 auto; box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4); }
.names__bride,
.names__groom { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--ink-green); }
.names__with { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-green); opacity: 0.85; }
.event { margin: 6px 0 22px; }
.medallion { display: block; width: clamp(150px, 18vw, 240px); aspect-ratio: 1; margin: 0 auto 14px; padding: 8px; background: radial-gradient(circle at 50% 30%, var(--gold-light) 0%, var(--gold) 65%, #b9821f 100%); clip-path: polygon(100.00% 50.00%, 97.87% 53.59%, 93.51% 56.56%, 90.95% 59.35%, 92.05% 62.97%, 94.68% 67.54%, 95.05% 71.69%, 91.57% 74.00%, 86.35% 74.79%, 82.84% 76.19%, 82.25% 79.93%, 82.65% 85.19%, 81.17% 89.09%, 77.04% 89.66%, 72.00% 88.11%, 68.22% 87.84%, 66.08% 90.96%, 64.15% 95.87%, 61.13% 98.75%, 57.15% 97.46%, 53.29% 93.88%, 50.00% 92.00%, 46.71% 93.88%, 42.85% 97.46%, 38.87% 98.75%, 35.85% 95.87%, 33.92% 90.96%, 31.78% 87.84%, 28.00% 88.11%, 22.96% 89.66%, 18.83% 89.09%, 17.35% 85.19%, 17.75% 79.93%, 17.16% 76.19%, 13.65% 74.79%, 8.43% 74.00%, 4.95% 71.69%, 5.32% 67.54%, 7.95% 62.97%, 9.05% 59.35%, 6.49% 56.56%, 2.13% 53.59%, 0.00% 50.00%, 2.13% 46.41%, 6.49% 43.44%, 9.05% 40.65%, 7.95% 37.03%, 5.32% 32.46%, 4.95% 28.31%, 8.43% 26.00%, 13.65% 25.21%, 17.16% 23.81%, 17.75% 20.07%, 17.35% 14.81%, 18.83% 10.91%, 22.96% 10.34%, 28.00% 11.89%, 31.78% 12.16%, 33.92% 9.04%, 35.85% 4.13%, 38.87% 1.25%, 42.85% 2.54%, 46.71% 6.12%, 50.00% 8.00%, 53.29% 6.12%, 57.15% 2.54%, 61.13% 1.25%, 64.15% 4.13%, 66.08% 9.04%, 68.22% 12.16%, 72.00% 11.89%, 77.04% 10.34%, 81.17% 10.91%, 82.65% 14.81%, 82.25% 20.07%, 82.84% 23.81%, 86.35% 25.21%, 91.57% 26.00%, 95.05% 28.31%, 94.68% 32.46%, 92.05% 37.03%, 90.95% 40.65%, 93.51% 43.44%, 97.87% 46.41%); box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4); }
.medallion img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.event__heading { margin: 4px 0 10px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: 0.14em; color: var(--gold-light); display: flex; align-items: center; justify-content: center; gap: 10px; }
.vel { width: 14px; opacity: 0.9; }
.vel--right { transform: scaleX(-1); }
.event__line { margin: 2px 0; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--cream); }
.event__link { display: inline-block; margin-top: 8px; font-size: 0.92rem; color: var(--gold-light); text-decoration: underline; }
.event__link:hover,
.event__link:focus-visible { color: var(--cream); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .lantern { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 380px) { .card { padding: 0 18px 40px; }
  .invite-header { margin: 0 -18px 18px; width: calc(100% + 36px); }
  .names__badge, .medallion { width: 150px; }
  .event__heading { font-size: 1.45rem; }
}