:root {
  --bg: #f4e8d5;
  --bg-soft: #f9f0e1;
  --card: #fdf7ec;
  --ink: #352b1e;
  --muted: #82705a;
  --gold: #b3893f;
  --gold-dark: #8d6a2f;
  --line: #e2d1b2;
  --shadow: 0 10px 30px rgba(90, 70, 40, .10);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -100px, #fbf2e2 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: "PT Serif", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: "Playfair Display", "PT Serif", Georgia, serif; }

a { color: var(--gold-dark); }

/* ---------- Hero ---------- */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 20px 40px;
  text-align: center;
}

.kicker {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.fifty {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(96px, 22vw, 160px);
  line-height: 1;
  background: linear-gradient(160deg, #d1a959 10%, #8d6a2f 55%, #c9a253 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.name {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-size: clamp(38px, 8vw, 56px);
  color: var(--gold-dark);
  margin: 4px 0 10px;
}

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  margin: 14px auto 18px;
  max-width: 420px;
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.rule span { font-size: .7rem; }

.lead { max-width: 560px; margin: 0 auto 14px; }

.address { color: var(--muted); font-size: .95rem; margin: 0 0 26px; }

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.solid {
  background: linear-gradient(160deg, #c39b4d, #8d6a2f);
  color: #fff9ec;
  box-shadow: 0 6px 18px rgba(141, 106, 47, .35);
}
.btn.outline {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: transparent;
}
.btn.wide { width: 100%; }
.btn.small { padding: 9px 18px; font-size: .92rem; }
.btn.ghost {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  padding: 6px 10px;
}
.btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Sections ---------- */

.section { max-width: 1020px; margin: 0 auto; padding: 44px 20px; }

.sec-title {
  text-align: center;
  font-size: clamp(26px, 5vw, 34px);
  margin: 0 0 2px;
}
.sec-title::before { content: "◆  "; color: var(--gold); font-size: .55em; vertical-align: middle; }
.sec-title::after  { content: "  ◆"; color: var(--gold); font-size: .55em; vertical-align: middle; }

.sec-sub {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 30px;
}

/* ---------- Программа ---------- */

.days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 16px;
  box-shadow: var(--shadow);
  text-align: center;
}
.day-main { border-color: var(--gold); }

.day-emoji { font-size: 34px; margin-bottom: 6px; }
.day h3 { margin: 0; font-size: 1.35rem; }
.weekday { color: var(--muted); font-style: italic; margin: 2px 0 12px; font-size: .92rem; }

.day ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.day li {
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: .95rem;
}
.day li b { color: var(--gold-dark); white-space: nowrap; }

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: .8rem;
  color: var(--muted);
  font-style: italic;
}

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.note {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: .92rem;
  color: #5d4f3c;
}

/* ---------- Вишлист ---------- */

.intro { max-width: 640px; margin: 0 auto 30px; text-align: center; }

.gifts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.gift {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gift.taken { opacity: .82; }
.gift.mine { border-color: var(--gold); box-shadow: 0 10px 30px rgba(141, 106, 47, .18); }

.gift-emoji {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 30px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.gift h3 { margin: 0; font-size: 1.18rem; }
.gift p { margin: 0; font-size: .93rem; color: #5d4f3c; flex-grow: 1; }

.links { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  font-size: .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  color: var(--gold-dark);
  background: var(--bg-soft);
  white-space: nowrap;
}
.link-chip:hover { border-color: var(--gold); }
.link-chip::after { content: " ↗"; font-size: .75em; }

.gift-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .9rem;
  text-align: center;
}
.badge.taken { background: #eee3cd; color: #7b6a50; }
.badge.mine  { background: linear-gradient(160deg, #c39b4d, #8d6a2f); color: #fff9ec; }
.badge.multi { background: var(--bg-soft); border: 1px dashed var(--line); color: var(--muted); font-size: .82rem; }

.loading { text-align: center; color: var(--muted); grid-column: 1/-1; }

/* ---------- Форма ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

.form { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.form label, .field { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: #5d4f3c; }
.field-label { font-size: .92rem; }

.form input[type=text], .form input[type=number],
.form select, .form textarea, #nameInput {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus, #nameInput:focus {
  outline: 2px solid rgba(179, 137, 63, .45);
  border-color: var(--gold);
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .two { grid-template-columns: 1fr; } }

.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill input { position: absolute; opacity: 0; }
.pill span {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  background: #fffdf7;
  transition: all .12s;
}
.pill input:checked + span {
  background: linear-gradient(160deg, #c39b4d, #8d6a2f);
  color: #fff9ec;
  border-color: transparent;
}

#rsvpDetails { display: flex; flex-direction: column; gap: 16px; }
#rsvpDetails.hidden { display: none; }

.form-status { text-align: center; color: var(--gold-dark); margin: 0; }

/* ---------- Диалог, тост, футер ---------- */

dialog.card { max-width: 420px; border: 1px solid var(--line); }
dialog::backdrop { background: rgba(53, 43, 30, .45); }
dialog h3 { margin: 0 0 6px; }
.muted { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #3a2f20;
  color: #fdf7ec;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .95rem;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}

footer { text-align: center; padding: 30px 20px 50px; color: var(--muted); }
footer .rule { margin-bottom: 20px; }
.foot-links { font-size: .9rem; }