* { box-sizing: border-box; }
:root {
  --paper: #f4f0e9;
  --card: #fffdfa;
  --ink: #24221f;
  --muted: #746e65;
  --line: #ddd6cc;
  --accent: #9b8c72;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.hero {
  max-width: 850px;
  margin: 0 auto;
  padding: 86px 24px 20px;
  text-align: center;
}
.eyebrow {
  letter-spacing: .24em;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 24px;
}
h1, h2, h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}
h1 {
  font-size: clamp(52px, 8vw, 88px);
  line-height: .9;
  margin: 0 0 28px;
}
.intro {
  max-width: 650px;
  margin: auto;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}
.subintro {
  margin-top: 14px;
  color: var(--ink);
  font-size: 13px;
}
main { max-width: 1180px; margin: 0 auto; padding: 0 24px 90px; }
.registry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid rgba(36,34,31,.06);
  padding: 14px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(36,34,31,.09); }
.card-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f1ede6;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.card:nth-child(3n+2) .card-image { background: linear-gradient(135deg, #e4ddd4, #cfc7bc); }
.card:nth-child(3n) .card-image { background: linear-gradient(135deg, #ddd6cc, #eee8df); }
.card-body { padding: 20px 7px 10px; }
.card-kicker {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 600;
}
.card h3 {
  margin: 8px 0 16px;
  font-size: 29px;
  font-weight: 600;
  line-height: 1;
}
.card:nth-child(2) h3 {
  font-size: 26px;
}
.goal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}
.goal strong { color: var(--ink); font-size: 17px; font-weight: 600; }
.contribute-link {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.contribute-link span:last-child { font-size: 17px; }
footer {
  text-align:center;
  padding: 35px 20px 70px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing:.16em;
}
footer p { letter-spacing:0; color:var(--muted); font-size:12px; margin:10px 0 0; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(25,23,20,.55);
  display:none; align-items:center; justify-content:center; padding:18px;
  z-index:10; backdrop-filter: blur(5px);
}
.modal-backdrop.open { display:flex; }
.modal {
  width:min(520px, 100%); max-height:92vh; overflow:auto;
  background:var(--card); padding:38px; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.2);
}
.close { position:absolute; right:18px; top:12px; border:0; background:none; font-size:30px; cursor:pointer; color:var(--muted); }
.modal-icon { font-size:36px; margin-bottom:8px; }
.modal-kicker { font-size:9px; letter-spacing:.2em; font-weight:600; color:var(--muted); }
.modal h2 { font-size:46px; line-height:.95; margin:8px 0 12px; }
.goal-row { display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:20px 0; font-size:12px; color:var(--muted); }
.goal-row strong { color:var(--ink); }
label { font-size:12px; font-weight:600; display:block; margin-bottom:8px; }
.amount-wrap { display:flex; align-items:center; border:1px solid #bdb5aa; padding:0 14px; height:54px; }
.amount-wrap span { font-family:"Cormorant Garamond",serif; font-size:28px; }
.amount-wrap input { border:0; outline:0; background:transparent; width:100%; font-size:24px; padding-left:8px; font-family:"DM Sans",sans-serif; }
.quick-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:8px 0 20px; }
.quick-amounts button { border:1px solid var(--line); background:white; padding:9px; cursor:pointer; }
.payment-options { display:grid; gap:9px; }
.payment { border:0; text-align:left; padding:16px 18px; cursor:pointer; background:#e9e3da; color:var(--ink); }
.payment.bank:has(+ .bank-details.open) {
  background: #24221f;
  color: white;
}
.quick-amounts button.selected {
  background: #24221f;
  color: white;
}
#amount::placeholder {
  color: #c9c8c8;
}
.payment span, .payment small { display:block; }
.payment span { font-weight:600; }
.payment small { margin-top:4px; opacity:.7; font-size:11px; }
.payment.bank { background:#e9e3da; color:var(--ink); }
.payment.gc { background:#d8d1c6; color:var(--ink); }
.bank-details { display:none; margin-top:14px; padding:18px; background:#f0ebe4; }
.bank-details.open { display:block; }
.bank-details h3 { margin:0 0 10px; font-size:26px; }
.bank-details p { font-size:11px; color:var(--muted); }
dl { margin:14px 0; }
dl div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid #ddd5ca; font-size:11px; }
dt { color:var(--muted); } dd { margin:0; font-weight:600; text-align:right; }
.copy-btn { width:100%; padding:11px; border:1px solid var(--ink); background:transparent; cursor:pointer; }
.small-note { color:var(--muted); font-size:10px; line-height:1.5; margin-top:18px; text-align:center; }
.registry-photo {
  max-width: 240px;
  margin: 0 auto 60px;
}

.registry-photo img {
  width: 100%;
  display: block;
}
.registry-photo span {
  display: block;
  width: max-content;
  margin: 0 auto;
  white-space: nowrap;
}
@media (max-width: 850px) {
  .registry-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .hero { padding-top:58px; }
  h1 { font-size:49px; }
  .registry-grid { grid-template-columns:1fr; }
  .card-image { aspect-ratio:1.35/1; }
  .modal { padding:28px 22px; }
  .modal h2 { font-size:34px; }
}
#gcBtn {
  display: none;
}