.brand-logo { display:block; width:150px; height:auto; object-fit:contain; }
.invitation-content .brand-logo { width:138px; margin:0 auto 6px; }
.invitation-content { padding:28px; display:flex; flex-direction:column; gap:18px; flex:1; }
.invitation-hero { aspect-ratio:16 / 10; flex:none; border-radius:12px; margin:16px 16px 0; }
.invitation-eyebrow { color:#5D222F; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; text-align:center; }
.invitation-name { font-size:15px; color:#534645; }
.invitation-title { font:400 32px/1.12 'Newsreader',serif; text-wrap:balance; overflow-wrap:anywhere; }
.invitation-meta { border-top:1px solid #E7DFD4; border-bottom:1px solid #E7DFD4; padding:16px 0; display:flex; flex-direction:column; gap:16px; }
.invitation-meta div { display:flex; flex-direction:column; gap:5px; }
.invitation-meta > div > span { color:#534645; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.invitation-meta strong { font-size:14px; font-weight:500; line-height:1.45; }
.invitation-meta small { color:#534645; font-size:13px; line-height:1.5; }
.invitation-card { background:#FFFDF9; border:1px solid #D9CFC2; border-radius:20px; overflow:hidden; }
.invitation-preview { width:320px; max-width:100%; }
.invitation-preview .invitation-content { padding:22px; gap:14px; }
.invitation-preview .brand-logo { width:124px; }
.invitation-preview .invitation-title { font-size:26px; }
.invitation-preview .invitation-name { font-size:13px; }
.invitation-preview .invitation-meta strong { font-size:13px; }
.invitation-actions { display:flex; flex-direction:column; gap:8px; }
.preview-accept, .preview-decline { height:40px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; }
.preview-accept { background:#5D222F; color:#fff; }
.preview-decline { border:1px solid #D9CFC2; }
.invitation-footnote { color:#534645; font-size:11px; text-align:center; line-height:1.5; margin-top:4px; }
.guest-identity { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.guest-avatar { width:36px; height:36px; flex:none; border-radius:50%; background:#EFE9E0; color:#5D222F; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes drawer-out { from { transform:translateX(0); } to { transform:translateX(100%); } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-out { from { opacity:1; } to { opacity:0; } }
.drawer-panel { animation:drawer-in 280ms cubic-bezier(.22,1,.36,1) both; max-width:100vw; }
.drawer-backdrop { animation:backdrop-in 280ms ease both; }
.drawer-panel.is-closing { animation:drawer-out 180ms ease-in both; pointer-events:none; }
.drawer-backdrop.is-closing { animation:backdrop-out 180ms ease-in both; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .drawer-panel, .drawer-backdrop, .drawer-panel.is-closing, .drawer-backdrop.is-closing { animation:none; } }

.invitation-hero, .event-image-thumbnail { position:relative; overflow:hidden; background:repeating-linear-gradient(135deg,#EFE9E0 0 8px,#F7F3ED 8px 16px); }
.event-image-thumbnail { width:96px; height:64px; border-radius:4px; flex:none; }
.invitation-hero img, .event-image-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }