@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@500;600;700&display=swap");
:root { --ink: #193e2a; --muted-ink: #54715d; --cream: #f7f2e7; --card: #fffdf8; --gold: #c8953c; --gold-pale: #f2dfb8; --line: rgba(25, 62, 42, .16); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Montserrat, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 540px; margin: 0 auto; padding: 16px 12px 36px; }
.invite { overflow: hidden; border-radius: 18px 18px 6px 6px; box-shadow: 0 14px 35px rgba(25, 62, 42, .14); background: #fffdf8; }
.invite img { display: block; width: 100%; height: auto; }
.rsvp-card { position: relative; margin: -8px 0 0; padding: 28px 22px 24px; border: 1px solid var(--gold-pale); border-radius: 4px 4px 18px 18px; background: var(--card); box-shadow: 0 16px 34px rgba(25, 62, 42, .11); text-align: center; }
.rsvp-card::before { content: "✦"; display: block; margin: -4px 0 12px; color: var(--gold); font-size: 19px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 400; line-height: 1; }
.guest-greeting { min-height: 1.5em; margin: 10px auto 22px; color: var(--muted-ink); font-size: .9rem; line-height: 1.55; }
.name-field { display: block; margin-bottom: 18px; text-align: left; }
.name-field span, legend { display: block; margin-bottom: 7px; color: var(--muted-ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
input:focus { outline: 3px solid rgba(200, 149, 60, .28); border-color: var(--gold); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } legend { text-align: left; }
.response-buttons { display: grid; gap: 9px; }
button { min-height: 52px; border: 0; border-radius: 9px; color: var(--ink); cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
button:focus-visible, .calendar-link:focus-visible { outline: 3px solid rgba(200, 149, 60, .45); outline-offset: 3px; } button:hover { transform: translateY(-1px); } button:disabled { cursor: wait; opacity: .64; transform: none; }
.yes { background: var(--ink); color: #fff; box-shadow: 0 5px 0 #102819; } .maybe { background: var(--gold-pale); } .no { background: #eef1eb; color: #365642; }
.form-message { min-height: 1.5em; margin: 14px 0 0; color: var(--muted-ink); font-size: .86rem; line-height: 1.45; }.form-message.error { color: #9d3c31; }.form-message.success { color: var(--ink); font-weight: 600; }
.calendar-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-decoration-color: var(--gold); text-underline-offset: 4px; }.calendar-link span { color: var(--gold); }
@media (min-width: 580px) { main { padding-top: 28px; }.rsvp-card { padding: 32px 34px 28px; }.response-buttons { grid-template-columns: 1.15fr 1fr 1.2fr; }.response { min-height: 58px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }