:root{
  --bg: #faf9fb;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#9a6b2f;          /* warm gold accent */
  --brand-2:#5b6b9a;        /* soft dusk blue */
  --card:#ffffff;
  --ring: rgba(154,107,47,.35);
  --shadow: 0 10px 25px rgba(16,24,40,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:16px}

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:20px 16px 8px;
  background:
    radial-gradient(1200px 400px at 50% -50%, #fff 30%, transparent 60%),
    linear-gradient(180deg, #fff, #f6f6f8);
  border-bottom:1px solid #eee;
}
.hero-media{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:24px;
  box-shadow: var(--shadow);
}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-text{
  text-align:center;
  padding:6px 4px 2px;
}
.hero-text h1{
  margin:0;
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing:.5px;
}
.subtitle{
  margin:.25rem 0 .5rem;
  font-family:"Playfair Display",serif;
  font-size:clamp(18px,3.5vw,24px);
  color:var(--brand);
}
.meta{margin:.2rem 0;color:var(--muted)}
.cta-note{margin:.6rem 0 0;color:#334155}

.card{
  margin:16px auto 28px;
  padding:16px;
  max-width:880px;
}
.rsvp{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  border:1px solid #f1f1f4;
}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;color:var(--muted)}
.field input,
.field select,
.field textarea{
  appearance:none;
  width:100%;
  font:inherit;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  outline:none;
  transition:.15s border-color,.15s box-shadow;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--ring);
}
.field.full{grid-column:1/-1}
.hidden{position:absolute!important;left:-9999px}

.agree{display:flex;align-items:center;gap:8px;font-size:14px;color:#334155;margin-top:4px}
.agree input{width:18px;height:18px}

.btn{
  display:inline-block;
  border-radius:999px;
  padding:12px 18px;
  text-decoration:none;
  font-weight:600;
  border:1px solid #d1d5db;
  background:#fff;
  color:#1f2937;
  transition:.15s transform,.15s box-shadow;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),#caa96c);
  color:#fff;border-color:transparent;
}
.btn.outline{
  background:transparent;color:#1f2937;border-color:#cbd5e1
}
.rsvp .privacy{font-size:12.5px;color:var(--muted);margin-top:10px}

.success{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px;
  border:1px solid #eef2f7;
  box-shadow: var(--shadow);
  text-align:center;
}
.success h2{margin:0 0 6px;font-family:"Playfair Display",serif;font-size:28px}
.success p{color:#374151}

.footer{
  text-align:center;
  padding:18px;
  color:#6b7280;
  font-size:13px;
}

/* larger screens */
@media (min-width: 720px){
  .hero{grid-template-columns: 1fr 1.1fr; align-items:center; padding:32px 24px 12px}
  .hero-text{text-align:left;padding:0 12px}
  .card{padding:0 24px}
  .grid{grid-template-columns: repeat(2,1fr); gap:14px}
  .field.full{grid-column:1/3}
  .rsvp{padding:24px}
}