*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{font-family:Arial,Helvetica,sans-serif;background:#eee;color:#17392f}
.invitation{position:relative;isolation:isolate;min-height:900px;overflow:hidden;background:var(--page);display:flex;flex-direction:column}
.art{position:absolute;inset:0;z-index:-2;background-image:url("/templates/the-dinner-invitation/creator-asset?path=assets%2Fbackdrop.png&v=1");background-repeat:no-repeat;background-size:cover;background-position:center}
.tint{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tint)}
.motion{position:absolute;z-index:0;pointer-events:none}.layout{position:relative;z-index:1;width:min(100%,720px);min-height:900px;margin:auto;padding:50px clamp(20px,5vw,52px) 45px;display:flex;flex-direction:column;gap:24px}
.concept{margin:0 0 14px;font:700 12px/1.3 Arial,sans-serif;letter-spacing:.27em;color:var(--label)}
.headline,.facts{background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 14px 38px #0002;backdrop-filter:blur(3px)}
.headline{padding:30px clamp(23px,5vw,46px);animation:arrive .95s .15s both}
.headline h1{font:normal clamp(41px,8vw,72px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 0 17px;overflow-wrap:anywhere}
.message{font:clamp(16px,2.4vw,20px)/1.45 Georgia,'Times New Roman',serif;max-width:32ch;margin:0;overflow-wrap:anywhere}
.facts{margin-top:auto;padding:26px clamp(22px,4vw,38px);animation:arrive .95s .55s both}
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #947d6299;padding-top:20px}
.facts-grid div{min-width:0}.facts-grid span{display:block;color:var(--label);font-size:10px;font-weight:700;letter-spacing:.2em;margin-bottom:8px}
.facts-grid strong{display:block;font:normal 19px/1.3 Georgia,serif;overflow-wrap:anywhere}
.facts-grid small{display:block;font:15px/1.4 Arial,sans-serif;margin-top:3px;overflow-wrap:anywhere}
.dress{font:15px/1.45 Georgia,serif;margin:22px 0 0;overflow-wrap:anywhere}.reply-cue{border-top:1px solid #947d6299;margin:20px 0 0;padding-top:16px;font:700 10px Arial,sans-serif;letter-spacing:.2em;color:var(--label)}
.spark{position:absolute;pointer-events:none;z-index:0;width:5px;height:5px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px 5px var(--spark);animation:glint 3.6s ease-in-out infinite}.spark.one{top:15%;left:16%}.spark.two{top:29%;right:15%;animation-delay:1.1s}.spark.three{bottom:23%;right:9%;animation-delay:2.1s}
@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes glint{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.72;transform:scale(1.35)}}
@keyframes cocktailSweep{from{opacity:0;transform:translateX(-45vw) rotate(-24deg)}45%{opacity:.8}to{opacity:0;transform:translateX(115vw) rotate(-24deg)}}
@keyframes goldenSweep{from{opacity:0;transform:translateX(-100%)}50%{opacity:.8}to{opacity:0;transform:translateX(100%)}}
@keyframes partyPulse{0%,100%{opacity:.08;transform:rotate(-6deg)}50%{opacity:.38;transform:rotate(8deg)}}
@keyframes candleGlow{0%,100%{opacity:.16;transform:scale(.85)}35%{opacity:.32;transform:scale(1.1)}68%{opacity:.22;transform:scale(.92)}}
@media(max-width:600px){.invitation,.layout{min-height:900px}.layout{padding:35px 18px 32px;gap:14px}.headline{padding:22px 20px}.facts{padding:21px 20px}.headline h1{font-size:clamp(38px,11vw,52px)}.message{font-size:16px}.facts-grid{gap:15px}.facts-grid strong{font-size:17px}.facts-grid small{font-size:14px}}
@media(max-width:350px){.layout{padding:27px 12px}.facts-grid{grid-template-columns:1fr;gap:13px}.facts-grid div+div{border-top:1px solid #947d6255;padding-top:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.invitation{--page:#f8f0dd;--panel:#fffaf0ed;--panel-border:#a29f7f;--label:#546449;--spark:#f2cc75;--tint:linear-gradient(180deg,#fff8ee33,#fff8ee00 70%)}.art{background-size:100% auto;background-position:center bottom}.headline{width:min(100%,600px);align-self:center;text-align:center;background:#fffaf0c9;box-shadow:none;margin-top:35px}.message{margin:auto}.facts{width:min(100%,490px);align-self:flex-end;background:#fffaf0e8}.spark{opacity:.25}.motion{left:-14%;bottom:-7%;width:70%;height:58%;border-radius:50%;background:radial-gradient(circle,#ffcb7255,transparent 63%);animation:candleGlow 3.4s ease-in-out infinite}