@font-face { font-family:'Bebas Neue'; src:url('fonts/BebasNeue-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Lovely'; src:url('fonts/Lovely.otf') format('opentype'); font-style:normal; font-weight:400; font-display:swap; }
:root { --background:#f8f5f0; --foreground:#401626; --card:#fffdf9; --card-foreground:#401626; --popover:#fffdf9; --popover-foreground:#401626; --primary:#431827; --primary-foreground:#fffaf1; --secondary:#f1e7d8; --secondary-foreground:#401626; --muted:#f1e7d8; --muted-foreground:#735b60; --accent:#bd8b2a; --accent-foreground:#401626; --destructive:#9e2838; --border:#d9c9b8; --input:#d9c9b8; --ring:#a67a2b; --radius:0.25rem; }
@theme inline { --color-background:var(--background); --color-foreground:var(--foreground); --color-card:var(--card); --color-card-foreground:var(--card-foreground); --color-popover:var(--popover); --color-popover-foreground:var(--popover-foreground); --color-primary:var(--primary); --color-primary-foreground:var(--primary-foreground); --color-secondary:var(--secondary); --color-secondary-foreground:var(--secondary-foreground); --color-muted:var(--muted); --color-muted-foreground:var(--muted-foreground); --color-accent:var(--accent); --color-accent-foreground:var(--accent-foreground); --color-destructive:var(--destructive); --color-border:var(--border); --color-input:var(--input); --color-ring:var(--ring); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,Helvetica,sans-serif; }
.site-grid { display:grid; grid-template-columns:minmax(340px,44%) minmax(0,56%); min-height:100vh; }
.invitation-panel { background:#431827; display:flex; align-items:center; justify-content:center; padding:clamp(20px,4vw,68px); }
.invitation-image { width:100%; max-width:535px; height:auto; display:block; box-shadow:0 24px 60px #21081138; }
.content-panel { display:flex; align-items:center; padding:clamp(35px,6vw,100px) clamp(24px,6.5vw,108px); }
.content-inner { width:100%; max-width:620px; margin:auto; }
.eyebrow { color:#a77725; font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:.81rem; margin:0 0 18px; }
h1,h2,p { margin-top:0; } h1 { font-family:'Lovely',cursive; font-size:clamp(3.6rem,6vw,6rem); line-height:1.3; font-weight:400; letter-spacing:0; margin-bottom:24px; } h1 em { display:block; color:#b18129; font-style:normal; font-weight:400; margin-top:.04em; }
.lead { max-width:510px; font-size:1.13rem; line-height:1.55; color:#6c5057; margin-bottom:34px; }
.event-facts { display:grid; grid-template-columns:1fr 1fr; gap:23px 22px; padding:24px 0 28px; border-top:1px solid #d8c7b3; border-bottom:1px solid #d8c7b3; }
.fact { display:flex; flex-direction:column; font-size:1rem; line-height:1.5; } .fact-label { font-size:.79rem; text-transform:uppercase; letter-spacing:.18em; color:#a77725; font-weight:700; margin-bottom:8px; } .fact strong { font-size:1rem; font-weight:700; } .fact a { align-self:flex-start; margin-top:5px; color:#7d5720; text-underline-offset:3px; font-weight:600; }
.rsvp-section { padding-top:34px; } .section-heading { display:flex; align-items:baseline; gap:15px; } .section-heading .eyebrow { margin:0; } h2 { font-family:Georgia,'Times New Roman',serif; font-size:2.4rem; font-weight:400; letter-spacing:-.04em; margin:0 0 20px; }
.section-heading h2 { font-family:'Bebas Neue',Impact,sans-serif; font-size:3.25rem; line-height:1; letter-spacing:.04em; }
form label,fieldset legend { display:block; font-size:.92rem; font-weight:700; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
form label > input:not([type=radio]), form textarea, form select { display:block; margin-top:8px; width:100%; border:1px solid #cbb9a7; background:#fffefa; border-radius:2px; box-shadow:none; color:#401626; font:inherit; font-weight:400; font-size:1rem; padding:12px 13px; height:auto; min-height:47px; }
form label > input:focus, form textarea:focus, form select:focus { outline:2px solid #ac7f2d; outline-offset:1px; } form input::placeholder,form textarea::placeholder { color:#8c7b77; }
.attendance { border:0; padding:22px 0 0; margin:0; } .attendance legend { padding:0; } .choice { display:inline-flex; align-items:center; gap:9px; padding:11px 16px; margin:10px 8px 0 0; border:1px solid #cbb9a7; background:#fffefa; cursor:pointer; font-weight:600; font-size:.93rem; min-height:46px; } .choice.selected { border-color:#a77725; background:#f8ecd4; } .choice input { accent-color:#451b2a; width:16px; height:16px; margin:0; }
.guest-field,.message-field { margin-top:20px; } .message-field span { color:#846e70; font-weight:400; } .message-field textarea { resize:vertical; } .honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.submit-button { margin-top:20px; width:100%; height:52px; border-radius:2px; background:#451b2a; color:white; font-size:.91rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; justify-content:space-between; padding:0 21px; } .submit-button:hover { background:#60263a; } .submit-button span { color:#d9a63d; font-size:1.3rem; } .form-error { color:#9e2838; margin:16px 0 0; line-height:1.4; }
.hotel-note { margin:30px 0 0; color:#765e60; font-size:.92rem; line-height:1.5; } .hotel-note span { font-weight:700; color:#431827; }
.success { padding:32px; border:1px solid #b68833; background:#fffaf0; } .success-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#b68833; color:white; margin-bottom:15px; font-size:1.25rem; } .success h2 { margin-bottom:10px; } .success p { font-size:1rem; line-height:1.5; } .text-button { border:0; background:transparent; padding:0; color:#6b3b31; text-decoration:underline; text-underline-offset:4px; cursor:pointer; font-size:1rem; }
@media(max-width:900px) { .site-grid { grid-template-columns:1fr; } .invitation-panel { padding:28px; height:390px; overflow:hidden; align-items:flex-start; } .invitation-image { max-width:430px; } .content-panel { padding:42px 24px 65px; } .content-inner { max-width:620px; } }
@media(max-width:560px) { .invitation-panel { height:310px; padding:18px; } .invitation-image { width:min(100%,360px); } .content-panel { padding:39px 22px 55px; } h1 { font-size:clamp(3.2rem,15vw,3.65rem); } .lead { font-size:1rem; } .event-facts { gap:20px; } .fact { grid-column:span 2; } .form-row { grid-template-columns:1fr; gap:15px; } .choice { display:flex; margin-right:0; } }
[hidden] { display:none !important; }
.submit-button { display:flex; align-items:center; border:0; cursor:pointer; }
.submit-button:disabled { opacity:.65; cursor:wait; }