:root{
  --mint:#D1E8E2;
  --cyan:#19747E;
  --blue:#A9D6E5;
  --platinum:#E2E2E2;
  --white:#ffffff;
  --text:#123436;

  --card-bg:#ffffff;
  --border:#d9e5e3;
  --shadow: 0 12px 35px rgba(25,116,126,0.12);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--mint), var(--platinum));
  color:var(--text);
}

.wrap{
  max-width: 900px;
  margin:0 auto;
  padding: 28px 18px 60px;
}

/* Header */

.top{
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  color:var(--cyan);
}

.brandMark{
  width:36px;
  height:36px;
  border-radius:10px;
  background: var(--blue);
  display:grid;
  place-items:center;
}

/* Card */

.card{
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}

/* Typography */

h1{
  margin: 6px 0 10px;
  font-size: 34px;
  color: var(--cyan);
}

h2{
  margin: 18px 0 10px;
  font-size: 20px;
  color: var(--cyan);
}

.muted{
  color:#4f6f72;
}

/* Buttons */

.btn{
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  background: var(--cyan);
  color:white;
  font-weight:700;
  cursor:pointer;
  transition: 0.2s ease;
}

.btn:hover{
  background:#145b62;
}

.btnSecondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--cyan);
  background: transparent;
  color: var(--cyan);
  font-weight:700;
  text-decoration:none;
  transition: 0.2s ease;
}

.btnSecondary:hover{
  background: var(--blue);
}

/* Inputs */

input, textarea{
  width:100%;
  padding: 12px;
  border-radius: 10px;
  border:1px solid var(--border);
  font-size: 16px;
}

input:focus, textarea:focus{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* Layout grids */

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top: 12px;
}

@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

.photo{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius: 14px;
  border:1px solid var(--border);
}

/* Key value blocks */

.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 12px;
}

@media (max-width: 860px){
  .kv{ grid-template-columns: 1fr; }
}

.kvBox{
  background: var(--mint);
  border-radius: 14px;
  padding: 14px;
}

.kvLabel{
  font-size:13px;
  color:#35696f;
}

.kvValue{
  font-weight:700;
  margin-top:4px;
}

/* Gift pills */

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.pill{
  border:1px solid var(--cyan);
  border-radius:999px;
  padding: 8px 14px;
  color:var(--cyan);
  text-decoration:none;
  font-weight:700;
  transition:0.2s ease;
}

.pill:hover{
  background: var(--blue);
}

/* RSVP Embed */

.embedWrap{
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
}

.embedWrap iframe{
  width:100%;
  height:850px;
  border:0;
}

/* Footer */

.footer{
  text-align:center;
  margin-top:20px;
  color:#5b8084;
}