: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);
  text-align: center;
}

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

.muted{
  color:#4f6f72;
  text-align: center;
}

/* 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;
}

/* ------------------------------------------------ */
/* PHOTO LAYOUT */
/* ------------------------------------------------ */

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

/* First photo becomes hero */

.grid img:first-child{
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* Remaining photos */

.grid img:not(:first-child){
  aspect-ratio: 4 / 3;
}

.photo{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

/* Mobile */

@media (max-width:700px){

  .grid{
    grid-template-columns: 1fr;
  }

  .grid img:first-child{
    aspect-ratio: 4 / 3;
  }

}

/* ------------------------------------------------ */
/* PARTY DETAILS 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 BUTTONS */
/* ------------------------------------------------ */

.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;
}

/* ------------------------------------------------ */
/* BANNER */
/* ------------------------------------------------ */

.banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mint);
}

.bannerImg{
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.banner::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
  background: linear-gradient(
    to bottom,
    rgba(209,232,226,0) 0%,
    rgba(209,232,226,1) 100%
  );
}

/* Desktop banner */

@media (min-width:900px){
  .bannerImg{
    height:320px;
  }
}

/* Mobile banner */

@media (max-width:600px){
  .bannerImg{
    height:180px;
  }
}